/* Hallmark · shape: mission-led showcase · genre: modern-minimal · theme: brand · redesign: full
 * brand: Vamocles, local tokens · hero: Stage (home and products), Banner (editorial)
 * nav: stable bar · footer: statement and directory · signature: aerial patrol and model imagery
 * v2.0.0 · local assets only · legacy demo exceptions recorded in .hallmark/full-revamp/review.json */
/* Critique: prioritise the mission and working demonstrations; remove decorative competition. */
/* Hallmark · answered F7 · media share a restrained 12px corner; open rows, solid controls and image frames have different surface roles. */
/* Hallmark · answered F15 · editorial copy/visual splits use 64px; dense card and directory grids use 32px, with responsive gaps below. */
:root {
  --container: 1280px;
  --container-wide: 1280px;
  /* Never narrower than the notch or Dynamic Island inset: pages render edge to edge
     (viewport-fit=cover), and in landscape that inset is wider than the gutter. */
  --gutter: max(clamp(20px, 4.5vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gap-columns: 32px;
  --fs-hero: clamp(2.75rem, 5.8vw, 5.5rem);
  --fs-display: clamp(2.125rem, 4.2vw, 3.75rem);
  --fs-lead: clamp(1.125rem, 1.4vw, 1.3125rem);
  --weight-display: 650;
  --weight-heading: 650;
  --tracking-mega: -0.05em;
  --tracking-display: -0.04em;
  --lh-tight: 1.04;
  --lh-body: 1.6;
  --section-y: clamp(80px, 9vw, 144px);
  --section-y-sm: clamp(64px, 6vw, 96px);
  --control-h-lg: 52px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 12px;
  --r-xl: 12px;
  --r-2xl: 12px;
  --header-h-compact: 72px;
  --header-top-compact: 0px;
  --hm-shadow: 0 20px 48px -36px rgb(5 5 6 / 0.3);
  --hm-media-scrim: linear-gradient(180deg, transparent 48%, rgb(5 5 6 / 0.8));
  --hm-clear: transparent;
  --hm-accent-night: #FF4863;
}
html, body { overflow-x: clip; scrollbar-color: var(--ink-4) var(--paper); }
main :is(h1, h2, .display, .page-hero__title) { font-weight: var(--weight-display); text-wrap: balance; }
main :is(.display, .page-hero__title) { overflow-wrap: break-word; min-width: 0; }
/* Revealed blocks stay still on hover (no lifts); a press may still scale them.
   The reveal itself runs through core.js and never hides content in CSS. */
main [data-reveal]:hover:not(:active) { transform: none !important; }
.page-hero { padding-top: calc(var(--header-h) + 80px); padding-bottom: 80px; }
.page-hero__title { margin-top: 0; line-height: var(--lh-tight); }
.page-hero__lead { margin-top: 24px; }
.page-hero__actions { margin-top: 32px; }
.page-hero__bg, .bg-art, .seam { display: none; }
.hero-media { box-shadow: none; border-radius: var(--r-md); }
.ink-gradient, .crimson-gradient { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }
.btn {
  border-radius: var(--r-xs); box-shadow: none;
  /* colour 180ms; press out 200ms (in 90ms, components.css); busy and disabled dim through opacity */
  transition: background-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft),
    opacity var(--t-fast) var(--ease-soft), transform var(--t-exit) var(--ease-out);
}
.btn--primary { --btn-ink: var(--white); box-shadow: none; }
.btn--lg { padding: 12px 24px; }
.btn--glass { --btn-bg: var(--hm-clear); --btn-ink: var(--ink); --btn-line: var(--ink-4); backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn--secondary { --btn-line: var(--ink-4); }
@media (hover: hover) { .btn--glass:not(:disabled):not([aria-disabled="true"]):hover { --btn-bg: var(--paper-3); --btn-line: var(--ink-3); } }
.cta-band .btn--glass { --btn-ink: var(--white); --btn-line: var(--night-ink-3); }
@media (hover: hover) { .cta-band .btn--glass:not(:disabled):not([aria-disabled="true"]):hover { --btn-bg: var(--night-3); --btn-line: var(--night-ink-2); } }
.btn :is(.icon, vm-icon), .link-arrow .icon { transition: none; }
.link-arrow:hover .icon { transform: none; }
.chat__foot { color: var(--ink-3); }
.mx__tab[aria-selected="true"] .mx__tab-num { color: var(--night-ink); }
.card { box-shadow: none; border-color: var(--line-2); }
a.card:hover, .card--hover:hover { transform: none; box-shadow: none; }
.spotlight::before, .spotlight::after { display: none; }
.card__icon { background: none; border-radius: 0; justify-content: start; }
/* A quieter close, with the complete site directory preserved. */
.ftr { border-top: 1px solid var(--night-line); }
.ftr__cta { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 48px; padding-top: 88px; padding-bottom: 64px; text-align: left; }
.ftr__headline { max-width: 17ch; margin-inline: 0; font-size: var(--fs-display); font-weight: var(--weight-display); line-height: var(--lh-tight); }
.ftr__actions { margin: 0; justify-content: flex-end; }
.ftr__main { padding-top: 48px; padding-bottom: 48px; border-top: 1px solid var(--night-line); }
.ftr--bare .ftr__main { padding-top: 64px; border-top: 0; }
.ftr__lockup { margin-top: 0; padding-top: 24px; padding-bottom: 40px; }
.ftr__lockup-art { max-width: 480px; margin: 0; }
.ftr__base { padding-block: 24px; }
.ftr__tag { font-weight: 600; font-size: var(--fs-body); }
.ftr__note { max-width: 28ch; }
@media (max-width: 1024px) {
  .page-hero { padding-top: calc(var(--header-h) + 64px); padding-bottom: 64px; }
  .ftr__cta { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ftr__actions { justify-content: start; }
}
@media (max-width: 600px) {
  .page-hero { padding-top: calc(var(--header-h) + 48px); }
  .ftr__cta { padding-top: 64px; padding-bottom: 48px; }
  .ftr__actions { width: 100%; }
  .ftr__actions .btn { width: 100%; }
  .ftr__lockup-art { max-width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}
/* Marketing labels use the reading face; mono stays for technical data (tokens.css). */
.page-about .ab-no__k, .page-platform .pl-cta__k, .dpanel__model span {
  font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: none;
}
/* A tap leaves no browser highlight anywhere on the site: Chrome tinted a tapped card or
   link blue through the wait for the next page, and Back could bring a page back with the
   tapped row still tinted. Pressed states are the components' own; focus rings are
   unaffected. The property is inherited, so every element takes it from the root. */
html, :is(a, button, summary, label, [role="button"]) { -webkit-tap-highlight-color: transparent; }
/* Header and menu sheet. This belongs with the header rules in components.css; it sits
   here while that file is being edited elsewhere.
   · .mnav-cut (site-header.js): the desktop menu closes at once when the next page
     commits (pageswap), before the cross-fade takes its picture, so Back from the
     back/forward cache never shows it open or still closing. */
.mnav-cut vm-header, .mnav-cut vm-header *, .mnav-cut vm-header *::before, .mnav-cut vm-header *::after { transition: none !important; }
/* Legal contents (legal.js): the marker and the active entry take their first state at
   once while the page loads and settles; they glide only for the visitor's own scrolling. */
.toc-still, .toc-still *, .toc-still *::before, .toc-still *::after { transition: none !important; }