:root{ --green-950:#10201A; --green-900:#152A21; --green-800:#1C3529; --green-700:#264535; --cream:#F1EEE4; --cream-soft:#E9E4D6; --tan:#BC9E7B; --tan-soft:#CDB394; --slate:#41474E; --ink:#26312B; --line:rgba(241,238,228,.16); --radius:10px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:'Hanken Grotesk',sans-serif; background:var(--green-900); color:var(--cream); line-height:1.7; font-size:16px; } h1,h2,h3,.wordmark{font-family:'Quicksand',sans-serif;font-weight:600;line-height:1.2} img{max-width:100%;display:block} a{color:inherit} .container{max-width:1100px;margin:0 auto;padding:0 24px} /* ---------- header ---------- */ header{ position:sticky;top:0;z-index:50; background:rgba(16,32,26,.92);backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1180px;margin:0 auto} .brand{display:flex;align-items:center;gap:12px;text-decoration:none} .brand img{width:44px;height:auto} .wordmark{font-size:1.05rem;letter-spacing:.02em} .wordmark span{display:block;font-weight:400;font-size:.82rem;color:var(--tan-soft);letter-spacing:.14em;text-transform:uppercase} .nav-links{display:flex;gap:26px;list-style:none;align-items:center} .nav-links a{text-decoration:none;font-size:.92rem;letter-spacing:.04em;opacity:.85} .nav-links a:hover{opacity:1;color:var(--tan-soft)} .nav-cta{background:var(--tan);color:var(--green-950)!important;padding:9px 18px;border-radius:4px;font-weight:600;opacity:1!important} .nav-cta:hover{background:var(--tan-soft)} @media(max-width:820px){.nav-links{display:none}} /* ---------- buttons ---------- */ .btn{display:inline-block;padding:14px 28px;border-radius:4px;text-decoration:none; font-family:'Quicksand',sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase} .btn-solid{background:var(--tan);color:var(--green-950)} .btn-solid:hover{background:var(--tan-soft)} .btn-outline{border:1px solid var(--cream);color:var(--cream)} .btn-outline:hover{background:rgba(241,238,228,.08)} .btn-light{background:var(--cream);color:var(--green-950)} .btn-light:hover{background:#fff} .btn-outline-dark{border:1px solid var(--ink);color:var(--ink)} .btn-outline-dark:hover{background:rgba(38,49,43,.06)} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;text-align:center;padding:110px 24px 130px; background:radial-gradient(1200px 600px at 50% -10%, var(--green-800), var(--green-900) 70%)} .compass-bg{color:var(--cream);aspect-ratio:1;height:auto} .hero .compass-bg{position:absolute;right:3%;top:50%;transform:translateY(-50%);width:min(460px,40vw);max-width:86vh;opacity:.14;pointer-events:none} @media(max-width:820px){.hero .compass-bg{right:50%;transform:translate(50%,-50%);width:80vw;opacity:.09}} .eyebrow{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:7px 18px; font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tan-soft);margin-bottom:30px} .eyebrow .star{color:var(--tan-soft);margin-right:6px} .hero h1{font-size:clamp(2.2rem,5.4vw,3.6rem);font-style:italic;font-weight:500;max-width:760px;margin:0 auto 26px} .hero h1 em{font-style:italic;color:var(--tan-soft)} .hero p{max-width:560px;margin:0 auto 40px;opacity:.85} .hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} /* ---------- section scaffolding ---------- */ section{padding:90px 0} .kicker{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--tan);margin-bottom:14px} .section-title{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-bottom:18px} .light{background:var(--cream);color:var(--ink)} .light .kicker{color:#75603F} /* ---------- about band (dark) ---------- */ .about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:stretch} @media(max-width:820px){.about-grid{grid-template-columns:1fr}} .about-card{background:var(--green-800);border:1px solid var(--line);border-radius:var(--radius);padding:44px} .about-card p{opacity:.85;margin-bottom:26px} .text-link{font-family:'Quicksand',sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase; text-decoration:none;color:var(--cream);border-bottom:1px solid var(--tan);padding-bottom:4px} .text-link:hover{color:var(--tan-soft)} .about-side{display:flex;flex-direction:column;gap:26px} .placeholder{background:var(--slate);border-radius:var(--radius);display:flex;align-items:center;justify-content:center; text-align:center;color:#cfd3d8;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding:20px;position:relative} .placeholder .tag{position:absolute;left:16px;bottom:16px;background:var(--green-950);color:var(--cream); font-size:.68rem;letter-spacing:.08em;padding:7px 12px;border-radius:3px} .ph-portrait{min-height:230px;flex:1} .quote-card{background:var(--tan);color:var(--green-950);border-radius:var(--radius);padding:30px 34px} .quote-card .mark{font-family:'Quicksand',sans-serif;font-size:1.6rem;font-weight:700;line-height:1;margin-bottom:10px} .quote-card p{font-style:italic;font-size:.95rem;line-height:1.6} /* ---------- how I work (light) ---------- */ .how-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} @media(max-width:820px){.how-grid{grid-template-columns:1fr}} .ph-frame{position:relative} .ph-frame::before{content:"";position:absolute;inset:-18px auto auto -18px;width:120px;height:120px; border:1px solid #CBB795;z-index:0} .ph-frame .placeholder{min-height:360px;position:relative;z-index:1;box-shadow:14px 18px 0 rgba(38,49,43,.07)} .modality{display:grid;grid-template-columns:44px 1fr;gap:16px;margin-bottom:34px} .modality:last-of-type{margin-bottom:24px} .modality .icon{width:40px;height:40px;border:1px solid #CBB795;border-radius:50%; display:flex;align-items:center;justify-content:center;color:#75603F} .modality .icon svg{width:18px;height:18px} .modality h3{font-size:1.15rem;margin-bottom:6px} .modality p{font-size:.93rem;color:#4d564f} .light .text-link{color:var(--ink);border-bottom-color:#BC9E7B} /* ---------- fees (light, soft) ---------- */ .fees{background:var(--cream-soft);color:var(--ink)} .fees .kicker{color:#75603F} .fees-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px} @media(max-width:820px){.fees-grid{grid-template-columns:1fr}} .fee-card{background:var(--cream);border:1px solid #DAD2BF;border-radius:var(--radius);padding:34px 30px} .fee-card .price{font-family:'Quicksand',sans-serif;font-size:2rem;font-weight:700;color:var(--green-800)} .fee-card .per{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#75603F;margin-bottom:14px} .fee-card h3{font-size:1.05rem;margin-bottom:10px} .fee-card p{font-size:.92rem;color:#4d564f} .practical{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:56px;align-items:center} @media(max-width:820px){.practical{grid-template-columns:1fr}} .practical ul{list-style:none} .practical li{display:flex;gap:12px;margin-bottom:14px;font-size:.95rem} .practical li svg{width:18px;height:18px;flex:none;margin-top:4px;color:#75603F} .ph-room{min-height:280px} /* ---------- contact band (dark) ---------- */ .contact{background:radial-gradient(900px 500px at 50% 120%, var(--green-800), var(--green-900) 75%);text-align:center;position:relative;overflow:hidden} .contact .compass-bg{position:absolute;left:2%;top:50%;transform:translateY(-50%);width:min(360px,32vw);opacity:.08;pointer-events:none} .contact h2{font-style:italic;font-weight:500;font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:26px} .contact .lead{max-width:560px;margin:0 auto 56px;opacity:.85} .contact-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:80px} form{max-width:640px;margin:0 auto;text-align:left;background:var(--green-800);border:1px solid var(--line); border-radius:var(--radius);padding:40px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:640px){.form-row{grid-template-columns:1fr}} label{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tan-soft);margin:0 0 6px} input,textarea{width:100%;background:var(--green-900);border:1px solid var(--line);border-radius:4px; color:var(--cream);padding:12px 14px;font-family:inherit;font-size:.95rem;margin-bottom:18px} input:focus,textarea:focus{outline:2px solid var(--tan);outline-offset:1px} .consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;opacity:.85;margin-bottom:22px} .consent input{width:auto;margin:4px 0 0} .form-note{font-size:.8rem;opacity:.6;margin-top:16px} /* ---------- footer ---------- */ footer{background:var(--green-950);border-top:1px solid var(--line);padding:70px 0 0} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:50px} @media(max-width:820px){.footer-grid{grid-template-columns:1fr}} footer h4{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tan);margin-bottom:16px} footer p,footer li{font-size:.9rem;opacity:.8} footer ul{list-style:none} footer li{margin-bottom:8px} footer a{text-decoration:none} footer a:hover{color:var(--tan-soft)} .footer-bottom{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between; flex-wrap:wrap;gap:10px;font-size:.8rem;opacity:.6} /* ---------- reveal on scroll ---------- */ /* Gated on (scripting: enabled). Sections start hidden and JavaScript fades them in, so if JavaScript is off or fails to load, nothing must ever be hidden in the first place: there would be nothing to bring it back. A browser too old to understand this query simply shows everything, which is the right way round to fail. */ @media (scripting: enabled){ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} } /* ---- urgent help notice ---------------------------------------------- */ .urgent{border:1px solid var(--line);border-left:3px solid var(--tan); border-radius:0 10px 10px 0;padding:18px 22px;margin-top:28px;background:rgba(255,255,255,.04)} .urgent p{margin:0;font-size:.92rem;line-height:1.65} .urgent p + p{margin-top:8px} .urgent strong{color:var(--cream)} .urgent a{color:var(--cream);text-underline-offset:3px} .light .urgent{background:rgba(0,0,0,.03);border-left-color:#75603F} .light .urgent strong,.light .urgent a{color:var(--ink)} /* ---- form states ------------------------------------------------------ */ .form-error{border-left:3px solid #B4470A;background:rgba(180,71,10,.10); padding:12px 16px;border-radius:0 8px 8px 0;font-size:.9rem;margin:0 0 4px} .form-error a{color:inherit} .form-success{border:1px solid var(--line);border-left:3px solid var(--tan); border-radius:0 12px 12px 0;padding:26px} .form-success h3{margin:0 0 10px;font-size:1.25rem} .form-success p{margin:0 0 10px;font-size:.95rem;line-height:1.7} .form-success p:last-child{margin-bottom:0} button[data-sending]{opacity:.75;cursor:progress} /* ---- privacy notice --------------------------------------------------- */ .legal{max-width:70ch} .legal h3{font-size:1.05rem;margin:26px 0 8px} .legal h3:first-of-type{margin-top:0} .legal p,.legal li{font-size:.92rem;line-height:1.7} .legal ul{padding-left:1.1rem;margin:0 0 14px} .legal li{margin-bottom:5px} /* ---------- small utilities ------------------------------------------- These were inline style="" attributes. They live here instead so the Content-Security-Policy in _headers can refuse inline styles outright. */ .svg-defs{position:absolute} .hero-credential{font-size:.85rem;letter-spacing:.06em;color:var(--tan-soft);margin-bottom:26px} .center-narrow{text-align:center;max-width:620px;margin:0 auto} .contact-sub{font-size:1.2rem;margin-bottom:18px} .consent-label{text-transform:none;letter-spacing:0;font-size:.85rem;color:var(--cream)} .link-plain{color:inherit} .muted{opacity:.75} .section--tight{padding:88px 0} #privacy h2{margin-bottom:22px} .brand--footer{margin-bottom:16px} .footer-blurb{margin-top:14px} /* The submit button is a