/* ============================================================
   True North Trades — design tokens
   Surveyor's / technical-drafting aesthetic: deep blueprint navy,
   warm neutral paper, one brass accent. No red/orange, no safety
   yellow, no condensed shouty type, no clipart tool icons.
   ============================================================ */

:root{
  --paper: #EFEDE5;         /* cool warm-grey paper */
  --card: #F7F6F0;          /* lifted card fill on paper */
  --ink: #12181F;           /* near-black navy-ink — text on paper */
  --navy: #1B2A38;          /* deep blueprint navy — dark sections */
  --navy-deep: #121D28;     /* darker navy, footer/darkest surface */
  --navy-line: #33485C;     /* lighter navy — borders/grid on dark sections */
  --steel: #5C6B78;         /* muted steel-blue-grey — secondary text on paper */
  --paper-dim: #B9C4CC;     /* dimmed paper-tone text on navy */
  --brass: #B8863E;         /* brass accent — CTA, links, compass needle */
  --brass-deep: #96692C;    /* brass hover/active */
  --line: #D6D1C3;          /* hairline border on paper */
  --line-strong: #C3BCA8;   /* stronger hairline, grid seams */

  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --font-label: 'IBM Plex Mono', 'Courier New', monospace;

  --wrap: 1180px;
  --gap-section: clamp(72px, 10vw, 128px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; }
.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

h1, h2, h3{
  font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em;
  margin: 0 0 0.5em; color: var(--ink);
}
h1{ font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2{ font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3{ font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
p{ margin: 0 0 1em; color: var(--ink); }
.lede{ font-size: 1.14rem; color: var(--steel); max-width: 46ch; }

.label{
  font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--steel);
}
.on-dark .label, .navy .label{ color: var(--paper-dim); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--brass); outline-offset: 3px;
}
.skip-link{ position:absolute; left:-999px; top:0; background:var(--brass); color:var(--navy-deep); padding:10px 16px; z-index:200; font-weight:700; }
.skip-link:focus{ left:16px; top:16px; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.94rem;
  padding: 14px 26px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 140ms var(--ease-out);
}
.btn:hover{ background: var(--ink); color: var(--paper); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--brass); color: var(--navy-deep); border-color: var(--brass); font-weight: 700; }
.btn-primary:hover{ background: var(--brass-deep); border-color: var(--brass-deep); color: var(--navy-deep); }
.btn-ghost{ border-color: var(--navy-line); color: var(--paper); }
.btn-ghost:hover{ background: var(--paper); color: var(--navy); border-color: var(--paper); }

.link-brass{ color: var(--brass-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-brass:hover{ color: var(--ink); }
.on-dark .link-brass, .navy .link-brass{ color: var(--brass); }
.on-dark .link-brass:hover, .navy .link-brass:hover{ color: var(--paper); }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(18, 24, 31, 0.94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--navy-line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 16px 24px; }
.wordmark{ font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--paper); text-decoration: none; letter-spacing: -0.01em; display:flex; align-items:center; gap:9px; }
.wordmark .mark{ width: 22px; height: 22px; flex-shrink:0; }
.wordmark .mark circle, .wordmark .mark path{ fill:none; stroke: var(--brass); stroke-width: 1.6; }
.main-nav{ display:flex; align-items:center; gap: 30px; }
.main-nav a{ font-family: var(--font-label); font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; text-decoration:none; color: var(--paper-dim); padding-bottom:4px; border-bottom:1px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color: var(--paper); border-bottom-color: var(--brass); }
.header-actions{ display:flex; align-items:center; gap:16px; }
.header-actions .btn-primary .cta-short{ display:none; }
.header-phone{ font-family: var(--font-label); font-size: 0.86rem; color: var(--paper); text-decoration:none; display:flex; align-items:center; gap:7px; }
.header-phone .dot{ width:7px; height:7px; border-radius:50%; background:#7FBF7F; display:inline-block; flex-shrink:0; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:22px; height:1.5px; background: var(--paper); }

/* ---------- Hero (navy, full-bleed) ---------- */
.hero{ background: var(--navy); color: var(--paper); padding: clamp(56px,8vw,96px) 0 clamp(72px,10vw,120px); overflow:hidden; }
.hero-status{
  display:inline-flex; align-items:center; gap:9px; font-family: var(--font-label); font-size:0.76rem; letter-spacing:0.06em;
  color: var(--paper-dim); border:1px solid var(--navy-line); padding:8px 14px; margin-bottom: 28px;
}
.hero-status .dot{ width:7px; height:7px; border-radius:50%; background:#7FBF7F; flex-shrink:0; animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
@media (prefers-reduced-motion: reduce){ .hero-status .dot{ animation:none; } }
.hero h1{ color: var(--paper); max-width: 13ch; }
.hero .lede{ color: var(--paper-dim); margin-top: 18px; }
.hero-actions{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
.hero-inner{ display:grid; grid-template-columns: 1fr 0.85fr; gap: 48px; align-items:center; }

/* ---------- Compass rose (signature) ---------- */
.compass-wrap{ position: relative; aspect-ratio: 1/1; }
.compass-art{ width:100%; height:100%; display:block; }
.compass-art .ring{ fill:none; stroke: var(--navy-line); stroke-width: 1; }
.compass-art .ring-outer{ stroke: var(--paper-dim); stroke-width: 1.2; }
.compass-art .tick-major{ stroke: var(--brass); stroke-width: 1.6; }
.compass-art .tick-minor{ stroke: var(--navy-line); stroke-width: 1; }
.compass-art .needle{ fill: var(--brass); }
.compass-art .needle-s{ fill: var(--navy-line); }
.compass-art .hub{ fill: var(--paper); stroke: var(--brass); stroke-width: 1.4; }
.compass-art path, .compass-art circle{
  stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.compass-art .needle, .compass-art .needle-s, .compass-art .hub{ transition: opacity 0.8s var(--ease-out) 1.1s; opacity: 0; }
.compass-art.is-visible path, .compass-art.is-visible circle{ stroke-dashoffset: 0; }
.compass-art.is-visible .needle, .compass-art.is-visible .needle-s, .compass-art.is-visible .hub{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .compass-art path, .compass-art circle{ transition:none; stroke-dashoffset:0; }
  .compass-art .needle, .compass-art .needle-s, .compass-art .hub{ transition:none; opacity:1; }
}

.compass-point{
  position: absolute; display:flex; flex-direction:column; align-items:flex-start; gap: 2px;
  text-decoration:none; color: var(--paper);
}
.compass-point .bearing{ font-family: var(--font-label); font-size:0.68rem; letter-spacing:0.06em; color: var(--brass); }
.compass-point .service-name{ font-family: var(--font-display); font-weight:700; font-size:0.98rem; white-space:nowrap; }
.compass-point:hover .service-name{ text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset:3px; }
.point-n{ top: -6%; left: 50%; transform: translateX(-50%); align-items:center; text-align:center; }
.point-e{ top: 50%; right: -4%; transform: translateY(-50%); align-items:flex-end; text-align:right; }
.point-s{ bottom: -6%; left: 50%; transform: translateX(-50%); align-items:center; text-align:center; }
.point-w{ top: 50%; left: -4%; transform: translateY(-50%); }

/* ---------- Section scaffolding ---------- */
section{ padding: var(--gap-section) 0; }
.section-head{ max-width: 640px; margin-bottom: 52px; }
.section-head .label{ margin-bottom: 12px; display:block; }
.navy{ background: var(--navy); color: var(--paper); }
.navy-deep{ background: var(--navy-deep); color: var(--paper); }
.navy h1, .navy h2, .navy h3, .navy-deep h1, .navy-deep h2, .navy-deep h3{ color: var(--paper); }
.navy p, .navy-deep p{ color: var(--paper-dim); }

/* ---------- Service rows (compass-labelled) ---------- */
.service-row{
  display:grid; grid-template-columns: 140px 1fr; gap: 32px; align-items:start;
  padding: 36px 0; border-top: 1px solid var(--line);
}
.service-row:last-child{ border-bottom: 1px solid var(--line); }
.service-row .bearing-block{ display:flex; flex-direction:column; gap:6px; }
.service-row .bearing-block .compass-letter{ font-family: var(--font-display); font-weight:700; font-size:2.4rem; color: var(--brass-deep); line-height:1; }
.service-row .bearing-block .bearing{ font-family: var(--font-label); font-size:0.74rem; color: var(--steel); }
.service-row-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.service-includes{ list-style:none; margin:16px 0 20px; padding:0; display:grid; gap:7px; }
.service-includes li{ font-size:0.94rem; color: var(--steel); padding-left:18px; position:relative; }
.service-includes li::before{ content:'—'; position:absolute; left:0; color: var(--brass-deep); }

/* ---------- Spec plate (credentials) ---------- */
.spec-plate{ border: 1.5px solid var(--navy-line); background: var(--navy-deep); padding: 28px 24px; }
.spec-plate .plate-title{ font-family: var(--font-label); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--brass); margin-bottom:16px; }
.spec-plate dl{ display:grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin:0; }
.spec-plate dt{ font-family: var(--font-label); font-size:0.84rem; color: var(--paper-dim); }
.spec-plate dd{ font-family: var(--font-label); font-size:0.84rem; color: var(--paper); margin:0; text-align:right; }

/* ---------- Credentials strip ---------- */
.credentials-strip{ display:grid; grid-template-columns: repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.credentials-strip .cred{ padding:26px 20px; text-align:center; border-left:1px solid var(--line); }
.credentials-strip .cred:first-child{ border-left:none; }
.credentials-strip .cred-num{ font-family: var(--font-display); font-weight:700; font-size:2rem; color: var(--brass-deep); display:block; }
.credentials-strip .cred-label{ font-family: var(--font-label); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--steel); }

/* ---------- Work grid (Our Work page) ---------- */
.work-grid{ display:grid; grid-template-columns: repeat(3,1fr); background: var(--line-strong); gap:1px; border:1px solid var(--line-strong); }
.work-grid.cols-2{ grid-template-columns: repeat(2,1fr); }
.work-card{ background: var(--card); padding: 26px 24px; display:flex; flex-direction:column; gap:10px; }
.work-card .bearing{ font-family: var(--font-label); font-size:0.7rem; color: var(--brass-deep); }
.work-card h3{ margin: 2px 0 0; }
.work-card p{ color: var(--steel); font-size:0.94rem; flex-grow:1; }
.work-card .job-meta{ font-family: var(--font-label); font-size: 0.76rem; color: var(--steel); border-top: 1px solid var(--line); padding-top:10px; margin-top:4px; }

/* ---------- CTA banner ---------- */
.cta-banner{ text-align:center; }
.cta-banner .wrap{ max-width: 680px; }

/* ---------- Contact / form ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.split-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.contact-form{ display:flex; flex-direction:column; gap:18px; }
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row label{ font-family: var(--font-label); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--steel); }
.form-row input, .form-row textarea, .form-row select{
  font-family: var(--font-body); font-size:1rem; padding:12px 14px; border:1px solid var(--line-strong); background: var(--card); color: var(--ink);
}
.form-row textarea{ resize:vertical; min-height:110px; }
.hours-list{ font-family: var(--font-label); font-size:0.86rem; }
.hours-list div{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); }
.contact-map{ margin-top:24px; border:1px solid var(--line-strong); aspect-ratio:4/3; }
.contact-map iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy-deep); color: var(--paper); border-top: 1px solid var(--navy-line); }
.footer-inner{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:32px; padding:56px 0 32px; }
.footer-tagline{ color: var(--paper-dim); max-width:32ch; }
.footer-col h4{ font-family: var(--font-label); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--paper-dim); margin:0 0 14px; }
.footer-col a{ display:block; text-decoration:none; padding:5px 0; color: var(--paper); }
.footer-col a:hover{ color: var(--brass); }
.footer-legal{ border-top:1px solid var(--navy-line); padding:18px 0; font-size:0.82rem; color: var(--paper-dim); }
.footer-legal .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.cookie-settings-link{ background:none; border:none; color: var(--paper-dim); text-decoration:underline; text-underline-offset:2px; cursor:pointer; font:inherit; padding:0; }

/* ---------- Page header (non-home pages) ---------- */
.page-hero{ background: var(--navy); color: var(--paper); padding: clamp(48px,7vw,80px) 0 clamp(40px,6vw,56px); }
.page-hero .label{ margin-bottom:16px; display:block; }
.page-hero h1{ color: var(--paper); }
.page-hero .lede{ color: var(--paper-dim); }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Cookie consent banner ---------- */
.cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:999; background: var(--navy-deep); border-top:2px solid var(--brass); }
.cookie-banner-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; }
.cookie-banner-inner p{ margin:0; color: var(--paper); max-width:62ch; font-size:0.92rem; }
.cookie-banner-inner a{ color: var(--paper); text-decoration:underline; text-underline-offset:2px; }
.cookie-banner-actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-banner-actions .btn{ padding:10px 18px; font-size:0.88rem; }
.cookie-banner-actions .btn-primary{ background: var(--brass); color: var(--navy-deep); border-color: var(--brass); }
.cookie-banner-actions .btn-primary:hover{ background: var(--paper); border-color: var(--paper); color: var(--navy-deep); }
.cookie-banner-actions .btn-secondary{ color: var(--paper); border-color: var(--paper); background:transparent; }
.cookie-banner-actions .btn-secondary:hover{ background: var(--paper); color: var(--navy-deep); }
@media (max-width:640px){ .cookie-banner-inner{ flex-direction:column; align-items:stretch; text-align:center; } .cookie-banner-actions{ justify-content:center; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .hero-inner{ grid-template-columns: 1fr; }
  .compass-wrap{ max-width: 320px; margin: 48px auto 0; }
  .service-row{ grid-template-columns: 1fr; }
  .contact-grid, .split-grid{ grid-template-columns: 1fr; }
  .work-grid, .work-grid.cols-2{ grid-template-columns: 1fr; }
  .credentials-strip{ grid-template-columns: repeat(2,1fr); }
  .credentials-strip .cred:nth-child(3){ border-left:none; }
  .footer-inner{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .header-phone{ display:none; }
  .header-actions .btn-primary .cta-full{ display:none; }
  .header-actions .btn-primary .cta-short{ display:inline; }
}
@media (max-width: 520px){
  .header-inner{ padding:14px 18px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .credentials-strip{ grid-template-columns: 1fr 1fr; }
}

.main-nav.is-open{
  display:flex; flex-direction:column; gap:0;
  position:fixed; inset: 0 0 0 25%; top:60px;
  background: var(--navy-deep); border-left:1px solid var(--navy-line);
  padding:24px; z-index:99;
}
.main-nav.is-open a{ padding:14px 0; border-bottom:1px solid var(--navy-line); width:100%; }