:root{--teal:#5FAAB2;--teal-dark:#3f8a92;--ink:#1a1a1a;--text:#333;--muted:#666;--bg:#fff;--bg-alt:#f5f5f5;--line:#e5e5e5;--max:1140px;--font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.65 var(--font);color:var(--text);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dark)}a:hover{color:var(--teal)}
h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin:1.4em 0 .5em;font-weight:700}
h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-top:0}h2{font-size:clamp(1.35rem,3vw,1.8rem)}h3{font-size:1.15rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px}.skip:focus{left:8px;z-index:99}
/* header: the original's layout — logo left, one-line menu right with OUR SERVICES as a dropdown, CONTACT/Call button; burger at 1090px like the original (mobileWidth 1090). The header row may run wider than the page's 1140px so the menu never wraps on a full-screen desktop (his 30 Oct read: "crowding on the top banner"). */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:22px;min-height:68px;max-width:1400px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;line-height:1;letter-spacing:.02em;text-transform:uppercase;font-size:.95rem;flex:none}
.brand small{font-weight:500;font-size:.7rem;color:var(--muted);letter-spacing:.12em}
.site-nav{display:flex;gap:2px;margin-left:auto;flex-wrap:nowrap;align-items:center}
.site-nav a{text-decoration:none;color:var(--ink);font-weight:600;font-size:.82rem;padding:8px 10px;border-radius:6px;white-space:nowrap;display:block}
.site-nav a:hover,.site-nav a[aria-current],.site-nav .sub.open>a{background:var(--bg-alt);color:var(--teal-dark)}
.site-nav .sub{position:relative}.site-nav .sub>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 0 3px 7px}
.site-nav .sub ul{display:none;position:absolute;top:100%;left:0;margin:0;padding:8px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.12);min-width:300px;z-index:60}
.site-nav .sub:hover ul,.site-nav .sub:focus-within ul{display:block}.site-nav .sub ul a{padding:10px 12px;font-size:.84rem}
.call{white-space:nowrap;text-decoration:none;background:var(--teal);color:#fff;font-weight:700;padding:10px 16px;border-radius:999px;font-size:.85rem;flex:none}
.call:hover{background:var(--teal-dark);color:#fff}
#nav-toggle{display:none}.nav-burger{display:none}
@media(max-width:1090px){
  .site-nav{display:none;position:absolute;left:0;right:0;top:68px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:10px 20px 16px;margin:0;max-height:calc(100vh - 68px);overflow:auto}
  #nav-toggle:checked~.site-nav{display:flex}.site-nav a{font-size:1rem;padding:12px 10px}
  .site-nav .sub>a::after{display:none}.site-nav .sub ul{display:block;position:static;border:0;box-shadow:none;padding:0 0 4px 18px;min-width:0}.site-nav .sub ul a{font-size:.95rem;padding:10px}
  .nav-burger{display:block;margin-left:auto;width:40px;height:40px;position:relative;cursor:pointer}
  .nav-burger span,.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:8px;width:24px;height:2px;background:var(--ink);top:19px}
  .nav-burger span::before{top:-8px;left:0}.nav-burger span::after{top:8px;left:0}
  .call{display:none}
}
/* hero */
.hero{background:linear-gradient(135deg,#0f2f33 0%,#1f5a60 55%,#5FAAB2 100%);color:#fff;padding:64px 0 56px}
.hero h1{color:#fff;max-width:820px}.hero .lead{font-size:1.15rem;max-width:720px;color:#e6f3f4}
/* home carousel = the original Impreza slider section (archive/html/index.html), photos only — Michael 30 Oct: "the images are the main feature", text moved BELOW the slider, no white fade. Full-viewport height (100vh minus the header and 32px), photos cover the box (fit_cover), slides MOVE sideways 1 s every 4 s (transitionType move, delay 4000; CSS keyframes, fifth slide = clone of the first so the loop is seamless). */
.hero-slider{position:relative;overflow:hidden;min-height:calc(100vh - 100px);min-height:calc(100svh - 100px);padding:0;background:#dfe9ea;box-shadow:0 3px 12px rgba(26,26,26,.18)}
.hero-slider .slides{position:absolute;inset:0;display:flex;width:500%;height:100%;animation:heroMove 16s ease-in-out infinite;will-change:transform}
.hero-slider .slides img{flex:none;width:20%;height:100%;object-fit:cover;object-position:50% 50%}
@keyframes heroMove{0%,18.75%{transform:translateX(0)}25%,43.75%{transform:translateX(-20%)}50%,68.75%{transform:translateX(-40%)}75%,93.75%{transform:translateX(-60%)}100%{transform:translateX(-80%)}}
@media (prefers-reduced-motion:reduce){.hero-slider .slides{animation:none}}
@media (max-width:600px){.hero-slider{min-height:78vh;min-height:78svh}.hero-slider .slides img{object-position:50% 38%}.hero-slider::after{background:linear-gradient(180deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 70%,rgba(255,255,255,.9) 100%)}.hero-intro{padding-bottom:20px}.hero-intro .kicker{display:none}}
/* his 30 Oct ruling: text back ON the slider but only the bottom quarter, a slight white fade under it, the top half of the photo crystal clear */
.hero-slider::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0) 52%,rgba(255,255,255,.45) 78%,rgba(255,255,255,.82) 100%)}
.hero-intro{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:center;padding:0 20px 26px}
.hero-intro h1{color:#222;margin:0 auto .3em;text-shadow:0 0 16px rgba(255,255,255,.95),0 1px 0 rgba(255,255,255,.9)}
.hero .hero-intro .kicker{color:#222;text-transform:none;letter-spacing:0;font-size:1.05rem;font-weight:700;margin:0 0 .9rem;text-shadow:0 0 12px rgba(255,255,255,.95)}
.hero-intro .cta-row{justify-content:center;margin-top:0}.hero-intro .btn{text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.hero-intro .or{font-weight:700;text-transform:uppercase;font-size:.8rem;color:#333}
.hero-intro .btn-outline{color:var(--teal-dark);border-color:var(--teal-dark);background:rgba(255,255,255,.75)}.hero-intro .btn-outline:hover{background:var(--teal-dark);color:#fff}
/* story blocks: one photo as the header of each paragraph block (his 30 Oct ask) */
.story{padding:36px 20px 8px}.story-img{margin:0 0 22px}.story-img img{width:100%;max-height:min(640px,72vh);object-fit:cover;object-position:50% 30%;border-radius:14px;display:block}
.story-img.portrait img{max-height:min(560px,70vh);object-position:50% 22%}.story-img.tall img{max-height:none}
.story-text{max-width:860px;margin:0 auto}.story-text h2{margin-top:0;text-align:center}.story-text p,.story-text li{font-size:1.02rem}.story-text ul{padding-left:1.3em}.story-text li{margin:.3em 0}.story-text .cta-row{justify-content:center}.story-text .cta-row .btn{text-transform:uppercase;letter-spacing:.04em;font-size:.9rem}
/* WHY CHOOSE SOL COAST CONSTRUCTION = its own full-width section, the original's with_img band (Untitled-design-5.jpg behind the banner) */
.banner{background:#9fc9cf url(/img/2024/06/Untitled-design-5.jpg) center/cover no-repeat;padding:56px 20px;margin-top:40px}
.banner img{display:block;width:100%;max-width:1100px;margin:0 auto;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.banner + .story{padding-top:44px}
.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;font-weight:700;color:var(--teal);margin:0 0 .6em}
.hero .kicker{color:#c8e8eb}
.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;font-weight:700;padding:13px 22px;border-radius:999px;border:2px solid var(--teal);cursor:pointer;font:inherit;font-weight:700}
.btn:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff}
.btn-outline{background:transparent;color:inherit;border-color:currentColor}.btn-outline:hover{background:rgba(255,255,255,.12);color:inherit;border-color:currentColor}
.prose .btn-outline{color:var(--teal-dark)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4em;align-items:center}
.prose .cta-row .btn{text-transform:uppercase;letter-spacing:.04em;font-size:.9rem}
/* services grid */
.services{padding:48px 20px 8px}.services h2{text-align:center}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:24px}
.card{display:block;text-decoration:none;color:var(--text);background:var(--bg-alt);border-radius:14px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card img{aspect-ratio:1/1;object-fit:cover;width:100%}.card h3{margin:16px 18px 6px;font-size:1.05rem;color:var(--ink)}.card p{margin:0 18px 18px;font-size:.92rem;color:var(--muted)}
/* prose */
.prose{padding:40px 20px 56px;max-width:860px}
.prose p,.prose li{font-size:1.02rem}.prose figure{margin:28px 0}.prose figure img{border-radius:12px;width:100%}
.prose ul,.prose ol{padding-left:1.3em}.prose li{margin:.3em 0}
.home .prose{max-width:var(--max)}
/* blog list */
.post-list{display:grid;gap:22px;margin-top:28px}
.post-card{display:grid;grid-template-columns:200px 1fr;gap:20px;text-decoration:none;color:inherit;background:var(--bg-alt);border-radius:14px;overflow:hidden;align-items:center}
.post-card img{height:100%;aspect-ratio:4/3;object-fit:cover}.post-card h2{font-size:1.15rem;margin:14px 0 6px}.post-card p{margin:0;color:var(--muted);font-size:.95rem}.post-card div{padding:14px 18px 14px 0}.post-card time{font-size:.8rem;color:var(--muted)}
@media(max-width:600px){.post-card{grid-template-columns:1fr}.post-card div{padding:0 18px 18px}}
/* contact */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;margin-top:24px}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}
.enquiry label{display:block;font-weight:600;font-size:.9rem;margin:0 0 14px}
.enquiry input,.enquiry select,.enquiry textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid #cfd8d9;border-radius:8px;font:inherit;font-size:1rem;background:#fff}
.enquiry input:focus,.enquiry textarea:focus,.enquiry select:focus{outline:2px solid var(--teal);border-color:var(--teal)}
.hp{position:absolute;left:-9999px}
.contact-grid aside{background:var(--bg-alt);border-radius:14px;padding:22px}.contact-grid aside h2{margin-top:0;font-size:1.2rem}
/* cta band + footer */
.cta-band{background:var(--bg-alt);text-align:center;padding:52px 0}.cta-band h2{margin-top:0}.cta-band .cta-row{justify-content:center}.cta-band .btn-outline{color:var(--teal-dark)}
.site-footer{background:var(--ink);color:#cfd4d4;padding:48px 0 24px;font-size:.92rem}
.site-footer a{color:#fff;text-decoration:none}.site-footer a:hover{color:var(--teal)}
.site-footer h3{color:#fff;font-size:.95rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.legal{margin-top:36px;padding-top:18px;border-top:1px solid #333;font-size:.8rem;color:#9aa}
/* reviews */
/* reviews: sideways carousel of Google reviews (scroll-snap; arrows + autoplay in build.js reviewsSection) */
.reviews{background:var(--bg-alt);padding:52px 0 56px}.reviews h2{text-align:center;margin-top:0}.rating{text-align:center;color:#333;font-weight:600;margin:0 0 24px}.rating strong{color:var(--ink)}.stars{color:#f5a623;letter-spacing:.08em}
.rev-carousel{position:relative}.rev-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 14px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.rev-card{flex:0 0 min(340px,85vw);scroll-snap-align:start;margin:0;background:#fff;border-radius:14px;padding:20px 22px;font-size:.95rem;display:flex;flex-direction:column}
.rev-card .stars{font-size:1rem;margin-bottom:8px}.rev-card p{margin:0 0 12px;flex:1;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.rev-card footer{font-weight:700;color:var(--ink);font-size:.85rem;display:flex;justify-content:space-between;align-items:center}.rev-card footer small{font-weight:500;color:var(--muted)}
.rev-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.rev-btn.prev{left:-12px}.rev-btn.next{right:-12px}.rev-btn:hover{background:var(--teal);color:#fff}
@media (max-width:600px){.rev-btn{display:none}}
.rev-cta{justify-content:center;margin-top:18px}
/* inner-page hero photo (the original's full-height with_img opener), heading + tagline under it; .page-band = About's closing parallax photo */
.page-hero{position:relative;background:#dfe9ea;box-shadow:0 3px 12px rgba(26,26,26,.18)}.page-hero img{display:block;width:100%;height:min(72vh,660px);object-fit:cover;object-position:50% 35%}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0) 52%,rgba(255,255,255,.45) 78%,rgba(255,255,255,.82) 100%)}
.page-hero-text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 20px 26px}.page-hero-text h1{color:#222;margin:0 0 .25em;text-shadow:0 0 16px rgba(255,255,255,.95),0 1px 0 rgba(255,255,255,.9)}
.tagline{font-weight:700;color:#222;font-size:1.1rem;margin:0;text-shadow:0 0 12px rgba(255,255,255,.95)}
@media (max-width:600px){.page-hero img{height:62vh}.page-hero::after{background:linear-gradient(180deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 70%,rgba(255,255,255,.9) 100%)}}
.prose .tagline{margin:-.3em 0 1.1em}
.page-band{margin-top:40px}.page-band img{display:block;width:100%;height:min(60vh,520px);object-fit:cover;object-position:50% 40%}
/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:28px 0}.gallery figure{margin:0}.gallery img{aspect-ratio:1;object-fit:cover;border-radius:10px}