*{box-sizing:border-box;}
html,body{margin:0;background:oklch(0.99 0.003 262);color:oklch(0.18 0.012 262);font-family:'Geist',-apple-system,sans-serif;}
a{color:oklch(0.7 0.14 264);}
body.dyslexia{font-family:'Lexend',sans-serif !important;}
body.dyslexia *{font-family:'Lexend',sans-serif !important;}

/* grain overlay */
#site-grain{position:fixed;inset:-10%;width:120%;height:120%;pointer-events:none;z-index:2;opacity:0.04;background-size:120px 120px;mix-blend-mode:multiply;animation:grainShift 8s steps(2) infinite alternate;}
@keyframes grainShift{0%{transform:translate(0,0)}100%{transform:translate(-2%,-2%)}}
@keyframes kenBurns{0%{transform:scale(1)}100%{transform:scale(1.09)}}
.kb-zoom{animation:kenBurns 22s cubic-bezier(0.22,1,0.36,1) forwards;}
@media (prefers-reduced-motion: reduce){
  .kb-zoom{animation:none !important;}
  #site-grain{animation:none !important;}
}

/* header / nav */
.site-header{position:sticky;top:0;left:0;right:0;z-index:800;background:oklch(0.99 0.003 262 / 0.92);backdrop-filter:blur(14px);border-bottom:1px solid oklch(0 0 0 / 0.08);}
.header-inner{max-width:1440px;margin:0 auto;padding:14px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.brand-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg, oklch(0.58 0.19 264), oklch(0.4 0.15 264));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-mark span{font-weight:800;color:oklch(0.99 0.003 262);font-size:17px;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text .name{font-weight:700;font-size:17px;letter-spacing:0.02em;color:oklch(0.15 0.01 262);}
.brand-text .sub{font-weight:400;font-size:11px;letter-spacing:0.08em;color:oklch(0.48 0.012 262);text-transform:uppercase;}

.main-nav{display:flex;align-items:center;gap:22px;justify-self:center;}
.main-nav .nav-link{font-size:14.5px;font-weight:500;color:oklch(0.25 0.012 262);text-decoration:none;padding-bottom:3px;background-repeat:no-repeat;background-position:left bottom;background-size:0% 2px;background-image:linear-gradient(oklch(0.52 0.18 264), oklch(0.52 0.18 264));transition:background-size .35s ease, color .25s ease;}
.main-nav .nav-link:hover,.main-nav .nav-link.active{background-size:100% 2px;}
.main-nav .nav-link.active{font-weight:700;color:oklch(0.15 0.01 262);}

.header-actions{display:flex;align-items:center;gap:8px;justify-self:end;flex-shrink:1;min-width:0;}
.phone-link{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:oklch(0.25 0.012 262);text-decoration:none;white-space:nowrap;overflow:hidden;}
.icon-btn{width:34px;height:34px;border-radius:9px;border:none;background:transparent;color:oklch(0.35 0.012 262);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .25s ease, color .25s ease, transform .2s ease;}
.icon-btn:hover{background:oklch(0.94 0.012 262);color:oklch(0.42 0.17 264);transform:scale(1.08);}
.btn-pill{font-weight:600;font-size:14px;color:oklch(0.99 0.003 262);background:oklch(0.52 0.18 264);box-shadow:0 4px 14px oklch(0.52 0.18 264 / 0.25);padding:10px 18px;border-radius:100px;text-decoration:none;white-space:nowrap;flex-shrink:0;border:none;cursor:pointer;transition:transform .3s ease, box-shadow .3s ease;display:inline-block;}
.btn-pill:hover{transform:translateY(-2px);box-shadow:0 10px 30px oklch(0.52 0.18 264 / 0.35);}
.btn-pill.large{padding:17px 32px;font-size:16px;}
.btn-outline{font-weight:600;font-size:16px;color:oklch(0.96 0.004 262);border:1px solid oklch(1 0 0 / 0.25);padding:16px 30px;border-radius:100px;text-decoration:none;transition:background .3s ease, border-color .3s ease;display:inline-block;}
.btn-outline:hover{background:oklch(1 0 0 / 0.08);border-color:oklch(1 0 0 / 0.4);}
.btn-link-accent{display:inline-block;font-weight:700;font-size:15.5px;color:oklch(0.5 0.17 264);text-decoration:none;border-bottom:2px solid oklch(0.5 0.17 264 / 0.4);padding-bottom:2px;transition:border-color .25s ease;}
.btn-link-accent:hover{border-color:oklch(0.5 0.17 264);}

.hamburger-btn{width:44px;height:44px;border-radius:10px;border:none;background:oklch(0.94 0.012 262);color:oklch(0.2 0.012 262);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;justify-self:end;grid-column:3;transition:transform .2s ease;}
.hamburger-btn:hover{transform:scale(1.08);}

.mobile-only{display:none;}
.desktop-only{display:flex;}
.mobile-actions{display:none;}
@media (max-width:768px){
  .desktop-only{display:none !important;}
  .mobile-only{display:flex !important;}
  .mobile-actions{display:flex !important;align-items:center;gap:10px;justify-self:end;grid-column:3;}
  .header-inner{grid-template-columns:1fr auto;}
}
@media (max-width:1100px){
  .phone-label{display:none;}
}
@media (max-width:440px){
  .brand-text{display:none;}
  .mobile-actions .phone-label{display:none;}
}
.mobile-phone-link{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:oklch(0.25 0.012 262);text-decoration:none;white-space:nowrap;}

/* search overlay */
.search-overlay{position:fixed;top:0;left:0;right:0;background:oklch(0.99 0.003 262 / 0.98);backdrop-filter:blur(20px);z-index:900;padding:28px 24px;border-bottom:1px solid oklch(0 0 0 / 0.1);box-shadow:0 20px 50px oklch(0 0 0 / 0.1);display:none;}
.search-overlay.open{display:block;}
.search-box{max-width:760px;margin:0 auto;}
.search-row{display:flex;align-items:center;gap:12px;background:oklch(0.96 0.008 262);border:1px solid oklch(0 0 0 / 0.1);border-radius:14px;padding:14px 18px;}
.search-row input{flex:1;background:transparent;border:none;outline:none;color:oklch(0.18 0.012 262);font-family:'Geist',sans-serif;font-size:16px;}
.search-results{margin-top:14px;display:flex;flex-direction:column;gap:2px;}
.search-results a{padding:11px 14px;border-radius:10px;color:oklch(0.2 0.012 262);text-decoration:none;font-size:14.5px;}
.search-results a:hover{background:oklch(0.94 0.012 262);}

/* settings drawer */
.settings-backdrop{position:fixed;inset:0;background:oklch(0 0 0 / 0.55);z-index:940;display:none;}
.settings-backdrop.open{display:block;}
.settings-panel{position:fixed;top:0;right:0;height:100%;width:min(380px,92vw);background:oklch(1 0 0);z-index:950;box-shadow:-20px 0 60px oklch(0 0 0 / 0.18);padding:26px 24px;overflow-y:auto;transform:translateX(100%);transition:transform .3s ease;}
.settings-panel.open{transform:translateX(0);}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-top:1px solid oklch(0 0 0 / 0.08);}
.toggle-switch{width:44px;height:26px;border-radius:100px;border:none;cursor:pointer;background:oklch(0.85 0.012 262);position:relative;transition:background .25s ease;}
.toggle-switch.on{background:oklch(0.52 0.18 264);}
.toggle-switch .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:oklch(0.98 0 0);transition:left .25s ease;}
.toggle-switch.on .knob{left:21px;}
.settings-select{background:oklch(0.96 0.008 262);border:1px solid oklch(0 0 0 / 0.12);border-radius:8px;padding:9px 10px;color:oklch(0.2 0.012 262);font-size:14px;width:100%;}

/* mobile drawer (inside nav) */
.drawer-backdrop{position:fixed;inset:0;background:oklch(0 0 0 / 0.6);z-index:945;display:none;}
.drawer-backdrop.open{display:block;}
.mobile-drawer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:950;background:oklch(1 0 0);overflow-y:auto;transform:translateX(100%);transition:transform .3s ease;}
.mobile-drawer.open{transform:translateX(0);}
.mobile-drawer-inner{max-width:440px;margin:0 auto;padding:24px 24px 60px;display:flex;flex-direction:column;gap:6px;}
.mobile-drawer .drawer-nav-link{font-size:22px;font-weight:600;color:oklch(0.18 0.012 262);text-decoration:none;padding:14px 4px;border-bottom:1px solid oklch(0 0 0 / 0.08);}
.mobile-drawer .drawer-nav-link.active{color:oklch(0.42 0.17 264);}
.drawer-contact a{display:flex;align-items:center;gap:12px;padding:14px 4px;color:oklch(0.2 0.012 262);text-decoration:none;font-size:15.5px;border-bottom:1px solid oklch(0 0 0 / 0.08);}

/* card & content hover effects */
.card{background:oklch(0.97 0.006 262);border:1px solid oklch(0 0 0 / 0.06);border-radius:16px;padding:28px 24px;box-shadow:0 1px 3px oklch(0 0 0 / 0.04);transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 32px oklch(0 0 0 / 0.1);border-color:oklch(0.52 0.18 264 / 0.5);}
.service-card{text-decoration:none;color:inherit;display:flex;flex-direction:column;background:oklch(0.97 0.006 262);border:1px solid oklch(0 0 0 / 0.06);border-radius:18px;overflow:hidden;box-shadow:0 1px 3px oklch(0 0 0 / 0.04);transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
.service-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px oklch(0 0 0 / 0.14);border-color:oklch(0.52 0.18 264 / 0.6);}
.service-card .img-wrap{width:100%;aspect-ratio:4/3;overflow:hidden;}
.service-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;display:block;}
.service-card:hover img{transform:scale(1.06);}
.service-card .learn-more span{display:inline-block;transition:transform .3s ease;}
.service-card:hover .learn-more span{transform:translateX(4px);}

.photo-hover{overflow:hidden;border-radius:20px;}
.photo-hover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease;}
.photo-hover:hover img{transform:scale(1.05);}

.contact-card{background:oklch(0.97 0.006 262);border:1px solid oklch(0 0 0 / 0.06);border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:18px;box-shadow:0 1px 3px oklch(0 0 0 / 0.04);}
.contact-icon{width:42px;height:42px;border-radius:11px;background:oklch(0.92 0.012 262);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:oklch(0.35 0.012 262);transition:transform .3s ease, color .25s ease;}
.contact-row:hover .contact-icon{transform:scale(1.1);color:oklch(0.42 0.17 264);}

.form-field{width:100%;background:oklch(0.97 0.006 262);border:1px solid oklch(0 0 0 / 0.12);border-radius:10px;padding:13px 15px;color:oklch(0.18 0.012 262);font-size:15.5px;outline:none;transition:border-color .2s ease;font-family:inherit;}
.form-field:hover,.form-field:focus{border-color:oklch(0.52 0.18 264 / 0.5);}
select.form-field{cursor:pointer;}

.testimonial-nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid oklch(0 0 0 / 0.1);background:oklch(1 0 0);color:oklch(0.3 0.012 262);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px oklch(0 0 0 / 0.1);transition:transform .25s ease, color .25s ease, border-color .25s ease;}
.testimonial-nav-btn:hover{transform:translateY(-50%) scale(1.08);color:oklch(0.42 0.17 264);border-color:oklch(0.52 0.18 264 / 0.6);}
.testimonial-nav-btn.prev{left:-20px;}
.testimonial-nav-btn.next{right:-20px;}
.testimonial-dot{width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;background:oklch(0.82 0.012 262);transition:background .3s ease, transform .25s ease;}
.testimonial-dot:hover{transform:scale(1.4);}
.testimonial-dot.active{background:oklch(0.52 0.18 264);}
.testimonial-slide{display:none;flex-direction:column;align-items:center;text-align:center;gap:16px;}
.testimonial-slide.active{display:flex;}

/* mobile-only image/text stacking order (images always on top on small screens) */
@media (max-width:640px){
  .svc-media,.about-media{order:0 !important;}
  .svc-text,.about-text{order:1 !important;}
}
.site-footer{background:oklch(0.15 0.016 262);padding:72px 24px 32px;}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:40px;}
.footer-inner h4{color:oklch(0.55 0.02 264);font-size:12px;text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin:0 0 16px;}
.footer-inner .footer-col{display:flex;flex-direction:column;gap:12px;}
.footer-link{color:oklch(0.82 0.008 262);text-decoration:none;font-size:14.5px;width:fit-content;background-repeat:no-repeat;background-position:left bottom;background-size:0% 1px;background-image:linear-gradient(oklch(0.6 0.16 264), oklch(0.6 0.16 264));transition:background-size .35s ease, color .25s ease;}
.footer-link:hover{background-size:100% 1px;color:oklch(0.97 0.004 262);}
.footer-bottom{max-width:1200px;margin:44px auto 0;padding-top:22px;border-top:1px solid oklch(1 0 0 / 0.1);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
@media (max-width:900px){
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .footer-inner{grid-template-columns:1fr;}
}

/* generic interaction polish */
button,a,input,textarea,select{transition:transform .18s ease, opacity .18s ease, box-shadow .18s ease;}
button:active,a:active{transform:scale(0.96);}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid oklch(0.52 0.18 264);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  button,a,input,textarea,select{transition:none !important;}
  button:active,a:active{transform:none !important;}
}

/* mm-drawer-fix-2026-08-04 33d7ai4j — Bug 7: #mobile-drawer (position:fixed)
   is nested inside <header class="site-header"> which has backdrop-filter:blur(14px).
   That ancestor creates a new containing block for position:fixed descendants,
   so the drawer rendered as a ~72px sliver (header height) instead of full viewport.
   Fix: remove backdrop-filter from the header element itself; move it to a ::before
   pseudo-element. Pseudo-element backdrop-filter does NOT affect the containing-block
   chain of the header's fixed descendants. Original visual is preserved. */
.site-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;position:sticky}
.site-header::before{content:'';position:absolute;inset:0;background:oklch(0.99 0.003 262 / 0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:-1;pointer-events:none}
