/* =============================================================================
   Olivara - fm-skinrize (theme-forge likeness rebuild)
   Original stylesheet. Geometry measured live from the reference at 1440 and 390.
   Tokens: cream paper, sage surface, olive ink, khaki soft pill.
   Type: Libre Caslon Display (display caps) + Average Sans (body).
   ============================================================================= */

/* ---------- fonts (self-hosted, latin) ---------- */
@font-face {
  font-family: 'Libre Caslon Display';
  src: url('../fonts/libre-caslon-display-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'Average Sans';
  src: url('../fonts/average-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: optional;
}

/* ---------- tokens ---------- */
:root {
  --paper: #FFFFF5;        /* page */
  --surface: #E7E9D4;      /* sage cards, hero card, wells */
  --surface-2: #F5F6E7;    /* pale sage, soft fills */
  --khaki: #CFD1B4;        /* secondary pill, hairline-dark */
  --ink: #4A5B35;          /* olive: display type, primary pill */
  --ink-deep: #3F4D2C;     /* hover / active olive */
  --muted: #5C6A48;        /* body copy (deepened from the reference #717F5D) */
  --hairline: #DBDECA;
  --watermark: #E3E6D3;

  --fd: 'Libre Caslon Display', 'Times New Roman', Georgia, serif;
  --fb: 'Average Sans', 'Helvetica Neue', Arial, sans-serif;

  --r-panel: 20px;   /* hero card */
  --r-cta: 18px;     /* subscribe panel */
  --r-well: 16px;    /* media wells, service + journal feature cards */
  --r-tile: 14px;    /* product cards, info cards, collage tiles */
  --r-card: 12px;    /* hero mini card, icon tile */
  --r-thumb: 8px;
  --r-pill: 999px;

  --rail: 1152px;
  --gutter: 20px;
  --gap: 16px;

  --dur: .4s;
  --ease: cubic-bezier(.33, 1, .68, 1);
  --pscale: 1;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--muted);
  font: 400 17px/24px var(--fb);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ln { display: block; }
.mbr { display: inline; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- rail + section rhythm ---------- */
.wrap { width: min(var(--rail), 100% - var(--gutter) * 2); margin-inline: auto; }
section { position: relative; }
.pt { padding-top: calc(var(--pt, 0px) * var(--pscale)); }
.pb { padding-bottom: calc(var(--pb, 0px) * var(--pscale)); }

/* ---------- display type ---------- */
.d1, .d2, .d3, .d4 {
  font-family: var(--fd);
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.d1 { font-size: 62px; line-height: 72px; }
.d2 { font-size: 60px; line-height: 66px; }
.d3 { font-size: 40px; line-height: 46px; }
.d4 { font-size: 26px; line-height: 30px; letter-spacing: -.01em; }
.statement {
  font-family: var(--fd);
  font-weight: 400;
  font-size: 38px;
  line-height: 47px;
  letter-spacing: -.01em;
  color: var(--ink);
  text-transform: none;
}
.eyebrow {
  font: 400 16px/24px var(--fb);
  color: var(--ink);
  letter-spacing: .01em;
}
.eyebrow::before { content: "\2014\00a0"; }
.lead { font-size: 18px; line-height: 27px; color: var(--muted); }
.small { font-size: 15px; line-height: 21px; }
.center { text-align: center; }
.center .statement, .center .d2 { margin-inline: auto; }

/* ---------- controls ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px;
  border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font-size: 16px; line-height: 24px; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pill:hover { background: var(--ink-deep); }
.pill-soft { background: var(--khaki); color: var(--ink); }
.pill-soft:hover { background: #C3C6A3; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--khaki); }
.icon-btn svg { width: 18px; height: 18px; }
.round-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--khaki); background: transparent; color: var(--ink);
  cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.round-btn svg { width: 17px; height: 17px; }
.round-btn:hover { background: var(--surface); border-color: var(--surface); }
.round-btn[disabled] { opacity: .45; cursor: default; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink);
  font-size: 14px; line-height: 20px;
}
.badge svg { width: 13px; height: 13px; }
.badge-ink { background: var(--ink); color: var(--paper); }

/* =============================================================================
   HEADER  (reference: position static, 88px, scrolls away, cream)
   ============================================================================= */
.hdr { background: var(--paper); }
.hdr-in { height: 88px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.brand svg { width: 30px; height: 30px; flex: 0 0 30px; }
.brand span {
  font-family: var(--fd); font-size: 27px; line-height: 32px;
  letter-spacing: .035em; text-transform: uppercase;
}
.nav { display: flex; gap: 24px; margin-inline: auto; }
.nav a {
  font-size: 16px; line-height: 24px; color: var(--muted);
  padding: 4px 2px;
  transition: color var(--dur) var(--ease);
}
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.hdr-cta { display: flex; align-items: center; gap: 8px; }
.burger { display: none; }

/* mobile menu panel */
.menu { display: none; }

/* =============================================================================
   HERO  (card 1152x706 r20, text col left, photo bottom-right 749x655)
   ============================================================================= */
.hero { padding-top: 12px; }
.hero-card {
  position: relative;
  height: 706px;
  border-radius: var(--r-panel);
  background: var(--surface);
  overflow: hidden;
}
.hero-card picture { display: contents; }
.hero-photo {
  position: absolute; right: 0; bottom: 0;
  width: 65%; height: 655px;
  object-fit: cover; object-position: 50% 20%;
}
.hero-copy {
  position: absolute; left: 26px; top: 140px;
  width: 420px; max-width: calc(100% - 52px);
}
.hero-copy .d1 { margin-top: 16px; }
.hero-copy .lead { margin-top: 8px; width: 400px; max-width: 100%; }
.hero-actions { display: flex; gap: 14px; margin-top: 24px; }

/* floating product card */
.mini {
  position: absolute; left: 26px; bottom: 26px;
  display: flex; gap: 10px;
  width: 350px; height: 140px; padding: 10px;
  border-radius: var(--r-card);
  background: var(--paper);
}
.mini-thumb {
  display: block; position: relative;
  width: 126px; height: 120px; flex: 0 0 126px;
  border-radius: var(--r-thumb);
  background: var(--surface);
  overflow: hidden;
}
.mini-thumb img { width: 100%; height: 100%; object-fit: contain; }
.mini-thumb .badge { position: absolute; left: 6px; top: 6px; height: 20px; padding: 0 8px; font-size: 12px; gap: 4px; }
.mini-thumb .badge svg { width: 11px; height: 11px; }
.mini-body { display: block; padding-top: 4px; min-width: 0; }
.mini-body .name {
  display: block;
  font-family: var(--fd); font-size: 19px; line-height: 24px;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--ink);
}
.mini-body .desc {
  margin-top: 4px; font-size: 14px; line-height: 19px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.price { display: flex; align-items: baseline; gap: 8px; }
.price b {
  font-family: var(--fd); font-weight: 400; font-size: 22px; line-height: 24px; color: var(--ink);
}
.price s { font-size: 14px; line-height: 17px; color: var(--muted); }
.mini-body .price { margin-top: 12px; }

/* =============================================================================
   INTRO STATEMENT + COLLAGE
   ============================================================================= */
.s-intro { --pt: 135px; --pb: 42px; }
.s-intro .statement { max-width: 650px; margin-top: 7px; }

.s-collage { --pt: 0px; --pb: 0px; }
.stage {
  position: relative;
  width: 716px; height: 252px;
  margin-inline: auto;
  overflow: hidden;
}
.stage-item {
  position: absolute; top: 0; left: 0;
  border-radius: var(--r-tile);
  overflow: hidden;
  transform-origin: 50% 100%;
  will-change: transform;
}
.stage-item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-tile); }
.stage-item.tile { background: var(--surface); border-radius: var(--r-tile); }
.stage-item.tile img { object-fit: contain; padding: 12px; }

/* =============================================================================
   PRODUCT GRID (3 x 373 cards, 16 gap, image well 325x250 contain)
   ============================================================================= */
.s-new { --pt: 272px; --pb: 209px; }
.head-center { text-align: center; }
.head-center .eyebrow { display: block; margin-bottom: 4px; }
.head-center .d2 { max-width: 760px; margin-inline: auto; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.p-card {
  position: relative;
  display: block;
  padding: 26px 24px 24px;
  border-radius: var(--r-tile);
  background: var(--surface);
  transition: background-color var(--dur) var(--ease);
}
.p-card:hover { background: #DFE2C8; }
.p-card .badge { position: absolute; left: 26px; top: 26px; }
.p-well { display: block; height: 250px; margin: 51px 0 18px; }
.p-well img { width: 100%; height: 100%; object-fit: contain; }
.p-card .name {
  display: block;
  font-family: var(--fd); font-size: 26px; line-height: 30px;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--ink);
}
.p-card .price { margin-top: 6px; }
.grid-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; margin-bottom: 44px;
}
.grid-head .d1 { max-width: 620px; }

/* =============================================================================
   TREATMENTS (staggered 380 cards: L R / C / L R)
   ============================================================================= */
.s-svc { --pt: 209px; --pb: 101px; }
.svc-intro { text-align: center; }
.svc-intro .lead { max-width: 520px; margin: 16px auto 0; }
.svc-intro .pill { margin-top: 24px; }
.svc-grid {
  margin-top: 306px;
  display: grid;
  grid-template-columns: 380px 1fr 380px;
  row-gap: 94px;
}
.svc-card {
  width: 380px;
  border-radius: var(--r-well);
  background: var(--surface);
  overflow: hidden;
}
.svc-card img { width: 100%; height: 300px; object-fit: cover; }
.svc-body { padding: 22px 20px 26px; }
.svc-body .d4 { margin-bottom: 8px; }
.svc-card:nth-child(1) { grid-column: 1; grid-row: 1; }
.svc-card:nth-child(2) { grid-column: 3; grid-row: 1; }
.svc-card:nth-child(3) { grid-column: 2; grid-row: 2; justify-self: center; }
.svc-card:nth-child(4) { grid-column: 1; grid-row: 3; }
.svc-card:nth-child(5) { grid-column: 3; grid-row: 3; }

/* =============================================================================
   FILM BAND (reference: autoplay muted loop video, 1440x900 full bleed)
   ============================================================================= */
.s-film { --pt: 0px; --pb: 0px; }
.film {
  position: relative;
  height: 900px;
  background: var(--surface);
  overflow: hidden;
}
.film img { width: 100%; height: 100%; object-fit: cover; }
.film-mark {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 245, .85);
  border-radius: var(--r-pill);
  color: var(--paper);
}
.film-mark svg { width: 16px; height: 16px; }

/* =============================================================================
   ABOUT SPLIT + VALUE ROW
   ============================================================================= */
.s-about { --pt: 100px; --pb: 32px; }
.split {
  display: grid;
  grid-template-columns: 520px 1fr;
  column-gap: 66px;
  align-items: start;
}
.split-media {
  border-radius: var(--r-well);
  background: var(--surface);
  overflow: hidden;
}
.split-media img { width: 100%; height: 500px; object-fit: cover; }
.about-copy { padding-top: 61px; }
.about-copy .d2 { margin: 28px 0 20px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 46px; }
.stat b {
  display: block;
  font-family: var(--fd); font-weight: 400; font-size: 38px; line-height: 44px;
  color: var(--ink); letter-spacing: -.01em;
}
.stat span { display: block; margin-top: 4px; font-size: 16px; line-height: 24px; }

.s-values { --pt: 0px; --pb: 216px; }
.values { border-top: 1px solid var(--hairline); padding-top: 51px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value svg { width: 22px; height: 22px; color: var(--ink); }
.value .d4 { margin: 79px 0 8px; font-size: 26px; }
.value p { max-width: 250px; font-size: 16px; line-height: 24px; }

/* =============================================================================
   CAROUSEL (3 visible 373 cards, arrows centered below)
   ============================================================================= */
.s-best { --pt: 0px; --pb: 207px; }
.rail-mask { overflow: hidden; margin-top: 42px; }
.rail-track {
  display: flex; gap: var(--gap);
  transition: transform .55s var(--ease);
}
.rail-track > * { flex: 0 0 calc((100% - var(--gap) * 2) / 3); }
.rail-nav { display: flex; gap: 10px; justify-content: center; margin-top: 40px; }

/* =============================================================================
   TESTIMONIAL
   ============================================================================= */
.s-quote { --pt: 0px; --pb: 215px; }
.quote-grid { display: grid; grid-template-columns: 567px 1fr; column-gap: 22px; align-items: center; }
.quote-media { border-radius: var(--r-well); background: var(--surface); overflow: hidden; }
.quote-media img { width: 100%; height: 496px; object-fit: cover; }
.stars { display: flex; gap: 4px; color: var(--ink); }
.stars svg { width: 15px; height: 15px; }
.quote-body .statement { margin: 32px 0 34px; }
.quote-body .d4 { font-size: 24px; line-height: 28px; }
.quote-body .role { margin-top: 4px; font-size: 15px; line-height: 21px; }

/* =============================================================================
   JOURNAL
   ============================================================================= */
.s-journal { --pt: 0px; --pb: 137px; }
.journal-grid { display: grid; grid-template-columns: 565px 1fr; column-gap: 22px; margin-top: 52px; }
.j-feature {
  border-radius: var(--r-well); background: var(--surface); overflow: hidden;
  display: flex; flex-direction: column;
}
.j-feature { height: 634px; }
.j-feature img { width: 100%; height: 400px; object-fit: cover; }
.j-feature-body { padding: 34px 24px 30px; }
.j-meta { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 21px; }
.j-meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.j-feature .d3 { margin: 12px 0 12px; }
.j-side { display: grid; gap: 21px; align-content: start; }
.j-card {
  display: grid; grid-template-columns: 225px 1fr;
  border-radius: var(--r-card); background: var(--surface); overflow: hidden;
  height: 201px;
  transition: background-color var(--dur) var(--ease);
}
.j-card:hover { background: #DFE2C8; }
.j-card img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.j-card-body { padding: 22px 22px 22px 24px; }
.j-card .d4 {
  margin: 10px 0 8px; font-size: 22px; line-height: 26px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.j-card .desc, .j-feature .desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* =============================================================================
   CTA PANEL
   ============================================================================= */
.s-cta { --pt: 0px; --pb: 125px; }
.cta-card {
  position: relative;
  height: 579px;
  border-radius: var(--r-cta);
  background: var(--surface);
  overflow: hidden;
}
.cta-photo {
  position: absolute; right: 0; top: 0;
  width: 50%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
}
.cta-copy { position: absolute; left: 26px; top: 152px; width: 420px; max-width: calc(100% - 52px); }
.cta-copy .d2 { margin: 4px 0 18px; }
.subs { display: flex; gap: 10px; margin-top: 26px; }
.subs input {
  width: 235px; height: 50px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink);
  font-size: 16px;
}
.subs input::placeholder { color: var(--muted); }
.subs .pill { height: 50px; padding: 0 24px; }
.form-note { margin-top: 14px; font-size: 15px; line-height: 21px; color: var(--ink); }
.form-note[hidden] { display: none; }

/* =============================================================================
   FOOTER
   ============================================================================= */
.ftr { padding-bottom: 24px; }
.ftr-grid { display: grid; grid-template-columns: 501px 161px 167px 1fr; }
.ftr-about p { margin: 22px 0 24px; max-width: 300px; }
.ftr h2 { font: 400 16px/24px var(--fb); color: var(--ink); margin-bottom: 16px; }
.ftr-col a, .ftr-col span { display: block; font-size: 16px; line-height: 34px; }
.ftr-col a { transition: color var(--dur) var(--ease); }
.ftr-col a:hover { color: var(--ink); }
.mark {
  display: flex; align-items: center; gap: 34px;
  overflow: hidden;
  margin-top: 76px;
  color: var(--watermark);
  user-select: none;
}
.mark svg { width: 190px; height: 190px; flex: 0 0 190px; }
.mark span {
  font-family: var(--fd); font-size: 220px; line-height: .78; white-space: nowrap;
  letter-spacing: .01em; text-transform: uppercase;
}
.ftr-bottom {
  display: flex; align-items: baseline; justify-content: space-between; gap: 32px;
  border-top: 1px solid var(--hairline);
  padding-top: 18px; margin-top: 18px;
  font-size: 14px; line-height: 20px;
}
.ftr-bottom .credit b { font-weight: 400; color: var(--ink); }
.disclaimer { margin-top: 12px; font-size: 13px; line-height: 19px; max-width: 900px; }

/* =============================================================================
   INNER PAGE HERO (eyebrow + d1 left, lead + pills right)
   ============================================================================= */
.page-hero { --pt: 52px; --pb: 0px; }
.page-hero .grid-head { margin-bottom: 0; }
.page-hero-grid {
  display: grid; grid-template-columns: 1fr 402px; column-gap: 60px; align-items: start;
}
.page-hero .d1 { margin-top: 16px; }
.page-hero-side { padding-top: 66px; }
.page-hero-side .actions { display: flex; gap: 14px; margin-top: 26px; }
.page-hero-side .select-wrap { margin-top: 0; }

/* shop filter select */
.select-wrap { position: relative; display: inline-flex; }
.select-wrap svg {
  position: absolute; right: 18px; top: 50%; width: 15px; height: 15px;
  margin-top: -7px; color: var(--ink); pointer-events: none;
}
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  width: 240px; height: 47px; padding: 0 44px 0 20px;
  border: 0; border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font-size: 16px; cursor: pointer;
}

/* =============================================================================
   OUR STORY
   ============================================================================= */
.s-story { --pt: 129px; --pb: 0px; }
.story-grid { display: grid; grid-template-columns: 564px 1fr; column-gap: 46px; align-items: start; }
.story-media { border-radius: var(--r-well); background: var(--surface); overflow: hidden; }
.story-media img { width: 100%; height: 600px; object-fit: cover; }
.story-copy .d2 { margin: 30px 0 26px; }
.story-copy p + p { margin-top: 26px; }
.story-sign { margin-top: 42px; }
.story-sign .d4 { font-size: 24px; line-height: 28px; }
.story-sign span { display: block; margin-top: 4px; font-size: 15px; }
.s-stats { --pt: 63px; --pb: 176px; }

/* orbit (reference: 6 cards on a 380px radius, 46.15s linear, cards stay upright) */
.s-orbit { --pt: 0px; --pb: 174px; }
.orbit {
  position: relative;
  height: 900px;
  margin-top: 60px;
}
.orbit-core {
  position: absolute; left: 50%; top: 50%;
  width: 470px; height: 480px; margin: -240px 0 0 -235px;
  overflow: hidden;
}
.orbit-core img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  /* the reference floats a cut-out bust; ours feathers the photo's edges into
     the paper so the cards read as orbiting the subject, not a photo frame */
  -webkit-mask-image: radial-gradient(ellipse 58% 68% at 50% 38%, #000 44%, rgba(0,0,0,0) 92%);
  mask-image: radial-gradient(ellipse 58% 68% at 50% 38%, #000 44%, rgba(0,0,0,0) 92%);
}
.orbit-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.arm {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform: rotate(var(--a));
  animation: orbit-spin 46.15s linear infinite;
  animation-delay: var(--d);
}
.arm-in {
  position: absolute; left: 380px; top: 0;
  width: 300px; height: 96px;
  margin: -48px 0 0 -150px;
  transform: rotate(calc(-1 * var(--a)));
  animation: orbit-spin-back 46.15s linear infinite;
  animation-delay: var(--d);
}
.ing {
  display: flex; align-items: center; gap: 14px;
  width: 300px; height: 96px; padding: 16px;
  border-radius: var(--r-thumb);
  background: var(--surface);
}
.ing-thumb {
  width: 64px; height: 64px; flex: 0 0 64px;
  border-radius: 6px; background: var(--paper); overflow: hidden;
}
.ing-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ing h3 {
  font-family: var(--fd); font-size: 17px; line-height: 20px;
  text-transform: uppercase; color: var(--ink); letter-spacing: .01em;
}
.ing p { margin-top: 4px; font-size: 14px; line-height: 19px; }
@keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-spin-back { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* =============================================================================
   SHOP GRID + PRODUCT PAGE
   ============================================================================= */
.s-shop { --pt: 80px; --pb: 180px; }
.s-prod { --pt: 52px; --pb: 0px; }
.prod-grid { display: grid; grid-template-columns: 564px 1fr; column-gap: 26px; align-items: start; }
.prod-gallery { display: grid; gap: 17px; }
.prod-well {
  height: 565px; border-radius: var(--r-well);
  background: var(--surface); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.prod-well img { width: 498px; height: 500px; object-fit: contain; }
.prod-well-zoom img { transform: scale(1.45); transform-origin: 50% 22%; }
.prod-well-crop img { transform: scale(1.22); transform-origin: 50% 78%; }
.prod-side { padding-top: 0; }
.prod-side .d1 { margin: 24px 0 10px; font-size: 54px; line-height: 60px; }
.prod-side .price b { font-size: 26px; line-height: 30px; }
.prod-side .lead { margin-top: 18px; }
.buy {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 54px; margin-top: 36px;
  border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font-size: 16px; cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.buy:hover { background: var(--ink-deep); }
.acc { margin-top: 30px; }
.acc-row { border-top: 1px solid var(--hairline); }
.acc-row:last-child { border-bottom: 1px solid var(--hairline); }
.acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 18px 2px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--fd); font-size: 22px; line-height: 26px;
  text-transform: uppercase; letter-spacing: .01em; color: var(--ink);
}
.acc-btn svg { width: 16px; height: 16px; flex: 0 0 16px; transition: transform var(--dur) var(--ease); }
.acc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.acc-panel { padding: 0 2px 20px; }
.acc-panel[hidden] { display: none; }
.s-detail { --pt: 190px; --pb: 176px; }
.detail-grid { display: grid; grid-template-columns: 1fr 566px; column-gap: 60px; align-items: start; }
.detail-copy .d2 { margin: 22px 0 20px; }
.detail-copy p + p { margin-top: 22px; }
.ticks { margin: 20px 0; }
.ticks li { display: flex; gap: 10px; padding: 3px 0; }
.ticks i { width: 4px; height: 4px; margin-top: 10px; border-radius: 50%; background: var(--ink); flex: 0 0 4px; }
.detail-media { border-radius: var(--r-well); background: var(--surface); overflow: hidden; }
.detail-media img { width: 100%; height: 560px; object-fit: cover; }
.s-related { --pt: 0px; --pb: 178px; }

/* =============================================================================
   CONTACT
   ============================================================================= */
.s-contact { --pt: 54px; --pb: 0px; }
.contact-grid { display: grid; grid-template-columns: 562px 1fr; column-gap: 28px; align-items: start; }
.contact-media { border-radius: var(--r-well); background: var(--surface); overflow: hidden; }
.contact-media img { width: 100%; height: 540px; object-fit: cover; }
.form-card {
  border-radius: var(--r-well);
  background: var(--surface);
  padding: 42px 28px 22px;
}
.f-row { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 22px; }
.field { margin-bottom: 30px; }
.field label { display: block; font-size: 16px; line-height: 20px; color: var(--ink); }
.field input, .field textarea {
  width: 100%; height: 40px; padding: 8px 0 0;
  border: 0; border-bottom: 1px solid var(--khaki);
  background: transparent; color: var(--ink);
  font-size: 16px;
}
.field textarea { height: 100px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .85; }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--ink); }
.form-card .buy { height: 44px; margin-top: 0; }
.s-info { --pt: 54px; --pb: 50px; }
.s-info .grid-3 { gap: 13px; }
.info-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 206px; padding: 26px;
  border-radius: var(--r-tile); background: var(--surface);
}
.info-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-card);
  background: var(--ink); color: var(--paper);
}
.info-icon svg { width: 19px; height: 19px; }
.info-card .label { font-size: 15px; line-height: 21px; }
.info-card .value {
  margin-top: 4px;
  font-family: var(--fd); font-size: 22px; line-height: 28px; color: var(--ink);
  text-transform: uppercase; letter-spacing: -.01em;
  word-break: break-word;
}
.info-foot { margin-top: 57px; }

/* map band (reference: full-bleed Google Maps iframe 1440x900; ours is a drawn
   panel so the build makes zero external requests) */
.s-map { --pt: 50px; --pb: 34px; }
.map {
  position: relative; height: 900px; overflow: hidden; background: var(--surface);
}
.map svg { width: 100%; height: 100%; }
.map-chip {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink); font-size: 15px;
}
.map-chip svg { width: 17px; height: 17px; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1220px) {
  :root { --rail: 100%; --gutter: 28px; --pscale: .8; }
  .split, .quote-grid, .journal-grid, .story-grid, .prod-grid, .detail-grid, .contact-grid {
    grid-template-columns: 1fr 1fr; column-gap: 24px;
  }
  .svc-grid { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 40px; margin-top: 120px; }
  .svc-card { width: 100%; }
  .svc-card:nth-child(3) { grid-column: 1 / -1; grid-row: 2; max-width: 380px; }
  .svc-card:nth-child(4) { grid-column: 1; grid-row: 3; }
  .svc-card:nth-child(5) { grid-column: 2; grid-row: 3; }
  .hero-photo { width: 52%; }
  .hero-copy { width: 44%; }
  .mini { width: 44%; min-width: 300px; }
  .ftr-grid { column-gap: 40px; grid-template-columns: 1fr .6fr .6fr .8fr; }
  .mark svg { width: 120px; height: 120px; flex-basis: 120px; }
  .mark span { font-size: 15vw; }
  .orbit { height: 760px; }
}

@media (max-width: 900px) {
  :root { --pscale: .72; --gutter: 24px; }
  .nav, .hdr-cta .pill { display: none; }
  .burger { display: inline-flex; }
  .hdr-in { height: 84px; gap: 12px; }
  .brand { margin-right: auto; }
  .icon-btn, .burger { width: 36px; height: 36px; flex-basis: 36px; }
  .menu {
    display: block; position: fixed; inset: 0 0 auto; z-index: 40;
    background: var(--paper);
    padding: 84px 24px 40px;
    text-align: center;
    transform: translateY(-102%);
    transition: transform .45s var(--ease);
  }
  .menu[data-open="true"] { transform: none; }
  .menu a.m-link { display: block; padding: 12px 0; font-size: 20px; line-height: 28px; color: var(--muted); }
  .menu a.m-link:hover { color: var(--ink); }
  .menu .pill { margin-top: 18px; }

  .d1 { font-size: 56px; line-height: 72px; }
  .d2 { font-size: 54px; line-height: 64.8px; }
  .d3 { font-size: 34px; line-height: 40px; }
  .statement { font-size: 36px; line-height: 46px; }
  .j-feature { height: auto; }
  .page-hero { --pt: 80px; }
  .hero { padding-top: 16px; }

  .hero-card { height: auto; display: flex; flex-direction: column; }
  .hero-photo { position: static; order: 2; width: 100%; height: 420px; margin-top: 40px; }
  .hero-copy { position: static; order: 1; width: auto; max-width: none; padding: 66px 20px 0; }
  .hero-copy .lead { width: auto; }
  .mini { display: none; }

  .stage { width: 100%; height: 190px; }

  .grid-3, .grid-4, .prod-gallery { grid-template-columns: 1fr; }
  .p-well { height: 250px; }
  .p-card { padding-bottom: 19px; }
  .s-intro { --pt: 275px; }
  .grid-head { flex-direction: column; align-items: flex-start; gap: 26px; }
  .split, .quote-grid, .journal-grid, .story-grid, .prod-grid, .detail-grid, .contact-grid,
  .svc-grid, .page-hero-grid, .stats {
    grid-template-columns: 1fr;
  }
  .svc-card:nth-child(n) { grid-column: 1; grid-row: auto; max-width: none; }
  .split-media img, .story-media img, .quote-media img, .contact-media img, .detail-media img { height: 420px; }
  .split-media, .story-media { order: -1; }
  .about-copy .d2 { margin-top: 24px; }
  .stats { gap: 26px; margin-top: 34px; }
  .value .d4 { margin-top: 26px; }
  .rail-track > * { flex-basis: 100%; }
  .mbr { display: block; }
  .j-card { grid-template-columns: 1fr; height: 543px; }
  .j-card img { height: 300px; min-height: 0; }
  .j-side { gap: 20px; }
  .j-feature img { height: 300px; }
  .film, .map, .orbit { height: 560px; }
  .cta-card { height: auto; padding-bottom: 0; }
  .cta-card { display: flex; flex-direction: column; }
  .cta-copy { position: static; order: 1; width: auto; max-width: none; padding: 62px 20px 0; }
  .cta-photo { position: static; order: 2; width: 100%; height: 360px; margin-top: 40px; }
  .subs { flex-wrap: wrap; }
  .subs input { width: 100%; }
  .page-hero-side { padding-top: 26px; }
  .page-hero-grid .d1 { margin-bottom: 4px; }
  .ftr-grid { grid-template-columns: 1fr 1fr; row-gap: 44px; column-gap: 24px; }
  .ftr-about { grid-column: 1 / -1; }
  .mark { margin-top: 54px; gap: 16px; }
  .mark svg { width: 64px; height: 64px; flex-basis: 64px; }
  .mark span { font-size: 18vw; }
  .ftr-bottom { flex-direction: column; gap: 10px; }
  .prod-well { height: 420px; }
  .prod-well img { width: 100%; height: 360px; }
  .prod-side { padding-top: 30px; }
  .prod-side .d1 { font-size: 46px; line-height: 52px; }
  .f-row { grid-template-columns: 1fr; }
  .info-foot { margin-top: 40px; }
  .orbit { position: static; height: auto; margin-top: 40px; display: grid; gap: 14px; }
  .orbit-core {
    position: static; width: 100%; height: 320px; margin: 0 0 20px;
    border-radius: var(--r-card);
  }
  .orbit-ring { position: static; width: auto; height: auto; display: grid; gap: 14px; }
  .arm { position: static; width: auto; height: auto; transform: none; animation: none; }
  .arm-in {
    position: static; width: 100%; height: auto; margin: 0;
    transform: none; animation: none;
  }
  .ing { width: 100%; }
}

@media (max-width: 460px) {
  :root { --gutter: 20px; }
  .hero-photo { height: 450px; }
  .stage { height: 150px; }
}

/* =============================================================================
   REDUCED MOTION - complete static render
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .arm, .arm-in { animation: none !important; }
  .stage-item { transition: none !important; }
}