/* ============================================================
   CLARKWAY CONSTRUCTION — DESIGN SYSTEM
   Direction: engineering / field-documentation aesthetic.
   Blueprint grids, spec-plate data callouts, monospace readouts
   for real figures (years, litres, tonnes, licenses) paired with
   a confident architectural display face for headings.
   ============================================================ */

:root{
  /* --- color --- */
  --ink:        #12161a;   /* near-black, cool */
  --ink-soft:   #1b2228;   /* panel dark */
  --ink-2:      #232c33;
  --steel:      #2e3a46;   /* dark steel blue */
  --steel-600:  #47586a;
  --steel-300:  #8fa1ae;
  --line-dark:  rgba(240,237,230,0.14);
  --line-dark-strong: rgba(240,237,230,0.28);
  --concrete:   #f1eee6;   /* warm light neutral */
  --concrete-dim: #e6e2d6;
  --paper:      #faf8f3;
  --white:      #ffffff;
  --brass:      #a97a25;   /* accent, muted brass/amber — not cartoon orange */
  --brass-light:#c99a42;
  --safety:     #a83a26;   /* rust-red, used only for emergency/urgent */
  --ok:         #3c6e52;

  /* --- type --- */
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* --- scale --- */
  --container: 1240px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.01em;
  margin:0;
  text-transform:uppercase;
}

h1{ font-size:clamp(2.6rem, 5.6vw, 5.2rem); }
h2{ font-size:clamp(2rem, 3.6vw, 3.1rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.6rem); }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--brass);
  display:inline-block;
}

.readout{
  font-family:var(--font-mono);
  letter-spacing:0.02em;
}

/* Visually hidden but accessible */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:12px; top:-60px;
  background:var(--brass); color:var(--ink);
  padding:10px 16px; font-family:var(--font-mono); font-size:0.85rem;
  z-index:1000; transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

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

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:0.82rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:15px 26px;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:transform .35s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:14px; height:14px; flex:none; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn-primary{ background:var(--brass); color:var(--ink); }
.btn-primary:hover{ background:var(--brass-light); }
.btn-line{ border-color:var(--line-dark-strong); color:var(--concrete); }
.btn-line:hover{ border-color:var(--brass); color:var(--brass-light); }
.btn-ink{ border-color:var(--ink); color:var(--ink); }
.btn-ink:hover{ background:var(--ink); color:var(--paper); }
.btn-block{ width:100%; justify-content:center; }
@media (max-width:400px){
  .btn{ white-space:normal; text-align:center; }
}

/* Section rhythm */
.section{ padding:96px 0; position:relative; }
.section-tight{ padding:64px 0; }
@media (max-width:768px){
  .section{ padding:64px 0; }
  .section-tight{ padding:44px 0; }
}

.section-head{
  max-width:680px;
  margin-bottom:56px;
}
.section-head h2{ margin-top:14px; }
.section-head p{ margin-top:18px; color:var(--steel-600); font-size:1.05rem; max-width:56ch; }

.dark{ background:var(--ink); color:var(--concrete); }
.dark .steel-600, .dark p{ color:var(--steel-300); }
.dark h1,.dark h2,.dark h3,.dark h4{ color:var(--white); }
.dark .section-head p{ color:var(--steel-300); }

.on-brass{ background:var(--brass); color:var(--ink); }

/* Grid divider / blueprint texture used across dark sections */
.grid-field{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size:64px 64px;
  pointer-events:none;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0.15));
}

.corner-marks{ position:absolute; inset:24px; pointer-events:none; }
.corner-marks span{ position:absolute; width:18px; height:18px; }
.corner-marks span::before,.corner-marks span::after{ content:""; position:absolute; background:var(--brass); }
.corner-marks .c-tl{ top:0; left:0; } .corner-marks .c-tr{ top:0; right:0; }
.corner-marks .c-bl{ bottom:0; left:0; } .corner-marks .c-br{ bottom:0; right:0; }
.corner-marks span::before{ width:100%; height:1px; top:0; }
.corner-marks span::after{ width:1px; height:100%; left:0; }
.corner-marks .c-tr::before{ }
.corner-marks .c-bl::before{ top:auto; bottom:0; }
.corner-marks .c-br::before{ top:auto; bottom:0; }
.corner-marks .c-br::after{ left:auto; right:0; }
.corner-marks .c-tr::after{ left:auto; right:0; }

/* Defensive: grid item children default to a content-based minimum
   width in CSS Grid, which lets long unbreakable strings blow out
   narrow tracks instead of wrapping. Force them shrinkable. */
.hero-specs > *, .trust-strip .container > *, .grid-2 > *, .grid-3 > *,
.grid-4 > *, .doc-grid > *, .case-body > *, .intro-split > *,
.field-row > *, .footer-top > *, .license-item > *{
  min-width:0;
}

/* Reveal-on-scroll — progressive enhancement only.
   Content is fully visible by default; the "js" class (set by an
   inline head script) is what opts elements into the hidden-until-
   scrolled state, so a JS failure never hides real content. */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay:calc(var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}