/* Core Nutrition — design system
   2026-09: re-skinned to Cici's own hand-built reference design (her "v52"
   mockup, /tmp/corenutrition-attachments/ref/cici-v52.css). She built this
   herself; the goal is for her to open the live site and recognize it as
   hers, so her tokens below are ported EXACTLY — hex-for-hex — rather than
   reinterpreted.

   Legacy token names (--accent, --primary, --ink, --bg, --border, --wrap,
   --gap, --radius, ...) are kept as ALIASES onto her tokens, unchanged in
   name, so the live theme-override system and every inner page (hero__*,
   split*, services, svc*, principles, plan__list, note, posts, post-card*,
   post*, cta*, footer__legal, trust*, .faq's inline <style>, etc.) keep
   working without being touched. Only the *values* moved to hers.

   Fonts: Jost (body/headings) + Playfair Display italic (.accent /
   .hl--serif) load via Google Fonts from src/chrome.js's FONT_HEAD. No
   self-hosted @font-face here — the old Fraunces/Inter subsets are gone. */

/* Self-hosted latin subsets of Cici's two brand faces (public/assets/fonts,
   scripts/build-images.py's fonts sibling — see /tmp fetch + fonttools
   pyftsubset + fonttools varLib.instancer notes in the perf PR). The Google
   Fonts CSS chain for Jost + Playfair Display was 100% of a 5.5s mobile LCP's
   render delay; these three files are preloaded from chrome.js's FONT_HEAD
   and load from our own origin instead. Material Symbols stays on Google
   Fonts (see FONT_HEAD) — only the two text faces moved here.
   jost-latin.woff2 is a variable font (wght 400-700); the italic files are
   pinned to the single static weight the design actually uses (Jost italic
   500 for .eyebrow-style emphasis, Playfair Display italic 400 for
   .accent/.hl--serif) so there's no unused variation range to ship. */
@font-face{font-family:'Jost';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/jost-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:italic;font-weight:500;font-display:swap;
  src:url(/assets/fonts/jost-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/playfair-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Material Symbols Rounded, subset to the icon names the site uses (the
   ICON_NAMES list in src/chrome.js; regenerate the woff2 from Google Fonts'
   icon_names= endpoint when an icon is added). Self-hosted because the
   Google Fonts request — even loaded non-blocking — cost 1.5s of FCP on
   mobile Lighthouse against the preview. font-display:block keeps the
   ligature text ("check_circle") from flashing before the glyph. */
@font-face{font-family:'Material Symbols Rounded';font-style:normal;font-weight:400;font-display:block;
  src:url(/assets/fonts/material-symbols-subset.woff2) format('woff2')}
.material-symbols-rounded{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;
  letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;
  direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}

:root{
  --charcoal:#333333;
  --charcoal-2:#4e4e49;
  --cream:#fffefb;
  --white:#ffffff;
  --mist:#f4f4f0;
  --soft-gray:#e9e8e9;
  --line:#deddd7;
  --chartreuse:#cbff00;
  --chartreuse-soft:#e7ff75;
  --maxw:1220px;
  --shadow:0 18px 55px rgba(35,35,35,.08);

  /* ---- legacy aliases — DO NOT remove; inner pages + theme overrides read these ---- */
  --accent:var(--chartreuse);
  --accent-deep:#b8e600;
  --primary:#1E5631;
  --primary-hover:#171717;
  --ink:var(--charcoal);
  --ink-soft:var(--charcoal-2);
  --ink-onDark:#ffffff;
  --ink-onDark-soft:#d9d9d3;
  --bg:var(--cream);
  --tint:var(--mist);
  --border:var(--line);
  --wrap:var(--maxw);
  --gap:92px;
  --radius:2px;

  /* ---- type ----------------------------------------------------------------
     The three type roles the design uses, as tokens, so a face can be changed
     from chat the same way a colour can (PUT /api/theme). A font-token override
     is only ever accepted from FONT_CHOICES in src/chrome.js — faces this site
     already self-hosts, plus stacks every device has — because nothing may be
     fetched from a font CDN at request time (see the FONT_HEAD note in
     src/chrome.js: the Google Fonts chain was 100% of a 5.5 s mobile LCP's
     render delay).

     A token holds the FAMILY, and each declaration below keeps the fallback
     tail it already had, rather than the token holding a whole stack.
     That is not tidiness — it is the only spelling that changes nothing.
     Jost is subset to a unicode-range that does not include U+2192, so the "→"
     in every .btn is already served by the NEXT family in that rule's list. Give
     .btn the body stack and that arrow moves from sans-serif to system-ui, and
     four buttons on /work-with-me get 1.9 px narrower. Same words, same face,
     different arrow. Keeping each tail literal keeps every rule's stack
     byte-for-byte what it was, and an override still replaces the family in all
     of them at once. (An override is a full stack, so it lands ahead of the
     tail and the tail becomes an unreachable last resort — which is correct:
     the customer asked for that font.)

     Keep these three last in this block and keep them brace-free: the token
     list the API offers is read straight out of this :root block. */
  --font-body:'Jost';
  --font-heading:'Jost';
  --font-accent:'Playfair Display';
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--charcoal);
  font-family:var(--font-body),system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}

h1,h2,h3,h4{font-family:var(--font-heading),system-ui,sans-serif;line-height:1.05;font-weight:500;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.3rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.5rem)}
h3{font-size:1.15rem;font-weight:600;letter-spacing:0}
h4{font-size:1rem;font-weight:600;letter-spacing:0}
p{margin:0 0 1.15em;line-height:1.68;color:var(--charcoal-2)}

/* Her italic-serif payoff accent. */
.accent{font-family:var(--font-accent),Georgia,serif;font-style:italic;font-weight:400}
.hl--serif{font-family:var(--font-accent),Georgia,serif;font-style:italic;font-weight:400}

.wrap{width:min(var(--maxw),calc(100% - 48px));margin-inline:auto}
.center{text-align:center}
.lede{font-size:1.1rem;color:var(--charcoal-2);max-width:62ch;line-height:1.68}
.center .lede,.lede.center{margin-inline:auto}

.eyebrow{margin:0 0 13px;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--charcoal-2);display:flex;align-items:center;gap:10px;font-family:var(--font-body),sans-serif}
.eyebrow:before{content:"";width:17px;height:2px;background:var(--chartreuse);display:inline-block;flex:0 0 auto}
.eyebrow--onDark{color:var(--ink-onDark)}
.eyebrow--onDark:before{background:var(--chartreuse)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:12px 18px;border-radius:2px}

.material-symbols-rounded{font-size:22px;line-height:1;vertical-align:middle}

.section{padding-block:var(--gap)}
.section-light{background:var(--white)}
.section-mist{background:var(--mist)}
.section--tint{background:var(--mist);border-block:1px solid var(--line)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:42px}
.section-head h2{font-size:clamp(32px,3.4vw,46px);font-weight:500;letter-spacing:-.02em;margin-bottom:0;max-width:690px}
.section-head p{max-width:390px;margin-bottom:0}

/* ---- highlight marker — her most recognizable Instagram treatment ---- */
.hl{background:var(--chartreuse);color:var(--charcoal);padding:.01em .18em .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.low-hl{background:linear-gradient(to bottom,transparent 54%,var(--chartreuse) 54%,var(--chartreuse) 86%,transparent 86%);padding:0 .14em 0;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.cta .hl,.trust .hl,.topbar .hl,.tagline-bar .hl{color:var(--charcoal)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:13px 24px;border:1px solid transparent;border-radius:var(--radius);font-family:var(--font-body),sans-serif;font-size:14px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:.2s ease;text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn-lime{background:var(--chartreuse);color:#171717}
.btn-lime:hover{background:#d7ff35}
.btn-dark{background:var(--charcoal);color:#fff}
.btn-dark:hover{background:#171717}
.btn-outline{border-color:var(--charcoal);background:transparent;color:var(--charcoal)}
.btn-outline:hover{background:var(--charcoal);color:#fff}
.text-link{font-weight:600;border-bottom:1.5px solid var(--charcoal);padding-bottom:2px}

/* Legacy button class names (used across every inner page + blog), re-skinned
   in her vocabulary: .btn--solid reads as her .btn-lime, .btn--outline as her
   .btn-outline, .btn--onDark as a chartreuse fill for dark sections. */
.btn--solid{background:var(--chartreuse);color:#171717;border-color:var(--chartreuse)}
.btn--solid:hover{background:#d7ff35;border-color:#d7ff35}
.nav__links a.btn--solid,.nav__mobile a.btn--solid{color:#171717;border-bottom:0}
.btn--outline{background:transparent;color:var(--charcoal);border-color:var(--charcoal)}
.btn--outline:hover{background:var(--charcoal);color:#fff}
.btn--onDark{background:var(--chartreuse);color:#171717;border-color:var(--chartreuse)}
.btn--onDark:hover{background:#d7ff35;border-color:#d7ff35}
.btn--lg{padding:16px 30px;min-height:54px;font-size:15px}

/* ---- tagline bar (above the header) ---- */
.tagline-bar{background:#262626;color:#efeee8;font-size:13px;text-align:center;letter-spacing:.03em}
.tagline-bar .wrap{padding:8px 0}
.tagline-bar .accent{color:var(--chartreuse)}
/* Static pages carry <div class="topbar"> instead — the Worker can't rewrite
   markup it doesn't own — so give it the identical look. */
.topbar{background:#262626;color:#efeee8;font-size:13px;text-align:center;letter-spacing:.03em}
.topbar__inner{padding:8px 0;min-height:0}
.topbar p{margin:0;color:#efeee8;font-weight:500}
.topbar .accent{color:var(--chartreuse)}

/* ---- header ---- */
/* The placeholder in every page is <header class="nav" data-cn-chrome="header">
   — we don't own that markup. chrome.js injects a second, nested <nav class="wrap nav">
   inside it (her original two-level site-header > nav structure); the .nav rule
   below applies harmlessly to both. */
.site-header,header.nav{position:sticky;top:0;z-index:50;background:rgba(255,254,251,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(222,221,215,.85)}
.nav{min-height:82px;display:flex;align-items:center;gap:34px}
.nav__inner{display:flex;align-items:center;gap:34px;min-height:82px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img,.brand__logo{width:190px;height:auto}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:27px;font-size:14px;font-weight:500}
.nav-links>a,.nav-item>button{position:relative;padding:29px 0;border:0;background:none;color:var(--charcoal);cursor:pointer}
.nav-links>a:after,.nav-item>button:after{content:"";position:absolute;left:0;bottom:20px;height:2px;width:0;background:var(--chartreuse);transition:width .18s ease}
.nav-links>a:hover:after,.nav-item>button:hover:after{width:100%}
.nav-item{position:relative}
.nav-item>button{font:inherit;display:flex;gap:5px;align-items:center}
.dropdown{display:none;position:absolute;left:-18px;top:65px;width:250px;padding:13px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);z-index:5}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown,.nav-item.open .dropdown{display:block}
.dropdown a{display:block;padding:10px 11px;font-size:13.5px}
.dropdown a:hover{background:var(--mist)}
.header-cta{margin-left:6px}
.menu-toggle{display:none;margin-left:auto;border:0;background:none;width:44px;height:44px;padding:10px;cursor:pointer}
.menu-toggle span{display:block;height:2px;background:var(--charcoal);margin:6px 0}
.mobile-panel{display:none;border-top:1px solid var(--line);background:var(--cream)}
.mobile-panel.open{display:block}
.mobile-panel .wrap{padding:18px 0 24px;display:grid;gap:4px}
.mobile-panel a{padding:10px 0;font-weight:500}
.mobile-panel a.btn{margin-top:10px}

/* ---- hero (shared shape across inner pages) ---- */
.hero{padding-block:clamp(56px,7vw,92px)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,76px);align-items:center}
.hero h1{margin-bottom:22px;text-wrap:balance}
.hero__intro{color:var(--charcoal-2);font-size:1.06rem}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero__legal{margin-top:24px;font-size:.86rem;color:var(--charcoal-2)}
.hero__media{margin:0}
.hero__media img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:50% 22%;border-radius:var(--radius)}

/* ---- trust strip: her light strip look, not a dark band ---- */
.trust{background:#fafaf7;color:var(--charcoal);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:26px}
.trust ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px}
.trust li{font-size:.82rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--charcoal)}
.trust__creds{margin:14px 0 0;text-align:center;font-size:.86rem;color:var(--charcoal-2)}

/* ---- split blocks (about, research-credentials, work-with-me) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,76px);align-items:center}
.split__media{margin:0}
.split--flip .split__media{order:-1}
.split__media img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:50% 22%;border-radius:var(--radius);max-height:640px}
.split h2{margin-bottom:20px;text-wrap:balance}
.split p{color:var(--charcoal-2)}

/* ---- services (work-with-me) ---- */
.services{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.svc{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.svc:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(22,22,22,.12);border-color:rgba(203,255,0,.9)}
.svc--feature{grid-column:1/-1;background:var(--mist);border-color:var(--accent-deep)}
.svc__meta{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--charcoal-2);margin-bottom:10px}
.svc h3{font-size:1.3rem;font-family:var(--font-heading),sans-serif;font-weight:500;margin-bottom:12px}
.svc p{color:var(--charcoal-2);font-size:.97rem;flex:1}
.svc .btn{align-self:flex-start;margin-top:8px}

/* ---- principles (about, areas-of-focus, research-credentials) ---- */
.principles{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.principles li{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.principles li:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(22,22,22,.12);border-color:rgba(203,255,0,.9)}
.principles .material-symbols-rounded{
  width:56px;height:56px;border-radius:50%;background:var(--chartreuse);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:24px;color:var(--charcoal);margin-bottom:14px;
}
.principles h3{margin-bottom:9px}
.principles p{margin:0;color:var(--charcoal-2);font-size:.95rem}

/* ---- signature plan (work-with-me) ---- */
.plan__list{list-style:none;margin:0 0 28px;padding:0}
.plan__list li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;color:var(--charcoal-2)}
.plan__list .material-symbols-rounded{color:var(--accent-deep);font-size:21px;flex:none;margin-top:3px}

/* ---- research note / callout ---- */
.note{border-left:4px solid var(--chartreuse);background:var(--white);border:1px solid var(--line);border-left-width:4px;padding:22px 26px;border-radius:0 var(--radius) var(--radius) 0}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--charcoal)}

/* ---- Learn: article index + article body ---- */
.posts{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,360px));justify-content:center;gap:26px}
.post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.post-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(22,22,22,.12);border-color:rgba(203,255,0,.9)}
.post-card img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 40%}
.post-card__body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.post-card h3{font-family:var(--font-heading),sans-serif;font-weight:500;font-size:1.2rem;margin-bottom:10px;text-wrap:balance}
.post-card p{color:var(--charcoal-2);font-size:.95rem;flex:1}
.post-card .link{margin-top:6px}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem;color:var(--charcoal);text-decoration:none;border-bottom:2px solid var(--chartreuse);padding-bottom:2px;align-self:flex-start}
.link:hover{color:var(--primary-hover)}
.link .material-symbols-rounded{font-size:18px}

.post{max-width:68ch}
.post h1{margin-bottom:14px;text-wrap:balance}
.post__meta{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--charcoal-2);margin-bottom:34px}
.post__draft{display:inline-block;background:var(--charcoal);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:99px;margin-bottom:22px}
.post__hero{margin:0 0 38px}
.post__hero img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 40%;border-radius:var(--radius)}
.post__body h2{font-size:clamp(1.45rem,2.4vw,1.85rem);margin:44px 0 16px}
.post__body h3{font-size:1.12rem;margin:32px 0 12px}
.post__body p{color:var(--charcoal-2)}
.post__body strong{color:var(--charcoal)}
.post__list{margin:0 0 1.3em;padding-left:1.25em}
.post__list li{color:var(--charcoal-2);padding:5px 0}
.post__body blockquote{margin:30px 0;border-left:4px solid var(--chartreuse);background:var(--mist);padding:20px 26px;border-radius:0 var(--radius) var(--radius) 0}
.post__body blockquote p:last-child{margin-bottom:0}
.post__body hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* ---- closing CTA over a photo: her dark charcoal band + chartreuse accents ---- */
.cta{position:relative;isolation:isolate;overflow:hidden}
.cta__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:-2}
.cta__scrim{position:absolute;inset:0;z-index:-1;background:rgba(45,45,43,.88)}
.cta__inner{padding-block:clamp(80px,9vw,124px);text-align:center;color:#fff;max-width:760px}
.cta h2{color:#fff;margin-bottom:16px;text-wrap:balance}
.cta p{color:#d9d9d3;font-size:1.08rem;margin-bottom:32px}
.cta .hero__actions{justify-content:center;margin-top:0}
/* Second CTA button on a photo scrim, outlined in white to read against the
   dark overlay (the lime/onDark button already carries its own outline). */
.cta .btn--lg:not(.btn--onDark){color:#fff;border-color:#fff}

/* ---- contact form ---- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label{font-size:13px;font-weight:600;color:var(--charcoal)}
.field input,.field textarea,.field select{border:1px solid var(--line);background:var(--cream);padding:13px 14px;border-radius:var(--radius);outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--charcoal)}
.form{max-width:640px}
.form__note{font-size:.86rem;color:var(--charcoal-2);margin-top:14px}

/* ---- footer ---- */
.footer{background:var(--charcoal);color:#d9d9d3;padding:58px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.2fr .85fr .85fr 1fr;gap:40px;padding-bottom:42px;border-bottom:1px solid #4a4a47}
.footer-logo{width:185px;filter:brightness(0) invert(1);opacity:.88;margin-bottom:15px}
.footer p{color:#aaa9a4;font-size:13.5px;max-width:33ch}
.footer h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#aaa9a4;margin-bottom:15px;font-weight:600}
.footer a{display:block;color:#deded8;margin-bottom:9px;font-size:14px}
.footer a:hover{color:var(--chartreuse)}
.footer__legal{padding:22px 0 0;border-top:0}
.footer__legal p{color:#aaa9a4;font-size:12.5px;max-width:70ch;margin:0 0 10px}
.footer__legal p:last-child{margin-bottom:0}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;color:#aaa9a4;font-size:12px}
.footer-bottom a{display:inline;color:#aaa9a4;margin:0;font-size:inherit}
.footer-bottom a:hover{color:var(--chartreuse)}

/* ---- small spacing/utility classes (replace one-off inline styles) ---- */
.mt-20{margin-top:20px}
.mt-36{margin-top:36px}
.mt-40{margin-top:40px}
.mt-44{margin-top:44px}
.mt-48{margin-top:48px}
.mt-52{margin-top:52px}
.visually-hidden-field{position:absolute;left:-9999px}
.wrap--narrow{max-width:820px}
.text-charcoal-2{color:var(--charcoal-2)}
.fs-small{font-size:.94rem}

/* ---- service-photo object-position (svc-01/03/04, shared by home + work-with-me) ---- */
.svc-photo-pos-01{object-position:center 56%}
.svc-photo-pos-03{object-position:center 48%}
.svc-photo-pos-04{object-position:center 52%}

/* ---- responsive: her three breakpoints ---- */
@media(max-width:1080px){
  .nav-links{gap:18px}
  .nav-links>a,.nav-item>button{font-size:13px}
  .brand img,.brand__logo{width:165px}
  .services{grid-template-columns:1fr 1fr}
}
@media(max-width:1000px){
  .nav-links,.header-cta{display:none}
  .menu-toggle{display:block}
  .hero__grid,.split{grid-template-columns:1fr;gap:44px}
  .split--flip .split__media{order:0}
  .hero__media img,.split__media img{aspect-ratio:4/5;max-height:none;object-position:50% 18%}
  .services,.principles{grid-template-columns:repeat(2,1fr);gap:22px}
  .posts{gap:22px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hero{padding-top:34px}
}
@media(max-width:640px){
  .wrap{width:min(100% - 30px,var(--maxw))}
  .tagline-bar,.topbar{font-size:12px}
  .nav{min-height:70px}
  .nav__inner{min-height:70px}
  .brand img,.brand__logo{width:158px}
  body{font-size:16px}
  .services,.principles,.posts{grid-template-columns:1fr}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
  .trust ul{gap:8px 18px}
  .trust li{font-size:.74rem}
  .section{padding-block:70px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
  .footer{padding-top:52px}
}

/* ---- V59 mobile/tablet pass (ported from her V60 reference): the chrome
   pieces of that pass — .nav / .brand img / .btn / .mobile-panel a / .wrap —
   at her own 900/620/380px breakpoints. The rest of that pass is home-page-
   only and lives in home.css instead. */
@media(max-width:900px){
  .wrap{width:min(var(--maxw),calc(100% - 40px))}
  .mobile-panel a,.btn{min-height:44px}
}
@media(max-width:620px){
  .wrap{width:min(var(--maxw),calc(100% - 32px))}
  .nav{min-height:68px}
  .brand img{width:154px}
}
@media(max-width:380px){
  .brand img{width:150px}
}
@media(hover:none) and (pointer:coarse){
  .btn:hover{transform:none}
  .btn,.mobile-panel a{-webkit-tap-highlight-color:transparent}
}