/* Brand page layout. Type sizes, text colours, header and footer come from
   refinement.css (the home layer), so both pages share one scale: pick a
   --fs-* / --fg-* token here, never a new number.
   Class names are bp-* so the old .brand-* rules still sitting in style.css
   cannot leak in. */
.brand-page{background:var(--paper)}
.brand-page h3{font-weight:400;letter-spacing:0}

/* Hero: one statement, one mark. */
.bp-hero{padding-block:144px 104px;background:radial-gradient(120% 70% at 50% -8%,#1B1F25 0%,#0E1014 38%,#0A0B0D 70%)}
.bp-hero-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.bp-hero h1{font-size:var(--fs-display);font-weight:300;letter-spacing:.04em;line-height:1.05;color:var(--fg)}
.bp-statement{font-size:var(--fs-h3);font-weight:300;line-height:1.5;margin-top:24px;color:var(--fg-2)}
.bp-links{display:flex;align-items:center;gap:30px;margin-top:44px}
.bp-links{gap:16px}
.bp-meta{font-size:var(--fs-small);color:var(--fg-3);margin-top:22px}
.bp-hero-mark{width:min(100%,560px);height:auto;justify-self:center}

/* Sections */
.bp-section{padding-block:120px}
.bp-section h2{font-size:var(--fs-h2);font-weight:300;letter-spacing:.02em;line-height:1.3;color:var(--fg);margin-bottom:56px}
.brand-page .light-section+.light-section{padding-top:0}
.bp-note{font-size:var(--fs-small);line-height:1.8;color:var(--fg-3);margin-top:28px}

/* Flat grounds the marks sit on. No borders, no radius: colour blocks only. */
.bp-ground{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#FCFCFA}
.bp-ground img{width:56%;height:auto}
.bp-ground.ink{background:#0A0B0D}
.bp-ground.ink2{background:#15181D}
.bp-ground.teal{background:#607A80}
.bp-ground.wide{aspect-ratio:16/9}
.bp-ground.wide img{width:64%}

.brand-page figure{margin:0;min-width:0}
.brand-page figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:16px;font-size:var(--fs-small);color:var(--fg)}
.brand-page figcaption em{font-style:normal;color:var(--fg-3);margin-left:14px}
.brand-page figcaption a,.bp-files a{color:var(--fg);border-bottom:1px solid currentColor;padding-bottom:2px}
.brand-page figcaption a:hover,.bp-files a:hover{opacity:.65}
.bp-pair{display:flex;gap:22px}

/* Mark: 7:3 lead, then four variants in an even row. */
.bp-lead{display:grid;grid-template-columns:7fr 3fr;gap:48px;align-items:end}
.bp-lead .bp-ground{aspect-ratio:4/3}
.bp-lead .bp-ground img{width:42%}
.bp-lead-copy h3{font-size:var(--fs-h3);line-height:1.4;color:var(--fg)}
.bp-lead-copy p{font-size:var(--fs-body);line-height:1.9;color:var(--fg-2);margin-top:16px}
.bp-files{display:flex;gap:24px;font-size:var(--fs-small)}
.bp-variants{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}

/* Lockups */
.bp-lockups{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.bp-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:56px 0 0}
.bp-rules dt{font-size:var(--fs-small);color:var(--fg-3)}
.bp-rules dd{margin:10px 0 0;font-size:var(--fs-body);line-height:1.8;color:var(--fg)}

/* Colour: one large block, six small ones, same corner treatment. */
.bp-colors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bp-colors li{display:grid;grid-template-columns:1fr auto;align-items:baseline;row-gap:14px}
.bp-colors li.main{grid-row:span 2}
.bp-colors .chip{grid-column:1/-1;display:block;aspect-ratio:3/2}
.bp-colors li.main .chip{aspect-ratio:auto;height:100%;min-height:200px}
.bp-colors .chip.line{box-shadow:inset 0 0 0 1px var(--line-dark)}
.bp-colors strong{font-size:var(--fs-small);color:var(--fg)}
.bp-colors button{font-size:var(--fs-small);color:var(--fg-2);font-variant-numeric:tabular-nums;padding:0}
.bp-colors button:hover{color:var(--fg)}

/* Applications: two columns; a full-width shot opens each group. */
.bp-group{font-size:var(--fs-h3);line-height:1.4;color:var(--fg);margin:88px 0 24px}
.bp-group:first-of-type{margin-top:0}
.bp-shots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 16px}
.bp-shots .full{grid-column:1/-1}
.bp-shots img{display:block;width:100%;height:auto;aspect-ratio:3/2;background:#E3E1DB}

/* 3D */
.bp-renders{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.bp-renders img{display:block;width:100%;height:auto;aspect-ratio:8/7;background:#0A0B0D;border-radius:20px}

/* Downloads */
.bp-downloads{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.bp-downloads a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;align-items:baseline;gap:24px;padding-block:30px;border-bottom:1px solid var(--line-dark)}
.bp-downloads strong{font-size:var(--fs-h3);color:var(--fg)}
.bp-downloads span{font-size:var(--fs-small);color:var(--fg-2)}
.bp-downloads em{font-style:normal;font-size:var(--fs-small);color:var(--fg);border-bottom:1px solid currentColor;padding-bottom:2px}
.bp-downloads a:hover strong{opacity:.65}

@media(max-width:1100px){
  .bp-variants{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bp-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .bp-hero{padding-block:112px 72px}
  .bp-hero-grid{grid-template-columns:1fr;gap:40px}
  .bp-hero-mark{width:min(78%,420px)}
  .bp-section{padding-block:80px}
  .bp-section h2{margin-bottom:36px}
  .bp-lead{grid-template-columns:1fr;gap:24px}
  .bp-lockups{grid-template-columns:1fr}
  .bp-colors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bp-colors li.main{grid-column:1/-1;grid-row:auto}
  .bp-colors li.main .chip{height:auto;min-height:0;aspect-ratio:3/1}
  .bp-group{margin-top:64px}
}
@media(max-width:520px){
  .bp-hero{padding-block:104px 56px}
  .bp-links{gap:26px;margin-top:30px}
  .bp-section{padding-block:64px}
  .bp-rules{grid-template-columns:1fr;gap:20px;margin-top:40px}
  .bp-shots{grid-template-columns:1fr;gap:32px}
  .bp-renders{grid-template-columns:1fr}
  .bp-downloads a{grid-template-columns:1fr auto;row-gap:8px}
  .bp-downloads span{grid-column:1;grid-row:2}
  .bp-downloads em{grid-column:2;grid-row:1/3;align-self:center}
  .brand-page figcaption em{display:block;margin:6px 0 0}
}

/* ---------- Brand story page (brand.html). The asset library moved to brand-assets.html
   (not linked from navigation) and keeps the bp-* rules above. ---------- */
.bs-section{padding-block:128px}
.bs-section h2{font-size:var(--fs-h2);font-weight:300;letter-spacing:.02em;line-height:1.3;color:var(--fg)}
.bs-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:96px;align-items:center}
.bs-en{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:.32em;color:var(--fg-3);margin-top:16px}
.bs-copy p{font-size:var(--fs-body);line-height:1.9;color:var(--fg-2)}
.bs-copy p+p,.bs-copy p+.btn{margin-top:24px}
.bs-copy .bs-lead{font-size:var(--fs-h3);font-weight:300;line-height:1.6;color:var(--fg)}
.bs-copy a:not(.btn){color:var(--fg);border-bottom:1px solid var(--line-strong)}
.bs-mark img{width:min(100%,480px);height:auto;margin-inline:auto;filter:drop-shadow(0 0 60px rgba(150,180,190,.18))}
.bs-points{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--line)}
.bs-points li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.bs-points strong{display:block;font-size:var(--fs-h3);font-weight:300;color:var(--fg);margin-bottom:8px}
.bs-points .mono,.bs-principles .mono,.bs-arch .mono {font-size:var(--fs-micro);letter-spacing:.16em;color:var(--fg-3)}
.bs-points p{font-size:var(--fs-body);line-height:1.8;color:var(--fg-2)}
.bs-quote{margin:0;font-size:var(--fs-display);font-weight:200;line-height:1.15;letter-spacing:.02em;color:var(--fg)}
.bs-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:96px;padding-top:32px;border-top:1px solid var(--line)}
.bs-principles h3{font-size:var(--fs-h3);font-weight:300;margin-top:16px;color:var(--fg)}
.bs-principles p{font-size:var(--fs-body);line-height:1.9;color:var(--fg-2);margin-top:12px}
.bs-arch{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:64px;align-items:center}
.arch-root{display:flex;flex-direction:column;align-items:center;gap:16px;position:relative}
.arch-root img{width:120px;height:auto}
.arch-root strong{font-size:var(--fs-h3);font-weight:300;color:var(--fg)}
.arch-branches{position:relative;display:grid;gap:16px;padding-left:48px;border-left:1px solid var(--line-strong)}
.arch-branches article{position:relative;padding:28px 32px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(236,237,238,.04),rgba(236,237,238,.01));overflow:hidden}
.arch-branches article::after{content:"";position:absolute;left:-49px;top:50%;width:48px;border-top:1px solid var(--line-strong)}
.arch-branches article::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(236,237,238,.08),transparent 60%);opacity:0;transition:opacity .4s}
.arch-branches article:hover::before{opacity:1}
.arch-branches h3{font-size:var(--fs-h2);font-weight:300;margin-top:8px;color:var(--fg)}
.arch-branches p{font-size:var(--fs-body);color:var(--fg-2);margin-top:8px}
.bs-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bs-shots .wide{grid-column:1/-1}
.bs-shots img{display:block;width:100%;height:auto;aspect-ratio:3/2;border-radius:20px}
.bs-shots figcaption{font-size:var(--fs-small);color:var(--fg-2);padding-top:16px}
.bs-end h2{font-size:clamp(44px,6vw,96px);font-weight:200;white-space:nowrap}
@media(max-width:820px){
  .bs-section{padding-block:80px}
  .bs-split,.bs-arch{grid-template-columns:1fr;gap:40px}
  .bs-principles{grid-template-columns:1fr;gap:32px;margin-top:56px}
}
@media(max-width:520px){
  .bs-section{padding-block:64px}
  .arch-branches{padding-left:24px}
  .arch-branches article::after{left:-25px;width:24px}
  .arch-branches article{padding:24px}
  .bs-shots{grid-template-columns:1fr}
}
/* The claim is five characters and must stay on one line beside the mark. */
.brand-story .hero h1{white-space:nowrap;font-size:clamp(48px,6.2vw,96px)}

/* Ending: claim on the left, one quiet call to action on the right. */
.bs-end .bs-split{align-items:end}
.bs-motto{font-size:var(--fs-small);letter-spacing:.24em;color:var(--fg-3);margin-top:24px}
.bs-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-left:48px;border-left:1px solid var(--line)}
.bs-cta .mono{font-size:var(--fs-micro);letter-spacing:.2em;color:var(--fg-3)}
.bs-cta strong{font-size:var(--fs-h3);font-weight:300;color:var(--fg)}
.bs-mail{font-size:var(--fs-body);color:var(--fg-2);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease),color .2s}
.bs-mail:hover{color:var(--fg);background-size:100% 1px}
.bs-more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:var(--fs-small);letter-spacing:.04em;color:var(--fg);transition:color .2s}
.bs-more .arrow{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .2s var(--ease)}
.bs-more:hover .arrow{transform:translateX(4px)}
.bs-shots{grid-template-columns:1fr}
@media(max-width:820px){.bs-cta{padding-left:0;border-left:0;padding-top:32px;border-top:1px solid var(--line)}}