/* ============================================================
   ADON MEDIA — production styles
   Chapter 1 (film): midnight. Chapters 2+: warm daylight.
   Logical properties throughout — RTL-ready by construction.
   ============================================================ */

:root{
  /* palette */
  --midnight:#0A0E14;
  --midnight-2:#111722;
  --line-dark:#232B38;
  --paper:#F4F1EA0;            /* not used — see --warm */
  --warm:#F2EFE9;              /* warm off-white ground for light chapters */
  --warm-2:#E8E2D6;            /* elevated warm surface */
  --ink:#141A24;               /* midnight-biased text on warm */
  --ink-2:#4C5666;
  --ink-inv:#F2EFE9;
  --ink-inv-2:#9AA4B4;
  --line:#D8D2C4;
  --blue:#2E6BFF;
  --blue-deep:#1E4FCC;

  /* type */
  --display:'Archivo',system-ui,sans-serif;
  --body:'Instrument Sans','Heebo',system-ui,sans-serif;

  /* rhythm */
  --pad-inline:clamp(20px,4.5vw,72px);
  --section-gap:clamp(72px,10vw,150px);
  --measure:66ch;
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  background:var(--midnight);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:14px var(--pad-inline);
  transition:background .35s ease, box-shadow .35s ease;
}
/* A real background-color, not only a gradient. The header sits over the film
   in light-on-dark trim, and until the first frame paints the only thing
   behind it is the light page beneath — light text on a light background. The
   colour is the film's own shadow tone, so over the footage it is all but
   invisible, while still guaranteeing legibility if the film is slow to load,
   blocked, or fails outright. */
.site-header.is-film{
  background-color:rgba(10,14,20,.62);
  background-image:linear-gradient(to bottom,rgba(10,14,20,.45),transparent);
}
.site-header.is-interior{background:rgba(10,14,20,.72);backdrop-filter:blur(8px)}
.site-header.is-page{background:rgba(242,239,233,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:11px;
  font-family:var(--display);font-variation-settings:'wdth' 120;font-weight:750;
  font-size:15px;letter-spacing:.2em;text-decoration:none;color:var(--ink-inv);
}
.site-header.is-page .brand{color:var(--ink)}
.brand-logo{height:34px;width:auto}
.site-header .logo-light{display:none}
.site-header.is-page .logo-light{display:block}
.site-header.is-page .logo-dark{display:none}
.main-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.main-nav > a, .nav-services > button{
  font-size:13.5px;letter-spacing:.05em;color:rgba(242,239,233,.82);
  text-decoration:none;background:none;border:0;cursor:pointer;font-family:var(--body);
  padding:6px 2px;
}
.site-header.is-page .main-nav > a,
.site-header.is-page .nav-services > button{color:var(--ink-2)}
.main-nav > a:hover, .nav-services > button:hover{color:var(--blue)}
.nav-services{position:relative}
.nav-services > button::after{content:' ▾';font-size:10px}
.services-menu{
  position:absolute;inset-block-start:calc(100% + 12px);inset-inline-start:0;
  min-width:280px;background:var(--midnight-2);border:1px solid var(--line-dark);
  padding:10px 0;display:none;
}
.nav-services.open .services-menu{display:block}
.services-menu a{
  display:block;padding:9px 20px;font-size:14px;color:var(--ink-inv-2);text-decoration:none;
}
.services-menu a:hover{color:var(--ink-inv);background:rgba(46,107,255,.12)}
.lang{display:flex;gap:10px;font-size:12px;letter-spacing:.08em}
.lang a{color:rgba(242,239,233,.55);text-decoration:none}
.lang a[aria-current]{color:var(--ink-inv)}
.site-header.is-page .lang a{color:var(--ink-2)}
.site-header.is-page .lang a[aria-current]{color:var(--ink)}
.header-cta{
  font-family:var(--display);font-weight:650;font-size:12.5px;letter-spacing:.12em;
  color:var(--ink-inv);text-decoration:none;border:1px solid var(--blue);
  padding:11px 20px;background:rgba(46,107,255,.14);white-space:nowrap;
  transition:background .2s;
}
.header-cta:hover{background:var(--blue)}
.site-header.is-page .header-cta{color:var(--midnight);background:var(--blue);border-color:var(--blue);color:#fff}
/* The toggle carries two drawn rules rather than a glyph, and a 44px
   minimum box so it is a real target on a phone. */
.menu-toggle{
  display:none;align-items:center;gap:10px;
  background:none;border:1px solid var(--line-dark);color:var(--ink-inv);
  font-family:var(--display);font-size:12px;letter-spacing:.14em;
  padding:0 16px;min-block-size:44px;cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease;
}
.menu-toggle::before{
  content:"";inline-size:16px;block-size:7px;
  border-block:1px solid currentColor;
}
.menu-toggle:hover{border-color:currentColor;background:rgba(242,239,233,.05)}
.site-header.is-page .menu-toggle{color:var(--ink);border-color:var(--line)}
.site-header.is-page .menu-toggle:hover{background:rgba(20,26,36,.05)}

/* ---------- mobile drawer ----------

   Three rows: a bar that continues the header, the navigation itself,
   and a foot that holds the action, the languages and the address
   within thumb reach. The middle row is the only one that scrolls, so
   the action never leaves the screen on a short phone.

   `100dvh` rather than `100vh`: on iOS Safari the address bar makes
   `vh` taller than the visible area, which would push the CTA under
   the chrome — the exact row that must never be unreachable. */
.mobile-nav{
  position:fixed;inset:0;z-index:300;background:var(--midnight);
  display:none;grid-template-rows:auto minmax(0,1fr) auto;
  block-size:100vh;block-size:100dvh;overscroll-behavior:contain;
}
.mobile-nav.open{display:grid}

.mnav-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:13px;padding-inline:var(--pad-inline);
  border-block-end:1px solid var(--line-dark);
}
.mnav-brand{display:block;line-height:0}
.mnav-brand img{block-size:30px;inline-size:auto;display:block}
.mnav-close{
  display:grid;place-items:center;inline-size:44px;block-size:44px;
  margin-inline-end:-11px;              /* align the mark, not its hit box */
  background:none;border:0;color:var(--ink-inv);cursor:pointer;
}
.mnav-close svg{
  inline-size:22px;block-size:22px;fill:none;
  stroke:currentColor;stroke-width:1.5;stroke-linecap:round;
}

.mnav-scroll{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* the end padding is clearance, not decoration: without it the last
     service row sits flush against the foot and reads as clipped rather
     than as a list that continues */
  padding-block:clamp(14px,4vw,26px) 26px;padding-inline:var(--pad-inline);
}

.mnav-main,.mnav-svc{list-style:none;margin:0;padding:0}

.mnav-main a{
  display:flex;align-items:center;min-block-size:54px;
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:700;
  font-size:clamp(27px,7.4vw,38px);letter-spacing:-.015em;line-height:1.05;
  color:var(--ink-inv);text-decoration:none;
  border-block-end:1px solid var(--line-dark);
}
/* The current page is marked with the cobalt, which is this system's
   pointer — not with a fill or a bar. */
.mnav-main a[aria-current]{color:var(--blue-lift,#5B8CFF)}

.mnav-group{padding-block-start:clamp(14px,4.2vw,24px)}
.mnav-label{
  margin:0 0 4px;font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-inv-2);
}
/* Previously these were inline anchors inside a flex column, so six
   destinations ran together as one grey paragraph with overlapping
   targets. Each is now its own row at a real tap size. */
.mnav-svc a{
  display:flex;align-items:center;min-block-size:44px;
  font-family:var(--body);font-size:15.5px;line-height:1.3;
  color:var(--ink-inv-2);text-decoration:none;
  border-block-end:1px solid var(--line-dark);
}
.mnav-svc li:last-child a{border-block-end:0}
.mnav-svc a[aria-current]{color:var(--blue-lift,#5B8CFF)}

.mnav-foot{
  padding-block:16px max(18px,env(safe-area-inset-bottom));
  padding-inline:var(--pad-inline);
  border-block-start:1px solid var(--line-dark);
  background:var(--midnight-2);
}
.mnav-cta{
  display:flex;align-items:center;justify-content:center;min-block-size:52px;
  background:var(--blue);color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;
  transition:background-color .2s ease;
}
.mnav-cta:hover{background:var(--blue-deep)}

.mnav-meta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-block-start:14px;
}
.mnav-lang{display:flex;gap:4px}
.mnav-lang a{
  min-inline-size:40px;min-block-size:34px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:11.5px;letter-spacing:.1em;
  color:var(--ink-inv-2);text-decoration:none;
  border:1px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.mnav-lang a[aria-current]{color:var(--ink-inv);border-color:var(--line-dark)}
.mnav-mail{
  font-family:var(--body);font-size:13.5px;color:var(--ink-inv-2);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-dark);
}

/* One authored moment: the rows settle in behind the panel rather than
   each animating on its own schedule. Animations run on the
   display:none -> grid change, so no extra class is needed. */
@media (prefers-reduced-motion:no-preference){
  .mobile-nav.open .mnav-main li,
  .mobile-nav.open .mnav-group,
  .mobile-nav.open .mnav-foot{
    animation:mnav-in .5s cubic-bezier(.16,1,.3,1) backwards;
  }
  .mobile-nav.open .mnav-main li:nth-child(1){animation-delay:.03s}
  .mobile-nav.open .mnav-main li:nth-child(2){animation-delay:.06s}
  .mobile-nav.open .mnav-main li:nth-child(3){animation-delay:.09s}
  .mobile-nav.open .mnav-main li:nth-child(4){animation-delay:.12s}
  .mobile-nav.open .mnav-main li:nth-child(5){animation-delay:.15s}
  .mobile-nav.open .mnav-group{animation-delay:.18s}
  .mobile-nav.open .mnav-foot{animation-delay:.21s}
}
@keyframes mnav-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ---------- chapter 1: film ---------- */
.film{position:relative;background:var(--midnight)}
.skip-film{
  position:absolute;inset-block-start:calc(100vh - 64px);inset-inline-end:var(--pad-inline);
  z-index:150;font-size:12px;letter-spacing:.14em;color:rgba(242,239,233,.6);
  text-decoration:none;border:1px solid var(--line-dark);padding:9px 16px;
  background:rgba(10,14,20,.5);
}
.skip-film:hover{color:var(--ink-inv);border-color:var(--blue)}
/* hero CTAs injected over the film's first scene */
.film-ctas{position:absolute;z-index:140;display:flex;gap:14px;flex-wrap:wrap;
  inset-block-start:auto;inset-block-end:30px;inset-inline-start:var(--pad-inline)}
.btn{
  display:inline-block;font-family:var(--display);font-weight:650;font-size:13px;
  letter-spacing:.1em;text-decoration:none;padding:15px 26px;transition:all .2s;
}
.btn-primary{background:var(--blue);color:#fff;border:1px solid var(--blue)}
.btn-primary:hover{background:var(--blue-deep)}
.btn-ghost{color:var(--ink-inv);border:1px solid rgba(242,239,233,.35)}
.btn-ghost:hover{border-color:var(--ink-inv)}
.light .btn-ghost{color:var(--ink);border-color:rgba(20,26,36,.3)}
/* A dark chapter nested inside the light page still needs the light ghost
   button; without this the secondary action renders dark on dark and all but
   disappears. Scoped tighter than .light so it wins without !important. */
.chapter.dark .btn-ghost{color:var(--ink-inv);border-color:rgba(242,239,233,.35)}
.chapter.dark .btn-ghost:hover{border-color:var(--ink-inv)}
.light .btn-ghost:hover{border-color:var(--ink)}

/* ---------- shared section grammar (chapters 2+) ---------- */
main.page{display:block;background:var(--warm)}
.chapter{padding-block:var(--section-gap);padding-inline:var(--pad-inline)}
.chapter.dark{background:var(--midnight);color:var(--ink-inv)}
.chapter.elevated{background:var(--warm-2)}
.chapter-inner{max-width:1240px;margin-inline:auto}
.eyebrow{
  font-family:var(--display);font-weight:650;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue);margin-block-end:18px;
}
h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;text-wrap:balance}
.chapter h2{
  font-variation-settings:'wdth' 114;font-weight:750;
  font-size:clamp(30px,4.6vw,54px);line-height:1.04;max-width:22ch;
  margin-block-end:22px;
}
.chapter .lede{font-size:clamp(17px,1.6vw,19.5px);color:var(--ink-2);max-width:var(--measure)}
.chapter.dark .lede{color:var(--ink-inv-2)}
.chapter p{max-width:var(--measure)}

/* ---------- selected work ---------- */
.work-item{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,64px);align-items:center;
  padding-block:clamp(36px,5vw,64px);
  border-block-start:1px solid var(--line);
}
.work-item:first-of-type{border-block-start:0}
.work-item:nth-of-type(even){direction:rtl}
.work-item:nth-of-type(even) > *{direction:ltr}
[dir="rtl"] .work-item:nth-of-type(even){direction:ltr}
[dir="rtl"] .work-item:nth-of-type(even) > *{direction:rtl}
.work-shot{
  aspect-ratio:16/10;background:var(--warm-2);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;
}
.work-shot img{width:100%;height:100%;object-fit:cover}
.work-shot .ph{font-size:13px;letter-spacing:.12em;color:var(--ink-2)}
.work-info h3{font-size:clamp(22px,2.4vw,30px);font-weight:700;margin-block-end:10px}
.work-meta{display:flex;flex-wrap:wrap;gap:8px;margin-block:14px}
.work-meta span{
  font-size:12px;letter-spacing:.06em;color:var(--ink-2);
  border:1px solid var(--line);padding:4px 10px;
}
.work-info p{color:var(--ink-2);font-size:15.5px}
.link-arrow{
  display:inline-block;margin-block-start:16px;font-family:var(--display);font-weight:650;
  font-size:13px;letter-spacing:.1em;color:var(--blue);text-decoration:none;
}
.link-arrow::after{content:' →'}
[dir="rtl"] .link-arrow::after{content:' ←'}

/* ---------- services ---------- */
.service-row{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(20px,4vw,72px);
  padding-block:clamp(32px,4vw,52px);
  border-block-start:1px solid var(--line);
}
.service-row h3{font-size:clamp(20px,2.2vw,27px);font-weight:700;max-width:16ch}
.service-row .num{font-family:var(--display);font-size:12px;letter-spacing:.14em;color:var(--blue);display:block;margin-block-end:8px}
.service-row p{color:var(--ink-2);font-size:15.5px;margin-block-end:12px}
.service-tags{display:flex;flex-wrap:wrap;gap:7px;margin-block-start:6px}
.service-tags span{font-size:12px;color:var(--ink-2);border:1px solid var(--line);padding:3px 9px}

/* ---------- why / differentiator (dark) ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin-block-start:40px}
.why-grid > div{background:var(--midnight);padding:28px}
.why-grid h3{font-size:17px;margin-block-end:8px;color:var(--ink-inv)}
.why-grid p{font-size:14.5px;color:var(--ink-inv-2)}

/* ---------- process ---------- */
.process{display:grid;gap:0;margin-block-start:24px}
.step{
  display:grid;grid-template-columns:90px minmax(0,1fr);gap:clamp(16px,3vw,40px);
  padding-block:26px;border-block-start:1px solid var(--line);
}
.step .n{font-family:var(--display);font-variation-settings:'wdth' 118;font-weight:750;font-size:clamp(24px,3vw,34px);color:var(--blue);font-variant-numeric:tabular-nums}
.step h3{font-size:18px;margin-block-end:6px}
.step p{color:var(--ink-2);font-size:15.5px}

/* ---------- blog ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(18px,2.5vw,32px);margin-block-start:36px}
.post{border:1px solid var(--line);background:#fff;padding:24px;text-decoration:none;display:block}
.post .cat{font-size:11.5px;letter-spacing:.14em;color:var(--blue);text-transform:uppercase}
.post h3{font-size:19px;margin-block:10px 8px;color:var(--ink)}
.post p{font-size:14.5px;color:var(--ink-2)}
.post .ph-note{font-size:11px;letter-spacing:.1em;color:#B08A3C;margin-block-start:14px;text-transform:uppercase}

/* ---------- faq ---------- */
.faq{max-width:820px;margin-block-start:12px}
.faq details{border-block-start:1px solid var(--line)}
.faq details:last-child{border-block-end:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;
  padding-block:20px;font-family:var(--display);font-weight:650;font-size:16.5px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--blue);font-size:20px;flex-shrink:0}
.faq details[open] summary::after{content:'−'}
.faq details p{padding-block-end:20px;color:var(--ink-2);font-size:15.5px}

/* ---------- contact / final cta (dark) ---------- */
.contact h2{max-width:18ch}
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);margin-block-start:30px}
.contact form{display:grid;gap:16px}
.field label{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-inv-2);margin-block-end:7px}
.field input,.field select,.field textarea{
  width:100%;background:var(--midnight-2);border:1px solid var(--line-dark);color:var(--ink-inv);
  font-family:var(--body);font-size:15.5px;padding:13px 14px;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue);outline:none}
.contact-aside p{color:var(--ink-inv-2);font-size:15.5px}
.contact-aside a{color:var(--ink-inv)}

/* ---------- footer ---------- */
.site-footer{background:var(--midnight);color:var(--ink-inv);padding:70px var(--pad-inline) 36px;border-block-start:1px solid var(--line-dark)}
.footer-statement{
  font-family:var(--display);font-variation-settings:'wdth' 116;font-weight:750;
  font-size:clamp(26px,4vw,44px);line-height:1.05;max-width:16ch;margin-block-end:50px;
}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px;max-width:1240px}
.footer-cols h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-inv-2);margin-block-end:14px}
.footer-cols a{display:block;font-size:14.5px;color:rgba(242,239,233,.75);text-decoration:none;padding-block:4px}
.footer-cols a:hover{color:var(--ink-inv)}
.footer-base{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-block-start:56px;padding-block-start:22px;border-block-start:1px solid var(--line-dark);font-size:13px;color:var(--ink-inv-2)}

/* ---------- reveal-on-scroll (subtle, gated) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* hidden state only when JS is confirmed running (html.js) — content never gated on JS availability */
  html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  html.js .reveal.in{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .work-item,.service-row,.contact-grid{grid-template-columns:1fr}
  .work-item:nth-of-type(even){direction:inherit}
  .step{grid-template-columns:56px 1fr}
}
@media (max-width:820px){
  .main-nav,.lang{display:none}
  .menu-toggle{display:inline-flex}
  .header-cta{display:none}
}

/* ---------- engine-as-chapter adaptations ---------- */
/* the site header replaces the engine's own topbar */
#world .sw-topbar, #world2 .sw-topbar{display:none !important}
/* once scroll passes the film, its fixed layers release the viewport */
#film.past .sw-stage, #film2.past .sw-stage,
#film.pre .sw-stage, #film2.pre .sw-stage,
#film.past .sw-copylayer, #film2.past .sw-copylayer,
#film.pre .sw-copylayer, #film2.pre .sw-copylayer,
#film.past .sw-route, #film2.past .sw-route,
#film.pre .sw-route, #film2.pre .sw-route,
#film.past .sw-scrollbar, #film2.past .sw-scrollbar,
#film.pre .sw-scrollbar, #film2.pre .sw-scrollbar,
#film.past .sw-sky, #film2.past .sw-sky,
#film.pre .sw-sky, #film2.pre .sw-sky,
#film.past .sw-hint, #film2.past .sw-hint,
#film.pre .sw-hint, #film2.pre .sw-hint{visibility:hidden;pointer-events:none}

/* ---------- film CTA buttons: unlayered override of engine defaults ---------- */
#world .sw-btn, #world2 .sw-btn{
  border-radius:0;
  font-family:var(--display);font-weight:650;font-size:13px;letter-spacing:.1em;
  padding:14px 24px;
}
#world .sw-btn--primary, #world2 .sw-btn--primary{color:#fff;background:var(--blue)}
#world .sw-btn--primary:hover, #world2 .sw-btn--primary:hover{background:var(--blue-deep)}
#world .sw-btn--ghost, #world2 .sw-btn--ghost{color:var(--midnight);border:1px solid rgba(20,26,36,.4);background:rgba(242,239,233,.35)}

/* work slots awaiting real screenshots — designed, not raw placeholders */
.work-empty{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:22px;background:linear-gradient(145deg,var(--warm-2),#DDD6C7);border:1px solid var(--line)}
.work-empty .we-mark{font-family:var(--display);font-variation-settings:'wdth' 118;font-weight:750;font-size:clamp(40px,5vw,68px);color:rgba(20,26,36,.14);line-height:1}
.work-empty .we-label{font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}