/* ==========================================================================
   Grigoryants CPA — site stylesheet (v2, light / rose-gold redesign)
   One file, no preprocessor. Shared by every page.
   CSP note: the site has no inline styles; every visual rule lives here.

   Contents
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Accessibility helpers (skip link, sr-only, focus)
   5.  Layout primitives (container, section, grids, split)
   6.  Buttons, chips & links
   7.  Header & navigation
   8.  Home: hero
   9.  Home: credential strip & contact strip
   10. Home: why us
   11. (retired: service icons now .svc__icon, section 23)
   12. CTA panel
   13. Figure caption (About preview / media split retired)
   14. Contact section, details list & form
   15. Inner pages: page header, prose, map
   16. Services page (v2)
   17. Footer
   18. Utilities
   19. Responsive breakpoints (768 / 1024 / 1280)
   20. Reduced motion
   21. Print
   22. Home flow pass
   23. Inner pages flow pass
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/* Contrast (WCAG 2.x), computed:
   --ink #2b2d31 on #fff 13.79 | --ink-2 #4a4c52 on #fff 8.58, on --blush-2 7.34
   --muted #66676c on --blush 5.22, on --blush-2 4.82
   --copper #a2633c: white text on it 4.79 (buttons); as text on #fff 4.79
   --copper-dk #8f5633: text on #fff 5.92, on --blush 5.48, on --blush-2 5.06; white on it 5.92
   Footer (#2b2d31): #fff 13.79 | --on-dark-2 #c9cacd 8.42 | --on-dark-3 #a3a5aa 5.60 | --rose #d8a080 6.08 */
:root {
  color-scheme: light;

  --ink:        #2b2d31;   /* headings, nav, footer background */
  --ink-2:      #4a4c52;   /* body text */
  --muted:      #66676c;   /* secondary text */
  --rose:       #d8a080;   /* logo rose-gold: rules, decoration, text on dark */
  --rose-mid:   #b5734a;   /* decorative strokes on light */
  --copper:     #a2633c;   /* primary button fill, icons, focus ring */
  --copper-dk:  #8f5633;   /* rose-gold text on light, button hover */
  --blush:      #fbf5f1;   /* light section background */
  --blush-2:    #f7ebe3;   /* tints: icon circles, offset shapes */
  --blush-3:    #efd9ca;   /* deeper blush for shapes */
  --bg:         #ffffff;
  --line:       #ece4de;   /* hairlines */
  --field:      #e5ddd6;   /* form control border */
  --on-dark:    #ffffff;
  --on-dark-2:  #c9cacd;
  --on-dark-3:  #a3a5aa;
  --success:    #2e7d4f;
  --error:      #b3261e;

  /* legacy aliases (kept so older class names still resolve) */
  --accent-ink: var(--copper-dk);
  --rose-dk:    var(--copper);
  --rose-lt:    var(--blush-2);
  --bg-soft:    var(--blush);
  --bg-warm:    var(--blush);

  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --max-w: 1160px;
  --pad-h: 20px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(43, 45, 49, .04), 0 6px 20px rgba(143, 86, 51, .06);
  --shadow: 0 2px 4px rgba(43, 45, 49, .04), 0 14px 36px rgba(143, 86, 51, .09);
  --shadow-lg: 0 4px 8px rgba(43, 45, 49, .05), 0 24px 56px rgba(143, 86, 51, .14);
  --ease: .25s ease;

  --section-y: 64px;       /* 96px from 1024px up */
  --header-h: 72px;
}

/* 2. Reset & base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.7;
  font-weight: 400;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }

/* 3. Typography ------------------------------------------------------------ */
h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.375rem, 1.6rem + 3vw, 3.5rem); line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.25rem); line-height: 1.18; }
h3 { font-size: 1.25rem; line-height: 1.3; }
h4 { font-size: 1.0625rem; }

p + p { margin-top: 1em; }
strong, b { font-weight: 700; color: var(--ink); }

a { color: var(--copper-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--ease); }
a:hover { color: var(--ink); }

/* Short rose-gold rule under section headings */
.rule::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 20px;
  border-radius: 2px;
  background: var(--rose-mid);
}
.text-center .rule::after, .rule.rule--center::after { margin-left: auto; margin-right: auto; }

/* 4. Accessibility helpers ------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--on-dark);
  font-weight: 700;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top var(--ease);
}
.skip-link:focus { top: 0; color: var(--on-dark); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible { outline-color: var(--rose); }

main:focus { outline: none; }

/* 5. Layout primitives ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--max-w) + var(--pad-h) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-h);
}

.section { padding-block: var(--section-y); }
.section--soft, .section--warm { background: var(--blush); }

.section-head { max-width: 820px; margin-bottom: 48px; }
.section-head p { margin-top: 20px; color: var(--muted); }
.section-head.text-center { margin-inline: auto; }

.split { display: grid; gap: 32px; align-items: start; }

/* 6. Buttons, chips & links ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 30px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Rose-gold foil fill (tones sampled from the logo sphere). Layered so the surface reads as
   shifting colour, not a single fade: a vertical rose-gold metal base (--btn-base), two
   asymmetric rose-pink tints, a soft diagonal near-white light band, a faint second glint and a
   top-left sheen. Hover adds one white "catch the light" sweep (::before, under the label via
   isolation + z-index -1). Text is charcoal --ink at 700 weight (white fails on the base).
   --ink contrast (alpha-composited; every overlay only lightens, so the bare base is the floor):
   lightest = stripe peak over #f3d1b0 (#faebdc) 11.77:1, +sheen 12.17:1, +hover sweep 12.96:1;
   darkest = bare base #c98a6c 4.82:1 (rendered min 4.92:1). Hover darkest #ce926f 5.23:1.
   Border #a8693f is the edge only, never behind text. */
.btn--primary {
  --btn-base: linear-gradient(180deg, #f3d1b0 0%, #e9b592 34%, #da9f80 58%, #c98a6c 86%, #d5a088 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #da9f80;
  background-image:
    radial-gradient(120% 160% at 82% -20%, rgba(255, 244, 236, .42) 0%, rgba(255, 244, 236, 0) 55%),
    linear-gradient(248deg, rgba(255, 248, 245, 0) 27%, rgba(255, 246, 242, .2) 35%, rgba(255, 253, 251, .58) 41%, rgba(255, 234, 230, .26) 46%, rgba(255, 248, 245, 0) 54%),
    linear-gradient(248deg, rgba(255, 242, 240, 0) 64%, rgba(255, 242, 240, .32) 69%, rgba(255, 242, 240, 0) 74%),
    radial-gradient(42% 120% at 16% 22%, rgba(246, 196, 190, .62) 0%, rgba(246, 196, 190, 0) 100%),
    radial-gradient(36% 110% at 91% 88%, rgba(240, 182, 176, .5) 0%, rgba(240, 182, 176, 0) 100%),
    var(--btn-base);
  border: 1px solid #a8693f;
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(122, 70, 40, .16), 0 6px 16px rgba(176, 108, 84, .24);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 252, 250, .6) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-110%);
}
.btn--primary svg { color: inherit; }
.btn--primary:hover {
  --btn-base: linear-gradient(180deg, #f7dabe 0%, #eebf9e 34%, #dea78a 58%, #ce926f 86%, #daa88c 100%);
  background-color: #dea78a;
  border-color: #a8693f;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(122, 70, 40, .16), 0 10px 24px rgba(176, 108, 84, .32);
}
.btn--primary:hover::before {
  transform: translateX(110%);
  transition: transform 700ms cubic-bezier(.4, 0, .2, 1);
}
.btn--primary:active { box-shadow: inset 0 1px 2px rgba(122, 70, 40, .25), 0 3px 8px rgba(176, 108, 84, .22); }

.btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

/* Header call button: copper outline that fills on hover */
.btn--call { background: transparent; border-color: var(--copper); color: var(--ink-2); }
.btn--call:hover { background: var(--copper); border-color: var(--copper); color: #fff; }

.btn--sm { min-height: 44px; padding: 9px 20px; font-size: .9375rem; }

.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .65; cursor: progress; transform: none; }
.btn--primary[disabled], .btn--primary[aria-disabled="true"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Arrow text link ("Learn more", "Read Olga's story") */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--copper-dk);
  text-decoration: none;
}
.link-arrow::after {
  content: "\2192";
  transition: transform var(--ease);
}
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover::after { transform: translateX(4px); }

/* 7. Header & navigation --------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(43, 45, 49, .06); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.site-header .wm { flex: none; font-size: 7.5px; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--ink);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--ease), background-color var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  padding: 8px var(--pad-h) 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 32px rgba(43, 45, 49, .08);
}
.site-nav.is-open { display: block; }

.nav-list { display: flex; flex-direction: column; }
.nav-list a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
}
.nav-list a:hover,
.nav-list a[aria-current="page"] { color: var(--copper-dk); }

.nav-cta { margin-top: 20px; }
.nav-cta .btn { width: 100%; }

/* 8. Home: hero ------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--blush) 100%);
}
.hero__inner {
  display: grid;
  gap: 8px;
  align-items: center;
  padding-block: 32px 56px;
}
.hero__content { position: relative; z-index: 1; }
.hero__content h1 { max-width: 14em; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
.hero__sub {
  max-width: 34em;
  margin-top: 22px;
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin-top: 34px;
}

/* Landscape signing photo; frame-free full-bleed layout lives in section 22. */
.hero__media { position: relative; }
.hero__media img { width: 100%; background: #fff; }

/* 9. Home: credential strip & contact strip -------------------------------- */
.cred-strip {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 18px;
}
.cred-strip__list {
  display: grid;
  gap: 4px;
}
.cred-strip__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.cred-strip__item::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4c52' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.25 2.25 2.25 4.75-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.contact-strip { background: var(--blush); }
.contact-strip__list { display: grid; gap: 0; }
.contact-strip__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.contact-strip__item:last-child { border-bottom: 0; }
.contact-strip__label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-strip__value {
  display: block;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
a.contact-strip__value:hover { color: var(--copper-dk); text-decoration: underline; }

/* Round icon badge (contact strip, contact list) */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.icon-badge svg { width: 20px; height: 20px; stroke-width: 1.75; }

/* 10. Home: why us --------------------------------------------------------- */
.why__head h2 { max-width: 8.1em; width: fit-content; }
.why__head h2.rule::after { width: 62%; }
.why__body p { max-width: 58ch; color: var(--ink-2); }

/* 11. (retired) Service card icon: replaced by .svc__icon in section 23 --- */

/* 12. CTA panel ------------------------------------------------------------ */
/* A rounded charcoal panel inside the container, on a white page. */
.cta-band { padding-block: calc(var(--section-y) * .75) calc(var(--section-y) * .4); background: #fff; }
.cta-band + .section { padding-top: calc(var(--section-y) * .5); }
.cta-band__inner {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 28px;
  align-items: center;
  padding: 40px 28px;
  border-radius: 20px;
  background: var(--ink);
  color: var(--on-dark-2);
}
/* .container sets padding-inline; restore panel padding and keep it inset */
.container.cta-band__inner {
  width: calc(100% - var(--pad-h) * 2);
  max-width: var(--max-w);
  padding-inline: 28px;
}
.cta-band__inner::before {
  content: "";
  position: absolute;
  top: -55%;
  right: -12%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 160, 128, .28), rgba(216, 160, 128, 0) 68%);
  pointer-events: none;
}
.cta-band__inner::after {
  content: "";
  position: absolute;
  bottom: -190px;
  right: -60px;
  width: 280px;
  height: 280px;
  border: 1.5px solid rgba(216, 160, 128, .35);
  border-radius: 50%;
  pointer-events: none;
}
.cta-band__inner > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--on-dark); font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); max-width: 22em; }
.cta-band p { margin-top: 14px; font-size: 1.125rem; color: var(--on-dark-2); max-width: 44em; }

/* 13. Figure caption (the media-split + rose-gold outline block is retired) */
.figure-caption { margin-top: 14px; font-size: .9375rem; color: var(--muted); }

/* 14. Contact section, details list & form -------------------------------- */
.contact-grid { display: grid; gap: 40px; }

.contact-list { display: grid; gap: 22px; }
.contact-list__item { display: flex; gap: 16px; align-items: center; }
.contact-list__label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-list__value { display: block; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; line-height: 1.5; }
a.contact-list__value { text-decoration: none; }
a.contact-list__value:hover { color: var(--copper-dk); text-decoration: underline; }

.form-card {
  padding: 28px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.form-card h3 { margin-bottom: 22px; font-size: 1.5rem; }

.form-grid { display: grid; gap: 18px; }

.field label,
.field .field__label {
  display: block;
  margin-bottom: 7px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink);
}
.field .req { color: var(--copper-dk); }

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--field);
  border-radius: 10px;
  transition: border-color var(--ease), box-shadow var(--ease), background-color var(--ease);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #d3bfb0; }
.field textarea { min-height: 136px; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%238f5633' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.field input::placeholder,
.field textarea::placeholder { color: #8a8b90; opacity: 1; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 4px rgba(216, 160, 128, .4);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--error); }

.field-error {
  margin-top: 6px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--error);
}
.field-error:empty { display: none; }

.field--check { display: flex; gap: 12px; align-items: flex-start; }
.field--check input {
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 3px 0 0;
  padding: 0;
  accent-color: var(--copper);
}
.field--check label { margin: 0; font-weight: 400; font-size: .9375rem; color: var(--ink-2); }

.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note { margin-top: 14px; font-size: .875rem; color: var(--muted); text-align: center; }
.form-note a { color: var(--copper-dk); }

.form-alert {
  padding: 14px 16px;
  border: 1px solid var(--error);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: #fdf1f0;
  color: var(--error);
  font-weight: 600;
  font-size: .9375rem;
}

.form-success {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px 20px;
  border: 1px solid #b9dcc6;
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
  background: #f0f8f3;
  color: #1f5636;
  font-weight: 600;
}
.form-success svg { flex: none; width: 26px; height: 26px; color: var(--success); }
.form-success:focus { outline: none; }
.form-success:focus-visible { outline: 3px solid var(--success); outline-offset: 3px; }

/* 15. Inner pages: page header, prose, map -------------------------------- */
/* Compact light header: breadcrumb, H1, one-line intro, thin rose-gold rule */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: 28px 32px;
  background:
    radial-gradient(520px 260px at 92% 0%, rgba(216, 160, 128, .18), rgba(216, 160, 128, 0) 70%),
    var(--blush);
}
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rose-mid) 0%, var(--rose) 55%, rgba(216, 160, 128, 0) 100%);
}
.page-hero h1 {
  position: relative;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
  line-height: 1.15;
}
.page-hero__sub {
  position: relative;
  max-width: 66em;
  margin-top: 10px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.breadcrumb { position: relative; margin-bottom: 8px; font-size: .875rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--rose-mid); }
.breadcrumb a { color: var(--copper-dk); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--muted); }

/* Long-form copy */
.prose { max-width: 720px; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2em; margin-bottom: .2em; font-size: clamp(1.5rem, 1.25rem + .9vw, 1.875rem); }
.prose h3 { margin-top: 1.6em; margin-bottom: .1em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose ul li::marker { color: var(--rose-mid); }
.prose a:not(.btn) { color: var(--copper-dk); }
.prose a:not(.btn):hover { color: var(--ink); }
.prose blockquote {
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--rose);
  color: var(--ink);
  font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }


.map-embed {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--blush);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 16. Services page (v2) --------------------------------------------------- */
/* Header carries the jump links; each service is a two-column block (text left,
   "What's included" checklist right); blocks alternate white / blush. The open
   (unboxed) flow treatment and the light closing CTA band live in section 23.
   Stacks to one column below 1024px. */
.page-hero__jump { position: relative; margin-top: 22px; }

.svc { padding-block: calc(var(--section-y) * .75); background: #fff; }
.svc--soft { background: var(--blush); }
.page-hero + .svc { padding-top: calc(var(--section-y) * .6); }

.svc__grid { display: grid; gap: 32px; align-items: start; }

.svc__head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.svc__head h2 { margin: 0; font-size: 1.75rem; line-height: 1.2; }

.svc__intro p { max-width: 60ch; }

/* Checklist: small rose-gold check icons; 1 column on phones, 2 from 768px */
.checklist { display: grid; gap: 14px 32px; list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: .9688rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.checklist__icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 4px;
  border-radius: 50%;
  background: var(--blush-2);
  color: var(--copper);
}

.svc__cta { font-size: .9688rem; }
.svc__link { display: inline-block; margin-top: 10px; }     /* inline so the arrow follows a wrapped label */
.svc__link::after { display: inline-block; margin-left: 8px; }

@media (min-width: 768px) {
  .checklist { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .svc__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
}


/* 17. Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--on-dark-2);
  font-size: 1rem;
}
.site-footer a { color: var(--on-dark-2); text-decoration: none; transition: color var(--ease); }
.site-footer a:hover { color: var(--rose); }

.footer-main {
  display: grid;
  gap: 40px;
  padding-block: 64px 48px;
}
.footer-brand .wm { font-size: 9px; }
.footer-tagline { margin-top: 20px; max-width: 26em; color: var(--on-dark-2); }

.footer-heading {
  margin-bottom: 18px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose);
}
.footer-list { display: grid; gap: 12px; }
.footer-list a { display: inline-block; padding-block: 2px; }

.social { display: flex; gap: 12px; margin-top: 26px; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: var(--on-dark);
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.social a:hover { background: var(--rose); border-color: var(--rose); color: var(--ink); }
.social svg { width: 18px; height: 18px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 24px 32px;
  font-size: .875rem;
  color: var(--on-dark-3);
}
.footer-bottom a { color: var(--on-dark-3); }
.footer-bottom__inner { display: grid; gap: 10px; }
.footer-bottom__inner p + p { margin-top: 0; }
.footer-bottom__row { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-disclaimer { max-width: 60em; color: var(--on-dark-3); }

/* 18. Utilities ------------------------------------------------------------ */
.text-center { text-align: center; }
.mt-1 { margin-top: 12px !important; }
.mt-2 { margin-top: 24px !important; }
.mt-3 { margin-top: 40px !important; }

/* 19. Responsive breakpoints ---------------------------------------------- */
/* Base styles target 375-390px phones. */

@media (max-width: 400px) {
  .btn { white-space: normal; padding-inline: 22px; }
  .hero__actions .btn { width: 100%; }
}

/* >= 768px: tablets */
@media (min-width: 768px) {
  :root { --pad-h: 32px; }


  .cred-strip__list { grid-template-columns: repeat(2, 1fr); gap: 4px 32px; }

  .contact-strip__list { grid-template-columns: repeat(3, 1fr); }
  .contact-strip__item { padding: 26px 24px; border-bottom: 0; border-left: 1px solid var(--line); }
  .contact-strip__item:first-child { border-left: 0; padding-left: 0; }

  .cta-band__inner, .container.cta-band__inner { padding: 48px 48px; }

  .form-card { padding: 40px 36px; }
  .form-grid--2 { grid-template-columns: 1fr 1fr; gap: 20px; }
  .form-grid--2 .field--full { grid-column: 1 / -1; }

  .footer-main { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-bottom__inner { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }

  .page-hero { padding-block: 32px 36px; }
}

/* >= 1024px: desktop */
@media (min-width: 1024px) {
  :root { --section-y: 96px; --header-h: 84px; }

  .nav-toggle { display: none; }
  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav-list { flex-direction: row; gap: 4px; }
  .nav-list a {
    position: relative;
    padding: 10px 14px;
    border: 0;
    font-size: 1rem;
  }
  .nav-list a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--rose);
    transform: scaleX(0);
    transition: transform var(--ease);
  }
  .nav-list a:hover::after,
  .nav-list a[aria-current="page"]::after { transform: scaleX(1); }
  .nav-list a[aria-current="page"] { color: var(--ink); }
  .nav-cta { margin-top: 0; }
  .nav-cta .btn { width: auto; }

  .hero__sub { font-size: 1.25rem; }

  .cred-strip { padding-block: 22px; }
  .cred-strip__list { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .cred-strip__item { padding-block: 2px; font-size: .875rem; }

  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; }
  .why .split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; }

  .cta-band__inner, .container.cta-band__inner { grid-template-columns: 1fr auto; gap: 48px; padding: 56px 64px; }

  .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .form-card { padding: 44px 44px 40px; }

  .footer-main { grid-template-columns: 1.6fr 1fr 1fr; gap: 64px; padding-block: 80px 56px; }

  .page-hero { padding-block: 32px 36px; }
}

/* >= 1280px: wide desktop */
@media (min-width: 1280px) {
  .nav-list { gap: 8px; }
}

/* 20. Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover { transform: none; }
  .btn--primary::before { display: none; }
}

/* 21. Print ---------------------------------------------------------------- */
@media print {
  :root { --section-y: 20px; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .site-header { position: static; border: 0; }
  .site-nav, .nav-toggle, .skip-link, .btn-row, .hero__actions, .cta-band, .form-card, .social, .map-embed, .hero__media, .page-hero__jump { display: none !important; }
  .hero, .page-hero, .site-footer, .section--dark { background: #fff !important; color: #000 !important; }
  .hero h1, .page-hero h1, .site-footer a, .footer-heading { color: #000 !important; }
  .footer-brand .wm { display: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  a { color: #000; }
}

/* Match the CTA band button to the hero "Schedule a Consultation" button */
@media (min-width: 768px) {
  .hero__actions .btn--primary, .cta-band .btn { min-width: 282px; }
}

/* 22. Home flow pass ------------------------------------------------------- */
/* Owner feedback: Home read "a bit plain" next to the old WordPress site. This pass
   borrows that site's principles in our palette: full-bleed photos with no frames, a
   large airy H1 with light body type, one rose-gold accent word per H2, open (unboxed)
   service items, soft blush background shapes and asymmetric text/photo layouts.
   Everything is scoped to Home via main.home-flow or Home-only section classes.
   Photo bleeds: --bleed is the distance from the container's content edge to the
   viewport edge; every bleeding section clips with overflow: hidden so the document
   never scrolls sideways (100vw includes a classic scrollbar). */
.home-flow { --bleed: var(--pad-h); }
@media (min-width: 1224px) {
  .home-flow { --bleed: calc((100vw - var(--max-w)) / 2); }
}

/* Accent word inside H2s (copper-dk: 5.92 on white, 5.48 on --blush) */
.accent { color: var(--copper-dk); }

/* Thinner, shorter copper rule under Home headings */
.home-flow .rule::after,
.home-flow .why__head h2.rule::after {
  width: 40px;
  height: 2px;
  margin-top: 18px;
  border-radius: 1px;
  background: var(--copper);
}

/* Hero: white, soft blush blob top-left, text left, photo bleeding off the right edge */
.home-flow .hero { background: #fff; isolation: isolate; }
.home-flow .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -220px;
  left: -240px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--blush-2) 0%, var(--blush-2) 68%, rgba(247, 235, 227, 0) 100%);
  pointer-events: none;
}
.home-flow .hero__inner { gap: 32px; padding-block: 16px 64px; }
.home-flow .hero__content h1 {
  max-width: none;
  font-size: clamp(2rem, 1rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
}
.home-flow .hero__sub {
  max-width: 34em;
  margin-top: 28px;
  font-size: 1.125rem;            /* 18px */
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
}
.home-flow .hero__actions { margin-top: 40px; }
.home-flow .hero__media {
  order: -1;
  justify-self: stretch;
  width: auto;
  max-width: none;
  margin: 8px calc(var(--bleed) * -1) 0 0;
}
.home-flow .hero__media img {
  height: clamp(240px, 62vw, 420px);
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: none;
}

/* Credential & contact strips: hairlines at half strength, lighter values, bare icons */
.home-flow .cred-strip { border-color: rgba(236, 228, 222, .5); }
.home-flow .cred-strip__item { font-weight: 500; }
.home-flow .cred-strip__item::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2633c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.25 2.25 2.25 4.75-5'/%3E%3C/svg%3E");
}
.home-flow .contact-strip__item { border-color: rgba(236, 228, 222, .5); }
.home-flow .contact-strip__value { font-weight: 500; }
.home-flow .contact-strip .icon-badge,
.contact-flow .icon-badge {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--copper);
}
.home-flow .contact-strip .icon-badge svg,
.contact-flow .icon-badge svg { width: 24px; height: 24px; stroke-width: 1.5; }

/* Services: open grid, no cards; faint logo-sphere watermark bottom-right */
.services-flow { position: relative; overflow: hidden; isolation: isolate; }
.services-flow::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -110px;
  bottom: -130px;
  width: 520px;
  height: 520px;
  background: url("../img/logo-mark.png") center / contain no-repeat;
  opacity: .06;
  pointer-events: none;
}
.svc-open { display: grid; gap: 48px; }
.svc-open__item { display: flex; flex-direction: column; align-items: flex-start; }
.svc-open__icon { display: block; width: 32px; height: 32px; margin-bottom: 22px; color: var(--copper); }
.svc-open__icon svg { width: 32px; height: 32px; stroke-width: 1.5; }
.svc-open__item h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.svc-open__item h3::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-top: 14px;
  background: var(--copper);
}
.svc-open__item p { margin-top: 16px; font-size: 1rem; font-weight: 300; line-height: 1.7; color: var(--ink-2); }
.svc-open__item .link-arrow { margin-top: auto; padding-top: 20px; font-size: .9375rem; }

/* CTA: full-width pale band (no panel), logo watermark half-clipped on the right */
.cta-band--flow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: 72px;
  background: linear-gradient(100deg, var(--blush-2) 0%, #fff 78%);
}
.cta-band--flow + .section { padding-top: var(--section-y); }
.cta-band--flow .cta-band__inner,
.cta-band--flow .container.cta-band__inner {
  overflow: visible;
  width: 100%;
  max-width: calc(var(--max-w) + var(--pad-h) * 2);
  padding: 0 var(--pad-h);
  border-radius: 0;
  background: none;
  color: var(--ink-2);
}
.cta-band--flow .cta-band__inner::before,
.cta-band--flow .cta-band__inner::after { content: none; }
.cta-band--flow h2 { max-width: 20em; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); color: var(--ink); }
.cta-band--flow p { max-width: 40em; margin-top: 16px; font-size: 1.125rem; font-weight: 300; color: var(--ink-2); }
.cta-band--flow :focus-visible { outline-color: var(--copper); }

/* Meet Olga: text left, portrait bleeding off the right edge (stacks above on phones) */
.meet { position: relative; overflow: hidden; isolation: isolate; }
.meet::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -120px;
  top: 50%;
  width: 820px;
  height: 820px;
  transform: translateY(-50%);
  background: url("../img/logo-mark.png") center / contain no-repeat;
  opacity: .12;
  pointer-events: none;
}
.meet__inner { position: relative; z-index: 1; }
.meet__inner { display: grid; gap: 40px; align-items: center; }
.meet__media { order: -1; margin-inline: calc(var(--pad-h) * -1); }
.meet__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: 520px;
  object-fit: cover;
  object-position: 50% 22%;
}
.meet__body h2 { margin-bottom: 26px; }
.meet__body p { max-width: 60ch; }
.meet__body .link-arrow { margin-top: 28px; }

/* Contact: airy details column, faint blush shape bottom-left (form card stays boxed) */
.contact-flow { position: relative; overflow: hidden; isolation: isolate; }
.contact-flow::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -280px;
  bottom: -320px;
  width: 820px;
  height: 820px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--blush-2) 0%, var(--blush-2) 45%, rgba(247, 235, 227, 0) 100%);
  pointer-events: none;
}
.contact-flow .contact-list { gap: 30px; }
.contact-flow .contact-list__item { align-items: flex-start; }
.contact-flow .contact-list__label {
  margin-bottom: 4px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--copper-dk);
}
.contact-flow .contact-list__value { font-size: 1.0625rem; font-weight: 300; color: var(--ink); }

@media (min-width: 768px) {
  .svc-open { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; }
  .home-flow .hero__media img { height: 420px; }
}

@media (min-width: 1024px) {
  .cta-band--flow { padding-block: 96px; }

  .home-flow .hero__inner {
    grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
    gap: 56px;
    min-height: 0;
    padding-block: 72px 80px;
  }
  .home-flow .hero__media { order: 0; margin: 0 calc(var(--bleed) * -1) 0 0; }
  .home-flow .hero__media img { height: 560px; }
  .home-flow .hero__sub { font-size: 1.125rem; }

  .svc-open { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 48px; }

  .meet__inner { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 80px; }
  .meet__media { order: 0; margin: 0 calc(var(--bleed) * -1) 0 0; }
  .meet__media img {
    height: 520px;
    max-height: none;
    aspect-ratio: auto;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
}

/* 23. Inner pages flow pass ------------------------------------------------ */
/* Carries the approved Home flow style (section 22) onto Services, About, Contact,
   Privacy and 404. Scoped to main.page-flow. Same principles: airy H1 with one
   rose-gold accent word, light body type, nothing boxed except the form card, bare
   32px rose-gold line icons, soft blush shapes, photos that bleed to a viewport edge
   with square corners on the bleeding side, thin 40 x 2 copper rules.
   --bleed mirrors .home-flow: container content edge to viewport edge. */
.page-flow { --bleed: var(--pad-h); }
@media (min-width: 1224px) {
  .page-flow { --bleed: calc((100vw - var(--max-w)) / 2); }
}

/* Thin copper rule under headings (same as Home) */
.page-flow .rule::after {
  width: 40px;
  height: 2px;
  margin-top: 18px;
  border-radius: 1px;
  background: var(--copper);
}

/* Light body copy (form text keeps its own weights) */
.page-flow .svc p,
.page-flow .story__body p,
.page-flow .how-grid__item p { font-weight: 300; }
.page-flow .svc strong { font-weight: 600; }

/* --- Page header: white, soft blush blob top-left, large airy H1 ------------ */
.page-flow .page-hero {
  isolation: isolate;
  padding-block: 32px 56px;
  background: #fff;
}
.page-flow .page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -260px;
  left: -260px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--blush-2) 0%, var(--blush-2) 62%, rgba(247, 235, 227, 0) 100%);
  pointer-events: none;
}
.page-flow .breadcrumb { margin-bottom: 20px; }
.page-flow .page-hero h1 {
  max-width: 16em;
  font-size: clamp(2.25rem, 1rem + 3vw, 3.5rem);   /* 56px from ~1440 */
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.page-flow .page-hero__sub {
  max-width: 40em;
  margin-top: 24px;
  font-size: 1.125rem;            /* 18px */
  font-weight: 300;
  line-height: 1.7;
}

/* Services jump links: plain rose-gold text links, 2 columns on phones,
   one row with thin dividers from 1024px */
.page-flow .page-hero__jump { margin-top: 32px; }
.jump-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jump-links__link {
  display: inline-block;
  padding-block: 8px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--copper-dk);
  text-decoration: none;
}
.jump-links__link:hover { color: var(--ink); text-decoration: underline; }

/* --- Services: open blocks, no card -------------------------------------- */
.page-flow .svc {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: 36px;
}
.page-flow .page-hero + .svc { padding-top: 40px; }
.page-flow .svc__head { display: block; margin-bottom: 20px; }
.svc__icon { display: block; width: 32px; height: 32px; margin-bottom: 14px; color: var(--copper); }
.svc__icon svg { width: 32px; height: 32px; stroke-width: 1.5; }
.page-flow .svc__head h2 { font-size: clamp(1.625rem, 1.25rem + 1.1vw, 2rem); line-height: 1.2; }
.page-flow .svc__head h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 18px;
  border-radius: 1px;
  background: var(--copper);
}
.page-flow .svc__intro p { max-width: 60ch; font-size: 1.0625rem; line-height: 1.7; }
.page-flow .svc__intro strong { color: var(--ink); }

.svc__included h3 {
  margin-bottom: 24px;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Checklist sitting directly on the section: bare rose-gold check, light text */
.page-flow .checklist { gap: 10px 40px; }
.page-flow .checklist li {
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
}
.page-flow .checklist__icon {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  padding: 0;
  border-radius: 0;
  background: none;
  stroke-width: 1.75;
}

/* Per-service prompt + link: plain text, no strip */
.svc__foot { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.svc__foot .svc__cta { margin: 0; }
@media (min-width: 1024px) { .svc__foot { flex-wrap: nowrap; } .svc__foot .svc__link { white-space: nowrap; flex: none; } }
.page-flow .svc__cta { font-size: 1rem; }

/* Rhythm: one soft blush shape (Business Accounting), one watermark (IRS) */
.svc--blob::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -180px;
  right: -300px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--blush-2) 0%, var(--blush-2) 50%, rgba(247, 235, 227, 0) 100%);
  pointer-events: none;
}
.svc--mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -180px;
  bottom: -220px;
  width: 560px;
  height: 560px;
  background: url("../img/logo-mark.png") center / contain no-repeat;
  opacity: .08;
  pointer-events: none;
}

/* Light CTA bands on inner pages (Home's .cta-band--flow); About adds a text link */
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
}

/* --- About: story (portrait bleeds off the LEFT edge) --------------------- */
.story { position: relative; overflow: hidden; isolation: isolate; }
.story::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -180px;
  top: 0;
  width: 600px;
  height: 600px;
  background: url("../img/logo-mark.png") center / contain no-repeat;
  opacity: .12;
  pointer-events: none;
}
.story__inner { display: grid; gap: 40px; align-items: center; }
.story__media { margin-inline: calc(var(--pad-h) * -1); }
.story__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: 520px;
  object-fit: cover;
  object-position: 50% 22%;
}
.story__body h2 { margin-bottom: 26px; }
.story__body p { max-width: 60ch; }

/* --- About: credentials (checklist + certificate, rounded with soft depth) -- */
.creds__inner { display: grid; gap: 48px; align-items: center; }
.creds__body h2 { margin-bottom: 32px; }
.page-flow .creds__list li { font-size: 1.0625rem; }
.page-flow .figure-caption { font-weight: 300; color: var(--ink-2); }

/* --- About: how I work (open 2 x 2 grid, bare icons) ---------------------- */
.how__inner { display: grid; gap: 40px; }
.how-grid { display: grid; gap: 40px; }
.how-grid__item { display: flex; flex-direction: column; align-items: flex-start; }
.how-grid__icon { display: block; width: 32px; height: 32px; margin-bottom: 20px; color: var(--copper); }
.how-grid__icon svg { width: 32px; height: 32px; }
.page-flow .how-grid__item p { max-width: 34ch; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }

/* --- Contact: details column reuses .contact-flow (section 22); map unboxed -- */
.page-flow .map-embed {
  border: 0;
  box-shadow: var(--shadow);
}
.map-flow .figure-caption { margin-top: 20px; }
/* blush shape bottom-left, kept inside the section so it fades out instead of being cut */
.page-flow .contact-flow::before { top: 22%; bottom: auto; left: -320px; width: 700px; height: 700px; }

/* --- Privacy / 404: light long-form copy ---------------------------------- */
/* 404: the header is the whole page, so give it room */
.page-flow .page-hero:only-child { padding-block: 72px 96px; }
.page-flow .prose { max-width: 68ch; font-size: 1.0625rem; }
.page-flow .prose p,
.page-flow .prose li { font-weight: 400; }

@media (min-width: 768px) {
  .jump-links { grid-template-columns: repeat(3, max-content); gap: 4px 40px; }
  .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; }
  .page-flow .creds__list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .page-flow .page-hero { padding-block: 40px 80px; }
  .page-flow .page-hero h1 { font-size: 3.5rem; }
  .page-flow .page-hero:only-child { padding-block: 120px 144px; }

  /* Services header goes asymmetric: title + intro left, the six jump links as a
     quiet vertical list on the right behind one thin rose-gold divider */
  .page-hero--services .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 96px;
  }
  .page-hero--services .container > * { grid-column: 1; }
  .page-flow .page-hero--services .page-hero__jump {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    margin-top: 0;
  }
  .page-flow .jump-links {          /* .page-flow beats ul[class] { padding: 0 } */
    display: block;
    padding-left: 28px;
    border-left: 1px solid var(--blush-3);
  }
  .jump-links__link { padding-block: 6px; }

  .story::after { top: 50%; left: -140px; width: 820px; height: 820px; transform: translateY(-50%); }

  .page-flow .svc { padding-block: 40px; }
  .page-flow .page-hero + .svc { padding-top: 48px; }
  .page-flow .svc__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; }
  .svc__included { padding-top: 125px; }      /* h3 lines up with the "Who it's for" paragraph (icon 32+22, H2 ~38, rule 20, head gap 28) */

  .story__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 50%); gap: 88px; }
  .story__media { margin: 0 0 0 calc(var(--bleed) * -1); }
  .story__media img {
    height: 560px;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  .creds__inner { grid-template-columns: minmax(0, 1fr); }

  .how__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; }
  .how-grid { gap: 64px 56px; }
  .page-flow .map-embed { aspect-ratio: 2 / 1; }
}

/* 1024-1279: the checklist column is too narrow for two columns */
@media (min-width: 1024px) and (max-width: 1279px) {
  .page-flow .svc__grid { gap: 64px; }
  .page-flow .svc__included .checklist { grid-template-columns: 1fr; }
}

/* Credentials: slim band */
.page-flow .creds { padding-block: 40px; }
.page-flow .creds__body h2 { margin-bottom: 20px; }
.page-flow .creds__list { gap: 8px 40px; }
@media (min-width: 1024px) {
  .page-flow .creds { padding-block: 44px; }
  .page-flow .creds__inner { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 64px; align-items: start; }
  .page-flow .creds__body { display: contents; }
  .page-flow .creds__body h2 { margin-bottom: 0; }
}
.page-flow .creds__cols { display: grid; gap: 8px 40px; }
.page-flow .creds__cols .creds__list { grid-template-columns: 1fr; }
@media (min-width: 768px) { .page-flow .creds__cols { grid-template-columns: 1fr 1fr; } }

/* Wordmark "A: Classic" (logo mark + set type) -------------------------------- */
.wm{display:inline-flex;align-items:center;gap:1.4em;font-family:var(--font);font-size:10px;text-decoration:none;color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.wm__mark{height:6.4em;width:auto;display:block;flex:none}
.wm__text{display:flex;flex-direction:column;align-items:flex-start}
.wm__name,.wm__sub{display:block;white-space:nowrap;margin:0}
.wm-a .wm__name{font-weight:700;font-size:2.2em;letter-spacing:.08em;line-height:1;color:var(--ink)}
.wm-a .wm__sub{font-weight:500;font-size:1em;letter-spacing:.2em;line-height:1;margin-top:.75em;padding-left:.05em;color:var(--copper-dk)}
.wm--dark.wm-a .wm__name{color:#fff}
.wm--dark.wm-a .wm__sub{color:var(--rose)}
.wm:hover{text-decoration:none}
@media (min-width: 768px) { .site-header .wm { font-size: 9px; } }
@media (min-width: 1024px) { .site-header .wm { font-size: 10px; } }
@media (min-width: 768px) and (max-width: 1023px) { .footer-brand .wm { font-size: 7px; } }