:root{
  color-scheme:light;
  --brand:#17B0A7; --brand-600:#0E8F87; --brand-700:#0A756E;
  --ink:#20252A; --ink-soft:#3A4148; --muted:#616C75;
  --paper:#FFFFFF; --mist:#F1FAF9; --tint:#E6F6F4; --line:#DFEBEA;
  --shadow:0 20px 60px -30px rgba(10,117,110,.4); --r:2px;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.12; letter-spacing:-.025em; font-weight:700; margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem); font-weight:800; letter-spacing:-.04em}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{width:min(1160px,92vw); margin-inline:auto}
.sec{padding:clamp(3.2rem,7vw,5.5rem) 0}
.mist{background:var(--mist)} .ink{background:var(--ink); color:#EAF1F0}
.ink h2,.ink h3{color:#fff}
.lead{font-size:1.12rem; color:var(--muted); max-width:64ch}
.ink .lead{color:#B9C6C5}
.eyebrow{color:var(--brand-600); font-weight:600; font-size:.95rem; margin:0 0 .6rem}
.ink .eyebrow{color:#54D3C9}
.prose p{max-width:70ch} .prose h2{margin-top:1.6rem} .prose h3{margin-top:1.3rem}

.btn{display:inline-flex; align-items:center; gap:.55rem; font-weight:600; font-size:1rem; padding:.85rem 1.5rem; border-radius:var(--r); cursor:pointer; border:2px solid transparent; transition:transform .15s,background .2s,color .2s,border-color .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand); color:#fff} .btn-primary:hover{background:var(--brand-600)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)} .btn-ghost:hover{border-color:var(--brand); color:var(--brand-700)}
.ink .btn-ghost,.slider .btn-ghost,.cta-band .btn-ghost{color:#fff; border-color:rgba(255,255,255,.5)} .cta-band .btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-wa{background:#25D366; color:#0a3a1f} .btn-wa:hover{background:#1fc35d}

header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.logo{display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.45rem; letter-spacing:-.04em; color:var(--ink)}
.logo .dot{width:11px; height:11px; background:var(--brand); display:inline-block; transform:translateY(1px)}
.logo small{font-size:.6rem; font-weight:500; letter-spacing:.16em; color:var(--muted); text-transform:uppercase}
.menu{display:flex; align-items:center; gap:1.5rem; list-style:none; margin:0; padding:0}
.menu a{font-weight:500; font-size:.95rem; color:var(--ink-soft); padding:.3rem 0; position:relative}
.menu a:hover,.menu a.active{color:var(--brand-700)}
.menu a.active::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--brand)}
.nav-cta{display:flex; align-items:center; gap:.7rem}
.burger{display:none; background:none; border:0; cursor:pointer; padding:.4rem; color:var(--ink)} .burger svg{width:26px; height:26px}

/* slider */
.slider{position:relative; height:min(84vh,720px); min-height:500px; overflow:hidden; background:var(--ink)}
.slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s ease}
.slide.active{opacity:1; visibility:visible}
.scene{position:absolute; inset:0; overflow:hidden}
.slide-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.slide.active .scene{animation:kenburns 8s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.12) translate3d(2%,1%,0)} to{transform:scale(1) translate3d(0,0,0)}}
.slide.active .sweep{animation:sweep 1.1s cubic-bezier(.7,0,.2,1) forwards}
.sweep{position:absolute; top:0; bottom:0; width:60%; left:-70%; background:rgba(255,255,255,.35); backdrop-filter:blur(10px); border-right:1px solid rgba(255,255,255,.6); pointer-events:none; z-index:2}
.scrim{position:absolute; inset:0; z-index:2; background:linear-gradient(90deg,rgba(15,20,22,.74),rgba(15,20,22,.45) 42%,rgba(15,20,22,.05) 75%)}
.slide-content{position:relative; z-index:3; height:100%; display:flex; align-items:center}
.glass-panel{max-width:620px; padding:2.2rem; background:rgba(20,28,30,.3); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px)}
.slide .eyebrow{color:#8FEDE4}
.slide h2{color:#fff; font-size:clamp(2rem,4.6vw,3.2rem); font-weight:800; letter-spacing:-.035em; margin-bottom:.5rem}
.slide .lead{color:#DDECEA; max-width:46ch}
.slide-content .row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem}
.s-arrows{position:absolute; z-index:5; bottom:1.5rem; right:4vw; display:flex; gap:.5rem}
.s-arrows button{width:48px; height:48px; border:1px solid rgba(255,255,255,.45); background:rgba(20,28,30,.35); color:#fff; cursor:pointer; display:grid; place-items:center} .s-arrows button:hover{background:var(--brand)} .s-arrows svg{width:20px;height:20px}
.s-dots{position:absolute; z-index:5; bottom:2.1rem; left:4vw; display:flex; gap:.5rem}
.s-dots button{width:34px; height:4px; border:0; background:rgba(255,255,255,.35); cursor:pointer; padding:0} .s-dots button.active{background:#fff}
.s-badges{position:absolute; z-index:5; top:1.6rem; left:4vw; display:flex; gap:.5rem; flex-wrap:wrap}
.s-badges span{font-size:.8rem; font-weight:500; color:#fff; background:rgba(20,28,30,.4); border:1px solid rgba(255,255,255,.3); padding:.32rem .75rem}
@media (prefers-reduced-motion:reduce){.slide.active .scene{animation:none}.slide.active .sweep{display:none}.slide{transition:opacity .3s}}

.page-hero{padding:clamp(2.6rem,6vw,4rem) 0 clamp(1.6rem,3vw,2.6rem)}
.crumb{font-size:.85rem; color:var(--muted); margin-bottom:.6rem}
.crumb a{color:var(--brand-700)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.2rem}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; transition:box-shadow .2s,transform .2s,border-color .2s}
.card:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--brand)}
.card .ic{width:46px; height:46px; background:var(--tint); color:var(--brand-700); display:grid; place-items:center; margin-bottom:1rem} .card .ic svg{width:24px;height:24px}
.card h3{margin-bottom:.4rem} .card p{font-size:.96rem; color:var(--muted); margin-bottom:.9rem} .card .more{color:var(--brand-700); font-weight:600; font-size:.92rem}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center}
.benefits{list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.75rem}
.benefits li{display:flex; gap:.7rem; align-items:flex-start; font-weight:500}
.benefits .tick{flex:0 0 auto; width:22px; height:22px; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:.8rem; margin-top:.2rem}
.frame{position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); background:var(--ink)}
.frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

.chips{list-style:none; padding:0; margin:1rem 0; display:grid; gap:.6rem}
.chips li{padding-left:1.6rem; position:relative} .chips li::before{content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; background:var(--brand)}
.aside{background:var(--mist); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; position:sticky; top:92px} .aside h3{margin-bottom:.6rem}
.service-body{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,3.5rem); align-items:start}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.2rem; counter-reset:s}
.step{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:1.5rem}
.step .n{counter-increment:s; font-size:.9rem; font-weight:700; color:#54D3C9; margin-bottom:.6rem} .step .n::before{content:"0" counter(s)}
.step h3{font-size:1.05rem} .step p{font-size:.92rem; color:#B9C6C5; margin:0}

.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem}
.quote{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem}
.quote .stars{color:#F5B301; letter-spacing:2px; font-size:.95rem} .quote p{font-size:.97rem; margin:.7rem 0 1rem}
.quote .who{font-weight:600; font-size:.92rem} .quote .who span{display:block; font-weight:400; color:var(--muted); font-size:.82rem}

/* gallery */
.filter{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.6rem 0}
.filter button{font:inherit; font-size:.9rem; font-weight:500; padding:.5rem 1rem; border:1px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; border-radius:var(--r)}
.filter button.active{background:var(--ink); color:#fff; border-color:var(--ink)}
.grid{columns:4; column-gap:12px}
.grid .tile{break-inside:avoid; margin:0 0 12px; width:100%; padding:0; border:0; cursor:pointer; display:block; background:var(--ink); position:relative; overflow:hidden}
.grid .tile img{width:100%; display:block; transition:transform .4s ease}
.grid .tile:hover img{transform:scale(1.05)}
.grid .tile.hide{display:none}
@media (max-width:1000px){.grid{columns:3}}
@media (max-width:700px){.grid{columns:2}}
.lightbox{position:fixed; inset:0; z-index:100; background:rgba(10,14,16,.92); display:none; align-items:center; justify-content:center; padding:4vw}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw; max-height:88vh; object-fit:contain; border:1px solid rgba(255,255,255,.15)}
.lightbox .x{position:absolute; top:18px; right:22px; color:#fff; font-size:2rem; background:none; border:0; cursor:pointer; line-height:1}
.lightbox .nav-b{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff; width:52px; height:52px; cursor:pointer; font-size:1.4rem}
.lightbox .prev{left:3vw} .lightbox .next{right:3vw}

.faq{margin-top:1rem; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line); padding:.2rem 0}
.faq summary{cursor:pointer; font-weight:600; padding:1rem 0; list-style:none; display:flex; justify-content:space-between; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--brand); font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted); padding-bottom:1rem; margin:0; max-width:72ch}

.areas{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem}
.areas span{font-size:.86rem; background:var(--tint); border:1px solid var(--line); padding:.35rem .8rem; color:var(--brand-700)}

.cta-band{background:linear-gradient(120deg,var(--brand),var(--brand-700)); color:#fff; padding:clamp(2.2rem,5vw,3.4rem); text-align:center}
.cta-band h2{color:#fff} .cta-band .lead{color:#E5FBF9; margin-inline:auto; margin-bottom:1.6rem} .cta-band .row{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

.form{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem; box-shadow:var(--shadow)}
.field{margin-bottom:1rem} .field label{display:block; font-weight:500; font-size:.9rem; margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%; padding:.75rem .9rem; border:1px solid var(--line); border-radius:var(--r); font:inherit; background:#fff; color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brand); border-color:var(--brand)} .field textarea{min-height:110px; resize:vertical}
.form-note{font-size:.82rem; color:var(--muted); margin-top:.4rem}

.stub{min-height:52vh; display:grid; place-items:center; text-align:center; padding:3rem 0}
.stub .badge{display:inline-block; font-size:.8rem; font-weight:600; color:var(--brand-700); background:var(--tint); border:1px solid var(--line); padding:.35rem .9rem; margin-bottom:1rem}

footer{background:var(--ink); color:#B9C6C5; padding:clamp(2.6rem,6vw,3.6rem) 0 2rem}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2rem}
footer h4{color:#fff; font-size:1rem; margin-bottom:.9rem} footer a{color:#B9C6C5} footer a:hover{color:#fff}
.foot-list{list-style:none; padding:0; margin:0; display:grid; gap:.5rem; font-size:.94rem}
.foot-note{border-top:1px solid rgba(255,255,255,.12); margin-top:2rem; padding-top:1.4rem; font-size:.86rem; color:#8797A0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem}
.foot-focus{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:.9rem 1.1rem; font-size:.88rem; margin-top:1rem}

.wa-float{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:60; width:56px; height:56px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 10px 30px -8px rgba(37,211,102,.6); color:#fff} .wa-float svg{width:30px;height:30px}

@media (max-width:900px){.split,.service-body{grid-template-columns:1fr}.cards,.quotes,.steps{grid-template-columns:1fr 1fr}.foot-grid{grid-template-columns:1fr 1fr}.aside{position:static}}
@media (max-width:620px){
 .menu{position:fixed; inset:0 0 0 auto; width:min(80vw,320px); background:#fff; flex-direction:column; align-items:flex-start; gap:.3rem; padding:6rem 1.6rem 2rem; transform:translateX(100%); transition:transform .25s; box-shadow:-20px 0 60px -30px rgba(0,0,0,.5); z-index:55}
 .menu.open{transform:none} .menu a{font-size:1.1rem; padding:.6rem 0; width:100%} .burger{display:block; z-index:56} .nav-cta .btn{display:none}
 .cards,.quotes,.steps,.foot-grid{grid-template-columns:1fr} .s-arrows{display:none} .slider{height:min(78vh,600px)}
 .m-scrim{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:54; display:none} .m-scrim.show{display:block}
}

/* clean cinematic hero */
.logo img{height:40px; width:auto; display:block}
.slide-content{align-items:center}
.scrim{background:linear-gradient(90deg,rgba(12,16,18,.66),rgba(12,16,18,.30) 55%,rgba(12,16,18,0) 85%),linear-gradient(0deg,rgba(12,16,18,.60),rgba(12,16,18,0) 45%)}
.hero-copy{max-width:660px; color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero-copy .eyebrow{color:#9FF0E8; letter-spacing:.02em}
.hero-copy h2{font-weight:700}
.hero-copy .lead{color:#EDF6F4; max-width:48ch}
.hero-copy .row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.5rem}
.film-tabs{position:absolute; z-index:5; left:0; right:0; bottom:0; display:flex; background:rgba(12,16,18,.42); backdrop-filter:blur(8px); border-top:1px solid rgba(255,255,255,.16)}
.film-tabs button{flex:1; background:none; border:0; border-right:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.75); font:inherit; font-size:.92rem; font-weight:500; padding:1rem .6rem; cursor:pointer; position:relative; transition:color .2s,background .2s; text-align:center}
.film-tabs button:last-child{border-right:0}
.film-tabs button:hover{color:#fff; background:rgba(255,255,255,.06)}
.film-tabs button.active{color:#fff; background:rgba(255,255,255,.05)}
.film-tabs button.active::after{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--brand)}
.film-tabs .tp{display:block;font-size:.68rem;color:#8FEDE4;font-weight:600;margin-bottom:.15rem;text-transform:uppercase;letter-spacing:.14em}
.s-arrows{bottom:5.2rem}
.filmtypes{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.4rem}
.filmtypes .ft{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.filmtypes .ft img{width:100%;aspect-ratio:16/10;object-fit:cover}
.filmtypes .ft .b{padding:.8rem 1rem}
.filmtypes .ft h4{margin:0 0 .2rem;font-size:1rem}
.filmtypes .ft p{margin:0;font-size:.85rem;color:var(--muted)}
.figure{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:1rem}
.figure img{width:100%;display:block}
.figure figcaption{font-size:.85rem;color:var(--muted);padding:.7rem 1rem;background:var(--mist)}
@media (max-width:900px){.filmtypes{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.film-tabs{flex-wrap:wrap}.film-tabs button{flex:1 1 33.3%; font-size:.8rem; padding:.7rem .3rem} .film-tabs .tp{display:none} .s-arrows{display:none}}


/* --- more Froston teal + layout tweaks --- */
:root{--mist:#E3F5F2}
.logo img{height:52px}
footer .logo img{height:52px !important}
.brandwash{background:linear-gradient(135deg,#EAF8F6 0%,#D3F0EC 100%)}
.assure{background:linear-gradient(120deg,var(--brand),var(--brand-700)); color:#fff}
.assure .wrap{display:flex; flex-wrap:wrap; gap:.8rem 2.4rem; justify-content:center; padding:1.05rem 0; text-align:center}
.assure span{font-weight:500; font-size:.95rem; display:inline-flex; align-items:center; gap:.5rem}
.assure svg{width:18px; height:18px; opacity:.95}
.prod3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.prod3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.prod3{grid-template-columns:1fr}}


/* === Froston teal background system (brand-forward) === */
:root{--mist:#D9F1ED}
body{background:#E7F6F4; color:var(--ink)}
.aside{background:#CFEDE7}
.ink{background:linear-gradient(150deg,#12938A 0%,#0A6A63 55%,#084F49 100%); color:#EAFBF9}
.slider{background:#0A6A63}
.step{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16)}
.step p{color:#CFEAE6}
footer{background:linear-gradient(150deg,#12938A 0%,#0A6A63 55%,#083F3A 100%); color:#D6ECE9}
footer a{color:#D6ECE9} footer a:hover{color:#fff}
.foot-list a{color:#D6ECE9}
.foot-note{color:#A7DAD3; border-top-color:rgba(255,255,255,.20)}
.foot-focus{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18)}
/* keep content surfaces white so they pop on teal */
.card,.quote,.form,.frame,.filmtypes .ft{background:#fff}

/* ===== batch: galleries, logo, motion, reviews marquee, forms ===== */
/* standard 3-across landscape gallery */
.grid{columns:auto !important; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.grid .tile{margin:0; aspect-ratio:3/2; position:relative; overflow:hidden; border:0; padding:0; cursor:pointer; background:#0A6A63}
.grid .tile img{width:100%; height:100%; object-fit:cover; transition:transform .55s ease; display:block}
.grid .tile::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(23,176,167,0),rgba(10,106,99,.5)); opacity:0; transition:opacity .35s}
.grid .tile::before{content:"View"; position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9); color:#fff; font-weight:600; font-size:.9rem; letter-spacing:.05em; opacity:0; transition:opacity .35s, transform .35s; pointer-events:none}
.grid .tile:hover img{transform:scale(1.08)}
.grid .tile:hover::after{opacity:1}
.grid .tile:hover::before{opacity:1; transform:translate(-50%,-50%) scale(1)}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
/* image hover motion */
.frame{overflow:hidden}
.frame img{transition:transform .6s ease}
.frame:hover img{transform:scale(1.05)}
.filmtypes .ft{overflow:hidden}
.filmtypes .ft img{transition:transform .55s ease}
.filmtypes .ft:hover img{transform:scale(1.06)}
/* logo 1.5x bigger + taller header */
.nav{height:104px}
.logo img{height:78px}
footer .logo img{height:78px !important}
html{scroll-padding-top:112px}
.aside{top:120px}
@media (max-width:620px){.nav{height:82px}.logo img{height:58px}}
/* hero: extra motion */
.slide.active .hero-copy{animation:heroUp 1s .12s both cubic-bezier(.2,.7,.2,1)}
@keyframes heroUp{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
.slide.active .scene{animation:kenburns 9.5s ease-out forwards}
.scrollcue{position:absolute; left:50%; bottom:6.2rem; transform:translateX(-50%); z-index:5; width:26px; height:42px; border:2px solid rgba(255,255,255,.65); border-radius:14px; display:flex; justify-content:center; padding-top:7px}
.scrollcue span{width:4px; height:8px; background:#fff; border-radius:2px; animation:scrolldot 1.6s infinite}
@keyframes scrolldot{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%{opacity:0;transform:translateY(10px)}}
@media (max-width:620px){.scrollcue{display:none}}
/* reviews marquee */
.quotes{display:flex !important; grid-template-columns:none !important; flex-wrap:nowrap; overflow:hidden; gap:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rev-track{display:flex; gap:1.2rem; width:max-content; animation:revmarq 48s linear infinite}
.quotes:hover .rev-track{animation-play-state:paused}
.rev-track .quote{flex:0 0 min(360px,82vw); white-space:normal}
@keyframes revmarq{from{transform:translateX(-50%)} to{transform:translateX(0)}}
.rev-more{display:flex; justify-content:center; margin-top:1.8rem}
.rev-google{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--brand-700); background:#fff; border:1px solid var(--line); padding:.75rem 1.3rem; border-radius:var(--r)}
.rev-google:hover{border-color:var(--brand)}

/* section backgrounds */
.bg-white{background:#fff}
.bg-brand{background:var(--brand)}
.bg-brand .eyebrow{color:#D2F7F3}
.bg-brand h2{color:#fff}
.bg-brand .lead{color:#EAFBF9}
/* hover wave + gradient overlay on static images (not gallery) */
.frame{position:relative; overflow:hidden}
.frame img{transition:transform .6s ease}
.frame:hover img{transform:scale(1.05)}
.frame::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .55s ease; background:linear-gradient(160deg, rgba(23,176,167,0) 22%, rgba(14,143,135,.34) 68%, rgba(10,106,99,.62) 100%)}
.frame:hover::after{opacity:1}
.frame::before{content:""; position:absolute; z-index:3; top:-10%; bottom:-10%; left:-60%; width:45%; pointer-events:none; background:linear-gradient(105deg, transparent, rgba(255,255,255,.42), transparent); transform:skewX(-12deg); opacity:0}
.frame:hover::before{animation:framesheen .95s ease forwards}
@keyframes framesheen{0%{left:-60%; opacity:0}18%{opacity:1}100%{left:135%; opacity:0}}

/* deter casual image copying (screenshots can't be blocked on web) */
img{-webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; user-drag:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; pointer-events:auto}
.grid .tile, .frame, .filmtypes .ft{ -webkit-touch-callout:none }
/* van brand band */
.vanband{position:relative; overflow:hidden; background:#0A6A63}
.vanband img{width:100%; display:block; max-height:520px; object-fit:cover}
.vanband-cap{position:absolute; inset:0; display:flex; align-items:center; background:linear-gradient(90deg,rgba(8,18,20,.66),rgba(8,18,20,.2) 55%,transparent)}
@media (max-width:620px){.vanband img{max-height:360px}.vanband-cap{background:linear-gradient(0deg,rgba(8,18,20,.78),rgba(8,18,20,.15))}}

/* tighten form height a touch */
.form{padding:1.4rem}
.form .field{margin-bottom:.65rem}
.form .field label{margin-bottom:.22rem; font-size:.85rem}
.form .field input,.form .field select,.form .field textarea{padding:.6rem .85rem}
.form .field textarea{min-height:74px}
.form .btn{padding:.72rem 1.5rem}

/* image + form on the same level (equal height, centred image) */
.formsplit{align-items:stretch}
.formsplit .frame{height:100%; aspect-ratio:auto; min-height:420px}
.formsplit .frame img{object-position:center}
@media (max-width:900px){.formsplit .frame{height:auto; aspect-ratio:4/5; min-height:0}}

/* footer -> dark grey, drop faint white outline */
footer{background:linear-gradient(150deg,#2A2F34 0%,#20242A 60%,#181B1F 100%)}
footer, footer a, .foot-list a{color:#C4CBD0}
footer a:hover{color:#fff}
footer h4{color:#fff}
.foot-note{color:#8A9299; border-top-color:rgba(255,255,255,.12)}
.foot-focus{border:none; background:rgba(255,255,255,.05)}

/* tick strip -> light grey (breaks teal monotony), teal ticks */
.assure{background:#ECEFEF}
.assure span{color:#39424A}
.assure svg{stroke:var(--brand)}
/* mobile & tablet: drop the repeated "Four ways" cards (What we offer covers them) */
@media (max-width:900px){.fourways{display:none}}

/* HARD hide of repeated Four-ways cards on mobile/tablet */
.fourcol{grid-template-columns:repeat(3,1fr)}
@media (min-width:901px){.sec.fourways .fourcol{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){.sec.fourways{display:none !important}}

/* mobile menu: solid panel + readable chip under each item */
@media (max-width:620px){
  .menu{background:#fff !important; -webkit-backdrop-filter:none; backdrop-filter:none;
        width:min(86vw,340px); gap:.55rem;
        padding:calc(92px + env(safe-area-inset-top,0px)) 1.1rem 2rem;
        border-left:1px solid var(--line)}
  .menu a{width:100%; padding:.85rem 1rem; border-radius:10px; background:#EEF3F2;
          color:var(--ink) !important; font-weight:600; font-size:1.05rem}
  .menu a::after{display:none !important}
  .menu a.active{background:var(--brand); color:#fff !important}
}

/* FIX: scrim must sit BELOW the header/menu so mobile menu items are tappable */
.m-scrim{z-index:40}
@media (max-width:620px){ .menu{z-index:60} header{z-index:55} }

/* ===== full-screen mobile menu (SurfaceOn style) ===== */
.menu-close{display:none; position:fixed; top:calc(1.1rem + env(safe-area-inset-top,0px)); right:1.1rem;
  z-index:80; width:48px; height:48px; border:0; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.16); border-radius:50%; place-items:center}
.menu-close svg{width:24px; height:24px}
@media (max-width:900px){
  .burger{display:block; z-index:70}
  .nav-cta .btn{display:none}
  .menu{position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; margin:0; padding:5rem 1.5rem;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; list-style:none;
    background:linear-gradient(160deg,#12938A 0%,#0A6A63 55%,#084F49 100%);
    transform:none !important; opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .32s ease, visibility .32s ease; z-index:66; box-shadow:none; border:0;
    -webkit-backdrop-filter:none; backdrop-filter:none; overflow-y:auto}
  .menu.open{opacity:1; visibility:visible; pointer-events:auto}
  .menu li{list-style:none; width:100%; text-align:center; opacity:0; transform:translateY(16px);
    transition:opacity .45s ease, transform .45s ease}
  .menu.open li{opacity:1; transform:none}
  .menu.open li:nth-child(1){transition-delay:.05s}
  .menu.open li:nth-child(2){transition-delay:.09s}
  .menu.open li:nth-child(3){transition-delay:.13s}
  .menu.open li:nth-child(4){transition-delay:.17s}
  .menu.open li:nth-child(5){transition-delay:.21s}
  .menu.open li:nth-child(6){transition-delay:.25s}
  .menu.open li:nth-child(7){transition-delay:.29s}
  .menu.open li:nth-child(8){transition-delay:.33s}
  .menu a{display:inline-block; width:auto; background:none !important; color:#fff !important;
    font-size:clamp(1.5rem,6.5vw,2.1rem); font-weight:600; letter-spacing:-.02em; padding:.5rem 1rem; border-radius:0}
  .menu a::after{display:none !important}
  .menu a.active{color:#8FEDE4 !important; background:none !important}
  body.menu-open{overflow:hidden}
  body.menu-open header{z-index:66; background:transparent !important; border-bottom:0; -webkit-backdrop-filter:none; backdrop-filter:none}
  body.menu-open .logo{visibility:hidden}
  body.menu-open .burger{display:none}
  body.menu-open .wa-float{display:none}
  body.menu-open .menu-close{display:grid}
}

/* FIX: force teal overlay bg (beats the old chip !important white) */
@media (max-width:900px){
  .menu{background:linear-gradient(160deg,#12938A 0%,#0A6A63 55%,#084F49 100%) !important}
  .menu a{color:#fff !important}
  .menu a.active{color:#8FEDE4 !important}
}

/* --- footer: Froston -> SurfaceOn subsidiary handoff --- */
:root{--so-gold:#E5BE55}
.foot-family{border-left:2px solid var(--so-gold) !important}
.foot-family p{margin:0}
.foot-family .ff-line{color:#fff; font-weight:600; font-size:.98rem; margin-bottom:.35rem}
.foot-family .on-teal{color:var(--brand); font-weight:700}
.foot-family .on-gold{color:var(--so-gold); font-weight:700}
.foot-family .ff-text{color:#C4CBD0; margin-bottom:.7rem}
.foot-family .ff-text strong{color:#fff; font-weight:600}
footer .foot-family .ff-link{display:inline-flex; align-items:center; gap:.4rem; color:var(--so-gold); font-weight:600; border-bottom:1px solid transparent; transition:border-color .2s}
footer .foot-family .ff-link:hover{color:var(--so-gold); border-bottom-color:var(--so-gold)}
.foot-family .ff-link span{transition:transform .2s}
.foot-family .ff-link:hover span{transform:translateX(4px)}