:root { --ink:#172c40; --paper:#f8f5ef; --sand:#e9e0d3; --coral:#c9684f; --line:#d7cec1; --white:#fffdf9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; }
.site-header { height:78px; padding:0 5.7vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(23,44,64,.12); background:rgba(248,245,239,.96); position:sticky; top:0; z-index:10; backdrop-filter:blur(10px); }
.brand { color:var(--ink); font-size:.85rem; font-weight:700; letter-spacing:.25em; text-decoration:none; display:flex; align-items:center; gap:.65rem; }
.brand-mark { width:28px; height:28px; display:grid; place-items:center; background:var(--coral); color:var(--white); font-family:"Playfair Display",serif; font-size:1.15rem; font-weight:700; letter-spacing:0; }
.site-header nav { display:flex; gap:2rem; }
.site-header nav a, footer a { color:var(--ink); font-size:.82rem; text-decoration:none; }
.header-cta,.primary-button { background:var(--ink); color:#fff; text-decoration:none; font-size:.82rem; font-weight:700; padding:.86rem 1.15rem; }
.hero { min-height:570px; display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; }
.hero-copy { padding:8.8vw 5.7vw 6.5vw; }
.eyebrow { font-size:.69rem; font-weight:700; letter-spacing:.18em; margin:0 0 1rem; color:var(--coral); }
h1,h2,h3 { margin:0; font-family:"Playfair Display",Georgia,serif; font-weight:600; }
h1 { font-size:clamp(3rem,5.3vw,5.65rem); line-height:.96; letter-spacing:-.055em; }
h1 em { color:var(--coral); font-weight:600; }
.hero-text { max-width:480px; line-height:1.7; font-size:1rem; margin:1.8rem 0; }
.primary-button { display:inline-flex; gap:2.5rem; align-items:center; }
.hero-note { font-size:.72rem; color:#68717a; margin-top:1.25rem; }
.hero-art { position:relative; min-height:570px; background:#d6ad8f; overflow:hidden; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-card { position:absolute; bottom:3.5rem; left:3.5rem; background:rgba(255,253,249,.93); padding:1.35rem 1.7rem; min-width:190px; }
.hero-card span { font-size:.62rem; font-weight:700; letter-spacing:.15em; color:var(--coral); }
.hero-card strong { display:block; font-family:"Playfair Display",serif; font-size:1.55rem; line-height:1.05; margin-top:.55rem; }
.calculator-section { padding:7.5rem 5.7vw; background:var(--white); }
.section-heading { text-align:center; }
.section-heading h2,.how-section h2,.inspiration-heading h2 { font-size:clamp(2.3rem,4vw,4.2rem); letter-spacing:-.05em; }
.section-heading>p:last-child { color:#65717c; margin:.8rem 0 2.6rem; }
.project-tabs { display:grid; grid-template-columns:repeat(5,1fr); max-width:1060px; margin:0 auto 2.2rem; border-bottom:1px solid var(--line); }
.project-tab { background:none; border:0; border-bottom:3px solid transparent; color:#65717c; padding:1.05rem .3rem; cursor:pointer; font-family:inherit; font-size:.78rem; font-weight:700; }
.project-tab .tab-icon { display:block; font-size:1.25rem; font-weight:400; margin-bottom:.35rem; }
.project-tab.active { border-color:var(--coral); color:var(--ink); }
.calculator-shell { max-width:1060px; margin:auto; display:grid; grid-template-columns:1.15fr .85fr; border:1px solid var(--line); }
.calculator-form { padding:2.7rem 3rem; background:#fff; }
.form-heading { display:flex; justify-content:space-between; align-items:start; padding-bottom:1.8rem; border-bottom:1px solid var(--line); }
.form-heading h3 { font-size:2.2rem; letter-spacing:-.04em; }
.step-badge { display:grid; place-items:center; width:35px; height:35px; border:1px solid var(--coral); border-radius:50%; font-size:.68rem; color:var(--coral); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; margin:1.8rem 0; }
.field { display:flex; flex-direction:column; gap:.48rem; }
.field.full { grid-column:1/-1; }
.field label { font-size:.74rem; font-weight:700; }
.field small { font-size:.7rem; color:#7c838a; margin-top:-.2rem; }
.field input,.field select { font:500 .95rem "DM Sans",sans-serif; padding:.85rem .75rem; color:var(--ink); background:#f8f5ef; border:1px solid var(--line); border-radius:0; outline-color:var(--coral); }
.variant-list { display:flex; gap:.5rem; flex-wrap:wrap; }
.variant { padding:.55rem .65rem; border:1px solid var(--line); background:#fff; color:#63707a; font:600 .72rem "DM Sans",sans-serif; cursor:pointer; }
.variant.active { border-color:var(--ink); background:var(--ink); color:#fff; }
.calculate-button { border:0; background:var(--coral); color:#fff; width:100%; padding:1rem; font:700 .82rem "DM Sans",sans-serif; cursor:pointer; display:flex; justify-content:space-between; }
.result-panel { background:var(--ink); color:#fff; padding:2.7rem 2.6rem; display:flex; flex-direction:column; }
.result-panel .eyebrow { color:#eaa08b; }
.result-intro { color:#c5d1d6; line-height:1.7; max-width:265px; margin-top:4.4rem; }
.result-number { font-family:"Playfair Display",serif; font-size:4.8rem; line-height:.9; letter-spacing:-.08em; margin:2rem 0 .4rem; }
.result-unit { font-size:.83rem; color:#d9e1e3; }
.result-label { font-size:.73rem; font-weight:700; letter-spacing:.11em; color:#9faeb5; margin:1.6rem 0 .6rem; }
.result-breakdown { padding:0; margin:0; list-style:none; border-top:1px solid rgba(255,255,255,.2); }
.result-breakdown li { display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid rgba(255,255,255,.16); padding:.65rem 0; font-size:.78rem; color:#dce5e6; }
.result-breakdown strong { color:#fff; }
.result-footnote { margin-top:auto; padding-top:2.5rem; font-size:.69rem; line-height:1.55; color:#b4c2c6; }
.result-footnote span { display:inline-grid; place-items:center; width:14px; height:14px; border:1px solid #b4c2c6; border-radius:50%; font-size:.6rem; margin-right:.35rem; }
.inspiration-section { padding:7rem 5.7vw; background:var(--sand); }
.inspiration-heading { display:grid; grid-template-columns:1fr .62fr; gap:5vw; align-items:end; margin-bottom:2.5rem; }
.inspiration-heading>p { font-size:.87rem; line-height:1.7; color:#566572; margin:0; }
.inspiration-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.inspiration-card { min-height:390px; position:relative; overflow:hidden; background:var(--ink); }
.inspiration-card img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .45s ease; }
.inspiration-card:hover img { transform:scale(1.04); }
.inspiration-card:after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(8,22,31,.78)); }
.inspiration-card>div { position:absolute; left:1.5rem; right:1.5rem; bottom:1.45rem; z-index:1; color:#fff; }
.inspiration-card span { font-size:.65rem; font-weight:700; letter-spacing:.16em; color:#f5b19d; }
.inspiration-card h3 { font-size:1.55rem; line-height:1.05; margin-top:.45rem; }
.how-section { padding:7.5rem 5.7vw; display:grid; grid-template-columns:.7fr 1.3fr; gap:8vw; background:var(--paper); }
.steps { margin:0; padding:0; list-style:none; }
.steps li { display:grid; grid-template-columns:55px 1fr; gap:1rem; padding:0 0 2rem; margin-bottom:1.4rem; border-bottom:1px solid rgba(23,44,64,.17); }
.steps span { font-family:"Playfair Display",serif; color:var(--coral); font-size:1.5rem; }
.steps h3 { font-size:1.35rem; }
.steps p { font-size:.82rem; line-height:1.6; margin:.45rem 0 0; color:#556473; }
footer { padding:2rem 5.7vw; display:flex; align-items:center; justify-content:space-between; background:var(--ink); color:#d9e2e4; }
footer .brand,footer>a:last-child { color:#fff; }
footer p { font-size:.72rem; margin:0; }
@media(max-width:780px) { .site-header{padding:0 1.4rem}.site-header nav{display:none}.header-cta{padding:.65rem .75rem}.hero{grid-template-columns:1fr}.hero-copy{padding:5rem 1.5rem 3rem}.hero-art{min-height:310px}.hero-card{left:1.5rem;bottom:1.5rem}.calculator-section{padding:4.5rem 1.2rem}.project-tabs{overflow-x:auto;grid-template-columns:repeat(5,105px);justify-content:start}.project-tab{min-height:64px}.calculator-shell,.how-section,.inspiration-heading{grid-template-columns:1fr}.calculator-form,.result-panel{padding:2rem 1.35rem}.field-grid{grid-template-columns:1fr}.field input,.field select{font-size:16px;min-height:48px;max-width:100%}.calculate-button{min-height:48px}.result-intro{margin-top:1.8rem}.result-footnote{margin-top:2rem}.inspiration-section{padding:4.5rem 1.5rem}.inspiration-heading{gap:1rem}.inspiration-grid{grid-template-columns:1fr;gap:.8rem}.inspiration-card{min-height:290px}.how-section{padding:4.5rem 1.5rem;gap:3rem}footer{padding:1.6rem;gap:1rem;flex-wrap:wrap}footer p{order:3;width:100%} }