/* --- from about.html --- */
:root {
      --site-bg: #FEF7FF;
      --site-surface: #FAEAFC;
      --site-text: #141015;
      --site-muted: #413643;
      --site-border: #EAD7EC;
      --site-primary: #DC35F3;
      --site-on-primary: #000000;
      --site-secondary: #6EA7AC;
      --site-on-secondary: #000000;
      --site-accent: #937E5C;
      --site-on-accent: #000000;
      --site-success: #22C55E;
      --site-warning: #F59E0B;
      --site-error: #EF4444;
      --site-info: #3B82F6;
      --color-bg: var(--site-bg);
      --color-surface: var(--site-surface);
      --color-text: var(--site-text);
      --color-muted: var(--site-muted);
      --color-border: var(--site-border);
      --color-primary: var(--site-primary);
      --color-on-primary: var(--site-on-primary);
      --color-secondary: var(--site-secondary);
      --color-on-secondary: var(--site-on-secondary);
      --color-accent: var(--site-accent);
      --color-on-accent: var(--site-on-accent);
      --color-success: var(--site-success);
      --color-warning: var(--site-warning);
      --color-error: var(--site-error);
      --color-info: var(--site-info);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --site-bg: #160618;
        --site-surface: #241127;
        --site-text: #E7E3E8;
        --site-muted: #BBABBD;
        --site-border: #362838;
        --site-primary: #E290EE;
        --site-on-primary: #000000;
        --site-secondary: #82B6BA;
        --site-on-secondary: #000000;
        --site-accent: #DFCAA9;
        --site-on-accent: #000000;
      }
    }

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    body{font-family:'Crimson Pro',Georgia,serif;background:var(--site-bg);color:var(--site-text);line-height:1.6}
    .site-header{display:flex;justify-content:space-between;align-items:center;padding:1rem clamp(16px,5vw,80px);background:var(--site-surface);border-bottom:1px solid var(--site-border);position:relative;z-index:100}
    .brand{font-size:1.6rem;font-weight:700;color:var(--site-primary);text-decoration:none;letter-spacing:-0.02em}
    .nav-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--site-text)}
    .nav-menu{display:flex;align-items:center;gap:1.5rem}
    .nav-list{display:flex;list-style:none;gap:1.5rem;align-items:center}
    .nav-list a{text-decoration:none;color:var(--site-muted);font-weight:500;transition:color 0.2s;font-size:1.1rem}
    .nav-list a:hover{color:var(--site-primary)}
    .btn-cta{border:2px solid var(--site-primary);color:var(--site-primary);background:transparent;padding:0.5rem 1.2rem;border-radius:999px;font-weight:600;text-decoration:none;transition:background 0.2s,color 0.2s;font-size:0.95rem;letter-spacing:0.02em}
    .btn-cta:hover{background:var(--site-primary);color:var(--site-on-primary)}
    .hidden{display:none !important}

    @media (max-width:768px) {
      .nav-toggle{display:block}
      .nav-menu{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--site-surface);border-bottom:2px solid var(--site-primary);padding:1rem 2rem 2rem;box-shadow:0 12px 24px rgba(0,0,0,0.1)}
      .nav-menu.open{display:flex}
      .nav-list{flex-direction:column;gap:1rem;width:100%}
      .btn-cta{margin-top:1rem}
    }

/* --- from about.html --- */
.deck {
            background: var(--color-bg);
            color: var(--color-text);
            height: 100dvh;
            overflow-y: scroll;
            scroll-behavior: smooth;
            scroll-snap-type: y mandatory;
        }

        .panel {
            align-content: center;
            display: grid;
            min-height: 100dvh;
            overflow: visible;
            padding: 5vh 4vw;
            position: relative;
            scroll-snap-align: start;
            scroll-snap-stop: always;
        }

        .pad {
            margin-inline: auto;
            max-width: 1240px;
            padding: 1.5rem 0;
            width: min(92vw, 1240px);
        }

        .gridSplit {
            align-items: center;
            display: grid;
            gap: clamp(2rem, 5vw, 5rem);
            grid-template-columns: 1.05fr .95fr;
        }

        .gridSplitReverse {
            align-items: center;
            display: grid;
            gap: clamp(2rem, 5vw, 5rem);
            grid-template-columns: .9fr 1.1fr;
        }

        .gridBand {
            display: grid;
            gap: 1.5rem;
            grid-auto-rows: minmax(220px, auto);
            grid-template-columns: repeat(3, 1fr);
        }

        .gridOffset {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(12, 1fr);
        }

        .panelTitle {
            font-size: clamp(2.6rem, 6.5vw, 5.5rem);
            font-weight: 700;
            letter-spacing: -.045em;
            line-height: .95;
            margin: 0 0 .35em;
        }

        .panelLead {
            font-size: clamp(1.15rem, 1.7vw, 1.45rem);
            font-weight: 300;
            line-height: 1.45;
            max-width: 34rem;
        }

        .counter {
            font-size: .78rem;
            letter-spacing: .25em;
            position: absolute;
            right: 5vw;
            text-transform: uppercase;
            top: 4vh;
        }

        .heroPanel {
            background: var(--color-bg);
            color: var(--color-text);
        }

        .heroCopy {
            padding-block: 2rem;
        }

        .heroCopy .panelTitle {
            max-width: 10ch;
        }

        .heroActions {
            display: flex;
            flex-wrap: wrap;
            gap: .8rem;
            margin-top: 2rem;
        }

        .outlineButton {
            align-items: center;
            border: 2px solid currentColor;
            border-radius: 999px;
            color: var(--color-primary);
            display: inline-flex;
            font-size: 1rem;
            font-weight: 600;
            gap: .5rem;
            padding: .7rem 1.2rem;
            text-decoration: none;
            transition: background .2s, color .2s, transform .2s;
        }

        .outlineButton:hover {
            background: var(--color-primary);
            color: var(--color-on-primary);
            transform: translateY(-4px);
        }

        .secondaryButton {
            color: var(--color-muted);
        }

        .heroImage {
            min-height: 540px;
            position: relative;
        }

        .heroImage img {
            border-radius: 16px 0 0 16px;
            height: 100%;
            object-fit: cover;
            position: absolute;
            right: -4vw;
            top: 0;
            width: calc(100% + 4vw);
        }

        .launchPanel {
            background-image: linear-gradient(rgba(20, 16, 21, .72), rgba(20, 16, 21, .78)), url("images/about-workspace-launch.jpeg");
            background-position: center;
            background-size: cover;
            color: var(--color-text);
        }

        .launchCopy {
            grid-column: 7 / 13;
            padding: clamp(1.5rem, 4vw, 4rem);
        }

        .launchCopy .panelTitle {
            max-width: 8ch;
        }

        .launchCopy .outlineButton {
            color: var(--color-primary);
            margin-top: 1.5rem;
        }

        .servicesPanel {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .servicesPanel .panelLead {
            margin-bottom: 2rem;
        }

        .serviceCard,
        .teamCard,
        .valueCard,
        .certCard,
        .planCard {
            background: linear-gradient(145deg, var(--color-surface), var(--color-bg));
            border: 1px solid var(--color-border);
            border-radius: 16px;
            color: var(--color-text);
            padding: 1.5rem;
            transition: box-shadow .25s, transform .25s;
        }

        .serviceCard:hover,
        .teamCard:hover,
        .valueCard:hover,
        .certCard:hover,
        .planCard:hover {
            box-shadow: 0 18px 35px rgba(20, 16, 21, .13);
            transform: translateY(-12px);
        }

        .iconUnderline {
            border-bottom: 3px solid var(--color-primary);
            color: var(--color-primary);
            display: inline-block;
            font-size: 1.8rem;
            line-height: 1;
            margin-bottom: 1.2rem;
            padding-bottom: 6px;
        }

        .cardTitle {
            font-size: 1.45rem;
            font-weight: 700;
            margin-bottom: .55rem;
        }

        .cardText,
        .serviceCard li,
        .planCard li {
            color: var(--color-muted);
            font-weight: 300;
            line-height: 1.5;
        }

        .serviceCard ul,
        .planCard ul {
            list-style: none;
            margin-top: 1rem;
        }

        .serviceCard li,
        .planCard li {
            border-top: 1px solid var(--color-border);
            padding: .55rem 0;
        }

        .aboutPanel {
            background: var(--color-accent);
            color: var(--color-on-accent);
        }

        .aboutImage {
            min-height: 520px;
        }

        .aboutImage img {
            border-radius: 16px;
            height: 100%;
            object-fit: cover;
            width: 100%;
        }

        .aboutStory {
            background: rgba(255, 255, 255, .16);
            border: 1px solid rgba(0, 0, 0, .18);
            border-radius: 16px;
            max-width: 65ch;
            padding: clamp(1.5rem, 4vw, 3.5rem);
        }

        .aboutStory p {
            font-size: clamp(1.25rem, 2.1vw, 1.8rem);
            font-weight: 300;
            line-height: 1.55;
        }

        .teamPanel {
            background: var(--color-bg);
            color: var(--color-text);
        }

        .teamIntro {
            align-items: end;
            display: flex;
            justify-content: space-between;
            margin-bottom: 2rem;
        }

        .teamGrid {
            display: grid;
            gap: 1.25rem;
            grid-template-columns: repeat(4, 1fr);
        }

        .teamCard {
            padding: 1rem;
        }

        .teamCard img {
            aspect-ratio: 1;
            border-radius: 12px;
            display: block;
            margin-bottom: 1rem;
            object-fit: cover;
            width: 100%;
        }

        .teamRole {
            color: var(--color-primary);
            font-size: .95rem;
            font-weight: 600;
            margin-bottom: .45rem;
        }

        .proofPanel {
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .proofQuote {
            font-size: clamp(1.8rem, 4vw, 3.2rem);
            font-weight: 600;
            letter-spacing: -.025em;
            line-height: 1.12;
            margin: 0 auto 3rem;
            max-width: 25ch;
            text-align: center;
        }

        .proofQuote::before {
            content: "“";
            display: block;
            font-size: 5rem;
            line-height: .55;
        }

        .proofStrip {
            border-top: 1px solid rgba(0, 0, 0, .35);
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }

        .proofStat {
            border-right: 1px solid rgba(0, 0, 0, .35);
            padding: 1.3rem;
            text-align: center;
        }

        .proofStat:last-child {
            border-right: 0;
        }

        .proofStat strong {
            display: block;
            font-size: clamp(2rem, 4vw, 3.5rem);
            line-height: 1;
        }

        .proofStat span {
            display: block;
            font-weight: 500;
            margin-top: .5rem;
        }

        .plansPanel {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .planCard {
            display: flex;
            flex-direction: column;
        }

        .planTag {
            color: var(--color-primary);
            font-size: .8rem;
            font-weight: 700;
            letter-spacing: .15em;
            text-transform: uppercase;
        }

        .planCard .outlineButton {
            margin-top: auto;
            width: fit-content;
        }

        .contactPanel {
            background: var(--color-secondary);
            color: var(--color-on-secondary);
            display: flex;
            flex-direction: column;
        }

        .contactGrid {
            align-items: stretch;
            display: grid;
            gap: 2rem;
            grid-template-columns: 1fr 1fr;
        }

        .contactForm,
        .contactDetails {
            background: rgba(255, 255, 255, .18);
            border: 1px solid rgba(0, 0, 0, .18);
            border-radius: 16px;
            padding: clamp(1.25rem, 3vw, 2.5rem);
        }

        .formRow {
            display: grid;
            gap: 1rem;
            grid-template-columns: 1fr 1fr;
        }

        .field {
            display: flex;
            flex-direction: column;
            gap: .35rem;
            margin-bottom: 1rem;
        }

        .field label {
            font-size: .95rem;
            font-weight: 600;
        }

        .field input,
        .field textarea {
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            color: var(--color-text);
            font: inherit;
            padding: .75rem;
            width: 100%;
        }

        .field textarea {
            min-height: 110px;
            resize: vertical;
        }

        .contactForm .outlineButton {
            color: var(--color-on-secondary);
            cursor: pointer;
        }

        .contactDetails address {
            font-style: normal;
            line-height: 1.7;
            margin-top: 1.5rem;
        }

        .contactDetails a {
            color: inherit;
            font-weight: 600;
        }

        .footbar {
            border-top: 1px solid rgba(0, 0, 0, .25);
            font-size: .95rem;
            margin: auto auto 0;
            padding-top: 1rem;
            width: min(1240px, 92vw);
        }

        @media (max-width: 820px) {
            .deck {
                scroll-snap-type: y proximity;
            }

            .panel {
                min-height: 100dvh;
                padding-block: 14vh 10vh;
            }

            .gridSplit,
            .gridSplitReverse,
            .gridBand,
            .gridOffset,
            .teamGrid,
            .contactGrid {
                grid-template-columns: 1fr;
            }

            .launchCopy {
                grid-column: auto;
            }

            .heroImage {
                min-height: 300px;
            }

            .heroImage img {
                border-radius: 16px;
                position: relative;
                right: auto;
                width: 100%;
            }

            .aboutImage {
                min-height: 300px;
            }

            .teamIntro {
                align-items: start;
                flex-direction: column;
                gap: .75rem;
            }

            .proofStrip {
                grid-template-columns: 1fr;
            }

            .proofStat {
                border-bottom: 1px solid rgba(0, 0, 0, .35);
                border-right: 0;
            }

            .proofStat:last-child {
                border-bottom: 0;
            }

            .formRow {
                grid-template-columns: 1fr;
                gap: 0;
            }
        }

/* --- from about.html --- */
.site-footer{background:var(--site-surface);border-top:1px solid var(--site-border);padding:clamp(2rem,5vw,4rem) clamp(16px,5vw,80px);color:var(--site-muted)}
    .footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:1240px;margin:0 auto}
    .footer-col h4{color:var(--site-text);font-size:1.2rem;margin-bottom:1rem;font-weight:700}
    .footer-col p,.footer-col a{font-size:0.95rem;line-height:1.7;color:var(--site-muted);text-decoration:none;display:block;margin-bottom:0.5rem}
    .footer-col a:hover{color:var(--site-primary)}
    .footer-bottom{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--site-border);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;font-size:0.9rem}
    .footer-bottom .legal-links{display:flex;gap:1.5rem}
    .footer-bottom a{color:var(--site-muted);text-decoration:none}
    .footer-bottom a:hover{color:var(--site-primary)}
    .social-icons{display:flex;gap:1rem;margin-top:1rem}
    .social-icons a{color:var(--site-muted);font-size:1.5rem}
    @media (max-width:768px) {
      .footer-grid{grid-template-columns:1fr 1fr}
      .footer-bottom{flex-direction:column;align-items:flex-start;gap:1rem}
    }
    @media (max-width:480px) {
      .footer-grid{grid-template-columns:1fr}
    }
    /* Cookie banner */
    .cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--site-surface);border-top:1px solid var(--site-border);padding:1rem 2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;z-index:1000;box-shadow:0 -4px 12px rgba(0,0,0,0.05)}
    .cookie-banner p{margin:0;font-size:0.95rem;color:var(--site-muted)}
    .cookie-btn{background:var(--site-primary);color:var(--site-on-primary);border:none;padding:0.5rem 1.5rem;border-radius:999px;font-weight:600;cursor:pointer;font-size:0.95rem;transition:opacity 0.2s}
    .cookie-btn:hover{opacity:0.9}

/* --- from contact.html --- */
.contactDeck {
            background: var(--color-bg);
            color: var(--color-text);
            font-family: "Crimson Pro", Georgia, serif;
            min-height: 100dvh;
        }

        .contactDeck *,
        .contactDeck *::before,
        .contactDeck *::after {
            box-sizing: border-box;
        }

        .contactDeck .panel {
            align-content: center;
            display: grid;
            min-height: 100dvh;
            overflow: visible;
            padding: 24px 0;
            position: relative;
            scroll-snap-align: start;
            scroll-snap-stop: always;
        }

        .contactDeck .deckPad {
            margin-inline: auto;
            padding: clamp(40px, 7vh, 88px) 0;
            width: min(1240px, 92vw);
        }

        .contactDeck .gridSplit {
            align-items: center;
            display: grid;
            gap: clamp(32px, 5vw, 76px);
            grid-template-columns: 1.05fr .95fr;
        }

        .contactDeck .gridBand {
            display: grid;
            gap: 24px;
            grid-auto-rows: minmax(220px, auto);
            grid-template-columns: repeat(3, 1fr);
        }

        .contactDeck .gridOffset {
            display: grid;
            gap: 24px;
            grid-template-columns: repeat(12, 1fr);
        }

        .contactDeck .panelTitle {
            font-size: clamp(2.6rem, 6.5vw, 5.5rem);
            font-weight: 700;
            letter-spacing: -.045em;
            line-height: .93;
            margin: 0 0 18px;
        }

        .contactDeck .subLine {
            color: var(--color-muted);
            font-size: clamp(1.15rem, 2vw, 1.45rem);
            font-weight: 300;
            line-height: 1.35;
            margin: 0;
            max-width:  thirtych;
            max-width: 30ch;
        }

        .contactDeck .counter {
            color: var(--color-muted);
            font-size: .78rem;
            letter-spacing: .25em;
            position: absolute;
            right: 5vw;
            text-transform: uppercase;
            top: 4vh;
        }

        .contactDeck .heroPanel {
            background: var(--color-bg);
            color: var(--color-text);
        }

        .contactDeck .heroCopy {
            padding-block: 20px;
        }

        .contactDeck .heroCopy .panelTitle {
            max-width: 7ch;
        }

        .contactDeck .heroImage {
            align-self: stretch;
            border-radius: 16px 0 0 16px;
            min-height: 480px;
            object-fit: cover;
            width: 100%;
        }

        .contactDeck .buttonRow {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 30px;
        }

        .contactDeck .outlineButton,
        .contactDeck .solidButton {
            border: 2px solid var(--color-primary);
            border-radius: 999px;
            display: inline-flex;
            font-size: 1.08rem;
            font-weight: 600;
            gap: 9px;
            padding: 11px 20px;
            text-decoration: none;
            transition: background .2s, color .2s, transform .2s;
        }

        .contactDeck .outlineButton {
            background: transparent;
            color: var(--color-primary);
        }

        .contactDeck .solidButton {
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .contactDeck .outlineButton:hover,
        .contactDeck .solidButton:hover {
            transform: translateY(-4px);
        }

        .contactDeck .outlineButton:hover {
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .contactDeck .solidButton:hover {
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .contactDeck .launchPanel {
            background: var(--color-secondary) url("images/contact-workstation.jpeg") center / cover;
            color: var(--color-on-secondary);
        }

        .contactDeck .launchPanel::before {
            background: rgba(0, 0, 0, .58);
            content: "";
            inset: 0;
            position: absolute;
        }

        .contactDeck .launchPanel .deckPad {
            position: relative;
            z-index: 1;
        }

        .contactDeck .launchBlock {
            grid-column: 7 / 13;
            max-width: 560px;
        }

        .contactDeck .launchBlock .subLine {
            color: var(--color-on-secondary);
        }

        .contactDeck .launchKicker {
            border-bottom: 3px solid var(--color-primary);
            display: inline-block;
            font-size: 1rem;
            letter-spacing: .12em;
            margin-bottom: 18px;
            padding-bottom: 6px;
            text-transform: uppercase;
        }

        .contactDeck .servicesPanel {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .contactDeck .sectionIntro {
            align-items: end;
            display: flex;
            justify-content: space-between;
            margin-bottom: 28px;
        }

        .contactDeck .sectionIntro .panelTitle {
            margin-bottom: 0;
        }

        .contactDeck .serviceCard,
        .contactDeck .planCard,
        .contactDeck .detailCard {
            background: linear-gradient(145deg, var(--color-bg), var(--color-surface));
            border: 1px solid var(--color-border);
            border-radius: 16px;
            color: var(--color-text);
            padding: 26px;
            transition: transform .25s, border-color .25s;
        }

        .contactDeck .serviceCard:hover,
        .contactDeck .planCard:hover,
        .contactDeck .detailCard:hover {
            border-color: var(--color-primary);
            transform: translateY(-12px);
        }

        .contactDeck .serviceCard h3,
        .contactDeck .planCard h3,
        .contactDeck .detailCard h3 {
            font-size: 1.55rem;
            line-height: 1.05;
            margin: 18px 0 10px;
        }

        .contactDeck .serviceCard p,
        .contactDeck .planCard p,
        .contactDeck .detailCard p {
            color: var(--color-muted);
            font-size: 1.08rem;
            font-weight: 300;
            line-height: 1.35;
            margin: 0;
        }

        .contactDeck .iconMark {
            border-bottom: 3px solid var(--color-primary);
            color: var(--color-primary);
            display: inline-block;
            font-size: 2rem;
            line-height: 1;
            padding-bottom: 6px;
        }

        .contactDeck .aboutPanel {
            background: var(--color-bg);
            color: var(--color-text);
        }

        .contactDeck .aboutImage {
            border-radius: 16px;
            min-height: 500px;
            object-fit: cover;
            width: 100%;
        }

        .contactDeck .aboutText {
            border-left: 4px solid var(--color-primary);
            font-size: clamp(1.3rem, 2vw, 1.7rem);
            font-weight: 300;
            line-height: 1.38;
            max-width: 65ch;
            padding-left: 28px;
        }

        .contactDeck .aboutText strong {
            font-weight: 700;
        }

        .contactDeck .proofPanel {
            background: var(--color-accent);
            color: var(--color-on-accent);
        }

        .contactDeck .quote {
            font-size: clamp(1.8rem, 4vw, 3.2rem);
            font-weight: 500;
            letter-spacing: -.025em;
            line-height: 1.08;
            margin: 0 auto 46px;
            max-width: 24ch;
            text-align: center;
        }

        .contactDeck .quoteMark {
            display: block;
            font-size: 4rem;
            line-height: .6;
            margin-bottom: 18px;
        }

        .contactDeck .proofStrip {
            border-top: 1px solid rgba(0, 0, 0, .35);
            display: grid;
            gap: 18px;
            grid-template-columns: repeat(3, 1fr);
            padding-top: 24px;
        }

        .contactDeck .proofStat {
            font-size: 1.15rem;
            font-weight: 600;
            text-align: center;
        }

        .contactDeck .proofStat .iconMark {
            border-color: var(--color-on-accent);
            color: var(--color-on-accent);
            display: block;
            font-size: 1.6rem;
            margin: 0 auto 12px;
            width: max-content;
        }

        .contactDeck .plansPanel {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .contactDeck .planCard {
            display: flex;
            flex-direction: column;
        }

        .contactDeck .planCard ul {
            color: var(--color-muted);
            font-size: 1.05rem;
            font-weight: 300;
            line-height: 1.45;
            list-style: none;
            margin: 20px 0 24px;
            padding: 0;
        }

        .contactDeck .planCard li {
            margin: 8px 0;
            padding-left: 24px;
            position: relative;
        }

        .contactDeck .planCard li::before {
            color: var(--color-primary);
            content: "\eb79";
            font-family: "remixicon";
            left: 0;
            position: absolute;
        }

        .contactDeck .planCard .outlineButton {
            margin-top: auto;
            width: max-content;
        }

        .contactDeck .contactPanel {
            background: var(--color-bg);
            color: var(--color-text);
        }

        .contactDeck .contactGrid {
            align-items: start;
        }

        .contactDeck .formCard {
            background: linear-gradient(145deg, var(--color-surface), var(--color-bg));
            border: 1px solid var(--color-border);
            border-radius: 16px;
            padding: clamp(22px, 4vw, 38px);
        }

        .contactDeck .formCard form {
            display: grid;
            gap: 16px;
            margin-top: 24px;
        }

        .contactDeck .fieldRow {
            display: grid;
            gap: 16px;
            grid-template-columns: 1fr 1fr;
        }

        .contactDeck label {
            color: var(--color-muted);
            display: grid;
            font-size: 1rem;
            font-weight: 500;
            gap: 6px;
        }

        .contactDeck input,
        .contactDeck select,
        .contactDeck textarea {
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            color: var(--color-text);
            font: inherit;
            font-size: 1.08rem;
            min-height: 48px;
            padding: 10px 13px;
            width: 100%;
        }

        .contactDeck textarea {
            min-height: 128px;
            resize: vertical;
        }

        .contactDeck input:focus,
        .contactDeck select:focus,
        .contactDeck textarea:focus {
            border-color: var(--color-primary);
            outline: 2px solid var(--color-primary);
            outline-offset: 1px;
        }

        .contactDeck .privacyNote {
            color: var(--color-muted);
            font-size: .95rem;
            font-weight: 300;
            line-height: 1.3;
        }

        .contactDeck .privacyNote a {
            color: var(--color-primary);
        }

        .contactDeck .mapCard {
            border-radius: 16px;
            min-height: 500px;
            overflow: visible;
            position: relative;
        }

        .contactDeck .mapCard img {
            border-radius: 16px;
            height: 100%;
            min-height: 500px;
            object-fit: cover;
            width: 100%;
        }

        .contactDeck .mapOverlay {
            background: var(--color-primary);
            bottom: 22px;
            color: var(--color-on-primary);
            left: 22px;
            padding: 18px 20px;
            position: absolute;
            right: 22px;
        }

        .contactDeck .mapOverlay h3 {
            font-size: 1.45rem;
            margin: 0 0 5px;
        }

        .contactDeck .mapOverlay p {
            font-size: 1.05rem;
            line-height: 1.25;
            margin: 0 0 12px;
        }

        .contactDeck .mapOverlay a {
            color: var(--color-on-primary);
            font-weight: 600;
        }

        .contactDeck .footbar {
            border-top: 1px solid var(--color-border);
            color: var(--color-muted);
            font-size: .95rem;
            margin: 38px auto 0;
            padding-top: 18px;
            width: min(1240px, 92vw);
        }

        @media (max-width: 820px) {
            .contactDeck {
                scroll-snap-type: y proximity;
            }

            .contactDeck .panel {
                min-height: 100dvh;
                padding-block: 12vh 9vh;
            }

            .contactDeck .gridSplit,
            .contactDeck .gridBand,
            .contactDeck .gridOffset,
            .contactDeck .proofStrip {
                grid-template-columns: 1fr;
            }

            .contactDeck .heroImage {
                border-radius: 16px;
                min-height: 330px;
            }

            .contactDeck .launchBlock {
                grid-column: auto;
            }

            .contactDeck .sectionIntro {
                align-items: start;
                display: block;
            }

            .contactDeck .aboutImage,
            .contactDeck .mapCard,
            .contactDeck .mapCard img {
                min-height: 330px;
            }

            .contactDeck .fieldRow {
                grid-template-columns: 1fr;
            }

            .contactDeck .proofStrip {
                gap: 24px;
            }
        }

/* --- from equipment.html --- */
.equipmentDeck {
            --panelWidth: min(1240px, 92vw);
            background: var(--color-bg);
            color: var(--color-text);
            font-family: "Crimson Pro", Georgia, serif;
        }

        .equipmentDeck *,
        .equipmentDeck *::before,
        .equipmentDeck *::after {
            box-sizing: border-box;
        }

        .equipmentDeck .deckPanel {
            align-content: center;
            display: grid;
            min-height: 100dvh;
            overflow: visible;
            padding: clamp(56px, 8vh, 104px) 0;
            position: relative;
            scroll-snap-align: start;
            scroll-snap-stop: always;
        }

        .equipmentDeck .panelPad {
            margin-inline: auto;
            width: var(--panelWidth);
        }

        .equipmentDeck .splitGrid {
            align-items: center;
            display: grid;
            gap: clamp(32px, 5vw, 76px);
            grid-template-columns: 1.05fr .95fr;
        }

        .equipmentDeck .offsetGrid {
            display: grid;
            gap: 24px;
            grid-template-columns: repeat(12, 1fr);
        }

        .equipmentDeck .bandGrid {
            display: grid;
            gap: 24px;
            grid-auto-rows: minmax(220px, auto);
            grid-template-columns: repeat(3, 1fr);
        }

        .equipmentDeck .counter {
            font-size: .8rem;
            letter-spacing: .24em;
            position: absolute;
            right: 5vw;
            text-transform: uppercase;
            top: 4vh;
        }

        .equipmentDeck .panelTitle {
            font-size: clamp(2.6rem, 6.5vw, 5.5rem);
            font-weight: 700;
            letter-spacing: -.045em;
            line-height: .92;
            margin: 0 0 1rem;
        }

        .equipmentDeck .panelLead {
            color: var(--color-muted);
            font-size: clamp(1.15rem, 1.8vw, 1.45rem);
            font-weight: 300;
            margin: 0 0 1.5rem;
            max-width:  thirtych;
            max-width: 34rem;
        }

        .equipmentDeck .eyebrow {
            color: var(--color-primary);
            font-size: .82rem;
            font-weight: 600;
            letter-spacing: .18em;
            margin-bottom: 1rem;
            text-transform: uppercase;
        }

        .equipmentDeck .buttonRow {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .equipmentDeck .outlineButton {
            border: 2px solid var(--color-primary);
            border-radius: 999px;
            color: var(--color-primary);
            display: inline-flex;
            font-size: 1.05rem;
            font-weight: 600;
            gap: .5rem;
            padding: .68rem 1.2rem;
            text-decoration: none;
            transition: background .2s ease, color .2s ease, transform .2s ease;
        }

        .equipmentDeck .outlineButton:hover {
            background: var(--color-primary);
            color: var(--color-on-primary);
            transform: translateY(-3px);
        }

        .equipmentDeck .heroPanel {
            background: var(--color-bg);
        }

        .equipmentDeck .heroImage {
            min-height: 480px;
            overflow: hidden;
            position: relative;
        }

        .equipmentDeck .heroImage img {
            display: block;
            height: 100%;
            object-fit: cover;
            width: 100%;
        }

        .equipmentDeck .heroImage::after {
            border: 1px solid var(--color-primary);
            content: "";
            inset: 18px;
            pointer-events: none;
            position: absolute;
        }

        .equipmentDeck .launchPanel {
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

        .equipmentDeck .launchPanel::before {
            background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .24));
            content: "";
            inset: 0;
            position: absolute;
        }

        .equipmentDeck .launchPanel .panelPad {
            position: relative;
            z-index: 1;
        }

        .equipmentDeck .launchText {
            grid-column: 7 / 13;
        }

        .equipmentDeck .launchText .panelLead {
            color: var(--color-on-secondary);
        }

        .equipmentDeck .productFeature {
            background: linear-gradient(135deg, var(--color-surface), var(--color-bg));
            border: 1px solid var(--color-border);
            border-radius: 16px;
            color: var(--color-text);
            padding: 1.5rem;
        }

        .equipmentDeck .productFeature img {
            display: block;
            height: 220px;
            margin: -1.5rem -1.5rem 1.2rem;
            object-fit: cover;
            width: calc(100% + 3rem);
        }

        .equipmentDeck .productFeature h3,
        .equipmentDeck .categoryCard h3,
        .equipmentDeck .planCard h3 {
            font-size: 1.55rem;
            margin: 0 0 .4rem;
        }

        .equipmentDeck .productFeature p,
        .equipmentDeck .categoryCard p,
        .equipmentDeck .planCard p {
            color: var(--color-muted);
            font-size: 1.05rem;
            font-weight: 300;
            margin: 0 0 .8rem;
        }

        .equipmentDeck .productFeature strong {
            display: block;
            font-size: 1.35rem;
            margin: .8rem 0 1rem;
        }

        .equipmentDeck .servicesPanel {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .equipmentDeck .categoryCard {
            background: linear-gradient(145deg, var(--color-bg), var(--color-surface));
            border: 1px solid var(--color-border);
            border-radius: 16px;
            padding: 1.7rem;
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .equipmentDeck .categoryCard:hover,
        .equipmentDeck .productFeature:hover,
        .equipmentDeck .planCard:hover {
            box-shadow: 0 20px 34px rgba(20, 16, 21, .14);
            transform: translateY(-12px);
        }

        .equipmentDeck .iconAccent {
            border-bottom: 3px solid var(--color-primary);
            color: var(--color-primary);
            display: inline-block;
            font-size: 2rem;
            line-height: 1;
            margin-bottom: 1.1rem;
            padding-bottom: 6px;
        }

        .equipmentDeck .aboutPanel {
            background: var(--color-accent);
            color: var(--color-on-accent);
        }

        .equipmentDeck .aboutImage {
            min-height: 520px;
        }

        .equipmentDeck .aboutImage img {
            display: block;
            height: 100%;
            min-height: 520px;
            object-fit: cover;
            width: 100%;
        }

        .equipmentDeck .aboutCopy {
            font-size: clamp(1.2rem, 2vw, 1.55rem);
            font-weight: 300;
            line-height: 1.45;
            max-width: 65ch;
        }

        .equipmentDeck .aboutCopy p {
            margin: 0;
        }

        .equipmentDeck .proofPanel {
            background-color: var(--color-bg);
            background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
            background-size: 22px 22px;
            color: var(--color-text);
        }

        .equipmentDeck .quoteBlock {
            margin-inline: auto;
            max-width: 930px;
            text-align: center;
        }

        .equipmentDeck blockquote {
            font-size: clamp(1.8rem, 4vw, 3.2rem);
            font-weight: 500;
            letter-spacing: -.025em;
            line-height: 1.05;
            margin: 0 0 1rem;
        }

        .equipmentDeck .quoteByline {
            color: var(--color-muted);
            font-size: 1.1rem;
            font-weight: 300;
        }

        .equipmentDeck .proofStrip {
            border-top: 1px solid var(--color-border);
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(3, 1fr);
            margin-top: 3rem;
            padding-top: 1.4rem;
        }

        .equipmentDeck .proofStat {
            padding: .7rem;
            text-align: center;
        }

        .equipmentDeck .proofStat strong {
            display: block;
            font-size: 2rem;
        }

        .equipmentDeck .proofStat span {
            color: var(--color-muted);
            font-size: 1rem;
        }

        .equipmentDeck .plansPanel {
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .equipmentDeck .plansPanel .panelLead {
            color: var(--color-on-primary);
        }

        .equipmentDeck .planCard {
            background: linear-gradient(145deg, var(--color-bg), var(--color-surface));
            border-radius: 16px;
            color: var(--color-text);
            padding: 1.7rem;
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .equipmentDeck .planCard ul {
            color: var(--color-muted);
            font-size: 1.05rem;
            font-weight: 300;
            list-style: none;
            margin: 1rem 0 1.4rem;
            padding: 0;
        }

        .equipmentDeck .planCard li {
            border-top: 1px solid var(--color-border);
            padding: .6rem 0;
        }

        .equipmentDeck .planCard li::before {
            color: var(--color-primary);
            content: "\eb7b";
            font-family: "remixicon";
            margin-right: .5rem;
        }

        .equipmentDeck .contactPanel {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .equipmentDeck .contactForm {
            background: linear-gradient(145deg, var(--color-bg), var(--color-surface));
            border: 1px solid var(--color-border);
            border-radius: 16px;
            display: grid;
            gap: 1rem;
            padding: clamp(1.3rem, 3vw, 2rem);
        }

        .equipmentDeck .contactForm label {
            color: var(--color-muted);
            font-size: 1rem;
        }

        .equipmentDeck .contactForm input,
        .equipmentDeck .contactForm select,
        .equipmentDeck .contactForm textarea {
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            color: var(--color-text);
            display: block;
            font: inherit;
            margin-top: .35rem;
            padding: .7rem .8rem;
            width: 100%;
        }

        .equipmentDeck .contactForm textarea {
            min-height: 110px;
            resize: vertical;
        }

        .equipmentDeck .contactForm button {
            background: transparent;
            cursor: pointer;
            justify-content: center;
        }

        .equipmentDeck .addressCard {
            border-left: 4px solid var(--color-primary);
            padding: 1rem 0 1rem 1.4rem;
        }

        .equipmentDeck .addressCard h3 {
            font-size: 1.8rem;
            margin: 0 0 .8rem;
        }

        .equipmentDeck .addressCard p {
            color: var(--color-muted);
            font-size: 1.15rem;
            font-weight: 300;
            margin: 0 0 1.2rem;
        }

        .equipmentDeck .brandGrid {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat(3, 1fr);
            margin: 1.4rem 0;
        }

        .equipmentDeck .brandMark {
            border: 1px solid var(--color-border);
            border-radius: 12px;
            color: var(--color-muted);
            font-size: 1.15rem;
            font-weight: 600;
            padding: .7rem;
            text-align: center;
        }

        .equipmentDeck .trustLine {
            color: var(--color-muted);
            font-size: 1rem;
        }

        .equipmentDeck .footbar {
            border-top: 1px solid var(--color-border);
            color: var(--color-muted);
            font-size: .95rem;
            margin: 4rem auto 0;
            padding-top: 1rem;
            width: var(--panelWidth);
        }

        @media (max-width: 820px) {
            .equipmentDeck .deckPanel {
                min-height: 100dvh;
                padding: 14vh 0 10vh;
                scroll-snap-stop: normal;
            }

            .equipmentDeck .splitGrid,
            .equipmentDeck .bandGrid,
            .equipmentDeck .offsetGrid {
                grid-template-columns: 1fr;
            }

            .equipmentDeck .launchText {
                grid-column: auto;
            }

            .equipmentDeck .heroImage,
            .equipmentDeck .aboutImage,
            .equipmentDeck .aboutImage img {
                min-height: 300px;
            }

            .equipmentDeck .proofStrip {
                grid-template-columns: 1fr;
            }

            .equipmentDeck .brandGrid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .equipmentDeck .deckPanel {
                scroll-snap-stop: normal;
            }

            .equipmentDeck .categoryCard,
            .equipmentDeck .productFeature,
            .equipmentDeck .planCard,
            .equipmentDeck .outlineButton {
                transition: none;
            }
        }

/* --- from plans.html --- */
.supportDeck {
            background: var(--color-bg);
            color: var(--color-text);
            font-family: "Crimson Pro", Georgia, serif;
            min-height: 100dvh;
        }

        .supportDeck *,
        .supportDeck *::before,
        .supportDeck *::after {
            box-sizing: border-box;
        }

        .panel {
            align-content: center;
            display: grid;
            min-height: 100dvh;
            overflow: visible;
            position: relative;
            scroll-snap-align: start;
            scroll-snap-stop: always;
        }

        .deckInner {
            margin-inline: auto;
            padding: clamp(64px, 9vh, 120px) 0;
            width: min(1240px, 92vw);
        }

        .splitGrid {
            align-items: center;
            display: grid;
            gap: clamp(32px, 4vw, 72px);
            grid-template-columns: 1.1fr .9fr;
        }

        .bandGrid {
            display: grid;
            gap: 28px;
            grid-auto-rows: minmax(220px, auto);
            grid-template-columns: repeat(3, 1fr);
        }

        .offsetGrid {
            display: grid;
            gap: 24px;
            grid-template-columns: repeat(12, 1fr);
        }

        .panelTitle {
            font-size: clamp(2.6rem, 6.5vw, 5.5rem);
            font-weight: 700;
            letter-spacing: -.045em;
            line-height: .95;
            margin: 0 0 .4em;
        }

        .panelLead {
            color: var(--color-muted);
            font-size: clamp(1.15rem, 2vw, 1.45rem);
            font-weight: 300;
            line-height: 1.35;
            max-width: 34rem;
        }

        .counter {
            font-size: .8rem;
            letter-spacing: .25em;
            position: absolute;
            right: 5vw;
            top: 4vh;
        }

        .actionRow {
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 2rem;
        }

        .outlineButton {
            border: 2px solid var(--color-primary);
            border-radius: 999px;
            color: var(--color-primary);
            display: inline-flex;
            font-size: 1.05rem;
            font-weight: 600;
            gap: 9px;
            padding: .72rem 1.25rem;
            text-decoration: none;
            transition: background .2s ease, color .2s ease, transform .2s ease;
        }

        .outlineButton:hover,
        .outlineButton:focus-visible {
            background: var(--color-primary);
            color: var(--color-on-primary);
            transform: translateY(-3px);
        }

        .secondaryButton {
            border-color: var(--color-secondary);
            color: var(--color-secondary);
        }

        .heroPanel {
            background: var(--color-bg);
        }

        .heroVisual {
            border-radius: 16px 0 0 16px;
            justify-self: end;
            margin-right: -4.2vw;
            max-height: 70vh;
            object-fit: cover;
            width: min(100%, 640px);
        }

        .eyebrow {
            color: var(--color-primary);
            font-size: .9rem;
            font-weight: 700;
            letter-spacing: .14em;
            margin-bottom: 1rem;
            text-transform: uppercase;
        }

        .launchPanel {
            background-color: var(--color-text);
            background-image: linear-gradient(90deg, rgba(20, 16, 21, .9), rgba(20, 16, 21, .62)), url("images/support-technician-office.jpeg");
            background-position: center;
            background-size: cover;
            color: var(--color-text);
        }

        .launchPanel .panelLead,
        .launchPanel .eyebrow {
            color: var(--color-text);
        }

        .launchCopy {
            background: rgba(36, 17, 39, .9);
            border: 1px solid var(--color-border);
            border-radius: 16px;
            grid-column: 7 / 13;
            padding: clamp(28px, 5vw, 64px);
        }

        .launchCopy .panelTitle {
            color: var(--color-text);
            font-size: clamp(2.6rem, 5vw, 4.8rem);
        }

        .servicePanel {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .serviceCard,
        .planCard,
        .addonCard {
            background: linear-gradient(145deg, var(--color-bg), var(--color-surface));
            border: 1px solid var(--color-border);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            padding: 26px;
            transition: box-shadow .25s ease, transform .25s ease;
        }

        .serviceCard:hover,
        .planCard:hover,
        .addonCard:hover {
            box-shadow: 0 20px 38px rgba(20, 16, 21, .15);
            transform: translateY(-12px);
        }

        .iconAccent {
            border-bottom: 3px solid var(--color-accent);
            color: var(--color-primary);
            display: inline-block;
            font-size: 1.7rem;
            margin-bottom: 1.3rem;
            padding-bottom: 6px;
            width: fit-content;
        }

        .cardTitle {
            font-size: 1.65rem;
            font-weight: 700;
            line-height: 1.05;
            margin-bottom: .55rem;
        }

        .cardCopy {
            color: var(--color-muted);
            font-size: 1.08rem;
            font-weight: 300;
            line-height: 1.4;
        }

        .checkList {
            display: grid;
            gap: .55rem;
            list-style: none;
            margin-top: 1.25rem;
        }

        .checkList li {
            align-items: flex-start;
            display: flex;
            gap: .6rem;
        }

        .checkList i {
            color: var(--color-primary);
            flex: 0 0 auto;
            margin-top: .2rem;
        }

        .aboutPanel {
            background: var(--color-accent);
            color: var(--color-on-accent);
        }

        .aboutPanel .panelLead,
        .aboutPanel .eyebrow {
            color: var(--color-on-accent);
        }

        .aboutImage {
            border-radius: 16px;
            height: 540px;
            object-fit: cover;
            width: 100%;
        }

        .aboutCopy {
            max-width: 65ch;
        }

        .aboutCopy p {
            font-size: clamp(1.25rem, 2.2vw, 1.7rem);
            font-weight: 300;
            line-height: 1.45;
        }

        .proofPanel {
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

        .proofPanel .panelLead {
            color: var(--color-on-secondary);
        }

        .proofQuote {
            font-size: clamp(1.8rem, 4vw, 3.2rem);
            font-weight: 600;
            letter-spacing: -.025em;
            line-height: 1.08;
            margin: 0 auto 3rem;
            max-width: 980px;
        }

        .metricStrip {
            border-top: 1px solid rgba(0, 0, 0, .35);
            display: grid;
            gap: 1px;
            grid-template-columns: repeat(3, 1fr);
        }

        .metric {
            border-bottom: 1px solid rgba(0, 0, 0, .35);
            padding: 1.5rem 1rem 1rem 0;
        }

        .metric .iconAccent {
            color: var(--color-on-secondary);
        }

        .metricNumber {
            display: block;
            font-size: clamp(2rem, 4vw, 3.5rem);
            font-weight: 700;
            line-height: 1;
        }

        .metricLabel {
            display: block;
            font-size: 1.1rem;
            margin-top: .45rem;
        }

        .plansPanel {
            background-color: var(--color-bg);
            background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
            background-size: 22px 22px;
            color: var(--color-text);
        }

        .plansHeader {
            align-items: end;
            display: flex;
            justify-content: space-between;
            margin-bottom: 2rem;
        }

        .plansHeader .panelLead {
            max-width: 25rem;
        }

        .planCard {
            position: relative;
        }

        .featuredPlan {
            border-color: var(--color-primary);
            box-shadow: 0 14px 36px rgba(220, 53, 243, .16);
        }

        .planTag {
            background: var(--color-primary);
            color: var(--color-on-primary);
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .08em;
            padding: .35rem .7rem;
            position: absolute;
            right: 20px;
            text-transform: uppercase;
            top: 20px;
        }

        .price {
            color: var(--color-primary);
            font-size: 2.6rem;
            font-weight: 700;
            margin: .7rem 0 .2rem;
        }

        .price small {
            color: var(--color-muted);
            font-size: 1rem;
            font-weight: 400;
        }

        .planCard .outlineButton {
            justify-content: center;
            margin-top: auto;
            text-align: center;
        }

        .contactPanel {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .contactGrid {
            align-items: start;
        }

        .contactForm {
            display: grid;
            gap: 1rem;
            margin-top: 1.5rem;
            max-width: 560px;
        }

        .formRow {
            display: grid;
            gap: 1rem;
            grid-template-columns: 1fr 1fr;
        }

        .formLabel {
            color: var(--color-muted);
            display: grid;
            font-size: 1rem;
            gap: .35rem;
        }

        .formInput {
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: 8px;
            color: var(--color-text);
            font: inherit;
            padding: .75rem .85rem;
            width: 100%;
        }

        .formInput:focus {
            border-color: var(--color-primary);
            outline: 2px solid var(--color-primary);
            outline-offset: 1px;
        }

        .contactDetails {
            background: linear-gradient(145deg, var(--color-bg), var(--color-surface));
            border: 1px solid var(--color-border);
            border-radius: 16px;
            padding: clamp(24px, 4vw, 42px);
        }

        .contactDetails address {
            font-size: 1.2rem;
            font-style: normal;
            line-height: 1.65;
        }

        .contactDetails a {
            color: var(--color-primary);
            font-weight: 600;
        }

        .detailLine {
            align-items: flex-start;
            display: flex;
            gap: .7rem;
            margin-top: 1.25rem;
        }

        .detailLine i {
            color: var(--color-primary);
            font-size: 1.35rem;
        }

        .footbar {
            border-top: 1px solid var(--color-border);
            color: var(--color-muted);
            font-size: .95rem;
            margin-top: auto;
            padding: 1.25rem 4vw;
            text-align: center;
            width: 100%;
        }

        @media (max-width: 820px) {
            .supportDeck {
                scroll-snap-type: y proximity;
            }

            .panel {
                min-height: 100dvh;
                padding-block: 14vh 10vh;
            }

            .splitGrid,
            .bandGrid,
            .offsetGrid {
                grid-template-columns: 1fr;
            }

            .launchCopy {
                grid-column: 1;
            }

            .heroVisual {
                border-radius: 16px;
                justify-self: stretch;
                margin: 1rem 0 0;
                max-height: 48vh;
                width: 100%;
            }

            .aboutImage {
                height: 360px;
            }

            .plansHeader {
                align-items: start;
                flex-direction: column;
                gap: 1rem;
            }

            .metricStrip {
                grid-template-columns: 1fr;
            }

            .formRow {
                grid-template-columns: 1fr;
            }
        }

/* --- from privacy-policy.html --- */
.privacyDeck {
            --panelPad: clamp(3rem, 8vh, 7rem) clamp(1.25rem, 5vw, 5rem);
            background: var(--color-bg);
            color: var(--color-text);
            font-weight: 300;
        }

        .privacyDeck,
        .privacyDeck * {
            box-sizing: border-box;
        }

        .privacyDeck .deckPanel {
            align-content: center;
            display: grid;
            min-height: 100dvh;
            overflow: visible;
            padding: var(--panelPad);
            position: relative;
            scroll-snap-align: start;
            scroll-snap-stop: always;
        }

        .privacyDeck .deck {
            height: 100dvh;
            overflow-y: scroll;
            scroll-behavior: smooth;
            scroll-snap-type: y mandatory;
        }

        .privacyDeck .contentPad {
            margin-inline: auto;
            width: min(1240px, 92vw);
        }

        .privacyDeck .gridSplit {
            align-items: center;
            display: grid;
            gap: clamp(2rem, 5vw, 5.5rem);
            grid-template-columns: 1.05fr .95fr;
        }

        .privacyDeck .gridSplitReverse {
            grid-template-columns: .9fr 1.1fr;
        }

        .privacyDeck .gridOffset {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(12, 1fr);
        }

        .privacyDeck .gridBand {
            display: grid;
            gap: 1.5rem;
            grid-auto-rows: minmax(220px, auto);
            grid-template-columns: repeat(3, 1fr);
        }

        .privacyDeck .panelTitle {
            font-size: clamp(2.6rem, 6.5vw, 5.5rem);
            font-weight: 700;
            letter-spacing: -.045em;
            line-height: .95;
            margin: 0 0 .45em;
        }

        .privacyDeck .subLine {
            color: var(--color-muted);
            font-size: clamp(1.1rem, 1.8vw, 1.35rem);
            line-height: 1.35;
            margin: 0;
            max-width: 38rem;
        }

        .privacyDeck .counter {
            font-size: .8rem;
            font-weight: 600;
            letter-spacing: .25em;
            position: absolute;
            right: 5vw;
            text-transform: uppercase;
            top: 4vh;
        }

        .privacyDeck .heroPanel {
            background: var(--color-bg);
            color: var(--color-text);
        }

        .privacyDeck .heroPanel .heroCopy {
            position: relative;
            z-index: 2;
        }

        .privacyDeck .heroPanel .heroImage {
            border-radius: 16px 0 0 16px;
            height: min(72vh, 720px);
            object-fit: cover;
            width: 100%;
        }

        .privacyDeck .heroPanel .imageWrap {
            margin-right: -5vw;
            position: relative;
        }

        .privacyDeck .heroPanel .imageWrap::after {
            background: linear-gradient(135deg, transparent 40%, rgba(220, 53, 243, .24));
            border-radius: 16px 0 0 16px;
            content: "";
            inset: 0;
            pointer-events: none;
            position: absolute;
        }

        .privacyDeck .eyebrow {
            color: var(--color-primary);
            font-size: .82rem;
            font-weight: 600;
            letter-spacing: .16em;
            margin-bottom: 1rem;
            text-transform: uppercase;
        }

        .privacyDeck .buttonRow {
            display: flex;
            flex-wrap: wrap;
            gap: .8rem;
            margin-top: 2rem;
        }

        .privacyDeck .outlineButton {
            border: 2px solid var(--color-primary);
            border-radius: 999px;
            color: var(--color-primary);
            display: inline-flex;
            font-size: 1rem;
            font-weight: 600;
            gap: .55rem;
            padding: .7rem 1.2rem;
            text-decoration: none;
            transition: background .2s, color .2s, transform .2s;
        }

        .privacyDeck .outlineButton:hover {
            background: var(--color-primary);
            color: var(--color-on-primary);
            transform: translateY(-3px);
        }

        .privacyDeck .launchPanel {
            background: var(--color-primary);
            color: var(--color-on-primary);
            isolation: isolate;
        }

        .privacyDeck .launchPanel::before {
            background: rgba(0, 0, 0, .55);
            content: "";
            inset: 0;
            position: absolute;
            z-index: -1;
        }

        .privacyDeck .launchPhoto {
            height: 100%;
            inset: 0;
            object-fit: cover;
            position: absolute;
            width: 100%;
            z-index: -2;
        }

        .privacyDeck .launchText {
            grid-column: 7 / 13;
            max-width: 620px;
            padding: clamp(1.5rem, 4vw, 4rem);
        }

        .privacyDeck .launchPanel .subLine,
        .privacyDeck .launchPanel .eyebrow {
            color: var(--color-on-primary);
        }

        .privacyDeck .legalLead {
            font-size: 1.2rem;
            line-height: 1.55;
            margin: 1.4rem 0 0;
            max-width: 62ch;
        }

        .privacyDeck .servicesPanel {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .privacyDeck .serviceCard,
        .privacyDeck .planCard,
        .privacyDeck .choiceCard {
            background: linear-gradient(145deg, var(--color-bg), var(--color-surface));
            border: 1px solid var(--color-border);
            border-radius: 16px;
            color: var(--color-text);
            padding: 1.5rem;
            transition: box-shadow .25s, transform .25s;
        }

        .privacyDeck .serviceCard:hover,
        .privacyDeck .planCard:hover,
        .privacyDeck .choiceCard:hover {
            box-shadow: 0 22px 35px rgba(20, 16, 21, .12);
            transform: translateY(-12px);
        }

        .privacyDeck .iconFrame {
            border-bottom: 3px solid var(--color-primary);
            color: var(--color-primary);
            display: inline-block;
            font-size: 1.8rem;
            margin-bottom: 1.2rem;
            padding-bottom: 6px;
        }

        .privacyDeck .cardTitle {
            font-size: 1.45rem;
            font-weight: 700;
            line-height: 1.05;
            margin: 0 0 .7rem;
        }

        .privacyDeck .cardText,
        .privacyDeck .cardList {
            color: var(--color-muted);
            font-size: 1.05rem;
            line-height: 1.45;
        }

        .privacyDeck .cardList {
            margin: 1rem 0 0;
            padding-left: 1.15rem;
        }

        .privacyDeck .cardList li {
            margin-bottom: .45rem;
        }

        .privacyDeck .aboutPanel {
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

        .privacyDeck .aboutPanel .subLine,
        .privacyDeck .aboutPanel .aboutText {
            color: var(--color-on-secondary);
        }

        .privacyDeck .aboutImage {
            border-radius: 16px;
            min-height: 520px;
            object-fit: cover;
            width: 100%;
        }

        .privacyDeck .aboutText {
            font-size: clamp(1.15rem, 1.8vw, 1.35rem);
            line-height: 1.55;
            max-width: 65ch;
        }

        .privacyDeck .proofPanel {
            background: var(--color-accent);
            color: var(--color-on-accent);
        }

        .privacyDeck .proofPanel .subLine {
            color: var(--color-on-accent);
        }

        .privacyDeck .quote {
            font-size: clamp(1.8rem, 4vw, 3.2rem);
            font-weight: 500;
            letter-spacing: -.025em;
            line-height: 1.08;
            margin: 0 auto;
            max-width: 960px;
            text-align: center;
        }

        .privacyDeck .quoteMark {
            color: var(--color-on-accent);
            display: block;
            font-size: 3rem;
            line-height: .7;
            margin-bottom: 1rem;
        }

        .privacyDeck .statStrip {
            border-top: 1px solid rgba(0, 0, 0, .35);
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(3, 1fr);
            margin-top: 3.5rem;
            padding-top: 1.5rem;
        }

        .privacyDeck .stat {
            font-size: 1.05rem;
        }

        .privacyDeck .stat strong {
            display: block;
            font-size: 1.7rem;
            font-weight: 700;
            margin-bottom: .2rem;
        }

        .privacyDeck .plansPanel {
            background-color: var(--color-bg);
            background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
            background-size: 22px 22px;
            color: var(--color-text);
        }

        .privacyDeck .planCard {
            min-height: 280px;
        }

        .privacyDeck .planCard .cardTitle {
            color: var(--color-primary);
        }

        .privacyDeck .contactPanel {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .privacyDeck .contactRows {
            display: grid;
            gap: .8rem;
            margin-top: 1.5rem;
        }

        .privacyDeck .contactRow {
            align-items: flex-start;
            border-bottom: 1px solid var(--color-border);
            display: flex;
            gap: .85rem;
            padding: .8rem 0;
        }

        .privacyDeck .contactRow i {
            color: var(--color-primary);
            font-size: 1.3rem;
        }

        .privacyDeck .contactRow a {
            color: var(--color-text);
            overflow-wrap: anywhere;
        }

        .privacyDeck .inquiryForm {
            background: linear-gradient(145deg, var(--color-bg), var(--color-surface));
            border: 1px solid var(--color-border);
            border-radius: 16px;
            display: grid;
            gap: .8rem;
            padding: 1.4rem;
        }

        .privacyDeck .inquiryForm label {
            font-weight: 600;
        }

        .privacyDeck .inquiryForm input,
        .privacyDeck .inquiryForm textarea {
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            color: var(--color-text);
            font: inherit;
            padding: .7rem .8rem;
            width: 100%;
        }

        .privacyDeck .inquiryForm textarea {
            min-height: 100px;
            resize: vertical;
        }

        .privacyDeck .submitButton {
            background: transparent;
            border: 2px solid var(--color-primary);
            border-radius: 999px;
            color: var(--color-primary);
            cursor: pointer;
            font: inherit;
            font-weight: 600;
            justify-self: start;
            padding: .65rem 1.15rem;
        }

        .privacyDeck .addressCard {
            background: var(--color-primary);
            border-radius: 16px;
            color: var(--color-on-primary);
            padding: clamp(1.5rem, 4vw, 3rem);
        }

        .privacyDeck .addressCard .iconFrame {
            border-color: var(--color-on-primary);
            color: var(--color-on-primary);
        }

        .privacyDeck .addressCard p {
            font-size: 1.25rem;
            line-height: 1.45;
            margin: 1rem 0 0;
        }

        .privacyDeck .footbar {
            border-top: 1px solid var(--color-border);
            color: var(--color-muted);
            font-size: .95rem;
            margin-top: 4rem;
            padding-top: 1rem;
        }

        @media (max-width: 820px) {
            .privacyDeck .deck {
                scroll-snap-type: y proximity;
            }

            .privacyDeck .deckPanel {
                min-height: 100dvh;
                padding-block: 14vh 10vh;
            }

            .privacyDeck .gridSplit,
            .privacyDeck .gridBand,
            .privacyDeck .gridOffset,
            .privacyDeck .statStrip {
                grid-template-columns: 1fr;
            }

            .privacyDeck .launchText {
                grid-column: auto;
            }

            .privacyDeck .heroPanel .imageWrap {
                margin-right: 0;
            }

            .privacyDeck .heroPanel .heroImage {
                border-radius: 16px;
                height: 360px;
            }

            .privacyDeck .aboutImage {
                min-height: 340px;
            }

            .privacyDeck .statStrip {
                gap: 1.2rem;
            }
        }

/* --- from services.html --- */
.servicesDeck {
            --panelGap: clamp(1.25rem, 3vw, 3rem);
            background: var(--color-bg);
            color: var(--color-text);
            font-weight: 300;
            min-height: 100dvh;
            overflow-y: scroll;
            scroll-behavior: smooth;
            scroll-snap-type: y mandatory;
        }

        .servicesDeck *,
        .servicesDeck *::before,
        .servicesDeck *::after {
            box-sizing: border-box;
        }

        .panel {
            align-content: center;
            display: grid;
            min-height: 100dvh;
            overflow: visible;
            padding: clamp(4rem, 9vh, 7.5rem) 0;
            position: relative;
            scroll-snap-align: start;
            scroll-snap-stop: always;
        }

        .pad {
            margin-inline: auto;
            padding-inline: clamp(1.25rem, 4vw, 5rem);
            width: min(1240px, 100%);
        }

        .gridSplit {
            align-items: center;
            display: grid;
            gap: clamp(2rem, 5vw, 5.5rem);
            grid-template-columns: 1.05fr .95fr;
        }

        .gridSplitReverse {
            align-items: center;
            display: grid;
            gap: clamp(2rem, 5vw, 5.5rem);
            grid-template-columns: .9fr 1.1fr;
        }

        .gridBand {
            display: grid;
            gap: var(--panelGap);
            grid-auto-rows: minmax(220px, auto);
            grid-template-columns: repeat(3, 1fr);
        }

        .gridOffset {
            display: grid;
            gap: var(--panelGap);
            grid-template-columns: repeat(12, 1fr);
        }

        .panelTitle {
            font-size: clamp(2.6rem, 6.5vw, 5.5rem);
            font-weight: 700;
            letter-spacing: -.045em;
            line-height: .95;
            margin: 0 0 1rem;
        }

        .subline {
            color: var(--color-muted);
            font-size: clamp(1.1rem, 1.8vw, 1.35rem);
            line-height: 1.35;
            margin: 0;
            max-width:  fortyem;
        }

        .eyebrow {
            color: var(--color-primary);
            font-size: .8rem;
            font-weight: 600;
            letter-spacing: .18em;
            margin-bottom: 1rem;
            text-transform: uppercase;
        }

        .heroPanel {
            background: var(--color-bg);
        }

        .heroCopy {
            position: relative;
            z-index: 2;
        }

        .heroCopy .panelTitle {
            max-width: 8ch;
        }

        .heroActions {
            display: flex;
            flex-wrap: wrap;
            gap: .85rem;
            margin-top: 2rem;
        }

        .outlineButton,
        .solidButton {
            align-items: center;
            border: 2px solid var(--color-primary);
            border-radius: 999px;
            display: inline-flex;
            font-size: 1rem;
            font-weight: 600;
            gap: .55rem;
            justify-content: center;
            padding: .7rem 1.2rem;
            text-decoration: none;
            transition: background .2s ease, color .2s ease, transform .2s ease;
        }

        .outlineButton {
            background: transparent;
            color: var(--color-primary);
        }

        .outlineButton:hover {
            background: var(--color-primary);
            color: var(--color-on-primary);
            transform: translateY(-4px);
        }

        .solidButton {
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .solidButton:hover {
            transform: translateY(-4px);
        }

        .heroVisual {
            align-self: stretch;
            min-height: 34rem;
            position: relative;
        }

        .heroVisual img {
            border-radius: 16px 0 0 16px;
            height: 100%;
            object-fit: cover;
            width: calc(100% + 8vw);
        }

        .counter {
            color: var(--color-muted);
            font-size: .78rem;
            letter-spacing: .2em;
            position: absolute;
            right: 5vw;
            top: 3vh;
        }

        .launchPanel {
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

        .launchPanel::before {
            background: linear-gradient(90deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .18));
            content: "";
            inset: 0;
            position: absolute;
        }

        .launchPanel .pad {
            position: relative;
            z-index: 1;
        }

        .launchPanel .gridOffset {
            background: rgba(20, 16, 21, .72);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 16px;
            color: #fff;
            grid-column: 7 / 13;
            padding: clamp(1.5rem, 4vw, 3.5rem);
        }

        .launchPanel .subline,
        .launchPanel .smallText {
            color: rgba(255, 255, 255, .84);
        }

        .launchPanel .panelTitle {
            max-width: 8ch;
        }

        .repairSteps {
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(4, 1fr);
            margin-top: 2rem;
        }

        .stepItem {
            border-top: 1px solid rgba(255, 255, 255, .45);
            padding-top: 1rem;
        }

        .iconMark {
            border-bottom: 3px solid var(--color-primary);
            color: var(--color-primary);
            display: inline-block;
            font-size: 1.6rem;
            margin-bottom: .8rem;
            padding-bottom: 6px;
        }

        .stepItem strong {
            display: block;
            font-size: 1.12rem;
            margin-bottom: .3rem;
        }

        .smallText {
            font-size: .98rem;
            line-height: 1.4;
        }

        .servicesPanel {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .servicesIntro {
            grid-column: 1 / -1;
        }

        .serviceCard,
        .planCard,
        .contactCard {
            background: linear-gradient(145deg, var(--color-bg), var(--color-surface));
            border: 1px solid var(--color-border);
            border-radius: 16px;
            color: var(--color-text);
            padding: clamp(1.25rem, 2.3vw, 2rem);
            transition: box-shadow .25s ease, transform .25s ease;
        }

        .serviceCard:hover,
        .planCard:hover,
        .contactCard:hover {
            box-shadow: 0 20px 36px rgba(20, 16, 21, .14);
            transform: translateY(-12px);
        }

        .serviceCard h3,
        .planCard h3 {
            font-size: 1.45rem;
            font-weight: 700;
            margin: 0 0 .45rem;
        }

        .serviceCard p,
        .planCard p {
            color: var(--color-muted);
            line-height: 1.45;
            margin: 0 0 1rem;
        }

        .serviceCard ul,
        .planCard ul {
            color: var(--color-muted);
            line-height: 1.55;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .serviceCard li,
        .planCard li {
            margin-top: .45rem;
            padding-left: 1.35rem;
            position: relative;
        }

        .serviceCard li::before,
        .planCard li::before {
            color: var(--color-primary);
            content: "\eb7b";
            font-family: "remixicon";
            left: 0;
            position: absolute;
        }

        .aboutPanel {
            background: var(--color-accent);
            color: var(--color-on-accent);
        }

        .aboutImage {
            min-height: 34rem;
        }

        .aboutImage img {
            border-radius: 16px;
            height: 100%;
            min-height: 34rem;
            object-fit: cover;
            width: 100%;
        }

        .aboutCopy {
            background: rgba(255, 255, 255, .18);
            border: 1px solid rgba(0, 0, 0, .15);
            border-radius: 16px;
            max-width: 65ch;
            padding: clamp(1.5rem, 4vw, 3.5rem);
        }

        .aboutCopy p {
            font-size: clamp(1.25rem, 2.2vw, 1.7rem);
            line-height: 1.35;
            margin: 0;
        }

        .proofPanel {
            background: var(--color-bg);
            color: var(--color-text);
        }

        .proofContent {
            margin-inline: auto;
            max-width: 1040px;
            text-align: center;
        }

        .quote {
            font-size: clamp(1.8rem, 4vw, 3.2rem);
            font-weight: 500;
            letter-spacing: -.025em;
            line-height: 1.08;
            margin: 0 auto 1rem;
        }

        .quoteMark {
            color: var(--color-primary);
            display: block;
            font-size: 3.5rem;
            line-height: .8;
        }

        .quoteAttribution {
            color: var(--color-muted);
            font-size: 1rem;
        }

        .proofStrip {
            border-top: 1px solid var(--color-border);
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(3, 1fr);
            margin-top: 3rem;
            padding-top: 1.5rem;
        }

        .proofStat {
            border-right: 1px solid var(--color-border);
            padding: .5rem 1rem;
        }

        .proofStat:last-child {
            border-right: 0;
        }

        .proofStat strong {
            display: block;
            font-size: 2rem;
            font-weight: 700;
        }

        .proofStat span {
            color: var(--color-muted);
            display: block;
        }

        .plansPanel {
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .plansPanel .subline {
            color: var(--color-on-primary);
            opacity: .78;
        }

        .plansPanel .gridBand {
            align-items: stretch;
            margin-top: 2rem;
        }

        .planCard {
            background: linear-gradient(145deg, var(--color-surface), var(--color-bg));
            display: flex;
            flex-direction: column;
        }

        .planCard.featured {
            border: 3px solid var(--color-accent);
        }

        .planLabel {
            color: var(--color-primary);
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .12em;
            margin-bottom: .7rem;
            text-transform: uppercase;
        }

        .planCard ul {
            margin-top: auto;
            padding-top: 1rem;
        }

        .contactPanel {
            background: repeating-linear-gradient(135deg, var(--color-surface), var(--color-surface) 12px, var(--color-bg) 12px, var(--color-bg) 24px);
            color: var(--color-text);
        }

        .contactPanel .gridSplit {
            align-items: start;
        }

        .contactForm {
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: 16px;
            display: grid;
            gap: 1rem;
            padding: clamp(1.25rem, 3vw, 2rem);
        }

        .fieldGroup {
            display: grid;
            gap: .35rem;
        }

        .fieldGroup label {
            font-size: .95rem;
            font-weight: 600;
        }

        .fieldGroup input,
        .fieldGroup textarea,
        .fieldGroup select {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            color: var(--color-text);
            font: inherit;
            padding: .75rem .85rem;
            width: 100%;
        }

        .fieldGroup textarea {
            min-height: 7rem;
            resize: vertical;
        }

        .contactDetails {
            background: var(--color-secondary);
            border-radius: 16px;
            color: var(--color-on-secondary);
            padding: clamp(1.5rem, 4vw, 3rem);
        }

        .contactDetails h3 {
            font-size: 1.8rem;
            font-weight: 700;
            margin: 0 0 1.4rem;
        }

        .contactRow {
            align-items: flex-start;
            border-top: 1px solid rgba(0, 0, 0, .22);
            display: flex;
            gap: .8rem;
            padding: 1rem 0;
        }

        .contactRow i {
            font-size: 1.35rem;
        }

        .contactRow a {
            color: inherit;
        }

        .footbar {
            border-top: 1px solid var(--color-border);
            color: var(--color-muted);
            font-size: .9rem;
            margin: 4rem auto 0;
            padding: 1rem clamp(1.25rem, 4vw, 5rem);
            width: min(1240px, 100%);
        }

        @media (max-width: 820px) {
            .servicesDeck {
                scroll-snap-type: y proximity;
            }

            .panel {
                min-height: 100dvh;
                padding-block: 14vh 10vh;
            }

            .gridSplit,
            .gridSplitReverse,
            .gridBand,
            .gridOffset,
            .repairSteps,
            .proofStrip {
                grid-template-columns: 1fr;
            }

            .launchPanel .gridOffset {
                grid-column: 1;
            }

            .heroVisual {
                min-height: 22rem;
            }

            .heroVisual img {
                border-radius: 16px;
                width: 100%;
            }

            .aboutImage,
            .aboutImage img {
                min-height: 22rem;
            }

            .proofStat {
                border-bottom: 1px solid var(--color-border);
                border-right: 0;
                padding-bottom: 1rem;
            }

            .proofStat:last-child {
                border-bottom: 0;
            }
        }

/* --- from terms-and-conditions.html --- */
.legalDeck {
            --panelPadding: clamp(24px, 5vw, 72px);
            background: var(--color-bg);
            color: var(--color-text);
            min-height: 100dvh;
        }

        .legalDeck * {
            box-sizing: border-box;
        }

        .panel {
            align-content: center;
            display: grid;
            min-height: 100dvh;
            overflow: visible;
            padding: var(--panelPadding) 0;
            position: relative;
            scroll-snap-align: start;
            scroll-snap-stop: always;
        }

        .legalDeck {
            height: 100dvh;
            overflow-y: scroll;
            scroll-behavior: smooth;
            scroll-snap-type: y mandatory;
        }

        .pad {
            margin-inline: auto;
            width: min(1240px, 92vw);
        }

        .gridSplit {
            align-items: center;
            display: grid;
            gap: clamp(32px, 5vw, 76px);
            grid-template-columns: 1.05fr .95fr;
        }

        .gridReverse {
            grid-template-columns: .9fr 1.1fr;
        }

        .gridOffset {
            display: grid;
            gap: 24px;
            grid-template-columns: repeat(12, 1fr);
        }

        .gridBand {
            display: grid;
            gap: 24px;
            grid-auto-rows: minmax(220px, auto);
            grid-template-columns: repeat(3, 1fr);
        }

        .heroPanel {
            background: var(--color-bg);
        }

        .launchPanel {
            background: #160618;
            color: #E7E3E8;
        }

        .servicesPanel {
            background: var(--color-surface);
            color: var(--color-text);
        }

        .aboutPanel {
            background: var(--color-accent);
            color: var(--color-on-accent);
        }

        .proofPanel {
            background: var(--color-primary);
            color: var(--color-on-primary);
        }

        .plansPanel {
            background-color: var(--color-bg);
            background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
            background-size: 22px 22px;
            color: var(--color-text);
        }

        .contactPanel {
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

        .counter {
            font-size: .78rem;
            letter-spacing: .24em;
            position: absolute;
            right: 5vw;
            text-transform: uppercase;
            top: 4vh;
        }

        .eyebrow {
            color: var(--color-primary);
            font-size: .85rem;
            font-weight: 600;
            letter-spacing: .16em;
            margin-bottom: 1rem;
            text-transform: uppercase;
        }

        .panelTitle {
            font-size: clamp(2.6rem, 6.5vw, 5.5rem);
            font-weight: 700;
            letter-spacing: -.045em;
            line-height: .94;
            margin: 0 0 1rem;
        }

        .panelLead {
            color: var(--color-muted);
            font-size: clamp(1.1rem, 1.8vw, 1.35rem);
            font-weight: 300;
            line-height: 1.45;
            max-width:  thirtyrem;
        }

        .launchPanel .panelLead,
        .launchPanel .eyebrow {
            color: #BBABBD;
        }

        .aboutPanel .panelLead,
        .proofPanel .panelLead,
        .contactPanel .panelLead {
            color: var(--color-on-accent);
        }

        .heroActions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 2rem;
        }

        .outlineButton {
            border: 1px solid currentColor;
            border-radius: 999px;
            color: var(--color-text);
            display: inline-flex;
            font-size: .98rem;
            font-weight: 600;
            gap: 9px;
            padding: .72rem 1.15rem;
            text-decoration: none;
            transition: background .2s, color .2s, transform .2s;
        }

        .outlineButton:hover {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: var(--color-on-primary);
            transform: translateY(-4px);
        }

        .heroImage {
            border-radius: 16px 0 0 16px;
            height: min(64vh, 620px);
            object-fit: cover;
            width: 100%;
        }

        .launchPanel::before {
            background: linear-gradient(90deg, rgba(22, 6, 24, .9), rgba(22, 6, 24, .58)), url("images/terms-and-conditions-workspace.jpeg") center / cover;
            content: "";
            inset: 0;
            position: absolute;
            z-index: 0;
        }

        .launchContent {
            grid-column: 7 / 13;
            position: relative;
            z-index: 1;
        }

        .legalCard,
        .planCard,
        .contactCard {
            background: linear-gradient(140deg, var(--color-surface), var(--color-bg));
            border: 1px solid var(--color-border);
            border-radius: 16px;
            color: var(--color-text);
            padding: clamp(1.25rem, 2.5vw, 2rem);
            transition: transform .25s, box-shadow .25s;
        }

        .legalCard:hover,
        .planCard:hover,
        .contactCard:hover {
            box-shadow: 0 20px 35px rgba(20, 16, 21, .14);
            transform: translateY(-12px);
        }

        .cardIcon {
            border-bottom: 3px solid var(--color-primary);
            color: var(--color-primary);
            display: inline-block;
            font-size: 1.55rem;
            margin-bottom: 1rem;
            padding-bottom: 6px;
        }

        .cardTitle {
            font-size: 1.45rem;
            font-weight: 700;
            margin-bottom: .55rem;
        }

        .cardText,
        .legalList {
            color: var(--color-muted);
            font-size: 1.05rem;
            font-weight: 300;
            line-height: 1.5;
        }

        .legalList {
            list-style: none;
            margin-top: 1rem;
        }

        .legalList li {
            border-top: 1px solid var(--color-border);
            padding: .65rem 0 .65rem 1.5rem;
            position: relative;
        }

        .legalList li::before {
            color: var(--color-primary);
            content: "•";
            left: .35rem;
            position: absolute;
        }

        .aboutImage {
            border-radius: 16px;
            height: 530px;
            object-fit: cover;
            width: 100%;
        }

        .aboutCopy {
            font-size: clamp(1.2rem, 2vw, 1.6rem);
            font-weight: 300;
            line-height: 1.48;
            max-width: 65ch;
        }

        .aboutCopy strong {
            font-weight: 700;
        }

        .quoteWrap {
            margin-inline: auto;
            max-width: 980px;
            text-align: center;
        }

        .giantQuote {
            font-size: clamp(1.8rem, 4vw, 3.2rem);
            font-weight: 600;
            letter-spacing: -.025em;
            line-height: 1.08;
            margin: 0;
        }

        .proofStrip {
            display: grid;
            gap: 1px;
            grid-template-columns: repeat(3, 1fr);
            margin-top: 4rem;
        }

        .proofStat {
            border-top: 1px solid currentColor;
            padding: 1rem;
        }

        .proofStat strong {
            display: block;
            font-size: 2.2rem;
            line-height: 1;
        }

        .proofStat span {
            display: block;
            font-size: .95rem;
            margin-top: .45rem;
        }

        .planCard {
            display: flex;
            flex-direction: column;
            min-height: 320px;
        }

        .planCard .outlineButton {
            align-self: flex-start;
            margin-top: auto;
        }

        .contactGrid {
            align-items: start;
        }

        .contactCard {
            background: var(--color-bg);
            margin-bottom: 1rem;
        }

        .contactRows {
            display: grid;
            gap: .8rem;
            margin-top: 1rem;
        }

        .contactRow {
            align-items: center;
            display: flex;
            gap: .75rem;
        }

        .contactRow i {
            color: var(--color-primary);
            font-size: 1.35rem;
        }

        .addressBlock {
            border-left: 1px solid currentColor;
            padding: 1rem 0 1rem 2rem;
        }

        .addressBlock address {
            font-size: 1.3rem;
            font-style: normal;
            line-height: 1.45;
        }

        .smallNote {
            font-size: .9rem;
            font-weight: 300;
            margin-top: 1rem;
        }

        .footbar {
            border-top: 1px solid currentColor;
            bottom: 0;
            font-size: .9rem;
            left: 4vw;
            padding: 1rem 0;
            position: absolute;
            right: 4vw;
        }

        @media (max-width: 820px) {
            .legalDeck {
                scroll-snap-type: y proximity;
            }

            .panel {
                min-height: 100dvh;
                padding-block: 14vh 10vh;
            }

            .gridBand,
            .gridOffset,
            .gridReverse,
            .gridSplit {
                grid-template-columns: 1fr;
            }

            .launchContent {
                grid-column: auto;
            }

            .heroImage {
                border-radius: 16px;
                height: 360px;
            }

            .aboutImage {
                height: 330px;
            }

            .proofStrip {
                grid-template-columns: 1fr;
                margin-top: 2.5rem;
            }

            .addressBlock {
                border-left: 0;
                border-top: 1px solid currentColor;
                padding: 1.5rem 0 0;
            }

            .footbar {
                position: relative;
            }
        }

/* --- from index.php --- */
.deck {
            background: var(--color-bg);
            color: var(--color-text);
            height: 100dvh;
            overflow-y: scroll;
            scroll-behavior: smooth;
            scroll-snap-type: y mandatory;
        }

        .panel {
            align-content: center;
            display: grid;
            min-height: 100dvh;
            overflow: visible;
            position: relative;
            scroll-snap-align: start;
            scroll-snap-stop: always;
        }

        .pad {
            margin-inline: auto;
            padding: clamp(64px, 9vh, 120px) 0;
            width: min(1240px, 92vw);
        }

        .gridSplit {
            align-items: center;
            display: grid;
            gap: clamp(32px, 4vw, 72px);
            grid-template-columns: 1.1fr .9fr;
        }

        .gridBand {
            display: grid;
            gap: 28px;
            grid-auto-rows: minmax(220px, auto);
            grid-template-columns: repeat(3, 1fr);
        }

        .gridOffset {
            display: grid;
            gap: 24px;
            grid-template-columns: repeat(12, 1fr);
        }

        .panelTitle {
            font-size: clamp(2.6rem, 6.5vw, 5.5rem);
            font-weight: 700;
            letter-spacing: -.045em;
            line-height: .95;
            margin: 0 0 .4em;
        }

        .panelLead {
            color: var(--color-muted);
            font-size: clamp(1.15rem, 1.8vw, 1.45rem);
            font-weight: 300;
            line-height: 1.35;
            max-width: 35rem;
        }

        .eyebrow {
            color: var(--color-primary);
            font-size: .82rem;
            font-weight: 700;
            letter-spacing: .18em;
            margin-bottom: 1rem;
            text-transform: uppercase;
        }

        .counter {
            color: var(--color-muted);
            font-size: .8rem;
            letter-spacing: .25em;
            position: absolute;
            right: 5vw;
            top: 4vh;
        }

        .buttonRow {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 2rem;
        }

        .outlineButton {
            border: 2px solid var(--color-primary);
            border-radius: 999px;
            color: var(--color-primary);
            display: inline-flex;
            font-size: 1rem;
            font-weight: 600;
            gap: .55rem;
            padding: .72rem 1.35rem;
            text-decoration: none;
            transition: background .2s, color .2s, transform .2s;
        }

        .outlineButton:hover {
            background: var(--color-primary);
            color: var(--color-on-primary);
            transform: translateY(-3px);
        }

        .solidButton {
            background: var(--color-primary);
            border: 2px solid var(--color-primary);
            border-radius: 999px;
            color: var(--color-on-primary);
            display: inline-flex;
            font-size: 1rem;
            font-weight: 600;
            gap: .55rem;
            padding: .72rem 1.35rem;
            text-decoration: none;
            transition: transform .2s, filter .2s;
        }

        .solidButton:hover {
            filter: brightness(1.08);
            transform: translateY(-3px);
        }

        .heroPanel {
            background: var(--color-bg);
        }

        .heroImage {
            min-height: 62vh;
            position: relative;
        }

        .heroImage img {
            border-radius: 16px 0 0 16px;
            height: 100%;
            object-fit: cover;
            position: absolute;
            right: calc((92vw - 100vw) / 2);
            width: min(46vw, 690px);
        }

        .heroImage:after {
            border: 1px solid var(--color-primary);
            border-radius: 16px;
            content: "";
            height: 88%;
            position: absolute;
            right: calc((92vw - 100vw) / 2 + 20px);
            top: 6%;
            width: min(43vw, 650px);
        }

        .launchPanel {
            background-image: linear-gradient(90deg, rgba(20, 16, 21, .88), rgba(20, 16, 21, .48)), url("images/index-launch-office.jpeg");
            background-position: center;
            background-size: cover;
            color: var(--color-text);
        }

        .launchPanel .panelLead {
            color: var(--color-text);
        }

        .launchContent {
            align-self: center;
            grid-column: 7 / 13;
            padding: clamp(1.5rem, 4vw, 4rem);
        }

        .launchContent .eyebrow {
            color: var(--color-accent);
        }

        .launchContent .outlineButton {
            border-color: var(--color-accent);
            color: var(--color-accent);
        }

        .launchContent .outlineButton:hover {
            background: var(--color-accent);
            color: var(--color-on-accent);
        }

        .servicePanel {
            background: var(--color-surface);
        }

        .serviceIntro {
            grid-column: 1 / -1;
        }

        .serviceCard,
        .planCard {
            background: linear-gradient(145deg, var(--color-bg), var(--color-surface));
            border: 1px solid var(--color-border);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            padding: 1.5rem;
            transition: transform .25s, box-shadow .25s;
        }

        .serviceCard:hover,
        .planCard:hover {
            box-shadow: 0 18px 32px rgba(20, 16, 21, .14);
            transform: translateY(-12px);
        }

        .iconMark {
            border-bottom: 3px solid var(--color-primary);
            color: var(--color-primary);
            display: inline-block;
            font-size: 1.65rem;
            margin-bottom: 1.2rem;
            padding-bottom: 6px;
            width: fit-content;
        }

        .cardTitle {
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.05;
            margin-bottom: .65rem;
        }

        .cardCopy {
            color: var(--color-muted);
            font-size: 1.05rem;
            font-weight: 300;
            line-height: 1.4;
        }

        .serviceCard ul,
        .planCard ul {
            color: var(--color-muted);
            font-size: 1rem;
            line-height: 1.45;
            list-style: none;
            margin-top: auto;
            padding-top: 1.2rem;
        }

        .serviceCard li,
        .planCard li {
            border-top: 1px solid var(--color-border);
            padding: .5rem 0;
        }

        .serviceCard li:before,
        .planCard li:before {
            color: var(--color-primary);
            content: "✓";
            font-weight: 700;
            margin-right: .5rem;
        }

        .aboutPanel {
            background: var(--color-bg);
        }

        .aboutImage img {
            border-radius: 16px;
            display: block;
            height: min(62vh, 650px);
            object-fit: cover;
            width: 100%;
        }

        .aboutCopy {
            border-left: 4px solid var(--color-secondary);
            max-width: 65ch;
            padding: 1rem 0 1rem clamp(1.3rem, 3vw, 3rem);
        }

        .aboutCopy p {
            color: var(--color-muted);
            font-size: clamp(1.2rem, 2vw, 1.55rem);
            font-weight: 300;
            line-height: 1.48;
        }

        .proofPanel {
            background: var(--color-secondary);
            color: var(--color-on-secondary);
        }

        .proofPanel .counter {
            color: var(--color-on-secondary);
        }

        .quoteBlock {
            margin: 0 auto;
            max-width: 920px;
            text-align: center;
        }

        .quoteBlock .iconMark {
            border-color: var(--color-on-secondary);
            color: var(--color-on-secondary);
        }

        .quoteText {
            font-size: clamp(1.8rem, 4vw, 3.2rem);
            font-weight: 600;
            letter-spacing: -.025em;
            line-height: 1.08;
        }

        .quoteByline {
            font-size: 1.05rem;
            margin-top: 1.2rem;
        }

        .trustStrip {
            border-top: 1px solid rgba(0, 0, 0, .3);
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(3, 1fr);
            margin-top: 3rem;
            padding-top: 1.5rem;
            text-align: center;
        }

        .trustStrip strong {
            display: block;
            font-size: 2rem;
            line-height: 1;
        }

        .trustStrip span {
            display: block;
            font-size: .95rem;
            margin-top: .4rem;
        }

        .plansPanel {
            background: var(--color-surface);
        }

        .planCard {
            min-height: 300px;
        }

        .planCard.featured {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: var(--color-on-primary);
        }

        .planCard.featured .cardCopy,
        .planCard.featured li {
            color: var(--color-on-primary);
        }

        .planCard.featured li {
            border-color: rgba(0, 0, 0, .25);
        }

        .planCard.featured li:before {
            color: var(--color-on-primary);
        }

        .price {
            font-size: 1.15rem;
            font-weight: 600;
            margin-top: .8rem;
        }

        .contactPanel {
            background: var(--color-accent);
            color: var(--color-on-accent);
            display: flex;
            flex-direction: column;
        }

        .contactPanel .pad {
            flex: 1;
            width: min(1240px, 92vw);
        }

        .contactPanel .panelLead,
        .contactPanel label,
        .contactPanel address {
            color: var(--color-on-accent);
        }

        .contactForm {
            display: grid;
            gap: 1rem;
            grid-template-columns: 1fr 1fr;
            margin-top: 1.5rem;
            max-width: 600px;
        }

        .contactForm label {
            display: grid;
            font-size: .95rem;
            font-weight: 600;
            gap: .35rem;
        }

        .contactForm label:last-of-type {
            grid-column: 1 / -1;
        }

        .contactForm input,
        .contactForm textarea {
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            color: var(--color-text);
            font: inherit;
            padding: .75rem .85rem;
            width: 100%;
        }

        .contactForm textarea {
            min-height: 100px;
            resize: vertical;
        }

        .contactForm .solidButton {
            background: var(--color-on-accent);
            border-color: var(--color-on-accent);
            color: var(--color-accent);
            cursor: pointer;
            justify-self: start;
        }

        .contactDetails {
            background: rgba(254, 247, 255, .2);
            border: 1px solid rgba(0, 0, 0, .24);
            border-radius: 16px;
            padding: 1.5rem;
        }

        .contactDetails .iconMark {
            border-color: var(--color-on-accent);
            color: var(--color-on-accent);
        }

        .contactDetails address {
            font-size: 1.2rem;
            font-style: normal;
            line-height: 1.5;
        }

        .contactDetails a {
            color: var(--color-on-accent);
            display: block;
            font-size: 1.15rem;
            margin-top: 1rem;
        }

        .footbar {
            border-top: 1px solid rgba(0, 0, 0, .3);
            font-size: .9rem;
            margin-top: auto;
            padding: 1rem 4vw;
            text-align: center;
        }

        @media (max-width: 820px) {
            .deck {
                scroll-snap-type: y proximity;
            }

            .panel {
                min-height: 100dvh;
                padding-block: 14vh 10vh;
            }

            .pad {
                padding: 32px 0;
            }

            .gridSplit,
            .gridBand,
            .gridOffset {
                grid-template-columns: 1fr;
            }

            .heroImage {
                min-height: 42vh;
            }

            .heroImage img {
                border-radius: 16px;
                height: 100%;
                position: relative;
                right: auto;
                width: 100%;
            }

            .heroImage:after {
                display: none;
            }

            .launchContent {
                grid-column: auto;
            }

            .serviceIntro {
                grid-column: auto;
            }

            .trustStrip {
                grid-template-columns: 1fr;
            }

            .contactForm {
                grid-template-columns: 1fr;
            }

            .contactForm label:last-of-type {
                grid-column: auto;
            }

            .counter {
                top: 2vh;
            }
        }