/* Nostrix — homepage */

/* ---------- Hero ---------- */
.hero { position: relative; padding-block-start: calc(var(--nav-h) + clamp(30px, 5.2vw, 60px)); text-align: center; overflow: clip; }
.hero-copy { position: relative; z-index: 2; }
.hero .eyebrow { font-size: clamp(15px, 1.6vw, 19px); margin-block-end: clamp(10px, 1.6vw, 18px); }
.hero-title { font-size: clamp(56px, 10.6vw, 132px); line-height: .94; font-weight: 600; letter-spacing: -.05em; }
.hero-title .line { display: block; overflow: hidden; padding-block-end: .1em; margin-block-end: -.1em; }
.hero-title .line > span { display: inline-block; }
html[lang="ar"] .hero-title { line-height: 1.3; }
html[lang="ar"] .hero-title .line { display: inline-block; vertical-align: top; padding-block: .22em .3em; margin-block: -.22em -.3em; }
html[lang="ar"] .hero-title .line + .line { margin-inline-start: .22em; }
.hero-sub { font-size: clamp(19px, 2.3vw, 26px); line-height: 1.3; color: var(--text-2); max-width: 620px; margin: clamp(18px, 2.4vw, 28px) auto 0; text-wrap: balance; }
.hero .btn-row { justify-content: center; margin-block-start: clamp(24px, 3vw, 34px); }
.hero-note { margin-block-start: 18px; font-size: 14px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note .ic { width: 15px; height: 15px; color: var(--brand-a); }

.js .hero-title .line > span { transform: translateY(108%); animation: rise 1.1s var(--ease-out) forwards; animation-delay: calc(.08s + var(--i, 0) * .1s); }
.js .hero-fade { opacity: 0; transform: translateY(14px); animation: fade-up .9s var(--ease-out) forwards; animation-delay: calc(.32s + var(--i, 0) * .09s); }
@keyframes rise { to { transform: none; } }
@keyframes fade-up { to { opacity: 1; transform: none; } }

/* Pillars: portrait work rising from the fold, outside to centre */
.pillars {
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 1.3vw, 18px);
  height: clamp(300px, 44vw, 600px); margin-block-start: clamp(30px, 4.2vw, 52px); overflow: clip; direction: ltr;
}
.pillar { flex: 0 0 clamp(116px, 15.4vw, 232px); height: calc(var(--h) * 1%); transform: translateY(calc(var(--p, 0) * var(--k, 0) * 54px)); will-change: transform; }
.pillar-in { height: calc(100% + 60px); border-radius: clamp(14px, 2vw, 28px) clamp(14px, 2vw, 28px) 0 0; overflow: hidden; background: var(--tile); }
.pillar img { width: 100%; height: 100%; object-fit: cover; }
.js .pillar-in { transform: translateY(102%); animation: rise 1.25s var(--ease-out) forwards; animation-delay: calc(.38s + var(--s, 0) * .09s); }
@media (max-width: 640px) {
  .pillars { height: clamp(260px, 78vw, 420px); }
  .pillar { flex-basis: 23vw; }
  .pillar:first-child, .pillar:last-child { display: none; }
}

/* ---------- Statement (words light up with scroll) ---------- */
.statement-wrap { padding-block: clamp(72px, 12vw, 160px); }
.statement { font-size: clamp(28px, 4.7vw, 60px); line-height: 1.12; font-weight: 600; letter-spacing: -.03em; max-width: 980px; text-wrap: balance; }
.statement .w { opacity: .16; transition: opacity .35s linear; }
.statement .w.on { opacity: 1; }
html[lang="ar"] .statement { line-height: 1.5; }

/* ---------- Services bento ---------- */
.bento { display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(300px, 34vw, 440px);
  padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-xl); overflow: hidden; background: var(--tile);
  color: var(--text); text-decoration: none; isolation: isolate;
}
.tile-a { grid-column: span 4; }
.tile-b { grid-column: span 2; }
.tile-c { grid-column: span 2; }
.tile-wide { grid-column: 1 / -1; min-height: 0; }
.tile-media { position: absolute; inset: 0; z-index: -2; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.tile:hover .tile-media img { transform: scale(1.045); }
.tile-photo { color: #fff; }
.tile-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .78) 100%); }
.tile-photo .tile-text { color: rgba(255, 255, 255, .84); }
.tile-kicker { font-size: 14px; font-weight: 600; margin-block-end: 6px; }
.tile-photo .tile-kicker { color: #fff; opacity: .9; }
.tile-title { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; font-weight: 600; letter-spacing: -.028em; }
.tile-text { font-size: 16px; line-height: 1.4; color: var(--text-2); margin-block-start: 8px; max-width: 420px; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 18px; }
.tile-price { font-size: 14px; font-weight: 500; }
.tile-go {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--text); color: var(--bg); transition: transform .35s var(--ease-out);
}
.tile-photo .tile-go { background: #fff; color: #000; }
.tile:hover .tile-go { transform: scale(1.1) rotate(-45deg); }
html[dir="rtl"] .tile-go .ic { transform: scaleX(-1); }
html[lang="ar"] .tile-title { line-height: 1.35; }

/* Graphic tiles (no photo) */
.tile-art { position: absolute; inset-block-start: 0; inset-inline: 0; height: 56%; z-index: -1; display: grid; place-items: center; overflow: hidden; }
.art-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(78%, 250px); transform: rotate(-6deg) translateY(8%); }
.art-social i { aspect-ratio: 1; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--fill-2); transition: transform .7s var(--ease-out); transition-delay: calc(var(--n) * 30ms); }
.tile:hover .art-social i { transform: translateY(-6px); }
.art-brand { display: flex; align-items: center; gap: 12px; }
.art-brand svg { width: clamp(110px, 12vw, 150px); height: auto; transition: transform .8s var(--ease-out); }
.tile:hover .art-brand svg { transform: scale(1.06); }
.art-swatches { display: grid; gap: 8px; }
.art-swatches i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); transition: transform .6s var(--ease-out); }
.tile:hover .art-swatches i:nth-child(1) { transform: translateX(6px); }
.tile:hover .art-swatches i:nth-child(3) { transform: translateX(-6px); }
.art-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: min(80%, 250px); }
.art-cal i { aspect-ratio: 1; border-radius: 7px; background: var(--fill); }
.art-cal i.on { background: var(--grad); }
.tile:hover .art-cal i.on { animation: pop .6s var(--ease-out) both; animation-delay: calc(var(--n) * 60ms); }
@keyframes pop { 40% { transform: scale(1.22); } }

.launch { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 40px; align-items: center; }
.launch-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.launch-list div { padding: 16px; border-radius: var(--r-md); background: var(--fill); font-size: 14px; color: var(--text-2); line-height: 1.4; }
.launch-list strong { display: block; color: var(--text); font-weight: 600; font-size: 15px; margin-block-end: 4px; }
.launch .btn-row { margin-block-start: 20px; }

@media (max-width: 900px) {
  .tile-a, .tile-b, .tile-c { grid-column: span 3; }
  .launch { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .tile-a, .tile-b, .tile-c { grid-column: 1 / -1; }
  .tile { min-height: 320px; }
  .launch-list { grid-template-columns: 1fr; }
}

/* ---------- Work carousel ---------- */
.work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.work-head .head { margin-block-end: 0; }
.rail {
  display: flex; gap: clamp(10px, 1.4vw, 18px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  margin-block-start: clamp(28px, 4vw, 48px); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.shot {
  position: relative; flex: none; height: clamp(300px, 40vw, 500px); aspect-ratio: var(--ar); max-width: 86vw; border-radius: var(--r-lg);
  overflow: hidden; scroll-snap-align: start; background: var(--tile); cursor: zoom-in; padding: 0; color: #fff; text-align: start;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.shot:hover img { transform: scale(1.04); }
.shot-cap {
  position: absolute; inset-inline: 0; inset-block-end: 0; padding: 40px 16px 14px; font-size: 14px; font-weight: 500;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .7)); display: flex; align-items: center; gap: 8px;
}
.shot-play { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #000; display: grid; place-items: center; flex: none; }
.shot-play .ic { width: 13px; height: 13px; margin-inline-start: 2px; }
.rail-nav { display: flex; gap: 10px; justify-content: flex-end; margin-block-start: 22px; }
.paddle { width: 40px; height: 40px; border-radius: 50%; background: var(--fill-2); display: grid; place-items: center; transition: background-color .2s, opacity .2s, transform .2s var(--ease); }
.paddle:hover { background: var(--line-2); }
.paddle:active { transform: scale(.92); }
.paddle[disabled] { opacity: .3; pointer-events: none; }
.rail-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Social ---------- */
.social-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); align-items: start; }
.social-card { border-radius: var(--r-xl); background: var(--tile); border: 1px solid var(--line); overflow: hidden; }
.social-top { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.social-ava { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.social-ava.ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.social-ava.tt { background: #000; border: 1px solid var(--line); }
.social-ava .ic { width: 20px; height: 20px; }
.social-id { margin-inline-end: auto; min-width: 0; }
.social-id strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; }
.social-id span { font-size: 13px; color: var(--text-3); }
.social-body { background: #fff; color: #111; min-height: 380px; position: relative; display: grid; container-type: inline-size; }
.social-body > * { grid-area: 1 / 1; }
.social-body iframe, .social-body blockquote { margin: 0 auto !important; max-width: 100% !important; min-width: 0 !important; width: 100% !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
/* The embeds start hidden and 1px tall until they report their size. Showing them at a sensible size
   straight away means they still appear if that report is slow or never arrives. */
.social-body iframe { visibility: visible !important; max-height: none !important; align-self: start; }
[data-feed="instagram"] .social-body iframe { min-height: calc(66.67cqi + 224px); }
[data-feed="tiktok"] .social-body iframe { min-height: 480px; }
.social-wait { display: grid; place-content: center; justify-items: center; gap: 14px; padding: 28px; text-align: center; font-size: 15px; color: #555; }
.social-wait.is-hidden { visibility: hidden; }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #ddd; border-top-color: #a455e8; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.social-tabs { display: none; margin-block-end: 18px; }
@media (max-width: 820px) {
  .social-grid { grid-template-columns: 1fr; }
  .social-tabs { display: inline-flex; }
  .social-card[data-off] { display: none; }
}

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); position: relative; counter-reset: step; }
.steps::before { content: ""; position: absolute; inset-block-start: 21px; inset-inline: 22px; height: 2px; background: var(--line); }
.steps::after {
  content: ""; position: absolute; inset-block-start: 21px; inset-inline-start: 22px; width: calc(100% - 44px); height: 2px; background: var(--grad);
  transform: scaleX(var(--p, 0)); transform-origin: left center;
}
html[dir="rtl"] .steps::after { transform-origin: right center; }
.step { position: relative; z-index: 1; }
.step-n {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 600;
  background: var(--bg-2); border: 2px solid var(--line-2); margin-block-end: 20px; transition: background .5s var(--ease), color .5s, border-color .5s;
}
.step.is-on .step-n { background: var(--grad); color: #0b0b0e; border-color: transparent; }
.step p { color: var(--text-2); margin-block-start: 8px; font-size: 16px; line-height: 1.45; }
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .steps::before { inset-block: 22px; inset-inline-start: 21px; inset-inline-end: auto; width: 2px; height: auto; }
  .steps::after { inset-block-start: 22px; inset-inline-start: 21px; width: 2px; height: calc(100% - 44px); transform: scaleY(var(--p, 0)); transform-origin: center top !important; }
  .step { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; }
  .step-n { grid-row: span 2; margin: 0; }
  .step h3 { align-self: end; }
}

/* ---------- Pricing teaser ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.plan { padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-xl); background: var(--tile); border: 1px solid transparent; display: flex; flex-direction: column; gap: 6px; position: relative; text-decoration: none; transition: border-color .3s, transform .5s var(--ease-out); }
.plan:hover { border-color: var(--line-2); transform: translateY(-4px); }
.plan-kicker { font-size: 14px; color: var(--text-2); font-weight: 500; }
.plan-name { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.plan-price { font-size: clamp(34px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; margin-block-start: 12px; }
.plan-price small { font-size: 15px; font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.plan ul { margin-block: 16px 22px; display: grid; gap: 9px; font-size: 15px; color: var(--text-2); }
.plan li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.4; }
.plan li .ic { margin-block-start: 3px; width: 15px; height: 15px; color: var(--brand-a); }
.plan .link { margin-block-start: auto; }
.offer { margin-block-start: clamp(14px, 2vw, 22px); padding: 20px 24px; border-radius: var(--r-lg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.offer p { flex: 1 1 320px; color: var(--text-2); font-size: 15px; }
.offer strong { color: var(--text); font-weight: 600; }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }

/* ---------- Reviews ---------- */
.reviews-rail { padding-block-end: 4px; }
.review { flex: 0 0 min(86vw, 420px); scroll-snap-align: start; padding: 28px; border-radius: var(--r-xl); background: var(--tile); display: flex; flex-direction: column; gap: 16px; }
.review-stars { color: var(--brand-a); letter-spacing: 2px !important; font-size: 15px; }
.review blockquote { font-size: 19px; line-height: 1.42; font-weight: 500; letter-spacing: -.012em; }
.review footer { margin-block-start: auto; font-size: 14px; color: var(--text-2); display: grid; gap: 2px; }
.review footer strong { color: var(--text); font-weight: 600; font-size: 15px; }
.review footer > * { justify-self: start; }
.review footer a { color: var(--link); text-decoration: none; }

/* ---------- FAQ ---------- */
.faq { border-block-start: 1px solid var(--line); }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; font-size: clamp(18px, 2vw, 21px); font-weight: 600; letter-spacing: -.016em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--fill); position: relative; transition: transform .4s var(--ease-out), background-color .2s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; inset: 14px 9px; background: currentColor; border-radius: 2px; }
.faq summary i::after { transform: rotate(90deg); }
.faq summary:hover i { background: var(--fill-2); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq-a { padding-block-end: 24px; color: var(--text-2); max-width: 720px; }
.faq details[open] .faq-a { animation: fade-up-in .5s var(--ease-out); }
@keyframes fade-up-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.contact-side { position: sticky; inset-block-start: calc(var(--nav-h) + 28px); }
.contact-list { margin-block-start: 30px; display: grid; gap: 4px; }
.contact-list a { display: flex; align-items: center; gap: 14px; padding: 12px; margin-inline: -12px; border-radius: var(--r-md); text-decoration: none; transition: background-color .2s; }
.contact-list a:hover { background: var(--fill); }
.contact-list .ci { width: 42px; height: 42px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; flex: none; }
.contact-list small { display: block; font-size: 13px; color: var(--text-3); }
.contact-list span { font-size: 16px; font-weight: 500; }
.call-card { margin-block-start: 22px; padding: 22px; border-radius: var(--r-lg); background: var(--tile); }
.call-card p { font-size: 15px; color: var(--text-2); margin-block: 6px 16px; }
.brief { padding: clamp(22px, 3.4vw, 40px); border-radius: var(--r-xl); background: var(--tile); border: 1px solid var(--line); display: grid; gap: 26px; }
.brief-step { display: grid; gap: 14px; }
.brief-step > .label { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.brief-step > .label b { width: 26px; height: 26px; border-radius: 50%; background: var(--fill-2); display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.phone-row { display: grid; grid-template-columns: 132px 1fr; gap: 8px; direction: ltr; }
.brief-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .contact-side { position: static; } }
@media (max-width: 480px) { .brief-actions { grid-template-columns: 1fr; } .phone-row { grid-template-columns: 116px 1fr; } }

/* ---------- Final call to action ---------- */
.cta-band { text-align: center; }
.cta-band .h2 { font-size: clamp(40px, 7vw, 84px); letter-spacing: -.04em; }