:root {
    color-scheme: light;
    --font-sans: Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --reveal-ease: cubic-bezier(0.2, 0.7, 0.18, 1);
    --bg: #f3efe8;
    --bg-soft: #ece8df;
    --surface: rgba(255, 255, 255, 0.82);
    --surface-strong: #fbfaf7;
    --surface-muted: rgba(246, 242, 236, 0.82);
    --surface-dark: #141b20;
    --text: #151b20;
    --text-soft: #5b6670;
    --ink: #0f1418;
    --ink-soft: #48535d;
    --accent: #67788c;
    --accent-strong: #445466;
    --accent-soft: rgba(103, 120, 140, 0.12);
    --line: rgba(15, 20, 24, 0.10);
    --line-strong: rgba(15, 20, 24, 0.18);
    --line-inverse: rgba(255, 255, 255, 0.12);
    --shadow-soft: 0 18px 42px rgba(15, 20, 24, 0.06);
    --shadow-card: 0 32px 96px rgba(15, 20, 24, 0.11);
    --radius-xl: 34px;
    --radius-lg: 26px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --container: 1180px;
    --header-bg: rgba(243, 239, 232, 0.80);
    --hero-overlay:
        radial-gradient(circle at 0% 0%, rgba(103, 120, 140, 0.14), transparent 32%),
        radial-gradient(circle at 100% 0%, rgba(68, 84, 102, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0));
    --hero-grid-line: rgba(69, 84, 102, 0.07);
    --contact-surface: #171f24;
    --contact-surface-soft: rgba(255, 255, 255, 0.05);
    --contact-text: #edf1f3;
    --contact-text-soft: rgba(237, 241, 243, 0.72);
    --contact-line: rgba(255, 255, 255, 0.12);
    --contact-button-bg: #edf1f3;
    --contact-button-text: #11161a;
    --button-primary-bg: var(--ink);
    --button-primary-text: #f5f1ea;
    --button-secondary-bg: rgba(255, 255, 255, 0.46);
    --button-secondary-text: var(--text);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    font-family: var(--font-sans);
    background: linear-gradient(180deg, #f7f3ec 0%, var(--bg) 16%, var(--bg) 100%);
    color: var(--text);
    line-height: 1.68;
    letter-spacing: 0;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
h1, h2, h3, strong, summary, .button {
    font-family: var(--font-display);
    font-feature-settings: "ss01" 1, "cv11" 1;
}
h1, h2, h3, summary { text-wrap: balance; }
.lead p, .section-copy p, .support p, .faq-answer p { text-wrap: pretty; }
.shell { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 1rem;
    z-index: 1000;
    background: var(--surface-strong);
    color: var(--ink);
    border-radius: 999px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
}
.skip-link:focus { left: 1rem; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    padding-top: 14px;
    background: linear-gradient(180deg, rgba(243, 239, 232, 0.92), rgba(243, 239, 232, 0.72));
    backdrop-filter: blur(16px);
    transition: background 220ms ease, box-shadow 220ms ease;
}
.site-header[data-scrolled="true"] {
    box-shadow: 0 8px 26px rgba(15, 20, 24, 0.05);
}
.nav-row {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    padding: 0.85rem 1rem 0.85rem 1.2rem;
    border: 1px solid rgba(15, 20, 24, 0.08);
    border-radius: var(--radius-xl);
    background: var(--header-bg);
    box-shadow: 0 14px 34px rgba(15, 20, 24, 0.05), inset 0 1px 0 rgba(255,255,255,0.48);
}
.brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}
.brand-logo,
.footer-logo {
    display: block;
    width: 100%;
    height: auto;
}
.brand-logo { width: clamp(166px, 20vw, 232px); }
.footer-logo { width: clamp(138px, 16vw, 188px); }
.footer-brand {
    display: grid;
    gap: 0.55rem;
    max-width: 30rem;
}
.site-nav {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.32rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.40);
}
.site-nav a {
    padding: 0.64rem 0.96rem;
    border-radius: 999px;
    color: var(--text-soft);
    font-size: 0.94rem;
    line-height: 1;
    transition: color 200ms ease, background 200ms ease;
}
.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--text);
    background: rgba(255, 255, 255, 0.72);
}
.mobile-nav-toggle,
.mobile-nav-shell {
    display: none;
}
.mobile-nav-toggle {
    position: relative;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.46);
    color: var(--text);
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.mobile-nav-toggle:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.74);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}
.mobile-nav-toggle span {
    display: block;
    width: 16px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.mobile-nav-shell {
    padding-top: 0.55rem;
}
.mobile-nav-panel[hidden] { display: none !important; }
.mobile-nav-panel {
    display: grid;
    gap: 0.35rem;
    padding: 0.5rem;
    border: 1px solid rgba(15, 20, 24, 0.08);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--header-bg) 100%, rgba(255,255,255,.28));
    box-shadow: 0 18px 42px rgba(15, 20, 24, 0.08), inset 0 1px 0 rgba(255,255,255,0.42);
}
.mobile-nav-panel a {
    display: block;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
    color: var(--text);
    background: rgba(255, 255, 255, 0.26);
    transition: background 180ms ease, border-color 180ms ease;
}
.mobile-nav-panel a:hover,
.mobile-nav-panel a:focus-visible {
    background: rgba(255, 255, 255, 0.68);
}

.hero {
    position: relative;
    overflow: clip;
    padding: 4.8rem 0 2.2rem;
    background: var(--hero-overlay);
}
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero::before {
    background:
        linear-gradient(var(--hero-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--hero-grid-line) 1px, transparent 1px);
    background-size: 144px 144px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.50), transparent 88%);
    opacity: 0.55;
}
.hero::after {
    inset: auto 0 0;
    height: 160px;
    background: linear-gradient(180deg, transparent, var(--bg));
}
.hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
    gap: 2.6rem;
    align-items: start;
}
.hero-copy {
    position: relative;
    padding-top: 0.75rem;
}
.eyebrow,
.section-kicker,
.metric-label,
.panel-label,
.contact-card-label {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.74rem;
}
.eyebrow,
.section-kicker {
    color: var(--accent-strong);
    margin-bottom: 1rem;
}
.hero h1 {
    margin: 0;
    max-width: 10ch;
    font-size: clamp(3.3rem, 5.8vw, 5.65rem);
    line-height: 0.94;
    letter-spacing: -0.058em;
}
.lead {
    margin-top: 1.85rem;
    max-width: 44rem;
}
.lead p {
    font-size: clamp(1.12rem, 1.95vw, 1.33rem);
    line-height: 1.58;
    color: color-mix(in srgb, var(--text) 92%, transparent);
}
.support {
    margin-top: 1.2rem;
    max-width: 42rem;
    color: var(--text-soft);
    font-size: 1rem;
}
.cta-row {
    margin-top: 2.2rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 1.35rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1;
    white-space: nowrap;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.button-compact {
    min-height: 46px;
    padding: 0 1.08rem;
    font-size: 0.95rem;
}
.button:hover { transform: translateY(-1px); }
.button-primary {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    box-shadow: 0 10px 26px rgba(15, 20, 24, 0.12);
}
.button-secondary {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border-color: var(--line);
}
.button-full { width: 100%; }

.hero-signals {
    margin-top: 1.95rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}
.signal-pill,
.premise-tag,
.card-chip,
.brand-pill {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 0.92rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.46);
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1;
}
.brand-pill {
    min-height: 40px;
    padding: 0.2rem 0.95rem;
    color: var(--text);
    line-height: 1.25;
}

.hero-panel {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,250,247,.86));
    box-shadow: var(--shadow-card);
}
.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 46%);
    pointer-events: none;
}
.hero-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    pointer-events: none;
}
.panel-note,
.panel-card {
    position: relative;
    padding: 1.3rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.66);
}
.panel-note {
    background: linear-gradient(180deg, rgba(103,120,140,0.08), rgba(255,255,255,0.54));
}
.panel-note::before,
.panel-card::before,
.practice-card::before,
.experience-card::before,
.timeline-step::before,
.principle-card::before,
.issue-card::before {
    content: "";
    position: absolute;
    left: 1.35rem;
    right: 1.35rem;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-strong) 78%, transparent), transparent 78%);
    opacity: 0.72;
}
.panel-label,
.metric-label,
.contact-card-label {
    display: inline-block;
    color: var(--accent-strong);
    margin-bottom: 0.75rem;
}
.panel-note p,
.panel-card p {
    margin: 0;
    color: var(--text-soft);
}
.panel-card strong {
    display: block;
    margin-bottom: 0.65rem;
    font-size: 1.18rem;
    line-height: 1.24;
    letter-spacing: -0.02em;
}
.panel-card-muted { background: rgba(247, 244, 238, 0.84); }
.panel-steps {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.72rem;
    counter-reset: panel-steps;
}
.panel-steps li {
    position: relative;
    padding-left: 2rem;
    color: var(--text);
}
.panel-steps li::before {
    counter-increment: panel-steps;
    content: "0" counter(panel-steps);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-strong);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
}

.premise-band { padding: 0 0 1.65rem; }
.premise-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.95fr);
    gap: 1.6rem;
    align-items: center;
    padding: 1.45rem 0 0;
}
.premise-copy {
    margin: 0;
    font-size: clamp(1.12rem, 1.82vw, 1.34rem);
    line-height: 1.54;
    letter-spacing: -0.018em;
    max-width: 32ch;
}
.premise-tags {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.section {
    position: relative;
    padding: 4.5rem 0;
}
.section-soft {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 58%, transparent), transparent 100%);
}
.section-frame {
    position: relative;
}
.section-frame::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1.15rem;
    width: clamp(72px, 10vw, 132px);
    height: 1px;
    background: linear-gradient(90deg, var(--accent-strong), transparent 88%);
    opacity: 0.42;
    transform: scaleX(0.42);
    transform-origin: left center;
    transition: transform 900ms var(--reveal-ease), opacity 900ms var(--reveal-ease);
}
.section-observe.is-visible .section-frame::before {
    opacity: 0.9;
    transform: scaleX(1);
}
.section-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.45rem;
}
.section-title-block {
    display: grid;
    gap: 0.95rem;
}
.section h2 {
    margin: 0;
    font-size: clamp(2.3rem, 4vw, 3.55rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
    max-width: 13ch;
}
.section-copy {
    font-size: 1.02rem;
    line-height: 1.78;
    color: var(--text-soft);
    max-width: 50rem;
}
.section-copy.narrow { max-width: 43rem; }
.section-copy ul { gap: 0.7rem; display: grid; }
.split-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
    gap: 2.2rem;
    align-items: start;
}

.card-grid,
.principles-grid,
.issues-grid,
.timeline-grid {
    display: grid;
    gap: 1rem;
}
.card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.principles-grid,
.issues-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.timeline-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card {
    position: relative;
    min-height: 100%;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,250,247,.86));
    box-shadow: var(--shadow-soft);
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
}
.practice-card:hover,
.experience-card:hover,
.timeline-step:hover,
.principle-card:hover,
.issue-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
    box-shadow: 0 24px 54px rgba(15, 20, 24, 0.09);
}
.practice-card-top,
.experience-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.card-index,
.issue-index,
.principle-number {
    color: var(--accent-strong);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.practice-card h3,
.experience-card h3 {
    margin: 0;
    font-size: 1.28rem;
    line-height: 1.22;
    letter-spacing: -0.02em;
}
.card-copy {
    color: var(--text-soft);
    display: grid;
    gap: 1rem;
}
.card-copy ul {
    display: grid;
    gap: 0.7rem;
    margin: 0;
}
.card-copy li::marker,
.experience-list li::marker { color: var(--accent); }

.experience-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}
.experience-card-wide { grid-column: span 12; }
.experience-grid > .experience-card:not(.experience-card-wide) { grid-column: span 6; }
.brand-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}
.experience-list {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    color: var(--text-soft);
}
.experience-note {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.7;
}

.principles-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: 1.3rem;
    align-items: start;
}
.principle-card p,
.issue-card p {
    margin: 0.55rem 0 0;
    color: var(--text);
    line-height: 1.58;
}

.timeline-number {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(103, 120, 140, 0.16);
    background: rgba(103, 120, 140, 0.08);
    color: var(--accent-strong);
    font-weight: 700;
}
.timeline-content h3 {
    margin: 0 0 0.8rem;
    font-size: 1.1rem;
    line-height: 1.28;
    letter-spacing: -0.02em;
}
.timeline-content p {
    margin: 0;
    color: var(--text-soft);
}

.issues-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
    gap: 1.3rem;
    align-items: start;
}
.issue-card { min-height: 100%; }

.faq-list {
    display: grid;
    gap: 0.85rem;
}
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.72);
    overflow: clip;
    transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.faq-item:hover {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    box-shadow: var(--shadow-soft);
}
.faq-item[open] {
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-soft);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.24rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
    position: relative;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}
.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 1.5px;
    border-radius: 999px;
    background: var(--accent-strong);
    transform: translate(-50%, -50%);
    transition: transform 180ms ease, opacity 180ms ease;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scaleX(0.4);
}
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-answer {
    padding: 0 1.4rem 1.24rem;
    color: var(--text-soft);
}

.contact-section {
    padding-bottom: 0;
}
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    gap: 1.35rem;
    align-items: start;
}
.contact-copy {
    padding-right: 1rem;
    color: var(--contact-text);
}
.contact-section .section-frame::before {
    background: linear-gradient(90deg, rgba(237,241,243,0.76), transparent 88%);
}
.contact-section .section-kicker,
.contact-section .section-copy,
.contact-section h2 {
    color: inherit;
}
.contact-card {
    padding: 1.6rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, color-mix(in srgb, var(--contact-surface) 100%, transparent), color-mix(in srgb, var(--contact-surface) 92%, transparent));
    color: var(--contact-text);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--contact-line);
}
.contact-card-head {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--contact-line);
}
.contact-card-head p {
    margin: 0;
    color: var(--contact-text-soft);
}
.contact-card-label { color: var(--contact-text-soft); }
.contact-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
}
.contact-action-card {
    display: grid;
    gap: 0.55rem;
    padding: 1.05rem 1.1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--contact-line);
    background: color-mix(in srgb, var(--contact-surface-soft) 86%, transparent);
    min-height: 100%;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.contact-action-card:hover,
.contact-action-card:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--contact-line) 55%, var(--contact-button-bg) 24%);
    background: color-mix(in srgb, var(--contact-surface-soft) 72%, var(--contact-button-bg) 7%);
}
.contact-action-card-phone { grid-column: 1 / -1; }
.contact-action-label,
.contact-meta-label {
    font-size: 0.76rem;
    line-height: 1.2;
    color: var(--contact-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.contact-action-card strong,
.contact-card-meta strong {
    font-size: 1.05rem;
    line-height: 1.32;
    letter-spacing: -0.02em;
}
.contact-action-meta {
    color: var(--contact-text-soft);
    font-size: 0.9rem;
    line-height: 1.52;
}
.contact-phone-box {
    display: grid;
    gap: 0.55rem;
    align-items: start;
}
.contact-phone-reveal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    width: fit-content;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid var(--contact-line);
    background: var(--contact-surface-soft);
    color: var(--contact-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.contact-phone-reveal:hover {
    background: color-mix(in srgb, var(--contact-surface-soft) 60%, var(--contact-button-bg) 10%);
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--contact-line) 50%, var(--contact-button-bg) 20%);
}
.contact-phone-box a {
    display: inline-flex;
    width: fit-content;
    font-weight: 600;
    color: inherit;
    border-bottom: 1px solid transparent;
}
.contact-phone-box a:hover,
.contact-phone-box a:focus-visible {
    border-color: currentColor;
}
.contact-card-meta {
    display: grid;
    gap: 0.4rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--contact-line);
}
.contact-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.25rem;
    align-items: flex-start;
}
.contact-button-row .button { flex: 0 1 auto; }
.contact-button-row .button.button-compact { box-shadow: none; }
.contact-card .button-primary {
    background: var(--contact-button-bg);
    color: var(--contact-button-text);
    box-shadow: none;
}
.contact-secondary-button {
    background: transparent;
    color: var(--contact-text);
    border-color: var(--contact-line);
}
.contact-secondary-button:hover,
.contact-secondary-button:focus-visible {
    background: color-mix(in srgb, var(--contact-surface-soft) 55%, transparent);
}

.contact-section,
.site-footer {
    background: var(--ink);
}
.contact-section {
    padding-top: 4.5rem;
    padding-bottom: 2rem;
}
.site-footer {
    padding: 0 0 2.4rem;
    color: var(--contact-text);
}
.footer-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line-inverse);
}
.site-footer p {
    margin: 0;
    color: var(--contact-text-soft);
}
.footer-meta {
    text-align: right;
    font-size: 0.92rem;
}

.js .reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
        opacity 680ms var(--reveal-ease),
        transform 680ms var(--reveal-ease),
        filter 680ms var(--reveal-ease),
        box-shadow 220ms ease;
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform, opacity;
}
.js .reveal[data-reveal="left"] { transform: translate3d(-26px, 0, 0); }
.js .reveal[data-reveal="right"] { transform: translate3d(26px, 0, 0); }
.js .reveal[data-reveal="up"] { transform: translate3d(0, 22px, 0); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.section-observe { position: relative; overflow: clip; }
.reveal-stagger > .reveal { transition-delay: calc(var(--stagger-index, 0) * var(--stagger-step, 90ms)); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (max-width: 1180px) {
    .hero-layout,
    .split-grid,
    .principles-layout,
    .issues-layout,
    .contact-grid,
    .premise-row {
        grid-template-columns: 1fr;
    }
    .card-grid,
    .timeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .experience-grid > .experience-card:not(.experience-card-wide) { grid-column: span 6; }
    .premise-tags { justify-content: flex-start; }
    .hero h1 { max-width: 11ch; }
}

@media (max-width: 860px) {
    body.mobile-nav-open { overflow: hidden; }
    .shell { width: min(calc(100% - 30px), var(--container)); }
    .site-header { padding-top: 10px; }
    .site-nav { display: none; }
    .mobile-nav-toggle { display: inline-flex; }
    .mobile-nav-shell { display: block; }
    .nav-row {
        min-height: 74px;
        padding: 0.8rem 0.95rem;
    }
    .brand-logo { width: min(48vw, 184px); }
    .footer-logo { width: min(42vw, 164px); }
    .hero { padding-top: 4rem; }
    .mobile-nav-panel { margin-bottom: 0.2rem; }
    .section { padding: 4rem 0; }
    .contact-section { padding-top: 4rem; }
    .card-grid,
    .timeline-grid,
    .principles-grid,
    .issues-grid { grid-template-columns: 1fr; }
    .experience-grid { grid-template-columns: 1fr; }
    .experience-grid > .experience-card:not(.experience-card-wide),
    .experience-card-wide { grid-column: auto; }
    .contact-actions-grid { grid-template-columns: 1fr; }
    .footer-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-meta { text-align: left; }
}

@media (max-width: 640px) {
    .hero-layout { gap: 1.2rem; }
    .mobile-nav-toggle { width: 46px; height: 46px; }
    .mobile-nav-panel a { padding: 0.86rem 0.96rem; }
    .hero h1 {
        font-size: clamp(2.7rem, 15vw, 4rem);
        max-width: 12ch;
    }
    .cta-row,
    .hero-signals { width: 100%; }
    .button,
    .button-full { width: 100%; }
    .practice-card,
    .timeline-step,
    .hero-panel,
    .contact-card,
    .experience-card { padding: 1.25rem; }
    .contact-button-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }
    .contact-button-row .button {
        width: auto;
        max-width: 100%;
        flex: 0 0 auto;
        min-height: 44px;
        padding-inline: 1rem;
    }
    .contact-phone-reveal {
        width: auto;
        max-width: 100%;
    }
    .premise-copy { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero::before { animation: none; }
    .js .reveal,
    .js .reveal[data-reveal="left"],
    .js .reveal[data-reveal="right"],
    .js .reveal[data-reveal="up"] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .section-frame::before { transition: none; transform: none; opacity: 0.75; }
    .button:hover,
    .practice-card:hover,
    .experience-card:hover,
    .principle-card:hover,
    .issue-card:hover,
    .timeline-step:hover,
    .faq-item:hover,
    .contact-phone-reveal:hover,
    .contact-action-card:hover { transform: none; }
    .faq-icon::before,
    .faq-icon::after,
    .mobile-nav-toggle span { transition: none; }
}


/* === v8.6 contrast + hierarchy pass === */
:root {
    --header-bg-strong: rgba(247, 243, 236, 0.9);
    --header-stroke-strong: rgba(15, 20, 24, 0.11);
    --panel-shell: linear-gradient(180deg, rgba(239,236,231,.96), rgba(232,227,219,.92));
    --panel-card-bg: rgba(252,250,246,.86);
}
.site-header {
    padding-top: 12px;
    background: linear-gradient(180deg, rgba(243, 239, 232, 0.96), rgba(243, 239, 232, 0.82));
    backdrop-filter: blur(18px);
}
.site-header[data-scrolled="true"] {
    box-shadow: 0 12px 32px rgba(15, 20, 24, 0.07);
}
.nav-row {
    min-height: 92px;
    padding: 0.9rem 1rem 0.9rem 1.4rem;
    border: 1px solid var(--header-stroke-strong);
    background: linear-gradient(180deg, rgba(247,243,236,.96), rgba(242,238,231,.92));
    box-shadow:
        0 18px 42px rgba(15, 20, 24, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.62),
        inset 0 -1px 0 rgba(15,20,24,0.02);
}
.brand {
    min-height: 60px;
    display: inline-flex;
    align-items: center;
}
.brand-logo {
    width: clamp(170px, 20vw, 238px);
    transform: translateY(-1px);
}
.site-nav {
    padding: 0.38rem;
    border-color: rgba(15, 20, 24, 0.09);
    background: rgba(255, 255, 255, 0.48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.56);
}
.site-nav a {
    padding: 0.72rem 1.02rem;
    color: color-mix(in srgb, var(--text-soft) 92%, var(--ink));
}
.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.86);
}
.hero {
    padding: 5.05rem 0 2.4rem;
    background:
        radial-gradient(1200px 420px at 9% 12%, rgba(255,255,255,.62), transparent 62%),
        radial-gradient(760px 340px at 87% 8%, rgba(255,255,255,.34), transparent 60%),
        linear-gradient(180deg, rgba(236,231,223,.88), rgba(243,239,232,1) 28%);
}
.hero::before {
    opacity: 0.68;
}
.hero-copy {
    max-width: 51rem;
}
.hero h1 {
    max-width: 9.4ch;
    letter-spacing: -0.061em;
}
.lead {
    margin-top: 1.95rem;
}
.lead p {
    color: color-mix(in srgb, var(--ink) 88%, transparent);
}
.support {
    margin-top: 1.28rem;
    color: color-mix(in srgb, var(--text-soft) 94%, var(--ink));
}
.signal-pill {
    background: rgba(255,255,255,.66);
    border-color: rgba(15,20,24,.09);
}
.hero-panel {
    gap: 1.05rem;
    padding: 1.5rem;
    border-color: rgba(15,20,24,.1);
    background: var(--panel-shell);
    box-shadow:
        0 34px 88px rgba(15, 20, 24, 0.11),
        0 10px 28px rgba(15, 20, 24, 0.04),
        inset 0 1px 0 rgba(255,255,255,.56);
}
.hero-panel::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,.28), transparent 38%),
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 52%);
}
.panel-note,
.panel-card {
    padding: 1.42rem;
    border-color: rgba(15,20,24,.095);
    background: var(--panel-card-bg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.48);
}
.panel-note {
    background: linear-gradient(180deg, rgba(234,238,243,.72), rgba(251,250,246,.9));
}
.panel-card-muted {
    background: rgba(244, 240, 233, 0.92);
}
.panel-card strong {
    margin-bottom: 0.72rem;
    font-size: 1.2rem;
}
.mobile-nav-toggle {
    width: 54px;
    height: 54px;
    gap: 0;
    border-radius: 18px;
    border: 1px solid rgba(15, 20, 24, 0.1);
    background: linear-gradient(180deg, rgba(246,242,235,.96), rgba(238,233,226,.92));
    box-shadow: 0 10px 24px rgba(15, 20, 24, 0.05), inset 0 1px 0 rgba(255,255,255,0.56);
}
.mobile-nav-toggle:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(250,246,240,.98), rgba(242,237,230,.94));
    border-color: color-mix(in srgb, var(--accent-strong) 28%, var(--line));
}
.mobile-nav-toggle span {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 1.6px;
    margin-left: -9px;
    border-radius: 999px;
    background: rgba(21, 27, 32, 0.88);
}
.mobile-nav-toggle span:nth-child(1) { transform: translateY(-6px); }
.mobile-nav-toggle span:nth-child(2) { width: 14px; margin-left: -7px; transform: translateY(0); }
.mobile-nav-toggle span:nth-child(3) { transform: translateY(6px); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(0) rotate(-45deg); }
.mobile-nav-panel {
    border-color: rgba(15,20,24,.1);
    background: linear-gradient(180deg, rgba(246,242,235,.98), rgba(240,235,228,.96));
    box-shadow: 0 22px 48px rgba(15, 20, 24, 0.1), inset 0 1px 0 rgba(255,255,255,0.5);
}
.mobile-nav-panel a {
    background: rgba(255,255,255,.38);
    border: 1px solid transparent;
}
.mobile-nav-panel a:hover,
.mobile-nav-panel a:focus-visible {
    background: rgba(255,255,255,.78);
    border-color: rgba(15,20,24,.08);
}
@media (max-width: 860px) {
    .site-header {
        padding-top: 10px;
    }
    .nav-row {
        min-height: 88px;
        padding: 0.75rem 0.85rem 0.75rem 1rem;
    }
    .brand {
        min-height: 56px;
    }
    .brand-logo {
        width: clamp(178px, 48vw, 232px);
        transform: translateY(-2px);
    }
    .hero {
        padding-top: 4.2rem;
    }
}


/* === v8.7 tonal architecture pass === */
:root {
    --bg-deep: #ede8df;
    --surface-elevated: rgba(255,255,255,0.92);
    --surface-warm: rgba(242, 237, 229, 0.9);
    --section-wash: rgba(232, 227, 218, 0.72);
}
body {
    background:
        radial-gradient(1200px 460px at 50% -6%, rgba(255,255,255,.56), transparent 62%),
        linear-gradient(180deg, #f6f2ea 0%, #f1ece4 14%, var(--bg) 42%, var(--bg-deep) 100%);
}
.section {
    padding: 4.8rem 0;
}
.section-soft {
    background: linear-gradient(180deg, rgba(232, 227, 218, 0.66), rgba(243, 239, 232, 0.18) 68%, transparent 100%);
}
.premise-band {
    padding: 0.4rem 0 2.1rem;
}
.premise-row {
    padding: 1.55rem 1.35rem 0;
    border-top: 1px solid rgba(15,20,24,.08);
    background: linear-gradient(180deg, rgba(248,244,238,.52), transparent 88%);
    border-radius: 26px 26px 0 0;
}
.section-frame::before {
    opacity: 0.5;
}
.section-head {
    margin-bottom: 2.7rem;
}
.section-copy {
    color: color-mix(in srgb, var(--text-soft) 95%, var(--ink));
}
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item {
    border-color: rgba(15,20,24,.11);
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,244,238,.92));
    box-shadow:
        0 20px 50px rgba(15,20,24,.07),
        0 6px 18px rgba(15,20,24,.03),
        inset 0 1px 0 rgba(255,255,255,.52);
}
.practice-card:hover,
.experience-card:hover,
.timeline-step:hover,
.principle-card:hover,
.issue-card:hover,
.faq-item:hover,
.faq-item[open] {
    border-color: color-mix(in srgb, var(--accent-strong) 18%, rgba(15,20,24,.11));
    box-shadow:
        0 24px 56px rgba(15,20,24,.08),
        0 8px 22px rgba(15,20,24,.04),
        inset 0 1px 0 rgba(255,255,255,.56);
}
.practice-card::after,
.experience-card::after,
.timeline-step::after,
.principle-card::after,
.issue-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 42%);
}
.card-grid,
.principles-grid,
.issues-grid,
.timeline-grid,
.faq-list {
    gap: 1.08rem;
}
.positioning.section-soft,
.principles.section-soft,
.faq-section.section-soft {
    background: linear-gradient(180deg, rgba(232,227,218,.74), rgba(243,239,232,.22) 72%, transparent 100%);
}
.experience-card .brand-pill,
.tag,
.signal-pill {
    background: rgba(255,255,255,.74);
    border-color: rgba(15,20,24,.09);
}
.faq-item summary {
    padding: 1.3rem 1.45rem;
}
.faq-answer {
    padding: 0 1.45rem 1.3rem;
}
.hero {
    background:
        radial-gradient(1180px 420px at 9% 12%, rgba(255,255,255,.54), transparent 60%),
        radial-gradient(740px 320px at 86% 10%, rgba(255,255,255,.26), transparent 58%),
        linear-gradient(180deg, rgba(233,228,220,.94), rgba(243,239,232,1) 26%);
}
.hero-panel {
    background: linear-gradient(180deg, rgba(235,231,223,.98), rgba(228,223,215,.94));
    border-color: rgba(15,20,24,.12);
}
.panel-note,
.panel-card {
    background: linear-gradient(180deg, rgba(252,250,246,.94), rgba(244,240,233,.9));
    border-color: rgba(15,20,24,.1);
}
.panel-note {
    background: linear-gradient(180deg, rgba(231,236,242,.76), rgba(247,244,238,.94));
}
.panel-card-muted {
    background: linear-gradient(180deg, rgba(244,240,233,.96), rgba(238,233,226,.94));
}
.contact-panel {
    box-shadow: 0 34px 88px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.03);
}
@media (max-width: 860px) {
    .premise-row {
        padding: 1.2rem 0 0;
        border-top: none;
        background: none;
        border-radius: 0;
    }
    .section {
        padding: 4.3rem 0;
    }
}


/* === v8.8 dusk mobile + optical alignment pass === */
:root {
    --dusk-warm-top: rgba(229, 223, 213, 0.92);
    --dusk-warm-mid: rgba(238, 233, 225, 0.94);
    --dusk-card: rgba(244, 240, 232, 0.94);
}
.site-header {
    background: linear-gradient(180deg, rgba(238, 232, 223, 0.96), rgba(243, 239, 232, 0.82));
}
.nav-row {
    border-color: rgba(15, 20, 24, 0.12);
    background: linear-gradient(180deg, rgba(246,241,233,.98), rgba(237,231,222,.94));
    box-shadow:
        0 18px 44px rgba(15, 20, 24, 0.075),
        0 6px 16px rgba(15, 20, 24, 0.03),
        inset 0 1px 0 rgba(255,255,255,0.62),
        inset 0 -1px 0 rgba(15,20,24,0.025);
}
.brand {
    min-height: 62px;
    align-items: center;
}
.brand-logo {
    width: clamp(172px, 20vw, 238px);
    transform: translateY(-3px);
}
.site-nav {
    background: rgba(255, 255, 255, 0.54);
    border-color: rgba(15,20,24,.1);
}
.hero {
    background:
        radial-gradient(1100px 420px at 7% 10%, rgba(255,255,255,.44), transparent 58%),
        radial-gradient(640px 300px at 88% 8%, rgba(255,255,255,.18), transparent 58%),
        linear-gradient(180deg, var(--dusk-warm-top) 0%, var(--dusk-warm-mid) 20%, rgba(243,239,232,1) 52%);
}
.hero::before {
    opacity: 0.78;
}
.hero-copy {
    padding-top: 0.95rem;
}
.hero h1 {
    letter-spacing: -0.064em;
}
.eyebrow {
    color: color-mix(in srgb, var(--accent-strong) 92%, var(--ink));
}
.lead p {
    color: color-mix(in srgb, var(--ink) 90%, transparent);
}
.support {
    color: color-mix(in srgb, var(--text-soft) 90%, var(--ink));
}
.hero-panel {
    background: linear-gradient(180deg, rgba(232,227,219,.98), rgba(223,218,210,.96));
    border-color: rgba(15,20,24,.13);
    box-shadow:
        0 36px 96px rgba(15,20,24,.14),
        0 12px 28px rgba(15,20,24,.05),
        inset 0 1px 0 rgba(255,255,255,.55);
}
.panel-note,
.panel-card {
    background: linear-gradient(180deg, rgba(250,248,244,.96), rgba(241,236,229,.94));
    border-color: rgba(15,20,24,.11);
}
.panel-note {
    background: linear-gradient(180deg, rgba(226,232,239,.82), rgba(244,240,233,.96));
}
.mobile-nav-toggle {
    width: 56px;
    height: 56px;
    border-radius: 20px;
    border-color: rgba(15,20,24,.12);
    background: linear-gradient(180deg, rgba(244,239,232,.98), rgba(232,226,217,.96));
    box-shadow:
        0 12px 28px rgba(15,20,24,.08),
        inset 0 1px 0 rgba(255,255,255,.58),
        inset 0 -1px 0 rgba(15,20,24,.03);
}
.mobile-nav-toggle span {
    background: rgba(15,20,24,.86);
}
.mobile-nav-panel {
    border-color: rgba(15,20,24,.12);
    background: linear-gradient(180deg, rgba(244,239,232,.98), rgba(233,227,218,.97));
    box-shadow:
        0 22px 56px rgba(15,20,24,.13),
        inset 0 1px 0 rgba(255,255,255,.52);
}
.mobile-nav-panel a {
    background: rgba(255,255,255,.46);
}
@media (max-width: 860px) {
    .site-header {
        padding-top: 12px;
        background: linear-gradient(180deg, rgba(234,228,218,.98), rgba(241,236,228,.92));
    }
    .nav-row {
        min-height: 82px;
        padding: 0.82rem 0.92rem 0.82rem 1.05rem;
        border-radius: 30px;
        background: linear-gradient(180deg, rgba(245,240,232,.99), rgba(231,225,216,.96));
        box-shadow:
            0 18px 42px rgba(15,20,24,.10),
            0 6px 16px rgba(15,20,24,.04),
            inset 0 1px 0 rgba(255,255,255,.62),
            inset 0 -1px 0 rgba(15,20,24,.03);
    }
    .brand {
        min-height: 56px;
    }
    .brand-logo {
        width: min(49vw, 188px);
        transform: translateY(-4px);
    }
    .mobile-nav-toggle {
        width: 52px;
        height: 52px;
        border-radius: 18px;
    }
    .hero {
        padding-top: 4.2rem;
        padding-bottom: 2.4rem;
        background:
            radial-gradient(900px 340px at 8% 6%, rgba(255,255,255,.3), transparent 54%),
            linear-gradient(180deg, rgba(228,221,211,.98) 0%, rgba(237,232,224,.96) 18%, rgba(243,239,232,1) 56%);
    }
    .hero::before {
        opacity: 0.82;
        mask-image: linear-gradient(180deg, rgba(0,0,0,.66), transparent 92%);
    }
    .hero-layout {
        gap: 1.5rem;
    }
    .hero-copy {
        padding: 0.15rem 0 0;
    }
    .hero-copy::before {
        content: "";
        position: absolute;
        inset: -0.8rem -0.4rem auto -0.4rem;
        height: calc(100% + 1.8rem);
        border-radius: 30px;
        background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06) 42%, transparent 100%);
        pointer-events: none;
        z-index: -1;
    }
    .eyebrow {
        margin-bottom: 1.1rem;
    }
    .hero h1 {
        max-width: 10.2ch;
        letter-spacing: -0.067em;
    }
    .lead {
        margin-top: 1.55rem;
    }
    .lead p {
        font-size: clamp(1.06rem, 4.8vw, 1.28rem);
        line-height: 1.56;
    }
    .support {
        margin-top: 1.15rem;
        font-size: 1.02rem;
    }
    .hero-panel {
        margin-top: 0.4rem;
        background: linear-gradient(180deg, rgba(230,225,216,.98), rgba(220,214,205,.97));
        box-shadow:
            0 26px 64px rgba(15,20,24,.12),
            0 8px 20px rgba(15,20,24,.04),
            inset 0 1px 0 rgba(255,255,255,.5);
    }
}
@media (max-width: 640px) {
    .shell {
        width: min(calc(100% - 22px), var(--container));
    }
    .site-header {
        padding-top: 11px;
    }
    .nav-row {
        min-height: 78px;
        padding: 0.78rem 0.82rem 0.78rem 0.96rem;
        border-radius: 28px;
    }
    .brand-logo {
        width: min(52vw, 196px);
        transform: translateY(-5px);
    }
    .mobile-nav-toggle {
        width: 50px;
        height: 50px;
        border-radius: 17px;
    }
    .mobile-nav-toggle span:nth-child(1) { transform: translateY(-5.5px); }
    .mobile-nav-toggle span:nth-child(3) { transform: translateY(5.5px); }
    .hero {
        padding-top: 3.9rem;
        padding-bottom: 2.25rem;
        background:
            radial-gradient(640px 220px at 12% 4%, rgba(255,255,255,.22), transparent 48%),
            linear-gradient(180deg, rgba(224,217,206,.99) 0%, rgba(235,229,220,.97) 16%, rgba(243,239,232,1) 58%);
    }
    .hero-layout {
        gap: 1.35rem;
    }
    .hero-copy::before {
        inset: -0.9rem -0.3rem auto -0.3rem;
        border-radius: 26px;
        background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 44%, transparent 100%);
    }
    .hero h1 {
        font-size: clamp(2.95rem, 15.5vw, 4.28rem);
        max-width: 9.6ch;
        letter-spacing: -0.072em;
    }
    .lead {
        margin-top: 1.45rem;
    }
    .lead p {
        font-size: 1.08rem;
    }
    .support {
        font-size: 1rem;
        line-height: 1.72;
    }
    .hero-panel,
    .panel-note,
    .panel-card {
        border-radius: 22px;
    }
}


/* === v8.9 depth + material contrast pass === */
:root {
    --bg-top-deep: #e6dfd4;
    --bg-mid-deep: #eee8de;
    --surface-rich: rgba(248, 244, 237, 0.96);
    --surface-rich-2: rgba(240, 234, 225, 0.96);
    --surface-panel-deep: rgba(226, 219, 209, 0.98);
    --stroke-deep: rgba(15, 20, 24, 0.14);
    --shadow-rich: 0 28px 72px rgba(15,20,24,.11), 0 8px 22px rgba(15,20,24,.05);
}
body {
    background:
        radial-gradient(1400px 460px at 50% -8%, rgba(255,255,255,.42), transparent 60%),
        linear-gradient(180deg, var(--bg-top-deep) 0%, var(--bg-mid-deep) 12%, #f0eae1 24%, var(--bg) 46%, #ece6dc 100%);
}
.site-header {
    background: linear-gradient(180deg, rgba(230,223,212,.98), rgba(241,236,228,.90));
    box-shadow: inset 0 -1px 0 rgba(15,20,24,.03);
}
.nav-row {
    border-color: var(--stroke-deep);
    background:
        linear-gradient(180deg, rgba(247,242,235,.99), rgba(234,228,218,.96));
    box-shadow:
        0 22px 52px rgba(15,20,24,.09),
        0 8px 20px rgba(15,20,24,.035),
        inset 0 1px 0 rgba(255,255,255,.64),
        inset 0 -1px 0 rgba(15,20,24,.03);
}
.brand-logo {
    transform: translateY(-4px);
}
.site-nav {
    background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(248,245,240,.56));
    border-color: rgba(15,20,24,.11);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.56);
}
.site-nav a {
    color: color-mix(in srgb, var(--text-soft) 88%, var(--ink));
}
.site-nav a:hover,
.site-nav a:focus-visible {
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,245,240,.82));
}
.hero {
    padding-top: 5.15rem;
    background:
        radial-gradient(1150px 420px at 7% 8%, rgba(255,255,255,.34), transparent 56%),
        radial-gradient(720px 320px at 88% 9%, rgba(255,255,255,.14), transparent 56%),
        linear-gradient(180deg, rgba(225,217,206,.98) 0%, rgba(235,228,219,.96) 16%, rgba(241,236,228,.98) 34%, rgba(243,239,232,1) 58%);
}
.hero::before {
    opacity: .9;
    background-size: 132px 132px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 90%);
}
.hero::after {
    height: 190px;
}
.hero-layout {
    gap: 3rem;
}
.hero-copy {
    padding-top: 1.05rem;
}
.hero-copy::after {
    content: "";
    position: absolute;
    left: -1.1rem;
    top: -1rem;
    width: min(100%, 42rem);
    height: calc(100% + 2rem);
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04) 38%, transparent 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
    pointer-events: none;
    z-index: -1;
}
.hero h1 {
    max-width: 9.2ch;
    letter-spacing: -0.069em;
}
.lead {
    margin-top: 2rem;
}
.lead p {
    color: color-mix(in srgb, var(--ink) 94%, transparent);
}
.support {
    color: color-mix(in srgb, var(--text-soft) 82%, var(--ink));
}
.signal-pill {
    background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(245,241,234,.76));
    border-color: rgba(15,20,24,.1);
    color: color-mix(in srgb, var(--text-soft) 82%, var(--ink));
}
.button-secondary {
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(244,239,232,.66));
    border-color: rgba(15,20,24,.11);
}
.hero-panel {
    padding: 1.6rem;
    border-color: rgba(15,20,24,.15);
    background:
        linear-gradient(180deg, rgba(229,222,212,.99), rgba(217,210,200,.98));
    box-shadow:
        0 40px 110px rgba(15,20,24,.16),
        0 12px 28px rgba(15,20,24,.05),
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -1px 0 rgba(15,20,24,.03);
}
.hero-panel::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, rgba(103,120,140,.10), transparent 54%);
}
.panel-note,
.panel-card {
    padding: 1.48rem;
    border-color: rgba(15,20,24,.12);
    background:
        linear-gradient(180deg, rgba(252,250,246,.97), rgba(239,233,225,.95));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        0 1px 0 rgba(15,20,24,.02);
}
.panel-note {
    background: linear-gradient(180deg, rgba(221,228,236,.88), rgba(243,239,232,.96));
}
.panel-card-muted {
    background: linear-gradient(180deg, rgba(243,238,231,.98), rgba(233,227,218,.96));
}
.panel-card strong {
    font-size: 1.24rem;
}
.premise-row {
    border-top-color: rgba(15,20,24,.1);
    background: linear-gradient(180deg, rgba(247,243,236,.72), rgba(239,234,226,.18) 78%, transparent 100%);
}
.section-soft {
    background: linear-gradient(180deg, rgba(230,223,213,.62), rgba(243,239,232,.2) 72%, transparent 100%);
}
.positioning.section-soft,
.principles.section-soft,
.faq-section.section-soft {
    background: linear-gradient(180deg, rgba(228,221,210,.74), rgba(243,239,232,.22) 72%, transparent 100%);
}
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item {
    border-color: rgba(15,20,24,.12);
    background: linear-gradient(180deg, rgba(252,250,246,.97), rgba(241,236,228,.94));
    box-shadow:
        0 24px 58px rgba(15,20,24,.085),
        0 8px 20px rgba(15,20,24,.04),
        inset 0 1px 0 rgba(255,255,255,.58);
}
.practice-card:hover,
.experience-card:hover,
.timeline-step:hover,
.principle-card:hover,
.issue-card:hover,
.faq-item:hover,
.faq-item[open] {
    border-color: rgba(68,84,102,.22);
    box-shadow:
        0 28px 64px rgba(15,20,24,.1),
        0 10px 24px rgba(15,20,24,.045),
        inset 0 1px 0 rgba(255,255,255,.6);
}
@media (max-width: 860px) {
    .site-header {
        padding-top: 12px;
        background: linear-gradient(180deg, rgba(226,218,207,.99), rgba(239,233,224,.92));
    }
    .nav-row {
        min-height: 84px;
        padding: 0.84rem 0.92rem 0.84rem 1.02rem;
        border-radius: 31px;
    }
    .brand-logo {
        width: min(49vw, 190px);
        transform: translateY(-6px);
    }
    .mobile-nav-toggle {
        width: 52px;
        height: 52px;
        border-radius: 18px;
        border-color: rgba(15,20,24,.13);
        background: linear-gradient(180deg, rgba(246,241,233,.99), rgba(230,223,213,.96));
        box-shadow:
            0 14px 28px rgba(15,20,24,.1),
            inset 0 1px 0 rgba(255,255,255,.58),
            inset 0 -1px 0 rgba(15,20,24,.03);
    }
    .mobile-nav-panel {
        margin-top: 0.25rem;
        border-color: rgba(15,20,24,.13);
        background: linear-gradient(180deg, rgba(244,239,231,.99), rgba(229,222,212,.97));
        box-shadow: 0 28px 70px rgba(15,20,24,.16), inset 0 1px 0 rgba(255,255,255,.54);
    }
    .hero {
        padding-top: 4.35rem;
        padding-bottom: 2.55rem;
        background:
            radial-gradient(820px 280px at 12% 5%, rgba(255,255,255,.18), transparent 46%),
            linear-gradient(180deg, rgba(219,210,198,.995) 0%, rgba(232,224,214,.98) 16%, rgba(241,236,228,.98) 44%, rgba(243,239,232,1) 70%);
    }
    .hero::before {
        opacity: .96;
        background-size: 118px 118px;
        mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 94%);
    }
    .hero-layout {
        gap: 1.7rem;
    }
    .hero-copy {
        padding-top: 0.25rem;
    }
    .hero-copy::before,
    .hero-copy::after {
        content: "";
        position: absolute;
        left: -0.35rem;
        right: -0.35rem;
        top: -0.9rem;
        bottom: -0.4rem;
        border-radius: 30px;
        pointer-events: none;
        z-index: -1;
    }
    .hero-copy::before {
        background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 40%, transparent 100%);
    }
    .hero-copy::after {
        box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    }
    .hero h1 {
        max-width: 9.8ch;
        letter-spacing: -0.073em;
    }
    .lead {
        margin-top: 1.55rem;
    }
    .hero-panel {
        margin-top: 0.55rem;
        padding: 1.35rem;
        background: linear-gradient(180deg, rgba(226,219,208,.99), rgba(213,205,194,.98));
        box-shadow:
            0 30px 74px rgba(15,20,24,.14),
            0 8px 20px rgba(15,20,24,.04),
            inset 0 1px 0 rgba(255,255,255,.5);
    }
}
@media (max-width: 640px) {
    .shell {
        width: min(calc(100% - 20px), var(--container));
    }
    .site-header {
        padding-top: 10px;
    }
    .nav-row {
        min-height: 80px;
        padding: 0.8rem 0.8rem 0.8rem 0.96rem;
        border-radius: 29px;
    }
    .brand-logo {
        width: min(53vw, 198px);
        transform: translateY(-7px);
    }
    .mobile-nav-toggle {
        width: 50px;
        height: 50px;
        border-radius: 17px;
    }
    .hero {
        padding-top: 4rem;
        padding-bottom: 2.3rem;
        background:
            radial-gradient(620px 180px at 14% 4%, rgba(255,255,255,.14), transparent 42%),
            linear-gradient(180deg, rgba(214,205,193,.998) 0%, rgba(229,221,211,.985) 16%, rgba(239,233,224,.99) 46%, rgba(243,239,232,1) 74%);
    }
    .hero::before {
        background-size: 106px 106px;
        opacity: 1;
    }
    .hero-layout {
        gap: 1.45rem;
    }
    .hero-copy::before,
    .hero-copy::after {
        left: -0.25rem;
        right: -0.25rem;
        top: -0.85rem;
        bottom: -0.25rem;
        border-radius: 28px;
    }
    .hero h1 {
        font-size: clamp(3.02rem, 15.4vw, 4.32rem);
        max-width: 9.2ch;
        letter-spacing: -0.078em;
    }
    .lead p {
        font-size: 1.1rem;
        line-height: 1.54;
    }
    .support {
        font-size: 1.01rem;
        line-height: 1.72;
    }
    .hero-panel {
        padding: 1.25rem;
        border-radius: 24px;
    }
    .panel-note,
    .panel-card {
        padding: 1.22rem;
        border-radius: 20px;
    }
}


/* === v9.0 semi-dark brand direction === */
:root {
    --brand-top-1: #d7ccbc;
    --brand-top-2: #e6ddd1;
    --brand-top-3: #efe8de;
    --brand-shell-1: rgba(233, 225, 214, 0.98);
    --brand-shell-2: rgba(218, 208, 195, 0.97);
    --brand-panel-1: rgba(214, 205, 193, 0.99);
    --brand-panel-2: rgba(198, 188, 176, 0.98);
    --brand-card-1: rgba(251, 248, 243, 0.98);
    --brand-card-2: rgba(236, 228, 218, 0.96);
    --brand-stroke: rgba(15, 20, 24, 0.15);
    --brand-shadow-strong: 0 34px 90px rgba(15,20,24,.14), 0 10px 28px rgba(15,20,24,.05);
}
body {
    background:
        radial-gradient(1300px 420px at 50% -10%, rgba(255,255,255,.28), transparent 58%),
        linear-gradient(180deg, var(--brand-top-1) 0%, var(--brand-top-2) 11%, var(--brand-top-3) 24%, #f1ebe2 44%, #ece5da 100%);
}
.site-header {
    background: linear-gradient(180deg, rgba(216,205,191,.98), rgba(234,226,216,.92));
    box-shadow: inset 0 -1px 0 rgba(15,20,24,.04);
}
.nav-row {
    min-height: 94px;
    border-color: var(--brand-stroke);
    background: linear-gradient(180deg, var(--brand-shell-1), var(--brand-shell-2));
    box-shadow:
        0 24px 56px rgba(15,20,24,.11),
        0 8px 22px rgba(15,20,24,.04),
        inset 0 1px 0 rgba(255,255,255,.56),
        inset 0 -1px 0 rgba(15,20,24,.035);
}
.brand {
    min-height: 60px;
}
.brand-logo {
    transform: translateY(-2px);
}
.site-nav {
    background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(244,238,230,.34));
    border-color: rgba(15,20,24,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}
.site-nav a {
    color: color-mix(in srgb, var(--text-soft) 82%, var(--ink));
}
.site-nav a:hover,
.site-nav a:focus-visible {
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(246,241,234,.64));
    color: var(--ink);
}
.hero {
    padding-top: 5.3rem;
    background:
        radial-gradient(1040px 360px at 10% 7%, rgba(255,255,255,.18), transparent 50%),
        radial-gradient(760px 320px at 88% 10%, rgba(255,255,255,.08), transparent 54%),
        linear-gradient(180deg, #cfc1ae 0%, #ded2c2 13%, #ebe2d6 31%, #f3eee7 58%, #f3efe8 100%);
}
.hero::before {
    opacity: 1;
    background-size: 118px 118px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.78), transparent 90%);
}
.hero::after {
    height: 210px;
}
.hero-copy {
    padding-top: 1.05rem;
}
.hero-copy::before,
.hero-copy::after {
    content: "";
    position: absolute;
    left: -1rem;
    right: 1.4rem;
    top: -1rem;
    bottom: -0.8rem;
    border-radius: 34px;
    pointer-events: none;
    z-index: -1;
}
.hero-copy::before {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 42%, transparent 100%);
}
.hero-copy::after {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.hero h1 {
    max-width: 9.2ch;
    letter-spacing: -0.07em;
}
.lead p {
    color: color-mix(in srgb, var(--ink) 96%, transparent);
}
.support {
    color: color-mix(in srgb, var(--text-soft) 78%, var(--ink));
}
.signal-pill,
.premise-tag,
.card-chip,
.brand-pill {
    background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(242,236,228,.72));
    border-color: rgba(15,20,24,.11);
    color: color-mix(in srgb, var(--text-soft) 78%, var(--ink));
}
.button-primary {
    box-shadow: 0 14px 34px rgba(15,20,24,.18);
}
.button-secondary {
    background: linear-gradient(180deg, rgba(255,255,255,.64), rgba(240,233,224,.54));
    border-color: rgba(15,20,24,.12);
}
.hero-panel {
    padding: 1.65rem;
    border-color: rgba(15,20,24,.16);
    background: linear-gradient(180deg, var(--brand-panel-1), var(--brand-panel-2));
    box-shadow:
        0 42px 116px rgba(15,20,24,.18),
        0 12px 30px rgba(15,20,24,.06),
        inset 0 1px 0 rgba(255,255,255,.46),
        inset 0 -1px 0 rgba(15,20,24,.04);
}
.hero-panel::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), transparent 34%),
        linear-gradient(135deg, rgba(103,120,140,.10), transparent 56%);
}
.panel-note,
.panel-card {
    padding: 1.5rem;
    border-color: rgba(15,20,24,.13);
    background: linear-gradient(180deg, var(--brand-card-1), var(--brand-card-2));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.56),
        0 1px 0 rgba(15,20,24,.03);
}
.panel-note {
    background: linear-gradient(180deg, rgba(220,228,236,.84), rgba(242,236,228,.96));
}
.panel-card-muted {
    background: linear-gradient(180deg, rgba(241,234,225,.98), rgba(229,220,209,.96));
}
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item {
    border-color: rgba(15,20,24,.125);
    background: linear-gradient(180deg, rgba(252,249,244,.98), rgba(238,230,220,.95));
    box-shadow:
        0 26px 64px rgba(15,20,24,.09),
        0 8px 22px rgba(15,20,24,.04),
        inset 0 1px 0 rgba(255,255,255,.58);
}
.section-soft {
    background: linear-gradient(180deg, rgba(221,211,198,.62), rgba(243,239,232,.22) 70%, transparent 100%);
}
.positioning.section-soft,
.principles.section-soft,
.faq-section.section-soft {
    background: linear-gradient(180deg, rgba(216,205,192,.76), rgba(243,239,232,.24) 72%, transparent 100%);
}
.premise-row {
    border-top-color: rgba(15,20,24,.11);
    background: linear-gradient(180deg, rgba(245,239,230,.74), rgba(236,228,217,.16) 82%, transparent 100%);
}
@media (max-width: 860px) {
    .site-header {
        padding-top: 11px;
        background: linear-gradient(180deg, rgba(210,198,183,.99), rgba(232,223,213,.94));
    }
    .nav-row {
        min-height: 82px;
        padding: 0.8rem 0.86rem 0.8rem 0.98rem;
        border-radius: 30px;
        background: linear-gradient(180deg, rgba(232,223,212,.99), rgba(214,203,190,.98));
        box-shadow:
            0 22px 54px rgba(15,20,24,.14),
            0 8px 22px rgba(15,20,24,.05),
            inset 0 1px 0 rgba(255,255,255,.5),
            inset 0 -1px 0 rgba(15,20,24,.04);
    }
    .brand-logo {
        width: min(49vw, 188px);
        transform: translateY(-2px);
    }
    .mobile-nav-toggle {
        width: 52px;
        height: 52px;
        border-radius: 18px;
        border-color: rgba(15,20,24,.14);
        background: linear-gradient(180deg, rgba(238,230,219,.98), rgba(221,210,197,.97));
        box-shadow:
            0 14px 30px rgba(15,20,24,.14),
            inset 0 1px 0 rgba(255,255,255,.5),
            inset 0 -1px 0 rgba(15,20,24,.04);
    }
    .mobile-nav-panel {
        margin-top: 0.28rem;
        border-color: rgba(15,20,24,.14);
        background: linear-gradient(180deg, rgba(238,230,219,.99), rgba(217,205,191,.98));
        box-shadow: 0 30px 76px rgba(15,20,24,.18), inset 0 1px 0 rgba(255,255,255,.48);
    }
    .hero {
        padding-top: 4.15rem;
        padding-bottom: 2.55rem;
        background:
            radial-gradient(760px 220px at 12% 4%, rgba(255,255,255,.10), transparent 44%),
            linear-gradient(180deg, #c7b8a3 0%, #d9cbba 16%, #e9dfd2 40%, #f3eee7 72%, #f3efe8 100%);
    }
    .hero::before {
        opacity: 1;
        background-size: 102px 102px;
        mask-image: linear-gradient(180deg, rgba(0,0,0,.82), transparent 94%);
    }
    .hero-layout {
        gap: 1.6rem;
    }
    .hero-copy {
        padding-top: 0.2rem;
    }
    .hero-copy::before,
    .hero-copy::after {
        left: -0.3rem;
        right: -0.3rem;
        top: -0.7rem;
        bottom: -0.15rem;
        border-radius: 28px;
    }
    .hero-copy::before {
        background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 44%, transparent 100%);
    }
    .hero h1 {
        max-width: 9.8ch;
        letter-spacing: -0.075em;
    }
    .hero-panel {
        margin-top: 0.45rem;
        padding: 1.3rem;
        background: linear-gradient(180deg, rgba(214,204,192,.995), rgba(194,183,170,.985));
        box-shadow:
            0 32px 80px rgba(15,20,24,.17),
            0 10px 24px rgba(15,20,24,.05),
            inset 0 1px 0 rgba(255,255,255,.46);
    }
}
@media (max-width: 640px) {
    .shell {
        width: min(calc(100% - 20px), var(--container));
    }
    .site-header {
        padding-top: 9px;
    }
    .nav-row {
        min-height: 78px;
        padding: 0.78rem 0.78rem 0.78rem 0.92rem;
        border-radius: 28px;
    }
    .brand-logo {
        width: min(52vw, 194px);
        transform: translateY(-1px);
    }
    .mobile-nav-toggle {
        width: 49px;
        height: 49px;
        border-radius: 17px;
    }
    .hero {
        padding-top: 3.9rem;
        padding-bottom: 2.25rem;
        background:
            radial-gradient(620px 170px at 14% 4%, rgba(255,255,255,.08), transparent 40%),
            linear-gradient(180deg, #c1b09b 0%, #d4c5b3 16%, #e7ddcf 42%, #f3ede6 76%, #f3efe8 100%);
    }
    .hero::before {
        background-size: 96px 96px;
        opacity: 1;
    }
    .hero-copy::before,
    .hero-copy::after {
        left: -0.22rem;
        right: -0.22rem;
        top: -0.62rem;
        bottom: -0.08rem;
        border-radius: 24px;
    }
    .hero h1 {
        font-size: clamp(3.0rem, 15vw, 4.28rem);
        max-width: 9.2ch;
        letter-spacing: -0.079em;
    }
    .lead p {
        font-size: 1.1rem;
        line-height: 1.55;
    }
    .support {
        font-size: 1.01rem;
        line-height: 1.7;
    }
    .hero-panel {
        padding: 1.24rem;
        border-radius: 24px;
    }
    .panel-note,
    .panel-card {
        padding: 1.2rem;
        border-radius: 20px;
    }
}


/* === v9.1 neutral-stone direction === */
:root {
    --stone-top-1: #d9d7d1;
    --stone-top-2: #e5e2db;
    --stone-top-3: #efebe4;
    --stone-shell-1: rgba(239, 236, 230, 0.98);
    --stone-shell-2: rgba(226, 222, 215, 0.97);
    --stone-panel-1: rgba(219, 216, 209, 0.99);
    --stone-panel-2: rgba(201, 198, 191, 0.98);
    --stone-card-1: rgba(251, 250, 247, 0.99);
    --stone-card-2: rgba(237, 233, 226, 0.97);
    --stone-stroke: rgba(15, 20, 24, 0.145);
    --stone-shadow: 0 34px 88px rgba(15,20,24,.135), 0 10px 26px rgba(15,20,24,.045);
}
body {
    background:
        radial-gradient(1320px 400px at 50% -10%, rgba(255,255,255,.24), transparent 58%),
        linear-gradient(180deg, var(--stone-top-1) 0%, var(--stone-top-2) 11%, var(--stone-top-3) 24%, #f1eee8 46%, #ece8e0 100%);
}
.site-header {
    background: linear-gradient(180deg, rgba(218,216,209,.98), rgba(234,231,225,.92));
    box-shadow: inset 0 -1px 0 rgba(15,20,24,.035);
}
.nav-row {
    border-color: var(--stone-stroke);
    background: linear-gradient(180deg, var(--stone-shell-1), var(--stone-shell-2));
    box-shadow:
        0 24px 56px rgba(15,20,24,.105),
        0 8px 20px rgba(15,20,24,.035),
        inset 0 1px 0 rgba(255,255,255,.56),
        inset 0 -1px 0 rgba(15,20,24,.03);
}
.brand-logo {
    transform: translateY(-3px);
}
.site-nav {
    background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(244,242,237,.34));
    border-color: rgba(15,20,24,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}
.site-nav a {
    color: color-mix(in srgb, var(--text-soft) 84%, var(--ink));
}
.site-nav a:hover,
.site-nav a:focus-visible {
    background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(246,244,240,.64));
}
.hero {
    background:
        radial-gradient(1020px 360px at 10% 7%, rgba(255,255,255,.14), transparent 50%),
        radial-gradient(760px 320px at 88% 10%, rgba(255,255,255,.06), transparent 54%),
        linear-gradient(180deg, #cbcbc5 0%, #dbd8d1 13%, #e8e5de 31%, #f1ede6 58%, #f3efe8 100%);
}
.hero::before {
    opacity: .92;
    background-size: 120px 120px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.76), transparent 90%);
}
.hero-copy::before {
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 42%, transparent 100%);
}
.hero h1 {
    letter-spacing: -0.069em;
}
.support {
    color: color-mix(in srgb, var(--text-soft) 80%, var(--ink));
}
.signal-pill,
.premise-tag,
.card-chip,
.brand-pill {
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(241,239,234,.72));
    border-color: rgba(15,20,24,.11);
}
.button-secondary {
    background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(240,237,231,.54));
    border-color: rgba(15,20,24,.12);
}
.hero-panel {
    border-color: rgba(15,20,24,.155);
    background: linear-gradient(180deg, var(--stone-panel-1), var(--stone-panel-2));
    box-shadow:
        0 40px 108px rgba(15,20,24,.17),
        0 12px 28px rgba(15,20,24,.05),
        inset 0 1px 0 rgba(255,255,255,.44),
        inset 0 -1px 0 rgba(15,20,24,.04);
}
.hero-panel::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), transparent 34%),
        linear-gradient(135deg, rgba(103,120,140,.08), transparent 56%);
}
.panel-note,
.panel-card {
    border-color: rgba(15,20,24,.125);
    background: linear-gradient(180deg, var(--stone-card-1), var(--stone-card-2));
}
.panel-note {
    background: linear-gradient(180deg, rgba(225,231,237,.84), rgba(241,238,232,.96));
}
.panel-card-muted {
    background: linear-gradient(180deg, rgba(241,237,231,.98), rgba(229,224,217,.96));
}
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item {
    border-color: rgba(15,20,24,.12);
    background: linear-gradient(180deg, rgba(252,251,248,.99), rgba(238,234,227,.96));
}
.section-soft {
    background: linear-gradient(180deg, rgba(219,216,209,.58), rgba(243,239,232,.22) 70%, transparent 100%);
}
.positioning.section-soft,
.principles.section-soft,
.faq-section.section-soft {
    background: linear-gradient(180deg, rgba(214,210,202,.74), rgba(243,239,232,.24) 72%, transparent 100%);
}
.premise-row {
    border-top-color: rgba(15,20,24,.11);
    background: linear-gradient(180deg, rgba(245,242,236,.7), rgba(236,232,225,.16) 82%, transparent 100%);
}
@media (max-width: 860px) {
    .site-header {
        background: linear-gradient(180deg, rgba(210,207,199,.99), rgba(231,227,220,.94));
    }
    .nav-row {
        background: linear-gradient(180deg, rgba(234,230,223,.99), rgba(218,213,205,.98));
        box-shadow:
            0 22px 54px rgba(15,20,24,.13),
            0 8px 20px rgba(15,20,24,.04),
            inset 0 1px 0 rgba(255,255,255,.5),
            inset 0 -1px 0 rgba(15,20,24,.035);
    }
    .brand-logo {
        transform: translateY(-3px);
    }
    .mobile-nav-toggle {
        background: linear-gradient(180deg, rgba(239,235,228,.98), rgba(223,217,209,.97));
        border-color: rgba(15,20,24,.14);
        box-shadow:
            0 14px 30px rgba(15,20,24,.13),
            inset 0 1px 0 rgba(255,255,255,.5),
            inset 0 -1px 0 rgba(15,20,24,.035);
    }
    .mobile-nav-panel {
        background: linear-gradient(180deg, rgba(239,235,228,.99), rgba(219,214,206,.98));
        border-color: rgba(15,20,24,.14);
        box-shadow: 0 30px 76px rgba(15,20,24,.17), inset 0 1px 0 rgba(255,255,255,.48);
    }
    .hero {
        background:
            radial-gradient(760px 220px at 12% 4%, rgba(255,255,255,.08), transparent 44%),
            linear-gradient(180deg, #c3c1ba 0%, #d4d1c9 16%, #e5e1d9 40%, #f1ede6 72%, #f3efe8 100%);
    }
    .hero::before {
        background-size: 104px 104px;
    }
    .hero-copy::before {
        background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 44%, transparent 100%);
    }
    .hero-panel {
        background: linear-gradient(180deg, rgba(216,211,203,.995), rgba(196,190,182,.985));
        box-shadow:
            0 32px 80px rgba(15,20,24,.165),
            0 10px 22px rgba(15,20,24,.045),
            inset 0 1px 0 rgba(255,255,255,.44);
    }
}
@media (max-width: 640px) {
    .brand-logo {
        transform: translateY(-2px);
    }
    .hero {
        background:
            radial-gradient(620px 170px at 14% 4%, rgba(255,255,255,.06), transparent 40%),
            linear-gradient(180deg, #bebcb4 0%, #d0ccc4 16%, #e4dfd7 42%, #f1ece5 76%, #f3efe8 100%);
    }
    .hero::before {
        background-size: 98px 98px;
    }
    .hero-copy::before,
    .hero-copy::after {
        border-radius: 24px;
    }
}


/* === v9.2 subtle texture + logo optical lift === */
:root {
    --texture-grid: rgba(68, 84, 102, 0.045);
    --texture-noise-1: rgba(255,255,255,0.045);
    --texture-noise-2: rgba(15,20,24,0.018);
}
.brand-logo {
    transform: translateY(-4px);
}
.hero {
    position: relative;
}
.hero::before {
    opacity: .9;
}
.hero::after {
    background:
        linear-gradient(180deg, transparent, var(--bg)),
        radial-gradient(circle at 20% 24%, var(--texture-noise-1) 0 0.8px, transparent 0.9px),
        radial-gradient(circle at 74% 62%, var(--texture-noise-2) 0 0.7px, transparent 0.8px);
    background-size: auto, 22px 22px, 28px 28px;
    background-position: 0 0, 0 0, 8px 10px;
    opacity: .72;
}
.hero-copy::after {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 0 0 1px rgba(255,255,255,.02);
}
.hero-panel,
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item {
    backdrop-filter: saturate(108%);
}
.practice-card::after,
.experience-card::after,
.timeline-step::after,
.principle-card::after,
.issue-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), transparent 38%),
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.04) 0 1px, transparent 1.2px),
        radial-gradient(circle at 72% 60%, rgba(15,20,24,.012) 0 0.9px, transparent 1.1px);
    background-size: auto, 26px 26px, 34px 34px;
    background-position: 0 0, 0 0, 9px 11px;
    mix-blend-mode: normal;
    opacity: .55;
}
.panel-note::after,
.panel-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%),
        radial-gradient(circle at 24% 18%, rgba(255,255,255,.035) 0 0.9px, transparent 1px),
        radial-gradient(circle at 78% 66%, rgba(15,20,24,.01) 0 0.75px, transparent 0.9px);
    background-size: auto, 24px 24px, 30px 30px;
    background-position: 0 0, 0 0, 10px 10px;
    opacity: .42;
}
@media (min-width: 861px) {
    .hero {
        background-image:
            radial-gradient(1020px 360px at 10% 7%, rgba(255,255,255,.14), transparent 50%),
            radial-gradient(760px 320px at 88% 10%, rgba(255,255,255,.06), transparent 54%),
            linear-gradient(180deg, #cbcbc5 0%, #dbd8d1 13%, #e8e5de 31%, #f1ede6 58%, #f3efe8 100%),
            linear-gradient(var(--texture-grid) 1px, transparent 1px),
            linear-gradient(90deg, var(--texture-grid) 1px, transparent 1px);
        background-size: auto, auto, auto, 140px 140px, 140px 140px;
        background-position: 0 0, 0 0, 0 0, center center, center center;
    }
}
@media (max-width: 860px) {
    .brand-logo {
        transform: translateY(-4px);
    }
    .hero {
        background-image:
            radial-gradient(760px 220px at 12% 4%, rgba(255,255,255,.08), transparent 44%),
            linear-gradient(180deg, #c3c1ba 0%, #d4d1c9 16%, #e5e1d9 40%, #f1ede6 72%, #f3efe8 100%),
            linear-gradient(var(--texture-grid) 1px, transparent 1px),
            linear-gradient(90deg, var(--texture-grid) 1px, transparent 1px);
        background-size: auto, auto, 112px 112px, 112px 112px;
        background-position: 0 0, 0 0, center center, center center;
    }
    .hero::after {
        opacity: .64;
    }
}
@media (max-width: 640px) {
    .brand-logo {
        transform: translateY(-3px);
    }
    .hero {
        background-image:
            radial-gradient(620px 170px at 14% 4%, rgba(255,255,255,.06), transparent 40%),
            linear-gradient(180deg, #bebcb4 0%, #d0ccc4 16%, #e4dfd7 42%, #f1ece5 76%, #f3efe8 100%),
            linear-gradient(var(--texture-grid) 1px, transparent 1px),
            linear-gradient(90deg, var(--texture-grid) 1px, transparent 1px);
        background-size: auto, auto, 96px 96px, 96px 96px;
        background-position: 0 0, 0 0, center center, center center;
    }
}


/* === v9.3 architectural field + section shells === */
:root {
    --field-grid: rgba(68,84,102,.055);
    --field-wash: rgba(255,255,255,.12);
    --shell-bg-1: rgba(245,242,236,.82);
    --shell-bg-2: rgba(233,228,220,.72);
    --shell-stroke: rgba(15,20,24,.11);
    --shell-shadow: 0 30px 80px rgba(15,20,24,.10), 0 10px 28px rgba(15,20,24,.04);
}
body {
    background:
        radial-gradient(1320px 400px at 50% -10%, rgba(255,255,255,.20), transparent 58%),
        linear-gradient(180deg, var(--stone-top-1) 0%, var(--stone-top-2) 11%, var(--stone-top-3) 24%, #f1eee8 46%, #ece8e0 100%),
        linear-gradient(var(--field-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--field-grid) 1px, transparent 1px);
    background-size: auto, auto, 176px 176px, 176px 176px;
    background-position: 0 0, 0 0, center center, center center;
}
.brand-logo {
    transform: translateY(-5px);
}
.hero {
    background-image:
        radial-gradient(1020px 360px at 10% 7%, rgba(255,255,255,.14), transparent 50%),
        radial-gradient(760px 320px at 88% 10%, rgba(255,255,255,.06), transparent 54%),
        linear-gradient(180deg, #cbcbc5 0%, #dbd8d1 13%, #e8e5de 31%, #f1ede6 58%, #f3efe8 100%);
}
.hero::before {
    opacity: .96;
}
.hero-copy::before,
.hero-copy::after {
    left: -1.15rem;
    right: 1.8rem;
}
#expertise .shell,
#experience .shell,
#approach .shell,
#faq .shell {
    position: relative;
    padding: 1.6rem;
    border: 1px solid var(--shell-stroke);
    border-radius: 34px;
    background:
        linear-gradient(180deg, var(--shell-bg-1), var(--shell-bg-2));
    box-shadow:
        var(--shell-shadow),
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -1px 0 rgba(15,20,24,.02);
}
#expertise .shell::before,
#experience .shell::before,
#approach .shell::before,
#faq .shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 32%),
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.03) 0 1px, transparent 1.2px),
        radial-gradient(circle at 74% 66%, rgba(15,20,24,.012) 0 0.8px, transparent 1px);
    background-size: auto, 26px 26px, 36px 36px;
    background-position: 0 0, 0 0, 8px 10px;
    opacity: .48;
}
#expertise .section-head,
#experience .section-head,
#approach .section-head,
#faq .section-head {
    position: relative;
    z-index: 1;
}
#expertise .card-grid,
#experience .experience-grid,
#approach .timeline-grid,
#faq .faq-list {
    position: relative;
    z-index: 1;
}
#expertise .practice-card,
#experience .experience-card,
#approach .timeline-step,
#faq .faq-item {
    background: linear-gradient(180deg, rgba(252,251,248,.98), rgba(240,235,227,.96));
    border-color: rgba(15,20,24,.125);
    box-shadow:
        0 24px 58px rgba(15,20,24,.08),
        0 8px 20px rgba(15,20,24,.032),
        inset 0 1px 0 rgba(255,255,255,.58);
}
#expertise .practice-card-top,
#experience .experience-card-top {
    align-items: center;
}
.card-index,
.principle-number,
.issue-index,
.timeline-number {
    color: color-mix(in srgb, var(--accent-strong) 84%, var(--ink));
}
.card-chip,
.brand-pill {
    background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(241,237,231,.62));
    border-color: rgba(15,20,24,.1);
}
@media (max-width: 860px) {
    .brand-logo {
        transform: translateY(-5px);
    }
    body {
        background-size: auto, auto, 134px 134px, 134px 134px;
    }
    #expertise .shell,
    #experience .shell,
    #approach .shell,
    #faq .shell {
        padding: 1.2rem;
        border-radius: 30px;
        box-shadow:
            0 24px 64px rgba(15,20,24,.11),
            0 8px 20px rgba(15,20,24,.035),
            inset 0 1px 0 rgba(255,255,255,.42);
    }
    #expertise .shell::before,
    #experience .shell::before,
    #approach .shell::before,
    #faq .shell::before {
        opacity: .42;
    }
}
@media (max-width: 640px) {
    .brand-logo {
        transform: translateY(-4px);
    }
    body {
        background-size: auto, auto, 112px 112px, 112px 112px;
    }
    #expertise .shell,
    #experience .shell,
    #approach .shell,
    #faq .shell {
        padding: 1rem;
        border-radius: 28px;
    }
}


/* === v10 dark-base brand correction === */
:root {
    --bg: #151b20;
    --bg-soft: #1b2329;
    --surface: rgba(248, 245, 239, 0.94);
    --surface-strong: #f5f1ea;
    --surface-muted: rgba(234, 229, 221, 0.92);
    --surface-dark: #11181d;
    --text: #edf1f3;
    --text-soft: rgba(237, 241, 243, 0.76);
    --ink: #0f1418;
    --ink-soft: #4e5962;
    --line: rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.18);
    --shadow-soft: 0 22px 56px rgba(0, 0, 0, 0.24);
    --shadow-card: 0 36px 96px rgba(0, 0, 0, 0.34);
    --button-primary-bg: #f1ece5;
    --button-primary-text: #12181d;
    --button-secondary-bg: rgba(255, 255, 255, 0.06);
    --button-secondary-text: #edf1f3;
}
html {
    background: #151b20;
}
body {
    background:
        radial-gradient(1000px 320px at 50% -6%, rgba(255,255,255,.045), transparent 56%),
        linear-gradient(180deg, #1b2329 0%, #171f25 14%, #151b20 36%, #141a1f 100%);
    color: var(--text);
}
.site-header {
    background: linear-gradient(180deg, rgba(19,25,30,.96), rgba(19,25,30,.78));
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(18px);
}
.site-header[data-scrolled="true"] {
    box-shadow: 0 12px 34px rgba(0,0,0,.24), inset 0 -1px 0 rgba(255,255,255,.04);
}
.nav-row {
    min-height: 92px;
    border-color: rgba(255,255,255,.09);
    background: linear-gradient(180deg, rgba(27,35,41,.96), rgba(20,27,32,.94));
    box-shadow:
        0 18px 46px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 -1px 0 rgba(255,255,255,.02);
}
.brand-logo {
    transform: translateY(-4px);
}
.site-nav {
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.site-nav a {
    color: rgba(237,241,243,.74);
}
.site-nav a:hover,
.site-nav a:focus-visible {
    color: #f5f7f8;
    background: rgba(255,255,255,.08);
}
.mobile-nav-toggle {
    border-color: rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(29,37,43,.96), rgba(19,25,30,.94));
    color: #eef2f4;
    box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.mobile-nav-panel {
    border-color: rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(28,36,42,.985), rgba(18,24,29,.97));
    box-shadow: 0 28px 68px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05);
}
.mobile-nav-panel a {
    color: #edf1f3;
    background: rgba(255,255,255,.03);
}
.mobile-nav-panel a:hover,
.mobile-nav-panel a:focus-visible {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.08);
}
.hero {
    padding-top: 5.2rem;
    padding-bottom: 2.6rem;
    background:
        radial-gradient(720px 280px at 12% 8%, rgba(103,120,140,.14), transparent 56%),
        radial-gradient(620px 220px at 88% 12%, rgba(255,255,255,.05), transparent 58%),
        linear-gradient(180deg, #1f282f 0%, #182026 20%, #151b20 52%, #141a1f 100%);
}
.hero::before {
    background:
        linear-gradient(rgba(103,120,140,.065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103,120,140,.065) 1px, transparent 1px);
    background-size: 140px 140px;
    opacity: .52;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 88%);
}
.hero::after {
    inset: auto 0 0;
    height: 170px;
    background: linear-gradient(180deg, transparent, #151b20);
}
.hero-copy {
    padding-top: 0.95rem;
}
.hero-copy::before,
.hero-copy::after {
    content: none;
}
.eyebrow,
.section-kicker {
    color: #8a9aae;
}
.hero h1,
.section h2,
.section-title-block h2 {
    color: #f2f5f7;
}
.lead p {
    color: rgba(244,247,249,.92);
}
.support,
.section-copy,
.section-copy p,
.experience-note,
.contact-card-head p,
.contact-card-meta,
.faq-answer {
    color: rgba(237,241,243,.74);
}
.button-primary {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    box-shadow: 0 16px 34px rgba(0,0,0,.28);
}
.button-secondary {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border-color: rgba(255,255,255,.12);
}
.signal-pill,
.premise-tag,
.card-chip,
.brand-pill {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.09);
    color: rgba(237,241,243,.78);
}
.premise-band {
    padding: 0.6rem 0 2rem;
}
.premise-row {
    border-top-color: rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 84%);
}
.premise-copy {
    color: #edf1f3;
}
.section {
    padding: 4.8rem 0;
}
.section-soft {
    background: transparent;
}
.section-frame::before {
    background: linear-gradient(90deg, rgba(138,154,174,.92), transparent 88%);
    opacity: .55;
}
.split-grid,
.principles-layout,
.issues-layout {
    position: relative;
    padding: 1.4rem 0 0;
}
#expertise .shell,
#experience .shell,
#approach .shell,
#faq .shell {
    position: relative;
    padding: 1.6rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
    box-shadow: 0 24px 64px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
#expertise .shell::before,
#experience .shell::before,
#approach .shell::before,
#faq .shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%),
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.016) 0 1px, transparent 1.2px),
        radial-gradient(circle at 74% 66%, rgba(255,255,255,.012) 0 0.8px, transparent 1px);
    background-size: auto, 24px 24px, 34px 34px;
    background-position: 0 0, 0 0, 8px 10px;
    opacity: .42;
}
#expertise .section-head,
#experience .section-head,
#approach .section-head,
#faq .section-head,
#expertise .card-grid,
#experience .experience-grid,
#approach .timeline-grid,
#faq .faq-list {
    position: relative;
    z-index: 1;
}
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item,
.panel-note,
.panel-card {
    border-color: rgba(15,20,24,.08);
    background: linear-gradient(180deg, rgba(247,243,236,.98), rgba(235,229,220,.96));
    color: #141a1f;
    box-shadow: 0 22px 54px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.62);
}
.practice-card::before,
.experience-card::before,
.timeline-step::before,
.principle-card::before,
.issue-card::before,
.panel-note::before,
.panel-card::before {
    background: linear-gradient(90deg, rgba(68,84,102,.72), transparent 78%);
    opacity: .62;
}
.practice-card h3,
.experience-card h3,
.timeline-step h3,
.panel-card strong,
.panel-note p,
.panel-card p,
.faq-item summary,
.principle-card p,
.issue-card p,
.card-copy,
.experience-list,
.experience-list li,
.brand-pill-grid,
.brand-pill,
.card-index,
.timeline-number,
.issue-index,
.principle-number {
    color: #141a1f;
}
.card-chip,
.brand-pill {
    background: rgba(20,26,31,.04);
    border-color: rgba(20,26,31,.08);
    color: #55626c;
}
.hero-panel {
    padding: 1.55rem;
    border-color: rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.018));
    box-shadow: 0 30px 78px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.hero-panel::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 34%),
        linear-gradient(135deg, rgba(103,120,140,.10), transparent 56%);
}
.panel-label,
.metric-label,
.contact-card-label {
    color: #67788c;
}
.contact-section {
    padding-top: 4.8rem;
}
.contact-section .section-kicker,
.contact-section .section-copy,
.contact-section h2 {
    color: var(--contact-text);
}
.footer {
    background: transparent;
}
@media (max-width: 860px) {
    .site-header {
        padding-top: 10px;
    }
    .nav-row {
        min-height: 82px;
        padding: 0.8rem 0.86rem 0.8rem 0.98rem;
        border-radius: 30px;
    }
    .brand-logo {
        transform: translateY(-4px);
    }
    body {
        background:
            radial-gradient(760px 220px at 50% -4%, rgba(255,255,255,.035), transparent 50%),
            linear-gradient(180deg, #1a2228 0%, #171f25 18%, #151b20 48%, #141a1f 100%);
    }
    .hero {
        padding-top: 4.15rem;
        padding-bottom: 2.45rem;
        background:
            radial-gradient(560px 180px at 12% 4%, rgba(103,120,140,.12), transparent 44%),
            linear-gradient(180deg, #1d262d 0%, #171f25 22%, #151b20 62%, #141a1f 100%);
    }
    .hero::before {
        background-size: 112px 112px;
        opacity: .46;
    }
    #expertise .shell,
    #experience .shell,
    #approach .shell,
    #faq .shell {
        padding: 1.18rem;
        border-radius: 30px;
    }
}
@media (max-width: 640px) {
    .shell {
        width: min(calc(100% - 20px), var(--container));
    }
    .brand-logo {
        transform: translateY(-3px);
    }
    .hero {
        padding-top: 3.95rem;
        padding-bottom: 2.3rem;
        background:
            radial-gradient(420px 140px at 14% 4%, rgba(103,120,140,.11), transparent 42%),
            linear-gradient(180deg, #1c242b 0%, #171f25 24%, #151b20 68%, #141a1f 100%);
    }
    .hero::before {
        background-size: 96px 96px;
        opacity: .4;
    }
    .practice-card,
    .timeline-step,
    .hero-panel,
    .contact-card,
    .experience-card,
    .faq-item,
    .panel-note,
    .panel-card {
        border-radius: 24px;
    }
}


/* === v10.1 dark refinement: softer modules + cleaner header + subtle texture === */
:root {
    --module-bg-1: rgba(233, 229, 221, 0.94);
    --module-bg-2: rgba(220, 214, 205, 0.92);
    --module-text: #151b20;
    --field-line: rgba(103,120,140,.045);
    --field-noise-a: rgba(255,255,255,.018);
    --field-noise-b: rgba(103,120,140,.016);
}
body.site-home {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(1100px 340px at 50% -8%, rgba(255,255,255,.032), transparent 56%),
        linear-gradient(180deg, #1b2329 0%, #171f25 18%, #151b20 56%, #141a1f 100%);
}
body.site-home::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        linear-gradient(var(--field-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--field-line) 1px, transparent 1px),
        radial-gradient(circle at 18% 24%, var(--field-noise-a) 0 0.9px, transparent 1px),
        radial-gradient(circle at 72% 66%, var(--field-noise-b) 0 0.8px, transparent 0.95px);
    background-size: 168px 168px, 168px 168px, 26px 26px, 34px 34px;
    background-position: center center, center center, 0 0, 10px 12px;
    opacity: .42;
}
.site-header {
    padding-top: 12px;
    background: linear-gradient(180deg, rgba(18,24,29,.96), rgba(18,24,29,.80));
}
.nav-row {
    min-height: 90px;
    padding: 12px 16px 12px 18px;
    border-radius: 34px;
    align-items: center;
}
.brand {
    min-height: 58px;
    align-items: center;
}
.brand-logo {
    transform: translateY(-5px);
}
.site-nav {
    padding: 0.34rem;
}
.mobile-nav-toggle {
    width: 50px;
    height: 50px;
    border-radius: 18px;
}
.hero {
    padding-top: 4.65rem;
    background:
        radial-gradient(640px 240px at 12% 8%, rgba(103,120,140,.10), transparent 56%),
        radial-gradient(520px 180px at 86% 12%, rgba(255,255,255,.03), transparent 58%),
        linear-gradient(180deg, #1c242b 0%, #171f25 22%, #151b20 62%, #141a1f 100%);
}
.hero::before {
    background:
        linear-gradient(rgba(103,120,140,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103,120,140,.045) 1px, transparent 1px);
    background-size: 144px 144px;
    opacity: .34;
}
.hero .eyebrow {
    display: none;
}
.hero-copy {
    padding-top: 0.2rem;
}
.hero h1 {
    margin-top: 0;
}
.lead {
    margin-top: 1.75rem;
}
.hero-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
    box-shadow: 0 28px 72px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
}
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item,
.panel-note,
.panel-card {
    background: linear-gradient(180deg, var(--module-bg-1), var(--module-bg-2));
    color: var(--module-text);
    box-shadow: 0 18px 46px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.54);
}
.practice-card h3,
.experience-card h3,
.timeline-step h3,
.panel-card strong,
.panel-note p,
.panel-card p,
.faq-item summary,
.principle-card p,
.issue-card p,
.card-copy,
.experience-list,
.experience-list li,
.brand-pill-grid,
.brand-pill,
.card-index,
.timeline-number,
.issue-index,
.principle-number,
.practice-card .card-chip,
.experience-card .card-chip {
    color: var(--module-text);
}
.card-chip,
.brand-pill {
    background: rgba(21,27,32,.045);
    border-color: rgba(21,27,32,.08);
    color: #5a6670;
}
.faq-item[open],
.faq-item:hover,
.practice-card:hover,
.experience-card:hover,
.timeline-step:hover,
.principle-card:hover,
.issue-card:hover {
    box-shadow: 0 22px 52px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.58);
}
@media (max-width: 860px) {
    body.site-home::before {
        background-size: 132px 132px, 132px 132px, 24px 24px, 30px 30px;
        opacity: .32;
    }
    .site-header {
        padding-top: 10px;
    }
    .nav-row {
        min-height: 80px;
        padding: 10px 12px 10px 14px;
        border-radius: 30px;
    }
    .brand {
        min-height: 54px;
    }
    .brand-logo {
        width: min(49vw, 190px);
        transform: translateY(-4px);
    }
    .hero {
        padding-top: 3.95rem;
        padding-bottom: 2.25rem;
    }
    .hero::before {
        background-size: 120px 120px;
        opacity: .28;
    }
    .lead {
        margin-top: 1.45rem;
    }
}
@media (max-width: 640px) {
    body.site-home::before {
        background-size: 120px 120px, 120px 120px, 22px 22px, 28px 28px;
        opacity: .26;
    }
    .shell {
        width: min(calc(100% - 20px), var(--container));
    }
    .nav-row {
        min-height: 76px;
        padding: 9px 10px 9px 12px;
        border-radius: 28px;
    }
    .brand {
        min-height: 50px;
    }
    .brand-logo {
        width: min(53vw, 198px);
        transform: translateY(-4px);
    }
    .mobile-nav-toggle {
        width: 48px;
        height: 48px;
        border-radius: 17px;
    }
    .hero {
        padding-top: 3.8rem;
    }
    .hero::before {
        background-size: 108px 108px;
        opacity: .24;
    }
}


/* === v10.2 premium QA refinement === */
:root {
    --module-bg-1: rgba(228, 223, 214, 0.94);
    --module-bg-2: rgba(212, 205, 194, 0.92);
    --module-bg-3: rgba(204, 197, 186, 0.90);
    --module-text: #141a1f;
    --module-text-soft: #56636d;
}
body.site-home::before {
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.014) 0 0.9px, transparent 1px),
        radial-gradient(circle at 72% 66%, rgba(103,120,140,.012) 0 0.8px, transparent 0.95px),
        linear-gradient(180deg, rgba(255,255,255,.012), transparent 24%, transparent 76%, rgba(255,255,255,.006));
    background-size: 28px 28px, 36px 36px, 100% 100%;
    background-position: 0 0, 10px 12px, 0 0;
    opacity: .22;
}
.site-header {
    padding-top: 12px;
}
.nav-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 94px;
    gap: 1.35rem;
    padding: 12px 16px 12px 18px;
    border-radius: 36px;
}
.brand {
    min-height: 60px;
    align-items: center;
    padding-left: 2px;
}
.brand-logo {
    transform: translateY(-4px);
}
.site-nav {
    justify-self: end;
    align-self: center;
    padding: 0.36rem;
}
.site-nav a {
    padding: 0.72rem 1.04rem;
}
.mobile-nav-toggle {
    color: #f4f7f8;
    border-color: rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(40,48,54,.96), rgba(24,31,37,.94));
    box-shadow: 0 12px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07);
}
.mobile-nav-toggle span {
    background: currentColor;
}
.hero {
    padding-top: 4.55rem;
}
.hero::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent 16%, transparent 84%, rgba(255,255,255,.012));
    background-size: 100% 100%;
    opacity: .72;
    mask-image: none;
}
.hero-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.018));
}
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item,
.panel-note,
.panel-card {
    background: linear-gradient(180deg, var(--module-bg-1), var(--module-bg-2) 62%, var(--module-bg-3));
    color: var(--module-text);
    box-shadow: 0 18px 42px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.52);
}
.practice-card *,
.experience-card *,
.timeline-step *,
.principle-card *,
.issue-card *,
.faq-item *,
.panel-note *,
.panel-card * {
    color: inherit;
}
.card-chip,
.brand-pill,
.contact-action-label,
.contact-meta-label,
.metric-label,
.panel-label,
.card-index,
.timeline-number,
.issue-index,
.principle-number,
.faq-icon,
.contact-card-label {
    color: var(--module-text-soft);
}
.card-chip,
.brand-pill {
    background: rgba(20,26,31,.04);
    border-color: rgba(20,26,31,.08);
}
.panel-card strong,
.practice-card h3,
.experience-card h3,
.timeline-step h3,
.faq-item summary,
.principle-card p,
.issue-card p {
    color: var(--module-text);
}
.panel-note p,
.panel-card p,
.card-copy,
.experience-list,
.experience-list li,
.faq-answer,
.experience-note {
    color: var(--module-text-soft);
}
@media (max-width: 860px) {
    body.site-home::before {
        background-size: 24px 24px, 32px 32px, 100% 100%;
        opacity: .18;
    }
    .site-header {
        padding-top: 10px;
    }
    .nav-row {
        min-height: 80px;
        gap: 1rem;
        padding: 10px 12px 10px 14px;
        border-radius: 30px;
    }
    .brand {
        min-height: 54px;
    }
    .brand-logo {
        width: min(49vw, 190px);
        transform: translateY(-4px);
    }
    .mobile-nav-toggle {
        width: 50px;
        height: 50px;
        border-radius: 18px;
    }
    .hero {
        padding-top: 3.9rem;
    }
}
@media (max-width: 640px) {
    body.site-home::before {
        opacity: .14;
    }
    .nav-row {
        min-height: 76px;
        padding: 9px 10px 9px 12px;
        border-radius: 28px;
    }
    .brand {
        min-height: 50px;
    }
    .brand-logo {
        width: min(53vw, 198px);
        transform: translateY(-4px);
    }
    .mobile-nav-toggle {
        width: 48px;
        height: 48px;
        border-radius: 17px;
    }
}


/* === v10.3 header precision + light-module text correction === */
.site-header {
    padding-top: 14px;
    padding-bottom: 10px;
}
.nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 92px;
    gap: 1.5rem;
    padding: 14px 18px;
    border-radius: 36px;
}
.brand {
    flex: 0 0 auto;
    min-height: 58px;
    padding-left: 4px;
}
.brand-logo {
    transform: translateY(-4px);
}
.site-nav {
    margin-left: auto;
    padding: 0.38rem;
}
.site-nav a {
    padding: 0.74rem 1.02rem;
}
.mobile-nav-toggle {
    color: #f7f9fa;
    border-color: rgba(255,255,255,.16);
    background: linear-gradient(180deg, rgba(46,55,62,.98), rgba(26,33,39,.96));
    box-shadow: 0 14px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.mobile-nav-toggle span {
    width: 18px;
    height: 1.8px;
    background: currentColor;
}
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item,
.panel-note,
.panel-card {
    color: var(--module-text) !important;
}
.practice-card :is(h3,p,li,strong,span,div,a,ul,ol),
.experience-card :is(h3,p,li,strong,span,div,a,ul,ol),
.timeline-step :is(h3,p,li,strong,span,div,a,ul,ol),
.principle-card :is(h3,p,li,strong,span,div,a,ul,ol),
.issue-card :is(h3,p,li,strong,span,div,a,ul,ol),
.faq-item :is(summary,p,li,strong,span,div,a,ul,ol),
.panel-note :is(h3,p,li,strong,span,div,a,ul,ol),
.panel-card :is(h3,p,li,strong,span,div,a,ul,ol) {
    color: inherit !important;
}
.panel-card .panel-steps li,
.panel-card .panel-steps li::before,
.panel-card-muted .panel-steps li,
.panel-card-muted .panel-steps li::before {
    color: var(--module-text-soft) !important;
}
.panel-card strong,
.panel-note strong,
.practice-card h3,
.experience-card h3,
.timeline-step h3,
.faq-item summary,
.principle-card p,
.issue-card p {
    color: var(--module-text) !important;
}
.panel-note p,
.panel-card p,
.card-copy,
.experience-list,
.experience-list li,
.faq-answer,
.experience-note,
.panel-card .panel-steps {
    color: var(--module-text-soft) !important;
}
.faq-icon::before,
.faq-icon::after {
    background: var(--module-text-soft);
}
@media (max-width: 860px) {
    .site-header {
        padding-top: 10px;
        padding-bottom: 8px;
    }
    .nav-row {
        min-height: 80px;
        gap: 1rem;
        padding: 10px 12px;
        border-radius: 30px;
    }
    .brand {
        min-height: 54px;
        padding-left: 2px;
    }
    .brand-logo {
        width: min(49vw, 190px);
        transform: translateY(-4px);
    }
    .mobile-nav-toggle {
        width: 50px;
        height: 50px;
        border-radius: 18px;
    }
}
@media (max-width: 640px) {
    .site-header {
        padding-top: 9px;
        padding-bottom: 7px;
    }
    .nav-row {
        min-height: 76px;
        padding: 9px 10px;
        border-radius: 28px;
    }
    .brand {
        min-height: 50px;
    }
    .brand-logo {
        width: min(53vw, 198px);
        transform: translateY(-4px);
    }
    .mobile-nav-toggle {
        width: 48px;
        height: 48px;
        border-radius: 17px;
    }
}


/* === v10.4 contrast calibration + section materiality === */
:root {
    --module-bg-1: rgba(219, 213, 203, 0.94);
    --module-bg-2: rgba(205, 197, 185, 0.92);
    --module-bg-3: rgba(193, 184, 172, 0.90);
    --module-text: #141a1f;
    --module-text-soft: #525e67;
}
body.site-home::before {
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.012) 0 0.9px, transparent 1px),
        radial-gradient(circle at 72% 66%, rgba(103,120,140,.010) 0 0.8px, transparent 0.95px),
        linear-gradient(180deg, rgba(255,255,255,.010), transparent 24%, transparent 76%, rgba(255,255,255,.004));
    background-size: 30px 30px, 38px 38px, 100% 100%;
    opacity: .18;
}
#expertise .shell,
#experience .shell,
#approach .shell,
#faq .shell {
    background:
        linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.018));
    box-shadow:
        0 24px 60px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 -1px 0 rgba(255,255,255,.018);
}
#expertise .shell::before,
#experience .shell::before,
#approach .shell::before,
#faq .shell::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,.026), transparent 30%),
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.014) 0 1px, transparent 1.2px),
        radial-gradient(circle at 74% 66%, rgba(103,120,140,.010) 0 0.8px, transparent 1px);
    background-size: auto, 26px 26px, 34px 34px;
    background-position: 0 0, 0 0, 9px 11px;
    opacity: .34;
}
#approach .shell,
#experience .shell,
#expertise .shell,
#faq .shell {
    position: relative;
}
#approach .shell::after,
#experience .shell::after,
#expertise .shell::after,
#faq .shell::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(rgba(103,120,140,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103,120,140,.04) 1px, transparent 1px);
    background-size: 160px 160px;
    opacity: .10;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 92%);
}
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item,
.panel-note,
.panel-card {
    background: linear-gradient(180deg, var(--module-bg-1), var(--module-bg-2) 62%, var(--module-bg-3));
    box-shadow:
        0 16px 38px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.46);
}
.hero-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.016));
    box-shadow: 0 26px 64px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
}
.panel-note,
.panel-card {
    box-shadow: 0 14px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.46);
}
@media (max-width: 860px) {
    body.site-home::before {
        opacity: .14;
    }
    #approach .shell::after,
    #experience .shell::after,
    #expertise .shell::after,
    #faq .shell::after {
        background-size: 132px 132px;
        opacity: .08;
    }
}
@media (max-width: 640px) {
    body.site-home::before {
        opacity: .10;
    }
    #approach .shell::after,
    #experience .shell::after,
    #expertise .shell::after,
    #faq .shell::after {
        background-size: 112px 112px;
        opacity: .06;
    }
}


/* === v3.1 premium finishing pass === */
:root {
    --module-bg-1: #bfb6aa;
    --module-bg-2: #b1a79b;
    --module-bg-3: #a39a8d;
    --module-text: #12181d;
    --module-text-soft: #465159;
}
body.site-home::before {
    background:
        radial-gradient(1300px 440px at 12% 10%, rgba(103,120,140,0.075), transparent 58%),
        radial-gradient(980px 360px at 84% 18%, rgba(255,255,255,0.020), transparent 62%),
        linear-gradient(90deg, rgba(103,120,140,0.032), transparent 14%, transparent 86%, rgba(103,120,140,0.028)),
        radial-gradient(circle at 22% 28%, rgba(255,255,255,0.014) 0 1px, transparent 1.12px),
        radial-gradient(circle at 74% 66%, rgba(103,120,140,0.012) 0 0.92px, transparent 1.04px);
    background-size: auto, auto, 100% 100%, 28px 28px, 40px 40px;
    background-position: 0 0, 0 0, 0 0, 0 0, 12px 14px;
    opacity: 0.30;
}
.site-header {
    padding-top: 12px;
    padding-bottom: 9px;
    background: linear-gradient(180deg, rgba(17,23,28,0.96), rgba(17,23,28,0.82));
}
.nav-row {
    min-height: 88px;
    gap: 1.25rem;
    padding: 12px 16px 12px 18px;
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(24,31,36,0.96), rgba(18,24,29,0.94));
    box-shadow: 0 18px 44px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(255,255,255,0.02);
}
.brand-logo {
    transform: translateY(-3px);
}
.site-nav {
    padding: 0.30rem;
    background: rgba(255,255,255,0.032);
}
.site-nav a {
    padding: 0.66rem 0.94rem;
    font-size: 0.93rem;
}
.mobile-nav-toggle {
    border-color: rgba(255,255,255,0.18);
    background: linear-gradient(180deg, rgba(43,52,58,0.98), rgba(23,30,36,0.96));
    box-shadow: 0 14px 28px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.09);
}
.hero {
    background:
        radial-gradient(860px 280px at 12% 8%, rgba(103,120,140,0.13), transparent 58%),
        radial-gradient(640px 200px at 86% 14%, rgba(255,255,255,0.028), transparent 60%),
        linear-gradient(180deg, #1b2329 0%, #171f25 24%, #151b20 66%, #141a1f 100%);
}
.hero::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.018), transparent 18%, transparent 82%, rgba(255,255,255,0.012));
    opacity: 0.64;
}
.hero-panel {
    background:
        radial-gradient(620px 180px at 10% 0%, rgba(103,120,140,0.050), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.015));
    box-shadow: 0 26px 62px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.045);
}
#expertise .shell,
#experience .shell,
#approach .shell,
#faq .shell {
    background:
        radial-gradient(820px 240px at 12% 0%, rgba(103,120,140,0.048), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0.013));
    box-shadow:
        0 24px 60px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 -1px 0 rgba(255,255,255,0.016);
}
#expertise .shell::before,
#experience .shell::before,
#approach .shell::before,
#faq .shell::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.018), transparent 28%),
        radial-gradient(circle at 18% 20%, rgba(255,255,255,0.010) 0 1px, transparent 1.2px),
        radial-gradient(circle at 74% 66%, rgba(103,120,140,0.010) 0 0.82px, transparent 1px);
    opacity: 0.24;
}
#approach .shell::after,
#experience .shell::after,
#expertise .shell::after,
#faq .shell::after {
    background: linear-gradient(90deg, rgba(103,120,140,0.032), transparent 14%, transparent 86%, rgba(103,120,140,0.028));
    opacity: 0.12;
}
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item,
.panel-note,
.panel-card {
    border-color: rgba(20,26,31,0.07);
    background: linear-gradient(180deg, var(--module-bg-1), var(--module-bg-2) 62%, var(--module-bg-3));
    box-shadow: 0 14px 34px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.36);
    color: var(--module-text);
}
.practice-card :is(h3,p,li,strong,span,div,a,ul,ol),
.experience-card :is(h3,p,li,strong,span,div,a,ul,ol),
.timeline-step :is(h3,p,li,strong,span,div,a,ul,ol),
.principle-card :is(h3,p,li,strong,span,div,a,ul,ol),
.issue-card :is(h3,p,li,strong,span,div,a,ul,ol),
.faq-item :is(summary,p,li,strong,span,div,a,ul,ol),
.panel-note :is(h3,p,li,strong,span,div,a,ul,ol),
.panel-card :is(h3,p,li,strong,span,div,a,ul,ol) {
    color: inherit;
}
.panel-card strong,
.panel-note strong,
.practice-card h3,
.experience-card h3,
.timeline-step h3,
.faq-item summary,
.principle-card p,
.issue-card p {
    color: var(--module-text);
}
.panel-note p,
.panel-card p,
.card-copy,
.experience-list,
.experience-list li,
.experience-note,
.faq-answer,
.panel-card .panel-steps,
.panel-card .panel-steps li,
.panel-card-muted .panel-steps,
.panel-card-muted .panel-steps li {
    color: var(--module-text-soft);
}
.panel-card .panel-steps li::before,
.panel-card-muted .panel-steps li::before,
.card-chip,
.brand-pill,
.panel-label,
.metric-label,
.contact-card-label,
.contact-action-label,
.contact-meta-label,
.card-index,
.timeline-number,
.issue-index,
.principle-number,
.faq-icon {
    color: var(--module-text-soft);
}
.card-chip,
.brand-pill {
    background: rgba(20,26,31,0.045);
    border-color: rgba(20,26,31,0.075);
}
.practice-card:hover,
.experience-card:hover,
.timeline-step:hover,
.principle-card:hover,
.issue-card:hover,
.faq-item:hover,
.faq-item[open] {
    box-shadow: 0 18px 42px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.38);
}
@media (max-width: 860px) {
    body.site-home::before {
        background-size: auto, auto, 100% 100%, 24px 24px, 34px 34px;
        opacity: 0.24;
    }
    .site-header {
        padding-top: 10px;
        padding-bottom: 8px;
    }
    .nav-row {
        min-height: 80px;
        gap: 1rem;
        padding: 10px 12px 10px 14px;
        border-radius: 30px;
    }
    .brand-logo {
        width: min(49vw, 190px);
        transform: translateY(-3px);
    }
}
@media (max-width: 640px) {
    body.site-home::before {
        background-size: auto, auto, 100% 100%, 22px 22px, 30px 30px;
        opacity: 0.20;
    }
    .nav-row {
        min-height: 76px;
        padding: 9px 10px 9px 12px;
        border-radius: 28px;
    }
    .brand-logo {
        width: min(53vw, 198px);
        transform: translateY(-3px);
    }
}


/* === v3.1.1 QA hard-fix: mobile toggle + unified light modules === */
:root {
    --module-bg-1: #b7aea2;
    --module-bg-2: #a99f93;
    --module-bg-3: #9b9185;
    --module-text: #12181d;
    --module-text-soft: #4a5660;
}
.mobile-nav-toggle {
    color: #f5f7f8 !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(38,46,52,0.98), rgba(21,28,34,0.96)) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus-visible,
.mobile-nav-toggle[aria-expanded="true"] {
    color: #f7f9fa !important;
    border-color: rgba(255,255,255,0.18) !important;
    background: linear-gradient(180deg, rgba(44,53,59,0.98), rgba(24,31,37,0.96)) !important;
    box-shadow: 0 16px 30px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.09) !important;
}
.mobile-nav-toggle span {
    background: currentColor !important;
}
.mobile-nav-panel {
    border-color: rgba(255,255,255,0.10) !important;
    background: linear-gradient(180deg, rgba(28,36,42,0.985), rgba(18,24,29,0.97)) !important;
    box-shadow: 0 28px 68px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.mobile-nav-panel a {
    color: var(--text) !important;
    background: rgba(255,255,255,0.04) !important;
}
.mobile-nav-panel a:hover,
.mobile-nav-panel a:focus-visible {
    background: rgba(255,255,255,0.08) !important;
}
.hero-panel,
.panel-note,
.panel-card,
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item {
    border-color: rgba(20,26,31,0.08) !important;
    background: linear-gradient(180deg, var(--module-bg-1), var(--module-bg-2) 62%, var(--module-bg-3)) !important;
    color: var(--module-text) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.34) !important;
}
.panel-note {
    background: linear-gradient(180deg, #b0a9a0, #a39a90 62%, #948a80) !important;
}
.panel-card-muted {
    background: linear-gradient(180deg, #b1a89d, #a2988d 62%, #93887d) !important;
}
.hero-panel::before,
.practice-card::before,
.experience-card::before,
.timeline-step::before,
.principle-card::before,
.issue-card::before,
.panel-note::before,
.panel-card::before {
    opacity: 0.48 !important;
}
.hero-panel :is(h3,p,li,strong,span,div,a,ul,ol),
.panel-note :is(h3,p,li,strong,span,div,a,ul,ol),
.panel-card :is(h3,p,li,strong,span,div,a,ul,ol),
.practice-card :is(h3,p,li,strong,span,div,a,ul,ol),
.experience-card :is(h3,p,li,strong,span,div,a,ul,ol),
.timeline-step :is(h3,p,li,strong,span,div,a,ul,ol),
.principle-card :is(h3,p,li,strong,span,div,a,ul,ol),
.issue-card :is(h3,p,li,strong,span,div,a,ul,ol),
.faq-item :is(summary,p,li,strong,span,div,a,ul,ol) {
    color: inherit !important;
}
.hero-panel strong,
.panel-card strong,
.panel-note strong,
.practice-card h3,
.experience-card h3,
.timeline-step h3,
.faq-item summary,
.principle-card p,
.issue-card p {
    color: var(--module-text) !important;
}
.hero-panel p,
.panel-note p,
.panel-card p,
.card-copy,
.experience-list,
.experience-list li,
.experience-note,
.faq-answer,
.panel-card .panel-steps,
.panel-card .panel-steps li,
.panel-card-muted .panel-steps,
.panel-card-muted .panel-steps li,
.contact-action-meta,
.contact-card-meta {
    color: var(--module-text-soft) !important;
}
.panel-card .panel-steps li::before,
.panel-card-muted .panel-steps li::before,
.card-chip,
.brand-pill,
.panel-label,
.metric-label,
.contact-card-label,
.contact-action-label,
.contact-meta-label,
.card-index,
.timeline-number,
.issue-index,
.principle-number,
.faq-icon {
    color: var(--module-text-soft) !important;
}
.card-chip,
.brand-pill {
    background: rgba(20,26,31,0.045) !important;
    border-color: rgba(20,26,31,0.075) !important;
}
@media (max-width: 860px) {
    .mobile-nav-toggle {
        width: 50px !important;
        height: 50px !important;
        border-radius: 18px !important;
    }
}
@media (max-width: 640px) {
    .mobile-nav-toggle {
        width: 48px !important;
        height: 48px !important;
        border-radius: 17px !important;
    }
}


/* === v3.1.2 readability correction for all light modules === */
:root {
    --module-text: #12181d;
    --module-text-soft: #3f4a53;
    --module-text-muted: #5b6670;
}
.hero-panel,
.panel-note,
.panel-card,
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item {
    color: var(--module-text) !important;
}
.hero-panel :is(h3,p,li,strong,span,div,a,ul,ol),
.panel-note :is(h3,p,li,strong,span,div,a,ul,ol),
.panel-card :is(h3,p,li,strong,span,div,a,ul,ol),
.practice-card :is(h3,p,li,strong,span,div,a,ul,ol),
.experience-card :is(h3,p,li,strong,span,div,a,ul,ol),
.timeline-step :is(h3,p,li,strong,span,div,a,ul,ol),
.principle-card :is(h3,p,li,strong,span,div,a,ul,ol),
.issue-card :is(h3,p,li,strong,span,div,a,ul,ol),
.faq-item :is(summary,p,li,strong,span,div,a,ul,ol) {
    color: inherit !important;
}
.hero-panel p,
.panel-note p,
.panel-card p,
.card-copy,
.experience-list,
.experience-list li,
.experience-note,
.faq-answer,
.contact-action-meta,
.contact-card-meta,
.contact-card-head p,
.timeline-content p {
    color: var(--module-text-soft) !important;
}
.panel-card .panel-steps,
.panel-card .panel-steps li,
.panel-card-muted .panel-steps,
.panel-card-muted .panel-steps li {
    color: var(--module-text-soft) !important;
    font-weight: 500;
}
.panel-card .panel-steps li::before,
.panel-card-muted .panel-steps li::before,
.card-chip,
.brand-pill,
.panel-label,
.metric-label,
.contact-card-label,
.contact-action-label,
.contact-meta-label,
.card-index,
.timeline-number,
.issue-index,
.principle-number,
.faq-icon,
.section-kicker {
    color: var(--module-text-muted) !important;
}
.panel-card strong,
.panel-note strong,
.practice-card h3,
.experience-card h3,
.timeline-step h3,
.faq-item summary,
.principle-card p,
.issue-card p,
.contact-card h3,
.contact-card strong {
    color: var(--module-text) !important;
}
.faq-icon::before,
.faq-icon::after {
    background: var(--module-text-muted) !important;
}


/* === v3.1.3 system stabilization: isolate contact + normalize text scales === */
:root {
    --module-text: #12181d;
    --module-text-soft: #47535c;
    --module-text-muted: #5b6670;
}
/* Light modules only */
.hero-panel,
.panel-note,
.panel-card,
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item {
    color: var(--module-text) !important;
}
.hero-panel :is(h3,p,li,strong,span,div,a,ul,ol),
.panel-note :is(h3,p,li,strong,span,div,a,ul,ol),
.panel-card :is(h3,p,li,strong,span,div,a,ul,ol),
.practice-card :is(h3,p,li,strong,span,div,a,ul,ol),
.experience-card :is(h3,p,li,strong,span,div,a,ul,ol),
.timeline-step :is(h3,p,li,strong,span,div,a,ul,ol),
.principle-card :is(h3,p,li,strong,span,div,a,ul,ol),
.issue-card :is(h3,p,li,strong,span,div,a,ul,ol),
.faq-item :is(summary,p,li,strong,span,div,a,ul,ol) {
    color: inherit !important;
}
.hero-panel p,
.panel-note p,
.panel-card p,
.card-copy,
.experience-list,
.experience-list li,
.experience-note,
.faq-answer,
.timeline-content p,
.panel-card .panel-steps,
.panel-card .panel-steps li,
.panel-card-muted .panel-steps,
.panel-card-muted .panel-steps li {
    color: var(--module-text-soft) !important;
}
.panel-card .panel-steps li::before,
.panel-card-muted .panel-steps li::before,
.card-chip,
.brand-pill,
.panel-label,
.metric-label,
.card-index,
.timeline-number,
.issue-index,
.principle-number,
.faq-icon {
    color: var(--module-text-muted) !important;
}
.panel-card strong,
.panel-note strong,
.practice-card h3,
.experience-card h3,
.timeline-step h3,
.faq-item summary,
.principle-card p,
.issue-card p {
    color: var(--module-text) !important;
}
.faq-icon::before,
.faq-icon::after {
    background: var(--module-text-muted) !important;
}
/* Contact block fully isolated from light module rules */
.contact-section,
.site-footer {
    background: var(--ink) !important;
    color: var(--contact-text) !important;
}
.contact-copy,
.contact-copy :is(h2,p,span,strong,a),
.contact-section .section-kicker,
.contact-section .section-copy,
.contact-section .section-copy p,
.contact-section h2,
.contact-card,
.contact-card :is(h3,p,li,strong,span,div,a,ul,ol,button),
.contact-actions-grid,
.contact-action-card,
.contact-action-card :is(h3,p,li,strong,span,div,a,ul,ol,button),
.contact-card-meta,
.contact-card-head,
.contact-card-head p,
.contact-card-label,
.contact-action-label,
.contact-action-meta,
.contact-meta-label,
.contact-phone-box,
.contact-phone-box a,
.contact-phone-reveal,
.site-footer p,
.footer-meta,
.footer-brand p {
    color: inherit !important;
}
.contact-copy,
.contact-card,
.site-footer {
    color: var(--contact-text) !important;
}
.contact-card-head p,
.contact-card-label,
.contact-action-label,
.contact-action-meta,
.contact-meta-label,
.contact-card-meta,
.site-footer p,
.footer-meta,
.footer-brand p {
    color: var(--contact-text-soft) !important;
}
.contact-card,
.contact-action-card,
.contact-phone-reveal,
.contact-secondary-button {
    border-color: var(--contact-line) !important;
}
.contact-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--contact-surface) 100%, transparent), color-mix(in srgb, var(--contact-surface) 92%, transparent)) !important;
    box-shadow: var(--shadow-card) !important;
}
.contact-action-card {
    background: color-mix(in srgb, var(--contact-surface-soft) 86%, transparent) !important;
}
.contact-action-card:hover,
.contact-action-card:focus-visible {
    background: color-mix(in srgb, var(--contact-surface-soft) 72%, var(--contact-button-bg) 7%) !important;
}
.contact-phone-reveal {
    background: var(--contact-surface-soft) !important;
    color: var(--contact-text) !important;
}
.contact-phone-reveal:hover {
    background: color-mix(in srgb, var(--contact-surface-soft) 60%, var(--contact-button-bg) 10%) !important;
}
.contact-card .button-primary {
    background: var(--contact-button-bg) !important;
    color: var(--contact-button-text) !important;
}
.contact-secondary-button {
    background: transparent !important;
    color: var(--contact-text) !important;
}
.contact-secondary-button:hover,
.contact-secondary-button:focus-visible {
    background: color-mix(in srgb, var(--contact-surface-soft) 55%, transparent) !important;
}


/* === v3.1.4 unified light-modules contract === */
:root {
    --module-bg-1: #b9b0a4;
    --module-bg-2: #aba195;
    --module-bg-3: #9d9387;
    --module-text: #12181d;
    --module-text-soft: #42505a;
    --module-text-muted: #5a6771;
}
.hero-panel,
.panel-note,
.panel-card,
.practice-card,
.experience-card,
.timeline-step,
.principle-card,
.issue-card,
.faq-item {
    --on-module: var(--module-text);
    --on-module-soft: var(--module-text-soft);
    --on-module-muted: var(--module-text-muted);
    border-color: rgba(20,26,31,0.08) !important;
    background: linear-gradient(180deg, var(--module-bg-1), var(--module-bg-2) 62%, var(--module-bg-3)) !important;
    color: var(--on-module) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.34) !important;
}
.panel-note {
    background: linear-gradient(180deg, #b3aca2, #a59c91 62%, #968c81) !important;
}
.panel-card-muted {
    background: linear-gradient(180deg, #b0a79c, #a1988d 62%, #93897e) !important;
}
.hero-panel::before,
.panel-note::before,
.panel-card::before,
.practice-card::before,
.experience-card::before,
.timeline-step::before,
.principle-card::before,
.issue-card::before {
    opacity: 0.44 !important;
}
/* default inside light modules = dark readable */
.hero-panel *:not(.button):not(.contact-secondary-button),
.panel-note *:not(.button):not(.contact-secondary-button),
.panel-card *:not(.button):not(.contact-secondary-button),
.practice-card *:not(.button):not(.contact-secondary-button),
.experience-card *:not(.button):not(.contact-secondary-button),
.timeline-step *:not(.button):not(.contact-secondary-button),
.principle-card *:not(.button):not(.contact-secondary-button),
.issue-card *:not(.button):not(.contact-secondary-button),
.faq-item *:not(.button):not(.contact-secondary-button) {
    color: var(--on-module) !important;
}
/* soft copy */
.hero-panel p,
.panel-note p,
.panel-card p,
.card-copy,
.card-copy p,
.experience-note,
.experience-list,
.experience-list li,
.timeline-content,
.timeline-content p,
.faq-answer,
.faq-answer p,
.panel-steps,
.panel-steps li,
.practice-card li,
.experience-card li,
.timeline-step li,
.principle-card li,
.issue-card li {
    color: var(--on-module-soft) !important;
}
/* headings and emphasis */
.hero-panel strong,
.panel-note strong,
.panel-card strong,
.practice-card h3,
.experience-card h3,
.timeline-step h3,
.principle-card p:first-of-type,
.issue-card p:first-of-type,
.faq-item summary,
.contact-card h3,
.contact-card strong {
    color: var(--on-module) !important;
}
/* labels / indexes / chips */
.panel-label,
.metric-label,
.card-index,
.timeline-number,
.issue-index,
.principle-number,
.card-chip,
.brand-pill,
.faq-icon,
.panel-steps li::before,
.faq-item .faq-icon,
.practice-card .card-chip,
.experience-card .card-chip {
    color: var(--on-module-muted) !important;
}
.card-chip,
.brand-pill {
    background: rgba(20,26,31,0.045) !important;
    border-color: rgba(20,26,31,0.075) !important;
}
.faq-icon::before,
.faq-icon::after {
    background: var(--on-module-muted) !important;
}
/* explicit reset for dark contact section so it never inherits module contract */
.contact-section,
.contact-section *,
.site-footer,
.site-footer * {
    --on-module: initial;
    --on-module-soft: initial;
    --on-module-muted: initial;
}
.contact-section,
.site-footer {
    background: var(--ink) !important;
    color: var(--contact-text) !important;
}
.contact-copy,
.contact-copy :is(h2,p,span,strong,a),
.contact-section .section-kicker,
.contact-section .section-copy,
.contact-section .section-copy p,
.contact-section h2,
.contact-card,
.contact-card :is(h3,p,li,strong,span,div,a,ul,ol,button),
.contact-actions-grid,
.contact-action-card,
.contact-action-card :is(h3,p,li,strong,span,div,a,ul,ol,button),
.contact-card-meta,
.contact-card-head,
.contact-card-head p,
.contact-card-label,
.contact-action-label,
.contact-action-meta,
.contact-meta-label,
.contact-phone-box,
.contact-phone-box a,
.contact-phone-reveal,
.site-footer p,
.footer-meta,
.footer-brand p {
    color: inherit !important;
}
.contact-copy,
.contact-card,
.site-footer { color: var(--contact-text) !important; }
.contact-card-head p,
.contact-card-label,
.contact-action-label,
.contact-action-meta,
.contact-meta-label,
.contact-card-meta,
.site-footer p,
.footer-meta,
.footer-brand p { color: var(--contact-text-soft) !important; }
.contact-card,
.contact-action-card,
.contact-phone-reveal,
.contact-secondary-button { border-color: var(--contact-line) !important; }
.contact-card { background: linear-gradient(180deg, color-mix(in srgb, var(--contact-surface) 100%, transparent), color-mix(in srgb, var(--contact-surface) 92%, transparent)) !important; }
.contact-action-card { background: color-mix(in srgb, var(--contact-surface-soft) 86%, transparent) !important; }
.contact-action-card:hover,
.contact-action-card:focus-visible { background: color-mix(in srgb, var(--contact-surface-soft) 72%, var(--contact-button-bg) 7%) !important; }
.contact-phone-reveal { background: var(--contact-surface-soft) !important; color: var(--contact-text) !important; }
.contact-secondary-button { background: transparent !important; color: var(--contact-text) !important; }
.contact-secondary-button:hover,
.contact-secondary-button:focus-visible { background: color-mix(in srgb, var(--contact-surface-soft) 55%, transparent) !important; }