/* ============================================================================
   Michele Bastone — Styles (Visual Remediation: editorial executive personal brand)
   Static, mobile-first, WCAG 2.2 AA target. Content visible without JS.
   Editorial, warm, composed — NOT a card grid / SaaS dashboard / stretched template.
   ========================================================================== */

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
h1, h2, h3, p, .eyebrow { overflow-wrap: break-word; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, picture, svg { max-width: 100%; display: block; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--fw-head); line-height: var(--lh-tight); color: var(--navy); letter-spacing: -.015em; }
h2 { font-size: var(--fs-h2); }   /* locked section's .split__body h2 keeps --fs-h2 too — unchanged */
h3 { font-size: var(--fs-h3); }
p { max-width: 66ch; font-size: var(--fs-body); }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-600); }

/* ---- Accessibility ---- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 600; }
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section--compact { padding-block: var(--section-y-compact); }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--navy); color: var(--text-on-navy); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.eyebrow { font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-600); margin-bottom: .7rem; }
.section--navy .eyebrow { color: #9CC4F0; }
.lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 40ch; line-height: 1.55; }
.rule { width: 46px; height: 3px; background: var(--accent); border-radius: 2px; margin: 0 0 1.4rem; }

/* ---- Buttons (right-sized; editorial, not oversized pills) ---- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  font-family: var(--font-head); font-weight: 600; font-size: .96rem; line-height: 1;
  padding: .85rem 1.5rem; border-radius: 10px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  min-height: 50px; text-decoration: none; white-space: nowrap;
}
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 3px 12px rgba(74,144,226,.22); }
.btn--primary:hover { background: var(--accent-600); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(74,144,226,.3); }
.btn--secondary { background: transparent; color: var(--navy); border-color: var(--gray-200); }
.btn--secondary:hover { border-color: var(--accent); color: var(--accent-600); background: #fff; }
.section--navy .btn--secondary { color: #fff; border-color: rgba(255,255,255,.4); }
.section--navy .btn--secondary:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn--sm { min-height: 44px; padding: .65rem 1.15rem; font-size: .9rem; }
.link-arrow { font-family: var(--font-head); font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--accent-600); }
.link-arrow:hover { text-decoration: underline; }

/* ---- Header (controlled: ~76px, single brand lockup, quiet nav) ---- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.nav { display: flex; align-items: center; gap: 1rem; height: 76px; }
.nav__brand { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; }
.nav__brand img { height: 30px; width: auto; align-self: center; }
.nav__brand-name { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.12rem; letter-spacing: .04em; white-space: nowrap; }
.nav__spacer { flex: 1; }
.nav__desktop { display: none; align-items: center; gap: 1.7rem; }
.nav__link { font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--text-muted); text-decoration: none; padding: .3rem 0; position: relative; letter-spacing: .01em; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--navy); }
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--accent); border-radius: 2px; }
.nav__actions { display: none; align-items: center; gap: 1.2rem; }
.nav__login { font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--text-dim); text-decoration: none; letter-spacing: .02em; white-space: nowrap; }
.nav__login:hover { color: var(--navy); }
.nav__cta { min-height: 46px; padding: .6rem 1.35rem; font-size: .9rem; }

.nav__toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; padding: 0 11px; }
.nav__toggle span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile { display: none; position: fixed; inset: 76px 0 auto 0; background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow); padding: 1rem var(--gutter) 1.6rem; max-height: calc(100vh - 76px); overflow-y: auto; }
.nav__mobile[data-open="true"] { display: block; animation: slidedown var(--dur) var(--ease); }
.nav__mobile a { display: block; font-family: var(--font-head); font-weight: 600; color: var(--charcoal); text-decoration: none; padding: .85rem .25rem; border-bottom: 1px solid var(--gray-100); }
.nav__mobile a:hover { color: var(--navy); }
.nav__mobile .btn { width: 100%; margin-top: 1.1rem; }
.nav__mobile .nav__login { display: block; margin-top: .8rem; text-align: center; }
@keyframes slidedown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Base grids use a viewport-constrained single column (minmax(0,1fr)) so wide content wraps
   instead of blowing out the layout on mobile. Multi-column rules follow at breakpoints. */
.split, .trust-grid, .focus-split, .value-grid { grid-template-columns: minmax(0, 1fr); }

/* ---- Hero reel: cinematic portrait sequence (Direction A — full-bleed editorial) ----
   Full-browser-width, clean rectangle, no card/shadow/radius, no overlaid text or controls.
   Pure-CSS crossfade + near-imperceptible scale; works without JS; honors reduced-motion. */
/* Cinematic framed stage: dark navy matte, the FULL photograph shown via object-fit:contain
   (never cover, never zoom) so Michele's head, hair, shoulders + composition stay intact. */
.hero-reel { position: relative; width: 100%; overflow: hidden; background: #0d1b2a;
  height: clamp(400px, 115vw, 470px); }        /* mobile: content-driven, no horizontal overflow */
.hero-reel__img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center center; transform: none;
  opacity: 0; will-change: opacity; animation: reel 21s linear infinite; }
.hero-reel__img:nth-child(1) { animation-delay: 0s; }
.hero-reel__img:nth-child(2) { animation-delay: 7s; }
.hero-reel__img:nth-child(3) { animation-delay: 14s; }
@keyframes reel {                               /* one image clear at rest; ~1.2s crossfade, ~5.8s hold */
  0%     { opacity: 0; }
  5.71%  { opacity: 1; }                        /* fade-in complete (~1.2s) */
  33.33% { opacity: 1; }                        /* hold (~5.8s) */
  39.05% { opacity: 0; }                        /* fade-out complete (~1.2s); crossfades with next */
  100%   { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-reel__img { animation: none; opacity: 0; }
  .hero-reel__img:nth-child(1) { opacity: 1; }  /* static first portrait, no cycle, no zoom */
}
@media (min-width: 768px)  { .hero-reel { height: clamp(520px, 60vw, 640px); } }
@media (min-width: 1024px) { .hero-reel { height: clamp(560px, 52vw, 700px); } }

/* ---- Intro (headline + copy + CTAs; below the reel, centered editorial) ---- */
.intro { padding-block: clamp(3rem, 4.4vw, 5rem); text-align: center; }   /* ~460–600px total */
/* Interior-page intro: compact header band that leads straight into content (no dead gap). */
.intro--page { padding-top: clamp(2.4rem, 3.4vw, 3.4rem); padding-bottom: clamp(.5rem, 1vw, 1rem); }
/* Headline container is widened (900 → 1080) so the second statement composes on ONE line at
   1024/1280/1440; the clamp is trimmed slightly for headroom against font-loading variance.
   .nb groups "opportunities forward." so "forward." can never sit alone on a dangling line —
   at tablet/mobile the line still wraps naturally, just never orphaning the final word. */
.intro__inner { max-width: 1080px; margin-inline: auto; }
.intro__eyebrow { color: var(--accent-600); }
.intro__headline { font-size: clamp(2.25rem, 3.8vw, 3.4rem); max-width: 1080px; margin-inline: auto; letter-spacing: -.022em; line-height: 1.08; text-wrap: balance; }
.intro__headline .cont { display: block; color: var(--accent-600); font-size: clamp(1.5rem, 2.5vw, 2.2rem); margin-top: .3rem; text-wrap: balance; }
.nb { white-space: nowrap; }
/* text-wrap:pretty pulls a word down rather than leaving a one-word last line; the .nb group is the
   deterministic guarantee that "forward." is never orphaned even where text-wrap is unsupported. */
.intro__sub { font-size: var(--fs-lead); color: var(--text-muted); max-width: 620px; margin: 1.3rem auto 1.9rem; line-height: 1.55; text-wrap: pretty; }
.intro__ctas { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; align-items: center; }

/* ---- Editorial pull quote (trust statement) ---- */
.pullquote { max-width: 30ch; }
.pullquote__mark { font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; color: var(--accent); line-height: .5; }
.pullquote__text { font-size: var(--fs-quote); font-weight: 600; font-family: var(--font-head); color: var(--navy); line-height: 1.22; letter-spacing: -.01em; max-width: 28ch; margin: .4rem 0 0; }
.pullquote__by { color: var(--text-muted); font-size: 1.08rem; line-height: 1.6; max-width: 42ch; }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: 1.1fr .9fr; align-items: center; } }

/* ---- Split (image + copy; alternating) ---- */
.split { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; }
.split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 4 / 3; }
.split__body h2 { font-size: var(--fs-h2); margin-bottom: .8rem; }
.split__body p { color: var(--text-muted); }

/* ---- Focus areas (numbered editorial list; NOT a feature grid) ---- */
.focus-list { display: grid; gap: 0; border-top: 1px solid var(--border); margin-top: 1.5rem; }
.focus-item { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.4rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--border); transition: background var(--dur) var(--ease); }
.focus-item:hover { background: linear-gradient(90deg, rgba(74,144,226,.05), transparent 60%); }
.focus-item__num { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--accent); letter-spacing: .04em; }
.focus-item__title { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h3); color: var(--navy); }
.focus-item__desc { color: var(--text-muted); font-size: 1rem; margin-top: .3rem; grid-column: 2; }

/* ---- Values (four composed statements; typographic, not cards) ---- */
.value-grid { display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; margin-top: 1.3rem; max-width: 940px; }
.value-block { border-top: 1px solid var(--border); padding-top: .85rem; }   /* lighter, shorter divider */
.value-block h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.value-block p { color: var(--text-muted); font-size: .96rem; max-width: 40ch; }

/* ---- Featured testimonial ----
   No accent rule above the quote (Sarah, 2026-07-13); the quote is italic and carries real quotation marks. */
.quote-feature { max-width: 860px; margin-inline: auto; text-align: center; }
.quote-feature blockquote { font-size: clamp(1.15rem, 1.9vw, 1.65rem); line-height: 1.45; color: var(--navy); font-weight: 400; font-style: italic; letter-spacing: 0; margin-bottom: 1.1rem; }
.quote-feature figcaption { font-family: var(--font-head); font-weight: 600; color: var(--charcoal); font-size: .98rem; }
.quote-feature figcaption span { display: block; font-weight: 400; color: var(--text-dim); font-size: .86rem; margin-top: .2rem; }

/* ---- Compact CTA band ---- */
.cta-band { padding-block: clamp(2.6rem, 3.6vw, 3.8rem); }   /* ~260–340px total */
.cta-band h2 { font-size: clamp(1.65rem, 2.8vw, 2.15rem); margin-bottom: .6rem; }
.cta-band p { color: #CFE0F2; max-width: 52ch; margin: 0 auto 1.4rem; }

/* ---- Footer (compact) ---- */
/* ---- Footer (compact 3-column; not a full-viewport stacked block) ---- */
.site-footer { background: var(--navy); color: var(--text-on-navy); padding-block: clamp(3rem, 3.4vw, 4rem) 1.4rem; }
.site-footer a { color: #C6D8EC; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: 1.5rem 2.4rem; grid-template-columns: 1fr; margin-bottom: 1.4rem; }
.footer__brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; color: #fff; letter-spacing: .03em; }
.footer__tagline { color: #A3BDD6; font-size: .88rem; margin-top: .5rem; max-width: 40ch; line-height: 1.5; }
/* Contact page hero: text left, photo carousel top-right */
.contact-hero { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 860px) { .contact-hero { grid-template-columns: 1fr minmax(280px, 340px); } }
.ccarousel { position: relative; width: 100%; max-width: 340px; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #0d1b2a; justify-self: end; }
.ccarousel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: opacity; animation: ccarousel 12s linear infinite; }
.ccarousel img:nth-child(1) { animation-delay: 0s; }
.ccarousel img:nth-child(2) { animation-delay: 6s; }
@keyframes ccarousel {          /* 2-image crossfade: ~1s fade, ~5s hold, one clear at rest */
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  50%  { opacity: 1; }
  58%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ccarousel img { animation: none; opacity: 0; }
  .ccarousel img:nth-child(1) { opacity: 1; }
}
.footer__social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.footer__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #A3BDD6; border: 1px solid rgba(255,255,255,.16); transition: color .2s, border-color .2s, background .2s; }
.footer__social a:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); }
.footer__col h4 { font-family: var(--font-head); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #8FB4DA; margin-bottom: .6rem; }
.footer__col ul { list-style: none; padding: 0; display: grid; gap: .4rem; font-size: .9rem; }
.footer__bottom { border-top: 1px solid var(--navy-300); padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; align-items: center; font-size: .8rem; color: #A3BDD6; }
.footer__bottom .sep { color: var(--navy-300); }
.footer__disclaimer { font-size: .72rem; color: #7C97B4; margin-top: .7rem; max-width: 1040px; line-height: 1.45; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; align-items: start; } }

/* ---- Legal / investor notice (client-appropriate; no internal status) ---- */
.legal-notice { background: var(--gray-50); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 1rem 1.2rem; font-size: .84rem; color: var(--text-muted); line-height: 1.55; }
.legal-notice strong { color: var(--navy); font-family: var(--font-head); font-weight: 600; }
.legal-page { max-width: var(--container-narrow); }
.legal-page .stack > * + * { margin-top: 1rem; }
.legal-page p { color: var(--text-muted); max-width: none; }
.legal-page p strong { color: var(--navy); }
/* Client-supplied legal documents: numbered sections, sub-headings, and lists. */
.legal-effective { color: var(--text-muted); margin-top: .9rem; }
.legal-effective strong { color: var(--navy); }
.legal-page h2 { font-size: 1.25rem; margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.legal-page .stack > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-page h3 { font-size: 1.02rem; color: var(--navy); margin-top: 1.5rem; }
.legal-list { margin: .6rem 0 0; padding-left: 1.2rem; color: var(--text-muted); display: grid; gap: .3rem; }
.legal-list li { line-height: 1.55; }
.legal-page a { color: var(--link); }
.legal-sig { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.legal-sig__name { color: var(--navy); }
.legal-sig__role { font-size: .9rem; color: var(--text-dim); margin-top: .2rem; }
.legal-sig__contact { font-size: .92rem; margin-top: .5rem; }

/* ---- Placeholder pages (route foundations; client-appropriate, no internal language) ---- */
.placeholder { text-align: center; max-width: 56ch; margin-inline: auto; }
.placeholder .mark { width: 72px; margin: 0 auto 1.2rem; opacity: .92; }

/* ---- Scroll reveal ---- */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- Utilities ---- */
.text-center { text-align: center; }
.mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.stack > * + * { margin-top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================================
   Responsive — 375/390/430/768/834/1024/1280/1440
   ========================================================================== */
@media (max-width: 767px) {
  .intro__headline { font-size: clamp(2rem, 8.5vw, 2.5rem); }   /* ~36–44px mobile */
  .intro__sub { font-size: 1.08rem; }
  .eyebrow { letter-spacing: .1em; }
}
@media (min-width: 768px) {
  .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .split--reverse .split__media { order: 2; }
  .value-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .focus-item { grid-template-columns: auto 1fr; }
}
@media (min-width: 1024px) {
  .nav__desktop, .nav__actions { display: flex; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }
  .trust-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 3.5rem; align-items: center; }
  .focus-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 3.5rem; align-items: center; }
}

/* ============================================================================
   Final architecture components (services · projects · about · credibility · testimonials)
   ========================================================================== */
/* Service cards (4 distinct) */
.svc-grid { display: grid; gap: 1.2rem; grid-template-columns: minmax(0,1fr); margin-top: 1.6rem; }
@media (min-width: 768px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
.svc { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.7rem; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); display: flex; flex-direction: column; }
.svc:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #C6D3E4; }
.svc__num { font-family: var(--font-head); font-weight: 700; color: var(--accent); font-size: 1rem; letter-spacing: .05em; }
.svc h3 { font-size: 1.28rem; margin: .3rem 0 .5rem; }
.svc p { color: var(--text-muted); font-size: .98rem; }
.svc ul { list-style: none; padding: 0; margin: 1rem 0 1.2rem; display: grid; gap: .35rem; font-size: .9rem; color: var(--text-muted); }
.svc ul li { display: flex; gap: .55rem; }
.svc ul li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .5rem; border-radius: 2px; background: var(--accent); }
.svc .link-arrow { margin-top: auto; }

/* Credibility strip — four equal columns, every item centered both axes.
   The two text-only blurbs center exactly like the two numeric ones (no empty <strong> shim),
   the 1px grid gap draws the evenly spaced dividers, and generous side padding keeps the
   first metric clear of the left edge. Stacks 2-up (tablet) → 1-up (mobile). */
.cred-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 1.6rem; }
@media (min-width: 768px) { .cred-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .cred-strip { grid-template-columns: minmax(0, 1fr); } }
.cred-strip .cred {
  background: #fff; padding: 1.5rem 1.25rem; min-height: 136px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .3rem;
}
/* single-column stack: keep the cells compact so the strip doesn't become a tall airy column */
@media (max-width: 479px) { .cred-strip .cred { min-height: 104px; padding: 1.15rem 1.25rem; } }
.cred-strip strong { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.9rem; line-height: 1.1; letter-spacing: 0; }
.cred-strip span { display: block; color: var(--text-muted); font-size: .85rem; line-height: 1.45; max-width: 24ch; text-align: center; }

/* Career timeline (editorial, not a table) */
.timeline { border-left: 2px solid var(--border); margin: 1.4rem 0 0; padding-left: 1.6rem; display: grid; gap: 1.4rem; }
.timeline li { list-style: none; position: relative; }
.timeline li::before { content: ""; position: absolute; left: calc(-1.6rem - 6px); top: .4rem; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #fff; }
.timeline h3 { font-size: 1.08rem; margin-bottom: .2rem; }
.timeline p { color: var(--text-muted); font-size: .95rem; }

/* Project preview cards (overview page + home) */
.proj { display: grid; gap: 1.4rem; align-items: center; }
@media (min-width: 768px) { .proj { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .proj--reverse .proj__media { order: 2; } }
.proj__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 16/10; }
.proj__tag { font-family: var(--font-head); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-600); }
.proj h3 { font-size: var(--fs-h3); margin: .3rem 0 .5rem; }
.proj p { color: var(--text-muted); }
.proj__ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; align-items: center; }

/* Testimonials (About) */
/* Testimonials — soft section backdrop so the glass cards read */
.testi-section { background: radial-gradient(1100px 460px at 50% -6%, rgba(74,144,226,.09), rgba(74,144,226,0) 68%), linear-gradient(180deg, #fff 0%, #f4f8fd 100%); }
.testi-sub { color: var(--text-muted); font-size: 1rem; margin-top: .2rem; max-width: 52ch; }
.testi-grid { display: grid; gap: 1.3rem; grid-template-columns: minmax(0,1fr); margin-top: 1.7rem; }
@media (min-width: 768px) { .testi-grid { grid-template-columns: 1fr 1fr; } }
/* Restrained glass card (legible if backdrop-filter is unsupported — see @supports fallback) */
.testi { background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(244,249,255,.72)); border: 1px solid rgba(74,144,226,.20); border-radius: 20px; padding: 1.9rem 2rem; box-shadow: 0 14px 36px rgba(18,59,99,.08), inset 0 1px 0 rgba(255,255,255,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) { .testi { background: linear-gradient(145deg, #ffffff, #f2f8ff); } }
@media (max-width: 767px) { .testi { padding: 1.4rem 1.5rem; } }
.testi__head { display: flex; align-items: center; gap: .85rem; margin-bottom: .8rem; }
.testi__avatar { position: relative; flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--navy); color: #fff; overflow: hidden; box-shadow: 0 0 0 3px rgba(74,144,226,.16); }
.testi__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; }
.testi__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; border-radius: 50%; }
@media (max-width: 767px) { .testi__avatar { width: 62px; height: 62px; } .testi__initials { font-size: 1.05rem; } }
.testi__name { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1rem; }
.testi__role { color: var(--text-dim); font-size: .8rem; }
.testi p { color: var(--text-muted); font-size: .95rem; line-height: 1.55; }
.testi-more { margin-top: 1.4rem; }
.testi-more > summary { cursor: pointer; font-family: var(--font-head); font-weight: 600; color: var(--accent-600); list-style: none; padding: .6rem 0; }
.testi-more > summary::-webkit-details-marker { display: none; }
.testi-more[open] > summary { margin-bottom: 1rem; }

/* Person-behind-the-work (dog section) */
.person { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 768px) { .person { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); } }
.person__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 4/5; max-height: 460px; }

/* Contact "what to discuss" chips */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.chips span { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .45rem 1rem; font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--navy); background: #fff; }
/* Project image placeholder (until project photography is supplied) */
.proj__media--ph { aspect-ratio: 16/10; border-radius: var(--radius); display: grid; place-items: center; text-align: center; padding: 1.5rem; color: #EAF1F9; font-family: var(--font-head); font-weight: 600; box-shadow: var(--shadow); }
.proj__media--rv { background: linear-gradient(135deg, #123B63, #2C5A86); }
.proj__media--dc { background: linear-gradient(135deg, #0E2F4F, #3B7BC4); }
.proj__media--ph span { display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#9CC4F0; margin-bottom:.4rem; }
.proj__media--ph strong { font-size:1.25rem; }
/* Real photo/logo project media */
.proj__media { display: block; }
.proj__media--logo { aspect-ratio: 16/10; background: #fcecd3; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.proj__media--logo img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: 16/10; border-radius: 0; box-shadow: none; padding: 1.1rem; }
/* Header wordmark logo (replaces MB monogram + text) */
.nav__logo { height: 30px; width: auto; display: block; }
@media (max-width: 430px) { .nav__logo { height: 25px; } }

/* ============ Visual polish pass (2026-07-12) ============ */
.rule { height: 2px; width: 40px; }

/* Homepage — two-up editorial project cards */
.pgrid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 820px) { .pgrid { grid-template-columns: 1fr 1fr; } }
.pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pcard__media { display: block; aspect-ratio: 16/10; overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard--clearfork .pcard__media { background: #fcecd3; }
.pcard--clearfork .pcard__media img { object-fit: contain; padding: 1.1rem; }
.pcard--dc .pcard__media { background: #0d1b2a; }
.pcard__body { display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem 1.35rem 1.4rem; flex: 1; }
.pcard__body h3 { font-size: 1.3rem; margin: .1rem 0; }
.pcard__body p { color: var(--text-muted); font-size: .95rem; margin: 0; }
.pcard__ctas { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin-top: auto; padding-top: .7rem; }

/* Projects overview — editorial feature cards (card surface around alternating rows) */
.proj { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.2rem; }
@media (min-width: 768px) { .proj { padding: 1.5rem; gap: 2rem; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); } }
.proj .proj__media img, .proj .proj__media--logo { box-shadow: none; }
.proj__role { font-size: .9rem; color: var(--text-dim); margin-top: .2rem; }
.legal-notice--subtle { background: transparent; border: 0; border-left: 2px solid var(--border); color: var(--text-dim); font-size: .82rem; padding: .3rem 0 .3rem 1rem; box-shadow: none; }

/* Services — one restrained line icon per card + tighter padding */
.svc { padding: 1.35rem 1.45rem; }
.svc__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.svc__icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(74,144,226,.12); color: var(--accent-600); }
.svc__icon svg { width: 19px; height: 19px; }
.svc__head .svc__num { margin-left: auto; margin-bottom: 0; }
.svc h3 { margin-top: 0; }

/* CTA band + footer — tightened vertical rhythm (kept visually connected) */
.cta-band { padding-block: clamp(2.1rem, 3vw, 3rem); }
.site-footer { padding-block: clamp(2rem, 3vw, 2.6rem) clamp(1.3rem, 2vw, 1.6rem); }

/* ============ Public Speaking (client revision pass) ============ */

/* Homepage — full-width editorial feature (deliberately NOT another service card).
   Text-led with a restrained microphone mark: the single approved event photograph is
   already used by the LOCKED "right people together" section higher up the same page. */
.speak { background:
  radial-gradient(900px 420px at 12% 0%, rgba(74,144,226,.10), rgba(74,144,226,0) 70%),
  linear-gradient(180deg, #ffffff 0%, #f6fafe 100%); }
.speak__inner { display: grid; gap: clamp(1.9rem, 3.5vw, 3.4rem); align-items: center; }
@media (min-width: 900px) { .speak__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.speak__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(74,144,226,.12); color: var(--accent-600); margin-bottom: 1.1rem; }
.speak__icon svg { width: 26px; height: 26px; }
.speak__title { font-size: clamp(1.6rem, 2.9vw, 2.3rem); margin-bottom: .85rem; max-width: 20ch; text-wrap: balance; }
.speak__copy { color: var(--text-muted); max-width: 54ch; }
.speak__cta { margin-top: 1.6rem; }
.speak__topics-label { font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-600); margin-bottom: .9rem; }
.speak-topics { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
.speak-topics li { position: relative; border-bottom: 1px solid var(--border); padding: .9rem 0 .9rem 1.6rem; font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--navy); }
.speak-topics li::before { content: ""; position: absolute; left: 0; top: 1.3rem; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }

/* Services — full-width featured service beneath the four-card grid (uses the event photo,
   which is NOT otherwise present on this page, so nothing is duplicated). */
.speak-feature { display: grid; gap: clamp(1.5rem, 3vw, 2.8rem); align-items: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(1.2rem, 2vw, 1.8rem); }
@media (min-width: 900px) { .speak-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.speak-feature__media img { width: 100%; border-radius: var(--radius); object-fit: cover; aspect-ratio: 4 / 3; }
.speak-feature__body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .7rem; text-wrap: balance; }
.speak-feature__body p { color: var(--text-muted); }
.speak-formats { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: .45rem; font-size: .93rem; color: var(--text-muted); }
@media (min-width: 600px) { .speak-formats { grid-template-columns: 1fr 1fr; } }
.speak-formats li { display: flex; gap: .55rem; }
.speak-formats li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .5rem; border-radius: 2px; background: var(--accent); }

/* Contact — "Invite Michele to Speak" (anchor target for every Speaking CTA site-wide).
   Constrained + centred so the band never reads as a half-empty row on wide desktops. */
#public-speaking { scroll-margin-top: 92px; }   /* clears the 76px sticky header */
.speak-invite { display: grid; gap: 1.3rem; align-items: start; max-width: 860px; margin-inline: auto; }
@media (min-width: 768px) { .speak-invite { grid-template-columns: auto minmax(0, 1fr); gap: 1.8rem; } }
.speak-invite__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: rgba(74,144,226,.12); color: var(--accent-600); }
.speak-invite__icon svg { width: 28px; height: 28px; }
.speak-invite h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .6rem; }
.speak-invite p { color: var(--text-muted); max-width: 60ch; }

/* ============================================================================
   Contact form — SCOPED to this form only (.contact-form-card). Nothing here
   leaks to other pages. Labels are BLOCK and sit ABOVE their control; controls
   are width:100% so they can never share a line with a label or compress.
   ========================================================================== */
.contact-form-card {
  max-width: 800px; margin-inline: auto;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 40px;
}
@media (max-width: 767px) { .contact-form-card { padding: 23px; border-radius: var(--radius); } }

.contact-form-card .form-heading { margin-bottom: 2rem; }
.contact-form-card .form-heading h2 { margin: 0 0 .6rem; }
.form-heading__sub { color: var(--text-muted); font-size: .96rem; max-width: 60ch; margin: 0; }

/* Rows: 2-up on desktop, everything stacks on mobile. */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; gap: 1.35rem 1.5rem; }
  .form-grid .form-field--full { grid-column: 1 / -1; }
}
.form-field { display: flex; flex-direction: column; min-width: 0; }

.form-label {
  display: block;                      /* label ALWAYS on its own line, above the control */
  font-family: var(--font-head); font-weight: 600; font-size: .88rem;
  color: var(--navy); margin-bottom: .45rem; line-height: 1.35;
}
.form-label .req { color: var(--error); margin-left: .1rem; }
.form-optional { font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--text-dim); margin-left: .35rem; }
.form-hint { font-size: .8rem; color: var(--text-dim); margin-top: .4rem; line-height: 1.4; }

.form-control {
  width: 100%; min-height: 48px; box-sizing: border-box;
  font: inherit; font-size: 1rem; color: var(--text); background: #fff;
  padding: .75rem .95rem;
  border: 1px solid var(--gray-200); border-radius: 10px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control::placeholder { color: var(--gray-400); }
.form-control:hover { border-color: #C6D3E4; }
.form-control:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.form-select { appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355627A' stroke-width='2' stroke-linecap='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px; }
.form-textarea { min-height: 155px; resize: vertical; line-height: 1.6; }

/* Honeypot — reachable to bots, invisible and unreachable to people. NOT a real field. */
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Communication preferences ---- */
.communication-preferences { border: 0; padding: 0; margin: 2.2rem 0 0; min-width: 0; }
.comm-prefs__title { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--navy); padding: 0; margin-bottom: .3rem; }
.comm-prefs__sub { font-size: .88rem; color: var(--text-muted); margin: 0 0 1rem; }

/* Each consent option is its OWN bordered panel — the checkbox is never buried in the paragraph.
   Both are UNCHECKED by default and OPTIONAL; the SMS disclosures are never visually weakened. */
.consent-option {
  display: grid; grid-template-columns: 44px 1fr; align-items: start;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--gray-50); padding: 1rem 1.1rem 1rem .5rem;
}
.consent-option + .consent-option { margin-top: .85rem; }
.consent-option:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.consent-option input[type="checkbox"] {
  width: 20px; height: 20px; margin: 0; justify-self: center; align-self: start;
  margin-top: 12px;                      /* optically centres on the first line of text */
  accent-color: var(--accent); cursor: pointer; flex: none;
}
.consent-option input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
/* Clickable target ≥44px: the label carries the padding, so the whole block is a hit area. */
.consent-option label {
  font-size: .9rem; line-height: 1.6; color: var(--text-muted);
  cursor: pointer; padding: 12px 0; min-height: 44px; display: block;
}

/* The global `p { max-width: 66ch }` was throttling this line to ~508px inside a 720px content
   area, so it wrapped early and dropped "Conditions" onto its own line. Release the cap and let it
   use the card's full width. The sentence itself still wraps freely on mobile — only the link is
   held together. */
.legal-acknowledgment { font-size: .88rem; color: var(--text-muted); margin: 1.4rem 0 0; max-width: none; }
.legal-acknowledgment a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
/* Keep "Terms and Conditions" intact as ONE clickable link — never split across lines.
   Scoped to this link only; the rest of the sentence wraps normally (no horizontal scroll). */
.legal-acknowledgment .nowrap-link { white-space: nowrap; }

.form-actions { margin-top: 1.8rem; }
.form-submit { width: 195px; }
.form-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 479px) { .form-submit { width: 100%; } }

.cform__banner { padding: .9rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.4rem; font-size: .95rem; }
.cform__banner--good { background: #E9F6EF; border: 1px solid #B7E0CB; color: #1E6B4B; }
.cform__banner--bad { background: #FDEDEC; border: 1px solid #F5C6C2; color: #9B2C22; }

/* 320px: nothing may overflow the card. */
@media (max-width: 380px) {
  .contact-form-card { padding: 18px; }
  .consent-option { grid-template-columns: 36px 1fr; padding-right: .8rem; }
}