:root{--ink:#17201c;--paper:#f2efe7;--cream:#faf8f2;--coral:#ff6b52;--mint:#b8e2c5;--lime:#dbee93;--purple:#b7a8e2;--line:rgba(23,32,28,.18);--serif:"Instrument Serif",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;--nav-height:88px}*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);overflow-x:clip;width:100%}body.lock{overflow:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.grain{position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.035;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.skip{position:absolute;top:-100px;left:20px;background:var(--ink);color:white;padding:10px;z-index:100}.skip:focus{top:10px}.nav{height:var(--nav-height);padding:0 clamp(24px,5vw,78px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(242,239,231,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .3s ease-in-out,background .3s ease-in-out,backdrop-filter .3s ease-in-out;will-change:transform}.nav.nav-hidden{transform:translateY(-100%)}main{margin-top:var(--nav-height)}.logo{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:-.7px}.logo i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);font:italic 22px var(--serif)}.logo span{color:var(--coral)}.nav nav{display:flex;gap:34px;font-size:14px;font-weight:600}.nav nav a{border-bottom:2px solid transparent}.nav nav a:hover{border-color:var(--coral)}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);border-radius:99px;padding:14px 22px;font-weight:600;transition:.25s;cursor:pointer}.btn:hover{transform:translateY(-3px);box-shadow:0 7px 0 rgba(23,32,28,.14)}.btn.small{padding:9px 17px;font-size:13px}.coral{background:var(--coral);border-color:var(--coral)}.light{border-color:var(--cream);margin-top:25px}.menu,.mobile-menu{display:none}.pad{padding:clamp(80px,10vw,145px) clamp(24px,6vw,96px)}.kicker{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:0 0 27px}.kicker i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5aaa6d;margin-right:9px;box-shadow:0 0 0 5px rgba(90,170,109,.15);animation:pulse 2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 10px transparent}}h1,h2{font-family:var(--serif);font-weight:400;line-height:.94;letter-spacing:-2.5px;margin:0}h1{font-size:clamp(64px,7.2vw,112px)}h2{font-size:clamp(53px,6.1vw,90px)}h1 em,h2 em{color:var(--coral);font-weight:400}.hero{min-height:calc(100vh - 88px);display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:5vw;padding-top:70px;padding-bottom:100px}.lead{font-size:clamp(17px,1.5vw,21px);max-width:650px;color:#4d5551}.actions{display:flex;align-items:center;gap:30px;margin-top:36px}.under{font-weight:600;border-bottom:1px solid;padding:7px 0}.trust{display:flex;gap:25px;margin-top:58px;font-size:11px;font-weight:700;letter-spacing:.5px}.trust span::first-letter{color:#48945b}.hero-art{height:650px;position:relative;display:grid;place-items:center;overflow:hidden;width:100%}.ring{position:absolute;border:1px solid rgba(255,107,82,.35);border-radius:50%}.r1{width:500px;height:500px}.r2{width:610px;height:610px}.browser{position:absolute;border:1px solid #999;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(23,32,28,.2);background:white}.bar{height:31px;padding:8px 11px;background:#e9e6df;border-bottom:1px solid #ccc;color:#898984;font-size:8px}.old{width:68%;height:350px;left:0;top:105px;transform:rotate(-7deg);background:linear-gradient(rgba(243,243,243,0.7),rgba(243,243,243,0.7)),url('images/hero-old-site.png') center/cover no-repeat;text-align:center;padding-bottom:20px;font-family:serif;color:#07528d;filter:saturate(.45)}.old .bar{text-align:left}.old h4{color:red;text-decoration:underline;margin:28px 0 8px}.old small{font-size:8px}.oldbox{margin:22px;border:3px ridge #aaa;display:flex;padding:10px;gap:12px;text-align:left;font-size:9px}.oldbox i{width:65px;height:65px;background:linear-gradient(45deg,#999,#ddd)}.fresh{width:83%;height:470px;right:0;bottom:55px;transform:rotate(3deg);background:linear-gradient(rgba(219,231,216,0.35),rgba(219,231,216,0.75)),url('images/hero-fresh-site.png') center/cover no-repeat;padding:0 23px 23px;animation:float 6s ease-in-out infinite}.fresh .bar{margin:0 -23px 22px}.mini-nav{display:flex;justify-content:space-between;font-size:9px;position:relative;z-index:2}.mini-nav strong{background:#263d31;color:white;border-radius:20px;padding:5px 9px}.mini-copy{position:relative;z-index:2;margin-top:70px}.mini-copy small{font-size:8px;letter-spacing:1.5px}.mini-copy h3{font:400 46px/.82 var(--serif);margin:12px 0 20px}.mini-copy h3 em{color:var(--coral)}.mini-copy u{font-size:9px;text-underline-offset:5px}.pill{position:absolute;z-index:4;background:var(--cream);border:1px solid;border-radius:99px;padding:9px 14px;font-size:10px;font-weight:700;box-shadow:5px 6px 0 var(--ink)}.p1{left:0;bottom:80px;transform:rotate(-5deg)}.p2{right:-1%;top:90px;background:var(--lime);transform:rotate(6deg)}@keyframes float{50%{transform:rotate(1deg) translateY(-12px)}}.ticker{background:var(--ink);color:white;overflow:hidden;padding:17px 0;transform:rotate(-1deg);width:102%;margin-left:-1%;font-size:12px;font-weight:600;letter-spacing:2px}.ticker div{display:flex;width:max-content;animation:marquee 25s linear infinite}.ticker span{color:white}.ticker span::first-letter{color:var(--coral)}@keyframes marquee{to{transform:translateX(-50%)}}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:65px}.section-head>p{width:32%;max-width:410px;color:#5d6460}.projects{display:grid;grid-template-columns:1.2fr .8fr;gap:65px 30px}.project.big{grid-row:span 2}.project.wide{grid-column:1/-1}.preview{border-radius:26px;overflow:hidden;position:relative;transition:.4s}.project:hover .preview{transform:translateY(-6px)}.big .preview{height:730px}.project:not(.big):not(.wide) .preview{height:430px}.wide .preview{height:480px}.builders{background:#c0aa8f url('images/concept-builders.png') center/cover no-repeat;padding:30px;position:relative}.site{height:100%;background:transparent;position:relative;display:flex;flex-direction:column;justify-content:space-between}.site-nav{background:rgba(247,242,231,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(23,32,28,0.1);border-radius:30px;padding:10px 20px;display:flex;justify-content:space-between;font-size:9px;font-weight:bold;color:var(--ink);width:100%;max-width:380px;z-index:2}.site-copy{background:rgba(23,32,28,0.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.15);border-radius:18px;padding:24px;color:#faf8f2;max-width:320px;margin-top:20px;z-index:2}.site-copy small{font-size:8px;letter-spacing:1.4px;color:rgba(250,248,242,0.7)}.site-copy h3{font:400 clamp(36px,4vw,56px)/.9 var(--serif);margin:12px 0 0}.site-copy em{color:var(--coral)}.builders-widget{background:rgba(23,32,28,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.15);border-radius:20px;padding:20px;color:#faf8f2;width:280px;position:absolute;right:0;bottom:0;box-shadow:0 15px 35px rgba(0,0,0,0.3);z-index:2;display:flex;flex-direction:column;gap:12px}.builders-widget h4{font:400 24px var(--serif);margin:0}.widget-tag{font-size:8px;font-weight:bold;text-transform:uppercase;color:var(--coral);letter-spacing:1px}.widget-field{display:flex;justify-content:space-between;font-size:11px;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:6px}.widget-field span{color:#999}.widget-price{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.widget-price span{font-size:11px;color:#999}.widget-price b{font-size:18px;color:var(--lime);font-family:var(--serif)}.widget-btn{border:0;border-radius:30px;background:var(--coral);color:var(--ink);padding:8px 14px;font-size:10px;font-weight:bold;cursor:pointer;margin-top:4px}.salon{background:#e8a3b4 url('images/concept-salon.png') center/cover no-repeat;padding:24px;display:flex;align-items:center;justify-content:center}.salon-site{background:rgba(250, 248, 242, 0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(23, 32, 28, 0.1);border-radius:24px;padding:24px 20px;text-align:center;max-width:260px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,0.15);display:flex;flex-direction:column;align-items:center;gap:14px;z-index:2}.salon-site small{font-size:8px;letter-spacing:1.6px;color:#666}.salon-site h3{font:400 38px/.9 var(--serif);margin:0;color:var(--ink)}.salon-site em{color:var(--coral)}.booking-widget{width:100%;background:rgba(23, 32, 28, 0.05);border-radius:12px;padding:12px;text-align:left}.booking-header{font-size:8px;font-weight:bold;text-transform:uppercase;color:#666;margin-bottom:8px;letter-spacing:0.5px}.booking-slots{display:flex;gap:6px;justify-content:space-between}.slot{font-size:8px;font-weight:bold;padding:6px 8px;background:white;border:1px solid rgba(23, 32, 28, 0.1);border-radius:6px;cursor:pointer;flex:1;text-align:center}.slot.active{background:var(--ink);color:white;border-color:var(--ink)}.salon-btn{border:0;border-radius:30px;background:var(--coral);color:var(--ink);width:100%;padding:10px;font-size:10px;font-weight:bold;cursor:pointer}.app{background:var(--purple) url('images/concept-cpa-bg.png') center/cover no-repeat;display:flex;justify-content:center;align-items:center;padding:24px}.phone-mockup{background:rgba(250, 248, 242, 0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:4px solid var(--ink);border-radius:28px;padding:14px;width:220px;box-shadow:0 15px 35px rgba(0,0,0,0.25);z-index:2;display:flex;flex-direction:column;gap:10px;animation:float 6s ease-in-out infinite}.phone-bar{font-size:7px;color:#888;border-bottom:1px solid rgba(23, 32, 28, 0.1);padding-bottom:6px}.phone-content{display:flex;flex-direction:column;gap:8px}.portal-tag{font-size:7px;font-weight:bold;color:var(--coral);letter-spacing:0.5px}.phone-content h3{font:400 24px/.9 var(--serif);margin:0;color:var(--ink)}.portal-checklist{display:flex;flex-direction:column;gap:6px;margin:6px 0}.checklist-item{display:flex;align-items:center;gap:8px;font-size:9px;color:#555;background:white;padding:6px 10px;border-radius:8px;border:1px solid rgba(23, 32, 28, 0.06)}.checklist-item.checked{color:#999;text-decoration:line-through}.checklist-item.checked i{color:#5aaa6d;font-style:normal;font-weight:bold}.checklist-item.active{font-weight:bold;color:var(--ink);border-color:rgba(255, 107, 82, 0.3)}.pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255, 107, 82, 0.2);animation:pulse 2s infinite}.checklist-item.locked{color:#999}.portal-btn{border:0;border-radius:30px;background:var(--ink);color:white;width:100%;padding:8px;font-size:9px;font-weight:bold;cursor:pointer}.restaurant{background:linear-gradient(rgba(26,38,34,0.65),rgba(26,38,34,0.65)),#1a2622 url('images/concept-restaurant.png') center/cover no-repeat;color:#faf8f2;padding:60px 8%;display:grid;grid-template-columns:1.1fr 0.9fr;align-items:center;gap:40px}.restaurant-copy{background:rgba(23, 38, 34, 0.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255, 255, 255, 0.15);border-radius:20px;padding:30px;max-width:340px;z-index:2}.restaurant-copy small{font-size:9px;letter-spacing:2px;color:rgba(250,248,242,0.7)}.restaurant-copy h3{font:400 clamp(48px,5vw,72px)/.85 var(--serif);margin:16px 0 20px}.restaurant-copy h3 em{color:var(--coral)}.restaurant-copy u{font-size:10px;text-underline-offset:5px;color:#faf8f2}.restaurant-widget{background:rgba(23, 38, 34, 0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.15);border-radius:22px;padding:24px;color:#faf8f2;width:290px;justify-self:end;box-shadow:0 15px 35px rgba(0,0,0,0.3);z-index:2;display:flex;flex-direction:column;gap:8px}.restaurant-widget h4{font:400 24px var(--serif);margin:0}.restaurant-widget p{font-size:10px;color:#b2c0bc;margin:4px 0 10px;line-height:1.4}.widget-order-row{display:flex;justify-content:space-between;align-items:center}.widget-order-row b{font-size:18px;color:var(--lime)}.add-order-btn{border:0;border-radius:30px;background:var(--coral);color:var(--ink);padding:6px 12px;font-size:9px;font-weight:bold;cursor:pointer}.meta{display:flex;justify-content:space-between;align-items:end;padding-top:16px}.meta h3{font:400 28px var(--serif);margin:0}.meta h3 span{font:10px var(--sans);color:#777}.meta p{font-size:10px;letter-spacing:.7px;text-transform:uppercase;margin:0;color:#777}.note{text-align:center;color:#777;font-size:11px;margin:55px 0 0}.services{background:var(--ink);color:var(--cream);display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw}.services-intro{position:sticky;top:120px;height:max-content}.services .kicker{color:var(--mint)}.services h2{font-size:clamp(52px,5.5vw,82px)}.services-intro>p:not(.kicker){color:#b7c0bb;max-width:500px}.service{border-top:1px solid #ffffff30;padding:34px 0;display:grid;grid-template-columns:38px 1fr 25px;gap:22px}.service>span{font-size:10px;color:var(--coral)}.service h3{font:400 clamp(32px,3vw,45px) var(--serif);margin:0}.service p{color:#b8c0bc}.service small{border:1px solid #ffffff30;border-radius:30px;padding:6px 10px;font-size:8px;letter-spacing:.7px}.service>b{color:var(--coral);font-size:22px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.step{min-height:400px;border:1px solid rgba(255,255,255,0.12);border-radius:26px;padding:30px;display:flex;flex-direction:column;transition:.3s;color:#faf8f2}.step:nth-child(1){background:linear-gradient(rgba(23,32,28,0.85),rgba(23,32,28,0.85)),url('images/step-dream.png') center/cover no-repeat}.step:nth-child(2){background:linear-gradient(rgba(23,32,28,0.85),rgba(23,32,28,0.85)),url('images/step-design.png') center/cover no-repeat}.step:nth-child(3){background:linear-gradient(rgba(23,32,28,0.85),rgba(23,32,28,0.85)),url('images/step-launch.png') center/cover no-repeat}.step:hover{transform:translateY(-7px);border-color:var(--coral)}.step>span{font-size:10px}.step>i{font:70px var(--serif);color:var(--coral);text-align:center;margin:auto}.step h3{font:400 40px var(--serif);margin:0;color:#faf8f2}.step p{color:#b2c0bc}.step small{margin-top:auto;font-size:8px;letter-spacing:1.2px;font-weight:bold;color:rgba(250,248,242,0.65)}.about{background:#e0dccf;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.about-art{height:620px;background:url('images/about-ideas-home.png') center/cover no-repeat;border-radius:300px 300px 18px 18px;position:relative;overflow:hidden;padding:40px;display:flex;align-items:end;justify-content:center}.about-card{background:rgba(23,32,28,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.15);border-radius:20px;padding:30px;max-width:380px;color:#faf8f2;z-index:2;box-shadow:0 15px 35px rgba(0,0,0,0.3)}.about-card p{font:400 48px/0.95 var(--serif);margin:0}.about-card em{color:var(--coral);font-style:italic}.about-copy .large{font:400 26px/1.35 var(--serif);margin:34px 0 24px}.about-copy>p:not(.kicker):not(.large){color:#59605c}.about-copy ul{list-style:none;padding:0;margin-top:35px;border-top:1px solid var(--line)}.about-copy li{border-bottom:1px solid var(--line);padding:14px 0;font-weight:600;font-size:13px}.about-copy li span{display:inline-block;width:45px;color:#a34f3e;font-size:9px}.faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:8vw}.faq-head>p:last-child{color:#606763;max-width:350px}.faq-item{border-top:1px solid var(--line)}.faq-item:last-child{border-bottom:1px solid var(--line)}.faq-item button{border:0;background:none;width:100%;padding:23px 0;display:flex;justify-content:space-between;text-align:left;font:400 23px var(--serif);cursor:pointer}.faq-item button b{font:400 23px var(--sans)}.faq-item>div{display:grid;grid-template-rows:0fr;transition:.3s}.faq-item>div p{overflow:hidden;margin:0;color:#606763}.faq-item.open>div{grid-template-rows:1fr}.faq-item.open>div p{padding-bottom:24px}.contact{background:var(--coral);display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw}.contact h2 em{color:var(--cream)}.contact-copy>p:not(.kicker):not(.email){max-width:500px}.email{display:flex;gap:15px;align-items:center;margin-top:40px}.email>i{display:grid;place-items:center;border:1px solid;border-radius:50%;width:50px;height:50px}.email a{text-decoration:underline}.contact form{background:var(--cream);border-radius:25px;padding:38px;box-shadow:15px 15px #17201c1f}.fields{display:grid;grid-template-columns:1fr 1fr;gap:25px}label{display:block;font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:.8px;margin-bottom:22px}input,select,textarea{display:block;width:100%;border:0;border-bottom:1px solid #aaa;background:none;padding:10px 0;outline:0;border-radius:0;font-size:14px;text-transform:none;letter-spacing:0}input:focus,select:focus,textarea:focus{border-color:var(--coral)}.contact form .btn{width:100%}.form-status{text-align:center;font-size:11px}footer{background:var(--ink);color:var(--cream);padding:75px clamp(24px,6vw,96px) 30px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .5fr .5fr .5fr;gap:40px;padding-bottom:70px}.footer-grid>p{font:29px/1.1 var(--serif);color:#a8b1ac}.footer-grid>div{display:flex;flex-direction:column;gap:8px;font-size:13px}.footer-grid>div>b{font-size:8px;letter-spacing:1.3px;color:var(--coral);margin-bottom:7px}.footer-bottom{border-top:1px solid #ffffff30;padding-top:22px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:#89928d}.footer-bottom i{font-style:normal}.chat-launch{position:fixed;right:25px;bottom:23px;z-index:80;background:var(--cream);border:1px solid;border-radius:99px;padding:7px 14px 7px 7px;display:flex;gap:9px;align-items:center;box-shadow:5px 6px var(--ink);cursor:pointer}.chat-launch i{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:var(--coral)}.chat-launch b{font-size:11px}.chat{position:fixed;right:25px;bottom:88px;width:min(385px,calc(100vw - 30px));z-index:81;background:var(--cream);border:1px solid;border-radius:20px;box-shadow:9px 10px var(--ink);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.97);transition:.25s}.chat.open{opacity:1;visibility:visible;transform:none}.chat header{display:flex;align-items:center;background:var(--ink);color:white;padding:14px}.chat header>span{display:grid;place-items:center;width:36px;height:36px;background:var(--coral);color:var(--ink);border-radius:50%}.chat header p{display:flex;flex-direction:column;margin:0 0 0 10px;font-size:12px}.chat header small{color:#b8c0bc;font-size:8px}.chat header small::first-letter{color:#6ed187}.chat header button{margin-left:auto;border:0;background:none;color:white;font-size:23px;cursor:pointer}.messages{height:210px;overflow:auto;padding:15px;display:flex;flex-direction:column;gap:9px}.messages p{max-width:82%;background:#e7e3da;border-radius:13px 13px 13px 3px;padding:9px 11px;margin:0;font-size:11px}.messages p.user{align-self:end;background:var(--coral);border-radius:13px 13px 3px 13px}.replies{display:flex;gap:5px;flex-wrap:wrap;padding:0 12px 11px}.replies button{border:1px solid #aaa;background:none;border-radius:30px;padding:5px 8px;font-size:8px;cursor:pointer}.chat form{display:flex;border-top:1px solid #ccc;padding:9px}.chat form input{border:0;padding:5px;flex:1}.chat form button{width:34px;height:34px;border:0;border-radius:50%;background:var(--coral)}.reveal{opacity:0;transform:translateY(28px);transition:.75s}.reveal.visible{opacity:1;transform:none}.delay{transition-delay:.12s}.delay2{transition-delay:.24s}
@media(max-width:1000px){.nav nav,.nav>.btn{display:none}.menu{display:flex;flex-direction:column;gap:6px;border:0;background:none;z-index:42}.menu i{width:25px;height:2px;background:var(--ink);transition:.3s}.menu[aria-expanded=true] i:first-child{transform:translateY(4px) rotate(45deg)}.menu[aria-expanded=true] i:last-child{transform:translateY(-4px) rotate(-45deg)}.mobile-menu{display:flex;position:fixed;inset:0;z-index:39;background:var(--paper);align-items:center;justify-content:center;flex-direction:column;gap:15px;font:44px var(--serif);transform:translateY(-100%);transition:.4s}.mobile-menu.open{transform:none}.hero{grid-template-columns:1fr}.hero-copy{text-align:center}.lead{margin-left:auto;margin-right:auto}.actions,.trust{justify-content:center}.hero-art{max-width:700px;width:100%;margin:auto}.services{grid-template-columns:1fr}.services-intro{position:static}.about{grid-template-columns:1fr}.about-art{max-width:650px;width:100%;margin:auto}.faq,.contact{grid-template-columns:1fr}}
@media(max-width:720px){:root{--nav-height:72px}.nav{padding:0 20px}.pad{padding:78px 20px}.hero{padding-top:55px}.hero h1{font-size:57px;letter-spacing:-1.5px}.actions{flex-direction:column}.trust{margin-top:38px;gap:12px;flex-wrap:wrap}.hero-art{height:480px}.ring.r1{width:370px;height:370px}.ring.r2{width:450px;height:450px}.old{height:265px;top:70px}.fresh{height:365px;width:88%;bottom:35px}.mini-copy{margin-top:44px}.mini-copy h3{font-size:35px}.p1{bottom:35px}.p2{top:35px}.section-head{display:block}.section-head>p{width:100%;margin-top:22px}h2{font-size:52px;letter-spacing:-1.5px}.projects{grid-template-columns:1fr;gap:52px}.project.big{grid-row:auto}.project.wide{grid-column:auto}.big .preview,.project:not(.big):not(.wide) .preview,.wide .preview{height:430px}.builders{padding:20px}.site{padding:0;height:auto}.site-copy{margin-top:15px;max-width:100%}.builders-widget{position:static;width:100%;margin-top:20px}.salon{padding:20px}.salon-site{max-width:100%}.app{padding:20px}.phone-mockup{width:100%;max-width:240px}.restaurant{grid-template-columns:1fr;padding:24px;gap:24px}.restaurant-copy{max-width:100%;padding:20px}.restaurant-widget{width:100%;justify-self:stretch}.meta{display:block}.meta p{margin-left:20px}.steps{grid-template-columns:1fr}.step{min-height:320px}.about-art{height:470px;padding:25px;align-items:center;justify-content:center}.about-card p{font-size:32px}.fields{grid-template-columns:1fr;gap:0}.contact form{padding:24px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>.logo,.footer-grid>p{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:7px}.chat{right:15px;bottom:84px}.chat-launch{right:15px;padding-right:7px}.chat-launch b{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
.messages p.typing {
  display: flex;
  gap: 4px;
  align-items: center;
  width: 45px;
  min-height: 28px;
}
.messages p.typing span {
  width: 5px;
  height: 5px;
  background: #999;
  border-radius: 50%;
  animation: typing-dots 1.4s infinite both;
}
.messages p.typing span:nth-child(2) { animation-delay: .2s; }
.messages p.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing-dots {
  0%, 80%, 100% { opacity: .2; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1.2); }
}
.sub-hero{padding:calc(var(--nav-height) + 90px) clamp(24px,6vw,96px) 90px;background:var(--cream) center/cover no-repeat;text-align:center;border-bottom:1px solid var(--line);position:relative;color:var(--ink)}
.sub-hero h1{font-size:clamp(45px,6vw,84px);margin-bottom:20px;letter-spacing:-1.5px;color:var(--ink);position:relative;z-index:2}
.sub-hero p{font-size:clamp(16px,1.4vw,20px);color:#4d5551;max-width:700px;margin:0 auto;position:relative;z-index:2}
.sub-hero.has-hero-img{color:#faf8f2}
.sub-hero.has-hero-img h1{color:#faf8f2}
.sub-hero.has-hero-img p{color:rgba(250,248,242,0.85)}
.sub-hero.timberline-hero{background-image:linear-gradient(to bottom, rgba(23,32,28,0.3) 0%, rgba(23,32,28,0.85) 50%, rgba(23,32,28,0.3) 100%),url('../images/concept-builders.png')}
.sub-hero.haven-hero{background-image:linear-gradient(to bottom, rgba(23,32,28,0.3) 0%, rgba(23,32,28,0.85) 50%, rgba(23,32,28,0.3) 100%),url('../images/concept-salon.png')}
.sub-hero.summit-hero{background-image:linear-gradient(to bottom, rgba(23,32,28,0.3) 0%, rgba(23,32,28,0.85) 50%, rgba(23,32,28,0.3) 100%),url('../images/concept-cpa-bg.png')}
.sub-hero.miso-hero{background-image:linear-gradient(to bottom, rgba(23,32,28,0.3) 0%, rgba(23,32,28,0.85) 50%, rgba(23,32,28,0.3) 100%),url('../images/concept-restaurant.png')}
.legal-body{max-width:800px;margin:60px auto;padding:0 24px}
.legal-body h2{font-size:32px;font-family:var(--sans);font-weight:600;letter-spacing:-0.5px;margin:40px 0 20px;border-bottom:1px solid var(--line);padding-bottom:10px}
.legal-body p{font-size:15px;color:#4d5551;margin-bottom:20px;line-height:1.7}
.legal-body ul{margin-bottom:20px;padding-left:20px}
.legal-body li{font-size:15px;color:#4d5551;margin-bottom:10px}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:80px clamp(24px,6vw,96px);align-items:start}
.case-meta-box{background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:30px;position:sticky;top:100px}
.case-meta-list{list-style:none;padding:0;margin:0 0 30px}
.case-meta-list li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.case-meta-list li b{font-weight:600;color:var(--ink)}
.case-meta-list li span{color:#555}
.case-content h2{font-size:38px;margin:0 0 20px;letter-spacing:-1px}
.case-content p{color:#4d5551;margin-bottom:25px;font-size:16px;line-height:1.7}
.case-image-full{width:100%;border-radius:24px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(23,32,28,0.1);margin-top:40px}
.back-btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--coral);margin-bottom:40px}
@media(max-width:768px){.case-grid{grid-template-columns:1fr}.case-meta-box{position:static}}

/* Case Study - Mobile Floating CTA Bar & Overlap Prevention */
@media(max-width:768px){
  .case-meta-box .btn.coral {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    border-radius: 0;
    margin: 0;
    padding: 18px 24px;
    z-index: 95;
    box-shadow: 0 -4px 20px rgba(23,32,28,0.15);
    background: var(--coral);
    display: flex !important;
    justify-content: center;
    align-items: center;
    border: none;
  }
  body:has(.case-grid) footer {
    padding-bottom: 90px;
  }
  body:has(.case-grid) .chat-launch {
    bottom: 85px;
  }
  body:has(.case-grid) .chat {
    bottom: 145px;
  }
}

/* Hero Section - Premium Staggered Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-copy h1,
.hero-copy .lead,
.hero-copy .actions,
.hero-copy .trust,
.hero-copy .kicker {
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  animation: fadeInUp 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-copy .kicker { animation-delay: 0.3s; }
.hero-copy h1 { animation-delay: 0.5s; }
.hero-copy .lead { animation-delay: 0.7s; }
.hero-copy .actions { animation-delay: 0.9s; }
.hero-copy .trust { animation-delay: 1.1s; }

/* ROI Calculator Section */
.calculator {
  background: var(--ink);
  color: var(--cream);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.calculator .kicker {
  color: var(--mint);
}
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 8vw;
  align-items: center;
}
.calc-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
}
.calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.input-group label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #b2c0bc;
  margin-bottom: 12px;
}
.input-group label span {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--coral);
}
.input-group input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  outline: none;
}
.input-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--coral);
  cursor: pointer;
  transition: transform 0.1s;
}
.input-group input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.calc-outputs {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 18px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.out-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #b2c0bc;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 0;
}
.out-row strong {
  font-size: 16px;
  font-family: var(--serif);
}
.out-total {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
}
.out-total span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #b2c0bc;
}
.out-total h3 {
  font-size: 42px;
  font-family: var(--serif);
  color: var(--lime);
  margin: 8px 0 0;
}
@media (max-width: 900px) {
  .calc-grid {
    grid-template-columns: 1fr;
  }
  .calc-box {
    grid-template-columns: 1fr;
    padding: 30px 20px;
  }
}

/* Before/After Slider Section */
.comparison-section {
  background: var(--cream);
  border-top: 1px solid var(--line);
}
.ba-slider-container {
  max-width: 1000px;
  margin: 40px auto 0;
}
.ba-slider {
  position: relative;
  width: 100%;
  height: 520px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(23, 32, 28, 0.15);
  background: var(--ink);
}
.ba-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center 0px;
  pointer-events: none;
}
.ba-before {
  width: 100% !important;
  clip-path: inset(0 50% 0 0);
}
.ba-handle {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-size: 14px;
  font-weight: bold;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}
.ba-handle::before {
  content: '';
  position: absolute;
  top: -600px;
  bottom: -600px;
  left: 50%;
  width: 2px;
  background: var(--cream);
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}
.ba-range {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 15;
  margin: 0;
  padding: 0;
}
.ba-label {
  position: absolute;
  bottom: 24px;
  background: rgba(23, 32, 28, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cream);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  z-index: 8;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ba-label.before {
  left: 24px;
}
.ba-label.after {
  right: 24px;
}
@media (max-width: 720px) {
  .ba-slider {
    height: 340px;
  }
}

/* Multi-step Project Planner Form */
.project-planner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.planner-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.planner-progress .progress-bar {
  height: 4px;
  background: var(--coral);
  border-radius: 2px;
  transition: width 0.3s ease-in-out;
}
.planner-progress .step-num {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #777;
}
.form-step {
  display: none;
  animation: fadeInStep 0.4s ease-in-out forwards;
}
.form-step.active {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@keyframes fadeInStep {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.form-step h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--ink);
}
.step-desc {
  font-size: 14px;
  color: #555;
  margin: -10px 0 10px;
}
.choice-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.choice-chips label.chip {
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
}
.choice-chips label.chip input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.choice-chips label.chip span {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  transition: 0.25s;
  background: var(--cream);
  color: var(--ink);
}
.choice-chips label.chip input:checked + span {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.teardown-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.choice-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink);
  transition: 0.25s;
}
.choice-option input {
  accent-color: var(--coral);
}
.choice-option:has(input:checked) {
  border-color: var(--coral);
  box-shadow: 0 0 0 1px var(--coral);
}
.planner-actions {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}
.planner-actions .btn {
  flex: 1;
}
.planner-actions .btn.light {
  background: transparent;
  color: var(--ink);
}

/* Planner Budget Estimate Callout */
.planner-budget-estimate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(23, 32, 28, 0.03);
  border: 1px dashed var(--line);
  padding: 14px 20px;
  border-radius: 12px;
  margin-top: 15px;
}
.planner-budget-estimate span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #555;
}
.planner-budget-estimate strong {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--coral);
}

/* Tools Hub Grid & Card Previews */
.tools-hub-section {
  padding-top: 70px !important;
}
.tools-split-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: start;
}
.tools-sticky-info {
  display: flex;
  flex-direction: column;
}
.tools-sticky-info h1 {
  font-size: clamp(54px, 6vw, 92px);
  margin-top: 15px;
  line-height: 0.92;
}
.tools-sticky-info .lead {
  margin-top: 24px;
  max-width: 100%;
}
.tools-scroll-cards {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}
.tools-scroll-cards .preview {
  height: 480px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 30px 24px;
}
@media (min-width: 992px) {
  .tools-split-container {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 80px;
  }
  .tools-sticky-info {
    position: sticky;
    top: 120px;
    height: max-content;
  }
}
.preview-title {
  font: 400 24px var(--serif);
  margin: 0;
  text-align: center;
  width: 100%;
}
.preview-caption {
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  text-align: center;
  width: 100%;
}
.roi-preview {
  background: linear-gradient(135deg, #16221d 0%, #0d1512 100%) !important;
}
.mini-roi-dashboard {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 20px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.mini-roi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 10px;
}
.calc-tag, .speed-tag, .audit-tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--mint);
  text-transform: uppercase;
}
.mini-roi-status {
  font-size: 8px;
  font-weight: 700;
  color: var(--lime);
  background: rgba(220, 238, 147, 0.1);
  padding: 3px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mini-roi-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mini-roi-inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mini-input-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mini-input-item label {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 600;
  color: #8ca097;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mini-val {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--cream);
  align-self: flex-end;
  margin-top: -18px;
}
.mini-slide-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  position: relative;
}
.mini-slide-fill {
  height: 100%;
  background: var(--coral);
  border-radius: 2px;
}
.mini-slide-thumb {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--cream);
  border: 1px solid var(--coral);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.mini-roi-outputs {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.mini-roi-outputs small {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8ca097;
  display: block;
}
.mini-roi-outputs h3 {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--lime);
  margin: 4px 0;
  line-height: 1;
}
.mini-roi-badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  color: var(--ink);
  background: var(--coral);
  padding: 4px 10px;
  border-radius: 99px;
  margin-top: 4px;
  text-transform: uppercase;
}

.speed-preview {
  background: #fbf9f6 !important;
}
.mini-speed-dashboard {
  background: white;
  border: 1px solid rgba(23, 32, 28, 0.08);
  border-radius: 20px;
  padding: 20px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: 0 15px 30px rgba(23, 32, 28, 0.04);
}
.mini-speed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(23, 32, 28, 0.06);
  padding-bottom: 8px;
}
.speed-score-badge {
  font-size: 9px;
  font-weight: 700;
  color: #48945b;
  background: rgba(72, 148, 91, 0.1);
  padding: 2px 8px;
  border-radius: 99px;
}
.mini-speed-tabs {
  display: flex;
  gap: 4px;
  background: #f5f4f0;
  padding: 3px;
  border-radius: 8px;
}
.mini-tab {
  flex: 1;
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  padding: 5px 2px;
  border-radius: 5px;
  color: #777;
}
.mini-tab.active {
  background: white;
  color: var(--ink);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.mini-speed-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mini-bar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mini-bar-info {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 600;
  color: var(--ink);
}
.mini-bar-info span {
  font-size: 8px;
  color: #666;
}
.mini-bar-track {
  height: 5px;
  background: #f0ede4;
  border-radius: 3px;
  overflow: hidden;
}
.mini-bar-fill {
  height: 100%;
  border-radius: 3px;
}
.mini-bar-fill.speed-fast {
  background: #48945b;
}
.mini-bar-fill.speed-slow {
  background: var(--coral);
}
.mini-bar-fill.speed-poor {
  background: #a34f3e;
}

.audit-preview {
  background: #f5f4f0 !important;
}
.mini-audit-dashboard {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.04);
}
.mini-audit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.mini-audit-badge {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: 0.5px;
}
.mini-audit-badge.bad {
  color: var(--coral);
  background: rgba(255, 107, 82, 0.1);
}
.mini-audit-questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mini-q-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
}
.mini-q-row p {
  margin: 0;
  font-size: 9px;
  color: #555;
  max-width: 65%;
}
.mini-q-choices {
  display: flex;
  gap: 4px;
}
.mini-choice {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  background: #e9e6df;
  border-radius: 4px;
  color: #777;
}
.mini-choice.active.bad {
  background: var(--coral);
  color: white;
}
.mini-audit-result {
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mini-score-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid var(--coral);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  flex-shrink: 0;
}
.score-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--coral);
  line-height: 1;
}
.score-lbl {
  font-size: 6px;
  text-transform: uppercase;
  color: #777;
}
.mini-audit-result p {
  margin: 0;
  font-size: 9px;
  line-height: 1.3;
  color: #555;
}

/* Restored Gauge Dial styles for Platform Speed Meter tool page */
.gauge-box {
  border-style: solid;
  border-color: var(--lime);
  border-top-color: rgba(0, 0, 0, 0.1) !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.gauge-center {
  font-weight: 700;
  color: var(--ink);
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   APPS DROPDOWN AND YARD CALCULATOR STYLES
   ========================================================================== */

/* Apps Dropdown Styling for Desktop Nav */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-trigger {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s, color 0.25s;
}

.nav-dropdown-trigger:hover,
.nav-dropdown:hover .nav-dropdown-trigger {
  border-color: var(--coral);
}

.nav-dropdown-trigger .chevron {
  font-size: 8px;
  transition: transform 0.25s;
  display: inline-block;
}

.nav-dropdown:hover .nav-dropdown-trigger .chevron {
  transform: rotate(180deg);
}

/* Dropdown Menu Desktop styling */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 320px;
  background: rgba(250, 248, 242, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 12px 36px rgba(23, 32, 28, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(8px);
}

.dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background 0.2s, transform 0.2s;
  text-align: left;
}

.dropdown-item:hover {
  background: rgba(255, 107, 82, 0.08);
  transform: translateX(4px);
}

.dropdown-item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.dropdown-item:hover .dropdown-item-title {
  color: var(--coral);
}

.dropdown-item-desc {
  font-size: 11px;
  color: #606763;
  font-weight: 400;
  line-height: 1.3;
}

/* Mobile Dropdown Styling (inside .mobile-menu) */
.mobile-dropdown {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-dropdown-trigger {
  background: none;
  border: none;
  font-family: var(--serif) !important;
  font-size: 44px !important;
  font-weight: 400 !important; /* Force normal weight to match other links */
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 5px 0;
  width: auto;
  margin: 0 auto;
  outline: none;
}

.mobile-dropdown-trigger .chevron {
  font-size: 20px;
  transition: transform 0.3s;
}

.mobile-dropdown.open .mobile-dropdown-trigger .chevron {
  transform: rotate(180deg);
}

.mobile-dropdown-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s, visibility 0.25s;
  overflow: hidden;
  width: 80%;
  max-width: 320px;
  background: rgba(23, 32, 28, 0.04);
  border-radius: 14px;
  margin: 0 auto; /* Remove margin when closed */
  opacity: 0;
  visibility: hidden;
}

.mobile-dropdown.open .mobile-dropdown-menu {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  margin-top: 8px; /* Apply margin only when open */
}

.mobile-dropdown-menu-inner {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 24px;
  text-align: center;
}

.mobile-dropdown-menu a {
  font-size: 26px !important;
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  padding: 6px 0 !important;
  color: #4d5551 !important;
  transition: color 0.2s, transform 0.2s;
  display: block;
}

.mobile-dropdown-menu a:hover {
  color: var(--coral) !important;
  transform: scale(1.03);
}

/* Green Theme Variables for Landscaping Calculator */
.theme-green {
  --primary: #2d5a27;
  --primary-rgb: 45, 90, 39;
  --primary-hover: #1e3f1a;
  --accent: #8eed80;
  --accent-light: #e8f9e6;
  --accent-dark: #1b3d16;
  --bg-green-soft: #f4fcf3;
  --line-green: rgba(45, 90, 39, 0.15);
}

/* Landscaping Calculator Component Styles */
.yard-calculator {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(24px, 5vw, 48px);
  box-shadow: 12px 14px 0 rgba(23, 32, 28, 0.05);
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.calc-progress-container {
  margin-bottom: 35px;
}

.calc-progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  color: #606763;
}

.calc-progress-bar-track {
  height: 6px;
  background: rgba(23, 32, 28, 0.08);
  border-radius: 99px;
  overflow: hidden;
}

.calc-progress-bar-fill {
  height: 100%;
  background: var(--primary, #2d5a27);
  width: 14.3%;
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.calc-step {
  display: none;
}

.calc-step.active {
  display: block;
  animation: calcFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes calcFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 38px);
  color: var(--ink);
  margin: 0 0 10px 0;
  line-height: 1.1;
}

.step-desc {
  font-size: 14px;
  color: #59605c;
  margin: 0 0 28px 0;
}

/* Grid Layouts for options */
.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.options-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

/* Card Selection Elements */
.option-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  background: var(--cream);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.option-card:hover {
  border-color: var(--primary, #2d5a27);
  background: var(--bg-green-soft, #f4fcf3);
  transform: translateY(-2px);
}

.option-card.selected {
  border-color: var(--primary, #2d5a27);
  background: var(--accent-light, #e8f9e6);
  box-shadow: 0 0 0 1px var(--primary, #2d5a27);
}

.option-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(23, 32, 28, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.25s;
}

.option-card:hover .option-card-icon {
  background: rgba(45, 90, 39, 0.12);
  color: var(--primary, #2d5a27);
}

.option-card.selected .option-card-icon {
  background: var(--primary, #2d5a27);
  color: white;
}

.option-card-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.option-card-desc {
  font-size: 12px;
  color: #606763;
  line-height: 1.3;
}

/* Inputs styling */
.calc-field-group {
  margin-bottom: 24px;
}

.calc-field-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  color: var(--ink);
}

.calc-input,
.calc-select,
.calc-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--ink);
  font-size: 14px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.calc-input:focus,
.calc-select:focus,
.calc-textarea:focus {
  border-color: var(--primary, #2d5a27);
  box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.1);
}

.calc-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Checkbox Add-ons */
.addons-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}

.addon-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--cream);
  text-align: left;
}

.addon-item:hover {
  border-color: var(--primary, #2d5a27);
  background: var(--bg-green-soft, #f4fcf3);
}

.addon-item.selected {
  border-color: var(--primary, #2d5a27);
  background: var(--accent-light, #e8f9e6);
}

.addon-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  background: white;
}

.addon-item.selected .addon-checkbox {
  border-color: var(--primary, #2d5a27);
  background: var(--primary, #2d5a27);
}

.addon-checkbox::after {
  content: "✓";
  color: white;
  font-size: 12px;
  font-weight: bold;
  display: none;
}

.addon-item.selected .addon-checkbox::after {
  display: block;
}

.addon-info {
  display: flex;
  flex-direction: column;
}

.addon-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.addon-price {
  font-size: 11px;
  color: #606763;
}

/* File Upload drag and drop zone */
.file-upload-zone {
  border: 2px dashed var(--line);
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  background: white;
  cursor: pointer;
  transition: all 0.25s;
}

.file-upload-zone:hover,
.file-upload-zone.dragover {
  border-color: var(--primary, #2d5a27);
  background: var(--bg-green-soft, #f4fcf3);
}

.upload-icon {
  font-size: 32px;
  margin-bottom: 12px;
  display: block;
}

.file-upload-zone p {
  margin: 0;
  font-size: 13px;
  color: #606763;
}

.file-upload-zone small {
  font-size: 11px;
  color: #888;
}

.uploaded-files-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.uploaded-file-tag {
  background: rgba(23, 32, 28, 0.05);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.uploaded-file-remove {
  background: none;
  border: none;
  color: var(--coral);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}

/* Navigation buttons */
.calc-nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  gap: 15px;
}

.calc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 99px;
  padding: 12px 26px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.calc-btn.btn-prev {
  background: transparent;
  color: var(--ink);
}

.calc-btn.btn-next,
.calc-btn.btn-submit {
  background: var(--primary, #2d5a27);
  border-color: var(--primary, #2d5a27);
  color: white;
}

.calc-btn.btn-next:hover,
.calc-btn.btn-submit:hover {
  background: var(--primary-hover, #1e3f1a);
  border-color: var(--primary-hover, #1e3f1a);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(45, 90, 39, 0.15);
}

.calc-btn.btn-prev:hover {
  background: rgba(23, 32, 28, 0.05);
  transform: translateY(-2px);
}

.calc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Result Screen */
.result-container {
  text-align: center;
  padding: 20px 0;
}

.result-badge {
  display: inline-block;
  background: var(--accent-light, #e8f9e6);
  color: var(--primary, #2d5a27);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 16px;
  border-radius: 30px;
  margin-bottom: 20px;
}

.price-range-display {
  margin: 25px 0;
  padding: 30px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.price-range-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #606763;
  margin-bottom: 10px;
}

.price-range-val {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 72px);
  color: var(--primary, #2d5a27);
  line-height: 1;
  font-weight: 400;
}

.price-disclaimer {
  max-width: 580px;
  margin: 20px auto 30px;
  font-size: 12px;
  color: #606763;
  line-height: 1.5;
  background: rgba(23, 32, 28, 0.03);
  padding: 14px 20px;
  border-radius: 10px;
}

.success-graphic {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--accent-light, #e8f9e6);
  color: var(--primary, #2d5a27);
  font-size: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  animation: pulseSuccess 2s infinite;
}

@keyframes pulseSuccess {
  0% { box-shadow: 0 0 0 0 rgba(142, 237, 128, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(142, 237, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(142, 237, 128, 0); }
}

.success-lead-summary {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  margin-top: 30px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.success-lead-summary h4 {
  margin: 0 0 8px 0;
  font-family: var(--serif);
  font-size: 22px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  border-bottom: 1px dashed rgba(23, 32, 28, 0.08);
  padding-bottom: 6px;
}

.summary-row span {
  color: #606763;
}

.summary-row strong {
  color: var(--ink);
}

/* Error message styling */
.calc-error-msg {
  background: #fff5f5;
  border-left: 4px solid #ff4d4d;
  color: #990000;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 15px;
  font-size: 13px;
  display: none;
}

/* Landscaping page specific styles */
.landscaping-hero {
  background: linear-gradient(135deg, rgba(232, 249, 230, 0.5) 0%, rgba(244, 252, 243, 0.5) 100%), var(--cream);
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: calc(var(--nav-height) + 60px) clamp(20px, 5vw, 40px) 60px;
}

.landscaping-hero h1 {
  font-family: var(--serif);
  color: var(--ink);
  font-size: clamp(48px, 6.5vw, 92px);
  margin-bottom: 20px;
  line-height: 0.95;
}

.landscaping-hero h1 em {
  color: var(--primary, #2d5a27);
  font-style: italic;
}

.landscaping-hero p {
  color: #4d5551;
  font-size: clamp(16px, 1.4vw, 20px);
  max-width: 680px;
  margin: 0 auto 35px;
}

.landscaping-hero .btn {
  background: var(--primary, #2d5a27);
  border-color: var(--primary, #2d5a27);
  color: white;
}

.landscaping-hero .btn:hover {
  background: var(--primary-hover, #1e3f1a);
  border-color: var(--primary-hover, #1e3f1a);
}

/* Benefits Grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.benefit-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(20px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.25s;
}

.benefit-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary, #2d5a27);
}

.benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-light, #e8f9e6);
  color: var(--primary, #2d5a27);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.benefit-card h3 {
  font-family: var(--serif);
  font-size: 24px;
  margin: 0;
  font-weight: 400;
}

.benefit-card p {
  font-size: 13px;
  color: #59605c;
  margin: 0;
  line-height: 1.4;
}

/* Landscaping simulation leads log */
.sim-leads-section {
  background: rgba(23, 32, 28, 0.02);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sim-leads-container {
  max-width: 860px;
  margin: 0 auto;
}

.sim-lead-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 15px;
}

.sim-lead-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.sim-lead-title {
  font-weight: 700;
  font-size: 14px;
}

.sim-lead-date {
  font-size: 11px;
  color: #888;
}

.sim-lead-badge {
  background: var(--accent-light, #e8f9e6);
  color: var(--primary, #2d5a27);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.sim-lead-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  font-size: 12px;
}

.sim-lead-details span {
  color: #555;
}

.sim-lead-details strong {
  color: var(--ink);
}

/* Adjustments for mobile responsive */
@media (max-width: 768px) {
  .options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .options-grid-3 {
    grid-template-columns: 1fr;
  }
  .addons-list {
    grid-template-columns: 1fr;
  }
  .yard-calculator {
    padding: 24px 16px;
    border-radius: 18px;
  }
  .price-range-display {
    padding: 20px 10px;
  }
}

@media (max-width: 480px) {
  .options-grid {
    grid-template-columns: 1fr;
  }
  .mobile-dropdown-menu {
    width: 90%;
  }
}