/* 1516 Partners, public site styles (EG Insight Design, 2026-10)
   Palette (Round 7): the brand red of the official logo for the big backgrounds (a deeper shade, #c62828, so white
   text passes 4.5:1), charcoal text on limestone paper, silver and white accents on red, deep red accents on light. Type: Archivo 800 slightly expanded (display, wordmark) + Manrope (text). Square corners, 1px rules. */

:root {
  --ink: #c62828;          /* brand red, deepened: the big backgrounds (white text 5.6:1) */
  --ink-2: #b71c1c;
  --ink-3: #a31919;
  --red: #ed3833;          /* the logo red (sampled #ed3833): rules and large accents only */
  --charcoal: #1f2022;     /* text and lines on light surfaces */
  --paper: #f5f1e8;
  --paper-2: #ece5d6;
  --white: #fffdf8;
  --line: #dcd2bf;
  --line-ink: rgba(255, 255, 255, .24);
  --text: #1f2022;
  --muted: #5a5d61;
  --silver: #d9d9d9;       /* the logo's numeral face: accents on the dark ink (11.5:1 on ink) */
  --silver-soft: #ececec;  /* hover on silver */
  --steel: #b71c1c;        /* accents and small text on light surfaces: deep red, 5.7:1 on paper */
  --logo-h: 60px;          /* compact header logo height */
  --logo-land: 2.6;        /* landing scale before the first scroll (156 px tall, inside the 2x limit of the 256 px source) */
  --logo-ratio: 2.131;     /* width / height of the official lockup */
  --on-ink: #ffffff;
  --on-ink-muted: #fde7e5; /* 5.1:1 on the red */
  --error: #9b2c1f;
  --ok: #2f6b45;

  --display: "Archivo", "Arial Black", system-ui, sans-serif;  /* heavy, slightly expanded (font-stretch 112%) */
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --hh: 80px;              /* header height */
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  --radius: 0;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: none;
}
@media (max-width: 1024px) { :root { --logo-land: 2.3; } }
@media (max-width: 760px) { :root { --hh: 68px; --logo-h: 48px; --logo-land: 2; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + 16px); }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; font-stretch: 112%; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; } /* balance: no lone last word */
h1 { font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.18; letter-spacing: -.01em; }
:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; border-radius: 0; }
/* silver ring only on dark surfaces (ink ring on paper, white and the silver band) */
.on-ink :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: #ffffff; }
::selection { background: var(--silver-soft); color: var(--charcoal); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--full { max-width: none; } /* header and footer run the full window width (edge padding only) */
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--silver); color: var(--charcoal); outline-color: var(--charcoal); padding: 12px 16px; border-radius: 0; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

.eyebrow { display: block; font: 700 .78rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); margin: 0 0 12px; }
.on-ink .eyebrow, .eyebrow--light { color: #ffffff; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--muted); max-width: 40em; }
.on-ink .lede { color: var(--on-ink-muted); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 0; border: 1px solid transparent; font: 700 1rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }

.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--silver { background: var(--silver); color: var(--charcoal); }
.btn--silver:hover { background: var(--silver-soft); }
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: var(--ink-3); }
.btn--line { border-color: rgba(245, 241, 232, .45); color: var(--on-ink); }
.btn--line:hover { border-color: var(--on-ink); background: rgba(245, 241, 232, .06); }
.btn--line-dark { border-color: var(--charcoal); color: var(--charcoal); }
.btn--line-dark:hover { background: var(--ink); color: var(--on-ink); }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--charcoal); text-decoration: none; border-bottom: 1.5px solid var(--steel); padding-bottom: 2px; line-height: 1.3; }
.on-ink .text-link { border-bottom-color: var(--silver); }
.text-link:hover { color: var(--steel); }
.on-ink .text-link { color: var(--on-ink); }

/* ---------- header (direct child of body, so sticky works) ---------- */
.site-header { position: sticky; top: 0; z-index: 60; height: var(--hh); color: var(--on-ink); transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.site-header.is-scrolled, .nav-open .site-header { background: rgba(198, 40, 40, .97); box-shadow: 0 1px 0 var(--line-ink); }
@supports (backdrop-filter: blur(8px)) { .site-header.is-scrolled { background: rgba(198, 40, 40, .92); backdrop-filter: blur(12px) saturate(1.2); } }
.site-header__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; min-height: 44px; }
/* Eddie's logo (Round 4): transparent PNG/WebP lockup, only ever placed on the dark ink areas */
.brand__logo, .brand__logo img { display: block; }
.brand__logo img { height: var(--logo-h); width: auto; }
.brand__logo--lg img { height: 100px; }
/* Landing logo (Round 5, the SP Accounting pattern): the header slot keeps the compact size, the logo is
   scaled up from its top left corner until the first scroll (html.scrolled from site.js), then settles.
   Only transform animates, so nothing reflows. Without JS (no .js class) it is always compact. */
.site-header .brand { position: relative; width: calc(var(--logo-h) * var(--logo-ratio)); height: var(--logo-h); flex: none; }
.site-header .brand__logo { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform .6s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
html.js:not(.scrolled) body:not(.nav-open) .site-header .brand__logo { transform: scale(var(--logo-land)); }

.nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.nav__list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-weight: 600; font-size: .98rem; text-decoration: none; color: inherit; border-radius: 0; position: relative; }
.nav__list a:not(.btn)::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 1.5px; background: var(--silver); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav__list a:not(.btn):hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav__list .btn { min-height: 44px; padding: 0 22px; margin-left: 10px; }
.nav__list .btn--silver { color: var(--charcoal); } /* ink text on the silver Contact button */
.nav-toggle { display: none; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; padding: 0 12px; margin-right: -12px; background: none; border: 0; color: inherit; font: 700 .9rem var(--sans); cursor: pointer; border-radius: 0; }
.nav-toggle__bars { position: relative; width: 22px; height: 14px; }
.nav-toggle__bars span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 0; transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-scrim { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav__list { position: fixed; left: 0; right: 0; top: var(--hh); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px; background: var(--ink); border-top: 1px solid var(--line-ink); border-bottom: 1px solid var(--line-ink); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .3s var(--ease), opacity .25s var(--ease), visibility 0s .3s; z-index: 61; }
  .nav-open .nav__list { transform: none; opacity: 1; visibility: visible; transition: transform .3s var(--ease), opacity .25s var(--ease); }
  .nav__list a { display: flex; min-height: 56px; padding: 0 4px; font-size: 1.15rem; border-radius: 0; border-bottom: 1px solid var(--line-ink); }
  .nav__list a:not(.btn)::after { left: 4px; right: auto; width: 24px; bottom: 12px; }
  .nav__list li:last-child a { border-bottom: 0; }
  .nav__list .btn { margin: 18px 0 0; min-height: 52px; justify-content: center; border-radius: 0; }
  .nav-scrim { display: block; position: fixed; inset: var(--hh) 0 0 0; background: rgba(20, 8, 8, .5); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; z-index: 59; }
  .nav-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity .25s; }
  .foot .brand__logo--lg img { height: 84px; }
  body.nav-open { overflow: hidden; }
}

/* ---------- heroes (pulled up under the sticky header) ---------- */
.hero { position: relative; margin-top: calc(var(--hh) * -1); padding: calc(var(--hh) + clamp(36px, 6vw, 80px)) 0 clamp(40px, 5vw, 64px); --landing-room: calc((var(--hh) - var(--logo-h)) / 2 + var(--logo-h) * var(--logo-land) + clamp(20px, 3vw, 36px)); background: var(--ink); color: var(--on-ink); overflow: hidden; isolation: isolate; }
.js .hero { padding-top: var(--landing-room); } /* room for the landing logo, so it never covers the eyebrow or headline */
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 85% 10%, rgba(217, 217, 217, .16), transparent 55%), linear-gradient(180deg, rgba(198, 40, 40, 0) 50%, rgba(120, 16, 16, .45)); }
.hero__lines { overflow: visible; position: absolute; left: -5%; right: -5%; bottom: -2%; width: 110%; height: 78%; color: var(--silver); opacity: .55; }
.hero__lines path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero__lines .l-drift { animation: drift 26s ease-in-out infinite alternate; }
.hero__lines .l-drift-2 { animation: drift 34s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
.hero__title { max-width: 17ch; margin-bottom: 18px; }
.hero__title em { font-style: normal; color: var(--silver); -webkit-text-stroke: .07em #555; paint-order: stroke fill; } /* silver face with the logo's #555 outline */
.hero .lede { max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero--home { min-height: min(76vh, 700px); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 0; }
.hero--home .hero__in { padding-bottom: clamp(32px, 4.5vw, 56px); }
.hero--page { padding-bottom: clamp(36px, 5vw, 60px); }
.hero--page .hero__title { max-width: 16ch; }
.hero--page .hero__lines { height: 60%; opacity: .35; }

/* load-in for hero text */
.js .rise { opacity: 0; transform: translateY(22px); animation: rise .9s var(--ease) forwards; }
.js .rise-2 { animation-delay: .12s; }
.js .rise-3 { animation-delay: .24s; }
.js .rise-4 { animation-delay: .36s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* the quiet strip at the foot of the home hero */
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-ink); }
.strip li { display: flex; flex-direction: column; gap: 5px; padding: 16px 0 18px; }
.strip li + li { border-left: 1px solid var(--line-ink); padding-left: clamp(16px, 3vw, 32px); }
.strip__k { font: 700 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink-muted); }
.strip__v { font: 800 clamp(1.15rem, 2.1vw, 1.55rem)/1.1 var(--display); font-stretch: 112%; color: #ffffff; }

/* ---------- sections ---------- */
.section { padding: clamp(48px, 6.5vw, 88px) 0; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--flush { padding-top: 0; }
.section--paper2 { background: var(--paper-2); }
.section--white { background: var(--white); }
.on-ink { background: var(--ink); color: var(--on-ink); }
/* section headers (Round 6): one clean column: eyebrow, heading, then the intro right under it */
.sec-head { max-width: none; margin-bottom: clamp(26px, 3.5vw, 40px); }
.sec-head h2 { margin-bottom: 12px; }
.sec-head .lede { max-width: 60ch; margin: 0; }
.people__more { margin: clamp(28px, 4vw, 44px) 0 0; }

/* ---------- company cards ---------- */
.co-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
@media (max-width: 980px) { .co-grid { grid-template-columns: 1fr; max-width: 440px; } }
/* company photos: one 3:2 frame everywhere, cropped with object-fit so nothing distorts */
.co-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.co-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.co-photo--row { border: 1px solid var(--line); }
.co-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 0; overflow: hidden; transition: border-color .3s var(--ease); }
.co-card:hover { border-color: var(--charcoal); }
.co-logo { position: relative; display: grid; place-items: center; height: 120px; padding: 18px 24px; background: var(--paper); border-bottom: 1px solid var(--line); }
.co-logo img { max-height: 76px; width: auto; }
.co-wm { font-family: var(--display); font-weight: 800; font-stretch: 112%; color: var(--charcoal); text-align: center; line-height: 1.05; letter-spacing: -.01em; }
.co-wm--ld { font-size: 1.7rem; }
.co-wm--ld span { display: block; font: 700 .64rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--steel); margin-top: 8px; }
.co-wm--wf { font-size: 1.2rem; }
.co-wm--wf span { display: block; font: 700 .64rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--steel); margin-top: 8px; }
.ph-tag { position: absolute; right: 10px; bottom: 10px; font: 700 .62rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--white); border: 1px dashed var(--line); padding: 5px 8px; border-radius: 0; }
.co-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 16px; }
.co-place { font: 700 .74rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin-bottom: 10px; }
.co-body h3 { margin-bottom: 10px; }
.co-body > p { color: var(--muted); }
.co-facts { display: flex; gap: 0; margin: auto 0 10px; padding-top: 4px; }
.co-facts div { flex: 1; padding: 12px 0; border-top: 1px solid var(--line); }
.co-facts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.co-facts dt { font: 700 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.co-facts dd { margin: 0; font: 800 1.45rem/1 var(--display); font-stretch: 112%; color: var(--charcoal); }
.co-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--charcoal); text-decoration: none; align-self: flex-start; line-height: 1.2; background: linear-gradient(var(--steel), var(--steel)) left calc(100% - 9px) / 100% 1.5px no-repeat; }
.co-link:hover { color: var(--steel); }
.co-link .arr { transition: transform .25s var(--ease); }
.co-link:hover .arr { transform: translate(3px, -3px); }

/* ---------- legacy timeline ---------- */
.tl { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 20px; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--line-ink); }
.tl::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 3px; background: linear-gradient(90deg, var(--silver), var(--silver-soft)); transform-origin: left; transform: scaleX(1); border-radius: 0; }
.js .tl::after { transform: scaleX(0); transition: transform 1.8s var(--ease) .2s; }
.js .tl.is-in::after { transform: scaleX(1); }
.tl li { position: relative; z-index: 1; padding-top: 40px; }
.tl li::before { content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 0; background: var(--ink); border: 3px solid var(--silver); box-sizing: border-box; }
.tl li.tl--now::before { background: var(--silver); }
.tl__year { display: block; font: 800 clamp(2rem, 3.2vw, 2.9rem)/1 var(--display); font-stretch: 112%; color: var(--on-ink); margin-bottom: 12px; letter-spacing: -.02em; }
.tl__what { font-size: .98rem; color: var(--on-ink-muted); margin: 0; }
.tl__what strong { color: var(--on-ink); font-weight: 700; }
.js .tl li { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .tl.is-in li { opacity: 1; transform: none; }
.js .tl.is-in li:nth-child(2) { transition-delay: .3s; }
.js .tl.is-in li:nth-child(3) { transition-delay: .6s; }
.js .tl.is-in li:nth-child(4) { transition-delay: .9s; }
.js .tl.is-in li:nth-child(5) { transition-delay: 1.2s; }
@media (max-width: 860px) {
  .tl { grid-template-columns: 1fr; gap: 0; padding-left: 36px; }
  .tl::before { left: 8px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .tl::after { left: 7px; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; transform-origin: top; background: linear-gradient(180deg, var(--silver), var(--silver-soft)); }
  .js .tl::after { transform: scaleY(0); }
  .js .tl.is-in::after { transform: scaleY(1); }
  .tl li { padding: 0 0 24px; }
  .tl li:last-child { padding-bottom: 0; }
  .tl li::before { left: -36px; top: 6px; }
}

/* ---------- values ---------- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.values li { list-style: none; padding: 22px 24px 2px 0; }
.values li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.values { padding: 0; margin: 0; }
.values__n { display: block; font: 800 .95rem/1 var(--display); font-stretch: 112%; color: var(--steel); margin-bottom: 12px; }
.values h3 { margin-bottom: 10px; }
.values p { color: var(--muted); font-size: 1rem; }
@media (max-width: 980px) {
  .values { grid-template-columns: 1fr 1fr; }
  .values li:nth-child(3) { padding-left: 0; border-left: 0; }
  .values li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .values { grid-template-columns: 1fr; }
  .values li, .values li + li { padding: 20px 0 2px; border-left: 0; }
  .values li + li { border-top: 1px solid var(--line); }
}

/* ---------- partners ---------- */
/* partners (Round 5): editorial section on ink; one black and white treatment unifies the two different
   photo backgrounds; full color on hover for mouse users only. Sources are 400 px, shown at 320 (desktop). */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 48px); }
@media (max-width: 760px) { .people { grid-template-columns: minmax(0, 1fr); gap: 44px; } }
/* tablet: three across gets too narrow for the names, so each partner becomes a row (portrait left, text right) */
@media (min-width: 761px) and (max-width: 1000px) { .people { grid-template-columns: minmax(0, 1fr); gap: 32px; } .person { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: center; } .person .portrait { width: 240px; margin-bottom: 12px; } }
.person { display: block; }
.portrait { position: relative; display: block; width: 320px; max-width: calc(100% - 12px); aspect-ratio: 1; margin: 0 12px 30px 0; isolation: isolate; background: var(--ink-2); }
.portrait::after { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--silver); z-index: -1; pointer-events: none; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(1.03); transition: filter .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .person:hover .portrait img { filter: none; } }
/* headshot placeholder (Kiley Beach until a real photo arrives): same frame, black and white tones, initials */
.portrait--ph { display: grid; place-items: center; background: linear-gradient(160deg, #4a4b4e, #2b2c2e); }
.portrait--ph span { font: 800 clamp(3rem, 6vw, 5rem)/1 var(--display); font-stretch: 112%; letter-spacing: .02em; color: #d9d9d9; }
@media (max-width: 760px) { .portrait { width: 400px; } }
.person__role { font: 700 .74rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #ffffff; margin: 0 0 8px; }
.person h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: var(--on-ink); margin: 0 0 12px; }
.person__bio { color: var(--on-ink-muted); font-size: 1rem; margin: 0; max-width: 30em; }
.person__bio + .person__bio { margin-top: .75em; }

/* ---------- seller band ---------- */
.band { position: relative; overflow: hidden; background: var(--silver); color: var(--charcoal); }

.band__in { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px 56px; align-items: center; }
.band h2 { margin-bottom: 12px; max-width: 16ch; }
.band p { font-size: 1.1rem; max-width: 36em; margin: 0; color: #1f2622; }
.band .eyebrow { color: var(--charcoal); }
.band__cta { display: flex; flex-direction: column; gap: 12px; }
.band__cta .btn { width: 100%; justify-content: space-between; }
@media (max-width: 860px) { .band__in { grid-template-columns: 1fr; } }

/* ---------- closing CTA ---------- */
.cta { text-align: center; }
.cta h2 { max-width: 18ch; margin: 0 auto 16px; }
.cta .lede { margin: 0 auto 22px; }

/* ---------- story (about) ---------- */
.story { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px 64px; align-items: start; }
.story__aside { position: sticky; top: calc(var(--hh) + 32px); }
.story__aside h2 { margin-bottom: 0; }
.story__body p { font-size: 1.12rem; }

@media (max-width: 860px) { .story { grid-template-columns: 1fr; } .story__aside { position: static; } }

/* ---------- photo placeholders ---------- */
.ph { position: relative; display: grid; place-items: center; border-radius: 0; background-color: var(--paper-2); background-image: repeating-linear-gradient(135deg, rgba(31, 32, 34, .05) 0 1px, transparent 1px 14px); border: 1px solid var(--line); color: var(--muted); text-align: center; padding: 24px; overflow: hidden; }
.ph__label { font: 700 .7rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.ph__label span { display: block; margin-top: 6px; font: 500 .95rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.ph__icon { width: 34px; height: 34px; margin: 0 auto 12px; opacity: .6; }

/* ---------- companies page ---------- */
.co-row { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: 24px 56px; align-items: center; }
.co-row:nth-child(even) { grid-template-columns: 1fr minmax(0, 440px); }
.co-row + .co-row { margin-top: clamp(44px, 6vw, 80px); }
.co-row:nth-child(even) .co-row__media { order: 2; }
.co-row__media { display: grid; gap: 14px; }

.co-row__logo { position: relative; display: grid; place-items: center; height: 104px; background: var(--white); border: 1px solid var(--line); border-radius: 0; padding: 18px 24px; }
/* company logo tiles (Round 5): real logos on white, sized by eye so they weigh the same, not to one width */
.co-logo-img, .co-logo-img img { display: block; width: auto; max-width: 100%; }
.co-row__logo .co-logo-img--ns img { height: 46px; } /* National Sign + Barco lockup, about 320 px wide */
.co-row__logo .co-logo-img--ld img { height: 58px; }
.co-row__logo .co-logo-img--wf img { height: 62px; } /* 400 px source, shown about 240 px wide */
.co-row h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.co-row .co-facts { margin: 18px 0 18px; max-width: 460px; }
.co-row .co-facts div:last-child { flex: 1.3; }
@media (max-width: 860px) {
  .co-row, .co-row:nth-child(even) { grid-template-columns: 1fr; }
  .co-row__media { max-width: 440px; }
  .co-row:nth-child(even) .co-row__media { order: 0; }
}
.note { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: 0; background: var(--white); border: 1px solid var(--line); color: var(--muted); }
.note strong { color: var(--charcoal); }
.note p { margin: 0; }
.note .note__q { font-weight: 700; color: var(--charcoal); margin-bottom: 4px; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 1.45fr 1fr; gap: 32px 56px; align-items: start; }
@media (max-width: 920px) { .contact { grid-template-columns: 1fr; } }
.card { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: 0; padding: clamp(20px, 3vw, 34px); }
.form { display: grid; gap: 16px; }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend, .field label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 8px; color: var(--charcoal); }
.field .opt { font-weight: 500; color: var(--muted); }
.field input, .field textarea { width: 100%; font: 500 16px/1.4 var(--sans); color: var(--text); background: var(--paper); border: 1px solid var(--line); border-radius: 0; padding: 13px 16px; min-height: 52px; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--charcoal); outline-offset: 2px; border-color: var(--charcoal); background: var(--white); }
.field [aria-invalid="true"] { border-color: var(--error); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
.topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 600px) { .topics { grid-template-columns: 1fr; } }
.topic { position: relative; }
.topic input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topic label { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); font-weight: 600; font-size: .98rem; cursor: pointer; transition: border-color .2s, background-color .2s; margin: 0; line-height: 1.25; }
.topic label::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 0; border: 2px solid var(--line); background: var(--white); transition: border-color .2s, box-shadow .2s; }
.topic input:checked + label { border-color: var(--charcoal); background: var(--white); }
.topic input:checked + label::before { border-color: var(--charcoal); box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 9px var(--charcoal); }
.topic input:focus-visible + label { outline: 3px solid var(--charcoal); outline-offset: 2px; }
.confid { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 0; background: #eef0f1; border: 1px solid #b9bfc5; font-size: .95rem; color: var(--charcoal); margin: 0; }
.confid svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: 14px 16px; border-radius: 0; font-weight: 600; font-size: .98rem; margin: 0; }
.form-status.is-error { background: #f8e6e2; color: var(--error); border: 1px solid #e6b9b0; }
.form-foot { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.form-foot .small { align-self: stretch; margin: 0; }
.nowrap { white-space: nowrap; }
@media (max-width: 480px) { .form-foot .btn { align-self: stretch; } }
.small { font-size: .88rem; color: var(--muted); }
.form-done { text-align: center; padding: 20px 0; }
.form-done h2:focus { outline: none; }
.form-done h2:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 4px; }
.form-done__icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 0; display: grid; place-items: center; background: var(--ink); color: var(--silver); }
.form-done__icon svg { width: 28px; height: 28px; }
.aside h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.aside__block + .aside__block { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.co-links { list-style: none; margin: 16px 0 0; padding: 0; }
.co-links li + li { border-top: 1px solid var(--line); }
.co-links a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 10px 0; text-decoration: none; }
.co-links a:hover strong { color: var(--steel); }
.co-links strong { display: block; font-weight: 700; color: var(--charcoal); transition: color .2s; }
.co-links span span { display: block; font-size: .9rem; color: var(--muted); }

/* ---------- prose (privacy) ---------- */
.prose { max-width: 720px; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-top: 1.3em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }

/* ---------- footer ---------- */
.site-footer { background: #ad1f1f; color: var(--on-ink-muted); padding: clamp(40px, 5vw, 60px) 0 16px; font-size: .95rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--on-ink); }
.foot { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 28px 40px; padding-bottom: 28px; border-bottom: 1px solid var(--line-ink); }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot { grid-template-columns: 1fr; } }
.foot .brand { color: var(--on-ink); margin-bottom: 14px; }
.foot__brand p { max-width: 30em; margin: 0; }
.foot h2 { font: 700 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #ffffff; margin: 6px 0 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ink); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 24px; padding-top: 12px; font-size: .85rem; }
.foot__base a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__base p { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0 20px; }

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-d1 { transition-delay: .1s; }
.js .reveal-d2 { transition-delay: .2s; }
.js .reveal-d3 { transition-delay: .3s; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .rise, .js .tl li { opacity: 1; transform: none; animation: none; }
  .js .tl::after { transform: none; }
  .hero__lines .l-drift, .hero__lines .l-drift-2 { animation: none; }

}