:root {
    --paper: #f7f7f4;
    --ink: #17181a;
    --muted: #555b64;
    --blue: #2563eb;
    --blue-dark: #1748bd;
    --blue-soft: #eaf1ff;
    --line: #dcdeda;
    --white: #fff;
    --success: #137a4a;
    --danger: #b42318;
    --radius: 16px;
    --shadow: 0 18px 45px rgba(23, 24, 26, .08);
    --container: min(1180px, calc(100% - 40px));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, Arial, sans-serif; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(37, 99, 235, .38); outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.035em; }
h1 { font-size: clamp(3rem, 6vw, 5.7rem); }
h2 { font-size: clamp(2rem, 4vw, 3.75rem); }
h3 { font-size: 1.2rem; }
.container { width: var(--container); margin-inline: auto; }
.narrow { max-width: 900px; }
.center { text-align: center; }
.section { padding: clamp(76px, 10vw, 132px) 0; }
.soft-section { background: #efefec; }
.lead { color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.32rem); line-height: 1.7; }
.eyebrow, .section-label, .tag { color: var(--blue); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { color: #8baeff; padding: 0 .22rem; }
.section-heading { max-width: 720px; margin-bottom: 55px; }
.section-heading > p:last-child { color: var(--muted); font-size: 1.12rem; }
.heading-row { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 35px; }
.heading-row > div { max-width: 720px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 15px; top: -100px; background: var(--ink); color: var(--white); padding: 10px 15px; }
.skip-link:focus { top: 15px; }

.button { display: inline-flex; min-height: 50px; padding: 0 23px; border: 1px solid var(--blue); border-radius: 10px; align-items: center; justify-content: center; background: var(--blue); color: var(--white); cursor: pointer; font-weight: 750; text-decoration: none; transition: background .25s, border-color .25s, transform .25s, box-shadow .25s; }
.button:hover { background: var(--blue-dark); border-color: var(--blue-dark); box-shadow: 0 8px 20px rgba(37,99,235,.2); transform: translateY(-2px); }
.button-secondary { background: transparent; border-color: #c6c8cc; color: var(--ink); }
.button-secondary:hover { background: var(--white); border-color: var(--ink); color: var(--ink); box-shadow: none; }
.button-small { min-height: 40px; padding: 0 16px; font-size: .87rem; }
.button-light { background: var(--white); border-color: var(--white); color: var(--ink); }
.button-light:hover { background: #eef3ff; color: var(--ink); border-color: #eef3ff; }
.button-ghost-light { background: transparent; border-color: rgba(255,255,255,.45); color: var(--white); }
.button-ghost-light:hover { background: rgba(255,255,255,.08); border-color: var(--white); }
.button-block { width: 100%; }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; }
.text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 750; text-decoration: none; }
.text-link span { color: var(--blue); transition: transform .2s; }
.text-link:hover span { transform: translateX(5px); }

.site-header { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid rgba(227,228,230,.8); background: rgba(247,247,245,.88); backdrop-filter: blur(14px); }
.header-inner { display: flex; min-height: 76px; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; width: auto; max-width: 126px; height: auto; }
.site-header .brand img { max-width: 96px; }
.site-footer .brand img { max-width: 116px; }
.app-sidebar .brand img { max-width: 116px; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); flex-wrap: nowrap; }
.site-nav > a { flex: 0 0 auto; white-space: nowrap; }
.site-nav > a:not(.button) { color: #3d4045; font-size: .9rem; font-weight: 650; text-decoration: none; }
.site-nav > a:not(.button):hover { color: var(--blue); }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; }
.nav-toggle > span:not(.sr-only) { display: block; width: 23px; height: 2px; margin: 6px auto; background: currentColor; transition: transform .25s; }

.hero { min-height: min(760px, calc(100vh - 76px)); display: flex; align-items: center; overflow: hidden; padding: clamp(44px, 6vh, 68px) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 70px); align-items: center; }
.home-hero h1 { max-width: 650px; margin: 18px 0 26px; font-size: clamp(2.85rem, 4vw, 4.25rem); }
.home-hero h1 em { color: var(--blue); font-style: normal; }
.home-hero .lead { max-width: 620px; margin-bottom: 30px; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; }
.hero-visual { position: relative; min-height: 430px; display: flex; align-items: center; }
.hero-visual::before { content: ''; position: absolute; inset: 20px -80px -25px 50px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.17), rgba(37,99,235,0) 66%); }
.hero-showcase { position: relative; display: block; width: 108%; max-width: 720px; height: auto; margin-left: -2%; border-radius: 19px; filter: drop-shadow(0 35px 40px rgba(23,24,26,.14)); }

.split-intro, .service-intro { display: grid; grid-template-columns: .42fr 1fr; gap: 70px; align-items: start; }
.split-intro h2 { margin-bottom: 28px; }
.benefits-section { padding-top: 10px; }
.benefit-grid, .principles-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
.principles-grid { grid-template-columns: repeat(3, 1fr); }
.benefit { min-height: 290px; padding: 28px 27px 35px 0; border-right: 1px solid var(--line); }
.benefit + .benefit { padding-left: 27px; }
.benefit:last-child { border-right: 0; }
.benefit > span { display: block; margin-bottom: 70px; color: var(--blue); font-size: .76rem; font-weight: 800; }
.benefit p { color: var(--muted); }

.services-preview { background: var(--white); }
.service-list { margin-bottom: 35px; border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 70px .85fr 1.15fr 40px; gap: 25px; align-items: center; min-height: 135px; border-bottom: 1px solid var(--line); }
.service-row h3 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.65rem); }
.service-row p { margin: 0; color: var(--muted); }
.service-row > a { display: grid; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; place-items: center; text-decoration: none; transition: background .2s, color .2s; }
.service-row:hover > a { background: var(--blue); color: var(--white); }

.dark-section { background: var(--ink); color: var(--white); }
.dark-section .section-label { color: #8db1ff; }
.statement-grid { display: grid; grid-template-columns: .4fr 1fr; gap: 60px; }
.statement-grid h2 { max-width: 820px; }
.statement-grid p:not(.section-label) { max-width: 800px; color: var(--muted); font-size: 1.13rem; }
.dark-section .statement-grid p:not(.section-label) { color: #b8bbc0; }

.process-grid { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.process-grid li { min-height: 250px; padding: 30px 35px 35px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-grid li:nth-child(3n+2), .process-grid li:nth-child(3n+3) { padding-left: 35px; }
.process-grid li:nth-child(3n) { border-right: 0; }
.process-grid span { display: block; margin-bottom: 55px; color: var(--blue); font-weight: 800; }
.process-grid p { color: var(--muted); }

.work-section { background: var(--white); }
.work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.work-card { border-bottom: 1px solid var(--line); }
.work-card > div:last-child { display: flex; align-items: center; justify-content: space-between; padding: 24px 2px; }
.work-card h3 { margin: 0; }
.work-card .tag { margin: 0; }
.work-art { position: relative; overflow: hidden; aspect-ratio: 1.25; border-radius: 13px; background: #dce8ff; }
.work-art::after { content: ''; position: absolute; width: 55%; height: 110%; right: -8%; top: -35%; border-radius: 50%; background: rgba(37,99,235,.18); }
.work-art-2 { background: #ede7dc; }
.work-art-2::after { background: rgba(112,77,38,.13); }
.work-art-3 { background: #e4e7e8; }
.work-art-3::after { background: rgba(23,24,26,.1); }
.work-window { position: absolute; z-index: 2; inset: 15% 12%; border: 7px solid white; border-radius: 9px; background: linear-gradient(135deg, var(--white) 0 42%, transparent 42%), linear-gradient(145deg, #adc6fb, #f7f9ff); box-shadow: 0 12px 30px rgba(23,24,26,.14); transform: rotate(-2deg); }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.capability-block { position: relative; min-height: 320px; padding: 30px; overflow: hidden; border-right: 1px solid var(--line); background: linear-gradient(145deg, var(--white), #f5f7fb); }
.capability-block:last-child { border-right: 0; }
.capability-block::after { content: ''; position: absolute; width: 180px; height: 180px; right: -85px; bottom: -95px; border-radius: 50%; background: rgba(37,99,235,.08); }
.capability-block > div { position: relative; z-index: 1; margin-top: 95px; }
.capability-block h3 { margin-bottom: 25px; font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: .03em; }
.capability-block ul { margin: 0; padding: 0; list-style: none; }
.capability-block li { padding: 9px 0; border-top: 1px solid var(--line); color: var(--muted); }
.value-section { background: #eef1f8; }
.value-grid { display: grid; grid-template-columns: .32fr 1fr; align-items: center; gap: 50px; }
.value-mark { display: grid; width: 200px; height: 200px; border-radius: 50%; place-items: center; background: var(--blue); color: var(--white); font-size: 5rem; font-weight: 800; box-shadow: 0 25px 50px rgba(37,99,235,.2); }
.value-grid p:not(.section-label) { max-width: 780px; color: var(--muted); font-size: 1.1rem; }
.final-cta { padding-top: 25px; }
.cta-panel { display: flex; min-height: 410px; padding: clamp(45px, 7vw, 82px); border-radius: 24px; align-items: flex-end; justify-content: space-between; gap: 50px; background: var(--blue); color: var(--white); }
.cta-panel h2 { max-width: 770px; }
.cta-panel p:not(.section-label) { max-width: 720px; color: #dce7ff; }
.cta-panel .section-label { color: #bed2ff; }

.page-hero { padding: clamp(100px, 13vw, 180px) 0 100px; border-bottom: 1px solid var(--line); }
.page-hero h1 { margin: 22px 0 30px; }
.page-hero.compact { min-height: 570px; display: flex; align-items: center; }
.legal-hero { padding-bottom: clamp(55px, 8vw, 90px); }
.legal-hero .lead { margin-bottom: 0; }
.legal-section { padding-top: clamp(55px, 8vw, 90px); }
.legal-content { max-width: 780px; }
.legal-content > p, .legal-content li, .legal-content address { color: var(--muted); line-height: 1.75; }
.legal-content > p, .legal-content address { margin-bottom: 20px; }
.legal-content h2 { margin: clamp(48px, 7vw, 72px) 0 20px; font-size: clamp(1.65rem, 3vw, 2.2rem); }
.legal-content h3 { margin: 34px 0 14px; font-size: clamp(1.15rem, 2vw, 1.35rem); }
.legal-content ul { margin: 0 0 26px; padding-left: 1.4rem; }
.legal-content li { margin-bottom: 7px; padding-left: .25rem; }
.legal-content address { padding: 22px 24px; border-left: 3px solid var(--blue); background: var(--blue-soft); font-style: normal; overflow-wrap: anywhere; }
.legal-content a { color: var(--blue-dark); text-underline-offset: 3px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 60px; }
.price-card { padding: 35px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.price-card .price, .quoted-price { margin: 30px 0 22px; color: var(--ink); font-size: 2rem; font-weight: 800; letter-spacing: -.04em; }
.price-card > p:last-child { color: var(--muted); }
.info-note { margin-top: 25px; padding: 22px 25px; border-left: 3px solid var(--blue); background: var(--blue-soft); color: #39404d; font-size: .93rem; }
.third-party-notice { padding-inline: 0; }
.third-party-notice > .container { margin-bottom: 0; }
.app-service-grid, .seo-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: start; }
.app-service-grid p:not(.section-label) { color: #c3c5ca; }
.app-service-grid .quoted-price { color: var(--white); }
.feature-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid #3b3d41; }
.feature-list li { padding: 18px 10px; border-bottom: 1px solid #3b3d41; color: #d8dade; }
.feature-list.light { border-color: var(--line); }
.feature-list.light li { color: var(--ink); border-color: var(--line); }
.two-service-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.two-service-columns article > p:not(.section-label,.quoted-price) { color: var(--muted); }
.tick-list { padding: 0; list-style: none; }
.tick-list li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--line); }
.tick-list li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
.repair-layout { display: grid; grid-template-columns: 1fr .8fr; gap: 80px; margin-top: 55px; }
.repair-prices { border-top: 1px solid var(--line); }
.repair-prices div { display: flex; padding: 21px 0; border-bottom: 1px solid var(--line); justify-content: space-between; gap: 20px; }
.repair-prices strong { color: var(--blue); }
.two-col { display: grid; grid-template-columns: repeat(2,1fr); column-gap: 25px; }
.project-list { display: grid; gap: 80px; }
.project-row { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 75px; align-items: center; }
.future-url { color: var(--muted); font-size: .85rem; }
.stoneford-art { display: grid; padding: clamp(42px, 7vw, 82px); place-items: center; background: radial-gradient(circle at 50% 38%, #394048, #17191c 70%); }
.stoneford-art::after { display: none; }
.stoneford-art img { position: relative; z-index: 1; display: block; width: min(82%, 430px); max-height: 430px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.3)); }
.concept-logo-art { display: grid; min-height: 390px; padding: clamp(44px, 7vw, 84px); place-items: center; }
.concept-logo-art::after { display: none; }
.concept-logo-art img { position: relative; z-index: 1; display: block; width: min(100%, 420px); height: 100%; max-height: 310px; object-fit: contain; }
.alder-room-art { background: linear-gradient(145deg, #eee4d4, #faf5ed); }
.sablebridge-art { background: linear-gradient(145deg, #dfe7ec, #f4f7f8); }
.project-status { display: inline-flex; margin: 0 0 18px; padding: 7px 11px; border: 1px solid #c7cbd0; border-radius: 999px; align-items: center; color: #4f555c; background: #f7f8f9; font-size: .76rem; font-weight: 800; letter-spacing: .07em; line-height: 1; text-transform: uppercase; }
.project-row-featured { align-items: start; }
.project-row-featured .project-content { padding-top: 4px; }
.project-row-featured h2 { margin-bottom: 20px; }
.project-service { margin: 24px 0 14px; }
.project-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 24px; margin: 0 0 24px; padding: 0; color: var(--muted); font-size: .9rem; list-style: none; }
.project-scope li { position: relative; padding-left: 17px; }
.project-scope li::before { content: ''; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.project-summary { color: var(--muted); font-size: .94rem; }
.project-summary p { margin-bottom: 12px; }
.concept-disclosure { margin: 22px 0 16px; color: var(--ink); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.live-concept-note { display: inline-block; margin-left: 12px; color: var(--muted); font-size: .8rem; }
.founder-section { background: var(--white); }
.founder-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; }
.founder-grid p:not(.section-label) { color: var(--muted); font-size: 1.08rem; }
.founder-visual { display: grid; min-height: 570px; border-radius: 18px; place-items: center; background: linear-gradient(150deg,#dce8ff,#f5f7fa); overflow: hidden; }
.founder-visual img { display: block; width: 100%; height: 570px; object-fit: cover; object-position: center 38%; }
.founder-socials { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.founder-socials a { display: inline-flex; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; align-items: center; gap: 7px; color: var(--ink); font-size: .84rem; font-weight: 700; text-decoration: none; transition: border-color .2s, color .2s, background .2s; }
.founder-socials a:hover, .founder-socials a:focus-visible { border-color: var(--blue); background: #f2f6ff; color: var(--blue); }
.contact-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px; align-items: start; }
.contact-aside { position: sticky; top: 120px; }
.contact-aside ol { padding: 0; margin: 45px 0; list-style: none; }
.contact-aside li { display: grid; grid-template-columns: 45px 1fr; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-aside li span { color: var(--blue); font-size: .75rem; font-weight: 800; }
.contact-aside > p:last-child { color: var(--muted); font-size: .9rem; }
.contact-form { padding: clamp(30px,5vw,55px); border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field-full { grid-column: 1 / -1; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 7px; font-size: .86rem; font-weight: 750; }
.field label span, .field small { color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #cfd1d5; border-radius: 9px; background: var(--white); color: var(--ink); padding: 12px 13px; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.field input:disabled { background: #f0f1f2; color: var(--muted); }
.field-error { margin: 6px 0 0; color: var(--danger); font-size: .82rem; }
.field .service-reassurance { display: block; margin-top: 7px; color: var(--blue-dark); line-height: 1.45; }
.field .service-reassurance[hidden] { display: none; }
.honeypot { position: absolute; left: -9999px; }
.success-mark { display: grid; width: 64px; height: 64px; margin: 0 auto 25px; border-radius: 50%; place-items: center; background: #dff6e9; color: var(--success); font-size: 1.7rem; font-weight: 800; }
.alert { margin: 0 0 22px; padding: 13px 15px; border-radius: 8px; font-size: .9rem; }
.alert-error { border: 1px solid #f3c5c1; background: #fff0ef; color: #8c1d14; }
.alert-success { border: 1px solid #b5dec8; background: #eaf8f0; color: #0f623b; }

.site-footer { padding: 90px 0 25px; background: var(--ink); color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.5fr .7fr .4fr; gap: 70px; }
.footer-brand p { max-width: 430px; margin-top: 25px; color: #aeb1b6; }
.site-footer nav { display: flex; flex-direction: column; gap: 10px; }
.site-footer nav h2 { margin-bottom: 10px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.site-footer nav a { color: #bfc1c5; font-size: .9rem; text-decoration: none; }
.site-footer nav a:hover { color: var(--white); }
.footer-bottom { margin-top: 70px; padding-top: 25px; border-top: 1px solid #333539; color: #92959a; font-size: .8rem; }

.auth-body { min-height: 100vh; background: var(--white); }
.auth-header { display: flex; width: min(1200px, calc(100% - 40px)); min-height: 75px; margin: auto; align-items: center; justify-content: space-between; }
.auth-header > a:last-child { color: var(--muted); font-size: .86rem; }
.auth-main { display: grid; grid-template-columns: minmax(400px,600px) minmax(400px,1fr); min-height: calc(100vh - 75px); }
.auth-card { align-self: center; width: min(460px, calc(100% - 40px)); margin: 60px auto; }
.auth-card h1 { margin: 14px 0 22px; font-size: clamp(2.5rem,5vw,4rem); }
.auth-card > p:not(.eyebrow,.auth-help) { margin-bottom: 30px; color: var(--muted); }
.auth-help { text-align: center; color: var(--muted); font-size: .88rem; }
.form-options { display: flex; margin: -2px 0 24px; justify-content: space-between; font-size: .86rem; }
.check { display: flex; gap: 8px; align-items: center; margin-bottom: 20px; font-size: .88rem; }
.auth-art { position: relative; overflow: hidden; display: grid; margin: 14px; border-radius: 20px; place-items: center; background: linear-gradient(145deg, #f5f6f8, #e8eef9); }
.auth-orbit { position: absolute; border: 1px solid rgba(37,99,235,.28); border-radius: 50%; pointer-events: none; }
.auth-orbit-one { width: 760px; height: 760px; right: -310px; top: -275px; }
.auth-orbit-two { width: 590px; height: 590px; right: -180px; top: -105px; }
.auth-orbit-three { width: 430px; height: 430px; right: -85px; top: 65px; }
.portal-preview { position: relative; z-index: 1; width: min(83%, 710px); overflow: hidden; border: 1px solid rgba(23,24,26,.1); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 28px 70px rgba(23,24,26,.14); }
.portal-preview-header { display: flex; min-height: 68px; padding: 14px 20px; border-bottom: 1px solid var(--line); align-items: center; justify-content: space-between; gap: 16px; }
.portal-preview-header > div { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portal-preview-header img { width: 27px; height: 27px; }
.portal-preview-status { padding: 5px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: .65rem; font-weight: 800; white-space: nowrap; }
.portal-preview-project { padding: clamp(22px,3vw,34px); background: var(--ink); color: var(--white); }
.portal-preview-project > p { margin-bottom: 16px; color: #9db9f7; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.portal-preview-project > div { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.portal-preview-project strong { font-size: clamp(1.35rem,2.1vw,2rem); letter-spacing: -.035em; }
.portal-preview-project span { color: #c3c8d2; font-size: .75rem; white-space: nowrap; }
.portal-preview-progress { height: 7px; margin-top: 22px; overflow: hidden; border-radius: 10px; background: #35383e; }
.portal-preview-progress i { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #75a6ff); }
.portal-preview-details { display: grid; grid-template-columns: 1.4fr .8fr; gap: 0; }
.portal-preview-details > div { display: grid; min-height: 105px; padding: 22px; align-content: center; gap: 7px; border-bottom: 1px solid var(--line); }
.portal-preview-details > div + div { border-left: 1px solid var(--line); }
.portal-preview-details span, .portal-preview-metrics span { color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.portal-preview-details strong { font-size: .86rem; line-height: 1.4; }
.portal-preview-metrics { display: grid; grid-template-columns: 1fr 1fr; }
.portal-preview-metrics > div { display: grid; padding: 18px 22px 20px; gap: 5px; }
.portal-preview-metrics > div + div { border-left: 1px solid var(--line); }
.portal-preview-metrics strong { font-size: 1.3rem; }
.portal-preview-metrics small { color: var(--muted); font-size: .7rem; font-weight: 600; }

/* Authenticated application */
.app-body { min-height: 100vh; background: #f1f2f3; }
.app-sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; display: flex; width: 245px; padding: 34px 24px 25px; flex-direction: column; background: var(--ink); color: var(--white); }
.sidebar-label { margin: 35px 0 15px; color: #72767c; font-size: .68rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.app-sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.app-sidebar nav a, .sidebar-logout { padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; color: #c2c4c8; text-align: left; text-decoration: none; font-size: .9rem; cursor: pointer; }
.app-sidebar nav a:hover, .sidebar-logout:hover { background: #26282c; color: var(--white); }
.app-sidebar .sidebar-secondary-nav { margin-top: auto; padding-top: 18px; border-top: 1px solid #333539; }
.app-sidebar form { margin-top: 4px; }
.sidebar-logout { width: 100%; }
.app-main { min-height: 100vh; margin-left: 245px; padding: 35px clamp(24px,4vw,60px) 70px; }
.app-topbar { display: flex; min-height: 90px; margin-bottom: 25px; align-items: center; justify-content: space-between; gap: 30px; }
.app-topbar h1 { margin: 4px 0 0; font-size: clamp(2rem,3vw,2.8rem); }
.app-topbar .eyebrow { margin: 0; }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip > span { display: grid; width: 40px; height: 40px; border-radius: 50%; place-items: center; background: var(--blue); color: var(--white); font-size: .75rem; font-weight: 800; }
.user-chip div { display: grid; }
.user-chip small { color: var(--muted); }
.app-mobile-header { display: none; }
.welcome-screen { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: var(--ink); color: var(--white); animation: welcomeOut .5s 1.35s forwards; }
.welcome-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .48; }
.welcome-screen > div { position: relative; padding: 30px; text-align: center; animation: welcomeIn .55s ease-out; }
.welcome-screen p { margin: 0 0 8px; font-size: clamp(2.2rem,6vw,4.6rem); font-weight: 800; letter-spacing: -.05em; }
.welcome-screen strong { color: #97b7ff; font-size: 1rem; }
@keyframes welcomeIn { from { opacity: 0; transform: translateY(18px); } }
@keyframes welcomeOut { to { opacity: 0; visibility: hidden; } }

.dashboard-hero { display: flex; min-height: 245px; margin-bottom: 18px; padding: clamp(28px,4vw,48px); border-radius: var(--radius); align-items: center; justify-content: space-between; gap: 30px; background: var(--ink); color: var(--white); }
.dashboard-hero h2 { margin: 12px 0 7px; font-size: clamp(2rem,4vw,3.2rem); }
.dashboard-hero p:last-child { color: #aeb1b6; }
.dashboard-hero.compact-card { min-height: 190px; }
.progress-ring { --progress: 0; display: grid; width: 138px; height: 138px; border-radius: 50%; flex: 0 0 auto; place-items: center; background: conic-gradient(var(--blue) calc(var(--progress) * 1%), #36383d 0); }
.progress-ring::before { content: ''; position: absolute; width: 108px; height: 108px; border-radius: 50%; background: var(--ink); }
.progress-ring span { z-index: 1; font-size: 1.7rem; font-weight: 800; }
.big-progress { display: block; font-size: 3rem; }
.dashboard-hero > div:last-child > span { color: #aeb1b6; font-size: .78rem; }
.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 18px; }
.metric-grid article, .metric-grid > a { display: grid; min-height: 125px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); text-decoration: none; }
.metric-grid span { color: var(--muted); font-size: .78rem; }
.metric-grid strong { align-self: end; font-size: 1.2rem; }
.dashboard-grid, .content-grid { display: grid; grid-template-columns: 1fr .46fr; gap: 18px; margin-bottom: 18px; }
.project-preview { min-height: 260px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.project-preview img { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
.project-preview > div { display: grid; min-height: 260px; grid-template-columns: repeat(3,1fr); gap: 15px; padding: 50px; align-items: end; background: linear-gradient(145deg,#e7efff,#f9fafb); }
.project-preview > div span { display: block; height: 65%; border-radius: 8px 8px 0 0; background: rgba(255,255,255,.82); box-shadow: 0 10px 30px rgba(23,24,26,.06); }
.project-preview > div span:nth-child(2) { height: 90%; }
.dashboard-grid { grid-template-columns: 1fr .55fr .55fr; }
.panel { padding: clamp(22px,3vw,34px); border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.panel h2 { font-size: 1.35rem; }
.panel h3 { margin-top: 28px; }
.panel-wide { min-width: 0; }
.panel-heading { display: flex; margin-bottom: 25px; justify-content: space-between; gap: 25px; align-items: start; }
.panel-heading p { margin-bottom: 0; color: var(--muted); }
.panel small { color: var(--muted); }
.stage-track { display: grid; grid-template-columns: repeat(6,1fr); margin-bottom: 18px; border-radius: 10px; background: var(--white); overflow: hidden; }
.stage-track span { padding: 17px 8px; border-right: 1px solid var(--line); color: var(--muted); text-align: center; font-size: .72rem; }
.stage-track span.active { background: var(--blue); color: var(--white); font-weight: 800; }
.timeline-item { position: relative; padding: 0 0 32px 28px; border-left: 2px solid var(--line); }
.timeline-item::before { content: ''; position: absolute; left: -7px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); }
.timeline-item time { color: var(--muted); font-size: .74rem; }
.timeline-item h3 { margin: 6px 0 10px; }
.update-image { display: block; width: min(100%,720px); margin: 18px 0; border: 1px solid var(--line); border-radius: 10px; }
.detail-list { margin: 0; }
.detail-list > div { padding: 15px 0; border-bottom: 1px solid var(--line); }
.detail-list dt { color: var(--muted); font-size: .75rem; }
.detail-list dd { margin: 3px 0 0; font-weight: 700; }
.detail-list.horizontal { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.file-link { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
.message-layout { display: grid; grid-template-columns: 300px 1fr; min-height: 640px; gap: 18px; }
.conversation-list { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.conversation-list h2 { padding: 5px 8px 18px; font-size: 1.1rem; }
.conversation-list a { display: grid; padding: 14px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.conversation-list a.active { background: var(--blue-soft); }
.conversation-list span { color: var(--muted); font-size: .75rem; }
.message-thread { display: flex; min-width: 0; flex-direction: column; }
.messages { flex: 1; }
.message { width: min(650px,85%); margin: 0 auto 18px 0; padding: 15px 18px; border-radius: 5px 13px 13px 13px; background: #f1f2f4; }
.message-own { margin-left: auto; margin-right: 0; border-radius: 13px 5px 13px 13px; background: var(--blue-soft); }
.message > div { display: flex; justify-content: space-between; gap: 15px; }
.message time { color: var(--muted); font-size: .7rem; }
.message p { margin: 7px 0 0; }
.reply-form { padding-top: 20px; border-top: 1px solid var(--line); }
.reply-form label { display: block; margin-bottom: 7px; font-weight: 700; }
.reply-form textarea { width: 100%; margin-bottom: 12px; padding: 12px; border: 1px solid #cfd1d5; border-radius: 8px; }
.request-list article { display: flex; padding: 20px 0; border-bottom: 1px solid var(--line); justify-content: space-between; gap: 30px; }
.request-list article > div:last-child { display: grid; min-width: 180px; align-content: start; text-align: right; }
.request-list small { color: var(--muted); }
.request-reply { margin-top: 16px; padding: 14px; border-left: 3px solid var(--blue); background: #f4f7fc; }
.request-reply p { margin: 4px 0; }
.request-reply small { color: var(--muted); }
.request-list details { margin-top: 14px; }
.request-list summary { color: var(--blue); cursor: pointer; font-size: .85rem; font-weight: 700; }
.request-reply-form { display: grid; gap: 10px; margin-top: 12px; }
.request-reply-form textarea { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.admin-request-list > article { padding: 24px 0; border-bottom: 1px solid var(--line); }
.admin-request-list details { margin-top: 18px; }
.admin-request-list summary { color: var(--blue); cursor: pointer; font-weight: 700; }
.admin-request-list details form { margin-top: 18px; padding: 20px; border-radius: 9px; background: #f5f6f7; }
.file-table > div { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.file-table div > div { display: grid; }
.file-type { display: grid; width: 42px; height: 42px; border-radius: 7px; place-items: center; background: var(--blue-soft); color: var(--blue); font-size: .65rem; font-weight: 800; }
.danger-link { border: 0; background: transparent; color: var(--danger); cursor: pointer; }
.account-panel { max-width: 950px; }
.account-panel hr, .panel hr { margin: 30px 0; border: 0; border-top: 1px solid var(--line); }
.admin-metrics { grid-template-columns: repeat(4,1fr); }
.admin-metrics > a strong { font-size: 2.1rem; }
.admin-metrics > a small { color: var(--blue); }
.milestone { display: flex; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); justify-content: space-between; text-decoration: none; }
.milestone div { display: grid; }
.milestone span { color: var(--muted); font-size: .75rem; }
.data-table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: .86rem; }
th { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
td { padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
td small { display: block; }
.status { display: inline-block; padding: 4px 8px; border-radius: 5px; background: #edeef0; color: #51545a; font-size: .68rem; font-weight: 750; text-transform: capitalize; }
.status-new { background: var(--blue-soft); color: var(--blue-dark); }
.status-won { background: #e4f5eb; color: var(--success); }
.status-lost { background: #f3e8e7; color: var(--danger); }
.toolbar { display: flex; margin-bottom: 18px; justify-content: space-between; }
.filter-nav { display: flex; gap: 5px; flex-wrap: wrap; }
.filter-nav a, .admin-action-row a { padding: 8px 13px; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: .8rem; }
.filter-nav a.active { background: var(--ink); color: var(--white); }
.note { padding: 17px 0; border-bottom: 1px solid var(--line); }
.note p { margin-bottom: 5px; }
.long-copy { white-space: normal; }
.admin-action-row { display: flex; gap: 7px; margin: 0 0 18px; flex-wrap: wrap; }
.admin-action-row a { border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.inline-form { max-width: 760px; }
.table-form { display: flex; gap: 7px; }
.table-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.table-form select { min-width: 140px; border: 1px solid var(--line); border-radius: 6px; }
.settings-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.empty-state { padding: 50px 30px; text-align: center; }
.empty-state img { display: block; width: min(320px, 100%); height: auto; margin: 0 auto 22px; }
.empty-inline { padding: 25px; text-align: center; color: var(--muted); }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
    .site-nav { gap: 12px; }
    .site-nav > a:not(.button) { font-size: .82rem; }
    .portal-preview { width: 92%; }
    .portal-preview-details { grid-template-columns: 1fr; }
    .portal-preview-details > div { min-height: auto; padding: 16px 18px; }
    .portal-preview-details > div + div { border-left: 0; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero { min-height: auto; padding: 64px 0 82px; }
    .hero-copy { max-width: 840px; }
    .hero-visual { width: min(760px,100%); min-height: auto; margin: 0 auto; }
    .hero-showcase { width: 100%; max-width: 760px; margin-left: 0; }
    .benefit-grid { grid-template-columns: repeat(2,1fr); }
    .benefit:nth-child(2) { border-right: 0; }
    .benefit:nth-child(3), .benefit:nth-child(4) { border-top: 1px solid var(--line); }
    .dashboard-grid { grid-template-columns: 1fr 1fr; }
    .dashboard-grid .panel-wide { grid-column: 1 / -1; }
    .admin-metrics { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 820px) {
    :root { --container: min(100% - 30px, 720px); }
    .site-header { position: relative; }
    .nav-toggle { display: block; cursor: pointer; }
    .site-nav { position: absolute; inset: 76px 15px auto; display: none; padding: 18px; border: 1px solid var(--line); border-radius: 12px; align-items: stretch; flex-direction: column; background: var(--white); box-shadow: var(--shadow); }
    .site-nav.is-open { display: flex; }
    .site-nav > a { padding: 7px; }
    .site-nav .button { margin-top: 5px; }
    .split-intro, .service-intro, .statement-grid, .app-service-grid, .seo-grid, .founder-grid, .contact-layout { grid-template-columns: 1fr; gap: 35px; }
    .contact-aside { position: static; }
    .work-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }
    .capability-grid { grid-template-columns: 1fr; }
    .capability-block { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .capability-block:last-child { border-bottom: 0; }
    .capability-block > div { margin-top: 55px; }
    .process-grid { grid-template-columns: repeat(2,1fr); }
    .process-grid li:nth-child(3n+2), .process-grid li:nth-child(3n+3) { padding-left: 0; }
    .process-grid li:nth-child(even) { padding-left: 30px; border-right: 0; }
    .process-grid li:nth-child(odd) { border-right: 1px solid var(--line); }
    .two-service-columns, .repair-layout { grid-template-columns: 1fr; gap: 55px; }
    .project-row { grid-template-columns: 1fr; gap: 30px; }
    .concept-logo-art { min-height: 330px; }
    .value-grid { grid-template-columns: 1fr; }
    .value-mark { width: 130px; height: 130px; font-size: 3.5rem; }
    .cta-panel { align-items: start; flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .auth-main { grid-template-columns: 1fr; }
    .auth-art { display: none; }
    .app-sidebar { transform: translateX(-100%); transition: transform .25s; }
    .app-sidebar.is-open { transform: none; }
    .app-mobile-header { position: sticky; z-index: 35; top: 0; display: flex; min-height: 67px; padding: 0 20px; border-bottom: 1px solid var(--line); align-items: center; justify-content: space-between; background: var(--white); }
    .app-main { margin-left: 0; padding-top: 20px; }
    .content-grid, .message-layout { grid-template-columns: 1fr; }
    .conversation-list { max-height: 260px; overflow-y: auto; }
    .stage-track { overflow-x: auto; grid-template-columns: repeat(6,130px); }
    .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
    h1 { font-size: 2.7rem; }
    .hero { min-height: auto; padding: 65px 0 80px; }
    .home-hero h1 { font-size: 2.75rem; }
    .hero-visual { min-height: auto; }
    .benefit-grid, .principles-grid, .work-grid, .pricing-grid, .process-grid, .form-grid, .metric-grid, .admin-metrics { grid-template-columns: 1fr; }
    .benefit, .benefit + .benefit { min-height: auto; padding: 26px 0; border-right: 0; border-top: 1px solid var(--line); }
    .benefit > span { margin-bottom: 28px; }
    .service-row { grid-template-columns: 40px 1fr 35px; padding: 24px 0; }
    .service-row p { grid-column: 2 / -1; }
    .service-row a { grid-row: 1; grid-column: 3; }
    .project-scope { grid-template-columns: 1fr; }
    .concept-logo-art { min-height: 270px; padding: 42px; }
    .live-concept-note { display: block; margin: 10px 0 0; }
    .process-grid li, .process-grid li:nth-child(even), .process-grid li:nth-child(odd) { min-height: auto; padding: 28px 0; border-right: 0; }
    .process-grid span { margin-bottom: 30px; }
    .heading-row { align-items: start; flex-direction: column; }
    .feature-list, .two-col { grid-template-columns: 1fr; }
    .founder-visual { min-height: 420px; }
    .founder-visual img { height: 420px; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand { grid-column: auto; }
    .app-topbar { align-items: start; }
    .user-chip div { display: none; }
    .dashboard-hero { align-items: start; flex-direction: column; }
    .dashboard-hero .progress-ring { width: 110px; height: 110px; }
    .progress-ring::before { width: 84px; height: 84px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-grid .panel-wide { grid-column: auto; }
    .detail-list.horizontal { grid-template-columns: 1fr; }
    .request-list article { flex-direction: column; }
    .request-list article > div:last-child { text-align: left; }
    .file-table > div { grid-template-columns: 45px 1fr; }
    .file-table > div > a, .file-table > div > form { grid-column: 2; }
    .message { width: 95%; }
    .table-form { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
    .welcome-screen { display: none; }
}

/* Public commercial pages: shorter reading widths and calmer spacing. */
.public-body .page-hero { padding: clamp(64px, 8vw, 104px) 0 64px; }
.public-body .page-hero h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.public-body .section { padding-block: clamp(56px, 7vw, 88px); }
.public-body .section-heading { margin-bottom: 32px; }
.public-body .pricing-grid { margin-top: 30px; }
.public-body .cta-panel { min-height: 0; align-items: center; padding: clamp(30px, 5vw, 60px); gap: 32px; }
.public-body .cta-panel .button { flex-shrink: 0; }
.public-body .final-cta { padding-top: 40px; }
.public-body [id] { scroll-margin-top: 100px; }
.home-hero .hero-price { margin: 22px 0 0; color: var(--muted); font-size: .9rem; }
.offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.offer-card { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 38px); border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.offer-card h3 { font-size: 1.5rem; line-height: 1.2; }
.offer-card h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.offer-card p { color: var(--muted); max-width: 58ch; }
.offer-card .text-link { margin-top: auto; align-self: start; }
.offer-card .quoted-price { color: var(--ink); margin-block: 12px; }
.secondary-capability { margin: 30px 0 0; color: var(--muted); }
.home-founder .founder-grid { grid-template-columns: .65fr 1fr; gap: clamp(32px, 6vw, 80px); }
.home-founder .founder-visual { min-height: 0; }
.home-founder .founder-visual img { height: 440px; }
.price-card .price { margin-bottom: 0; }
.price-basis { color: var(--muted); font-size: .85rem; margin-bottom: 20px; }
@media (max-width: 760px) {
    .offer-grid, .home-founder .founder-grid { grid-template-columns: 1fr; }
    .home-founder .founder-visual { max-width: 420px; }
    .home-hero h1 { font-size: clamp(2.5rem, 8vw, 3.5rem); }
}

/* Visual rhythm for the simplified public pages. */
.public-body { background: var(--paper); }
.public-body main {
    overflow: hidden;
}
.public-body .home-hero {
    position: relative;
    background:
        radial-gradient(circle at 80% 18%, rgba(37,99,235,.1), transparent 28%),
        linear-gradient(135deg, #fbfbf9, #f1f2f0);
}
.public-body .home-hero::after {
    content: '';
    position: absolute;
    right: -170px;
    bottom: -250px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(37, 99, 235, .13);
    border-radius: 50%;
    pointer-events: none;
}
.public-body .home-hero .hero-grid {
    position: relative;
    z-index: 1;
}
.public-body .home-hero .hero-showcase {
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 32px 80px rgba(31, 61, 126, .18);
}
.public-body .services-preview {
    background: #17213a;
    color: var(--white);
}
.public-body .services-preview .section-label,
.public-body .services-preview .text-link span {
    color: #91b3ff;
}
.public-body .services-preview .offer-card {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.065);
    box-shadow: none;
}
.public-body .services-preview .offer-card h3,
.public-body .services-preview .offer-card .text-link {
    color: var(--white);
}
.public-body .services-preview .offer-card p,
.public-body .services-preview .secondary-capability,
.public-body .services-preview .section-heading > p:last-child {
    color: #bfc9dc;
}
.public-body .services-preview .secondary-capability a {
    color: #a9c3ff;
}
.public-body .home-founder { background: #efefec; }
.public-body .home-founder .founder-visual {
    border: 9px solid var(--white);
    box-shadow: 0 24px 65px rgba(31, 61, 126, .17);
    transform: rotate(-1deg);
}
.public-body .soft-section { background: #efefec; }
.public-body .offer-card,
.public-body .price-card {
    border-color: #d5dce8;
    box-shadow: 0 16px 40px rgba(31, 61, 126, .07);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.public-body .offer-card:hover,
.public-body .price-card:hover {
    border-color: #b9c9e6;
    box-shadow: 0 22px 48px rgba(31, 61, 126, .12);
    transform: translateY(-4px);
}
.public-body .page-hero {
    border-bottom: 1px solid var(--line);
    background: #f3f3f0;
    color: var(--ink);
}
.public-body .page-hero .lead { color: var(--muted); }
.public-body .final-cta { background: var(--paper); }
.public-body .cta-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1748bd, #2563eb 58%, #477bef);
    box-shadow: 0 28px 65px rgba(37, 99, 235, .23);
}
.public-body .cta-panel::after {
    content: '';
    position: absolute;
    right: -80px;
    top: -140px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(255,255,255,.035), 0 0 0 96px rgba(255,255,255,.025);
    pointer-events: none;
}
.public-body .cta-panel > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 760px) {
    .public-body .home-founder .founder-visual { transform: none; }
    .public-body .services-preview .offer-card { padding: 27px; }
}

/* Two-route service structure and site-wide blue colour system. */
.blue-soft-section,
.route-choice-section {
    background: #efefec;
}
.navy-section {
    background:
        radial-gradient(circle at 90% 15%, rgba(78,125,238,.17), transparent 26%),
        #17213a;
    color: var(--white);
}
.navy-section .section-label,
.navy-section .tag { color: #91b3ff; }
.navy-section p:not(.section-label,.tag,.quoted-price) { color: #c3ccdc; }
.navy-section .quoted-price { color: var(--white); }
.navy-section .feature-list { border-color: rgba(255,255,255,.18); }
.navy-section .feature-list li { border-color: rgba(255,255,255,.18); color: #dce3ef; }
.blue-soft-section .feature-list { border-color: rgba(44,65,103,.18); }
.blue-soft-section .feature-list li { border-color: rgba(44,65,103,.18); color: var(--ink); }
.route-grid,
.route-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.route-card {
    position: relative;
    display: flex;
    min-height: 490px;
    padding: clamp(30px, 4vw, 52px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    overflow: hidden;
    flex-direction: column;
    background: #26334f;
}
.route-card-primary {
    background: linear-gradient(145deg, #2563eb, #1748bd);
}
.route-card-secondary {
    background: linear-gradient(145deg, #2b3752, #202b44);
}
.route-card::after {
    content: '';
    position: absolute;
    right: -95px;
    bottom: -130px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(255,255,255,.025);
    pointer-events: none;
}
.route-card > * { position: relative; z-index: 1; }
.route-card .tag { color: #bed2ff; }
.route-card h3 { max-width: 15ch; margin: 8px 0 20px; color: var(--white); font-size: clamp(1.8rem, 3vw, 2.65rem); }
.route-card p:not(.tag) { max-width: 55ch; color: #d7e0f1; }
.route-card ul { margin: 8px 0 28px; padding: 0; color: #edf2fb; list-style: none; }
.route-card li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.route-card .button { align-self: flex-start; margin-top: auto; }
.support-strip {
    display: flex;
    margin-top: 24px;
    padding: 24px 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: rgba(255,255,255,.055);
}
.support-strip p { margin: 0; color: #c3ccdc; }
.support-strip strong,
.support-strip .text-link { color: var(--white); }
.choice-panel {
    padding: clamp(28px, 4vw, 46px);
    border: 1px solid #d4d6d2;
    border-radius: 18px;
    background: #f8f8f6;
}
.choice-panel-active {
    border-color: #aeb8c8;
    background: var(--white);
    box-shadow: 0 20px 50px rgba(31,61,126,.1);
}
.choice-panel h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); }
.choice-panel > p:not(.tag) { color: var(--muted); }
.choice-panel .choice-fit { padding-top: 18px; border-top: 1px solid #d6deeb; font-size: .92rem; }
.support-section { background: #f0f0ed; }
.systems-hero {
    background:
        radial-gradient(circle at 80% 20%, rgba(73,118,226,.3), transparent 30%),
        linear-gradient(135deg, #17213a, #223254) !important;
    color: var(--white);
}
.systems-hero .lead { color: #c8d2e3; }
.systems-hero .eyebrow { color: #91b3ff; }
.systems-hero .button-secondary { border-color: rgba(255,255,255,.45); color: var(--white); }
.systems-hero .button-secondary:hover { background: rgba(255,255,255,.1); border-color: var(--white); color: var(--white); }
.public-body .project-row {
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid #cbd6e8;
    border-radius: 20px;
    background: rgba(255,255,255,.65);
}
.compact-process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compact-process li:nth-child(3n) { border-right: 1px solid var(--line); }
.compact-process li:last-child { border-right: 0; }
.home-pricing { background: #fafaf8; }
.home-price-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.home-price-item {
    padding: 28px;
    border: 1px solid #d5deed;
    border-radius: 16px;
    background: var(--white);
}
.home-price-item h3 { margin-bottom: 24px; }
.home-price-item .price { margin-bottom: 8px; font-size: 1.75rem; font-weight: 800; letter-spacing: -.04em; }
.home-price-item p:last-child { margin-bottom: 0; color: var(--muted); }
.home-price-featured { border-color: #8eade7; box-shadow: 0 18px 42px rgba(31,61,126,.1); }
.home-price-featured .tag { margin-bottom: 14px; }
.custom-price-line {
    display: flex;
    margin-top: 22px;
    padding: 20px 24px;
    border-radius: 13px;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border: 1px solid var(--line);
    background: #efefec;
}
.custom-price-line p { margin: 0; }
.plain-process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    gap: 12px;
    list-style: none;
}
.plain-process li { min-height: 145px; padding: 26px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.055); }
.plain-process h3 { margin-bottom: 10px; }
.plain-process p { margin: 0; color: #c3ccdc; }
.home-process .section-heading p:not(.section-label) { color: #c3ccdc; }
.home-founder { border-top: 1px solid rgba(37,99,235,.1); }
.management-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.management-card {
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid #d3dcea;
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 16px 38px rgba(31,61,126,.07);
}
.management-card-featured { border-color: #7ea2e5; background: linear-gradient(180deg, #f8faff, #edf3ff); }
.management-card .price { margin: 22px 0 8px; font-size: 2rem; font-weight: 800; letter-spacing: -.04em; }
.technical-overview { background: #efefec; }
.technical-price-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.technical-price-group { padding: 28px; border-top: 3px solid var(--blue); background: var(--white); box-shadow: 0 14px 35px rgba(31,61,126,.06); }
.technical-price-group h3 { margin-bottom: 20px; }
.technical-price-group dl { margin: 0; }
.technical-price-group dl div { display: flex; padding: 13px 0; border-bottom: 1px solid var(--line); justify-content: space-between; gap: 18px; }
.technical-price-group dt { color: #3f4651; }
.technical-price-group dd { margin: 0; color: var(--blue-dark); font-weight: 800; text-align: right; }
.technical-price-group > p { margin: 18px 0 0; color: var(--muted); font-size: .88rem; }
.contact-section { background: #efefec; }
.contact-form { border-color: #cbd7e9; box-shadow: 0 22px 55px rgba(31,61,126,.11); }
.contact-aside li { display: block; padding: 18px 0; }
.contact-aside li::before { content: '→'; margin-right: 12px; color: var(--blue); font-weight: 800; }
.principles-grid .benefit { min-height: 220px; padding-top: 38px; }
.founder-section:not(.home-founder) .founder-visual { min-height: 0; background: transparent; overflow: visible; }
.founder-section:not(.home-founder) .founder-visual img { height: 560px; border-radius: 18px; box-shadow: 0 25px 60px rgba(31,61,126,.16); }
.site-nav > a[aria-current="page"]:not(.button) { color: var(--blue); }
.site-nav > a[aria-current="page"]:not(.button)::after { content: ''; display: block; height: 2px; margin-top: 5px; border-radius: 2px; background: var(--blue); }
.process-grid li { min-height: 170px; }
.process-grid li h3 { margin-top: 12px; }

/* Final public-page visual polish. */
.public-body .services-hero {
    background: radial-gradient(circle at 82% 18%, rgba(99,142,244,.28), transparent 31%), linear-gradient(135deg, #17213a, #223254);
    color: var(--white);
}
.public-body .services-hero h1 { color: var(--white); }
.public-body .services-hero .eyebrow { color: #91b3ff; }
.public-body .services-hero .lead { color: #d3dbea; }
.public-body .services-hero .button-secondary { border-color: rgba(255,255,255,.55); color: var(--white); }
.services-route-choice { padding-block: 64px; background: #252d3c; }
.services-route-choice .choice-panel { border-color: rgba(255,255,255,.13); background: #30394a; box-shadow: none; }
.services-route-choice .choice-panel-active { border-color: #527fdf; background: #354158; }
.services-route-choice .choice-panel h2,.services-route-choice .text-link { color: var(--white); }
.services-route-choice .choice-panel > p:not(.tag) { color: #c7ced9; }
.services-route-choice .choice-panel .choice-fit { border-color: rgba(255,255,255,.14); }
.services-route-choice .tag { color: #93b5ff; }
.services-pricing-section { padding-top: 72px; background: #f7f7f4; }
.services-pricing-section .price-card { border-color: #d3d5d1; border-radius: 16px; box-shadow: 0 14px 34px rgba(23,24,26,.06); }
.services-pricing-section .price-card:nth-child(2) { border-color: #8ea8d7; background: var(--white); transform: translateY(-6px); }
.services-pricing-section .info-note { border: 0; border-radius: 14px; background: #17213a; color: #d6deec; }
.systems-route-choice { padding-block: 64px; background: #efefec; }
.systems-intro-section { padding-block: 68px; }
.systems-intro-section .split-intro { align-items: center; }
.systems-intro-section .lead { color: #40506b; }
.systems-outcomes-section .app-service-grid { align-items: center; }
.systems-outcomes-section .app-service-grid p:not(.section-label) { color: #d5ddec; }
.systems-outcomes-section .feature-list { padding: 24px 28px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(255,255,255,.06); }
.systems-price-section .seo-grid { padding: clamp(28px,4vw,48px); border: 1px solid #d4d6d2; border-radius: 16px; background: var(--white); box-shadow: 0 14px 34px rgba(23,24,26,.06); }
.portfolio-section { background: #efefec; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.portfolio-card { display: flex; min-width: 0; border: 1px solid #d4d6d2; border-radius: 15px; overflow: hidden; flex-direction: column; background: var(--white); box-shadow: 0 12px 28px rgba(23,24,26,.06); }
.portfolio-card .work-art { aspect-ratio: 1.65; border-radius: 0; }
.portfolio-card .project-content { display: flex; padding: 22px; flex: 1; flex-direction: column; }
.portfolio-card h2 { margin-bottom: 14px; font-size: clamp(1.6rem,2.4vw,2.15rem); }
.portfolio-card .tag { margin-bottom: 10px; }
.portfolio-card .project-status { align-self: flex-start; order: 3; }
.portfolio-card .concept-disclosure { margin-top: auto; padding-top: 18px; }
.portfolio-card .button { align-self: flex-start; }
.portfolio-card .live-concept-note { margin-top: 10px; }
.about-founder-hero { padding-top: clamp(62px,7vw,96px); background: #f3f3f0; }
.about-founder-hero .founder-grid { grid-template-columns: .72fr 1.28fr; }
.about-founder-hero h1 { max-width: 14ch; font-size: clamp(2.7rem,5vw,5rem); }
.about-founder-hero .founder-visual { min-height: 0; background: transparent; }
.about-founder-hero .founder-visual img { height: min(650px,72vh); border-radius: 20px; box-shadow: 0 28px 65px rgba(31,61,126,.18); }
.about-intro { padding-block: 68px; }
.about-principles .principles-grid { gap: 16px; border: 0; }
.about-principles .benefit { min-height: 235px; padding: 30px; border: 1px solid #d4d6d2; border-radius: 15px; background: var(--white); box-shadow: 0 12px 28px rgba(23,24,26,.05); }
.about-principles .benefit h3 { font-size: 1.45rem; }
.about-principles .benefit p { color: #4c5a70; }
.public-body .contact-hero { padding-bottom: 120px; background: radial-gradient(circle at 80% 20%, rgba(73,118,226,.32), transparent 30%), linear-gradient(135deg,#17213a,#223254); color: var(--white); }
.public-body .contact-hero h1 { color: var(--white); }
.public-body .contact-hero .eyebrow { color: #91b3ff; }
.public-body .contact-hero .lead { color: #d3dbea; }
.public-body .systems-hero h1 { color: var(--white); }
.public-body .systems-hero .lead { color: #d3dbea; }
.contact-options-section { position: relative; z-index: 2; margin-top: -74px; padding: 0 0 64px; }
.contact-options { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
.contact-option { display: flex; min-height: 190px; padding: 28px; border: 1px solid #cad6e9; border-radius: 17px; flex-direction: column; background: var(--white); box-shadow: 0 20px 46px rgba(31,61,126,.12); color: var(--ink); text-decoration: none; transition: transform .2s,border-color .2s; }
.contact-option:hover,.contact-option:focus-visible { border-color: #7da2e8; transform: translateY(-3px); }
.contact-option span { margin-bottom: auto; color: var(--blue); font-size: .73rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.contact-option strong { margin: 24px 0 8px; font-size: 1.25rem; }
.contact-option small { color: var(--muted); font-size: .9rem; }
.contact-option-primary { border-color: #4077e9; background: linear-gradient(145deg,#2563eb,#194dbf); color: var(--white); }
.contact-option-primary span,.contact-option-primary small { color: #dbe7ff; }
.contact-section { padding-top: 72px; background: #efefec; }
.contact-aside { padding: 8px 0; }
.contact-reassurance { padding: 19px 21px; border: 1px solid #c3d2e8; border-radius: 13px; background: rgba(255,255,255,.55); color: #41516a !important; }
.ownership-section { padding-block: 58px !important; background: #efefec; }
.ownership-section .service-intro { align-items: center; }
.legal-hero { background: #f3f3f0 !important; color: var(--ink) !important; }
.legal-hero .lead { color: var(--muted) !important; }

@media (max-width: 820px) {
    .route-grid,
    .route-choice-grid { grid-template-columns: 1fr; }
    .route-card { min-height: 430px; }
    .support-strip { align-items: flex-start; flex-direction: column; }
    .compact-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compact-process li:nth-child(even) { border-right: 0; }
    .home-price-grid,
    .management-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .technical-price-groups { grid-template-columns: 1fr; }
    .portfolio-grid { grid-template-columns: 1fr; }
    .portfolio-card { display: grid; grid-template-columns: .8fr 1.2fr; }
    .portfolio-card .work-art { min-height: 100%; aspect-ratio: auto; }
    .about-founder-hero .founder-grid { grid-template-columns: .8fr 1.2fr; }
    .contact-options { grid-template-columns: 1fr; }
    .contact-option { min-height: 150px; }
}

@media (max-width: 580px) {
    .compact-process { grid-template-columns: 1fr; }
    .home-price-grid,
    .management-grid,
    .plain-process { grid-template-columns: 1fr; }
    .plain-process li { padding: 22px; }
    .custom-price-line { align-items: flex-start; flex-direction: column; }
    .founder-section:not(.home-founder) .founder-visual img { height: 430px; }
    .services-pricing-section .price-card:nth-child(2) { transform: none; }
    .portfolio-card { display: flex; }
    .portfolio-card .work-art { aspect-ratio: 1.35; }
    .about-founder-hero .founder-grid { grid-template-columns: 1fr; }
    .about-founder-hero .founder-visual { max-width: 390px; }
    .about-founder-hero .founder-visual img { height: 480px; }
    .contact-hero { padding-bottom: 105px; }
}

/* Shared commercial service-page system, based on Services & Pricing. */
.public-body .service-detail-hero { border-bottom-color: rgba(255,255,255,.16); background: radial-gradient(circle at 82% 18%, rgba(71,123,239,.24), transparent 30%), linear-gradient(135deg,#17213a,#223254); color: var(--white); }
.public-body .service-detail-hero h1 { color: var(--white); }
.public-body .service-detail-hero .eyebrow { color: #91b3ff; }
.public-body .service-detail-hero .lead { color: #d3dbea; }
.public-body .service-detail-hero .button-secondary { border-color: rgba(255,255,255,.52); color: var(--white); }
.public-body .service-detail-hero .button-secondary:hover { border-color: var(--white); background: rgba(255,255,255,.08); color: var(--white); }
.service-card-section { background: #252d3c; color: var(--white); }
.service-card-section .section-label,.service-card-section .tag { color: #91b3ff; }
.service-card-section .section-heading > p:last-child { color: #c7ced9; }
.service-card-section .price-card,.service-card-section .management-card { border-color: rgba(255,255,255,.14); background: #30394a; box-shadow: none; color: var(--white); }
.service-card-section .price-card:nth-child(2),.service-card-section .management-card-featured { border-color: #527fdf; background: #354158; }
.service-card-section .price-card p,.service-card-section .management-card p { color: #cbd3df; }
.service-card-section .price-card .price,.service-card-section .management-card .price { color: var(--white); }
.service-card-section .tick-list li,.service-card-section .compact-tick-list li { border-color: rgba(255,255,255,.13); color: #e1e6ee; }
.service-card-section .info-note { border: 1px solid rgba(255,255,255,.14); border-left: 3px solid #6795f3; border-radius: 12px; background: rgba(255,255,255,.055); color: #d2d9e5; }
.faq-section { background: #efefec; }
.faq-section .legal-content { padding: clamp(25px,4vw,44px); border: 1px solid #d4d6d2; border-radius: 16px; background: var(--white); box-shadow: 0 12px 30px rgba(23,24,26,.05); }
.faq-section .legal-content h3 { margin: 0; padding-top: 24px; border-top: 1px solid var(--line); }
.faq-section .legal-content h3:first-child { padding-top: 0; border-top: 0; }
.faq-section .legal-content h3 + p { margin-bottom: 24px; }

/* Hosting page: compact commercial sections rather than document blocks. */
.hosting-intro,.hosting-pricing,.hosting-flexible,.hosting-process { background: #f7f7f4; }
.hosting-included { background: #252d3c; color: var(--white); }
.hosting-included .section-label { color: #91b3ff; }
.hosting-included p { color: #c7ced9; }
.hosting-included .tick-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; border: 0; }
.hosting-included .tick-list li { min-height: 72px; padding: 20px 20px 20px 48px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: #30394a; color: #edf1f6; }
.hosting-included .tick-list li::before { left: 20px; top: 27px; }
.hosting-price-grid { max-width: 760px; }
.hosting-price-grid .price-card { padding: clamp(28px,4vw,44px); border-color: #aeb8c8; border-radius: 16px; background: var(--white); box-shadow: 0 16px 38px rgba(23,24,26,.07); }
.ownership-banner { display: grid; grid-template-columns: .35fr 1fr; max-width: 980px; margin-top: 22px; padding: 26px 28px; border: 1px solid #3f4c62; border-radius: 14px; align-items: center; gap: 30px; background: #252d3c; }
.ownership-banner p { margin: 0; color: #d7dde7; }
.ownership-banner .section-label { color: #91b3ff; }
.hosting-technical { background: #17213a; }
.hosting-migration .tick-list { padding: 22px 26px; border: 1px solid #d4d6d2; border-radius: 14px; background: var(--white); }
.hosting-management-contrast { background: #252d3c; }
.hosting-management-contrast .text-link { color: var(--white); }
.hosting-process .process-grid { gap: 12px; border: 0; }
.hosting-process .process-grid li { min-height: 150px; padding: 24px; border: 1px solid #d4d6d2; border-radius: 13px; background: var(--white); }
.hosting-process .process-grid p { color: var(--muted); }

/* Portfolio and custom-system rhythm. */
.work-route-choice { background: #252d3c; }
.work-route-choice .choice-panel { border-color: rgba(255,255,255,.13); background: #30394a; }
.work-route-choice .choice-panel-active { border-color: #527fdf; background: #354158; }
.work-route-choice .choice-panel h2,.work-route-choice .text-link { color: var(--white); }
.work-route-choice .choice-panel > p:not(.tag) { color: #c7ced9; }
.work-route-choice .tag { color: #91b3ff; }
.systems-outcomes-section { background: #f7f7f4; }
.systems-outcomes-section .app-service-grid p:not(.section-label) { color: var(--muted); }
.systems-outcomes-section .feature-list { border-color: #d4d6d2; background: var(--white); }
.systems-outcomes-section .feature-list li { border-color: var(--line); color: var(--ink); }

@media (max-width: 820px) {
    .hosting-included .tick-list { grid-template-columns: 1fr; }
    .ownership-banner { grid-template-columns: 1fr; gap: 10px; }
}