html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #111317;
color: #f5f2e9;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

:root {
--color-ink: #fdfaf0;
--color-ink-soft: #cdc7b4;
--color-void: #111317;
--color-panel: #1c2028;
--color-panel-soft: #252b36;
--color-accent: #a3b087;
--color-accent-soft: #c0c99f;
--color-accent-deep: #435663;
--color-line: #313647;
--shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.45);
--radius-xs: 0.4rem;
--radius-md: 1.2rem;
--radius-lg: 2.4rem;
--space-2xs: 0.4rem;
--space-xs: 0.6rem;
--space-sm: 0.8rem;
--space-md: 1.2rem;
--space-lg: 1.8rem;
--space-xl: 2.4rem;
--space-2xl: 3.2rem;
--font-display: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--text-xs: 0.72rem;
--text-sm: 0.8rem;
--text-md: 0.92rem;
--text-lg: 1rem;
--text-xl: 1.3rem;
--text-2xl: 1.7rem;
--text-3xl: 2.1rem;
--transition-fast: 160ms ease-out;
--transition-med: 220ms ease-out;
--transition-slow: 360ms ease-out;
}

body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: stretch;
}

.shell-page {
width: 100%;
max-width: 88rem;
padding: var(--space-md);
}

.shell-header {
border-radius: 999rem;
background: radial-gradient(circle at 0% 0%, rgba(163, 176, 135, 0.35), rgba(49, 54, 71, 0.95));
padding: var(--space-xs) var(--space-md);
margin-bottom: var(--space-xl);
position: relative;
overflow: visible;
z-index: 20;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

.shell-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}

.brand-lockup {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-sm);
}

.brand-mark {
text-decoration: none;
color: var(--color-ink);
}

.brand-mark-primary {
font-family: var(--font-display);
font-size: var(--text-lg);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.18rem 0.9rem;
border-radius: 999rem;
background: rgba(11, 13, 18, 0.86);
border: 1px solid rgba(255, 248, 212, 0.3);
}

.shell-nav {
position: absolute;
inset: 100% var(--space-md) auto auto;
border-radius: var(--radius-md);
background: rgba(11, 13, 18, 0.98);
padding: var(--space-sm);
display: none;
flex-direction: column;
align-items: stretch;
gap: var(--space-xs);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65);
min-width: 11rem;
z-index: 30;
}

.shell-nav.is-open {
display: flex;
}

.nav-link {
font-size: var(--text-sm);
padding: 0.35rem 0.9rem;
border-radius: 999rem;
text-decoration: none;
color: var(--color-ink-soft);
background: rgba(17, 19, 23, 0.24);
border: 1px solid transparent;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.nav-link:hover {
color: var(--color-ink);
border-color: rgba(163, 176, 135, 0.8);
background: rgba(17, 19, 23, 0.52);
transform: translateY(-1px);
}

.nav-link.is-active {
background: linear-gradient(120deg, var(--color-accent), var(--color-accent-deep));
color: #111317;
}

.nav-toggle {
width: 2.2rem;
height: 2.2rem;
border-radius: 999rem;
border: 1px solid rgba(245, 242, 233, 0.3);
background: rgba(17, 19, 23, 0.45);
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.18rem;
padding: 0;
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.nav-toggle-bar {
width: 1.15rem;
height: 2px;
border-radius: 999rem;
background: var(--color-ink);
transition: transform var(--transition-med), opacity var(--transition-med);
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(1) {
transform: translateY(4px) rotate(42deg);
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(2) {
opacity: 0;
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(3) {
transform: translateY(-4px) rotate(-42deg);
}

.nav-toggle.is-open {
background: rgba(11, 13, 18, 0.9);
border-color: rgba(163, 176, 135, 0.8);
transform: translateY(-1px);
}

.shell-main {
display: flex;
flex-direction: column;
gap: var(--space-xl);
}

.hero-region {
border-radius: var(--radius-lg);
background: radial-gradient(circle at 10% 0%, rgba(163, 176, 135, 0.26), rgba(49, 54, 71, 0.96));
padding: var(--space-lg);
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}

.hero-layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
gap: var(--space-lg);
align-items: stretch;
}

.hero-visual {
position: relative;
border-radius: calc(var(--radius-lg) * 0.7);
overflow: hidden;
background: radial-gradient(circle at 0% 0%, rgba(255, 248, 212, 0.24), rgba(67, 86, 99, 0.95));
isolation: isolate;
}

.hero-canvas {
display: block;
width: 100%;
height: 100%;
opacity: 0.85;
mix-blend-mode: screen;
}

.hero-photo-stack {
position: absolute;
inset: 10% 6% 16% 8%;
pointer-events: none;
}

.hero-photo {
border-radius: var(--radius-md);
width: 72%;
max-width: 100%;
object-fit: cover;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
transform-origin: center;
}

.hero-photo-primary {
position: absolute;
left: 0;
bottom: 0;
transform: rotate(-5deg) translateY(4%);
}

.hero-photo-secondary {
position: absolute;
right: 0;
top: 12%;
transform: rotate(6deg);
}

.hero-copy {
display: flex;
flex-direction: column;
gap: var(--space-md);
justify-content: space-between;
}

.hero-title {
font-family: var(--font-display);
font-size: var(--text-3xl);
letter-spacing: 0.02em;
}

.hero-lead {
font-size: var(--text-md);
color: var(--color-ink-soft);
max-width: 32rem;
}

.hero-pills {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}

.hero-pill {
font-size: var(--text-xs);
padding: 0.25rem 0.7rem;
border-radius: 999rem;
border: 1px solid rgba(255, 248, 212, 0.6);
background: rgba(17, 19, 23, 0.55);
}

.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}

.primary-cta,
.ghost-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
font-size: var(--text-sm);
padding: 0.5rem 1.4rem;
border-radius: 999rem;
text-decoration: none;
cursor: pointer;
}

.primary-cta {
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-deep));
color: #111317;
border: 1px solid transparent;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.primary-cta:hover {
filter: brightness(1.06);
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.ghost-cta {
background: rgba(17, 19, 23, 0.5);
border: 1px solid rgba(245, 242, 233, 0.45);
color: var(--color-ink);
transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.ghost-cta:hover {
background: rgba(17, 19, 23, 0.8);
border-color: rgba(163, 176, 135, 0.7);
transform: translateY(-1px);
}

.hero-meta {
display: flex;
flex-direction: column;
gap: 0.2rem;
font-size: var(--text-xs);
color: var(--color-ink-soft);
}

.strip-section {
border-radius: var(--radius-lg);
background: linear-gradient(135deg, #181b22, #202431);
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-lg);
}

.strip-heading {
max-width: 32rem;
}

.strip-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
margin: 0 0 var(--space-xs);
}

.strip-text {
margin: 0;
font-size: var(--text-md);
color: var(--color-ink-soft);
}

.strip-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-md);
}

.focus-card {
border-radius: var(--radius-md);
border: 1px solid rgba(67, 86, 99, 0.9);
padding: var(--space-md);
background: radial-gradient(circle at 0% 0%, rgba(163, 176, 135, 0.26), rgba(28, 32, 40, 0.98));
font-size: var(--text-sm);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}

.focus-card-em {
transform: translateY(-0.8rem);
}

.focus-title {
font-size: var(--text-lg);
margin: 0;
}

.focus-text {
margin: 0;
color: var(--color-ink-soft);
}

.asym-split {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-lg);
align-items: stretch;
background: linear-gradient(135deg, #181b22, #111317);
}

.asym-split-primary {
padding-right: var(--space-md);
}

.asym-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
margin: 0 0 var(--space-xs);
}

.asym-text {
margin: 0 0 var(--space-md);
font-size: var(--text-md);
color: var(--color-ink-soft);
max-width: 30rem;
}

.asym-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}

.asym-list-item {
font-size: var(--text-sm);
padding: 0.4rem 0.9rem;
border-radius: 999rem;
background: rgba(67, 86, 99, 0.8);
}

.asym-split-overlay {
position: relative;
display: grid;
align-content: center;
justify-items: flex-start;
gap: var(--space-sm);
}

.session-card {
border-radius: var(--radius-md);
padding: var(--space-md);
background: radial-gradient(circle at 0% 0%, rgba(163, 176, 135, 0.26), rgba(28, 32, 40, 1));
border: 1px solid rgba(163, 176, 135, 0.6);
display: inline-flex;
align-items: center;
gap: var(--space-sm);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
transform: translateX(8%);
}

.session-card-alt {
transform: translateX(30%) translateY(-12%);
background: radial-gradient(circle at 100% 0%, rgba(255, 248, 212, 0.1), rgba(49, 54, 71, 0.9));
}

.session-icon {
font-size: 1.1rem;
color: var(--color-accent-soft);
}

.session-label {
font-size: var(--text-sm);
margin: 0;
}

.strip-steps .step-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-md);
}

.step-card {
border-radius: var(--radius-md);
border: 1px solid rgba(163, 176, 135, 0.5);
background: rgba(17, 19, 23, 0.9);
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-xs);
font-size: var(--text-sm);
}

.step-index {
font-family: var(--font-display);
font-size: var(--text-md);
color: var(--color-accent-soft);
}

.step-title {
margin: 0;
font-size: var(--text-lg);
}

.step-text {
margin: 0;
color: var(--color-ink-soft);
}

.strip-quote .quote-belt {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-md);
}

.quote-card {
border-radius: var(--radius-md);
border: 1px solid rgba(67, 86, 99, 0.9);
background: rgba(17, 19, 23, 0.96);
padding: var(--space-md);
font-size: var(--text-sm);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}

.quote-text {
margin: 0;
color: var(--color-ink-soft);
}

.quote-author {
margin: 0;
font-size: var(--text-xs);
color: var(--color-accent-soft);
letter-spacing: 0.04em;
text-transform: uppercase;
}

.strip-cta .cta-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}

.shell-footer {
margin-top: var(--space-xl);
border-radius: var(--radius-lg);
background: linear-gradient(135deg, #1b1f26, #151923);
padding: var(--space-md) var(--space-lg);
font-size: var(--text-xs);
color: var(--color-ink-soft);
}

.footer-inner {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-lg);
}

.footer-logo {
font-family: var(--font-display);
font-size: var(--text-md);
}

.footer-text {
margin: var(--space-2xs) 0 0;
max-width: 20rem;
}

.footer-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}

.footer-link {
text-decoration: none;
color: var(--color-ink-soft);
padding: 0.25rem 0.7rem;
border-radius: 999rem;
border: 1px solid rgba(67, 86, 99, 0.9);
}

.footer-link:hover {
color: var(--color-ink);
border-color: var(--color-accent-soft);
}

.footer-meta {
display: flex;
flex-direction: column;
gap: 0.1rem;
align-items: flex-end;
}

.footer-meta-line {
margin: 0;
}

.privacy-layer {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.74);
z-index: 40;
padding: var(--space-md);
}

.privacy-layer.is-visible {
display: flex;
}

.privacy-panel {
max-width: 24rem;
width: 100%;
border-radius: var(--radius-lg);
background: #111317;
border: 1px solid rgba(163, 176, 135, 0.7);
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-md);
box-shadow: var(--shadow-soft);
}

.privacy-title {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-xl);
}

.privacy-text {
margin: 0;
font-size: var(--text-sm);
color: var(--color-ink-soft);
}

.privacy-panel .primary-cta,
.privacy-panel .ghost-cta {
width: 100%;
justify-content: center;
}

.page-shell-narrow {
border-radius: var(--radius-lg);
background: linear-gradient(145deg, #181b22, #111317);
padding: var(--space-lg);
max-width: 54rem;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-lg);
box-shadow: var(--shadow-soft);
}

.page-header-block {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}

.page-kicker {
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent-soft);
}

.page-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
margin: 0;
}

.page-lead {
margin: 0;
font-size: var(--text-md);
color: var(--color-ink-soft);
max-width: 32rem;
}

.page-grid-asym {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
align-items: flex-start;
}

.page-pill {
font-size: var(--text-xs);
padding: 0.25rem 0.7rem;
border-radius: 999rem;
border: 1px solid rgba(163, 176, 135, 0.7);
display: inline-flex;
align-items: center;
gap: 0.3rem;
}

.page-section {
border-radius: var(--radius-md);
background: rgba(17, 19, 23, 0.92);
padding: var(--space-md);
border: 1px solid rgba(49, 54, 71, 0.8);
display: flex;
flex-direction: column;
gap: var(--space-xs);
font-size: var(--text-sm);
}

.page-section-title {
margin: 0;
font-size: var(--text-lg);
}

.page-section-text {
margin: 0;
color: var(--color-ink-soft);
}

.page-section-list {
margin: 0;
padding-left: 1.1rem;
color: var(--color-ink-soft);
}

.product-listing {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-md);
}

.product-card {
border-radius: var(--radius-md);
background: rgba(17, 19, 23, 0.96);
border: 1px solid rgba(163, 176, 135, 0.6);
padding: var(--space-md);
font-size: var(--text-sm);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}

.product-name {
margin: 0;
font-size: var(--text-lg);
}

.product-price {
margin: 0;
font-size: var(--text-md);
color: var(--color-accent-soft);
}

.product-meta {
margin: 0;
color: var(--color-ink-soft);
}

.group-layout-asym {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: var(--space-lg);
align-items: stretch;
}

.group-panel-main {
border-radius: var(--radius-md);
background: rgba(17, 19, 23, 0.96);
border: 1px solid rgba(67, 86, 99, 0.9);
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-xs);
font-size: var(--text-sm);
}

.group-panel-aside {
position: relative;
}

.group-note-float {
position: absolute;
top: 10%;
right: 4%;
left: -6%;
border-radius: var(--radius-lg);
background: radial-gradient(circle at 0% 0%, rgba(163, 176, 135, 0.3), rgba(49, 54, 71, 0.95));
border: 1px solid rgba(163, 176, 135, 0.6);
padding: var(--space-md);
font-size: var(--text-sm);
box-shadow: var(--shadow-soft);
}

.contact-layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--space-lg);
align-items: flex-start;
}

.contact-panel {
border-radius: var(--radius-md);
background: rgba(17, 19, 23, 0.96);
border: 1px solid rgba(49, 54, 71, 0.9);
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}

.contact-form {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}

.field-label {
font-size: var(--text-xs);
color: var(--color-ink-soft);
display: flex;
justify-content: space-between;
align-items: center;
}

.field-input,
.field-textarea {
width: 100%;
border-radius: var(--radius-xs);
border: 1px solid rgba(67, 86, 99, 0.9);
background: rgba(10, 12, 16, 0.96);
padding: 0.45rem 0.7rem;
color: var(--color-ink);
font-size: var(--text-sm);
}

.field-textarea {
min-height: 5rem;
resize: vertical;
}

.field-checkbox-row {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: var(--text-xs);
color: var(--color-ink-soft);
}

.field-checkbox {
margin-top: 0.12rem;
width: 0.8rem;
height: 0.8rem;
border-radius: 0.25rem;
border: 1px solid rgba(163, 176, 135, 0.7);
background: rgba(10, 12, 16, 0.96);
}

.contact-map {
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid rgba(67, 86, 99, 0.9);
min-height: 16rem;
}

.contact-map iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}

.badge-inline {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: var(--text-xs);
padding: 0.15rem 0.6rem;
border-radius: 999rem;
background: rgba(67, 86, 99, 0.8);
}

.status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--text-xs);
padding: 0.15rem 0.6rem;
border-radius: 999rem;
background: rgba(163, 176, 135, 0.16);
border: 1px solid rgba(163, 176, 135, 0.7);
}

.simple-page {
border-radius: var(--radius-lg);
background: linear-gradient(135deg, #181b22, #111317);
padding: var(--space-lg);
max-width: 40rem;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-md);
align-items: flex-start;
box-shadow: var(--shadow-soft);
}

.simple-title {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-2xl);
}

.simple-text {
margin: 0;
font-size: var(--text-md);
color: var(--color-ink-soft);
}

.simple-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
}

.policy-layout {
display: flex;
flex-direction: column;
gap: var(--space-md);
}

.policy-block {
border-radius: var(--radius-md);
background: rgba(17, 19, 23, 0.96);
border: 1px solid rgba(49, 54, 71, 0.9);
padding: var(--space-md);
font-size: var(--text-sm);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}

.policy-heading {
margin: 0;
font-size: var(--text-lg);
}

.policy-meta {
margin: 0;
font-size: var(--text-xs);
color: var(--color-ink-soft);
}

.policy-text {
margin: 0;
color: var(--color-ink-soft);
}

.policy-list {
margin: 0;
padding-left: 1.1rem;
color: var(--color-ink-soft);
}

.hero-photo-tertiary {
border-radius: var(--radius-md);
width: 70%;
object-fit: cover;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}

@media (max-width: 960px) {
.shell-page {
padding: var(--space-sm);
}

.shell-header {
padding: var(--space-xs) var(--space-sm);
}

.hero-layout {
grid-template-columns: minmax(0, 1fr);
}

.hero-photo-stack {
inset: 14% 10% 12% 10%;
}

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

.asym-split {
grid-template-columns: minmax(0, 1fr);
}

.session-card,
.session-card-alt {
transform: none;
}

.strip-steps .step-row {
grid-template-columns: minmax(0, 1fr);
}

.strip-quote .quote-belt {
grid-template-columns: minmax(0, 1fr);
}

.product-listing {
grid-template-columns: minmax(0, 1fr);
}

.group-layout-asym {
grid-template-columns: minmax(0, 1fr);
}

.group-note-float {
position: static;
}

.contact-layout {
grid-template-columns: minmax(0, 1fr);
}

.footer-inner {
flex-direction: column;
align-items: flex-start;
}

.footer-meta {
align-items: flex-start;
}
}

@media (max-width: 768px) {
.hero-layout {
gap: var(--space-md);
}

.strip-section {
padding: var(--space-md);
}

.page-shell-narrow {
padding: var(--space-md);
}

.simple-page {
padding: var(--space-md);
}
}

@media (max-width: 600px) {
.hero-region,
.strip-section,
.shell-footer,
.page-shell-narrow,
.simple-page {
padding: var(--space-md);
}

.brand-mark-primary {
font-size: var(--text-md);
}

.brand-mark-tagline {
max-width: 14rem;
}

.hero-title {
font-size: var(--text-2xl);
}

.strip-title,
.page-title {
font-size: var(--text-xl);
}

.shell-page {
padding: var(--space-xs);
}
}

@media (max-width: 480px) {
.hero-title {
font-size: var(--text-xl);
}

.hero-lead {
font-size: var(--text-sm);
}

.strip-title,
.page-title {
font-size: var(--text-lg);
}

.page-lead,
.strip-text {
font-size: var(--text-sm);
}
}

@media (max-width: 360px) {
.shell-header {
padding-inline: var(--space-xs);
}

.brand-mark-primary {
font-size: var(--text-sm);
padding-inline: 0.4rem;
}

.primary-cta,
.ghost-cta {
padding-inline: 1rem;
}
}