/*
Theme Name: Chinook Ridge
Theme URI: https://binaryhorizon.io
Author: Binary Horizon Technologies Inc.
Author URI: https://binaryhorizon.io
Description: Soapstone and limewash. Demonstration theme for Chinook Ridge Kitchen & Bath, a fictional Calgary renovation company. Built by Binary Horizon to show design and automation together.
Version: 2.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chinook-ridge
*/

/* ===================================================================
   CHINOOK RIDGE · ONE PAGE, TWO SURFACES

   The page alternates two surfaces taken from the rooms themselves:
   limewash (cool, faintly green plaster white) and soapstone (the dark
   counter stone). Brass is the only accent, the way it is the only
   metal in the photographs. The one bold gesture is the hero
   photograph set inside a shallow arch: the chinook arch, the band of
   clear sky that opens over the Rockies when the warm wind comes in.

   THE BAND CONTRACT
   Every section is a .band: a full-width grid whose content is held
   to --max by its own inline padding, so a band's background bleeds
   edge to edge while its text does not. Column ratios are carried by
   --l and --r on the band; grid-template-columns is written once.

   A band is put on soapstone by the .on-stone rule below, which only
   re-points the colour tokens. Components never name a surface.
   ==================================================================== */

:root{
  color-scheme:light;

  /* the two surfaces */
  --lime:#F2F3EF;
  --lime-2:#E6E9E3;
  --stone:#1B2421;
  --stone-2:#232E2A;
  --stone-3:#131917;

  /* text on each */
  --ink-on-lime:#131A18;
  --soft-on-lime:#56625D;
  --ink-on-stone:#EEF0EA;
  --soft-on-stone:#A9B4AE;

  /* the one accent, and the sky */
  --brass:#C29A5B;
  --brass-deep:#7A5A27;         /* brass dark enough to read on limewash */
  --sky:#AFC4CE;

  /* live tokens: what components actually use */
  --bg:var(--lime);
  --bg-2:var(--lime-2);
  --ink:var(--ink-on-lime);
  --soft:var(--soft-on-lime);
  --line:rgba(19,26,24,.13);
  --accent:var(--brass-deep);
  --btn-bg:var(--stone);
  --btn-ink:var(--ink-on-stone);
  --field:#FFFFFF;

  --max:1240px;
  --gutter:clamp(18px,4vw,48px);
  --px:max(var(--gutter), calc((100% - var(--max)) / 2));
  --gap:clamp(28px,5vw,88px);
  --pad:clamp(72px,10vw,148px);

  --r-img:6px;
  --r-card:22px;

  --ease:cubic-bezier(.2,.7,.1,1);
  --mast-h:76px;
}

/* soapstone bands: the same names, pointed at the dark values */
.on-stone,
.band.opening,.band.process,.band.contact,
.mast,footer{
  --bg:var(--stone);
  --bg-2:var(--stone-2);
  --ink:var(--ink-on-stone);
  --soft:var(--soft-on-stone);
  --line:rgba(238,240,234,.14);
  --accent:var(--brass);
  --btn-bg:var(--brass);
  --btn-ink:var(--stone-3);
  color-scheme:dark;
}

/* dark mode is opt-in, by the toggle only: limewash goes to deep stone */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101614;
  --bg-2:#18201D;
  --ink:#E9ECE6;
  --soft:#9DA8A2;
  --line:rgba(233,236,230,.12);
  --accent:var(--brass);
  --btn-bg:var(--brass);
  --btn-ink:var(--stone-3);
  --field:#0C110F;
}
:root[data-theme="dark"] .band.opening,
:root[data-theme="dark"] .band.process,
:root[data-theme="dark"] .band.contact,
:root[data-theme="dark"] .mast{--bg:#1A2320;--bg-2:#222C28}
:root[data-theme="dark"] footer{--bg:#0B100E}

*{box-sizing:border-box}
/* the form panels toggle with the hidden attribute, which any author
   display rule (.actions is flex) would otherwise beat */
[hidden]{display:none !important}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background:var(--bg);color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:17px;font-weight:400;line-height:1.6;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ------------------------------ type ------------------------------
   One family. Headings go wide and light (wdth 118, weight 300), the
   way a spec plate or a hardware stamp is set; body stays at normal
   width. The width change, not a second typeface, is the contrast.
   ------------------------------------------------------------------ */
h1,h2,h3{
  margin:0;color:var(--ink);
  font-weight:300;font-stretch:118%;font-variation-settings:"wdth" 118;
  line-height:1.04;letter-spacing:-.022em;text-wrap:balance;
}
h1{font-size:clamp(40px,5vw,74px);letter-spacing:-.035em;line-height:1}
h2{font-size:clamp(34px,4.3vw,62px);margin:0 0 .5em;max-width:16ch}
h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.012em}
p{margin:0 0 1em;max-width:58ch;text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.22em;text-decoration-thickness:1px;transition:text-decoration-color .3s ease,color .3s ease}
a:hover{text-decoration-color:var(--accent)}
strong,b{font-weight:600}
.lede{font-size:clamp(19px,1.5vw,22px);line-height:1.5;color:var(--soft);max-width:44ch}
.body-sm{color:var(--soft);max-width:52ch}
.muted{color:var(--soft)}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------------------------- buttons ---------------------------- */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:999px;
  font:inherit;font-size:16px;font-weight:550;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s var(--ease);
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink)}
.btn-primary:hover{background:color-mix(in srgb,var(--btn-bg) 86%,var(--ink))}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px}
.cta-note{margin-top:16px;font-size:15px;color:var(--soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.btn:focus-visible{border-radius:999px}

/* ===================================================================
   THE BAND
   ==================================================================== */
.band{
  position:relative;
  display:grid;
  grid-template-columns:var(--l,1fr) var(--r,1fr);
  gap:var(--gap);
  align-items:center;
  padding:var(--pad) var(--px);
  background:var(--bg);color:var(--ink);
  scroll-margin-top:var(--mast-h);
}
.col-l{grid-column:1;grid-row:1;min-width:0}
.col-r{grid-column:2;grid-row:1;min-width:0}

.band.opening   {--l:minmax(0,1.08fr);--r:minmax(0,.92fr);padding-top:clamp(36px,5vw,72px);padding-bottom:clamp(56px,7vw,104px);min-height:calc(100svh - var(--mast-h) - 36px)}
.band.specialism{--l:minmax(0,.9fr); --r:minmax(0,1.1fr)}
.band.kitchens  {--l:minmax(0,1.05fr);--r:minmax(0,.95fr);background:var(--bg-2)}
.band.bathrooms {--l:minmax(0,.95fr);--r:minmax(0,1.05fr);background:var(--bg-2);padding-top:0}
.band.process   {--l:minmax(0,1fr);  --r:minmax(0,1fr)}
.band.proof     {--l:minmax(0,1fr);  --r:minmax(0,1fr)}
.band.about     {--l:minmax(0,1.1fr);--r:minmax(0,.9fr);background:var(--bg-2)}
.band.contact   {--l:minmax(0,.8fr); --r:minmax(0,1.2fr);align-items:start}

/* --------------------------- photographs --------------------------- */
.plate{position:relative;margin:0;border-radius:var(--r-img);overflow:hidden;background:var(--bg-2)}
.plate img{display:block;width:100%;height:100%;object-fit:cover}
.r43{aspect-ratio:4/3}.r45{aspect-ratio:4/5}.r32{aspect-ratio:3/2}.r169{aspect-ratio:16/9}
.plate-cap,.plate .cap{
  display:block;margin-top:12px;font-size:14px;color:var(--soft);
}
/* a plate whose caption sits beneath it is a figure, not a clipped box */
figure.has-cap{margin:0}
figure.has-cap .plate{margin-bottom:0}

/* ===================================================================
   OPENING · the arch
   ==================================================================== */
.opening h1{margin:0 0 28px;max-width:14ch}
.opening .lede{color:var(--soft)}
.opening .hero-meta{margin-top:22px;font-size:15px;color:var(--soft)}
.opening .hero-meta span{color:var(--ink)}

.arch{position:relative;margin:0;justify-self:end;width:min(100%,470px)}
/* the clear band of sky: a brass ring standing just off the arch, fading
   out down its sides. Padding, not an offset box, keeps the two curves
   parallel because both radii are taken from near-identical boxes. */
.arch-ring{
  position:relative;padding:14px;
  border-radius:50% 50% 14px 14px / 31% 31% 14px 14px;
}
.arch-ring::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--brass) 60%,transparent);
  -webkit-mask:linear-gradient(#000 0 45%,transparent 85%);mask:linear-gradient(#000 0 45%,transparent 85%);
}
.arch-frame{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:50% 50% 6px 6px / 30% 30% 6px 6px;
  background:var(--bg-2);
}
.arch-frame img{display:block;width:100%;height:100%;object-fit:cover}
.arch figcaption{margin-top:4px;padding-left:14px;font-size:14px;color:var(--soft)}

/* the one page-load moment: the photograph rises into its arch */
@media (prefers-reduced-motion:no-preference){
  .opening .arch-frame{animation:arch-open 1.4s var(--ease) both .15s}
  .opening .arch-frame img{animation:arch-settle 1.8s var(--ease) both .15s}
  .opening .arch-ring::before{animation:fade 1.2s ease both .9s}
  .opening .col-l > *{animation:rise .9s var(--ease) both}
  .opening .col-l > :nth-child(2){animation-delay:.08s}
  .opening .col-l > :nth-child(3){animation-delay:.16s}
  .opening .col-l > :nth-child(4){animation-delay:.24s}
}
@keyframes arch-open{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes arch-settle{from{transform:scale(1.12)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ===================================================================
   SPECIALISM
   ==================================================================== */
.specialism h2{max-width:13ch}
.specialism .col-r p{font-size:clamp(18px,1.4vw,20px);color:var(--soft);max-width:46ch}

/* ===================================================================
   KITCHENS / BATHROOMS · the price ledger
   ==================================================================== */
.tiers{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line)}
.tiers li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"name when" "fig fig" "what what";
  column-gap:20px;padding:22px 0;border-bottom:1px solid var(--line);
}
.tier-body{display:contents}
.tier-name{grid-area:name;font-weight:600;font-size:17px}
.tier-when{grid-area:when;font-size:14.5px;color:var(--soft);white-space:nowrap;align-self:baseline}
.tier-figure{
  grid-area:fig;margin:6px 0 4px;
  font-weight:300;font-stretch:118%;font-variation-settings:"wdth" 118;
  font-size:clamp(26px,2.4vw,34px);letter-spacing:-.025em;line-height:1.1;
  font-variant-numeric:tabular-nums lining-nums;color:var(--ink);
}
.tier-figure span{color:var(--soft);font-size:.62em;letter-spacing:-.01em;margin-left:.35em}
.tier-what{grid-area:what;color:var(--soft);font-size:15.5px;max-width:52ch}

/* ===================================================================
   OUR WORK · an uneven wall of photographs
   ==================================================================== */
.band.work{grid-template-columns:minmax(0,1fr);row-gap:clamp(32px,4vw,56px)}
.band.work .col-l{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 40px}
.band.work .col-r{grid-column:1;grid-row:2}
.band.work h2{margin:0}
.band.work .col-l p{color:var(--soft);max-width:38ch}
.cards{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:clamp(160px,17vw,250px);
  gap:clamp(14px,1.8vw,24px);
}
.cards figure{margin:0;display:flex;flex-direction:column;min-height:0;grid-column:span 4}
.cards figure:nth-child(1){grid-column:span 8;grid-row:span 2}
.cards figure:nth-child(2),.cards figure:nth-child(3){grid-column:span 4}
.cards .plate{flex:1 1 auto;min-height:0;aspect-ratio:auto}
.cards figcaption{display:flex;justify-content:space-between;gap:12px;padding-top:10px;font-size:14.5px}
.cards figcaption .t{font-weight:550;color:var(--ink)}
.cards figcaption .meta{color:var(--soft);white-space:nowrap}
/* each photograph eases in a touch on hover: a reply to the pointer */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .cards .plate img{transition:transform .9s var(--ease)}
  .cards figure:hover .plate img{transform:scale(1.035)}
}

/* ===================================================================
   PROCESS · on soapstone, a real sequence, so it is numbered
   ==================================================================== */
.steps{list-style:none;margin:40px 0 0;padding:0;counter-reset:step}
.steps li{
  counter-increment:step;position:relative;
  display:grid;grid-template-columns:52px 1fr;column-gap:18px;
  padding:0 0 30px;
}
.steps li::before{
  content:counter(step);grid-row:span 2;
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);
  color:var(--accent);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;
  background:var(--bg);position:relative;z-index:1;
}
.steps li:not(:last-child)::after{
  content:"";position:absolute;left:20px;top:44px;bottom:4px;width:1px;background:var(--line);
}
.steps b{font-weight:550;font-size:19px;padding-top:7px}
.steps .when{color:var(--soft);font-size:16px;max-width:44ch}
.process .plate{aspect-ratio:4/5}

/* ===================================================================
   PROOF · the record
   ==================================================================== */
.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;margin:40px 0 0;border-top:1px solid var(--line);
}
.stats div{padding:24px 0 22px;border-bottom:1px solid var(--line)}
.stats div:nth-child(odd){padding-right:20px;border-right:1px solid var(--line)}
.stats div:nth-child(even){padding-left:24px}
.stats dt{
  font-weight:250;font-stretch:118%;font-variation-settings:"wdth" 118;
  font-size:clamp(48px,5vw,76px);line-height:1;letter-spacing:-.04em;
  font-variant-numeric:lining-nums;color:var(--ink);
}
.stats dd{margin:10px 0 0;color:var(--soft);font-size:15.5px}

/* ===================================================================
   ABOUT
   ==================================================================== */
.about .role{margin:-6px 0 22px;color:var(--accent);font-weight:550}

/* ===================================================================
   CONTACT · the form is a raised limewash card on soapstone
   ==================================================================== */
.contact .col-l{position:sticky;top:calc(var(--mast-h) + 32px)}
.contact h2{max-width:10ch}
.contact .promise{list-style:none;margin:32px 0 0;padding:0;color:var(--soft)}
.contact .promise li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15.5px}
.contact .promise li:last-child{border-bottom:1px solid var(--line)}
.contact .promise b{color:var(--ink);font-weight:550;min-width:5.5em}

.form-wrap{
  /* the card re-points the tokens back to limewash */
  --bg:var(--lime);--bg-2:var(--lime-2);
  --ink:var(--ink-on-lime);--soft:var(--soft-on-lime);
  --line:rgba(19,26,24,.14);--accent:var(--brass-deep);
  --btn-bg:var(--stone);--btn-ink:var(--ink-on-stone);
  color-scheme:light;
  background:var(--bg);color:var(--ink);
  border-radius:var(--r-card);
  padding:clamp(22px,3.4vw,44px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 80px -40px rgba(0,0,0,.55);
}
:root[data-theme="dark"] .form-wrap{
  --bg:#151D1A;--bg-2:#1D2622;--ink:#E9ECE6;--soft:#9DA8A2;
  --line:rgba(233,236,230,.13);--accent:var(--brass);
  --btn-bg:var(--brass);--btn-ink:var(--stone-3);color-scheme:dark;
}

.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
.field{min-width:0}
.field.span,.fset{grid-column:1/-1}
.fset{border:0;padding:0;margin:0;min-width:0}
.fset legend{padding:0}
.field-label{display:block;margin-bottom:10px;font-size:15px;font-weight:550;color:var(--ink)}
.req{color:var(--soft);font-weight:400}
.hint{display:block;margin:-4px 0 12px;font-size:14.5px;color:var(--soft);max-width:52ch}
.ctrl{
  width:100%;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);
  background:var(--field);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;transition:border-color .25s ease,box-shadow .25s ease;
}
:root[data-theme="dark"] .form-wrap .ctrl{background:#0C110F}
.ctrl:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.ctrl:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
textarea.ctrl{resize:vertical;min-height:112px}

/* the room choice is a segmented control built from real radios */
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice label{
  display:flex;align-items:center;justify-content:center;min-height:50px;
  border:1px solid var(--line);border-radius:12px;background:var(--field);
  font-weight:500;cursor:pointer;transition:border-color .25s ease,background-color .25s ease,color .25s ease;
}
:root[data-theme="dark"] .form-wrap .choice label{background:#0C110F}
.choice label:hover{border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.choice input:checked + label{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.choice input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}

/* ---- the photo drop: empty, then a grid of what will be sent ---- */
.drop{position:relative;border-radius:16px}
.drop-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:168px;padding:24px;text-align:center;cursor:pointer;
  border:1.5px dashed color-mix(in srgb,var(--ink) 24%,transparent);border-radius:16px;
  background:var(--bg-2);transition:border-color .25s ease,background-color .25s ease;
}
.drop-empty:hover,.drop[data-drag="true"] .drop-empty{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--bg-2))}
.drop-empty svg{width:30px;height:30px;margin-bottom:6px;fill:none;stroke:var(--soft);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.drop-title{font-weight:550}
.drop-title u{text-decoration-color:var(--accent);text-underline-offset:.2em}
.drop-sub{font-size:14px;color:var(--soft)}
.drop:has(input:focus-visible) .drop-empty,
.drop:has(input:focus-visible) .thumb-add{outline:2px solid var(--accent);outline-offset:3px}
.drop[data-count]:not([data-count="0"]) .drop-empty{display:none}
.drop[data-drag="true"]{outline:2px dashed var(--accent);outline-offset:4px}

.thumbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.thumbs[hidden]{display:none}
.thumb{position:relative;margin:0;min-width:0}
.thumb-img{
  position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--bg-2);
}
.thumb-img img{display:block;width:100%;height:100%;object-fit:cover}
.thumb-img .no-preview{
  position:absolute;inset:0;display:grid;place-items:center;padding:10px;text-align:center;
  font-size:12.5px;color:var(--soft);
}
.thumb-name{display:block;margin-top:6px;font-size:12.5px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb-remove{
  position:absolute;top:6px;right:6px;width:30px;height:30px;padding:0;
  display:grid;place-items:center;border-radius:50%;border:0;cursor:pointer;
  background:rgba(19,26,24,.72);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .2s ease,transform .2s ease;
}
.thumb-remove:hover{background:rgba(19,26,24,.92);transform:scale(1.06)}
.thumb-remove svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.thumb-add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  aspect-ratio:1;border-radius:12px;cursor:pointer;text-align:center;
  border:1.5px dashed color-mix(in srgb,var(--ink) 24%,transparent);
  color:var(--soft);font-size:13.5px;font-weight:500;
  transition:border-color .25s ease,color .25s ease;
}
.thumb-add:hover{border-color:var(--accent);color:var(--ink)}
.thumb-add svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none}
@media (prefers-reduced-motion:no-preference){
  .thumb{animation:thumb-in .45s var(--ease) both}
}
@keyframes thumb-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.photo-status{margin:10px 0 0;font-size:14.5px;color:var(--soft);min-height:1.5em}
.photo-status[data-tone="warn"]{color:#9A3B23}
:root[data-theme="dark"] .photo-status[data-tone="warn"]{color:#E39B7E}

.form-wrap .actions{margin-top:28px}
.form-wrap .btn-primary{width:100%;min-height:56px;font-size:16.5px}
.form-wrap .cta-note{text-align:center;margin:14px auto 0;max-width:46ch}

.err{margin:8px 0 0;font-size:14.5px;font-weight:500;color:#9A3B23}
:root[data-theme="dark"] .err{color:#E39B7E}
.ctrl[aria-invalid="true"]{border-color:#9A3B23}
.fset[data-invalid="true"] .choice label{border-color:#9A3B23}
.err-summary{
  margin:0 0 24px;padding:16px 18px;border-radius:14px;
  border:1px solid color-mix(in srgb,#9A3B23 45%,transparent);
  background:color-mix(in srgb,#9A3B23 6%,var(--bg));
}
.err-summary h3{font-size:16px;font-weight:600;font-stretch:100%;font-variation-settings:"wdth" 100;letter-spacing:0;margin:0 0 6px}
.err-summary ul{margin:0;padding-left:18px;font-size:15px}

/* ------------------- the reply panel ------------------- */
/* focused by script so it is announced, not as a control, so no ring */
.success:focus,.err-summary:focus{outline:none}
.success h3{margin:0 0 12px;font-size:clamp(28px,2.8vw,38px)}
.success p{color:var(--soft)}
.success .label{display:block;font-size:14px;font-weight:550;color:var(--accent);margin-bottom:10px}
.sent{list-style:none;margin:22px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.sent[hidden]{display:none}
.sent li{position:relative;width:76px;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--bg-2)}
.sent img{display:block;width:100%;height:100%;object-fit:cover}
/* while the photographs are being read, a band of light passes over them */
.success[data-reading="true"] .sent li::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  background-size:250% 100%;animation:read 1.5s ease-in-out infinite;
}
.success[data-reading="true"] .sent li:nth-child(2)::after{animation-delay:.15s}
.success[data-reading="true"] .sent li:nth-child(3)::after{animation-delay:.3s}
.success[data-reading="true"] .sent li:nth-child(4)::after{animation-delay:.45s}
@keyframes read{from{background-position:150% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.success[data-reading="true"] .sent li::after{animation:none;background:rgba(255,255,255,.25)}}

.estimate{
  margin-top:24px;padding:22px 24px;border-radius:16px;
  background:var(--stone);color:var(--ink-on-stone);
}
.estimate p{margin:0;max-width:none}
.estimate .estimate-head{font-size:14.5px;color:var(--soft-on-stone)}
.estimate .estimate-range{
  margin-top:6px !important;color:var(--ink-on-stone);
  font-weight:300;font-stretch:118%;font-variation-settings:"wdth" 118;
  font-size:clamp(30px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;
}
.estimate .estimate-weeks{margin-top:8px !important;font-size:15.5px;color:var(--brass)}
.saw{margin-top:22px}
.saw ul{list-style:none;margin:10px 0 0;padding:0}
.saw li{padding:9px 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--soft)}
.estimate-note{margin-top:18px !important;font-size:14.5px;color:var(--soft)}
.ignored-note{margin-top:14px !important;font-size:15px;color:var(--soft)}

/* --------------------------- demo bar --------------------------- */
.demo-bar{background:var(--stone-3);color:#A9B4AE}
.demo-bar p{margin:0 auto;padding:9px var(--gutter);max-width:none;text-align:center;font-size:13px}

/* --------------------------- masthead --------------------------- */
.mast{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);color:var(--ink);
}
.mast-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:14px var(--gutter);
}
.wordmark{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.wordmark svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--brass);stroke-width:1.4}
.wordmark .name{
  font-weight:500;font-stretch:125%;font-variation-settings:"wdth" 125;
  font-size:17px;letter-spacing:-.01em;line-height:1.1;
}
.wordmark .sub{display:block;font-size:12.5px;color:var(--soft);font-stretch:100%;font-variation-settings:"wdth" 100;letter-spacing:0;font-weight:400}
.mast nav{margin-left:auto}
.mast nav ul{list-style:none;display:flex;gap:clamp(14px,2vw,30px);margin:0;padding:0}
.mast nav a{font-size:15px;color:var(--soft);text-decoration:none;padding:6px 0;position:relative;transition:color .25s ease}
.mast nav a:hover,.mast nav a[aria-current]{color:var(--ink)}
.mast nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.mast nav a[aria-current]::after{transform:scaleX(1)}
.menu-btn{display:none}
/* the masthead button covers this until there is no room for it */
.mast nav .nav-cta{display:none}

/* ---------------------------- footer ---------------------------- */
footer{background:var(--stone-3);color:var(--soft);padding:clamp(56px,7vw,96px) var(--px) 40px;font-size:15px}
:root:not([data-theme="dark"]) footer{--bg:var(--stone-3)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:32px;padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.foot-top p{
  margin:0;max-width:16ch;color:var(--ink);
  font-weight:300;font-stretch:118%;font-variation-settings:"wdth" 118;
  font-size:clamp(30px,3.6vw,52px);line-height:1.05;letter-spacing:-.03em;
}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding:40px 0}
.foot-cols h2{font-size:14px;font-weight:550;font-stretch:100%;font-variation-settings:"wdth" 100;letter-spacing:0;color:var(--ink);margin:0 0 14px;line-height:1.4}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{padding:3px 0}
.foot-cols p{margin:0 0 10px;line-height:1.6}
.foot-cols a{color:var(--soft);text-decoration:none}
.foot-cols a:hover{color:var(--ink)}
.social{display:flex;gap:8px;margin-top:12px}
.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--soft);transition:border-color .25s ease,color .25s ease}
.social a:hover{border-color:var(--brass);color:var(--ink)}
.social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.social svg .solid{fill:currentColor;stroke:none}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;padding-top:24px;border-top:1px solid var(--line)}
.foot-base p{margin:0;max-width:70ch;font-size:13.5px}
.foot-base .name{color:var(--ink)}

/* ------------------------- theme toggle ------------------------- */
.theme-toggle{
  position:fixed;right:20px;bottom:20px;z-index:90;width:44px;height:44px;padding:0;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:var(--stone);color:var(--ink-on-stone);border:1px solid rgba(238,240,234,.16);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5);transition:transform .3s var(--ease);
}
.theme-toggle:hover{transform:scale(1.06)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-moon{display:none}
.theme-toggle[data-mode="dark"] .icon-sun{display:none}
.theme-toggle[data-mode="dark"] .icon-moon{display:block}

/* -------------------------- responsive -------------------------- */
@media (max-width:1020px){
  .mast nav{
    position:absolute;top:100%;left:0;right:0;margin:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 18px;
  }
  .mast nav[data-open="false"]{display:none}
  .mast nav ul{flex-direction:column;gap:0}
  .mast nav a{display:block;padding:12px 0;font-size:17px;border-bottom:1px solid var(--line)}
  .mast nav a::after{display:none}
  .menu-btn{
    display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    margin-left:auto;padding:0;border-radius:50%;border:1px solid var(--line);
    background:transparent;color:var(--ink);cursor:pointer;
  }
  .menu-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .band{display:flex;flex-direction:column;align-items:stretch;gap:clamp(32px,7vw,48px)}
  .band.opening{min-height:0}
  .band.bathrooms{padding-top:0}
  /* text before plate everywhere, whichever column it sat in */
  .band .col-l:has(.plate),.band .col-l:has(.arch){order:2}
  .arch{justify-self:auto;width:min(100%,460px);margin-inline:auto}
  .contact .col-l{position:static}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .cards figure,.cards figure:nth-child(n){grid-column:span 1;grid-row:auto}
  .cards figure:nth-child(1){grid-column:span 2}
  .cards .plate{aspect-ratio:4/3}
  .band.work .col-l{display:block}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .mast .btn{display:none}
  .mast nav .nav-cta{display:block}
  .mast nav .nav-cta a{color:var(--brass)}
  .wordmark .sub{display:none}
  .fields{grid-template-columns:1fr}
  .thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:1fr}
  .cards figure:nth-child(1){grid-column:auto}
  .cards figcaption{flex-direction:column;gap:0}
  .stats dt{font-size:44px}
  .foot-cols{grid-template-columns:1fr}
  .theme-toggle{right:14px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===================================================================
   WORDPRESS BLOCK-LAYOUT INTEGRATION
   Core marks every wp:group is-layout-flow (display:block), which would
   flatten each band's grid; desktop only, or it beats the stacked
   flex column below 900px.
   =================================================================== */
@media (min-width:901px){
  main.site-main > section.band{display:grid}
}
/* template parts emit a wrapper div, and sticky is confined to its
   parent, so the wrappers are taken out of the layout */
.site-head,.site-foot{display:contents}
main.site-main{display:block;margin:0}
.wp-site-blocks > *{margin-block:0}