:root{
  --wall:url("assets/site-shell/ac2b13830938.jpg");
  --kiln:#6C230C;
  --sandstone:#DAC7AD;
  --clay:#A1562F;
  --linen:#EFE1D4;
  --pearl:#FBF8F4;
  --ochre-light:#E5D3CC;   /* Ochre Clay at 20% over Pearl */
  --linen-light:#F5EDE4;   /* Linen lifted halfway to Pearl */
  --linen-sand:#E6D5C2;    /* Linen 45% toward Warm Sandstone */   /* Ochre Clay at 20% over Pearl */        /* Linen lifted 75% toward white — warm pearl, never clinical */
  --ochre:#8C3F2B;
  --olive:#B8AE82;
  --umber:#2B211A;

  --f-mark:'Italiana',Didot,'Bodoni MT',Georgia,serif;   /* wordmark only — never body or headings */
  --f-head:'Quicksand',system-ui,sans-serif;
  --f-body:'Poppins',system-ui,sans-serif;

  --maxw:125rem;   /* 2000px — matches BetterTiles container-large */
  --pad:clamp(1.5rem,5vw,6rem);
  --gap:clamp(2rem,4vw,4rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);font-weight:300;font-size:clamp(.95rem,1vw,1.0625rem);
  line-height:1.8;color:var(--umber);background:var(--pearl);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:500;line-height:1.15;letter-spacing:-.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- shared atoms ---------- */
.label{
  font-family:var(--f-body);font-size:.6875rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.4em;line-height:1;
}
.rule{height:1px;background:currentColor;opacity:.22;border:0}
/* Container cap — without this, content stretches edge-to-edge on ultra-wide
   monitors and the best-sellers grid spreads to five columns. */
.wrap,.ranges-inner,.rail-controls{
  max-width:calc(var(--maxw) + 2 * var(--pad));
  margin-inline:auto;
}
.wrap{padding-inline:var(--pad)}

/* Keyboard access */
.skip-link{
  position:absolute;left:var(--pad);top:-4rem;z-index:200;
  background:var(--kiln);color:var(--linen);
  padding:.9rem 1.4rem;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.3em;
  transition:top .3s cubic-bezier(.2,.7,.3,1);
}
.skip-link:focus{top:1rem}
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--ochre);outline-offset:3px;
}
.btn:focus-visible,.rail-btn:focus-visible,.bs-quick:focus-visible{
  outline:2px solid var(--ochre);outline-offset:3px;
}
/* pressed feedback */
.btn:active,.rail-btn:active,.bs-quick:active,.card-add:active{transform:translateY(1px)}
.nav a[aria-current="true"]{opacity:1}
.nav a[aria-current="true"]::after{width:100%}

/* inline form errors */
.field2.invalid input,.field2.invalid textarea,.field2.invalid select{border-color:var(--kiln)}
.field-error{
  font-size:.6875rem;color:var(--kiln);line-height:1.5;
  display:none;
}
.field2.invalid .field-error{display:block}
.enq-sent{
  font-size:.875rem;color:var(--kiln);line-height:1.6;
  border-left:2px solid var(--kiln);padding-left:.9rem;display:none;
}
.enq-sent.show{display:block}
.eyebrow{display:flex;align-items:center;gap:1.25rem;margin-bottom:1.75rem}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.25}

.btn{
  display:inline-flex;align-items:center;gap:.85rem;
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.35em;font-weight:400;
  padding:1.15rem 2.1rem;border:1px solid currentColor;background:none;cursor:pointer;
  transition:background .45s cubic-bezier(.2,.7,.3,1),color .45s cubic-bezier(.2,.7,.3,1);
  font-family:var(--f-body);
}
.btn svg{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.btn:hover svg{transform:translateX(6px)}
.btn--solid{background:var(--ochre);color:var(--linen);border-color:var(--ochre)}
.btn--solid:hover{background:var(--kiln);border-color:var(--kiln)}
.btn--light{color:var(--linen);border-color:rgba(239,225,212,.45)}
.btn--light:hover{background:var(--linen);color:var(--kiln);border-color:var(--linen)}
.btn--dark:hover{background:var(--umber);color:var(--linen);border-color:var(--umber)}

/* plaster texture used in place of photography */
.tex{position:relative;overflow:hidden;isolation:isolate;background:var(--sandstone)}
/* Plaster relief is kept deliberately shallow so a large brand-coloured field
   still measures as its true hex. Shading uses a deeper tint of the same hue
   (#2B1408) rather than black, so darkening never drifts the colour brown. */
.tex::before{
  content:"";position:absolute;inset:-20%;z-index:-2;
  background:
    radial-gradient(70% 60% at 22% 18%,rgba(255,248,240,.07),transparent 62%),
    radial-gradient(80% 70% at 80% 85%,rgba(43,20,8,.10),transparent 66%);
}
.tex::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.16;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='.55'/></svg>");
}
/* Kiln Terracotta is shaded with tints of itself, never with white or black.
   Calibrated to the brand cover art, which measures #7B2A0F in the lit area
   and #631E0A in shadow, averaging the true #6C230C. */
.tex--kiln{background:var(--kiln)}
.tex--kiln::before{
  background:
    radial-gradient(78% 66% at 20% 14%, rgba(139,58,24,.58), rgba(139,58,24,0) 60%),
    radial-gradient(84% 74% at 84% 88%, rgba(78,22,8,.30), rgba(78,22,8,0) 64%);
}
.tex--clay{background:var(--clay)}
.tex--ochre{background:var(--ochre)}
.tex--olive{background:var(--olive)}
.tex--umber{background:var(--umber)}
.tex--linen{background:var(--linen)}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- nav ---------- */
#hdr{
  position:fixed;inset:0 0 auto;z-index:120;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;
  padding:1.35rem var(--pad);
  /* --hdr-p is 0 at the top of the hero and 1 once it has scrolled past:
     the bar travels from terracotta (transparent over the wall) to light ochre */
  background:rgba(var(--hdr-bg,229,211,204),var(--hdr-p,0));
  color:var(--hdr-fg,var(--linen));
  transition:padding .45s ease,box-shadow .5s ease;
}
#hdr.stuck,#hdr.open{padding-block:.9rem;box-shadow:0 1px 0 rgba(108,35,12,.14)}
#hdr.open{--hdr-p:1;color:var(--kiln)}

.brand{
  display:inline-block;line-height:1;justify-self:start;
  font-size:clamp(1.75rem,2.5vw,2.25rem);
  padding:.72em;margin:-.72em;
}
.brand-mark{
  display:block;font-family:var(--f-mark);font-weight:400;
  letter-spacing:.16em;text-indent:.16em;text-align:center;line-height:1;
}
.brand-sub{
  display:flex;align-items:center;justify-content:center;gap:.6em;margin-top:.5em;
  font-family:var(--f-body);font-weight:300;font-size:.26em;
  letter-spacing:.6em;text-indent:.6em;opacity:.8;
}
.brand-sub i{display:block;width:2.4em;height:1px;background:currentColor;opacity:.55}

/* ---- centre rail ---- */
.nav{display:flex;gap:2.6rem;align-items:center;justify-self:center}
.nav-item{position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.28em;
  padding-block:.5rem;background:none;border:0;cursor:pointer;color:inherit;
  font-family:var(--f-body);font-weight:400;
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:currentColor;transition:width .45s cubic-bezier(.2,.7,.3,1);
}
.nav-item:hover>.nav-link::after,
.nav-link[aria-expanded="true"]::after{width:100%}
.nav-caret{width:.42rem;height:.42rem;transition:transform .35s ease;opacity:.6}
.nav-link[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}

/* ---- right utilities ---- */
.nav-end{display:flex;align-items:center;gap:1.4rem;justify-self:end}
.nav-icon{
  width:2.3rem;height:2.3rem;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:inherit;
  transition:opacity .3s ease;opacity:.85;
}
.nav-icon:hover{opacity:1}
.nav-icon svg{width:1rem;height:1rem}
.nav-contact{
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.28em;
  padding:.72rem 1.35rem;border:1px solid currentColor;
  transition:background .4s cubic-bezier(.2,.7,.3,1),color .4s,border-color .4s;
}
.nav-contact:hover{background:var(--ochre);border-color:var(--ochre);color:var(--linen)}

/* ---- panels ---- */
.nav-panel{
  position:fixed;left:0;right:0;top:0;z-index:110;
  background:var(--linen-sand);color:var(--kiln);
  padding:calc(var(--hdr-h,5rem) + 2.5rem) var(--pad) clamp(2.5rem,5vw,4rem);
  box-shadow:0 24px 40px -28px rgba(43,33,26,.35);
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.3,1),visibility .45s;
}
.nav-panel.open{opacity:1;visibility:visible;transform:none}
.nav-panel-inner{max-width:calc(var(--maxw) + 2*var(--pad));margin-inline:auto}
.nav-panel .label{color:var(--ochre);display:block;margin-bottom:2rem}

.mega{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
@media(max-width:820px){.mega{grid-template-columns:1fr;gap:0}}


/* grouped product menu — a column per range, plus a featured surface */
.mega{grid-template-columns:repeat(2,minmax(0,1fr)) 20rem}
@media(max-width:1180px){.mega{grid-template-columns:repeat(2,1fr)} .mega-feature{display:none}}
@media(max-width:820px){.mega{grid-template-columns:1fr}}
.mega-group{padding:1.6rem 0;border-top:1px solid rgba(43,33,26,.16)}
.mega-group > a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--f-head);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.25rem);
  color:var(--kiln);margin-bottom:.9rem;transition:color .35s;
}
.mega-group > a svg{width:1rem;height:.5rem;opacity:0;transform:translateX(-6px);
  transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.3,1);color:var(--ochre)}
.mega-group:hover > a svg{opacity:1;transform:none}
.mega-sub{display:flex;flex-direction:column;gap:.1rem}
.mega-sub a{
  font-size:.8125rem;line-height:1.5;padding-block:.35rem;opacity:.72;
  transition:opacity .3s,color .3s,padding-left .3s;
}
.mega-sub a:hover{opacity:1;color:var(--ochre);padding-left:.3rem}
.mega-sub .all{margin-top:.5rem;font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;opacity:.5}
.mega-feature{padding:1.6rem 0;border-top:1px solid rgba(43,33,26,.16)}
.mega-feature img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;margin-bottom:.85rem}
.mega-feature .label{color:var(--ochre);display:block;margin-bottom:.5rem;font-size:.5625rem;letter-spacing:.3em}
.mega-feature b{display:block;font-family:var(--f-head);font-weight:500;font-size:1rem;color:var(--kiln);margin-bottom:.3rem}
.mega-feature span{font-size:.75rem;line-height:1.5;opacity:.66}

/* ---- search ---- */
.search{
  position:fixed;inset:0;z-index:140;background:var(--linen);color:var(--umber);
  display:grid;place-items:center;padding:var(--pad);
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s;
}
.search.open{opacity:1;visibility:visible}
.search-inner{width:min(100%,54rem);text-align:center}
.search-inner .label{color:var(--ochre);display:block;margin-bottom:1.75rem}
.search-field{display:flex;align-items:center;gap:1rem;border-bottom:1px solid rgba(43,33,26,.3)}
.search-field input{
  flex:1;border:0;background:none;outline:none;color:var(--umber);
  font-family:var(--f-head);font-weight:400;font-size:clamp(1.4rem,4vw,2.6rem);
  padding:.5rem 0;
}
.search-field input::placeholder{color:var(--umber);opacity:.3}
.search-field button{background:none;border:0;cursor:pointer;color:var(--ochre);padding:.5rem}
.search-field button svg{width:1.15rem;height:1.15rem}
.search-note{margin-top:1.5rem;font-size:.75rem;opacity:.55}
.search-close{
  position:absolute;top:1.5rem;right:var(--pad);
  width:2.6rem;height:2.6rem;display:grid;place-items:center;
  background:none;border:1px solid rgba(43,33,26,.28);cursor:pointer;color:var(--umber);
  transition:background .35s,color .35s,border-color .35s;
}
.search-close:hover{background:var(--ochre);border-color:var(--ochre);color:var(--linen)}

/* ---- mobile ---- */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.5rem}
.burger span{width:22px;height:1.5px;background:currentColor;display:block;transition:transform .4s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:1000px){
  #hdr{grid-template-columns:auto 1fr}
  .nav{display:none}
  .burger{display:flex}
  .nav-contact{display:none}
  .nav-panel{padding-top:calc(var(--hdr-h,4.5rem) + 1.75rem)}
}
@media(prefers-reduced-motion:reduce){
  #hdr,.nav-panel,.search,}

/* ---------- hero ---------- */
/* The cover artwork is an approved brand asset: shown complete, never cropped,
   never recoloured. It sits `contain` over a blurred copy of itself so the
   letterbox reads as more of the same wall rather than a flat band.
   All motion happens to the whole plate at once, so the wordmark can never
   drift relative to the texture it is printed on. */
.hero{
  position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  background:#6C230C;
}

.hero-stage{position:absolute;inset:0;z-index:0}

.hero-plate{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.9s cubic-bezier(.45,0,.25,1);
}
.hero-plate.on{opacity:1}

/* one wrapper carries the breathing — artwork and backdrop move as one surface */
.plate-move{
  position:absolute;inset:0;
  animation:surfaceBreathe 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes surfaceBreathe{
  from{transform:scale(1) translate3d(0,0,0)}
  to  {transform:scale(1.015) translate3d(-0.5%,-0.35%,0)}
}

.plate-blur{
  position:absolute;inset:-4%;
  background-size:cover;background-position:center;
  filter:blur(28px) saturate(1.02);
}
.plate-art{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  display:block;
}

/* soft shadow travelling across the surface, and a faint counter-light.
   Both are environment, not UI — they multiply into the material. */
.hero-shadow,.hero-light{position:absolute;inset:-30%;z-index:2;pointer-events:none;will-change:transform}
.hero-shadow{
  background:radial-gradient(closest-side at 40% 45%, rgba(28,12,4,.34), rgba(28,12,4,0) 72%);
  mix-blend-mode:multiply;
  animation:shadowDrift 19s ease-in-out infinite alternate;
}
.hero-light{
  background:radial-gradient(closest-side at 62% 38%, rgba(255,232,208,.16), rgba(255,232,208,0) 68%);
  mix-blend-mode:soft-light;
  animation:lightDrift 23s ease-in-out infinite alternate;
}
@keyframes shadowDrift{
  from{transform:translate3d(-6%,-3%,0) scale(1)}
  to  {transform:translate3d(7%,5%,0) scale(1.10)}
}
@keyframes lightDrift{
  from{transform:translate3d(4%,2%,0) scale(1.04)}
  to  {transform:translate3d(-5%,-4%,0) scale(1)}
}

/* slides awaiting artwork — a quiet brand ground, no filler image, no text */
.plate-empty{
  position:absolute;inset:0;
  background:
    radial-gradient(72% 60% at 50% 42%, rgba(239,225,212,.5), rgba(239,225,212,0) 70%),
    linear-gradient(155deg,#E3D2B9 0%,#DAC7AD 52%,#CDB79B 100%);
}


/* ---- slide 1: limewashed terracotta wall with the identity worked into it ---- */
.plate-wall{
  position:absolute;inset:0;
  background-image:var(--wall);background-size:cover;background-position:center;
}
/* fine plaster grain — sits ABOVE the lettering so it crosses the type too */
.plate-grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:.30;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='5' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23g)' opacity='.6'/></svg>");
}
.wall-lockup{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-inline:var(--pad);
  color:var(--linen);
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wall-mark{
  font-family:var(--f-mark);font-weight:400;
  font-size:clamp(3rem,10.5vw,8.5rem);line-height:1;
  letter-spacing:.2em;text-indent:.2em;
  opacity:.94;
  /* shallow recess: dark lip above, warm light catching below */
  text-shadow:0 -1px 1px rgba(46,16,6,.42), 0 2px 3px rgba(46,16,6,.30);
}
.wall-sub{
  display:flex;align-items:center;gap:1.15em;margin-top:1.3em;
  font-family:var(--f-body);font-weight:300;
  font-size:clamp(.58rem,1vw,.7rem);letter-spacing:.62em;text-indent:.62em;
  opacity:.82;text-shadow:0 1px 2px rgba(46,16,6,.34);
}
.wall-sub i{display:block;width:3em;height:1px;background:currentColor;opacity:.5}


/* CTA persists across all slides — sits on the hero, not inside a plate */
.hero-cta{
  position:absolute;z-index:6;
  left:var(--pad);bottom:clamp(3rem,7vh,4.25rem);
}
@media(max-width:760px){
  .hero-cta{left:50%;translate:-50% 0;bottom:clamp(5.5rem,12vh,7rem)}
}


/* Frosted, tone-adaptive controls. Each plate declares data-tone; the hero
   mirrors it, so the CTA and indicator stay legible on any slide's imagery. */
.hero-cta a{
  display:inline-flex;align-items:center;gap:.85rem;
  font-family:var(--f-body);font-weight:400;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.3em;
  padding:1.05rem 1.9rem;border:1px solid transparent;
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  backdrop-filter:blur(14px) saturate(1.08);
  transition:background 1.2s ease,color 1.2s ease,border-color 1.2s ease;
}
.hero-cta a svg{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.hero-cta a:hover svg{transform:translateX(6px)}

.hero[data-tone="dark"] .hero-cta a{
  background:rgba(239,225,212,.12);border-color:rgba(239,225,212,.26);color:var(--linen);
}
.hero[data-tone="dark"] .hero-cta a:hover{background:rgba(239,225,212,.22);border-color:rgba(239,225,212,.46)}
.hero[data-tone="light"] .hero-cta a{
  background:rgba(43,20,8,.09);border-color:rgba(43,20,8,.20);color:var(--kiln);
}
.hero[data-tone="light"] .hero-cta a:hover{background:rgba(43,20,8,.17);border-color:rgba(43,20,8,.34)}

.hero-seg,.hero-seg i,.scrollcue{transition:background 1.2s ease}
.hero[data-tone="light"] .hero-seg{background:rgba(108,35,12,.22)}
.hero[data-tone="light"] .hero-seg i{background:var(--ochre)}
.hero[data-tone="light"] .scrollcue{background:linear-gradient(rgba(140,63,43,.75),transparent)}
.hero[data-tone="light"] .hero-seg:focus-visible{outline-color:var(--ochre)}

/* ---------- indicator ---------- */
.hero-dots{
  position:absolute;z-index:5;left:50%;translate:-50% 0;
  bottom:clamp(3.25rem,7vh,4.5rem);
  display:flex;gap:.6rem;align-items:center;
}
.hero-seg{
  width:2.4rem;height:2px;padding:0;border:0;cursor:pointer;
  background:rgba(239,225,212,.30);position:relative;overflow:hidden;
}
.hero-seg i{position:absolute;inset:0;background:var(--linen);transform-origin:left;transform:scaleX(0)}
.hero-seg.done i{transform:scaleX(1)}
.hero-seg.live i{animation:heroFill var(--dur,10s) linear forwards}
@keyframes heroFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero.paused .hero-seg.live i{animation-play-state:paused}
.hero-seg:focus-visible{outline:2px solid var(--ochre);outline-offset:4px}

.scrollcue{
  position:absolute;z-index:5;left:50%;bottom:1.6rem;translate:-50% 0;
  width:1px;height:40px;background:linear-gradient(rgba(239,225,212,.75),transparent);
}

/* Portrait phones: the artwork letterboxes to a thin strip, so allow a centred
   cover crop instead — the wordmark and LIVING stay dead centre. */
@media(max-aspect-ratio:3/4){
  .plate-art{object-fit:cover}
  .plate-blur{display:none}
}

@media(prefers-reduced-motion:reduce){
  .plate-move,.hero-shadow,.hero-light{animation:none}
  .hero-plate{transition:none}
  .hero-seg.live i{animation:none;transform:scaleX(1)}
  .hero-stage{transform:none!important}
}

/* ---------- section frame ---------- */
section{padding-block:clamp(4.5rem,10vw,9rem)}
.ranges{padding-block:clamp(5.5rem,11vw,10.5rem) clamp(4rem,8vw,7rem)}
.sec-head{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:500;max-width:16ch}
.sec-head p{max-width:44ch;opacity:.8;font-size:.95rem}
@media(max-width:760px){.sec-head{grid-template-columns:1fr}}

/* ---------- collection / products ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:var(--gap) clamp(1.25rem,2vw,2rem)}
.card{display:flex;flex-direction:column;gap:1.15rem;cursor:pointer}
.card-media{position:relative;aspect-ratio:4/5;overflow:hidden}
.card-media .tex{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-media .tex{transform:scale(1.05)}
.card-tag{
  position:absolute;z-index:3;top:1rem;left:1rem;
  background:rgba(239,225,212,.92);color:var(--umber);
  padding:.45rem .8rem;font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;
}
.card-add{
  position:absolute;z-index:3;inset:auto 1rem 1rem;
  background:var(--linen);color:var(--umber);border:0;cursor:pointer;
  font-family:var(--f-body);font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;
  padding:.95rem;opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease,background .3s ease,color .3s ease;
}
.card:hover .card-add,.card:focus-within .card-add{opacity:1;transform:none}
.card-add:hover{background:var(--kiln);color:var(--linen)}
.card-title{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.card-title h3{font-size:1.1rem;font-weight:500}
.price{font-family:var(--f-head);font-weight:500;font-size:1rem;white-space:nowrap}
.price span{font-family:var(--f-body);font-weight:300;font-size:.75rem;opacity:.7}
.price--poa{
  font-family:var(--f-body);font-weight:400;font-size:.625rem;
  text-transform:uppercase;letter-spacing:.22em;opacity:.55;
}
.card-spec{font-size:.8125rem;opacity:.65;line-height:1.6}
.swatches{display:flex;gap:.4rem;margin-top:.15rem}
.sw{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(43,33,26,.18)}

/* ---------- calculator ---------- */
.calc{
  margin-top:clamp(3rem,5vw,4.5rem);display:grid;grid-template-columns:1.1fr 1fr;
  border:1px solid rgba(43,33,26,.16);
}
@media(max-width:860px){.calc{grid-template-columns:1fr}}
.calc-copy{padding:clamp(2rem,3.5vw,3.2rem)}
.calc-copy h3{font-size:1.5rem;margin-block:.9rem 1rem}
.calc-copy p{font-size:.9rem;opacity:.75;max-width:40ch}
.calc-panel{background:var(--umber);color:var(--linen);padding:clamp(2rem,3.5vw,3.2rem);display:flex;flex-direction:column;gap:1.4rem}
.field{display:flex;flex-direction:column;gap:.6rem}
.field label{font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;opacity:.7}
.field input,.field select{
  background:transparent;border:0;border-bottom:1px solid rgba(239,225,212,.32);
  color:var(--linen);font-family:var(--f-head);font-size:1.5rem;font-weight:500;
  padding-block:.5rem;outline:none;width:100%;
}
.field select option{background:var(--umber);color:var(--linen);font-size:.9rem}
.field input:focus,.field select:focus{border-color:var(--clay)}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.calc-out{border-top:1px solid rgba(239,225,212,.22);padding-top:1.4rem;margin-top:.4rem}
.calc-out .label{opacity:.7}
.calc-total{font-family:var(--f-head);font-size:clamp(2rem,4vw,2.8rem);font-weight:500;margin-top:.6rem;line-height:1}
.calc-note{font-size:.75rem;opacity:.6;line-height:1.6}

/* ─────────── Explore our ranges ─────────── */
.ranges{background:var(--pearl);overflow:hidden}
.ranges-inner{
  display:grid;grid-template-columns:25.5rem 1fr;
  column-gap:7rem;align-items:center;   /* their .slider2_component gap */
  padding-block:clamp(1rem,3vw,2.5rem);
  padding-left:var(--pad);
}
@media(max-width:1100px){
  .ranges-inner{grid-template-columns:1fr;row-gap:clamp(2.25rem,5vw,3rem);padding-right:var(--pad)}
}

.ranges-copy{max-width:38ch}
.ranges-copy h2{
  font-family:var(--f-head);font-weight:500;
  font-size:3.125rem;line-height:3.75rem;letter-spacing:-.015em;
  text-wrap:balance;margin-bottom:3rem;          /* their margin-large */
}
@media(max-width:991px){.ranges-copy h2{font-size:2.75rem;line-height:3rem}}
@media(max-width:767px){.ranges-copy h2{font-size:2.25rem;line-height:2.5rem}}
.ranges-copy p{
  opacity:.78;font-size:1.25rem;line-height:24px;
  max-width:25.4375rem;margin-bottom:2.25rem;
}
@media(max-width:991px){.ranges-copy p{font-size:1.125rem;line-height:1.6}}

/* ─────────── rail ─────────── */
.ranges-slider{position:relative;min-width:0}
.rail{
  display:flex;gap:30px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-right:var(--pad);padding-block:.5rem;
  cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rail.dragging .range-card{pointer-events:none}
@media(max-width:1100px){
  .rail{padding-right:0;gap:15px}
  .range-card{flex:0 0 calc((100% - 16.5px) / 2.1)}
}
@media(max-width:640px){
  .rail{gap:10px}
  .range-card{flex:0 0 calc((100% - 1px) / 1.1)}
}

.range-card{
  position:relative;flex:0 0 calc((100% - 45px) / 2.5);min-width:15rem;
  aspect-ratio:1;                       /* BetterTiles swiper-slide.is-spec.v2 */
  overflow:hidden;border-radius:5px;scroll-snap-align:start;
  display:flex;align-items:flex-end;padding:1.8125rem;
  color:#FFFFFF;isolation:isolate;
  background:var(--umber);
  transition:box-shadow .6s cubic-bezier(.2,.7,.3,1);
}
@media(max-width:991px){.range-card{padding:1.25rem}}
@media(max-width:767px){.range-card{padding:.75rem}}
.range-card::after{                       /* keyboard focus ring, inside the frame */
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  outline:2px solid transparent;outline-offset:-3px;transition:outline-color .25s;
}
.range-card:focus-visible::after{outline-color:var(--ochre)}

.rc-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--umber)}
.rc-media img{
  width:112%;height:112%;max-width:none;object-fit:cover;position:absolute;left:-6%;top:-6%;
  transform:translate3d(var(--px,0px),0,0) scale(1);
  transition:transform .9s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.range-card:hover .rc-media img{transform:translate3d(var(--px,0px),0,0) scale(1.06)}

/* the reference's overlay exactly: nothing until 68%, then #121212 at 34% */
.rc-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 68%, rgba(18,18,18,.34) 100%);
  transition:opacity .6s ease;
}
/* their name shrinks below 767px, where 34% is no longer enough to carry it */
@media(max-width:767px){
  .rc-veil{background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 56%, rgba(18,18,18,.52) 100%)}
}

.rc-body{
  position:relative;z-index:2;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
/* 1.875rem / 2.25rem at weight 400, stepping down at their breakpoints */
.rc-body h3{
  font-family:var(--f-head);font-weight:400;
  font-size:1.875rem;line-height:2.25rem;color:#FFFFFF;
}
@media(max-width:991px){.rc-body h3{font-size:1.5rem;line-height:1.8rem}}
@media(max-width:767px){.rc-body h3{font-size:1.35rem;line-height:1.5rem}}
@media(max-width:479px){.rc-body h3{font-size:1.125rem;line-height:1.25rem}}

.rc-icon{
  flex:0 0 auto;display:grid;place-items:center;
  width:1.8125rem;height:1.8125rem;border-radius:100%;
  background:#FFFFFF;color:var(--umber);
  transition:background .45s cubic-bezier(.2,.7,.3,1),color .45s;
}
.rc-icon svg{width:.625rem;height:.625rem;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.range-card:hover .rc-icon{background:var(--kiln);color:#FFFFFF}
.range-card:hover .rc-icon svg{transform:translateX(2px)}

/* a light photograph — a studio shot on white — needs more wash under the
   name than the reference's 34% gives it. Starts earlier and lands deeper. */
.range-card--light .rc-media{background:#FFFFFF}
.range-card--light .rc-veil{
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 44%,
    rgba(18,18,18,.70) 80%, rgba(18,18,18,.80) 100%);
}

/* ranges still waiting on photography — a flat ground from the palette, and a
   deeper wash so the white name carries without an image under it */
.range-card--blank .rc-media{background:var(--sandstone)}
.range-card--blank .rc-veil{
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 52%, rgba(18,18,18,.55) 100%);
}

/* ─────────── controls ─────────── */
.rail-controls{
  display:flex;align-items:center;gap:1.5rem;
  margin-top:clamp(1.5rem,2.5vw,2rem);padding-right:var(--pad);
}
@media(max-width:1100px){.rail-controls{padding-right:0}}
.rail-track{flex:1;height:1px;background:rgba(43,33,26,.22);position:relative}
.rail-thumb{
  position:absolute;left:0;top:-1px;height:3px;background:var(--ochre);
  width:33%;transition:transform .18s linear;transform-origin:left;
}
.rail-btns{display:flex;gap:.6rem}
.rail-btn{
  width:2.6rem;height:2.6rem;border:1px solid rgba(43,33,26,.3);background:none;
  display:grid;place-items:center;cursor:pointer;color:var(--umber);
  transition:background .35s,color .35s,border-color .35s,opacity .35s;
}
.rail-btn:hover:not(:disabled){background:var(--kiln);border-color:var(--kiln);color:var(--linen)}
.rail-btn:disabled{opacity:.28;cursor:default}
.rail-btn svg{width:.85rem;height:.85rem}

/* ─────────── scroll reveal ─────────── */
.rv-up{opacity:0;transform:translateY(30px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.rv-up.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv-up{opacity:1;transform:none;transition:none}
  .rc-media img,.rc-body p,.rc-icon,.rc-veil{transition:none}
  .rail{scroll-behavior:auto}
}

/* ─────────── Best sellers ─────────── */
.bs-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.25rem);
}
.bs-head h2{
  font-family:var(--f-head);font-weight:500;
  font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.12;letter-spacing:-.015em;
}
.bs-more{
  display:inline-flex;align-items:center;gap:.8rem;padding-bottom:.35rem;
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.3em;
  border-bottom:1px solid rgba(43,33,26,.32);transition:color .4s,border-color .4s;
}
.bs-more svg{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.bs-more:hover{color:var(--kiln);border-color:var(--kiln)}
.bs-more:hover svg{transform:translateX(5px)}

.bs-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:clamp(1.5rem,3vw,2.5rem) clamp(1.15rem,2vw,1.75rem);
}

.bs-card{display:flex;flex-direction:column;gap:1.15rem;color:inherit}
.bs-media{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sandstone);
}
.bs-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform 1.3s cubic-bezier(.2,.7,.3,1);
  will-change:opacity,transform;
}
.bs-media .bs-alt{opacity:0}                    /* macro detail, cross-fades in */
.bs-card:hover .bs-media .bs-alt,
.bs-card:focus-visible .bs-media .bs-alt{opacity:1}
.bs-card:hover .bs-media img{transform:scale(1.045)}

/* the "quick view" slat, borrowed from Lantern & Space and made an enquiry action */
.bs-quick{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:var(--linen);color:var(--umber);
  padding:1rem;text-align:center;border:0;width:100%;cursor:pointer;
  font-family:var(--f-body);font-size:.625rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.3em;
  transform:translateY(101%);
  transition:transform .55s cubic-bezier(.2,.7,.3,1),background .35s,color .35s;
}
.bs-card:hover .bs-quick,
.bs-card:focus-within .bs-quick{transform:none}
.bs-quick:hover{background:var(--kiln);color:var(--linen)}

.bs-tag{
  position:absolute;z-index:4;top:1rem;left:1rem;
  background:rgba(239,225,212,.94);color:var(--umber);
  padding:.42rem .75rem;font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;
}

.bs-info{display:flex;flex-direction:column;gap:.4rem}
.bs-title{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.bs-title h3{font-family:var(--f-head);font-weight:500;font-size:1.1rem;line-height:1.2}
.bs-poa{
  font-family:var(--f-body);font-size:.5625rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.22em;opacity:.5;white-space:nowrap;
}
.bs-spec{font-size:.75rem;line-height:1.6;opacity:.62;font-variant-numeric:tabular-nums}
.bs-code{
  font-size:.5625rem;letter-spacing:.26em;text-transform:uppercase;opacity:.42;
}

/* no hover to reveal with — show the action, skip the cross-fade */
@media(hover:none){
  .bs-quick{transform:none}
  .bs-media .bs-alt{display:none}
}
@media(prefers-reduced-motion:reduce){
  .bs-media img,.bs-quick{transition:none}
}

/* ---------- why ---------- */
.why{background:var(--sandstone)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(2rem,4vw,4rem);margin-top:1rem}
.why-item svg{margin-bottom:1.5rem}
.why-item h3{font-size:1.15rem;font-weight:600;margin-bottom:.7rem}
.why-item p{font-size:.9rem;opacity:.78;max-width:34ch}

/* ---------- applications rail ---------- */
.rail::-webkit-scrollbar{display:none}
.rail-item{position:relative;flex:0 0 clamp(230px,26vw,340px);aspect-ratio:3/4;scroll-snap-align:start;overflow:hidden;color:var(--linen)}
.rail-item .tex{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.rail-item:hover .tex{transform:scale(1.06)}
.rail-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(43,33,26,.72))}
.rail-cap{position:absolute;z-index:2;inset:auto 0 0;padding:1.6rem;display:flex;flex-direction:column;gap:.5rem}
.rail-cap h3{font-size:1.25rem;font-weight:500}

/* ---------- project ---------- */
.project{position:relative;min-height:78svh;display:flex;align-items:flex-end;color:var(--linen)}
.project::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(43,33,26,.78),rgba(43,33,26,.18))}
.project-inner{position:relative;z-index:2;padding:var(--pad);max-width:60ch}
.project-inner h2{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:400;margin-block:1.2rem 1.6rem}
.project-inner p{opacity:.85;margin-bottom:2rem;max-width:46ch}

/* ---------- sample band ---------- */
.samples{position:relative;color:var(--linen);text-align:center}
.samples-inner{position:relative;z-index:2;padding-inline:var(--pad);display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.samples h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:400;max-width:20ch}
.samples p{max-width:48ch;opacity:.86}
.samples .eyebrow::after{display:none}
.samples-price{font-family:var(--f-head);font-size:.95rem;letter-spacing:.05em;opacity:.85}

/* ---------- enquire ---------- */
.enquire{
  background:var(--sandstone);
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2.5rem,5vw,5rem);align-items:start;
}
@media(max-width:880px){.enquire{grid-template-columns:1fr}}
.enquire h2{font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:500;margin-bottom:1.2rem;max-width:14ch}
.enq-lead{opacity:.78;max-width:44ch;font-size:.95rem}
.enq-phone{display:inline-flex;flex-direction:column;gap:.5rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(43,33,26,.2)}
.enq-phone .label{opacity:.55}
.enq-phone strong{font-family:var(--f-head);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:500;color:var(--kiln);letter-spacing:.01em}
.enq-phone:hover strong{color:var(--ochre)}
.enq-hours{font-size:.8125rem;opacity:.6}

.enq-form{display:flex;flex-direction:column;gap:1.15rem;background:var(--linen);padding:clamp(1.75rem,3vw,2.75rem)}
.enq-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media(max-width:520px){.enq-row{grid-template-columns:1fr}}
.field2{display:flex;flex-direction:column;gap:.5rem}
.field2>span{font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;opacity:.6}
.field2 input,.field2 select,.field2 textarea{
  font-family:var(--f-body);font-weight:300;font-size:.95rem;color:var(--umber);
  background:transparent;border:0;border-bottom:1px solid rgba(43,33,26,.28);
  padding:.6rem .1rem;outline:none;width:100%;resize:vertical;
}
.field2 input::placeholder,.field2 textarea::placeholder{color:var(--umber);opacity:.32}
.field2 input:focus,.field2 select:focus,.field2 textarea:focus{border-color:var(--kiln)}
.enq-form .btn{align-self:flex-start;margin-top:.6rem}
.enq-fine{font-size:.75rem;opacity:.55;line-height:1.6}

/* ---------- trade ---------- */
.trade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--gap);align-items:center;background:var(--linen)}
.trade h2{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:500;margin-block:1rem 1.2rem}
.trade p{opacity:.78;max-width:42ch;margin-bottom:2rem;font-size:.95rem}
.trade-list{display:flex;flex-direction:column}
.trade-list div{display:flex;gap:1.2rem;padding-block:1.15rem;border-top:1px solid rgba(43,33,26,.16);font-size:.9rem;align-items:baseline}
.trade-list div:last-child{border-bottom:1px solid rgba(43,33,26,.16)}
.trade-list span{font-family:var(--f-head);font-weight:600;font-size:.75rem;opacity:.5;min-width:2ch}


/* ---------- best sellers ----------
   Structure and anatomy follow the Best Sellers brief exactly; its palette and
   typefaces are mapped onto the KOJO system:
     terracotta #6f3019 -> Kiln #6C230C, Ochre #8C3F2B for interactive
     off-white  #fbf9f4 -> Pearl #FBF8F4
     sage       #5c614d -> muted Umber (Olive Stone fails contrast on Pearl)
     Playfair Display -> Quicksand    Plus Jakarta Sans -> Poppins            */
.best{background:var(--pearl);padding:96px var(--pad)}
.best__inner{max-width:1760px;margin-inline:auto}   /* their --container-width: 176rem */
.best__head{text-align:center;margin-bottom:40px}
.best__eyebrow{display:block;font-family:var(--f-body);font-weight:400;font-size:.6875rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ochre);margin-bottom:1.75rem}
.best__title{font-family:var(--f-head);font-weight:500;font-size:3.125rem;line-height:3.75rem;letter-spacing:-.015em;color:var(--kiln);margin-bottom:14px}
@media(max-width:991px){.best__title{font-size:2.75rem;line-height:3rem}}
@media(max-width:767px){.best__title{font-size:2.25rem;line-height:2.5rem}}
/* tabs as the reference sets them: small uppercase, 1.2rem side padding,
   a 1px underline on the active one only */
.best__tabs{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:calc(.8rem + 2.2rem);padding-bottom:1rem}
.best__tab{appearance:none;background:none;border:0;cursor:pointer;padding:0 1.2rem;font-family:var(--f-body);font-weight:400;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(43,33,26,.55);transition:color .3s ease}
.best__tab:first-child{padding-left:0}
.best__tab:last-child{padding-right:0}
.best__tab span{display:inline-block;padding-bottom:.35rem;border-bottom:1px solid transparent;transition:border-color .3s ease}
.best__tab[aria-selected="true"]{color:var(--kiln)}
.best__tab[aria-selected="true"] span{border-bottom-color:currentColor}
.best__tab:focus-visible{outline:2px solid var(--ochre);outline-offset:4px}
/* each tab is a rail: four sheets across on a desktop, stepped by the same
   arrows and progress line as Explore our collection */
.best__panel{opacity:1;transition:opacity .28s ease}
.best__panel[hidden]{display:none}
.best__panel.is-fading{opacity:0}
.best__rail{
  display:flex;gap:12px;list-style:none;padding:0;margin:0;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;
}
.best__rail::-webkit-scrollbar{display:none}
.best__rail.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.best__rail.dragging .panel{pointer-events:none}
.best__rail > .panel{flex:0 0 calc((100% - 12px) / 2);min-width:0;scroll-snap-align:start}
@media(min-width:750px){.best__rail{gap:16px}.best__rail > .panel{flex-basis:calc((100% - 32px) / 3)}}
@media(min-width:990px){.best__rail > .panel{flex-basis:calc((100% - 48px) / 4)}}
@media(max-width:575px){
  .best__rail .panel__info{padding-top:1rem}
  .best__rail .panel__name{font-size:1rem}
  .best__rail .panel__qv{bottom:.75rem;padding:.8rem .4rem;letter-spacing:.18em}
}
.best__controls{display:flex;align-items:center;gap:1.5rem;margin-top:clamp(1.75rem,3vw,2.5rem)}
.best__controls[hidden]{display:none}
@media(max-width:767px){
  .best{padding:56px var(--pad)}
}


/* ---------- best-seller cards: the reference's product card, shared with the series pages ---------- */
.panel{position:relative;display:flex;flex-direction:column}
.panel__card{position:relative;overflow:hidden;background:var(--sandstone)}
.panel__media{position:relative;display:block;padding-bottom:133%;overflow:hidden}
.panel__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease,opacity .5s ease;
}
.panel__media img+img{opacity:0}
.panel:hover .panel__media img:first-child,
.panel:focus-within .panel__media img:first-child{opacity:0;transform:scale(1.12)}
.panel:hover .panel__media img+img,
.panel:focus-within .panel__media img+img{opacity:1;transform:scale(1.1)}

/* quick view button — the reference's placement and reveal, KOJO's type */
.panel__qv{
  position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);
  width:90%;z-index:3;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.1rem 1.5rem;border:1px solid var(--ochre);
  background:var(--ochre);color:var(--linen);
  font-family:var(--f-body);font-weight:400;font-size:.5625rem;
  letter-spacing:.3em;text-transform:uppercase;line-height:1;
  opacity:0;transition:opacity .15s ease,background .4s ease,border-color .4s ease;
}
.panel:hover .panel__qv,.panel:focus-within .panel__qv{opacity:1}
.panel__qv:hover{background:var(--kiln);border-color:var(--kiln)}
.panel__qv:focus-visible{opacity:1;outline:2px solid var(--kiln);outline-offset:3px}
/* no hover to reveal it on touch, and no hover on a one- or two-column
   layout either, so the button just stays visible there */
@media(hover:none),(max-width:749px){.panel__qv{opacity:1}}

.panel__info{padding-top:1.4rem;text-align:center;display:flex;flex-direction:column;gap:.45rem}
.panel__name{font-family:var(--f-head);font-weight:500;font-size:1.15rem;line-height:1.25;color:var(--kiln)}
.panel__sub{font-size:.6875rem;line-height:1.5;color:rgba(43,33,26,.55)}
.series__note{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;
  border-top:1px solid rgba(108,35,12,.16);
  font-size:.8125rem;line-height:1.7;color:rgba(43,33,26,.6);max-width:56ch;
}


/* ---------- quick view ----------
   Overlay, blur and centred sheet sized the way the reference sizes theirs:
   550px sheet on mobile, 1048px from 990px up, media and info side by side. */
.qv{
  position:fixed;inset:0;z-index:200;
  background:rgba(43,33,26,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s ease;
}
.qv.open{opacity:1}
.qv__panel{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.985);
  width:calc(100% - 3rem);max-width:550px;max-height:calc(100% - 3rem);
  background:var(--pearl);overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.qv.open .qv__panel{transform:translate(-50%,-50%) scale(1)}
@media(min-width:990px){.qv__panel{max-width:1048px;width:calc(100% - 10rem)}}
.qv__close{
  position:absolute;top:1rem;right:1rem;z-index:10;
  width:2.5rem;height:2.5rem;display:grid;place-items:center;
  border:1px solid rgba(108,35,12,.25);background:var(--pearl);color:var(--kiln);cursor:pointer;
  transition:background .35s,color .35s,border-color .35s;
}
.qv__close:hover{background:var(--ochre);border-color:var(--ochre);color:var(--linen)}
.qv__close svg{width:.8rem;height:.8rem}
.qv__close:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}

.qv__body{display:flex;flex-direction:column;gap:0;overflow-y:auto;max-height:calc(100vh - 3rem)}
@media(min-width:990px){
  .qv__body{flex-direction:row;align-items:stretch;gap:0;max-height:min(760px,calc(100vh - 4rem))}
}
.qv__media{background:var(--sandstone);flex:0 0 auto}
@media(min-width:990px){.qv__media{width:50%;display:flex;flex-direction:column}}
.qv__stage{position:relative;padding-bottom:100%;overflow:hidden}
@media(min-width:990px){.qv__stage{flex:1;padding-bottom:0}}
.qv__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.qv__thumbs{display:flex;gap:.5rem;padding:.5rem;background:var(--pearl)}
.qv__thumbs button{
  position:relative;flex:0 0 4.5rem;aspect-ratio:3/4;padding:0;cursor:pointer;
  border:1px solid transparent;background:none;overflow:hidden;transition:border-color .3s}
.qv__thumbs button[aria-selected="true"]{border-color:var(--ochre)}
.qv__thumbs button:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
.qv__thumbs img{width:100%;height:100%;object-fit:cover;display:block}

.qv__info{
  flex:1;min-width:0;padding:clamp(1.5rem,2.4vw,2.5rem);
  display:flex;flex-direction:column;
}
@media(min-width:990px){.qv__info{overflow-y:auto}}
.qv__series{color:var(--ochre);display:block;margin-bottom:1.1rem;font-size:.5625rem;letter-spacing:.34em}
.qv__info h2{
  font-family:var(--f-head);font-weight:500;
  font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.15;letter-spacing:-.01em;color:var(--kiln);
}
.qv__sub{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(43,33,26,.5);margin-top:.6rem}
.qv__desc{font-size:.875rem;line-height:1.7;color:rgba(43,33,26,.7);margin-top:1rem;max-width:46ch}

.qv__specs{margin-top:1.25rem;border-top:1px solid rgba(108,35,12,.16)}
.qv__specs > div{
  display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid rgba(108,35,12,.1);
}
@media(max-width:420px){.qv__specs > div{grid-template-columns:1fr;gap:.2rem}}
.qv__specs dt{font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ochre);padding-top:.2rem}
.qv__specs dd{margin:0;font-size:.8125rem;line-height:1.55;color:var(--umber);opacity:.82}
.qv__fine{font-size:.75rem;line-height:1.55;color:rgba(43,33,26,.5);margin-top:.9rem;max-width:44ch}
.qv__acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.qv__acts .btn{font-size:.5625rem;letter-spacing:.3em;padding:1.05rem 1.7rem}
.qv__said{margin-top:1rem;font-size:.8125rem;line-height:1.6;color:var(--ochre)}

@media(prefers-reduced-motion:reduce){
  .panel__media img,.panel__qv,.qv,.qv__panel,.series__back svg{transition:none}
}

/* best-seller slots still waiting on photography */
.panel--blank .panel__card{background:var(--sandstone)}
.panel--blank .panel__media{display:block;padding-bottom:133%;background:linear-gradient(180deg,var(--sandstone),var(--linen-sand))}

/* ---------- coming-soon states (no photography yet) ---------- */
.rc-text{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.rc-soon{font-size:.5625rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.panel__soon{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  font-size:.625rem;letter-spacing:.26em;text-transform:uppercase;color:var(--kiln);pointer-events:none}
.panel__soon-mark,.insta__soon-mark{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  border:1px dashed rgba(108,35,12,.4);color:var(--ochre)}
.panel__soon-mark svg,.insta__soon-mark svg{width:1.15rem;height:1.15rem}
.insta__tile--soon{cursor:default}
.insta__tile--soon img{opacity:.22;filter:saturate(.6)}
.insta__tile--soon .insta__veil,.insta__tile--soon .insta__cap{display:none}
.insta__tile--soon:hover img{transform:none}
.insta__soon{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  font-size:.5625rem;letter-spacing:.26em;text-transform:uppercase;color:var(--kiln);text-align:center;padding:.5rem}

/* ---------- instagram ----------
   White, so the feed runs on from the near-white of Best Sellers as one
   field rather than a second band. Tiles are 4:5, clipped, with the scale on hover. */
.insta{background:#FFFFFF;padding:7.25rem var(--pad) 9.375rem}
.insta__inner{max-width:calc(var(--maxw) + 2*var(--pad));margin-inline:auto}
.insta__head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3rem);
}
.insta__eyebrow{
  display:flex;align-items:center;gap:1.25rem;font-family:var(--f-body);font-weight:400;
  font-size:.6875rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ochre);
  margin-bottom:1.75rem;
}
.insta__eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.25}
.insta__title{
  font-family:var(--f-head);font-weight:500;font-size:3.125rem;line-height:3.75rem;
  letter-spacing:-.015em;color:var(--kiln);
}
.insta__handle{
  display:inline-flex;align-items:center;gap:.7rem;padding-bottom:.35rem;
  font-family:var(--f-body);font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--kiln);border-bottom:1px solid rgba(108,35,12,.35);
  transition:color .4s,border-color .4s;
}
.insta__handle svg{width:.95rem;height:.95rem}
.insta__handle:hover{color:var(--ochre);border-color:var(--ochre)}

.insta__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
@media(max-width:1100px){.insta__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.insta__grid{grid-template-columns:repeat(2,1fr);gap:16px}}

.insta__tile{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--sandstone)}
.insta__tile img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1),filter .6s ease;
}
.insta__tile:hover img,.insta__tile:focus-visible img{transform:scale(1.06)}
.insta__veil{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(108,35,12,0) 40%,rgba(108,35,12,.55) 100%),
             rgba(140,63,43,.28);
  opacity:0;transition:opacity .5s ease;
}
.insta__tile:hover .insta__veil,.insta__tile:focus-visible .insta__veil{opacity:1}
.insta__veil svg{width:1.6rem;height:1.6rem;color:var(--linen);
  transform:translateY(6px);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.insta__tile:hover .insta__veil svg{transform:none}
.insta__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:.85rem .9rem;color:var(--linen);
  font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);
}
.insta__tile:hover .insta__cap,.insta__tile:focus-visible .insta__cap{opacity:.9;transform:none}
.insta__tile:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}

.insta__cta{text-align:center;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media(max-width:1100px){.insta{padding:6rem var(--pad)}}
@media(max-width:767px){.insta{padding:5rem var(--pad) 4rem}.insta__title{font-size:2.25rem;line-height:2.5rem}}
@media(max-width:991px){.insta__title{font-size:2.75rem;line-height:3rem}}
@media(prefers-reduced-motion:reduce){.insta__tile img,.insta__veil,.insta__cap{transition:none}}

/* ---------- footer ---------- */
.site-footer{
  position:relative;overflow:hidden;
  background:var(--linen-light);color:var(--umber);
  padding:clamp(4.5rem,9vw,7.5rem) var(--pad) 2.5rem;
  border-top:1px solid rgba(108,35,12,.12);
}
/* oversized K, sunk into the ground rather than sitting on it */
.foot-mark{
  position:absolute;right:-.06em;bottom:-.30em;z-index:0;pointer-events:none;
  font-family:var(--f-mark);font-weight:400;line-height:.8;
  font-size:clamp(18rem,34vw,34rem);
  color:var(--kiln);opacity:.055;user-select:none;
}
.foot-inner{position:relative;z-index:1;max-width:calc(var(--maxw) + 2*var(--pad));margin-inline:auto}

.foot-top{
  display:grid;grid-template-columns:minmax(0,26rem) 1fr;
  gap:clamp(2.5rem,6vw,6rem);margin-bottom:clamp(3rem,6vw,5rem);
}
@media(max-width:1000px){.foot-top{grid-template-columns:1fr}}

.foot-news h2{
  font-family:var(--f-head);font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2;letter-spacing:-.01em;
  color:var(--kiln);margin-bottom:.9rem;text-wrap:balance;
}
.foot-news p{font-size:.9rem;line-height:1.65;color:rgba(43,33,26,.62);max-width:38ch;margin-bottom:1.75rem}
.foot-form{display:flex;align-items:center;gap:1rem;border-bottom:1px solid rgba(108,35,12,.3);max-width:26rem}
.foot-form input{
  flex:1;border:0;background:none;outline:none;color:var(--umber);
  font-family:var(--f-body);font-weight:300;font-size:.95rem;padding:.7rem 0;
}
.foot-form input::placeholder{color:var(--umber);opacity:.35}
.foot-form input:focus{outline:none}
.foot-form button{
  background:none;border:0;cursor:pointer;color:var(--ochre);padding:.5rem;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),color .3s;
}
.foot-form button:hover{transform:translateX(4px);color:var(--kiln)}
.foot-form button svg{width:1rem;height:.5rem}
.foot-msg{font-size:.8125rem;line-height:1.5;margin-top:.9rem;display:none}
.foot-msg.show{display:block}
.foot-msg.ok{color:var(--ochre)}
.foot-msg.err{color:var(--kiln)}

.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
@media(max-width:820px){.foot-cols{grid-template-columns:repeat(2,1fr);gap:2.25rem}}
.foot-col h3{
  font-family:var(--f-body);font-weight:400;font-size:.5625rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ochre);margin-bottom:1.25rem;
}
.foot-col a,.foot-col span{
  display:block;font-size:.875rem;line-height:1.5;padding-block:.4rem;
  color:var(--umber);opacity:.78;transition:opacity .3s,color .3s,padding-left .3s;
}
.foot-col a:hover{opacity:1;color:var(--kiln);padding-left:.3rem}

.foot-contact{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);
  padding-block:clamp(2rem,4vw,3rem);
  border-top:1px solid rgba(108,35,12,.14);
  border-bottom:1px solid rgba(108,35,12,.14);
  margin-bottom:2rem;
}
.foot-contact div{display:flex;flex-direction:column;gap:.45rem}
.foot-contact dt,.foot-contact .lbl{
  font-size:.5625rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ochre);
}
.foot-contact a,.foot-contact address{
  font-style:normal;font-size:.9rem;line-height:1.5;color:var(--umber);opacity:.82;
  transition:opacity .3s,color .3s;
}
.foot-contact a:hover{opacity:1;color:var(--kiln)}

.foot-social{display:flex;gap:.75rem;align-items:center}
.foot-social a{
  width:2.4rem;height:2.4rem;display:grid;place-items:center;
  border:1px solid rgba(108,35,12,.25);color:var(--kiln);
  transition:background .35s,color .35s,border-color .35s;
}
.foot-social a:hover{background:var(--ochre);border-color:var(--ochre);color:var(--linen-light)}
.foot-social svg{width:1rem;height:1rem}

.foot-legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;
  font-size:.6875rem;letter-spacing:.1em;color:rgba(43,33,26,.55);
}
.foot-legal a{color:inherit;transition:color .3s}
.foot-legal a:hover{color:var(--kiln)}
.foot-legal span{display:inline-flex;gap:1.25rem;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.foot-col a,.foot-form button,.foot-social a{transition:none}}



/* ---------- whole-sheet cards ----------
   After Lantern's Travera series: the card front is the whole sheet standing on
   the page with room around it, rather than a crop filling the frame, so a wall
   of forty reads calm and every photo shows at its own resolution. The surface
   close-up still fades in on hover. Stamped by build-series.py.            */
.panel__card{background:transparent}
.panel__media img.panel__slab{inset:0;margin:auto;width:auto;height:82%;box-shadow:0 0 0 1px rgba(43,33,26,.05),0 2px 4px rgba(43,33,26,.07),8px 14px 26px -10px rgba(43,33,26,.34)}
.panel__shot{display:none}
.series__inner{max-width:calc(100rem + 2*var(--pad))}   /* theirs stops at 1600px of grid too */
.qv__stage.is-slab{background:#FFFFFF}
.qv__stage img.is-slab{inset:0;margin:auto;width:auto;height:84%;box-shadow:0 0 0 1px rgba(43,33,26,.05),0 2px 4px rgba(43,33,26,.07),8px 14px 26px -10px rgba(43,33,26,.34)}
.qv__thumbs img.is-slab{box-sizing:border-box;object-fit:contain;padding:12% 26%;background:#FFFFFF}
.qv__specs > div[hidden]{display:none}
/* no hover on touch or a narrow screen, so the quick view button stays up there:
   the sheet steps up and stands clear of it */
@media(hover:none),(max-width:749px){
  .panel__media img.panel__slab{top:5%;bottom:auto;margin:0 auto;height:70%}
  .panel__qv{bottom:.75rem}
}


/* ---------- larger header and dropdown type (asked for 24 Sep 2026) ---------- */
.nav-link,.nav-contact{font-size:.8125rem;letter-spacing:.26em}
.mega-group > a{font-size:clamp(1.15rem,1.6vw,1.4rem)}
.mega-sub a{font-size:.9375rem}
.mega-sub .all{font-size:.6875rem}
.mega-feature .label{font-size:.625rem}
.mega-feature b{font-size:1.125rem}
.mega-feature span{font-size:.8125rem}


/* ---------- Best Sellers heading, eyebrow and tabs, a size up ---------- */
.best__eyebrow{font-size:.8125rem}
.best__title{font-size:3.75rem;line-height:4.25rem}
.best__tab{font-size:.8125rem}
@media(max-width:991px){.best__title{font-size:3.125rem;line-height:3.5rem}}
@media(max-width:767px){.best__title{font-size:2.5rem;line-height:2.85rem}.best__tab{font-size:.75rem}}


/* ---------- Explore our collection and Best Sellers share one frame ----------
   Both sections now keep the same left and right edges (the range cards no
   longer run off the right side of the screen), and the gap between them is
   one even step instead of two stacked paddings. */
.ranges{padding-bottom:0}
.ranges-inner{padding-right:var(--pad)}
.rail,.rail-controls{padding-right:0}
.best{padding-top:clamp(3.5rem,6vw,5.5rem)}
.best__inner{max-width:var(--maxw)}


/* ---------- social accounts not live yet ----------
   The @kojoliving handle is held by someone else for now, so nothing on the
   site links out to a social account: the icons and the handle stay, quietly,
   and go nowhere. */
.foot-social .is-soon{width:2.4rem;height:2.4rem;display:grid;place-items:center;
  border:1px solid rgba(108,35,12,.25);color:var(--kiln);opacity:.5;cursor:default}
.insta__handle.is-soon{cursor:default}
.insta__handle.is-soon:hover{color:var(--kiln);border-color:rgba(108,35,12,.35)}
.btn.is-soon{cursor:default;pointer-events:none;opacity:.6}


/* ---------- phone and tablet header ----------
   Below 1000px the menu button takes the left corner, the wordmark sits in the
   middle and search stays on the right, the way Lantern and most stone
   houses set a small screen. The button opens a full-screen menu with every
   top-level item: Products (opens to the series), Resources, About us and
   Contact, so nothing on the desktop bar is out of reach on a phone. */
@media(max-width:1000px){
  #hdr{grid-template-columns:1fr auto 1fr;gap:1rem}
  .nav-end{display:contents}
  .burger{grid-column:1;grid-row:1;justify-self:start;margin-left:-.5rem;color:inherit;min-width:2.75rem;min-height:2.75rem;align-items:flex-start;justify-content:center}
  .brand{grid-column:2;grid-row:1;justify-self:center}
  #searchOpen{grid-column:3;grid-row:1;justify-self:end;margin-right:-.5rem;min-width:2.75rem;min-height:2.75rem;display:grid;place-items:center}
}
.mnav{
  position:fixed;inset:0;z-index:115;overflow-y:auto;overscroll-behavior:contain;
  background:var(--linen-sand);color:var(--kiln);
  padding:calc(var(--hdr-h,4.5rem) + 1.25rem) var(--pad) 2.5rem;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateX(-14px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.3,1),visibility 0s linear .4s;
}
.mnav.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media(min-width:1001px){.mnav{display:none}}
.mnav__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(108,35,12,.16)}
.mnav__item{border-bottom:1px solid rgba(108,35,12,.16)}
.mnav__top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:1.2rem 0;background:none;border:0;cursor:pointer;color:var(--kiln);text-align:left;
  font-family:var(--f-body);font-weight:400;font-size:.9375rem;letter-spacing:.24em;text-transform:uppercase;
}
.mnav__top svg{width:.75rem;height:.75rem;flex:0 0 auto;opacity:.7;transition:transform .35s ease}
.mnav__top[aria-expanded="true"] svg{transform:rotate(180deg)}
.mnav__top.is-soon{cursor:default;color:rgba(108,35,12,.5)}
.mnav__top em{font-style:normal;font-size:.625rem;letter-spacing:.26em;color:var(--ochre)}
.mnav__sub{list-style:none;margin:0;padding:0 0 1.25rem}
.mnav__sub a{display:block;padding:.6rem 0;font-family:var(--f-head);font-weight:500;font-size:1.25rem;line-height:1.3;color:var(--kiln)}
.mnav__sub .mnav__child a{padding-left:1.1rem;font-size:1.0625rem;color:rgba(108,35,12,.78)}
.mnav__sub a[aria-current="page"]{color:var(--ochre)}
.mnav__contact{display:flex;justify-content:center;margin-top:2.25rem}
.mnav__reach{display:flex;flex-direction:column;gap:.6rem;margin-top:1.75rem;font-size:.875rem;color:rgba(43,33,26,.72)}
.mnav__reach a{color:inherit}
@media(prefers-reduced-motion:reduce){.mnav{transition:none}}


/* ---------- comfortable on a phone ----------
   Print under 11px is hard to read on a phone, and a link shorter than 24px is
   hard to hit with a thumb. Below 768px the smallest labels step up to 11px,
   and short links get a taller invisible hit area, so nothing moves. */
@media(max-width:767px){
  .crumb,.crumb a,.crumb span,.label,.feat__label,.foot-col h3,.foot-contact .lbl,
  .rc-soon,.insta__soon,.panel__qv,.series__count,.series__back,
  .ct__label,.ct__form label,.ct__form label b,.ct__submit,.ct__link,
  .soon__label,.soon__sub,.soon__btn,
  .qv__series,.qv__specs dt,.qv__acts .btn{font-size:.6875rem!important}
  .crumb a,.series__back,.foot-contact a,.foot-legal a,.ct__link,.ct__fine a,
  .ct__cols a,.ct__people a,.soon__link{position:relative}
  .crumb a::before,.series__back::before,.foot-contact a::before,.foot-legal a::before,
  .ct__link::before,.ct__fine a::before,.ct__cols a::before,.ct__people a::before,
  .soon__link::before{content:"";position:absolute;inset:-.5rem -.25rem}
}
/* the hero's slide markers: the same 2px hairlines, on a thumb-sized button */
.hero .hero-seg,.hero[data-tone="light"] .hero-seg{height:24px;background:transparent;overflow:visible}
.hero-seg::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;
  background:rgba(239,225,212,.30);transition:background 1.2s ease}
.hero[data-tone="light"] .hero-seg::before{background:rgba(108,35,12,.22)}
.hero-seg i{inset:11px 0}
.scrollcue::before{content:"";position:absolute;inset:0 -12px}   /* the 1px scroll line, a 25px target */