/* ============================================================
   AUGUSTINE MEDIA — design tokens
   ============================================================ */
:root{
  --ink:      #0C0C0C;
  --ink-2:    #161616;
  --char:     #1C1C1F;
  --paper:    #FFFFFF;
  --paper-2:  #F4F2EE;
  --text:     #181818;
  --muted:    #878787;
  --line-d:   rgba(255,255,255,.10);
  --line-l:   rgba(17,17,19,.12);

  /* accent palette — gold (monk-e style). qa.* uses [data-theme="red"] below */
  --accent:       #FFC904;   /* fills: panels, buttons, rules */
  --accent-2:     #FFD84D;   /* hover */
  --accent-text:  #FFC904;   /* accent text on dark */
  --accent-light: #181818;   /* accent text on white */
  --on-accent:    #0C0C0C;   /* text on accent fills */
  --glow:         255,201,4; /* rgb for glows */
  --panel-visual: linear-gradient(140deg, #9a7a00, #3d3000);
  --g1: radial-gradient(120% 90% at 30% 20%, #ffd84d, #8c6e00 60%, #1a1500);
  --g2: radial-gradient(120% 90% at 30% 20%, #ffb84a, #8a4b05 60%, #1d0f02);
  --g3: radial-gradient(120% 90% at 30% 20%, #fff07a, #9c8a00 60%, #241f00);

  --font-display: 'Onest', Arial, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --maxw: 1180px;
  --pad: clamp(16px, 5vw, 68px);
  --navh: 72px;
  --ease: cubic-bezier(.22,1,.36,1);
}

/* Augustine red + white (logo colours) — qa.augustinemedia.in, or ?theme=red */
[data-theme="red"]{
  --accent:       #C00113;
  --accent-2:     #DE0A20;
  --accent-text:  #F2263C;
  --accent-light: #C00113;
  --on-accent:    #FFFFFF;
  --glow:         214,10,32;
  --panel-visual: linear-gradient(140deg, #7d000c, #250003);
  --g1: radial-gradient(120% 90% at 30% 20%, #ff4a5a, #9a0010 60%, #1e0003);
  --g2: radial-gradient(120% 90% at 30% 20%, #ff7a5a, #8a1a05 60%, #1d0602);
  --g3: radial-gradient(120% 90% at 30% 20%, #ff9aa4, #a3101f 60%, #240205);
}
[data-theme="red"] .quote__mark{ -webkit-text-stroke:0; }
.g1{ background:var(--g1); } .g2{ background:var(--g2); } .g3{ background:var(--g3); }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:#fff;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--accent); color:var(--on-accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.dark{ background:var(--ink); color:#fff; }
.light{ background:var(--paper); color:var(--text); }

/* "> SERVICES" eyebrow with rule, as on the reference */
.eyebrow{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding-bottom:18px; border-bottom:1px solid var(--line-l);
}
.dark .eyebrow{ border-color:var(--line-d); }
.eyebrow::before{ content:">"; }

.h-xl{ font-family:var(--font-display); font-weight:600; letter-spacing:-.04em; line-height:1.1;
       font-size:clamp(44px, 7.6vw, 104px); }
.h-lg{ font-family:var(--font-display); font-weight:600; letter-spacing:-.04em; line-height:1.08;
       font-size:clamp(36px, 5.4vw, 72px); }
.h-md{ font-family:var(--font-display); font-weight:600; letter-spacing:-.03em; line-height:1.12;
       font-size:clamp(28px, 3.6vw, 46px); }
.accent{ color:var(--accent-text); }
.light .accent{ color:var(--accent-light); }

/* scroll-linked word reveal (grey -> solid as you scroll) */
[data-reveal] .w{ opacity:.16; transition:opacity .25s linear; }
[data-reveal] .w.on{ opacity:1; }

/* fade-up on enter */
.fade{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.fade.in{ opacity:1; transform:none; }

/* ============================================================ nav */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--navh);
  display:flex; align-items:center;
  transition:background .4s var(--ease), backdrop-filter .4s;
}
.nav.solid{ background:rgba(12,12,13,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.nav .wrap{ display:flex; align-items:center; gap:44px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.01em; }
.brand img{ width:30px; height:30px; border-radius:7px; }
.nav__links{ display:flex; gap:28px; font-size:14px; color:rgba(255,255,255,.82); }
.nav__links a:hover{ color:#fff; }
.btn-white{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--text); font-weight:600; font-size:14px;
  padding:10px 16px; border-radius:6px; transition:transform .3s var(--ease);
}
.btn-white:hover{ transform:translateY(-2px); }
.nav__toggle{ display:none; margin-left:12px; width:40px; height:40px; border-radius:8px; border:1px solid var(--line-d); }
.nav__toggle span{ display:block; width:18px; height:2px; background:#fff; margin:4px auto; transition:transform .3s; }
.menu{
  position:fixed; inset:0; z-index:49; background:var(--ink); padding:calc(var(--navh) + 24px) var(--pad) 32px;
  display:flex; flex-direction:column; gap:8px; transform:translateY(-100%); transition:transform .5s var(--ease);
}
.menu.open{ transform:none; }
.menu a{ font-family:var(--font-display); font-size:36px; font-weight:600; padding:6px 0; border-bottom:1px solid var(--line-d); }

/* ============================================================ hero */
.hero{ position:relative; height:240vh; }
.hero__pin{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; padding-top:calc(var(--navh) + 4vh);
}
.hero__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:130vmax; height:130vmax; left:-45vmax; top:-78vmax; border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--glow),0) 52%, rgba(var(--glow),.95) 66%, rgba(var(--glow),.55) 72%, rgba(12,12,13,0) 84%);
  filter:blur(28px);
  animation:glow 14s ease-in-out infinite alternate;
}
@keyframes glow{ to{ transform:translate(6vmax, 3vmax) rotate(8deg); } }
.hero .wrap{ position:relative; z-index:1; }
.hero__copy{ will-change:opacity; }
.hero h1{ max-width:12ch; }
.rot{ display:inline-grid; vertical-align:top; }
.rot span{ grid-area:1/1; opacity:0; transform:translateY(.4em); transition:opacity .25s linear, transform .6s var(--ease); white-space:nowrap; }
.rot span.on{ opacity:1; transform:none; transition:opacity .6s var(--ease) .2s, transform .6s var(--ease) .2s; }
.hero__bottom{
  margin-top:auto; display:grid; grid-template-columns:1fr auto; align-items:end; gap:32px;
  padding-block:48px 28px;
}
.hero__lede{ max-width:440px; font-size:15px; color:rgba(255,255,255,.78); }
.hero__proof{ display:inline-flex; gap:8px; margin-top:22px; font-weight:600; font-size:15px; }
.hero__proof:hover{ color:var(--accent-text); }
.reelcard{ width:min(300px, 100%); }
.reelcard__media{
  position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 20% 20%, rgba(var(--glow),.55), transparent 60%),
    linear-gradient(135deg, #2a0d0a, #0e0e10 70%);
  border:1px solid var(--line-d);
  display:grid; place-items:center;
}
.reelcard__play{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); display:grid; place-items:center; }
.reelcard__tag{ position:absolute; left:10px; top:10px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:4px 7px; border-radius:4px; background:rgba(0,0,0,.45); color:rgba(255,255,255,.75); }
.reelcard p{ font-size:13px; margin-top:10px; color:rgba(255,255,255,.85); }

.marquee{ position:relative; z-index:1; overflow:hidden; padding-block:22px 34px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track{ display:flex; gap:64px; width:max-content; animation:mq 34s linear infinite; }
.marquee__track span{ font-family:var(--font-display); font-weight:700; font-size:clamp(22px, 2.6vw, 34px); color:rgba(255,255,255,.42); white-space:nowrap; letter-spacing:-.01em; }
.marquee__track span.ph{ font-weight:500; font-style:italic; color:rgba(255,255,255,.22); }
@keyframes mq{ to{ transform:translateX(-50%); } }

/* ============================================================ services — sticky stacking panels */
.services{ padding-top:clamp(64px, 8vw, 110px); }
.services__head{ padding-bottom:clamp(40px, 5vw, 72px); }
.services__head h2{ margin-top:clamp(36px, 5vw, 64px); }
.panel{
  position:sticky; top:var(--navh);
  min-height:min(78vh, 640px);
  display:flex; align-items:center;
  border-top:1px solid var(--line-l);
}
.panel:nth-child(odd){ background:var(--accent); color:var(--on-accent); }
.panel:nth-child(even){ background:var(--paper); color:var(--text); }
.panel .wrap{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px, 5vw, 72px); align-items:center; padding-block:clamp(40px, 5vw, 64px); }
.panel h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; line-height:1.02; font-size:clamp(38px, 5vw, 66px); }
.panel p{ margin-top:22px; max-width:440px; font-size:15px; opacity:.86; }
.panel ul{ list-style:none; margin-top:24px; display:grid; gap:10px; font-size:14px; }
.panel li{ display:flex; gap:10px; opacity:.86; }
.panel li::before{ content:"↳"; }
.panel__visual{
  position:relative; aspect-ratio:16/10; border-radius:12px; overflow:hidden;
  display:grid; place-items:center; isolation:isolate;
}
.panel:nth-child(odd)  .panel__visual{ background:var(--panel-visual); }
.panel:nth-child(even) .panel__visual{ background:linear-gradient(140deg, #18181b, #0c0c0d); color:#fff; }
.panel__num{ position:absolute; right:-.06em; bottom:-.22em; font-family:var(--font-display); font-weight:700; font-size:clamp(140px, 18vw, 260px); line-height:1; color:rgba(255,255,255,.07); z-index:-1; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:80%; }
.chip{ padding:9px 14px; border-radius:999px; font-size:13px; font-weight:600; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(4px); animation:bob 5s ease-in-out infinite; }
.chip:nth-child(2n){ animation-delay:-1.6s; } .chip:nth-child(3n){ animation-delay:-3.1s; }
@keyframes bob{ 50%{ transform:translateY(-8px); } }
.ph-label{ position:absolute; left:14px; top:12px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); }

/* ============================================================ clients — stats + vertical logo columns */
.clients{ padding-block:clamp(72px, 9vw, 130px); overflow:hidden; }
.clients__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; margin-top:clamp(36px, 5vw, 60px); }
.stats{ display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:clamp(24px, 4vw, 56px); margin-top:clamp(48px, 7vw, 110px); }
.stat small{ display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.stat small::before{ content:"— "; }
.stat strong{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(40px, 5vw, 64px); letter-spacing:-.03em; line-height:1.1; margin-top:6px; }
.stat > span{ font-size:13px; color:rgba(255,255,255,.55); }
.logos{ display:grid; grid-template-columns:1fr 1fr; gap:18px; height:min(560px, 70vh);
  -webkit-mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent);
          mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.logos__col{ overflow:hidden; }
.logos__track{ display:flex; flex-direction:column; gap:18px; animation:up 22s linear infinite; }
.logos__col:nth-child(2) .logos__track{ animation-direction:reverse; animation-duration:26s; }
@keyframes up{ to{ transform:translateY(-50%); } }
.logo-tile{ height:120px; border-radius:10px; display:grid; place-items:center; text-align:center; padding:12px;
  font-family:var(--font-display); font-weight:700; font-size:22px; color:rgba(255,255,255,.62); letter-spacing:-.01em; }
.logo-tile.ph{ font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.25); border:1px dashed rgba(255,255,255,.12); }

/* ============================================================ who we build for — staggered tall cards */
.who{ padding-block:clamp(64px, 8vw, 110px) clamp(72px, 9vw, 120px); border-top:1px solid var(--line-d); }
.who h2{ margin-top:clamp(28px, 4vw, 48px); max-width:20ch; }
.cards{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:clamp(40px, 5vw, 64px); }
.card{ position:relative; aspect-ratio:2/3; border-radius:10px; overflow:hidden; isolation:isolate; }
.card:nth-child(even){ transform:translateY(-20px); }
.card__bg{ position:absolute; inset:0; z-index:-2; transition:transform 1s var(--ease); }
.card:hover .card__bg{ transform:scale(1.05); }
.card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(transparent 45%, rgba(0,0,0,.78)); }
.card__num{ position:absolute; left:16px; top:14px; font-family:var(--font-display); font-weight:700; font-size:14px; color:rgba(255,255,255,.7); }
.card__foot{ position:absolute; left:16px; right:16px; bottom:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.card__foot h3{ font-size:17px; font-weight:700; line-height:1.25; }
.card__foot small{ display:block; font-size:13px; color:rgba(255,255,255,.7); margin-top:2px; }
.plus{ flex:none; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); display:grid; place-items:center; font-size:22px; transition:transform .4s var(--ease), background .3s; }
.card.open .plus{ transform:rotate(45deg); background:var(--accent); color:var(--on-accent); }
.card__more{ position:absolute; inset:0; padding:56px 18px 80px; background:rgba(12,12,13,.86); backdrop-filter:blur(6px); font-size:15px; line-height:1.55; opacity:0; transition:opacity .4s var(--ease); pointer-events:none; }
.card.open .card__more{ opacity:1; }
.ulink{ display:table; margin:clamp(40px, 5vw, 64px) auto 0; font-weight:600; font-size:17px; padding-bottom:6px; border-bottom:2px solid currentColor; }
.ulink:hover{ color:var(--accent-text); }

/* ============================================================ case studies — horizontal slider */
.cases{ padding-block:clamp(72px, 9vw, 120px); overflow:hidden; }
.cases h2{ margin-top:clamp(28px, 4vw, 48px); }
.slider{ display:flex; gap:16px; margin-top:clamp(36px, 5vw, 56px); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.slider::-webkit-scrollbar{ display:none; }
.case{
  flex:none; scroll-snap-align:start; display:flex; border:1px solid var(--line-l); background:#fff;
  width:min(420px, 86vw); transition:width .7s var(--ease);
}
.case__body{ flex:none; width:min(418px, calc(86vw - 2px)); padding:30px; display:flex; flex-direction:column; min-height:520px; }
.case__media{ flex:none; width:340px; position:relative; overflow:hidden; }
.case__media .ph-label{ color:rgba(255,255,255,.55); }
@media (hover:hover) and (min-width:900px){ .case:hover{ width:760px; } }
.case__client{ font-family:var(--font-display); font-weight:600; font-size:26px; letter-spacing:-.03em; color:var(--accent-light); }
.case__body p{ margin-top:22px; font-size:16px; line-height:1.5; }
.case__meta{ margin-top:auto; padding-top:28px; }
.case__meta div{ display:flex; justify-content:space-between; gap:16px; padding-block:12px; border-bottom:1px solid var(--line-l); font-size:13px; text-transform:uppercase; letter-spacing:.02em; }
.case__meta dt{ color:var(--muted); }
.case__meta dd{ text-align:right; }
.slider__ctrl{ display:flex; align-items:center; justify-content:space-between; margin-top:28px; }
.arrows{ display:flex; gap:12px; }
.arrows button{ width:46px; height:46px; border:1px solid var(--line-l); border-radius:4px; display:grid; place-items:center; transition:background .3s, color .3s; }
.arrows button:hover{ background:var(--text); color:#fff; }
.more{ display:inline-flex; gap:10px; font-weight:600; }
.more::before{ content:"↳"; }
.more:hover{ opacity:.6; }

/* ============================================================ testimonial (sits where "press" is on the reference) */
.words{ padding-block:clamp(40px, 5vw, 80px) clamp(72px, 9vw, 120px); }
.words h2{ margin-top:clamp(28px, 4vw, 48px); }
.quote{ margin-top:clamp(32px, 4vw, 52px); display:grid; grid-template-columns:auto 1fr; gap:clamp(20px, 3vw, 40px); align-items:start; }
.quote__mark{ font-family:var(--font-display); font-weight:700; font-size:clamp(90px, 11vw, 150px); line-height:.8; color:var(--accent); -webkit-text-stroke:2px var(--text); }
.quote blockquote{ font-family:var(--font-display); font-weight:500; font-size:clamp(24px, 3vw, 38px); line-height:1.25; letter-spacing:-.015em; max-width:28ch; }
.quote cite{ display:block; margin-top:22px; font-style:normal; font-size:15px; color:var(--muted); }
.quote cite b{ color:var(--text); }

/* ============================================================ CTA */
.cta{ padding-block:clamp(90px, 12vw, 170px) clamp(56px, 6vw, 90px); }
.cta h2{ max-width:16ch; }
.pill{
  display:inline-flex; align-items:center; gap:10px; margin-top:clamp(36px, 5vw, 60px);
  font-family:var(--font-display); font-weight:600; font-size:clamp(20px, 2.2vw, 28px);
  padding:20px 34px; border-radius:999px; background:#1e1e21; color:#fff;
  box-shadow:0 0 0 10px rgba(255,255,255,.03), inset 0 -3px 0 rgba(255,255,255,.08);
  transition:background .3s, transform .4s var(--ease);
}
.pill:hover{ background:var(--accent); color:var(--on-accent); transform:translateY(-3px); }

/* ============================================================ footer */
.footer{ padding-block:clamp(40px, 5vw, 70px) 32px; }
.footer__top{ display:grid; grid-template-columns:1fr auto; gap:40px; }
.footer__tag{ margin-top:10px; font-size:14px; color:rgba(255,255,255,.65); max-width:340px; }
.footer__mail{ display:inline-flex; align-items:center; gap:12px; margin-top:26px; font-family:var(--font-display); font-weight:600; font-size:clamp(20px, 2.4vw, 28px); }
.footer__mail:hover{ color:var(--accent-text); }
.footer__nav{ display:grid; grid-template-columns:auto auto; gap:14px 44px; align-content:start; font-size:18px; color:rgba(255,255,255,.8); }
.footer__nav a:hover{ color:#fff; }
.socials{ display:flex; gap:10px; margin-top:52px; }
.socials a{ width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line-d); transition:background .3s, border-color .3s; }
.socials a:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:44px; font-size:13px; color:rgba(255,255,255,.6); }
.footer__bottom em{ font-style:normal; color:var(--accent-text); }
.top{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line-d); border-radius:999px; font-size:12px; color:#fff; }
.top:hover{ border-color:#fff; }

/* ============================================================ responsive */
@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
  .nav .btn-white{ padding:9px 12px; font-size:13px; }
  .hero__bottom{ grid-template-columns:1fr; }
  .panel{ position:relative; top:auto; min-height:0; }
  .panel .wrap{ grid-template-columns:1fr; }
  .clients__grid{ grid-template-columns:1fr; }
  .logos{ height:300px; }
  .cards{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .card:nth-child(even){ transform:translateY(24px); }
  .footer__top{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .brand span{ display:none; }
  .stats{ grid-template-columns:1fr 1fr; }
  .card__foot h3{ font-size:15px; }
  .card__more{ font-size:13px; padding:48px 14px 72px; }
  .quote{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  [data-reveal] .w{ opacity:1; }
  .fade{ opacity:1; transform:none; }
}

/* ============================================================ nav: current page */
.nav__links a[aria-current="page"]{ color:#fff; box-shadow:0 2px 0 var(--accent); }
.menu a[aria-current="page"]{ color:var(--accent-text); }

/* ============================================================ inner pages — shared header */
.page-head{ position:relative; overflow:hidden; padding:calc(var(--navh) + clamp(48px, 8vw, 110px)) 0 clamp(40px, 5vw, 70px); }
.page-head .wrap{ position:relative; z-index:1; }
.page-head__glow{
  position:absolute; z-index:0; pointer-events:none; width:90vmax; height:90vmax; right:-40vmax; top:-55vmax; border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--glow),0) 55%, rgba(var(--glow),.55) 68%, rgba(12,12,13,0) 82%); filter:blur(30px); opacity:.8;
}
.page-head h1{ max-width:16ch; }
.page-head__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:clamp(28px, 4vw, 44px); padding-top:20px; border-top:1px solid var(--line-d); font-size:14px; color:rgba(255,255,255,.7); }
.page-head__meta a:hover{ color:#fff; }
.dash{ display:inline-flex; align-items:center; gap:10px; }
.dash::before{ content:""; width:14px; height:2px; background:var(--accent); }
.kicker{ display:flex; gap:8px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding-bottom:16px; margin-bottom:clamp(20px, 3vw, 32px); border-bottom:1px solid var(--line-d); }
.kicker::before{ content:">"; }

.ph-box{ position:relative; border-radius:12px; overflow:hidden; background:linear-gradient(140deg, #26262b, #111113); }
.ph-box .ph-label{ color:rgba(255,255,255,.5); }

/* ============================================================ work — filter grid */
.listing{ padding-block:clamp(24px, 4vw, 48px) clamp(72px, 9vw, 120px); }
.filters{ display:grid; grid-template-columns:minmax(0, 260px) minmax(0, 320px); justify-content:space-between; gap:20px; margin-block:clamp(28px, 4vw, 44px); }
.field-line{ position:relative; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line-d); padding-block:10px; color:rgba(255,255,255,.7); }
.field-line select, .field-line input{ flex:1; min-width:0; background:none; border:0; color:#fff; font:inherit; font-size:15px; outline:none; appearance:none; -webkit-appearance:none; }
.field-line select option{ color:#111; }
.field-line:focus-within{ border-color:#fff; }
.grid-2{ display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 24px); }
.tile{ display:block; }
.tile[hidden]{ display:none; }
.tile__media{ aspect-ratio:16/10; border-radius:10px; overflow:hidden; position:relative; }
.tile__media > div{ position:absolute; inset:0; transition:transform 1s var(--ease); }
.tile:hover .tile__media > div{ transform:scale(1.04); }
.tile h3{ margin-top:16px; font-size:clamp(17px, 1.6vw, 21px); font-weight:600; letter-spacing:-.01em; }
.tile p{ margin-top:4px; font-size:14px; color:rgba(255,255,255,.6); }
.tile:hover h3{ color:var(--accent-text); }
.grid-empty{ padding:40px 0; color:rgba(255,255,255,.55); }

/* ============================================================ case-study detail */
.case-head h1{ max-width:20ch; }
.case-stats{ display:flex; flex-wrap:wrap; align-items:center; gap:18px clamp(28px, 5vw, 64px); margin-top:clamp(28px, 4vw, 40px); padding-block:22px; border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d); font-size:clamp(15px, 1.5vw, 19px); color:rgba(255,255,255,.75); }
.case-stats b{ color:var(--accent-text); font-weight:600; }
.case-stats .client{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:20px; }
.case-hero{ margin-top:clamp(28px, 4vw, 48px); aspect-ratio:21/9; }
.case-body{ padding-block:clamp(56px, 7vw, 100px); }
.case-body .wrap{ display:grid; grid-template-columns:.85fr 1fr; gap:clamp(28px, 5vw, 64px); align-items:start; }
.case-body .ph-box{ aspect-ratio:4/5; background:linear-gradient(140deg, #e9e6e1, #d6d2cb); }
.case-body .ph-box .ph-label{ color:rgba(0,0,0,.4); }
.prose{ font-size:17px; line-height:1.65; }
.prose p + p{ margin-top:16px; }
.prose ul{ margin-top:18px; padding-left:20px; display:grid; gap:8px; }
.prose b{ font-weight:600; }
.todo{ display:block; margin-top:18px; padding:14px 16px; border:1px dashed rgba(17,17,19,.25); border-radius:8px; font-size:14px; color:var(--muted); }
.next-case{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-block:28px; border-top:1px solid var(--line-l); margin-top:clamp(40px, 5vw, 64px); font-weight:600; }
.next-case span{ color:var(--muted); font-weight:400; font-size:14px; }
.next-case a:hover{ opacity:.6; }

/* ============================================================ services page */
.svc-intro{ padding-block:clamp(56px, 7vw, 100px) 0; }
.svc-intro p{ max-width:560px; font-size:18px; color:var(--muted); margin-top:20px; }
.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:clamp(36px, 5vw, 56px); }
.step{ padding:26px 22px 30px; border:1px solid var(--line-d); border-radius:12px; background:var(--ink-2); }
.step b{ font-family:var(--font-display); font-size:15px; color:var(--accent-text); }
.step h3{ margin-top:36px; font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-.02em; }
.step p{ margin-top:10px; font-size:14px; color:rgba(255,255,255,.65); }
.block{ padding-block:clamp(72px, 9vw, 120px); }
.block h2{ margin-top:clamp(20px, 3vw, 32px); }
.faq{ margin-top:clamp(32px, 4vw, 52px); border-top:1px solid var(--line-l); }
.faq__item{ border-bottom:1px solid var(--line-l); }
.faq__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; text-align:left; font-family:var(--font-display); font-weight:600; font-size:clamp(18px, 2vw, 24px); }
.faq__q::after{ content:"+"; font-size:28px; font-weight:400; transition:transform .4s var(--ease); }
.faq__item.open .faq__q::after{ transform:rotate(45deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq__a p{ padding-bottom:24px; max-width:640px; color:var(--muted); font-size:16px; }

/* ============================================================ about page */
.about-hero{ padding-top:calc(var(--navh) + 40px); }
.frame{ position:relative; max-width:860px; margin-inline:auto; }
.frame::before{ content:""; position:absolute; inset:-12px -14px 14px 12px; border:1px solid var(--line-d); border-radius:12px; transform:rotate(-1.6deg); }
.frame .ph-box{ aspect-ratio:16/9; border:6px solid #1b1b1e; }
.about-hero__row{ display:flex; justify-content:space-between; align-items:end; gap:24px; margin-top:44px; }
.about-hero__row p{ max-width:420px; font-size:15px; color:rgba(255,255,255,.8); }
.thumbs{ display:flex; gap:12px; }
.thumbs .ph-box{ width:120px; aspect-ratio:16/10; border-radius:6px; }
.about-title{ padding-block:clamp(56px, 8vw, 110px) clamp(40px, 5vw, 60px); }
.about-title h2{ padding-bottom:clamp(24px, 3vw, 36px); border-bottom:1px solid var(--line-d); }
.sheet{ background:var(--paper); color:var(--text); border-radius:4px; margin-inline:clamp(8px, 1.6vw, 24px); }
.sheet + .sheet{ margin-top:clamp(12px, 1.6vw, 24px); }
.about-us{ padding-block:clamp(48px, 6vw, 90px); }
.about-us .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 72px); align-items:start; }
.about-us .ph-box{ aspect-ratio:4/5; }
.about-us .prose p{ font-size:16px; }
.about-stats{ padding-block:clamp(36px, 5vw, 64px); }
.about-stats .wrap{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.about-stats small{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.about-stats small::before{ content:""; width:12px; height:2px; background:var(--accent); }
.about-stats strong{ display:block; margin-top:8px; font-family:var(--font-display); font-weight:700; font-size:clamp(34px, 4vw, 52px); letter-spacing:-.03em; }
.why{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-top:clamp(32px, 4vw, 52px); }
.why__item{ padding:30px 26px; border-radius:12px; background:var(--ink-2); border:1px solid var(--line-d); }
.why__item h3{ font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-.02em; }
.why__item p{ margin-top:10px; color:rgba(255,255,255,.68); font-size:15px; }
.join{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; margin-top:clamp(40px, 5vw, 64px); padding:28px clamp(20px, 3vw, 36px); border-radius:12px; background:var(--accent); color:var(--on-accent); }
.join h3{ font-family:var(--font-display); font-size:clamp(20px, 2.2vw, 28px); font-weight:700; }
.join p{ margin-top:4px; opacity:.9; font-size:15px; }
.join a{ background:var(--ink); color:#fff !important; color:var(--text); padding:12px 20px; border-radius:6px; font-weight:600; }

/* ============================================================ contact page */
.contact{ padding-block:clamp(48px, 6vw, 80px) clamp(72px, 9vw, 120px); }
.contact .wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px, 5vw, 72px); }
.contact__side p{ font-size:18px; color:rgba(255,255,255,.65); }
.contact__side ul{ list-style:none; margin-top:28px; display:grid; gap:14px; font-size:15px; }
.contact__side a:hover{ color:var(--accent-text); }
.form__title{ display:flex; justify-content:space-between; align-items:center; font-size:clamp(22px, 2.4vw, 30px); padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.4); margin-bottom:10px; }
.form label{ display:block; margin-top:26px; font-size:16px; font-weight:500; }
.form label .req{ color:var(--accent-text); }
.form input:not([type="checkbox"]), .form select, .form textarea{
  width:100%; margin-top:8px; padding:10px 0; background:none; border:0; border-bottom:1px solid var(--line-d);
  color:#fff; font:inherit; font-size:16px; outline:none; border-radius:0;
}
.form select{ appearance:none; -webkit-appearance:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='1.5'%3E%3Cpath d='M7 1v12M2 8l5 5 5-5'/%3E%3C/svg%3E") right 4px center no-repeat; }
.form select option{ color:#111; }
.form textarea{ resize:vertical; min-height:96px; }
.form input:focus, .form select:focus, .form textarea:focus{ border-color:#fff; }
.form ::placeholder{ color:rgba(255,255,255,.35); }
.form fieldset{ border:0; margin-top:30px; }
.form legend{ font-size:16px; font-weight:500; }
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-top:16px; }
.checks label{ display:flex; align-items:center; gap:12px; margin:0; font-weight:400; font-size:15px; color:rgba(255,255,255,.85); cursor:pointer; }
.checks input{ width:18px; height:18px; accent-color:var(--accent); }
.submit{ width:100%; margin-top:36px; padding:16px; border-radius:6px; background:var(--accent); color:var(--on-accent); font-family:var(--font-display); font-weight:600; font-size:20px; transition:background .3s; }
.submit:hover{ background:var(--accent-2); }
.form__done{ margin-top:16px; font-size:14px; color:rgba(255,255,255,.7); }

/* ============================================================ blog */
.feature{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px, 4vw, 56px); align-items:center; margin-top:clamp(32px, 4vw, 52px); }
.feature .ph-box{ aspect-ratio:16/10; }
.tag{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:rgba(var(--glow),.14); color:var(--accent-text); }
.feature h2{ margin-top:16px; font-family:var(--font-display); font-weight:700; font-size:clamp(26px, 3vw, 40px); letter-spacing:-.02em; line-height:1.1; }
.feature p{ margin-top:14px; color:rgba(255,255,255,.65); }
.byline{ margin-top:18px; font-size:13px; color:rgba(255,255,255,.5); }
.grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px 20px; }

/* ============================================================ inner responsive */
@media (max-width:900px){
  .filters{ grid-template-columns:1fr; }
  .grid-2, .grid-3{ grid-template-columns:1fr; }
  .case-body .wrap, .about-us .wrap, .contact .wrap, .feature{ grid-template-columns:1fr; }
  .case-hero{ aspect-ratio:16/10; }
  .steps{ grid-template-columns:1fr 1fr; }
  .about-stats .wrap{ grid-template-columns:1fr 1fr; }
  .about-hero__row{ flex-direction:column; align-items:flex-start; }
  .why{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
  .checks{ grid-template-columns:1fr; }
  .thumbs .ph-box{ width:88px; }
}

/* ============================================================ showreel: grows from the hero tile to full screen */
.reel-slot{ width:300px; max-width:100%; aspect-ratio:16/9; justify-self:end; }
.reel{ position:absolute; z-index:2; left:0; top:0; width:0; height:0; border-radius:10px; overflow:hidden; border:1px solid var(--line-d); will-change:left, top, width, height; }
.reel__media{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 20% 20%, rgba(var(--glow),.55), transparent 60%),
    linear-gradient(135deg, #1a1608, #0e0e10 70%);
}
[data-theme="red"] .reel__media{ background:radial-gradient(120% 90% at 20% 20%, rgba(var(--glow),.55), transparent 60%), linear-gradient(135deg, #24060a, #0e0e10 70%); }
.reel__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%, rgba(0,0,0,.65)); pointer-events:none; }
.reel__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s; }
.reel.has-video .reel__video{ opacity:1; }
.reel.has-video .reelcard__tag, .reel.has-video .reelcard__play{ display:none; }
.reel .reelcard__play{ position:relative; z-index:1; }
.reel__sound{ position:absolute; z-index:2; right:16px; bottom:16px; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(6px); }
.reel__cap{ position:absolute; z-index:3; left:0; top:0; margin:0; font-size:13px; color:rgba(255,255,255,.88); white-space:nowrap; will-change:transform; }
.hero .marquee{ z-index:3; }
@media (prefers-reduced-motion: reduce){ .hero{ height:auto; } .hero__pin{ position:relative; min-height:100svh; } }