/* ==========================================================================
   LOGIS CLEANING SERVICES — "Clean with Experts"
   Design viewport 2000px · container 1170px · Bootstrap-3 style grid
   ========================================================================== */

:root{
  --blue:#0D9DDC;
  --blue-dark:#0A8AC4;
  --yellow:#FBD024;
  --navy:#2D3092;   /* brand wordmark navy, sampled from the Logis logo artwork */
  --ink:#333333;
  --ink-soft:#444444;
  --body:#888888;
  --muted:#9A9A9A;
  --line:#E5E5E5;
  --bg-alt:#F6F8FA;
  --footer-bg:#212121;
  --footer-text:#B5B5B5;
  --footer-line:#333333;
  --container:1170px;
  --gold-text:#B8860B; /* readable gold for small text on white/light backgrounds — raw --yellow is ~1.5:1 contrast there, near-invisible */
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  font-family:"Roboto","Open Sans",Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.8;
  color:var(--body);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
button,input,textarea{font:inherit;}
svg{display:block;}

.container{max-width:var(--container);margin:0 auto;padding:0 15px;}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  transition:opacity .5s ease,visibility .5s ease;
}
.loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.loader__mark{position:relative;width:110px;height:110px;display:flex;align-items:center;justify-content:center;}
.loader__icon{width:64px;height:64px;object-fit:contain;position:relative;z-index:2;animation:loaderPulse 1.8s ease-in-out infinite;}
.loader__ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--blue);
  animation:loaderSpin 1.1s linear infinite;
}
.loader__spark{
  position:absolute;background:var(--yellow);opacity:0;
  clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%);
  animation:loaderTwinkle 1.8s ease-in-out infinite;
}
.loader__spark--1{top:0;right:6px;width:10px;height:10px;animation-delay:.1s;}
.loader__spark--2{bottom:6px;left:0;width:7px;height:7px;background:var(--blue);animation-delay:.6s;}
.loader__spark--3{top:16px;left:-4px;width:5px;height:5px;background:var(--navy);animation-delay:1.1s;}

@keyframes loaderSpin{to{transform:rotate(360deg);}}
@keyframes loaderPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
@keyframes loaderTwinkle{0%,100%{opacity:0;transform:scale(.4);}50%{opacity:1;transform:scale(1);}}

/* ---------- scroll-reveal ---------- */
.sec-head,.offer,.abox,.post,.side__item{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s ease,transform .7s ease;
}
.sec-head.is-visible,.offer.is-visible,.abox.is-visible,.post.is-visible,.side__item.is-visible{
  opacity:1;transform:none;
}
.offer:nth-child(2){transition-delay:.08s;}
.offer:nth-child(3){transition-delay:.16s;}
.offer:nth-child(4){transition-delay:.24s;}
.abox:nth-child(2){transition-delay:.08s;}
.abox:nth-child(3){transition-delay:.16s;}
.abox:nth-child(4){transition-delay:.24s;}
.post:nth-child(2){transition-delay:.1s;}
.side__item:nth-child(2){transition-delay:.1s;}
.side__item:nth-child(3){transition-delay:.2s;}

@media (prefers-reduced-motion: reduce){
  .loader__icon,.loader__ring,.loader__spark{animation:none;}
  .sec-head,.offer,.abox,.post,.side__item{opacity:1;transform:none;transition:none;}
}

/* ---------- shared type ---------- */
h1,h2,h3,h4,h5{font-family:"Poppins","Montserrat","Segoe UI",system-ui,sans-serif;margin:0;color:var(--ink);}

.eyebrow{
  font-family:"Poppins",sans-serif;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:4px;color:var(--gold-text);
  text-align:center;margin:0;
}
.sec-title{
  font-size:40px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  line-height:1.2;text-align:center;margin:14px 0 0;
}
.ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;}
.ornament i{display:block;width:38px;height:1px;background:#333;}
.ornament svg{width:18px;height:18px;color:#333;}
.sec-head{margin-bottom:45px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Poppins",sans-serif;font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:1px;
  border:0;border-radius:999px;cursor:pointer;
  transition:background-color .3s ease,color .3s ease;
  white-space:nowrap;
}
.btn--blue{background:var(--blue);color:#fff;}
.btn--blue:hover{background:var(--blue-dark);}
.btn--white{background:#fff;color:var(--ink);}
.btn--white:hover{background:#eef4f7;}
.btn--yellow{background:var(--yellow);color:var(--ink);letter-spacing:2px;}
.btn--yellow:hover{background:#e9bf17;}

/* ---------- photo placeholders (swap for real photography — see §15 of the design spec) ---------- */
.ph{
  position:relative;overflow:hidden;background:#dfe6ea;
  display:flex;align-items:center;justify-content:center;
}
.ph::after{
  content:attr(data-label);
  position:relative;z-index:2;
  font-family:"Poppins",sans-serif;font-size:10px;font-weight:500;
  letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-align:center;padding:0 10px;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.ph--corner{align-items:flex-end;justify-content:flex-end;}
.ph--corner::after{padding:0 18px 14px;font-size:9px;letter-spacing:1.5px;opacity:.75;}
.ph img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;}

.ph--room{background:
  radial-gradient(60% 70% at 72% 45%,#e9d9c4 0%,rgba(233,217,196,0) 60%),
  radial-gradient(45% 60% at 18% 62%,#1fa3b8 0%,rgba(31,163,184,0) 62%),
  radial-gradient(55% 55% at 45% 25%,#f4efe6 0%,rgba(244,239,230,0) 70%),
  linear-gradient(150deg,#cfd8cf 0%,#8fae8c 45%,#c9b79a 100%);}
.ph--sofa{background:
  radial-gradient(55% 60% at 45% 45%,#f0e3d2 0%,rgba(240,227,210,0) 65%),
  linear-gradient(150deg,#e7ddd0 0%,#b59f88 60%,#7d6a58 100%);}
.ph--carpet{background:
  radial-gradient(55% 60% at 50% 45%,#e8d6c0 0%,rgba(232,214,192,0) 65%),
  linear-gradient(150deg,#d9cbb6 0%,#a8907a 100%);}
.ph--bath{background:
  radial-gradient(60% 60% at 35% 40%,#f3f6f7 0%,rgba(243,246,247,0) 65%),
  linear-gradient(160deg,#dfe7e6 0%,#b9c9c6 55%,#8fa6a3 100%);}
.ph--kitchen{background:
  radial-gradient(55% 60% at 60% 35%,#ffe9c9 0%,rgba(255,233,201,0) 65%),
  linear-gradient(150deg,#e6cfae 0%,#b98f68 60%,#7d5f45 100%);}
.ph--bucket{background:
  radial-gradient(50% 55% at 45% 55%,#2fb3d6 0%,rgba(47,179,214,0) 62%),
  linear-gradient(150deg,#dfe7ea 0%,#9fb6bf 60%,#6f8b96 100%);}
.ph--pest{background:
  radial-gradient(50% 55% at 50% 48%,#8fd14f 0%,rgba(143,209,79,0) 64%),
  linear-gradient(150deg,#e7efe2 0%,#8fa484 100%);}
.ph--spray{background:
  radial-gradient(50% 55% at 45% 50%,#6fd3c2 0%,rgba(111,211,194,0) 64%),
  linear-gradient(150deg,#eef5f3 0%,#87a8a1 100%);}
.ph--mosquito{background:
  radial-gradient(50% 55% at 55% 42%,#a8c66c 0%,rgba(168,198,108,0) 64%),
  linear-gradient(150deg,#5b7c7c 0%,#3a5a5a 55%,#243b47 100%);}
.ph--desk{background:
  radial-gradient(55% 60% at 50% 40%,#f6f8f9 0%,rgba(246,248,249,0) 65%),
  linear-gradient(150deg,#e2ebef 0%,#9fb9c6 100%);}
.ph--mop{background:
  radial-gradient(50% 55% at 55% 55%,#38bde0 0%,rgba(56,189,224,0) 62%),
  linear-gradient(150deg,#eef4f6 0%,#7fb6ca 100%);}
.ph--cart{background:
  radial-gradient(50% 55% at 45% 55%,#f2c94c 0%,rgba(242,201,76,0) 62%),
  linear-gradient(150deg,#f0f0ee 0%,#b8b2a4 100%);}
.ph--vacuum{background:
  radial-gradient(50% 55% at 45% 50%,#4a90c8 0%,rgba(74,144,200,0) 62%),
  linear-gradient(150deg,#e8e3d9 0%,#a08f7c 100%);}
.ph--floor{background:
  radial-gradient(55% 60% at 50% 45%,#f2ede2 0%,rgba(242,237,226,0) 65%),
  linear-gradient(150deg,#e4ded2 0%,#9c9486 100%);}
.ph--garden{background:
  radial-gradient(55% 60% at 45% 50%,#7fbf5a 0%,rgba(127,191,90,0) 64%),
  linear-gradient(150deg,#dfead6 0%,#6f8f5c 100%);}
.ph--car{background:
  radial-gradient(55% 60% at 50% 48%,#cfd6db 0%,rgba(207,214,219,0) 64%),
  linear-gradient(150deg,#e6eaed 0%,#79838c 100%);}
.ph--laundry{background:
  radial-gradient(55% 60% at 48% 46%,#f5f7fa 0%,rgba(245,247,250,0) 66%),
  linear-gradient(150deg,#eef1f5 0%,#9aa6b4 100%);}
.ph--coffee{background:
  radial-gradient(55% 60% at 45% 45%,#e6cdb0 0%,rgba(230,205,176,0) 65%),
  linear-gradient(150deg,#e9ded1 0%,#b08e6d 60%,#6f523c 100%);}
.ph--cloths{background:
  radial-gradient(55% 60% at 45% 50%,#4fb6e0 0%,rgba(79,182,224,0) 62%),
  linear-gradient(150deg,#f0f3f4 0%,#8aa8b5 100%);}
.ph--hoover{background:
  radial-gradient(55% 60% at 50% 55%,#f5c542 0%,rgba(245,197,66,0) 60%),
  linear-gradient(150deg,#f2f2f0 0%,#9fa2a0 100%);}
.ph--woman{background:
  radial-gradient(42% 44% at 55% 38%,#ffd9e2 0%,rgba(255,217,226,0) 70%),
  radial-gradient(38% 44% at 48% 70%,#2f6fd0 0%,rgba(47,111,208,0) 72%),
  radial-gradient(70% 70% at 60% 55%,#f3f6f8 0%,rgba(255,255,255,0) 78%);}
.ph--mascot{background:
  radial-gradient(38% 30% at 50% 24%,#f0c9a6 0%,rgba(240,201,166,0) 70%),
  radial-gradient(46% 34% at 50% 72%,#2ec7c9 0%,rgba(46,199,201,0) 72%),
  radial-gradient(24% 26% at 32% 30%,#b98cd6 0%,rgba(185,140,214,0) 72%);}

/* ---------- brand logo lockup (§0.5) ---------- */
.logo{display:flex;align-items:center;gap:14px;flex:0 0 auto;}
.logo img{width:48px;height:48px;object-fit:contain;flex:0 0 auto;}
.logo__text{line-height:1;}
.logo__name{
  display:block;font-family:"Poppins",sans-serif;font-size:32px;font-weight:700;
  letter-spacing:3px;color:var(--navy);line-height:1;
}
.logo__sub{
  display:block;font-family:"Poppins",sans-serif;font-size:11px;font-weight:500;
  letter-spacing:3.1px;color:var(--blue);line-height:1;margin-top:6px;
}

/* ==========================================================================
   1 · HEADER
   ========================================================================== */
.header{background:#fff;position:relative;z-index:50;}
.header__info{height:80px;display:flex;align-items:center;}
.header__info .container{display:flex;align-items:center;width:100%;}

.info-block{display:flex;align-items:center;gap:14px;}
.info-block svg{width:20px;height:20px;color:var(--blue);flex:0 0 auto;}
.info-block__t{font-family:"Poppins",sans-serif;font-size:15px;color:var(--ink);letter-spacing:1px;line-height:1.35;}
.info-block__s{font-size:13px;color:#999;line-height:1.35;}
.info-block--loc{margin-left:70px;}
.info-block--phone{margin-left:70px;}
.info-block--mail{margin-left:70px;}
.info-block--phone a{color:inherit;text-decoration:none;}
.header__info .btn{margin-left:auto;width:130px;height:38px;}

/* The header row's own content (logo + 3 info-blocks + button) is wider
   than the site's normal 1170px boxed content width, so give it more
   room to breathe on screens that have the space, instead of letting it
   sit pixel-to-pixel against that cap. The rest of the page keeps its
   normal boxed width. */
@media (min-width:1200px){
  .header__info .container{max-width:1360px;}
}
@media (min-width:1600px){
  .header__info .container{max-width:1520px;}
  .info-block--loc,.info-block--phone,.info-block--mail{margin-left:90px;}
}

.nav{border-top:1px solid #EEEEEE;height:56px;}
.nav .container{display:flex;align-items:center;height:100%;}
.menu{display:flex;align-items:center;}
.menu>li{position:relative;}
.menu>li>a{
  display:flex;align-items:center;gap:6px;padding:0 17px;height:56px;
  font-family:"Poppins",sans-serif;font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:1px;color:var(--ink);
  transition:color .3s ease;
}
.menu>li>a:hover{color:var(--blue);}
.menu>li.is-active>a{color:var(--blue);}
.menu .caret{width:8px;height:8px;color:currentColor;}
.dropdown{
  position:absolute;top:56px;left:10px;min-width:210px;background:#fff;
  border:1px solid #EEE;padding:6px 0;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:all .25s ease;z-index:60;
}
.menu>li:hover .dropdown,.menu>li:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{display:block;padding:9px 18px;font-size:13px;color:var(--ink-soft);transition:color .2s;}
.dropdown a:hover{color:var(--blue);}

.lang{margin-left:auto;display:flex;align-items:center;gap:8px;}
.lang svg{width:14px;height:14px;color:var(--ink);}
.lang span{font-family:"Poppins",sans-serif;font-size:13px;font-weight:500;letter-spacing:1px;color:var(--ink);}

.nav.is-stuck{
  position:fixed;top:0;left:0;right:0;background:#fff;height:68px;
  border-top:0;border-bottom:1px solid #EEE;z-index:100;
}
.nav.is-stuck .menu>li>a{height:68px;}
.nav.is-stuck .dropdown{top:68px;}

/* ==========================================================================
   2 · HERO
   ========================================================================== */
.hero{position:relative;height:700px;overflow:hidden;}
.hero__bg{position:absolute;inset:0;}
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.06) 55%,rgba(0,0,0,0) 100%);
  z-index:1;
}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;}
.hero__slide.is-active{opacity:1;}
.hero__slide .ph{width:100%;height:100%;}
.hero .container{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:68px;}
.hero__motto{
  font-family:"Poppins",sans-serif;font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:4px;color:var(--yellow);
  margin:0 0 16px;
}
.hero h1{
  font-size:52px;font-weight:700;line-height:1.15;letter-spacing:1px;
  text-transform:uppercase;color:#fff;margin:0;max-width:660px;
}
.hero p{font-size:14px;line-height:1.8;color:#fff;max-width:540px;margin:30px 0 0;}
.hero__btns{display:flex;gap:15px;margin-top:30px;}
.hero__btns .btn{height:46px;}
.hero__btns .btn--blue{width:150px;}
.hero__btns .btn--white{width:150px;}
.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:1px solid rgba(255,255,255,.7);
  background:transparent;display:flex;align-items:center;justify-content:center;
  color:#fff;z-index:3;transition:background .3s;
}
.hero__arrow:hover{background:rgba(255,255,255,.18);}
.hero__arrow svg{width:13px;height:13px;}
.hero__arrow--prev{left:45px;}
.hero__arrow--next{right:45px;}

/* ==========================================================================
   3 · FEATURE CARDS
   ========================================================================== */
.features{margin-top:-62px;position:relative;z-index:3;}
.features .container{display:flex;gap:6px;}
.feature{
  flex:1 1 0;height:248px;padding:34px 30px 0;text-align:center;
  clip-path:polygon(0 0,100% 0,100% 91%,50% 100%,0 91%);
}
.feature--blue{background:var(--blue);color:#fff;}
.feature--yellow{background:var(--yellow);color:var(--ink);}
.feature svg{width:54px;height:54px;margin:0 auto;color:currentColor;}
.feature h3{
  font-size:16px;font-weight:500;text-transform:uppercase;letter-spacing:2px;
  color:currentColor;margin:22px 0 0;
}
.feature p{font-size:13px;line-height:1.85;margin:14px 0 0;color:currentColor;}

/* ==========================================================================
   4 · ABOUT
   ========================================================================== */
.about{position:relative;padding:105px 0 110px;overflow:hidden;background:#fff;}
.about .container{position:relative;z-index:2;}
.about__grid{display:grid;grid-template-columns:350px 350px;column-gap:32px;row-gap:42px;max-width:732px;}
.abox{display:flex;gap:21px;align-items:flex-start;}
.abox svg{width:32px;height:32px;color:var(--blue);flex:0 0 auto;margin-top:2px;}
.abox h4{font-size:18px;font-weight:500;color:var(--ink);margin:0;line-height:1.4;}
.abox p{font-size:13px;line-height:1.85;margin:12px 0 0;color:var(--body);}
.about .btn{margin-top:45px;width:158px;height:48px;}
.about__photo{position:absolute;right:0;bottom:0;top:150px;width:44%;z-index:1;}
.about__photo .ph{width:100%;height:100%;background-color:transparent;}
.about__photo::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.82) 16%,rgba(255,255,255,0) 46%),
    linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 22%);
}

/* ==========================================================================
   5 · OFFERS
   ========================================================================== */
.offers{background:var(--bg-alt);padding:80px 0 90px;}
.offers__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.offer{background:#fff;}
.offer__img{height:320px;}
.offer__img .ph{width:100%;height:100%;transition:transform .4s ease;}
.offer:hover .offer__img .ph{transform:scale(1.06);}
.offer__body{padding:24px 24px 28px;}
.offer__num{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);line-height:1.4;}
.offer__title{font-size:19px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--ink);margin:10px 0 0;}
.offer>a{display:block;}

/* ==========================================================================
   OFFER DETAIL PAGES (/offers/:slug)
   ========================================================================== */
.breadcrumb{display:flex;align-items:center;gap:8px;padding:32px 0 0;font-family:"Poppins",sans-serif;font-size:12px;letter-spacing:.5px;color:var(--muted);}
.breadcrumb a{color:var(--blue);}
.breadcrumb a:hover{color:var(--blue-dark);}
.breadcrumb span[aria-current]{color:var(--ink);}

/* ---- hero: split text/visual with decorative accent blobs ---- */
.offer-hero{padding:36px 0 70px;overflow:hidden;}
.offer-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;margin-top:20px;}
.offer-hero__eyebrow{text-align:left;}
.offer-hero__title{font-size:40px;font-weight:700;text-transform:uppercase;letter-spacing:1px;line-height:1.2;color:var(--ink);margin:14px 0 0;}
.offer-hero__intro{font-size:15px;line-height:1.9;color:var(--body);margin:24px 0 32px;max-width:480px;}
.offer-hero__visual{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;}
.offer-hero__blob{position:absolute;border-radius:50%;filter:blur(6px);opacity:.55;}
.offer-hero__blob--a{width:70%;height:70%;top:-8%;right:-8%;background:radial-gradient(circle,var(--yellow) 0%,rgba(251,208,36,0) 70%);}
.offer-hero__blob--b{width:55%;height:55%;bottom:-6%;left:-6%;background:radial-gradient(circle,var(--blue) 0%,rgba(13,157,220,0) 70%);}
.offer-hero__frame{position:relative;z-index:1;width:82%;height:82%;border:6px solid #fff;}
.offer-hero__frame .ph{width:100%;height:100%;}

/* ---- highlight strip ---- */
.offer-highlights{background:var(--bg-alt);padding:34px 0;}
.offer-highlights__grid{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;}
.offer-highlight{display:flex;align-items:center;gap:12px;}
.offer-highlight__icon{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;}
.offer-highlight__icon svg{width:18px;height:18px;color:#fff;}
.offer-highlight__label{font-family:"Poppins",sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--ink);}

/* ---- numbered content sections ---- */
.offer-sections{padding:80px 0;}
.offer-section{display:grid;grid-template-columns:90px 1fr;gap:8px;max-width:800px;margin:0 auto 56px;}
.offer-section:last-child{margin-bottom:0;}
.offer-section__num{font-family:"Poppins",sans-serif;font-size:44px;font-weight:700;color:var(--bg-alt);line-height:1;}
.offer-section__body h2{font-size:22px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--ink);margin:0 0 16px;}
.offer-section__body p{font-size:14px;line-height:1.9;color:var(--body);margin:0 0 16px;}
.offer-section__body p:last-child{margin-bottom:0;}
.offer-section__body a{color:var(--blue);text-decoration:underline;}

/* ---- FAQ accordion ---- */
.offer-faq{background:var(--bg-alt);padding:80px 0 90px;}
.offer-faq__list{max-width:760px;margin:0 auto;}
.faq-item{background:#fff;border:1px solid var(--line);margin-bottom:12px;}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:"Poppins",sans-serif;font-size:14px;font-weight:600;color:var(--ink);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item__chevron{flex:0 0 auto;color:var(--blue);transition:transform .25s ease;}
.faq-item[open] .faq-item__chevron{transform:rotate(180deg);}
.faq-item p{margin:0;padding:0 24px 20px;font-size:13px;line-height:1.85;color:var(--body);}

/* ---- related / hub grid ---- */
.offer-related{background:#fff;padding:70px 0 80px;}
.offer-related__title{font-family:"Poppins",sans-serif;font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--ink);text-align:center;margin:0 0 36px;}
.offer-related .offers__grid{grid-template-columns:repeat(3,1fr);}
.offer-related .offer__img{height:200px;}
.offer-related .offer__body{padding:16px 18px 20px;}
.offer-related .offer__title{font-size:15px;margin:0;}

/* ==========================================================================
   BLOG ARTICLE PAGE
   ========================================================================== */
.post-hero{padding:36px 0 0;}
.post-hero__eyebrow{text-align:left;}
.post-hero__title{font-size:36px;font-weight:700;line-height:1.25;color:var(--ink);margin:14px 0 0;max-width:820px;}
.post-hero__meta{margin-top:20px;}
.post-hero__image{width:100%;height:440px;margin-top:36px;overflow:hidden;}
.post-hero__image img{width:100%;height:100%;object-fit:cover;display:block;}

.post-body-section{padding:64px 0 80px;}
.post-body{max-width:760px;margin:0 auto;}
.post-body__intro{font-size:16px;line-height:1.9;color:var(--ink);margin:0 0 28px;font-weight:500;}
.post-body h2{font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--ink);margin:40px 0 16px;}
.post-body p{font-size:14px;line-height:1.9;color:var(--body);margin:0 0 16px;}
.post-body p:last-child{margin-bottom:0;}
.post-body a{color:var(--blue);text-decoration:underline;}

.post-related{background:var(--bg-alt);padding:70px 0 80px;}
.post-related__title{font-family:"Poppins",sans-serif;font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--ink);text-align:center;margin:0 0 36px;}
.post-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.post-related .post{background:#fff;padding:20px 20px 28px;border:1px solid var(--line);}
.post-related .post__img{margin:-20px -20px 0;}
.post-related .post p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

@media (max-width:991px){
  .offer-hero__grid{grid-template-columns:1fr;gap:36px;}
  .offer-hero__visual{max-width:360px;margin:0 auto;}
  .post-related__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:767px){
  .offer-hero__title{font-size:28px;}
  .offer-section{grid-template-columns:1fr;gap:4px;}
  .offer-section__num{font-size:28px;}
  .offer-related .offers__grid{grid-template-columns:1fr;}
  .offer-highlights__grid{gap:24px;}
  .post-hero__title{font-size:26px;}
  .post-hero__image{height:240px;margin-top:24px;}
  .post-hero__meta{flex-wrap:wrap;gap:14px 24px;}
  .post-related__grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   6 · ESTIMATE BAND
   ========================================================================== */
.estimate{position:relative;height:385px;background:var(--blue);overflow:hidden;}
.estimate::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 90% at 78% 50%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 70%),
             linear-gradient(90deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,0) 45%);
}
.estimate__inner{position:relative;height:100%;max-width:2000px;margin:0 auto;}
.estimate__mascot{position:absolute;left:calc(50% - 750px);bottom:0;width:430px;height:385px;z-index:2;}
.estimate__mascot .ph{width:100%;height:100%;background-color:transparent;}
.estimate__mascot::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:
    linear-gradient(270deg,var(--blue) 0%,rgba(13,157,220,.7) 14%,rgba(13,157,220,0) 42%),
    linear-gradient(0deg,var(--blue) 0%,rgba(13,157,220,0) 26%);
}
.estimate__form{position:absolute;top:83px;left:calc(50% - 260px);width:810px;z-index:3;}
.estimate__row{display:flex;gap:7.5px;}
.estimate__row input,.estimate__row select{flex:1 1 0;height:38px;min-width:0;}
.estimate__form input,.estimate__form textarea,.estimate__form select{
  width:100%;background:#fff;border:0;border-radius:0;
  padding:10px 15px;font-family:"Roboto",sans-serif;font-size:14px;color:var(--ink);
}
.estimate__form select{color:#999;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:10px 6px;}
.estimate__form input::placeholder,.estimate__form textarea::placeholder{color:#999;}
.estimate__form input:focus,.estimate__form textarea:focus,.estimate__form select:focus{outline:2px solid rgba(255,255,255,.6);}
.estimate__form textarea{height:95px;margin-top:10px;resize:vertical;display:block;}
.estimate__form .btn{margin-top:28px;width:192px;height:47px;font-size:14px;cursor:pointer;}
.estimate__form .btn:disabled{opacity:.7;cursor:default;}
.estimate__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.estimate__status{margin:14px 0 0;font-size:13px;color:#fff;min-height:1em;}
.estimate__status.is-error{color:#FFE3DC;font-weight:500;}

/* ==========================================================================
   7 · SERVICES
   ========================================================================== */
.services{padding:85px 0 100px;background:#fff;}
.services__layout{display:flex;}
.tabs-col{flex:0 0 285px;}
.tabs{width:175px;display:flex;flex-direction:column;gap:9px;}
.tabs-cta{width:175px;margin-top:32px;background:var(--blue);color:#fff;padding:22px 18px;}
.tabs-cta h5{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#fff;margin:0;line-height:1.4;}
.tabs-cta p{font-size:12.5px;line-height:1.75;margin:10px 0 0;color:rgba(255,255,255,.92);}
.tabs-cta a{
  display:inline-block;margin-top:12px;font-family:"Poppins",sans-serif;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--yellow);
}
.tab{
  height:32px;width:175px;text-align:left;padding:0 0 0 18px;
  background:#fff;border:1px solid #E3E3E3;border-radius:0;color:var(--ink-soft);
  font-family:"Poppins",sans-serif;font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:1px;cursor:pointer;
  display:flex;align-items:center;transition:all .25s ease;
}
.tab:hover{border-color:var(--blue);color:var(--blue);}
.tab.is-active{background:var(--blue);border-color:var(--blue);color:#fff;}
.panels{flex:1 1 auto;}
/* Every category's cards are rendered into the DOM at once (see main.js) so
   all service descriptions are crawlable, not just whichever tab was last
   clicked — only the active one is actually shown. */
.panel{display:none;grid-template-columns:repeat(2,1fr);column-gap:25px;row-gap:42px;align-content:start;}
.panel.is-active{display:grid;}
.scard{border:1px solid #EAEAEA;background:#fff;padding:18px;display:flex;gap:25px;min-height:160px;}
.scard__thumb{width:95px;height:105px;flex:0 0 95px;}
.scard__thumb .ph{width:100%;height:100%;}
.scard h4{font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--ink);margin:0;line-height:1.35;}
.scard p{font-size:13px;line-height:1.75;margin:10px 0 0;color:var(--body);}
.readmore{
  display:inline-block;margin-top:12px;
  font-family:"Poppins",sans-serif;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:1px;color:var(--blue);
}
.readmore:hover{color:var(--blue-dark);}

/* ==========================================================================
   8 · BLOG
   ========================================================================== */
.blog{background:var(--bg-alt);padding:90px 0 95px;}
.blog__layout{display:grid;grid-template-columns:360px 360px 361px;column-gap:22px;}
.blog__layout>*:nth-child(3){margin-left:2px;}
.post__img{height:200px;}
.post__img .ph{width:100%;height:100%;transition:transform .4s ease;}
.post:hover .post__img .ph{transform:scale(1.06);}
.post h3{font-size:20px;font-weight:400;line-height:1.35;color:var(--ink);margin:22px 0 0;}
.meta{display:flex;align-items:center;gap:30px;margin-top:14px;}
.meta span{display:flex;align-items:center;gap:6px;font-size:13px;font-style:italic;color:var(--muted);}
.meta svg{width:12px;height:12px;color:var(--muted);}
.rule{height:1px;background:var(--line);margin:22px 0;}
.post p{font-size:13px;line-height:1.9;color:var(--body);margin:28px 0 0;}
.post .readmore{margin-top:24px;}

.side__item{display:flex;gap:33px;margin-bottom:50px;}
.side__item:last-child{margin-bottom:0;}
.side__thumb{width:110px;height:105px;flex:0 0 110px;}
.side__thumb .ph{width:100%;height:100%;}
.side__body h4{font-size:18px;font-weight:400;line-height:1.35;color:var(--ink);margin:0;}
.side__date{display:flex;align-items:center;gap:6px;font-size:13px;font-style:italic;color:var(--muted);margin-top:12px;}
.side__date svg{width:12px;height:12px;}
.side__body .rule{margin:14px 0 12px;}

/* ==========================================================================
   9 · CLIENTS
   ========================================================================== */
.clients{background:#fff;padding:58px 0;}
.clients .container{display:flex;align-items:center;justify-content:space-around;}
.client{
  width:160px;height:88px;display:flex;align-items:center;justify-content:center;
  filter:grayscale(1);opacity:.7;transition:opacity .3s ease;
}
.client:hover{opacity:1;}
.client svg{width:100%;height:100%;color:#2b2b2b;}

/* ==========================================================================
   10 · CTA BAND
   ========================================================================== */
.cta{background:var(--blue);height:153px;display:flex;align-items:center;}
.cta .container{display:flex;align-items:center;justify-content:space-between;width:100%;gap:30px;}
.cta h2{font-size:34px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#fff;margin:0;line-height:1.2;}
.cta p{font-size:14px;letter-spacing:3px;color:#fff;margin:12px 0 0;line-height:1.4;}
.cta .btn{width:147px;height:46px;flex:0 0 auto;}

/* ==========================================================================
   11 · FOOTER
   ========================================================================== */
.footer{background:var(--footer-bg);padding:80px 0 0;}
.footer__cols{display:grid;grid-template-columns:1.15fr .95fr .95fr .95fr;gap:22px;}
.footer h4{font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#fff;margin:0 0 30px;}
.footer .logo__name{color:#fff;font-size:22px;}
.footer .logo__sub{color:var(--yellow);}
.footer .logo img{width:28px;height:28px;}
.footer__motto{
  font-family:"Poppins",sans-serif;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:3px;color:var(--yellow);margin:18px 0 0;
}
.footer__about{font-size:13px;line-height:1.75;color:#9A9A9A;margin:14px 0 0;max-width:280px;}
.fsocial{display:flex;gap:12px;margin-top:20px;}
.fsocial a{
  width:32px;height:32px;border:1px solid #3A3A3A;display:flex;align-items:center;justify-content:center;
  color:#fff;transition:all .25s ease;
}
.fsocial a:hover{background:var(--blue);border-color:var(--blue);}
.fsocial svg{width:14px;height:14px;}
.flinks li a{
  display:block;font-size:14px;color:var(--footer-text);
  padding:8px 0;border-bottom:1px dotted #3A3A3A;transition:color .25s;
}
.flinks li a:hover{color:var(--blue);}
.fcontact li{display:flex;align-items:flex-start;gap:20px;margin-bottom:6px;}
.fcontact svg{width:14px;height:14px;color:#CCCCCC;flex:0 0 14px;margin-top:6px;}
.fcontact span{font-size:14px;color:var(--footer-text);line-height:1.6;}
.copy{border-top:1px solid var(--footer-line);margin-top:45px;padding:20px 0 30px;}
.copy .container{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.copy p{font-size:13px;color:#8A8A8A;margin:0;}
.copy a{font-family:"Poppins",sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#fff;}
.copy__privacy{font-family:inherit;font-size:inherit;font-weight:400;text-transform:none;letter-spacing:0;color:#8A8A8A;text-decoration:underline;}
.copy__privacy:hover{color:#fff;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  :root{--container:970px;}
  .hero h1{font-size:42px;}
  .sec-title{font-size:34px;}
  .about__grid{grid-template-columns:1fr 1fr;max-width:620px;column-gap:24px;}
  .about__photo{width:38%;}
  .estimate__mascot{left:calc(50% - 640px);width:360px;}
  .estimate__form{left:calc(50% - 240px);width:660px;}
  .blog__layout{grid-template-columns:1fr 1fr 1fr;column-gap:18px;}
  .feature{padding:28px 22px 0;height:236px;}
  .feature svg{width:46px;height:46px;}
  .info-block--loc,.info-block--phone,.info-block--mail{margin-left:24px;}
  .info-block--phone .info-block__t{white-space:nowrap;}
}
@media (max-width:991px){
  :root{--container:750px;}
  .info-block--loc,.info-block--mail{display:none;}
  /* Keep click-to-call reachable once the layout no longer has room for
     the full location/phone/email row: show just the number, compact,
     between the logo and the quote button. */
  .info-block--phone{margin-left:0;gap:8px;}
  .info-block--phone .info-block__s{display:none;}
  .info-block--phone .info-block__t{font-size:14px;}
  .header__info .container{justify-content:space-between;}
  .hero{height:520px;}
  .hero h1{font-size:32px;}
  .hero__arrow{display:none;}
  .features .container{flex-wrap:wrap;}
  .feature{flex:1 1 100%;height:auto;padding:32px 28px 52px;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),50% 100%,0 calc(100% - 24px));}
  .about__photo{display:none;}
  .about__grid{max-width:100%;}
  .offers__grid{grid-template-columns:1fr 1fr;}
  .offer__img{height:240px;}
  .estimate{height:auto;padding:50px 0;}
  .estimate__inner{position:static;}
  .estimate__mascot{display:none;}
  .estimate__form{position:static;width:100%;max-width:750px;margin:0 auto;padding:0 15px;}
  .services__layout{flex-direction:column;gap:30px;}
  .tabs-col{flex:0 0 auto;width:100%;}
  .tabs-cta{display:none;}
  .tabs{width:100%;flex-direction:row;overflow-x:auto;padding-bottom:4px;}
  .tab{flex:0 0 auto;width:auto;min-width:auto;padding:0 16px;}
  .panel{grid-template-columns:1fr;row-gap:24px;}
  .blog__layout{grid-template-columns:1fr;row-gap:50px;}
  .blog__layout>*:nth-child(3){margin-left:0;}
  .clients .container{flex-wrap:wrap;justify-content:center;gap:30px;}
  .footer__cols{grid-template-columns:1fr 1fr;row-gap:45px;}
  .cta{height:auto;padding:45px 0;}
  .cta h2{font-size:26px;}
}
@media (max-width:767px){
  :root{--container:100%;}
  .nav{height:auto;}
  .nav .container{flex-wrap:wrap;padding-top:8px;padding-bottom:8px;}
  .menu{flex-wrap:wrap;}
  .menu>li>a{height:40px;padding:0 12px;font-size:12px;}
  .dropdown{display:none;}
  /* Sticky nav locks to a fixed height for desktop's single-row menu; on
     mobile the menu wraps to 2+ rows, so the fixed height must be dropped
     or the wrapped links spill out from under the white bar and float over
     the page content beneath it while scrolling. */
  .nav.is-stuck{height:auto;padding-bottom:8px;}
  .nav.is-stuck .menu>li>a{height:40px;}
  .lang{margin-left:auto;}
  .logo{gap:10px;}
  .logo img{width:34px;height:34px;}
  .logo__name{font-size:24px;letter-spacing:2px;}
  .logo__sub{font-size:9px;letter-spacing:2.4px;margin-top:4px;}
  .hero{height:470px;}
  .hero h1{font-size:28px;}
  .hero__btns{flex-direction:column;align-items:flex-start;}
  .hero__btns .btn{width:190px;}
  .sec-title{font-size:26px;letter-spacing:.5px;}
  .eyebrow{letter-spacing:3px;font-size:12px;}
  .about{padding:60px 0;}
  .about__grid{grid-template-columns:1fr;row-gap:30px;}
  .offers{padding:55px 0 60px;}
  .offers__grid{grid-template-columns:1fr;}
  .estimate__row{flex-direction:column;gap:10px;}
  .services{padding:55px 0 60px;}
  .blog{padding:55px 0 60px;}
  .client{width:120px;height:64px;}
  .cta .container{flex-direction:column;align-items:flex-start;}
  .cta h2{font-size:22px;}
  .footer__cols{grid-template-columns:1fr;}
  .copy .container{flex-direction:column;align-items:flex-start;gap:10px;}
}
@media (max-width:520px){
  /* Logo + phone + "Get a Quote" no longer fit on one row at true phone
     widths without squeezing the button down to near-zero gap. Drop the
     phone number to its own row instead, same fix as .nav.is-stuck above. */
  .header__info{height:auto;padding:14px 0;}
  .header__info .container{flex-wrap:wrap;row-gap:10px;}
  .header__info .btn{order:2;}
  .info-block--phone{order:3;flex:0 0 100%;margin-left:0;}
}
