/* ==========================================================================
   Artisan Glass Concepts: core stylesheet
   Palette derived from the client's maroon bottle-skyline logo.
   ========================================================================== */

/* ---------- 0. Display face ----------
   TrajanusBricks: an inscriptional, all-capitals face. It has one weight and no
   true lowercase, so display text is set at 400 and never synthetically bolded,
   and the negative tracking used with Fraunces is dialled back out. */
@font-face{
  font-family:"Trajanus Bricks";
  src:url("/assets/fonts/trajanus-bricks.woff2?v=53dc0c0e") format("woff2"),
      url("/assets/fonts/trajanus-bricks.ttf?v=015dc174") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- 1. Tokens ---------- */
:root{
  /* brand */
  --red:#6B0006;
  --red-lift:#8A1017;
  --red-deep:#4A0004;
  --gold:#A9812E;
  --gold-lift:#C9A253;
  --ink:#1C0D0E;
  --ink-lift:#2A1618;
  --cream:#F2EBDC;
  --panel:#F5E7BE;

  /* derived surfaces */
  --paper:#FBF7EF;
  --rule-dark:rgba(242,235,220,.16);
  --rule-light:rgba(28,13,14,.14);
  --text-dark:#1C0D0E;
  --text-dark-soft:rgba(28,13,14,.88);
  --text-light:#F2EBDC;
  --text-light-soft:rgba(242,235,220,.86);

  /* type */
  --display:"Trajanus Bricks","Trajan Pro","Georgia",serif;
  /* kept as a token so every display element still shares one setting; the new
     face is not variable, so it resolves to normal. */
  --display-axes:normal;
  /* the face pairs wide letterfit with a narrow space glyph */
  --display-word-space:.26em;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* metrics */
  --gutter:clamp(1.25rem,4vw,4.5rem);
  --maxw:1440px;
  --nav-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--text-dark);
  font-family:var(--body);
  font-size:clamp(1.06rem,1.01rem + .26vw,1.18rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.02;letter-spacing:.005em}
/* every display-face element gets the same optical settings */
.h-section,.h-sub,.hero__wordmark,.hero__tagline,.statement__hd,.statement__meta dt,
.verb__word,.story__index,.step h3,.technique h3,.lineage__hd,.lineage__points strong,
.nav__brand-a,.thanks h1{font-variation-settings:var(--display-axes)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--red);color:var(--cream)}
:focus-visible{outline:2px solid var(--gold-lift);outline-offset:3px;border-radius:2px}

/* for labels that a screen reader needs and the layout does not */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cream);color:var(--ink);padding:.85rem 1.25rem;font-size:.928rem;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:1rem;top:1rem}

/* ---------- 3. Shared primitives ---------- */
.wrap{width:min(100% - (var(--gutter)*2),var(--maxw));margin-inline:auto}
.wrap--narrow{width:min(100% - (var(--gutter)*2),980px);margin-inline:auto}

.eyebrow{
  font-family:var(--body);
  font-size:clamp(.797rem,.78rem + .12vw,.905rem);
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--gold);
}
.eyebrow--dark{color:var(--red)}

.h-section{
  font-family:var(--display);word-spacing:var(--display-word-space);
  font-weight:400;
  font-size:clamp(1.9rem,1.25rem + 2.8vw,3.6rem);
  line-height:1.05;
  letter-spacing:.01em;
}
.h-sub{
  font-family:var(--display);word-spacing:var(--display-word-space);
  font-weight:400;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.9rem);
  line-height:1.15;
}
.lede{
  font-size:clamp(1.14rem,1.06rem + .42vw,1.42rem);
  line-height:1.6;
  font-weight:400;
}
.muted{color:var(--text-dark-soft)}
.muted-light{color:var(--text-light-soft)}

/* buttons */
.btn{
  --btn-bg:var(--red);
  --btn-fg:var(--cream);
  --btn-line:var(--red);
  display:inline-flex;align-items:center;gap:.7em;
  padding:1.05em 1.9em;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-line);
  font-size:clamp(.835rem,.812rem + .1vw,.928rem);
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  line-height:1;cursor:pointer;position:relative;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.btn .btn__arrow{transition:transform .45s var(--ease-out)}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn--gold{--btn-bg:var(--gold);--btn-fg:var(--ink);--btn-line:var(--gold)}
.btn--gold:hover{background:var(--cream);border-color:var(--cream)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--cream);--btn-line:rgba(242,235,220,.38)}
.btn--ghost:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn--ghost-dark{--btn-bg:transparent;--btn-fg:var(--ink);--btn-line:rgba(28,13,14,.3)}
.btn--ghost-dark:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.905rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:.5em;border-bottom:1px solid currentColor;
  transition:gap .4s var(--ease-out),color .4s var(--ease);
}
.link-arrow:hover{gap:1.1em}

/* section rhythm */
.section{padding-block:clamp(4.25rem,3rem + 7vw,9rem)}
.section--tight{padding-block:clamp(3.5rem,2.5rem + 5vw,6.5rem)}
.s-light{background:var(--cream);color:var(--text-dark)}
.s-paper{background:var(--paper);color:var(--text-dark)}
.s-panel{background:var(--panel);color:var(--text-dark)}
.s-dark{background:var(--ink);color:var(--text-light)}
.s-red{background:var(--red-deep);color:var(--text-light)}
.s-dark .muted,.s-red .muted{color:var(--text-light-soft)}

/* grain overlay used on dark bands */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* reveal on scroll */
.reveal{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}

/* image frames */
.frame{position:relative;overflow:hidden;background:var(--ink-lift)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.frame--zoom:hover img{transform:scale(1.045)}
/* letterbox a portrait/odd-ratio photo inside a wide frame, on a blurred bed of itself */
.frame--contain img{object-fit:contain;position:relative;z-index:1}
.frame--contain .frame__blur{
  position:absolute;inset:0;z-index:0;object-fit:cover;
  transform:scale(1.25);filter:blur(42px) saturate(115%) brightness(.72);opacity:.85;
}

/* placeholder for assets not yet supplied */
.placeholder{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.25rem;gap:.4rem;
  background:
    repeating-linear-gradient(135deg,rgba(169,129,46,.13) 0 12px,transparent 12px 24px),
    var(--ink-lift);
  border:1px dashed rgba(169,129,46,.5);
  color:var(--text-light-soft);
}
.placeholder__tag{
  font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lift);
}
.placeholder__body{font-size:1.032rem;line-height:1.45}
/* a placeholder standing in for a picture fills the frame it was given */
.frame > .placeholder,.verbs__media > .placeholder{width:100%;height:100%}
.s-light .placeholder,.s-panel .placeholder,.s-paper .placeholder{
  background:repeating-linear-gradient(135deg,rgba(107,0,6,.08) 0 12px,transparent 12px 24px),rgba(28,13,14,.04);
  border-color:rgba(107,0,6,.4);color:var(--text-dark-soft);
}
.s-light .placeholder__tag,.s-panel .placeholder__tag,.s-paper .placeholder__tag{color:var(--red)}

/* ---------- 4. Navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:90;
  height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(28,13,14,.88);
  -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--rule-dark);
}
.nav__inner{
  width:min(100% - (var(--gutter)*2),var(--maxw));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.6rem);
}

/* brand: skyline mark + typographic lockup */
.nav__brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0;line-height:1}
.nav__mark{height:30px;width:auto;flex-shrink:0;opacity:.95}
.nav__brand-text{display:flex;flex-direction:column;gap:.2rem}
.nav__brand-a{
  font-family:var(--display);word-spacing:var(--display-word-space);font-weight:400;font-size:1.28rem;letter-spacing:.01em;
  color:var(--cream);line-height:1;
}
.nav__brand-b{
  font-size:.78rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-lift);line-height:1;
}

/* links sit close to the brand; the CTA group is pushed to the far right */
.nav__links{display:flex;align-items:center;gap:clamp(.85rem,1.5vw,1.7rem)}
.nav__link{
  display:inline-flex;align-items:center;gap:.4em;
  color:var(--text-light);font-size:.835rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;position:relative;padding-block:.45rem;opacity:.84;
  background:none;border:0;cursor:pointer;font-family:var(--body);
  transition:opacity .3s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out);
}
.nav__link:hover,.nav__link[aria-expanded="true"]{opacity:1}
.nav__link:hover::after,.nav__link[aria-expanded="true"]::after{transform:scaleX(1);transform-origin:left}
.nav__caret{font-size:.6em;transition:transform .35s var(--ease);display:inline-block}
.nav__link[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}

/* services dropdown */
.nav__item{position:relative}
.nav__panel{
  position:absolute;left:-1.15rem;top:calc(100% + 1.15rem);
  min-width:310px;padding:.6rem;
  background:rgba(24,10,11,.97);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--rule-dark);
  box-shadow:0 26px 60px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .4s var(--ease-out),visibility .3s;
  z-index:5;
}
.nav__item.is-open > .nav__panel{opacity:1;visibility:visible;transform:none}
.nav__panel a{
  display:block;padding:.72rem .9rem;
  font-size:1.021rem;letter-spacing:.02em;color:var(--text-light-soft);
  border-left:1px solid transparent;
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.nav__panel a:hover,.nav__panel a:focus-visible{color:var(--cream);background:rgba(169,129,46,.12);border-left-color:var(--gold)}
.nav__panel-all{
  margin-top:.4rem;border-top:1px solid var(--rule-dark);
  font-size:.789rem !important;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-lift) !important;
}

/* CTA group */
.nav__cta{display:flex;align-items:center;gap:.8rem;margin-left:auto;flex-shrink:0}
/* the bar carries brand + six links + phone + button, so at the widths where it
   is all on one line the labels and buttons run a little tighter */
@media (min-width:1181px){
  .nav__link{font-size:.79rem;letter-spacing:.12em}
  .nav__links{gap:clamp(.7rem,1.15vw,1.25rem)}
  .nav__inner{gap:clamp(.9rem,1.6vw,1.8rem)}
  .nav__cta .btn{padding:.9em 1.25em;font-size:.78rem;letter-spacing:.12em}
  .nav__phone{font-size:.82rem}
}
/* between the menu breakpoint and a wide desktop there is not room for both;
   the number is in the footer and on every contact route, the button is not */
@media (min-width:1181px) and (max-width:1439px){ .nav .nav__phone{display:none} }
.nav__phone{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.82em 1.15em;
  border:1px solid rgba(201,162,83,.55);
  color:var(--gold-lift);
  font-size:.87rem;font-weight:600;letter-spacing:.08em;white-space:nowrap;line-height:1;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.nav__phone svg{width:13px;height:13px;flex-shrink:0}
.nav__phone:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.nav .btn{padding:.85em 1.25em;white-space:nowrap}

.nav__toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--cream);margin-left:auto}
.nav__toggle span{display:block;width:26px;height:2px;background:currentColor;margin:5px 0;transition:transform .4s var(--ease),opacity .3s}
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){opacity:0}
.nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1320px){ .nav .btn{display:none} }
@media (min-width:1181px){ .nav__menu{display:contents} }

@media (max-width:1180px){
  .nav__toggle{display:block}
  .nav .btn{display:inline-flex}
  .nav__menu{
    position:fixed;left:0;right:0;top:var(--nav-h);
    background:rgba(20,8,9,.98);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    display:flex;flex-direction:column;align-items:stretch;
    padding:1.5rem var(--gutter) 2rem;gap:1.4rem;
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:opacity .35s var(--ease),transform .45s var(--ease-out);
    border-bottom:1px solid var(--rule-dark);
    max-height:calc(100svh - var(--nav-h));overflow-y:auto;
  }
  .nav.is-open .nav__menu{opacity:1;transform:none;pointer-events:auto}
  .nav__links{flex-direction:column;align-items:stretch;gap:.2rem}
  .nav__link{font-size:1rem;letter-spacing:.1em;padding-block:.85rem;justify-content:space-between}
  .nav__link::after{display:none}
  .nav__item{width:100%}
  /* the dropdown becomes an inline accordion on small screens */
  .nav__panel{
    position:static;min-width:0;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;padding:0 0 .6rem .9rem;
    display:none;
  }
  .nav__item.is-open > .nav__panel{display:block}
  .nav__panel a{padding:.6rem 0;border-left:0;border-bottom:1px solid rgba(242,235,220,.08)}
  .nav__panel a:hover{background:none}
  .nav__cta{flex-direction:column;align-items:stretch;gap:.85rem;margin:.4rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rule-dark)}
  .nav__phone{justify-content:center;font-size:.986rem}
  .nav__cta .btn{justify-content:center}
  .nav.is-open{background:rgba(28,13,14,.95)}
}
@media (max-width:420px){
  .nav__brand-a{font-size:1.1rem}
  .nav__mark{height:24px}
}

/* ---------- 5. Hero ---------- */
.hero{
  /* the hero layering is driven off these three numbers:
     the bottle is placed so its NECK crosses the "Artisan" line and its body
     falls away below the wordmark, rather than the belly sitting on the type. */
  --stage-pad:clamp(.5rem,2vh,2rem);
  --wm-fs:clamp(2.6rem,13vw,11.5rem);   /* must match .wm-a font-size */
  --bottle-h:clamp(280px,47svh,470px);
  --neck:.17;                              /* where the neck sits down the bottle */
  --bottle-top:calc(var(--stage-pad) + (.43 * var(--wm-fs)) - (var(--neck) * var(--bottle-h)));
  position:relative;
  min-height:100svh;
  padding-top:var(--nav-h);
  display:flex;flex-direction:column;
  background:var(--ink);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(58% 46% at 50% 44%,rgba(169,129,46,.30),transparent 68%),
    radial-gradient(70% 60% at 50% 78%,rgba(107,0,6,.62),transparent 72%),
    radial-gradient(120% 90% at 50% 0%,rgba(58,20,22,.9),transparent 60%);
}
/* vertical light shaft behind the bottle; it reads as a reflection on glass */
.hero__shaft{
  position:absolute;left:50%;top:0;bottom:0;width:min(46vw,620px);
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(255,224,168,.10) 32%,rgba(255,224,168,.15) 55%,transparent 88%);
  filter:blur(38px);z-index:0;
}
.hero__inner{
  position:relative;z-index:3;
  width:min(100% - (var(--gutter)*2),var(--maxw));
  margin-inline:auto;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(1.5rem,3vh,3rem) 0;
}
.hero__eyebrow{
  position:relative;z-index:4;
  text-align:center;
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-bottom:clamp(1.25rem,4.5vh,3rem);
  color:var(--gold-lift);
  text-shadow:0 1px 12px rgba(28,13,14,.85);
}
.hero__eyebrow span{white-space:nowrap}
.hero__eyebrow i{display:block;height:1px;width:clamp(20px,7vw,90px);background:linear-gradient(90deg,transparent,var(--gold));flex-shrink:0}
.hero__eyebrow i:last-child{background:linear-gradient(90deg,var(--gold),transparent)}

/* the layered stage.
   Painting order inside .hero__inner's stacking context:
     z1  "Artisan"          (behind the artwork)
     z2  the artwork        (a rotating cast of real pieces)
     z3  "Glass Concepts"   (in front of the artwork)
   .hero__wordmark must NOT get a z-index, transform, opacity or filter of its
   own, or it would trap its two lines in one stacking context and the middle
   layer would be impossible. The parallax is applied per-line for that reason. */
.hero__stage{
  position:relative;
  flex:0 0 auto;
  display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
  padding-top:var(--stage-pad);
  /* exactly tall enough for the tallest piece, with no dead space underneath */
  min-height:calc(var(--bottle-top) + var(--bottle-h) + .5rem);
}
.hero__wordmark{
  position:static;
  text-align:center;
  font-family:var(--display);word-spacing:var(--display-word-space);
  color:var(--cream);
  width:100%;
  user-select:none;
  pointer-events:none;
}
.hero__wordmark .wm-a{
  position:relative;z-index:1;
  display:block;
  font-weight:400;
  font-size:var(--wm-fs);
  line-height:.92;
  letter-spacing:-.02em;
  background:linear-gradient(178deg,#FFF8EA 8%,#F0E3C6 38%,#C9A253 74%,#8C6A25 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(var(--wm-shift,0px));
}
.hero__wordmark .wm-b{
  position:relative;z-index:3;
  display:block;
  margin-top:clamp(.35rem,1.2vw,.9rem);
  font-weight:400;
  font-size:clamp(.72rem,2.5vw,2.15rem);
  letter-spacing:clamp(.14em,.7vw,.5em);
  text-indent:clamp(.14em,.7vw,.5em);
  line-height:1;
  color:var(--cream);
  transform:translateY(var(--wm-shift,0px));
  /* it sits over photography now, so it needs to hold its own */
  text-shadow:0 2px 26px rgba(28,13,14,.85),0 1px 3px rgba(28,13,14,.6);
}

/* ---- the rotating artwork ---- */
.hero__media{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero__piece{
  /* default vertical placement: centred on the join between the two lines, so
     the top half of "Artisan" stays clear and "Glass Concepts" crosses in front */
  --pt:calc(var(--stage-pad) + (.93 * var(--wm-fs)) - (.5 * var(--ph)));
  position:absolute;
  left:var(--px,50%);
  top:0;
  margin:0;
  width:max-content;
  transform:translate(-50%,calc(var(--pt) + var(--scroll-shift,0px)));
  will-change:transform;
}
.hero__piece-inner{
  --slide:clamp(70px,10vw,170px);
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  opacity:0;
  transform:translateX(var(--slide)) scale(.96);
  transition:opacity .5s var(--ease),transform .8s var(--ease-out);
}
/* the incoming piece waits a beat so the outgoing one is clear of centre first */
.hero__piece.is-active .hero__piece-inner{opacity:1;transform:none;transition-delay:.14s}
.hero__piece.is-leaving .hero__piece-inner{
  opacity:0;transition-delay:0s;
  transform:translateX(calc(var(--slide) * -1)) scale(.96);
}
/* the warm pool of light travels with whichever piece is on stage */
.hero__piece-inner::after{
  content:"";position:absolute;left:50%;bottom:-6%;
  width:min(62vw,680px);height:min(20vh,160px);
  transform:translate(-50%,50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(201,162,83,.32),transparent 70%);
  filter:blur(26px);z-index:-1;pointer-events:none;
}
.hero__piece-img{
  height:var(--ph);width:auto;
  filter:drop-shadow(0 42px 46px rgba(0,0,0,.62)) drop-shadow(0 0 70px rgba(169,129,46,.22));
}
.hero__piece-mirror{
  height:var(--ph);width:auto;
  transform:scaleY(-1);margin-top:-2px;opacity:.16;filter:blur(1px);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 30%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 30%);
}
/* Each piece is placed on its own mark. Tall and narrow can sit dead centre;
   wide and round has to move off to one side or it swallows the wordmark. */
.hero__piece--bottle{--px:50%;--ph:var(--bottle-h);--pt:var(--bottle-top)}
.hero__piece--astros{--px:50%;--ph:clamp(175px,26svh,255px)}
.hero__piece--wave  {--px:50%;--ph:clamp(230px,38svh,400px)}
.hero__piece--award {--px:50%;--ph:clamp(200px,32svh,330px)}

.hero__deck{
  position:relative;z-index:3;
  display:flex;justify-content:center;align-items:center;gap:clamp(.85rem,2vw,1.25rem);
  padding-block:clamp(.9rem,2vh,1.5rem) clamp(1.35rem,3vh,2.25rem);
  border-top:1px solid var(--rule-dark);
  margin-top:clamp(1rem,3vh,2rem);
}
.hero__tagline{
  font-family:var(--display);word-spacing:var(--display-word-space);
  font-size:clamp(1.15rem,.95rem + .95vw,1.8rem);
  font-weight:400;font-style:italic;
  color:var(--gold-lift);
  margin-bottom:.5rem;letter-spacing:0;
}
.hero__copy{max-width:56ch;color:var(--text-light-soft);font-size:clamp(.95rem,.92rem + .2vw,1.06rem)}
.hero__copy strong{color:var(--cream);font-weight:500}
.hero__actions{display:flex;gap:.85rem;flex-shrink:0;flex-wrap:wrap}

.hero__scroll{
  position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);
  z-index:4;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-light-soft);display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.hero__scroll i{display:block;width:1px;height:40px;background:linear-gradient(180deg,var(--gold),transparent);animation:drip 2.6s var(--ease) infinite}
@keyframes drip{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  46%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* Short-and-wide screens (a 768px-tall laptop) size the wordmark off WIDTH, which
   leaves the hero taller than the screen. Cap the type by height there and tighten
   the rhythm, so the CTAs stay above the fold. */
@media (min-width:621px) and (max-height:840px){
  .hero{--wm-fs:min(13vw,11.5rem,24svh)}
  .hero__inner{padding-block:clamp(.75rem,1.8vh,1.5rem) 0}
  .hero__eyebrow{margin-bottom:clamp(.9rem,2.6vh,1.75rem)}
  .hero__deck{padding-block:clamp(.7rem,1.4vh,1.1rem) clamp(1rem,2vh,1.5rem)}
  .hero__copy{font-size:.95rem}
}

@media (max-width:960px){
  .hero__deck{flex-direction:column;align-items:stretch}
  .hero__actions{width:100%}
  .hero__actions .btn{flex:1;justify-content:center;min-width:180px}
  .hero__scroll{display:none}
}
@media (max-width:620px){
  /* same layering, smaller numbers, and the stage is sized to the bottle so
     there is no dead space between its base and the copy below */
  .hero{--wm-fs:clamp(2.3rem,12.6vw,3.6rem);--bottle-h:clamp(240px,36svh,310px);min-height:auto}
  .hero__wordmark .wm-a{font-size:var(--wm-fs)}
  .hero__wordmark .wm-b{font-size:clamp(1.02rem,4.4vw,1.6rem);letter-spacing:.24em;text-indent:.24em}
  /* On a narrow screen a disc or a plaque covers most of the word if it is centred
     on the join. Drop them lower so they cross only the base of the letterforms. */
  .hero__piece--astros,.hero__piece--wave,.hero__piece--award{
    --pt:calc(var(--stage-pad) + (.93 * var(--wm-fs)) - (.25 * var(--ph)));
  }
  .hero__piece--astros{--px:50%;--ph:clamp(125px,17svh,158px)}
  .hero__piece--wave  {--px:50%;--ph:clamp(180px,26svh,240px)}
  .hero__piece--award {--px:50%;--ph:clamp(150px,22svh,200px)}
  .hero__deck{padding-block:1rem 2rem}
  .hero__copy{font-size:.95rem}
  .hero__tagline{font-size:1.15rem}
}

/* ---------- 6. Proof marquee ---------- */
.proof{
  position:relative;background:var(--ink);border-top:1px solid var(--rule-dark);
  padding-block:clamp(1.75rem,3vw,2.6rem);overflow:hidden;
}
.proof__label{
  width:min(100% - (var(--gutter)*2),var(--maxw));margin-inline:auto;
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin-bottom:clamp(1.1rem,2vw,1.6rem);
}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee__track{display:flex;gap:clamp(.6rem,1.2vw,1.1rem);flex-shrink:0;padding-right:clamp(.6rem,1.2vw,1.1rem);animation:slide 62s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-100%)}}
.marquee figure{margin:0;width:clamp(150px,20vw,260px);flex-shrink:0}
.marquee .frame{aspect-ratio:4/5;border:1px solid rgba(242,235,220,.08)}
.marquee figcaption{
  margin-top:.6rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-light-soft);
}

/* ---------- 7. Statement band ---------- */
.statement{position:relative;overflow:hidden}
.statement__grid{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.statement__media{margin:0}
.statement__media .frame{aspect-ratio:4/5;max-height:64svh}
.statement__media figcaption{
  margin-top:.85rem;font-size:.905rem;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.5;color:var(--text-light-soft);
}
.s-light .statement__media figcaption,.s-paper .statement__media figcaption,
.s-panel .statement__media figcaption{color:var(--text-dark-soft)}
.statement__col{display:flex;flex-direction:column;gap:clamp(1.25rem,3vw,2rem)}
.statement__hd{
  font-family:var(--display);word-spacing:var(--display-word-space);font-weight:400;
  font-size:clamp(1.5rem,.85rem + 2.9vw,3.1rem);
  line-height:1.14;letter-spacing:.01em;
  overflow-wrap:break-word;
}
.statement__hd em{font-style:italic;color:var(--red)}
.statement__hd .thin{font-weight:400;font-style:italic;color:var(--text-dark-soft)}
.statement__body{display:flex;flex-direction:column;gap:1.5rem}
.statement__meta{display:flex;gap:clamp(1.5rem,4vw,3rem);flex-wrap:wrap;margin:0}
.statement__meta > div{max-width:24ch}
.statement__meta dt{font-family:var(--display);word-spacing:var(--display-word-space);font-size:clamp(1.9rem,1.4rem + 1.9vw,3rem);font-weight:400;line-height:1;color:var(--red)}
.statement__meta dd{margin:.55rem 0 0;font-size:.905rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dark-soft);line-height:1.5}
@media (max-width:960px){.statement__grid{grid-template-columns:1fr;gap:2rem}.statement__media .frame{aspect-ratio:16/10;max-height:46svh}}

/* ---------- 8. Verbs (explorable index) ---------- */
.verbs{position:relative;overflow:hidden}
.verbs__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.5rem)}
.verbs__layout{display:grid;grid-template-columns:1fr minmax(270px,34%);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.verbs__list{border-top:1px solid var(--rule-dark)}
.verb{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(1rem,2.5vw,2.25rem);
  padding-block:clamp(1.4rem,2.6vw,2.35rem);
  border-bottom:1px solid var(--rule-dark);
  position:relative;transition:padding-left .6s var(--ease-out);
}
.verb::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:linear-gradient(90deg,rgba(169,129,46,.10),transparent 60%);
  opacity:0;transition:opacity .6s var(--ease);pointer-events:none;
}
.verb.is-active::before{opacity:1}
.verb.is-active{padding-left:clamp(.6rem,1.6vw,1.5rem)}
.verb__num{
  font-family:var(--body);font-size:.789rem;letter-spacing:.2em;
  color:var(--gold);opacity:.75;padding-top:.55em;align-self:start;
}
.verb__word{
  font-family:var(--display);word-spacing:var(--display-word-space);font-weight:400;
  font-size:clamp(1.85rem,1rem + 3.4vw,3.9rem);
  line-height:1;letter-spacing:.01em;
  color:var(--text-light);
  display:block;
  transition:color .5s var(--ease);
}
.verb.is-active .verb__word{color:var(--gold-lift)}
.verb__services{
  margin-top:.7rem;display:block;
  font-size:clamp(.9rem,.86rem + .18vw,1.02rem);
  color:var(--text-light-soft);letter-spacing:.01em;
}
.verb__go{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--rule-dark);
  display:grid;place-items:center;color:var(--text-light-soft);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease-out);
}
.verb.is-active .verb__go{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:rotate(-45deg)}
.verb__inline{display:none}

.verbs__media{position:sticky;top:calc(var(--nav-h) + 2.5rem);aspect-ratio:4/5;max-height:66svh;overflow:hidden;background:var(--ink-lift)}
.verbs__media > *{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity 1s var(--ease-out),transform 1.6s var(--ease-out);
}
.verbs__media > .is-shown{opacity:1;transform:scale(1)}
.verbs__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 55%,rgba(28,13,14,.55));
}
@media (max-width:960px){
  .verbs__layout{grid-template-columns:1fr}
  .verbs__media{display:none}
  .verb{grid-template-columns:auto 1fr;row-gap:1rem}
  .verb__go{grid-column:2;justify-self:start;margin-top:.25rem}
  .verb__inline{display:block;grid-column:1/-1;margin-top:.35rem}
  .verb__inline .frame{aspect-ratio:16/10}
}

/* ---------- 9. Featured project mini-story ---------- */
.story{position:relative;overflow:hidden}
.story__head{
  display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,4vw,3rem);
  align-items:end;margin-bottom:clamp(2rem,4vw,3.25rem);
}
.story__index{
  font-family:var(--display);word-spacing:var(--display-word-space);font-size:clamp(3rem,2rem + 4vw,6.5rem);font-weight:400;
  line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(169,129,46,.55);opacity:.9;
}
.s-light .story__index,.s-panel .story__index,.s-paper .story__index{-webkit-text-stroke-color:rgba(107,0,6,.45)}
/* Images are sized from the viewport HEIGHT, not just the container width, so a
   feature image is always fully visible without scrolling to see the bottom of it.
   62svh x 16:9 gives the widest box whose height still fits comfortably on screen. */
.story__hero{
  position:relative;margin:0 auto clamp(2.5rem,5vw,4.5rem);
  width:min(100%,calc(62svh * 16 / 9));
}
.story__hero .frame{aspect-ratio:16/9}
.story__hero > .placeholder{max-height:62svh}
.story__hero figcaption{
  margin-top:.85rem;font-size:.905rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-light-soft);
}
.s-light .story__hero figcaption,.s-panel .story__hero figcaption,.s-paper .story__hero figcaption{color:var(--text-dark-soft)}
@media (max-width:760px){.story__hero .frame{aspect-ratio:4/3}}

/* step labels and the section sign-off (shared by every beat) */
.step__label{
  display:flex;align-items:center;gap:.85rem;
  font-size:.812rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin-bottom:1rem;
}
.step__label i{display:block;width:34px;height:1px;background:var(--gold);opacity:.7;flex-shrink:0}
.s-light .step__label,.s-paper .step__label,.s-panel .step__label{color:var(--red)}
.s-light .step__label i,.s-paper .step__label i,.s-panel .step__label i{background:var(--red)}

.story__outro{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid var(--rule-dark);
  display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center;justify-content:space-between;
}
.story__outro-note{max-width:52ch;font-size:1.03rem}

/* ---- beat flow ----
   The old layout pinned one image beside a much taller text column, which left
   dead space on one side once the text outran it. Each beat now carries its own
   image in the same row, vertically centred, so the two sides always end together.
   Category images are woven between the steps at varying widths and alignments. */
.story__flow{display:flex;flex-direction:column;gap:clamp(3rem,7.5vw,7.5rem)}

.beat--split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.66fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:center;
}
.beat--split.beat--flip{grid-template-columns:minmax(0,2.66fr) minmax(0,1fr)}
/* the picture holds the outer margin, the way a gallery hangs to the wall edge */
.beat--split .beat__media .frame{margin-left:auto}
.beat--split.beat--flip .beat__media .frame{margin-left:0;margin-right:auto}
.beat--split.beat--flip .beat__media{order:-1}
.beat__text{max-width:34ch}
.beat__text h3{
  font-family:var(--display);word-spacing:var(--display-word-space);font-variation-settings:var(--display-axes);font-weight:400;
  font-size:clamp(1.12rem,.95rem + .82vw,1.65rem);line-height:1.2;letter-spacing:.01em;margin-bottom:.8rem;
}
.beat__text p{font-size:clamp(.98rem,.94rem + .16vw,1.07rem);line-height:1.5;color:var(--text-light-soft)}
.s-light .beat__text p,.s-paper .beat__text p,.s-panel .beat__text p{color:var(--text-dark-soft)}

/* aspect comes from the real file, so nothing is cropped into a shape it isn't */
/* Every picture is hung to the same height band, so the eye-line holds down the
   page while the widths vary with each photograph. Capping a portrait's width by
   its own height is what stops it towering over the landscapes at this scale. */
.frame--portrait{aspect-ratio:4/5;max-height:76svh;max-width:calc(76svh * 4 / 5)}
.frame--landscape{aspect-ratio:3/2;max-height:76svh}
.beat--offset .frame--landscape,.beat--wide .frame--landscape{aspect-ratio:16/9}
.beat--offset .frame--portrait{aspect-ratio:4/5}
.placeholder.ratio-4x3{aspect-ratio:4/3}
.placeholder.ratio-3x2{aspect-ratio:3/2}

/* an interstitial image, pulled to one side and wider than the step images */
/* an interstitial image paired with a short note, so the opposite side is never
   just empty ground. The note sits low, against the base of the image. */
.beat--offset{
  margin:0;display:grid;gap:clamp(1.25rem,3vw,3rem);align-items:end;
  grid-template-columns:minmax(0,2.66fr) minmax(0,1fr);
}
.beat--offset-left{grid-template-columns:minmax(0,1fr) minmax(0,2.66fr)}
.beat--offset-left .beat__media{order:2}
.beat--offset .beat__media,.beat--offset figure{margin:0}
.beat__note{padding-bottom:clamp(.5rem,2vw,2rem)}
.beat__kicker{
  font-size:.789rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.75rem;
}
.s-light .beat__kicker,.s-paper .beat__kicker,.s-panel .beat__kicker{color:var(--red)}
.beat__note p:not(.beat__kicker){font-size:clamp(.96rem,.92rem + .15vw,1.04rem);line-height:1.5;color:var(--text-light-soft);max-width:30ch}
.s-light .beat__note p:not(.beat__kicker),.s-paper .beat__note p:not(.beat__kicker),
.s-panel .beat__note p:not(.beat__kicker){color:var(--text-dark-soft)}

/* two images side by side, deliberately unequal and vertically staggered */
.beat--pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,2.25rem);align-items:start}
.beat--pair figure{margin:0}
.beat--pair figure:nth-child(2){margin-top:clamp(1.5rem,5vw,4.5rem)}
.beat--pair .frame{aspect-ratio:4/3;max-height:60svh}
.beat--pair figure:nth-child(2) .frame{aspect-ratio:4/5;max-height:60svh;max-width:calc(60svh * 4 / 5)}
.beat--offset-right{margin-left:auto}
.beat--offset-left{margin-right:auto}
.beat--wide{margin:0;width:min(100%,calc(62svh * 16 / 9));margin-inline:auto}
.beat--wide .frame{aspect-ratio:16/9;max-height:62svh}
.beat--wide .craft__video,.beat--wide .ytlite{width:100%}
.beat figcaption{
  margin-top:.85rem;font-size:.905rem;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.5;color:var(--text-light-soft);
}
.s-light .beat figcaption,.s-paper .beat figcaption,.s-panel .beat figcaption{color:var(--text-dark-soft)}

@media (max-width:860px){
  .story__flow{gap:clamp(2.5rem,8vw,4rem)}
  .beat--split,.beat--split.beat--flip{grid-template-columns:1fr;gap:1.5rem}
  .beat--split .beat__media .frame,.beat--split.beat--flip .beat__media .frame{margin-left:0;margin-right:0}
  .frame--portrait{max-width:none}
  .beat--split.beat--flip .beat__media{order:0}
  .beat__text{max-width:none}
  .beat--offset,.beat--offset-left{grid-template-columns:1fr;gap:1.25rem;align-items:start}
  .beat--offset-left .beat__media{order:0}
  .beat__note{padding-bottom:0}
  .beat__note p:not(.beat__kicker){max-width:none}
  .beat--pair{grid-template-columns:1fr;gap:1.75rem}
  .beat--pair figure:nth-child(2){margin-top:0}
  .beat--pair .frame,.beat--pair figure:nth-child(2) .frame{aspect-ratio:4/3;max-height:56svh}
  .frame--portrait{aspect-ratio:4/5;max-height:66svh}
  .frame--landscape{aspect-ratio:4/3;max-height:56svh}
}


/* ---------- 10. Bottles showcase ---------- */
.bottles__head{max-width:64ch;margin-bottom:clamp(2rem,4vw,3.5rem)}
.bottles__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(.7rem,1.6vw,1.5rem);
}
.bottles__grid figure{margin:0;position:relative}
.bottles__grid figcaption{
  margin-top:.75rem;font-size:.905rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light-soft);line-height:1.5;
}
.g-a{grid-column:span 7}.g-a .frame{aspect-ratio:16/11}
.g-b{grid-column:span 5}.g-b .frame{aspect-ratio:4/5}
.g-c{grid-column:span 4}.g-c .frame{aspect-ratio:3/4}
.g-d{grid-column:span 4}.g-d .frame{aspect-ratio:3/4}
.g-e{grid-column:span 4}.g-e .frame{aspect-ratio:3/4}
.g-f{grid-column:span 12}.g-f .frame{aspect-ratio:21/8}
@media (max-width:960px){
  .g-a,.g-b{grid-column:span 12}
  .g-c,.g-d,.g-e{grid-column:span 6}
  .g-a .frame,.g-b .frame{aspect-ratio:4/3}
  .g-f .frame{aspect-ratio:16/9}
}
@media (max-width:600px){.g-c,.g-d,.g-e{grid-column:span 12}}

.audience{
  display:flex;flex-wrap:wrap;gap:.55rem;margin-top:clamp(2rem,4vw,3rem);
}
.audience li{
  border:1px solid var(--rule-dark);padding:.62em 1.1em;
  font-size:.835rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-light-soft);
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.audience li:hover{border-color:var(--gold);color:var(--gold-lift)}

/* ---------- 11. Craft / video ---------- */
.craft__video{position:relative;overflow:hidden;background:var(--ink-lift);aspect-ratio:16/9;width:min(100%,calc(62svh * 16 / 9));margin-inline:auto}
.craft__video video{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.craft__video{aspect-ratio:4/3}}
.craft__overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,13,14,.35),transparent 40%,rgba(28,13,14,.8));
}
.craft__caption{
  position:absolute;left:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2.25rem);right:clamp(1rem,3vw,2.5rem);
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;z-index:2;color:var(--text-light);
}
.craft__playbtn{
  pointer-events:auto;background:rgba(28,13,14,.55);border:1px solid rgba(242,235,220,.35);color:var(--cream);
  padding:.7em 1.2em;font-size:.789rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.craft__playbtn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.craft__techniques{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3.5vw,3rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.technique{border-top:1px solid var(--rule-dark);padding-top:1.5rem}
.s-light .technique,.s-paper .technique,.s-panel .technique{border-top-color:rgba(28,13,14,.24)}
.s-light .technique p,.s-paper .technique p,.s-panel .technique p{color:var(--text-dark-soft)}
.technique h3{font-family:var(--display);word-spacing:var(--display-word-space);font-size:clamp(1.25rem,1.05rem + .85vw,1.75rem);font-weight:400;margin-bottom:.75rem}
.technique p{color:var(--text-light-soft);font-size:1.03rem}
@media (max-width:860px){.craft__techniques{grid-template-columns:1fr;gap:1.75rem}}

/* ---------- 12. Split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split__media{position:relative;min-height:clamp(340px,50vw,620px);overflow:hidden}
.split__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.split__badge{
  position:absolute;left:0;bottom:0;z-index:2;
  background:rgba(28,13,14,.82);color:var(--cream);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:.7rem 1.1rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
}
.split__text{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.25rem,5vw,5rem);gap:1.4rem;
}
.split--flip .split__media{order:2}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
  .split__media{min-height:300px}
}
.callout{
  border-left:2px solid var(--gold);padding:.15rem 0 .15rem 1.15rem;
  font-size:1.067rem;color:var(--text-light-soft);
}
.s-light .callout,.s-panel .callout,.s-paper .callout{border-left-color:var(--red);color:var(--text-dark-soft)}

/* contextual etch houston cross-link inside content */
.crosslink{
  display:block;
  padding:1.25rem 0 0;margin-top:.5rem;border-top:1px solid var(--rule-dark);
  font-size:1.067rem;color:var(--text-light-soft);
}
.s-light .crosslink,.s-panel .crosslink,.s-paper .crosslink{border-top-color:var(--rule-light);color:var(--text-dark-soft)}
.crosslink a{color:var(--gold-lift);border-bottom:1px solid rgba(201,162,83,.45);transition:border-color .35s var(--ease),color .35s var(--ease)}
.s-light .crosslink a,.s-panel .crosslink a,.s-paper .crosslink a{color:var(--red);border-bottom-color:rgba(107,0,6,.35)}
.crosslink a:hover{border-bottom-color:currentColor}

/* ---------- 13. Idea upload form ---------- */
.idea{position:relative;overflow:hidden}
.idea__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:980px){.idea__grid{grid-template-columns:1fr}}
.form{display:grid;gap:1.35rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.field{display:flex;flex-direction:column;gap:.55rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem}
@media (max-width:640px){.form__row{grid-template-columns:1fr}}
.field label,.field__label{
  font-size:.812rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dark-soft);
}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--text-dark);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(28,13,14,.2);
  padding:.95em 1em;width:100%;
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
  border-radius:0;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(107,0,6,.1);
}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B0006' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.dropzone{
  position:relative;text-transform:none;letter-spacing:normal;font-weight:400;
  border:1px dashed rgba(107,0,6,.45);background:rgba(255,255,255,.5);
  padding:clamp(1.5rem,3vw,2.25rem);text-align:center;cursor:pointer;
  transition:border-color .35s var(--ease),background .35s var(--ease);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.dropzone:hover,.dropzone.is-over{border-color:var(--red);background:rgba(245,231,190,.65)}
.dropzone__title{font-size:.928rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.dropzone__hint{font-size:1.044rem;color:var(--text-dark-soft);max-width:46ch}
.dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.dropzone__files{font-size:1.079rem;color:var(--text-dark);margin-top:.35rem;font-weight:500}
.form__consent{display:flex;gap:.7rem;align-items:flex-start;font-size:1.079rem;color:var(--text-dark-soft)}
.form__consent input{width:1.05rem;height:1.05rem;margin-top:.2rem;accent-color:var(--red);flex-shrink:0}
.form__submit{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.form__status{font-size:.95rem;line-height:1.5}
.form__status[data-state="error"]{color:var(--red);font-weight:500}
.form__status[data-state="ok"]{color:#2E6B3A;font-weight:500}
.idea__aside{display:flex;flex-direction:column;gap:1.5rem}
.idea__list li{
  display:flex;gap:.85rem;padding-block:.8rem;border-bottom:1px solid var(--rule-light);
  font-size:1.03rem;color:var(--text-dark-soft);
}
.idea__list li b{color:var(--red);font-weight:600;font-size:.858rem;letter-spacing:.14em;padding-top:.28em;flex-shrink:0}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}

/* ---------- 14. Lineage (Etch Houston) ---------- */
.lineage{position:relative;overflow:hidden;background:var(--red-deep)}
.lineage::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 15% 0%,rgba(169,129,46,.28),transparent 62%);
}
.lineage__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
@media (max-width:960px){.lineage__grid{grid-template-columns:1fr}}
.lineage__hd{font-family:var(--display);word-spacing:var(--display-word-space);font-weight:400;font-size:clamp(1.9rem,1.2rem + 2.9vw,3.5rem);line-height:1.05;letter-spacing:.01em}
.lineage__hd em{font-style:italic;color:var(--gold-lift)}
.lineage__points{display:grid;gap:1px;background:rgba(242,235,220,.16);border:1px solid rgba(242,235,220,.16)}
.lineage__points li{background:var(--red-deep);padding:1.35rem 1.5rem;display:flex;flex-direction:column;gap:.35rem}
.lineage__points strong{font-family:var(--display);word-spacing:var(--display-word-space);font-size:1.1rem;font-weight:400;color:var(--cream)}
.lineage__points span{font-size:.96rem;color:var(--text-light-soft)}

/* ---------- 15. Footer ---------- */
.footer{background:var(--ink);color:var(--text-light);padding-block:clamp(3.5rem,6vw,5.5rem) 2rem;position:relative}
.footer__top{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.15fr;gap:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--rule-dark)}
@media (max-width:960px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer__top{grid-template-columns:1fr}}
.footer__logo{height:clamp(96px,12vw,140px);width:auto;filter:brightness(0) invert(1) opacity(.92);margin-bottom:1.25rem}
.footer h4{font-size:.812rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem}
.footer__blurb{font-size:1rem;color:var(--text-light-soft);max-width:34ch}
.footer__nav li{margin-bottom:.7rem}
.footer__nav a{font-size:1rem;color:var(--text-light-soft);transition:color .35s var(--ease)}
.footer__nav a:hover{color:var(--cream)}
.footer address{font-style:normal;font-size:1.079rem;color:var(--text-light-soft);line-height:1.85}
.footer address a:hover{color:var(--gold-lift)}
.footer__hours{font-size:1rem;color:var(--text-light-soft);line-height:1.9}
.footer__hours div{display:flex;justify-content:space-between;gap:1rem;max-width:270px}
.footer__bottom{padding-top:1.75rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.986rem;color:var(--text-light-soft)}
.footer__bottom a:hover{color:var(--gold-lift)}

/* ---------- 16. Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .marquee__track{animation:none}
  .marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hero__scroll i{animation:none}
  .verbs__media > *{transform:none}
}

/* ---------- 17. The Collection index ---------- */
.collection__head{display:grid;grid-template-columns:1fr minmax(280px,38%);gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2rem,4vw,3.25rem)}
@media (max-width:860px){.collection__head{grid-template-columns:1fr}}
.contents{border-top:1px solid var(--rule-light)}
.s-dark .contents,.s-red .contents{border-top-color:var(--rule-dark)}
.contents li{border-bottom:1px solid var(--rule-light)}
.s-dark .contents li{border-bottom-color:var(--rule-dark)}
.contents a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(.9rem,2vw,1.75rem);
  padding-block:clamp(.85rem,1.6vw,1.15rem);
  transition:padding-left .5s var(--ease-out),color .4s var(--ease);
}
.contents a:hover{padding-left:.6rem;color:var(--red)}
.s-dark .contents a:hover{color:var(--gold-lift)}
.contents__num{font-size:.789rem;letter-spacing:.2em;color:var(--gold);opacity:.85}
.contents__name{font-family:var(--display);word-spacing:var(--display-word-space);font-variation-settings:var(--display-axes);font-weight:400;font-size:clamp(1.05rem,.95rem + .55vw,1.5rem);line-height:1.2}
.contents__go{font-size:1.044rem;opacity:.5;transition:transform .45s var(--ease-out),opacity .4s}
.contents a:hover .contents__go{transform:translateX(5px);opacity:1}

/* ---------- 18. Story extras (grids, video and notes inside a story) ---------- */
.story__extra{margin-top:clamp(2.25rem,4vw,3.75rem)}
.story__extra-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin-bottom:clamp(1.1rem,2.5vw,1.75rem);
}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(.9rem,1.8vw,1.6rem)}
.tiles figure{margin:0}
.tiles .frame,.tiles .placeholder{aspect-ratio:3/4;max-height:58svh}
.tiles figcaption{margin-top:.65rem;font-size:.893rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--text-dark-soft)}
.s-dark .tiles figcaption,.s-red .tiles figcaption{color:var(--text-light-soft)}
.tiles--wide{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
.tiles--wide .frame,.tiles--wide .placeholder{aspect-ratio:4/3}

/* ---------- 19. Interior page shell (stub pages) ---------- */
.page-hero{
  position:relative;overflow:hidden;background:var(--ink);color:var(--text-light);
  padding-block:calc(var(--nav-h) + clamp(3.5rem,8vw,7rem)) clamp(3rem,6vw,5.5rem);
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 60% at 22% 10%,rgba(169,129,46,.24),transparent 62%),
    radial-gradient(80% 80% at 80% 100%,rgba(107,0,6,.55),transparent 70%);
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{
  font-family:var(--display);word-spacing:var(--display-word-space);font-variation-settings:var(--display-axes);font-weight:400;
  font-size:clamp(2.3rem,1.4rem + 3.9vw,4.6rem);line-height:1.02;letter-spacing:.01em;
  margin:.85rem 0 1.25rem;max-width:20ch;
}
.page-hero .lede{max-width:62ch;color:var(--text-light-soft)}
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.812rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-light-soft)}
.crumbs a:hover{color:var(--gold-lift)}
.crumbs span{opacity:.5}
.page-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:clamp(1.75rem,3vw,2.5rem)}

.stub{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.stub{grid-template-columns:1fr}}
.stub__note{display:flex;flex-direction:column;gap:1.25rem}
.stub__list li{display:flex;gap:.9rem;padding-block:.75rem;border-bottom:1px solid var(--rule-light);font-size:1.03rem;color:var(--text-dark-soft)}
.stub__list li b{color:var(--red);font-weight:600;font-size:.835rem;letter-spacing:.14em;padding-top:.3em;flex-shrink:0;text-transform:uppercase}

/* ---------- 20. Tone-aware helpers ----------
   Sections get reordered and re-toned as the page evolves. These rules make the
   same markup read correctly on a light OR a dark band, so changing a section's
   tone is a one-class edit rather than a markup rewrite. */
.s-light .eyebrow,.s-paper .eyebrow,.s-panel .eyebrow{color:var(--red)}
.s-dark .eyebrow--dark,.s-red .eyebrow--dark{color:var(--gold)}
.s-light .muted-light,.s-paper .muted-light,.s-panel .muted-light{color:var(--text-dark-soft)}
.s-light.grain::after,.s-paper.grain::after,.s-panel.grain::after{display:none}

.s-light .audience li,.s-paper .audience li,.s-panel .audience li{
  border-color:rgba(28,13,14,.22);color:var(--text-dark-soft);
}
.s-light .audience li:hover,.s-paper .audience li:hover,.s-panel .audience li:hover{
  border-color:var(--red);color:var(--red);
}
.s-light .verbs__list,.s-paper .verbs__list,.s-panel .verbs__list{border-top-color:var(--rule-light)}
.s-light .verb,.s-paper .verb,.s-panel .verb{border-bottom-color:var(--rule-light)}
.s-light .verb__word,.s-paper .verb__word,.s-panel .verb__word{color:var(--text-dark)}
.s-light .verb__services,.s-paper .verb__services,.s-panel .verb__services{color:var(--text-dark-soft)}
.s-light .verb__go,.s-paper .verb__go,.s-panel .verb__go{border-color:var(--rule-light);color:var(--text-dark-soft)}
.s-light .verb.is-active .verb__word{color:var(--red)}

.s-light .story__outro,.s-paper .story__outro,.s-panel .story__outro{border-top-color:var(--rule-light)}
.s-light .marquee figcaption{color:var(--text-dark-soft)}

/* the 40+ years statement, when it sits on a dark band */
.s-dark .statement__hd em,.s-red .statement__hd em{color:var(--gold-lift)}
.s-dark .statement__hd .thin,.s-red .statement__hd .thin{color:var(--text-light-soft)}
.s-dark .statement__meta dt,.s-red .statement__meta dt{color:var(--gold-lift)}
.s-dark .statement__meta dd,.s-red .statement__meta dd{color:var(--text-light-soft)}

/* ---------- 21. Section entry animations ----------
   Layered on top of the base .reveal so no markup changes are needed: each kind
   of element gets a treatment suited to it, and everything is neutralised under
   prefers-reduced-motion at the bottom of this file. */

/* headings wipe up from behind their own baseline */
.h-section.reveal,.statement__hd.reveal,.lineage__hd.reveal,.hero__wordmark.reveal{
  clip-path:inset(0 0 105% 0);
  transform:translateY(18px);
  transition:clip-path 1.15s var(--ease-out),transform 1.15s var(--ease-out),opacity .5s var(--ease);
}
.h-section.reveal.is-in,.statement__hd.reveal.is-in,.lineage__hd.reveal.is-in{
  clip-path:inset(0 0 -25% 0);transform:none;
}

/* eyebrows draw in from tight tracking */
.eyebrow.reveal{letter-spacing:.5em;transition:opacity .7s var(--ease),letter-spacing 1s var(--ease-out),transform .9s var(--ease-out)}
.eyebrow.reveal.is-in{letter-spacing:.26em}

/* the big outline numerals swing in from the right */
.story__index.reveal{transform:translateX(38px) scale(.92);transition:opacity .9s var(--ease),transform 1.2s var(--ease-out)}
.story__index.reveal.is-in{transform:none}

/* feature photography settles out of a slow push-in behind a rising mask */
.story__hero.reveal{transition:opacity .8s var(--ease)}
.story__hero.reveal .frame,.story__hero.reveal > .placeholder{
  clip-path:inset(12% 6% 12% 6%);
  transition:clip-path 1.4s var(--ease-out);
}
.story__hero.reveal.is-in .frame,.story__hero.reveal.is-in > .placeholder{clip-path:inset(0 0 0 0)}
.story__hero.reveal .frame img:not(.frame__blur){transform:scale(1.12);transition:transform 1.8s var(--ease-out)}
.story__hero.reveal.is-in .frame img:not(.frame__blur){transform:none}

/* step blocks: the rule beside the label draws itself */
.beat.reveal .step__label i{transform:scaleX(0);transform-origin:left;transition:transform .85s var(--ease-out) .25s}
.beat.reveal.is-in .step__label i{transform:scaleX(1)}

/* tile grids and list rows come in one after another */
.tiles.reveal figure{
  opacity:0;transform:translateY(30px) scale(.98);
  transition:opacity .8s var(--ease-out),transform 1s var(--ease-out);
}
.tiles.reveal.is-in figure{opacity:1;transform:none}
.tiles.reveal figure:nth-child(1){transition-delay:.05s}
.tiles.reveal figure:nth-child(2){transition-delay:.15s}
.tiles.reveal figure:nth-child(3){transition-delay:.25s}
.tiles.reveal figure:nth-child(4){transition-delay:.35s}
.tiles.reveal figure:nth-child(5){transition-delay:.45s}
.tiles.reveal figure:nth-child(6){transition-delay:.55s}

.verbs__list.reveal .verb,.contents.reveal li{
  opacity:0;transform:translateX(-26px);
  transition:opacity .7s var(--ease-out),transform .9s var(--ease-out);
}
.verbs__list.reveal.is-in .verb,.contents.reveal.is-in li{opacity:1;transform:none}
.verbs__list.reveal .verb:nth-child(1),.contents.reveal li:nth-child(1){transition-delay:.06s}
.verbs__list.reveal .verb:nth-child(2),.contents.reveal li:nth-child(2){transition-delay:.14s}
.verbs__list.reveal .verb:nth-child(3),.contents.reveal li:nth-child(3){transition-delay:.22s}
.verbs__list.reveal .verb:nth-child(4),.contents.reveal li:nth-child(4){transition-delay:.30s}
.verbs__list.reveal .verb:nth-child(5),.contents.reveal li:nth-child(5){transition-delay:.38s}
.contents.reveal li:nth-child(6){transition-delay:.46s}
.contents.reveal li:nth-child(7){transition-delay:.54s}
.contents.reveal li:nth-child(8){transition-delay:.62s}

/* the statement's two big numerals count up out of the floor */
.statement__meta.reveal div{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.statement__meta.reveal.is-in div{opacity:1;transform:none}
.statement__meta.reveal div:nth-child(2){transition-delay:.16s}

/* lineage cards */
.lineage__points.reveal li{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.lineage__points.reveal.is-in li{opacity:1;transform:none}
.lineage__points.reveal li:nth-child(2){transition-delay:.14s}
.lineage__points.reveal li:nth-child(3){transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  .h-section.reveal,.statement__hd.reveal,.lineage__hd.reveal,.hero__wordmark.reveal,
  .story__hero.reveal .frame,.story__hero.reveal > .placeholder{clip-path:none !important}
  .eyebrow.reveal{letter-spacing:.26em !important}
  .story__hero.reveal .frame img,.story__index.reveal,
  .tiles.reveal figure,
  .verbs__list.reveal .verb,.contents.reveal li,
  .statement__meta.reveal div,.lineage__points.reveal li,
  .beat.reveal .step__label i,.hero__piece-inner{opacity:1 !important;transform:none !important}
}

/* ---------- 22. Before / after compare slider ----------
   Two pixel-aligned frames of the same panel: powered off (frosted) under,
   powered on (clear) clipped on top. Drag, click or arrow-key the divider.
   Without JS it rests at 50%, which still reads as a before/after. */
.compare{
  --pos:50%;
  position:relative;overflow:hidden;background:var(--ink-lift);
  aspect-ratio:16/9;width:100%;
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
.compare img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:none;
}
.compare__clear{clip-path:inset(0 0 0 var(--pos))}

/* the divider */
.compare__bar{
  position:absolute;top:0;bottom:0;left:var(--pos);width:2px;
  margin-left:-1px;background:var(--cream);
  box-shadow:0 0 0 1px rgba(28,13,14,.28),0 0 18px rgba(28,13,14,.45);
  pointer-events:none;z-index:3;
}
.compare__grip{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:clamp(40px,4.2vw,54px);aspect-ratio:1;border-radius:50%;
  background:rgba(28,13,14,.55);border:1px solid rgba(242,235,220,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;
  color:var(--cream);font-size:.998rem;letter-spacing:.06em;
  transition:background .4s var(--ease),border-color .4s var(--ease),scale .4s var(--ease-out);
}
.compare:hover .compare__grip,.compare__range:focus-visible ~ .compare__bar .compare__grip{
  background:var(--gold);color:var(--ink);border-color:var(--gold);scale:1.06;
}

/* the real control: a range input laid over the whole frame */
.compare__range{
  position:absolute;inset:0;z-index:4;width:100%;height:100%;
  margin:0;padding:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.compare__range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;cursor:ew-resize}
.compare__range::-moz-range-thumb{width:44px;height:100%;border:0;border-radius:0;cursor:ew-resize}
.compare__range:focus{outline:none}
.compare__range:focus-visible ~ .compare__bar{box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(28,13,14,.45)}

/* state labels */
.compare__tag{
  position:absolute;bottom:clamp(.7rem,2vw,1.35rem);z-index:2;
  padding:.5em 1em;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(28,13,14,.55);border:1px solid rgba(242,235,220,.28);color:var(--cream);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  pointer-events:none;white-space:nowrap;
}
.compare__tag--off{left:clamp(.7rem,2vw,1.35rem)}
.compare__tag--on{right:clamp(.7rem,2vw,1.35rem)}
@media (max-width:560px){
  .compare{aspect-ratio:4/3}
  .compare__tag{font-size:.78rem;letter-spacing:.12em;padding:.45em .7em}
}

/* one-time nudge so the divider reads as draggable */
@media (prefers-reduced-motion:no-preference){
  .compare.is-hinting{animation:compare-hint 2.1s var(--ease-out) 1}
}
@keyframes compare-hint{
  0%{--pos:50%}  22%{--pos:66%}  60%{--pos:34%}  100%{--pos:50%}
}
@property --pos{syntax:'<percentage>';inherits:true;initial-value:50%}

/* side-by-side variant, for a pair the camera moved between */
.compare-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,1.2vw,1rem)}
.compare-duo figure{margin:0;position:relative}
.compare-duo .frame{aspect-ratio:3/4}
.compare-duo figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:.6em .85em;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);background:linear-gradient(180deg,transparent,rgba(28,13,14,.82));
}

/* ---------- 23. Lightweight YouTube embed ----------
   Poster + play button only. Nothing is requested from YouTube until the
   viewer presses play, at which point the iframe replaces the facade in place. */
.ytlite{
  position:relative;overflow:hidden;background:var(--ink-lift);
  aspect-ratio:16/9;width:min(100%,calc(62svh * 16 / 9));margin-inline:auto;
  display:block;
}
.ytlite__btn{
  position:absolute;inset:0;z-index:3;width:100%;height:100%;
  margin:0;padding:0;border:0;background:transparent;cursor:pointer;
}
.ytlite__btn:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.ytlite img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease-out),filter .5s var(--ease)}
.ytlite:hover img{transform:scale(1.03)}
.ytlite iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5}
.ytlite__veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,13,14,.3),rgba(28,13,14,.12) 42%,rgba(28,13,14,.78));
}
.ytlite__play{
  position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:2;
  width:clamp(64px,7vw,88px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;pointer-events:none;
  background:rgba(28,13,14,.5);border:1px solid rgba(242,235,220,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .4s var(--ease),border-color .4s var(--ease),scale .4s var(--ease-out);
}
.ytlite__play::after{
  content:"";width:0;height:0;margin-left:.22em;
  border-left:1.05em solid var(--cream);
  border-top:.62em solid transparent;border-bottom:.62em solid transparent;
  transition:border-left-color .4s var(--ease);
}
.ytlite__btn:hover .ytlite__play,.ytlite__btn:focus-visible .ytlite__play{
  background:var(--gold);border-color:var(--gold);scale:1.07;
}
.ytlite__btn:hover .ytlite__play::after,.ytlite__btn:focus-visible .ytlite__play::after{border-left-color:var(--ink)}
.ytlite__label{
  position:absolute;left:clamp(1rem,3vw,2.25rem);right:clamp(1rem,3vw,2.25rem);
  bottom:clamp(1rem,3vw,2rem);z-index:2;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;
  color:var(--text-light);
}
.ytlite__note{font-size:.789rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,235,220,.82)}
.ytlite.is-playing .ytlite__veil,.ytlite.is-playing .ytlite__btn,
.ytlite.is-playing .ytlite__label,.ytlite.is-playing img{display:none}
@media (max-width:760px){.ytlite{aspect-ratio:16/9}}

/* ---------- 24. Cut-out objects ----------
   A background-removed photograph has no edges of its own, so a framed box
   around it reads as a mistake. These sit straight on the section ground and
   join the same height band as the framed pictures. */
.cutout{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;max-height:76svh;max-width:calc(76svh * 4 / 5);
}
/* absolute against the ratio box, so height:100% has something definite to
   resolve against; otherwise it falls back to auto and the object overflows */
.cutout img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.cutout--wide{aspect-ratio:3/2;max-height:56svh;max-width:none}
@media (max-width:860px){
  .cutout{max-width:none;max-height:56svh}
  .cutout--wide{max-height:42svh}
}

/* a before/after duo of landscape frames, for a job shot mid-work and done */
.compare-duo--landscape .frame{aspect-ratio:4/3}
@media (max-width:620px){.compare-duo{grid-template-columns:1fr}}

/* a line-up of cut-out glassware standing on one shelf. Heights are set per piece
   so the pieces keep their real proportions to each other rather than all being
   scaled to the same box. */
.cutout-row{
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(1rem,4vw,3.5rem);
  height:clamp(230px,52svh,480px);
}
.cutout-row img{
  width:auto;height:var(--h,100%);max-width:none;
  object-fit:contain;display:block;
}
@media (max-width:620px){.cutout-row{gap:1rem;height:clamp(180px,34svh,260px)}}

/* A centred play control for the studio film. Autoplay is suppressed whenever the
   viewer prefers reduced motion (and by some browser policies), and the small text
   toggle alone made a paused film look like a still photograph. This shows
   whenever the video is not running and gets out of the way when it is. */
.craft__bigplay{
  position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:3;
  width:clamp(64px,7vw,88px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;padding:0;
  background:rgba(28,13,14,.5);border:1px solid rgba(242,235,220,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .4s var(--ease),border-color .4s var(--ease),scale .4s var(--ease-out),opacity .3s var(--ease);
}
.craft__bigplay span{
  width:0;height:0;margin-left:.22em;
  border-left:1.05em solid var(--cream);
  border-top:.62em solid transparent;border-bottom:.62em solid transparent;
  transition:border-left-color .4s var(--ease);
}
.craft__bigplay:hover,.craft__bigplay:focus-visible{background:var(--gold);border-color:var(--gold);scale:1.07}
.craft__bigplay:hover span,.craft__bigplay:focus-visible span{border-left-color:var(--ink)}
[data-video].is-playing .craft__bigplay{opacity:0;pointer-events:none}

/* ---------- 25. Bottle line-up ----------
   The five rodeo bottles were one small vertical photograph; they are now five
   cut-outs standing on a shared baseline. Heights come from measuring the
   silhouettes in the original group shot, so the graduation is the real one. */
.lineup__label{
  font-size:.789rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red);margin-bottom:clamp(.75rem,2vw,1.25rem);text-align:center;
}
.s-dark .lineup__label,.s-red .lineup__label{color:var(--gold-lift)}
.bottle-lineup{
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(.5rem,2.6vw,3rem);
  aspect-ratio:16/9;max-height:62svh;width:100%;
}
.bottle-lineup img{
  width:auto;height:var(--h,100%);max-width:none;
  object-fit:contain;display:block;
  filter:drop-shadow(0 18px 22px rgba(28,13,14,.22));
}
@media (max-width:760px){
  .bottle-lineup{aspect-ratio:4/3;gap:clamp(.25rem,1.6vw,.75rem)}
  .bottle-lineup img{filter:drop-shadow(0 10px 14px rgba(28,13,14,.2))}
}

/* a square cut-out object, capped by the same height band as the framed pictures */
.cutout--square{aspect-ratio:1/1;max-height:56svh;max-width:56svh}
.cutout--square img{filter:drop-shadow(0 16px 20px rgba(28,13,14,.22))}
@media (max-width:860px){.cutout--square{max-width:none;max-height:44svh}}

/* ---------- 26. Gallery page ----------
   Justified rows, the way a gallery actually hangs: every picture in a row shares
   one height and each takes the width its own aspect ratio asks for, so nothing is
   cropped to fit a grid cell. flex-grow carries the ratio; aspect-ratio on the
   figure makes the heights come out equal. */
.gal-intro{
  max-width:56ch;font-size:clamp(1.09rem,1.02rem + .3vw,1.26rem);line-height:1.6;
  color:var(--text-dark-soft);margin-bottom:clamp(2.75rem,6vw,5rem);
}
.s-dark .gal-intro,.s-red .gal-intro{color:var(--text-light-soft)}

.gal-rows{
  /* one height band for every row on the page; a row's WIDTH is then just that
     height multiplied by the aspect ratios it carries, so wide pictures reach
     across and tall ones sit in a narrow column. Alternating the side each row
     hangs from is what walks the eye down the page. */
  --gal-h:clamp(300px,62svh,620px);
  display:flex;flex-direction:column;gap:clamp(2.5rem,6vw,6.5rem);
}
.gal-row{
  display:flex;gap:clamp(.7rem,1.8vw,1.75rem);align-items:flex-start;
  width:min(100%,calc(var(--sum,2) * var(--gal-h)));
  min-width:min(100%,34%);
}
.gal-row--l{margin-right:auto}
.gal-row--r{margin-left:auto}
.gal-fig{
  margin:0;min-width:0;
  flex:calc(var(--ar,1.5) / var(--sum,1)) 1 0;
  display:flex;flex-direction:column;
}
.gal-fig img{
  width:100%;aspect-ratio:var(--ar,1.5);height:auto;
  object-fit:cover;display:block;background:var(--ink-lift);
}
/* a cut-out has no edges of its own, so it sits on the ground rather than in a box */
.gal-fig--cutout img{object-fit:contain;background:none}
.gal-fig figcaption{
  margin-top:.7rem;font-size:.87rem;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.5;color:var(--text-dark-soft);
}
.s-dark .gal-fig figcaption,.s-red .gal-fig figcaption{color:var(--text-light-soft)}

.gal-feature{margin:0 0 clamp(2.5rem,6vw,6.5rem)}
.gal-feature figcaption{
  margin-top:.85rem;font-size:.905rem;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.5;color:var(--text-dark-soft);
}
.s-dark .gal-feature figcaption{color:var(--text-light-soft)}

.gal-more{margin-top:clamp(2.75rem,6vw,5rem)}
.gal-more a{font-size:.928rem;letter-spacing:.14em;text-transform:uppercase}

@media (max-width:760px){
  /* on a phone every picture takes the full measure; the zig-zag has no room */
  .gal-rows{gap:clamp(1.75rem,7vw,3rem)}
  .gal-row{flex-direction:column;gap:clamp(.9rem,3vw,1.4rem);width:100%;margin:0}
  .gal-fig{flex:none;width:100%}
}

/* ---------- 27. Gallery hook (homepage) ----------
   The homepage's job is to send people to the gallery, so this sits high on the
   page and behaves like a trailer: one line of promise, one button, and a strip
   of the strongest work running edge to edge. */
.hook{padding-bottom:0}
.hook__head{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,5rem);align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.hook__aside p{color:var(--text-light-soft);max-width:46ch;font-size:clamp(1.03rem,.99rem + .22vw,1.14rem);line-height:1.6}
.hook__cta{margin-top:clamp(1.25rem,2.5vw,2rem)}
@media (max-width:860px){.hook__head{grid-template-columns:1fr;align-items:start}}

.hook__strip{
  display:flex;gap:clamp(.4rem,1vw,.9rem);
  padding-inline:clamp(.4rem,1vw,.9rem);
  align-items:flex-start;
}
.hook__tile{
  position:relative;display:block;overflow:hidden;
  flex:1 1 0;min-width:0;
  background:var(--ink-lift);
}
/* one common portrait for the teaser so the strip reads as a row of gallery
   panels; the uncropped pictures are a click away */
.hook__tile img{
  width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease-out),opacity .5s var(--ease);
}
.hook__tile:hover img,.hook__tile:focus-visible img{transform:scale(1.05)}
.hook__tag{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:2.5rem .9rem .8rem;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);
  background:linear-gradient(180deg,transparent,rgba(28,13,14,.85));
  display:flex;gap:.6em;align-items:baseline;
}
.hook__tag b{color:var(--gold-lift);font-weight:600}
.hook__foot{margin-top:clamp(1.25rem,3vw,2rem);padding-bottom:clamp(3rem,5vw,5rem)}
@media (max-width:860px){
  /* three across is the most a phone can carry before the pictures stop reading */
  .hook__strip{flex-wrap:wrap}
  .hook__tile{flex:1 1 calc(50% - 1rem)}
  .hook__tile:first-child{flex-basis:100%}
}

/* ---------- 28. Services list (homepage) ---------- */
.svc{border-top:1px solid var(--rule-light);margin-top:clamp(1.5rem,3vw,2.5rem)}
.svc__item{border-bottom:1px solid var(--rule-light)}
.svc__item a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.5rem);align-items:center;
  padding:clamp(1.1rem,2.2vw,1.6rem) 0;
  transition:padding-left .5s var(--ease),color .4s var(--ease);
}
.svc__item a:hover,.svc__item a:focus-visible{padding-left:clamp(.5rem,1.5vw,1.25rem);color:var(--red)}
.svc__num{font-size:.835rem;letter-spacing:.16em;color:var(--red);font-weight:600}
.svc__body{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.svc__name{
  font-family:var(--display);word-spacing:var(--display-word-space);
  font-size:clamp(1.05rem,.92rem + .6vw,1.5rem);line-height:1.2;
}
.svc__note{font-size:.99rem;color:var(--text-dark-soft);line-height:1.5}
.svc__go{
  width:2.1rem;height:2.1rem;border:1px solid var(--rule-light);border-radius:50%;
  display:grid;place-items:center;font-size:.928rem;color:var(--text-dark-soft);flex-shrink:0;
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.svc__item a:hover .svc__go{border-color:var(--red);color:var(--cream);background:var(--red)}
@media (max-width:620px){
  .svc__item a{grid-template-columns:auto minmax(0,1fr);gap:1rem}
  .svc__go{display:none}
}

/* ---------- 29. Gallery notes ----------
   A narrow row leaves a wide margin beside it. Rather than let that read as dead
   space, the row goes full width and an aside explains the work in it - which is
   what a gallery label does. */
.gal-row--noted{
  width:100%;max-width:100%;
  align-items:flex-start;
  gap:clamp(1.5rem,4vw,4.5rem);
}
.gal-row--noted{--gal-h:clamp(330px,64svh,660px)}
.gal-row--noted .gal-row__pics{
  display:flex;gap:clamp(.7rem,1.8vw,1.75rem);
  flex:0 1 auto;
  /* a very tall picture would otherwise come out as a sliver beside its label */
  width:clamp(210px,calc(var(--sum,1) * var(--gal-h)),66%);
  min-width:0;
}
.gal-row--tall{--gal-h:clamp(430px,92svh,1000px)}
/* a single tall specimen beside a full-size label, museum-style */
.gal-row--spaced{gap:clamp(2rem,9vw,8.5rem)}
/* the cut-out is only 177px of real pixels, so this is as large as it goes
   before it softens; enough to read as a specimen beside its label */
.gal-row--spaced{--gal-h:clamp(420px,86svh,900px)}
.gal-row--spaced .gal-row__pics{width:clamp(250px,calc(var(--sum,1) * var(--gal-h)),34%)}
.gal-row--spaced .gal-note{max-width:52ch}
.gal-row--spaced .gal-note p{font-size:clamp(1.14rem,1.06rem + .44vw,1.42rem);line-height:1.6}
.gal-row--spaced .gal-note__kicker{font-size:.905rem;margin-bottom:1.25rem}
@media (max-width:860px){.gal-row--spaced{gap:1.5rem}}
.gal-note{
  flex:1 1 0;min-width:0;max-width:46ch;
  padding-top:clamp(.25rem,1.5vw,1.5rem);
}
.gal-note__kicker{
  font-size:.835rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin-bottom:1rem;
}
.s-dark .gal-note__kicker,.s-red .gal-note__kicker{color:var(--gold-lift)}
.gal-note p{
  font-size:clamp(1.09rem,1.02rem + .32vw,1.27rem);line-height:1.62;
  color:var(--text-dark-soft);
}
.gal-note p + p{margin-top:.9em}
.s-dark .gal-note p,.s-red .gal-note p{color:var(--text-light-soft)}
.gal-note strong{color:var(--text-dark);font-weight:600}
.s-dark .gal-note strong,.s-red .gal-note strong{color:var(--cream)}
.gal-note em{font-style:italic}

/* rows without a note keep the plain picture flow */
.gal-row:not(.gal-row--noted) .gal-row__pics{display:contents}

@media (max-width:860px){
  .gal-row--noted{flex-direction:column;gap:1.5rem}
  .gal-row--noted .gal-row__pics{width:100%;max-width:100%}
  .gal-note{max-width:none;padding-top:0}
  /* a tall bottle at the full measure becomes a thousand pixels of scrolling */
  .gal-row--tall .gal-row__pics{max-width:76%}
  .gal-row--spaced .gal-row__pics{max-width:56%}
}
@media (max-width:760px){
  /* pictures in a noted row stay side by side, sharing the width by aspect
     ratio; at full width each, everything after the first ran off the screen */
  .gal-row--noted .gal-row__pics .gal-fig{flex:calc(var(--ar,1.5) / var(--sum,1)) 1 0;width:auto}
}

/* ---------- 30. Gallery call to action (homepage) ----------
   The job of the homepage is to get people into the gallery, so this sits
   immediately under the marquee and is text-led: no second band of pictures
   butting against the moving one. */
.gcta__inner{max-width:62ch;margin-inline:auto;text-align:center}
.gcta__lede{
  font-size:clamp(1rem,.95rem + .3vw,1.2rem);line-height:1.6;
  color:var(--text-dark-soft);margin:1.25rem auto 2.25rem;max-width:52ch;
}
.gcta__foot{
  margin-top:1.5rem;font-size:.789rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-dark-soft);
}
/* the one button on the page that should be impossible to miss */
.btn--xl{
  font-size:clamp(.82rem,.74rem + .35vw,1.02rem);
  padding:1.15em 2.5em;letter-spacing:.2em;
}
.btn--xl .btn__arrow{margin-left:.7em}

/* ---------- 31. Gallery call to action, second pass ----------
   The first version was a centred paragraph and a button, which read as a notice
   rather than an invitation. Deep red with a gold wash, an oversized ghost
   numeral and the three numbers that actually make people curious. */
.gcta{position:relative;overflow:hidden}
.gcta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 110% at 82% 10%,rgba(169,129,46,.34),transparent 60%);
}
.gcta__ghost{
  position:absolute;right:-.06em;bottom:-.34em;z-index:0;
  font-family:var(--display);word-spacing:var(--display-word-space);
  font-size:clamp(14rem,34vw,30rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(242,235,220,.11);
  pointer-events:none;user-select:none;
}
.gcta__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,7vw,6rem);align-items:center;
}
.gcta__lead .h-section{margin-top:.9rem}
.gcta__lead em{font-style:italic;color:var(--gold-lift)}
.gcta__side{
  border-left:1px solid rgba(242,235,220,.22);
  padding-left:clamp(1.25rem,3.5vw,3rem);
}
.gcta__lede{
  font-size:clamp(1.11rem,1.03rem + .38vw,1.38rem);line-height:1.55;
  color:var(--cream);max-width:40ch;
}
.gcta__lede--tight{
  margin-top:1em;color:var(--text-light-soft);
  font-size:clamp(1.03rem,.98rem + .22vw,1.17rem);
}
.gcta__stats{
  display:flex;gap:clamp(1.5rem,4vw,3.25rem);flex-wrap:wrap;
  margin:clamp(2rem,4vw,3rem) 0 0;
}
.gcta__stats dt{
  font-family:var(--display);word-spacing:var(--display-word-space);
  font-size:clamp(2.1rem,1.5rem + 2.1vw,3.4rem);line-height:1;color:var(--gold-lift);
}
.gcta__stats dd{
  margin:.5rem 0 0;font-size:.812rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-light-soft);
}
@media (max-width:860px){
  .gcta__grid{grid-template-columns:1fr;gap:2rem}
  .gcta__side{border-left:0;border-top:1px solid rgba(242,235,220,.22);padding-left:0;padding-top:1.75rem}
  .gcta__ghost{font-size:clamp(9rem,46vw,16rem)}
}

/* ---------- 32. Service cards ----------
   The plain list read as a table of contents. Each service now leads with a
   picture, so the section scans as work rather than as navigation. The images
   are deliberately different from the five in the gallery tile strip. */
.scards{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2.25rem);
  margin-top:clamp(2rem,4vw,3.25rem);
}
.scard a{display:flex;flex-direction:column;height:100%}
.scard__shot{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:4/3;background:var(--ink-lift);
  margin-bottom:1.1rem;
}
.scard__shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease-out),filter .5s var(--ease);
  filter:saturate(.92);
}
.scard a:hover .scard__shot img,.scard a:focus-visible .scard__shot img{
  transform:scale(1.06);filter:saturate(1.05);
}
.scard__num{
  font-size:.78rem;font-weight:600;letter-spacing:.2em;color:var(--red);
  margin-bottom:.5rem;
}
.scard__name{
  font-family:var(--display);word-spacing:var(--display-word-space);
  font-size:clamp(.98rem,.88rem + .42vw,1.28rem);line-height:1.22;
  color:var(--text-dark);margin-bottom:.55rem;
  transition:color .4s var(--ease);
}
.scard a:hover .scard__name,.scard a:focus-visible .scard__name{color:var(--red)}
.scard__note{
  font-size:.998rem;line-height:1.55;color:var(--text-dark-soft);
  border-top:1px solid var(--rule-light);padding-top:.7rem;margin-top:auto;
}
@media (max-width:1100px){.scards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .scards{grid-template-columns:1fr;gap:1.75rem}
  .scard__shot{aspect-ratio:16/9}
}

/* ---------- 33. Gold band + ink button ---------- */
.s-gold{background:var(--gold);color:var(--ink)}
.s-gold .eyebrow,.s-gold .eyebrow--dark{color:var(--red-deep)}
.s-gold.grain::after{opacity:.5}
.btn--ink{--btn-bg:var(--ink);--btn-fg:var(--cream);--btn-line:var(--ink)}
.btn--ink:hover{background:var(--red-deep);border-color:var(--red-deep);color:var(--cream)}

/* the call to action, re-dressed in gold */
.gcta.s-gold::before{
  background:radial-gradient(70% 110% at 82% 10%,rgba(250,240,214,.55),transparent 62%);
}
.gcta.s-gold .gcta__ghost{-webkit-text-stroke:1px rgba(28,13,14,.16)}
.gcta.s-gold .gcta__lead em{color:var(--red-deep)}
.gcta.s-gold .gcta__side{border-left-color:rgba(28,13,14,.28)}
.gcta.s-gold .gcta__lede{color:var(--ink)}
.gcta.s-gold .gcta__lede--tight{color:rgba(28,13,14,.72)}
.gcta.s-gold .gcta__stats dt{color:var(--red-deep)}
.gcta.s-gold .gcta__stats dd{color:rgba(28,13,14,.7)}
@media (max-width:860px){
  .gcta.s-gold .gcta__side{border-top-color:rgba(28,13,14,.28)}
}

/* ---------- 34. Section lead ----------
   The intro paragraph was sitting alone across a half-empty band. It now shares
   that line with a short spec panel, which is what a gallery puts on the wall at
   the start of a room. */
.gal-lead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,5vw,4.5rem);
  align-items:start;
  margin-bottom:clamp(2.75rem,6vw,5rem);
}
.gal-lead .gal-intro{margin-bottom:0;max-width:44ch}
.gal-facts{
  margin:0;display:grid;gap:.9rem;
  border-top:1px solid var(--rule-light);padding-top:1.1rem;
}
.s-dark .gal-facts,.s-red .gal-facts{border-top-color:var(--rule-dark)}
.gal-facts > div{
  display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);
  gap:.6rem clamp(.75rem,2vw,1.5rem);
  align-items:baseline;
}
.gal-facts dt{
  font-size:.78rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--red);line-height:1.5;
}
.s-dark .gal-facts dt,.s-red .gal-facts dt{color:var(--gold-lift)}
.gal-facts dd{
  margin:0;font-size:clamp(1rem,.96rem + .22vw,1.13rem);line-height:1.55;
  color:var(--text-dark-soft);
}
.s-dark .gal-facts dd,.s-red .gal-facts dd{color:var(--text-light-soft)}
@media (max-width:860px){
  .gal-lead{grid-template-columns:1fr;gap:1.75rem}
  .gal-lead .gal-intro{max-width:none}
  .gal-facts > div{grid-template-columns:1fr;gap:.2rem}
}

/* ---------- 35. Who it is for ----------
   Replaced a section that repeated the services list and the gallery button.
   This answers the one thing neither of those did: whether they take work like
   yours, and at what scale. */
.who__grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,6vw,5.5rem);align-items:start;
}
.who__lead .h-section{margin-top:.9rem}
.who__body{
  margin-top:clamp(1.25rem,2.5vw,1.75rem);max-width:48ch;
  font-size:clamp(1.06rem,1.01rem + .26vw,1.19rem);line-height:1.62;
  color:var(--text-light-soft);
}
.who__stats{
  display:flex;gap:clamp(1.5rem,4vw,3.25rem);flex-wrap:wrap;
  margin:clamp(2rem,4vw,3rem) 0 0;
  border-top:1px solid var(--rule-dark);padding-top:clamp(1.25rem,2.5vw,1.75rem);
}
.who__stats dt{
  font-family:var(--display);word-spacing:var(--display-word-space);
  font-size:clamp(1.9rem,1.4rem + 1.9vw,3rem);line-height:1;color:var(--gold-lift);
}
.who__stats dd{
  margin:.5rem 0 0;font-size:.812rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-light-soft);
}
.who__side{
  border-left:1px solid var(--rule-dark);
  padding-left:clamp(1.25rem,3.5vw,3rem);
}
.who__kicker{
  font-size:.789rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-lift);margin-bottom:1.25rem;
}
.who .audience{display:flex;flex-wrap:wrap;gap:.6rem}
.who__foot{margin-top:clamp(1.5rem,3vw,2.25rem);font-size:.928rem}
@media (max-width:860px){
  .who__grid{grid-template-columns:1fr;gap:2.25rem}
  .who__side{border-left:0;border-top:1px solid var(--rule-dark);padding-left:0;padding-top:1.75rem}
  .who__body{max-width:none}
}

/* ---------- 36. Reviews ----------
   Five drawn stars rather than an image or a font icon, so they stay crisp and
   take their colour from the palette. The cards rise in on scroll and the stars
   pop one after another, which is the bit that catches the eye. */
.reviews__head{
  display:grid;grid-template-columns:1fr minmax(280px,40%);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;
  margin-bottom:clamp(2.25rem,5vw,3.5rem);
}
@media (max-width:860px){.reviews__head{grid-template-columns:1fr}}

.reviews__list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2rem);
}
@media (max-width:980px){.reviews__list{grid-template-columns:1fr;max-width:42rem}}

.review{
  background:var(--paper);
  border:1px solid rgba(28,13,14,.1);
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex;flex-direction:column;gap:1rem;
  position:relative;
}
.review::before{
  content:"\201C";position:absolute;top:-.12em;right:.28em;
  font-family:var(--display);font-size:7rem;line-height:1;
  color:rgba(169,129,46,.17);pointer-events:none;
}
.review__quote{margin:0}
.review__quote p{
  font-size:clamp(1.05rem,1rem + .24vw,1.18rem);line-height:1.62;
  color:var(--text-dark);position:relative;z-index:1;
}
.review__by{
  margin-top:auto;padding-top:.9rem;border-top:1px solid rgba(28,13,14,.12);
  font-size:.905rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dark);
}
.review__by span{display:block;margin-top:.3rem;letter-spacing:.14em;color:var(--text-dark-soft);font-size:.87rem}

.stars{display:flex;gap:.22rem;line-height:0}
.stars__s{width:1.05rem;height:1.05rem;fill:var(--gold);flex-shrink:0}

/* entrance: the card lifts, then the stars land one at a time */
@media (prefers-reduced-motion:no-preference){
  .review.reveal{opacity:0;transform:translateY(28px) scale(.97)}
  .review.reveal.is-in{
    opacity:1;transform:none;
    transition:opacity .7s var(--ease-out),transform .8s var(--ease-out);
  }
  .review.reveal[data-d="2"].is-in{transition-delay:.12s}
  .review.reveal[data-d="3"].is-in{transition-delay:.24s}
  .review.reveal .stars__s{opacity:0;transform:scale(.4) rotate(-25deg)}
  .review.reveal.is-in .stars__s{
    animation:star-pop .5s var(--ease-out) forwards;
  }
  .review.reveal.is-in .stars__s:nth-child(1){animation-delay:.22s}
  .review.reveal.is-in .stars__s:nth-child(2){animation-delay:.31s}
  .review.reveal.is-in .stars__s:nth-child(3){animation-delay:.40s}
  .review.reveal.is-in .stars__s:nth-child(4){animation-delay:.49s}
  .review.reveal.is-in .stars__s:nth-child(5){animation-delay:.58s}
  .review.reveal[data-d="2"].is-in .stars__s{animation-delay:calc(.12s + var(--sd,.22s))}
  .review.reveal[data-d="3"].is-in .stars__s{animation-delay:calc(.24s + var(--sd,.22s))}
}
@keyframes star-pop{
  0%{opacity:0;transform:scale(.4) rotate(-25deg)}
  65%{opacity:1;transform:scale(1.18) rotate(4deg)}
  100%{opacity:1;transform:none}
}

.reviews__cta{margin-top:clamp(2rem,4vw,3rem);text-align:center}
.reviews__note{
  display:block;margin-top:1rem;font-size:.87rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-dark-soft);
}

/* ---------- 37. Mid-page call to action ---------- */
.midcta__inner{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,6vw,5rem);align-items:center;
}
.midcta__side p{
  color:var(--text-light-soft);max-width:44ch;
  font-size:clamp(1.06rem,1.01rem + .26vw,1.19rem);line-height:1.62;
}
.midcta__go{margin-top:clamp(1.5rem,3vw,2.25rem)}
.midcta__alt{margin-top:1.1rem;font-size:.986rem}
.midcta__alt a{color:var(--gold-lift);border-bottom:1px solid rgba(201,162,83,.4)}
.midcta__alt a:hover{color:var(--cream);border-bottom-color:var(--cream)}
@media (max-width:860px){.midcta__inner{grid-template-columns:1fr;gap:2rem}}

/* ---------- 38. Button nudge ----------
   A short shake every few seconds on the two buttons that lead to the gallery.
   The stillness between is what makes the movement register - a permanent
   wobble stops being noticed within a second and becomes an irritation. */
@media (prefers-reduced-motion:no-preference){
  .btn--nudge{animation:btn-nudge 5.5s var(--ease) 2s infinite}
  /* stop fidgeting the moment someone actually goes for it */
  .btn--nudge:hover,.btn--nudge:focus-visible{animation-play-state:paused}
}
@keyframes btn-nudge{
  0%,86%,100%{transform:none}
  88%{transform:translateX(-4px) rotate(-.7deg)}
  90.5%{transform:translateX(4px) rotate(.7deg)}
  93%{transform:translateX(-3px) rotate(-.5deg)}
  95.5%{transform:translateX(3px) rotate(.5deg)}
  98%{transform:translateX(-1px)}
}

/* a wide feature picture sits centred rather than hanging to one side */
.gal-row--centre{margin-inline:auto}

/* Noted rows run the full measure, so without this every picture would start at
   the left edge and the column would read as one straight line. Alternate ones
   put the label first and the picture on the right. */
.gal-row--noted.gal-row--flip{flex-direction:row-reverse}
@media (max-width:860px){
  /* stacked on a phone, the picture always comes first */
  .gal-row--noted.gal-row--flip{flex-direction:column}
}

/* ---------- 39. Door design picker ----------
   Ten designs shown on one doorway. The doorway never changes, so only the glass
   appears to, which is the comparison people are actually making. */
.picker{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,5rem);align-items:center;
}
.picker__stage{margin:0;display:grid;grid-template-areas:"s" "c"}
.picker__img{
  grid-area:s;display:block;width:100%;height:auto;aspect-ratio:var(--stage-ar,1);object-fit:cover;
  background:var(--ink-lift);opacity:0;transition:opacity .6s var(--ease);
}
/* the new design fades in over the old one rather than both fading at once,
   so the doorway itself never dims */
.picker__img.is-on{opacity:1;z-index:2}
.picker__img.was-on{opacity:1;z-index:1;transition:none}
.picker__cap{
  grid-area:c;margin-top:.9rem;display:flex;gap:1rem;align-items:baseline;
  font-size:.87rem;letter-spacing:.13em;text-transform:uppercase;line-height:1.5;
  color:var(--text-dark-soft);
}
.picker__num{color:var(--red);font-weight:600;font-variant-numeric:tabular-nums}

.picker__side{min-width:0}
.picker__lede{
  font-size:clamp(1.09rem,1.02rem + .32vw,1.27rem);line-height:1.62;
  color:var(--text-dark-soft);max-width:46ch;
}
.picker__swatches{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1.35rem clamp(.5rem,1vw,.85rem);
  margin-top:clamp(1.5rem,3vw,2.25rem);max-width:500px;
}
.picker__sw{
  appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;background:none;
  cursor:pointer;position:relative;display:block;color:inherit;
}
.picker__sw img{
  display:block;width:100%;height:auto;aspect-ratio:var(--sw-ar,1/2);object-fit:cover;
  background:var(--rule-light);opacity:.55;filter:saturate(.5);
  transition:opacity .35s var(--ease),filter .35s var(--ease),transform .45s var(--ease-out);
}
.picker__sw::after{
  content:"";position:absolute;left:0;right:0;bottom:-.6rem;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.picker__sw:hover img,.picker__sw:focus-visible img{opacity:1;filter:none;transform:translateY(-4px)}
.picker__sw.is-on img{opacity:1;filter:none}
.picker__sw.is-on::after{transform:scaleX(1)}
.picker__sw:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* while it turns the designs over by itself, the underline doubles as a timer */
.picker.is-auto .picker__sw.is-on::after{animation:picker-tick var(--dwell,2800ms) linear both}
@keyframes picker-tick{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.picker__hint{
  margin-top:1.75rem;font-size:.893rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dark-soft);
}
@media (max-width:860px){
  .picker{grid-template-columns:1fr;gap:1.5rem}
  .picker__swatches{max-width:none;gap:1.2rem .5rem}
}
@media (prefers-reduced-motion:reduce){
  .picker__img{transition:none}
  .picker__sw img{transition:none}
}

/* ---------- 40. Gallery section textures ----------
   Each gallery section carries a surface that hints at its subject: a bar top for
   the bottles, brushed steel and chrome for awards and door hardware, a workbench
   for the craft, a drawing for the architecture, and glass for the glass. They sit
   underneath everything (z-index -1 inside an isolated section). Bottles apart,
   they are blended so the section keeps its own colour: on the light bands a
   texture only adds light and shade, on the dark bands it only ever lifts. The
   three tiles repeat without a seam; the rest is gradients and inline SVG. */
.tex{isolation:isolate}
.tex::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}

/* 01 bottles: the section IS the bar top now. Dark rustic planks carry the
   colour, and a wash over them keeps the boards dark enough for cream text. */
.tex--wood{background-color:#241810}
.tex--wood::before{
  background:
    linear-gradient(104deg,rgba(255,238,206,.10),rgba(0,0,0,.18) 62%),
    linear-gradient(0deg,rgba(22,13,8,.42),rgba(22,13,8,.42)),
    url("/assets/img/tex/tex-wood.jpg?v=62708348") 0 0/1200px auto repeat;
  opacity:1;
}

/* 02 gifts: a cool brushed steel plate, the face of an award, with a slow sheen */
.tex--steel{background-color:#C7CED5}
.tex--steel::before{
  background:
    repeating-linear-gradient(122deg,rgba(255,255,255,0) 0,rgba(255,255,255,.5) 520px,rgba(255,255,255,0) 1040px,rgba(255,255,255,0) 1900px),
    linear-gradient(0deg,rgba(74,98,126,.16),rgba(74,98,126,.16)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E %3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.0017 0.62' numOctaves='2' seed='7' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E %3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.6'/%3E%3C/feComponentTransfer%3E %3C/filter%3E %3Crect width='600' height='600' filter='url(%23b)'/%3E %3C/svg%3E") 0 0/600px 600px;
  mix-blend-mode:soft-light;opacity:0.75;
}

/* 03 craft: a concrete workbench, grey but blended so the band stays warm */
.tex--concrete::before{
  background:url("/assets/img/tex/tex-concrete.jpg?v=9a2b102e") 0 0/1024px auto repeat;
  mix-blend-mode:soft-light;opacity:0.85;
}

/* 04 architectural: a drawing sheet, more felt than seen; the edge-lit
   photographs are the only thing in this section allowed to glow */
.tex--plan::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='640' fill='none' stroke='%23F2EBDC'%3E %3Cdefs%3E%3Cpattern id='g' width='32' height='32' patternUnits='userSpaceOnUse'%3E%3Cpath d='M32 .5H.5V32' stroke-width='.6' opacity='.45'/%3E%3C/pattern%3E%3C/defs%3E %3Crect width='960' height='640' fill='url(%23g)' stroke='none'/%3E %3Cpath stroke-width='1' opacity='.7' d='M0 .5H960M0 160.5H960M0 320.5H960M0 480.5H960M.5 0V640M160.5 0V640M320.5 0V640M480.5 0V640M640.5 0V640M800.5 0V640'/%3E %3Cpath stroke-width='3.5' d='M120 96H400M460 96H840V300M840 360V544H120V96M440 96V250M440 310V544M440 330H620M680 330H840'/%3E %3Cpath stroke-width='1.2' d='M400 96V156A60 60 0 0 0 460 96M440 250H500A60 60 0 0 1 440 310M620 330V390A60 60 0 0 0 680 330'/%3E %3Cpath stroke-width='1' d='M200 540H320M200 548H320M836 400V500M844 400V500M540 92H700M540 100H700'/%3E %3Ccircle cx='280' cy='320' r='18' stroke-width='1.2'/%3E %3Cpath stroke-width='.9' d='M120 56H840M120 48V64M440 48V64M840 48V64M114 62L126 50M434 62L446 50M834 62L846 50M884 96V544M876 96H892M876 330H892M876 544H892M878 102L890 90M878 336L890 324M878 550L890 538'/%3E %3Cpath stroke-width='.8' opacity='.8' d='M150 130H410M150 130V230M470 360H810V514H470Z'/%3E %3C/svg%3E") 0 0/960px 640px repeat;
  opacity:0.065;
}

/* 05 doors: brushed chrome, grained vertically like a push plate. The grain is a
   near-white line map multiplied onto the cream so it actually reads; the sheen
   has to be its own layer, because multiply cannot lighten anything. */
.tex--chrome::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E %3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.62 0.0019' numOctaves='2' seed='11' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E %3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.5' intercept='0.73'/%3E%3CfeFuncG type='linear' slope='0.5' intercept='0.73'/%3E%3CfeFuncB type='linear' slope='0.5' intercept='0.73'/%3E%3C/feComponentTransfer%3E %3C/filter%3E %3Crect width='600' height='600' filter='url(%23b)'/%3E %3C/svg%3E") 0 0/520px 520px;
  mix-blend-mode:multiply;opacity:0.75;
}
.tex--chrome::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(98deg,rgba(255,255,255,0) 0,rgba(255,255,255,.9) 300px,rgba(255,255,255,0) 620px,rgba(255,255,255,0) 1300px);
  opacity:.6;
}

/* 06 smart glass: a glazed wall. Panel joints run across the band and the top
   corner frosts over, which is the product doing its one trick. */
.tex--frost::before{
  background:
    radial-gradient(120% 58% at 6% 0,rgba(242,235,220,.14),rgba(242,235,220,.055) 46%,rgba(242,235,220,0) 78%),
    repeating-linear-gradient(90deg,rgba(242,235,220,.06) 0 2px,rgba(242,235,220,0) 2px 340px),
    repeating-linear-gradient(0deg,rgba(242,235,220,.045) 0 2px,rgba(242,235,220,0) 2px 430px),
    linear-gradient(180deg,rgba(242,235,220,.05),rgba(242,235,220,0) 42%);
}

/* 07 privacy: frosted glass, drawn after the client's blossom-branch panel.
   Screened over the dark band, so the etched flowers glow and the glass between
   them stays dark. tools/make-textures.py draws it. */
.tex--blossom::before{
  background:url("/assets/img/tex/tex-blossom.jpg?v=2de730cb") 0 0/900px auto repeat;
  mix-blend-mode:screen;opacity:0.13;
}

/* 08 storefront: light catching a shop window. Long angled streaks across the
   band, and the faint uprights of a glazed frontage behind them. */
.tex--reflect::before{
  background:
    repeating-linear-gradient(116deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 360px,rgba(255,255,255,.95) 430px,rgba(255,255,255,0) 495px,rgba(255,255,255,0) 540px,rgba(255,255,255,.55) 565px,rgba(255,255,255,0) 610px,rgba(255,255,255,0) 1150px),
    repeating-linear-gradient(116deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1500px,rgba(255,255,255,.7) 1610px,rgba(255,255,255,0) 1740px,rgba(255,255,255,0) 2300px),
    repeating-linear-gradient(90deg,rgba(28,13,14,.055) 0 2px,rgba(28,13,14,0) 2px 360px);
  opacity:.8;
}

/* the first section gets to its pictures faster: less air above the title and
   under it, since the bottles are what the page is here to show */
.story--quick{padding-top:clamp(2.75rem,2rem + 3vw,6rem)}
.story--quick .story__head{margin-bottom:clamp(1.1rem,2.2vw,1.9rem)}

@media (max-width:760px){
  .tex--wood::before{background-size:auto,auto,900px auto}
  .tex--concrete::before{background-size:760px auto}
  .tex--blossom::before{background-size:700px auto}
}

/* ---------- 41. Inner page components ----------
   The homepage and gallery set the vocabulary; these are the few extra pieces
   the service and company pages need: a two-column intro, a disclosure list for
   questions, tabbed industries, and a filter for the service area. */

/* a. page intro: the paragraph on the left, the hard facts on the right */
.pintro{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,4.5rem);align-items:start;
}
.pintro p + p{margin-top:1em}
.pintro__body{font-size:clamp(1.06rem,1.01rem + .3vw,1.24rem);line-height:1.62;color:var(--text-dark-soft)}
.s-dark .pintro__body,.s-red .pintro__body{color:var(--text-light-soft)}
@media (max-width:860px){.pintro{grid-template-columns:1fr}}

/* b. questions: native disclosure, so it works before any script runs */
.faq{border-top:1px solid var(--rule-light);margin-top:clamp(1.5rem,3vw,2.5rem)}
.faq__item{border-bottom:1px solid var(--rule-light)}
.faq__item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:clamp(1rem,2vw,1.35rem) 2.75rem clamp(1rem,2vw,1.35rem) 0;
  font-family:var(--display);word-spacing:var(--display-word-space);
  font-size:clamp(1.05rem,.95rem + .45vw,1.32rem);line-height:1.3;
  transition:color .35s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);
  font-size:1.5rem;line-height:1;color:var(--red);
}
.faq__item[open] summary::after{content:"\2212"}
.faq__item summary:hover,.faq__item summary:focus-visible{color:var(--red)}
.faq__item p{padding-bottom:clamp(1rem,2vw,1.5rem);max-width:66ch;color:var(--text-dark-soft)}
.s-dark .faq,.s-dark .faq__item{border-color:var(--rule-dark)}
.s-dark .faq__item summary::after{color:var(--gold-lift)}
.s-dark .faq__item summary:hover,.s-dark .faq__item summary:focus-visible{color:var(--gold-lift)}
.s-dark .faq__item p{color:var(--text-light-soft)}

/* c. tabs: one industry at a time, keyboard driven */
.tabs__list{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.tabs__btn{
  appearance:none;background:none;cursor:pointer;font-family:var(--body);
  border:1px solid var(--rule-light);color:var(--text-dark);
  padding:.8em 1.35em;font-size:.85rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.tabs__btn:hover{border-color:var(--red);color:var(--red)}
.tabs__btn[aria-selected="true"]{background:var(--red);border-color:var(--red);color:var(--cream)}
.tabs__btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.s-dark .tabs__btn{border-color:var(--rule-dark);color:var(--text-light)}
.s-dark .tabs__btn:hover{border-color:var(--gold);color:var(--gold-lift)}
.s-dark .tabs__btn[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.tabs__panel[hidden]{display:none}
.tabs__panel{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
}
.tabs__panel img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--ink-lift)}
.tabs__panel h3{
  font-family:var(--display);word-spacing:var(--display-word-space);font-weight:400;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.9rem);line-height:1.15;margin-bottom:.9rem;
}
.tabs__panel p{max-width:54ch}
.tabs__links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1.5rem}
@media (prefers-reduced-motion:no-preference){
  .tabs__panel:not([hidden]){animation:tab-in .5s var(--ease-out) both}
}
@keyframes tab-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:860px){.tabs__panel{grid-template-columns:1fr}}

/* d. filter: type to narrow a long list of places */
.filter__field{position:relative;max-width:26rem;margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}
.filter__field input{
  width:100%;font:inherit;font-size:1rem;color:var(--text-dark);
  background:transparent;border:0;border-bottom:1px solid var(--rule-light);
  padding:.85rem 0;
}
.filter__field input:focus{outline:none;border-bottom-color:var(--red)}
.filter__count{font-size:.9rem;color:var(--text-dark-soft);margin-bottom:1.25rem}
.filter__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:0 1.5rem;
}
.filter__list li{
  padding:.55rem 0;border-bottom:1px solid var(--rule-light);
  font-size:1rem;color:var(--text-dark-soft);
}
.filter__list li[hidden]{display:none}
.filter__empty{margin-top:1.25rem;color:var(--text-dark-soft)}

/* e. a plain numbered list, used where a page explains what it needs */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2vw,1.5rem)}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:baseline}
.steps b{color:var(--red);font-weight:600;font-size:.85rem;letter-spacing:.14em}
.s-dark .steps b{color:var(--gold-lift)}
.steps span{color:var(--text-dark-soft);font-size:1.02rem;line-height:1.6}
.s-dark .steps span{color:var(--text-light-soft)}

/* f. a strip of related services at the foot of a page */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
.related a{
  display:block;border:1px solid var(--rule-light);padding:clamp(1.1rem,2.5vw,1.75rem);
  transition:border-color .4s var(--ease),transform .5s var(--ease-out);
}
.related a:hover{border-color:var(--red);transform:translateY(-4px)}
.related b{
  display:block;font-family:var(--display);word-spacing:var(--display-word-space);
  font-weight:400;font-size:1.15rem;line-height:1.25;margin-bottom:.5rem;
}
.related span{display:block;font-size:.95rem;color:var(--text-dark-soft);line-height:1.5}
.s-dark .related a{border-color:var(--rule-dark)}
.s-dark .related a:hover{border-color:var(--gold)}
.s-dark .related span{color:var(--text-light-soft)}
@media (max-width:860px){.related{grid-template-columns:1fr}}

/* g. the address and hours card, used on contact and service area */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1rem,2.5vw,2rem)}
.card{border:1px solid var(--rule-light);padding:clamp(1.25rem,3vw,2rem)}
.s-dark .card{border-color:var(--rule-dark)}
.card h3{
  font-size:.85rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:1rem;
}
.s-dark .card h3{color:var(--gold-lift)}
.card p,.card address{font-style:normal;color:var(--text-dark-soft);line-height:1.8}
.s-dark .card p,.s-dark .card address{color:var(--text-light-soft)}
.card a{border-bottom:1px solid rgba(107,0,6,.3)}
.s-dark .card a{border-bottom-color:rgba(201,162,83,.4);color:var(--cream)}
.s-dark .card a:hover{color:var(--gold-lift)}

/* h. a picture strip: two or three shots across, captioned */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1rem,2.5vw,2rem)}
.strip figure{margin:0}
.strip img{width:100%;height:auto;object-fit:cover;display:block;background:var(--ink-lift)}
.strip figcaption{
  margin-top:.7rem;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.5;color:var(--text-dark-soft);
}
.s-dark .strip figcaption,.s-red .strip figcaption{color:var(--text-light-soft)}

/* i. the ten door designs, shown flat where the picker would be too much */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:clamp(.6rem,1.5vw,1.1rem)}
.swatches img{width:100%;height:auto;aspect-ratio:160/398;object-fit:cover;display:block;background:var(--rule-light)}
.swatches figure{margin:0}
.swatches figcaption{
  margin-top:.5rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dark-soft);
}

/* ---------- 42. Page flow ----------
   What used to be a block of text under each hero is now a lead band: a picture
   on one side, the copy and the hard facts on the other, and a link out of the
   bottom of it into the next section. Nothing on these pages is text alone. */
.lead__grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.75rem,5vw,4.5rem);align-items:center;
}
.lead__media{margin:0}
.lead__media .frame{aspect-ratio:4/5}
.lead__media figcaption{
  margin-top:.8rem;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.5;color:var(--text-dark-soft);
}
.s-dark .lead__media figcaption{color:var(--text-light-soft)}
.lead__copy .lede{max-width:40ch}
.lead__copy .pintro__body{margin-top:1em;max-width:46ch}
.lead__copy .gal-facts{margin-top:clamp(1.5rem,3vw,2.25rem)}
.lead__go{margin-top:clamp(1.5rem,3vw,2.25rem)}
.lead__go a{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:860px){
  .lead__grid{grid-template-columns:1fr}
  .lead__media .frame{aspect-ratio:3/2}
}

/* the four things a job needs from you, as cards rather than a list of prose */
.needs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.75rem,2vw,1.5rem)}
.needs li{
  list-style:none;border-top:2px solid var(--red);padding-top:1.1rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.needs b{
  font-family:var(--display);word-spacing:var(--display-word-space);font-weight:400;
  font-size:1.2rem;line-height:1.2;
}
.needs span{font-size:.98rem;line-height:1.6;color:var(--text-dark-soft)}
.needs__num{
  font-size:.78rem;font-weight:600;letter-spacing:.16em;color:var(--red);
}
.s-dark .needs li{border-top-color:var(--gold)}
.s-dark .needs__num{color:var(--gold-lift)}
.s-dark .needs span{color:var(--text-light-soft)}
@media (max-width:860px){.needs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.needs{grid-template-columns:1fr}}

/* questions on the left, a way forward on the right, so the page never dead-ends */
.qa{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.75rem,5vw,4rem);align-items:start}
.qa__side{border:1px solid var(--rule-light);padding:clamp(1.25rem,3vw,2rem);position:sticky;top:calc(var(--nav-h) + 2rem)}
.s-dark .qa__side{border-color:var(--rule-dark)}
.qa__side p{color:var(--text-dark-soft);margin-bottom:1.25rem}
.s-dark .qa__side p{color:var(--text-light-soft)}
.qa__side .btn{width:100%;justify-content:center}
.qa__phone{display:block;margin-top:1rem;font-size:.95rem;text-align:center;color:var(--text-dark-soft)}
.qa__phone a{border-bottom:1px solid rgba(107,0,6,.35)}
@media (max-width:860px){.qa{grid-template-columns:1fr}.qa__side{position:static}}

/* ---------- contact: the details, as something you can act on ---------- */
.ctiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.75rem)}
.ctile{
  position:relative;display:flex;flex-direction:column;gap:.75rem;
  border:1px solid var(--rule-dark);padding:clamp(1.35rem,3vw,2.25rem);
  background:rgba(242,235,220,.03);
  transition:border-color .45s var(--ease),transform .5s var(--ease-out),background .45s var(--ease);
}
.ctile:hover{border-color:var(--gold);transform:translateY(-5px);background:rgba(242,235,220,.06)}
.ctile__label{font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lift)}
.ctile__big{
  font-family:var(--display);word-spacing:var(--display-word-space);font-weight:400;
  font-size:clamp(1.3rem,1rem + 1.3vw,2rem);line-height:1.15;color:var(--cream);
  overflow-wrap:anywhere;
}
/* an email address is longer than any headline, so it gets its own size and face */
.ctile__big--mail{
  font-family:var(--body);font-weight:500;letter-spacing:.01em;word-spacing:normal;
  font-size:clamp(1.02rem,.92rem + .45vw,1.26rem);overflow-wrap:break-word;
}
.ctile__big a{color:inherit}
.ctile__big a:hover{color:var(--gold-lift)}
.ctile__note{font-size:.95rem;line-height:1.6;color:var(--text-light-soft)}
.ctile__foot{margin-top:auto;padding-top:1rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
@media (max-width:860px){.ctiles{grid-template-columns:1fr}}

/* a small button that copies a detail and says so */
.copy{
  appearance:none;cursor:pointer;font-family:var(--body);
  background:none;border:1px solid var(--rule-dark);color:var(--text-light-soft);
  padding:.55em 1em;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.copy:hover{border-color:var(--gold);color:var(--gold-lift)}
.copy.is-done{border-color:var(--gold);color:var(--gold-lift)}
.copy:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* open / closed, worked out from Houston's clock */
.status{display:inline-flex;align-items:center;gap:.55em;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light-soft)}
.status i{width:.6em;height:.6em;border-radius:50%;background:var(--text-light-soft);flex-shrink:0}
.status.is-open i{background:#5FB66A;box-shadow:0 0 0 0 rgba(95,182,106,.6)}
.status.is-open{color:#8FD498}
@media (prefers-reduced-motion:no-preference){
  .status.is-open i{animation:status-pulse 2.6s var(--ease) infinite}
}
@keyframes status-pulse{
  0%,70%,100%{box-shadow:0 0 0 0 rgba(95,182,106,.55)}
  35%{box-shadow:0 0 0 .5em rgba(95,182,106,0)}
}

/* the hours table, so the week reads at a glance */
.hours{display:grid;gap:.4rem;margin-top:.5rem}
.hours div{display:flex;justify-content:space-between;gap:1.5rem;padding:.45rem 0;border-bottom:1px solid var(--rule-dark);font-size:.98rem;color:var(--text-light-soft)}
.hours div:last-child{border-bottom:0}
.hours .is-today{color:var(--cream)}
.hours .is-today span:first-child{font-weight:600}

/* the studio address block, with the map link carrying its own picture of the area */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (max-width:860px){.visit{grid-template-columns:1fr}}

/* about: the record, in numbers, instead of another paragraph */
.figures{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.25rem);margin-top:clamp(1.75rem,3.5vw,2.75rem);padding-top:clamp(1.25rem,2.5vw,1.75rem);border-top:1px solid var(--rule-light)}
.figures dt{font-family:var(--display);word-spacing:var(--display-word-space);font-size:clamp(1.9rem,1.4rem + 1.9vw,3rem);line-height:1;color:var(--red)}
.figures dd{margin:.5rem 0 0;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dark-soft)}
.s-dark .figures{border-top-color:var(--rule-dark)}
.s-dark .figures dt{color:var(--gold-lift)}
.s-dark .figures dd{color:var(--text-light-soft)}

/* ---------- 43. Small-screen guards ----------
   A display word that still will not fit breaks rather than pushing the whole
   page sideways, and the two display sizes come down a step on a small phone. */
.h-section,.h-sub{overflow-wrap:break-word}
@media (max-width:430px){
  .h-section{font-size:clamp(1.42rem,6.6vw,2.3rem)}
  .h-sub{font-size:clamp(1.12rem,5vw,1.6rem)}
}

/* ---------- 44. Gallery frames ----------
   The photographs hang in a moulding, drawn from the outside in: an outer rule, a
   gilt band carrying a rope twist, a shadow line, the mat, a gold fillet, and a
   hairline against the picture. The four sides mitre at 45 degrees and a scroll is
   turned into every corner.

   It is one nine-slice SVG on `border-image`: the corners keep their drawing, the
   edges repeat the rope with `round`, and because the border sits inside the box
   the justified rows still line up to the pixel. Cut-outs are left out of it, since
   they have no edge to frame, and so are the drag-to-compare sliders: they are a
   control, not a picture on the wall. */
.s-light,.s-paper,.s-panel{
  --frame-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cdefs%3E%3CclipPath id='w'%3E%3Cpath d='M0 0H192 L96 96 Z'/%3E%3C/clipPath%3E%3Cg id='b'%3E%3Crect x='0' y='2' width='192' height='13' fill='%23B58C33'/%3E%3Crect x='0' y='2' width='192' height='3' fill='%23E8CE8E' opacity='.55'/%3E%3Crect x='0' y='13' width='192' height='2.2' fill='rgba(28,13,14,.5)' opacity='.75'/%3E%3Cpath d='M-16.0 3.4 l7.5 10.6 M0.0 3.4 l7.5 10.6 M16.0 3.4 l7.5 10.6 M32.0 3.4 l7.5 10.6 M48.0 3.4 l7.5 10.6 M64.0 3.4 l7.5 10.6 M80.0 3.4 l7.5 10.6 M96.0 3.4 l7.5 10.6 M112.0 3.4 l7.5 10.6 M128.0 3.4 l7.5 10.6 M144.0 3.4 l7.5 10.6 M160.0 3.4 l7.5 10.6 M176.0 3.4 l7.5 10.6 M192.0 3.4 l7.5 10.6' stroke='%236B4B12' stroke-width='3.1' stroke-linecap='round' opacity='.5' fill='none'/%3E%3Crect x='0' y='0' width='192' height='2.2' fill='%236B4B12'/%3E%3Crect x='0' y='15.2' width='192' height='2' fill='rgba(28,13,14,.5)' opacity='.35'/%3E%3Crect x='0' y='56' width='192' height='4.5' fill='%23B58C33'/%3E%3Crect x='0' y='56' width='192' height='1.6' fill='%23E8CE8E' opacity='.7'/%3E%3Crect x='0' y='60' width='192' height='2.6' fill='rgba(28,13,14,.35)'/%3E%3C/g%3E%3Cg id='c'%3E%3Cpath d='M6.0 47.0L4.6 43.7L3.6 40.3L3.0 36.7L2.8 33.2L3.1 29.7L3.8 26.3L4.9 23.0L6.3 19.9L8.1 17.0L10.3 14.4L12.7 12.1L15.3 10.1L18.2 8.4L21.2 7.1L24.4 6.2L27.5 5.6L30.8 5.5L33.9 5.8L37.0 6.4L40.0 7.4L42.8 8.7L45.4 10.3L47.8 12.3L49.9 14.4L51.7 16.9L53.2 19.4L54.4 22.2L55.2 25.0L55.7 27.9L55.8 30.8L55.6 33.6L55.0 36.4L54.1 39.1L53.0 41.6L51.5 43.9L49.7 46.1L47.8 47.9L45.6 49.6L43.3 50.9L40.9 51.9L38.4 52.7L35.8 53.1L33.2 53.2L30.7 53.0L28.2 52.4L25.8 51.6L23.6 50.6L21.5 49.3L19.7 47.7L18.0 46.0L16.6 44.1L15.4 42.0L14.5 39.9L13.9 37.7L13.6 35.4L13.5 33.2L13.7 30.9L14.2 28.8L14.9 26.7L15.8 24.8L17.0 23.0L18.3 21.4L19.8 20.0L21.5 18.8L23.3 17.8L25.1 17.0L27.0 16.5L29.0 16.2L30.9 16.2L32.8 16.3L34.7 16.8L36.4 17.4L38.1 18.2L39.6 19.2L40.9 20.4L42.1 21.7L43.1 23.1L43.9 24.6L44.6 26.2L45.0 27.8L45.2 29.4L45.2 31.0L45.0 32.6L44.6 34.1L44.1 35.6L43.4 36.9L42.5 38.2L41.6 39.3L40.5 40.2L39.3 41.0L38.0 41.6L36.8 42.1L35.4 42.4L34.1 42.6L32.8 42.5L31.6 42.4L30.4 42.0L29.2 41.6L28.2 41.0L27.2 40.3L26.4 39.5L25.7 38.6L25.1 37.7L24.6 36.7L24.3 35.7L24.1 34.7L24.1 33.6L24.1 32.7L24.3 31.7L24.6 30.8L25.0 30.0L25.5 29.3L26.0 28.6L26.6 28.0L27.3 27.5L28.0 27.2L28.7 26.9L29.4 26.7L30.2 26.7L30.9 26.7L31.1 27.7L30.6 27.8L30.0 27.9L29.5 28.0L28.9 28.3L28.4 28.6L27.9 29.0L27.5 29.4L27.1 29.9L26.8 30.5L26.5 31.1L26.3 31.8L26.2 32.5L26.2 33.2L26.3 33.9L26.4 34.7L26.7 35.4L27.0 36.1L27.5 36.7L28.0 37.3L28.6 37.9L29.3 38.4L30.0 38.8L30.8 39.1L31.7 39.3L32.6 39.4L33.5 39.4L34.4 39.3L35.3 39.0L36.2 38.7L37.0 38.2L37.8 37.7L38.6 37.0L39.2 36.2L39.8 35.4L40.3 34.4L40.6 33.5L40.9 32.4L41.0 31.3L40.9 30.2L40.8 29.1L40.5 28.1L40.1 27.0L39.5 26.0L38.8 25.1L38.0 24.2L37.1 23.4L36.1 22.8L35.0 22.2L33.8 21.8L32.5 21.6L31.3 21.4L30.0 21.5L28.7 21.7L27.4 22.1L26.2 22.6L25.1 23.2L24.0 24.0L23.0 25.0L22.1 26.1L21.3 27.3L20.7 28.5L20.3 29.9L20.0 31.3L19.9 32.8L19.9 34.2L20.2 35.7L20.6 37.2L21.2 38.6L21.9 39.9L22.9 41.1L24.0 42.2L25.2 43.2L26.5 44.1L28.0 44.8L29.5 45.3L31.1 45.6L32.8 45.7L34.5 45.7L36.1 45.4L37.7 44.9L39.3 44.2L40.8 43.3L42.2 42.3L43.4 41.1L44.6 39.7L45.5 38.2L46.3 36.6L46.8 34.8L47.2 33.0L47.3 31.2L47.2 29.3L46.9 27.5L46.4 25.7L45.6 23.9L44.7 22.3L43.5 20.8L42.1 19.4L40.6 18.1L38.9 17.1L37.1 16.3L35.2 15.6L33.2 15.2L31.2 15.1L29.2 15.2L27.1 15.5L25.1 16.1L23.2 17.0L21.4 18.0L19.7 19.3L18.2 20.8L16.8 22.5L15.7 24.3L14.8 26.3L14.1 28.4L13.7 30.6L13.5 32.8L13.6 35.0L14.0 37.2L14.6 39.4L15.5 41.5Z' fill='%23B58C33'/%3E%3Cpath d='M8.6 45.5L7.3 42.5L6.4 39.4L5.9 36.3L5.8 33.1L6.0 30.0L6.6 26.9L7.6 23.9L8.9 21.1L10.5 18.5L12.4 16.2L14.6 14.0L17.0 12.2L19.6 10.7L22.3 9.6L25.1 8.7L28.0 8.3L30.9 8.1L33.7 8.3L36.5 8.9L39.2 9.8L41.8 11.0L44.1 12.5L46.3 14.2L48.2 16.2L49.8 18.3L51.2 20.7L52.2 23.1L53.0 25.7L53.4 28.3L53.5 30.9L53.3 33.5L52.8 36.0L52.0 38.4L50.9 40.7L49.6 42.8L48.0 44.7L46.3 46.4L44.3 47.9L42.2 49.1L40.0 50.0L37.7 50.7L35.4 51.0L33.1 51.1L30.8 51.0L28.6 50.5L26.4 49.8L24.4 48.8L22.5 47.6L20.8 46.2L19.3 44.7L18.1 42.9L17.0 41.1L16.2 39.1L15.6 37.1L15.3 35.1L15.2 33.1L15.4 31.0L15.8 29.1L16.5 27.2L17.3 25.5L18.4 23.8L19.6 22.4L21.0 21.1L22.5 20.0L24.1 19.1L25.8 18.4L27.5 17.9L29.3 17.6L31.0 17.6L32.7 17.8L34.4 18.1L36.0 18.7L37.5 19.4L38.9 20.4L40.1 21.4L41.2 22.6L42.1 23.9L42.9 25.3L43.4 26.7L43.8 28.2L44.0 29.6L44.0 31.1L43.9 32.6L43.5 34.0L43.0 35.3L42.4 36.5L41.6 37.6L40.7 38.6L39.8 39.5L38.7 40.2L37.5 40.8L36.4 41.3L35.2 41.6L34.0 41.7L32.8 41.7L31.6 41.5L30.5 41.2L29.4 40.8L28.5 40.3L27.6 39.6L26.8 38.9L26.2 38.1L25.6 37.2L25.2 36.3L24.9 35.4L24.7 34.5L24.6 33.5L24.7 32.6L24.9 31.7L25.1 30.9L25.5 30.1L25.9 29.4L26.4 28.8L27.0 28.3L27.6 27.8L28.3 27.5L28.9 27.2L29.6 27.0L30.3 27.0L30.9 27.0L31.0 27.5L30.4 27.5L29.9 27.6L29.3 27.7L28.7 28.0L28.1 28.3L27.6 28.7L27.1 29.2L26.6 29.7L26.3 30.4L26.0 31.0L25.8 31.8L25.6 32.5L25.6 33.3L25.7 34.1L25.8 34.9L26.1 35.7L26.5 36.5L27.0 37.2L27.6 37.9L28.2 38.5L29.0 39.1L29.8 39.5L30.7 39.9L31.7 40.1L32.6 40.2L33.7 40.2L34.7 40.1L35.7 39.9L36.7 39.5L37.7 39.0L38.6 38.4L39.4 37.6L40.1 36.8L40.8 35.8L41.3 34.8L41.7 33.6L42.0 32.5L42.1 31.3L42.1 30.0L41.9 28.8L41.6 27.5L41.1 26.3L40.5 25.2L39.7 24.1L38.8 23.1L37.8 22.3L36.6 21.5L35.3 20.9L34.0 20.4L32.6 20.1L31.2 20.0L29.7 20.0L28.3 20.3L26.8 20.7L25.4 21.3L24.1 22.0L22.8 22.9L21.7 24.0L20.7 25.2L19.8 26.6L19.1 28.0L18.6 29.6L18.3 31.2L18.1 32.9L18.2 34.6L18.5 36.2L18.9 37.9L19.6 39.5L20.5 41.0L21.6 42.4L22.8 43.7L24.2 44.9L25.7 45.9L27.4 46.6L29.2 47.2L31.0 47.6L32.9 47.8L34.8 47.7L36.7 47.4L38.6 46.8L40.4 46.0L42.1 45.0L43.7 43.8L45.2 42.4L46.4 40.9L47.5 39.1L48.4 37.2L49.1 35.3L49.5 33.2L49.6 31.1L49.5 28.9L49.2 26.8L48.6 24.7L47.7 22.7L46.6 20.8L45.2 19.0L43.7 17.4L41.9 16.0L40.0 14.8L37.9 13.8L35.7 13.1L33.4 12.7L31.1 12.5L28.7 12.6L26.4 13.0L24.1 13.7L21.8 14.6L19.7 15.9L17.8 17.3L16.0 19.1L14.5 21.0L13.1 23.1L12.1 25.4L11.3 27.8L10.8 30.3L10.6 32.9L10.7 35.5L11.2 38.1L11.9 40.6L12.9 43.0Z' fill='%236B4B12' opacity='.45'/%3E%3Ccircle cx='32' cy='32' r='3.4' fill='%23B58C33'/%3E%3Ccircle cx='32' cy='32' r='1.5' fill='rgba(28,13,14,.5)' opacity='.6'/%3E%3C/g%3E%3C/defs%3E%3Cpath fill='%23FBF7EC' fill-rule='evenodd' d='M0 0H192 V192 H0Z M64 64 H128 V128 H64 Z'/%3E%3Cpath fill='%23FFFFFF' opacity='.5' d='M64 64 H128 V64 H64 Z'/%3E%3Cg clip-path='url(%23w)' transform='rotate(0 96 96)'%3E%3Cuse href='%23b'/%3E%3C/g%3E%3Cg clip-path='url(%23w)' transform='rotate(90 96 96)'%3E%3Cuse href='%23b'/%3E%3C/g%3E%3Cg clip-path='url(%23w)' transform='rotate(180 96 96)'%3E%3Cuse href='%23b'/%3E%3C/g%3E%3Cg clip-path='url(%23w)' transform='rotate(270 96 96)'%3E%3Cuse href='%23b'/%3E%3C/g%3E%3Cuse href='%23c' transform='rotate(0 96 96)'/%3E%3Cuse href='%23c' transform='rotate(90 96 96)'/%3E%3Cuse href='%23c' transform='rotate(180 96 96)'/%3E%3Cuse href='%23c' transform='rotate(270 96 96)'/%3E%3C/svg%3E");
  --frame-drop:0 22px 44px rgba(28,13,14,.28),0 3px 8px rgba(28,13,14,.2);
}
.s-dark,.s-red{
  --frame-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cdefs%3E%3CclipPath id='w'%3E%3Cpath d='M0 0H192 L96 96 Z'/%3E%3C/clipPath%3E%3Cg id='b'%3E%3Crect x='0' y='2' width='192' height='13' fill='%23C09447'/%3E%3Crect x='0' y='2' width='192' height='3' fill='%23EBD79C' opacity='.55'/%3E%3Crect x='0' y='13' width='192' height='2.2' fill='rgba(0,0,0,.6)' opacity='.75'/%3E%3Cpath d='M-16.0 3.4 l7.5 10.6 M0.0 3.4 l7.5 10.6 M16.0 3.4 l7.5 10.6 M32.0 3.4 l7.5 10.6 M48.0 3.4 l7.5 10.6 M64.0 3.4 l7.5 10.6 M80.0 3.4 l7.5 10.6 M96.0 3.4 l7.5 10.6 M112.0 3.4 l7.5 10.6 M128.0 3.4 l7.5 10.6 M144.0 3.4 l7.5 10.6 M160.0 3.4 l7.5 10.6 M176.0 3.4 l7.5 10.6 M192.0 3.4 l7.5 10.6' stroke='%235E3F13' stroke-width='3.1' stroke-linecap='round' opacity='.5' fill='none'/%3E%3Crect x='0' y='0' width='192' height='2.2' fill='%235E3F13'/%3E%3Crect x='0' y='15.2' width='192' height='2' fill='rgba(0,0,0,.6)' opacity='.35'/%3E%3Crect x='0' y='56' width='192' height='4.5' fill='%23C09447'/%3E%3Crect x='0' y='56' width='192' height='1.6' fill='%23EBD79C' opacity='.7'/%3E%3Crect x='0' y='60' width='192' height='2.6' fill='rgba(0,0,0,.55)'/%3E%3C/g%3E%3Cg id='c'%3E%3Cpath d='M6.0 47.0L4.6 43.7L3.6 40.3L3.0 36.7L2.8 33.2L3.1 29.7L3.8 26.3L4.9 23.0L6.3 19.9L8.1 17.0L10.3 14.4L12.7 12.1L15.3 10.1L18.2 8.4L21.2 7.1L24.4 6.2L27.5 5.6L30.8 5.5L33.9 5.8L37.0 6.4L40.0 7.4L42.8 8.7L45.4 10.3L47.8 12.3L49.9 14.4L51.7 16.9L53.2 19.4L54.4 22.2L55.2 25.0L55.7 27.9L55.8 30.8L55.6 33.6L55.0 36.4L54.1 39.1L53.0 41.6L51.5 43.9L49.7 46.1L47.8 47.9L45.6 49.6L43.3 50.9L40.9 51.9L38.4 52.7L35.8 53.1L33.2 53.2L30.7 53.0L28.2 52.4L25.8 51.6L23.6 50.6L21.5 49.3L19.7 47.7L18.0 46.0L16.6 44.1L15.4 42.0L14.5 39.9L13.9 37.7L13.6 35.4L13.5 33.2L13.7 30.9L14.2 28.8L14.9 26.7L15.8 24.8L17.0 23.0L18.3 21.4L19.8 20.0L21.5 18.8L23.3 17.8L25.1 17.0L27.0 16.5L29.0 16.2L30.9 16.2L32.8 16.3L34.7 16.8L36.4 17.4L38.1 18.2L39.6 19.2L40.9 20.4L42.1 21.7L43.1 23.1L43.9 24.6L44.6 26.2L45.0 27.8L45.2 29.4L45.2 31.0L45.0 32.6L44.6 34.1L44.1 35.6L43.4 36.9L42.5 38.2L41.6 39.3L40.5 40.2L39.3 41.0L38.0 41.6L36.8 42.1L35.4 42.4L34.1 42.6L32.8 42.5L31.6 42.4L30.4 42.0L29.2 41.6L28.2 41.0L27.2 40.3L26.4 39.5L25.7 38.6L25.1 37.7L24.6 36.7L24.3 35.7L24.1 34.7L24.1 33.6L24.1 32.7L24.3 31.7L24.6 30.8L25.0 30.0L25.5 29.3L26.0 28.6L26.6 28.0L27.3 27.5L28.0 27.2L28.7 26.9L29.4 26.7L30.2 26.7L30.9 26.7L31.1 27.7L30.6 27.8L30.0 27.9L29.5 28.0L28.9 28.3L28.4 28.6L27.9 29.0L27.5 29.4L27.1 29.9L26.8 30.5L26.5 31.1L26.3 31.8L26.2 32.5L26.2 33.2L26.3 33.9L26.4 34.7L26.7 35.4L27.0 36.1L27.5 36.7L28.0 37.3L28.6 37.9L29.3 38.4L30.0 38.8L30.8 39.1L31.7 39.3L32.6 39.4L33.5 39.4L34.4 39.3L35.3 39.0L36.2 38.7L37.0 38.2L37.8 37.7L38.6 37.0L39.2 36.2L39.8 35.4L40.3 34.4L40.6 33.5L40.9 32.4L41.0 31.3L40.9 30.2L40.8 29.1L40.5 28.1L40.1 27.0L39.5 26.0L38.8 25.1L38.0 24.2L37.1 23.4L36.1 22.8L35.0 22.2L33.8 21.8L32.5 21.6L31.3 21.4L30.0 21.5L28.7 21.7L27.4 22.1L26.2 22.6L25.1 23.2L24.0 24.0L23.0 25.0L22.1 26.1L21.3 27.3L20.7 28.5L20.3 29.9L20.0 31.3L19.9 32.8L19.9 34.2L20.2 35.7L20.6 37.2L21.2 38.6L21.9 39.9L22.9 41.1L24.0 42.2L25.2 43.2L26.5 44.1L28.0 44.8L29.5 45.3L31.1 45.6L32.8 45.7L34.5 45.7L36.1 45.4L37.7 44.9L39.3 44.2L40.8 43.3L42.2 42.3L43.4 41.1L44.6 39.7L45.5 38.2L46.3 36.6L46.8 34.8L47.2 33.0L47.3 31.2L47.2 29.3L46.9 27.5L46.4 25.7L45.6 23.9L44.7 22.3L43.5 20.8L42.1 19.4L40.6 18.1L38.9 17.1L37.1 16.3L35.2 15.6L33.2 15.2L31.2 15.1L29.2 15.2L27.1 15.5L25.1 16.1L23.2 17.0L21.4 18.0L19.7 19.3L18.2 20.8L16.8 22.5L15.7 24.3L14.8 26.3L14.1 28.4L13.7 30.6L13.5 32.8L13.6 35.0L14.0 37.2L14.6 39.4L15.5 41.5Z' fill='%23C09447'/%3E%3Cpath d='M8.6 45.5L7.3 42.5L6.4 39.4L5.9 36.3L5.8 33.1L6.0 30.0L6.6 26.9L7.6 23.9L8.9 21.1L10.5 18.5L12.4 16.2L14.6 14.0L17.0 12.2L19.6 10.7L22.3 9.6L25.1 8.7L28.0 8.3L30.9 8.1L33.7 8.3L36.5 8.9L39.2 9.8L41.8 11.0L44.1 12.5L46.3 14.2L48.2 16.2L49.8 18.3L51.2 20.7L52.2 23.1L53.0 25.7L53.4 28.3L53.5 30.9L53.3 33.5L52.8 36.0L52.0 38.4L50.9 40.7L49.6 42.8L48.0 44.7L46.3 46.4L44.3 47.9L42.2 49.1L40.0 50.0L37.7 50.7L35.4 51.0L33.1 51.1L30.8 51.0L28.6 50.5L26.4 49.8L24.4 48.8L22.5 47.6L20.8 46.2L19.3 44.7L18.1 42.9L17.0 41.1L16.2 39.1L15.6 37.1L15.3 35.1L15.2 33.1L15.4 31.0L15.8 29.1L16.5 27.2L17.3 25.5L18.4 23.8L19.6 22.4L21.0 21.1L22.5 20.0L24.1 19.1L25.8 18.4L27.5 17.9L29.3 17.6L31.0 17.6L32.7 17.8L34.4 18.1L36.0 18.7L37.5 19.4L38.9 20.4L40.1 21.4L41.2 22.6L42.1 23.9L42.9 25.3L43.4 26.7L43.8 28.2L44.0 29.6L44.0 31.1L43.9 32.6L43.5 34.0L43.0 35.3L42.4 36.5L41.6 37.6L40.7 38.6L39.8 39.5L38.7 40.2L37.5 40.8L36.4 41.3L35.2 41.6L34.0 41.7L32.8 41.7L31.6 41.5L30.5 41.2L29.4 40.8L28.5 40.3L27.6 39.6L26.8 38.9L26.2 38.1L25.6 37.2L25.2 36.3L24.9 35.4L24.7 34.5L24.6 33.5L24.7 32.6L24.9 31.7L25.1 30.9L25.5 30.1L25.9 29.4L26.4 28.8L27.0 28.3L27.6 27.8L28.3 27.5L28.9 27.2L29.6 27.0L30.3 27.0L30.9 27.0L31.0 27.5L30.4 27.5L29.9 27.6L29.3 27.7L28.7 28.0L28.1 28.3L27.6 28.7L27.1 29.2L26.6 29.7L26.3 30.4L26.0 31.0L25.8 31.8L25.6 32.5L25.6 33.3L25.7 34.1L25.8 34.9L26.1 35.7L26.5 36.5L27.0 37.2L27.6 37.9L28.2 38.5L29.0 39.1L29.8 39.5L30.7 39.9L31.7 40.1L32.6 40.2L33.7 40.2L34.7 40.1L35.7 39.9L36.7 39.5L37.7 39.0L38.6 38.4L39.4 37.6L40.1 36.8L40.8 35.8L41.3 34.8L41.7 33.6L42.0 32.5L42.1 31.3L42.1 30.0L41.9 28.8L41.6 27.5L41.1 26.3L40.5 25.2L39.7 24.1L38.8 23.1L37.8 22.3L36.6 21.5L35.3 20.9L34.0 20.4L32.6 20.1L31.2 20.0L29.7 20.0L28.3 20.3L26.8 20.7L25.4 21.3L24.1 22.0L22.8 22.9L21.7 24.0L20.7 25.2L19.8 26.6L19.1 28.0L18.6 29.6L18.3 31.2L18.1 32.9L18.2 34.6L18.5 36.2L18.9 37.9L19.6 39.5L20.5 41.0L21.6 42.4L22.8 43.7L24.2 44.9L25.7 45.9L27.4 46.6L29.2 47.2L31.0 47.6L32.9 47.8L34.8 47.7L36.7 47.4L38.6 46.8L40.4 46.0L42.1 45.0L43.7 43.8L45.2 42.4L46.4 40.9L47.5 39.1L48.4 37.2L49.1 35.3L49.5 33.2L49.6 31.1L49.5 28.9L49.2 26.8L48.6 24.7L47.7 22.7L46.6 20.8L45.2 19.0L43.7 17.4L41.9 16.0L40.0 14.8L37.9 13.8L35.7 13.1L33.4 12.7L31.1 12.5L28.7 12.6L26.4 13.0L24.1 13.7L21.8 14.6L19.7 15.9L17.8 17.3L16.0 19.1L14.5 21.0L13.1 23.1L12.1 25.4L11.3 27.8L10.8 30.3L10.6 32.9L10.7 35.5L11.2 38.1L11.9 40.6L12.9 43.0Z' fill='%235E3F13' opacity='.45'/%3E%3Ccircle cx='32' cy='32' r='3.4' fill='%23C09447'/%3E%3Ccircle cx='32' cy='32' r='1.5' fill='rgba(0,0,0,.6)' opacity='.6'/%3E%3C/g%3E%3C/defs%3E%3Cpath fill='%233C2E28' fill-rule='evenodd' d='M0 0H192 V192 H0Z M64 64 H128 V128 H64 Z'/%3E%3Cpath fill='rgba(242,235,220,.12)' opacity='.5' d='M64 64 H128 V64 H64 Z'/%3E%3Cg clip-path='url(%23w)' transform='rotate(0 96 96)'%3E%3Cuse href='%23b'/%3E%3C/g%3E%3Cg clip-path='url(%23w)' transform='rotate(90 96 96)'%3E%3Cuse href='%23b'/%3E%3C/g%3E%3Cg clip-path='url(%23w)' transform='rotate(180 96 96)'%3E%3Cuse href='%23b'/%3E%3C/g%3E%3Cg clip-path='url(%23w)' transform='rotate(270 96 96)'%3E%3Cuse href='%23b'/%3E%3C/g%3E%3Cuse href='%23c' transform='rotate(0 96 96)'/%3E%3Cuse href='%23c' transform='rotate(90 96 96)'/%3E%3Cuse href='%23c' transform='rotate(180 96 96)'/%3E%3Cuse href='%23c' transform='rotate(270 96 96)'/%3E%3C/svg%3E");
  --frame-drop:0 26px 52px rgba(0,0,0,.6),0 3px 10px rgba(0,0,0,.45);
}
.gal-fig:not(.gal-fig--cutout) img,
.gal-fig:not(.gal-fig--cutout) > .placeholder,
.picker__stage .picker__img,
.lead__media .frame,
.strip img,
.tabs__panel img{
  border:var(--frame-w,clamp(20px,2.4vw,40px)) solid transparent;
  border-image:var(--frame-img) 64 round;
  box-shadow:var(--frame-drop);
}
/* The moulding is sized from the picture it surrounds, not from the window: a
   thumbnail in a three-up row would otherwise be mostly frame. 6.2cqi is 6.2% of
   the picture's own width, floored and capped. The plain clamp above stays as the
   fallback wherever container queries are not supported. */
.gal-fig,.lead__media,.strip figure,.picker__stage,.gal-feature{container-type:inline-size}
@supports (container-type:inline-size){
  .gal-fig:not(.gal-fig--cutout) img,
  .gal-fig:not(.gal-fig--cutout) > .placeholder,
  .picker__stage .picker__img,
  .lead__media .frame,
  .strip img{--frame-w:clamp(9px,6.2cqi,40px)}
}
@media (max-width:620px){
  .gal-fig:not(.gal-fig--cutout) img,
  .gal-fig:not(.gal-fig--cutout) > .placeholder,
  .picker__stage .picker__img,
  .lead__media .frame,
  .strip img,
  .tabs__panel img{--frame-w:clamp(9px,5.4cqi,22px)}
}
/* the moulding needs room to sit in, so the rows breathe wider than they used to */
.gal-row{gap:clamp(1.5rem,2.8vw,2.75rem)}
.gal-row--noted .gal-row__pics{gap:clamp(1.5rem,2.8vw,2.75rem)}
@media (max-width:760px){
  .gal-row{gap:clamp(1.25rem,4vw,1.9rem)}
}
/* a feature picture dropped in among the rows keeps the rows' own spacing */
.gal-rows > .gal-feature{margin-bottom:0}

/* ---------- 45. Legibility, second pass ----------
   Secondary copy across the site goes a step heavier and a touch darker, the
   gallery's own copy gets bigger as well, and two homepage blocks are rebuilt
   around reading rather than decoration. */

/* a. the two colours most secondary copy takes */
:root{
  --text-dark-soft:rgba(28,13,14,.93);
  --text-light-soft:rgba(242,235,220,.91);
}

/* b. secondary copy, sitewide: Inter 500 instead of 400 */
.muted,.muted-light,.lede,.pintro__body,.who__body,.gal-intro,.gal-note p,.gal-facts dd,
.scard__note,.svc__note,.related span,.needs span,.steps span,.faq__item p,.card p,.card address,
.ctile__note,.picker__lede,.filter__list li,.hours div,.tabs__panel p,.review__quote p,
.midcta__side p,.gcta__lede--tight,.hook__aside p,.lineage__points span,.technique p,
.beat__text p,.beat__note p:not(.beat__kicker),.verb__services,.story__outro-note,
.footer__blurb,.footer__nav a,.footer__hours,.idea__list li,.dropzone__hint,.form__consent{
  font-weight:500;
}
/* captions and small labels: heavier still, and a size up */
.gal-fig figcaption,.gal-feature figcaption,.strip figcaption,.lead__media figcaption,
.picker__cap,.picker__hint,.swatches figcaption,.tiles figcaption,.story__hero figcaption{
  font-weight:600;font-size:max(.82rem,.8em);
}
.gal-facts dt,.needs__num,.steps b,.card h3,.ctile__label{font-size:max(.8rem,.8em)}

/* c. the gallery's own copy: bigger as well as heavier */
.story .gal-intro{font-size:clamp(1.2rem,1.1rem + .4vw,1.45rem);line-height:1.55}
.story .gal-note p{font-size:clamp(1.16rem,1.07rem + .38vw,1.4rem);line-height:1.58}
.story .gal-row--spaced .gal-note p{font-size:clamp(1.22rem,1.1rem + .48vw,1.52rem)}
.story .gal-note__kicker{font-size:clamp(.86rem,.8rem + .2vw,.98rem);letter-spacing:.2em}
.story .gal-facts dt{font-size:.84rem;letter-spacing:.14em}
.story .gal-facts dd{font-size:clamp(1.08rem,1.02rem + .26vw,1.24rem)}
.story .gal-fig figcaption,.story .gal-feature figcaption{font-size:.9rem;letter-spacing:.1em;line-height:1.5}
.story .lineup__label{font-size:.9rem;letter-spacing:.2em}
.story .picker__lede{font-size:clamp(1.14rem,1.06rem + .34vw,1.34rem)}
.story .picker__hint,.story .picker__cap{font-size:.86rem}
.story .gal-more a{font-size:.9rem}
.story .ytlite__note{font-size:.84rem}

/* d. homepage: the work we take on. These were tags in small tracked capitals;
      they are a list someone is meant to read, so they are set as one. */
.who .audience{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;
  margin-top:0;
}
.who .audience li{
  display:flex;align-items:center;gap:.85rem;
  padding:1rem 1.15rem;
  border:1px solid rgba(201,162,83,.3);
  background:rgba(242,235,220,.04);
  font-size:clamp(1rem,.95rem + .22vw,1.12rem);font-weight:500;line-height:1.3;
  letter-spacing:.005em;text-transform:none;color:var(--cream);
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease),transform .45s var(--ease-out);
}
.who .audience li::before{
  content:"";flex-shrink:0;width:.5rem;height:.5rem;
  background:var(--gold);transform:rotate(45deg);
  transition:transform .45s var(--ease-out);
}
.who .audience li:hover{
  border-color:var(--gold);background:rgba(201,162,83,.1);color:var(--gold-lift);
  transform:translateX(4px);
}
.who .audience li:hover::before{transform:rotate(225deg)}
.who__kicker{font-size:clamp(.88rem,.82rem + .2vw,1rem)}
@media (max-width:980px){.who .audience{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.who .audience{grid-template-columns:1fr}}

/* e. homepage: the service names on the cards. The display face has a single
      thin weight, so it goes up a size and takes a hairline of stroke, which
      reads as a heavier cut without leaving the face. */
/* sized against the card as well as the window, so the longest word on any card
   (ARCHITECTURAL) always fits inside it */
.scard{container-type:inline-size}
.scard__name{
  font-size:clamp(1.22rem,1.02rem + .66vw,1.62rem);line-height:1.16;
  color:var(--ink);
  -webkit-text-stroke:.55px currentColor;
  margin-bottom:.7rem;
}
@supports (container-type:inline-size){
  .scard__name{font-size:min(clamp(1.22rem,1.02rem + .66vw,1.62rem),7.4cqi)}
}
.scard__num{font-size:.86rem}
.scard__note{font-size:clamp(1rem,.96rem + .16vw,1.08rem)}

/* f. the bottles: the line-up larger, and the two tall pieces sized from the
      height of the screen, so each can be seen whole without scrolling */
:root{--fit-h:calc(100svh - var(--nav-h) - 6rem)}
.bottle-lineup{max-height:74svh}
@media (max-width:1100px){.bottle-lineup{aspect-ratio:4/3}}
@media (max-width:760px){.bottle-lineup{aspect-ratio:1.15}}
.gal-row--spaced{--gal-h:min(clamp(420px,86svh,900px),var(--fit-h))}
.gal-row--spaced .gal-row__pics{width:clamp(150px,calc(var(--sum,1) * var(--gal-h)),34%)}
.gal-row--tall{--gal-h:min(clamp(430px,92svh,1000px),var(--fit-h))}
@media (max-width:860px){
  .gal-row--spaced .gal-row__pics{max-width:min(56%,calc(var(--sum,1) * var(--fit-h)))}
  .gal-row--tall .gal-row__pics{max-width:min(76%,calc(var(--sum,1) * var(--fit-h)))}
  /* the cap above keeps a tall pair from running off the bottom of a phone.
     A single upright photograph has nothing beside it to run into, so it
     keeps the full column: capping it would leave it smaller on a phone than
     an ordinary row, which is the opposite of what --tall is for. */
  .gal-row--tall.gal-row--solo .gal-row__pics{max-width:100%}
}

/* g. the note kicker is itself a <p> inside .gal-note, so the paragraph rules were
      beating it on size, weight and colour: labels came out as body copy in the
      body colour. Pinned back to small capitals in the band's accent. */
.gal-note p.gal-note__kicker{
  font-size:clamp(.84rem,.8rem + .16vw,.94rem);font-weight:600;line-height:1.4;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:.9rem;
}
.s-dark .gal-note p.gal-note__kicker,.s-red .gal-note p.gal-note__kicker{color:var(--gold-lift)}
.story .gal-note p.gal-note__kicker{font-size:clamp(.88rem,.82rem + .2vw,1rem)}
.gal-row--spaced .gal-note p.gal-note__kicker{font-size:clamp(.92rem,.86rem + .22vw,1.05rem);margin-bottom:1.25rem}
.picker__side .gal-note__kicker{font-size:clamp(.84rem,.8rem + .16vw,.94rem);letter-spacing:.2em}
.story .picker__side .gal-note__kicker{font-size:clamp(.88rem,.82rem + .2vw,1rem)}

/* ---------- 46. Legibility, third pass ----------
   The homepage's light-on-dark copy comes up a size and to full strength, the
   service cards' descriptions go heavier, and the gallery's notes are set large
   enough to fill the room beside the pictures they describe. */

/* a. light copy on dark grounds: nearly full cream instead of nine-tenths */
:root{--text-light-soft:rgba(242,235,220,.97)}

/* b. homepage: the service cards */
.scard__note{
  font-size:clamp(1.06rem,.98rem + .3vw,1.24rem);font-weight:600;line-height:1.48;
  color:var(--ink);
}

/* c. homepage: the copy on its dark and red bands */
.muted-light{font-size:clamp(1.12rem,1.04rem + .34vw,1.34rem)}
.who__body{font-size:clamp(1.14rem,1.06rem + .36vw,1.36rem);line-height:1.58}
.who__stats dd{font-size:.94rem;font-weight:600;letter-spacing:.12em}
.statement__meta dd{font-size:.98rem;font-weight:600;letter-spacing:.11em}
.midcta__side p{font-size:clamp(1.14rem,1.06rem + .36vw,1.36rem)}
.verb__services{font-size:clamp(1.02rem,.96rem + .28vw,1.2rem)}
.lineage .lede{color:var(--cream)}
.lineage__points strong{font-size:1.22rem}
.lineage__points span{font-size:clamp(1.02rem,.98rem + .2vw,1.14rem);line-height:1.55}
.marquee figcaption{font-size:.88rem;font-weight:600;letter-spacing:.13em;color:var(--cream)}
.craft__playbtn{font-size:.88rem;font-weight:600}
.footer__blurb,.footer__nav a{font-size:1.06rem}
.footer address{font-weight:500}
.footer__bottom{font-size:1rem;font-weight:500}

/* d. the gallery's notes. Each note takes the whole width left beside its
      pictures, and its type is sized from that width (cqi), so a note beside a
      narrow picture sets large and one beside a wide row stays in proportion. */
@media (min-width:861px){
  .story .gal-row--noted{align-items:center}
  .story .gal-note{
    max-width:min(100%,46rem);padding-top:0;
    container-type:inline-size;
  }
  .story .gal-note p{
    font-size:clamp(1.3rem,7.4cqi,2.15rem);font-weight:600;
    line-height:1.4;letter-spacing:-.006em;
  }
  .story .gal-row--spaced .gal-note p{font-size:clamp(1.4rem,6.3cqi,2.3rem)}
  /* the widest rows give a little back, so the note beside them has room to set large */
  .story .gal-row--noted:not(.gal-row--spaced):not(.gal-row--tall) .gal-row__pics{
    width:clamp(210px,calc(var(--sum,1) * var(--gal-h)),62%);
  }
  .story .gal-note p + p{margin-top:.75em}
  .story .gal-note p.gal-note__kicker,
  .story .gal-row--spaced .gal-note p.gal-note__kicker{
    font-size:clamp(.98rem,.9rem + .25vw,1.12rem);letter-spacing:.2em;margin-bottom:1.1rem;
  }
}
@media (min-width:861px) and (max-width:1280px){
  .story .gal-row--noted:not(.gal-row--spaced):not(.gal-row--tall) .gal-row__pics{
    width:clamp(210px,calc(var(--sum,1) * var(--gal-h)),57%);
  }
}
@media (max-width:860px){
  .story .gal-note p{font-size:clamp(1.24rem,1rem + 1.3vw,1.6rem);font-weight:600;line-height:1.45}
  .story .gal-note p.gal-note__kicker{font-size:.95rem}
}

/* e. the gallery's section intros and spec panels */
.story .gal-intro{
  font-size:clamp(1.28rem,.95rem + 1.15vw,1.95rem);font-weight:600;line-height:1.42;
  letter-spacing:-.006em;
}
.story .gal-lead .gal-intro{max-width:none}
.story .gal-facts{gap:1.1rem}
.story .gal-facts > div{grid-template-columns:minmax(0,11.5rem) minmax(0,1fr)}
.story .gal-facts dt{font-size:.95rem;letter-spacing:.13em}
.story .gal-facts dd{font-size:clamp(1.14rem,1rem + .5vw,1.45rem);font-weight:600;line-height:1.45}
@media (max-width:860px){.story .gal-facts > div{grid-template-columns:1fr}}

/* f. the gallery's captions: long sentences read better in sentence case */
.story .gal-fig figcaption,.story .gal-feature figcaption{
  font-size:clamp(1.04rem,.95rem + .32vw,1.24rem);font-weight:600;line-height:1.45;
  letter-spacing:.005em;text-transform:none;
}

/* g. the rest of the gallery's small copy */
.story .technique p{font-size:clamp(1.08rem,1rem + .32vw,1.3rem);font-weight:500;line-height:1.55}
.story .picker__lede{font-size:clamp(1.24rem,1rem + .85vw,1.8rem);font-weight:600;line-height:1.42;max-width:none}
.story .picker__hint,.story .picker__cap{font-size:.98rem}
.story .lineup__label{font-size:1.04rem}
.story .gal-more a{font-size:1.02rem}
.story .ytlite__note{font-size:.95rem}
.story .step__label{font-size:.95rem}
.compare__tag{font-size:.88rem;font-weight:600}
/* h. homepage: the services intro and the work-we-take-on boxes keep pace */
#services .collection__head p.muted{font-size:clamp(1.12rem,1.04rem + .36vw,1.36rem);font-weight:600;color:var(--ink)}
.who .audience li{font-size:clamp(1.04rem,.96rem + .3vw,1.2rem)}
/* i. the Etch Houston band never set a text colour, so its heading came out in
      the page's ink on the deep red; it takes cream like every other dark band */
.lineage{color:var(--cream)}
/* j. about: the record band, heading on the left and the copy on the right */
.pintro--split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.pintro--split .h-sub{font-size:clamp(2rem,1.25rem + 2.6vw,3.6rem);line-height:1.08;max-width:9ch}
@media (max-width:860px){.pintro--split{grid-template-columns:1fr}}

/* ---------- 47. Gallery copy in the display face ----------
   On the gallery the copy beside the work is set in the same Trajan capitals as
   the headings, like a carved wall label. The face is capitals only with one
   weight, so it is tightened a touch, the word gaps are opened so words stay
   distinct, and a stroke scaled to the size gives it the weight of a bold.
   Labels (kickers, spec names, links, buttons) stay in Inter for contrast. */
.page-gallery .story .gal-note p:not(.gal-note__kicker),
.page-gallery .story .gal-intro,
.page-gallery .story .gal-facts dd,
.page-gallery .story .gal-fig figcaption,
.page-gallery .story .gal-feature figcaption,
.page-gallery .story .technique p,
.page-gallery .story .picker__lede,
.page-gallery .story .picker__cap,
.page-gallery .page-hero .lede,
.page-gallery .section > .wrap > p.muted{
  font-family:var(--display);font-weight:400;font-style:normal;
  letter-spacing:-.07em;word-spacing:.38em;
  -webkit-text-stroke:.017em currentColor;
  line-height:1.36;
}
.page-gallery .story .gal-fig figcaption,
.page-gallery .story .gal-feature figcaption{line-height:1.42}
.page-gallery .section > .wrap > p.muted{font-size:clamp(1.12rem,1.04rem + .36vw,1.34rem)}
.page-gallery .story .gal-note strong{font-weight:400}
/* the capitals set about a third wider than Inter, so each size steps down to
   keep a note level with the pictures beside it */
.page-gallery .story .gal-intro{font-size:clamp(1.12rem,.9rem + .78vw,1.6rem)}
.page-gallery .story .gal-facts dd{font-size:clamp(1rem,.94rem + .3vw,1.2rem)}
.page-gallery .story .gal-fig figcaption,
.page-gallery .story .gal-feature figcaption{font-size:clamp(.92rem,.88rem + .2vw,1.05rem)}
.page-gallery .story .technique p{font-size:clamp(.98rem,.94rem + .2vw,1.12rem)}
.page-gallery .story .picker__lede{font-size:clamp(1.1rem,.95rem + .6vw,1.45rem)}
.page-gallery .page-hero .lede{font-size:clamp(1.08rem,.98rem + .45vw,1.42rem)}
@media (min-width:861px){
  .page-gallery .story .gal-note p:not(.gal-note__kicker){font-size:clamp(1.1rem,5.5cqi,1.75rem)}
  .page-gallery .story .gal-row--spaced .gal-note p:not(.gal-note__kicker){font-size:clamp(1.2rem,5.6cqi,1.9rem)}
}
@media (max-width:860px){
  .page-gallery .story .gal-note p:not(.gal-note__kicker){font-size:clamp(1.02rem,.9rem + .9vw,1.3rem)}
}
/* the capitals are wide, so a long word in a narrow caption is allowed to
   hyphenate (or, failing that, break) rather than run past the picture */
.page-gallery .story .gal-fig figcaption,
.page-gallery .story .gal-feature figcaption{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
.page-gallery .story .gal-note p,
.page-gallery .story .technique p{overflow-wrap:anywhere}

/* ---------- 48. The gallery band on gold ----------
   Mid-tone gold leaves thin or faded ink hard to read, so the copy on it goes
   heavy and full strength. The second paragraph had inherited centring margins
   from the band's first version and sat indented; it now lines up. */
.gcta.s-gold .gcta__lede{
  font-size:clamp(1.16rem,1.05rem + .46vw,1.46rem);font-weight:600;line-height:1.5;
  color:var(--ink);margin-inline:0;
}
.gcta.s-gold .gcta__lede--tight{
  font-size:clamp(1.06rem,1rem + .3vw,1.26rem);font-weight:600;
  color:var(--red-deep);margin:1.1em 0 0;
}
.gcta.s-gold .gcta__stats dd{font-size:.92rem;font-weight:700;letter-spacing:.13em;color:var(--ink)}

/* ---------- 49. Form result ----------
   The result of sending sits on its own line under the button, in a tinted
   panel with a rule down its left edge, so neither outcome can be missed. */
.form__status{font-size:1.02rem;font-weight:500}
.form__status[data-state]{
  flex-basis:100%;margin:0;padding:.85rem 1.1rem;
  border-left:3px solid currentColor;font-size:1.06rem;font-weight:600;line-height:1.5;
}
.form__status[data-state="ok"]{background:rgba(46,107,58,.09)}
.form__status[data-state="error"]{background:rgba(107,0,6,.07)}
.form .btn[disabled]{opacity:.65;cursor:progress}

/* ---------- 50. Page titles that always fit ----------
   The display face sets every capital about 1em wide, so a long word such as
   SANDBLASTING or ARCHITECTURAL ran past the edge and was clipped. Each H1 carries
   --fit, the length of its longest word (tools/fit-h1.py), and its size is capped
   so that word fits the width; short titles keep the full size. */
.page-hero .wrap{container-type:inline-size}
.page-hero h1{max-width:16em}
@supports (width:1cqi){
  .page-hero h1{font-size:min(clamp(2.3rem,1.4rem + 3.9vw,4.6rem),calc(100cqi / (var(--fit,8) * 1.04)))}
}