:root {

    --paper: #EEF3F4;

    --paper-deep: #DCE5E8;

    --ink: #142329;

    --ink-soft: #4B5D64;

    --muted: #829198;

    --line: #D1DDE0;

    --panel: #FAFCFC;

    --panel-strong: #FFFFFF;

    --accent: #167C8C;

    --accent-soft: #D8EEF1;

    --teal: #3D6F82;

    --teal-soft: #DDEAF0;

    --blue: #5965A8;

    --yellow: #D58A3A;

    --shadow: 10px 12px 0 rgba(20, 35, 41, .08);

    --shadow-small: 5px 6px 0 rgba(20, 35, 41, .08);

    --font-display: 'Fraunces', Georgia, serif;

    --font-sans: 'DM Sans', Arial, sans-serif;

}

[data-theme=dark] {

    --paper: #0B1418;

    --paper-deep: #111E23;

    --ink: #EEF5F6;

    --ink-soft: #B6C6CA;

    --muted: #7E9298;

    --line: #293B41;

    --panel: #132127;

    --panel-strong: #1A2B32;

    --accent: #43C0CF;

    --accent-soft: #15363D;

    --teal: #78AFC1;

    --teal-soft: #193139;

    --blue: #969FE0;

    --yellow: #E6A65B;

    --shadow: 10px 12px 0 rgba(0, 0, 0, .38);

    --shadow-small: 5px 6px 0 rgba(0, 0, 0, .38);

}

* { box-sizing: border-box }

html { scroll-behavior: smooth; scroll-padding-top: 100px }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.65;
    overflow-x: hidden;
    cursor: none;
    transition: background .45s ease, color .45s ease
}

a { color: inherit; text-decoration: none }

button, input, select, textarea { font: inherit }
button { cursor: none }

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

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -.035em }
h1, h2, h3, h4, h5, h6, p { margin-top: 0 }

.display-serif { font-family: var(--font-display) }

.eyebrow {
    display: inline-flex; align-items: center; gap: 9px; color: var(--teal);
    font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor }

.section-title { font-size: clamp(2.35rem, 5.5vw, 5.5rem); line-height: .98; margin: 16px 0 20px }
.section-lead { color: var(--ink-soft); font-size: 1.05rem; max-width: 620px }
.container-wide { max-width: 1240px }
.serif-accent { color: var(--accent) }

.paper-grain, .paper-grain::before { position: fixed; inset: 0; pointer-events: none; z-index: -3 }
.paper-grain {
    opacity: .24;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
    mix-blend-mode: multiply
}
[data-theme=dark] .paper-grain { mix-blend-mode: screen; opacity: .08 }

.rule-field {
    position: fixed; inset: 0; z-index: -4; opacity: .35;
    background: repeating-linear-gradient(0deg, transparent 0 88px, var(--line) 89px, transparent 90px);
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    pointer-events: none
}

#preloader {
    position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
    background: var(--paper); transition: opacity .6s ease, visibility .6s ease
}
#preloader.is-hidden { opacity: 0; visibility: hidden }

.preloader-mark { position: relative; width: 90px; height: 90px; display: grid; place-items: center }
.preloader-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: compassSpin 4s linear infinite }
.preloader-center { font-family: var(--font-display); font-size: 1.7rem; color: var(--accent) }
.preloader-line { width: 150px; height: 2px; background: var(--line); margin-top: 18px; overflow: hidden }
.preloader-line::after {
    content: ''; display: block; width: 55%; height: 100%; background: var(--accent);
    animation: loadSweep 1.1s ease infinite
}

@keyframes compassSpin { to { transform: rotate(360deg) } }
@keyframes loadSweep { from { transform: translateX(-100%) } to { transform: translateX(280%) } }

#scrollProgress { position: fixed; top: 0; left: 0; z-index: 9998; height: 4px; width: 0; background: var(--accent) }

.cursor-dot, .cursor-orbit {
    position: fixed; pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%); border-radius: 50%
}
.cursor-dot { width: 7px; height: 7px; background: var(--accent) }
.cursor-orbit {
    width: 35px; height: 35px; border: 1px solid var(--ink); opacity: .55;
    transition: width .25s, height .25s, border-color .25s, background .25s
}
.cursor-orbit.is-active {
    width: 62px; height: 62px; border-color: var(--accent);
    background: var(--accent-soft); opacity: .8
}

.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: .35s ease
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 8px 20px rgba(0, 0, 0, .06) }

.masthead { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 25px }
.wordmark {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-size: 1.55rem; font-weight: 700
}
.wordmark-symbol {
    width: 27px; height: 27px; border: 2px solid var(--accent);
    display: grid; place-items: center; color: var(--accent); transform: rotate(45deg)
}
.wordmark-symbol i { transform: rotate(-45deg); font-size: .75rem }

.nav-links { display: flex; align-items: center; gap: 24px }
.nav-links a {
    position: relative; color: var(--ink-soft); font-size: .84rem;
    font-weight: 600; transition: color .25s
}
.nav-links a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: -9px;
    height: 2px; background: var(--accent); transition: right .25s
}
.nav-links a:hover, .nav-links a.is-active { color: var(--ink) }
.nav-links a.is-active::after, .nav-links a:hover::after { right: 0 }

.header-tools { display: flex; align-items: center; gap: 9px }
.theme-switch {
    display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line);
    background: transparent; color: var(--ink); padding: 8px 11px;
    border-radius: 8px; font-size: .76rem; font-weight: 700; transition: .25s
}
.theme-switch:hover { border-color: var(--accent); color: var(--accent) }

.header-cta {
    padding: 10px 17px; background: var(--ink); color: var(--paper);
    font-size: .8rem; font-weight: 700; border: 1px solid var(--ink);
    border-radius: 8px; transition: .25s
}
.header-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff }

.mobile-toggle {
    display: none; border: 1px solid var(--line); color: var(--ink);
    background: transparent; padding: 7px 10px; border-radius: 8px
}
.mobile-panel { display: none; padding: 8px 0 18px; border-top: 1px solid var(--line) }

.btn-ink, .btn-outline, .btn-small {
    border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    gap: 9px; font-weight: 700; transition: transform .25s, background .25s, color .25s, border-color .25s, box-shadow .25s
}
.btn-ink { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 14px 21px }
.btn-ink:hover {
    background: var(--accent); border-color: var(--accent); color: #fff;
    transform: translateY(-3px); box-shadow: var(--shadow-small)
}
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 13px 20px }
.btn-outline:hover { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateY(-3px) }
.btn-small {
    padding: 9px 14px; font-size: .78rem; border: 1px solid var(--line);
    background: var(--panel); color: var(--ink)
}
.btn-small:hover { border-color: var(--accent); color: var(--accent) }

.hero {
    min-height: 100vh; padding: 150px 0 100px; display: flex;
    align-items: center; position: relative; overflow: hidden
}
.hero::after {
    content: 'M/H'; position: absolute; right: -20px; bottom: 2%;
    font-family: var(--font-display); font-size: 20vw; color: var(--line);
    opacity: .22; line-height: .7; pointer-events: none
}
.hero-copy { position: relative; z-index: 1 }
.hero-kicker {
    color: var(--accent); font-size: .8rem; font-weight: 700;
    letter-spacing: .17em; text-transform: uppercase; display: flex; align-items: center; gap: 10px
}
.hero-kicker span { width: 36px; height: 1px; background: var(--accent) }
.hero h1 { font-size: clamp(3.8rem, 5.3vw, 5.4rem); line-height: .88; max-width: 760px; margin: 22px 0 28px }
.hero h1 em { font-style: normal; color: var(--accent) }
.hero-summary { max-width: 530px; color: var(--ink-soft); font-size: 1.08rem; margin-bottom: 32px }
.hero-footnote { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; margin-top: 27px }
.hero-footnote i { color: var(--teal); font-size: 1.2rem }

.hero-orbit-stage { position: relative; min-height: 570px; display: grid; place-items: center }
.orbit-paper {
    width: min(100%, 580px); aspect-ratio: 1; position: relative;
    border: 1px solid var(--line); border-radius: 50%; padding: 14%;
    transform: rotate(-7deg); background: color-mix(in srgb, var(--panel) 78%, transparent);
    box-shadow: var(--shadow)
}
.orbit-paper::before, .orbit-paper::after {
    content: ''; position: absolute; border: 1px solid var(--line); border-radius: 50%; inset: 13%
}
.orbit-paper::after { inset: 28%; border-color: var(--accent); opacity: .55 }

.orbit-svg { width: 100%; height: 100%; overflow: visible }
.orbit-svg .orbit-path {
    fill: none; stroke: var(--ink); opacity: .28; stroke-width: 1;
    stroke-dasharray: 4 10; animation: drawOrbit 18s linear infinite
}
.orbit-svg .signal-path {
    fill: none; stroke: var(--accent); stroke-width: 2;
    stroke-dasharray: 3 7; animation: signalDash 4s linear infinite
}
@keyframes drawOrbit { to { stroke-dashoffset: -200 } }
@keyframes signalDash { to { stroke-dashoffset: -80 } }

.orbit-core {
    position: absolute; inset: 38%; border-radius: 50%; background: var(--ink);
    color: var(--paper); display: grid; place-items: center; text-align: center;
    transform: rotate(7deg); box-shadow: 0 0 0 8px var(--paper), 0 0 0 9px var(--ink);
    animation: coreBreath 4s ease-in-out infinite
}
.orbit-core strong { display: block; font-family: var(--font-display); font-size: 2rem; line-height: .9 }
.orbit-core small { font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft) }
@keyframes coreBreath { 50% { transform: rotate(7deg) scale(1.04) } }

.orbit-node {
    position: absolute; width: 106px; min-height: 78px; padding: 10px;
    background: var(--panel-strong); border: 1px solid var(--ink);
    box-shadow: var(--shadow-small); transform: rotate(7deg); text-align: center; transition: .3s ease
}
.orbit-node:hover { transform: rotate(7deg) translateY(-6px); border-color: var(--accent) }
.orbit-node i { display: block; color: var(--accent); font-size: 1.2rem; margin-bottom: 2px }
.orbit-node b { font-size: .72rem; display: block }
.orbit-node small { display: block; color: var(--muted); font-size: .63rem }

.node-one { top: 5%; right: 16% }
.node-two { bottom: 8%; right: 5% }
.node-three { bottom: 4%; left: 8% }
.node-four { top: 16%; left: 1% }

.hero-command {
    position: absolute; right: 2%; bottom: 0; width: 270px;
    background: var(--ink); color: var(--paper); padding: 18px;
    box-shadow: var(--shadow); transform: rotate(3deg)
}
.hero-command label {
    font-size: .72rem; color: var(--accent-soft); display: block;
    margin-bottom: 9px; text-transform: uppercase; letter-spacing: .12em
}
.hero-command select, .hero-command input { width: 100%; accent-color: var(--accent) }
.command-output {
    display: flex; justify-content: space-between; align-items: end;
    margin-top: 13px; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 12px
}
.command-output strong { color: var(--accent); font-family: var(--font-display); font-size: 1.7rem; line-height: 1 }
.command-output small { color: rgba(255, 255, 255, .64); font-size: .68rem }

.section { padding: 132px 0; position: relative }
.section:nth-of-type(even) { background: color-mix(in srgb, var(--paper-deep) 40%, transparent) }

.section-header {
    display: flex; justify-content: space-between; gap: 35px;
    align-items: end; margin-bottom: 55px
}
.section-header > div:first-child { max-width: 670px }

.margin-note {
    writing-mode: vertical-rl; transform: rotate(180deg); color: var(--muted);
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    border-left: 1px solid var(--line); padding-left: 12px
}

.manifesto { border-left: 5px solid var(--accent); padding: 10px 0 10px 34px }
.manifesto p {
    font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 3.15rem);
    line-height: 1.08; max-width: 820px
}

.principle-list { border-top: 1px solid var(--line) }
.principle-row {
    display: grid; grid-template-columns: 90px 1fr 1.25fr; gap: 20px;
    align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line)
}
.principle-row .symbol { font-size: 1.4rem; color: var(--accent) }
.principle-row h4 { font-size: 1.2rem; margin-bottom: 0 }
.principle-row p { color: var(--ink-soft); font-size: .9rem; margin: 0 }

.atlas-shell {
    display: grid; grid-template-columns: 220px 330px 1fr;
    border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); min-height: 660px
}
.atlas-categories { border-right: 1px solid var(--line); padding: 18px 0 }
.category-button {
    width: 100%; display: grid; grid-template-columns: 26px 1fr; gap: 10px;
    text-align: left; background: transparent; border: 0; color: var(--muted);
    padding: 15px 16px; transition: .25s
}
.category-button:hover { color: var(--ink); background: var(--paper-deep) }
.category-button.is-active {
    color: var(--ink); background: var(--accent-soft); border-left: 4px solid var(--accent); padding-left: 12px
}
.category-button .cat-emoji { font-size: 1.1rem }
.category-button strong { display: block; font-size: .85rem }
.category-button small { display: block; color: currentColor; opacity: .68; font-size: .68rem; margin-top: 2px }

.atlas-index {
    padding: 30px 25px; border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper-deep) 35%, transparent)
}
.atlas-index h3 { font-size: 1.7rem; margin-bottom: 22px }
.service-index-item {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; color: var(--ink-soft); padding: 13px 0; border: 0;
    border-bottom: 1px solid var(--line); background: transparent; text-align: left; transition: .25s
}
.service-index-item:hover, .service-index-item.is-active { color: var(--accent); padding-left: 8px }
.service-index-item span { font-weight: 600; font-size: .86rem }
.service-index-item i { font-size: .8rem }

.atlas-detail {
    padding: 54px 6%; display: flex; flex-direction: column;
    justify-content: center; position: relative; overflow: hidden
}
.atlas-detail::before {
    content: attr(data-mark); position: absolute; right: -2%; top: -13%;
    font-family: var(--font-display); font-size: 17rem; line-height: 1;
    color: var(--line); opacity: .25; pointer-events: none
}
.detail-emoji { font-size: 3.6rem; margin-bottom: 18px; position: relative }
.detail-kicker {
    font-size: .75rem; color: var(--accent); font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase; position: relative
}
.atlas-detail h3 {
    font-size: clamp(2.5rem, 5vw, 5rem); line-height: .93;
    max-width: 600px; margin: 12px 0 22px; position: relative
}
.atlas-detail p { color: var(--ink-soft); max-width: 610px; font-size: 1rem; position: relative }
.detail-footer {
    border-top: 1px solid var(--line); margin-top: 26px; padding-top: 20px;
    display: flex; align-items: center; gap: 15px; flex-wrap: wrap; position: relative
}
.detail-micro { color: var(--muted); font-size: .77rem }

.benefit-grid {
    display: grid; grid-template-columns: 1.4fr .8fr 1fr;
    gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink)
}
.benefit-block {
    padding: 34px 25px; min-height: 230px; border-right: 1px solid var(--line);
    position: relative; transition: .25s
}
.benefit-block:last-child { border-right: 0 }
.benefit-block.wide { grid-column: span 2; border-bottom: 1px solid var(--line) }
.benefit-block.tall { grid-row: span 2 }
.benefit-block:hover { background: var(--panel) }
.benefit-icon { font-size: 1.8rem; color: var(--accent); margin-bottom: 20px }
.benefit-block h3 { font-size: 1.55rem }
.benefit-block p { color: var(--ink-soft); font-size: .9rem; max-width: 360px }
.benefit-index {
    position: absolute; right: 20px; top: 25px;
    font-family: var(--font-display); font-size: 2rem; color: var(--line)
}

.process-route { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px }
.process-route::before {
    content: ''; position: absolute; left: 6%; right: 6%;
    top: 28px; border-top: 1px dashed var(--accent)
}
.process-stop { position: relative; z-index: 1 }
.process-marker {
    width: 56px; height: 56px; border: 1px solid var(--ink); background: var(--paper);
    display: grid; place-items: center; color: var(--accent); font-size: 1.35rem;
    margin-bottom: 22px; transform: rotate(45deg)
}
.process-marker i { transform: rotate(-45deg) }
.process-stop h3 { font-size: 1.45rem }
.process-stop p { color: var(--ink-soft); font-size: .88rem; max-width: 210px }

.quote-archive {
    display: grid; grid-template-columns: 1fr 1.15fr 1fr;
    gap: 0; align-items: start; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink)
}
.quote-entry { padding: 34px 26px; border-right: 1px solid var(--line) }
.quote-entry:last-child { border-right: 0 }
.quote-entry:nth-child(2) { margin-top: 70px; background: var(--panel); box-shadow: var(--shadow) }
.quote-mark { font-family: Georgia, serif; font-size: 5rem; color: var(--accent); line-height: .6 }
.quote-entry blockquote { font-family: var(--font-display); font-size: 1.38rem; line-height: 1.16; margin: 24px 0 }
.quote-person { border-top: 1px solid var(--line); padding-top: 16px; display: flex; gap: 12px; align-items: center }
.initial-avatar {
    width: 41px; height: 41px; border-radius: 50%; background: var(--teal-soft);
    color: var(--teal); display: grid; place-items: center; font-weight: 700
}
.rating { color: var(--yellow); font-size: .8rem; margin-left: auto }

.faq-layout { display: grid; grid-template-columns: .8fr 1.5fr; gap: 70px; align-items: start }
.faq-side { position: sticky; top: 120px }
.faq-side .big-mark {
    font-family: var(--font-display); font-size: 7rem;
    line-height: .8; color: var(--accent); opacity: .65
}
.accordion-item {
    background: transparent; border: 0; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important
}
.accordion-button {
    background: transparent !important; color: var(--ink) !important;
    font-family: var(--font-display); font-size: 1.22rem; padding: 22px 0; box-shadow: none !important
}
.accordion-button::after {
    filter: none; background-image: none; content: '+'; font-family: var(--font-sans);
    font-size: 1.5rem; color: var(--accent); width: auto; height: auto
}
.accordion-button:not(.collapsed)::after { content: '−'; transform: none }
.accordion-body { padding: 0 40px 22px 0; color: var(--ink-soft); font-size: .93rem }

.form-panel { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 35px 0 }
.field { margin-bottom: 18px }
.field label {
    display: block; color: var(--muted); font-size: .75rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; margin-bottom: 7px
}
.field input, .field textarea, .field select {
    width: 100%; color: var(--ink); background: transparent; border: 0;
    border-bottom: 1px solid var(--line); padding: 12px 0; outline: none;
    border-radius: 0; transition: border-color .25s
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent) }
.field select option { background: var(--paper); color: var(--ink) }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--accent) }

.newsletter {
    background: var(--teal); color: #fff; padding: 58px 6%;
    position: relative; overflow: hidden
}
.newsletter::after {
    content: '✳'; position: absolute; right: 5%; top: -25px;
    font-size: 14rem; color: rgba(255, 255, 255, .08); transform: rotate(15deg)
}
.newsletter h2 { font-size: clamp(2.4rem, 5vw, 5rem) }
.newsletter .eyebrow { color: #d4f5ed; position: relative }
.newsletter .input-light {
    background: rgba(255, 255, 255, .13); color: #fff;
    border: 1px solid rgba(255, 255, 255, .5); border-radius: 7px;
    padding: 13px 14px; width: 100%
}
.newsletter .input-light::placeholder { color: rgba(255, 255, 255, .68) }
.newsletter .btn-light-custom {
    background: #fff; color: var(--teal); border: 0;
    border-radius: 7px; padding: 13px 18px; font-weight: 700
}

.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: start }
.contact-note { border-left: 4px solid var(--teal); padding-left: 22px; margin-bottom: 35px }
.contact-note p { font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1 }
.contact-details { border-top: 1px solid var(--line) }
.detail-line { display: flex; gap: 16px; padding: 19px 0; border-bottom: 1px solid var(--line) }
.detail-line i { color: var(--accent); font-size: 1.2rem }
.detail-line small {
    display: block; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muted); font-size: .65rem; font-weight: 700
}
.detail-line span { color: var(--ink-soft); font-size: .9rem }

.cta-block {
    background: var(--ink); color: var(--paper); padding: 78px 6%;
    display: flex; align-items: end; justify-content: space-between; gap: 30px
}
.cta-block h2 { color: var(--paper); font-size: clamp(2.8rem, 7vw, 7rem); line-height: .88; max-width: 750px }
.cta-block p { color: color-mix(in srgb, var(--paper) 65%, transparent); max-width: 420px }

.btn-coral {
    display: inline-flex; align-items: center; gap: 10px; background: var(--accent);
    color: #fff; border: 0; border-radius: 8px; padding: 15px 20px; font-weight: 700; transition: .25s
}
.btn-coral:hover { background: var(--paper); color: var(--ink); transform: translateY(-3px) }

footer { padding: 70px 0 25px; background: var(--paper-deep) }
.footer-brand p { color: var(--ink-soft); max-width: 320px; font-size: .9rem }
.footer-heading { font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px }
.footer-link { display: block; color: var(--ink-soft); font-size: .86rem; margin-bottom: 10px; transition: .2s }
.footer-link:hover { color: var(--accent); transform: translateX(3px) }

.social-link {
    width: 34px; height: 34px; border: 1px solid var(--line); display: inline-grid;
    place-items: center; color: var(--ink); border-radius: 50%; transition: .25s
}
.social-link:hover { background: var(--accent); color: #fff; border-color: var(--accent) }

.modal-content { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 14px }
.modal-header, .modal-footer { border-color: var(--line) }
.modal-body { color: var(--ink-soft); max-height: 65vh; overflow: auto }

.toast-wrap { position: fixed; right: 20px; top: 86px; z-index: 9997; display: grid; gap: 10px }
.toast-note {
    background: var(--ink); color: var(--paper); border-left: 4px solid var(--accent);
    padding: 14px 18px; min-width: 270px; box-shadow: var(--shadow-small);
    animation: toastIn .35s ease both; font-size: .84rem
}
@keyframes toastIn {
    from { transform: translateX(30px); opacity: 0 }
    to { transform: translateX(0); opacity: 1 }
}

@media(max-width:1100px) {
    .nav-links { gap: 12px }
    .nav-links a { font-size: .76rem }
    .atlas-shell { grid-template-columns: 185px 280px 1fr }
    .hero-orbit-stage { min-height: 510px }
}
@media(max-width:991px) {
    body, button { cursor: auto }
    .cursor-dot, .cursor-orbit { display: none }
    .nav-links, .header-cta { display: none }
    .mobile-toggle { display: inline-block }
    .mobile-panel.is-open { display: grid; gap: 11px }
    .mobile-panel a { padding: 9px 0; color: var(--ink-soft); border-bottom: 1px solid var(--line) }
    .hero { padding-top: 125px }
    .hero-orbit-stage { margin-top: 25px; min-height: 470px }
    .atlas-shell { grid-template-columns: 1fr }
    .atlas-categories { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line) }
    .category-button { min-width: 150px }
    .atlas-index { border-right: 0; border-bottom: 1px solid var(--line) }
    .service-index-item { display: inline-flex; width: auto; margin-right: 20px; padding: 8px 0; border-bottom: 2px solid transparent }
    .service-index-item.is-active { border-bottom-color: var(--accent); padding-left: 0 }
    .service-list-mobile { display: flex; gap: 4px; overflow-x: auto; white-space: nowrap }
    .benefit-grid { grid-template-columns: 1fr 1fr }
    .benefit-block.wide { grid-column: span 2 }
    .benefit-block.tall { grid-row: auto }
    .process-route { grid-template-columns: 1fr 1fr }
    .process-route::before { display: none }
    .quote-archive { grid-template-columns: 1fr }
    .quote-entry, .quote-entry:nth-child(2) { margin: 0; border-right: 0; border-bottom: 1px solid var(--line); box-shadow: none }
    .faq-layout, .contact-grid { grid-template-columns: 1fr; gap: 40px }
    .faq-side { position: static }
    .cta-block { display: block }
    .cta-block .btn-coral { margin-top: 22px }
}
@media(max-width:600px) {
    .section { padding: 85px 0 }
    .masthead { min-height: 68px }
    .wordmark { font-size: 1.25rem }
    .theme-switch span { display: none }
    .hero h1 { font-size: clamp(3.2rem, 17vw, 5.2rem) }
    .hero-orbit-stage { min-height: 400px }
    .orbit-node { width: 82px; min-height: 66px; padding: 7px }
    .orbit-node b { font-size: .63rem }
    .orbit-node small { font-size: .56rem }
    .hero-command { width: 225px; right: 0 }
    .node-four { left: -3% }
    .principle-row { grid-template-columns: 40px 1fr }
    .principle-row p { grid-column: 2 }
    .benefit-grid { grid-template-columns: 1fr }
    .benefit-block.wide { grid-column: span 1 }
    .process-route { grid-template-columns: 1fr }
    .newsletter { padding: 46px 22px }
    .newsletter::after { font-size: 8rem }
    .btn-ink, .btn-outline { width: 100% }
    .hero .d-flex { align-items: stretch }
}