:root {
  --primary: #176b5b;
  --secondary: #f2c14e;
  --on-primary: #ffffff;
  --ink: #17211f;
  --muted: #66716f;
  --paper: #f1f5f3;
  --white: #ffffff;
  --mist: var(--brand-mist, #dfe9e5);
  --line: var(--brand-line, #d3ded9);
  --display: "Instrument Serif", Georgia, serif;
  --body: "DM Sans", "Segoe UI", sans-serif;
  --utility: "IBM Plex Mono", Consolas, monospace;
  --wrap: 1120px;
  --soft-shadow: 0 14px 40px rgba(30, 39, 48, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font: 400 15px/1.62 var(--body); }
body.is-menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 999; left: 12px; top: -80px; padding: 10px 16px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 12px; }
.wrap { width: min(calc(100% - 40px), var(--wrap)); margin-inline: auto; }
.section { padding: 68px 0; }
.section--white { background: var(--white); }
.section--mist { background: var(--mist); }
.section--secondary { background: color-mix(in srgb, var(--secondary) 12%, #fff); }
.muted { color: var(--muted); }
.eyebrow, .breadcrumb {
  margin: 0 0 12px;
  color: var(--primary-text, var(--primary));
  font: 600 10px/1.35 var(--utility);
  letter-spacing: .15em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); letter-spacing: -.045em; }
h1 { margin-bottom: 18px; font-size: clamp(38px, 4.5vw, 64px); line-height: 1; }
h2 { margin-bottom: 17px; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; }
h3 { margin-bottom: 8px; font-size: 18px; line-height: 1.25; }
.lead { max-width: 57ch; color: var(--muted); font-size: clamp(16px, 1.5vw, 18px); }
.button, .btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 19px;
  border: 1px solid var(--ink);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.button:hover, .btn:hover { transform: translateY(-2px); }
.button--primary, .btn--primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.button--light, .btn--light { border-color: #fff; color: #fff; }
.button[disabled], .btn[disabled] { cursor: not-allowed; opacity: .5; transform: none; }

/* Neutral shell keeps merchant logos readable. */
.utility-bar { border-bottom: 1px solid var(--line); background: var(--white); }
.utility-bar .wrap { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 16px; font: 500 9px/1 var(--utility); letter-spacing: .08em; text-transform: uppercase; }
.site-header { position: sticky; z-index: 90; top: 0; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.header-inner { display: grid; min-height: 70px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; }
.logo { display: inline-flex; width: fit-content; min-width: 0; align-items: center; gap: 10px; }
.merchant-logo { width: auto; max-width: 210px; height: 44px; object-fit: contain; object-position: left center; }
.logo-mark { display: grid; width: 32px; height: 32px; grid-template-columns: 1fr 1fr; gap: 2px; transform: rotate(45deg); }
.logo-mark i { background: var(--primary); }
.logo-mark i:nth-child(2), .logo-mark i:nth-child(3) { background: var(--secondary); }
.logo-word { font: 650 20px/1 var(--display); }
.logo-word b { margin-right: .22em; color: var(--primary-text, var(--primary)); font: 600 17px/1 var(--utility); }
.logo-word small { display: block; margin-top: 4px; font: 600 7px/1 var(--utility); letter-spacing: .16em; text-transform: uppercase; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 24px; font-size: 12px; font-weight: 700; }
.desktop-nav a { position: relative; padding: 7px 0; }
.desktop-nav a[aria-current="page"]::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--primary); content: ""; }
.header-actions { display: flex; align-items: center; justify-self: end; gap: 7px; }
.icon-button { display: inline-grid; min-width: 40px; min-height: 40px; place-items: center; border: 1px solid var(--line); background: #fff; }
.menu-button { display: none; }
.cart-pill { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); font-size: 11px; font-weight: 700; }
.cart-count { display: inline-grid; min-width: 20px; height: 20px; place-items: center; border-radius: 99px; background: var(--primary); color: var(--on-primary); font: 600 9px var(--utility); }
.mobile-menu { position: fixed; z-index: 89; inset: 101px 0 0; display: none; padding: 24px; background: #fff; }
.mobile-menu.is-open { display: block; }
.mobile-menu a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); font: 600 24px/1.1 var(--display); }

/* Signature: a measured two-column fit-card hero, not a full-screen poster. */
.hero--premium {
  display: grid;
  width: min(calc(100% - 40px), var(--wrap));
  min-height: 0;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  margin: 30px auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
}
.hero-premium-photo { grid-area: 1 / 1; width: 100%; height: 500px; object-fit: cover; object-position: center top; }
.hero-premium-wash { display: none; }
.hero-premium-content { display: flex; min-height: 500px; flex-direction: column; justify-content: center; padding: 42px 46px; }
.hero-premium-content::before { width: 74px; height: 5px; margin-bottom: 30px; background: linear-gradient(90deg, var(--primary) 0 64%, var(--secondary) 64%); content: ""; }
.hero-premium-content h1 { max-width: 560px; }
.hero-premium-content .lead { max-width: 470px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-premium-content .button--light { border-color: var(--ink); color: var(--ink); }

.story-band { display: grid; width: min(calc(100% - 40px), var(--wrap)); grid-template-columns: 200px minmax(0,1fr); margin: 56px auto; border: 1px solid var(--line); background: #fff; }
.story-stamp { display: grid; min-height: 200px; place-items: center; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--secondary) 14%, #fff); }
.story-stamp strong { display: grid; width: 132px; height: 132px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 650 30px/1 var(--display); transform: rotate(-6deg); }
.story-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 36px 48px; }
.story-copy blockquote { max-width: 820px; margin: 0; font: 550 clamp(23px, 3vw, 38px)/1.15 var(--display); letter-spacing: -.03em; }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.section-head h2 { max-width: 720px; margin-bottom: 0; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px 16px; }
.product-grid--mosaic { grid-auto-rows: auto; }
.product-card { position: relative; min-width: 0; background: transparent; }
.product-art { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--line); background: var(--mist); }
.product-art > img, .product-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-card:hover .product-art > img { transform: scale(1.025); }
.product-info { min-height: 104px; padding: 13px 2px 0; }
.product-info h3 { margin-bottom: 4px; font-size: 16px; }
.product-category { margin: 0 0 4px; color: var(--muted); font: 500 9px var(--utility); letter-spacing: .1em; text-transform: uppercase; }
.product-description { display: -webkit-box; overflow: hidden; margin-bottom: 8px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; }
.product-price { margin: 8px 0 0; font: 600 11px var(--utility); }
.badge { position: absolute; z-index: 3; top: 10px; left: 10px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.9); font: 600 8px var(--utility); letter-spacing: .08em; text-transform: uppercase; }
.quick-add { position: absolute; z-index: 4; right: 10px; bottom: 112px; display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 19px; }

.collection-focus { display: grid; width: min(calc(100% - 40px), var(--wrap)); min-height: 0; grid-template-columns: 1fr 1fr; margin: 0 auto 68px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.collection-look { min-height: 480px; margin: 0; overflow: hidden; background: var(--mist); }
.collection-look > img { width: 100%; height: 480px; object-fit: cover; object-position: center top; }
.collection-canvas { display: flex; align-items: center; background: var(--primary); color: var(--on-primary); }
.collection-copy { max-width: 560px; padding: 50px; }
.collection-copy .eyebrow, .collection-copy h2 { color: var(--on-primary); }
.collection-copy .lead { color: color-mix(in srgb, var(--on-primary) 82%, transparent); }
.benefit-tickets { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.benefit-ticket { min-height: 150px; padding: 24px; border: 1px solid var(--line); background: #fff; }
.benefit-ticket p { margin-bottom: 0; color: var(--muted); font-size: 13px; }

.kaba-lookbook { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(250px,.7fr); gap: 16px; align-items: start; }
.kaba-lookbook figure { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.kaba-lookbook__main { min-height: 420px; }
.kaba-lookbook__detail { min-height: 300px; margin-top: 48px !important; }
.kaba-lookbook img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.kaba-lookbook figcaption { position: absolute; right: 12px; bottom: 12px; padding: 7px 9px; background: rgba(255,255,255,.9); font: 600 8px var(--utility); letter-spacing: .12em; text-transform: uppercase; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 42px; align-items: start; }
.contact-list { display: grid; gap: 14px; }
.contact-item { display: grid; gap: 5px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.home-visit .contact-list { padding: 28px; border: 1px solid var(--line); background: var(--paper); }
.home-visit .contact-item b { color: var(--primary-text, var(--primary)); font: 600 9px var(--utility); letter-spacing: .12em; text-transform: uppercase; }
.quote-panel { display: grid; grid-template-columns: .55fr 1.45fr; gap: 44px; align-items: center; }
.quote-panel blockquote { margin: 0; font: 550 clamp(25px,3.4vw,44px)/1.1 var(--display); letter-spacing: -.035em; }
.quote-mark { color: var(--primary-text, var(--primary)); }
.closing { text-align: center; }
.closing h2 { max-width: 760px; margin-inline: auto; }
.closing .lead { margin-inline: auto; }
.closing .button { margin-top: 14px; }

/* Inner commerce pages use the same restrained scale. */
.page-hero { padding: 58px 0 40px; border-bottom: 1px solid var(--line); background: #fff; }
.page-hero h1 { max-width: 900px; margin-bottom: 12px; font-size: clamp(40px,5vw,62px); }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 30px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip, .sort { min-height: 40px; border: 1px solid var(--line); background: #fff; }
.chip { padding: 7px 14px; font-size: 12px; font-weight: 700; }
.chip.is-active { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.sort { padding: 7px 32px 7px 11px; }
.product-detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.8fr); gap: 50px; align-items: start; }
.product-detail-media { min-height: 500px; overflow: hidden; background: var(--mist); }
.product-detail-media img { width: 100%; height: 500px; object-fit: cover; object-position: center top; }
.product-detail-copy { padding: 28px 0; }
.product-detail-copy h2 { font-size: clamp(34px,4vw,50px); }
.detail-price { font-size: 19px; font-weight: 700; }
.detail-desc, .detail-note { color: var(--muted); }
.detail-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; }
.selector { margin: 20px 0; }
.selector-label { display: block; margin-bottom: 8px; font: 600 9px var(--utility); letter-spacing: .1em; text-transform: uppercase; }
.option-row { display: flex; flex-wrap: wrap; gap: 7px; }
.option { min-width: 42px; height: 42px; border: 1px solid var(--line); background: #fff; }
.option.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.panel { padding: 26px; border: 1px solid var(--line); background: #fff; }
.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 36px; align-items: start; }
.cart-list { display: grid; gap: 3px; }
.cart-line { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.cart-line img { width: 92px; height: 115px; object-fit: cover; }
.qty { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.qty button { width: 31px; height: 31px; border: 1px solid var(--line); background: #fff; }
.summary { position: sticky; top: 94px; }
.summary h2 { font-size: 29px; }
.summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.empty-state { grid-column: 1/-1; padding: 36px; border: 1px dashed var(--line); background: rgba(255,255,255,.7); }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: center; }
.about-grid figure { min-height: 520px; margin: 0; overflow: hidden; background: var(--mist); }
.about-grid figure img { width: 100%; height: 520px; object-fit: cover; }
.policies-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 48px; }
.policy-nav { position: sticky; top: 94px; display: grid; }
.policy-nav a { padding: 11px 10px; border-left: 2px solid var(--line); }
.richtext > * { max-width: 72ch; }
.richtext section { padding-bottom: 30px; }
.not-found { display: grid; min-height: 60vh; place-items: center; padding: 60px 20px; text-align: center; }
.not-found-code { color: var(--secondary-text, color-mix(in srgb, var(--secondary) 46%, #fff)); font: 650 clamp(90px,18vw,220px)/.75 var(--display); }

.site-footer { padding: 48px 0 22px; border-top: 1px solid var(--line); background: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 34px; }
.footer-brand p { max-width: 300px; color: var(--muted); }
.site-footer h3 { margin-bottom: 12px; font: 700 9px var(--utility); letter-spacing: .12em; text-transform: uppercase; }
.site-footer a, .site-footer span { display: block; min-height: 29px; color: var(--muted); font-size: 13px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font: 500 9px var(--utility); letter-spacing: .05em; text-transform: uppercase; }
.mobile-bottom-nav { display: none; }
.toast { position: fixed; z-index: 150; right: 18px; bottom: 18px; max-width: min(360px,calc(100% - 32px)); padding: 13px 17px; background: var(--ink); color: #fff; box-shadow: var(--soft-shadow); transform: translateY(130%); transition: transform .2s ease; }
.toast.is-visible { transform: translateY(0); }

@media (max-width: 920px) {
  .desktop-nav { gap: 15px; }
  .hero--premium { grid-template-columns: 1fr 1fr; }
  .hero-premium-photo, .hero-premium-content { height: 430px; min-height: 430px; }
  .hero-premium-content { padding: 34px; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .collection-focus { grid-template-columns: 1fr 1fr; }
  .collection-look, .collection-look > img { height: 450px; min-height: 450px; }
  .collection-copy { padding: 36px; }
  .product-detail { gap: 32px; }
  .footer-grid { grid-template-columns: 1.2fr repeat(2,1fr); }
  .footer-grid > :last-child { grid-column: 2; }
}

@media (max-width: 700px) {
  body { padding-bottom: 64px; font-size: 14px; }
  .wrap { width: min(calc(100% - 28px), var(--wrap)); }
  .section { padding: 46px 0; }
  .utility-bar .wrap span:last-child, .desktop-nav, .cart-label { display: none; }
  .utility-bar .wrap { justify-content: center; text-align: center; }
  .header-inner { min-height: 64px; grid-template-columns: 1fr auto; }
  .merchant-logo { max-width: 150px; height: 38px; }
  .menu-button { display: inline-grid; }
  .mobile-menu { inset: 94px 0 64px; }
  body:not(:has(.utility-bar)) .mobile-menu { inset: 64px 0 64px; }
  .hero--premium { width: calc(100% - 28px); grid-template-columns: 1fr; margin-top: 14px; }
  .hero-premium-photo { grid-row: 1; width: 100%; height: 300px; min-height: 300px; }
  .hero-premium-content { grid-row: 2; min-height: 0; height: auto; padding: 26px 22px 30px; }
  .hero-premium-content::before { margin-bottom: 18px; }
  .hero-premium-content h1 { margin-bottom: 12px; font-size: clamp(34px,10.5vw,42px); }
  .hero-premium-content .lead { font-size: 14px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .story-band { width: calc(100% - 28px); grid-template-columns: 86px minmax(0,1fr); margin: 36px auto; }
  .story-stamp { min-height: 156px; }
  .story-stamp strong { width: 72px; height: 72px; overflow: hidden; font-size: 16px; }
  .story-copy { padding: 24px 20px; }
  .story-copy blockquote { font-size: 22px; }
  .section-head { align-items: start; flex-direction: column; margin-bottom: 25px; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 10px; }
  .product-info { min-height: 92px; padding-top: 10px; }
  .product-info h3 { font-size: 15px; }
  .product-description { display: none; }
  .quick-add { bottom: 98px; width: 35px; height: 35px; }
  .collection-focus { width: calc(100% - 28px); grid-template-columns: 1fr; margin-bottom: 52px; }
  .collection-look, .collection-look > img { height: 340px; min-height: 340px; }
  .collection-copy { padding: 32px 24px; }
  .benefit-tickets { grid-template-columns: 1fr; }
  .benefit-ticket { min-height: 0; }
  .kaba-lookbook { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kaba-lookbook__main { min-height: 280px; }
  .kaba-lookbook__detail { min-height: 210px; margin-top: 28px !important; }
  .contact-grid, .about-grid, .policies-layout { grid-template-columns: 1fr; gap: 28px; }
  .quote-panel { grid-template-columns: 1fr; gap: 18px; }
  .quote-panel blockquote { font-size: 27px; }
  .page-hero { padding: 42px 0 30px; }
  .page-hero h1 { font-size: 42px; }
  .catalog-toolbar { align-items: stretch; flex-direction: column; }
  .product-detail { grid-template-columns: 1fr; gap: 18px; }
  .product-detail-media, .product-detail-media img { height: 380px; min-height: 380px; }
  .product-detail-copy { padding-top: 12px; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .about-grid figure, .about-grid figure img { height: 420px; min-height: 420px; }
  .policy-nav { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1/-1; }
  .footer-grid > :last-child { grid-column: 1/-1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .mobile-bottom-nav { position: fixed; z-index: 88; right: 0; bottom: 0; left: 0; display: grid; min-height: 64px; grid-template-columns: repeat(4,1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 -8px 25px rgba(30,39,48,.08); }
  .mobile-bottom-nav a { display: grid; place-items: center; align-content: center; gap: 1px; font-size: 8px; font-weight: 700; }
  .mobile-bottom-nav b { color: var(--primary-text, var(--primary)); font: 600 14px var(--utility); }
  .toast { bottom: 78px; }
}

@media (max-width: 380px) {
  .hero-premium-photo { height: 280px; min-height: 280px; }
  .hero-actions { grid-template-columns: 1fr; }
  .product-grid { gap-inline: 8px; }
  .story-band { grid-template-columns: 72px minmax(0,1fr); }
  .story-stamp strong { width: 58px; height: 58px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* -------------------------------------------------------------------------
   Panorama House
   A photographic runway followed by a horizontal information deck. The
   shared commerce markup stays editor-compatible; the composition does not
   borrow Rail & Fold's frame, Maison Index's side rail, or KABA's overlay.
   ------------------------------------------------------------------------- */

body.panorama-house { background: var(--paper); font-size: 14px; }
.panorama-house .wrap { width: min(calc(100% - 52px), 1180px); }
.panorama-house .section { padding: 72px 0; }
.panorama-house h1,
.panorama-house h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.025em; }
.panorama-house h1 { font-size: clamp(38px, 4vw, 56px); line-height: .98; }
.panorama-house h2 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1; }
.panorama-house h3 { font-size: 16px; }
.panorama-house .eyebrow,
.panorama-house .breadcrumb { font-size: 9px; letter-spacing: .18em; }
.panorama-house .button,
.panorama-house .btn { min-height: 42px; border-radius: 999px; padding-inline: 20px; font-size: 11px; }

/* The merchant identity sits in the centre; navigation and cart balance it. */
.panorama-house .utility-bar { background: var(--white); }
.panorama-house .site-header { background: rgba(255,255,255,.97); }
.panorama-house .header-inner { min-height: 74px; grid-template-columns: 1fr auto 1fr; }
.panorama-house .logo { grid-area: 1 / 2; justify-self: center; }
.panorama-house .merchant-logo { max-width: 190px; height: 43px; }
.panorama-house .desktop-nav { grid-area: 1 / 1; justify-content: flex-start; gap: 20px; }
.panorama-house .desktop-nav a { font-size: 11px; }
.panorama-house .header-actions { grid-area: 1 / 3; }
.panorama-house .cart-pill { border-radius: 999px; }
.panorama-house .cart-count { background: var(--primary); }

/* Signature hero: one uninterrupted runway image and a content deck below. */
.panorama-house .hero--panorama {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 356px auto;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.panorama-house .hero-premium-photo {
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  height: 356px;
  object-fit: cover;
  object-position: center 35%;
}
.panorama-house .hero-premium-wash {
  z-index: 1;
  grid-area: 1 / 1 / 2 / 2;
  display: block;
  background: linear-gradient(90deg, rgba(15,27,24,.12), transparent 32%, transparent 72%, rgba(15,27,24,.09));
  pointer-events: none;
}
.panorama-house .hero-premium-content.wrap {
  z-index: 2;
  grid-area: 2 / 1 / 3 / 2;
  display: grid;
  width: min(calc(100% - 52px), 1180px);
  min-height: 190px;
  grid-template-columns: minmax(270px, 1.18fr) minmax(250px, .9fr) auto;
  align-items: end;
  gap: 20px 44px;
  padding: 28px 0 34px;
}
.panorama-house .hero-premium-content::before { display: none; }
.panorama-house .hero-premium-content .eyebrow { grid-area: 1 / 1 / 2 / -1; margin: 0; }
.panorama-house .hero-premium-content h1 { grid-area: 2 / 1; max-width: 510px; margin: 0; }
.panorama-house .hero-premium-content .lead { grid-area: 2 / 2; max-width: 430px; margin: 0; font-size: 15px; }
.panorama-house .hero-actions { grid-area: 2 / 3; display: grid; gap: 8px; margin: 0; }
.panorama-house .hero-premium-content .button--light { border-color: var(--ink); color: var(--ink); }

/* Story behaves like a fabric selvedge: a narrow label and flowing copy. */
.panorama-house .story-band {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(112px, .22fr) minmax(0, 1.78fr);
  margin: 0;
  border: 0;
  background: var(--brand-deeper, var(--ink));
  color: #fff;
}
.panorama-house .story-stamp { min-height: 190px; border: 0; background: var(--primary); }
.panorama-house .story-stamp strong {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: var(--on-primary);
  font: 600 11px/1 var(--utility);
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: rotate(-90deg);
}
.panorama-house .story-copy { max-width: 1020px; padding: 38px clamp(28px, 5vw, 72px); }
.panorama-house .story-copy .eyebrow { color: var(--secondary-bright, color-mix(in srgb, var(--secondary) 80%, #fff)); }
.panorama-house .story-copy blockquote { max-width: 940px; font: 400 clamp(24px, 3.2vw, 42px)/1.12 var(--display); }

/* Product pairs alternate width, creating a runway rhythm rather than a grid. */
.panorama-house .section[data-section="popular"] { background: var(--white); }
.panorama-house .section-head { margin-bottom: 30px; }
.panorama-house .product-grid--mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 34px 18px;
}
.panorama-house .product-grid--mosaic .product-card:nth-child(4n+1),
.panorama-house .product-grid--mosaic .product-card:nth-child(4n+4) { grid-column: span 5; }
.panorama-house .product-grid--mosaic .product-card:nth-child(4n+2),
.panorama-house .product-grid--mosaic .product-card:nth-child(4n+3) { grid-column: span 7; }
.panorama-house .product-art { height: 278px; aspect-ratio: auto; border: 0; }
.panorama-house .product-art > img { object-position: center 24%; }
.panorama-house .product-info { display: grid; min-height: 82px; grid-template-columns: 1fr auto; gap: 3px 20px; padding: 12px 1px 0; }
.panorama-house .product-category,
.panorama-house .product-description { grid-column: 1 / -1; }
.panorama-house .product-info h3 { margin: 0; font: 400 20px/1.1 var(--display); }
.panorama-house .product-price { align-self: center; margin: 0; }
.panorama-house .quick-add { right: 12px; bottom: 92px; width: 36px; height: 36px; border-radius: 999px; }

/* Craft is a long lookbook plate with its caption running underneath. */
.panorama-house .collection-focus {
  display: grid;
  width: min(calc(100% - 52px), 1180px);
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, .45fr);
  margin: 0 auto 72px;
  border: 0;
  background: var(--white);
}
.panorama-house .collection-look { min-height: 410px; }
.panorama-house .collection-look > img { height: 410px; object-position: center 28%; }
.panorama-house .collection-canvas { align-items: flex-end; background: var(--primary); color: var(--on-primary); }
.panorama-house .collection-copy { padding: 38px 32px; }
.panorama-house .collection-copy h2 { font-size: clamp(30px, 3.5vw, 46px); }
.panorama-house .collection-copy .lead { color: currentColor; font-size: 14px; opacity: .84; }

.panorama-house .benefit-tickets { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.panorama-house .benefit-ticket { min-height: 150px; padding: 24px; border: 0; border-top: 4px solid var(--primary); background: var(--paper); }
.panorama-house .benefit-ticket:nth-child(2) { transform: translateY(18px); }
.panorama-house .benefit-ticket:nth-child(3) { transform: translateY(36px); }

.panorama-house .section[data-section="room"] { padding-top: 100px; background: color-mix(in srgb, var(--secondary) 15%, #fff); }
.panorama-house .kaba-lookbook { grid-template-columns: .72fr 1.28fr; gap: 18px; }
.panorama-house .kaba-lookbook__main { min-height: 430px; }
.panorama-house .kaba-lookbook__detail { min-height: 360px; margin-top: 64px !important; }
.panorama-house .kaba-lookbook figure { border: 7px solid #fff; }

.panorama-house .home-visit { grid-template-columns: .7fr 1.3fr; align-items: start; }
.panorama-house .contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.panorama-house .contact-item { padding: 18px 10px 18px 0; border-bottom: 1px solid var(--line); }
.panorama-house .contact-list .button { width: fit-content; margin-top: 18px; }

.panorama-house .section[data-section="quote"] { border-block: 1px solid var(--line); background: var(--white); }
.panorama-house .quote-panel { grid-template-columns: .45fr 1.55fr; }
.panorama-house .quote-panel blockquote { color: var(--ink); font: 400 clamp(28px, 4.2vw, 56px)/1.06 var(--display); }
.panorama-house .quote-mark { color: var(--primary-text, var(--primary)); }
.panorama-house .closing { background: var(--brand-deeper, var(--ink)); color: #fff; text-align: left; }
.panorama-house .closing .wrap { max-width: 900px; margin-left: max(26px, calc((100vw - 1180px) / 2)); }
.panorama-house .closing .lead { color: rgba(255,255,255,.72); }

/* All secondary commerce pages keep the same compact, editorial system. */
.panorama-house .page-hero { border-bottom: 1px solid var(--line); background: var(--white); }
.panorama-house .page-hero h1 { max-width: 760px; font-size: clamp(38px, 5vw, 62px); }
.panorama-house .catalogue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 18px; }
.panorama-house .catalogue-grid .product-art { height: 320px; }
.panorama-house .product-detail { grid-template-columns: minmax(0, .9fr) minmax(320px, .72fr); gap: 56px; }
.panorama-house .product-detail-media,
.panorama-house .product-detail-media img { height: 560px; min-height: 560px; }
.panorama-house .panel,
.panorama-house .summary,
.panorama-house .contact-card { border-radius: 0; box-shadow: none; }
.panorama-house .site-footer { background: var(--white); }
.panorama-house .footer-grid { border-top: 1px solid var(--line); }
.panorama-house .footer-brand h2 { font-size: 32px; }

@media (max-width: 980px) {
  .panorama-house .hero-premium-content.wrap { grid-template-columns: 1fr 1fr; }
  .panorama-house .hero-premium-content h1 { grid-area: 2 / 1; }
  .panorama-house .hero-premium-content .lead { grid-area: 2 / 2; }
  .panorama-house .hero-actions { grid-area: 3 / 1 / 4 / -1; display: flex; }
  .panorama-house .collection-focus { grid-template-columns: 1.1fr .9fr; }
  .panorama-house .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .panorama-house .wrap { width: min(calc(100% - 36px), 1180px); }
  .panorama-house .section { padding: 54px 0; }
  .panorama-house .utility-bar .wrap span:first-child { display: none; }
  .panorama-house .header-inner { display: grid; min-height: 66px; grid-template-columns: 1fr auto; }
  .panorama-house .logo { grid-area: 1 / 1; justify-self: start; }
  .panorama-house .header-actions { grid-area: 1 / 2; }
  .panorama-house .merchant-logo { max-width: 152px; height: 40px; }
  .panorama-house .mobile-menu { inset: 96px 0 64px; }

  .panorama-house .hero--panorama { grid-template-rows: 248px auto; }
  .panorama-house .hero-premium-photo { height: 248px; min-height: 248px; object-position: center 28%; }
  .panorama-house .hero-premium-content.wrap {
    width: min(calc(100% - 36px), 1180px);
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 0 26px;
  }
  .panorama-house .hero-premium-content .eyebrow,
  .panorama-house .hero-premium-content h1,
  .panorama-house .hero-premium-content .lead,
  .panorama-house .hero-actions { grid-area: auto; }
  .panorama-house .hero-premium-content h1 { font-size: clamp(34px, 10.5vw, 43px); }
  .panorama-house .hero-premium-content .lead { font-size: 14px; }
  .panorama-house .hero-actions { display: flex; margin-top: 5px; }

  .panorama-house .story-band { grid-template-columns: 74px minmax(0, 1fr); }
  .panorama-house .story-stamp { min-height: 176px; }
  .panorama-house .story-copy { padding: 28px 22px; }
  .panorama-house .story-copy blockquote { font-size: 24px; }

  .panorama-house .product-grid--mosaic { grid-template-columns: 1fr 1fr; gap: 26px 10px; }
  .panorama-house .product-grid--mosaic .product-card:nth-child(n) { grid-column: auto; }
  .panorama-house .product-art { height: 220px; }
  .panorama-house .product-info { display: block; min-height: 90px; }
  .panorama-house .product-info h3 { font-size: 17px; }
  .panorama-house .product-price { margin-top: 6px; }
  .panorama-house .quick-add { bottom: 98px; }

  .panorama-house .collection-focus { width: 100%; grid-template-columns: 1fr; margin-bottom: 0; }
  .panorama-house .collection-look,
  .panorama-house .collection-look > img { height: 300px; min-height: 300px; }
  .panorama-house .collection-copy { padding: 30px 22px; }
  .panorama-house .benefit-tickets { grid-template-columns: 1fr; }
  .panorama-house .benefit-ticket:nth-child(n) { transform: none; }

  .panorama-house .section[data-section="room"] { padding-top: 54px; }
  .panorama-house .kaba-lookbook { grid-template-columns: 1fr 1fr; gap: 8px; }
  .panorama-house .kaba-lookbook__main { min-height: 270px; }
  .panorama-house .kaba-lookbook__detail { min-height: 210px; margin-top: 30px !important; }
  .panorama-house .kaba-lookbook figure { border-width: 4px; }

  .panorama-house .home-visit,
  .panorama-house .quote-panel { grid-template-columns: 1fr; }
  .panorama-house .contact-list { grid-template-columns: 1fr; }
  .panorama-house .closing .wrap { margin-inline: auto; }
  .panorama-house .catalogue-grid { grid-template-columns: 1fr 1fr; }
  .panorama-house .catalogue-grid .product-art { height: 240px; }
  .panorama-house .product-detail { grid-template-columns: 1fr; gap: 20px; }
  .panorama-house .product-detail-media,
  .panorama-house .product-detail-media img { height: 410px; min-height: 410px; }
}

@media (max-width: 390px) {
  .panorama-house .product-grid--mosaic,
  .panorama-house .catalogue-grid { grid-template-columns: 1fr; }
  .panorama-house .product-art,
  .panorama-house .catalogue-grid .product-art { height: 300px; }
  .panorama-house .quick-add { bottom: 92px; }
}

/* Phone use: basket and card buttons at least 40px to tap, the sort list at 16px so a phone
   does not zoom in, and a checkout line's total on one line.
   A card's quick "+" is a link to the product page when the product has sizes. */
.qty button { min-width: 40px; min-height: 40px; }
.qty .sbo-linkbtn { width: auto; }
.quick-add { min-width: 40px; min-height: 40px; }
a.quick-add { text-decoration: none; }
.sort { font-size: 16px; }
#sbo .cart-line > strong { white-space: nowrap; }
@media (max-width: 560px) { #sbo .cart-line > strong { grid-column: 2; } }

/* The business's colours: words on a brand panel read on their own colour (shop_theme). */
.collection-copy .button--light { border-color: var(--on-primary, #fff); color: var(--on-primary, #fff); }
.panorama-house .closing .eyebrow { color: var(--primary-bright, var(--primary)); }
/* On a phone the long page list takes the footer's whole width, so no
   page name breaks in two ("Rendez- / vous"). */
@media (max-width: 700px) { .site-footer .footer-grid > div:has(> a:nth-of-type(7)) { grid-column: 1 / -1; } }
/* The design's own collection photograph stands its model at the right:
   a narrow or oval frame keeps her in view, not the empty curtain. */
:root body img[src*="hero-kaba"] { object-position: 70% center; }
/* Product photographs keep one portrait shape on every screen (a clothing
   catalogue), never a wide strip that cuts a garment in half. */
.panorama-house .product-grid--mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}
.panorama-house .product-grid--mosaic .product-card:nth-child(n){grid-column:auto}
.panorama-house .product-art,.panorama-house .catalogue-grid .product-art{height:auto;aspect-ratio:4/5}
@media (max-width: 1000px){.panorama-house .product-grid--mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A wide screen: the hero grows with the width, so no more than about 40%
   of its photograph is cropped away, and the crop keeps the upper part
   (heads and faces) in view. */
@media(min-width:900px){:root body section.hero[data-section="hero"]{min-height:max(clamp(560px,80vh,780px),42vw)}}
:root body section.hero[data-section="hero"] > img.hero-premium-photo,
:root body section.hero[data-section="hero"] > .hero-media img{object-position:50% 20%}
:root body section.hero[data-section="hero"] .index-hero-frame .index-hero-image{object-position:50% 18%}
/* On a phone the design's own hero photograph keeps its person or bottle
   in the narrow frame (a business's own photograph stays centred). */
@media(max-width:899px){:root body section.hero[data-section="hero"] > img.hero-premium-photo[src*="hero-kaba"]{object-position:80% 20%}:root body section.hero[data-section="hero"] > img.hero-premium-photo[src*="boutique-1200"]{object-position:72% 20%}}
/* >>> standard 2026-09-25 */
/* The finished sites' standard (goal 2026-09-25): sections at most 68px a
   side (40px on a phone), the engines' bands a little tighter and in the
   design's own colours, the menu on one row, a long footer page list in two
   columns, no drawn ornaments. */
:root body{--ground:var(--white,#fff);--surface:var(--mist,var(--paper,#f4f4f0));--surface-2:var(--line,#e5e5e0);--ink-soft:var(--muted,#5f625f);--font-display:var(--display,inherit);--radius:0px;--radius-btn:0px}
:root body .section{padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(40px,5vw,68px)}
:root body .section.eng-sec{padding-top:clamp(36px,4vw,52px);padding-bottom:clamp(36px,4vw,52px)}
:root body .section > .wrap > :first-child{margin-top:0}
:root body .section > .wrap > :last-child{margin-bottom:0}
:root body .eng-sec .eng-head{margin-top:0}
@media(max-width:760px){:root body .section{padding-top:40px;padding-bottom:40px}}
:root body :is(.section h2,.section-head h2,.eng-head h2){max-width:none;text-wrap:balance}
:root body .section-head{margin-bottom:clamp(22px,3vw,36px)}
:root body .eng-page-intro{min-height:0;padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(28px,4vw,48px)}
:root body .eng-page-intro h1{margin-top:0}
/* The shop's own home sections: no band held taller than its words. */
:root body :is(.story-band,.collection-focus){min-height:0}
:root body .story-stamp{min-height:0;padding:clamp(28px,4vw,48px) 24px}
:root body .collection-canvas{min-height:0}
:root body .collection-copy{padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(40px,5vw,68px)}
:root body .closing{min-height:0}
:root body .benefit-ticket{min-height:0}
/* No drawn ornaments: the stamp's ring, the canvas circle, the ticket
   notches, the eyebrow dashes and bars. */
:root body .story-stamp strong{width:auto;height:auto;border:0;border-radius:0;transform:none;text-align:center;line-height:1.05}
:root body :is(.collection-canvas,.benefit-ticket,.hero-premium-content,.eyebrow)::before,
:root body :is(.benefit-ticket,.eyebrow,.story-stamp)::after,:root body .story-stamp::before{content:none;display:none}
/* An empty notice never shows as a dark square at the screen's edge. */
:root body .toast:empty{display:none}
/* The engines' cards and bands in the design's own look. */
:root body .eng-sec > .wrap{width:min(1240px,calc(100% - 40px));margin-inline:auto}
:root body .eng-card{border-color:var(--line,#ddd)}
:root body .eng-card__body h3{font-family:var(--body,inherit);font-weight:700;letter-spacing:0}
:root body .eng-review blockquote{max-width:none;margin:0;padding:0;border:0;text-align:left;font-size:inherit;letter-spacing:normal}
:root body .eng-review blockquote p{font-size:1.08rem;line-height:1.5}
:root body .eng-figures-band{background:var(--white,#fff)}
/* The menu on one row on a computer, however many pages are on. */
@media(min-width:1001px){
  :root body :is(.header-inner,.header-in){grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,2vw,28px)}
  :root body header :is(.desktop-nav,.nav-links){flex-wrap:nowrap;justify-content:center;gap:clamp(10px,1.3vw,22px);min-width:0;max-width:none}
  :root body :is(.desktop-nav,.nav-links) > a{flex-shrink:0;white-space:nowrap}
  :root body :is(.desktop-nav,.nav-links):has(> a:nth-child(8)) > a{font-size:12px;letter-spacing:.01em}
  :root body header :is(.desktop-nav,.nav-links):has(> a:nth-child(10)){gap:clamp(8px,.95vw,16px)}
  :root body :is(.desktop-nav,.nav-links):has(> a:nth-child(10)) > a{font-size:11.5px}
  :root body .header-actions{flex-shrink:0}
}
/* A long footer page list in two columns. */
:root body .site-footer .footer-grid > div:has(> a:nth-of-type(7)){display:grid;grid-template-columns:repeat(2,minmax(0,max-content));column-gap:28px;align-content:start}
:root body .site-footer .footer-grid > div:has(> a:nth-of-type(7)) > :is(h2,h3,p){grid-column:1/-1}
/* The editors: every photograph keeps its frame inside the editor's wrapper. */
:root body :is(figure,.eng-card__photo,.product-art) > [data-paurtal-img-wrap]{display:block !important;width:100%;height:100%}
/* Headings spread out: the craft panel as wide as its photograph, the visit
   and quote headings at a size that reads on two lines. */
@media(min-width:1001px){:root body .collection-focus{grid-template-columns:1fr 1fr}}
:root body section[data-section="craft"] h2{font-size:clamp(34px,3.4vw,52px);line-height:1.05;max-width:none}
:root body section[data-section="visit"] h2{font-size:clamp(32px,3.2vw,50px);line-height:1.05;max-width:none}
:root body section[data-section="quote"] blockquote{font-size:clamp(28px,3vw,46px);line-height:1.12}
/* The business's name always shows in full in the header: a long name wraps
   onto a second line instead of being cut short. */
:root body :is(.site-header .logo,.site-header .brand){min-width:0;max-width:100%}
:root body .site-header :is(.logo-word,.brand){display:block;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.08;overflow-wrap:break-word}
@media(min-width:1001px){:root body .site-header .logo-word{max-width:13em}:root body .site-header .brand{max-width:11em}}
@media(max-width:1000px){:root body .site-header :is(.logo-word,.brand){max-width:calc(100vw - 150px)}}
/* The hero: the photograph across the whole width, the words on it in white
   over a dark fade from their side (the bottom on a phone, the left on a
   computer); no split card, no frame, no narrow column, no ribbon or
   specks. The KABA set's hero (img.hero-premium-photo, Maison Index's three
   framed photographs, .hero-premium-content) and Fashion Editorial's
   (figure.hero-media, .hero-copy). */
:root body section[data-section="hero"]{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr;grid-template-rows:none;align-items:end;align-content:end;width:100%;max-width:none;min-height:max(500px,calc(100svh - 230px));margin:0;padding:0;background:#141a19;border:0;border-radius:0;box-shadow:none;overflow:hidden;gap:0;color:#fff}
:root body section[data-section="hero"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;display:block;width:auto;height:auto;margin:0;border:0;border-radius:0;transform:none;opacity:1;background:linear-gradient(0deg,rgba(10,14,13,.9) 0%,rgba(10,14,13,.72) 42%,rgba(10,14,13,.34) 72%,rgba(10,14,13,.18) 100%)}
:root body section[data-section="hero"]::after,:root body section[data-section="hero"] :is(.hero-premium-wash,.hero-premium-caption,.textile-ribbon,.antigravity-canvas,figcaption){display:none}
:root body section[data-section="hero"] > :is(.hero-premium-photo,.hero-media,.index-hero-media){position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;min-height:0;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;clip-path:none;-webkit-mask:none;mask:none;transform:none;opacity:1;overflow:hidden;grid-area:auto;background:none}
:root body section[data-section="hero"] > img.hero-premium-photo{object-fit:cover;object-position:center 30%}
:root body section[data-section="hero"] > .hero-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:center 30%;border:0;border-radius:0;clip-path:none;transform:none;filter:none}
/* Maison Index keeps its three photographs, side by side across the width. */
:root body section[data-section="hero"] > .index-hero-media{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:4px}
:root body section[data-section="hero"] .index-hero-frame{position:relative;margin:0;min-height:0;border:0;border-radius:0;box-shadow:none;overflow:hidden}
:root body section[data-section="hero"] .index-hero-frame--lead{grid-area:1/1/3/2}
:root body section[data-section="hero"] .index-hero-frame--1{grid-area:1/2/2/3}
:root body section[data-section="hero"] .index-hero-frame--2{grid-area:2/2/3/3}
:root body section[data-section="hero"] .index-hero-image{width:100%;height:100%;object-fit:cover}
:root body section[data-section="hero"] > :is(.hero-premium-content,.hero-copy){position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;width:min(1240px,calc(100% - 40px));max-width:none;min-height:0;height:auto;margin:0 auto;padding:36px 0 40px;background:none;border:0;border-radius:0;box-shadow:none;clip-path:none;transform:none;grid-area:auto;color:#fff;pointer-events:none}
:root body section[data-section="hero"] > :is(.hero-premium-content,.hero-copy) > *,:root body section[data-section="hero"] .hero-copy-inner > *{pointer-events:auto}
:root body section[data-section="hero"] .hero-copy-inner{max-width:640px;pointer-events:none}
:root body section[data-section="hero"] :is(h1,.eyebrow,.lead){color:#fff;text-shadow:none}
:root body section[data-section="hero"] h1{width:fit-content;max-width:14ch;margin:0 0 .3em;font-size:clamp(42px,6vw,88px);line-height:1;text-wrap:balance}
:root body section[data-section="hero"] .lead{max-width:46ch;margin:0;color:#e9ece9;font-size:clamp(15px,1.3vw,18px);line-height:1.6}
:root body section[data-section="hero"] .eyebrow{margin-bottom:14px;opacity:.92}
:root body section[data-section="hero"] .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
:root body section[data-section="hero"] .hero-actions :is(.button,.btn){min-width:0}
:root body section[data-section="hero"] .hero-actions :is(.button--primary,.btn--primary){background:#fff;border-color:#fff;color:var(--ink,#141414)}
:root body section[data-section="hero"] .hero-actions :is(.button--light,.btn--light):not(:first-child){background:transparent;border-color:#fff;color:#fff}
:root body section[data-section="hero"] .hero-actions :is(.button--light,.btn--light):first-child{background:#fff;border-color:#fff;color:var(--ink,#141414)}
@media(max-width:699px){:root body section[data-section="hero"] .hero-actions{display:flex;padding-right:0}:root body section[data-section="hero"] .hero-actions > *{flex:1 1 auto}}
@media(min-width:900px){
  :root body section[data-section="hero"]{align-items:center;align-content:center;min-height:clamp(560px,80vh,780px)}
  :root body section[data-section="hero"]::before{background:linear-gradient(90deg,rgba(10,14,13,.86) 0%,rgba(10,14,13,.66) 36%,rgba(10,14,13,.2) 66%,rgba(10,14,13,0) 84%)}
  :root body section[data-section="hero"] > :is(.hero-premium-content,.hero-copy){justify-content:center;padding:clamp(56px,9vh,110px) 0}
  :root body section[data-section="hero"] > .hero-premium-content > *{max-width:640px}
}
/* The page across the whole width: the story and craft bands are bands, not
   cards held in a narrow column. */
:root body{--wrap:1240px}
:root body :is(.story-band,.collection-focus){width:100%;max-width:none;margin:0;border-inline:0;border-radius:0}
:root body .story-band{border-block:1px solid var(--line)}
/* On a phone the photograph keeps the woman in the green dress in view. */
@media(max-width:699px){:root body section[data-section="hero"] > img.hero-premium-photo{object-position:66% 30%}}
/* <<< standard 2026-09-25 */