/* =============================================================================
   Studio / Dott. Marco Perra — design system
   Colour + font tokens are injected per-page from site.config.js (see layout.mjs).
   This file holds spacing, type scale, components and responsive rules.
   Mobile-first. Light is the primary aesthetic; dark mode via [data-theme].
   ============================================================================= */

/* ---- tokens -------------------------------------------------------------- */
:root{
  --container: 1140px;
  --narrow: 720px;
  --pad-x: clamp(1.1rem, 5vw, 2rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem;
  --space-9:6rem; --space-10:8rem;

  --step--1: clamp(.82rem, .79rem + .15vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .18vw, 1.075rem);
  --step-1:  clamp(1.18rem, 1.09rem + .42vw, 1.42rem);
  --step-2:  clamp(1.44rem, 1.28rem + .78vw, 1.86rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.45vw, 2.55rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.3vw, 3.25rem);
  --step-5:  clamp(2.5rem, 1.8rem + 3.2vw, 4rem);

  --r-sm: calc(var(--radius) * .5);
  --r: var(--radius);
  --r-lg: calc(var(--radius) * 1.6);
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(31,33,27,.04), 0 2px 8px rgba(31,33,27,.05);
  --shadow-2: 0 6px 22px rgba(31,33,27,.08), 0 2px 8px rgba(31,33,27,.05);
  --shadow-3: 0 18px 50px rgba(31,33,27,.14);

  --ease: cubic-bezier(.4,.16,.2,1);
  --t: .25s var(--ease);

  --green: #25623f;
  --wa: #25d366;
}
[data-theme="dark"]{
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.3);
  --shadow-2: 0 8px 26px rgba(0,0,0,.4);
  --shadow-3: 0 22px 60px rgba(0,0,0,.55);
}

/* ---- reset --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color: inherit; text-decoration: none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
ul,ol{ list-style:none; padding:0; }
:focus-visible{ outline: 2.5px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

h1,h2,h3,h4{ font-family: var(--font-display); font-weight:500; line-height:1.1; letter-spacing:-.01em; color:var(--ink); }
h1{ font-size: var(--step-4); }
h2{ font-size: var(--step-3); }
h3{ font-size: var(--step-1); }
strong{ font-weight:600; }

.icon{ width:1.15em; height:1.15em; flex:none; }
.flip{ transform: scaleX(-1); }

/* ---- layout -------------------------------------------------------------- */
.container{ width:100%; max-width: var(--container); margin-inline:auto; padding-inline: var(--pad-x); }
.narrow{ max-width: var(--narrow); margin-inline:auto; }
.section{ padding-block: clamp(2.6rem, 6vw, 5rem); }
.section[data-tone="soft"]{ background: var(--surface2); }
.center{ text-align:center; }
.muted{ color: var(--muted); }
.small{ font-size: var(--step--1); }

.eyebrow{
  font-size: var(--step--1); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--primary); margin-bottom: var(--space-3);
}
.lead{ font-size: var(--step-1); line-height:1.5; color: var(--ink); }
.sec-head{ max-width: 46rem; margin-bottom: clamp(1.5rem,4vw,2.75rem); }
.sec-title{ font-size: var(--step-3); }
.sec-sub{ margin-top: var(--space-3); color: var(--muted); font-size: var(--step-1); line-height:1.5; }

/* ---- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em; justify-content:center;
  padding:.82em 1.3em; border-radius: var(--r-pill); font-weight:600; font-size: var(--step-0);
  line-height:1; border:1.5px solid transparent; transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
  white-space:nowrap; min-height:48px;
}
.btn:active{ transform: translateY(1px); }
.btn .icon{ width:1.1em; height:1.1em; }
.btn--primary{ background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-1); }
.btn--primary:hover{ background: var(--primary-ink); }
.btn--ghost{ background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover{ background: var(--surface2); border-color: var(--primary); color: var(--primary-ink); }
.btn--whatsapp{ background: var(--wa); color:#04210f; }
.btn--whatsapp:hover{ filter:brightness(.95); }
.btn--sm{ padding:.62em 1em; font-size: var(--step--1); min-height:42px; }
.btn--block{ display:flex; width:100%; }
.btn--back .icon{ transform: scaleX(-1); }

/* ---- header -------------------------------------------------------------- */
.skip-link{ position:fixed; left:-9999px; top:.5rem; z-index:200; background:var(--primary); color:var(--on-primary); padding:.6em 1em; border-radius: var(--r); }
.skip-link:focus{ left:.5rem; }

.site-header{ position: sticky; top:0; z-index:100; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px); transition: box-shadow var(--t), background var(--t), border-color var(--t); border-bottom:1px solid transparent; }
.site-header.is-stuck{ background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom-color: var(--line); box-shadow: var(--shadow-1); }
.site-header__bar{ display:flex; align-items:center; gap: var(--space-4); min-height:66px; }

.brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; }
.brand__mark{ width:34px; height:34px; border-radius:8px; }
.brand__text{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{ font-family: var(--font-display); font-weight:600; font-size:1.12rem; letter-spacing:-.01em; }
.brand__sub{ font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); }

.nav-desktop{ display:none; }
.nav-desktop ul{ display:flex; gap: clamp(.6rem,1.6vw,1.4rem); }
.nav-desktop a{ font-size: .96rem; font-weight:500; color: var(--ink); padding:.4em .2em; border-bottom:2px solid transparent; transition: color var(--t), border-color var(--t); }
.nav-desktop a:hover{ color: var(--primary); }
.nav-desktop a[aria-current="page"]{ color: var(--primary); border-bottom-color: var(--primary); }

.header-actions{ display:flex; align-items:center; gap:.4rem; }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius: var(--r-pill); color: var(--ink); transition: background var(--t), color var(--t); }
.icon-btn:hover{ background: var(--surface2); color: var(--primary); }
.icon-btn .icon{ width:1.25rem; height:1.25rem; }
.lang-switch{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding-inline:.5rem; border-radius: var(--r-pill); font-weight:600; font-size:.85rem; color: var(--ink); border:1.5px solid var(--line); }
.lang-switch:hover{ border-color: var(--primary); color: var(--primary); }
.theme-toggle .i-moon{ display:none; }
[data-theme="dark"] .theme-toggle .i-sun{ display:none; }
[data-theme="dark"] .theme-toggle .i-moon{ display:block; }
.header-book{ display:none; }
.call-icon{ display:none; }
.menu-toggle .i-close{ display:none; }
.menu-toggle[aria-expanded="true"] .i-menu{ display:none; }
.menu-toggle[aria-expanded="true"] .i-close{ display:block; }

.mobile-menu{ border-top:1px solid var(--line); background: var(--surface); padding: var(--space-4) var(--pad-x) var(--space-6); }
.mobile-menu[hidden]{ display:none; }
.mobile-menu ul{ display:flex; flex-direction:column; }
.mobile-menu a{ display:block; padding:.9rem .25rem; font-size:1.1rem; font-family:var(--font-display); border-bottom:1px solid var(--line); }
.mobile-menu__cta{ display:flex; gap:.6rem; margin-top: var(--space-4); }
.mobile-menu__cta .btn{ flex:1; }

/* ---- hero ---------------------------------------------------------------- */
.hero{ padding-block: clamp(1.5rem,5vw,3.5rem) clamp(2rem,5vw,3.5rem); }
.hero__inner{ display:grid; gap: clamp(1.5rem,4vw,3rem); align-items:center; }
.hero__content{ max-width: 36rem; }
.hero__title{ font-size: var(--step-5); margin-block:.2em .4em; }
.hero__sub{ font-size: var(--step-1); color: var(--muted); line-height:1.5; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top: var(--space-5); }
.hero__note{ display:flex; align-items:center; gap:.5em; margin-top: var(--space-4); font-size: var(--step--1); color: var(--muted); }
.hero__note .icon{ color: var(--primary); }
.hero__figure{ position:relative; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-2); aspect-ratio: 5/4; background: var(--surface2); }
.hero__figure img{ width:100%; height:100%; object-fit:cover; }

/* ---- trust bar ----------------------------------------------------------- */
.trustbar{ border-block:1px solid var(--line); background: var(--surface); }
.trustbar__row{ display:grid; grid-template-columns: repeat(2,1fr); gap:.2rem 1rem; padding-block: var(--space-4); }
.trust{ display:flex; flex-direction:column; padding:.6rem .2rem; }
.trust__big{ font-family: var(--font-display); font-size:1.4rem; font-weight:600; color: var(--primary); }
.trust__small{ font-size: var(--step--1); color: var(--muted); }

/* ---- intro --------------------------------------------------------------- */
.section--intro{ padding-block: clamp(2rem,5vw,3.5rem); }
.intro-lead{ font-family: var(--font-display); font-size: var(--step-2); line-height:1.35; color: var(--ink); letter-spacing:-.01em; }

/* ---- needs --------------------------------------------------------------- */
.needs-grid{ display:grid; gap:.8rem; grid-template-columns: 1fr; }
.need-card{ display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:.9rem; align-items:center;
  padding:1.1rem 1.2rem; background: var(--surface); border:1px solid var(--line); border-radius: var(--r); transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.need-card:hover{ border-color: var(--primary); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.need-card__icon{ grid-row:1/3; display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.need-card__icon .icon{ width:1.5rem; height:1.5rem; }
.need-card__label{ font-weight:600; font-family:var(--font-display); font-size:1.08rem; }
.need-card__blurb{ grid-column:2/3; font-size: var(--step--1); color: var(--muted); }
.need-card__go{ grid-row:1/3; color: var(--muted); transition: transform var(--t), color var(--t); }
.need-card:hover .need-card__go{ color: var(--primary); transform: translateX(3px); }

/* ---- services ------------------------------------------------------------ */
.services-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
.service-card{ display:flex; flex-direction:column; gap:.6rem; padding:1.4rem; background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.service-card:hover{ border-color: var(--primary); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.service-card__icon{ display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.service-card__icon .icon{ width:1.7rem; height:1.7rem; }
.service-card__name{ font-size:1.18rem; }
.service-card__desc{ color: var(--muted); font-size: var(--step--1); flex:1; }
.service-card__meta{ display:inline-flex; align-items:center; gap:.4em; font-size: var(--step--1); color: var(--primary); font-weight:600; }

/* ---- who / benefits / process ------------------------------------------- */
.who-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
.who-card{ padding:1.4rem; background: var(--surface); border-radius: var(--r); border:1px solid var(--line); }
.who-card h3{ font-size:1.1rem; margin-bottom:.4rem; }
.who-card p{ color: var(--muted); font-size: var(--step--1); }

.benefits-grid{ display:grid; gap:1.2rem 1.6rem; grid-template-columns:1fr; }
.benefit{ position:relative; padding-left:3.4rem; }
.benefit__n{ position:absolute; left:0; top:-.1rem; font-family:var(--font-display); font-size:1.5rem; color: color-mix(in srgb, var(--primary) 55%, var(--muted)); font-weight:600; }
.benefit h3{ font-size:1.12rem; margin-bottom:.3rem; }
.benefit p{ color: var(--muted); font-size: var(--step--1); }

.process{ display:grid; gap:1rem; grid-template-columns:1fr; counter-reset:step; }
.step{ padding:1.4rem 1.5rem; background: var(--surface); border-radius: var(--r); border:1px solid var(--line); }
.step h3{ font-size:1.12rem; margin-bottom:.35rem; color: var(--primary-ink); }
.step p{ color: var(--muted); font-size: var(--step--1); }

/* ---- about teaser / body ------------------------------------------------- */
.about-teaser, .about-body{ display:grid; gap: clamp(1.5rem,4vw,2.5rem); align-items:center; }
.about-teaser__fig img, .about-body__fig img{ width:100%; border-radius: var(--r-lg); box-shadow: var(--shadow-2); aspect-ratio:4/5; object-fit:cover; background:var(--surface2); }
.about-body__fig figcaption{ margin-top:.6rem; font-size: var(--step--1); color: var(--muted); text-align:center; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0; }
.chip{ display:inline-flex; align-items:center; gap:.4em; padding:.45em .8em; border-radius: var(--r-pill); background: var(--surface2); border:1px solid var(--line); font-size: var(--step--1); font-weight:500; }
.chip .icon{ color: var(--primary); width:1em; height:1em; }

/* ---- timeline ------------------------------------------------------------ */
.timeline{ display:grid; gap:.2rem; max-width:48rem; }
.timeline__item{ display:grid; grid-template-columns: 4.2rem 1fr; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.timeline__year{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; color: var(--primary); }
.timeline__kind{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--muted); }
.timeline__body h3{ font-size:1.08rem; margin:.15rem 0; }
.timeline__body p{ color: var(--muted); font-size: var(--step--1); }
.reg-line{ display:inline-flex; align-items:center; gap:.5em; margin-top:1.2rem; padding:.7em 1.1em; border-radius: var(--r-pill); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary-ink); font-weight:600; font-size: var(--step--1); }
.reg-line .icon{ color: var(--primary); }

/* ---- pricing ------------------------------------------------------------- */
.pricing-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
.price-card{ position:relative; display:flex; flex-direction:column; padding:1.6rem; background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); }
.price-card--featured{ border-color: var(--primary); box-shadow: var(--shadow-2); }
.price-card__badge{ position:absolute; top:-.8rem; left:1.4rem; background: var(--primary); color:var(--on-primary); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.35em .8em; border-radius: var(--r-pill); }
.price-card__name{ font-size:1.2rem; }
.price-card__meta{ display:inline-flex; align-items:center; gap:.4em; color: var(--muted); font-size: var(--step--1); margin-top:.3rem; }
.price-card__price{ font-family:var(--font-display); font-size:1.8rem; color: var(--primary); margin:.6rem 0; font-weight:600; }
.price-card__list{ display:grid; gap:.5rem; margin:.4rem 0 1.2rem; flex:1; }
.price-card__list li{ display:flex; gap:.5em; align-items:flex-start; font-size: var(--step--1); }
.price-card__list .icon{ color: var(--primary); margin-top:.15em; }
.price-note{ display:flex; gap:.6em; align-items:flex-start; margin-top:1.2rem; padding:1rem 1.2rem; background: var(--surface2); border-radius: var(--r); font-size: var(--step--1); color: var(--muted); }
.price-note .icon{ color: var(--primary); flex:none; margin-top:.1em; }

/* ---- testimonials carousel ---------------------------------------------- */
.carousel{ position:relative; }
.carousel__track{ display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:.8rem; scrollbar-width:none; }
.carousel__track::-webkit-scrollbar{ display:none; }
.tcard{ scroll-snap-align:start; flex:0 0 86%; display:flex; flex-direction:column; gap:.9rem; padding:1.5rem; background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); }
.tcard__top{ display:flex; align-items:center; justify-content:space-between; }
.tcard__src{ display:inline-flex; align-items:center; gap:.4em; font-size: var(--step--1); color: var(--muted); }
.stars{ display:inline-flex; gap:1px; color:#d9b23a; }
.stars .icon{ width:1.05rem; height:1.05rem; fill:none; stroke: color-mix(in srgb, #d9b23a 40%, var(--line)); }
.stars .icon.is-on{ fill:#e8b53a; stroke:#e8b53a; }
.tcard__quote{ font-size:1.02rem; line-height:1.55; }
.tcard__by{ display:flex; flex-direction:column; margin-top:auto; }
.tcard__name{ font-weight:600; font-family:var(--font-display); }
.tcard__tag{ font-size: var(--step--1); color: var(--primary); }
.carousel__controls{ display:none; gap:.5rem; justify-content:flex-end; margin-top:.8rem; }
.carousel__controls .icon-btn{ border:1.5px solid var(--line); }

/* ---- FAQ ----------------------------------------------------------------- */
.faq{ max-width: 50rem; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 0; font-family:var(--font-display); font-size:1.12rem; font-weight:500; cursor:pointer; list-style:none; }
.faq__q::-webkit-details-marker{ display:none; }
.faq__q .icon{ flex:none; color: var(--primary); transition: transform var(--t); }
.faq__item[open] .faq__q .icon{ transform: rotate(90deg); }
.faq__a{ padding:0 0 1.2rem; color: var(--muted); max-width:46rem; }
.faq__a p{ font-size:1rem; }

/* ---- CTA band ------------------------------------------------------------ */
.cta-band{ background: var(--primary); color: var(--on-primary); }
[data-theme="dark"] .cta-band{ background: color-mix(in srgb, var(--primary) 22%, var(--surface)); color: var(--ink); border-block:1px solid var(--line); }
.cta-band__inner{ display:flex; flex-direction:column; gap:1.3rem; padding-block: clamp(2.2rem,5vw,3.2rem); }
.cta-band h2{ color:inherit; font-size: var(--step-3); }
.cta-band p{ opacity:.9; margin-top:.4rem; max-width:38rem; }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
.cta-band .btn--primary{ background: var(--on-primary); color: var(--primary-ink); }
.cta-band .btn--primary:hover{ background:#fff; }
[data-theme="dark"] .cta-band .btn--primary{ background: var(--primary); color: var(--on-primary); }

/* ---- contact ------------------------------------------------------------- */
.contact-grid{ display:grid; gap: clamp(1.5rem,4vw,2.5rem); }
.info-list{ display:grid; gap:1rem; margin:1.2rem 0 1.8rem; }
.info-list li{ display:flex; gap:.9rem; }
.info-list .icon{ color: var(--primary); flex:none; margin-top:.15em; width:1.3rem; height:1.3rem; }
.info-list strong{ display:block; font-size: var(--step--1); }
.info-list span, .info-list a{ color: var(--muted); }
.info-link{ display:inline-flex; align-items:center; gap:.3em; color: var(--primary) !important; font-weight:600; font-size: var(--step--1); margin-top:.3rem; }
.info-link .icon{ width:1em; height:1em; }
.contact-sub{ font-size:1.1rem; margin-bottom:.6rem; }
.hours-list, .foot-hours{ display:grid; gap:.35rem; }
.hours-list li{ display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; border-bottom:1px dashed var(--line); font-size:.96rem; }
.hours-list .is-closed{ color: var(--muted); }
.contact-map{ border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-1); min-height:320px; background:var(--surface2); }
.contact-map iframe{ width:100%; height:100%; min-height:320px; border:0; }

/* ---- book cards ---------------------------------------------------------- */
.book-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
.book-card{ display:flex; flex-direction:column; gap:.5rem; padding:1.5rem; background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
a.book-card:hover{ border-color: var(--primary); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.book-card__icon{ display:grid; place-items:center; width:50px; height:50px; border-radius:14px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.book-card--wa .book-card__icon{ background: color-mix(in srgb, var(--wa) 18%, var(--surface)); color:#138a43; }
.book-card h3{ font-size:1.15rem; }
.book-card p{ color: var(--muted); font-size: var(--step--1); flex:1; }
.book-card__val{ font-weight:600; color: var(--primary); }
.book-card--note{ background: var(--surface2); }

/* ---- journal / article --------------------------------------------------- */
.journal-grid{ display:grid; gap:1.4rem; grid-template-columns:1fr; }
.post-card{ display:flex; flex-direction:column; background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.post-card:hover{ border-color: var(--primary); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.post-card__fig{ aspect-ratio:16/10; background:var(--surface2); }
.post-card__fig img{ width:100%; height:100%; object-fit:cover; }
.post-card__body{ display:flex; flex-direction:column; gap:.5rem; padding:1.3rem; }
.post-card__tag{ align-self:flex-start; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--primary); background: color-mix(in srgb,var(--primary) 10%, var(--surface)); padding:.3em .7em; border-radius: var(--r-pill); }
.post-card h3{ font-size:1.22rem; }
.post-card p{ color: var(--muted); font-size: var(--step--1); flex:1; }
.post-card__more{ display:inline-flex; align-items:center; gap:.3em; color: var(--primary); font-weight:600; font-size: var(--step--1); }

.article-head{ max-width: var(--narrow); margin-inline:auto; text-align:center; }
.article-head h1{ font-size: var(--step-4); margin:.5rem 0; }
.article-meta{ color: var(--muted); font-size: var(--step--1); }
.article-hero{ max-width: 60rem; margin:2rem auto; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-2); aspect-ratio:1000/520; background:var(--surface2); }
.article-hero img{ width:100%; height:100%; object-fit:cover; }
.article-foot{ max-width: var(--narrow); margin:2rem auto 0; }

/* prose */
.prose{ max-width: var(--narrow); margin-inline:auto; }
.prose > * + *{ margin-top:1.1rem; }
.prose h2{ font-size: var(--step-2); margin-top:2.2rem; }
.prose h3{ margin-top:1.6rem; }
.prose p, .prose li{ font-size:1.06rem; line-height:1.72; color: var(--ink); }
.prose a{ color: var(--primary); text-decoration:underline; text-underline-offset:3px; }
.ticklist{ display:grid; gap:.6rem; }
.ticklist li{ display:flex; gap:.6em; align-items:flex-start; }
.ticklist .icon{ color: var(--primary); flex:none; margin-top:.3em; }
.pull{ display:grid; gap:.5rem; padding:1.4rem 1.6rem; border-left:3px solid var(--primary); background: var(--surface2); border-radius: 0 var(--r) var(--r) 0; font-family:var(--font-display); font-size:1.2rem; line-height:1.4; }
.pull .icon{ color: var(--primary); width:1.6rem; height:1.6rem; }

/* ---- breadcrumb ---------------------------------------------------------- */
.breadcrumb-bar{ padding-top:1.4rem; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; font-size: var(--step--1); color: var(--muted); }
.breadcrumb a:hover{ color: var(--primary); }
.breadcrumb .icon{ width:1em; height:1em; opacity:.6; }
.breadcrumb [aria-current="page"]{ color: var(--ink); }

/* ---- page head ----------------------------------------------------------- */
.section--pagehead{ padding-block: clamp(1.8rem,5vw,3rem) clamp(1rem,3vw,1.5rem); }
.page-head{ max-width: 46rem; }
.page-head h1{ margin-top:.6rem; }
.page-head .lead{ margin-top:1rem; color: var(--muted); }

/* ---- service detail ------------------------------------------------------ */
.service-hero{ display:grid; gap: clamp(1.4rem,4vw,2.4rem); align-items:center; }
.service-hero__icon{ display:grid; place-items:center; width:60px; height:60px; border-radius:16px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); margin-bottom:1rem; }
.service-hero__icon .icon{ width:2rem; height:2rem; }
.service-hero h1{ font-size: var(--step-4); }
.service-hero__meta{ display:inline-flex; align-items:center; gap:.4em; color: var(--primary); font-weight:600; margin-top:.6rem; }
.service-hero__fig img{ width:100%; border-radius: var(--r-lg); box-shadow: var(--shadow-2); aspect-ratio:4/3; object-fit:cover; background:var(--surface2); }
.service-detail__long{ font-size:1.12rem; }
.services-grid--mini .service-card{ padding:1.1rem; }

/* ---- footer -------------------------------------------------------------- */
.site-footer{ background: var(--surface); border-top:1px solid var(--line); margin-top: clamp(2rem,6vw,4rem); }
.site-footer__grid{ display:grid; gap: clamp(1.6rem,4vw,2.4rem); padding-block: clamp(2.4rem,5vw,3.4rem); grid-template-columns:1fr; }
.foot-brand .brand{ margin-bottom:1rem; }
.foot-tag{ color: var(--muted); max-width:24rem; }
.foot-rating{ display:flex; align-items:center; gap:.4em; margin-top:.8rem; font-size: var(--step--1); color: var(--muted); }
.foot-rating .icon{ fill:#e8b53a; stroke:#e8b53a; }
.foot-social{ display:flex; gap:.5rem; margin-top:1rem; }
.social{ display:grid; place-items:center; width:40px; height:40px; border-radius: var(--r-pill); border:1px solid var(--line); color: var(--ink); transition: background var(--t), color var(--t), border-color var(--t); }
.social:hover{ background: var(--primary); color: var(--on-primary); border-color:var(--primary); }
.foot-col h3{ font-size:1rem; margin-bottom:.9rem; font-family:var(--font-body); font-weight:600; letter-spacing:.02em; }
.foot-list{ display:grid; gap:.7rem; }
.foot-list li{ display:flex; gap:.6em; align-items:flex-start; font-size:.95rem; color: var(--muted); }
.foot-list .icon{ color: var(--primary); flex:none; margin-top:.15em; }
.foot-list a:hover{ color: var(--primary); }
.foot-hours li{ display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; color: var(--muted); }
.foot-hours .is-closed{ opacity:.7; }
.foot-links{ display:grid; gap:.55rem; }
.foot-links a{ color: var(--muted); font-size:.95rem; }
.foot-links a:hover{ color: var(--primary); }
.site-footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; padding-block:1.3rem; border-top:1px solid var(--line); font-size: var(--step--1); color: var(--muted); }

/* ---- mobile sticky bar --------------------------------------------------- */
.mobile-bar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; gap:1px; background: var(--line); border-top:1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 20px rgba(31,33,27,.08); }
.mobile-bar__item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.6rem .3rem; background: var(--surface); font-size:.72rem; font-weight:600; color: var(--ink); }
.mobile-bar__item .icon{ width:1.3rem; height:1.3rem; color: var(--primary); }
.mobile-bar__item--primary{ background: var(--primary); color: var(--on-primary); }
.mobile-bar__item--primary .icon{ color: var(--on-primary); }
body{ padding-bottom: 64px; }

/* ===========================================================================
   RESPONSIVE
   ======================================================================== */
@media (min-width: 560px){
  .trustbar__row{ grid-template-columns: repeat(4,1fr); }
  .needs-grid{ grid-template-columns: repeat(2,1fr); }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .who-grid{ grid-template-columns: repeat(2,1fr); }
  .book-grid{ grid-template-columns: repeat(2,1fr); }
  .pricing-grid{ grid-template-columns: repeat(2,1fr); }
  .header-book{ display:inline-flex; }
  .tcard{ flex-basis: 60%; }
}
@media (min-width: 768px){
  body{ padding-bottom:0; }
  .mobile-bar{ display:none; }
  .call-icon{ display:inline-flex; }
  .hero__inner{ grid-template-columns: 1.05fr .95fr; }
  .about-teaser{ grid-template-columns: .8fr 1fr; }
  .about-teaser__fig{ order:-1; }
  .about-body{ grid-template-columns: .8fr 1fr; align-items:start; }
  .about-body__fig{ position:sticky; top:90px; }
  .contact-grid{ grid-template-columns: 1fr 1.1fr; }
  .service-hero{ grid-template-columns: 1.05fr .95fr; }
  .benefits-grid{ grid-template-columns: repeat(2,1fr); }
  .process{ grid-template-columns: repeat(3,1fr); }
  .journal-grid{ grid-template-columns: repeat(2,1fr); }
  .cta-band__inner{ flex-direction:row; align-items:center; justify-content:space-between; }
  .cta-band__actions{ flex:none; }
  .carousel__controls{ display:flex; }
}
@media (min-width: 880px){
  .nav-desktop{ display:block; }
  .menu-toggle{ display:none; }
  .mobile-menu{ display:none !important; }
  .services-grid{ grid-template-columns: repeat(3,1fr); }
  .pricing-grid{ grid-template-columns: repeat(4,1fr); }
  .who-grid{ grid-template-columns: repeat(4,1fr); }
  .benefits-grid{ grid-template-columns: repeat(4,1fr); }
  .needs-grid{ grid-template-columns: repeat(5,1fr); }
  .need-card{ grid-template-columns:1fr; grid-template-rows:auto auto auto; text-align:left; row-gap:.5rem; }
  .need-card__icon{ grid-row:auto; }
  .need-card__go{ display:none; }
  .site-footer__grid{ grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .tcard{ flex-basis: 31.5%; }
  .journal-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (min-width: 1040px){
  .hero__title{ font-size: clamp(2.8rem, 2rem + 3vw, 4.2rem); }
}

/* ===========================================================================
   PREMIUM REFINEMENTS (warmer, more editorial)
   ======================================================================== */
/* slim utility bar */
.utility-bar{ display:none; background:var(--primary); color:var(--on-primary); font-size:.8rem; }
.utility-bar__row{ display:flex; align-items:center; justify-content:space-between; min-height:40px; }
.ub-loc,.ub-act{ display:inline-flex; align-items:center; gap:1.4rem; }
.utility-bar .icon{ width:1em; height:1em; opacity:.85; }
.ub-loc{ letter-spacing:.01em; }
.ub-rating{ display:inline-flex; align-items:center; gap:.35em; }
.ub-rating .icon{ fill:#e8c45a; stroke:#e8c45a; opacity:1; }
.ub-act a{ display:inline-flex; align-items:center; gap:.4em; }
.ub-act a:hover{ text-decoration:underline; }
.ub-lang{ opacity:.85; letter-spacing:.06em; }
@media(min-width:900px){ .utility-bar{ display:block; } }

/* editorial eyebrow with accent rule */
.eyebrow{ display:inline-flex; align-items:center; gap:.7em; }
.eyebrow::before{ content:""; width:1.9rem; height:1.5px; background:var(--accent); flex:none; }

/* a touch more air + finesse */
@media(min-width:768px){ .section{ padding-block: clamp(3.4rem,6vw,5.75rem); } }
.hero{ padding-block: clamp(1.75rem,5vw,4rem) clamp(2.25rem,6vw,4.25rem); }
.hero__title{ letter-spacing:-.022em; }
.hero__figure{ outline:1px solid var(--line); outline-offset:-1px; }
.btn--primary{ letter-spacing:.012em; }
.sec-title{ letter-spacing:-.018em; }

/* editorial, serif testimonials with quote mark */
.tcard{ position:relative; }
.tcard__quote{ font-family:var(--font-display); font-size:1.16rem; line-height:1.46; letter-spacing:-.01em; }
.tcard__quote::before{ content:"\201C"; font-family:var(--font-display); color:var(--accent); font-size:2.4rem; line-height:0; position:absolute; top:1.7rem; left:1.1rem; opacity:.35; }
.tcard{ padding-top:2rem; }

/* warmer accents */
.price-card__badge{ background:var(--accent); }
.price-card--featured{ box-shadow:var(--shadow-2); }
.need-card__go{ color:var(--accent); }
.post-card__more, .service-card__meta{ }
.intro-lead{ position:relative; }
.prose a{ text-decoration-color:var(--accent); text-decoration-thickness:1.5px; }
.benefit__n{ color:var(--accent); }
.timeline__year{ color:var(--accent); }

/* subtle warm divider under section heads on key sections */
.section--benefits .sec-head::after,
.section--process .sec-head::after{ content:""; display:block; width:2.4rem; height:2px; background:var(--accent); margin-top:1rem; opacity:.7; }

/* credentials gallery + lightbox */
.cred-gallery{ display:grid; gap:1.2rem; grid-template-columns:repeat(2,1fr); }
@media(min-width:760px){ .cred-gallery{ grid-template-columns:repeat(4,1fr); } }
.cred-card{ display:flex; flex-direction:column; gap:.7rem; }
.cred-card__img{ display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fbfaf7; cursor:zoom-in; transition:transform var(--t),box-shadow var(--t),border-color var(--t); }
.cred-card__img:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--accent); }
.cred-card__img img{ width:100%; aspect-ratio:1/1; object-fit:contain; display:block; padding:8px; }
.cred-card figcaption{ display:flex; flex-direction:column; gap:.1rem; font-size:var(--step--1); }
.cred-card__year{ color:var(--accent); font-weight:600; font-family:var(--font-display); font-size:1.05rem; }
.cred-card figcaption strong{ font-size:.95rem; line-height:1.25; }
.lightbox{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:rgba(18,18,12,.86); backdrop-filter:blur(4px); }
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:min(92vw,720px); max-height:88vh; border-radius:var(--r); box-shadow:var(--shadow-3); background:#fff; }
.lightbox__close{ position:absolute; top:1rem; right:1rem; width:46px; height:46px; border-radius:var(--r-pill); background:rgba(255,255,255,.16); color:#fff; font-size:1.3rem; display:grid; place-items:center; }
.lightbox__close:hover{ background:rgba(255,255,255,.3); }

/* ===========================================================================
   LIGHTER PASS — airy beige top bar + CTA band (instead of heavy dark blocks)
   ======================================================================== */
.utility-bar{ background:var(--surface2); color:var(--ink); border-bottom:1px solid var(--line); }
.utility-bar .icon{ opacity:.65; }
.ub-rating .icon{ opacity:1; }
.ub-act a:hover{ color:var(--primary); }
.cta-band{ background:var(--surface2); color:var(--ink); border-block:1px solid var(--line); }
.cta-band h2{ color:var(--ink); }
.cta-band p{ color:var(--muted); opacity:1; }
.cta-band .btn--primary{ background:var(--primary); color:var(--on-primary); }
.cta-band .btn--primary:hover{ background:var(--primary-ink); }
[data-theme="dark"] .cta-band{ background:var(--surface2); color:var(--ink); }
[data-theme="dark"] .cta-band .btn--primary{ background:var(--primary); color:var(--on-primary); }
/* softer shadows for a lighter feel */
:root{ --shadow-2: 0 6px 20px rgba(74,65,54,.07), 0 2px 6px rgba(74,65,54,.04); --shadow-3: 0 16px 44px rgba(74,65,54,.12); }

/* ===========================================================================
   LANGUAGE SWITCHER (flag dropdown) + extra photos
   ======================================================================== */
.utility-bar .ub-rating .icon{ fill:#caa45a; stroke:#caa45a; }
.lang-switch{ position:relative; border:0; height:auto; min-width:0; padding:0; display:inline-block; }
.lang-switch__btn{ display:inline-flex; align-items:center; gap:.35rem; height:42px; padding:0 .55rem; border:1.5px solid var(--line); border-radius:var(--r-pill); font-weight:600; font-size:.85rem; color:var(--ink); background:transparent; cursor:pointer; }
.lang-switch__btn:hover{ border-color:var(--primary); color:var(--primary); }
.lang-switch__btn .icon{ width:1rem; height:1rem; opacity:.7; }
.lang-switch .flag{ font-size:1.05rem; line-height:1; }
.lang-switch__menu{ position:absolute; right:0; top:calc(100% + .4rem); min-width:172px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-2); padding:.35rem; display:grid; gap:2px; z-index:130; list-style:none; margin:0; }
.lang-switch__menu[hidden]{ display:none; }
.lang-switch__menu a{ display:flex; align-items:center; gap:.55rem; padding:.5rem .6rem; border-radius:8px; font-size:.95rem; color:var(--ink); }
.lang-switch__menu a:hover{ background:var(--surface2); }
.lang-switch__menu a[aria-current="true"]{ color:var(--primary); font-weight:600; }
.about-wide{ margin-top:clamp(1.5rem,4vw,2.5rem); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-2); aspect-ratio:3/2; background:var(--surface2); }
.about-wide img{ width:100%; height:100%; object-fit:cover; }
.contact-photo{ margin-bottom:clamp(1.5rem,4vw,2.25rem); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-1); aspect-ratio:16/9; max-height:360px; background:var(--surface2); }
.contact-photo img{ width:100%; height:100%; object-fit:cover; }

/* ---- article references / citations / disclaimer ---- */
sup.ref{ font-size:.68em; line-height:0; }
sup.ref a{ color:var(--primary); text-decoration:none; padding:0 .12em; font-weight:600; }
sup.ref a:hover{ text-decoration:underline; }
.numlist{ counter-reset:n; display:grid; gap:.7rem; margin:1.2rem 0; padding-left:0; list-style:none; }
.numlist li{ counter-increment:n; position:relative; padding-left:2.4rem; font-size:1.04rem; line-height:1.65; }
.numlist li::before{ content:counter(n); position:absolute; left:0; top:-.1rem; width:1.7rem; height:1.7rem; display:grid; place-items:center; background:var(--primary); color:var(--on-primary); border-radius:50%; font-family:var(--font-display); font-size:.9rem; font-weight:600; }
.callout{ margin:1.5rem 0; padding:1.1rem 1.3rem; border-left:3px solid var(--accent); background:var(--surface2); border-radius:0 var(--r) var(--r) 0; font-size:1.02rem; line-height:1.6; }
.article-disclaimer{ display:flex; gap:.7rem; align-items:flex-start; max-width:var(--narrow); margin:2.2rem auto 0; padding:1rem 1.2rem; background:var(--surface2); border-radius:var(--r); font-size:.92rem; color:var(--muted); }
.article-disclaimer .icon{ color:var(--primary); flex:none; margin-top:.15em; width:1.2rem; height:1.2rem; }
.article-disclaimer p{ margin:0; }
.references{ max-width:var(--narrow); margin:2.5rem auto 0; padding-top:1.6rem; border-top:1px solid var(--line); }
.references h2{ font-size:var(--step-1); }
.references ol{ counter-reset:ref; display:grid; gap:.55rem; margin-top:.9rem; padding-left:0; list-style:none; }
.references li{ counter-increment:ref; position:relative; padding-left:2.1rem; font-size:.9rem; color:var(--muted); line-height:1.5; scroll-margin-top:90px; }
.references li::before{ content:counter(ref); position:absolute; left:0; top:.05rem; width:1.45rem; height:1.45rem; display:grid; place-items:center; background:var(--surface2); border:1px solid var(--line); border-radius:50%; font-size:.72rem; font-weight:600; color:var(--primary); }
.references a{ color:var(--primary); text-decoration:underline; text-underline-offset:2px; word-break:break-word; }

/* ---- partners ---- */
.partners-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media(min-width:620px){ .partners-grid{ grid-template-columns:repeat(2,1fr); } }
.partner-card{ display:flex; flex-direction:column; gap:.5rem; padding:1.5rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); transition:border-color var(--t),box-shadow var(--t),transform var(--t); }
.partner-card:hover{ border-color:var(--primary); box-shadow:var(--shadow-2); transform:translateY(-3px); }
.partner-card__name{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; }
.partner-card__blurb{ color:var(--muted); font-size:var(--step--1); flex:1; }
.partner-card__go{ display:inline-flex; align-items:center; gap:.4em; color:var(--primary); font-weight:600; font-size:var(--step--1); word-break:break-word; }
.partner-card__go .icon{ width:1em; height:1em; }


/* ---- GDPR click-to-load map ---- */
.map-consent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;min-height:300px;padding:28px;text-align:center;background:var(--surface2);border:1px solid var(--line);border-radius:14px}
.map-consent p{max-width:46ch;margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}


/* ---- Premium footer ---- */
.site-footer{ background: var(--surface2); position: relative; }
.site-footer::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, transparent 4%, var(--accent) 50%, transparent 96%); opacity:.5; }
.site-footer__grid{ padding-block: clamp(2.8rem, 6vw, 4.4rem); gap: clamp(2rem, 4.5vw, 3.2rem); }
.foot-col h3{ font-size:.76rem; text-transform:uppercase; letter-spacing:.16em; color: var(--accent); font-weight:700; margin-bottom:1.05rem; }
.foot-tag{ font-size:.95rem; line-height:1.6; }
.foot-area{ font-size:.83rem; color: var(--muted); margin-top:.6rem; max-width:36ch; line-height:1.6; }
.foot-rating{ margin-top:.45rem; }
.foot-links{ gap:.6rem; }
.foot-links a{ transition: color .18s ease, padding-left .18s ease; }
.foot-links a:hover{ color: var(--ink); padding-left:.15rem; }
.foot-hours li{ font-variant-numeric: tabular-nums; align-items: baseline; padding-block:.12rem; }
.foot-hours li span:first-child{ color: var(--muted); font-size:.88rem; }
.foot-hours li span:last-child{ color: var(--ink); font-size:.88rem; white-space: nowrap; letter-spacing:.015em; }
.foot-hours .is-closed{ color: var(--muted) !important; font-style: italic; }
.site-footer__bottom{ padding-block:1.5rem; }


/* ---- mobile need-card placement fix (arrow stole column 2 from the label) ---- */
@media (max-width: 54.99em) {
  .need-card__label{ grid-column: 2; grid-row: 1; }
  .need-card__blurb{ grid-row: 2; }
  .need-card__go{ grid-column: 3; grid-row: 1 / 3; }
}


/* ---- Supplement cluster & content blocks ---- */
.pledge{ border:1.5px solid var(--accent); border-left-width:5px; border-radius:14px; padding:1.3rem 1.4rem; margin-block:1.6rem; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.pledge p{ margin:0; font-size:1.02rem; line-height:1.65; }
.pledge__sign{ margin-top:.7rem !important; font-weight:600; color: var(--primary); font-size:.92rem !important; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-block:1.4rem; border:1px solid var(--line); border-radius:12px; }
.data-table{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:560px; }
.data-table th, .data-table td{ padding:.7rem .85rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); line-height:1.5; }
.data-table thead th{ background: var(--surface2); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--muted); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td{ border-bottom:0; }
.data-table tbody th{ font-weight:600; }
.article-fig{ margin-block:1.5rem; }
.article-fig img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--line); background: var(--surface2); }
.article-fig figcaption{ font-size:.8rem; color: var(--muted); margin-top:.5rem; line-height:1.5; }
.article-faq{ margin-block:2rem; }
.faq-item{ border:1px solid var(--line); border-radius:12px; margin-bottom:.6rem; background: var(--surface); }
.faq-item summary{ cursor:pointer; padding:.95rem 1.1rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:.8rem; min-height:48px; }
.faq-item summary::after{ content:"+"; font-size:1.3rem; color: var(--accent); flex:none; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item__a{ padding:0 1.1rem 1rem; color: var(--muted); }
.related-reading{ margin-block:2rem; padding:1.3rem 1.4rem; background: var(--surface2); border-radius:14px; border:1px solid var(--line); }
.related-reading h2{ font-size:1.05rem; margin-bottom:.8rem; }
.related-reading ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.related-reading a{ display:flex; align-items:center; gap:.55rem; color: var(--primary); font-weight:600; font-size:.95rem; min-height:34px; }
.related-reading a .icon{ width:1rem; height:1rem; flex:none; }
.section--svc-reading .related-reading{ margin-block:0; }

/* ---- printable sheet ---- */
.sheet{ max-width:760px; margin-inline:auto; }
.sheet .data-table{ min-width:0; font-size:.85rem; }
.sheet-foot{ display:flex; align-items:center; gap:1.2rem; margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.sheet-foot img{ width:92px; height:92px; flex:none; }
.sheet-foot p{ font-size:.82rem; color: var(--muted); margin:0; line-height:1.55; }
.print-btn{ margin-block:1rem; }
@media print {
  .utility-bar, .site-header, .mobile-bar, .site-footer, .cta-band, .print-btn, .breadcrumb, .section--cta { display:none !important; }
  body{ background:#fff !important; color:#000 !important; font-size:11pt; }
  .section{ padding-block:.4cm !important; }
  .sheet .table-wrap{ border:none; }
  .data-table th, .data-table td{ padding:.35rem .5rem; }
  a{ text-decoration:none; color:#000; }
  @page{ margin:1.4cm; }
}