/* Mabry Wifi Solutions — night sky in blue, black, and white.
   Dark starfield bands (the satellite story) meet cool white daylight sections;
   the blue accent matches the client's flyer branding. */

/* Self-hosted latin subsets (~15KB each) — no Google Fonts request. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-condensed-800.woff2") format("woff2"); }

:root {
    color-scheme: light;
    --night: #0c1420;
    --night-soft: #16202f;
    --star: #dfe9f5;
    --star-dim: #93a5bb;
    --paper: #f5f8fc;
    --paper-deep: #e9eff7;
    --card: #ffffff;
    --ink: #161d27;
    --muted: #556173;
    --accent: #1e6fd6;
    --accent-deep: #12549f;
    --accent-bright: #6aa5f2; /* AA-contrast blue for small text on night bands */
    --hairline: #d9e2ec;
    --hairline-dark: rgba(223, 233, 245, 0.14);
    --photo-frame: #ffffff;
    --field-bg: #ffffff;
    --field-border: #64748b;
    --link-strong: var(--accent-deep);
    --day-sky: #d7e5f2;
    --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-body: "Barlow", "Helvetica Neue", sans-serif;
    --measure: 42rem;
    --shell: 70rem;
}

/* Dark mode: the whole page goes to night. Stars come out on every section,
   frames and cards darken, and the hero grows a moon. Set by the header toggle
   (persisted) or the OS preference on first visit. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #0e1724;
    --paper-deep: #121d2c;
    --card: #141f2e;
    --ink: #e6edf6;
    --muted: #9aa8bb;
    --hairline: rgba(223, 233, 245, 0.25);
    --photo-frame: #16212f;
    --field-bg: #0c1420;
    --field-border: #64738c;
    --link-strong: var(--accent-bright);
}

/* Base blue is too dim as small text on dark cards; use the bright cut. */
:root[data-theme="dark"] .services .step-no { color: var(--accent-bright); }
:root[data-theme="dark"] .on-paper .btn-ghost:hover { background: rgba(223, 233, 245, 0.08); }

:root[data-theme="dark"] body {
    background-color: var(--paper);
    /* Star tiles at differing tile sizes so the repeat never reads as a grid. */
    background-image:
        radial-gradient(1px 1px at 25px 35px, rgba(223, 233, 245, 0.8) 50%, transparent 51%),
        radial-gradient(1px 1px at 155px 105px, rgba(147, 165, 187, 0.7) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 285px 65px, rgba(223, 233, 245, 0.9) 50%, transparent 51%),
        radial-gradient(1px 1px at 345px 185px, rgba(147, 165, 187, 0.6) 50%, transparent 51%),
        radial-gradient(1px 1px at 85px 225px, rgba(223, 233, 245, 0.6) 50%, transparent 51%),
        radial-gradient(1px 1px at 205px 275px, rgba(223, 233, 245, 0.7) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 65px 145px, rgba(147, 165, 187, 0.8) 50%, transparent 51%),
        radial-gradient(1px 1px at 315px 25px, rgba(223, 233, 245, 0.65) 50%, transparent 51%);
    background-size: 420px 380px, 520px 460px, 380px 340px, 460px 420px, 300px 280px, 360px 320px, 480px 440px, 340px 300px;
}

:root[data-theme="dark"] .polaroid {
    box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.8);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 17px/1.6 var(--font-body);
    color: var(--ink);
    background: var(--paper);
    /* Faint print grain over the paper; night bands paint over it. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    -webkit-font-smoothing: antialiased;
}

main a {
    color: inherit;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--accent);
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0.5rem;
    z-index: 10;
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus { left: 0.5rem; }

/* ---------- night-sky bands ---------- */

.sky {
    position: relative;
    background-color: var(--night);
    color: var(--star);
    overflow: hidden;
}

/* Two star layers; the second twinkles. Tiny radial dots, no images. */
.sky::before,
.sky::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 12% 22%, var(--star) 50%, transparent 51%),
        radial-gradient(1px 1px at 34% 8%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 58% 30%, var(--star) 50%, transparent 51%),
        radial-gradient(1px 1px at 71% 12%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1px 1px at 88% 26%, var(--star) 50%, transparent 51%),
        radial-gradient(1px 1px at 45% 48%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 8% 58%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1px 1px at 93% 55%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1px 1px at 5% 12%, var(--star) 50%, transparent 51%),
        radial-gradient(1px 1px at 18% 42%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 27% 68%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1px 1px at 41% 25%, var(--star) 50%, transparent 51%),
        radial-gradient(1px 1px at 63% 6%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1px 1px at 77% 38%, var(--star) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 97% 10%, var(--star-dim) 50%, transparent 51%);
    opacity: 0.55;
}

.sky::after {
    background-image:
        radial-gradient(1.5px 1.5px at 22% 38%, var(--star) 50%, transparent 51%),
        radial-gradient(1px 1px at 50% 16%, var(--star) 50%, transparent 51%),
        radial-gradient(1px 1px at 66% 44%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 80% 6%, var(--star) 50%, transparent 51%),
        radial-gradient(1px 1px at 30% 64%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1px 1px at 10% 32%, var(--star) 50%, transparent 51%),
        radial-gradient(1px 1px at 38% 5%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 55% 56%, var(--star) 50%, transparent 51%),
        radial-gradient(1px 1px at 73% 22%, var(--star) 50%, transparent 51%),
        radial-gradient(1px 1px at 90% 42%, var(--star-dim) 50%, transparent 51%);
    animation: twinkle 7s ease-in-out infinite alternate;
}

@keyframes twinkle {
    from { opacity: 0.25; }
    to { opacity: 0.9; }
}

/* Cool glow low on the horizon — signal over the tree line. */
.sky .horizon-glow {
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    pointer-events: none;
    background: radial-gradient(120% 100% at 50% 118%, rgba(46, 120, 224, 0.26), transparent 60%);
}

/* ---------- daylight hero (light mode) ----------
   .sky-day bands (header + hero/page-heads) are day in light mode and night in
   dark mode. The lower bands and footer keep .sky and stay night in both. */

:root[data-theme="light"] .site-header {
    background: var(--day-sky);
    color: var(--ink);
}

:root[data-theme="light"] .site-header nav a:not(.btn) { color: var(--muted); }
:root[data-theme="light"] .site-header nav a:not(.btn):hover,
:root[data-theme="light"] .site-header nav a[aria-current="page"]:not(.btn) { color: var(--ink); }

:root[data-theme="light"] .theme-toggle {
    color: var(--ink);
    border-color: rgba(29, 35, 43, 0.3);
}

:root[data-theme="light"] .theme-toggle:hover { border-color: var(--ink); }

:root[data-theme="light"] .sky-day {
    background-color: var(--day-sky);
    background-image: linear-gradient(180deg, var(--day-sky) 0%, var(--paper) 100%);
    color: var(--ink);
}

:root[data-theme="light"] .sky-day::before,
:root[data-theme="light"] .sky-day::after { display: none; }

:root[data-theme="light"] .sky-day .horizon-glow {
    background: radial-gradient(120% 100% at 50% 118%, rgba(46, 120, 224, 0.16), transparent 60%);
}

:root[data-theme="light"] .site-header .wordmark-sub { color: var(--accent-deep); }

:root[data-theme="light"] .sky-day .eyebrow { color: var(--accent-deep); }
:root[data-theme="light"] .sky-day .eyebrow::before { background: var(--accent-deep); }
:root[data-theme="light"] .sky-day .lede { color: var(--muted); }
:root[data-theme="light"] .sky-day .lede strong { color: var(--ink); }
:root[data-theme="light"] .sky-day .cta-note { color: var(--muted); }
:root[data-theme="light"] .sky-day .cta-note a { color: var(--ink); }
:root[data-theme="light"] .sky-day .cred-row { color: var(--muted); }
:root[data-theme="light"] .sky-day .cred-row li + li::before { background: var(--accent); }
:root[data-theme="light"] .sky-day .btn-ghost { color: var(--ink); }
:root[data-theme="light"] .sky-day .btn-ghost:hover { background: rgba(29, 35, 43, 0.06); }
:root[data-theme="light"] .sky-day .uplink .sat { fill: var(--muted); }
:root[data-theme="light"] .sky-day .uplink .dish { fill: var(--muted); }

/* Day slope: the hero already fades into paper, so the wedge disappears. */
:root[data-theme="light"] .slope-day { background: transparent; }

/* Sun in light mode, moon in dark. */
.sun {
    display: none;
    position: absolute;
    top: 2.5rem;
    left: 55%;
    width: 56px;
    height: 56px;
    opacity: 0.9;
    pointer-events: none;
}

:root[data-theme="light"] .sun { display: block; }

/* Diagonal edge where a night band meets paper. */
.slope {
    height: 4.5rem;
    background: var(--night);
    clip-path: polygon(0 0, 100% 0, 100% 15%, 0 100%);
    margin-top: -1px;
}

/* Reverse: paper giving way to night below. Same slant direction. */
.slope.slope-up {
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    margin-top: 0;
    margin-bottom: -1px;
}

/* ---------- header ---------- */

/* The dark band runs full-bleed; only the content is shell-constrained. */
.site-header {
    position: relative;
    z-index: 2;
    background: var(--night);
    color: var(--star);
}

.header-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 1.4rem 1.5rem 0.5rem;
}

.wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.wordmark-main {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

.wordmark-sub {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--accent-bright);
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.site-header nav a:not(.btn) {
    color: var(--star-dim);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.site-header nav a:not(.btn):hover,
.site-header nav a[aria-current="page"]:not(.btn) { color: var(--star); }

/* Theme toggle — shows the mode you'd switch to. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    background: none;
    border: 2px solid var(--hairline-dark);
    border-radius: 999px;
    color: var(--star);
    cursor: pointer;
}

.theme-toggle:hover { border-color: var(--star-dim); }

.theme-toggle svg { width: 1.1rem; height: 1.1rem; }

.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Crescent moon in the hero — a dark-mode-only night feature. */
.moon {
    display: none;
    position: absolute;
    top: 2.5rem;
    left: 55%;
    width: 52px;
    height: 52px;
    opacity: 0.85;
    pointer-events: none;
}

:root[data-theme="dark"] .moon { display: block; }

/* ---------- buttons ---------- */

.btn {
    display: inline-block;
    padding: 0.9rem 1.7rem;
    border-radius: 3px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--accent-deep); }

.btn-ghost { border-color: currentColor; color: var(--star); background: transparent; }
.btn-ghost:hover { background: rgba(223, 233, 245, 0.1); }

.on-paper .btn-ghost { color: var(--ink); }
.on-paper .btn-ghost:hover { background: rgba(29, 35, 43, 0.06); }

.btn-small { padding: 0.5rem 1.1rem; font-size: 1rem; }

/* ---------- hero ---------- */

.hero {
    position: relative;
    padding: 4.5rem 1.5rem 6rem;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--shell);
    margin: 0 auto;
}

.eyebrow {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--accent-bright);
    margin: 0 0 1rem;
}

.eyebrow::before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2px;
    background: var(--accent-bright);
    vertical-align: middle;
    margin-right: 0.7rem;
}

.hero h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3rem, 9vw, 5.5rem);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0 0 1.2rem;
    max-width: 14ch;
}

.hero h1 em {
    font-style: normal;
    color: var(--accent);
}

.hero .lede {
    max-width: var(--measure);
    font-size: 1.2rem;
    color: var(--star-dim);
    margin: 0 0 2rem;
}

.hero .lede strong { color: var(--star); }

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
}

.cta-note { font-size: 0.95rem; color: var(--star-dim); margin: 0.9rem 0 0; }
.cta-note a { color: var(--star); }

/* Credentials strip under the hero CTAs — straight off Adam's flyer. */
.cred-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0;
    list-style: none;
    padding: 0;
    margin: 1.8rem 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--star-dim);
}

.cred-row li { display: inline-flex; align-items: center; }

.cred-row li + li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-bright);
    margin: 0 0.9rem;
}

/* Dashed uplink arc, dish to satellite. Decorative. */
.uplink {
    position: absolute;
    right: -2rem;
    top: 0;
    height: 100%;
    width: min(44vw, 34rem);
    pointer-events: none;
    opacity: 0.6;
}

.uplink .beam {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-dasharray: 4 10;
    animation: beam-flow 24s linear infinite;
}

@keyframes beam-flow {
    to { stroke-dashoffset: -700; }
}

.uplink .sat { fill: var(--star); }
.uplink .dish { fill: var(--star-dim); }

/* ---------- shared section shells ---------- */

.band { padding: 4rem 1.5rem; }
.band-inner { max-width: var(--shell); margin: 0 auto; }

.band h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
}

.band .section-lede {
    max-width: var(--measure);
    color: var(--muted);
    margin: 0 0 2.5rem;
    font-size: 1.1rem;
}

.sky .section-lede { color: var(--star-dim); }

/* ---------- service cards ---------- */

.services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.services li {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-top: 3px solid var(--accent);
    border-radius: 3px;
    padding: 1.5rem 1.4rem 1.6rem;
}

.also-note {
    margin: 1.75rem 0 0;
    color: var(--muted);
    max-width: var(--measure);
}

/* Install-type chips: everywhere the dish can go. */
.install-types { margin-top: 2.25rem; }

.install-types h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    margin: 0 0 0.8rem;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.chip-row li {
    border: 2px solid var(--accent);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-deep);
}

:root[data-theme="dark"] .chip-row li {
    border-color: var(--accent-bright);
    color: var(--accent-bright);
}

.services .step-no {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--accent);
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.6rem;
}

.services h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.services p { margin: 0; color: var(--muted); }

/* ---------- job log (photos) ---------- */

.job-log {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem 1.75rem;
    align-items: start;
    padding: 0;
    margin: 0;
    list-style: none;
}

.polaroid {
    margin: 0;
    background: var(--photo-frame);
    border: 1px solid var(--hairline);
    border-radius: 2px;
    padding: 0.75rem 0.75rem 1rem;
    box-shadow: 0 12px 24px -14px rgba(29, 35, 43, 0.4);
    transition: transform 0.2s ease;
}

.polaroid img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--paper-deep);
}

.polaroid figcaption {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-top: 0.8rem;
}

/* "Your place next" placeholder frame */
.polaroid-next {
    border: 2px dashed var(--hairline);
    background: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 4 / 5.4;
    padding: 1.5rem;
    gap: 1rem;
}

.polaroid-next p {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
    max-width: 12ch;
}

/* Owner note under the job log — the "one local guy" trust block. */
.owner-note {
    margin-top: 2.5rem;
    max-width: var(--measure);
    padding: 1.4rem 1.6rem;
    border-left: 3px solid var(--accent);
    background: var(--paper-deep);
}

.owner-note h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    margin: 0 0 0.4rem;
}

.owner-note p { margin: 0; color: var(--ink); }

/* ---------- why-a-pro ---------- */

.points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem 1.75rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.points h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: uppercase;
    margin: 0 0 0.4rem;
}

.points h3::before {
    content: "";
    display: block;
    width: 2.2rem;
    height: 3px;
    background: var(--accent);
    margin-bottom: 0.8rem;
}

.points p { margin: 0; color: var(--star-dim); }

/* ---------- closing CTA band ---------- */

.closer { text-align: left; }

.closer .band-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.closer h2 { margin-bottom: 0.3rem; }
.closer p { color: var(--star-dim); margin: 0; }

/* ---------- contact page ---------- */

.page-head { padding: 3rem 1.5rem 4rem; }

.page-head h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 7vw, 4.2rem);
    line-height: 0.95;
    text-transform: uppercase;
    margin: 0 0 0.8rem;
    max-width: 16ch;
}

.page-head .lede {
    max-width: var(--measure);
    font-size: 1.15rem;
    color: var(--star-dim);
    margin: 0;
}

.contact-cols {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 56rem) {
    .contact-cols { grid-template-columns: 1fr; }
}

.quote-form {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-top: 3px solid var(--accent);
    border-radius: 3px;
    padding: 2rem 1.75rem;
    display: grid;
    gap: 1.2rem;
}

.quote-form label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
}

.quote-form .optional {
    font-family: var(--font-body);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted);
}

.quote-form input,
.quote-form select,
.quote-form textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    font: inherit;
    color: var(--ink);
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 3px;
}

.quote-form input::placeholder,
.quote-form textarea::placeholder {
    color: var(--muted);
    opacity: 1;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
    outline: 3px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
}

.quote-form button {
    justify-self: start;
    cursor: pointer;
    border: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.next-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }

.next-steps li {
    counter-increment: step;
    position: relative;
    padding: 0 0 1.6rem 3.4rem;
}

.next-steps li::before {
    content: "0" counter(step);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--accent);
}

.next-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 2.2rem;
    bottom: 0.4rem;
    width: 2px;
    background: var(--hairline);
}

.next-steps h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    margin: 0 0 0.3rem;
}

.next-steps p { margin: 0; color: var(--muted); }

.direct-line {
    margin-top: 2.5rem;
    padding: 1.25rem 1.4rem;
    border-left: 3px solid var(--accent);
    background: var(--paper-deep);
}

.direct-line p { margin: 0; }
.direct-line a { color: var(--link-strong); font-weight: 600; }

/* ---------- footer ---------- */

.site-footer { padding: 3.5rem 1.5rem 2rem; }

.footer-inner {
    position: relative;
    z-index: 1;
    max-width: var(--shell);
    margin: 0 auto 2.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
}

.footer-wordmark { margin: 0 0 0.4rem; }

.footer-tagline { color: var(--star-dim); margin: 0; max-width: 28rem; }

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: right;
}

.footer-contact a {
    color: var(--star);
    font-weight: 600;
    text-decoration-color: var(--accent);
}

.footer-fine {
    position: relative;
    z-index: 1;
    max-width: var(--shell);
    margin: 0 auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline-dark);
    color: var(--star-dim);
    font-size: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem 2rem;
}

.footer-fine p { margin: 0; max-width: 42rem; }

.footer-fine a {
    color: var(--star);
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
}

.footer-credit {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--star-dim);
    white-space: nowrap;
}

.footer-credit a {
    color: var(--accent-bright);
    font-weight: 700;
    text-decoration-color: var(--accent-bright);
}

.footer-credit a:hover { color: var(--star); }

@media (max-width: 40rem) {
    .footer-contact { text-align: left; }
    .hero { padding-top: 3rem; }
    .uplink { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sky::after { animation: none; opacity: 0.55; }
    .uplink .beam { animation: none; }
    .btn, .polaroid { transition: none; }
}