/* Hallmark · macrostructure: Single Offer (hero, proof list, steps + menu, form close) · tone: calm, plain · anchor hue: logo royal 264
 * theme: custom · paper oklch(99% 0.004 250) · ink navy oklch(21% 0.05 262) (the REVERSAL wordmark) · accent royal oklch(41% 0.17 264), cyan oklch(72% 0.12 215) only inside the mark
 * display: Lexend (wide geometric, like the wordmark) · body: IBM Plex Sans · labels: IBM Plex Mono
 * nav: N1b short bar + utility row (homepage only) · footer: shared Reversal footer (unchanged)
 * Homepage only (index.php). Shared header, footer markup and home.css are untouched.
 * Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4
 */
:root {
    --hw-paper: oklch(99% 0.004 250);
    --hw-paper-2: oklch(97% 0.01 250);
    --hw-paper-3: oklch(94% 0.018 252);
    --hw-rule: oklch(88.5% 0.02 255);
    --hw-ink: oklch(21% 0.05 262);
    --hw-ink-2: oklch(40% 0.035 260);
    --hw-royal: oklch(41% 0.17 264);
    --hw-royal-deep: oklch(33% 0.14 264);
    --hw-cyan: oklch(72% 0.12 215);
    --hw-tint: oklch(95.5% 0.025 255);
    --hw-white: oklch(100% 0 0);
    --hw-ok: oklch(45% 0.11 150);
    --hw-ok-bg: oklch(96% 0.03 150);
    --hw-err: oklch(45% 0.16 25);
    --hw-err-bg: oklch(96% 0.03 25);

    --hw-font-display: 'Lexend', 'Segoe UI', system-ui, sans-serif;
    --hw-font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --hw-font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    --hw-hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

    --hw-space-2xs: 0.5rem; --hw-space-xs: 0.75rem; --hw-space-sm: 1rem; --hw-space-md: 1.5rem;
    --hw-space-lg: 2rem; --hw-space-xl: 3rem; --hw-space-2xl: 5rem; --hw-space-3xl: 7rem;

    --hw-text-sm: 0.875rem; --hw-text-md: 1.0625rem; --hw-text-lg: 1.25rem;
    --hw-text-xl: clamp(1.6rem, 3.4vw, 2.25rem);
    --hw-text-display: clamp(2.3rem, 6vw, 4.25rem);

    --hw-radius: 4px;
    --hw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --hw-dur: 200ms;
    --hw-max: 1160px;
}

html, body { overflow-x: clip; }
html { scroll-padding-top: 88px; }

body.rvl-home {
    --rvl-font: var(--hw-font-body);
    margin: 0;
    background: var(--hw-paper);
    color: var(--hw-ink);
    font-family: var(--hw-font-body);
    font-feature-settings: normal;
    font-size: var(--hw-text-md);
    line-height: 1.6;
}

.rvl-home h1, .rvl-home h2, .rvl-home h3 { font-family: var(--hw-font-display); font-style: normal; margin: 0; color: var(--hw-ink); }
.rvl-home :focus-visible { outline: 2px solid var(--hw-royal); outline-offset: 3px; }

.hw-wrap { width: min(100% - 2rem, var(--hw-max)); margin-inline: auto; }

/* ---------- Buttons ---------- */
.hw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--hw-space-md);
    border-radius: var(--hw-radius);
    border: 1.5px solid transparent;
    font-family: var(--hw-font-display);
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--hw-dur) var(--hw-ease-out), border-color var(--hw-dur) var(--hw-ease-out), color var(--hw-dur) var(--hw-ease-out), transform var(--hw-dur) var(--hw-ease-out);
}
.hw-btn:active { transform: translateY(1px); }
.hw-btn-primary { background: var(--hw-royal); border-color: var(--hw-royal); color: var(--hw-white); }
.hw-btn-primary:hover { background: var(--hw-ink); border-color: var(--hw-ink); color: var(--hw-white); }
.hw-btn-quiet { background: transparent; border-color: var(--hw-rule); color: var(--hw-ink); }
.hw-btn-quiet:hover { border-color: var(--hw-ink); color: var(--hw-ink); }
.hw-btn-sm { min-height: 40px; padding: 0 var(--hw-space-sm); font-size: 0.9375rem; }

.hw-textlink { color: var(--hw-royal); font-family: var(--hw-font-display); font-weight: 500; text-underline-offset: 4px; white-space: nowrap; }
.hw-textlink:hover { color: var(--hw-ink); }

/* ---------- Header (homepage only) ---------- */
.hw-header { position: sticky; top: 0; z-index: 40; background: var(--hw-paper); border-bottom: 1px solid var(--hw-rule); }
.hw-util { background: var(--hw-ink); }
.hw-util-inner { display: flex; justify-content: flex-end; gap: var(--hw-space-md); min-height: 30px; align-items: center; }
.hw-util a { color: var(--hw-paper-3); font-size: 0.8125rem; text-decoration: none; white-space: nowrap; }
.hw-util a:hover { color: var(--hw-white); text-decoration: underline; }
.hw-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--hw-space-md); min-height: 64px; }
.hw-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--hw-ink); }
.hw-brand-mark { display: block; width: 32px; height: auto; }
.hw-brand-word { font-family: var(--hw-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.22em; text-transform: uppercase; }
.hw-nav { display: flex; gap: var(--hw-space-md); }
.hw-nav a { color: var(--hw-ink-2); text-decoration: none; font-weight: 500; font-size: 0.9375rem; white-space: nowrap; }
.hw-nav a:hover { color: var(--hw-royal); }
.hw-bar-end { display: flex; align-items: center; gap: var(--hw-space-xs); }
.hw-menu { position: relative; display: none; }
.hw-menu summary {
    list-style: none; cursor: pointer; min-height: 40px; padding: 0 var(--hw-space-xs);
    display: inline-flex; align-items: center; border: 1px solid var(--hw-rule); border-radius: var(--hw-radius);
    font-family: var(--hw-font-display); font-weight: 500; font-size: 0.9375rem; color: var(--hw-ink);
}
.hw-menu summary::-webkit-details-marker { display: none; }
.hw-menu[open] summary { border-color: var(--hw-ink); }
.hw-menu-panel {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px;
    display: grid; padding: var(--hw-space-2xs) 0;
    background: var(--hw-paper); border: 1px solid var(--hw-rule); border-radius: var(--hw-radius);
    box-shadow: 0 12px 32px oklch(21% 0.05 262 / 0.14);
}
.hw-menu-panel a { padding: 0.55rem var(--hw-space-sm); color: var(--hw-ink); text-decoration: none; white-space: nowrap; }
.hw-menu-panel a:hover { background: var(--hw-paper-2); }
.hw-menu-rule { height: 1px; margin: var(--hw-space-2xs) 0; background: var(--hw-rule); }

/* ---------- Hero ---------- */
.hw-hero { padding: var(--hw-space-2xl) 0 var(--hw-space-xl); }
.hw-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--hw-space-xl); align-items: center; }
.hw-hero-copy { min-width: 0; }
.hw-hero h1 {
    font-size: var(--hw-text-display);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.03em;
    max-width: 13ch;
    overflow-wrap: anywhere;
}
.hw-lead { margin: var(--hw-space-md) 0 0; max-width: 46ch; font-size: var(--hw-text-lg); line-height: 1.55; color: var(--hw-ink-2); }
.hw-actions { display: flex; flex-wrap: wrap; gap: var(--hw-space-xs); margin-top: var(--hw-space-lg); }
.hw-facts { list-style: none; margin: var(--hw-space-lg) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--hw-space-2xs) var(--hw-space-md); }
.hw-facts li { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--hw-font-mono); font-weight: 500; font-size: 0.8125rem; color: var(--hw-ink-2); }
.hw-facts li::before { content: ''; flex-shrink: 0; width: 8px; height: 9px; clip-path: var(--hw-hex); background: var(--hw-royal); }

/* the mark, shown whole, inside the hexagon it is built on */
.hw-hero-mark { position: relative; margin: 0; justify-self: center; width: min(360px, 100%); aspect-ratio: 200 / 230; display: grid; place-items: center; }
.hw-hex { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--hw-rule); }
.hw-hero-mark img { position: relative; width: 82%; height: auto; }

@keyframes hw-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hw-hero-copy > * { animation: hw-rise 640ms var(--hw-ease-out) both; }
.hw-hero-copy > :nth-child(2) { animation-delay: 70ms; }
.hw-hero-copy > :nth-child(3) { animation-delay: 140ms; }
.hw-hero-copy > :nth-child(4) { animation-delay: 200ms; }
.hw-hero-mark { animation: hw-rise 800ms var(--hw-ease-out) 120ms both; }

/* ---------- Sections ---------- */
.hw-section { padding: var(--hw-space-2xl) 0; scroll-margin-top: 88px; }
.hw-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hw-space-sm) var(--hw-space-md); flex-wrap: wrap; margin-bottom: var(--hw-space-lg); }
.hw-section h2 { font-size: var(--hw-text-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; min-width: 0; }

/* Work: a ruled list, one line per shipped site */
.hw-work { background: var(--hw-paper-2); border-block: 1px solid var(--hw-rule); }
.hw-work-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hw-space-xl); border-top: 2px solid var(--hw-ink); }
.hw-work-item {
    position: relative;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: var(--hw-space-sm);
    row-gap: 0.15rem;
    padding: var(--hw-space-sm) 0;
    border-bottom: 1px solid var(--hw-rule);
    text-decoration: none;
    color: var(--hw-ink);
}
.hw-work-kind { grid-row: span 3; padding-top: 0.3rem; font-family: var(--hw-font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hw-royal); }
.hw-work-name { font-family: var(--hw-font-display); font-weight: 600; font-size: var(--hw-text-lg); line-height: 1.3; }
.hw-work-desc { color: var(--hw-ink-2); font-size: 0.9375rem; }
.hw-work-host { font-family: var(--hw-font-mono); font-size: 0.8125rem; color: var(--hw-ink-2); text-decoration: underline; text-decoration-color: var(--hw-rule); text-underline-offset: 3px; overflow-wrap: anywhere; }
.hw-work-item:hover .hw-work-name { color: var(--hw-royal); }
.hw-work-item:hover .hw-work-host { text-decoration-color: var(--hw-royal); }

/* How it works + what we build */
.hw-plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hw-space-2xl); align-items: start; }
.hw-steps { list-style: none; margin: var(--hw-space-lg) 0 var(--hw-space-lg); padding: 0; display: grid; gap: var(--hw-space-md); }
.hw-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--hw-space-sm); align-items: start; }
.hw-step-num {
    display: grid; place-items: center; width: 40px; height: 46px;
    clip-path: var(--hw-hex); background: var(--hw-royal); color: var(--hw-white);
    font-family: var(--hw-font-mono); font-weight: 500;
}
.hw-steps h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.hw-steps p { margin: 0.25rem 0 0; color: var(--hw-ink-2); font-size: 0.9375rem; }
.hw-h-small { font-size: var(--hw-text-lg) !important; }
.hw-builds { list-style: none; margin: var(--hw-space-md) 0 0; padding: 0; border-top: 2px solid var(--hw-ink); }
.hw-builds a { display: grid; gap: 0.1rem; padding: var(--hw-space-sm) 0; border-bottom: 1px solid var(--hw-rule); text-decoration: none; color: var(--hw-ink); }
.hw-build-name { font-family: var(--hw-font-display); font-weight: 600; }
.hw-build-desc { color: var(--hw-ink-2); font-size: 0.9375rem; }
.hw-builds a:hover .hw-build-name { color: var(--hw-royal); }
.hw-note { margin: var(--hw-space-md) 0 0; font-size: 0.9375rem; color: var(--hw-ink-2); }
.hw-note a { color: var(--hw-royal); text-underline-offset: 3px; }

/* Close: navy band with the existing quote form */
.hw-close { background: var(--hw-ink); color: var(--hw-paper-3); }
.hw-close h2 { color: var(--hw-white); }
.hw-close-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--hw-space-xl); align-items: start; }
.hw-close-copy p { margin: var(--hw-space-sm) 0 0; max-width: 40ch; color: var(--hw-paper-3); }
.hw-contact { margin: var(--hw-space-lg) 0 0; display: grid; gap: var(--hw-space-sm); }
.hw-contact dt { font-family: var(--hw-font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hw-cyan); }
.hw-contact dd { margin: 0.1rem 0 0; }
.hw-contact a { color: var(--hw-white); font-family: var(--hw-font-display); text-underline-offset: 4px; overflow-wrap: anywhere; }
.hw-form-wrap { min-width: 0; background: var(--hw-paper); color: var(--hw-ink); border-radius: var(--hw-radius); padding: var(--hw-space-md); border-top: 4px solid var(--hw-cyan); }
.hw-form { display: grid; gap: var(--hw-space-sm); }
.hw-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hw-space-sm); }
.hw-form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-field { display: grid; gap: 0.3rem; min-width: 0; }
.hw-field > span { font-family: var(--hw-font-display); font-weight: 500; font-size: 0.9375rem; }
.hw-field em { font-style: normal; font-weight: 400; color: var(--hw-ink-2); font-size: 0.8125rem; }
.hw-field input, .hw-field textarea {
    width: 100%; min-width: 0; padding: 0.65rem 0.75rem;
    font: inherit; font-size: 1rem; color: var(--hw-ink);
    background: var(--hw-paper); border: 1px solid var(--hw-rule); border-radius: var(--hw-radius);
}
.hw-field textarea { resize: vertical; min-height: 110px; }
.hw-field input:focus, .hw-field textarea:focus { border-color: var(--hw-royal); outline: 2px solid var(--hw-tint); outline-offset: 0; }
.hw-field input:focus-visible, .hw-field textarea:focus-visible { outline: 2px solid var(--hw-royal); outline-offset: 1px; }
.hw-field input:user-invalid { border-color: var(--hw-err); }
.hw-submit { justify-self: start; }
.hw-alert { margin-bottom: var(--hw-space-sm); padding: var(--hw-space-xs) var(--hw-space-sm); border-radius: var(--hw-radius); font-size: 0.9375rem; }
.hw-alert-ok { background: var(--hw-ok-bg); color: var(--hw-ok); }
.hw-alert-err { background: var(--hw-err-bg); color: var(--hw-err); }
.g-recaptcha { max-width: 100%; overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .hw-nav { display: none; }
    .hw-menu { display: block; }
    .hw-util { display: none; }
    .hw-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--hw-space-lg); }
    .hw-hero-mark { grid-row: 1; justify-self: start; width: min(150px, 40%); }
    .hw-plan-grid, .hw-close-grid { grid-template-columns: minmax(0, 1fr); gap: var(--hw-space-xl); }
}
@media (max-width: 760px) {
    .hw-hero { padding: var(--hw-space-xl) 0; }
    .hw-section { padding: var(--hw-space-xl) 0; }
    .hw-work-list { grid-template-columns: minmax(0, 1fr); }
    .hw-form-row, .hw-form-row-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .hw-brand-word { letter-spacing: 0.14em; font-size: 0.95rem; }
    .hw-bar { gap: var(--hw-space-2xs); }
    .hw-actions .hw-btn { flex: 1 1 100%; }
    .hw-work-item { grid-template-columns: minmax(0, 1fr); }
    .hw-work-kind { grid-row: auto; padding-top: 0; }
    .hw-form-wrap { padding: var(--hw-space-sm); }
}
@media (max-width: 400px) {
    .hw-brand-word { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hw-hero-copy > *, .hw-hero-mark { animation: none; }
    .hw-btn { transition: none; }
}