/* SRT Threads — site styles. Tokens and rules: theme.md (v2 is live, defined on .home; "Forest & Cream v1" is the base in :root). */

:root {
  --paper: #f7f3e8; --oat: #f0e8d4; --oat-line: #e3d8bd; --card: #fffdf4; --line: #e0dac6;
  --ink: #1d2c22; --body-ink: #4a5245; --muted: #5e6658;
  --sage: #4f6f42; --forest: #24422f; --forest-deep: #14231a; --whatsapp: #1f7a4d;
  --gold: #e6a51f; --gold-deep: #bd8214; --gold-soft: #f7e9c4; --gold-lift: #e6b657;
  --link: #8a5d0c; /* gold family, dark enough for text on light surfaces (theme.md §6) */
  --burgundy: #7a2f3c; --burgundy-soft: #9a4453;
  --dark-ink: #eef0e2; --dark-body: #a9b7a6;
  --espresso: #26221b; --tint-leaf: #e2e8d6; --tint-parch: #f1e6c8;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --section: clamp(68px, 9vw, 104px);
  --section-xl: clamp(84px, 11vw, 140px);
  --pad: clamp(18px, 4vw, 40px);
  --shell: 1160px;
  --shadow-card: 0 18px 46px rgba(40, 50, 30, .08);
  --shadow-pop: 0 24px 50px rgba(40, 50, 30, .13);
  --ivory: linear-gradient(180deg, #fffef9, #fbf6e9);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  background: var(--paper); color: var(--body-ink);
  font-family: var(--sans); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, .ft :focus-visible { outline-color: var(--gold-lift); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }
.sec { padding: var(--section) 0; }
.sec-xl { padding: var(--section-xl) 0; }
.sec-oat { background: var(--oat); border-top: 1px solid var(--oat-line); border-bottom: 1px solid var(--oat-line); }
.sec-card { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
h1, h2, h3 { text-wrap: balance; }
.faq summary, .lede, .sec-head p { text-wrap: pretty; }
h1 em, h2 em { font-style: italic; color: var(--burgundy); }
.eyebrow { color: var(--sage); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.rule { width: 44px; height: 3px; background: var(--burgundy); border-radius: 2px; margin-bottom: 20px; }
.sec-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 54px); }
.sec-head.wide { max-width: 780px; }
.sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: 14px; }
.sec-xl .sec-head h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); letter-spacing: -.015em; }
.sec-head p:where(:not(.eyebrow)) { color: var(--muted); font-size: 1.02rem; max-width: 56ch; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .rule { margin-left: auto; margin-right: auto; }
.lede { font-size: clamp(1rem, 1.4vw, 1.1rem); color: var(--body-ink); max-width: 56ch; }
.note { font-size: .82rem; color: var(--muted); }

/* ---------- buttons (theme.md §6: where a button lives is part of its definition) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 700 .95rem/1 var(--sans); padding: 15px 24px; border-radius: 10px;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, transform .16s, box-shadow .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: #2a2110; }
.btn-gold:hover { background: var(--gold-deep); color: #2a2110; }
.btn-wa { background: var(--whatsapp); color: #fff; }
.btn-wa:hover { background: #17603c; }
.btn-forest { background: var(--forest); color: #f2efe2; }
.btn-forest:hover { background: var(--forest-deep); }
.btn-espresso { background: var(--espresso); color: #fbf1d8; }
.btn-espresso:hover { background: #332d23; }
.btn-line { background: var(--card); color: var(--ink); border-color: var(--line); font-weight: 600; }
.btn-line:hover { border-color: var(--gold); }
.btn-cream { background: var(--paper); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.link { color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { color: var(--ink); text-decoration-thickness: 2px; }
.pc-body .link { text-decoration: none; }
.chip { display: inline-block; background: var(--gold-soft); color: var(--link); border-radius: 6px; font-size: .74rem; font-weight: 700; padding: 5px 10px; letter-spacing: .01em; }
.chip-leaf { background: var(--tint-leaf); color: var(--forest); }

/* ---------- header: three links, one panel, one button ---------- */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(247, 243, 232, .94); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid var(--line); transition: box-shadow .25s; }
.hdr.scrolled { box-shadow: 0 12px 34px rgba(40, 50, 30, .07); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.hdr-end { display: flex; align-items: center; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { display: block; width: 40px; height: 40px; border-radius: 9px; flex: none; } /* the SRT roundel traced from the pack (src/root/logo-mark.svg) */
.brand-name { font-family: var(--display); font-size: 1.2rem; font-weight: 500; }
.nav { display: flex; gap: 30px; align-items: stretch; }
.nav > a, .nav-item > a { display: inline-flex; align-items: center; font-size: .94rem; font-weight: 500; color: var(--ink); text-decoration: none; position: relative; padding: 24px 0; white-space: nowrap; }
.nav > a::after, .nav-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .22s; }
.nav > a:hover::after, .nav a[aria-current]::after, .has-menu.open > a::after { transform: scaleX(1); }
.nav-item { display: flex; align-items: center; gap: 2px; }
.nav-tog { background: none; border: 0; padding: 6px 4px; color: var(--ink); cursor: pointer; display: flex; border-radius: 6px; }
.nav-tog svg { width: 12px; height: 12px; transition: transform .2s; }
.has-menu.open .nav-tog svg { transform: rotate(180deg); }
.menu {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border-bottom: 1px solid var(--line);
  box-shadow: 0 34px 70px rgba(40, 50, 30, .14); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility 0s linear .18s;
}
.has-menu.open > .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.has-menu.suppress > .menu { opacity: 0 !important; visibility: hidden !important; }
@media (hover: hover) and (pointer: fine) {
  .has-menu:hover > .menu { opacity: 1; visibility: visible; transform: none; transition-delay: .12s; }
  .has-menu:hover .nav-tog svg { transform: rotate(180deg); }
}
.menu-in { display: grid; grid-template-columns: 1.05fr 1.05fr .95fr 1.15fr; gap: 10px 44px; padding: 30px var(--pad) 24px; }
.menu-h { color: var(--sage); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }
.menu-col ul { list-style: none; padding: 0; margin: 0 0 18px; }
.menu-col li a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .92rem; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s; }
.menu-col li a small { font-size: .76rem; color: var(--muted); font-weight: 400; white-space: nowrap; }
.menu-col li a:hover { color: var(--link); }
.menu-feature { text-decoration: none; color: var(--ink); display: grid; gap: 8px; align-content: start; }
.menu-feature img { width: 100%; border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; }
.menu-feature .menu-h { margin: 6px 0 0; }
.menu-feature > span:last-child { font-family: var(--display); font-size: 1.15rem; line-height: 1.3; }
.menu-feature:hover > span:last-child { color: var(--link); }
.menu-foot { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14px; }
.menu-foot a { font-size: .9rem; font-weight: 600; color: var(--link); text-decoration: none; }
.menu-foot a:hover { color: var(--ink); }
.hdr .btn { padding: 11px 18px; font-size: .86rem; }
.hdr .btn .short { display: none; }

/* phone drawer — a <details>, so it opens without JavaScript */
.drawer { display: none; }
.burger { list-style: none; width: 42px; height: 42px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); }
.burger::-webkit-details-marker { display: none; }
.burger span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s, opacity .18s; }
.drawer[open] .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.drawer[open] .burger span:nth-child(2) { opacity: 0; }
.drawer[open] .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.drawer-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border-bottom: 1px solid var(--line); padding: 6px var(--pad) 22px; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow: auto; box-shadow: 0 34px 70px rgba(40, 50, 30, .14); }
.drawer-nav > a, .drawer-group > summary { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); cursor: pointer; list-style: none; }
.drawer-group > summary::-webkit-details-marker { display: none; }
.drawer-group > summary svg { width: 14px; height: 14px; transition: transform .2s; }
.drawer-group[open] > summary svg { transform: rotate(180deg); }
.drawer-group a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0 9px 14px; font-size: .96rem; color: var(--ink); text-decoration: none; }
.drawer-group a small { color: var(--muted); font-size: .78rem; }
.drawer-group .menu-h { margin: 16px 0 4px 14px; }
.drawer-group .drawer-all { font-weight: 600; margin-top: 8px; }
.drawer-group > :last-child { margin-bottom: 14px; }
.drawer-nav a[aria-current] { color: var(--link); }
/* five links plus the button: tighter gaps, then the short button label, before the drawer takes over at 900px */
@media (max-width: 1100px) { .nav { gap: 20px; } }
@media (max-width: 1000px) { .hdr .btn .long { display: none; } .hdr .btn .short { display: inline; } }
@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }
  .hdr-in { min-height: 64px; }
  .nav { display: none; }
  .drawer { display: block; }
  .hdr .btn .long { display: none; }
  .hdr .btn .short { display: inline; }
}

/* ---------- cards (theme.md: no pure white on beige) ---------- */
.card {
  background: var(--ivory); border: 1px solid #e5d9bc; border-radius: 18px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 12px 32px rgba(75, 60, 25, .07);
  transition: transform .22s, box-shadow .22s, border-color .22s; position: relative;
}
a.card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
a.card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), var(--shadow-pop); border-color: var(--gold-soft); }
.keyline::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--gold), var(--gold-deep)); }
.keyline:nth-child(even)::after { background: linear-gradient(180deg, var(--burgundy-soft), var(--burgundy)); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }
@media (min-width: 561px) and (max-width: 860px) {
  .grid-3 > .app:last-child:nth-child(odd), .grid-3 > .cat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid-3 > .cat:last-child:nth-child(odd) { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .grid-3 > .cat:last-child:nth-child(odd) .pc-media { height: 100%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid #e8dec4; }
  .grid-3 > .cat:last-child:nth-child(odd) .pc-media img { max-height: 200px; }
}

/* product card */
.pc-media { aspect-ratio: 4 / 3; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 22px; background: radial-gradient(120% 110% at 50% 25%, #fffef9, #efe5cd); border-bottom: 1px solid #e8dec4; }
.pc-media img { height: 100%; max-height: none; width: auto; max-width: 88%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(60, 45, 15, .16)); transition: transform .3s; }
a.card:hover .pc-media img { transform: scale(1.03); }
.pc-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pc-body h3 { font-size: 1.14rem; }
.pc-body .art { font-size: .78rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.pc-body .pc-note { font-size: .74rem; color: var(--muted); margin-top: -4px; }
.pc-body p { font-size: .86rem; color: var(--muted); }
.pc-body .link { margin-top: auto; padding-top: 6px; font-size: .88rem; }

/* feature split */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.split > * { min-width: 0; }
.split .figure-img { max-height: 620px; width: auto; margin: 0 auto; }
.split.flip > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }
.split h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: 16px; }
.split p { margin-bottom: 14px; }
.figure-img { filter: drop-shadow(0 22px 30px rgba(50, 40, 15, .16)); }

/* applications */
.app { padding: 28px 26px; }
.app h3 { font-size: 1.18rem; margin-bottom: 8px; }
.app p { font-size: .88rem; color: var(--muted); }
.app .ic { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(140deg, var(--gold-soft), #fffdf6); box-shadow: inset 0 0 0 1px #e5d9bc; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--gold-deep); }
.app .ic svg { width: 22px; height: 22px; }

/* dark band */
.dark { background: var(--forest-deep); color: var(--dark-body); }
.dark .eyebrow { color: var(--gold-lift); }
.dark h2 { color: var(--dark-ink); }
.dark .rule { background: var(--gold-lift); }
.dark-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.dark-fact { border: 1px solid rgba(238, 240, 226, .16); border-radius: 14px; padding: 18px 20px; }
.dark-fact strong { display: block; font-family: var(--display); font-weight: 500; font-size: 1.3rem; color: var(--gold-lift); margin-bottom: 3px; }
.dark-fact span { font-size: .8rem; line-height: 1.5; display: block; }
.dark .stage { background: radial-gradient(120% 90% at 50% 30%, #fbf6e9, #e9dfc6); border-color: rgba(238,240,226,.2); padding: clamp(20px, 3vw, 36px); }
.dark .stage img { width: 100%; }

/* swatches */
.swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; }
.swatches span { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 4px 10px rgba(40, 30, 10, .12); }
@media (max-width: 560px) { .swatches { gap: 7px; } }

/* FAQ */
.faq { max-width: 800px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 4px; font-family: var(--display); font-size: 1.16rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; content: "+" / ""; color: var(--gold-deep); font: 400 1.5rem/1 var(--sans); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--link); }
.faq details p { padding: 0 4px 22px; color: var(--body-ink); font-size: .96rem; max-width: 68ch; }

/* gold CTA band (theme.md: espresso button on gold) */
.cta { background: var(--gold); text-align: center; }
.cta .eyebrow { color: #4d3508; }
.cta h2 { color: #2a2110; font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 0 auto 14px; max-width: 20ch; }
.cta p:where(:not(.eyebrow)) { color: #3d2f12; margin: 0 auto 30px; max-width: 54ch; }
.cta .cta-alt { margin: 18px auto 0; font-size: .92rem; }
.cta .cta-alt a { color: #2a2110; font-weight: 600; text-underline-offset: 3px; }
.cta .btn-row { justify-content: center; }
.cta .btn-ghost-dark { border-color: rgba(42, 33, 16, .35); color: #2a2110; background: transparent; }
.cta .btn-ghost-dark:hover { border-color: #2a2110; }

/* page header (inner pages) */
.page-hd { padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); }
.page-hd h1 { font-size: clamp(2.2rem, 4.8vw, 3.4rem); margin-bottom: 16px; max-width: 18ch; }
.crumb { font-size: .82rem; color: var(--muted); margin-bottom: 22px; }
.crumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--oat-line); }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--link); }
.crumb li:last-child { color: var(--ink); font-weight: 600; }

/* product detail */
.pd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; padding-bottom: var(--section); }
.pd .stage { aspect-ratio: 1; }
.pd .stage img { max-height: 78%; width: auto; max-width: 82%; filter: drop-shadow(0 22px 26px rgba(60, 45, 15, .2)); }
.pd h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 10px 0 16px; }
.pd .lede { margin-bottom: 26px; }
.specs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin-bottom: 28px; }
.specs div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.specs div:nth-child(odd) { padding-right: 16px; }
.specs > div:last-child:nth-child(odd) { grid-column: 1 / -1; padding-right: 0; }
.specs dt { color: var(--sage); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.specs dd { font-family: var(--display); font-size: 1.12rem; color: var(--ink); }
.uses { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 6px; }
.uses li { display: flex; gap: 12px; align-items: baseline; font-size: .98rem; }
.uses li::before { content: "—"; content: "—" / ""; color: var(--gold-deep); font-weight: 700; }
.img-note { margin-top: 12px; font-size: .78rem; color: var(--muted); }
@media (max-width: 860px) { .pd { grid-template-columns: 1fr; } .pd .stage { aspect-ratio: 4 / 3; } }

/* comparison table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 720px; }
@media (min-width: 740px) { table { min-width: 0; } }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); font-weight: 700; background: #fbf7ec; }
tr:last-child td { border-bottom: 0; }
td a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); }
td a:hover { color: var(--link); }

.group-hd { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 24px; }
.group-hd h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.group-hd p:where(:not(.eyebrow)) { color: var(--muted); max-width: 56ch; font-size: .95rem; }
.group + .group { margin-top: clamp(56px, 7vw, 88px); }
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* contact */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .contact-cards { grid-template-columns: 1fr; } }
.cc { padding: 28px 26px; }
.cc h2, .cc h3 { font-size: 1.25rem; margin-bottom: 8px; }
.cc p:where(:not(.eyebrow)) { font-size: .92rem; color: var(--muted); margin-bottom: 18px; }
.cc .big { font-family: var(--display); font-size: 1.3rem; color: var(--ink); margin-bottom: 18px; word-break: break-word; }
.checklist { list-style: none; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.4'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* footer */
.ft { background: var(--espresso); color: #cfc6b5; padding: 64px 0 28px; }
.ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 36px 28px; }
.ft .brand { color: #fff; }
.ft .lead { color: #a89e8b; font-size: .9rem; margin-top: 14px; max-width: 34ch; }
.ft h2 { color: var(--gold); font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.ft ul { list-style: none; padding: 0; }
.ft li { margin-bottom: 9px; }
.ft a { color: #c8bfad; font-size: .9rem; text-decoration: none; transition: color .16s; }
.ft a:hover { color: #fff; }
.ft-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 44px; padding-top: 22px; color: #a89e8b; font-size: .82rem; }
@media (max-width: 1024px) { .ft-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } .ft-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .ft-grid { grid-template-columns: 1fr 1fr; } }

/* reveal-on-scroll: content is visible by default; site.js only adds the flourish */
.rv.pre { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.rv.pre.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .rv.pre { opacity: 1; transform: none; }
}

/* Contact-page topic buttons that enquiry links jump to */
[id^="topic-"] { scroll-margin-top: 96px; }

@media print {
  .rv.pre { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* =====================================================================
   HOME — the shade is the colour scheme; the blocks come from the SRT pack
   (white card, a band of colour, a white roundel, black type).
   ===================================================================== */
.home {
  --paper: #faf8f4; --ink: #15130f; --body-ink: #45423c; --muted: #6d6a63; --line: #e6e1d6; --card: #fffdf9; --sage: #6d6a63;
  --x-ink: #15130f; --x-body: #3a3732; --x-muted: #6a665e; --x-line: #e6e1d6; --x-cream: #fff8ea; --x-stone: #f0ece2;
  --x-saffron: #f5a31f; --x-amber: #8a5d0c; --x-green: #1f5138; --x-green-deep: #173f2b;
  --x-serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* the type scale: one display face for the big headings, one sans for everything else at 400 / 500 / 600 */
  --fs-h1: clamp(2.7rem, 5.8vw, 5.6rem); --fs-h2: clamp(2.05rem, 3.6vw, 3.25rem); --fs-h3: clamp(1.75rem, 2.3vw, 2.3rem);
  --fs-sub: 1.125rem; --fs-lede: clamp(1.08rem, 1.3vw, 1.22rem); --fs-body: 1.0625rem; --fs-small: .95rem; --fs-label: .74rem;
  background: var(--paper); color: var(--x-body);
  font-size: var(--fs-body); line-height: 1.58; font-feature-settings: "kern" on; font-optical-sizing: auto;
}
:where(.home main) p { font-weight: 400; }
:where(.home main) h3 { font: 600 var(--fs-sub)/1.3 var(--sans); letter-spacing: -.012em; color: var(--x-ink); }
.home main :is(dd, .x-lens, .x-fr-spec) { font-variant-numeric: tabular-nums; }
.home .hdr { background: rgba(250, 248, 244, .94); border-bottom-color: transparent; }
.home .hdr.scrolled { border-bottom-color: var(--x-line); }
.home .hdr .btn { border-radius: 999px; padding: 12px 20px; font-weight: 600; }
.home .hdr .btn-gold, .home .hdr .btn-wa { background: var(--x-green); color: var(--x-cream); }
.home .hdr .btn-gold:hover, .home .hdr .btn-wa:hover { background: var(--x-green-deep); color: var(--x-cream); }
.home .hdr .btn-wa svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.home main h1, .home main h2 { font-family: var(--x-serif); font-weight: 500; font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; line-height: 1.04; color: var(--x-ink); }
.home main h2 { font-size: var(--fs-h2); }
.x-eyebrow { font: 700 var(--fs-label)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-amber); margin-bottom: 16px; }
.x-row { display: flex; flex-wrap: wrap; gap: 12px; }
.x-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 .95rem/1 var(--sans); letter-spacing: -.005em; padding: 15px 24px; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent; white-space: nowrap; cursor: pointer; transition: transform .16s, background-color .25s, color .25s, border-color .2s; }
.x-btn:hover { transform: translateY(-2px); }
.x-btn svg { width: 18px; height: 18px; flex: none; }
.x-btn-ink { background: var(--x-ink); color: var(--x-cream); }
/* the one action colour: SRT's forest green with cream type; on the green panels it flips to cream. Outlined buttons are the second choice. */
.x-btn-main { background: var(--x-green); color: var(--x-cream); }
.x-btn-main:hover { background: var(--x-green-deep); color: var(--x-cream); }
.x-hero .x-btn-main, .x-cta .x-btn-main, .x-quality .x-btn-main { background: var(--x-cream); color: var(--x-green); }
.x-hero .x-btn-main:hover, .x-cta .x-btn-main:hover, .x-quality .x-btn-main:hover { background: #fff; color: var(--x-green-deep); }
.x-btn-line { border-color: rgba(21, 19, 15, .26); color: var(--x-ink); }
.x-btn-line:hover { border-color: var(--x-ink); }

/* thread that takes any colour: a flat tint, masked to the thread and shaded by a multiply layer; the label and core keep their own colour */
.tc { position: relative; isolation: isolate; width: 100%; aspect-ratio: var(--ar, 606 / 1000); }
.tc > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tc-tint { background: var(--shade); -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
.tc-mult { mix-blend-mode: multiply; }

/* shades as a row of wound tubes */
.x-threads { display: flex; align-items: flex-end; }
.x-threads > * { flex: 1 1 0; min-width: 0; border: 0; padding: 0; position: relative;
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 4px), repeating-linear-gradient(80deg, rgba(0, 0, 0, .13) 0 1px, transparent 1px 4px), linear-gradient(90deg, rgba(0, 0, 0, .24), rgba(255, 255, 255, .16) 34%, rgba(0, 0, 0, .28)), var(--c); }

.x-threads-static > span { height: 100%; }

/* ---------- hero: one panel in the visitor's shade; the pack carries the name ---------- */
.x-hero {
  --on: #fff8ea; --on-soft: rgba(255, 248, 234, .84); --on-line: rgba(255, 248, 234, .36);
  --hero: #1f5138;
  margin: 4px 12px 0; border-radius: 28px; background: var(--hero); color: var(--on); position: relative; overflow: hidden;
}
.x-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(44% 60% at 74% 42%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 66%), radial-gradient(120% 80% at 50% 120%, rgba(0, 0, 0, .26), rgba(0, 0, 0, 0) 62%); }
.x-hero-in { position: relative; max-width: 1320px; margin: 0 auto; padding: clamp(36px, 4.6vw, 72px) clamp(22px, 5vw, 76px) clamp(26px, 3vw, 44px);
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: clamp(20px, 4vw, 60px); align-items: center;
  min-height: min(calc(100vh - 320px), 480px); min-height: min(calc(100svh - 320px), 480px); }
.x-hero-copy { min-width: 0; }
.x-hero .x-eyebrow { color: var(--x-saffron); }
.home main .x-hero h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: -.025em; color: var(--on); margin-bottom: clamp(18px, 2.2vw, 28px); max-width: 12ch; }
.home main .x-hero h1 em { font-style: italic; white-space: nowrap; color: inherit; }
.x-lede { font-size: var(--fs-lede); line-height: 1.5; font-weight: 400; max-width: 46ch; color: var(--on-soft); margin-bottom: clamp(22px, 2.6vw, 32px); }
.x-hero .x-btn { transition: transform .16s; }
.x-btn-on { background: var(--on); color: var(--hero); }
.x-btn-ghost { border-color: var(--on-line); color: var(--on); }
.x-btn-ghost:hover { border-color: var(--on); }
/* the hero group: cones standing on one floor, largest in front, the loose ones a step back */
.x-hero-stage { position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 1 / .94; }
.x-hc { position: absolute; left: var(--x); bottom: var(--b); height: var(--h); transform: translateX(-50%); }
.x-hc .tc { width: auto; height: 100%; }
.x-hc-back { filter: brightness(.93); }
.x-ht { position: absolute; left: 9%; bottom: .5%; width: 42%; transform: rotate(-4deg); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4)) drop-shadow(8px 12px 10px rgba(0, 0, 0, .3)); }
.x-wallbar { position: relative; }
.x-rail-label { max-width: 1320px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 76px) 16px; display: flex; align-items: baseline; gap: 14px; font: 600 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-soft); }
.x-rail-label em { margin-left: auto; font: 400 .76rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; text-align: right; }
/* the shade wall: a row of thread tubes standing flush, just below the foot of the panel; the chosen one rises */
.x-wallbar .x-threads { height: clamp(56px, 5.2vw, 76px); padding: 0 clamp(8px, 1.6vw, 26px); align-items: stretch; }
.x-wallbar .x-threads button { background: none; cursor: pointer; }
.x-wallbar .x-threads button:hover { z-index: 1; }
.x-wallbar .x-threads .tc { --shade: var(--c); --mask: url(/images/cones/cone-t-mask.webp); position: absolute; left: 0; top: 0; width: 100%; transform: translateY(0); transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.x-wallbar .x-threads button:hover .tc { transform: translateY(-5%); }
.x-wallbar .x-threads button[aria-pressed="true"] .tc { transform: translateY(-12%); }
.x-wallbar .x-threads button:focus-visible { outline: 2px solid var(--on); outline-offset: -3px; border-radius: 6px; }

/* ---------- under the hero: four plain facts on a quiet strip ---------- */
.x-facts { margin: 0 12px; border-bottom: 1px solid var(--x-line); color: var(--x-muted); }
.x-facts-in { max-width: 1320px; margin: 0 auto; padding: clamp(18px, 2.2vw, 28px) clamp(22px, 5vw, 76px); display: grid; grid-template-columns: .9fr 1.4fr .9fr 1fr; }
.x-facts-in > div { padding: 2px 0 2px clamp(18px, 2.6vw, 40px); border-left: 1px solid var(--x-line); }
.x-facts-in > div:first-child { padding-left: 0; border-left: 0; }
.x-facts dt { font: 600 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--x-amber); margin-bottom: 8px; }
.x-facts dd { margin: 0; }
.x-fv { font: 600 clamp(1.1rem, 1.35vw, 1.3rem)/1.2 var(--sans); letter-spacing: -.02em; color: var(--x-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.x-fs { font-size: .88rem; line-height: 1.4; margin-top: 4px !important; max-width: 28ch; }

/* ---------- range, round three: the picture on top of each tile, the lengths after ---------- */
.x-btn-xl { padding: 20px 32px; font-size: 1.06rem; }
.x-btn-cream { background: var(--x-cream); color: var(--x-ink); }
.x-panels-top .x-panel { border-radius: 24px; }
.x-shot-top { margin: 0; padding: clamp(18px, 2.4vw, 34px) clamp(12px, 1.6vw, 24px) 0; }
.x-shot-top img { display: block; width: 100%; height: auto; }
.x-caps2 { position: relative; height: 20px; margin-top: 4px; }
.x-caps2 span { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); font: 600 .78rem/1 var(--sans); color: var(--x-body); white-space: nowrap; }
.x-panels-top .x-pbody { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.4vw, 32px) clamp(24px, 3vw, 48px) clamp(28px, 3vw, 44px); border-top: 1px solid var(--x-line); margin-top: clamp(14px, 1.6vw, 22px); }
.x-panels-top .x-pbody h3 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
.x-tile-btn { margin-top: auto; width: 100%; }
.x-panels-top .x-specs { margin-bottom: 24px; }
.x-panels-top .x-specs > div { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0 15px; }
.x-wide { max-width: 1320px; margin: 0 auto; padding: 0 clamp(10px, 4vw, 64px); }
.x-range-cta { display: grid; justify-items: center; text-align: center; gap: 12px; margin-top: clamp(30px, 3.6vw, 48px); }
.x-range-cta > p:not(.x-note) { font-size: 1rem; color: var(--x-body); }
.x-range-cta .x-note { margin-top: 4px; }
.x-range-cta-quiet { margin-top: clamp(22px, 2.6vw, 34px); }
.x-head-cta > div:last-child { display: grid; justify-items: start; gap: 20px; padding-bottom: 6px; }
.x-head-cta > div:last-child p { margin: 0; }
.x-head-cta .x-btn svg { width: 18px; height: 18px; }
.x-range-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; padding: clamp(22px, 2.6vw, 34px) clamp(24px, 3.4vw, 48px); border-radius: 24px; background: var(--x-ink); color: var(--x-cream); text-decoration: none; transition: transform .16s; }
.x-range-bar:hover { transform: translateY(-2px); }
.x-range-bar b { display: block; font: 400 clamp(1.6rem, 2.6vw, 2.3rem)/1.1 var(--x-serif); letter-spacing: -.02em; }
.x-range-bar small { display: block; margin-top: 6px; font-size: .95rem; color: rgba(255, 248, 234, .7); }
.x-range-bar + .x-note { margin-top: 14px; }

/* ---------- colours, round three: a seamless indicative wheel ---------- */
.x-disc2 { position: relative; width: min(100%, 430px); aspect-ratio: 1; border-radius: 50%; background: var(--wheel); box-shadow: 0 1px 2px rgba(40, 30, 10, .08), 0 30px 60px -30px rgba(40, 30, 10, .3); }
.x-disc2::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(250, 248, 244, 0) 70%, rgba(250, 248, 244, .14) 100%); pointer-events: none; }
.x-disc2::before { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: #faf8f4; box-shadow: 0 0 0 10px rgba(250, 248, 244, .55), inset 0 1px 3px rgba(0, 0, 0, .06); z-index: 1; }
.x-disc2 .x-wheel-core { position: absolute; inset: 30%; display: grid; place-content: center; justify-items: center; text-align: center; pointer-events: none; z-index: 2; }
.x-disc2-thread { box-shadow: 0 1px 2px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(0, 0, 0, .08), 0 24px 50px -24px rgba(40, 30, 10, .35); }
.x-neutral-bar { display: block; width: 72px; height: 6px; margin-top: 14px; border-radius: 3px; background: linear-gradient(90deg, #f3efe6, #cfc9bd, #948f86, #5b5853, #26241f); }
.x-neutral-lbl { display: block; margin-top: 7px; font: 400 .72rem/1.3 var(--sans); font-style: normal; color: var(--x-muted); max-width: 16ch; }
.x-disc2[data-picker] { cursor: crosshair; touch-action: none; }
.x-wheel-core .x-pick-sw { display: none; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .18); }
.x-wheel-core .x-pick-sw.on { display: block; }

/* ---------- range, round four: condensed tiles, the lengths four ways ---------- */
.x-panels-l .x-pbody { padding-bottom: clamp(24px, 2.6vw, 36px); }
.x-panels-l .x-pbody > p:where(:not(.x-eyebrow)), .x-row-tile .x-pbody > p:where(:not(.x-eyebrow)) { font-size: var(--fs-body); line-height: 1.55; margin-bottom: 0; max-width: 46ch; }
.x-sl-tag { flex: none; display: inline-block; min-width: 4.6rem; font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); }
/* L1 spec lines */
.x-sls { margin-top: 22px; border-top: 1px solid var(--x-line); }
.x-sl { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--x-line); }
.x-sl-items { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 4px; }
.x-sl-items a { color: var(--x-ink); font: 600 1.05rem/1.3 var(--sans); text-decoration: none; background: linear-gradient(var(--x-saffron), var(--x-saffron)) 0 100% / 0 2px no-repeat; transition: background-size .2s, color .2s; font-variant-numeric: tabular-nums; }
.x-sl-items a:hover { background-size: 100% 2px; }
.x-sl-items small { margin-left: 5px; font: 400 .76rem/1 var(--sans); color: var(--x-muted); }
.x-sl-items i { margin: 0 10px; font-style: normal; color: #cfc8ba; }
/* L2 length scale */
.x-scs { margin-top: 20px; display: grid; gap: 6px; }
.x-sc-row { display: grid; grid-template-columns: 3.9rem minmax(0, 1fr); gap: 16px; align-items: start; }
.x-sc-row .x-sl-tag { margin-top: -1px; }
.x-sc-track { position: relative; height: 50px; margin: 0 4px; }
.x-sc-track::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: rgba(21, 19, 15, .2); }
.x-sc-pt { position: absolute; left: var(--t); top: 0; transform: translateX(-50%); display: grid; justify-items: center; text-align: center; white-space: nowrap; }
.x-sc-pt::before { content: ""; width: 11px; height: 11px; margin-bottom: 7px; border-radius: 50%; background: var(--x-ink); box-shadow: 0 0 0 3px #fff; }
.x-sc-pt.l { transform: translateX(-5px); justify-items: start; text-align: left; }
.x-sc-pt.r { transform: translateX(calc(-100% + 5px)); justify-items: end; text-align: right; }
.x-sc-pt a { color: var(--x-ink); text-decoration: none; }
.x-sc-pt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.x-sc-pt b { font: 600 .88rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.x-sc-pt small { margin-top: 4px; font: 400 .72rem/1 var(--sans); color: var(--x-muted); }
.x-sc-pt small a { color: inherit; }
.x-sc-more { margin-top: 6px; font-size: .9rem; }
.x-sc-more a { color: var(--x-ink); font-weight: 600; }
/* L3 one row */
.x-cr { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.x-cr-c { display: inline-flex; align-items: baseline; gap: 5px; padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(21, 19, 15, .24); color: var(--x-ink); font: 600 .88rem/1 var(--sans); text-decoration: none; font-variant-numeric: tabular-nums; transition: transform .15s, box-shadow .15s; }
.x-cr-c:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -6px rgba(21, 19, 15, .3); }
.x-cr-c.f { background: var(--x-ink); border-color: var(--x-ink); color: var(--x-cream); }
.x-cr-c.d { border-style: dashed; }
.x-cr-c small { font-weight: 400; font-size: .72rem; opacity: .68; }
.x-cr-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: .8rem; color: var(--x-muted); }
.x-cr-key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; border: 1px solid rgba(21, 19, 15, .4); vertical-align: -1px; }
.x-cr-key i.f { background: var(--x-ink); border-color: var(--x-ink); }
/* L4 wide tiles */
.x-rows { display: grid; gap: 16px; }
.x-row-tile { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 1px 2px rgba(21, 19, 15, .05), 0 30px 60px -40px rgba(21, 19, 15, .28); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.x-row-tile:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(21, 19, 15, .05), 0 36px 70px -40px rgba(21, 19, 15, .34); }
.x-row-tile:nth-child(even) .x-scene { order: 2; }
.x-row-tile:nth-child(even) .x-shot-top { order: 2; }
.x-row-tile .x-shot-top { padding: clamp(20px, 2.4vw, 34px); }
.x-row-tile .x-pbody { padding: clamp(24px, 3vw, 48px); }
.x-row-tile .x-pbody h3 { font: 500 var(--fs-h3)/1.05 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); margin-bottom: 10px; }
.x-row-tile .x-eyebrow { margin-bottom: 12px; }
.x-note-range { margin-top: 14px; }
.x-row-tile .x-pbody h3 a { color: inherit; text-decoration: none; }

/* ---------- colours, round four: the pure wheel, condensed words, four layouts ---------- */
.x-kh h2 { font: 500 var(--fs-h2)/1.04 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); margin: 0 0 14px; }
.x-k-sub { font-size: var(--fs-sub); line-height: 1.55; color: var(--x-body); max-width: 50ch; }
.x-ways3 { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: w; }
.x-ways3[start="3"] { counter-reset: w 2; }
.x-k-way { counter-increment: w; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.x-k-way::before { content: counter(w); grid-row: span 2; align-self: start; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(21, 19, 15, .22); display: grid; place-items: center; font: 600 .76rem/1 var(--sans); color: var(--x-ink); }
.x-k-way b { font: 600 var(--fs-body)/1.3 var(--sans); color: var(--x-ink); }
.x-k-way span { font-size: var(--fs-small); line-height: 1.5; color: var(--x-body); }
.x-colours .x-kh + .x-row, .x-kh .x-row { margin-top: 24px; }
.x-colours [class^="x-k"] > .x-note, .x-kh .x-note { margin-top: 14px; }
/* K1 centred */
.x-k1 { display: grid; justify-items: center; text-align: center; }
.x-k1 .x-kh { display: grid; justify-items: center; }
.x-k1 .x-k-sub, .x-k3 .x-k-sub { max-width: 62ch; }
.x-k1 .x-disc2 { width: min(100%, 360px); margin-top: clamp(26px, 3vw, 40px); }
.x-ways3-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: 920px; margin-top: clamp(28px, 3vw, 44px); text-align: left; }
.x-k1 > .x-row { justify-content: center; margin-top: 28px; }
/* K2 wheel and words */
.x-k2 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.x-k2 .x-disc2 { width: min(100%, 400px); justify-self: center; }
/* K3 around the wheel */
.x-k3 { display: grid; justify-items: center; text-align: center; }
.x-k3 .x-kh { display: grid; justify-items: center; }
.x-k3-grid { display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 40vw) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 44px); width: 100%; margin-top: clamp(26px, 3vw, 40px); }
.x-k3-grid .x-disc2 { width: 100%; }
.x-k3-grid .x-ways3 { margin: 0; gap: 34px; }
.x-k3-l { text-align: right; }
.x-k3-l .x-k-way { grid-template-columns: minmax(0, 1fr) 28px; }
.x-k3-l .x-k-way::before { grid-column: 2; grid-row: 1 / span 2; }
.x-k3-l .x-k-way b, .x-k3-l .x-k-way span { grid-column: 1; }
.x-k3-r { text-align: left; }
.x-k3 .x-k-way { position: relative; }
.x-k3-l .x-k-way::after, .x-k3-r .x-k-way::after { content: ""; position: absolute; top: 13px; width: clamp(14px, 2.4vw, 36px); height: 1px; background: rgba(21, 19, 15, .25); }
.x-k3-l .x-k-way::after { right: calc(-1 * clamp(14px, 2.4vw, 36px) - 6px); }
.x-k3-r .x-k-way::after { left: calc(-1 * clamp(14px, 2.4vw, 36px) - 6px); }
.x-k3 > .x-row { justify-content: center; margin-top: 28px; }
/* K4 edge of the card */
.x-k4 { position: relative; overflow: hidden; background: #fff; border: 1px solid rgba(21, 19, 15, .08); border-radius: 28px; padding: clamp(32px, 4.4vw, 64px); min-height: 480px; display: flex; align-items: center; }
.x-k4 .x-kh { position: relative; z-index: 1; max-width: min(520px, 50%); }
.x-k4 .x-disc2 { position: absolute; right: calc(clamp(380px, 40vw, 540px) * -.22); top: 50%; width: clamp(380px, 40vw, 540px); transform: translateY(-50%); }
.x-k4 .x-disc2::before { background: #fff; }

/* ---------- section 2 scene: each piece its own link; they come in one after another, and light up from the spec lines ---------- */
.x-scene { margin: 0; padding: clamp(18px, 2.4vw, 32px) clamp(14px, 2vw, 28px) 10px; background: #f4f0e7; display: grid; gap: 2px; align-self: stretch; align-content: center; }
.x-sr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; justify-items: center; gap: 3%; }
.x-sr-boxes { height: clamp(110px, 11.5vw, 170px); }
.x-sr-tubes { height: clamp(34px, 3.8vw, 56px); margin-top: 8px; }
.x-sr-cones { height: clamp(190px, 19.5vw, 285px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.x-scene-cones .x-caps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.x-it .po-cone { height: 100%; width: auto; max-width: 100%; display: block; }
.x-it { display: flex; align-items: flex-end; justify-content: center; height: var(--h); max-width: 100%; transition: opacity .25s, transform .3s cubic-bezier(.2, .7, .2, 1), filter .25s; }
.x-it img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.x-sr-tubes .x-it { height: 100%; width: 64%; }
.x-sr-tubes .x-it img { width: 100%; height: auto; max-height: 100%; }
.x-caps3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3%; text-align: center; font: 600 .8rem/1 var(--sans); color: var(--x-body); padding: 10px 0 4px; font-variant-numeric: tabular-nums; }
.x-scene.pre .x-it { opacity: 0; transform: translateY(18px); }
.x-scene.go .x-it { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--i) * 70ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 70ms); }
.x-scene.done .x-it { transition: opacity .25s, transform .3s cubic-bezier(.2, .7, .2, 1), filter .25s; }
@media (hover: hover) and (pointer: fine) {
  :is(.x-row-tile, .ph-sec-in):has(a[data-pic]:hover) .x-it { opacity: .28; filter: saturate(.4); }
  :is(.x-row-tile, .ph-sec-in):has(a[data-pic="t800"]:hover) .x-it[data-pic="t800"], :is(.x-row-tile, .ph-sec-in):has(a[data-pic="t400"]:hover) .x-it[data-pic="t400"], :is(.x-row-tile, .ph-sec-in):has(a[data-pic="t300"]:hover) .x-it[data-pic="t300"], :is(.x-row-tile, .ph-sec-in):has(a[data-pic="t1000"]:hover) .x-it[data-pic="t1000"],
  :is(.x-row-tile, .ph-sec-in):has(a[data-pic="c10000"]:hover) .x-it[data-pic="c10000"], :is(.x-row-tile, .ph-sec-in):has(a[data-pic="c5000"]:hover) .x-it[data-pic="c5000"], :is(.x-row-tile, .ph-sec-in):has(a[data-pic="c3000"]:hover) .x-it[data-pic="c3000"], :is(.x-row-tile, .ph-sec-in):has(a[data-pic="c1000"]:hover) .x-it[data-pic="c1000"] { opacity: 1; filter: none; transform: translateY(-6px); }
  :is(.x-row-tile, .ph-sec-in):has(.x-it[data-pic="t800"]:hover) .x-sl-items a[data-pic="t800"], :is(.x-row-tile, .ph-sec-in):has(.x-it[data-pic="t400"]:hover) .x-sl-items a[data-pic="t400"], :is(.x-row-tile, .ph-sec-in):has(.x-it[data-pic="t300"]:hover) .x-sl-items a[data-pic="t300"], :is(.x-row-tile, .ph-sec-in):has(.x-it[data-pic="t1000"]:hover) .x-sl-items a[data-pic="t1000"],
  :is(.x-row-tile, .ph-sec-in):has(.x-it[data-pic="c10000"]:hover) .x-sl-items a[data-pic="c10000"], :is(.x-row-tile, .ph-sec-in):has(.x-it[data-pic="c5000"]:hover) .x-sl-items a[data-pic="c5000"], :is(.x-row-tile, .ph-sec-in):has(.x-it[data-pic="c3000"]:hover) .x-sl-items a[data-pic="c3000"], :is(.x-row-tile, .ph-sec-in):has(.x-it[data-pic="c1000"]:hover) .x-sl-items a[data-pic="c1000"] { background-size: 100% 2px; color: var(--x-amber); }
}

/* ---------- about: the unit behind the thread ---------- */
.x-about { padding-top: 0; }
.x-about .x-head-row { align-items: start; }
.x-link { display: inline-block; margin-top: 20px; font: 600 var(--fs-body)/1 var(--sans); color: var(--x-ink); text-decoration: none; border-bottom: 1.5px solid var(--x-saffron); padding-bottom: 3px; }
.x-link:hover { border-color: var(--x-ink); }
.x-about-photos { list-style: none; margin: clamp(30px, 3.6vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.x-photo-well { aspect-ratio: 4 / 3; border-radius: 20px; background: var(--x-stone); border: 1px dashed rgba(21, 19, 15, .22); display: grid; place-content: center; justify-items: center; text-align: center; padding: 20px; color: var(--x-muted); }
.x-photo-well svg { width: 30px; height: 30px; margin-bottom: 12px; opacity: .6; }
.x-photo-well b { font: 600 var(--fs-body)/1.3 var(--sans); color: var(--x-ink); }
.x-photo-well span { display: block; margin-top: 4px; font-size: .84rem; line-height: 1.45; max-width: 22ch; }

/* ---------- range option B: one shelf, in scale ---------- */
.x-shelf { margin: 0 12px; background: #fff; border: 1px solid rgba(21, 19, 15, .08); border-radius: 28px; overflow: hidden; }
.x-shelf-scroll { overflow-x: auto; scrollbar-width: thin; }
.x-shelf-in { position: relative; min-width: 1100px; padding: clamp(10px, 1.4vw, 24px) clamp(10px, 1.4vw, 24px) 54px; }
.x-shelf-in img { display: block; width: 100%; height: auto; }
.x-rule { position: absolute; left: clamp(10px, 1.4vw, 24px); right: clamp(10px, 1.4vw, 24px); bottom: 34px; border-top: 1px solid rgba(21, 19, 15, .3); }
.x-rule span { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); padding-top: 10px; font: 600 .74rem/1 var(--sans); color: var(--x-body); white-space: nowrap; }
.x-rule span::before { content: ""; position: absolute; left: 50%; top: -1px; width: 1px; height: 6px; background: rgba(21, 19, 15, .45); }
.x-rule-lbl { position: absolute; left: clamp(10px, 1.4vw, 24px); right: clamp(10px, 1.4vw, 24px); bottom: 10px; }
.x-rule-lbl span { position: absolute; left: var(--x); transform: translateX(-50%); font: 600 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--x-muted); white-space: nowrap; }
.x-shelf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); margin-top: clamp(30px, 4vw, 52px); }
.x-shelf-cols h3 { font: 400 clamp(2rem, 3vw, 2.8rem)/1 var(--x-serif); letter-spacing: -.025em; color: var(--x-ink); margin-bottom: 12px; }
.x-shelf-cols h3 a { color: inherit; text-decoration: none; }
.x-shelf-cols > div > p:where(:not(.x-eyebrow)) { font-size: 1.02rem; line-height: 1.5; max-width: 50ch; }
.x-shelf-cols .x-specs { --t-line: var(--x-line); --t-mute: var(--x-muted); }
.x-shelf-cols .x-pill { --t-edge: rgba(21, 19, 15, .22); --t-ink: var(--x-ink); --t-bg: #fff; --t-mute: var(--x-muted); }

/* ---------- range option C: the index ---------- */
.x-index { --cols: 7rem 7rem 8rem 11rem minmax(0, 1fr) 2rem; }
.x-ix-head { display: grid; grid-template-columns: var(--cols); gap: 16px; padding: 0 16px 10px; font: 600 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--x-muted); border-bottom: 1px solid var(--x-ink); }
.x-ix-group { margin-top: 34px; }
.x-ix-group h3 { display: flex; align-items: baseline; gap: 14px; font: 400 clamp(1.8rem, 2.6vw, 2.4rem)/1 var(--x-serif); letter-spacing: -.02em; color: var(--x-ink); padding: 0 16px 14px; }
.x-ix-group h3 small { font: 400 .95rem/1 var(--sans); color: var(--x-muted); }
.x-ix { list-style: none; margin: 0; padding: 0; }
.x-ix li + li { border-top: 1px solid var(--x-line); }
.x-ix li:first-child { border-top: 1px solid var(--x-line); }
.x-ix a { display: grid; grid-template-columns: var(--cols); gap: 16px; align-items: baseline; padding: 15px 16px; text-decoration: none; color: var(--x-body); border-radius: 10px; transition: background-color .15s; }
.x-ix a:hover { background: #fff; }
.x-ix-art { font: 600 .9rem/1.2 var(--sans); color: var(--x-ink); }
.x-ix-len { font: 400 1.5rem/1 var(--x-serif); letter-spacing: -.02em; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.x-ix-ply, .x-ix-pack, .x-ix-use { font-size: .92rem; line-height: 1.35; }
.x-ix-pack i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c); margin-right: 8px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.x-ix-go { text-align: right; color: var(--x-muted); transition: transform .15s, color .15s; }
.x-ix a:hover .x-ix-go { transform: translateX(4px); color: var(--x-ink); }

/* ---------- range option D: pick a format ---------- */
.x-tabs { position: relative; }
.x-tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.x-tabs-bar { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--x-stone); margin-bottom: clamp(24px, 3vw, 40px); }
.x-tabs-bar label { padding: 11px 22px; border-radius: 999px; font: 600 .95rem/1 var(--sans); color: var(--x-body); cursor: pointer; transition: background-color .15s, color .15s; }
.x-tab { display: none; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; background: #fff; border: 1px solid rgba(21, 19, 15, .08); border-radius: 28px; padding: clamp(24px, 3vw, 48px); }
.x-tabs input:nth-of-type(1):checked ~ .x-tab-tube, .x-tabs input:nth-of-type(2):checked ~ .x-tab-cone { display: grid; }
.x-tabs input:nth-of-type(1):checked ~ .x-tabs-bar label:nth-of-type(1), .x-tabs input:nth-of-type(2):checked ~ .x-tabs-bar label:nth-of-type(2) { background: var(--x-ink); color: var(--x-cream); }
.x-tabs input:focus-visible ~ .x-tabs-bar { outline: 2px solid var(--x-ink); outline-offset: 3px; }
.x-tab .x-shot { margin: 0; }
.x-tab-text h3 { font: 400 clamp(2.2rem, 3.4vw, 3.2rem)/1 var(--x-serif); letter-spacing: -.025em; color: var(--x-ink); margin-bottom: 12px; }
.x-tab-text h3 a { color: inherit; text-decoration: none; }
.x-tab-text > p:where(:not(.x-eyebrow)) { font-size: 1.02rem; line-height: 1.5; max-width: 50ch; }
.x-tab .x-specs { --t-line: var(--x-line); --t-mute: var(--x-muted); }
.x-tab .x-pill { --t-edge: rgba(21, 19, 15, .22); --t-ink: var(--x-ink); --t-bg: #fff; --t-mute: var(--x-muted); }
.x-tab .x-caps span { color: var(--x-body); }

/* ---------- colours option B: one cone, any shade ---------- */
.x-pick { margin: 0; }
.x-pick-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; background: #fff; border: 1px solid rgba(21, 19, 15, .08); border-radius: 28px; padding: clamp(20px, 2.6vw, 36px); }
.x-pick-cone { width: 100%; max-width: 230px; justify-self: center; }
.x-pick-cone .tc { width: 100%; }
.x-pick-read span { display: block; font: 600 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--x-muted); }
.x-pick-read b { display: block; margin: 8px 0 10px; font: 400 clamp(2.6rem, 4.4vw, 4rem)/1 var(--x-serif); letter-spacing: -.03em; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.x-pick-read small { display: block; font-size: .92rem; line-height: 1.4; color: var(--x-body); max-width: 20ch; }
.x-dots { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.x-dot { aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .15s; }
.x-dot:hover { transform: scale(1.18); }
.x-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--x-ink); }
.x-dot:focus-visible { outline: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--x-ink); }

/* ---------- colours option C: the numbers ---------- */
.x-colours-one { grid-template-columns: minmax(0, 1fr); }
.x-colours-one .x-head { max-width: 720px; }
.x-numwall { margin: clamp(30px, 4vw, 52px) 0 0; }
.x-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.x-tags li { background: var(--c); color: var(--t); padding: 7px 10px; border-radius: 6px; font: 600 .78rem/1 var(--sans); letter-spacing: .01em; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

/* ---------- colours option D: by family ---------- */
.x-fam { margin: clamp(30px, 4vw, 52px) 0 0; }
.x-fam-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--x-line); }
.x-fam-rows li { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--x-line); }
.x-fam-rows h3 { font: 400 1.25rem/1.2 var(--x-serif); letter-spacing: -.01em; color: var(--x-ink); }
.x-fam-strip { display: flex; gap: 6px; }
.x-fam-chip { position: relative; flex: 1 1 0; min-width: 0; height: 44px; border: 0; padding: 0; border-radius: 8px; background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(255, 255, 255, .14) 40%, rgba(0, 0, 0, .18)), var(--c); cursor: pointer; transition: transform .15s; }
.x-fam-chip:hover, .x-fam-chip:focus-visible { transform: translateY(-4px); outline: 0; }
.x-fam-chip::after { content: attr(data-n); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; font: 600 .72rem/1 var(--sans); color: #fff; background: rgba(15, 13, 10, .86); padding: 5px 8px; border-radius: 5px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.x-fam-chip:hover::after, .x-fam-chip:focus-visible::after { opacity: 1; }


/* ---------- sections ---------- */
.x-sec { padding: clamp(72px, 9vw, 124px) 0; }
.x-head { max-width: 720px; margin-bottom: clamp(30px, 4vw, 52px); }
.x-head h2, .x-why h2 { font-size: var(--fs-h2); margin-bottom: 16px; }
.x-head p:where(:not(.x-eyebrow)) { font-size: var(--fs-sub); line-height: 1.55; max-width: 56ch; }
.x-note { margin-top: 16px; font-size: .82rem; color: var(--x-muted); }
.x-note a { color: var(--x-ink); }

/* ---------- section heads that run heading | paragraph ---------- */
.x-head-row { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 80px); align-items: end; }
.x-head-row h2 { margin-bottom: 0; }
.x-head-row > p { padding-bottom: 6px; }

/* ---------- the range: two panels, each a line-up of sizes on a studio backdrop ---------- */
.x-rangesec .x-head { margin-bottom: clamp(28px, 3.6vw, 48px); }
.x-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; max-width: 1320px; margin: 0 auto; padding: 0 clamp(10px, 4vw, 64px); }
/* each tile is one flat colour: the words first, then the products standing on its foot. No floor, no lamp. */
.x-panel { --t-bg: #ffffff; --t-ink: #15130f; --t-soft: rgba(21, 19, 15, .74); --t-mute: rgba(21, 19, 15, .56); --t-line: rgba(21, 19, 15, .12); --t-edge: rgba(21, 19, 15, .22); --t-eye: #8a5d0c;
  border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; background: var(--t-bg); color: var(--t-soft); border: 1px solid rgba(21, 19, 15, .08); }
.x-pbody { padding: clamp(28px, 3.2vw, 52px) clamp(24px, 3.4vw, 56px) 0; }
.x-shot { position: relative; margin: auto 0 0; padding-top: clamp(6px, 1vw, 16px); }
.x-shot img { display: block; width: 100%; height: auto; }
.x-caps span { position: absolute; left: var(--x); bottom: 3.4%; transform: translateX(-50%); font: 600 .8rem/1 var(--sans); letter-spacing: .01em; color: var(--t-soft); white-space: nowrap; }
.x-panel .x-eyebrow { color: var(--t-eye); }
.x-pbody h3 { font: 400 clamp(2.6rem, 4.4vw, 4.2rem)/.95 var(--x-serif); letter-spacing: -.03em; color: var(--t-ink); margin-bottom: 14px; }
.x-pbody h3 a { color: inherit; text-decoration: none; }
.x-pbody > p:where(:not(.x-eyebrow)) { font-size: 1.02rem; line-height: 1.5; max-width: 52ch; }
.x-specs { margin: 24px 0 0; border-top: 1px solid var(--t-line); }
.x-specs > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 8px 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--t-line); }
.x-specs dt { font: 600 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--t-mute); }
.x-specs dd { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.x-pill { display: inline-flex; align-items: baseline; gap: 7px; padding: 10px 15px; border-radius: 999px; border: 1px solid var(--t-edge); color: var(--t-ink); font: 600 .95rem/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.x-pill small { font-weight: 400; font-size: .8rem; color: var(--t-mute); transition: color .15s; }
.x-pill:hover { background: var(--t-ink); border-color: var(--t-ink); color: var(--t-bg); }
.x-pill:hover small { color: var(--t-bg); opacity: .7; }
.x-after { margin-top: 26px; font-size: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.x-after .x-note { margin: 0; }
.x-after a { color: var(--x-ink); font-weight: 600; text-underline-offset: 4px; }

/* ---------- quality: the tube, and what is in it ---------- */
.x-quality { margin: 0 12px; border-radius: 28px; background: #17352a; color: rgba(255, 248, 234, .76); }
.x-quality-in { max-width: 1280px; margin: 0 auto; padding: clamp(64px, 8vw, 116px) var(--pad) clamp(64px, 8vw, 116px); }
.x-quality-head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }
.x-quality .x-eyebrow { color: var(--x-saffron); }
.home main .x-quality h2 { color: var(--x-cream); font-size: var(--fs-h2); margin-bottom: 16px; }
.x-quality-head p:where(:not(.x-eyebrow)) { font-size: var(--fs-sub); line-height: 1.55; }
.x-quality .x-eyebrow { color: var(--x-saffron); }
.x-anatomy { --gap: clamp(18px, 3.4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
.x-anatomy-art img { width: 100%; filter: drop-shadow(0 34px 30px rgba(0, 0, 0, .45)); }
.x-call { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(30px, 4.4vw, 64px); }
.x-call li { position: relative; }
.x-call span { font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .14em; color: var(--x-saffron); }
.x-call h3 { font: 600 var(--fs-sub)/1.3 var(--sans); letter-spacing: -.012em; color: var(--x-cream); margin: 10px 0 6px; }
.x-call p { font-size: var(--fs-small); line-height: 1.55; }
.x-call li::after { content: ""; position: absolute; top: 5px; width: calc(var(--gap) - 14px); height: 1px; background: rgba(255, 248, 234, .34); }
.x-call li::before { content: ""; position: absolute; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--x-saffron); }
.x-call-l { text-align: right; }
.x-call-l li::after { left: calc(100% + 6px); }
.x-call-l li::before { left: calc(100% + var(--gap) - 10px); }
.x-call-r li::after { right: calc(100% + 6px); }
.x-call-r li::before { right: calc(100% + var(--gap) - 10px); }

/* ---------- colours: the shade card, fanned ---------- */
/* the outer blades of the fan (and their name tags) must never widen the page */
.x-colours { overflow: hidden; }
.home main { overflow-x: clip; }
.x-colours-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.x-colours .x-head { margin-bottom: 0; }
.x-colours .x-row { margin-top: 28px; }
.x-ways { list-style: none; padding: 0; margin: 26px 0 0; border-top: 1px solid var(--x-line); counter-reset: way; }
.x-ways li { counter-increment: way; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: 4px; padding: 16px 0 17px; border-bottom: 1px solid var(--x-line); }
.x-ways li::before { content: counter(way); grid-row: 1 / 3; font: 400 1.5rem/1.1 var(--x-serif); color: var(--x-muted); }
.x-ways h3 { font: 600 1.06rem/1.3 var(--sans); letter-spacing: -.008em; color: var(--x-ink); }
.x-ways p { font-size: .98rem; line-height: 1.5; margin-top: 3px; }
/* the colour wheel: chips of wound thread fanned in a ring, like the fan on the shade card's cover */
.x-wheel-wrap { margin: 0; display: grid; justify-items: center; }
.x-wheel { --n: 48; position: relative; width: min(100%, 440px); aspect-ratio: 1; }
.x-chip { --cw: 4.8%; --ch: 21%; --r: -168%; position: absolute; left: 50%; top: 50%; width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2); border: 0; padding: 0; cursor: pointer; border-radius: 50% 50% 46% 46% / 9% 9% 8% 8%;
  transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(var(--r)); transition: transform .22s cubic-bezier(.2, .7, .2, 1);
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .13) 0 1px, rgba(255, 255, 255, 0) 1px 3px), repeating-linear-gradient(180deg, rgba(0, 0, 0, .12) 0 1px, rgba(0, 0, 0, 0) 1px 4px), linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(255, 255, 255, .2) 40%, rgba(0, 0, 0, .26)), var(--c);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.x-chip:hover, .x-chip:focus-visible { transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(var(--r) - 12%)); z-index: 2; outline: 0; }
.x-wheel-60 .x-chip { --cw: 3.9%; --ch: 19%; --r: -186%; }
.x-wheel-2 .x-chip { --cw: 4.4%; --ch: 16%; --r: -248%; }
.x-wheel-2 .x-chip-in { --cw: 3.6%; --ch: 13%; --r: -196%; transform: rotate(calc(var(--i) * 360deg / var(--n2))) translateY(var(--r)); }
.x-wheel-2 .x-chip-in:hover, .x-wheel-2 .x-chip-in:focus-visible { transform: rotate(calc(var(--i) * 360deg / var(--n2))) translateY(calc(var(--r) - 14%)); }
.x-neutrals { display: flex; justify-content: center; gap: 5px; margin-top: 14px; }
.x-neutrals .x-chip, .x-neutrals i { position: static; width: 12px; height: 12px; margin: 0; border-radius: 50%; transform: none !important; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); transition: transform .15s; display: block; }
.x-neutrals .x-chip:hover { transform: scale(1.25) !important; }
.x-wheel-core .x-neutrals { pointer-events: auto; }
/* the fan: the same chips over a half circle, pivoting at the foot */
.x-fan2 { position: relative; width: min(100%, 520px); aspect-ratio: 2 / 1.18; }
.x-fan2 .x-chip { --cw: 3.4%; --ch: 34%; left: 50%; top: auto; bottom: 8%; margin: 0 0 0 calc(var(--cw) / -2); transform-origin: 50% 100%; transform: rotate(calc(-90deg + var(--i) * 180deg / (var(--n) - 1))) translateY(-120%); }
.x-fan2 .x-chip:hover, .x-fan2 .x-chip:focus-visible { transform: rotate(calc(-90deg + var(--i) * 180deg / (var(--n) - 1))) translateY(-134%); }
.x-fan2 .x-wheel-core { inset: auto 20% 0; }
/* the disc: one unbroken wheel of the card's colours, a paper centre */
.x-disc { position: relative; width: min(100%, 420px); aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .1) 0 .4deg, rgba(0, 0, 0, .08) .4deg .8deg, rgba(0, 0, 0, 0) .8deg 1.6deg), var(--wheel); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.x-disc::before { content: ""; position: absolute; inset: 24%; border-radius: 50%; background: #faf8f4; box-shadow: 0 2px 10px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(0, 0, 0, .06); }
.x-disc .x-wheel-core { inset: 24%; }
.x-chip:focus-visible { box-shadow: 0 0 0 2px var(--x-ink); }
.x-wheel-core { position: absolute; inset: 29%; border-radius: 50%; display: grid; place-content: center; text-align: center; pointer-events: none; }
.x-wheel-core b { display: block; font: 500 clamp(2.2rem, 3.6vw, 3.4rem)/1 var(--x-serif); letter-spacing: -.03em; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.x-wheel-core span { display: block; margin-top: 8px; font: 600 .68rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--x-amber); }
.x-wheel-wrap .x-note { margin-top: 22px; text-align: center; max-width: 44ch; }

/* ---------- the map: every country selectable, India in saffron ---------- */
.x-map { position: relative; margin: 0 0 clamp(18px, 2.6vw, 28px); }
.x-map-fig { position: relative; }
.x-world { width: 100%; height: auto; display: block; }
.x-world path { fill: #e2dccf; stroke: #faf8f4; stroke-width: .5; stroke-linejoin: round; cursor: pointer; transition: fill .15s; }
.x-world path:hover { fill: #cbc3b1; }
.x-world path.on { fill: var(--x-ink); }
.x-world path.in, .x-world path.in:hover { fill: var(--x-saffron); }
.x-map-pin { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--x-ink); box-shadow: 0 0 0 3px #faf8f4; pointer-events: none; }
.x-map-pin::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--x-ink); animation: x-ping 2.4s ease-out infinite; }
@keyframes x-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3.6); opacity: 0; } }
.x-map-tag { position: absolute; background: #fff; border: 1px solid var(--x-line); border-radius: 12px; padding: 10px 14px; font-size: .84rem; line-height: 1.35; color: var(--x-body); box-shadow: 0 12px 28px rgba(40, 30, 10, .12); white-space: nowrap; pointer-events: none; }
.x-map-tag strong { display: block; font: 600 var(--fs-body)/1.2 var(--sans); color: var(--x-ink); }
.x-map-key { list-style: none; padding: 0; margin: 0; position: absolute; left: 0; bottom: 6%; display: grid; gap: 8px; font-size: .88rem; color: var(--x-body); }
.x-map-key li { display: flex; align-items: center; gap: 10px; }
.x-map-key li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: #e2dccf; }
.x-map-key li.in::before { background: var(--x-saffron); }

/* ---------- how to order: the saffron of the pack ---------- */
.x-order { margin: 0 12px; border-radius: 28px; background: var(--x-saffron); color: #3a2a08; }
.x-order-in { max-width: var(--shell); margin: 0 auto; padding: clamp(64px, 8vw, 116px) var(--pad); }
.x-order .x-eyebrow { color: #5a3f08; }
.x-order .x-head p:where(:not(.x-eyebrow)) { color: #3a2a08; }
.x-steps { list-style: none; padding: 0; margin: 0 0 clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.x-steps li { border-top: 1.5px solid rgba(21, 19, 15, .22); padding-top: 24px; }
.x-roundel { display: inline-block; width: 40px; height: 40px; border-radius: 50%; background: var(--x-ink); color: var(--x-cream); font: 600 .95rem/40px var(--sans); text-align: center; margin-bottom: 16px; }
.x-steps h3 { font: 600 var(--fs-sub)/1.3 var(--sans); letter-spacing: -.012em; color: var(--x-ink); margin-bottom: 6px; }
.x-steps p { font-size: var(--fs-small); line-height: 1.55; max-width: 34ch; }
.x-order .x-eyebrow { color: #6b4706; }

/* ---------- questions ---------- */
.x-faq-in { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.x-faq-side { position: sticky; top: 108px; }
.home main .x-faq-side h2 { font-size: var(--fs-h2); margin-bottom: 16px; }
.x-faq-side > p:where(:not(.x-eyebrow)) { font-size: var(--fs-sub); line-height: 1.55; margin-bottom: 22px; max-width: 30ch; }
.x-qa { display: grid; gap: 10px; }
.x-qa-more { justify-self: start; margin-top: 6px; padding: 12px 18px; border-radius: 999px; border: 1.5px solid rgba(21, 19, 15, .26); background: none; font: 600 .92rem/1 var(--sans); color: var(--x-ink); cursor: pointer; }
.x-qa.x-qa-trim details:nth-of-type(n + 5) { display: none; }
.x-qa details { background: #fff; border: 1px solid var(--x-line); border-radius: 20px; transition: background-color .25s, border-color .25s; }
.x-qa details[open] { background: var(--x-stone); border-color: transparent; }
.x-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 20px 20px 24px; cursor: pointer; list-style: none; font: 600 1.02rem/1.35 var(--sans); letter-spacing: -.01em; color: var(--x-ink); }
.x-qa summary::-webkit-details-marker { display: none; }
.x-qa summary i { flex: none; position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(21, 19, 15, .2); transition: background-color .2s, border-color .2s; }
.x-qa summary i::before, .x-qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.6px; margin: -.8px 0 0 -6.5px; background: var(--x-ink); border-radius: 2px; transition: transform .25s, background-color .2s; }
.x-qa summary i::after { transform: rotate(90deg); }
.x-qa summary:hover i { border-color: var(--x-ink); }
.x-qa details[open] summary i { background: var(--x-ink); border-color: var(--x-ink); }
.x-qa details[open] summary i::before, .x-qa details[open] summary i::after { background: var(--x-cream); }
.x-qa details[open] summary i::after { transform: rotate(0deg); }
.x-qa details p { padding: 0 72px 24px 24px; font-size: var(--fs-body); line-height: 1.6; max-width: 64ch; }
.x-qa summary:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 2px; border-radius: 20px; }

/* ---------- the close: one ask, and the shades again ---------- */
.x-cta { margin: 0 12px 12px; border-radius: 28px; background: #245c40; color: rgba(255, 248, 234, .84); overflow: hidden; }
.x-cta-in { max-width: 900px; margin: 0 auto; padding: clamp(72px, 9vw, 128px) var(--pad); text-align: center; }
.x-cta .x-eyebrow { color: rgba(255, 248, 234, .8); }
.home main .x-cta h2 { color: var(--x-cream); font-size: clamp(2.5rem, 5vw, 4.6rem); line-height: 1; margin-bottom: 18px; }
.x-cta-in > p:where(:not(.x-eyebrow)) { font-size: var(--fs-lede); line-height: 1.5; max-width: 44ch; margin: 0 auto 30px; }
.x-cta .x-eyebrow { color: var(--x-saffron); }
.x-cta .x-row { justify-content: center; }
.x-btn-cream { background: var(--x-cream); color: #245c40; }
.x-btn-ghostc { border-color: rgba(255, 248, 234, .36); color: var(--x-cream); }
.x-btn-ghostc:hover { border-color: var(--x-cream); }

/* ---------- where we supply: finder, region lists, location pages ---------- */
.x-finder { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; padding: 22px; border-radius: 22px; background: var(--x-stone); margin-bottom: 0; }
.x-supply-hub .x-finder { margin-bottom: clamp(30px, 4vw, 48px); }
.x-finder label { display: grid; gap: 7px; min-width: 0; }
.x-finder label span { font: 600 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--x-muted); }
.x-finder select { font: 500 1rem/1.2 var(--sans); color: var(--x-ink); padding: 15px 40px 15px 16px; border-radius: 12px; border: 1.5px solid rgba(21, 19, 15, .16); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2315130f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px no-repeat; appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; }
.x-finder select:disabled { color: var(--x-muted); background-color: #f6f3ec; }
.x-finder [hidden] { display: none; }
.x-finder input { font: 500 1rem/1.2 var(--sans); color: var(--x-ink); padding: 15px 16px; border-radius: 12px; border: 1.5px solid rgba(21, 19, 15, .16); background: #fff; width: 100%; min-width: 0; }
.x-finder input::placeholder { color: var(--x-muted); }
.x-finder label[data-supply-town] { grid-column: span 2; }
.x-finder .x-btn { height: 52px; padding-top: 0; padding-bottom: 0; }
.x-regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.x-regions h3 { font: 600 1.02rem/1.2 var(--sans); letter-spacing: -.005em; color: var(--x-ink); margin-bottom: 12px; }
.x-places h3 { font: 400 1.5rem/1.1 var(--x-serif); letter-spacing: -.01em; color: var(--x-ink); margin-bottom: 12px; }
.x-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .95rem; }
.x-links a { color: var(--x-ink); text-decoration: underline; text-decoration-color: rgba(21, 19, 15, .25); text-underline-offset: 4px; }
.x-links a:hover { text-decoration-color: var(--x-ink); }
.x-inline { color: var(--x-ink); font-weight: 600; text-underline-offset: 4px; }

.x-page-hd { padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); }
.x-page-hd-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.home main .x-page-hd h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: .94; margin-bottom: 22px; }
.x-page-lede { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.5; max-width: 48ch; margin-bottom: 28px; }
.x-page-art { position: relative; height: clamp(260px, 30vw, 400px); }
.x-page-art .x-art-cone { position: absolute; right: 8%; bottom: 6%; height: 96%; width: auto; filter: drop-shadow(0 24px 22px rgba(40, 30, 10, .28)); }
.x-page-art .x-art-tube { position: absolute; left: 0; bottom: 0; width: 66%; height: auto; transform: rotate(-4deg); filter: drop-shadow(0 16px 14px rgba(40, 30, 10, .3)); }
.home .crumb a { color: var(--x-muted); }

.x-loc { padding-top: 0; }
.x-loc-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.home main .x-loc h2, .home main .x-h2-s, .home main .x-region h2 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 18px; }
.x-loc-trade { font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--x-ink); max-width: 46ch; margin-bottom: 22px; }
.x-loc .shell > .x-loc-trade { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 52px); }
.x-loc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.x-loc-tags span { font: 600 .78rem/1 var(--sans); padding: 9px 13px; border-radius: 999px; background: var(--x-stone); color: var(--x-ink); }
.x-fr { list-style: none; padding: 0; margin: 0 0 16px; border-top: 1px solid var(--x-line); }
.x-fr li { border-bottom: 1px solid var(--x-line); }
.x-fr a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 20px; padding: 18px 4px; text-decoration: none; color: inherit; transition: background-color .18s; }
.x-fr a:hover { background: var(--x-stone); }
.x-fr-name { font: 400 1.5rem/1.15 var(--x-serif); letter-spacing: -.01em; color: var(--x-ink); }
.x-fr-spec { grid-column: 1; font-size: .9rem; color: var(--x-body); }
.x-fr-uses { grid-column: 1; font-size: .9rem; color: var(--x-muted); max-width: 70ch; }
.x-fr-go { grid-column: 2; grid-row: 1 / 4; align-self: center; font-size: 1.4rem; color: var(--x-ink); transition: transform .18s; }
.x-fr a:hover .x-fr-go { transform: translateX(5px); }
.x-region { margin-top: clamp(36px, 5vw, 64px); }
.x-places { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px clamp(20px, 3vw, 44px); }
.x-places h3 a { color: inherit; text-decoration: none; }
.x-places h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.x-places ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .95rem; }
.x-places li a { color: var(--x-body); text-decoration: none; }
.x-places li a:hover { color: var(--x-ink); text-decoration: underline; text-underline-offset: 4px; }
.x-supply-hub { padding-top: 0; }
@media (max-width: 1000px) { .x-places, .x-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .x-finder { grid-template-columns: 1fr; }
  .x-finder label[data-supply-town] { grid-column: auto; }
  .x-page-hd-in, .x-loc-in { grid-template-columns: 1fr; }
  .x-page-art { height: 240px; max-width: 380px; }
}

/* phone: one enquiry button that follows the page */
.x-bar { display: none; }

@media (max-width: 1000px) {
  .x-panels { grid-template-columns: 1fr; }
  .x-anatomy { grid-template-columns: 1fr 1fr; }
  .x-anatomy-art { grid-column: 1 / -1; grid-row: 1; max-width: 560px; margin: 0 auto 10px; }
  .x-call-r { margin-top: 0; }
  .x-call-l { text-align: left; }
  .x-call li::after, .x-call li::before { display: none; }
}
@media (max-width: 860px) {
  .x-hero { margin: 0 8px; border-radius: 22px; }
  .x-hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 34px 22px 26px; }
  .x-hero-in > * { min-width: 0; }
  .home main .x-hero h1 { font-size: clamp(2.5rem, 10.5vw, 3.6rem); max-width: none; }
  .x-hero-stage { width: min(84%, 340px); margin-top: 30px; }
  .x-caps span { font-size: .68rem; }
  .x-specs > div { grid-template-columns: 1fr; }
  .x-rail-label { padding: 0 22px 14px; flex-wrap: wrap; }
  .x-rail-label em { margin-left: 0; flex-basis: 100%; text-align: left; }
  .x-wallbar .x-threads { height: 62px; padding: 12px 6px 0; overflow: hidden; }
  .x-wallbar .x-threads .tc { top: 16px; }
  .x-wallbar .x-threads::-webkit-scrollbar { display: none; }
  .x-wallbar .x-threads button { flex: 1 1 0; min-width: 0; }
  .x-wallbar .x-threads button[hidden] { display: none; }
  .x-sr-boxes { height: 22vw; }
  .x-sr-tubes { height: 7.5vw; margin-top: 4px; }
  .x-sr-cones { height: 34vw; }
  .x-scene { padding: 16px 12px 6px; }
  .x-row-tile:nth-child(even) .x-scene { order: 0; }
  .x-shade-find { grid-template-columns: 1fr; }
  .x-shade-find .x-btn { width: 100%; }
  .x-shade-res { flex-wrap: wrap; }
  .x-shade-res a { margin-left: 0; }
  .x-facts { margin: 0 8px; }
  .x-facts-in { grid-template-columns: 1fr 1fr; row-gap: 18px; padding: 20px 16px; }
  .x-facts-in > div { padding-left: 18px; }
  .x-facts-in > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .x-fv { white-space: normal; font-size: 1.05rem; }
  .x-panels { padding: 0 8px; }
  .x-panel { border-radius: 22px; }
  .x-quality, .x-order, .x-cta { margin-left: 8px; margin-right: 8px; border-radius: 22px; }
  .x-head-row, .x-colours-in, .x-faq-in { grid-template-columns: 1fr; }
  .x-faq-side { position: static; }
  .x-qa summary { padding: 18px 16px 18px 20px; font-size: 1.04rem; }
  .x-qa details p { padding: 0 20px 22px; }
  .x-head-row > p { padding-bottom: 0; }
  .x-anatomy { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .x-quality-head { text-align: left; margin: 0 0 28px; max-width: none; }
  .x-wheel-wrap { margin-top: 30px; }
  .x-about-photos { grid-template-columns: 1fr; gap: 10px; }
  .x-photo-well { aspect-ratio: 16 / 7; }
  .x-ways3-row { grid-template-columns: 1fr; gap: 14px; }
  .x-k2 { grid-template-columns: 1fr; }
  .x-k2 .x-disc2 { width: min(100%, 320px); }
  .x-k3-grid { grid-template-columns: 1fr; }
  .x-k3-grid .x-disc2 { width: min(100%, 320px); justify-self: center; order: -1; }
  .x-k3-l, .x-k3-r { text-align: left; }
  .x-k3-l .x-k-way { grid-template-columns: 28px minmax(0, 1fr); }
  .x-k3-l .x-k-way::before { grid-column: 1; }
  .x-k3-l .x-k-way b, .x-k3-l .x-k-way span { grid-column: 2; }
  .x-k3 .x-k-way::after { display: none; }
  .x-k3-grid .x-ways3 { gap: 14px; }
  .x-k4 { flex-direction: column-reverse; align-items: stretch; padding: 26px 22px 30px; min-height: 0; }
  .x-k4 .x-kh { max-width: none; }
  .x-k4 .x-disc2 { position: relative; right: auto; top: auto; transform: none; width: min(100%, 300px); margin: 0 auto 22px; }
  .x-row-tile { grid-template-columns: 1fr; }
  .x-row-tile:nth-child(even) .x-shot-top { order: 0; }
  .x-sc-row { grid-template-columns: 1fr; gap: 10px; }
  .x-disc2 { width: min(100%, 330px); }
  .x-range-bar { flex-direction: column; align-items: flex-start; }
  .x-range-bar .x-btn { width: 100%; }
  .x-btn-xl { padding: 18px 26px; }
  .x-range-cta .x-btn { width: 100%; }
  .x-head-cta > div:last-child .x-btn { width: 100%; }
  .x-shelf { margin: 0 8px; border-radius: 22px; }
  .x-shelf-cols { grid-template-columns: 1fr; }
  .x-index { --cols: 5rem 5rem minmax(0, 1fr) 1.5rem; }
  .x-ix-head span:nth-child(4), .x-ix-head span:nth-child(5), .x-ix-pack, .x-ix-use { display: none; }
  .x-tab { grid-template-columns: 1fr; padding: 18px; border-radius: 22px; }
  .x-pick-stage { grid-template-columns: 1fr; text-align: center; }
  .x-pick-read small { margin: 0 auto; }
  .x-dots { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .x-fam-rows li { grid-template-columns: 1fr; gap: 8px; }
  .x-fam-chip { height: 36px; }
  .x-wheel { width: min(100%, 340px); }
  .x-wheel-2 .x-chip { --r: -228%; }
  .x-disc { width: min(100%, 320px); }
  .x-map-tag { display: none; }
  .x-map-pin { width: 8px; height: 8px; margin: -4px 0 0 -4px; box-shadow: 0 0 0 2px #faf8f4; }
  .x-after { display: block; }
  .x-after .x-note { display: block; margin-top: 10px; }
  .x-map-key { position: static; margin-top: 16px; }
  .x-call-r { margin-top: clamp(30px, 4.4vw, 64px); }
  .x-steps { grid-template-columns: 1fr; gap: 0; border-top: 1.5px solid rgba(21, 19, 15, .22); }
  .x-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: start; border-top: 0; border-bottom: 1px solid rgba(21, 19, 15, .16); padding: 16px 0; }
  .x-steps li .x-roundel { grid-row: 1 / span 2; width: 36px; height: 36px; line-height: 36px; font-size: .9rem; margin: 0; }
  .x-steps h3 { margin-bottom: 4px; }
  .x-steps p { max-width: none; }
  .x-order .x-row { margin-top: 24px; }
  .x-bar { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 35; transform: translateY(160%); transition: transform .3s ease; }
  .x-bar.show { transform: none; }
  .x-bar .x-btn { width: 100%; box-shadow: 0 14px 30px rgba(0, 0, 0, .28); }
  .home .ft { padding-bottom: 104px; }
}
@media (max-width: 640px) {
  .x-anatomy { grid-template-columns: 1fr; }
}


/* =====================================================================
   PRODUCTS HUB (.ph-*): head, then one block per format — the home's
   picture of that format beside one list of its articles — then the panel.
   ===================================================================== */
.ph-hd { padding: clamp(18px, 2.4vw, 30px) 0 clamp(28px, 3.4vw, 48px); }
.ph-hd .crumb { margin-bottom: clamp(16px, 2vw, 26px); }
.ph-hd-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 64px); align-items: end; }
.ph-hd-in > * { min-width: 0; }
.home main .ph-hd h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.02; margin-bottom: 14px; max-width: 20ch; }
.ph-hd .x-eyebrow { margin-bottom: 14px; }
.ph-lede { font-size: var(--fs-sub); line-height: 1.5; max-width: 52ch; color: var(--x-body); }
.ph-hd-act { display: grid; justify-items: start; gap: 14px; padding-bottom: 6px; }
.ph-hd-act .x-link { margin-top: 0; }

.ph-sec { padding: clamp(36px, 4.5vw, 64px) 0 0; scroll-margin-top: 72px; }
.ph-sec-cones { padding-bottom: clamp(56px, 7vw, 96px); }
.ph-sec .x-head { margin-bottom: clamp(20px, 2.6vw, 32px); }
.home main .ph-sec h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.ph-sec-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.ph-sec .x-scene { border-radius: 24px; }

/* the list: one article per row, the length first */
.rl { border-top: 1px solid var(--x-line); }
.rl-head, .rl-row { display: grid; grid-template-columns: 5.4rem 4.8rem minmax(0, 1fr) 7.4rem 3.4rem 1.1rem; gap: 0 14px; align-items: center; }
.rl-head { padding: 10px 12px; font: 700 .64rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); border-bottom: 1px solid var(--x-line); }
.rl-row { padding: 13px 12px; border-bottom: 1px solid var(--x-line); text-decoration: none; color: inherit; transition: background-color .18s; }
.rl-row:hover, .rl-row.lit { background: var(--x-stone); }
.rl-len { font: 500 1.3rem/1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl-tag { justify-self: start; font: 700 .64rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--x-ink); background: #fff; border: 1px solid var(--x-line); padding: 5px 7px; border-radius: 6px; white-space: nowrap; }
.rl-tag:empty { display: none; }
@media (min-width: 761px) { .rl-len { grid-column: 1; } .rl-tag { grid-column: 2; } .rl-use { grid-column: 3; } .rl-x { grid-column: 4; } .rl-art { grid-column: 5; } .rl-go { grid-column: 6; } }
/* the product a little larger than on the home tiles: here it has the column to itself */
.ph-sec .x-sr-boxes { height: clamp(130px, 14vw, 205px); }
.ph-sec .x-sr-tubes { height: clamp(40px, 4.6vw, 68px); }
.ph-sec .x-sr-cones { height: clamp(220px, 23.5vw, 340px); }
.rl-use { font-size: .9rem; line-height: 1.4; color: var(--x-body); }
.rl-x { font-size: .84rem; color: var(--x-muted); white-space: nowrap; }
.rl-art { font: 600 .72rem/1 var(--sans); letter-spacing: .06em; color: var(--x-muted); }
.rl-go { color: var(--x-ink); display: flex; transition: transform .2s; }
.rl-go svg { width: 16px; height: 16px; }
.rl-row:hover .rl-go { transform: translateX(4px); }
.ph-sec-act { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.ph-sec-act .x-note { margin: 0; }
@media (hover: hover) and (pointer: fine) {
  /* hovering a piece of the picture lights its row, as a row lights its piece */
  .ph-sec-in:has(.x-it[data-pic="t800"]:hover) .rl-row[data-pic="t800"], .ph-sec-in:has(.x-it[data-pic="t400"]:hover) .rl-row[data-pic="t400"], .ph-sec-in:has(.x-it[data-pic="t300"]:hover) .rl-row[data-pic="t300"], .ph-sec-in:has(.x-it[data-pic="t1000"]:hover) .rl-row[data-pic="t1000"],
  .ph-sec-in:has(.x-it[data-pic="c10000"]:hover) .rl-row[data-pic="c10000"], .ph-sec-in:has(.x-it[data-pic="c5000"]:hover) .rl-row[data-pic="c5000"], .ph-sec-in:has(.x-it[data-pic="c3000"]:hover) .rl-row[data-pic="c3000"], .ph-sec-in:has(.x-it[data-pic="c1000"]:hover) .rl-row[data-pic="c1000"] { background: var(--x-stone); }
}

@media (max-width: 900px) {
  .ph-hd-in, .ph-sec-in { grid-template-columns: minmax(0, 1fr); }
  .ph-hd-act { padding: 0; }
  .ph-sec .x-head-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 760px) {
  .rl-head { display: none; }
  .rl-row { grid-template-columns: auto auto minmax(0, 1fr) 1.1rem; grid-template-areas: "len tag art go" "use use use go"; gap: 6px 10px; padding: 12px 8px; }
  .rl-len { grid-area: len; font-size: 1.2rem; }
  .rl-tag { grid-area: tag; }
  .rl-art { grid-area: art; justify-self: end; }
  .rl-use { grid-area: use; font-size: .86rem; }
  .rl-x { display: none; }
  .rl-go { grid-area: go; align-self: center; }
  .ph-sec .x-sr-boxes { height: 24vw; }
  .ph-sec .x-sr-tubes { height: 8vw; }
  .ph-sec .x-sr-cones { height: 38vw; }
  .ph-sec-act { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   PRODUCTS PAGE OPTIONS (.po-*): four directions, private
   ===================================================================== */
.po-hd { padding: clamp(18px, 2.4vw, 30px) 0 clamp(28px, 3.4vw, 44px); }
.po-hd .crumb { margin-bottom: clamp(16px, 2vw, 26px); }
.po-hd-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 64px); align-items: end; }
.po-hd-in > * { min-width: 0; }
.home main .po-hd h1, .home main .po-opts h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.02; max-width: 20ch; }
.po-hd .x-eyebrow, .po-opts .x-eyebrow { margin-bottom: 14px; }
.po-lede { margin-top: 14px; font-size: var(--fs-sub); line-height: 1.5; max-width: 52ch; color: var(--x-body); }
.po-hd-act { display: grid; justify-items: start; gap: 14px; padding-bottom: 6px; }
.po-note { margin-top: 14px; }
.home main .po-h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 0 0 clamp(16px, 2vw, 24px); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.po-h2 span { font: 500 var(--fs-small)/1.3 var(--sans); letter-spacing: 0; color: var(--x-muted); }
.po-cone { height: 100%; aspect-ratio: 660 / 1000; filter: drop-shadow(0 14px 16px rgba(21, 19, 15, .2)); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.po-cone .tc { width: 100%; }

/* A — the shelf */
.po-shelf-sec { padding-bottom: clamp(48px, 6vw, 88px); }
.po-shelf { margin: 0; background: #fff; border: 1px solid var(--x-line); border-radius: 28px; overflow: hidden; }
.po-shelf-scroll { overflow-x: auto; scrollbar-width: none; }
.po-shelf-scroll::-webkit-scrollbar { display: none; }
.po-shelf-in { position: relative; min-width: 1100px; padding: clamp(24px, 3vw, 48px) clamp(16px, 2vw, 32px) 150px; }
.po-shelf-in > img { display: block; width: 100%; height: auto; }
.po-rule { position: absolute; left: clamp(16px, 2vw, 32px); right: clamp(16px, 2vw, 32px); bottom: 86px; border-top: 1px solid rgba(21, 19, 15, .25); }
.po-rule a { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); padding-top: 14px; text-decoration: none; color: var(--x-ink); text-align: center; white-space: nowrap; }
.po-rule a::before { content: ""; position: absolute; left: 50%; top: -1px; width: 1px; height: 8px; background: rgba(21, 19, 15, .45); }
.po-rule a b { display: block; font: 500 1.15rem/1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: transform .2s; }
.po-rule a small { display: block; margin-top: 6px; font: 700 .6rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--x-muted); }
.po-rule a:hover b { transform: translateY(-2px); }
.po-tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 4px); background: var(--x-ink); color: var(--x-cream); font: 500 .76rem/1 var(--sans); padding: 8px 10px; border-radius: 8px; white-space: nowrap; opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none; }
.po-rule a:hover .po-tip, .po-rule a:focus-visible .po-tip { opacity: 1; transform: translate(-50%, 0); }
.po-rule-lbl { position: absolute; left: clamp(16px, 2vw, 32px); right: clamp(16px, 2vw, 32px); bottom: 28px; }
.po-rule-lbl span { position: absolute; left: var(--x); transform: translateX(-50%); font: 700 .64rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--x-muted); white-space: nowrap; }
.po-shelf-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.po-shelf-foot .x-link, .po-shelf-foot .x-note { margin: 0; }

/* B — the gallery */
.po-gal { padding: 0 0 clamp(36px, 4.5vw, 56px); }
.po-gal-foot { padding-bottom: clamp(40px, 5vw, 72px); }
.po-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.po-tile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--x-line); border-radius: 24px; overflow: hidden; text-decoration: none; color: inherit; padding-bottom: 22px; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .25s; }
.po-tile:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(21, 19, 15, .38); border-color: transparent; }
.po-tile-pic { height: 300px; display: flex; align-items: center; justify-content: center; padding: 28px 28px 10px; }
.po-tile-pic > img { height: 100%; width: auto; max-width: 78%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(21, 19, 15, .16)); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.po-tile:hover .po-tile-pic > img, .po-tile:hover .po-cone { transform: translateY(-4px) scale(1.03); }
.po-tile-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 24px 0; }
.po-tile-cap b { font: 500 1.9rem/1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.po-tile-cap span { font: 700 .66rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--x-muted); }
.po-tile-more { padding: 0 24px; margin-top: 8px; font-size: .88rem; line-height: 1.45; color: var(--x-muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s, opacity .3s; }
.po-tile:hover .po-tile-more, .po-tile:focus-visible .po-tile-more { max-height: 3.2em; opacity: 1; }
@media (hover: none) { .po-tile-more { max-height: none; opacity: 1; } }

/* C — the ladder */
.po-lad-sec { padding-bottom: clamp(48px, 6vw, 88px); }
.po-rows { display: grid; gap: 20px; }
.po-ladder { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; }
.po-ladder a { display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; margin: 0 -10px; border-radius: 10px; text-decoration: none; color: var(--x-ink); transition: background-color .18s; }
.po-ladder a:hover, .po-ladder a.lit { background: var(--x-stone); }
.po-ladder b { font: 500 1.55rem/1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.po-ladder span { font: 700 .62rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--x-muted); }
.x-row-tile .po-lad h3 { margin-bottom: 14px; }
@media (hover: hover) and (pointer: fine) {
  .x-row-tile:has(.x-it[data-pic="t800"]:hover) .po-ladder a[data-pic="t800"], .x-row-tile:has(.x-it[data-pic="t400"]:hover) .po-ladder a[data-pic="t400"], .x-row-tile:has(.x-it[data-pic="t300"]:hover) .po-ladder a[data-pic="t300"], .x-row-tile:has(.x-it[data-pic="t1000"]:hover) .po-ladder a[data-pic="t1000"],
  .x-row-tile:has(.x-it[data-pic="c10000"]:hover) .po-ladder a[data-pic="c10000"], .x-row-tile:has(.x-it[data-pic="c5000"]:hover) .po-ladder a[data-pic="c5000"], .x-row-tile:has(.x-it[data-pic="c3000"]:hover) .po-ladder a[data-pic="c3000"], .x-row-tile:has(.x-it[data-pic="c1000"]:hover) .po-ladder a[data-pic="c1000"] { background: var(--x-stone); }
}

/* D — the index */
.po-idx { padding-bottom: clamp(48px, 6vw, 88px); }
.po-idx-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.po-stage { position: sticky; top: 96px; }
.po-stage-pic { position: relative; aspect-ratio: 1; background: #fff; border: 1px solid var(--x-line); border-radius: 28px; overflow: hidden; }
.po-sp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10%; opacity: 0; visibility: hidden; }
.po-sp.on { opacity: 1; visibility: visible; }
.po-sp > img { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(21, 19, 15, .18)); }
.po-stage-cap { margin-top: 14px; font-size: var(--fs-small); color: var(--x-muted); min-height: 1.5em; }
.po-lines { list-style: none; margin: 0 0 clamp(28px, 3.4vw, 44px); padding: 0; border-top: 1px solid var(--x-line); }
.po-lines a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 14px; align-items: baseline; padding: 14px 12px; border-bottom: 1px solid var(--x-line); text-decoration: none; color: var(--x-ink); transition: background-color .15s; }
.po-lines a:hover, .po-lines a[aria-current] { background: var(--x-stone); }
.po-lines b { font: 500 clamp(1.6rem, 2.2vw, 2.1rem)/1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.po-lines span { font: 700 .64rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--x-muted); }
.po-lines i { font: 600 .74rem/1 var(--sans); font-style: normal; letter-spacing: .06em; color: var(--x-muted); }

/* the private index of the four */
.po-opts { padding: clamp(24px, 3vw, 48px) 0 clamp(56px, 7vw, 96px); }
.po-opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; margin-top: clamp(28px, 3.4vw, 44px); }
.po-opt { min-width: 0; }
.po-frame-wrap { position: relative; display: block; width: 100%; aspect-ratio: 1440 / 1500; overflow: hidden; border-radius: 16px; border: 1px solid var(--x-line); background: #fff; }
.po-frame-wrap::after { content: ""; position: absolute; inset: 0; }
.po-frame-wrap iframe { position: absolute; left: 0; top: 0; width: 1440px; height: 1500px; border: 0; transform-origin: 0 0; transform: scale(.39); pointer-events: none; }
.home main .po-opt h2 { font-size: 1.4rem; margin: 16px 0 8px; }
.po-opt h2 b { font-weight: 500; color: var(--x-amber); margin-right: 6px; }
.po-opt p { font-size: var(--fs-small); line-height: 1.55; color: var(--x-body); max-width: 60ch; }
.po-opt .x-link { margin-top: 12px; }

@media (max-width: 900px) {
  .po-hd-in, .po-idx-in, .po-opt-grid { grid-template-columns: minmax(0, 1fr); }
  .po-hd-act { padding: 0; }
  .po-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .po-tile-pic { height: 170px; padding: 16px 16px 6px; }
  .po-tile-cap { padding: 8px 14px 0; }
  .po-tile-cap b { font-size: 1.4rem; }
  .po-tile-more { padding: 0 14px; font-size: .8rem; }
  .po-stage { top: 64px; z-index: 5; background: var(--paper); padding-bottom: 8px; }
  .po-stage-pic { aspect-ratio: auto; height: 36vh; }
  .po-shelf-in { min-width: 1000px; }
}

/* B as the live hub: a small article-and-pack line under the length, an arrow that says the tile opens */
.po-tile-cap { align-items: center; }
.po-tile-cap span { margin-left: auto; }
.po-tile-go { display: inline-flex; margin-left: 10px; color: var(--x-ink); transition: transform .2s; }
.po-tile-go svg { width: 18px; height: 18px; }
.po-tile:hover .po-tile-go { transform: translateX(4px); }
.po-tile-sub { padding: 0 24px; margin-top: 6px; font-size: .84rem; color: var(--x-muted); font-variant-numeric: tabular-nums; }
.po-tile-more { margin-top: 6px; color: var(--x-body); }
@media (max-width: 900px) { .po-tile-sub { padding: 0 14px; font-size: .76rem; } .po-tile-go svg { width: 15px; height: 15px; } }


/* =====================================================================
   PRODUCT PAGE (.pp-*): headline · full-width stage (the product in any shade) · what it sews ·
   where it sits + at a glance · what buyers say · order in one message · questions · other lengths
   ===================================================================== */
.pp-hero { padding: clamp(18px, 2.4vw, 30px) 0 0; }
.pp-hero .crumb { margin-bottom: clamp(16px, 2vw, 26px); }
.pp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(24px, 3vw, 44px); }
.pp-head > * { min-width: 0; }
.home main .pp-head h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: .98; margin-bottom: 16px; max-width: 15ch; }
.pp-head h1 em { font-style: italic; color: inherit; }
.pp-lede { font-size: var(--fs-sub); line-height: 1.5; max-width: 50ch; color: var(--x-body); }
.pp-head-act { display: grid; justify-items: start; gap: 14px; padding-bottom: 8px; }
.pp-head-act .x-link { margin-top: 0; }
.pp-stage-wrap { position: relative; }
.pp-stage { position: relative; margin: 0; height: clamp(420px, 50vw, 660px); background: #fff; border: 1px solid var(--x-line); border-radius: 28px; overflow: hidden; }
.pp-shot { position: absolute; inset: 0; }
.pp-shot-tube .pp-box { position: absolute; left: 50%; bottom: 23%; height: 58%; width: auto; transform: translateX(-88%); filter: drop-shadow(0 20px 22px rgba(21, 19, 15, .16)); }
.pp-shot-tube .pp-box-photo { height: 42%; bottom: 32%; transform: translateX(-70%); }
.pp-shot-tube .pp-tint { position: absolute; left: 50%; bottom: 17%; width: 33%; transform: translateX(-12%); filter: drop-shadow(0 16px 18px rgba(21, 19, 15, .22)); }
.pp-shot-tube .pp-tint .tc { width: 100%; }
.pp-shot-cone { display: flex; align-items: center; justify-content: center; padding: 6% 0; }
.pp-shot-cone .pp-tint { height: 100%; filter: drop-shadow(0 22px 24px rgba(21, 19, 15, .2)); }
.pp-shot-cone .pp-tint .tc { height: 100%; width: auto; }
.pp-dots { position: absolute; left: calc(clamp(10px, 4vw, 64px) + clamp(24px, 3vw, 48px)); bottom: clamp(22px, 2.6vw, 36px); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-dots button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(21, 19, 15, .15); background: var(--c); cursor: pointer; padding: 0; transition: transform .15s, box-shadow .15s; }
.pp-dots button:hover { transform: scale(1.15); }
.pp-dots button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--x-ink); }
.pp-dots span { font-size: .88rem; color: var(--x-muted); margin-left: 10px; }
.pp-dots span b { font-weight: 600; color: var(--x-ink); }
.pp-facts { position: absolute; right: calc(clamp(10px, 4vw, 64px) + clamp(24px, 3vw, 48px)); bottom: clamp(22px, 2.6vw, 36px); margin: 0; display: flex; gap: clamp(20px, 3vw, 48px); }
.pp-facts dt { font: 600 .64rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--x-amber); margin-bottom: 7px; }
.pp-facts dd { margin: 0; font: 500 1.25rem/1.1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pp-sec { padding: clamp(64px, 8vw, 120px) 0 0; }
.pp-sec-head { max-width: 760px; margin-bottom: clamp(26px, 3.4vw, 44px); }
.home main .pp-sec h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
.pp-sec-head .x-note { margin-top: 8px; }

/* what it sews: the end-uses as a menu */
.pp-uses2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); border-top: 1px solid var(--x-line); }
.pp-uses2 li { padding: clamp(16px, 2vw, 24px) 0; border-bottom: 1px solid var(--x-line); font: 500 clamp(1.5rem, 2.4vw, 2.2rem)/1.1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); }
.pp-ply { margin-top: 26px; font-size: var(--fs-sub); line-height: 1.55; color: var(--x-body); max-width: 52ch; }
.pp-work .x-note { margin-top: 10px; }

/* where it sits in the range + at a glance */
.pp-pack-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.pp-pack-pic { background: #fff; border: 1px solid var(--x-line); border-radius: 28px; min-height: 440px; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 3vw, 48px); }
.pp-pack-pic > img { max-height: 400px; width: auto; max-width: 78%; filter: drop-shadow(0 18px 20px rgba(21, 19, 15, .16)); }
.pp-pack-scene { padding: 0; background: #f4f0e7; border-color: transparent; }
.pp-pack-scene .x-scene { width: 100%; min-height: 440px; border-radius: 28px; }
.pp-pack-scene .x-sr-boxes { height: clamp(150px, 17vw, 240px); }
.pp-pack-scene .x-sr-tubes { height: clamp(48px, 5.6vw, 80px); }
.pp-pack-scene .x-sr-cones { height: clamp(240px, 26vw, 370px); }
.pp-pack-scene .x-it.dim { opacity: .28; filter: saturate(.35); }
.pp-pack-scene .x-scene.pre .x-it.dim { opacity: 0; }
.pp-specs { margin: 0; border-top: 1px solid var(--x-line); }
.pp-specs div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--x-line); }
.pp-specs dt { font: 600 .72rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--x-muted); padding-top: 3px; }
.pp-specs dd { margin: 0; font-size: var(--fs-body); color: var(--x-ink); }
.pp-onpack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pp-onpack span { font: 600 .76rem/1 var(--sans); padding: 8px 11px; border-radius: 999px; background: var(--x-stone); color: var(--x-ink); }

/* what buyers say */
.pp-qgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pp-q { margin: 0; background: #fff; border: 1px solid var(--x-line); border-radius: 24px; padding: clamp(24px, 2.6vw, 34px); min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.pp-q blockquote { margin: 0; font: 500 clamp(1.15rem, 1.5vw, 1.35rem)/1.4 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); }
.pp-q blockquote::before { content: "\201C"; display: block; font-size: 2.8rem; line-height: .5; color: var(--x-saffron); margin-bottom: 16px; }
.pp-q figcaption { font: 600 var(--fs-small)/1.3 var(--sans); color: var(--x-ink); }
.pp-q figcaption span { display: block; font-weight: 400; color: var(--x-muted); }
.pp-q-empty { border-style: dashed; background: transparent; }
.pp-q-empty blockquote, .pp-q-empty figcaption { color: var(--x-muted); }
.pp-q-empty blockquote::before { color: var(--x-line); }

/* order in one message: three columns */
.pp-steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); border-top: 1px solid var(--x-line); }
.pp-steps3 li { padding-top: 24px; }
.pp-n { display: block; font: 500 2rem/1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-amber); margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.pp-steps3 b { display: block; font: 600 1.12rem/1.3 var(--sans); color: var(--x-ink); margin-bottom: 8px; }
.pp-steps3 p { font-size: var(--fs-body); line-height: 1.55; color: var(--x-body); max-width: 34ch; }
.pp-order-act { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: clamp(28px, 3.4vw, 44px); }
.pp-order-act .x-note { margin: 0; }

/* questions, other lengths, the bar */
.pp-faq-in { max-width: 880px; margin-left: 0; }
.pp-more { padding-bottom: clamp(64px, 8vw, 112px); }
.pp-more .po-h2 a { display: inline-flex; align-items: center; gap: 6px; color: var(--x-ink); text-decoration: none; border-bottom: 1.5px solid var(--x-saffron); }
.pp-more .po-h2 a svg { width: 14px; height: 14px; }
.pp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: rgba(250, 248, 244, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--x-line); transform: translateY(110%); transition: transform .3s ease; }
.pp-bar.show { transform: none; }
.pp-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; }
.pp-bar-name { font: 600 .95rem/1.3 var(--sans); color: var(--x-ink); }
.pp-bar .x-btn { padding: 11px 18px; font-size: .9rem; }

@media (max-width: 900px) {
  .pp-head, .pp-pack-in { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pp-head-act { padding: 0; }
  .pp-stage { height: auto; aspect-ratio: 4 / 3; border-radius: 22px; }
  .pp-shot-tube .pp-box { height: 58%; bottom: 24%; }
  .pp-shot-tube .pp-tint { width: 44%; }
  .pp-dots { position: static; margin-top: 16px; }
  .pp-dots span { flex-basis: 100%; margin: 6px 0 0; }
  .pp-facts { position: static; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--x-line); justify-content: space-between; gap: 12px; }
  .pp-facts dd { font-size: 1.1rem; white-space: normal; }
  .pp-uses2, .pp-qgrid { grid-template-columns: minmax(0, 1fr); }
  .pp-steps3 { grid-template-columns: minmax(0, 1fr); border-top: 0; gap: 18px; }
  .pp-steps3 li { padding-top: 18px; border-top: 1px solid var(--x-line); }
  .pp-pack-pic { min-height: 0; }
  .pp-pack-pic > img { max-height: 280px; }
  .pp-pack-scene .x-scene { min-height: 0; }
  .pp-specs div { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .pp-bar-name { display: none; }
  .pp-bar .x-btn { width: 100%; }
  .pp-bar-in { padding-top: 10px; padding-bottom: 10px; }
}

/* product page v3 (.pd-*): picture beside the facts, then made for, buyers, ordering, other lengths */
.pd-hero { padding: clamp(18px, 2.4vw, 30px) 0 0; }
.pd-hero .crumb { margin-bottom: clamp(16px, 2vw, 26px); }
.pd-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.pd-pic { position: relative; margin: 0; aspect-ratio: 1; background: #fff; border: 1px solid var(--x-line); border-radius: 28px; overflow: hidden; }
.pd-shot { position: absolute; inset: 0; }
.pd-shot-tube .pd-box { position: absolute; left: 50%; bottom: 26%; height: 56%; width: auto; transform: translateX(-88%); filter: drop-shadow(0 20px 22px rgba(21, 19, 15, .16)); }
.pd-shot-tube .pd-box-photo { height: 42%; bottom: 34%; transform: translateX(-62%); }
.pd-shot-tube .pd-tint { position: absolute; left: 50%; bottom: 15%; width: 44%; transform: translateX(-4%); filter: drop-shadow(0 16px 18px rgba(21, 19, 15, .22)); }
.pd-shot-tube .pd-tint .tc { width: 100%; }
.pd-shot-cone { display: flex; align-items: center; justify-content: center; padding: 9% 0; }
.pd-shot-cone .pd-tint { height: 100%; filter: drop-shadow(0 22px 24px rgba(21, 19, 15, .2)); }
.pd-shot-cone .pd-tint .tc { height: 100%; width: auto; }
.pd-info { padding-top: clamp(4px, 1vw, 16px); }
.pd-info .x-eyebrow { margin-bottom: 14px; }
.home main .pd-info h1 { font-size: clamp(2.3rem, 3.8vw, 3.4rem); line-height: 1; margin-bottom: 16px; }
.pd-lede { font-size: var(--fs-sub); line-height: 1.5; max-width: 46ch; color: var(--x-body); margin-bottom: clamp(22px, 2.6vw, 32px); }
.pd-specs { margin: 0 0 clamp(24px, 2.8vw, 34px); border-top: 1px solid var(--x-line); }
.pd-specs div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--x-line); }
.pd-specs dt { font: 600 .72rem/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--x-muted); padding-top: 2px; }
.pd-specs dd { margin: 0; font-size: var(--fs-body); color: var(--x-ink); }
.pd-info .x-note { margin-top: 14px; }
.home main .pd-for h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); max-width: 26ch; margin-bottom: clamp(20px, 2.6vw, 32px); }
.pd-for-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); max-width: 980px; }
.pd-for-why, .pd-for-alt { font-size: var(--fs-sub); line-height: 1.55; color: var(--x-body); max-width: 40ch; }
.pd-for-alt a { color: var(--x-ink); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--x-saffron); }
.pd-for-alt a:hover { border-color: var(--x-ink); }
.pd-for .x-note { margin-top: 18px; }
@media (max-width: 900px) {
  .pd-hero-in, .pd-for-in { grid-template-columns: minmax(0, 1fr); }
  .pd-pic { aspect-ratio: 4 / 3; border-radius: 22px; }
  .pd-specs div { grid-template-columns: 7.5rem minmax(0, 1fr); }
}

/* =====================================================================
   PRODUCT PAGE OPTIONS (.pv-*): three elevated directions, private
   ===================================================================== */
.pv-hero { padding: clamp(18px, 2.4vw, 30px) 0 0; }
.pv-hero .crumb { margin-bottom: clamp(16px, 2vw, 26px); }
.pv-hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4.6vw, 72px); align-items: start; }
.pv-rule { display: block; width: 44px; height: 3px; background: var(--x-saffron); border-radius: 2px; margin-bottom: 18px; }
.pv-gal-main { position: relative; aspect-ratio: 1; background: #fff; border: 1px solid var(--x-line); border-radius: 28px; overflow: hidden; }
.pv-view { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 9%; opacity: 0; visibility: hidden; transition: opacity .25s; }
.pv-view.on { opacity: 1; visibility: visible; }
.pv-view > img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(21, 19, 15, .16)); }
.pv-tint { width: 70%; filter: drop-shadow(0 16px 18px rgba(21, 19, 15, .2)); }
.pv-tint .tc { width: 100%; }
.pv-tint-tall { width: auto; height: 100%; }
.pv-tint-tall .tc { height: 100%; width: auto; }
.pv-gal-thumbs { display: flex; gap: 10px; }
.pv-gal-thumbs button { display: grid; gap: 6px; justify-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--x-muted); font: 600 .72rem/1 var(--sans); }
.pv-thumb { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; padding: 10px; background: #fff; border: 1.5px solid var(--x-line); border-radius: 16px; overflow: hidden; transition: border-color .15s; position: relative; }
.pv-thumb > img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.pv-thumb .pv-tint { width: 90%; filter: none; }
.pv-thumb .pv-tint-tall { height: 100%; width: auto; }
.pv-gal-thumbs button[aria-selected="true"] .pv-thumb { border-color: var(--x-ink); }
.pv-gal-thumbs button[aria-selected="true"] { color: var(--x-ink); }
.pv-gal-strip { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 14px; align-items: start; }
.pv-gal-strip .pv-gal-thumbs { flex-direction: column; }
.pv-gal-mosaic .pv-gal-thumbs { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-gal-mosaic .pv-thumb { width: 100%; height: auto; aspect-ratio: 1; }
.pv-gal-stage .pv-gal-main { aspect-ratio: auto; height: clamp(420px, 48vw, 640px); background: #17352a; border-color: transparent; }
.pv-gal-stage .pv-view > img, .pv-gal-stage .pv-tint { filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .38)); }
.pv-gal-stage .pv-gal-thumbs { justify-content: center; margin-top: -34px; position: relative; z-index: 2; }
.pv-gal-stage .pv-thumb { width: 68px; height: 68px; border-radius: 50%; background: var(--x-cream); border-color: transparent; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); }
.pv-gal-stage .pv-thumb-t { display: none; }
.pv-gal-stage button[aria-selected="true"] .pv-thumb { box-shadow: 0 0 0 2px var(--x-ink), 0 10px 24px -10px rgba(0, 0, 0, .4); }
.pv-hero-c-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: start; margin-top: clamp(28px, 3.6vw, 52px); }
.pv-card { background: #fff; border: 1px solid var(--x-line); border-top: 3px solid var(--x-saffron); border-radius: 24px; padding: clamp(22px, 2.8vw, 36px); }

.pv-for { margin-top: clamp(64px, 8vw, 120px); }
.pv-for-green { margin-left: 12px; margin-right: 12px; border-radius: 28px; background: #17352a; color: rgba(255, 248, 234, .78); }
.pv-for-green .pv-for-in { max-width: 1280px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--pad); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.pv-for-green .x-eyebrow { color: var(--x-saffron); }
.home main .pv-for-green h2 { color: var(--x-cream); font-size: var(--fs-h2); margin-bottom: 16px; }
.pv-for-green .pv-for-why, .pv-for-green .pv-for-alt { color: rgba(255, 248, 234, .78); }
.pv-for-green .pv-for-alt a { color: var(--x-cream); border-bottom-color: var(--x-saffron); }
.pv-for-green .x-note { color: rgba(255, 248, 234, .5); margin-top: 18px; }
.pv-for-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 248, 234, .18); }
.pv-for-list li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline; gap: 14px; padding: clamp(14px, 1.8vw, 22px) 0; border-bottom: 1px solid rgba(255, 248, 234, .18); font: 500 clamp(1.5rem, 2.6vw, 2.4rem)/1.1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-cream); }
.pv-for-list li span { font: 600 .74rem/1 var(--sans); letter-spacing: .12em; color: var(--x-saffron); }
.pv-for-why, .pv-for-alt { font-size: var(--fs-sub); line-height: 1.55; color: var(--x-body); max-width: 44ch; }
.pv-for-alt { margin-top: 12px; }
.pv-for-alt a { color: var(--x-ink); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--x-saffron); }
.pv-for-cards { margin-left: 12px; margin-right: 12px; border-radius: 28px; background: var(--x-stone); padding: clamp(56px, 7vw, 96px) 0; }
.pv-use-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pv-use { background: #fff; border-radius: 20px; padding: 22px 22px 20px; min-height: 170px; display: flex; flex-direction: column; gap: 10px; }
.pv-use span { font: 600 .72rem/1 var(--sans); letter-spacing: .12em; color: var(--x-amber); }
.pv-use b { font: 500 clamp(1.3rem, 1.8vw, 1.6rem)/1.15 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); flex: 1; }
.pv-use small { font-size: .78rem; color: var(--x-muted); }
.pv-for-foot { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); margin-top: clamp(24px, 3vw, 40px); }
.pv-for-foot .pv-for-alt { margin-top: 0; }
.pv-for-split .pv-for-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.home main .pv-for-split h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); max-width: 22ch; }
.pv-for-card { background: #fff; border: 1px solid var(--x-line); border-radius: 24px; padding: clamp(22px, 2.8vw, 36px); }
.pv-for-card .x-note { margin-top: 14px; }

.pv-widgets { margin-top: clamp(28px, 3.4vw, 48px); }
.pv-w-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pv-w-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pv-w { display: grid; gap: 8px; align-content: start; background: #fff; border: 1px solid var(--x-line); border-radius: 22px; padding: 22px 24px 20px; text-decoration: none; color: inherit; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
a.pv-w:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -36px rgba(21, 19, 15, .4); }
.pv-w b { font: 500 1.35rem/1.15 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); }
.pv-w > span { font-size: var(--fs-small); line-height: 1.5; color: var(--x-body); }
.pv-w i { display: inline-flex; align-items: center; gap: 6px; font: 600 .86rem/1 var(--sans); font-style: normal; color: var(--x-ink); margin-top: 6px; }
.pv-w i svg { width: 14px; height: 14px; }
.pv-strip { display: block; height: 14px; border-radius: 999px; margin-bottom: 8px; }
.pv-india { display: block; width: 44px; height: 44px; color: var(--x-green); margin-bottom: 4px; }
.pv-india svg { width: 100%; height: 100%; display: block; }
.pv-w-order ol { margin: 0; padding: 0 0 0 1.1rem; font-size: var(--fs-small); line-height: 1.5; color: var(--x-body); display: grid; gap: 4px; }
.pv-w-btn { justify-self: start; margin-top: 8px; padding: 11px 18px; font-size: .9rem; }
.pv-w-small .pv-w { padding: 16px 18px 14px; }
.pv-w-small .pv-w b { font-size: 1.15rem; }
.pv-w-small .pv-india { width: 36px; height: 36px; }

.pv-quotes { padding-top: clamp(64px, 8vw, 120px); }
.pv-q-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pv-q { margin: 0; position: relative; background: #fff; border: 1px solid var(--x-line); border-radius: 24px; padding: clamp(26px, 2.8vw, 36px); display: flex; flex-direction: column; gap: 22px; }
.pv-q-mark { font: 500 4rem/.6 var(--x-serif); color: var(--x-saffron); height: 1.6rem; display: block; }
.pv-q blockquote { margin: 0; flex: 1; font: 500 clamp(1.15rem, 1.5vw, 1.35rem)/1.45 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); }
.pv-q figcaption { display: flex; align-items: center; gap: 12px; }
.pv-mono { width: 42px; height: 42px; border-radius: 50%; background: var(--x-green); color: var(--x-cream); display: inline-flex; align-items: center; justify-content: center; font: 500 1.1rem/1 var(--x-serif); flex: none; }
.pv-q figcaption b { display: block; font: 600 var(--fs-small)/1.3 var(--sans); color: var(--x-ink); }
.pv-q figcaption small { display: block; font-size: .8rem; color: var(--x-muted); }
.pv-q-feat { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 18px; }
.pv-q-big { background: #17352a; border-color: transparent; color: var(--x-cream); }
.pv-q-big blockquote { color: var(--x-cream); font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.pv-q-big figcaption b { color: var(--x-cream); }
.pv-q-big figcaption small { color: rgba(255, 248, 234, .7); }
.pv-q-big .pv-mono { background: var(--x-saffron); color: #3a2a08; }
.pv-q-side { display: grid; gap: 18px; }
.pv-quotes-row .pv-q-grid { grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.pv-quotes-row .pv-q { scroll-snap-align: start; }

.pv-order { padding-top: clamp(64px, 8vw, 120px); }
.pv-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); position: relative; }
.pv-timeline::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 1px; background: var(--x-line); }
.pv-timeline li { position: relative; padding-top: 64px; }
.pv-timeline .pp-n { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--x-ink); color: var(--x-cream); font: 600 .9rem/44px var(--sans); text-align: center; margin: 0; }
.pv-timeline b { display: block; font: 600 1.12rem/1.3 var(--sans); color: var(--x-ink); margin-bottom: 8px; }
.pv-timeline p { font-size: var(--fs-body); line-height: 1.55; color: var(--x-body); max-width: 34ch; }

.pv-faq { padding-top: clamp(64px, 8vw, 120px); }
.pv-faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.pv-faq-head { position: sticky; top: 96px; }
.pv-faq-head p:where(:not(.x-eyebrow)) { font-size: var(--fs-sub); color: var(--x-body); max-width: 30ch; }
.pv-qa-num { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); border-top: 1px solid var(--x-line); }
.pv-qa-num li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--x-line); }
.pv-qa-num span { font: 600 .74rem/1.6 var(--sans); letter-spacing: .12em; color: var(--x-amber); }
.pv-qa-num b { display: block; font: 500 1.25rem/1.3 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); margin-bottom: 8px; }
.pv-qa-num p { font-size: var(--fs-body); line-height: 1.55; color: var(--x-body); }
.pv-qa-list { margin: 0; border-top: 1px solid var(--x-line); max-width: 960px; }
.pv-qa-list div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--x-line); }
.pv-qa-list dt { font: 500 1.3rem/1.3 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); }
.pv-qa-list dd { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--x-body); }
.home main .pv-faq h2, .home main .pv-quotes h2, .home main .pv-order h2, .home main .pv-for-cards h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
@media (max-width: 900px) {
  .pv-hero-in, .pv-hero-c-in, .pv-for-green .pv-for-in, .pv-for-split .pv-for-in, .pv-w-pair, .pv-w-strip, .pv-q-grid, .pv-q-feat, .pv-timeline, .pv-faq-in, .pv-for-foot, .pv-qa-num, .pv-qa-list div { grid-template-columns: minmax(0, 1fr); }
  .pv-gal-strip { grid-template-columns: minmax(0, 1fr); }
  .pv-gal-strip .pv-gal-thumbs { flex-direction: row; overflow-x: auto; }
  .pv-use-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-faq-head { position: static; }
  .pv-timeline::before { display: none; }
  .pv-gal-stage .pv-gal-main { height: auto; aspect-ratio: 4 / 3; }
  .pv-quotes-row .pv-q-grid { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
}

/* the combined product page: legibility, motion, the centred call to action */
.pd-specs div { padding: 14px 0; gap: 14px; }
.pd-specs dt { font-size: .74rem; color: var(--x-body); letter-spacing: .08em; }
.pd-specs dd { font-size: 1.06rem; line-height: 1.45; }
.pd-lede { font-size: 1.14rem; line-height: 1.55; }
.pv-card .pd-info { padding-top: 0; }
.pv-card .pd-specs { margin-bottom: 26px; }
.pv-view { transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1); transform: scale(.985); }
.pv-view.on { transform: none; }
.pv-gal-main > .pv-view > img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.pv-gal-main:hover > .pv-view.on > img { transform: scale(1.025); }
.pv-thumb { transition: border-color .15s, transform .25s cubic-bezier(.2, .7, .2, 1); }
.pv-gal-thumbs button:hover .pv-thumb { transform: translateY(-2px); }
.pv-for-why, .pv-for-alt { font-size: 1.14rem; line-height: 1.6; }
.pv-for-green .pv-for-why, .pv-for-green .pv-for-alt { color: rgba(255, 248, 234, .86); }
.pv-for-green .x-note { color: rgba(255, 248, 234, .6); }
.pv-w > span { font-size: 1rem; line-height: 1.55; }
.pv-ship-ic { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.pv-globe { display: block; width: 36px; height: 36px; color: var(--x-green); }
.pv-globe svg { width: 100%; height: 100%; display: block; }
.pv-q { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.pv-q:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -36px rgba(21, 19, 15, .4); }
.pv-q blockquote { font-size: clamp(1.2rem, 1.6vw, 1.42rem); line-height: 1.5; }
.pv-q-big blockquote { font-size: clamp(1.55rem, 2.5vw, 2.2rem); line-height: 1.3; }
.pv-q figcaption small { font-size: .86rem; }
.pp-steps3 p { font-size: 1.06rem; }
.pv-center { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 14px; }
.pv-qa-num b { font-size: 1.32rem; }
.pv-qa-num p { font-size: 1.04rem; line-height: 1.6; }
.pv-qa-num li { padding: 26px 0; }
.po-final { gap: 12px; margin-top: 18px; }
.po-final .x-btn { font-size: .9rem; padding: 12px 18px; }

/* =====================================================================
   PREMIUM DIRECTION (.px-*): the product unframed and large, the thread as a texture, an editorial strip
   ===================================================================== */
.px-hero { padding: clamp(18px, 2.4vw, 30px) 0 0; overflow: hidden; }
.px-hero .crumb { margin-bottom: clamp(10px, 1.4vw, 18px); }
.px-hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 48px); align-items: center; min-height: clamp(460px, 56vw, 720px); }
.px-stage { position: relative; height: clamp(420px, 52vw, 680px); will-change: transform; }
.px-comp { position: absolute; inset: 0; }
.px-comp-tube .px-box { position: absolute; left: 14%; bottom: 10%; height: 82%; width: auto; filter: drop-shadow(0 40px 44px rgba(21, 19, 15, .22)); }
.px-comp-tube .px-box-flat { height: 70%; bottom: 18%; }
.px-comp-tube .px-tube { position: absolute; left: 57%; bottom: 5%; width: 44%; height: auto; filter: drop-shadow(0 26px 28px rgba(21, 19, 15, .26)); }
.px-comp-tube .px-tube-tint .tc { width: 100%; }
.px-comp-cone { display: flex; align-items: flex-end; justify-content: center; }
.px-cone { height: 100%; filter: drop-shadow(0 40px 44px rgba(21, 19, 15, .24)); }
.px-cone .tc { height: 100%; width: auto; }
.px-words .x-eyebrow { margin-bottom: 18px; }
.home main .px-words h1 { font-size: clamp(2.8rem, 5.4vw, 5rem); line-height: .96; letter-spacing: -.03em; margin-bottom: 20px; }
.px-lede { font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.5; max-width: 40ch; color: var(--x-body); margin-bottom: 28px; }
.px-words .x-link { margin-top: 0; align-self: center; }
.px-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(28px, 3.4vw, 48px) 0 0; border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); }
.px-facts div { padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.6vw, 40px) clamp(18px, 2.2vw, 28px) 0; border-left: 1px solid var(--x-line); padding-left: clamp(18px, 2.6vw, 40px); }
.px-facts div:first-child { border-left: 0; padding-left: 0; }
.px-facts dd { margin: 0 0 6px; font: 500 clamp(1.6rem, 2.6vw, 2.4rem)/1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.025em; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.px-facts dt { font: 600 .72rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); }

.px-tex { padding-top: clamp(64px, 8vw, 120px); }
.px-tex-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: 28px; overflow: hidden; background: #fff; border: 1px solid var(--x-line); }
.px-macro { position: relative; min-height: 520px; overflow: hidden; background: var(--shade); }
.px-macro .tc { position: absolute; left: 50%; top: -40%; height: 390%; width: auto; transform: translate(-50%, var(--pan, 0%)); transition: transform .1s linear; }
.px-tex-words { padding: clamp(32px, 4.4vw, 72px) clamp(28px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.home main .px-tex-words h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); margin-bottom: 18px; max-width: 18ch; }
.px-tex-spec { margin: 26px 0 0; border-top: 1px solid var(--x-line); }
.px-tex-spec div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--x-line); }
.px-tex-spec dt { font: 600 .72rem/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--x-body); padding-top: 2px; }
.px-tex-spec dd { margin: 0; font-size: 1.04rem; color: var(--x-ink); }
.px-tex-words .x-note { margin-top: 16px; }

.px-gal { padding-top: clamp(64px, 8vw, 120px); }
.px-gal-head { margin-bottom: clamp(22px, 2.6vw, 34px); }
.home main .px-gal-head h2 { font-size: var(--fs-h2); }
.px-strip { --strip-pad: max(var(--pad), calc((100vw - var(--shell)) / 2 + var(--pad))); display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 760px); gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--strip-pad); padding: 0 var(--strip-pad) 8px; scrollbar-width: none; }
.px-strip::-webkit-scrollbar { display: none; }
.px-shot { margin: 0; scroll-snap-align: start; }
.px-shot-pic { position: relative; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--x-line); border-radius: 24px; display: flex; align-items: center; justify-content: center; padding: 8%; overflow: hidden; }
.px-shot-pic > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(21, 19, 15, .16)); }
.px-shot-pic .pv-tint { width: 72%; }
.px-shot-pic .pv-tint-tall { width: auto; height: 100%; }
.px-shot figcaption { margin-top: 12px; font: 600 .8rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--x-muted); }

.px-quote { padding-top: clamp(64px, 8vw, 120px); }
.px-q { margin: 0; max-width: 24ch; font: 500 clamp(1.9rem, 3.6vw, 3.4rem)/1.12 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); position: relative; padding-left: clamp(40px, 4vw, 64px); }
.px-q span { position: absolute; left: 0; top: -.1em; font-size: 1.4em; color: var(--x-saffron); line-height: 1; }
.px-q-by { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-left: clamp(40px, 4vw, 64px); }
.px-q-by b { display: block; font: 600 1rem/1.3 var(--sans); color: var(--x-ink); }
.px-q-by small { display: block; font-size: .86rem; color: var(--x-muted); }
.px-q-more { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(24px, 4vw, 64px); margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--x-line); }
.px-q-more p { display: flex; gap: 14px; align-items: flex-start; font: 500 1.08rem/1.5 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); }
.px-q-more .pv-mono { width: 36px; height: 36px; font-size: 1rem; }
.px-q-more b { display: block; margin-top: 8px; font: 600 .92rem/1.3 var(--sans); }
.px-q-more small { display: block; font: 400 .82rem/1.3 var(--sans); color: var(--x-muted); }
.px-quote .x-note { margin-top: 18px; }
@media (max-width: 900px) {
  .px-hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .px-stage { height: 66vw; }
  .px-facts { grid-template-columns: 1fr 1fr; }
  .px-facts div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .px-facts div:nth-child(n + 3) { border-top: 1px solid var(--x-line); }
  .px-tex-in { grid-template-columns: minmax(0, 1fr); }
  .px-macro { min-height: 240px; }
  .px-strip { --strip-pad: var(--pad); grid-auto-columns: 82vw; }
  .px-q-more { grid-template-columns: 1fr; }
}

/* the combined product page: one rhythm between sections, nothing shoulder to shoulder */
.pv-f .pv-for, .pv-f .pv-widgets, .pv-f .pv-quotes, .pv-f .pv-order, .pv-f .pv-faq, .pv-f .pp-more { margin-top: 0; padding-top: clamp(80px, 10vw, 144px); }
.pv-f .pv-for-green { margin-top: clamp(80px, 10vw, 144px); padding-top: 0; }
.pv-f .pp-more { padding-bottom: clamp(80px, 10vw, 144px); }
.pv-f .pp-sec-head { margin-bottom: clamp(32px, 4vw, 56px); }
.pv-f .pv-hero-in { gap: clamp(32px, 5vw, 88px); }
.pv-f .pv-gal-mosaic .pv-gal-thumbs { margin-top: 18px; }
.pv-f .pv-card { padding: clamp(26px, 3.2vw, 44px); }
.pv-f .pv-for-green .pv-for-in { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.pv-f .pv-w-pair { gap: 20px; }
.pv-f .pv-q-feat, .pv-f .pv-q-side { gap: 20px; }
.pv-f .pp-steps3 { gap: clamp(24px, 3.6vw, 56px); }
.pv-f .pp-order-act { margin-top: clamp(36px, 4.4vw, 60px); }
.pv-f .pv-qa-num { gap: 0 clamp(32px, 5vw, 88px); }
.pv-f .pv-qa-num li { padding: 30px 0; }
@media (max-width: 900px) {
  .pv-f .pv-for, .pv-f .pv-widgets, .pv-f .pv-quotes, .pv-f .pv-order, .pv-f .pv-faq, .pv-f .pp-more { padding-top: 64px; }
  .pv-f .pv-for-green { margin-top: 64px; }
  .pv-f .pp-more { padding-bottom: 64px; }
}

/* combined page refinements: wider gallery, a card no taller than it, balanced quotes, one ruled ordering row */
.pv-f .pv-hero-in { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); align-items: start; }
.pv-f .pv-card { align-self: start; padding: clamp(24px, 2.8vw, 36px); }
.pv-f .pv-card .pd-specs { margin-bottom: 22px; }
.pv-f .pv-card .pd-specs div { padding: 12px 0; grid-template-columns: 7.5rem minmax(0, 1fr); }
.pv-f .pv-card .pd-specs dd { font-size: 1.02rem; }
.pv-f .pv-card .pd-lede { font-size: 1.06rem; margin-bottom: 20px; }
.home main .pv-f .pv-card h1 { font-size: clamp(2.1rem, 3.2vw, 2.9rem); margin-bottom: 12px; }
.pv-btn2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv-btn2 .x-btn { width: 100%; padding-left: 14px; padding-right: 14px; }
.pv-f .pv-q-feat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.pv-f .pv-q-side { gap: 18px; }
.pv-f .pv-q-side .pv-q { padding: 24px 26px 22px; gap: 16px; min-height: 0; }
.pv-f .pv-q-side .pv-q blockquote { font-size: 1.12rem; line-height: 1.45; }
.pv-f .pv-q-side .pv-q-mark { font-size: 3rem; height: 1.2rem; }
.pv-f .pv-q-big { padding: clamp(28px, 3vw, 40px); }
.pv-f .pv-q-big blockquote { font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.35; }
.pv-f .pp-steps3 { gap: 0; border: 1px solid var(--x-line); border-top: 1px solid var(--x-line); border-radius: 24px; background: #fff; overflow: hidden; }
.pv-f .pp-steps3 li { padding: clamp(26px, 3vw, 40px) clamp(24px, 2.8vw, 40px); border-left: 1px solid var(--x-line); }
.pv-f .pp-steps3 li:first-child { border-left: 0; }
.pv-f .pp-steps3 .pp-n { font-size: 1.1rem; font-family: var(--sans); font-weight: 700; letter-spacing: .12em; color: var(--x-amber); margin-bottom: 14px; }
.pv-f .pp-steps3 b { font-size: 1.2rem; margin-bottom: 8px; }
.pv-f .pp-steps3 p { max-width: 30ch; }
.pv-f .pp-order-act { margin-top: clamp(28px, 3.4vw, 44px); }
@media (max-width: 900px) {
  .pv-f .pv-hero-in { grid-template-columns: minmax(0, 1fr); }
  .pv-f .pp-steps3 li { border-left: 0; border-top: 1px solid var(--x-line); padding: 22px 22px; }
  .pv-f .pp-steps3 li:first-child { border-top: 0; }
  .pv-f .pv-q-feat { grid-template-columns: minmax(0, 1fr); }
}

/* combined page, pass three (.pf-*): one type scale, a fact grid, how-it-works and questions as left-copy / right-content splits */
.pv-f { --fs-body: 1.06rem; --fs-small: .94rem; }
.pf-hero-in { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.pf-hero-in .pv-gal-main { aspect-ratio: 5 / 4; border-radius: 24px; }
.pf-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--x-line); border-top: 3px solid var(--x-saffron); border-radius: 24px; padding: clamp(24px, 2.8vw, 36px); }
.pf-card-top .x-eyebrow { margin-bottom: 12px; }
.home main .pf-card h1 { font-size: clamp(2.1rem, 3.1vw, 2.8rem); line-height: 1.02; margin-bottom: 12px; }
.pf-lede { font-size: 1.04rem; line-height: 1.55; color: var(--x-body); }
.pf-facts { margin: clamp(20px, 2.4vw, 30px) 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--x-line); border-left: 1px solid var(--x-line); }
.pf-facts div { padding: 14px 16px; border-right: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); }
.pf-facts dt { font: 700 .68rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); margin-bottom: 8px; }
.pf-facts dd { margin: 0; font: 500 1.04rem/1.3 var(--sans); color: var(--x-ink); }
.pf-card .pv-btn2 { margin-top: auto; padding-top: clamp(20px, 2.4vw, 28px); }
.pf-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pf-split-l p:where(:not(.x-eyebrow)) { font-size: var(--fs-body); line-height: 1.6; color: var(--x-body); max-width: 44ch; margin-bottom: 14px; }
.pf-split-l .x-row { margin-top: 24px; }
.home main .pf-split-l h2 { margin-bottom: 16px; }
.pf-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.pf-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: var(--x-line); }
.pf-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding: 0 0 clamp(26px, 3vw, 40px); }
.pf-steps li:last-child { padding-bottom: 0; }
.pf-n { width: 44px; height: 44px; border-radius: 50%; background: var(--x-ink); color: var(--x-cream); display: inline-flex; align-items: center; justify-content: center; font: 600 .95rem/1 var(--sans); position: relative; z-index: 1; }
.pf-steps b { display: block; font: 600 1.15rem/1.3 var(--sans); color: var(--x-ink); margin: 10px 0 6px; }
.pf-steps p { font-size: var(--fs-body); line-height: 1.55; color: var(--x-body); max-width: 44ch; }
.pf-faq .x-qa details { border-radius: 18px; }
.pf-faq .x-qa summary { font-size: 1.06rem; padding: 18px 18px 18px 22px; }
.pf-faq .x-qa details p { font-size: 1.02rem; padding: 0 64px 22px 22px; }
.pv-f .pv-w, .pv-f .pv-gal-main, .pv-f .pv-q { border-radius: 24px; }
.pv-f .pv-w > span { font-size: var(--fs-small); }
.pv-f .pv-q-side .pv-q blockquote { font-size: 1.08rem; }
@media (max-width: 900px) {
  .pf-hero-in, .pf-split { grid-template-columns: minmax(0, 1fr); }
  .pf-hero-in .pv-gal-main { aspect-ratio: 1; }
  .pf-facts { grid-template-columns: 1fr 1fr; }
  .pf-faq .x-qa details p { padding-right: 22px; }
}

/* combined page, pass four: wider gaps, the extended gallery, facts three ways, section variants */
.pv-f .pv-for, .pv-f .pv-widgets, .pv-f .pv-quotes, .pv-f .pv-order, .pv-f .pv-faq, .pv-f .pp-more { padding-top: clamp(104px, 13vw, 184px); }
.pv-f .pv-for-green { margin-top: clamp(104px, 13vw, 184px); padding-top: 0; }
.pv-f .pf-for-light { margin-top: 0; padding-top: clamp(104px, 13vw, 184px); }
.pv-f .pp-more { padding-bottom: clamp(104px, 13vw, 184px); }
.pf-gal .pv-gal-thumbs { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; }
.pf-gal .pv-thumb-t { font-size: .68rem; text-align: center; }
.pv-comp { position: relative; width: 100%; height: 100%; }
.pv-comp-box { position: absolute; left: 12%; bottom: 14%; height: 78%; width: auto; filter: drop-shadow(0 20px 22px rgba(21, 19, 15, .16)); }
.pv-comp-tube { position: absolute; left: 50%; bottom: 9%; width: 44%; height: auto; filter: drop-shadow(0 14px 16px rgba(21, 19, 15, .22)); }
.pv-thumb .pv-comp-box { height: 72%; bottom: 16%; }
.pv-thumb .pv-comp-tube { width: 48%; }
.pf-h1 { font: 500 clamp(2.1rem, 3.1vw, 2.8rem)/1.02 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); margin-bottom: 12px; }
.pf-ledger { margin: clamp(20px, 2.4vw, 30px) 0 0; border-top: 1px solid var(--x-line); }
.pf-ledger div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--x-line); }
.pf-ledger dt { font: 700 .68rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); flex: none; }
.pf-ledger dd { margin: 0; font: 500 1.08rem/1.3 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); text-align: right; }
.pf-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: clamp(20px, 2.4vw, 30px) 0 0; padding: 18px 0; border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); }
.pf-figs div { padding-left: 14px; border-left: 1px solid var(--x-line); min-width: 0; }
.pf-figs div:first-child { padding-left: 0; border-left: 0; }
.pf-figs b { display: block; font: 500 clamp(1.4rem, 1.9vw, 1.8rem)/1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); font-variant-numeric: tabular-nums; margin-bottom: 7px; overflow-wrap: anywhere; }
.pf-figs span { font: 600 .66rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); }
.pf-small { margin-top: 14px; font-size: .94rem; line-height: 1.55; color: var(--x-body); }
.pf-chips { list-style: none; margin: clamp(20px, 2.4vw, 30px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chips li { display: grid; gap: 4px; padding: 10px 14px; border-radius: 14px; background: var(--x-stone); }
.pf-chips span { font: 700 .62rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); }
.pf-chips b { font: 500 .98rem/1.3 var(--sans); color: var(--x-ink); }
.pf-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.pf-cards3 .pf-h1 { font-size: 1.8rem; }
.pf-cards3 .pf-card .pv-btn2 { padding-top: 22px; }
.po-lab { margin: clamp(64px, 8vw, 112px) 0 18px; font: 600 .95rem/1.3 var(--sans); color: var(--x-muted); }
.po-lab b { display: inline-block; font: 700 .72rem/1 var(--sans); letter-spacing: .1em; padding: 7px 9px; border-radius: 6px; background: var(--x-ink); color: var(--x-cream); margin-right: 10px; }
.pv-f .po-lab + .pv-for-green, .pv-f .po-lab ~ .pv-for-green { margin-top: 0; }
.pf-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; align-content: start; }
.pf-pills li { padding: 16px 24px; border-radius: 999px; border: 1.5px solid rgba(255, 248, 234, .35); color: var(--x-cream); font: 500 clamp(1.2rem, 1.8vw, 1.6rem)/1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.01em; }
.pf-for-light .pp-sec-head { max-width: 820px; }
.pf-for-light .pp-sec-head p:where(:not(.x-eyebrow)) { font-size: var(--fs-sub); color: var(--x-body); }
.pf-words { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); border-top: 1px solid var(--x-line); }
.pf-words li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline; gap: 12px; padding: clamp(16px, 2vw, 24px) 0; border-bottom: 1px solid var(--x-line); font: 500 clamp(1.5rem, 2.4vw, 2.2rem)/1.1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); }
.pf-words li span { font: 600 .74rem/1 var(--sans); letter-spacing: .12em; color: var(--x-amber); }
.pf-center { text-align: center; margin-left: auto; margin-right: auto; }
.pp-sec-head.pf-center { max-width: 720px; }
.pf-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); position: relative; text-align: center; }
.pf-timeline::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 22px; height: 1px; background: var(--x-line); }
.pf-timeline li { position: relative; display: grid; justify-items: center; }
.pf-timeline .pf-n { margin-bottom: 16px; }
.pf-timeline b { font: 600 1.15rem/1.3 var(--sans); color: var(--x-ink); margin-bottom: 6px; }
.pf-timeline p { font-size: var(--fs-body); line-height: 1.55; color: var(--x-body); max-width: 30ch; }
.pf-faq-c { max-width: 860px; }
.pf-quote-single .shell { max-width: 980px; }
.pf-bigq { margin: 0 auto; max-width: 26ch; font: 500 clamp(1.7rem, 3vw, 2.8rem)/1.18 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); }
.pf-bigq::before { content: "\201C"; display: block; color: var(--x-saffron); font-size: 1.4em; line-height: .6; margin-bottom: 14px; }
.pf-bigq-by { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; text-align: left; }
.pf-bigq-by b { display: block; font: 600 1rem/1.3 var(--sans); color: var(--x-ink); }
.pf-bigq-by small { display: block; font-size: .86rem; color: var(--x-muted); }
.pf-q-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(32px, 4vw, 56px); text-align: left; }
.pf-q-row .pv-q { padding: 24px 26px 22px; gap: 16px; }
.pf-q-row .pv-q blockquote { font-size: 1.08rem; }
.pf-quote-single .x-note { margin-top: 18px; }
@media (max-width: 900px) {
  .pv-f .pv-for, .pv-f .pv-widgets, .pv-f .pv-quotes, .pv-f .pv-order, .pv-f .pv-faq, .pv-f .pp-more, .pv-f .pf-for-light { padding-top: 72px; }
  .pv-f .pv-for-green { margin-top: 72px; }
  .pf-cards3, .pf-words, .pf-timeline, .pf-q-row { grid-template-columns: minmax(0, 1fr); }
  .pf-timeline::before { display: none; }
  .pf-gal .pv-gal-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-figs { grid-template-columns: 1fr; gap: 14px; }
  .pf-figs div { padding-left: 0; border-left: 0; }
}

/* the owner's picks: the facts unboxed beside the boxed gallery; the main picture expands on click */
.pf-card-plain { background: transparent; border: 0; border-radius: 0; padding: clamp(6px, 1vw, 14px) 0 0; display: block; }
.pf-card-plain .pf-ledger { margin-top: clamp(22px, 2.6vw, 32px); }
.pf-card-plain .pf-ledger div { padding: 13px 0; }
.pf-card-plain .pf-ledger dd { font-size: 1.12rem; }
.pf-card-plain .pv-btn2 { margin-top: clamp(24px, 2.8vw, 34px); padding-top: 0; }
.pv-gal-main { cursor: zoom-in; }
.pv-lb { position: fixed; inset: 0; z-index: 80; background: rgba(21, 19, 15, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; cursor: zoom-out; opacity: 0; transition: opacity .25s; }
.pv-lb.on { opacity: 1; }
.pv-lb-box { position: relative; background: #fff; border-radius: 28px; width: min(92vw, 1100px); height: min(84vh, 820px); display: flex; align-items: center; justify-content: center; padding: 4%; transform: scale(.96); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.pv-lb.on .pv-lb-box { transform: none; }
.pv-lb-box > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 24px 28px rgba(21, 19, 15, .18)); }
.pv-lb-box .pv-tint { width: 76%; }
.pv-lb-box .pv-tint-tall { width: auto; height: 100%; }
.pv-lb-box .pv-comp { width: 100%; height: 100%; }
.pv-lb-cap { color: var(--x-cream); font: 600 .9rem/1 var(--sans); letter-spacing: .04em; }
@media (max-width: 900px) { .pv-lb { padding: 14px; } .pv-lb-box { border-radius: 20px; height: min(70vh, 820px); } }

/* =====================================================================
   ABOUT (.ab-*): editorial, and CONTACT (.ct-*): two ways in and the usual questions
   ===================================================================== */
.ab-hd { padding: clamp(18px, 2.4vw, 30px) 0 0; }
.ab-hd .crumb { margin-bottom: clamp(20px, 2.6vw, 36px); }
.ab-hd-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 112px); align-items: start; }
.home main .ab-hd h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: .98; max-width: 10ch; }
.ab-big { font: 500 clamp(1.35rem, 2vw, 1.75rem)/1.3 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.015em; color: var(--x-ink); margin-bottom: 24px; }
.ab-lede p:where(:not(.ab-big)) { font-size: 1.1rem; line-height: 1.65; color: var(--x-body); max-width: 58ch; margin-bottom: 16px; }
.ab-sec { padding-top: clamp(88px, 11vw, 160px); }
.ab-sec-head { max-width: 760px; margin-bottom: clamp(26px, 3.4vw, 44px); }
.home main .ab-sec h2, .home main .ab-stand h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
.ab-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-auto-rows: minmax(220px, auto); gap: 16px; }
.ab-photos .x-photo-well { aspect-ratio: auto; border-radius: 24px; }
.ab-photos .x-photo-well:first-child { grid-row: span 2; }
.ab-who-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ab-who-l p:where(:not(.x-eyebrow)) { font-size: var(--fs-sub); line-height: 1.55; color: var(--x-body); max-width: 36ch; }
.ab-who-list { margin: 0; border-top: 1px solid var(--x-line); }
.ab-who-list div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px 24px; padding: clamp(18px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--x-line); }
.ab-who-list dt { font: 500 clamp(1.25rem, 1.8vw, 1.6rem)/1.2 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.015em; color: var(--x-ink); }
.ab-who-list dd { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--x-body); }
.ab-stand { margin-top: clamp(88px, 11vw, 160px); }
.ab-stand-list li { font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.35; align-items: start; }
.ab-stand-list li span { padding-top: .45em; }
.ct-hd { padding: clamp(18px, 2.4vw, 30px) 0 0; }
.ct-hd .crumb { margin-bottom: clamp(20px, 2.6vw, 36px); }
.ct-hd-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 112px); align-items: end; }
.home main .ct-hd h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: .98; }
.ct-lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--x-body); max-width: 46ch; padding-bottom: 8px; }
.ct-ways { padding-top: clamp(40px, 5vw, 72px); }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ct-card { background: #fff; border: 1px solid var(--x-line); border-radius: 24px; padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ct-card .x-eyebrow { margin-bottom: 4px; }
.ct-big { font: 500 clamp(1.5rem, 2.4vw, 2.2rem)/1.1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); word-break: break-word; font-variant-numeric: tabular-nums; }
.ct-card p:where(:not(.x-eyebrow):not(.ct-big)) { font-size: var(--fs-body); line-height: 1.55; color: var(--x-body); max-width: 40ch; }
.ct-card .x-btn { margin-top: 10px; }
.ct-topics { padding: clamp(80px, 10vw, 144px) 0 clamp(80px, 10vw, 144px); }
.ct-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct-topic { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: #fff; border: 1px solid var(--x-line); border-radius: 18px; text-decoration: none; color: inherit; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .25s; }
.ct-topic:hover { transform: translateY(-2px); box-shadow: 0 24px 40px -30px rgba(21, 19, 15, .4); border-color: transparent; }
.ct-topic b { display: block; font: 600 1.06rem/1.3 var(--sans); color: var(--x-ink); }
.ct-topic small { display: block; margin-top: 3px; font-size: .9rem; color: var(--x-muted); }
.ct-topic svg { width: 18px; height: 18px; flex: none; color: var(--x-ink); transition: transform .2s; }
.ct-topic:hover svg { transform: translateX(4px); }
.ct-topics .x-note { margin-top: 22px; }
@media (max-width: 900px) {
  .ab-hd-in, .ab-who-in, .ab-who-list div, .ct-hd-in, .ct-grid, .ct-topic-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-photos { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(160px, auto); }
  .ab-photos .x-photo-well:first-child { grid-row: auto; }
  .ab-sec, .ab-stand { padding-top: 72px; }
  .ab-stand { padding-top: 0; margin-top: 72px; }
  .ct-topics { padding: 72px 0; }
}
/* paper between the two green panels on About */
.ab-stand { margin-bottom: clamp(64px, 8vw, 120px); }
@media (max-width: 900px) { .ab-stand { margin-bottom: 56px; } }
.ct-only { padding-bottom: clamp(96px, 12vw, 168px); }
.ab-place { padding-bottom: clamp(24px, 3vw, 40px); }
/* About: four figures under the statement. Contact: three cards and the question list. */
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(40px, 5vw, 72px) 0 0; border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); }
.ab-stats div { padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.6vw, 40px) clamp(20px, 2.4vw, 30px) 0; border-left: 1px solid var(--x-line); padding-left: clamp(18px, 2.6vw, 40px); }
.ab-stats div:first-child { border-left: 0; padding-left: 0; }
.ab-stats dd { margin: 0 0 8px; font: 500 clamp(1.7rem, 2.8vw, 2.6rem)/1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.025em; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.ab-stats dt { font: 500 .92rem/1.4 var(--sans); color: var(--x-body); max-width: 22ch; }
.ct-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home main .ct-card h2 { font-size: 1.5rem; margin: 0 0 6px; }
.ct-big-s { font-size: clamp(1.15rem, 1.5vw, 1.4rem); }
.ct-check { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.ct-check li { position: relative; padding-left: 26px; font-size: var(--fs-body); line-height: 1.5; color: var(--x-body); }
.ct-check li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--x-green); border-bottom: 2px solid var(--x-green); transform: rotate(-45deg); }
.ct-ask { padding: clamp(88px, 11vw, 160px) 0 clamp(96px, 12vw, 168px); }
.ct-ask-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ct-ask-in > div > p:where(:not(.x-eyebrow)) { font-size: var(--fs-sub); line-height: 1.55; color: var(--x-body); max-width: 40ch; }
.home main .ct-ask h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.ct-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--x-line); }
.ct-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 8px; border-bottom: 1px solid var(--x-line); text-decoration: none; font: 600 1.08rem/1.3 var(--sans); color: var(--x-ink); transition: background-color .18s; }
.ct-list a:hover { background: var(--x-stone); }
.ct-list svg { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.ct-list a:hover svg { transform: translateX(4px); }
@media (max-width: 900px) {
  .ab-stats { grid-template-columns: 1fr 1fr; }
  .ab-stats div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ab-stats div:nth-child(n + 3) { border-top: 1px solid var(--x-line); }
  .ct-grid3, .ct-ask-in { grid-template-columns: minmax(0, 1fr); }
  .ct-ask { padding: 72px 0 80px; }
}


/* CONTACT (.cx-*): one screen — headline, one panel, the questions as pills */
.cx { padding: clamp(18px, 2.4vw, 30px) 0 clamp(96px, 12vw, 168px); }
.cx .crumb { margin-bottom: clamp(20px, 2.6vw, 36px); }
.cx-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 112px); align-items: end; margin-bottom: clamp(36px, 4.4vw, 60px); }
.home main .cx-head h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: .96; }
.cx-lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--x-body); max-width: 46ch; padding-bottom: 10px; }
.cx-panel { background: #fff; border: 1px solid var(--x-line); border-top: 3px solid var(--x-saffron); border-radius: 28px; padding: clamp(28px, 3.4vw, 48px); }
.cx-ways { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.cx-way { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cx-way + .cx-way { padding-left: clamp(28px, 4vw, 64px); border-left: 1px solid var(--x-line); margin-left: calc(-1 * clamp(14px, 2vw, 32px)); }
.cx-way .x-eyebrow { margin-bottom: 2px; }
.cx-big { font: 500 clamp(1.6rem, 2.6vw, 2.4rem)/1.1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--x-ink); word-break: break-word; font-variant-numeric: tabular-nums; }
.cx-way p:where(:not(.x-eyebrow):not(.cx-big)) { font-size: var(--fs-body); line-height: 1.55; color: var(--x-body); max-width: 38ch; }
.cx-way .x-btn { margin-top: 10px; }
.cx-include { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin: clamp(26px, 3.2vw, 40px) 0 0; padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px solid var(--x-line); font-size: .98rem; color: var(--x-body); }
.cx-include b { font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); }
.cx-include span { position: relative; padding-left: 22px; }
.cx-include span::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--x-green); border-bottom: 2px solid var(--x-green); transform: rotate(-45deg); }
.cx-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: clamp(24px, 3vw, 36px); }
.cx-topics-l { font: 600 var(--fs-small)/1.3 var(--sans); color: var(--x-muted); }
.cx-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cx-pills a { display: inline-block; padding: 11px 16px; border-radius: 999px; border: 1.5px solid var(--x-line); background: #fff; font: 600 .9rem/1 var(--sans); color: var(--x-ink); text-decoration: none; transition: border-color .15s, background-color .15s, color .15s, transform .15s; }
.cx-pills a:hover { border-color: var(--x-ink); transform: translateY(-1px); }
@media (max-width: 900px) {
  .cx-head, .cx-ways { grid-template-columns: minmax(0, 1fr); }
  .cx-way + .cx-way { padding-left: 0; border-left: 0; margin-left: 0; padding-top: 26px; border-top: 1px solid var(--x-line); }
  .cx-panel { border-radius: 22px; }
  .cx-include { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Contact, the three-card layout finished */
.ct-ways { padding-top: clamp(44px, 5.4vw, 80px); }
.ct-grid3 { gap: 20px; align-items: stretch; }
.ct-card { border-radius: 28px; padding: clamp(28px, 3.2vw, 44px); gap: 12px; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.ct-card:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -36px rgba(21, 19, 15, .4); }
.home main .ct-card h2 { font-size: clamp(1.6rem, 2.2vw, 2rem); margin: 0; }
.ct-card .ct-big { font-size: clamp(1.25rem, 1.7vw, 1.55rem); margin: 2px 0 4px; }
.ct-card .x-btn { margin-top: auto; }
.ct-card-wa { background: #17352a; border-color: transparent; color: rgba(255, 248, 234, .82); }
.ct-card-wa .x-eyebrow { color: var(--x-saffron); }
.home main .ct-card-wa h2, .ct-card-wa .ct-big { color: var(--x-cream); }
.ct-card-wa p:where(:not(.x-eyebrow):not(.ct-big)) { color: rgba(255, 248, 234, .82); }
.ct-card-wa .x-btn-main { background: var(--x-cream); color: #17352a; }
.ct-card-wa .x-btn-main:hover { background: #fff; color: #17352a; }
.ct-card-mail { border-top: 3px solid var(--x-saffron); }
.ct-card-send { background: var(--x-stone); border-color: transparent; }
.ct-check { margin-top: 8px; gap: 12px; }
.ct-check li { font-size: 1.02rem; }
.ct-send-note { margin-top: auto; padding-top: 18px; font-size: .92rem; color: var(--x-muted); }
.ct-list-panel { background: #fff; border: 1px solid var(--x-line); border-radius: 24px; padding: 8px 0; overflow: hidden; }
.ct-list-panel li:last-child a { border-bottom: 0; }
.ct-list-panel a { padding: 18px 24px; border-bottom-color: var(--x-line); }
.ct-list-panel a span { position: relative; }
.ct-list-panel a span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: var(--x-saffron); transform: scaleX(0); transform-origin: left; transition: transform .22s; }
.ct-list-panel a:hover { background: var(--x-stone); }
.ct-list-panel a:hover span::after { transform: scaleX(1); }
@media (max-width: 900px) { .ct-card { border-radius: 22px; } .ct-grid3 { gap: 14px; } }
/* Contact: two ways to reach us; the tips as a ruled line beneath */
.ct-grid2 { grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.ct-tips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin: 22px 0 0; padding: 20px 4px; border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); font-size: .98rem; color: var(--x-body); }
.ct-tips b { font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); }
.ct-tips span { position: relative; padding-left: 22px; }
.ct-tips span::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--x-green); border-bottom: 2px solid var(--x-green); transform: rotate(-45deg); }
.ct-tips em { font-style: normal; color: var(--x-muted); margin-left: auto; }
@media (max-width: 900px) { .ct-grid2 { grid-template-columns: minmax(0, 1fr); gap: 14px; } .ct-tips { flex-direction: column; align-items: flex-start; gap: 10px; } .ct-tips em { margin-left: 0; } }

/* Contact: the tips as a tooltip under the two cards */
.ct-tipwrap { position: relative; display: inline-block; margin-top: 20px; }
.ct-tipbtn { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 6px 4px; font: 600 .95rem/1 var(--sans); color: var(--x-body); cursor: pointer; border-radius: 8px; }
.ct-tipbtn i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--x-ink); font: 700 .74rem/1 var(--x-serif); font-style: normal; color: var(--x-ink); }
.ct-tipbtn:hover, .ct-tipwrap.open .ct-tipbtn { color: var(--x-ink); }
.ct-tipbtn:hover i, .ct-tipwrap.open .ct-tipbtn i { background: var(--x-ink); color: var(--x-cream); }
.ct-tip { position: absolute; left: 0; bottom: calc(100% + 14px); z-index: 20; width: min(340px, calc(100vw - 2 * var(--pad))); background: #fff; border: 1px solid var(--x-line); border-top: 3px solid var(--x-saffron); border-radius: 18px; padding: 18px 22px 16px; box-shadow: 0 28px 56px -28px rgba(21, 19, 15, .4); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .25s; }
.ct-tip::after { content: ""; position: absolute; left: 18px; bottom: -7px; width: 12px; height: 12px; background: #fff; border-right: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); transform: rotate(45deg); }
.ct-tipwrap.open .ct-tip, .ct-tipwrap:focus-within .ct-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) { .ct-tipwrap:hover .ct-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.ct-tip b { display: block; font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); margin-bottom: 12px; }
.ct-tip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ct-tip li { position: relative; padding-left: 22px; font-size: .98rem; line-height: 1.45; color: var(--x-ink); }
.ct-tip li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--x-green); border-bottom: 2px solid var(--x-green); transform: rotate(-45deg); }
.ct-tip p { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--x-line); font-size: .88rem; line-height: 1.45; color: var(--x-muted); }

/* Contact: the tips as an open callout under the two cards */
.ct-callout { position: relative; display: inline-block; margin-top: 26px; max-width: 560px; background: #fff; border: 1px solid var(--x-line); border-left: 3px solid var(--x-saffron); border-radius: 18px; padding: 18px 24px 16px; box-shadow: 0 24px 48px -32px rgba(21, 19, 15, .3); }
.ct-callout::before { content: ""; position: absolute; left: 34px; top: -7px; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--x-line); border-top: 1px solid var(--x-line); transform: rotate(45deg); }
.ct-callout b { display: block; font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); margin-bottom: 12px; }
.ct-callout ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.ct-callout li { position: relative; padding-left: 22px; font-size: .98rem; line-height: 1.45; color: var(--x-ink); }
.ct-callout li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--x-green); border-bottom: 2px solid var(--x-green); transform: rotate(-45deg); }
.ct-callout p { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--x-line); font-size: .88rem; line-height: 1.45; color: var(--x-muted); }
@media (max-width: 900px) { .ct-callout { display: block; max-width: none; } .ct-callout ul { flex-direction: column; gap: 9px; } }

/* =====================================================================
   SHADE CARD (.sc-*): the printed card row by row, a number finder, three ways to match
   ===================================================================== */
.sc-hd { padding: clamp(18px, 2.4vw, 30px) 0 0; }
.sc-hd .crumb { margin-bottom: clamp(20px, 2.6vw, 36px); }
.sc-hd-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.home main .sc-hd h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: .98; margin-bottom: 18px; }
.sc-lede { font-size: var(--fs-sub); line-height: 1.55; color: var(--x-body); max-width: 50ch; margin-bottom: 26px; }
.sc-cover { margin: 0; background: #fff; border: 1px solid var(--x-line); border-radius: 28px; padding: clamp(20px, 2.6vw, 36px); display: flex; align-items: center; justify-content: center; }
.sc-cover img { max-height: 420px; width: auto; max-width: 100%; filter: drop-shadow(0 18px 20px rgba(21, 19, 15, .16)); }
.sc-sec { padding-top: clamp(72px, 9vw, 128px); }
.sc-find-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center; background: #fff; border: 1px solid var(--x-line); border-top: 3px solid var(--x-saffron); border-radius: 24px; padding: clamp(24px, 3vw, 40px); }
.home main .sc-find-in h2, .home main .sc-card-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin: 0; }
.sc-find input { width: 100%; max-width: 360px; font: 500 1.6rem/1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: .02em; color: var(--x-ink); background: var(--paper); border: 1.5px solid var(--x-line); border-radius: 999px; padding: 16px 24px; outline: none; transition: border-color .15s; }
.sc-find input:focus { border-color: var(--x-ink); }
.sc-find-out { margin-top: 12px; font-size: var(--fs-body); line-height: 1.5; color: var(--x-body); min-height: 1.5em; }
.sc-find-out b { color: var(--x-ink); }
.sc-find-out a { color: var(--x-ink); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--x-saffron); margin-left: 6px; }
.sc-card-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 4vw, 64px); align-items: end; margin-bottom: clamp(22px, 2.6vw, 34px); }
.sc-card-head > p { font-size: var(--fs-body); line-height: 1.55; color: var(--x-body); max-width: 50ch; }
.sc-card { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sc-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: stretch; background: #fff; border: 1px solid var(--x-line); border-radius: 14px; overflow: hidden; }
.sc-tab { display: flex; align-items: center; justify-content: center; background: var(--x-ink); color: var(--x-cream); font: 600 .9rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.sc-cells { list-style: none; margin: 0; padding: 10px 12px 8px; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 5px; }
.sc-cell a { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: var(--x-muted); border-radius: 8px; padding: 2px 0; transition: transform .15s; }
.sc-cell i { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 3px), linear-gradient(90deg, rgba(0, 0, 0, .14), rgba(255, 255, 255, .08) 40%, rgba(0, 0, 0, .16)), var(--c); box-shadow: inset 0 0 0 1px rgba(21, 19, 15, .08); }
.sc-cell b { font: 600 .6rem/1 var(--sans); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-cell a:hover { transform: translateY(-2px); color: var(--x-ink); }
.sc-cell.hit a { color: var(--x-ink); }
.sc-cell.hit i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--x-ink); }
.sc-row.dim .sc-cell:not(.hit) a { opacity: .35; }
.sc-row-note { grid-column: 1 / -1; padding: 0 12px 8px 56px; font-size: .78rem; color: var(--x-muted); }
.sc-row-todo { background: var(--x-stone); border-color: transparent; }
.sc-row-todo .sc-tab { background: rgba(21, 19, 15, .55); }
.sc-row-todo p { display: flex; align-items: center; padding: 14px 16px; font-size: .9rem; color: var(--x-muted); }
.sc-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); border-top: 1px solid var(--x-line); }
.sc-ways li { padding-top: 24px; }
.sc-ways span { display: block; font: 500 1.6rem/1 var(--x-serif); color: var(--x-amber); margin-bottom: 14px; }
.sc-ways b { display: block; font: 600 1.15rem/1.3 var(--sans); color: var(--x-ink); margin-bottom: 8px; }
.sc-ways p { font-size: var(--fs-body); line-height: 1.55; color: var(--x-body); max-width: 34ch; }
.sc-ways-sec { padding-bottom: clamp(72px, 9vw, 128px); }
@media (max-width: 900px) {
  .sc-hd-in, .sc-find-in, .sc-card-head, .sc-ways { grid-template-columns: minmax(0, 1fr); }
  .sc-cover img { max-height: 280px; }
  .sc-cells { grid-template-columns: repeat(24, 40px); overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
  .sc-cell b { font-size: .62rem; }
}

/* Shade card, pass two: the match tool in the head; no reveal on the card */
.sc-hd-in { align-items: start; }
.sc-lede { margin-bottom: 22px; }
.sc-match { background: #fff; border: 1px solid var(--x-line); border-top: 3px solid var(--x-saffron); border-radius: 22px; padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 12px; justify-items: start; }
.sc-lab { font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); }
.sc-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-seg label { position: relative; }
.sc-seg input { position: absolute; opacity: 0; inset: 0; }
.sc-seg span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--x-line); font: 600 .9rem/1 var(--sans); color: var(--x-ink); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.sc-seg input:checked + span { background: var(--x-ink); border-color: var(--x-ink); color: var(--x-cream); }
.sc-seg input:focus-visible + span { outline: 2px solid var(--x-ink); outline-offset: 2px; }
.sc-fields { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.sc-field { display: grid; gap: 6px; flex: 1 1 180px; }
.sc-field[hidden] { display: none; }
.sc-field span { font: 600 .78rem/1 var(--sans); color: var(--x-muted); }
.sc-field input { width: 100%; font: 500 1.35rem/1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); background: var(--paper); border: 1.5px solid var(--x-line); border-radius: 14px; padding: 13px 16px; outline: none; transition: border-color .15s; }
.sc-field input:focus { border-color: var(--x-ink); }
.sc-out { font-size: var(--fs-small); line-height: 1.5; color: var(--x-body); min-height: 1.5em; }
.sc-send { margin-top: 2px; }
.sc-cover { align-self: start; }
.sc-cover img { max-height: 560px; }
@media (max-width: 900px) { .sc-cover img { max-height: 320px; } .sc-match { padding: 18px; border-radius: 18px; } }

/* =====================================================================
   SHADE CARD v3 (.sd-*): the match tool first; the card in flat colours; a selection bar
   ===================================================================== */
.sd-hd { padding: clamp(18px, 2.4vw, 30px) 0 0; }
.sd-hd .crumb { margin-bottom: clamp(20px, 2.6vw, 36px); }
.sd-hd-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.home main .sd-intro h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: .98; margin-bottom: 18px; }
.sd-intro > p:where(:not(.x-eyebrow)) { font-size: var(--fs-sub); line-height: 1.55; color: var(--x-body); max-width: 40ch; }
.sd-intro .sd-printed { margin-top: 22px; font-size: var(--fs-small); color: var(--x-muted); }
.sd-link { color: var(--x-ink); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--x-saffron); padding-bottom: 1px; }
.sd-link:hover { border-color: var(--x-ink); }
.sd-tool { background: #fff; border: 1px solid var(--x-line); border-radius: 28px; padding: clamp(24px, 3vw, 40px); display: grid; gap: 22px; box-shadow: 0 40px 70px -50px rgba(21, 19, 15, .35); }
.sd-seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sd-seg legend { font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); margin-bottom: 12px; padding: 0; }
.sd-seg label { position: relative; }
.sd-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sd-seg span { display: inline-block; padding: 11px 18px; border-radius: 999px; background: var(--x-stone); font: 600 .92rem/1 var(--sans); color: var(--x-ink); transition: background-color .15s, color .15s; }
.sd-seg input:checked + span { background: var(--x-ink); color: var(--x-cream); }
.sd-seg input:focus-visible + span { outline: 2px solid var(--x-ink); outline-offset: 2px; }
.sd-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.sd-field { display: grid; gap: 8px; flex: 1 1 200px; }
.sd-field[hidden] { display: none; }
.sd-field span { font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); }
.sd-field input { width: 100%; font: 500 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: .01em; color: var(--x-ink); background: transparent; border: 0; border-bottom: 2px solid var(--x-line); border-radius: 0; padding: 8px 0 12px; outline: none; transition: border-color .15s; font-variant-numeric: tabular-nums; }
.sd-field input::placeholder { color: #c9c3b6; }
.sd-field input:focus { border-color: var(--x-ink); }
.sd-result { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.sd-chip { flex: none; width: 44px; height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(21, 19, 15, .1); }
.sd-chip[hidden] { display: none; }
.sd-result p { font-size: var(--fs-body); line-height: 1.5; color: var(--x-body); }
.sd-send { justify-self: start; }

.sd-card-sec { padding: clamp(80px, 10vw, 140px) 0 clamp(88px, 11vw, 150px); }
.sd-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 40px; margin-bottom: clamp(22px, 2.6vw, 32px); }
.home main .sd-card-head h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); margin: 0; }
.sd-card-head p { font-size: var(--fs-small); line-height: 1.5; color: var(--x-muted); max-width: 52ch; }
.sd-card { list-style: none; margin: 0; padding: clamp(14px, 1.6vw, 22px); background: #fff; border: 1px solid var(--x-line); border-radius: 24px; display: grid; gap: 6px; }
.sd-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 0; }
.sd-row + .sd-row { border-top: 1px solid #f0ece3; }
.sd-tab { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 8px; background: var(--x-ink); color: var(--x-cream); font: 600 .82rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.sd-cells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; }
.sd-sw { display: grid; gap: 5px; text-decoration: none; color: var(--x-muted); border-radius: 8px; outline: none; }
.sd-sw i { display: block; aspect-ratio: 1; border-radius: 7px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(21, 19, 15, .08); transition: box-shadow .12s; }
.sd-sw b { font: 600 .62rem/1 var(--sans); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.sd-sw:hover i { box-shadow: inset 0 0 0 1px rgba(21, 19, 15, .08), 0 0 0 2px var(--x-cream), 0 0 0 3.5px rgba(21, 19, 15, .35); }
.sd-sw:focus-visible i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--x-ink); }
.sd-sw.on i { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--x-ink); }
.sd-sw.on b, .sd-sw:hover b { color: var(--x-ink); }
.sd-row-todo p { display: flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--x-stone); font-size: .86rem; color: var(--x-muted); }
.sd-row-todo .sd-tab { background: #b9b3a6; }

.sd-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(250, 248, 244, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--x-line); box-shadow: 0 -18px 40px -28px rgba(21, 19, 15, .35); }
.sd-bar[hidden] { display: none; }
.sd-bar-in { display: flex; align-items: center; gap: 16px; min-height: 76px; }
.sd-bar-sw { flex: none; width: 48px; height: 48px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(21, 19, 15, .1); }
.sd-bar-in p { flex: 1; display: grid; gap: 2px; }
.sd-bar-in p b { font: 500 1.35rem/1.1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.sd-bar-in p span { font-size: .86rem; color: var(--x-muted); }
.sd-bar-in .x-btn { padding: 12px 20px; font-size: .92rem; }
.sd-bar-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--x-line); background: #fff; font: 400 1.3rem/1 var(--sans); color: var(--x-ink); cursor: pointer; }
.sd-bar-x:hover { border-color: var(--x-ink); }
body.sd-has-bar .ft { padding-bottom: 96px; }

@media (max-width: 900px) {
  .sd-hd-in { grid-template-columns: minmax(0, 1fr); }
  .sd-tool { border-radius: 22px; padding: 20px; gap: 18px; }
  .sd-card { padding: 12px; border-radius: 18px; }
  .sd-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sd-tab { justify-content: flex-start; width: auto; height: auto; padding: 0; background: none; color: var(--x-ink); font-size: .78rem; letter-spacing: .1em; }
  .sd-tab::before { content: "Row "; }
  .sd-row-todo .sd-tab { background: none; color: var(--x-muted); }
  .sd-row-todo { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .sd-row-todo p { height: auto; padding: 0; background: none; }
  .sd-cells { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  .sd-sw b { font-size: .66rem; }
  .sd-bar-in { gap: 10px; min-height: 70px; }
  .sd-bar-in .x-btn { padding: 11px 14px; font-size: .86rem; }
  .sd-bar-in p b { font-size: 1.1rem; }
  .sd-bar-in p span { display: none; }
}
.sd-bar-in p b { white-space: nowrap; }

/* =====================================================================
   SUPPLY HUB OPTIONS (.sp-*): same sections, two calmer presentations
   ===================================================================== */
.sp-hd { padding: clamp(18px, 2.4vw, 30px) 0 0; }
.sp-hd .crumb { margin-bottom: clamp(20px, 2.6vw, 36px); }
.sp-hd-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.home main .sp-hd h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: .98; margin-bottom: 18px; max-width: 14ch; }
.sp-lede { font-size: var(--fs-sub); line-height: 1.55; color: var(--x-body); max-width: 44ch; }
.sp-search { position: relative; background: #fff; border: 1px solid var(--x-line); border-radius: 28px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 40px 70px -50px rgba(21, 19, 15, .35); }
.sp-search label { display: block; font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); margin-bottom: 10px; }
.sp-search input { width: 100%; font: 500 clamp(1.5rem, 2.2vw, 2rem)/1.1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); background: transparent; border: 0; border-bottom: 2px solid var(--x-line); padding: 8px 0 12px; outline: none; -webkit-appearance: none; appearance: none; }
.sp-search input::placeholder { color: #c9c3b6; }
.sp-search input:focus { border-color: var(--x-ink); }
.sp-results { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.sp-results a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #f0ece3; text-decoration: none; color: var(--x-ink); }
.sp-results a:hover { background: var(--x-stone); }
.sp-results b { font: 600 1.02rem/1.3 var(--sans); }
.sp-results span { font-size: .84rem; color: var(--x-muted); }
.sp-miss { padding: 14px 4px 4px; display: grid; gap: 12px; justify-items: start; }
.sp-miss p { font-size: var(--fs-body); color: var(--x-body); }
.sp-search-note { margin-top: 16px; font-size: var(--fs-small); color: var(--x-muted); }
.sp-search-note a { color: var(--x-ink); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--x-saffron); }
.sp-art { position: relative; height: clamp(240px, 26vw, 340px); }
.sp-art .x-art-cone { position: absolute; right: 10%; bottom: 4%; height: 96%; width: auto; filter: drop-shadow(0 24px 22px rgba(40, 30, 10, .26)); }
.sp-art .x-art-tube { position: absolute; left: 6%; bottom: 0; width: 58%; height: auto; transform: rotate(-4deg); filter: drop-shadow(0 16px 14px rgba(40, 30, 10, .28)); }
.sp-finder-wrap { margin-top: clamp(24px, 3vw, 40px); }
.sp-finder-wrap .x-finder { background: #fff; border: 1px solid var(--x-line); border-radius: 24px; padding: 20px; box-shadow: 0 30px 60px -48px rgba(21, 19, 15, .35); }
.sp-finder-wrap .x-finder select, .sp-finder-wrap .x-finder input { border-color: var(--x-line); background-color: var(--paper); }

.sp-dir { padding-top: clamp(80px, 10vw, 140px); }
.home main .sp-dir h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); margin: 0; }
.sp-dir-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(22px, 2.6vw, 32px); }
.sp-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; background: var(--x-stone); }
.sp-tabs button { border: 0; background: none; padding: 10px 18px; border-radius: 999px; font: 600 .92rem/1 var(--sans); color: var(--x-body); cursor: pointer; transition: background-color .15s, color .15s; }
.sp-tabs button[aria-selected="true"] { background: #fff; color: var(--x-ink); box-shadow: 0 2px 8px rgba(21, 19, 15, .08); }
.sp-panel { display: none; }
.sp-panel.on { display: block; }
.sp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sp-card { background: #fff; border: 1px solid var(--x-line); border-radius: 20px; padding: 20px 22px 18px; }
.home main .sp-card h3 { font: 500 1.3rem/1.2 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.01em; margin-bottom: 8px; }
.sp-card h3 a { color: var(--x-ink); text-decoration: none; }
.sp-card h3 a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--x-saffron); }
.sp-card p { font-size: .92rem; line-height: 1.7; color: var(--x-muted); }
.sp-card p a { color: var(--x-body); text-decoration: none; }
.sp-card p a:hover { color: var(--x-ink); text-decoration: underline; text-underline-offset: 3px; }
.sp-card p i { font-style: normal; color: #c9c3b6; }
.sp-after { margin-top: 22px; font-size: var(--fs-small); color: var(--x-muted); }

.sp-dir-title { margin-bottom: clamp(22px, 2.6vw, 32px) !important; }
.sp-region + .sp-region { margin-top: clamp(28px, 3.4vw, 44px); }
.sp-region-h { font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-amber); margin-bottom: 12px; }
.sp-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); border-top: 1px solid var(--x-line); }
.sp-row { border-bottom: 1px solid var(--x-line); }
.sp-row summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 12px; padding: 16px 4px; cursor: pointer; }
.sp-row summary::-webkit-details-marker { display: none; }
.sp-row-n { font: 500 1.22rem/1.2 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); }
.sp-row-c { font-size: .84rem; color: var(--x-muted); }
.sp-row summary i { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--x-line); }
.sp-row summary i::before, .sp-row summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--x-ink); transition: transform .2s; }
.sp-row summary i::after { transform: rotate(90deg); }
.sp-row[open] summary i::after { transform: rotate(0); }
.sp-row summary:hover .sp-row-n { color: var(--x-green); }
.sp-row-body { padding: 0 4px 18px; }
.sp-row-all { display: inline-flex; align-items: center; gap: 6px; font: 600 .9rem/1 var(--sans); color: var(--x-ink); text-decoration: none; border-bottom: 1.5px solid var(--x-saffron); padding-bottom: 2px; margin-bottom: 12px; }
.sp-row-all svg { width: 14px; height: 14px; }
.sp-row-body p { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-row-body p a { font-size: .9rem; padding: 7px 12px; border-radius: 999px; background: var(--x-stone); color: var(--x-ink); text-decoration: none; transition: background-color .15s; }
.sp-row-body p a:hover { background: #e6e0d2; }

.sp-world { margin: clamp(80px, 10vw, 140px) 12px 0; border-radius: 28px; background: #17352a; color: rgba(255, 248, 234, .82); }
.sp-world-in { max-width: 1280px; margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--pad); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.sp-world .x-eyebrow { color: var(--x-saffron); }
.home main .sp-world h2 { color: var(--x-cream); font-size: clamp(1.9rem, 3vw, 2.7rem); margin-bottom: 12px; }
.sp-world p:where(:not(.x-eyebrow)) { font-size: var(--fs-sub); line-height: 1.55; max-width: 44ch; }
.sp-world-form { display: grid; gap: 14px; justify-items: start; }
.sp-world-form label { display: grid; gap: 8px; width: 100%; }
.sp-world-form label > span { font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 248, 234, .6); }
.sp-world-form select { width: 100%; font: 500 1.02rem/1.2 var(--sans); color: var(--x-ink); padding: 15px 40px 15px 16px; border-radius: 14px; border: 0; background: var(--x-cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2315130f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px no-repeat; -webkit-appearance: none; appearance: none; }
.sp-world-go { background: var(--x-cream); color: #17352a; }
.sp-world-go:hover { background: #fff; color: #17352a; }
.sp-world-go[aria-disabled="true"] { opacity: .55; }
.sp-range { padding-top: clamp(80px, 10vw, 140px); }
.home main .sp-range .po-tile-cap b.sp-tile-t { font-size: 1.6rem; }
.sp-faq { padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 140px); }
.sp-faq-in { max-width: 860px; }
.home main .sp-faq h2 { font-size: var(--fs-h2); margin-bottom: 12px; }

@media (max-width: 900px) {
  .sp-hd-in, .sp-world-in { grid-template-columns: minmax(0, 1fr); }
  .sp-art { display: none; }
  .sp-cards, .sp-rows { grid-template-columns: minmax(0, 1fr); }
  .sp-tabs { width: 100%; }
  .sp-tabs button { flex: 1 1 auto; padding: 10px 12px; }
  .sp-dir, .sp-range { padding-top: 72px; }
  .sp-world { margin-top: 72px; }
  .sp-faq { padding: 72px 0; }
}
.sp-range .po-h2 a { display: inline-flex; align-items: center; gap: 6px; color: var(--x-ink); text-decoration: none; border-bottom: 1.5px solid var(--x-saffron); }
.sp-range .po-h2 a svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .sp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sp-tabs::-webkit-scrollbar { display: none; }
  .sp-tabs button { flex: none; white-space: nowrap; }
}

/* Where we supply: the worldwide panel with a world map to pick a country from */
.sp-world { overflow: hidden; }
.sp-world-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; padding-top: clamp(52px, 6.4vw, 88px); padding-bottom: clamp(52px, 6.4vw, 88px); }
.sp-world-copy .sp-world-form { margin-top: clamp(22px, 2.6vw, 32px); max-width: 420px; }
.sp-map-wrap { position: relative; }
.sp-map { display: block; width: 100%; height: auto; }
.sp-map path { fill: rgba(255, 248, 234, .2); stroke: #17352a; stroke-width: .6; stroke-linejoin: round; cursor: pointer; transition: fill .15s; }
.sp-map path:hover { fill: rgba(255, 248, 234, .42); }
.sp-map path.on { fill: var(--x-saffron); }
.sp-map-tip { position: absolute; left: 0; bottom: -4px; font: 600 .86rem/1 var(--sans); color: var(--x-cream); background: rgba(255, 248, 234, .12); padding: 8px 12px; border-radius: 999px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.sp-map-tip.show { opacity: 1; }
.sp-world-go span { white-space: nowrap; }
@media (max-width: 900px) {
  .sp-world-in { grid-template-columns: minmax(0, 1fr); }
  .sp-map-wrap { order: -1; margin: 0 -8px; }
  .sp-map-tip { display: none; }
}

/* =====================================================================
   STATE PAGE OPTIONS (.st-*): same sections, two presentations
   ===================================================================== */
.st-hd { padding: clamp(18px, 2.4vw, 30px) 0 0; }
.st-hd .crumb { margin-bottom: clamp(20px, 2.6vw, 36px); }
.st-hd-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.home main .st-hd h1 { font-size: clamp(2.3rem, 4.2vw, 3.8rem); line-height: 1; margin-bottom: 18px; max-width: 16ch; }
.st-lede { font-size: var(--fs-sub); line-height: 1.55; color: var(--x-body); max-width: 46ch; margin-bottom: 26px; }
.st-facts { margin: 0; background: #fff; border: 1px solid var(--x-line); border-radius: 24px; padding: 8px 26px; box-shadow: 0 40px 70px -50px rgba(21, 19, 15, .3); }
.st-facts div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 16px 0; }
.st-facts div + div { border-top: 1px solid var(--x-line); }
.st-facts dt { font: 700 .7rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-muted); }
.st-facts dd { margin: 0; font: 500 1.2rem/1.25 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); }
.st-facts-w dd { display: flex; flex-wrap: wrap; gap: 6px; font: inherit; }
.st-facts-w dd span { font: 600 .8rem/1 var(--sans); padding: 7px 10px; border-radius: 999px; background: var(--x-stone); color: var(--x-ink); }
.st-trade { padding-top: clamp(72px, 9vw, 128px); }
.st-trade-p { font: 500 clamp(1.3rem, 2vw, 1.75rem)/1.4 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.01em; color: var(--x-ink); max-width: 48ch; }
.st-works, .st-cities, .st-faq { padding-top: clamp(80px, 10vw, 140px); }
.home main .st-works h2, .home main .st-cities h2, .home main .st-faq h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
.st-rows { border-top: 1px solid var(--x-line); }
.st-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(18px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--x-line); }
.home main .st-row h3 { font: 500 clamp(1.3rem, 1.8vw, 1.6rem)/1.15 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.015em; color: var(--x-ink); margin-bottom: 6px; }
.st-row-l p { font-size: var(--fs-small); color: var(--x-muted); }
.st-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-chip { display: grid; grid-template-columns: 56px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 8px 14px 8px 8px; background: #fff; border: 1px solid var(--x-line); border-radius: 16px; text-decoration: none; color: inherit; transition: border-color .15s, transform .2s; }
.st-chip:hover { border-color: var(--x-ink); transform: translateY(-1px); }
.st-chip-pic { width: 56px; height: 56px; border-radius: 12px; background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 6px; overflow: hidden; }
.st-chip-pic > img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.st-chip-pic .po-cone { height: 100%; filter: none; }
.st-chip-t b { display: block; font: 500 1.1rem/1.1 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.st-chip-t small { font-size: .78rem; color: var(--x-muted); }
.st-chip svg { width: 16px; height: 16px; color: var(--x-ink); }
.st-city-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.st-city { position: relative; display: grid; gap: 8px; align-content: start; background: #fff; border: 1px solid var(--x-line); border-radius: 20px; padding: 20px 22px 44px; text-decoration: none; color: inherit; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.st-city:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -36px rgba(21, 19, 15, .4); }
.st-city b { font: 500 1.3rem/1.2 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); }
.st-city span { font-size: .9rem; line-height: 1.55; color: var(--x-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-city i { position: absolute; left: 22px; bottom: 18px; color: var(--x-ink); }
.st-city i svg { width: 16px; height: 16px; transition: transform .2s; }
.st-city:hover i svg { transform: translateX(4px); }
.st-cities .x-note { margin-top: 18px; }
.st-deliver { padding-top: clamp(64px, 8vw, 110px); }
.st-deliver-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 28px; border-radius: 22px; background: var(--x-stone); }
.st-deliver-in p { font-size: var(--fs-body); color: var(--x-body); max-width: 60ch; }
.st-deliver-in p b { font-weight: 600; color: var(--x-ink); }
.st-faq-in { max-width: 860px; }
.st-near { padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 120px); }
.st-near-l { font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--x-amber); margin-bottom: 14px; }
.st-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.st-pills a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--x-line); font: 600 .9rem/1 var(--sans); color: var(--x-ink); text-decoration: none; transition: border-color .15s; }
.st-pills a:hover { border-color: var(--x-ink); }
.st-pills a svg { width: 14px; height: 14px; }
.st-pill-all { background: transparent !important; border-color: transparent !important; text-decoration: underline !important; text-decoration-color: var(--x-saffron) !important; text-underline-offset: 4px; }
.st-trade-box { margin-top: clamp(28px, 3.4vw, 44px); padding: clamp(22px, 2.8vw, 34px) clamp(24px, 3vw, 40px); border-radius: 24px; background: var(--x-stone); }
.st-trade-box p:where(:not(.x-eyebrow)) { font: 500 clamp(1.15rem, 1.6vw, 1.4rem)/1.45 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); max-width: 60ch; }
.st-tab-l { font-size: var(--fs-small); color: var(--x-muted); margin-bottom: 18px; }
.home main .st-works-b .sp-dir-head h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); margin: 0; }
.home main .st-cities-h { font-size: clamp(1.8rem, 2.8vw, 2.6rem); margin-bottom: clamp(20px, 2.4vw, 30px); }
.st-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); border-top: 1px solid var(--x-line); }
.st-list a { display: grid; gap: 4px; padding: 16px 4px; border-bottom: 1px solid var(--x-line); text-decoration: none; color: inherit; transition: background-color .15s; }
.st-list a:hover { background: var(--x-stone); }
.st-list b { font: 500 1.2rem/1.2 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); }
.st-list span { font-size: .88rem; line-height: 1.5; color: var(--x-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) {
  .st-hd-in, .st-row, .st-city-grid, .st-list { grid-template-columns: minmax(0, 1fr); }
  .st-chips { grid-template-columns: minmax(0, 1fr); }
  .st-hd-b .sp-art { display: none; }
  .st-trade, .st-works, .st-cities, .st-faq { padding-top: 72px; }
  .st-deliver-in { padding: 20px; }
}

/* state pages B: city descriptions in full, no clamp */
.st-list span { display: block; -webkit-line-clamp: unset; overflow: visible; line-height: 1.55; }
.st-list a { padding: 18px 4px; align-content: start; }
@media (max-width: 900px) { .st-trade-box { padding: 20px; } .st-trade-box p:where(:not(.x-eyebrow)) { font-size: 1.08rem; line-height: 1.5; } }
/* state pages B: who we supply */
.st-who { padding-top: clamp(80px, 10vw, 140px); }
.home main .st-who h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
.st-who .pp-sec-head p:where(:not(.x-eyebrow)) { font-size: var(--fs-sub); color: var(--x-body); }
.st-who-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-who-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid var(--x-line); border-radius: 24px; padding: clamp(24px, 2.8vw, 34px); }
.st-who-n { font: 700 .72rem/1 var(--sans); letter-spacing: .12em; color: var(--x-amber); }
.home main .st-who-card h3 { font: 500 clamp(1.35rem, 1.9vw, 1.65rem)/1.15 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.015em; color: var(--x-ink); }
.st-who-card > p:not(.st-who-links) { font-size: var(--fs-body); line-height: 1.6; color: var(--x-body); max-width: 52ch; }
.st-who-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.st-who-links a { font: 600 .82rem/1 var(--sans); padding: 8px 12px; border-radius: 999px; background: var(--x-stone); color: var(--x-ink); text-decoration: none; transition: background-color .15s; }
.st-who-links a:hover { background: #e6e0d2; }
.st-who-card .sd-link { margin-top: auto; padding-top: 10px; font-size: .92rem; }
@media (max-width: 900px) { .st-who-grid { grid-template-columns: minmax(0, 1fr); } .st-who { padding-top: 72px; } }

/* state pages B, enhanced: stone hero with the family group, editorial trade line, icon cards, green delivery band */
.st-hero { padding: clamp(18px, 2.4vw, 30px) 0 0; }
.st-hero .crumb { margin-bottom: clamp(16px, 2vw, 24px); }
.st-hero-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; background: #efe9dc; border-radius: 32px; padding: clamp(32px, 4.4vw, 64px) clamp(24px, 4vw, 64px); overflow: hidden; min-height: clamp(440px, 40vw, 560px); }
.home main .st-hero-card h1 { font-size: clamp(2.3rem, 4.2vw, 3.8rem); line-height: 1; margin-bottom: 18px; max-width: 14ch; }
.st-hero-card .st-lede { max-width: 42ch; }
.st-hero-facts { list-style: none; margin: clamp(26px, 3vw, 36px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.st-hero-facts li { font: 600 .84rem/1 var(--sans); padding: 9px 13px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--x-ink); }
.st-hero-facts b { font-weight: 700; }
.st-fam { position: relative; align-self: stretch; min-height: 340px; }
.st-f { position: absolute; width: auto; filter: drop-shadow(0 22px 22px rgba(60, 45, 15, .2)); }
.f-c1 { height: 86%; right: 4%; bottom: 14%; }
.f-c2 { height: 72%; right: 30%; bottom: 17%; }
.f-c3 { height: 56%; right: 54%; bottom: 19%; }
.f-b1 { height: 44%; left: 2%; bottom: 6%; }
.f-b2 { height: 46%; left: 26%; bottom: 3%; }
.f-b3 { height: 40%; left: 52%; bottom: 4%; }
.f-t { height: 19%; right: 2%; bottom: 0; }
.st-trade-e { padding-top: clamp(72px, 9vw, 120px); }
.st-trade-e-in { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 64px); align-items: start; }
.st-trade-e-in .x-eyebrow { margin-top: 10px; }
.st-trade-e-p { font: 500 clamp(1.35rem, 2.1vw, 1.85rem)/1.42 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.01em; color: var(--x-ink); padding-left: clamp(18px, 2vw, 28px); border-left: 3px solid var(--x-saffron); }
.st-who-e .st-who-card { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .25s; }
.st-who-e .st-who-card:hover { transform: translateY(-4px); box-shadow: 0 34px 56px -38px rgba(21, 19, 15, .4); border-color: transparent; }
.st-who-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 6px; }
.st-who-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #e3ece5; color: var(--x-green); }
.st-who-ic svg { width: 24px; height: 24px; }
.st-list-e a { grid-template-columns: minmax(0, 1fr) 18px; column-gap: 16px; }
.st-list-e a b, .st-list-e a span { grid-column: 1; }
.st-list-e a i { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--x-ink); opacity: .35; transition: opacity .15s, transform .2s; }
.st-list-e a i svg { width: 16px; height: 16px; display: block; }
.st-list-e a:hover i { opacity: 1; transform: translateX(3px); }
.st-band { margin: clamp(72px, 9vw, 120px) 12px 0; border-radius: 28px; background: #17352a; color: rgba(255, 248, 234, .84); }
.st-band-in { max-width: 1280px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--pad); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 48px); align-items: center; }
.st-band .x-eyebrow { color: var(--x-saffron); }
.home main .st-band h2 { color: var(--x-cream); font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin: 0; max-width: 18ch; }
.st-band ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-band li { position: relative; padding-left: 26px; font-size: var(--fs-body); }
.st-band li::before { content: ""; position: absolute; left: 0; top: .45em; width: 13px; height: 7px; border-left: 2px solid var(--x-saffron); border-bottom: 2px solid var(--x-saffron); transform: rotate(-45deg); }
.st-band .x-btn-main { background: var(--x-cream); color: #17352a; }
.st-band .x-btn-main:hover { background: #fff; color: #17352a; }
@media (max-width: 900px) {
  .st-hero-card { grid-template-columns: minmax(0, 1fr); padding: 28px 22px 0; border-radius: 24px; min-height: 0; }
  .st-fam { min-height: 0; height: 64vw; margin: 0 -10px; }
  .st-trade-e-in, .st-band-in { grid-template-columns: minmax(0, 1fr); }
  .st-band { margin-top: 64px; }
}
.st-hero-facts { gap: 6px; } .st-hero-facts li { font-size: .78rem; padding: 8px 11px; }
/* state pages B: the family group on the page itself, no box; the green band closes the page */
.st-hero-card { background: none; border-radius: 0; padding: clamp(8px, 1.4vw, 20px) 0 0; overflow: visible; }
.st-hero-facts li { background: var(--x-stone); }
.st-band-end { margin-top: clamp(32px, 4vw, 56px); margin-bottom: 12px; }
@media (max-width: 900px) { .st-hero-card { padding: 4px 0 0; } .st-fam { margin: 8px -6px 0; } }

/* state pages B, colour pass: a composed family group, a saffron trade panel, a stone band behind the buyers, pins */
.st-fam { align-self: center; min-height: 0; }
.st-fam-in { position: relative; width: 100%; aspect-ratio: 1.1 / 1; }
.st-fam-in::before { content: ""; position: absolute; left: 4%; right: 2%; bottom: -2%; height: 12%; border-radius: 50%; background: rgba(110, 90, 50, .22); filter: blur(22px); }
.st-fam-in .st-f { position: absolute; width: auto; filter: drop-shadow(0 18px 18px rgba(60, 45, 15, .16)); }
.g-c2 { height: 62%; left: 30%; bottom: 14%; }
.g-c1 { height: 82%; left: 56%; bottom: 10%; }
.g-b1 { height: 40%; left: 4%; bottom: 4%; }
.g-b2 { height: 36%; left: 30%; bottom: 2%; }
.g-t { height: 13%; left: 64%; bottom: 0; }
.st-trade-e { padding-top: clamp(64px, 8vw, 110px); }
.st-trade-e-in { background: #fbeed3; border-radius: 28px; padding: clamp(32px, 4.4vw, 60px) clamp(24px, 4.4vw, 64px); }
.st-trade-e-in .x-eyebrow { color: #8a5d0c; }
.st-trade-e-p { border-left-color: var(--x-saffron); border-left-width: 4px; }
.st-who-band { margin: clamp(64px, 8vw, 110px) 12px 0; padding: clamp(56px, 7vw, 96px) 0; border-radius: 28px; background: #efe9dc; }
.st-who-band .st-who-card { border-color: transparent; box-shadow: 0 1px 2px rgba(21, 19, 15, .05); }
.st-who-band .st-who-ic { background: var(--x-green); color: var(--x-cream); }
.st-who-band .st-who-n { color: #b9790a; font-size: .8rem; }
.st-who-band .st-who-links a { background: #f4efe4; }
.st-who-band .st-who-card:hover { box-shadow: 0 34px 56px -36px rgba(21, 19, 15, .4); }
.st-list-e b { display: flex; align-items: center; gap: 8px; }
.st-pin { display: inline-flex; color: var(--x-saffron); }
.st-pin svg { width: 16px; height: 16px; }
.st-list-e a:hover b { color: var(--x-green); }
@media (max-width: 900px) { .st-who-band { margin-top: 56px; padding: 48px 0; } .st-trade-e-in { padding: 26px 22px; } }

/* state pages B, pass three: level boxes and a row of tubes; three buyers across; city cards; tighter close */
.h-c2 { height: 60%; left: 32%; bottom: 16%; }
.h-c1 { height: 80%; left: 57%; bottom: 12%; }
.h-b1 { height: 38%; left: 1%; bottom: 11%; }
.h-b2 { height: 34%; left: 25%; bottom: 11%; }
.h-t1 { height: 11%; left: 3%; bottom: 0; }
.h-t2 { height: 11%; left: 25%; bottom: 0; }
.h-t3 { height: 11%; left: 47%; bottom: 0; }
.h-t4 { height: 11%; left: 70%; bottom: 0; }
.st-hero + .st-who-band { margin-top: clamp(48px, 6vw, 88px); }
.st-who3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-who3 .st-who-card { border-color: transparent; box-shadow: 0 1px 2px rgba(21, 19, 15, .05); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.st-who3 .st-who-card:hover { transform: translateY(-4px); box-shadow: 0 34px 56px -36px rgba(21, 19, 15, .4); }
.st-cities-c { padding-top: clamp(80px, 10vw, 130px); }
.st-cc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.st-cc { position: relative; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--x-line); border-radius: 22px; padding: 22px 22px 20px; text-decoration: none; color: inherit; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .25s; }
.st-cc:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -36px rgba(21, 19, 15, .4); border-color: transparent; }
.st-cc-pin { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fbeed3; color: #c6830b; margin-bottom: 4px; }
.st-cc-pin svg { width: 18px; height: 18px; }
.st-cc b { font: 500 1.35rem/1.15 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.01em; color: var(--x-ink); }
.st-cc-t { font-size: .92rem; line-height: 1.55; color: var(--x-body); flex: 1; }
.st-cc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--x-line); font: 600 .86rem/1 var(--sans); color: var(--x-green); }
.st-cc-go svg { width: 14px; height: 14px; transition: transform .2s; }
.st-cc:hover .st-cc-go svg { transform: translateX(4px); }
.st-cities-c .x-note { margin-top: 18px; }
.st-near { padding-bottom: 0; }
.st-band-end { margin-top: clamp(28px, 3.4vw, 44px); }
@media (max-width: 900px) { .st-who3, .st-cc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 640px) and (max-width: 900px) { .st-cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* state pages B: the hero as an organised group (tilts, overlaps, a tube on a box, one leaning on a cone) */
.j-c1 { height: 80%; left: 56%; bottom: 12%; }
.j-c2 { height: 60%; left: 33%; bottom: 15%; }
.j-b1 { height: 38%; left: 1%; bottom: 10%; transform: rotate(-3deg); }
.j-b2 { height: 33%; left: 22%; bottom: 5%; transform: rotate(6deg); }
.j-t1 { height: 10.5%; left: 26%; bottom: 37%; transform: rotate(-8deg); }
.j-t2 { height: 11%; left: 44%; bottom: 1%; transform: rotate(10deg); }
.j-t3 { height: 11%; left: 62%; bottom: 0; transform: rotate(-6deg); }
.j-t4 { height: 11%; left: 79%; bottom: 5%; transform: rotate(-22deg); }
.st-who3 .st-who-card > p:not(.st-who-links) { font-size: 1.04rem; line-height: 1.5; color: var(--x-body); }
.st-who3 .st-who-card { padding-bottom: 26px; }
.j-t4 { left: 78%; bottom: 1%; transform: rotate(-16deg); }
.hx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; margin-top: clamp(28px, 3.4vw, 44px); }
.hx { margin: 0; }
.hx-pic { background: #faf8f4; border: 1px solid var(--x-line); border-radius: 22px; overflow: hidden; }
.hx-pic img { display: block; width: 100%; height: auto; }
.hx figcaption { margin-top: 14px; font: 500 1.25rem/1.25 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); }
.hx figcaption b { font: 700 .9rem/1 var(--sans); color: var(--x-amber); margin-right: 6px; }
.hx figcaption span { display: block; margin-top: 6px; font: 400 .94rem/1.5 var(--sans); color: var(--x-body); }
@media (max-width: 900px) { .hx-grid { grid-template-columns: minmax(0, 1fr); } }
.hx-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.home main .hx-h2 { font-size: 1.6rem; margin-top: clamp(64px, 8vw, 110px); color: var(--x-muted); }
@media (max-width: 900px) { .hx-grid2 { grid-template-columns: minmax(0, 1fr); } }
/* state pages B: the hero group as one rendered image (tools/state-hero.py) */
.st-fam-img { align-self: center; min-height: 0; }
.st-fam-img img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .st-fam-img { height: auto; margin: 12px -8px 0; } }
/* the narrowest phones (≤ 400 px): header fits without sideways scroll */
@media (max-width: 400px) {
  .hdr-in { gap: 10px; }
  .hdr-end { gap: 6px; }
  .brand { gap: 7px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 8px; }
  .brand-name { font-size: 1.08rem; }
  .hdr .btn, .home .hdr .btn { padding: 10px 13px; font-size: .86rem; gap: 6px; }
  .home .hdr .btn-wa svg { margin-right: 0; }
}
/* state pages: long state names get a smaller headline; the product group is held to a sensible width on tablets */
.home main .st-hero-card h1.st-long { font-size: clamp(2rem, 3.1vw, 2.85rem); max-width: 18ch; }
.home main .st-who-band.st-long h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); max-width: 26ch; }
@media (min-width: 560px) and (max-width: 900px) { .st-fam-img { max-width: 560px; margin: 16px auto 0; } }
/* city pages: a single very long city name (Thiruvananthapuram) is held to one line on phones */
.home main .st-hero-card h1.cy-long { max-width: none; }
@media (max-width: 480px) { .home main .st-hero-card h1.cy-long { font-size: 1.7rem; } }
@media (min-width: 1200px) { .home main .st-hero-card h1.cy-long { font-size: min(3.6vw, 3.2rem); } }

/* =====================================================================
   CITY PAGE OPTIONS (.cy-*): share the state hero, band, FAQ and pills
   ===================================================================== */
.cy-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cy-chips span { font: 600 .84rem/1 var(--sans); padding: 9px 13px; border-radius: 999px; background: #fff; color: var(--x-ink); box-shadow: inset 0 0 0 1px rgba(138, 93, 12, .18); }
/* A */
.cy-two { padding-top: clamp(56px, 7vw, 100px); }
.cy-two-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.cy-sews { background: #fbeed3; border-radius: 28px; padding: clamp(28px, 3.4vw, 44px); }
.cy-sews .x-eyebrow { color: #8a5d0c; }
.cy-trade { font: 500 clamp(1.25rem, 1.8vw, 1.6rem)/1.42 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.01em; color: var(--x-ink); }
.home main .cy-thread h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin-bottom: 18px; }
.cy-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cy-rows a { display: grid; grid-template-columns: 64px minmax(0, 1fr) 18px; gap: 16px; align-items: center; padding: 10px 18px 10px 10px; background: #fff; border: 1px solid var(--x-line); border-radius: 18px; text-decoration: none; color: inherit; transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .2s; }
.cy-rows a:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -30px rgba(21, 19, 15, .4); border-color: transparent; }
.cy-row-pic { width: 64px; height: 64px; border-radius: 14px; background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 7px; overflow: hidden; }
.cy-row-pic > img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.cy-row-pic .po-cone { height: 100%; filter: none; }
.cy-row-t b { display: block; font: 500 1.15rem/1.2 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.cy-row-t small { font-size: .86rem; color: var(--x-muted); }
.cy-rows i { color: var(--x-ink); opacity: .4; transition: opacity .15s, transform .2s; }
.cy-rows i svg { width: 16px; height: 16px; display: block; }
.cy-rows a:hover i { opacity: 1; transform: translateX(3px); }
.cy-thread .x-note { margin-top: 16px; }
.cy-steps-band { margin: clamp(64px, 8vw, 110px) 12px 0; padding: clamp(52px, 6.4vw, 88px) 0; border-radius: 28px; background: #efe9dc; }
.home main .cy-steps-band h2, .home main .cy-thread-b h2, .home main .cy-steps-b h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
.cy-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cy-steps li { background: #fff; border-radius: 22px; padding: 26px 26px 24px; display: grid; gap: 10px; align-content: start; }
.cy-steps b { font: 600 1.12rem/1.3 var(--sans); color: var(--x-ink); }
.cy-steps p { font-size: var(--fs-body); line-height: 1.55; color: var(--x-body); }
.cy-steps .pf-n { background: var(--x-green); }
/* B */
.cy-sews-b { padding-top: clamp(64px, 8vw, 110px); }
.cy-sews-b-in { display: grid; grid-template-columns: minmax(0, .35fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 64px); align-items: start; background: #fbeed3; border-radius: 28px; padding: clamp(32px, 4.4vw, 60px) clamp(24px, 4.4vw, 64px); }
.cy-sews-b-in .x-eyebrow { color: #8a5d0c; margin-top: 10px; }
.cy-trade-b { font: 500 clamp(1.35rem, 2.1vw, 1.85rem)/1.42 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.01em; color: var(--x-ink); padding-left: clamp(18px, 2vw, 28px); border-left: 4px solid var(--x-saffron); }
.cy-sews-b .cy-chips { padding-left: clamp(22px, 2.3vw, 32px); }
.cy-thread-b { padding-top: clamp(80px, 10vw, 130px); }
.cy-thread-b .po-tile { position: relative; }
.cy-for { position: absolute; left: 16px; top: 16px; z-index: 1; font: 700 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: var(--x-green); color: var(--x-cream); }
.cy-thread-b .x-note { margin-top: 18px; }
.cy-steps-b { padding-top: clamp(80px, 10vw, 130px); }
.cy-near-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cy-near { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--x-line); border-radius: 18px; text-decoration: none; color: inherit; transition: border-color .15s, transform .2s; }
.cy-near:hover { border-color: var(--x-ink); transform: translateY(-2px); }
.cy-near .st-cc-pin { margin: 0; flex: none; }
.cy-near b { display: block; font: 500 1.15rem/1.2 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--x-ink); }
.cy-near small { font-size: .84rem; color: var(--x-muted); }
.cy-near-all { margin-top: 16px; }
.cy-near-all a { display: inline-flex; align-items: center; gap: 6px; font: 600 .92rem/1 var(--sans); color: var(--x-ink); text-decoration: none; border-bottom: 1.5px solid var(--x-saffron); padding-bottom: 2px; }
.cy-near-all a svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .cy-two-in, .cy-steps, .cy-sews-b-in, .cy-near-grid { grid-template-columns: minmax(0, 1fr); }
  .cy-steps-band { margin-top: 56px; padding: 48px 0; }
  .cy-sews-b-in { padding: 26px 22px; }
  .cy-sews-b .cy-chips { padding-left: 0; }
}
@media (min-width: 560px) and (max-width: 900px) { .cy-near-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* city pages B: the full range in two groups of compact tiles */
.cy-thread-b .pp-sec-head p:where(:not(.x-eyebrow)) { font-size: var(--fs-sub); color: var(--x-body); }
.cy-grp + .cy-grp { margin-top: clamp(40px, 5vw, 64px); }
.home main .cy-grp .po-h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.cy-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cy-grid4 .po-tile-pic { height: 210px; padding: 24px 20px 8px; }
.cy-grid4 .po-tile-cap b { font-size: 1.5rem; }
.cy-grid4 .po-tile-cap { padding: 8px 18px 0; }
.cy-grid4 .po-tile-sub, .cy-grid4 .po-tile-more { padding-left: 18px; padding-right: 18px; }
.cy-grid4 .cy-for { left: 12px; top: 12px; font-size: .62rem; padding: 6px 9px; }
.cy-thread-b + .cy-steps-b { padding-top: clamp(80px, 10vw, 130px); }
.cy-steps-b + .st-faq + .st-band-end, .st-faq + .st-band-end { margin-top: clamp(64px, 8vw, 104px); }
@media (max-width: 1100px) { .cy-grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cy-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cy-grid4 .po-tile-pic { height: 160px; } }
.cy-grid4 .po-tile-cap b { font-size: 1.35rem; white-space: nowrap; }
.cy-grid4 .po-tile-cap span { font-size: .58rem; letter-spacing: .06em; white-space: nowrap; }
.cy-grid4 .po-tile-go { margin-left: 6px; }
/* city pages B: what goes into every cone (green) and the shade range */
.cy-ben { margin-top: clamp(72px, 9vw, 120px); }
.cy-ben-list li { grid-template-columns: 3rem minmax(0, 1fr); align-items: start; font-size: inherit; }
.cy-ben-list li span { padding-top: .5em; }
.cy-ben-list b { display: block; font: 500 clamp(1.4rem, 2.2vw, 1.9rem)/1.15 var(--x-serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.015em; color: var(--x-cream); }
.cy-ben-list small { display: block; margin-top: 6px; font: 400 1rem/1.5 var(--sans); color: rgba(255, 248, 234, .78); letter-spacing: 0; }
.cy-shades { padding-top: clamp(64px, 8vw, 110px); }
.cy-shades-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.home main .cy-shades h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.cy-shades-copy > p:where(:not(.x-eyebrow)) { font-size: var(--fs-sub); line-height: 1.55; color: var(--x-body); max-width: 44ch; margin-bottom: 26px; }
.cy-swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; padding: clamp(16px, 2vw, 24px); background: #fff; border: 1px solid var(--x-line); border-radius: 24px; }
.cy-swatches i { display: block; aspect-ratio: 1; border-radius: 10px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(21, 19, 15, .08); transition: transform .15s; }
.cy-swatches i:hover { transform: scale(1.08); }
.cy-shades + .cy-steps-b { padding-top: clamp(80px, 10vw, 130px); }
@media (max-width: 900px) {
  .cy-shades-in { grid-template-columns: minmax(0, 1fr); }
  .cy-swatches { gap: 6px; padding: 14px; }
  .cy-ben { margin-top: 64px; }
}

/* =====================================================================
   404 (.nf-*): the city hero group, then four ways onward
   ===================================================================== */
.nf-links { padding: 0 0 clamp(56px, 7vw, 96px); }
.nf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.nf-tile { position: relative; display: grid; gap: 6px; align-content: start; padding: 22px 50px 22px 22px; background: #fff; border: 1px solid var(--x-line); border-radius: 18px; text-decoration: none; color: var(--x-ink); transition: transform .16s, box-shadow .2s; }
.nf-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(40, 50, 30, .08); }
.nf-tile b { font: 600 1.1rem/1.2 var(--display); }
.nf-tile span { font-size: .9rem; line-height: 1.45; color: var(--x-muted); }
.nf-tile i { position: absolute; right: 18px; top: 22px; width: 18px; height: 18px; color: var(--x-amber); }
.nf-tile i svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .nf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .nf-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   PRIVACY (.pol-*): contents on the left, plain reading column on the right; reuses the About list rows
   ========================================================================== */
.pol { padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 9vw, 128px); }
.pol-in { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.pol-toc { position: sticky; top: 104px; }
.pol-toc ul { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--x-line); }
.pol-toc a { display: block; padding: 12px 0; border-bottom: 1px solid var(--x-line); font: 500 .98rem/1.3 var(--sans); color: var(--x-ink); text-decoration: none; }
.pol-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pol-art > section { scroll-margin-top: 104px; }
.pol-art > section + section { margin-top: clamp(44px, 5.4vw, 72px); }
.home main .pol-art h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-bottom: 16px; }
.home main .pol-art h3 { margin: 26px 0 8px; font-size: 1.12rem; }
.pol-art p { font-size: 1.05rem; line-height: 1.65; color: var(--x-body); max-width: 62ch; margin: 0 0 14px; }
.pol-art p b { color: var(--x-ink); font-weight: 600; }
.pol-art a { color: var(--x-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pol-art .ab-who-list { margin-bottom: 18px; }
.pol-art .ab-who-list dt small { display: block; margin-top: 4px; font: 500 .82rem/1.3 var(--sans); letter-spacing: 0; color: var(--x-muted); }
.pol-art .ab-who-list dd a { white-space: nowrap; }
.ft-legal { display: inline-flex; gap: 18px; flex-wrap: wrap; }
.ft-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .pol-in { grid-template-columns: minmax(0, 1fr); }
  .pol-toc { position: static; }
  .pol-toc ul { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .pol-toc a { border: 1px solid var(--x-line); border-radius: 999px; padding: 8px 14px; font-size: .9rem; }
}

/* ==========================================================================
   FACTORY PHOTOS (.fx-*): the real photographs of the unit and the one floor video (14 Oct 2026)
   ========================================================================== */
.fx-ph { position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: var(--x-stone); aspect-ratio: 3 / 2; }
.fx-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-ph figcaption, .fx-vid figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--x-ink); font: 600 .8rem/1.15 var(--sans); letter-spacing: -.005em; }
.fx-vid { position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: #24221e; aspect-ratio: 478 / 598; }
.fx-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-vid-btn { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--x-ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.fx-vid-btn svg { width: 14px; height: 14px; }
.fx-vid .i-pause, .fx-vid.is-playing .i-play { display: none; }
.fx-vid.is-playing .i-pause { display: block; }
.fx-vid-btn:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 2px; }

/* home, About SRT Threads: the hall wide on top, the video tall on the left, stock and boxes under the hall */
.x-about-photos.fx-bento { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.fx-bento .fx-vid { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; min-height: 280px; }
.fx-bento .fx-wide { grid-column: 2 / span 2; grid-row: 1; }
.fx-bento .fx-s1 { grid-column: 2; grid-row: 2; }
.fx-bento .fx-s2 { grid-column: 3; grid-row: 2; }

/* About, where it is made: the floor large, four beside it */
.fx-mosaic { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.fx-mosaic .fx-big { grid-row: span 2; aspect-ratio: auto; }
.fx-mosaic .fx-big img { position: absolute; inset: 0; }
.ab-sec.fx-floor { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(24px, 3vw, 40px); }
.fx-floor-in { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.fx-floor .fx-vid { width: 100%; max-width: 420px; }
.home main .fx-floor-copy h2 { font-size: var(--fs-h2); margin-bottom: 16px; }
.fx-floor-copy p:where(:not(.x-eyebrow)) { font-size: var(--fs-sub); line-height: 1.55; color: var(--x-body); max-width: 42ch; margin-bottom: 14px; }

/* strips: Shade card (two) and Export (three) */
.fx-strip { padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 9vw, 120px); }
.fx-head { max-width: 760px; margin-bottom: clamp(24px, 3vw, 40px); }
.home main .fx-head h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
.fx-head p:where(:not(.x-eyebrow)) { font-size: var(--fs-lede); line-height: 1.55; color: var(--x-body); max-width: 56ch; }
.fx-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fx-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* a real photograph inside the product gallery fills the frame */
.pv-view.pv-view-photo { padding: 0; }
.pv-view-photo > img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none; }
.pv-thumb:has(> .pv-photo) { padding: 0; overflow: hidden; }
.pv-thumb > .pv-photo { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

@media (max-width: 900px) {
  .x-about-photos.fx-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .fx-bento .fx-wide { grid-column: 1 / -1; grid-row: 1; }
  .fx-bento .fx-vid { grid-column: 1; grid-row: 2 / span 2; min-height: 0; }
  .fx-bento .fx-s1 { grid-column: 2; grid-row: 2; }
  .fx-bento .fx-s2 { grid-column: 2; grid-row: 3; }
  .fx-mosaic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .fx-mosaic .fx-big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .fx-floor-in { grid-template-columns: minmax(0, 1fr); }
  .fx-floor .fx-vid { max-width: 340px; }
  .fx-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .fx-row:not(.fx-row-2) > :first-child { grid-column: 1 / -1; }
  .fx-ph, .fx-vid { border-radius: 16px; }
  .fx-ph figcaption, .fx-vid figcaption { left: 8px; bottom: 8px; padding: 6px 10px; font-size: .74rem; }
  .fx-vid-btn { right: 8px; top: 8px; width: 34px; height: 34px; }
}
@media (max-width: 520px) {
  .fx-row, .fx-row-2 { grid-template-columns: minmax(0, 1fr); }
  .fx-row:not(.fx-row-2) > :first-child { grid-column: auto; }
}
@media (max-width: 380px) {
  .fx-ph figcaption, .fx-vid figcaption { left: 7px; bottom: 7px; padding: 5px 8px; font-size: .68rem; border-radius: 8px; }
}

.fx-quotes { padding-bottom: clamp(24px, 3vw, 48px); }
/* a buyer's quote is signed with the occupation only (no names): small icon tile + occupation */
.pv-q-trade { display: flex; align-items: center; gap: 12px; }
.pv-q-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--x-green); color: var(--x-cream); }
.pv-q-ic svg { width: 20px; height: 20px; }
.pv-q-trade b { font: 600 var(--fs-small)/1.3 var(--sans); color: var(--x-ink); }
.pv-q-big .pv-q-ic { background: var(--x-saffron); color: #17352a; }
.pv-q-big .pv-q-trade b { color: var(--x-cream); }

/* buyer quotes: three equal cards in a row (product pages, About, Export); quotes and signatures line up, the first card on green */
.pv-q-row { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pv-q-row-2 { --cols: 2; } .pv-q-row-1 { --cols: 1; max-width: 640px; }
.pv-q-row .pv-q { padding: clamp(24px, 2.4vw, 34px); gap: 20px; }
.pv-q-row .pv-q blockquote { flex: 1; font-size: clamp(1.06rem, 1.25vw, 1.2rem); line-height: 1.5; }
.pv-q-row .pv-q-mark { height: 1.3rem; }
.pv-q-row .pv-q-trade { padding-top: 18px; border-top: 1px solid var(--x-line); }
.pv-q-lead { background: #17352a; border-color: transparent; }
.pv-q-lead blockquote { color: var(--x-cream); }
.pv-q-lead .pv-q-ic { background: var(--x-saffron); color: #17352a; }
.pv-q-lead .pv-q-trade { border-top-color: rgba(255, 248, 234, .16); }
.pv-q-lead .pv-q-trade b { color: var(--x-cream); }
@media (max-width: 1024px) and (min-width: 901px) { .pv-q-row .pv-q blockquote { font-size: 1.02rem; } }
@media (max-width: 900px) { .pv-q-row { grid-template-columns: minmax(0, 1fr); gap: 12px; } .pv-q-row-1 { max-width: none; } }