/* ===================================================================
   Studio9Art — Fine-Art & Conservation Framing
   Design: "The Conservator's Hand" — strict warm monochrome.
   The artwork is the only colour on the page.
   =================================================================== */

:root{
  --ink:      #111011;   /* primary dark ground (gallery charcoal, never pure black) */
  --ink-deep: #0c0b0b;   /* footer */
  --ink-band: #0f0e0e;   /* interlude band */
  --mat-well: #141314;   /* hero frame inner fill */
  --bone:     #ede8df;   /* paper/bone text on dark */
  --bone-lift:#f4f0e8;   /* warm off-white section ground + hover */
  --mat:      #fbf9f4;   /* mat board for matting light works */
  --grey:     #9a958c;   /* warm secondary text on dark */
  --ink-text: #1a1917;   /* primary text on light */
  --ink-sec:  #6b675f;   /* secondary text on light */
  --faint:    #b8b2a6;   /* faint numerals on light */
  --hair-d:   rgba(237,232,223,.16);
  --hair-d-14:rgba(237,232,223,.14);
  --hair-d-28:rgba(237,232,223,.28);
  --hair-d-5: rgba(237,232,223,.5);
  --hair-l:   rgba(17,16,17,.12);
  --hair-l-14:rgba(17,16,17,.14);
  --ease: cubic-bezier(.22,.61,.36,1);
  --pad-y: 120px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Satoshi",system-ui,sans-serif;
  background:var(--ink); color:var(--bone);
  font-weight:400; line-height:1.6;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-weight:400; }

.h-serif{ font-family:"Zodiak",Georgia,serif; }

/* ---- shared utilities ---- */
.kicker{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--grey); display:flex; align-items:center; gap:16px;
}
.kicker--dark{ color:var(--ink-sec); }
.rule{ display:inline-block; width:24px; height:1px; background:currentColor; opacity:.6; }
.rule--dark{ background:var(--ink-sec); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"Satoshi",sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:18px 34px; border:0; cursor:pointer; border-radius:0;
  transition:background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn--bone{ background:var(--bone); color:var(--ink); }
.btn--bone:hover{ background:var(--bone-lift); box-shadow:inset 0 0 0 1px rgba(17,16,17,.15); }
.btn--full{ width:100%; }

.link-underline{
  font-family:"Satoshi",sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bone);
  border-bottom:1px solid var(--bone); padding-bottom:5px;
  transition:opacity .2s var(--ease);
}
.link-underline:hover{ opacity:.65; }
.link-underline--dark{ color:var(--ink-text); border-color:var(--ink-text); }

/* ============================ NAV ============================ */
/* The bar used to open transparent and only pick up a ground once the hero
   had cleared, so on the inner pages it floated over the page title for the
   first half second of a scroll. It now carries a near solid ground from the
   very top and .nav--solid only changes the height. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:height .25s var(--ease), border-color .25s var(--ease);
  height:128px;
  background:rgba(17,16,17,.97);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--hair-d-14);
}
.nav__inner{
  height:100%; max-width:1500px; margin:0 auto; padding:0 6vw;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.nav__logo{ height:64px; width:auto; transition:height .25s var(--ease); }
/* six items plus the switch and the CTA, so the gap gives ground on the
   narrower desktops rather than pushing the CTA off the row */
.nav__links{ display:flex; gap:clamp(16px,2.1vw,36px); margin-left:auto; }
.nav__links a{
  font-size:13px; letter-spacing:.04em; color:var(--bone); position:relative; padding:4px 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--bone); transition:width .25s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  border:1px solid var(--hair-d-5); padding:11px 22px;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--bone);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav__cta:hover{ background:var(--bone); color:var(--ink); }
.nav--solid{ height:72px; }
.nav--solid .nav__logo{ height:36px; }

.nav__burger{ display:none; background:none; border:0; cursor:pointer; width:34px; height:24px; position:relative; }
.nav__burger span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--bone); transition:.25s var(--ease); }
.nav__burger span:nth-child(1){ top:6px; } .nav__burger span:nth-child(2){ bottom:6px; }

/* mobile menu overlay */
.menu{
  position:fixed; inset:0; z-index:60; background:#0c0b0b;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.menu.is-open{ opacity:1; visibility:visible; }
/* six links, a CTA and a full size mark is more than a short phone has room
   for, and a centred flex column CLIPS its own top when it overflows rather
   than scrolling to it. Start from the top and let the panel scroll. */
.menu{ flex-direction:column; gap:0; justify-content:flex-start; overflow-y:auto;
  padding:clamp(56px,9vh,104px) 20px 56px; }
.menu__close{ position:absolute; top:24px; right:6vw; background:none; border:0; color:var(--bone); font-size:38px; line-height:1; cursor:pointer; }
/* the mark carries the menu, so it is sized against the 28px links rather
   than tucked above them. Capped on viewport height so a short landscape
   phone never pushes the last link off the screen. */
.menu__logo{ height:min(148px, 17vh); width:auto; margin-bottom:36px; flex:0 0 auto; }
.menu__links{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.menu__links a{ font-family:"Zodiak",serif; font-size:28px; color:var(--bone); }
.menu__cta{ margin-top:14px; border:1px solid var(--hair-d-5); padding:14px 30px; font-family:"Satoshi",sans-serif !important; font-size:14px !important; letter-spacing:.1em; text-transform:uppercase; }

/* Six links plus a CTA plus a full size mark overruns a normal phone, and the
   thing to give up is the SPACING, not the logo. Tap targets stay above 44px
   at every step. Measured at 375x667, 390x844 and 430x932. */
@media (max-height:920px){
  .menu{ padding:60px 20px 44px; }
  .menu__logo{ height:min(130px, 15.5vh); margin-bottom:26px; }
  .menu__links{ gap:12px; }
  .menu__links a{ padding:10px 24px; }
}
@media (max-height:700px){
  .menu{ padding:44px 20px 36px; }
  .menu__logo{ height:min(104px, 15vh); margin-bottom:18px; }
  .menu__links{ gap:6px; }
  .menu__links a{ font-size:23px; padding:9px 24px; }
  .menu__cta{ margin-top:10px; padding:12px 26px; }
}

/* ============================ HERO ============================ */
.hero{
  position:relative; min-height:100svh; background:var(--ink);
  display:grid; grid-template-columns:58% 42%; align-items:center;
  padding-top:128px;
}
.hero__seam{ position:absolute; top:0; bottom:0; left:58%; width:1px; background:var(--hair-d); }
.hero__art{ display:flex; justify-content:center; padding:64px 48px; }
/* Hero frame = a REAL framed piece: black moulding + white mat, artwork at TRUE ratio (never cropped) */
.frame{ max-width:440px; width:100%; }
.frame__plate{
  margin-top:22px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); text-align:center;
}
.hero__copy{ padding:0 8vw 0 64px; max-width:560px; }
.hero__copy .kicker{ margin-bottom:28px; }
.hero__headline{
  font-family:"Zodiak",serif; font-weight:400;
  font-size:clamp(2.4rem,3.4vw,3.6rem); line-height:1.06; letter-spacing:-.01em;
  color:var(--bone); margin-bottom:24px;
}
.hero__sub{ font-size:clamp(1rem,1.15vw,1.15rem); line-height:1.6; color:var(--grey); max-width:42ch; margin-bottom:40px; }
.hero__cta{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-bottom:28px; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hform{ max-width:480px; }
.hform__row{ display:flex; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.hfield{ flex:1 1 180px; }
.hfield input{
  width:100%; background:rgba(237,232,223,.04); border:1px solid var(--hair-d-28);
  color:var(--bone); font-family:"Satoshi",sans-serif; font-size:.95rem; padding:14px 16px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.hfield input::placeholder{ color:var(--grey); }
.hfield input:focus{ outline:0; border-color:var(--bone); background:rgba(237,232,223,.07); }
.hform__btn{ width:100%; }
.hform__done{ color:var(--bone); font-family:"Zodiak",serif; font-style:italic; font-size:.95rem; padding-top:12px; }
.hero__scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px; opacity:.5;
  transition:opacity .4s var(--ease);
}
.hero__scroll span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); }
.hero__scroll i{ width:1px; height:40px; background:var(--grey); }
.hero__scroll.is-hidden{ opacity:0; }

/* ===================================================================
   REAL FRAME SYSTEM — every artwork sits in an authentic frame.
   Studio9Art's signature = a slim black OR natural-timber moulding
   + a generous white mat + a bevel line around the art. The artwork
   is ALWAYS shown at its true proportions (object-fit:contain), NEVER
   cropped — because a framer frames the piece, they don't crop it.
   =================================================================== */
.artframe{
  position:relative; display:block; background:var(--frame-face,#141210);
  /* the moulding: a wood/black border built from layered box-shadows for depth */
  padding:clamp(10px,1.6vw,18px);              /* moulding width */
  border-radius:1px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),            /* inner moulding shadow line */
    inset 0 2px 3px rgba(255,255,255,.06),      /* top bevel highlight */
    inset 0 -2px 4px rgba(0,0,0,.5),            /* bottom moulding shade */
    0 30px 60px -28px rgba(0,0,0,.85),          /* cast shadow on the wall */
    0 6px 14px -8px rgba(0,0,0,.6);
}
/* frame face finishes — matched to his real products */
.artframe--black{ --frame-face:#17161a; background:linear-gradient(145deg,#232227,#111014 60%,#191820); }
.artframe--oak{   --frame-face:#b98a4e; background:linear-gradient(150deg,#d9ab6d,#b07f45 55%,#c79a5c);
  box-shadow:
    inset 0 0 0 1px rgba(80,50,15,.5),
    inset 0 2px 3px rgba(255,240,215,.35),
    inset 0 -3px 5px rgba(70,45,15,.45),
    0 30px 60px -28px rgba(0,0,0,.8),
    0 6px 14px -8px rgba(0,0,0,.55);
}
.artframe--walnut{ --frame-face:#4a3323; background:linear-gradient(150deg,#5e4230,#3a281b 55%,#4c3626);
  box-shadow:
    inset 0 0 0 1px rgba(20,10,4,.6),
    inset 0 2px 3px rgba(210,175,140,.22),
    inset 0 -3px 5px rgba(20,10,4,.5),
    0 30px 60px -28px rgba(0,0,0,.82),
    0 6px 14px -8px rgba(0,0,0,.55);
}
/* additional finishes for variety — same construction, different timber/metal tones */
.artframe--ash{ --frame-face:#c9c0ac; background:linear-gradient(150deg,#e4dcc6,#b3a98f 55%,#cfc5ad);
  box-shadow:
    inset 0 0 0 1px rgba(90,80,55,.4),
    inset 0 2px 3px rgba(255,250,235,.4),
    inset 0 -3px 5px rgba(80,70,45,.35),
    0 30px 60px -28px rgba(0,0,0,.75),
    0 6px 14px -8px rgba(0,0,0,.5);
}
.artframe--ebony{ --frame-face:#0a0a0b; background:linear-gradient(150deg,#1c1b1d,#050505 55%,#141315);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.7),
    inset 0 2px 3px rgba(255,255,255,.04),
    inset 0 -2px 4px rgba(0,0,0,.6),
    0 30px 60px -28px rgba(0,0,0,.9),
    0 6px 14px -8px rgba(0,0,0,.65);
}
.artframe--bronze{ --frame-face:#8a6a3d; background:linear-gradient(150deg,#a9855a,#6e5230 55%,#96754a);
  box-shadow:
    inset 0 0 0 1px rgba(50,35,15,.55),
    inset 0 2px 3px rgba(230,205,165,.3),
    inset 0 -3px 5px rgba(40,28,12,.5),
    0 30px 60px -28px rgba(0,0,0,.8),
    0 6px 14px -8px rgba(0,0,0,.55);
}
/* moulding width variants — a slim gallery profile vs a heavier box-frame profile */
.artframe--slim{ padding:clamp(6px,1vw,11px); }
.artframe--wide{ padding:clamp(14px,2.4vw,26px); }
/* mat variants — a narrower or deeper mat changes each piece's proportions */
.artframe--mat-tight .artframe__mat{ padding:clamp(8px,1.6vw,18px); }
.artframe--mat-deep .artframe__mat{ padding:clamp(20px,4.2vw,48px); }
/* the white MAT board that surrounds the artwork inside the moulding */
.artframe__mat{
  background:var(--mat);
  padding:clamp(14px,3vw,34px);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.10),           /* mat keyline */
    inset 0 1px 2px rgba(0,0,0,.06);
  position:relative;
}
/* the bevel cut of the mat window (the little inner step around the art) */
.artframe__win{
  position:relative; padding:2px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22),                  /* window opening edge */
    2px 2px 3px -1px rgba(0,0,0,.18) inset;
  background:#fff;
}
.artframe__win img{
  display:block; width:100%; height:auto;        /* TRUE ratio — never cropped/stretched */
  background:#f4f2ec;
}

/* hero rotator — a stack of frames crossfading in place, same window/mat/moulding.
   Grid-stack so every image shares one cell (no height jump between portraits
   of different aspect ratios); the tallest image sets the frame's height. */
.hero-rotator{ display:grid; }
.hero-rotator img{ grid-area:1/1; opacity:0; transition:opacity 1.1s var(--ease); }
.hero-rotator img.is-active{ opacity:1; position:relative; }
.hero-rotator img:not(.is-active){ position:relative; }
.artframe__plate{
  margin-top:12px; text-align:center;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-sec);
}

/* FRAMING ASSEMBLY animation — the mat + art settle into the moulding,
   like a piece being fitted into its frame. Gated behind .reveal-ready. */
.reveal-ready .artframe .artframe__mat{ opacity:0; transform:scale(.94); transition:opacity .6s var(--ease) .15s, transform .7s var(--ease) .15s; }
.reveal-ready .artframe .artframe__win img{ opacity:0; transition:opacity .6s var(--ease) .35s; }
.reveal-ready .artframe.is-in .artframe__mat{ opacity:1; transform:none; }
.reveal-ready .artframe.is-in .artframe__win img{ opacity:1; }
.reveal-ready .artframe{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-ready .artframe.is-in{ opacity:1; transform:none; }

/* ============================ RIBBON ============================ */
.ribbon{
  display:flex; align-items:center; justify-content:center;
  border-top:1px solid var(--hair-d-14); border-bottom:1px solid var(--hair-d-14);
  padding:40px 6vw;
}
.ribbon__item{
  flex:1; text-align:center; padding:0 24px; position:relative;
  display:flex; flex-direction:column; gap:8px;
}
.ribbon__item + .ribbon__item::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:44px; background:var(--hair-d-14);
}
.ribbon__n{ font-family:"Zodiak",serif; font-weight:400; font-size:clamp(1.4rem,2vw,2rem); color:var(--bone); }
.ribbon__l{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }

/* ============================ ABOUT ============================ */
.about{
  background:var(--bone-lift); color:var(--ink-text);
  display:grid; grid-template-columns:44% 56%; gap:72px; align-items:center;
  padding:var(--pad-y) 8vw;
}
.matcard{
  background:var(--mat); padding:32px; border:1px solid var(--hair-l-14);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.25);
}
.matcard img{ width:100%; aspect-ratio:3/4; object-fit:contain; background:var(--mat); }
.about__copy .kicker{ margin-bottom:22px; }
.about__copy h2{ font-size:clamp(1.8rem,2.6vw,2.6rem); line-height:1.12; margin-bottom:24px; }
.about__body{ font-size:1.08rem; line-height:1.7; color:var(--ink-sec); margin-bottom:32px; max-width:52ch; }

/* ============================ THE WORK ============================ */
.work{ background:var(--ink); padding:var(--pad-y) 6vw; }
.work__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
  margin-bottom:56px; flex-wrap:wrap;
}
.work__title{ font-size:clamp(2rem,3vw,3rem); color:var(--bone); }
.work__lead{ font-size:14px; color:var(--grey); max-width:34ch; text-align:right; line-height:1.6; }

/* Gallery = a hung wall of REAL framed pieces. Masonry columns; every
   piece in its own frame at true proportions. */
.grid{ column-count:3; column-gap:34px; }
.cell{ break-inside:avoid; margin-bottom:38px; position:relative; }
.folio{
  position:absolute; top:-2px; left:2px; z-index:3;
  font-family:"Zodiak",serif; font-weight:300; font-size:12px; letter-spacing:.1em;
  color:var(--grey); transform:translateY(-100%); padding-bottom:8px;
}
.cell__cap{
  margin-top:16px; text-align:center;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
}
/* hover: the framed piece lifts off the wall slightly (pointer-fine only) */
.pointer-fine .cell .artframe{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.pointer-fine .cell:hover .artframe{ transform:translateY(-6px); }
.pointer-fine .cell:hover .artframe--black{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.06), inset 0 -2px 4px rgba(0,0,0,.5), 0 44px 80px -30px rgba(0,0,0,.9), 0 10px 20px -10px rgba(0,0,0,.7); }

/* ============================ SERVICES ============================ */
.services{ background:var(--bone-lift); color:var(--ink-text); padding:var(--pad-y) 8vw; }
.services__head{ max-width:640px; margin-bottom:56px; }
.services__head .kicker{ margin-bottom:20px; }
.services__head h2{ font-size:clamp(1.8rem,2.6vw,2.6rem); margin-bottom:18px; }
.services__intro{ color:var(--ink-sec); font-size:1.05rem; line-height:1.6; }
.services__list{ display:grid; grid-template-columns:1fr 1fr; column-gap:56px; }
.srow{
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start;
  padding:26px 0; border-top:1px solid var(--hair-l);
}
.srow__n{ font-family:"Zodiak",serif; font-weight:400; font-size:1.6rem; color:var(--faint); line-height:1; transition:color .2s var(--ease); }
.srow h3{ font-family:"Satoshi",sans-serif; font-weight:500; font-size:1.1rem; color:var(--ink-text); margin-bottom:6px; transition:transform .2s var(--ease); }
.srow p{ font-size:.95rem; color:var(--ink-sec); line-height:1.5; }
.pointer-fine .srow:hover .srow__n{ color:var(--ink-text); }
.pointer-fine .srow:hover h3{ transform:translateX(6px); }

/* ============================ REPRESENTED ARTISTS BAND ============================ */
.gallery-band{
  background:var(--ink-band); padding:96px 6vw;
  display:grid; grid-template-columns:40% 60%; gap:56px; align-items:center;
}
.gallery-band__copy .kicker{ margin-bottom:22px; }
.gallery-band__line{ font-size:clamp(1.2rem,1.6vw,1.4rem); line-height:1.5; color:var(--bone); margin-bottom:28px; }
.gallery-band__thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.matcard--sm{ padding:18px; box-shadow:0 20px 44px -28px rgba(0,0,0,.6); }
.matcard--sm img{ aspect-ratio:1/1; object-fit:contain; }

/* ============================ QUOTE / TRUST ============================ */
.quote{ background:var(--bone-lift); color:var(--ink-text); padding:var(--pad-y) 8vw; text-align:center; }
.quote__q{ font-style:italic; font-weight:300; font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1.4; max-width:820px; margin:0 auto 28px; }
.quote__by{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-sec); display:inline-flex; align-items:center; gap:14px; }
.quote__proof{
  display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap;
  margin-top:48px; color:var(--ink-sec); font-size:13px;
}
.quote__proof span{ padding:0 24px; position:relative; }
.quote__proof span + span::before{ content:"·"; position:absolute; left:-2px; }

/* ============================ CONTACT ============================ */
.contact{
  background:var(--ink); padding:var(--pad-y) 8vw;
  display:grid; grid-template-columns:42% 58%; gap:72px; align-items:start;
}
.contact__left h2{ font-size:clamp(1.8rem,2.6vw,2.6rem); color:var(--bone); margin-bottom:20px; }
.contact__reassure{ color:var(--grey); line-height:1.6; margin-bottom:40px; max-width:40ch; }
.nap__row{ display:flex; flex-direction:column; gap:5px; padding:16px 0; border-top:1px solid var(--hair-d); }
.nap__row:first-child{ border-top:0; padding-top:0; }
.nap__label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
.nap__row a:hover{ text-decoration:underline; text-underline-offset:4px; }

/* The enquiry form is hung like a piece of work: the same black moulding and
   the same mat board the artwork gets, so the one thing we ask a visitor to
   fill in looks framed by the framer. The mat carries the page ground rather
   than the white board, because the form's own type is set for that ground. */
.formframe{ padding:clamp(12px,1.5vw,20px); }
.formframe__mat{ padding:clamp(24px,3.2vw,44px); background:var(--mat-well); }
.formframe .qform{ max-width:none; }
@media (max-width:640px){ .formframe__mat{ padding:22px 18px; } }

.qform{ display:flex; flex-direction:column; gap:26px; }
.field{ display:flex; flex-direction:column; gap:10px; }
.field label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.field input, .field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--hair-d-28);
  color:var(--bone); font-family:"Satoshi",sans-serif; font-size:1rem; padding:10px 0; resize:none;
  transition:border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus{ outline:0; border-bottom-color:var(--bone); }
.qform__hint{ font-size:12px; color:var(--grey); margin-top:-6px; }
.qform__done{ color:var(--bone); font-family:"Zodiak",serif; font-style:italic; font-size:1.1rem; padding-top:8px; }

/* ============================ FOOTER ============================ */
.footer{ background:var(--ink-deep); padding:72px 6vw 40px; }
.footer__top{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding-bottom:28px; border-bottom:1px solid var(--hair-d-14);
}
.footer__logo{ height:24px; width:auto; }
.footer__nap{ font-size:12px; color:var(--grey); }
.footer__nav{ display:flex; gap:22px; }
.footer__nav a{ font-size:12px; color:var(--grey); }
.footer__nav a:hover{ color:var(--bone); }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:24px; flex-wrap:wrap; }
.footer__bottom > span{ font-size:11px; color:var(--ink-sec); }
.footer__scalus{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-sec);
  display:inline-flex; align-items:center; gap:10px; opacity:.6; transition:opacity .2s var(--ease);
}
.footer__scalus:hover{ opacity:1; }
.footer__scalus .rule{ width:16px; }

/* ============================ REVEAL ============================
   Progressive enhancement: content is VISIBLE by default. Only when JS
   adds .reveal-ready to <html> do we hide-then-animate. So no-JS / slow-JS
   / headless never leaves content stuck invisible. */
.reveal-ready [data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-ready [data-reveal].is-in{ opacity:1; transform:none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1023px){
  :root{ --pad-y:88px; }
  .nav{ height:96px; }
  .nav__logo{ height:44px; }
  .nav--solid{ height:64px; }
  .nav--solid .nav__logo{ height:30px; }
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:block; }
  .hero{ grid-template-columns:1fr; min-height:auto; padding-top:112px; padding-bottom:40px; }
  .hero__seam{ display:none; }
  .hero__art{ padding:0 8vw 40px; }
  .frame{ max-width:400px; }
  .hero__copy{ padding:0 8vw; }
  .hero__scroll{ display:none; }
  .about, .contact{ grid-template-columns:1fr; gap:48px; }
  .gallery-band{ grid-template-columns:1fr; gap:40px; }
  .grid{ column-count:2; }
  .work__lead{ text-align:left; }
}
@media (max-width:640px){
  :root{ --pad-y:72px; }
  .ribbon{ flex-wrap:wrap; gap:28px 0; }
  .ribbon__item{ flex:0 0 50%; }
  .ribbon__item + .ribbon__item::before{ display:none; }
  .services__list{ grid-template-columns:1fr; column-gap:0; }
  .grid{ column-count:1; }
  .quote__proof{ flex-direction:column; gap:12px; }
  .quote__proof span + span::before{ display:none; }
  .footer__top{ flex-direction:column; align-items:flex-start; gap:18px; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* ===================================================================
   Concept 1 house-rule additions (21 Aug 2026)
   - anchors clear the sticky header on touch, where Lenis never runs
     and therefore carries no scroll offset of its own
   - attribution follows the site's own footer type, Scalus in accent
   =================================================================== */
section[id]{ scroll-margin-top:132px; }
@media (max-width:640px){ section[id]{ scroll-margin-top:88px; } }

.footer__scalus b{ color:var(--bone); font-weight:700; }

/* -------------------------------------------------------------------
   Contrast and tap target corrections (21 Aug 2026 QA pass).
   Every value below was measured, not guessed: the service numerals were
   at 1.86:1 and the footer bottom bar at 3.49:1 against their real
   grounds, and a set of links sat between 16 and 29px tall.
   ------------------------------------------------------------------- */
.srow__n{ color:#7B766C; }                    /* was --faint, 1.86:1 on the light ground */
.footer__bottom, .footer__bottom span{ color:#8B857A; }             /* was 3.49:1 on the ink footer */
.footer__scalus{ color:#8B857A; }

/* tap targets: nothing a thumb has to hit is under 44px */
.nav__burger{ width:48px; height:48px; }
.link-underline{ display:inline-block; padding:12px 0; }
.footer__nav a{ display:inline-block; padding:13px 10px; }
.nav__links a{ display:inline-block; padding:14px 8px; }
.menu__links a{ padding:14px 24px; min-width:120px; }
.nap__row a{ display:inline-block; padding:9px 0; }
.footer__scalus{ padding:14px 0; }
/* the 24px of side padding has to stay: the separator between these three
   proof points is an absolutely positioned dot that sits in it. Zeroing it
   for the tap target ran the three lines together as one word. */
.quote__proof span{ display:inline-block; padding:8px 24px; }

/* The footer nav is a flex row with no wrap, so its five links kept an
   intrinsic width of 397px on a 390px viewport. That widened the footer,
   which widened the document, which is why the FIXED header and the menu
   overlay both reported 421px wide: a fixed element stretches to the
   document, not the viewport. The overflow was never in the header. */
.footer__nav{ flex-wrap:wrap; justify-content:center; }
.footer__nap{ overflow-wrap:anywhere; }
@media (max-width:640px){
  .footer__nav a{ padding:13px 8px; }
}

/* ===================================================================
   21 Aug 2026 — Tim: all frames black, white grounds.
   The direction becomes a lit gallery wall rather than a dark room, so
   every dark ground flips to paper and the ink monochrome inverts. Kept
   as an override block at the end rather than rewritten inline, so the
   original dark version is one deletion away if he prefers it back.
   =================================================================== */

/* ---- every frame is black, whatever variant the markup asked for ---- */
.artframe,
.artframe--black, .artframe--oak, .artframe--walnut,
.artframe--ash, .artframe--ebony, .artframe--bronze{
  --frame-face:#141317;
  background:linear-gradient(145deg,#242329,#0F0E12 60%,#1A1920) !important;
}
.pointer-fine .cell:hover .artframe--black,
.pointer-fine .cell:hover .artframe{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.06),
             inset 0 -2px 4px rgba(0,0,0,.5), 0 40px 70px -30px rgba(17,16,17,.42),
             0 10px 20px -10px rgba(17,16,17,.3);
}

/* ---- white grounds: this is now the LIGHT THEME ----
   Every rule below is gated on the theme attribute the head script writes
   from the device setting (or from the visitor's own choice, once they make
   one). The gate is :not([data-theme="dark"]) rather than ="light" on purpose,
   so a visitor with JS switched off still lands on the light page exactly as
   it shipped, instead of falling back to the old dark build. */
html:not([data-theme="dark"]){ color-scheme:light; }
html:not([data-theme="dark"]) body{ background:var(--paper-w,#F7F5F1); color:var(--ink-text); }
html:not([data-theme="dark"]) .hero,
html:not([data-theme="dark"]) .work,
html:not([data-theme="dark"]) .contact{ background:#F7F5F1; }
html:not([data-theme="dark"]) .gallery-band{ background:#EFEBE4; }
html:not([data-theme="dark"]) .hero__seam{ opacity:.06; }
html:not([data-theme="dark"]) .mat-well,
html:not([data-theme="dark"]) .artframe__mat{ background:#FCFBF8; }
html:not([data-theme="dark"]) .footer{ background:#EFEBE4; }

/* type inverts with the ground */
html:not([data-theme="dark"]) .hero__headline,
html:not([data-theme="dark"]) .work__title,
html:not([data-theme="dark"]) .ribbon__n,
html:not([data-theme="dark"]) .contact__left h2,
html:not([data-theme="dark"]) .menu__links a,
html:not([data-theme="dark"]) .nav__cta,
html:not([data-theme="dark"]) .hform__done,
html:not([data-theme="dark"]) .gallery-band__line{ color:var(--ink-text); }
html:not([data-theme="dark"]) .kicker,
html:not([data-theme="dark"]) .hero__sub,
html:not([data-theme="dark"]) .work__lead,
html:not([data-theme="dark"]) .ribbon__l,
html:not([data-theme="dark"]) .folio,
html:not([data-theme="dark"]) .cell__cap,
html:not([data-theme="dark"]) .hero__scroll span,
html:not([data-theme="dark"]) .frame__plate,
html:not([data-theme="dark"]) .hform__done{ color:#6B675F; }
html:not([data-theme="dark"]) .link-underline{ color:var(--ink-text); border-color:var(--ink-text); }
html:not([data-theme="dark"]) .nav__links a{ color:#57534B; }
html:not([data-theme="dark"]) .nav__links a::after{ background:var(--ink-text); }
html:not([data-theme="dark"]) .nav__logo,
html:not([data-theme="dark"]) .menu__logo,
html:not([data-theme="dark"]) .footer__logo{ filter:invert(1); }
html:not([data-theme="dark"]) .nav{ background:rgba(247,245,241,.97); border-bottom-color:rgba(17,16,17,.12); }
html:not([data-theme="dark"]) .nav__burger span{ background:var(--ink-text); }
html:not([data-theme="dark"]) .menu{ background:#F7F5F1; }
html:not([data-theme="dark"]) .menu__close{ color:#57534B; }
html:not([data-theme="dark"]) .nav__cta:hover{ background:var(--ink-text); color:#F7F5F1; }

/* buttons and fields invert too */
html:not([data-theme="dark"]) .btn--bone{ background:var(--ink-text); color:#F7F5F1; }
html:not([data-theme="dark"]) .btn--bone:hover{ background:#000; box-shadow:none; }
html:not([data-theme="dark"]) .hfield input,
html:not([data-theme="dark"]) .qform input,
html:not([data-theme="dark"]) .qform textarea{
  color:var(--ink-text); border-color:rgba(17,16,17,.22); background:rgba(17,16,17,.03); }
html:not([data-theme="dark"]) .hfield input::placeholder,
html:not([data-theme="dark"]) .qform input::placeholder{ color:#8A857C; }
html:not([data-theme="dark"]) .hfield input:focus,
html:not([data-theme="dark"]) .qform input:focus,
html:not([data-theme="dark"]) .qform textarea:focus{
  border-color:var(--ink-text); background:rgba(17,16,17,.05); }
html:not([data-theme="dark"]) .formframe__mat{ background:#FCFBF8; }
html:not([data-theme="dark"]) .qform label,
html:not([data-theme="dark"]) .qform__hint,
html:not([data-theme="dark"]) .qform__done{ color:#6B675F; }
html:not([data-theme="dark"]) .nap__label{ color:#8A857C; }
html:not([data-theme="dark"]) .nap__row a{ color:var(--ink-text); border-bottom:1px solid rgba(17,16,17,.28); }

/* hairlines flip from light-on-dark to dark-on-light */
html:not([data-theme="dark"]) .ribbon{ border-block:1px solid rgba(17,16,17,.12); background:#EFEBE4; }
html:not([data-theme="dark"]) .ribbon__item{ border-left-color:rgba(17,16,17,.09); }
html:not([data-theme="dark"]) .footer__top,
html:not([data-theme="dark"]) .footer__bottom{ border-color:rgba(17,16,17,.12); }
html:not([data-theme="dark"]) .footer__nap,
html:not([data-theme="dark"]) .footer__nav a{ color:#6B675F; }
html:not([data-theme="dark"]) .footer__scalus b{ color:var(--ink-text); }
html:not([data-theme="dark"]) .rule{ background:currentColor; }
/* contrast on the newly light contact and footer grounds */
html:not([data-theme="dark"]) .contact__reassure{ color:#5F5B53; }
html:not([data-theme="dark"]) .nap__label{ color:#6B675F; }
html:not([data-theme="dark"]) .footer__bottom,
html:not([data-theme="dark"]) .footer__bottom span,
html:not([data-theme="dark"]) .footer__scalus{ color:#6B675F; }

/* The client's own mark sits on top of every enquiry form (house standard).
   Concept 1 shipped without one, so this adds the band as well as sizing it. */
.formlogo{
  display:grid; place-items:center; margin-bottom:22px; padding:18px 0 16px;
  background:linear-gradient(180deg, rgba(17,16,17,.05), transparent);
}
.formlogo img{ height:104px; width:auto; }
@media (max-width:640px){ .formlogo img{ height:84px; } }

/* ===================================================================
   21 Aug 2026 — DARK THEME.
   The base sheet above is the original dark build, which alternated ink
   grounds with three cream bands (about, services, quote). Left as it was,
   dark mode would read as a dark room with three lit walls, so those three
   bands go to ink here and their type flips with them. Everything else in
   the base sheet was already dark and needs no help.
   =================================================================== */
html[data-theme="dark"]{ color-scheme:dark; }
html[data-theme="dark"] .about,
html[data-theme="dark"] .services,
html[data-theme="dark"] .quote{ background:var(--ink-band); color:var(--bone); }
html[data-theme="dark"] .kicker--dark{ color:var(--grey); }
html[data-theme="dark"] .rule--dark{ background:var(--grey); }
html[data-theme="dark"] .about__body,
html[data-theme="dark"] .services__intro,
html[data-theme="dark"] .srow p,
html[data-theme="dark"] .quote__by,
html[data-theme="dark"] .quote__proof{ color:var(--grey); }
html[data-theme="dark"] .srow h3{ color:var(--bone); }
html[data-theme="dark"] .srow{ border-top-color:var(--hair-d-14); }
html[data-theme="dark"] .srow__n{ color:#8B857A; }
html[data-theme="dark"] .pointer-fine .srow:hover .srow__n{ color:var(--bone); }
html[data-theme="dark"] .link-underline--dark{ color:var(--bone); border-color:var(--bone); }
html[data-theme="dark"] .matcard{ border-color:var(--hair-d-14); }
/* the enquiry forms carry the client's black wordmark, so it inverts to sit
   on ink, and the tint band behind it flips from a dark wash to a light one */
html[data-theme="dark"] .formlogo{ background:linear-gradient(180deg, rgba(237,232,223,.07), transparent); }
html[data-theme="dark"] .formlogo img{ filter:invert(1); }

/* ===================================================================
   THEME SWITCH — liquid glass.
   Tim asked for a control that reads as a separate object resting ON the
   page rather than a piece of it, so the capsule is built the way real
   glass behaves: a blurred and saturated backdrop that picks up whatever
   scrolls under it, a specular sheen across the top third, a refraction
   edge drawn as an inset hairline, and a knob with its own highlight.
   =================================================================== */
.themetog{
  position:relative; flex:0 0 auto; width:66px; height:34px;
  border:0; padding:0; cursor:pointer; border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,.62), rgba(243,245,250,.30));
  backdrop-filter:blur(18px) saturate(190%);
  -webkit-backdrop-filter:blur(18px) saturate(190%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -1px 2px rgba(17,16,17,.10),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 10px 22px -12px rgba(17,16,17,.45),
    0 2px 6px -3px rgba(17,16,17,.18);
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
/* the sheen sits inside the refraction edge, never over it */
.themetog::before{
  content:""; position:absolute; inset:1px; border-radius:999px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 64%);
}
.themetog:hover{ box-shadow:
  inset 0 1px 1px rgba(255,255,255,.9),
  inset 0 -1px 2px rgba(17,16,17,.10),
  inset 0 0 0 1px rgba(255,255,255,.7),
  0 14px 28px -12px rgba(17,16,17,.5),
  0 2px 6px -3px rgba(17,16,17,.2); }
.themetog:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

/* on ink the glass darkens and its sheen drops, the way glass does in a
   dim room: less specular, more edge */
html[data-theme="dark"] .themetog{
  background:linear-gradient(135deg, rgba(237,232,223,.16), rgba(237,232,223,.05));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.26),
    inset 0 -1px 2px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(237,232,223,.20),
    0 14px 30px -14px rgba(0,0,0,.9),
    0 2px 6px -3px rgba(0,0,0,.5);
}
html[data-theme="dark"] .themetog::before{
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.03) 46%, rgba(255,255,255,0) 64%);
}

/* the knob: a lens that slides between the two icons */
.themetog__knob{
  position:absolute; top:4px; left:4px; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(160deg, rgba(255,255,255,.98), rgba(252,251,248,.72));
  box-shadow:
    0 2px 6px rgba(17,16,17,.30),
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(17,16,17,.10);
  transition:transform .38s var(--ease), background .38s var(--ease);
}
html[data-theme="dark"] .themetog__knob{
  transform:translateX(32px);
  background:linear-gradient(160deg, rgba(245,242,236,.96), rgba(206,200,190,.78));
}

/* icons ride above the knob so the active one reads as ink on the lens */
.themetog__ico{
  position:absolute; top:50%; z-index:2; width:15px; height:15px; margin-top:-7.5px;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .3s var(--ease), color .3s var(--ease);
  pointer-events:none;
}
.themetog__ico--sun{  left:9.5px; }
.themetog__ico--moon{ right:9.5px; }
html:not([data-theme="dark"]) .themetog__ico--sun{  color:#1a1917; opacity:1; }
html:not([data-theme="dark"]) .themetog__ico--moon{ color:#4a463f; opacity:.45; }
html[data-theme="dark"] .themetog__ico--moon{ color:#141312; opacity:1; }
html[data-theme="dark"] .themetog__ico--sun{  color:#ede8df; opacity:.45; }

/* the nav drops its links and its CTA on tablet and phone, so the switch
   takes over the space they leave and sits beside the burger */
@media (max-width:1023px){
  .nav__inner .themetog{ margin-left:auto; }
}
@media (prefers-reduced-motion:reduce){
  .themetog, .themetog__knob, .themetog__ico{ transition:none !important; }
}

/* ===================================================================
   21 Aug 2026 — INNER PAGE COMPONENTS.
   The concept grew from one page into a real site, so these are the parts
   a homepage never needed: a page header with a breadcrumb, prose columns,
   a numbered process, an FAQ, service cards, the frame finishes row, and
   the short glass enquiry form that inner pages carry instead of the
   homepage's full form. Everything reuses the existing tokens so both
   themes pick these up for free.
   =================================================================== */

/* ---- page header ---- */
.phero{
  position:relative; background:var(--ink);
  padding:calc(128px + 72px) 8vw 76px;
  border-bottom:1px solid var(--hair-d-14);
}
.phero__inner{ max-width:1500px; margin:0 auto; }
.crumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); margin-bottom:26px;
}
.crumbs a{ color:var(--grey); border-bottom:1px solid transparent; padding:6px 0; }
.crumbs a:hover{ border-bottom-color:currentColor; }
.crumbs span[aria-current]{ color:var(--bone); }
.crumbs i{ font-style:normal; opacity:.5; }
.phero h1{
  font-family:"Zodiak",serif; font-weight:400; color:var(--bone);
  font-size:clamp(2.1rem,3.4vw,3.4rem); line-height:1.08; letter-spacing:-.01em;
  max-width:20ch; margin-bottom:22px;
}
.phero__lead{ font-size:clamp(1rem,1.15vw,1.15rem); line-height:1.65; color:var(--grey); max-width:56ch; }

/* ---- a two column band: copy beside a framed piece ---- */
.split{
  display:grid; grid-template-columns:46% 54%; gap:72px; align-items:center;
  padding:var(--pad-y) 8vw; background:var(--bone-lift); color:var(--ink-text);
}
.split--flip .split__media{ order:2; }
.split__copy h2{ font-size:clamp(1.7rem,2.5vw,2.5rem); line-height:1.14; margin-bottom:22px; }
.split__copy .kicker{ margin-bottom:20px; }
.prose p{ font-size:1.06rem; line-height:1.72; color:var(--ink-sec); margin-bottom:18px; max-width:56ch; }
.prose p:last-of-type{ margin-bottom:28px; }

/* ---- numbered process ---- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; margin-top:8px; }
.step__n{
  font-family:"Zodiak",serif; font-weight:300; font-size:2rem; line-height:1;
  color:var(--faint); display:block; margin-bottom:16px;
}
.step h3{ font-family:"Satoshi",sans-serif; font-weight:500; font-size:1.05rem; color:var(--ink-text); margin-bottom:8px; }
.step p{ font-size:.95rem; line-height:1.6; color:var(--ink-sec); }

/* ---- FAQ (a real disclosure element, so it works with no JS at all) ---- */
.faq{ max-width:860px; margin:0 auto; }
.faq details{ border-top:1px solid var(--hair-l); }
.faq details:last-child{ border-bottom:1px solid var(--hair-l); }
.faq summary{
  cursor:pointer; list-style:none; padding:26px 44px 26px 0; position:relative;
  font-family:"Satoshi",sans-serif; font-weight:500; font-size:1.05rem; color:var(--ink-text);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq p{ font-size:.98rem; line-height:1.68; color:var(--ink-sec); padding:0 44px 26px 0; max-width:66ch; }

/* ---- service cards ---- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card{
  display:flex; flex-direction:column; padding:32px 30px 30px;
  border:1px solid var(--hair-l); background:rgba(17,16,17,.02);
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.card__n{ font-family:"Zodiak",serif; font-weight:300; font-size:.95rem; letter-spacing:.1em; color:var(--faint); margin-bottom:20px; }
.card h3{ font-family:"Satoshi",sans-serif; font-weight:500; font-size:1.12rem; color:var(--ink-text); margin-bottom:10px; line-height:1.3; }
.card p{ font-size:.94rem; line-height:1.6; color:var(--ink-sec); margin-bottom:22px; }
.card__go{
  margin-top:auto; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-text); display:inline-flex; align-items:center; gap:10px;
}
.card__go::after{ content:""; width:16px; height:1px; background:currentColor; transition:width .25s var(--ease); }
.pointer-fine .card:hover{ transform:translateY(-4px); border-color:rgba(17,16,17,.3); background:rgba(17,16,17,.04); }
.pointer-fine .card:hover .card__go::after{ width:28px; }

/* ---- frame finishes: his real product shots, always on paper because
       that is the ground they were photographed on ---- */
.finishes{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.finish{ background:#FCFBF8; padding:22px 18px 16px; border:1px solid rgba(17,16,17,.10); }
.finish img{ width:100%; height:auto; }
.finish span{
  display:block; margin-top:14px; text-align:center;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#6B675F;
}

/* ---- related links row ---- */
.related{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; }
.related a{
  border:1px solid var(--hair-d-28); padding:13px 20px;
  font-size:12px; letter-spacing:.06em; color:var(--bone);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.related a:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }

/* ---- the short glass enquiry form inner pages carry ---- */
.gband{ padding:var(--pad-y) 8vw; background:var(--ink); }
.gband__inner{
  max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.gband h2{ font-family:"Zodiak",serif; font-size:clamp(1.7rem,2.4vw,2.3rem); color:var(--bone); margin-bottom:18px; }
.gband p{ color:var(--grey); line-height:1.65; margin-bottom:26px; max-width:44ch; }
.gform{
  padding:30px 28px 28px; border-radius:2px;
  background:linear-gradient(135deg, rgba(237,232,223,.10), rgba(237,232,223,.03));
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(237,232,223,.16),
    0 30px 60px -30px rgba(0,0,0,.8);
}
.gform .formlogo{ margin-bottom:20px; padding:10px 0 12px; }
.gform .formlogo img{ height:74px; }
.gform__row{ display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.gform .hfield{ flex:1 1 170px; }
.gform textarea{
  width:100%; background:rgba(237,232,223,.04); border:1px solid var(--hair-d-28);
  color:var(--bone); font-family:"Satoshi",sans-serif; font-size:.95rem; padding:13px 15px;
  resize:none; margin-bottom:12px; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.gform textarea::placeholder{ color:var(--grey); }
.gform textarea:focus{ outline:0; border-color:var(--bone); background:rgba(237,232,223,.07); }
.gform__done{ color:var(--bone); font-family:"Zodiak",serif; font-style:italic; font-size:.95rem; padding-top:12px; }

/* ---- footer concept line ---- */
.footer__concept{ font-size:11px; color:var(--ink-sec); opacity:.85; }

/* ---- responsive ---- */
@media (max-width:1023px){
  .phero{ padding:calc(96px + 56px) 8vw 56px; }
  .split{ grid-template-columns:1fr; gap:44px; }
  .split--flip .split__media{ order:0; }
  .steps{ grid-template-columns:1fr; gap:32px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .finishes{ grid-template-columns:repeat(2,1fr); }
  .gband__inner{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:640px){
  .cards{ grid-template-columns:1fr; }
  .phero h1{ max-width:none; }
}

/* ---- both themes pick up the new grounds ---- */
html:not([data-theme="dark"]) .phero,
html:not([data-theme="dark"]) .gband{ background:#F7F5F1; }
html:not([data-theme="dark"]) .phero{ border-bottom-color:rgba(17,16,17,.12); }
html:not([data-theme="dark"]) .phero h1{ color:var(--ink-text); }
html:not([data-theme="dark"]) .phero__lead,
html:not([data-theme="dark"]) .crumbs,
html:not([data-theme="dark"]) .crumbs a{ color:#6B675F; }
html:not([data-theme="dark"]) .crumbs span[aria-current]{ color:var(--ink-text); }
html:not([data-theme="dark"]) .gband h2{ color:var(--ink-text); }
html:not([data-theme="dark"]) .gband p{ color:#6B675F; }
html:not([data-theme="dark"]) .related a{ color:var(--ink-text); border-color:rgba(17,16,17,.22); }
html:not([data-theme="dark"]) .related a:hover{ background:var(--ink-text); color:#F7F5F1; border-color:var(--ink-text); }
html:not([data-theme="dark"]) .gform{
  background:linear-gradient(135deg, rgba(255,255,255,.66), rgba(243,245,250,.34));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 30px 60px -30px rgba(17,16,17,.35);
}
html:not([data-theme="dark"]) .gform textarea{
  color:var(--ink-text); border-color:rgba(17,16,17,.22); background:rgba(17,16,17,.03); }
html:not([data-theme="dark"]) .gform textarea::placeholder{ color:#8A857C; }
html:not([data-theme="dark"]) .gform textarea:focus{ border-color:var(--ink-text); background:rgba(17,16,17,.05); }
html:not([data-theme="dark"]) .gform__done{ color:var(--ink-text); }
html:not([data-theme="dark"]) .footer__concept{ color:#6B675F; }

html[data-theme="dark"] .split{ background:var(--ink-band); color:var(--bone); }
html[data-theme="dark"] .split__copy h2{ color:var(--bone); }
html[data-theme="dark"] .prose p{ color:var(--grey); }
html[data-theme="dark"] .step h3{ color:var(--bone); }
html[data-theme="dark"] .step p{ color:var(--grey); }
html[data-theme="dark"] .step__n{ color:#8B857A; }
html[data-theme="dark"] .faq details{ border-top-color:var(--hair-d-14); }
html[data-theme="dark"] .faq details:last-child{ border-bottom-color:var(--hair-d-14); }
html[data-theme="dark"] .faq summary{ color:var(--bone); }
html[data-theme="dark"] .faq p{ color:var(--grey); }
html[data-theme="dark"] .card{ border-color:var(--hair-d-14); background:rgba(237,232,223,.03); }
html[data-theme="dark"] .card h3{ color:var(--bone); }
html[data-theme="dark"] .card p{ color:var(--grey); }
html[data-theme="dark"] .card__n{ color:#8B857A; }
html[data-theme="dark"] .card__go{ color:var(--bone); }
html[data-theme="dark"] .pointer-fine .card:hover{ border-color:var(--hair-d-5); background:rgba(237,232,223,.05); }
html[data-theme="dark"] .footer__concept{ color:#8B857A; }