/* Highview Strategies — shared site styles.
   Moved out of index.html on 2026-08-05, unchanged, when intelligence.html
   became the second real page. Page-specific rules stay inline on their own
   page; anything here is shared by every page and is the only copy. */
  :root{
    /* brand hexes — fixed */
    --ink:#16232E; --pine:#24564C; --pine-lite:#3E8E7E;
    --amber:#D9971F; --stone:#EAE3D6; --paper:#FBF9F4; --clay:#B5713C;
    --amber-text:#8A5A0D;          /* amber is a fill; this is the text-safe shade */

    /* light surface */
    --bg:#EAE3D6; --panel:#FBF9F4; --rule:#CFC4AE; --rule-soft:#DCD3C1;
    /* --mute is tuned to the STONE ground, the darker of the two light
       surfaces: #5B6A72 measured 4.39 there, just under AA for small text */
    --text:#1E2B34; --mute:#52616B; --head:#16232E;

    /* on the ink ground */
    --on-ink:#F4F1E9; --on-ink-mute:#9DAAB2; --ink-rule:rgba(244,241,233,.16);
    --ink-rule-1:#3A444C;   /* solid twin, for the cell rings */

    --display:"Archivo",system-ui,sans-serif;
    --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

    /* 1.333 — more contrast than a major third, so the figures can shout */
    --f-2:.7rem; --f-1:.82rem; --f0:1rem; --f1:1.333rem; --f2:1.777rem;
    --f3:2.369rem; --f4:3.157rem; --f5:4.209rem;

    --s1:8px; --s2:16px; --s3:24px; --s4:36px; --s5:56px; --s6:88px; --s7:132px;
    --rail:56px; --maxw:1180px;
  }
  @media (max-width:820px){ :root{ --rail:0px } }

  *{box-sizing:border-box}
  /* overflow-x belongs on html, NOT body: on body it makes the body its own
     scroll container, and window scroll events then never fire — which kills
     the rail's progress fill silently */
  html{scroll-behavior:smooth; overflow-x:hidden}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--body); font-size:var(--f0); line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  :focus-visible{outline:2px solid var(--amber); outline-offset:3px}

  /* wide gothic, used only where it should shout */
  h1,h2,.fig,.big{
    font-family:var(--display); font-variation-settings:"wdth" 118,"wght" 800;
    font-weight:800; letter-spacing:-.018em; line-height:1.02;
    color:var(--head); margin:0; text-wrap:balance;
  }
  h3{
    font-family:var(--display); font-variation-settings:"wdth" 112,"wght" 700;
    font-weight:700; font-size:var(--f1); line-height:1.14; letter-spacing:-.01em;
    color:var(--head); margin:0 0 var(--s2);
  }
  p{margin:0 0 var(--s2); max-width:68ch}

  /* the mono voice: every label, form code and receipt */
  .lab{
    font-family:var(--mono); font-size:var(--f-2); font-weight:500;
    letter-spacing:.13em; text-transform:uppercase; color:var(--mute);
    margin:0 0 var(--s2); display:block;
  }
  .lab.on-ink{color:var(--on-ink-mute)}
  .num{font-variant-numeric:tabular-nums}

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,48px)}
  .shell{padding-left:var(--rail)}

  /* ---------- the rail: the logo's sightline, made structural ---------- */
  .railbar{
    position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:30;
    background:var(--ink); border-right:1px solid rgba(0,0,0,.25);
    display:flex; flex-direction:column; align-items:center;
  }
  @media (max-width:820px){ .railbar{display:none} }
  .railbar .track{
    position:absolute; inset:0; width:3px; left:50%; transform:translateX(-50%);
    background:var(--ink-rule);
  }
  /* scaleY, not height: a percentage height here resolves to 0 against a
     fixed-position parent, and transform is cheaper to animate anyway */
  .railbar .fill{
    position:absolute; top:0; left:50%; width:3px; height:100%;
    transform:translateX(-50%) scaleY(0); transform-origin:top center;
    background:var(--amber);
  }
  .railbar .cap{
    position:absolute; bottom:var(--s3); left:50%; transform:translateX(-50%) rotate(180deg);
    writing-mode:vertical-rl; font-family:var(--mono); font-size:var(--f-2);
    letter-spacing:.22em; text-transform:uppercase; color:var(--on-ink-mute); white-space:nowrap;
  }

  /* ---------- masthead ---------- */
  .top{position:sticky; top:0; z-index:20; background:var(--ink); color:var(--on-ink)}
  .top .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:62px}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--on-ink)}
  .brand svg{display:block; flex:none}
  .brand b{
    font-family:var(--display); font-variation-settings:"wdth" 112,"wght" 700;
    font-size:1.02rem; letter-spacing:-.005em; line-height:1;
  }
  nav{display:flex; align-items:center; gap:var(--s3)}
  nav a{
    font-family:var(--mono); font-size:var(--f-2); letter-spacing:.11em;
    text-transform:uppercase; color:var(--on-ink-mute); text-decoration:none;
    padding-bottom:3px; border-bottom:2px solid transparent;
  }
  nav a:hover{color:var(--on-ink); border-bottom-color:var(--amber)}
  nav .cta{
    color:var(--ink); background:var(--amber); padding:8px 14px;
    border-bottom:0; font-weight:500; white-space:nowrap;
  }
  nav .cta:hover{background:#E9A62A; border-bottom:0}
  /* six links + the CTA need ~977px alongside the wordmark; hide them before
     the masthead is forced to wrap */
  @media (max-width:1040px){ nav .nav-link{display:none} }
  /* ~335px of usable width at 375: mark + wordmark + CTA only fit one line
     each if the wordmark gives back a little size and the CTA a little padding */
  @media (max-width:480px){
    .top .wrap{gap:var(--s2); min-height:56px}
    .brand{gap:9px}
    .brand svg{width:32px; height:23px}
    .brand b{font-size:.9rem; white-space:nowrap; font-variation-settings:"wdth" 105,"wght" 700}
    nav .cta{padding:7px 11px; letter-spacing:.06em}
  }

  /* ---------- hero: the thesis, and the proof, in one screen ---------- */
  .hero{background:var(--ink); color:var(--on-ink); padding:clamp(32px,4.5vw,60px) 0 0}
  .hero h1{
    color:var(--on-ink); font-size:clamp(2.4rem,6.4vw,var(--f5));
    max-width:20ch; margin:0 0 var(--s3);
  }
  .hero h1 .y{color:var(--amber)}
  .hero h1 .n{color:var(--on-ink-mute)}
  .hero .sub{color:var(--on-ink-mute); font-size:var(--f1); max-width:50ch; margin:0 0 var(--s3)}
  .hero .lab{color:var(--on-ink-mute)}

  /* the six-channel band — the signature */
  .band{
    border-top:1px solid var(--ink-rule); margin-top:var(--s4);
    display:grid; grid-template-columns:repeat(6,1fr);
  }
  .chan{
    padding:var(--s3) var(--s2) var(--s3) 0; border-right:1px solid var(--ink-rule);
    display:flex; flex-direction:column; gap:6px;
  }
  .chan:last-child{border-right:0}
  .chan .form{
    font-family:var(--mono); font-size:var(--f-2); letter-spacing:.1em;
    color:var(--amber); text-transform:uppercase;
  }
  .chan .fig{
    color:var(--on-ink); font-size:clamp(1.3rem,2.5vw,var(--f2));
    font-variation-settings:"wdth" 112,"wght" 800; font-variant-numeric:tabular-nums;
  }
  .chan .who{font-family:var(--mono); font-size:var(--f-2); color:var(--on-ink-mute); line-height:1.35}
  .chan.nil .fig{color:var(--on-ink-mute)}
  .bandnote{
    font-family:var(--mono); font-size:var(--f-2); color:var(--on-ink-mute);
    line-height:1.6; padding:var(--s2) 0 var(--s5); max-width:78ch; margin:0;
    border-top:1px solid var(--ink-rule);
  }
  @media (max-width:900px){ .band{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:520px){ .band{grid-template-columns:repeat(2,1fr)} }

  /* ---------- section scaffold ---------- */
  .sec{padding:var(--s6) 0; border-top:1px solid var(--rule)}
  .sec.dark{background:var(--ink); color:var(--on-ink); border-top:0}
  .sec.dark h2,.sec.dark h3{color:var(--on-ink)}
  .sec.dark p{color:var(--on-ink-mute)}
  .sec.panel{background:var(--panel)}
  h2{font-size:clamp(1.7rem,3.6vw,var(--f3)); max-width:22ch; margin:0 0 var(--s3)}
  .lede{font-size:var(--f1); line-height:1.45; color:var(--mute); max-width:54ch}
  .sec.dark .lede{color:var(--on-ink-mute)}
  .two{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(28px,5vw,var(--s6)); align-items:start}
  @media (max-width:880px){ .two{grid-template-columns:1fr} }

  /* ---------- data rows ---------- */
  .rows{border-top:1px solid var(--rule); margin-top:var(--s4)}
  .sec.dark .rows{border-color:var(--ink-rule)}
  .row{
    display:grid; grid-template-columns:minmax(0,1fr) 92px 92px 156px; gap:var(--s3);
    align-items:baseline; padding:14px 0; border-bottom:1px solid var(--rule-soft);
    text-decoration:none; color:inherit;
  }
  .row:hover{background:rgba(22,35,46,.045)}
  .row .nm{font-weight:600; color:var(--head); line-height:1.3}
  .row:hover .nm{color:var(--amber-text)}
  .row .n{font-family:var(--mono); font-size:var(--f-1); color:var(--mute); font-variant-numeric:tabular-nums}
  .row .n b{
    font-family:var(--display); font-variation-settings:"wdth" 112,"wght" 800;
    font-size:var(--f1); color:var(--head); margin-right:5px;
  }
  .row .n.hot b{color:var(--amber-text)}
  .row .n.zero b{color:var(--mute); font-variation-settings:"wdth" 112,"wght" 400}
  /* nowrap keeps every row one line tall, so the list scans as a column */
  .row .pay{font-family:var(--mono); font-size:var(--f-2); color:var(--mute); text-align:right; white-space:nowrap}
  .rowhead{
    display:grid; grid-template-columns:minmax(0,1fr) 92px 92px 156px; gap:var(--s3);
    padding:0 0 10px; border-bottom:1px solid var(--rule);
    font-family:var(--mono); font-size:var(--f-2); letter-spacing:.12em;
    text-transform:uppercase; color:var(--mute);
  }
  .rowhead span:last-child{text-align:right}
  @media (max-width:720px){
    .rowhead{display:none}
    /* flex, not grid: with grid the pay label drops to a third line of its own */
    .row{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; padding:16px 0}
    .row .nm{flex:1 0 100%}
    .row .pay{margin-left:auto; text-align:right}
  }

  /* ---------- stat strip ---------- */
  /* The hairline grid is drawn by RINGING each cell, not by showing a
     container background through 1px gaps. With the old technique an
     incomplete last row left the backing colour exposed as a blank slab —
     six service cards in four columns did exactly that. Rings meet in the
     gap to form one line, and an empty track simply shows nothing. */
  .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; margin-top:var(--s4)}
  .stat{background:var(--panel); padding:var(--s3) var(--s2); box-shadow:0 0 0 1px var(--rule)}
  .sec.dark .stat{background:var(--ink); box-shadow:0 0 0 1px var(--ink-rule-1)}
  /* DIRECT children only. A caption can carry an inline <span data-stat> around
     a figure inside its own sentence ("…from 803,117 filed spellings"), and a
     descendant selector would set display:block on it and break the line. */
  .stat > b{
    display:block; font-family:var(--display); font-variation-settings:"wdth" 118,"wght" 800;
    font-size:var(--f2); line-height:1; color:var(--head); font-variant-numeric:tabular-nums; margin-bottom:8px;
  }
  .sec.dark .stat > b{color:var(--on-ink)}
  .stat > span{display:block; font-family:var(--mono); font-size:var(--f-2); color:var(--mute); line-height:1.45}
  .sec.dark .stat > span{color:var(--on-ink-mute)}

  /* ---------- cards ---------- */
  .grid{display:grid; gap:1px; margin-top:var(--s4)}
  /* Column counts are explicit, not auto-fit: auto-fit picked 4 columns for
     the 6 services and left a ragged half-row. Each grid divides evenly at
     every breakpoint — 3 items by 3 then 1; 6 items by 3, 2, then 1. */
  .grid.c3{grid-template-columns:repeat(3,1fr)}
  .grid.c6{grid-template-columns:repeat(3,1fr)}
  .grid.c2{grid-template-columns:repeat(2,1fr)}
  @media (max-width:980px){ .grid.c6{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:860px){
    .grid.c3{grid-template-columns:1fr}
    .grid.c2{grid-template-columns:1fr}
  }
  @media (max-width:640px){ .grid.c6{grid-template-columns:1fr} }
  .card{background:var(--panel); padding:var(--s3); box-shadow:0 0 0 1px var(--rule)}
  .sec.dark .card{background:var(--ink); box-shadow:0 0 0 1px var(--ink-rule-1)}
  .card p{font-size:var(--f-1); color:var(--mute); margin:0; max-width:none}
  .sec.dark .card p{color:var(--on-ink-mute)}

  /* ---------- quotes ---------- */
  .pull{border-left:3px solid var(--amber); padding-left:var(--s3); margin:var(--s5) 0 0; max-width:62ch}
  .pull p{font-size:var(--f1); line-height:1.45; color:var(--on-ink); margin:0 0 var(--s2); max-width:none}
  /* used on BOTH grounds — light is the default, dark overrides */
  .attn{font-family:var(--mono); font-size:var(--f-2); color:var(--mute); font-style:normal; display:block; line-height:1.6}
  .attn b{color:var(--head); font-weight:500; display:block; letter-spacing:.04em}
  .sec.dark .attn{color:var(--on-ink-mute)}
  .sec.dark .attn b{color:var(--on-ink)}

  .quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; margin-top:var(--s4); align-items:stretch}
  .quote{background:var(--panel); padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2); box-shadow:0 0 0 1px var(--rule)}
  .quote p{font-size:var(--f-1); margin:0; max-width:none}
  .quote cite{margin-top:auto; font-family:var(--mono); font-size:var(--f-2); color:var(--mute); font-style:normal; line-height:1.5}
  .quote cite b{display:block; color:var(--head); font-weight:500; letter-spacing:.04em}
  .face{width:44px; height:44px; border-radius:50%; object-fit:cover; display:block}

  /* ---------- the testimony ---------- */
  .testimony{display:grid; grid-template-columns:150px minmax(0,1fr); gap:clamp(24px,4vw,var(--s5)); align-items:start}
  @media (max-width:760px){ .testimony{grid-template-columns:1fr} }
  .portrait{width:150px; height:150px; object-fit:cover; display:block; filter:grayscale(1) contrast(1.04)}
  .testimony blockquote{margin:0}
  .testimony blockquote p{font-size:var(--f1); line-height:1.5; color:var(--head); max-width:58ch}
  .testimony blockquote p.aside{font-size:var(--f-1); color:var(--mute); border-left:2px solid var(--rule); padding-left:var(--s2)}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-block; background:var(--amber); color:var(--ink);
    font-family:var(--mono); font-size:var(--f-1); font-weight:500;
    letter-spacing:.06em; text-transform:uppercase; padding:14px 22px;
    text-decoration:none; border:0; cursor:pointer;
  }
  .btn:hover{background:#E9A62A}
  .btn.line{background:transparent; color:var(--on-ink); box-shadow:inset 0 0 0 1px var(--ink-rule)}
  .btn.line:hover{background:rgba(244,241,233,.08)}
  .acts{display:flex; flex-wrap:wrap; gap:12px; padding-bottom:var(--s1)}
  /* the offer the second button is making, small enough not to compete with it */
  .actnote{
    font-family:var(--mono); font-size:var(--f-2); color:var(--on-ink-mute);
    line-height:1.6; margin:0; padding-bottom:var(--s2); max-width:62ch;
  }

  /* ---------- contact ---------- */
  form{display:grid; gap:var(--s2); margin-top:var(--s2)}
  label{display:grid; gap:6px; font-family:var(--mono); font-size:var(--f-2); letter-spacing:.1em; text-transform:uppercase; color:var(--on-ink-mute)}
  input,textarea{
    font-family:var(--body); font-size:var(--f0); color:var(--on-ink);
    background:rgba(244,241,233,.06); border:1px solid var(--ink-rule);
    padding:12px 14px; width:100%;
  }
  textarea{min-height:130px; resize:vertical}
  input:focus,textarea:focus{outline:2px solid var(--amber); outline-offset:0; border-color:transparent}
  .hp{position:absolute; left:-9999px}

  footer{background:var(--ink); color:var(--on-ink-mute); padding:var(--s5) 0 var(--s6)}
  footer .signoff{
    font-family:var(--display); font-variation-settings:"wdth" 118,"wght" 800;
    font-size:var(--f2); color:var(--on-ink); max-width:18ch; margin:0 0 var(--s4);
    border-left:3px solid var(--amber); padding-left:var(--s3); line-height:1.06;
  }
  footer .fine{font-family:var(--mono); font-size:var(--f-2); line-height:1.7; max-width:80ch; margin:0}
  footer .frow{display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between;
    border-top:1px solid var(--ink-rule); margin-top:var(--s4); padding-top:var(--s3);
    font-family:var(--mono); font-size:var(--f-2)}
  footer a{color:var(--on-ink)}

  /* ---------- motion: one orchestrated moment, then quiet ---------- */
  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0; transform:translateY(14px)}
    .reveal.in{opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1)}
    .chan{opacity:0; transform:translateY(10px)}
    .chan.in{opacity:1; transform:none; transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1)}
  }
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }