/* SAMUEL — components layer (approved language, 2026-09-24). Tokens only. New components go in shop.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);direction:rtl;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p,h1,h2,h3{margin:0}
:focus-visible{outline:var(--rule) solid var(--ink);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.latin{direction:ltr;unicode-bidi:isolate}
.wrap{max-width:var(--content);margin-inline:auto;padding-inline:var(--margin)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:20;background:var(--bg)}
.hdr .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hdr-h)}
.hdr::after{content:"";display:block;height:var(--rule);background:var(--line);transform:scaleX(0);transform-origin:center;transition:transform var(--t-base) var(--ease)}
.hdr.is-scrolled::after{transform:scaleX(1)}
.hdr .wm{display:inline-flex;align-items:center;height:var(--tap);font-weight:var(--w-wm);font-size:var(--fs-wm-header);letter-spacing:var(--track-wm-header);direction:ltr;text-align:center}
/* home: the monument is the wordmark; the header's small one takes over only once the monument has scrolled past it */
.hdr.is-handover .wm{opacity:0;visibility:hidden;transition:opacity var(--t-base) var(--ease),visibility 0s var(--t-base)}
.hdr.is-handover.is-past .wm{opacity:1;visibility:visible;transition:opacity var(--t-base) var(--ease),visibility 0s}
.hdr .side{display:flex;gap:var(--s5);align-items:center;font-size:var(--fs-label);font-weight:var(--w-label)}
.hdr .side.end{justify-content:flex-end}
.hdr .side button,.hdr .side a{display:inline-flex;align-items:center;gap:var(--s2);height:var(--tap);padding-inline:var(--s1);position:relative}
.hdr .side button::after,.hdr .side a::after{content:"";position:absolute;inset-inline:var(--s1);bottom:var(--s2);height:var(--rule);background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform var(--t-fast) var(--ease)}   /* the hairline grows from the centre (qa-D D2) */
.hdr .side button:hover::after,.hdr .side a:hover::after{transform:scaleX(1)}
.ico{width:var(--ico);height:var(--ico);stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:767px){
  .hdr .side .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hdr .side{gap:var(--s3)}
}

/* ---------- page head ---------- */
.head{padding-block:var(--s8) var(--s6)}
.head .title{font-weight:var(--w-light);font-size:var(--fs-title);line-height:var(--lh-tight);text-wrap:balance}
.head .count{font-size:var(--fs-caption);color:var(--mute);margin-top:var(--s3)}
.cats{display:flex;gap:var(--s5);margin-top:var(--s7);font-size:var(--fs-label);font-weight:var(--w-label);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:var(--s2);position:relative}
.cats::-webkit-scrollbar{display:none}
.cats a{white-space:nowrap;padding:var(--s3) var(--s1);margin-inline:calc(-1 * var(--s1));position:relative;color:var(--mute);transition:color var(--t-fast) var(--ease)}
.cats a::after{content:"";position:absolute;inset-inline:var(--s1);bottom:calc(var(--s3) - var(--s2));height:var(--rule);background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform var(--t-fast) var(--ease)}   /* grows from the centre (qa-D D2) */
.cats a:hover,.cats a[aria-current]{color:var(--ink)}
.cats a[aria-current]::after,.cats a:hover::after{transform:scaleX(1)}
/* name and count are two isolated runs, so a Latin name never fuses with its numeral ("BODY PERFUME1") */
.cats .nm,.cats .n{unicode-bidi:isolate}
.cats .n{font-weight:var(--w-body);color:var(--mute);margin-inline-start:var(--s2);font-size:var(--fs-caption);font-variant-numeric:tabular-nums}
@media (max-width:767px){
  .head{padding-block:var(--s6) var(--s5)}
  .cats{margin-top:var(--s5);margin-inline:calc(var(--margin) * -1);padding-inline:var(--margin);mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
}

/* ---------- grid + tile ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s8) var(--gutter);padding-block:var(--s5) 0}
@media (max-width:1279px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.grid{grid-template-columns:repeat(2,1fr);gap:var(--s7) var(--gutter);padding-bottom:0}}
.grid.is-dense{grid-template-columns:repeat(1,1fr)}
.tile{display:block;position:relative}
.tile .img{position:relative;aspect-ratio:4/5;background:var(--bg);overflow:hidden}
/* a product without a photograph: its name set in the tile area, light, top start. No icon, no grey box. */
.tile .img.is-type{padding:var(--s4)}
.tile .img.is-type span{font-size:var(--fs-statement);font-weight:var(--w-light);line-height:var(--lh-tight);color:var(--ink);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* Hover signature: the photograph breathes (a 2% scale over 1.1s, transform only) and the rule
   lengthens. Nothing swaps, nothing fades, nothing moves layout. */
.tile .img img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform var(--t-img) var(--ease-img);backface-visibility:hidden}
.tile:hover .img img,.tile:focus-visible .img img{transform:scale(var(--img-hover-scale))}
.tile .rule{height:var(--rule);width:var(--rule-len);background:var(--ink);margin-top:var(--s3);transition:width var(--t-slow) var(--ease)}
.tile:hover .rule,.tile:focus-visible .rule{width:calc(var(--rule-len) * 2)}
@media (hover:none){.tile:hover .img img{transform:none}.tile:hover .rule{width:var(--rule-len)}}
.tile .name{font-size:var(--fs-tile);line-height:var(--lh-tile);margin-top:calc(var(--s2) + 2px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .price{font-size:var(--fs-tile);line-height:var(--lh-tile);margin-top:2px;display:flex;gap:var(--s2);align-items:baseline}
.tile .price s{color:var(--mute);text-decoration:line-through}
.tile .price .oos{color:var(--mute)}
.tile .stamp{font-size:var(--fs-stamp);letter-spacing:var(--track-stamp);color:var(--mute);margin-top:calc(var(--s1) + 2px);direction:ltr;text-align:right;font-weight:var(--w-label)}
.tile.is-oos .img img{opacity:.55}

/* ---------- bottom bar (mobile catalog) ---------- */
.bar{display:none}
@media (max-width:767px){
  .bar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:20;background:var(--bg);border-top:var(--rule) solid var(--line);padding-block:var(--s3) calc(var(--s3) + env(safe-area-inset-bottom,0px));padding-inline:var(--margin);justify-content:space-between;font-size:var(--fs-label);font-weight:var(--w-label)}
  .bar button{height:32px;display:inline-flex;align-items:center;gap:var(--s2)}
  body.has-bar{padding-bottom:calc(var(--control-h) + env(safe-area-inset-bottom,0px))}
}

/* ---------- wordmark monument + footer ---------- */
.monument{padding-block:var(--s10) var(--s8);text-align:center;overflow:hidden}
.monument .wm{font-weight:var(--w-wm);font-size:var(--fs-wm-monument);line-height:var(--lh-wm);letter-spacing:var(--track-wm);direction:ltr;margin-inline:calc(var(--margin) * -1)}
.byline{display:flex;align-items:center;justify-content:center;gap:var(--s4);direction:ltr;font-size:var(--fs-eyebrow);letter-spacing:var(--track-byline);text-transform:uppercase;font-weight:var(--w-label);margin-top:var(--s5)}
.byline::before,.byline::after{content:"";height:var(--rule);width:var(--byline-rule);background:var(--ink)}
@media (max-width:767px){.monument{padding-block:var(--s9) var(--s7)}}
.ftr{border-top:var(--rule) solid var(--line);padding-block:var(--s7) var(--s8)}
.ftr .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6) var(--gutter)}
.ftr h2{font-size:var(--fs-label);font-weight:var(--w-label);margin-bottom:var(--s3)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);font-size:var(--fs-tile);font-weight:var(--w-body)}
/* hit target >= 44 without moving the text (qa-B Q17): the padding is taken back by an equal negative margin */
.ftr ul a{position:relative;display:inline-block;padding:var(--s3);margin:calc(-1 * var(--s3))}
.ftr ul a::after{content:"";position:absolute;inset-inline:var(--s3);bottom:var(--s3);height:var(--rule);background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform var(--t-fast) var(--ease)}   /* grows from the centre (qa-D D2) */
.ftr ul a:hover::after{transform:scaleX(1)}
.ftr .legal{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s7);padding-top:var(--s5);border-top:var(--rule) solid var(--line);font-size:var(--fs-caption);color:var(--mute)}
.ftr .lang{display:flex;gap:var(--s4)}
@media (max-width:767px){.ftr .cols{grid-template-columns:1fr 1fr}}

/* ---------- product page ---------- */
.crumb{display:flex;gap:var(--s3);font-size:var(--fs-caption);color:var(--mute);padding-block:var(--s5) 0}
.crumb a{padding:var(--s3);margin:calc(-1 * var(--s3))}
.crumb a:hover{color:var(--ink)}
.pdp-grid{display:grid;grid-template-columns:7fr 1fr 4fr;gap:0 var(--gutter);padding-block:var(--s6) 0;align-items:start}
.gallery{grid-column:1}
.info{grid-column:3;align-self:stretch}   /* stretched to the gallery's height, so the sticky column travels with it (qa-B Q16) */
.gallery .track{display:grid;gap:var(--gutter)}
.gallery .ph{margin:0;aspect-ratio:4/5;background:var(--bg);overflow:hidden}
.gallery .ph img{width:100%;height:100%;object-fit:cover}
/* a product without a photograph: its name set on the white 4:5 ground, the catalog's type tile at page scale (qa-B Q16) */
.gallery .ph.is-type{aspect-ratio:4/5;background:var(--bg);padding:var(--s5)}
.gallery .ph.is-type span{font-size:var(--fs-title);font-weight:var(--w-light);line-height:var(--lh-tight);color:var(--ink);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.gallery .dots{display:none}
.info .sticky{position:sticky;top:calc(var(--hdr-h) + var(--s6))}
.info .title{font-weight:var(--w-light);font-size:var(--fs-statement);line-height:var(--lh-tight)}
.info .price{font-size:var(--fs-body);margin-top:var(--s3);display:flex;gap:var(--s3);align-items:baseline}
.info .price s{color:var(--mute)}
.info .stamp{font-size:var(--fs-stamp);letter-spacing:var(--track-stamp);color:var(--mute);margin-top:var(--s2);direction:ltr;text-align:right;font-weight:var(--w-label)}
.buy{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);margin-top:var(--s6)}
.qty,.quantity{display:inline-grid;grid-template-columns:var(--tap) 48px var(--tap);height:var(--control-h);border:var(--rule) solid var(--ink)}
.quantity button{display:grid;place-items:center}
.quantity input{border:0;background:none;text-align:center;font:inherit;font-size:var(--fs-tile);color:var(--ink);-moz-appearance:textfield;min-width:0}
.quantity input::-webkit-inner-spin-button,.quantity input::-webkit-outer-spin-button{-webkit-appearance:none}
.pill{display:inline-flex;align-items:center;justify-content:center;height:var(--control-h);border-radius:999px;background:var(--ink);color:var(--on-ink);font-size:var(--fs-tile);font-weight:var(--w-label);padding-inline:var(--s5);white-space:nowrap;transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.pill:hover{opacity:.9}.pill:active{transform:scale(.985)}
/* the outlined pill (P7): the quiet secondary action. Ink text at body weight, a .5px --mute border
   (one device pixel on 2x screens, 1px on 1x; chosen by eye by the Art Director), no fill. */
.pill-line{display:inline-flex;align-items:center;justify-content:center;height:var(--control-h);border-radius:999px;border:.5px solid var(--mute);padding-inline:var(--s5);color:var(--ink);font-size:var(--fs-tile);font-weight:var(--w-body);white-space:nowrap;transition:border-color var(--t-fast) var(--ease)}
.pill-line:hover,.pill-line:focus-visible{border-color:var(--ink)}
.ship{font-size:var(--fs-caption);color:var(--mute);margin-top:var(--s4)}
.acc{margin-top:var(--s7);border-top:var(--rule) solid var(--line)}
.acc details{border-bottom:var(--rule) solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding-block:var(--s4);font-size:var(--fs-tile);font-weight:var(--w-label)}
.acc summary::-webkit-details-marker{display:none}
.acc .mark{position:relative;width:12px;height:12px}
.acc .mark::before,.acc .mark::after{content:"";position:absolute;background:var(--ink);inset-inline:0;top:50%;height:var(--rule);margin-top:-.5px}
.acc .mark::after{transform:rotate(90deg);transition:transform var(--t-fast) var(--ease)}
.acc details[open] .mark::after{transform:rotate(0)}
.acc .desc{padding-bottom:var(--s5);font-size:var(--fs-read);line-height:var(--lh-prose);color:var(--ink);max-width:var(--prose)}
.acc .desc p{margin:0 0 var(--s3)}
.acc .desc h1,.acc .desc h2,.acc .desc h3,.acc .desc h4{font-size:var(--fs-tile);font-weight:var(--w-label);margin:var(--s4) 0 var(--s2)}
.acc .desc ul{padding-inline-start:1.1em;margin:0 0 var(--s3)}
.acc .desc li{margin-bottom:var(--s1)}
.acc .desc strong{font-weight:var(--w-label)}
.acc .desc img{display:none}
.acc .desc hr{border:0;border-top:var(--rule) solid var(--line);margin:var(--s4) 0}
.ul{border-bottom:var(--rule) solid var(--ink)}
.related{margin-top:var(--s9);padding-block:var(--s8) 0;border-top:var(--rule) solid var(--line)}
.related .statement{font-weight:var(--w-light);font-size:var(--fs-statement);line-height:var(--lh-tight)}
.related .grid{padding-top:var(--s6)}
.statement{font-weight:var(--w-light);font-size:var(--fs-statement);line-height:var(--lh-tight);text-wrap:balance}
/* reading text ends on more than one word where the browser can (qa-B Q15; Chromium honours pretty, others ignore it) */
.band-text .body,.lede,.acc .desc p,.prose p,.defs dd,.steps p{text-wrap:pretty}
@media (max-width:1279px){.pdp-grid{grid-template-columns:1fr 1fr;gap:var(--s6) var(--gutter)}.info{grid-column:2}}
@media (max-width:767px){
  .crumb{padding-top:var(--s4)}
  .pdp-grid{display:block;padding-block:var(--s4) 0}
  .related{margin-top:var(--s8)}
  .gallery{margin-inline:calc(var(--margin) * -1)}
  .gallery .track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .gallery .track::-webkit-scrollbar{display:none}
  .gallery .ph{flex:0 0 100%;scroll-snap-align:start}
  .gallery .dots{display:flex;gap:var(--s2);justify-content:center;padding-top:var(--s3)}
  .gallery .dots span{width:var(--rule-len);height:var(--rule);background:var(--line);transition:background var(--t-fast) var(--ease)}
  .gallery .dots span.on{background:var(--ink)}
  .info{padding-top:var(--s5)}
  .info .sticky{position:static}
  .buy{grid-template-columns:auto 1fr}
  .qty,.quantity{grid-template-columns:var(--tap) 40px var(--tap)}
  .related .grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- home ---------- */
.notice{background:var(--ink);color:var(--on-ink);text-align:center;font-size:var(--fs-label);font-weight:var(--w-label);padding-block:var(--s2)}
/* Hebrew eyebrows are set untracked (P2, polish-A): tracking is a Latin small-caps habit. A Latin eyebrow opts in. */
.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:0;text-transform:uppercase;color:var(--mute);font-weight:var(--w-label)}
.eyebrow.latin{letter-spacing:var(--track-eyebrow)}
/* home hero (2026-10-04, Art Director's composition): the wordmark as the monument, then one row.
   The photograph of Amir takes the inline-end side, breaks out of the grid to the viewport edge and runs
   past the fold: the cut is the invitation to scroll. The statement and the one action take the
   inline-start side, top-aligned to the photograph's upper edge, so the first screen always holds the
   brand, the face and the voice, on every desktop height. Phones: brand, voice, action, then the face. */
.hero{padding-block:var(--s8);--hero-img-col:8}
.hero .wm{font-weight:var(--w-wm);font-size:var(--fs-wm-monument);line-height:var(--lh-wm);letter-spacing:var(--track-wm);direction:ltr;text-align:center;margin:0}
.hero .byline{margin-top:var(--s5)}
.hero-body{margin-top:var(--s7)}
.hero-img{margin:0;position:relative}
.hero-img img,.hero-img video{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 0;background:var(--ink)}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s6)}
.hero-text .statement{font-weight:var(--w-light);line-height:var(--lh-tight);max-width:11em;text-wrap:balance}
.hero-text .pill{display:inline-flex;align-items:center}
@media (min-width:768px){
  /* a full-width grid: margin | 12 content columns (the page grid) | margin. The text sits on columns 1-5,
     column 6 is air, the photograph spans column 7 to the inline-end edge of the viewport. */
  .hero-body{--col:calc((var(--content) - 2 * var(--margin) - 11 * var(--gutter)) / 12);display:grid;grid-template-columns:[full-start] minmax(calc(var(--margin) - var(--gutter)),1fr) [content-start] repeat(12,minmax(0,var(--col))) [content-end] minmax(calc(var(--margin) - var(--gutter)),1fr) [full-end];column-gap:var(--gutter);align-items:start}
  .hero-text{grid-column:content-start / span 5;grid-row:1}
  /* optical alignment: the Hebrew letter line (not the line box) meets the photograph's top edge. Assistant
     at line-height 1.1 puts the letter tops .34em under the box top (measured 2026-10-04: 15px at 44px). */
  .hero-text .statement{margin-top:-.34em}
  .hero-img{grid-column:var(--hero-img-col) / full-end;grid-row:1}
  .hero-text .statement{font-size:clamp(34px,3.1vw,48px)}
}
@media (min-width:768px) and (max-width:1023px){
  /* tablet (qa-C C5): brand, voice, action, then the photograph edge to edge in 4:3 — the phone order at tablet
     scale; the fold cuts the photograph in both orientations */
  .hero-body{display:flex;flex-direction:column;align-items:stretch;gap:var(--s6)}   /* stretch: the >=768 grid rule sets align-items:start, which would size the figure from the img sizes attribute */
  .hero-text{padding-inline:var(--margin);gap:var(--s6)}
  .hero-text .statement{margin-top:0}
  .hero-img img,.hero-img video{aspect-ratio:4/3}
}
@media (min-width:768px) and (max-width:1279px) and (orientation:portrait) and (min-height:1100px){
  /* tall portrait tablets (qa-D D1: 820x1180, 834x1194, 1024x1366): the tablet composition with the 4:5 phone
     crop (home.php <source>), so the fold still cuts the photograph; restated here, not by widening the C5 range,
     so 1024x768 landscape keeps the desktop row */
  .hero-body{display:flex;flex-direction:column;align-items:stretch;gap:var(--s6)}
  .hero-text{padding-inline:var(--margin);gap:var(--s6)}
  .hero-text .statement{margin-top:0}
  .hero-img img{aspect-ratio:4/5}
}
@media (min-width:768px) and (max-height:760px){
  /* short desktop viewports (1366x768, 1280x720 laptops): less air above and under the wordmark so the
     face stays whole in the first screen; the wordmark itself keeps its size */
  .hero{padding-top:var(--s7)}
  .hero-body{margin-top:var(--s6)}
}
@media (min-width:768px) and (max-height:680px){
  .hero{padding-top:var(--s6)}
  .hero-body{margin-top:var(--s5)}
}
@media (max-width:767px){
  .hero{padding-block:var(--s7) var(--s7)}
  .hero-body{margin-top:var(--s7);display:flex;flex-direction:column;gap:var(--s6)}
  .hero-text{padding-inline:var(--margin);gap:var(--s5)}
  .hero-text .statement{font-size:30px}
  .hero-img img{aspect-ratio:4/5}   /* the <picture> mobile source is 4:5 already; edge to edge */
}
/* video variant (SAMUEL_HERO_VIDEO): the same composition, the clip in the photograph's place */
.hero.is-video .hero-img video{aspect-ratio:4/3;object-position:35% 50%}
@media (max-width:767px){.hero.is-video .hero-img video{aspect-ratio:4/3}}
.entries{padding-block:var(--s6) var(--s6);border-top:var(--rule) solid var(--line)}
.entry-list{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--s8)}
/* list rows carry no icon at rest; the row answers hover the way the tile does: its hairline turns ink */
.entry-list a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s3);padding-block:var(--s4);border-bottom:var(--rule) solid var(--line);font-size:var(--fs-body);position:relative;transition:border-bottom-color var(--t-fast) var(--ease)}
.entry-list a:hover,.entry-list a:focus-visible{border-bottom-color:var(--ink)}
.entry-list a .n{color:var(--mute);font-size:var(--fs-caption)}
@media (max-width:767px){.entry-list{grid-template-columns:1fr}}
.row{padding-block:var(--s8) 0}
/* home rhythm (qa-B Q14): one gap between the content blocks, 96 from tablet up, 64 on phones */
.row + .row{padding-top:var(--s9)}
@media (max-width:767px){.entries{padding-bottom:0}.row + .row{padding-top:var(--s8)}}
.row-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s5)}
.row-head .statement{max-width:18em}
.more{font-size:var(--fs-label);font-weight:var(--w-label);white-space:nowrap;text-decoration:underline;text-decoration-thickness:var(--rule);text-underline-offset:var(--s2);padding-block:var(--s3);margin-block:calc(-1 * var(--s3)) calc(2px + var(--rule) - var(--s3))}   /* the bottom margin keeps the 2px + rule the old border box held under the word, so the row head keeps its height (qa-B Q17) */
.row .grid{padding-block:var(--s6) 0}
/* OMBRE band (P7, 2026-10-05, Art Director's composition): flipped and hung. Text on columns 1-5
   (inline-start), the image on 7-11, inset one column from the inline-end content edge, cropped 5 % off
   the top and hanging 128px (--s10) below the soft surface into the professional section. grid-row:1
   on both items keeps the text on the image's row. The statement meets the image top with its letter
   line, not its line box (the hero's rule, -.34em). */
.band{margin-top:var(--s9);background:var(--soft);border-top:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line);overflow:visible}
.band-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--gutter);align-items:start;padding-block:var(--s9) 0}
.band-img{margin:0 0 calc(-1 * var(--s10));grid-column:7 / span 5;grid-row:1;position:relative;z-index:1}
.band-img img{width:100%;height:auto;aspect-ratio:4 / 4.75;object-fit:cover;object-position:50% 100%;mix-blend-mode:multiply}
.band-img.is-scene img{mix-blend-mode:normal}
.band-text{grid-column:1 / span 5;grid-row:1;align-self:start;display:grid;gap:var(--s4);justify-items:start}
@media (min-width:768px){.band-text .eyebrow{margin-bottom:var(--s1)}.band-text .statement{margin-top:-.34em}}
.band-text .body{font-weight:var(--w-light);max-width:38ch}
.band-text .price{font-size:var(--fs-body)}
.band-text .pill{display:inline-flex;align-items:center;margin-top:var(--s2)}
@media (max-width:767px){
  .band{margin-top:var(--s8)}
  .band-grid{display:block;padding-block:var(--s7) 0}
  .band-img{margin-inline:calc(var(--margin) * -1);margin-bottom:0}
  .band-text{margin-top:var(--s5);padding-bottom:var(--s7)}
}
/* professional section (P7): "one line and one link" (contract Intent). Columns 2-6, under the band's
   text, clear of the hanging image; the top padding is the hang (--s10) plus 32px of air. */
.pro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--gutter);justify-items:start;padding-block:calc(var(--s10) + var(--s6)) 0}
.pro > *{grid-column:1 / span 5}
.pro .eyebrow{margin:0}
.pro .statement{margin-top:var(--s3)}
.pro-line{font-size:var(--fs-body);font-weight:var(--w-light);line-height:1.5;margin-top:var(--s4)}
.pro .pill-line{margin-top:var(--s6)}
@media (max-width:767px){
  .pro{grid-template-columns:1fr;padding-top:var(--s7)}
  .pro > *{grid-column:1}
}
/* tablets (qa-C C5b, section 4 Q1 option a): the band holds its image; the 128px hang stays a >=1280 gesture.
   Band bottom rule -> professional eyebrow box 96 on every tablet width. */
@media (min-width:768px) and (max-width:1279px){.band-img{margin-bottom:0}.pro{padding-top:var(--s9)}}

/* ---------- motion: load timeline ---------- */
@media (prefers-reduced-motion:no-preference){
  .t-in{opacity:0;transform:translateY(var(--rise));animation:tin var(--t-slow) var(--ease) forwards;animation-delay:calc(var(--d,0) * 1ms)}
  @keyframes tin{to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms !important;animation:none !important}
  .tile:hover .img img{transform:none}
}
.ftr .lang button{font:inherit;color:var(--mute);border-bottom:var(--rule) solid transparent;padding-bottom:2px;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.ftr .lang button:hover,.ftr .lang button[aria-current]{color:var(--ink);border-color:var(--ink)}
/* rows of four (home rows, related) stay one row of four from tablet up */
@media (min-width:768px) and (max-width:1279px){.row .grid,.related .grid{grid-template-columns:repeat(4,1fr);gap:var(--s7) var(--gutter)}}