/* ============================================================
   ICOSA LTD  ·  Shared base
   Ported verbatim from the approved designs. Everything here is
   byte-identical in effect across all four pages; anything that
   differed between them lives in the per-template stylesheet,
   including the whole :root token block and the type-scale
   overrides on .h-display and .lede.
   ============================================================ */

*{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* The nav is sticky, so an in-page jump would otherwise park the target
     heading underneath it. --nav-h is measured live by main.js. */
  scroll-padding-top:calc(var(--nav-h, 95px) + 16px);
}
body{
  background:var(--ink); color:var(--white);
  font-family:var(--ff-sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }
::selection{ background:var(--orange); color:var(--black); }

/* Keyboard focus. The designs never showed a focus style; leaving the browser
   default in place would have been an accessibility regression on a dark
   ground, so the ring is drawn in the brand accent instead. */
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
.light :focus-visible{ outline-color:var(--burnt); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--orange); color:var(--black);
  font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; padding:14px 20px;
}
.skip-link:focus{ left:0; }

/* ---------- Shared shell: one container, every section ---------- */
.shell{
  width:100%; max-width:1720px; margin-inline:auto;
  padding-inline:clamp(24px, 3vw, 56px);
}
.sec-pad{ padding-block:var(--sec); }
.light{ background:var(--white); color:var(--black); }

/* ---------- Wordmark ---------- */
.wordmark{ display:flex; align-items:center; gap:14px; }
.wm-mark{ width:34px; height:37.7px; fill:currentColor; flex:none; }
.wm-word{ width:126px; height:37.7px; fill:currentColor; flex:none; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(11,11,11,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:20px; }
.nav-links{ display:flex; align-items:center; gap:clamp(18px, 2.2vw, 40px); list-style:none; }
.nav-links a{ font-size:.95rem; color:rgba(255,255,255,.78); transition:color .3s var(--ease); }
.nav-links a:hover{ color:var(--orange); }
.nav-links a[aria-current="page"]{ color:var(--orange); }
.nav-right{ display:flex; align-items:center; gap:clamp(18px, 2.2vw, 40px); }

.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--ff-sans); font-weight:600; font-size:.92rem;
  padding:14px 22px; border:1px solid transparent; cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn-solid{ background:var(--orange); color:var(--black); }
.btn-solid:hover{ background:var(--orange-hi); }
.btn-solid[disabled]{ opacity:.55; cursor:not-allowed; }
.btn-ghost{ border-color:var(--line-dark); color:var(--white); }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }

/* The drawer's copy of the header button. Hidden above the breakpoint, where
   the real one is visible. */
.nav-links .nav-cta{ display:none; }

.burger{
  display:none; width:44px; height:40px; border:1px solid var(--line-dark);
  background:none; color:var(--white); font-family:var(--ff-mono);
  font-size:.68rem; letter-spacing:.14em; cursor:pointer;
}

/* ---------- Shared type ---------- */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--ff-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--orange);
}
.eyebrow::before{ content:""; width:30px; height:2px; background:currentColor; flex:none; }
/* Bold orange on white is 3.0:1 and the eyebrow is 11.5px, so light grounds
   take the burnt tone (4.8:1). Three of the four designs already did this; the
   homepage omitted the rule. Applied everywhere for consistency and contrast. */
.light .eyebrow{ color:var(--burnt); }

.h-display{
  font-family:var(--ff-display); font-weight:500;
  font-size:var(--h2); line-height:1.05;
}
.h-display em{ font-style:normal; color:var(--orange); }
.light .h-display em{ color:var(--burnt); }
.lede{ color:var(--mut-dark); }
.light .lede{ color:var(--mut-light); }

/* ---------- Scroll reveal ----------
   Scoped to .js-reveal, which a tiny inline script in the head adds and then
   withdraws if the reveal script never arms. With no JavaScript, or if
   main.js fails to load, every section stays visible instead of the page
   below the fold being blank at opacity 0. */
.js-reveal .rv{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d, 0s); }
.rv.in{ opacity:1; transform:none; }
/* Above the fold paints immediately: no reveal on the first screen */
.hero .rv, .screen .rv{ opacity:1; transform:none; transition:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:var(--ink-3); border-top:1px solid var(--line-dark); }
.footer-main{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(36px, 4vw, 72px); align-items:start;
  padding-block:clamp(62px, 6vw, 96px) clamp(42px, 4.4vw, 64px);
}
.footer-etym{ margin-top:24px; max-width:44ch; color:var(--mut-dark); font-size:.95rem; line-height:1.75; }
.footer-etym b{ color:var(--white); font-weight:600; }
.footer-col h2{
  font-family:var(--ff-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin-bottom:20px;
}
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.footer-col a{ color:rgba(255,255,255,.74); font-size:.95rem; transition:color .3s var(--ease); }
.footer-col a:hover{ color:var(--orange); }
.footer-contact{ font-style:normal; color:rgba(255,255,255,.74); font-size:.95rem; line-height:1.9; }
.footer-contact a:hover{ color:var(--orange); }
.footer-contact .fc-mail{ color:var(--orange); }
.footer-contact--mail{ margin-top:16px; }
.li-link{ display:inline-flex; align-items:center; gap:11px; }
.li-icon{ width:19px; height:19px; flex:none; }
.footer .li-icon{ fill:var(--white); transition:fill .3s var(--ease); }
.footer .li-link:hover .li-icon{ fill:var(--orange); }
.footer-bottom{
  border-top:1px solid var(--line-dark); padding-block:26px 34px;
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  font-family:var(--ff-mono); font-size:.72rem; color:var(--mut-dark);
}

/* ============================================================
   Responsive: the parts every template shares
   ============================================================ */
@media (max-width: 1180px){
  .footer-main{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--ink-2); border-bottom:1px solid var(--line-dark);
    padding:8px clamp(24px,3vw,56px) 20px;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; border-top:1px solid var(--line-dark); }
  .nav-links a{ display:block; padding-block:16px; }
  .burger{ display:block; }
  .nav .btn-solid{ display:none; }

  /* The header button is hidden at this width, so the drawer carries it. */
  .nav-links .nav-cta{ display:block; border-top:1px solid var(--line-dark); padding-block:18px 4px; }
  .nav-links .nav-cta .btn-solid{
    display:inline-flex; width:auto; padding:14px 22px;
  }
}
@media (max-width: 640px){
  .footer-main{ grid-template-columns:minmax(0,1fr); }
}