/* EquiWork site stylesheet: permanent Onyx & Gold palette, layout utilities, responsive rules. */

/* ---- Palette: Onyx & Gold, promoted from the former theme switcher. Hard-coded, no runtime state. ---- */
:root{
  --teal-900:#0B0A08;--teal-800:#141210;--teal-700:#232019;--teal-600:#3A342A;
  --teal-300:#B9B4AB;--teal-100:#E8E5DE;--teal-050:#F4F2EC;
  --surface-teal:#141210;--surface-teal-deep:#0B0A08;--hairline-teal:#322E27;
  --on-teal-mute:#C7C1B4;
  --parchment:#F4EFE3;--parchment-deep:#ECE5D5;--hairline:#E4DECF;
  --brass-700:#8A6D24;--brass-500:#C8A24A;--brass-300:#D9BC72;--brass-100:#F1E6CC;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--canvas);font-family:var(--font-sans);color:var(--ink-900)}
img{max-width:100%}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}

/* ---- Reading: ragged right everywhere, no automatic hyphenation ---- */
#root p,#root li,#root article,#root figcaption,#root h1,#root h2,#root h3,#root h4{text-align:left;-webkit-hyphens:manual;hyphens:manual}

/* ---- Focus: always visible ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brass-500);outline-offset:2px}

/* ---- Buttons ---- */
.btn-accent{background:var(--brass-500)!important;border-color:var(--brass-500)!important;color:var(--teal-900)!important}
.btn-accent:hover{background:var(--brass-700)!important;border-color:var(--brass-700)!important;color:#fff!important}
.btn-onparchment{background:var(--parchment)!important;color:var(--teal-800)!important;border-color:var(--teal-800)!important}
.btn-onparchment:hover{background:#fff!important}

/* ---- Eyebrow marker: the brass rule reads as a section marker, not a dash ---- */
#root span[style*="width: 24px"][style*="height: 2px"]{width:7px!important;height:7px!important;transform:rotate(45deg);border-radius:1px}

/* ---- Hero: full-bleed photograph with a parchment scrim and overlaid copy ---- */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(520px,68vh,720px);overflow:hidden;background:var(--parchment)}
.hero-media{position:absolute;inset:0;display:block}
.hero-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:right center}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,239,227,0.94) 0%,rgba(244,239,227,0.88) 32%,rgba(244,239,227,0.55) 48%,rgba(244,239,227,0.00) 66%)}
.hero-inner{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:72px 24px}
.hero-copy{max-width:46%}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
@media(max-width:820px){
  .hero{align-items:flex-start;min-height:clamp(560px,88vh,760px)}
  .hero-media img{object-position:center bottom}
  .hero-scrim{background:linear-gradient(180deg,rgba(244,239,227,0.95) 0%,rgba(244,239,227,0.85) 38%,rgba(244,239,227,0.20) 62%,rgba(244,239,227,0.00) 78%)}
  .hero-inner{padding:40px 20px}
  .hero-copy{max-width:100%}
}

/* ---- Grid utilities (media queries need real classes, not inline styles) ---- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-2.tight{gap:18px}
.grid-split{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.grid-split.wide-left{grid-template-columns:1.35fr 1fr}
.grid-split.copy-left{grid-template-columns:1.1fr 0.9fr}
.grid-split.about{grid-template-columns:1.25fr 0.75fr;align-items:center}
.grid-split.mission{grid-template-columns:0.9fr 1.1fr}
.grid-split.portrait{grid-template-columns:0.62fr 1.38fr;gap:48px}
.grid-split.engage{gap:64px}
@media(max-width:1024px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.grid-split{grid-template-columns:1fr!important;gap:36px}}
@media(max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}.grid-2.tight{grid-template-columns:1fr}}

/* ---- Section rhythm: 96 desktop, 64 tablet, 40 mobile (overrides per-screen inline padding) ---- */
@media(max-width:1024px){#root section:not(.hero){padding-top:64px!important;padding-bottom:64px!important}}
@media(max-width:768px){#root section:not(.hero){padding-top:40px!important;padding-bottom:40px!important;padding-left:20px!important;padding-right:20px!important}}

/* ---- Headings step down ---- */
@media(max-width:1024px){#root h1{font-size:40px!important}#root h2{font-size:30px!important}}
@media(max-width:768px){#root h1{font-size:32px!important;letter-spacing:-0.2px!important}#root h2{font-size:26px!important}#root p{font-size:17px!important}}

/* ---- Statutory timeline strip: it lives in a narrow tier card, so it always reads as a vertical list.
       The DS connector bar is geometrically valid only for side-by-side steps, so it is replaced by a
       vertical hairline and the strip clips, whatever the viewport. ---- */
#root .timeline{flex-direction:column;overflow:hidden}
#root .timeline>li{flex:1 1 auto!important;min-width:0!important;padding:0 0 18px 34px!important}
#root .timeline>li>span[style*="height: 2px"]{display:none!important}
#root .timeline>li>span[style*="width: 18px"]{left:0!important;top:2px!important}
#root .timeline>li:not(:last-child)::before{content:"";position:absolute;left:8px;top:22px;bottom:0;width:2px;background:var(--hairline)}
#root .timeline>li>*{text-align:left!important}

/* ---- Awareness film band ---- */
.film-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:56px;align-items:center}
@media(max-width:820px){.film-grid{grid-template-columns:1fr;gap:32px}}
.film-frame{position:relative;aspect-ratio:1/1;border-radius:var(--radius-xl,16px);overflow:hidden;border:1px solid var(--hairline);background:var(--ink-900);box-shadow:0 1px 3px rgba(11,42,47,.10)}
.film-frame video{width:100%;height:100%;object-fit:cover;display:block}
.film-toggle{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:var(--brass-500);color:var(--teal-900);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease}
.film-toggle:hover{background:var(--brass-700);color:#fff}
.film-caption{font-size:14px;line-height:1.5;color:var(--ink-500);margin:16px 0 0}

/* ---- Navigation: wraps to two rows on small screens ---- */
.navwrap{position:sticky;top:0;z-index:10}
@media(max-width:900px){
  .navwrap{position:static}
  #root nav{flex-wrap:wrap;row-gap:6px;padding:12px 20px!important;gap:10px!important}
  #root nav>div:first-of-type{order:3;flex:1 1 100%;flex-wrap:wrap;gap:2px 18px}
  #root nav>div:first-of-type a{font-size:15px}
  #root nav>div:last-of-type a{font-size:13px!important;padding:10px 14px!important}
}

/* ---- About page: long-form copy set justified ---- */
#root .page-about p,#root .page-about li{text-align:justify;text-justify:inter-word}
#root .page-about cite,#root .page-about figcaption,#root .page-about p[style*="font-mono"],#root .page-about h1,#root .page-about h2,#root .page-about h3{text-align:left}

/* ---- Training page: everything except headings set justified. The global ragged-right rule
       (#root p,#root li,…) beats inheritance, so those elements are named explicitly here. ---- */
#root .page-training,#root .page-training p,#root .page-training li,#root .page-training article,#root .page-training figcaption,#root .page-training span,#root .page-training blockquote{text-align:justify;text-justify:inter-word}
#root .page-training h1,#root .page-training h2,#root .page-training h3,#root .page-training h4{text-align:left}

/* ---- Insights page and case notes: everything except headings set justified ---- */
#root .page-insights,#root .page-insights p,#root .page-insights li,#root .page-insights article,#root .page-insights figcaption,#root .page-insights span,#root .page-insights blockquote{text-align:justify;text-justify:inter-word}
#root .page-insights h1,#root .page-insights h2,#root .page-insights h3,#root .page-insights h4{text-align:left}

/* ---- Services page and service details: everything except headings set justified ---- */
#root .page-services,#root .page-services p,#root .page-services li,#root .page-services article,#root .page-services figcaption,#root .page-services span,#root .page-services blockquote{text-align:justify;text-justify:inter-word}
#root .page-services h1,#root .page-services h2,#root .page-services h3,#root .page-services h4{text-align:left}

/* ---- Notices ---- */
.notice-neutral{background:var(--parchment-deep);border:1px solid var(--hairline);border-left:3px solid var(--brass-500);border-radius:var(--radius-lg);padding:16px 20px}

/* ---- Tap targets: scoped to controls, so inline text links keep the shared baseline ---- */
#root button,#root select,#root input[type="checkbox"]{min-height:44px!important}
.navwrap nav a[href],#root footer a[href]{display:inline-flex;align-items:center;min-height:44px}