/* =========================================================================
   LITER'S INC. — industrial design system
   Editorial-technical: hairline rules, squared geometry, spec typography.
   Palette is white-led with #056839 as a disciplined accent.
   ========================================================================= */

:root{
  /* brand */
  --green:#056839;
  --green-d:#04512c;
  --green-l:#0b8048;
  --green-wash:#eff4f1;
  --green-line:rgba(5,104,57,.22);

  /* neutrals — cool, not warm */
  --ink:#0d1214;
  --ink-2:#182024;
  --graphite:#2b3438;
  --steel:#5a666b;
  /* was #8b979b — that put table headers, mono labels and notes at ~2.8:1,
     under the 4.5:1 small text needs. Darkened to clear it. */
  --steel-2:#646f72;
  /* brand green is only ~3.8:1 on the ink surfaces; small labels there use this */
  --green-on-dark:#3faa70;
  --line:#e1e5e4;
  --line-2:#eef1f0;
  --paper:#ffffff;
  --paper-2:#f6f8f7;
  --paper-3:#edf0ef;

  --r:2px;

  --wrap:1300px;
  --gut:clamp(1.25rem,4.5vw,4rem);

  /* one precise easing family — no overshoot anywhere */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --vel:0; --vel-blur:0px; --vel-stretch:1;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
/* Scroll lock for the nav overlay and the page transition. Lenis supplies its
   own on pointer devices; phones scroll natively, so this class is what stops
   them. overflow alone is not honoured for touch in iOS Safari - touch-action
   is - and the overlay re-enables it so a long menu can still scroll itself. */
html.locked,html.locked body{overflow:hidden}
html.locked body{touch-action:none}
.nav-sheet{touch-action:auto}

body{
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.62;
  color:var(--steel);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1,"liga" 1,"cv11" 1;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
ul{list-style:none;padding:0}
::selection{background:var(--green);color:#fff}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--green);color:#fff;padding:.8rem 1.2rem;font-weight:600}
.skip:focus{left:1rem;top:1rem}

/* =========================================================================
   TYPE
   ========================================================================= */
h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.032em;
  line-height:1.02;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,5.6vw,4.9rem);letter-spacing:-.038em}
h2{font-size:clamp(1.85rem,3.5vw,3rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.32rem);letter-spacing:-.02em;line-height:1.18}
h4{font-size:1rem;letter-spacing:-.015em}
p{text-wrap:pretty}
.lead{font-size:clamp(1.02rem,1.28vw,1.2rem);line-height:1.58;color:var(--graphite)}
.measure{max-width:60ch}
.measure-s{max-width:46ch}
strong,b{color:var(--ink);font-weight:600}

/* mono label — the technical voice of the site */
.label{
  font-family:var(--f-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--green);
  display:flex;align-items:center;gap:.7rem;
}
.label em{font-style:normal;color:var(--steel-2)}
.label::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}
.label.solo::after{display:none}
.on-dark .label,.sec-ink .label{color:var(--green-l)}
.on-dark .label::after,.sec-ink .label::after{background:rgba(255,255,255,.16)}
.on-dark .label em,.sec-ink .label em{color:rgba(255,255,255,.5)}

.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* =========================================================================
   LAYOUT
   ========================================================================= */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-tight{max-width:1060px}
.sec{position:relative;padding-block:clamp(4.5rem,9vw,8rem)}
.sec-tight{position:relative;padding-block:clamp(3rem,5.5vw,4.75rem)}
.sec-paper{background:var(--paper-2)}
.sec-ink{background:var(--ink);color:rgba(255,255,255,.72)}
.sec-ink h1,.sec-ink h2,.sec-ink h3,.sec-ink h4{color:#fff}
.sec-ink .lead{color:rgba(255,255,255,.78)}
.sec-green{background:var(--green);color:rgba(255,255,255,.86)}
.sec-green h1,.sec-green h2,.sec-green h3{color:#fff}
.sec-green .lead{color:rgba(255,255,255,.9)}
.hair{height:1px;background:var(--line);border:0}
.sec-ink .hair,.sec-green .hair{background:rgba(255,255,255,.16)}

.mt-xs{margin-top:.5rem}.mt-s{margin-top:1rem}.mt-m{margin-top:2rem}.mt-l{margin-top:3.2rem}
.grid{display:grid;gap:clamp(1.4rem,2.4vw,2.2rem)}
/* grid items default to min-width:auto, which lets wide content push the
   track past the viewport — pin it so columns can actually shrink */
.grid>*,.qgrid>*{min-width:0}
/* wider min so detail cards sit 2-up rather than cramming 3 across */
.g-2{grid-template-columns:repeat(auto-fit,minmax(430px,1fr))}
@media(max-width:520px){.g-2{grid-template-columns:1fr}}
.g-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
.row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.stack{display:grid;gap:1rem}
.split-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.split-2{grid-template-columns:1fr}}
/* quote form + contact rail */
.qgrid{display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(1.6rem,3.5vw,3rem);align-items:start}
@media(max-width:900px){.qgrid{grid-template-columns:1fr}}

/* Section heads are centred. Standalone headings sitting hard left with a
   wide empty right-hand side read as broken rather than as a layout. */
.sec-head{max-width:64ch;margin-inline:auto;text-align:center}
.sec-head h2{margin-top:1.1rem}
.sec-head .lead{margin-top:1rem;margin-inline:auto}
.sec-head .label{justify-content:center}
.sec-head .label::after{display:none}
.sec-head .label::before{content:"";height:1px;width:34px;background:var(--line)}
.sec-ink .sec-head .label::before,.sec-green .sec-head .label::before{background:rgba(255,255,255,.22)}
/* left-aligned variant for two-column blocks */
.sec-head.left{margin-inline:0;text-align:left}
.sec-head.left .lead{margin-inline:0}
.sec-head.left .label{justify-content:flex-start}

/* =========================================================================
   BUTTONS — squared, deliberate
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-body);font-size:.9rem;font-weight:600;letter-spacing:.01em;
  padding:.92rem 1.5rem;border-radius:var(--r);
  border:1px solid transparent;position:relative;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn svg{width:15px;height:15px;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-d)}
.btn-line{border-color:var(--line);color:var(--ink);background:var(--paper)}
.btn-line:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--graphite)}
.btn-onink{background:#fff;color:var(--ink)}
.btn-onink:hover{background:var(--green);color:#fff}
.btn-ghost-d{border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost-d:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-lg{padding:1.05rem 1.9rem;font-size:.95rem}

/* text link with rule */
.tlink{display:inline-flex;align-items:center;gap:.5rem;color:var(--green);font-weight:600;font-size:.92rem;
  border-bottom:1px solid var(--green-line);padding-bottom:2px;transition:border-color .4s var(--ease)}
.tlink:hover{border-bottom-color:var(--green)}
.tlink svg{width:14px;height:14px;transition:transform .5s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* tag — squared, not a pill */
.tag{display:inline-block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.32rem .6rem;border:1px solid var(--line);border-radius:var(--r);color:var(--steel);background:var(--paper)}
.tag.g{border-color:var(--green-line);color:var(--green);background:var(--green-wash)}
.tag.d{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.06)}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:92px;padding-inline:var(--gut);
  background:rgba(255,255,255,0);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .55s var(--ease);
}
.nav.floated{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.nav.tucked{transform:translateY(-100%)}
.nav-logo img{height:54px;width:auto}
@media(max-width:520px){.nav{height:78px}.nav-logo img{height:42px}}
.nav-menu{display:flex;align-items:center;gap:.35rem}
.nav-menu a{
  position:relative;font-size:.87rem;font-weight:500;color:var(--graphite);
  padding:.5rem .78rem;border-radius:var(--r);
  transition:color .35s var(--ease),background .35s var(--ease);
}
.nav-menu a::after{
  content:"";position:absolute;left:.78rem;right:.78rem;bottom:.28rem;height:1px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav-menu a:hover{color:var(--ink)}
.nav-menu a:hover::after,.nav-menu a.on::after{transform:scaleX(1)}
.nav-menu a.on{color:var(--green);font-weight:600}
/* Over a dark hero the bar is transparent, so graphite links disappear into
   the artwork. Flip the whole bar to light until it turns solid on scroll. */
.nav.over-hero:not(.floated) .nav-menu a{color:rgba(255,255,255,.86)}
.nav.over-hero:not(.floated) .nav-menu a:hover,
.nav.over-hero:not(.floated) .nav-menu a.on{color:#fff}
.nav.over-hero:not(.floated) .nav-menu a.on::after,
.nav.over-hero:not(.floated) .nav-menu a::after{background:#fff}
/* the mark is brand green, which is near-invisible on near-black — run it
   white while it sits over the hero, and let it return to green when solid */
.nav.over-hero:not(.floated) .nav-logo img{filter:brightness(0) invert(1)}
.nav.over-hero:not(.floated) .nav-burger{background:transparent;border-color:rgba(255,255,255,.34)}
.nav.over-hero:not(.floated) .nav-burger i,
.nav.over-hero:not(.floated) .nav-burger i::before,
.nav.over-hero:not(.floated) .nav-burger i::after{background:#fff}

.nav-burger{display:none;width:42px;height:42px;place-items:center;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.nav-burger i,.nav-burger i::before,.nav-burger i::after{display:block;width:17px;height:1.5px;background:var(--ink);transition:transform .45s var(--ease),opacity .3s}
.nav-burger i{position:relative}
.nav-burger i::before,.nav-burger i::after{content:"";position:absolute;left:0}
.nav-burger i::before{top:-5.5px}.nav-burger i::after{top:5.5px}
.nav-burger[aria-expanded=true] i{background:transparent}
.nav-burger[aria-expanded=true] i::before{transform:translateY(5.5px) rotate(45deg)}
.nav-burger[aria-expanded=true] i::after{transform:translateY(-5.5px) rotate(-45deg)}

.nav-sheet{
  position:fixed;inset:92px 0 auto 0;z-index:119;
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:.5rem var(--gut) 1.6rem;
  display:flex;flex-direction:column;
  clip-path:inset(0 0 100% 0);pointer-events:none;
  transition:clip-path .6s var(--ease);
  max-height:calc(100vh - 92px);overflow-y:auto;
}
@media(max-width:520px){.nav-sheet{inset:78px 0 auto 0;max-height:calc(100vh - 78px)}}
.nav-sheet.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.nav-sheet a{
  padding:.95rem 0;border-bottom:1px solid var(--line-2);
  font-family:var(--f-display);font-size:1.35rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.nav-sheet.open a{opacity:1;transform:none}
.sheet-foot{margin-top:1.3rem;display:grid;gap:.5rem}
.sheet-foot a{font-family:var(--f-mono);font-size:.82rem;font-weight:500;border:0;padding:.1rem 0;letter-spacing:0}

@media(max-width:1120px){
  .nav-menu,.nav-cta{display:none}
  .nav-burger{display:grid}
}

/* PORTAL:START ============================================================
   CUSTOMER PORTAL - temporary link to Fast-Weigh's customer login.
   Fast-Weigh is being retired. To HIDE it: blank portal.url in content.json
   (or the Website Editor). To REMOVE it: `git grep -n PORTAL` lists every
   block - delete each START..END pair (9 pages x3, this CSS, content.js,
   content.json, admin.html).
   ========================================================================= */
/* sits as a quieter partner beside Request a Quote; the menu re-centres between */
.nav:has(.nav-portal) .nav-menu{margin-inline:auto}
.nav-portal{
  display:inline-flex;align-items:center;gap:.55rem;margin-right:-.8rem;
  padding:.92rem 1.05rem;border:1px solid var(--line);border-radius:var(--r);
  font-size:.9rem;font-weight:600;letter-spacing:.01em;color:var(--ink);white-space:nowrap;
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.nav-portal .ico{width:16px;height:16px;flex:none;color:var(--green);transition:color .4s var(--ease)}
.nav-portal .ext{width:11px;height:11px;flex:none;opacity:.5;transition:transform .45s var(--ease),opacity .35s}
.nav-portal:hover{border-color:var(--ink)}
.nav-portal:hover .ext,.nav-portal:focus-visible .ext{transform:translate(2px,-2px);opacity:1}
.nav.over-hero:not(.floated) .nav-portal{color:#fff;border-color:rgba(255,255,255,.34)}
.nav.over-hero:not(.floated) .nav-portal .ico{color:#fff}
.nav.over-hero:not(.floated) .nav-portal:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* Between the hamburger breakpoint and ~1280px the full label squeezes Request a Quote
   onto two lines. Shorten to "Portal"; "Customer" stays readable to screen readers. */
@media(max-width:1279px){
  .nav-portal .pl-a{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-portal .ext{display:none}
}
/* Below ~1200px even "Portal" squeezes Request a Quote onto two lines, and an
   icon-only button would be ambiguous. Collapse to the hamburger a little earlier
   instead - the menu sheet carries a labelled portal row. Keyed on :has(), so
   removing the portal markup restores the original 1120px breakpoint. */
@media(max-width:1199px){
  .nav:has(.nav-portal) .nav-menu,.nav:has(.nav-portal) .nav-cta,.nav-portal{display:none}
  .nav:has(.nav-portal) .nav-burger{display:grid}
}

/* mobile menu: a distinct row, not another big nav link, since it leaves the site */
.nav-sheet a.sheet-portal{
  display:flex;align-items:center;gap:.7rem;margin-top:1.1rem;padding:.9rem 1rem;
  border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--f-body);font-size:.95rem;font-weight:600;letter-spacing:0;color:var(--ink);
}
.sheet-portal .ico{width:18px;height:18px;flex:none;color:var(--green)}
.sheet-portal .ext{width:12px;height:12px;flex:none;margin-left:auto;opacity:.5}

.foot-portal{display:inline-flex;align-items:center;gap:.4rem}
.foot-portal .ext{width:10px;height:10px;opacity:.6}
/* PORTAL:END */

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative;min-height:clamp(620px,94vh,980px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:-6% 0;z-index:0;will-change:transform}
.hero-bg video,.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the still carries first paint; a real hero video fades over it once decoded */
.hero-bg img{animation:heroDrift 30s ease-in-out infinite alternate}
.hero-bg video{opacity:0;transition:opacity 1.4s var(--ease)}
.hero-bg video.ready{opacity:1}
@keyframes heroDrift{
  from{transform:scale(1.03) translate3d(0,0,0)}
  to{transform:scale(1.10) translate3d(-1.4%,-1.2%,0)}
}
/* directional scrim: dark where the type sits, open on the right so the
   photograph still reads as a photograph */
.hero-bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(11,16,19,.70) 0%,rgba(11,16,19,.20) 30%,rgba(11,16,19,.58) 66%,rgba(11,16,19,.95) 100%),
    linear-gradient(90deg,rgba(11,16,19,.80) 0%,rgba(11,16,19,.34) 44%,rgba(11,16,19,0) 74%);
}
@media(prefers-reduced-motion:reduce){.hero-bg img{animation:none}}
/* bottom padding keeps the stat strip clear of the video-slot badge pinned
   to the bottom-left of the hero */
.hero-inner{position:relative;z-index:2;padding-block:9rem 3.6rem;width:100%}
.hero h1{color:#fff;max-width:17ch}
.hero .lead{color:rgba(255,255,255,.8);max-width:52ch;margin-top:1.5rem}
.hero-cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.8rem}
.hero-label{color:var(--green-l)}
.hero-label::after{background:rgba(255,255,255,.2)}
.hero-label em{color:rgba(255,255,255,.55)}

/* datasheet strip under the hero headline */
.specbar{
  position:relative;z-index:2;margin-top:clamp(2.5rem,5vw,4.5rem);
  border-top:1px solid rgba(255,255,255,.18);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.specbar div{padding:1.4rem 1.2rem 1.6rem;border-right:1px solid rgba(255,255,255,.12);text-align:center}
.specbar div:last-child{border-right:0}
.specbar b{
  display:block;font-family:var(--f-display);font-size:clamp(1.6rem,2.6vw,2.3rem);
  font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1;
}
.specbar span{
  display:block;margin-top:.5rem;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
@media(max-width:820px){
  .specbar{grid-template-columns:repeat(2,1fr)}
  .specbar div{border-bottom:1px solid rgba(255,255,255,.12);padding-right:1rem}
  .specbar div:nth-child(2n){border-right:0}
}

.vflag{
  position:absolute;left:var(--gut);bottom:1.1rem;z-index:3;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--green);padding:.34rem .6rem;border-radius:var(--r);
}

/* page hero (inner pages) */
.phero{position:relative;padding:clamp(8rem,13vw,11rem) 0 clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line)}
.phero h1{max-width:19ch}
.phero .lead{margin-top:1.3rem;max-width:58ch}
.crumb{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-2);margin-bottom:1.4rem}
.crumb a:hover{color:var(--green)}

/* =========================================================================
   MARQUEE (materials ribbon) — restrained, mono, hairline
   ========================================================================= */
.ribbon{border-block:1px solid var(--line);background:var(--paper);overflow:hidden;padding:.95rem 0}
.ribbon .track{display:flex;gap:2.6rem;width:max-content;animation:slide 46s linear infinite}
.ribbon i{
  font-family:var(--f-mono);font-style:normal;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-2);white-space:nowrap;display:flex;align-items:center;gap:2.6rem;
}
.ribbon i::after{content:"";width:3px;height:3px;background:var(--green);border-radius:50%}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ribbon .track{animation:none}}

/* =========================================================================
   SPEC TABLE — the technical centrepiece
   ========================================================================= */
.spec-wrap{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow-x:auto}
table.spec{width:100%;border-collapse:collapse;min-width:760px}
table.spec caption{
  text-align:left;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-2);
}
table.spec th{
  text-align:left;padding:.85rem 1.3rem;border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-weight:500;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel-2);white-space:nowrap;background:var(--paper-2);
}
table.spec td{padding:1.05rem 1.3rem;border-bottom:1px solid var(--line-2);font-size:.92rem;vertical-align:top}
table.spec tr:last-child td{border-bottom:0}
table.spec tbody tr{transition:background .35s var(--ease)}
table.spec tbody tr:hover{background:var(--paper-2)}
table.spec .desig{font-family:var(--f-mono);font-weight:700;color:var(--green);font-size:.9rem;white-space:nowrap}

/* Tablets and small laptops: the 760px minimum is what makes the table wider
   than the screen. Drop it and the columns simply narrow, with the two mono
   columns allowed to wrap - a real table, no sideways scroll. */
@media(max-width:820px){
  table.spec{min-width:0}
  table.spec th,table.spec td{padding-inline:.9rem}
  table.spec .desig,table.spec .num{white-space:normal}
}

/* Phones: a four-column schedule cannot shrink to 320px and stay readable, so
   the 760px minimum used to make the whole table a sideways scroll - content
   off the edge of the screen, which is what it was meant to avoid. Each row
   becomes a block instead and every value carries its column heading, written
   into data-label on the cell. The heading row is then redundant. */
@media(max-width:620px){
  .spec-wrap{overflow-x:visible}
  table.spec{min-width:0;display:block}
  /* A table-caption inside a block table shrinks to its narrowest word. */
  table.spec caption{display:block;padding:.95rem 1.1rem;letter-spacing:.1em;line-height:1.5}
  table.spec thead{display:none}
  table.spec tbody,table.spec tr,table.spec td{display:block}
  table.spec tr{padding:.95rem 1.1rem;border-bottom:1px solid var(--line-2)}
  table.spec tbody tr:last-child{border-bottom:0}
  table.spec tbody tr:hover{background:none}
  table.spec td{padding:0;border:0;font-size:.9rem}
  table.spec td+td{margin-top:.6rem}
  table.spec td::before{
    content:attr(data-label);display:block;margin-bottom:.1rem;
    font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;
    text-transform:uppercase;color:var(--steel-2);
  }
  /* A label on its own is meaningless if the cell is empty. */
  table.spec td:empty{display:none}
  /* These two are held on one line on a wide table; here they need to wrap. */
  table.spec .desig,table.spec .num{white-space:normal}
}
table.spec .nm{color:var(--ink);font-weight:600}
table.spec .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}

/* =========================================================================
   PANELS / CARDS — hairline, squared
   ========================================================================= */
.panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,2.4vw,2rem);
  transition:border-color .5s var(--ease),transform .6s var(--ease);
}
.panel:hover{border-color:var(--steel-2)}
.panel .ic{width:34px;height:34px;display:grid;place-items:center;color:var(--green);margin-bottom:1.1rem}
.panel .ic svg{width:26px;height:26px}
.panel h3{margin-bottom:.5rem}
.panel p{font-size:.94rem}

/* numbered process step */
.step{border-top:2px solid var(--ink);padding-top:1.2rem}
.step .n{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;color:var(--green);display:block;margin-bottom:.9rem}
.step h3{margin-bottom:.45rem}
.step p{font-size:.94rem}
.sec-ink .step{border-top-color:var(--green-l)}
/* small green labels on the ink surfaces need the lifted green to stay legible */
.sec-ink .step .n,.sec-ink .label,.band .label,.est-out .readout .k,
.sec-ink .media-cap b,.band .media-cap b{color:var(--green-on-dark)}
.sec-green .step{border-top-color:rgba(255,255,255,.5)}
.sec-green .step .n{color:rgba(255,255,255,.7)}
.sec-green .step p{color:rgba(255,255,255,.82)}

/* media frame */
.frame{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper-3)}
/* direct children only, so a nested .media can own its own ratio */
.frame>img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.frame.wide>img{aspect-ratio:16/9}
.sec-ink .frame,.band .frame{border-color:rgba(255,255,255,.14)}

/* site (location) card */
.site{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .5s var(--ease)}
.site:hover{border-color:var(--steel-2)}
.site .ph{aspect-ratio:16/9;overflow:hidden;background:var(--paper-3);position:relative}
.site .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.site:hover .ph img{transform:scale(1.03)}
.site .ph .tag{position:absolute;top:.9rem;left:.9rem;background:rgba(255,255,255,.94)}
.site .bd{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.site .bd h3{margin-bottom:.9rem}
.meta{display:grid;gap:.6rem;margin-bottom:1.2rem}
.meta li{display:flex;gap:.65rem;align-items:flex-start;font-size:.9rem;color:var(--steel)}
.meta svg{width:15px;height:15px;color:var(--green);flex:none;margin-top:.28rem}
.meta a:hover{color:var(--green)}
.meta .mono{font-size:.88rem;color:var(--ink)}
.site .act{margin-top:auto;display:flex;gap:.6rem;flex-wrap:wrap;padding-top:.4rem}

/* fact row — hairline divided data */
.facts{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.facts div{padding:1.5rem 1.2rem 1.6rem;border-right:1px solid var(--line);text-align:center}
.facts div:last-child{border-right:0}
.facts b{display:block;font-family:var(--f-display);font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1}
.facts span{display:block;margin-top:.45rem;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel-2)}
@media(max-width:820px){.facts{grid-template-columns:repeat(2,1fr)}.facts div{border-bottom:1px solid var(--line);padding-right:1rem}.facts div:nth-child(2n){border-right:0}}
/* .facts was only ever styled for light sections — on a dark one the numbers
   inherited --ink and became black on black, i.e. invisible. */
.sec-ink .facts,.sec-green .facts{border-top-color:rgba(255,255,255,.16)}
.sec-ink .facts div,.sec-green .facts div{border-right-color:rgba(255,255,255,.14);border-bottom-color:rgba(255,255,255,.14)}
.sec-ink .facts b,.sec-green .facts b{color:#fff}
.sec-ink .facts span,.sec-green .facts span{color:rgba(255,255,255,.58)}

/* checklist */
.checks{display:grid;gap:.85rem}
.checks li{display:flex;gap:.75rem;align-items:flex-start;font-size:.95rem}
.checks li::before{
  content:"";flex:none;width:14px;height:14px;margin-top:.42rem;border-radius:1px;
  background:var(--green);
  clip-path:polygon(14% 44%,0 58%,50% 100%,100% 18%,86% 6%,45% 70%);
}
.sec-ink .checks li,.sec-green .checks li{color:rgba(255,255,255,.82)}
.sec-green .checks li::before{background:#fff}

/* team member */
.member .ph{aspect-ratio:1;overflow:hidden;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);margin-bottom:.95rem}
/* no grayscale default — real headshots should land in colour; the pending
   tile is already monochrome brand artwork */
.member .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.member:hover .ph img{transform:scale(1.04)}
.member h4{font-family:var(--f-display);font-size:1.06rem;font-weight:700}
.member .role{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-top:.25rem}
.member .c{margin-top:.7rem;display:grid;gap:.28rem;font-size:.84rem}
/* An address like marybethsmitherlq@litersinc.com is wider than a card in a
   two-up phone grid. inline-flex sizes to its content and refuses to shrink, so
   the card used to push past the screen edge; flex with min-width:0 lets the
   address wrap instead, and it breaks mid-word because an email has nowhere
   else to break. The icon stays on the first line. */
.member .c a{display:flex;gap:.45rem;align-items:flex-start;min-width:0;
  color:var(--steel);transition:color .35s var(--ease)}
.member .c a:hover{color:var(--green)}
.member .c a>span,.member .c a>.mono{min-width:0;overflow-wrap:anywhere}
.member .c svg{width:13px;height:13px;color:var(--green-l);flex:none;margin-top:.25em}
.member .c .mono{font-size:.82rem}

/* Card rows that sit under a centred heading are centred too — a centred
   title above hard-left card text was the mismatch that read as "off". */
.cards-center .step,.cards-center .panel{text-align:center}
.cards-center .panel .ic{margin-inline:auto}
.cards-center .step{border-top:0;padding-top:0}
.cards-center .step .n{margin-bottom:.7rem}
.cards-center .step h3,.cards-center .panel h3{margin-inline:auto}
.cards-center .step p,.cards-center .panel p{margin-inline:auto;max-width:34ch}

/* Fixed tracks, not auto-fit: a group of 2 or 1 keeps normal card width and
   sits left instead of stretching into odd wide slabs, and a group of 8 falls
   as a clean 4 + 4. */
.team-grid{display:grid;gap:1.7rem 1.6rem;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1040px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* team group header */
.group-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  border-bottom:1px solid var(--ink);padding-bottom:.9rem;margin-bottom:1.8rem}
.group-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}

/* =========================================================================
   ESTIMATOR
   ========================================================================= */
.est{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden}
@media(max-width:900px){.est{grid-template-columns:1fr}}
.est-form{padding:clamp(1.5rem,2.8vw,2.4rem)}
.est-out{padding:clamp(1.5rem,2.8vw,2.4rem);background:var(--ink);color:rgba(255,255,255,.72);position:relative;display:flex;flex-direction:column;justify-content:center}
.est-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.6rem}
.est-head h3{font-size:1.15rem}

.field{margin-bottom:1.05rem}
.field label{display:block;font-family:var(--f-mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel-2);margin-bottom:.42rem}
.field input,.field select,.field textarea{
  width:100%;padding:.78rem .85rem;font:inherit;font-size:.94rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-wash)}
.field textarea{resize:vertical;min-height:110px}
.f-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}
.note{font-size:.8rem;color:var(--steel-2);margin-top:1rem;line-height:1.55}
.req{color:var(--green)}

/* segmented control — squared */
.seg{position:relative;display:inline-flex;border:1px solid var(--line);border-radius:var(--r);padding:2px;background:var(--paper-2)}
.seg .thumb{position:absolute;top:2px;bottom:2px;left:2px;background:var(--ink);border-radius:1px;transition:transform .5s var(--ease),width .5s var(--ease)}
.seg button{position:relative;z-index:1;padding:.46rem .95rem;font-size:.8rem;font-weight:600;color:var(--steel);transition:color .4s var(--ease)}
.seg button.on{color:#fff}

/* readout */
.readout .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-l)}
.readout .v{font-family:var(--f-display);font-size:clamp(2.9rem,6vw,4.4rem);font-weight:700;letter-spacing:-.04em;color:#fff;line-height:1;margin:.35rem 0 .1rem;font-variant-numeric:tabular-nums}
.readout .u{font-family:var(--f-mono);font-size:.8rem;color:rgba(255,255,255,.5)}
.brk{margin-top:1.7rem;border-top:1px solid rgba(255,255,255,.14);padding-top:1.1rem;display:grid;gap:.72rem}
.brk .r{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.brk .r span:first-child{font-size:.86rem;color:rgba(255,255,255,.6)}
.brk .r span:last-child{font-family:var(--f-mono);font-size:1rem;font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.brk .r.hi span:last-child{color:var(--green-l);font-weight:700}

/* truck bay */
.bay{display:flex;flex-wrap:wrap;gap:.34rem;margin-top:1.1rem}
.tk{width:26px;height:18px;display:grid;place-items:center;color:rgba(255,255,255,.85);
  animation:tkin .5s var(--ease) both}
.tk.part{opacity:.42}
.tk svg{width:22px;height:15px}
@keyframes tkin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tk{animation:none}}

/* form status */
.f-status{margin-top:1rem;padding:.85rem 1rem;border-radius:var(--r);font-size:.9rem;display:none;border:1px solid transparent}
.f-status.show{display:block}
.f-status.ok{background:var(--green-wash);color:var(--green-d);border-color:var(--green-line)}
.f-status.bad{background:#fdf0ef;color:#93231c;border-color:#f0cbc7}

/* =========================================================================
   HAUL & MATERIAL ESTIMATOR (two stage + load ticket)
   ========================================================================= */
.est2{display:grid;gap:1.5rem;align-items:start}
@media(min-width:1040px){
  .est2{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    grid-template-areas:"q ticket" "d ticket"}
  .stg--q{grid-area:q}.stg--d{grid-area:d}
  .ticket{grid-area:ticket;position:sticky;top:7.5rem}
}
.stg{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden}
.stg--d{border-style:dashed;background:transparent}
.stg-head{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;padding:1.1rem 1.4rem;border-bottom:1px solid var(--line)}
.stg-i{font-family:var(--f-mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;color:#fff;background:var(--green);padding:.28rem .5rem;border-radius:var(--r)}
.stg-head h3{margin:0 auto 0 0;font-size:1.15rem}
.stg-badge{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.34rem .6rem;border-radius:var(--r);border:1px solid var(--line);color:var(--steel-2);white-space:nowrap}
.stg-badge--free{color:var(--green);border-color:var(--green-line);background:var(--green-wash)}
.stg-badge--note{border-style:dashed}
.stg-body{display:grid;gap:1.05rem;padding:1.4rem}

/* segmented switch */
.sw{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);flex-wrap:wrap}
.sw button{padding:.5rem .95rem;font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel);border-radius:1px;transition:background .35s var(--ease),color .35s var(--ease)}
.sw button[aria-pressed=true]{background:var(--ink);color:#fff}
.sw--sub button{padding:.42rem .8rem;font-size:.72rem}

/* live readout */
.est-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.est-read b{display:block;font-family:var(--f-display);font-size:clamp(1.5rem,1.1rem+1.4vw,2.2rem);font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.est-read span{display:block;margin-top:.4rem;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-2)}

/* address autocomplete */
.ac{position:relative}
.ac ul{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;margin:0;max-height:15rem;overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 24px 48px -24px rgba(0,0,0,.35)}
.ac li{padding:.65rem .85rem;font-size:.9rem;cursor:pointer;border-bottom:1px solid var(--line-2)}
.ac li:last-child{border-bottom:0}
.ac li:hover{background:var(--green-wash)}

/* the load ticket — a scale-house slip */
.ticket{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem}
.ticket-head{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.8rem;margin-bottom:.5rem;
  border-bottom:2px solid var(--ink);font-family:var(--f-mono);font-size:.64rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.ticket dl{margin:0;display:grid}
.ticket dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-block:.52rem;
  border-bottom:1px dotted #c9cfcd;font-size:.86rem}
.ticket dt{color:var(--steel);white-space:nowrap}
.ticket dd{margin:0;font-weight:600;text-align:right;color:var(--ink);font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;font-size:.84rem}
.ticket .divider{margin-top:.5rem;border-top:2px solid var(--ink);border-bottom-style:solid;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}
.ticket-total{padding-top:1.1rem}
.ticket-total .k{display:block;font-family:var(--f-mono);font-size:.62rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel-2);margin-bottom:.5rem}
.ticket-total .v{font-family:var(--f-display);font-size:clamp(2.2rem,1.6rem+2.4vw,3rem);font-weight:700;
  line-height:.95;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.ticket-flag{margin-top:.9rem;padding:.65rem .8rem;border-left:3px solid var(--green);
  background:var(--green-wash);font-size:.8rem;line-height:1.5;color:var(--ink)}
.ticket .btn{width:100%;margin-top:1rem}

/* =========================================================================
   CALCULATOR PAGE
   Light and airy, with green doing the accent work. The earlier version put a
   near-black slab next to a white panel — too heavy on one side, and the panel
   dissolved into the page on the other. Both surfaces are now defined, and the
   contrast is carried by the accent rather than by weight.
   ========================================================================= */
/* The whole block is deliberately kept short enough that the scroll cue below
   it lands inside a 900px-tall viewport. It used to run 163px past the fold,
   which meant nobody using the calculator ever saw the prompt to the guidance
   section. Measure before loosening any of the spacing below. */
.calc-wrap{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(2rem,3.4vw,3rem)}
.calc-grid{display:grid;gap:clamp(1.2rem,2.2vw,1.7rem);align-items:start}
.calc-col{display:grid;align-content:start;gap:clamp(1rem,1.8vw,1.35rem)}
@media(min-width:1000px){
  .calc-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
  .calc-grid .result{position:sticky;top:7rem}
}

/* input side — white card with a green spine so it reads as the active surface */
.calc-panel{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:var(--r);padding:clamp(1.3rem,2.4vw,1.85rem);
  box-shadow:0 20px 44px -34px rgba(13,18,20,.4)}
.calc-step{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.calc-step i{font-style:normal;font-family:var(--f-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.1em;color:var(--green-d);background:var(--green-wash);
  border:1px solid var(--green-line);padding:.28rem .46rem;border-radius:var(--r)}
.calc-step h3{font-size:1rem;margin:0}
.calc-panel hr{height:1px;border:0;background:var(--line-2);margin-block:1.25rem}
.calc-panel .field{margin-bottom:.8rem}
.calc-panel .field:last-child{margin-bottom:0}

/* result side — brand green, not a black void */
.result{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:linear-gradient(158deg,#06663b 0%,#04512c 46%,#02301a 100%);
  color:rgba(255,255,255,.82);padding:clamp(1.3rem,2.4vw,1.8rem);
  box-shadow:0 26px 56px -34px rgba(4,60,32,.75);
}
/* recalculating sweep — a hairline runs the top edge whenever a figure changes,
   so the panel visibly answers the input instead of silently swapping numbers */
.result::after{content:"";position:absolute;top:0;left:0;height:2px;width:100%;
  background:linear-gradient(90deg,rgba(255,255,255,0),#8ee6b4,rgba(255,255,255,0));
  transform:translateX(-100%);opacity:0;pointer-events:none}
.result.calcing::after{animation:sweep .62s var(--ease-out)}
@keyframes sweep{0%{transform:translateX(-100%);opacity:1}100%{transform:translateX(100%);opacity:0}}
/* faint bedding-plane texture, so the panel has material rather than flat fill */
.result::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.18),rgba(255,255,255,0) 58%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,rgba(255,255,255,0) 1px 22px)}
.result>*{position:relative}
.result .k{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.94)}
.result .big{font-family:var(--f-display);font-weight:700;letter-spacing:-.045em;line-height:.86;
  color:#fff;font-variant-numeric:tabular-nums;font-size:clamp(3rem,6.4vw,4.5rem);margin:.3rem 0 0}
.result .big small{font-family:var(--f-mono);font-size:.21em;letter-spacing:.12em;
  color:rgba(255,255,255,.88);font-weight:500;margin-left:.45rem}

/* three quick figures, tiled */
.res-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:1.05rem;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18);border-radius:var(--r);overflow:hidden}
/* Tiles darken the green rather than lightening it. A white veil raised the
   backdrop's luminance and pushed these small mono labels under 4.5:1; sinking
   them instead buys contrast and reads as inset. */
.res-tiles div{background:rgba(2,38,21,.3);padding:.65rem .6rem;text-align:center}
.res-tiles b{display:block;font-family:var(--f-display);font-size:1.22rem;font-weight:700;color:#fff;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.res-tiles span{display:block;margin-top:.26rem;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:#fff}

.result dl{margin:1rem 0 0;display:grid}
.result dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-block:.44rem;border-bottom:1px solid rgba(255,255,255,.16);font-size:.84rem}
.result dt{color:rgba(255,255,255,.93)}
.result dd{margin:0;font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:#fff;font-size:.83rem;text-align:right}
.result .btn{width:100%;margin-top:1.05rem}

/* a figure that just changed gets a brief lift — the eye is told where to look */
@keyframes bump{0%{transform:translateY(5px);opacity:.25}100%{transform:translateY(0);opacity:1}}
.result .bumped{animation:bump .42s var(--ease-out)}
/* transform is a no-op on display:inline, so only the inline tonnage figure is
   promoted. Do NOT widen this to .bumped — the tiles are display:block and
   inline-block collapses each number onto the same line as its label. */
.result .big .bumped{display:inline-block}
.result .btn-onink{background:#fff;color:var(--green-d);font-weight:700}
.result .btn-onink:hover{background:#eafaf0;color:var(--green-d)}

/* dispatch note — the honest caveat, given its own rule */
.dispatch{margin-top:.8rem;padding:.7rem .8rem;border-radius:var(--r);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.96)}
.dispatch b{color:#fff}
.result .fine{margin-top:.7rem;font-size:.72rem;line-height:1.5;color:rgba(255,255,255,.88)}

/* one glyph per load — they drop in one after another as the count climbs */
.bay{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.85rem;min-height:18px}
.bay i{width:26px;height:18px;display:grid;place-items:center;color:rgba(255,255,255,.95);
  animation:truckIn .44s var(--ease-out) backwards}
.bay i svg{width:23px;height:15px}
.bay i.more{width:auto;font-family:var(--f-mono);font-size:.7rem;color:rgba(255,255,255,.92)}
@keyframes truckIn{0%{opacity:0;transform:translateX(-9px)}100%{opacity:1;transform:translateX(0)}}

/* ---- scroll cue ---- */
/* This is a single horizontal pill rather than a stacked label + circle: stacked
   cost ~66px of height and still read as decoration. One row is shorter, and
   the green ring plus the travelling sheen make it read as a control. */
.cue{display:flex;justify-content:center;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.cue.gone{opacity:0;transform:translateY(6px);pointer-events:none}
.cue a{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.7rem;
  padding:.6rem 1.1rem .6rem 1.25rem;border-radius:999px;
  background:var(--paper);border:1px solid var(--green-line);
  color:var(--green-d);font-size:.87rem;font-weight:600;text-align:left;
  box-shadow:0 10px 26px -18px rgba(5,104,57,.6);
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.cue a:hover{border-color:var(--green);transform:translateY(-2px);
  box-shadow:0 16px 32px -18px rgba(5,104,57,.75)}
/* a slow sheen crosses the pill so it catches the eye without blinking at you */
.cue a::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(5,104,57,.09) 50%,transparent 62%);
  transform:translateX(-120%);animation:cueSheen 4.2s var(--ease) infinite}
.cue .arrow{flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:var(--green);color:#fff;
  animation:cueBob 2.1s var(--ease) infinite}
.cue .arrow svg{width:14px;height:14px}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes cueSheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){
  .cue .arrow,.cue a::before,.result.calcing::after,.bay i,.result .bumped{animation:none}
}

/* =========================================================================
   COMPANY HISTORY — the archive photographs from the old site.
   They are wildly different shapes (one near-square 960px, two portrait
   thumbnails barely 200px wide), so each sits in a fixed-height frame and is
   contained rather than cropped: no heads cut off, no heavy upscaling.
   ========================================================================= */
.hist{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.8vw,1.4rem)}
@media(max-width:900px){.hist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.hist{grid-template-columns:1fr}}
.hist figure{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.hist figure:hover{transform:translateY(-3px);box-shadow:0 18px 40px -30px rgba(13,18,20,.45)}
/* Capped at 264px: the 1949 and 1953 scans are 261px tall, so the frame never
   asks them to stretch beyond their real resolution. */
.hist .shot{height:clamp(200px,22vw,264px);background:var(--paper-3);padding:.6rem;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
/* The frame is flex, not grid: Chromium ignores percentage heights on a centred
   grid item, which let the small scans overflow and push the caption out of line.
   max-* on a flex child shrinks a photo to fit but never enlarges it past its
   real resolution - the 1949 and 1953 scans are only ~200px wide. */
.hist img{max-width:100%;max-height:100%;width:auto;height:auto;filter:saturate(.9)}
.hist figcaption{padding:.75rem .9rem .85rem;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--steel);line-height:1.5}
.hist figcaption b{display:block;font-family:var(--f-body);font-size:.88rem;font-weight:600;
  letter-spacing:0;color:var(--ink);margin-bottom:.1rem}

/* ---- depth reference ---- */
.depth-ref{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.depth-ref div{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--green);
  border-radius:var(--r);padding:1.2rem 1.25rem;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.depth-ref div:hover{transform:translateY(-3px);box-shadow:0 18px 40px -30px rgba(13,18,20,.45)}
.depth-ref b{display:block;font-family:var(--f-display);font-size:1.75rem;font-weight:700;
  color:var(--green-d);letter-spacing:-.03em;line-height:1}
.depth-ref span{display:block;margin-top:.5rem;font-size:.87rem;color:var(--steel);line-height:1.5}

/* ---- "which stone" callout, matched to the calculator ---- */
.pick{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:0 20px 44px -34px rgba(13,18,20,.4)}
.pick-two{display:grid;gap:1rem;margin-top:1.3rem}
@media(min-width:620px){.pick-two{grid-template-columns:1fr 1fr}}
.pick-two div{border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;background:var(--paper-2)}
.pick-two b{display:block;font-family:var(--f-display);font-size:1.3rem;font-weight:700;color:var(--green-d)}
.pick-two span{display:block;margin-top:.35rem;font-size:.9rem;color:var(--steel);line-height:1.55}

/* =========================================================================
   CTA SLAB
   ========================================================================= */
.slab{background:var(--ink);color:rgba(255,255,255,.75);border-radius:var(--r);padding:clamp(2rem,4vw,3.4rem)}
.slab h2{color:#fff;max-width:20ch}
.slab .lead{color:rgba(255,255,255,.72)}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{background:var(--ink);color:rgba(255,255,255,.6);padding-top:clamp(3.5rem,6vw,5rem);font-size:.9rem}
.foot a{transition:color .35s var(--ease)}
.foot a:hover{color:#fff}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:2.6rem;padding-bottom:3rem}
@media(max-width:880px){.foot-top{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}
.foot-logo{height:34px;width:auto;margin-bottom:1.1rem;filter:brightness(0) invert(1);opacity:.92}
.foot h4{font-family:var(--f-mono);font-size:.66rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.58);margin-bottom:1.05rem}
.foot ul{display:grid;gap:.6rem}
.foot .mono{font-family:var(--f-mono);font-size:.86rem}
.foot-bot{border-top:1px solid rgba(255,255,255,.12);padding:1.5rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;color:rgba(255,255,255,.58)}

/* =========================================================================
   PHOTOGRAPHY SYSTEM
   One treatment for every photo on the site so real drone stills read as
   art-directed rather than dropped in: a consistent grade, a slow reveal,
   and a restrained push on hover.
   ========================================================================= */
.media{position:relative;overflow:hidden;background:var(--paper-3);isolation:isolate}
.media>img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.5s var(--ease),filter 1.2s var(--ease);will-change:transform}
/* unifying grade — cools the limestone grey and deepens the shadows a touch */
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(11,20,24,.04) 0%,rgba(11,20,24,.20) 100%);
  transition:opacity .9s var(--ease);
}
.media.grade-ink::after{background:linear-gradient(180deg,rgba(11,20,24,.30) 0%,rgba(11,20,24,.62) 100%)}
.media.grade-none::after{display:none}
a:hover>.media>img,a:hover .media>img,
.site:hover .media>img,.tilecard:hover .media>img{transform:scale(1.05)}

.r-21x9{aspect-ratio:21/9}.r-16x9{aspect-ratio:16/9}.r-3x2{aspect-ratio:3/2}
.r-4x3{aspect-ratio:4/3}.r-1x1{aspect-ratio:1/1}
@media(max-width:700px){.r-21x9{aspect-ratio:16/9}}

/* caption rail under a photo — mono, hairline, technical */
.media-cap{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  margin-top:.7rem;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-2)}
.media-cap b{font-weight:500;color:var(--green)}
.sec-ink .media-cap,.band .media-cap{color:rgba(255,255,255,.5)}
.sec-ink .media-cap b{color:var(--green-l)}

/* full-bleed photographic band — the premium punctuation between sections */
.band{position:relative;display:grid;place-items:center;overflow:hidden;color:#fff;
  min-height:clamp(360px,50vh,600px)}
.band>.media{position:absolute;inset:0;z-index:0}
/* These are bright, high-key limestone photographs — white type needs a
   genuinely heavy scrim over them, weighted to the centre where the copy sits. */
.band>.media::after{background:
  linear-gradient(180deg,rgba(9,14,16,.58) 0%,rgba(9,14,16,.74) 46%,rgba(9,14,16,.86) 100%),
  radial-gradient(70% 60% at 50% 50%,rgba(9,14,16,.34) 0%,rgba(9,14,16,0) 100%)}
.band .band-in{position:relative;z-index:2;text-align:center;max-width:58ch;
  padding-inline:var(--gut);padding-block:clamp(3rem,7vw,5.5rem)}
.band h2{color:#fff}
.band .lead{color:rgba(255,255,255,.84);margin-top:1rem}
.band .label{justify-content:center;color:var(--green-l)}
.band .label::after{display:none}

/* edge-to-edge photo strip */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--line)}
.strip .media{aspect-ratio:4/3}
@media(max-width:900px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =========================================================================
   PAGE TRANSITION — #57 limestone
   ========================================================================= */
#curtain{position:fixed;inset:0;z-index:200;pointer-events:none;display:none}
#curtain.live{display:block}
/* The stone falls onto brand green, not a flat black void — a large dead-black
   field behind grey aggregate read as a rendering glitch rather than a
   deliberate transition. The gradient gives it depth as it sweeps down. */
#curtain .sheet{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#0a7d46 0%,var(--green) 42%,var(--green-d) 100%);
  transform:translateY(-101%);will-change:transform;
}
#curtain canvas{position:absolute;inset:0;width:100%;height:100%}
/* An arriving page is blank for a frame or two before its script paints the
   stone, which read as the rock vanishing mid-transition. Paint the green sheet
   straight away in CSS; quarry.js drops this the instant the drain starts, so
   the falling stone uncovers the real page rather than a blank one. */
html.tr-in::before{content:"";position:fixed;inset:0;background:var(--green);z-index:199;pointer-events:none}
html.tr-in body{opacity:0}
body{transition:opacity .3s linear}

/* =========================================================================
   FINISH — the small things that separate "built" from "assembled"
   ========================================================================= */
::selection{background:var(--green);color:#fff}
html{scrollbar-color:var(--steel-2) var(--paper-3);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper-3)}
::-webkit-scrollbar-thumb{background:#b9c2c0;border:3px solid var(--paper-3);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--steel-2)}

/* focus: a brand ring with a light halo so it reads on dark and light alike */
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:1px}
.sec-ink :focus-visible,.band :focus-visible,.hero :focus-visible,.foot :focus-visible,
.est-out :focus-visible{outline-color:var(--green-l)}

/* cards lift on a real shadow rather than just changing border colour */
.panel,.site,.spec-wrap,.stg,.ticket{
  box-shadow:0 1px 2px rgba(13,18,20,.035);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);
}
.panel:hover,.site:hover{
  box-shadow:0 18px 44px -28px rgba(13,18,20,.45),0 2px 6px rgba(13,18,20,.05);
  transform:translateY(-3px);
}
.cards-center .panel:hover{transform:translateY(-3px)}

/* primary button carries a little weight */
.btn-primary{box-shadow:0 10px 24px -16px rgba(5,104,57,.9)}
.btn-primary:hover{box-shadow:0 14px 30px -16px rgba(5,104,57,.95)}
.btn:active{transform:translateY(1px)}

/* table: quieter zebra + a positive hover, numerics locked to tabular */
table.spec tbody tr:nth-child(even){background:rgba(13,18,20,.016)}
table.spec tbody tr:hover{background:var(--green-wash)}
table.spec td.num,table.spec td.desig{font-variant-numeric:tabular-nums}
table.spec tbody tr:hover .desig{color:var(--green-d)}

/* ribbon: fade the ends so it reads as a continuous band, not a cut-off row */
.ribbon{position:relative}
.ribbon::before,.ribbon::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,8vw,120px);z-index:2;pointer-events:none;
}
.ribbon::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(255,255,255,0))}
.ribbon::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(255,255,255,0))}

/* footer gets structural weight: a brand rule and a quieter divider grid */
.foot{position:relative}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--green) 0%,var(--green-l) 38%,rgba(5,104,57,0) 100%)}
.foot-top{border-bottom:1px solid rgba(255,255,255,.09)}
.foot-col-rule{border-left:1px solid rgba(255,255,255,.07);padding-left:2rem}
@media(max-width:880px){.foot-col-rule{border-left:0;padding-left:0}}

/* print: give someone a usable spec sheet instead of a screenshot */
@media print{
  .nav,.nav-sheet,#curtain,.hero-cta,.slab,.band,.ribbon,.foot-bot{display:none !important}
  body{color:#000;background:#fff;font-size:11pt}
  .sec,.sec-tight{padding-block:1rem}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
  table.spec{page-break-inside:avoid}
  [data-rv]{opacity:1 !important;transform:none !important}
}

/* =========================================================================
   CHOREOGRAPHED ENTRANCES — restrained, one easing family
   ========================================================================= */
/* Only opacity and transform are animated. clip-path was in here and it
   silently ate content: a stalled clip-path transition leaves the element at
   inset(0 0 100% 0) — fully clipped and invisible — because the cascade is
   correct but the animation never ticks. Nothing that can hide a card is
   allowed in this transition list. */
[data-rv]{
  opacity:0;
  transition:opacity .78s var(--ease-out),transform .78s var(--ease-out),letter-spacing .78s var(--ease-out);
  transition-delay:var(--rv-d,0ms);
  will-change:transform,opacity;
}
[data-rv].seen{opacity:1;transform:none}

/* Hidden states are scoped to :not(.seen) so the revealed state is
   unconditional — no variant can out-specify its way into staying hidden. */
[data-rv=rise]:not(.seen){transform:translateY(20px)}
[data-rv=rise-far]:not(.seen){transform:translateY(34px)}
[data-rv=fade]:not(.seen){transform:none}
[data-rv=drift-l]:not(.seen){transform:translateX(-24px)}
[data-rv=drift-r]:not(.seen){transform:translateX(24px)}
[data-rv=settle]:not(.seen){transform:translateY(-14px)}
[data-rv=unmask]:not(.seen){transform:translateY(26px)}
[data-rv=track]:not(.seen){transform:translateY(6px);letter-spacing:.28em}
[data-rv=track].seen{letter-spacing:.16em}
[data-rv=scale]:not(.seen){transform:scale(.985) translateY(14px)}
[data-rv=rule]:not(.seen){transform:scaleX(0);transform-origin:left}

/* On narrow screens a sideways entrance on a full-width block pushes past the
   viewport for the length of the animation, which shows up as a horizontal
   scrollbar / rubber-banding. Drift vertically instead. */
@media(max-width:760px){
  [data-rv=drift-l]:not(.seen),[data-rv=drift-r]:not(.seen){transform:translateY(18px)}
}

/* headline words */
.split .w{display:inline-block;overflow:hidden;vertical-align:top}
.split .w>i{display:inline-block;font-style:inherit;transform:translateY(102%);
  transition:transform .82s var(--ease-out);transition-delay:var(--wd,0ms)}
.split.seen .w>i{transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-rv]{opacity:1 !important;transform:none !important;clip-path:none !important}
  .split .w>i{transform:none !important}
}