@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&display=swap");

/* fonts */
/* Audient Marketing uses Montserrat exclusively (per Audient Brand.pdf).
   No font binaries were supplied with the brand pack, so Montserrat is loaded
   from Google Fonts — the same typeface, not a substitute.
   Weights in active brand use: 300 Light (body), 600 SemiBold (headers),
   300/600 italic (accent). 400 Regular appears once in the deck (slide 4 kicker). */

:root {
  --font-family-core: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: var(--font-family-core);
  --font-family-body: var(--font-family-core);
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* colors */
:root {
  /* ---- Brand palette (Audient Brand.pdf — hex is authoritative) ---- */
  --onyx: #3C3C3B;          /* CMYK 66 57 55 60 */
  --claret: #79102C;        /* CMYK 31 100 62 44 */
  --blush-white: #EFE6E5;   /* CMYK 7 11 9 0 */
  --dusk-pink: #E09998;     /* CMYK 10 48 32 1 */
  --chilli-red: #E3422B;    /* CMYK 2 85 87 0 */
  --white: #FFFFFF;

  /* ---- Tints / shades. Derived, for hover-press states and hairlines only.
         Never introduce a new hue: everything below is one of the five above. ---- */
  --onyx-90: #4F4F4E;
  --onyx-70: #6B6B6A;
  --onyx-40: #A5A5A4;
  --onyx-15: #E2E2E1;
  --onyx-08: #F0F0EF;
  --claret-hover: #5F0D23;
  --claret-tint-12: #F1E7EA;
  --chilli-red-hover: #C4341F;
  --chilli-red-tint-12: #FCEAE7;
  --blush-white-deep: #E4D6D5;
  --dusk-pink-deep: #C97F7E;

  /* ---- Surfaces ---- */
  --surface-page: var(--white);
  --surface-muted: var(--blush-white);      /* the default "not white" ground */
  --surface-inverse: var(--onyx);           /* covers, closers, feature panels */
  --surface-accent: var(--claret);          /* burgundy feature panels */
  --surface-card: var(--white);
  --surface-card-muted: var(--blush-white);
  --surface-overlay: rgba(60, 60, 59, 0.72);

  /* ---- Text ---- */
  --text-body: var(--onyx);
  --text-heading: var(--onyx);
  --text-accent: var(--chilli-red);         /* headline / eyebrow accent */
  --text-muted: var(--onyx-70);
  --text-subtle: var(--onyx-40);
  --text-on-inverse: var(--blush-white);
  --text-on-accent: var(--blush-white);
  --text-link: var(--chilli-red);
  --text-link-hover: var(--chilli-red-hover);
  --text-link-on-inverse: var(--dusk-pink);

  /* ---- Lines ---- */
  --border-hairline: var(--onyx-15);
  --border-strong: var(--onyx);
  --border-accent: var(--chilli-red);
  --border-on-inverse: rgba(239, 230, 229, 0.28);
  --rule-weight: 1px;
  --rule-weight-strong: 3px;

  /* ---- Interactive ---- */
  --action-primary-bg: var(--chilli-red);
  --action-primary-bg-hover: var(--chilli-red-hover);
  --action-primary-fg: var(--white);
  --action-secondary-bg: var(--onyx);
  --action-secondary-bg-hover: var(--onyx-90);
  --action-secondary-fg: var(--blush-white);
  --action-ghost-fg: var(--onyx);
  --action-ghost-border: var(--onyx);
  --action-ghost-bg-hover: var(--onyx-08);
  --action-disabled-bg: var(--onyx-15);
  --action-disabled-fg: var(--onyx-40);
  --focus-ring: var(--chilli-red);

  /* ---- Semantic status. The brand pack defines no status palette; these are
         drawn from the existing five so nothing off-brand appears. Claret =
         critical, chilli red = warning/attention, onyx = neutral/info,
         dusk pink = in-progress. Success has no brand equivalent — flagged in
         readme.md; it uses onyx so it never reads as an unapproved green. ---- */
  --status-critical: var(--claret);
  --status-critical-surface: var(--claret-tint-12);
  --status-attention: var(--chilli-red);
  --status-attention-surface: var(--chilli-red-tint-12);
  --status-progress: var(--dusk-pink);
  --status-progress-surface: var(--blush-white);
  --status-neutral: var(--onyx-70);
  --status-neutral-surface: var(--onyx-08);
}

/* typography */
:root {
  /* ---- Weights. Only these three carry the brand. ---- */
  --weight-light: 300;      /* body copy — the brand default */
  --weight-regular: 400;    /* rare; deck slide 4 kicker only */
  --weight-semibold: 600;   /* all headers, lead-ins, emphasis */

  /* ---- Tracking. The wordmark's "MARKETING" lockup is the brand's one
         wide-tracked element; eyebrows and small caps echo it. ---- */
  --tracking-lockup: 0.42em;
  --tracking-eyebrow: 0.18em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;

  --leading-tight: 1.1;
  --leading-heading: 1.2;
  --leading-body: 1.5;
  --leading-loose: 1.65;

  /* ---- Screen / UI scale (px) ---- */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 26px;
  --text-3xl: 32px;
  --text-4xl: 42px;
  --text-5xl: 56px;
  --text-6xl: 72px;

  /* ---- Named roles ---- */
  --type-display: var(--weight-semibold) var(--text-5xl) / var(--leading-tight) var(--font-family-heading);
  --type-h1: var(--weight-semibold) var(--text-4xl) / var(--leading-heading) var(--font-family-heading);
  --type-h2: var(--weight-semibold) var(--text-3xl) / var(--leading-heading) var(--font-family-heading);
  --type-h3: var(--weight-semibold) var(--text-2xl) / var(--leading-heading) var(--font-family-heading);
  --type-h4: var(--weight-semibold) var(--text-xl) / var(--leading-heading) var(--font-family-heading);
  --type-lead: var(--weight-light) var(--text-xl) / var(--leading-body) var(--font-family-body);
  --type-body: var(--weight-light) var(--text-md) / var(--leading-body) var(--font-family-body);
  --type-body-strong: var(--weight-semibold) var(--text-md) / var(--leading-body) var(--font-family-body);
  --type-small: var(--weight-light) var(--text-sm) / var(--leading-body) var(--font-family-body);
  --type-footnote: var(--weight-light) var(--text-xs) / var(--leading-body) var(--font-family-body);
  --type-eyebrow: var(--weight-semibold) var(--text-xs) / var(--leading-tight) var(--font-family-heading);
}

/* spacing */
:root {
  /* 4px base. The deck's own grid is not 4-snapped (35px slide margin,
     46px gutter) — those live in tokens/deck.css verbatim. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Semantic */
  --gap-inline: var(--space-2);       /* icon ↔ label */
  --gap-stack: var(--space-3);        /* paragraph rhythm */
  --gap-list: var(--space-4);         /* bulleted capability lists */
  --gap-group: var(--space-8);        /* block ↔ block */
  --gap-section: var(--space-20);     /* page section rhythm */
  --pad-control: 12px 24px;
  --pad-control-sm: 8px 16px;
  --pad-card: var(--space-8);
  --page-gutter: var(--space-8);
  --page-max: 1200px;
}

/* shape */
:root {
  /* Audient is a square-cornered brand. Every shape in the deck is a true
     rectangle; the only curve in the identity is the half-round terminal of
     the logo device (the dot over the "i", used enlarged as the bullet mark).
     So: radius 0 by default, and a half-round token for that device only. */
  --radius-none: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-btn: 8px;             /* buttons */
  --radius-panel: 14px;          /* client logo panel */
  --radius-device: 999px;        /* half-round / pill — device + avatar only */
  --radius-device-top: 999px 999px 0 0;  /* the logo's "i" dot silhouette */

  --border-width: 1px;
  --border-width-strong: 3px;

  /* Shadows are absent from the brand deck. Keep them off print-derived
     surfaces; the two below exist only for on-screen layering (menus, modals)
     and are neutral onyx, never coloured. */
  --shadow-none: none;
  --shadow-raised: 0 1px 2px rgba(60, 60, 59, 0.08), 0 2px 8px rgba(60, 60, 59, 0.06);
  --shadow-overlay: 0 8px 32px rgba(60, 60, 59, 0.18);

  /* Separation is done with hairlines and ground changes, not shadow. */
  --card-border: var(--border-width) solid var(--border-hairline);
  --card-shadow: var(--shadow-none);
}

/* motion */
:root {
  /* Consultant-grade restraint: short, linear-ish fades and colour shifts.
     No bounce, no spring, no scale-up-on-hover. Press states nudge 1px. */
  --duration-instant: 90ms; /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 220ms; /* @kind other */
  --duration-slow: 380ms; /* @kind other */

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  --transition-control: background-color var(--duration-fast) var(--ease-standard),
                        color var(--duration-fast) var(--ease-standard),
                        border-color var(--duration-fast) var(--ease-standard);
  --transition-surface: opacity var(--duration-base) var(--ease-out),
                        transform var(--duration-base) var(--ease-out);
  --press-offset: 1px;
}


/* site */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--onyx)}
body{margin:0;background:var(--onyx);color:var(--blush-white);font-family:var(--font-family-core);font-weight:var(--weight-light);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block}
a{color:var(--dusk-pink);text-decoration:none}
a:hover{color:var(--blush-white)}
h1,h2,h3,h4{margin:0;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);text-wrap:pretty}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.sec{padding:clamp(72px,10vh,120px) 0}
.sec.light{background:var(--white);color:var(--text-body)}
.sec.blush{background:var(--surface-muted);color:var(--text-body)}
.sec.claret{background:var(--claret);color:var(--blush-white)}
.sec.tight{padding:64px 0}
.eyebrow{display:flex;align-items:center;gap:12px;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--dusk-pink)}
.eyebrow::before{content:"";display:block;width:13px;height:13px;background:var(--dusk-pink);border-radius:0 999px 999px 0;flex:0 0 auto}
.light .eyebrow,.blush .eyebrow{color:var(--chilli-red)}
.light .eyebrow::before,.blush .eyebrow::before{background:var(--chilli-red)}
.rule{width:48px;height:3px;background:var(--chilli-red);border:0;margin:0}
.hair{height:1px;background:var(--border-on-inverse);border:0;margin:0}
.light .hair,.blush .hair{background:var(--border-hairline)}
.lead{font:var(--type-lead)}
.body{font:var(--type-body);color:rgba(239,230,229,.82)}
.light .body,.blush .body{color:var(--text-body)}
.small{font:var(--type-small);color:rgba(239,230,229,.6)}
.light .small,.blush .small{color:var(--text-muted)}
.foot-note{font:var(--type-footnote);color:rgba(239,230,229,.5)}
.light .foot-note,.blush .foot-note{color:var(--text-subtle)}
.stack{display:flex;flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}.g32{gap:32px}.g40{gap:40px}.g56{gap:56px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 32px;background:var(--chilli-red);color:var(--white);border:1px solid var(--chilli-red);border-radius:var(--radius-btn);font-weight:var(--weight-semibold);font-size:var(--text-sm);letter-spacing:.1em;text-transform:uppercase;transition:var(--transition-control)}
.btn:hover{background:var(--chilli-red-hover);border-color:var(--chilli-red-hover);color:var(--white)}
.btn:active{transform:translateY(var(--press-offset))}
.btn.sm{height:44px;padding:0 22px;font-size:var(--text-xs)}
.btn.line{background:transparent;color:var(--blush-white);border-color:rgba(239,230,229,.45)}
.btn.line:hover{background:rgba(239,230,229,.1);border-color:var(--blush-white);color:var(--blush-white)}
.btn.inverse{background:var(--blush-white);color:var(--onyx);border-color:var(--blush-white)}
.btn.inverse:hover{background:var(--white);border-color:var(--white);color:var(--onyx)}
/* header — transparent over the hero, inverts to white past it */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--chilli-red);z-index:60}
header{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:background-color 300ms ease,border-color 300ms ease}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;height:88px}
nav{display:flex;gap:34px}
nav a{font-size:var(--text-sm);font-weight:var(--weight-light);color:rgba(239,230,229,.66);transition:var(--transition-control)}
nav a:hover{color:var(--blush-white)}
header.solid{background:var(--white);border-bottom-color:var(--border-hairline)}
header.solid nav a{color:var(--text-muted)}
header.solid nav a:hover{color:var(--onyx)}
header .logo img{width:176px;display:block}
header .logo .l2{display:none}
header.solid .logo .l1{display:none}
header.solid .logo .l2{display:block}
/* hero — full-bleed onyx, oversized display type, ledger pinned to the base */
.hero{min-height:clamp(500px,72vh,720px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:132px;padding-bottom:clamp(40px,6vh,64px)}
.disp{font-size:clamp(40px,7.2vw,104px);font-weight:var(--weight-light);line-height:.99;letter-spacing:-.035em;color:var(--blush-white);max-width:19ch}
.disp span{color:var(--chilli-red)}
.ledger{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border-on-inverse);margin:clamp(48px,8vh,88px) 0 0}
.ledger>div{padding:26px 28px 30px;border-right:1px solid var(--border-on-inverse)}
.ledger>div:first-child{padding-left:0}
.ledger>div:last-child{border-right:0}
.ledger dt{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--dusk-pink);margin:0}
.ledger dd{margin:16px 0 0;font-size:clamp(20px,2vw,30px);font-weight:var(--weight-light);line-height:1.02;letter-spacing:var(--tracking-tight);color:var(--blush-white)}
.ledger dd em{font-style:normal;font-weight:var(--weight-semibold)}
/* bullets */
.bul{display:grid;grid-template-columns:30px 1fr;align-items:start;font:var(--type-body);color:rgba(239,230,229,.88)}
.light .bul,.blush .bul{color:var(--text-body)}
.bul>i{margin-top:.5em;width:12px;height:12px;background:var(--dusk-pink);border-radius:0 999px 999px 0;display:block}
.light .bul>i,.blush .bul>i{background:var(--chilli-red)}
/* client wall — inset white panel so third-party marks stay unaltered */
.wallpanel{background:var(--white);border-radius:var(--radius-panel);padding:clamp(28px,4vw,48px) clamp(24px,4.5vw,56px)}
.wall{display:grid;grid-template-columns:repeat(5,1fr);gap:36px 44px;align-items:center;justify-items:center}
.wall img{max-width:100%;max-height:44px;width:auto;object-fit:contain}
/* problem rows — hairlines on dark, no boxes */
.prow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px);padding:34px 0;border-top:1px solid var(--border-on-inverse)}
.prow:last-child{border-bottom:1px solid var(--border-on-inverse)}
.prow .sym{color:rgba(239,230,229,.62);font:var(--type-body)}
.prow .fix{color:var(--blush-white);font:var(--type-body)}
.pill{display:inline-flex;align-items:center;height:38px;padding:0 16px;border:1px solid var(--border-hairline);border-radius:var(--radius-btn);background:var(--white);font-size:var(--text-sm);color:var(--text-body)}
.card{border:1px solid var(--border-hairline);background:var(--white);padding:32px}
.card.blush{background:var(--surface-muted);border-color:transparent;border-radius:var(--radius-btn)}
.card.accent{border-top:3px solid var(--chilli-red)}
.tbc{display:inline;background:rgba(224,153,152,.18);border-bottom:2px solid var(--dusk-pink);padding:0 4px;color:var(--dusk-pink);font-weight:var(--weight-semibold)}
.light .tbc,.blush .tbc{background:var(--chilli-red-tint-12);border-bottom-color:var(--dusk-pink);color:var(--claret)}
.quote{font-size:var(--text-4xl);font-weight:var(--weight-light);line-height:1.3;color:var(--blush-white)}
.partner{position:relative;border-top:3px solid var(--chilli-red);background:var(--white);padding:32px;display:flex;flex-direction:column;gap:14px}
/* whole card is clickable: the card's own link is stretched over it */
.partner a.go::after{content:"";position:absolute;inset:0}
.partner:hover a.go{color:var(--claret)}
.partner:has(a.go:focus-visible){outline:2px solid var(--chilli-red);outline-offset:4px}
.partner a.go:focus-visible{outline:none}
.partner .plate{background:var(--onyx);border-radius:var(--radius-btn);height:112px;padding:0 28px;display:flex;align-items:center;margin-bottom:10px}
.partner .plate img{width:auto;max-width:100%;object-fit:contain}
.partner h3{font:var(--type-h3)}
.partner .who{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.partner a.go{margin-top:auto;padding-top:8px;font-size:var(--text-sm);font-weight:var(--weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--chilli-red)}
.partner a.go:hover{color:var(--claret)}
.crow{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:22px 0;border-bottom:1px solid var(--border-on-inverse)}
.crow:first-child{border-top:1px solid var(--border-on-inverse)}
.crow span{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--dusk-pink)}
.crow strong{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--blush-white)}
.crow a{color:var(--blush-white)}
.crow a:hover{color:var(--dusk-pink)}
footer{background:var(--onyx);padding:44px 0;border-top:1px solid var(--border-on-inverse)}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer a{color:rgba(239,230,229,.55)}
footer a:hover{color:var(--blush-white)}
image-slot{--is-radius:0}
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-standard,ease),transform .7s var(--ease-standard,ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
@media (max-width:1080px){
  .about,.cap,.prow,.contact,.partners{grid-template-columns:1fr!important}
  .ledger{grid-template-columns:1fr 1fr}
  .ledger>div{border-right:0;border-bottom:1px solid var(--border-on-inverse);padding-left:0;padding-bottom:24px}
  .wall{grid-template-columns:repeat(3,1fr)}
  nav{display:none}
}
nav a[aria-current]{color:var(--blush-white)}
header.solid nav a[aria-current]{color:var(--onyx)}
nav a{padding:6px 0;border-bottom:2px solid transparent}
nav a[aria-current]{border-bottom-color:var(--chilli-red)}
.hero.page{min-height:clamp(420px,58vh,560px)}
.lnk{display:inline-flex;align-items:center;gap:10px;font-size:var(--text-sm);font-weight:var(--weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--chilli-red)}
.lnk:hover{color:var(--claret)}
/* contact page */
.ct{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:140px;padding-bottom:clamp(40px,6vh,64px)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:end}
.ct-sub{font-size:clamp(26px,3.2vw,46px);font-weight:var(--weight-light);line-height:1.08;letter-spacing:-.02em;color:var(--dusk-pink);max-width:18ch}
.headshot{border-radius:var(--radius-btn)}
.ct-photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:55% 30%;display:block}
.ct-cap{display:flex;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid var(--border-on-inverse);margin-top:14px}
.mega{display:inline-block;font-size:clamp(28px,5.6vw,80px);font-weight:var(--weight-semibold);letter-spacing:-.035em;line-height:1.05;color:var(--blush-white);border-bottom:4px solid var(--chilli-red);padding-bottom:6px;overflow-wrap:anywhere;transition:var(--transition-control)}
.mega:hover{color:var(--chilli-red)}
.ledger dd a{color:var(--blush-white)}
.ledger dd a:hover{color:var(--dusk-pink)}
@media (max-width:1080px){.ct-grid{grid-template-columns:1fr}.ct-photo{max-width:360px}}
@media (max-width:640px){.ledger{grid-template-columns:1fr}}
/* mobile nav — burger + dropdown, built by js/site.js */
nav .btn{display:none}
.burger{display:none;width:44px;height:44px;padding:0;background:transparent;border:1px solid rgba(239,230,229,.45);border-radius:var(--radius-btn);cursor:pointer;flex:0 0 auto;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--blush-white);transition:transform 200ms ease,opacity 200ms ease,top 200ms ease}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:26px}
header.solid .burger{border-color:var(--onyx-15)}
header.solid .burger span{background:var(--onyx)}
header.open .burger{border-color:rgba(239,230,229,.45)}
header.open .burger span{background:var(--blush-white)}
header.open .burger span:nth-child(1){top:20px;transform:rotate(45deg)}
header.open .burger span:nth-child(2){opacity:0}
header.open .burger span:nth-child(3){top:20px;transform:rotate(-45deg)}
@media (max-width:1080px){
  .burger{display:block;margin-left:auto}
  header .wrap{gap:12px}
  header.open{background:var(--onyx);border-bottom-color:rgba(239,230,229,.15)}
  header.open .logo .l1{display:block}
  header.open .logo .l2{display:none}
  header.open nav{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--onyx);padding:8px clamp(20px,4vw,56px) 28px;max-height:calc(100vh - 88px);overflow-y:auto}
  header.open nav a,header.open.solid nav a{padding:16px 0;font-size:var(--text-base,16px);color:var(--blush-white);border-bottom:1px solid rgba(239,230,229,.15)}
  header.open nav a[aria-current]{border-bottom-color:var(--chilli-red)}
  header.open nav .btn{display:inline-flex;margin-top:24px;border-bottom:1px solid var(--chilli-red);justify-content:center}
}
@media (max-width:640px){
  header>.wrap>.btn{display:none}
  header .logo img{width:150px}
}

/* motion — element-level reveals, driven by js/motion.js (only ever applied to elements that script tags) */
:root{--ease-lux:cubic-bezier(.16,1,.3,1)}
.motion .rv{opacity:1;transform:none;transition:none}
.m{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-lux),transform .8s var(--ease-lux)}
.m.in{opacity:1;transform:none}
.m-line{transform:scaleX(0);transform-origin:left center;transition:transform 1s var(--ease-lux)}
.m-line.in{transform:none}
.m-img{clip-path:inset(100% 0 0 0 round var(--radius-btn));transform:scale(1.06);transition:clip-path 1.2s var(--ease-lux),transform 1.2s var(--ease-lux)}
.m-img.in{clip-path:inset(0 0 0 0 round var(--radius-btn));transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wi{display:inline-block}
.disp .w,.disp .wi{color:inherit}
.m-words .wi{transform:translateY(105%);transition:transform 1s var(--ease-lux)}
.m-words.in .wi{transform:none}

/* hover — gentle scale on pointer devices only */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn{transition:var(--transition-control),transform .45s var(--ease-lux)}
  .btn:hover{transform:scale(1.03)}
  .btn:active{transform:scale(1.03) translateY(var(--press-offset))}
  .wall img{transition:transform .5s var(--ease-lux)}
  .wall img:hover{transform:scale(1.07)}
  .partner,.card.accent{transition:transform .55s var(--ease-lux),box-shadow .55s var(--ease-lux)}
  .partner:hover,.card.accent:hover{transform:scale(1.015);box-shadow:0 18px 40px -24px rgba(60,60,59,.35)}
  .partner .plate img{transition:transform .6s var(--ease-lux)}
  .partner:hover .plate img{transform:scale(1.05)}
  .headshot{transition:transform .7s var(--ease-lux)}
  .headshot:hover{transform:scale(1.025)}
  .mega{transition:var(--transition-control),transform .5s var(--ease-lux);transform-origin:left bottom}
  .mega:hover{transform:scale(1.02)}
}

/* loops — slow ambient details; .motion is only set by js/motion.js (never under reduced motion) */
@keyframes hair-glint{0%{background-position:-40% 0}45%,100%{background-position:140% 0}}
@keyframes marker-breathe{0%,100%{background-color:var(--dusk-pink)}50%{background-color:var(--chilli-red)}}
.motion hr.hair{background-image:linear-gradient(90deg,transparent,rgba(227,66,43,.85),transparent);background-size:22% 100%;background-repeat:no-repeat;background-position:-40% 0;animation:hair-glint 7.5s var(--ease-in-out) var(--ld,0s) infinite}
.motion .eyebrow::before{animation:marker-breathe 4.8s ease-in-out var(--ld,0s) infinite}