/* ===========================================================================
   Dream Builders — Endicott, New York
   Remodeling contractor. Bathrooms, kitchens, decks, flooring, windows, siding.

   One stylesheet. Zero frameworks, zero utility soup.
   Nothing in here touches, intercepts or replaces native scrolling.

   Palette      warm paper base · deep pine sections · copper accent
   Display      Big Shoulders Display 700/800
   Body         Hanken Grotesk 400/500/600/700
   Built        mobile first at 390px, desktop derived
   ---------------------------------------------------------------------------
   CONTENTS
   00  tokens
   01  reset + base type
   02  layout primitives (wrap, sec, bands)
   03  buttons + links
   04  header, nav, mobile sheet, sticky call bar
   05  hero
   06  marquee strip
   07  split blocks + figures
   08  service tiles
   09  photo breakout
   10  process ladder
   11  mosaic gallery
   12  reviews rail
   13  service area
   14  faq
   15  cta band
   16  form
   17  footer
   18  page heroes (interior pages)
   19  motion + reveal
   20  accessibility + print
   ========================================================================= */

/* ------------------------------------------------------------------ 00 tokens */
:root {
  /* surfaces */
  --paper:      #f8f5f0;
  --paper-2:    #efe9e0;
  --paper-3:    #e6ddd1;
  --pine:       #12211e;
  --pine-2:     #1b3330;
  --pine-3:     #0c1816;

  /* ink */
  --ink:        #14171a;
  --ink-2:      #4a5254;
  --ink-3:      #6c7476;
  --on-pine:    #f4f1ea;
  --on-pine-2:  #b9c6c2;

  /* accent */
  --copper:     #b4551f;
  --copper-hi:  #9c4718;
  --copper-lt:  #e08a4e;
  --copper-wash:#f3e5d8;

  /* lines + shadow */
  --line:       #e2d9cc;
  --line-2:     #d3c7b6;
  --line-dark:  rgba(244, 241, 234, .16);
  --sh-s:       0 1px 2px rgba(18, 33, 30, .06), 0 4px 14px rgba(18, 33, 30, .05);
  --sh-m:       0 2px 6px rgba(18, 33, 30, .07), 0 18px 44px rgba(18, 33, 30, .10);
  --sh-l:       0 4px 10px rgba(18, 33, 30, .08), 0 34px 80px rgba(18, 33, 30, .16);

  /* type */
  --display: "Big Shoulders Display", "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --body:    "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* rhythm */
  --gut:     20px;
  --wrap:    1200px;
  --sec-y:   clamp(58px, 9.5vw, 122px);
  --sec-y-s: clamp(42px, 6.5vw, 78px);
  --r-s:     8px;
  --r-m:     14px;
  --r-l:     22px;

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 620px)  { :root { --gut: 30px; } }
@media (min-width: 1024px) { :root { --gut: 44px; } }

/* --------------------------------------------------- 01 reset + base type */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: .002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--paper-3); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(46px, 12.4vw, 96px); }
h2 { font-size: clamp(34px, 8.4vw, 62px); line-height: .98; }
h3 { font-size: clamp(23px, 4.4vw, 31px); line-height: 1.04; font-weight: 700; }
h4 { font-size: clamp(19px, 3vw, 22px);  line-height: 1.12; font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(17px, 2.1vw, 19.5px);
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 450;
  max-width: 56ch;
}

.kicker {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--copper);
  flex: 0 0 auto;
}
.kicker.centered { justify-content: center; }

.accent { color: var(--copper); }
.on-pine .accent { color: var(--copper-lt); }

.small { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.on-pine .small { color: var(--on-pine-2); }

b, strong { font-weight: 700; }

hr.rule {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 0;
}

::selection { background: var(--copper); color: #fff; }

/* --------------------------------------------- 02 layout primitives */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap-n { max-width: 880px; }

.sec { padding-block: var(--sec-y); position: relative; }
.sec-s { padding-block: var(--sec-y-s); }
.sec-top-0 { padding-top: 0; }

.bg-paper  { background: var(--paper); }
.bg-paper2 { background: var(--paper-2); }
.bg-pine   { background: var(--pine); }

.on-pine { color: var(--on-pine); }
.on-pine h1, .on-pine h2, .on-pine h3, .on-pine h4 { color: var(--on-pine); }
.on-pine .lead { color: var(--on-pine-2); }
.on-pine .kicker { color: var(--copper-lt); }
.on-pine .kicker::before { background: var(--copper-lt); }

/* a hairline that reads as a seam between bands rather than a border */
.seam { border-top: 1px solid var(--line); }

.shead { max-width: 30ch; }
.shead.centered { max-width: 24ch; margin-inline: auto; text-align: center; }
.shead-row {
  display: grid;
  gap: 18px;
  align-items: end;
  margin-bottom: clamp(30px, 4.5vw, 54px);
}
.shead-row .lead { max-width: 42ch; }

@media (min-width: 900px) {
  .shead-row { grid-template-columns: 1.15fr .85fr; gap: 46px; }
}

.mt-xs { margin-top: 10px; }
.mt-s  { margin-top: 18px; }
.mt-m  { margin-top: 30px; }
.mt-l  { margin-top: clamp(34px, 5vw, 60px); }

/* ------------------------------------------------- 03 buttons + links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 15px 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .006em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease),
              box-shadow .25s var(--ease);
}
.btn svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-copper { background: var(--copper); color: #fff; box-shadow: var(--sh-s); }
.btn-copper:hover { background: var(--copper-hi); box-shadow: var(--sh-m); }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #000; }

.btn-o {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-o:hover { border-color: var(--ink); background: rgba(20, 23, 26, .04); }

.btn-light { background: var(--paper); color: var(--pine); }
.btn-light:hover { background: #fff; }

.btn-o-light {
  background: transparent;
  color: var(--on-pine);
  border-color: var(--line-dark);
}
.btn-o-light:hover { border-color: var(--on-pine); background: rgba(244, 241, 234, .08); }

.btn-sm { min-height: 46px; padding: 11px 20px; font-size: 14.5px; }
.btn-wide { width: 100%; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cta-row.centered { justify-content: center; }

/* the arrow link used under every block of copy */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--copper);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: gap .25s var(--ease), border-color .25s var(--ease);
}
.tlink svg { width: 17px; height: 17px; }
.tlink:hover { gap: 15px; border-bottom-color: var(--copper); }
.on-pine .tlink { color: var(--copper-lt); }
.on-pine .tlink:hover { border-bottom-color: var(--copper-lt); }

a { color: var(--copper); }
a:hover { color: var(--copper-hi); }
.on-pine a { color: var(--copper-lt); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--pine);
  color: var(--on-pine);
  padding: 14px 20px;
  border-radius: 0 0 var(--r-s) 0;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ------------------------------------- 04 header / nav / sheet / call bar */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  transition: transform .38s var(--ease), background-color .3s var(--ease),
              box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 16, 15, .62), rgba(8, 16, 15, 0));
  opacity: 1;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.hdr.solid {
  background: rgba(248, 245, 240, .94);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(18, 33, 30, .04);
}
.hdr.solid::before { opacity: 0; }
.hdr.up { transform: translateY(-100%); }
.hdr.always-solid {
  position: sticky;
  background: rgba(248, 245, 240, .94);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--line);
}
.hdr.always-solid::before { opacity: 0; }

.hdr-in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 13px var(--gut);
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

/* typeset wordmark — there is no logo file, so the type IS the mark.
   No plate, no box, no card: it sits straight on whatever is behind it. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
}
.brand-mk {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 2px solid var(--copper-lt);
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--copper-lt);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.brand-wm { display: grid; min-width: 0; }
.brand-wm b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 25px;
  line-height: .88;
  letter-spacing: .012em;
  color: var(--on-pine);
  text-transform: uppercase;
  transition: color .3s var(--ease);
  white-space: nowrap;
}
.brand-wm span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--copper-lt);
  margin-top: 3px;
  transition: color .3s var(--ease);
  white-space: nowrap;
}
.hdr.solid .brand-wm b,
.hdr.always-solid .brand-wm b { color: var(--ink); }
.hdr.solid .brand-wm span,
.hdr.always-solid .brand-wm span { color: var(--copper); }
.hdr.solid .brand-mk,
.hdr.always-solid .brand-mk { border-color: var(--copper); color: var(--copper); }

.nav { display: none; gap: 4px; }
.nav a {
  padding: 10px 13px;
  border-radius: var(--r-s);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .008em;
  color: var(--on-pine);
  text-decoration: none;
  transition: color .22s var(--ease), background-color .22s var(--ease);
}
.nav a:hover { background: rgba(244, 241, 234, .12); }
.nav a[aria-current="page"] { color: var(--copper-lt); }
.hdr.solid .nav a, .hdr.always-solid .nav a { color: var(--ink-2); }
.hdr.solid .nav a:hover, .hdr.always-solid .nav a:hover { background: rgba(20, 23, 26, .05); color: var(--ink); }
.hdr.solid .nav a[aria-current="page"],
.hdr.always-solid .nav a[aria-current="page"] { color: var(--copper); }

.hdr-cta { display: none; }
.hdr.solid .hdr-cta, .hdr.always-solid .hdr-cta { background: var(--copper); color: #fff; border-color: transparent; }

.burger {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  gap: 5px;
  background: transparent;
  border: 1.5px solid rgba(244, 241, 234, .3);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.burger i {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--on-pine);
  border-radius: 2px;
  transition: background-color .25s var(--ease);
}
.burger:hover { background: rgba(244, 241, 234, .1); }
.hdr.solid .burger, .hdr.always-solid .burger { border-color: var(--line-2); }
.hdr.solid .burger i, .hdr.always-solid .burger i { background: var(--ink); }

/* mobile sheet */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--pine);
  color: var(--on-pine);
  padding: 18px var(--gut) calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  overflow-y: auto;
}
.sheet.open { visibility: visible; opacity: 1; transform: none; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sheet-top .brand-wm b { color: var(--on-pine); }
.sheet-x {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  background: transparent;
  border: 1.5px solid rgba(244, 241, 234, .3);
  border-radius: 50%;
  color: var(--on-pine);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.sheet-x:hover { background: rgba(244, 241, 234, .1); }
.sheet-nav { display: grid; margin-top: 26px; }
.sheet-nav a {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1;
  letter-spacing: .004em;
  color: var(--on-pine);
  text-decoration: none;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-dark);
  transition: color .2s var(--ease), padding-left .25s var(--ease);
}
.sheet-nav a:hover { color: var(--copper-lt); padding-left: 8px; }
.sheet-foot { margin-top: auto; padding-top: 30px; display: grid; gap: 12px; }
.sheet-foot .small { color: var(--on-pine-2); }

/* sticky call bar (phones) */
.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  gap: 10px;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: rgba(18, 33, 30, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-dark);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.callbar.show { transform: none; }
.callbar .btn { flex: 1 1 0; min-height: 50px; padding-inline: 12px; font-size: 15px; }
@media (min-width: 900px) { .callbar { display: none; } }

/* --------------------------------------------------------------- 05 hero */
.hero {
  position: relative;
  min-height: 640px;
  min-height: 94svh;
  display: grid;
  align-items: center;
  isolation: isolate;
  background: var(--pine-3);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(8, 16, 15, .74) 0%, rgba(8, 16, 15, .34) 32%, rgba(8, 16, 15, .58) 68%, rgba(8, 16, 15, .9) 100%),
    radial-gradient(120% 80% at 50% 42%, rgba(8, 16, 15, 0) 30%, rgba(8, 16, 15, .5) 100%);
}

.hero-in {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding: 132px var(--gut) clamp(72px, 12vw, 128px);
  text-align: center;
  color: var(--on-pine);
}

/* the hero opens with the identity: a typeset lockup, floating, no plate */
.lockup { display: grid; justify-items: center; gap: 9px; margin-bottom: 22px; }
.lockup-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 11vw, 74px);
  line-height: .86;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--on-pine);
  text-shadow: 0 2px 30px rgba(8, 16, 15, .5);
}
.lockup-name em { font-style: normal; display: block; color: var(--copper-lt); }
.lockup-rule {
  width: min(280px, 62vw);
  height: 2px;
  background: linear-gradient(to right, transparent, var(--copper-lt) 22%, var(--copper-lt) 78%, transparent);
}
.lockup-sub {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--on-pine-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 17px;
  border: 1px solid rgba(244, 241, 234, .34);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-pine);
  background: rgba(8, 16, 15, .3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pill svg { width: 14px; height: 14px; fill: var(--copper-lt); }

.hero h1 {
  margin: 20px 0 0;
  color: #fff;
  text-shadow: 0 2px 40px rgba(8, 16, 15, .45);
}
.hero h1 .accent { color: var(--copper-lt); display: block; }

.hero-sub {
  margin: 18px auto 0;
  max-width: 30ch;
  font-size: clamp(16.5px, 2.2vw, 19px);
  line-height: 1.5;
  color: rgba(244, 241, 234, .92);
}

.hero .cta-row { margin-top: 28px; justify-content: center; }
.hero .cta-row .btn { flex: 1 1 260px; max-width: 320px; }

.trust {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}
.trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(244, 241, 234, .86);
}
.trust svg { width: 15px; height: 15px; fill: var(--copper-lt); flex: 0 0 auto; }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .6);
}
.scroll-hint i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--copper-lt), transparent);
}
@media (min-width: 1024px) { .scroll-hint { display: flex; flex-direction: column; } }

@media (min-width: 620px) {
  .hero-bg img { object-position: 50% 50%; }
}
@media (min-width: 900px) {
  .hero { min-height: 92svh; }
  .hero-in { padding-top: 150px; }
}

/* ------------------------------------------------------- 06 marquee strip */
.strip {
  background: var(--pine);
  color: var(--on-pine);
  border-block: 1px solid var(--pine-2);
  overflow: hidden;
  padding-block: 17px;
}
.strip-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: slide 42s linear infinite;
}
.strip-set {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  flex: 0 0 auto;
}
.strip-set span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.strip-set i {
  font-style: normal;
  color: var(--copper-lt);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .05em;
}
@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ------------------------------------------- 07 split blocks + figures */
.split {
  display: grid;
  gap: clamp(32px, 5vw, 62px);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(44px, 5.4vw, 78px); }
  .split.split-wide-body { grid-template-columns: .92fr 1.08fr; }
  .split.flip .split-media { order: 2; }
}

.split-body > .lead { margin-top: 16px; }

.fig {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-m);
  background: linear-gradient(150deg, var(--paper-3), var(--paper-2));
  box-shadow: var(--sh-m);
}
.fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.fig-plain { box-shadow: none; }
.fig-tall  { aspect-ratio: 4 / 5; }
.fig-sq    { aspect-ratio: 1 / 1; }
.fig-cine  { aspect-ratio: 16 / 10; }
.fig-wide  { aspect-ratio: 3 / 2; }

/* the offset pair — the composition that keeps pages from feeling gridded */
.fig-off { position: relative; padding-bottom: 46px; padding-right: 42px; }
.fig-off .fig-tall { width: 84%; }
.fig-off .fig-sq {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  border: 6px solid var(--paper);
  border-radius: var(--r-m);
}
.bg-paper2 .fig-off .fig-sq { border-color: var(--paper-2); }
.on-pine .fig-off .fig-sq { border-color: var(--pine); }

@media (min-width: 620px) {
  .fig-off { padding-bottom: 58px; padding-right: 56px; }
  .fig-off .fig-sq { width: 46%; }
}

/* the plain two-up */
.fig-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 2px; }
.points li {
  display: grid;
  gap: 3px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.points li:last-child { border-bottom: 1px solid var(--line); }
.points li b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .006em;
  line-height: 1.1;
  color: var(--ink);
}
.on-pine .points li { border-color: var(--line-dark); color: var(--on-pine-2); }
.on-pine .points li b { color: var(--on-pine); }

/* pull quote — a real review, used as an editorial moment */
.pquote { margin: 0; }
.pquote blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 6.4vw, 46px);
  line-height: 1.03;
  letter-spacing: -.004em;
}
.pquote blockquote::before { content: "“"; color: var(--copper-lt); }
.pquote blockquote::after  { content: "”"; color: var(--copper-lt); }
.pquote figcaption {
  margin-top: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-pine-2);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pquote figcaption .stars { display: inline-flex; gap: 2px; }
.pquote figcaption .stars svg { width: 14px; height: 14px; fill: var(--copper-lt); }

/* ------------------------------------------------------ 08 service tiles */
.tiles {
  display: grid;
  gap: 18px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.bg-paper2 .tile { background: #fdfcfa; }
.tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-l);
  border-color: var(--line-2);
}
.tile:hover .tile-ph img { transform: scale(1.05); }

.tile-ph {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--paper-3);
}
.tile-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tile-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 16, 15, .58), rgba(8, 16, 15, 0) 52%);
}
.tile-n {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 2;
  font-family: var(--display);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(244, 241, 234, .72);
  letter-spacing: .02em;
}
.tile-ph h3 {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 15px;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 18px rgba(8, 16, 15, .55);
}
.tile-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; }
.tile-body p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.tile-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.tile-tags li {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--copper);
  background: var(--copper-wash);
  border-radius: 999px;
  padding: 5px 11px;
}
.tile-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--copper);
  transition: gap .25s var(--ease);
}
.tile-go svg { width: 16px; height: 16px; }
.tile:hover .tile-go { gap: 14px; }

@media (min-width: 700px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: 22px; }
  /* the stagger: even tiles drop, so the grid reads composed rather than tabular */
  .tiles.stagger .tile:nth-child(even) { margin-top: 46px; }
}
@media (min-width: 1080px) {
  .tiles { gap: 26px 26px; }
  .tiles.stagger .tile:nth-child(even) { margin-top: 66px; }
}

/* ------------------------------------------------------ 09 photo breakout */
.breakout {
  position: relative;
  isolation: isolate;
  background: var(--pine-3);
  color: var(--on-pine);
  overflow: hidden;
}
.breakout-media { position: absolute; inset: 0; z-index: -2; }
.breakout-media img { width: 100%; height: 100%; object-fit: cover; }
.breakout-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(8, 16, 15, .92) 6%, rgba(8, 16, 15, .72) 44%, rgba(8, 16, 15, .42) 100%);
}
.breakout-in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(72px, 13vw, 148px) var(--gut);
}
.breakout-in > * { max-width: 40ch; }
.breakout .lead { color: rgba(244, 241, 234, .88); }

/* --------------------------------------------------- 10 process ladder */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.lad {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 6px 18px;
  padding: 26px 0;
  border-top: 1px solid var(--line-dark);
  align-items: start;
}
.lad:last-child { border-bottom: 1px solid var(--line-dark); }
.lad-n {
  grid-row: span 2;
  font-family: var(--display);
  font-weight: 800;
  font-size: 44px;
  line-height: .84;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--copper-lt);
  letter-spacing: .02em;
}
.lad h3 { color: var(--on-pine); }
.lad p { margin: 0; color: var(--on-pine-2); font-size: 15.5px; line-height: 1.55; }

@media (min-width: 900px) {
  .ladder { grid-template-columns: 1fr 1fr; column-gap: 54px; }
  .lad { padding: 30px 0; }
  .lad:nth-child(2) { border-top: 1px solid var(--line-dark); }
  .lad:nth-last-child(2) { border-bottom: 1px solid var(--line-dark); }
  .lad-n { font-size: 54px; }
}

/* ---------------------------------------------------- 11 mosaic gallery */
.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mosaic .fig { border-radius: var(--r-s); box-shadow: none; aspect-ratio: 1 / 1; }
.mosaic .fig:first-child { grid-column: span 2; aspect-ratio: 16 / 11; }
.mosaic .fig img:hover { transform: scale(1.04); }

@media (min-width: 760px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .mosaic .fig:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
  .mosaic .fig:nth-child(4) { grid-column: span 2; aspect-ratio: 2 / 1; }
}
.mosaic-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-3);
  max-width: 62ch;
}
.on-pine .mosaic-note { color: var(--on-pine-2); }

/* ------------------------------------------------------ 12 reviews rail */
.revs {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px var(--gut) 8px;
  margin-inline: calc(var(--gut) * -1);
}
.revs::-webkit-scrollbar { display: none; }
.rev {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(84vw, 400px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--sh-s);
}
.bg-paper2 .rev { background: #fdfcfa; }
.rev-stars { display: inline-flex; gap: 3px; }
.rev-stars svg { width: 17px; height: 17px; fill: var(--copper); }
.rev p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.rev-by {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-top: 1px solid var(--line);
}
.rev-av {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pine);
  color: var(--copper-lt);
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .03em;
}
.rev-by b { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; }
.rev-by span { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }

.rev-hint {
  margin-top: 16px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rev-hint svg { width: 15px; height: 15px; fill: var(--ink-3); }

@media (min-width: 1080px) {
  .revs { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .rev { width: auto; }
  .rev-hint { display: none; }
}

/* --------------------------------------------------- 13 service area */
.area-g { display: grid; gap: clamp(30px, 4.5vw, 54px); }
@media (min-width: 900px) { .area-g { grid-template-columns: 1fr 1fr; align-items: start; } }

.area-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
.area-list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 9px;
}
.area-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--copper);
  flex: 0 0 auto;
}
@media (min-width: 620px) { .area-list { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------- 14 faq */
.faq { display: grid; gap: 0; max-width: 78ch; }
.faq details {
  border-top: 1px solid var(--line);
  padding: 4px 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 3.6vw, 25px);
  line-height: 1.12;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border-right: 2px solid var(--copper);
  border-bottom: 2px solid var(--copper);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .28s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq details > div { padding: 0 0 22px; max-width: 66ch; }
.faq details p { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }

/* -------------------------------------------------------- 15 cta band */
.band {
  background: var(--copper);
  color: #fff;
}
.band-in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(52px, 8vw, 92px) var(--gut);
  display: grid;
  gap: 26px;
  align-items: center;
}
.band h2 { color: #fff; max-width: 20ch; }
.band p { color: rgba(255, 255, 255, .92); max-width: 46ch; font-size: 17px; }
.band .btn-light { color: var(--copper-hi); }
.band .btn-o-light { color: #fff; border-color: rgba(255, 255, 255, .5); }
.band .btn-o-light:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
@media (min-width: 900px) {
  .band-in { grid-template-columns: 1.2fr auto; gap: 46px; }
}

/* ------------------------------------------------------------ 16 form */
.form-g { display: grid; gap: clamp(32px, 5vw, 62px); }
@media (min-width: 940px) { .form-g { grid-template-columns: .9fr 1.1fr; align-items: start; } }

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(22px, 3.4vw, 34px);
  box-shadow: var(--sh-m);
}
.bg-paper2 .form-card { background: #fdfcfa; }
.on-pine .form-card { background: var(--pine-2); border-color: var(--line-dark); }

.field-grid { display: grid; gap: 14px; }
@media (min-width: 560px) { .field-grid.two { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 7px; }
.field label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.on-pine .field label { color: var(--on-pine-2); }
.field .req { color: var(--copper); }
.on-pine .field .req { color: var(--copper-lt); }

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-s);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5254' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(180, 85, 31, .18);
}
.field input::placeholder, .field textarea::placeholder { color: #9aa2a4; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-msg { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); min-height: 1.2em; }
.form-msg.ok  { color: #1f6b46; font-weight: 600; }
.form-msg.err { color: #9c2c1a; font-weight: 600; }
.on-pine .form-msg { color: var(--on-pine-2); }
.on-pine .form-msg.ok { color: #8fd6ad; }
.on-pine .form-msg.err { color: #f0a48f; }

.form-note { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.on-pine .form-note { color: var(--on-pine-2); }

/* the contact rail beside the form */
.crail { display: grid; gap: 4px; }
.crail-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 16px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.crail-item:last-child { border-bottom: 1px solid var(--line); }
.crail-ic {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--copper-wash);
}
.crail-ic svg { width: 20px; height: 20px; fill: var(--copper); }
.crail-item span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.crail-item b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  color: var(--ink);
}
a.crail-item:hover b { color: var(--copper); }
.on-pine .crail-item { border-color: var(--line-dark); }
.on-pine .crail-item b { color: var(--on-pine); }
.on-pine .crail-item span { color: var(--on-pine-2); }
.on-pine .crail-ic { background: rgba(224, 138, 78, .16); }
.on-pine .crail-ic svg { fill: var(--copper-lt); }

/* ---------------------------------------------------------- 17 footer */
.foot {
  background: var(--pine-3);
  color: var(--on-pine-2);
  padding-block: clamp(48px, 7vw, 76px) 0;
}
.foot-g { display: grid; gap: 34px; }
@media (min-width: 800px) { .foot-g { grid-template-columns: 1.3fr .9fr .9fr; gap: 46px; } }

.foot h4 {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper-lt);
  margin: 0 0 16px;
}
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot-links a {
  display: inline-block;
  padding: 7px 0;
  font-size: 15px;
  color: var(--on-pine-2);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.foot-links a:hover { color: var(--on-pine); }
.foot .brand-wm b { color: var(--on-pine); }
.foot-blurb { margin-top: 18px; font-size: 14.5px; line-height: 1.6; max-width: 44ch; }
.foot-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: var(--on-pine);
  text-decoration: none;
}
.foot-tel svg { width: 22px; height: 22px; fill: var(--copper-lt); }
.foot-tel:hover { color: var(--copper-lt); }

.foot-base {
  margin-top: clamp(38px, 5vw, 56px);
  border-top: 1px solid var(--line-dark);
  padding-block: 22px calc(96px + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
@media (min-width: 900px) { .foot-base { padding-bottom: 26px; } }
.foot-base a { color: var(--on-pine-2); text-decoration: none; }
.foot-base a:hover { color: var(--on-pine); }

/* --------------------------------------------------- 18 interior heroes */
.phero {
  position: relative;
  isolation: isolate;
  background: var(--pine-3);
  color: var(--on-pine);
  overflow: hidden;
}
.phero-bg { position: absolute; inset: 0; z-index: -2; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
.phero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 16, 15, .84) 0%, rgba(8, 16, 15, .58) 46%, rgba(8, 16, 15, .82) 100%);
}
.phero-in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(120px, 20vw, 178px) var(--gut) clamp(52px, 8vw, 92px);
}
.phero h1 { max-width: 17ch; color: #fff; }
.phero h1 .accent { color: var(--copper-lt); }
.phero .lead { margin-top: 18px; color: rgba(244, 241, 234, .9); max-width: 48ch; }
.phero .cta-row { margin-top: 28px; }

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-pine-2);
}
.crumb a { color: var(--on-pine-2); text-decoration: none; }
.crumb a:hover { color: var(--copper-lt); }
.crumb i { font-style: normal; color: var(--copper-lt); }

/* the checklist used on service pages */
.checks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.checks li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.checks svg { width: 22px; height: 22px; fill: var(--copper); margin-top: 1px; }
.on-pine .checks li { color: var(--on-pine-2); }
.on-pine .checks svg { fill: var(--copper-lt); }

/* small stat-free credential row */
.creds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}
.creds li {
  display: grid;
  gap: 5px;
  padding: 20px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.bg-paper2 .creds li { background: #fdfcfa; }
.creds b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
}
.creds span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 820px) { .creds { grid-template-columns: repeat(4, 1fr); } }

/* ----------------------------------------------------- 19 motion + reveal */
@keyframes kb {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.6%, -1.4%, 0); }
}
.kb { animation: kb 30s ease-in-out infinite alternate; will-change: transform; }
.kb-slow { animation-duration: 40s; }

.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.rv.in { opacity: 1; transform: none; }
.rv-2 { transition-delay: .1s; }
.rv-3 { transition-delay: .2s; }
html:not(.js) .rv { opacity: 1; transform: none; }

/* -------------------------------------------- 20 accessibility + print */
:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-pine :focus-visible, .hero :focus-visible, .sheet :focus-visible, .breakout :focus-visible {
  outline-color: var(--copper-lt);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kb { animation: none; transform: scale(1.04); }
  .strip-track { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .btn:hover, .tile:hover { transform: none; }
  .fig img, .tile-ph img { transition: none; }
  * { scroll-behavior: auto !important; }
}

/* desktop nav appears once there is room for all of it */
@media (min-width: 1120px) {
  .nav { display: flex; }
  .hdr-cta { display: inline-flex; }
  .burger { display: none; }
  .brand-mk { width: 48px; height: 48px; font-size: 21px; }
  .brand-wm b { font-size: 27px; }
}

/* ===========================================================================
   21  POLISH — states, micro-interactions and the large-screen tuning
   ========================================================================= */

/* ---- disabled + busy states (the quote button disables itself on submit) */
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: progress;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* ---- a photograph that has not arrived yet reads as a warm panel, never
        as an empty white hole */
@keyframes shimmer {
  from { background-position: -140% 0; }
  to   { background-position: 240% 0; }
}
.fig, .tile-ph, .hero-bg, .phero-bg, .breakout-media {
  background-image: linear-gradient(100deg, var(--paper-3) 18%, var(--paper-2) 34%, var(--paper-3) 52%);
  background-size: 220% 100%;
  /* deliberately finite: it covers the fetch, then stops for good rather than
     repainting behind every photograph for the life of the page */
  animation: shimmer 2.2s linear 4;
}
.hero-bg, .phero-bg, .breakout-media {
  background-image: linear-gradient(100deg, #16211f 18%, #1f302d 34%, #16211f 52%);
}
.fig img, .tile-ph img, .hero-bg img, .phero-bg img, .breakout-media img { position: relative; }

/* ---- card + link focus, beyond the global ring */
.tile:focus-visible { outline-offset: 4px; box-shadow: var(--sh-l); }
.revs:focus-visible { outline-offset: 6px; }
.crail-item:focus-visible { outline-offset: 0; }

/* ---- micro-interactions: cheap, everywhere, never in the way */
a.crail-item {
  transition: padding-left .28s var(--ease), border-color .28s var(--ease);
}
a.crail-item:hover { padding-left: 8px; }
a.crail-item:hover .crail-ic { background: var(--copper); }
a.crail-item:hover .crail-ic svg { fill: #fff; }
.crail-ic, .crail-ic svg { transition: background-color .28s var(--ease), fill .28s var(--ease); }

.area-list li { transition: color .22s var(--ease), padding-left .22s var(--ease); }
.area-list li:hover { color: var(--ink); padding-left: 4px; }

.lad { transition: border-color .3s var(--ease); }
.lad:hover { border-top-color: rgba(224, 138, 78, .5); }
.lad-n { transition: -webkit-text-stroke-color .3s var(--ease), color .3s var(--ease); }
.lad:hover .lad-n { color: var(--copper-lt); -webkit-text-stroke-color: transparent; }

.creds li { transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.creds li:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--sh-s); }

.mosaic .fig { transition: box-shadow .35s var(--ease); }
.mosaic .fig:hover { box-shadow: var(--sh-m); }

.foot-links a { transition: color .2s var(--ease), padding-left .2s var(--ease); }
.foot-links a:hover { padding-left: 5px; }

/* the review rail: a quiet quote glyph behind the text, and a resting lift */
.rev { position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.rev::before {
  content: "”";
  position: absolute;
  right: 16px;
  top: 2px;
  font-family: var(--display);
  font-size: 92px;
  line-height: 1;
  color: var(--copper);
  opacity: .1;
  pointer-events: none;
}
.rev:hover { transform: translateY(-3px); box-shadow: var(--sh-m); }

/* the marquee stops when a pointer rests on it, and whenever anything inside
   the strip takes focus — moving text should always be stoppable */
.strip:hover .strip-track,
.strip:focus-within .strip-track { animation-play-state: paused; }

/* ---- the answer panel opens rather than snapping */
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq details[open] > div { animation: faqIn .32s var(--ease); }
.faq summary:hover { color: var(--copper); }

/* ---- form feel */
.form-card { transition: box-shadow .35s var(--ease), border-color .35s var(--ease); }
.form-card:focus-within { box-shadow: var(--sh-l); border-color: var(--line-2); }
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: #b4462d;
  box-shadow: 0 0 0 3px rgba(180, 70, 45, .14);
}
.field input:autofill { box-shadow: 0 0 0 60px #fff inset; }

/* ---- typography niceties, with a graceful fallback where unsupported */
@supports (text-wrap: pretty) {
  .lead, .hero-sub, .tile-body p, .lad p, .faq details p { text-wrap: pretty; }
}

/* ---- large screens: the page gets more air, not just wider columns */
@media (min-width: 1440px) {
  :root { --wrap: 1280px; --gut: 56px; }
  body { font-size: 17px; }
  .hero-in { max-width: 940px; }
  .hero-sub { font-size: 20px; max-width: 32ch; }
  .tile-n { font-size: 52px; left: 20px; top: 15px; }
  .tile-body { padding: 24px 24px 26px; }
  .brand-wm b { font-size: 29px; }
  .brand-mk { width: 52px; height: 52px; font-size: 23px; }
  .foot-tel { font-size: 34px; }
}

@media (min-width: 1720px) {
  :root { --wrap: 1360px; }
  .sec { padding-block: 130px; }
}

/* ---- short landscape phones: the hero must not become a scroll trap */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero-in { padding-top: 110px; padding-bottom: 56px; }
  .lockup-name { font-size: 34px; }
  .trust { margin-top: 20px; }
}

/* ---- accessibility fallbacks: high contrast and Windows forced colours */
@media (prefers-contrast: more) {
  :root {
    --ink-2: #26302f;
    --ink-3: #3a4443;
    --line: #b9ae9d;
    --line-2: #8e8578;
    --on-pine-2: #e6ece9;
  }
  .hero-bg::after, .phero-bg::after {
    background: linear-gradient(to bottom, rgba(6, 12, 11, .88), rgba(6, 12, 11, .74));
  }
  .btn-o, .btn-o-light { border-width: 2px; }
}

@media (forced-colors: active) {
  .btn, .tile, .rev, .creds li, .form-card { border: 1px solid CanvasText; }
  .tile-n, .lad-n { -webkit-text-stroke: 0; color: CanvasText; }
  .hero-bg::after, .phero-bg::after, .breakout-media::after, .tile-ph::after { display: none; }
  .kb { animation: none; }
}

/* ---- everything added above this line also answers to the motion setting */
@media (prefers-reduced-motion: reduce) {
  .fig, .tile-ph, .hero-bg, .phero-bg, .breakout-media { animation: none; }
  .faq details[open] > div { animation: none; }
  .rev:hover, .creds li:hover { transform: none; }
  a.crail-item:hover, .area-list li:hover, .foot-links a:hover { padding-left: 0; }
}

@media print {
  .hdr, .callbar, .sheet, .strip, .breakout-media, .hero-bg, .phero-bg,
  .scroll-hint, .rev-hint, .band .cta-row, .cta-row { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sec, .breakout-in, .phero-in, .band-in { padding-block: 16px; }
  .hero { min-height: 0; }
  .hero-in { padding: 12px 0; color: #000; }
  .hero h1, .lockup-name, .on-pine h2, .band h2 { color: #000; }
  .foot { background: #fff; color: #000; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .fig, .tile-ph { animation: none; }
}