*{box-sizing:border-box}
body{margin:0;background:#15341E;font-family:'Manrope',system-ui,sans-serif;letter-spacing:.005em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .18s ease-out}
a:hover{color:#C0532B}
input,select,textarea{font-family:inherit}
input::placeholder,textarea::placeholder{color:rgba(26,26,26,.42)}
@keyframes svp-hero{0%,26%{opacity:1}35%,91%{opacity:0}100%{opacity:1}}
@keyframes svp-ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* --- interaction states lifted out of the design's style-hover / style-focus --- */
.h0:hover{animation-play-state:paused!important}
.h1:hover{color:#C0532B!important}
.h2:hover{color:#C0532B!important}
.h3:hover{color:#C0532B!important}
.h4:hover{background:#A6431F!important;border-color:#A6431F!important;color:#FFFFFF!important}
.h5:hover{background:#EFEAE0!important;color:#1A1A1A!important}
.h6:hover{background:#24552F!important;color:#fff!important}
.h7:hover{color:#A6431F!important;border-color:#A6431F!important}
.h8:hover{color:#A6431F!important;border-color:#A6431F!important}
.h9:hover{color:#A6431F!important;border-color:#A6431F!important}
.h10:hover{transform:translateY(-6px)!important;box-shadow:0 18px 40px rgba(18,45,26,.18)!important}
.h11:hover{transform:translateY(-6px)!important;box-shadow:0 18px 40px rgba(18,45,26,.18)!important}
.h12:hover{transform:translateY(-6px)!important;box-shadow:0 18px 40px rgba(18,45,26,.18)!important}
.h13:hover{transform:translateY(-6px)!important;box-shadow:0 18px 40px rgba(18,45,26,.18)!important}
.h14:hover{background:#C0532B!important}
.h15:hover{background:#A6431F!important;color:#fff!important}
.h16:hover{background:#A6431F!important}
.h17:hover{background:#306E3D!important;color:#fff!important}
.h18:hover{color:#E3906B!important}
.h19:hover{color:#E3906B!important}
.h20:hover{color:#E3906B!important}
.f0:focus{border-color:#C0532B!important;box-shadow:0 0 0 2px rgba(192,83,43,.22)!important}
.f1:focus{border-color:#C0532B!important;box-shadow:0 0 0 2px rgba(192,83,43,.22)!important}
.f2:focus{border-color:#C0532B!important;box-shadow:0 0 0 2px rgba(192,83,43,.22)!important}
.f3:focus{border-color:#C0532B!important;box-shadow:0 0 0 2px rgba(192,83,43,.22)!important}
.f4:focus{border-color:#C0532B!important;box-shadow:0 0 0 2px rgba(192,83,43,.22)!important}
.f5:focus{border-color:#C0532B!important;box-shadow:0 0 0 2px rgba(192,83,43,.22)!important}

/* --- behaviour the design prototyped in its React logic --- */
html{scroll-behavior:smooth;scroll-padding-top:96px}
header nav a:hover{color:#C0532B!important}
.hero-dot:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid #E3906B;outline-offset:3px}
[data-appcard]:hover [data-appbody]{background:#C0532B!important}
[data-cta]:hover [data-cta-arrow]{opacity:0!important}
[data-cta]:hover [data-cta-tick]{opacity:1!important}
.proc-bar{width:0}
.proc-num{color:#DDD8CF}
.is-revealed .proc-bar{width:100%}
.is-revealed .proc-num{color:#C0532B}
/* sticky stack offsets — driven from the real header/heading heights in main.js.
   The design's fixed 268/344/420 assumed a 120px section heading; at >=1000px it is
   taller, so the cards' green strips were sliding under it. */
.prod-head{top:var(--svp-head-top,148px)!important}
.prod-card{top:var(--svp-card-top,268px)!important}
.prod-card:nth-of-type(2){top:calc(var(--svp-card-top,268px) + 76px)!important}
.prod-card:nth-of-type(3){top:calc(var(--svp-card-top,268px) + 152px)!important}
.about-card{top:var(--svp-about-top,148px)!important}
.about-card:nth-of-type(2){top:calc(var(--svp-about-top,148px) + 68px)!important}
.about-card:nth-of-type(3){top:calc(var(--svp-about-top,148px) + 136px)!important}
.about-card:nth-of-type(4){top:calc(var(--svp-about-top,148px) + 204px)!important}

/* floating contact actions */
.mobile-bar{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;flex-direction:column;gap:12px}
.fab{display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex:none;
  border-radius:50%;background:#C0532B;border:1px solid rgba(255,255,255,.2);color:#FFFFFF;
  box-shadow:0 6px 18px rgba(18,45,26,.4);
  transition:background .18s ease-out,color .18s ease-out,transform .18s ease-out}
.fab-whatsapp{background:#25D366;border-color:rgba(255,255,255,.26)}  /* WhatsApp brand green */
/* email is useful on every screen; call and WhatsApp are phone-sized actions.
   Must come after `.fab{display:flex}` above — same specificity, source order decides. */
.fab-phone,.fab-whatsapp{display:none}
.fab svg{width:23px;height:23px;display:block}
.fab:active{transform:scale(.93)}
@media (hover:hover){
  .fab:hover{background:#A6431F!important;border-color:#A6431F;color:#FFFFFF!important}
  .fab-whatsapp:hover{background:#1DA851!important;border-color:#1DA851}
}
@media (max-width:760px){
  .fab-phone,.fab-whatsapp{display:flex}
  body{padding-bottom:88px}
}
/* "Request a Quote" attention pulse — a continuous ripple.
   Stops on hover so it never fights the button's own hover state, and the
   reduced-motion rule at the bottom of this file disables it entirely. */
@keyframes svp-cta-pulse{
  0%   {box-shadow:0 0 0 0 rgba(192,83,43,.5),  0 0 12px 1px rgba(192,83,43,.30)}
  100% {box-shadow:0 0 0 13px rgba(192,83,43,0), 0 0 12px 1px rgba(192,83,43,.30)}
}
/* continuous: each ripple starts as the last one fades, and a soft glow sits
   underneath so the button is never left unhighlighted between cycles */
.cta-pulse{animation:svp-cta-pulse 2.2s ease-out infinite}
.cta-pulse:hover{animation-play-state:paused}
/* below 1010px the header CTA is inside the collapsed menu, so pulse the hero
   button instead — same affordance, somewhere it can actually be seen */
@media (max-width:1010px){
  .cta-pulse-sm{animation:svp-cta-pulse 2.2s ease-out infinite}
  .cta-pulse-sm:hover{animation-play-state:paused}
}

/* FAQ accordion — native <details>, no JS needed */
.faq-list{max-width:860px;border-top:1px solid #DDD8CF}
.faq-item{border-bottom:1px solid #DDD8CF}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(18px,2vw,22px) 0;cursor:pointer;list-style:none;
  font:600 clamp(16px,1.6vw,18px)/1.45 'Manrope',sans-serif;color:#1A1A1A;
  transition:color .18s ease-out}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:11px;height:11px;margin-right:5px;
  border-right:2px solid #C0532B;border-bottom:2px solid #C0532B;
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .22s ease}
.faq-item[open] summary{color:#C0532B}
.faq-item[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
@media (hover:hover){.faq-item summary:hover{color:#C0532B}}
.faq-a{padding:0 0 clamp(20px,2.2vw,26px)}
.faq-a p{margin:0;font:400 clamp(15px,1.5vw,17px)/1.7 'Manrope',sans-serif;
  color:#57534E;max-width:66ch;text-wrap:pretty}

/* mobile navigation: hamburger + collapsible panel */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  padding:0;background:transparent;border:1px solid rgba(26,26,26,.2);border-radius:8px;
  color:#1A1A1A;cursor:pointer;transition:background .18s ease-out,border-color .18s ease-out}
.nav-toggle svg{width:22px;height:22px;display:block}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"]{background:#1A1A1A;border-color:#1A1A1A;color:#F2F2F2}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}
@media (hover:hover){.nav-toggle:hover{border-color:#C0532B;color:#C0532B}
  .nav-toggle[aria-expanded="true"]:hover{background:#C0532B;border-color:#C0532B;color:#fff}}

/* six nav items at 14px; the full header wraps below ~1010px, so collapse there */
@media (max-width:1010px){
  .nav-toggle{display:flex}
  /* keep logo + toggle on one row; let the wordmark wrap instead of the header */
  header{flex-wrap:nowrap!important}
  header > a[href="#top"]{min-width:0}
  header > a[href="#top"] > span{min-width:0}
  .nav-panel{
    display:none!important;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch!important;gap:0!important;
    padding:6px clamp(20px,4vw,56px) 20px;
    background:#F2F2F2;border-bottom:1px solid rgba(26,26,26,.1);
    box-shadow:0 14px 28px rgba(18,45,26,.16)}
  .nav-panel.is-open{display:flex!important}
  .nav-panel nav{flex-direction:column;align-items:stretch;gap:0!important;width:100%}
  .nav-panel nav a{padding:14px 0 12px!important;font-size:15px!important;align-self:flex-start}
  .nav-panel > a{align-self:stretch;justify-content:center;margin-top:14px}
}

/* process CTA: compact single-line button on phones */
@media (max-width:760px){
  [data-cta]{padding:13px 22px!important;gap:11px!important}
  .cta-sub{display:none}
  .cta-title{font-size:16px!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}