/* ==========================================================================
   Elis Remodeling
   Dark, high-contrast, built around the chrome-on-black logo.
   The green on the supplied artwork was a chroma-key backdrop, not a brand
   colour, and appears nowhere here.
   ========================================================================== */

:root{
  /* ground */
  --ink:    #0b0d10;
  --ink-2:  #12151a;
  --ink-3:  #1a1f26;
  --ink-4:  #272e38;
  --ink-5:  #38414d;

  /* light block */
  --sand:   #f2efe9;
  --sand-2: #e4dfd5;
  --sand-3: #cfc8ba;

  /* accent */
  --fl:      #e4701e;
  --fl-hi:   #ff8b3d;
  --fl-ink:  #914409;   /* accent text on both light grounds, AA-safe on each */

  /* text */
  --tx:      #f7f8fa;
  --tx-mu:   #98a1ad;
  --tx-dk:   #14171c;
  --tx-dk-mu:#54606e;

  --ln:      rgba(247,248,250,.10);
  --ln-2:    rgba(247,248,250,.18);



  /* Panel blocks - the Work band and the Process band - follow the theme
     instead of being permanent cream. Black by default, white only when the
     viewer switches to light mode. */
  --panel-bg:    #0b0d10;
  --panel-bg-2:  #12151a;
  --panel-line:  #272e38;
  --panel-tx:    #f7f8fa;
  --panel-tx-mu: #98a1ad;
  --panel-accent:#e4701e;

  --bar-bg:  rgba(11,13,16,.55); /* the Free / 20+ / service-area stat bar */
  --on-media:    #f7f8fa;   /* text sitting ON dark media - the header ground and
                               the hero video - stays light in BOTH themes */
  --on-media-mu: #98a1ad;
  --hd-bg:   rgba(11,13,16,.93); /* header ground - deliberately dark in both
               themes: the logo is a white outline and vanishes on white */
  --scrim:   11,13,16;            /* hero scrim base, as r,g,b for rgba() */
  --hd-h-mobile: 168px;   /* tall header: 3x logo on its own row + controls */
  --fd: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ft: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1280px;
  --gut:  clamp(20px, 4vw, 60px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .45s;

  color-scheme: dark;
}

/* ---------- light theme ----------
   Dark is the default and lives in :root above. Light is an override keyed on
   data-theme, so no approved dark rendering shifts unless the viewer toggles. */
:root[data-theme="light"]{
  --ink:    #ffffff;
  --ink-2:  #f7f6f3;
  --ink-3:  #f0ece4;
  --ink-4:  #e2ddd2;
  --ink-5:  #cbc3b5;

  --sand:   #f7f5f1;
  --sand-2: #ece7dd;
  --sand-3: #d5cec1;

  --tx:      #16191f;
  --tx-mu:   #5b6470;
  --tx-dk:   #16191f;
  --tx-dk-mu:#5b6470;

  --ln:      rgba(22,25,31,.14);
  --ln-2:    rgba(22,25,31,.24);

  --panel-bg:    #ffffff;
  --panel-bg-2:  #ece7dd;
  --panel-line:  #d5cec1;
  --panel-tx:    #16191f;
  --panel-tx-mu: #5b6470;
  --panel-accent:#914409;

  --bar-bg:  #ffffff;            /* white, not a grey wash, in light mode */
  /* --on-media deliberately NOT overridden: the header ground stays dark */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--ink); color:var(--tx);
  font-family:var(--ft); font-size:clamp(15.5px,.32vw + 15px,16.8px);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; }
p{ margin:0 0 1.05em; } p:last-child{ margin-bottom:0; }

h1,h2,h3{
  font-family:var(--fd); margin:0;
  font-weight:800; font-stretch:115%;
  line-height:.98; letter-spacing:-.025em;
  text-transform:uppercase;
}
h1{ font-size:clamp(2.25rem,5.2vw,4.35rem); }
h2{ font-size:clamp(2.1rem,4.6vw,3.9rem); }
h3{ font-size:1.02rem; font-weight:700; font-stretch:110%; letter-spacing:.005em; text-transform:none; }
.fl{ color:var(--fl); }

.wrap{ width:min(100% - (var(--gut) * 2), var(--wrap)); margin-inline:auto; }

/* Grid and flex items default to min-width:auto, which lets a wide child blow
   its track past the container. Every layout track here opts out. */
.svc-grid > *, .est-in > *, .rev-in > *, .ft-grid > *, .steps > *,
.grid > *, .hero-bar > *, .sh-row > *, .contact > * > *{ min-width:0; }
.est-copy, .rev-main, .hero-in, .hero-copy{ min-width:0; }

.kicker{
  font-family:var(--ft); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fl);
  margin:0 0 1rem; display:flex; align-items:center; gap:.7rem;
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--fl); flex:none; }
/* the hero kicker runs without the leading rule */
.hero .kicker::before{ display:none; }

.sh{ margin-bottom:clamp(2.4rem,5vw,4rem); }
.sh-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem 3rem; flex-wrap:wrap; }
.sh-sub{ font-size:1.02rem; color:var(--tx-mu); max-width:44ch; }
.note{ margin-top:2rem; font-size:.84rem; color:var(--tx-mu); }
.muted{ color:var(--tx-mu); }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--fl); color:#150a02; padding:.8rem 1.2rem; font-weight:600; }
.skip:focus{ left:0; }
:where(a,button,input,select,textarea,.tile):focus-visible{ outline:2px solid var(--fl-hi); outline-offset:3px; }

.tbd{ border-bottom:1px dotted currentColor; text-decoration:none; cursor:help; opacity:.85; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:.9rem 1.7rem; white-space:nowrap;
  font-family:var(--fd); font-weight:700; font-stretch:110%;
  font-size:.88rem; letter-spacing:.055em; text-transform:uppercase;
  text-decoration:none; border-radius:2px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform .16s var(--ease);
}
.btn-lg{ min-height:58px; padding:1.05rem 2.1rem; font-size:.92rem; }
.btn-sm{ min-height:42px; padding:.55rem 1.1rem; font-size:.78rem; }
.btn-flame{ background:var(--fl); color:#fff; border:1px solid var(--fl); }
.btn-flame:hover{ background:var(--fl-hi); border-color:var(--fl-hi); color:#fff; }
.btn-line{ background:transparent; color:var(--tx); border:1px solid var(--ln-2); }
.btn-line:hover{ border-color:var(--tx); background:rgba(247,248,250,.06); }
.btn-block{ width:100%; }
.btn:active{ transform:translateY(1px); }

/* ---------- placeholders ---------- */
.ph{
  position:relative; margin:0; overflow:hidden; border-radius:2px;
  background:
    repeating-linear-gradient(-45deg, rgba(247,248,250,.028) 0 2px, transparent 2px 10px),
    linear-gradient(155deg, var(--ink-3), var(--ink-2));
  box-shadow:inset 0 0 0 1px var(--ink-4);
}
.ph::after{
  content:attr(data-label); position:absolute; inset:auto 8% 10%;
  max-width:84%; margin-inline:auto; overflow-wrap:anywhere;
  font-size:.64rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-mu); text-align:center;
}
/* A .ph carrying a real photograph keeps its aspect-ratio sizing but drops the
   placeholder gradient, crosshair and label. */
.ph.has-img{ background:none; }
.ph.has-img::before,
.ph.has-img::after{ content:none; }
.ph.has-img img{ width:100%; height:100%; object-fit:cover; display:block; }

.ph::before{
  content:""; position:absolute; left:50%; top:44%; width:24px; height:24px; margin:-12px 0 0 -12px;
  border:1px solid var(--ink-5); border-radius:50%;
  background:
    linear-gradient(to bottom, transparent 47%, var(--ink-5) 47% 53%, transparent 53%),
    linear-gradient(to right,  transparent 47%, var(--ink-5) 47% 53%, transparent 53%);
}

/* ==========================================================================
   Header
   ========================================================================== */
.hd{ position:fixed; inset:0 0 auto; z-index:90; border-bottom:1px solid transparent;
     transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hd.stuck{ background:var(--hd-bg); backdrop-filter:blur(10px); border-bottom-color:var(--ln); }
.hd-in{
  width:min(100% - (var(--gut) * 2), var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; gap:1.4rem;
  padding-block:clamp(.85rem,1.5vw,1.3rem); transition:padding var(--dur) var(--ease);
}
.hd.stuck .hd-in{ padding-block:.6rem; }
/* The logo is centred over the hero kicker beneath it. Both start at the gutter,
   so the offset is half the difference in their widths: (304 - 210) / 2. */
/* Three tracks with equal 1fr flanks, so the middle group sits on the true
   centre of the header regardless of how wide the brand or the actions are.
   Before this the nav sat 96px right of centre, pushed there by the action
   group's width. */
.hd-in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.hd-mid{ display:flex; align-items:center; gap:1.8rem; justify-self:center; }
.hd-mid .nav ul{ gap:1.8rem; }   /* same gap between every item, phone included */
.brand{ justify-self:start; }

/* The header mark is the rotating 3D logo. Same 3:1 box as the PNG it replaced,
   so every width rule above still governs it. The static PNG stays in the markup
   for anyone who asked not to be shown motion. */
.brand-static{ display:block; }
.brand-spinwrap{ display:none; }
/* The wrapper is the same 3:1 box the static PNG occupied, so every width rule
   above still sets the header's layout. The clip itself is deliberately wider and
   taller than that box: perspective magnifies whichever end of the sign swings
   toward the camera, so it grows past its front-on footprint mid-turn and a frame
   cropped to the front-on view clipped it. The surplus is transparent and simply
   overhangs. 104.7% is 1480/1414 - the clip's width over the front-on logo's -
   which lands the sign at exactly the static logo's size. */
.brand-spinwrap{ position:relative; aspect-ratio:3 / 1; overflow:visible; }
.brand-spin-c{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
               width:104.7%; height:auto; max-width:none; }
/* The source clip carries its own alpha matte stacked underneath the colour, and
   script.js recombines them onto the canvas above. The video itself is never shown -
   but it must stay rendered, not display:none, or iOS will not decode it. */
.brand-spin{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
             left:0; top:0; }
/* script.js adds .no-spin when the browser cannot play the clip, or plays it but
   ignores its alpha channel - which would put an opaque black box over the hero. */
/* FAIL-SAFE: the static PNG is what everyone gets. script.js adds .spin-ok only
   after it has proven, on a real decoded frame, that this browser honours the
   clip's alpha channel. Safari plays VP9 WebM but drops the alpha, and since the
   file stores straight alpha the gleam's colour channel is pure white - dropping
   alpha paints a white disc over the header. Never reveal the clip unproven. */
.spin-ok .brand-spinwrap{ display:block; }
.spin-ok .brand-static{ display:none; }
@media (prefers-reduced-motion: reduce){
  .brand-spinwrap{ display:none !important; }
  .brand-static{ display:block !important; }
}

.hd-act{ justify-self:end; }

.brand{ flex:none; line-height:0; margin-left:47px; }
.brand img, .brand-spinwrap{ width:277px; transition:width var(--dur) var(--ease); }
.hd.stuck .brand img, .hd.stuck .brand-spinwrap{ width:222px; }

.nav{ margin-left:auto; }
.nav ul{ display:flex; gap:clamp(1.1rem,2vw,2rem); list-style:none; margin:0; padding:0; }
.nav a{
  position:relative; text-decoration:none; padding-block:.4rem;
  font-family:var(--fd); font-size:.82rem; font-weight:600; font-stretch:110%;
  letter-spacing:.08em; text-transform:uppercase; color:var(--on-media);
}
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--fl); transition:right var(--dur) var(--ease); }
.nav a:hover::after{ right:0; }

.hd-act{ display:flex; align-items:center; gap:.85rem; }
.tel{
  font-family:var(--fd); font-size:.84rem; font-weight:700; font-stretch:110%;
  letter-spacing:.05em; text-decoration:none; white-space:nowrap; color:var(--on-media);
}
/* The header Free estimate button, called out specifically: white text and a
   larger size than the shared .btn-sm. Scoped to the header so the hero call to
   action keeps its own treatment. */
.hd-act .btn-flame{ font-size:.9rem; padding:.6rem 1.25rem; min-height:46px; }

.burger{ display:none; width:46px; height:46px; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.burger span{ display:block; width:22px; height:2px; background:var(--on-media); transition:transform var(--dur) var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; min-height:clamp(620px,94svh,940px); display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; }
.hero-media{ position:absolute; inset:0; overflow:hidden; z-index:-1; background:var(--ink-2); }
.hero-vid{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, var(--ink) 1%, rgba(11,13,16,.60) 30%, rgba(11,13,16,.12) 64%, rgba(11,13,16,.50)),
    linear-gradient(to right, rgba(11,13,16,.88) 8%, rgba(11,13,16,.06) 58%, rgba(11,13,16,.34));
}
.ph-badge{
  position:absolute; right:clamp(12px,2vw,20px); top:clamp(64px,9vw,104px);
  font-size:.6rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tx-mu); background:rgba(11,13,16,.6); border:1px solid var(--ln);
  padding:.4rem .65rem; border-radius:2px;
}

.hero-in{
  width:min(100% - (var(--gut) * 2), var(--wrap)); margin-inline:auto;
  padding-block:clamp(7rem,14vh,10rem) clamp(2.5rem,5vw,4rem);
}
h1 .l1, h1 .l2{ display:block; }
h1 .l1{ color:var(--tx-mu); font-stretch:100%; font-weight:600; font-size:.46em; letter-spacing:.03em; margin-bottom:.5rem; }
.hero-sub{ margin:1.6rem 0 2.4rem; font-size:clamp(1.02rem,.45vw + .94rem,1.2rem); color:var(--tx-mu); max-width:47ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; }

.hero-bar{
  position:relative; list-style:none; margin:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--ln); background:var(--bar-bg); backdrop-filter:blur(6px);
  padding-inline:max(0px, calc((100% - var(--wrap)) / 2 + var(--gut) - clamp(1rem,3vw,2.2rem)));
}
.hero-bar li{
  padding:1.1rem clamp(1rem,3vw,2.2rem);
  display:flex; flex-direction:column; gap:.1rem; justify-content:center;
  border-left:1px solid var(--ln);
}
.hero-bar li:first-child{ border-left:0; }
.hb-k{ font-family:var(--fd); font-size:1.4rem; font-weight:800; font-stretch:115%; line-height:1; letter-spacing:-.01em; }
.hb-v{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-mu); }
.hb-cta a{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--fd); font-weight:700; font-stretch:110%; font-size:.86rem; letter-spacing:.07em; text-transform:uppercase; color:var(--fl); text-decoration:none; }
/* inherits the link's orange via currentColor, so it tracks the accent */
.ph-ico{ width:1.05em; height:1.05em; flex:none; }

/* ==========================================================================
   Services
   ========================================================================== */
.svc{ padding-block:clamp(4.5rem,9vw,4.5rem); }
.svc-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.svc-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ln); }
.svc-i{ border-bottom:1px solid var(--ln); }
.svc-b{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:1.3rem; width:100%; text-align:left; padding:1.55rem 0; }
.svc-n{ grid-column:1; grid-row:1 / span 3; font-family:var(--fd); font-size:.78rem; font-weight:700; letter-spacing:.08em; color:var(--ink-5); padding-top:.45rem; transition:color var(--dur) var(--ease); }
.svc-t{ grid-column:2; font-family:var(--fd); font-size:clamp(1.7rem,3vw,2.5rem); font-weight:800; font-stretch:115%; letter-spacing:-.025em; text-transform:uppercase; line-height:1; transition:color var(--dur) var(--ease); }
.svc-m{ grid-column:2; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-mu); margin-top:.5rem; }
.svc-d{ grid-column:2; font-size:.94rem; color:var(--tx-mu); margin-top:.7rem; max-width:52ch; display:none; }
.svc-i.is-on .svc-t, .svc-i.is-on .svc-n{ color:var(--fl); }
.svc-i.is-on .svc-d{ display:block; }
.svc-b:hover .svc-t{ color:var(--fl); }

.svc-stage{ position:sticky; top:6.5rem; aspect-ratio:4/5; }
.svc-stage .ph{ position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); }
.svc-stage .ph.is-on{ opacity:1; }
.stage-tag{
  position:absolute; left:0; bottom:0; z-index:2; background:var(--fl); color:#160a02;
  font-family:var(--fd); font-size:.76rem; font-weight:700; font-stretch:110%;
  letter-spacing:.12em; text-transform:uppercase; padding:.6rem 1.1rem;
}

/* ==========================================================================
   Pledge
   ========================================================================== */
.pledge{ background:var(--ink-2); border-block:1px solid var(--ln); padding-block:clamp(3.5rem,7vw,3.5rem); }
.pledge-in p{
  margin:0; font-family:var(--fd); font-weight:700; font-stretch:110%;
  font-size:clamp(1.5rem,3.4vw,2.9rem); line-height:1.14; letter-spacing:-.02em;
  text-transform:uppercase;
}

/* ==========================================================================
   Work — light block
   ========================================================================== */
.work{ background:var(--panel-bg); color:var(--panel-tx); padding-block:clamp(4.5rem,9vw,4.5rem); }
.work .kicker{ color:var(--panel-accent); }
.work .kicker::before{ background:var(--panel-accent); }
.work .note{ color:var(--panel-tx-mu); }
.work .ph{
  background:
    repeating-linear-gradient(-45deg, rgba(11,13,16,.030) 0 2px, transparent 2px 10px),
    linear-gradient(155deg, var(--panel-bg-2), var(--panel-line));
  box-shadow:inset 0 0 0 1px var(--panel-line);
}
.work .ph::after{ color:var(--panel-tx-mu); }
.work .ph::before{ border-color:var(--panel-line);
  background:
    linear-gradient(to bottom, transparent 47%, var(--panel-line) 47% 53%, transparent 53%),
    linear-gradient(to right,  transparent 47%, var(--panel-line) 47% 53%, transparent 53%); }

.chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{
  min-height:40px; padding:.45rem 1.05rem; border:1px solid var(--panel-line); color:var(--panel-tx); border-radius:2px;
  font-family:var(--fd); font-size:.76rem; font-weight:700; font-stretch:110%;
  letter-spacing:.09em; text-transform:uppercase;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover{ border-color:var(--panel-tx); }
.chip.is-on{ background:var(--panel-tx); border-color:var(--panel-tx); color:var(--panel-bg); }

.grid{ display:grid; grid-auto-flow:dense; grid-template-columns:repeat(auto-fill,minmax(min(100%,256px),1fr)); gap:clamp(.8rem,1.5vw,1.25rem); }
.tile{ position:relative; display:block; padding:0; text-align:left; align-self:start; }
.tile .ph{ width:100%; }
.tile[hidden]{ display:none; }
.w2{ grid-column:span 2; }
.r16 .ph{ aspect-ratio:16/10; }
.r34 .ph{ aspect-ratio:3/4; }
.r11 .ph{ aspect-ratio:1/1; }
.r43 .ph{ aspect-ratio:4/3; }
.cap{ display:flex; flex-direction:column; gap:.08rem; padding-top:.7rem; margin-top:.55rem; border-top:2px solid transparent; transition:border-color var(--dur) var(--ease); }
.cap strong{ font-family:var(--fd); font-size:.88rem; font-weight:700; font-stretch:110%; }
.cap em{ font-style:normal; font-size:.78rem; color:var(--panel-tx-mu); }
.tile:hover .cap{ border-top-color:var(--fl); }
.tile:hover .ph{ box-shadow:inset 0 0 0 1px var(--panel-tx); }

/* ==========================================================================
   Process
   ========================================================================== */
/* ---------- interlude between the gallery and Process ----------
   Sits in the gap that was already there, on the same panel background as the
   two sections either side so it reads as part of that run rather than a new
   band. */
.interlude{ background:var(--panel-bg); color:var(--panel-tx); text-align:center;
            padding-block:0; margin-block:-1rem -1.5rem; }
/* Its own padding is zero and it pulls up into the gallery's bottom padding and
   down into the Process section's top padding, so the black voids either side
   close without altering either neighbour's own spacing. */
.interlude-logo{ display:block; width:137px; height:auto; margin:0 auto; }

.proc{ background:var(--panel-bg); color:var(--panel-tx); padding-block:clamp(4rem,8vw,4rem); }
.proc .kicker{ color:var(--panel-accent); }
.proc .kicker::before{ background:var(--panel-accent); }
.proc .sh-sub{ color:var(--panel-tx-mu); }
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.2rem,2.5vw,2.2rem); }
.step{ border-top:2px solid var(--panel-accent); padding-top:1.1rem; }
.st-n{ display:block; font-family:var(--fd); font-size:.74rem; font-weight:700; letter-spacing:.12em; color:var(--fl-ink); margin-bottom:.7rem; }
.step h3{ margin-bottom:.4rem; }
.step p{ margin:0; font-size:.92rem; color:var(--panel-tx-mu); }

/* ==========================================================================
   Reviews
   ========================================================================== */
.rev{ padding-block:clamp(4.5rem,9vw,8rem); }
.rev-in{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.quote{ margin:0; }
.quote p{
  font-family:var(--fd); font-weight:700; font-stretch:110%;
  font-size:clamp(1.3rem,2.5vw,2.1rem); line-height:1.22; letter-spacing:-.018em;
  margin-bottom:1.6rem; transition:opacity .3s var(--ease);
}
.quote.sw p{ opacity:0; }
.quote footer{ display:flex; flex-direction:column; gap:.05rem; padding-top:1.1rem; border-top:1px solid var(--ln); }
.quote cite{ font-style:normal; font-weight:600; font-size:.94rem; }
.quote footer span{ font-size:.8rem; color:var(--tx-mu); }
.rail{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--ln); }
.rb{ display:flex; flex-direction:column; gap:.02rem; width:100%; text-align:left; background:var(--ink); padding:.95rem 1.1rem; min-height:58px; border-left:2px solid transparent; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.rb strong{ font-size:.9rem; font-weight:600; }
.rb em{ font-style:normal; font-size:.78rem; color:var(--tx-mu); }
.rb:hover{ background:var(--ink-2); }
.rb.is-on{ border-left-color:var(--fl); background:var(--ink-2); }

/* ==========================================================================
   Estimate
   ========================================================================== */
.est{ background:var(--ink-2); border-top:1px solid var(--ln); padding-block:clamp(4.5rem,9vw,4.5rem); }
.est-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.88fr); gap:clamp(2.5rem,5vw,5rem); align-items:start; }
.est-copy h2{ margin-bottom:1.1rem; }
.contact{ margin:2.4rem 0 0; display:grid; gap:1px; background:var(--ln); border-block:1px solid var(--ln); }
.contact > div{ background:var(--ink-2); display:grid; grid-template-columns:7.5rem 1fr; gap:1rem; padding:.85rem 0; }
.contact dt{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-mu); }
.contact dd{ margin:0; font-weight:500; }

.form{ background:var(--ink); padding:clamp(1.5rem,3vw,2.3rem); border:1px solid var(--ln); border-radius:2px; }
.f{ margin-bottom:1.1rem; }
.f label{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-mu); margin-bottom:.45rem; }
.f .opt{ text-transform:none; letter-spacing:0; }
.f input, .f select, .f textarea{
  width:100%; min-height:50px; padding:.75rem .9rem; font:inherit; font-size:.95rem;
  color:var(--tx); background:var(--ink-2); border:1px solid var(--ink-4); border-radius:2px;
  transition:border-color var(--dur) var(--ease);
}
.f textarea{ min-height:auto; resize:vertical; }
.f select{ appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx-mu) 50%),linear-gradient(135deg,var(--tx-mu) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px, calc(100% - 13px) 22px;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.f input:focus, .f select:focus, .f textarea:focus{ border-color:var(--fl); }
.err{ margin:.35rem 0 0; font-size:.79rem; color:#ff9a6b; }
.f.bad input, .f.bad select{ border-color:#ff9a6b; }
.fnote{ margin:.9rem 0 0; font-size:.82rem; color:var(--tx-mu); }

/* ==========================================================================
   Footer
   ========================================================================== */
.ft{ background:var(--ink); border-top:1px solid var(--ln); padding-block:clamp(3rem,6vw,3.2rem) 1.8rem; }
.ft-grid{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(1.8rem,4vw,3rem); }
.ft-brand img{ width:228px; margin-bottom:1rem; }
.ft-brand p{ color:var(--tx-mu); font-size:.9rem; max-width:28ch; }
/* ---------- theme switch ----------
   A visible track with an orange handle, rather than a bare icon, so it reads as
   a control at a glance. Both icons sit in the track; the handle slides over. */
.theme-sw{
  display:inline-flex; align-items:center; flex:none; cursor:pointer;
  background:none; border:0; padding:0;
}
.sw-track{
  position:relative; display:inline-flex; align-items:center; justify-content:space-between;
  width:62px; height:32px; padding:0 7px; border-radius:999px;
  background:var(--ink-4); border:1px solid var(--ln-2);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-sw:hover .sw-track{ border-color:var(--fl); }
.theme-sw:focus-visible .sw-track{ outline:2px solid var(--fl); outline-offset:3px; }
.sw-i{ width:14px; height:14px; position:relative; z-index:2; pointer-events:none; }
.theme-sw{ color:var(--on-media); }
.sw-sun{ color:#ffd9a8; }
.sw-moon{ color:#c9d2de; }
.sw-handle{
  position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:var(--fl); box-shadow:0 1px 4px rgba(0,0,0,.45);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* dark is the default: handle rests left, over the moon */
:root[data-theme="light"] .sw-handle{ transform:translateX(30px); }
:root[data-theme="light"] .sw-track{ background:var(--sand-2); }
@media (prefers-reduced-motion: reduce){ .sw-handle{ transition:none; } }

.ft-social{ list-style:none; margin:1.1rem 0 0; padding:0; display:flex; gap:.6rem; }
.ft-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:2px;
  border:1px solid var(--ln-2); color:var(--tx-mu);
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.ft-social a:hover{ color:var(--fl); border-color:var(--fl); background:rgba(228,112,30,.08); }
/* Brand colours, and a lift on hover. Still placeholders: the click stays
   prevented by .tbd until the real URLs arrive. */
.ft-social a{ width:48px; height:48px; }
.ft-social a svg{ width:24px; height:24px; }
.soc-fb{ color:#fff; background:#1877F2; border-color:#1877F2; }
.soc-fb:hover{ color:#fff; background:#1877F2; border-color:#1877F2; }
.soc-tt{ color:#fff; background:#000; border-color:#000; }
.soc-tt:hover{ color:#fff; background:#000; border-color:#000; }
.ft-social a{ transition:transform .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.ft-social a:hover{ transform:scale(1.18); box-shadow:0 6px 18px rgba(0,0,0,.28); }
@media (prefers-reduced-motion: reduce){ .ft-social a:hover{ transform:none; } }
.ft-social a:focus-visible{ outline:2px solid var(--fl); outline-offset:2px; }
/* Awaiting the real URLs: keep the dotted marker the rest of the site uses for
   unverified detail, but on the border rather than a text underline. */
.ft-social a.tbd{ border-style:dotted; }

.ft-col h2{ font-family:var(--ft); font-size:.7rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--tx-mu); margin-bottom:1rem; }
.ft-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.62rem; font-size:.91rem; }
/* Grid items default to min-width:auto, so one unbreakable string - the client's
   email - pushed this track past its column and made the whole PAGE 437px wide at
   phone size. Safari then shrinks the page to fit, which is what made the hero
   video look small and left-shifted. Same trap as the .ft-grid rule further up. */
.ft-col ul > *{ min-width:0; }
.ft-col a, .ft-col li{ overflow-wrap:anywhere; }
.contact a[href^="mailto:"]{ overflow-wrap:anywhere; }
.ft-col a{ text-decoration:none; }
.ft-col a:hover{ color:var(--fl); }
/* Studio credit. Quiet by design: it identifies the builder without competing
   with the client's own copyright line above it. */
.credit{ color:var(--tx-mu); font-size:.78rem; letter-spacing:.02em; }
.credit strong{ font-weight:600; color:var(--tx); }

.ft-base{ display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between; margin-top:clamp(2.4rem,5vw,3.6rem); padding-top:1.4rem; border-top:1px solid var(--ln); }
.ft-base p{ margin:0; font-size:.78rem; color:var(--tx-mu); }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lb{ width:min(92vw,1000px); padding:clamp(1rem,2.5vw,1.5rem); border:1px solid var(--ln); border-radius:2px; background:var(--ink-2); color:var(--tx); }
.lb::backdrop{ background:rgba(4,5,7,.82); }
.lb-ph{ aspect-ratio:16/10; }
/* With a real photograph the tile's own shape should win, not a fixed 16:10 box
   that would letterbox a portrait shot. */
.lb-ph.has-img{ aspect-ratio:auto; max-height:78vh; display:flex; justify-content:center; }
.lb-ph.has-img img{ width:auto; height:auto; max-width:100%; max-height:78vh; object-fit:contain; }
.lb-cap{ margin:.9rem 0 0; font-family:var(--fd); font-weight:700; font-stretch:110%; font-size:.92rem; }
.lb-x{ position:absolute; top:.4rem; right:.4rem; width:44px; height:44px; font-size:1.7rem; line-height:1; display:flex; align-items:center; justify-content:center; }
.lb-x:hover{ color:var(--fl); }

/* ==========================================================================
   Motion
   ========================================================================== */
.js .reveal{ opacity:0; transform:translateY(16px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .65s var(--ease), transform .65s var(--ease); }

@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; }
  .js .reveal.in{ transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* ---------- desktop typography and rhythm ----------
   Scoped to 821px and up so the mobile scale, which the Owner has locked,
   cannot be touched by anything in here.

   Measured at 1440px before this: kickers, stat-bar labels, service meta and
   contact terms all rendered at 11.52px and footer headings at 11.2px. That is
   the same too-small type already fixed on phones. */
@media (min-width: 821px){
  .kicker{ font-size:.88rem; }
  .hb-v{ font-size:.84rem; }
  .svc-m{ font-size:.88rem; }
  .svc-n{ font-size:.88rem; }
  .svc-d{ font-size:1rem; }
  .stage-tag{ font-size:.86rem; }
  .chip{ font-size:.88rem; }
  .cap strong{ font-size:1rem; }
  .cap em{ font-size:.88rem; }
  .note{ font-size:.92rem; }
  .st-n{ font-size:.88rem; }
  .step p{ font-size:1rem; }
  .sh-sub{ font-size:1.02rem; }
  .contact dt{ font-size:.86rem; }
  .contact dd, .contact dd a{ font-size:1rem; }
  .f label{ font-size:.94rem; }
  .opt{ font-size:.86rem; }
  .fnote{ font-size:.92rem; }
  .ft-brand p{ font-size:.95rem; }
  .ft-col h2{ font-size:.84rem; }
  .ft-col ul{ font-size:.95rem; }
  .ft-base p{ font-size:.88rem; }
  .credit{ font-size:.86rem; }
  .nav a{ font-size:.88rem; }
  .tel{ font-size:.92rem; }

  /* The hero text sits ON the video here, so it must stay light whichever theme
     is on. Deliberately desktop-only: on phones the video is a band above the
     text and the copy sits on the page ground, where pinning it light would
     make it invisible the moment light mode is switched on. */
  .hero-in h1{ color:var(--on-media); }
  .hero-in h1 .l1{ color:var(--on-media-mu); }
  .hero-sub{ color:var(--on-media-mu); }
  .hero-cta .btn-line{ color:var(--on-media); border-color:rgba(247,248,250,.18); }
  .hero-cta .btn-line:hover{ color:var(--on-media); border-color:var(--on-media); background:rgba(247,248,250,.06); }

  /* The brand is indented 47px from the content gutter, so the hero block
     started 47px left of the logo and the two never lined up. The hero now
     carries the same indent, putting the logo directly above its text. */
  .hero-in{ padding-left:47px; }

  /* The stat bar sits directly on the services block, so 72px of padding above
     What we do read as a gap rather than a section start. */
  .svc{ padding-top:1.4rem; }
  .hb-cta a{ font-size:.946rem; }   /* 10% up from .86rem */

  /* Pack mixed photo shapes independently instead of making every item wait for
     the tallest tile in its row. The script measures each complete tile and
     assigns the matching one-pixel row span; the negative final gap keeps the
     grid's bookkeeping space from becoming a visible gap above the logo. */
  .grid{
    grid-auto-rows:1px;
    row-gap:0;
    margin-bottom:calc(-1 * clamp(.8rem,1.5vw,1.25rem));
  }

  /* The gallery, middle logo and Process share one ground. Give the 228px logo
     a small, even black gap above and below without changing phone spacing. */
  .work{ padding-bottom:0; }
  .interlude{ margin-block:0; padding-block:12px; }
  .interlude-logo{ width:228px; }
  .proc{ padding-top:0; }
}

@media (max-width: 1050px){
  .svc-grid{ grid-template-columns:1fr; }
  /* The service photographs used to be hidden below 1050px, which is why
     fencing, roofing, painting and remodel showed nothing on a phone. Keep them,
     stacked above the list, at a shape that suits a narrow screen. */
  .svc-stage{ display:block; position:relative; top:auto; aspect-ratio:16/10; order:-1; margin-bottom:1.6rem; }
  .svc-d{ display:block; }
  .rev-in, .est-in{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .ft-grid{ grid-template-columns:1fr 1fr; }
  .ft-brand{ grid-column:1 / -1; }
  .hero-bar{ grid-template-columns:1fr 1fr; }
  .hero-bar li:nth-child(3){ border-left:0; }
  .hero-bar li:nth-child(n+3){ border-top:1px solid var(--ln); }
}

@media (max-width: 820px){
  .nav{
    position:fixed; inset:0 0 auto; margin:0; z-index:0;
    background:var(--ink); padding:5.4rem var(--gut) 2rem; border-bottom:1px solid var(--ln);
    transform:translateY(-101%); transition:transform .42s var(--ease);
  }
  .nav.open{ transform:none; }
  .nav ul{ flex-direction:column; gap:0; }
  .nav a{ display:block; padding:1.05rem 0; border-bottom:1px solid var(--ln); font-size:1rem; color:var(--tx); }
  .nav a::after{ display:none; }
  .brand, .hd-act{ position:relative; z-index:2; }
  .brand{ margin-left:0; }   /* mobile header sits flush to the gutter */
  .burger{ display:flex; }
  .tel{ display:none; }
  .hd{ background:var(--hd-bg); border-bottom-color:var(--ln); }
  .brand img, .brand-spinwrap{ width:158px; }
  .hd.stuck .brand img, .hd.stuck .brand-spinwrap{ width:142px; }
  body.no-scroll{ overflow:hidden; }
  .w2{ grid-column:span 1; }
  .r16 .ph{ aspect-ratio:4/3; }
}

@media (max-width: 560px){
  /* Logo at 300% of its old 126px. Nothing else fits beside it at that size, so
     the header wraps and the brand gets a row to itself. */
  /* mobile is locked: display:contents removes the wrapper from layout so the
     header behaves exactly as it did before .hd-mid existed */
  .hd-mid{ display:contents; }
  .hd-in{ display:flex; flex-wrap:wrap; row-gap:.5rem; }
  /* logo doubled and centred on its own row; the controls sit centred beneath */
  .brand{ flex:1 1 100%; margin-left:0; display:flex; justify-content:center; }
  .brand img, .brand-spinwrap{ width:284px; max-width:100%; }
  .hd-act{ flex:1 1 100%; justify-content:center; }
  /* Unscrolled, the actions get their own full-width row under the logo, and the
     Boss wants them placed rather than bunched: burger hard left, button centred,
     toggle hard right. Three columns with equal 1fr outsides puts the middle
     column's centre on the row's centre, which is where the logo is centred too,
     so the button lines up under the logo rather than under the group. The DOM
     order is button, burger, toggle - explicit grid-column placement reorders them
     visually without touching the markup or the tab order. Not applied once stuck:
     that state is a single nowrap row and is already fitted. */
  .hd:not(.stuck) .hd-act{ display:grid; grid-template-columns:1fr auto 1fr;
                           align-items:center; width:100%; gap:.4rem; }
  .hd:not(.stuck) .hd-act .burger{ grid-area:1 / 1; justify-self:start; }
  .hd:not(.stuck) .hd-act .btn-flame{ grid-area:1 / 2; justify-self:center; }
  .hd:not(.stuck) .hd-act .theme-sw{ grid-area:1 / 3; justify-self:end; }
  /* Once scrolling starts the header stops wrapping and the logo drops back to a
     normal size, so a 3x logo does not eat a fifth of every screen. */
  .hd.stuck .hd-in{ flex-wrap:nowrap; }
  .hd.stuck .brand{ flex:0 1 auto; }
  .hd.stuck .brand img, .hd.stuck .brand-spinwrap{ width:150px; }
  .hd-in{ gap:.55rem; }
  .hd-act{ gap:.4rem; }
  .btn-sm{ min-height:38px; padding:.45rem .7rem; font-size:.68rem; letter-spacing:.04em; }
  /* Measured on a 414px handset, which is where the Boss found it. Stuck, the row
     is logo 150 + button + burger 40 + toggle 62 and the toggle overshot the screen
     by 43px. The button was 164px wide, so reducing it alone does close the gap at
     this width - it does NOT at 400px and below, which is why that block also
     shortens the label. Nothing else here moves: the logo keeps its size. */
  .hd-act .btn-flame{ font-size:.75rem; padding:.5rem .9rem; min-height:40px; }
  .hd.stuck .hd-act .btn-flame{ font-size:.62rem; padding:.38rem .58rem; min-height:34px; letter-spacing:.03em; }
  .hd.stuck .hd-in{ gap:.3rem; }
  .hd.stuck .hd-act{ gap:.25rem; }
  .burger{ width:40px; height:40px; }

  /* ---------- tighter vertical rhythm on phones ----------
     Measured at 390px before this: every major section carried 72px of padding
     top AND bottom, so 144px of dead space wherever two sections met, plus the
     stat bar's own 17.6px below the Call row. On a phone that reads as a stack
     of islands rather than one page. Halved, and the rows sit closer. */
  .svc, .est{ padding-block:2.6rem; }
  /* Pack the two phone columns independently so a short landscape image never
     leaves a row-height void beneath it. The final 1rem of work padding is
     cancelled by the interlude's existing -1rem top margin, placing the static
     logo directly after the last gallery tile. */
  .work{ padding-block:2.6rem 1rem; }
  .proc{ padding-block:2.4rem; }
  .interlude{ margin-bottom:-1rem; }
  .interlude-logo{ width:228px; }
  .pledge{ padding-block:2.1rem; }
  .ft{ padding-block:2.2rem 1.1rem; }
  .hero-in{ padding-block:1.2rem 1.6rem; }

  /* the stat rows were 1.1rem tall each and the last one left a gap under the
     Call row before the next section began */
  .hero-bar li{ padding-block:.72rem; }
  /* The Call row is a single item on its own line, so it centres on both axes
     with matched padding rather than sitting left-aligned with 16px on one side
     and 165px on the other. Measured before: 12.2px above, 14.4px below. */
  .hero-bar li.hb-cta{
    justify-content:center; align-items:center; text-align:center;
    padding-block:.95rem; padding-inline:1rem;
  }
  /* The row's padding is already equal at 15.2px each side, so the box is
     centred. But CALL (806) 202-8446 is all caps and digits with no
     descenders, so its ink sits in the upper part of the line box and reads
     high. A 2px optical nudge, not a layout change: `top` on a relative
     element moves the paint without altering the row's height. */
  .hb-cta a{ font-size:1.1rem; letter-spacing:.05em; position:relative; top:2px; }

  /* the Call row sits straight onto the services block below it */
  .svc{ padding-top:1.1rem; }

  /* section headers and their intros sat far apart at this width */
  .sh, .sh-row{ margin-bottom:1.4rem; }
  .sh-sub{ margin-top:.5rem; }
  .shots, .steps, .grid{ margin-top:1.2rem; }
  .svc-grid{ gap:1.4rem; }
  .svc-stage{ margin-bottom:1.1rem; }

  /* ---------- readable type on phones ----------
     Measured at 390px before this block: footer headings rendered at 9.9px,
     kickers, stat-bar labels, service meta and the contact terms at 11.5px, and
     most captions and labels at 12.5px. All of that is below what anyone can
     comfortably read at arm's length. Nothing here leaves the mobile query, so
     the approved desktop scale is untouched. */
  .kicker{ font-size:.88rem; letter-spacing:.14em; }
  .hb-v{ font-size:.9rem; letter-spacing:.1em; }
  .hb-k{ font-size:1.25rem; }
  .svc-m{ font-size:.88rem; letter-spacing:.06em; }
  .svc-n{ font-size:.88rem; }
  .svc-d{ font-size:1rem; }
  .stage-tag{ font-size:.9rem; }
  .chip{ font-size:.9rem; min-height:44px; padding:.5rem 1.15rem; }
  .cap strong{ font-size:1rem; }
  .cap em{ font-size:.9rem; }
  .note{ font-size:.9rem; }
  .st-n{ font-size:.88rem; }
  .step h3{ font-size:1.08rem; }
  .step p{ font-size:1rem; }
  .sh-sub{ font-size:1rem; }
  .contact dt{ font-size:.9rem; letter-spacing:.1em; }
  .contact dd, .contact dd a{ font-size:1rem; }
  .f label{ font-size:.95rem; }
  .opt{ font-size:.88rem; }
  .fnote{ font-size:.9rem; }
  .ft-brand p{ font-size:.95rem; }
  .ft-base p{ font-size:.9rem; }
  .ft-base .muted{ font-size:.88rem; }
  .credit{ font-size:.86rem; }

  /* long uppercase words overrun a 335px column, so let headings rewrap freely */
  h2{ font-size:clamp(1.7rem,6.6vw,2.3rem); font-stretch:108%; }
  h2 br, h1 .l2 br, .pledge-in p br{ display:none; }
  .pledge-in p .fl{ display:block; }

  /* The loop is 3:2. Behind a full-height hero, `cover` cropped most of it away.
     On a phone it becomes a band in normal flow at the video's own shape, so the
     whole frame is visible and it takes far less of the screen. */
  .hero{ min-height:auto; padding-top:var(--hd-h-mobile); }
  .hero-media{ position:relative; inset:auto; z-index:0; aspect-ratio:10/7; background:var(--ink); }
  /* The extra pixel is deliberate. A fractional box height leaves the last row a
     partial pixel, which composites the video against the dark backing behind it and
     draws as a fine line along the bottom edge. Overhanging by 1px and clipping it
     removes that row entirely. */
  .hero-vid{ object-fit:cover; height:calc(100% + 1px); }
  .hero-scrim{ background:linear-gradient(to top, var(--ink) 2%, rgba(var(--scrim),.30) 46%, rgba(var(--scrim),.08)); }
  .hero-in{ padding-block:1.4rem 2.5rem; }
  .hero-cta .btn{ flex:1 1 100%; }
  .hero-bar{ grid-template-columns:1fr; }
  /* key and value share a row, but a long value like the service area needs to
     be allowed to drop to its own line rather than both halves wrapping */
  .hero-bar li{ border-left:0; border-top:1px solid var(--ln); flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:flex-start; gap:.15rem .6rem; }
  .hero-bar li:first-child{ border-top:0; }
  .hb-k{ font-size:1.1rem; }
  .ph-badge{ display:none; }
  .steps{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr 1fr; }
  .contact > div{ grid-template-columns:1fr; gap:.1rem; }
  /* footer logo doubled and centred above the three columns */
  .ft-brand{ text-align:center; }
  .ft-brand img{ width:380px; max-width:100%; margin-inline:auto; }
  .ft-brand p{ margin-inline:auto; font-size:1.0925rem; }
  .ft-social{ justify-content:center; }
  /* Services, Company and Contact sit side by side rather than stacking */
  /* Contact gets the wider track: the phone number wrapped onto two lines at
     the larger, readable type size when all three columns were equal. */
  .ft-grid{ grid-template-columns:.9fr .95fr 1.15fr; gap:.9rem; }
  .ft-col ul a, .ft-col ul li{ overflow-wrap:normal; }
  /* ...but the email must still be allowed to break. Left unbreakable it forced
     its grid track past the column and made the whole page 437px wide here. */
  .ft-col ul a[href^="mailto:"]{ overflow-wrap:anywhere; }
  .ft-email-domain{ display:block; }
  .ft-brand{ grid-column:1 / -1; }
  .ft-col h2{ font-size:.88rem; letter-spacing:.1em; margin-bottom:.8rem; }
  .ft-col ul{ gap:.62rem; font-size:.94rem; }
  .ph::after{ inset:auto 6% 8%; font-size:.58rem; }
}

@media (min-width: 381px) and (max-width: 560px){
  /* One-pixel implicit rows let script.js assign each tile its measured height,
     preserving source order while independently packing the two columns. */
  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:1px;
    row-gap:0;
    column-gap:.8rem;
    margin-bottom:-.8rem;
  }
}

@media (max-width: 400px){
  .brand img, .brand-spinwrap{ width:252px; }
  .hd.stuck .brand img, .hd.stuck .brand-spinwrap{ width:112px; }
  .btn-sm{ padding:.4rem .6rem; font-size:.72rem; }
  .ft-col h2{ font-size:.84rem; }
  .ft-col ul{ font-size:.92rem; }
  .chip{ font-size:.88rem; padding:.5rem .95rem; }
  /* At 400px and below the row is tightest, so the stuck logo also comes down from
     132 to 112. With the smaller button that leaves the full label intact here too,
     with 16px of clearance. */
  .hd-act .btn-flame{ font-size:.7rem; padding:.42rem .7rem; min-height:36px; }
  /* 360px handsets had only 1px of clearance on the toggle at the 560-block size. */
  .hd.stuck .hd-act .btn-flame{ font-size:.57rem; padding:.34rem .52rem; min-height:32px; }
}

@media (max-width: 380px){
  .grid{ grid-template-columns:1fr; }
}