:root { --sage:#7f9295; --sage-dark:#62777a; --ink:#1d292a; --muted:#657173; --mist:#f3f6f5; --line:#dbe3e2; --white:#fff; --heading:"Playfair Display", Georgia, serif; --body:"DM Sans", Arial, sans-serif; --header:82px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--header); }
body { margin:0; color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.65; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button,input { font:inherit; }
:focus-visible { outline:3px solid rgba(127,146,149,.65); outline-offset:4px; }
.site-header { position:fixed; inset:0 0 auto; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:var(--header); padding:0 clamp(22px,5vw,76px); background:var(--sage); color:var(--white); border-bottom:1px solid rgba(255,255,255,.18); }
.brand { grid-column:2; display:flex; align-items:center; justify-content:center; width:min(290px,31vw); height:var(--header); }
.brand img { width:100%; height:72px; object-fit:contain; }
.desktop-nav { display:flex; align-items:center; gap:clamp(20px,3vw,38px); font-size:.86rem; font-weight:700; }
.desktop-nav--left { grid-column:1; justify-self:start; }
.desktop-nav--right { grid-column:3; justify-self:end; }
.desktop-nav a { position:relative; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:currentColor; transform:scaleX(0); transition:transform .2s ease; }
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after { transform:scaleX(1); }
.menu-button,.mobile-menu { display:none; }
.hero { min-height:100svh; display:grid; place-items:center; padding:calc(var(--header) + 56px) 24px 72px; text-align:center; color:var(--white); background:linear-gradient(rgba(30,46,47,.35),rgba(30,46,47,.35)),url("hero.png") center/cover no-repeat; }
.hero__content { width:min(820px,100%); }
.kicker { margin:0 0 15px; color:var(--sage-dark); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.kicker--light { color:rgba(255,255,255,.8); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--heading); font-weight:600; line-height:1.1; }
h1 { margin-bottom:22px; font-size:clamp(3rem,7vw,6.15rem); }
h1 span { display:block; }
h2 { margin-bottom:20px; font-size:clamp(2.35rem,5vw,4.35rem); }
h3 { margin-bottom:12px; font-size:1.45rem; }
.hero__copy { width:min(600px,100%); margin:0 auto 34px; color:rgba(255,255,255,.9); font-size:1.1rem; }
.button { display:inline-flex; min-height:54px; align-items:center; justify-content:center; padding:13px 26px; border:1px solid transparent; border-radius:2px; cursor:pointer; font-weight:700; transition:transform .2s ease,background .2s ease; }
.button:hover { transform:translateY(-2px); }
.button--light { background:var(--white); color:var(--ink); }
.button--primary { width:100%; color:var(--white); background:var(--sage); }
.button--primary:hover { background:var(--sage-dark); }
.section { padding:clamp(80px,10vw,140px) 24px; }
.section--mist { background:var(--mist); }
.container { width:min(1160px,100%); margin:auto; }
.section-heading { width:min(720px,100%); margin:0 auto 54px; text-align:center; }
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service { min-height:285px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white); }
.service__number { display:block; margin-bottom:56px; color:var(--sage); font-size:.75rem; font-weight:700; }
.service p,.contact__copy p,.about__copy p { color:var(--muted); }
.rating { display:flex; justify-content:center; align-items:center; gap:14px; margin:-20px 0 43px; }
.rating__score { font-family:var(--heading); font-size:2.55rem; line-height:1; }
.rating__stars,.review__stars { margin:0; color:var(--sage-dark); letter-spacing:.12em; }
.rating__label { color:var(--muted); font-weight:700; }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review { padding:30px; background:var(--white); border:1px solid var(--line); }
.review--summary { display:flex; min-height:220px; flex-direction:column; justify-content:center; background:var(--sage); color:var(--white); }
.review--summary h3 { margin:18px 0 12px; }
.review--summary > p:last-child { margin:0; color:rgba(255,255,255,.86); }
.review--summary .review__stars { color:var(--white); }
.review__meta { display:flex; align-items:center; gap:13px; margin-bottom:23px; }
.review__avatar { display:grid; place-items:center; width:43px; height:43px; border-radius:50%; background:var(--sage); color:var(--white); font-weight:700; }
.review__meta h3 { margin:0; font-family:var(--body); font-size:.95rem; }
.review__meta p { margin:0; color:var(--muted); font-size:.83rem; }
blockquote { margin:18px 0 0; color:var(--muted); }
.contact__grid { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:clamp(44px,9vw,130px); }
.contact__copy { max-width:490px; }
.contact-details { display:grid; gap:0; background:var(--mist); }
.contact-detail { display:grid; gap:3px; padding:21px 25px; border-bottom:1px solid var(--line); transition:background .2s ease; }
.contact-detail:hover { background:#e8efee; }
.contact-detail span { color:var(--sage-dark); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.contact-detail strong { font-size:1.05rem; line-height:1.45; }
.contact-details .button { margin:25px; width:calc(100% - 50px); }
.about { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(46px,8vw,118px); }
.about__image { min-height:485px; background:url("about.jpeg") center/cover no-repeat; }
.about__copy { max-width:510px; }
.site-footer { padding:30px 24px; background:var(--sage); color:var(--white); text-align:center; }
.site-footer p { display:flex; justify-content:center; gap:16px; margin:0; }
.site-footer span { opacity:.82; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }
.reveal.is-visible { opacity:1; transform:none; }
@media (max-width:900px) { .services-grid{grid-template-columns:repeat(2,1fr)} .reviews-grid{grid-template-columns:1fr} .contact__grid,.about{grid-template-columns:1fr} .about__image{min-height:380px} }
@media (max-width:700px) { :root{--header:70px} .site-header{padding:0 18px} .brand{width:min(210px,55vw)} .brand img{height:60px} .desktop-nav{display:none} .menu-button{grid-column:3;justify-self:end;display:block;width:44px;height:44px;padding:8px;border:0;background:transparent;color:var(--white)} .menu-button span{display:block;width:24px;height:2px;margin:5px auto;background:currentColor;transition:transform .2s,opacity .2s} .menu-button.is-open span:first-child{transform:translateY(7px) rotate(45deg)} .menu-button.is-open span:nth-child(2){opacity:0} .menu-button.is-open span:last-child{transform:translateY(-7px) rotate(-45deg)} .mobile-menu{position:fixed;z-index:9;top:var(--header);left:0;right:0;padding:20px;background:var(--white);border-bottom:1px solid var(--line);transform:translateY(-110%);opacity:0;pointer-events:none;transition:transform .2s ease,opacity .2s ease} .mobile-menu.is-open{display:grid;gap:2px;transform:none;opacity:1;pointer-events:auto} .mobile-menu a{padding:12px 4px;font-weight:700} .hero{min-height:92svh} h1{font-size:clamp(2.8rem,13vw,4.4rem)} .section{padding:78px 20px} .section-heading{margin-bottom:40px} .services-grid{grid-template-columns:1fr} .service{min-height:230px} .service__number{margin-bottom:32px} .rating{display:grid;gap:6px;text-align:center} .site-footer p{display:grid;gap:2px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} }