/* BRANDBEAT GROUP DESIGN SYSTEM v2 — Swiss editorial direction.
   Reference: large grotesque display, generous whitespace, hairline rules,
   dot-pair glyph motif, marquee text bands, giant footer outro.
   Accent color = one variable per site theme.css. */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#121212; --paper:#F1F0ED; --white:#FFFFFF; --accent:#C8102E;
  --bg:var(--paper); --fg:var(--ink); --card:var(--white);
  --line:#DDDBD6; --muted:#6E6C68;
  --max:1240px; --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:400 16px/1.7 'Inter',sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* type — big, tight, Swiss */
h1,h2,h3{font-family:'Inter Tight',sans-serif;letter-spacing:-.035em;line-height:1.0;text-wrap:balance;font-weight:600}
h1{font-size:clamp(2.8rem,8vw,6rem)}
h2{font-size:clamp(2rem,5vw,3.6rem)}
h3{font-size:clamp(1.1rem,2vw,1.35rem);letter-spacing:-.02em}
.eyebrow{font:500 .7rem/1 'IBM Plex Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.6rem;margin-bottom:1.4rem}
.eyebrow::before{content:"";width:26px;height:13px;flex:none;background:
  radial-gradient(circle 6.5px at 6.5px 50%,var(--fg) 97%,transparent),
  radial-gradient(circle 6.5px at 19.5px 50%,var(--accent) 97%,transparent)}
.lede{font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.6;max-width:44ch;color:#3B3A38}
.accent{color:var(--accent)}

/* the dot-pair glyph, standalone */
.glyph{display:inline-block;width:34px;height:17px;vertical-align:middle;background:
  radial-gradient(circle 8.5px at 8.5px 50%,currentColor 97%,transparent),
  radial-gradient(circle 8.5px at 25.5px 50%,currentColor 60%,transparent)}

/* header — quiet */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1.1rem var(--pad);max-width:var(--max);margin:0 auto}
.logo{font:700 .95rem 'Inter Tight';letter-spacing:.02em;display:flex;align-items:center;gap:.55rem}
.logo::before{content:"";width:30px;height:30px;border-radius:50%;background-color:var(--fg);flex:none;
  background-image:radial-gradient(circle 5px at 11px 50%,var(--bg) 97%,transparent),radial-gradient(circle 5px at 20px 50%,var(--accent) 97%,transparent)}
.logo small{display:block;font:500 .56rem/1.3 'IBM Plex Mono';letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.nav ul{display:flex;gap:1.8rem;list-style:none;font:500 .8rem 'Inter'}
.nav a:hover{color:var(--accent)}
.nav .cta{background:var(--accent);color:var(--ink);padding:.55rem 1.1rem;border-radius:3px;font:600 .8rem 'Inter'}
.nav .cta:hover{filter:brightness(.9)}
@media(max-width:820px){.nav ul{display:none}}

/* hero — air above and below */
.hero{padding:clamp(4.5rem,12vw,9rem) 0 clamp(3.5rem,8vw,6rem)}
.hero .lede{margin-top:1.8rem}
.btns{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.4rem}
.btn{font:600 .82rem 'Inter';padding:.85rem 1.4rem;border-radius:3px;border:1px solid var(--fg);transition:.18s}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn:hover{transform:translateY(-2px)}
.btn.primary:hover{filter:brightness(.9)}

/* pulse retired in v2; harmless if present */
.pulse{display:none}
.divider{border:none;height:1px;background:var(--line)}

/* sections — bigger breathing room */
section{padding:clamp(4rem,10vw,8rem) 0}
section.dark{background:#101010;color:#F4F3F0}
section.dark .lede{color:#C9C7C2}
section.dark .eyebrow{color:#8F8D88}
section.dark .eyebrow::before{background:radial-gradient(circle 6.5px at 6.5px 50%,#F4F3F0 97%,transparent),radial-gradient(circle 6.5px at 19.5px 50%,var(--accent) 97%,transparent)}
section.dark .card{background:#1A1A1A}
section.light{background:var(--paper);color:var(--ink)}
.kicker p{margin-top:1.2rem;max-width:56ch}

/* grids & cards — hairline minimal */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:3rem}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--card);padding:2.2rem;position:relative;transition:.2s;border:none}
.card:hover{background:color-mix(in srgb,var(--accent) 4%,var(--card))}
.card .tag{font:500 .65rem 'IBM Plex Mono';letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.card h3{margin:.9rem 0 .7rem}
.card p{font-size:.92rem;color:#4A4948;line-height:1.65}
.card .go{display:inline-block;margin-top:1.2rem;font:600 .78rem 'IBM Plex Mono';color:var(--accent)}
section.dark .card p{color:#B9B7B2}
section.dark .grid{background:#2A2A2A;border-color:#2A2A2A}

/* stats — huge numeral, tiny label */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:3rem}
.stat{background:var(--card);padding:1.6rem;border:none;border-top:none}
section.dark .stats{background:#2A2A2A;border-color:#2A2A2A}
section.dark .stat{background:#161616}
.stat b{font:700 clamp(2.6rem,5vw,4rem)/1 'Inter Tight';letter-spacing:-.04em;display:block}
.stat span{font:500 .66rem 'IBM Plex Mono';letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-top:.5rem}

/* image placeholders — quiet frames */
.ph{position:relative;background:#E6E4E0;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;min-height:240px}
section.dark .ph{background:#1C1C1C;border-color:#2A2A2A}
.ph.tall{min-height:420px}.ph.wide{min-height:320px}
.ph span{font:500 .66rem 'IBM Plex Mono';letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;max-width:80%}

/* quote */
.quote{font:600 clamp(1.5rem,3vw,2.3rem)/1.3 'Inter Tight';letter-spacing:-.03em;max-width:28ch}
.quote footer{font:500 .75rem 'IBM Plex Mono';margin-top:1.4rem;color:var(--muted)}

/* three doors */
.door{background:var(--card);padding:2.4rem;transition:.2s;border:none}
.door:hover{background:var(--ink);color:var(--paper)}
.door:hover p{color:#C9C7C2}
.door .go{color:var(--accent);font:600 .8rem 'IBM Plex Mono'}
.door p{color:#4A4948;font-size:.95rem}

/* marquee band — the reference signature */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.6rem 0;background:var(--bg)}
.marquee .track{display:flex;gap:3rem;width:max-content;animation:slide 22s linear infinite;font:600 clamp(2rem,5vw,3.6rem)/1 'Inter Tight';letter-spacing:-.03em;white-space:nowrap;align-items:center}
.marquee .track .glyph{width:44px;height:22px;color:var(--accent);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* giant outro */
.outro{padding:clamp(3rem,8vw,6rem) var(--pad) 2rem;max-width:var(--max);margin:0 auto}
.outro b{font:700 clamp(3.4rem,11vw,8.5rem)/0.95 'Inter Tight';letter-spacing:-.05em;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.outro .glyph{width:clamp(44px,7vw,84px);height:clamp(22px,3.5vw,42px);color:var(--accent)}

/* footer — light, columned */
footer.site{background:var(--bg);color:var(--fg);padding:2rem 0;border-top:1px solid var(--line)}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
@media(max-width:700px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{font:700 .85rem 'Inter Tight';margin-bottom:.8rem}
footer.site ul{list-style:none;font:400 .84rem/2.1 'Inter';color:#4A4948}
footer.site a:hover{color:var(--accent)}
footer.site .fine{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--line);font:400 .7rem 'IBM Plex Mono';color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}

/* utility */
.mt2{margin-top:2rem}.mt3{margin-top:3rem}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr}}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ============================================================
   v3 — MOTION LAYER + MEDIA + FAMILY SWITCHER
   Pairs with shared/motion.js. Everything below degrades to
   static, visible content without JS or with reduced motion.
   ============================================================ */

/* real imagery — mono by default, .color opts out */
.media{position:relative;overflow:hidden;background:#E6E4E0}
.media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .5s,transform .8s cubic-bezier(.2,.7,.2,1)}
.media.color img{filter:none}
.media:hover img{transform:scale(1.03)}
.media.tall{min-height:420px;height:100%}
.media.wide{aspect-ratio:16/9}
.media .cap{position:absolute;left:0;bottom:0;font:500 .62rem 'IBM Plex Mono';letter-spacing:.14em;text-transform:uppercase;background:var(--bg);color:var(--muted);padding:.5rem .8rem}
section.dark .media{background:#1C1C1C}

/* reveal states */
.bb-rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--bb-d,0ms)}
.bb-rv.bb-in{opacity:1;transform:none}
.media.bb-rv,.ph.bb-rv{transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.6,.05,.2,1);transition-delay:var(--bb-d,0ms)}
.media.bb-rv.bb-in,.ph.bb-rv.bb-in{opacity:1;clip-path:inset(0 0 0% 0)}
html:not(.bb-motion) .bb-rv{opacity:1;transform:none;clip-path:none}

/* split headline lines — padding keeps descenders (g, y, p) inside the mask */
.bb-split .bb-line{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}
.bb-split .bb-line-in{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.7,.15,1)}
.bb-split .bb-line:nth-child(2) .bb-line-in{transition-delay:.08s}
.bb-split .bb-line:nth-child(3) .bb-line-in{transition-delay:.16s}
.bb-split .bb-line:nth-child(4) .bb-line-in{transition-delay:.24s}
.bb-split .bb-line:nth-child(n+5) .bb-line-in{transition-delay:.3s}
.bb-split.bb-in .bb-line-in{transform:none}
@media(prefers-reduced-motion:reduce){.bb-split .bb-line-in{transform:none}}

/* page-load curtain */
.bb-curtain{position:fixed;inset:0;z-index:200;background:var(--accent);transform:translateY(0);pointer-events:none}
.bb-curtain.lift{transform:translateY(-101%);transition:transform .9s cubic-bezier(.7,0,.2,1)}

/* smart header */
header{transition:transform .35s ease}
header.bb-hide{transform:translateY(-100%)}

/* mobile menu */
.bb-burger{display:none;background:none;border:0;width:34px;height:30px;position:relative;cursor:pointer;z-index:120}
.bb-burger span{position:absolute;left:4px;right:4px;height:2px;background:currentColor;transition:.3s;top:10px}
.bb-burger span+span{top:18px}
.bb-burger.open span{top:14px;transform:rotate(45deg)}
.bb-burger.open span+span{transform:rotate(-45deg)}
@media(max-width:820px){.bb-burger{display:block}}
.bb-mnav{position:fixed;inset:0;z-index:110;background:var(--bg);display:flex;align-items:center;padding:var(--pad);opacity:0;pointer-events:none;transition:opacity .35s}
.bb-mnav.open{opacity:1;pointer-events:auto}
.bb-mnav nav{display:flex;flex-direction:column;gap:.4rem;width:100%}
.bb-mnav a{font:600 clamp(1.8rem,8vw,2.6rem)/1.3 'Inter Tight';letter-spacing:-.03em}
.bb-mnav a.m-cta{margin-top:1.4rem;font:600 1rem 'Inter';color:var(--accent)}

/* family switcher — floating fab + overlay */
.bb-fam-fab{position:fixed;left:18px;bottom:18px;z-index:130;display:flex;align-items:center;gap:7px;background:var(--fg);color:var(--bg);border:0;border-radius:99px;padding:.65rem 1rem;cursor:pointer;font:600 .68rem 'IBM Plex Mono';letter-spacing:.14em;text-transform:uppercase;box-shadow:0 4px 24px rgba(0,0,0,.25);transition:transform .2s}
.bb-fam-fab:hover{transform:translateY(-2px)}
.bb-fam-fab i{width:9px;height:9px;border-radius:50%;background:var(--bg)}
.bb-fam-fab i+i{background:var(--accent);margin-left:-3px}
.bb-fam-fab em{font-style:normal}
.bb-fam-ov{position:fixed;inset:0;z-index:125;background:rgba(10,10,10,.94);backdrop-filter:blur(14px);display:flex;flex-direction:column;justify-content:center;padding:var(--pad);opacity:0;pointer-events:none;transition:opacity .4s}
.bb-fam-ov.open{opacity:1;pointer-events:auto}
.bb-fam-head{font:500 .7rem 'IBM Plex Mono';letter-spacing:.22em;text-transform:uppercase;color:#8F8D88;margin-bottom:2rem}
.bb-fam-ov nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:#2A2A2A;border:1px solid #2A2A2A;max-width:1100px}
.bb-fam-ov a{background:#101010;color:#F4F3F0;padding:1.4rem 1.6rem;display:block;opacity:0;transform:translateY(14px);transition:.45s;transition-delay:var(--bb-d,0ms)}
.bb-fam-ov.open a{opacity:1;transform:none}
.bb-fam-ov a:hover{background:#181818;color:var(--accent)}
.bb-fam-ov a.here{outline:1px solid var(--accent);outline-offset:-1px}
.bb-fam-ov a b{font:600 1.05rem 'Inter Tight';letter-spacing:-.02em;display:block}
.bb-fam-ov a span{font:500 .64rem 'IBM Plex Mono';letter-spacing:.16em;text-transform:uppercase;color:#8F8D88;margin-top:.3rem;display:block}
.bb-fam-foot{font:500 .64rem 'IBM Plex Mono';letter-spacing:.16em;text-transform:uppercase;color:#5c5a56;margin-top:2rem}
@media(max-width:600px){.bb-fam-ov nav{grid-template-columns:1fr;max-height:70vh;overflow:auto}}

/* logo image variant (replaces dot-logo when an <img> is used) */
.logo.img::before{display:none}
.logo.img img{height:56px;width:auto}
.logo.img small{margin-left:.2rem}
@media(max-width:820px){.logo.img img{height:46px}}

@media(prefers-reduced-motion:reduce){
  .bb-rv,.media.bb-rv,.ph.bb-rv{opacity:1;transform:none;clip-path:none;transition:none}
  .bb-curtain{display:none}
  header{transition:none}
}

/* v3.1 — house rule: no italics anywhere. <em> reads as accent color, not slant. */
em,i,blockquote,cite,q{font-style:normal}