/* ============================================================
   LAW PLASTERING — design system
   Crimson + charcoal-navy. Plus Jakarta Sans / Inter.
   ============================================================ */
:root{
  /* brand */
  --red:#DC2626; --red-2:#B91C1C; --red-soft:#FEE2E2;
  --ink:#0E1726; --navy:#142339; --navy-deep:#0A1320;
  --body:#374151; --muted:#586374; --line:#E6EBF2;
  --bg:#FFFFFF; --bg-alt:#F5F8FC; --cream:#F9FBFE;
  --white:#fff;
  /* type */
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  /* shape */
  --r:14px; --r-lg:20px; --r-sm:10px;
  --shadow-sm:0 4px 14px rgba(14,23,38,.06);
  --shadow:0 12px 34px rgba(14,23,38,.10);
  --shadow-lg:0 24px 60px rgba(14,23,38,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body); color:var(--body); background:var(--bg);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink); line-height:1.12; font-weight:800; letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:1.2rem}
p{text-wrap:pretty}
svg.i{width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.section{padding:clamp(22px,3vw,48px) 0}
.section--alt{background:var(--bg-alt)}
.section--ink{background:var(--ink); color:#C7D2E0}
.section--ink h2,.section--ink h3{color:#fff}
.sec-head{max-width:660px; margin:0 auto clamp(20px,3vw,32px); text-align:center}
.sec-head h2{margin:10px 0 12px}
.sec-head h2::after{content:""; display:block; width:56px; height:4px; background:var(--red); border-radius:2px; margin:16px auto 0}
.sec-head p{color:var(--muted); font-size:1.04rem}
.section--ink .sec-head p{color:#9DB0C6}

.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red);
  background:var(--red-soft); padding:7px 14px; border-radius:999px}
.section--ink .eyebrow{background:rgba(220,38,38,.16); color:#EF4444}
.t-grad{color:var(--red)}
.accent{color:var(--red)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-display);
  font-weight:700; font-size:.94rem; padding:13px 22px; border-radius:var(--r-sm); border:1.5px solid transparent;
  cursor:pointer; transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s,border-color .2s; white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn .i{width:1.15em;height:1.15em}
.btn--red{background:var(--red); color:#fff; box-shadow:0 10px 24px rgba(220,38,38,.32)}
.btn--red:hover{background:var(--red-2); box-shadow:0 14px 30px rgba(220,38,38,.4)}
.btn--wa{background:#128C3E; color:#fff; box-shadow:0 10px 24px rgba(37,211,102,.3)}
.btn--wa:hover{background:#0E7536}
.btn--dark{background:var(--ink); color:#fff}
.btn--dark:hover{background:var(--navy)}
.btn--ghost{background:transparent; border-color:rgba(255,255,255,.4); color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12); border-color:#fff}
.btn--outline{background:transparent; border-color:var(--line); color:var(--ink)}
.btn--outline:hover{border-color:var(--red); color:var(--red)}
.btn--lg{padding:16px 28px; font-size:1rem}
.btn--block{width:100%}
.btn:hover .i:last-child{transform:translateX(3px)}
.btn .i{transition:transform .2s var(--ease)}

/* ---------- header / nav ---------- */
#site-header{display:contents}
.site-header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); transition:box-shadow .3s var(--ease)}
.site-header.scrolled{box-shadow:0 8px 28px rgba(14,23,38,.1)}
.nav{display:flex; align-items:center; gap:22px; height:84px; transition:height .3s var(--ease)}
.site-header.scrolled .nav{height:72px}
.logo{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:800; color:#0A0A0A; font-size:1.16rem; letter-spacing:-.01em}
.logo__mark{width:46px; height:46px; border-radius:11px; background:var(--red); display:grid; place-items:center; color:#fff; font-size:1.3rem; font-weight:800; box-shadow:0 6px 16px rgba(220,38,38,.4)}
.logo__mark{overflow:hidden; padding:0}
img.logo__mark{object-fit:cover}
.logo__txt{display:flex; flex-direction:column; line-height:1.04}
.logo__name{font-family:var(--font-display); font-weight:800; color:#0A0A0A; font-size:1.14rem; letter-spacing:-.01em}
.logo__name b{color:var(--red)}
.logo__tag{font-family:var(--font-display); font-weight:700; font-size:.6rem; letter-spacing:.17em; text-transform:uppercase; color:#0A0A0A; margin-top:2px}
.nav ul{display:flex; align-items:center; gap:4px; list-style:none; margin:0 auto}
.nav ul a{display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-radius:8px; color:#0A0A0A; font-weight:600; font-size:.98rem; transition:color .2s,background .2s}
.nav ul a:hover,.nav ul a.active{color:var(--red); background:var(--red-soft)}
.caret{width:15px;height:15px}
.has-dd{position:relative}
.dd{position:absolute; top:calc(100% + 8px); left:0; min-width:248px; background:#fff; border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.22s var(--ease); border:1px solid var(--line)}
.has-dd:hover .dd,.has-dd:focus-within .dd{opacity:1; visibility:visible; transform:none}
.dd a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; color:var(--ink); font-size:.9rem; font-weight:600}
.dd a:hover{background:var(--red-soft); color:var(--red)}
.dd a .i{color:var(--red); width:18px;height:18px}
.nav .actions{display:flex; align-items:center; gap:9px}
.nav .actions .btn{padding:10px 16px; font-size:.86rem}
.burger{display:none; background:var(--red-soft); border:0; color:var(--red); width:44px;height:44px; border-radius:10px; cursor:pointer; align-items:center; justify-content:center}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--navy-deep); color:#fff; overflow:hidden; isolation:isolate}
.hero__bg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2; opacity:.32}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 80% 10%,rgba(220,38,38,.28),transparent 55%),linear-gradient(180deg,rgba(10,19,32,.7),rgba(10,19,32,.96))}
.hero__inner{padding:clamp(60px,9vw,120px) 0 clamp(54px,7vw,90px); max-width:760px}
.hero .eyebrow{background:rgba(220,38,38,.18); color:#EF4444}
.hero h1{color:#fff; margin:18px 0 0}
.hero h1 .line2{display:block; color:var(--red); background:linear-gradient(90deg,#ef4444,#DC2626); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero .sub{font-size:1.12rem; color:#B9C6D8; margin:20px 0 0; max-width:560px}
.cta-row{display:flex; flex-wrap:wrap; gap:13px; margin-top:30px}
.hero__trust{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px; max-width:730px}
.hero__tcard{display:flex; align-items:center; gap:15px; background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:20px; box-shadow:0 12px 30px rgba(0,0,0,.22); transition:transform .28s var(--ease),border-color .28s,box-shadow .28s}
.hero__tcard:hover{transform:translateY(-5px); border-color:rgba(239,68,68,.55); box-shadow:0 18px 42px rgba(220,38,38,.28)}
.hero__tcard .ic{width:50px;height:50px; border-radius:14px; background:linear-gradient(135deg,#EF4444,var(--red-2)); color:#fff; display:grid; place-items:center; flex:none; box-shadow:0 10px 22px rgba(220,38,38,.5)}
.hero__tcard .ic .i{width:25px;height:25px}
.hero__tcard b{display:block; color:#fff; font-family:var(--font-display); font-size:1.12rem; line-height:1.05; white-space:nowrap}
.hero__tcard span{display:block; font-size:.76rem; color:#AEBBCD; line-height:1.3; margin-top:4px}

/* trust strip */
.marquee{background:linear-gradient(90deg,var(--navy-deep),var(--ink),var(--navy-deep)); border-top:1px solid rgba(220,38,38,.25); border-bottom:1px solid rgba(220,38,38,.25); overflow:hidden; padding:16px 0}
.marquee__track{display:flex; gap:50px; width:max-content; animation:slide 55s linear infinite}
.m-item{display:inline-flex; align-items:center; gap:11px; color:#E4EBF3; font-weight:700; font-size:1.14rem; white-space:nowrap}
.m-item .i{color:var(--red); width:22px;height:22px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- service cards ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.svc{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.svc:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}
.svc__img{position:relative; aspect-ratio:16/11; background:linear-gradient(135deg,var(--navy),var(--navy-deep)); overflow:hidden; display:grid; place-items:center; color:#6f8198; font-size:.76rem; text-align:center; padding:14px}
.svc__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.svc:hover .svc__img img{transform:scale(1.07)}
.svc__ico{position:absolute; top:13px; left:13px; width:44px;height:44px; border-radius:12px; background:var(--red); color:#fff; display:grid; place-items:center; z-index:2; box-shadow:0 8px 20px rgba(220,38,38,.4)}
.svc__ico .i{width:23px;height:23px}
.svc__body{padding:20px; display:flex; flex-direction:column; flex:1}
.svc__body h3{margin-bottom:7px}
.svc__body p{font-size:.9rem; color:var(--muted); margin-bottom:15px}
.svc__more{margin-top:auto; display:inline-flex; align-items:center; gap:7px; color:var(--red); font-weight:700; font-size:.87rem}
.svc:hover .svc__more .i{transform:translateX(4px)}
.svc__more .i{width:16px;height:16px; transition:transform .2s var(--ease)}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.step{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.step::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--red),var(--red-2)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.step:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg)}
.step:hover::before{transform:scaleX(1)}
.step__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.step__n{width:50px;height:50px; border-radius:15px; background:linear-gradient(135deg,var(--red),var(--red-2)); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.3rem; box-shadow:0 10px 22px rgba(220,38,38,.36)}
.step__ico2{color:var(--red); opacity:.3; width:32px;height:32px}
.step h3{margin-bottom:7px; font-size:1.12rem}
.step p{font-size:.89rem; color:var(--muted)}

/* CTA band */
.cta-band{margin-top:38px; background:linear-gradient(120deg,var(--ink),var(--navy)); border-radius:var(--r-lg); padding:30px 34px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; color:#fff; box-shadow:var(--shadow)}
.cta-band h3{color:#fff; font-size:1.35rem}
.cta-band p{color:#9DB0C6; font-size:.92rem; margin-top:3px}
.cta-band .cta-row{margin-top:0}

/* ---------- value props (dark) ---------- */
.vp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.vp{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:var(--r); padding:26px; transition:transform .3s var(--ease),background .3s,border-color .3s}
.vp:hover{transform:translateY(-5px); background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.4)}
.vp__ico{width:48px;height:48px; border-radius:12px; background:var(--red); color:#fff; display:grid; place-items:center; margin-bottom:15px; box-shadow:0 8px 20px rgba(220,38,38,.35)}
.vp__ico .i{width:25px;height:25px}
.vp h3{color:#fff; margin-bottom:7px; font-size:1.1rem}
.vp p{color:#9DB0C6; font-size:.9rem}

/* ---------- transformations / gallery cards ---------- */
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.work{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease),box-shadow .3s}
.work:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.work__img{position:relative; aspect-ratio:4/3; background:linear-gradient(135deg,var(--navy),var(--navy-deep)); overflow:hidden; display:grid; place-items:center; color:#6f8198; font-size:.78rem; text-align:center; padding:14px}
.work__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.work:hover .work__img img{transform:scale(1.06)}
.work__tag{position:absolute; top:12px; left:12px; z-index:2; background:var(--red); color:#fff; font-size:.7rem; font-weight:700; padding:5px 11px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em}
.work__body{padding:18px 20px}
.work__body h3{font-size:1.08rem; margin-bottom:5px}
.work__body p{font-size:.88rem; color:var(--muted)}

/* ---------- reviews ---------- */
.rev-head{text-align:center; margin-bottom:36px}
.stars{color:var(--red); font-size:1.4rem; letter-spacing:3px}
.rev-score{display:inline-flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 22px; box-shadow:var(--shadow-sm); margin-top:14px; font-weight:700; color:var(--ink)}
.rev-score b{font-size:1.6rem; color:var(--red); font-family:var(--font-display)}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px}
.rev{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow-sm)}
.rev .stars{font-size:1rem; letter-spacing:2px}
.rev p{margin:12px 0; color:var(--body); font-size:.94rem}
.rev cite{display:flex; align-items:center; gap:10px; font-style:normal; font-weight:700; color:var(--ink); font-size:.9rem}
.rev .av{width:38px;height:38px; border-radius:50%; background:var(--red-soft); color:var(--red); display:grid; place-items:center; font-weight:800; font-family:var(--font-display)}

/* ---------- area cards ---------- */
.area-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.area{display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .3s var(--ease),box-shadow .3s}
.area:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.area__img{position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,var(--navy),var(--navy-deep))}
.area__img img{width:100%;height:100%;object-fit:cover; transition:transform .5s var(--ease)}
.area:hover .area__img img{transform:scale(1.07)}

.area__body{padding:18px 20px}
.area__body h3{color:var(--ink); display:flex; align-items:center; gap:8px; font-size:1.16rem}
.area__body h3 .i{color:var(--red); width:18px;height:18px}
.area__body p{color:var(--muted); font-size:.87rem; margin-top:5px; line-height:1.45}
.area__more{display:inline-flex; align-items:center; gap:6px; margin-top:11px; font-weight:700; font-size:.84rem; color:var(--red)} .area:hover .area__more .i{transform:translateX(3px)} .area__more .i{transition:transform .2s var(--ease)}

/* ---------- contact ---------- */
.contact-split{display:grid; grid-template-columns:.82fr 1.18fr; gap:26px; align-items:start}
.contact-info{background:linear-gradient(150deg,var(--ink),var(--navy)); color:#fff; border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow)}
.contact-info h3{color:#fff}
.contact-info>p{color:#9DB0C6; font-size:.92rem; margin:8px 0 22px}
.ci-row{display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid rgba(255,255,255,.09)}
.ci-row:first-of-type{border-top:0}
.ci-ico{width:44px;height:44px; border-radius:12px; background:rgba(220,38,38,.16); color:#EF4444; display:grid; place-items:center; flex:none}
.ci-row b{color:#fff; font-family:var(--font-display); font-size:.95rem; display:block}
.ci-row span,.ci-row a{color:#B9C6D8; font-size:.9rem}
.ci-row a:hover{color:#fff}
.hours{margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.09)}
.hours b{color:#fff; display:flex; align-items:center; gap:8px; font-family:var(--font-display); margin-bottom:9px}
.hours .row{display:flex; justify-content:space-between; font-size:.87rem; padding:3px 0; color:#9DB0C6}
.hours .row span:last-child{color:#fff; font-weight:600}
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow)}
.form-head{display:flex; align-items:center; gap:13px; margin-bottom:20px}
.fh-ico{width:46px;height:46px; border-radius:12px; background:var(--red); color:#fff; display:grid; place-items:center; flex:none}
.form-head h3{font-size:1.2rem}
.form-head p{font-size:.86rem; color:var(--muted)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:15px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.82rem; font-weight:600; color:var(--ink)}
.field input,.field select,.field textarea{font-family:var(--font-body); font-size:.92rem; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--cream); color:var(--ink); transition:border-color .2s,box-shadow .2s; width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 4px var(--red-soft)}
.field textarea{min-height:108px; resize:vertical}
.consent{grid-column:1/-1; display:flex; gap:9px; align-items:flex-start; font-size:.8rem; color:var(--muted)}
.consent input{margin-top:3px}
.form-note{text-align:center; font-size:.8rem; color:var(--muted); margin-top:13px}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden}
.faq summary{cursor:pointer; padding:18px 22px; font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1rem; display:flex; align-items:center; justify-content:space-between; gap:14px; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.5rem; color:var(--red); font-weight:400; transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 22px 20px; color:var(--body); font-size:.93rem}

/* ---------- split / photo placeholders (inner pages) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); align-items:center}
.ph{background:linear-gradient(135deg,var(--navy),var(--navy-deep)); color:#6f8198; display:grid; place-items:center; font-size:.82rem; text-align:center; border-radius:var(--r-lg); aspect-ratio:4/3; padding:18px; overflow:hidden}
.ph--img{padding:0}
.ph--img img,.ph img{width:100%; height:100%; object-fit:cover; display:block}
.flist{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px}
.flist li{position:relative; padding-left:30px; font-size:.95rem; color:var(--body)}
.flist li::before{content:""; position:absolute; left:0; top:2px; width:20px;height:20px; border-radius:50%; background:var(--red-soft)}
.flist li::after{content:""; position:absolute; left:6px; top:8px; width:8px;height:5px; border-left:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep); color:#9DB0C6; padding:60px 0 26px}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:34px}
.f-brand p{font-size:.9rem; margin:16px 0; max-width:330px}
.foot-logo{display:flex; align-items:center; gap:10px; color:#fff; font-family:var(--font-display); font-weight:800; font-size:1.1rem}
.site-footer h4{color:#fff; font-size:.95rem; margin-bottom:16px; font-family:var(--font-display)}
.f-links{list-style:none; padding:0; display:flex; flex-direction:column; gap:9px}
.f-links a{font-size:.89rem; transition:color .2s}
.f-links a:hover{color:var(--red)}
.f-row{display:flex; gap:9px; font-size:.89rem; margin-bottom:9px}
.f-row .i{color:var(--red); width:17px;height:17px; flex:none; margin-top:2px}
.socials{display:flex; gap:10px; margin-top:18px}
.socials a{width:40px;height:40px; border-radius:10px; background:rgba(255,255,255,.07); display:grid; place-items:center; color:#C7D2E0; transition:.2s}
.socials a:hover{background:var(--red); color:#fff; transform:translateY(-2px)}
.socials .i{width:19px;height:19px}
.foot-bot{border-top:1px solid rgba(255,255,255,.08); margin-top:40px; padding-top:20px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px 20px; font-size:.74rem; color:#6f8198}
.foot-bot a:hover{color:#fff}

/* ---------- floating widgets ---------- */
.wa-float{position:fixed; bottom:22px; right:22px; z-index:80}
.wa-launch{width:58px;height:58px; border-radius:50%; background:#128C3E; color:#fff; border:0; display:grid; place-items:center; cursor:pointer; box-shadow:0 12px 30px rgba(37,211,102,.5); animation:pulse 2.6s infinite}
.wa-launch .i{width:30px;height:30px}
@keyframes pulse{0%,100%{box-shadow:0 12px 30px rgba(37,211,102,.5)}50%{box-shadow:0 12px 30px rgba(37,211,102,.5),0 0 0 12px rgba(37,211,102,0)}}
.mobile-cta{position:fixed; bottom:0; left:0; right:0; z-index:75; display:none; gap:1px; background:rgba(255,255,255,.1)}
.mobile-cta a{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; font-family:var(--font-display); font-weight:700; font-size:.92rem; color:#fff}
.mc-call{background:var(--ink)} .mc-wa{background:#128C3E}

/* scroll progress + skip */
.scroll-prog{position:fixed; top:0; left:0; height:3px; background:var(--red); z-index:100; width:0}
.skip-link{position:fixed; top:-60px; left:14px; z-index:200; background:var(--red); color:#fff; font-weight:700; padding:11px 18px; border-radius:0 0 10px 10px; transition:top .2s var(--ease)}
.skip-link:focus{top:0}
:focus-visible{outline:3px solid var(--red); outline-offset:2px; border-radius:4px}

/* reveal */
[data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease),transform .7s var(--ease); transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; transition:none!important} [data-reveal]{opacity:1;transform:none} .marquee__track{animation:slide 55s linear infinite!important}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  .nav ul{display:none} .burger{display:flex}
  .nav.open ul{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:#fff; padding:14px; gap:4px; border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
  .nav.open ul a{padding:13px} .nav.open .dd{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; background:var(--bg-alt); margin:4px 0}
  .nav.open .dd a{color:var(--body); display:flex; width:100%} .nav.open .dd a:hover{color:var(--red);background:var(--red-soft)}
}
@media (max-width:900px){
  .vp-grid,.work-grid,.rev-grid,.area-grid{grid-template-columns:1fr 1fr}
  .contact-split{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .nav .actions .btn span.lbl{display:none}
}
@media (max-width:600px){
  .svc-grid,.steps,.vp-grid,.work-grid,.rev-grid,.area-grid,.form-grid,.hero__trust{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .mobile-cta{display:flex} .wa-float{bottom:74px}
  body{padding-bottom:54px}
  .cta-band{padding:24px}
  .cta-band .cta-row .btn{flex:1}
}

/* ---------- premium footer ---------- */
.site-footer{background:var(--navy-deep); color:#9DB0C6; padding:0 0 24px; border-top:3px solid var(--red)}
.foot-badges{background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.07); padding:20px 0}
.foot-badges .row{display:flex; flex-wrap:wrap; gap:12px 30px; justify-content:center; align-items:center}
.foot-badge{display:inline-flex; align-items:center; gap:9px; color:#C7D2E0; font-weight:600; font-size:.9rem}
.foot-badge .i{color:var(--red); width:19px;height:19px}
.foot-badges .sep{width:5px;height:5px;border-radius:50%;background:var(--red);opacity:.8}
.foot-main{padding:46px 0 8px}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:36px}
.foot-logo-img{width:112px;height:112px;object-fit:cover;border-radius:18px;margin-bottom:12px;box-shadow:0 12px 26px rgba(0,0,0,.28)}
.foot-logo-lock{display:inline-flex; align-items:center; gap:13px; margin-bottom:8px}
.foot-logo-lock img{width:58px;height:58px;border-radius:14px;object-fit:cover;box-shadow:0 8px 20px rgba(220,38,38,.4)}
.foot-logo-txt{display:flex;flex-direction:column;font-family:var(--font-display);font-weight:800;color:#fff;font-size:1.24rem;line-height:1.04;letter-spacing:-.01em}
.foot-logo-txt small{font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-top:3px}
.f-brand p{font-size:.9rem; margin:14px 0; max-width:330px; line-height:1.6}
.site-footer h4{color:#fff; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; font-family:var(--font-display)}
.f-links{list-style:none; padding:0; display:flex; flex-direction:column; gap:10px}
.f-links a{font-size:.89rem; display:inline-flex; align-items:center; gap:7px; transition:color .2s,gap .2s}
.f-links a::before{content:""; width:5px;height:5px;border-radius:50%;background:var(--red);opacity:.6;transition:opacity .2s}
.f-links a:hover{color:#fff; gap:10px} .f-links a:hover::before{opacity:1}
.f-row{display:flex; gap:10px; font-size:.89rem; margin-bottom:11px; align-items:flex-start}
.f-row .i{color:var(--red); width:17px;height:17px; flex:none; margin-top:2px}
.socials{display:flex; gap:10px; margin-top:18px}
.socials a{width:40px;height:40px; border-radius:11px; background:rgba(255,255,255,.07); display:grid; place-items:center; color:#C7D2E0; transition:.2s}
.socials a:hover{background:var(--red); color:#fff; transform:translateY(-3px)}
.socials .i{width:19px;height:19px}
.foot-bot{border-top:1px solid rgba(255,255,255,.08); margin-top:34px; padding-top:20px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px 20px; font-size:.74rem; color:#6f8198}
.foot-bot a:hover{color:#fff}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr} .foot-badges .row{gap:10px 18px}}
/* ---------- micro-animations ---------- */
@keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero__inner>*{opacity:0;animation:heroIn .75s var(--ease) forwards}
.hero__inner>*:nth-child(1){animation-delay:.06s}
.hero__inner>*:nth-child(2){animation-delay:.16s}
.hero__inner>*:nth-child(3){animation-delay:.26s}
.hero__inner>*:nth-child(4){animation-delay:.36s}
.hero__inner>*:nth-child(5){animation-delay:.46s}

.hero .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#EF4444;flex:none;box-shadow:0 0 0 0 rgba(239,68,68,.55);animation:dotPulse 2.2s infinite}
@keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 9px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}

.btn--red{overflow:hidden}
.btn--red::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:42%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);pointer-events:none}
.btn--red:hover::after{animation:btnShine .7s var(--ease)}
@keyframes btnShine{to{left:120%}}

.svc__ico,.step__n,.vp__ico,.fh-ico{transition:transform .35s var(--ease)}
.svc:hover .svc__ico,.step:hover .step__n,.vp:hover .vp__ico{transform:scale(1.12) rotate(-6deg)}

.vp{overflow:hidden}
.vp::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);transform:skewX(-18deg);pointer-events:none}
.vp:hover::after{animation:cardShine .9s var(--ease)}
@keyframes cardShine{to{left:135%}}

.sec-head h2::after{transition:width .5s var(--ease) .15s}
.sec-head:not(.in) h2::after{width:0}

@media (prefers-reduced-motion:reduce){.hero__inner>*{opacity:1!important;animation:none!important} .hero .eyebrow::before{animation:none!important} .sec-head h2::after{width:56px!important}}
.tag{display:inline-flex;align-items:center;background:var(--red-soft);color:var(--red);font-weight:600;font-size:.84rem;padding:7px 14px;border-radius:999px}

.trust-band-sec{background:var(--ink);padding:26px 0}
.trust-row{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;align-items:center}
.trust-item{display:inline-flex;align-items:center;gap:9px;color:#C7D2E0;font-weight:600;font-size:.92rem}
.trust-item .i{color:#EF4444;width:20px;height:20px}

/* ---------- areas map + chips ---------- */
.areas-layout{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:stretch}
.areas-map{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.1); min-height:440px}
.areas-map iframe{width:100%; height:100%; min-height:440px; border:0; display:block}
.areas-panel h3{color:#fff; font-size:1.3rem; margin-bottom:16px}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:#C7D2E0; font-family:var(--font-display); font-weight:600; font-size:.9rem; padding:9px 16px; border-radius:999px; transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s}
.chip:hover{background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.55); color:#fff; transform:translateY(-2px)}
.chip .i{color:#EF4444; width:15px;height:15px}
.chip--sm{font-size:.84rem; padding:8px 14px; color:#9DB0C6}
.areas-sub-label{color:#9DB0C6; font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; margin:26px 0 12px}
@media(max-width:900px){.areas-layout{grid-template-columns:1fr} .areas-map,.areas-map iframe{min-height:340px}}
/* footer bottom: copyright | legal (centre) | agency credit */
.foot-bot .fb-copy{justify-self:start; font-size:.82rem}
.foot-bot .fb-legal{justify-self:center; display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:center; font-size:.7rem}
.foot-bot .fb-credit{justify-self:end; text-align:right; font-size:.82rem}
.foot-bot .tfw{font-weight:700; white-space:nowrap}
.foot-bot .tfw .t-b{color:#1A56E8}
.foot-bot .tfw .t-g{color:#22C55E}
.foot-bot .tfw:hover{filter:brightness(1.18)}
@media(max-width:760px){.foot-bot{grid-template-columns:1fr; justify-items:center; text-align:center} .foot-bot .fb-copy,.foot-bot .fb-credit{justify-self:center; text-align:center}}
.foot-bot .fb-legal a{display:inline-block; padding:5px 4px}

.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}

/* related-services grid uses inline repeat(3,1fr) — make it responsive (beats the inline style) */
@media(max-width:1024px){.svc-grid[style*="repeat(3"]{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:560px){.svc-grid[style*="repeat(3"]{grid-template-columns:1fr!important}}