/* ============================================================
   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}
.menu-toggle{display:none;background:none;border:1px solid currentColor;color:var(--ink-inv);
  font-family:var(--display);font-size:12px;letter-spacing:.12em;padding:10px 16px;cursor:pointer}
.site-header.is-page .menu-toggle{color:var(--ink)}

/* mobile drawer */
.mobile-nav{
  position:fixed;inset:0;z-index:300;background:var(--midnight);
  display:none;flex-direction:column;padding:90px var(--pad-inline) 40px;overflow-y:auto;
}
.mobile-nav.open{display:flex}
.mobile-nav a{
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:700;
  font-size:clamp(26px,7vw,38px);color:var(--ink-inv);text-decoration:none;
  padding:10px 0;border-block-end:1px solid var(--line-dark);
}
.mobile-nav .sub a{font-family:var(--body);font-weight:400;font-size:17px;color:var(--ink-inv-2);border:0;padding:7px 0}
.mobile-nav .close{position:absolute;inset-block-start:20px;inset-inline-end:var(--pad-inline)}

/* ---------- 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:block}
  .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)}