/* ============================================================================
   STERiJECT shared chrome and primitives.
   Header, nav, drawer, footer, buttons, typography, section shell and the CTA
   band -- everything used by more than one page. Loads site-wide.
   Page-specific sections live in home.css / interior.css.
   ========================================================================== */

html{font-size:100%}
.sj{background:var(--white);color:var(--neutral-900);font-family:var(--font-core);
    font-size:var(--size-md);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;
    --line:var(--neutral-300);--line-soft:var(--neutral-200);--fill:var(--neutral-50);
    --fill-2:var(--neutral-100);--ink:var(--neutral-900);--ink-2:var(--neutral-500);
    --navy-1:#00345F;--navy-2:#002546}
.sj :where(a){color:var(--text-link);text-decoration:none}
.sj :where(a:hover){color:var(--text-link-hover)}
.wf{width:100%;background:var(--white);position:relative;overflow-x:clip;
    --pagepad:max(clamp(1.25rem,5vw,80px),calc(50% - 640px));
    --headpad:max(clamp(1rem,3vw,2.5rem),calc(50% - 680px))}
.mod{position:relative}
.sec{padding:var(--space-24) var(--pagepad)}
.sj .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:48px;padding:0 var(--space-6);border-radius:var(--radius-md);font-size:var(--size-sm);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);border:var(--stroke-frame) solid var(--brand-primary);background:var(--brand-primary);color:var(--white);transition:background .2s ease,border-color .2s ease,color .2s ease;cursor:pointer}
.sj .btn:hover{background:var(--white);border-color:var(--border-brand);color:var(--text-brand)}
.sj .btn--ghost{background:var(--white);color:var(--text-brand);border-color:var(--border-brand)}
.sj .btn--onvideo-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.sj .btn--onvideo-ghost:hover{background:var(--white);border-color:var(--white);color:var(--text-brand)}
.sj .btn--brand{background:var(--brand-primary);color:var(--white);border-color:var(--brand-primary)}
.eyebrow{font-size:var(--size-sm);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--ink-2);margin:0}
.h2{color:#00345F;font-size:var(--size-4xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading);margin:0}
.h3{font-size:var(--size-xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-heading);margin:0;text-wrap:balance}
.p{margin:0;font-size:var(--size-md);line-height:var(--leading-body);color:var(--neutral-700);text-wrap:pretty}
.p--sm{font-size:var(--size-sm);line-height:var(--leading-normal)}
.fn{font-size:.62em;font-weight:var(--weight-medium);color:var(--text-brand);vertical-align:super;line-height:0;padding-left:1px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);margin-bottom:var(--space-12)}
.sec-head-l{display:flex;flex-direction:column;gap:var(--space-4);max-width:880px}
.sj .link{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--size-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--ink);white-space:nowrap}
.plate{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);min-height:220px;background:var(--fill);border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-lg);overflow:hidden;text-align:center}
.plate::before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 49.6%,var(--line-soft) 49.6%,var(--line-soft) 50.4%,transparent 50.4%),linear-gradient(-45deg,transparent 49.6%,var(--line-soft) 49.6%,var(--line-soft) 50.4%,transparent 50.4%);opacity:.9}
.plate-label{position:relative;font-size:var(--size-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--ink-2);background:var(--white);padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);border:var(--stroke-hairline) solid var(--line-soft)}
.plate-sub{position:relative;font-size:var(--size-3xs);color:var(--neutral-400);background:var(--white);padding:0 var(--space-2)}
.wm{display:inline-flex;align-items:flex-start;font-family:var(--font-core);font-weight:var(--weight-bold);font-size:29px;line-height:1.12;letter-spacing:.005em;color:var(--tsk-blue);white-space:nowrap;flex:none}
.wm i{font-style:normal}
.wm sup{font-size:.36em;font-weight:var(--weight-medium);letter-spacing:0;margin-left:.22em;margin-top:.18em;line-height:1.12}
.wm--sm{font-size:23px}
.hd{display:flex;align-items:center;gap:var(--space-8);padding:0 var(--headpad);height:88px;background:var(--white);box-shadow:0 1px 8px rgba(35,43,54,.07);position:fixed;top:0;left:0;width:100%;z-index:var(--z-header);transition:background .25s ease,box-shadow .25s ease,height .25s ease}
.hd--slim{height:64px}
.hd--slim .navitem{height:64px}
.hd--clear{background:transparent;box-shadow:none}
.hd--clear .wm{color:var(--white)}
.hd--clear .navitem>span,.hd--clear .navitem>a{color:var(--white)}
.hd--clear .navitem .chev{color:var(--white)}
.hd--clear .icon-box{border-color:rgba(255,255,255,.35);color:var(--white)}
.hd-nav{display:flex;gap:var(--space-6);flex:1;align-items:center;justify-content:center}
.navitem{position:relative;display:flex;align-items:center;gap:5px;height:88px}
.navitem::after{content:"";position:absolute;left:0;right:0;bottom:calc(50% - 16px);height:1px;background:var(--tsk-blue);transform:scaleX(0);transform-origin:left center;transition:transform .28s ease}
.navitem:hover::after{transform:scaleX(1)}
.hd--clear .navitem::after{background:var(--white)}
.navitem>span,.navitem>a{font-size:var(--size-sm);color:var(--neutral-600);white-space:nowrap}
.navitem:hover>span,.navitem:hover>a{color:var(--text-brand)}
.navitem>span.on,.navitem>a.on{color:var(--text-brand);font-weight:var(--weight-medium)}
.navitem .chev{display:flex;color:var(--neutral-400)}
.navitem:hover .chev{color:var(--text-brand)}
.hd--clear .navitem:hover>span,.hd--clear .navitem:hover>a,.hd--clear .navitem>span.on{color:var(--white)}
.hd--clear .navitem:hover .chev{color:var(--white)}
.dd{position:absolute;top:100%;left:50%;min-width:256px;padding:var(--space-3);display:flex;flex-direction:column;gap:1px;background:var(--white);border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-6px);transition:opacity .16s ease,transform .16s ease;z-index:30}
.navitem:hover .dd,.navitem:focus-within .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd a{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);font-size:var(--size-sm);color:var(--neutral-700);white-space:nowrap}
.dd a:hover{background:var(--tsk-blue-050);color:var(--text-brand)}
/* Current page inside a dropdown: highlighted, not a link to itself. */
.dd .dd-on{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);font-size:var(--size-sm);white-space:nowrap;background:var(--tsk-blue-050);color:var(--text-brand);font-weight:var(--weight-medium)}
.hd-tools{display:flex;align-items:center;gap:var(--space-4);flex:none}
.hd--clear .hd-tools .btn{border-color:rgba(255,255,255,.5);background:transparent;color:var(--white)}
.hd-tools .btn{transition:background .2s ease,border-color .2s ease,color .2s ease}
.hd-tools .btn:hover{background:var(--white);border-color:var(--border-brand);color:var(--text-brand)}
.hd--clear .hd-tools .btn:hover{background:var(--white);border-color:var(--white);color:var(--text-brand)}
.icon-box{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-sm);color:var(--ink-2);cursor:pointer;background:none}
/* Scoped to the element: WordPress puts a bare `search` class on <body> for
   search result pages, and an unscoped `.search` rule hid the whole page. */
form.search{display:flex;align-items:center;gap:var(--space-2)}
.search-in{width:0;min-width:0;padding:0;border:var(--stroke-hairline) solid transparent;border-radius:var(--radius-sm);background:var(--white);font-family:inherit;font-size:var(--size-sm);color:var(--ink);height:40px;opacity:0;pointer-events:none;transition:width .3s ease,opacity .22s ease,padding .3s ease}
.search-in::placeholder{color:var(--neutral-400)}
.search-in:focus{outline:none;border-color:var(--tsk-blue)}
form.search.on .search-in{width:225px;padding:0 var(--space-4);opacity:1;pointer-events:auto;border-color:var(--line)}
.hd--clear .search-in{background:rgba(255,255,255,.12);color:var(--white)}
.hd--clear .search-in::placeholder{color:rgba(255,255,255,.6)}
.hd--clear form.search.on .search-in{border-color:rgba(255,255,255,.45)}
/* Opening the field grows the tools by about 230px. The nav needs ~1384px to sit
   beside an open search; above that there is room for both. Below it the two
   collided and pushed the header wider than the window — the nav steps aside
   while the field is open and comes straight back when it closes. */
@media (max-width:1400px){
  .hd:has(form.search.on) .hd-nav{display:none}
}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-sm);background:none;color:var(--ink);cursor:pointer}
.hd--clear .nav-toggle{border-color:rgba(255,255,255,.35);color:var(--white)}
.cta{position:relative;color:var(--white);padding:var(--space-24) var(--pagepad);background-color:#00345F;background-image:linear-gradient(135deg,rgba(0,52,95,.88) 0%,rgba(0,37,70,.93) 100%),var(--sj-cta-image,none);background-position:0 0,38% 30%;background-size:auto,cover;background-repeat:no-repeat,no-repeat}
.cta-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-20);align-items:center;min-height:340px}
.cta-col{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start}
.cta h2{margin:0;font-size:var(--size-4xl);line-height:var(--leading-snug);letter-spacing:var(--tracking-display);font-weight:var(--weight-semibold);color:var(--white);max-width:20ch}
.cta .p{color:var(--white)}
.cta-btns{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.ft{background:var(--neutral-50);padding:var(--space-20) var(--pagepad) var(--space-10);border-top:var(--stroke-hairline) solid var(--line)}
.ft-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-10)}
.ft-col{display:flex;flex-direction:column;gap:var(--space-3)}
.ft-col b{font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-bold);color:var(--ink)}
.ft-col span,.ft-col a{font-size:var(--size-sm);color:var(--neutral-600)}
.ft-col a:hover{color:var(--text-link-hover)}
.ft-base{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);margin-top:var(--space-16);padding-top:var(--space-6);border-top:var(--stroke-hairline) solid var(--line);flex-wrap:wrap}
.ft-brand{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}
.ft-legal{display:flex;gap:var(--space-6);font-size:var(--size-2xs);color:var(--ink-2)}
/* The horizontal nav needs 1160px to lay out its seven items beside the logo,
   the search and the Contact button. It used to collapse at 1024, so anything
   between 1025 and 1160 overflowed the header — that was already true with six
   items. Measured, the seven need 1202px; it collapses to the drawer at 1240
   instead, leaving ~40px of headroom for fonts that render wider elsewhere. The drawer carries every item.
   Deliberately separate from the 1024 block below: the search stays visible in
   this band, since it is the tools that have the room here, not the nav. */
@media (max-width:1240px){
  .hd-nav{display:none}
  .nav-toggle{display:inline-flex}
  /* .hd-nav carries flex:1 and is what pushes the tools to the right edge.
     Hiding it collapsed the Contact button and menu toggle against the logo,
     leaving the right half of the header empty on tablets and small laptops. */
  .hd-tools{margin-left:auto}
}
@media (max-width:1024px){
  .hd,.hd--slim{height:64px}
  form.search{display:none}
  .ft-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
}
@media (max-width:430px){
  /* At phone widths the logo, Contact button and menu toggle together exceed the
     line: the toggle ran off the right edge. Tighten the gutters and gaps rather
     than shrinking the branding. */
  .hd{gap:var(--space-3);padding:0 var(--space-3)}
  .hd-tools{gap:var(--space-2)}
}
@media (max-width:768px){
  .sec{padding:var(--section-y-tight) var(--pagepad)}
  .sec-head{flex-direction:column;align-items:flex-start;gap:var(--space-5)}
  /* The artboard fixes .h2 at 44px; that is heavy on a phone and the design
     has no mobile spec, so it scales down here only. Desktop is untouched. */
  .h2,.cta h2{font-size:clamp(1.75rem,1.2rem + 2.4vw,var(--size-4xl))}
  .ft-base{flex-direction:column;align-items:flex-start;gap:var(--space-5)}
}
@media (max-width:520px){
  .ft-map{grid-template-columns:minmax(0,1fr)}
}
.nav-drawer{display:none;position:fixed;inset:64px 0 0;background:var(--white);z-index:calc(var(--z-header) - 1);padding:var(--space-6) var(--pagepad);overflow-y:auto;flex-direction:column;gap:var(--space-2)}
.nav-drawer.on{display:flex}
.nav-drawer a{padding:var(--space-3) 0;font-size:var(--size-lg);color:var(--neutral-800);border-bottom:var(--stroke-hairline) solid var(--line-soft)}
.nav-drawer a:hover{color:var(--text-brand)}
.nav-drawer b{margin-top:var(--space-5);font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-2)}
/* Guard: if a section heading is ever given a link again, it must keep the
   heading's own styling rather than inheriting the drawer's link rules. */
.nav-drawer b a{padding:0;border:0;font-size:inherit;letter-spacing:inherit;color:inherit}