/* Hallmark · shape: Index-First (draw 687cd4 dealt Letter; swapped: seven control areas and four services are a reference to scan, not a personal note) · genre: editorial · theme: brand · redesign: full · draw: 687cd4
 * paper: oklch(98.6% 0.005 125) · accent: oklch(62% 0.22 29) · display: Poppins · body: Poppins · hero: Banner · nav: edge-aligned (draw dealt search-led; swapped: a one-page site has nothing to search) · footer: mast (draw dealt index columns; swapped: no sitemap to index) · signature: the seven control areas set as the index a regulator reads
 * axes: light/geometric-sans/chromatic-red · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the hero head could sit on another consultancy's page; kept as the owner's line and let the control-area index carry the specificity */
/* Hallmark · reworded "signed — and the practice" to "signed, and the practice" · 19 names the dash */
/* Hallmark · reworded "We do not hand over advice — we hand over" to "We do not hand over advice; we hand over" · 19 names the dash */
/* Hallmark · reworded "compliant standard — written to be run" to "compliant standard, written to be run" · 19 names the dash */
/* Hallmark · reworded "depends on — document control" to "depends on: document control" and "come back — 510(k)" to "come back: 510(k)" · 19 names the dash */
/* Hallmark · dropped the "Why we exist", "What we do", "Expertise", "Standards", "Partners", "Get in touch" eyebrows and the 01 to 07 labels · 54 names them; the numbers are now an ol counter */
/* Hallmark · reworded "Tell us what you're preparing for" to "Tell us what you’re preparing for" · F1 names the straight quote */
/* Hallmark · waive 1 · theme: brand, display face read from the project · Poppins is the Mrovin brand face (Mrovin Design Language), kept at every depth */
@import url("./tokens.css");
@import url("./base.css");

:root { --display-weight: 500; --nav-h: 72px; }

body { line-height: 1.6; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-4xl)); z-index: var(--z-modal); padding: var(--space-sm) var(--space-lg); background: var(--color-deep); color: var(--color-on-deep); font-weight: 600; }
.skip:focus-visible { top: var(--space-md); }

.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }

/* ---------- nav: edge-aligned ---------- */
header { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); min-height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.brand img.mark { width: 32px; height: 32px; border-radius: var(--radius-card); flex-shrink: 0; }
.brand .word { display: block; width: 112px; height: 26px; background-color: var(--color-deep); -webkit-mask: url(assets/word_white.png) no-repeat left center / contain; mask: url(assets/word_white.png) no-repeat left center / contain; }
.navlinks { display: flex; align-items: center; gap: var(--space-xl); }
.navgroup { display: flex; align-items: center; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; }
.navgroup a { font-size: var(--text-sm); color: var(--color-ink); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.navgroup a:hover { color: var(--color-accent); }
.navgroup a:active { color: var(--color-ink-2); }
.navgroup.right a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }
.navtoggle { display: none; min-height: 44px; min-width: 44px; padding: var(--space-xs); background: none; border: 0; cursor: pointer; color: var(--color-ink); }
.navtoggle:active { color: var(--color-ink-2); }
.navtoggle span { display: block; width: 22px; height: 2px; margin: var(--space-2xs) auto; background: currentColor; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-deep); border-radius: var(--radius-card); background: var(--color-deep); color: var(--color-on-deep); font: 600 var(--text-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-deep-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-ink-2); }
.btn--quiet:hover { background: var(--color-paper-2); }
.textlink { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; transition: color var(--dur-short) var(--ease-out); }
.textlink:hover { color: var(--color-accent); }
.textlink:active { color: var(--color-ink-2); }

/* ---------- reveal (one, visible without script) ---------- */
.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- hero: banner ---------- */
.hero { padding-block: var(--space-3xl) var(--section-gap-s); }
.hero h1 { grid-column: 1 / 11; max-width: 16ch; font-size: var(--text-display); line-height: 1.02; }
.hero .heroline { grid-column: 1 / 7; margin-top: var(--space-xl); }
.hero .lead { color: var(--color-ink-2); }
.hero .cta { grid-column: 8 / 13; align-self: end; display: flex; justify-content: flex-end; gap: var(--space-sm); flex-wrap: wrap; }

/* ---------- the distance: showcase + record ---------- */
.intro { padding-block: 0 var(--section-gap); }
.intro figure { margin: 0; }
.intro .shot { aspect-ratio: 21 / 9; max-height: 620px; width: 100%; object-fit: cover; border-radius: var(--radius-card); filter: grayscale(1) contrast(1.08); }
.intro figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.intro .body { margin-top: var(--space-3xl); row-gap: var(--space-2xl); }
.intro h2 { grid-column: 1 / 6; }
.intro .prose { grid-column: 7 / 13; display: grid; gap: var(--space-lg); }
.intro .prose p { font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink-2); }
.record { grid-column: 7 / 13; margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.record > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.record dt { font-size: var(--text-xl); font-weight: 500; color: var(--color-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.record dd { margin: 0; color: var(--color-muted); }

/* ---------- services: deep band ---------- */
.band { background: var(--color-deep); color: var(--color-on-deep); padding-block: var(--section-gap-s); }
.band :focus-visible { outline-color: var(--color-focus-deep); }
.band h2 { grid-column: 1 / 7; color: var(--color-on-deep); }
.band .lead { grid-column: 7 / 13; align-self: end; color: var(--color-on-deep-muted); }
.svcs { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.svc { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-sage); display: flex; flex-direction: column; gap: var(--space-md); }
.svc h3 { color: var(--color-on-deep); }
.svc p { color: var(--color-on-deep-muted); }
.svc ul { list-style: none; margin: var(--space-xs) 0 0; padding: 0; }
.svc li { padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule-deep); color: var(--color-on-deep); }
.band .cta { margin-top: var(--space-2xl); }
.band .btn { background: transparent; color: var(--color-on-deep); border-color: var(--color-sage); }
.band .btn:hover { background: var(--color-deep-2); }

/* ---------- expertise: the index ---------- */
.expertise { padding-block: var(--section-gap-l) var(--section-gap); }
.expertise .head { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); display: grid; gap: var(--space-lg); }
.expertise .head .lead { color: var(--color-muted); }
.xlist { grid-column: 7 / 13; list-style: none; margin: 0; padding: 0; counter-reset: area; border-top: var(--rule-hair) solid var(--color-ink); }
.xitem { counter-increment: area; display: grid; grid-template-columns: var(--space-3xl) minmax(0, 1fr); gap: var(--space-xs) 0; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.xitem::before { content: counter(area); grid-row: 1 / 3; font-size: var(--text-title); font-weight: 500; line-height: 1.2; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.xitem h3 { color: var(--color-deep); }
.xitem p { color: var(--color-muted); }

/* ---------- standards ---------- */
.standards { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.standards h2 { grid-column: 1 / 5; }
.stdlist { grid-column: 5 / 13; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.stdlist li { padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-lg); font-weight: 500; color: var(--color-deep); }

/* ---------- partners ---------- */
.partners { padding-block: var(--section-gap); }
.partners h2 { margin-bottom: var(--space-2xl); }
.plogos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.plogos a { display: grid; grid-template-rows: 120px auto; gap: var(--space-lg); padding: var(--space-xl) 0; border-top: var(--rule-hair) solid var(--color-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.plogos a:hover { background: var(--color-paper-2); }
.plogos a:active { background: var(--color-paper-3); }
.plogos .logo { display: flex; align-items: center; }
.plogos img { width: auto; }
.plogos .amcham { height: 96px; } .plogos .moh { height: 104px; } .plogos .mec { height: 72px; }
.plogos .name { font-weight: 600; color: var(--color-deep); }
.plogos .sub { display: block; font-weight: 400; color: var(--color-muted); }

/* ---------- contact close ---------- */
.contact { position: relative; isolation: isolate; color: var(--color-on-deep); background: var(--color-deep); padding-block: var(--section-gap); }
.contact .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(1) brightness(0.5); }
.contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, var(--color-deep) 84%, transparent); }
.contact :focus-visible { outline-color: var(--color-focus-deep); }
.contact h2 { grid-column: 1 / 9; color: var(--color-on-deep); }
.contact .lead { grid-column: 1 / 7; margin-top: var(--space-lg); color: var(--color-on-deep-muted); }
.mail { grid-column: 1 / 13; justify-self: start; margin-top: var(--space-2xl); font-size: var(--text-display-s); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.1; color: var(--color-on-deep); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-sage); text-underline-offset: 0.18em; overflow-wrap: anywhere; min-width: 0; transition: color var(--dur-short) var(--ease-out); }
.mail:hover { color: var(--color-sage); }
.mail:active { color: var(--color-on-deep-muted); }

/* ---------- footer: mast ---------- */
footer { padding-block: var(--space-3xl) var(--space-xl); background: var(--color-paper); }
.mast { width: min(100%, 560px); aspect-ratio: 678 / 158; background-color: var(--color-deep); -webkit-mask: url(assets/word_white.png) no-repeat left center / contain; mask: url(assets/word_white.png) no-repeat left center / contain; }
.cmeta { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-2xl); color: var(--color-muted); }
.cmeta a { color: var(--color-ink); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.cmeta a:hover { color: var(--color-accent); }
.cmeta a:active { color: var(--color-ink-2); }
.cmeta .li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.cmeta .li svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .navtoggle { display: block; }
  .nav { flex-wrap: wrap; gap: 0; }
  .navlinks { display: contents; }
  .navgroup { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .navgroup.open { display: flex; }
  .navgroup.right.open { padding-bottom: var(--space-xs); }
  .navgroup li { border-top: var(--rule-hair) solid var(--color-rule); }
  .navgroup a { display: block; padding-block: var(--space-md); font-size: var(--text-md); }
  .hero h1, .hero .heroline, .hero .cta, .intro h2, .intro .prose, .record, .band h2, .band .lead, .expertise .head, .xlist, .standards h2, .stdlist, .contact h2, .contact .lead { grid-column: 1 / -1; }
  .hero .cta { justify-content: flex-start; margin-top: var(--space-xl); }
  .band .lead { margin-top: var(--space-lg); }
  .svcs { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .expertise .head { position: static; margin-bottom: var(--space-2xl); }
  .standards h2 { margin-bottom: var(--space-xl); }
  .plogos { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 40rem) {
  .stdlist { grid-template-columns: minmax(0, 1fr); }
  .record > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .xitem { grid-template-columns: var(--space-2xl) minmax(0, 1fr); }
  .hero .cta .btn { flex: 1 1 100%; justify-content: center; }
  .mail { font-size: var(--text-2xl); white-space: nowrap; }
}