/* pt-kit.css - product and service template kit, split out of site.css on 14 Oct 2026 so the
   33 pages that do not use it stop loading it. Load AFTER site.css, only on template pages. */
/* =====================================================================
   PT-KIT:START  PRODUCT TEMPLATE KIT v1 (14 Oct 2026) - additions only.
   Sample page: /scrims. Nothing above this line was changed.
   Prefixes: pt- (template pieces) · sx- (looping light stage) · bg- (bento
   gallery + lightbox).
   Rule (Rowan, 14 Oct): signature moments run as loops or reader-triggered
   interactions, never as scroll capture. Native scroll is never driven,
   pinned or used to scrub an effect. Behaviour lives in the matching PT-KIT block at
   the end of js/site.js; every script there is guarded on its own
   element, so pages without the markup are untouched.
   Section order of the template: pt-hero > .dss-band > sx > pt-figs +
   pt-spec > pt-tabs > pt-made + .cf-flow > bg-gallery > pt-ask.
   ===================================================================== */

/* ─── No-script fallback ────────────────────────────────────────────
   With scripting off, nothing can add .in or open the curtain, so the
   end states become the resting states (same idea as reduced motion). */
@media (scripting: none) {
  .reveal, .drape-in { opacity: 1; transform: none; }
  .rv-curtain { display: none; }
  .cf-flow-node { opacity: 1; transform: none; }
  .cf-flow-track::after { transform: scaleY(1); }
  .cf-flow--horizontal .cf-flow-track::after { transform: scaleX(1); }
  .pt-tablist { display: none; }
}

/* ─── Scroll progress (.pt-progress) ────────────────────────────────
   Usage: <div class="pt-progress" aria-hidden="true"><span></span></div>
   as the first child of <main>. A 3px red line across the very top. */
.pt-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 205; pointer-events: none; }
.pt-progress span {
  display: block; height: 100%; background: var(--red);
  transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 12px rgba(209, 30, 59, .7);
}

/* ─── Product hero (.pt-hero) ───────────────────────────────────────
   CSS-only entrance: paints with no JavaScript. Masked line-rise H1
   (port of TSA's /drapes/ hero), a photo that settles like cloth, and
   fade-up supporting lines. Never put .reveal or [data-reveal] in here.
   Usage:
     <section class="pt-hero" data-spot>
       <div class="pt-hero-media"><img ... fetchpriority="high"></div>
       <div class="pt-hero-veil" aria-hidden="true"></div>
       <div class="wrap pt-hero-inner">
         <nav class="pt-crumbs" aria-label="Breadcrumb">...</nav>
         <p class="eyebrow pt-fade">...</p>
         <h1><span class="pt-line"><span>Line one</span></span>
             <span class="pt-line"><span>line two</span></span>
             <span class="script pt-hero-script pt-fade">third, in script</span></h1>
         <p class="lead pt-fade">...</p>
         <p class="pt-hero-cta pt-fade"><a class="btn btn-primary">...</a></p>
       </div>
       <p class="pt-hero-credit pt-fade">photo caption</p>
     </section>
   Stagger with style="--pt-d:900ms" on any .pt-fade.
   Modifier .pt-hero--gauze: the photo starts behind a lit gauze that
   lifts (the scrim reveal). Other products get their own modifier. */
.pt-hero {
  position: relative; background: var(--void); min-height: 92svh;
  display: grid; align-items: end; padding-block: 0; overflow: clip;
}
.pt-hero-media {
  position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 0;
  animation: ptSettle 2.4s var(--ease) both;
}
.pt-hero-media img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; opacity: .8; }
.pt-hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .93) 0%, rgba(0, 0, 0, .7) 38%, rgba(0, 0, 0, .12) 78%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .88) 100%);
}
.pt-hero--gauze .pt-hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(63deg, rgba(0, 0, 0, 0) 0 4px, rgba(0, 0, 0, .5) 4px 5.5px),
    repeating-linear-gradient(-63deg, rgba(0, 0, 0, 0) 0 4px, rgba(0, 0, 0, .5) 4px 5.5px),
    linear-gradient(180deg, #2a2420, #151312);
  opacity: 0; animation: ptGauzeLift 2.2s cubic-bezier(.5, 0, .2, 1) .35s backwards;
}
.pt-hero-inner { position: relative; z-index: 2; padding-block: calc(var(--header-h) + clamp(48px, 8vw, 120px)) clamp(64px, 9vw, 116px); }
.pt-hero h1 { font-size: clamp(2.5rem, 9.4vw, 6.9rem); line-height: .9; margin-top: 14px; }
.pt-line { display: block; overflow: hidden; padding-block: .04em .05em; }
.pt-line > span { display: inline-block; transform: translateY(112%); animation: ptRise 1100ms var(--ease) forwards; }
.pt-line:nth-child(1) > span { animation-delay: 200ms; }
.pt-line:nth-child(2) > span { animation-delay: 330ms; }
.pt-line:nth-child(3) > span { animation-delay: 460ms; }
.pt-hero-script { display: block; font-size: .62em; line-height: 1.1; margin-top: .12em; padding-left: .04em; --pt-d: 820ms; }
.pt-fade { opacity: 0; animation: ptFadeUp 900ms var(--ease) var(--pt-d, 600ms) forwards; }
.pt-hero .lead { margin-top: 22px; max-width: 54ch; color: #c3c3c8; }
.pt-hero-cta { margin-top: 30px; }
.pt-crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: .85rem; color: var(--grey); margin-bottom: 26px; }
.pt-crumbs a { color: var(--grey); text-decoration: none; }
@media (hover: hover) { .pt-crumbs a:hover { color: var(--white); } }
.pt-crumbs [aria-current] { color: var(--white); }
.pt-hero-credit {
  position: absolute; right: clamp(20px, 4vw, 48px); bottom: clamp(18px, 3vw, 34px); z-index: 2;
  font-size: .78rem; letter-spacing: .04em; color: #c3c3c8; text-align: right; max-width: 30ch;
  padding-right: 14px; border-right: 2px solid var(--red); --pt-d: 1500ms;
}
@keyframes ptRise { to { transform: none; } }
@keyframes ptFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ptSettle { from { transform: translateY(-2%) scale(1.06, 1.1); } to { transform: none; } }
@keyframes ptGauzeLift { from { opacity: .96; } to { opacity: 0; } }
@media (max-width: 820px) {
  .pt-hero { min-height: 78svh; }
  .pt-hero-credit { display: none; }
  .pt-hero-script { font-size: .8em; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-hero-media, .pt-hero--gauze .pt-hero-media::after { animation: none; }
  .pt-line > span { animation: none; transform: none; }
  .pt-fade { animation: none; opacity: 1; }
}

/* ─── Chapter bar scroll-spy (.pt-spy) ──────────────────────────────
   Usage: add class "pt-spy" and data-pt-spy to the existing
   <nav class="pill-nav"> inside .anchor-bar. Links must be #hash links
   to section ids. site.js marks the section in view with .is-active +
   aria-current="location". <=760px the bar becomes one swipeable row. */
.pt-spy a.is-active { color: var(--white); }
.pt-spy a.is-active::after { right: 0; }
.pt-spy a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 760px) {
  .pt-spy {
    flex-wrap: nowrap; justify-content: flex-start; gap: 8px 24px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-right: 28px;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
            mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .pt-spy::-webkit-scrollbar { display: none; }
  .pt-spy a { flex: 0 0 auto; white-space: nowrap; }
}
@media (pointer: coarse) { .pt-spy a { padding-block: .7em; } }

/* ─── Looping light stage (.sx-) ───────────────────────────────────
   The signature moment on /scrims. A .ba-slider pair whose light runs a
   slow cue on a loop (hold first state, fade, hold second, fade back),
   with the cue list and the front/back levels following it. Starts when
   the slider is on screen, pauses off screen or in a hidden tab. Drag or
   arrow keys take over and pause it; it resumes after ~4 s idle. Reduced
   motion: no loop, slider at the midpoint, drag works. No JS: the plain
   slider. Same behaviour on phones. site.js adds .is-live while the loop
   is active and sets --sx (0 = first state fully lit, 1 = second state).
   Usage:
     <section class="sec-deep sx" id="..." data-sx style="--sx-ratio: w / h">
       <div class="sx-light sx-light--front" aria-hidden="true"></div>
       <div class="sx-light sx-light--back" aria-hidden="true"></div>
       <div class="wrap sx-grid">
         <div class="sx-head">eyebrow, h2, .h-sub</div>
         <figure class="sx-frame">
           <div class="ba-slider sx-soft" data-ba-label="...">
             (standard .ba-slider children: img.ba-under, .ba-over > img,
              .ba-handle, .ba-label.a, .ba-label.b)
           </div>
           <figcaption>...</figcaption>
         </figure>
         <div class="sx-aside">
           <ol class="sx-cues"><li class="sx-cue" data-sx-cue><b>..</b><span>..</span></li> x3</ol>
           <div class="sx-desk" aria-hidden="true">
             <p class="sx-fader sx-fader--front">Label <i></i> <b data-sx-val="front">50</b></p>
             <p class="sx-fader sx-fader--back">Label <i></i> <b data-sx-val="back">50</b></p>
           </div>
         </div>
       </div>
     </section>
   .ba-over holds the FIRST state (the loop starts there). */
.sx { --sx: .5; --sx-ratio: 4 / 5; overflow: clip; }
.sx-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-areas: "head frame" "aside frame";
  column-gap: clamp(28px, 5vw, 84px); align-content: center;
  position: relative; z-index: 1;
}
.sx-head { grid-area: head; align-self: end; }
.sx-aside { grid-area: aside; align-self: start; }
.sx-frame { grid-area: frame; margin: 0; display: grid; justify-items: center; align-self: center; }
.sx-head h2 { margin-top: 12px; font-size: clamp(2.3rem, 5.4vw, 4.8rem); }
.sx-frame .ba-slider {
  aspect-ratio: var(--sx-ratio); width: min(100%, 540px); max-height: 78svh;
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .9), 0 0 90px rgba(255, 236, 214, calc(.03 + .09 * (1 - var(--sx))));
}
/* the two state labels light up with their side of the fade */
.sx .ba-label.a { opacity: calc(.3 + .7 * (1 - var(--sx))); }
.sx .ba-label.b { opacity: calc(.3 + .7 * var(--sx)); }
.sx-frame figcaption { margin-top: 14px; font-size: .9rem; color: var(--grey); text-align: center; max-width: 46ch; }

/* soft light edge instead of a hard wipe, and a warm line for the handle */
.ba-slider.sx-soft .ba-over {
  clip-path: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--ba, 50%) - 5%), transparent calc(var(--ba, 50%) + 5%));
          mask-image: linear-gradient(90deg, #000 calc(var(--ba, 50%) - 5%), transparent calc(var(--ba, 50%) + 5%));
}
.ba-slider.sx-soft .ba-handle {
  background: linear-gradient(180deg, rgba(255, 240, 220, 0), rgba(255, 240, 220, .85) 18%, rgba(255, 240, 220, .85) 82%, rgba(255, 240, 220, 0));
  box-shadow: 0 0 36px 6px rgba(255, 236, 214, .22);
}

/* cue list: three beats of the effect */
.sx-cues { list-style: none; counter-reset: sx; margin-top: clamp(22px, 3vw, 34px); border-top: 1px solid var(--line); max-width: 520px; }
.sx-cue {
  counter-increment: sx; position: relative; display: grid; gap: 2px;
  padding: 14px 0 14px 62px; border-bottom: 1px solid var(--line);
}
.sx-cue::before {
  content: counter(sx, decimal-leading-zero); position: absolute; left: 0; top: 13px;
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; color: var(--red);
  transition: text-shadow .5s var(--ease), opacity .5s var(--ease);
}
.sx-cue::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--beam); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .7s var(--ease);
}
.sx-cue b { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 1.12rem; line-height: 1.2; color: var(--white); transition: color .5s var(--ease); }
.sx-cue span { font-size: .96rem; line-height: 1.55; color: var(--grey); transition: color .5s var(--ease); }
.sx.is-live .sx-cue b { color: var(--grey); }
.sx.is-live .sx-cue span { color: #8a8a91; }
.sx.is-live .sx-cue::before { opacity: .55; }
.sx.is-live .sx-cue.is-on b { color: var(--white); }
.sx.is-live .sx-cue.is-on span { color: #c3c3c8; }
.sx.is-live .sx-cue.is-on::before { opacity: 1; text-shadow: 0 0 16px rgba(209, 30, 59, .7); }
.sx.is-live .sx-cue.is-on::after { transform: scaleX(1); }

/* the lighting desk: two levels that follow the slider */
.sx-desk { display: grid; gap: 9px; margin-top: 20px; max-width: 520px; }
.sx-fader {
  display: grid; grid-template-columns: 7.4em 1fr 2.4em; align-items: center; gap: 14px;
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  font-size: .76rem; color: var(--grey);
}
.sx-fader i { position: relative; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sx-fader i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--white); transform-origin: 0 50%; }
.sx-fader--front i::after { transform: scaleX(calc(1 - var(--sx))); }
.sx-fader--back i::after { transform: scaleX(var(--sx)); }
.sx-fader b { text-align: right; font-variant-numeric: tabular-nums; font-size: .9rem; letter-spacing: .04em; }

/* the light itself: two cones, cross-faded by --sx */
.sx-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; filter: blur(26px); }
.sx-light--front {
  background: conic-gradient(from 50deg at -6% 112%, transparent 0deg, rgba(255, 238, 216, .13) 8deg, rgba(255, 238, 216, .07) 16deg, transparent 24deg, transparent 360deg);
  opacity: calc(1 - var(--sx));
}
.sx-light--back {
  background: conic-gradient(from 158deg at 76% -14%, transparent 0deg, rgba(255, 238, 216, .2) 13deg, rgba(209, 30, 59, .1) 27deg, transparent 42deg, transparent 360deg);
  opacity: var(--sx);
}

@media (max-width: 1023px) {
  .sx-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "frame" "aside"; row-gap: clamp(24px, 5vw, 40px); }
  .sx-cues, .sx-desk { max-width: none; }
  .sx-light { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-cue::after { transform: none; display: none; }
}

/* shared section header spacing for the template: <div class="pt-h">eyebrow, h2, p.lead</div> */
/* kit eyebrow: a red cue dash with a label light enough for AA on black */
.pt-hero .eyebrow, .sx-head .eyebrow, .pt-h .eyebrow, .pt-made-copy .eyebrow, .pt-ask-q .eyebrow {
  display: flex; align-items: center; gap: 12px; color: var(--grey);
}
.pt-hero .eyebrow::before, .sx-head .eyebrow::before, .pt-h .eyebrow::before, .pt-made-copy .eyebrow::before, .pt-ask-q .eyebrow::before {
  content: ""; flex: 0 0 22px; height: 2px; background: var(--red); box-shadow: 0 0 10px rgba(209, 30, 59, .7);
}
.pt-h h2 { margin-top: 12px; }
.pt-h .lead { margin-top: 18px; }

/* ─── Spec strip (.pt-figs) + compact spec table (.pt-spec) ─────────
   Usage:
     <div class="pt-figs">
       <div class="pt-fig reveal"><p class="num"><span data-count="100">100</span><small>gsm</small></p><p class="lbl">Label</p></div> x3-4
     </div>
     <div class="table-scroll"><table class="spec-table pt-spec">
       ... every <td> carries data-th="Column name" (shown <=860px, where
       each row becomes a card)
     </table></div>
     <ul class="pt-links"><li>sentence <a href>link</a></li></ul>
   Counting is the existing [data-count] observer; the HTML holds the
   final number, so no-JS and reduced motion read correctly. */
.pt-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); margin-top: clamp(28px, 4vw, 48px); }
.pt-figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-fig { padding: clamp(22px, 3vw, 40px) clamp(14px, 2.2vw, 30px); border-left: 1px solid var(--line); }
.pt-fig:first-child { border-left: 0; padding-left: 0; }
.pt-fig .num {
  display: flex; align-items: baseline; gap: .1em;
  font-family: var(--display); font-weight: 700; color: var(--white);
  font-size: clamp(3.2rem, 7.4vw, 6.6rem); line-height: .88; font-variant-numeric: tabular-nums;
}
.pt-fig .num small { font-size: .3em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.pt-fig .num .approx { font-size: .5em; color: var(--grey-2); align-self: center; margin-right: .04em; }
.pt-fig .lbl { margin-top: .9em; font-size: .92rem; line-height: 1.45; color: var(--grey); max-width: 22ch; }
.pt-spec-wrap { margin-top: clamp(26px, 3.5vw, 44px); }
.pt-spec td strong { display: block; }
.pt-note { margin-top: 18px; font-size: .9rem; line-height: 1.6; color: var(--grey); max-width: 76ch; }
.pt-links { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin-top: clamp(22px, 3vw, 34px); }
.pt-links li { padding: 16px 0; border-top: 1px solid var(--line); font-size: .96rem; color: var(--grey); }
.pt-links a { color: var(--white); font-weight: 600; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 5px; white-space: nowrap; }
@media (hover: hover) { .pt-links a:hover { color: var(--red); } }
.pt-links a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
@media (max-width: 860px) {
  .pt-figs, .pt-figs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-fig:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pt-fig:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pt-links { grid-template-columns: minmax(0, 1fr); }
  .pt-links a { white-space: normal; }
  .pt-spec, .pt-spec tbody, .pt-spec tr, .pt-spec th, .pt-spec td { display: block; }
  .pt-spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pt-spec tr { background: var(--coal); border: 1px solid var(--line); border-radius: 14px; padding: 6px 18px 8px; }
  .pt-spec tr + tr { margin-top: 14px; }
  .pt-spec th[scope="row"] { white-space: normal; font-size: 1.3rem; padding: 14px 0 12px; }
  .pt-spec td { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 14px; padding: 11px 0; }
  .pt-spec td:last-child { border-bottom: 0; }
  .pt-spec td::before {
    content: attr(data-th); font-family: var(--display); font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; font-size: .82rem; color: var(--grey); padding-top: .15em;
  }
}

/* ─── Chooser tabs (.pt-tabs) ───────────────────────────────────────
   Tabs that cross-fade stacked panels; the active panel's media drops
   in like a cloth. Keyboard: arrows, Home, End. Before site.js runs
   (or without it) every panel shows, one under the other.
   Usage:
     <div class="pt-tabs" data-pt-tabs>
       <div class="pt-tablist" role="tablist" aria-label="...">
         <button class="pt-tab" role="tab" id="t1" aria-controls="p1" aria-selected="true">
           <span class="no">01</span><span><b>Name</b><small>one line</small></span></button> ...
       </div>
       <div class="pt-panels">
         <article class="pt-panel is-active" role="tabpanel" id="p1" aria-labelledby="t1">
           <div class="pt-panel-media"><img ...> or <div class="pt-weave" data-spot></div></div>
           <div class="pt-panel-body">h3, ul.pt-chips, p ...</div>
         </article> ...
       </div>
     </div>
   Swatch photos inside .pt-panel-media are true colour: no filter, no overlay.
   .pt-weave is a CSS open-weave tile lit by the followspot ([data-spot]);
   it is an effect, not a swatch. Replace it with a photo when one exists. */
.pt-tablist { display: flex; gap: clamp(14px, 3vw, 40px); border-bottom: 1px solid var(--line); margin-top: clamp(26px, 4vw, 46px); }
.pt-tab {
  position: relative; flex: 1 1 0; min-width: 0; text-align: left; background: none; border: 0;
  padding: 16px 0 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
}
.pt-tab .no { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; color: var(--red); }
.pt-tab b { display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(1.15rem, 2.2vw, 1.75rem); line-height: 1.1; color: var(--grey); transition: color .3s var(--ease); }
.pt-tab small { display: block; margin-top: 4px; font-size: .84rem; line-height: 1.4; color: var(--grey); }
.pt-tab::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px; background: var(--beam); transition: right .55s var(--ease); }
.pt-tab[aria-selected="true"] b { color: var(--white); }
.pt-tab[aria-selected="true"]::after { right: 0; }
@media (hover: hover) { .pt-tab:hover b { color: var(--white); } }
.pt-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.pt-panels { display: grid; margin-top: clamp(24px, 3.5vw, 44px); }
.pt-panel { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(22px, 4.5vw, 70px); align-items: center; min-width: 0; }
.pt-panel + .pt-panel { margin-top: 44px; }
.pt-tabs.is-ready .pt-panel {
  grid-area: 1 / 1; margin-top: 0; opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.pt-tabs.is-ready .pt-panel.is-active { opacity: 1; visibility: visible; transition: opacity .6s var(--ease) .12s, visibility 0s; }
.pt-panel-media { position: relative; aspect-ratio: 5 / 4; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--coal); box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .9); }
.pt-panel-media img { width: 100%; height: 100%; object-fit: cover; }
.pt-tabs.is-ready .pt-panel-media { clip-path: inset(0 0 100% 0 round 14px); transition: clip-path .01s linear .5s; }
.pt-tabs.is-ready .pt-panel.is-active .pt-panel-media { clip-path: inset(0 0 0 0 round 14px); transition: clip-path .95s var(--ease) .1s; }
.pt-panel-body h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.pt-panel-body p { margin-top: 16px; color: var(--grey); max-width: 52ch; }
.pt-panel-body p a { color: var(--white); font-weight: 600; text-decoration-color: var(--red); text-underline-offset: 4px; }
.pt-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pt-chips li { font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: .38em .95em; color: #c3c3c8; }
.pt-weave { position: absolute; inset: 0; background: #060607; --mx: 34%; --my: 32%; }
.pt-weave::before {
  content: ""; position: absolute; inset: -2px;
  background-image:
    repeating-linear-gradient(62deg, rgba(226, 150, 84, 0) 0 3.4px, rgba(226, 150, 84, .95) 3.4px 4.6px),
    repeating-linear-gradient(-62deg, rgba(226, 150, 84, 0) 0 3.4px, rgba(226, 150, 84, .95) 3.4px 4.6px);
  filter: blur(.35px);
  -webkit-mask-image: radial-gradient(380px circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, .14) 74%, rgba(0, 0, 0, .06) 100%);
          mask-image: radial-gradient(380px circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, .14) 74%, rgba(0, 0, 0, .06) 100%);
}
.pt-weave-hint {
  position: absolute; left: 14px; bottom: 14px; z-index: 3; pointer-events: none;
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .76rem;
  color: var(--white); background: rgba(0, 0, 0, .6); border: 1px solid var(--line); border-radius: 999px; padding: .42em 1em;
}
@media (hover: none), (pointer: coarse) { .pt-weave-hint { display: none; } }
@media (max-width: 820px) {
  .pt-panel { grid-template-columns: minmax(0, 1fr); }
  .pt-panel-media { aspect-ratio: 16 / 10; }
  .pt-tab { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ─── How it's made (.pt-made) ──────────────────────────────────────
   Heading + two overlapped workshop photos, then the existing
   .cf-flow.cf-flow--horizontal rail underneath.
   Usage:
     <div class="wrap pt-made">
       <div class="pt-made-copy">eyebrow, h2, p.lead</div>
       <div class="pt-duo">
         <figure class="pt-duo-a drape-in"><img ...><figcaption>..</figcaption></figure>
         <figure class="pt-duo-b drape-in"><img ...><figcaption>..</figcaption></figure>
       </div>
     </div>
     <div class="wrap"><div class="cf-flow cf-flow--horizontal reveal" style="--cf-cols:5">...</div></div> */
.pt-made { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 76px); align-items: center; }
.pt-made-copy h2 { margin-top: 12px; }
.pt-made-copy .lead { margin-top: 18px; }
.pt-duo { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.pt-duo figure { margin: 0; }
.pt-duo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .9); }
.pt-duo-a { grid-column: 1 / 10; grid-row: 1; }
.pt-duo-a img { aspect-ratio: 3 / 2; }
.pt-duo-b { grid-column: 8 / 13; grid-row: 1; z-index: 1; transform: translateY(12%); transition-delay: .18s; }
.pt-duo-b img { aspect-ratio: 3 / 4; border: 6px solid var(--void); }
.pt-duo figcaption { margin-top: 10px; font-size: .84rem; color: var(--grey); max-width: 36ch; }
.pt-duo-b figcaption { padding-left: 6px; }
.pt-made + .wrap .cf-flow-line { color: var(--grey); }
@media (max-width: 900px) {
  .pt-made { grid-template-columns: minmax(0, 1fr); }
  .pt-duo-b { transform: translateY(8%); }
}

/* ─── Bento gallery + lightbox (.bg-, [data-bento]) ─────────────────
   Port of TSA's app/components/bento-gallery, restyled to Reveal's
   tokens. One native <dialog> lightbox per page, shared by every
   gallery: click or Enter opens, arrows and swipe move, Esc closes,
   focus returns to the tile. Without JS each tile links to its image.
   Usage:
     <div class="bg-gallery" data-bento>
       <ul class="bg-grid">
         <li class="bg-item" data-size="lead">
           <figure><a class="bg-link" href="/img/....jpg">
             <img src="/img/....jpg" alt="what is in the photo" width height loading="lazy"></a>
             <figcaption><span class="bg-title">Caption</span>
               <span class="bg-meta">Venue</span><span class="bg-credit">Photo: Name</span></figcaption>
           </figure></li> ...
       </ul>
     </div>
   data-size: lead (4 cols x 2 rows) · tall (2 x 2) · wide (3 x 1) ·
   none (2 x 1) on a 6-column grid. Rows should add up to 6 columns;
   site.js widens a tile into any hole that is left. Full colour only.
   Optional: style="--bg-pos: 50% 20%" on a .bg-item to set the crop. */
.bg-gallery { container-type: inline-size; margin-top: clamp(28px, 4vw, 50px); }
.bg-grid {
  --bg-cols: 6; --bg-gap: 14px; --bg-row-ratio: 1.26;
  display: grid; grid-template-columns: repeat(var(--bg-cols), minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 17vw, 270px);
  grid-auto-rows: calc((100cqi - (var(--bg-cols) - 1) * var(--bg-gap)) / var(--bg-cols) * var(--bg-row-ratio));
  grid-auto-flow: row dense; gap: var(--bg-gap); margin: 0; padding: 0; list-style: none;
}
.bg-item { position: relative; overflow: hidden; min-width: 0; border-radius: 12px; background: var(--coal); grid-column: span 2; grid-row: span 1; }
.bg-item[data-size="lead"] { grid-column: span 4; grid-row: span 2; }
.bg-item[data-size="tall"] { grid-column: span 2; grid-row: span 2; }
.bg-item[data-size="wide"] { grid-column: span 3; }
.bg-item figure { margin: 0; width: 100%; height: 100%; }
.bg-link { display: block; width: 100%; height: 100%; cursor: zoom-in; color: inherit; }
.bg-link:focus { outline: none; }
.bg-link:focus-visible { outline: 3px solid var(--white); outline-offset: -3px; border-radius: 12px; }
.bg-link img { width: 100%; height: 100%; object-fit: cover; object-position: var(--bg-pos, 50% 50%); transition: transform 900ms var(--ease); }
.bg-item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 350ms var(--ease); }
.bg-index {
  position: absolute; top: 12px; left: 12px; z-index: 2; pointer-events: none;
  font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .18em; line-height: 1; color: var(--white);
  background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 6px 7px 6px 10px; border-radius: 999px;
}
.bg-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; padding: 44px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, .86), rgba(0, 0, 0, 0)); color: var(--white);
}
.bg-title { font-weight: 600; font-size: .94rem; line-height: 1.3; }
.bg-meta { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: #d6d6da; }
.bg-meta::before { content: ""; display: inline-block; width: 14px; height: 2px; margin-right: 8px; vertical-align: middle; background: var(--red); }
.bg-item .bg-credit { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (hover: hover) and (pointer: fine) {
  .bg-index { opacity: 0; transform: translateY(-4px); transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
  .bg-item figcaption { opacity: 0; transform: translateY(8px); transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
  .bg-item:hover .bg-index, .bg-item:focus-within .bg-index,
  .bg-item:hover figcaption, .bg-item:focus-within figcaption { opacity: 1; transform: none; }
  .bg-item:hover .bg-link img, .bg-item:focus-within .bg-link img { transform: scale(1.045); }
  .bg-item:hover::after, .bg-item:focus-within::after { box-shadow: inset 0 0 0 2px var(--red); }
}
/* cloth-drop entrance: site.js adds .bg-drop to the gallery, then .in */
.bg-drop .bg-item { clip-path: inset(0 0 100% 0 round 12px); transition: clip-path 1s var(--ease); transition-delay: calc(var(--bg-i, 0) * 70ms); }
.bg-drop.in .bg-item { clip-path: inset(0 0 0 0 round 12px); }
@media (max-width: 1024px) {
  .bg-grid { --bg-cols: 4; --bg-gap: 10px; }
  .bg-item[data-size="wide"] { grid-column: span 4; }
}
@media (max-width: 600px) {
  .bg-grid { --bg-cols: 2; --bg-gap: 8px; --bg-row-ratio: .92; grid-auto-rows: 42vw;
    grid-auto-rows: calc((100cqi - (var(--bg-cols) - 1) * var(--bg-gap)) / var(--bg-cols) * var(--bg-row-ratio)); }
  .bg-item { grid-column: span 1; }
  .bg-item[data-size="lead"] { grid-column: span 2; grid-row: span 2; }
  .bg-item[data-size="tall"] { grid-column: span 1; grid-row: span 2; }
  .bg-item[data-size="wide"] { grid-column: span 2; }
  .bg-item figcaption { padding: 26px 10px 9px; }
  .bg-title { font-size: .8rem; }
  .bg-meta { font-size: .7rem; }
  .bg-index { display: none; }
}
.bg-lightbox {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; background: transparent; color: var(--white); overflow: hidden;
}
.bg-lightbox::backdrop { background: rgba(0, 0, 0, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bg-lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.bg-lb-stage { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 76px clamp(16px, 7vw, 108px) 16px; touch-action: pan-y; }
.bg-lb-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 24px 80px rgba(0, 0, 0, .7); transition: opacity 300ms var(--ease); }
.bg-lightbox.is-loading .bg-lb-img { opacity: .25; }
.bg-lb-btn {
  position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center; color: var(--white);
  background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .24); transition: background 300ms, border-color 300ms;
}
.bg-lb-btn svg { width: 20px; height: 20px; display: block; }
@media (hover: hover) { .bg-lb-btn:hover { background: var(--red); border-color: var(--red); } }
.bg-lb-btn:focus { outline: none; }
.bg-lb-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.bg-lb-close { top: 16px; right: 16px; }
.bg-lb-prev { left: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.bg-lb-next { right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.bg-lb-details { display: flex; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; width: 100%; max-width: 1100px; margin: 0 auto; padding: 14px clamp(16px, 4vw, 40px) 24px; border-top: 1px solid var(--line); }
.bg-lb-count { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: .2em; color: var(--red); white-space: nowrap; }
.bg-lb-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 280px; }
.bg-lb-title { font-weight: 600; font-size: 1.05rem; line-height: 1.35; color: var(--white); }
.bg-lb-meta { font-size: .9rem; line-height: 1.45; color: var(--grey); }
.bg-lb-credit { font-size: .78rem; line-height: 1.4; color: var(--grey); letter-spacing: .02em; }
.bg-lb-meta:empty, .bg-lb-credit:empty { display: none; }
@media (max-width: 600px) {
  .bg-lb-stage { padding: 68px 8px 68px; }
  .bg-lb-btn { width: 44px; height: 44px; }
  .bg-lb-prev, .bg-lb-next { top: auto; bottom: 12px; transform: none; }
  .bg-lb-title { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-drop .bg-item { clip-path: none; }
  .bg-item:hover .bg-link img, .bg-item:focus-within .bg-link img { transform: none; }
}
@media print { .bg-lightbox { display: none; } }

/* ─── Questions + enquiry (.pt-ask) ─────────────────────────────────
   Usage:
     <div class="wrap pt-ask">
       <div class="pt-ask-q">eyebrow, h2, <div class="faq"> five <details> </div></div>
       <aside class="pt-ask-card">
         <img ...><div class="pt-ask-body">h3, p, ul.cue-list, a.btn.btn-primary, p.pt-ask-tel</div>
       </aside>
     </div> */
.pt-ask { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.pt-ask-q h2 { margin-top: 12px; }
.pt-ask-q .faq { margin-top: clamp(20px, 3vw, 34px); border-top: 1px solid var(--line); }
.pt-ask-q .faq summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
.pt-ask-q .faq details p a { color: var(--white); font-weight: 600; text-decoration-color: var(--red); text-underline-offset: 4px; }
.pt-ask-card { position: sticky; top: calc(var(--header-h) + 76px); background: var(--coal); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pt-ask-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--beam); z-index: 1; }
.pt-ask-card > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pt-ask-body { padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; justify-items: start; }
.pt-ask-body h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.pt-ask-body p { color: var(--grey); }
.pt-ask-tel { font-size: .92rem; }
.pt-ask-tel a { color: var(--white); font-weight: 600; text-decoration-color: var(--red); text-underline-offset: 4px; }
@media (max-width: 900px) {
  .pt-ask { grid-template-columns: minmax(0, 1fr); }
  .pt-ask-card { position: relative; top: auto; }
}
/* ─── v1.1 (service template, /fire-treatment) ─────────────────────── */

/* Hero modifier .pt-hero--split: the photo sits in the right half and
   feathers into the black, for portrait or lower-resolution photos that
   would soften full-bleed. Optional style="--pt-hero-pos: 50% 30%". */
.pt-hero--split .pt-hero-media {
  left: auto; width: 56%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
/* the hero is a grid, so the wrap must be told to fill it or auto margins shrink and centre it */
.pt-hero-inner { width: 100%; }
.pt-hero--split .pt-hero-inner > * { max-width: 44rem; }
.pt-hero--split h1 { font-size: clamp(2.5rem, 7.4vw, 5.8rem); }
.pt-hero--split .pt-hero-media img { opacity: .92; object-position: var(--pt-hero-pos, 50% 30%); }
.pt-hero--split .pt-hero-veil {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .6) 44%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .85) 100%);
}
@media (max-width: 820px) {
  .pt-hero--split .pt-hero-media { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .pt-hero--split .pt-hero-media img { opacity: .5; }
}

/* ─── Scroll-told steps (.pt-steps) ─────────────────────────────────
   A reading companion for a process (not scroll capture: the page
   scrolls freely and nothing is pinned). Desktop: steps run down the
   left on a rail that fills as you read; a sticky frame on the right drops each step's
   photo in over the last, like a cloth coming in. Phones, reduced motion
   and no-JS: a plain stacked list, each step with its own photo.
   Usage:
     <div class="pt-steps" data-pt-steps>
       <ol class="pt-steps-list">
         <li class="pt-step">
           <figure class="pt-step-media"><img src alt width height loading="lazy"></figure>
           <div class="pt-step-body"><span class="no">01</span><h3>Title</h3><p>One or two lines.</p></div>
         </li> ...
       </ol>
       <div class="pt-steps-stage" aria-hidden="true"></div>
     </div>
   site.js clones the step photos into the stage and adds .is-live. */
.pt-steps { position: relative; margin-top: clamp(30px, 4vw, 56px); }
.pt-steps-list { list-style: none; display: grid; gap: 0; }
.pt-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 26px 0; border-top: 1px solid var(--line); }
.pt-step-media { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--coal); border: 1px solid var(--line); }
.pt-step-media img { width: 100%; height: 100%; object-fit: cover; }
.pt-step-body .no { display: block; font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1; color: var(--red); margin-bottom: 8px; }
.pt-step-body h3 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
.pt-step-body p { margin-top: 10px; color: var(--grey); max-width: 46ch; }
.pt-steps-stage { display: none; }
.pt-steps.is-live { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 84px); align-items: start; }
.pt-steps.is-live .pt-steps-list { position: relative; padding-left: 64px; }
.pt-steps.is-live .pt-steps-list::before,
.pt-steps.is-live .pt-steps-list::after { content: ""; position: absolute; left: 19px; top: 12vh; bottom: 12vh; width: 2px; border-radius: 2px; }
.pt-steps.is-live .pt-steps-list::before { background: rgba(255, 255, 255, .12); }
.pt-steps.is-live .pt-steps-list::after { background: linear-gradient(180deg, var(--red), var(--magenta)); transform: scaleY(var(--pt-p, 0)); transform-origin: 50% 0; box-shadow: 0 0 12px rgba(209, 30, 59, .6); }
.pt-steps.is-live .pt-step { position: relative; min-height: 58svh; display: flex; flex-direction: column; justify-content: center; border-top: 0; padding: 0; }
.pt-steps.is-live .pt-step-media { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.pt-steps.is-live .pt-step-body .no {
  position: absolute; left: -64px; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin: 0;
  font-size: .95rem; background: var(--void); border: 2px solid rgba(255, 255, 255, .22); color: var(--grey);
  transition: border-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.pt-steps.is-live .pt-step-body h3 { color: var(--grey); transition: color .5s var(--ease); }
.pt-steps.is-live .pt-step-body p { color: #8a8a91; transition: color .5s var(--ease); }
.pt-steps.is-live .pt-step.is-on .pt-step-body .no { border-color: var(--red); color: var(--white); box-shadow: 0 0 0 5px rgba(209, 30, 59, .16), 0 0 18px rgba(209, 30, 59, .5); }
.pt-steps.is-live .pt-step.is-on .pt-step-body h3 { color: var(--white); }
.pt-steps.is-live .pt-step.is-on .pt-step-body p { color: #c3c3c8; }
.pt-steps.is-live .pt-steps-stage {
  display: block; position: sticky; top: calc(var(--header-h) + var(--pt-bar, 62px) + 24px);
  height: calc(100svh - var(--header-h) - var(--pt-bar, 62px) - 48px); max-height: 760px;
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--coal);
  box-shadow: 0 44px 90px -36px rgba(0, 0, 0, .95);
}
.pt-stage-shot { position: absolute; inset: 0; margin: 0; clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--ease); }
.pt-stage-shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.pt-stage-shot.is-shown { clip-path: inset(0 0 0 0); }
.pt-stage-shot.is-shown img { transform: none; }
.pt-stage-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 40%); }
.pt-stage-cap {
  position: absolute; left: 18px; bottom: 18px; z-index: 2; margin: 0;
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .82rem;
  color: var(--white); background: rgba(0, 0, 0, .6); border: 1px solid var(--line); border-radius: 999px; padding: .5em 1.1em;
}
.pt-stage-cap b { color: var(--red); font-weight: 700; margin-right: .6em; }
@media (min-width: 600px) {
  .pt-steps:not(.is-live) .pt-step { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
}

/* Two-column label/detail table: <table class="spec-table pt-spec pt-spec--pairs">.
   The header row is for screen readers only; rows stay rows on phones. */
.pt-spec--pairs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pt-spec--pairs th[scope="row"] { width: 30%; vertical-align: top; }
@media (max-width: 860px) {
  .pt-spec--pairs td { display: block; padding-top: 4px; }
  .pt-spec--pairs td::before { content: none; }
  .pt-spec--pairs th[scope="row"] { width: auto; font-size: 1rem; padding: 14px 0 0; border-bottom: 0; }
}
/* PT-KIT:END */