/* ═══════════════════════════════════════════════════
   TOKENS. Palette unchanged from mockup B.
   ═══════════════════════════════════════════════════ */
:root {
  --navy:      #0A2540;
  --deep-teal: #085041;
  --teal:      #1D9E75;
  --lt-teal:   #5DCAA5;
  --mint:      #9FE1CB;
  --cloud:     #E1F5EE;
  --cream:     #F7F5F0;
  --off-white: #FDFEFE;
  --ink:       #0A2540;
  --muted:     #5E6E7D;

  --rule:      rgba(10, 37, 64, 0.16);
  --rule-lt:   rgba(93, 202, 165, 0.22);

  --fd: 'Libre Baskerville', Georgia, serif;
  --fb: 'Cabin', system-ui, sans-serif;
  --fm: 'Source Code Pro', 'Courier New', monospace;

  /* rhythm: deliberately uneven, not one padding everywhere */
  --py-lg: clamp(96px, 12vw, 156px);
  --py:    clamp(76px, 9vw, 118px);
  --py-sm: clamp(52px, 6vw, 78px);
  --gut:   clamp(20px, 4vw, 60px);

  /* motion: ease-out only, no bounce, no elastic */
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --e-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --t-fast:  150ms;   /* high-frequency: hover, focus, links   */
  --t-mid:   260ms;   /* state changes on larger surfaces      */
  --t-enter: 620ms;   /* first-sight entrances only            */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Anchor targets must clear the 74px sticky nav. Without this the browser
   scrolls the target flush to the viewport top and the nav sits on top of it,
   which reads as the link jumping to the wrong place. */
[id] { scroll-margin-top: 100px; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--fb);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  font-size: clamp(16px, 1.7vw, 18px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--lt-teal); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--off-white); color: var(--navy);
  padding: 12px 20px; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

/* ═══════════════════════════════════════════════════
   MOTION SYSTEM
   Enter: opacity + 10px rise + 6px blur, ease-out, 620ms (Jakub)
   Hover: 150ms, transform/colour only (Emil)
   Reveal: IntersectionObserver, one class toggle (Jhey, grounded)

   Everything below is gated on .js, which an inline head script sets
   before first paint. No JS, no hidden content: the page renders
   complete and static. Scroll-driven CSS timelines were tried first
   and are genuinely inert here, five sections need overflow:hidden
   for the watermark marks, which makes them the nearest scroll
   container and leaves every ViewTimeline inactive.
   ponytail: 12 lines of IO beats a CSS-only system that can hide the
   page. Revisit if overflow:hidden ever leaves this stylesheet.
   ═══════════════════════════════════════════════════ */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to   { opacity: 1; transform: none;             filter: blur(0);   }
}
@keyframes unveil {
  from { opacity: 0; clip-path: inset(0 0 22% 0); transform: scale(1.02); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);   transform: none;        }
}

@media (prefers-reduced-motion: no-preference) {
  /* Above the fold: time-based and staged, no scroll needed. */
  .stage > * {
    animation: rise var(--t-enter) var(--e-out) both;
    animation-delay: calc(var(--d, 0) * 70ms + 60ms);
  }
  .stage-panel {
    animation: unveil 820ms var(--e-out) both;
    animation-delay: 120ms;
  }
  /* The hero figure must NOT use unveil: its end state clip-path:inset(0)
     clips anything positioned outside the box, which is exactly what the
     offset teal block and the drop shadow are. */
  .hero-figure {
    animation: rise var(--t-enter) var(--e-out) both;
    animation-delay: 180ms;
  }

  /* Below the fold: revealed once, on entry. Never re-animates. */
  .js .rv, .js .rv-sm, .js .rv-panel {
    transition: opacity var(--t-enter) var(--e-out),
                transform var(--t-enter) var(--e-out),
                filter var(--t-enter) var(--e-out),
                clip-path var(--t-enter) var(--e-out);
  }
  .js .rv    { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  .js .rv-sm { opacity: 0; transform: translateY(6px);  filter: blur(4px); }
  .js .rv-panel {
    opacity: 0; transform: scale(1.02); clip-path: inset(0 0 22% 0);
    transition-duration: 820ms;
  }
  .js .rv.in, .js .rv-sm.in {
    opacity: 1; transform: none; filter: blur(0);
  }
  .js .rv-panel.in {
    opacity: 1; transform: none; clip-path: inset(0 0 0 0);
  }

  .js .steps-line {
    transform: scaleX(0);
    transition: transform 900ms var(--e-out);
  }
  .js .steps-line.in { transform: scaleX(1); }
}

/* Reading progress. Decorative: absent without JS, which is correct. */
.nav-progress { transform: scaleX(var(--p, 0)); }

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

/* ═══════════════════════════════════════════════════
   ANNOUNCEMENT
   ═══════════════════════════════════════════════════ */
.ann {
  background: var(--deep-teal);
  color: var(--mint);
  text-align: center;
  padding: 11px 20px;
  font-family: var(--fm);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
}
.ann strong { color: var(--off-white); font-weight: 600; }

/* ═══════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  padding: 0 var(--gut);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 74px; gap: 24px;
}
.nav-logo { height: 40px; width: auto; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a {
  position: relative;
  font-size: 0.87rem; font-weight: 500;
  color: var(--lt-teal);
  letter-spacing: 0.03em;
  padding: 6px 0;
  transition: color var(--t-fast) var(--e-quart);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--teal);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--e-quart);
}
.nav-links a:hover { color: var(--off-white); }
.nav-links a:hover::after { transform: scaleX(1); }

.btn-nav {
  background: var(--teal); color: var(--navy);
  padding: 11px 22px; border-radius: 4px;
  font-size: 0.87rem; font-weight: 700; letter-spacing: 0.04em;
  font-family: var(--fb); white-space: nowrap;
  transition: background var(--t-fast) var(--e-quart),
              transform var(--t-fast) var(--e-quart);
}
.btn-nav:hover { background: var(--lt-teal); transform: translateY(-1px); }
.nav-btn-sm { display: none; }
.btn-nav:active { transform: translateY(0); }

.nav-progress {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--teal);
  transform-origin: left;
}


/* ═══════════════════════════════════════════════════
   MOBILE MENU
   Full screen, bottom-weighted so the targets sit in the thumb arc.
   Motion: Emil (nav is high-frequency, so it must feel instant) with a
   Jakub stagger on the items. Opens in 180ms, closes in 130ms because exits
   should be quicker and quieter than entrances.
   ═══════════════════════════════════════════════════ */
/* The nav creates its own stacking context at z-index 100, so a z-index on
   the toggle alone cannot lift it above the 200 overlay. The whole bar has to
   rise, which also keeps the logo visible over the menu. */
.nav.nav-open { z-index: 210; }
.nav.nav-open .btn-nav { display: none; }   /* the menu has its own CTA */

.nav-toggle {
  display: none;
  /* flex:0 0 48px, not width:48px. As a flex child it shrinks to ~33px,
     under the 44px minimum touch target. */
  flex: 0 0 48px; width: 48px; height: 48px;
  margin-right: -10px;                      /* optical alignment to the gutter */
  background: none; border: 0; padding: 0; cursor: pointer;
  position: relative;
}
.nav-toggle-bar {
  display: block; width: 26px; height: 2px; margin: 0 auto;
  background: var(--off-white); border-radius: 2px;
  transition: transform 150ms var(--e-quart), opacity 100ms linear;
}
.nav-toggle-bar + .nav-toggle-bar { margin-top: 7px; }
.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--navy);
  display: flex; flex-direction: column;
  padding: 96px var(--gut) max(28px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
.mm-wm {
  position: absolute; right: -22%; top: 50%; transform: translateY(-50%);
  width: 78%; aspect-ratio: 1; color: var(--navy); opacity: 0.09;
  pointer-events: none;
}
.mm-nav { margin-top: auto; position: relative; z-index: 1; }   /* bottom-weighted */
.mm-nav ul { list-style: none; margin: 0; padding: 0; }
.mm-nav li { border-bottom: 1px solid var(--rule-lt); }
.mm-nav li:first-child { border-top: 1px solid var(--rule-lt); }
.mm-nav a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; padding: 10px 0;         /* generous thumb target */
  font-family: var(--fd); font-size: clamp(26px, 7.5vw, 38px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--off-white);
}
.mm-nav a::after {
  content: '\2192'; font-family: var(--fb); font-size: 0.5em;
  color: var(--teal); opacity: 0; transform: translateX(-6px);
  transition: opacity 150ms var(--e-quart), transform 150ms var(--e-quart);
}
.mm-nav a:hover::after, .mm-nav a:focus-visible::after { opacity: 1; transform: none; }
.mm-nav a[aria-current="page"] { color: var(--lt-teal); }
.mm-foot { margin-top: 30px; position: relative; z-index: 1; }
.mm-foot .btn-primary { display: block; text-align: center; font-size: 1.05rem; padding: 19px 32px; }
.mm-meta {
  margin-top: 18px; text-align: center;
  font-family: var(--fm); font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--lt-teal);
}

@media (prefers-reduced-motion: no-preference) {
  .mobile-menu { animation: mm-in 180ms var(--e-out) both; }
  .mobile-menu.closing { animation: mm-out 130ms var(--e-quart) both; }
  .mobile-menu.closing .mm-nav li, .mobile-menu.closing .mm-foot { animation: none; }
  .mm-nav li, .mm-foot {
    animation: mm-item 260ms var(--e-out) both;
    animation-delay: calc(var(--i, 0) * 40ms + 60ms);
  }
}
@keyframes mm-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mm-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mm-item { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Locks the page behind the overlay without the iOS scroll-to-top jump. */
body.nav-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════
   HERO. Asymmetric, hard-edged. No wave dividers anywhere.
   ═══════════════════════════════════════════════════ */
.hero { background: var(--navy); position: relative; overflow: hidden;
  padding: clamp(52px,6vw,86px) 0 clamp(58px,7vw,96px); }

/* Floats on the section's right edge, vertically centred, bleeding off.
   Sits behind the figure so it reads as ground rather than decoration. */
.hero-wm {
  position: absolute; right: -9%; top: 50%; transform: translateY(-50%);
  width: min(44%, 640px); aspect-ratio: 1; height: auto;
  color: var(--navy); opacity: 0.11; pointer-events: none; z-index: 0;
}
.hero-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: 1fr 430px;
  gap: clamp(32px,5vw,72px); align-items: center;
  position: relative; z-index: 2;
}
.hero-left { display: flex; flex-direction: column; }
.hero-eyebrow {
  font-family: var(--fm); font-size: 0.72rem; letter-spacing: 0.2em;
  color: var(--lt-teal); text-transform: uppercase; margin-bottom: 22px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.hero-eyebrow::before {
  content: ''; display: block; width: 34px; height: 2px;
  background: var(--teal); flex: 0 0 34px;
}
/* The middot lives on the location span so it disappears cleanly when the
   location drops to its own line. */
.eb-b::before { content: '\00b7'; margin-right: 12px; opacity: 0.65; }
.hero h1 {
  font-family: var(--fd); font-size: clamp(32px,3.9vw,55px); font-weight: 700;
  line-height: 1.05; letter-spacing: -0.028em; color: var(--off-white);
  margin-bottom: 20px;
}
.hero h1 em { font-style: italic; color: var(--teal); }
.hero-sub {
  color: var(--mint); font-size: clamp(15px,1.5vw,17px);
  line-height: 1.75; max-width: 44ch; margin-bottom: 30px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.trust-row { display: flex; gap: 8px; flex-wrap: wrap; }
.trust-pill {
  background: rgba(253, 254, 254, 0.06); border: 1px solid var(--rule-lt);
  color: var(--lt-teal); font-family: var(--fm); font-size: 0.7rem;
  letter-spacing: 0.1em; padding: 7px 14px; border-radius: 3px;
}

/* Teal block sits behind the portrait rather than around it, so the two
   overlap instead of one floating inside the other. */
.hero-figure { position: relative; }
.hero-block {
  position: absolute; right: -8%; top: -9%;
  width: 88%; height: 88%; background: var(--teal); border-radius: 4px;
}
.hero-photo {
  position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 4/5;
  object-fit: cover; object-position: center 25%; border-radius: 4px;
  display: block; box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.hero-name {
  position: relative; z-index: 2; background: var(--deep-teal);
  padding: 16px 22px; border-radius: 0 0 4px 4px;
}
.hero-name strong {
  display: block; font-family: var(--fd); font-size: 1.05rem;
  color: var(--off-white); letter-spacing: 0;
}
.hero-name span {
  font-family: var(--fm); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--mint);
}


/* Teal fill carries NAVY text (5:1). White on teal was 3.9:1. */
.btn-primary {
  background: var(--teal); color: var(--navy);
  padding: 15px 32px; border-radius: 4px;
  font-size: 0.97rem; font-weight: 700; letter-spacing: 0.04em;
  font-family: var(--fb); display: inline-block;
  transition: background var(--t-fast) var(--e-quart),
              transform var(--t-fast) var(--e-quart);
}
.btn-primary:hover { background: var(--lt-teal); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  border: 1px solid rgba(93, 202, 165, 0.45);
  color: var(--lt-teal);
  padding: 14px 28px; border-radius: 4px;
  font-size: 0.97rem; font-weight: 600; display: inline-block;
  transition: border-color var(--t-fast) var(--e-quart),
              color var(--t-fast) var(--e-quart),
              background var(--t-fast) var(--e-quart);
}
.btn-ghost:hover { border-color: var(--lt-teal); color: var(--navy); background: var(--lt-teal); }

/* ═══════════════════════════════════════════════════
   SECTION SCAFFOLD
   Seams are hard colour edges plus numbered rules, not waves.
   ═══════════════════════════════════════════════════ */
.sec { padding: var(--py) var(--gut); }
.sec-inner { max-width: 1240px; margin: 0 auto; }

.marker {
  display: flex; align-items: baseline; gap: 16px;
  border-top: 1px solid var(--rule);
  padding-top: 14px; margin-bottom: clamp(40px, 5vw, 64px);
  font-family: var(--fm); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}

.eyebrow {
  font-family: var(--fm); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ''; display: block; width: 26px; height: 2px; background: currentColor; }
.eyebrow-teal { color: var(--deep-teal); }
.eyebrow-mint { color: var(--mint); }
.eyebrow-lt   { color: var(--lt-teal); }

.sec-title {
  font-family: var(--fd);
  font-size: clamp(27px, 3.3vw, 46px);
  font-weight: 700; color: var(--navy);
  line-height: 1.14; letter-spacing: -0.022em;
  max-width: 18ch;
}
.sec-title-light { color: var(--off-white); }
.lede { color: var(--muted); font-size: 0.98rem; max-width: 62ch; line-height: 1.75; }

/* ═══════════════════════════════════════════════════
   PRINCIPLES. Editorial list, not a card grid.
   ═══════════════════════════════════════════════════ */
.principles { background: var(--cream); padding-bottom: var(--py-lg); }
.prin-head {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px;
  align-items: end; margin-bottom: clamp(48px, 6vw, 80px);
}
.prin-list { border-top: 1px solid var(--rule); }
.prin {
  display: grid; grid-template-columns: 92px 1fr 1.15fr;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(34px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.prin-num {
  font-family: var(--fd); font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700; color: var(--teal); line-height: 0.9;
  letter-spacing: -0.03em;
}
.prin h3 {
  font-family: var(--fd); font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 700; color: var(--navy); line-height: 1.26;
  letter-spacing: -0.015em;
}
.prin p { color: var(--muted); font-size: 0.95rem; line-height: 1.78; max-width: 56ch; }
.prin:first-child h3 { font-size: clamp(22px, 2.3vw, 30px); }

/* ═══════════════════════════════════════════════════
   WELCOME. Deep-teal drench.
   ═══════════════════════════════════════════════════ */
.welcome { background: var(--deep-teal); position: relative; overflow: hidden; padding-block: var(--py-lg); }
.welcome-wm {
  position: absolute; left: -14%; bottom: -34%;
  width: min(46%, 560px); aspect-ratio: 1; height: auto;
  color: var(--deep-teal); opacity: 0.09; pointer-events: none;
}
.welcome-inner {
  max-width: 1240px; margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 440px; gap: clamp(48px, 7vw, 92px); align-items: center;
}
.welcome-text h2 {
  font-family: var(--fd);
  font-size: clamp(27px, 3.1vw, 44px);
  font-weight: 700; color: var(--off-white);
  line-height: 1.14; letter-spacing: -0.022em; margin-bottom: 24px;
  max-width: 17ch;
}
.welcome-text p { color: var(--mint); margin-bottom: 18px; line-height: 1.78; font-size: 0.97rem; max-width: 60ch; }
.welcome-text p:last-of-type { margin-bottom: 36px; }
.welcome-photo { overflow: hidden; border-radius: 6px; }
.welcome-photo svg { width: 100%; }

.btn-white {
  background: var(--off-white); color: var(--deep-teal);
  padding: 15px 32px; border-radius: 4px;
  font-size: 0.97rem; font-weight: 700; letter-spacing: 0.03em;
  font-family: var(--fb); display: inline-block;
  transition: background var(--t-fast) var(--e-quart),
              transform var(--t-fast) var(--e-quart);
}
.btn-white:hover { background: var(--mint); transform: translateY(-2px); }
.btn-white:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════
   SERVICES. Alternating rows, hard corners.
   ═══════════════════════════════════════════════════ */
.services { background: var(--cream); padding-bottom: var(--py-lg); }
.svc-row {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
}
.svc-row:last-child { border-bottom: 1px solid var(--rule); }
.svc-row.flip .svc-photo { order: 2; }
.svc-photo {
  position: relative; min-height: 300px; overflow: hidden;
}
.svc-photo svg {
  width: 100%; height: 100%; position: absolute; top: 0; left: 0;
  transition: transform 520ms var(--e-out);
}
.svc-row:hover .svc-photo svg,
.svc-row:focus-within .svc-photo svg { transform: scale(1.035); }
.svc-content {
  background: var(--off-white);
  padding: clamp(36px, 4.5vw, 62px) clamp(28px, 4vw, 58px);
  display: flex; flex-direction: column; justify-content: center;
}
.svc-tag {
  font-family: var(--fm); font-size: 0.7rem; letter-spacing: 0.16em;
  color: var(--deep-teal); text-transform: uppercase; margin-bottom: 12px;
}
.svc-content h3 {
  font-family: var(--fd); font-size: clamp(20px, 2vw, 27px); font-weight: 700;
  color: var(--navy); margin-bottom: 14px; line-height: 1.2; letter-spacing: -0.02em;
}
.svc-content p { color: var(--muted); font-size: 0.94rem; line-height: 1.76; margin-bottom: 24px; max-width: 52ch; }
.svc-link {
  font-size: 0.8rem; font-weight: 600; color: var(--deep-teal);
  letter-spacing: 0.12em; text-transform: uppercase;
  font-family: var(--fm);
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
}
.svc-link .arw {
  display: inline-block;
  transition: transform var(--t-fast) var(--e-quart);
}
.svc-link:hover { color: var(--teal); }
.svc-link:hover .arw { transform: translateX(5px); }

/* ═══════════════════════════════════════════════════
   ABOUT. Navy, founder presence.
   ═══════════════════════════════════════════════════ */
.about { background: var(--navy); position: relative; overflow: hidden; padding-block: var(--py-lg); }
.about-wm {
  position: absolute; right: -12%; top: -30%;
  width: min(48%, 620px); aspect-ratio: 1; height: auto;
  color: var(--navy); opacity: 0.07; pointer-events: none;
}
.about-inner {
  max-width: 1240px; margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(40px, 5vw, 76px); align-items: center;
}
.about-text h2 {
  font-family: var(--fd);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 700; color: var(--off-white);
  line-height: 1.15; letter-spacing: -0.022em; margin-bottom: 24px; max-width: 20ch;
}
.about-text p { color: var(--mint); margin-bottom: 18px; line-height: 1.78; font-size: 0.97rem; max-width: 62ch; }
.about-creds { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
.cred {
  background: rgba(29, 158, 117, 0.14);
  border: 1px solid var(--rule-lt);
  color: var(--lt-teal);
  font-family: var(--fm); font-size: 0.7rem; letter-spacing: 0.1em;
  padding: 8px 16px; border-radius: 3px;
}
.about-photo { overflow: hidden; border-radius: 6px; align-self: center; }
.about-photo img {
  /* height:auto is load-bearing. The width/height attributes set a
     presentational height, and aspect-ratio is ignored unless height is auto. */
  width: 100%; height: auto; aspect-ratio: 4/5;
  object-fit: cover; object-position: center 30%; display: block;
}

/* ═══════════════════════════════════════════════════
   TESTIMONIALS. Quotes, not cards.
   ═══════════════════════════════════════════════════ */
.testimonials { background: var(--cloud); padding-block: var(--py); }
.testi-grid {
  display: grid; grid-template-columns: repeat(var(--testi-cols, 3), 1fr);
  gap: clamp(30px, 3.5vw, 52px);
}
.testi { position: relative; padding-top: 8px; }
.testi + .testi { border-left: 1px solid var(--rule); padding-left: clamp(36px, 5vw, 72px); }
.testi-star { color: var(--deep-teal); font-size: 0.82rem; letter-spacing: 4px; margin-bottom: 18px; }
.testi blockquote {
  font-family: var(--fd);
  font-size: clamp(16px, 1.45vw, 19px);
  color: var(--navy); line-height: 1.62; letter-spacing: -0.012em;
  margin-bottom: 26px;
}
.testi-note {
  margin-top: clamp(34px, 4vw, 52px); padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem; line-height: 1.7; color: var(--muted);
  max-width: 72ch;
}
.testi-byline {
  font-family: var(--fm); font-size: 0.72rem;
  letter-spacing: 0.14em; color: var(--muted);
}

/* ═══════════════════════════════════════════════════
   PROCESS. Connector line draws on reveal.
   ═══════════════════════════════════════════════════ */
.process { background: var(--navy); position: relative; overflow: hidden; padding-block: var(--py-lg); }
.process-inner { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }
.process h2 {
  font-family: var(--fd); font-size: clamp(27px, 3.3vw, 46px);
  font-weight: 700; color: var(--off-white); line-height: 1.14;
  letter-spacing: -0.022em; margin-bottom: clamp(50px, 6vw, 76px); max-width: 17ch;
}
.steps { position: relative; }
.steps-line {
  position: absolute; top: 26px; left: 12%; right: 12%; height: 1px;
  background: var(--rule-lt);
  transform-origin: left;
}
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; position: relative; }
.step { text-align: center; }
.step-dot {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy); border: 1px solid var(--teal);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px; position: relative; z-index: 1;
  transition: background var(--t-mid) var(--e-quart);
}
.step:hover .step-dot { background: var(--deep-teal); }
.step-num { font-family: var(--fm); font-size: 0.88rem; font-weight: 600; color: var(--teal); letter-spacing: 0.05em; }
.step h3 { font-family: var(--fd); font-size: 1.08rem; font-weight: 700; color: var(--off-white); margin-bottom: 10px; }
.step p { color: var(--mint); font-size: 0.89rem; line-height: 1.72; max-width: 30ch; margin: 0 auto; }

/* ═══════════════════════════════════════════════════
   TELEHEALTH. Teal drench, navy type (5:1), SVG glyphs not emoji.
   ═══════════════════════════════════════════════════ */
.telehealth { background: var(--teal); position: relative; overflow: hidden; padding-block: var(--py); }
.telehealth-wm {
  position: absolute; right: -18%; bottom: -32%;
  width: min(50%, 600px); aspect-ratio: 1; height: auto;
  color: var(--teal); opacity: 0.13; pointer-events: none;
}
.telehealth-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 92px); align-items: center;
  position: relative; z-index: 1;
}
.telehealth-text .eyebrow { color: var(--navy); opacity: 0.78; }
.telehealth-text h2 {
  font-family: var(--fd); font-size: clamp(27px, 3vw, 43px);
  font-weight: 700; color: var(--navy); line-height: 1.14;
  letter-spacing: -0.022em; margin-bottom: 22px; max-width: 15ch;
}
.telehealth-text p { color: var(--navy); opacity: 0.88; line-height: 1.78; margin-bottom: 36px; font-size: 0.97rem; max-width: 54ch; }
.tele-feats { display: grid; gap: 2px; background: rgba(10, 37, 64, 0.14); }
.tele-feat {
  background: var(--teal);
  padding: 22px 26px;
  display: flex; align-items: flex-start; gap: 18px;
}
.tele-feat svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px; }
.tele-feat strong {
  display: block; color: var(--navy);
  font-family: var(--fd); font-size: 0.98rem; font-weight: 700; margin-bottom: 2px;
}
.tele-feat span { color: var(--navy); opacity: 0.8; font-size: 0.87rem; }

.btn-navy {
  background: var(--navy); color: var(--off-white);
  padding: 15px 32px; border-radius: 4px;
  font-size: 0.97rem; font-weight: 700; letter-spacing: 0.03em;
  font-family: var(--fb); display: inline-block;
  transition: background var(--t-fast) var(--e-quart),
              transform var(--t-fast) var(--e-quart);
}
.btn-navy:hover { background: var(--deep-teal); transform: translateY(-2px); }
.btn-navy:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════
   INSURANCE
   ═══════════════════════════════════════════════════ */
.insurance { background: var(--cream); padding-block: var(--py-sm) var(--py); }
.insurance-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.insurance-inner .sec-title { max-width: 100%; margin: 0 auto 18px; }
.insurance-inner .lede { margin: 0 auto 40px; }
.ins-pills { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ins-pill {
  background: var(--off-white);
  border: 1px solid var(--rule);
  color: var(--navy); font-family: var(--fd);
  font-size: 0.93rem; font-weight: 700;
  padding: 13px 26px; border-radius: 100px;
  transition: border-color var(--t-fast) var(--e-quart),
              color var(--t-fast) var(--e-quart);
}
.ins-pill:hover { border-color: var(--teal); color: var(--deep-teal); }
.ins-note {
  margin-top: 30px;
  font-family: var(--fm); font-size: 0.72rem;
  letter-spacing: 0.12em; color: var(--muted);
}

/* ═══════════════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════════════ */
.cta-sec {
  background: var(--deep-teal); position: relative; overflow: hidden;
  padding: var(--py-lg) var(--gut);
}
.cta-wm {
  position: absolute; left: -13%; top: -28%;
  width: min(44%, 540px); aspect-ratio: 1; height: auto;
  color: var(--deep-teal); opacity: 0.10; pointer-events: none;
}
.cta-inner { max-width: 720px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.cta-inner .eyebrow { justify-content: center; color: var(--mint); }
.cta-inner h2 {
  font-family: var(--fd); font-style: italic;
  font-size: clamp(30px, 4.2vw, 58px);
  font-weight: 400; color: var(--off-white);
  line-height: 1.14; letter-spacing: -0.015em;
  margin-bottom: 20px;
}
.cta-inner p { color: var(--mint); font-size: 1rem; margin: 0 auto 40px; line-height: 1.7; max-width: 54ch; }
.btn-cta {
  background: var(--off-white); color: var(--deep-teal);
  padding: 17px 40px; border-radius: 4px;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.04em;
  font-family: var(--fb); display: inline-block;
  transition: background var(--t-fast) var(--e-quart),
              transform var(--t-fast) var(--e-quart);
}
.btn-cta:hover { background: var(--mint); transform: translateY(-2px); }
.btn-cta:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
footer {
  background: var(--navy);
  padding: var(--py-sm) var(--gut) 40px;
}
.footer-inner { max-width: 1240px; margin: 0 auto; }
.footer-top {
  display: grid; grid-template-columns: 300px 1fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 56px;
}
.footer-logo { height: 74px; width: auto; margin-bottom: 20px; }
.footer-tagline {
  font-family: var(--fm); font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--lt-teal); margin-bottom: 16px;
}
.footer-contact { color: #A8C4C0; font-size: 0.87rem; line-height: 1.85; }
.footer-contact a { color: var(--lt-teal); text-decoration: none; border-bottom: 1px solid rgba(93, 202, 165, 0.4); transition: color 0.2s ease; }
.footer-contact a:hover { color: var(--mint); border-bottom-color: var(--mint); }
.footer-col h4 {
  font-family: var(--fm); font-size: 0.68rem; letter-spacing: 0.18em;
  color: var(--lt-teal); text-transform: uppercase; margin-bottom: 18px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: #A8C4C0; font-size: 0.9rem;
  transition: color var(--t-fast) var(--e-quart);
}
.footer-col a:hover { color: var(--off-white); }
.fb-sep { padding: 0 8px; opacity: 0.55; }
.fb-credit a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(147, 179, 175, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.fb-credit a:hover { color: var(--lt-teal); border-bottom-color: var(--lt-teal); }
.footer-bottom {
  border-top: 1px solid var(--rule-lt);
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--fm); font-size: 0.7rem;
  letter-spacing: 0.07em; color: #93B3AF;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero-block { display: none; }
  .hero-wm { right: -30%; opacity: 0.08; }
  .prin-head { grid-template-columns: 1fr; gap: 24px; }
  .prin { grid-template-columns: 64px 1fr; }
  .prin p { grid-column: 2; }
  .welcome-inner { grid-template-columns: 1fr; gap: 48px; }
  .about-inner { grid-template-columns: 1fr; }
  .about-photo { max-width: 380px; }
  .telehealth-inner { grid-template-columns: 1fr; gap: 44px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .testi-grid { grid-template-columns: 1fr; }
  .testi + .testi { border-left: 0; padding-left: 0; padding-top: 26px; border-top: 1px solid var(--rule); }
}
@media (max-width: 960px) {
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  /* "Book a Consultation" ate 47% of a 375px header and squeezed the logo to
     73px of its 131px natural width. On mobile it shortens to "Book"; the
     full CTA lives in the menu. */
  /* "TX & GA" was breaking across two lines. Move it to its own line as a
     unit, indented to clear the rule so it aligns under the text above. */
  /* gap:12px applies to rows too once this wraps, which stacked 12px of gap
     plus a margin on top of the line box. Row gap goes to zero and the line
     box does the spacing. */
  .hero-eyebrow { row-gap: 0; line-height: 1.35; }
  .eb-b { flex-basis: 100%; padding-left: 46px; margin-top: 0; }
  .eb-b::before { display: none; }
  .nav-btn-lg { display: none; }
  .nav-btn-sm { display: inline; }
  .btn-nav { padding: 10px 16px; font-size: 0.82rem; flex-shrink: 0; }
  .nav-inner { gap: 12px; }
  .svc-row { grid-template-columns: 1fr; }
  .svc-row.flip .svc-photo { order: 0; }
  .svc-photo { min-height: 230px; }
  .testi-grid { grid-template-columns: 1fr; }
  .testi + .testi { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 36px; }
  .steps-grid { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .steps-line { display: none; }
  /* Four centred lines on mobile. Inline on desktop, where the two-up split
     uses the width properly. */
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; line-height: 1.75; }
  .fb-l { display: block; }
  .fb-sep { display: none; }
}
@media (max-width: 520px) {
  .prin { grid-template-columns: 1fr; gap: 12px; }
  .prin p { grid-column: 1; }
  .steps-grid { grid-template-columns: 1fr; }
  /* Two columns, not one. Four stacked link lists made the footer taller than
     the page it sits under. */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .footer-col h4 { margin-bottom: 10px; }
  /* Footer links were 17px tall, under the 24px minimum touch target. Padding
     brings them to 27px and the row margin comes off in exchange, so the net
     cost is small against the 292px the two-column layout saves. */
  .footer-col li { margin-bottom: 0; }
  .footer-col a { display: block; padding: 5px 0; font-size: 0.86rem; }
}

/* ═══════════════════════════════════════════════════
   Added by the build. Not in the mockup.
   ═══════════════════════════════════════════════════ */
.page-head { background: var(--navy); padding: clamp(64px,7vw,104px) var(--gut) clamp(56px,6vw,88px); position: relative; overflow: hidden; }
.page-head-inner { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }
.page-head h1 { font-family: var(--fd); font-size: clamp(30px,3.8vw,52px); font-weight: 700; color: var(--off-white); line-height: 1.1; letter-spacing: -0.025em; max-width: 18ch; margin-bottom: 20px; }
.page-head .lede { color: var(--mint); font-size: clamp(15px,1.7vw,19px); max-width: 58ch; line-height: 1.7; }
.page-head-wm { position: absolute; right: -9%; top: 50%; transform: translateY(-50%); width: min(46%, 580px); aspect-ratio: 1; height: auto; color: var(--navy); opacity: 0.07; pointer-events: none; }

.prose-wrap { background: var(--cream); padding: clamp(56px,6vw,92px) var(--gut) clamp(72px,8vw,116px); }
.prose { max-width: 1240px; margin: 0 auto; }
.prose-cols { display: grid; grid-template-columns: 1fr 300px; gap: clamp(40px,5vw,80px); align-items: start; }
.prose article { max-width: 68ch; }
.prose h2 { font-family: var(--fd); font-size: clamp(21px,2.3vw,30px); font-weight: 700; color: var(--navy); line-height: 1.2; letter-spacing: -0.02em; margin: 44px 0 14px; padding-top: 22px; border-top: 1px solid var(--rule); }
.prose article > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-family: var(--fd); font-size: 1.12rem; font-weight: 700; color: var(--deep-teal); margin: 26px 0 8px; line-height: 1.3; }
.prose p { color: var(--muted); margin-bottom: 16px; line-height: 1.78; }
.prose p.note { font-size: 0.88rem; opacity: 0.85; font-style: italic; }
.prose p.post-cta { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule); font-weight: 600; color: var(--navy); }
.prose ul { margin: 0 0 18px 0; padding-left: 20px; color: var(--muted); }
.prose li { margin-bottom: 8px; line-height: 1.7; }
.prose li::marker { color: var(--teal); }
/* Body links only. Unscoped, this rule outranks .btn-primary (0,1,1 vs 0,1,0)
   and repaints buttons deep-teal on teal: 2.78:1, under AA. The exclusion sits
   in :where() so it stays weightless: a bare :not() would push this to (0,3,1)
   and start overriding .side-links a, underlining the sidebar links instead. */
.prose a:where(:not(.btn-primary):not(.btn-ghost)) { color: var(--deep-teal); text-decoration: underline; text-underline-offset: 3px; }
.prose a:where(:not(.btn-primary):not(.btn-ghost)):hover { color: var(--teal); }
.prose strong { color: var(--navy); }

.bio-intro { display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px,3vw,44px); align-items: start; margin-bottom: 8px; }
.bio-photo { overflow: hidden; border-radius: 6px; }
.bio-photo img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center 30%; display: block; }
.bio-text > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.bio-text > p:last-child { margin-bottom: 0; }

.side { position: sticky; top: 96px; }
.side-card { background: var(--off-white); border: 1px solid var(--rule); border-radius: 6px; padding: 26px 24px; }
.side-card h3 { font-family: var(--fd); font-size: 1.05rem; color: var(--navy); margin: 0 0 10px; line-height: 1.3; }
.side-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.65; margin-bottom: 16px; }
.side .side-links { list-style: none; margin: 18px 0 0; padding-left: 0; }
.side .side-links li { margin-bottom: 9px; }
.side .side-links li:last-child { margin-bottom: 0; }
.side-links a { color: var(--deep-teal); font-size: 0.9rem; text-decoration: none; }
.side-links a:hover { text-decoration: underline; }

/* Two audience paths on the home page. */
.paths { background: var(--cream); padding: clamp(56px,6vw,88px) var(--gut); }
.paths-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.path { background: var(--off-white); padding: clamp(32px,4vw,52px); display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; }
.path .svc-tag { margin-bottom: 12px; }
.path h2 { border-top: 0; padding-top: 0; font-family: var(--fd); font-size: clamp(21px,2.3vw,30px); font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.18; margin: 0 0 14px; text-wrap: nowrap; }
.path p { color: var(--muted); font-size: 0.95rem; line-height: 1.75; margin: 0 0 24px; }

/* Blog */
.post-list { max-width: 1240px; margin: 0 auto; border-top: 1px solid var(--rule); }
.post-item { display: grid; grid-template-columns: 150px 1fr; gap: clamp(20px,4vw,48px); padding: clamp(28px,3.5vw,42px) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.post-date { font-family: var(--fm); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--teal); text-transform: uppercase; padding-top: 5px; }
.post-item h2 { border-top: 0; padding-top: 0; margin-top: 0; font-family: var(--fd); font-size: clamp(19px,2vw,26px); font-weight: 700; color: var(--navy); line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 10px; }
.post-item h2 a { color: inherit; text-decoration: none; }
.post-item h2 a:hover { color: var(--deep-teal); }
.post-item p { color: var(--muted); font-size: 0.94rem; line-height: 1.72; max-width: 62ch; }
.post-empty { max-width: 1240px; margin: 0 auto; padding: 60px 0; color: var(--muted); font-family: var(--fd); font-size: 1.1rem; }
.post-nav { max-width: 1240px; margin: 48px auto 0; padding-top: 26px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.post-nav a { color: var(--deep-teal); font-family: var(--fm); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.post-nav a:hover { color: var(--teal); }
.post-meta { font-family: var(--fm); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--lt-teal); text-transform: uppercase; margin-bottom: 16px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,4vw,60px); }
.sp-card { background: var(--off-white); border: 1px solid var(--rule); border-radius: 6px; padding: clamp(24px,3vw,36px); }
.sp-steps { list-style: none; counter-reset: sp; margin: 0 0 26px; padding: 0; display: grid; gap: 16px; }
.sp-steps li { counter-increment: sp; position: relative; padding-left: 40px; color: var(--muted); font-size: 0.92rem; line-height: 1.65; }
.sp-steps li::before { content: counter(sp, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: var(--fm); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--teal); }
.sp-steps strong { display: block; color: var(--navy); font-family: var(--fd); font-weight: 400; font-size: 1rem; }
.sp-card .note { margin-top: 18px; color: var(--muted); font-size: 0.84rem; line-height: 1.6; }
.avail { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 26px; }
.avail-card { background: var(--off-white); border: 1px solid var(--rule); border-radius: 6px; padding: 18px 20px; }
.avail-card strong { display: block; font-family: var(--fd); color: var(--navy); font-size: 1rem; margin-bottom: 4px; }
.avail-card span { color: var(--muted); font-size: 0.86rem; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-family: var(--fm); font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--deep-teal); margin-bottom: 6px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 12px 14px; font-family: var(--fb); font-size: 0.95rem;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--off-white); color: var(--ink);
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
button.btn-primary { border: 0; cursor: pointer; font-family: var(--fb); }

.cred-table, .rate-card { margin: 22px 0 26px; border-top: 1px solid var(--rule); }
.cred-row, .rate-row { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.cred-k, .rate-k { font-family: var(--fm); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--teal); }
.cred-v, .rate-v { color: var(--navy); font-size: 0.95rem; }
.rate-v { font-family: var(--fd); font-weight: 700; }

.cta-wm { position: absolute; left: -10%; top: 50%; transform: translateY(-50%); width: min(46%, 580px); aspect-ratio: 1; height: auto; color: var(--deep-teal); opacity: 0.10; pointer-events: none; }

mark.todo { background: #F2D024; color: var(--navy); font-family: var(--fm); font-size: 0.76rem; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 3px; font-weight: 600; text-transform: uppercase; }

@media (max-width: 900px) {
  .prose-cols { grid-template-columns: 1fr; }
  .bio-intro { grid-template-columns: 1fr; }
  .bio-photo { max-width: 260px; }
  .side { position: static; }
  .paths-grid, .contact-grid, .avail { grid-template-columns: 1fr; }
  .post-item { grid-template-columns: 1fr; gap: 8px; }
  .cred-row, .rate-row { grid-template-columns: 1fr; gap: 4px; }
}