/* ==========================================================================
   Larimar brand layer (Brand Guidelines Kit), loaded last.
   Keeps the page's structure and motion; swaps color, type, buttons,
   headings and icons to the brand. Fonts are the Google alternatives the
   guide allows for the web: Spectral (Cambon), Archivo (Akkurat Pro),
   IBM Plex Mono (Suisse Intl Mono).
   ========================================================================== */
:root {
  /* primary palette */
  --b-celeste: #B3E8E8;
  --b-botanical: #002E39;
  --b-pearl: #D3CDB3;
  --b-teal: #50A29A;
  --b-mint: #C8ECDC;
  /* secondary palette (graphics, icons, illustrations only) */
  --b-orange: #EA7E40;
  --b-terracota: #AE6433;
  --b-sky: #53BADD;
  --b-soft-pearl: #F7F2E8;

  /* page tokens mapped onto the brand */
  --c-ink: var(--b-botanical);
  --c-ink-2: #1D4550;
  --c-muted: #4C6468;
  --c-faint: #7C8C8C;
  --c-line: #E1E6E6;
  --c-panel: #F5F7F7;              /* whiteish surfaces (beige Pearl tones dropped at the user's request) */
  --c-card: #FAFBFB;
  --c-hover: #ECF1F1;
  --c-bg: #FFFFFF;
  --c-accent: #2F7C75;              /* brand Teal, deepened to pass AA contrast for text on white */
  --c-accent-2: var(--b-celeste);   /* accents on Botanical */
  --c-dark: var(--b-botanical);

  --font-display: "Spectral", Georgia, serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

body { font-family: var(--font-body); }

/* ---------- Type: serif headlines, tighter tracking than the Google set ---------- */
.title-xl, .title-l, .title-m, .lead, .story h3, .card h3, .how .step .more h3, .spec dt, .faq summary,
.person h3, .flip .front h3, .quote blockquote, .bar-row h3, .policy h2, .stat .n {
  font-family: var(--font-display);
}
.title-xl { letter-spacing: -.012em; font-weight: 400; }
.title-l  { letter-spacing: -.008em; font-weight: 400; }
.lead { font-family: var(--font-body); }            /* body copy stays in the Akkurat alternative */
.hl { color: var(--c-accent); }

/* Signature detail: the short rule under section titles (Teal instead of the guide's Pearl) */
.page-hero .title-xl::after, .section-head .title-l::after, .section-head .title-m::after, .how-head .title-l::after,
.faq > fx-reveal .title-l::after, .gpanel .copy .title-l::after, .net-intro .title-l::after,
.contact .copy .title-xl::after, .cta-band .title-l::after, .title-screen .title-xl::after, .services > h2::after {
  content: ""; display: block; width: 48px; height: 2px; margin-top: 20px; background: var(--b-teal);
}
.page-hero .title-xl::after, .how-head .title-l::after, .faq > fx-reveal .title-l::after, .cta-band .title-l::after,
.title-screen .title-xl::after, .section-head:not(.left) .title-l::after, .section-head:not(.left) .title-m::after { margin-inline: auto; }

/* Labels: small caps in the body face */
.label { font-family: var(--font-body); font-weight: 600; letter-spacing: 1.2px; color: var(--c-faint); }

/* ---------- Buttons: Botanical with mono uppercase (guide p.17, p.20) ---------- */
.pill {
  font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--b-botanical); color: #fff; border-radius: 999px;
}
.pill:hover { background: #0B4452; box-shadow: none; }
.pill.grey { background: var(--c-panel); color: var(--b-botanical); box-shadow: inset 0 0 0 1px var(--c-line); }
.pill.grey:hover { background: var(--b-celeste); }
.on-dark .pill, .hero .pill, .lane-pin .pill { background: var(--b-celeste); color: var(--b-botanical); }
.on-dark .pill:hover, .hero .pill:hover, .lane-pin .pill:hover { background: #fff; }
.link { color: var(--c-accent); }

/* ---------- Header ---------- */
.site-header { border-bottom-color: #002E3914; }
.site-header nav a { color: var(--c-ink-2); }
.site-header[data-theme="dark"] { background: var(--b-botanical); border-color: #ffffff1f; }
.site-header[data-theme="dark"] .brand { color: #cfe6e3; }
.site-header[data-theme="dark"] nav a { color: #e6f2f0; }
.site-header[data-theme="dark"] .pill.grey { background: #0B4452; color: #fff; box-shadow: none; }
.read-progress { background: var(--b-teal); }
.site-header[data-theme="dark"] .read-progress { background: var(--b-celeste); }

/* ---------- Dark sections: Botanical instead of black ---------- */
.hero { background: var(--b-botanical); }
.hero::after { background: radial-gradient(ellipse at center, #002E398a 0%, #002E3955 55%, #002E3999 100%); }
.hero p { color: #e6f2f0; }
.title-screen.dark, .lane-pin, .lane-pin .sticky, .dark-block, .campus { background: var(--b-botanical); }
.lane-pin .lead, .dark-block .lead { color: #e6f2f0; }
.lane-pin .fine, .globe .tag small, .dark-block .label, .dark-block .stat .l, .campus .pin small { color: #9fbfbc; }
.on-dark .checks li { color: #c9dcda; }
.on-dark .chips span { background: #0B4452; color: #e6f2f0; border-color: #1D5563; }
.banner .frame::after { background: #002E3966; }
.banner .copy p { color: #e6f2f0; }

/* ---------- Light surfaces ---------- */
.intro .panel, .gpanel { background: var(--c-panel); }
.service { background: var(--c-panel); }
.service:hover { background: var(--c-hover); }
.service::after { color: var(--b-teal); }
.bar-row { background: var(--c-panel); }
.bar-row.best { background: var(--b-celeste); }
.bar-row.best .bar-fill { background: var(--b-botanical); }
.bar-fill { background: #D5DEDE; }
fx-flow .zone { fill: var(--b-celeste); }
fx-flow .zone-label { fill: var(--b-botanical); }
fx-flow [data-package] rect { fill: var(--b-terracota); }
.avatar { background: var(--b-celeste); color: var(--b-botanical); }
.flip .back { background: var(--b-botanical); }
.flip .back p { color: #e6f2f0; }
.field input:focus, .field textarea:focus { background: var(--c-hover); }
.car-arrow:hover { background: var(--b-celeste); }
.car-dots button[aria-current] { background: var(--b-teal); }
.tt-tabs button.active { background: var(--b-botanical); }
.site-footer { background: var(--c-panel); }
.chips span { background: var(--c-panel); }
.faq summary::after { color: var(--b-teal); }

/* ---------- Icons: line glyph on a rounded tile with a Larimar-stone blob behind (guide p.35-36) ---------- */
.card .icon, .how .step .icon {
  position: relative; isolation: isolate; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 14px; border: 1.5px solid var(--b-teal); background: #fff;
  color: var(--b-botanical); font-size: 26px; font-variation-settings: "wght" 300;
}
.card .icon::before, .how .step .icon::before {
  content: ""; position: absolute; z-index: -1; inset: 9px 7px 7px 9px;
  border-radius: 58% 42% 55% 45% / 46% 56% 44% 54%;   /* stone silhouette */
  background: var(--b-celeste);
}
.cards > fx-reveal:nth-child(3n+2) .icon::before { background: #DCEFEE; border-radius: 45% 55% 42% 58% / 56% 44% 56% 44%; }
.cards > fx-reveal:nth-child(3n+3) .icon::before { background: var(--b-mint); border-radius: 52% 48% 60% 40% / 40% 60% 48% 52%; }
.how .step .icon { width: 48px; height: 48px; font-size: 22px; margin-bottom: 16px; }
.how .step .label { color: var(--c-muted); }

/* ---------- DR assembly fit block (Services) ---------- */
.fit { max-width: 1100px; margin: clamp(40px, 6vh, 64px) auto 0; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-l);
  background: var(--c-panel); display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.fit-head { grid-column: 1 / -1; display: grid; gap: 12px; max-width: 760px; }
.fit-head p:not(.label) { margin: 0; color: var(--c-muted); line-height: 1.6; }
.fit-head .title-m { margin: 0; }
.fit-col h4 { margin: 0 0 12px; font: 600 13px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-ink); }
.fit-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fit-col li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--c-muted); line-height: 1.5; font-size: 15px; }
.fit-col li::before { font-family: "Material Symbols Outlined"; font-size: 20px; line-height: 1.2; }
.fit-col.good li::before { content: "check"; color: var(--c-accent); }
.fit-col.poor li::before { content: "close"; color: var(--b-terracota); }
.fit .pill { grid-column: 1 / -1; justify-self: start; }
@media (width < 800px) { .fit { grid-template-columns: 1fr; } }

/* ---------- Review mode (?review): outline draft copy for sign-off ---------- */
html.review [data-draft] { outline: 2px dashed var(--b-orange); outline-offset: 4px; position: relative; }
html.review [data-draft]:hover::after {
  content: "DRAFT · " attr(data-draft); position: absolute; left: 0; top: calc(100% + 8px); z-index: 50; width: max-content; max-width: 360px;
  padding: 8px 12px; border-radius: 8px; background: var(--b-botanical); color: #fff; font: 400 12px/1.45 var(--font-body); letter-spacing: 0; text-transform: none; white-space: normal;
}
.review-badge { position: fixed; left: 16px; bottom: 16px; z-index: 60; padding: 10px 14px; border-radius: 999px; background: var(--b-orange); color: #fff;
  font: 500 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 20px #002E3933; }

/* ---------- Phone menu: button in the header, full-screen Botanical panel ---------- */
.menu-btn { display: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; position: relative; color: var(--c-ink); }
.menu-btn i { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: translate .45s var(--base-ease), rotate .45s var(--base-ease); }
.menu-btn i:nth-of-type(1) { top: 17px; } .menu-btn i:nth-of-type(2) { top: 25px; }
.menu-open .menu-btn i:nth-of-type(1) { translate: 0 4px; rotate: 45deg; }
.menu-open .menu-btn i:nth-of-type(2) { translate: 0 -4px; rotate: -45deg; }
.site-header[data-theme="dark"] .menu-btn, .menu-open .menu-btn { color: #fff; }
.menu-open .site-header { background: var(--b-botanical); border-color: #ffffff1f; }
.menu-open .site-header .brand .logo-dark { display: none; }
.menu-open .site-header .brand .logo-light { display: block; }
.m-nav { position: fixed; inset: var(--header-h) 0 0; z-index: 99; background: var(--b-botanical); color: #fff;
  display: grid; align-content: start; gap: 36px; padding: 28px 24px calc(28px + env(safe-area-inset-bottom));
  clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--base-ease); overflow-y: auto; overscroll-behavior: contain; }
.m-nav[hidden] { display: none; }
.menu-open .m-nav { clip-path: inset(0 0 0 0); }
.m-nav nav { display: grid; counter-reset: m; border-top: 1px solid #ffffff1f; }
.m-nav nav a { counter-increment: m; display: grid; grid-template-columns: 40px 1fr; align-items: baseline; padding: 18px 0; border-bottom: 1px solid #ffffff1f;
  font: 400 clamp(32px, 9vw, 44px)/1.1 var(--font-display); color: #fff; text-decoration: none; opacity: 0; translate: 0 18px; transition: opacity .5s, translate .6s var(--base-ease); }
.m-nav nav a::before { content: "0" counter(m); font: 500 12px var(--font-mono); letter-spacing: .08em; color: var(--b-celeste); }
.m-nav nav a.active { color: var(--b-celeste); }
.menu-open .m-nav nav a { opacity: 1; translate: 0 0; }
.menu-open .m-nav nav a:nth-child(2) { transition-delay: .06s; } .menu-open .m-nav nav a:nth-child(3) { transition-delay: .12s; } .menu-open .m-nav nav a:nth-child(4) { transition-delay: .18s; }
.m-nav .pill { justify-self: start; height: 48px; }
@media (width < 900px) {
  .menu-btn { display: block; }
  .site-header .actions .pill { display: none; }
  .site-header .brand { min-height: 44px; }
}
@media (width >= 900px) { .m-nav { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .m-nav, .m-nav nav a, .menu-btn i { transition: none; } }

/* ---------- Phone tap targets and legibility (mobile audit) ---------- */
@media (width < 700px) {
  .tt-tabs button { min-height: 44px; }
  .contact .link { display: inline-block; padding: 11px 0; }
  .campus .pin { font-size: 13px; }
}