/* Self-hosted variable fonts (latin) — no third-party / Google Fonts dependency.
   Works on locked-down networks that block fonts.googleapis.com. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/archivo.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}

/* Smooth crossfade between page loads (Chrome/Edge 126+; ignored elsewhere) */
@view-transition { navigation: auto }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s }

:root {
  --paper-2: #ffffff;
  /* serif retired — both vars now resolve to Archivo so the whole site uses one font */
  --serif: 'Archivo', system-ui, sans-serif;
  --sans: 'Archivo', system-ui, sans-serif;
  --hair: rgba(255, 255, 255, 0.12);

  /* default theme: Classic — the original navy + warm cream, with a logo-blue accent. */
  --shell:#0a131f; --ink:#0e1a2b; --ink-2:#15263b; --ink-3:#1d3349;
  --paper:#f6f2ea; --text:#16242f; --prose:#33424d; --muted:#5d6e7e; --muted-light:#9fb0bf;
  --hair-dark:rgba(14,26,43,.12);
  --accent:#4d5edb; --accent-soft:#848ce2; --accent-dark:#2a3ccb; --on-accent:#fff;
  --glow:rgba(114,126,218,.14); --seam:rgba(77,94,219,.45); --ring:rgba(77,94,219,.25);

  --gold: var(--accent);
  --gold-soft: var(--accent-soft);
  --gold-dark: var(--accent-dark);
}

/* Theme options */
[data-theme="classic"] {
  --shell:#0a131f; --ink:#0e1a2b; --ink-2:#15263b; --ink-3:#1d3349;
  --paper:#f6f2ea; --text:#16242f; --prose:#33424d; --muted:#5d6e7e; --muted-light:#9fb0bf;
  --hair-dark:rgba(14,26,43,.12);
  --accent:#4d5edb; --accent-soft:#848ce2; --accent-dark:#2a3ccb; --on-accent:#fff;
  --glow:rgba(114,126,218,.14); --seam:rgba(77,94,219,.45); --ring:rgba(77,94,219,.25);
}
[data-theme="teal"] {
  --shell:#101819; --ink:#182325; --ink-2:#27373a; --ink-3:#394d51;
  --paper:#f6f2ea; --text:#16242f; --prose:#33424d; --muted:#5d6e7e; --muted-light:#9fb0bf;
  --hair-dark:rgba(24,35,37,.12);
  --accent:#0e7e92; --accent-soft:#3ac6df; --accent-dark:#0e7689; --on-accent:#fff;
  --glow:rgba(58,198,223,.14); --seam:rgba(14,126,146,.45); --ring:rgba(14,126,146,.25);
}
[data-theme="emerald"] {
  --shell:#101915; --ink:#18251f; --ink-2:#273a31; --ink-3:#395146;
  --paper:#f6f2ea; --text:#16242f; --prose:#33424d; --muted:#5d6e7e; --muted-light:#9fb0bf;
  --hair-dark:rgba(24,37,31,.12);
  --accent:#158452; --accent-soft:#3adf95; --accent-dark:#147b4d; --on-accent:#fff;
  --glow:rgba(58,223,149,.14); --seam:rgba(21,132,82,.45); --ring:rgba(21,132,82,.25);
}
[data-theme="crimson"] {
  --shell:#191012; --ink:#25181b; --ink-2:#3a272c; --ink-3:#51393f;
  --paper:#f6f2ea; --text:#16242f; --prose:#33424d; --muted:#5d6e7e; --muted-light:#9fb0bf;
  --hair-dark:rgba(37,24,27,.12);
  --accent:#dc2656; --accent-soft:#e87090; --accent-dark:#ce2250; --on-accent:#fff;
  --glow:rgba(232,112,144,.14); --seam:rgba(220,38,86,.45); --ring:rgba(220,38,86,.25);
}
[data-theme="violet"] {
  --shell:#141019; --ink:#1e1825; --ink-2:#2f273a; --ink-3:#433951;
  --paper:#f6f2ea; --text:#16242f; --prose:#33424d; --muted:#5d6e7e; --muted-light:#9fb0bf;
  --hair-dark:rgba(30,24,37,.12);
  --accent:#8e56d7; --accent-soft:#ab81e1; --accent-dark:#874bd5; --on-accent:#fff;
  --glow:rgba(171,129,225,.14); --seam:rgba(142,86,215,.45); --ring:rgba(142,86,215,.25);
}

* { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
body { font-family: var(--sans); color: var(--text); background: var(--paper); line-height: 1.65; -webkit-font-smoothing: antialiased }
a { color: inherit; text-decoration: none }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--on-accent); font-weight: 600; padding: 10px 18px; border-radius: 0 0 8px 0 }
.skip-link:focus { left: 0 }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }
.dark a:focus-visible, header a:focus-visible, header button:focus-visible, footer a:focus-visible { outline-color: var(--accent-soft) }
::selection { background: var(--accent); color: var(--on-accent) }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px }

/* ---------------- header ---------------- */
header { position: sticky; top: 0; z-index: 50; background: var(--shell); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair) }
nav { display: flex; align-items: center; gap: 32px; height: 72px; color: #fff }
.brand { display: inline-flex; align-items: center; height: 100%; padding: 8px 0 }
.brand-img { height: clamp(36px, calc(2.6vw + 23px), 45px); width: auto; display: block }
.navlinks { display: flex; gap: 26px; margin-left: auto; font-size: .92rem; font-weight: 500; align-items: center }
.navlinks > a, .has-menu > button {
  color: var(--muted-light); transition: color .2s; position: relative; padding: 6px 0;
  background: none; border: none; font-family: var(--sans); font-size: .92rem; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px
}
.navlinks > a:hover, .has-menu > button:hover { color: #fff }
.navlinks > a.active, .has-menu.active > button { color: #fff }
.navlinks > a.active::after, .has-menu.active > button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--gold); border-radius: 1px
}
.has-menu { position: relative }
.has-menu .caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-bottom: 2px; transition: transform .2s }
.has-menu:hover .caret { transform: rotate(-135deg); margin-bottom: -2px }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--ink-2); border: 1px solid var(--hair); border-radius: 10px; padding: 10px;
  min-width: 220px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s; box-shadow: 0 16px 36px rgba(0, 0, 0, .4)
}
.has-menu:hover .dropdown, .has-menu:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) }
.dropdown a { color: var(--muted-light); font-size: .9rem; padding: 9px 12px; border-radius: 6px; transition: background .15s, color .15s }
.dropdown a:hover { background: rgba(255, 255, 255, .06); color: #fff }
.dropdown a .d2 { display: block; font-size: .78rem; color: var(--muted); margin-top: 1px }
.dropdown a:hover .d2 { color: var(--muted-light) }
.co-btn { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 600; color: var(--on-accent); background: var(--accent); padding: 9px 16px; border-radius: 6px; transition: transform .2s, background .2s }
.co-btn:hover { background: var(--accent-dark); transform: translateY(-1px) }

.menu-toggle { display: none; background: none; border: 1px solid var(--hair); color: #fff; border-radius: 6px; padding: 8px 12px; cursor: pointer; align-items: center; justify-content: center }
.menu-icon { display: block; position: relative; width: 18px; height: 2px; background: #fff; border-radius: 2px }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #fff; border-radius: 2px }
.menu-icon::before { top: -6px }
.menu-icon::after { top: 6px }
.mobile-panel { display: none; position: absolute; top: 72px; right: 32px; flex-direction: column; background: var(--ink-2); border: 1px solid var(--hair); padding: 14px 18px; border-radius: 10px; gap: 4px; min-width: 240px; max-height: calc(100vh - 92px); overflow-y: auto; box-shadow: 0 14px 30px rgba(0, 0, 0, .35) }
.mobile-panel a { color: var(--muted-light); font-size: .95rem; padding: 8px 6px }
.mobile-panel a.sub { padding-left: 22px; font-size: .88rem; color: #94a4b3 }
.mobile-panel a:hover { color: #fff }
.mobile-panel .grp { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft); padding: 12px 6px 4px }
.mobile-panel.open { display: flex }

/* ---------------- breadcrumb ---------------- */
.crumb { background: var(--paper); display: block; height: auto }
.crumb .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; width: 100%; padding-top: 10px; padding-bottom: 2px; font-size: .72rem }
.crumb a { color: var(--muted); transition: color .2s }
.crumb a:hover { color: var(--ink) }
.crumb .sep { color: var(--muted); opacity: .5 }
.crumb .here { color: var(--prose) }

/* ---------------- hero ---------------- */
.hero { position: relative; background: var(--shell); color: #fff; overflow: hidden; padding: 100px 0 90px }
.hero.short { padding: 20px 0 22px }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 500px at 78% 12%, var(--glow), transparent 60%), radial-gradient(600px 500px at 10% 90%, rgba(255, 255, 255, .04), transparent 55%); pointer-events: none }
.hero .wrap { position: relative }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 22px }
.eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--gold) }
h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1.12; letter-spacing: -.02em; max-width: 24ch }
.hero .lede { font-size: 1.15rem; color: #c5d2dd; max-width: 60ch; margin-top: 22px; line-height: 1.65 }
.hero .lede + .lede { margin-top: 14px }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px }

/* light hero variant — cream-first theme (page opens on cream under the dark header) */
.hero.light { background: var(--paper); color: var(--text) }
.hero.light::before { background: radial-gradient(760px 460px at 80% 4%, var(--glow), transparent 62%), radial-gradient(620px 520px at 4% 104%, rgba(14, 26, 43, .05), transparent 60%) }
.hero.light .eyebrow { color: var(--accent-dark) }
.hero.light .eyebrow::before { background: var(--accent-dark) }
.hero.light h1 { color: var(--ink) }
.hero.light .lede { color: var(--prose) }
.hero.light .hero-bullets li { color: var(--prose); border-bottom-color: var(--hair-dark) }
.hero.light .hero-bullets li a { color: var(--gold-dark); border-bottom-color: var(--seam) }
.hero.light .hero-bullets li a:hover { color: var(--ink); border-bottom-color: var(--gold) }
.hero.light .btn-ghost { border-color: var(--hair-dark); color: var(--text) }
/* sub-page hero: sibling nav (links to peer pages) on cream needs dark-on-cream colors */
.hero.light .sib-nav { border-top-color: var(--hair-dark) }
.hero.light .sib-list a { color: var(--muted) }
.hero.light .sib-list a:hover { color: var(--ink) }
.hero.light .sib-list a[aria-current="page"] { color: var(--accent-dark) }
.hero.light .sib-list a[aria-current="page"]::after { background: var(--accent-dark) }
.hero.light .sib-list li + li::before { background: rgba(93, 110, 126, .45) }
/* tighten the gap from a short hero into its first body section (sub-pages only) */
.hero.short + .block { padding-top: 10px }
.hero.short + .block .subgrid { margin-top: 22px }
/* compact the short-hero stack so the first sentence sits high (sub-pages only) */
.hero.short .hero-mark { height: 38px; margin-bottom: 10px }
.hero.short .eyebrow { margin-bottom: 8px }
.hero.short .lede { margin-top: 10px }
/* product hero: words on the left, scaled product mark as a feature on the right */
.hero.short .hero-split { display: flex; align-items: center; gap: 48px }
.hero.short .hero-split .hero-copy { flex: 1 1 auto; min-width: 0 }
.hero.short .hero-split .hero-mark { flex: 0 0 auto; height: 76px; margin: 0 }

.hero-bullets { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 12px; max-width: 62ch }
.hero-bullets li { position: relative; padding: 12px 0 12px 26px; color: #c5d2dd; font-size: 1.02rem; line-height: 1.55; border-bottom: 1px solid var(--hair) }
.hero-bullets li:last-child { border-bottom: none }
.hero-bullets li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 1px; background: var(--gold) }
.hero-bullets li a { color: var(--gold-soft); font-weight: 600; border-bottom: 1px solid var(--seam); margin-left: 6px }
.hero-bullets li a:hover { color: #fff; border-bottom-color: var(--gold-soft) }

.btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .96rem; padding: 14px 26px; border-radius: 7px; transition: transform .2s, background .2s, border-color .2s }
.btn-primary { background: var(--accent); color: var(--on-accent) }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px) }
.btn-ghost { border: 1px solid var(--hair); color: #fff }
.btn-ghost:hover { border-color: var(--gold-soft); transform: translateY(-2px) }

.rv { opacity: 0; transform: translateY(18px); animation: rise .8s cubic-bezier(.2, .7, .3, 1) forwards }
.rv.d1 { animation-delay: .05s } .rv.d2 { animation-delay: .18s } .rv.d3 { animation-delay: .31s } .rv.d4 { animation-delay: .44s }
@keyframes rise { to { opacity: 1; transform: none } }

/* ---------------- section base ---------------- */
section.block { padding: 84px 0 }
.edge-top { position: relative }
.edge-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--seam) 18%, var(--seam) 82%, transparent); z-index: 2 }
.dark { background: var(--shell); color: #fff }
.dark .sec-title { color: #fff }
.dark .sec-intro { color: #c5d2dd }
.cream { background: linear-gradient(180deg, #fff, #f1ece1) }

.sec-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 16px }
.dark .sec-eyebrow { color: var(--accent-soft) }
.sec-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.18; letter-spacing: -.015em; max-width: 26ch }
.sec-intro { color: var(--prose); font-size: 1.05rem; max-width: 66ch; margin-top: 20px }
.sec-intro + .sec-intro { margin-top: 14px }
.standfirst { font-size: 1.18rem; line-height: 1.6; color: var(--prose); max-width: 64ch; margin-top: 20px }
.dark .standfirst { color: #d4dee8 }
.standfirst strong { color: var(--text); font-weight: 600 }
.dark .standfirst strong { color: #fff }
.support-rest { color: var(--prose); font-size: 1rem; max-width: 66ch; margin-top: 14px }
.dark .support-rest { color: #c5d2dd }
.body-copy p { color: var(--prose); font-size: 1.02rem; margin-top: 16px; max-width: 70ch }
.dark .body-copy p { color: #c5d2dd }
.body-copy p strong { color: var(--text); font-weight: 600 }
.dark .body-copy p strong { color: #fff }
.body-copy p em { font-style: italic }

/* ---------------- product summary cards (3-up) ---------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 46px }
.card { background: var(--paper-2); border: 1px solid var(--hair-dark); border-radius: 12px; padding: 30px 28px; transition: transform .25s, box-shadow .25s, border-color .25s; display: flex; flex-direction: column }
.dark .card { background: var(--ink-2); border-color: var(--hair); color: #fff }
.dark .card p { color: var(--muted-light) }
.card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -26px rgba(14, 26, 43, .5); border-color: var(--seam) }
.card .num { font-family: var(--serif); font-size: .95rem; color: var(--gold-dark); font-weight: 600 }
.dark .card .num { color: var(--gold) }
.card h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; margin: 10px 0 4px; letter-spacing: -.01em }
.card .role { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px }
.dark .card .role { color: var(--muted-light) }
.card p { color: var(--prose); font-size: .96rem; flex: 1 }
.card .go { margin-top: 18px; font-weight: 600; font-size: .9rem; color: var(--gold-dark); display: inline-flex; align-items: center; gap: 7px }
.dark .card .go { color: var(--gold-soft) }
.card:hover .go { gap: 11px }

/* ---------------- feature list ---------------- */
.feature-list { list-style: none; padding: 0; background: rgba(14, 26, 43, .03); border: 1px solid var(--hair-dark); border-radius: 12px; padding: 24px 26px }
.dark .feature-list { background: rgba(255, 255, 255, .03); border-color: var(--hair) }
.feature-list li { padding: 12px 0; border-bottom: 1px solid var(--hair-dark); font-size: .96rem; color: var(--prose) }
.dark .feature-list li { border-bottom-color: var(--hair); color: var(--muted-light) }
.feature-list li:last-child { border-bottom: none }
.feature-list li strong { display: block; color: var(--text); font-family: var(--serif); font-weight: 600; font-size: 1rem; margin-bottom: 4px }
.dark .feature-list li strong { color: #fff }
.feature-list.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px }

/* two-column layout for product detail */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; margin-top: 46px }

/* ---------------- sub-page card grid (how-it-works, CSF, solutions links) ---------------- */
.subgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 44px }
.subgrid-3 { grid-template-columns: repeat(3, 1fr) }
.subcard { display: block; background: var(--ink-2); border: 1px solid var(--hair); border-radius: 12px; padding: 28px 30px; transition: transform .25s, border-color .25s }
.subcard:hover { transform: translateY(-4px); border-color: var(--seam) }
.subcard h2, .subcard h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: #fff; margin-bottom: 8px; letter-spacing: -.01em }
.subcard p { color: var(--muted-light); font-size: .95rem }
.subcard .go { margin-top: 14px; font-weight: 600; font-size: .88rem; color: var(--gold-soft); display: inline-flex; align-items: center; gap: 7px }
.subcard:hover .go { gap: 11px }
.light-sub .subcard { background: var(--paper-2); border-color: var(--hair-dark) }
.light-sub .subcard h2, .light-sub .subcard h3 { color: var(--text) }
.light-sub .subcard p { color: var(--prose) }
.light-sub .subcard .go { color: var(--gold-dark) }

/* ---------------- prose lists in body ---------------- */
.body-copy ul { margin: 14px 0 0 20px; color: var(--prose); font-size: .98rem }
.dark .body-copy ul { color: var(--muted-light) }
.body-copy ul li { padding: 5px 0 }

/* ---------------- about / management ---------------- */
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; margin-top: 46px }
.mgmt { background: var(--ink-2); border: 1px solid var(--hair); border-radius: 12px; padding: 32px 30px }
.mgmt h3 { font-family: var(--serif); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-soft); margin-bottom: 20px }
.mgmt .person { padding: 14px 0; border-bottom: 1px solid var(--hair) }
.mgmt .person:last-child { border-bottom: none }
.mgmt .person .pn { font-family: var(--serif); font-size: 1.1rem; color: #fff; font-weight: 600 }
.mgmt .person .pr { font-size: .8rem; color: var(--gold-soft); text-transform: uppercase; letter-spacing: .06em; margin: 2px 0 8px }
.mgmt .person p { color: var(--muted-light); font-size: .93rem; line-height: 1.55 }
.mgmt-heading { font-family: var(--serif); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-soft); margin-top: 56px; margin-bottom: 6px }
.mgmt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 18px; align-items: stretch }
.mgmt-grid .person { background: var(--ink-2); border: 1px solid var(--hair); border-radius: 12px; padding: 24px }
.mgmt-grid .person .pn { font-family: var(--serif); font-size: 1.15rem; color: #fff; font-weight: 600 }
.mgmt-grid .person .pr { font-size: .78rem; color: var(--gold-soft); text-transform: uppercase; letter-spacing: .06em; margin: 4px 0 14px; line-height: 1.4 }
.mgmt-grid .person p { color: var(--muted-light); font-size: .92rem; line-height: 1.6; margin: 0 }
@media (max-width: 980px) { .mgmt-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 720px) { .mgmt-grid { grid-template-columns: 1fr } }

/* careers / pull */
.pull { margin-top: 30px; padding: 32px 34px; border-left: 3px solid var(--accent); background: rgba(14, 26, 43, .04); border-radius: 0 10px 10px 0 }
.pull p { font-size: 1.02rem; color: var(--prose); margin-bottom: 12px }
.pull p:last-child { margin-bottom: 0 }
.pull strong { color: var(--text); font-weight: 600 }
.dark .pull { background: rgba(255, 255, 255, .04) }
.dark .pull p { color: #c5d2dd }
.dark .pull p strong { color: #fff }
.dark .pull a { color: var(--gold-soft); border-bottom: 1px solid var(--seam) }

/* ---------------- support services ---------------- */
.svc-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px }
.svc-list li { background: var(--paper-2); border: 1px solid var(--hair-dark); border-radius: 10px; padding: 20px 22px; font-size: .98rem; color: var(--prose) }
.svc-list li strong { display: block; color: var(--text); font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px }

/* ---------------- contact ---------------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 46px; align-items: start }
.contact-form { background: var(--paper-2); border: 1px solid var(--hair-dark); border-radius: 12px; padding: 32px 32px; display: flex; flex-direction: column; gap: 18px }
.form-row { display: flex; flex-direction: column; gap: 6px }
.form-row.splitf { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.form-row label { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600 }
.form-row input, .form-row textarea { font-family: var(--sans); font-size: 1rem; padding: 12px 14px; border: 1px solid var(--hair-dark); border-radius: 8px; background: #fff; color: var(--text); transition: border-color .2s, box-shadow .2s; width: 100% }
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--ring) }
.form-row textarea { resize: vertical; min-height: 130px; line-height: 1.5 }
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px }
.form-actions .btn-primary { padding: 12px 26px }
.form-note { font-size: .82rem; color: var(--muted); font-style: italic }
.form-alert { background: #fbeae0; border: 1px solid #d8a07e; border-left: 3px solid #b04a22; border-radius: 8px; padding: 14px 18px; margin-top: 24px; color: #7c3014; font-size: .95rem; line-height: 1.5 }
.form-alert strong { display: block; color: #5f240f; font-weight: 600; margin-bottom: 2px; font-family: var(--serif) }
.loc-card { background: var(--paper-2); border: 1px solid var(--hair-dark); border-radius: 12px; padding: 28px 30px }
.loc-card h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin-bottom: 6px }
.loc-card .lr { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-dark); margin-bottom: 14px }
.loc-card .addr { font-size: .96rem; color: var(--prose); line-height: 1.6 }
.dir-list { list-style: none; padding: 0; margin: 0 }
.dir-list li { padding: 13px 0; border-bottom: 1px solid var(--hair-dark); display: flex; flex-direction: column; gap: 2px }
.dir-list li:last-child { border-bottom: none; padding-bottom: 0 }
.dir-list .dr { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gold-dark); font-weight: 600 }
.dir-list .dn { font-family: var(--serif); font-weight: 600; color: var(--text); font-size: 1rem }
.dir-list a { color: var(--muted); font-size: .92rem; text-decoration: underline; text-decoration-color: var(--seam); text-underline-offset: 3px }
.dir-list a:hover { color: var(--gold-dark) }
.dir-list .dp { color: var(--prose); font-size: .92rem }

/* ---------------- footer ---------------- */
footer { background: var(--shell); color: var(--muted-light); padding: 54px 0 72px; font-size: .9rem }
.foot-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--hair) }
.foot-brand { display: block }
.foot-brand-img { height: clamp(40px, calc(5vw + 20px), 60px); width: auto; display: block }
.foot-cols { display: flex; gap: 56px; flex-wrap: wrap }
.foot-cols h2 { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px }
.foot-cols a, .foot-cols span { display: block; margin-bottom: 9px; transition: color .2s; color: var(--muted-light) }
.foot-cols a:hover { color: var(--gold-soft) }
.foot-bottom { padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: #7a8c9c }
@media (max-width: 640px) {
  footer { padding: 44px 0 90px }
  .foot-top { gap: 28px 36px }
  .foot-cols { gap: 36px }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 6px }
}

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  .navlinks { display: none }
  .menu-toggle { display: inline-flex; margin-left: auto }
  nav { gap: 12px }
  .cards, .svc-list, .split, .about-grid, .contact-grid, .subgrid, .feature-list.two { grid-template-columns: 1fr }
  .js .cards > .reveal:nth-child(2) { margin: 0 }  /* highlight pop-out only makes sense in the multi-column layout */
  section.block { padding: 64px 0 }
  .hero { padding: 76px 0 64px }
}
@media (max-width: 430px) {
  header .wrap { padding-left: 20px; padding-right: 20px }
  .mobile-panel { right: 20px }
}

/* =========================================================
   Sibling nav (inline inside the hero) + prev/next bottom nav
   ========================================================= */
.sib-nav {
  margin-top: 30px; padding-top: 20px;
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px
}
.sib-list { display: flex; flex-wrap: wrap; gap: 0 26px; list-style: none; align-items: baseline }
.sib-list li { position: relative }
.sib-list li + li::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: rgba(159, 176, 191, .45)
}
.sib-list a {
  font-size: .9rem; color: var(--muted-light); padding: 4px 0;
  position: relative; transition: color .15s
}
.sib-list a:hover { color: #fff }
.sib-list a[aria-current="page"] { color: var(--gold-soft); font-weight: 500 }
.sib-list a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold)
}

.prevnext {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(14,26,43,.12)
}
.prevnext a {
  display: block; padding: 16px 20px;
  border: 1px solid rgba(14,26,43,.14); border-radius: 8px;
  transition: background .15s, border-color .15s
}
.prevnext a:hover { background: rgba(14, 26, 43, .04); border-color: var(--gold) }
.prevnext .pn-prev { text-align: left }
.prevnext .pn-next { text-align: right; grid-column: 2 }
.prevnext .pn-label {
  display: block; font-family: var(--sans); font-size: .66rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; margin-bottom: 4px
}
.prevnext .pn-title {
  display: block; font-family: var(--serif); font-size: 1.08rem;
  color: var(--ink); line-height: 1.25; transition: color .15s
}
.prevnext a:hover .pn-title { color: var(--gold-dark) }
.prevnext.only-prev .pn-prev { grid-column: 1 / span 2 }
.prevnext.only-next .pn-next { grid-column: 1 / span 2 }
.page-back {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 40px
}
.page-back:has(a:only-child) { justify-content: center }
.page-back a {
  font-family: var(--sans); font-size: .85rem; color: var(--muted);
  padding-bottom: 2px; border-bottom: 1px solid rgba(14,26,43,.18);
  transition: color .15s, border-color .15s
}
.page-back a:hover { color: var(--ink); border-bottom-color: var(--gold) }
@media (max-width: 640px) {
  .page-back { flex-direction: column; align-items: flex-start; gap: 10px }
}
@media (max-width: 640px) {
  .prevnext { grid-template-columns: 1fr; gap: 10px }
  .prevnext .pn-prev, .prevnext .pn-next { grid-column: 1; text-align: left }
}

/* mobile: prevent horizontal overflow from ch-based max-widths on long words */
html, body { overflow-x: hidden; max-width: 100vw }
@media (max-width: 640px) {
  .wrap { padding-left: 18px; padding-right: 18px }
  h1 { font-size: 1.55rem; max-width: none; line-height: 1.18; overflow-wrap: anywhere; word-break: break-word }
  .hero { padding: 60px 0 48px }
  .hero.short { padding: 18px 0 22px }
  .hero.short .hero-split { flex-direction: column; align-items: flex-start; gap: 0 }
  .hero.short .hero-split .hero-mark { order: -1; height: 44px; margin-bottom: 12px }
  .hero .lede { max-width: none; font-size: 1rem }
  .hero-bullets { max-width: none }
  .sec-title, .standfirst, .sec-intro, .support-rest, .body-copy p { max-width: none }
  .sec-title { font-size: 1.4rem; line-height: 1.22 }
  .standfirst { font-size: 1rem }
}

/* =========================================================
   Sitemap dropdown + standalone sitemap page
   ========================================================= */

/* hamburger trigger button — sized to match text-link visual weight */
.sitemap-trigger {
  background: none; border: none; cursor: pointer;
  color: var(--muted-light); padding: 6px 4px;
  min-width: 24px; min-height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s
}
.sitemap-trigger svg { display: block }
.has-menu:hover .sitemap-trigger, .has-menu:focus-within .sitemap-trigger { color: #fff }

/* panel — three columns of plain links */
.sitemap-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(720px, calc(100vw - 64px));
  background: var(--ink-2); color: #c5d2dd;
  border: 1px solid var(--hair); border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0,0,0,.4);
  padding: 22px 24px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  /* CLOSE state: ~350ms delay before the panel actually starts hiding, so brief
     mouse drift outside the trigger/panel doesn't insta-kill it. If the cursor
     comes back during the delay, the OPEN rule (below, 0s delay) takes over. */
  transition: opacity .18s ease .35s, transform .18s ease .35s, visibility 0s .53s
}
/* invisible hover-bridge — generous slop area around and above the panel so
   small mouse wobbles between the icon and the panel stay in the hover region */
.sitemap-panel::before {
  content: ""; position: absolute; left: -20px; right: -20px; top: -20px; height: 26px
}
.has-menu:hover .sitemap-panel, .has-menu:focus-within .sitemap-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
  /* OPEN state: no delay — opens instantly on hover/focus. */
  transition: opacity .15s ease 0s, transform .15s ease 0s, visibility 0s 0s
}
/* widen the trigger's effective hover area too */
.sitemap-trigger { padding: 10px 12px }
.sm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px }
.sm-col .sm-h {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 10px; font-weight: 600
}
.sm-col ul { list-style: none; display: flex; flex-direction: column; gap: 1px }
.sm-col a {
  display: block; padding: 5px 8px; border-radius: 4px;
  font-size: .88rem; color: var(--muted-light);
  transition: background .15s, color .15s
}
.sm-col a:hover, .sm-col a:focus-visible { background: rgba(255,255,255,.05); color: #fff }
.sm-col a.sub { padding-left: 20px; font-size: .82rem; color: #94a4b3 }
.sm-col a.sub:hover, .sm-col a.sub:focus-visible { color: var(--muted-light) }
.sm-full {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 6px 8px;
  font-family: var(--sans); font-size: .76rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft);
  transition: color .15s
}
.sm-full:hover { color: #fff }
@media (max-width: 880px) { .sm-grid { grid-template-columns: 1fr 1fr; gap: 18px } }

/* standalone sitemap page — three columns, light on paper */
.sitemap-page {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  max-width: 980px; margin: 0 auto
}
.sitemap-page h2 {
  font-family: var(--sans); font-size: .76rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-dark); font-weight: 700;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(14,26,43,.15)
}
.sitemap-page ul { list-style: none; display: flex; flex-direction: column; gap: 2px }
.sitemap-page a {
  display: block; padding: 6px 0;
  font-family: var(--serif); font-size: 1.05rem; color: var(--ink);
  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s
}
.sitemap-page a:hover { color: var(--gold-dark); border-bottom-color: var(--gold) }
.sitemap-page a.sub {
  padding-left: 16px; font-size: .95rem; color: var(--muted);
  font-family: var(--sans)
}
.sitemap-page a.sub:hover { color: var(--ink) }
@media (max-width: 800px) {
  .sitemap-page { grid-template-columns: 1fr; gap: 36px }
}

/* ---------------- theme switcher (decision UI) ---------------- */
/* Theme switcher HIDDEN for public launch — reversible: delete this one rule to restore the
   picker. Markup + JS stay dormant; default theme is classic. display:none also removes it from
   the tab order and the accessibility tree (WCAG keyboard requirement, Checkpoint 5B). */
.theme-switch { display: none !important; }
.theme-switch { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; align-items: center; gap: 11px; background: var(--shell); border: 1px solid var(--hair); border-radius: 999px; padding: 9px 14px; box-shadow: 0 12px 32px rgba(0,0,0,.4) }
.theme-switch .ts-label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted-light) }
.theme-switch .ts-opts { display: flex; gap: 8px }
.theme-switch button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .15s, border-color .15s; outline-offset: 3px }
.theme-switch button:hover { transform: scale(1.14) }
.theme-switch button[aria-pressed="true"] { border-color: #fff }

.theme-switch .sw-classic { background: #2a3ccb }
.theme-switch .sw-teal { background: #0e7e92 }
.theme-switch .sw-emerald { background: #158452 }
.theme-switch .sw-crimson { background: #dc2656 }
.theme-switch .sw-violet { background: #8e56d7 }
@media (max-width: 560px) { .theme-switch .ts-label { display: none } }

/* ---------------- scroll reveal (progressive enhancement) ---------------- */
/* Hidden state applies ONLY when JS is active (html.js). No JS -> fully visible. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); transition-delay: var(--rd, 0s); will-change: opacity, transform }
.js .reveal.is-visible { opacity: 1; transform: none }
.js .reveal.d1 { --rd: .08s }
.js .reveal.d2 { --rd: .16s }
/* row-grid stagger so cards cascade in left-to-right */
.js .cards > .reveal:nth-child(2) { --rd: .10s; margin: -10px }
.js .cards > .reveal:nth-child(3) { --rd: .20s }
.js .subgrid > .reveal:nth-child(2) { --rd: .10s }
.js .mgmt-grid > .reveal:nth-child(2) { --rd: .10s }
.js .mgmt-grid > .reveal:nth-child(3) { --rd: .20s }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none }
}


/* ---------------- product cards (white card on dark, native mark) ---------------- */
.card.prod { background: var(--paper); border: 1px solid var(--hair-dark); border-top: 3px solid var(--prod) }
.card.prod h3 { color: var(--ink) }
.card.prod p { color: var(--prose) }
.card.prod .role { color: var(--prod); font-weight: 700 }
.card.prod .go { color: var(--prod) }
.card.prod:hover { border-color: var(--prod); box-shadow: 0 24px 46px -24px rgba(14,26,43,.4) }
.prod-mark { height: 46px; width: auto; align-self: flex-start; display: block; margin-bottom: 20px }
.hero-mark { height: 54px; width: auto; display: block; margin-bottom: 24px }

/* ---------------- CAPTCHA modal (themed) ---------------- */
.cap-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px }
.cap-modal[hidden] { display: none }
.cap-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 20, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px) }
.cap-dialog { position: relative; z-index: 1; width: 100%; max-width: 384px; background: var(--paper-2); color: var(--text); border: 1px solid var(--hair-dark); border-radius: 16px; padding: 30px 30px 26px; box-shadow: 0 30px 80px -22px rgba(0, 0, 0, .55); animation: cap-pop .22s cubic-bezier(.2, .7, .3, 1) }
.cap-title { font-family: var(--serif); font-size: 1.42rem; font-weight: 600; color: var(--ink); margin-bottom: 6px }
.cap-sub { color: var(--prose); font-size: .94rem; margin-bottom: 20px }
.cap-box { min-height: 140px; display: flex; align-items: center; justify-content: center }
.cap-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 8px; transition: background .15s, color .15s }
.cap-close:hover { color: var(--ink); background: var(--hair-dark) }
@keyframes cap-pop { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .cap-dialog { animation: none } }
.req { color: var(--accent); font-weight: 700 }
.form-row input:user-invalid, .form-row textarea:user-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .14) }
.cap-sending { text-align: center; padding: 8px 0 2px }
.cap-spin { display: inline-block; width: 34px; height: 34px; border: 3px solid var(--hair-dark); border-top-color: var(--accent); border-radius: 50%; animation: cap-spin .7s linear infinite; margin-bottom: 14px }
@keyframes cap-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .cap-spin { animation: none } }
.form-sent { background: var(--paper-2); border: 1px solid var(--hair-dark); border-radius: 12px; padding: 44px 32px; text-align: center; animation: cap-pop .4s cubic-bezier(.2, .7, .3, 1) }
.form-sent[hidden] { display: none }
.sent-ic { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center }
.sent-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -.01em }
.sent-sub { color: var(--prose); font-size: .97rem; line-height: 1.6 }
.sent-sub a { color: var(--accent-dark); border-bottom: 1px solid var(--ring); white-space: nowrap }