/* Cougar Masonry — shared styles. Extends the approved home page design. */
:root{
  --navy:#142534;--navy-2:#1c3346;--navy-3:#0e1a26;
  --red:#ff3131;--red-ink:#d81f24;
  --white:#ffffff;--stone:#f5f3ef;--stone-2:#ece7e0;--line:#e0dbd3;
  --ink:#142534;--muted:#586470;--black:#101012;
  --pad:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,Arial,sans-serif;color:var(--ink);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;
  background:#b7ac9b url("../stone-texture.jpg") center top repeat;background-size:904px auto;
}
body::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.04);z-index:0;pointer-events:none}
h1,h2,h3,h4{font-family:'Oswald','Arial Narrow',sans-serif;font-weight:700;line-height:1.03;letter-spacing:.01em;text-transform:uppercase}
h2{font-size:clamp(30px,4vw,48px);color:var(--navy)}
h3{font-size:22px}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.red{color:var(--red)}
.lead{font-size:19px;color:var(--muted);max-width:640px}

.page{position:relative;z-index:1;max-width:1240px;margin:44px auto;background:var(--white);border-radius:6px;overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.5)}
.wrap{padding:0 var(--pad)}
.section{padding:76px 0}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Inter';font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;padding:15px 26px;border:2px solid transparent;border-radius:2px;cursor:pointer;transition:.18s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-ink)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.eyebrow{font-family:'Inter';font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--red)}

/* utility bar */
.ubar{background:var(--navy-3);color:#c7cfd6;font-size:13.5px}
.ubar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:16px}
.ubar .pts{display:flex;gap:20px;align-items:center;color:#aeb9c4;flex-wrap:wrap}
.ubar b{color:#fff}
.ubar .dot{color:var(--red);font-weight:700}
.ubar .soc a{color:#c7cfd6;margin-left:14px}
.ubar .soc a:hover{color:#fff}

/* masthead */
.masthead{background:#fff;border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.masthead .brand{display:flex;align-items:center;gap:14px}
.masthead .brand img{height:112px;width:auto}
.mh-right{display:flex;align-items:center;gap:22px}
.mh-phone{text-align:right}
.mh-phone small{display:block;font-family:'Inter';font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;color:var(--muted)}
.mh-phone b{font-family:'Oswald';font-weight:700;font-size:34px;letter-spacing:.01em;color:var(--navy);line-height:1}
.mh-phone b .red{color:var(--red)}

/* nav with dropdowns */
nav.main{position:sticky;top:0;z-index:60;background:var(--navy);box-shadow:0 2px 0 rgba(0,0,0,.15)}
nav.main .wrap{display:flex;align-items:center;justify-content:center;gap:6px;height:56px}
nav.main .nl{font-weight:600;font-size:14.5px;letter-spacing:.05em;color:#e7ecf1;text-transform:uppercase;padding:8px 16px;position:relative;display:inline-flex;align-items:center;gap:7px}
nav.main .nl::after{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .22s}
nav.main .nl:hover::after,nav.main .nl.active::after{transform:scaleX(1)}
.hasmenu{position:relative;height:56px;display:flex;align-items:center}
.hasmenu>.nl svg{transition:transform .2s}
.hasmenu:hover>.nl svg,.hasmenu:focus-within>.nl svg{transform:rotate(180deg)}
.dropdown{position:absolute;top:100%;left:0;min-width:280px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);box-shadow:0 20px 44px rgba(15,26,38,.22);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:70;max-height:70vh;overflow:auto}
.hasmenu:hover .dropdown,.hasmenu:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:12px 18px;font-weight:600;font-size:14.5px;color:var(--navy);border-bottom:1px solid var(--stone-2)}
.dropdown a:last-child{border-bottom:0}
.dropdown a:hover{background:var(--stone);color:var(--red-ink)}
.dropdown .dd-all{background:var(--navy);color:#fff;text-transform:uppercase;letter-spacing:.05em;font-size:13px}
.dropdown .dd-all:hover{background:var(--navy-2);color:#fff}
.dropdown.cols{min-width:460px;display:grid;grid-template-columns:1fr 1fr}
.hasmenu:hover .dropdown.cols,.hasmenu:focus-within .dropdown.cols{display:grid}
.dropdown.cols .dd-all{grid-column:1/-1}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;position:absolute;right:16px;top:11px}
.burger span{width:26px;height:2px;background:#fff;display:block}

/* home hero */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--navy)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.92)}
.hero .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,20,30,.9) 0%,rgba(11,20,30,.78) 46%,rgba(11,20,30,.5) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:80px;padding-bottom:80px}
.hero-inner{max-width:660px}
.hero h1{font-size:clamp(40px,5.4vw,68px);color:#fff;margin:14px 0 18px}
.hero p.sub{font-size:19px;color:#d7dee5;max-width:560px;margin-bottom:28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.hero-trust{display:flex;gap:24px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:20px}
.hero-trust .t{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;color:#eef2f5}

/* interior page hero (image or video) */
.phero{position:relative;color:#fff;overflow:hidden;background:var(--navy)}
.phero .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.92)}
.phero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,20,30,.92) 0%,rgba(11,20,30,.74) 50%,rgba(11,20,30,.45) 100%)}
.phero .wrap{position:relative;z-index:2;padding-top:66px;padding-bottom:66px}
.phero h1{font-size:clamp(36px,4.6vw,58px);color:#fff;margin:12px 0 14px;max-width:760px}
.phero p.sub{font-size:18.5px;color:#d7dee5;max-width:620px;margin-bottom:26px}
.phero .crumbs{font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9fb0be;display:flex;gap:10px;flex-wrap:wrap}
.phero .crumbs a{color:#d7dee5}
.phero .crumbs a:hover{color:#fff}
.phero .crumbs span{color:var(--red)}
.phero .hero-cta{margin-bottom:0}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* welcome */
.welcome{background:#fff;text-align:center}
.welcome .wrap{padding-top:52px;padding-bottom:44px}
.welcome h2{margin-bottom:14px}
.welcome p{font-size:20px;color:var(--muted);max-width:780px;margin:0 auto}
.rule{width:70px;height:4px;background:var(--red);margin:18px auto 0}
.rule.left{margin:18px 0 0}

/* services */
.services{background:var(--stone)}
.sec-head{max-width:720px;margin-bottom:40px}
.sec-head.center{margin:0 auto 40px;text-align:center}
.sec-head h2{margin:10px 0 12px}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.svc-grid.three{grid-template-columns:repeat(3,1fr)}
.svc{background:#fff;border:1px solid var(--line);border-radius:3px;padding:32px 28px;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;display:block}
.svc::before{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--red);transition:width .3s}
.svc:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(20,37,52,.14);border-color:#cdd4da}
.svc:hover::before{width:100%}
.svc .ico{width:50px;height:50px;color:var(--navy);margin-bottom:16px}
.svc h3{color:var(--navy);margin-bottom:9px}
.svc p{color:var(--muted);font-size:15.5px;margin-bottom:16px}
.svc .more{font-weight:700;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:8px}
.svc .more svg{transition:transform .2s}
.svc:hover .more svg{transform:translateX(4px)}

/* about / two column media */
.about{background:#fff}
.about .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center}
.about .grid.flip{grid-template-columns:1fr 1.05fr}
.about h2{margin:10px 0 18px}
.about p{color:var(--muted);margin-bottom:15px}
.checks{list-style:none;margin:20px 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:11px 16px}
.checks.one{grid-template-columns:1fr}
.checks li{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--ink);font-size:15px}
.checks svg{flex:none;margin-top:3px}
.about-visual{position:relative}
.about-visual .ph{width:100%;height:430px;border-radius:3px;overflow:hidden;box-shadow:0 18px 44px rgba(20,37,52,.22);background-size:cover;background-position:center}
.about-badge{position:absolute;left:-14px;bottom:-18px;background:var(--red);color:#fff;padding:16px 20px;border-radius:3px;box-shadow:0 14px 30px rgba(216,31,36,.3)}
.about-badge b{font-family:'Oswald';font-weight:700;font-size:28px;line-height:1;display:block}
.about-badge span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}

/* process */
.process{background:var(--navy);color:#fff}
.process h2{color:#fff}
.process .sec-head p{color:#c3cdd6}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step .n{font-family:'Oswald';font-weight:700;font-size:38px;color:var(--red);line-height:1}
.step .bar{height:2px;background:rgba(255,255,255,.18);margin:12px 0 14px;position:relative}
.step .bar::after{content:"";position:absolute;left:0;top:0;height:100%;width:34px;background:var(--red)}
.step h3{font-size:18px;margin-bottom:7px;color:#fff}
.step p{color:#b9c4cd;font-size:15px}

/* work */
.work{background:var(--stone)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{position:relative;height:250px;border-radius:3px;overflow:hidden;box-shadow:0 12px 30px rgba(20,37,52,.16)}
.tile .timg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s}
.tile:hover .timg{transform:scale(1.06)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(0deg,rgba(15,26,38,.92),rgba(15,26,38,0));color:#fff}
.tile .cap b{font-family:'Oswald';font-weight:700;font-size:21px;text-transform:uppercase;display:block}
.tile .cap span{font-size:13px;color:#cdd6de}

/* reviews */
.revs{background:#fff}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{border:1px solid var(--line);border-radius:3px;padding:28px 26px;background:var(--stone)}
.stars{display:flex;gap:3px;margin-bottom:12px}
.rev p{color:var(--ink);font-size:16px;margin-bottom:16px}
.rev .who{font-weight:700;color:var(--navy)}
.rev .who small{display:block;font-weight:500;color:var(--muted);font-size:13px}

/* areas */
.areas{background:var(--navy-3);color:#fff}
.areas h2{color:#fff}
.areas .wrap{text-align:center}
.areas p{color:#c3cdd6;max-width:680px;margin:12px auto 0}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.chips a{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:2px;padding:9px 15px;font-weight:600;font-size:14.5px;color:#e7ecf1;transition:.16s}
.chips a:hover{background:var(--red);border-color:var(--red);color:#fff}

/* cta band */
.ctaband{position:relative;color:#fff;overflow:hidden;background:var(--navy)}
.ctaband .bg{position:absolute;inset:0;background:url("../stone-texture.jpg") center/cover}
.ctaband .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(216,31,36,.92),rgba(11,20,30,.82))}
.ctaband .wrap{position:relative;z-index:2;padding:58px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.ctaband h2{color:#fff;max-width:620px}
.ctaband p{color:#ffe1e1;margin-top:8px;font-size:18px}
.cb-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ctaband .btn-white{background:#fff;color:var(--navy)}
.ctaband .btn-white:hover{background:#f0f0f0}

/* contact */
.contact{background:var(--stone)}
.contact .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:3px;padding:36px}
.form h3{color:var(--navy);font-size:25px;margin-bottom:5px}
.form .fsub{color:var(--muted);margin-bottom:22px;font-size:15px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{margin-bottom:15px}
label{display:block;font-weight:600;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--navy);margin-bottom:6px}
input,select,textarea{width:100%;font-family:'Inter';font-size:16px;padding:13px 14px;border:1.5px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy)}
textarea{resize:vertical;min-height:118px}
.form .btn{width:100%;justify-content:center;margin-top:4px}
.formnote{font-size:12.5px;color:var(--muted);margin-top:11px;text-align:center}
.success{display:none;background:#eaf6ec;border:1.5px solid #b7dcbb;color:#1e6b2c;padding:15px 16px;border-radius:3px;font-weight:600;margin-top:12px}
.cinfo h3{color:var(--navy);font-size:23px;margin-bottom:18px}
.cinfo .row{display:flex;gap:13px;align-items:flex-start;margin-bottom:20px}
.cinfo .ic{width:42px;height:42px;flex:none;border:1.5px solid var(--line);border-radius:2px;display:flex;align-items:center;justify-content:center;color:var(--red);background:#fff}
.cinfo .row b{display:block;font-family:'Inter';font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;margin-bottom:3px}
.cinfo .row span{color:var(--ink);font-size:16px}
.cinfo .row a:hover{color:var(--red)}

/* service detail extras */
.sdetail{background:#fff}
.sdetail .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:start}
.sdetail h2{margin:10px 0 18px}
.sdetail p{color:var(--muted);margin-bottom:15px}
.side{background:var(--stone);border:1px solid var(--line);border-radius:3px;padding:30px 28px;position:sticky;top:76px}
.side h3{color:var(--navy);margin-bottom:14px;font-size:20px}
.side ul{list-style:none}
.side li{border-bottom:1px solid var(--line)}
.side li:last-child{border-bottom:0}
.side li a{display:flex;justify-content:space-between;align-items:center;padding:12px 2px;font-weight:600;font-size:15px;color:var(--ink)}
.side li a:hover{color:var(--red-ink)}
.side li a.here{color:var(--red-ink)}
.side .btn{width:100%;justify-content:center;margin-top:18px}
.side .call{margin-top:12px;text-align:center;font-size:14px;color:var(--muted)}
.side .call b{display:block;font-family:'Oswald';font-size:26px;color:var(--navy)}

.incl{background:var(--stone)}
.incl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.incl-item{background:#fff;border:1px solid var(--line);border-radius:3px;padding:22px 22px;display:flex;gap:12px;align-items:flex-start}
.incl-item svg{flex:none;margin-top:4px}
.incl-item b{display:block;color:var(--navy);font-size:16px;margin-bottom:3px}
.incl-item span{color:var(--muted);font-size:14.5px;line-height:1.5;display:block}

.signs{background:var(--navy);color:#fff}
.signs h2{color:#fff}
.signs .sec-head p{color:#c3cdd6}
.signs-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;max-width:980px}
.sign{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:3px;padding:16px 18px}
.sign svg{flex:none;margin-top:3px}
.sign span{color:#dbe3ea;font-size:15.5px;font-weight:600}

/* faq */
.faq{background:#fff}
.faq-list{max-width:860px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:3px;margin-bottom:12px;background:#fff;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 22px;font-family:'Oswald';font-weight:700;font-size:18px;color:var(--navy);text-transform:uppercase;letter-spacing:.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .pm{flex:none;width:26px;height:26px;border:2px solid var(--red);border-radius:2px;display:flex;align-items:center;justify-content:center;color:var(--red);font-family:'Inter';font-weight:800;font-size:17px;line-height:1;transition:.2s}
.faq-item[open] summary .pm{background:var(--red);color:#fff}
.faq-item .fa-body{padding:0 22px 20px;color:var(--muted);font-size:16px}

/* materials band */
.materials{background:var(--stone)}
.mat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mat{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.mat .mimg{height:150px;background-size:cover;background-position:center}
.mat .mtxt{padding:18px 20px}
.mat b{font-family:'Oswald';font-weight:700;text-transform:uppercase;color:var(--navy);font-size:17px;display:block;margin-bottom:5px}
.mat span{color:var(--muted);font-size:14px;line-height:1.5;display:block}

/* stats band */
.stats{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:40px;padding-bottom:40px;text-align:center}
.stat b{font-family:'Oswald';font-weight:700;font-size:40px;color:var(--navy);display:block;line-height:1}
.stat b i{font-style:normal;color:var(--red)}
.stat span{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* footer */
footer{background:var(--navy-3);color:#aeb9c4;padding:52px 0 0}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:38px}
footer img.flogo{height:auto;width:250px;max-width:100%;margin-bottom:18px}
footer .fabout{font-size:14.5px;color:#9aa7b2;max-width:290px}
footer h4{font-size:15px;letter-spacing:.06em;color:#fff;margin-bottom:14px}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer a{color:#aeb9c4;font-size:14.5px}
footer a:hover{color:var(--red)}
.fbar{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#8794a0}
.fbar a{color:#cdd6de;font-weight:600}

/* mobile menu */
.mobilemenu{display:none;position:fixed;inset:0;z-index:90;background:var(--navy);flex-direction:column;padding:24px;overflow:auto}
.mobilemenu .mtop{display:flex;justify-content:flex-end;align-items:center;margin-bottom:4px}
.mobilemenu .mlogo{display:block;height:auto;width:min(230px,62%);margin:0 auto 30px}
.mobilemenu a{color:#fff;font-family:'Oswald';font-weight:700;text-transform:uppercase;font-size:22px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.mobilemenu a.sub{font-family:'Inter';font-weight:600;text-transform:none;font-size:16px;color:#c3cdd6;padding:8px 0 8px 18px}
.mobilemenu .close{background:none;border:0;color:#fff;font-size:32px;cursor:pointer;line-height:1}
.mobilemenu.open{display:flex}

@media(max-width:1000px){
  .about .grid,.about .grid.flip{grid-template-columns:1fr;gap:34px}
  .steps{grid-template-columns:1fr 1fr}
  .rev-grid{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .contact .grid{grid-template-columns:1fr;gap:32px}
  .fgrid{grid-template-columns:1fr 1fr}
  .svc-grid.three{grid-template-columns:1fr 1fr}
  .incl-grid{grid-template-columns:1fr 1fr}
  .mat-grid{grid-template-columns:1fr 1fr}
  .sdetail .grid{grid-template-columns:1fr}
  .side{position:static}
  .signs-grid{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:760px){
  :root{--pad:22px}
  .page{margin:0;border-radius:0}
  .section{padding:56px 0}
  nav.main .wrap{justify-content:flex-start;height:54px}
  nav.main .hasmenu,nav.main>.wrap>a.nl{display:none}
  .burger{display:flex}
  .masthead .brand img{height:84px}
  .mh-phone b{font-size:26px}
  .mh-right .btn{display:none}
  .ubar .pts span:nth-child(n+3){display:none}
  .ubar .soc{display:none}
  .svc-grid,.svc-grid.three{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .incl-grid{grid-template-columns:1fr}
  .mat-grid{grid-template-columns:1fr}
}

/* ============ google rating pill ============ */
.gpill{display:inline-flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:9px 18px;box-shadow:0 8px 24px rgba(15,26,38,.14);margin-bottom:18px}
.gpill .glogo{height:20px;width:auto}
.gpill.sm{padding:7px 15px;gap:9px}
.gpill.sm .glogo{height:17px}
.gpill .gtxt{font-family:'Inter';font-weight:600;font-size:14px;color:var(--muted);white-space:nowrap}
.gpill .gtxt b{color:var(--ink);font-weight:800}
.gpill.dk{background:rgba(255,255,255,.97)}
.gstars{display:inline-flex;gap:2px}
.gstars i{font-style:normal;color:#f5b100;font-size:16px;line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.08)}
.gstars.sm i{font-size:14px}
.gstars.lg i{font-size:22px}
.reveal.in .gstars i{animation:starpop .45s cubic-bezier(.34,1.56,.64,1) backwards}
.reveal.in .gstars i:nth-child(1){animation-delay:.05s}.reveal.in .gstars i:nth-child(2){animation-delay:.13s}.reveal.in .gstars i:nth-child(3){animation-delay:.21s}.reveal.in .gstars i:nth-child(4){animation-delay:.29s}.reveal.in .gstars i:nth-child(5){animation-delay:.37s}
@keyframes starpop{0%{opacity:0;transform:scale(.3) rotate(-40deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* ============ GMB review strip ============ */
.gmb{background:#fff}
.gmb-grid{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
.gmb-side{position:sticky;top:96px;background:var(--stone);border:1px solid var(--line);border-radius:4px;padding:30px 26px;text-align:center}
.gmb-side .biglogo{height:34px;width:auto;margin:0 auto 14px}
.gmb-side .score{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:12px}
.gmb-side .score b{font-family:'Oswald';font-size:58px;font-weight:700;color:var(--navy);line-height:1}
.gmb-side p{font-size:14.5px;color:var(--muted);margin-bottom:18px}
.gmb-side .btn{width:100%;justify-content:center;margin-bottom:12px}
.gleave{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--red)}
.gleave svg{width:14px;height:14px}
.gleave:hover{text-decoration:underline}
.gmb-cards{display:grid;gap:22px}
.grev{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:4px;padding:24px 26px;box-shadow:0 10px 30px rgba(15,26,38,.07);transition:transform .25s,box-shadow .25s}
.grev:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(15,26,38,.13)}
.grev-top{display:flex;align-items:center;gap:13px;margin-bottom:8px}
.grev .avatar{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-family:'Oswald';font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;flex:none}
.grev:nth-child(2) .avatar{background:#0e7a3d}
.grev:nth-child(3) .avatar{background:#8a4d0f}
.gwho{flex:1;min-width:0}
.gwho b{display:block;font-size:15.5px;color:var(--ink)}
.gwho small{color:var(--muted);font-size:13px}
.gmark{flex:none}
.grev p{font-size:15.5px;color:#3c4a57;margin:10px 0 12px}
.gsrc{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.gsrc b{color:var(--ink)}

/* footer + cta google marks */
.fgoogle{display:inline-flex;align-items:center;gap:9px;margin-top:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:8px 16px;font-size:13.5px;color:#c7cfd6;transition:.16s}
.fgoogle:hover{background:rgba(255,255,255,.12)}
.fgoogle img{height:16px;width:auto}
.fgoogle b{color:#fff}
.cb-google{display:inline-flex;align-items:center;gap:9px;margin-top:12px;color:#fff;font-size:14.5px;font-weight:600}
.cb-google img{height:16px;width:auto;opacity:.95}
.cb-google b{font-weight:800}

/* ============ work / project pages ============ */
.proj{background:#fff}
.proj.alt{background:var(--stone)}
.proj .grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.proj .grid.flip>.proj-visual{order:2}
.proj-visual{position:relative}
.proj-visual .ph{height:420px;background-size:cover;background-position:center;border-radius:4px;box-shadow:0 24px 54px rgba(15,26,38,.22)}
.proj-num{position:absolute;top:-20px;left:-20px;background:var(--red);color:#fff;font-family:'Oswald';font-weight:700;font-size:26px;padding:10px 18px;border-radius:3px;box-shadow:0 10px 24px rgba(216,31,36,.35)}
.grid.flip .proj-num{left:auto;right:-20px}
.proj-meta{margin-top:20px}
.proj-meta .chip{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.06em;padding:11px 18px;border-radius:2px;transition:.18s}
.proj-meta .chip:hover{background:var(--red)}
.proj-meta .chip svg{width:15px;height:15px}
.worknote{background:var(--navy);color:#fff}
.worknote h2{color:#fff}
.worknote .lead{color:#b9c4ce}
.zoomable{overflow:hidden}
.tile .cap .tgo{display:inline-flex;align-items:center;gap:7px;margin-top:8px;color:#ffd7d7;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;opacity:0;transform:translateY(6px);transition:.25s}
.tile:hover .cap .tgo{opacity:1;transform:none}
.tile .cap .tgo svg{width:14px;height:14px}

/* ============ chat widget ============ */
.cw{position:fixed;right:22px;bottom:22px;z-index:200;font-family:'Inter'}
.cw-fab{position:relative;width:62px;height:62px;border-radius:50%;border:none;background:var(--red);color:#fff;cursor:pointer;box-shadow:0 14px 34px rgba(216,31,36,.45);display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .18s}
.cw.ready .cw-fab{transform:scale(1)}
.cw-fab:hover{background:var(--red-ink)}
.cw.ready .cw-fab{animation:fabnudge 6s ease-in-out 3s infinite}
@keyframes fabnudge{0%,88%,100%{transform:scale(1) rotate(0)}90%{transform:scale(1.08) rotate(-6deg)}93%{transform:scale(1.05) rotate(5deg)}96%{transform:scale(1.06) rotate(-3deg)}}
.cw-dot{position:absolute;top:4px;right:4px;width:13px;height:13px;border-radius:50%;background:#22c55e;border:2.5px solid #fff}
.cw.open .cw-fab{animation:none;transform:scale(0)}
.cw-panel{position:absolute;right:0;bottom:0;width:340px;max-width:calc(100vw - 34px);background:#fff;border-radius:14px;box-shadow:0 30px 80px rgba(15,26,38,.4);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(18px) scale(.96);transform-origin:bottom right;transition:.28s cubic-bezier(.22,1,.36,1)}
.cw.open .cw-panel{opacity:1;visibility:visible;transform:none}
.cw-head{display:flex;align-items:center;gap:12px;background:var(--navy);padding:15px 16px}
.cw-head img{height:44px;width:auto}
.cw-id{flex:1;color:#fff}
.cw-id b{display:block;font-family:'Oswald';font-size:17px;letter-spacing:.02em;text-transform:uppercase}
.cw-id span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#a9b7c2}
.cw-live{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:livepulse 1.8s infinite}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 5px rgba(34,197,94,0)}}
.cw-x{background:none;border:none;color:#c7cfd6;font-size:26px;line-height:1;cursor:pointer;padding:2px 6px}
.cw-x:hover{color:#fff}
.cw-body{padding:16px;background:var(--stone)}
.cw-msg{background:#fff;border:1px solid var(--line);border-radius:12px 12px 12px 3px;padding:12px 15px;font-size:14.5px;color:#3c4a57;box-shadow:0 4px 12px rgba(15,26,38,.06);margin-bottom:13px;animation:msgin .4s .25s backwards}
@keyframes msgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cw-actions{display:grid;gap:9px}
.cw-btn{display:flex;align-items:center;gap:10px;background:var(--red);color:#fff;border:none;border-radius:8px;padding:13px 15px;font-family:'Inter';font-weight:800;font-size:14px;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:.16s;animation:msgin .4s backwards}
.cw-actions .cw-btn:nth-child(1){animation-delay:.4s}
.cw-actions .cw-btn:nth-child(2){animation-delay:.5s}
.cw-actions .cw-btn:nth-child(3){animation-delay:.6s}
.cw-btn:hover{background:var(--red-ink);transform:translateY(-1px)}
.cw-btn.alt{background:var(--navy)}
.cw-btn.alt:hover{background:var(--navy-2)}
.cw-form{display:none;gap:9px;grid-auto-rows:min-content}
.cw.form .cw-form{display:grid}
.cw.form .cw-actions,.cw.form .cw-msg{display:none}
.cw-form input,.cw-form textarea{font-size:14.5px;padding:11px 12px;border-radius:8px}
.cw-back{background:none;border:none;color:var(--muted);font-family:'Inter';font-weight:700;font-size:13px;cursor:pointer;padding:4px}
.cw-back:hover{color:var(--ink)}
.cw-done{display:none;text-align:center;padding:10px 4px}
.cw.done .cw-done{display:block}
.cw.done .cw-actions,.cw.done .cw-msg,.cw.done .cw-form{display:none}
.cw-check{width:52px;height:52px;border-radius:50%;background:#22c55e;color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;margin:4px auto 12px;animation:starpop .5s cubic-bezier(.34,1.56,.64,1)}
.cw-done b{font-family:'Oswald';font-size:19px;text-transform:uppercase;color:var(--navy)}
.cw-done p{font-size:14px;color:var(--muted);margin-top:7px}
.cw-foot{display:flex;align-items:center;justify-content:center;gap:7px;background:#fff;border-top:1px solid var(--line);padding:10px;font-size:13px;color:var(--muted)}
.cw-foot i{font-style:normal;color:#f5b100;font-size:13px}
.cw-foot b{color:var(--ink)}
.cw-foot img{height:15px;width:auto}
@media(max-width:640px){.cw{right:14px;bottom:14px}.cw-fab{width:56px;height:56px}}

/* ============ animation upgrades ============ */
.hero .bgv,.phero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .bg,.phero .bg{animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.reveal-l{opacity:0;transform:translateX(-28px);transition:opacity .75s,transform .75s}
.reveal-r{opacity:0;transform:translateX(28px);transition:opacity .75s,transform .75s}
.reveal-l.in,.reveal-r.in{opacity:1;transform:none}
.sec-head h2{position:relative}
.svc:hover svg{animation:icontip .5s ease}
@keyframes icontip{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg) scale(1.08)}65%{transform:rotate(5deg) scale(1.05)}}
.svc>svg{transition:transform .25s}
.step .n{transition:.25s}
.step:hover .n{transform:scale(1.12);box-shadow:0 0 0 8px rgba(255,49,49,.12)}
.reveal.in .bar{animation:bargrow .8s .3s cubic-bezier(.22,1,.36,1) backwards}
@keyframes bargrow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}
.chips a{transition:transform .18s,background .18s,border-color .18s}
.chips a:hover{transform:translateY(-3px)}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:none}
.btn:hover::after{left:130%;transition:left .55s ease}
.stat b,.stat b span{font-variant-numeric:tabular-nums}
.stat b span{font-family:'Oswald';font-weight:700;font-size:inherit;line-height:1;letter-spacing:0;text-transform:none;color:inherit;display:inline}
@media(prefers-reduced-motion:reduce){
  .hero .bg,.phero .bg{animation:none}
  .cw.ready .cw-fab{animation:none}
  .reveal.in .gstars i,.reveal.in .bar{animation:none}
  .btn::after{display:none}
  .reveal-l,.reveal-r{opacity:1;transform:none;transition:none}
}
@media(max-width:960px){
  .gmb-grid{grid-template-columns:1fr}
  .gmb-side{position:static}
  .proj .grid{grid-template-columns:1fr;gap:30px}
  .proj .grid.flip>.proj-visual{order:0}
  .proj-visual .ph{height:300px}
  .proj-num{left:12px;top:12px}
  .grid.flip .proj-num{right:auto;left:12px}
}
.proj p+p{margin-top:13px}

/* ============ mascot placements v2 ============ */
/* welcome strip: working cougar left */
.welcome.has-mascot{overflow:visible;position:relative}
.welcome-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(26px,4vw,56px);align-items:center;text-align:left}
.welcome-mascot{position:relative;margin:-92px 0 -26px;z-index:5}
.welcome-mascot img{width:100%;max-width:300px;height:auto;filter:drop-shadow(0 20px 30px rgba(15,26,38,.35));animation:mascotfloat 6s ease-in-out infinite}
@keyframes mascotfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.welcome-copy .rule{margin-left:0}
.welcome-copy p{margin-left:0;margin-right:0}

/* about: standing cougar as the visual */
.mascot-visual{display:flex;justify-content:center;align-items:flex-end;position:relative}
.mascot-visual img{width:min(360px,88%);height:auto;filter:drop-shadow(0 22px 32px rgba(15,26,38,.28))}
.mascot-visual .about-badge{left:auto;right:0;bottom:10%;width:max-content}

/* gmb: header band + carousel */
.gmb-head{display:grid;grid-template-columns:auto 1fr auto;gap:18px 40px;align-items:center;margin-bottom:40px;padding-right:216px}
.gmb-score{display:flex;align-items:center;gap:18px;padding-right:26px;border-right:1px solid var(--line)}
.gmb-score .biglogo{height:26px;width:auto;flex:none}
.gmb-score .gnum{display:flex;flex-direction:column;gap:3px}
.gmb-score b{font-family:'Oswald';font-weight:700;font-size:34px;line-height:1;color:var(--navy);letter-spacing:.01em}
.gmb-sub{color:var(--muted);font-size:15px;max-width:38ch}
.gmb-acts{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.gmb-acts .btn{white-space:nowrap}
.gmb-carousel{position:relative}
.gmb-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:14px 4px 6px;scroll-padding:4px}
.gmb-track::-webkit-scrollbar{display:none}
.gmb-track .grev{flex:0 0 calc(50% - 11px);scroll-snap-align:start;margin:0}
.gmb-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:22px}
.gmb-btn{width:46px;height:46px;border:2px solid var(--navy);background:#fff;color:var(--navy);font-size:19px;cursor:pointer;border-radius:2px;transition:.16s;line-height:1}
.gmb-btn:hover{background:var(--navy);color:#fff}
.gmb-btn:disabled{opacity:.35;cursor:default}
.gmb-btn:disabled:hover{background:#fff;color:var(--navy)}
.gmb-dots{display:flex;gap:9px}
.gmb-dots i{width:10px;height:10px;border-radius:50%;background:#cfc9c0;transition:.2s;cursor:pointer}
.gmb-dots i.on{background:var(--red);transform:scale(1.2)}
.gmb-badge{position:absolute;top:-126px;right:-18px;width:146px;height:auto;z-index:3;filter:drop-shadow(0 12px 24px rgba(15,26,38,.25));transition:transform .25s ease}
.gmb-badge:hover{transform:scale(1.03)}

/* cta band: flipped mascot right, hand under the headline */
.ctaband.has-mascot .wrap{position:relative;padding-right:calc(var(--pad) + 320px)}
.cta-mascot{position:absolute;right:calc(var(--pad) - 30px);bottom:-40px;width:360px;pointer-events:none}
.cta-mascot img{width:100%;height:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.4))}
.reveal.cta-mascot{transform:translateX(26px)}
.reveal.cta-mascot.in{transform:none}

/* chat widget: badge fab + avatar */
.cw-fab{overflow:visible;background:#fff;border:3px solid var(--red);padding:0}
.cw-fab img{width:100%;height:100%;object-fit:contain;border-radius:50%;transform:scale(1.06)}
.cw-fab:hover{background:#fff}
.cw-avatar{height:46px;width:auto}

@media(prefers-reduced-motion:reduce){
  .welcome-mascot img{animation:none}
  .reveal.cta-mascot{transform:none}
  .gmb-track{scroll-behavior:auto}
}
@media(max-width:1100px){
  .gmb-head{grid-template-columns:1fr;text-align:left;padding-right:0}
  .gmb-score{border-right:none;padding-right:0}
  .gmb-acts{flex-direction:row;align-items:center;gap:20px}
  .gmb-badge{top:-96px}
  .ctaband.has-mascot .wrap{padding-right:calc(var(--pad) + 250px)}
  .cta-mascot{width:290px}
}
@media(max-width:960px){
  .welcome-grid{grid-template-columns:1fr;text-align:center}
  .welcome-mascot{margin:-70px auto -14px;max-width:270px}
  .welcome-copy .rule{margin-left:auto}
  .welcome-copy p{margin-left:auto;margin-right:auto}
  .mascot-visual{margin-top:8px}
  .gmb-track .grev{flex-basis:100%}
  .gmb-badge{top:-48px;right:2px;width:104px}
  .ctaband.has-mascot .wrap{padding-right:var(--pad);display:flex;flex-direction:column}
  .cta-mascot{position:static;width:min(280px,74vw);margin:0 auto 4px;order:-1;align-self:center}
}

/* mascot v3: footer + contact + sidebar */
footer{position:relative;overflow:visible}
.footer-mascot{position:absolute;right:44px;bottom:96px;width:200px;height:auto;z-index:2;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45))}
footer .fgrid{position:relative;z-index:1}
@media(min-width:1101px){footer .fgrid{padding-right:230px}}
.contact .grid{align-items:stretch}
.contact .cinfo{display:flex;flex-direction:column}
.contact-mascot{display:block;margin:auto auto -46px;width:min(500px,100%);height:auto;filter:drop-shadow(0 16px 26px rgba(15,26,38,.22));-webkit-mask-image:linear-gradient(to bottom,#000 74%,rgba(0,0,0,.4) 90%,transparent 100%);mask-image:linear-gradient(to bottom,#000 74%,rgba(0,0,0,.4) 90%,transparent 100%)}
.side-badge{width:84px;height:auto;margin:0 auto 14px;display:block;filter:drop-shadow(0 8px 16px rgba(15,26,38,.2))}
@media(max-width:1100px){.footer-mascot{display:none}}
@media(max-width:1240px){.contact-mascot{width:min(430px,100%)}}
@media(max-width:1080px){.contact-mascot{width:min(370px,100%)}}
@media(max-width:960px){.contact-mascot{display:none}}

/* ============ heading accents ============ */
.acc{position:relative;color:var(--red);white-space:nowrap}
.acc::after{content:"";position:absolute;left:0;right:0;bottom:.13em;height:.07em;background:var(--red);opacity:.28;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,1,.36,1) .25s}
.reveal.in .acc::after,.sec-head.reveal.in .acc::after,h2 .acc::after{transform:scaleX(1)}
.sec-head:not(.in) .acc::after,.reveal:not(.in) .acc::after{transform:scaleX(0)}
.ctaband .acc,.worknote .acc,.stages .acc{color:#fff}
.ctaband .acc::after,.worknote .acc::after{background:#fff;opacity:.5}
@media(prefers-reduced-motion:reduce){.acc::after{transition:none;transform:scaleX(1)}}

/* ============ file uploader ============ */
.field .opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);font-size:12px;margin-left:6px}
.uploader{position:relative;border:2px dashed #cfc9c0;border-radius:4px;background:#fbfaf8;transition:border-color .18s,background .18s}
.uploader:hover,.uploader.drag{border-color:var(--red);background:#fff6f6}
.uploader input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.up-inner{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;text-align:center;pointer-events:none}
.up-inner svg{color:var(--red)}
.up-inner b{font-family:'Oswald';font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.up-inner span{font-size:13px;color:var(--muted)}
.up-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.up-chip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:3px;padding:6px 10px;font-size:12.5px;max-width:100%}
.up-chip img{width:30px;height:30px;object-fit:cover;border-radius:2px;flex:none}
.up-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.up-chip button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.up-chip button:hover{color:var(--red)}

@media(max-width:768px){
  .ubar{display:none}
  footer .fbrand{text-align:center}
  footer .fbrand .flogo{display:block;margin-left:auto;margin-right:auto}
  footer .fabout{margin-left:auto;margin-right:auto}
  footer .fgoogle{margin-left:auto;margin-right:auto}
}

/* ============ mobile reviews strip rebuild ============ */
@media(max-width:820px){
  .gmb-head{display:block;text-align:center;padding-right:0;margin-bottom:26px}
  .gmb-score{justify-content:center;gap:14px;border-right:none;padding:0;margin-bottom:12px}
  .gmb-score .biglogo{height:24px}
  .gmb-score .gnum{align-items:center}
  .gmb-score b{font-size:38px}
  .gmb-sub{max-width:40ch;margin:0 auto 20px;font-size:14.5px}
  .gmb-acts{flex-direction:column;align-items:stretch;gap:14px}
  .gmb-acts .btn{width:100%;justify-content:center;white-space:normal;padding-left:14px;padding-right:14px}
  .gleave{justify-content:center;width:100%}
  /* badge becomes a centered stamp between header and cards, no overlap */
  .gmb-carousel{padding-top:0}
  /* chat launcher already shows the badge on mobile, so skip the duplicate */
  .gmb-badge{display:none}
  .gmb-track{padding-left:0;padding-right:0;gap:14px}
  .gmb-track .grev{flex-basis:100%;padding:20px 18px}
  .gmb-track .grev p{font-size:14.8px}
  .gmb-nav{gap:16px;margin-top:18px}
  .gmb-btn{width:44px;height:44px}
}

/* ============ small-device polish (iPhone 14 and below) ============ */
@media(max-width:430px){
  :root{--pad:18px}
  .hero h1,.phero h1{font-size:clamp(30px,8.6vw,40px);line-height:1.06}
  .hero .sub,.phero .sub{font-size:15.5px}
  .btn{padding:14px 18px;font-size:13px}
  .hero .acts,.phero .acts{display:flex;flex-wrap:wrap;gap:10px}
  .hero .acts .btn,.phero .acts .btn{flex:1 1 100%;justify-content:center}
  .gpill{padding:7px 13px;gap:8px}
  .gpill .gtxt{font-size:13px}
  .sec-head h2,.section h2{font-size:clamp(26px,7.4vw,34px);line-height:1.1}
  .masthead .brand img{height:72px}
  .masthead .callbox .num{font-size:24px}
  .chips a{font-size:13px;padding:9px 13px}
  .stats .wrap{gap:22px}
  .cell,.stat b{word-break:normal}
  .grev{padding:18px 16px}
  .up-inner{padding:18px 12px}
  .cw-panel{width:calc(100vw - 28px)}
  .footer-mascot{display:none}
  .welcome-mascot{max-width:230px;margin:-56px auto -10px}
  .cta-mascot{width:min(240px,66vw)}
  .acc{white-space:normal}
}

/* ============ mobile tap targets (44px min) ============ */
@media(max-width:820px){
  .burger{width:48px;height:44px;display:flex;align-items:center;justify-content:center}
  .gleave{padding:11px 8px;min-height:44px;align-items:center}
  footer .fgrid ul li{margin-bottom:0}
  footer .fgrid ul a{display:inline-flex;align-items:center;min-height:42px;padding:2px 0}
  footer .fgrid ul li:not(:has(a)){min-height:42px;display:flex;align-items:center}
  .cw-x{width:40px;height:40px;display:flex;align-items:center;justify-content:center}
  .cinfo .row a{display:inline-flex;align-items:center;min-height:40px}
}

/* ============ owner spotlight (about page) ============ */
.owner{background:var(--navy);color:#fff;padding:clamp(64px,8vw,110px) 0;position:relative;overflow:hidden}
.owner::before{content:"";position:absolute;inset:0;background:url('../stone-texture.jpg') center/cover;opacity:.07;pointer-events:none}
.owner .wrap{position:relative;z-index:1}
.owner-grid{display:grid;grid-template-columns:400px 1fr;gap:clamp(36px,5vw,80px);align-items:center}

.owner-photo{position:relative;width:100%;max-width:400px;aspect-ratio:1;margin:0 auto}
.owner-photo .disc{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle at 50% 35%,#2b4257,#16283a 70%);box-shadow:inset 0 -18px 40px rgba(0,0,0,.45)}
.owner-photo .ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--red);opacity:.85}
.owner-photo .ring::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(255,255,255,.18)}
.owner-photo>img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:92%;height:100%;object-fit:cover;object-position:center 18%;
  border-radius:50%;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.55)) contrast(1.04) saturate(1.03);
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 62%,rgba(0,0,0,.9) 72%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 45%,#000 62%,rgba(0,0,0,.9) 72%,transparent 78%);
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.owner-photo:hover>img{transform:translateX(-50%) scale(1.03)}
.owner-photo .years{position:absolute;right:-6px;bottom:16px;z-index:3;background:var(--red);color:#fff;padding:14px 18px;border-radius:3px;box-shadow:0 16px 34px rgba(216,31,36,.4);text-align:center}
.owner-photo .years b{display:block;font-family:'Oswald';font-weight:700;font-size:32px;line-height:1}
.owner-photo .years b i{font-style:normal;font-size:.62em;vertical-align:super}
.owner-photo .years>span{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-top:2px}

.owner-copy .hi{font-family:'Oswald';font-weight:600;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.owner-copy h2{color:#fff;font-size:clamp(30px,3.6vw,46px);line-height:1.05;margin-bottom:20px}
.owner-copy .acc{color:#fff}
.owner-copy .acc::after{background:var(--red);opacity:.9;height:.09em}
.owner-copy .big{font-size:19px;color:#fff;font-weight:600;margin-bottom:16px;max-width:56ch}
.owner-copy p{color:#b9c4ce;max-width:62ch;margin-bottom:14px}
.sig{margin:24px 0 20px;padding-left:16px;border-left:3px solid var(--red)}
.sig-name{font-family:'Oswald';font-weight:700;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.sig-role{font-size:13px;color:#8fa0b0;letter-spacing:.04em}
.owner-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.owner-tags span{border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:7px 14px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#cbd5de}
.owner-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn-ghost-dark{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4)}
.btn-ghost-dark:hover{background:#fff;color:var(--navy);border-color:#fff}

@media(max-width:1080px){
  .owner-grid{grid-template-columns:320px 1fr;gap:40px}
}
@media(max-width:880px){
  .owner-grid{grid-template-columns:1fr;gap:34px}
  .owner-photo{max-width:290px}
  .owner-photo .years{right:-8px;bottom:4px;padding:10px 13px}
  .owner-photo .years b{font-size:24px}
  .owner-photo .years>span{font-size:9.5px;letter-spacing:.1em}
  .owner-copy{text-align:left}
  .owner-copy .big{font-size:17.5px}
}
@media(max-width:430px){
  .owner-photo{max-width:250px}
  .owner-photo .years{right:-2px;bottom:6px;padding:11px 14px}
  .owner-photo .years b{font-size:26px}
  .owner-cta .btn{flex:1 1 100%;justify-content:center}
}


/* ============================================================
   v4 — sitewide motion pass, trust band, catchphrase stamp
   ============================================================ */

/* --- page entrance --- */
.page{animation:pagein .6s cubic-bezier(.22,1,.36,1) both}
@keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --- scroll progress --- */
.sprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:95;background:linear-gradient(90deg,var(--red),#ff8a6b);box-shadow:0 0 10px rgba(255,49,49,.5);pointer-events:none;transition:width .08s linear}

/* --- condensed sticky nav --- */
nav.main{transition:box-shadow .28s ease,background .28s ease}
nav.main .nl{transition:padding .28s ease,color .18s}
nav.main.stuck{background:rgba(14,26,38,.97);box-shadow:0 12px 32px rgba(10,18,26,.32)}
nav.main.stuck .nl{padding-top:4px;padding-bottom:4px}

/* --- eyebrow settle --- */
.reveal.in .eyebrow{animation:ebin .6s .08s cubic-bezier(.22,1,.36,1) backwards}
@keyframes ebin{from{opacity:0;transform:translateY(7px);letter-spacing:.34em}to{opacity:1;transform:none;letter-spacing:.16em}}

/* --- red rule draws itself --- */
.reveal.in .rule,.rule.reveal.in{animation:ruledraw .65s .18s cubic-bezier(.22,1,.36,1) backwards}
@keyframes ruledraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --- card, tile + control polish --- */
.svc{will-change:transform}
.svc:hover{transform:translateY(-7px)}
.tile .timg{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.tile:hover .timg{transform:scale(1.09)}
.step .n{display:inline-block}
.step:hover .n{transform:translateY(-4px) scale(1.09)}
.chips a:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.985)}
footer ul a{position:relative;transition:color .18s,padding-left .22s}
footer ul a::before{content:"";position:absolute;left:0;top:50%;width:0;height:2px;background:var(--red);transition:width .22s;transform:translateY(-50%)}
footer ul a:hover{padding-left:14px;color:#fff}
footer ul a:hover::before{width:9px}

/* --- catchphrase stamp --- */
.stamp{display:inline-flex;align-items:center;gap:14px;font-family:'Inter',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.2em;font-size:12.5px;line-height:1;color:var(--red)}
.stamp::before,.stamp::after{content:"";width:32px;height:2px;background:var(--red);opacity:.7;flex:none}
.reveal.in .stamp{animation:stampin .55s cubic-bezier(.2,1.5,.45,1) backwards}
@keyframes stampin{0%{opacity:0;transform:scale(1.45) rotate(-3deg)}55%{opacity:1}100%{opacity:1;transform:none}}
.fstamp{display:inline-block;margin-top:18px;padding-left:13px;border-left:3px solid var(--red);font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;font-size:15px;letter-spacing:.11em;text-transform:uppercase;color:#eef2f5}

/* --- proof band (real photo + credentials) --- */
.proof{background:var(--stone);position:relative;overflow:hidden}
.proof::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--red),rgba(255,49,49,0))}
.proof-grid{display:grid;grid-template-columns:.82fr 1fr;gap:clamp(30px,5vw,66px);align-items:center}
.proof-visual{position:relative;padding:0 0 34px 30px}
.proof-visual::before{content:"";position:absolute;left:0;bottom:0;width:64%;height:68%;background:var(--navy);border-radius:2px}
.proof-visual img{position:relative;z-index:2;width:100%;height:auto;border-radius:2px;border-top:5px solid var(--red);box-shadow:0 26px 58px rgba(15,26,38,.3)}
.proof-cap{position:relative;z-index:2;margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.proof-copy h2{margin:0 0 16px}
.proof-copy .lead{max-width:580px}
.proof-list{list-style:none;margin:28px 0 30px}
.proof-list li{display:flex;gap:16px;padding:17px 0;border-top:1px solid var(--line)}
.proof-list li:last-child{border-bottom:1px solid var(--line)}
.proof-list .proof-ic{flex:none;width:44px;height:44px;border:2px solid var(--navy);border-radius:2px;display:flex;align-items:center;justify-content:center;color:var(--navy);transition:.25s}
.proof-list li:hover .proof-ic{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(-4deg)}
.proof-list b{display:block;font-family:'Oswald','Arial Narrow',sans-serif;font-size:17.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--navy);margin-bottom:3px}
.proof-list li>div>span{display:block;font-size:15px;color:var(--muted);line-height:1.55}
.proof-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.proof-cta .ph{font-family:'Oswald','Arial Narrow',sans-serif;font-size:21px;letter-spacing:.03em;color:var(--navy);transition:color .18s}
.proof-cta .ph:hover{color:var(--red)}
@media(max-width:900px){
  .proof-grid{grid-template-columns:1fr}
  .proof-visual{max-width:420px;margin:0 auto;width:100%}
  }
/* --- footer tidy --- */
footer{padding:56px 0 0}
.fgrid{grid-template-columns:1.5fr .95fr .95fr 1fr;gap:30px 40px;padding-bottom:42px;align-items:start}
footer img.flogo{width:172px;margin-bottom:12px}
footer .fabout{font-size:14px;line-height:1.66;max-width:300px}
footer h4{font-size:13.5px;letter-spacing:.14em;margin-bottom:16px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.13);position:relative}
footer h4::after{content:"";position:absolute;left:0;bottom:-1px;width:32px;height:2px;background:var(--red)}
footer li{margin-bottom:8px}
footer a{font-size:14px;line-height:1.5}
footer .fgoogle{margin-top:16px}
.fstamp{display:block;margin:0 0 14px;padding:0;border:0;font-family:'Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#8fa0ae}
@media(min-width:1101px){footer .fgrid{padding-right:200px}}

/* --- mascot swipe-ins --- */
/* NOTE: the swipe transform lives on the <img>, never on .cta-mascot itself.
   The IntersectionObserver watches .cta-mascot, so moving that box off-screen
   would stop it ever intersecting and the mascot would never appear. */
@media(min-width:961px){
  .reveal.cta-mascot{opacity:1;transform:none;overflow:visible}
  .reveal.cta-mascot img{opacity:0;transform:translateX(150%) rotate(6deg)}
  .reveal.cta-mascot.in img{opacity:1;transform:translateX(0) rotate(0);transition:transform 1.05s cubic-bezier(.14,1.05,.28,1),opacity .4s ease}
  .cta-mascot::after{content:"";position:absolute;left:-8%;bottom:44px;width:116%;height:26px;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
  .cta-mascot.in::after{animation:dust .9s .6s ease-out backwards}
  @keyframes dust{0%{opacity:0;transform:scaleX(.25) scaleY(.5)}22%{opacity:.9}100%{opacity:0;transform:scaleX(1.6) scaleY(1.5) translateY(-8px)}}
  .welcome-mascot.reveal{opacity:0;transform:translateX(-80px)}
  .welcome-mascot.reveal.in{opacity:1;transform:none;transition:transform .95s cubic-bezier(.16,1.04,.3,1),opacity .5s ease}
}
@media(max-width:960px){
  .reveal.cta-mascot{opacity:0;transform:translateY(24px)}
  .reveal.cta-mascot.in{opacity:1;transform:none;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s}
}

@media(prefers-reduced-motion:reduce){
  .page{animation:none}
  .sprog{display:none}
  .reveal.in .eyebrow,.reveal.in .rule,.rule.reveal.in,.reveal.in .stamp,.cta-mascot.in::after{animation:none}
  .reveal.cta-mascot,.reveal.cta-mascot img,.welcome-mascot.reveal{opacity:1;transform:none;transition:none}
  nav.main.stuck .nl{padding-top:8px;padding-bottom:8px}
}

/* --- area page: local work section --- */
.localwork{background:var(--stone)}
.localwork .sec-head{max-width:760px;margin-bottom:30px}
.lw-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lw-list li{background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);border-radius:2px;padding:24px 24px 26px;transition:transform .22s,box-shadow .22s}
.lw-list li:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(20,37,52,.13)}
.lw-list b{display:block;font-family:'Oswald','Arial Narrow',sans-serif;font-size:18px;text-transform:uppercase;letter-spacing:.03em;color:var(--navy);margin-bottom:8px}
.lw-list span{display:block;font-size:15px;color:var(--muted);line-height:1.6}
.lw-near{margin-top:30px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:15px;color:var(--muted)}
.lw-near b{font-family:'Inter',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;color:var(--navy);margin-right:4px}
.lw-near a{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:2px;padding:9px 15px;font-weight:600;color:var(--navy);transition:.16s}
.lw-near a:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-2px)}
@media(max-width:900px){.lw-list{grid-template-columns:1fr}}

/* ============================================================================
   v5 MOTION LAYER
   Ported from bedford-auto-care v9.3. Same engine, Cougar tokens.

   Replaces the old snap-on-intersection reveal with a scroll linked one, and
   adds parallax, curtain photo reveals, 3d tilt plates, angled section seams
   and a retracting nav. The existing .reveal / .reveal-l / .reveal-r classes
   and the .in class they receive are unchanged, so every rule already hanging
   off .reveal.in (stars, bars, rule draw, stamp, accent underline, mascots)
   keeps working exactly as it did.
   ========================================================================== */

/* --p is scroll progress, 0 to 1, resolved per element. Registering it as a
   real number lets it interpolate on the compositor instead of restyling.
   initial-value is 1 so that with the engine off, or if it ever throws,
   content is simply visible. */
@property --p { syntax:'<number>'; inherits:true; initial-value:1; }

/* --------------------------------------------------------------------------
   1. Scroll linked reveal
   Not an intersection toggle. Each element maps its own position in the
   viewport onto --p across a window of travel, so a row of cards staggers by
   where the cards physically sit rather than by a hardcoded 85ms ladder, and
   a fast scroll never snaps a half finished element into place.
   The engine adds .pmot only to the elements it drives, so the hero sequence
   and the two mascot entrances keep their bespoke animations.
   -------------------------------------------------------------------------- */
.pmot.pmot{
  opacity:var(--p);
  transform:translate3d(0,calc(12px * (1 - var(--p))),0);
  transition:none;
  transition-delay:0s !important;
  will-change:transform,opacity;
}
.reveal-l.pmot.pmot{ transform:translate3d(calc(-28px * (1 - var(--p))),0,0); }
.reveal-r.pmot.pmot{ transform:translate3d(calc(28px * (1 - var(--p))),0,0); }

/* --------------------------------------------------------------------------
   2. Curtain reveal for photos and video
   A panel the colour of the section slides off the picture while the picture
   settles out of a slight scale. The image itself is never clipped, so
   nothing is cropped on the way in. Set --curtain to match the section.
   -------------------------------------------------------------------------- */
.shot{ position:relative; overflow:hidden; --curtain:var(--stone); }
.shot > img,.shot > video,.shot > .ph,.shot > .timg{
  transform:scale(calc(1 - .09 * (1 - var(--p,1))));
  will-change:transform; transition:none;
}
.shot::after{
  content:""; position:absolute; inset:0; z-index:4;
  background:var(--curtain);
  transform:translateX(calc(-100% * var(--p,1)));
  will-change:transform; pointer-events:none;
}
.about .shot,.gmb .shot,.welcome .shot{ --curtain:#fff; }
.process .shot,.areas .shot,.vstrip .shot,.ctaband .shot{ --curtain:var(--navy); }

/* --------------------------------------------------------------------------
   3. Parallax
   JS writes a transform onto any [data-parallax]. The value is the travel
   factor: .10 is a whisper, .22 is strong. The node must be taller than its
   frame or the edge shows, hence the inset on the bleed layers below.
   -------------------------------------------------------------------------- */
[data-parallax]{ will-change:transform; }
/* scoped with :has so pages without the parallax hook keep their overflow,
   and so the .about-badge on other layouts is never clipped. The shadow moves
   out to the frame because the inner plate now travels inside it. */
.about-visual:has(.ph[data-parallax]){
  overflow:hidden; border-radius:3px;
  box-shadow:0 18px 44px rgba(20,37,52,.22);
}
.about-visual .ph[data-parallax]{
  height:472px; margin-top:-21px;
  border-radius:0; box-shadow:none;
}

/* --------------------------------------------------------------------------
   4. 3d tilt plate. Pointer devices only.
   -------------------------------------------------------------------------- */
.tilt{ perspective:1400px; }
.tilt__in{
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.tilt__in > *{ transform:translateZ(0); }
.tilt.is-live .tilt__in{ transition:transform .12s linear; }

/* --------------------------------------------------------------------------
   5. Angled seams between sections
   --seam-a is the section above, --seam-b the one below. Clip-path rather
   than a corner gradient: a corner gradient puts the wrong colour along the
   seam's own bottom edge and reads as a second cutout. The -1px bleed stops
   a hairline appearing at fractional zoom levels.
   -------------------------------------------------------------------------- */
.seam{
  --seam-h:64px;
  position:relative; display:block; flex:none;
  height:var(--seam-h); width:100%;
  background:var(--seam-a,var(--stone));
  overflow:hidden; margin-bottom:-1px;
}
.seam::after{
  content:""; position:absolute; inset:0 0 -1px 0;
  background:var(--seam-b,var(--navy));
}
.seam--rise::after{ clip-path:polygon(0 100%,100% 0,100% 100%); }
.seam--fall::after{ clip-path:polygon(0 0,100% 100%,0 100%); }

/* --------------------------------------------------------------------------
   6. Nav retracts going down, returns going up
   -------------------------------------------------------------------------- */
nav.main{ transition:transform .32s cubic-bezier(.22,.68,.24,1),background .2s,box-shadow .2s; }
nav.main.away{ transform:translateY(-104%); }
body.menu-open nav.main.away{ transform:none; }

/* --------------------------------------------------------------------------
   7. Video strip
   -------------------------------------------------------------------------- */
.vstrip{
  position:relative; overflow:hidden;
  background:var(--navy); color:#fff;
  padding:72px 0;
}
.vstrip .vs-bg{
  position:absolute; inset:-12% 0;
  background:url("../work3.jpg") center/cover;
  opacity:.22; z-index:0;
}
.vstrip .vs-ov{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,rgba(14,26,38,.95) 0%,rgba(14,26,38,.86) 52%,rgba(20,37,52,.72) 100%);
}
.vstrip .wrap{ position:relative; z-index:2; }
.vs-grid{ display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(30px,4.4vw,60px); align-items:center; }
.vstrip h2{ color:#fff; margin:0 0 4px; font-size:clamp(28px,3.1vw,40px); max-width:19ch; }
.vstrip .acc{ color:#fff; }
.vstrip .acc::after{ background:var(--red); opacity:1; }
.vstrip .rule{ margin:18px 0 0; }
.vs-copy p{ color:#c3cdd6; font-size:17.5px; margin-top:20px; max-width:52ch; }
.vs-copy .checks{ grid-template-columns:1fr; gap:9px; margin:22px 0 26px; }
.vs-copy .checks li{ color:#e7ecf1; }
.vs-cta{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.vs-cta .vs-ph{
  font-family:'Oswald','Arial Narrow',sans-serif; font-size:21px;
  letter-spacing:.03em; color:#fff; transition:color .18s;
}
.vs-cta .vs-ph:hover{ color:var(--red); }
.vs-more{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font-weight:700; font-size:14.5px; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; border-bottom:2px solid var(--red); padding-bottom:4px;
  transition:color .18s,gap .18s;
}
.vs-more:hover{ color:var(--red); gap:13px; }
.vs-media{ position:relative; }
.vs-media .frame{
  position:relative; border-radius:3px; overflow:hidden;
  box-shadow:0 30px 64px rgba(6,12,18,.5);
  border-top:5px solid var(--red);
}
.vs-note{
  margin-top:14px; font-size:12.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:#8e9aa6;
}
@media(max-width:960px){
  .vs-grid{ grid-template-columns:1fr; }
  .vstrip{ padding:54px 0; }
  .seam{ --seam-h:32px; }
}

/* --------------------------------------------------------------------------
   8. YouTube facade
   The poster and the button are plain HTML. The player iframe is only
   fetched on click, so the page does not carry roughly 1MB of YouTube
   script on load, and the video never touches Core Web Vitals.
   -------------------------------------------------------------------------- */
.ytlite{
  position:relative; display:block; width:100%;
  aspect-ratio:16 / 9; background:#000;
  overflow:hidden; cursor:pointer;
}
.ytlite > img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .25s;
}
.ytlite:hover > img{ transform:scale(1.03); filter:brightness(.88); }
.ytlite__play{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:clamp(66px,8.4vw,94px); height:auto;
  border:0; background:none; padding:0; cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.ytlite__play svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)); }
.ytlite__bg{ fill:rgba(20,37,52,.9); transition:fill .22s; }
.ytlite:hover .ytlite__play{ transform:translate(-50%,-50%) scale(1.07); }
.ytlite:hover .ytlite__bg{ fill:var(--red); }
.ytlite__play:focus-visible{ outline:3px solid var(--red); outline-offset:6px; }
.ytlite__link{
  position:absolute; top:10px; right:10px; z-index:3;
  font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.86);
  text-decoration:none; background:rgba(14,26,38,.74); padding:6px 10px;
}
.ytlite__link:hover{ color:#fff; background:var(--red); }
.ytlite iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* --------------------------------------------------------------------------
   9. Reduced motion. Everything composed, nothing animated, nothing hidden.
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .pmot.pmot{ --p:1 !important; opacity:1 !important; transform:none !important; }
  .shot::after{ display:none; }
  .shot > img,.shot > video,.shot > .ph,.shot > .timg{ transform:none !important; }
  [data-parallax]{ transform:none !important; }
  .about-visual .ph[data-parallax]{ height:430px; margin-top:0; }
  .about-visual:has(.ph[data-parallax]){ box-shadow:0 18px 44px rgba(20,37,52,.22); }
  nav.main.away{ transform:none; }
  .ytlite > img{ transition:none; }
}

/* parallax layers need to overhang their frame or the edge shows on travel */
.hero .bgv[data-parallax]{ height:120%; top:-10%; }
.ctaband .bg[data-parallax]{ inset:-14% 0; }
@media(prefers-reduced-motion:reduce){
  .hero .bgv[data-parallax]{ height:100%; top:0; }
  .ctaband .bg[data-parallax]{ inset:0; }
}