/* ==========================================================================
   Berthyne — theme stylesheet
   Single file, no framework, no webfonts. Section order matches the approved
   homepage prototype; inner-page rules follow, then WordPress additions.
   ========================================================================== */
/* ============================================================
   BERTHYNE CONCEPTS — Homepage, direction E
   "Proof."

   THE IDEA
   Every Indonesian furniture site shows finished renders. Almost
   none show the floor. Berthyne can — so the factory photography
   becomes the argument, not the decoration. That is the one thing
   a marketplace listing can never reproduce.

   PHOTOGRAPHY
   Real photographs from the Sukoharjo and Tulungagung floors,
   colour-graded to a single warm register (saturation pulled back,
   contrast lifted, whole set warmed toward teak) so nine phone
   snapshots taken on different days read as one commissioned set.
   Inlined here so the file is self-contained for presentation.
   In production these become separate lazy-loaded .webp files.

   TYPE
   System stacks — no webfont request, no layout shift. The modern
   register comes from tight tracking and scale, not from a
   downloaded face.
   ============================================================ */

:root{
  --paper:      #EDE9E0;
  --paper-2:    #E2DCCE;
  --ink:        #131211;
  --ink-2:      #4A443B;
  --ash:        #8A8376;
  --line:       #D5CCB8;
  --bronze:     #9A7A47;
  --bronze-lt:  #CBAB74;
  --walnut:     #1E1913;
  --line-dk:    #3B3226;

  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1360px;

  --f-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Iowan Old Style", "Palatino Linotype", Palatino,
             Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.2,.7,.3,1);
}

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

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-ui);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.lock{overflow:hidden}
figure{margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}

img{display:block;max-width:100%}

/* ---------- Type ---------- */

.t{
  font-weight:600;
  letter-spacing:-.032em;      /* tight tracking = the modern register */
  line-height:1.04;
  margin:0;
}
.t em{
  font-family:var(--f-serif);
  font-style:italic;font-weight:400;
  letter-spacing:-.01em;
  color:var(--bronze);
}
.t-xl{font-size:clamp(3rem,7vw,5.9rem)}
.t-lg{font-size:clamp(2.15rem,4.3vw,3.55rem)}
.t-sm{font-size:clamp(1.15rem,1.65vw,1.4rem);letter-spacing:-.018em;line-height:1.25}

.kicker{
  font-size:.75rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);margin:0;
}
.kicker--mute{color:var(--ash)}
.lede{font-size:clamp(1.1rem,1.2vw,1.2rem);color:var(--ink-2);max-width:50ch;margin:0}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(70px,9.5vw,132px)}
.hr{height:1px;background:var(--line);border:0;margin:0}
.defer{content-visibility:auto;contain-intrinsic-size:auto 900px}

.head{max-width:60ch}
.head > * + *{margin-top:1.1rem}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;align-items:center;gap:.7em;
  padding:1em 1.75em;
  font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--ink);
  transition:background .32s var(--ease),color .32s var(--ease),border-color .32s var(--ease);
}
.btn--fill{background:var(--ink);color:var(--paper)}
.btn--fill:hover{background:var(--bronze);border-color:var(--bronze)}
.btn--line:hover{background:var(--ink);color:var(--paper)}
.btn--lt{border-color:rgba(237,233,224,.38);color:var(--paper)}
.btn--lt:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.arw{transition:transform .32s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}

.tl{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bronze);padding-bottom:.38em;position:relative;
}
.tl::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.tl:hover::after{transform:scaleX(1)}

/* ---------- Media ---------- */

.ph{position:relative;overflow:hidden;background:var(--paper-2)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph--16x10{aspect-ratio:16/10}
.ph--4x5{aspect-ratio:4/5}
.ph--1x1{aspect-ratio:1/1}
.ph--4x3{aspect-ratio:4/3}
.ph--3x4{aspect-ratio:3/4}
.cap{
  display:flex;justify-content:space-between;gap:1rem;
  margin-top:.8rem;padding-top:.75rem;border-top:1px solid var(--line);
  font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
}

/* Placeholder for imagery the client still owes — finished interiors */
.plate{
  position:relative;overflow:hidden;
  background-image:var(--img, linear-gradient(160deg,#CBB99C 0%,#8E7A5A 52%,#4C4032 100%));
  background-size:cover;background-position:center;
}
.plate::after{
  content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:fixed;inset:0 0 auto;z-index:80;
  padding-block:clamp(14px,1.9vw,22px);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
.nav.stuck{
  background:rgba(237,233,224,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);padding-block:11px;
}
.nav__in{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.wm{display:block;line-height:1}
.wm b{
  display:block;font-family:var(--f-serif);font-weight:700;font-size:1.18rem;
  letter-spacing:.16em;text-indent:.16em;
}
.wm i{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  margin-top:.5em;font-style:normal;
  font-family:var(--f-serif);font-weight:400;font-size:.5rem;
  letter-spacing:.38em;text-indent:.38em;color:var(--bronze);
}
.wm i::before,.wm i::after{content:"";height:1px;width:15px;background:currentColor;flex:0 0 auto}

.nav__ln{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.nav__ln a{
  font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);padding-block:.4em;position:relative;
}
.nav__ln a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bronze);
  transform:scaleX(0);transform-origin:left;transition:transform .36s var(--ease);
}
.nav__ln a:hover{color:var(--ink)}
.nav__ln a:hover::after{transform:scaleX(1)}
.nav__cta{
  padding:.8em 1.3em;border:1px solid var(--ink);
  font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.nav__cta:hover{background:var(--ink);color:var(--paper)}

.bg{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-right:-10px}
.bg span{display:block;width:23px;height:1px;background:var(--ink);position:relative;transition:background .2s}
.bg span::before,.bg span::after{
  content:"";position:absolute;left:0;width:23px;height:1px;background:var(--ink);
  transition:transform .34s var(--ease);
}
.bg span::before{top:-6px}
.bg span::after{top:6px}
body.lock .bg span{background:transparent}
body.lock .bg span::before{transform:translateY(6px) rotate(45deg)}
body.lock .bg span::after{transform:translateY(-6px) rotate(-45deg)}

.dw{
  position:fixed;inset:0;z-index:70;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:96px var(--gutter) var(--gutter);
  transform:translateY(-100%);visibility:hidden;transition:transform .54s var(--ease);
}
.dw.open{transform:translateY(0);visibility:visible}
.dw a{
  font-weight:600;letter-spacing:-.028em;font-size:clamp(1.85rem,8vw,2.4rem);
  padding-block:.32em;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.dw a span{font-size:.625rem;font-weight:600;letter-spacing:.2em;color:var(--ash)}
.dw__ft{margin-top:auto;padding-top:2.2rem}
.dw__ft .btn{width:100%;justify-content:center}

@media (max-width:1060px){ .nav__ln,.nav__cta{display:none} .bg{display:flex} }
@media (min-width:1061px){ .dw{display:none} }

/* ============================================================
   HERO
   ============================================================ */

.hero{padding-top:clamp(112px,13.5vh,164px)}
.hero__copy{max-width:20ch}
.hero__copy .lede{max-width:52ch;margin-top:clamp(16px,2vw,24px)}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.8vw,32px)}
.hero__ph{margin-top:clamp(34px,4.6vw,60px)}

.facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2.2vw,32px);
  margin-top:clamp(26px,3vw,38px);
  padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--line);
}
.facts dt{font-size:.5625rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin-bottom:.75em}
.facts dd{margin:0;font-size:.875rem;color:var(--ink-2);line-height:1.5}
@media (max-width:720px){ .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} }

/* ============================================================
   ROSTER
   ============================================================ */

.roster{padding-block:clamp(38px,4.6vw,62px);text-align:center}

/* Auto-scrolling logo marquee. The track holds two identical copies of the
   set, so translating it by exactly -50% loops seamlessly. Same behaviour on
   mobile and desktop; hover or focus pauses it. */
.mq{
  margin-top:1.5rem;overflow:hidden;position:relative;
  /* an explicit background so multiply on the logos has something to blend
     against — the mask below creates a stacking context that would otherwise
     isolate the blend and leave white plates showing */
  background:var(--paper);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.mq__track{
  display:flex;align-items:center;width:max-content;
  animation:mq-scroll 34s linear infinite;
}
.mq:hover .mq__track,.mq:focus-within .mq__track{animation-play-state:paused}
@keyframes mq-scroll{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }

/* Spacing lives on the items, not as a flex gap. With a gap, the track's
   total width is 12 items + 11 gaps, so translating -50% lands half a gap
   off and the loop visibly jumps. Padding makes every unit identical, so
   -50% is exactly six units. */
.mq__item{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding-inline:clamp(22px,3.4vw,48px);
}
.mq__item img{
  width:auto;height:clamp(48px,7vw,76px);
  /* multiply drops the logos' white plate onto the ground; the marks keep
     their own colour, so no grayscale filter */
  mix-blend-mode:multiply;
  opacity:.95;
  transition:opacity .38s var(--ease),transform .38s var(--ease);
}
.mq__item img:hover{opacity:1;transform:scale(1.06)}

@media (prefers-reduced-motion:reduce){
  .mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .mq__track{animation:none}
}

/* ============================================================
   ABOUT
   ============================================================ */

.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(30px,5vw,84px);align-items:center}
.about__copy > * + *{margin-top:clamp(16px,2.1vw,26px)}
@media (max-width:940px){ .about{grid-template-columns:1fr} }

/* ---------- Eight-step process, per the brief's flow diagram ---------- */

.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(34px,4.2vw,58px);
}
.step{background:var(--paper);padding:clamp(20px,2.4vw,30px) clamp(16px,1.9vw,24px) clamp(26px,2.9vw,36px);transition:background .36s var(--ease)}
.step:hover{background:var(--paper-2)}
.step__n{display:block;font-family:var(--f-serif);font-size:1.35rem;color:var(--bronze);line-height:1;margin-bottom:1.4rem}
.step h3{font-weight:600;font-size:.975rem;letter-spacing:-.018em;margin:0 0 .55em}
.step p{font-size:.875rem;color:var(--ink-2);line-height:1.55}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* ============================================================
   WHAT WE DO — 5 categories from the brief
   ============================================================ */

.rows{border-top:1px solid var(--line);margin-top:clamp(34px,4.2vw,58px)}
.row{
  display:grid;grid-template-columns:48px minmax(0,.78fr) minmax(0,1.18fr) auto;
  gap:clamp(12px,2.4vw,38px);align-items:baseline;
  padding:clamp(19px,2.4vw,30px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .48s var(--ease);
}
.row:hover{padding-left:14px}
.row__n{font-family:var(--f-serif);font-size:.8125rem;color:var(--bronze)}
.row__t{font-weight:600;font-size:clamp(1.25rem,2vw,1.62rem);letter-spacing:-.026em;line-height:1.18;margin:0}
.row__x{font-size:1rem;color:var(--ink-2)}
.row .tl{opacity:.5;transition:opacity .4s var(--ease)}
.row:hover .tl{opacity:1}
@media (max-width:900px){
  .row{grid-template-columns:40px minmax(0,1fr);gap:9px 13px}
  .row__x,.row .tl{grid-column:2}
}

/* ============================================================
   WHY CHOOSE US — new section from the updated brief
   ============================================================ */

.why{
  position:relative;color:var(--paper);
  background-color:var(--walnut);
  background-image:
    linear-gradient(180deg, rgba(26,21,15,.90) 0%, rgba(26,21,15,.94) 100%),
    url("https://berthyneconcepts.com/wp-content/uploads/2021/10/Slide-2-Bertyhne-Concepts-Indonesia.jpg");
  background-size:cover;
  background-position:center;
}
.why .kicker{color:var(--bronze-lt)}
.why .lede{color:rgba(237,233,224,.7)}
.why .t em{color:var(--bronze-lt)}
.why__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:rgba(237,233,224,.16);border:1px solid rgba(237,233,224,.16);
  margin-top:clamp(34px,4.2vw,58px);
}
.why__cell{
  background:rgba(18,14,10,.46);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding:clamp(22px,2.6vw,34px);
  transition:background .38s var(--ease);
}
.why__cell:hover{background:rgba(18,14,10,.72)}
.why__cell dt{font-weight:600;font-size:clamp(1.12rem,1.62vw,1.32rem);letter-spacing:-.024em;margin-bottom:.6em}
.why__cell dd{margin:0;font-size:.975rem;color:rgba(237,233,224,.72)}
.why__n{display:block;font-family:var(--f-serif);font-size:.75rem;color:var(--bronze-lt);margin-bottom:1.5rem}
@media (max-width:900px){ .why__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .why__grid{grid-template-columns:1fr} }

/* ============================================================
   PROCESS RAIL — the signature. Eight real stages, eight real
   photographs, scrolled horizontally like a floor walk-through.
   ============================================================ */

.rail{background:var(--walnut);color:var(--paper)}
.rail .kicker{color:var(--bronze-lt)}
.rail .lede{color:rgba(237,233,224,.68)}
.rail .t em{color:var(--bronze-lt)}
.rail__scroll{
  display:flex;gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(34px,4.2vw,56px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:1.4rem;
  scrollbar-width:thin;scrollbar-color:var(--line-dk) transparent;
}
.rail__scroll::-webkit-scrollbar{height:2px}
.rail__scroll::-webkit-scrollbar-track{background:var(--line-dk)}
.rail__scroll::-webkit-scrollbar-thumb{background:var(--bronze)}
.stage{
  flex:0 0 clamp(232px,26vw,304px);
  scroll-snap-align:start;
}
.stage__n{
  display:flex;align-items:center;gap:.7em;
  font-family:var(--f-serif);font-size:.8125rem;color:var(--bronze-lt);
  margin-bottom:.9rem;
}
.stage__n::after{content:"";height:1px;flex:1;background:var(--line-dk)}
.stage h3{font-weight:600;font-size:1.03rem;letter-spacing:-.02em;margin:.9rem 0 .45rem}
.stage p{font-size:.875rem;color:rgba(237,233,224,.6);line-height:1.55}
.stage .ph{background:#2A231A}
.rail__hint{
  margin-top:.4rem;font-size:.625rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(237,233,224,.38);
}

/* ============================================================
   PROJECTS
   ============================================================ */

/* ---------- Shared horizontal slider ---------- */

.slider{
  display:flex;gap:clamp(14px,1.9vw,26px);
  margin-top:clamp(38px,4.6vw,64px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:1.3rem;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.slider::-webkit-scrollbar{height:2px}
.slider::-webkit-scrollbar-track{background:var(--line)}
.slider::-webkit-scrollbar-thumb{background:var(--bronze)}
.hint{
  margin-top:.3rem;font-size:.625rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ash);
}

/* ---------- Projects ---------- */

.work{flex:0 0 clamp(248px,29vw,336px);scroll-snap-align:start}
.work__f{overflow:hidden}
.work .ph img{transition:transform 1.1s var(--ease)}
.work:hover .ph img{transform:scale(1.04)}
.work h3{font-weight:600;font-size:clamp(1.1rem,1.5vw,1.3rem);letter-spacing:-.024em;margin:1.2rem 0 .7rem}
.work__m{font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);line-height:1.9}

/* ---------- Products ---------- */

.products{background:var(--paper-2)}
.prod{flex:0 0 clamp(226px,25vw,296px);scroll-snap-align:start;display:flex;flex-direction:column}
.prod__f{overflow:hidden}
.prod .ph img{transition:transform 1.1s var(--ease)}
.prod:hover .ph img{transform:scale(1.045)}
.prod h3{font-weight:600;font-size:1.08rem;letter-spacing:-.022em;margin:1.1rem 0 1rem}
.prod .btn{padding:.82em 1.3em;font-size:.6875rem;align-self:flex-start;margin-top:auto}

/* ---------- Export CTA band ---------- */

.cta{
  position:relative;color:var(--paper);
  background-color:var(--walnut);
  background-image:
    linear-gradient(180deg, rgba(26,21,15,.86) 0%, rgba(26,21,15,.92) 100%),
    url("https://berthyneconcepts.com/wp-content/uploads/2021/11/bg-ffe-berthyne-concepts-indonesia-scaled.jpg");
  background-size:cover;background-position:center;
  text-align:center;
}
.cta .kicker{color:var(--bronze-lt)}
.cta .t em{color:var(--bronze-lt)}
.cta__in{max-width:56ch;margin-inline:auto}
.cta__in > * + *{margin-top:clamp(15px,2vw,24px)}
.cta .lede{color:rgba(237,233,224,.72);margin-inline:auto}
.cta__acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(24px,3vw,34px)}
.cta__list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;
  margin:clamp(28px,3.4vw,42px) 0 0;padding:clamp(22px,2.6vw,30px) 0 0;
  border-top:1px solid var(--line-dk);
}
.cta__list li{
  list-style:none;font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(237,233,224,.6);
}

/* ---------- Floating WhatsApp ---------- */

.wa{
  position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);
  z-index:60;
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;
  box-shadow:0 6px 22px rgba(20,16,10,.26);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wa:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 30px rgba(20,16,10,.34)}
.wa svg{width:27px;height:27px;fill:currentColor}
body.lock .wa{display:none}

/* ============================================================
   EXPORT
   ============================================================ */

/* ============================================================
   BLOG
   ============================================================ */

/* ============================================================
   JOURNAL — the ten articles already written
   ============================================================ */

.blg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(34px,4.2vw,58px)}
.blg a{background:var(--paper);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:.9rem;transition:background .36s var(--ease)}
.blg a:hover{background:var(--paper-2)}
.blg span{font-family:var(--f-serif);font-size:.75rem;color:var(--bronze)}
.blg h3{font-weight:600;font-size:1.08rem;letter-spacing:-.022em;line-height:1.3;margin:0}
.blg p{font-size:.8125rem;color:var(--ink-2);margin-top:auto}
@media (max-width:900px){ .blg{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .blg{grid-template-columns:1fr} }

/* ============================================================
   QUOTE
   ============================================================ */

.dark{background:var(--walnut);color:var(--paper)}
.dark .kicker{color:var(--bronze-lt)}
.dark .lede{color:rgba(237,233,224,.68)}
.dark .t em{color:var(--bronze-lt)}
.q__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(34px,5.5vw,88px)}
.q__copy > * + *{margin-top:clamp(16px,2.1vw,25px)}
.reach{margin-top:2.4rem;border-top:1px solid var(--line-dk)}
.reach > div{padding:1rem 0;border-bottom:1px solid var(--line-dk)}
.reach dt{font-size:.5625rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin-bottom:.45em}
.reach dd{margin:0;font-size:1rem;color:var(--paper)}
.reach a:hover{color:var(--bronze-lt)}

.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.3vw,26px)}
.fld{display:flex;flex-direction:column}
.fld--f{grid-column:1/-1}
.fld label{font-size:.5625rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin-bottom:.85em}
.fld input,.fld select,.fld textarea{
  font:inherit;font-size:.9375rem;background:transparent;color:var(--paper);
  border:0;border-bottom:1px solid var(--line-dk);padding:.55em 0;border-radius:0;width:100%;
  transition:border-color .3s var(--ease);
}
.fld select{appearance:none;-webkit-appearance:none;cursor:pointer}
.fld select option{background:var(--walnut);color:var(--paper)}
.fld textarea{resize:vertical;min-height:96px;line-height:1.6}
.fld :is(input,select,textarea):focus{outline:none;border-bottom-color:var(--bronze-lt)}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(237,233,224,.26)}

.drop{border:1px dashed var(--line-dk);padding:1.1rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;transition:border-color .3s var(--ease)}
.drop:hover{border-color:var(--bronze)}
.drop span{font-size:.8125rem;color:rgba(237,233,224,.55)}
.drop b{font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze-lt);cursor:pointer}
.drop input{display:none}
.form__ft{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between}
.form__nt{font-size:.75rem;color:rgba(237,233,224,.44);max-width:36ch}
@media (max-width:980px){ .q__grid{grid-template-columns:1fr} }
@media (max-width:560px){ .form{grid-template-columns:1fr} }

/* ============================================================
   FOOTER
   ============================================================ */

.ft{background:var(--walnut);color:var(--paper);border-top:1px solid var(--line-dk)}
.ft__top{text-align:center;padding-block:clamp(42px,5vw,70px);border-bottom:1px solid var(--line-dk)}
.ft .wm b{color:var(--paper);font-size:clamp(1.3rem,2.4vw,1.7rem)}
.ft .wm i{color:var(--bronze-lt);font-size:.5625rem}
.ft__tag{margin-top:1.35rem;font-size:.875rem;color:rgba(237,233,224,.54);max-width:44ch;margin-inline:auto}
.ft__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3.6vw,48px);padding-block:clamp(40px,5vw,66px)}
.ft h4{font-size:.5625rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin:0 0 1.3rem}
.ft ul{margin:0;padding:0}
.ft li{list-style:none;margin-bottom:.74rem}
.ft a,.ft address{font-size:.875rem;color:rgba(237,233,224,.72);font-style:normal;line-height:1.6;transition:color .28s var(--ease)}
.ft a:hover{color:var(--bronze-lt)}
.ft__base{border-top:1px solid var(--line-dk);padding-block:1.6rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.625rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:rgba(237,233,224,.36)}
@media (max-width:900px){ .ft__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .ft__grid{grid-template-columns:1fr;gap:28px} }

/* ============================================================
   MOTION
   ============================================================ */

.up{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.up.in{opacity:1;transform:none}
.up[data-d="1"]{transition-delay:.09s}
.up[data-d="2"]{transition-delay:.18s}
.up[data-d="3"]{transition-delay:.27s}

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

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
/* ---------- Shared inner-page furniture ---------- */

.phero{padding-top:clamp(112px,13.5vh,164px);padding-bottom:clamp(30px,4vw,52px)}
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55em;
  font-size:.625rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash);margin:0 0 clamp(18px,2.4vw,28px);
}
.crumb a:hover{color:var(--bronze)}
.crumb span{opacity:.5}
.phero__copy > * + *{margin-top:clamp(15px,2vw,24px)}
.phero .lede{max-width:56ch}

.prose{max-width:68ch}
.prose > * + *{margin-top:1.35em}
.prose p{font-size:1.05rem;color:var(--ink-2);line-height:1.78}
.prose h2{
  font-weight:600;font-size:clamp(1.35rem,2.2vw,1.75rem);
  letter-spacing:-.028em;line-height:1.2;color:var(--ink);
  margin-top:2.4em;
}
.prose h3{font-weight:600;font-size:1.08rem;letter-spacing:-.022em;color:var(--ink);margin-top:2em}
.prose ul{margin:0;padding:0;border-top:1px solid var(--line)}
.prose li{
  list-style:none;display:flex;align-items:baseline;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid var(--line);
  font-size:.9875rem;color:var(--ink-2);
}
.prose li::before{
  content:"";flex:0 0 auto;width:14px;height:1px;background:var(--bronze);
  transform:translateY(-.35em);
}
.prose blockquote{
  margin:2em 0;padding:1.4rem 0 1.4rem 1.6rem;
  border-left:2px solid var(--bronze);
  font-family:var(--f-serif);font-style:italic;font-size:1.14rem;
  line-height:1.6;color:var(--ink);
}
.prose figure{margin:2.2em 0}
.prose figcaption{
  margin-top:.8rem;padding-top:.75rem;border-top:1px solid var(--line);
  font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
}

/* Two-column article shell with a sticky rail */
.art{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(30px,5vw,80px);align-items:start}
.rail-side{position:sticky;top:110px}
.rail-side h4{font-size:.5625rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin:0 0 1.1rem}
.toc{margin:0 0 2.4rem;padding:0;border-top:1px solid var(--line)}
.toc li{list-style:none;border-bottom:1px solid var(--line)}
.toc a{display:block;padding:.7rem 0;font-size:.8125rem;color:var(--ink-2);transition:color .3s var(--ease),padding-left .4s var(--ease)}
.toc a:hover{color:var(--bronze);padding-left:6px}
.meta{margin:0 0 2.2rem;padding:0;border-top:1px solid var(--line)}
.meta div{padding:.75rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem}
.meta dt{font-size:.625rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--ash)}
.meta dd{margin:0;font-size:.8125rem;color:var(--ink-2);text-align:right}
@media (max-width:940px){
  .art{grid-template-columns:1fr}
  .rail-side{position:static}
  .toc{display:none}
}

/* ---------- Export page ---------- */

.inco{border-top:1px solid var(--line);margin-top:clamp(34px,4.2vw,58px)}
.inco > div{
  display:grid;grid-template-columns:52px 150px minmax(0,1fr);
  gap:clamp(12px,2.4vw,32px);align-items:baseline;
  padding:clamp(18px,2.3vw,28px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .48s var(--ease);
}
.inco > div:hover{padding-left:14px}
.inco b{font-family:var(--f-serif);font-weight:400;font-size:.8125rem;color:var(--bronze)}
.inco dt{font-weight:600;font-size:1.05rem;letter-spacing:-.024em}
.inco dd{margin:0;font-size:.9375rem;color:var(--ink-2)}
@media (max-width:660px){
  .inco > div{grid-template-columns:42px minmax(0,1fr)}
  .inco dd{grid-column:2}
}

.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(34px,4.2vw,58px)}
.svc__c{background:var(--paper);padding:clamp(20px,2.4vw,30px);transition:background .36s var(--ease)}
.svc__c:hover{background:var(--paper-2)}
.svc__c span{display:block;font-family:var(--f-serif);font-size:.75rem;color:var(--bronze);margin-bottom:1.3rem}
.svc__c h3{font-weight:600;font-size:1rem;letter-spacing:-.022em;margin:0 0 .55em}
.svc__c p{font-size:.875rem;color:var(--ink-2)}
@media (max-width:900px){ .svc{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .svc{grid-template-columns:1fr} }

.dest{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.2vw,32px);margin-top:clamp(34px,4.2vw,58px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line)}
.dest dt{font-size:.5625rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin-bottom:.75em}
.dest dd{margin:0;font-size:.8125rem;color:var(--ink-2);line-height:1.55}
@media (max-width:720px){ .dest{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} }

/* ---------- Product page ---------- */

.pd{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.6vw,72px);align-items:start}
.pd__main{position:relative}
.pd__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.1vw,14px);margin-top:clamp(10px,1.2vw,16px)}
.pd__thumbs button{padding:0;border:1px solid transparent;transition:border-color .3s var(--ease),opacity .3s var(--ease);opacity:.62;display:block;width:100%}
.pd__thumbs button:hover{opacity:1}
.pd__thumbs button[aria-current="true"]{border-color:var(--bronze);opacity:1}
.pd__info > * + *{margin-top:clamp(15px,2vw,22px)}
.pd__spec{margin:clamp(22px,2.8vw,32px) 0 0;border-top:1px solid var(--line)}
.pd__spec > div{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);
}
.pd__spec dt{font-size:.625rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--ash)}
.pd__spec dd{margin:0;font-size:.9375rem;color:var(--ink)}
.pd__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.8vw,32px)}
.pd__note{font-size:.8125rem;color:var(--ash);margin-top:1.1rem}
@media (max-width:940px){ .pd{grid-template-columns:1fr} }

.rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.2vw,32px);margin-top:clamp(34px,4.2vw,58px)}
.rel a h3{font-weight:600;font-size:.9375rem;letter-spacing:-.02em;margin:.95rem 0 .3rem}
.rel a p{font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.rel .ph img{transition:transform 1.1s var(--ease)}
.rel a:hover .ph img{transform:scale(1.045)}
@media (max-width:820px){ .rel{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- Blog page ---------- */

.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(34px,4.2vw,58px)}
.more a{background:var(--paper);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:.9rem;transition:background .36s var(--ease)}
.more a:hover{background:var(--paper-2)}
.more span{font-family:var(--f-serif);font-size:.75rem;color:var(--bronze)}
.more h3{font-weight:600;font-size:1rem;letter-spacing:-.022em;line-height:1.3;margin:0}
.more p{font-size:.8125rem;color:var(--ink-2);margin-top:auto}
@media (max-width:900px){ .more{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .more{grid-template-columns:1fr} }

.share{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:clamp(30px,3.6vw,46px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line)}
.share p{font-size:.625rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ash)}
.share a{
  font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);padding:.55em .95em;border:1px solid var(--line);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.share a:hover{border-color:var(--bronze);color:var(--bronze)}

/* ==========================================================================
   WORDPRESS ADDITIONS
   Classes the templates need that the static prototype did not: grids that
   replace the sliders on archive pages, filters, pagination, form messages,
   the manufacturing list and core WP output.
   ========================================================================== */

/* Skip link */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 18px;background:var(--ink);color:var(--paper);
  font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
}
.skip:focus{left:0}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}

/* Nav menus render as plain <li> lists; strip the list chrome */
.nav__ln ul,.dw ul,.ft ul{margin:0;padding:0;list-style:none}
.nav__ln li,.dw li{margin:0}
.dw li a{width:100%}

/* --- Archive grids (the homepage uses sliders; archives use grids) --- */

.grid-prod{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,44px);margin-top:clamp(30px,3.6vw,48px);
}
.grid-prod .prod{flex:none}
@media (max-width:900px){ .grid-prod{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .grid-prod{grid-template-columns:1fr} }

.grid-work{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,42px);margin-top:clamp(30px,3.6vw,48px);
}
.grid-work .work{flex:none}
@media (max-width:900px){ .grid-work{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:580px){ .grid-work{grid-template-columns:1fr} }

/* --- Category filters --- */

.filters{
  display:flex;flex-wrap:wrap;gap:.4rem .5rem;
  padding-bottom:clamp(18px,2.2vw,26px);border-bottom:1px solid var(--line);
}
.filters a{
  padding:.55em 1em;border:1px solid var(--line);border-radius:2px;
  font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);
  transition:border-color .28s var(--ease),color .28s var(--ease),background .28s var(--ease);
}
.filters a:hover{border-color:var(--ink);color:var(--ink)}
.filters a.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* --- Pagination --- */

.pager{
  display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;
  margin-top:clamp(34px,4.2vw,56px);padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--line);
}
.pager .page-numbers{
  min-width:38px;padding:.6em .85em;text-align:center;
  border:1px solid var(--line);
  font-size:.75rem;font-weight:600;color:var(--ink-2);
  transition:border-color .28s var(--ease),color .28s var(--ease),background .28s var(--ease);
}
.pager a.page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.pager .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pager .page-numbers.dots{border-color:transparent}

/* --- Manufacturing detail list --- */

.mfg-list{border-top:1px solid var(--line);margin-top:clamp(34px,4.2vw,58px)}
.mfg-row{
  display:grid;grid-template-columns:56px minmax(0,320px) minmax(0,1fr);
  gap:clamp(16px,2.8vw,42px);align-items:start;
  padding:clamp(22px,2.8vw,36px) 0;border-bottom:1px solid var(--line);
}
.mfg-row__n{font-family:var(--f-serif);font-size:.8125rem;color:var(--bronze);padding-top:.2em}
.mfg-row__b h3{font-weight:600;font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.026em;margin:0 0 .6em}
.mfg-row__b p{font-size:.9375rem;color:var(--ink-2);max-width:56ch}
@media (max-width:820px){
  .mfg-row{grid-template-columns:44px minmax(0,1fr);gap:14px 16px}
  .mfg-row figure{grid-column:2}
  .mfg-row__b{grid-column:2}
}

/* --- Project gallery --- */

.pgal{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,26px);margin-top:clamp(34px,4.2vw,58px);
}
@media (max-width:640px){ .pgal{grid-template-columns:1fr} }

/* --- Form feedback and honeypot --- */

.form__msg{
  padding:14px 18px;margin-bottom:clamp(18px,2.2vw,26px);
  border-left:2px solid;font-size:.9375rem;
}
.form__msg.is-ok{border-color:#7FA97F;background:rgba(127,169,127,.12);color:var(--paper)}
.form__msg.is-err{border-color:#C98A6B;background:rgba(201,138,107,.14);color:var(--paper)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Search bar --- */

.searchbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.4vw,30px);max-width:560px}
.searchbar input[type=search]{
  flex:1;min-width:200px;font:inherit;font-size:.9375rem;
  padding:.85em 1em;background:transparent;color:var(--ink);
  border:1px solid var(--line);border-radius:0;
  transition:border-color .28s var(--ease);
}
.searchbar input[type=search]:focus{outline:none;border-color:var(--bronze)}

/* --- Prose: core WordPress block output --- */

.prose img,.prose iframe{max-width:100%;height:auto}
.prose a{color:var(--bronze);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose ol{margin:0;padding-left:1.3em}
.prose ol li{display:list-item;border:0;padding:.3rem 0}
.prose ol li::before{content:none}
.prose .wp-block-image{margin:2.2em 0}
.prose .wp-block-image figcaption{
  margin-top:.8rem;padding-top:.75rem;border-top:1px solid var(--line);
  font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
}
.prose table{width:100%;border-collapse:collapse;font-size:.9375rem}
.prose th,.prose td{padding:.7rem 0;border-bottom:1px solid var(--line);text-align:left}
.prose th{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.alignwide,.alignfull{max-width:100%}
.wp-caption{max-width:100%}

/* Single-image About column (the prototype used a two-photo stack) */
.about__ph{align-self:start}

/* The facts strip is its own section now that it can be reordered */
.facts-sec{padding-block:0}
.facts-sec .facts{margin-top:clamp(26px,3vw,38px)}

/* ==========================================================================
   CUSTOM SECTION BACKGROUNDS (v2)

   A section given a custom background needs its text re-coloured for the new
   ground, whatever it shipped as. Rather than let the client pick text colours
   — which is how contrast failures happen — the plugin measures the background
   luminance and adds one of two classes. These blocks re-map everything inside.
   ========================================================================== */

.has-rule{ border-top:1px solid var(--line); }

/* ---- Light text on a dark custom ground ---- */

.bc-on-dark{ color:var(--paper); }
.bc-on-dark .t,
.bc-on-dark h1,.bc-on-dark h2,.bc-on-dark h3,
.bc-on-dark .row__t,.bc-on-dark .step h3,.bc-on-dark .stage h3,
.bc-on-dark .prod h3,.bc-on-dark .work h3,.bc-on-dark .blg h3,
.bc-on-dark .why__cell dt{ color:var(--paper); }
.bc-on-dark .t em,
.bc-on-dark .kicker,
.bc-on-dark .row__n,.bc-on-dark .step__n,.bc-on-dark .stage__n,
.bc-on-dark .why__n,.bc-on-dark .tl,.bc-on-dark .terms b{ color:var(--bronze-lt); }
.bc-on-dark .lede,
.bc-on-dark .row__x,.bc-on-dark .step p,.bc-on-dark .stage p,
.bc-on-dark .facts dd,.bc-on-dark .why__cell dd,
.bc-on-dark .prose p,.bc-on-dark p{ color:rgba(237,233,224,.72); }
.bc-on-dark .work__m,.bc-on-dark .facts dt,.bc-on-dark .cap,
.bc-on-dark .hint,.bc-on-dark .rail__hint,.bc-on-dark .kicker--mute{ color:rgba(237,233,224,.55); }
.bc-on-dark .rows,.bc-on-dark .row,.bc-on-dark .facts,.bc-on-dark .cap,
.bc-on-dark .terms > div,.bc-on-dark .blg,.bc-on-dark .blg a,
.bc-on-dark .steps,.bc-on-dark .step{ border-color:var(--line-dk); }
.bc-on-dark .steps{ background:var(--line-dk); }
.bc-on-dark .step,.bc-on-dark .blg a{ background:transparent; }
.bc-on-dark .step:hover,.bc-on-dark .blg a:hover{ background:rgba(237,233,224,.06); }
.bc-on-dark .why__grid{ background:rgba(237,233,224,.16); border-color:rgba(237,233,224,.16); }
.bc-on-dark .why__cell{ background:rgba(18,14,10,.46); }
.bc-on-dark .why__cell:hover{ background:rgba(18,14,10,.72); }
.bc-on-dark .btn{ border-color:rgba(237,233,224,.4); color:var(--paper); }
.bc-on-dark .btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.bc-on-dark .btn--fill{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.bc-on-dark .btn--fill:hover{ background:var(--bronze-lt); border-color:var(--bronze-lt); color:var(--ink); }
.bc-on-dark .mq{ background:transparent; }
.bc-on-dark .mq__item img{ mix-blend-mode:normal; }
.bc-on-dark .hr{ background:var(--line-dk); }

/* ---- Dark text on a light custom ground ---- */

.bc-on-light{ color:var(--ink); }
.bc-on-light .t,
.bc-on-light h1,.bc-on-light h2,.bc-on-light h3,
.bc-on-light .why__cell dt{ color:var(--ink); }
.bc-on-light .t em,
.bc-on-light .kicker,
.bc-on-light .row__n,.bc-on-light .step__n,.bc-on-light .stage__n,
.bc-on-light .why__n,.bc-on-light .tl{ color:var(--bronze); }
.bc-on-light .lede,
.bc-on-light .row__x,.bc-on-light .step p,.bc-on-light .stage p,
.bc-on-light .facts dd,.bc-on-light .why__cell dd,
.bc-on-light p{ color:var(--ink-2); }
.bc-on-light .work__m,.bc-on-light .facts dt,.bc-on-light .cap,
.bc-on-light .hint,.bc-on-light .rail__hint{ color:var(--ash); }
.bc-on-light .rows,.bc-on-light .row,.bc-on-light .facts,.bc-on-light .cap,
.bc-on-light .steps,.bc-on-light .step,.bc-on-light .blg,.bc-on-light .blg a{ border-color:var(--line); }
.bc-on-light .steps{ background:var(--line); }
.bc-on-light .step,.bc-on-light .blg a{ background:transparent; }
.bc-on-light .why__grid{ background:var(--line); border-color:var(--line); }
.bc-on-light .why__cell{ background:rgba(255,255,255,.55); }
.bc-on-light .why__cell:hover{ background:rgba(255,255,255,.8); }
.bc-on-light .btn{ border-color:var(--ink); color:var(--ink); }
.bc-on-light .btn:hover{ background:var(--ink); color:var(--paper); }
.bc-on-light .btn--fill{ background:var(--ink); color:var(--paper); }
.bc-on-light .btn--fill:hover{ background:var(--bronze); border-color:var(--bronze); color:#fff; }
.bc-on-light .stages li{ border-color:var(--line); color:var(--ink-2); }
.bc-on-light .stages{ border-color:var(--line); }
.bc-on-light .reach > div,.bc-on-light .reach{ border-color:var(--line); }
.bc-on-light .reach dd,.bc-on-light .reach dt{ color:var(--ink-2); }
.bc-on-light .fld label{ color:var(--ash); }
.bc-on-light .fld :is(input,select,textarea){ color:var(--ink); border-bottom-color:var(--line); }
.bc-on-light .fld :is(input,textarea)::placeholder{ color:var(--ash); }
.bc-on-light .drop{ border-color:var(--line); }
.bc-on-light .drop span{ color:var(--ink-2); }
.bc-on-light .drop b{ color:var(--bronze); }
.bc-on-light .form__nt{ color:var(--ash); }

/* A custom background replaces the section's shipped padding rhythm only when
   the section had none — the hero and facts strip sit flush by default. */
.hero.bc-on-dark,.hero.bc-on-light,
.facts-sec.bc-on-dark,.facts-sec.bc-on-light,
.roster.bc-on-dark,.roster.bc-on-light{ padding-block:clamp(40px,5vw,72px); }

/* Turnstile widget sits inside the form grid; the iframe brings its own size */
.fld--ts{ min-height:0; }
.fld--ts .cf-turnstile{ display:flex; justify-content:flex-start; }
.fld--ts iframe{ max-width:100%; }