:root {
      --ink: #10211F;
      --petrol: #0F4C45;
      --petrol-deep: #0A332E;
      --petrol-soft: #1C6359;
      --brass: #B68A4C;
      --brass-bright: #CFA463;
      --mist: #F5F7F4;
      --sage: #E3ECE6;
      --sage-line: #CDDBD4;
      --cloud: #FFFFFF;
      --whatsapp: #25D366;
      --shadow: 0 18px 50px -28px rgba(10, 51, 46, .45);
      --shadow-sm: 0 8px 24px -16px rgba(10, 51, 46, .4);
      --r: 18px;
      --maxw: 1180px;
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Hanken Grotesk', system-ui, sans-serif;
      background: var(--mist);
      color: var(--ink);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      padding-bottom: 88px;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: 'Fraunces', Georgia, serif;
      font-weight: 500;
      line-height: 1.08;
      letter-spacing: -.01em;
      color: var(--petrol-deep)
    }

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

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

    .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 24px
    }

    .logo-full {
      background-image: url("assets/img/logo-full.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: left center;
      display: inline-block
    }

    .logo-emblem {
      background-image: url("assets/img/logo-emblem.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      display: inline-block
    }

    .brand-logo {
      height: 44px;
      width: 174px
    }

    .foot-logo {
      height: 62px;
      width: 230px;
      background-color: #fff;
      border-radius: 14px;
      padding: 9px 14px;
      background-origin: content-box;
      box-sizing: border-box
    }

    .pf-emblem {
      width: 58%;
      aspect-ratio: 1
    }

    .photo-doctor {
      background-image: url("assets/img/hero-doctor.jpg");
      background-size: cover;
      background-position: center 18%
    }

    .photo-building {
      background-image: url("assets/img/hero-building.jpg");
      background-size: cover;
      background-position: center 58%
    }

    .eyebrow {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .72rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--brass);
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: .6em;
    }

    .eyebrow::before {
      content: "";
      width: 26px;
      height: 1px;
      background: var(--brass);
      opacity: .7
    }

    .eyebrow.center {
      justify-content: center
    }

    .eyebrow.center::after {
      content: "";
      width: 26px;
      height: 1px;
      background: var(--brass);
      opacity: .7
    }

    /* ---------- Buttons ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: .6em;
      font-weight: 600;
      font-size: .95rem;
      padding: .85em 1.5em;
      border-radius: 999px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
      will-change: transform;
    }

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

    .btn-primary:hover {
      transform: translateY(-3px);
      background: var(--petrol-deep);
      box-shadow: 0 16px 34px -18px rgba(15, 76, 69, .7)
    }

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

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

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

    .btn-wa:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 34px -18px rgba(37, 211, 102, .8)
    }


    /* ---------- Top contact bar ---------- */
    .topbar {
      background: var(--petrol-deep);
      color: #dcebd9;
      font-family: 'IBM Plex Mono', monospace;
      font-size: .74rem;
      letter-spacing: .04em;
    }

    .topbar .wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 38px;
      gap: 16px;
      flex-wrap: wrap
    }

    .topbar a {
      color: #EBD9B8;
      display: inline-flex;
      gap: .5em;
      align-items: center
    }

    .topbar .pulse-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--brass-bright);
      box-shadow: 0 0 0 0 rgba(207, 164, 99, .7);
      animation: dot 2.4s infinite
    }

    @keyframes dot {
      0% {
        box-shadow: 0 0 0 0 rgba(207, 164, 99, .6)
      }

      70% {
        box-shadow: 0 0 0 9px rgba(207, 164, 99, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(207, 164, 99, 0)
      }
    }

    /* ---------- Nav ---------- */
    header.nav {
      position: sticky;
      top: 0;
      z-index: 130;
      background: var(--mist);
      border-bottom: 1px solid transparent;
      transition: border-color .3s, box-shadow .3s, background .3s
    }

    .nav-scrim {
      position: fixed;
      inset: 0;
      background: rgba(10, 33, 31, .5);
      backdrop-filter: blur(2px);
      opacity: 0;
      visibility: hidden;
      transition: opacity .35s ease, visibility .35s ease;
      z-index: 110
    }

    .nav-scrim.show {
      opacity: 1;
      visibility: visible
    }

    header.nav.scrolled {
      border-color: var(--sage-line);
      box-shadow: 0 6px 24px -20px rgba(10, 51, 46, .5)
    }

    .nav .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 72px
    }

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

    .brand .mark {
      width: 42px;
      height: 42px;
      flex: none
    }

    .brand b {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 1.18rem;
      color: var(--petrol-deep);
      letter-spacing: -.02em;
      line-height: 1
    }

    .brand span {
      display: block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: .6rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--brass);
      margin-top: 3px
    }

    nav.links {
      display: flex;
      align-items: center;
      gap: 30px
    }

    nav.links a.link {
      font-weight: 500;
      font-size: .95rem;
      color: var(--ink);
      position: relative;
      padding: 4px 0
    }

    nav.links a.link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      height: 2px;
      width: 0;
      background: var(--brass);
      transition: width .3s ease
    }

    nav.links a.link:hover::after {
      width: 100%
    }

    nav.links a.link:hover {
      color: var(--petrol)
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 140
    }

    .burger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      align-items: center;
      justify-content: center
    }

    .burger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--petrol-deep);
      position: relative;
      transition: .3s
    }

    .burger span::before,
    .burger span::after {
      content: "";
      position: absolute;
      left: 0;
      width: 22px;
      height: 2px;
      background: var(--petrol-deep);
      transition: .3s
    }

    .burger span::before {
      top: -7px
    }

    .burger span::after {
      top: 7px
    }

    .burger.open span {
      background: transparent
    }

    .burger.open span::before {
      top: 0;
      transform: rotate(45deg)
    }

    .burger.open span::after {
      top: 0;
      transform: rotate(-45deg)
    }

    /* ---------- Hero ---------- */
    .hero {
      position: relative;
      overflow: hidden;
      padding: 34px 0 80px
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(900px 520px at 88% -10%, rgba(182, 138, 76, .13), transparent 60%),
        radial-gradient(700px 600px at -8% 110%, rgba(15, 76, 69, .10), transparent 55%);
      z-index: 0
    }

    .hero .wrap {
      position: relative;
      z-index: 1
    }

    .hero-copy {
      max-width: 560px
    }

    .hero h1 {
      color: #fff;
      font-size: clamp(1.95rem, 5.2vw, 2.6rem);
      line-height: 1.05;
      margin: 20px 0 0
    }

    .hero h1 em {
      font-style: italic;
      color: var(--brass);
      font-weight: 400
    }

    .hero .role {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .85rem;
      letter-spacing: .08em;
      color: var(--petrol-soft);
      margin-top: 18px
    }

    .doc-hero {
      position: relative;
      z-index: 1;
      max-width: 560px;
      margin: 0 auto;
      background: linear-gradient(165deg, #11453c, #0A332E);
      border-radius: 26px;
      padding: 24px 22px 28px;
      box-shadow: var(--shadow);
      overflow: hidden
    }

    .doc-hero .eyebrow {
      color: var(--brass-bright);
      margin-bottom: 16px
    }

    .doc-hero .eyebrow::before {
      background: var(--brass-bright)
    }

    .doc-hero-photo {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      aspect-ratio: 4/5;
      background: #0A332E;
      box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .6)
    }

    .doc-hero-deg {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .85rem;
      letter-spacing: .03em;
      color: var(--brass-bright);
      margin-top: 8px
    }

    .doc-hero-creds {
      list-style: none;
      margin-top: 20px;
      display: grid;
      gap: 13px
    }

    .doc-hero-creds li {
      position: relative;
      padding-left: 28px;
      color: #cfe7e0;
      font-size: .98rem;
      line-height: 1.45
    }

    .doc-hero-creds li::before {
      content: "\2713";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--brass-bright);
      font-weight: 700
    }

    .doc-hero-actions {
      display: flex;
      gap: 12px;
      margin-top: 24px;
      flex-wrap: wrap
    }

    .doc-hero-actions .btn {
      flex: 1 1 auto;
      justify-content: center;
      min-width: 150px
    }

    .doc-hero-actions .btn-ghost.light {
      color: #fff;
      border-color: rgba(255, 255, 255, .4)
    }

    .doc-hero-actions .btn-ghost.light:hover {
      background: rgba(255, 255, 255, .12);
      border-color: #fff;
      transform: translateY(-3px)
    }

    .hero p.lede {
      font-size: 1.12rem;
      color: #33514c;
      margin-top: 20px
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      margin-top: 30px;
      flex-wrap: wrap
    }

    .hero-trust {
      display: flex;
      gap: 26px;
      margin-top: 34px;
      flex-wrap: wrap
    }

    .hero-trust .t b {
      font-family: 'Fraunces', serif;
      font-size: 1.7rem;
      color: var(--petrol-deep);
      font-weight: 600;
      display: block;
      line-height: 1
    }

    .hero-trust .t span {
      font-size: .78rem;
      color: #5a726d;
      letter-spacing: .02em
    }

    .hero-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      border: 1px solid var(--sage-line);
      border-radius: 999px;
      padding: .55em 1.05em;
      font-size: .85rem;
      font-weight: 600;
      color: var(--petrol-deep);
      box-shadow: var(--shadow-sm)
    }

    .chip svg {
      color: var(--brass);
      flex: none
    }

    .float-badge {
      display: none !important
    }

    /* Credential crest (signature) */
    .crest-stage {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center
    }

    .crest-stage::before {
      content: "";
      position: absolute;
      width: 78%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 35%, #fff, var(--sage) 70%);
      box-shadow: var(--shadow);
      z-index: 0
    }

    .crest {
      position: relative;
      z-index: 1;
      width: min(420px, 82%);
      filter: drop-shadow(0 20px 30px rgba(10, 51, 46, .25))
    }

    .rot {
      transform-origin: 250px 250px;
      animation: spin 60s linear infinite
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .float-badge {
      position: absolute;
      z-index: 2;
      background: #fff;
      border: 1px solid var(--sage-line);
      border-radius: 14px;
      padding: 11px 15px;
      box-shadow: var(--shadow-sm);
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--petrol-deep)
    }

    .float-badge i {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      background: var(--sage);
      display: grid;
      place-items: center;
      color: var(--petrol)
    }

    .float-badge.b1 {
      top: 6%;
      left: -2%;
      animation: floaty 5s ease-in-out infinite
    }

    .float-badge.b2 {
      bottom: 8%;
      right: -3%;
      animation: floaty 5s ease-in-out infinite .8s
    }

    .float-badge small {
      display: block;
      font-weight: 400;
      font-size: .68rem;
      color: #7e918c
    }

    @keyframes floaty {

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

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

    /* ---------- Section scaffolding ---------- */
    section.block {
      padding: 88px 0;
      position: relative
    }

    .sec-head {
      max-width: 660px
    }

    .sec-head.center {
      margin: 0 auto;
      text-align: center
    }

    .sec-head h2 {
      font-size: clamp(2rem, 3.8vw, 2.9rem);
      margin-top: 14px
    }

    .sec-head p {
      color: #4a635e;
      margin-top: 14px;
      font-size: 1.05rem
    }

    /* ---------- Credential ledger / about ---------- */
    .about {
      background: linear-gradient(180deg, #fff, #FAFBF9);
      position: relative;
      overflow: hidden
    }

    .about-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 54px;
      align-items: start;
      margin-top: 46px
    }

    .doc-card {
      background: var(--petrol-deep);
      color: #eafff8;
      border-radius: 24px;
      padding: 34px 30px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow)
    }

    .doc-card::after {
      content: "";
      position: absolute;
      right: -40px;
      top: -40px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(182, 138, 76, .35), transparent 70%)
    }

    .doc-portrait {
      width: 96px;
      height: 96px;
      border-radius: 20px;
      background: linear-gradient(160deg, var(--brass), #8c6634);
      display: grid;
      place-items: center;
      margin-bottom: 18px;
      box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5)
    }

    .doc-card h3 {
      color: #fff;
      font-size: 1.55rem
    }

    .doc-card .deg {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .78rem;
      color: var(--brass-bright);
      letter-spacing: .06em;
      margin-top: 4px
    }

    .doc-card ul {
      list-style: none;
      margin-top: 22px;
      display: grid;
      gap: 13px
    }

    .doc-card li {
      display: flex;
      gap: 12px;
      font-size: .92rem;
      color: #cfe7e0;
      line-height: 1.45
    }

    .doc-card li svg {
      flex: none;
      margin-top: 3px;
      color: var(--brass-bright)
    }

    .timeline {
      position: relative;
      padding-left: 8px
    }

    .timeline h3 {
      font-size: 1.5rem;
      margin-bottom: 8px
    }

    .timeline .intro {
      color: #4a635e;
      margin-bottom: 26px
    }

    .tl {
      position: relative;
      border-left: 2px solid var(--sage-line);
      padding: 0 0 4px 28px;
      display: grid;
      gap: 26px
    }

    .tl .item {
      position: relative
    }

    .tl .item::before {
      content: "";
      position: absolute;
      left: -37px;
      top: 3px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid var(--brass)
    }

    .tl .yr {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .74rem;
      letter-spacing: .08em;
      color: var(--brass);
      font-weight: 500
    }

    .tl h4 {
      font-size: 1.08rem;
      margin: 3px 0 4px;
      color: var(--petrol-deep)
    }

    .tl p {
      font-size: .94rem;
      color: #52685f
    }

    /* ---------- Specializations grid ---------- */
    .specs {
      background: var(--petrol-deep);
      color: #e9f6f1
    }

    .specs .eyebrow {
      color: var(--brass-bright)
    }

    .specs .eyebrow::before,
    .specs .eyebrow::after {
      background: var(--brass-bright)
    }

    .specs h2 {
      color: #fff
    }

    .specs .sec-head p {
      color: #a9cbc2
    }

    .spec-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 48px
    }

    .spec {
      background: rgba(255, 255, 255, .045);
      border: 1px solid rgba(182, 138, 76, .22);
      border-radius: 18px;
      padding: 26px 24px;
      transition: transform .35s ease, background .35s ease, border-color .35s
    }

    .spec:hover {
      transform: translateY(-7px);
      background: rgba(255, 255, 255, .085);
      border-color: var(--brass)
    }

    .spec .ic {
      width: 50px;
      height: 50px;
      border-radius: 13px;
      background: linear-gradient(150deg, rgba(182, 138, 76, .25), rgba(182, 138, 76, .05));
      display: grid;
      place-items: center;
      color: var(--brass-bright);
      margin-bottom: 16px
    }

    .spec h4 {
      color: #fff;
      font-size: 1.2rem
    }

    .spec p {
      font-size: .92rem;
      color: #b6d3cb;
      margin-top: 8px
    }

    .spec .tag {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .68rem;
      letter-spacing: .08em;
      color: var(--brass-bright);
      margin-top: 14px;
      display: inline-block
    }

    /* ---------- Approach (lap vs open + care) ---------- */
    .why-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 46px
    }

    .why-card {
      background: #fff;
      border: 1px solid var(--sage-line);
      border-radius: 20px;
      padding: 32px 30px;
      box-shadow: var(--shadow-sm)
    }

    .why-card .lab {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .72rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--brass)
    }

    .why-card h3 {
      font-size: 1.4rem;
      margin: 10px 0 12px
    }

    .why-card p {
      color: #4a635e;
      font-size: .97rem
    }

    .why-card ul {
      list-style: none;
      margin-top: 18px;
      display: grid;
      gap: 10px
    }

    .why-card li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: .95rem;
      color: #33514c
    }

    .why-card li svg {
      flex: none;
      margin-top: 4px;
      color: var(--petrol)
    }

    .care-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 24px
    }

    .care {
      background: var(--sage);
      border-radius: 18px;
      padding: 26px 24px;
      position: relative
    }

    .care .n {
      font-family: 'Fraunces', serif;
      font-size: 2.2rem;
      color: var(--brass);
      font-weight: 600;
      line-height: 1
    }

    .care h4 {
      margin: 8px 0 6px;
      font-size: 1.12rem
    }

    .care p {
      font-size: .9rem;
      color: #4a635e
    }

    /* ---------- Appointment / fees ---------- */
    .appt {
      background: linear-gradient(150deg, var(--petrol), var(--petrol-deep));
      color: #fff;
      border-radius: 28px;
      overflow: hidden;
      position: relative;
      box-shadow: var(--shadow)
    }

    .appt::before {
      content: "";
      position: absolute;
      right: -60px;
      bottom: -60px;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(182, 138, 76, .3), transparent 70%)
    }

    .appt-inner {
      position: relative;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 46px;
      padding: 54px 50px;
      align-items: center
    }

    .appt h2 {
      color: #fff;
      font-size: clamp(1.9rem, 3.4vw, 2.6rem)
    }

    .appt p {
      color: #bfe0d8;
      margin-top: 14px;
      max-width: 440px
    }

    .appt-actions {
      display: flex;
      gap: 14px;
      margin-top: 28px;
      flex-wrap: wrap
    }

    .appt-actions .btn-ghost {
      color: #fff;
      border-color: rgba(255, 255, 255, .4)
    }

    .appt-actions .btn-ghost:hover {
      background: rgba(255, 255, 255, .1);
      border-color: #fff
    }

    .fees {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 20px;
      padding: 28px
    }

    .fees .frow {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px dashed rgba(255, 255, 255, .2)
    }

    .fees .frow:last-child {
      border-bottom: none
    }

    .fees .frow span {
      color: #cfe7e0;
      font-size: .93rem
    }

    .fees .frow b {
      font-family: 'Fraunces', serif;
      font-size: 1.25rem;
      color: var(--brass-bright)
    }

    .fees .hours {
      margin-top: 16px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: .78rem;
      letter-spacing: .04em;
      color: #e7f4ef;
      display: flex;
      gap: 10px;
      align-items: center
    }

    /* ---------- Contact ---------- */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 40px;
      margin-top: 46px;
      align-items: stretch
    }

    .contact-list {
      display: grid;
      gap: 16px;
      align-content: start
    }

    .cinfo {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      background: #fff;
      border: 1px solid var(--sage-line);
      border-radius: 16px;
      padding: 20px 22px;
      transition: transform .3s, box-shadow .3s
    }

    .cinfo:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-sm)
    }

    .cinfo .ic {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: var(--sage);
      display: grid;
      place-items: center;
      color: var(--petrol);
      flex: none
    }

    .cinfo .lab {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .68rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--brass)
    }

    .cinfo .val {
      font-weight: 600;
      color: var(--petrol-deep);
      font-size: 1.02rem;
      margin-top: 2px
    }

    .cinfo .sub {
      font-size: .85rem;
      color: #6a807a
    }

    .map-card {
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--sage-line);
      box-shadow: var(--shadow-sm);
      min-height: 340px
    }

    .map-card iframe {
      width: 100%;
      height: 100%;
      min-height: 340px;
      border: 0;
      display: block;
      filter: saturate(.9)
    }

    .location-card {
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--sage-line);
      box-shadow: var(--shadow-sm);
      background: #fff;
      display: flex;
      flex-direction: column
    }

    .locphoto {
      position: relative;
      width: 100%;
      aspect-ratio: 16/10;
      background: #0A332E
    }

    .loc-info {
      padding: 24px 26px;
      display: flex;
      flex-direction: column;
      align-items: flex-start
    }

    .loc-info .lab {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .68rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--brass)
    }

    .loc-title {
      font-size: 1.45rem;
      margin: 6px 0 8px;
      color: var(--petrol-deep)
    }

    .loc-addr {
      color: #4a635e;
      font-size: .97rem;
      margin-bottom: 18px;
      line-height: 1.55
    }

    .loc-btn {
      width: 100%;
      justify-content: center
    }

    /* ---------- Footer ---------- */
    footer {
      background: var(--petrol-deep);
      color: #bcd6cf;
      padding: 62px 0 30px;
      margin-top: 10px
    }

    .foot-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 40px
    }

    footer .brand b {
      color: #fff
    }

    footer p.fdesc {
      color: #9fc0b8;
      font-size: .94rem;
      margin-top: 16px;
      max-width: 340px
    }

    footer h5 {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--brass-bright);
      margin-bottom: 16px;
      font-weight: 500
    }

    footer ul {
      list-style: none;
      display: grid;
      gap: 10px
    }

    footer ul a {
      color: #bcd6cf;
      font-size: .94rem;
      transition: color .25s, padding-left .25s
    }

    footer ul a:hover {
      color: #fff;
      padding-left: 5px
    }

    .foot-social-label {
      font-family: 'Fraunces', serif;
      font-size: 1.55rem;
      font-weight: 600;
      letter-spacing: -.01em;
      color: #fff;
      margin: 30px 0 3px
    }

    .foot-social-hint {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .62rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #7fa39a;
      margin-bottom: 16px;
      cursor: pointer;
      user-select: none
    }

    .foot-social-hint:hover {
      color: var(--brass-bright)
    }

    .socials {
      display: flex;
      gap: 12px
    }

    .social-ic {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      transition: transform .25s ease;
      filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35))
    }

    .social-ic:hover {
      transform: translateY(-4px) scale(1.05)
    }

    .social-ic svg {
      width: 54px;
      height: 54px;
      display: block
    }

    .socials {
      gap: 16px
    }

    .follow-block,
    .follow-block a {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none
    }

    .foot-bottom {
      border-top: 1px solid rgba(255, 255, 255, .1);
      margin-top: 40px;
      padding-top: 22px;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      font-size: .82rem;
      color: #86a59d
    }

    /* ---------- Floating buttons (pulse keyframe) ---------- */
    @keyframes waPulse {
      0% {
        box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .6), 0 0 0 0 rgba(37, 211, 102, .5)
      }

      70% {
        box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .6), 0 0 0 16px rgba(37, 211, 102, 0)
      }

      100% {
        box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .6), 0 0 0 0 rgba(37, 211, 102, 0)
      }
    }

    /* ---------- Reveal animation ---------- */
    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1)
    }

    .reveal.in {
      opacity: 1;
      transform: none
    }

    .reveal.d1 {
      transition-delay: .08s
    }

    .reveal.d2 {
      transition-delay: .16s
    }

    .reveal.d3 {
      transition-delay: .24s
    }

    .reveal.d4 {
      transition-delay: .32s
    }

    /* ---------- Doctor portrait (hero) ---------- */
    .portrait-stage {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center
    }

    .portrait-frame {
      position: relative;
      width: min(430px, 88%);
      aspect-ratio: 4/5;
      border-radius: 28px;
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 1px solid var(--sage-line);
      background: var(--sage)
    }

    .portrait-frame::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 1px solid rgba(255, 255, 255, .45);
      border-radius: 28px;
      pointer-events: none;
      z-index: 4
    }

    .portrait-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      z-index: 2
    }

    .portrait-img.missing {
      display: none
    }

    .portrait-fallback {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      z-index: 1;
      background: radial-gradient(130% 100% at 50% 0%, #ffffff, #e7efe9);
      padding: 26px
    }

    .portrait-fallback .pf-note {
      position: absolute;
      bottom: 16px;
      left: 0;
      right: 0;
      text-align: center;
      font-family: 'IBM Plex Mono', monospace;
      font-size: .6rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #6a807a
    }

    .ribbon {
      position: absolute;
      z-index: 3;
      top: 20px;
      left: 0;
      background: linear-gradient(90deg, var(--brass), #8a6231);
      color: #1d1305;
      font-family: 'IBM Plex Mono', monospace;
      font-size: .68rem;
      letter-spacing: .06em;
      font-weight: 600;
      padding: 8px 16px 8px 14px;
      border-radius: 0 999px 999px 0;
      box-shadow: var(--shadow-sm)
    }

    .photo-logo {
      position: absolute;
      z-index: 3;
      right: 16px;
      bottom: 16px;
      width: 62px;
      height: 62px;
      background: #fff;
      border-radius: 50%;
      display: grid;
      place-items: center;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--sage-line)
    }

    .photo-name {
      position: absolute;
      z-index: 3;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 46px 22px 18px;
      z-index: 3;
      background: linear-gradient(0deg, rgba(10, 51, 46, .92), transparent);
      color: #fff
    }

    .photo-name b {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 1.18rem;
      display: block;
      line-height: 1.1
    }

    .photo-name span {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .68rem;
      letter-spacing: .06em;
      color: var(--brass-bright)
    }

    /* ---------- Signature ---------- */
    .signature {
      font-family: 'Allura', cursive;
      font-size: 2.7rem;
      line-height: .7;
      color: var(--petrol)
    }

    .sig-line {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .66rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #7e918c;
      margin-top: 10px
    }

    /* ---------- Doctor card photo ---------- */
    .doc-photo {
      position: relative;
      width: 100%;
      aspect-ratio: 4/5;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 20px;
      background: #0A332E
    }

    .doc-photo .portrait-fallback {
      padding: 18px
    }

    .doc-card .signature {
      color: var(--brass-bright);
      margin-top: 18px
    }

    .doc-card .sig-line {
      color: #9fc0b8
    }

    /* ---------- Logo watermark ---------- */
    .wm {
      position: absolute;
      pointer-events: none;
      z-index: 0;
      opacity: .06
    }

    .wm.tr {
      top: -60px;
      right: -60px;
      width: 340px;
      height: 340px
    }

    .about .wrap,
    .specs .wrap {
      position: relative;
      z-index: 1
    }

    /* ---------- Gallery ---------- */
    .gallery {
      background: linear-gradient(180deg, #FAFBF9, #fff)
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 46px
    }

    .gtile {
      position: relative;
      aspect-ratio: 4/3;
      border-radius: 16px;
      overflow: hidden;
      background: #0A332E;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--sage-line)
    }

    .gtile.wide {
      grid-column: span 2;
      grid-row: span 2
    }

    .gtile .portrait-img {
      transition: transform .7s cubic-bezier(.22, 1, .36, 1)
    }

    .gtile:hover .portrait-img {
      transform: scale(1.07)
    }

    .gfall {
      position: absolute;
      inset: 0;
      z-index: 1;
      background-color: #eef3ef;
      background-size: 88px;
      background-position: center;
      background-repeat: no-repeat
    }

    .gtile .cap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      padding: 30px 15px 13px;
      color: #fff;
      font-weight: 600;
      font-size: .92rem;
      background: linear-gradient(0deg, rgba(10, 51, 46, .92), transparent)
    }

    .gtile .cap small {
      display: block;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 400;
      font-size: .6rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--brass-bright);
      margin-bottom: 3px
    }

    /* ---------- Location banner + directions ---------- */
    .loc-banner {
      position: relative;
      border-radius: 22px;
      overflow: hidden;
      margin-top: 46px;
      aspect-ratio: 21/8;
      background: #0A332E;
      box-shadow: var(--shadow);
      border: 1px solid var(--sage-line)
    }

    .loc-banner .portrait-img {
      object-position: center 40%
    }

    .loc-banner .overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      padding: 26px 28px;
      background: linear-gradient(90deg, rgba(10, 51, 46, .85), rgba(10, 51, 46, .15))
    }

    .loc-banner .overlay h3 {
      color: #fff;
      font-size: 1.5rem
    }

    .loc-banner .overlay p {
      color: #cfe7e0;
      font-size: .9rem;
      margin-top: 4px;
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: .03em
    }

    .map-card {
      position: relative
    }

    .map-open {
      position: absolute;
      z-index: 5;
      right: 14px;
      bottom: 14px;
      background: #fff;
      color: var(--petrol-deep);
      border: 1px solid var(--sage-line);
      border-radius: 999px;
      padding: .6em 1.1em;
      font-weight: 600;
      font-size: .86rem;
      display: inline-flex;
      gap: .5em;
      align-items: center;
      box-shadow: var(--shadow-sm);
      transition: transform .25s
    }

    .map-open:hover {
      transform: translateY(-3px)
    }

    a.cinfo {
      cursor: pointer
    }

    /* ---------- Floating action stack ---------- */
    .float-stack {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 90;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: flex-end
    }

    .fab {
      display: flex;
      align-items: center;
      gap: 0;
      border-radius: 999px;
      padding: 14px;
      overflow: hidden;
      color: #fff;
      transition: gap .35s ease, padding .35s ease;
      box-shadow: var(--shadow)
    }

    .fab svg {
      flex: none;
      width: 28px;
      height: 28px;
      position: relative;
      z-index: 1
    }

    .fab .fab-txt {
      position: relative;
      z-index: 1;
      max-width: 0;
      opacity: 0;
      white-space: nowrap;
      font-weight: 600;
      font-size: .95rem;
      transition: max-width .35s ease, opacity .3s ease, margin .35s ease
    }

    .fab:hover {
      gap: 10px;
      padding: 14px 20px 14px 16px
    }

    .fab:hover .fab-txt {
      max-width: 180px;
      opacity: 1;
      margin-right: 2px
    }

    .fab-nav {
      background: #1A73E8;
      box-shadow: 0 12px 26px -10px rgba(26, 115, 232, .7);
      animation: navPulse 2.6s infinite
    }

    .fab-nav:hover {
      background: #1664D6
    }

    .fab-wa {
      background: var(--whatsapp);
      box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .6);
      animation: waPulse 2.6s infinite
    }

    @keyframes navPulse {
      0% {
        box-shadow: 0 12px 26px -10px rgba(26, 115, 232, .7), 0 0 0 0 rgba(26, 115, 232, .5)
      }

      70% {
        box-shadow: 0 12px 26px -10px rgba(26, 115, 232, .7), 0 0 0 16px rgba(26, 115, 232, 0)
      }

      100% {
        box-shadow: 0 12px 26px -10px rgba(26, 115, 232, .7), 0 0 0 0 rgba(26, 115, 232, 0)
      }
    }

    /* ---------- Sticky bottom action bar ---------- */
    .action-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 95;
      display: flex;
      justify-content: center;
      gap: 8px;
      align-items: stretch;
      padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
      background: rgba(255, 255, 255, .94);
      backdrop-filter: blur(10px);
      border-top: 1px solid var(--sage-line);
      box-shadow: 0 -10px 30px -20px rgba(10, 51, 46, .55)
    }

    /* All three buttons share the row and shrink together; the label font scales with
     viewport so text is never hidden or clipped down to ~320px screens. */
    .ab-btn {
      flex: 1 1 0;
      min-width: 0;
      max-width: 230px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 54px;
      border-radius: 999px;
      font-weight: 700;
      font-size: clamp(.72rem, 2.7vw, .96rem);
      padding: 0 14px;
      white-space: nowrap;
      transition: transform .18s ease, filter .18s ease
    }

    .ab-btn:active {
      transform: scale(.96)
    }

    .ab-btn svg {
      flex: none
    }

    .ab-lbl {
      overflow: hidden;
      text-overflow: ellipsis
    }

    .ab-wa {
      max-width: 300px;
      background: var(--whatsapp);
      color: #063322
    }

    .ab-call {
      background: var(--petrol);
      color: #fff
    }

    .ab-nav {
      background: #1A73E8;
      color: #fff
    }

    .ab-wa:hover,
    .ab-nav:hover,
    .ab-call:hover {
      filter: brightness(1.04)
    }

    @media(max-width:420px) {
      .action-bar {
        gap: 6px;
        padding-left: 8px;
        padding-right: 8px
      }

      .ab-btn {
        gap: 5px;
        padding: 0 9px;
        font-size: clamp(.68rem, 2.9vw, .9rem)
      }

      .ab-btn svg {
        width: 19px;
        height: 19px
      }
    }

    /* ---------- QR modal ---------- */
    .qr-modal {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(10, 33, 31, .62);
      backdrop-filter: blur(3px);
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease, visibility .3s ease
    }

    .qr-modal.show {
      opacity: 1;
      visibility: visible
    }

    .qr-card {
      background: #fff;
      border-radius: 22px;
      padding: 28px 22px 20px;
      max-width: 480px;
      width: 100%;
      position: relative;
      box-shadow: var(--shadow);
      transform: translateY(14px) scale(.97);
      transition: transform .3s ease
    }

    .qr-modal.show .qr-card {
      transform: none
    }

    .qr-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: var(--sage);
      color: var(--petrol-deep);
      font-size: 1rem;
      cursor: pointer;
      line-height: 1
    }

    .qr-title {
      font-family: 'Fraunces', serif;
      font-size: 1.35rem;
      color: var(--petrol-deep);
      text-align: center;
      margin-bottom: 18px;
      padding: 0 18px
    }

    .qr-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px
    }

    .qr-item {
      text-align: center
    }

    .qr-item img {
      width: 100%;
      max-width: 132px;
      border: 1px solid var(--sage-line);
      border-radius: 12px;
      padding: 6px;
      background: #fff;
      image-rendering: pixelated
    }

    .qr-name {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-weight: 700;
      color: var(--petrol-deep);
      margin-top: 9px;
      font-size: .84rem
    }

    .qr-item small {
      color: #6a807a;
      font-size: .66rem;
      display: block;
      line-height: 1.25
    }

    .qr-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      flex: none
    }

    .qr-dot.ig {
      background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF)
    }

    .qr-dot.yt {
      background: #FF0000
    }

    .qr-dot.fb {
      background: #1877F2
    }

    .qr-foot {
      text-align: center;
      color: #7e918c;
      font-size: .77rem;
      margin-top: 18px
    }

    @media(max-width:420px) {
      .qr-title {
        font-size: 1.15rem;
        margin-bottom: 14px
      }
    }

    /* ---------- Call chooser modal ---------- */
    .call-modal {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(10, 33, 31, .62);
      backdrop-filter: blur(3px);
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease, visibility .3s ease
    }

    .call-modal.show {
      opacity: 1;
      visibility: visible
    }

    .call-card {
      background: #fff;
      border-radius: 22px;
      padding: 26px 22px 22px;
      max-width: 420px;
      width: 100%;
      position: relative;
      box-shadow: var(--shadow);
      transform: translateY(14px) scale(.97);
      transition: transform .3s ease
    }

    .call-modal.show .call-card {
      transform: none
    }

    .call-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: var(--sage);
      color: var(--petrol-deep);
      font-size: 1rem;
      cursor: pointer;
      line-height: 1
    }

    .call-title {
      font-family: 'Fraunces', serif;
      font-size: 1.35rem;
      color: var(--petrol-deep);
      text-align: center;
      margin-bottom: 6px;
      padding: 0 24px
    }

    .call-sub {
      text-align: center;
      color: #7e918c;
      font-size: .82rem;
      margin-bottom: 18px
    }

    .call-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 14px;
      border: 1px solid var(--sage-line);
      border-radius: 16px;
      background: var(--mist)
    }

    .call-row+.call-row {
      margin-top: 11px
    }

    .call-row .info {
      flex: 1 1 auto;
      min-width: 0
    }

    .call-row .lab {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .62rem;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--brass)
    }

    .call-row .num {
      font-weight: 700;
      color: var(--petrol-deep);
      font-size: 1.05rem;
      letter-spacing: .01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .call-go {
      flex: none;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--petrol);
      color: #fff;
      font-weight: 700;
      font-size: .9rem;
      padding: 11px 18px;
      border-radius: 999px;
      transition: filter .18s ease, transform .18s ease
    }

    .call-go:hover {
      filter: brightness(1.06)
    }

    .call-go:active {
      transform: scale(.95)
    }

    .call-go svg {
      flex: none
    }

    /* ---------- FAQ accordion ---------- */
    .faq-list {
      max-width: 820px;
      margin: 34px auto 0;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .faq-item {
      border: 1px solid var(--sage-line);
      border-radius: 16px;
      background: var(--cloud);
      overflow: hidden
    }

    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 17px 20px;
      font-family: 'Fraunces', serif;
      font-size: 1.06rem;
      color: var(--petrol-deep);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px
    }

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

    .faq-item summary::after {
      content: "+";
      font-size: 1.5rem;
      color: var(--brass);
      flex: none;
      line-height: 1;
      transition: transform .25s ease
    }

    .faq-item[open] summary::after {
      transform: rotate(45deg)
    }

    .faq-a {
      padding: 0 20px 18px;
      color: var(--ink);
      line-height: 1.62;
      font-size: .97rem
    }

    .faq-a a {
      color: var(--petrol);
      font-weight: 600
    }

    /* ---------- Video ---------- */
    .video-wrap {
      position: relative;
      width: 100%;
      max-width: 880px;
      margin: 42px auto 0;
      aspect-ratio: 16/9;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: var(--shadow);
      background: #0A332E;
      border: 1px solid var(--sage-line)
    }

    .video-wrap iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0
    }

    /* ---------- Sidebar socials ---------- */
    .nav-social {
      display: none
    }

    @media(max-width:680px) {
      .nav-social {
        display: block;
        margin-top: 22px;
        padding-top: 20px;
        border-top: 1px solid #eef2ef;
        width: 100%
      }

      .nav-social-label {
        font-family: 'IBM Plex Mono', monospace;
        font-size: .66rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--brass);
        display: block;
        margin-bottom: 12px
      }

      .nav-social-row {
        display: flex;
        gap: 12px
      }

      .nav-social-row a {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        transition: transform .2s ease
      }

      .nav-social-row a:active {
        transform: scale(.93)
      }

      .nav-social-row svg {
        width: 48px;
        height: 48px;
        display: block
      }

      .nav-social-row,
      .nav-social-row a {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none
      }
    }

    /* ---------- Share / Rate actions ---------- */
    .nav-actions {
      display: none
    }

    .nav-actions-row {
      display: flex;
      gap: 10px
    }

    .nav-act {
      flex: 1 1 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
      text-decoration: none;
      border: 1px solid var(--sage-line);
      border-radius: 12px;
      background: var(--cloud);
      color: var(--petrol-deep);
      font-family: inherit;
      font-weight: 700;
      font-size: .92rem;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      transition: transform .18s ease, border-color .2s ease
    }

    .nav-act:active {
      transform: scale(.97)
    }

    .nav-act svg {
      flex: none;
      color: var(--brass)
    }

    @media(max-width:680px) {
      .nav-actions {
        display: block;
        margin-top: 22px;
        padding-top: 20px;
        border-top: 1px solid #eef2ef;
        width: 100%
      }
    }

    .foot-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-top: 18px
    }

    .foot-act {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 0 15px;
      border-radius: 999px;
      text-decoration: none;
      border: 1px solid rgba(255, 255, 255, .2);
      background: rgba(255, 255, 255, .06);
      color: #fff;
      font-family: inherit;
      font-weight: 700;
      font-size: .86rem;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      transition: transform .18s ease, background .2s ease
    }

    .foot-act:hover {
      background: rgba(255, 255, 255, .12)
    }

    .foot-act:active {
      transform: scale(.97)
    }

    .foot-act svg {
      flex: none;
      color: var(--brass-bright)
    }

    .mini-qr-card {
      max-width: 360px
    }

    .mini-qr-wrap {
      display: flex;
      justify-content: center;
      margin: 6px 0 4px
    }

    .mini-qr-img {
      width: 100%;
      max-width: 240px;
      height: auto;
      border: 1px solid var(--sage-line);
      border-radius: 14px;
      padding: 12px;
      background: #fff;
      image-rendering: pixelated
    }

    .mini-qr-img[hidden] {
      display: none
    }

    /* ---------- Responsive ---------- */
    @media(max-width:980px) {
      .hero .wrap {
        grid-template-columns: 1fr;
        gap: 40px
      }

      .portrait-stage {
        order: -1;
        max-width: 330px;
        margin: 0 auto
      }

      .about-grid {
        grid-template-columns: 1fr;
        gap: 34px
      }

      .spec-grid {
        grid-template-columns: 1fr 1fr
      }

      .gallery-grid {
        grid-template-columns: 1fr 1fr
      }

      .loc-banner {
        aspect-ratio: 16/9
      }

      .appt-inner {
        grid-template-columns: 1fr;
        padding: 40px 30px;
        gap: 30px
      }

      .contact-grid {
        grid-template-columns: 1fr
      }

      .foot-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:680px) {
      nav.links {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(84vw, 330px);
        height: 100vh;
        height: 100dvh;
        background: #ffffff;
        border-left: 1px solid var(--sage-line);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 84px 26px 30px;
        gap: 6px;
        transform: translateX(110%);
        transition: transform .4s cubic-bezier(.22, 1, .36, 1);
        box-shadow: -18px 0 50px -28px rgba(10, 51, 46, .5);
        z-index: 120;
        overflow-y: auto
      }

      nav.links a.link {
        font-size: 1.08rem;
        font-weight: 600;
        padding: 14px 6px;
        border-bottom: 1px solid #eef2ef;
        width: 100%
      }

      nav.links a.link::after {
        display: none
      }

      nav.links a.link:active {
        color: var(--brass)
      }

      nav.links.open {
        transform: none
      }

      nav.links .btn {
        width: 100%;
        justify-content: center;
        margin-top: 8px
      }

      .burger {
        display: inline-flex
      }

      .nav-cta .btn-appt {
        display: none
      }

      .why-grid {
        grid-template-columns: 1fr
      }

      .care-row {
        grid-template-columns: 1fr
      }

      .spec-grid {
        grid-template-columns: 1fr
      }

      .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px
      }

      .gtile .cap {
        font-size: .78rem
      }

      .loc-banner {
        aspect-ratio: 3/2
      }

      .loc-banner .overlay {
        background: linear-gradient(0deg, rgba(10, 51, 46, .92), rgba(10, 51, 46, .1))
      }

      .foot-grid {
        grid-template-columns: 1fr
      }

      section.block {
        padding: 64px 0
      }

      .hero {
        padding: 16px 0 52px
      }

      .hero h1 {
        font-size: 2.05rem
      }

      .hero .role {
        font-size: .8rem
      }

      .portrait-stage {
        max-width: 286px
      }

      .float-badge.b1 {
        left: 0
      }

      .float-badge.b2 {
        right: 0
      }

      .topbar .hide-sm {
        display: none
      }

      .brand-logo {
        height: 36px;
        width: 142px
      }

      .foot-logo {
        height: 54px;
        width: 200px
      }
    }

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

      .reveal {
        opacity: 1;
        transform: none
      }
    }
  

    /* ===== Dark Theme ===== */
    [data-theme="dark"] {
      --ink: #D6E8E2;
      --petrol: #3BA899;
      --petrol-deep: #8FD4C7;
      --petrol-soft: #50B5A3;
      --brass: #D4A85F;
      --brass-bright: #E0B96E;
      --mist: #0A1614;
      --sage: #121F1C;
      --sage-line: #1A302B;
      --cloud: #0E1F1B;
      --shadow: 0 18px 50px -28px rgba(0, 0, 0, .6);
      --shadow-sm: 0 8px 24px -16px rgba(0, 0, 0, .5);
    }

    [data-theme="dark"] body {
      background: var(--mist);
      color: var(--ink)
    }

    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3,
    [data-theme="dark"] h4 {
      color: var(--petrol-deep)
    }

    [data-theme="dark"] header.nav {
      background: rgba(10, 22, 20, .92);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] header.nav.scrolled {
      border-color: var(--sage-line);
      box-shadow: 0 6px 24px -20px rgba(0, 0, 0, .7)
    }

    [data-theme="dark"] .brand b {
      color: var(--petrol-deep)
    }

    [data-theme="dark"] nav.links a.link {
      color: var(--ink)
    }

    [data-theme="dark"] nav.links a.link:hover {
      color: var(--brass)
    }

    [data-theme="dark"] .btn-ghost {
      color: var(--petrol-deep);
      border-color: var(--sage-line);
      background: transparent
    }

    [data-theme="dark"] .btn-ghost:hover {
      border-color: var(--petrol);
      background: var(--sage)
    }

    [data-theme="dark"] .btn-primary {
      background: var(--petrol);
      color: #fff
    }

    [data-theme="dark"] .doc-hero,
    [data-theme="dark"] .specs {
      background: linear-gradient(165deg, #0D2E28, #081E1A)
    }

    [data-theme="dark"] .about,
    [data-theme="dark"] .gallery {
      background: var(--mist)
    }

    [data-theme="dark"] .chip {
      background: var(--sage);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .float-badge {
      background: var(--cloud);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .crest-stage::before {
      background: radial-gradient(circle at 50% 35%, var(--cloud), var(--sage) 70%)
    }

    [data-theme="dark"] .doc-card {
      background: var(--cloud);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .doc-card ul li {
      color: var(--ink)
    }

    [data-theme="dark"] .spec {
      background: var(--cloud);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .spec .ic {
      background: var(--sage)
    }

    [data-theme="dark"] .spec .tag {
      background: rgba(182, 138, 76, .12);
      color: var(--brass)
    }

    [data-theme="dark"] .why-card {
      background: var(--cloud);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .why-card ul li {
      color: var(--ink)
    }

    [data-theme="dark"] .care {
      background: var(--cloud);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .care p {
      color: var(--ink)
    }

    [data-theme="dark"] .gtile .cap {
      background: rgba(10, 22, 20, .88)
    }

    [data-theme="dark"] .appt {
      background: linear-gradient(135deg, #0D2E28, #081E1A)
    }

    [data-theme="dark"] .fees {
      background: rgba(255, 255, 255, .04);
      border-color: rgba(255, 255, 255, .1)
    }

    [data-theme="dark"] .frow {
      border-color: rgba(255, 255, 255, .08)
    }

    [data-theme="dark"] .cinfo {
      background: var(--cloud);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .cinfo .val {
      color: var(--ink)
    }

    [data-theme="dark"] .location-card {
      background: var(--cloud);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] footer {
      background: var(--sage);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .foot-bottom {
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .action-bar {
      background: rgba(10, 22, 20, .95);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .pwaib {
      background: #081E1A
    }

    [data-theme="dark"] .topbar {
      background: #061412
    }

    [data-theme="dark"] .timeline .item {
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .tl .item p {
      color: var(--ink)
    }

    [data-theme="dark"] .hero p.lede {
      color: var(--ink)
    }

    [data-theme="dark"] .sec-head p {
      color: var(--ink)
    }

    [data-theme="dark"] .video-wrap {
      background: var(--cloud);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .qr-modal .qr-card {
      background: var(--cloud);
      color: var(--ink)
    }

    [data-theme="dark"] .call-modal .call-card {
      background: var(--cloud);
      color: var(--ink)
    }

    [data-theme="dark"] .call-row {
      background: rgba(255, 255, 255, .04);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .call-row .num {
      color: var(--ink)
    }

    @media(max-width:680px) {
      [data-theme="dark"] nav.links {
        background: #0E1F1B;
        border-color: var(--sage-line)
      }

      [data-theme="dark"] nav.links a.link {
        border-color: var(--sage-line)
      }
    }

    /* ===== Theme Toggle (side menu) ===== */
    .nav-prefs {
      margin-top: auto;
      padding-top: 20px;
      border-top: 1px solid var(--sage-line);
      display: flex;
      flex-direction: column;
      gap: 14px
    }

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

    .pref-label {
      font-size: .88rem;
      font-weight: 600;
      color: var(--petrol-deep)
    }

    .theme-toggle {
      position: relative;
      width: 56px;
      height: 30px;
      border-radius: 999px;
      border: 2px solid var(--sage-line);
      background: var(--sage);
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 0 4px;
      transition: background .3s, border-color .3s
    }

    .theme-toggle .tt-icon {
      font-size: .82rem;
      line-height: 1;
      z-index: 1;
      transition: opacity .3s
    }

    .theme-toggle .tt-sun {
      opacity: 1
    }

    .theme-toggle .tt-moon {
      opacity: .4;
      margin-left: auto
    }

    .theme-toggle .tt-knob {
      position: absolute;
      left: 3px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--petrol);
      transition: left .3s ease, background .3s
    }

    [data-theme="dark"] .theme-toggle {
      background: var(--sage);
      border-color: var(--sage-line)
    }

    [data-theme="dark"] .theme-toggle .tt-sun {
      opacity: .4
    }

    [data-theme="dark"] .theme-toggle .tt-moon {
      opacity: 1
    }

    [data-theme="dark"] .theme-toggle .tt-knob {
      left: calc(100% - 25px);
      background: var(--brass)
    }

    /* ===== Language Switch (side menu) ===== */
    .lang-switch {
      display: flex;
      gap: 4px;
      background: var(--sage);
      border-radius: 999px;
      padding: 3px
    }

    .lang-btn {
      border: none;
      background: transparent;
      color: var(--ink);
      font-size: .82rem;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 999px;
      cursor: pointer;
      transition: background .25s, color .25s
    }

    .lang-btn.active {
      background: var(--petrol);
      color: #fff
    }

    .lang-btn:hover:not(.active) {
      background: var(--sage-line)
    }

    /* ===== Desktop compact controls ===== */
    .desktop-prefs {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .theme-toggle-sm {
      background: none;
      border: 1.5px solid var(--sage-line);
      border-radius: 999px;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: .9rem;
      transition: background .25s, border-color .25s
    }

    .theme-toggle-sm:hover {
      border-color: var(--petrol);
      background: var(--sage)
    }

    .theme-toggle-sm .tt-sun {
      display: inline
    }

    .theme-toggle-sm .tt-moon {
      display: none
    }

    [data-theme="dark"] .theme-toggle-sm .tt-sun {
      display: none
    }

    [data-theme="dark"] .theme-toggle-sm .tt-moon {
      display: inline
    }

    .lang-switch-sm {
      display: flex;
      gap: 2px;
      background: var(--sage);
      border-radius: 999px;
      padding: 2px
    }

    .lang-btn-sm {
      border: none;
      background: transparent;
      color: var(--ink);
      font-size: .72rem;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 999px;
      cursor: pointer;
      transition: background .25s, color .25s
    }

    .lang-btn-sm.active {
      background: var(--petrol);
      color: #fff
    }

    .lang-btn-sm:hover:not(.active) {
      background: var(--sage-line)
    }

    /* ===== Lightbox ===== */
    .gtile {
      cursor: pointer
    }

    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0, 0, 0, .92);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s
    }

    .lightbox.active {
      opacity: 1;
      pointer-events: auto
    }

    .lb-img {
      max-width: 90vw;
      max-height: 75vh;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .8)
    }

    .lb-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(255, 255, 255, .1);
      border: none;
      color: #fff;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      font-size: 2rem;
      line-height: 1;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background .2s
    }

    .lb-close:hover {
      background: rgba(255, 255, 255, .25)
    }

    .lb-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, .1);
      border: none;
      color: #fff;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      font-size: 2rem;
      line-height: 1;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background .2s;
      z-index: 2
    }

    .lb-nav:hover {
      background: rgba(255, 255, 255, .25)
    }

    .lb-prev {
      left: 20px
    }

    .lb-next {
      right: 20px
    }

    .lb-cap {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      text-align: center;
      max-width: 80%;
      font-size: 1.1rem;
      line-height: 1.4;
      background: rgba(0, 0, 0, .6);
      padding: 10px 20px;
      border-radius: 20px;
      pointer-events: none
    }

    @media(max-width:680px) {
      .desktop-prefs {
        display: none
      }

      .lb-nav {
        width: 40px;
        height: 40px;
        font-size: 1.5rem
      }

      .lb-prev {
        left: 10px
      }

      .lb-next {
        right: 10px
      }

      .lb-cap {
        bottom: 20px;
        width: 90%;
        font-size: 1rem
      }

      .lb-img {
        max-width: 96vw;
        max-height: 70vh
      }
    }

    @media(min-width:681px) {
      .nav-prefs {
        display: none
      }
    }
  

    .pwaib {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
      background: #0F4C45;
      color: #fff;
      font-family: 'Hanken Grotesk', system-ui, sans-serif;
      position: relative;
      z-index: 140
    }

    .pwaib[hidden] {
      display: none
    }

    .pwaib__icon {
      border-radius: 8px;
      flex: 0 0 auto;
      display: block
    }

    .pwaib__text {
      display: flex;
      flex-direction: column;
      line-height: 1.25;
      min-width: 0
    }

    .pwaib__text strong {
      font-size: .92rem;
      font-weight: 700
    }

    .pwaib__text span {
      font-size: .76rem;
      opacity: .85
    }

    .pwaib__btn {
      margin-left: auto;
      flex: 0 0 auto;
      background: #fff;
      color: #0F4C45;
      font-weight: 700;
      font-size: .85rem;
      border: 0;
      border-radius: 999px;
      padding: .55em 1.15em;
      cursor: pointer
    }

    .pwaib__btn:hover {
      background: #eaf1ee
    }

    .pwaib__close {
      flex: 0 0 auto;
      background: transparent;
      border: 0;
      color: #fff;
      font-size: 1.5rem;
      line-height: 1;
      cursor: pointer;
      opacity: .75;
      padding: 0 4px
    }

    .pwaib__close:hover {
      opacity: 1
    }

    @media(max-width:520px) {
      .pwaib__text span {
        display: none
      }
    }
  

/* Sub-page hero */
.page-hero {
  background: var(--petrol-deep);
  color: var(--cloud);
  padding: 140px 24px 60px;
  text-align: center;
}
.page-hero h1 {
  color: var(--cloud);
  margin-top: 12px;
}
.page-hero .breadcrumb {
  font-size: 0.9rem;
  color: var(--sage);
  opacity: 0.8;
}

    /* ---------- Mobile first-paint fix: social / share / rate icons + hamburger paint on first render (no press-and-hold) ---------- */
    .social-ic {
      filter: none;
      border-radius: 14px;
      box-shadow: 0 6px 14px rgba(0, 0, 0, .28)
    }

    .social-ic,
    .nav-social-row a,
    .nav-act,
    .foot-act,
    .burger {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden
    }

    @media (max-width: 680px) {
      .burger {
        background: rgba(15, 76, 69, .06);
        border: 1px solid var(--sage-line)
      }
    }