/* ==========================================================================
   D & A CREATIONS — site stylesheet
   Structure mirrors mdntevents.com (sticky nav, marquee eyebrows, split
   feature bands, sticky-image services, card grid, CTA band, tall footer).
   Skin is D&A: near-black ground, gold leaf accents, Playfair + Poppins.
   Every colour/space value lives in :root so a rebrand is one block of edits.
   ========================================================================== */

:root{
  /* --- brand ---------------------------------------------------------- */
  --ink:#080807;           /* page ground — warm black, not pure #000 */
  --ink-2:#0f0e0c;         /* raised panels */
  --ink-3:#171512;         /* cards, inputs */
  --line:rgba(214,178,105,.22);
  --gold:#d6b269;          /* primary accent, matches the logo foil */
  --gold-bright:#e9cf94;   /* hover / highlight */
  --gold-deep:#a2802f;     /* gradient shadow side */
  --cream:#f3ece0;         /* body copy on dark */
  --muted:#9c968b;         /* secondary copy */

  /* --- type ----------------------------------------------------------- */
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* fluid scale — clamp() so nothing needs a media query to stay sane */
  --h1:clamp(2.6rem,6.2vw,5.6rem);
  --h2:clamp(2rem,4.2vw,3.6rem);
  --h3:clamp(1.35rem,2.1vw,1.9rem);
  --lead:clamp(1.02rem,1.35vw,1.25rem);

  /* --- layout --------------------------------------------------------- */
  --max:1280px;
  --gutter:clamp(1.25rem,4vw,4rem);
  --section:clamp(4.5rem,9vw,9rem);
  --radius:14px;
}

/* ---------- reset ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--body);font-size:16px;line-height:1.65;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:var(--h1)}h2{font-size:var(--h2)}h3{font-size:var(--h3)}
p{margin:0 0 1.1em}
::selection{background:var(--gold);color:var(--ink)}

/* focus ring — keyboard users only, gold so it reads on black */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- layout helpers ------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section);position:relative}
.section--tight{padding-block:calc(var(--section)*.6)}
.grid{display:grid;gap:clamp(1.5rem,3vw,3rem)}
.split{grid-template-columns:1fr 1fr;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* hairline divider used between bands, same trick MDNT uses */
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0}

/* ---------- eyebrow marquee ------------------------------------------ */
/* The repeated "For Brands For Brands…" strip on MDNT. Duplicated track so
   the -50% translate loops seamlessly; aria-hidden on the clone. */
.marquee{overflow:hidden;width:100%;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;width:max-content;animation:slide 28s linear infinite}
.marquee--fast .marquee__track{animation-duration:16s}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee__track>*{flex:0 0 auto}
@keyframes slide{to{transform:translateX(-50%)}}
.eyebrow-strip{padding-block:.9rem;border-block:1px solid var(--line)}
.eyebrow-strip span{
  font-family:var(--display);font-style:italic;font-size:clamp(1.1rem,2vw,1.7rem);
  color:var(--gold);opacity:.75;padding-inline:1.2rem;white-space:nowrap;
}
.eyebrow-strip span::after{content:"•";margin-left:1.2rem;opacity:.5}

/* small caps label above headings */
.eyebrow{
  font-family:var(--body);font-size:.72rem;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1.2rem;display:block;
}

/* ---------- buttons --------------------------------------------------- */
.btn{
  --btn-fg:var(--ink);--btn-bg:var(--gold);
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.9rem;border-radius:999px;border:1px solid var(--gold);
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:.74rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  transition:background .35s ease,color .35s ease,transform .35s ease;
  will-change:transform;
}
.btn:hover{background:var(--gold-bright);transform:translateY(-2px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--gold)}
.btn--ghost:hover{--btn-bg:var(--gold);--btn-fg:var(--ink)}
.btn__arrow{transition:transform .35s ease}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

/* text link with animated underline */
.link{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--gold);
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:.35rem;background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .4s ease;
}
.link:hover{background-size:100% 1px}

/* ---------- header ---------------------------------------------------- */
.header{
  position:fixed;inset:0 0 auto;z-index:100;
  padding-block:1.1rem;transition:background .4s ease,padding .4s ease,backdrop-filter .4s;
}
.header.is-stuck{background:rgba(8,8,7,.86);backdrop-filter:blur(14px);padding-block:.6rem;border-bottom:1px solid var(--line)}
/* see the note in the mobile block: the blur must go while the panel is open */
.nav-open .header.is-stuck{backdrop-filter:none;background:transparent;border-bottom-color:transparent}
.nav-open .header{padding-block:1.1rem}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.header__logo{display:flex;align-items:center;gap:.85rem}
.header__logo img{height:clamp(44px,4.6vw,58px);width:auto;transition:height .4s ease}
.header.is-stuck .header__logo img{height:38px}
/* wordmark set in type rather than baked into the logo file, so it stays
   crisp and readable at nav size on every screen */
.header__wordmark{
  display:flex;flex-direction:column;gap:.2rem;line-height:1;
  font-family:var(--display);font-size:clamp(.82rem,1.15vw,1rem);
  letter-spacing:.22em;color:var(--cream);white-space:nowrap;
}
.header__wordmark em{
  font-size:.54em;font-style:italic;letter-spacing:.08em;color:var(--gold);opacity:.85;
}
@media(max-width:620px){.header__wordmark em{display:none}.header__wordmark{font-size:.72rem;letter-spacing:.16em}}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.6vw,2.4rem)}
.nav a{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);
  opacity:.82;transition:opacity .3s,color .3s;
}
.nav a:hover,.nav a[aria-current="page"]{opacity:1;color:var(--gold)}
.header__cta{display:flex;align-items:center;gap:1rem}

/* burger + slide-in panel for narrow screens */
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;width:20px;height:1px;background:var(--gold);transition:transform .35s,opacity .25s}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
/* the menu's own footer block is mobile-only */
.nav__foot{display:none}
.nav__links{display:contents}

@media(max-width:940px){
  .burger{display:block}
  .header__cta .btn{display:none}

  /* --- the mobile menu -------------------------------------------------
     Previously this was a full-screen void with five small centred labels
     floating in the middle and no way to reach Contact. Now it is a proper
     panel: brand at the top, generous left-aligned links, and the actions
     that matter on a phone — enquire, WhatsApp, call — pinned at the bottom
     where a thumb reaches. */
  .nav{
    position:fixed;inset:0;display:flex;flex-direction:column;justify-content:flex-start;
    align-items:stretch;
    gap:0;background:var(--ink);opacity:0;visibility:hidden;
    transform:translateY(-8px);transition:opacity .35s ease,transform .35s ease,visibility .35s;
    padding:calc(env(safe-area-inset-top,0px) + 6.5rem) var(--gutter)
            calc(env(safe-area-inset-bottom,0px) + 2rem);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none}

  .nav__links{display:flex;flex-direction:column;width:100%}

  .nav__links a{
    font-family:var(--display);font-size:1.5rem;letter-spacing:.01em;
    text-transform:none;color:var(--cream);
    display:flex;align-items:center;
    justify-content:flex-start;               /* left-aligned, not ragged-centre */
    min-height:0;padding-block:1.05rem;
    border-bottom:1px solid var(--line);
    opacity:0;transform:translateY(10px);
    transition:opacity .4s ease,transform .4s ease,color .25s;
  }
  /* links arrive in sequence — makes the panel feel built, not dumped */
  .nav.is-open .nav__links a{opacity:1;transform:none}
  .nav.is-open .nav__links a:nth-child(1){transition-delay:.06s}
  .nav.is-open .nav__links a:nth-child(2){transition-delay:.11s}
  .nav.is-open .nav__links a:nth-child(3){transition-delay:.16s}
  .nav.is-open .nav__links a:nth-child(4){transition-delay:.21s}
  .nav.is-open .nav__links a:nth-child(5){transition-delay:.26s}
  .nav__links a[aria-current="page"]{color:var(--gold)}
  .nav__links a[aria-current="page"]::after{content:"—";margin-left:.6rem;opacity:.6}

  /* actions block, pushed to the bottom of the panel */
  .nav__foot{
    display:flex;flex-direction:column;gap:.9rem;align-items:stretch;
    margin-top:auto;padding-top:2.25rem;
    opacity:0;transform:translateY(10px);
    transition:opacity .45s ease .3s,transform .45s ease .3s;
  }
  .nav.is-open .nav__foot{opacity:1;transform:none}
  .nav__foot .btn{width:100%;justify-content:center;font-size:.84rem;padding:1.1rem 1.5rem;min-height:52px}
  .nav__direct{
    font-family:var(--body);font-size:.95rem;letter-spacing:.02em;text-transform:none;
    color:var(--gold);border:0;padding-block:.55rem;min-height:44px;
    justify-content:flex-start;opacity:1;transform:none;
  }
  .nav__note{
    font-family:var(--display);font-style:italic;font-size:.9rem;
    color:var(--muted);padding-top:.4rem;
  }

  /* keep the logo and close button above the panel while it is open */
  .header{z-index:120}
  .header__logo,.burger{position:relative;z-index:130}
  .nav{z-index:110}
}

/* ---------- hero ------------------------------------------------------ */
.hero{padding-top:clamp(8rem,16vw,12rem);padding-bottom:var(--section);position:relative;overflow:hidden}
/* radial gold bloom behind the headline — the "after dark" glow */
.hero::before{
  content:"";position:absolute;top:-20%;left:50%;transform:translateX(-50%);
  width:min(1100px,120vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(214,178,105,.16),transparent 62%);
}
.hero__inner{position:relative;z-index:1;text-align:center;max-width:1000px;margin-inline:auto}
.hero h1{margin-bottom:1.4rem}
.hero__lead{font-size:var(--lead);color:var(--muted);max-width:62ch;margin-inline:auto}
.hero .btn-row{justify-content:center}
/* --- hero with video background ---------------------------------------
   The film is a background layer, not content: it sits at z-index 0 with the
   copy above it. Height is capped so the headline never gets pushed below the
   fold on a laptop, and the scrim guarantees text contrast whatever frame is
   playing. If the video fails, the poster shows; if both fail, the JS
   placeholder takes over and the section still has its own dark ground. */
.hero--video{
  min-height:min(94vh,900px);display:flex;align-items:center;
  padding-top:clamp(9rem,15vw,12rem);padding-bottom:clamp(4rem,8vw,7rem);
}
.hero--video::before{z-index:1}          /* keep the gold bloom above the film */
.hero__bg{
  position:absolute;inset:0;overflow:hidden;
  background:var(--ink) url(../img/showreel-poster.jpg) center/cover no-repeat;
}
.hero__bg video,.hero__bg .ph{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* scrim: darker at top and bottom so the fixed nav and the scroll edge stay
   readable, lighter through the middle so the footage is still visible */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,8,7,.92) 0%,rgba(8,8,7,.55) 32%,rgba(8,8,7,.62) 68%,rgba(8,8,7,.96) 100%),
    radial-gradient(ellipse at 50% 45%,rgba(8,8,7,.25),rgba(8,8,7,.8) 75%);
}
.hero--video .hero__inner{z-index:2}
/* on phones the crop goes very tight — lift the scrim and let it breathe */
@media(max-width:700px){
  .hero__scrim{background:linear-gradient(180deg,rgba(8,8,7,.9),rgba(8,8,7,.6) 40%,rgba(8,8,7,.97))}
}
/* autoplaying motion behind text is an accessibility problem — hold the poster */
@media(prefers-reduced-motion:reduce){.hero__bg video{display:none}}

.hero--page{padding-bottom:calc(var(--section)*.5)}
.hero--page .hero__inner{text-align:left;margin-inline:0}
.hero--page .btn-row{justify-content:flex-start}

/* full-bleed media band under the hero */
.showreel{position:relative;width:100%;aspect-ratio:16/8;overflow:hidden;border-block:1px solid var(--line)}
.showreel video,.showreel img{width:100%;height:100%;object-fit:cover}
.showreel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,7,.55),transparent 35%,rgba(8,8,7,.75))}
@media(max-width:700px){.showreel{aspect-ratio:4/5}}

/* ---------- client wordmark marquee ----------------------------------- */
/* D&A has no client logo files, so clients render as letterspaced wordmarks.
   Swap each <span> for an <img> when the real logos land. */
.clients{padding-block:2.2rem}
.clients__item{
  font-family:var(--display);font-size:clamp(1.05rem,1.8vw,1.5rem);letter-spacing:.06em;
  color:var(--cream);opacity:.45;padding-inline:clamp(1.6rem,4vw,3.4rem);white-space:nowrap;
  transition:opacity .3s;
}
.clients__item:hover{opacity:.9}

/* ---------- statement band -------------------------------------------- */
.statement{max-width:24ch;font-size:var(--h2);font-family:var(--display)}
.statement--wide{max-width:34ch}
.gold{color:var(--gold)}
.italic{font-style:italic}

/* ---------- feature band (For Corporates / For Socials) ---------------- */
.feature{position:relative;border-top:1px solid var(--line)}
.feature__media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.feature__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.feature:hover .feature__media img{transform:scale(1.04)}
.feature__media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius)}
.feature--flip .feature__media{order:2}
@media(max-width:860px){.feature--flip .feature__media{order:0}}

/* ---------- service list (sticky heading, scrolling rows) -------------- */
.services{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:900px){.services{grid-template-columns:1fr}}
.services__sticky{position:sticky;top:120px}
@media(max-width:900px){.services__sticky{position:static}}
.service{
  display:grid;grid-template-columns:auto 1fr;gap:1.4rem;
  padding-block:1.6rem;border-top:1px solid var(--line);
}
.service:last-child{border-bottom:1px solid var(--line)}
.service__no{font-family:var(--display);font-size:.9rem;color:var(--gold);opacity:.7;padding-top:.35rem}
.service h3{margin-bottom:.35rem}
.service p{color:var(--muted);margin:0;font-size:.95rem}

/* capability pills — "What we bring together" from the one-pager */
.pills{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.pill{
  border:1px solid var(--line);border-radius:999px;padding:.6rem 1.3rem;
  font-size:.8rem;color:var(--cream);opacity:.85;transition:border-color .3s,color .3s,transform .3s;
}
.pill:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

/* ---------- work cards ------------------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.2rem,2.4vw,2rem)}
.card{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line);isolation:isolate;
}
.card__media{aspect-ratio:4/3;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__media img{transform:scale(1.06)}
.card__body{padding:1.5rem 1.5rem 1.8rem}
.card__tag{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.card__body h3{margin:.6rem 0 .5rem;font-size:1.35rem}
.card__body p{color:var(--muted);font-size:.92rem;margin:0}
.card__cta{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.card:hover .card__cta .btn__arrow{transform:translateX(4px)}

/* filter row on the work index */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.5rem}
.filter{
  border:1px solid var(--line);background:transparent;color:var(--cream);
  border-radius:999px;padding:.55rem 1.35rem;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;transition:.3s;
}
.filter:hover{border-color:var(--gold);color:var(--gold)}
.filter.is-active{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.card.is-hidden{display:none}

/* ---------- stat row -------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;border-block:1px solid var(--line);padding-block:3rem}
.stat__n{font-family:var(--display);font-size:clamp(2.2rem,4.5vw,3.4rem);color:var(--gold);line-height:1}
.stat__l{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}

/* ---------- pillars --------------------------------------------------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.pillar{border-top:1px solid var(--gold);padding-top:1.4rem}
.pillar h3{font-size:1.25rem}
.pillar p{color:var(--muted);font-size:.93rem;margin:0}

/* ---------- accordion (partner-with-us details) ----------------------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:none;border:0;color:var(--cream);text-align:left;cursor:pointer;
  padding:1.5rem 0;font-family:var(--display);font-size:clamp(1.1rem,2vw,1.5rem);
}
.acc__btn:hover{color:var(--gold)}
.acc__ico{width:22px;height:22px;position:relative;flex:0 0 auto}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;background:var(--gold);transition:transform .35s}
.acc__ico::before{top:10px;left:0;width:22px;height:1px}
.acc__ico::after{left:10px;top:0;width:1px;height:22px}
.acc__item.is-open .acc__ico::after{transform:scaleY(0)}
/* grid-template-rows animation keeps the panel height automatic */
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel>div{overflow:hidden}
.acc__panel p,.acc__panel ul{color:var(--muted);font-size:.95rem}
.acc__panel ul{margin:0 0 1.2rem;padding-left:1.1rem}
.acc__panel li{margin-bottom:.45rem}

/* ---------- quote ----------------------------------------------------- */
.quote{max-width:900px;margin-inline:auto;text-align:center}
.quote blockquote{font-family:var(--display);font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.35;margin:0 0 1.6rem;font-style:italic}
.quote figcaption{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.quote__avatar{width:74px;height:74px;border-radius:50%;object-fit:cover;margin:0 auto 1.6rem;border:1px solid var(--line)}

/* ---------- CTA band -------------------------------------------------- */
.cta{position:relative;text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 120%,rgba(214,178,105,.22),transparent 60%);
}
.cta__inner{position:relative;z-index:1}
.cta h2{max-width:18ch;margin-inline:auto}

/* ---------- footer ---------------------------------------------------- */
.footer{border-top:1px solid var(--line);padding-top:var(--section);background:var(--ink-2)}
.footer__top{display:grid;grid-template-columns:1.2fr repeat(3,minmax(0,1fr));gap:2.5rem}
@media(max-width:860px){.footer__top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer__top{grid-template-columns:1fr}}
.footer h4{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-family:var(--body);font-weight:500;margin-bottom:1.1rem}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:.7rem}
.footer a{color:var(--muted);font-size:.9rem;transition:color .3s}
.footer a:hover{color:var(--gold)}
.footer__logo img{height:64px;width:auto;margin-bottom:1.2rem}
.footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  margin-top:var(--section);padding-block:1.6rem;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--muted);
}
/* oversized wordmark bleeding off the bottom, as on MDNT */
.footer__word{
  font-family:var(--display);font-size:clamp(3rem,13vw,11rem);line-height:.9;
  text-align:center;color:transparent;-webkit-text-stroke:1px var(--line);
  margin:0;padding-top:2rem;user-select:none;letter-spacing:.02em;
}

/* ---------- forms ----------------------------------------------------- */
.form{display:grid;gap:1.2rem;grid-template-columns:1fr 1fr}
.form .full{grid-column:1/-1}
@media(max-width:700px){.form{grid-template-columns:1fr}}
.field label{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.55rem}
.field input,.field select,.field textarea{
  width:100%;background:var(--ink-3);border:1px solid var(--line);border-radius:8px;
  color:var(--cream);padding:.9rem 1rem;font:inherit;font-size:.95rem;transition:border-color .3s;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.form__note{font-size:.8rem;color:var(--muted)}

/* Contact layout. Kept in the stylesheet rather than inline on the element,
   because an inline style wins against the mobile media query — which is
   exactly how the details column ended up hanging off the side of phones. */
.contact-grid{grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr;gap:2.5rem}}

.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{border-top:1px solid var(--line);padding-block:1.1rem}
.contact-list span{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.35rem}
.contact-list a,.contact-list p{font-size:1.05rem;color:var(--cream);margin:0}

/* ---------- prose (legal pages) --------------------------------------- */
.prose{max-width:75ch}
.prose h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-top:2.6rem}
.prose h3{font-size:1.15rem;margin-top:1.8rem}
.prose p,.prose li{color:var(--muted);font-size:.98rem}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.5rem}

/* ---------- case study detail ----------------------------------------- */
.crumb{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:2rem}
.crumb a{color:var(--gold);display:inline-block;padding-block:.5rem}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;border-block:1px solid var(--line);padding-block:1.8rem;margin-block:2.5rem}
.meta dt{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.meta dd{margin:0;font-size:1rem}
.case-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
@media(max-width:860px){.case-body{grid-template-columns:1fr}}
.case-body ul{padding-left:1.1rem;color:var(--muted)}
.case-body li{margin-bottom:.6rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   PLACEHOLDER SYSTEM
   Any media that still belongs to someone else, or that D&A has not supplied
   yet, carries data-spec="…". If the remote file fails to load, JS swaps in
   this block so the gap is visible and self-describing rather than silent.
   Add ?placeholders=1 to any URL to force every one of them on.
   ========================================================================== */
.ph{
  position:relative;width:100%;height:100%;min-height:180px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;
  padding:1.5rem;text-align:center;
  background:
    repeating-linear-gradient(45deg,rgba(214,178,105,.05) 0 12px,transparent 12px 24px),
    var(--ink-3);
  border:1px dashed var(--gold);border-radius:var(--radius);color:var(--gold);
}
.ph__label{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;opacity:.8}
.ph__spec{font-family:var(--body);font-size:.86rem;color:var(--cream);max-width:42ch;line-height:1.5}
/* inline text placeholder, e.g. a missing phone number or client metric */
.ph-text{
  display:inline;border-bottom:1px dashed var(--gold);color:var(--gold);
  background:rgba(214,178,105,.08);padding:0 .25em;
}

/* ---------- scroll reveal --------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
[data-reveal].is-in{opacity:1;transform:none}

/* respect reduced-motion: kill reveals, marquees and hover scales */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ==========================================================================
   MOBILE
   Everything above is fluid, so nothing breaks on a phone — but "doesn't
   break" isn't "designed for". These rules were written after measuring the
   live site in a real 390px viewport. Four things came back:
     1. small text bottomed out at 10.5px — unreadable at arm's length
     2. tap targets as small as 20px tall — Apple and Google both say 44px
     3. the hero filled 805px of an 844px screen, pushing the buttons off
     4. inputs at 15.2px made iOS zoom the page on focus
   ========================================================================== */
@media (max-width:768px){

  /* --- 1. legible small text ------------------------------------------
     Letterspaced uppercase is the worst offender: it reads smaller than it
     measures. Sizes go up and tracking comes down. */
  .eyebrow{font-size:.82rem;letter-spacing:.2em}
  .btn{font-size:.82rem;letter-spacing:.12em;padding:1rem 1.6rem}
  .link{font-size:.84rem;letter-spacing:.12em}
  .filter{font-size:.8rem;letter-spacing:.1em;padding:.75rem 1.3rem}
  .card__tag{font-size:.76rem;letter-spacing:.16em}
  .card__cta{font-size:.8rem;letter-spacing:.12em}
  .stat__l{font-size:.8rem;letter-spacing:.14em}
  .pill{font-size:.88rem;padding:.7rem 1.2rem}
  .footer h4{font-size:.82rem;letter-spacing:.18em}
  .footer a,.footer li{font-size:1rem}
  .footer__bottom{font-size:.88rem}
  .crumb{font-size:.8rem;letter-spacing:.14em}
  .meta dt{font-size:.76rem;letter-spacing:.16em}
  .quote figcaption{font-size:.82rem;letter-spacing:.14em}
  .contact-list span{font-size:.78rem;letter-spacing:.16em}
  .field label{font-size:.8rem;letter-spacing:.14em}
  .form__note,.ph__spec{font-size:.92rem}
  .ph__label{font-size:.74rem;letter-spacing:.18em}
  .service__no{font-size:1rem}
  body{font-size:16.5px;line-height:1.7}   /* slightly airier column */

  /* --- 2. tap targets --------------------------------------------------
     44px minimum. Padding rather than height so the text stays put. */
  /* tap target only — alignment belongs to the menu rules above, which come
     earlier in this file and would otherwise lose the specificity tie */
  .nav__links a{min-height:48px}
  .footer li{margin-bottom:.2rem}
  .footer a{display:inline-flex;align-items:center;min-height:44px}
  .link{min-height:44px;align-items:center}
  .contact-list a{display:inline-flex;align-items:center;min-height:44px}
  .card__cta{min-height:44px}
  .acc__btn{padding-block:1.25rem}
  .burger{width:48px;height:48px}

  /* --- 3. hero fits the screen ----------------------------------------
     svh = the *small* viewport height, i.e. with the browser chrome showing.
     Using vh here is the classic phone bug: the hero is sized for a taller
     screen than the visitor actually has, so the buttons sit below the fold
     until they scroll. The vh line is the fallback for older browsers. */
  /* Full-bleed hero. dvh follows the browser chrome as it hides on scroll,
     so the film fills the screen edge to edge instead of leaving a band at
     the top; the two lines above it are fallbacks for older phones. */
  .hero--video{
    min-height:100vh;
    min-height:100svh;
    min-height:100dvh;
    padding-top:calc(env(safe-area-inset-top,0px) + clamp(7rem,22vw,9rem));
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(2.5rem,8vw,4rem));
  }
  /* the video sits under the status bar / notch rather than starting below it */
  .hero__bg{top:calc(-1 * env(safe-area-inset-top,0px));height:calc(100% + env(safe-area-inset-top,0px))}
  .hero{padding-top:clamp(7rem,22vw,9rem)}
  .hero h1{font-size:clamp(2.4rem,10.5vw,3.4rem)}
  .hero__lead{font-size:1.02rem}
  .hero .btn-row,.btn-row{gap:.7rem}
  .hero .btn-row .btn{flex:1 1 100%;justify-content:center}  /* full-width, thumb-friendly */

  /* --- 4. no iOS zoom on focus ----------------------------------------
     Safari zooms the whole page when a focused input is under 16px. */
  .field input,.field select,.field textarea{font-size:16px;padding:1rem}
  .field textarea{min-height:130px}

  /* --- proportion --------------------------------------------------- */
  :root{--section:clamp(3.5rem,12vw,5rem)}   /* tighter bands, less scrolling */
  .statement,.statement--wide{max-width:none}
  .service{grid-template-columns:auto 1fr;gap:1rem;padding-block:1.35rem}
  .meta{grid-template-columns:1fr 1fr;gap:1.2rem}
  .footer__word{font-size:clamp(2.4rem,15vw,4rem);-webkit-text-stroke-width:.5px}
  .quote blockquote{font-size:clamp(1.3rem,5.5vw,1.7rem)}
  .gallery{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  /* the behind-the-scenes strip is 220px tall on desktop — too much here */
  .marquee__track img{height:150px!important}
}

/* Very narrow phones (iPhone SE and similar) */
@media (max-width:380px){
  .header__wordmark{font-size:.68rem;letter-spacing:.12em}
  .header__logo img{height:38px}
  .hero h1{font-size:clamp(2.1rem,10vw,2.6rem)}
  .btn{padding:.95rem 1.2rem;font-size:.78rem}
}

/* Landscape phones: the hero would otherwise be taller than the screen */
@media (max-height:520px) and (orientation:landscape){
  .hero--video{min-height:auto;padding-block:6rem 3rem}
  .hero h1{font-size:clamp(1.8rem,6vw,2.6rem)}
}

/* Tablets — two columns is right for cards, one is wasteful */
@media (min-width:769px) and (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr;gap:2rem}
}

/* ---------- print ----------------------------------------------------- */
@media print{
  .header,.cta,.marquee,.showreel{display:none}
  body{background:#fff;color:#111}
}