/* STS Widen v7.8
   PC footer overlap: footer is inside the SAME sticky stack container.
   No JS, no spacer, footer itself is not sticky. */

.footer-reveal-spacer{
  display:none !important;
}
.site-footer.footer-stack{
  transform:none !important;
  pointer-events:auto !important;
}

@media(min-width:981px){

  /* HOME: all content panels inside .stack-sections stay sticky */
  body.home .stack-sections > .stack-section{
    position:sticky !important;
    top:0 !important;
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;
    overflow:hidden !important;
    border-radius:30px 30px 0 0 !important;
    box-shadow:0 -16px 36px rgba(16,31,47,.08) !important;
  }

  /* SUBPAGES: same */
  body:not(.home) main.subpage-stack > .stack-section{
    position:sticky !important;
    top:0 !important;
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;
    overflow:hidden !important;
    border-radius:30px 30px 0 0 !important;
    box-shadow:0 -16px 36px rgba(16,31,47,.08) !important;
  }

  /*
   * FOOTER:
   * normal flow, higher z-index.
   * Because it is inside the same containing block,
   * the preceding sticky section remains pinned while footer rises over it.
   */
  body.home .stack-sections > .site-footer.footer-stack,
  body:not(.home) main.subpage-stack > .site-footer.footer-stack{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;

    width:100% !important;
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;

    margin:0 !important;
    padding:78px 0 26px !important;

    z-index:500 !important;
    border-radius:30px 30px 0 0 !important;
    box-shadow:0 -22px 50px rgba(16,31,47,.13) !important;
    overflow:hidden !important;
  }

  body.home .stack-sections > .site-footer.footer-stack > .wrap,
  body:not(.home) main.subpage-stack > .site-footer.footer-stack > .wrap{
    width:min(calc(100% - 72px), var(--max)) !important;
    height:100% !important;
    margin:0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  body.home .stack-sections > .site-footer.footer-stack .footer-map-wrap,
  body:not(.home) main.subpage-stack > .site-footer.footer-stack .footer-map-wrap{
    height:54svh !important;
    min-height:0 !important;
    max-height:54svh !important;
    margin-bottom:18px !important;
  }

  body.home .stack-sections > .site-footer.footer-stack .footer-map,
  body.home .stack-sections > .site-footer.footer-stack .footer-map iframe,
  body:not(.home) main.subpage-stack > .site-footer.footer-stack .footer-map,
  body:not(.home) main.subpage-stack > .site-footer.footer-stack .footer-map iframe{
    height:100% !important;
    min-height:0 !important;
  }

  /* make overlap visually obvious */
  body.home .stack-sections > .site-footer.footer-stack::before,
  body:not(.home) main.subpage-stack > .site-footer.footer-stack::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    height:1px !important;
    background:rgba(20,33,47,.08) !important;
  }
}


/* ===== v7.9 footer centered branding ===== */
.site-footer.footer-stack .footer-grid{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:14px !important;
}

.site-footer.footer-stack .footer-grid > div{
  width:100% !important;
  text-align:center !important;
}

.site-footer.footer-stack .footer-logo{
  display:block !important;
  margin:0 auto 14px !important;
  width:auto !important;
  height:72px !important;
  max-width:100% !important;
  object-fit:contain !important;
}

.site-footer.footer-stack .footer-nav{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:12px 22px !important;
  text-align:center !important;
}

.site-footer.footer-stack .footer-nav a{
  text-align:center !important;
}

.site-footer.footer-stack .copyr{
  width:100% !important;
  text-align:center !important;
  margin-top:4px !important;
}

/* mobile footer keeps centered alignment too */
@media(max-width:680px){
  .site-footer.footer-stack .footer-logo{
    height:58px !important;
    margin-bottom:10px !important;
  }
  .site-footer.footer-stack .footer-nav{
    gap:8px 14px !important;
  }
}


/* ===== v8.1 FORCE footer center alignment ===== */
.site-footer.footer-stack .footer-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  justify-items:center !important;
  align-items:center !important;
  text-align:center !important;
  gap:12px !important;
  width:100% !important;
}

.site-footer.footer-stack .footer-grid > div{
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

.site-footer.footer-stack .footer-logo{
  display:block !important;
  margin:0 auto 14px !important;
  padding:0 !important;
  width:auto !important;
  height:74px !important;
  max-width:220px !important;
  object-fit:contain !important;
  object-position:center !important;
}

.site-footer.footer-stack .footer-nav{
  width:100% !important;
  margin:0 auto !important;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px 20px !important;
  text-align:center !important;
}

.site-footer.footer-stack .footer-nav a{
  display:inline-block !important;
  width:auto !important;
  margin:0 !important;
  text-align:center !important;
}

.site-footer.footer-stack .copyr{
  width:100% !important;
  margin:4px auto 0 !important;
  padding:0 !important;
  text-align:center !important;
  justify-content:center !important;
  align-items:center !important;
}

/* prevent old desktop footer grid rules from pulling content left/right */
@media(min-width:981px){
  .site-footer.footer-stack .footer-grid{
    grid-template-columns:1fr !important;
  }
  .site-footer.footer-stack .footer-grid > div:first-child,
  .site-footer.footer-stack .footer-grid > div:last-child{
    justify-self:center !important;
    text-align:center !important;
  }
}

@media(max-width:680px){
  .site-footer.footer-stack .footer-logo{
    height:60px !important;
    max-width:180px !important;
  }
  .site-footer.footer-stack .footer-nav{
    gap:8px 12px !important;
  }
}


/* ===== v8.2 footer DOM rebuilt as a true centered column ===== */
.site-footer.footer-stack .footer-center{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin:0 auto !important;
  gap:14px !important;
}

.site-footer.footer-stack .footer-center .footer-logo{
  display:block !important;
  margin:0 auto 6px !important;
  width:auto !important;
  height:74px !important;
  max-width:220px !important;
  object-fit:contain !important;
}

.site-footer.footer-stack .footer-center .footer-nav{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:10px 22px !important;
  margin:0 auto !important;
  padding:0 !important;
  text-align:center !important;
}

.site-footer.footer-stack .footer-center .footer-nav a{
  display:inline-block !important;
  margin:0 !important;
  text-align:center !important;
}

.site-footer.footer-stack .footer-center .copyr{
  width:100% !important;
  margin:2px auto 0 !important;
  text-align:center !important;
}

/* Old two-column footer layout is no longer used */
.site-footer.footer-stack .footer-grid{
  display:none !important;
}


/* v8.3 visual centering fallback */
.site-footer.footer-stack .footer-center,
.site-footer.footer-stack .footer-map-copy{
  text-align:center !important;
  align-items:center !important;
}
.site-footer.footer-stack .footer-center{
  width:100% !important;
}
.site-footer.footer-stack .footer-nav{
  justify-content:center !important;
  width:100% !important;
}
.site-footer.footer-stack .copyr{
  text-align:center !important;
  width:100% !important;
}


/* ===== v8.4 header menu: white only over main visual ===== */

/* Default: black everywhere */
.site-header .nav a,
.site-header.header-dark .nav a{
  color:#111820 !important;
  text-shadow:none !important;
}
.site-header .menu-btn span,
.site-header.header-dark .menu-btn span{
  background:#111820 !important;
}

/* Hero visible: menu switches to white */
.site-header.header-hero .nav a{
  color:#ffffff !important;
  text-shadow:0 3px 12px rgba(0,0,0,.18) !important;
}
.site-header.header-hero .nav a:hover{
  color:#ffffff !important;
  text-shadow:0 7px 18px rgba(0,0,0,.32) !important;
}
.site-header.header-hero .menu-btn span{
  background:#ffffff !important;
}

/* Keep logo untouched/original colors */
.site-header.header-hero .header-logo,
.site-header.header-dark .header-logo{
  filter:none !important;
}


/* ===== v8.5 definitive header color states ===== */
.site-header.header-hero .nav a{
  color:#fff !important;
  text-shadow:0 3px 12px rgba(0,0,0,.22) !important;
}
.site-header.header-hero .nav a:hover{
  color:#fff !important;
  text-shadow:0 7px 18px rgba(0,0,0,.34) !important;
}
.site-header.header-hero .menu-btn span{
  background:#fff !important;
}

.site-header.header-dark .nav a{
  color:#111820 !important;
  text-shadow:none !important;
}
.site-header.header-dark .nav a:hover{
  color:#111820 !important;
  text-shadow:0 6px 15px rgba(17,24,32,.28) !important;
}
.site-header.header-dark .menu-btn span{
  background:#111820 !important;
}


/* ===== v8.6 header hero override ===== */
.site-header.header-hero .nav a{
  color:#fff !important;
  text-shadow:0 3px 12px rgba(0,0,0,.22) !important;
}
.site-header.header-hero .nav a:hover{
  color:#fff !important;
  text-shadow:0 7px 18px rgba(0,0,0,.34) !important;
}
.site-header.header-hero .menu-btn span{
  background:#fff !important;
}
.site-header.header-dark .nav a{
  color:#111820 !important;
  text-shadow:none !important;
}
.site-header.header-dark .menu-btn span{
  background:#111820 !important;
}


/* =================================================================
   v8.7 MOBILE REBUILD
   Desktop remains unchanged.
   ================================================================= */
@media (max-width:680px){

  html, body{
    overflow-x:hidden !important;
    width:100% !important;
  }

  body{
    min-width:0 !important;
  }

  /* ---------- header ---------- */
  .site-header{
    height:68px !important;
  }
  .header-row{
    height:68px !important;
    padding:0 12px !important;
  }
  .site-header .header-logo{
    height:54px !important;
    width:auto !important;
    max-width:150px !important;
  }

  /* mobile nav */
  .site-header .nav{
    top:68px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none !important;
    padding:14px !important;
    border-radius:16px !important;
  }
  .site-header .nav a{
    font-size:14px !important;
    line-height:1.4 !important;
    padding:10px 8px !important;
  }

  /* ---------- common stacked panels ---------- */
  body.home .stack-sections{
    position:relative !important;
    z-index:10 !important;
    margin-top:-14px !important;
  }

  body.home .stack-sections > .stack-section,
  body:not(.home) main.subpage-stack > .stack-section{
    position:sticky !important;
    top:0 !important;

    width:100% !important;
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;

    margin-top:-14px !important;
    padding:72px 0 24px !important;

    overflow:hidden !important;
    border-radius:18px 18px 0 0 !important;
    box-shadow:0 -12px 28px rgba(16,31,47,.08) !important;
  }

  body.home .stack-sections > .stack-section:first-child,
  body:not(.home) main.subpage-stack > .stack-section:first-child{
    margin-top:0 !important;
    border-radius:0 !important;
  }

  .wrap,
  .narrow,
  .contact-box{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    min-width:0 !important;
  }

  /* ---------- typography ---------- */
  .kicker{
    font-size:9px !important;
    letter-spacing:.16em !important;
    margin-bottom:8px !important;
  }

  .bigword,
  .page-hero .bigword{
    font-size:38px !important;
    line-height:1 !important;
    letter-spacing:-.03em !important;
    margin:0 0 8px !important;
  }

  .title,
  .page-hero h1,
  .lead-block h2{
    font-size:23px !important;
    line-height:1.42 !important;
    letter-spacing:.01em !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
    margin-bottom:12px !important;
  }

  .copy,
  .page-hero p,
  .lead-block p,
  .section p{
    font-size:10.5px !important;
    line-height:1.72 !important;
    overflow-wrap:anywhere !important;
  }

  /* ---------- HERO ---------- */
  .home-hero{
    position:sticky !important;
    top:0 !important;
    z-index:1 !important;
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;
    overflow:hidden !important;
  }

  .hero-stage{
    position:absolute !important;
    inset:0 !important;
    height:100svh !important;
    min-height:100svh !important;
    padding:72px 12px 56px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .hero-ring{
    width:min(72vw, 42svh, 300px) !important;
    height:min(72vw, 42svh, 300px) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:300px !important;
    max-height:300px !important;
    overflow:visible !important;
  }

  .hero-ring-svg{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    overflow:visible !important;
  }

  .hero-ring-text{
    font-size:8px !important;
    letter-spacing:0 !important;
  }

  .hero-center-copy{
    width:68% !important;
    max-width:205px !important;
  }

  .hero-center-copy .hero-kicker{
    font-size:7px !important;
    letter-spacing:.08em !important;
    white-space:nowrap !important;
  }

  .hero-center-line{
    width:30px !important;
    margin:8px auto 10px !important;
  }

  .hero-center-copy h1{
    font-size:18px !important;
    line-height:1.5 !important;
    letter-spacing:.01em !important;
    margin:0 !important;
    white-space:normal !important;
  }

  .hero-center-copy .hero-note{
    font-size:7.2px !important;
    line-height:1.55 !important;
    margin-top:10px !important;
  }

  /* ---------- scroll cue ---------- */
  .section-scroll-cue{
    right:8px !important;
    bottom:12px !important;
    top:auto !important;
    transform:none !important;
    padding:6px 5px !important;
    gap:5px !important;
    border-radius:999px !important;
  }
  .section-scroll-cue .scroll-text{
    font-size:7px !important;
    letter-spacing:.08em !important;
  }
  .section-scroll-cue .scroll-arrows{
    width:14px !important;
    height:18px !important;
  }

  /* ---------- About ---------- */
  .home-about.stack-section{
    padding-top:72px !important;
  }

  .about-head{
    max-width:100% !important;
  }

  .about-head .title{
    font-size:22px !important;
    line-height:1.4 !important;
  }

  .about-head .copy{
    font-size:9.7px !important;
    line-height:1.58 !important;
    margin-top:10px !important;
  }

  .about-visuals{
    position:relative !important;
    display:block !important;
    height:37svh !important;
    min-height:0 !important;
    max-height:none !important;
    margin-top:16px !important;
  }

  .about-visuals figure{
    position:absolute !important;
    overflow:hidden !important;
  }

  .about-visuals .a{
    left:1% !important;
    top:16% !important;
    width:30% !important;
    height:56% !important;
    border-radius:45% 55% 42% 58% / 40% 45% 55% 60% !important;
  }

  .about-visuals .b{
    left:35% !important;
    top:0 !important;
    width:30% !important;
    height:78% !important;
    border-radius:44% 56% 48% 52% / 36% 44% 56% 64% !important;
  }

  .about-visuals .c{
    right:1% !important;
    top:16% !important;
    width:30% !important;
    height:56% !important;
    border-radius:54% 46% 57% 43% / 47% 41% 59% 53% !important;
  }

  .about-visuals img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  .about-link{
    margin-top:6px !important;
  }

  .about-link .more{
    font-size:11px !important;
  }

  /* ---------- Services ---------- */
  .home-services.stack-section{
    padding-top:72px !important;
  }

  .home-service-head{
    display:block !important;
    margin-bottom:14px !important;
  }

  .home-service-head .bigword{
    font-size:44px !important;
    margin-bottom:8px !important;
  }

  .home-service-row{
    display:grid !important;
    grid-template-columns:30px minmax(0,1fr) 18px !important;
    gap:4px 8px !important;
    align-items:start !important;
    padding:12px 0 !important;
  }

  .home-service-row .num{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    padding-top:3px !important;
    font-size:9px !important;
  }

  .home-service-row h3{
    grid-column:2 !important;
    grid-row:1 !important;
    font-size:15px !important;
    line-height:1.35 !important;
    margin:0 !important;
    min-width:0 !important;
  }

  .home-service-row p{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:1px 0 0 !important;
    font-size:8.5px !important;
    line-height:1.45 !important;
    min-width:0 !important;
  }

  .home-service-row .arrow{
    grid-column:3 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
    justify-self:end !important;
    font-size:15px !important;
  }

  /* ---------- Price teaser ---------- */
  .price-teaser.stack-section{
    padding-top:72px !important;
  }

  .price-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .price-list{
    margin-top:2px !important;
  }

  .price-line{
    padding:9px 0 !important;
    gap:8px !important;
  }

  .price-line span,
  .price-line strong{
    font-size:10px !important;
  }

  .price-note{
    font-size:8px !important;
    line-height:1.5 !important;
    margin-top:8px !important;
  }

  /* ---------- generic subpages ---------- */
  body:not(.home) main.subpage-stack > .page-hero{
    display:flex !important;
    align-items:center !important;
  }

  .two-col{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .photo{
    min-height:0 !important;
  }

  .photo img{
    height:26svh !important;
    min-height:150px !important;
    max-height:210px !important;
    object-fit:cover !important;
  }

  .lead-block{
    min-width:0 !important;
  }

  /* ---------- plan cards ---------- */
  .plan-grid,
  .screen-plans{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .plan{
    padding:10px 12px !important;
    min-width:0 !important;
  }

  .plan .label{
    font-size:7px !important;
    letter-spacing:.1em !important;
  }

  .plan h3{
    font-size:14px !important;
    line-height:1.3 !important;
    margin:4px 0 !important;
  }

  .plan .price{
    font-size:19px !important;
    line-height:1.2 !important;
    margin:4px 0 !important;
  }

  .plan p,
  .plan li{
    font-size:8px !important;
    line-height:1.45 !important;
  }

  .plan ul{
    margin:5px 0 0 !important;
    padding-left:16px !important;
  }

  /* ---------- tables ---------- */
  .price-table,
  .company-table{
    width:100% !important;
    table-layout:fixed !important;
  }

  .price-table tr,
  .company-table tr{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .price-table th,
  .price-table td,
  .company-table th,
  .company-table td{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    text-align:left !important;
    overflow-wrap:anywhere !important;
  }

  .price-table th,
  .company-table th{
    padding:7px 0 1px !important;
    border-bottom:0 !important;
    font-size:8px !important;
  }

  .price-table td,
  .company-table td{
    padding:0 0 7px !important;
    font-size:9px !important;
    line-height:1.45 !important;
  }

  /* ---------- profile ---------- */
  .profile-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .profile-photo{
    padding:8px !important;
  }

  .profile-photo img{
    width:100% !important;
    height:22svh !important;
    min-height:130px !important;
    max-height:180px !important;
    object-fit:contain !important;
  }

  /* ---------- contact ---------- */
  .contact-methods{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .contact-method{
    padding:10px 12px !important;
  }

  .contact-method .method-label{
    font-size:7px !important;
  }

  .contact-method strong{
    font-size:14px !important;
    overflow-wrap:anywhere !important;
  }

  .contact-method small{
    font-size:8px !important;
  }

  .contact-form{
    margin-top:10px !important;
  }

  .contact-form .field{
    margin-bottom:8px !important;
  }

  .contact-form label{
    font-size:8px !important;
    margin-bottom:3px !important;
  }

  .contact-form input,
  .contact-form textarea{
    font-size:12px !important;
    padding:8px 10px !important;
  }

  .contact-form textarea{
    min-height:90px !important;
    max-height:110px !important;
  }

  /* ---------- footer as final overlay panel ---------- */
  body.home .stack-sections > .site-footer.footer-stack,
  body:not(.home) main.subpage-stack > .site-footer.footer-stack{
    position:relative !important;
    top:auto !important;
    width:100% !important;
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;

    margin-top:-14px !important;
    padding:68px 0 14px !important;

    z-index:500 !important;
    overflow:hidden !important;
    border-radius:18px 18px 0 0 !important;
    box-shadow:0 -14px 32px rgba(16,31,47,.10) !important;
  }

  .site-footer.footer-stack > .wrap{
    width:calc(100% - 22px) !important;
    height:100% !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  .site-footer.footer-stack .footer-map-wrap{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    height:auto !important;
    max-height:none !important;
    margin-bottom:8px !important;
  }

  .site-footer.footer-stack .footer-map-copy{
    padding:8px !important;
  }

  .site-footer.footer-stack .footer-map-copy .kicker{
    margin-bottom:4px !important;
  }

  .site-footer.footer-stack .footer-map-copy h2{
    font-size:18px !important;
    margin:0 0 4px !important;
  }

  .site-footer.footer-stack .footer-map-copy p{
    font-size:8px !important;
    line-height:1.45 !important;
    margin:3px 0 !important;
  }

  .site-footer.footer-stack .footer-map{
    height:24svh !important;
    min-height:150px !important;
    max-height:190px !important;
  }

  .site-footer.footer-stack .footer-map iframe{
    height:100% !important;
  }

  .site-footer.footer-stack .footer-center{
    gap:6px !important;
  }

  .site-footer.footer-stack .footer-logo{
    height:48px !important;
    max-width:150px !important;
    margin-bottom:4px !important;
  }

  .site-footer.footer-stack .footer-nav{
    gap:5px 8px !important;
  }

  .site-footer.footer-stack .footer-nav a{
    font-size:8px !important;
    line-height:1.35 !important;
  }

  .site-footer.footer-stack .copyr{
    font-size:7px !important;
    margin-top:4px !important;
  }
}


/* ==========================================================
   v8.8 MOBILE ONLY - HERO CIRCLE FIX
   Other mobile sections intentionally untouched.
   ========================================================== */
@media (max-width:680px){

  .home-hero .hero-stage{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100svh !important;
    padding:68px 0 54px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .home-hero .hero-ring{
    position:relative !important;
    flex:0 0 auto !important;

    width:min(64vw, 260px) !important;
    height:min(64vw, 260px) !important;

    min-width:0 !important;
    min-height:0 !important;
    max-width:260px !important;
    max-height:260px !important;

    margin:0 auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    overflow:visible !important;
    transform:none !important;
  }

  .home-hero .hero-ring-svg{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    overflow:visible !important;
  }

  .home-hero .hero-ring-text{
    font-size:7.3px !important;
    letter-spacing:0 !important;
  }

  .home-hero .hero-center-copy{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;

    width:68% !important;
    max-width:178px !important;
    margin:0 !important;

    text-align:center !important;
  }

  .home-hero .hero-center-copy h1{
    font-size:16px !important;
    line-height:1.48 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
  }

  .home-hero .hero-center-copy .hero-kicker{
    font-size:6.5px !important;
    letter-spacing:.06em !important;
    white-space:nowrap !important;
  }

  .home-hero .hero-center-copy .hero-note{
    font-size:6.5px !important;
    line-height:1.5 !important;
    margin-top:8px !important;
  }

  .home-hero .hero-center-line{
    width:26px !important;
    margin:7px auto 9px !important;
  }
}


/* ==========================================================
   v8.9 MOBILE HERO - CIRCULAR TEXT SIZE FIX ONLY
   SVG font-size is in viewBox units, so it must be much larger
   than a normal CSS text size.
   ========================================================== */
@media (max-width:680px){
  .home-hero .hero-ring-text{
    font-size:26px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
  }
}


/* ==========================================================
   v9.0 MOBILE ONLY - STACK / COVER EFFECT
   Previous panel stays pinned, next panel rises over it.
   ========================================================== */
@media (max-width:680px){

  /* hero itself stays pinned first */
  body.home .home-hero{
    position:sticky !important;
    top:0 !important;
    z-index:1 !important;
  }

  body.home .stack-sections,
  body:not(.home) main.subpage-stack{
    position:relative !important;
    z-index:10 !important;
    overflow:visible !important;
  }

  /* every content section becomes a full-screen sticky panel */
  body.home .stack-sections > .stack-section,
  body:not(.home) main.subpage-stack > .stack-section{
    position:sticky !important;
    top:0 !important;

    width:100% !important;
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;

    overflow:hidden !important;

    margin-top:-16px !important;
    border-radius:18px 18px 0 0 !important;
    box-shadow:0 -14px 30px rgba(16,31,47,.10) !important;
  }

  /* first content panel sits naturally over hero */
  body.home .stack-sections > .stack-section:first-child,
  body:not(.home) main.subpage-stack > .stack-section:first-child{
    margin-top:0 !important;
  }

  /* increasing z-index ensures each next panel covers the previous one */
  body.home .stack-sections > .stack-section:nth-child(1),
  body:not(.home) main.subpage-stack > .stack-section:nth-child(1){
    z-index:20 !important;
  }
  body.home .stack-sections > .stack-section:nth-child(2),
  body:not(.home) main.subpage-stack > .stack-section:nth-child(2){
    z-index:21 !important;
  }
  body.home .stack-sections > .stack-section:nth-child(3),
  body:not(.home) main.subpage-stack > .stack-section:nth-child(3){
    z-index:22 !important;
  }
  body.home .stack-sections > .stack-section:nth-child(4),
  body:not(.home) main.subpage-stack > .stack-section:nth-child(4){
    z-index:23 !important;
  }
  body.home .stack-sections > .stack-section:nth-child(5),
  body:not(.home) main.subpage-stack > .stack-section:nth-child(5){
    z-index:24 !important;
  }
  body.home .stack-sections > .stack-section:nth-child(6),
  body:not(.home) main.subpage-stack > .stack-section:nth-child(6){
    z-index:25 !important;
  }

  /* footer behaves as the final cover panel */
  body.home .stack-sections > .site-footer.footer-stack,
  body:not(.home) main.subpage-stack > .site-footer.footer-stack{
    position:relative !important;

    width:100% !important;
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;

    margin-top:-16px !important;
    border-radius:18px 18px 0 0 !important;
    box-shadow:0 -16px 34px rgba(16,31,47,.12) !important;

    z-index:100 !important;
    overflow:hidden !important;
  }

  /* remove any old mobile rules that cancelled the cover effect */
  .site-footer.footer-stack{
    transform:none !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
  }
}


/* ==========================================================
   v9.1 MOBILE STICKY FIX
   Important for iOS Chrome/Safari:
   overflow-x:hidden on an ancestor can stop sticky behavior.
   ========================================================== */
@media (max-width:680px){

  html,
  body{
    overflow-x:clip !important;
    overflow-y:visible !important;
  }

  .page-stack-shell,
  body.home main,
  body.home .stack-sections,
  body:not(.home) main.subpage-stack{
    overflow:visible !important;
    contain:none !important;
    transform:none !important;
    filter:none !important;
    perspective:none !important;
  }

  /* hero pinned while first panel rises over it */
  body.home .home-hero{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:0 !important;
    z-index:1 !important;
  }

  /* true sticky panels */
  body.home .stack-sections > .stack-section,
  body:not(.home) main.subpage-stack > .stack-section{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:0 !important;

    width:100% !important;
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;

    margin:0 !important;
    overflow:hidden !important;

    border-radius:18px 18px 0 0 !important;
    box-shadow:0 -14px 30px rgba(16,31,47,.11) !important;
  }

  body.home .stack-sections > .stack-section:nth-child(1),
  body:not(.home) main.subpage-stack > .stack-section:nth-child(1){z-index:10 !important;}

  body.home .stack-sections > .stack-section:nth-child(2),
  body:not(.home) main.subpage-stack > .stack-section:nth-child(2){z-index:20 !important;}

  body.home .stack-sections > .stack-section:nth-child(3),
  body:not(.home) main.subpage-stack > .stack-section:nth-child(3){z-index:30 !important;}

  body.home .stack-sections > .stack-section:nth-child(4),
  body:not(.home) main.subpage-stack > .stack-section:nth-child(4){z-index:40 !important;}

  body.home .stack-sections > .stack-section:nth-child(5),
  body:not(.home) main.subpage-stack > .stack-section:nth-child(5){z-index:50 !important;}

  body.home .stack-sections > .stack-section:nth-child(6),
  body:not(.home) main.subpage-stack > .stack-section:nth-child(6){z-index:60 !important;}

  /* footer is normal flow, so it rises over the last sticky panel */
  body.home .stack-sections > .site-footer.footer-stack,
  body:not(.home) main.subpage-stack > .site-footer.footer-stack{
    position:relative !important;
    top:auto !important;
    z-index:100 !important;

    width:100% !important;
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;

    margin:0 !important;
    overflow:hidden !important;

    border-radius:18px 18px 0 0 !important;
    box-shadow:0 -16px 34px rgba(16,31,47,.12) !important;
  }
}


/* ==========================================================
   v9.2 MOBILE CONTACT FORM FIX ONLY
   ========================================================== */
@media (max-width:680px){

  .contact-box,
  .contact-form,
  .contact-form .field{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select,
  .contact-form button{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .contact-form input,
  .contact-form textarea{
    padding:8px 10px !important;
    font-size:12px !important;
    border-radius:8px !important;
  }

  .contact-form textarea{
    height:82px !important;
    min-height:82px !important;
    max-height:82px !important;
    resize:none !important;
  }

  .contact-form .field{
    margin-bottom:7px !important;
  }

  .contact-form label{
    display:block !important;
    margin-bottom:3px !important;
    font-size:8px !important;
    line-height:1.3 !important;
  }

  .contact-form button,
  .contact-form input[type="submit"]{
    width:100% !important;
    margin-top:6px !important;
    padding:10px 12px !important;
  }
}


/* ==========================================================
   v9.3 MOBILE CONTACT SPLIT
   Screen 1 = LINE/TEL/MAIL
   Screen 2 = form
   ========================================================== */

/* Desktop: keep existing combined contact section, hide mobile duplicate. */
.mobile-contact-form-section{
  display:none !important;
}

@media (max-width:680px){

  /* First contact panel only shows contact methods */
  .contact-form-desktop,
  .contact-notice-desktop{
    display:none !important;
  }

  .mobile-contact-form-section{
    display:flex !important;
    align-items:center !important;
  }

  .mobile-contact-form-section .contact-box{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin:0 auto !important;
  }

  .mobile-contact-form-head{
    margin-bottom:14px !important;
  }

  .mobile-contact-form-head .title{
    font-size:22px !important;
    line-height:1.4 !important;
    margin-bottom:0 !important;
  }

  /* First contact panel fits cleanly */
  .contact-methods{
    gap:10px !important;
  }

  .contact-method{
    padding:12px 14px !important;
  }

  .contact-method strong{
    font-size:15px !important;
  }

  .contact-method small{
    font-size:8.5px !important;
  }

  /* Form panel: all fields fit in one viewport */
  .contact-form-mobile{
    width:100% !important;
    max-width:100% !important;
    margin-top:0 !important;
  }

  .contact-form-mobile .field{
    margin-bottom:6px !important;
  }

  .contact-form-mobile label{
    font-size:8px !important;
    margin-bottom:2px !important;
  }

  .contact-form-mobile input,
  .contact-form-mobile textarea{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding:7px 9px !important;
    font-size:11px !important;
  }

  .contact-form-mobile input{
    height:34px !important;
  }

  .contact-form-mobile textarea{
    height:78px !important;
    min-height:78px !important;
    max-height:78px !important;
  }

  .contact-form-mobile button,
  .contact-form-mobile input[type="submit"]{
    width:100% !important;
    padding:9px 12px !important;
    margin-top:4px !important;
  }

  .mobile-contact-form-section .notice{
    font-size:9px !important;
    line-height:1.5 !important;
    padding:8px 10px !important;
    margin-bottom:8px !important;
  }
}


/* ==========================================================
   v9.4 MOBILE CONTACT FORM WIDTH FIX ONLY
   ========================================================== */
@media (max-width:680px){

  .mobile-contact-form-section,
  .mobile-contact-form-section .contact-box,
  .mobile-contact-form-section .contact-form,
  .mobile-contact-form-section form,
  .mobile-contact-form-section .field{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .mobile-contact-form-section .contact-box{
    width:calc(100% - 28px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:hidden !important;
  }

  .mobile-contact-form-section input,
  .mobile-contact-form-section textarea,
  .mobile-contact-form-section select,
  .mobile-contact-form-section button{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .mobile-contact-form-section input[type="text"],
  .mobile-contact-form-section input[type="email"],
  .mobile-contact-form-section input[type="tel"],
  .mobile-contact-form-section input[type="url"],
  .mobile-contact-form-section textarea{
    padding-left:9px !important;
    padding-right:9px !important;
  }

  .mobile-contact-form-section .field{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .mobile-contact-form-section button,
  .mobile-contact-form-section input[type="submit"]{
    max-width:100% !important;
  }
}


/* v9.5 mobile zoom lock */
@media(max-width:680px){
  html,
  body{
    touch-action:pan-x pan-y !important;
  }

  input,
  textarea,
  select,
  button{
    font-size:16px !important;
  }
}


/* ==========================================================
   v9.6 GLOBAL MOBILE ZOOM LOCK - ALL PAGES
   ========================================================== */
html,
body{
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}

@media (max-width:980px){
  html,
  body,
  .page-stack-shell,
  main,
  .home-hero,
  .stack-sections,
  .subpage-stack,
  .site-footer{
    touch-action:pan-x pan-y !important;
  }

  input,
  textarea,
  select,
  button{
    font-size:16px !important;
  }
}


/* ==========================================================
   v9.7 HARD MOBILE ZOOM LOCK
   Applies to EVERY hit-testable element, including during sticky transitions.
   ========================================================== */
@media (max-width:980px){

  html,
  body,
  body *,
  body *::before,
  body *::after{
    touch-action:pan-y !important;
  }

  html,
  body{
    overscroll-behavior-x:none !important;
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }

  /* Prevent iOS focus zoom */
  input,
  textarea,
  select,
  button{
    font-size:16px !important;
  }
}


/* ==========================================================
   v9.8 MOBILE HEADER COLOR
   Mobile menu is always black, including over the main visual.
   Desktop behavior remains unchanged.
   ========================================================== */
@media (max-width:680px){

  .site-header .nav a,
  .site-header.header-hero .nav a,
  .site-header.header-dark .nav a,
  .site-header.header-light .nav a{
    color:#111820 !important;
    text-shadow:none !important;
  }

  .site-header .nav a:hover,
  .site-header.header-hero .nav a:hover,
  .site-header.header-dark .nav a:hover,
  .site-header.header-light .nav a:hover{
    color:#111820 !important;
    text-shadow:0 6px 15px rgba(17,24,32,.20) !important;
  }

  .site-header .menu-btn span,
  .site-header.header-hero .menu-btn span,
  .site-header.header-dark .menu-btn span,
  .site-header.header-light .menu-btn span{
    background:#111820 !important;
  }
}


/* ==========================================================
   v9.9 CONTACT ACTION CARDS - PC + MOBILE
   ========================================================== */
.contact-method.contact-action{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  position:relative !important;
  overflow:hidden !important;
  cursor:pointer !important;
}

.contact-action-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}

.contact-action-side{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.contact-action-icon{
  width:46px !important;
  height:46px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(25,42,58,.15) !important;
  background:rgba(255,255,255,.72) !important;
  transition:transform .24s ease, box-shadow .24s ease, background .24s ease !important;
}

.contact-action-icon svg{
  width:23px !important;
  height:23px !important;
  fill:none !important;
  stroke:#244f74 !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.contact-action-icon-line svg path:first-child{
  fill:#06c755 !important;
  stroke:#06c755 !important;
}
.contact-action-icon-line svg path:last-child{
  fill:none !important;
  stroke:#ffffff !important;
  stroke-width:1.5 !important;
}

.contact-action-hint{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  font-size:9px !important;
  letter-spacing:.08em !important;
  color:#5e6871 !important;
  white-space:nowrap !important;
  transition:transform .24s ease, color .24s ease !important;
}

.contact-action-hint b{
  font-weight:600 !important;
}

.contact-action-hint > span{
  font-size:17px !important;
  line-height:1 !important;
  color:#244f74 !important;
}

.mobile-hint{
  display:none !important;
}

.contact-method.contact-action:hover{
  transform:translateY(-3px) scale(1.008) !important;
  box-shadow:0 14px 28px rgba(22,38,54,.11) !important;
}

.contact-method.contact-action:hover .contact-action-icon{
  transform:scale(1.08) !important;
  box-shadow:0 8px 18px rgba(25,42,58,.14) !important;
}

.contact-method.contact-action:hover .contact-action-hint{
  transform:translateX(4px) !important;
  color:#244f74 !important;
}

@media(max-width:680px){
  .contact-method.contact-action{
    gap:10px !important;
    padding:12px 12px !important;
  }

  .contact-action-icon{
    width:40px !important;
    height:40px !important;
  }

  .contact-action-icon svg{
    width:20px !important;
    height:20px !important;
  }

  .contact-action-side{
    gap:7px !important;
  }

  .contact-action-hint{
    font-size:8px !important;
    gap:3px !important;
  }

  .contact-action-hint > span{
    font-size:15px !important;
  }

  .desktop-hint{
    display:none !important;
  }

  .mobile-hint{
    display:inline !important;
  }

  .contact-action-copy strong{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }
}