:root {
      --bg: #ffffff;
      --bg-soft: #f4f8fb;
      --bg-alt: #e6eff7;
      --ink: #0f3a5f;
      --ink-dark: #0a2c49;
      --ink-soft: #46607c;
      --ink-mute: #8a96a8;
      --line: #dde5ee;
      --accent: #ff6b35;
      --accent-dark: #e0521c;
      --accent-soft: #fff0e8;
      --teal: #0891b2;
      --whatsapp: #25d366;
      --whatsapp-d: #1da851;
      --green: #16a34a;
      --gold: #f5b933;
      --radius: 12px;
      --radius-lg: 20px;
      --shadow-sm: 0 2px 8px rgba(15, 58, 95, .06);
      --shadow-md: 0 10px 30px rgba(15, 58, 95, .10);
      --shadow-lg: 0 20px 50px rgba(255, 107, 53, .30);
      /* diagram material tones */
      --slab: #dde8f2;
      --slab-hi: #eff4fa;
      --support: #cfdbe8;
      --tealtint: #d8eef3;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Poppins', system-ui, sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.68;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden
    }

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

    a {
      color: inherit
    }

    .wrap {
      width: min(1180px, 92vw);
      margin-inline: auto
    }

    .section {
      padding: clamp(4rem, 9vw, 7.5rem) 0
    }

    .measure {
      max-width: 64ch
    }

    .band-dark {
      background: var(--ink);
      color: #fff
    }

    .band-soft {
      background: var(--bg-soft)
    }

    .eyebrow {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      gap: .75em;
      margin-bottom: 1.3rem
    }

    .eyebrow::before {
      content: "";
      width: 9px;
      height: 9px;
      background: var(--accent);
      display: block;
      border-radius: 2px
    }

    .band-dark .eyebrow {
      color: var(--gold)
    }

    .band-dark .eyebrow::before {
      background: var(--gold)
    }

    h1,
    h2,
    h3 {
      letter-spacing: -.015em
    }

    .h-hero {
      font-size: clamp(2rem, 6vw, 3rem);
      font-weight: 700;
      line-height: 1.03;
      letter-spacing: -.03em
    }

    h2 {
      font-size: clamp(1.7rem, 3.6vw, 2rem);
      font-weight: 700;
      line-height: 1.1
    }

    h3 {
      font-size: 1.05rem;
      font-weight: 600;
      letter-spacing: 0
    }

    p {
      margin-top: 1rem
    }

    strong {
      font-weight: 700
    }

    .tel {
      color: var(--accent);
      text-decoration: none;
      font-weight: 700;
      white-space: nowrap;
      border-bottom: 1.5px solid transparent;
      transition: border-color .2s
    }

    .tel:hover {
      border-color: var(--accent)
    }

    .band-dark .tel {
      color: #fff
    }

    /* buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: .6em;
      cursor: pointer;
      font-family: inherit;
      font-weight: 600;
      font-size: .95rem;
      padding: .9em 1.6em;
      border: 1.7px solid transparent;
      border-radius: var(--radius);
      text-decoration: none;
      transition: transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s
    }

    .btn svg {
      width: 1.05em;
      height: 1.05em;
      flex: none
    }

    .btn--primary {
      background: var(--accent);
      color: #fff;
      box-shadow: var(--shadow-lg)
    }

    .btn--primary:hover {
      background: var(--accent-dark);
      transform: translateY(-2px)
    }

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

    .btn--ink:hover {
      background: var(--ink-dark);
      transform: translateY(-2px)
    }

    .btn--ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--line)
    }

    .btn--ghost:hover {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
      transform: translateY(-2px)
    }

    .btn--light {
      background: #fff;
      color: var(--ink)
    }

    .btn--light:hover {
      transform: translateY(-2px);
      background: var(--bg-soft)
    }

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

    .btn--ghost-light:hover {
      background: #fff;
      color: var(--ink);
      transform: translateY(-2px)
    }

    .btn--wa {
      background: var(--whatsapp);
      color: #fff
    }

    .btn--wa:hover {
      background: var(--whatsapp-d);
      transform: translateY(-2px)
    }

    .btn-row {
      display: flex;
      flex-wrap: wrap;
      gap: .9rem;
      margin-top: 2rem
    }

    /* header */
    .header {
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(255, 255, 255, .85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line)
    }

    .header__in {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 70px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: .65rem;
      text-decoration: none
    }

    .brand__mark {
      width: 30px;
      height: 30px;
      flex: none
    }

    .brand__name {
      font-weight: 700;
      letter-spacing: .12em;
      font-size: .92rem;
      text-transform: uppercase
    }

    .brand__logo {
      height: clamp(45px, 5vw, 65px);
      width: auto;
      display: block
    }

    .footer__logo {
      height: clamp(40px, 6vw, 48px);
      width: auto;
      display: block
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 2rem
    }

    .nav a {
      text-decoration: none;
      font-weight: 500;
      font-size: .92rem;
      color: var(--ink-soft);
      transition: color .2s
    }

    .nav a:hover {
      color: var(--accent)
    }

    .header__cta {
      display: flex;
      align-items: center;
      gap: 1.3rem
    }

    .header__tel {
      font-weight: 600;
      font-size: .92rem;
      text-decoration: none;
      color: var(--ink)
    }

    .header .btn {
      padding: .6em 1.15em;
      font-size: .85rem
    }

    @media(max-width:900px) {
      .nav {
        display: none
      }

      .header__tel {
        display: none
      }
    }

    /* hero */
    .hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, var(--bg), var(--bg-soft))
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .6;
      background-image: repeating-linear-gradient(0deg, transparent 0 79px, rgba(15, 58, 95, .04) 79px 80px), repeating-linear-gradient(90deg, transparent 0 79px, rgba(15, 58, 95, .04) 79px 80px)
    }

    .hero__grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: clamp(2rem, 4vw, 4rem);
      align-items: center;
      padding-top: clamp(3rem, 6vw, 5.5rem);
      padding-bottom: clamp(3rem, 6vw, 5.5rem)
    }

    .hero__lead {
      font-size: clamp(1.06rem, 1.5vw, 1.26rem);
      color: var(--ink-soft);
      margin-top: 1.5rem;
      max-width: 44ch
    }

    .hero__tags {
      margin-top: 1.6rem;
      font-size: .92rem;
      font-weight: 500;
      line-height: 1.6
    }

    .hero__tags .svc {
      font-weight: 600
    }

    .hero__tags .dot {
      color: var(--accent);
      margin-inline: .45em;
      font-weight: 700
    }

    .hero__media {
      position: relative
    }

    .hero__photo {
      width: 100%;
      height: clamp(330px, 44vw, 540px);
      object-fit: cover;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md)
    }

    .hero__media::after {
      content: "";
      position: absolute;
      top: -16px;
      right: -16px;
      width: 130px;
      height: 130px;
      background: var(--accent-soft);
      border-radius: var(--radius-lg);
      z-index: -1
    }

    .hero__badge {
      position: absolute;
      left: -14px;
      bottom: 26px;
      background: #fff;
      box-shadow: var(--shadow-md);
      padding: .9rem 1.2rem;
      display: flex;
      align-items: center;
      gap: .7rem;
      border-left: 4px solid var(--accent);
      border-radius: var(--radius);
      max-width: 78%
    }

    .hero__badge svg {
      width: 26px;
      height: 26px;
      color: var(--green);
      flex: none
    }

    .hero__badge b {
      display: block;
      font-size: .98rem
    }

    .hero__badge span {
      font-size: .78rem;
      color: var(--ink-soft)
    }

    @media(max-width:880px) {
      .hero__grid {
        grid-template-columns: 1fr
      }

      .hero__media {
        order: -1;
        max-width: 560px
      }
    }

    /* split (entreprise + diagram) */
    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 4.5vw, 4.5rem);
      align-items: center
    }

    .diagram-card {
      background: #fff;
      padding: clamp(1.2rem, 2.5vw, 2rem);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      border-top: 4px solid var(--teal)
    }

    .diagram-card figcaption {
      margin-top: .6rem;
      font-size: .78rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-mute);
      text-align: center;
      font-weight: 600
    }

    @media(max-width:860px) {
      .split {
        grid-template-columns: 1fr
      }

      .diagram-card {
        order: -1
      }
    }

    /* illustration reveal */
    .il-slab,
    .il-plot,
    .il-level,
    .il-water,
    .il-spacer,
    .il-label {
      opacity: 0;
      transition: opacity .7s ease, transform .7s ease
    }

    .il-plot {
      transform: translateY(14px)
    }

    .il-slab {
      transform: translateY(-14px)
    }

    .il-spacer {
      transform: translateY(-10px)
    }

    .il-level,
    .il-label {
      transform: translateY(6px)
    }

    .is-in .il-slab,
    .is-in .il-plot,
    .is-in .il-spacer,
    .is-in .il-level,
    .is-in .il-water,
    .is-in .il-label {
      opacity: 1;
      transform: none
    }

    .is-in .il-plot:nth-of-type(1) {
      transition-delay: .05s
    }

    .is-in .il-plot:nth-of-type(2) {
      transition-delay: .15s
    }

    .is-in .il-plot:nth-of-type(3) {
      transition-delay: .25s
    }

    .is-in .il-slab {
      transition-delay: .4s
    }

    .is-in .il-spacer {
      transition-delay: .55s
    }

    .is-in .il-level {
      transition-delay: .7s
    }

    .is-in .il-water {
      transition-delay: .9s
    }

    .is-in .il-label {
      transition-delay: 1s
    }

    .il-water-dash {
      stroke-dasharray: 6 7;
      animation: flow 1.6s linear infinite
    }

    @keyframes flow {
      to {
        stroke-dashoffset: -26
      }
    }

    svg text {
      font-family: 'Poppins', sans-serif
    }

    /* services */
    .tiles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 2.6rem
    }

    .tile-card {
      background: #fff;
      display: flex;
      flex-direction: column;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      transition: transform .25s, box-shadow .25s
    }

    .tile-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 28px 52px rgba(15, 58, 95, .16)
    }

    .tile-card__media {
      position: relative;
      height: 208px
    }

    .tile-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .tile-card__tag {
      position: absolute;
      left: 14px;
      bottom: -20px;
      width: 44px;
      height: 44px;
      background: var(--teal);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm)
    }

    .tile-card__tag svg {
      width: 24px;
      height: 24px
    }

    .tile-card__body {
      padding: clamp(1.6rem, 2.4vw, 2.2rem) clamp(1.4rem, 2.2vw, 2rem) clamp(1.6rem, 2.2vw, 2rem);
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .tile-card h2 {
      font-size: clamp(1.3rem, 2vw, 1.55rem);
      margin-top: .4rem
    }

    .tile-card p {
      font-size: .96rem
    }

    .lead-label {
      margin-top: 1.2rem;
      font-weight: 600;
      font-size: .95rem
    }

    .tile-card .btn {
      margin-top: 1.8rem;
      align-self: flex-start
    }

    @media(max-width:880px) {
      .tiles {
        grid-template-columns: 1fr
      }
    }

    .checklist {
      list-style: none;
      margin-top: .7rem
    }

    .checklist li {
      position: relative;
      padding-left: 1.7em;
      margin: .5em 0;
      font-size: .95rem
    }

    .checklist li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .5em;
      width: 9px;
      height: 9px;
      background: var(--accent);
      border-radius: 2px
    }

    /* gallery */
    .gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 2.6rem
    }

    .gallery figure {
      position: relative;
      overflow: hidden;
      margin: 0;
      border-radius: var(--radius-lg)
    }

    .gallery img {
      width: 100%;
      height: clamp(200px, 21vw, 272px);
      object-fit: cover;
      transition: transform .55s ease
    }

    .gallery figure:hover img {
      transform: scale(1.07)
    }

    .gallery figcaption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 1.4rem 1rem .9rem;
      color: #fff;
      font-weight: 600;
      font-size: .92rem;
      background: linear-gradient(transparent, rgba(10, 44, 73, .86))
    }

    .gallery figcaption small {
      display: block;
      font-weight: 400;
      font-size: .78rem;
      opacity: .85
    }

    @media(max-width:860px) {
      .gallery {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:520px) {
      .gallery {
        grid-template-columns: 1fr
      }
    }

    .gallery-cta {
      text-align: center;
      margin-top: 2.8rem
    }

    .gallery-cta p {
      font-size: 1.1rem;
      margin-bottom: 1.3rem
    }

    /* why band */
    .why-grid {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.6rem 2.2rem;
      margin-top: 2.8rem
    }

    .why-grid li {
      position: relative;
      padding-left: 1.7em;
      line-height: 1.55
    }

    .why-grid li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .5em;
      width: 10px;
      height: 10px;
      background: var(--gold);
      border-radius: 2px
    }

    @media(max-width:880px) {
      .why-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:560px) {
      .why-grid {
        grid-template-columns: 1fr
      }
    }

    /* image CTA band */
    .cta-band {
      position: relative;
      color: #fff;
      text-align: center;
      background: linear-gradient(rgba(10, 44, 73, .82), rgba(10, 44, 73, .84)), url('https://images.unsplash.com/photo-1493246318656-5bfd4cfb29b8?w=1700&q=70&auto=format&fit=crop') center/cover fixed
    }

    .cta-band__title {
      font-size: clamp(1.9rem, 4.4vw, 3.1rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.02em;
      max-width: 18ch;
      margin: 0 auto
    }

    .cta-band p {
      max-width: 54ch;
      margin: 1.2rem auto 0;
      color: rgba(255, 255, 255, .9);
      font-size: 1.08rem
    }

    .cta-band .btn-row {
      justify-content: center
    }

    /* zones */
    .zones-text {
      margin-top: 1.3rem;
      max-width: 60ch;
      color: var(--ink-soft)
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 2rem 0 .4rem
    }

    .chip {
      border: 1.6px solid var(--line);
      background: #fff;
      padding: .55em .95em;
      font-weight: 700;
      font-size: .92rem;
      border-radius: var(--radius);
      transition: border-color .2s, color .2s, transform .2s, box-shadow .2s
    }

    .chip:hover {
      border-color: var(--accent);
      color: var(--accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm)
    }

    /* quote / contact form */
    .quote__grid {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: clamp(2rem, 4vw, 3.5rem);
      align-items: start
    }

    @media(max-width:880px) {
      .quote__grid {
        grid-template-columns: 1fr
      }
    }

    .quote__phone {
      display: inline-block;
      font-size: clamp(1.5rem, 3.4vw, 2rem);
      font-weight: 700;
      color: var(--ink);
      text-decoration: none;
      margin-top: 1.1rem
    }

    .quote__phone:hover {
      color: var(--accent)
    }

    .quote__points {
      list-style: none;
      margin-top: 1.7rem;
      display: grid;
      gap: .75rem
    }

    .quote__points li {
      position: relative;
      padding-left: 1.9em;
      color: var(--ink-soft);
      font-size: .95rem
    }

    .quote__points li svg {
      position: absolute;
      left: 0;
      top: .12em;
      width: 19px;
      height: 19px;
      color: var(--green)
    }

    .form-card {
      background: #fff;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: clamp(1.5rem, 3vw, 2.6rem)
    }

    .field {
      margin-bottom: 1.05rem
    }

    .field label {
      display: block;
      font-weight: 600;
      font-size: .86rem;
      margin-bottom: .4rem
    }

    .field label .req {
      color: var(--accent)
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      font-family: inherit;
      font-size: .95rem;
      padding: .78em .9em;
      border: 1.6px solid var(--line);
      border-radius: var(--radius);
      background: var(--bg-soft);
      color: var(--ink);
      transition: border-color .2s, box-shadow .2s
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
      background: #fff
    }

    .field textarea {
      min-height: 118px;
      resize: vertical
    }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem
    }

    @media(max-width:560px) {
      .field-row {
        grid-template-columns: 1fr
      }
    }

    .consent {
      display: flex;
      gap: .6rem;
      align-items: flex-start;
      font-size: .82rem;
      color: var(--ink-soft);
      margin: .2rem 0
    }

    .consent input {
      width: auto;
      margin-top: .25em;
      accent-color: var(--accent)
    }

    .form-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      margin-top: 1.3rem
    }

    .form-note {
      font-size: .78rem;
      color: var(--ink-mute);
      margin-top: 1rem
    }

    .form-success {
      display: none;
      background: var(--accent-soft);
      border-left: 4px solid var(--accent);
      border-radius: var(--radius);
      padding: 1.7rem 1.5rem;
      outline: none
    }

    .form-success.show {
      display: block
    }

    .form-success h3 {
      color: var(--ink);
      font-size: 1.25rem;
      margin-bottom: .3rem
    }

    .form-success p {
      margin-top: .3rem;
      color: var(--ink-soft);
      font-size: .95rem
    }

    /* faq */
    .faq-list {
      margin-top: 2.4rem;
      border-bottom: 1px solid var(--line)
    }

    details.faq {
      border-top: 1px solid var(--line)
    }

    details.faq summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 1.35rem 0
    }

    details.faq summary::-webkit-details-marker {
      display: none
    }

    details.faq summary h3 {
      font-size: clamp(1.05rem, 1.6vw, 1.22rem);
      font-weight: 600
    }

    .faq-sign {
      flex: none;
      width: 26px;
      height: 26px;
      position: relative
    }

    .faq-sign::before,
    .faq-sign::after {
      content: "";
      position: absolute;
      background: var(--accent);
      inset: 0;
      margin: auto;
      border-radius: 2px
    }

    .faq-sign::before {
      width: 14px;
      height: 2px
    }

    .faq-sign::after {
      width: 2px;
      height: 14px;
      transition: transform .3s ease
    }

    details[open] .faq-sign::after {
      transform: scaleY(0)
    }

    details.faq .faq-body {
      padding: 0 0 1.5rem;
      color: var(--ink-soft);
      max-width: 68ch
    }

    /* footer */
    .footer {
      background: var(--ink);
      color: #fff;
      padding: clamp(3rem, 6vw, 4.5rem) 0 2.2rem
    }

    .footer__grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 2.5rem
    }

    .footer__brand {
      display: flex;
      align-items: center;
      gap: .7rem;
      margin-bottom: 1rem
    }

    .footer__brand .brand__name {
      color: #fff
    }

    .footer p,
    .footer li {
      color: rgba(255, 255, 255, .72);
      font-size: .92rem;
      line-height: 1.7
    }

    .footer h4 {
      font-size: .74rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5);
      margin-bottom: .9rem;
      font-weight: 600
    }

    .footer ul {
      list-style: none
    }

    .footer a {
      color: #fff;
      text-decoration: none
    }

    .footer__bottom {
      border-top: 1px solid rgba(255, 255, 255, .14);
      margin-top: 2.8rem;
      padding-top: 1.5rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: .6rem;
      font-size: .82rem;
      color: rgba(255, 255, 255, .55)
    }

    @media(max-width:780px) {
      .footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem
      }
    }

    /* whatsapp floating button */
    .wa-fab {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 95;
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: var(--whatsapp);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-decoration: none;
      box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
      animation: wa-bob 3s ease-in-out infinite;
      transition: transform .25s
    }

    .wa-fab:hover {
      transform: scale(1.08)
    }

    .wa-fab svg {
      width: 34px;
      height: 34px
    }

    .wa-fab::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: var(--whatsapp);
      z-index: -1;
      animation: wa-pulse 2.2s ease-out infinite
    }

    .wa-fab__label {
      position: absolute;
      right: 74px;
      white-space: nowrap;
      background: var(--ink);
      color: #fff;
      padding: .5em .85em;
      border-radius: var(--radius);
      font-size: .84rem;
      font-weight: 600;
      opacity: 0;
      transform: translateX(8px);
      transition: opacity .25s, transform .25s;
      pointer-events: none;
      box-shadow: var(--shadow-md)
    }

    .wa-fab__label::after {
      content: "";
      position: absolute;
      right: -5px;
      top: 50%;
      transform: translateY(-50%);
      border: 5px solid transparent;
      border-left-color: var(--ink)
    }

    .wa-fab:hover .wa-fab__label {
      opacity: 1;
      transform: none
    }

    @keyframes wa-pulse {
      0% {
        transform: scale(1);
        opacity: .55
      }

      100% {
        transform: scale(1.9);
        opacity: 0
      }
    }

    @keyframes wa-bob {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-6px)
      }
    }

    /* scroll reveal */
    [data-reveal] {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease
    }

    [data-reveal].is-in {
      opacity: 1;
      transform: none
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        transition: none !important
      }

      [data-reveal],
      .il-slab,
      .il-plot,
      .il-level,
      .il-water,
      .il-spacer,
      .il-label {
        opacity: 1 !important;
        transform: none !important
      }

      .cta-band {
        background-attachment: scroll
      }

      html {
        scroll-behavior: auto
      }
    }

    @media(max-width:760px) {
      .cta-band {
        background-attachment: scroll
      }
    }

    :focus-visible {
      outline: 2.5px solid var(--accent);
      outline-offset: 3px
    }

    .band-dark :focus-visible,
    .cta-band :focus-visible,
    .contact :focus-visible {
      outline-color: #fff
    }

    /* ---- service pages (cards with h3 titles, prose spacing) ---- */
    .tile-card h3 {
      font-size: clamp(1.18rem, 1.9vw, 1.45rem);
      margin-top: .2rem
    }
    .tile-card h3 + p,
    .tile-card .lead-label {
      margin-top: .85rem
    }
    .prose { max-width: 70ch }
    .prose h3 { margin-top: 1.9rem }

    /* ============================================================
       ACTIVE NAV (current page + scroll-spy section)
       ============================================================ */
    .nav a { position: relative }
    .nav a.is-active,
    .nav a[aria-current="page"] { color: var(--accent) }
    .nav a.is-active::after,
    .nav a[aria-current="page"]::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
      height: 2px; background: var(--accent); border-radius: 2px
    }
    section[id], .svc-block, .svc-cta, .svc-faq { scroll-margin-top: 90px }

    /* ============================================================
       SERVICE PAGE — distinct layout (scoped to .service)
       ============================================================ */
    .service { --svc-gap: clamp(2.6rem, 5vw, 4.5rem) }

    /* breadcrumb */
    .svc-crumb { font-size: .82rem; color: var(--ink-mute); margin-bottom: 1.1rem }
    .svc-crumb a { color: rgba(255,255,255,.8); text-decoration: none }
    .svc-crumb a:hover { color: #fff }
    .svc-crumb b { color: #fff; font-weight: 600 }

    /* full-bleed image hero with navy overlay */
    .svc-hero { position: relative; color: #fff; overflow: hidden }
    .svc-hero__bg {
      position: absolute; inset: 0; z-index: 0;
      background: linear-gradient(115deg, rgba(10,44,73,.94) 30%, rgba(10,44,73,.55)), var(--svc-hero-img) center/cover no-repeat;
    }
    .svc-hero .wrap { position: relative; z-index: 1; padding: clamp(2.4rem,6vw,4.5rem) 0 clamp(3rem,7vw,5.5rem) }
    .svc-hero__kicker {
      display: inline-flex; align-items: center; gap: .7em; font-size: .74rem; font-weight: 600;
      letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.1rem; color: #fff
    }
    .svc-hero__kicker::before { content: ""; width: 26px; height: 2px; background: var(--accent) }
    .svc-hero h1 { font-size: clamp(2.2rem,5.4vw,3.9rem); font-weight: 700; line-height: 1.05; letter-spacing: -.025em; max-width: 18ch }
    .svc-hero__lead { margin-top: 1.2rem; max-width: 56ch; color: rgba(255,255,255,.9); font-size: clamp(1.02rem,1.4vw,1.2rem) }
    .svc-hero .btn-row { margin-top: 1.8rem }

    /* two-column body with sticky sidebar */
    .svc-body { padding: var(--svc-gap) 0 }
    .svc-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: clamp(2rem,4vw,3.5rem); align-items: start }
    @media (max-width: 980px) { .svc-grid { grid-template-columns: 1fr } }

    .svc-block + .svc-block { margin-top: var(--svc-gap) }
    .svc-kicker {
      display: inline-flex; align-items: center; gap: .7em; font-size: .74rem; font-weight: 600;
      letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem
    }
    .svc-kicker::before { content: ""; width: 22px; height: 2px; background: var(--accent) }
    .svc-block h2 { font-size: clamp(1.5rem,3vw,2.15rem); line-height: 1.15; margin-bottom: .5rem }
    .svc-block p { max-width: 66ch }

    /* zigzag feature rows */
    .svc-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem,3vw,2.6rem); align-items: center; margin-top: var(--svc-gap) }
    .svc-feature__media img { width: 100%; height: clamp(230px,30vw,330px); object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md) }
    .svc-feature--rev .svc-feature__media { order: -1 }
    .svc-feature h3 { font-size: clamp(1.25rem,2vw,1.55rem); margin-bottom: .4rem }
    @media (max-width: 760px) {
      .svc-feature { grid-template-columns: 1fr }
      .svc-feature--rev .svc-feature__media { order: 0 }
    }

    /* numbered reasons */
    .svc-reasons { display: grid; gap: 1rem; counter-reset: r; margin-top: 1.6rem }
    .svc-reason {
      position: relative; background: #fff; border: 1.6px solid var(--line); border-left: 4px solid var(--accent);
      border-radius: var(--radius); padding: 1.25rem 1.4rem 1.25rem 3.6rem
    }
    .svc-reason::before {
      counter-increment: r; content: counter(r, decimal-leading-zero);
      position: absolute; left: 1.15rem; top: 1.2rem; color: var(--accent); font-weight: 700; font-size: 1rem
    }
    .svc-reason h3 { font-size: 1.12rem; margin-bottom: .25rem }

    /* zones panel */
    .svc-zones { border: 1.6px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-soft); padding: clamp(1.3rem,2.5vw,1.9rem); margin: 1.3rem 0 }
    .svc-zones ul { list-style: none; columns: 2; column-gap: 1.5rem }
    @media (min-width: 620px) { .svc-zones ul { columns: 3 } }
    .svc-zones li { break-inside: avoid; padding: .35rem 0 .35rem 1.2em; position: relative; font-weight: 600 }
    .svc-zones li::before { content: "\203A"; position: absolute; left: 0; color: var(--accent); font-weight: 700 }

    /* sticky sidebar */
    .svc-aside { position: sticky; top: 90px; display: grid; gap: 1.2rem }
    @media (max-width: 980px) { .svc-aside { position: static } }
    .svc-card { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow-md) }
    .svc-card h3 { color: #fff; font-size: 1.15rem }
    .svc-card p { color: rgba(255,255,255,.8); font-size: .9rem; margin-top: .3rem }
    .svc-card__phone { display: block; font-size: 1.32rem; font-weight: 700; color: #fff; text-decoration: none; margin: .9rem 0 .2rem }
    .svc-card .btn { width: 100%; justify-content: center; margin-top: .8rem }
    .svc-toc { border: 1.6px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 1.3rem 1.4rem }
    .svc-toc h4 { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .7rem; font-weight: 600 }
    .svc-toc a { display: block; padding: .42rem 0 .42rem .85rem; color: var(--ink-soft); text-decoration: none; font-size: .92rem; border-left: 2px solid var(--line); transition: .2s }
    .svc-toc a:hover { color: var(--accent) }
    .svc-toc a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 600 }

    /* solid CTA with accent shape */
    .svc-cta { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: clamp(2rem,4vw,3.2rem); margin-top: var(--svc-gap) }
    .svc-cta::after { content: ""; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px; background: var(--accent); opacity: .16; border-radius: 28px; transform: rotate(22deg) }
    .svc-cta .svc-kicker { color: var(--gold) }
    .svc-cta h2 { color: #fff; font-size: clamp(1.6rem,3.4vw,2.4rem); position: relative; z-index: 1 }
    .svc-cta p { color: rgba(255,255,255,.88); max-width: 60ch; margin-top: .7rem; position: relative; z-index: 1 }

    /* FAQ — bordered card accordion (distinct from homepage) */
    .svc-faq h2 { font-size: clamp(1.5rem,3vw,2.15rem); margin-bottom: 1.2rem }
    .svc-faq details { background: #fff; border: 1.6px solid var(--line); border-radius: var(--radius); margin-bottom: .8rem; overflow: hidden }
    .svc-faq details[open] { border-color: var(--accent) }
    .svc-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem }
    .svc-faq summary::-webkit-details-marker { display: none }
    .svc-faq summary h3 { font-size: 1.04rem; font-weight: 600 }
    .svc-faq .faq-body { padding: 0 1.35rem 1.2rem; color: var(--ink-soft) }