:root {
  --page: #031a15;
  --page-soft: #073226;
  --ink: #f7f3e7;
  --ink-strong: #fff8dc;
  --muted: #c8d6c4;
  --muted-dark: #526158;
  --panel: rgba(255, 255, 255, 0.07);
  --line: rgba(244, 208, 111, 0.22);
  --light: #fbfbf6;
  --light-soft: #edf5ed;
  --light-ink: #10231a;
  --brand: #073d2f;
  --accent: #f4d06f;
  --accent-soft: #b9db55;
  --max: 1160px;
  --page-pad: clamp(32px, 4.5vw, 56px);
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
  color-scheme: dark;
  font-family: var(--font-body);
}
* { box-sizing: border-box; }
html { background: var(--page); }
body { background: radial-gradient(circle at 88% 12%, rgba(91, 132, 73, 0.22), transparent 28rem), linear-gradient(180deg, #021411 0%, #063326 42%, #021411 100%); color: var(--ink); margin: 0; overflow-x: hidden; }
a { color: inherit; }
p, h1, h2, h3, ul, ol { margin: 0; }
h1, h2, h3, p, a, li, label, button { overflow-wrap: break-word; word-break: normal; }
.site-header, .site-footer { align-items: center; display: flex; gap: 24px; justify-content: space-between; margin: 0 auto; max-width: var(--max); padding: 22px 0; width: min(calc(100% - 88px), var(--max)); }
.site-header { color: var(--ink-strong); position: relative; z-index: 30; }
.brand-lockup { color: var(--ink-strong); flex: 0 0 auto; text-decoration: none; }
.brand-lockup.image { align-items: center; display: flex; width: clamp(142px, 16vw, 190px); }
.brand-lockup.image img { display: block; height: auto; width: 100%; }
.brand-lockup.text { display: grid; font-family: var(--font-heading); font-size: 1.55rem; font-weight: 800; line-height: 0.82; text-transform: uppercase; }
.brand-lockup.text small { font-family: inherit; font-size: 0.62rem; letter-spacing: 0.38em; }
nav { align-items: center; display: flex; flex-wrap: wrap; gap: clamp(12px, 2.4vw, 28px); }
nav a { color: rgba(255, 255, 255, 0.88); font-size: 0.9rem; font-weight: 800; text-decoration: none; }
nav a[aria-current="page"] { color: var(--accent); }
.primary-nav { align-items: center; display: flex; flex-wrap: wrap; gap: clamp(12px, 2.4vw, 28px); }
.primary-nav a, .primary-nav summary { color: rgba(255, 255, 255, 0.88); font-size: 0.9rem; font-weight: 800; text-decoration: none; }
.primary-nav a[aria-current="page"], .primary-nav summary[aria-current="page"], .primary-nav summary.current { color: var(--accent); }
.nav-menu { position: relative; }
.nav-menu summary { align-items: center; cursor: pointer; display: inline-flex; gap: 7px; list-style: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; content: ""; height: 6px; margin-top: -3px; transform: rotate(45deg); width: 6px; }
.nav-submenu { background: rgba(247, 243, 231, 0.97); border: 1px solid rgba(16, 35, 26, 0.14); border-radius: 8px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26); display: grid; gap: 2px; min-width: 244px; padding: 8px; position: absolute; right: 0; top: calc(100% + 12px); z-index: 40; }
.nav-submenu a { border-radius: 6px; color: #173328; font-size: 0.85rem; padding: 10px 12px; }
.nav-submenu a:hover, .nav-submenu a:focus { background: rgba(19, 96, 61, 0.1); color: #0d3f2c; }
.nav-submenu a[aria-current="page"] { color: #0d5d38; }
.header-cta, .button { align-items: center; background: var(--accent); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; color: #0e2018; display: inline-flex; gap: 10px; font-weight: 900; justify-content: center; min-height: 46px; padding: 0 22px; text-decoration: none; }
.button { white-space: nowrap; }
.header-cta { white-space: nowrap; }
.button.secondary { background: transparent; border-color: rgba(244, 208, 111, 0.42); color: var(--ink); }
main { margin: 0; max-width: none; padding: 0; width: 100%; }
.template-section { margin: 0 0 clamp(34px, 6vw, 76px); }
.template-hero { align-items: center; display: grid; gap: clamp(28px, 6vw, 76px); grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr); margin-left: auto; margin-right: auto; max-width: var(--max); min-height: min(700px, calc(100vh - 120px)); padding: clamp(22px, 3vw, 42px) var(--page-pad) clamp(38px, 7vw, 84px); position: relative; }
.template-hero.compact { min-height: 0; padding-bottom: clamp(26px, 5vw, 52px); }
.template-hero.profile, .template-hero.contact, .template-hero.work-examples { grid-template-columns: minmax(0, 0.98fr) minmax(320px, 1.02fr); }
body[data-page="home"] .template-hero { grid-template-columns: minmax(0, 0.96fr) minmax(420px, 1.04fr); margin-bottom: 0; max-width: var(--max); min-height: clamp(500px, 42vw, 600px); padding: clamp(10px, 2vw, 24px) 0 clamp(34px, 4vw, 52px); width: min(calc(100% - 88px), var(--max)); }
body[data-page="home"] .template-hero h1 { font-size: clamp(2.65rem, 3.25vw, 3.3rem); max-width: 620px; }
body[data-page="home"] .template-hero .hero-copy > p { max-width: 570px; }
body[data-page="home"] .dashboard-visual { justify-self: stretch; }
body[data-page="home"] .feature-strip { gap: 10px 20px; margin-top: 30px; }
body[data-page="home"] .feature-strip li { font-size: 0.82rem; }
.hero-copy { max-width: 710px; position: relative; z-index: 1; }
.eyebrow { color: var(--accent); font-size: 0.78rem; font-weight: 900; letter-spacing: 0; margin-bottom: 14px; text-transform: uppercase; }
.template-hero h1 { color: var(--ink-strong); font-family: var(--font-heading); font-size: clamp(3.1rem, 6.2vw, 4.85rem); font-weight: 800; line-height: 0.96; margin: 0 0 24px; overflow-wrap: normal; word-break: normal; }
.template-hero h1 em { color: var(--accent-soft); font-style: italic; }
.template-hero p, .section-heading p, .template-card p, .template-case p, .template-cta p { color: var(--muted); font-size: 1rem; line-height: 1.75; }
.template-hero .hero-copy > p { font-size: 1.16rem; max-width: 610px; }
.action-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.feature-strip { display: flex; flex-wrap: wrap; gap: 12px 24px; list-style: none; margin: 38px 0 0; padding: 0; }
.feature-strip li { align-items: center; color: var(--ink); display: inline-flex; gap: 8px; font-size: 0.9rem; font-weight: 800; }
.feature-strip .icon { color: var(--accent); height: 18px; width: 18px; }
.asset-hero-visual { align-self: center; display: grid; justify-self: center; min-height: clamp(220px, 24vw, 340px); overflow: visible; place-items: center; position: relative; width: min(100%, clamp(320px, 34vw, 520px)); }
.asset-hero-visual::before { background: radial-gradient(circle at 50% 56%, rgba(203, 233, 106, 0.1), transparent 56%); content: ""; inset: 18% 10%; position: absolute; }
.asset-hero-visual img { display: block; height: auto; max-height: clamp(210px, 24vw, 340px); object-fit: contain; position: relative; width: 100%; }
.hero-backdrop-asset { display: none; }
.screenshot-hero-visual { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(244, 208, 111, 0.2); border-radius: 8px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3); min-height: 0; overflow: hidden; place-items: stretch; width: min(100%, clamp(520px, 50vw, 840px)); }
.screenshot-hero-visual::before { display: none; }
.screenshot-hero-visual img { max-height: none; object-fit: cover; object-position: top center; width: 100%; }
.screenshot-hero-visual p { background: rgba(4, 28, 22, 0.92); color: rgba(247, 243, 231, 0.76); font-size: 0.82rem; line-height: 1.45; margin: 0; padding: 12px 14px; }
body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-hero { gap: clamp(34px, 5vw, 64px); grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr); min-height: clamp(430px, 40vw, 580px); overflow: hidden; padding-bottom: clamp(30px, 5vw, 58px); }
body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-hero h1 { font-size: clamp(2.8rem, 4.75vw, 4.35rem); max-width: 680px; }
body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-hero .hero-copy > p { max-width: 620px; }
body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-hero .hero-copy { z-index: 3; }
body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-hero .screenshot-hero-visual, body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-hero .hero-feature-card { position: relative; z-index: 3; }
body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-hero .screenshot-hero-visual img { height: clamp(300px, 32vw, 460px); object-fit: cover; object-position: top center; }
body:is([data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"]) .template-hero .screenshot-hero-visual img { object-position: top right; }
body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .hero-backdrop-asset { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.18) 12%, rgba(0, 0, 0, 0.82) 34%, #000 52%); bottom: clamp(-128px, -7vw, -72px); display: block; height: clamp(330px, 31vw, 460px); left: clamp(-80px, -5vw, -36px); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.18) 12%, rgba(0, 0, 0, 0.82) 34%, #000 52%); max-width: none; object-fit: cover; object-position: bottom center; opacity: 0.3; pointer-events: none; position: absolute; right: auto; width: calc(100% + clamp(120px, 12vw, 220px)); z-index: 2; }
body[data-page="small-business-websites"] .template-hero { grid-template-columns: minmax(0, 0.68fr) minmax(600px, 1.32fr); }
body[data-page="small-business-websites"] .template-hero .screenshot-hero-visual { width: min(100%, clamp(760px, 64vw, 1080px)); }
body[data-page="small-business-websites"] .template-hero .screenshot-hero-visual img { height: auto; object-fit: contain; object-position: center center; }
body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-process-section .process-inner { gap: clamp(20px, 3vw, 32px); grid-template-columns: 1fr; }
body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-process-section .section-heading { max-width: 820px; }
body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-process-section .section-heading h2 { font-size: clamp(1.8rem, 2.45vw, 2.35rem); }
body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-process-section .template-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .proof-visual-frame img { height: clamp(260px, 30vw, 430px); object-fit: cover; object-position: top center; }
.dashboard-visual { background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(244, 208, 111, 0.22); border-radius: 8px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28); display: grid; gap: 18px; grid-template-columns: 96px 1fr; min-height: 440px; overflow: hidden; padding: 18px; }
body[data-page="home"] .dashboard-visual { gap: 16px; grid-template-columns: 88px 1fr; min-height: 390px; padding: 16px; }
.dashboard-sidebar { background: rgba(255, 255, 255, 0.05); border-radius: 8px; display: grid; gap: 14px; grid-auto-rows: max-content; padding: 16px; }
body[data-page="home"] .dashboard-sidebar { gap: 12px; padding: 14px; }
.dashboard-sidebar span { color: #8fd38f; font-family: var(--font-heading); font-size: 1.4rem; }
.dashboard-sidebar i { background: rgba(255, 255, 255, 0.14); border-radius: 6px; display: block; height: 10px; }
.dashboard-main { display: grid; gap: 18px; min-width: 0; }
.dashboard-title { color: var(--ink-strong); font-weight: 900; }
.dashboard-stats { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-stats article, .dashboard-panels > div { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 8px; padding: 16px; }
body[data-page="home"] .dashboard-stats article, body[data-page="home"] .dashboard-panels > div { padding: 13px; }
.dashboard-stats small, .dashboard-stats span, .dashboard-panels span { color: var(--muted); display: block; font-size: 0.78rem; }
.dashboard-stats strong { color: var(--ink-strong); display: block; font-size: 2rem; line-height: 1.1; margin: 6px 0; }
body[data-page="home"] .dashboard-stats strong { font-size: 1.75rem; }
.dashboard-panels { display: grid; gap: 14px; grid-template-columns: 1.2fr 0.8fr; }
.dashboard-panels p { border-bottom: 1px solid rgba(255, 255, 255, 0.09); padding: 12px 0; }
body[data-page="home"] .dashboard-panels p { padding: 9px 0; }
.dashboard-panels p:last-child { border-bottom: 0; }
.dashboard-panels strong { color: var(--ink-strong); display: block; }
.line-art-visual { align-items: center; display: flex; justify-content: center; min-height: 300px; }
.line-art-visual svg { fill: none; max-width: 620px; stroke: rgba(207, 227, 110, 0.86); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; width: 100%; }
.profile-visual { background: linear-gradient(135deg, rgba(244, 208, 111, 0.16), rgba(255, 255, 255, 0.06)); border: 1px solid rgba(244, 208, 111, 0.2); border-radius: 8px; min-height: 420px; overflow: hidden; }
.profile-visual img { display: block; height: 100%; min-height: 420px; object-fit: cover; width: 100%; }
.profile-visual.placeholder { align-items: center; display: flex; justify-content: center; padding: 34px; }
.profile-visual.placeholder div { align-items: center; border: 1px solid rgba(244, 208, 111, 0.18); border-radius: 8px; display: grid; gap: 12px; justify-items: center; padding: 34px; text-align: center; }
.profile-visual.placeholder strong { color: var(--ink-strong); font-family: var(--font-heading); font-size: 2rem; }
.profile-visual.placeholder span { color: var(--muted); }
.profile-visual .icon { color: var(--accent); height: 56px; width: 56px; }
.hero-feature-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(244, 208, 111, 0.2); border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24); display: grid; gap: 18px; margin-left: auto; max-width: 440px; padding: clamp(26px, 4vw, 42px); }
.hero-feature-card .card-icon { height: 76px; margin: 0; width: 76px; }
.hero-feature-card h2 { color: var(--ink-strong); font-family: var(--font-heading); font-size: 2rem; line-height: 1.08; margin: 0; }
.hero-feature-card ul { display: grid; gap: 12px; list-style: none; margin: 4px 0 0; padding: 0; }
.hero-feature-card li { align-items: center; color: var(--muted); display: flex; gap: 10px; }
.hero-feature-card li .icon { color: var(--accent-soft); flex: 0 0 auto; height: 18px; width: 18px; }
.section-heading, .case-heading { margin: 0 auto clamp(26px, 4vw, 42px); max-width: 820px; text-align: center; }
.section-heading h2, .case-heading h2, .template-cta h2 { color: var(--ink-strong); font-family: var(--font-heading); font-size: 3rem; font-weight: 800; line-height: 1.02; margin-bottom: 14px; }
.template-card-section.light { background: var(--light); color: var(--light-ink); margin-left: 0; margin-right: 0; padding: clamp(48px, 7vw, 78px) var(--page-pad); width: 100%; }
.template-card-section.light .section-heading h2, .template-card-section.light .template-card h3, .template-card-section.light .eyebrow { color: var(--light-ink); }
.template-card-section.light .section-heading p, .template-card-section.light .template-card p, .template-card-section.light .template-card li { color: #314339; }
.template-card-section.light.connected-solutions { margin-bottom: 0; padding-bottom: clamp(42px, 6vw, 70px); }
.template-card-section.light.connected-solutions .section-heading { max-width: 760px; }
.template-card-section.light.connected-solutions .section-heading h2 { font-size: clamp(2.1rem, 3vw, 2.95rem); }
.template-card-section.light.connected-solutions .template-grid { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 0 auto; max-width: var(--max); }
.template-card-section.light.connected-solutions .template-card { align-items: start; background: #fbfbf7; border: 1px solid rgba(16, 35, 26, 0.12); border-radius: 8px; display: grid; justify-items: start; min-height: 210px; padding: 22px; text-align: left; }
.template-card-section.light.connected-solutions .template-card:first-child { border-left: 1px solid rgba(16, 35, 26, 0.12); }
.template-card-section.light.connected-solutions .card-icon { background: #e7f1e5; border: 0; border-radius: 999px; color: #0f7044; height: 70px; width: 70px; }
.template-card-section.light.connected-solutions .template-card h3 { font-family: var(--font-body); font-size: 1.08rem; font-weight: 900; line-height: 1.2; }
.template-card-section.light.connected-solutions .template-card p { font-size: 0.92rem; line-height: 1.65; }
.template-grid, .template-case-list { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); margin-left: auto; margin-right: auto; max-width: var(--max); min-width: 0; }
.template-grid.compact { margin-top: 24px; }
.template-grid.core { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.template-proof-panel { margin-left: auto; margin-right: auto; max-width: var(--max); padding-left: var(--page-pad); padding-right: var(--page-pad); }
.proof-panel-inner { align-items: center; display: grid; gap: clamp(22px, 4vw, 50px); grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr); }
.proof-panel-inner .section-heading { margin: 0; max-width: 620px; text-align: left; }
.proof-visual-frame { background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(244, 208, 111, 0.2); border-radius: 8px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28); margin: 0; overflow: hidden; }
.proof-visual-frame img { display: block; height: auto; width: 100%; }
.proof-visual-frame figcaption { color: rgba(247, 243, 231, 0.72); font-size: 0.82rem; line-height: 1.45; padding: 12px 14px; }
.template-card, .template-case, .template-empty { background: var(--panel); border: 1px solid rgba(244, 208, 111, 0.18); border-radius: 8px; min-width: 0; padding: 24px; }
.light .template-card { background: #fbfbf7; border-color: rgba(16, 35, 26, 0.12); }
.icon { display: inline-block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.card-icon { align-items: center; background: rgba(244, 208, 111, 0.13); border: 1px solid rgba(244, 208, 111, 0.28); border-radius: 8px; color: var(--accent); display: inline-flex; height: 52px; justify-content: center; margin-bottom: 18px; width: 52px; }
.card-icon .icon { height: 28px; width: 28px; }
.button .icon, button .icon { flex: 0 0 auto; height: 18px; width: 18px; }
.template-card h3, .template-case h3 { color: var(--ink-strong); font-family: var(--font-heading); font-size: 1.55rem; line-height: 1.12; margin-bottom: 10px; }
.template-card ul, .template-case ul { display: grid; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.template-card li, .template-case li { color: var(--muted); line-height: 1.5; padding-left: 20px; position: relative; }
.template-card li::before, .template-case li::before { border: 1px solid var(--accent-soft); border-radius: 999px; content: ""; height: 8px; left: 0; position: absolute; top: 0.58em; width: 8px; }
.text-link { color: #cbe96a; display: inline-flex; font-weight: 900; margin-top: 18px; text-decoration: none; }
.template-process-section { background: var(--light-soft); border: 0; border-radius: 0; color: var(--light-ink); margin-bottom: 0; padding: clamp(42px, 6vw, 70px) var(--page-pad); }
.template-process-section .process-inner { display: grid; gap: clamp(26px, 4vw, 50px); grid-template-columns: minmax(250px, 0.28fr) minmax(0, 1fr); margin: 0 auto; max-width: var(--max); }
.template-process-section .section-heading { margin: 0; max-width: 340px; text-align: left; }
.template-process-section .section-heading h2 { color: var(--light-ink); font-size: clamp(2rem, 2.5vw, 2.55rem); overflow-wrap: normal; word-break: normal; }
.template-process-section .section-heading p { color: #30453b; font-size: 1rem; line-height: 1.7; }
.template-steps { align-items: start; display: grid; gap: clamp(18px, 2.4vw, 32px); grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0 auto; max-width: none; padding: 0; width: 100%; }
.template-steps li { align-content: start; display: grid; gap: 14px; min-width: 0; position: relative; }
.template-steps li:not(:last-child)::after { display: none; }
.template-steps span { align-items: center; background: #dfeee0; border: 0; border-radius: 999px; color: #0f7044; display: inline-flex; font-weight: 900; height: 58px; justify-content: center; justify-self: start; width: 58px; }
.template-steps span .icon { height: 36px; width: 36px; }
.template-steps strong { align-items: flex-start; color: var(--light-ink); display: flex; font-family: var(--font-body); font-size: 0.95rem; gap: 8px; line-height: 1.22; margin-bottom: 6px; overflow-wrap: normal; word-break: normal; }
.template-steps strong b { align-items: center; background: #052f25; border-radius: 999px; color: #fff9dd; display: inline-flex; flex: 0 0 auto; font-size: 0.78rem; height: 22px; justify-content: center; width: 22px; }
.template-steps p { color: #263d32; font-size: 0.86rem; line-height: 1.52; }
.template-cta.service-link { margin-bottom: clamp(18px, 3vw, 34px); margin-top: clamp(20px, 4vw, 42px); max-width: var(--max); padding: 0; width: min(calc(100% - 88px), var(--max)); }
.template-cta.service-link .cta-inner { min-height: 124px; padding: clamp(22px, 3vw, 34px); }
.template-cta.service-link h2 { font-size: clamp(1.55rem, 2.4vw, 2.05rem); }
.template-cta.service-link p { max-width: 650px; }
.case-heading { align-items: end; display: flex; justify-content: space-between; max-width: none; text-align: left; }
.template-case-list { grid-template-columns: 1fr; }
.template-case { align-items: stretch; display: grid; gap: 28px; grid-template-columns: minmax(320px, 0.68fr) minmax(0, 0.74fr) minmax(230px, 0.48fr); }
.case-visual { align-items: center; background: linear-gradient(135deg, rgba(244, 208, 111, 0.18), rgba(128, 180, 139, 0.12)); border: 1px solid rgba(244, 208, 111, 0.18); border-radius: 8px; color: var(--ink-strong); display: flex; font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 800; justify-content: center; min-height: 190px; padding: 24px; text-align: center; }
.case-visual-image { align-items: start; align-self: start; background: rgba(255, 255, 255, 0.1); display: grid; font: inherit; gap: 0; justify-content: stretch; margin: 0; overflow: hidden; padding: 10px 10px 0; text-align: left; width: 100%; }
.case-visual-image img { background: #f8fafc; border-radius: 5px; display: block; height: auto; min-height: 0; object-fit: contain; object-position: top center; width: 100%; }
.case-visual-image figcaption { background: rgba(4, 28, 22, 0.92); color: rgba(247, 243, 231, 0.78); font-family: var(--font-body); font-size: 0.78rem; font-weight: 800; line-height: 1.35; padding: 10px 12px; }
.case-proof { border-left: 1px solid rgba(244, 208, 111, 0.18); display: grid; gap: 20px; padding-left: 24px; }
.case-proof strong { color: var(--accent); display: block; font-size: 0.76rem; margin-bottom: 7px; text-transform: uppercase; }
.template-cta { background: rgba(244, 208, 111, 0.11); border: 1px solid rgba(244, 208, 111, 0.22); border-radius: 8px; margin-left: auto; margin-right: auto; max-width: var(--max); padding: clamp(26px, 5vw, 40px); }
.template-cta .cta-inner { align-items: center; display: flex; gap: 24px; justify-content: space-between; width: 100%; }
.template-cta h2 { font-size: 2.35rem; }
#ready.template-cta { background: var(--light); border: 0; border-radius: 0; color: var(--light-ink); margin: 0; max-width: none; padding: clamp(36px, 5vw, 56px) var(--page-pad); width: 100%; }
#ready.template-cta .cta-inner { background: linear-gradient(135deg, #04241d 0%, #06392b 58%, #05251f 100%); border: 1px solid rgba(244, 208, 111, 0.34); border-radius: 8px; box-shadow: 0 20px 46px rgba(16, 35, 26, 0.16); margin: 0 auto; max-width: var(--max); padding: clamp(30px, 4vw, 44px); }
#ready.template-cta h2 { color: var(--ink-strong); font-size: clamp(1.85rem, 2.6vw, 2.45rem); max-width: 700px; }
#ready.template-cta p { color: rgba(247, 243, 231, 0.84); max-width: 620px; }
#ready.template-cta .button { min-width: 230px; }
body[data-page="about"] main { padding-bottom: clamp(30px, 5vw, 54px); }
body[data-page="about"] .template-section { margin-bottom: clamp(14px, 2.2vw, 22px); }
body[data-page="about"] .template-hero { align-items: start; gap: clamp(40px, 6vw, 72px); grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1.05fr); margin-top: -18px; max-width: var(--max); min-height: 0; padding: 0 0 clamp(10px, 1.6vw, 16px); width: min(calc(100% - 88px), var(--max)); }
body[data-page="about"] .template-hero h1 { font-size: clamp(2.2rem, 2.95vw, 2.72rem); line-height: 1.04; margin-bottom: 16px; max-width: 560px; }
body[data-page="about"] .template-hero .hero-copy > p { color: rgba(247, 243, 231, 0.88); font-size: 0.84rem; line-height: 1.52; max-width: 540px; }
body[data-page="about"] .template-hero .hero-copy > p + p { margin-top: 10px; }
body[data-page="about"] .template-hero .feature-strip { display: grid; gap: 14px 16px; grid-template-columns: minmax(174px, 0.9fr) minmax(210px, 1.1fr); margin-top: 22px; max-width: 540px; }
body[data-page="about"] .template-hero .feature-strip li { align-items: center; display: grid; grid-template-columns: 32px minmax(0, 1fr); }
body[data-page="about"] .template-hero .feature-strip .icon { color: var(--accent); height: 26px; width: 26px; }
body[data-page="about"] .template-hero .feature-strip span { display: grid; gap: 3px; }
body[data-page="about"] .template-hero .feature-strip strong { color: var(--ink-strong); font-size: 0.82rem; overflow-wrap: normal; word-break: normal; }
body[data-page="about"] .template-hero .feature-strip small { color: rgba(247, 243, 231, 0.72); font-size: 0.68rem; font-weight: 700; line-height: 1.25; }
body[data-page="about"] .profile-visual { background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(119, 184, 134, 0.1)); border-color: rgba(244, 208, 111, 0.2); min-height: clamp(300px, 30vw, 360px); }
body[data-page="about"] .profile-visual img { min-height: clamp(300px, 30vw, 360px); }
body[data-page="about"] .profile-visual.placeholder { padding: 24px; }
body[data-page="about"] .profile-visual.placeholder div { background: rgba(3, 26, 21, 0.24); min-height: clamp(220px, 23vw, 280px); width: 100%; }
body[data-page="about"] .about-split { background: linear-gradient(180deg, rgba(7, 50, 38, 0.74), rgba(4, 39, 31, 0.72)); margin-bottom: clamp(16px, 2.5vw, 24px); padding: clamp(14px, 2.2vw, 22px) var(--page-pad); }
body[data-page="about"] .about-split-inner { display: grid; gap: clamp(28px, 5vw, 56px); grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1fr); margin: 0 auto; max-width: var(--max); }
.icon-heading { align-items: center; display: flex; gap: 12px; margin-bottom: 12px; }
.icon-heading .icon { color: var(--accent-soft); height: 22px; width: 22px; }
.icon-heading .eyebrow { margin: 0; }
body[data-page="about"] .about-story-copy { border-right: 1px solid rgba(244, 208, 111, 0.18); padding-right: clamp(28px, 5vw, 56px); }
body[data-page="about"] .about-story-copy h2 { color: var(--ink-strong); font-family: var(--font-heading); font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.05; margin-bottom: 16px; }
body[data-page="about"] .about-story-copy p, body[data-page="about"] .about-beliefs p { color: rgba(247, 243, 231, 0.84); font-size: 0.78rem; line-height: 1.48; }
body[data-page="about"] .about-story-copy p + p { margin-top: 9px; }
body[data-page="about"] .about-beliefs ul { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; }
body[data-page="about"] .about-beliefs li { align-items: start; display: grid; gap: 11px; grid-template-columns: 22px minmax(0, 1fr); }
body[data-page="about"] .about-beliefs li > .icon { color: var(--accent-soft); height: 20px; margin-top: 1px; width: 20px; }
body[data-page="about"] .about-beliefs strong { color: var(--ink-strong); display: block; font-size: 0.86rem; margin-bottom: 1px; }
body[data-page="about"] #how_i_work.template-process-section { background: transparent; margin-left: auto; margin-right: auto; max-width: var(--max); padding: 0; width: min(calc(100% - 88px), var(--max)); }
body[data-page="about"] #how_i_work.template-process-section .process-inner { background: linear-gradient(145deg, rgba(255, 255, 255, 0.062), rgba(119, 184, 134, 0.07)); border: 1px solid rgba(244, 208, 111, 0.18); border-radius: 8px; gap: 12px; grid-template-columns: 1fr; max-width: none; padding: clamp(16px, 2vw, 20px); }
body[data-page="about"] #how_i_work .section-heading { margin: 0; max-width: none; text-align: left; }
body[data-page="about"] #how_i_work .section-heading h2 { color: var(--ink-strong); font-size: clamp(1.35rem, 2vw, 1.72rem); line-height: 1.15; margin: 0; max-width: 920px; }
body[data-page="about"] #how_i_work .section-heading p { color: rgba(247, 243, 231, 0.76); max-width: 680px; }
body[data-page="about"] #how_i_work .template-steps { max-width: none; }
body[data-page="about"] #how_i_work .template-steps { gap: clamp(16px, 2.3vw, 30px); }
body[data-page="about"] #how_i_work .template-steps li { gap: 10px; }
body[data-page="about"] #how_i_work .template-steps span { background: rgba(119, 184, 134, 0.16); border: 1px solid rgba(244, 208, 111, 0.2); color: var(--accent); height: 52px; width: 52px; }
body[data-page="about"] #how_i_work .template-steps span .icon { height: 25px; width: 25px; }
body[data-page="about"] #how_i_work .template-steps strong { color: var(--ink-strong); font-size: 0.9rem; margin-bottom: 4px; }
body[data-page="about"] #how_i_work .template-steps strong b { background: var(--accent); color: #0e2018; }
body[data-page="about"] #how_i_work .template-steps p { color: rgba(247, 243, 231, 0.74); font-size: 0.74rem; line-height: 1.36; }
body[data-page="about"] #how_i_work .template-steps li:not(:last-child)::after { color: var(--accent-soft); right: calc(clamp(16px, 2.3vw, 30px) * -0.5); top: 26px; }
body[data-page="about"] #principles.template-card-section { background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(119, 184, 134, 0.065)); border: 1px solid rgba(244, 208, 111, 0.18); border-radius: 8px; margin-left: auto; margin-right: auto; max-width: var(--max); padding: clamp(14px, 2.4vw, 20px); width: min(calc(100% - 88px), var(--max)); }
body[data-page="about"] #principles .section-heading { margin: 0 0 18px; max-width: none; text-align: left; }
body[data-page="about"] #principles .section-heading h2, body[data-page="about"] #principles .section-heading p { display: none; }
body[data-page="about"] #principles .template-grid { gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; }
body[data-page="about"] #principles .template-card { background: rgba(255, 255, 255, 0.045); min-height: 118px; padding: 13px; }
body[data-page="about"] #principles .card-icon { height: 36px; margin-bottom: 10px; width: 36px; }
body[data-page="about"] #principles .card-icon .icon { height: 24px; width: 24px; }
body[data-page="about"] #principles .template-card h3 { font-family: var(--font-body); font-size: 0.9rem; font-weight: 900; }
body[data-page="about"] #principles .template-card p { color: rgba(247, 243, 231, 0.76); font-size: 0.7rem; line-height: 1.36; }
body[data-page="about"] .about-personal { margin-left: auto; margin-right: auto; max-width: var(--max); width: min(calc(100% - 88px), var(--max)); }
body[data-page="about"] .about-personal-inner { align-items: center; display: grid; gap: clamp(22px, 3.4vw, 36px); grid-template-columns: minmax(280px, 0.68fr) minmax(0, 0.8fr) minmax(220px, 0.42fr); }
body[data-page="about"] .about-personal-visual { border-radius: 8px; min-height: 150px; overflow: hidden; }
body[data-page="about"] .about-personal-visual img { display: block; height: 100%; min-height: 150px; object-fit: cover; width: 100%; }
body[data-page="about"] .about-personal-visual.placeholder { align-items: center; background: linear-gradient(145deg, rgba(244, 208, 111, 0.12), rgba(119, 184, 134, 0.16)); border: 1px solid rgba(244, 208, 111, 0.2); display: flex; justify-content: center; }
body[data-page="about"] .about-personal-visual svg { fill: none; max-width: 90%; stroke: rgba(207, 227, 110, 0.78); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }
body[data-page="about"] .about-personal-copy h2 { color: var(--ink-strong); font-family: var(--font-heading); font-size: clamp(1.45rem, 2.4vw, 2.05rem); line-height: 1.08; margin-bottom: 10px; }
body[data-page="about"] .about-personal-copy p { color: rgba(247, 243, 231, 0.82); font-size: 0.84rem; line-height: 1.58; }
body[data-page="about"] .about-personal-list { border-left: 1px solid rgba(244, 208, 111, 0.18); display: grid; gap: 16px; list-style: none; margin: 0; padding: 6px 0 6px clamp(24px, 3vw, 36px); }
body[data-page="about"] .about-personal-list li { align-items: center; color: rgba(247, 243, 231, 0.9); display: flex; gap: 12px; font-size: 0.84rem; font-weight: 800; }
body[data-page="about"] .about-personal-list .icon { color: var(--accent); height: 22px; width: 22px; }
body[data-page="about"] #talk.template-cta { background: linear-gradient(145deg, rgba(244, 208, 111, 0.08), rgba(119, 184, 134, 0.08)); border-color: rgba(244, 208, 111, 0.2); margin-bottom: clamp(28px, 4vw, 44px); overflow: hidden; padding: 0; position: relative; width: min(calc(100% - 88px), var(--max)); }
body[data-page="about"] #talk.template-cta::before { background-image: radial-gradient(circle at 25% 30%, rgba(203, 233, 106, 0.42) 0 1px, transparent 2px), linear-gradient(135deg, rgba(203, 233, 106, 0.18), transparent 52%); content: ""; height: 100%; left: 0; opacity: 0.55; position: absolute; top: 0; width: 190px; }
body[data-page="about"] #talk.template-cta .cta-inner { min-height: 100px; padding: clamp(22px, 3vw, 32px) clamp(26px, 4vw, 42px) clamp(22px, 3vw, 32px) clamp(138px, 16vw, 170px); position: relative; }
body[data-page="about"] #talk.template-cta h2 { font-size: clamp(1.55rem, 2.3vw, 2rem); margin-bottom: 5px; }
body[data-page="about"] #talk.template-cta p { color: rgba(247, 243, 231, 0.82); }
body[data-page="about"] #talk.template-cta .action-row { flex: 0 0 auto; margin-top: 0; }
body[data-page="what-i-build"] main { padding-bottom: clamp(36px, 6vw, 72px); }
body[data-page="what-i-build"] .template-section { margin-bottom: clamp(30px, 4.5vw, 54px); }
body[data-page="what-i-build"] .template-hero { align-items: center; gap: clamp(34px, 6vw, 78px); grid-template-columns: minmax(0, 0.98fr) minmax(300px, 0.72fr); max-width: var(--max); min-height: clamp(500px, 44vw, 620px); overflow: hidden; padding: clamp(34px, 5vw, 64px) 0 clamp(78px, 8vw, 112px); width: min(calc(100% - 88px), var(--max)); }
body[data-page="what-i-build"] .template-hero::before { display: none; }
body[data-page="what-i-build"] .template-hero .hero-copy { max-width: 690px; position: relative; z-index: 2; }
body[data-page="what-i-build"] .template-hero h1 { font-size: clamp(3.15rem, 4.45vw, 4.45rem); max-width: 680px; }
body[data-page="what-i-build"] .template-hero .hero-copy > p { font-size: clamp(1.02rem, 1.3vw, 1.16rem); max-width: 640px; }
body[data-page="what-i-build"] .feature-strip { display: grid; gap: 10px; margin-top: 26px; max-width: 640px; }
body[data-page="what-i-build"] .feature-strip li { align-items: flex-start; font-size: 0.86rem; }
body[data-page="what-i-build"] .feature-strip li span { display: grid; gap: 2px; }
body[data-page="what-i-build"] .feature-strip li strong { display: block; line-height: 1.2; }
body[data-page="what-i-build"] .feature-strip li small { color: rgba(247, 243, 231, 0.76); display: block; font-size: 0.82rem; font-weight: 700; line-height: 1.35; }
body[data-page="what-i-build"] .asset-key-hero_foliage_right { display: none; }
body[data-page="what-i-build"] .asset-key-hero_foliage_right::before { display: none; }
body[data-page="what-i-build"] .asset-key-hero_foliage_right img { height: auto; max-height: none; width: 100%; }
body[data-page="what-i-build"] .hero-backdrop-asset { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 0.78) 32%, #000 48%); bottom: clamp(-112px, -7vw, -72px); display: block; height: clamp(340px, 31vw, 440px); left: clamp(-86px, -5vw, -36px); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 0.78) 32%, #000 48%); max-width: none; object-fit: cover; object-position: bottom center; opacity: 0.34; pointer-events: none; position: absolute; right: auto; width: calc(100% + clamp(140px, 14vw, 260px)); z-index: 0; }
body[data-page="what-i-build"] .hero-feature-card { align-self: center; background: linear-gradient(145deg, rgba(12, 49, 38, 0.9), rgba(52, 84, 58, 0.88)); border-color: rgba(244, 208, 111, 0.22); box-shadow: 0 28px 76px rgba(0, 0, 0, 0.24); justify-self: end; margin: 0; max-width: 440px; padding: clamp(26px, 3.4vw, 38px); position: relative; z-index: 2; }
body[data-page="what-i-build"] .hero-feature-card .card-icon { border-radius: 999px; height: 74px; width: 74px; }
body[data-page="what-i-build"] .hero-feature-card h2 { font-size: clamp(1.5rem, 2.2vw, 1.95rem); }
body[data-page="what-i-build"] #core_areas { margin-left: auto; margin-right: auto; max-width: var(--max); padding: 0; width: min(calc(100% - 88px), var(--max)); }
body[data-page="what-i-build"] #core_areas .section-heading { margin: 0 0 clamp(20px, 3vw, 30px); max-width: 620px; text-align: left; }
body[data-page="what-i-build"] #core_areas .section-heading .eyebrow { display: none; }
body[data-page="what-i-build"] #core_areas .section-heading h2 { font-size: clamp(1.8rem, 2.7vw, 2.25rem); margin-bottom: 6px; }
body[data-page="what-i-build"] #core_areas .section-heading p { color: rgba(247, 243, 231, 0.82); }
body[data-page="what-i-build"] #core_areas .template-grid { gap: 18px; max-width: none; }
body[data-page="what-i-build"] #core_areas .template-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(119, 184, 134, 0.075)); border-color: rgba(244, 208, 111, 0.2); display: flex; flex-direction: column; min-height: 300px; padding: clamp(22px, 3vw, 28px); }
body[data-page="what-i-build"] #core_areas .card-icon { flex: 0 0 auto; }
body[data-page="what-i-build"] #core_areas .card-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; min-width: 0; }
body[data-page="what-i-build"] #core_areas .template-card p { color: rgba(247, 243, 231, 0.84); }
body[data-page="what-i-build"] #core_areas .template-card li { color: rgba(247, 243, 231, 0.8); }
body[data-page="what-i-build"] #core_areas .text-link { align-self: flex-start; margin-top: auto; padding-top: 18px; }
body[data-page="what-i-build"] #support.support-strip { margin-left: auto; margin-right: auto; max-width: var(--max); width: min(calc(100% - 88px), var(--max)); }
body[data-page="what-i-build"] #support.support-strip .section-heading { margin: 0 0 clamp(18px, 3vw, 28px); max-width: 780px; text-align: left; }
body[data-page="what-i-build"] #support.support-strip .section-heading h2 { font-size: clamp(1.8rem, 2.8vw, 2.45rem); margin-bottom: 8px; }
body[data-page="what-i-build"] #support.support-strip .section-heading p { color: rgba(247, 243, 231, 0.82); }
body[data-page="what-i-build"] #support.support-strip .template-grid.compact { gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; max-width: none; }
body[data-page="what-i-build"] #support.support-strip .template-card { background: rgba(2, 20, 17, 0.42); border-color: rgba(244, 208, 111, 0.18); min-height: 0; padding: 20px; }
body[data-page="what-i-build"] #support.support-strip .template-card h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 950; }
body[data-page="what-i-build"] #support.support-strip .template-card p { color: rgba(247, 243, 231, 0.78); font-size: 0.88rem; line-height: 1.55; }
body[data-page="what-i-build"] #start.template-cta { background: linear-gradient(145deg, rgba(244, 208, 111, 0.08), rgba(119, 184, 134, 0.08)); border-color: rgba(244, 208, 111, 0.22); margin: 0 auto clamp(26px, 4vw, 44px); max-width: var(--max); overflow: hidden; padding: 0; position: relative; width: min(calc(100% - 88px), var(--max)); }
body[data-page="what-i-build"] #start.template-cta .cta-inner { min-height: 130px; padding: clamp(24px, 3vw, 34px) clamp(28px, 4vw, 42px); position: relative; }
body[data-page="what-i-build"] #start.template-cta h2 { font-size: clamp(1.55rem, 2.2vw, 2rem); }
body[data-page="what-i-build"] #start.template-cta .action-row { flex: 0 0 auto; }
body[data-page="what-i-build"] #start.template-cta .button { min-width: 230px; }
body[data-page="what-i-build"] #approach.template-process-section { background: transparent; margin-left: auto; margin-right: auto; max-width: var(--max); padding: 0; width: min(calc(100% - 88px), var(--max)); }
body[data-page="what-i-build"] #approach.template-process-section .process-inner { background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(119, 184, 134, 0.06)); border: 1px solid rgba(244, 208, 111, 0.18); border-radius: 8px; gap: 22px; grid-template-columns: 1fr; max-width: none; padding: clamp(22px, 3vw, 30px); }
body[data-page="what-i-build"] #approach .section-heading { max-width: none; }
body[data-page="what-i-build"] #approach .section-heading h2 { color: var(--ink-strong); font-size: clamp(1.45rem, 2vw, 1.8rem); }
body[data-page="what-i-build"] #approach .section-heading p { color: rgba(247, 243, 231, 0.76); max-width: 720px; }
body[data-page="what-i-build"] #approach .template-steps { max-width: none; }
body[data-page="what-i-build"] #approach .template-steps span { background: rgba(119, 184, 134, 0.16); border: 1px solid rgba(244, 208, 111, 0.22); color: var(--accent-soft); height: 64px; width: 64px; }
body[data-page="what-i-build"] #approach .template-steps strong { color: var(--ink-strong); }
body[data-page="what-i-build"] #approach .template-steps p { color: rgba(247, 243, 231, 0.74); }
body[data-page="what-i-build"] #approach .template-steps strong b { background: var(--accent); color: #0e2018; }
body[data-page="work-examples"] .template-hero { gap: clamp(44px, 7vw, 94px); grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1fr); margin-bottom: clamp(28px, 5vw, 60px); max-width: var(--max); min-height: clamp(440px, 42vw, 560px); padding: clamp(20px, 3vw, 42px) 0 clamp(18px, 3vw, 32px); width: min(calc(100% - 88px), var(--max)); }
body[data-page="work-examples"] .template-hero h1 { font-size: clamp(3.25rem, 5vw, 4.8rem); max-width: 650px; }
body[data-page="work-examples"] .template-hero .hero-copy > p { max-width: 620px; }
body[data-page="work-examples"] .asset-hero-visual { min-height: clamp(240px, 28vw, 380px); width: min(100%, clamp(340px, 38vw, 580px)); }
body[data-page="work-examples"] .asset-hero-visual img { max-height: clamp(230px, 28vw, 380px); }
body[data-page="work-examples"] .line-art-visual { min-height: 300px; }
body[data-page="work-examples"] .line-art-visual svg { max-width: 560px; }
body[data-page="work-examples"] .template-case-section { margin: 0 auto clamp(28px, 5vw, 58px); max-width: var(--max); width: min(calc(100% - 88px), var(--max)); }
body[data-page="work-examples"] .case-heading { align-items: center; margin: 0 0 clamp(22px, 4vw, 36px); }
body[data-page="work-examples"] .case-heading h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); max-width: 760px; }
body[data-page="work-examples"] .case-heading p { color: rgba(247, 243, 231, 0.78); max-width: 720px; }
body[data-page="work-examples"] .case-heading .action-row { flex: 0 0 auto; margin-top: 0; }
body[data-page="work-examples"] .case-empty { align-items: center; background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(119, 184, 134, 0.08)); border-color: rgba(244, 208, 111, 0.22); display: grid; gap: 24px; grid-template-columns: auto minmax(0, 1fr); min-height: 168px; }
body[data-page="work-examples"] .case-empty .card-icon { border-radius: 999px; height: 68px; margin: 0; width: 68px; }
body[data-page="work-examples"] .case-empty h3 { color: var(--ink-strong); font-family: var(--font-heading); font-size: clamp(1.65rem, 2.4vw, 2.1rem); margin: 0 0 8px; }
body[data-page="work-examples"] .case-empty p { color: rgba(247, 243, 231, 0.78); max-width: 780px; }
body[data-page="work-examples"] .template-case-list { max-width: none; }
body[data-page="work-examples"] .template-case { align-items: start; gap: clamp(24px, 3vw, 38px); grid-template-areas: "visual main" "visual proof"; grid-template-columns: minmax(560px, 1.15fr) minmax(300px, 0.65fr); }
body[data-page="work-examples"] .case-visual { grid-area: visual; min-height: clamp(360px, 36vw, 520px); padding: 12px; }
body[data-page="work-examples"] .case-main { grid-area: main; }
body[data-page="work-examples"] .case-proof { grid-area: proof; }
body[data-page="work-examples"] .case-visual-image img { height: clamp(340px, 34vw, 500px); object-fit: cover; object-position: top center; }
body[data-page="work-examples"] .template-cta { background: linear-gradient(145deg, rgba(244, 208, 111, 0.08), rgba(119, 184, 134, 0.08)); border-color: rgba(244, 208, 111, 0.22); margin-bottom: clamp(28px, 5vw, 58px); }
body[data-page="work-examples"] .template-cta h2 { font-size: clamp(1.75rem, 2.7vw, 2.45rem); }
body[data-page="contact"] main { padding-bottom: 0; }
body[data-page="contact"] .template-section { margin-bottom: clamp(12px, 2vw, 22px); }
body[data-page="contact"] .template-hero { align-items: center; gap: clamp(24px, 3.8vw, 44px); grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.86fr); margin-top: clamp(10px, 2vw, 24px); max-width: var(--max); min-height: 0; padding: 0; width: min(calc(100% - 88px), var(--max)); }
body[data-page="contact"] .template-hero h1 { color: #fffdf5; font-family: var(--font-body); font-size: clamp(2.8rem, 4.35vw, 3.9rem); font-weight: 950; line-height: 1.04; margin-bottom: 18px; max-width: 680px; }
body[data-page="contact"] .template-hero .hero-copy > p { color: rgba(247, 243, 231, 0.88); font-size: 1.18rem; line-height: 1.58; max-width: 590px; }
body[data-page="contact"] .template-hero .feature-strip { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 18px; max-width: 540px; }
body[data-page="contact"] .template-hero .feature-strip li { align-items: center; display: grid; gap: 13px; grid-template-columns: 42px minmax(0, 1fr); }
body[data-page="contact"] .template-hero .feature-strip .icon { background: rgba(119, 184, 134, 0.23); border-radius: 8px; color: var(--accent); height: 42px; padding: 9px; width: 42px; }
body[data-page="contact"] .template-hero .feature-strip strong { color: #fffdf5; display: block; font-size: 1rem; }
body[data-page="contact"] .template-hero .feature-strip small { color: rgba(247, 243, 231, 0.76); display: block; font-size: 0.82rem; font-weight: 700; margin-top: 3px; }
body[data-page="contact"] .asset-hero-visual { justify-self: end; max-width: calc(100vw - 48px); min-height: 0; width: clamp(360px, 34vw, 500px); }
body[data-page="contact"] .asset-hero-visual img { height: auto; max-height: none; max-width: calc(100vw - 48px); width: 100%; }
body[data-page="contact"] .contact-line-art { min-height: 230px; }
body[data-page="contact"] .contact-line-art svg { max-width: 520px; stroke: rgba(207, 227, 110, 0.78); stroke-width: 2.35; }
body[data-page="contact"] .contact-line-art.clean { min-height: clamp(230px, 24vw, 310px); }
body[data-page="contact"] .contact-line-art.clean svg { filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.18)); max-width: min(100%, 540px); }
body[data-page="contact"] .template-contact { gap: 22px; grid-template-columns: minmax(0, 1.16fr) minmax(300px, 0.74fr); margin-left: auto; margin-right: auto; max-width: var(--max); width: min(calc(100% - 88px), var(--max)); }
body[data-page="contact"] .template-hero + .template-appointment-request { margin-top: clamp(-44px, -4vw, -22px); }
body[data-page="contact"] .contact-message-card { min-height: 180px; }
body[data-page="contact"] .contact-form-panel { background: var(--light); border: 1px solid rgba(16, 35, 26, 0.1); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18); padding: clamp(20px, 2.6vw, 28px); }
body[data-page="contact"] .contact-form-panel h2 { font-family: var(--font-body); font-size: clamp(1.55rem, 2.2vw, 1.95rem); font-weight: 950; }
body[data-page="contact"] .contact-form-panel p { color: #5a6d61; font-size: 0.92rem; line-height: 1.45; }
body[data-page="contact"] .template-form { gap: 12px; margin-top: 18px; }
body[data-page="contact"] label { font-size: 0.78rem; }
body[data-page="contact"] input, body[data-page="contact"] select { min-height: 38px; }
body[data-page="contact"] textarea { min-height: 96px; }
body[data-page="contact"] .form-footer { align-items: center; display: flex; gap: 18px; justify-content: space-between; }
body[data-page="contact"] .privacy-note { align-items: center; color: #637168; display: inline-flex; gap: 7px; font-size: 0.78rem; line-height: 1.3; max-width: 210px; }
body[data-page="contact"] .privacy-note .icon { color: #526158; flex: 0 0 auto; height: 16px; width: 16px; }
body[data-page="contact"] .contact-cards { gap: 14px; }
body[data-page="contact"] .contact-cards .template-card { align-items: center; background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(119, 184, 134, 0.08)); border-color: rgba(244, 208, 111, 0.16); display: grid; gap: 18px; grid-template-columns: 60px minmax(0, 1fr); min-height: 116px; padding: 20px; }
body[data-page="contact"] .contact-cards .card-body { min-width: 0; }
body[data-page="contact"] .contact-cards .card-icon { background: rgba(119, 184, 134, 0.22); border: 0; border-radius: 8px; color: var(--ink-strong); height: 50px; margin: 0; width: 50px; }
body[data-page="contact"] .contact-cards .card-icon .icon { height: 30px; width: 30px; }
body[data-page="contact"] .contact-cards h3 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 950; margin-bottom: 6px; }
body[data-page="contact"] .contact-cards p, body[data-page="contact"] .contact-cards li { color: rgba(247, 243, 231, 0.84); font-size: 0.86rem; line-height: 1.42; }
body[data-page="contact"] .contact-cards ul { gap: 4px; margin-top: 8px; }
body[data-page="contact"] .contact-cards li { padding-left: 14px; }
body[data-page="contact"] .contact-cards li::before { background: rgba(247, 243, 231, 0.86); border: 0; height: 4px; top: 0.72em; width: 4px; }
body[data-page="contact"] #approach.template-process-section { background: transparent; color: var(--ink); margin-left: auto; margin-right: auto; max-width: var(--max); padding: 0; width: min(calc(100% - 88px), var(--max)); }
body[data-page="contact"] #approach.template-process-section .process-inner { display: grid; gap: 14px; grid-template-columns: 1fr; max-width: none; }
body[data-page="contact"] #approach .section-heading { max-width: 760px; text-align: left; }
body[data-page="contact"] #approach .section-heading .eyebrow { margin-bottom: 8px; }
body[data-page="contact"] #approach .section-heading h2 { color: #fffdf5; font-family: var(--font-body); font-size: clamp(1.55rem, 2.55vw, 2.05rem); font-weight: 950; line-height: 1.08; margin-bottom: 0; }
body[data-page="contact"] #approach .section-heading p { color: rgba(247, 243, 231, 0.76); }
body[data-page="contact"] #approach .template-steps { gap: 18px; max-width: none; }
body[data-page="contact"] #approach .template-steps li { align-items: start; gap: 12px; grid-template-columns: 58px minmax(0, 1fr); }
body[data-page="contact"] #approach .template-steps span { background: rgba(119, 184, 134, 0.24); border-radius: 999px; color: #fffdf5; height: 58px; width: 58px; }
body[data-page="contact"] #approach .template-steps span .icon { height: 28px; width: 28px; }
body[data-page="contact"] #approach .template-steps strong { color: #fffdf5; font-size: 0.93rem; margin-bottom: 4px; }
body[data-page="contact"] #approach .template-steps strong b { background: transparent; color: var(--accent); font-size: 0.95rem; height: auto; width: auto; }
body[data-page="contact"] #approach .template-steps p { color: rgba(247, 243, 231, 0.82); font-size: 0.86rem; line-height: 1.38; }
body[data-page="contact"] #approach .template-steps li:not(:last-child)::after { color: rgba(244, 208, 111, 0.78); right: -20px; top: 18px; }
body[data-page="contact"] #not_sure.template-cta { background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(119, 184, 134, 0.08)); border-color: rgba(244, 208, 111, 0.18); margin-bottom: clamp(18px, 2.5vw, 28px); overflow: hidden; padding: 0; position: relative; width: min(calc(100% - 88px), var(--max)); }
body[data-page="contact"] #not_sure .cta-inner { min-height: 108px; padding: 20px clamp(26px, 3vw, 34px); position: relative; }
body[data-page="contact"] #not_sure h2 { color: #fffdf5; font-family: var(--font-body); font-size: clamp(1.65rem, 2.6vw, 2.15rem); font-weight: 950; }
body[data-page="contact"] #not_sure p { color: rgba(247, 243, 231, 0.84); }
body[data-page="contact"] #not_sure .button { background: var(--light-soft); color: #0e2018; min-width: 200px; }
body[data-page="contact"] .site-footer { flex-wrap: nowrap; font-size: 0.78rem; gap: 18px; padding-bottom: 14px; padding-top: 14px; }
body[data-page="contact"] .site-footer p { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
body[data-page="contact"] .site-footer nav, body[data-page="contact"] .site-footer div { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 18px; }
.template-appointment-request { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0, 1.16fr) minmax(300px, 0.74fr); margin-left: auto; margin-right: auto; max-width: var(--max); width: min(calc(100% - 88px), var(--max)); }
.appointment-request-panel { background: var(--light); border: 1px solid rgba(16, 35, 26, 0.1); border-radius: 8px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18); color: var(--light-ink); min-width: 0; padding: clamp(20px, 2.6vw, 30px); }
.appointment-request-panel h2 { color: var(--light-ink); font-family: var(--font-body); font-size: clamp(1.7rem, 2.4vw, 2.1rem); font-weight: 950; line-height: 1.1; margin-bottom: 8px; }
.appointment-request-panel p { color: #4b5f54; font-size: 0.94rem; line-height: 1.55; }
.appointment-form textarea { min-height: 112px; }
.appointment-cards { gap: 14px; }
.appointment-cards .template-card { align-items: center; background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(119, 184, 134, 0.08)); border-color: rgba(244, 208, 111, 0.16); display: grid; gap: 18px; grid-template-columns: 60px minmax(0, 1fr); min-height: 116px; padding: 20px; }
.appointment-cards .card-icon { background: rgba(119, 184, 134, 0.22); border: 0; border-radius: 8px; color: var(--ink-strong); height: 50px; margin: 0; width: 50px; }
.appointment-cards h3 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 950; margin-bottom: 6px; }
.appointment-cards p, .appointment-cards li { color: rgba(247, 243, 231, 0.84); font-size: 0.86rem; line-height: 1.42; }
.template-contact { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.72fr); }
.contact-message-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(119, 184, 134, 0.08)); border: 1px solid rgba(244, 208, 111, 0.16); border-radius: 8px; color: #fffdf5; display: grid; gap: 14px; min-width: 0; padding: clamp(22px, 3vw, 34px); }
.contact-message-card h2 { color: #fffdf5; font-size: clamp(1.7rem, 2.5vw, 2.2rem); margin: 0; }
.contact-message-card p { color: rgba(247, 243, 231, 0.8); line-height: 1.55; max-width: 620px; }
.contact-message-card button { background: var(--light-soft); color: #0e2018; margin-top: 4px; }
.contact-form-panel { background: var(--light); border-radius: 8px; color: var(--light-ink); min-width: 0; padding: clamp(24px, 4vw, 34px); }
.contact-form-panel h2 { color: var(--light-ink); font-size: 2rem; margin-bottom: 6px; }
.contact-form-panel p { color: #4b5f54; }
.template-form { display: grid; gap: 16px; margin-top: 20px; }
.field-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
label { color: var(--light-ink); display: grid; gap: 7px; font-size: 0.86rem; font-weight: 900; }
input, select, textarea { background: #fffef8; border: 1px solid rgba(16, 35, 26, 0.2); border-radius: 8px; color: var(--light-ink); font: inherit; min-height: 44px; padding: 9px 12px; }
textarea { min-height: 150px; resize: vertical; }
button { align-items: center; background: var(--brand); border: 0; border-radius: 999px; color: #fff; cursor: pointer; display: inline-flex; gap: 10px; font: inherit; font-weight: 900; min-height: 46px; padding: 0 20px; width: max-content; }
button:disabled { cursor: wait; opacity: 0.72; }
.form-footer { display: block; }
.form-honey { height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px; }
.form-status { color: #335044; font-size: 0.88rem; font-weight: 800; min-height: 1.2em; }
.form-status.error { color: #9b2c2c; }
.privacy-note { align-items: center; color: #637168; display: inline-flex; gap: 7px; font-size: 0.78rem; line-height: 1.3; margin: 0; max-width: 280px; }
.privacy-note .icon { color: #526158; flex: 0 0 auto; height: 16px; width: 16px; }
.contact-cards { display: grid; gap: 16px; }
body.modal-open { overflow: hidden; }
.modal-overlay[hidden] { display: none !important; }
.modal-overlay { align-items: center; background: rgba(0, 22, 16, 0.72); display: grid; inset: 0; justify-items: center; padding: 20px; position: fixed; z-index: 5000; }
.modal-panel { background: var(--light); border: 1px solid rgba(16, 35, 26, 0.12); border-radius: 8px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28); color: var(--light-ink); max-height: min(760px, calc(100vh - 40px)); max-width: 720px; overflow: auto; padding: clamp(22px, 3vw, 34px); position: relative; width: min(100%, 720px); }
.modal-close { background: transparent; color: #335044; min-height: 0; padding: 0; position: absolute; right: 18px; top: 16px; width: auto; }
.appointment-slot-panel { max-width: 880px; width: min(100%, 880px); }
.appointment-slot-panel .section-heading { margin-bottom: 16px; padding-right: 70px; text-align: left; }
.appointment-slot-panel .section-heading h2 { color: var(--light-ink); font-family: var(--font-body); font-size: clamp(1.65rem, 2.4vw, 2.15rem); margin-bottom: 8px; }
.appointment-slot-panel .section-heading p:not(.eyebrow) { color: #53675c; }
.appointment-picker { display: grid; gap: 20px; grid-template-columns: minmax(280px, 0.84fr) minmax(260px, 1fr); margin-top: 18px; }
.appointment-date-panel, .appointment-time-panel { background: rgba(7, 61, 47, 0.055); border: 1px solid rgba(16, 35, 26, 0.1); border-radius: 8px; padding: 14px; }
.appointment-month { color: var(--light-ink); font-weight: 950; margin-bottom: 12px; }
.appointment-weekdays, .appointment-date-grid { display: grid; gap: 6px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.appointment-weekdays { color: #65766d; font-size: 0.72rem; font-weight: 950; margin-bottom: 6px; text-align: center; text-transform: uppercase; }
.appointment-date { aspect-ratio: 1; background: #fffef8; border: 1px solid rgba(16, 35, 26, 0.12); border-radius: 8px; color: #7b8a82; justify-content: center; min-height: 40px; padding: 0; width: 100%; }
.appointment-date.has-slots { color: var(--light-ink); }
.appointment-date.today { box-shadow: inset 0 0 0 2px rgba(244, 208, 111, 0.42); }
.appointment-date.selected { background: #0a4a38; color: #fffdf5; }
.appointment-date:disabled { background: rgba(255, 254, 248, 0.55); cursor: not-allowed; opacity: 0.56; }
.appointment-time-panel { display: flex; flex-direction: column; max-height: clamp(260px, 42vh, 390px); min-height: 0; }
.appointment-time-panel h3 { color: var(--light-ink); flex: 0 0 auto; font-family: var(--font-body); font-size: 1.25rem; font-weight: 950; margin: 0 0 12px; }
.appointment-slot-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: 0; min-height: 0; overflow-y: auto; padding-right: 4px; }
.appointment-slot { background: #fffef8; border: 1px solid rgba(16, 35, 26, 0.16); border-radius: 8px; color: var(--light-ink); justify-content: center; min-height: 48px; padding: 0 14px; text-align: center; width: 100%; }
.appointment-slot.selected { background: #0a4a38; color: #fffdf5; outline: 3px solid rgba(244, 208, 111, 0.45); }
.appointment-slot-empty { background: rgba(7, 61, 47, 0.06); border-radius: 8px; color: #53675c; grid-column: 1 / -1; margin: 0; padding: 16px; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.modal-actions button { background: var(--brand); color: #fff; }
.site-footer { border-top: 1px solid rgba(244, 208, 111, 0.16); color: var(--muted); font-size: 0.9rem; }
.site-footer div { display: flex; flex-wrap: wrap; gap: 14px; }
body[data-profile="fenrir_showcase"] { --brand: #073d2f; --accent: #f4d06f; --fenrir-page: #eef2f5; --fenrir-ink: #111827; --fenrir-muted: #52606c; background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(238,242,245,0.96)), repeating-linear-gradient(90deg, rgba(21,32,43,0.05) 0 1px, transparent 1px 112px); color: var(--fenrir-ink); }
body[data-profile="fenrir_showcase"] .site-header { color: var(--fenrir-ink); padding-bottom: 14px; padding-top: 18px; }
body[data-profile="fenrir_showcase"] .brand-lockup.image { width: 142px; }
body[data-profile="fenrir_showcase"] nav a { color: #263645; }
body[data-profile="fenrir_showcase"] nav a[aria-current="page"] { color: var(--brand); }
body[data-profile="fenrir_showcase"] .header-cta, body[data-profile="fenrir_showcase"] .button { background: var(--brand); color: #fff; }
body[data-profile="fenrir_showcase"] .site-footer { color: #5c6875; border-top-color: rgba(21, 32, 43, 0.12); }
body[data-profile="fenrir_showcase"] .showcase-hero-block { background: linear-gradient(180deg, #2a143c 0%, #211134 48%, #121827 100%); border-radius: 8px; display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 118px); overflow: hidden; padding: clamp(70px, 9vw, 132px) clamp(28px, 6vw, 76px); place-items: center; position: relative; }
body[data-profile="fenrir_showcase"] .showcase-hero-block::before { background: linear-gradient(188deg, rgba(9, 6, 22, 0.24) 0 35%, rgba(80, 38, 120, 0.2) 35% 54%, rgba(9, 16, 28, 0.2) 54% 100%); content: ""; inset: 0; position: absolute; z-index: 1; }
body[data-profile="fenrir_showcase"] .showcase-hero-copy { max-width: 900px; position: relative; text-align: center; z-index: 3; }
body[data-profile="fenrir_showcase"] .showcase-lead { margin: 0 auto; max-width: 900px; }
body[data-profile="fenrir_showcase"] .showcase-kicker { color: #d8b4fe; margin-bottom: 20px; }
body[data-profile="fenrir_showcase"] .showcase-lead h1 { color: #fff; font-size: clamp(4.2rem, 7vw, 7.6rem); line-height: 0.98; margin-bottom: 24px; }
body[data-profile="fenrir_showcase"] .showcase-lead p { color: #eef2ff; margin-left: auto; margin-right: auto; max-width: 760px; }
body[data-profile="fenrir_showcase"] .showcase-actions { justify-content: center; }
body[data-profile="fenrir_showcase"] .showcase-actions a { box-shadow: 0 18px 40px rgba(124, 58, 237, 0.28); }
body[data-profile="fenrir_showcase"] .showcase-teasers { display: none; }
body[data-profile="fenrir_showcase"] .showcase-visual { aspect-ratio: auto; background: transparent; border-radius: 0; box-shadow: none; inset: 0; overflow: hidden; position: absolute; z-index: 2; }
body[data-profile="fenrir_showcase"] .showcase-orbit { border-color: rgba(196, 181, 253, 0.14); }
body[data-profile="fenrir_showcase"] .showcase-orbit.one { inset: 13% 13%; }
body[data-profile="fenrir_showcase"] .showcase-orbit.two { inset: 26% 27%; }
body[data-profile="fenrir_showcase"] .showcase-core { height: 138px; opacity: 0.52; width: 138px; }
.showcase-hero-block, .showcase-section { margin: 0 auto; max-width: 1280px; width: min(calc(100% - 72px), 1280px); }
.showcase-hero-block { align-items: center; display: grid; gap: clamp(34px, 6vw, 86px); grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr); min-height: calc(100vh - 118px); padding: clamp(32px, 6vw, 70px) 0; }
.showcase-hero-copy { position: relative; z-index: 2; }
.showcase-lead { max-width: 900px; }
.showcase-kicker { color: var(--brand); font-size: 0.82rem; font-weight: 950; letter-spacing: 0; margin-bottom: 12px; text-transform: uppercase; }
.showcase-lead h1, .showcase-lead h2 { color: var(--fenrir-ink, var(--ink-strong)); font-family: var(--font-body); font-size: clamp(2.7rem, 6vw, 5.8rem); font-weight: 950; letter-spacing: 0; line-height: 0.96; margin: 0 0 18px; }
.showcase-lead p { color: var(--fenrir-muted, var(--muted)); font-size: 1.06rem; line-height: 1.65; max-width: 780px; }
.showcase-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.showcase-actions a { align-items: center; background: var(--brand); border: 1px solid rgba(21, 32, 43, 0.14); border-radius: 999px; color: #fff; display: inline-flex; font-weight: 950; justify-content: center; min-height: 48px; padding: 0 20px; text-decoration: none; }
.showcase-actions a.secondary { background: #fff; color: var(--fenrir-ink); }
.showcase-teasers { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 34px; }
.showcase-teaser { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(21, 32, 43, 0.12); border-radius: 8px; box-shadow: 0 18px 48px rgba(21, 32, 43, 0.1); display: grid; gap: 8px; min-height: 142px; padding: 18px; text-decoration: none; }
.showcase-teaser strong, .showcase-card h3, .showcase-step-card h3, .showcase-system-map h3, .showcase-list-grid h3 { color: var(--fenrir-ink); font-family: var(--font-body); font-size: 1.16rem; font-weight: 950; line-height: 1.16; }
.showcase-teaser p, .showcase-card p, .showcase-step-card p, .showcase-list-grid li, .showcase-system-map p { color: var(--fenrir-muted); line-height: 1.55; }
.showcase-teaser span, .showcase-card span, .showcase-code-card span { color: var(--brand); font-size: 0.78rem; font-weight: 950; text-transform: uppercase; }
.showcase-visual { aspect-ratio: 1; background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--brand) 36%, transparent), transparent 28%), linear-gradient(145deg, #170827 0%, #25113b 46%, #111827 100%); border-radius: 8px; box-shadow: 0 34px 96px rgba(17, 24, 39, 0.22); display: grid; overflow: hidden; place-items: center; position: relative; }
.showcase-orbit { border: 1px solid rgba(196, 181, 253, 0.2); border-radius: 999px; position: absolute; }
.showcase-orbit.one { inset: 13%; }
.showcase-orbit.two { inset: 28%; }
.showcase-core { align-items: center; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; display: flex; height: 30%; justify-content: center; width: 30%; }
.showcase-core img { border-radius: 999px; height: 78%; object-fit: cover; width: 78%; }
.showcase-section { padding: clamp(54px, 7vw, 84px) 0; }
.showcase-card-grid, .showcase-step-grid, .showcase-metric-flow, .showcase-list-grid, .showcase-code-grid { display: grid; gap: 16px; margin-top: 30px; }
.showcase-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.showcase-card-grid.compact, .showcase-step-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.showcase-card, .showcase-step-card, .showcase-metric-flow article, .showcase-system-map, .showcase-list-grid section, .showcase-code-card { background: rgba(255,255,255,0.9); border: 1px solid rgba(21, 32, 43, 0.11); border-radius: 8px; box-shadow: 0 16px 38px rgba(21, 32, 43, 0.08); padding: 22px; }
.showcase-card ul, .showcase-list-grid ul { color: var(--fenrir-muted); display: grid; gap: 9px; margin: 16px 0 0; padding-left: 20px; }
.showcase-metric-flow { background: linear-gradient(145deg, #170827, #221137 48%, #111827); border-radius: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 22px; }
.showcase-metric-flow article { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); box-shadow: none; color: #fff; min-height: 200px; }
.showcase-metric-flow span { color: #d8b4fe; display: block; font-size: 0.78rem; font-weight: 950; text-transform: uppercase; }
.showcase-metric-flow strong { display: block; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1; margin: 10px 0; }
.showcase-metric-flow p { color: #d7e0ea; line-height: 1.4; }
.showcase-log-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.32fr); margin-top: 30px; }
.showcase-log-panel { background: #111827; border-radius: 8px; color: #e5e7eb; overflow: hidden; }
.showcase-log-header { align-items: center; border-bottom: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; padding: 12px 14px; }
.showcase-log-window { display: grid; gap: 6px; padding: 12px; }
.showcase-log-row { align-items: center; background: rgba(255,255,255,0.055); border-radius: 7px; display: grid; gap: 12px; grid-template-columns: 104px 150px 78px minmax(0, 1fr); margin: 0; padding: 8px 10px; }
.showcase-log-row em { background: #475569; border-radius: 999px; color: #fff; font-size: 0.72rem; font-style: normal; font-weight: 900; padding: 4px 8px; text-align: center; }
.showcase-log-row small { color: #d7e0ea; font-size: 0.86rem; }
.showcase-stat-stack { display: grid; gap: 12px; }
.showcase-stat-stack article { background: rgba(255,255,255,0.9); border-radius: 8px; padding: 22px; }
.showcase-stat-stack strong { color: var(--brand); display: block; font-size: 2.7rem; line-height: 1; }
.showcase-socket-path, .showcase-arch-flow { background: #111827; border-radius: 8px; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; padding: 16px; }
.showcase-socket-path article, .showcase-arch-flow span { background: rgba(255,255,255,0.08); border-radius: 8px; color: #fff; display: grid; gap: 8px; min-height: 84px; padding: 16px; place-items: center; text-align: center; }
.showcase-system-map { margin-top: 24px; }
.showcase-map-row, .showcase-map-branches { display: grid; gap: 12px; margin-top: 14px; }
.showcase-map-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.showcase-map-branches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.showcase-map-row article, .showcase-map-branches article { background: #f8fafc; border-radius: 8px; padding: 14px; }
.showcase-list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.showcase-code-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.showcase-code-card { overflow: hidden; padding: 0; }
.showcase-code-card > div { border-bottom: 1px solid rgba(21,32,43,0.1); padding: 16px 18px; }
.showcase-code-card h3 { margin: 4px 0 0; }
.showcase-code-card pre { background: #111820; color: #eef5f8; margin: 0; max-height: 520px; overflow: auto; padding: 18px; }
@media (max-width: 980px) {
  .showcase-hero-block, .showcase-log-layout, .showcase-metric-flow, .showcase-card-grid, .showcase-card-grid.compact, .showcase-step-grid, .showcase-list-grid, .showcase-code-grid, .showcase-socket-path, .showcase-arch-flow, .showcase-map-row, .showcase-map-branches { grid-template-columns: 1fr; }
  .showcase-hero-block { min-height: auto; }
  .showcase-teasers { grid-template-columns: 1fr; }
  .template-hero, body[data-page="home"] .template-hero, body[data-page="what-i-build"] .template-hero, body[data-page="work-examples"] .template-hero, body[data-page="about"] .template-hero, body[data-page="contact"] .template-hero, .template-contact, .template-appointment-request, .template-case, .template-process-section .process-inner { grid-template-columns: 1fr; }
  .template-hero { min-height: 0; }
  .template-hero h1 { font-size: 3.6rem; }
  .section-heading h2, .case-heading h2 { font-size: 2.55rem; }
  .template-grid.core, .template-steps, .template-card-section.light.connected-solutions .template-grid { grid-template-columns: repeat(2, minmax(min(100%, 260px), 1fr)); }
  .template-process-section .section-heading { max-width: 640px; }
  .template-steps li:not(:last-child)::after { display: none; }
  .case-proof { border-left: 0; border-top: 1px solid rgba(244, 208, 111, 0.18); padding-left: 0; padding-top: 20px; }
  body[data-page="about"] .template-hero, body[data-page="about"] .about-split-inner, body[data-page="about"] .about-personal-inner { grid-template-columns: 1fr; }
  body[data-page="about"] .about-story-copy, body[data-page="about"] .about-personal-list { border-left: 0; border-right: 0; padding-left: 0; padding-right: 0; }
  body[data-page="about"] #principles .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="contact"] .template-hero, body[data-page="contact"] .template-contact, body[data-page="contact"] .template-appointment-request { grid-template-columns: 1fr; }
  body[data-page="contact"] .contact-line-art { min-height: 260px; }
  body[data-page="contact"] .contact-cards { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .site-header, .site-footer, .case-heading, .template-cta .cta-inner { align-items: flex-start; flex-direction: column; }
  .site-header, .site-footer, body[data-page="home"] .template-hero { width: min(calc(100% - 36px), var(--max)); }
  .brand-lockup.image { width: 132px; }
  .header-cta { display: none; }
  .site-header, .site-footer, .template-hero, .template-contact, .template-appointment-request, body[data-page="home"] .template-hero, body[data-page="what-i-build"] .template-hero, body[data-page="work-examples"] .template-hero, body[data-page="contact"] .template-hero, body[data-page="contact"] .template-contact { max-width: calc(100vw - 36px) !important; padding-left: 0; padding-right: 0; width: calc(100vw - 36px) !important; }
  body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-hero { gap: 26px; grid-template-columns: 1fr; min-height: 0; padding-bottom: 46px; padding-top: 16px; width: calc(100vw - 36px) !important; }
  body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-hero h1 { font-size: clamp(2.35rem, 13vw, 3rem); line-height: 1.03; max-width: none; }
  body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-hero .hero-copy > p { font-size: 1rem; line-height: 1.55; max-width: none; }
  body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-hero .screenshot-hero-visual { width: 100%; }
  body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .template-hero .screenshot-hero-visual img { height: min(300px, 64vw); object-position: top center; }
  body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .hero-backdrop-asset { bottom: -72px; height: 230px; left: -42px; object-position: bottom center; opacity: 0.16; right: auto; width: calc(100% + 84px); }
  body[data-page="small-business-websites"] .template-hero .screenshot-hero-visual img { height: auto; }
  nav, .primary-nav { display: flex; flex-wrap: wrap; gap: 8px 12px; max-width: 100%; }
  nav a, .primary-nav a, .primary-nav summary { font-size: 0.74rem; }
  .nav-menu { max-width: 100%; }
  .nav-submenu { box-shadow: none; gap: 0; margin-top: 8px; min-width: min(260px, calc(100vw - 36px)); position: static; width: 100%; }
  .nav-submenu a { font-size: 0.76rem; padding: 9px 10px; }
  .template-hero { overflow: hidden; }
  .hero-copy, main { max-width: 100%; min-width: 0; }
  .eyebrow, .template-hero h1, .template-hero .hero-copy > p, .dashboard-visual, .contact-form-panel { max-width: 100% !important; width: 100% !important; }
  .template-hero h1 { font-size: 2.75rem; }
  .section-heading h2, .case-heading h2, .template-cta h2 { font-size: 2.1rem; }
  .dashboard-visual, .dashboard-panels, .dashboard-stats, .field-grid, .proof-panel-inner, .template-grid.core, .template-steps, .template-card-section.light.connected-solutions .template-grid { grid-template-columns: 1fr; }
  body[data-page="contact"] .template-hero + .template-appointment-request { margin-top: 0; }
  .appointment-picker { gap: 12px; grid-template-columns: 1fr; }
  .appointment-slot-panel { max-height: calc(100vh - 32px); padding: 20px; }
  .appointment-date-panel, .appointment-time-panel { padding: 12px; }
  .appointment-time-panel { max-height: 300px; }
  .appointment-date { min-height: 34px; }
  .appointment-slot-list { grid-template-columns: 1fr; }
  .proof-panel-inner .section-heading { max-width: 100%; }
  .template-card-section.light.connected-solutions .template-card { border-left: 0; border-top: 1px solid rgba(16, 35, 26, 0.12); }
  .template-card-section.light.connected-solutions .template-card:first-child { border-top: 0; }
  .template-card-section.light { padding-left: clamp(18px, 4vw, 44px); padding-right: clamp(18px, 4vw, 44px); }
  .line-art-visual, .profile-visual, .profile-visual img { min-height: 260px; }
  .asset-hero-visual { min-height: 220px; }
  .hero-feature-card { max-width: none; }
  body[data-page="home"] .template-hero { gap: 28px; grid-template-columns: 1fr; min-height: 0; padding-top: 8px; }
  body[data-page="home"] .template-hero h1 { font-size: 2.25rem; line-height: 1.04; max-width: 100%; }
  body[data-page="home"] .template-hero .hero-copy > p { font-size: 1rem; line-height: 1.55; }
  body[data-page="home"] .dashboard-visual { grid-template-columns: 1fr; min-height: 300px; overflow: hidden; width: 100%; }
  body[data-page="home"] .dashboard-sidebar { min-height: 112px; }
  body[data-page="work-examples"] .template-case-section { width: calc(100vw - 36px); }
  body[data-page="work-examples"] .template-case { grid-template-areas: "visual" "main" "proof"; grid-template-columns: 1fr; padding: 16px; }
  body[data-page="work-examples"] .case-visual { width: 100%; }
  body[data-page="work-examples"] .case-visual-image { padding: 8px 8px 0; }
  body[data-page="work-examples"] .case-visual-image img { height: min(380px, 86vw); }
  body[data-page="what-i-build"] .template-hero { min-height: 0; overflow: hidden; padding-bottom: 74px; padding-top: 26px; }
  body[data-page="what-i-build"] .template-hero h1 { font-size: 2.55rem; line-height: 1.02; }
  body[data-page="what-i-build"] .template-hero .hero-copy > p { font-size: 1rem; line-height: 1.55; }
  body[data-page="what-i-build"] .asset-key-hero_foliage_right { display: none; }
  body[data-page="what-i-build"] .hero-backdrop-asset { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.22) 18%, #000 42%); bottom: -88px; height: 280px; left: -42px; mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.22) 18%, #000 42%); object-fit: cover; object-position: bottom center; opacity: 0.2; right: auto; width: calc(100% + 84px); }
  body[data-page="what-i-build"] #core_areas, body[data-page="what-i-build"] #support.support-strip, body[data-page="what-i-build"] #start.template-cta { width: calc(100vw - 36px); }
  body[data-page="what-i-build"] #support.support-strip .template-grid.compact { grid-template-columns: 1fr; }
  body:is([data-page="small-business-websites"], [data-page="customer-communications"], [data-page="scheduling-operations"], [data-page="operations-dashboards-integrations"], [data-page="business-integrations"], [data-page="business-automation"]) .proof-visual-frame img { height: min(360px, 90vw); }
  body[data-page="contact"] .template-hero .asset-hero-visual { display: none; }
  body[data-page="contact"] .asset-hero-visual, body[data-page="contact"] .asset-hero-visual img { max-width: 100%; width: 100%; }
  body[data-page="contact"] .template-hero h1 { font-size: 2rem; }
  body[data-page="contact"] .template-hero .hero-copy > p { font-size: 1rem; }
  body[data-page="about"] .template-hero, body[data-page="about"] #how_i_work.template-process-section, body[data-page="about"] #principles.template-card-section, body[data-page="about"] .about-personal, body[data-page="about"] #talk.template-cta { width: min(calc(100% - 36px), var(--max)); }
  body[data-page="about"] .template-hero .feature-strip, body[data-page="about"] #principles .template-grid { grid-template-columns: 1fr; }
  body[data-page="about"] #talk.template-cta::before { display: none; }
  body[data-page="about"] #talk.template-cta .cta-inner { padding: 24px; }
  body[data-page="contact"] .template-hero, body[data-page="contact"] .template-contact, body[data-page="contact"] .template-appointment-request, body[data-page="contact"] #approach.template-process-section, body[data-page="contact"] #not_sure.template-cta { width: min(calc(100% - 36px), var(--max)); }
  body[data-page="contact"] .template-hero h1 { font-size: 2.55rem; }
  body[data-page="contact"] .contact-cards .template-card { grid-template-columns: 1fr; }
  body[data-page="contact"] .form-footer { align-items: flex-start; flex-direction: column; }
  body[data-page="contact"] #not_sure.template-cta::before { display: none; }
  body[data-page="contact"] #not_sure .cta-inner { padding: 24px; }
}