/* PHOMI — Product page (PDP). Ported from Design Refrence/product.css.
   Tweaks-panel + hide-section utilities are intentionally dropped (those
   were design-preview only and have no production use).

   The hardcoded body[data-variation="<slug>"] blocks below are the v0.1
   defaults for the 8 Travertine tones. Postmeta-declared tones light up
   via the inline <style> phomi_pdp_variation_css() emits in <head>. */

/* ─── Per-variation tokens, swapped via [data-variation] on <body> ─── */
:root{
  --v-base:#d6c7ad;
  --v-mid:#b9a583;
  --v-deep:#8a7250;
  --v-vein:#ecdfc4;
  --v-glow:#d8c298;
  --v-ink:#3a2f1f;
}
body[data-variation="coral"]{
  --v-base:#dab39a; --v-mid:#b8856a; --v-deep:#6e4838;
  --v-vein:#ecc9b1; --v-glow:#d8a988; --v-ink:#3e271b;
}
body[data-variation="rome"]{
  --v-base:#d6c7ad; --v-mid:#b9a583; --v-deep:#8a7250;
  --v-vein:#ecdfc4; --v-glow:#d8c298; --v-ink:#3a2f1f;
}
body[data-variation="oceanic"]{
  --v-base:#aab6bd; --v-mid:#7d8c95; --v-deep:#4a5862;
  --v-vein:#c5cdd2; --v-glow:#9aa8b0; --v-ink:#1d262d;
}
body[data-variation="greece"]{
  --v-base:#e0d8c4; --v-mid:#c8baa0; --v-deep:#8c8067;
  --v-vein:#efe8d6; --v-glow:#d8ccaf; --v-ink:#3d3624;
}
body[data-variation="ghana"]{
  --v-base:#c19a6b; --v-mid:#967550; --v-deep:#5d4628;
  --v-vein:#d4b285; --v-glow:#b58c5f; --v-ink:#2e2113;
}
body[data-variation="anthill"]{
  --v-base:#8a7158; --v-mid:#5e4732; --v-deep:#2f1f12;
  --v-vein:#9c8268; --v-glow:#735b43; --v-ink:#1a0e06;
}
body[data-variation="cloud-silk"]{
  --v-base:#c8c3b9; --v-mid:#a09a8d; --v-deep:#6c685e;
  --v-vein:#ddd9d0; --v-glow:#b8b3a8; --v-ink:#2f2c25;
}
body[data-variation="lane-crawford"]{
  --v-base:#b89878; --v-mid:#8a6c50; --v-deep:#56402d;
  --v-vein:#ceb094; --v-glow:#a98970; --v-ink:#2c1f12;
}

/* ─── Breadcrumb / context strip ─── */
/* .crumb (breadcrumb strip) lives in styles.css now — it's a shared
   component used by the product, category AND generic page templates,
   and styles.css is the only sheet loaded on all of them. */

/* ─── Product hero ─── */
.product-hero{
  position:relative;
  min-height:780px;
  height:92vh;
  background:var(--ink);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
/* Establish a size container so .surface-photo--rotated can use cqh/cqw
   to swap its dimensions and cover the hero after a 90° rotation. */
.product-hero .surface{ container-type:size }
.product-hero .surface img.surface-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  z-index:0;
}
.product-hero .surface img.surface-photo.surface-photo--rotated{
  position:absolute;
  /* width/height set by app.js sizeRotated() — parent's height becomes
     img width, parent's width becomes img height, so post-rotation the
     img covers the .surface exactly. */
  top:auto; right:auto; bottom:auto; left:auto;
  top:50%; left:50%;
  transform:translate(-50%, -50%) rotate(90deg);
  transform-origin:center center;
}
/* The dark vignette overlay that used to be the first layer of the inline
   `background-image: linear-gradient(), url()` shorthand now lives in a
   ::before so it stacks above the photo and below the .pits / .grain-over
   noise overlays. Only painted when there's a photo (.has-photo). */
.product-hero.has-photo .surface::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(180deg,
    rgba(15,20,25,.85) 0%,
    rgba(15,20,25,.55) 28%,
    rgba(15,20,25,.50) 55%,
    rgba(15,20,25,.90) 100%);
  pointer-events:none;
}
.product-hero .surface{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,0) 22%, rgba(8,8,10,0) 60%, rgba(8,8,10,.7) 100%),
    radial-gradient(70% 50% at 75% 18%, color-mix(in oklch, var(--v-glow) 80%, white) 0%, transparent 60%),
    radial-gradient(70% 60% at 18% 90%, color-mix(in oklch, var(--v-deep) 90%, black) 0%, transparent 65%),
    repeating-linear-gradient(98deg,
      color-mix(in oklch, var(--v-vein) 60%, transparent) 0 2px,
      transparent 2px 38px,
      color-mix(in oklch, var(--v-deep) 22%, transparent) 38px 39px,
      transparent 39px 88px),
    radial-gradient(28% 22% at 30% 35%, color-mix(in oklch, var(--v-base) 55%, transparent), transparent 70%),
    radial-gradient(20% 18% at 65% 65%, color-mix(in oklch, var(--v-vein) 35%, transparent), transparent 70%),
    radial-gradient(40% 30% at 80% 80%, color-mix(in oklch, var(--v-deep) 38%, transparent), transparent 70%),
    linear-gradient(135deg, var(--v-mid) 0%, var(--v-base) 45%, var(--v-mid) 100%);
  /* `filter` + `will-change: transform` removed alongside the parallax JS.
     The surface is now a static, flat-painted layer the compositor can
     leave alone during scroll. */
  transition:background-color .8s var(--easing);
}
.product-hero .pits{
  position:absolute; inset:0;
  pointer-events:none;
  /* Skip the mix-blend composite when a real photo replaces the gradient
     surface (the photo already brings its own texture). The 11 radial
     dots stay as a subtle inline overlay via opacity only. */
  mix-blend-mode:initial;
  background-image:
    radial-gradient(2px 2px at 14% 22%, color-mix(in oklch, var(--v-deep) 90%, black) 50%, transparent 60%),
    radial-gradient(3px 1.5px at 28% 41%, color-mix(in oklch, var(--v-deep) 70%, black) 50%, transparent 60%),
    radial-gradient(1.5px 1.5px at 36% 14%, color-mix(in oklch, var(--v-deep) 80%, black) 50%, transparent 60%),
    radial-gradient(2.5px 2px at 52% 33%, color-mix(in oklch, var(--v-deep) 75%, black) 50%, transparent 60%),
    radial-gradient(2px 2px at 64% 19%, color-mix(in oklch, var(--v-deep) 85%, black) 50%, transparent 60%),
    radial-gradient(1px 1px at 78% 28%, color-mix(in oklch, var(--v-deep) 90%, black) 50%, transparent 60%),
    radial-gradient(3px 2px at 88% 52%, color-mix(in oklch, var(--v-deep) 70%, black) 50%, transparent 60%),
    radial-gradient(2px 1px at 18% 62%, color-mix(in oklch, var(--v-deep) 75%, black) 50%, transparent 60%),
    radial-gradient(2.5px 2.5px at 40% 78%, color-mix(in oklch, var(--v-deep) 80%, black) 50%, transparent 60%),
    radial-gradient(1.5px 1.5px at 56% 82%, color-mix(in oklch, var(--v-deep) 85%, black) 50%, transparent 60%),
    radial-gradient(2px 2px at 72% 68%, color-mix(in oklch, var(--v-deep) 70%, black) 50%, transparent 60%);
  mix-blend-mode:multiply;
  opacity:.6;
}
.product-hero .grain-over{
  /* Disabled — repeating-conic-gradient with 0.3° steps + mix-blend-mode
     forces a full re-composite of the hero on every scroll frame, which
     was the dominant cost in profiles. Tiny visual loss (subtle noise)
     for a big scroll-perf win. */
  display:none;
}
.product-hero .ph-tag{
  position:absolute; top:48%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.36);
  padding:8px 14px; border:1px dashed rgba(255,255,255,.22); border-radius:4px;
  z-index:3; pointer-events:none;
}
.product-hero .ph-content{
  position:relative; z-index:5; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:48px; padding-bottom:48px;
}
.product-hero .ph-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:32px; flex-wrap:wrap;
}
.product-hero .ph-eyebrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
  display:flex; align-items:center; gap:14px;
}
.product-hero .ph-eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--primary);
}
.product-hero .ph-format{
  display:inline-flex; gap:18px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.product-hero .ph-format span::before{
  content:""; display:inline-block; width:4px; height:4px; border-radius:50%;
  background:rgba(255,255,255,.4); margin-right:8px; vertical-align:middle;
}
.product-hero h1{
  font-family:var(--f-sans);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:.92;
  font-size:clamp(64px,11vw,196px);
  color:#fff;
  margin-bottom:20px;
}
.product-hero h1 em{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  letter-spacing:-.02em;
}
.product-hero .ph-sub{
  max-width:46ch;
  font-size:18px;
  line-height:1.5;
  color:rgba(255,255,255,.78);
  margin-bottom:32px;
}
.product-hero .ph-bottom{
  display:grid;
  grid-template-columns:1fr auto;
  gap:48px;
  align-items:end;
}
.product-hero .ph-meta-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  max-width:680px;
}
.product-hero .ph-meta-cols .col .lbl{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin-bottom:8px;
}
.product-hero .ph-meta-cols .col .val{
  font-size:15px; line-height:1.45; color:rgba(255,255,255,.92);
}
.product-hero .ph-cta{
  display:inline-flex; align-items:center; gap:12px;
  height:60px; padding:0 14px 0 26px; border-radius:999px;
  background:var(--primary); color:var(--ink);
  font-weight:500; font-size:16px;
  transition:background .2s var(--easing);
}
.product-hero .ph-cta:hover{ background:#fff }
.product-hero .ph-cta .arrow{
  width:36px; height:36px; border-radius:50%;
  background:var(--ink); color:var(--primary);
  display:grid; place-items:center;
}
.product-hero .ph-cta .arrow svg{ width:14px; height:14px }

@media (max-width:900px){
  .product-hero{ min-height:640px; height:auto; padding:24px 0 32px }
  /* On phones the hero is height:auto and grows taller as text reflows /
     fonts load — but the rotated photo is sized once by app.js (no resize
     event fires on content reflow), so it kept its earlier, shorter height
     and left a gap. Disable the rotation on mobile and let object-fit:cover
     fill the whole hero regardless of its final height. The !important beats
     the inline width/height app.js writes on the element. */
  .product-hero .surface img.surface-photo.surface-photo--rotated{
    top:0; left:0;
    width:100% !important; height:100% !important;
    transform:none;
  }
  .product-hero .ph-bottom{ grid-template-columns:1fr; gap:32px }
  .product-hero .ph-meta-cols{ grid-template-columns:repeat(2,1fr) }
  /* In the single-column grid above, the CTA (a grid item) would stretch to
     the full column width by default. Keep it sized to its content. */
  .product-hero .ph-cta{ justify-self:start }
  /* The desktop clamp floor (64px) is far too large for phones — below
     ~580px the floor pins the title huge and long product names ("Travertiin")
     overflow horizontally. Re-clamp with a phone-safe floor + cap and allow
     long single words to break rather than clip. */
  .product-hero h1{ font-size:clamp(40px,11vw,72px); overflow-wrap:break-word; word-break:break-word }
}
@media (max-width:560px){
  .product-hero .ph-meta-cols{ grid-template-columns:1fr; gap:20px }
}

/* ─── Swatch picker ─── */
.swatches{
  background:var(--paper);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:64px 0 56px;
  position:relative;
}
.swatches-head{
  display:grid; grid-template-columns:1.2fr 1fr; gap:48px;
  align-items:end; margin-bottom:36px;
}
.swatches-head h2{
  font-family:var(--f-sans); font-weight:500;
  font-size:clamp(28px,3vw,40px); letter-spacing:-.02em; line-height:1.05;
}
.swatches-head h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400 }
.swatches-head .note{
  font-size:14.5px; color:var(--muted); max-width:48ch;
  /* Push the note block to the right edge of its grid column so it
     sits flush with the nav-cta ("Tule showroomi") above, instead of
     floating in the middle of the column. */
  justify-self:end;
}
.swatches-head .note .sample-link{
  display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px solid currentColor; padding-bottom:1px;
  margin-left:4px;
}
.swatch-row{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:14px;
}
.swatch{
  position:relative; cursor:pointer;
  text-align:left;
  display:flex; flex-direction:column; gap:14px;
  padding:0;
  background:none; border:0;
  color:inherit; text-decoration:none;
}
.swatch .chip{
  position:relative;
  aspect-ratio: 3 / 5;
  border-radius:4px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 16px 30px -18px rgba(20,18,12,.5);
  transition:transform .3s var(--easing), box-shadow .3s var(--easing);
}
.swatch:hover .chip{
  transform:translateY(-4px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 24px 40px -16px rgba(20,18,12,.5);
}
.swatch .chip::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 30% 25%, color-mix(in oklch, var(--c-glow) 70%, white) 0%, transparent 70%),
    radial-gradient(50% 40% at 75% 80%, color-mix(in oklch, var(--c-deep) 70%, black) 0%, transparent 70%),
    repeating-linear-gradient(102deg,
      color-mix(in oklch, var(--c-vein) 55%, transparent) 0 1px,
      transparent 1px 14px,
      color-mix(in oklch, var(--c-deep) 22%, transparent) 14px 15px,
      transparent 15px 32px),
    linear-gradient(140deg, var(--c-mid) 0%, var(--c-base) 50%, var(--c-mid) 100%);
}
.swatch .chip::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 22% 18%, color-mix(in oklch, var(--c-deep) 80%, black) 50%, transparent 60%),
    radial-gradient(1px 1px at 48% 36%, color-mix(in oklch, var(--c-deep) 90%, black) 50%, transparent 60%),
    radial-gradient(2px 1.5px at 68% 28%, color-mix(in oklch, var(--c-deep) 75%, black) 50%, transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 62%, color-mix(in oklch, var(--c-deep) 85%, black) 50%, transparent 60%),
    radial-gradient(1.5px 1px at 78% 72%, color-mix(in oklch, var(--c-deep) 80%, black) 50%, transparent 60%),
    radial-gradient(1px 1px at 14% 84%, color-mix(in oklch, var(--c-deep) 90%, black) 50%, transparent 60%);
  mix-blend-mode:multiply; opacity:.6;
}
/* When the variation has an actual image set as its Variation image,
   the chip shows the photo and the gradient pseudo-stack is hidden. */
.swatch .chip--has-image::before,
.swatch .chip--has-image::after{
  display:none;
}
.swatch .chip img.chip-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  z-index:1;
}
.swatch .code{
  position:absolute; top:10px; left:10px; z-index:3;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
  background:rgba(0,0,0,.32);
  padding:4px 7px; border-radius:3px;
  backdrop-filter:blur(6px);
}
/* "Laos Eestis" stock badge — cyan pill, top-right so it clears the
   top-left .code label. Swatch shows the count ("LAOS: 3"); the per-image
   gallery badge (.vg-flag, below) shows "LAOS" on each in-stock photo. */
.swatch .stock-flag{
  position:absolute; top:10px; right:10px; z-index:3;
  font-family:var(--f-mono); font-weight:500;
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--primary);
  padding:4px 8px; border-radius:999px;
  white-space:nowrap;
}
.swatch .meta{
  display:flex; flex-direction:column; gap:2px;
}
.swatch .name{
  font-family:var(--f-sans); font-weight:500;
  font-size:15px; letter-spacing:-.005em; line-height:1.15;
  color:var(--ink);
}
.swatch .name em{ font-family:var(--f-serif); font-style:italic; font-weight:400 }
.swatch .tone{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.swatch[aria-pressed="true"] .chip{
  outline:2px solid var(--ink);
  outline-offset:6px;
}
.swatch[aria-pressed="true"] .name::after{
  content:"●"; color:var(--primary); margin-left:6px; font-size:9px;
  vertical-align:middle;
}
@media (max-width:1100px){
  .swatch-row{ grid-template-columns:repeat(4, 1fr) }
}
@media (max-width:900px){
  .swatches-head{ grid-template-columns:1fr; gap:16px }
}
@media (max-width:560px){
  .swatch-row{ grid-template-columns:repeat(4, 1fr); gap:12px }
}

/* ─── Per-variation gallery (masonry) ─── */
.variation-galleries{
  background:var(--paper);
  padding:48px 0 64px;
}
.variation-gallery{ display:block }
.variation-gallery[hidden]{ display:none !important }
.variation-gallery .vg-grid{
  /* CSS grid — row-major flow so items go left-to-right and the
     trailing empty slots are always at the end of the last row. */
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:12px;
}
.variation-gallery .vg-item{
  position:relative;
  margin:0;
  border-radius:5px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 20px -14px rgba(20,18,12,.32);
  background:var(--stone);
}
.variation-gallery img.vg-img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  transition:transform .6s var(--easing);
}
.variation-gallery .vg-item:hover img.vg-img{ transform:scale(1.03) }
.variation-gallery .vg-code{
  position:absolute; top:10px; left:10px;
  font-family:var(--f-mono);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.94);
  background:rgba(0,0,0,.42);
  padding:5px 8px;
  border-radius:3px;
  pointer-events:none;
  max-width:calc(100% - 28px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Per-image "Laos Eestis" badge — cyan pill, top-right so it clears the
   top-left .vg-code title. Marks the specific in-stock gallery photo. */
.variation-gallery .vg-flag{
  position:absolute; top:10px; right:10px; z-index:3;
  font-family:var(--f-mono); font-weight:500;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:var(--primary);
  padding:5px 9px; border-radius:999px;
  pointer-events:none;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.35);
}
@media (max-width:1280px){
  .variation-gallery .vg-grid{ grid-template-columns:repeat(4, 1fr) }
}
@media (max-width:960px){
  .variation-gallery .vg-grid{ grid-template-columns:repeat(3, 1fr) }
}
@media (max-width:720px){
  .variation-gallery .vg-grid{ grid-template-columns:repeat(3, 1fr) }
}
@media (max-width:480px){
  .variation-gallery .vg-grid{ grid-template-columns:repeat(3, 1fr) }
}
@media (max-width:560px){
  /* Phones: gallery items are too narrow for the name (top-left) and the
     LAOS pill (top-right) to share the top row. Drop the pill to the left
     edge, just under the .vg-code name caption (single-line, ~32px tall). */
  .variation-gallery .vg-flag{
    top:40px; left:10px; right:auto;
  }
}

/* ─── Body (full-width editorial) ─── */
.product-body{
  background:var(--paper);
  padding:88px 0 96px;
  position:relative;
}
.body-main{
  /* Editorial sections (.story / .adv / .tech / .apps) live in a narrower
     reading column. The wider .swatches + .variation-galleries sections
     sit OUTSIDE body-main so they still extend to the full wrap (1480px)
     and align with the nav-cta button on the right edge. */
  max-width:1180px;
  margin:0 auto;
}

/* ─── Sticky quote bar ─── */
.quote-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  /* backdrop-filter blur was re-blurring the page on every scroll frame.
     A near-opaque ink background reads almost identically without the
     per-frame compositor cost. */
  background:rgba(13,17,22,.97);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
  transform:translateY(100%);
  transition:transform .5s var(--easing);
  pointer-events:none;
}
.quote-bar.in{
  transform:translateY(0);
  pointer-events:auto;
}
.qb-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding-top:14px; padding-bottom:14px;
}
.qb-left{ display:flex; align-items:center; gap:16px; min-width:0 }
.qb-chip{
  position:relative;
  width:54px; height:38px; border-radius:4px; flex-shrink:0;
  overflow:hidden;
  background:
    radial-gradient(60% 50% at 30% 25%, color-mix(in oklch, var(--v-glow) 70%, white) 0%, transparent 70%),
    radial-gradient(50% 40% at 75% 80%, color-mix(in oklch, var(--v-deep) 70%, black) 0%, transparent 70%),
    repeating-linear-gradient(102deg,
      color-mix(in oklch, var(--v-vein) 55%, transparent) 0 1px,
      transparent 1px 12px),
    linear-gradient(140deg, var(--v-mid), var(--v-base), var(--v-mid));
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -8px rgba(0,0,0,.5);
  transition:background .6s var(--easing);
}
.qb-chip img.qb-chip-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.qb-text{ min-width:0 }
.qb-eyebrow{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:2px;
}
.qb-name{
  font-family:var(--f-sans); font-weight:500;
  font-size:16px; letter-spacing:-.005em; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qb-name em{ font-family:var(--f-serif); font-style:italic; font-weight:400 }
.qb-right{ display:flex; align-items:center; gap:14px }
.qb-secondary{
  font-size:14px; color:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:1px; line-height:1;
  transition:color .2s, border-color .2s;
}
.qb-secondary:hover{ color:#fff; border-bottom-color:#fff }
.qb-cta{
  display:inline-flex; align-items:center; gap:10px;
  height:46px; padding:0 8px 0 20px;
  background:var(--primary); color:var(--ink);
  border-radius:999px;
  font-weight:500; font-size:14.5px;
  transition:background .2s var(--easing);
}
.qb-cta:hover{ background:#fff }
.qb-cta .arrow{
  width:30px; height:30px; border-radius:50%;
  background:var(--ink); color:var(--primary);
  display:grid; place-items:center;
  transition:transform .25s var(--easing);
}
.qb-cta:hover .arrow{ transform:translateX(2px) }
body.qb-active .footer{ padding-bottom:104px }
@media (max-width:680px){
  .qb-secondary{ display:none }
  .qb-chip{ width:44px; height:32px }
  .qb-cta{ height:42px; font-size:13.5px; padding-left:16px }
  .qb-eyebrow{ font-size:9.5px }
  .qb-name{ font-size:14px }
  .qb-inner{ padding-top:10px; padding-bottom:10px; gap:12px }
}

/* ─── Story ─── */
.story{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:56px;
  margin-bottom:88px;
}
.story .eyebrow{ margin-bottom:14px; display:block }
.story h2{
  font-family:var(--f-sans); font-weight:500;
  font-size:clamp(32px,3.4vw,52px); letter-spacing:-.025em; line-height:1.02;
}
.story h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400 }
.story .body p{
  font-size:17px; line-height:1.6; color:var(--ink-2);
  margin-bottom:18px;
  max-width:58ch;
}
.story .body p:first-child{
  font-size:21px; line-height:1.45; color:var(--ink);
  letter-spacing:-.005em;
  margin-bottom:26px;
}
.story .body p:first-child em{ font-family:var(--f-serif); font-style:italic }
.story .body .signoff{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  margin-top:24px;
}
@media (max-width:780px){
  .story{ grid-template-columns:1fr; gap:24px; margin-bottom:64px }
}

/* ─── Advantages ─── */
.adv{
  margin-bottom:88px;
}
.adv-head{
  display:grid; grid-template-columns:1.2fr 1fr; gap:48px;
  align-items:end; margin-bottom:32px;
}
.adv-head h2{
  font-family:var(--f-sans); font-weight:500;
  font-size:clamp(32px,3vw,44px); letter-spacing:-.022em; line-height:1.05;
}
.adv-head h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400 }
.adv-head p{ font-size:15px; color:var(--muted); max-width:48ch; justify-self:end }
.adv-list{
  border-top:1px solid var(--line);
}
.adv-item{
  display:grid;
  grid-template-columns:80px 280px 1fr auto;
  gap:32px;
  padding:28px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
  position:relative;
  transition:background .3s var(--easing), padding .3s var(--easing);
}
.adv-item:hover{
  background:#fbfaf6;
  padding-left:14px;
}
.adv-item .num{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
  color:var(--muted); padding-top:6px;
}
.adv-item .name{
  font-family:var(--f-sans); font-weight:500;
  font-size:21px; letter-spacing:-.012em; line-height:1.2;
}
.adv-item .name em{ font-family:var(--f-serif); font-style:italic; font-weight:400 }
.adv-item .desc{
  font-size:15px; color:var(--ink-2); line-height:1.55;
  max-width:60ch;
}
.adv-item .tag{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  padding-top:6px;
  white-space:nowrap;
}
@media (max-width:880px){
  .adv-item{ grid-template-columns:60px 1fr; gap:16px }
  .adv-item .desc, .adv-item .tag{ grid-column:2 }
  .adv-item .tag{ margin-top:-4px }
  .adv-head{ grid-template-columns:1fr; gap:18px }
}

/* ─── Tech specs ─── */
.tech{
  background:var(--stone);
  border-radius:6px;
  padding:48px 48px 40px;
  margin-bottom:88px;
}
.tech-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:28px; flex-wrap:wrap;
}
.tech-head h2{
  font-family:var(--f-sans); font-weight:500;
  font-size:clamp(28px,2.6vw,38px); letter-spacing:-.02em; line-height:1.05;
}
.tech-head h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400 }
.tech-head .ext{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:8px;
}
.tech-table{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
}
.tech-table tr{
  border-bottom:1px solid rgba(15,20,25,.1);
}
.tech-table tr:last-child{ border-bottom:0 }
.tech-table td{
  padding:14px 0;
  vertical-align:top;
  line-height:1.5;
}
.tech-table td.k{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  width:32%;
  padding-right:24px;
}
.tech-table td.v{ color:var(--ink); font-size:15px }
.tech-table td.v strong{ font-weight:500 }
.tech-table td.v .unit{
  font-family:var(--f-mono); font-size:11px; color:var(--muted);
  letter-spacing:.05em; margin-left:6px;
}
.tech-table td.note{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
  width:18%;
  text-align:right;
}
.tech-foot{
  margin-top:28px; padding-top:18px;
  border-top:1px solid rgba(15,20,25,.1);
  display:flex; gap:18px; flex-wrap:wrap;
  align-items:center;
}
.tech-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
}
.tech-badge .badge-mark{
  width:18px; height:18px; border-radius:50%;
  background:var(--ink); color:var(--primary);
  display:grid; place-items:center;
  font-size:9px; letter-spacing:0;
}
.tech-foot .grow{ flex:1 }
.tech-foot .dl-link{
  font-family:var(--f-sans); font-size:14px;
  border-bottom:1px solid currentColor; padding-bottom:1px;
}
@media (max-width:680px){
  .tech{ padding:32px 24px }
  .tech-table td.note{ display:none }
}

/* ─── Applications ─── */
.apps{
  margin-bottom:0;
}
.apps-head{
  display:grid; grid-template-columns:1.2fr 1fr; gap:48px;
  align-items:end; margin-bottom:32px;
}
.apps-head h2{
  font-family:var(--f-sans); font-weight:500;
  font-size:clamp(32px,3vw,44px); letter-spacing:-.022em; line-height:1.05;
}
.apps-head h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400 }
.apps-head p{ font-size:15px; color:var(--muted); max-width:48ch; justify-self:end }

.apps-chips{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:32px;
}
.apps-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13.5px;
  transition:background .2s, border-color .2s;
}
.apps-chip:hover{ border-color:var(--ink); background:var(--stone) }
.apps-chip .ic{ width:14px; height:14px; opacity:.6 }

.apps-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:230px;
  gap:14px;
}
.app{
  position:relative; overflow:hidden; border-radius:6px;
  cursor:pointer;
}
.app .app-img{
  position:absolute; inset:0;
  transition:transform .8s var(--easing);
}
img.app-img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
.app:hover .app-img{ transform:scale(1.04) }
.app::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7) 100%);
}
.app .app-cap{
  position:absolute; left:18px; right:18px; bottom:14px; z-index:3;
  color:#fff;
}
.app .app-cap .where{
  font-family:var(--f-sans); font-weight:500;
  font-size:15px; letter-spacing:-.005em;
}
.app .app-cap .what{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  opacity:.75; margin-top:3px;
}
.app .app-tag{
  position:absolute; left:14px; top:14px; z-index:3;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.32);
  padding:4px 7px; border-radius:3px;
  backdrop-filter:blur(6px);
}
.a-1{ grid-column:1 / span 3; grid-row:1 / span 2 }
.a-2{ grid-column:4 / span 3; grid-row:1 }
.a-3{ grid-column:4 / span 2; grid-row:2 }
.a-4{ grid-column:6 / span 1; grid-row:2 }
.a-5{ grid-column:1 / span 2; grid-row:3 }
.a-6{ grid-column:3 / span 2; grid-row:3 }
.a-7{ grid-column:5 / span 2; grid-row:3 }
@media (max-width:960px){
  .apps-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px }
  .a-1,.a-2,.a-3,.a-4,.a-5,.a-6,.a-7{ grid-column:auto / span 1; grid-row:auto }
  .a-1{ grid-column:1 / span 2 }
  .apps-head{ grid-template-columns:1fr; gap:16px }
}

.app-tex{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 30% 25%, color-mix(in oklch, #d8c298 60%, white) 0%, transparent 70%),
    radial-gradient(50% 40% at 75% 80%, rgba(40,30,20,.5) 0%, transparent 70%),
    repeating-linear-gradient(98deg, rgba(255,255,255,.05) 0 2px, transparent 2px 38px),
    linear-gradient(135deg, #8a7a5e, #b8a685, #6b5a40);
}
.app-tex--int{ background:
  radial-gradient(60% 50% at 30% 25%, rgba(200,180,150,.5), transparent 70%),
  repeating-linear-gradient(102deg, rgba(255,255,255,.06) 0 2px, transparent 2px 30px),
  linear-gradient(135deg, #6e5a44, #8e7458, #4a3a2a);
}
.app-tex--ext{ background:
  radial-gradient(60% 50% at 40% 30%, rgba(220,200,170,.5), transparent 70%),
  repeating-linear-gradient(94deg, rgba(255,255,255,.06) 0 2px, transparent 2px 44px),
  linear-gradient(135deg, #b09a7a, #d2bc98, #8a7458);
}
.app-tex--3{ background:linear-gradient(135deg,#9a836a,#bda28a,#6e5a44) }
.app-tex--4{ background:linear-gradient(135deg,#aa8c66,#d2b288,#7a6248) }
.app-tex--5{ background:linear-gradient(135deg,#6e5a44,#9a836a,#4a3a2a) }
.app-tex--6{ background:linear-gradient(135deg,#c6ad8a,#e8d2ad,#8a7458) }
.app-tex--7{ background:linear-gradient(135deg,#8a7458,#c0a684,#5e4a36) }

/* ─── Quote form ─── */
.quote{
  background:var(--ink); color:#fff;
  padding:88px 0 96px;
  position:relative;
  overflow:hidden;
}
.quote::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 40% at 80% 20%, color-mix(in oklch, var(--v-glow) 30%, transparent), transparent 60%),
    radial-gradient(50% 40% at 10% 90%, rgba(119,199,208,.1), transparent 60%);
}
.quote-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:64px;
  align-items:start;
}
.quote-grid .eyebrow{ color:rgba(255,255,255,.55); margin-bottom:18px; display:block }
.quote-grid h2{
  font-family:var(--f-sans); font-weight:500;
  font-size:clamp(36px,4vw,60px); letter-spacing:-.025em; line-height:1.02;
  color:#fff; margin-bottom:24px;
}
.quote-grid h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--primary) }
.quote-grid .lede-light{
  color:rgba(255,255,255,.75); font-size:17px; line-height:1.55; max-width:42ch;
  margin-bottom:32px;
}
.quote-grid .meta-pairs{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
}
.quote-grid .meta-pairs .mp .k{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:8px;
}
.quote-grid .meta-pairs .mp .v{ font-size:15px; line-height:1.45 }

.q-form{
  display:flex; flex-direction:column; gap:14px;
  padding:32px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  backdrop-filter:blur(8px);
}
.q-form .row{
  display:flex; flex-direction:column; gap:6px;
}
/* "Valitud sari" indicator — mirrors the active swatch into the form. */
.q-form .q-selected{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  margin-bottom:8px;
}
.q-form .q-chip{
  position:relative; flex-shrink:0;
  width:48px; height:36px; border-radius:3px;
  overflow:hidden;
  background:
    radial-gradient(60% 50% at 30% 25%, color-mix(in oklch, var(--v-glow) 70%, white), transparent 70%),
    radial-gradient(50% 40% at 75% 80%, color-mix(in oklch, var(--v-deep) 70%, black), transparent 70%),
    linear-gradient(140deg, var(--v-mid), var(--v-base), var(--v-mid));
}
.q-form .q-chip img.q-chip-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.q-form .q-info{ min-width:0 }
.q-form .q-eyebrow{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:3px;
}
.q-form .q-name{
  font-size:15px; font-weight:500; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.q-form .q-name em{ font-family:var(--f-serif); font-style:italic; font-weight:400 }
.q-form .q-change{
  margin-left:auto;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--primary);
  border-bottom:1px solid currentColor; padding-bottom:1px;
}
.q-form label{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.q-form input, .q-form textarea, .q-form select{
  width:100%;
  padding:14px 0;
  background:transparent;
  border:0; border-bottom:1px solid rgba(255,255,255,.18);
  color:#fff;
  font:inherit;
  font-size:16px;
  font-family:var(--f-sans);
  transition:border-color .2s;
  outline:none;
}
.q-form textarea{
  min-height:96px; resize:vertical;
  line-height:1.5;
  padding-top:14px;
}
.q-form input:focus, .q-form textarea:focus, .q-form select:focus{
  border-bottom-color:var(--primary);
}
.q-form .pre-fill{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  margin-bottom:8px;
}
.q-form .pre-fill .mini-chip{
  width:48px; height:36px; border-radius:3px;
  background:
    radial-gradient(60% 50% at 30% 25%, color-mix(in oklch, var(--v-glow) 70%, white), transparent 70%),
    radial-gradient(50% 40% at 75% 80%, color-mix(in oklch, var(--v-deep) 70%, black), transparent 70%),
    linear-gradient(140deg, var(--v-mid), var(--v-base), var(--v-mid));
  flex-shrink:0;
}
.q-form .pre-fill .pf-name{
  font-size:15px; font-weight:500;
}
.q-form .pre-fill .pf-name em{ font-family:var(--f-serif); font-style:italic; font-weight:400 }
.q-form .pre-fill .pf-meta{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-top:3px;
}
/* Submit button — mirrors the sticky quote bar's .qb-cta look:
   text + round arrow pill sit next to each other (gap, not pushed apart
   via space-between), inline-sized to content, hover slides the arrow. */
.q-form .submit{
  margin-top:8px;
  align-self:flex-start;
  width:auto; max-width:none; min-width:0;
  display:inline-flex; align-items:center; gap:10px;
  height:46px; padding:0 8px 0 20px;
  background:var(--primary); color:var(--ink);
  border-radius:999px;
  font-weight:500; font-size:14.5px;
  line-height:1;
  transition:background .2s var(--easing);
  border:0; cursor:pointer;
}
.q-form .submit:hover{ background:#fff }
.q-form .submit .arrow{
  width:30px; height:30px; border-radius:50%;
  background:var(--ink); color:var(--primary);
  display:grid; place-items:center;
  transition:transform .25s var(--easing);
}
.q-form .submit:hover .arrow{ transform:translateX(2px) }
.q-form .legal{
  font-size:12px; color:rgba(255,255,255,.5);
  line-height:1.5;
  margin-top:4px;
}
@media (max-width:880px){
  .quote-grid{ grid-template-columns:1fr; gap:32px }
}
