/* Styles every page shares. Page-specific styles stay in each page's own <style> block. */
/* Spacing: every section uses these sizes, so the pages keep one rhythm. The side margin grows with the window:
   24px on a phone, 64px on a laptop. Content is capped at 1280px, so wider screens only add margin. */
:root{
  --page-max:1280px;
  --gutter:clamp(24px,5vw,64px);
  --space-section:96px;                   /* top and bottom of every section */
  --space-opening:clamp(64px,6.7vw,88px); /* top and bottom of the dark first section on each page */
  --space-block:48px;                     /* a section's heading to its content, and between groups */
  --space-heading:24px;                   /* a heading to the line under it */
  --space-para:16px;                      /* between paragraphs that follow each other */
}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format('woff2')}
/* A stand-in for Barlow Condensed for the moment before it loads: Arial squeezed to the same width, so headlines do not jump. Measured: Barlow Condensed 800 is 69% of Arial Bold's width; ascent 1.00 and descent 0.20 of its size, divided by 0.69. */
@font-face{font-family:'Barlow Condensed Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');font-weight:600 800;size-adjust:69%;ascent-override:145%;descent-override:29%;line-gap-override:0%}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::selection{background:#FFB800;color:#121212}
[id]{scroll-margin-top:100px}
body{margin:0;background:#FFFFFF;color:#121212;font-family:'Barlow',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block}
a{color:#121212}
a:hover{color:#5A5A5A}
a:focus-visible,button:focus-visible{outline:2px solid #FFB800;outline-offset:4px}
.skip{position:absolute;left:-999px;top:8px;background:#FFB800;color:#121212;padding:8px 16px;font-weight:600;z-index:30}
.skip:focus{left:8px}

/* The content column every section uses */
.wrap{max-width:var(--page-max);width:100%;margin:0 auto;box-sizing:border-box;padding-left:var(--gutter);padding-right:var(--gutter)}

/* Type scale: h1 for the page's one headline, h2 for sections, h3 for groups and the founder's name,
   h4 for service names and small headings. Body text stays in Barlow. */
.h1{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:800;text-transform:uppercase;line-height:.9;margin:0;font-size:clamp(56px,7vw,104px)}
.hero-h1{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:800;text-transform:uppercase;line-height:.88;margin:0;font-size:clamp(56px,15vw,128px);color:#FFFFFF}
.hero-lede{margin:0;max-width:760px;font-size:clamp(20px,2vw,26px);line-height:1.4;font-weight:500;color:#FFFFFF;text-wrap:pretty}
.h2{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;line-height:.95;margin:0;font-size:clamp(40px,5vw,72px);text-wrap:balance}
.h3{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;line-height:1;margin:0;font-size:clamp(32px,4vw,40px)}
.h4{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;line-height:1.1;margin:0;font-size:24px;letter-spacing:.01em}
.caps{text-transform:uppercase}
.kicker{margin:0;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;font-size:24px;line-height:1.05;letter-spacing:.01em;color:#FFB800}
.lede{margin:0;font-size:22px;line-height:1.45;color:#3A3A3A;text-wrap:pretty}
.lede.on-ink{color:#D6D6D6}
.body{margin:0;font-size:18px;line-height:1.55;color:#3A3A3A;text-wrap:pretty}
.inline-link{color:#121212;font-weight:600;text-decoration:none;border-bottom:3px solid #FFB800}
.inline-link:hover{border-bottom-color:#121212}
.text-link{font-weight:600}

/* Top bar and menu */
.topbar{position:sticky;top:0;z-index:20;background:#121212;border-bottom:1px solid #2A2A2A}
.topbar.compact{box-shadow:0 1px 0 #2A2A2A}
.topbar nav{padding-top:20px;padding-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:16px 32px}
.topbar.compact nav{padding-top:12px;padding-bottom:12px}
.nav-logo{height:56px;width:auto;transition:height .25s cubic-bezier(.2,.8,.2,1)}
.topbar.compact .nav-logo{height:40px}
.nav-desktop{display:flex;align-items:center;gap:8px 32px}
.nav-link{color:#FFFFFF;text-decoration:none;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:600;font-size:18px;letter-spacing:.06em;text-transform:uppercase;padding:10px 0;display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;border-bottom:2px solid transparent}
.nav-link:hover,.nav-link[aria-current="page"]{color:#FFFFFF;border-bottom-color:#FFB800}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 28px;background:#FFB800;color:#121212;text-decoration:none;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;font-size:21px;letter-spacing:.04em;text-transform:uppercase;border:0;cursor:pointer}
.btn:hover{background:#FFFFFF;color:#121212}
.btn.on-white:hover{background:#121212;color:#FFB800}
.nav-toggle{display:none;appearance:none;background:transparent;border:2px solid #FFFFFF;color:#FFFFFF;min-height:44px;padding:0 18px;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;font-size:18px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.nav-toggle:hover{background:#FFFFFF;color:#121212}
.nav-phone{display:none}
.nav-phone[hidden]{display:none !important}
@media (max-width:860px){
  .nav-desktop{display:none !important}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-phone{display:flex;flex-direction:column;gap:4px;padding:8px var(--gutter) 32px;border-top:1px solid #2A2A2A}
  .nav-phone-link{color:#FFFFFF;text-decoration:none;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;font-size:40px;text-transform:uppercase;line-height:1.1;padding:10px 0;min-height:44px}
  .nav-phone-link:hover{color:#FFB800}
}
@media (prefers-reduced-motion:reduce){.nav-logo{transition:none}}

/* The dark opening band of each page */
.opening{background:#121212;color:#FFFFFF}
.opening .wrap{padding-top:var(--space-opening);padding-bottom:var(--space-opening)}

/* Social links and the press line */
.social{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #121212;color:#121212}
.social:hover{background:#121212;color:#FFB800}
.press-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-top:20px;border-top:1px solid #121212}

/* Contact band and form, shared by every page */
.contact{background:#121212;color:#FFFFFF}
.contact .wrap{padding-top:var(--space-section);padding-bottom:var(--space-section);display:flex;flex-wrap:wrap;gap:48px 64px}
.contact-words{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:var(--space-heading)}
.contact-ways{display:flex;flex-wrap:wrap;gap:24px 48px;padding-top:8px}
.contact-way{display:flex;flex-direction:column;gap:4px}
.contact-way a{color:#FFFFFF;font-size:18px;font-weight:500}
.form{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:16px;margin:0}
.field{width:100%;box-sizing:border-box;background:#1A1A1A;border:1px solid #767676;color:#FFFFFF;font-family:'Barlow',sans-serif;font-size:17px;padding:14px 16px}
.field:focus{outline:2px solid #FFB800;border-color:#FFB800}
.field[aria-invalid="true"]{border-color:#FFB800}
.label{font-size:15px;color:#BDBDBD}
.field-error{margin:0;font-size:14px;font-weight:600;color:#FFB800}
.form-status{margin:0;font-size:15px;font-weight:600;color:#FFB800}

/* Footer: logo and mantra, then a thin copyright strip */
.footer{border-top:1px solid #333}
.footer .wrap{padding-top:32px;padding-bottom:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.footer-mantra{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;font-size:22px;text-transform:uppercase;color:#FFFFFF}
.copyright{background:#1C1C1C}
.copyright .wrap{padding-top:8px;padding-bottom:8px;text-align:center;display:block}
.copyright span{font-size:11px;color:#9A9A9A;letter-spacing:.02em}