/* =========================================================
   Signature Auto Detailing
   Palette is locked: near-black ground, white type, one cyan.
   The cyan (#39FDE3) is the "inspection beam" — it is only ever
   used for the light-bar device, focus rings and one CTA.
   Do not spend it on ordinary text or borders.
   ========================================================= */

:root{
  --ink:        #07090A;   /* page ground */
  --ink-2:      #0B0F11;   /* alternating band */
  --panel:      #111618;   /* cards */
  --panel-hi:   #171E21;   /* card hover */
  --line:       rgba(255,255,255,.10);
  --line-soft:  rgba(255,255,255,.055);
  --white:      #FFFFFF;
  --text:       #C6CFD1;   /* body copy */
  --muted:      #7E8B8F;   /* captions, meta */
  --beam:       #39FDE3;   /* the one accent */
  --beam-dim:   rgba(57,253,227,.16);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1200px;
  --gut: clamp(20px, 4vw, 40px);
  --section: clamp(72px, 9vw, 124px);
  --radius: 3px;

  /* fixed mobile call bar */
  --callbar: 44px;
  /* How far the bar's box hangs below the viewport bottom — see .callbar. */
  --bar-drop: 50vh;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(16px,.4vw + 15px,17.5px);
  line-height:1.65;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{color:inherit}

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

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

/* the masthead is sticky, so anchored sections need room above them */
[id]{scroll-margin-top:96px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--beam);color:#04100E;padding:12px 18px;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}

/* ---------- type ---------- */

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--white);
  font-weight:800;
  font-variation-settings:"wdth" 112;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:1.02;
  margin:0;
  text-wrap:balance;
}

h1{font-size:clamp(2.4rem,6.4vw,5.1rem)}
h2{font-size:clamp(1.85rem,3.9vw,3.1rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.35rem);letter-spacing:-.005em}
h4{font-size:1rem;font-variation-settings:"wdth" 104}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.lead{
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  line-height:1.6;
  color:#D8E0E2;
  font-weight:330;
  max-width:62ch;
}

.eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 18px;
  display:block;
}

.muted{color:var(--muted)}

/* ---------- the beam: this site's signature device ----------
   A hairline track with a short cyan light parked on it.
   Marks the start of every section. Nothing else earns the cyan. */

.rule{
  position:relative;
  height:1px;
  background:var(--line-soft);
  border:0;
  margin:0 0 clamp(28px,3.6vw,46px);
  width:100%;
}
.rule::after{
  content:"";
  position:absolute;
  top:-1px;left:0;
  width:68px;height:3px;
  background:var(--beam);
  box-shadow:0 0 16px 1px rgba(57,253,227,.55);
}

/* ---------- header ---------- */

.masthead{
  position:sticky;top:0;z-index:100;
  background:rgba(7,9,10,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.masthead-in{
  display:flex;align-items:center;gap:24px;
  min-height:76px;
}

/* logo.svg is a true vector, traced from Trey's raster original (see README).
   No blend-mode hack needed — it has real transparency and scales to any size.
   The artwork is WHITE, so it still requires a dark background to be visible. */
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{width:186px}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav a{
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
  padding:6px 0;
  position:relative;
  transition:color .18s ease;
}
.nav a:hover{color:var(--white)}
.nav a[aria-current="page"]{color:var(--white)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--beam);box-shadow:0 0 12px rgba(57,253,227,.6);
}

.nav-cta{
  font-family:var(--mono);
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
  color:var(--white);
  border:1px solid var(--line);
  padding:11px 18px;
  white-space:nowrap;
  transition:border-color .18s ease,background .18s ease;
}
.nav-cta:hover{border-color:var(--beam);background:rgba(57,253,227,.07)}

.burger{
  display:none;
  margin-left:auto;
  background:none;border:1px solid var(--line);
  width:44px;height:40px;
  color:var(--white);
  cursor:pointer;
  align-items:center;justify-content:center;
  padding:0;
}
.burger span{display:block;width:18px;height:1px;background:currentColor;position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:18px;height:1px;background:currentColor;
}
.burger span::before{top:-6px}
.burger span::after{top:6px}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);
  font-size:.86rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;
  padding:16px 26px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .16s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.btn:active{transform:translateY(1px)}

.btn-beam{
  background:var(--beam);
  color:#04100E;
  font-weight:600;
  box-shadow:0 0 26px rgba(57,253,227,.22);
}
.btn-beam:hover{background:#5FFFE9;box-shadow:0 0 34px rgba(57,253,227,.36)}

.btn-ghost{
  border-color:var(--line);
  color:var(--white);
  background:transparent;
}
.btn-ghost:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04)}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* ---------- hero ---------- */

.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(7,9,10,.82) 0%,rgba(7,9,10,.55) 38%,rgba(7,9,10,.92) 100%),
    linear-gradient(90deg,rgba(7,9,10,.9) 0%,rgba(7,9,10,.28) 62%,rgba(7,9,10,.6) 100%);
}
.hero-in{
  position:relative;
  padding-block:clamp(96px,15vw,190px) clamp(60px,8vw,96px);
  max-width:860px;
}
.hero h1{margin-bottom:26px}
.hero .lead{max-width:54ch}

/* the one animated moment: a light passes across the panel, once, on load */
.hero-beam{
  position:relative;height:1px;background:var(--line);
  margin:38px 0 32px;max-width:560px;overflow:hidden;
}
.hero-beam::after{
  content:"";position:absolute;top:-1px;left:0;height:3px;width:120px;
  background:linear-gradient(90deg,transparent,var(--beam),transparent);
  box-shadow:0 0 18px 2px rgba(57,253,227,.5);
  transform:translateX(-130px);
  animation:sweep 1.9s cubic-bezier(.5,.05,.2,1) .35s both;
}
@keyframes sweep{
  from{transform:translateX(-130px)}
  to{transform:translateX(560px)}
}

/* ---------- trust strip ---------- */

.strip{border-block:1px solid var(--line-soft);background:var(--ink-2)}
.strip-in{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.strip-item{
  padding:22px 18px;
  border-left:1px solid var(--line-soft);
  font-family:var(--mono);
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);
  display:flex;align-items:center;gap:10px;
}
.strip-item:first-child{border-left:0}
.strip-item b{color:var(--white);font-weight:500}

/* ---------- sections ---------- */

.section{padding-block:var(--section)}
.section-alt{background:var(--ink-2)}

.section-head{max-width:64ch;margin-bottom:clamp(36px,4.6vw,60px)}
.section-head h2{margin-bottom:18px}

/* ---------- work-order table: the services list ----------
   Set like a detailer's estimate sheet — leader dots, mono figures. */

.sheet{border-top:1px solid var(--line-soft)}
.sheet-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 28px;
  align-items:baseline;
  padding:24px 0;
  border-bottom:1px solid var(--line-soft);
  text-decoration:none;
  color:inherit;
  position:relative;
  transition:background .2s ease;
}
a.sheet-row:hover{background:rgba(255,255,255,.022)}
a.sheet-row:hover .sheet-name{color:var(--beam)}
.sheet-name{
  font-family:var(--display);
  font-weight:700;
  font-variation-settings:"wdth" 108;
  text-transform:uppercase;
  letter-spacing:-.005em;
  color:var(--white);
  font-size:clamp(1.05rem,1.7vw,1.4rem);
  line-height:1.15;
  transition:color .18s ease;
}
.sheet-price{
  font-family:var(--mono);
  font-size:1rem;
  color:var(--white);
  white-space:nowrap;
  font-weight:500;
}
.sheet-price small{
  display:block;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin-bottom:3px;
}
.sheet-note{
  grid-column:1/2;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.55;
  max-width:58ch;
  margin:0;
}

/* ---------- cards ---------- */

.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{
  background:var(--panel);
  border:1px solid var(--line-soft);
  padding:clamp(24px,2.6vw,34px);
  display:flex;flex-direction:column;gap:12px;
  transition:background .2s ease,border-color .2s ease;
}
.card h3{color:var(--white)}
.card p{color:var(--muted);font-size:.96rem;margin:0}
.card-num{
  font-family:var(--mono);
  font-size:.78rem;letter-spacing:.16em;
  color:var(--beam);
}

/* ---------- figures / gallery ---------- */

.shot{
  border:1px solid var(--line-soft);
  background:var(--panel);
  overflow:hidden;
  margin:0;
}
.shot img{width:100%;aspect-ratio:3/2;object-fit:cover}
.shot figcaption{
  padding:14px 18px;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono);
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.shot figcaption b{color:var(--white);font-weight:500}

/* before/after frames keep their native proportions — these are real
   paired photos, not a wipe slider, so nothing gets cropped.

   The client's originals had "Before"/"After" burned into the pixels in
   different corners on each one, and none at all on the stacked pair. Those
   bands are cropped off in site/images (see README) and replaced with these
   overlay tags, so every panel is labelled the same way: bottom-left. */
.ba{border:1px solid var(--line-soft);background:var(--panel);margin:0}
.ba img{width:100%}

.ba-frame{position:relative;line-height:0}
.ba-frame img{display:block;width:100%}

.ba-tag{
  position:absolute;
  z-index:2;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1;
  color:var(--white);
  background:rgba(7,9,10,.8);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-left:2px solid var(--beam);
  padding:8px 12px;
  pointer-events:none;
}

/* side-by-side pair: bottom-left of the left panel, bottom-left of the right */
.ba-frame--side .ba-tag--before{left:14px;bottom:14px}
.ba-frame--side .ba-tag--after{left:calc(50% + 14px);bottom:14px}

/* stacked pair: bottom-left of the top panel, bottom-left of the bottom one */
.ba-frame--stack .ba-tag--before{left:14px;top:50%;transform:translateY(calc(-100% - 14px))}
.ba-frame--stack .ba-tag--after{left:14px;bottom:14px}

@media (max-width:520px){
  .ba-tag{font-size:.64rem;letter-spacing:.12em;padding:6px 9px}
  .ba-frame--side .ba-tag--before,
  .ba-frame--stack .ba-tag--after{left:9px;bottom:9px}
  .ba-frame--side .ba-tag--after{left:calc(50% + 9px);bottom:9px}
  .ba-frame--stack .ba-tag--before{left:9px;transform:translateY(calc(-100% - 9px))}
}
.ba figcaption{
  padding:14px 18px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.ba figcaption b{color:var(--white);font-weight:500}

/* ---------- area list ---------- */

.towns{
  display:flex;flex-wrap:wrap;gap:8px;
  list-style:none;padding:0;margin:0 0 28px;
}
.towns li{
  font-family:var(--mono);
  font-size:.82rem;letter-spacing:.08em;
  color:var(--text);
  border:1px solid var(--line-soft);
  padding:8px 13px;
}

/* ---------- split ---------- */

.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,72px);
  align-items:center;
}
.split-media img{width:100%;border:1px solid var(--line-soft)}

/* a .split section running as one column — used where a photo is still
   outstanding, so the text keeps a readable measure instead of the full width */
.split-single{max-width:74ch}

/* ---------- media placeholder ----------
   Holds a photo slot open until the real image arrives. Matches the aspect
   ratio of the other .split-media photos so nothing shifts on swap.
   TEMPORARY — see site/README.md. Delete this rule once unused. */

.media-pending{
  aspect-ratio:4/3;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 16px,
      rgba(255,255,255,.022) 16px 32px),
    var(--panel);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:28px;
  text-align:center;
}
.media-pending-beam{
  width:56px;height:3px;
  background:var(--beam);
  box-shadow:0 0 16px 1px rgba(57,253,227,.5);
}
.media-pending p{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.8;
  margin:0;
}

/* ---------- callout ---------- */

.callout{
  border:1px solid var(--line);
  border-left:2px solid var(--beam);
  background:var(--panel);
  padding:clamp(20px,2.4vw,28px);
  margin-top:34px;
}
/* when a callout sits as a grid cell it's a sibling, not a trailing note */
.grid > .callout{margin-top:0}
.callout h3{font-size:1.02rem;margin-bottom:8px}
.callout p{margin:0;color:var(--muted);font-size:.96rem}

/* ---------- CTA band ---------- */

.band{
  background:var(--ink-2);
  border-block:1px solid var(--line-soft);
  padding-block:clamp(56px,7vw,92px);
  text-align:center;
}
.band h2{margin-bottom:18px}
.band .lead{margin-inline:auto}
.band .btn-row{justify-content:center}

/* ---------- form ---------- */

.form{display:grid;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{
  font-family:var(--mono);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.field .req{color:var(--beam)}
.field input,.field select,.field textarea{
  background:var(--ink-2);
  border:1px solid var(--line);
  color:var(--white);
  font-family:var(--body);
  font-size:1rem;
  padding:14px 15px;
  border-radius:var(--radius);
  width:100%;
  transition:border-color .18s ease;
}
.field textarea{min-height:132px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(255,255,255,.22)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--beam);box-shadow:0 0 0 3px var(--beam-dim);
}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field select option{background:var(--ink-2);color:var(--white)}
.form-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}

/* ---------- contact rail ---------- */

.rail{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-soft)}
.rail-item{
  padding:20px 0;border-bottom:1px solid var(--line-soft);
  display:grid;gap:5px;
}
.rail-item dt{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.rail-item dd{
  margin:0;color:var(--white);
  font-size:1.06rem;
}
.rail-item dd a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--beam);padding-bottom:1px}
.rail-item dd a:hover{color:var(--beam)}

/* ---------- footer ---------- */

.foot{background:var(--ink);border-top:1px solid var(--line-soft);padding-block:clamp(52px,6vw,76px) 30px}
.foot-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(30px,4vw,56px);
  margin-bottom:44px;
}
.foot .logo img{width:172px;margin-bottom:18px}
.foot h4{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
  margin-bottom:16px;font-variation-settings:normal;
}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.foot a{color:var(--text);text-decoration:none;font-size:.95rem}
.foot a:hover{color:var(--beam)}
.foot address{font-style:normal;color:var(--text);font-size:.95rem;line-height:1.7}
.foot-base{
  border-top:1px solid var(--line-soft);
  padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase;
}
.foot-base a{font-family:var(--mono);font-size:.76rem;color:var(--muted)}

/* ---------- prose: long-form text, used by the privacy policy ---------- */

.prose{max-width:74ch}
.prose h2{
  font-size:clamp(1.25rem,2vw,1.6rem);
  margin:clamp(38px,4vw,54px) 0 14px;
  font-variation-settings:"wdth" 106;
}
.prose > h2:first-child{margin-top:0}
.prose p{margin:0 0 1.05em}
.prose ul{
  margin:0 0 1.15em;
  padding-left:0;
  list-style:none;
}
.prose li{
  position:relative;
  padding-left:22px;
  margin-bottom:.55em;
}
/* a short beam instead of a bullet — same device as the section rules */
.prose li::before{
  content:"";
  position:absolute;left:0;top:.72em;
  width:10px;height:2px;
  background:var(--beam);
  opacity:.75;
}
.prose b{color:var(--white);font-weight:600}
.prose a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--beam);padding-bottom:1px}
.prose a:hover{color:var(--beam)}

/* ---------- footer legal links ---------- */

.foot-legal{display:flex;gap:22px;flex-wrap:wrap}
.foot-legal a{
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
}
.foot-legal a:hover{color:var(--beam)}

/* ================= fixed mobile call bar + hide-on-scroll header =========
   Ported from the OnePump Septic build, where the iOS behaviour below was
   worked out the hard way. Read site/README.md before changing any of it. */

.callbar{
  position:fixed;
  left:0;right:0;
  z-index:90;
  display:flex;
  border-top:1px solid var(--line);

  /* The bar's box is dropped --bar-drop below the viewport bottom, with the
     same amount added back as padding. The buttons therefore sit exactly where
     they would anyway, but the bar's surface carries on past them.
     Why: some mobile browsers (the Google app's in-app view is the worst)
     leave a strip between a fixed bar and the true bottom edge while their own
     toolbars animate, and the page scrolls visibly through it. Chasing that
     strip with viewport maths was tried twice on OnePump and misbehaved both
     times, so this simply covers it. With no strip the overhang is off-screen
     and costs nothing.

     The safe-area inset is deliberately NOT added here — it lives on the
     buttons instead (see .callbar a). Put it back on this container and it
     becomes dead painted space below the buttons, which pushes the labels
     off-centre and makes the bar look far too tall. */
  bottom:calc(-1 * var(--bar-drop));
  padding-bottom:var(--bar-drop);
}

.callbar a{
  position:relative;
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:9px;
  /* The safe-area inset is part of the BUTTON's own height, not padding under
     it, so `align-items:center` centres the label across the whole coloured
     block — equal space above and below on every device. On a phone with a
     home indicator the block simply grows downward and the label stays
     centred in it. */
  min-height:calc(var(--callbar) + env(safe-area-inset-bottom, 0px));
  font-family:var(--mono);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
}
/* each button carries its own colour down through the overhang, so a
   rubber-band overscroll never reveals a mismatched strip underneath */
.callbar a::after{
  content:"";position:absolute;left:0;right:0;top:100%;
  height:100vh;pointer-events:none;
}

.callbar-call{background:var(--beam);color:#04100E}
.callbar-call::after{background:var(--beam)}

.callbar-quote{
  flex:0 0 42%;
  background:var(--ink-2);
  color:var(--white);
  border-left:1px solid var(--line);
}
.callbar-quote::after{background:var(--ink-2)}
/* carries the divider down through the overhang too */
.callbar-quote::before{
  content:"";position:absolute;left:-1px;top:100%;
  width:1px;height:100vh;background:var(--line);pointer-events:none;
}

.callbar svg{width:1.1em;height:1.1em;fill:currentColor;flex:0 0 auto}

/* Reading down the page the header is dead weight and the call bar is the
   useful thing, so the header steps out. Scrolling back up is a navigation
   move, so the header returns and the call bar gets out of the way instead.
   Near the top of the page both are shown. JS only sets these classes below
   880px; the media query further down is the backstop. */
.masthead{transition:transform .28s ease}
body.nav-down .masthead{transform:translateY(-100%)}

/* This uses `translate`, NOT `transform`, on purpose: main.js writes an inline
   `transform` on the bar to keep it hugging the real bottom edge, and an inline
   style beats anything declared here. `translate` is a separate property that
   composes with it, so the two never fight.
   The distance is the bar's visible height rather than 100% — its box carries
   on well below the screen (--bar-drop), so 100% would fling it several hundred
   px and the slide would read as a flicker. */
.callbar{transition:translate .28s ease}
body.nav-up .callbar{
  translate:0 calc(var(--callbar) + env(safe-area-inset-bottom,0px) + 6px);
}

/* No `will-change: transform` on .callbar, deliberately. Promoting a fixed
   bottom bar to its own compositor layer makes mobile Chrome move it
   asynchronously from the page, stranding it part-way up the screen while the
   URL bar collapses. */

/* keep the footer clear of the bar */
@media (max-width:879px){
  .foot{padding-bottom:calc(30px + var(--callbar) + env(safe-area-inset-bottom,0px))}
}

@media (min-width:880px){
  .callbar{display:none}
  body.nav-down .masthead{transform:none}
  body.nav-up .callbar{translate:none}
}

@media print{
  .callbar,.masthead{display:none}
}

/* ---------- reveal ---------- */

/* Only hide these when JS is actually running — otherwise a blocked or broken
   script would leave half the page invisible. The `js` class is set inline in <head>. */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}

/* ---------- responsive ---------- */

/* the strip drops to 2 columns earlier than everything else — at the larger
   mono size, "quotes & estimates" no longer fits a quarter of the page */
@media (max-width:1080px){
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .strip-item:nth-child(3){border-left:0}
  .strip-item:nth-child(n+3){border-top:1px solid var(--line-soft)}
}

@media (max-width:960px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:880px){
  .burger{display:flex}
  .nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--gut) 20px;
  }
  .nav.open{display:flex}
  .nav a{padding:15px 0;border-bottom:1px solid var(--line-soft);font-size:.9rem}
  .nav a[aria-current="page"]::after{display:none}
  .nav a[aria-current="page"]{color:var(--beam)}
  .nav-cta{margin-top:16px;text-align:center;justify-content:center}
  .masthead-in{position:relative}
}

@media (max-width:640px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .form-two{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .logo img{width:150px}
  .sheet-row{grid-template-columns:1fr;gap:6px}
  .sheet-price{margin-top:4px}
  .sheet-price small{display:inline;margin-right:8px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js .reveal{opacity:1;transform:none}
}