/* Excede Finishing: shared styles (tokens, type, grid, header, menu, footer, buttons, forms).

   =====================================================================================================
   SHARED CHROME PATTERN. Every page copies this markup exactly (owner of the pattern: css/site.css).
   Order inside <body>: skip link, header, main, footer, menu dialog, scripts. index.html is the reference.
   =====================================================================================================

   In <head>, right after the viewport meta, the class hook for scripts (index.html's own head script also
   sets save-data, has-scene and fonts-later there, and preloads its first hero photograph):
     <script>document.documentElement.classList.add('js')</script>
   Fonts: self-hosted in fonts/v1 (see its README), as inline @font-face rules right before the first
   stylesheet, so a font file starts as soon as the text needs it, with no stylesheet to fetch first. They
   are not in this file because vision.html links it too and still loads its own faces. No preconnects and no
   font preloads: measured on Slow 4G and Rural 3G, preloading either file delayed the first paint and the
   hero photograph. Copy the block from any content page; 404.html points at /fonts/v1/ because it is served
   at any depth. Per family, latin-ext comes before latin, as Google ordered them:
     <style>
       @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 400; font-display: swap; src: url(fonts/v1/newsreader-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, ...; }
       @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 400; font-display: swap; src: url(fonts/v1/newsreader-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, ...; }
       @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/v1/hanken-grotesk-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, ...; }
       @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/v1/hanken-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, ...; }
     </style>
     <link rel="stylesheet" href="css/site.css">
     <link rel="stylesheet" href="css/pages.css">   (or the page's own stylesheet)

   1. Skip link, the first thing in <body>:
     <a class="skip-link" href="#main">Skip to content</a>

   2. Header. Put aria-current="page" on the link for the page you are on. On the homepage only, the
      Kitchens links in the header, footer and menu are "#work" (everywhere else "./#work"). The phone number is the office's, the first
      number on the current site [confirm: which number the header shows].
     <header class="site-head">
       <div class="wrap head-grid">
         <a class="logo" href="./"><img src="images/r/highlevel-logo-v2-480.webp" srcset="images/r/highlevel-logo-v2-480.webp 480w, images/r/highlevel-logo-v2-800.webp 800w" sizes="180px" alt="High Level Kitchens &amp; Cabinetry home" width="1887" height="547"></a>
         <nav class="head-nav" aria-label="Main">
           <a href="./#work">Kitchens</a>
           <a href="planning.html">Planning</a>
           <a href="index.html#rooms#rooms">Other rooms</a>
           <a href="visit.html">Visit the shop</a>
         </nav>
         <div class="head-act">
           <a class="head-tel" href="tel:+14033811320" aria-label="Call the office, 403-381-1320"><span class="head-tel__num">403-381-1320</span><span class="head-tel__word">Call</span></a>
           <a class="btn btn--sm head-cta" href="vision.html">Design your kitchen</a>
           <a class="head-menu" href="#foot" aria-controls="menu">Menu</a>
         </div>
       </div>
     </header>
      The Menu link jumps to the footer when scripts are off; js/site.js turns it into a button that
      opens the dialog below (focus moves in and comes back, Esc closes, the page behind is inert and
      does not scroll).

   3. Main:
     <main id="main" tabindex="-1"> ... </main>

   4. Footer. Links only to pages that exist (index, vision, finishing, planning, visit, privacy).
     <footer class="site-foot" id="foot">
       <div class="wrap">
         <div class="grid foot-top">
           <a class="logo" href="./"><img src="images/r/highlevel-logo-v2-800.webp" srcset="images/r/highlevel-logo-v2-480.webp 480w, images/r/highlevel-logo-v2-800.webp 800w" sizes="207px" alt="High Level Kitchens &amp; Cabinetry home" width="1887" height="547" loading="lazy" decoding="async"></a>
           <p class="foot-tag">Custom kitchens and cabinetry from our showroom in Lethbridge, Alberta.</p>
         </div>
         <div class="grid foot-cols">
           <div class="foot-col">
          <h2 class="foot-h">Visit</h2>
          <p>2825 D 2nd Avenue South<br>Lethbridge, AB</p>
          <p>Monday to Thursday 9 to 5<br>Friday 9 to 4<br>Evenings and weekends by appointment</p>
          <ul class="foot-list">
            <li><a href="visit.html">Visit the showroom</a></li>
            <li><a href="https://www.google.com/maps/search/?api=1&amp;query=2825+D+2nd+Avenue+South+Lethbridge+AB" target="_blank" rel="noopener">Directions<span class="sr-only"> (opens in a new tab)</span></a></li>
          </ul>
        </div>
           <div class="foot-col">
          <h2 class="foot-h">Contact</h2>
          <ul class="foot-list">
            <li><a href="tel:+14033811320">Office <span class="tel">403-381-1320</span></a></li>
            <li><a href="mailto:clint@highlevelkitchens.ca">clint@<wbr>highlevelkitchens.ca</a></li>
            <li><a href="mailto:will@highlevelkitchens.ca">will@<wbr>highlevelkitchens.ca</a></li>
          </ul>
        </div>
           <div class="foot-col">
             <h2 class="foot-h">Planning</h2>
             <ul class="foot-list">
               <li><a href="vision.html">Design your kitchen</a></li>
               <li><a href="planning.html">Planning a kitchen</a></li>
               <li><a href="./#work">Kitchens to start from</a></li>
             </ul>
           </div>
           <div class="foot-col" data-confirm="care guide, warranty and service process">
             <h2 class="foot-h">Care</h2>
             <p>Call or email us about looking after your&nbsp;cabinets.</p>
           </div>
           <div class="foot-col">
          <h2 class="foot-h">Other rooms</h2>
          <p>Bathrooms, bars, offices, mudrooms, laundry rooms, entertainment centres and built-ins.</p>
        </div>
         </div>
         <div class="foot-base">
           <p>© 2026 High Level Kitchens &amp; Cabinetry, Lethbridge, Alberta</p>
           <ul class="foot-links">
             <li><a href="https://www.instagram.com/highlevelkitchensyql/" target="_blank" rel="noopener">Instagram<span class="sr-only"> (opens in a new tab)</span></a></li>
             <li><a href="https://www.facebook.com/profile.php?id=61550734855124" target="_blank" rel="noopener">Facebook<span class="sr-only"> (opens in a new tab)</span></a></li>
          <li><a href="https://www.youtube.com/@HighLevelKitchensandCabinetry" target="_blank" rel="noopener">YouTube<span class="sr-only"> (opens in a new tab)</span></a></li>
             <li><a href="privacy.html">Privacy</a></li>
           </ul>
         </div>
       </div>
     </footer>

   5. Menu dialog, right after the footer. Same links as the header, plus the people and the address.
     <dialog class="menu" id="menu" aria-label="Menu">
       <div class="wrap menu__bar">
         <a class="logo" href="./"><img src="images/r/highlevel-logo-v2-480.webp" srcset="images/r/highlevel-logo-v2-480.webp 480w, images/r/highlevel-logo-v2-800.webp 800w" sizes="180px" alt="High Level Kitchens &amp; Cabinetry home" width="1887" height="547" loading="lazy"></a>
         <button class="menu__close" type="button" data-close>Close</button>
       </div>
       <div class="wrap grid menu__body">
         <nav class="menu__nav" aria-label="Menu">
           <ul>
             <li><a href="vision.html">Design your kitchen<span>Pick a style and see it in 3D.</span></a></li>
             <li><a href="./#work">Kitchens<span>Start from a kitchen you like.</span></a></li>
             <li><a href="planning.html">Planning<span>When to call us and what to have ready.</span></a></li>
             <li><a href="visit.html">Visit the showroom<span>2825 D 2nd Avenue South, Lethbridge.</span></a></li>
           </ul>
         </nav>
         <div class="menu__call">
        <ul class="menu__people">
          <li><a href="tel:+14033811320">Office <span class="tel">403-381-1320</span></a></li>
        </ul>
        <p><a href="mailto:clint@highlevelkitchens.ca">clint@highlevelkitchens.ca</a><br><a href="mailto:will@highlevelkitchens.ca">will@highlevelkitchens.ca</a></p>
        <p>2825 D 2nd Avenue South, Lethbridge, AB</p>
      </div>
       </div>
     </dialog>

   6. Scripts at the end of <body>: <script src="js/site.js" defer></script>, then the page's own. site.js
      first: it runs as soon as it arrives, so the menu works early, and it sets window.ExcedeData (Save-Data,
      and oneX() for pictures at 1x) for the scripts after it.

   Copy rules that apply on every page: curly apostrophes and quotes (’ “ ”), &nbsp; inside
   "Picture&nbsp;Butte", postal codes and "P.O. Box&nbsp;36", phone numbers in links or .tel (they never
   wrap), "(opens in a new tab)" as .sr-only text on every target="_blank" link, and every unconfirmed
   fact as data-confirm="..." or <!-- [confirm: ...] -->.

   Forms: add data-validate to a <form> and js/site.js reports errors programmatically (see the
   ExcedeForm comment in js/site.js): aria-invalid, aria-describedby to the .err message, and an error
   summary (role="alert") that takes focus. Each control needs an id, a <label for>, and a sibling
   <p class="err" id="<control id>-err"> holding its message.

   Cross-document View Transitions are on for every page that loads this file: the header and logo
   hold still (view-transition-name site-head and site-logo), the page fades and settles. Reduced
   motion turns them off. Give shared images a unique view-transition-name per page if you add morphs.
   ===================================================================================================== */

/* Metric-matched fallbacks (measured in headless Chrome against Newsreader and Hanken Grotesk), so the
   swap from the fallback to the web font moves almost nothing. The display face has a second fallback
   for the big h1, where Newsreader's optical size runs wider. */
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia'); size-adjust: 93.7%; ascent-override: 79%; descent-override: 27.75%; line-gap-override: 0%; }
@font-face { font-family: 'Newsreader Fallback XL'; src: local('Georgia'); size-adjust: 96.9%; ascent-override: 76.3%; descent-override: 26.8%; line-gap-override: 0%; }
@font-face { font-family: 'Hanken Fallback'; src: local('Arial'); size-adjust: 100.6%; ascent-override: 99.4%; descent-override: 29.8%; line-gap-override: 0%; }
/* While a page's head script holds .fonts-later (index.html, until its first photograph has arrived), the
   stacks skip the web fonts, so the browser doesn't fetch them yet and the fallbacks above hold the lines */
html.fonts-later {
  --f-display: 'Hanken Fallback', Arial, system-ui, sans-serif;
  --f-display-xl: 'Hanken Fallback', Arial, system-ui, sans-serif;
  --f-body: 'Hanken Fallback', Arial, system-ui, sans-serif;
}

:root {
  /* High Level Kitchens: their navy, charcoal and cool grey (highlevelkitchens.ca), on cool whites.
     The token names stay from the first build: --oxblood is the accent, --walnut the dark ground. */
  --plaster: #f2f2ef;
  --linen: #e0e0db;
  --paper: #fafaf8;
  --ink: #1c1e22;
  --ink-2: #3a3f47;
  /* 5.3:1 on linen, 6.4:1 on plaster: passes AA for small text on every light ground */
  --muted: #565b63;
  --line: rgba(28, 30, 34, 0.12);
  --line-2: rgba(28, 30, 34, 0.24);
  --oxblood: #003778;
  --oxblood-2: #002a5c;
  --brass: #a8834a;
  --walnut: #2a2829;
  --walnut-2: #363436;
  --on-dark: #f2f2ef;
  --on-dark-2: rgba(242, 242, 239, 0.72);
  --line-dark: rgba(242, 242, 239, 0.18);
  /* Focus ring: navy on light grounds; dark sections switch it to --on-dark (see .on-dark) */
  --focus: var(--oxblood);

  /* one grotesk for headings and text, as High Level's own site */
  --f-display: 'Hanken Grotesk', 'Hanken Fallback', Arial, system-ui, sans-serif;
  --f-display-xl: 'Hanken Grotesk', 'Hanken Fallback', Arial, system-ui, sans-serif;
  --f-body: 'Hanken Grotesk', 'Hanken Fallback', Arial, system-ui, sans-serif;
  /* kept for older rules; labels now use the body face */
  --f-mono: var(--f-body);

  /* One grid for every page: 12 columns inside a centred container */
  --margin: clamp(20px, 4.4vw, 72px);
  --gap: clamp(12px, 1.5vw, 24px);
  --max: 1600px;
  --edge: max(var(--margin), calc((100vw - var(--max)) / 2));
  --gutter: var(--margin);
  /* one column plus one gap, for indents that sit on column lines */
  --colg: calc((min(100vw, calc(var(--max) + 2 * var(--margin))) - 2 * var(--margin) + var(--gap)) / 12);
  --head-h: 76px;
  --ease: cubic-bezier(0.22, 0.8, 0.22, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}
@media (max-width: 640px) { :root { --head-h: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink-2);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
#main:focus, section[tabindex='-1']:focus { outline: none; }
.on-dark, .section--dark { --focus: var(--on-dark); }
::selection { background: #c9d8ec; color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nw, .tel, a[href^='tel:'] { white-space: nowrap; }
.tel { font-variant-numeric: tabular-nums; }

/* Skip link: off screen until it has focus */
.skip-link {
  position: absolute; left: var(--margin); top: 10px; z-index: 100;
  padding: 12px 18px; border-radius: 2px;
  background: var(--ink); color: var(--plaster); font-weight: 600; font-size: 15px; text-decoration: none;
  transform: translateY(-200%); transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- Grid ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--margin)); margin: 0 auto; padding: 0 var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* ---------- Type ---------- */
.display, h1, h2 {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 0.98;
}
h1 { font-size: clamp(3.1rem, 7.6vw, 8.6rem); }
@media (min-width: 1000px) { h1 { font-family: var(--f-display-xl); } }
h2 { font-size: clamp(2.3rem, 4.5vw, 4.6rem); line-height: 1.01; letter-spacing: -0.024em; }
h3 { font-family: var(--f-display); font-weight: 350; font-size: clamp(1.45rem, 1.9vw, 1.95rem); line-height: 1.14; letter-spacing: -0.012em; }
.lede { font-size: clamp(1.04rem, 1.25vw, 1.18rem); line-height: 1.6; color: var(--ink-2); max-width: 34em; }
.small { font-size: 14px; line-height: 1.5; }
/* Quiet label: small, sentence case, no tracking. Used for captions and form context, never above headlines. */
.mono, .label-sm { font-family: var(--f-body); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.eyebrow { display: block; font-size: 14px; font-weight: 500; color: var(--muted); }

/* ---------- Links and buttons ---------- */
.link {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15.5px; color: var(--ink); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 4px;
  transition: background-size 0.5s var(--ease);
}
.link:hover { animation: underline 0.7s var(--ease); }
@keyframes underline { 0% { background-size: 100% 1px; background-position: 100% 100%; } 45% { background-size: 0 1px; background-position: 100% 100%; } 46% { background-position: 0 100%; } 100% { background-size: 100% 1px; background-position: 0 100%; } }
.link svg { width: 14px; height: 14px; flex: none; transition: transform 0.35s var(--ease); }
.link:hover svg { transform: translateX(3px); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 4px; transition: border-color 0.2s; }
.link-arrow:hover { border-color: var(--ink); }
.link-arrow svg { width: 14px; height: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  min-height: 54px; padding: 0 28px;
  border: 0; border-radius: 2px;
  background: var(--oxblood); color: #f7f7f5;
  font: 600 15px/1 var(--f-body); letter-spacing: 0.005em; text-decoration: none;
  cursor: pointer; transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s var(--ease);
}
.btn:hover { background: var(--oxblood-2); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; flex: none; transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { background: rgba(28, 30, 34, 0.05); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--light { background: var(--plaster); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--ghost-light { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(243, 236, 225, 0.5); }
.btn--ghost-light:hover { background: rgba(243, 236, 225, 0.08); box-shadow: inset 0 0 0 1px var(--on-dark); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14.5px; }

/* ---------- Header ---------- */
/* Plaster ground, a hairline once the page scrolls, hides while reading down and returns on the way up.
   No backdrop blur. */
.site-head {
  position: sticky; top: 0; z-index: 50;
  height: var(--head-h);
  background: var(--plaster);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, transform 0.5s var(--ease);
  view-transition-name: site-head;
}
.site-head.is-scrolled { border-bottom-color: var(--line); }
.site-head.is-hidden { transform: translateY(-100%); }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { display: block; height: 52px; width: auto; }
.site-head .logo, .vb-head > .logo { view-transition-name: site-logo; }
.logo--plate { padding: 12px 16px; border-radius: 2px; background: var(--plaster); }
.logo-tag { padding-left: 14px; margin-left: 2px; border-left: 1px solid var(--line-2); color: var(--muted); font-size: 13px; }
@media (max-width: 560px) { .logo img { height: 42px; } }
/* The header and menu logos keep their full width: the global img max-width would squeeze the wordmark into
   its three grid columns below 768px. At 42px tall it is 145px wide, which clears Call and Menu at 320px. */
.site-head .logo img, .menu__bar .logo img { max-width: none; }

/* The header sits on the grid: logo from column 1, nav from column 5, phone and button ending on column 12 */
.head-grid { height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.head-grid > .logo { grid-column: 1 / span 3; justify-self: start; }
.head-nav { grid-column: 5 / 9; display: flex; align-items: center; gap: clamp(22px, 2.2vw, 36px); white-space: nowrap; }
.head-nav a { position: relative; padding: 10px 0; font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.head-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease); }
.head-nav a:hover { color: var(--ink); }
.head-nav a:hover::after, .head-nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.head-nav a[aria-current='page'] { color: var(--ink); }
.head-act { grid-column: 9 / -1; justify-self: end; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.head-tel { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.head-tel:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.head-tel__word { display: none; }
.head-menu {
  display: none; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 2px; background: transparent; cursor: pointer;
  font: 600 14.5px/1 var(--f-body); color: var(--ink); text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.head-menu:hover { border-color: var(--ink); }
@media (max-width: 1239px) {
  .head-nav { display: none; }
  .head-act { grid-column: 4 / -1; }
  .head-menu { display: inline-flex; }
}
@media (max-width: 640px) {
  .head-cta { display: none; }
  .head-tel__num { display: none; }
  .head-tel__word { display: inline; }
  .head-act { gap: 8px; }
  .head-tel { padding: 0 8px; }
}

/* Legacy header markup (.nav and .menu-btn), kept until every page uses the pattern above */
.site-head > .wrap:not(.head-grid) { height: 100%; display: flex; align-items: center; gap: 40px; }
.nav { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.nav a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink-2); position: relative; padding: 6px 0; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.site-head > .wrap:not(.head-grid) .head-cta { margin-left: 4px; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; border-radius: 2px; }
.menu-btn span { display: block; width: 24px; height: 1.5px; background: var(--ink); margin: 6px auto; transition: transform 0.35s var(--ease), opacity 0.2s; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (max-width: 1100px) {
  .menu-btn { display: block; }
  .site-head > .wrap:not(.head-grid) .head-cta { display: none; }
  .nav {
    position: fixed; inset: var(--head-h) 0 auto 0; height: calc(100dvh - var(--head-h));
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--plaster);
    padding: 12px var(--margin) 32px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 0.3s, transform 0.4s var(--ease), visibility 0.3s;
  }
  .menu-open .nav { transform: none; opacity: 1; visibility: visible; }
  .menu-open .site-head { transform: none; }
  .nav a { font: 300 clamp(2rem, 8vw, 3rem)/1.1 var(--f-display); letter-spacing: -0.02em; color: var(--ink); padding: 16px 0; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .nav .btn { margin-top: auto; font: 600 15px/1 var(--f-body); letter-spacing: 0; border: 0; padding: 0 24px; color: #f7f7f5; }
}
@media (min-width: 1101px) { .nav .btn { display: none; } }

/* ---------- Menu (phones and tablets): a modal dialog on a plaster ground ---------- */
.menu {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0 0 max(32px, env(safe-area-inset-bottom)); border: 0;
  background: var(--plaster); color: var(--ink-2);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu::backdrop { background: rgba(28, 30, 34, 0.24); }
.menu[open] { animation: menuIn 0.35s var(--ease); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } }
.menu__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: var(--head-h); background: var(--plaster); border-bottom: 1px solid var(--line); }
.menu__close {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 2px; background: transparent; cursor: pointer;
  font: 600 14.5px/1 var(--f-body); color: var(--ink);
}
.menu__close:hover { border-color: var(--ink); }
.menu__body { row-gap: 40px; padding-top: 12px; }
.menu__nav { grid-column: 1 / span 7; }
.menu__nav ul { list-style: none; }
.menu__nav li { border-bottom: 1px solid var(--line); }
.menu__nav a { display: block; padding: 18px 0 16px; text-decoration: none; color: var(--ink); font: 300 clamp(2.1rem, 7vw, 2.9rem)/1.05 var(--f-display); letter-spacing: -0.022em; }
.menu__nav a span { display: block; margin-top: 8px; font: 400 15px/1.45 var(--f-body); letter-spacing: 0; color: var(--muted); }
.menu__nav a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.menu__call { grid-column: 9 / span 4; align-self: end; display: grid; gap: 14px; font-size: 15px; }
.menu__people { list-style: none; border-top: 1px solid var(--line-2); }
.menu__people a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; font-weight: 600; color: var(--ink); }
.menu__people .tel { font-weight: 500; color: var(--ink-2); }
.menu__call p a { color: var(--ink); text-underline-offset: 4px; }
@media (max-width: 900px) { .menu__nav, .menu__call { grid-column: 1 / -1; } }

/* ---------- Sections (finishing page and builder) ---------- */
.section { padding: clamp(80px, 11vw, 168px) 0; }
.section--linen { background: var(--linen); }
.section--dark { background: var(--walnut); color: var(--on-dark-2); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head > :first-child { grid-column: 1 / span 7; }
.section-head > :last-child:not(:first-child) { grid-column: 9 / span 4; }
.section-head .eyebrow { display: none; }
@media (max-width: 900px) { .section-head > :first-child, .section-head > :last-child:not(:first-child) { grid-column: 1 / -1; } }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ---------- Vision board frame (builder) ---------- */
.board {
  position: relative; background: var(--paper); border-radius: 2px; padding: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 4px rgba(42, 31, 24, 0.06), 0 40px 70px -36px rgba(42, 31, 24, 0.55);
}
.board__bar { display: flex; justify-content: space-between; gap: 16px; padding: 4px 4px 12px; color: var(--muted); }
.board__bar b { color: var(--ink); font-weight: 500; }
.board__render { position: relative; aspect-ratio: 1200 / 780; border-radius: 2px; overflow: hidden; background: #e1e2de; }
.board__render > .layer { position: absolute; inset: 0; transition: opacity 0.45s ease; }
.board__render > .layer svg, .board__render > .layer img { width: 100%; height: 100%; display: block; object-fit: cover; }
.board__render > .layer.is-out { opacity: 0; }
.board__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 4px 2px; font-size: 13px; color: var(--muted); }
@media (max-width: 520px) {
  .board__bar > span:first-child, .board__foot .mono { display: none; }
  .board__bar { justify-content: flex-end; }
}

/* ---------- Footer ---------- */
.site-foot { background: var(--linen); color: var(--ink-2); padding: clamp(72px, 9vw, 128px) 0 28px; font-size: 15px; line-height: 1.6; }
.site-foot a { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--ease); }
.site-foot a:hover { background-size: 100% 1px; }
.site-foot .logo { background: none; }
.foot-top { align-items: end; row-gap: 28px; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line-2); }
.foot-top > .logo { grid-column: 1 / span 4; justify-self: start; }
.foot-top > .logo img { height: 60px; }
.foot-top .foot-tag { grid-column: 7 / span 6; margin: 0; max-width: 20em; }
.foot-cols { row-gap: 40px; padding-top: clamp(40px, 5vw, 64px); }
.foot-cols > .foot-col { grid-column: span 2; display: grid; align-content: start; gap: 10px; }
.foot-cols > .foot-col:nth-child(1) { grid-column: 1 / span 3; }
.foot-cols > .foot-col:nth-child(2) { grid-column: 4 / span 3; }
.foot-cols > .foot-col:nth-child(3) { grid-column: 7 / span 2; }
.foot-cols > .foot-col:nth-child(4) { grid-column: 9 / span 2; }
.foot-cols > .foot-col:nth-child(5) { grid-column: 11 / span 2; }
.site-foot .foot-h { margin: 0 0 4px; font: 500 14px/1.3 var(--f-body); letter-spacing: 0; color: var(--muted); }
.foot-list { list-style: none; display: grid; gap: 8px; }
.foot-list a { display: inline-block; padding: 2px 0; }
.foot-list .tel { margin-left: 4px; color: var(--ink-2); }
.foot-base { margin-top: clamp(64px, 8vw, 112px); padding-top: 22px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; font-size: 14px; color: var(--muted); }
.foot-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot-links a, .foot-base > a { display: inline-block; padding: 4px 0; }
@media (max-width: 1099px) {
  .foot-top > .logo { grid-column: 1 / span 6; }
  .foot-top .foot-tag { grid-column: 7 / span 6; }
  .foot-cols > .foot-col:nth-child(n) { grid-column: span 4; }
}
@media (max-width: 767px) {
  .foot-top > .logo, .foot-top .foot-tag { grid-column: 1 / -1; }
  .foot-cols > .foot-col:nth-child(n) { grid-column: span 6; }
}
/* Below 360px a name and number on one line ("Dwayne 403-382-7412") is wider than the half-width column and
   pushed the page 1px sideways at 320 (WCAG 1.4.10). Each number goes under its name instead. */
@media (max-width: 359px) {
  .foot-list a[href^='tel:'] { white-space: normal; }
  .foot-list a[href^='tel:'] .tel { display: block; margin-left: 0; }
}

/* Legacy footer markup (.foot-grid), kept until every page uses the pattern above */
.foot-tag { margin-top: 22px; max-width: 22em; font: 300 clamp(1.3rem, 1.6vw, 1.6rem)/1.25 var(--f-display); color: var(--ink); letter-spacing: -0.01em; }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
.foot-brand { grid-column: 1 / span 4; }
.foot-brand .logo img { height: 60px; }
.foot-grid > .foot-col { grid-column: span 2; }
.foot-brand + .foot-col { grid-column: 7 / span 2; }
.foot-grid h4 { font: 500 14px/1 var(--f-body); color: var(--muted); margin-bottom: 18px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid p { line-height: 1.6; }
.foot-grid > div:not([class]) { grid-column: span 2; }
.foot-grid > div:not([class]):first-child { grid-column: 1 / span 4; }
.foot-grid > div:not([class]):nth-child(2) { grid-column: 7 / span 2; }
@media (max-width: 900px) {
  .foot-brand, .foot-grid > div:not([class]):first-child { grid-column: 1 / -1; }
  .foot-grid > .foot-col, .foot-brand + .foot-col, .foot-grid > div:not([class]), .foot-grid > div:not([class]):nth-child(2) { grid-column: span 6; }
}

/* ---------- Page transitions (cross-document View Transitions, Chrome and Safari) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: 180ms ease-out both vt-out; }
::view-transition-new(root) { animation: 320ms var(--ease) 60ms both vt-in; }
::view-transition-group(site-head), ::view-transition-group(site-logo) { animation-duration: 320ms; animation-timing-function: var(--ease); }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Forms (shared by Vision Builder and Finishing sheet) ---------- */
.field { display: grid; gap: 8px; }
.field > span, .label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field small, .hint { font-size: 13px; color: var(--muted); font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: 2px; background: var(--paper);
  font: 400 16px/1.4 var(--f-body); color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 55, 120, 0.14); }
.field.has-error input, .field.has-error textarea, .field.has-error select,
input[aria-invalid='true'], textarea[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--oxblood); }
.err, .field > .err { display: none; font-size: 13.5px; color: var(--oxblood); font-weight: 500; }
.has-error .err, .err.show { display: block; }
/* The error summary js/site.js puts at the top of a form with data-validate */
.form-errors { margin: 0 0 24px; padding: 16px 18px; border-left: 2px solid var(--oxblood); background: var(--paper); color: var(--ink); }
.form-errors:focus { outline: 2px solid var(--focus); outline-offset: 3px; }
.form-errors .form-errors__title { font: 600 16px/1.35 var(--f-body); letter-spacing: 0; margin: 0 0 6px; color: var(--ink); }
.form-errors ul { margin: 0; padding-left: 1.2em; }
.form-errors a { color: var(--oxblood); font-weight: 500; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .fields-2 { grid-template-columns: 1fr; } }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 2px; background: var(--paper);
  font-size: 14.5px; font-weight: 500; color: var(--ink-2); transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.pill:hover span { border-color: var(--ink); }
.pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--plaster); }
.pill input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.pill input:disabled + span { opacity: 0.7; }

.drop {
  position: relative; display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 26px 16px; border: 1.5px dashed var(--line-2); border-radius: 2px; background: rgba(250, 247, 242, 0.6);
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.drop:hover, .drop.is-over { border-color: var(--ink); background: var(--paper); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop svg { width: 26px; height: 26px; color: var(--oxblood); }
.drop b { color: var(--ink); font-weight: 600; font-size: 15px; }
.drop small { font-size: 13px; color: var(--muted); }
.files { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; }
.files li { list-style: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); font-size: 13px; max-width: 100%; }
.files img, .files .doc { width: 34px; height: 34px; border-radius: 2px; object-fit: cover; flex: none; }
.files .doc { display: grid; place-items: center; background: var(--linen); font: 600 9px/1 var(--f-body); color: var(--oxblood); }
.files span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }

/* ---------- Print: every page prints as a plain document, ink on white ----------
   No chrome and no screen-only controls. Dark sections print in ink, and buttons print as ink outlines so
   their words (a phone number, say) survive a printer that drops backgrounds. The finishing sheet and the
   measure-day card have their own templates (css/finishing.css, css/pages.css); the builder (body.vb) has
   its own rules. */
@media print {
  /* A page margin of its own, so a print with the browser's margins off (or a PDF export) never runs to the
     paper edge. The finishing sheet and the Vision Board set their own @page after this. */
  @page { margin: 0.5in; }
  .skip-link, .site-head, .site-foot, .menu { display: none !important; }
  body:not(.vb) { background: #fff; }
  body:not(.vb) :is(.on-dark, .section--dark) { background: none !important; color: var(--ink-2) !important; }
  body:not(.vb) :is(.on-dark, .section--dark) :is(h1, h2, h3, h4, p, li, a, span, b, strong, small, legend, label, dt, dd, figcaption, blockquote) { color: var(--ink) !important; text-shadow: none !important; }
  body:not(.vb) .btn { min-height: 0; padding: 9px 14px; background: none !important; color: var(--ink) !important; box-shadow: none !important; border: 1px solid var(--ink) !important; }
  body:not(.vb) .btn svg { display: none; }
  body:not(.vb) :is(.sq, .work__btns, .work__progress, .styles, .design__cta, .stage__tools, .stage__load, .hero__light, .cursor, .toc, .legal__toc, button#printSheet, .toast) { display: none !important; }
  body:not(.vb) :is(.card, .faq__q, .pp, .people li, .sched > li, .routes li, .reg > li, .step, .wk, .mc) { break-inside: avoid; }
  body:not(.vb) :is(h1, h2, h3) { break-inside: avoid; break-after: avoid; }
  /* Soft shadows only cost ink, and some PDF viewers draw them as solid grey boxes. The two framed figures
     that used an inset shadow as their edge get a hairline instead. */
  body:not(.vb) *, body:not(.vb) *::before, body:not(.vb) *::after { box-shadow: none !important; }
  body:not(.vb) .sb--metal button { filter: none !important; }
  body:not(.vb) :is(.map, .vmap__frame) { outline: 1px solid var(--line); outline-offset: -1px; }
}