:root {
    --paper: #f9f8f6;
    --paper-2: #ebe8e1;
    --ink: #2d2a26;
    --ink-2: #5e5a54;
    --muted: #a39c95;
    --line: #e6e4df;
    --line-2: #d1cdc4;
    --dark: #1a1918;
    --dark-2: #242220;
    --orange: #ea580c;
    --orange-dark: #c24100;
    --green: #10b981;
    --blue: #0284c7;
    --purple: #8b5cf6;
    --amber: #d97706;
    --radius: 18px;
    --shadow: 0 20px 50px rgb(45 42 38 / 10%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Manrope", system-ui, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--orange); color: white; }

.container {
    width: min(1280px, calc(100% - 48px)) !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.section { padding: 96px 0; border-bottom: 1px solid var(--line); }
.section,
.page-hero,
.hero {
    position: relative;
}
.section > .container,
.page-hero > .container,
.hero > .container {
    position: relative;
    z-index: 1;
}
.section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .035;
    background:
        radial-gradient(circle at 18% 24%, transparent 0 66px, var(--ink) 67px 68px, transparent 69px),
        linear-gradient(115deg, transparent 0 44%, var(--ink) 44.1% 44.25%, transparent 44.35%),
        linear-gradient(25deg, transparent 0 58%, var(--ink) 58.1% 58.25%, transparent 58.35%);
    background-size: 420px 420px, 360px 360px, 520px 520px;
    animation: blueprintFlow 28s linear infinite;
}
.section.dark::before { opacity: .06; filter: invert(1); }
@keyframes blueprintFlow {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 420px 220px, -360px 180px, 520px -260px; }
}
.section.soft { background: var(--paper-2); }
.section.dark { background: var(--dark); color: var(--paper); border-color: #403d39; }
.eyebrow {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--orange);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 18px;
}
.eyebrow::before {
    content: "";
    width: 34px;
    height: 2px;
    background: currentColor;
}
.display {
    font-size: clamp(48px, 7vw, 72px);
    line-height: .95;
    letter-spacing: -.045em;
    margin: 0;
    font-weight: 720;
}
.headline {
    font-size: clamp(36px, 4.4vw, 56px);
    line-height: 1.08;
    letter-spacing: -.04em;
    margin: 0;
    font-weight: 560;
}
.subhead {
    color: var(--ink-2);
    max-width: 680px;
    margin: 22px 0 0;
    font-size: 17px;
    line-height: 1.75;
    font-weight: 400;
}
.section.dark .subhead,
.dark-card .subhead { color: var(--muted); }
.orange { color: var(--orange); }

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px clamp(24px, 4vw, 48px);
    background: rgb(249 248 246 / 92%);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px);
}
.brand {
    font-weight: 600;
    letter-spacing: -.035em;
    font-size: 21px;
    white-space: nowrap;
}
.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}
.site-nav a {
    color: var(--ink-2);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color .2s ease;
}
.site-nav a:hover,
.site-nav a.active { color: var(--ink); }
.header-cta,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: var(--orange);
    color: white;
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 14px 30px rgb(234 88 12 / 22%);
    transition: transform .2s ease, background .2s ease;
}
.btn:hover,
.header-cta:hover { background: var(--orange-dark); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); box-shadow: none; }
.section.dark .btn.ghost { color: white; border-color: #403d39; }
.menu-toggle { display: none; }

.hero {
    overflow: hidden;
    min-height: 88vh;
    padding: 88px 0 0;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 72% 28%, rgb(234 88 12 / 10%), transparent 26%),
        radial-gradient(circle at 18% 72%, rgb(45 42 38 / 7%), transparent 24%),
        var(--paper);
}
.hero-architectural-bg {
    position: absolute;
    inset: 0 0 auto 0;
    height: min(88vh, 820px);
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.hero-grid-lines {
    position: absolute;
    inset: -20%;
    opacity: .42;
    background-image:
        linear-gradient(to right, rgb(45 42 38 / 5%) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(45 42 38 / 5%) 1px, transparent 1px),
        linear-gradient(32deg, transparent 0 49.7%, rgb(234 88 12 / 15%) 49.8% 50%, transparent 50.1%),
        linear-gradient(122deg, transparent 0 49.7%, rgb(45 42 38 / 8%) 49.8% 50%, transparent 50.1%);
    background-size: 46px 46px, 46px 46px, 280px 280px, 360px 360px;
    animation: heroGridDrift 24s linear infinite;
}
.plan-ring {
    position: absolute;
    border-radius: 999px;
    border: 2px solid rgb(234 88 12 / 28%);
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 50%),
        0 0 70px rgb(234 88 12 / 14%);
    animation: planOrbit 18s ease-in-out infinite alternate;
}
.ring-one {
    width: 420px;
    height: 420px;
    right: -90px;
    top: 70px;
}
.ring-two {
    width: 250px;
    height: 250px;
    left: 8%;
    bottom: 4%;
    border-color: rgb(45 42 38 / 12%);
    animation-duration: 22s;
}
.ring-three {
    width: 150px;
    height: 150px;
    right: 38%;
    top: 20%;
    border-color: rgb(234 88 12 / 20%);
    animation-duration: 14s;
}
.plan-ring::before,
.plan-ring::after {
    content: "";
    position: absolute;
    inset: 17%;
    border-radius: inherit;
    border: 1px dashed rgb(45 42 38 / 14%);
}
.plan-ring::after {
    inset: 36%;
    border-color: rgb(234 88 12 / 24%);
}
.plan-beam {
    position: absolute;
    height: 2px;
    width: 620px;
    background: linear-gradient(90deg, transparent, rgb(234 88 12 / 62%), transparent);
    transform-origin: center;
    filter: drop-shadow(0 0 14px rgb(234 88 12 / 20%));
    animation: beamSweep 11s ease-in-out infinite alternate;
}
.beam-one {
    top: 32%;
    left: -130px;
    transform: rotate(-18deg);
}
.beam-two {
    right: -160px;
    top: 58%;
    transform: rotate(26deg);
    animation-duration: 13s;
    opacity: .75;
}
.plan-node {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--orange);
    box-shadow: 0 0 0 10px rgb(234 88 12 / 12%), 0 0 34px rgb(234 88 12 / 45%);
    animation: nodePulse 2.8s ease-in-out infinite;
}
.node-one { left: 18%; top: 28%; }
.node-two { right: 18%; top: 46%; animation-delay: .8s; }
.node-three { left: 48%; bottom: 22%; animation-delay: 1.4s; }
@keyframes heroGridDrift {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to { transform: translate3d(-92px, 46px, 0) rotate(.001deg); }
}
@keyframes planOrbit {
    from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    to { transform: translate3d(-28px, 18px, 0) rotate(18deg) scale(1.04); }
}
@keyframes beamSweep {
    from { opacity: .28; translate: -18px 0; }
    to { opacity: .88; translate: 56px 18px; }
}
@keyframes nodePulse {
    0%, 100% { transform: scale(.85); opacity: .6; }
    50% { transform: scale(1.25); opacity: 1; }
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.07fr .93fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    background: white;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    box-shadow: 0 8px 26px rgb(45 42 38 / 5%);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.pulse {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--orange);
    box-shadow: 0 0 0 8px rgb(234 88 12 / 12%);
}
.stat-row {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 22px;
    margin-top: 34px;
    box-shadow: var(--shadow);
}
.stat strong { display: block; font-size: 34px; line-height: 1; }
.stat span { display: block; color: var(--ink-2); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; margin-top: 7px; }
.divider { width: 1px; height: 48px; background: var(--line); }

.estimate-card,
.panel {
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: clamp(24px, 4vw, 38px);
    box-shadow: 0 20px 40px rgb(0 0 0 / 8%);
}
.estimate-card { position: relative; overflow: hidden; }
.estimate-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--orange);
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 22px;
}
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--line-2);
    background: var(--paper);
    border-radius: 8px;
    padding: 13px 14px;
    color: var(--ink);
    outline: none;
    transition: border .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 112px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgb(234 88 12 / 12%);
}
.form-message {
    display: none;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
}
.form-message.success { display: block; background: #ecfdf5; color: #065f46; }
.form-message.error { display: block; background: #fff4ed; color: #9a3412; }
form[data-estimate-form] {
    display: grid;
    gap: 22px;
}
form[data-estimate-form] .form-grid {
    margin: 0;
}
.estimate-output {
    display: none;
    margin-top: 18px;
    padding: 18px;
    border-radius: 16px;
    background: #fff4ed;
    border: 1px solid #fed7aa;
}
.estimate-output.show { display: block; }
.estimate-output strong { font-size: 28px; display: block; }

.hero-image {
    position: relative;
    margin-top: 88px;
    height: min(78vh, 760px);
    min-height: 560px;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--dark);
}
.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.08) contrast(1.02) brightness(.9);
    transform: scale(1.02);
}
.image-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgb(255 255 255 / 16%), transparent 28%),
        linear-gradient(90deg, rgb(26 25 24 / 70%), rgb(26 25 24 / 22%) 46%, rgb(26 25 24 / 58%)),
        linear-gradient(to top, rgb(26 25 24 / 70%), transparent 54%, rgb(26 25 24 / 20%));
}
.hero-badge {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(14px);
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: 999px;
    padding: 11px 17px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .105em;
    text-transform: uppercase;
    color: var(--ink);
    box-shadow: 0 14px 38px rgb(0 0 0 / 16%);
    animation: floatingBadge 5.8s ease-in-out infinite alternate;
}
.hero-badge iconify-icon {
    color: var(--orange);
    font-size: 17px;
}
.hero-badge.one { top: 13%; left: 5%; }
.hero-badge.two { top: 31%; left: 9%; animation-delay: .4s; }
.hero-badge.three { bottom: 18%; left: 8%; animation-delay: .9s; }
.hero-badge.four { top: 13%; right: 6%; animation-delay: .2s; }
.hero-badge.five { top: 37%; right: 4%; animation-delay: .7s; }
.hero-badge.six { bottom: 24%; right: 8%; animation-delay: 1.1s; }
.hero-badge.seven { bottom: 10%; left: 42%; animation-delay: .5s; }
.hero-center-card {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, calc(100% - 42px));
    text-align: center;
    background: rgb(255 255 255 / 91%);
    backdrop-filter: blur(18px);
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 24px;
    padding: clamp(30px, 5vw, 54px);
    box-shadow: 0 30px 90px rgb(0 0 0 / 24%);
}
.hero-center-card span {
    display: inline-flex;
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.hero-center-card h2 {
    margin: 0;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.02;
    letter-spacing: -.045em;
    font-weight: 650;
}
.hero-center-card p {
    margin: 18px auto 0;
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.75;
    max-width: 520px;
}
@keyframes floatingBadge {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -10px, 0); }
}

.marquee {
    overflow: hidden;
    background: var(--ink);
    color: var(--paper);
    border-bottom: 1px solid #403d39;
}
.accent-marquee { background: var(--orange); color: var(--dark); border: 0; }
.marquee-track {
    display: flex;
    gap: 44px;
    width: max-content;
    animation: marquee 46s linear infinite;
    padding: 13px 0;
    will-change: transform;
}
.marquee span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 800;
    white-space: nowrap;
}
.marquee iconify-icon { color: var(--orange); font-size: 18px; }
.accent-marquee iconify-icon { color: var(--dark); }
@keyframes marquee { to { transform: translateX(-50%); } }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.origin-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
.service-card,
.project-card,
.blog-card,
.value-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border .25s ease;
}
.service-card:hover,
.project-card:hover,
.blog-card:hover,
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card { padding: 30px; }
.origin-card {
    padding: 46px;
    border-radius: 22px;
    border-color: #ebe7df;
    background:
        linear-gradient(135deg, rgb(255 255 255 / 94%), rgb(249 248 246 / 96%));
    box-shadow: 0 18px 46px rgb(45 42 38 / 6%);
}
.origin-card-dark {
    background:
        linear-gradient(135deg, #242220, #1a1918);
    color: white;
    border-color: #403d39;
}
.origin-card-dark p { color: #d1cdc4; }
.origin-card-dark .tag { color: #ffb48a; }
.origin-card-dark .icon-dot { background: rgb(255 255 255 / 10%); color: #ffb48a; box-shadow: none; }
.service-card.orange { background: #fff4ed; border-color: #fed7aa; }
.service-card.blue { background: #f0f9ff; border-color: #bae6fd; }
.service-card.green { background: #ecfdf5; border-color: #bbf7d0; }
.service-card.purple { background: #faf5ff; border-color: #e9d5ff; }
.service-card.amber { background: #fffbeb; border-color: #fde68a; }
.icon-dot {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: white;
    color: var(--orange);
    font-size: 26px;
    margin-bottom: 22px;
    box-shadow: 0 10px 24px rgb(45 42 38 / 7%);
}
.icon-dot iconify-icon { font-size: 27px; }
.service-card h3,
.value-card h3,
.project-card h3 { margin: 0 0 12px; line-height: 1.18; font-weight: 600; letter-spacing: -.025em; }
.value-card h3 { font-weight: 560; letter-spacing: -.025em; }
.blog-card h3 {
    margin: 10px 0 14px;
    line-height: 1.14;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 650;
    letter-spacing: -.035em;
}
.blog-card p {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 18px;
}
.blog-card:nth-child(2n) p { color: #d1cdc4; }
.clean-list { list-style: none; margin: 18px 0 0; padding: 0; }
.clean-list li { padding: 9px 0 9px 24px; position: relative; border-top: 1px solid rgb(45 42 38 / 8%); }
.clean-list li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 800; }

.dark-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.project-card { background: var(--dark-2); border-color: #403d39; color: var(--paper); }
.project-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: brightness(.82); transition: transform .6s ease; }
.project-card:hover img { transform: scale(1.05); }
.project-body { padding: 26px; }
.meta { color: var(--orange); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; display: flex; justify-content: space-between; gap: 16px; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 18px 0; margin: 20px 0; border-top: 1px solid #403d39; border-bottom: 1px solid #403d39; }
.spec span { display: block; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.spec strong { display: block; font-size: 14px; margin-top: 3px; }
.text-link { color: var(--orange); font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

.process-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
.process-line::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 28px;
    height: 1px;
    background: var(--line-2);
}
.step { position: relative; text-align: center; z-index: 1; }
.step-number {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    background: white;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-weight: 800;
}
.step:nth-child(3) .step-number { background: var(--ink); color: white; border-color: var(--ink); }

.page-hero {
    padding: 96px 0 74px;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(to right, rgb(45 42 38 / 3%) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(45 42 38 / 3%) 1px, transparent 1px),
        var(--paper);
    background-size: 42px 42px;
}
.page-hero .subhead { font-size: 18px; }
.two-column-copy { columns: 2 360px; column-gap: 64px; color: var(--ink-2); }
.quote-panel {
    padding: 44px;
    background: var(--ink);
    color: white;
    border-radius: 24px;
}
.quote-panel p { color: #d1cdc4; }
.blog-grid { columns: 3 300px; column-gap: 28px; }
.blog-card { display: inline-block; width: 100%; margin: 0 0 28px; break-inside: avoid; }
.blog-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.blog-card:nth-child(2n) { background: var(--dark-2); color: white; border-color: #403d39; }
.blog-body { padding: 26px; }
.tag { color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; }
.dark-form {
    background: var(--dark-2);
    color: white;
    border: 1px solid #403d39;
    border-radius: 18px;
    padding: clamp(34px, 4.5vw, 56px);
    box-shadow: 0 24px 70px rgb(0 0 0 / 20%);
}
.dark-form .form-grid {
    row-gap: 30px;
    column-gap: 30px;
    margin-bottom: 30px;
}
.dark-form .field { gap: 10px; }
.dark-form > .field { margin-bottom: 30px; }
.dark-form button { margin-top: 22px !important; }
.dark-form label[style] {
    margin-top: 4px;
    margin-bottom: 10px;
}
.dark-form .field input,
.dark-form .field select,
.dark-form .field textarea {
    background: transparent;
    color: white;
    border: 0;
    border-bottom: 1px solid #5e5a54;
    border-radius: 0;
    padding-left: 0;
}
.dark-form .field label { color: var(--muted); }
.calculator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.result-card { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 20px; padding: 26px; }
.result-row { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.result-row:last-child { border-bottom: 0; }

.footer {
    background: var(--dark);
    color: var(--paper);
    padding: 54px 0;
    border-top: 1px solid #403d39;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr .8fr 1fr; gap: 42px; }
.footer p,
.footer a { color: var(--muted); font-size: 14px; }
.footer a:hover { color: white; }
.footer h3 { margin: 0 0 14px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.footer-links { display: grid; gap: 8px; }
.footer-small { margin-top: 24px; font-size: 12px !important; }

.reveal { opacity: 1; transform: none; transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
    .site-nav {
        position: fixed;
        inset: 68px 0 auto 0;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 18px 20px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
    }
    .site-nav.open { display: flex; }
    .site-nav a { padding: 12px 0; width: 100%; }
    .menu-toggle {
        display: inline-grid;
        gap: 5px;
        background: transparent;
        border: 0;
        padding: 8px;
        margin-left: auto;
    }
    .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); }
    .header-cta { display: none; }
    .hero-grid,
    .split,
    .contact-grid,
    .calculator-grid { grid-template-columns: 1fr; }
    .grid-4,
    .dark-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .container { width: min(100% - 28px, 1280px) !important; }
    .section { padding: 68px 0; }
    .hero { padding-top: 58px; }
    .form-grid,
    .form-grid.three,
    .grid-2,
    .origin-cards,
    .grid-3,
    .grid-4,
    .dark-grid,
    .process-line,
    .footer-grid { grid-template-columns: 1fr; }
    .process-line::before { display: none; }
    .stat-row { width: 100%; justify-content: space-between; gap: 14px; padding: 14px; }
    .stat strong { font-size: 28px; }
    .hero-image { min-height: 520px; margin-top: 58px; }
    .hero-badge {
        display: none;
    }
    .hero-badge.one,
    .hero-badge.four {
        display: inline-flex;
        transform: none;
        animation: none;
        font-size: 10px;
        padding: 9px 12px;
    }
    .hero-badge.one { top: 18px; left: 14px; }
    .hero-badge.four { top: 62px; right: 14px; }
    .hero-center-card { padding: 24px; }
    .display { font-size: clamp(48px, 15vw, 60px); }
    .headline { font-size: clamp(32px, 10vw, 46px); }
}