/* ==========================================================================
   Marchetti & Sons Painting — concept site for HumanPlanet Media
   Hand-built. No framework, no build step, no dependencies.

   The entire visual system is colour. There is not one photograph in this
   site, because painting is the one trade whose brand can be built out of
   the thing it actually sells.

   MOBILE FIRST. Every base rule below is the phone. Larger screens are
   additive `min-width` layers. A homeowner standing in their kitchen with
   a phone is the whole audience — the desktop view is the afterthought,
   not the other way round.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   --paint is the live accent. JS rewrites it when a visitor picks a swatch,
   so every accent on the page repaints at once. That is the trick the whole
   site is built around — never hard-code an accent colour anywhere.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --paper:      #FBF8F4;
  --paper-2:    #F4EEE5;
  --paper-3:    #EBE3D7;
  --ink:        #14110F;
  --ink-2:      #4E443C;   /* 8.8:1 on paper */
  --ink-3:      #6F6459;   /* 5.4:1 on paper — was #8A7F75 at 3.3:1, which failed AA
                              on every eyebrow, caption and footer heading */
  --rule:       rgba(20, 17, 15, .15);
  --rule-2:     rgba(20, 17, 15, .08);

  --paint:      #2E4A3E;
  --paint-on:   #FBF8F4;
  --paint-soft: rgba(46, 74, 62, .10);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw:  1180px;
  --gut:   1.25rem;
  --r:     14px;
  --r-sm:  10px;

  /* Minimum comfortable thumb target. Nothing tappable goes under this. */
  --tap: 46px;

  --shadow-1: 0 1px 2px rgba(20,17,15,.05), 0 6px 18px rgba(20,17,15,.07);
  --shadow-2: 0 2px 6px rgba(20,17,15,.07), 0 18px 44px rgba(20,17,15,.12);

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

@media (min-width: 700px)  { :root { --gut: 2rem; } }
@media (min-width: 1000px) { :root { --gut: 3rem; } }

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--paint); outline-offset: 3px; border-radius: 3px; }

/* --------------------------------------------------------------------------
   TYPE
   The mobile end of every clamp is set from a 360–390px screen, not from a
   desktop size divided down. A 42px headline in a 335px column breaks after
   every second word and reads as a ransom note.
   -------------------------------------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.022em;
  text-wrap: balance;
}
/* Capped at 4rem, not 5.1rem: the hero h1 lives in a ~600px grid column, and
   at 81px that column only fits seven characters a line — the headline broke
   into four ragged fragments on desktop for exactly the same reason it did
   on the phone. Size the type to its column, not to the viewport. */
h1 { font-size: clamp(2.15rem, .7rem + 6vw, 4rem);      line-height: 1.07; }
h2 { font-size: clamp(1.75rem, .75rem + 3.4vw, 3.2rem); line-height: 1.1; }
h3 { font-size: clamp(1.14rem, .95rem + .6vw, 1.42rem); line-height: 1.26; letter-spacing: -.014em; }

@media (min-width: 700px) {
  h1 { line-height: 1.04; }
  h2 { line-height: 1.06; }
}

.eyebrow {
  font-family: var(--sans);
  font-size: .8rem;              /* 12.8px was unreadable at .16em tracking */
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (min-width: 700px) { .eyebrow { font-size: .74rem; letter-spacing: .17em; } }

.lede  { font-size: clamp(1.06rem, 1rem + .5vw, 1.32rem); color: var(--ink-2); line-height: 1.56; }
.small { font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
.tnum  { font-variant-numeric: tabular-nums; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
@media (min-width: 700px) { .small { font-size: .88rem; } }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.wrap    { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap-nr { max-width: 860px; margin-inline: auto; padding-inline: var(--gut); }
section  { padding-block: clamp(3rem, 7vw, 7rem); }
.tight   { padding-block: clamp(2.25rem, 5vw, 4rem); }
.sec-head { max-width: 60ch; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.sec-head h2 { margin-block: .6rem .7rem; }

/* --------------------------------------------------------------------------
   CONCEPT BAR
   Honesty, permanently on screen. Marchetti & Sons is not a real company and
   this bar says so on every page — but it is also the pitch, so it is built
   to look like a considered part of the design, not a legal disclaimer.
   -------------------------------------------------------------------------- */
.concept {
  background: linear-gradient(180deg,#F4F6F8 0%,#DFE5EA 100%);
  color: #333C44;
  border-bottom: 1px solid rgba(18,22,26,.15);
  box-shadow: inset 0 1px 0 #fff;
  font-size: .84rem;
  line-height: 1.45;
  padding: .6rem 0;
  position: relative;
  z-index: 60;
}
.concept .wrap { display: flex; gap: .55rem; align-items: flex-start; }
.concept b { font-weight: 700; color: #12161A; }
.concept a { color: #12161A; text-underline-offset: 3px; }
.concept .dot { width: 7px; height: 7px; border-radius: 50%; background: #8E9AA4; flex: none; margin-top: .45rem; }
@media (min-width: 760px) {
  .concept { font-size: .78rem; }
  .concept .wrap { align-items: center; justify-content: center; text-align: center; gap: .4rem .9rem; flex-wrap: wrap; }
  .concept .dot { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   NAV
   On a phone the wordmark takes row one and all four links take row two.
   No hamburger: this is a four page site and "Get a Price" is the money
   link — burying it behind a tap to save 40px of header is the single most
   common mistake on a trades site. The phone number is not up here on
   mobile because .sticky-call carries it permanently at the thumb.
   -------------------------------------------------------------------------- */
.nav {
  /* Not sticky on a phone. Two rows of header pinned to the top costs ~105px
     of a 640px viewport, and the action it would preserve — the phone number
     — is already pinned to the thumb in .sticky-call. Let it scroll away. */
  z-index: 50;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--rule-2);
}
.nav .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; padding-block: .6rem 0; }
.nav > .wrap > .btn { display: none; }              /* phone lives in the sticky bar on mobile */

.nav-links {
  order: 3; flex: 0 0 100%;
  display: flex; justify-content: space-between; gap: .2rem;
  list-style: none; padding: 0; margin: .5rem 0 0;
  border-top: 1px solid var(--rule-2);
}
.nav-links a {
  display: flex; align-items: center;
  min-height: var(--tap); padding: 0 .3rem;
  text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--ink-2);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  transition: color .18s, border-color .18s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); border-color: var(--paint); }

@media (min-width: 900px) {
  .nav { position: sticky; top: 0; }
  .nav .wrap { flex-wrap: nowrap; gap: 1.5rem; height: 74px; padding-block: 0; }
  .nav > .wrap > .btn { display: inline-flex; }
  .nav-links {
    order: 0; flex: 0 1 auto; margin: 0 0 0 auto;
    justify-content: flex-start; gap: 1.6rem; border-top: 0;
  }
  .nav-links a { min-height: 0; padding: .3rem 0; border-bottom-width: 2px; margin-bottom: 0; }
}

/* Wordmark — the painted underline strokes itself on load. */
.mark { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; flex: none; padding-block: .25rem; }
.mark-name {
  font-family: var(--display); font-weight: 700; font-size: 1.32rem;
  letter-spacing: -.028em; white-space: nowrap; position: relative;
}
.mark-name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; border-radius: 2px;
  background: var(--paint); transform: scaleX(0); transform-origin: left;
  animation: stroke 1.1s .25s var(--ease) forwards;
  transition: background .5s var(--ease);
}
@keyframes stroke { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .mark-name::after { animation: none; transform: scaleX(1); } }
.mark-sub { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: var(--tap);
  padding: .8rem 1.4rem; border-radius: 999px; border: 1.5px solid transparent;
  font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .16s var(--ease), background .4s var(--ease), border-color .2s, box-shadow .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-paint { background: var(--paint); color: var(--paint-on); box-shadow: var(--shadow-1); }
.btn-paint:hover { box-shadow: var(--shadow-2); }
.btn-ghost { border-color: var(--rule); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-lg { min-height: 54px; padding: 1rem 1.7rem; font-size: 1.04rem; }
.btn-block { width: 100%; }

/* Two full-width stacked buttons beat two half-width ones on a phone. */
.hero-cta .btn { width: 100%; }
@media (min-width: 480px) { .hero-cta .btn { width: auto; } }

/* Phone — the single most important control on any trades site. */
.tel { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .55rem; text-decoration: none; font-family: var(--display); font-weight: 700; letter-spacing: -.025em; }
.tel-num { font-size: clamp(1.62rem, 1.2rem + 2vw, 2.05rem); }
.tel-lab { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(2.25rem, 6vw, 5.5rem); overflow: hidden; }
.hero .wrap { display: grid; gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center; }
.hero-copy { max-width: 56ch; }
.hero h1 { margin-block: .85rem .1rem; }

/* The one painted word. A colour swash behind it rather than coloured text —
   it is a paint company, so the accent should look applied, not typed. */
.hero h1 em {
  font-style: normal;
  color: var(--paint);
  /* Painted as a background rather than a negative z-index pseudo-element,
     which would fall behind .hero and vanish — .hero is positioned but has
     no background of its own to sit on. */
  background-image: linear-gradient(color-mix(in srgb, var(--paint) 22%, transparent),
                                    color-mix(in srgb, var(--paint) 22%, transparent));
  background-repeat: no-repeat;
  background-size: 100% .28em;
  background-position: 0 86%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: color .5s var(--ease), background-image .5s var(--ease);
}
.hero .lede { margin-top: 1.15rem; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 1.75rem; }
.hero-tel { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }

/* The truck. A branded truck outside a good house is the most credible single
   image a trades business owns — the status object in the trade, and it does
   the "we work these streets" job in one frame. */
.hero-shot {
  position: relative; margin: 0;
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-2);
  border: 1px solid var(--rule-2); background: var(--paper-2);
}
.hero-shot img { width: 100%; height: auto; }
.hero-shot figcaption {
  position: absolute; left: .7rem; bottom: .7rem;
  background: rgba(251,248,244,.94); color: #14110F;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  padding: .45rem .8rem; border-radius: 999px; box-shadow: var(--shadow-1);
}
@media (min-width: 950px) {
  .hero .wrap { grid-template-columns: 1.08fr .92fr; }
  .hero-shot figcaption { left: .85rem; bottom: .85rem; }
}
/* Legacy hook — index.html stacks copy and shot directly in .wrap. */
.hero-grid { display: grid; gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 950px) { .hero-grid { grid-template-columns: 1.12fr .88fr; } }

/* Colour-field stack standing in for the hero photograph. */
.swatch-stack { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.swatch-stack .sw {
  border-radius: var(--r); min-height: 94px; display: flex; align-items: flex-end; padding: .85rem .95rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .04em; box-shadow: var(--shadow-1);
  transition: transform .5s var(--ease), box-shadow .3s;
}
.swatch-stack .sw:nth-child(1) { grid-column: span 2; min-height: 172px; }
.swatch-stack .sw:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }

/* --------------------------------------------------------------------------
   NEIGHBOURHOOD MARQUEE
   Service area as a design element. Doubles as the "he works the good streets"
   signal, which is what the homeowner is really reading for.
   -------------------------------------------------------------------------- */
.strip { border-block: 1px solid var(--rule); background: var(--paper-2); padding-block: .95rem; overflow: hidden; }
.strip-track { display: flex; width: max-content; animation: slide 52s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } }
.strip span {
  font-size: .82rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 1.8rem; padding-right: 1.8rem;
}
.strip span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--paint); transition: background .5s var(--ease); }
@media (min-width: 700px) { .strip span { font-size: .78rem; letter-spacing: .16em; gap: 2.4rem; padding-right: 2.4rem; } }

/* --------------------------------------------------------------------------
   TESTIMONIALS
   High on the page, never a carousel. In the trades these are the entire
   proof, and they read best plain — no stars, no avatars, no chrome.
   -------------------------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .quotes { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 1.1rem; } }
.quote {
  background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: var(--r);
  padding: 1.4rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .9rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
@media (min-width: 640px) { .quote { padding: 1.6rem 1.5rem 1.35rem; gap: 1rem; } }
.quote:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: var(--rule); }
.quote p { font-family: var(--display); font-size: 1.12rem; line-height: 1.48; letter-spacing: -.008em; }
.quote footer { margin-top: auto; display: flex; align-items: center; gap: .6rem; font-size: .85rem; font-weight: 500; color: var(--ink-3); }
.quote footer::before { content: ""; width: 20px; height: 2.5px; background: var(--paint); flex: none; transition: background .5s var(--ease); }
@media (min-width: 700px) {
  .quote-lead { grid-column: span 2; }
  .quote-lead p { font-size: clamp(1.3rem, 2.3vw, 1.72rem); line-height: 1.4; }
}

/* --------------------------------------------------------------------------
   STATS
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.1rem; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); } }
.stat-n { font-family: var(--display); font-size: clamp(2.5rem, 1.4rem + 4vw, 3.6rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--paint); transition: color .5s var(--ease); }
.stat-l { font-size: .92rem; line-height: 1.45; color: var(--ink-2); margin-top: .5rem; max-width: 22ch; }
@media (min-width: 700px) { .stat-l { font-size: .85rem; } }

/* --------------------------------------------------------------------------
   SERVICES
   -------------------------------------------------------------------------- */
.svc { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
@media (min-width: 620px) { .svc { grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); } }
.svc-item { background: var(--paper); padding: 1.5rem 1.3rem; transition: background .3s; }
@media (min-width: 620px) { .svc-item { padding: 1.9rem 1.6rem; } }
.svc-item:hover { background: var(--paper-2); }
.svc-item h3 { margin-bottom: .5rem; }
.svc-item p { font-size: .98rem; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 700px) { .svc-item p { font-size: .93rem; } }
.svc-num { font-size: .78rem; font-weight: 700; letter-spacing: .13em; color: var(--paint); margin-bottom: .8rem; transition: color .5s var(--ease); }

/* --------------------------------------------------------------------------
   PROCESS
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.step { background: var(--paper); padding: 1.4rem 0; display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem; align-items: start; }
@media (min-width: 700px) { .step { padding: 1.6rem 0; grid-template-columns: 3.2rem 1fr; gap: 1.3rem; } }
.step-n { font-family: var(--display); font-size: 1.75rem; font-weight: 700; color: var(--paint); line-height: 1.05; transition: color .5s var(--ease); }
.step h3 { margin-bottom: .3rem; }
.step p { color: var(--ink-2); font-size: .98rem; line-height: 1.55; max-width: 62ch; }
@media (min-width: 700px) { .step p { font-size: .95rem; } }

/* --------------------------------------------------------------------------
   REPAINT — the signature interaction
   An SVG room, a drag handle, a swatch bar. The "before" layer is tired
   beige; the "after" layer takes --paint. Dragging clips the after layer,
   so the wipe is a pure CSS clip over inline SVG. No photography anywhere.
   -------------------------------------------------------------------------- */
.repaint { border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-1); }
/* 16:10 on a 335px column is a 209px letterbox — too small to be the thing
   the site is built around. Squarer on a phone, cinematic on a desktop. */
.repaint-stage { position: relative; user-select: none; touch-action: pan-y; cursor: ew-resize; aspect-ratio: 4 / 3; }
@media (min-width: 620px) { .repaint-stage { aspect-ratio: 16 / 10; } }
.repaint-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The painted layer occupies the RIGHT of the handle. It used to be clipped
   to the left, which put the fresh colour under the "Before" tag and the
   tired beige under the colour name — the slider read backwards. */
.repaint-after { clip-path: inset(0 0 0 var(--wipe, 44%)); }
.repaint-hand { position: absolute; top: 0; bottom: 0; left: var(--wipe, 44%); width: 2px; background: var(--paper); box-shadow: 0 0 0 1px rgba(20,17,15,.2); transform: translateX(-1px); pointer-events: none; }
.repaint-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%; background: var(--paper);
  box-shadow: var(--shadow-2); display: grid; place-items: center; color: var(--ink-2);
}
.repaint-knob svg { position: static; width: 24px; height: 24px; }
.repaint-tag {
  position: absolute; bottom: .7rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; background: var(--paper); color: var(--ink-2); padding: .38rem .7rem;
  border-radius: 999px; box-shadow: var(--shadow-1); pointer-events: none;
}
.repaint-tag.is-before { left: .7rem; }
.repaint-tag.is-after  { right: .7rem; }

.swatches { display: flex; flex-wrap: wrap; gap: .5rem; padding: .9rem; border-top: 1px solid var(--rule); background: var(--paper); }
.swatch {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .5rem .95rem .5rem .55rem;
  border: 1.5px solid var(--rule); border-radius: 999px; background: transparent; cursor: pointer;
  font-size: .88rem; font-weight: 500; transition: border-color .2s, background .2s, transform .16s var(--ease);
}
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-2); font-weight: 600; }
.swatch i { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(20,17,15,.16); }

/* --------------------------------------------------------------------------
   FUNNEL
   Three questions, then a name and a phone number. One question on screen at
   a time, and never a field the homeowner does not have to fill in.
   -------------------------------------------------------------------------- */
.funnel { border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper-2); box-shadow: var(--shadow-1); overflow: hidden; }
.funnel-bar { display: flex; gap: 4px; padding: 1rem 1.15rem 0; }
.funnel-bar i { flex: 1; height: 5px; border-radius: 3px; background: var(--rule); transition: background .45s var(--ease); }
.funnel-bar i.on { background: var(--paint); }
.funnel-body { padding: 1.35rem 1.15rem 1.6rem; }
@media (min-width: 620px) {
  .funnel-bar { padding: 1rem 1.4rem 0; }
  .funnel-body { padding: 1.5rem 1.4rem 1.8rem; }
}
.fstep { display: none; }
.fstep.on { display: block; animation: rise .45s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fstep.on { animation: none; } }
.fstep h3 { margin-bottom: .3rem; }
.fstep > .small { margin-bottom: 1.2rem; }

.opts { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 560px) { .opts { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: .7rem; } }
[hidden] { display: none !important; }
.opt {
  text-align: left; min-height: var(--tap); padding: .95rem 1.05rem;
  border: 1.5px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper); cursor: pointer; transition: border-color .2s, transform .16s var(--ease), box-shadow .2s;
}
.opt:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: var(--ink-3); }
.opt[aria-pressed="true"] { border-color: var(--paint); box-shadow: 0 0 0 3px var(--paint-soft); }
.opt b { display: block; font-size: 1.02rem; margin-bottom: .1rem; }
.opt span { font-size: .88rem; line-height: 1.45; color: var(--ink-3); }

.field { margin-bottom: .9rem; }
.field label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: .35rem; color: var(--ink-2); }
.field input {
  width: 100%; min-height: var(--tap);
  /* 16px minimum, or iOS Safari zooms the page on focus and the layout
     jumps sideways mid-form. */
  font-size: 16px;
  padding: .8rem 1rem; border: 1.5px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper); transition: border-color .2s, box-shadow .2s;
}
.field input:focus { outline: none; border-color: var(--paint); box-shadow: 0 0 0 3px var(--paint-soft); }
.field .hint { font-size: .82rem; color: var(--ink-3); margin-top: .3rem; }

.fnav { display: flex; gap: .6rem; align-items: center; margin-top: 1.2rem; flex-wrap: wrap; }
.fnav .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .fnav .btn { flex: 0 0 auto; } }
.fback { background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: .5rem .6rem; }

.quotebox { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 1.05rem 1.1rem; margin-bottom: 1.1rem; }
.quotebox .range { font-family: var(--display); font-size: clamp(1.85rem, 1.3rem + 2.6vw, 2.35rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; color: var(--paint); transition: color .5s var(--ease); margin-top: .35rem; }

/* Confirmation */
.done { text-align: center; padding: .5rem 0 .3rem; }
.done-tick { width: 62px; height: 62px; border-radius: 50%; background: var(--paint); display: grid; place-items: center; margin: 0 auto 1.2rem; transition: background .5s var(--ease); }
.done-tick svg { width: 30px; height: 30px; }
.sms {
  max-width: 340px; margin: 1.5rem auto 0; text-align: left; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--shadow-1);
}
.sms-head { font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem; }
.bubble { background: var(--paint); color: var(--paint-on); padding: .75rem .95rem; border-radius: 15px 15px 15px 4px; font-size: .95rem; line-height: 1.45; transition: background .5s var(--ease); }
.typing { display: inline-flex; gap: 4px; padding: .25rem .1rem; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: .9; transform: translateY(-3px); } }

/* Deposit */
.pay { border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--paper); padding: 1.05rem 1.1rem; margin-top: 1.3rem; text-align: left; }
.pay-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; padding-block: .4rem; }
.pay-row.total { border-top: 1px solid var(--rule); margin-top: .4rem; padding-top: .7rem; font-weight: 700; font-size: 1.05rem; }
.pay-card { display: flex; align-items: center; gap: .7rem; border: 1.5px solid var(--rule); border-radius: var(--r-sm); padding: .8rem .9rem; margin-top: .9rem; font-size: .93rem; color: var(--ink-2); }
.pay-card .chipx { width: 30px; height: 20px; border-radius: 3px; background: var(--paint); flex: none; transition: background .5s var(--ease); }

/* --------------------------------------------------------------------------
   COLOUR RANGE
   The loudest thing on the page, and it should be — the spec says colour is
   the hero, so the colour field gets real height instead of a 104px sliver.
   -------------------------------------------------------------------------- */
.range-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (min-width: 620px) { .range-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; } }
.chip { border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule-2); background: var(--paper-2); cursor: pointer; text-align: left; padding: 0; transition: transform .4s var(--ease), box-shadow .35s; }
.chip:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.chip-c { display: block; height: 128px; }
@media (min-width: 620px) { .chip-c { height: 176px; } }
.chip-m { display: block; padding: .75rem .8rem .9rem; }
.chip-n { display: block; font-family: var(--display); font-size: 1.04rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.chip-h { display: block; font-size: .76rem; font-weight: 500; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; margin-top: .2rem; }
/* The tasting note is desktop detail — on a two-up phone grid it turns each
   chip into a wall of 12px text under a colour. */
.chip .small { display: none !important; }
@media (min-width: 620px) { .chip .small { display: block !important; } }

/* --------------------------------------------------------------------------
   BANDS + FOOTER
   The closing band is a full strength block of the chosen colour. On a light
   page that block is the whole point of pop — and it is honest, because it
   is literally the paint the visitor picked.
   -------------------------------------------------------------------------- */
.band {
  background: var(--paint);
  color: var(--paint-on);
  border-block: 1px solid var(--rule-2);
  transition: background .5s var(--ease), color .5s var(--ease);
}
.band h2, .band .lede, .band .eyebrow { color: var(--paint-on); }
.band .lede { opacity: .88; }
.band .eyebrow { opacity: .72; }
/* Invert the button so it stays visible on its own colour. */
.band .btn-paint { background: var(--paint-on); color: var(--paint); }
.band .btn-ghost { border-color: currentColor; color: var(--paint-on); }

.foot { background: var(--paper-2); border-top: 1px solid var(--rule); padding-block: 2.5rem 2rem; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 560px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem; } }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h4 { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .8rem; font-weight: 700; }
.foot ul { list-style: none; padding: 0; display: grid; gap: .2rem; font-size: .97rem; }
.foot a, .foot li { color: var(--ink-2); text-decoration: none; }
.foot li { padding-block: .35rem; }
.foot a { display: inline-flex; align-items: center; min-height: 32px; }
.foot a:hover { color: var(--ink); }
.foot-base { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between; font-size: .84rem; line-height: 1.5; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   SCROLL REVEAL + MOBILE CALL BAR
   -------------------------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(17px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.rise.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

.sticky-call {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: .65rem var(--gut) calc(.65rem + env(safe-area-inset-bottom));
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
}
body { padding-bottom: 5rem; }
@media (min-width: 900px) {
  .sticky-call { display: none; }
  body { padding-bottom: 0; }
}