:root{
  --paper:#FDFCF7;
  --ink:#14110E;
  --muted:#6E675C;
  --ultramarine:#1B4D9B;
  --vermillion:#E63419;
  --chrome:#F5B914;
  --emerald:#12855A;
  --violet:#6B3FA0;
  --rose:#EE7A8C;

  --t-hero:clamp(2.4rem, 7.2vw, 6.2rem);
  --t-md:clamp(1rem, 1.7vw, 1.3rem);
  --t-body:clamp(0.94rem, 1.1vw, 1.08rem);
  --t-sm:clamp(0.8rem, 0.92vw, 0.9rem);
  --t-mono:clamp(0.62rem, 0.76vw, 0.72rem);

  --vermillion-t:#C62D14;   /* accessible tone for small text & text-bearing backgrounds */
  --shadow:0 30px 60px -28px rgba(20,17,14,.42);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--t-body);line-height:1.55;
  overflow-x:clip;
  display:flex;flex-direction:column;
  min-height:100dvh;
}
h1,h2,h3,h4{
  font-family:'Bodoni Moda','Didot','Times New Roman',serif;
  font-weight:600;line-height:.92;margin:0;text-wrap:balance;
}
p{margin:0;text-wrap:pretty;}
img{display:block;width:100%;height:100%;object-fit:cover;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--ultramarine);outline-offset:3px;border-radius:3px;}

.wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(20px,5vw,64px);width:100%;}

.spec{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;
  display:inline-block;
}

@keyframes place{
  from{opacity:0;transform:scale(.62) rotate(-10deg);}
  to{opacity:1;transform:scale(1) rotate(0deg);}
}
@keyframes drift{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(var(--dx,10px),var(--dy,-14px)) rotate(var(--dr,4deg));}
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@media (prefers-reduced-motion: no-preference){
  .slot{animation:place .9s cubic-bezier(.2,.85,.3,1) both;animation-delay:var(--d,0s);}
  .float{animation:drift var(--dur,11s) ease-in-out infinite;animation-delay:var(--d,0s);}
}

/* ---------- BRAND MARK (no nav bar) ---------- */
.nav{border-bottom:1px solid rgba(20,17,14,.08);flex-shrink:0;}
.nav-in{display:flex;align-items:center;gap:14px;padding-block:clamp(13px,2.2vw,18px);}
.nav-social{display:flex;gap:8px;margin-left:auto;}
.nav-social a{
  width:33px;height:33px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,17,14,.06);color:var(--ink);
  transition:background .2s,color .2s,transform .2s;
}
.nav-social a:hover{background:var(--vermillion);color:#fff;transform:translateY(-1px);}
.nav-social svg{width:15px;height:15px;}
.nav-cta{
  background:var(--vermillion-t);color:var(--paper);border:none;cursor:pointer;
  font-family:inherit;font-size:var(--t-sm);font-weight:700;white-space:nowrap;
  padding:10px 20px;border-radius:100px;transition:background .2s,transform .2s;
}
.nav-cta:hover{background:var(--vermillion);transform:translateY(-1px);}
@media (max-width:480px){
  .nav-in{gap:8px;}
  .mark{font-size:.95rem;}
  .nav-social{gap:5px;}
  .nav-social a{width:26px;height:26px;}
  .nav-social svg{width:12px;height:12px;}
  .nav-cta{padding:8px 13px;font-size:.72rem;}
}
@media (max-width:360px){
  .mark{font-size:.86rem;}
  .nav-cta{padding:7px 11px;font-size:.68rem;}
}
.mark{
  font-family:'Bodoni Moda',serif;font-size:clamp(1rem,1.7vw,1.3rem);
  font-weight:700;letter-spacing:.02em;text-decoration:none;white-space:nowrap;
}
.mark em{font-style:italic;color:var(--vermillion-t);}

/* ---------- STAGE (single view) ---------- */
.stage{flex:1 0 auto;display:flex;align-items:center;padding-block:clamp(14px,3vw,28px);}
.hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(20px,4vw,60px);align-items:center;width:100%;
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--paper);
  padding:7px 14px 7px 7px;border-radius:100px;margin-bottom:clamp(12px,2vw,18px);
}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--chrome);flex-shrink:0;animation:pulse 2.4s ease-in-out infinite;}
.badge span.spec{color:var(--paper);letter-spacing:.09em;}
.eyebrow{color:var(--vermillion-t);font-weight:700;display:block;margin-bottom:clamp(8px,1.4vw,14px);}
.hero-grid h1{font-size:var(--t-hero);letter-spacing:-.025em;}
.hero-grid h1 .l2{display:block;font-style:italic;font-weight:500;color:var(--vermillion);}
.hero-lede{
  margin-top:clamp(14px,2vw,22px);max-width:50ch;
  font-size:var(--t-md);color:var(--muted);
}
.hero-lede strong{color:var(--ink);font-weight:700;}
.artist-roster{
  margin-top:clamp(6px,1vw,10px);max-width:50ch;
  font-size:var(--t-sm);color:var(--muted);letter-spacing:.01em;line-height:1.38;
}
.hero-sub{
  margin-top:clamp(8px,1.2vw,12px);max-width:50ch;
  font-size:var(--t-body);color:var(--ink);font-weight:600;
}
.hero-sub .hours{font-weight:600;color:var(--ink);}
.hero-sub .hours strong{color:var(--vermillion-t);font-weight:700;}
.tel-link{color:var(--vermillion-t);font-weight:700;text-decoration:none;}
.tel-link:hover{text-decoration:underline;text-underline-offset:2px;}

/* Hero cut-paper composition */
.compo{position:relative;aspect-ratio:1/1;width:100%;max-width:460px;margin-inline:auto;}
.slot{position:absolute;inset:0;}
.float{width:100%;height:100%;}
.shape{position:absolute;}
.s-blue{width:62%;height:58%;left:-6%;top:4%;background:var(--ultramarine);border-radius:64% 36% 42% 58% / 52% 44% 56% 48%;}
.s-yellow{width:46%;height:44%;right:-4%;top:-2%;background:var(--chrome);border-radius:48% 52% 60% 40% / 58% 42% 58% 42%;}
.s-green{width:40%;height:38%;left:2%;bottom:-3%;background:var(--emerald);border-radius:52% 48% 38% 62% / 46% 58% 42% 54%;}
.s-rose{width:30%;height:28%;right:8%;bottom:6%;background:var(--rose);border-radius:58% 42% 54% 46% / 48% 56% 44% 52%;}
.hero-photo{
  position:absolute;width:66%;height:70%;left:17%;top:15%;
  overflow:hidden;box-shadow:var(--shadow);
  border-radius:56% 44% 48% 52% / 44% 52% 48% 56%;
  z-index:2;
}

/* ---------- CONTACT TAG — the "Get in Touch" bubble ---------- */
.contact-tag{
  position:absolute;z-index:3;right:-4%;bottom:0;
  background:var(--paper);padding:clamp(12px,1.8vw,16px);border-radius:20px;
  box-shadow:var(--shadow);text-align:center;
}
.contact-tag > .spec{color:var(--muted);display:block;margin-bottom:9px;}
.contact-row{display:flex;gap:8px;}
.cbtn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--ink);color:var(--paper);
  padding:10px 13px;border-radius:14px;text-decoration:none;
  transition:background .2s, transform .2s;min-width:58px;
}
.cbtn svg{width:19px;height:19px;}
.cbtn b{font-family:'Figtree',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.01em;}
.cbtn:hover{background:var(--vermillion-t);transform:translateY(-2px);}
.cbtn-mail{background:var(--ultramarine);color:#fff;}
.cbtn-mail:hover{background:var(--vermillion-t);}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .compo{order:-1;max-width:195px;}
  .stage{padding-block:2px;}
  .nav-in{padding-block:8px;}
  .hero-lede{margin-top:5px;}
  .artist-roster{margin-top:4px;}
  .hero-sub{margin-top:4px;font-size:var(--t-md);}
  .mini-foot{padding-block:6px;}
  .contact-tag{right:-6%;bottom:7%;padding:5px;border-radius:10px;}
  .contact-tag > .spec{display:none;}
  .contact-row{gap:4px;}
  .cbtn{padding:8px;border-radius:8px;min-width:0;gap:0;}
  .cbtn svg{width:16px;height:16px;}
  .cbtn b{display:none;}
}
@media (max-width:900px) and (min-height:760px){
  .compo{max-width:200px;}
}
@media (max-width:900px) and (max-height:759px){
  .compo{max-width:148px;}
  .badge{margin-bottom:8px;}
  .eyebrow{margin-bottom:4px;}
  .hero-lede{margin-top:4px;}
  .artist-roster{margin-top:3px;}
  .hero-sub{margin-top:3px;}
  .contact-tag{padding:3px;}
  .cbtn{padding:6px;}
  .cbtn svg{width:13px;height:13px;}
  :root{ --t-hero:clamp(1.9rem, 8vw, 3.2rem); --t-md:clamp(0.86rem,1.7vw,1.02rem); }
}
@media (max-width:900px) and (max-height:660px){
  .compo{max-width:98px;}
  .nav-in{padding-block:4px;}
  .mini-foot{padding-block:3px;}
  .mini-foot .wrap{padding-block:0;}
  .hero-lede{margin-top:2px;}
  .artist-roster{margin-top:1px;font-size:.74rem;line-height:1.25;}
  .hero-sub{margin-top:1px;}
  .eyebrow{margin-bottom:2px;}
  .badge{margin-bottom:5px;}
  :root{ --t-hero:clamp(1.5rem, 6.6vw, 2.2rem); --t-md:clamp(0.78rem,1.5vw,.88rem); --t-body:clamp(.8rem,0.95vw,.9rem); }
}

/* ---------- MINI FOOTER — legal, kept professional & compact ---------- */
.mini-foot{border-top:1px solid rgba(20,17,14,.1);padding-block:clamp(10px,1.6vw,16px);margin-top:auto;flex-shrink:0;}
.mini-foot-in{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;justify-content:space-between;
}
.mini-mark{font-family:'Bodoni Moda',serif;font-weight:700;font-size:var(--t-sm);white-space:nowrap;}
.mini-mark em{font-style:italic;color:var(--vermillion-t);}
.mini-legal{
  font-family:'Space Mono',ui-monospace,monospace;font-size:var(--t-mono);
  letter-spacing:.02em;color:var(--muted);
}

/* ---------- ENQUIRY DIALOG ---------- */
.dlg{
  border:none;border-top:6px solid var(--vermillion);border-radius:18px;padding:clamp(26px,4vw,38px);
  max-width:420px;width:90vw;color:var(--ink);
  background:var(--paper);
  background:radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--chrome) 20%, transparent), transparent 55%), var(--paper);
  box-shadow:0 40px 90px -30px rgba(20,17,14,.55);
  opacity:0;transform:scale(.94) translateY(16px);
  transition:opacity .3s ease, transform .3s ease, overlay .3s ease allow-discrete, display .3s ease allow-discrete;
}
.dlg[open]{opacity:1;transform:scale(1) translateY(0);}
@starting-style{ .dlg[open]{opacity:0;transform:scale(.94) translateY(16px);} }
.dlg::backdrop{background:rgba(20,17,14,0);transition:background .3s ease allow-discrete;}
.dlg[open]::backdrop{background:rgba(20,17,14,.5);}
@starting-style{ .dlg[open]::backdrop{background:rgba(20,17,14,0);} }
.dlg h2{font-size:clamp(1.4rem,3vw,1.9rem);font-style:italic;font-weight:500;}
.dlg-panel > p{margin-top:8px;color:var(--muted);font-size:var(--t-sm);}
.dlg label{display:block;margin-top:14px;font-weight:700;font-size:var(--t-sm);}
.dlg input,.dlg textarea{
  width:100%;margin-top:6px;padding:11px 13px;border-radius:9px;
  border:1.5px solid rgba(20,17,14,.18);font-family:inherit;font-size:var(--t-body);
  background:#fff;color:var(--ink);transition:border-color .15s;
}
.dlg input:focus,.dlg textarea:focus{outline:none;border-color:var(--ultramarine);}
.dlg textarea{resize:vertical;min-height:84px;}
.field{margin-top:0;}
.field-error{
  margin-top:5px;font-size:var(--t-mono);font-family:'Space Mono',ui-monospace,monospace;
  color:var(--vermillion-t);min-height:0;line-height:1.4;
}
.dlg-privacy{
  margin-top:16px;font-size:var(--t-mono);font-family:'Space Mono',ui-monospace,monospace;
  color:var(--muted);line-height:1.5;
}
.dlg input.is-invalid,.dlg textarea.is-invalid{border-color:var(--vermillion);}
.dlg input.is-invalid:focus,.dlg textarea.is-invalid:focus{border-color:var(--vermillion);}
.dlg-btn{
  width:100%;margin-top:20px;display:block;text-align:center;
  background:var(--ultramarine);color:#fff;border:none;cursor:pointer;
  font-family:inherit;font-size:var(--t-sm);font-weight:700;
  padding:13px 24px;border-radius:100px;transition:background .2s,transform .2s;
}
.dlg-btn:hover{background:var(--vermillion-t);transform:translateY(-2px);}
.dlg-btn:disabled{opacity:.6;cursor:default;transform:none;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.dlg-x{
  position:absolute;top:14px;right:16px;background:none;border:none;
  font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted);padding:4px;
}
.dlg-x:hover{color:var(--vermillion-t);}
.dlg-status{margin-top:10px;font-size:var(--t-sm);min-height:1.2em;color:var(--emerald);font-weight:600;}
.dlg-status.bad{color:var(--vermillion-t);}

.dlg-success{text-align:center;}
.dlg-success h2{margin-top:2px;}
.dlg-success h2:focus{outline:none;}
.dlg-success p{margin-top:10px;color:var(--muted);font-size:var(--t-sm);}
.dlg-success p a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.success-badge{width:60px;height:60px;margin:0 auto 14px;}
.success-blob{fill:var(--emerald);}
@media (prefers-reduced-motion: no-preference){
  .success-badge{animation:pop .45s cubic-bezier(.22,.85,.3,1.4) both;}
}
@keyframes pop{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}}
/* --- accessibility: list semantics for the social links --- */
.nav-social{list-style:none;margin:0;padding:0;}
.nav-social li{display:flex;}
/* --- accessibility: WCAG 2.5.8 minimum target size --- */
.nav-social a{min-width:24px;min-height:24px;}
.nav-cta{min-height:24px;}
.cbtn{min-width:24px;min-height:24px;}
.dlg-x{min-width:24px;min-height:24px;}
/* --- accessibility: WCAG 1.4.10 reflow — fit inside 320px with no
       horizontal scrolling, and leave room for user text-spacing overrides --- */
@media (max-width:400px){
  .wrap{padding-inline:12px;}
  .nav-in{gap:6px;}
  .nav-social{gap:4px;}
  .nav-social a{width:26px;height:26px;}
  .nav-cta{padding:6px 9px;font-size:.66rem;letter-spacing:0;}
  .mark{font-size:.8rem;}
  .mini-legal{overflow-wrap:anywhere;}
}

/* --- accessibility: WCAG 2.2.2 Pause, Stop, Hide ------------------------
   Motion here runs indefinitely and sits alongside the content, so there has
   to be a way to stop it. The control is hidden when the visitor's device is
   already set to reduce motion, because then there is nothing to pause. --- */
.mini-brand{display:flex;align-items:center;gap:10px;}
.wx-toggle{
  width:24px;height:24px;min-width:24px;min-height:24px;flex-shrink:0;
  display:grid;place-items:center;padding:0;cursor:pointer;
  border-radius:50%;border:1px solid var(--hairline,rgba(128,128,128,.35));
  background:var(--chip,rgba(128,128,128,.12));color:inherit;
  transition:background .2s,color .2s;
}
.wx-toggle svg{width:11px;height:11px;display:block;}
/* these need to out-specify the `.wx-toggle svg` rule above */
.wx-toggle .wx-ico-play{display:none;}
html.wx-off .wx-toggle .wx-ico-play{display:block;}
html.wx-off .wx-toggle .wx-ico-pause{display:none;}
@media (prefers-reduced-motion: reduce){ .wx-toggle{display:none;} }

html.wx-off .float,
html.wx-off .slot,
html.wx-off .beam,
html.wx-off .lamp,
html.wx-off .frame,
html.wx-off .ghost,
html.wx-off .contact-tag,
html.wx-off .badge .dot,
html.wx-off .success-badge,
html.wx-off .leaf i,
html.wx-off .leaf u{animation:none !important;}
html.wx-off .flake,
html.wx-off .leaf{animation:none !important;top:var(--y,50vh);}
html.wx-off .sleet{animation:none !important;top:var(--y,50vh);transform:rotate(var(--tilt,-18deg));}

/* ---------- framing section + Artists dropdown + sticky nav ---------- */

/* ---------- SKIP LINK (added 11 Sept - keyboard/screen-reader users
   had no way to bypass the nav on every page load) - hidden off-
   screen until it receives keyboard focus, then dropped into the
   top-left corner above everything else. ---------- */
.skip-link{
  position:absolute;top:-100px;left:0;z-index:1000;
  background:var(--paper);color:var(--ink);
  padding:10px 18px;border-radius:0 0 10px 0;
  font-family:'Figtree',sans-serif;font-weight:700;font-size:var(--t-sm);
  text-decoration:none;box-shadow:var(--shadow);
}
.skip-link:focus{top:0;}

/* ---------- LANDMARK RESTRUCTURE (added 11 Sept, same day as the skip
   link above) - <main> now holds the hero's own .stage div AND the
   framing section as two plain sibling blocks, instead of .stage being
   on <main> directly. .stage's own flex/align-items rule still centres
   the hero exactly as before, just one level deeper - this one line is
   the only other piece needed: <main> is body's actual flex item now,
   so it needs flex:1 0 auto itself to keep filling the space between
   the sticky nav and the footer, the job .stage used to do alone. ---------- */
main{flex:1 0 auto;}

/* ---------- STICKY HEADER (always visible while scrolling) ----------
   body previously had a hard height:100% (fine when the page never grew
   past one screen). Now the framing section can push the page taller,
   that fixed height was capping body at exactly one viewport and
   silently cutting sticky positioning off after the first screen's
   worth of scroll - overriding to height:auto (min-height:100dvh still
   applies, from the original rule) lets it grow with real content. */
body{height:auto;}
.nav{position:sticky;top:0;z-index:10;background:var(--paper);}
@media (min-width:1400px){
  .nav .wrap{max-width:1440px;}
  .nav-links{gap:30px;margin-left:34px;}
}

/* ---------- NAV LINKS (anchor to page sections + Artists dropdown) ---------- */
.nav-links{list-style:none;display:flex;align-items:center;gap:clamp(14px,2.2vw,26px);margin:0 0 0 clamp(14px,2.8vw,30px);padding:0;}
.nav-links a{
  font-family:'Figtree',sans-serif;font-size:var(--t-sm);font-weight:700;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:24px;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.nav-links a:hover{color:var(--vermillion-t);border-color:var(--vermillion-t);}
.nav-dropdown{position:relative;list-style:none;}
.dd-trigger{
  background:none;border:none;padding:0;margin:0;cursor:pointer;user-select:none;
  font-family:'Figtree',sans-serif;font-size:var(--t-sm);font-weight:700;
  color:var(--ink);white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;min-height:24px;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.dd-trigger::after{
  content:'';width:6px;height:6px;flex-shrink:0;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s;
}
.dd-trigger:hover,.nav-dropdown:hover .dd-trigger,.nav-dropdown.is-open .dd-trigger{color:var(--vermillion-t);border-color:var(--vermillion-t);}
.nav-dropdown:hover .dd-trigger::after,.nav-dropdown.is-open .dd-trigger::after{transform:rotate(-135deg) translateY(2px);}
.dropdown-panel{
  position:absolute;top:calc(100% + 12px);left:0;z-index:20;
  list-style:none;margin:0;padding:6px;min-width:148px;
  background:var(--paper);border-radius:12px;box-shadow:var(--shadow);
  border:1px solid rgba(20,17,14,.1);
  display:none;
}
@media (hover:hover) and (pointer:fine){
  .nav-dropdown:hover .dropdown-panel{display:block;}
}
.nav-dropdown.is-open .dropdown-panel{display:block;}
.dropdown-panel li{padding:9px 11px;}
.dropdown-panel .soon{font-size:var(--t-sm);color:var(--muted);font-style:italic;}
/* 600px, not 480px: below 480 the wrapped nav-links row is comfortably
   narrow, but a dense sweep from 490-568px found the SINGLE-ROW nav
   (mark + Framing + Artists dropdown + social icons + Get in Touch)
   doesn't fit in one row until ~570px - wrapping through 600px covers
   that gap with a safety margin instead of trimming it exactly. */
@media (max-width:600px){
  .nav-in{flex-wrap:wrap;row-gap:8px;}
  .nav-links{order:5;width:100%;margin-left:0;gap:11px;}
  .nav-links a,.dd-trigger{font-size:.72rem;}
}

/* ---------- FRAMING SECTION ---------- */
.framing{border-top:1px solid rgba(20,17,14,.08);padding-block:clamp(40px,7vw,84px);scroll-margin-top:96px;}
.framing-head{max-width:62ch;}
.framing-head h2{font-size:clamp(1.9rem,4.2vw,3.1rem);letter-spacing:-.02em;}
.framing-head h2 em{font-style:italic;font-weight:500;color:var(--vermillion);}
.framing-lede{margin-top:clamp(10px,1.6vw,16px);max-width:56ch;font-size:var(--t-md);color:var(--muted);}

.framing-steps{
  margin-top:clamp(28px,4.5vw,48px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,28px);
}
.step-num{
  width:clamp(42px,4.6vw,54px);height:clamp(42px,4.6vw,54px);
  display:grid;place-items:center;color:#fff;
  font-family:'Bodoni Moda',serif;font-style:italic;font-weight:600;
  font-size:clamp(1.1rem,2vw,1.4rem);
  border-radius:64% 36% 42% 58% / 52% 44% 56% 48%;
  margin-bottom:clamp(12px,1.6vw,16px);
}
.step-1 .step-num{background:var(--ultramarine);}
.step-2 .step-num{background:var(--vermillion-t);}
.step-3 .step-num{background:var(--emerald);}
.step-4 .step-num{background:var(--chrome);color:var(--ink);}
.step h3{font-family:'Figtree',sans-serif;font-size:var(--t-body);font-weight:800;letter-spacing:-.01em;}
.step p{margin-top:6px;font-size:var(--t-sm);color:var(--muted);line-height:1.5;}

.framing-gallery{
  margin-top:clamp(32px,5vw,56px);
  display:grid;gap:clamp(10px,1.6vw,16px);
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(140px,15vw,210px);
}
.framing-gallery figure{margin:0;overflow:hidden;border-radius:14px;box-shadow:var(--shadow);}
.framing-gallery img{width:100%;height:100%;object-fit:cover;}
.g-featured{grid-column:span 2;grid-row:span 2;}

@media (max-width:900px){
  .framing-steps{grid-template-columns:repeat(2,1fr);}
  .framing-gallery{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .framing-gallery{grid-template-columns:1fr;grid-auto-rows:clamp(200px,62vw,300px);}
  .g-featured{grid-column:span 1;grid-row:span 1;}
}

/* ---------- REVIEWS (placeholder content - see Outstanding Tasks) ---------- */
.reviews{margin-top:clamp(40px,6vw,72px);}
.reviews h3{font-size:clamp(1.3rem,2.4vw,1.7rem);}
.review-grid{
  margin-top:clamp(18px,2.6vw,26px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);
}
.review-card{
  background:#fff;border:1px solid rgba(20,17,14,.08);border-radius:14px;
  padding:clamp(16px,2vw,22px);
}
.stars{display:flex;gap:2px;color:var(--chrome);}
.stars svg{width:15px;height:15px;}
.review-card p{margin-top:10px;font-size:var(--t-sm);color:var(--ink);line-height:1.5;}
.review-card cite{
  display:block;margin-top:10px;font-style:normal;
  font-family:'Space Mono',ui-monospace,monospace;font-size:var(--t-mono);
  letter-spacing:.03em;color:var(--muted);
}
@media (max-width:640px){
  .review-grid{grid-template-columns:1fr;}
}