/* Self-hosted copy of https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Kaushan+Script:wght@400;600;800&display=swap
   made by sitelib.vendor. Licences: /static/fonts/*-LICENSE.txt */
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-400-vietnamese-9e7e7207af.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-400-latin-ext-1eb62753e2.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-400-latin-7fff1bb22e.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-500-vietnamese-892fed0cfb.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-500-latin-ext-a6ff9214bf.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-500-latin-460f141ec8.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-600-vietnamese-5598861e72.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-600-latin-ext-aef7edf54f.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-600-latin-215a93c696.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-700-vietnamese-6c554f2dec.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-700-latin-ext-9d351bd922.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-700-latin-3787a5a419.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-800-vietnamese-87b35049bc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-800-latin-ext-22539b785b.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-800-latin-2515494e8c.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-900-vietnamese-92a1a5a866.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-900-latin-ext-62fc8c0241.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/static/fonts/barlowcondensed-v13-900-latin-aa01966de3.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;
}
/* latin-ext */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/kaushanscript-v19-400-latin-ext-342d7c72ac.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/kaushanscript-v19-400-latin-addcc80ddc.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;
}
/* Size-matched fallbacks (sitelib.fallback): until a file above arrives, its text is drawn in a
   local face scaled to its widths, so nothing moves when it swaps in. The base's stacks name them. */
@font-face { font-family: "Barlow Condensed fallback Arial"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); size-adjust: 71.95%; ascent-override: 138.99%; descent-override: 27.80%; line-gap-override: 0.00%; }
@font-face { font-family: "Barlow Condensed fallback Roboto"; font-style: normal; font-weight: 400; src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"); size-adjust: 73.90%; ascent-override: 135.31%; descent-override: 27.06%; line-gap-override: 0.00%; }
@font-face { font-family: "Barlow Condensed fallback Arial"; font-style: normal; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); size-adjust: 73.63%; ascent-override: 135.81%; descent-override: 27.16%; line-gap-override: 0.00%; }
@font-face { font-family: "Barlow Condensed fallback Roboto"; font-style: normal; font-weight: 500; src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"); size-adjust: 75.63%; ascent-override: 132.23%; descent-override: 26.45%; line-gap-override: 0.00%; }
@font-face { font-family: "Barlow Condensed fallback Arial"; font-style: normal; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust: 71.12%; ascent-override: 140.61%; descent-override: 28.12%; line-gap-override: 0.00%; }
@font-face { font-family: "Barlow Condensed fallback Roboto"; font-style: normal; font-weight: 600; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); size-adjust: 76.05%; ascent-override: 131.49%; descent-override: 26.30%; line-gap-override: 0.00%; }
@font-face { font-family: "Barlow Condensed fallback Arial"; font-style: normal; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust: 72.74%; ascent-override: 137.48%; descent-override: 27.50%; line-gap-override: 0.00%; }
@font-face { font-family: "Barlow Condensed fallback Roboto"; font-style: normal; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); size-adjust: 77.78%; ascent-override: 128.56%; descent-override: 25.71%; line-gap-override: 0.00%; }
@font-face { font-family: "Barlow Condensed fallback Arial"; font-style: normal; font-weight: 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust: 74.34%; ascent-override: 134.51%; descent-override: 26.90%; line-gap-override: 0.00%; }
@font-face { font-family: "Barlow Condensed fallback Roboto"; font-style: normal; font-weight: 800; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); size-adjust: 79.50%; ascent-override: 125.79%; descent-override: 25.16%; line-gap-override: 0.00%; }
@font-face { font-family: "Barlow Condensed fallback Arial"; font-style: normal; font-weight: 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust: 75.74%; ascent-override: 132.02%; descent-override: 26.40%; line-gap-override: 0.00%; }
@font-face { font-family: "Barlow Condensed fallback Roboto"; font-style: normal; font-weight: 900; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); size-adjust: 81.00%; ascent-override: 123.46%; descent-override: 24.69%; line-gap-override: 0.00%; }
@font-face { font-family: "Kaushan Script fallback Arial"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); size-adjust: 88.68%; ascent-override: 122.24%; descent-override: 41.38%; line-gap-override: 0.00%; }
@font-face { font-family: "Kaushan Script fallback Roboto"; font-style: normal; font-weight: 400; src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"); size-adjust: 88.21%; ascent-override: 122.89%; descent-override: 41.61%; line-gap-override: 0.00%; }
/* vendored from bases/thelen/theme.css by tools/vendor_thelen.py: do not edit */
/* thelen - theme. Generated from refs/tmpl/theme.css by rebuild/gen_css.py.
   Every number is a token: @m ref_measured.json, @c ref_components.json,
   @d reference.json expected_diffs. Colour roles: PROVENANCE.md "Colour roles". */

:root {
  /* client colours (PROVENANCE.md "Colour roles") */
  --primary: #054297;
  --primary-dark: #043578;
  --secondary: #0A6ED1;
  --dark: #08234D;
  --dark-soft: #0E3068;
  --surface: #FCE7C2;
  --soft: color-mix(in srgb, var(--primary) 76%, var(--surface)); /* departure soft_orange_follows_primary */
  /* the reference's neutrals, as measured */
  --white: rgb(255, 255, 255); /* hero_body.color */
  --cream: rgb(252, 231, 194); /* hero_h1.color */
  /* faces (triage): fairweather, acumin-pro -> Barlow Condensed; parkside -> Kaushan Script */
  /* each face's size-matched fallbacks next (sitelib/fallback.py): a real site's fonts.css defines
     them, so nothing moves when the file swaps in; a mockup has none and skips the names */
  --f-display: "Barlow Condensed", "Barlow Condensed fallback Arial", "Barlow Condensed fallback Roboto", sans-serif;
  --f-script: "Kaushan Script", "Kaushan Script fallback Arial", "Kaushan Script fallback Roboto", cursive;
  /* rhythm: UIkit's gutter, section padding and the three grid gutters */
  --gutter: 40px; /* svc_container.padL */
  --band-pad: 70px; /* svc_band.padT */
  --gap-s: -20px; /* ref_components svc_grid.margin#3@1440 */
  --gap-m: -40px; /* ref_components why_grid.margin#3@1440 */
  --gap-l: -80px; /* ref_components foot_grid.margin#3@1440 */
  --card-pad: 40px; /* card_body.padT */
  --radius: 12px; /* hero_btn.radius */
  /* type that steps at an edge */
  --eyebrow-size: 32px; /* section_eyebrow.size */
  --eyebrow-lh: 38.4px; /* section_eyebrow.lh */
  --h2-size: 60px; /* h2.size */
}

html {
  background: var(--surface);
}

body {
  margin: 0;
  font-family: var(--f-display);
  font-size: 18px; /* body.size */
  line-height: 22px; /* body.lh */
  font-weight: 400; /* body.weight */
  color: var(--dark);
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
}

p, h1, h2, h3, h4, ul {
  margin: 0;
}

svg {
  display: block;
}

/* UIkit's containers: a content-box max width inside the gutter */
.container {
  box-sizing: content-box;
  max-width: 1200px; /* section_eyebrow.w@1440 */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--large {
  max-width: 1400px; /* steps_grid.w@1440 */
}

.container--small {
  max-width: 900px; /* hero_eyebrow.w@1440 */
}

/* UIkit's grid: a negative left margin and a left padding on every cell */
.grid {
  --g: var(--gap-m);
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 var(--g);
  padding: 0;
  list-style: none;
}

.grid--s {
  --g: var(--gap-s);
}

.grid--l {
  --g: var(--gap-l);
}

.grid > * {
  flex: 1 1 0;
  min-width: 0;
  padding-left: calc(0px - var(--g));
}

/* a band: UIkit's section padding */
.band {
  position: relative;
  padding-top: var(--band-pad);
  padding-bottom: var(--band-pad);
}

/* the script eyebrow, the section heading and the rule under it */
.t-eyebrow {
  font-family: var(--f-script);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-lh);
  font-weight: 600; /* section_eyebrow.weight */
  font-synthesis: none;
  letter-spacing: 2%; /* section_eyebrow.ls */
  text-transform: capitalize;
  color: var(--primary);
  margin: 0px 0px 20px 0px; /* ref_components section_eyebrow.margin@1440 */
}

.t-h2 {
  font-size: var(--h2-size);
  line-height: 56px; /* h2.lh */
  font-weight: 800; /* h2.weight */
  letter-spacing: 2%; /* h2.ls */
  text-transform: uppercase;
  color: var(--dark);
  margin: 0px 0px 20px 0px; /* ref_components h2.margin@1440 */
}

.t-rule {
  height: 6px; /* svc_divider.h@1440 */
  margin: 20px 0px 20px 0px; /* ref_components svc_divider.margin@1440 */
  border: 0;
}

.t-rule::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 100px; /* ref_components svc_divider.after.w@1440 */
  border-top: 6px solid var(--secondary); /* svc_divider.h@1440 */
}

.t-lead {
  font-size: 20px; /* svc_intro.size */
  line-height: 30px; /* svc_intro.lh */
  font-weight: 600; /* svc_intro.weight */
}

/* UIkit's buttons: one shape, three fills */
.btn {
  display: inline-block;
  font-size: 26px; /* hero_btn.size */
  line-height: 46px; /* hero_btn.lh */
  font-weight: 800; /* hero_btn.weight */
  letter-spacing: 8%; /* hero_btn.ls */
  text-transform: uppercase;
  text-align: center;
  padding: 0px 24px 0px 24px; /* ref_components hero_btn.pad@1440 */
  border-bottom: 1px solid; /* ref_components hero_btn.border#2@1440 */
  border-radius: var(--radius);
  box-shadow: 0 3px 0 0 var(--white); /* hero_btn.shadow#2@1440 */
  max-width: 100%;
  vertical-align: middle;
}

.btn--teal {
  background: var(--secondary);
  color: var(--dark);
}

.btn--navy {
  background: var(--dark);
  color: var(--white);
}

.btn--orange {
  background: var(--primary);
  color: var(--white);
}

/* the script text link with its teal underline */
.t-link {
  display: inline-block;
  font-family: var(--f-script);
  font-size: 26px; /* service_link.size */
  line-height: 22px; /* service_link.lh */
  font-weight: 600; /* service_link.weight */
  font-synthesis: none;
  letter-spacing: 8%; /* service_link.ls */
  text-transform: capitalize;
  color: var(--primary);
  position: relative;
}

.t-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(0px - 3px); /* ref_components service_link.border#2@1440 */
  height: 3px; /* ref_components service_link.border#2@1440 */
  background: var(--secondary);
}

/* the photo card of the services and resources bands */
.card {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--white);
  border: 4px solid var(--primary-dark); /* ref_components card.border#0@1440 */
  border-radius: 12px; /* card.radius */
  box-shadow: 0 6px 0 0 var(--soft); /* card.shadow#2@1440 */
  text-align: center;
}

.card__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.card__chevron {
  fill: var(--primary-dark);
}

.card__media {
  position: relative;
  line-height: 0;
  border-radius: 12px 12px 0px 0px; /* card_media.radius */
  overflow: hidden;
}

.card__img {
  display: inline-block;
  box-sizing: content-box;
  width: 100%;
  object-fit: cover;
  border-bottom: 6px solid var(--secondary); /* ref_components card_img.border#2@1440 */
}

.card__body {
  position: relative;
  padding: var(--card-pad);
}

.card__meta {
  display: flex;
  justify-content: center;
  height: 20px; /* ref_components card_meta.h@1440 */
}

.card__badge {
  position: relative;
  flex: none;
  top: 18px; /* @m(card_badge.top@1440 - card_body.top@1440 - card_body.padT@1440 - c:card_badge.margin#0@1440) */
  width: 85px; /* card_badge.w@1440 */
  height: 85px; /* card_badge.h@1440 */
  margin: -100px 0px 0px 0px; /* ref_components card_badge.margin@1440 */
  padding: 8px 8px 8px 8px; /* ref_components card_badge.pad@1440 */
  border: 3px solid var(--secondary); /* ref_components card_badge.border#0@1440 */
  border-radius: 50px; /* card_badge.radius */
  background: var(--dark);
  color: var(--cream);
}

.card__badge svg {
  width: 100%;
  height: 100%;
  fill: currentColor; /* the badge's measured colour (card_badge color, cream), as every other base's icons; unset, an icon drew black (5.7) */
}

.card__title {
  font-size: 32px; /* col_heading.size */
  line-height: 44.8px; /* col_heading.lh */
  font-weight: 800; /* col_heading.weight */
  letter-spacing: 2%; /* col_heading.ls */
  text-transform: uppercase;
  color: var(--dark-soft);
}

.card__text {
  margin: 10px 0px 0px 0px; /* ref_components card_content.margin@1440 */
  padding: 0px 10px 0px 10px; /* ref_components card_content.pad@1440 */
}

.card__more {
  margin-top: 20px; /* @m(c:card_body.h@1440 - c:card_body.pad#0@1440 - c:card_body.pad#2@1440 - c:card_meta.h@1440 - c:card_title_box.h@1440 - c:card_content.margin#0@1440 - c:col_body.h@1440 - service_link.h@1440) */
}

/* the traced art's paints (refs/trace_art.py) */
.art-wedge {
  fill: var(--primary);
}

.art-ground {
  fill: var(--dark);
}

.art-surface {
  fill: var(--surface);
}

.art-arc {
  fill: var(--surface);
  stroke: var(--primary-dark);
}

.art-rule {
  fill: var(--primary-dark);
}

@media (max-width: 1199px) { /* card_body.padT @1199 */
  :root {
    --gap-m: -20px; /* ref_components why_grid.margin#3@1199 */
    --gap-l: -40px; /* ref_components foot_grid.margin#3@1199 */
  }
}

@media (max-width: 959px) { /* h2.size @959 */
  .grid > * {
    flex: none;
    width: 100%;
  }
  /* the card is full width here: the chevrons keep the services photo's width
     (--art-w, also on the resources cards) and the copy stays between them
     (card_text_between_chevrons) */
  .card {
    --art-w: 400px; /* card_img.w@959 */
  }
  .card__art {
    right: 0;
    left: 0;
    max-width: var(--art-w);
    margin: 0 auto;
  }
  .card__title,
  .card__text,
  .card__more {
    max-width: calc(min(100%, var(--art-w)) * 0.8); /* departure card_text_between_chevrons */
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- generated by rebuild/gen_css.py from edges.json: one block per edge, widest first ---- */
@media (max-width:1199px){ /* card_body.padT @1199 */
  :root{
    --card-pad: 20px; /* card_body.padT @1199 */
  }
}
@media (max-width:959px){ /* svc_container.padL @959 */
  :root{
    --gutter: 20px; /* svc_container.padL @959 */
    --band-pad: 40px; /* svc_band.padT @959 */
    --eyebrow-size: 26px; /* section_eyebrow.size @959 */
    --eyebrow-lh: 31.2px; /* section_eyebrow.lh @959 */
    --h2-size: 52px; /* h2.size @959 */
  }
}
@media (max-width:639px){ /* svc_container.padL @639 */
  :root{
    --gutter: 15px; /* svc_container.padL @639 */
  }
}

/* vendored from bases/thelen/system.css by tools/vendor_thelen.py: do not edit */
/* thelen - system.css. Generated by rebuild/gen_system.py from the base's own rendered
   page (fixtures/thelen-shape); never edit by hand. Loaded only on a page that uses
   composition: .r-<role> is a type role, --sys-* a shape the base draws, and
   .sys-cols the column mechanism, with the base's own gap. */

:root {
  --sys-gap: 20px;
  --sys-radius-1: 12px 12px 12px 12px;
  --sys-radius-2: 3px 3px 3px 3px;
  --sys-radius-3: 12px 12px 0px 0px;
  --sys-radius-4: 50px 50px 50px 50px;
  --sys-radius-5: 5px 5px 5px 5px;
  --sys-shadow-1: 0px 3px 0px 0px;
  --sys-shadow-2: 0px 6px 0px 0px;
  --sys-shadow-3: 0px 1px 4px 0px;
  --sys-shadow-4: 0px 8px 0px 0px;
  --sys-shadow-5: 0px 0px 0px 3px;
  --sys-border-1: 4px solid;
  --sys-border-2: 2px solid;
  --sys-border-3: 3px solid;
  --sys-border-4: 1px solid;
  --sys-border-5: 10px solid;
  --sys-border-6: 2px outset;
  --sys-border-7: 6px solid;
  --sys-border-8: 8px solid;
  --sys-space-1: 5px;
  --sys-space-2: 6px;
  --sys-space-3: 8px;
  --sys-space-4: 10px;
  --sys-space-5: 12px;
  --sys-space-6: 15px;
  --sys-space-7: 16px;
  --sys-space-8: 20px;
  --sys-space-9: 24px;
  --sys-space-10: 24.2031px;
  --sys-space-11: 28px;
  --sys-space-12: 30px;
  --sys-space-13: 31.2031px;
  --sys-space-14: 35px;
  --sys-space-15: 39px;
  --sys-space-16: 40px;
  --sys-space-17: 70px;
  --sys-space-18: 75px;
  --sys-space-19: 80px;
  --sys-space-20: 99.5px;
  --sys-space-21: 120px;
  --sys-space-22: 195.5px;
  --sys-space-23: 239.5px;
  --sys-space-24: 300px;
  --sys-c-1: oklch(0.7 0.133295 254.586);
  --sys-c-2: rgb(0, 0, 0);
  --sys-c-3: rgb(252, 231, 193);
  --sys-c-4: rgb(254, 230, 193);
  --sys-c-5: rgb(32, 76, 229);
  --sys-c-6: rgba(18, 25, 97, 0.08);
}

.r-a { font-family: var(--f-display); font-size: 18px; line-height: 22px; font-weight: 600; letter-spacing: 2%; text-transform: capitalize; font-style: normal; }
.r-area__link { font-family: var(--f-display); font-size: 18px; line-height: 22px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-btn { font-family: var(--f-display); font-size: 26px; line-height: 46px; font-weight: 800; letter-spacing: 8%; text-transform: uppercase; font-style: normal; }
.r-btn-2 { font-family: var(--f-display); font-size: 28px; line-height: 46px; font-weight: 800; letter-spacing: 8%; text-transform: uppercase; font-style: normal; }
.r-card__title { font-family: var(--f-display); font-size: 32px; line-height: 44.8px; font-weight: 800; letter-spacing: 2%; text-transform: uppercase; font-style: normal; }
.r-copy__text { font-family: var(--f-display); font-size: 18px; line-height: 22px; font-weight: 600; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-ftr__call { font-family: var(--f-display); font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: 2%; text-transform: uppercase; font-style: normal; }
.r-ftr__license { font-family: var(--f-display); font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-ftr__office { font-family: var(--f-display); font-size: 24px; line-height: 22px; font-weight: 600; letter-spacing: 1%; text-transform: capitalize; font-style: normal; }
.r-ftr__title { font-family: var(--f-script); font-size: 36px; line-height: 34px; font-weight: 600; letter-spacing: 2%; text-transform: capitalize; font-style: normal; }
.r-hdr__link { font-family: var(--f-display); font-size: 22px; line-height: 22px; font-weight: 800; letter-spacing: 10%; text-transform: uppercase; font-style: normal; }
.r-hdr__loc-link { font-family: var(--f-display); font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-hdr__phone-num { font-family: var(--f-display); font-size: 32px; line-height: 34px; font-weight: 700; letter-spacing: 2%; text-transform: uppercase; font-style: normal; }
.r-hero__h1 { font-family: var(--f-display); font-size: 117px; line-height: 105.3px; font-weight: 900; letter-spacing: 2%; text-transform: uppercase; font-style: normal; }
.r-sform__counter { font-family: var(--f-display); font-size: 13px; line-height: 18.59px; font-weight: 600; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-sform__label { font-family: var(--f-display); font-size: 16px; line-height: 22.88px; font-weight: 600; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-sform__submit { font-family: var(--f-display); font-size: 14px; line-height: 14px; font-weight: 500; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-sform__title { font-family: var(--f-script); font-size: 36px; line-height: 46.8px; font-weight: 800; letter-spacing: 2%; text-transform: capitalize; font-style: normal; }
.r-steps__body { font-family: var(--f-display); font-size: 18px; line-height: 22px; font-weight: 400; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-steps__digits { font-family: var(--f-display); font-size: 59.3333px; line-height: 59.3333px; font-weight: 900; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-steps__title { font-family: var(--f-display); font-size: 36px; line-height: 34px; font-weight: 700; letter-spacing: 2%; text-transform: uppercase; font-style: normal; }
.r-steps__word { font-family: var(--f-script); font-size: 22.25px; line-height: 22.25px; font-weight: 400; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-t-eyebrow { font-family: var(--f-script); font-size: 32px; line-height: 38.4px; font-weight: 600; letter-spacing: 2%; text-transform: capitalize; font-style: normal; }
.r-t-h2 { font-family: var(--f-display); font-size: 60px; line-height: 56px; font-weight: 800; letter-spacing: 2%; text-transform: uppercase; font-style: normal; }
.r-t-lead { font-family: var(--f-display); font-size: 20px; line-height: 30px; font-weight: 600; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-t-link { font-family: var(--f-script); font-size: 26px; line-height: 22px; font-weight: 600; letter-spacing: 8%; text-transform: capitalize; font-style: normal; }
.sys-cols { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sys-gap); margin: 0; padding: 0; list-style: none; }
.sys-cols--start { justify-content: flex-start; }
.sys-cols > * { flex: 0 0 calc((100% - (var(--sys-n) - 1) * var(--sys-gap)) / var(--sys-n)); min-width: 0; }
.sys-cols--feature > :first-child { flex-basis: 100%; }
.sys-cols-2 { --sys-n: 2; }
.sys-cols-3 { --sys-n: 3; }
.sys-cols-4 { --sys-n: 4; }
.sys-cols-6 { --sys-n: 6; }
.sys-n.sys-n { flex-wrap: wrap; justify-content: center; row-gap: var(--sys-gap); }
.sys-n.sys-n--start { justify-content: flex-start; }
.sys-n-2.sys-n-2 > * { flex: 0 0 calc(100% / 2); max-width: calc(100% / 2); }
.sys-n-3.sys-n-3 > * { flex: 0 0 calc(100% / 3); max-width: calc(100% / 3); }
.sys-n-4.sys-n-4 > * { flex: 0 0 calc(100% / 4); max-width: calc(100% / 4); }
.sys-n-6.sys-n-6 > * { flex: 0 0 calc(100% / 6); max-width: calc(100% / 6); }
.sys-n--feature.sys-n--feature > :first-child { flex-basis: 100%; max-width: 100%; }
@media (max-width: 1199px) {
  .r-hero__h1 { font-size: 72px; line-height: 64.8px; font-weight: 900; letter-spacing: 2%; text-transform: uppercase; font-style: normal; }
}
@media (max-width: 959px) {
  :root { --sys-gap: 0px; }
  .r-btn { font-size: 28px; line-height: 46px; font-weight: 800; letter-spacing: 8%; text-transform: uppercase; font-style: normal; }
  .r-btn-2 { font-size: 26px; line-height: 46px; font-weight: 800; letter-spacing: 8%; text-transform: uppercase; font-style: normal; }
  .r-hero__h1 { font-size: 61.2px; line-height: 55.08px; font-weight: 900; letter-spacing: 2%; text-transform: uppercase; font-style: normal; }
  .r-t-eyebrow { font-size: 26px; line-height: 31.2px; font-weight: 600; letter-spacing: 2%; text-transform: capitalize; font-style: normal; }
  .r-t-h2 { font-size: 52px; line-height: 56px; font-weight: 800; letter-spacing: 2%; text-transform: uppercase; font-style: normal; }
  .sys-cols-2, .sys-cols-3, .sys-cols-4, .sys-cols-6 { --sys-n: 1; }
  .sys-n-2.sys-n-2 > *, .sys-n-3.sys-n-3 > *, .sys-n-4.sys-n-4 > *, .sys-n-6.sys-n-6 > * { flex: 0 0 calc(100% / 1); max-width: calc(100% / 1); }
}
/* vendored from sections/thelen/header/section.css by tools/vendor_thelen.py: do not edit */
/* thelen.header - the navy utility strip, the white desktop bar and the phone bar.
   The strip scrolls away; the bar under it pins (the reference's uk-sticky). */
.hdr {
  position: sticky;
  top: calc(0px - 39px); /* util_bar.h@1440 */
  z-index: 50;
}

.hdr__util {
  background: var(--dark);
  padding-top: 8px; /* util_bar.padT@1440 */
  padding-bottom: 8px; /* util_bar.padB@1440 */
  color: var(--white);
  font-size: 16px; /* util_loc.size@1440 */
  line-height: 22px; /* util_loc.lh@1440 */
  font-weight: 700; /* util_loc.weight@1440 */
}

.hdr__util-in {
  display: flex;
  align-items: center;
  min-height: 23px; /* util_container.h@1440 */
}

.hdr__promo-text {
  color: var(--white);
}

.hdr__locs {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding: 0;
  list-style: none;
  column-gap: 20px; /* @m(c:util_right.x@1440 - c:util_loc_row.x@1440) */
}

.hdr__loc {
  display: flex;
  align-items: center;
  column-gap: 10px; /* @m(c:util_loc.x@1440 - c:util_icon.x@1440 - c:util_icon.w@1440) */
}

.hdr__pin {
  width: 18px; /* util_icon.w@1440 */
  height: 18px; /* util_icon.h@1440 */
  fill: var(--primary);
}

.hdr__loc-link {
  color: var(--white);
}

/* the desktop bar */
.hdr__bar {
  background: var(--white);
  padding-top: 5px; /* header.padT@1440 */
  padding-bottom: 5px; /* header.padB@1440 */
  border-bottom: 8px solid var(--primary); /* ref_components header.border#2@1440 */
}

.hdr__bar-in {
  display: flex;
  align-items: center;
  column-gap: 30px; /* ref_components header_right.gap#1@1440 */
  min-height: 92px; /* header_container.h@1440 */
}

.hdr__logo {
  flex: 0 1 250px; /* header_logo.w@1440 */
  min-width: 165px; /* header_logo.w@960 */
}

/* The logo box is the reference's (250 x 136); the client's logo is contained in
   it, so a squarer logo keeps the measured height instead of growing past the bar
   (logo_follows_client_aspect). */
.hdr__logo img {
  display: block;
  width: 100%;
  aspect-ratio: 1.8382; /* @m(header_logo.w@1440 / header_logo.h@1440) */
  object-fit: contain;
  object-position: left center;
  margin-bottom: -44px; /* ref_components header_logo.margin#2@1440 */
}

.hdr__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 1 auto;
  margin-left: auto;
  gap: 30px; /* ref_components header_right.gap#1@1440 */
}

.hdr__menu {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
  column-gap: 35px; /* ref_components nav.gap#1@1440 */
}

.hdr__link {
  display: flex;
  align-items: center;
  min-height: 80px; /* ref_components nav_link.minHeight@1440 */
  font-family: var(--f-display);
  font-size: 22px; /* nav_link.size@1440 */
  line-height: 22px; /* nav_link.lh@1440 */
  font-weight: 800; /* nav_link.weight@1440 */
  letter-spacing: 10%; /* nav_link.ls@1440 */
  text-transform: uppercase;
  color: var(--dark);
}

.hdr__phone {
  display: flex;
  align-items: center;
  column-gap: 10px; /* @m(c:header_phone.x@1440 - c:header_phone_icon.x@1440 - c:header_phone_icon.w@1440) */
  min-height: 80px; /* ref_components header_phone_widget.minHeight@1440 */
  color: var(--primary);
}

.hdr__phone-ico {
  display: block;
  width: 40px; /* header_phone_icon.w@1440 */
  height: 30px; /* header_phone_icon.h@1440 */
  padding-left: 10px; /* ref_components header_phone_icon.pad#3@1440 */
}

.hdr__phone-svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.hdr__phone-num {
  font-family: var(--f-display);
  font-size: 32px; /* header_phone.size@1440 */
  line-height: 34px; /* header_phone.lh@1440 */
  font-weight: 700; /* header_phone.weight@1440 */
  letter-spacing: 2%; /* header_phone.ls@1440 */
  text-transform: uppercase;
}

/* the phone bar */
.hdr__mbar {
  display: none;
  background: var(--white);
  padding-top: 5px; /* mheader.padT@390 */
  padding-bottom: 5px; /* mheader.padB@390 */
  border-bottom: 8px solid var(--primary); /* ref_components mheader.border#2@390 */
}

.hdr__mbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px; /* mheader_container.h@390 */
}

.hdr__mphone {
  display: flex;
  align-items: center;
  width: 38px; /* mheader_phone.w@390 */
  height: 24px; /* mheader_phone.h@390 */
  color: var(--primary);
}

.hdr__mphone .hdr__phone-svg {
  width: 100%;
  height: auto;
}

.hdr__mlogo {
  width: 160px; /* mheader_logo.w@390 */
}

.hdr__mlogo img {
  display: block;
  width: 100%;
  aspect-ratio: 1.8391; /* @m(mheader_logo.w@390 / mheader_logo.h@390) */
  object-fit: contain;
}

.hdr__toggle {
  width: 32px; /* mheader_toggle.w@390 */
  height: 32px; /* mheader_toggle.h@390 */
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  cursor: pointer;
}

.hdr__toggle svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}

.hdr__drawer {
  position: fixed;
  top: 98px; /* mheader.h@390 */
  left: 0;
  right: 0;
  max-height: calc(100% - 98px); /* mheader.h@390 */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border-bottom: 8px solid var(--primary); /* ref_components mheader.border#2@390 */
  padding-bottom: var(--gutter);
  text-align: center;
}

.hdr__drawer[hidden] {
  display: none;
}

.hdr__dmenu {
  padding: 0;
  list-style: none;
}

.hdr__dlink {
  display: block;
  font-family: var(--f-display);
  font-size: 22px; /* nav_link.size@1440 */
  line-height: 80px; /* ref_components nav_link.minHeight@1440 */
  font-weight: 800; /* nav_link.weight@1440 */
  letter-spacing: 10%; /* nav_link.ls@1440 */
  text-transform: uppercase;
  color: var(--dark);
}

@media (max-width: 959px) { /* h2.size @959 */
  .hdr {
    top: 0;
  }
  .hdr__util,
  .hdr__bar {
    display: none;
  }
  .hdr__mbar {
    display: block;
  }
}

/* vendored from sections/thelen/footer/section.css by tools/vendor_thelen.py: do not edit */
/* thelen.footer - navy ground with the reference's top-corner wedges (refs/trace_art.py). */
.ftr {
  color: var(--white);
}

.ftr__ground {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--dark);
}

.ftr__art {
  width: 100%;
  height: auto;
}

.ftr__in {
  position: relative;
}

.ftr__col {
  display: flex;
  flex-direction: column;
}

.ftr__card {
  flex: 1 1 auto;
  padding: 28px 28px 28px 28px; /* ref_components foot_card.pad@1440 */
  background: var(--surface);
  border: 4px solid var(--primary-dark); /* ref_components foot_card.border#0@1440 */
  border-radius: 12px; /* foot_card.radius */
  box-shadow: 0 8px 0 0 var(--soft); /* foot_card.shadow#2@1440 */
  color: var(--dark);
}

.ftr__title {
  font-family: var(--f-script);
  font-size: 36px; /* foot_card_title.size */
  line-height: 34px; /* foot_card_title.lh */
  font-weight: 600; /* foot_card_title.weight */
  font-synthesis: none;
  letter-spacing: 2%; /* foot_card_title.ls */
  text-transform: capitalize;
  color: var(--primary);
  margin: 0px 0px 20px 0px; /* ref_components foot_card_title.margin@1440 */
}

.ftr__rule {
  text-align: left;
}

.ftr__office {
  margin: 40px 0px 0px 0px; /* ref_components foot_office.margin@1440 */
  font-size: 24px; /* foot_office.size */
  line-height: 22px; /* foot_office.lh */
  font-weight: 600; /* foot_office.weight */
  letter-spacing: 1%; /* foot_office.ls */
  text-transform: capitalize;
  color: var(--primary);
}

/* Backup, off: params.backup_emergency */
.ftr__emergency {
  margin: 10px 0px 0px 0px; /* ref_components foot_emergency.margin@1440 */
  font-size: 22px; /* foot_emergency.size */
  line-height: 28px; /* foot_emergency.lh */
  font-weight: 600; /* foot_emergency.weight */
  letter-spacing: 1%; /* foot_emergency.ls */
  text-transform: capitalize;
  color: var(--primary-dark);
}

.ftr__addr {
  margin: 10px 0px 10px 0px; /* ref_components foot_address_panel.margin@1440 */
}

.ftr__address {
  font-size: 18px; /* foot_address.size */
  line-height: 22px; /* foot_address.lh */
  font-weight: 400; /* foot_address.weight */
}

.ftr__col--mid {
  text-align: center;
}

.ftr__logo {
  margin: 0px 0px 10px 0px; /* ref_components foot_logo_wrap.margin@1440 */
}

.ftr__logo img {
  width: 100%;
  max-width: 500px; /* foot_logo.w@959 */
  aspect-ratio: 1.8349; /* @m(foot_logo.w@1440 / foot_logo.h@1440) */
  object-fit: contain;
}

/* the number never breaks inside itself; "Call Today:" wraps above it instead */
.ftr__call a {
  white-space: nowrap;
}

.ftr__call {
  margin: 0px 0px 20px 0px; /* ref_components foot_call.margin@1440 */
  font-size: 40px; /* foot_call.size */
  line-height: 44px; /* foot_call.lh */
  font-weight: 800; /* foot_call.weight */
  letter-spacing: 2%; /* foot_call.ls */
  text-transform: uppercase;
  color: var(--cream);
}

/* Backup, off: params.backup_social (a neutral share glyph, no brand marks) */
.ftr__social {
  display: flex;
  justify-content: center;
  column-gap: calc(0px - var(--gap-s));
  margin: 0 0 calc(0px - var(--gap-s));
  padding: 0;
  list-style: none;
}

.ftr__soc {
  display: block;
  width: 36px; /* foot_social.w */
  height: 36px; /* foot_social.h */
  border-radius: 500px; /* foot_social.radius */
  background: var(--secondary);
  color: var(--dark);
}

.ftr__soc svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.ftr__license {
  font-size: 16px; /* foot_license.size */
  line-height: 24px; /* foot_license.lh */
  font-weight: 600; /* foot_license.weight */
}

.ftr__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px; /* @m(footer_link.top@1440 - foot_license.top@1440 - foot_license.h@1440) */
  padding: 0;
  list-style: none;
}

.ftr__links li + li {
  padding-left: 10px; /* @m(c:foot_links_item.pad#3@1440 / 2) */
}

.ftr__links li + li::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 18px; /* ref_components foot_links_item.before.h@1440 */
  margin-right: 10px; /* @m(c:foot_links_item.pad#3@1440 / 2) */
  border-left: 1px solid; /* ref_components hero_btn.border#2@1440 */
}

.ftr__links a {
  font-size: 18px; /* footer_link.size */
  line-height: 22px; /* footer_link.lh */
  font-weight: 600; /* footer_link.weight */
  letter-spacing: 2%; /* footer_link.ls */
  text-transform: capitalize;
  color: var(--cream);
}

.ftr__btn {
  display: block;
  width: 100%;
  padding: 0px 20px 0px 20px; /* ref_components foot_btn.pad@1440 */
  font-size: 28px; /* foot_btn.size */
}

.ftr__card--links {
  text-align: center;
}

.ftr__btns {
  margin-top: 20px; /* @m(foot_btn.top@1440 - foot_btn_primary.top@1440 - foot_btn_primary.h@1440) */
}

.ftr__btns > li {
  flex: none;
  width: 100%;
}

.ftr__btns > li + li {
  margin-top: 20px; /* @m(foot_btn.top@1440 - foot_btn_primary.top@1440 - foot_btn_primary.h@1440) */
}

@media (max-width: 959px) { /* h2.size @959 */
  .ftr__col--left,
  .ftr__col--right {
    order: 1;
    margin-top: 40px; /* ref_components foot_col_left.margin#0@959 */
  }
}

/* vendored from sections/thelen/copyright/section.css by tools/vendor_thelen.py: do not edit */
/* thelen.copyright - the orange strip. */
.copy {
  padding-top: 20px; /* copy_band.padT@1440 */
  padding-bottom: 20px; /* copy_band.padB@1440 */
  background: var(--primary);
  text-align: center;
}

.copy__text {
  font-size: 18px; /* copyright.size */
  line-height: 22px; /* copyright.lh */
  font-weight: 600; /* copyright.weight */
  color: var(--white);
}
/* vendored from sections/thelen/hero/section.css by tools/vendor_thelen.py: do not edit */
/* thelen.hero - the client's photo under the reference's art: navy scrim,
   two stripes and the cream cut (refs/trace_art.py, expected_diffs art_is_inline_svg). */
/* type that steps at 1199 and 959 */
:root {
  --hero-eyebrow-size: 32px; /* hero_eyebrow.size */
  --hero-eyebrow-lh: 38.4px; /* hero_eyebrow.lh */
  --hero-h1-size: 117px; /* hero_h1.size */
  --hero-h1-lh: 105.3px; /* hero_h1.lh */
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 85vh; /* departure hero_min_height_85vh */
  padding-top: 70px; /* hero_band.padT */
  padding-bottom: 0px; /* hero_band.padB@1440 */
  text-align: center;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* The navy tint covers the band; the art keeps the band's minimum height at the
   bottom, so the stripes and the cream cut never grow with the copy, and the
   spacer after the copy is the cut's height (hero_cut_reserve). */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--dark);
  opacity: 0.78; /* departure hero_scrim */
}

.hero__art {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85vh; /* departure hero_min_height_85vh */
}

.hero::after {
  content: "";
  display: block;
  height: max(10.25vw, 19.32vh); /* departure hero_cut_reserve */
}

.hero__stripe1 {
  fill: var(--primary);
}

.hero__stripe2 {
  fill: var(--soft);
}

.hero__cut {
  fill: var(--surface);
}

.hero__in {
  position: relative;
}

.hero__eyebrow {
  font-family: var(--f-script);
  font-size: var(--hero-eyebrow-size);
  line-height: var(--hero-eyebrow-lh);
  font-weight: 600; /* hero_eyebrow.weight */
  font-synthesis: none;
  letter-spacing: 2%; /* hero_eyebrow.ls */
  text-transform: capitalize;
  color: var(--primary);
  margin: 40px 0px 10px 0px; /* ref_components hero_eyebrow.margin@1440 */
}

.hero__h1 {
  font-size: var(--hero-h1-size);
  line-height: var(--hero-h1-lh);
  font-weight: 900; /* hero_h1.weight */
  letter-spacing: 2%; /* hero_h1.ls */
  text-transform: uppercase;
  color: var(--cream);
  margin: 0px 0px 20px 0px; /* ref_components hero_h1.margin@1440 */
  overflow: clip;
}

.hero__lead {
  max-width: 750px; /* hero_body.w@1440 */
  margin: 0 auto;
}

.hero__body {
  font-size: 20px; /* hero_body.size */
  line-height: 30px; /* hero_body.lh */
  font-weight: 600; /* hero_body.weight */
  color: var(--white);
}

.hero__cta {
  margin-top: 20px; /* @m(hero_btn.top@1440 - hero_body.top@1440 - hero_body.h@1440) */
  align-items: center;
}

.hero__cta-l {
  text-align: right;
}

.hero__cta-r {
  text-align: left;
}

.hero__phone {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: rgb(254, 230, 193); /* hero_phone.color */
  font-size: 36px; /* hero_phone.size */
  line-height: 34px; /* hero_phone.lh */
  font-weight: 700; /* hero_phone.weight */
  letter-spacing: 2%; /* hero_phone.ls */
  text-transform: uppercase;
}

.hero__phone-ico {
  width: 32px; /* hero_phone_icon.w */
  height: 32px; /* hero_phone_icon.h */
  fill: var(--primary);
}

@supports (color: oklch(from red l c h)) {
  .hero__eyebrow {
    color: oklch(from var(--primary) max(l, 0.7) c h); /* departure hero_eyebrow_lifted */
  }
}

@media (max-width: 959px) { /* h2.size @959 */
  .hero__photo {
    object-position: 50% 50%;
  }
  .hero__cta-l,
  .hero__cta-r {
    text-align: center;
  }
  .hero__cta-r {
    margin-top: 20px; /* ref_components hero_cta_right.margin#0@959 */
  }
}

/* ---- generated by rebuild/gen_css.py from edges.json: one block per edge, widest first ---- */
@media (max-width:1199px){ /* hero_h1.size @1199 */
  :root{
    --hero-h1-size: 72px; /* hero_h1.size @1199 */
    --hero-h1-lh: 64.8px; /* hero_h1.lh @1199 */
  }
}
@media (max-width:959px){ /* hero_eyebrow.size @959 */
  :root{
    --hero-eyebrow-size: 26px; /* hero_eyebrow.size @959 */
    --hero-eyebrow-lh: 31.2px; /* hero_eyebrow.lh @959 */
    --hero-h1-size: 61.2px; /* hero_h1.size @959 */
    --hero-h1-lh: 55.08px; /* hero_h1.lh @959 */
  }
  .hero{
    padding-top: 40px; /* hero_band.padT @959 */
  }
}

/* vendored from sections/thelen/why/section.css by tools/vendor_thelen.py: do not edit */
/* thelen.why - navy band; the photo window, arc and rules are the reference's
   art (refs/trace_art.py) at 960 and up, a rounded picture below. */
.why {
  display: flex;
  align-items: center;
  min-height: 810px; /* ref_components why_band.minHeight@1440 */
  color: var(--white);
}

.why__ground {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--dark);
}

.why__art {
  position: absolute;
  top: 0;
  width: 50%; /* @m(why_grid.child_w@1440 / why_grid.w@1440 * 100)% */
  height: 100%;
}

.why__art--photo {
  left: 0;
}

.why__art--rest {
  right: 0;
}

.why__win {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why__in {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.why__img {
  display: none;
  width: 100%;
  max-width: 600px; /* why_img.w@959 */
  aspect-ratio: 1.5; /* ref_components why_img.ratio@959 */
  object-fit: cover;
  border-radius: 5px; /* why_img.radius@959 */
  box-shadow: 0 6px 0 0 var(--soft); /* why_img.shadow#2@959 */
}

.why__eyebrow {
  margin: 40px 0px 20px 0px; /* ref_components why_eyebrow.margin@1440 */
  color: var(--secondary);
}

.why__h2 {
  color: var(--cream);
}

.why__rule {
  text-align: left;
}

.why__body {
  margin: 20px 0px 20px 0px; /* ref_components why_text_panel.margin@1440 */
  font-size: 20px; /* why_body.size */
  line-height: 30px; /* why_body.lh */
  font-weight: 600; /* why_body.weight */
}

.why__body p {
  margin: 0px 0px 20px 0px; /* ref_components why_body.margin@1440 */
}

.why__body p:last-child {
  margin-bottom: 0;
}

.why__cta {
  align-items: center;
}

.why__cta > * {
  flex: none;
}

/* Backup, off: params.backup_badge */
.why__badge {
  display: block;
  width: 80px; /* why_badge.w@1440 */
  height: 80px; /* why_badge.h@1440 */
  object-fit: contain;
}

@media (max-width: 959px) { /* h2.size @959 */
  .why {
    display: block;
  }
  .why__art {
    display: none;
  }
  .why__img {
    display: block;
  }
}

/* vendored from sections/thelen/services/section.css by tools/vendor_thelen.py: do not edit */
/* thelen.services - cream band, three photo cards (no skyline: no_dotted_skylines). */
.svc {
  overflow: hidden;
  text-align: center;
}

.svc__in {
  position: relative;
}

.svc__intro {
  margin: 20px 0px 20px 0px; /* ref_components svc_intro.margin@1440 */
}

.svc__cell {
  display: flex;
}

.svc__card .card__img {
  max-width: 400px; /* card_img.w@959 */
  aspect-ratio: 2.0053; /* @m(card_img.w@1440 / (card_img.h@1440 - c:card_img.border#2@1440)) */
}

.svc__cta {
  padding-top: 39px; /* @m(svc_btn.top@1440 - card.top@1440 - card.h@1440) */
}

/* vendored from sections/thelen/steps/section.css by tools/vendor_thelen.py: do not edit */
/* thelen.steps - four step cards and two buttons; the review block is Backup (off). */
.steps {
  text-align: center;
}

.steps__eyebrow {
  margin: 40px 0px 20px 0px; /* ref_components steps_eyebrow.margin@1440 */
}

.steps__grid {
  margin-top: 20px; /* @m(step_card.top@1440 - steps_h2.top@1440 - steps_h2.h@1440 - c:svc_divider.margin#0@1440 - svc_divider.h@1440 - c:svc_divider.margin#2@1440) */
}

.steps__cell {
  display: flex;
}

.steps__card {
  width: 100%;
  padding: 20px 20px 20px 20px; /* ref_components step_card.pad@1440 */
  background: var(--white);
  border: 4px solid var(--primary-dark); /* ref_components step_card.border#0@1440 */
  border-radius: 12px; /* step_card.radius */
  box-shadow: 0 6px 0 0 var(--soft); /* step_card.shadow#2@1440 */
  text-align: left;
}

.steps__row {
  display: flex;
  margin-left: -10px; /* ref_components step_grid_inner.margin#3@1440 */
}

.steps__row > * {
  padding-left: 10px; /* ref_components step_num_col.pad#3@1440 */
}

.steps__copy {
  flex: 1 1 0;
  min-width: 0;
}

.steps__num {
  display: flex;
  flex-direction: column;
  width: 57px; /* step_num.w@1440 */
  height: 89px; /* step_num.h@1440 */
  color: var(--primary);
}

.steps__word {
  font-family: var(--f-script);
  font-size: 22.25px; /* @m(step_num.h@1440 / 4) */
  line-height: 1;
}

.steps__digits {
  font-size: 59.3333px; /* @m(step_num.h@1440 * 2 / 3) */
  line-height: 1;
  font-weight: 900; /* hero_h1.weight */
}

.steps__title {
  font-size: 36px; /* step_heading.size */
  line-height: 34px; /* step_heading.lh */
  font-weight: 700; /* step_heading.weight */
  letter-spacing: 2%; /* step_heading.ls */
  text-transform: uppercase;
  color: var(--dark-soft);
  overflow-wrap: break-word;
}

.steps__content {
  margin: 10px 0px 0px 0px; /* ref_components step_content.margin@1440 */
}

.steps__cta {
  margin-top: 40px; /* @m(steps_btn.top@1440 - step_card.top@1440 - step_card.h@1440) */
}

.steps__cta-l {
  text-align: right;
}

.steps__cta-r {
  text-align: left;
}

.steps__rev {
  margin-top: 140px; /* ref_components steps_top_grid.margin#2@1440 */
}

.steps__rev-body {
  max-width: 750px; /* review_body.w@1440 */
  margin: 0 auto;
}

@media (max-width: 959px) { /* h2.size @959 */
  .steps__cta-l,
  .steps__cta-r {
    text-align: center;
  }
  .steps__cta-r {
    margin-top: 20px; /* ref_components steps_cta_right.margin#0@959 */
  }
  .steps__rev {
    margin-top: 70px; /* ref_components steps_top_grid.margin#2@959 */
  }
}

/* vendored from sections/thelen/area/section.css by tools/vendor_thelen.py: do not edit */
/* thelen.area - corner wedges (refs/trace_art.py; no skyline: no_dotted_skylines), the
   map column (Backup: params.backup_map, off) and the city card. */
/* the card padding steps with the gutter */
:root {
  --area-pad-x: 40px; /* area_text.padL */
  --city-gap: 40px; /* city_grid.gap */
  --city-cols: 3; /* city_grid.columns */
}

.area {
  overflow: hidden;
}

.area__art {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

.area__in {
  position: relative;
}

.area__mapcol {
  flex: none;
  width: 40%; /* @m(area_grid.child_w@1440 / area_grid.w@1440 * 100)% */
}

.area__map {
  height: 100%;
  background: var(--surface);
  border-radius: 12px; /* area_map.radius */
}

.area__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px; /* area_map.radius */
}

.area__text {
  height: 100%;
  padding-top: 20px; /* area_text.padT@1440 */
  padding-bottom: 20px; /* area_text.padB@1440 */
  padding-left: var(--area-pad-x);
  padding-right: var(--area-pad-x);
  background: var(--surface);
  border-radius: 12px; /* area_text.radius */
}

.area__eyebrow {
  margin: 0px 0px 20px 0px; /* ref_components area_eyebrow.margin@1440 */
}

.area__body {
  font-size: 18px; /* area_body.size */
  line-height: 22px; /* area_body.lh */
}

.area__list {
  margin: 20px 0px 20px 0px; /* ref_components area_list.margin@1440 */
  padding: 0;
  list-style: none;
  column-count: var(--city-cols);
  column-gap: var(--city-gap);
}

.area__city {
  display: flex;
  align-items: flex-start;
  column-gap: 10px; /* @m(c:city_link.x@1440 - c:city_dot.x@1440 - c:city_dot.w@1440) */
  break-inside: avoid;
}

.area__city + .area__city {
  margin-top: 10px; /* @m(city_plain.top@1440 - city_link.top@1440 - city_link.h@1440) */
}

.area__dot {
  flex: none;
  width: 10px; /* city_dot.w@1440 */
  height: 10px; /* city_dot.h@1440 */
  position: relative;
  top: 8px; /* @m(city_dot.top@1440 - city_link.top@1440) */
  fill: var(--primary);
}

.area__link {
  flex: 1 1 0;
  min-width: 0;
  font-size: 18px; /* city_link.size */
  line-height: 22px; /* city_link.lh */
  font-weight: 700; /* city_link.weight */
  color: var(--dark-soft);
}

.area__btnwrap {
  margin: 40px 0px 0px 0px; /* ref_components area_btn_wrap.margin@1440 */
}

@media (max-width: 959px) { /* h2.size @959 */
  .area__mapcol {
    width: 100%;
  }
  .area__map {
    height: 408px; /* area_map.h@959 */
  }
  .area__mapcol--off .area__map {
    height: 0;
  }
}

/* ---- generated by rebuild/gen_css.py from edges.json: one block per edge, widest first ---- */
@media (max-width:1199px){ /* city_grid.gap @1199 */
  :root{
    --city-gap: 20px; /* city_grid.gap @1199 */
  }
}
@media (max-width:959px){ /* area_text.padL @959 */
  :root{
    --area-pad-x: 20px; /* area_text.padL @959 */
    --city-cols: 1; /* city_grid.columns @959 */
  }
}
@media (max-width:639px){ /* area_text.padL @639 */
  :root{
    --area-pad-x: 15px; /* area_text.padL @639 */
  }
}

/* vendored from sections/thelen/form/section.css by tools/vendor_thelen.py: do not edit */
/* thelen.form - the schedule dialog as a static band (expected_diffs contact_form_band). */
.sform__in {
  padding-left: 0;
  padding-right: 0;
}

/* params.ground_dark: the homepage band sits on the navy ground, so the cream
   dialog stands out between the cream resources and area bands
   (contact_form_band). contact.html keeps the cream field. */
.sform--dark {
  background: var(--dark);
}

.sform__dialog {
  max-width: 600px; /* form_dialog.w@1440 */
  margin: 0 auto;
  padding: 28px 28px 28px 28px; /* ref_components form_dialog.pad@1440 */
  background: rgb(252, 231, 193); /* form_dialog.bg */
  border: 10px solid var(--dark); /* ref_components form_dialog.border#0@1440 */
  border-radius: 12px; /* form_dialog.radius */
  box-shadow: 0 0 0 3px var(--primary); /* form_dialog.shadow#4@1440 */
}

.sform__title {
  font-family: var(--f-script);
  font-size: 36px; /* form_title.size */
  line-height: 46.8px; /* form_title.lh */
  font-weight: 800; /* form_title.weight */
  font-synthesis: none;
  letter-spacing: 2%; /* form_title.ls */
  text-transform: capitalize;
  text-align: center;
  color: var(--primary);
  margin: 0px 0px 20px 0px; /* ref_components form_title.margin@1440 */
}

.sform__fields {
  display: flex;
  flex-direction: column;
  row-gap: 20px; /* ref_components form_fields.gap#0@1440 */
}

.sform__label-box {
  display: block;
  margin: 0px 0px 8px 0px; /* ref_components form_label_box.margin@1440 */
}

.sform__label {
  padding-right: 6px; /* form_label.padR@1440 */
  font-size: 16px; /* form_label.size */
  line-height: 22.88px; /* form_label.lh */
  font-weight: 600; /* form_label.weight */
  color: var(--dark);
}

/* form_required_mark_primary: the measured red fails contrast on cream */
.sform__req {
  color: var(--primary);
}

.sform__input,
.sform__textarea {
  display: block;
  width: 100%;
  margin: 0;
  font-family: var(--f-display);
  font-size: 14px; /* form_input.size */
  font-weight: 400; /* form_input.weight */
  color: rgb(51, 51, 51); /* form_input.color */
  background: var(--white);
  border: 2px solid var(--dark); /* ref_components form_input.border#0@1440 */
  border-radius: 3px; /* form_input.radius */
  box-shadow: rgba(18, 25, 97, 0.08) 0px 1px 4px 0px; /* form_input.shadow@1440 */
}

.sform__input {
  height: 38px; /* form_input.h@1440 */
  line-height: 38px; /* form_input.lh */
  padding: 0px 12px 0px 12px; /* ref_components form_input.pad@1440 */
}

.sform__textarea {
  height: 216px; /* form_textarea.h@1440 */
  line-height: 21px; /* form_textarea.lh */
  padding: 12px 12px 12px 12px; /* ref_components form_textarea.pad@1440 */
  resize: vertical;
}

.sform__counter {
  margin: 8px 0px 0px 0px; /* ref_components form_counter.margin@1440 */
  font-size: 13px; /* form_counter.size */
  line-height: 18.59px; /* form_counter.lh */
  font-weight: 600; /* form_counter.weight */
}

.sform__footer {
  margin: 24px 0px 0px 0px; /* ref_components form_footer.margin@1440 */
}

.sform__submit {
  min-width: 120px; /* form_submit.w@1440 */
  height: 38px; /* form_submit.h@1440 */
  padding: 0px 16px 0px 16px; /* ref_components form_submit.pad@1440 */
  font-family: var(--f-display);
  font-size: 14px; /* form_submit.size */
  line-height: 14px; /* form_submit.lh */
  font-weight: 500; /* form_submit.weight */
  color: var(--white);
  background: rgb(32, 76, 229); /* form_submit.bg */
  border: 1px 1px 1px 1px solid rgba(0,0,0,0); /* ref_components form_submit.border@1440 */
  border-radius: 3px; /* form_submit.radius */
  box-shadow: rgba(18, 25, 97, 0.08) 0px 1px 4px 0px; /* form_submit.shadow@1440 */
  cursor: pointer;
}

.sform__note {
  margin-top: 24px; /* ref_components form_footer.margin#0@1440 */
  font-size: 16px; /* form_label.size */
  line-height: 22.88px; /* form_label.lh */
  font-weight: 600; /* form_label.weight */
}

.sform__note[hidden] {
  display: none;
}
/* JTC Plumbing - the site's own composition, inside thelen's system.
   Every colour, face, radius, border and shadow here is one of thelen's (theme.css, system.css);
   what is new is the arrangement: the stage window, the through-his-eyes band, the service board, the
   water dials, the local file, the guide layout. Motion stops under reduced motion. */

:root {
  /* thelen's why-band photo window (art/why.html clip "win"), mirrored so its curve faces the
     copy, as percentages of its own box so it holds at any size */
  --stage-shape: polygon(0% 0%, 100% 0%, 100% 100%, 52.15% 100%, 34.95% 86.84%, 19.89% 69.14%,
    7.26% 45.22%, 1.61% 24.16%, 0% 2.39%);
  --rim: 16px;            /* art/why.html arc stroke width, rounded */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* thelen's blue lifted toward white: script and small accents on navy, which the plain blue
     carries at only 3:1 */
  --on-navy: color-mix(in srgb, var(--secondary) 45%, var(--white));
}

/* ---------- utilities ---------- */
.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 0 var(--sys-space-7);
}
.skip:focus { top: var(--sys-space-4); background: var(--white); color: var(--dark); }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
}

.src {
  margin-top: var(--sys-space-6);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  opacity: 0.85;
}
.src a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- header additions: the services drop, the current page, the phone menu ---------- */
.hdr__item--drop { position: relative; display: flex; align-items: center; }
.hdr__caret {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dark);
  cursor: pointer;
}
.hdr__caret svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.5; }
.drop {
  position: absolute;
  top: 100%;
  left: -40px;
  display: none;
  grid-template-columns: repeat(3, 230px);
  gap: var(--sys-space-16);
  padding: var(--sys-space-12) var(--sys-space-16);
  background: var(--white);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: 0 6px 0 0 var(--soft);
}
.hdr__item--drop:hover .drop,
.hdr__item--drop:focus-within .drop,
.drop.is-open { display: grid; }
.drop__head {
  font-family: var(--f-script);
  font-size: 26px;
  line-height: 30px;
  font-weight: 600;
  font-synthesis: none;
  color: var(--primary);
  margin-bottom: var(--sys-space-4);
}
.drop ul { padding: 0; list-style: none; }
.drop a {
  display: block;
  padding: var(--sys-space-2) 0;
  font-weight: 700;
  color: var(--dark);
}
.drop a:hover, .drop a:focus-visible { color: var(--primary); }
.hdr__link.is-current { color: var(--primary); }
.hdr__link:hover, .hdr__link:focus-visible { color: var(--primary); }
.hdr__dmeta { margin: var(--sys-space-4) 0 var(--sys-space-8); font-weight: 700; color: var(--dark-soft); }

/* ---------- the stage: footage in thelen's arc window ---------- */
.stage {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.stage__rim,
.stage__win {
  clip-path: var(--stage-shape);
  aspect-ratio: 3 / 4;
}
.stage__rim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--primary);
  translate: calc(0px - var(--rim)) var(--rim);
}
.stage__rim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--soft);
  clip-path: var(--stage-shape);
  translate: calc(0px - var(--rim)) var(--rim);
}
.stage__win {
  position: relative;
  overflow: hidden;
  background: var(--dark-soft);
}
.stage__video,
.stage__poster,
.stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stage__video { z-index: 1; opacity: 0; transition: opacity 600ms var(--ease); }
.stage__video.is-playing { opacity: 1; }
.stage__cap {
  margin-top: calc(var(--rim) * 2 + var(--sys-space-4));
  font-family: var(--f-script);
  font-size: 22px;
  line-height: 26px;
  font-synthesis: none;
  color: var(--cream);
  text-align: right;
}

/* ---------- heroes: home and inner pages ---------- */
.hero--home .hero__scrim,
.hero--page .hero__scrim { opacity: 1; }

.hero--home,
.hero--staged { text-align: left; }
.hero--home .hero__in,
.hero--staged .hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  align-items: center;
  column-gap: var(--sys-space-19);
}
.hero--home .hero__lead,
.hero--staged .hero__lead { margin: 0; }
.hero--home .hero__cta,
.hero--page .hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sys-space-8) var(--sys-space-12);
  margin-top: var(--sys-space-12);
}
.hero--page:not(.hero--staged) .hero__cta { justify-content: center; }
.hero .hours { color: var(--cream); }
.hero--page:not(.hero--staged) .hours { text-align: center; }
.hero__title { margin: 0; }
.hero__title .hero__eyebrow { display: block; }
.hero__title .hero__h1 { display: block; }
.hero--home .hero__h1 { font-size: clamp(64px, 6.6vw, 104px); line-height: 0.9; }
.hero--page .hero__h1 { font-size: clamp(52px, 5.2vw, 84px); line-height: 0.92; }
.hero__stage { width: 100%; max-width: 470px; justify-self: end; }
.hero--home .hero__stage { max-width: 420px; }
.hero--home .hero__stage { margin-bottom: var(--sys-space-16); }
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sys-space-4) var(--sys-space-12);
  margin-top: var(--sys-space-12);
  padding: 0;
  list-style: none;
  color: var(--cream);
  font-weight: 700;
}
.hero__proof li { display: flex; align-items: center; gap: var(--sys-space-3); }
.hero__proof li::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 0 3px var(--dark), 0 0 0 5px var(--secondary);
}
.hero__proof a { text-decoration: underline; text-underline-offset: 3px; }

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sys-space-2);
  margin: 0 0 var(--sys-space-8);
  padding: 0;
  list-style: none;
  font-weight: 700;
  color: var(--cream);
}
.crumbs li + li::before { content: "/"; margin-right: var(--sys-space-2); color: var(--secondary); }
.crumbs a, .crumbs span { display: inline-block; padding: var(--sys-space-3) 0; }
.crumbs a { color: var(--white); }
.crumbs a:hover, .crumbs a:focus-visible { text-decoration: underline; }
.hero--page:not(.hero--staged) .crumbs ol { justify-content: center; }

/* ---------- bands: the rhythm of cream, navy and white ---------- */
.band--white { background: var(--white); }
.band--navy { background: var(--dark); color: var(--white); }
.band--navy .t-h2 { color: var(--cream); }
.band--navy .t-eyebrow { color: var(--on-navy); }
.center { text-align: center; }
.lead-max { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- the service board ---------- */
.board__feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sys-space-16);
  align-items: center;
  margin-top: var(--sys-space-16);
  padding: var(--sys-space-16);
  background: var(--white);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: 0 6px 0 0 var(--soft);
}
.board__feature-media { position: relative; }
.board__feature-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 5px;
  border-bottom: var(--sys-border-7) var(--secondary);
}
.board__tag {
  position: absolute;
  top: var(--sys-space-8);
  left: calc(0px - var(--sys-space-8));
  padding: 0 var(--sys-space-7);
  background: var(--dark);
  color: var(--cream);
  font-family: var(--f-script);
  font-size: 24px;
  line-height: 44px;
  font-synthesis: none;
  border-radius: 5px;
  box-shadow: 0 3px 0 0 var(--secondary);
}
.board__feature h3 {
  font-size: 48px;
  line-height: 46px;
  font-weight: 800;
  letter-spacing: 2%;
  text-transform: uppercase;
  color: var(--dark);
}
.board__feature p { margin-top: var(--sys-space-8); font-size: 20px; line-height: 30px; font-weight: 600; }
.board__feature .btn { margin-top: var(--sys-space-12); }
.board__checks { margin-top: var(--sys-space-8); padding: 0; list-style: none; }
.board__checks li {
  position: relative;
  padding-left: var(--sys-space-14);
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
}
.board__checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 18px;
  height: 10px;
  border-left: 4px solid var(--secondary);
  border-bottom: 4px solid var(--secondary);
  rotate: -45deg;
}

.board__groups {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sys-space-8);
  margin-top: var(--sys-space-17);
  padding: 0;
  list-style: none;
  text-align: left;
}
.board__group {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: 0 6px 0 0 var(--soft);
  overflow: hidden;
}
.board__group:nth-child(2) { translate: 0 var(--sys-space-16); }
.board__ghead {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sys-space-6);
  padding: var(--sys-space-8) var(--sys-space-8) var(--sys-space-8) var(--sys-space-8);
  background: var(--dark);
  color: var(--cream);
  border-bottom: var(--sys-border-7) var(--secondary);
}
.board__ghead .card__badge {
  top: 0;
  margin: 0;
  width: 64px;
  height: 64px;
  flex: none;
}
.board__ghead .card__badge svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.board__gtitle {
  font-size: 32px;
  line-height: 32px;
  font-weight: 800;
  letter-spacing: 2%;
  text-transform: uppercase;
}
.board__gnote { display: block; font-family: var(--f-script); font-size: 20px; line-height: 24px; color: var(--on-navy); font-synthesis: none; text-transform: none; letter-spacing: 0; font-weight: 400; }
.board__rows { padding: var(--sys-space-4) 0; list-style: none; flex: 1 1 auto; }
.board__link {
  position: relative;
  display: block;
  padding: var(--sys-space-6) calc(var(--sys-space-8) + 28px) var(--sys-space-6) var(--sys-space-8);
  border-bottom: 2px solid color-mix(in srgb, var(--soft) 35%, transparent);
  transition: background-color 200ms var(--ease);
}
.board__row:last-child .board__link { border-bottom: 0; }
.board__link::after {
  content: "";
  position: absolute;
  right: var(--sys-space-8);
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 4px solid var(--secondary);
  border-right: 4px solid var(--secondary);
  rotate: 45deg;
  translate: 0 -50%;
  transition: translate 200ms var(--ease);
}
.board__link:hover, .board__link:focus-visible { background: var(--surface); }
.board__link:hover::after, .board__link:focus-visible::after { translate: 6px -50%; }
.board__name {
  display: block;
  font-size: 24px;
  line-height: 26px;
  font-weight: 800;
  letter-spacing: 2%;
  text-transform: uppercase;
  color: var(--dark-soft);
}
.board__short { display: block; margin-top: var(--sys-space-1); font-size: 18px; line-height: 22px; font-weight: 600; }
.board__foot { margin-top: calc(var(--sys-space-17) + var(--sys-space-16)); }

/* ---------- the through-his-eyes band ---------- */
.cam { overflow: hidden; }
.cam__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sys-space-16); align-items: end; }
.cam__head .t-lead { color: var(--white); }
.cam__reel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sys-space-16);
  margin-top: var(--sys-space-17);
  padding: 0;
  list-style: none;
}
.cam__reel { padding-bottom: var(--sys-space-19); }   /* room for the staggered items, which translate without taking space */
.cam__item:nth-child(2) { translate: 0 var(--sys-space-19); }
.cam__item:nth-child(3) { translate: 0 var(--sys-space-16); }
.cam__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: var(--sys-border-1) var(--secondary);
  border-radius: 12px;
  box-shadow: 0 8px 0 0 var(--primary);
  background: var(--dark-soft);
}
.cam__frame video,
.cam__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cam__frame video { z-index: 1; opacity: 0; transition: opacity 600ms var(--ease); }
.cam__frame video.is-playing { opacity: 1; }
.cam__tag {
  position: absolute;
  z-index: 2;
  top: var(--sys-space-6);
  left: var(--sys-space-6);
  display: flex;
  align-items: center;
  gap: var(--sys-space-3);
  padding: 0 var(--sys-space-5);
  border-radius: 50px;
  background: color-mix(in srgb, var(--dark) 82%, transparent);
  font-size: 16px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 8%;
  text-transform: uppercase;
}
.cam__cap { margin-top: var(--sys-space-12); }
.cam__title {
  font-size: 28px;
  line-height: 30px;
  font-weight: 800;
  letter-spacing: 2%;
  text-transform: uppercase;
  color: var(--cream);
}
.cam__text { margin-top: var(--sys-space-3); font-size: 18px; line-height: 24px; font-weight: 600; }
.cam__text a { text-decoration: underline; text-underline-offset: 3px; }
.cam__foot { margin-top: calc(var(--sys-space-19) + var(--sys-space-16)); }

/* ---------- water: the dials ---------- */
.water__note { margin-top: var(--sys-space-6); font-size: 18px; line-height: 24px; font-weight: 600; text-align: left; }
.dial { margin: 0; }
.dial__svg { width: 100%; max-width: 260px; margin: 0 auto; overflow: visible; }
.dial__track, .dial__soft, .dial__mod, .dial__hard, .dial__vhard { fill: none; stroke-width: 18; }
.dial__track { stroke: var(--surface); }
.dial__soft { stroke: color-mix(in srgb, var(--secondary) 35%, var(--white)); }
.dial__mod { stroke: color-mix(in srgb, var(--secondary) 70%, var(--white)); }
.dial__hard { stroke: var(--secondary); }
.dial__vhard { stroke: var(--primary-dark); }
.dial__needle { fill: var(--dark); }
.dial__hub { fill: var(--dark); stroke: var(--secondary); stroke-width: 4; }
.dial__cap { display: flex; flex-direction: column; align-items: center; margin-top: var(--sys-space-4); }
.dial__num { font-size: 64px; line-height: 56px; font-weight: 900; color: var(--dark); }
.dial__unit { font-weight: 700; text-transform: uppercase; letter-spacing: 8%; font-size: 15px; }
.dial__band {
  margin-top: var(--sys-space-4);
  font-family: var(--f-script);
  font-size: 26px;
  line-height: 30px;
  font-synthesis: none;
  color: var(--primary);
}
.dial__place { margin-top: var(--sys-space-2); font-size: 22px; line-height: 24px; font-weight: 800; text-transform: uppercase; color: var(--dark-soft); }
.dial--sm .dial__num { font-size: 48px; line-height: 44px; }
.dial--sm .dial__place { display: none; }

/* ---------- areas ---------- */
.areas__regions {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: var(--sys-space-8);
  margin-top: var(--sys-space-16);
  padding: 0;
  list-style: none;
  text-align: left;
}
.areas__region {
  padding: var(--sys-space-12);
  background: var(--surface);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: 0 6px 0 0 var(--soft);
  color: var(--dark);
}
.areas__rname { font-size: 32px; line-height: 32px; font-weight: 800; text-transform: uppercase; letter-spacing: 2%; }
.areas__rnote { margin-top: var(--sys-space-3); font-weight: 600; }
.areas__places { margin-top: var(--sys-space-8); padding: 0; list-style: none; }
.areas__place + .areas__place { border-top: 2px solid color-mix(in srgb, var(--soft) 45%, transparent); }
.areas__place a, .areas__place > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sys-space-4);
  padding: var(--sys-space-4) 0;
}
.areas__pname { font-size: 24px; line-height: 26px; font-weight: 800; text-transform: uppercase; color: var(--primary); }
.areas__place a:hover .areas__pname, .areas__place a:focus-visible .areas__pname { text-decoration: underline; text-underline-offset: 4px; }
.areas__zips { font-size: 16px; font-weight: 700; color: var(--dark-soft); text-align: right; }
.areas__sub { padding-left: var(--sys-space-8); }
.areas__sub .areas__pname { font-size: 20px; }

/* ---------- the local file (city pages) ---------- */
.file {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sys-space-8);
  margin-top: calc(0px - var(--sys-space-19));
  position: relative;
  z-index: 2;
  padding: 0;
  list-style: none;
}
.file__plate {
  display: flex;
  flex-direction: column;
  padding: var(--sys-space-8);
  background: var(--white);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: 0 6px 0 0 var(--soft);
}
.file__plate--wide { grid-column: span 2; }
.file__k { font-family: var(--f-script); font-size: 24px; line-height: 28px; color: var(--primary); font-synthesis: none; }
.file__v { margin-top: var(--sys-space-3); font-size: 26px; line-height: 28px; font-weight: 800; text-transform: uppercase; color: var(--dark); }
.file__v a { text-decoration: underline; text-decoration-color: var(--secondary); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.file__d { margin-top: var(--sys-space-3); font-weight: 600; }
.file__plate .src { margin-top: auto; padding-top: var(--sys-space-4); }
.zips { display: flex; flex-wrap: wrap; gap: var(--sys-space-3); margin-top: var(--sys-space-4); padding: 0; list-style: none; }
.zips li {
  padding: 0 var(--sys-space-4);
  border: var(--sys-border-2) var(--primary);
  border-radius: 5px;
  font-weight: 700;
  line-height: 30px;
  color: var(--primary);
}

/* ---------- prose: service, city and guide bodies ---------- */
.prose__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--sys-space-19);
  align-items: start;
}
.prose { font-size: 20px; line-height: 31px; font-weight: 500; }
.prose > * + * { margin-top: var(--sys-space-8); }
.prose h2 { font-size: 40px; line-height: 40px; font-weight: 800; letter-spacing: 2%; text-transform: uppercase; color: var(--dark); margin-top: var(--sys-space-17); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 28px; line-height: 30px; font-weight: 800; text-transform: uppercase; color: var(--dark-soft); margin-top: var(--sys-space-12); }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: var(--sys-space-12); }
.prose ul li + li { margin-top: var(--sys-space-3); }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--secondary);
}
.prose a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose strong { font-weight: 800; }
.callout {
  padding: var(--sys-space-12);
  background: var(--dark);
  color: var(--white);
  border-radius: 12px;
  box-shadow: 0 6px 0 0 var(--primary);
}
.callout__k { font-family: var(--f-script); font-size: 26px; line-height: 30px; color: var(--on-navy); font-synthesis: none; }
.callout p { margin-top: var(--sys-space-4); font-size: 20px; line-height: 30px; font-weight: 600; }
.callout a { color: var(--cream); }
.callout .src { color: var(--cream); }

.ticket {
  position: sticky;
  top: 120px;
  padding: var(--sys-space-12);
  background: var(--white);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: 0 8px 0 0 var(--soft);
}
.ticket__k { font-family: var(--f-script); font-size: 30px; line-height: 34px; color: var(--primary); font-synthesis: none; }
.ticket__list { margin-top: var(--sys-space-8); padding: 0; list-style: none; }
.ticket__list li {
  position: relative;
  padding: var(--sys-space-4) 0 var(--sys-space-4) var(--sys-space-14);
  border-top: 2px solid color-mix(in srgb, var(--soft) 40%, transparent);
  font-size: 19px;
  line-height: 24px;
  font-weight: 600;
}
.ticket__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 16px;
  height: 9px;
  border-left: 4px solid var(--secondary);
  border-bottom: 4px solid var(--secondary);
  rotate: -45deg;
}
.ticket .btn { display: block; margin-top: var(--sys-space-12); }
.ticket__phone { display: block; margin-top: var(--sys-space-6); text-align: center; font-size: 30px; line-height: 34px; font-weight: 800; color: var(--primary); }

/* ---------- signs: what you see before you call ---------- */
.signs { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--sys-space-8); margin-top: var(--sys-space-16); padding: 0; list-style: none; }
.signs__item {
  position: relative;
  padding: var(--sys-space-12) var(--sys-space-8) var(--sys-space-8);
  background: var(--white);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: 0 6px 0 0 var(--soft);
  text-align: left;
}
.signs__n {
  position: absolute;
  top: calc(0px - var(--sys-space-8));
  left: var(--sys-space-8);
  min-width: 48px;
  padding: 0 var(--sys-space-4);
  background: var(--dark);
  color: var(--cream);
  font-size: 26px;
  line-height: 40px;
  font-weight: 900;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 3px 0 0 var(--secondary);
}
.signs__t { font-size: 26px; line-height: 28px; font-weight: 800; text-transform: uppercase; color: var(--dark-soft); }
.signs__b { margin-top: var(--sys-space-4); font-weight: 600; }

/* ---------- related links ---------- */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sys-space-4); margin-top: var(--sys-space-12); padding: 0; list-style: none; }
.chips a {
  display: block;
  padding: 0 var(--sys-space-8);
  background: var(--white);
  border: var(--sys-border-3) var(--primary-dark);
  border-radius: var(--radius);
  box-shadow: 0 3px 0 0 var(--soft);
  font-size: 20px;
  line-height: 44px;
  font-weight: 800;
  letter-spacing: 4%;
  text-transform: uppercase;
  color: var(--dark);
  transition: translate 160ms var(--ease), box-shadow 160ms var(--ease);
}
.chips a:hover, .chips a:focus-visible { translate: 0 -2px; box-shadow: 0 5px 0 0 var(--secondary); }

/* ---------- guides: resources cards ---------- */
.res__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sys-space-8); margin-top: var(--sys-space-16); padding: 0; list-style: none; }
.res__card { display: block; color: var(--dark); transition: translate 200ms var(--ease); }
.res__card:hover, .res__card:focus-visible { translate: 0 -4px; }
.res__card .card__img { aspect-ratio: 3 / 2; }
.card__badge svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.card__count { margin-top: var(--sys-space-3); font-weight: 700; color: var(--primary); }

/* the guide page */
.guide__grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--sys-space-19); align-items: start; }
.toc {
  position: sticky;
  top: 120px;
  padding: var(--sys-space-8);
  background: var(--white);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: 0 6px 0 0 var(--soft);
}
.toc__k { font-family: var(--f-script); font-size: 26px; line-height: 30px; color: var(--primary); font-synthesis: none; }
.toc ol { margin-top: var(--sys-space-4); padding-left: var(--sys-space-8); }
.toc li + li { margin-top: var(--sys-space-3); }
.toc a { display: block; padding: var(--sys-space-3) 0; font-weight: 700; color: var(--dark); }
.toc li + li { margin-top: 0; }
.toc__call { display: block; margin-top: var(--sys-space-8); text-align: center; }
.toc a:hover, .toc a:focus-visible { color: var(--primary); text-decoration: underline; }
.answer {
  margin-top: var(--sys-space-8);
  padding: var(--sys-space-8) var(--sys-space-12);
  background: var(--white);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: 0 6px 0 0 var(--soft);
  font-weight: 600;
}
.guide__meta { margin-top: var(--sys-space-8); font-weight: 700; color: var(--cream); }

/* ---------- faq ---------- */
.faq { text-align: center; }
.faq__list { max-width: 900px; margin: var(--sys-space-16) auto 0; text-align: left; }
.faq__item {
  background: var(--white);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: 0 6px 0 0 var(--soft);
}
.faq__item + .faq__item { margin-top: var(--sys-space-8); }
.faq__q {
  position: relative;
  padding: var(--sys-space-8) calc(var(--sys-space-8) + 40px) var(--sys-space-8) var(--sys-space-8);
  font-size: 24px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: 2%;
  text-transform: uppercase;
  color: var(--dark-soft);
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  position: absolute;
  right: var(--sys-space-8);
  top: 50%;
  width: 14px;
  height: 14px;
  border-right: 4px solid var(--secondary);
  border-bottom: 4px solid var(--secondary);
  rotate: 45deg;
  translate: 0 -70%;
  transition: rotate 200ms var(--ease);
}
.faq__item[open] .faq__q::after { rotate: 225deg; translate: 0 -30%; }
.faq__a { padding: 0 var(--sys-space-8) var(--sys-space-8); font-size: 20px; line-height: 30px; font-weight: 600; }

/* ---------- the call band ---------- */
.callband {
  position: relative;
  padding: var(--sys-space-17) 0;
  background: var(--primary);
  color: var(--white);
  overflow: hidden;
}
.callband::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 24px;
  background: var(--soft);
}
.callband__in { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sys-space-12); }
.callband__copy { flex: 1 1 520px; }
.callband__eyebrow { color: var(--cream); }
.callband__h2 { color: var(--white); margin-bottom: 0; }
.callband__body { margin-top: var(--sys-space-8); }
.callband__phone {
  display: flex;
  align-items: center;
  gap: var(--sys-space-8);
  padding: var(--sys-space-6) var(--sys-space-12);
  background: var(--dark);
  border-radius: var(--radius);
  box-shadow: 0 6px 0 0 var(--secondary);
  color: var(--cream);
  transition: translate 160ms var(--ease), box-shadow 160ms var(--ease);
}
.callband__phone:hover, .callband__phone:focus-visible { translate: 0 -3px; box-shadow: 0 9px 0 0 var(--secondary); }
.callband__ico { width: 44px; height: 44px; color: var(--secondary); }
.callband__ico svg { width: 100%; height: 100%; fill: currentColor; }
.callband__act { display: flex; flex-direction: column; align-items: center; gap: var(--sys-space-4); }
.callband__act .hours { color: var(--cream); }
.hours { margin-top: var(--sys-space-6); font-size: 16px; line-height: 22px; font-weight: 700; }
.callband__act .hours { margin-top: 0; }
.callband__num { font-size: 56px; line-height: 56px; font-weight: 900; letter-spacing: 2%; white-space: nowrap; }

/* ---------- footer additions ---------- */
.ftr__address a { text-decoration: underline; text-underline-offset: 3px; }
.ftr__mail { margin-bottom: var(--sys-space-8); font-weight: 700; color: var(--cream); }
.ftr__license a { text-decoration: underline; text-underline-offset: 3px; }
.ftr__btns { padding: 0; list-style: none; }
.copy__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sys-space-4); }
.copy__credit { margin: 0; font-weight: 700; color: var(--white); }
@media (max-width: 959px) { .copy__in { justify-content: center; text-align: center; } }

/* ---------- phones and tablets ---------- */
@media (max-width: 1199px) {
  .board__groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .board__group:nth-child(2) { translate: none; }
  .file { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 959px) {
  .hero--home .hero__in,
  .hero--staged .hero__in { grid-template-columns: minmax(0, 1fr); row-gap: var(--sys-space-16); }
  .hero--home, .hero--staged { text-align: center; }
  .hero--home .hero__cta, .hero--page .hero__cta { justify-content: center; }
  .hero__proof { justify-content: center; }
  .crumbs ol { justify-content: center; }
  .hero__stage { justify-self: center; width: 78%; max-width: 360px; }
  .hero--home .hero__stage { margin-bottom: 0; }
  .stage__cap { text-align: center; }
  .board__feature { grid-template-columns: minmax(0, 1fr); padding: var(--sys-space-8); }
  .board__feature h3 { font-size: 40px; line-height: 40px; }
  .board__groups { grid-template-columns: minmax(0, 1fr); }
  .cam__head { grid-template-columns: minmax(0, 1fr); }
  .cam__reel {
    display: flex;
    gap: var(--sys-space-8);
    margin-left: calc(0px - var(--gutter));
    margin-right: calc(0px - var(--gutter));
    padding: 0 var(--gutter) var(--sys-space-8);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .cam__reel::-webkit-scrollbar { display: none; }
  .cam__item { flex: 0 0 72%; scroll-snap-align: center; }
  .cam__item:nth-child(n) { translate: none; }
  .cam__foot { margin-top: var(--sys-space-12); }
  .areas__regions, .res__grid { grid-template-columns: minmax(0, 1fr); }
  .file { grid-template-columns: minmax(0, 1fr); margin-top: calc(0px - var(--sys-space-16)); }
  .file__plate--wide { grid-column: auto; }
  .prose__grid, .guide__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sys-space-16); }
  .ticket, .toc { position: static; }
  .prose { font-size: 19px; line-height: 29px; }
  .prose h2 { font-size: 34px; line-height: 36px; }
  .signs { grid-template-columns: minmax(0, 1fr); row-gap: var(--sys-space-16); }
  .callband__num { font-size: 40px; line-height: 44px; }
  .callband__phone { width: 100%; justify-content: center; }
  .callband__act { width: 100%; text-align: center; }
  .drop { display: none !important; }
  .hdr__caret { display: none; }
}

@media (max-width: 639px) {
  .board__name { font-size: 22px; }
  .board__gtitle { font-size: 28px; line-height: 28px; }
  .faq__q { font-size: 20px; line-height: 24px; }
  .callband__num { font-size: 34px; line-height: 38px; }
  .callband__ico { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- small fixes the templates lean on ---------- */
.board__feature-copy { text-align: left; }
.res__foot { margin-top: var(--sys-space-16); }

/* ---------- the privacy policy ---------- */
.legal .container { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--sys-space-16); align-items: start; }
.legal__card { padding: var(--sys-space-12); background: var(--white); border: var(--sys-border-1) var(--primary-dark); border-radius: 12px; box-shadow: 0 6px 0 0 var(--soft); }
.legal__toc { position: sticky; top: 120px; }
.legal__toc-k { font-family: var(--f-script); font-size: 26px; line-height: 30px; color: var(--primary); font-synthesis: none; }
.legal__toc-list { margin-top: var(--sys-space-4); padding-left: var(--sys-space-8); font-weight: 700; }
.legal__toc-list li + li { margin-top: var(--sys-space-2); }
.legal__body { font-size: 19px; line-height: 29px; font-weight: 500; }
.legal__sec + .legal__sec { margin-top: var(--sys-space-16); }
.legal__h { font-size: 34px; line-height: 36px; font-weight: 800; letter-spacing: 2%; text-transform: uppercase; color: var(--dark); }
.legal__sub { margin-top: var(--sys-space-8); font-size: 24px; line-height: 28px; font-weight: 800; text-transform: uppercase; color: var(--dark-soft); }
.legal__body p, .legal__body ul, .legal__addr { margin-top: var(--sys-space-6); }
.legal__body ul { padding-left: var(--sys-space-12); }
.legal__body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.legal__addr { font-style: normal; font-weight: 700; }
@media (max-width: 959px) {
  .legal .container { grid-template-columns: minmax(0, 1fr); }
  .legal__toc { position: static; }
  .legal__card { padding: var(--sys-space-8); }
}
.file-band { position: relative; }
.file__plate--dial { align-items: center; justify-content: center; text-align: center; }
.ticket__list a { color: var(--dark); text-decoration: underline; text-decoration-color: var(--secondary); text-underline-offset: 4px; }
.ticket__list a:hover, .ticket__list a:focus-visible { color: var(--primary); }
.guide__sec + .guide__sec { margin-top: var(--sys-space-17); }
.guide__dates { margin-top: var(--sys-space-8); font-size: 16px; line-height: 22px; font-weight: 700; color: var(--dark-soft); }
/* a page head with no stage is a title band, not a full screen: the local file or the body
   rides up over its cut instead of a screen of empty navy */
.hero--page:not(.hero--staged) { min-height: 0; padding-bottom: var(--sys-space-16); }
.file--dial { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.file--dial .file__plate--wide { grid-column: auto; }
@media (max-width: 1199px) { .file--dial { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 959px) { .file--dial { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the reviewer's round (checkpoint, 2026-10-17) ---------- */
.btn--teal { color: var(--white); }   /* white on thelen's blue is 5:1; navy on it was 3:1 */
.why__cta { margin-top: var(--sys-space-12); }
.ftr__address a { display: inline-block; padding: var(--sys-space-2) 0; }

/* the call bar: on a phone the number is one thumb away on every screen */
.callbar { display: none; }
@media (max-width: 959px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .callbar {
    position: fixed;
    z-index: 50;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(var(--sys-space-6) + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sys-space-4);
    min-height: 52px;
    background: var(--secondary);
    color: var(--white);
    border: var(--sys-border-2) var(--dark);
    border-radius: var(--radius);
    box-shadow: 0 4px 0 0 var(--dark);
    font-size: 24px;
    line-height: 28px;
    font-weight: 800;
    letter-spacing: 4%;
    text-transform: uppercase;
  }
  .callbar__ico { width: 22px; height: 22px; }
  .callbar__ico svg { width: 100%; height: 100%; fill: currentColor; }
  /* the header's own icons keep thelen's size but get a full thumb of tap area */
  .hdr__mphone, .hdr__toggle { box-sizing: content-box; padding: 10px; margin: -10px; }
  /* home: the title, then the footage, then the rest, so the stage shows on the first screen */
  .hero--home .hero__copy { display: contents; }
  .hero--home .hero__title { order: 1; }
  .hero--home .hero__stage { order: 2; width: 64%; }
  .hero--home .hero__lead { order: 3; }
  .hero--home .hero__cta { order: 4; margin-top: 0; }
  .hero--home .hours { order: 4; margin-top: calc(-1 * var(--sys-space-4)); }
  .hero--home .hero__proof { order: 5; margin-top: 0; }
  .hero--home .hero__in { row-gap: var(--sys-space-8); }
}

/* a city's own water as its stage: the supplier's number, large, beside the title */
.hero__dial {
  justify-self: end;
  width: 100%;
  max-width: 400px;
  padding: var(--sys-space-12) var(--sys-space-12) var(--sys-space-8);
  background: var(--white);
  color: var(--dark);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: calc(0px - var(--rim)) var(--rim) 0 0 var(--primary), calc(0px - var(--rim) * 2) calc(var(--rim) * 2) 0 0 var(--soft);
  text-align: center;
}
.hero__dial .src { font-size: 15px; line-height: 20px; }
@media (max-width: 959px) {
  .hero__dial { justify-self: center; max-width: 340px; margin-left: calc(var(--rim) * 2); }
}

/* the home water band: the valley's own number as the stage, every supplier in one ledger */
.water__stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sys-space-16);
  align-items: center;
  margin-top: var(--sys-space-16);
  text-align: left;
}
.water__lead {
  margin: 0;
  padding: var(--sys-space-12);
  background: var(--dark);
  color: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 0 0 var(--primary);
}
.water__lead .dial__num, .water__lead .dial__place { color: var(--cream); }
.water__lead .dial__band { color: var(--on-navy); }
.water__lead .dial__track { stroke: var(--dark-soft); }
.water__lead .dial__needle, .water__lead .dial__hub { fill: var(--cream); }
.water__lead .water__note { color: var(--white); text-align: center; }
.ledger { margin: 0; padding: 0; list-style: none; }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
  grid-template-areas: "place bar num" "band note note";
  column-gap: var(--sys-space-8);
  row-gap: var(--sys-space-1);
  align-items: center;
  padding: var(--sys-space-6) 0;
  border-bottom: 2px solid color-mix(in srgb, var(--soft) 45%, transparent);
}
.ledger__row:first-child { padding-top: 0; }
.ledger__place { grid-area: place; font-size: 22px; line-height: 24px; font-weight: 800; text-transform: uppercase; color: var(--dark); }
.ledger__bar { grid-area: bar; height: 14px; background: var(--white); border: var(--sys-border-2) var(--primary-dark); border-radius: 50px; overflow: hidden; }
.ledger__bar span { display: block; height: 100%; background: var(--secondary); }
.ledger__num { grid-area: num; font-size: 30px; line-height: 30px; font-weight: 900; color: var(--dark); white-space: nowrap; }
.ledger__num small { font-size: 15px; font-weight: 700; text-transform: uppercase; }
.ledger__band { grid-area: band; font-family: var(--f-script); font-size: 20px; line-height: 24px; color: var(--primary); font-synthesis: none; }
.ledger__note { grid-area: note; font-size: 16px; line-height: 22px; font-weight: 600; }
.water .src { text-align: center; }
@media (max-width: 959px) {
  .water__stage { grid-template-columns: minmax(0, 1fr); }
  .ledger__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "place num" "bar bar" "band band" "note note"; row-gap: var(--sys-space-3); }
}

/* services grouped by family on the city page */
.families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sys-space-12); margin-top: var(--sys-space-12); }
.family__k { font-family: var(--f-script); font-size: 26px; line-height: 30px; color: var(--primary); font-synthesis: none; }
.family .chips { margin-top: var(--sys-space-4); }
@media (max-width: 959px) { .families { grid-template-columns: minmax(0, 1fr); } }
.guide__sec > * + * { margin-top: var(--sys-space-8); }
.guide__sec > .answer { margin-top: var(--sys-space-8); }

/* ---------- the city's standout rule ---------- */
.rule { overflow: hidden; }
.rule__ground {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(46%, 640px);
  background: var(--dark-soft);
  clip-path: var(--stage-shape);
  transform: scaleX(-1);
}
.rule__ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  clip-path: var(--stage-shape);
  translate: var(--rim) 0;
  opacity: 0.55;
}
.rule__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sys-space-19);
  align-items: center;
}
.rule__big { display: flex; flex-direction: column; margin: 0; }
.rule__num {
  font-size: clamp(64px, 8.4vw, 150px);
  line-height: 0.86;
  font-weight: 900;
  letter-spacing: 1%;
  text-transform: uppercase;
  color: var(--cream);
  overflow-wrap: anywhere;
}
.rule__k {
  margin-top: var(--sys-space-6);
  font-family: var(--f-script);
  font-size: 32px;
  line-height: 36px;
  font-synthesis: none;
  color: var(--on-navy);
}
.rule__h2 { color: var(--cream); }
.rule__body { margin-top: var(--sys-space-8); font-size: 20px; line-height: 30px; font-weight: 600; }
.rule .src { color: var(--cream); }
.rule .src a { color: var(--white); }
.rule__btn { margin-top: var(--sys-space-12); }
@media (max-width: 959px) {
  .rule__in { grid-template-columns: minmax(0, 1fr); gap: var(--sys-space-12); }
  .rule__ground { width: 70%; height: 46%; bottom: auto; }
}

/* ---------- city notes: numbered, each with its source ---------- */
.notes { margin-top: var(--sys-space-16); padding: 0; list-style: none; counter-reset: note; }
.notes__item {
  position: relative;
  padding: var(--sys-space-8) 0 var(--sys-space-8) calc(64px + var(--sys-space-8));
  border-top: var(--sys-border-2) color-mix(in srgb, var(--soft) 55%, transparent);
  counter-increment: note;
}
.notes__item::before {
  content: counter(note, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--sys-space-8);
  width: 64px;
  font-size: 52px;
  line-height: 48px;
  font-weight: 900;
  color: var(--secondary);
}
.prose .notes__item h3 { margin-top: 0; }
.notes__item > p { margin-top: var(--sys-space-3); }
.file__sub { margin-top: var(--sys-space-4); font-weight: 800; text-transform: uppercase; color: var(--dark-soft); }
.file__sub + .zips { margin-top: var(--sys-space-2); }
.ticket__hours { margin-top: var(--sys-space-8); font-weight: 700; color: var(--dark-soft); }

/* a guide's own number as its stage, on the same rims as the city dial */
.hero__figure {
  justify-self: end;
  width: 100%;
  max-width: 400px;
  padding: var(--sys-space-16) var(--sys-space-12);
  background: var(--cream);
  color: var(--dark);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: calc(0px - var(--rim)) var(--rim) 0 0 var(--primary), calc(0px - var(--rim) * 2) calc(var(--rim) * 2) 0 0 var(--soft);
  text-align: center;
}
.hero__fig-n { font-size: clamp(64px, 7vw, 112px); line-height: 0.9; font-weight: 900; letter-spacing: 1%; text-transform: uppercase; color: var(--primary-dark); overflow-wrap: anywhere; }
.hero__fig-l { margin-top: var(--sys-space-6); font-family: var(--f-script); font-size: 26px; line-height: 32px; font-synthesis: none; color: var(--primary); }
@media (max-width: 959px) { .hero__figure { justify-self: center; max-width: 340px; margin-left: calc(var(--rim) * 2); } }

/* ---------- service variations ---------- */
/* the warning signs as the hero's stage, for a service with no picture of its own */
.symptoms, .regions, .callcard {
  justify-self: end;
  width: 100%;
  max-width: 440px;
  padding: var(--sys-space-12);
  background: var(--white);
  color: var(--dark);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: calc(0px - var(--rim)) var(--rim) 0 0 var(--primary), calc(0px - var(--rim) * 2) calc(var(--rim) * 2) 0 0 var(--soft);
  text-align: left;
}
.symptoms__k, .regions__k, .callcard__k { font-family: var(--f-script); font-size: 32px; line-height: 36px; font-synthesis: none; color: var(--primary); }
.symptoms__list { margin-top: var(--sys-space-6); padding: 0; list-style: none; counter-reset: sym; }
.symptoms__list li {
  position: relative;
  padding: var(--sys-space-5) 0 var(--sys-space-5) var(--sys-space-16);
  border-top: 2px solid color-mix(in srgb, var(--soft) 45%, transparent);
  counter-increment: sym;
}
.symptoms__list li::before {
  content: counter(sym, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--sys-space-5);
  font-size: 28px;
  line-height: 28px;
  font-weight: 900;
  color: var(--secondary);
}
.symptoms__t { display: block; font-size: 22px; line-height: 24px; font-weight: 800; text-transform: uppercase; color: var(--dark-soft); }
.symptoms__b { display: block; margin-top: var(--sys-space-1); font-size: 17px; line-height: 22px; font-weight: 600; }
@media (max-width: 959px) { .symptoms { justify-self: center; margin-left: calc(var(--rim) * 2); width: calc(100% - var(--rim) * 2); } }

/* the gas company's instruction, first, before anything we sell */
.alert { position: relative; z-index: 2; margin-top: calc(0px - var(--sys-space-17)); }
.alert__in {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto;
  grid-template-areas: "k body tel" "src src src";
  gap: var(--sys-space-4) var(--sys-space-12);
  align-items: center;
  padding-top: var(--sys-space-12);
  padding-bottom: var(--sys-space-8);
  background: var(--secondary);
  color: var(--white);
  border-radius: 12px;
  box-shadow: 0 6px 0 0 var(--dark);
}
.alert__k { grid-area: k; font-size: 40px; line-height: 40px; font-weight: 900; text-transform: uppercase; }
.alert__body { grid-area: body; font-size: 19px; line-height: 27px; font-weight: 600; }
.alert__tel { grid-area: tel; padding: 0 var(--sys-space-8); background: var(--dark); border-radius: var(--radius); font-size: 22px; line-height: 52px; font-weight: 800; white-space: nowrap; }
.alert .src { grid-area: src; margin-top: 0; }
.alert .src a { color: var(--white); }
@media (max-width: 959px) {
  .alert { margin-top: calc(0px - var(--sys-space-12)); }
  .alert__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "body" "tel" "src"; margin-left: var(--gutter); margin-right: var(--gutter); }
  .alert__k { font-size: 32px; line-height: 34px; }
  .alert__tel { justify-self: start; }
}

/* drains and sewer: the job along the line */
.prose--wide { max-width: 860px; }
.run {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  grid-auto-flow: column;
  gap: var(--sys-space-8);
  margin-top: var(--sys-space-17);
  padding: 0;
  list-style: none;
}
.run::before {   /* the pipe: thelen's blue line with the soft rim under it */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 14px;
  background: var(--secondary);
  border-radius: 50px;
  box-shadow: 0 6px 0 0 var(--soft);
}
.run__step { position: relative; }
.run__joint {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  background: var(--dark);
  color: var(--cream);
  border: var(--sys-border-3) var(--secondary);
  border-radius: 50%;
  font-size: 28px;
  font-weight: 900;
}
.run__t { display: block; margin-top: var(--sys-space-8); font-size: 20px; line-height: 26px; font-weight: 700; color: var(--dark); }
.callout--wide { max-width: 860px; margin-top: var(--sys-space-17); }
.run__cta { margin-top: var(--sys-space-16); }
@media (max-width: 959px) {
  .run { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; gap: var(--sys-space-8); }
  .run::before { left: 26px; right: auto; top: 0; bottom: 0; width: 14px; height: auto; box-shadow: 6px 0 0 0 var(--soft); }
  .run__step { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: var(--sys-space-8); align-items: center; }
  .run__t { margin-top: 0; }
}

/* more of the same work, from Jacob's camera */
.reel__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sys-space-16); margin-top: var(--sys-space-16); padding: 0; list-style: none; }
.reel__item:nth-child(2) { margin-top: var(--sys-space-16); }
.reel__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: var(--sys-border-1) var(--secondary);
  border-radius: 12px;
  box-shadow: 0 8px 0 0 var(--primary);
  background: var(--dark-soft);
}
.reel__frame video, .reel__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__frame video { z-index: 1; opacity: 0; transition: opacity 600ms var(--ease); }
.reel__frame video.is-playing { opacity: 1; }
.reel__cap { margin-top: var(--sys-space-8); font-size: 19px; line-height: 26px; font-weight: 600; }
@media (max-width: 959px) {
  .reel__list { display: flex; margin-left: calc(0px - var(--gutter)); margin-right: calc(0px - var(--gutter)); padding: 0 var(--gutter) var(--sys-space-8); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .reel__list::-webkit-scrollbar { display: none; }
  .reel__item { flex: 0 0 72%; scroll-snap-align: center; }
  .reel__item:nth-child(2) { margin-top: 0; }
}

/* site map: one card per group, the same lists the pages are built from */
.smap__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sys-space-12); align-items: start; }
.smap__card { padding: var(--sys-space-12); background: var(--white); border: var(--sys-border-1) var(--primary-dark); border-radius: 12px; box-shadow: 0 6px 0 0 var(--soft); }
.smap__h { font-size: 26px; line-height: 30px; font-weight: 800; letter-spacing: 2%; text-transform: uppercase; color: var(--dark); }
.smap__list { margin: var(--sys-space-6) 0 0; padding: 0; list-style: none; font-size: 19px; line-height: 26px; font-weight: 600; }
.smap__list li + li { margin-top: var(--sys-space-3); }
.smap__list a { color: var(--primary-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.smap__list a:hover, .smap__list a:focus-visible { color: var(--primary); text-decoration-thickness: 2px; }
/* The hub pages: services, service areas, about, contact, work. Same tokens and surfaces as
   pages.css; only the compositions are new. */

/* services: the family pinned on the left, its jobs as a numbered rail */
.fam__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sys-space-19); align-items: start; }
.fam__head { position: sticky; top: 120px; }
.fam__intro { margin-top: var(--sys-space-8); font-size: 20px; line-height: 30px; font-weight: 600; }
.fam__list { margin: 0; padding: 0; list-style: none; border-top: var(--sys-border-1) var(--primary-dark); }
.fam__row { border-bottom: var(--sys-border-1) var(--primary-dark); }
.fam__link { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: var(--sys-space-8); padding: var(--sys-space-10) 0; color: var(--dark); text-decoration: none; }
.fam__n { grid-row: span 2; font-size: 52px; line-height: 46px; font-weight: 900; color: var(--secondary); transition: color 200ms var(--ease); }
.fam__name { font-size: 30px; line-height: 32px; font-weight: 800; text-transform: uppercase; color: var(--dark-soft); transition: color 200ms var(--ease), transform 200ms var(--ease); }
.fam__short { margin-top: var(--sys-space-2); font-size: 18px; line-height: 26px; font-weight: 600; }
.fam__link:hover .fam__name, .fam__link:focus-visible .fam__name { color: var(--primary); transform: translateX(6px); }
.fam__link:hover .fam__n, .fam__link:focus-visible .fam__n { color: var(--primary); }

/* service areas: the region index in the hero, then a card per city page */
.regions__list { margin-top: var(--sys-space-6); padding: 0; list-style: none; }
.regions__list li + li { border-top: var(--sys-border-1) var(--soft); }
.regions__link { display: flex; flex-direction: column; gap: var(--sys-space-2); padding: var(--sys-space-6) 0; color: var(--dark); text-decoration: none; }
.regions__places { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--dark-soft); }
.regions__name { font-size: 22px; line-height: 24px; font-weight: 800; text-transform: uppercase; color: var(--dark-soft); transition: color 200ms var(--ease); }
.regions__link:hover .regions__name, .regions__link:focus-visible .regions__name { color: var(--primary); }
.region__head { max-width: 760px; }
.region__note { margin-top: var(--sys-space-8); }
.places { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--sys-space-12); margin-top: var(--sys-space-16); padding: 0; list-style: none; }
.place__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sys-space-12);
  background: var(--white);
  color: var(--dark);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: 0 8px 0 0 var(--soft);
  text-decoration: none;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.place__link:hover, .place__link:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 0 0 var(--primary); }
.place__k { font-family: var(--f-script); font-size: 24px; line-height: 28px; font-synthesis: none; color: var(--primary); }
.place__name { margin-top: var(--sys-space-4); font-size: 34px; line-height: 34px; font-weight: 900; text-transform: uppercase; color: var(--dark-soft); }
.place__with { margin-top: var(--sys-space-4); font-weight: 700; }
.place__svcs { display: flex; flex-direction: column; gap: var(--sys-space-3); margin-top: var(--sys-space-8); padding-top: var(--sys-space-8); border-top: var(--sys-border-1) var(--soft); }
.place__svc { font-size: 18px; line-height: 22px; font-weight: 800; text-transform: uppercase; color: var(--dark-soft); }
/* a check mark drawn from two borders, inline so it stays with the words when they centre */
.place__svc::before { content: ""; display: inline-block; width: 6px; height: 12px; margin: 0 12px 3px 2px; border: solid var(--primary); border-width: 0 3px 3px 0; rotate: 45deg; vertical-align: middle; }
.place__svc--more { font-size: 16px; font-weight: 700; text-transform: none; color: var(--primary); }
.place__svc--more::before { display: none; }
.place__fact { margin: var(--sys-space-6) 0 var(--sys-space-8); font-weight: 600; }
.place__fact b { color: var(--primary); }

/* city pages: the services first, lifted over the hero's cut */
.pick { position: relative; z-index: 2; margin-top: calc(0px - var(--sys-space-19)); padding: var(--sys-space-16); background: var(--white); border: var(--sys-border-1) var(--primary-dark); border-radius: 16px; box-shadow: 0 10px 0 0 var(--soft); text-align: center; }
.pick__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sys-space-6); margin-top: var(--sys-space-12); padding: 0; list-style: none; }
.pick__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sys-space-3);
  height: 100%;
  padding: var(--sys-space-8) var(--sys-space-8) var(--sys-space-16);
  background: var(--surface);
  border: var(--sys-border-1) var(--primary-dark);
  border-radius: 12px;
  box-shadow: 0 6px 0 0 var(--primary);
  color: var(--dark);
  text-align: left;
  text-decoration: none;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.pick__card:hover, .pick__card:focus-visible { transform: translateY(-4px); box-shadow: 0 10px 0 0 var(--primary); }
.pick__card:active { transform: translateY(2px); box-shadow: 0 3px 0 0 var(--primary); }
.pick__name { font-size: 24px; line-height: 26px; font-weight: 900; text-transform: uppercase; color: var(--dark-soft); }
.pick__short { font-size: 16px; line-height: 22px; font-weight: 600; }
.pick__arrow { position: absolute; right: var(--sys-space-6); bottom: var(--sys-space-6); width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--primary); fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease); }
.pick__card:hover .pick__arrow, .pick__card:focus-visible .pick__arrow { transform: translateX(4px); }
.pick__k { margin-top: var(--sys-space-12); font-family: var(--f-script); font-size: 26px; line-height: 30px; font-synthesis: none; color: var(--primary); }
.pick__rest { justify-content: center; margin-top: var(--sys-space-4); }
.place__more { margin-top: auto; }

/* about: the record in the ticket */
.record { margin: var(--sys-space-8) 0 0; }
.record dd { margin: 0; }
.record__row { padding: var(--sys-space-6) 0; border-top: var(--sys-border-1) var(--soft); }
.record__row:first-child { padding-top: 0; border-top: 0; }
.record__k { font-size: 15px; line-height: 20px; font-weight: 800; text-transform: uppercase; color: var(--primary); }
.record__v { margin-top: var(--sys-space-1); font-size: 26px; line-height: 28px; font-weight: 800; text-transform: uppercase; color: var(--dark-soft); }
.record__d { margin-top: var(--sys-space-2); font-weight: 600; }

/* contact: the call card on the hero stage, then what to have ready */
.callcard__tel { display: block; margin-top: var(--sys-space-4); font-size: clamp(38px, 4vw, 50px); line-height: 1; font-weight: 900; color: var(--dark-soft); text-decoration: none; white-space: nowrap; transition: color 200ms var(--ease); }
.callcard__tel:hover, .callcard__tel:focus-visible { color: var(--primary); }
.callcard__facts { margin: var(--sys-space-8) 0 0; }
.callcard__facts div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--sys-space-4); padding: var(--sys-space-4) 0; border-top: var(--sys-border-1) var(--soft); }
.callcard__facts dt { font-size: 15px; line-height: 24px; font-weight: 800; text-transform: uppercase; color: var(--primary); }
.callcard__facts dd { margin: 0; font-weight: 600; }
.callcard__btn { display: block; margin-top: var(--sys-space-8); text-align: center; }
.prep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sys-space-19); align-items: start; }
.prep__list { margin: var(--sys-space-12) 0 0; padding: 0; list-style: none; counter-reset: prep; }
.prep__list li { position: relative; padding: var(--sys-space-6) 0 var(--sys-space-6) 56px; border-bottom: var(--sys-border-1) var(--soft); font-size: 20px; line-height: 28px; font-weight: 600; counter-increment: prep; }
.prep__list li::before {
  content: counter(prep);
  position: absolute;
  top: var(--sys-space-6);
  left: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-weight: 800;
  line-height: 1;
}
.prep__signs { margin-top: var(--sys-space-12); }

/* work: the service link under a clip, and the pair beside its heading */
.work__svc { display: inline-block; margin-top: var(--sys-space-4); font-size: 16px; line-height: 22px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary); text-decoration: underline; text-decoration-color: var(--secondary); text-underline-offset: 5px; }
.work__svc:hover, .work__svc:focus-visible { color: var(--primary-dark); }
.band--navy .work__svc { color: var(--white); }
.band--navy .work__svc:hover, .band--navy .work__svc:focus-visible { color: var(--cream); }
.work__duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sys-space-19); align-items: center; }
.work__duo .reel__list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }

/* fewer than three guides: centred at card width, not stranded in the first column */
.res__grid--few { grid-template-columns: repeat(var(--n), minmax(0, 380px)); justify-content: center; }

@media (max-width: 959px) {
  .res__grid--few { grid-template-columns: minmax(0, 1fr); }
  .fam__in, .prep, .work__duo { grid-template-columns: minmax(0, 1fr); gap: var(--sys-space-12); }
  .fam__head { position: static; }
  .fam__link { grid-template-columns: 52px minmax(0, 1fr); }
  .fam__n { font-size: 36px; line-height: 34px; }
  .fam__name { font-size: 24px; line-height: 26px; }
  .work__duo .reel__list { display: flex; margin-top: var(--sys-space-4); }
  .pick { margin-top: calc(0px - var(--sys-space-16)); padding: var(--sys-space-12) var(--sys-space-6); }
  .pick__name { font-size: 22px; line-height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .fam__name, .place__link, .pick__card, .pick__arrow { transition: none; }
  .fam__link:hover .fam__name, .place__link:hover, .pick__card:hover, .pick__card:active, .pick__card:hover .pick__arrow { transform: none; }
}
/* Through his eyes: Jacob's footage, filmed through his glasses, and the collages of his stills. */
/* the collage: Jacob's stills, pinned at angles behind a band */
.collage { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.collage__tile {
  position: absolute;
  width: clamp(120px, 13vw, 200px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 5px solid var(--cream);
  border-radius: 6px;
  rotate: var(--r, 0deg);
}
.collage__tile img { width: 100%; height: 100%; object-fit: cover; }
.collage__tile:nth-child(1) { left: -2%; top: -18%; --r: -8deg; }
.collage__tile:nth-child(2) { left: 13%; top: 40%; --r: 5deg; }
.collage__tile:nth-child(3) { left: 29%; top: -26%; --r: -4deg; }
.collage__tile:nth-child(4) { left: 45%; top: 46%; --r: 7deg; }
.collage__tile:nth-child(5) { left: 61%; top: -14%; --r: -6deg; }
.collage__tile:nth-child(6) { left: 76%; top: 38%; --r: 4deg; }
.collage__tile:nth-child(7) { left: 90%; top: -22%; --r: -5deg; }
.collage--wash .collage__tile { opacity: 0.2; filter: grayscale(0.4); }
.collage--navy .collage__tile { opacity: 0.14; border-color: var(--secondary); }
.collage--right .collage__tile:nth-child(-n+2) { display: none; }
.callband__in, .cam > .container, .rule__in { z-index: 1; }
.cam { position: relative; }
.cam > .container { position: relative; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .collage__tile { animation: tile-drift linear both; animation-timeline: view(); }
    .collage__tile:nth-child(even) { animation-name: tile-drift-down; }
  }
}
@keyframes tile-drift { from { translate: 0 28px; } to { translate: 0 -28px; } }
@keyframes tile-drift-down { from { translate: 0 -24px; } to { translate: 0 24px; } }

/* work: the dig as a strip of five */
.work__strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sys-space-8); }
.work__strip .reel__item:nth-child(4) { margin-top: var(--sys-space-16); }

/* work: soldering as a mosaic led by its best clip */
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sys-space-8); margin-top: var(--sys-space-16); padding: 0; list-style: none; }
.mosaic__item { position: relative; }
.mosaic__item:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic__item:first-child .reel__frame { height: 100%; aspect-ratio: auto; }
.mosaic__cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: var(--sys-space-12) var(--sys-space-6) var(--sys-space-6);
  border-radius: 0 0 12px 12px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--dark) 88%, transparent));
  color: var(--white);
  font-size: 16px;
  line-height: 21px;
  font-weight: 700;
}
.mosaic__cap a { color: var(--white); text-decoration: underline; text-decoration-color: var(--secondary); text-underline-offset: 4px; }
.mosaic__cap a:hover, .mosaic__cap a:focus-visible { color: var(--cream); }

/* work: the commercial riser as its steps, in order */
.story__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sys-space-16); align-items: end; }
.story__head .t-lead { color: var(--white); }
.story__list { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sys-space-6); margin-top: var(--sys-space-16); padding: 0; list-style: none; }
.story__list::before { content: ""; position: absolute; top: 15px; right: 0; left: 0; height: 2px; background: var(--secondary); }
.story__k { position: relative; display: flex; align-items: center; gap: var(--sys-space-3); margin-bottom: var(--sys-space-6); font-size: 15px; line-height: 20px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream); }
.story__n { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--white); font-size: 14px; }
.story__cap { margin-top: var(--sys-space-6); font-size: 16px; line-height: 22px; font-weight: 600; }

@media (max-width: 959px) {
  .work__strip .reel__item:nth-child(4) { margin-top: 0; }
  .story__head { grid-template-columns: minmax(0, 1fr); gap: var(--sys-space-8); }
  .story__list { display: flex; margin-right: calc(0px - var(--gutter)); margin-left: calc(0px - var(--gutter)); padding: 0 var(--gutter) var(--sys-space-8); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .story__list::-webkit-scrollbar { display: none; }
  .story__list::before { display: none; }
  .story__step { flex: 0 0 62%; scroll-snap-align: start; }
}
@media (max-width: 639px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sys-space-6); }
  .mosaic__item:first-child { grid-row: auto; }   /* alone on its row, a two-row span has no height to fill */
  .mosaic__item:first-child .reel__frame { height: auto; aspect-ratio: 3 / 4; }
  .mosaic__item:last-child:nth-child(even) { grid-column: span 2; }
  .mosaic__item:last-child:nth-child(even) .reel__frame { aspect-ratio: 4 / 3; }
  .collage__tile { width: 110px; }
}
/* The page scrolls over Jacob's footage: windows, the scrubbed clip, and the services rail previews. */

/* windows: the media is fixed to the screen, and clip-path on the band clips it to the band, so it
   shows only while the band passes and the page slides over it. Navy until the media loads. */
.window {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 86vh;
  min-height: 86svh;
  padding: var(--band-pad) 0;
  background: var(--dark);
  color: var(--white);
  text-align: center;
  clip-path: inset(0);
  view-timeline-name: --window;
}
.window__media { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }
.window__media img, .window__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.window__media img { opacity: 0; transition: opacity 500ms var(--ease); }
.window__media img.is-in { opacity: 1; }
.window__media video { opacity: 0; transition: opacity 500ms var(--ease); }
.window__media video.is-playing { opacity: 1; }
.window--photo .window__media img { object-position: center 62%; }
/* the wash: enough navy for white type over the brightest frame (a sky, a white ceiling) */
.window__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(color-mix(in srgb, var(--dark) 44%, transparent), color-mix(in srgb, var(--dark) 70%, transparent));
}
.window__in { position: relative; }
.window__k { margin: 0; font-family: var(--f-script); font-size: 30px; line-height: 34px; font-synthesis: none; color: var(--on-navy); }
.window__line {
  max-width: 15ch;
  margin: var(--sys-space-4) auto 0;
  font-size: clamp(46px, 7.2vw, 112px);
  line-height: 0.94;
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--white);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* a photo window eases in as it passes; the type rises a little against it */
    .window--photo .window__media img.is-in { animation: window-zoom linear both; animation-timeline: --window; }
    .window__in { animation: window-rise linear both; animation-timeline: --window; animation-range: entry 0% cover 50%; }
  }
}
@keyframes window-zoom { from { scale: 1.12; } to { scale: 1; } }
@keyframes window-rise { from { translate: 0 60px; opacity: 0.2; } to { translate: 0 0; opacity: 1; } }

/* the scrubbed clip: pinned beside the steps on desktop, the scroll is its playhead */
.scrub__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sys-space-16); align-items: start; margin-top: var(--sys-space-12); }
.scrub__clip { position: sticky; top: 130px; width: min(100%, calc((100vh - 260px) * 0.75)); margin: 0 auto; }
.scrub__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; background: var(--dark); box-shadow: 0 10px 0 0 var(--primary); }
.scrub__frame img, .scrub__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrub__frame video { z-index: 1; opacity: 0; transition: opacity 300ms var(--ease); }
.scrub__frame video.is-playing { opacity: 1; }
.scrub__cap { margin-top: var(--sys-space-8); font-size: 18px; line-height: 24px; font-weight: 600; text-align: left; }
.scrub .scrub__steps { flex-direction: column; margin-top: 0; }
.scrub .scrub__steps > * { flex: none; width: 100%; }
.scrub .steps__cell + .steps__cell { margin-top: var(--sys-space-16); }

/* services rail: the job's own clip or photo beside its row; the clip plays on hover (or, on a
   phone, while the row is in the middle of the screen) */
.fam__link--thumb { grid-template-columns: 76px minmax(0, 1fr) 104px; }
.fam__thumb {
  position: relative;
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 5px 0 0 var(--soft);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.fam__thumb img, .fam__thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fam__thumb video { z-index: 1; opacity: 0; transition: opacity 250ms var(--ease); }
.fam__thumb video.is-playing { opacity: 1; }
.fam__link:hover .fam__thumb, .fam__link:focus-visible .fam__thumb { transform: rotate(-3deg) scale(1.06); box-shadow: 0 8px 0 0 var(--primary); }

@media (max-width: 959px) {
  .window { min-height: 78svh; }
  .window__k { font-size: 24px; line-height: 28px; }
  .scrub__in { grid-template-columns: minmax(0, 1fr); gap: var(--sys-space-12); }
  .scrub__clip { position: static; width: min(100%, 340px); margin: 0 auto; }
  .scrub__cap { text-align: center; }
  .scrub .steps__cell + .steps__cell { margin-top: 0; }
  .fam__link--thumb { grid-template-columns: 52px minmax(0, 1fr) 76px; column-gap: var(--sys-space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .window__media img, .window__media video, .fam__thumb { transition: none; }
  .fam__link:hover .fam__thumb, .fam__link:focus-visible .fam__thumb { transform: none; }
}
/* George's phone review, 2026-10-18: the words centred on a phone, no short accent lines, the
   footage in a plain rounded frame, and a play button when the phone refuses to autoplay. */

/* the short bar under every heading: only lines that run the full width stay */
.t-rule { display: none; }

/* the footage in a plain rounded frame at every width: no arc crop, no offset rim */
.stage__rim { display: none; }
.stage__win { clip-path: none; border-radius: 16px; box-shadow: 0 10px 0 0 var(--primary); }
.stage__cap { margin-top: var(--sys-space-8); }

/* a clip the phone would not autoplay (Low Power Mode, data saver): say it is a video */
.play {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  display: none;
  place-items: center;
  width: 64px;
  height: 64px;
  translate: -50% -50%;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dark) 78%, transparent);
  color: var(--white);
  cursor: pointer;
  transition: scale 200ms var(--ease), background-color 200ms var(--ease);
}
.play svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.play:hover, .play:focus-visible { scale: 1.08; background: var(--primary); }
.is-blocked .play { display: grid; }

@media (max-width: 959px) {
  /* every word in main centred; (1,0,1) specificity on purpose, so it outranks each section's own
     text-align: left without a list of them. The privacy policy stays left: long legal text. */
  main :not(#_):not(.legal__body, .legal__body *) { text-align: center; }

  /* the rows that put two things side by side stack them, centred */
  .board__ghead { flex-direction: column; text-align: center; }
  .board__link { padding-left: calc(var(--sys-space-8) + 28px); }
  .steps__row { flex-direction: column; align-items: center; margin-left: 0; }
  .steps__row > * { padding-left: 0; }
  .board__checks li { padding-left: 0; }
  .board__checks li::before { position: relative; top: -4px; display: inline-block; margin-right: var(--sys-space-4); }

  /* the footer too */
  .ftr :not(#_) { text-align: center; }

  /* a tap you can feel: buttons, rows, chips and cards press in */
  .btn, .callbar, .board__link, .chips a, .card, .place__link, .fam__link, .faq__q, .hdr__dsub a {
    transition: scale 120ms var(--ease), background-color 200ms var(--ease);
  }
  .btn:active, .callbar:active, .chips a:active, .hdr__dsub a:active { scale: 0.96; }
  .board__link:active, .card:active, .place__link:active, .fam__link:active, .faq__q:active { scale: 0.985; }

  /* the footage: full width, rounded, no arc and no rim */
  .hero__stage, .hero--home .hero__stage { width: 100%; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .play { transition: none; }
  .btn:active, .callbar:active, .chips a:active, .hdr__dsub a:active, .board__link:active, .card:active, .place__link:active, .fam__link:active, .faq__q:active { scale: none; }
}

/* the phone menu: navy, the links sliding in one after another, services and areas opening in place */
.hdr__drawer {
  min-height: calc(100dvh - 98px); /* mheader.h@390 */
  background: var(--dark);
  border-bottom: 0;
  padding: var(--sys-space-8) var(--gutter) calc(var(--sys-space-16) + env(safe-area-inset-bottom));
}
.hdr__dmenu > li { border-bottom: 1px solid color-mix(in srgb, var(--white) 14%, transparent); }
.hdr__dmenu > li:last-child { border-bottom: 0; }
.hdr__dlink { line-height: 64px; color: var(--white); transition: color 200ms var(--ease); }
.hdr__dlink:hover, .hdr__dlink:focus-visible { color: var(--cream); }
.hdr__drow { position: relative; }
.hdr__dmore {
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  translate: 0 -50%;
  border: 1px solid color-mix(in srgb, var(--white) 30%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.hdr__dmore svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: rotate 250ms var(--ease); }
.hdr__dmore[aria-expanded="true"] { background: var(--primary); border-color: var(--primary); }
.hdr__dmore[aria-expanded="true"] svg { rotate: 180deg; }
.hdr__dsub { margin: 0 0 var(--sys-space-6); padding: var(--sys-space-2); list-style: none; border-radius: 12px; background: color-mix(in srgb, var(--white) 7%, transparent); }
.hdr__dsub li + li { border-top: 1px solid color-mix(in srgb, var(--white) 8%, transparent); }
.hdr__dsub a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sys-space-3);
  padding: 12px var(--sys-space-4);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  color: var(--cream);
  text-decoration: none;
}
.hdr__darrow { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--secondary); stroke-width: 2.6; transition: translate 200ms var(--ease); }
.hdr__dsub a:hover .hdr__darrow, .hdr__dsub a:focus-visible .hdr__darrow { translate: 4px 0; }
.hdr__dfoot { margin-top: var(--sys-space-8); }
.hdr__dfoot .hours { color: var(--cream); }
.hdr__dmeta { margin-top: var(--sys-space-4); color: color-mix(in srgb, var(--white) 70%, transparent); font-weight: 700; }
.hdr__dbtn { display: flex; justify-content: center; }
.hdr__drawer:not([hidden]) .hdr__dmenu > li,
.hdr__drawer:not([hidden]) .hdr__dfoot { animation: dm-in 380ms var(--ease) both; }
.hdr__dmenu > li:nth-child(2) { animation-delay: 40ms; }
.hdr__dmenu > li:nth-child(3) { animation-delay: 80ms; }
.hdr__dmenu > li:nth-child(4) { animation-delay: 120ms; }
.hdr__dmenu > li:nth-child(5) { animation-delay: 160ms; }
.hdr__dmenu > li:nth-child(6) { animation-delay: 200ms; }
.hdr__dmenu > li:nth-child(7) { animation-delay: 240ms; }
.hdr__dfoot { animation-delay: 280ms; }
.hdr__dsub:not([hidden]) li { animation: dm-in 260ms var(--ease) both; }
@keyframes dm-in { from { opacity: 0; translate: 0 10px; } }
.menu-open, .menu-open body { overflow: hidden; }
.menu-open .callbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hdr__drawer:not([hidden]) .hdr__dmenu > li, .hdr__drawer:not([hidden]) .hdr__dfoot, .hdr__dsub:not([hidden]) li { animation: none; }
  .hdr__dmore svg, .hdr__darrow, .hdr__dlink { transition: none; }
}
/* George's second phone review, 2026-10-18: "a box with the video and around it a bunch of empty
   area". A hero with footage now gives the footage its whole side of the band, edge to edge, and
   lets it melt into the navy instead of framing it: under the copy on a phone, the right side on a
   desktop. Photo stages keep their frame (a photo may not be shown past its own pixels). */
.hero--footage { isolation: isolate; }
.hero--footage .stage__win {
  border-radius: 0;
  box-shadow: none;
}
.hero--footage .stage__cap {
  position: absolute;
  z-index: 2;
  margin: 0;
  text-shadow: 0 2px 12px var(--dark), 0 0 3px var(--dark);
}

@media (min-width: 960px) {
  /* the copy centred in what is left of the band; the footage from the header to the cut */
  .hero--footage { display: flex; flex-direction: column; }
  .hero--footage .hero__in {
    position: static;
    flex: 1;
    align-content: center;
    grid-template-columns: minmax(0, 1fr) min(36vw, 620px);
  }
  .hero--footage .hero__copy { position: relative; z-index: 2; }
  .hero--footage .hero__art { z-index: 1; }
  .hero--footage .hero__stage,
  .hero--home.hero--footage .hero__stage {
    position: absolute;
    z-index: 0;
    inset: 0 0 0 auto;
    width: min(46vw, 820px);
    max-width: none;
    margin: 0;
  }
  .hero--footage .stage__win {
    height: 100%;
    aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 38%);
    mask-image: linear-gradient(to right, transparent, #000 38%);
  }
  .hero--footage .stage__cap {
    right: var(--gutter);
    bottom: calc(max(10.25vw, 19.32vh) + var(--sys-space-8)); /* above the cut (hero_cut_reserve) */
  }
}

@media (max-width: 959px) {
  /* the footage first, full width under the header, fading into the navy; the title rides up
     onto its faded foot */
  .hero--footage { padding-top: 0; }
  .hero--footage .hero__copy { display: contents; }
  .hero--footage .hero__in { row-gap: var(--sys-space-8); }
  .hero--footage .hero__copy > * { position: relative; z-index: 1; }
  .hero--footage .hero__stage,
  .hero--home.hero--footage .hero__stage {
    order: -1;
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin: 0 calc(-1 * var(--gutter)) calc(-1 * var(--sys-space-21));
  }
  .hero--footage .stage__win {
    aspect-ratio: auto;
    height: min(125vw, 62svh); /* 4:5 on a phone; a tablet keeps the title on its first screen */
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent);
    mask-image: linear-gradient(to bottom, #000 58%, transparent);
  }
  .hero--footage .stage__cap { top: var(--sys-space-8); left: var(--gutter); right: var(--gutter); }
}