/* ==========================================================================
   Inner pages (design.md §8 blueprints): breadcrumb, short page hero, Hero B
   collage (+ depth variant), Services zig-zag and "Is this for you?" cards,
   session page sections (about + best time, numbered "What we do", lens
   details, milestone slider, studio ↔ outdoor toggle, FAQ, packages link).
   ========================================================================== */

/* ---- breadcrumb ----------------------------------------------------------- */
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin-bottom: 4px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.breadcrumb li { display: inline-flex; align-items: center; min-height: var(--tap); }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; opacity: .5; }
/* tighter on the smallest phones, so the trail wraps the same way in the fallback font and in Jost (CLS) */
@media (max-width: 22.49em) { .breadcrumb ol { gap: 0 6px; letter-spacing: .1em; } .breadcrumb li + li::before { margin-right: 6px; } }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--c-brand); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--c-ink); }

/* ---- short page hero (Portfolio) ------------------------------------------ */
.page-hero {
  padding-top: calc(var(--header-h) + var(--topbar-h) + var(--stack-lg));
  padding-bottom: var(--stack-lg);
  text-align: center;
}
.page-hero .breadcrumb ol { justify-content: center; }
.page-hero .eyebrow::after { content: ""; flex: none; width: 32px; height: 1px; background: currentColor; opacity: .7; }
.page-hero .lead { margin-inline: auto; }
.page-hero .container-text { width: min(100% - 2 * var(--gutter), 42rem); } /* rem, not ch: ch changes when the web font swaps in */
.page-hero .mark { margin-bottom: 0; }

/* the Portfolio gallery follows the short hero closely */
.page-hero + .gallery-section { padding-top: var(--stack-lg); }

/* ---- Hero B: the collage (§7.3, §5.4) ------------------------------------- */
.hero-b {
  --hb-max: 18px;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--topbar-h) + var(--stack-sm));
  padding-bottom: var(--section-y);
}
.hero-b-inner { width: var(--container-wide); margin-inline: auto; display: grid; gap: var(--stack-md); align-items: center; }
.hero-b-media { position: relative; isolation: isolate; }
.hero-b-main, .hero-b-small { display: block; overflow: hidden; border-radius: var(--radius); background: var(--c-greige); }
.hero-b-main img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: 72vh;
  max-height: 72svh;
  object-fit: cover;
}
.hero-b-small { display: none; }
.hero-b-block { display: none; }
.hero-b-small img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.hero-b-text h1 { margin-top: 2px; }
/* fixed phrase breaks: the H1 does not re-wrap when the web font swaps in (CLS) */
.hero-b-text h1 .l, .page-hero h1 .l { display: block; }
.hero-b-text .lead { margin-top: var(--stack-sm); }
.hero-b-text .btn-row { margin-top: var(--stack-md); }

@media (min-width: 30em) {
  .hero-b-media { padding-right: 18%; padding-bottom: 10%; }
  .hero-b-main img { max-height: none; }
  .hero-b-small {
    display: block;
    position: absolute;
    right: 0; bottom: 0;
    z-index: 2;
    width: 36%;
    border: 6px solid var(--c-ivory);
    box-shadow: 0 14px 34px var(--c-shadow);
    transition: border-color var(--dur-theme);
  }
}
@media (min-width: 48em) {
  .hero-b { --hb-max: 30px; padding-top: calc(var(--header-h) + var(--topbar-h) + var(--stack-lg)); }
  .hero-b-inner { grid-template-columns: 1fr 1fr; gap: var(--stack-lg); }
  /* top-aligned (with a fluid offset) so a line that re-wraps when the web font swaps in only nudges what is below it */
  .hero-b-text { align-self: start; padding-top: clamp(0px, 9vw - 40px, 140px); }
  .hero-b-media { margin-left: calc(var(--gutter) * -1); } /* the portrait bleeds off the left edge */
  .hero-b-main { border-radius: 0 var(--radius) var(--radius) 0; }
}
@media (min-width: 64em) {
  .hero-b { --hb-max: 48px; }
  .hero-b-inner { grid-template-columns: 55fr 45fr; }
  .hero-b-media { padding-right: 22%; padding-bottom: 12%; }
  .hero-b-block {
    display: block;
    position: absolute;
    z-index: -1;
    right: 6%; bottom: 0;
    width: 52%; height: 64%;
    background: var(--c-greige);
    border-radius: var(--radius);
    transition: background-color var(--dur-theme);
  }
  .hero-b-small { width: 38%; border-width: 8px; }
}
/* Depth Hero B (Newborn, Maternity): portrait and overlap drift apart on scroll (CSS, or motion.js) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-b--depth .hero-b-main { animation: hb-down linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero-b--depth .hero-b-small { animation: hb-up linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero-b--depth .hero-b-block { animation: hb-block linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes hb-down { to { transform: translate3d(0, var(--hb-max), 0); } }
@keyframes hb-up { to { transform: translate3d(0, calc(var(--hb-max) * -1.4), 0); } }
@keyframes hb-block { to { transform: translate3d(0, calc(var(--hb-max) * -.6), 0); } }

/* ---- section helpers -------------------------------------------------------- */
.section--tight { padding-block: calc(var(--section-y) * .6); }
.prose { margin-top: var(--stack-sm); }
.prose p { color: var(--c-ink-soft); font-size: var(--fs-lead); }
.prose p:first-child { color: var(--c-ink); }
.split { display: grid; gap: var(--stack-lg); }
@media (min-width: 64em) { .split { grid-template-columns: 7fr 5fr; align-items: start; } }

/* best time to book */
.best-time {
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius);
  background: var(--c-linen);
  transition: background-color var(--dur-theme);
}
.best-time h3 { font-size: 1.6rem; margin-bottom: 14px; }
.best-time dl { display: grid; gap: 14px; margin: 0; }
.best-time dt { font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--c-accent-deep); }
.best-time dd { margin: 2px 0 0; font-family: var(--ff-display); font-size: 1.45rem; line-height: 1.3; }
.best-time dd span { display: block; font-family: var(--ff-body); font-size: .95rem; color: var(--c-ink-soft); }
.best-time .link-arrow { margin-top: 14px; }

/* "What we do": the old ❤️ bullets as an elegant numbered list */
.numbered { list-style: none; counter-reset: n; display: grid; gap: var(--stack-md); }
.numbered li { position: relative; padding-left: 64px; counter-increment: n; }
.numbered li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0; top: -.15em;
  font-family: var(--ff-display);
  font-size: 2.2rem;
  font-style: italic;
  line-height: 1;
  color: var(--c-accent);
}
.numbered h3 { font-size: 1.35rem; margin-bottom: 4px; }
.numbered p { color: var(--c-ink-soft); font-size: .98rem; }
@media (min-width: 48em) { .numbered { grid-template-columns: repeat(2, 1fr); gap: var(--stack-lg) var(--stack-lg); } }

/* ---- Services: zig-zag ------------------------------------------------------- */
.zigzag { list-style: none; display: grid; gap: calc(var(--section-y) * .7); }
.zig { display: grid; gap: var(--stack-md); align-items: center; }
.zig-media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--c-greige); }
.zig-media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.zig-text h3 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); font-weight: 300; }
.zig-text p:not(.eyebrow) { margin-top: var(--stack-sm); color: var(--c-ink-soft); max-width: 36rem; }
.zig-text .zig-when { color: var(--c-ink); font-size: .95rem; }
.zig-text .link-arrow { margin-top: var(--stack-sm); }
@media (min-width: 30em) and (max-width: 47.99em) { .zig-media img { aspect-ratio: 5 / 4; } }
@media (min-width: 48em) {
  .zig { grid-template-columns: 1fr 1fr; gap: var(--stack-lg); }
  .zig:nth-child(even) .zig-media { order: 2; }
}
@media (min-width: 64em) {
  .zig { grid-template-columns: 5fr 7fr; }
  .zig:nth-child(even) { grid-template-columns: 7fr 5fr; }
}

/* "Is this for you?" cards */
.fit-cards { list-style: none; display: grid; gap: var(--grid-gap); }
/* four cards: 1 → 2×2 → 4 across, never 3 + 1 */
@media (min-width: 48em) { .fit-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 80em) { .fit-cards { grid-template-columns: repeat(4, 1fr); } }
.fit-card {
  container-type: inline-size;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-ivory);
  transition: background-color var(--dur-theme);
}
.fit-card h3 { font-size: 1.6rem; }
.fit-card p { color: var(--c-ink-soft); }
.fit-card ul { list-style: none; display: grid; gap: 6px; margin: 4px 0 6px; }
.fit-card li { position: relative; padding-left: 22px; font-size: .95rem; }
.fit-card li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 10px; height: 1px; background: var(--c-accent); }

/* ---- Newborn: lens details (7b-5) -------------------------------------------- */
.details-grid { list-style: none; display: grid; gap: var(--grid-gap); }
.details-grid figure { display: grid; gap: 10px; }
.detail-link { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--c-greige); }
.detail-link img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.details-grid figcaption { font-size: var(--fs-small); color: var(--c-ink-soft); letter-spacing: .04em; }
@media (min-width: 30em) { .details-grid { grid-template-columns: repeat(3, 1fr); } }
.details-hint { margin-top: var(--stack-sm); font-size: var(--fs-small); color: var(--c-ink-soft); }
.details-hint .hint-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .details-hint .hint-mouse { display: none; }
  .details-hint .hint-touch { display: inline; }
}

/* ---- Baby: milestone slider (7b-6 variant, 3 stops) ---------------------------- */
/* Maternity wipe: the landscape crop on phones too (the 4:5 one pushed the baby into the top-right corner).
   At 75% the baby sits in the middle and the face stays in the right half at the 50% start. */
.wipe-baby img { object-position: 75% 45%; }
@media (min-width: 48em) { .wipe-baby img { object-position: 50% 50%; transform: scale(1.1); transform-origin: 0% 40%; } }
.compare--milestone { cursor: ew-resize; }
.compare--milestone .ms-2 { clip-path: inset(0 clamp(0%, calc(100% - 2 * var(--pos)), 100%) 0 0); }
.compare--milestone .ms-3 { clip-path: inset(0 clamp(0%, calc(200% - 2 * var(--pos)), 100%) 0 0); }
.compare--milestone .compare-label { top: 16px; bottom: auto; left: 16px; right: auto; opacity: 0; }
.compare--milestone[data-stage="0"] .ms-label-0,
.compare--milestone[data-stage="1"] .ms-label-1,
.compare--milestone[data-stage="2"] .ms-label-2 { opacity: 1; }
.compare--milestone:has(.compare-range:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.ms-stops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.stop-btn {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: var(--tap);
  padding: 8px 6px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: none;
  color: var(--c-ink);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  transition: background-color .3s, color .3s, border-color .3s;
}
.stop-btn span { font-size: .78rem; letter-spacing: .04em; text-transform: none; font-weight: 300; color: var(--c-ink-soft); }
.stop-btn[aria-pressed="true"] { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.stop-btn[aria-pressed="true"] span { color: var(--c-on-brand); opacity: .85; }

/* ---- Baby: studio ↔ outdoor toggle teaser (7b-9) ------------------------------- */
.segmented {
  display: flex;
  margin: 0 0 var(--stack-md);
  padding: 4px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  min-width: 0;
}
.segmented legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.seg { position: relative; flex: 1; display: flex; }
/* the radio covers its label, so the whole pill is the (≥44px) target */
.segmented input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color .4s, color .4s;
}
@media (max-width: 29.99em) { .segmented label { padding: 0 8px; letter-spacing: .1em; font-size: .7rem; } }
.segmented input:checked + label { background: var(--c-brand); color: var(--c-on-brand); }
.segmented input:focus-visible + label { outline: 2px solid var(--c-focus); outline-offset: 2px; }
@media (min-width: 30em) { .segmented { display: inline-flex; } .seg { flex: none; } .segmented label { white-space: nowrap; } }
.light-set p { margin-bottom: var(--stack-sm); color: var(--c-ink-soft); max-width: 46ch; }
.light-set ul { list-style: none; display: grid; gap: var(--grid-gap); }
.light-set li { overflow: hidden; border-radius: var(--radius); background: var(--c-greige); }
.light-set img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.light-set + .light-set { margin-top: var(--stack-md); }
@media (min-width: 30em) { .light-set ul { grid-template-columns: repeat(2, 1fr); } }
@supports selector(:has(*)) {
  .light-sets { display: grid; }
  .light-set { grid-area: 1 / 1; transition: opacity .6s ease, visibility 0s; }
  .light-set + .light-set { margin-top: 0; }
  .light-toggle:has(#light-studio:checked) .light-set--outdoor,
  .light-toggle:has(#light-outdoor:checked) .light-set--studio { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
}
/* reduced motion: switch at once (the global rule shortens durations but not the visibility delay) */
@media (prefers-reduced-motion: reduce) { .light-set { transition: none !important; } }
.light-layout { display: grid; gap: var(--stack-lg); }
.light-layout > * { min-width: 0; }
@media (min-width: 64em) { .light-layout { grid-template-columns: 5fr 7fr; align-items: center; } }

/* ---- FAQ (native <details>) ---------------------------------------------------- */
.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--ff-display);
  font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem);
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 22px; height: 22px; color: var(--c-accent-deep); transition: transform .3s var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq-a { padding: 0 0 20px; color: var(--c-ink-soft); max-width: 64ch; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  @media (prefers-reduced-motion: no-preference) {
    .faq details::details-content { height: 0; overflow: clip; transition: height .4s var(--ease-out), content-visibility .4s allow-discrete; }
    .faq details[open]::details-content { height: auto; }
  }
}

/* ---- packages link -------------------------------------------------------------- */
.packages { display: grid; justify-items: center; gap: 6px; text-align: center; }
.packages p { color: var(--c-ink-soft); max-width: 52ch; }

/* ---- Privacy policy: long-form reading ------------------------------------------ */
.page-hero + .legal { padding-top: var(--stack-lg); }
.legal-body { width: min(100% - 2 * var(--gutter), 42rem); }
.legal-updated { font-size: var(--fs-small); letter-spacing: .06em; color: var(--c-ink-soft); }
.legal-body h2 { margin: var(--stack-lg) 0 var(--stack-sm); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 400; }
.legal-body p, .legal-body li { color: var(--c-ink); }
.legal-body p + ul, .legal-body ul + p { margin-top: 1em; }
.legal-body ul { list-style: none; display: grid; gap: 10px; }
.legal-body li { position: relative; padding-left: 22px; }
.legal-body li::before { content: ""; position: absolute; left: 2px; top: .85em; width: 10px; height: 1px; background: var(--c-accent); }
.legal-body strong { font-weight: 500; }
.legal-body a { overflow-wrap: anywhere; }

/* ---- Thank-you and 404: next steps, gallery links ---------------------------------- */
.next-steps { list-style: none; display: grid; gap: var(--stack-md); counter-reset: none; }
@media (min-width: 48em) { .next-steps { grid-template-columns: repeat(3, 1fr); } }
.next-steps li { display: grid; gap: 6px; align-content: start; padding-top: 18px; border-top: 1px solid var(--c-line); }
.next-num { font-family: var(--ff-display); font-size: 2.2rem; font-style: italic; line-height: 1; color: var(--c-accent); }
.next-steps h3 { font-size: 1.45rem; }
.next-steps p { color: var(--c-ink-soft); }
.thanks-wa { margin-top: var(--stack-lg); text-align: center; }
.thanks-wa h3 { font-size: var(--fs-h3); }
.thanks-wa p { margin-top: 8px; color: var(--c-ink-soft); }

.link-cards { list-style: none; display: grid; gap: var(--grid-gap); }
@media (min-width: 30em) { .link-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .link-cards { grid-template-columns: repeat(5, 1fr); } }
.link-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  height: 100%;
  min-height: var(--tap);
  padding: 20px 52px 20px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-ivory);
  color: var(--c-ink);
  text-decoration: none;
  transition: background-color var(--dur-theme), border-color .3s;
}
.link-card:hover { color: var(--c-ink); border-color: var(--c-accent); }
.link-card-name { font-family: var(--ff-display); font-size: 1.45rem; line-height: 1.2; }
.link-card-line { font-size: .9rem; color: var(--c-ink-soft); line-height: 1.5; }
.link-card .btn-arrow { position: absolute; right: 18px; top: 24px; width: 20px; height: 20px; color: var(--c-brand); transition: transform .4s var(--ease-out); }
.link-card:hover .btn-arrow { transform: translateX(4px); }

.notfound { padding-bottom: var(--section-y); }
.notfound .notfound-mark { width: 88px; margin: 0 auto var(--stack-md); }
@media (prefers-reduced-motion: no-preference) {
  .notfound-mark img { animation: breathe 6s ease-in-out infinite; }
}

/* ==========================================================================
   Batch 2: About, Style Guide, Pricing
   ========================================================================== */

/* ---- About: "Inside our studio" strip ---------------------------------------- */
.studio-strip { list-style: none; display: grid; gap: var(--grid-gap); }
.studio-strip figure { display: grid; gap: 10px; }
.studio-strip picture { display: block; overflow: hidden; border-radius: var(--radius); background: var(--c-greige); }
.studio-strip img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.studio-strip figcaption { font-size: var(--fs-small); color: var(--c-ink-soft); letter-spacing: .04em; }
@media (min-width: 30em) { .studio-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 80em) { .studio-strip { grid-template-columns: repeat(4, 1fr); } }

/* ---- About: numbers ---------------------------------------------------------- */
.stats { list-style: none; display: grid; gap: var(--stack-md); text-align: center; }
.stats li { display: grid; justify-items: center; gap: 6px; }
.stat-num { font-variant-numeric: lining-nums; font-family: var(--ff-display); font-size: clamp(3rem, 2.2rem + 3vw, 4.6rem); font-weight: 300; line-height: 1; color: var(--c-ink); }
.stat-num .count { color: inherit; font-weight: inherit; }
.stat-label { max-width: 22rem; font-size: .95rem; color: var(--c-ink-soft); }
@media (min-width: 48em) { .stats { grid-template-columns: repeat(3, 1fr); } }

/* three-item numbered list (Style Guide intro) */
@media (min-width: 64em) { .numbered--three { grid-template-columns: repeat(3, 1fr); } }

/* ---- Style Guide: palette previewer (7b-8) ------------------------------------ */
/* No JS: the tab row is hidden and every panel is shown, stacked. */
.palette-tabs { display: none; }
.palette-panels { display: grid; gap: var(--section-y); }
.palette-panel { min-width: 0; }
.palette-panel:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 6px; }
.palette-head h3 { font-size: var(--fs-h3); }
.palette-head p { margin-top: 6px; max-width: 60ch; color: var(--c-ink-soft); }
.palette-gallery { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); margin-top: var(--stack-md); }
.palette-gallery li { overflow: hidden; border-radius: var(--radius); background: var(--c-greige); }
.palette-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 48em) { .palette-gallery { grid-template-columns: repeat(4, 1fr); } }
.palette-swatches { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: var(--stack-md); }
.palette-swatches li { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--c-ink); }
.sw-chip { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sw); border: 1px solid var(--c-line); box-shadow: inset 0 0 0 3px var(--c-linen); transition: box-shadow var(--dur-theme); }
.palette-wear { display: grid; gap: var(--stack-sm) var(--stack-md); margin-top: var(--stack-md); }
@media (min-width: 48em) { .palette-wear { grid-template-columns: 1fr 1fr; } }
.palette-baby { grid-column: 1 / -1; color: var(--c-ink); }
.palette-baby strong { font-weight: 500; }
.palette-wear h4 { margin-bottom: 8px; font-size: .78rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--c-accent-deep); }
.palette-wear ul, .checklist { list-style: none; display: grid; gap: 8px; }
.palette-wear li { position: relative; padding-left: 22px; color: var(--c-ink); }
.palette-wear li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 10px; height: 1px; background: var(--c-accent); }
.palette-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: var(--stack-md); padding-top: var(--stack-sm); border-top: 1px solid var(--c-line); }
.palette-cta p { font-family: var(--ff-display); font-style: italic; font-size: 1.3rem; color: var(--c-ink); }

/* With JS: a tablist. Pills in a swipeable row below lg, a vertical list at lg+. */
.palettes.is-tabs .palette-tabs {
  display: flex;
  gap: 8px;
  margin: 0 calc(var(--gutter) * -1) var(--stack-md);
  padding: 4px var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.palettes.is-tabs .palette-tabs::-webkit-scrollbar { display: none; }
.palette-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 8px 18px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-ivory);
  color: var(--c-ink);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  scroll-snap-align: start;
  cursor: pointer;
  transition: background-color .4s, color .4s, border-color .4s;
}
.palette-tab:hover { border-color: var(--c-accent); }
.palette-tab[aria-selected="true"] { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.palette-dots { display: inline-flex; }
.palette-dots span { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); border: 1px solid var(--c-line); }
.palette-dots span + span { margin-left: -4px; }
.palettes.is-tabs .palette-panels { gap: 0; }
.palettes.is-tabs .palette-panel { grid-area: 1 / 1; }
.palettes.is-tabs .palette-panel:not(.is-active) { opacity: 0; visibility: hidden; }
/* cross-fade only once the previewer is set up (no fade on load), and never with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .palettes.is-ready .palette-panel { transition: opacity .6s ease, visibility 0s; }
  .palettes.is-ready .palette-panel:not(.is-active) { transition: opacity .6s ease, visibility 0s .6s; }
}
@media (min-width: 64em) {
  .palettes.is-tabs { display: grid; grid-template-columns: minmax(14rem, 3fr) 9fr; gap: var(--stack-lg); align-items: start; }
  .palettes.is-tabs .palette-tabs { flex-direction: column; margin: 0; padding: 0; overflow: visible; }
  .palettes.is-tabs .palette-tab { justify-content: flex-start; border-radius: var(--radius); padding: 14px 18px; }
}

/* ---- Style Guide: what to bring ---------------------------------------------- */
.bring-layout { display: grid; gap: var(--stack-lg); }
@media (min-width: 64em) { .bring-layout { grid-template-columns: 5fr 7fr; align-items: center; } }
.checklist { gap: 0; border-top: 1px solid var(--c-line); }
.checklist li { position: relative; padding: 14px 0 14px 40px; border-bottom: 1px solid var(--c-line); color: var(--c-ink); }
.checklist li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 18px; height: 18px; border: 1px solid var(--c-accent-deep); border-radius: 3px; }
.checklist li::after { content: ""; position: absolute; left: 10px; top: 20px; width: 6px; height: 10px; border: solid var(--c-accent-deep); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* ---- Pricing ------------------------------------------------------------------- */
/* phones: a fixed break, so the heading is two lines in both the fallback and the web font (no CLS on swap) */
@media (max-width: 47.99em) { #philosophy-title .l { display: block; } }
.pricing-hero { position: relative; overflow: hidden; }

.pkg-grid { list-style: none; display: grid; gap: var(--grid-gap); align-items: start; }
@media (min-width: 48em) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 80em) { .pkg-grid { grid-template-columns: repeat(4, 1fr); align-items: stretch; } }
.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-ivory);
  transition: background-color var(--dur-theme);
}
.pkg::before { content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 2px; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); }
.pkg--featured { border-color: var(--c-accent); box-shadow: 0 18px 40px var(--c-shadow); }
@media (min-width: 80em) { .pkg--featured { transform: translateY(-12px); } }
.pkg-when { font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--c-accent-deep); }
.pkg h3 { font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); font-weight: 300; }
.pkg-line { font-family: var(--ff-display); font-style: italic; font-size: 1.2rem; color: var(--c-ink-soft); }
.pkg-price { margin-top: 4px; padding: 10px 0; border-block: 1px solid var(--c-line); font-size: .92rem; color: var(--c-ink); }
.pkg-details summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--tap);
  cursor: pointer; list-style: none;
  font-size: .76rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--c-ink);
}
.pkg-details summary::-webkit-details-marker { display: none; }
.pkg-details summary .icon { width: 20px; height: 20px; color: var(--c-accent-deep); transition: transform .3s var(--ease-out); }
.pkg-details[open] summary .icon { transform: rotate(180deg); }
.pkg-included { padding-bottom: 8px; }
.pkg-included h4 { margin: 10px 0 6px; font-family: var(--ff-display); font-size: 1.15rem; font-weight: 500; }
.pkg-included ul { list-style: none; display: grid; gap: 6px; }
.pkg-included li { position: relative; padding-left: 20px; font-size: .93rem; color: var(--c-ink-soft); }
.pkg-included li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.pkg-actions { display: grid; justify-items: start; gap: 4px; margin-top: auto; padding-top: 10px; }
.pkg-actions .btn { width: 100%; justify-content: center; }

@media (min-width: 64em) { .fit-cards--three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 80em) { .fit-cards--three { grid-template-columns: repeat(3, 1fr); } }

.included { list-style: none; display: grid; gap: var(--stack-md); }
@media (min-width: 48em) { .included { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 80em) { .included { grid-template-columns: repeat(4, 1fr); } }
.included li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.included .icon { width: 28px; height: 28px; color: var(--c-accent-deep); }
.included h3 { font-size: 1.3rem; margin-bottom: 4px; }
.included p { font-size: .95rem; color: var(--c-ink-soft); }
.print-contact { margin-top: var(--stack-md); text-align: center; }

@media print {
  .hero-b-small, .hero-b-block, .ms-stops, .segmented, .details-hint { display: none !important; }
  .hero-b, .page-hero { padding-top: 0; }
  .light-set { opacity: 1 !important; visibility: visible !important; grid-area: auto !important; }
  /* Style Guide: every palette, stacked */
  .palette-tabs { display: none !important; }
  .palette-panel { opacity: 1 !important; visibility: visible !important; grid-area: auto !important; break-inside: avoid; }
  .palettes.is-tabs { display: block !important; }
  .palettes.is-tabs .palette-panels { display: grid; gap: 24pt; }
  /* Pricing: a clean one-pager with every "What's included" open, no buttons, contact details at the end */
  .page-pricing .site-footer, .page-pricing .cta-band, .pkg-actions, .pkg-details summary .icon, .faq summary .icon { display: none !important; }
  .page-pricing .page-hero { padding-bottom: 12pt; }
  .pkg-grid { grid-template-columns: 1fr 1fr !important; gap: 10pt; }
  .pkg { break-inside: avoid; transform: none !important; box-shadow: none !important; border: 1pt solid #999; }
  .pkg-details::details-content, .faq details::details-content { content-visibility: visible; height: auto !important; }
  .included { grid-template-columns: 1fr 1fr !important; }
}