/* Self-hosted fonts. Serving these from the same origin removes the
   fonts.googleapis.com CSS hop and the fonts.gstatic.com connection -
   two round trips that were blocking first render. unicode-range keeps
   the Arabic subset from downloading on the English page. */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/archivo-black-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/cairo-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/cairo-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --orange:#ff4f2e;
  --orange-ink:#c73c20;
  --teal:#035551;
  --teal-deep:#023f3c;
  --cream:#fdfbee;
  --ink:#0c1210;
  --white:#ffffff;
}

*{box-sizing:border-box;}
[data-reveal]{
  transition: opacity .6s cubic-bezier(.16,.8,.24,1), transform .6s cubic-bezier(.16,.8,.24,1);
}
.js-anim [data-reveal].pre{ opacity:0; transform:translateY(24px); }
.js-anim .fgrid .fcard:nth-child(2){ transition-delay:.08s; }
.js-anim .fgrid .fcard:nth-child(3){ transition-delay:.16s; }
.js-anim .fgrid .fcard:nth-child(4){ transition-delay:.24s; }
.js-anim .fgrid .fcard:nth-child(5){ transition-delay:.32s; }
.js-anim .paths .path-card:nth-child(2){ transition-delay:.1s; }
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[lang="ar"] body{ font-family:'Cairo','Inter',sans-serif; }
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{
  max-width:1080px;
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,40px);
}
.brand-name{text-transform:none;}
h1,h2{
  font-family:'Archivo Black','Inter',sans-serif;
  font-weight:400;
  line-height:1.04;
  margin:0;
  text-wrap:balance;
  letter-spacing:-0.01em;
  text-transform:uppercase;
}
/* Arabic must never carry letter-spacing - it breaks glyph joining */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{
  font-family:'Cairo','Inter',sans-serif;font-weight:800;letter-spacing:0;
}
html[lang="ar"] .eyebrow,
html[lang="ar"] nav.links,
html[lang="ar"] .lang-btn,
html[lang="ar"] .store-btn small{ letter-spacing:0; }
.eyebrow{
  font-weight:800;
  font-size:12.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--orange-ink);
}
p{line-height:1.6;margin:0;}

/* visually hidden, still read by screen readers + crawlers */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:999;
  background:var(--teal);color:var(--cream);padding:12px 20px;
  border-radius:0 0 10px 0;font-weight:700;font-size:14px;text-decoration:none;
}
.skip-link:focus{inset-inline-start:0;}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px;}

/* ---------- buttons ---------- */
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.split-cta{
  display:inline-flex;border-radius:999px;overflow:hidden;
  font-weight:800;font-size:13.5px;text-decoration:none;
}
.split-cta span{padding:13px 22px;white-space:nowrap;}
.split-cta .a{background:var(--teal);color:var(--cream);}
.split-cta .b{background:var(--orange);color:var(--ink);}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:999px;
  font-weight:800;font-size:14px;text-decoration:none;
  border:1.5px solid transparent;transition:opacity .15s ease;
}
.pill:hover{opacity:0.85;}
.pill.orange{background:var(--orange);color:var(--ink);}
.pill.teal{background:var(--teal);color:var(--cream);}
.pill.outline{border-color:var(--ink);background:transparent;}
.pill svg{width:15px;height:15px;flex:none;}
html[lang="ar"] .pill svg{transform:scaleX(-1);}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:rgb(253 251 238 / 0.9);backdrop-filter:blur(10px);
  border-bottom:1px solid rgb(3 85 81 / 0.1);
}
.nav-inner{
  max-width:1080px;margin-inline:auto;
  padding:14px clamp(18px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand img{height:24px;width:auto;}
nav.links{
  display:flex;gap:26px;font-size:12px;font-weight:800;
  letter-spacing:0.06em;text-transform:uppercase;
}
nav.links a{text-decoration:none;opacity:0.72;white-space:nowrap;}
nav.links a:hover{opacity:1;}
@media (max-width:960px){ nav.links{display:none;} }

/* Between the point where the links are still shown and roughly 1140px, the
   brand + four links + language switch + split CTA are wider than the row.
   body{overflow-x:hidden} was hiding the result, so the CTA silently lost its
   right edge. Tighten the row through that band instead of clipping it. */
@media (min-width:961px) and (max-width:1140px){
  .nav-inner{gap:12px;}
  nav.links{gap:15px;font-size:11px;letter-spacing:0.04em;}
  .lang-btn{padding:6px 10px;font-size:10.5px;}
  .split-cta{font-size:12px;}
  .split-cta span{padding:11px 15px;}
}

.lang-switch{
  display:flex;align-items:center;background:rgb(3 85 81 / 0.08);
  border-radius:999px;padding:3px;flex:none;
}
.lang-btn{
  font-family:'Inter',sans-serif;
  border:none;background:transparent;cursor:pointer;
  font-size:11.5px;font-weight:800;letter-spacing:0.03em;
  padding:7px 13px;border-radius:999px;color:var(--ink);opacity:0.6;
  text-decoration:none;display:inline-block;
  transition:background .2s ease, opacity .2s ease, color .2s ease;
}
.lang-btn.active{background:var(--teal);color:var(--cream);opacity:1;}
.lang-btn:hover{opacity:1;}

/* ---------- hero reel ----------
   Vertical video is the product itself (a CMe is a 9:16 reel), so the hero
   shows one instead of a landscape screenshot. Edge-to-edge on mobile — the
   first screen a visitor sees is the reel, full height, headline burned over
   it like a Story/Reel caption. On wider screens the same markup becomes a
   contained, phone-shaped card instead of stretching a portrait video across
   a landscape viewport. */
/* ---------- hero reel ----------
   "Be Seen" is never printed over the video and the video is never its
   backdrop - they are two separate blocks. Desktop: the original two-column
   hero, text beside a framed video card, video portrait instead of
   landscape. Mobile: stacked instead of side-by-side - text reads on the
   plain page background first, exactly like it does on desktop, then the
   reel follows as its own full-screen block. */
.hero-reel{
  position:relative;
  width:100%;
  /* .hero-reel-mark bleeds 60px past the inline-end edge on purpose (a
     corner watermark) - without clipping it here, that overflow silently
     inflates the whole page's layout viewport on mobile (RTL especially:
     inset-inline-end is the LEFT edge there, so the 60px bleed pushed every
     element on the page 60px off its correct position) */
  overflow:hidden;
}
@media (min-width:761px){
  .hero-reel{
    display:grid;grid-template-columns:1.1fr 0.75fr;
    gap:clamp(28px,5vw,54px);align-items:center;
    padding-block:clamp(50px,8vw,86px) clamp(44px,7vw,72px);
    /* mobile text/video stay edge-to-edge on purpose; desktop needs the same
       max-width:1080px rail as every other section (.wrap), which this
       section skips so the mobile pieces can go full-bleed */
    max-width:1080px;margin-inline:auto;
    padding-inline:clamp(18px,4vw,40px);
  }
}

/* ---- text: same look everywhere now, just a normal hero intro ---- */
.reel-content{
  position:relative;
  padding-block:clamp(40px,8vw,64px) clamp(28px,6vw,40px);
  padding-inline:clamp(18px,4vw,40px);
  max-width:1080px;margin-inline:auto;
}
.reel-content .eyebrow{color:var(--orange-ink);}
.reel-content h1{font-size:clamp(38px,8vw,64px);color:var(--ink);}
.reel-content .kicker{
  font-size:clamp(19px,2.4vw,24px);margin-top:10px;color:var(--teal);
  font-weight:700;font-family:'Inter';
}
html[lang="ar"] .reel-content .kicker{font-family:'Cairo','Inter',sans-serif;}
.reel-content p.body{
  margin-top:20px;font-size:16px;max-width:46ch;opacity:0.85;color:var(--ink);
}
.reel-content .btn-row{margin-top:26px;}
.follow{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:30px;}
.follow-label{font-weight:800;font-size:12.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink);opacity:0.6;}
html[lang="ar"] .follow-label{letter-spacing:0;}
.follow .social svg{width:36px;height:36px;}
@media (min-width:761px){
  .reel-content{padding:0;max-width:none;margin-inline:0;}
}

/* ---- video: its own block, full screen on mobile ---- */
.hero-reel-mark{
  position:absolute;inset-inline-end:-60px;bottom:-60px;z-index:0;
  width:280px;height:auto;opacity:0.10;pointer-events:none;
}
@media (min-width:761px){ .hero-reel-mark{display:none;} }

.reel-frame{
  position:relative;width:100%;overflow:hidden;
}
@media (max-width:760px){
  /* full screen MINUS the sticky header, so the two together fill exactly
     one screen below the text block */
  .reel-frame{
    height:calc(100vh - 71px);
    background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 80%);
    scroll-snap-align:start;
  }
  @supports (height:100svh){ .reel-frame{height:calc(100svh - 71px);} }
}
@media (max-width:400px){
  .reel-frame{height:calc(100vh - 107px);}
  @supports (height:100svh){ .reel-frame{height:calc(100svh - 107px);} }
}
@media (min-width:761px){
  .reel-frame{
    max-width:380px;justify-self:center;aspect-ratio:9/16;
    border-radius:24px;box-shadow:0 30px 60px -24px rgb(0 0 0 / 0.5);
  }
}
@media (max-height:500px) and (max-width:960px){
  /* a 9:16 video stretched edge-to-edge in landscape phone orientation crops
     to almost nothing but a chin - short viewports get a contained card,
     width capped to whatever a 9:16 box can be before its derived height
     overflows what's left below the header (71px, this width range's
     single-row header - see the nav breakpoints) */
  .reel-frame{
    height:auto;scroll-snap-align:none;
    width:min(300px, 88vw, calc((100vh - 71px - 28px) * 9 / 16));
    aspect-ratio:9/16;margin-inline:auto;
    border-radius:32px;box-shadow:0 44px 90px -30px rgb(0 0 0 / 0.55);
  }
}
.reel-frame video,
.reel-frame .reel-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.reel-frame .reel-poster{ z-index:1; }
.reel-frame video{ z-index:0; background:var(--ink); }
/* once the real video can paint a frame, drop the poster rather than wait
   for it to fully end — avoids a double-layer flash on slow connections */
.reel-frame.is-playing .reel-poster{ opacity:0; transition:opacity .25s ease; }
/* no caption to protect anymore, just enough of a top scrim that the sound
   button stays legible over bright footage */
.reel-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgb(12 18 16 / 0.45) 0%, transparent 22%);
}
@media (min-width:761px){ .reel-scrim{display:none;} }
.reel-top{
  position:absolute;inset-inline:0;top:0;z-index:3;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 18px 0;
  display:flex;justify-content:flex-end;
}
@media (min-width:761px){ .reel-top{padding:14px;} }
.reel-sound{
  width:40px;height:40px;border-radius:50%;flex:none;
  border:1.5px solid rgb(253 251 238 / 0.5);
  background:rgb(12 18 16 / 0.35);backdrop-filter:blur(6px);
  color:var(--cream);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s ease;
}
.reel-sound:hover{ background:rgb(12 18 16 / 0.55); }
.reel-sound svg{width:18px;height:18px;}
/* the [hidden] attribute's UA-stylesheet display:none doesn't reliably apply
   to inline <svg> in every engine - force it explicitly */
.reel-sound svg[hidden]{display:none;}

.reel-scroll-cue{
  position:absolute;inset-inline:0;bottom:10px;z-index:3;
  display:flex;justify-content:center;pointer-events:none;
  animation:reelBob 1.8s ease-in-out infinite;
}
@media (min-width:761px){ .reel-scroll-cue{display:none;} }
/* Must come after the rule above - same specificity, so source order is
   what decides which display value wins. */
@media (max-height:500px) and (max-width:960px){ .reel-scroll-cue{display:none;} }
.reel-scroll-cue svg{width:22px;height:22px;color:rgb(253 251 238 / 0.75);}
@keyframes reelBob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }
@media (max-width:760px){
  /* Without scroll-padding-top, the snap algorithm treats the scroll port's
     top as y:0 - ignoring that the sticky header visually overlaps that
     space - and silently auto-scrolls the page on load to satisfy the snap.
     This matches the header's own two actual heights (single row vs the
     <=400px wrapped row).
     proximity, not mandatory: mandatory forces scrollY:0 itself to BE a
     valid snap point or the browser "corrects" it on load by jumping
     straight to the nearest one - on the Arabic page (taller reel-content,
     different text length) that correction landed past reel-frame entirely,
     hiding "Be Seen" before anyone had scrolled at all. proximity still
     pulls firmly into place once a real scroll gesture gets close to a snap
     point, without that forced correction on first paint. */
  html{scroll-snap-type:y proximity;scroll-padding-top:72px;}
  .reel-content{scroll-snap-align:start;}
  .reel-frame{scroll-snap-align:start;}
  .paths{scroll-snap-align:start;}
}
@media (max-width:400px){
  html{scroll-padding-top:108px;}
}
@media (prefers-reduced-motion:reduce){ .reel-scroll-cue{animation:none;} }

@media (max-width:460px){
  .split-cta{font-size:11.5px;}
  .split-cta span{padding:10px 14px;}
  .lang-btn{font-size:10.5px;padding:6px 10px;}
}
@media (max-width:400px){
  .nav-inner{flex-wrap:wrap;row-gap:10px;}
  /* .split-cta itself has no background - only its two spans do - so
     stretching the box with width:100% and centring a content-sized group
     of spans inside it (the old justify-content:center) left the rounded
     corners sitting on the invisible outer box's far edges, nowhere near
     the visible coloured rectangle in the middle: it looked perfectly
     square. The spans need to grow and fill that width themselves so the
     colour reaches all the way to where the radius actually is. */
  .split-cta{order:3;width:100%;}
  .split-cta span{flex:1 1 auto;text-align:center;}
}

/* ---------- intro gate ---------- */
@keyframes gateOut{
  0%,62%{opacity:1;visibility:visible;}
  100%{opacity:0;visibility:hidden;}
}
.intro-gate{
  position:fixed;inset:0;z-index:999;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  animation:gateOut 1.8s ease forwards;
  pointer-events:none;
  contain:strict;
}
/* lightweight CSS loading mark: a static logo doesn't read as "loading", a
   spinner ring around it does - no video request, no decode cost */
.intro-mark{
  position:relative;width:104px;height:104px;
  display:flex;align-items:center;justify-content:center;
}
.intro-mark img{
  width:50px;height:auto;display:block;
  animation:introPulse 1.6s ease-in-out infinite;
}
.intro-ring{
  position:absolute;inset:0;border-radius:50%;
  border:3px solid rgb(253 251 238 / 0.14);
  border-top-color:var(--orange);
  animation:introSpin 0.9s linear infinite;
}
@keyframes introSpin{ to{ transform:rotate(360deg); } }
@keyframes introPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(0.9); opacity:0.8; } }
@media (prefers-reduced-motion:reduce){
  .intro-mark img, .intro-ring{ animation:none; }
}
/* skip the gate for repeat views in the same session, and for reduced motion */
html.gate-seen .intro-gate{display:none;}
@media (prefers-reduced-motion:reduce){ .intro-gate{display:none;} }

/* ---------- statement line ---------- */
.statement-line{padding-block:8px 46px;text-align:center;}
.statement-line p{
  font-family:'Archivo Black';text-transform:uppercase;
  font-size:clamp(17px,2.3vw,22px);color:var(--teal);
}

/* ---------- two paths ---------- */
.paths{padding-block:10px 60px;}
.paths .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:760px){ .paths .grid{grid-template-columns:1fr;} }
.path-card{
  border-radius:20px;overflow:hidden;
  border:1.5px solid rgb(3 85 81 / 0.16);
  display:flex;flex-direction:column;
  background:var(--white);
  transition:box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.path-card.seek:hover{
  transform:translateY(-7px);
  border-color:var(--orange-ink);
  box-shadow:0 26px 46px -22px rgb(199 60 32 / 0.35);
}
.path-card.hire:hover{
  transform:translateY(-7px);
  border-color:var(--teal);
  box-shadow:0 26px 46px -22px rgb(3 85 81 / 0.35);
}
.path-card .shot{
  aspect-ratio:16/9;overflow:hidden;position:relative;
}
.path-card .shot img{
  width:100%;height:100%;object-fit:cover;object-position:center 100%;
  display:block;
  transition:transform .5s ease;
}
.path-card:hover .shot img{ transform:scale(1.045); }
.path-card .shot::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg, rgb(0 0 0 / 0.28), transparent 55%);
}
.path-card .body-col{padding:clamp(22px,3.2vw,30px);display:flex;flex-direction:column;gap:14px;position:relative;}
.path-card .body-col::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;
  border-start-end-radius:4px;border-end-end-radius:4px;
  transform:scaleY(0);transform-origin:center;
  transition:transform .35s ease;
}
.path-card.seek .body-col::before{background:var(--orange-ink);}
.path-card.hire .body-col::before{background:var(--teal);}
.path-card:hover .body-col::before{transform:scaleY(1);}
.path-card h3{
  font-family:'Archivo Black';font-weight:400;text-transform:uppercase;
  font-size:21px;margin:0;
}
.path-card.seek h3{color:var(--orange-ink);}
.path-card.hire h3{color:var(--teal);}
.path-card p{font-size:14.5px;opacity:0.8;max-width:40ch;}
.path-card .pill{align-self:flex-start;margin-top:4px;}

/* ---------- features ---------- */
.features{padding-block:14px 64px;}
.features .head{max-width:560px;margin-bottom:34px;}
.features .head h2{font-size:clamp(26px,3.4vw,36px);}
.fgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
@media (max-width:820px){ .fgrid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .fgrid{grid-template-columns:1fr;} }
.fcard{
  position:relative;overflow:hidden;color:var(--cream);
  border-radius:20px;padding:28px 24px;
  display:flex;flex-direction:column;gap:14px;
  border:1px solid rgb(255 255 255 / 0.07);
  transition:box-shadow .3s ease, transform .3s ease;
}
.fcard::after{
  content:'';position:absolute;pointer-events:none;
  width:170px;height:170px;border-radius:50%;
  inset-inline-end:-60px;top:-70px;
  background:radial-gradient(circle, rgb(255 255 255 / 0.10), transparent 70%);
}
.fcard.o{background:linear-gradient(155deg, #142622 0%, var(--ink) 100%);}
.fcard.t{background:linear-gradient(155deg, var(--teal) 0%, var(--teal-deep) 100%);}
.fcard:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 44px -22px rgb(0 0 0 / 0.5);
}
.fcard .ficon{
  width:46px;height:46px;border-radius:13px;flex:none;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.fcard .ficon svg{width:21px;height:21px;}
.fcard.o .ficon{background:var(--orange);color:var(--ink);}
.fcard.t .ficon{background:var(--cream);color:var(--teal-deep);}
.fcard h3{font-size:16.5px;color:var(--cream);position:relative;letter-spacing:-0.01em;
  font-family:'Inter',sans-serif;font-weight:700;text-transform:none;margin:0;line-height:1.35;}
html[lang="ar"] .fcard h3{font-family:'Cairo','Inter',sans-serif;font-weight:800;letter-spacing:0;}
.fcard span{font-size:14px;opacity:0.7;line-height:1.55;color:var(--cream);position:relative;}

/* ---------- statement block ---------- */
.statement{padding-block:10px 20px;}
.statement-card{
  border-radius:32px;overflow:hidden;
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 85%);
  color:var(--cream);
  display:grid;grid-template-columns:1.05fr 0.95fr;align-items:stretch;
}
@media (max-width:820px){ .statement-card{grid-template-columns:1fr;} }
.statement-card .txt{
  padding:clamp(36px,6vw,64px);display:flex;flex-direction:column;justify-content:center;
}
.statement-card h2{font-size:clamp(26px,3.6vw,38px);max-width:15ch;color:var(--cream);}
.statement-card p{margin-top:14px;opacity:0.82;max-width:42ch;font-size:14.5px;}
.statement-card .shot{position:relative;min-height:240px;}
.statement-card .shot img{width:100%;height:100%;object-fit:cover;display:block;object-position:center 25%;}
@media (max-width:820px){ .statement-card .shot{order:-1;min-height:220px;} }

/* ---------- closing cta ---------- */
.closing{padding-block:20px 76px;}
.closing-card{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 78%);
  color:var(--cream);
  border-radius:32px;
  padding:clamp(38px,7vw,68px) clamp(28px,6vw,68px);
  display:grid;grid-template-columns:1.15fr 0.85fr;
  gap:30px;align-items:center;
}
@media (max-width:820px){ .closing-card{grid-template-columns:1fr;} }
.closing-mark{
  /* icon-only (no wordmark) and tucked further into the corner so it reads
     as a quiet corner accent instead of a second shape competing with the
     solid foreground icon in .visual-col */
  position:absolute;inset-inline-end:-54px;bottom:-54px;width:230px;
  opacity:0.10;pointer-events:none;
}
.closing-card h2{font-size:clamp(28px,4.4vw,46px);max-width:14ch;color:var(--cream);position:relative;}
.closing-card p.body{margin-top:14px;font-size:15.5px;max-width:44ch;opacity:0.82;position:relative;}
.store-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;position:relative;align-items:flex-start;}
.store-btn{
  display:flex;align-items:center;gap:11px;
  background:var(--ink);color:var(--cream);
  border-radius:13px;padding:11px 18px 11px 15px;
  box-shadow:0 10px 24px -14px rgb(0 0 0 / 0.6);
  text-decoration:none;position:relative;
}
.store-btn svg{width:22px;height:22px;flex:none;}
.store-btn small{display:block;opacity:0.65;font-size:9.5px;letter-spacing:0.05em;text-transform:uppercase;}
.store-btn b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-0.01em;}
/* app is pre-launch: badges are inert, not dead links */
.store-btn[aria-disabled="true"]{opacity:0.55;cursor:default;pointer-events:none;}
.store-note{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:16px;position:relative;
  font-size:13px;font-weight:700;opacity:0.9;
}
.store-note::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:var(--orange);flex:none;
}
.visual-col{
  display:flex;justify-content:center;position:relative;
}
.visual-col img{width:min(220px,60%);height:auto;filter:drop-shadow(0 20px 40px rgb(0 0 0 / 0.25));}

/* ---------- contact ---------- */
.contact-section{padding-block:14px 20px;}
.contact-card{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 80%);
  color:var(--cream);
  border-radius:32px;
  padding:clamp(40px,7vw,64px) clamp(24px,6vw,40px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.contact-mark{
  /* nothing competes with this one (no foreground icon on this card), so it
     can sit bigger and bolder than closing-mark and still read as a clean
     accent rather than clutter */
  position:absolute;inset-inline-start:-36px;bottom:-36px;width:320px;
  opacity:0.16;pointer-events:none;
}
.contact-icon{
  position:relative;
  width:56px;height:56px;border-radius:16px;
  background:var(--cream);color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;
}
.contact-icon svg{width:24px;height:24px;}
.contact-card .eyebrow{position:relative;}
.contact-card h2{font-size:clamp(26px,3.6vw,38px);margin-top:14px;color:var(--cream);position:relative;}
.contact-card p.body{margin-top:12px;max-width:46ch;opacity:0.82;font-size:15px;position:relative;}
.contact-email{
  position:relative;
  margin-top:26px;display:inline-flex;align-items:center;gap:10px;
  background:var(--cream);color:var(--ink);
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;
  text-decoration:none;transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 14px 28px -14px rgb(0 0 0 / 0.5);
  direction:ltr;
}
.contact-email:hover{transform:translateY(-3px);box-shadow:0 18px 34px -14px rgb(0 0 0 / 0.6);}
.contact-email svg{width:18px;height:18px;flex:none;}

/* ---------- FAQ ---------- */
.faq{padding-block:44px 20px;}
.faq .head{max-width:620px;margin-bottom:28px;}
.faq .head h2{font-size:clamp(26px,3.4vw,36px);}
.faq-list{display:flex;flex-direction:column;gap:12px;}
.faq-item{
  background:var(--white);
  border:1.5px solid rgb(3 85 81 / 0.14);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .25s ease;
}
.faq-item[open]{border-color:var(--teal);}
.faq-item summary{
  cursor:pointer;list-style:none;
  padding:20px clamp(18px,3vw,26px);
  font-weight:700;font-size:15.5px;line-height:1.45;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'';flex:none;width:11px;height:11px;
  border-right:2.5px solid var(--teal);
  border-bottom:2.5px solid var(--teal);
  transform:rotate(45deg);margin-block-start:-5px;
  transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-block-start:3px;}
.faq-item .answer{
  padding:0 clamp(18px,3vw,26px) 22px;
  font-size:14.5px;line-height:1.65;opacity:0.82;max-width:70ch;
}

/* ---------- social icons (hero + footer) ---------- */
.social{display:flex;align-items:center;gap:12px;}
.social a{display:block;line-height:0;border-radius:8px;transition:transform .2s ease;}
.social a:hover{transform:translateY(-2px);}
.social svg{display:block;width:32px;height:32px;}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--cream);}
.foot-inner{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;padding-block:26px;
}
footer img{height:20px;width:auto;}
footer .tag{font-size:13px;opacity:0.72;}
footer .copy{font-size:11.5px;opacity:0.5;}

@media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important;} }