/* Scrap Solutions LLC design system. One file. Change a token, not a rule.

   Colors match Tyler's actual logo (mountain/forest mark), extracted 2026-09-06:
   dark green #104d32, green #016d3f, dark brown #3c2619, brown #64412e, slate
   gray #637478. The mountain/roof brown carries the dark surfaces, the green is
   the CTA/accent, and #637478 is used verbatim for muted text.

   The logo FILE itself still doesn't exist in this repo — only its colors were
   supplied, not the image — so the brand mark is still a text wordmark and the
   type scale. When the actual logo file arrives, it drops into the header next
   to .wm and nothing else needs to move.

   No photographs exist yet either. .photoslot is a real, styled block sized to the
   frame a job photo will occupy, so the layout is already correct on the day the
   files arrive and nothing has to be re-measured. */

:root{
  --hdr-h:74px;
  --ink:#3C2619;          /* brand dark brown, from the logo's mountain/roof */
  --ink-deep:#241708;
  --rust:#016D3F;         /* brand green, from the logo, darkened for AA on white */
  --rust-bright:#26AE70;  /* brand green, lightened for dark backgrounds only */
  --mist:#F5F1EA;
  --paper:#FFFFFF;
  --body:#2E2A24;
  --muted:#637478;        /* exact logo slate gray */
  --line:#DCD5CB;
  --line-soft:#EAE4DB;
  --focus:#016D3F;
  --wrap:1320px;
  --r:12px;
  --shadow:0 18px 44px -26px rgba(36,23,8,.5);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --head:"Barlow Condensed","Inter",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--body);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-underline-offset:3px}

/* Accessibility ---------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:14px 20px;border-radius:0 0 var(--r) 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;border-radius:4px;
}
.hdr :where(a,button):focus-visible,.band :where(a,button):focus-visible,
.ftr :where(a,button):focus-visible,.callbar :where(a,button):focus-visible{
  outline-color:var(--rust-bright);
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* Layout ----------------------------------------------------------------- */
.wrap{width:min(100% - 56px,var(--wrap));margin-inline:auto}
@media (max-width:640px){.wrap{width:min(100% - 32px,var(--wrap))}}
section{padding:clamp(52px,6.5vw,92px) 0}
.eyebrow{
  font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--rust);margin:0 0 16px;
}
.band .eyebrow,.hero .eyebrow{color:var(--rust-bright)}
h1,h2,h3{font-family:var(--head);color:var(--ink);font-weight:600;line-height:1.08;
  letter-spacing:0;margin:0 0 18px}
h1{font-size:clamp(38px,5.2vw,68px)}
h2{font-size:clamp(30px,4vw,46px)}
h3{font-size:clamp(21px,2.1vw,25px);line-height:1.2}
.lede{font-size:clamp(17px,1.35vw,20px);color:var(--muted);max-width:72ch;margin:0 0 26px}
.center{text-align:center}
.center .lede{margin-inline:auto}
p{margin:0 0 16px}

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;border-radius:9px;border:2px solid transparent;
  font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--rust);color:#fff;border-color:var(--rust)}
.btn-primary:hover{background:#014F2D}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--rust);color:var(--rust)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{border-color:var(--rust-bright);color:var(--rust-bright)}

/* Wordmark --------------------------------------------------------------- */
/* Real logo file landed 2026-09-08 (assets/photos/scrap-solutions-logo.png, background
   chroma-keyed to transparent from Tyler's flattened JPEG). It was drawn for a white
   background — the dark mountain silhouette and "SOLUTIONS LLC" text nearly vanish
   directly on --ink, verified by compositing it onto #3C2619 before shipping this. So it
   sits in a light .logo-chip rather than bare on the dark header/footer. */
.wm{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:#fff}
.logo-chip{display:inline-flex;align-items:center;background:var(--paper);
  border-radius:8px;padding:7px 14px;width:fit-content}
.logo-chip img{display:block;height:34px;width:auto}
.ftr .logo-chip img{height:30px}
.wm-b{font:600 10.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
  color:#B7A891;margin-top:7px}
.ftr .wm{margin-bottom:14px}
@media (max-width:600px){.logo-chip img{height:28px}}

/* Header ----------------------------------------------------------------- */
.hdr{background:var(--ink);position:sticky;top:0;z-index:100}
.hdr-in{display:flex;align-items:center;gap:22px;min-height:var(--hdr-h)}
.hdr-logo{margin-right:auto;display:flex;align-items:center}
.nav{display:flex;gap:20px}
.nav a{color:#ECE4D8;text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap}
.nav a:hover{color:var(--rust-bright);text-decoration:underline}
.hdr-contact{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto}
.hdr-call{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
  font-weight:700;font-size:17px;padding:2px 4px}
.hdr-call:hover{color:var(--rust-bright)}
.hdr-hours{font-size:12.5px;color:#B0A08D;padding:2px 4px}
.navtoggle{display:none}

@media (max-width:1080px){
  .nav{gap:15px}
  .nav a{font-size:14.5px}
}
@media (max-width:960px){
  .hdr-in{min-height:64px;gap:10px}
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;order:3;
    flex:0 0 auto;width:46px;height:46px;min-width:46px;padding:0;background:transparent;
    border:1px solid rgba(255,255,255,.24);border-radius:9px;cursor:pointer;color:#fff}
  .navtoggle:hover{border-color:var(--rust-bright)}
  .navtoggle-bars{display:block;width:20px;height:14px;position:relative}
  .navtoggle-bars span{position:absolute;left:0;width:100%;height:2px;background:#fff;
    border-radius:2px;transition:transform .18s ease,opacity .18s ease}
  .navtoggle-bars span:nth-child(1){top:0}
  .navtoggle-bars span:nth-child(2){top:6px}
  .navtoggle-bars span:nth-child(3){top:12px}
  .navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(2){opacity:0}
  .navtoggle[aria-expanded="true"] .navtoggle-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  /* The links stay in the DOM when the panel is closed, so a crawler always sees them. */
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--ink-deep);border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 40px rgba(0,0,0,.45);padding:6px 0;
    max-height:calc(100vh - 64px);overflow-y:auto}
  .nav[hidden]{display:none}
  .nav a{display:block;padding:15px 28px;font-size:16.5px;min-height:48px;
    border-bottom:1px solid rgba(255,255,255,.07)}
  .nav a:last-child{border-bottom:0}
  .nav a:hover{background:rgba(255,255,255,.05);text-decoration:none}
}
@media (max-width:960px) and (prefers-reduced-motion:reduce){
  .navtoggle-bars span{transition:none}
}
@media (max-width:600px){
  .hdr-contact{display:none}   /* the sticky call bar carries the phone below 760px */
  .wm-b{font-size:9.5px;letter-spacing:.2em}
}

/* Hero ------------------------------------------------------------------- */
.hero{background:var(--ink);color:#ECE4D8;padding:clamp(40px,4vw,68px) 0 clamp(48px,5vw,76px);
  position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -12% -45% 45%;height:75%;
  background:radial-gradient(closest-side,rgba(30,156,100,.16),transparent);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(400px,.8fr);
  gap:clamp(28px,4vw,56px);align-items:start;position:relative;z-index:1}
.hero h1{color:#fff}
.hero .lede{color:#CBB89E;max-width:52ch;margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  font-size:14.5px;color:#D6C7AE}
.chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rust-bright);
  flex:0 0 auto}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}

/* Trust strip ------------------------------------------------------------ */
.trust{background:var(--ink-deep);border-top:1px solid rgba(255,255,255,.09);padding:0}
.signals{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.2vw,34px);margin:0;padding:26px 0}
.signals li{color:#C2AF98;font-size:14px;line-height:1.45;
  padding-left:15px;border-left:2px solid var(--rust-bright)}
.signals b{display:block;font:600 15.5px/1.3 var(--sans);color:#fff;margin-bottom:5px}
@media (max-width:900px){.signals{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.signals{grid-template-columns:1fr;gap:15px}}

/* Cards ------------------------------------------------------------------ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;
  align-items:start}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px;display:flex;flex-direction:column}
.card h3{margin-bottom:10px}
.card p{margin:0 0 14px;font-size:16px}
.card p:last-child{margin-bottom:0}
.card .fit{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-size:15px;color:var(--muted)}
.alt{background:var(--mist)}
.alt .card{background:var(--paper)}

/* Numbered steps --------------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.steps li{counter-increment:s;padding-top:13px;border-top:3px solid var(--rust)}
.steps li::before{content:"0" counter(s);display:block;font:700 13px/1 var(--sans);
  letter-spacing:.12em;color:var(--rust);margin-bottom:10px}
.steps .illusfig{aspect-ratio:1/1;margin:0 0 12px;max-width:120px;border:0;background:transparent}
.steps h3{margin-bottom:7px;font-size:clamp(19px,1.9vw,22px)}
.steps p{margin:0;color:var(--muted);font-size:15.5px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* Tick and cross lists --------------------------------------------------- */
.ticks,.crosses{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:11px}
.ticks.two,.crosses.two{grid-template-columns:repeat(2,1fr);gap:11px 40px}
@media (max-width:700px){.ticks.two,.crosses.two{grid-template-columns:1fr}}
.ticks li{position:relative;padding-left:30px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:2px;top:.36em;width:14px;height:8px;
  border-left:2.5px solid var(--rust);border-bottom:2.5px solid var(--rust);
  transform:rotate(-45deg)}
.crosses li{position:relative;padding-left:30px;line-height:1.5;color:var(--muted)}
.crosses li::before,.crosses li::after{content:"";position:absolute;left:4px;top:.62em;
  width:14px;height:2.5px;background:#8A7F73}
.crosses li::before{transform:rotate(45deg)}
.crosses li::after{transform:rotate(-45deg)}

/* Price table ------------------------------------------------------------ */
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 12px;padding:0;
  list-style:none}
.prices li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;display:flex;flex-direction:column;gap:6px}
.prices .amt{font:600 clamp(32px,3.4vw,42px)/1 var(--head);color:var(--ink)}
.prices .lab{font:700 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--rust)}
.prices .sub{font-size:14.5px;color:var(--muted);line-height:1.45;margin:0}
@media (max-width:980px){.prices{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.prices{grid-template-columns:1fr}}

/* Photo slots ------------------------------------------------------------ */
/* A real block at the size a real photograph will occupy. Not a broken <img>, not a
   stock image, not a fake URL. See FACTS.md: no photos are in this repo yet. */
.photoslot{margin:0;border-radius:var(--r);overflow:hidden;border:1px dashed #C9BBA5;
  background:
    repeating-linear-gradient(135deg,#F2EEE6 0 12px,#EAE2D4 12px 24px);
  aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:22px;text-align:center;color:#655B4E}
.photoslot svg{opacity:.55}
.photoslot .ps-label{font:700 11px/1.4 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;max-width:26ch}
.photoslot.tall{aspect-ratio:3/4}
.photoslot.wide{aspect-ratio:16/9}

/* Real photos ------------------------------------------------------------ */
/* Same box model as .photoslot (radius, aspect-ratio) so a slot and a real photo
   drop into the same layout with no re-measuring. Used only where a real,
   Tyler-supplied photo actually exists in assets/photos/ — see FACTS.md. */
.photofig{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line);background:var(--mist)}
.photofig img{width:100%;height:100%;object-fit:cover;display:block}
.photofig.tall{aspect-ratio:3/4}
.photofig.wide{aspect-ratio:16/9}
/* Illustrations ---------------------------------------------------------- */
/* Flat vector section art. Same box model as .photofig so art and photos drop into
   the same layout, but visually distinct on purpose: a soft tinted ground and
   contain-fit, so an illustration never reads as a cropped photograph of real work.
   See illustration() in build.py for why this is a separate thing. */
/* Box aspect MATCHES the art so nothing letterboxes: the section art is square
   (1200x1200) and the hero banner is ~21:9 (1600x686). A 4:3 box around square
   art left ~120px of dead space each side and rendered 726px tall, which swamped
   the section it was supposed to support. */
.illusfig{margin:0 auto 26px;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;
  max-width:340px;width:100%;
  border:1px solid var(--line);background:var(--mist);
  display:flex;align-items:center;justify-content:center}
.illusfig img{width:100%;height:100%;object-fit:contain;display:block}
.illusfig.tall{aspect-ratio:3/4}
.illusfig.wide{aspect-ratio:7/3;max-width:100%;border:0;background:transparent;
  border-radius:0;margin-bottom:0}

.photoset{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:820px){.photoset{grid-template-columns:1fr}}

/* Situations / link lists ------------------------------------------------ */
.sits{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:13px 50px}
.sits li{padding-left:28px;position:relative;line-height:1.5}
.sits li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:2px;
  background:var(--rust)}
@media (max-width:760px){.sits{grid-template-columns:1fr}}

/* Service index ---------------------------------------------------------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}}
.svc{display:flex;flex-direction:column;gap:8px;padding:24px 22px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease}
a.svc:hover{border-color:var(--rust);transform:translateY(-2px)}
/* The card title is H3 on the home page and H2 on /services/, because the
   level belongs to the page, not the card. line-height is restated because
   h3 gets 1.2 from the global `h3` rule while h2 keeps 1.08 from `h1,h2,h3`,
   and there is no declaration here to copy it from. */
.svc h3,
.svc h2{margin:0;font-size:clamp(19px,1.9vw,22px);line-height:1.2}
.svc p{margin:0;font-size:15px;color:var(--muted);line-height:1.5}
.svc .go{margin-top:auto;padding-top:12px;font:600 14px/1 var(--sans);color:var(--rust)}

/* Form ------------------------------------------------------------------- */
.formcard{background:var(--mist);border-radius:var(--r);padding:clamp(20px,2.2vw,28px);
  box-shadow:var(--shadow);border:1px solid var(--line)}
.formcard h2{font-size:clamp(23px,2.2vw,28px);margin-bottom:6px}
.formcard .note{font-size:14.5px;color:var(--muted);margin:0 0 16px}
.field{margin-bottom:13px}
.field label{display:block;font:700 12px/1 var(--sans);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;min-height:46px;padding:10px 13px;border:1px solid #C9BBA5;border-radius:8px;
  background:var(--paper);font:400 16px/1.4 var(--sans);color:var(--body);
}
.field textarea{min-height:92px;resize:vertical}
.field .hint{font-size:13.5px;color:var(--muted);margin:6px 0 0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.consent{display:flex;gap:10px;align-items:flex-start;margin:14px 0;
  font-size:13px;line-height:1.45;color:var(--muted)}
.consent input{width:24px;height:24px;min-height:0;flex:0 0 auto;margin-top:1px}
.formcard .btn{width:100%;min-height:52px}
.privacy-line{font-size:13px;color:var(--muted);margin:10px 0 0;text-align:center}
.hp{position:absolute;left:-9999px}
.formstatus{margin:14px 0 0;padding:12px 14px;border-radius:8px;font-size:14.5px;line-height:1.45}
.formstatus--ok{background:#E7F2EA;color:#14532D;border:1px solid #BBD9C6}
.formstatus--error{background:#FBEAEA;color:#7A1F1F;border:1px solid #E7C0C0}
.formcard.is-sent form{display:none}
/* "Got it." is form STATE, not a section of the document, so it is a <p> now.
   This rule already owned the margin; the rest came from the global `h1,h2,h3`
   and `h3` blocks, which a <p> does not match, so they are restated here and
   the two selectors share one declaration block. */
.form-done h3,
.form-done .form-done-title{font-family:var(--head);color:var(--ink);font-weight:600;
  font-size:clamp(21px,2.1vw,25px);line-height:1.2;letter-spacing:0;margin:0 0 10px}
.form-done p{margin:0;color:var(--muted)}

/* FAQ -------------------------------------------------------------------- */
.faq{max-width:980px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative;
  font:600 18px/1.4 var(--sans);color:var(--ink)}
/* The question is a heading now. It must not LOOK like one: font:inherit takes
   family, size, weight and line-height from the summary, and display:inline
   keeps the summary a single line box so the +/- marker stays put. */
.faq summary h2,
.faq summary h3{font:inherit;color:inherit;letter-spacing:inherit;margin:0;display:inline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:15px;font-size:26px;
  font-weight:400;color:var(--rust);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 20px;color:var(--muted);max-width:74ch}
.faq .a p{margin:0 0 12px}
.faq .a p:last-child{margin:0}

/* Bands ------------------------------------------------------------------ */
.band{background:var(--ink);color:#ECE4D8}
.band h2{color:#fff}
.band .lede{color:#CBB89E}
.band-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Footer ----------------------------------------------------------------- */
.ftr{background:var(--ink-deep);color:#B8A88F;font-size:15px;padding:58px 0 32px}
.ftr a{color:#E5DCCB}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.12)}
.ftr h3,
.ftr .ftr-h{color:#fff;font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;line-height:1.2;margin:0 0 15px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:5px}
.ftr li a{display:inline-block;padding:5px 0;min-height:24px;font-size:14.5px}
.ftr-legal{padding-top:24px;font-size:13.5px;line-height:1.65;color:#A89880}
.ftr-legal p{margin:0 0 10px;max-width:92ch}
@media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:560px){.ftr-grid{grid-template-columns:1fr}}

/* Sticky mobile call bar ------------------------------------------------- */
.callbar{display:none}
@media (max-width:760px){
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;
    left:0;right:0;bottom:0;z-index:120;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(36,23,8,.97);border-top:1px solid rgba(255,255,255,.14);
  }
  .callbar .btn{min-height:52px;font-size:15.5px;padding:12px 12px}
  body{padding-bottom:86px}
}

/* Legal / long-form pages ------------------------------------------------ */
.legal{padding-top:clamp(36px,4vw,58px)}
.legal .wrap{max-width:800px}
.crumb{font-size:14px;color:var(--muted);margin:0 0 18px;display:flex;gap:9px;flex-wrap:wrap}
.crumb a{color:var(--muted)}
.crumb span[aria-hidden]{opacity:.5}
.legal-date{font-size:14px;color:var(--muted);margin:-6px 0 24px}
.legal h2{font-size:clamp(22px,2.2vw,27px);margin:36px 0 12px}
.legal h3{font-size:19px;margin:24px 0 8px}
.legal p{margin:0 0 15px}
.legal ul,.legal ol{margin:0 0 18px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal .lede{margin-bottom:8px}
.pagetop{padding-bottom:clamp(28px,3.2vw,44px)}
.pagetop .wrap{max-width:940px}
.pagetop h1{font-size:clamp(34px,4.4vw,58px)}
.pagetop + .alt{border-top:1px solid var(--line)}

/* Owner note (the real differentiator quote, attributed to Tyler) --------- */
.ownernote{border-left:4px solid var(--rust);background:var(--mist);border-radius:0 var(--r) var(--r) 0;
  padding:24px 26px;margin:0}
.ownernote blockquote{margin:0}
.ownernote blockquote p{margin:0;font-size:clamp(18px,1.7vw,21px);line-height:1.5;
  color:var(--ink);font-weight:500}
.ownernote figcaption{margin-top:14px;font-size:14.5px;color:var(--muted)}
.ownernote figcaption b{color:var(--ink);font-weight:600}

/* Contact cards ---------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.contact-card{display:flex;flex-direction:column;gap:5px;padding:26px 24px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease}
a.contact-card:hover{border-color:var(--rust);transform:translateY(-2px)}
.contact-label{font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--rust)}
.contact-value{font:600 clamp(19px,1.9vw,23px)/1.25 var(--sans);color:var(--ink);
  overflow-wrap:anywhere}
.contact-note{font-size:14px;color:var(--muted)}
.contact-card.is-static{background:var(--mist)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* Service area hub ------------------------------------------------------- */
.citylist{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0}
.citylist li{margin:0}
.citylist a,.citylist span{display:inline-block;font-size:14.5px;padding:8px 15px;
  border-radius:100px;border:1px solid var(--line);background:var(--mist);color:var(--muted);
  min-height:38px}
.citylist a{color:var(--ink);font-weight:500;text-decoration:none;border-color:#D6C9B5}
.citylist a:hover{border-color:var(--rust);color:var(--rust)}
.arealist{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:900px){.arealist{grid-template-columns:1fr}}
.area{margin:0;padding:24px 26px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r)}
.area h3{margin:0 0 8px}
.area p{margin:0 0 14px;font-size:15.5px;color:var(--muted)}

/* Notices ---------------------------------------------------------------- */
.notice{border:2px solid var(--rust);border-radius:var(--r);padding:clamp(20px,2.4vw,30px);
  background:#FDF4EE}
.notice h2,.notice h3{margin:0 0 12px}
.notice p:last-child{margin:0}
.disclaimer{font-size:13.5px;line-height:1.6;color:var(--muted);max-width:84ch;
  margin:0 auto;padding:20px 22px;background:var(--mist);border-radius:var(--r);
  border:1px solid var(--line)}
.disclaimer p:last-child{margin:0}