/* ============================================================================
   OCTOPAK — new marketing site, layout styles.
   Colour, type, spacing, shadow all come from the design-system tokens
   (_ds/.../styles.css). This file is layout + composition only.
   ========================================================================== */

.site { min-height: 100vh; display: flex; flex-direction: column; }
.site__main { flex: 1; }
.octo-container--narrow { max-width: var(--container-narrow); }

/* Placeholder + flag system -------------------------------------------------
   Used to mark draft copy and unconfirmed facts so Gail can see exactly what
   still needs real words / numbers. Nothing here invents Octopak claims. */
.ph {
  color: var(--ink-500);
  border-bottom: 1px dashed var(--kraft-400);
  font-style: italic;
}
.ph-block {
  color: var(--ink-500);
  font-style: italic;
  border-left: 2px dashed var(--kraft-400);
  padding-left: var(--space-4);
}
.flag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  vertical-align: middle;
}
.flag::before { content: "\2691"; font-size: 11px; }
.flag--block { margin-top: var(--space-2); }

/* ---- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--surface-page) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-5); height: 76px; }
.site-header__brand { display: inline-flex; text-decoration: none; }
.site-nav { display: flex; gap: var(--space-5); margin-left: auto; align-items: center; }
.site-nav__link {
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-body);
  text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.site-nav__link:hover { color: var(--text-strong); text-decoration: none; }
.site-nav__link.is-active { color: var(--terra-600); border-bottom-color: var(--terra-500); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }

/* WhatsApp button (round icon) */
.wa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-pill);
  background: #25D366; color: #fff; border: none; cursor: pointer;
  text-decoration: none; flex: none;
  transition: filter var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.wa-btn:hover { filter: brightness(0.94); text-decoration: none; }
.wa-btn:active { transform: translateY(1px); }
.wa-btn svg { width: 22px; height: 22px; }

/* Hamburger (mobile) */
.site-header__burger {
  display: none; background: none; border: none; cursor: pointer;
  width: 42px; height: 42px; align-items: center; justify-content: center; color: var(--ink-900);
}
.site-header__burger svg { width: 24px; height: 24px; }

/* Mobile drawer
   Height is computed with 100vh instead of `bottom: 0` on purpose: .site-header
   has backdrop-filter, which makes it a containing block for this fixed child,
   so `inset`/`bottom` resolve against the header's own 76px box (collapsing the
   drawer to almost nothing) instead of the viewport. 100vh isn't affected by
   that, since it's always relative to the real viewport. */
.mobile-nav {
  display: none; position: fixed; top: 76px; left: 0; right: 0; height: calc(100vh - 76px);
  z-index: calc(var(--z-sticky) - 1);
  background: var(--surface-page); padding: var(--space-5) var(--gutter);
  flex-direction: column; gap: var(--space-2);
  overflow-y: auto;
  border-top: 1px solid var(--border-subtle);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4);
  color: var(--text-strong); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
}
.mobile-nav a.is-active { color: var(--terra-600); }
.mobile-nav__cta { margin-top: var(--space-4); }

/* Sticky mobile WhatsApp FAB */
.wa-fab {
  display: none; position: fixed; right: 18px; bottom: 18px; z-index: var(--z-toast);
  width: 56px; height: 56px; border-radius: var(--radius-pill);
  background: #25D366; color: #fff; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); text-decoration: none;
}
.wa-fab svg { width: 30px; height: 30px; }

/* ---- Hero (home) ---------------------------------------------------------- */
.hero { padding: var(--space-9) 0 var(--space-8); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; }
.hero__title {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  letter-spacing: -0.01em; line-height: 1.0;
  font-size: var(--fs-display-l); color: var(--text-strong); margin: 14px 0 20px;
}
.hero__lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-muted); max-width: 52ch; margin: 0 0 28px; }
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.hero__media { aspect-ratio: 5/4; width: 100%; }

/* ---- Generic section ------------------------------------------------------ */
.section { padding: var(--space-9) 0; }
.section--tight { padding: var(--space-8) 0; }
.section--sunken { background: var(--surface-sunken); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.section__head--center { flex-direction: column; align-items: center; text-align: center; }
.section__title { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: -0.01em; font-size: var(--fs-display-m); color: var(--text-strong); margin: 6px 0 0; }
.section__intro { font-size: var(--fs-lead); color: var(--text-muted); max-width: 60ch; margin: var(--space-3) 0 0; }
.section__head--center .section__intro { margin-inline: auto; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

/* ---- Wedge cards (home 3-up) ---------------------------------------------- */
.wedge-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.wedge-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.wedge-card__icon { color: var(--terra-500); }
.wedge-card__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--text-strong); margin: 0; }
.wedge-card__body { color: var(--text-muted); line-height: 1.6; margin: 0; flex: 1; }
.wedge-card__link { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--text-link); }

/* Refined "feature" treatment for the home 3-up — airy, centred, gallery-like
   (Rimowa-inspired) but kept warm: no card box, hairline column dividers, an
   outlined icon medallion, and an understated uppercase link. Scoped to
   --feature so the FamilyView "Other ranges" cards and ProcessView inline
   links that share .wedge-card keep their existing styling. */
.wedge-grid--feature { gap: 0; column-gap: var(--space-7); row-gap: var(--space-7); }
.wedge-card--feature {
  background: none; border: none; border-radius: 0; box-shadow: none;
  padding: var(--space-4) var(--space-6); align-items: center; text-align: center;
  gap: var(--space-4);
}
.wedge-card--feature:hover { box-shadow: none; transform: none; }
.wedge-card--feature + .wedge-card--feature { border-left: 1px solid var(--border-subtle); }
.wedge-card--feature .wedge-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); color: var(--terra-500);
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.wedge-card--feature:hover .wedge-card__icon { border-color: var(--terra-400); transform: translateY(-2px); }
.wedge-card--feature .wedge-card__title { font-size: var(--fs-h4); letter-spacing: -0.01em; }
.wedge-card--feature .wedge-card__body { flex: 0 1 auto; max-width: 32ch; margin: 0 auto; }
.wedge-card--feature .wedge-card__link {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-link);
  margin-top: auto; padding-bottom: 3px; border-bottom: 1px solid currentColor;
  transition: color var(--dur-base) var(--ease-standard);
}
.wedge-card--feature:hover .wedge-card__link { color: var(--terra-600); }

/* ---- Product grid (overview / home) --------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; }
.product-grid .is-secondary { opacity: 0.92; }
.product-link { text-decoration: none; color: inherit; display: block; position: relative; height: 100%; }
.product-link:hover { text-decoration: none; }
/* Force every card to the row's full height (grid stretch alone doesn't reach
   the ProductCard div nested inside the <a>), so cards match regardless of
   how much description text a product has. The card's own flex layout
   (.octo-pcard__body / __desc use flex:1) absorbs the extra space. */
.product-grid .octo-pcard { height: 100%; }
/* Invitation tile closing the grid — no photo, so it centres its body and reads
   as deliberate rather than an empty product slot (same pattern as .case-card--invite
   on the Work page). */
.product-grid .octo-pcard--invite { background: var(--surface-page); border-style: dashed; box-shadow: none; }
.product-grid .octo-pcard--invite:hover { box-shadow: none; transform: none; border-color: var(--border-strong, var(--text-brand)); }
.product-grid .octo-pcard--invite .octo-pcard__body { justify-content: center; gap: var(--space-3); }
.product-grid .octo-pcard--invite .octo-pcard__desc { flex: none; }
.product-link__hover-img {
  position: absolute; top: 0; left: 0; right: 0; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 0; pointer-events: none;
  transition: opacity 400ms var(--ease-standard, ease);
}
.product-link:hover .product-link__hover-img { opacity: 1; }

/* ---- Logo wall (auto-scrolling marquee) ------------------------------------
   The track renders CLIENTS twice back to back; animating it exactly -50% of
   its own width loops seamlessly with no visible seam. Pauses on hover so a
   name can actually be read, and turns off entirely for reduced-motion. */
.logowall { border-block: 1px solid var(--border-subtle); padding: var(--space-7) 0; }
.logowall__label { text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-muted); margin: 0 0 var(--space-6); }
.logowall__marquee {
  overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.logowall__track {
  display: flex; align-items: center; width: max-content; gap: var(--space-8);
  animation: logowall-scroll 26s linear infinite;
}
.logowall:hover .logowall__track { animation-play-state: paused; }
.logowall__logo {
  flex: none; height: 56px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.6;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.logowall__logo:hover { opacity: 1; }
.logowall--full .logowall__track { gap: var(--space-9); animation-duration: 34s; }
.logowall--full .logowall__logo { height: 64px; }
@keyframes logowall-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logowall__track { animation: none; }
  .logowall__marquee { overflow-x: auto; }
}

/* ---- Warm dark surfaces ---------------------------------------------------
   The feature blocks and footer read as cold near-black charcoal, which fights
   the warm, material-led palette. Re-cast them in espresso (kraft-900 #3A2B19,
   straight from the palette) for a premium, kraft-board feel that lets the
   terracotta CTAs pop. Scoped override of --ink-900 so ONLY these surfaces
   change — body text (which also resolves --ink-900) stays neutral charcoal.
   Their own text uses kraft-50 / ink-200, so it is unaffected. */
.strip,
.site-footer,
.octo-card--ink {
  --ink-900: #3A2B19;
}
/* Closing CTA: brick red (terra-800) so the conversion band reads as a branded
   block, not just another dark surface. Dark enough for the cream text, and the
   terra-500 "Start an enquiry" button stays distinct against it. */
.closing {
  --ink-900: #5E2716;
}

/* ---- Dark strip ----------------------------------------------------------- */
.strip { background: var(--ink-900); color: var(--text-on-dark); padding: var(--space-9) 0; }
.strip__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: center; }
.strip__title { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: -0.01em; font-size: var(--fs-display-m); color: var(--kraft-50); margin: 10px 0 16px; line-height: 1.05; }
.strip__sub { color: var(--ink-200); font-size: var(--fs-lead); line-height: 1.6; margin: 0 0 26px; max-width: 46ch; }

/* ---- Comparison teaser (home) --------------------------------------------- */
.compare-teaser {
  background: var(--surface-kraft); border-radius: var(--radius-lg); padding: var(--space-8);
  display: grid; grid-template-columns: 1.3fr auto; gap: var(--space-6); align-items: center;
}
.compare-teaser__q { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); color: var(--ink-900); margin: 0 0 10px; line-height: 1.1; }
.compare-teaser__sub { color: var(--ink-800); margin: 0; max-width: 48ch; }

/* ---- Process strips ------------------------------------------------------- */
.steps { display: grid; gap: var(--space-5); }
.steps--5 { grid-template-columns: repeat(5, 1fr); }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.step {
  position: relative; background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.step__num { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-brand); letter-spacing: var(--ls-wide); }
.step__icon { color: var(--terra-500); }
.step__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--text-strong); margin: 0; }
.step__body { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; margin: 0; }

/* ---- Real work strip ------------------------------------------------------ */
.workstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.workstrip__item { display: flex; flex-direction: column; gap: var(--space-2); }
.workstrip__cap { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); }

/* ---- MOQ callout box ------------------------------------------------------ */
.moq-box {
  background: var(--surface-kraft); border: 1px solid var(--kraft-500); border-radius: var(--radius-lg);
  padding: var(--space-6); display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
}
.moq-box__num { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 56px; line-height: 1; color: var(--ink-900); }
.moq-box__label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--kraft-800); display: block; margin-bottom: 6px; }
.moq-box__note { color: var(--ink-800); margin: 0; max-width: 42ch; }

/* ---- Spec / customisable list --------------------------------------------- */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-6); }
.spec { display: flex; gap: var(--space-3); align-items: flex-start; }
.spec__icon { color: var(--terra-500); flex: none; margin-top: 2px; }
.spec__label { font-weight: var(--fw-semibold); color: var(--text-strong); margin: 0 0 2px; }
.spec__val { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* ---- Print method grid ---------------------------------------------------- */
.methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.method {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5);
  background: var(--surface-card);
}
.method__name { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--ink-900); margin: 0 0 8px; }
.method__body { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; margin: 0; }

/* ---- Page heads (interior) ------------------------------------------------ */
.page-head { padding: var(--space-8) 0 var(--space-7); }
.page-head.octo-kraft { padding: var(--space-8) 0; }
.page-head__title { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: -0.01em; font-size: var(--fs-display-l); color: var(--text-strong); margin: 12px 0 16px; line-height: 1.02; max-width: 20ch; }
.page-head__title em { font-style: italic; color: var(--terra-500); }
.page-head__lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 58ch; margin: 0; }

/* ---- Family hero ---------------------------------------------------------- */
.family-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.family-hero__media { aspect-ratio: 4/3; width: 100%; }

/* ---- About ---------------------------------------------------------------- */
.about-intro__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-8); align-items: center; }
.about-media { aspect-ratio: 4/5; width: 100%; }
.about-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-strong); margin: 16px 0 14px; }
.about-body { color: var(--text-muted); line-height: 1.7; margin: 0; }
.pillars-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.pillar { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xs); }
.pillar__num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-brand); font-weight: var(--fw-bold); }
.pillar__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--text-strong); margin: 10px 0 8px; }
.pillar__body { color: var(--text-muted); line-height: 1.65; margin: 0; }

/* ---- Case study cards ----------------------------------------------------- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.case-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.case-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.case-card__media { aspect-ratio: 4/3; width: 100%; }
.case-card__body { padding: var(--space-5); }
.case-card__brand { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-brand); margin: 0 0 8px; }
.case-card__headline { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--text-strong); margin: 0; line-height: 1.25; }
.case-card__desc { font-size: var(--fs-sm); color: var(--text-muted); margin: 8px 0 0; line-height: 1.5; }
/* Invitation card closing the work grid — no photo, so it centres its body
   and reads as deliberate rather than as a missing case study. */
.case-card--invite { background: var(--surface-subtle, transparent); border-style: dashed; box-shadow: none; justify-content: center; }
.case-card--invite:hover { box-shadow: none; transform: none; border-color: var(--border-strong, var(--text-brand)); }
.case-card--invite .case-card__body { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* ---- Carousel (multi-photo case studies / product galleries) -------------- */
.carousel { position: relative; }
.carousel__viewport { position: relative; width: 100%; overflow: hidden; }
.carousel__slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base, 300ms) var(--ease-standard, ease);
}
.carousel__slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.carousel__slide .media-frame, .carousel__slide .media-slot { width: 100%; height: 100%; }
.carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 150ms var(--ease-standard, ease), background 150ms var(--ease-standard, ease);
}
.carousel:hover .carousel__arrow, .carousel__arrow:focus-visible { opacity: 1; }
.carousel__arrow:hover { background: rgba(0, 0, 0, 0.75); }
.carousel__arrow--prev { left: 10px; }
.carousel__arrow--next { right: 10px; }
.carousel__dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: flex; justify-content: center; gap: 6px; }
.carousel__dot {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); cursor: pointer;
  transition: width 150ms var(--ease-standard, ease), background 150ms var(--ease-standard, ease);
}
.carousel__dot.is-active { width: 16px; border-radius: 3px; background: #fff; }
@media (hover: none) {
  .carousel__arrow { opacity: 1; background: rgba(0, 0, 0, 0.45); }
}

/* ---- Comparison table ----------------------------------------------------- */
.compare-table { width: 100%; border-collapse: collapse; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.compare-table th, .compare-table td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.compare-table thead th { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--text-strong); background: var(--surface-sunken); }
.compare-table thead th.is-octo { color: var(--terra-600); }
.compare-table tbody th { font-weight: var(--fw-semibold); color: var(--text-strong); width: 26%; }
.compare-table td { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }
.compare-table td.is-octo { color: var(--text-body); background: color-mix(in srgb, var(--terra-50) 60%, transparent); }
.compare-cards { display: none; }
.when-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.when-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--surface-card); }
.when-card--octo { border-color: var(--terra-300); background: var(--terra-50); }
.when-card h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0 0 10px; }
.when-card p { color: var(--text-muted); line-height: 1.65; margin: 0 0 var(--space-4); }

/* ---- FAQ accordion -------------------------------------------------------- */
.faq-cats { display: flex; flex-direction: column; gap: var(--space-7); }
.faq-cat__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--text-strong); margin: 0 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 2px solid var(--terra-200); }
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); overflow: hidden; }
.faq-item__q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body); color: var(--text-strong);
  padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
.faq-item__q:hover { color: var(--terra-600); }
.faq-item__chev { color: var(--text-muted); transition: transform var(--dur-base) var(--ease-standard); flex: none; }
.faq-item.is-open .faq-item__chev { transform: rotate(180deg); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-standard); }
.faq-item.is-open .faq-item__a { max-height: 320px; }
.faq-item__a-inner { padding: 0 var(--space-5) var(--space-5); color: var(--text-muted); line-height: 1.65; }

/* ---- Contact -------------------------------------------------------------- */
.contact-grid__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-7); align-items: start; }
.contact-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-7); }
.way {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5);
  background: var(--surface-card); display: flex; flex-direction: column; gap: 8px; text-decoration: none;
}
.way:hover { text-decoration: none; box-shadow: var(--shadow-sm); }
.way__icon { color: var(--terra-500); }
.way__label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); }
.way__val { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--text-strong); }
.quote-form { display: flex; flex-direction: column; gap: var(--space-5); }
.quote-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field-label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: 10px; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { font-family: var(--font-body); font-size: var(--fs-sm); padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-raised); color: var(--text-body); cursor: pointer; transition: all var(--dur-base) var(--ease-standard); }
.chip:hover { border-color: var(--border-strong); }
.chip.is-on { background: var(--terra-500); border-color: var(--terra-500); color: var(--text-on-terra); }
.contact-aside { border-radius: var(--radius-lg); padding: var(--space-6); }
.contact-aside h3 { font-family: var(--font-display); margin: 0 0 8px; }
.contact-aside__muted { color: var(--kraft-800); margin: 0 0 var(--space-5); }
.contact-aside__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-aside__list li { display: flex; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--kraft-500); padding-top: 12px; }
.contact-aside__list span { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--kraft-800); }
.contact-aside__list a, .contact-aside__list .val { color: var(--ink-900); font-weight: var(--fw-semibold); text-align: right; }
.contact-done__card { max-width: 560px; }

/* ---- Closing CTA block ---------------------------------------------------- */
.closing {
  background: var(--ink-900); color: var(--text-on-dark);
  border-radius: var(--radius-xl); padding: var(--space-9) var(--space-8);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
.closing__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-m); color: var(--kraft-50); margin: 0; line-height: 1.05; max-width: 20ch; }
.closing__sub { color: var(--ink-200); font-size: var(--fs-lead); margin: 0; max-width: 50ch; }
.closing__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* ---- Breadcrumb ----------------------------------------------------------- */
.crumbs { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); margin: 0 0 var(--space-3); display: flex; gap: 8px; align-items: center; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--terra-600); }
.crumbs__sep { opacity: 0.5; }

/* ---- Media (image-slot wrappers) ------------------------------------------ */
.media-frame { display: block; position: relative; width: 100%; overflow: hidden; }
.media-slot { display: block; width: 100%; height: 100%; }
image-slot { display: block; }

/* ---- Image effects: scroll reveal + framed hover zoom ---------------------
   Aesop-style restraint: slow fade + rise on entry, slow zoom inside a fixed
   frame on hover. Eased (expo-out), no bounce, no flash — matches the brand's
   "gentle and organic" motion rule. Honour reduced-motion, and gate the
   hide-before-reveal on .fx-ready so images still show if the script fails. */
.fx-easing { transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: no-preference) {
  /* Reveal: the frame starts lowered + transparent, settles on .is-inview. */
  .fx-ready .media-frame,
  .fx-ready .product-link,
  .fx-ready .fx-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .fx-ready .media-frame.is-inview,
  .fx-ready .product-link.is-inview,
  .fx-ready .fx-reveal.is-inview {
    opacity: 1;
    transform: translateY(0);
  }

  /* Framed hover zoom lives on the inner slot, so the frame's reveal transform
     and the slot's zoom transform never collide. */
  .media-frame > .media-slot {
    transform: scale(1);
    transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .media-frame:hover > .media-slot {
    transform: scale(1.05);
    transition: transform 1600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ---- Legal pages ---------------------------------------------------------- */
.legal { max-width: 720px; }
.legal h2 { font-size: var(--fs-h3); margin: var(--space-6) 0 var(--space-3); }
.legal p { color: var(--text-muted); line-height: 1.7; }

/* ---- Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink-900); color: var(--ink-200); padding: var(--space-8) 0 var(--space-5); margin-top: auto; }
.site-footer__inner { display: grid; grid-template-columns: 1.1fr 2fr; gap: var(--space-7); padding-bottom: var(--space-6); border-bottom: 1px solid var(--ink-700); }
.site-footer__tag { color: var(--ink-300); margin: 14px 0 0; max-width: 32ch; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.site-footer__cols h5 { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--terra-300); margin: 0 0 14px; }
.site-footer__cols a { display: block; color: var(--ink-200); margin-bottom: 10px; font-size: var(--fs-sm); text-decoration: none; }
.site-footer__cols a:hover { color: var(--kraft-50); }
.site-footer__muted { color: var(--ink-400); font-size: var(--fs-sm); margin: 0 0 10px; line-height: 1.6; }
.site-footer__legal { padding-top: var(--space-5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-500); }
.site-footer__legal a { color: var(--ink-500); }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .steps--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .site-nav { display: none; }
  .site-header__burger { display: inline-flex; }
  .wa-fab { display: inline-flex; }
  .hero__grid, .strip__inner, .about-intro__grid, .contact-grid__inner,
  .family-hero__grid, .compare-teaser { grid-template-columns: 1fr; }
  .grid-3, .product-grid, .work-grid, .workstrip, .methods, .steps--3 { grid-template-columns: 1fr 1fr; }
  .steps--5, .pillars-2x2, .offices, .when-grid, .specs, .contact-ways, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .wedge-card--feature + .wedge-card--feature { border-left: none; }
  .hero__media { display: none; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
  /* Comparison table -> stacked cards */
  .compare-table { display: none; }
  .compare-cards { display: flex; flex-direction: column; gap: var(--space-4); }
  .compare-card { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
  .compare-card__row { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
  .compare-card__label { font-weight: var(--fw-semibold); color: var(--text-strong); margin: 0 0 8px; }
  .compare-card__pair { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .compare-card__cell { font-size: var(--fs-sm); color: var(--text-muted); }
  .compare-card__cell b { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); display: block; margin-bottom: 2px; color: var(--text-faint); }
  .compare-card__cell.is-octo { color: var(--text-body); }
}
@media (max-width: 560px) {
  .grid-3, .product-grid, .work-grid, .workstrip, .methods, .steps--3,
  .quote-form__row { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr; gap: var(--space-5); }
  .closing { padding: var(--space-8) var(--space-5); }
}

/* ==========================================================================
   PRINT & MATERIALS GUIDE
   ========================================================================== */

/* Placeholder pill (no em dashes in this section, per brand rules) */
.ph-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--terra-700);
  background: var(--terra-50); border: 1px solid var(--terra-200); border-radius: var(--radius-sm);
  padding: 2px 8px; margin-bottom: var(--space-3);
}

/* ---- Homepage teaser ------------------------------------------------------ */
.guide-teaser {
  background: var(--surface-kraft); border: 1px solid var(--kraft-300); border-radius: var(--radius-xl);
  padding: var(--space-8); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center;
}
.guide-teaser__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-m); color: var(--ink-900); margin: 8px 0 14px; line-height: 1.05; }
.guide-teaser__body { color: var(--ink-800); font-size: var(--fs-lead); line-height: 1.6; margin: 0 0 24px; max-width: 46ch; }
.guide-teaser__media { margin: 0; }

/* ---- Cross-link block (product family pages) ------------------------------ */
.guide-xlink {
  display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5);
  background: var(--surface-card); border: 1px solid var(--border-default); border-left: 3px solid var(--terra-500);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.guide-xlink:hover { text-decoration: none; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.guide-xlink__icon { color: var(--terra-500); flex: none; }
.guide-xlink__text { display: flex; flex-direction: column; gap: 2px; }
.guide-xlink__text strong { color: var(--text-strong); font-family: var(--font-body); }
.guide-xlink__text span { color: var(--text-muted); font-size: var(--fs-sm); }
.guide-xlink__arrow { color: var(--terra-500); margin-left: auto; flex: none; }

/* ---- FAQ inline guide link ------------------------------------------------ */
.faq-item__guide { margin: var(--space-3) 0 0; }
.faq-item__guide a { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--text-link); }

/* ---- Hero ----------------------------------------------------------------- */
.guide-hero { background: var(--surface-kraft); border-bottom: 1px solid var(--border-subtle); padding: var(--space-9) 0 var(--space-8); }
.guide-hero__title { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: -0.01em; font-size: var(--fs-display-l); color: var(--ink-900); margin: 12px 0 16px; line-height: 1.02; }
.guide-hero__sub { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-800); max-width: 60ch; margin: 0 0 28px; }
.guide-hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---- Body layout (rail + main) -------------------------------------------- */
/* align-items: stretch (not start) so the rail <aside> spans the full row height,
   giving its position:sticky child room to travel as the chapters scroll. */
.guide-body { display: grid; grid-template-columns: 250px 1fr; gap: var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-8); align-items: stretch; }
.guide-rail__sticky { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--space-4); }
.guide-rail__toggle { display: none; }
.guide-rail__list { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--border-default); }
.guide-rail__link {
  font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none; padding: 7px 14px;
  border-left: 2px solid transparent; margin-left: -1px; line-height: 1.35;
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.guide-rail__link:hover { color: var(--text-strong); text-decoration: none; }
.guide-rail__link.is-active { color: var(--terra-600); border-left-color: var(--terra-500); font-weight: var(--fw-semibold); }
.guide-rail__link:focus-visible { outline: 2px solid var(--terra-500); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---- Chapters ------------------------------------------------------------- */
.guide-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-9); }
.guide-chapter { scroll-margin-top: 96px; }
.guide-chapter__head { margin-bottom: var(--space-5); }
.guide-chapter__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); color: var(--text-strong); margin: 4px 0 0; line-height: 1.1; }
.guide-chapter__title:focus-visible { outline: 2px solid var(--terra-500); outline-offset: 4px; border-radius: var(--radius-sm); }
.guide-chapter__grid { display: grid; gap: var(--space-7); align-items: start; }
.guide-chapter__grid.is-right { grid-template-columns: 1fr 0.82fr; }
.guide-chapter__grid.is-left { grid-template-columns: 0.82fr 1fr; }
.guide-chapter__grid.is-full { grid-template-columns: 1fr; }
.guide-chapter__body p { font-size: 18px; line-height: 1.7; color: var(--text-body); margin: 0 0 var(--space-4); max-width: 62ch; }
.guide-chapter__media { margin: 0; }

.guide-watchout {
  display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4);
  background: var(--terra-50); border: 1px solid var(--terra-200); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
.guide-watchout__icon { color: var(--terra-600); flex: none; margin-top: 2px; }
.guide-watchout p { margin: 0; color: var(--ink-800); font-size: var(--fs-sm); line-height: 1.6; }
.guide-chapter__cta { margin: var(--space-4) 0 0; }
.guide-chapter__cta a { font-weight: var(--fw-semibold); color: var(--text-link); }

/* Structure sub-blocks */
.guide-substructure { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
.guide-subcard { display: flex; flex-direction: column; gap: 8px; }
.guide-subcard__h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--text-strong); margin: 6px 0 0; }
.guide-subcard__b { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-muted); margin: 0; }

/* Comparison table */
.guide-table-wrap { margin-top: var(--space-5); }
.guide-table { width: 100%; border-collapse: collapse; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.guide-table th, .guide-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
.guide-table thead th { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); background: var(--surface-sunken); }
.guide-table tbody th { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--terra-600); }
.guide-table td { color: var(--text-body); }
.guide-table-cards { display: none; }
.guide-table-card { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); background: var(--surface-card); }
.guide-table-card__name { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--terra-600); margin: 0 0 10px; font-size: var(--fs-h4); }
.guide-table-card dl { margin: 0; display: grid; gap: 8px; }
.guide-table-card dl > div { display: flex; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--border-subtle); padding-top: 8px; }
.guide-table-card dt { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-faint); }
.guide-table-card dd { margin: 0; color: var(--text-body); font-size: var(--fs-sm); text-align: right; }

/* Checklist */
.guide-checklist { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.guide-checklist li { display: flex; align-items: center; gap: 10px; color: var(--text-body); font-size: var(--fs-sm); }
.guide-checklist svg { color: var(--terra-500); flex: none; }

/* From here */
.guide-fromhere { background: var(--surface-sunken); border-top: 1px solid var(--border-subtle); padding: var(--space-9) 0; }
.guide-fromhere__lead { font-size: 18px; line-height: 1.7; color: var(--text-body); max-width: 62ch; margin: var(--space-4) 0 0; }

/* MOQ + lead callout */
.moq-lead { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.moq-lead__cell { background: var(--surface-kraft); border: 1px solid var(--kraft-500); border-radius: var(--radius-lg); padding: var(--space-6); }
.moq-lead .moq-box__num { display: block; margin: 6px 0 10px; }

@media (max-width: 980px) {
  .guide-substructure { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .guide-teaser { grid-template-columns: 1fr; }
  .guide-body { grid-template-columns: 1fr; gap: var(--space-5); }
  .guide-rail__sticky { position: static; }
  .guide-rail__toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body); color: var(--text-strong);
    background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4); cursor: pointer;
  }
  .guide-rail__list { display: none; border-left: none; margin-top: var(--space-2); }
  .guide-rail__list.is-open { display: flex; }
  .guide-rail__link { border-left: none; border-bottom: 1px solid var(--border-subtle); padding: 12px 6px; }
  .guide-rail__link.is-active { border-left: none; }
  .guide-chapter__grid.is-right, .guide-chapter__grid.is-left { grid-template-columns: 1fr; }
  .guide-substructure { grid-template-columns: 1fr 1fr; }
  .guide-table { display: none; }
  .guide-table-cards { display: flex; flex-direction: column; gap: var(--space-4); }
  .moq-lead { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .guide-substructure { grid-template-columns: 1fr; }
  .guide-teaser { padding: var(--space-6); }
}