.card,
.feature-item,
.principle-card,
.mini-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.card,
.feature-item,
.principle-card,
.mini-panel {
    padding: clamp(1rem, 2vw, 1.35rem);
}

.card-grid,
.feature-grid,
.mission-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.card-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1rem;
    border-radius: var(--radius);
    background: rgba(215, 179, 90, 0.14);
    color: var(--color-gold-deep);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    color: var(--color-blue);
    font-weight: 850;
}

.text-link .icon {
    width: 16px;
    height: 16px;
}

.belief-section {
    background: #ffffff;
}

.belief-grid,
.difference-layout,
.home-hedge-inner,
.question-layout,
.reach-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.72fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.belief-copy h2 {
    max-width: 760px;
}

.customer-question {
    margin: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(215, 179, 90, 0.18), rgba(255, 255, 255, 0.92)),
        var(--color-surface);
    box-shadow: var(--shadow-md);
}

.customer-question p {
    margin: 0;
    color: var(--color-navy);
    font-size: 2rem;
    line-height: 1.05;
    font-weight: 900;
}

.customer-question cite {
    display: block;
    margin-top: 1rem;
    color: var(--color-ink-soft);
    font-style: normal;
    font-weight: 800;
}

.difference-section {
    background:
        linear-gradient(180deg, rgba(243, 237, 223, 0.62), rgba(255, 255, 255, 1));
}

.difference-note {
    display: inline-flex;
    margin-top: 0.65rem;
    padding: 0.7rem 0.85rem;
    border-left: 4px solid var(--color-gold-deep);
    background: #ffffff;
    color: var(--color-navy);
    font-weight: 900;
}

.difference-table {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow-md);
}

.difference-header,
.difference-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.difference-header span {
    padding: 1rem;
    background: var(--color-navy);
    color: var(--color-gold-bright);
    font-weight: 900;
}

.difference-row span,
.difference-row strong {
    padding: 0.95rem 1rem;
    border-top: 1px solid var(--color-muted-border);
}

.difference-row span {
    color: var(--color-ink-soft);
}

.difference-row strong {
    background: rgba(215, 179, 90, 0.1);
    color: var(--color-navy);
}

.home-hedge {
    background:
        linear-gradient(120deg, rgba(8, 7, 4, 0.96), rgba(36, 27, 12, 0.94)),
        var(--color-navy);
    color: #eadfca;
}

.home-hedge h2,
.home-hedge h3,
.home-hedge .lede {
    color: #ffffff;
}

.home-hedge .eyebrow {
    color: var(--color-gold-bright);
}

.home-hedge-inner {
    grid-template-columns: minmax(240px, 0.44fr) minmax(0, 1fr);
}

.home-hedge-copy {
    max-width: 760px;
}

.home-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.home-service-tile {
    min-height: 260px;
    padding: 1.15rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 243, 232, 0.82)),
        var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.home-service-tile h3 {
    margin-bottom: 0.5rem;
}

.home-service-tile p {
    color: var(--color-ink-soft);
}

.home-process .section-heading {
    margin-bottom: 2.4rem;
}

.home-timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: home-process;
}

.home-timeline li {
    position: relative;
    min-height: 190px;
    padding: 3.2rem 1rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    counter-increment: home-process;
}

.home-timeline li::before {
    content: counter(home-process, decimal-leading-zero);
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--radius-sm);
    background: var(--color-navy);
    color: var(--color-gold-bright);
    font-size: 0.78rem;
    font-weight: 900;
}

.home-timeline span {
    display: block;
    color: var(--color-navy);
    font-weight: 900;
    font-size: 1.22rem;
}

.home-timeline p {
    margin: 0.45rem 0 0;
    color: var(--color-ink-soft);
}

.daily-questions {
    background:
        linear-gradient(90deg, rgba(215, 179, 90, 0.08), transparent 42%),
        #ffffff;
}

.question-layout {
    align-items: start;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.choice-item {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    min-height: 92px;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.choice-item .icon {
    width: 22px;
    height: 22px;
    color: var(--color-gold-deep);
}

.choice-item h3 {
    margin: 0;
    font-size: 1rem;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.story-card {
    padding: 1.15rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.story-card dl,
.story-card dd {
    margin: 0;
}

.story-card dl {
    display: grid;
    gap: 0.85rem;
}

.story-card dt {
    color: var(--color-gold-deep);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.story-card dd {
    color: var(--color-ink-soft);
}

.canada-reach {
    background: var(--color-navy);
    color: #eadfca;
}

.canada-reach h2 {
    color: #ffffff;
}

.canada-reach .eyebrow {
    color: var(--color-gold-bright);
}

.canada-reach .location-strip a {
    border-color: rgba(215, 179, 90, 0.32);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.home-faq-deep {
    background: #ffffff;
}

body.home-portfolio-page {
    background: #050503;
}

body.home-portfolio-page main {
    overflow: clip;
    background:
        linear-gradient(90deg, rgba(242, 212, 123, 0.052) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.04) 1px, transparent 1px),
        linear-gradient(135deg, #050503 0%, #0f0d08 44%, #1e1506 100%);
    background-size: 92px 92px, 92px 92px, auto;
}

body.home-portfolio-page .section {
    position: relative;
    scroll-margin-top: 96px;
    color: #eadfca;
    background: transparent;
}

body.home-portfolio-page .section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(calc(100% - 2rem), var(--container));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(242, 212, 123, 0.7), rgba(242, 212, 123, 0.08), transparent);
    pointer-events: none;
}

body.home-portfolio-page h2,
body.home-portfolio-page h3 {
    color: #ffffff;
}

body.home-portfolio-page p {
    color: #d8ceb8;
}

body.home-portfolio-page .eyebrow {
    color: var(--color-gold-bright);
}

body.home-portfolio-page .home-hero {
    min-height: clamp(720px, calc(100svh - 78px), 940px);
    background:
        linear-gradient(90deg, rgba(242, 212, 123, 0.07) 1px, transparent 1px),
        linear-gradient(180deg, rgba(72, 217, 255, 0.045) 1px, transparent 1px),
        linear-gradient(122deg, #050503 0%, #0d0b08 45%, #211606 100%);
    background-size: 92px 92px, 92px 92px, auto;
}

body.home-portfolio-page .hero-stage {
    grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.86fr);
    gap: 2.4rem;
}

body.home-portfolio-page .home-hero::before {
    inset: 8% -4% 7% 52%;
    background:
        linear-gradient(110deg, transparent 0%, rgba(242, 212, 123, 0.13) 48%, transparent 64%),
        linear-gradient(180deg, rgba(72, 217, 255, 0.1), transparent 64%);
    filter: blur(34px);
    opacity: 0.68;
}

body.home-portfolio-page .home-hero h1 {
    max-width: 900px;
    font-size: clamp(3.75rem, 4.45vw, 5.15rem);
    line-height: 0.94;
    text-transform: none;
}

body.home-portfolio-page .hero-tagline {
    max-width: 640px;
    color: var(--color-gold-deep);
    font-size: clamp(1.05rem, 1.45vw, 1.32rem);
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.home-portfolio-page .hero-subheading {
    max-width: 620px;
    color: var(--color-gold-bright) !important;
    font-size: 1.45rem !important;
}

body.home-portfolio-page .home-hero .hero-copy > p:not(.eyebrow):not(.lede):not(.hero-tagline) {
    max-width: 620px;
    color: #eadfca;
}

body.home-portfolio-page .service-cube-caption,
body.home-portfolio-page .service-cube-face-link {
    border-color: rgba(242, 212, 123, 0.38);
    background: rgba(5, 5, 3, 0.68);
}

body.home-portfolio-page .belief-grid,
body.home-portfolio-page .difference-layout,
body.home-portfolio-page .home-hedge-inner,
body.home-portfolio-page .question-layout,
body.home-portfolio-page .reach-layout,
body.home-portfolio-page .contact-preview-grid {
    gap: clamp(2rem, 6vw, 5rem);
}

body.home-portfolio-page .belief-copy h2,
body.home-portfolio-page .section-heading h2,
body.home-portfolio-page .home-hedge-copy h2 {
    font-size: 5rem;
    line-height: 0.92;
    text-wrap: balance;
}

body.home-portfolio-page .belief-section,
body.home-portfolio-page .difference-section,
body.home-portfolio-page .daily-questions,
body.home-portfolio-page .why-section,
body.home-portfolio-page .story-section,
body.home-portfolio-page .home-faq-deep,
body.home-portfolio-page .section-soft {
    background: transparent;
}

body.home-portfolio-page .customer-question {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: grid;
    align-content: end;
    border-color: rgba(242, 212, 123, 0.3);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.035);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body.home-portfolio-page .customer-question::before {
    content: "";
    position: absolute;
    top: 1.35rem;
    left: 1.35rem;
    width: min(58%, 340px);
    height: 1px;
    background: linear-gradient(90deg, rgba(242, 212, 123, 0.76), transparent);
}

body.home-portfolio-page .customer-question p {
    position: relative;
    color: #ffffff;
    font-size: 4rem;
    line-height: 0.94;
}

body.home-portfolio-page .customer-question cite {
    position: relative;
    color: var(--color-gold-bright);
}

body.home-portfolio-page .difference-note {
    border: 1px solid rgba(242, 212, 123, 0.42);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.065);
    color: var(--color-gold-bright);
}

body.home-portfolio-page .difference-table,
body.home-portfolio-page .faq-list details,
body.home-portfolio-page .home-service-tile,
body.home-portfolio-page .home-timeline li,
body.home-portfolio-page .choice-item,
body.home-portfolio-page .story-card,
body.home-portfolio-page .blog-card,
body.home-portfolio-page .contact-preview address {
    border: 1px solid rgba(242, 212, 123, 0.28);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.022)),
        rgba(255, 255, 255, 0.035);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
}

body.home-portfolio-page .difference-header span {
    background: rgba(242, 212, 123, 0.92);
    color: #080704;
}

body.home-portfolio-page .difference-row span,
body.home-portfolio-page .difference-row strong {
    border-top-color: rgba(242, 212, 123, 0.18);
}

body.home-portfolio-page .difference-row span {
    color: #d8ceb8;
}

body.home-portfolio-page .difference-row strong {
    background: rgba(242, 212, 123, 0.08);
    color: #ffffff;
}

body.home-portfolio-page .home-hedge {
    background:
        linear-gradient(90deg, rgba(242, 212, 123, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.035) 1px, transparent 1px),
        #050503;
    background-size: 92px 92px;
}

body.home-portfolio-page .home-hedge-inner {
    grid-template-columns: minmax(260px, 0.52fr) minmax(0, 1fr);
}

body.home-portfolio-page .hedge-logo-showcase {
    border-color: rgba(242, 212, 123, 0.34);
    transform: rotate(-2deg);
}

body.home-portfolio-page .home-services .section-heading.split,
body.home-portfolio-page .story-section .section-heading.split,
body.home-portfolio-page .section-soft .section-heading.split {
    align-items: start;
}

body.home-portfolio-page .home-service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    counter-reset: home-services;
}

body.home-portfolio-page .home-service-tile {
    position: relative;
    min-height: 330px;
    padding: 1rem;
    counter-increment: home-services;
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

body.home-portfolio-page .home-service-tile:nth-child(2n) {
    margin-top: 2.5rem;
}

body.home-portfolio-page .home-service-tile::before {
    content: counter(home-services, decimal-leading-zero);
    display: block;
    margin-bottom: 4.2rem;
    color: rgba(242, 212, 123, 0.72);
    font-size: 0.85rem;
    font-weight: 900;
}

body.home-portfolio-page .home-service-tile:hover,
body.home-portfolio-page .story-card:hover,
body.home-portfolio-page .choice-item:hover {
    transform: translateY(-6px);
    border-color: rgba(242, 212, 123, 0.62);
}

body.home-portfolio-page .home-service-tile .card-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: 1px solid rgba(242, 212, 123, 0.34);
    background: #ffffff;
    color: #080704;
}

body.home-portfolio-page .home-service-tile p,
body.home-portfolio-page .home-timeline p,
body.home-portfolio-page .story-card dd {
    color: #d8ceb8;
}

body.home-portfolio-page .home-service-tile .text-link,
body.home-portfolio-page .story-card .text-link {
    color: var(--color-gold-bright);
}

.goodfaith-ecosystem {
    --ecosystem-active-accent: var(--color-gold-bright);
    --ecosystem-cursor-x: 50%;
    --ecosystem-cursor-y: 50%;
    position: relative;
    overflow: clip;
    padding: clamp(4.5rem, 8vw, 7.5rem) 0;
    color: #fff8df;
    background:
        linear-gradient(90deg, rgba(242, 212, 123, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.045) 1px, transparent 1px),
        linear-gradient(145deg, #080704 0%, #11100b 42%, #060504 100%);
    background-size: 84px 84px, 84px 84px, auto;
    isolation: isolate;
}

.goodfaith-ecosystem::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at var(--ecosystem-cursor-x) var(--ecosystem-cursor-y), color-mix(in srgb, var(--ecosystem-active-accent) 22%, transparent), transparent 24%),
        linear-gradient(115deg, transparent 0 34%, rgba(242, 212, 123, 0.08) 42%, transparent 58%),
        linear-gradient(22deg, transparent 0 18%, rgba(72, 217, 255, 0.06) 36%, transparent 54%);
    opacity: 0.92;
    transition: background 260ms ease;
}

.goodfaith-ecosystem::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
    opacity: 0.28;
    transform: perspective(900px) rotateX(62deg) translateY(14%);
    transform-origin: center bottom;
}

.ecosystem-atmosphere,
.ecosystem-depth-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ecosystem-atmosphere {
    z-index: -1;
    overflow: hidden;
}

.ecosystem-depth-layer {
    opacity: 0.52;
}

.ecosystem-depth-layer.layer-one {
    background:
        linear-gradient(120deg, transparent 8%, rgba(242, 212, 123, 0.14) 11%, transparent 15%),
        linear-gradient(300deg, transparent 62%, rgba(72, 217, 255, 0.12) 66%, transparent 72%);
    animation: ecosystemDepthShift 18s ease-in-out infinite alternate;
}

.ecosystem-depth-layer.layer-two {
    background-image:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 38%, rgba(242, 212, 123, 0.2) 0 1px, transparent 2px),
        radial-gradient(circle at 44% 72%, rgba(72, 217, 255, 0.18) 0 1px, transparent 2px);
    background-size: 180px 180px, 240px 240px, 210px 210px;
    animation: ecosystemDustDrift 32s linear infinite;
}

.ecosystem-depth-layer.layer-three {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 28%),
        repeating-linear-gradient(110deg, transparent 0 36px, rgba(242, 212, 123, 0.04) 37px 38px, transparent 39px 76px);
    mix-blend-mode: screen;
    opacity: 0.28;
}

.ecosystem-heading {
    position: relative;
    z-index: 2;
}

.ecosystem-title-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.62fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: end;
}

.ecosystem-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0 0 0.8rem;
    color: var(--ecosystem-active-accent);
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    font-weight: 950;
    text-transform: uppercase;
}

.ecosystem-kicker span {
    display: inline-block;
    clip-path: inset(0 0 0 0);
    animation: ecosystemTextReveal 900ms ease both;
}

.ecosystem-kicker span:nth-child(2) {
    animation-delay: 120ms;
}

.ecosystem-heading h2 {
    max-width: 980px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(3.2rem, 8vw, 7.7rem);
    line-height: 0.86;
    text-wrap: balance;
}

.ecosystem-intro-copy {
    display: grid;
    gap: 1rem;
    color: #e4d8bd;
    font-size: 1.03rem;
}

.ecosystem-intro-copy p {
    margin: 0;
}

.ecosystem-experience {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
    gap: clamp(1.2rem, 3vw, 2rem);
    align-items: stretch;
    margin-top: clamp(2rem, 5vw, 4rem);
}

.ecosystem-visual-wrap {
    position: relative;
    overflow: hidden;
    min-height: clamp(620px, 82vh, 820px);
    border: 1px solid rgba(242, 212, 123, 0.28);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 50% 48%, rgba(242, 212, 123, 0.16), transparent 25%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(0, 0, 0, 0.36);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    touch-action: pan-y;
}

.ecosystem-visual-wrap::before {
    content: "";
    position: absolute;
    inset: 8% 18% auto;
    height: 38%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ecosystem-active-accent) 30%, transparent), transparent);
    filter: blur(44px);
    opacity: 0.66;
}

.ecosystem-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.ecosystem-canvas-fallback {
    position: absolute;
    inset: 1rem;
    z-index: 2;
    display: grid;
    align-content: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(242, 212, 123, 0.18);
    border-radius: var(--radius);
    background:
        radial-gradient(circle, rgba(242, 212, 123, 0.1), transparent 48%),
        rgba(8, 7, 4, 0.72);
    transition: opacity 240ms ease, visibility 240ms ease;
}

.ecosystem-ready .ecosystem-canvas-fallback {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ecosystem-fallback-only .ecosystem-canvas-fallback {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ecosystem-canvas-fallback strong {
    justify-self: center;
    display: grid;
    place-items: center;
    width: min(58vw, 220px);
    aspect-ratio: 1;
    border: 1px solid rgba(242, 212, 123, 0.44);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 212, 123, 0.88), rgba(156, 116, 38, 0.92));
    color: #080704;
    text-align: center;
    text-transform: uppercase;
}

.ecosystem-canvas-fallback div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
}

.ecosystem-canvas-fallback a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0.36rem 0.56rem;
    border: 1px solid color-mix(in srgb, var(--node-accent) 54%, transparent);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 850;
}

.ecosystem-core-caption,
.ecosystem-story-panel,
.ecosystem-control-panel,
.ecosystem-combination-output,
.ecosystem-impact-statement {
    border: 1px solid rgba(242, 212, 123, 0.28);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
        rgba(8, 7, 4, 0.7);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
}

.ecosystem-core-caption {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 3;
    display: grid;
    gap: 0.2rem;
    max-width: 220px;
    padding: 0.85rem 0.95rem;
}

.ecosystem-core-caption span,
.ecosystem-connected > span,
.ecosystem-benefits > span,
.ecosystem-combination-output span {
    color: var(--ecosystem-active-accent);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ecosystem-core-caption strong {
    color: #ffffff;
    font-size: 1.15rem;
    line-height: 1.05;
    text-transform: uppercase;
}

.ecosystem-story-panel {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    display: grid;
    gap: 0.35rem;
    max-width: 680px;
    padding: 1rem;
}

.ecosystem-story-panel strong {
    color: #ffffff;
    font-size: clamp(1.35rem, 3vw, 2.4rem);
    line-height: 0.98;
}

.ecosystem-story-panel p {
    max-width: 540px;
    margin: 0;
    color: #e4d8bd;
}

.ecosystem-control-panel {
    align-self: stretch;
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.3rem);
}

.ecosystem-control-panel h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.8rem, 3.5vw, 2.65rem);
    line-height: 0.96;
}

.ecosystem-control-panel p {
    margin: 0;
    color: #e4d8bd;
}

.ecosystem-connected,
.ecosystem-benefits {
    display: grid;
    gap: 0.65rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(242, 212, 123, 0.18);
}

.ecosystem-connected div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.ecosystem-connected span:not(:first-child),
.ecosystem-connected small {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0.28rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--node-accent, var(--ecosystem-active-accent)) 50%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--node-accent, var(--ecosystem-active-accent)) 12%, transparent);
    color: #fff8df;
    font-size: 0.76rem;
    font-weight: 850;
}

.ecosystem-benefits ul {
    display: grid;
    gap: 0.44rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ecosystem-benefits li {
    position: relative;
    min-height: 34px;
    padding: 0.42rem 0.5rem 0.42rem 1.9rem;
    border: 1px solid rgba(242, 212, 123, 0.13);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.045);
    color: #fff8df;
    font-size: 0.88rem;
    font-weight: 760;
}

.ecosystem-benefits li::before {
    content: "";
    position: absolute;
    left: 0.68rem;
    top: 50%;
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: var(--ecosystem-active-accent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--ecosystem-active-accent) 70%, transparent);
    transform: translateY(-50%);
}

.ecosystem-panel-actions {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.4rem;
}

.ecosystem-panel-actions .button {
    width: 100%;
    justify-content: center;
}

.ecosystem-service-strip {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.58rem;
    margin-top: 1rem;
}

.ecosystem-service-button {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.2rem;
    min-height: 76px;
    padding: 0.66rem;
    border: 1px solid color-mix(in srgb, var(--node-accent) 32%, rgba(242, 212, 123, 0.16));
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--node-accent) 12%, transparent), rgba(255, 255, 255, 0.035)),
        rgba(8, 7, 4, 0.76);
    color: #fff8df;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform var(--transition), border-color var(--transition), background var(--transition), opacity var(--transition);
}

.ecosystem-service-button::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: var(--node-accent);
    opacity: 0.5;
}

.ecosystem-service-button:hover,
.ecosystem-service-button:focus-visible,
.ecosystem-service-button.is-active {
    border-color: color-mix(in srgb, var(--node-accent) 76%, #ffffff 12%);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--node-accent) 20%, transparent), rgba(255, 255, 255, 0.055)),
        rgba(8, 7, 4, 0.86);
    transform: translateY(-3px);
}

.ecosystem-service-button:not(.is-connected):not(.is-active) {
    opacity: 0.55;
}

.ecosystem-service-button span {
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 950;
    line-height: 1;
}

.ecosystem-service-button small {
    color: #d8ceb8;
    font-size: 0.72rem;
    font-weight: 720;
    line-height: 1.18;
}

.ecosystem-combinations {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: stretch;
    margin-top: clamp(1.2rem, 3vw, 2rem);
}

.ecosystem-combination-output,
.ecosystem-impact-statement {
    padding: clamp(1rem, 2vw, 1.35rem);
}

.ecosystem-combination-output {
    display: grid;
    align-content: center;
    gap: 0.45rem;
}

.ecosystem-combination-output strong {
    color: #ffffff;
    font-size: clamp(1.6rem, 3vw, 2.45rem);
    line-height: 0.98;
}

.ecosystem-combination-output p,
.ecosystem-impact-statement p {
    margin: 0;
    color: #e4d8bd;
}

.ecosystem-impact-statement {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.72rem;
}

.ecosystem-impact-statement::before {
    content: "CONNECTED / VISIBLE / TRUSTED / CONVERTING / GROWING";
    color: rgba(242, 212, 123, 0.17);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 950;
    line-height: 0.88;
}

.ecosystem-impact-statement p {
    color: #ffffff;
    font-size: clamp(1.2rem, 2.4vw, 1.65rem);
    font-weight: 850;
    line-height: 1.12;
}

.ecosystem-impact-statement strong {
    color: var(--ecosystem-active-accent);
    font-size: 1.05rem;
}

.ecosystem-magnetic {
    position: relative;
    overflow: hidden;
}

.ecosystem-magnetic::before {
    content: "";
    position: absolute;
    inset: -120% -20%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(-70%) rotate(12deg);
    transition: transform 520ms ease;
}

.ecosystem-magnetic:hover::before {
    transform: translateX(70%) rotate(12deg);
}

@keyframes ecosystemDepthShift {
    from {
        transform: translate3d(-2%, -1%, 0);
    }

    to {
        transform: translate3d(2%, 1.5%, 0);
    }
}

@keyframes ecosystemDustDrift {
    from {
        background-position: 0 0, 0 0, 0 0;
    }

    to {
        background-position: 180px 360px, -240px 240px, 210px -210px;
    }
}

@keyframes ecosystemTextReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
        clip-path: inset(100% 0 0 0);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}

body.home-portfolio-page .section-soft .home-process,
body.home-portfolio-page .why-section .container {
    position: relative;
}

body.home-portfolio-page .home-timeline {
    align-items: stretch;
}

body.home-portfolio-page .home-timeline li {
    min-height: 260px;
}

body.home-portfolio-page .home-timeline li::before {
    background: #ffffff;
    color: #080704;
}

body.home-portfolio-page .home-timeline span {
    color: #ffffff;
}

body.home-portfolio-page .choice-grid {
    gap: 1rem;
}

body.home-portfolio-page .choice-item {
    min-height: 132px;
    align-items: flex-start;
}

body.home-portfolio-page .choice-item .icon {
    color: var(--color-gold-bright);
}

body.home-portfolio-page .story-grid {
    gap: 1rem;
}

body.home-portfolio-page .story-card {
    min-height: 410px;
    display: grid;
}

body.home-portfolio-page .story-card h3 {
    font-size: 1.85rem;
}

body.home-portfolio-page .story-card dt {
    color: var(--color-gold-bright);
}

body.home-portfolio-page .canada-reach {
    background:
        linear-gradient(90deg, rgba(242, 212, 123, 0.052) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.04) 1px, transparent 1px),
        #080704;
    background-size: 92px 92px;
}

body.home-portfolio-page .canada-reach .location-strip a {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
}

body.home-portfolio-page .card-grid.four {
    gap: 1rem;
}

body.home-portfolio-page .blog-card h3 a,
body.home-portfolio-page .faq-list summary {
    color: #ffffff;
}

body.home-portfolio-page .blog-card-body,
body.home-portfolio-page .faq-list details p {
    color: #d8ceb8;
}

body.home-portfolio-page .faq-list details {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.03);
}

body.home-portfolio-page .cta-band {
    background: #ffffff;
    color: #080704;
}

body.home-portfolio-page .cta-band h2,
body.home-portfolio-page .cta-band p {
    color: #080704;
}

body.home-portfolio-page .contact-preview {
    background: #050503;
}

body.home-portfolio-page .contact-preview address {
    border-left: 0;
    color: #ffffff;
}

body.home-portfolio-page .contact-preview address a {
    color: var(--color-gold-bright);
}

body.home-portfolio-page {
    background: #fbf7ee;
}

body.home-portfolio-page main {
    background:
        linear-gradient(90deg, rgba(156, 116, 38, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156, 116, 38, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, #fbf7ee 0%, #ffffff 38%, #f5eddd 100%);
    background-size: 92px 92px, 92px 92px, auto;
}

body.home-portfolio-page .home-hero {
    color: var(--color-ink);
    background:
        linear-gradient(90deg, rgba(156, 116, 38, 0.09) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156, 116, 38, 0.07) 1px, transparent 1px),
        linear-gradient(116deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 243, 232, 0.98) 48%, rgba(215, 179, 90, 0.22) 100%),
        #fbf7ee;
    background-size: 92px 92px, 92px 92px, auto, auto;
}

body.home-portfolio-page .home-hero::before {
    inset: 0;
    background: linear-gradient(135deg, transparent 0 45%, rgba(8, 7, 4, 0.07) 45% 46%, transparent 46% 100%);
    filter: none;
    opacity: 1;
}

body.home-portfolio-page .home-hero h1 {
    color: var(--color-navy);
}

body.home-portfolio-page .home-hero .eyebrow,
body.home-portfolio-page .hero-subheading,
body.home-portfolio-page .hero-tagline {
    color: var(--color-gold-deep) !important;
}

body.home-portfolio-page .home-hero .hero-copy > p:not(.eyebrow):not(.lede):not(.hero-tagline) {
    color: var(--color-ink-soft);
}

body.home-portfolio-page main > .section:not(.home-hero) {
    color: var(--color-ink);
    background: rgba(255, 255, 255, 0.78);
}

body.home-portfolio-page main > .section:not(.home-hero).section-soft,
body.home-portfolio-page main > .section:not(.home-hero).belief-section,
body.home-portfolio-page main > .section:not(.home-hero).why-section,
body.home-portfolio-page main > .section:not(.home-hero).canada-reach {
    background:
        linear-gradient(135deg, rgba(242, 212, 123, 0.12), rgba(255, 255, 255, 0.82)),
        #f7f0e0;
}

body.home-portfolio-page main > .section:not(.home-hero) h2,
body.home-portfolio-page main > .section:not(.home-hero) h3,
body.home-portfolio-page main > .section:not(.home-hero) .faq-list summary,
body.home-portfolio-page main > .section:not(.home-hero) .home-timeline span,
body.home-portfolio-page main > .section:not(.home-hero) .blog-card h3 a {
    color: var(--color-navy);
}

body.home-portfolio-page main > .section:not(.home-hero) p,
body.home-portfolio-page main > .section:not(.home-hero) .blog-card-body,
body.home-portfolio-page main > .section:not(.home-hero) .faq-list details p,
body.home-portfolio-page main > .section:not(.home-hero) .home-service-tile p,
body.home-portfolio-page main > .section:not(.home-hero) .home-timeline p,
body.home-portfolio-page main > .section:not(.home-hero) .story-card dd {
    color: var(--color-ink-soft);
}

body.home-portfolio-page main > .section:not(.home-hero) .customer-question,
body.home-portfolio-page main > .section:not(.home-hero) .difference-table,
body.home-portfolio-page main > .section:not(.home-hero) .faq-list details,
body.home-portfolio-page main > .section:not(.home-hero) .home-service-tile,
body.home-portfolio-page main > .section:not(.home-hero) .home-timeline li,
body.home-portfolio-page main > .section:not(.home-hero) .choice-item,
body.home-portfolio-page main > .section:not(.home-hero) .story-card,
body.home-portfolio-page main > .section:not(.home-hero) .blog-card {
    border-color: rgba(156, 116, 38, 0.28);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 243, 232, 0.78)),
        #ffffff;
    box-shadow:
        0 18px 42px rgba(22, 19, 13, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

body.home-portfolio-page main > .section:not(.home-hero) .customer-question p {
    color: var(--color-navy);
}

body.home-portfolio-page main > .section:not(.home-hero) .customer-question cite,
body.home-portfolio-page main > .section:not(.home-hero) .home-service-tile .text-link,
body.home-portfolio-page main > .section:not(.home-hero) .story-card .text-link,
body.home-portfolio-page main > .section:not(.home-hero) .story-card dt,
body.home-portfolio-page main > .section:not(.home-hero) .choice-item .icon {
    color: var(--color-gold-deep);
}

body.home-portfolio-page main > .section:not(.home-hero) .home-service-tile .card-icon,
body.home-portfolio-page main > .section:not(.home-hero) .home-timeline li::before {
    background: var(--color-navy);
    color: var(--color-gold-bright);
}

body.home-portfolio-page main > .section:not(.home-hero) .difference-header span {
    background: var(--color-navy);
    color: var(--color-gold-bright);
}

body.home-portfolio-page main > .section:not(.home-hero) .difference-row strong {
    background: rgba(242, 212, 123, 0.2);
    color: var(--color-navy);
}

body.home-portfolio-page main > .section:not(.home-hero) .location-strip a {
    background: #ffffff;
    color: var(--color-navy);
}

body.home-portfolio-page main > .section.goodfaith-ecosystem {
    color: #fff8df;
    background:
        linear-gradient(90deg, rgba(242, 212, 123, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.045) 1px, transparent 1px),
        linear-gradient(145deg, #080704 0%, #11100b 42%, #060504 100%);
    background-size: 84px 84px, 84px 84px, auto;
}

body.home-portfolio-page main > .section.goodfaith-ecosystem h2,
body.home-portfolio-page main > .section.goodfaith-ecosystem h3,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-impact-statement p {
    color: #ffffff;
}

body.home-portfolio-page main > .section.goodfaith-ecosystem p,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-intro-copy,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-control-panel p,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-story-panel p,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-combination-output p {
    color: #e4d8bd;
}

body.home-portfolio-page main > .section.goodfaith-ecosystem .eyebrow,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-kicker,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-connected > span,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-benefits > span,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-combination-output span,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-impact-statement strong {
    color: var(--ecosystem-active-accent);
}

body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-core-caption,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-story-panel,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-control-panel,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-combination-output,
body.home-portfolio-page main > .section.goodfaith-ecosystem .ecosystem-impact-statement {
    border-color: rgba(242, 212, 123, 0.28);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
        rgba(8, 7, 4, 0.74);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.home-portfolio-page .contact-preview {
    background:
        linear-gradient(90deg, rgba(242, 212, 123, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.055) 1px, transparent 1px),
        #080704;
    background-size: 92px 92px, 92px 92px, auto;
}

body.home-portfolio-page .contact-preview h2,
body.home-portfolio-page .contact-preview p,
body.home-portfolio-page .contact-preview address {
    color: #ffffff;
}

body.home-portfolio-page .contact-preview address {
    border-color: rgba(242, 212, 123, 0.28);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.022)),
        rgba(255, 255, 255, 0.035);
}

.hedge-art-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 8vw, 7rem) 0;
    background:
        linear-gradient(90deg, rgba(215, 179, 90, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(215, 179, 90, 0.06) 1px, transparent 1px),
        linear-gradient(125deg, #070604 0%, #16110a 52%, #33240d 100%);
    background-size: 84px 84px, 84px 84px, auto;
    color: #efe5cc;
}

.hedge-art-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 212, 123, 0.75), transparent);
}

.hedge-circuit {
    position: absolute;
    top: 10%;
    right: 5%;
    width: min(42vw, 560px);
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(242, 212, 123, 0.22);
    border-radius: 50%;
    opacity: 0.46;
    animation: hedgeSpin 34s linear infinite;
}

.hedge-circuit::before,
.hedge-circuit::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px dashed rgba(242, 212, 123, 0.28);
    border-radius: 50%;
}

.hedge-circuit::after {
    inset: 31%;
    border-style: solid;
    border-color: rgba(15, 139, 141, 0.32);
}

.hedge-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
    gap: clamp(1.75rem, 5vw, 4rem);
    align-items: center;
}

.hedge-hero-copy h1 {
    max-width: 780px;
    margin: 0;
    color: #ffffff;
    font-size: 4.85rem;
    line-height: 0.96;
    text-wrap: balance;
}

.hedge-hero-copy .lede {
    color: #f3e7ca;
}

.hedge-hero-copy p:not(.eyebrow):not(.lede):not(.hedge-hero-line) {
    max-width: 690px;
    color: #d8ceb8;
}

.hedge-hero-line,
.hedge-statement {
    display: inline-flex;
    margin: 0.8rem 0 0;
    padding: 0.8rem 1rem;
    border-left: 4px solid var(--color-gold-bright);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-gold-bright);
    font-weight: 900;
}

.hedge-hero-visual {
    position: relative;
    min-height: 500px;
}

.hedge-logo-glass {
    position: sticky;
    top: 110px;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid rgba(242, 212, 123, 0.34);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(18px);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.hedge-logo-glass picture {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000000;
}

.hedge-logo-glass img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.floating-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(242, 212, 123, 0.4);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
    animation: hedgeFloat 7s ease-in-out infinite;
}

.chip-one {
    top: 9%;
    left: -1rem;
}

.chip-two {
    right: -0.6rem;
    top: 48%;
    animation-delay: 1.4s;
}

.chip-three {
    left: 1.2rem;
    bottom: 6%;
    animation-delay: 2.6s;
}

.hedge-meaning {
    background: #ffffff;
}

.hedge-meaning-grid,
.ai-human-grid,
.tool-grid,
.business-edge-grid,
.responsible-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.75fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.insight-board,
.split-glass {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 243, 232, 0.82)),
        #ffffff;
    box-shadow: var(--shadow-md);
}

.insight-board div,
.split-glass div {
    padding: 1rem;
    border: 1px solid var(--color-muted-border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.72);
}

.insight-board ul,
.split-glass ul,
.comparison-card ul,
.responsible-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.insight-board li,
.split-glass li,
.comparison-card li,
.responsible-card li {
    position: relative;
    margin: 0.55rem 0;
    padding-left: 1.1rem;
}

.insight-board li::before,
.split-glass li::before,
.comparison-card li::before,
.responsible-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-gold-deep);
}

.hedge-why,
.ai-human-section,
.comparison-art,
.responsible-ai {
    background:
        linear-gradient(90deg, rgba(215, 179, 90, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(215, 179, 90, 0.05) 1px, transparent 1px),
        #0b0905;
    background-size: 72px 72px;
    color: #eadfca;
}

.hedge-why h2,
.ai-human-section h2,
.comparison-art h2,
.responsible-ai h2,
.hedge-final h2 {
    color: #ffffff;
}

.hedge-why .eyebrow,
.ai-human-section .eyebrow,
.comparison-art .eyebrow,
.responsible-ai .eyebrow,
.hedge-final .eyebrow {
    color: var(--color-gold-bright);
}

.hedge-why .section-heading p,
.ai-human-section .section-heading p,
.comparison-art .section-heading p {
    color: #d8ceb8;
}

.noise-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.noise-pill {
    min-height: 72px;
    padding: 1rem;
    border: 1px solid rgba(215, 179, 90, 0.25);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-weight: 850;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.noise-pill:hover {
    transform: translateY(-4px);
    border-color: rgba(242, 212, 123, 0.64);
    background: rgba(255, 255, 255, 0.12);
}

.emotion-panel {
    margin-top: 1.5rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid rgba(242, 212, 123, 0.35);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
}

.emotion-panel p {
    color: #eadfca;
    font-weight: 800;
}

.emotion-panel div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.emotion-panel strong,
.edge-benefit-cloud span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    background: var(--color-gold-bright);
    color: var(--color-navy);
}

.ai-human-section {
    background-attachment: fixed;
}

.split-glass {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(242, 212, 123, 0.28);
    backdrop-filter: blur(18px);
}

.split-glass div {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

.split-glass h3 {
    color: #ffffff;
}

.hedge-equation {
    margin: 0;
    padding: 1rem;
    border-radius: var(--radius);
    background: var(--color-gold-bright);
    color: var(--color-navy);
    font-weight: 900;
}

.hedge-tool,
.principles-art,
.service-shape-section,
.business-edge {
    background:
        linear-gradient(180deg, rgba(243, 237, 223, 0.72), rgba(255, 255, 255, 1));
}

.tool-grid {
    grid-template-columns: minmax(260px, 0.65fr) repeat(2, minmax(0, 1fr));
}

.tool-panel,
.tool-list-card,
.principle-orbit-card,
.service-shape-card,
.responsible-card,
.hedge-final-inner {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: var(--shadow-sm);
}

.tool-panel,
.tool-list-card,
.principle-orbit-card,
.service-shape-card,
.responsible-card {
    padding: clamp(1rem, 2vw, 1.35rem);
}

.tool-panel {
    background: var(--color-navy);
    color: #eadfca;
}

.tool-panel h2 {
    color: #ffffff;
}

.tool-panel .eyebrow {
    color: var(--color-gold-bright);
}

.tool-list-card .check-list li {
    align-items: flex-start;
}

.principle-orbit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.principle-orbit-card {
    min-height: 250px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.principle-orbit-card:hover,
.service-shape-card:hover,
.comparison-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-gold-deep);
    box-shadow: var(--shadow-md);
}

.principle-orbit-card span {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-sm);
    background: var(--color-navy);
    color: var(--color-gold-bright);
    font-weight: 900;
}

.comparison-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.comparison-card {
    padding: clamp(1.1rem, 2vw, 1.5rem);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.comparison-card h3,
.comparison-card li {
    color: #ffffff;
}

.comparison-card.gold {
    background: linear-gradient(145deg, rgba(242, 212, 123, 0.92), rgba(156, 116, 38, 0.92));
}

.comparison-card.gold h3,
.comparison-card.gold li {
    color: #080704;
}

.comparison-card.gold li::before {
    background: #080704;
}

.service-shape-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.service-shape-card {
    min-height: 250px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.hedge-process-art {
    background: #ffffff;
}

.hedge-process-line {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: hedge-process;
}

.hedge-process-line li {
    position: relative;
    min-height: 255px;
    padding: 3.2rem 1rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    counter-increment: hedge-process;
}

.hedge-process-line li::before {
    content: counter(hedge-process, decimal-leading-zero);
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: var(--radius-sm);
    background: var(--color-navy);
    color: var(--color-gold-bright);
    font-size: 0.78rem;
    font-weight: 900;
}

.hedge-process-line span {
    display: block;
    color: var(--color-navy);
    font-size: 1.15rem;
    font-weight: 900;
}

.hedge-process-line p {
    margin: 0.45rem 0 0;
    color: var(--color-ink-soft);
}

.edge-benefit-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-content: center;
}

.edge-benefit-cloud span {
    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    font-weight: 900;
}

.responsible-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.responsible-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(242, 212, 123, 0.28);
    color: #eadfca;
    backdrop-filter: blur(16px);
}

.responsible-card h2,
.responsible-card h3 {
    color: #ffffff;
}

.responsible-card.support {
    background: rgba(242, 212, 123, 0.12);
}

.responsible-card p {
    color: #eadfca;
}

.hedge-final {
    background:
        linear-gradient(125deg, rgba(8, 7, 4, 0.96), rgba(40, 30, 12, 0.94)),
        var(--color-navy);
    color: #eadfca;
}

.hedge-final-inner {
    max-width: 920px;
    padding: clamp(1.4rem, 4vw, 2.5rem);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(242, 212, 123, 0.32);
    backdrop-filter: blur(16px);
}

body.hedge-experience-page {
    background: #050503;
}

body.hedge-experience-page main {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        linear-gradient(180deg, #050503 0%, #0d0a05 28%, #f8f3e8 54%, #050503 100%);
}

.hedge-atmosphere-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.44;
    mix-blend-mode: screen;
}

.hedge-progress {
    position: fixed;
    top: 74px;
    left: 0;
    z-index: 920;
    width: 100%;
    height: 3px;
    background: rgba(8, 7, 4, 0.6);
    pointer-events: none;
}

.hedge-progress span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--color-gold-deep), var(--color-gold-bright), #48d9ff);
    box-shadow: 0 0 24px rgba(242, 212, 123, 0.55);
}

body.hedge-experience-page [data-hedge-section] {
    position: relative;
    z-index: 1;
    scroll-margin-top: 86px;
}

body.hedge-experience-page [data-hedge-section]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(115deg, transparent 0%, rgba(242, 212, 123, 0.12) 48%, transparent 58%),
        linear-gradient(180deg, rgba(72, 217, 255, 0.06), transparent 34%);
    transition: opacity 520ms ease;
}

body.hedge-experience-page [data-hedge-section].hedge-section-active::before {
    opacity: 1;
}

body.hedge-experience-page [data-hedge-section] > .container {
    position: relative;
    z-index: 1;
}

body.hedge-experience-page [data-hedge-tilt] {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --tilt-lift: 0px;
    transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translate3d(0, var(--tilt-lift), 0);
    transform-style: preserve-3d;
    will-change: transform;
}

body.hedge-experience-page [data-hedge-layer] {
    will-change: transform;
}

.hedge-art-hero {
    min-height: 0;
    display: grid;
    align-items: start;
    padding: 4.75rem 0 4.5rem;
    background:
        linear-gradient(90deg, rgba(242, 212, 123, 0.07) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.055) 1px, transparent 1px),
        radial-gradient(circle at 18% 18%, rgba(242, 212, 123, 0.16), transparent 28%),
        radial-gradient(circle at 72% 48%, rgba(15, 139, 141, 0.18), transparent 32%),
        linear-gradient(122deg, #050503 0%, #12100a 44%, #33240d 100%);
    background-size: 92px 92px, 92px 92px, auto, auto, auto;
}

.hedge-art-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(105deg, transparent 0%, rgba(242, 212, 123, 0.11) 48%, transparent 54%),
        repeating-linear-gradient(90deg, transparent 0 92px, rgba(255, 255, 255, 0.035) 93px 94px);
    animation: hedgeSweep 12s ease-in-out infinite;
}

.hedge-art-hero > * {
    position: relative;
    z-index: 1;
}

.hedge-art-hero > .hedge-circuit {
    position: absolute;
    z-index: 0;
}

.hedge-circuit {
    border-color: rgba(242, 212, 123, 0.18);
    filter: drop-shadow(0 0 34px rgba(242, 212, 123, 0.14));
}

body.hedge-experience-page .hedge-hero-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 0;
}

.hedge-hero-grid {
    min-height: 0;
}

.hedge-hero-copy {
    flex: 1 1 56%;
    max-width: 800px;
    padding-top: 1rem;
    align-self: flex-start;
}

.hedge-hero-copy .eyebrow {
    width: fit-content;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(242, 212, 123, 0.36);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 40px rgba(242, 212, 123, 0.12);
}

.hedge-hero-copy h1 {
    font-size: 5rem;
    line-height: 0.94;
    letter-spacing: 0;
    text-shadow: 0 18px 70px rgba(0, 0, 0, 0.56);
}

.hedge-hero-copy .lede {
    margin-top: 1.35rem;
    font-size: 1.3rem;
    line-height: 1.52;
}

.hedge-hero-line,
.hedge-statement {
    border: 1px solid rgba(242, 212, 123, 0.42);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background:
        linear-gradient(135deg, rgba(242, 212, 123, 0.13), rgba(255, 255, 255, 0.05)),
        rgba(8, 7, 4, 0.22);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
}

.hedge-hero-visual {
    flex: 0 1 44%;
    min-height: 580px;
    display: grid;
    place-items: center;
    perspective: 1100px;
}

.hedge-hero-visual::before,
.hedge-hero-visual::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.hedge-hero-visual::before {
    inset: 7% 2% 5%;
    border: 1px solid rgba(242, 212, 123, 0.2);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 58%),
        rgba(255, 255, 255, 0.035);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 34px 90px rgba(0, 0, 0, 0.45);
    transform: rotateX(8deg) rotateY(-10deg);
    backdrop-filter: blur(12px);
}

.hedge-hero-visual::after {
    left: 8%;
    right: 8%;
    bottom: 8%;
    height: 34%;
    background: linear-gradient(180deg, rgba(242, 212, 123, 0.2), transparent 72%);
    clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
    filter: blur(18px);
    opacity: 0.46;
}

@media (min-width: 981px) {
    body.hedge-experience-page .hedge-hero-grid {
        display: block;
        min-height: 720px;
    }

    body.hedge-experience-page .hedge-hero-copy {
        position: absolute;
        top: 0;
        left: 0;
        width: min(57%, 780px);
    }

    body.hedge-experience-page .hedge-hero-visual {
        position: absolute;
        top: 0.35rem;
        right: 0;
        width: min(44%, 540px);
        min-height: 560px;
    }
}

.hedge-hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hedge-logo-glass {
    position: relative;
    z-index: 2;
    width: min(82%, 430px);
    padding: 0.7rem;
    border-color: rgba(242, 212, 123, 0.46);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(0, 0, 0, 0.68);
    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 0 48px rgba(242, 212, 123, 0.13);
    backdrop-filter: blur(24px);
}

.hedge-logo-glass img {
    filter: saturate(1.08) contrast(1.05);
}

.floating-chip {
    z-index: 3;
    border-color: rgba(242, 212, 123, 0.52);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
        rgba(8, 7, 4, 0.42);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.chip-one {
    top: 8%;
    left: 2%;
}

.chip-two {
    right: 0;
    top: 46%;
}

.chip-three {
    left: 7%;
    bottom: 7%;
}

.hedge-meaning {
    background:
        linear-gradient(180deg, #f8f3e8 0%, #ffffff 100%);
}

.hedge-meaning-grid,
.ai-human-grid,
.tool-grid,
.business-edge-grid,
.responsible-grid {
    position: relative;
}

.insight-board,
.split-glass,
.tool-panel,
.tool-list-card,
.principle-orbit-card,
.service-shape-card,
.comparison-card,
.responsible-card,
.hedge-final-inner,
.emotion-panel,
.edge-benefit-cloud,
.hedge-process-line li {
    transition:
        transform 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease,
        background 240ms ease;
}

.insight-board {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 243, 232, 0.72)),
        linear-gradient(45deg, rgba(242, 212, 123, 0.16), transparent);
    box-shadow: 0 28px 70px rgba(22, 19, 13, 0.14);
}

.insight-board div,
.split-glass div {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.56));
    backdrop-filter: blur(12px);
}

.hedge-why,
.ai-human-section,
.comparison-art,
.responsible-ai {
    background:
        linear-gradient(90deg, rgba(242, 212, 123, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.045) 1px, transparent 1px),
        radial-gradient(circle at 15% 20%, rgba(47, 111, 130, 0.16), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(242, 212, 123, 0.15), transparent 30%),
        linear-gradient(145deg, #050503 0%, #11100a 48%, #201707 100%);
    background-size: 80px 80px, 80px 80px, auto, auto, auto;
}

.hedge-why .container,
.ai-human-section .container,
.comparison-art .container,
.responsible-ai .container {
    position: relative;
}

.hedge-why .section-heading,
.comparison-art .section-heading {
    max-width: 880px;
}

.noise-grid {
    perspective: 1000px;
}

.noise-pill {
    display: flex;
    align-items: flex-end;
    min-height: 110px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        rgba(8, 7, 4, 0.38);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(16px);
}

.noise-pill:nth-child(2n) {
    border-color: rgba(72, 217, 255, 0.2);
}

.emotion-panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(242, 212, 123, 0.42);
    background:
        linear-gradient(135deg, rgba(242, 212, 123, 0.14), rgba(72, 217, 255, 0.06)),
        rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.28);
}

.emotion-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: translateX(-120%);
    animation: hedgeSignal 8s ease-in-out infinite;
}

.emotion-panel strong,
.edge-benefit-cloud span {
    border: 1px solid rgba(242, 212, 123, 0.35);
    background:
        linear-gradient(135deg, var(--color-gold-bright), #c89738);
    box-shadow: 0 14px 32px rgba(156, 116, 38, 0.2);
    font-weight: 900;
}

.ai-human-section {
    overflow: hidden;
}

.ai-human-grid {
    grid-template-columns: minmax(0, 0.76fr) minmax(320px, 0.7fr);
    align-items: center;
}

.split-glass {
    position: relative;
    z-index: 2;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(5, 5, 3, 0.62);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.split-glass div {
    border-color: rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
}

.hedge-equation-stage {
    grid-column: 1 / -1;
    position: relative;
    min-height: 360px;
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid rgba(242, 212, 123, 0.28);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(72, 217, 255, 0.035), rgba(242, 212, 123, 0.07)),
        rgba(0, 0, 0, 0.38);
    box-shadow:
        0 34px 88px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 0 80px rgba(242, 212, 123, 0.08);
    backdrop-filter: blur(18px);
    scroll-margin-top: 96px;
}

.hedge-equation-stage::before {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(242, 212, 123, 0.18);
    border-radius: 50%;
    transform: rotateX(68deg);
    filter: blur(0.2px);
}

.hedge-equation-stage::after {
    content: "";
    position: absolute;
    inset: auto 11% 16%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 212, 123, 0.84), transparent);
    box-shadow: 0 0 38px rgba(242, 212, 123, 0.34);
}

.hedge-equation-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hedge-equation {
    background:
        linear-gradient(135deg, var(--color-gold-bright), #c89738);
    box-shadow: 0 18px 52px rgba(156, 116, 38, 0.3);
}

.hedge-tool,
.principles-art,
.service-shape-section,
.business-edge {
    background:
        linear-gradient(180deg, rgba(248, 243, 232, 0.94), rgba(255, 255, 255, 1)),
        radial-gradient(circle at 76% 12%, rgba(15, 139, 141, 0.1), transparent 28%);
}

.tool-grid {
    align-items: stretch;
}

.tool-panel,
.tool-list-card,
.principle-orbit-card,
.service-shape-card,
.responsible-card,
.hedge-process-line li {
    position: relative;
    overflow: hidden;
}

.tool-panel::after,
.tool-list-card::after,
.principle-orbit-card::after,
.service-shape-card::after,
.comparison-card::after,
.responsible-card::after,
.hedge-process-line li::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 8%, rgba(255, 255, 255, 0.22), transparent 42%);
    transform: translateX(-130%);
    opacity: 0;
    transition: opacity 180ms ease;
}

.tool-panel:hover::after,
.tool-list-card:hover::after,
.principle-orbit-card:hover::after,
.service-shape-card:hover::after,
.comparison-card:hover::after,
.responsible-card:hover::after,
.hedge-process-line li:hover::after {
    opacity: 1;
    animation: hedgeSignal 1100ms ease both;
}

.tool-panel {
    background:
        linear-gradient(145deg, rgba(242, 212, 123, 0.13), rgba(72, 217, 255, 0.045)),
        var(--color-navy);
    box-shadow: 0 28px 76px rgba(8, 7, 4, 0.24);
}

.tool-list-card,
.principle-orbit-card,
.service-shape-card,
.hedge-process-line li {
    border-color: rgba(217, 200, 157, 0.72);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 243, 232, 0.78));
    box-shadow: 0 20px 54px rgba(22, 19, 13, 0.1);
}

.principle-orbit-grid,
.service-shape-grid,
.hedge-process-line {
    perspective: 1200px;
}

.principle-orbit-card:nth-child(3n),
.service-shape-card:nth-child(3n + 1) {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(234, 248, 248, 0.48));
}

.principle-orbit-card span,
.hedge-process-line li::before {
    background:
        linear-gradient(135deg, #050503, #1f1708);
    box-shadow: inset 0 0 0 1px rgba(242, 212, 123, 0.28);
}

.service-shape-card .card-icon {
    border: 1px solid rgba(242, 212, 123, 0.4);
    background:
        linear-gradient(135deg, #050503, #241a09);
    color: var(--color-gold-bright);
}

.comparison-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
        rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(16px);
}

.comparison-card.gold {
    border-color: rgba(242, 212, 123, 0.58);
    background:
        linear-gradient(145deg, rgba(242, 212, 123, 0.95), rgba(196, 142, 47, 0.9)),
        #f2d47b;
}

.hedge-process-art {
    background:
        linear-gradient(180deg, #ffffff, #f8f3e8);
}

.hedge-process-line li {
    min-height: 285px;
}

.business-edge-grid {
    align-items: center;
}

.edge-benefit-cloud {
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border: 1px solid rgba(217, 200, 157, 0.72);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(248, 243, 232, 0.66));
    box-shadow: 0 26px 64px rgba(22, 19, 13, 0.12);
}

.edge-benefit-cloud span:nth-child(3n) {
    background:
        linear-gradient(135deg, #0f8b8d, #2f6f82);
    color: #ffffff;
}

.responsible-card {
    box-shadow:
        0 30px 78px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hedge-faq-section {
    background:
        linear-gradient(180deg, #ffffff, #f8f3e8);
}

.hedge-faq-section details {
    border-color: rgba(217, 200, 157, 0.76);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 243, 232, 0.68));
    box-shadow: 0 14px 36px rgba(22, 19, 13, 0.08);
}

.hedge-final {
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(242, 212, 123, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.045) 1px, transparent 1px),
        radial-gradient(circle at 20% 22%, rgba(15, 139, 141, 0.18), transparent 33%),
        linear-gradient(125deg, rgba(8, 7, 4, 0.98), rgba(37, 27, 10, 0.96)),
        var(--color-navy);
    background-size: 84px 84px, 84px 84px, auto, auto, auto;
}

.hedge-final-inner {
    position: relative;
    overflow: hidden;
    max-width: 980px;
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.hedge-final-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(242, 212, 123, 0.14), transparent 36%, rgba(72, 217, 255, 0.08));
}

.hedge-final-inner > * {
    position: relative;
    z-index: 1;
}

@keyframes hedgeFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes hedgeSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes hedgeSweep {
    0%,
    100% {
        opacity: 0.42;
        transform: translateX(-8%);
    }

    50% {
        opacity: 0.72;
        transform: translateX(8%);
    }
}

@keyframes hedgeSignal {
    to {
        transform: translateX(130%);
    }
}

.hedge-feature {
    background: var(--color-ink);
    color: #eadfca;
}

.hedge-feature h2,
.hedge-feature h3 {
    color: #ffffff;
}

.hedge-grid,
.two-column,
.split-panel,
.contact-preview-grid,
.contact-layout,
.case-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.hedge-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(220px, 0.42fr) minmax(320px, 0.72fr);
    align-items: center;
}

.hedge-logo-showcase {
    overflow: hidden;
    border: 1px solid rgba(215, 179, 90, 0.34);
    border-radius: var(--radius);
    background: #000000;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.hedge-logo-showcase img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.hedge-logo-panel {
    display: grid;
    gap: 1rem;
}

.hedge-logo-panel picture {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000000;
}

.hedge-logo-panel img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.comparison-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(215, 179, 90, 0.28);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.06);
}

.comparison-panel ul,
.check-list,
.link-list,
.result-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comparison-panel li,
.check-list li,
.result-list li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0.45rem 0;
}

.equation {
    margin: 0;
    padding: 1rem;
    border-radius: var(--radius);
    background: var(--color-gold-bright);
    color: var(--color-navy);
    font-weight: 900;
}

.process-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(360px, 1fr);
    gap: 2rem;
}

.process-list,
.timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: process;
}

.process-list li,
.timeline li {
    position: relative;
    padding: 1rem 1rem 1rem 3.6rem;
    border-bottom: 1px solid var(--color-border);
    counter-increment: process;
}

.process-list li::before,
.timeline li::before {
    content: counter(process, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--color-navy);
    color: var(--color-gold-bright);
    font-weight: 900;
    font-size: 0.82rem;
}

.process-list span {
    display: block;
    color: var(--color-navy);
    font-weight: 900;
}

.process-list.compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.process-list.compact li {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.location-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.location-strip a,
.location-strip span,
.tag-list a,
.hub-filters a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-navy);
    font-weight: 800;
}

.location-strip span {
    cursor: default;
}

.location-strip.stacked {
    align-content: start;
}

.stat-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.stat-board div {
    padding: 1rem;
    border-radius: var(--radius);
    background: var(--color-soft);
}

.stat-board span {
    display: block;
    color: var(--color-coral);
    font-weight: 900;
    font-size: 0.8rem;
}

.stat-board strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-navy);
}

.team-card .avatar-placeholder {
    width: 72px;
    height: 72px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(215, 179, 90, 0.32), rgba(8, 7, 4, 0.18));
}

.service-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.service-sub-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    margin: 0.45rem 0 0.2rem;
}

.service-sub-menu a,
.service-sub-menu span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.28rem 0.52rem;
    border: 1px solid rgba(156, 116, 38, 0.2);
    border-radius: 999px;
    background: rgba(215, 179, 90, 0.1);
    color: var(--color-navy);
    font-size: 0.74rem;
    font-weight: 820;
    line-height: 1.2;
}

.service-sub-menu a:hover {
    border-color: rgba(156, 116, 38, 0.48);
    background: rgba(215, 179, 90, 0.22);
    color: #090806;
}

.service-sub-menu span {
    color: var(--color-text-muted);
}

.service-subservice-section {
    background:
        linear-gradient(90deg, rgba(156, 116, 38, 0.07) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156, 116, 38, 0.05) 1px, transparent 1px),
        #fffaf0;
    background-size: 72px 72px, 72px 72px, auto;
}

.service-subservice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.service-subservice-card {
    display: grid;
    gap: 0.5rem;
    min-height: 210px;
    padding: 1rem;
    border: 1px solid rgba(156, 116, 38, 0.22);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 243, 232, 0.84)),
        #ffffff;
    box-shadow: 0 18px 46px rgba(22, 19, 13, 0.08);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.service-subservice-card:hover {
    transform: translateY(-4px);
    border-color: var(--service-accent, var(--color-gold-deep));
    box-shadow: 0 24px 58px rgba(22, 19, 13, 0.12);
}

.service-subservice-card > span {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.25rem 0.52rem;
    border: 1px solid rgba(156, 116, 38, 0.22);
    border-radius: 999px;
    background: rgba(215, 179, 90, 0.13);
    color: var(--color-gold-deep);
    font-size: 0.68rem;
    font-weight: 920;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.service-subservice-card h3 {
    margin: 0;
    color: var(--color-navy);
    font-size: 1.25rem;
    line-height: 1.08;
}

.service-subservice-card p {
    margin: 0;
    color: var(--color-ink-soft);
}

.service-subservice-card small {
    align-self: end;
    color: var(--color-text-muted);
    font-weight: 820;
}

.service-scenario-grid {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.service-scenario-grid .mini-panel {
    background:
        linear-gradient(135deg, rgba(215, 179, 90, 0.12), rgba(255, 255, 255, 0.96)),
        var(--color-surface);
}

body.service-experience-page {
    background: #fbf7ee;
}

body.service-website-design,
body.service-branding {
    --service-accent: #d7b35a;
}

body.service-web-development,
body.service-google-business-profile-optimization {
    --service-accent: #2f6f82;
}

body.service-seo,
body.service-content-marketing {
    --service-accent: #9c7426;
}

body.service-local-seo,
body.service-social-media-optimization {
    --service-accent: #0f8b8d;
}

body.service-experience-page main {
    background:
        linear-gradient(90deg, rgba(156, 116, 38, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156, 116, 38, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, #fbf7ee 0%, #ffffff 44%, #f3ead8 100%);
    background-size: 88px 88px, 88px 88px, auto;
}

.service-experience-hero {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0;
    color: var(--color-ink);
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 243, 232, 0.96) 48%, rgba(215, 179, 90, 0.18) 100%),
        #fbf7ee;
    isolation: isolate;
}

.service-experience-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 100%;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(156, 116, 38, 0.1) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156, 116, 38, 0.08) 1px, transparent 1px),
        linear-gradient(135deg, transparent 0 42%, rgba(8, 7, 4, 0.06) 42% 43%, transparent 43% 100%);
    background-size: 88px 88px, 88px 88px, auto;
}

.service-experience-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(156, 116, 38, 0.82), transparent);
}

.service-experience-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(430px, 0.8fr);
    gap: 3.5rem;
    align-items: center;
}

.service-hero-copy h1 {
    max-width: 860px;
    margin: 0;
    color: var(--color-navy);
    font-size: 4.55rem;
    line-height: 0.95;
    letter-spacing: 0;
    text-wrap: balance;
}

.service-hero-copy .lede {
    max-width: 720px;
    color: var(--color-gold-deep);
    font-weight: 850;
}

.service-hero-copy > p:not(.eyebrow):not(.lede):not(.service-proof-note) {
    max-width: 720px;
    color: var(--color-ink-soft);
}

.service-proof-note {
    max-width: 640px;
    margin: 1rem 0 0;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(156, 116, 38, 0.28);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.74);
    color: var(--color-ink-soft);
    font-size: 0.92rem;
    font-weight: 750;
}

.service-marker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.45rem 0 0;
}

.service-marker {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0.42rem 0.75rem;
    color: var(--color-navy);
    font-weight: 900;
}

.service-marker.is-underlined::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.22rem;
    height: 8px;
    z-index: -1;
    background: rgba(215, 179, 90, 0.42);
}

.service-marker.is-circled::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 2px solid var(--service-accent, var(--color-coral));
    border-radius: 999px;
    transform: rotate(-2deg);
}

.service-visual-lab {
    position: relative;
    min-height: 540px;
    border: 1px solid rgba(156, 116, 38, 0.26);
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, rgba(242, 212, 123, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.06) 1px, transparent 1px),
        linear-gradient(135deg, #0b0905 0%, #161008 56%, #2a1f0b 100%);
    background-size: 54px 54px, 54px 54px, auto;
    box-shadow: 0 30px 80px rgba(22, 19, 13, 0.18);
    perspective: 1200px;
    transform-style: preserve-3d;
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--tilt-lift, 0));
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.service-lab-grid {
    position: absolute;
    inset: 1rem;
    border: 1px solid rgba(242, 212, 123, 0.16);
    border-radius: var(--radius);
    transform: translateZ(-40px);
}

.service-iso-cube {
    position: absolute;
    top: 18%;
    left: 50%;
    width: 174px;
    height: 174px;
    transform-style: preserve-3d;
    animation: serviceCubeTurn 16s linear infinite;
}

.service-cube-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    border: 1px solid rgba(242, 212, 123, 0.34);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
        rgba(8, 7, 4, 0.84);
    color: #ffffff;
    text-align: center;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.service-cube-front {
    transform: translateZ(87px);
}

.service-cube-back {
    transform: rotateY(180deg) translateZ(87px);
}

.service-cube-right {
    transform: rotateY(90deg) translateZ(87px);
}

.service-cube-left {
    transform: rotateY(-90deg) translateZ(87px);
}

.service-cube-top {
    transform: rotateX(90deg) translateZ(87px);
}

.service-cube-bottom {
    transform: rotateX(-90deg) translateZ(87px);
}

.service-cube-face span {
    color: var(--color-gold-bright);
    font-size: 0.82rem;
    text-transform: uppercase;
}

.service-cube-face strong {
    display: block;
    color: var(--color-gold-bright);
    font-size: 3rem;
    line-height: 1;
}

.service-floating-kpi,
.service-radar-card {
    position: absolute;
    border: 1px solid rgba(242, 212, 123, 0.32);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        rgba(8, 7, 4, 0.76);
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(14px);
}

.service-floating-kpi {
    width: 168px;
    padding: 0.9rem;
    animation: serviceFloat 5s ease-in-out infinite;
}

.service-floating-kpi span,
.service-radar-card span {
    display: block;
    color: #d8ceb8;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.service-floating-kpi strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-gold-bright);
    font-size: 2rem;
    line-height: 1;
}

.service-floating-kpi-1 {
    top: 7%;
    left: 7%;
}

.service-floating-kpi-2 {
    right: 6%;
    top: 18%;
    animation-delay: -1.2s;
}

.service-floating-kpi-3 {
    left: 7%;
    bottom: 10%;
    animation-delay: -2.1s;
}

.service-radar-card {
    right: 7%;
    bottom: 8%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    width: min(54%, 292px);
    padding: 0.85rem;
}

.service-radar-card div {
    min-height: 82px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(242, 212, 123, 0.18);
    border-radius: var(--radius-sm);
    text-align: center;
}

.service-radar-card strong {
    color: #ffffff;
    font-size: 1.4rem;
}

.service-impact-section {
    background: #ffffff;
}

.service-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.service-stat-card {
    min-height: 250px;
    padding: 1.25rem;
    border: 1px solid rgba(156, 116, 38, 0.28);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 243, 232, 0.82)),
        #ffffff;
    box-shadow: 0 18px 44px rgba(22, 19, 13, 0.08);
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--tilt-lift, 0));
    transform-style: preserve-3d;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.service-stat-card:hover {
    border-color: var(--service-accent, var(--color-coral));
    box-shadow: 0 24px 58px rgba(22, 19, 13, 0.14);
}

.service-stat-card span {
    display: block;
    color: var(--color-gold-deep);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.service-stat-card strong {
    display: block;
    margin: 2.3rem 0 0.7rem;
    color: var(--color-navy);
    font-size: 3.35rem;
    line-height: 1;
}

.service-chart-card {
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(420px, 1fr);
    gap: 2rem;
    align-items: center;
    margin-top: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(156, 116, 38, 0.28);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(8, 7, 4, 0.97), rgba(32, 23, 8, 0.94)),
        #080704;
    color: #ffffff;
    box-shadow: 0 24px 64px rgba(22, 19, 13, 0.18);
}

.service-chart-copy h3 {
    margin: 0;
    color: #ffffff;
    font-size: 2rem;
    line-height: 1;
}

.service-chart-copy p:not(.eyebrow) {
    color: #d8ceb8;
}

.service-chart-bars {
    display: grid;
    gap: 0.85rem;
}

.service-chart-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.35fr) minmax(180px, 1fr) 54px;
    gap: 0.75rem;
    align-items: center;
    color: #ffffff;
    font-weight: 850;
}

.service-chart-row > span {
    color: #f7efd9;
}

.service-chart-row > strong {
    color: var(--color-gold-bright);
    text-align: right;
}

.service-chart-track {
    overflow: hidden;
    height: 14px;
    border: 1px solid rgba(242, 212, 123, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.service-chart-track i {
    display: block;
    width: var(--value);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--service-accent, var(--color-coral)), var(--color-gold-bright));
    transform: scaleX(0.08);
    transform-origin: left center;
    transition: transform 950ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.service-chart-card.is-visible .service-chart-track i {
    transform: scaleX(1);
}

.service-after-section {
    scroll-margin-top: 96px;
    background:
        linear-gradient(180deg, rgba(250, 246, 236, 0.98), rgba(255, 255, 255, 0.96)),
        #fbf7ee;
}

.service-after-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1fr);
    gap: 1.25rem;
    align-items: stretch;
    margin-top: 2rem;
}

.service-after-metrics {
    display: grid;
    gap: 1rem;
}

.service-after-card {
    padding: 1.1rem;
    border: 1px solid rgba(156, 116, 38, 0.24);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 243, 232, 0.86)),
        #ffffff;
    box-shadow: 0 18px 46px rgba(22, 19, 13, 0.08);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.service-after-card:hover {
    transform: translateY(-4px);
    border-color: var(--service-accent, var(--color-coral));
    box-shadow: 0 24px 58px rgba(22, 19, 13, 0.12);
}

.service-after-card-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.95rem;
}

.service-after-card-head h3 {
    max-width: 28rem;
    margin: 0;
    color: var(--color-navy);
    font-size: 1.08rem;
    line-height: 1.2;
}

.service-after-card-head span {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    min-width: 74px;
    min-height: 42px;
    padding: 0.25rem 0.65rem;
    border: 2px solid var(--service-accent, var(--color-gold-bright));
    border-radius: 999px;
    color: var(--color-gold-deep);
    font-size: 1.05rem;
    font-weight: 950;
    box-shadow: inset 0 0 0 5px rgba(215, 179, 90, 0.13);
}

.service-before-after {
    display: grid;
    gap: 0.65rem;
}

.service-before-after div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 54px;
    gap: 0.7rem;
    align-items: center;
}

.service-before-after span {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 850;
    text-transform: uppercase;
}

.service-before-after strong {
    color: var(--color-navy);
    font-size: 0.95rem;
    text-align: right;
}

.service-before-after i {
    display: block;
    height: 13px;
    border-radius: 999px;
    transform: scaleX(0.08);
    transform-origin: left center;
    transition: transform 920ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.service-before-after div:first-child i {
    width: var(--before);
    background: linear-gradient(90deg, rgba(33, 33, 33, 0.25), rgba(156, 116, 38, 0.46));
}

.service-before-after div:last-child i {
    width: var(--after);
    background: linear-gradient(90deg, var(--service-accent, var(--color-gold-deep)), var(--color-gold-bright));
    box-shadow: 0 7px 20px rgba(156, 116, 38, 0.24);
}

.service-after-card.is-visible .service-before-after i {
    transform: scaleX(1);
}

.service-after-card > p {
    margin: 0.85rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.service-after-graph {
    scroll-margin-top: 96px;
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1.2rem;
    padding: 1.25rem;
    border: 1px solid rgba(242, 212, 123, 0.26);
    border-radius: var(--radius);
    background:
        linear-gradient(150deg, rgba(8, 7, 4, 0.98), rgba(28, 22, 10, 0.94)),
        #080704;
    color: #ffffff;
    box-shadow: 0 26px 70px rgba(22, 19, 13, 0.2);
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--tilt-lift, 0));
    transform-style: preserve-3d;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.service-after-graph:hover {
    border-color: var(--service-accent, var(--color-gold-bright));
    box-shadow: 0 32px 82px rgba(22, 19, 13, 0.28);
}

.service-after-graph-copy h3 {
    margin: 0;
    color: #ffffff;
    font-size: 2rem;
    line-height: 1.05;
}

.service-after-graph-copy p:not(.eyebrow),
.service-graph-note {
    color: #d8ceb8;
}

.service-graph-bars {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 0.9rem;
    min-height: 300px;
    padding: 1rem 0.4rem 0;
    border-bottom: 1px solid rgba(242, 212, 123, 0.24);
}

.service-graph-bars::before {
    content: "";
    position: absolute;
    inset: 1rem 0.4rem 2.2rem;
    background: repeating-linear-gradient(
        to top,
        rgba(242, 212, 123, 0.1) 0,
        rgba(242, 212, 123, 0.1) 1px,
        transparent 1px,
        transparent 58px
    );
    pointer-events: none;
}

.service-graph-column {
    position: relative;
    z-index: 1;
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.5rem;
    align-items: end;
    justify-items: center;
    text-align: center;
}

.service-graph-column strong {
    color: var(--color-gold-bright);
    font-size: 1.1rem;
    line-height: 1;
}

.service-graph-column i {
    width: min(64px, 68%);
    height: var(--value);
    min-height: 16px;
    border-radius: 999px 999px 0 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0) 28%),
        linear-gradient(180deg, var(--color-gold-bright), var(--service-accent, var(--color-gold-deep)));
    box-shadow: 0 14px 34px rgba(215, 179, 90, 0.24);
    transform: scaleY(0.08);
    transform-origin: bottom center;
    transition: transform 1000ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.service-graph-column span {
    width: 100%;
    color: #f7efd9;
    font-size: 0.8rem;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
}

.service-after-graph.is-visible .service-graph-column i {
    transform: scaleY(1);
}

.service-graph-note {
    margin: 0;
    font-size: 0.92rem;
}

body.service-experience-page .section {
    position: relative;
}

body.service-experience-page .section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(calc(100% - 2rem), var(--container));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(156, 116, 38, 0.58), rgba(156, 116, 38, 0.08), transparent);
    pointer-events: none;
}

body.service-experience-page .principle-card,
body.service-experience-page .card,
body.service-experience-page .mini-panel,
body.service-experience-page .compare-table,
body.service-experience-page .process-list.compact li,
body.service-experience-page .faq-list details {
    border-color: rgba(156, 116, 38, 0.28);
    box-shadow: 0 18px 42px rgba(22, 19, 13, 0.08);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

body.service-experience-page .principle-card:hover,
body.service-experience-page .card:hover,
body.service-experience-page .mini-panel:hover,
body.service-experience-page .process-list.compact li:hover,
body.service-experience-page .faq-list details:hover {
    transform: translateY(-5px);
    border-color: var(--service-accent, var(--color-coral));
    box-shadow: 0 24px 56px rgba(22, 19, 13, 0.12);
}

body.service-experience-page .check-list .icon {
    color: var(--service-accent, var(--color-gold-deep));
}

.service-momentum-section {
    background:
        linear-gradient(135deg, rgba(242, 212, 123, 0.16), rgba(255, 255, 255, 0.88)),
        #f8f3e8;
}

.service-momentum-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.service-momentum-card {
    min-height: 260px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.65rem;
    padding: 1.25rem;
    border: 1px solid rgba(156, 116, 38, 0.28);
    border-radius: var(--radius);
    background: #ffffff;
    text-align: center;
    box-shadow: 0 18px 42px rgba(22, 19, 13, 0.08);
}

.service-momentum-ring {
    width: 118px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--service-accent, var(--color-coral)) var(--value), rgba(156, 116, 38, 0.14) 0);
}

.service-momentum-ring span {
    width: 76px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffffff;
}

.service-momentum-card strong {
    color: var(--color-navy);
    font-size: 2rem;
    line-height: 1;
}

.service-momentum-card p {
    margin: 0;
    color: var(--color-gold-deep);
    font-weight: 900;
    text-transform: uppercase;
}

@keyframes serviceCubeTurn {
    0% {
        transform: translateX(-50%) rotateX(-16deg) rotateY(0deg);
    }

    100% {
        transform: translateX(-50%) rotateX(-16deg) rotateY(360deg);
    }
}

@keyframes serviceFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

body.location-experience-page main,
body.service-location-page main {
    overflow: clip;
    background:
        linear-gradient(90deg, rgba(156, 116, 38, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156, 116, 38, 0.07) 1px, transparent 1px),
        linear-gradient(180deg, #fffaf0, #ffffff 48%, #f8f3e8);
    background-size: 88px 88px, 88px 88px, auto;
}

.location-hero,
.service-location-hero {
    position: relative;
    padding: 4.8rem 0;
}

.location-hero::after,
.service-location-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(calc(100% - 2rem), var(--container));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(156, 116, 38, 0.58), rgba(156, 116, 38, 0.08), transparent);
}

.location-hero-grid,
.service-location-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
    gap: 3rem;
    align-items: center;
}

.location-hero h1,
.service-location-hero h1 {
    max-width: 11ch;
    margin: 0;
    color: #080704;
    font-size: 4.9rem;
    line-height: 0.94;
    letter-spacing: 0;
}

.location-hero .lede,
.service-location-hero .lede {
    max-width: 790px;
    color: var(--color-gold-deep);
    font-size: 1.25rem;
    font-weight: 850;
}

.location-dashboard,
.service-location-dashboard {
    min-height: 520px;
    display: grid;
    align-content: space-between;
    gap: 1.1rem;
    padding: 1.15rem;
    border: 1px solid rgba(156, 116, 38, 0.28);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(8, 7, 4, 0.96), rgba(35, 25, 8, 0.92)),
        #080704;
    color: #ffffff;
    box-shadow: 0 30px 84px rgba(22, 19, 13, 0.2);
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--tilt-lift, 0));
    transform-style: preserve-3d;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.location-dashboard:hover,
.service-location-dashboard:hover {
    border-color: var(--service-accent, var(--color-gold-bright));
    box-shadow: 0 36px 90px rgba(22, 19, 13, 0.28);
}

.location-dashboard-map {
    position: relative;
    min-height: 260px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(242, 212, 123, 0.2);
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, rgba(242, 212, 123, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.05) 1px, transparent 1px),
        rgba(255, 255, 255, 0.04);
    background-size: 46px 46px;
}

.location-dashboard-map span {
    width: 170px;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(242, 212, 123, 0.46);
    border-radius: 50%;
    background:
        linear-gradient(145deg, rgba(242, 212, 123, 0.98), rgba(156, 116, 38, 0.9)),
        var(--color-gold-bright);
    color: #080704;
    font-size: 1.2rem;
    font-weight: 950;
    text-align: center;
    box-shadow: 0 18px 46px rgba(242, 212, 123, 0.16);
}

.location-dashboard-map i {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 4px solid #080704;
    border-radius: 50%;
    background: var(--color-teal);
    box-shadow: 0 0 0 7px rgba(15, 139, 141, 0.16);
}

.location-dashboard-map i:nth-of-type(1) {
    top: 16%;
    left: 18%;
}

.location-dashboard-map i:nth-of-type(2) {
    top: 44%;
    right: 16%;
}

.location-dashboard-map i:nth-of-type(3) {
    left: 23%;
    bottom: 18%;
}

.location-dashboard-bars {
    display: grid;
    gap: 0.85rem;
}

.location-dashboard-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.4fr) minmax(0, 1fr) 52px;
    gap: 0.65rem;
    align-items: center;
}

.location-dashboard-row span {
    color: #f7efd9;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.location-dashboard-row b {
    overflow: hidden;
    height: 13px;
    border: 1px solid rgba(242, 212, 123, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.location-dashboard-row i {
    display: block;
    width: var(--value);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-gold-deep), var(--color-gold-bright));
    transform: scaleX(0.08);
    transform-origin: left center;
    transition: transform 950ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.location-dashboard.is-visible .location-dashboard-row i {
    transform: scaleX(1);
}

.location-dashboard-row strong {
    color: var(--color-gold-bright);
    text-align: right;
}

.location-services-section {
    background: linear-gradient(180deg, #f8f3e8, #ffffff);
}

.location-service-grid,
.service-location-link-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1.5rem;
}

.location-service-card,
.service-location-link-grid a {
    min-height: 170px;
    display: grid;
    align-content: space-between;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid rgba(156, 116, 38, 0.26);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 243, 232, 0.78)),
        #ffffff;
    box-shadow: 0 18px 44px rgba(22, 19, 13, 0.08);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.location-service-card:hover,
.service-location-link-grid a:hover,
.service-location-link-grid a[aria-current="page"] {
    transform: translateY(-5px);
    border-color: var(--service-accent, var(--color-gold-deep));
    color: var(--color-ink);
    box-shadow: 0 26px 64px rgba(22, 19, 13, 0.13);
}

.location-service-card > span,
.service-location-link-grid a > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: #080704;
    color: var(--color-gold-bright);
}

.location-service-card .icon,
.service-location-link-grid .icon {
    width: 24px;
    height: 24px;
}

.location-service-card strong,
.service-location-link-grid strong {
    display: block;
    color: #080704;
    font-size: 1.05rem;
    line-height: 1.15;
}

.location-service-card small,
.service-location-link-grid small {
    color: var(--color-gold-deep);
    font-weight: 850;
    text-transform: uppercase;
}

.location-proof-grid,
.service-location-story {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(340px, 0.72fr);
    gap: 2rem;
    align-items: start;
}

.location-proof-panels {
    display: grid;
    gap: 1rem;
}

.service-location-score {
    padding: 1rem;
    border: 1px solid rgba(242, 212, 123, 0.22);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.055);
}

.service-location-score span {
    color: var(--color-gold-bright);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.service-location-score strong {
    display: block;
    margin-top: 0.7rem;
    color: #ffffff;
    font-size: 4.2rem;
    line-height: 1;
}

.service-location-score p {
    color: #d8ceb8;
}

.service-location-mini-graph {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    min-height: 250px;
    align-items: end;
    padding: 0.9rem 0 0;
    border-bottom: 1px solid rgba(242, 212, 123, 0.28);
}

.service-location-mini-graph div {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: 0.45rem;
    align-items: end;
    justify-items: center;
    min-width: 0;
}

.service-location-mini-graph i {
    width: min(58px, 72%);
    height: var(--value);
    min-height: 18px;
    border-radius: 999px 999px 0 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 30%),
        linear-gradient(180deg, var(--color-gold-bright), var(--service-accent, var(--color-gold-deep)));
    box-shadow: 0 14px 34px rgba(242, 212, 123, 0.18);
    transform: scaleY(0.08);
    transform-origin: bottom center;
    transition: transform 950ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.service-location-dashboard.is-visible .service-location-mini-graph i {
    transform: scaleY(1);
}

.service-location-mini-graph strong {
    color: var(--color-gold-bright);
    font-size: 0.94rem;
}

.service-location-mini-graph span {
    color: #f7efd9;
    font-size: 0.72rem;
    font-weight: 850;
    text-align: center;
    text-transform: uppercase;
}

.service-location-impact {
    background: #ffffff;
}

.service-location-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.service-location-metric,
.service-location-signal-card {
    padding: 1rem;
    border: 1px solid rgba(156, 116, 38, 0.24);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 243, 232, 0.82)),
        #ffffff;
    box-shadow: 0 18px 44px rgba(22, 19, 13, 0.08);
}

.service-location-metric > div {
    display: flex;
    justify-content: space-between;
    gap: 0.9rem;
    align-items: flex-start;
}

.service-location-metric h3 {
    margin: 0;
    color: #080704;
    font-size: 1.08rem;
}

.service-location-metric > div span {
    flex: 0 0 auto;
    padding: 0.2rem 0.55rem;
    border: 2px solid var(--service-accent, var(--color-gold-bright));
    border-radius: 999px;
    color: var(--color-gold-deep);
    font-weight: 950;
}

.service-location-metric dl {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 0.55rem 0.7rem;
    margin: 1rem 0 0;
}

.service-location-metric dt {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.service-location-metric dd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 0.55rem;
    align-items: center;
    margin: 0;
}

.service-location-metric dd i {
    display: block;
    height: 13px;
    border-radius: 999px;
    transform: scaleX(0.08);
    transform-origin: left center;
    transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.service-location-metric dd:nth-of-type(1) i {
    width: var(--before);
    background: linear-gradient(90deg, rgba(33, 33, 33, 0.24), rgba(156, 116, 38, 0.42));
}

.service-location-metric dd:nth-of-type(2) i {
    width: var(--after);
    background: linear-gradient(90deg, var(--service-accent, var(--color-gold-deep)), var(--color-gold-bright));
}

.service-location-metric.is-visible dd i {
    transform: scaleX(1);
}

.service-location-signal-card {
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--tilt-lift, 0));
    transform-style: preserve-3d;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.service-location-signal-card:hover {
    border-color: var(--service-accent, var(--color-gold-deep));
    box-shadow: 0 26px 64px rgba(22, 19, 13, 0.13);
}

.link-list li + li {
    margin-top: 0.55rem;
}

.link-list a {
    color: var(--color-blue);
    font-weight: 800;
}

.compare-table {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.compare-table [role="row"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compare-table [role="columnheader"],
.compare-table [role="cell"] {
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.compare-table [role="columnheader"] {
    background: var(--color-navy);
    color: var(--color-gold-bright);
    font-weight: 900;
}

.compare-table [role="cell"]:nth-child(2) {
    background: rgba(15, 139, 141, 0.08);
}

.timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
}

.timeline li {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.blog-card {
    overflow: hidden;
    padding: 0;
}

.blog-card-image img {
    width: 100%;
    aspect-ratio: 7 / 4;
    object-fit: cover;
    background: #0d0b07;
}

.blog-card-image picture,
.article-content picture {
    display: block;
}

.blog-card-body {
    padding: 1.1rem;
}

.blog-card h3 a {
    color: var(--color-navy);
}

.hub-filters,
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
    padding: 0;
    list-style: none;
}

.article-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 760px);
    gap: 2rem;
    padding-block: var(--space-3xl);
}

.article-aside {
    position: sticky;
    top: 110px;
    align-self: start;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.article-content {
    font-size: 1.05rem;
}

.article-content img {
    width: 100%;
    aspect-ratio: 7 / 4;
    object-fit: cover;
    margin-bottom: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.article-content a {
    color: var(--color-blue);
    font-weight: 800;
}

.article-faqs {
    margin-top: 2rem;
}

.testimonial-card blockquote {
    margin: 0 0 1rem;
    color: var(--color-navy);
    font-size: 1.2rem;
    font-weight: 700;
}

.case-summary dl {
    margin: 0;
}

.case-summary dt {
    color: var(--color-coral);
    font-weight: 900;
}

.case-summary dd {
    margin: 0 0 1rem;
}

.cta-band {
    padding: var(--space-3xl) 0;
    background: var(--color-navy);
    color: #eadfca;
}

.cta-band-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
}

.cta-band h2 {
    color: #ffffff;
}

.site-action-widget {
    position: fixed;
    right: max(1rem, calc((100vw - var(--container)) / 2 - 5.25rem));
    bottom: 1.15rem;
    z-index: 820;
    display: grid;
    justify-items: center;
    width: 132px;
    min-height: 268px;
    padding: 0.9rem 0.72rem 0.78rem;
    border: 1px solid rgba(242, 212, 123, 0.42);
    border-radius: 74px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        rgba(8, 7, 4, 0.88);
    box-shadow:
        0 26px 70px rgba(8, 7, 4, 0.28),
        inset 0 0 0 6px rgba(242, 212, 123, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px) scale(0.97);
    transition: opacity var(--transition), transform var(--transition);
}

.site-action-widget.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.site-action-widget::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(242, 212, 123, 0.16);
    border-radius: inherit;
    pointer-events: none;
}

.site-action-widget a {
    position: relative;
    z-index: 1;
    text-align: center;
    text-transform: uppercase;
}

.site-action-widget-top {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.62rem;
    width: 100%;
    min-height: 126px;
    color: #f7efd9;
    font-size: 1.02rem;
    font-weight: 950;
    line-height: 1.16;
    transition: color var(--transition), transform var(--transition);
}

.site-action-widget-top:hover {
    color: var(--color-gold-bright);
    transform: translateY(-3px);
}

.site-action-arrow {
    position: relative;
    width: 42px;
    height: 54px;
}

.site-action-arrow::before,
.site-action-arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.site-action-arrow::before {
    top: 8px;
    width: 2px;
    height: 42px;
    background: currentColor;
}

.site-action-arrow::after {
    top: 7px;
    width: 30px;
    height: 30px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: translateX(-50%) rotate(45deg);
}

.site-action-widget-talk {
    display: grid;
    place-items: center;
    width: 106px;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(242, 212, 123, 0.52);
    border-radius: 50%;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(242, 212, 123, 0.78)),
        var(--color-gold-bright);
    color: #080704;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.15;
    box-shadow:
        0 18px 44px rgba(8, 7, 4, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.56);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.site-action-widget-talk:hover {
    transform: translateY(-4px) scale(1.02);
    background:
        linear-gradient(145deg, var(--color-gold-bright), #d7b35a),
        var(--color-gold-bright);
    color: #080704;
    box-shadow:
        0 24px 54px rgba(8, 7, 4, 0.34),
        0 0 0 6px rgba(242, 212, 123, 0.12);
}

.site-action-widget-talk i {
    position: absolute;
    top: 9%;
    right: 2%;
    width: 24px;
    height: 24px;
    border: 4px solid rgba(8, 7, 4, 0.9);
    border-radius: 50%;
    background: var(--color-teal);
    box-shadow: 0 0 0 5px rgba(15, 139, 141, 0.16);
}

body.contact-experience-page {
    background: #050503;
}

body.contact-experience-page .breadcrumbs {
    display: none;
}

body.contact-experience-page main {
    overflow: clip;
    background:
        linear-gradient(90deg, rgba(242, 212, 123, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.045) 1px, transparent 1px),
        radial-gradient(circle at 18% 18%, rgba(242, 212, 123, 0.14), transparent 28%),
        radial-gradient(circle at 78% 38%, rgba(15, 139, 141, 0.12), transparent 32%),
        linear-gradient(132deg, #050503 0%, #11100a 48%, #231807 100%);
    background-size: 92px 92px, 92px 92px, auto, auto, auto;
}

body.contact-experience-page .reveal {
    opacity: 1;
    transform: none;
}

.contact-hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 3.5rem;
    color: var(--color-ink);
    background:
        linear-gradient(90deg, rgba(156, 116, 38, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156, 116, 38, 0.07) 1px, transparent 1px),
        linear-gradient(135deg, #ffffff 0%, #f8f3e8 58%, #efe2c3 100%);
    background-size: 86px 86px, 86px 86px, auto;
}

.contact-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 212, 123, 0.72), transparent);
}

.contact-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.5fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}

.contact-hero-copy {
    max-width: 900px;
}

.contact-path {
    margin: 0 0 1.6rem;
    color: var(--color-gold-deep);
    font-size: 2.1rem;
    line-height: 1;
}

.contact-hero h1 {
    max-width: 12ch;
    margin: 0;
    color: #080704;
    font-size: 6.2rem;
    line-height: 0.92;
    font-weight: 820;
    text-wrap: balance;
}

.contact-hero-copy p:not(.contact-path) {
    max-width: 770px;
    margin: 1.25rem 0 0;
    color: var(--color-ink-soft);
    font-size: 1.15rem;
}

.contact-hero-side {
    display: grid;
    gap: 1rem;
    align-self: stretch;
}

.contact-hero-image {
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: 320px;
    padding: 1rem;
    border: 1px solid rgba(156, 116, 38, 0.22);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 243, 232, 0.72)),
        #ffffff;
    box-shadow: 0 26px 66px rgba(22, 19, 13, 0.14);
}

.contact-hero-image img {
    width: min(100%, 360px);
    max-height: 360px;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(22, 19, 13, 0.08));
}

.contact-direct {
    display: grid;
    gap: 0.6rem;
    justify-items: stretch;
    padding: 1rem;
    border: 1px solid rgba(242, 212, 123, 0.34);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, #080704, #211706),
        #080704;
    color: #ffffff;
    font-size: 1.24rem;
    line-height: 1.2;
    box-shadow: 0 18px 44px rgba(22, 19, 13, 0.18);
}

.contact-direct a {
    overflow-wrap: anywhere;
    color: #ffffff;
    transition: color var(--transition), transform var(--transition);
}

.contact-direct a:hover {
    color: var(--color-gold-bright);
    transform: translateX(-4px);
}

.contact-studio {
    padding: 0 0 clamp(4rem, 8vw, 7rem);
    color: #eadfca;
}

.contact-studio-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.62fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
}

.contact-form-intro {
    grid-column: 1 / -1;
    max-width: 820px;
    margin-bottom: 0.4rem;
}

.contact-form-intro h2 {
    color: #ffffff;
}

.contact-form-intro .eyebrow {
    color: var(--color-gold-bright);
}

.contact-form-intro p {
    color: #d8ceb8;
}

.contact-studio-form {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.contact-studio-form .form-grid {
    gap: 1.05rem;
}

.contact-studio-form .field {
    margin-bottom: 1.05rem;
}

.contact-studio-form label {
    margin-bottom: 0.48rem;
    color: rgba(242, 212, 123, 0.82);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
}

.contact-studio-form input,
.contact-studio-form select,
.contact-studio-form textarea {
    min-height: 64px;
    border: 1px solid rgba(242, 212, 123, 0.38);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(5, 5, 3, 0.52);
    color: #ffffff;
    padding: 1rem 1.1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.contact-studio-form textarea {
    min-height: 180px;
}

.contact-studio-form input::placeholder,
.contact-studio-form textarea::placeholder {
    color: rgba(234, 223, 202, 0.42);
}

.contact-studio-form select {
    color: rgba(255, 255, 255, 0.92);
}

.contact-studio-form input:focus,
.contact-studio-form select:focus,
.contact-studio-form textarea:focus {
    border-color: var(--color-gold-bright);
    background:
        linear-gradient(135deg, rgba(242, 212, 123, 0.09), rgba(255, 255, 255, 0.025)),
        rgba(5, 5, 3, 0.68);
    box-shadow:
        0 0 0 3px rgba(242, 212, 123, 0.12),
        0 18px 54px rgba(0, 0, 0, 0.24);
    outline: none;
}

.contact-studio-form .consent {
    align-items: flex-start;
    color: #d8ceb8;
}

.contact-studio-form .consent input {
    accent-color: var(--color-gold-bright);
}

.contact-studio-form .button {
    min-width: min(100%, 260px);
    min-height: 58px;
    margin-top: 0.3rem;
    justify-content: center;
    box-shadow: 0 24px 58px rgba(156, 116, 38, 0.2);
}

.contact-studio-form .form-status {
    border: 1px solid rgba(242, 212, 123, 0.34);
}

.contact-studio-form .form-status.success {
    background: rgba(15, 139, 141, 0.16);
    color: #eaffff;
}

.contact-studio-form .form-status.error {
    background: rgba(185, 65, 48, 0.16);
    color: #ffe2dc;
}

.contact-card-stack {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 104px;
}

.contact-detail-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    min-height: 158px;
    padding: clamp(1rem, 2.2vw, 1.4rem);
    border: 1px solid rgba(242, 212, 123, 0.26);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.04);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
}

.contact-detail-card.subtle {
    align-items: start;
}

.contact-detail-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #ffffff;
    color: #080704;
}

.contact-detail-icon .icon {
    width: 31px;
    height: 31px;
}

.contact-detail-card span {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--color-gold-bright);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.contact-detail-card a,
.contact-detail-card address,
.contact-detail-card p {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1rem, 1.7vw, 1.28rem);
    line-height: 1.45;
    font-style: normal;
}

.contact-detail-card.subtle p {
    color: #d8ceb8;
    font-size: 1rem;
}

.contact-detail-card a:hover {
    color: var(--color-gold-bright);
}

.contact-preview address,
.contact-address {
    font-style: normal;
    padding: 1.25rem;
    border-left: 4px solid var(--color-coral);
    background: var(--color-soft);
}

.contact-form,
.legal-content .container {
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.field {
    margin-bottom: 1rem;
}

.field label,
.contact-form label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-navy);
    font-weight: 800;
}

input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--color-ink);
    padding: 0.7rem 0.8rem;
}

textarea {
    resize: vertical;
}

.consent {
    display: flex !important;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 1rem 0;
}

.consent input {
    width: 20px;
    min-height: 20px;
    margin-top: 0.25rem;
}

.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-status {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
}

.form-status.success {
    background: rgba(15, 139, 141, 0.12);
    color: #075f61;
}

.form-status.error {
    background: rgba(230, 95, 79, 0.12);
    color: #9a2f24;
}

.field-error {
    border-color: var(--color-coral);
    box-shadow: 0 0 0 3px rgba(230, 95, 79, 0.12);
}

body.contact-experience-page .contact-studio-form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.contact-experience-page .contact-studio-form label {
    margin-bottom: 0.48rem;
    color: rgba(242, 212, 123, 0.82);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
}

body.contact-experience-page .contact-studio-form input,
body.contact-experience-page .contact-studio-form select,
body.contact-experience-page .contact-studio-form textarea {
    min-height: 64px;
    border: 1px solid rgba(242, 212, 123, 0.38);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(5, 5, 3, 0.52);
    color: #ffffff;
    padding: 1rem 1.1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.contact-experience-page .contact-studio-form textarea {
    min-height: 180px;
}

body.contact-experience-page .contact-studio-form input::placeholder,
body.contact-experience-page .contact-studio-form textarea::placeholder {
    color: rgba(234, 223, 202, 0.42);
}

body.contact-experience-page .contact-studio-form input:focus,
body.contact-experience-page .contact-studio-form select:focus,
body.contact-experience-page .contact-studio-form textarea:focus {
    border-color: var(--color-gold-bright);
    background:
        linear-gradient(135deg, rgba(242, 212, 123, 0.09), rgba(255, 255, 255, 0.025)),
        rgba(5, 5, 3, 0.68);
    box-shadow:
        0 0 0 3px rgba(242, 212, 123, 0.12),
        0 18px 54px rgba(0, 0, 0, 0.24);
    outline: none;
}

body.contact-experience-page .contact-studio-form .consent {
    color: #d8ceb8;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.35;
    text-transform: none;
}

.faq-list details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.faq-list details + details {
    margin-top: 0.75rem;
}

.faq-list summary {
    cursor: pointer;
    padding: 1rem;
    color: var(--color-navy);
    font-weight: 900;
}

.faq-list details p {
    padding: 0 1rem 1rem;
}

.goodfaith-ecosystem.ecosystem-simple,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple {
    --ecosystem-active-accent: var(--color-gold-bright);
    color: #17130b;
    background:
        linear-gradient(90deg, rgba(156, 116, 38, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156, 116, 38, 0.06) 1px, transparent 1px),
        radial-gradient(circle at var(--ecosystem-cursor-x) var(--ecosystem-cursor-y), color-mix(in srgb, var(--ecosystem-active-accent) 18%, transparent), transparent 24%),
        linear-gradient(145deg, #fffaf0 0%, #f4ead2 48%, #fffdf7 100%);
    background-size: 96px 96px, 96px 96px, auto, auto;
}

.goodfaith-ecosystem.ecosystem-simple::before {
    background:
        radial-gradient(circle at 18% 20%, rgba(242, 212, 123, 0.26), transparent 26%),
        radial-gradient(circle at 84% 64%, rgba(72, 217, 255, 0.1), transparent 22%);
    opacity: 1;
}

.goodfaith-ecosystem.ecosystem-simple::after {
    opacity: 0.12;
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 78%, transparent);
}

.ecosystem-simple .ecosystem-depth-layer.layer-one {
    background:
        linear-gradient(115deg, transparent 0 26%, rgba(242, 212, 123, 0.16) 34%, transparent 44%),
        linear-gradient(24deg, transparent 0 62%, rgba(0, 0, 0, 0.06) 70%, transparent 82%);
}

.ecosystem-simple .ecosystem-depth-layer.layer-two {
    opacity: 0.28;
}

.ecosystem-simple .ecosystem-title-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.74fr);
    align-items: center;
}

.ecosystem-simple .ecosystem-kicker,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple .ecosystem-kicker,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple .eyebrow {
    color: #9b7328;
}

.ecosystem-simple .ecosystem-heading h2,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple h2 {
    max-width: 880px;
    color: #100d07;
    font-size: clamp(3.1rem, 7vw, 6.8rem);
    line-height: 0.9;
}

.ecosystem-simple .ecosystem-intro-copy,
.ecosystem-simple .ecosystem-intro-copy p,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple .ecosystem-intro-copy,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple p {
    color: #514838;
}

.ecosystem-simple .ecosystem-experience {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    align-items: stretch;
    margin-top: clamp(2rem, 4vw, 3.2rem);
}

.ecosystem-simple .ecosystem-visual-wrap {
    min-height: clamp(520px, 66vh, 650px);
    border-color: rgba(156, 116, 38, 0.34);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 42%, rgba(242, 212, 123, 0.2), transparent 26%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        #080704;
    box-shadow:
        0 34px 90px rgba(44, 35, 14, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.ecosystem-simple .ecosystem-visual-wrap::before {
    inset: 12% 22% auto;
    height: 30%;
    opacity: 0.48;
}

.ecosystem-simple .ecosystem-core-caption {
    max-width: 210px;
    border-color: rgba(242, 212, 123, 0.26);
    background: rgba(8, 7, 4, 0.68);
}

.ecosystem-simple .ecosystem-core-caption span {
    color: var(--ecosystem-active-accent);
}

.ecosystem-simple .ecosystem-core-caption strong {
    color: #ffffff;
}

.ecosystem-simple .ecosystem-core-caption p {
    margin: 0.1rem 0 0;
    color: #e4d8bd;
    font-size: 0.82rem;
    line-height: 1.25;
}

.ecosystem-simple .ecosystem-control-panel,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple .ecosystem-control-panel {
    gap: 1.05rem;
    border-color: rgba(156, 116, 38, 0.2);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 248, 223, 0.72)),
        rgba(255, 255, 255, 0.8);
    color: #17130b;
    box-shadow: 0 24px 70px rgba(44, 35, 14, 0.16);
    backdrop-filter: blur(18px);
}

.ecosystem-simple .ecosystem-control-panel h3,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple h3 {
    color: #100d07;
    font-size: clamp(1.65rem, 3vw, 2.3rem);
    line-height: 1.02;
}

.ecosystem-simple .ecosystem-control-panel p,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple .ecosystem-control-panel p {
    color: #514838;
}

.ecosystem-simple .ecosystem-connected,
.ecosystem-simple .ecosystem-benefits {
    border-top-color: rgba(156, 116, 38, 0.16);
}

.ecosystem-simple .ecosystem-connected > span,
.ecosystem-simple .ecosystem-benefits > span,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple .ecosystem-connected > span,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple .ecosystem-benefits > span {
    color: #9b7328;
}

.ecosystem-simple .ecosystem-connected span:not(:first-child),
.ecosystem-simple .ecosystem-connected small {
    background: color-mix(in srgb, var(--node-accent, #f2d47b) 13%, #ffffff 82%);
    color: #17130b;
}

.ecosystem-simple .ecosystem-benefits li {
    border-color: rgba(156, 116, 38, 0.14);
    background: rgba(255, 255, 255, 0.7);
    color: #17130b;
}

.ecosystem-simple .ecosystem-service-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.72rem;
    margin-top: 1rem;
}

.ecosystem-simple .ecosystem-service-button {
    min-height: 86px;
    border-color: color-mix(in srgb, var(--node-accent) 26%, rgba(156, 116, 38, 0.16));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--node-accent) 9%, transparent), rgba(255, 255, 255, 0.78)),
        #ffffff;
    color: #17130b;
    box-shadow: 0 16px 38px rgba(44, 35, 14, 0.1);
}

.ecosystem-simple .ecosystem-service-button:hover,
.ecosystem-simple .ecosystem-service-button:focus-visible,
.ecosystem-simple .ecosystem-service-button.is-active {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--node-accent) 22%, transparent), rgba(255, 255, 255, 0.9)),
        #ffffff;
    box-shadow: 0 22px 52px rgba(44, 35, 14, 0.16);
}

.ecosystem-simple .ecosystem-service-button:not(.is-connected):not(.is-active) {
    opacity: 0.72;
}

.ecosystem-simple .ecosystem-service-button span {
    color: #100d07;
}

.ecosystem-simple .ecosystem-service-button small {
    color: #675b47;
}

.ecosystem-simple-outcomes {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: clamp(1rem, 2.5vw, 1.8rem);
}

.ecosystem-simple-outcomes div {
    display: grid;
    gap: 0.42rem;
    min-height: 190px;
    padding: 1.1rem;
    border: 1px solid rgba(156, 116, 38, 0.16);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 223, 0.64)),
        #ffffff;
    box-shadow: 0 18px 46px rgba(44, 35, 14, 0.11);
}

.ecosystem-simple-outcomes span {
    color: #9b7328;
    font-size: 0.8rem;
    font-weight: 950;
}

.ecosystem-simple-outcomes strong {
    color: #100d07;
    font-size: clamp(1.3rem, 2.5vw, 1.85rem);
    line-height: 1;
}

.ecosystem-simple-outcomes p {
    margin: 0;
    color: #514838;
}

.ecosystem-simple .ecosystem-impact-statement,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple .ecosystem-impact-statement {
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(1rem, 2.5vw, 1.8rem);
    border-color: rgba(156, 116, 38, 0.2);
    background:
        linear-gradient(135deg, rgba(23, 19, 11, 0.96), rgba(46, 35, 13, 0.94)),
        #080704;
}

.ecosystem-simple .ecosystem-impact-statement::before {
    display: none;
}

.ecosystem-simple .ecosystem-impact-statement p,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple .ecosystem-impact-statement p {
    color: #ffffff;
    font-size: clamp(1.18rem, 2.4vw, 1.65rem);
}

.ecosystem-simple .ecosystem-impact-statement strong,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-simple .ecosystem-impact-statement strong {
    color: var(--ecosystem-active-accent);
    font-size: clamp(1.08rem, 2vw, 1.35rem);
}

.ecosystem-simple .ecosystem-impact-statement .button-row {
    margin-left: auto;
}

.goodfaith-ecosystem.ecosystem-flow,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow {
    --ecosystem-active-accent: var(--color-gold-bright);
    color: #17130b;
    background:
        linear-gradient(90deg, rgba(156, 116, 38, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156, 116, 38, 0.06) 1px, transparent 1px),
        radial-gradient(circle at var(--ecosystem-cursor-x) var(--ecosystem-cursor-y), color-mix(in srgb, var(--ecosystem-active-accent) 18%, transparent), transparent 22rem),
        linear-gradient(145deg, #fffdf7 0%, #f4ead2 48%, #fffaf0 100%);
    background-size: 92px 92px, 92px 92px, auto, auto;
}

.goodfaith-ecosystem.ecosystem-flow::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(242, 212, 123, 0.32), transparent 22rem),
        radial-gradient(circle at 88% 42%, rgba(72, 217, 255, 0.1), transparent 18rem);
    opacity: 1;
}

.goodfaith-ecosystem.ecosystem-flow::after {
    opacity: 0.08;
    transform: perspective(1100px) rotateX(68deg) translateY(18%);
}

.ecosystem-flow .ecosystem-depth-layer.layer-one {
    background:
        linear-gradient(118deg, transparent 0 58%, rgba(8, 7, 4, 0.07) 63%, transparent 70%),
        linear-gradient(36deg, transparent 0 18%, rgba(242, 212, 123, 0.18) 26%, transparent 36%);
}

.ecosystem-flow .ecosystem-depth-layer.layer-two {
    opacity: 0.22;
}

.ecosystem-flow .ecosystem-title-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.72fr);
    align-items: center;
}

.ecosystem-flow .ecosystem-kicker,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-kicker,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .eyebrow {
    color: #9b7328;
}

.ecosystem-flow .ecosystem-heading > .eyebrow,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-heading > .eyebrow {
    margin-bottom: 1rem;
    font-size: clamp(1.08rem, 1.7vw, 1.42rem);
    font-weight: 950;
}

.ecosystem-flow .ecosystem-heading h2,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow h2 {
    max-width: 880px;
    color: #090806;
    font-size: clamp(3rem, 6.4vw, 6rem);
    line-height: 0.92;
}

.ecosystem-flow .ecosystem-intro-copy,
.ecosystem-flow .ecosystem-intro-copy p,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-intro-copy,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow p {
    color: #514838;
}

.ecosystem-flow .ecosystem-intro-copy {
    padding: clamp(1rem, 2vw, 1.35rem);
    border-left: 3px solid var(--ecosystem-active-accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 16px 42px rgba(44, 35, 14, 0.08);
}

.ecosystem-flow-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
    gap: clamp(1rem, 3vw, 1.6rem);
    align-items: start;
    margin-top: clamp(2rem, 4vw, 3.2rem);
}

.ecosystem-flow-board {
    position: relative;
    overflow: hidden;
    min-height: 590px;
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid rgba(156, 116, 38, 0.28);
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 20%, rgba(242, 212, 123, 0.2), transparent 16rem),
        radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--ecosystem-active-accent) 18%, transparent), transparent 15rem),
        linear-gradient(145deg, #17140c 0%, #090806 56%, #17110a 100%);
    box-shadow:
        0 34px 90px rgba(44, 35, 14, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.ecosystem-flow-board::before {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    top: 50%;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(242, 212, 123, 0.12), var(--ecosystem-active-accent), rgba(242, 212, 123, 0.12));
    box-shadow: 0 0 38px color-mix(in srgb, var(--ecosystem-active-accent) 42%, transparent);
    opacity: 0.48;
}

.ecosystem-board-header {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(242, 212, 123, 0.16);
}

.ecosystem-board-header span {
    color: var(--ecosystem-active-accent);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ecosystem-board-header strong {
    max-width: 430px;
    color: #fff8df;
    font-size: 0.92rem;
    line-height: 1.35;
}

.ecosystem-growth-lanes {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.ecosystem-growth-lane {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.85rem;
    min-height: 500px;
    padding: 0.95rem;
    border: 1px solid rgba(242, 212, 123, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ecosystem-growth-lane:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 49%;
    right: -0.62rem;
    z-index: 4;
    width: 1.05rem;
    height: 1.05rem;
    border-top: 2px solid rgba(242, 212, 123, 0.72);
    border-right: 2px solid rgba(242, 212, 123, 0.72);
    transform: rotate(45deg);
}

.ecosystem-growth-lane-result {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.42), transparent 8rem),
        linear-gradient(180deg, rgba(242, 212, 123, 0.28), rgba(156, 116, 38, 0.12));
}

.ecosystem-lane-heading {
    display: grid;
    gap: 0.35rem;
}

.ecosystem-lane-heading span {
    color: var(--ecosystem-active-accent);
    font-size: 0.78rem;
    font-weight: 950;
}

.ecosystem-lane-heading h3,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-lane-heading h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 0.98;
}

.ecosystem-lane-heading p,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-lane-heading p {
    margin: 0;
    color: #d8ceb8;
    font-size: 0.88rem;
    line-height: 1.45;
}

.ecosystem-lane-services {
    display: grid;
    gap: 0.65rem;
}

.ecosystem-flow .ecosystem-service-button {
    display: flex;
    min-height: 82px;
    align-items: center;
    gap: 0.72rem;
    padding: 0.78rem;
    border-color: color-mix(in srgb, var(--node-accent) 42%, rgba(242, 212, 123, 0.12));
    border-radius: 16px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--node-accent) 14%, transparent), rgba(255, 255, 255, 0.04)),
        rgba(8, 7, 4, 0.58);
    color: #fff8df;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.ecosystem-flow .ecosystem-service-button::before {
    inset: 0 auto 0 0;
    width: 4px;
    height: auto;
    background: var(--node-accent);
    opacity: 0.62;
}

.ecosystem-flow .ecosystem-service-button:hover,
.ecosystem-flow .ecosystem-service-button:focus-visible,
.ecosystem-flow .ecosystem-service-button.is-active {
    border-color: color-mix(in srgb, var(--node-accent) 76%, #ffffff 12%);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--node-accent) 24%, transparent), rgba(255, 255, 255, 0.075)),
        rgba(8, 7, 4, 0.82);
    transform: translateY(-4px) scale(1.015);
}

.ecosystem-flow .ecosystem-service-button.is-active {
    box-shadow:
        0 20px 46px color-mix(in srgb, var(--node-accent) 20%, rgba(0, 0, 0, 0.28)),
        0 0 0 1px color-mix(in srgb, var(--node-accent) 52%, transparent);
}

.ecosystem-flow.has-active-service .ecosystem-service-button:not(.is-connected):not(.is-active) {
    opacity: 0.38;
    filter: saturate(0.65);
}

.ecosystem-step-dot {
    flex: 0 0 auto;
    width: 1.1rem;
    aspect-ratio: 1;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: var(--node-accent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--node-accent) 54%, transparent);
}

.ecosystem-step-copy {
    display: grid;
    gap: 0.16rem;
}

.ecosystem-step-copy strong,
.ecosystem-flow .ecosystem-service-button span,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-step-copy strong {
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 950;
    line-height: 1.05;
}

.ecosystem-step-copy small,
.ecosystem-flow .ecosystem-service-button small {
    color: #d8ceb8;
    font-size: 0.72rem;
    font-weight: 760;
}

.ecosystem-growth-result {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    min-height: 280px;
    margin-top: auto;
    padding: 1rem;
    border: 1px solid rgba(242, 212, 123, 0.36);
    border-radius: 999px 999px 28px 28px;
    background:
        radial-gradient(circle at 50% 30%, #fff7cf, #d9af45 54%, #81601f 100%);
    color: #090806;
    text-align: center;
    box-shadow:
        0 22px 54px rgba(242, 212, 123, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.ecosystem-growth-result span {
    color: #6f4c10;
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ecosystem-growth-result strong {
    color: #090806;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 0.95;
}

.ecosystem-growth-result p,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-growth-result p {
    max-width: 210px;
    margin: 0;
    color: #31240d;
    font-size: 0.9rem;
    font-weight: 750;
}

.ecosystem-flow .ecosystem-control-panel,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-control-panel {
    position: sticky;
    top: 102px;
    gap: 1.05rem;
    border-color: rgba(156, 116, 38, 0.2);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 223, 0.76)),
        #ffffff;
    color: #17130b;
    box-shadow: 0 24px 70px rgba(44, 35, 14, 0.16);
}

.ecosystem-flow .ecosystem-control-panel h3,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-control-panel h3 {
    color: #090806;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    line-height: 1.02;
}

.ecosystem-flow .ecosystem-control-panel p,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-control-panel p {
    color: #514838;
}

.ecosystem-flow-meter {
    display: grid;
    gap: 0.45rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(156, 116, 38, 0.16);
}

.ecosystem-flow-meter span {
    color: #9b7328;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ecosystem-flow-meter::after {
    content: "";
    grid-area: 2 / 1;
    height: 0.68rem;
    border-radius: 999px;
    background: rgba(156, 116, 38, 0.14);
}

.ecosystem-flow-meter i {
    z-index: 1;
    grid-area: 2 / 1;
    width: 44%;
    height: 0.68rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #9b7328, var(--ecosystem-active-accent));
    box-shadow: 0 0 24px color-mix(in srgb, var(--ecosystem-active-accent) 42%, transparent);
    transition: width 260ms ease;
}

.ecosystem-flow .ecosystem-connected,
.ecosystem-flow .ecosystem-benefits {
    border-top-color: rgba(156, 116, 38, 0.16);
}

.ecosystem-flow .ecosystem-connected > span,
.ecosystem-flow .ecosystem-benefits > span,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-connected > span,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-benefits > span {
    color: #9b7328;
}

.ecosystem-flow .ecosystem-connected span:not(:first-child),
.ecosystem-flow .ecosystem-connected small {
    background: color-mix(in srgb, var(--node-accent, #f2d47b) 13%, #ffffff 82%);
    color: #17130b;
}

.ecosystem-flow .ecosystem-benefits li {
    border-color: rgba(156, 116, 38, 0.14);
    background: rgba(255, 255, 255, 0.72);
    color: #17130b;
}

.ecosystem-flow-outcomes {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: clamp(1rem, 2.5vw, 1.8rem);
}

.ecosystem-flow-outcomes div {
    display: grid;
    gap: 0.42rem;
    min-height: 190px;
    padding: 1.1rem;
    border: 1px solid rgba(156, 116, 38, 0.16);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 223, 0.66)),
        #ffffff;
    box-shadow: 0 18px 46px rgba(44, 35, 14, 0.11);
}

.ecosystem-flow-outcomes span {
    color: #9b7328;
    font-size: 0.8rem;
    font-weight: 950;
}

.ecosystem-flow-outcomes strong {
    color: #100d07;
    font-size: clamp(1.3rem, 2.5vw, 1.85rem);
    line-height: 1;
}

.ecosystem-flow-outcomes p,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-flow-outcomes p {
    margin: 0;
    color: #514838;
}

.ecosystem-flow .ecosystem-impact-statement,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-impact-statement {
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(1rem, 2.5vw, 1.8rem);
    border-color: rgba(156, 116, 38, 0.2);
    background:
        linear-gradient(135deg, rgba(23, 19, 11, 0.96), rgba(46, 35, 13, 0.94)),
        #080704;
}

.ecosystem-flow .ecosystem-impact-statement::before {
    display: none;
}

.ecosystem-flow .ecosystem-impact-statement p,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-impact-statement p {
    color: #ffffff;
    font-size: clamp(1.18rem, 2.4vw, 1.65rem);
}

.ecosystem-flow .ecosystem-impact-statement strong,
body.home-portfolio-page main > .section.goodfaith-ecosystem.ecosystem-flow .ecosystem-impact-statement strong {
    color: var(--ecosystem-active-accent);
    font-size: clamp(1.08rem, 2vw, 1.35rem);
}

.ecosystem-flow .ecosystem-impact-statement .button-row {
    margin-left: auto;
}

body.modern-seo-page {
    --seo-gold: var(--color-gold-bright);
    --seo-gold-deep: #9b7328;
    --seo-ink: #090806;
    --seo-panel: rgba(255, 255, 255, 0.82);
    --seo-line: rgba(156, 116, 38, 0.22);
    --seo-cyan: #48d9ff;
    background: #fbf7ee;
}

body.modern-seo-page main {
    overflow: clip;
    background:
        linear-gradient(90deg, rgba(156, 116, 38, 0.075) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156, 116, 38, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, #fffaf0 0%, #ffffff 42%, #f3ead8 100%);
    background-size: 92px 92px, 92px 92px, auto;
}

.modern-seo-progress {
    position: sticky;
    top: 82px;
    z-index: 20;
    display: flex;
    gap: 0.35rem;
    max-width: min(var(--container), calc(100% - 2rem));
    margin: 0.75rem auto 0;
    padding: 0.42rem;
    border: 1px solid rgba(156, 116, 38, 0.18);
    border-radius: 999px;
    background: rgba(255, 250, 240, 0.82);
    box-shadow: 0 16px 42px rgba(22, 19, 13, 0.08);
    backdrop-filter: blur(18px);
}

.modern-seo-progress a {
    position: relative;
    z-index: 1;
    min-height: 32px;
    padding: 0.36rem 0.68rem;
    border-radius: 999px;
    color: #4c4231;
    font-size: 0.74rem;
    font-weight: 900;
}

.modern-seo-progress a:hover,
.modern-seo-progress a:focus-visible {
    background: rgba(215, 179, 90, 0.16);
    color: var(--seo-ink);
}

.modern-seo-progress span {
    position: absolute;
    left: 0.42rem;
    right: 0.42rem;
    bottom: 0.18rem;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--seo-gold-deep), var(--seo-gold));
    transform: scaleX(var(--seo-page-progress, 0));
    transform-origin: left center;
}

.modern-seo-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 8vw, 7.5rem) 0;
    background:
        radial-gradient(circle at 78% 24%, rgba(72, 217, 255, 0.12), transparent 18rem),
        radial-gradient(circle at 20% 12%, rgba(242, 212, 123, 0.28), transparent 22rem),
        linear-gradient(135deg, #fffdf7 0%, #f6ecd5 52%, #ffffff 100%);
}

.modern-seo-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(156, 116, 38, 0.66), transparent);
}

.modern-seo-hero-grid,
.seo-readiness-grid,
.seo-process-grid,
.topic-map-grid,
.seo-human-grid,
.seo-layer-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.78fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.modern-seo-hero h1 {
    max-width: 780px;
    margin: 0;
    color: var(--seo-ink);
    font-size: clamp(4rem, 9vw, 8.4rem);
    line-height: 0.82;
    letter-spacing: 0;
}

.modern-seo-subtitle {
    max-width: 720px;
    margin: 1rem 0;
    color: var(--seo-gold-deep);
    font-size: clamp(1.45rem, 3vw, 2.35rem);
    font-weight: 950;
    line-height: 1.05;
}

.modern-seo-hero-copy > p:not(.eyebrow):not(.modern-seo-subtitle) {
    max-width: 720px;
    color: var(--color-ink-soft);
    font-size: 1.05rem;
}

.search-observatory {
    position: relative;
    min-height: 560px;
    border: 1px solid rgba(156, 116, 38, 0.28);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 44%, rgba(242, 212, 123, 0.22), transparent 28%),
        linear-gradient(90deg, rgba(242, 212, 123, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.06) 1px, transparent 1px),
        linear-gradient(145deg, #100d07, #050503);
    background-size: auto, 54px 54px, 54px 54px, auto;
    box-shadow: 0 34px 90px rgba(44, 35, 14, 0.22);
}

.search-observatory::before,
.search-observatory::after {
    content: "";
    position: absolute;
    inset: 15%;
    border: 1px solid rgba(242, 212, 123, 0.18);
    border-radius: 50%;
}

.search-observatory::after {
    inset: 26%;
    border-color: rgba(72, 217, 255, 0.16);
    animation: modernSeoSpin 22s linear infinite;
}

.observatory-core {
    position: absolute;
    left: 50%;
    top: 43%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 180px;
    aspect-ratio: 1;
    border: 1px solid rgba(242, 212, 123, 0.54);
    border-radius: 50%;
    background: radial-gradient(circle, #fff6c9 0%, #d7b35a 58%, #7e5d19 100%);
    color: #090806;
    text-align: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 64px rgba(242, 212, 123, 0.3);
}

.observatory-core span {
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.observatory-core strong {
    font-size: 1.65rem;
    line-height: 0.95;
}

.observatory-node {
    position: absolute;
    z-index: 3;
    width: 142px;
    min-height: 58px;
    padding: 0.55rem;
    border: 1px solid rgba(242, 212, 123, 0.34);
    border-radius: 999px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
        rgba(8, 7, 4, 0.78);
    color: #fff8df;
    font-size: 0.76rem;
    font-weight: 920;
    text-align: center;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}

.observatory-node:hover,
.observatory-node:focus-visible,
.observatory-node.is-active {
    border-color: var(--seo-gold);
    background: rgba(215, 179, 90, 0.18);
    transform: translateY(-3px);
}

.observatory-node.node-1 { left: 50%; top: 7%; transform: translateX(-50%); }
.observatory-node.node-2 { right: 6%; top: 25%; }
.observatory-node.node-3 { right: 11%; bottom: 24%; }
.observatory-node.node-4 { left: 10%; bottom: 24%; }
.observatory-node.node-5 { left: 6%; top: 25%; }

.observatory-destinations {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.observatory-destinations span {
    min-height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(242, 212, 123, 0.18);
    border-radius: 999px;
    color: #f7efd9;
    font-size: 0.74rem;
    font-weight: 850;
}

.search-observatory > p {
    position: absolute;
    left: 1.15rem;
    right: 1.15rem;
    top: 1.15rem;
    z-index: 4;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(242, 212, 123, 0.2);
    border-radius: 18px;
    background: rgba(8, 7, 4, 0.72);
    color: #fff8df;
    font-weight: 850;
}

.seo-evolution-section,
.seo-outcomes-section,
.seo-process-section,
.seo-dashboard-section,
.seo-layers-section {
    background: #ffffff;
}

.seo-evolution-toggle,
.seo-score-lab,
.seo-graph-card,
.seo-phase-console,
.topic-map,
.topic-map-panel,
.seo-balance-card,
.seo-deliverable-dashboard,
.seo-roadmap,
.seo-layer-stack {
    border: 1px solid rgba(156, 116, 38, 0.22);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 243, 232, 0.78)),
        #ffffff;
    box-shadow: 0 24px 64px rgba(22, 19, 13, 0.1);
}

.seo-toggle-control,
.seo-filter-row,
.seo-phase-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.7rem;
}

.seo-toggle-control button,
.seo-filter-row button,
.seo-phase-buttons button {
    min-height: 38px;
    padding: 0.46rem 0.7rem;
    border: 1px solid rgba(156, 116, 38, 0.22);
    border-radius: 999px;
    background: #ffffff;
    color: var(--seo-ink);
    font-weight: 850;
}

.seo-toggle-control button.is-active,
.seo-filter-row button.is-active,
.seo-phase-buttons button.is-active {
    background: linear-gradient(135deg, var(--seo-gold-deep), var(--seo-gold));
    color: #090806;
}

.seo-evolution-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.seo-evolution-stage article {
    padding: 1rem;
    border: 1px solid rgba(156, 116, 38, 0.18);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.76);
    opacity: 0.58;
    transition: opacity var(--transition), transform var(--transition), border-color var(--transition);
}

.seo-evolution-stage article.is-active {
    opacity: 1;
    transform: translateY(-4px);
    border-color: var(--seo-gold-deep);
}

.seo-evolution-stage h3,
.seo-phase-console h3,
.topic-map-panel h2,
.seo-roadmap h3,
.seo-layer-stack strong {
    margin: 0;
    color: var(--seo-ink);
}

.seo-evolution-stage ul,
.seo-roadmap ul,
.topic-map-panel ul {
    margin: 0.85rem 0 0;
    padding-left: 1.1rem;
}

.seo-readiness-section,
.topic-map-section,
.seo-human-section,
.seo-roadmap-section {
    background:
        radial-gradient(circle at 12% 14%, rgba(242, 212, 123, 0.2), transparent 18rem),
        #fffaf0;
}

.seo-score-lab {
    display: grid;
    gap: 0.9rem;
    padding: 1.2rem;
}

.seo-score-meter {
    justify-self: center;
    display: grid;
    place-items: center;
    width: min(260px, 72vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fffaf0 0 56%, transparent 57%),
        conic-gradient(var(--seo-gold) var(--score), rgba(156, 116, 38, 0.16) 0);
    color: var(--seo-ink);
}

.seo-score-meter strong {
    font-size: 4rem;
    line-height: 1;
}

.seo-score-meter span {
    margin-top: -3.2rem;
    color: var(--seo-gold-deep);
    font-weight: 900;
}

.seo-score-label,
.seo-disclaimer {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 760;
}

.seo-range-row {
    display: grid;
    gap: 0.35rem;
    color: var(--seo-ink);
    font-weight: 850;
}

.seo-range-row input {
    width: 100%;
    accent-color: var(--seo-gold-deep);
}

.seo-outcome-journey {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
}

.seo-outcome-card {
    position: relative;
    min-height: 240px;
    padding: 1rem;
    border: 1px solid rgba(156, 116, 38, 0.22);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 243, 232, 0.82)),
        #ffffff;
    box-shadow: 0 18px 46px rgba(22, 19, 13, 0.08);
}

.seo-outcome-card span {
    color: var(--seo-gold-deep);
    font-size: 0.84rem;
    font-weight: 950;
}

.seo-outcome-card h3 {
    color: var(--seo-ink);
    font-size: 1.35rem;
}

.seo-graph-card {
    overflow: hidden;
    padding: 1rem;
}

.seo-graph-card svg {
    display: block;
    width: 100%;
    min-height: 260px;
}

.seo-graph-card line {
    stroke: rgba(156, 116, 38, 0.25);
    stroke-width: 2;
}

.seo-graph-card polyline {
    fill: none;
    stroke: var(--seo-gold-deep);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 10px 16px rgba(156, 116, 38, 0.28));
}

.seo-graph-values {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.28rem;
}

.seo-graph-values span {
    min-height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(215, 179, 90, 0.12);
    color: var(--seo-ink);
    font-size: 0.72rem;
    font-weight: 850;
}

.seo-phase-console {
    padding: 0.8rem;
}

.seo-phase-console article {
    margin: 0.5rem;
    padding: 1.1rem;
    border: 1px solid rgba(156, 116, 38, 0.18);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, #100d07, #2a1f0b),
        #100d07;
    color: #fff8df;
}

.seo-phase-console article span:first-child {
    color: var(--seo-gold);
    font-weight: 950;
    text-transform: uppercase;
}

.seo-phase-console article h3 {
    margin: 0.45rem 0;
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.45rem);
}

.seo-phase-console article p {
    color: #f2ead5;
}

.topic-map {
    position: relative;
    min-height: 520px;
    background:
        radial-gradient(circle at 50% 46%, rgba(242, 212, 123, 0.2), transparent 28%),
        linear-gradient(145deg, #100d07, #050503);
}

.topic-core {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 180px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7cf, #d7b35a 60%, #7e5d19);
    color: #090806;
    text-align: center;
    transform: translate(-50%, -50%);
}

.topic-core span {
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.topic-core strong {
    font-size: 1.45rem;
    line-height: 0.95;
}

.topic-map button[data-topic-cluster] {
    position: absolute;
    width: 132px;
    min-height: 46px;
    border: 1px solid rgba(242, 212, 123, 0.32);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff8df;
    font-weight: 850;
}

.topic-map button[data-topic-cluster]:nth-of-type(1) { left: 50%; top: 8%; transform: translateX(-50%); }
.topic-map button[data-topic-cluster]:nth-of-type(2) { right: 7%; top: 22%; }
.topic-map button[data-topic-cluster]:nth-of-type(3) { right: 10%; bottom: 26%; }
.topic-map button[data-topic-cluster]:nth-of-type(4) { left: 50%; bottom: 8%; transform: translateX(-50%); }
.topic-map button[data-topic-cluster]:nth-of-type(5) { left: 10%; bottom: 26%; }
.topic-map button[data-topic-cluster]:nth-of-type(6) { left: 7%; top: 22%; }
.topic-map button[data-topic-cluster]:nth-of-type(7) { left: 50%; top: 28%; transform: translateX(-50%); }

.topic-map-panel,
.seo-balance-card {
    padding: 1.2rem;
}

.seo-balance-card {
    display: grid;
    gap: 0.8rem;
}

.seo-balance-card input {
    width: 100%;
    accent-color: var(--seo-gold-deep);
}

.seo-balance-card strong {
    color: var(--seo-ink);
    font-size: 2rem;
    line-height: 1;
}

.seo-deliverable-dashboard {
    padding: 0.8rem;
}

.seo-deliverable-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.4rem;
}

.seo-deliverable-grid article,
.seo-roadmap article,
.seo-layer-stack article {
    padding: 1rem;
    border: 1px solid rgba(156, 116, 38, 0.18);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.74);
}

.seo-deliverable-grid article.is-hidden {
    display: none;
}

.seo-deliverable-grid span,
.seo-layer-stack span {
    color: var(--seo-gold-deep);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.seo-roadmap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    padding: 0.9rem;
}

.seo-roadmap .seo-filter-row {
    grid-column: 1 / -1;
    padding: 0;
}

.seo-layer-stack {
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
    background:
        linear-gradient(145deg, rgba(8, 7, 4, 0.97), rgba(40, 30, 10, 0.94)),
        #090806;
}

.seo-layer-stack article {
    background:
        linear-gradient(135deg, rgba(242, 212, 123, 0.16), rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.045);
}

.seo-layer-stack strong {
    display: block;
    color: #ffffff;
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.modern-seo-final {
    padding: clamp(4rem, 8vw, 7rem) 0;
    background:
        radial-gradient(circle at 80% 18%, rgba(242, 212, 123, 0.2), transparent 22rem),
        linear-gradient(135deg, #100d07, #050503);
    color: #fff8df;
}

.modern-seo-final h2 {
    max-width: 980px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(3rem, 7vw, 6.4rem);
    line-height: 0.9;
}

.modern-seo-final p {
    max-width: 820px;
    color: #e4d8bd;
}

.modern-seo-final blockquote {
    max-width: 820px;
    margin: 1.5rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--seo-gold);
    color: #fff8df;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 850;
}

.seo-readiness-float {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;
    min-height: 46px;
    padding: 0.7rem 0.92rem;
    border: 1px solid rgba(156, 116, 38, 0.4);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--seo-gold-deep), var(--seo-gold));
    color: #090806;
    font-weight: 950;
    box-shadow: 0 18px 42px rgba(22, 19, 13, 0.18);
}

@keyframes modernSeoSpin {
    to {
        transform: rotate(360deg);
    }
}

body.local-pack-page {
    --local-gold: var(--color-gold-bright);
    --local-gold-deep: #9c7426;
    --local-ink: #090806;
    --local-cream: #fffaf0;
    --local-panel: rgba(255, 255, 255, 0.86);
    --local-line: rgba(156, 116, 38, 0.2);
    --local-teal: #22b8bd;
    --local-green: #2bb673;
    --local-coral: #d96f45;
    background: #fbf7ee;
}

body.local-pack-page main {
    overflow: clip;
    background:
        linear-gradient(90deg, rgba(156, 116, 38, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156, 116, 38, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, #fffaf0 0%, #ffffff 44%, #f4ead7 100%);
    background-size: 88px 88px, 88px 88px, auto;
}

.local-pack-progress {
    position: sticky;
    top: 82px;
    z-index: 20;
    display: flex;
    gap: 0.35rem;
    max-width: min(var(--container), calc(100% - 2rem));
    margin: 0.75rem auto 0;
    padding: 0.42rem;
    border: 1px solid rgba(156, 116, 38, 0.18);
    border-radius: 999px;
    background: rgba(255, 250, 240, 0.86);
    box-shadow: 0 16px 42px rgba(22, 19, 13, 0.08);
    backdrop-filter: blur(18px);
}

.local-pack-progress a {
    position: relative;
    z-index: 1;
    min-height: 32px;
    padding: 0.36rem 0.68rem;
    border-radius: 999px;
    color: #4c4231;
    font-size: 0.74rem;
    font-weight: 900;
}

.local-pack-progress a:hover,
.local-pack-progress a:focus-visible {
    background: rgba(215, 179, 90, 0.16);
    color: var(--local-ink);
}

.local-pack-progress span {
    position: absolute;
    left: 0.42rem;
    right: 0.42rem;
    bottom: 0.18rem;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--local-gold-deep), var(--local-teal), var(--local-gold));
    transform: scaleX(var(--local-pack-progress, 0));
    transform-origin: left center;
}

.local-pack-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 8vw, 7.8rem) 0 clamp(3.5rem, 6vw, 5.6rem);
    background:
        radial-gradient(circle at 78% 22%, rgba(34, 184, 189, 0.14), transparent 19rem),
        radial-gradient(circle at 18% 14%, rgba(242, 212, 123, 0.32), transparent 22rem),
        linear-gradient(135deg, #fffdf7 0%, #f6ecd5 56%, #ffffff 100%);
}

.local-pack-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(156, 116, 38, 0.66), transparent);
}

.local-pack-hero-grid,
.local-intro-grid,
.local-readiness-grid,
.local-engine-grid,
.local-human-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.82fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.local-pack-hero h1 {
    max-width: 820px;
    margin: 0;
    color: var(--local-ink);
    font-size: clamp(4rem, 9vw, 8.25rem);
    line-height: 0.82;
    letter-spacing: 0;
}

.local-pack-subtitle {
    max-width: 760px;
    margin: 1rem 0;
    color: var(--local-gold-deep);
    font-size: clamp(1.45rem, 3vw, 2.35rem);
    font-weight: 950;
    line-height: 1.05;
}

.local-pack-hero-copy > p:not(.eyebrow):not(.local-pack-subtitle),
.local-intro-copy p,
.local-human-card p {
    max-width: 760px;
    color: var(--color-ink-soft);
    font-size: 1.05rem;
}

.local-signal-map {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    border: 1px solid rgba(156, 116, 38, 0.34);
    border-radius: 30px;
    background:
        radial-gradient(circle at 50% 46%, rgba(242, 212, 123, 0.22), transparent 24%),
        radial-gradient(circle at 70% 20%, rgba(34, 184, 189, 0.13), transparent 20rem),
        linear-gradient(145deg, #17150f, #050503);
    box-shadow: 0 34px 90px rgba(44, 35, 14, 0.22);
}

.local-map-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.local-road,
.local-diagonal {
    fill: none;
    stroke: rgba(242, 212, 123, 0.14);
    stroke-width: 2;
}

.local-diagonal {
    stroke: rgba(34, 184, 189, 0.12);
}

.local-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 2;
}

.ring-two {
    stroke: rgba(242, 212, 123, 0.22);
}

.ring-three {
    stroke-dasharray: 8 12;
}

.local-signal-path {
    fill: none;
    stroke: rgba(242, 212, 123, 0.34);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 9 17;
    animation: localSignalMove 5s linear infinite;
}

.path-b,
.path-d {
    stroke: rgba(34, 184, 189, 0.34);
    animation-duration: 6.4s;
}

.local-business-node circle {
    fill: url(#localNodeGlow);
    filter: drop-shadow(0 0 34px rgba(242, 212, 123, 0.48));
}

.local-business-node text {
    fill: #090806;
    font-size: 20px;
    font-weight: 950;
}

.local-intent-signal {
    position: absolute;
    z-index: 3;
    width: 150px;
    min-height: 52px;
    padding: 0.5rem 0.62rem;
    border: 1px solid rgba(242, 212, 123, 0.34);
    border-radius: 999px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
        rgba(8, 7, 4, 0.78);
    color: #fff8df;
    font-size: 0.78rem;
    font-weight: 920;
    text-align: center;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}

.local-intent-signal:hover,
.local-intent-signal:focus-visible,
.local-intent-signal.is-active {
    border-color: var(--local-gold);
    background: linear-gradient(135deg, rgba(215, 179, 90, 0.28), rgba(34, 184, 189, 0.14));
    transform: translateY(-3px);
}

.signal-one { left: 50%; top: 34%; transform: translateX(-50%); }
.signal-two { right: 5%; top: 35%; }
.signal-three { right: 8%; bottom: 26%; }
.signal-four { left: 7%; bottom: 26%; }
.signal-five { left: 5%; top: 35%; }
.signal-six { left: 50%; bottom: 7%; transform: translateX(-50%); }

.local-map-actions {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
}

.local-map-actions span {
    min-height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(242, 212, 123, 0.18);
    border-radius: 999px;
    color: #f7efd9;
    font-size: 0.7rem;
    font-weight: 850;
    text-align: center;
}

.local-map-copy {
    position: absolute;
    left: 1.15rem;
    right: 1.15rem;
    top: 1.15rem;
    z-index: 4;
    display: grid;
    gap: 0.28rem;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(242, 212, 123, 0.22);
    border-radius: 18px;
    background: rgba(8, 7, 4, 0.76);
    color: #fff8df;
    backdrop-filter: blur(16px);
}

.local-map-copy span {
    color: var(--local-gold);
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.local-map-copy strong {
    color: #ffffff;
    font-size: clamp(1.02rem, 1.68vw, 1.28rem);
}

.local-map-copy p {
    margin: 0;
    color: #efe3c8;
}

.local-intro-section,
.local-realities-section,
.local-process-section,
.local-benefits-section {
    background: #ffffff;
}

.local-grid-section,
.local-readiness-section,
.local-engine-section,
.local-human-section {
    background:
        radial-gradient(circle at 12% 14%, rgba(242, 212, 123, 0.2), transparent 18rem),
        #fffaf0;
}

.local-grid-lab,
.local-reality-card,
.local-score-lab,
.local-process-card,
.local-journey-card,
.local-dropoff-console,
.local-pillar-map,
.local-pillar-panel,
.local-human-card,
.local-benefit-card {
    border: 1px solid var(--local-line);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 243, 232, 0.76)),
        #ffffff;
    box-shadow: 0 24px 64px rgba(22, 19, 13, 0.1);
}

.local-grid-lab {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.local-grid-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0.75rem;
    align-items: end;
}

.local-grid-controls label,
.local-range-row {
    display: grid;
    gap: 0.35rem;
    color: var(--local-ink);
    font-weight: 850;
}

.local-grid-controls select {
    min-height: 46px;
    width: 100%;
    border: 1px solid rgba(156, 116, 38, 0.24);
    border-radius: 999px;
    background: #ffffff;
    color: var(--local-ink);
    font: inherit;
    font-weight: 850;
}

.local-metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.local-metric-row strong {
    min-height: 74px;
    display: grid;
    place-items: center;
    padding: 0.9rem;
    border-radius: 18px;
    background:
        linear-gradient(135deg, #100d07, #2a1f0b),
        #100d07;
    color: #fff8df;
    text-align: center;
    font-size: 0.95rem;
}

.local-metric-row span {
    color: var(--local-gold);
    font-size: 1.45rem;
}

.local-grid-stage {
    display: grid;
    grid-template-columns: minmax(320px, 0.84fr) minmax(220px, 0.36fr);
    gap: 1rem;
    align-items: start;
}

.local-search-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.42rem;
    padding: 0.85rem;
    border: 1px solid rgba(156, 116, 38, 0.18);
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(156, 116, 38, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156, 116, 38, 0.08) 1px, transparent 1px),
        #fffdf7;
    background-size: 38px 38px, 38px 38px, auto;
}

.local-search-point {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(156, 116, 38, 0.15);
    border-radius: 12px;
    color: var(--local-ink);
    font-size: 0.8rem;
    font-weight: 950;
    transition: transform var(--transition), box-shadow var(--transition);
}

.local-search-point:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 22px rgba(22, 19, 13, 0.14);
}

.rank-strong {
    background: rgba(43, 182, 115, 0.82);
}

.rank-competitive {
    background: rgba(242, 212, 123, 0.88);
}

.rank-emerging {
    background: rgba(34, 184, 189, 0.46);
}

.rank-limited {
    background: rgba(217, 111, 69, 0.42);
}

.rank-none {
    background: rgba(22, 19, 13, 0.12);
    color: #6a6255;
}

.local-grid-legend {
    display: grid;
    gap: 0.5rem;
}

.local-grid-legend span {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0.5rem;
    align-items: center;
    min-height: 38px;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(156, 116, 38, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    color: #4f4636;
    font-size: 0.84rem;
    font-weight: 800;
}

.local-grid-legend i {
    width: 18px;
    height: 18px;
    border-radius: 6px;
}

.local-disclaimer {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 760;
}

.local-realities-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.local-reality-card {
    display: grid;
    gap: 0.85rem;
    min-height: 430px;
    padding: 1.05rem;
}

.local-reality-card > span,
.local-process-card > span,
.local-journey-card > span {
    color: var(--local-gold-deep);
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.local-reality-card h3,
.local-process-card h3,
.local-journey-card h3,
.local-benefit-card h3,
.local-pillar-panel h2 {
    margin: 0;
    color: var(--local-ink);
}

.local-relevance-picker,
.local-prominence-toggles,
.local-dropoff-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.local-relevance-picker button,
.local-prominence-toggles button,
.local-dropoff-row button {
    min-height: 38px;
    padding: 0.42rem 0.62rem;
    border: 1px solid rgba(156, 116, 38, 0.22);
    border-radius: 999px;
    background: #ffffff;
    color: var(--local-ink);
    font-weight: 850;
}

.local-relevance-picker button:hover,
.local-relevance-picker button:focus-visible,
.local-relevance-picker button.is-active,
.local-prominence-toggles button.is-active,
.local-dropoff-row button.is-active {
    background: linear-gradient(135deg, var(--local-gold-deep), var(--local-gold));
    color: #090806;
}

.local-distance-visual {
    position: relative;
    min-height: 180px;
    border: 1px solid rgba(156, 116, 38, 0.16);
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 50%, rgba(242, 212, 123, 0.34) 0 12%, transparent 13%),
        radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(156, 116, 38, 0.12) 29% 31%, transparent 32%),
        radial-gradient(circle at 50% 50%, transparent 0 45%, rgba(156, 116, 38, 0.1) 46% 48%, transparent 49%),
        #fffdf7;
}

.local-distance-visual i {
    position: absolute;
    left: calc(12% + (var(--distance) * 0.72));
    top: 50%;
    width: 28px;
    aspect-ratio: 1;
    border: 7px solid rgba(34, 184, 189, 0.22);
    border-radius: 50%;
    background: var(--local-teal);
    transform: translateY(-50%);
    box-shadow: 0 0 26px rgba(34, 184, 189, 0.28);
}

.local-range-row input {
    width: 100%;
    accent-color: var(--local-gold-deep);
}

.local-prominence-score {
    align-self: end;
    display: grid;
    gap: 0.2rem;
    padding: 1rem;
    border-radius: 18px;
    background: #100d07;
    color: #fff8df;
}

.local-prominence-score strong {
    color: var(--local-gold);
    font-size: 3rem;
    line-height: 1;
}

.local-principle {
    max-width: 980px;
    margin: clamp(1.5rem, 4vw, 2.4rem) auto 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--local-gold-deep);
    color: var(--local-ink);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 900;
}

.local-score-lab {
    display: grid;
    gap: 0.9rem;
    padding: 1.2rem;
}

.local-score-meter {
    justify-self: center;
    display: grid;
    place-items: center;
    width: min(260px, 72vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fffaf0 0 56%, transparent 57%),
        conic-gradient(var(--local-teal) var(--score), rgba(156, 116, 38, 0.16) 0);
    color: var(--local-ink);
}

.local-score-meter strong {
    font-size: 4rem;
    line-height: 1;
}

.local-score-meter span {
    margin-top: -3.2rem;
    color: var(--local-gold-deep);
    font-weight: 900;
}

.local-score-lab > strong {
    color: var(--local-ink);
    font-size: 1.6rem;
}

.local-process-grid,
.local-journey-grid,
.local-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.local-process-card,
.local-journey-card,
.local-benefit-card {
    min-height: 245px;
    padding: 1rem;
}

.local-journey-section {
    background:
        linear-gradient(180deg, #ffffff, #fffaf0);
}

.local-journey-card {
    position: relative;
    overflow: hidden;
}

.local-journey-card::after {
    content: "";
    position: absolute;
    inset: auto 1rem 1rem;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--local-gold), var(--local-teal));
    transform: scaleX(0.18);
    transform-origin: left center;
    transition: transform var(--transition);
}

.local-journey-card.is-active::after,
.local-journey-card:hover::after {
    transform: scaleX(1);
}

.local-dropoff-console {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 1rem;
}

.local-dropoff-console p {
    margin: 0;
    color: var(--local-ink);
    font-weight: 840;
}

.local-pillar-map {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 49%, rgba(242, 212, 123, 0.22), transparent 28%),
        linear-gradient(145deg, #100d07, #050503);
}

.local-pillar-map::before,
.local-pillar-map::after {
    content: "";
    position: absolute;
    inset: 18%;
    border: 1px solid rgba(242, 212, 123, 0.2);
    border-radius: 50%;
}

.local-pillar-map::after {
    inset: 30%;
    border-color: rgba(34, 184, 189, 0.18);
    animation: modernSeoSpin 24s linear infinite;
}

.local-pillar-core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 188px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7cf, #d7b35a 60%, #7e5d19);
    color: #090806;
    text-align: center;
    transform: translate(-50%, -50%);
}

.local-pillar-core span {
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

.local-pillar-core strong {
    max-width: 140px;
    font-size: 1.28rem;
    line-height: 0.95;
}

.local-pillar-button {
    position: absolute;
    z-index: 3;
    width: 176px;
    min-height: 70px;
    padding: 0.7rem;
    border: 1px solid rgba(242, 212, 123, 0.32);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(8, 7, 4, 0.78);
    color: #fff8df;
    font-weight: 920;
    text-align: left;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}

.local-pillar-button span {
    display: block;
    color: var(--local-gold);
    font-size: 0.74rem;
}

.local-pillar-button:hover,
.local-pillar-button:focus-visible,
.local-pillar-button.is-active {
    border-color: var(--local-teal);
    background: linear-gradient(135deg, rgba(34, 184, 189, 0.22), rgba(215, 179, 90, 0.18));
    transform: translateY(-3px);
}

.pillar-accuracy { left: 50%; top: 6%; transform: translateX(-50%); }
.pillar-relevance { right: 7%; top: 22%; }
.pillar-trust { right: 9%; bottom: 22%; }
.pillar-website { left: 50%; bottom: 6%; transform: translateX(-50%); }
.pillar-prominence { left: 9%; bottom: 22%; }
.pillar-conversion { left: 7%; top: 22%; }

.local-pillar-panel {
    display: grid;
    gap: 0.85rem;
    padding: 1.2rem;
}

.local-pillar-panel h2 {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 0.96;
}

.local-pillar-lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.local-pillar-lists div {
    padding: 0.9rem;
    border: 1px solid rgba(156, 116, 38, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
}

.local-pillar-lists strong,
.local-pillar-connection {
    color: var(--local-gold-deep);
    font-weight: 950;
}

.local-pillar-lists ul {
    margin: 0.7rem 0 0;
    padding-left: 1.1rem;
}

.local-optimization-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.local-optimization-grid span {
    min-height: 54px;
    display: flex;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(156, 116, 38, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    color: #3e3526;
    font-weight: 850;
}

.local-human-grid {
    align-items: stretch;
}

.local-human-card {
    display: grid;
    align-content: center;
    gap: 0.8rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    background:
        radial-gradient(circle at 80% 20%, rgba(34, 184, 189, 0.14), transparent 16rem),
        linear-gradient(145deg, #100d07, #2a1f0b);
    color: #fff8df;
}

.local-human-card p {
    color: #f2ead5;
}

.local-benefit-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 243, 232, 0.8)),
        #ffffff;
}

.local-benefit-card h3 {
    font-size: 1.32rem;
}

.local-pack-final {
    padding: clamp(4rem, 8vw, 7rem) 0;
    background:
        radial-gradient(circle at 80% 18%, rgba(34, 184, 189, 0.18), transparent 22rem),
        radial-gradient(circle at 20% 80%, rgba(242, 212, 123, 0.18), transparent 20rem),
        linear-gradient(135deg, #100d07, #050503);
    color: #fff8df;
}

.local-pack-final h2 {
    max-width: 1060px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.6rem, 6vw, 5.7rem);
    line-height: 0.92;
}

.local-pack-final p {
    max-width: 820px;
    color: #e4d8bd;
}

.local-pack-float {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;
    min-height: 46px;
    padding: 0.7rem 0.92rem;
    border: 1px solid rgba(156, 116, 38, 0.4);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--local-gold-deep), var(--local-gold));
    color: #090806;
    font-weight: 950;
    box-shadow: 0 18px 42px rgba(22, 19, 13, 0.18);
}

@keyframes localSignalMove {
    to {
        stroke-dashoffset: -104;
    }
}

body.gbp-optimization-page {
    --gbp-gold: var(--color-gold-bright);
    --gbp-gold-deep: #9c7426;
    --gbp-ink: #090806;
    --gbp-teal: #22b8bd;
    --gbp-green: #31b978;
    --gbp-coral: #d96f45;
    --gbp-line: rgba(156, 116, 38, 0.2);
    background: #fbf7ee;
}

body.gbp-optimization-page main {
    overflow: clip;
    background:
        linear-gradient(90deg, rgba(156, 116, 38, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156, 116, 38, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, #fffaf0 0%, #ffffff 46%, #f4ead7 100%);
    background-size: 88px 88px, 88px 88px, auto;
}

.gbp-progress {
    position: sticky;
    top: 82px;
    z-index: 20;
    display: flex;
    gap: 0.35rem;
    max-width: min(var(--container), calc(100% - 2rem));
    margin: 0.75rem auto 0;
    padding: 0.42rem;
    border: 1px solid rgba(156, 116, 38, 0.18);
    border-radius: 999px;
    background: rgba(255, 250, 240, 0.86);
    box-shadow: 0 16px 42px rgba(22, 19, 13, 0.08);
    backdrop-filter: blur(18px);
}

.gbp-progress a {
    position: relative;
    z-index: 1;
    min-height: 32px;
    padding: 0.36rem 0.68rem;
    border-radius: 999px;
    color: #4c4231;
    font-size: 0.74rem;
    font-weight: 900;
}

.gbp-progress a:hover,
.gbp-progress a:focus-visible {
    background: rgba(215, 179, 90, 0.16);
    color: var(--gbp-ink);
}

.gbp-progress span {
    position: absolute;
    left: 0.42rem;
    right: 0.42rem;
    bottom: 0.18rem;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gbp-gold-deep), var(--gbp-teal), var(--gbp-gold));
    transform: scaleX(var(--gbp-progress, 0));
    transform-origin: left center;
}

.gbp-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 8vw, 7.8rem) 0 clamp(3.5rem, 6vw, 5.6rem);
    background:
        radial-gradient(circle at 76% 18%, rgba(34, 184, 189, 0.16), transparent 18rem),
        radial-gradient(circle at 18% 15%, rgba(242, 212, 123, 0.34), transparent 22rem),
        linear-gradient(135deg, #fffdf7 0%, #f6ecd5 56%, #ffffff 100%);
}

.gbp-hero-grid,
.gbp-copy-grid,
.gbp-alignment-grid,
.gbp-engine-grid,
.gbp-trust-grid,
.gbp-visual-grid,
.gbp-policy-grid,
.gbp-human-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.82fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.gbp-hero h1 {
    max-width: 920px;
    margin: 0;
    color: var(--gbp-ink);
    font-size: clamp(3.4rem, 7.8vw, 7.25rem);
    line-height: 0.86;
    letter-spacing: 0;
}

.gbp-subtitle {
    max-width: 760px;
    margin: 1rem 0;
    color: var(--gbp-gold-deep);
    font-size: clamp(1.35rem, 2.8vw, 2.25rem);
    font-weight: 950;
    line-height: 1.05;
}

.gbp-hero-copy > p:not(.eyebrow):not(.gbp-subtitle),
.gbp-long-copy p,
.gbp-human-card p {
    max-width: 760px;
    color: var(--color-ink-soft);
    font-size: 1.05rem;
}

.gbp-hero-line {
    margin-top: 1rem;
    color: var(--gbp-gold-deep) !important;
    font-weight: 950;
}

.gbp-profile-capsule {
    position: relative;
    min-height: 660px;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid rgba(156, 116, 38, 0.34);
    border-radius: 30px;
    background:
        radial-gradient(circle at 50% 42%, rgba(242, 212, 123, 0.23), transparent 25%),
        radial-gradient(circle at 75% 18%, rgba(34, 184, 189, 0.15), transparent 18rem),
        linear-gradient(90deg, rgba(242, 212, 123, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.06) 1px, transparent 1px),
        linear-gradient(145deg, #17150f, #050503);
    background-size: auto, auto, 54px 54px, 54px 54px, auto;
    box-shadow: 0 34px 90px rgba(44, 35, 14, 0.22);
}

.gbp-profile-capsule::before,
.gbp-profile-capsule::after {
    content: "";
    position: absolute;
    inset: 17%;
    border: 1px solid rgba(242, 212, 123, 0.18);
    border-radius: 50%;
}

.gbp-profile-capsule::after {
    inset: 28%;
    border-color: rgba(34, 184, 189, 0.17);
    animation: modernSeoSpin 25s linear infinite;
}

.gbp-capsule-status,
.gbp-profile-capsule > p {
    position: relative;
    z-index: 4;
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(242, 212, 123, 0.22);
    border-radius: 18px;
    background: rgba(8, 7, 4, 0.76);
    color: #fff8df;
    backdrop-filter: blur(16px);
}

.gbp-capsule-status span {
    color: var(--gbp-gold);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.gbp-capsule-status strong {
    color: #ffffff;
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
}

.gbp-capsule-status b {
    color: var(--gbp-teal);
}

.gbp-capsule-core {
    position: absolute;
    left: 50%;
    top: 44%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 190px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7cf, #d7b35a 60%, #7e5d19);
    color: #090806;
    text-align: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 54px rgba(242, 212, 123, 0.34);
}

.gbp-capsule-core span {
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

.gbp-capsule-core strong {
    max-width: 140px;
    font-size: 1.42rem;
    line-height: 0.95;
}

.gbp-signal-list {
    position: absolute;
    inset: 7rem 1rem 6rem;
    z-index: 3;
}

.gbp-signal-list button {
    position: absolute;
    width: 160px;
    min-height: 54px;
    padding: 0.52rem 0.64rem;
    border: 1px solid rgba(242, 212, 123, 0.24);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    color: #f5ead2;
    font-size: 0.74rem;
    font-weight: 880;
    text-align: left;
}

.gbp-signal-list button.is-active {
    border-color: var(--gbp-teal);
    background: linear-gradient(135deg, rgba(34, 184, 189, 0.22), rgba(215, 179, 90, 0.12));
    color: #ffffff;
}

.gbp-signal-list button span {
    display: block;
    color: var(--gbp-gold);
    font-size: 0.66rem;
    font-weight: 950;
}

.gbp-signal-list button:nth-child(1) { left: 4%; top: 4%; }
.gbp-signal-list button:nth-child(2) { left: 50%; top: 0; transform: translateX(-50%); }
.gbp-signal-list button:nth-child(3) { right: 4%; top: 4%; }
.gbp-signal-list button:nth-child(4) { right: 0; top: 28%; }
.gbp-signal-list button:nth-child(5) { right: 5%; bottom: 26%; }
.gbp-signal-list button:nth-child(6) { right: 26%; bottom: 3%; }
.gbp-signal-list button:nth-child(7) { left: 26%; bottom: 3%; }
.gbp-signal-list button:nth-child(8) { left: 5%; bottom: 26%; }
.gbp-signal-list button:nth-child(9) { left: 0; top: 28%; }
.gbp-signal-list button:nth-child(10) { left: 38%; top: 20%; }
.gbp-signal-list button:nth-child(11) { right: 35%; bottom: 22%; }
.gbp-signal-list button:nth-child(12) { left: 38%; bottom: 19%; }

.gbp-query-orbit,
.gbp-action-strip {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 4.7rem;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.gbp-action-strip {
    bottom: 1rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    opacity: 0.55;
    transition: opacity var(--transition), transform var(--transition);
}

.gbp-profile-capsule.is-complete .gbp-action-strip {
    opacity: 1;
    transform: translateY(-3px);
}

.gbp-query-orbit span,
.gbp-action-strip span {
    min-height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(242, 212, 123, 0.18);
    border-radius: 999px;
    color: #f7efd9;
    font-size: 0.68rem;
    font-weight: 850;
    text-align: center;
}

.gbp-profile-capsule > p {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 8.1rem;
    margin: 0;
}

.gbp-matters-section,
.gbp-relevance-section,
.gbp-comparison-section,
.gbp-journey-section,
.gbp-dashboard-section,
.gbp-benefits-section {
    background: #ffffff;
}

.gbp-alignment-section,
.gbp-engine-section,
.gbp-trust-section,
.gbp-visual-section,
.gbp-policy-section,
.gbp-graph-section,
.gbp-roadmap-section,
.gbp-deliverables-section,
.gbp-human-section {
    background:
        radial-gradient(circle at 12% 14%, rgba(242, 212, 123, 0.2), transparent 18rem),
        #fffaf0;
}

.gbp-score-lab,
.gbp-relevance-lab,
.gbp-analysis-card,
.gbp-pillar-orbit,
.gbp-pillar-panel,
.gbp-comparison-card,
.gbp-journey-card,
.gbp-friction-console,
.gbp-review-constellation,
.gbp-response-lab,
.gbp-photo-planner,
.gbp-connection-map,
.gbp-policy-card,
.gbp-dashboard,
.gbp-graph-card,
.gbp-roadmap-card,
.gbp-human-card,
.gbp-benefit-card {
    border: 1px solid var(--gbp-line);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 243, 232, 0.76)),
        #ffffff;
    box-shadow: 0 24px 64px rgba(22, 19, 13, 0.1);
}

.gbp-score-lab {
    display: grid;
    gap: 0.85rem;
    padding: 1.2rem;
}

.gbp-score-meter {
    justify-self: center;
    display: grid;
    place-items: center;
    width: min(260px, 72vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fffaf0 0 56%, transparent 57%),
        conic-gradient(var(--gbp-teal) var(--score), rgba(156, 116, 38, 0.16) 0);
    color: var(--gbp-ink);
}

.gbp-score-meter strong {
    font-size: 4rem;
    line-height: 1;
}

.gbp-score-meter span {
    margin-top: -3.2rem;
    color: var(--gbp-gold-deep);
    font-weight: 900;
}

.gbp-score-lab > strong {
    color: var(--gbp-ink);
    font-size: 1.55rem;
}

.gbp-live-note,
.gbp-score-lab small {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 760;
}

.gbp-range-row {
    display: grid;
    gap: 0.35rem;
    color: var(--gbp-ink);
    font-weight: 850;
}

.gbp-range-row input {
    width: 100%;
    accent-color: var(--gbp-gold-deep);
}

.gbp-relevance-lab {
    display: grid;
    grid-template-columns: 260px minmax(280px, 0.82fr) minmax(320px, 1fr);
    gap: 0.8rem;
    padding: 1rem;
}

.gbp-query-panel,
.gbp-profile-options,
.gbp-dashboard-tabs,
.gbp-dashboard-filters,
.gbp-policy-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.gbp-query-panel,
.gbp-profile-options {
    display: grid;
    align-content: start;
}

.gbp-query-panel button,
.gbp-profile-options button,
.gbp-dashboard-tabs button,
.gbp-dashboard-filters button,
.gbp-policy-buttons button,
.gbp-friction-console button,
.gbp-response-lab button,
.gbp-signal-column button,
.gbp-relevance-lab button {
    min-height: 40px;
    padding: 0.5rem 0.68rem;
    border: 1px solid rgba(156, 116, 38, 0.22);
    border-radius: 999px;
    background: #ffffff;
    color: var(--gbp-ink);
    font-weight: 850;
}

.gbp-query-panel button:hover,
.gbp-query-panel button:focus-visible,
.gbp-query-panel button.is-active,
.gbp-profile-options button.is-active,
.gbp-dashboard-tabs button.is-active,
.gbp-dashboard-filters button.is-active,
.gbp-policy-buttons button.is-active,
.gbp-friction-console button.is-active,
.gbp-response-lab button.is-active,
.gbp-signal-column button.is-active {
    background: linear-gradient(135deg, var(--gbp-gold-deep), var(--gbp-gold));
    color: #090806;
}

.gbp-profile-options button {
    display: grid;
    gap: 0.22rem;
    border-radius: 18px;
    text-align: left;
}

.gbp-profile-options strong {
    font-size: 1.18rem;
}

.gbp-profile-options span {
    color: #5a5142;
    font-size: 0.84rem;
}

.gbp-analysis-card {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
}

.gbp-analysis-card h3,
.gbp-pillar-panel h2,
.gbp-comparison-side h3,
.gbp-journey-card h3,
.gbp-response-lab h2,
.gbp-policy-card h3,
.gbp-roadmap-card h3,
.gbp-benefit-card h3 {
    margin: 0;
    color: var(--gbp-ink);
}

.gbp-analysis-card > span,
.gbp-roadmap-card > span,
.gbp-journey-card > span,
.gbp-policy-card > span {
    color: var(--gbp-gold-deep);
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.gbp-analysis-grid {
    display: grid;
    gap: 0.5rem;
}

.gbp-analysis-grid div {
    display: grid;
    gap: 0.25rem;
}

.gbp-analysis-grid small {
    color: #514838;
    font-weight: 850;
}

.gbp-analysis-grid i {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(156, 116, 38, 0.13);
}

.gbp-analysis-grid i::before {
    content: "";
    display: block;
    width: var(--value, 70%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gbp-teal), var(--gbp-gold));
}

.gbp-engine-grid {
    align-items: stretch;
}

.gbp-pillar-orbit {
    position: relative;
    min-height: 660px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 49%, rgba(242, 212, 123, 0.22), transparent 28%),
        linear-gradient(145deg, #100d07, #050503);
}

.gbp-pillar-orbit::before,
.gbp-pillar-orbit::after {
    content: "";
    position: absolute;
    inset: 16%;
    border: 1px solid rgba(242, 212, 123, 0.19);
    border-radius: 50%;
}

.gbp-pillar-orbit::after {
    inset: 29%;
    border-color: rgba(34, 184, 189, 0.18);
    animation: modernSeoSpin 24s linear infinite;
}

.gbp-pillar-core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 190px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7cf, #d7b35a 60%, #7e5d19);
    color: #090806;
    text-align: center;
    transform: translate(-50%, -50%);
}

.gbp-pillar-core span {
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

.gbp-pillar-core strong {
    max-width: 130px;
    font-size: 1.48rem;
    line-height: 0.95;
}

.gbp-pillar-button {
    position: absolute;
    z-index: 3;
    width: 178px;
    min-height: 74px;
    padding: 0.7rem;
    border: 1px solid rgba(242, 212, 123, 0.32);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(8, 7, 4, 0.78);
    color: #fff8df;
    font-size: 0.78rem;
    font-weight: 920;
    text-align: left;
}

.gbp-pillar-button span {
    display: block;
    color: var(--gbp-gold);
    font-size: 0.72rem;
}

.gbp-pillar-button:hover,
.gbp-pillar-button:focus-visible,
.gbp-pillar-button.is-active {
    border-color: var(--gbp-teal);
    background: linear-gradient(135deg, rgba(34, 184, 189, 0.22), rgba(215, 179, 90, 0.18));
    transform: translateY(-3px);
}

.gbp-pillar-orbit .pillar-accuracy { left: 50%; top: 5%; transform: translateX(-50%); }
.gbp-pillar-orbit .pillar-category { right: 7%; top: 18%; }
.gbp-pillar-orbit .pillar-story { right: 7%; bottom: 28%; }
.gbp-pillar-orbit .pillar-reviews { left: 50%; bottom: 5%; transform: translateX(-50%); }
.gbp-pillar-orbit .pillar-visuals { left: 7%; bottom: 28%; }
.gbp-pillar-orbit .pillar-website { left: 7%; top: 18%; transform: none; }
.gbp-pillar-orbit .pillar-conversion { left: 50%; top: 28%; transform: translateX(-50%); }

.gbp-pillar-panel {
    display: grid;
    gap: 0.85rem;
    padding: 1.2rem;
}

.gbp-pillar-panel h2 {
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    line-height: 0.96;
}

.gbp-pillar-lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.gbp-pillar-lists div {
    padding: 0.9rem;
    border: 1px solid rgba(156, 116, 38, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
}

.gbp-pillar-lists strong,
.gbp-pillar-panel blockquote {
    color: var(--gbp-gold-deep);
    font-weight: 950;
}

.gbp-pillar-lists ul {
    margin: 0.7rem 0 0;
    padding-left: 1.1rem;
}

.gbp-pillar-panel blockquote {
    margin: 0;
    padding-left: 1rem;
    border-left: 4px solid var(--gbp-teal);
    font-size: 1.12rem;
}

.gbp-comparison-card {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
    background:
        linear-gradient(90deg, rgba(217, 111, 69, 0.1) 0 var(--compare, 52%), rgba(49, 185, 120, 0.12) var(--compare, 52%) 100%),
        #ffffff;
}

.gbp-comparison-side {
    min-height: 330px;
    padding: 1rem;
    border: 1px solid rgba(156, 116, 38, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
}

.gbp-comparison-side.risk h3 {
    color: var(--gbp-coral);
}

.gbp-comparison-side.accurate h3 {
    color: #177b53;
}

.gbp-comparison-slider {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: grid;
    gap: 0.35rem;
    width: min(360px, calc(100% - 2rem));
    padding: 0.75rem;
    border: 1px solid rgba(156, 116, 38, 0.24);
    border-radius: 999px;
    background: rgba(255, 250, 240, 0.92);
    color: var(--gbp-ink);
    font-size: 0.82rem;
    font-weight: 900;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(16px);
}

.gbp-comparison-slider input {
    width: 100%;
    accent-color: var(--gbp-gold-deep);
}

.gbp-journey-grid,
.gbp-roadmap,
.gbp-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.gbp-journey-card,
.gbp-roadmap-card,
.gbp-benefit-card {
    min-height: 230px;
    padding: 1rem;
}

.gbp-friction-console {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 1rem;
}

.gbp-friction-console p {
    flex: 1 0 100%;
    margin: 0.45rem 0 0;
    color: var(--gbp-ink);
    font-weight: 840;
}

.gbp-trust-grid,
.gbp-visual-grid {
    align-items: stretch;
}

.gbp-review-constellation {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 49%, rgba(242, 212, 123, 0.22), transparent 26%),
        linear-gradient(145deg, #100d07, #050503);
}

.gbp-review-constellation::before,
.gbp-review-constellation::after {
    content: "";
    position: absolute;
    inset: 18%;
    border: 1px solid rgba(242, 212, 123, 0.18);
    border-radius: 50%;
}

.gbp-review-constellation::after {
    inset: 32%;
    border-color: rgba(34, 184, 189, 0.18);
}

.gbp-review-core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 170px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7cf, #d7b35a 60%, #7e5d19);
    color: #090806;
    text-align: center;
    transform: translate(-50%, -50%);
}

.gbp-review-core span {
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

.gbp-review-core strong {
    max-width: 110px;
    font-size: 1.35rem;
    line-height: 0.95;
}

.gbp-review-constellation button {
    position: absolute;
    z-index: 3;
    width: 124px;
    min-height: 46px;
    border: 1px solid rgba(242, 212, 123, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff8df;
    font-size: 0.72rem;
    font-weight: 850;
}

.gbp-review-constellation button.is-active {
    border-color: var(--gbp-teal);
    background: rgba(34, 184, 189, 0.2);
}

.gbp-review-constellation button:nth-of-type(1) { left: 50%; top: 7%; transform: translateX(-50%); }
.gbp-review-constellation button:nth-of-type(2) { right: 8%; top: 18%; }
.gbp-review-constellation button:nth-of-type(3) { right: 8%; top: 40%; }
.gbp-review-constellation button:nth-of-type(4) { right: 15%; bottom: 18%; }
.gbp-review-constellation button:nth-of-type(5) { left: 50%; bottom: 8%; transform: translateX(-50%); }
.gbp-review-constellation button:nth-of-type(6) { left: 15%; bottom: 18%; }
.gbp-review-constellation button:nth-of-type(7) { left: 8%; top: 40%; }
.gbp-review-constellation button:nth-of-type(8) { left: 8%; top: 18%; }
.gbp-review-constellation button:nth-of-type(9) { left: 50%; top: 26%; transform: translateX(-50%); }

.gbp-response-lab,
.gbp-photo-planner,
.gbp-policy-card,
.gbp-human-card {
    display: grid;
    align-content: center;
    gap: 0.8rem;
    padding: clamp(1.1rem, 3vw, 2rem);
}

.gbp-response-lab button {
    display: grid;
    gap: 0.35rem;
    border-radius: 18px;
    text-align: left;
}

.gbp-response-lab button span {
    color: #5a5142;
    font-size: 0.88rem;
}

.gbp-sample-review {
    padding: 1rem;
    border-left: 4px solid var(--gbp-teal);
    border-radius: 0 14px 14px 0;
    background: rgba(34, 184, 189, 0.08);
    color: var(--gbp-ink);
    font-weight: 850;
}

.gbp-photo-planner label {
    display: grid;
    gap: 0.4rem;
    color: var(--gbp-ink);
    font-weight: 900;
}

.gbp-photo-planner select {
    min-height: 46px;
    border: 1px solid rgba(156, 116, 38, 0.24);
    border-radius: 999px;
    background: #ffffff;
    color: var(--gbp-ink);
    font: inherit;
    font-weight: 850;
}

.gbp-photo-planner > strong {
    color: var(--gbp-ink);
    font-size: 1.4rem;
}

.gbp-photo-planner > strong span {
    color: var(--gbp-teal);
}

.gbp-photo-list,
.gbp-deliverable-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.gbp-photo-list span,
.gbp-deliverable-grid span {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(156, 116, 38, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
    color: #3e3526;
    font-weight: 850;
}

.gbp-photo-list span.is-active {
    border-color: rgba(34, 184, 189, 0.42);
    background: rgba(34, 184, 189, 0.1);
}

.gbp-connection-map {
    display: grid;
    grid-template-columns: minmax(220px, 0.42fr) minmax(280px, 0.7fr) minmax(220px, 0.42fr);
    gap: 1rem;
    padding: 1rem;
    background:
        radial-gradient(circle at 50% 50%, rgba(242, 212, 123, 0.2), transparent 20rem),
        linear-gradient(145deg, #100d07, #050503);
}

.gbp-signal-column,
.gbp-destination-column,
.gbp-connection-core {
    display: grid;
    gap: 0.5rem;
    align-content: center;
}

.gbp-signal-column > span,
.gbp-destination-column > span {
    color: var(--gbp-gold);
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.gbp-destination-column i {
    min-height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(242, 212, 123, 0.17);
    border-radius: 999px;
    color: #fff8df;
    font-style: normal;
    font-weight: 850;
}

.gbp-connection-core {
    min-height: 360px;
    padding: 1.3rem;
    border: 1px solid rgba(242, 212, 123, 0.24);
    border-radius: 24px;
    background:
        radial-gradient(circle, rgba(242, 212, 123, 0.25), transparent 48%),
        rgba(255, 255, 255, 0.06);
    color: #fff8df;
    text-align: center;
}

.gbp-connection-core strong {
    color: #ffffff;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 0.98;
}

.gbp-connection-core span {
    color: var(--gbp-gold);
}

.gbp-policy-card {
    background:
        radial-gradient(circle at 86% 12%, rgba(34, 184, 189, 0.12), transparent 14rem),
        linear-gradient(145deg, #100d07, #2a1f0b);
    color: #fff8df;
}

.gbp-policy-card h3,
.gbp-policy-card p {
    color: #fff8df;
}

.gbp-policy-buttons button {
    color: #090806;
}

.gbp-policy-buttons button.is-correct {
    border-color: var(--gbp-teal);
    background: var(--gbp-teal);
}

.gbp-dashboard,
.gbp-graph-card {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
}

.gbp-dashboard-metrics,
.gbp-graph-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.gbp-dashboard-metrics article,
.gbp-graph-values span {
    min-height: 90px;
    display: grid;
    place-items: center;
    padding: 0.8rem;
    border-radius: 18px;
    background: #100d07;
    color: #fff8df;
    text-align: center;
}

.gbp-dashboard-metrics span {
    color: #f2ead5;
    font-size: 0.82rem;
    font-weight: 850;
}

.gbp-dashboard-metrics strong {
    color: var(--gbp-gold);
    font-size: 2rem;
}

.gbp-graph-card svg {
    display: block;
    width: 100%;
    min-height: 260px;
}

.gbp-graph-card line {
    stroke: rgba(156, 116, 38, 0.25);
    stroke-width: 2;
}

.gbp-graph-card polyline {
    fill: none;
    stroke: var(--gbp-teal);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 10px 16px rgba(34, 184, 189, 0.24));
}

.gbp-graph-values {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gbp-graph-values span {
    min-height: 34px;
    border-radius: 9px;
    background: rgba(34, 184, 189, 0.12);
    color: var(--gbp-ink);
    font-size: 0.72rem;
    font-weight: 850;
}

.gbp-roadmap-card {
    position: relative;
    overflow: hidden;
}

.gbp-roadmap-card::after {
    content: "";
    position: absolute;
    inset: auto 1rem 1rem;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gbp-gold), var(--gbp-teal));
}

.gbp-deliverable-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gbp-human-card {
    background:
        radial-gradient(circle at 80% 20%, rgba(34, 184, 189, 0.14), transparent 16rem),
        linear-gradient(145deg, #100d07, #2a1f0b);
    color: #fff8df;
}

.gbp-human-card p {
    color: #f2ead5;
}

.gbp-benefit-card {
    padding: 1rem;
}

.gbp-final {
    padding: clamp(4rem, 8vw, 7rem) 0;
    background:
        radial-gradient(circle at 80% 18%, rgba(34, 184, 189, 0.18), transparent 22rem),
        radial-gradient(circle at 20% 80%, rgba(242, 212, 123, 0.18), transparent 20rem),
        linear-gradient(135deg, #100d07, #050503);
    color: #fff8df;
}

.gbp-final h2 {
    max-width: 1080px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.55rem, 5.8vw, 5.6rem);
    line-height: 0.92;
}

.gbp-final p {
    max-width: 820px;
    color: #e4d8bd;
}

body.ai-hub-page {
    --ai-cyan: #4ee8ff;
    --ai-green: #57e6ad;
    --ai-gold: var(--color-gold-bright);
    --ai-deep: #050503;
    --ai-panel: rgba(12, 14, 13, 0.76);
    --ai-pointer-x: 50vw;
    --ai-pointer-y: 20vh;
    background: var(--ai-deep);
}

body.ai-hub-page main {
    overflow: clip;
    background:
        radial-gradient(circle at var(--ai-pointer-x) var(--ai-pointer-y), rgba(78, 232, 255, 0.12), transparent 19rem),
        linear-gradient(180deg, #050503 0%, #0d0b06 38%, #f7f1e5 38%, #fffaf0 100%);
}

body.ai-hub-page .site-action-widget {
    right: 0.55rem;
    width: 104px;
    min-height: 208px;
    border-radius: 58px;
}

body.ai-hub-page .site-action-widget-top {
    min-height: 94px;
    font-size: 0.74rem;
}

body.ai-hub-page .site-action-arrow {
    width: 30px;
    height: 38px;
}

body.ai-hub-page .site-action-arrow::before {
    height: 30px;
}

body.ai-hub-page .site-action-arrow::after {
    width: 21px;
    height: 21px;
}

body.ai-hub-page .site-action-widget-talk {
    width: 78px;
    font-size: 0.76rem;
}

body.ai-hub-page .site-action-widget-talk i {
    width: 17px;
    height: 17px;
    border-width: 3px;
}

.ai-hub-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100%;
    height: 3px;
    pointer-events: none;
    background: rgba(242, 212, 123, 0.1);
}

.ai-hub-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--ai-gold), var(--ai-cyan), var(--ai-green));
    box-shadow: 0 0 20px rgba(78, 232, 255, 0.44);
    transform: scaleX(0);
    transform-origin: left center;
}

.ai-hub-hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 74px);
    padding: clamp(4rem, 8vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem);
    color: #fff8df;
    background:
        linear-gradient(90deg, rgba(78, 232, 255, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 72% 36%, rgba(78, 232, 255, 0.18), transparent 26rem),
        radial-gradient(circle at 24% 28%, rgba(242, 212, 123, 0.18), transparent 24rem),
        linear-gradient(145deg, #050503 0%, #101009 48%, #040403 100%);
    background-size: 84px 84px, 84px 84px, auto, auto, auto;
    isolation: isolate;
}

.ai-hub-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        repeating-linear-gradient(120deg, transparent 0 34px, rgba(78, 232, 255, 0.07) 35px 36px, transparent 37px 74px),
        radial-gradient(circle at var(--ai-pointer-x) var(--ai-pointer-y), rgba(87, 230, 173, 0.12), transparent 21rem);
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.ai-hub-matrix {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(242, 212, 123, 0.36) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(78, 232, 255, 0.24) 0 1px, transparent 1.5px);
    background-size: 84px 84px, 132px 132px;
    animation: aiMatrixDrift 26s linear infinite;
    opacity: 0.42;
}

.ai-hub-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.84fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.ai-hub-hero-copy h1 {
    max-width: 900px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(3rem, 5.2vw, 5.15rem);
    line-height: 0.95;
    letter-spacing: 0;
    text-wrap: balance;
}

.ai-hub-hero-copy .lede {
    max-width: 780px;
    color: var(--ai-gold);
    font-size: clamp(1.25rem, 2.5vw, 1.85rem);
    font-weight: 900;
    line-height: 1.16;
}

.ai-hub-hero-copy p {
    max-width: 740px;
    color: #e6dcc4;
}

.ai-hub-hero-line {
    position: relative;
    padding-left: 1rem;
    border-left: 3px solid var(--ai-cyan);
    color: #ffffff !important;
    font-weight: 900;
}

.ai-hub-robot-stage {
    position: relative;
    min-height: clamp(560px, 76vh, 760px);
    border: 1px solid rgba(78, 232, 255, 0.26);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 38%, rgba(78, 232, 255, 0.18), transparent 26%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(0, 0, 0, 0.32);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.ai-hub-robot-stage::before {
    content: "";
    position: absolute;
    inset: 1rem;
    border: 1px solid rgba(242, 212, 123, 0.16);
    border-radius: 18px;
    pointer-events: none;
}

.ai-hub-robot-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.ai-hub-holo-panel,
.ai-hub-chip,
.ai-prompt-console,
.ai-discipline-card,
.ai-journey-card,
.ai-signal-card,
.ai-framework-card,
.ai-service-console,
.ai-measurement-panel,
.ai-final-panel {
    transform: perspective(900px) rotateX(var(--ai-tilt-x, 0deg)) rotateY(var(--ai-tilt-y, 0deg)) translateY(var(--ai-tilt-lift, 0));
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.ai-hub-holo-panel {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid rgba(78, 232, 255, 0.38);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(78, 232, 255, 0.12), rgba(242, 212, 123, 0.05)),
        rgba(5, 5, 3, 0.76);
    color: #ffffff;
    backdrop-filter: blur(18px);
}

.ai-hub-holo-panel span,
.ai-service-console span,
.ai-measurement-panel span {
    color: var(--ai-cyan);
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ai-hub-holo-panel strong {
    color: #ffffff;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.08;
}

.ai-hub-holo-panel p {
    margin: 0;
    color: #d8ceb8;
}

.ai-hub-chip {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 70px;
    aspect-ratio: 1;
    border: 1px solid rgba(242, 212, 123, 0.36);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(78, 232, 255, 0.28), transparent 62%),
        rgba(5, 5, 3, 0.74);
    color: #ffffff;
    font-weight: 950;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
    animation: aiChipFloat 5s ease-in-out infinite;
}

.ai-hub-chip.chip-a {
    top: 9%;
    left: 10%;
}

.ai-hub-chip.chip-b {
    top: 15%;
    right: 9%;
    animation-delay: -1s;
}

.ai-hub-chip.chip-c {
    left: 8%;
    bottom: 28%;
    animation-delay: -2s;
}

.ai-hub-chip.chip-d {
    right: 11%;
    bottom: 32%;
    animation-delay: -3s;
}

.ai-hub-jump-nav {
    position: sticky;
    top: 74px;
    z-index: 760;
    border-top: 1px solid rgba(242, 212, 123, 0.18);
    border-bottom: 1px solid rgba(242, 212, 123, 0.18);
    background: rgba(8, 7, 4, 0.92);
    backdrop-filter: blur(18px);
}

.ai-hub-jump-nav .container {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.ai-hub-jump-nav a {
    flex: 0 0 auto;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0.48rem 0.78rem;
    border: 1px solid rgba(242, 212, 123, 0.22);
    border-radius: 999px;
    color: #fff8df;
    font-size: 0.82rem;
    font-weight: 850;
}

.ai-hub-jump-nav a:hover,
.ai-hub-jump-nav a.is-active {
    border-color: rgba(78, 232, 255, 0.56);
    background: rgba(78, 232, 255, 0.12);
    color: #ffffff;
}

.ai-hub-section {
    position: relative;
    scroll-margin-top: 140px;
    background: #fffaf0;
}

.ai-hub-section .section-heading h2 {
    max-width: 980px;
}

.ai-hub-split {
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(320px, 0.72fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
}

.ai-prompt-console,
.ai-service-console,
.ai-measurement-panel {
    display: grid;
    gap: 0.75rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid rgba(78, 232, 255, 0.26);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(5, 5, 3, 0.92), rgba(22, 19, 13, 0.84)),
        #050503;
    color: #fff8df;
    box-shadow: 0 28px 70px rgba(22, 19, 13, 0.2);
}

.ai-prompt-console span {
    color: var(--ai-gold);
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.ai-prompt-console p {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.45rem, 3vw, 2.3rem);
    font-weight: 900;
    line-height: 1.05;
}

.ai-prompt-console small {
    color: #d8ceb8;
    font-weight: 750;
}

.ai-journey-grid,
.ai-discipline-grid,
.ai-signal-grid,
.ai-service-grid,
.ai-principle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: clamp(1.5rem, 4vw, 3rem);
}

.ai-journey-card,
.ai-discipline-card,
.ai-signal-card,
.ai-service-card,
.ai-principle-grid div,
.ai-framework-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.65rem;
    min-height: 220px;
    padding: 1.1rem;
    border: 1px solid rgba(156, 116, 38, 0.18);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 248, 223, 0.66)),
        #ffffff;
    box-shadow: 0 18px 44px rgba(22, 19, 13, 0.1);
}

.ai-journey-card::before,
.ai-discipline-card::before,
.ai-signal-card::before,
.ai-service-card::before,
.ai-framework-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--ai-gold), var(--ai-cyan), var(--ai-green));
}

.ai-journey-card span,
.ai-discipline-card span,
.ai-framework-card span {
    color: #9b7328;
    font-size: 0.8rem;
    font-weight: 950;
}

.ai-journey-card h3,
.ai-discipline-card h3,
.ai-signal-card h3,
.ai-service-card h3,
.ai-framework-card h3 {
    margin: 0;
    color: #100d07;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    line-height: 1;
}

.ai-journey-card p,
.ai-discipline-card p,
.ai-signal-card p,
.ai-service-card p,
.ai-framework-card p,
.ai-principle-grid p {
    margin: 0;
    color: #514838;
}

.ai-hub-dark-band {
    color: #fff8df;
    background:
        linear-gradient(90deg, rgba(78, 232, 255, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 212, 123, 0.045) 1px, transparent 1px),
        radial-gradient(circle at 18% 20%, rgba(78, 232, 255, 0.12), transparent 28rem),
        linear-gradient(145deg, #050503, #11100b 52%, #050503);
    background-size: 80px 80px, 80px 80px, auto, auto;
}

.ai-hub-dark-band h2,
.ai-hub-dark-band h3 {
    color: #ffffff;
}

.ai-hub-dark-band p,
.ai-hub-dark-band li {
    color: #e4d8bd;
}

.ai-clarity-stack,
.ai-layered-model,
.ai-step-list,
.ai-failure-stack {
    display: grid;
    gap: 0.7rem;
}

.ai-clarity-stack span,
.ai-layered-model span,
.ai-step-list li,
.ai-check-list li,
.ai-measurement-panel li {
    position: relative;
    padding: 0.76rem 0.9rem 0.76rem 2.2rem;
    border: 1px solid rgba(242, 212, 123, 0.2);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.06);
    color: #fff8df;
    font-weight: 760;
}

.ai-check-list,
.ai-measurement-panel ul,
.ai-discipline-card ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-check-list li {
    border-color: rgba(156, 116, 38, 0.14);
    background: rgba(255, 255, 255, 0.72);
    color: #17130b;
}

.ai-clarity-stack span::before,
.ai-layered-model span::before,
.ai-step-list li::before,
.ai-check-list li::before,
.ai-measurement-panel li::before,
.ai-discipline-card li::before {
    content: "";
    position: absolute;
    left: 0.85rem;
    top: 1.05rem;
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: var(--ai-cyan);
    box-shadow: 0 0 18px rgba(78, 232, 255, 0.45);
}

.ai-discipline-card {
    min-height: 460px;
}

.ai-discipline-card li {
    position: relative;
    padding-left: 1.3rem;
    color: #514838;
    font-size: 0.92rem;
    font-weight: 720;
}

.ai-discipline-card li::before {
    left: 0;
    top: 0.58rem;
    width: 0.42rem;
    height: 0.42rem;
    background: var(--ai-gold);
}

.ai-table-wrap {
    overflow-x: auto;
    margin-top: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid rgba(156, 116, 38, 0.2);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 54px rgba(22, 19, 13, 0.12);
}

.ai-hub-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.ai-hub-table th,
.ai-hub-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(156, 116, 38, 0.16);
    color: #514838;
    text-align: left;
    vertical-align: top;
}

.ai-hub-table thead th {
    background: #100d07;
    color: #fff8df;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ai-hub-table tbody th {
    color: #100d07;
    font-size: 1rem;
}

.ai-framework-section {
    background:
        radial-gradient(circle at 50% 42%, rgba(78, 232, 255, 0.12), transparent 34rem),
        #fffaf0;
}

.ai-framework-orbit {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: clamp(1.5rem, 4vw, 3rem);
}

.ai-framework-card {
    min-height: 320px;
}

.ai-service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-service-card {
    min-height: 260px;
}

.ai-service-console strong,
.ai-measurement-panel h3 {
    color: #ffffff;
    font-size: clamp(1.45rem, 3vw, 2.2rem);
    line-height: 1.04;
}

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

.ai-step-list li {
    counter-increment: ai-step;
}

.ai-step-list li::before {
    content: counter(ai-step);
    display: grid;
    place-items: center;
    top: 0.72rem;
    width: 1rem;
    height: 1rem;
    background: var(--ai-gold);
    color: #080704;
    font-size: 0.68rem;
    font-weight: 950;
    box-shadow: none;
}

.ai-failure-stack details,
.ai-faq-list details {
    border: 1px solid rgba(156, 116, 38, 0.18);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 14px 34px rgba(22, 19, 13, 0.08);
}

.ai-failure-stack details + details,
.ai-faq-list details + details {
    margin-top: 0.75rem;
}

.ai-failure-stack summary,
.ai-faq-list summary {
    cursor: pointer;
    padding: 1rem;
    color: #100d07;
    font-weight: 900;
}

.ai-failure-stack p,
.ai-faq-list p {
    margin: 0;
    padding: 0 1rem 1rem;
    color: #514838;
}

.ai-measurement-section {
    background:
        linear-gradient(180deg, #fffaf0, #f3ead8);
}

.ai-measurement-panel li {
    color: #fff8df;
}

.ai-principle-grid {
    grid-template-columns: 1fr;
    margin-top: 0;
}

.ai-principle-grid div {
    min-height: 0;
    border-color: rgba(78, 232, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
}

.ai-principle-grid strong {
    color: var(--ai-gold);
    font-size: 1.2rem;
}

.ai-principle-grid p {
    color: #e4d8bd;
}

.ai-faq-list {
    max-width: 980px;
}

.ai-final-cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 26%, rgba(78, 232, 255, 0.18), transparent 26rem),
        linear-gradient(145deg, #050503, #100d07);
    color: #fff8df;
}

.ai-final-panel {
    display: grid;
    gap: 0.8rem;
    padding: clamp(1.3rem, 4vw, 3rem);
    border: 1px solid rgba(242, 212, 123, 0.28);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(5, 5, 3, 0.72);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.28);
}

.ai-final-panel h2 {
    max-width: 920px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.2rem, 5vw, 4.8rem);
    line-height: 0.94;
}

.ai-final-panel p {
    max-width: 780px;
    margin: 0;
    color: #e4d8bd;
}

@keyframes aiMatrixDrift {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 220px 440px, -260px 260px;
    }
}

@keyframes aiChipFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -12px, 0);
    }
}