/* Adicot Engineering public site — design tokens and shared chrome.
   Page-specific rules live in pages.css (home/about) and quote.css. */

:root{
  --ink:         #2C2C2A;
  --ink-muted:   #444441;
  --accent:      #E8740A;
  --paper:       #FAFAF7;
  --paper-cream: #F4EDE3;
  --line:        #D4D0C2;
  --card-border: #E8E5DC;
  --white:       #FFFFFF;

  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1600px;
  --gutter:    64px;
  --header-h:  72px;
  --radius:    2px;
  --section-y: 96px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  /* The header is sticky, so anything scrolled to must clear it or it lands
     underneath. Applies to in-page anchors and scrollIntoView alike. */
  scroll-padding-top:calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.65 var(--font);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--white);
  padding:12px 18px; font:600 14px/1 var(--font);
}
.skip-link:focus{ left:0; }

/* ── Typography roles ─────────────────────────────────────────────── */

.h1{ font:700 clamp(40px,5vw,64px)/1 var(--font); letter-spacing:0; margin:0; }
.h2{ font:700 clamp(28px,3.4vw,44px)/1.1 var(--font); margin:0; }
.h3{ font:600 clamp(18px,1.7vw,22px)/1.3 var(--font); margin:0; }

.eyebrow{
  font:600 clamp(12px,1.1vw,14px)/1.2 var(--font);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin:0;
}
.micro{
  font:400 clamp(10px,.9vw,11px)/1.4 var(--font);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin:0;
}
.lead{ font:400 clamp(16px,1.5vw,19px)/1.6 var(--font); color:var(--ink-muted); }
.small{ font:400 clamp(12px,1.1vw,14px)/1.5 var(--font); color:var(--ink-muted); }

/* ── Layout ───────────────────────────────────────────────────────── */

.section{ padding:var(--section-y) 0; }
.section--cream{ background:var(--paper-cream); }
.section--dark{ background:var(--ink); color:var(--paper-cream); }
.section--dark .h1,.section--dark .h2,.section--dark .h3{ color:var(--paper-cream); }
.section--dark .lead,.section--dark .small{ color:var(--paper-cream); }
.section--flush{ padding-bottom:0; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Vertical stack, centered. The typography classes all set margin:0, so any
   centered block (the contact page, CTA bands) needs an explicit gap. */
.stack-center{
  display:grid; justify-items:center; text-align:center; gap:24px;
}
.stack-center > *{ max-width:62ch; }

/* ── Buttons ──────────────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:max-content;
  padding:17px 17px;
  border:0; border-radius:var(--radius);
  font:600 16px/1.5 var(--font);
  text-decoration:none; cursor:pointer;
  transition:background-color .4s ease, color .4s ease;
}
.btn--primary{ background:var(--accent); color:var(--white); }
.btn--secondary{ background:var(--paper-cream); color:var(--ink-muted); }
.btn--primary:hover,.btn--secondary:hover{ background:var(--line); color:var(--ink); }
.btn:disabled,.btn[aria-disabled="true"]{ background:#CCCCCC; color:var(--white); cursor:not-allowed; }

/* Tertiary "link button": uppercase orange underlined text. */
.link-cta{
  font:600 clamp(12px,1.1vw,14px)/1.2 var(--font);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); text-decoration:underline;
}

/* ── Header ───────────────────────────────────────────────────────── */

.site-header{
  position:sticky; top:0; z-index:51;
  background:var(--paper);
}
.site-header__inner{
  max-width:var(--container); margin-inline:auto;
  padding-inline:var(--gutter);
  min-height:var(--header-h);
  display:flex; align-items:center; gap:24px;
}
.site-header__brand{
  display:flex; align-items:center; gap:16px;
  text-decoration:none; margin-right:auto;
}
.site-header__logo{ width:146px; height:auto; }
.site-header__wordmark{ font:600 22px/1.3 var(--font); color:var(--ink); }

.site-nav{ display:flex; align-items:center; gap:24px; }
.site-nav__list{
  display:flex; align-items:center; gap:12px;
  list-style:none; margin:0; padding:0;
}
.site-nav__list a{
  display:inline-block; padding:2px 8px;
  font:400 13px/1.65 var(--font);
  color:var(--ink-muted); text-decoration:none;
  border-radius:var(--radius);
  transition:color .4s ease, background-color .4s ease;
}
.site-nav__list a:hover{ color:var(--accent); }
.site-nav__list a[aria-current="page"]{ background:var(--line); color:var(--ink); }
.site-nav__cta{ padding:11px 17px; }

.nav-toggle,.nav-close{
  display:none;
  background:none; border:0; padding:8px; cursor:pointer; color:var(--ink);
}
.nav-toggle svg rect{ fill:currentColor; }

@media (max-width:1000px){
  .nav-toggle{ display:inline-flex; order:3; }
  .nav-close{ display:inline-flex; position:absolute; top:16px; right:16px; }
  .site-nav{
    position:fixed; inset:0; z-index:60;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:20px; padding:0 var(--gutter);
    background:var(--paper);
    transform:translateX(100%); visibility:hidden;
    transition:transform .3s ease, visibility .3s ease;
  }
  .site-nav.is-open{ transform:translateX(0); visibility:visible; }
  .site-nav__list{ flex-direction:column; align-items:flex-start; gap:20px; }
  .site-nav__list a{ font-size:18px; padding:8px 0; }
}
@media (max-width:750px){
  :root{ --gutter:20px; --section-y:56px; }
  .site-header__logo{ display:none; }
  .site-header__wordmark{ font-size:18px; }
}

/* ── Footer ───────────────────────────────────────────────────────── */

.site-footer{ background:var(--ink); color:var(--paper); }
.site-footer__inner{
  max-width:var(--container); margin-inline:auto;
  padding:var(--section-y) var(--gutter) 48px;
  display:grid; gap:40px 32px;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
}
.site-footer__brand h2{ font:600 22px/1.3 var(--font); color:var(--white); margin:0 0 12px; }
.site-footer__brand h2 a{ text-decoration:none; }
.site-footer__brand p{ font:400 14px/1.5 var(--font); color:var(--paper); margin:0; max-width:44ch; }

.site-footer__col h3{
  font:600 14px/1.2 var(--font);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px;
}
.site-footer__col p{ font:400 14px/1.7 var(--font); color:var(--paper); margin:0; }
.site-footer__connect a{ color:var(--paper); text-decoration:underline; }
.site-footer__connect a:hover{ color:var(--accent); }

.site-footer__legal{ grid-column:1 / 3; align-self:end; }
.site-footer__legal p{ font:400 14px/1.6 var(--font); color:var(--paper-cream); margin:0; }
.site-footer__employee{
  grid-column:3 / -1; align-self:end;
  display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-end;
}

@media (max-width:1000px){
  .site-footer__inner{ grid-template-columns:1fr 1fr; }
  .site-footer__brand{ grid-column:1 / -1; }
  .site-footer__legal,.site-footer__employee{ grid-column:1 / -1; }
  .site-footer__employee{ justify-content:flex-start; }
}
@media (max-width:750px){
  .site-footer__inner{ grid-template-columns:1fr; }
}