/* =========================================================
  Kitsune Data — Global Stylesheet
  Premium, consistent styling across all pages
========================================================= */

/* ---------------------------
  Design Tokens / Theme
----------------------------*/
:root{
  --brand:#f27c1e;
  --brand-700:#d56f1b;
  --ink:#111317;
  --ink-2:#3a3f4d;
  --bg:#ffffff;
  --bg-alt:#f6f7f9;
  --card:#ffffff;
  --card-border:#e8ebf1;

  /* Updated navy tones */
  --hero:#1a2333;
  --hero-accent:#141c2b;

  --radius:16px;
  --radius-squared:12px;
  --shadow:0 8px 24px rgba(16,24,40,.08);
  --shadow-strong:0 16px 36px rgba(16,24,40,.14);

  --container:1160px;
  --contact-max:980px;
}

/* ---------------------------
  Reset + Base
----------------------------*/
*{
  box-sizing:border-box;
}

html,
body{
  height:100%;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

a:hover{
  color:var(--brand);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
}

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

.br-md{
  display:none;
}

@media (min-width:768px){
  .br-md{
    display:inline;
  }
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skip-link:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:8px 12px;
  background:#fff;
  border-radius:8px;
  z-index:1000;
}

/* ---------------------------
  Header + Nav
----------------------------*/
.site-header{
  background:var(--hero);
  color:#fff;
  position:relative;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-logo{
  height:36px;
  width:auto;
  background:transparent;
  box-shadow:none;
  border:0;
  display:block;
}

.brand-name{
  font-weight:800;
  letter-spacing:.6px;
}

/* Main nav */
.nav{
  display:flex;
}

.nav-list{
  display:flex;
  gap:20px;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
}

.nav-list > li > a{
  opacity:.92;
  padding:8px 2px;
  transition:opacity .2s ease, color .2s ease;
}

.nav-list > li > a:hover{
  opacity:1;
}

.nav-list a.active,
.nav-list a[aria-current="page"]{
  color:var(--brand);
  opacity:1;
}

/* Hamburger */
.nav-toggle{
  display:none;
  background:none;
  border:0;
  cursor:pointer;
  padding:6px;
  margin-left:8px;
}

.nav-bar{
  display:block;
  width:24px;
  height:2px;
  background:#fff;
  margin:5px 0;
}

/* Dropdown */
.dropdown{
  position:relative;
}

.dropdown > a{
  cursor:pointer;
}

.dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:180px;
  background:#000;
  padding:10px 0;
  list-style:none;
  border-radius:8px;
  box-shadow:0 12px 24px rgba(0,0,0,.28);
  z-index:1000;
}

.dropdown-menu li a{
  display:block;
  padding:8px 14px;
  color:#fff;
  font-size:15px;
  line-height:1.4;
  transition:background .15s ease, color .15s ease;
}

.dropdown-menu li a:hover{
  background:var(--brand);
  color:#000;
}

.dropdown:hover .dropdown-menu{
  display:block;
}

/* Mobile nav */
@media (max-width:940px){
  .nav-toggle{
    display:block;
  }

  .nav{
    position:fixed;
    inset:60px 0 auto 0;
    background:var(--hero);
    display:none;
    z-index:999;
    border-top:1px solid rgba(255,255,255,.08);
  }

  .nav.open{
    display:block;
  }

  .nav-list{
    flex-direction:column;
    padding:16px 20px;
    align-items:stretch;
  }

  .nav-list > li > a{
    padding:12px 2px;
  }

  .dropdown-menu{
    position:static;
    display:block;
    background:none;
    box-shadow:none;
    padding:0;
    border-radius:0;
  }

  .dropdown-menu li a{
    padding:10px 0;
    color:#fff;
  }

  .dropdown-menu li a:hover{
    background:none;
    color:var(--brand);
  }
}

/* ---------------------------
  Buttons
----------------------------*/
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:999px;
  border:2px solid transparent;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease-in-out;
  text-decoration:none;
}

.btn-primary{
  background:var(--brand);
  color:#fff;
}

.btn-primary:hover{
  background:var(--brand-700);
  transform:translateY(-1px);
}

.btn-ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.3);
}

.btn-ghost:hover{
  border-color:#fff;
  transform:translateY(-1px);
}

.btn-secondary{
  background:#fff;
  color:var(--ink);
  border:2px solid var(--card-border);
}

.btn-secondary:hover{
  border-color:var(--ink);
  transform:translateY(-1px);
}

/* ---------------------------
  Hero
----------------------------*/
.hero{
  position:relative;
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 500px at 50% -20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--hero) 0%, var(--hero-accent) 100%);
}

.hero-waves{
  position:absolute;
  inset:0;
  opacity:.35;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400' preserveAspectRatio='none'>\
  <defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'>\
    <stop offset='0%' stop-color='%23ffffff'/><stop offset='100%' stop-color='%23ffffff'/>\
  </linearGradient></defs>\
  <path d='M0,60 C200,120 400,0 600,60 C800,120 1000,0 1200,60 C1400,120 1600,0 1800,60 L1800,0 L0,0 Z' fill='none' stroke='url(%23g)' stroke-width='2' opacity='.25'/>\
  <path d='M0,140 C200,200 400,80 600,140 C800,200 1000,80 1200,140 C1400,200 1600,80 1800,140' fill='none' stroke='url(%23g)' stroke-width='2' opacity='.20'/>\
  <path d='M0,220 C200,280 400,160 600,220 C800,280 1000,160 1200,220 C1400,280 1600,160 1800,220' fill='none' stroke='url(%23g)' stroke-width='2' opacity='.16'/>\
</svg>");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:top center;
}

.hero-content{
  position:relative;
  z-index:1;
  color:#fff;
  text-align:center;
  padding-block:72px 88px;
}

.hero h1{
  font-weight:800;
  font-size:clamp(28px, 4vw, 48px);
  line-height:1.15;
  margin:0 0 12px;
}

.hero p{
  max-width:760px;
  margin:0 auto 22px;
  opacity:.92;
  font-size:clamp(16px, 2.1vw, 18px);
}

.hero-cta{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.hero--small .hero-content{
  padding-block:46px 54px;
}

/* ---------------------------
  Sections / Layout
----------------------------*/
.section-pad{
  padding-block:72px;
}

.section-alt{
  background:var(--bg-alt);
}

.section-head{
  text-align:center;
  margin-bottom:28px;
}

.section-head h2{
  font-size:clamp(22px, 3vw, 32px);
  margin:0 0 6px;
}

.section-head p{
  color:var(--ink-2);
  margin:0;
}

.section-mini-note{
  max-width:760px;
  margin:24px auto 0;
  text-align:center;
  color:var(--ink-2);
}

/* Generic grid */
.grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:2rem;
}

@media (max-width:900px){
  .grid-3{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:600px){
  .grid-3{
    grid-template-columns:1fr;
  }
}

/* Generic card */
.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}

/* ---------------------------
  What We Do / Feature cards
----------------------------*/
.features .grid-3{
  align-items:stretch;
  gap:2.4rem;
}

@media (min-width:1120px){
  .features .grid-3{
    grid-template-columns:repeat(4, 1fr);
  }

  .features .grid-3 > .card.feature:nth-last-child(1):nth-child(odd){
    grid-column:2 / span 2;
  }
}

@media (max-width:900px){
  .features .grid-3{
    grid-template-columns:1fr 1fr;
    gap:1.8rem;
  }
}

@media (max-width:600px){
  .features .grid-3{
    grid-template-columns:1fr;
    gap:1.4rem;
  }
}

.features .card.feature{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-squared);
  padding:28px 26px;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}

.features .card.feature:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-strong);
}

.features .icon-wrap{
  width:68px;
  height:68px;
  border-radius:12px;
  background:#f4f6fb;
  display:grid;
  place-items:center;
  margin-bottom:16px;
}

.features .icon-wrap img{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}

.features h3{
  margin:8px 0 8px;
  font-size:19px;
}

.features p{
  color:var(--ink-2);
  margin:0;
  line-height:1.7;
}

/* ---------------------------
  Service cards
----------------------------*/
.service.card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius:var(--radius-squared);
  padding:28px 26px;
  transition:transform .2s ease, box-shadow .2s ease;
}

.service.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-strong);
}

.service.card::before{
  content:"";
  position:absolute;
  top:-1px;
  left:-1px;
  right:-1px;
  height:4px;
  border-top-left-radius:var(--radius-squared);
  border-top-right-radius:var(--radius-squared);
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand-700) 100%);
}

/* Updated service icons */
.service-image{
  width:72px;
  height:72px;
  object-fit:contain;
  margin:0 auto 14px;
  display:block;
}

/* Read More content */
.service .service-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
}

.service .read-more-btn{
  margin-top:10px;
  font-weight:700;
  border:1px solid var(--card-border);
  border-radius:999px;
  padding:10px 14px;
  background:#fff;
  cursor:pointer;
}

.service .read-more-btn:hover{
  border-color:var(--brand);
  color:var(--brand);
}

.service .service-content ul{
  margin:12px 0 0;
  padding-left:18px;
  color:var(--ink-2);
}

.service .service-content li{
  margin-bottom:8px;
}

/* Cases */
.case h4{
  margin:2px 0 8px;
  font-size:18px;
}

.case p{
  color:var(--ink-2);
  margin:0;
}

/* ---------------------------
  Pricing cards
----------------------------*/
.pricing .section-head p{
  color:var(--ink-2);
}

.pricing-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

@media (min-width:700px){
  .pricing-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (min-width:1100px){
  .pricing-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

.price-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.price-card.highlight{
  border-color:rgba(242,124,30,.5);
  box-shadow:0 10px 28px rgba(16,24,40,.12);
}

.price-card__head h3{
  margin:0 0 6px;
  font-size:22px;
}

.price-card__head .tagline{
  margin:0;
  color:var(--ink-2);
  font-size:15px;
}

.price-card__features{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.price-card__features li{
  position:relative;
  padding-left:26px;
  color:var(--ink-2);
}

.price-card__features li::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%);
  -webkit-mask:
    radial-gradient(circle 0.8px, #000 98%, transparent) 5px 9px / 6px 3px no-repeat,
    linear-gradient(#000 0 0) 4px 8px / 8px 2px no-repeat;
  mask:
    radial-gradient(circle 0.8px, #000 98%, transparent) 5px 9px / 6px 3px no-repeat,
    linear-gradient(#000 0 0) 4px 8px / 8px 2px no-repeat;
}

.price-card__prices{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  background:var(--bg-alt);
  border:1px solid var(--card-border);
  border-radius:12px;
}

.price-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:600;
}

.price-line span{
  color:var(--ink-2);
  font-weight:500;
}

.price-line strong{
  color:#0f6ab4;
}

.price-note{
  font-size:13px;
  color:var(--ink-2);
  opacity:.9;
}

.price-card__cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.price-card h2.price-figure{
  margin:8px 0 0;
  font-size:1.85rem;
  line-height:1.2;
  color:var(--ink);
}

/* Disclaimer block */
.pricing-disclaimer .disclaimer-card{
  max-width:820px;
  margin:0 auto;
  text-align:center;
  background:var(--bg-alt);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}

.pricing-disclaimer p{
  margin:0 0 12px;
  color:var(--ink-2);
}

.pricing-disclaimer a{
  text-decoration:underline;
}

/* ---------------------------
  Quote form
----------------------------*/
.quote-form-wrap{
  max-width:900px;
  margin:0 auto;
}

.quote-form-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
}

.quote-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.quote-form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.quote-form-group.full{
  grid-column:1 / -1;
}

.quote-form-group label{
  font-weight:700;
  color:var(--ink);
}

.quote-form-group input,
.quote-form-group select,
.quote-form-group textarea{
  width:100%;
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:13px 14px;
  font:inherit;
  color:var(--ink);
  background:#fff;
}

.quote-form-group textarea{
  min-height:140px;
  resize:vertical;
}

.quote-form-group input:focus,
.quote-form-group select:focus,
.quote-form-group textarea:focus{
  outline:2px solid rgba(242, 124, 30, 0.22);
  border-color:var(--brand);
}

.quote-note{
  color:var(--ink-2);
  font-size:.95rem;
  margin-top:14px;
}

.quote-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}

@media (max-width:760px){
  .quote-form-grid{
    grid-template-columns:1fr;
  }

  .quote-form-card{
    padding:20px;
  }
}

/* ---------------------------
  Contact
----------------------------*/
.contact-block,
.contact-map{
  max-width:var(--contact-max);
  margin-inline:auto;
}

.contact-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:40px;
  margin-top:32px;
}

.contact-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:28px 20px;
  text-align:center;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
  flex:1 1 260px;
  max-width:300px;
}

.contact-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-strong);
}

.contact-card h3{
  margin:12px 0 8px;
  font-size:18px;
  color:var(--brand);
}

.contact-card p{
  margin:0;
  font-size:15px;
  color:var(--ink-2);
}

.contact-icon{
  font-size:28px;
  margin-bottom:12px;
}

.section-head--brand{
  color:var(--brand);
}

.map-subtext{
  text-align:center;
  max-width:600px;
  margin:0 auto 28px;
  color:var(--ink-2);
}

.contact-map{
  margin-top:24px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.contact-map iframe{
  display:block;
  width:100%;
  height:350px;
  border:0;
  border-radius:12px;
}

/* ---------------------------
  Video cards
----------------------------*/
.video-card{
  max-width:900px;
  margin:0 auto;
  padding:0;
  overflow:hidden;
}

.video-card iframe{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  border:0;
}

/* ---------------------------
  CTA band
----------------------------*/
.cta-band{
  background:linear-gradient(180deg, #162033 0%, #1a2333 100%);
  color:#fff;
}

.cta-inner{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding-block:28px;
}

.cta-inner h3{
  margin:0;
  font-size:clamp(18px, 2.4vw, 24px);
}

@media (max-width:700px){
  .cta-inner{
    flex-direction:column;
    text-align:center;
  }
}

/* ---------------------------
  Premium footer
----------------------------*/
.premium-footer{
  background:linear-gradient(180deg, #0f1725 0%, #141c2b 100%);
  color:#c7d1df;
  padding-top:52px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.premium-footer-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr 0.9fr 0.9fr;
  gap:36px;
  align-items:start;
}

.premium-footer-brand{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.premium-footer-brand-top{
  display:flex;
  align-items:center;
  gap:14px;
}

.premium-footer-brand .brand-logo{
  height:42px;
  width:auto;
}

.premium-footer-brand h4,
.premium-footer-links h5,
.premium-footer-contact h5,
.premium-footer-social h5{
  margin:0 0 12px;
  color:#ffffff;
  font-size:1rem;
  font-weight:700;
}

.premium-footer-brand p,
.premium-footer-contact p,
.premium-footer-social p{
  margin:0;
  color:#c7d1df;
  line-height:1.7;
}

.premium-footer-trust{
  color:#9fb0c7;
  font-size:.95rem;
  line-height:1.8;
}

.premium-footer-links,
.premium-footer-contact,
.premium-footer-social{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.premium-footer-links a,
.premium-footer-contact a,
.premium-footer-social a{
  color:#dbe5f3;
  text-decoration:none;
  transition:color .2s ease, opacity .2s ease, transform .2s ease;
}

.premium-footer-links a:hover,
.premium-footer-contact a:hover,
.premium-footer-social a:hover{
  color:var(--brand);
  opacity:.9;
}

.premium-footer-cta{
  margin-top:12px;
}

.premium-footer-cta .btn{
  box-shadow:0 8px 20px rgba(242,124,30,.18);
}

.premium-footer-bottom{
  margin-top:34px;
  padding:20px 0 28px;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  color:#9fb0c7;
  font-size:.92rem;
}

.premium-footer-bottom a{
  color:#dbe5f3;
}

@media (max-width:980px){
  .premium-footer-grid{
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
}

@media (max-width:760px){
  .premium-footer{
    padding-top:42px;
  }

  .premium-footer-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .premium-footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ---------------------------
  Legacy footer support
----------------------------*/
.site-footer{
  background:#141c2b;
  color:#b8c0d0;
  padding-block:36px;
}

.footer-grid{
  display:grid;
  gap:24px;
  grid-template-columns:1.2fr .8fr .8fr;
}

@media (max-width:900px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:600px){
  .footer-grid{
    grid-template-columns:1fr;
  }
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-brand .brand-logo{
  height:40px;
}

.footer-nav,
.footer-contact{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer-nav h5,
.footer-contact h5{
  color:#e7ecf7;
  margin:0 0 6px;
  font-size:14px;
}

.footer-legal{
  margin-top:8px;
  font-size:12px;
  opacity:.85;
}

/* ---------------------------
  Media edge cards
----------------------------*/
.card--media-edge{
  padding:0;
  overflow:hidden;
}

.card--media-edge .edge-img{
  display:block;
  width:100%;
  height:auto;
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
}

.card--media-edge .card-body{
  padding:22px;
}

/* ---------------------------
  Lightbox
----------------------------*/
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.85);
  z-index:1000;
}

.lightbox.open{
  display:flex;
}

.lightbox__img{
  max-width:92vw;
  max-height:92vh;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  border-radius:12px;
}

@media (prefers-reduced-motion: reduce){
  .lightbox,
  .lightbox__img{
    transition:none !important;
  }
}

/* ---------------------------
  Estimator / legacy quote tool
----------------------------*/
.estimator-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
}

@media (max-width:900px){
  .estimator-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
}

.card.estimator,
.card.estimator-summary{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

.estimator{
  display:grid;
  gap:18px;
}

.estimator__row{
  display:grid;
  gap:8px;
  margin-bottom:14px;
}

.estimator__label{
  font-weight:700;
}

.estimator__control{
  display:block;
}

.help{
  margin:0;
  color:var(--ink-2);
  font-size:.92rem;
}

.estimator .help{
  margin-top:6px;
}

.estimator__range{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:6px;
}

.estimator__range strong{
  color:var(--brand);
}

.estimator__counter{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--card-border);
  border-radius:999px;
  padding:4px;
  background:#fff;
  width:max-content;
}

.estimator__counter input{
  width:72px;
  text-align:center;
  border:0;
  outline:0;
  font-weight:700;
  background:transparent;
}

.counter-btn{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid var(--card-border);
  background:#fff;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  font-weight:700;
  transition:transform .08s ease, background .15s ease;
}

.counter-btn:hover{
  border-color:var(--brand);
  color:var(--brand);
}

.counter-btn:active{
  transform:translateY(1px);
}

.estimator-summary .summary__title{
  margin:0 0 8px;
}

.summary__numbers{
  display:grid;
  gap:8px;
  margin:10px 0 6px;
}

.summary__numbers .line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.summary__numbers .line.total strong{
  font-size:clamp(20px, 2.4vw, 24px);
  color:var(--brand);
}

.summary__fineprint{
  color:var(--ink-2);
  font-size:14px;
  margin:10px 0 14px;
}

@media (min-width:901px){
  .card.estimator-summary{
    position:sticky;
    top:24px;
  }
}

details.help{
  background:var(--bg-alt);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:10px 12px;
}

.price-card__cta .btn{
  margin-top:10px;
}

@media (max-width:600px){
  .card.estimator,
  .card.estimator-summary{
    padding:16px;
  }

  .estimator__row{
    gap:6px;
    margin-bottom:12px;
  }

  .estimator__counter{
    gap:8px;
  }

  .estimator__counter input[type="number"]{
    width:110px;
    padding:9px 10px;
    border-radius:10px;
  }

  .counter-btn{
    width:44px;
    height:44px;
  }

  .summary__numbers{
    gap:6px;
  }

  .summary__numbers .line{
    gap:10px;
  }
}

/* ---------------------------
  Responsive contact tweaks
----------------------------*/
@media (max-width:900px){
  .contact-grid{
    gap:28px;
  }

  .contact-card{
    max-width:100%;
  }
}

@media (max-width:600px){
  .contact-map iframe{
    height:220px;
  }
}

/* ---------------------------
  Utilities
----------------------------*/
.hp-field{
  position:absolute;
  left:-9999px;
  opacity:0;
  pointer-events:none;
}

.zoomable{
  cursor:zoom-in;
}

.badge{
  display:inline-block;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  background:#fff3e6;
  border:1px solid #ffd6ad;
  color:#a35400;
  font-size:.78rem;
  font-weight:700;
  vertical-align:middle;
}

/* ---------------------------
  Mobile nav overlay
----------------------------*/
body.nav-open::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:998;
  opacity:1;
  transition:opacity .2s ease;
}

@media (min-width:941px){
  body.nav-open::before{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  body.nav-open::before{
    transition:none;
  }

  .features .card.feature,
  .service.card,
  .contact-card,
  .card{
    transition:none !important;
  }
}