/* Rivne Tech: shared tokens, type, buttons, header and footer for every page. Page-specific CSS stays inline. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* ── Surfaces ── */
    --paper: #FAFAFA;          /* page body */
    --sheet: #FFFFFF;          /* cards, dialogs */
    --inset: #F5F5F5;          /* inset regions, tags, sheet headers */
    /* ── Gray ladder: every divider / border has its own step ── */
    --g-150: #F0F0F0;          /* construction-grid major line */
    --grid-major: #EDEDED;     /* construction grid */
    --grid-minor: #F4F4F4;
    --g-200: #EBEBEB;          /* hairline: frame, card rings, table rows */
    --g-300: #E3E3E3;          /* hairline on inset surfaces */
    --g-400: #D4D4D4;          /* schedule lane rules, idle tracks */
    --g-500: #A1A1A1;          /* crosshairs, schematic wires, strong hairline */
    --g-600: #8F8F8F;          /* decorative glyphs only (never text on light) */
    --g-700: #666666;          /* muted text: 5.4:1 on paper */
    --g-800: #4D4D4D;          /* body text */
    --ink:   #171717;          /* headings, primary CTA */
    --ink-hover: #383838;
    /* ── Dark band ladder ── */
    --d-0:   #000000;          /* band */
    --d-50:  #0A0A0A;          /* board surface */
    --d-100: #111111;          /* board panels / cards */
    --d-200: #1F1F1F;          /* dark hairline */
    --d-300: #2E2E2E;          /* dark strong hairline */
    --d-600: #ABABAB;          /* muted text on dark: 8.7:1 on #111, 5.9:1 over the glow */
    --d-900: #EDEDED;          /* text on dark */
    /* ── Signal + glow ── */
    --signal: #3C8667;         /* functional green: focus, pulse, "just changed" */
    --signal-soft: #F1F9F5;
    --signal-line: #B4DACA;
    --signal-ink: #265E47;
    --glow-green: #3C8667;
    --band-fill: #F2FAF6;      /* flat mint band behind product windows */
    --band-line: #CDE5DB;      /* its hairline edge */
    --glow-teal: #2E7D6B;
    --glow-mint: #8CC9AA;
    --glow-sea: #3A7F8C;
    /* ── Status system (see the header comment): green is the only signal, one warning hue, ink and dashed for the rest ── */
    --st-signal: #3C8667; --st-signal-ink: #265E47; --st-signal-line: #B4DACA; --st-signal-tint: #F1F9F5;
    --st-warn: #8A6116;            /* hold, at risk, late, load >= 90%; dot or thin text only */
    --st-plan: #D4D4D4;            /* planned: dashed hairline */
    --st-signal-d: #7FC4A2; --st-signal-d-strong: #B4DACA; --st-signal-d-tint: rgba(60,134,103,.16);
    --st-warn-d: #D1AE6E; --st-plan-d: #525252;

    /* ── Type ── */
    --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px;
    --fs-24: 24px; --fs-40: 40px; --fs-52: 52px; --fs-88: 88px;
    --track-display: -0.05em;
    --track-head: -0.04em;
    --track-sub: -0.025em;

    /* ── Space (4px base) ── */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
    --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-24: 96px; --s-28: 112px;
    --frame: 1200px;
    --pad: 20px;

    /* ── Radius by level ── */
    --r-tag: 6px; --r-ui: 10px; --r-panel: 12px; --r-tile: 16px; --r-node: 22px; --r-pill: 100px;

    /* ── Elevation: stacked, never a single heavy drop ── */
    --ring: 0 0 0 1px var(--g-200);
    --sh-2: 0 0 0 1px var(--g-200), 0 1px 1px rgba(0,0,0,.02), 0 2px 2px rgba(0,0,0,.04);
    --sh-3: 0 0 0 1px var(--g-200), 0 2px 2px rgba(0,0,0,.04), 0 8px 8px -8px rgba(0,0,0,.04);
    --sh-4: 0 0 0 1px var(--g-200), 0 2px 2px rgba(0,0,0,.04), 0 8px 16px -4px rgba(0,0,0,.05);
    --sh-5: 0 0 0 1px var(--g-200), 0 1px 1px rgba(0,0,0,.02), 0 8px 16px -4px rgba(0,0,0,.05), 0 24px 32px -8px rgba(0,0,0,.08);

    --ease: cubic-bezier(.2,.7,.2,1);
    /* Breakpoints (reference): sm 640, md 768, lg 1024, xl 1280 */
}
@media (min-width: 768px) { :root { --pad: 32px; } }   /* md */
@media (min-width: 1024px) { :root { --pad: 48px; } }  /* lg */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
    font-family: var(--font-sans); font-size: var(--fs-16); line-height: 1.5; color: var(--g-800);
    background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: #F2F2F2; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0; }
.num, .ui, .sheet, .glyph, [data-comment="one-mockup"] { font-variant-numeric: tabular-nums; }

/* ── Drawing frame + crosshairs ── */
.frame { width: 100%; max-width: var(--frame); margin: 0 auto; position: relative; }
@media (min-width: 640px) { /* sm */
    .frame { width: calc(100% - 32px); border-left: 1px solid var(--g-200); border-right: 1px solid var(--g-200); }
}
.join { position: relative; border-top: 1px solid var(--g-200); }
.join::before, .join::after { content: ""; position: absolute; top: -7px; width: 13px; height: 13px; display: none;
    background: linear-gradient(var(--g-500), var(--g-500)) center / 1px 13px no-repeat,
                linear-gradient(var(--g-500), var(--g-500)) center / 13px 1px no-repeat; z-index: 3; }
.join::before { left: -7px; } .join::after { right: -7px; }
@media (min-width: 640px) { .join::before, .join::after { display: block; } }

/* ── Type roles ── */
.h-display { font-weight: 600; color: var(--ink); letter-spacing: var(--track-display); line-height: .98; }
.h-section { font-size: clamp(30px, 6.4vw, var(--fs-40)); font-weight: 600; color: var(--ink); letter-spacing: var(--track-head); line-height: 1.08; text-wrap: balance; }
.h-band { font-size: clamp(34px, 7.4vw, var(--fs-52)); font-weight: 600; letter-spacing: var(--track-head); line-height: 1.04; text-wrap: balance; }
.lead { font-size: var(--fs-18); line-height: 28px; color: var(--g-800); }
p, .stat-label, .pillar-body { text-wrap: pretty; }
.muted { color: var(--g-700); }

/* ── Buttons: one pill scale everywhere ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px;
    border-radius: var(--r-pill); font-size: var(--fs-16); font-weight: 500; line-height: 1; letter-spacing: -0.01em;
    white-space: nowrap; cursor: pointer; transition: background-color .18s ease, box-shadow .18s ease, color .18s ease; }
.btn-primary { background: var(--ink); color: #FFF; }
.btn-primary:hover { background: var(--ink-hover); }
.btn-secondary { background: var(--sheet); color: var(--ink); box-shadow: var(--sh-2); }
.btn-secondary:hover { background: var(--inset); }
.btn-invert { background: #FFF; color: #000; }
.btn-invert:hover { background: #E6E6E6; }
.btn-sm { height: 36px; padding: 0 16px; font-size: var(--fs-14); }
.btn:active { transform: translateY(1px); }
@media (max-width: 639.98px) { .btn-sm { height: 44px; padding: 0 18px; } }

/* ═════════ HEADER ═════════ */
[data-comment="header"] { position: sticky; top: 0; z-index: 50; background: rgba(250,250,250,.86);
    -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent; transition: border-color .2s ease; }
[data-comment="header"].scrolled { border-bottom-color: var(--g-200); }
.hdr { height: 64px; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 var(--pad); border-left-color: transparent !important; border-right-color: transparent !important; }
[data-comment="header-logo"] { display: inline-flex; align-items: center; height: 44px; width: max-content; }
[data-comment="header-logo-image"] { height: 20px; width: auto; }
[data-comment="header-nav"] { display: none; gap: 4px; }
.nav-link { font-size: var(--fs-14); font-weight: 500; color: var(--g-700); padding: 8px 12px; border-radius: var(--r-pill); transition: color .15s ease, background-color .15s ease; }
.nav-link:hover { color: var(--ink); background: var(--g-150); }
.hdr-right { display: flex; justify-content: flex-end; }
@media (min-width: 768px) { /* md */
    .hdr { grid-template-columns: 1fr auto 1fr; }
    [data-comment="header-nav"] { display: flex; }
    [data-comment="header-logo-image"] { height: 22px; }
}

/* ── Canadian flag next to "Waterloo, Ontario" (hero and footer) ── */
.ca-flag { width: 22px; height: 11px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--g-300); }

/* ── Running green light around a border (CTA cards, booking card); static with reduced motion ── */
@property --beam-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.beam { position: relative; isolation: isolate; }
.beam::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 2px; pointer-events: none;
    background: conic-gradient(from var(--beam-a), rgba(47,208,122,0) 0deg, rgba(47,208,122,0) 210deg, rgba(47,208,122,.35) 275deg, #2FD07A 328deg, #B9F6D3 344deg, rgba(47,208,122,0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: beamRun 5s linear infinite; }
@keyframes beamRun { to { --beam-a: 360deg; } }

/* ── Large button with a nudging arrow ── */
.btn-lg { height: 56px; padding: 0 26px 0 28px; font-size: 17px; gap: 10px; }
.btn .btn-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ── CTA card: the closing call to action on inner pages, one centred column ── */
.cta-wrap { padding: var(--s-14) var(--pad); }
.cta-card { display: grid; justify-items: center; text-align: center; gap: 0; max-width: 960px; margin: 0 auto; padding: var(--s-12) var(--s-6); border-radius: 22px; overflow: hidden;
    background: var(--band-fill); box-shadow: 0 0 0 1px var(--band-line), 0 32px 64px -36px rgba(38,94,71,.45); }
.cta-copy { display: grid; justify-items: center; }
.cta-eyebrow { display: inline-flex; align-items: center; gap: 8px; width: max-content; height: 28px; padding: 0 12px 0 10px; border-radius: var(--r-pill);
    background: var(--sheet); box-shadow: 0 0 0 1px var(--band-line); font-size: var(--fs-13); font-weight: 500; color: var(--signal-ink); }
.cta-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #2FD07A; box-shadow: 0 0 0 3px rgba(47,208,122,.2); }
.cta-card h2 { margin-top: var(--s-5); font-size: clamp(34px, 5.4vw, 56px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: var(--ink); max-width: 16ch; text-wrap: balance; }
.cta-lead { margin-top: var(--s-5); max-width: 46ch; font-size: var(--fs-18); line-height: 28px; color: var(--g-800); text-wrap: balance; }
.cta-go { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: var(--s-8); }
.cta-go .btn { min-width: 196px; }
@media (min-width: 1024px) {
    .cta-wrap { padding: var(--s-24) var(--pad); }
    .cta-card { padding: var(--s-16) var(--s-14) var(--s-14); }
}
@media (prefers-reduced-motion: reduce) { .beam::after { animation: none; background: rgba(47,208,122,.45); } }

/* ── Links ── */
.text-link { font-size: var(--fs-14); font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--g-500); text-underline-offset: 4px; transition: text-decoration-color .15s ease; width: max-content; padding: 6px 0; }
.text-link:hover { text-decoration-color: var(--ink); }

/* ═════════ FOOTER ═════════ */
[data-comment="footer"] { font-size: var(--fs-14); color: var(--g-700); }
.ft-top { display: grid; gap: var(--s-10); padding: var(--s-14) var(--pad) var(--s-12); }
.ft-brand { display: grid; gap: 14px; align-content: start; }
[data-comment="footer-brand-logo"] { display: inline-flex; width: max-content; padding: 6px 0; }
[data-comment="footer-brand-logo-image"] { height: 22px; width: auto; }
[data-comment="footer-brand-tagline"] { max-width: 34ch; color: var(--g-800); font-size: var(--fs-16); }
[data-comment="footer-location"] { display: inline-flex; align-items: center; gap: 10px; }
[data-comment="footer-email"] { color: var(--ink); font-weight: 500; width: max-content; padding: 4px 0; text-decoration: underline; text-decoration-color: var(--g-500); text-underline-offset: 4px; }
[data-comment="footer-email"]:hover { text-decoration-color: var(--ink); }
.ft-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.ft-col-title { display: block; font-size: var(--fs-14); font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.ft-list { list-style: none; display: grid; }
.ft-link { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--g-700); transition: color .15s ease; }
.ft-link:hover { color: var(--ink); }
.ft-link svg { width: 15px; height: 15px; }
.ft-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px var(--pad) 28px; font-size: var(--fs-13); }
@media (min-width: 768px) { .ft-top { grid-template-columns: 1fr auto; } .ft-cols { grid-template-columns: repeat(2, 180px); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}