/* ============================================================================
   EJ SERVICES — "Fog & Chrome"
   Half Moon Bay is under the marine layer most of the year. Everything outside
   is cool, soft-edged, desaturated. Inside a one-man shop on Metzgar Street the
   opposite is true: polished stainless, brass fittings, a hot amber stream of
   crema. The whole page is built on that one contrast and decorates no further.

   ── THE AMBER RULE — DO NOT MERGE THESE TWO TOKENS ──
   --crema      #B06E2C  GRAPHIC ONLY. Rules, star fills, hairlines, borders.
                3.84:1 on --paper, 3.42:1 on --fog, 3.16:1 on --sand.
                Clears 3:1 for non-text graphics. FAILS 4.5:1 for text.
   --crema-ink  #8A5220  The ONLY amber permitted to touch a word or a focus
                ring. 5.93:1 paper, 5.29:1 fog, 4.88:1 sand.
   --crema-dark #D9A05B  Amber on the --cypress footer ONLY. 5.81:1.
   The next person to open this file will want to "simplify" these into one
   value. That change fails WCAG AA. Leave them.

   ── THE GRAY RULE ──
   Every gray here is mixed toward blue-green. The only neutral grays are the
   three --chrome-* tokens; they read as polished metal precisely because
   nothing else on the page is neutral.

   ── THE 80/20 RULE ──
   At any scroll position at least one warm element must be visible: a
   photograph, the --sand band, a crema section rule, or the footer hot rule.
   ========================================================================= */

/* ── Self-hosted webfonts ───────────────────────────────────────────────
   Same-origin woff2 instead of a Google Fonts round trip: no third-party
   DNS + TLS + request chain in front of first paint, on a page that makes
   no other external request. Files are from the Google Fonts API (SIL OFL
   for Newsreader, OFL for IBM Plex), latin and latin-ext subsets only —
   the browser fetches only the subsets the page's glyphs need, so the
   latin-ext files sit on disk and are never downloaded for English copy.
   Newsreader is the wght-only variable cut, not the opsz one: same look at
   these sizes, 110 KB lighter.
   ──────────────────────────────────────────────────────────────────── */

/* Metric-matched fallback for the display serif. Measured in-browser at
   100px: Newsreader sets the H1 at 1986px, Palatino Linotype at 2085px and
   Georgia at 2076px — the fallback is ~4.6% wider, enough to change where a
   three-line H1 breaks and shift the whole page when the webfont swaps in.
   size-adjust:95.26% scales the fallback's advances to match, so the swap is
   invisible and contributes no layout shift. Vertical rhythm is unaffected:
   every line-height on this page is unitless, so it computes off the
   unchanged font-size rather than the font's own metrics. */
@font-face{
  font-family:'Newsreader Metric Fallback';
  src:local('Palatino Linotype'), local('Palatino'), local('Book Antiqua'),
      local('Georgia'), local('Times New Roman');
  size-adjust:95.26%;
  font-display:swap;
}

@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-normal-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-normal-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-normal-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-normal-400-500-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-normal-400-500-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/newsreader-italic-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/newsreader-italic-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('assets/fonts/newsreader-normal-400-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('assets/fonts/newsreader-normal-400-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  color-scheme: light dark;

  /* grounds */
  --fog:        #E7EBEC;
  --fog-top:    #DDE4E6;
  --fog-mid:    #EEF1F1;
  --paper:      #F8F7F5;
  --sand:       #E7E1D6;
  --cypress:    #1E3330;

  /* type */
  --ink:        #101A1D;
  --ink-2:      #2C3A3E;
  /* Small uppercase monospace needs more contrast than a conventional
     muted grey: at 11-12px with tracking, a 5:1 grey reads as decoration
     rather than as words. 7.33 fog / 8.22 paper / 6.77 sand. */
  --ink-muted:  #3E4D51;
  --on-cypress:     #E7EBEC;
  --on-cypress-mut: #A8B8B8;

  /* accents */
  --pacific:      #0F4A57;
  --seaglass:     #8FB3AC;   /* DECORATIVE ONLY */
  --seaglass-ink: #3F6B66;
  --crema:        #B06E2C;   /* graphic only — see THE AMBER RULE */
  --crema-ink:    #8A5220;
  --crema-dark:   #D9A05B;
  --focus:        #8A5220;

  /* structure */
  --rule:        #C6CFD1;
  --rule-strong: #A9B5B8;
  --chrome-hi:   #FDFEFE;
  --chrome-mid:  #C9D2D4;
  --chrome-lo:   #7D8C90;

  /* metrics */
  --wrap:      75rem;
  --gutter:    clamp(1.25rem, 5vw, 3.5rem);
  --measure:   62ch;
  --label-col: 11rem;
  --sec-pad:   clamp(2.25rem, 4.5vw, 3.75rem);
  --chamfer:   18px;
  --callbar-h: 60px;
  --radius:    3px;

  /* effects */
  --grain-opacity: .035;
  --grain-blend:   multiply;
  --panel-shadow:  inset 0 1px 0 var(--chrome-hi),
                   0 2px 6px -4px rgba(16,40,48,.18),
                   0 18px 40px -28px rgba(16,40,48,.35);
  --chrome-strip:  linear-gradient(90deg,
                     var(--chrome-lo) 0%, var(--chrome-mid) 8%,
                     var(--chrome-hi) 14%, var(--chrome-mid) 22%,
                     #8E9C9F 40%, #E6EDEE 58%,
                     var(--chrome-mid) 70%, var(--chrome-lo) 100%);

  /* faces */
  --font-display: "Newsreader","Newsreader Metric Fallback","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --font-sans:    "IBM Plex Sans",ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:    "IBM Plex Mono",ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fog:#0C1517; --fog-top:#070E10; --fog-mid:#101B1D;
    --paper:#162124; --sand:#1F1C18; --cypress:#0A1211;
    --ink:#EDF1F1; --ink-2:#C7D2D3; --ink-muted:#A4B2B4;
    --pacific:#74C3CE; --seaglass:#5E8A84; --seaglass-ink:#9CC4BD;
    --crema:#D9A05B; --crema-ink:#E4B478; --crema-dark:#D9A05B;
    --focus:#E4B478;
    --rule:#2A3639; --rule-strong:#415154;
    --chrome-hi:#DDE6E8; --chrome-mid:#8E9C9F; --chrome-lo:#4B585B;
    --grain-opacity:.05; --grain-blend:screen;
    --panel-shadow: inset 0 1px 0 rgba(221,230,232,.16),
                    0 2px 6px -4px rgba(0,0,0,.5),
                    0 18px 40px -28px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --fog:#0C1517; --fog-top:#070E10; --fog-mid:#101B1D;
  --paper:#162124; --sand:#1F1C18; --cypress:#0A1211;
  --ink:#EDF1F1; --ink-2:#C7D2D3; --ink-muted:#A4B2B4;
  --pacific:#74C3CE; --seaglass:#5E8A84; --seaglass-ink:#9CC4BD;
  --crema:#D9A05B; --crema-ink:#E4B478; --crema-dark:#D9A05B;
  --focus:#E4B478;
  --rule:#2A3639; --rule-strong:#415154;
  --chrome-hi:#DDE6E8; --chrome-mid:#8E9C9F; --chrome-lo:#4B585B;
  --grain-opacity:.05; --grain-blend:screen;
  --panel-shadow: inset 0 1px 0 rgba(221,230,232,.16),
                  0 2px 6px -4px rgba(0,0,0,.5),
                  0 18px 40px -28px rgba(0,0,0,.7);
}

/* ── reset ───────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,p,dl,dd,figure,blockquote,ul{ margin:0; }
ul{ padding:0; list-style:none; }
img,svg,picture{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink-2);
  background-color:var(--fog);
  background-image:linear-gradient(180deg,
    var(--fog-top) 0%, var(--fog) 18%, var(--fog-mid) 55%, var(--fog) 100%);
  background-attachment:scroll;
  padding-bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}

/* PHOTOGRAPHIC GRAIN. The single layer that makes the fog read as weather
   rather than a flat gray fill, and the only thing that kills the banding a
   large low-contrast gradient always produces. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:1;
  pointer-events:none; contain:strict;
  opacity:var(--grain-opacity);
  mix-blend-mode:var(--grain-blend);
  background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ── type scale ──────────────────────────────────────────────────────── */
h1,h2,h3{ text-wrap:balance; }
p,li,figcaption,dd{ text-wrap:pretty; }

h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  line-height:1.05;
  letter-spacing:-.025em;
  color:var(--ink);
}
.h1-brand{
  display:block;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.75rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin-bottom:.7rem;
}
.h1-line{ display:block; }

h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
}
h3{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  line-height:1.25;
  letter-spacing:.01em;
  color:var(--ink);
}
.lead{
  font-family:var(--font-display);
  font-size:clamp(1.125rem, 1.05rem + .5vw, 1.375rem);
  line-height:1.55;
  max-inline-size:var(--measure);
}
.lead + .lead{ margin-top:.75rem; }

.eyebrow{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--ink-muted);
}
/* A hot hairline under every section eyebrow. This is how the 80/20 rule
   gets satisfied cheaply on the long cool stretches. */
.eyebrow--crema::after{
  content:"";
  display:block;
  width:28px; height:2px;
  margin-top:.6rem;
  background:var(--crema);
}
.eyebrow--onDark{ color:var(--crema-dark); }

.vh{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

/* CREMA UNDERLINE SWIPE — a hot line under cool type. */
.swipe{
  text-decoration:underline;
  text-decoration-color:var(--crema);
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  transition:text-decoration-thickness .18s ease;
}
.swipe:hover, .swipe:focus-visible{ text-decoration-thickness:2px; }

a:focus-visible, .btn:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px;
  font-family:var(--font-mono); font-size:.8125rem;
}
.skip:focus{
  position:fixed; top:12px; left:12px; z-index:99;
  padding:12px 20px;
  background:var(--paper); color:var(--pacific);
  border:1px solid var(--rule);
}

/* ── the chrome trim strip: the one thing on the page that shines ────── */
.chrome-strip{
  position:relative; z-index:2;
  height:4px;
  background-image:var(--chrome-strip);
}
.chrome-strip--thin{ height:3px; opacity:.6; }
.chrome-strip--hero{
  background-size:220% 100%;
  animation:chrome-drift 24s linear infinite;
}
.chrome-strip--footer{ height:2px; opacity:.4; }
@keyframes chrome-drift{
  from{ background-position:0 0; }
  to{ background-position:220% 0; }
}

/* ── shared layout ───────────────────────────────────────────────────── */
.masthead__in,.hero__in,.titleblock,.band__in,.footer__in,.footer__sub{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.sec{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:var(--sec-pad) var(--gutter);
  position:relative;
}
/* DOUBLED SALT-ETCHED RULES — two hairlines instead of one is a printed
   spec-sheet convention; it makes the page feel set rather than styled. */
.sec + .sec{
  border-top:1px solid var(--rule);
}
.sec + .sec::before{
  content:"";
  position:absolute; left:var(--gutter); right:var(--gutter); top:3px;
  height:1px; background:var(--rule); opacity:.35;
}
.sec__label .eyebrow{ margin-bottom:.75rem; }
.sec__body > h2{ margin-bottom:1.125rem; }

/* ── masthead ────────────────────────────────────────────────────────── */
.masthead{ position:relative; z-index:2; }
.masthead__in{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.5rem;
  padding-block:1rem;
}
.wordmark{
  display:flex; align-items:center;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.375rem, 2vw, 1.625rem);
  letter-spacing:-.02em;
  color:var(--ink);
}
.cog{ color:var(--seaglass); flex:none; }
.cog--mark{ width:20px; height:20px; margin-right:.6rem; margin-top:-6px; }
.wordmark__tag{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:.6875rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin-top:.3rem;
}
.masthead__contact{ display:none; text-align:right; }
.masthead__tel{
  display:inline-block;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:1.125rem;
  color:var(--ink);
  margin-top:.35rem;
  min-height:44px;
  line-height:44px;
}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{ position:relative; z-index:2; padding-bottom:0; }
.hero__in{ padding-top:0; }
.hero__figure{
  position:relative;
  margin-inline:calc(var(--gutter) * -1);
  margin-bottom:1.25rem;
}
.hero__figure img{
  width:100%;
  aspect-ratio:2/1;
  object-fit:cover;
  object-position:58% 50%;
}
/* EDGE MASKING, NEVER WAVE DIVIDERS. A headland disappearing into fog is the
   honest coastal transition; an SVG wave divider is a tourist-template tell. */
.hero__figure::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, var(--fog) 0%, transparent 18%,
                             transparent 82%, var(--fog) 100%);
}
.hero__text{ padding-top:.5rem; }
.hero h1{ margin-top:.75rem; }
.kicker{
  font-family:var(--font-mono);
  font-size:.8125rem;
  line-height:1.6;
  color:var(--ink-muted);
  max-inline-size:46ch;
  margin-top:.875rem;
}

/* THE BLUEPRINT TITLE BLOCK — every fact a caller asks about, in one glance,
   with not one word of marketing added. Hairline gaps, not borders. */
.titleblock{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--rule);
  border-block:1px solid var(--rule);
  margin-top:1.5rem;
  padding-inline:0;
  max-width:var(--wrap);
  margin-inline:auto;
}
.titleblock__cell{
  background:var(--paper);
  padding:.75rem 1.125rem;
  min-height:auto;
}
.titleblock dt{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.71875rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.titleblock dd{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:1.0625rem;
  color:var(--ink);
  margin-top:.35rem;
}
.titleblock dd a{
  text-decoration:underline;
  text-decoration-color:var(--crema);
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
}
.titleblock dd a:hover, .titleblock dd a:focus-visible{ text-decoration-thickness:2px; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.actions{
  display:flex; flex-direction:column; gap:.75rem;
  margin-top:1.5rem;
}
.btn{
  display:flex; flex-direction:column; justify-content:center;
  min-height:56px;
  padding:.5rem 1.25rem;
  border:1px solid var(--pacific);
  border-radius:var(--radius);
  text-decoration:none;
  background:transparent;
  transition:background-color .15s ease;
}
.btn:hover, .btn:focus-visible{
  background:color-mix(in srgb, var(--pacific) 8%, transparent);
}
.btn__label{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.6875rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.btn__value{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:1rem;
  color:var(--pacific);
  overflow-wrap:anywhere;
}

/* ── services ────────────────────────────────────────────────────────── */
.svc{ padding-block:1.25rem; position:relative; }
.svc + .svc{ border-top:1px solid var(--rule); }
.svc + .svc::before{
  content:"";
  position:absolute; left:0; right:0; top:3px;
  height:1px; background:var(--rule); opacity:.35;
}
/* Jim's own sentences are the service titles now, so they run longer than a
   label: a notch smaller than a section heading, so a 53-character line reads
   as a title rather than as a shout. */
.svc h3{
  font-size:clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  letter-spacing:0;
  max-inline-size:46ch;
}

/* A plain list, in as many columns as the measure allows. Set in the body
   sans rather than monospace: these 44 brand names are the most-scanned text
   on the page and whoever is reading them is looking for theirs in a hurry. */
.brands{
  columns:8rem;
  column-gap:1.25rem;
  margin-top:.6rem;
}
.brands li{
  break-inside:avoid;
  display:flex;
  align-items:baseline;
  gap:.5rem;
  padding-block:.15rem;
  font-size:.9375rem;
  line-height:1.5;
  color:var(--ink-2);
}
.brands li::before{
  content:"";
  flex:none;
  width:6px; height:1px;
  background:var(--seaglass-ink);
  transform:translateY(-.34em);
}

/* Brand names as a rack of parts tags, not a tag cloud. Every one of these is
   a long-tail query someone types at 11pm with a dead machine, so none of
   them is ever hidden behind a toggle. */

.notserviced{
  margin-top:1.5rem;
  padding:1.125rem 1.25rem;
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--ink) 4%, var(--paper));
  box-shadow:inset 0 1px 3px rgba(16,32,31,.06);
}
.notserviced__label{
  display:flex; align-items:center; gap:.75rem;
  margin-bottom:.75rem;
}
.notserviced__label::after{
  content:""; flex:1; height:1px; background:var(--rule);
}
.notserviced p:not(.eyebrow){ max-inline-size:var(--measure); }

.schematic{ display:none; }

/* ── bands ───────────────────────────────────────────────────────────── */
.band{
  position:relative;
  padding-block:clamp(2.5rem, 5vw, 4rem);
}
/* HORIZON TILT, NOT A SWOOSH. A sub-degree tilt you feel rather than see.
   This is the entire permitted amount of "wave" on the page. */
.band--sand{
  background:var(--sand);
  clip-path:polygon(0 0.9%, 100% 0, 100% 100%, 0 99.2%);
  border-top:1px solid color-mix(in srgb, var(--seaglass) 40%, transparent);
}

.ridge{
  width:100%;
  height:40px;
  color:color-mix(in srgb, var(--seaglass) 80%, var(--pacific));
  margin-block:.5rem 0;
}

/* ── contact & about: the punched repair tag ─────────────────────────── */
.tagwrap{ position:relative; }
/* The object Jim would wire to a machine: the conversion moment rendered in
   shop reality rather than as a web form. */
.tag{
  position:relative;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--panel-shadow);
  padding:1rem 1.125rem;
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer));
}
.tag::before{
  content:"";
  position:absolute; top:14px; left:22px;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--fog);
  border:1px solid var(--rule);
}
.tag__row{ padding-block:.6rem; }
.tag__row + .tag__row{ border-top:1px solid var(--rule); }
.tag__row:first-child{ padding-top:1.75rem; }
.tag dt{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.71875rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.tag dd{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:1rem;
  color:var(--ink);
  margin-top:.2rem;
}
.tag__row--link{ padding:0; }
.tag__row--link dt{ padding:.7rem 0 0; }
.tag__row--link dd{ margin:0; }
.tag__row--link a{
  display:inline-flex; align-items:center;
  min-height:48px;
  color:var(--pacific);
  overflow-wrap:anywhere;
}



/* ── reviews ─────────────────────────────────────────────────────────── */
.cog--fleuron{
  width:22px; height:22px;
  margin:0 auto .875rem;
}
.reviews h2{ text-align:center; margin:.5rem 0 1.5rem; }

.ratings{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-bottom:1.5rem;
}
.rating{ text-align:center; padding-block:.75rem; position:relative; }
.rating + .rating{ border-left:1px solid var(--rule-strong); }
.rating a{ text-decoration:none; display:block; padding:.25rem; }
.rating__num{
  display:block;
  font-family:var(--font-display);
  font-weight:400;
  font-size:2.125rem;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.stars{ display:flex; justify-content:center; gap:2px; margin:.4rem 0 .35rem; }
.star{
  width:14px; height:14px;
  fill:var(--crema);
  stroke:var(--crema-ink);
  stroke-width:.5;
}
.rating__src{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-muted);
}

.quote figcaption{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--ink-muted);
  margin-top:.75rem;
}

/* Quotes are set as a hairline grid rather than as cards: four short
   testimonies read faster with no chrome around them, and the page keeps its
   printed-spec-sheet grammar instead of turning into a wall of widgets. */
.quotes{
  display:grid;
  gap:0;
  border-top:1px solid var(--rule-strong);
}
.quote{
  padding-block:1.125rem;
  border-bottom:1px solid var(--rule-strong);
}
.quote blockquote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1rem, .95rem + .35vw, 1.1875rem);
  line-height:1.45;
  color:var(--ink-2);
  max-inline-size:52ch;
}

/* Quarantine, don't fight: both badges live only here, each on its own light
   plate. Nothing else on the page uses red, so the brick red reads as an
   outside authority's mark rather than a colour the site chose. */
.credential{
  text-align:center;
  margin-top:1.5rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.credential a{
  display:inline-block;
  min-height:44px;
  line-height:44px;
  color:var(--ink-muted);
  text-decoration:underline;
  text-decoration-color:var(--crema);
  text-decoration-thickness:1px;
  text-underline-offset:.35em;
}
.credential a:hover, .credential a:focus-visible{
  color:var(--ink);
  text-decoration-thickness:2px;
}


/* ── links ─────────────────────────────────────────────────────────── */
.lead a.swipe{ color:var(--pacific); }

/* ── footer ──────────────────────────────────────────────────────────── */
.footer{
  position:relative;
  background:var(--cypress);
  color:var(--on-cypress);
  margin-top:var(--sec-pad);
  padding-bottom:1.5rem;
  --focus:var(--crema-dark);
}
.footer .chrome-strip--footer{ position:absolute; top:0; left:0; right:0; }
.footer::before{
  content:"";
  position:absolute; top:2px; left:0; right:0;
  height:1px; background:var(--crema-dark);
}
.footer__in{
  display:grid; gap:2rem;
  padding-block:clamp(2.25rem, 4vw, 3.25rem) 0;
}
.footer__tel{
  display:inline-block;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  letter-spacing:-.01em;
  color:var(--on-cypress);
  margin-top:.75rem;
  text-decoration-color:var(--crema-dark);
}
.footer__row{
  display:flex; align-items:center;
  min-height:56px;
  margin-top:.75rem;
  padding-inline:1rem;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius);
  text-decoration:none;
  overflow-wrap:anywhere;
}
.footer__note{
  color:var(--on-cypress-mut);
  font-size:.9375rem;
  margin-top:1.25rem;
  max-inline-size:34ch;
}
.footer__note--links{ margin-top:1rem; }
.footer address{
  font-style:normal;
  line-height:1.7;
}
.footer address a{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  position:relative;
  max-width:100%;
  text-decoration:none;
}
.footer address a::after{
  content:"";
  position:absolute;
  left:0;
  right:-15px;
  bottom:0;
  height:1px;
  background:rgba(255,255,255,.22);
}
.footer__address-line{ display:block; }
.footer__address-location{
  display:flex;
  align-items:center;
  gap:.5rem;
  white-space:nowrap;
}
.footer__bicycle{
  flex:none;
  width:clamp(3.5rem, 16vw, 4.25rem);
  height:auto;
  transform:translateX(15px);
  color:var(--seaglass);
  opacity:.9;
}
.footer__bicycle *{ vector-effect:non-scaling-stroke; }
.footer__links{
  display:flex; flex-wrap:wrap; gap:1.25rem;
  margin-top:1.25rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--on-cypress-mut);
}
.footer__links a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.22); }
.footer__sub{
  margin-top:1.75rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--font-mono);
  font-size:.75rem;
  line-height:1.7;
  color:var(--on-cypress-mut);
  text-align:center;
}

/* ── fixed mobile action bar ─────────────────────────────────────────── */
.callbar{
  position:fixed; inset-inline:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:repeat(3,1fr);
  height:var(--callbar-h);
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--paper);
  border-top:1px solid var(--rule);
  background-image:var(--chrome-strip);
  background-size:100% 2px;
  background-repeat:no-repeat;
  background-position:0 0;
}
.callbar a{
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  color:var(--pacific);
  font-family:var(--font-sans);
  font-weight:500;
  font-size:.9375rem;
}
.callbar a + a{ border-left:1px solid var(--rule); }

/* ══ 640px — density ══════════════════════════════════════════════════ */
@media (min-width:640px){
  .brands{ columns:10rem; column-gap:1.75rem; }
  .actions{ flex-direction:row; flex-wrap:wrap; }
  .btn{ flex:1 1 auto; min-width:200px; }
  .titleblock{ grid-template-columns:repeat(4, 1fr); }
}

/* ══ 768px — the desktop contact model takes over ═════════════════════ */
@media (min-width:768px){
  body{ font-size:1.125rem; padding-bottom:0; }
  .callbar{ display:none; }
  .masthead__contact{ display:block; }
  .masthead__in{ padding-block:1.5rem; }
  .hero__figure img{ aspect-ratio:16/9; object-position:55% 50%; }
  .quotes{ grid-template-columns:1fr 1fr; column-gap:clamp(2rem,4vw,3.5rem); }
  .quote:nth-child(odd){ border-right:1px solid var(--rule-strong); padding-right:clamp(2rem,4vw,3.5rem); }
  .brands{ columns:12rem; column-gap:1.75rem; }
  .brands li{ font-size:1rem; }
  .rating__num{ font-size:3rem; }
  .star{ width:18px; height:18px; }
  .tag{ padding:1.5rem 1.75rem; }
  .footer__in{ grid-template-columns:1.15fr .85fr; }
  .footer__sub{
    display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem;
    text-align:left;
  }
  .ridge{ height:64px; }
}

/* ══ 980px — the editorial grid engages ══════════════════════════════ */
@media (min-width:980px){
  .sec{
    display:grid;
    grid-template-columns:var(--label-col) minmax(0,1fr);
    column-gap:clamp(2rem, 4vw, 4rem);
  }
  .sec__label{
    position:sticky; top:2rem;
    align-self:start;
    margin-bottom:0;
  }

  /* Service titles should use the full content column on desktop. The mobile
     measure and balanced wrapping remain useful on narrow screens, but here
     they make longer titles break before reaching the section's right edge. */
  .svc--specialty h3{
    max-inline-size:none;
    text-wrap:wrap;
  }

  .hero__in{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:clamp(2rem, 4vw, 3.5rem);
    align-items:end;
  }
  .hero__text{ padding-top:clamp(2rem, 5vw, 4.5rem); padding-bottom:.5rem; }
  .hero__figure{
    margin:0 calc(var(--gutter) * -1) 0 0;
    align-self:end;
  }
  .hero__figure img{
    aspect-ratio:3/2;
    object-position:55% 50%;
    /* Chamfer 1 of 2 on the page. It lives on the BOTTOM right, where the
       photo meets the page ground at full opacity — a cut at the top right
       would fall inside the fog fade and never be seen. */
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);
  }
  .hero__figure::after{
    background:linear-gradient(180deg, var(--fog) 0%, transparent 22%);
  }
  .titleblock{ margin-top:2.5rem; }




  /* the dotted leader — a printed-tag convention, desktop only */
  .tag__row{ display:flex; align-items:baseline; }
  .tag__row dt{ flex:none; }
  .tag__row dt::after{
    content:"";
    display:inline-block;
    width:2rem;
    border-bottom:1px dotted var(--rule-strong);
    margin:0 .6rem;
    transform:translateY(-.2em);
  }
  .tag__row dd{ margin-top:0; text-align:right; margin-left:auto; }
  .tag__row--link dd{ display:flex; justify-content:flex-end; }

}

/* ══ 1080px — the exploded group head appears ════════════════════════ */
@media (min-width:1080px){
  .schematic{
    display:block;
    width:200px;
    margin-top:2.5rem;
    color:var(--seaglass);
  }
}

/* ══ 1180px — review cards to three columns ══════════════════════════ */
@media (min-width:1180px){
  .quote blockquote{ max-inline-size:44ch; }
}

/* ══ desktop fog: fixed attachment only where it is cheap ════════════ */
@media (min-width:900px){
  body{ background-attachment:fixed; }
}

/* ══ landscape phones ════════════════════════════════════════════════ */
@media (max-height:520px) and (orientation:landscape){
  .hero__figure img{ aspect-ratio:3/1; }
}

/* ══ preferences ═════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

@media (prefers-contrast: more){
  :root{
    --grain-opacity:0;
    --rule:#7C8A8D;
    --rule-strong:#5C6B6E;
    --ink-muted:#2C3A3E;
  }
  .band--sand{ clip-path:none; }
}

/* ══ print ═══════════════════════════════════════════════════════════ */
@media print{
  .callbar, .chrome-strip, .ridge,
  .schematic, .cog, .skip{ display:none!important; }
  body::after{ display:none; }
  body{
    background:#fff!important;
    color:#000;
    font-size:11pt;
    padding-bottom:0;
  }
  .footer{ background:#fff; color:#000; }
  .footer__note, .footer__links, .footer__sub{ color:#000; }
  .swipe, a{ text-decoration:underline; background-image:none; }
  .tag{ box-shadow:none; clip-path:none; }
}