/* Homepage: layered photography and a calm, guided appointment flow. */
.home-page { background:#f8f9f6; --navy:#102e39; --blue:#24695f; --paper:#eef2ef; }
.home-page .topbar { background:#0c252e; color:#c7d9d5; }
.home-page .header { background:#f8f9f6; height:110px; position:relative; z-index:10; }
.home-page .header .brand-logo { width:68px; height:76px; }
.home-page .header-cta { border-radius:100px; background:#143b43; }
.home-page .button { border-radius:100px; }
.depth-hero { position:relative; isolation:isolate; background:#102e39; color:#fff; margin:0 20px; border-radius:24px; min-height:720px; grid-template-columns:1fr 1fr; overflow:hidden; }
.depth-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 85% 40%,#3e685a70,transparent 60%),linear-gradient(125deg,#0b2631,#163f46); }
.depth-hero .hero-copy { padding:72px 0 64px 9%; position:relative; z-index:3; }
.depth-hero .eyebrow { color:#b9d3c4; font-size:11px; letter-spacing:2px; }
.depth-hero h1 { font-size:clamp(48px,5.5vw,86px); line-height:1.06; letter-spacing:-4px; margin:28px 0; color:#f5f7ef; }
.depth-hero h1 em { color:#c7df9a; font-style:normal; }
.depth-hero .hero-copy>p { color:#bfd0d3; max-width:460px; font-size:17px; line-height:1.8; }
.depth-hero .hero-actions { flex-wrap:wrap; gap:22px; margin-top:32px; }
.depth-hero .button { background:#d1e5ad; color:#153c3c; box-shadow:0 8px 24px #0002; }
.depth-hero .text-link { color:#e2ece4; font-size:14px; }
.hero-proof { display:flex; gap:32px; margin-top:48px; padding-top:24px; border-top:1px solid #ffffff24; max-width:450px; font-size:12px; color:#bfced1; }
.hero-proof>span { display:flex; flex-direction:column; }
.hero-proof>span:first-child { border-right:1px solid #ffffff30; padding-right:32px; }
.hero-proof strong { color:#f0f4e8; font-size:17px; font-weight:500; }
.hero-proof>span:first-child strong { font-size:29px; line-height:1.15; }
.ambient-orbit { position:absolute; border:1px solid #c3e3ce12; width:850px; height:850px; border-radius:50%; pointer-events:none; }
.orbit-one { top:-290px; right:-280px; }.orbit-two { top:-225px; right:-215px; width:720px; height:720px; }
.depth-scene { position:relative; min-height:620px; perspective:1100px; transform-style:preserve-3d; align-self:stretch; margin:25px 7% 25px 0; }
.scene-grid { position:absolute; inset:10% 0 10% 0; background-image:radial-gradient(#c9e1cd30 1px,transparent 1px); background-size:22px 22px; mask-image:linear-gradient(transparent,#000,transparent); }
.scene-backplate { position:absolute; inset:14% 8% 20% 7%; border-radius:22px; background:linear-gradient(130deg,#839b87,#284b4b); border:1px solid #c1d3ad66; rotate:8deg; box-shadow:15px 35px 70px #051a2f70; }
.scene-photo { position:absolute; inset:11% 13% 23% 1%; margin:0; border-radius:18px; overflow:hidden; rotate:-6deg; box-shadow:0 30px 60px #0006; border:1px solid #ffffff65; background:#18343c; }
.scene-photo img { width:100%; height:100%; object-fit:cover; object-position:60% center; display:block; }
.scene-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 30%,#061e2bed); pointer-events:none; }
.scene-photo figcaption { position:absolute; bottom:30px; left:28px; right:20px; z-index:1; }
.scene-photo figcaption span { font-size:9px; letter-spacing:2px; color:#d5e7d7; }
.scene-photo figcaption strong { display:block; margin-top:10px; color:#fff; font-size:30px; line-height:1.25; letter-spacing:-1px; font-weight:500; }
.scene-ring { position:absolute; right:-1%; top:5%; width:145px; height:145px; background:linear-gradient(135deg,#c6deb84d,#1b444280); border-radius:50%; backdrop-filter:blur(16px); border:1px solid #d9ebcc6b; box-shadow:0 15px 30px #001b3755; }
.scene-ring svg { width:100%; height:100%; stroke:#d5e7b8; stroke-width:1; }.scene-ring path { stroke-width:3; stroke-linecap:round; }
.scene-note { position:absolute; bottom:14%; right:3%; background:#f1f3e9; border:1px solid #fff; padding:23px 28px; display:flex; align-items:center; gap:16px; border-radius:14px; box-shadow:0 25px 50px #061d3266; color:#153d3d; }
.scene-note small { font-size:9px; letter-spacing:1.5px; color:#526e65; }.scene-note strong { font-size:21px; line-height:1.35; display:block; margin-top:6px; font-weight:500; }.note-dot { width:13px; height:13px; border-radius:50%; background:#789647; box-shadow:0 0 0 8px #dce7c7; flex-shrink:0; }
.scene-caption { position:absolute; bottom:7%; left:13%; font-size:9px; letter-spacing:3px; color:#afc8c2; }
.home-page .service-strip { background:transparent; border-bottom:1px solid #d5dfd9; color:#536d68; padding:27px 5%; gap:20px; justify-content:space-around; flex-wrap:wrap; font-size:12px; }
.home-page .service-strip span::before { content:'✓'; color:#658644; margin-right:12px; }
.home-page .services { padding-top:90px; }.home-page .section-heading h2 { letter-spacing:-2px; }
.home-page .service-card { background:#fff; border-radius:14px; overflow:hidden; border-color:#dbe3df; box-shadow:0 6px 16px #193a3c04; }.home-page .service-card:hover { transform:translateY(-5px); box-shadow:0 16px 32px #193a3c12; border-color:#95b0a3; }
.home-page .service-icon { background:#eef3e6; color:#416b58; }.home-page .card-link b { color:#416b58; }
.appointment-section { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:7%; align-items:start; background:#e9efeb; border-top:1px solid #d8e1db; border-bottom:1px solid #d8e1db; }
.appointment-intro { position:sticky; top:35px; }.appointment-intro h2 { margin:22px 0; font-size:clamp(36px,4vw,56px); letter-spacing:-2px; line-height:1.15; }.appointment-intro h2 em { color:#53785d; font-style:normal; }.appointment-intro>p { color:#597069; max-width:380px; line-height:1.85; }.appointment-explainer { padding:15px 0 15px 22px; color:#3b5852; font-size:14px; }.appointment-explainer li { padding-left:8px; margin:15px 0; }.appointment-explainer li::marker { color:#6d8955; font-weight:700; }
.appointment-phone { display:block; border-top:1px solid #c6d5cd; padding-top:24px; max-width:350px; }.appointment-phone small { display:block; font-size:10px; letter-spacing:2px; }.appointment-phone strong { display:block; font-size:25px; margin-top:6px; font-weight:500; }
.appointment-card { min-width:0; padding:34px; background:#fff; border:1px solid #dce4de; border-radius:20px; box-shadow:0 24px 60px #213e3c0d; }.appointment-card-top { display:flex; justify-content:space-between; font-size:10px; letter-spacing:1.6px; color:#57716a; }
.wizard-progress { display:flex; justify-content:space-between; gap:8px; list-style:none; margin:25px 0; padding:0; }.wizard-progress li { display:flex; flex-direction:column; align-items:center; flex:1; gap:7px; font-size:11px; color:#6a7c77; position:relative; }.wizard-progress li::before { content:''; position:absolute; height:1px; background:#dbe4df; top:15px; left:-50%; width:100%; }.wizard-progress li:first-child::before { display:none; }.wizard-progress span { display:grid; place-items:center; width:31px; height:31px; border:1px solid #d2ddd6; border-radius:50%; background:#fff; z-index:1; }.wizard-progress [aria-current] { color:#224f42; font-weight:700; }.wizard-progress [aria-current] span,.wizard-progress .complete span { background:#264f43; border-color:#264f43; color:white; }
.booking-availability { padding:12px 15px; background:#f1f4ed; border-radius:8px; font-size:12px; color:#546853; line-height:1.65; margin-bottom:25px; }
#appointment-form fieldset { padding:0; border:0; margin:0; min-width:0; }#appointment-form legend { font-size:25px; font-weight:600; letter-spacing:-.7px; padding:0; width:100%; }#appointment-form .step-help { font-size:13px; color:#64776f; margin:8px 0 20px; }
.service-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.service-options label { position:relative; cursor:pointer; }.service-options input { position:absolute; opacity:0; width:1px; height:1px; }.service-options label>span { display:block; border:1px solid #d6e0d9; padding:14px 12px; border-radius:9px; height:100%; transition:background .2s,border-color .2s; }.service-options b { display:block; font-size:13px; font-weight:600; }.service-options small { display:block; color:#6b7c74; font-size:10px; line-height:1.5; margin-top:5px; }.service-options input:checked+span { background:#edf3e4; border-color:#648250; box-shadow:inset 0 0 0 1px #648250; }.service-options input:focus-visible+span { outline:3px solid #287889; outline-offset:3px; }
#appointment-form .field-label { display:block; font-size:13px; font-weight:600; margin-top:20px; }#appointment-form .field-label>span { font-weight:400; color:#61766e; }
#appointment-form input:not([type=radio]):not([type=checkbox]),#appointment-form select,#appointment-form textarea { display:block; width:100%; min-width:0; padding:12px; font:inherit; font-size:16px; color:#23463c; background:#fbfcfa; border:1px solid #cad8cd; border-radius:7px; margin-top:7px; }#appointment-form textarea { resize:vertical; }#appointment-form :focus-visible { outline:3px solid #287889; outline-offset:3px; }.details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.schedule-note { background:#f5f6f1; padding:16px; margin-top:24px; font-size:13px; border-left:3px solid #9bb77b; color:#516b5e; }.wizard-actions { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:28px; padding-top:24px; border-top:1px solid #e3e9e4; }.wizard-next,.wizard-submit,.wizard-call { margin-left:auto; }.wizard-actions button { cursor:pointer; }.wizard-actions .button { border:0; font-size:13px; gap:16px; background:#244e43; padding:14px 22px; }.wizard-back { border:0; background:transparent; color:#4d685c; font-size:13px; padding:10px 0; }.wizard-status { color:#754024; font-size:13px; }.wizard-status:empty { display:none; }
#appointment-form [hidden] { display:none!important; }.appointment-summary { margin:20px 0; }.appointment-summary>div { padding:11px 0; border-bottom:1px solid #e1e7df; }.appointment-summary dt { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#63776c; }.appointment-summary dd { margin:4px 0 0; font-size:14px; overflow-wrap:anywhere; white-space:pre-wrap; }.booking-consent { display:flex; align-items:flex-start; gap:10px; font-size:12px; color:#556b60; }.booking-consent input { margin-top:4px; flex-shrink:0; }.booking-final-note { font-size:13px; font-weight:600; color:#526b57; }#appointment-form .form-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.home-page .owner-quote { border-radius:0 16px 16px 0; background:#eaf0e6; }.home-page .approach { background:#edf2ed; }.home-page .area-mark { color:#53735c; }.home-page .contact { background:#12383e; }.home-page footer { background:#0c2932; }
@media(min-width:1600px) { .depth-hero { max-width:1560px; margin:auto; }.depth-hero .hero-copy { padding-left:12%; } }
@media(max-width:1100px) { .depth-hero .hero-copy { padding:55px 0 50px 8%; }.depth-hero h1 { letter-spacing:-2.5px; }.depth-scene { margin-right:4%; }.scene-note { padding:19px; right:0; }.scene-note strong { font-size:18px; }.scene-ring { width:110px; height:110px; }.appointment-card { padding:25px; }.home-page .header { gap:18px; }.home-page .header nav { gap:12px; font-size:12px; } }
@media(max-width:800px) { .depth-hero { grid-template-columns:1fr; margin:0 12px; }.depth-hero .hero-copy { padding:45px 30px 15px; }.depth-hero h1 { font-size:60px; }.depth-hero .hero-copy>p { max-width:550px; }.hero-proof { margin-top:28px; }.depth-scene { min-height:490px; margin:0 8%; }.scene-photo { inset:8% 12% 23% 5%; }.scene-backplate { inset:12% 6% 22% 12%; }.scene-ring { top:3%; }.scene-note { bottom:12%; }.scene-caption { bottom:3%; }.appointment-section { grid-template-columns:1fr; gap:35px; }.appointment-intro { position:static; }.appointment-intro>p { max-width:100%; }.appointment-intro h2 br:nth-child(2) { display:none; }.home-page .header nav { font-size:14px; } }
@media(max-width:760px) { .home-page .header { height:100px; }.home-page .header nav { top:100px; background:#f8f9f6; }.home-page .header .brand-logo { width:57px; height:64px; }.home-page .service-strip { display:grid; grid-template-columns:1fr 1fr; padding:24px; font-size:10px; gap:16px; }.home-page .service-strip span::before { margin-right:6px; }.home-page .service-strip span:last-child { margin:0; font-size:10px; }.home-page .services { padding-top:55px; }.appointment-intro h2 { font-size:39px; }.appointment-card { padding:23px 19px; }.appointment-card-top { letter-spacing:1px; }.wizard-actions .button { padding:13px 16px; }.home-page .section-heading h2 { letter-spacing:-1px; } }
@media(max-width:420px) { .depth-hero .hero-copy { padding:35px 23px 10px; }.depth-hero h1 { font-size:51px; }.depth-hero .hero-copy>p { font-size:15px; }.depth-hero .hero-actions { gap:19px; }.depth-scene { min-height:390px; margin:15px 5%; }.scene-photo figcaption { bottom:22px; left:20px; }.scene-photo figcaption strong { font-size:24px; }.scene-photo figcaption span { font-size:7px; }.scene-note { padding:15px 17px; gap:13px; }.scene-note strong { font-size:16px; }.scene-note small { font-size:7px; }.scene-ring { width:90px; height:90px; }.scene-caption { font-size:7px; letter-spacing:2px; }.service-options b { font-size:12px; }.service-options label>span { padding:12px 10px; }.details-grid { grid-template-columns:1fr; gap:0; }.hero-proof { gap:22px; }.hero-proof>span:first-child { padding-right:22px; } }
@media(prefers-reduced-motion:reduce) { .depth-scene [data-depth] { transform:none!important; }.home-page * { scroll-behavior:auto!important; transition:none!important; } }