/* ============================================================
   Cresheim Creek Cycles — site styles
   ONE identity, TWO registers, mirroring the two physical wings.

   [data-wing="shop"]  natural · friendly · community
   [data-wing="train"] clinical · professional · precise

   Everything below the REGISTER block is shared. The register
   block is the only place the two wings are allowed to differ.
   ============================================================ */

:root{
  /* palette — identical in both wings */
  --ink:#0C1A14; --creek:#10241B; --moss:#2E5F45;
  --fern:#7FA98C; --sage:#A8C4B0;
  --paper:#F5F2EA; --paper-2:#E8E2D4; --schist:#6B6558;
  --blaze:#E2552B; --blaze-deep:#A93D15;
  --clinic:#FBFAF7;
  /* alpha variants, declared once so they stop multiplying */
  --blaze-a45:rgba(226,85,43,.45); --deep-a38:rgba(169,61,21,.38);
  --fern-a28:rgba(127,169,140,.28); --fern-a20:rgba(127,169,140,.2); --clinic-line:rgba(12,26,20,.13); --clinic-mute:#5D665F;

  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;

  --gut:clamp(20px,5vw,44px);

  /* register defaults = shop */
  --hero-bg:var(--creek); --hero-fg:var(--paper); --hero-mute:var(--sage);
  --hero-rule:8px solid var(--blaze);
  --dsp-wdth:118%; --dsp-wght:800; --dsp-case:uppercase; --dsp-track:-.018em;
  --page-bg:var(--paper); --surface:var(--paper-2); --line:rgba(46,95,69,.28);
  --mute:var(--schist);

  /* type scale — every font-size on the site resolves to one of these.
     Was 33 distinct values across 55 declarations; keep it at this. */
  --t-caption:.66rem;   /* figure captions */
  --t-label:.70rem;     /* mono labels, eyebrows, nav, keys */
  --t-fine:.84rem;      /* fine print, sublines, wordmark */
  --t-sm:.95rem;        /* secondary prose, buttons, card copy */
  --t-base:1.05rem;     /* body prose */
  --t-md:1.16rem;       /* h3, opening paragraph */
  --t-lg:1.6rem;        /* wing-chooser headings */
  --t-pull:clamp(1.1rem,2.4vw,1.5rem);
  --t-lede:clamp(1.04rem,2vw,1.2rem);
  --t-h2:clamp(1.45rem,3.6vw,2.15rem);
  --t-h1:clamp(2.05rem,6vw,4rem);
}

/* ===================== REGISTER ===================== */
[data-wing="train"]{
  /* softer scale for the clinical register */
  --t-h1:clamp(1.85rem,4.4vw,3.1rem); --t-md:1.08rem; --t-pull:clamp(1.05rem,2.2vw,1.35rem);
  --hero-bg:var(--clinic); --hero-fg:var(--ink); --hero-mute:var(--clinic-mute);
  --hero-rule:1px solid var(--clinic-line);
  --dsp-wdth:100%; --dsp-wght:600; --dsp-case:none; --dsp-track:-.024em;
  --page-bg:#fff; --surface:var(--clinic); --line:var(--clinic-line);
  --mute:var(--clinic-mute);
}
[data-wing="train"] .mark-painted{display:none;}
[data-wing="shop"] .mark-machined,
body:not([data-wing="train"]) .mark-machined{display:none;}
/* the shop shouts, the clinic states */
[data-wing="train"] .phead h1{max-width:24ch;}
[data-wing="train"] .status{background:none;color:var(--blaze-deep);padding:0;
  border-bottom:2px solid var(--blaze);}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--page-bg);color:var(--ink);font-family:var(--body);
  line-height:1.68;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;}
main{flex:1;}
img{max-width:100%;height:auto;}

.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gut);width:100%;}
.narrow .prose,.narrow .lines,.narrow .spec,.narrow h2{max-width:720px;}

.dsp{font-family:var(--display);font-weight:var(--dsp-wght);font-stretch:var(--dsp-wdth);
  text-transform:var(--dsp-case);letter-spacing:var(--dsp-track);line-height:1.02;}
[data-wing="shop"] .dsp,body:not([data-wing="train"]) .dsp{line-height:.98;}

a{color:var(--blaze-deep);}
:focus-visible{outline:3px solid var(--blaze);outline-offset:3px;}
.skip{position:absolute;left:-9999px;top:0;background:var(--blaze);color:var(--ink);
  padding:12px 18px;font-weight:600;z-index:99;text-decoration:none;}
.skip:focus{left:12px;top:12px;}

/* ---------------- nav ---------------- */
.nav{background:var(--creek);color:var(--paper);}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:15px 0;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--paper);flex:none;}
.brand svg{width:25px;height:25px;color:var(--paper);flex:none;}
.brand span{font-family:var(--display);font-weight:800;font-stretch:104%;
  text-transform:uppercase;font-size:var(--t-fine);letter-spacing:.01em;line-height:1.1;}
.nav ul{list-style:none;display:flex;gap:3px;margin:0;padding:0;flex-wrap:wrap;}
.nav a.lk{display:block;text-decoration:none;color:var(--sage);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase;
  padding:9px 12px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.nav a.lk:hover{color:var(--paper);}
.nav a.lk[aria-current="page"],.nav a.lk.on{color:var(--paper);border-bottom-color:var(--blaze);}

/* Same creek green, different neighbour. As the top of the shop's solid green
   hero it reads dark; as a thin bar over the clinic's near-white hero the eye
   lifts it a shade. A blaze hairline closes the bottom edge off — the clinic's
   1px answer to the 8px blaze rule under the shop hero. */
[data-wing="train"] .nav{border-bottom:1px solid var(--blaze);}

/* wing sub-nav */
.subnav{background:var(--surface);border-bottom:1px solid var(--line);}
.subnav ul{list-style:none;display:flex;gap:2px;margin:0;padding:0;flex-wrap:wrap;}
.subnav a{display:block;text-decoration:none;color:var(--mute);font-family:var(--mono);
  font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase;padding:12px 13px;
  border-bottom:2px solid transparent;}
.subnav a:hover{color:var(--ink);}
.subnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--blaze);}
.subnav .wingname{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--blaze-deep);padding:12px 13px 12px 0;white-space:nowrap;}

/* ---------------- page head ---------------- */
.phead{background:var(--hero-bg);color:var(--hero-fg);
  padding:clamp(46px,7vw,84px) 0 clamp(50px,7vw,78px);border-bottom:var(--hero-rule);}
.phead .eyebrow{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--blaze-deep);margin:0 0 20px;}
[data-wing="shop"] .phead .eyebrow,body:not([data-wing="train"]) .phead .eyebrow{color:var(--fern);}
.phead h1{font-size:var(--t-h1);margin:0 0 24px;}
.phead h1 .thin{color:var(--fern);}
[data-wing="train"] .phead h1 .thin{color:var(--clinic-mute);}
.phead .lede{font-size:var(--t-lede);color:var(--hero-mute);max-width:58ch;margin:0;}
.phead .lede strong{color:var(--hero-fg);font-weight:600;}
.status{display:inline-block;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);background:var(--blaze);
  padding:7px 13px;font-weight:500;margin-bottom:24px;}

/* ---------------- buttons ---------------- */
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px;}
.btn{display:inline-block;background:var(--blaze);color:var(--ink);text-decoration:none;
  font-weight:600;font-size:var(--t-sm);padding:14px 26px;border:2px solid var(--blaze);
  transition:background .15s ease,color .15s ease;}
.btn:hover{background:transparent;color:var(--blaze);}
/* The ghost button used to take its color from --hero-fg, which is cream
   on the shop wing because it was designed to sit on the dark hero. Any
   ghost button in a light section was therefore cream-on-cream and all but
   invisible. Color now comes from the ground it sits on: ink by default,
   paper only inside a dark header or a dark section. 2026-08-25. */
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--moss);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.phead .btn-ghost,.sec-dark .btn-ghost{color:var(--hero-fg);border-color:var(--moss);}
.phead .btn-ghost:hover,.sec-dark .btn-ghost:hover{background:var(--hero-fg);
  color:var(--hero-bg);border-color:var(--hero-fg);}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn-dark:hover{background:transparent;color:var(--ink);}
/* the clinic does not use an orange button */
[data-wing="train"] .btn{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:500;}
[data-wing="train"] .btn:hover{background:transparent;color:var(--ink);}
[data-wing="train"] .btn-ghost{background:transparent;color:var(--ink);border-color:var(--clinic-line);}
[data-wing="train"] .btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ---------------- sections ---------------- */
.sec{padding:clamp(50px,7vw,86px) 0;}
.sec-alt{background:var(--surface);}
.sec-dark{background:var(--ink);color:var(--paper);}
[data-wing="train"] .sec-dark{background:var(--creek);}
.sec-label{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--blaze-deep);margin:0 0 14px;}
.sec-dark .sec-label{color:var(--fern);}
h2{font-family:var(--display);font-weight:var(--dsp-wght);font-stretch:var(--dsp-wdth);
  text-transform:var(--dsp-case);letter-spacing:var(--dsp-track);line-height:1.04;
  font-size:var(--t-h2);margin:0 0 20px;}
h3{font-family:var(--display);font-weight:var(--dsp-wght);font-stretch:var(--dsp-wdth);
  text-transform:var(--dsp-case);letter-spacing:var(--dsp-track);line-height:1.08;
  font-size:var(--t-md);margin:0 0 10px;}

.prose{max-width:66ch;}
.prose p{font-size:var(--t-base);margin:0 0 1.35em;}
.prose p:last-child{margin-bottom:0;}
.prose .first{font-size:var(--t-md);color:var(--ink);}
[data-wing="train"] .prose p{color:var(--clinic-mute);font-weight:300;}
[data-wing="train"] .prose .first{color:var(--ink);font-weight:400;}
.sec-dark .prose p{color:var(--sage);}
.sec-dark .prose .first{color:var(--paper);}
.prose a{color:var(--blaze-deep);text-decoration:none;border-bottom:1px solid var(--deep-a38);}
.prose a:hover{border-bottom-color:var(--blaze-deep);}
.sec-dark .prose a{color:var(--blaze);border-bottom-color:var(--blaze-a45);}

.pull{border-left:5px solid var(--blaze);padding:4px 0 4px 24px;margin:34px 0;
  font-family:var(--display);font-weight:800;font-stretch:110%;text-transform:uppercase;
  font-size:var(--t-pull);line-height:1.12;letter-spacing:-.01em;max-width:24ch;}
/* the clinic quotes quietly */
[data-wing="train"] .pull{border-left-width:2px;border-color:var(--ink);
  font-weight:500;font-stretch:100%;text-transform:none;letter-spacing:-.02em;
  max-width:32ch;line-height:1.28;}

/* ---------------- cards ---------------- */
.grid.g4{grid-template-columns:repeat(2,1fr);}
@media(max-width:640px){.grid.g4{grid-template-columns:1fr;}}
/* g3 — exactly three cards, so a 2-up grid would leave an orphan cell.
   Collapses straight to one column rather than two, for the same reason.
   Breakpoint is where a third column would fall under the ~250px the rest
   of the grid system treats as its comfortable minimum. */
.grid.g3{grid-template-columns:repeat(3,1fr);}
@media(max-width:820px){.grid.g3{grid-template-columns:1fr;}}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:42px;}
.card{background:var(--page-bg);padding:28px 25px 30px;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:background .15s ease;}
a.card:hover{background:var(--surface);}
.card .num{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;color:var(--moss);
  display:block;margin-bottom:15px;}
[data-wing="train"] .card .num{color:var(--clinic-mute);}
.card p{margin:0;color:var(--mute);font-size:var(--t-sm);flex:1;}
.card .more{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blaze-deep);margin-top:20px;}

/* wing chooser on the home page */
.wings{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;}
.wing{text-decoration:none;color:inherit;border:1px solid var(--line);display:flex;
  flex-direction:column;overflow:hidden;transition:transform .15s ease;}
.wing:hover{transform:translateY(-3px);}
.wing .top{padding:34px 30px 30px;flex:1;}
.wing.w-shop .top{background:var(--creek);color:var(--paper);}
.wing.w-train .top{background:var(--clinic);color:var(--ink);border-bottom:1px solid var(--clinic-line);}
.wing .k{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:16px;}
.wing.w-shop .k{color:var(--fern);} .wing.w-train .k{color:var(--blaze-deep);}
/* One treatment for both wing titles. They used to carry their own register —
   the shop's heavy uppercase, the practice's lighter sentence case — but once
   they became parallel phrases ("Get rolling" / "Get better") the mismatch read
   as two different fonts rather than as two different rooms. 2026-08-20.     */
.wing h3{font-size:var(--t-lg);margin-bottom:12px;
  font-family:var(--display);font-weight:800;font-stretch:118%;
  text-transform:uppercase;letter-spacing:-.018em;}
.wing .top p{margin:0;font-size:var(--t-sm);}
.wing.w-shop .top p{color:var(--sage);} .wing.w-train .top p{color:var(--clinic-mute);}
.wing .list{background:var(--page-bg);padding:20px 30px 22px;font-family:var(--mono);
  font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;color:var(--mute);line-height:2;}
.wing .go{padding:0 30px 26px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--blaze-deep);background:var(--page-bg);}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:30px;margin-top:44px;}
.step{border-top:3px solid var(--blaze);padding-top:18px;}
[data-wing="train"] .step{border-top-width:1px;border-color:var(--fern);}
.step .k{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--fern);margin-bottom:9px;}
.step b{color:var(--paper);display:block;font-family:var(--display);font-weight:var(--dsp-wght);
  font-stretch:var(--dsp-wdth);text-transform:var(--dsp-case);font-size:var(--t-base);
  margin-bottom:8px;line-height:1.12;letter-spacing:var(--dsp-track);}
.step p{margin:0;color:var(--sage);font-size:var(--t-sm);}

/* spec table — the mono move, shared by both wings */
/* Service menu. Was set entirely in IBM Plex Mono, descriptions included, which
   is what made it hard to read — monospace is for data, not prose. Now: the
   service name in the display face, the description in body, the price in mono
   with tabular figures so the column aligns. */
.spec{border-top:1px solid var(--line);margin-top:40px;max-width:760px;}
.spec div{display:flex;justify-content:space-between;gap:clamp(16px,3vw,32px);
  align-items:baseline;border-bottom:1px solid var(--line);padding:18px 2px;
  font-size:var(--t-sm);}
.spec .n{color:var(--mute);flex:1 1 auto;line-height:1.52;}
.spec .v{flex:0 0 auto;text-align:right;color:var(--mute);
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-fine);}
.spec .v.hl{color:var(--blaze-deep);font-size:var(--t-md);font-weight:500;}
.sec-dark .spec{border-color:var(--fern-a28);}
.sec-dark .spec div{border-color:var(--fern-a20);}
.sec-dark .spec .n{color:var(--sage);}
.sec-dark .spec .v{color:var(--fern);}
/* the About page reuses .spec for facts, not prices: values are prose, so body face */
.spec.spec-facts .v{font-family:var(--body);font-size:var(--t-sm);max-width:62%;}

.lines{font-family:var(--mono);font-size:var(--t-sm);line-height:2.35;margin:0 0 34px;max-width:720px;}
.lines a{color:var(--blaze-deep);text-decoration:none;border-bottom:1px solid var(--deep-a38);}
.lines .k{color:var(--moss);letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-label);
  display:inline-block;min-width:118px;}

/* ---------------- build gallery ----------------
   Photographs of finished builds. The type still leads: the image
   sits inside the same 1px rule as .grid and .spec, and the caption
   uses the mono voice the rest of the site uses for data.        */
.builds{display:flex;flex-direction:column;gap:clamp(38px,5vw,58px);margin-top:44px;}
.build{border-top:3px solid var(--blaze);padding-top:22px;}
[data-wing="train"] .build{border-top-width:1px;border-color:var(--fern);}
.build h3{font-size:var(--t-md);margin:0 0 8px;}
.build .k{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--moss);margin-bottom:11px;}
[data-wing="train"] .build .k{color:var(--clinic-mute);}
.build > p{margin:0 0 20px;color:var(--mute);font-size:var(--t-base);max-width:62ch;}

.shots{display:grid;gap:14px;grid-template-columns:1fr 1fr;}
.shots.one{grid-template-columns:1fr;max-width:760px;}
/* a portrait photo at full column width becomes absurdly tall, so it
   gets a narrower column of its own rather than being cropped square */
.shots.tall{grid-template-columns:1fr;max-width:520px;}
.shots figure{margin:0;}
/* no forced aspect-ratio: each photo keeps its own shape. width/height
   attributes on the img reserve the right space, so nothing shifts. */
.shots img{display:block;width:100%;height:auto;
  border:1px solid var(--line);background:var(--surface);}
.shots figcaption{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);padding-top:9px;}
@media(max-width:640px){.shots{grid-template-columns:1fr;}}


/* ---------------- about: portrait + credentials ----------------
   The face sits beside the spec list rather than floating on its own,
   so the person and the credentials read as one block.            */
.bio{display:grid;grid-template-columns:280px 1fr;gap:30px;align-items:start;margin-top:44px;}
.bio figure{margin:0;}
.bio img{display:block;width:100%;height:auto;border:1px solid var(--line);}
.bio figcaption{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);padding-top:9px;}
.bio .spec{margin-top:0;max-width:none;}
@media(max-width:640px){
  .bio{grid-template-columns:1fr;gap:24px;}
  .bio figure{max-width:280px;}
}


/* ---------------- a single photograph set into prose ----------------
   Separate from .shots, which is the build gallery. Portraits get a
   narrower cap: at the full 720px prose width a 3:4 image runs about
   960px deep, which swamps the column it sits in.               */
.figure{margin:clamp(32px,4vw,46px) 0;}
.figure img{display:block;width:100%;height:auto;
  border:1px solid var(--line);background:var(--surface);}
.figure figcaption{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);padding-top:9px;}
.figure.tall{max-width:470px;}


/* ---------------- client quote ----------------
   Deliberately not .pull. A pull quote is the site talking to itself in
   the display face; a client quote is somebody else talking, so it takes
   body type, a quieter fern rule, and an attribution line. Kept plain
   enough to sit inside prose without stopping the read.          */
.quote{margin:clamp(30px,4vw,42px) 0;padding-left:24px;
  border-left:2px solid var(--fern);max-width:640px;}
.quote blockquote{margin:0;font-size:var(--t-base);line-height:1.62;color:var(--ink);}
[data-wing="train"] .quote blockquote{font-weight:300;}
.quote figcaption{margin-top:12px;font-family:var(--mono);font-size:var(--t-caption);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}

/* ---------------- footer ---------------- */
footer{background:var(--creek);color:var(--fern);padding:46px 0 40px;margin-top:auto;}
.foot-top{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;
  padding-bottom:28px;border-bottom:1px solid var(--fern-a20);}
.foot-col h4{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);margin:0 0 12px;font-weight:500;}
.foot-col ul{list-style:none;margin:0;padding:0;}
.foot-col li{margin-bottom:7px;}
.foot-col a{color:var(--sage);text-decoration:none;font-family:var(--mono);
  font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;}
.foot-col a:hover{color:var(--paper);}
.foot-brand{display:flex;align-items:center;gap:13px;}
.foot-brand svg{width:25px;height:25px;color:var(--paper);}
.foot-brand span{font-family:var(--display);font-weight:800;font-stretch:104%;
  text-transform:uppercase;font-size:var(--t-fine);color:var(--paper);line-height:1.1;}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:26px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;}

@media(max-width:880px){
  .nav-in{flex-direction:column;align-items:flex-start;gap:10px;}
  .nav ul{margin-left:-12px;}
  .wings{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .btn{width:100%;text-align:center;}
  .cta-row{flex-direction:column;align-items:stretch;}
  .lines .k{display:block;min-width:0;}
}

/* Fine print. The bench-fee footnote moved below the closing section on
   2026-08-19 so the call to action could sit directly under the prices;
   this makes it read as a footnote rather than as more body copy.      */
.prose.fineprint p{font-size:var(--t-fine);color:var(--mute);}

/* ---------------- local landmark banner ----------------
   A wide strip of somewhere local on the landing page, in place of the
   three-step explainer removed on 2026-08-19. `object-fit:cover` does the
   cropping, so a portrait phone photo can be dropped straight in without
   re-cutting the file; `object-position` decides which band survives the
   crop. Ratio relaxes on narrow screens, where 3:1 is a letterbox slit. */
.banner{margin:38px 0 0;}
.banner img{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;object-position:center center;border-top:3px solid var(--blaze);}
[data-wing="train"] .banner img{border-top-width:1px;border-color:var(--fern);}
.banner figcaption{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.13em;
  text-transform:uppercase;color:var(--moss);margin-top:11px;}
.sec-dark .banner figcaption{color:var(--fern);}
@media(min-width:700px){
  .banner img{aspect-ratio:3/1;}
}

/* ---------------- service-area map ----------------
   A hand-drawn schematic of the regular run, not a survey map.
   Inline SVG so it needs no image request and inherits the palette.
   Labels grow on small screens because the whole drawing scales
   down with the viewport; the neighborhood list below the figure
   is the readable fallback and the accessible one.      */
.areafig{margin:40px 0 34px;max-width:900px;}
.areamap{width:100%;height:auto;display:block;font-family:var(--mono);}
.am-area{fill:rgba(46,95,69,.13);stroke:var(--moss);stroke-width:2.5;stroke-linejoin:round;}
.am-creek{fill:none;stroke:var(--fern);stroke-width:5;stroke-linecap:round;}
.am-river{fill:none;stroke:var(--sage);stroke-width:9;stroke-linecap:round;}
.am-cityline{fill:none;stroke:var(--schist);stroke-width:1.4;stroke-dasharray:9 7;opacity:.7;}
.am-dot{fill:var(--creek);}
.am-lbl{font-size:15px;font-weight:500;fill:var(--ink);}
.am-feat{font-size:11.5px;letter-spacing:.18em;fill:var(--moss);opacity:.75;}
.am-city{font-size:11.5px;letter-spacing:.18em;fill:var(--schist);opacity:.8;}
.am-home{fill:var(--blaze);}
.am-homering{fill:none;stroke:var(--blaze);stroke-width:2;opacity:.55;}
.am-home-lbl{font-size:11.5px;letter-spacing:.2em;fill:var(--blaze-deep);font-weight:500;}
.areafig figcaption{font-family:var(--mono);font-size:var(--t-fine);color:var(--mute);
  margin-top:14px;line-height:1.6;max-width:640px;}
@media (max-width:700px){
  .am-lbl{font-size:23px;}
  .am-feat,.am-city,.am-home-lbl{font-size:17px;letter-spacing:.12em;}
  .am-dot{r:5;} .am-home{r:9;} .am-homering{r:23;stroke-width:3;}
  .am-area{stroke-width:3.5;} .am-creek{stroke-width:7;} .am-river{stroke-width:12;}
}

/* ---------------- two-column pairing ----------------
   On-site and Bigger jobs sat stacked, which made the page feel like a
   long scroll of price tables. Side by side they read as a choice.
   Collapses to one column where the spec rows would otherwise be
   squeezed into two words per line. 2026-08-25.                      */
.grid.twocol{grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,54px);align-items:start;}
.grid.twocol .col{min-width:0;}
.grid.twocol .col .prose.narrow,.grid.twocol .col .spec{max-width:none;}
@media(max-width:900px){
  .grid.twocol{grid-template-columns:1fr;}
}

/* ---------------- email fallback ----------------
   A mailto: link only opens whatever the device has registered to handle
   mail. Where nothing is registered — a computer whose owner reads mail
   in a browser tab — the click does nothing at all, silently. Rather
   than detect that after the fact, every call to action carries this
   line: a Gmail compose link and the plain address, always visible, no
   JavaScript. Replaced the ccc-mailhelp toast on 2026-08-25.          */
.mailalt{font-family:var(--mono);font-size:var(--t-fine);line-height:1.9;
  color:var(--mute);margin:14px 0 0;max-width:640px;}
.mailalt a{color:var(--blaze-deep);text-decoration:none;
  border-bottom:1px solid var(--deep-a38);}
.mailalt a:hover{border-bottom-color:var(--blaze-deep);}
.sec-dark .mailalt,.phead .mailalt{color:var(--fern);}
.sec-dark .mailalt a,.phead .mailalt a{color:var(--blaze);
  border-bottom-color:var(--blaze-a45);}

/* In a two-column pairing the spec descriptions are long enough that the
   price wraps to its own line anyway, so make that deliberate: label
   block, price beneath it on the right, in the accent. Also let the
   .lines key sit inline instead of holding a 118px column it no longer
   has room for. */
.grid.twocol .spec div{flex-direction:column;align-items:stretch;gap:6px;}
.grid.twocol .spec .v{text-align:right;font-weight:500;}
.grid.twocol .lines .k{min-width:0;margin-right:8px;}

/* Service names inside a spec row. IBM Plex Mono is loaded at 400 and 500
   only, so <strong> would otherwise be synthesised — pin it to the real
   500 weight and let the accent do the rest of the emphasis. */
.spec .n strong{display:block;margin-bottom:4px;font-family:var(--display);
  font-weight:600;font-size:var(--t-md);font-stretch:100%;text-transform:none;
  letter-spacing:-.012em;color:var(--ink);}
.sec-dark .spec .n strong{color:var(--paper);}

/* A sub-line inside a spec list: parts pricing that belongs under the
   labor line it attaches to rather than standing as its own service.
   Indented, quieter, and no rule above it so it reads as a continuation. */
.spec div.subline{border-top:0;padding-top:0;padding-left:26px;
  font-size:var(--t-fine);color:var(--mute);}
.spec div.subline .n{color:var(--mute);}

/* A hero subheading pulled into the accent, so the about page's opening
   quote gets the orange note the other pages carry in their status chips. */
.phead .lede.lede-accent{color:var(--blaze);}

/* ---------------- wallpaper section ----------------
   A photograph behind a block of copy rather than beside it. The image is
   a background so it can crop freely at any width; the text sits on an
   opaque panel so legibility never depends on what happens to be behind
   a given line. A dark scrim sits between the two, which keeps the panel
   edge from looking pasted on and stops a bright sky fighting the type.
   2026-08-25.                                                          */
.sec-wall{position:relative;background-size:cover;background-position:center 58%;
  background-repeat:no-repeat;}
.sec-wall::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(12,26,20,.72) 0%,rgba(12,26,20,.45) 58%,rgba(12,26,20,.28) 100%);}
.sec-wall > .wrap{position:relative;}
.sec-wall .panel{background:var(--paper);padding:clamp(28px,4vw,46px);
  max-width:660px;border-top:5px solid var(--blaze);
  box-shadow:0 18px 48px rgba(12,26,20,.28);}
[data-wing="train"] .sec-wall .panel{border-top-width:1px;border-color:var(--fern);}
.sec-wall .panel .dsp{margin-top:0;}
.sec-wall .panel .prose p:last-child{margin-bottom:0;}
@media(max-width:620px){
  .sec-wall{background-position:center 62%;}
  .sec-wall .panel{padding:24px 20px 26px;}
}

/* About page: the quote leads, the calls to action sit beside it on a wide
   screen rather than pushing the portrait and bio further down the page. */
.phead-aside{display:flex;flex-direction:column;gap:10px;align-items:stretch;
  margin-top:26px;}
@media (min-width:900px){
  .phead-split{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(28px,4vw,60px);align-items:end;}
  .phead-aside{margin-top:0;min-width:210px;}
}