/* Hallmark · shape: Index-First · genre: atmospheric · theme: Terminal (deal by request) · job: hire · draw: 44a0c7
 * hero: Banner · nav: tab bar, cells parted by hairlines, the contact as the one accent block · footer: colophon block · imagery: none, the contact line as the theme's install well · signature: the argument on the first screen, closed by a caret that blinks five times and holds
 * axes: dark/mono/chromatic-green · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: E, the theme's pictures print in glyphs and this page has no subject to print; built the contact as an install well with a copy control instead of inventing a picture */
/* Hallmark · hero-review: in-thread · the drawn Corridor left a dead band under a head capped at 3.75rem · took Banner, and the contact well carries the first screen's object */
/* Hallmark · copy: verbatim · the hero's sentence and the company name are the owner's own words, kept as written */
/* Hallmark · dismissed 58 · the hero sentence is the owner's, 23 words, kept verbatim at their request */
/* Hallmark · finish-review: in-thread · 4 findings · 4 resolved · the email ran in accent at display size (moved to ink, accent kept for signals), the layout spared a file for the copy control's disabled state (added), the footer repeated the offer already in the lead (cut to the name), and the tab row sat against the action (tabs moved beside the wordmark) */
@import url("./tokens.css");
@import url("./base.css");

body { font-stretch: var(--stretch-body); font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-stretch: var(--stretch-display); line-height: 1.12; }
h1 { max-width: 22ch; font-size: var(--text-display-s); }
h2 { max-width: 26ch; }
h3 { max-width: 24ch; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-sm); }
.skip:focus-visible { top: var(--space-md); }

/* nav: tab bar */
.bar { border-bottom: var(--rule-hair) solid var(--color-rule); }
.bar__row { display: flex; align-items: stretch; gap: 0; min-height: 64px; }
.bar__mark { display: flex; align-items: center; padding-right: var(--space-lg); }
.bar__mark img { height: 34px; width: auto; }
.bar__tabs { display: flex; align-items: stretch; }
.bar__tabs a { display: flex; align-items: center; padding-inline: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; transition: background-color var(--dur-micro) steps(1, end), color var(--dur-micro) steps(1, end); }
.bar__tabs a:hover { background: var(--color-paper-3); color: var(--color-ink); }
.bar__cta { display: flex; align-items: center; padding-inline: var(--space-lg); margin-left: auto; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: background-color var(--dur-micro) steps(1, end); }
.bar__cta:hover { background: var(--glyph-7); }
@media (max-width: 60rem) { .bar__tabs { display: none; } .bar__mark { padding-right: 0; } }

/* hero: Banner */
.hero { min-height: 56svh; display: grid; align-items: center; padding-block: var(--space-2xl); }
.hero__col { display: grid; gap: var(--space-lg); justify-items: start; }
.hero .lead { color: var(--color-ink-2); max-width: 44ch; }
.caret::after { content: ""; display: inline-block; width: 0.5em; height: 1em; margin-left: 0.08em; background: var(--color-accent); vertical-align: text-bottom; animation: caret 1s steps(1, end) 5 forwards; }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret::after { animation: none; opacity: 1; } }

/* the contact line, as the theme's install well */
.line { display: inline-flex; align-items: center; gap: var(--space-md); padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-lg); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); max-width: 100%; }
.line a { font-size: var(--text-lg); color: var(--color-ink); text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--color-rule-2); overflow-wrap: anywhere; min-width: 0; }
.line a:hover { text-decoration-color: var(--color-accent); color: var(--color-accent); }
.copy { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-3); color: var(--color-ink-2); cursor: pointer; transition: color var(--dur-micro) steps(1, end), border-color var(--dur-micro) steps(1, end); }
.copy:hover { color: var(--color-accent); border-color: var(--color-rule-2); }
.copy:active { background: var(--color-paper-2); }
.copy svg { display: block; }
.copy .tick { display: none; }
.copy[data-done] { color: var(--color-accent); border-color: var(--color-accent); }
.copy[data-done] .tick { display: block; }
.copy[data-done] .sheet { display: none; }
.phone { font-size: var(--text-md); color: var(--color-muted); }
.phone a { color: var(--color-ink-2); }

/* rows: the three areas, a reference list */
.areas { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-3xl); padding-bottom: var(--section-gap); }
.areas h2 { margin-bottom: var(--space-2xl); }
.areas__list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.areas__list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); transition: background-color var(--dur-micro) steps(1, end); }
.areas__list li:hover { background: var(--color-paper-3); }
.areas__list h3 { color: var(--color-ink); }
.areas__list p { color: var(--color-ink-2); max-width: 56ch; }

/* statement */
.claim { font-size: var(--text-display-s); font-stretch: var(--stretch-display); font-weight: var(--display-weight); line-height: 1.15; letter-spacing: var(--tracking-display); max-width: 26ch; color: var(--color-ink); }
.statement { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--section-gap); }

/* close */
.contact { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--section-gap-s); }
.contact h2 { margin-bottom: var(--space-2xl); }
.contact__lines { display: grid; gap: var(--space-sm); justify-items: start; margin-bottom: var(--space-2xl); }
.big { font-size: clamp(1.5rem, 4.4vw, 3.5rem); font-stretch: var(--stretch-display); font-weight: 400; line-height: 1.2; letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.big:hover { text-decoration: underline; text-decoration-style: dotted; }
.contact__lines a:last-child { font-size: var(--text-xl); color: var(--color-ink-2); }
.facts { width: 100%; border-collapse: collapse; border-top: var(--rule-hair) solid var(--color-rule-2); }
.facts th, .facts td { text-align: left; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.facts th { width: 30%; color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; padding-right: var(--space-md); }
.facts td { font-size: var(--text-md); color: var(--color-ink); }

/* footer: colophon */
.mast { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--section-gap-s); }
.mast__name { font-size: var(--text-title); font-stretch: var(--stretch-display); color: var(--color-ink); }
.mast p { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); max-width: 62ch; line-height: 1.7; }
.legal { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-md); }

@media (max-width: 60rem) {
  .areas__list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .hero h1 { max-width: 20ch; }
}
@media (max-width: 40rem) {
  .line { gap: var(--space-sm); padding-left: var(--space-md); }
  .line a { font-size: var(--text-md); }
  .bar__cta { padding-inline: var(--space-md); }
  .bar__mark img { height: 28px; }
}

/* fixes after the first sweep */
.copy:disabled { opacity: 0.55; cursor: not-allowed; }.areas { padding-top: var(--space-2xl); }