/* ==========================================================================
   ONE Rehabilitation Center — Glass Design System
   Loaded after style.css. Everything here lives in the "g-" namespace and
   turns the site into one continuous deep-teal canvas with Apple-style
   frosted glass panels floating on top of a drifting aurora field.
   ========================================================================== */

:root {
    /* Canvas */
    --g-canvas:   #04211F;
    --g-canvas-2: #062B28;
    --g-ink:      #EDFBF7;   /* headings */
    --g-body:     #BAD8D1;   /* paragraph text */
    --g-muted:    #93BAB3;   /* captions, meta */

    /* Glass recipe */
    --g-fill:     linear-gradient(150deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.028) 46%, rgba(255,255,255,.052) 100%);
    --g-fill-2:   linear-gradient(150deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 55%, rgba(255,255,255,.07) 100%);
    --g-stroke:   rgba(255,255,255,.16);
    --g-stroke-2: rgba(255,255,255,.3);
    --g-blur:     blur(26px) saturate(165%);
    --g-shadow:   0 24px 60px -18px rgba(0, 22, 20, .72);
    /* a brighter top lip is what separates "lit glass pane" from "dark rectangle" */
    --g-inner:    inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.22);

    /* Radii */
    --g-r-lg: 30px;
    --g-r-md: 22px;
    --g-r-sm: 16px;

    /* Rhythm */
    --g-shell: 1240px;
    --g-pad:   clamp(1.15rem, 4.5vw, 3rem);
    --g-gap:   clamp(0.85rem, 2vw, 1.35rem);

    --g-ease: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   Canvas — the whole document sits on one deep-teal aurora field.
   Painted straight onto the body background rather than a fixed pseudo-element:
   a viewport-sized fixed layer over a 9,000px document forces the compositor to
   rasterise the whole page and everything below it stops painting on scroll.
   background-attachment: fixed gives the same parallax for free.
   -------------------------------------------------------------------------- */
body {
    color: var(--g-body);
    background-color: var(--g-canvas);
    background-image:
        /* fine grain, first layer, so the wide gradients below never band */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E"),
        radial-gradient(58% 42% at 12% 4%,   rgba(0, 144, 144, .40), transparent 62%),
        radial-gradient(52% 40% at 92% 16%,  rgba(95, 201, 186, .26), transparent 64%),
        radial-gradient(64% 46% at 78% 74%,  rgba(0, 120, 108, .34), transparent 66%),
        radial-gradient(48% 38% at 18% 92%,  rgba(233, 196, 106, .16), transparent 64%),
        linear-gradient(168deg, var(--g-canvas) 0%, var(--g-canvas-2) 48%, #031A18 100%);
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-attachment: fixed;
    background-size: 140px 140px, cover, cover, cover, cover, cover;
}

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */
.g-shell { width: 100%; max-width: var(--g-shell); margin-inline: auto; }

.g-sec {
    position: relative;
    padding: clamp(3.4rem, 8vw, 6.5rem) var(--g-pad);
    scroll-margin-top: 96px;
}
.g-sec--tight { padding-block: clamp(2.4rem, 5vw, 4rem); }

/* The glass panel itself */
.glass {
    position: relative;
    isolation: isolate;
    background: var(--g-fill);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-stroke);
    border-radius: var(--g-r-md);
    box-shadow: var(--g-shadow), var(--g-inner);
    overflow: hidden;
}

/* Specular sheen across the top-leading corner — the Apple "lit pane" cue —
   plus a pointer-tracked spotlight. JS writes --mx/--my as the cursor moves
   across a pane and raises --spot on enter, so the light follows the hand. */
.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle 240px at var(--mx, 50%) var(--my, -20%),
            rgba(150, 235, 220, calc(.20 * var(--spot, 0))), transparent 68%),
        radial-gradient(120% 78% at 6% -8%, rgba(255,255,255,.26), transparent 56%),
        radial-gradient(90% 60% at 100% 108%, rgba(95, 201, 186, .16), transparent 62%);
    transition: background .25s ease;
}

/* Interactive lift shared by every clickable pane */
.g-lift {
    transition: transform .5s var(--g-ease), border-color .5s ease, box-shadow .5s ease;
    will-change: transform;
}
.g-lift:hover,
.g-lift:focus-visible {
    transform: translateY(-7px);
    border-color: var(--g-stroke-2);
    box-shadow: 0 34px 76px -20px rgba(0, 18, 17, .85), var(--g-inner), 0 0 0 1px rgba(95, 201, 186, .18);
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */
.g-head {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: clamp(2rem, 4.5vw, 3.4rem);
    text-align: center;
}
.g-head--start { margin-inline: 0; text-align: start; }

.g-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem 1rem;
    margin-bottom: 1.1rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gold-bright);
    background: rgba(233, 196, 106, .09);
    border: 1px solid rgba(233, 196, 106, .3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.g-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 10px var(--gold-bright);
}

.g-title {
    font-family: var(--font-heading);
    font-size: clamp(1.65rem, 4.4vw, 3.05rem);
    line-height: 1.28;
    color: var(--g-ink);
    margin-bottom: .95rem;
    text-wrap: balance;
}
.g-title .hl {
    background: linear-gradient(104deg, var(--color-mint) 0%, var(--gold-bright) 58%, var(--color-mint) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: gradMove 7s ease infinite;
}

.g-sub {
    font-size: clamp(.98rem, 1.6vw, 1.12rem);
    font-weight: 300;
    line-height: 1.95;
    color: var(--g-body);
    max-width: 62ch;
    margin-inline: auto;
    text-wrap: pretty;
}
.g-head--start .g-sub { margin-inline: 0; }

/* --------------------------------------------------------------------------
   Grids — mobile shows 2 per row wherever the content still breathes,
   and falls back to a single column when it would crowd.
   -------------------------------------------------------------------------- */
.g-grid { display: grid; gap: var(--g-gap); align-items: stretch; }

/* Compact tiles: always two up, even on the narrowest phones */
.g-grid--duo   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .g-grid--duo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Icon + short copy — two up as soon as a phone can hold two without crowding */
.g-grid--tiles { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 380px) { .g-grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .g-grid--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Exactly four items — 3-up would strand a lone orphan on a second row */
.g-grid--quad { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 380px)  { .g-grid--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .g-grid--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Content-heavy cards (services, reviews) */
.g-grid--cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px)  { .g-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .g-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Reviews — a swipeable horizontal carousel on mobile instead of a stacked
   single column. Scoped to #reviews only: .g-grid--cards is shared with the
   services section, which should keep stacking normally. Each card sits at
   87% width so the next one peeks in at the edge as a swipe affordance. */
@media (max-width: 640px) {
    #reviews .g-grid--cards {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        padding-bottom: .4rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #reviews .g-grid--cards::-webkit-scrollbar { display: none; }
    #reviews .g-review {
        flex: 0 0 87%;
        scroll-snap-align: start;
    }
}

/* Doctors */
.g-grid--docs { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px)  { .g-grid--docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .g-grid--docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Offers — tall price panels */
.g-grid--offers { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { .g-grid--offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .g-grid--offers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Two-column editorial split */
.g-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 3.4rem);
    align-items: center;
}
@media (min-width: 960px) { .g-split { grid-template-columns: 1.05fr .95fr; } }
@media (min-width: 960px) { .g-split--flip > :first-child { order: 2; } }

/* --------------------------------------------------------------------------
   Icon badge
   -------------------------------------------------------------------------- */
.g-badge {
    display: grid;
    place-items: center;
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    color: var(--color-mint);
    background: linear-gradient(150deg, rgba(95, 201, 186, .26), rgba(0, 120, 108, .16));
    border: 1px solid rgba(95, 201, 186, .34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 24px -12px rgba(95, 201, 186, .6);
    transition: transform .5s var(--g-ease), color .4s ease, border-color .4s ease;
}
.g-badge--gold {
    color: var(--gold-bright);
    background: linear-gradient(150deg, rgba(233, 196, 106, .26), rgba(150, 92, 24, .18));
    border-color: rgba(233, 196, 106, .38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 10px 24px -12px rgba(233, 196, 106, .55);
}
.g-badge--sm { width: 40px; height: 40px; border-radius: 13px; }
.g-ico { width: 26px; height: 26px; }
.g-badge--sm .g-ico { width: 19px; height: 19px; }
.g-lift:hover .g-badge { transform: translateY(-2px) rotate(-4deg) scale(1.06); }

/* --------------------------------------------------------------------------
   Empty media wells — drop the real photo in later, the frame already fits
   -------------------------------------------------------------------------- */
.g-media {
    position: relative;
    display: grid;
    place-items: center;
    gap: .55rem;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Inside a two-up phone tile a landscape frame can collapse to a sliver;
       the floor makes it crop vertically instead, which the centred-subject
       art spec in IMAGES.md is built to survive. */
    min-height: 120px;
    border-radius: var(--g-r-md);
    overflow: hidden;
    color: rgba(174, 205, 198, .5);
    background:
        radial-gradient(90% 70% at 30% 12%, rgba(95, 201, 186, .16), transparent 62%),
        linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
/* Every generated well on the site is landscape, cropped from a centred
   subject. The one exception is doctor headshots: those source photos are
   portrait originals (1024×1536) supplied directly, not part of the
   landscape content pipeline, so their frame stays portrait to match rather
   than slicing the body off to force a landscape crop. */
.g-media--wide  { aspect-ratio: 2 / 1; }   /* banner strips inside a split */
.g-media--photo { aspect-ratio: 2 / 3; }   /* doctor profile page — near-native portrait crop */

/* slow sheen so an empty well still feels alive rather than broken */
.g-media::after {
    content: '';
    position: absolute;
    top: -40%;
    inset-inline-start: -60%;
    width: 42%;
    height: 190%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
    transform: rotate(16deg);
    animation: gSheen 7s ease-in-out infinite;
}
@keyframes gSheen {
    0%, 58%   { transform: translateX(0) rotate(16deg); }
    88%, 100% { transform: translateX(520%) rotate(16deg); }
}
/* An empty well should read as a frame waiting for art, not a broken image:
   a faint blueprint grid and a breathing icon do that. */
.g-media:not(.g-media--filled)::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(95, 201, 186, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 201, 186, .07) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(90% 80% at 50% 50%, #000, transparent 76%);
    mask-image: radial-gradient(90% 80% at 50% 50%, #000, transparent 76%);
}
.g-media .g-ico {
    position: relative;
    width: 34px;
    height: 34px;
    opacity: .5;
    animation: gWellPulse 4.5s ease-in-out infinite;
}
@keyframes gWellPulse {
    0%, 100% { opacity: .34; transform: scale(1); }
    50%      { opacity: .62; transform: scale(1.07); }
}
.g-media span {
    font-size: .72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .65;
}

/* Media well holding a real image */
.g-media--filled { background: rgba(0,0,0,.2); }
.g-media--filled::after { display: none; }
.g-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Landscape art in a landscape frame crops horizontally, so the vertical
       figure only matters for stand-in portraits — 30% keeps a face in view
       instead of the empty headroom a top-anchored crop would land on. */
    object-position: center 30%;
    display: block;
    transition: transform .8s var(--g-ease);
}
.g-lift:hover .g-media img { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   Page hero (inner pages)
   -------------------------------------------------------------------------- */
.g-hero {
    position: relative;
    padding: clamp(9rem, 18vh, 12.5rem) var(--g-pad) clamp(3.4rem, 7vw, 5.5rem);
    text-align: center;
    overflow: hidden;
}
.g-hero::before {
    content: '';
    position: absolute;
    inset-inline: -10%;
    top: -30%;
    height: 130%;
    z-index: -1;
    background: radial-gradient(52% 46% at 50% 42%, rgba(0, 144, 144, .34), transparent 68%);
    pointer-events: none;
}
.g-hero .g-title { font-size: clamp(1.9rem, 5.4vw, 3.6rem); }
.g-hero .g-sub { margin-top: .4rem; }

.g-crumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    margin-top: 1.6rem;
    font-size: .84rem;
    color: var(--g-muted);
}
.g-crumb a { transition: color .3s ease; }
.g-crumb a:hover { color: var(--gold-bright); }
.g-crumb .sep { opacity: .45; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.g-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .95rem 1.9rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.2;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform .38s var(--g-ease), box-shadow .38s ease, border-color .38s ease, background .38s ease, color .38s ease;
}
.g-btn svg { width: 18px; height: 18px; flex: none; }
[dir="rtl"] .g-btn svg.g-ico--dir { transform: scaleX(-1); }

/* Primary — the WhatsApp booking action */
.g-btn--wa {
    color: #04211F;
    background: linear-gradient(128deg, var(--color-mint) 0%, #8FE0D2 42%, var(--gold-bright) 100%);
    background-size: 190% 100%;
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 16px 40px -14px rgba(95, 201, 186, .85), inset 0 1px 0 rgba(255,255,255,.6);
    animation: gradientShift 7s ease infinite;
}
.g-btn--wa::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: -70%;
    width: 45%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
    transform: skewX(-20deg);
    transition: inset-inline-start .65s ease;
}
.g-btn--wa:hover::after { inset-inline-start: 130%; }
.g-btn--wa:hover { transform: translateY(-3px); box-shadow: 0 22px 52px -14px rgba(95, 201, 186, 1), inset 0 1px 0 rgba(255,255,255,.7); }

/* Secondary — outlined glass */
.g-btn--ghost {
    color: var(--g-ink);
    background: rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}
.g-btn--ghost:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.38);
}
.g-btn--sm { padding: .68rem 1.35rem; font-size: .88rem; }
.g-btn--block { width: 100%; }
.g-btn:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }

.g-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    justify-content: center;
    margin-top: 2rem;
}
.g-head--start .g-actions, .g-actions--start { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   Stat strip
   -------------------------------------------------------------------------- */
.g-stat {
    padding: clamp(1.05rem, 2.6vw, 1.7rem) clamp(.7rem, 2vw, 1.4rem);
    border-radius: var(--g-r-sm);
    text-align: center;
}
.g-stat b {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4.6vw, 2.5rem);
    line-height: 1.1;
    color: var(--g-ink);
    letter-spacing: -.5px;
}
.g-stat b .u { color: var(--gold-bright); font-size: .62em; }
/* direct child only — the unit lives inside <b> and must stay on the number's line */
.g-stat > span {
    display: block;
    margin-top: .45rem;
    font-size: clamp(.72rem, 2vw, .84rem);
    line-height: 1.5;
    color: var(--g-muted);
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Service card
   -------------------------------------------------------------------------- */
.g-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    height: 100%;
}

/* Card with a full-bleed photo header. The padding moves off the card and
   onto an inner body so the image can run edge to edge under the card's
   rounded corners (.glass already clips with overflow:hidden). */
.g-card--media { padding: 0; gap: 0; }
.g-card--media .g-media {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: none;
    flex: none;
}
.g-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    flex: 1;
}

/* "Details" cue — signals the card is a link, and slides on hover */
.g-card-more {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding-top: .2rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--color-mint);
    transition: color .35s ease, gap .35s var(--g-ease);
}
.g-card-more svg { width: 15px; height: 15px; stroke-width: 2.4; }
[dir="rtl"] .g-card-more svg { transform: scaleX(-1); }
.g-lift:hover .g-card-more { color: var(--gold-bright); gap: .8rem; }
.g-card-top { display: flex; align-items: center; gap: .95rem; }
.g-card h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.08rem, 2.3vw, 1.28rem);
    line-height: 1.45;
    color: var(--g-ink);
    margin: 0;
    text-wrap: balance;
}
/* Titles run to one or two lines depending on the name; reserving both keeps
   the paragraphs beneath them on a shared baseline across a row. */
@media (min-width: 640px) {
    .g-grid--cards .g-card-top { min-height: calc(2 * 1.45em); align-items: center; }
}
.g-card .g-lead {
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.85;
    color: var(--g-body);
    margin: 0;
}
.g-card .g-note {
    font-size: .88rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--g-muted);
    margin: 0;
}

/* item list inside a service card — follows the lead directly; bottom-aligning
   it left a ragged hole whenever two cards in a row had different item counts */
.g-list { display: grid; gap: .5rem; padding-top: .35rem; }
.g-list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--g-body);
}
.g-list li svg {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: .28rem;
    color: var(--color-mint);
    stroke-width: 2.4;
}
.g-list--gold li svg { color: var(--gold-bright); }

/* chips */
.g-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.g-chip {
    display: inline-flex;
    align-items: center;
    padding: .34rem .8rem;
    border-radius: 999px;
    font-size: .78rem;
    line-height: 1.5;
    color: #CDE7E1;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
}

/* --------------------------------------------------------------------------
   Offers
   -------------------------------------------------------------------------- */
.g-offer {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    padding: clamp(1.35rem, 3vw, 1.95rem);
    height: 100%;
}
.g-offer--best {
    border-color: rgba(233, 196, 106, .48);
    background: var(--g-fill-2);
    box-shadow: 0 30px 70px -20px rgba(0, 18, 17, .9), var(--g-inner), 0 0 0 1px rgba(233, 196, 106, .22);
}
.g-offer-flag {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    padding: .38rem .95rem;
    border-radius: 0 0 0 14px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #2A1A05;
    background: linear-gradient(120deg, var(--gold-bright), #F7E4B0);
}
[dir="rtl"] .g-offer-flag { border-radius: 0 0 14px 0; }

.g-offer-kicker {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--color-mint);
}
.g-offer h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 3vw, 1.55rem);
    color: var(--g-ink);
    line-height: 1.35;
    margin: .2rem 0 0;
}
.g-offer-lead {
    font-size: .9rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--g-body);
}

.g-price {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    padding: .85rem 0;
    border-block: 1px solid rgba(255,255,255,.12);
}
.g-price b {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 6vw, 2.85rem);
    line-height: 1;
    letter-spacing: -1px;
    background: linear-gradient(120deg, #FFFFFF, var(--color-mint) 55%, var(--gold-bright));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.g-price .cur { font-size: .95rem; font-weight: 700; color: var(--gold-bright); }
.g-price .only { font-size: .78rem; color: var(--g-muted); margin-inline-start: auto; }

.g-lines { display: grid; gap: .8rem; margin-top: -.2rem; }
.g-line { display: flex; gap: .75rem; align-items: flex-start; }
.g-line-body { min-width: 0; }
.g-line-t {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: var(--g-ink);
    line-height: 1.5;
}
.g-line-t .gift {
    display: inline-block;
    margin-inline-start: .4rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .6px;
    color: #2A1A05;
    background: linear-gradient(120deg, var(--gold-bright), #F7E4B0);
    vertical-align: middle;
}
.g-line-d {
    display: block;
    margin-top: .18rem;
    font-size: .84rem;
    font-weight: 300;
    line-height: 1.72;
    color: var(--g-muted);
}
.g-offer .g-btn { margin-top: auto; }
.g-offer-fine {
    font-size: .74rem;
    color: var(--g-muted);
    text-align: center;
    margin-top: -.4rem;
}

/* --------------------------------------------------------------------------
   Doctors
   -------------------------------------------------------------------------- */
.g-doc { display: flex; flex-direction: column; height: 100%; }
.g-doc .g-media {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    /* Doctor photos are portrait originals (2:3) — a landscape card crop was
       chopping most of the body off. Tall card, close to the source ratio. */
    aspect-ratio: 3 / 4;
    box-shadow: none;
}
/* Portraits arrive on whatever backdrop the photographer used; a teal scrim
   at the foot of the frame melts any of them into the card below. */
.g-doc .g-media--filled::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(4, 33, 31, .92) 0%, rgba(4, 33, 31, .45) 45%, transparent 100%);
}
.g-doc-body {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: clamp(1.2rem, 2.8vw, 1.7rem);
    flex: 1;
}
.g-doc h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.12rem, 2.4vw, 1.35rem);
    color: var(--g-ink);
    line-height: 1.4;
    margin: 0;
}
.g-doc-role {
    font-size: .84rem;
    font-weight: 700;
    color: var(--color-mint);
    line-height: 1.6;
}
.g-doc-lead {
    font-size: .86rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--g-body);
}
.g-doc-years {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    align-self: flex-start;
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--gold-bright);
    background: rgba(233, 196, 106, .1);
    border: 1px solid rgba(233, 196, 106, .28);
}
.g-doc .g-chips { margin-top: auto; padding-top: .3rem; }

/* Full profile row on the team page */
.g-profile { padding: clamp(1.4rem, 3.4vw, 2.4rem); }
.g-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.3rem, 3.4vw, 2.6rem);
    align-items: start;
}
@media (min-width: 780px) { .g-profile-grid { grid-template-columns: 340px minmax(0, 1fr); } }
@media (min-width: 780px) { .g-profile--flip .g-profile-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (min-width: 780px) { .g-profile--flip .g-profile-media { order: 2; } }
.g-profile-media { position: sticky; top: 110px; }
@media (max-width: 779px) { .g-profile-media { position: static; } }
.g-profile h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 3.4vw, 2rem);
    color: var(--g-ink);
    line-height: 1.35;
    margin: .5rem 0 .3rem;
}
.g-profile-bio {
    font-size: .98rem;
    font-weight: 300;
    line-height: 1.95;
    color: var(--g-body);
    margin: .9rem 0 1.2rem;
    max-width: 66ch;
}
.g-cols2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem .5rem; }
@media (min-width: 520px) { .g-cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   Journey steps
   -------------------------------------------------------------------------- */
.g-step { padding: clamp(1.25rem, 3vw, 1.85rem); height: 100%; }
.g-step-n {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    line-height: 1;
    letter-spacing: -1px;
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(95, 201, 186, .55);
    margin-bottom: .8rem;
}
.g-step h3 {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 2.2vw, 1.16rem);
    color: var(--g-ink);
    margin-bottom: .5rem;
    line-height: 1.45;
}
.g-step p {
    font-size: .89rem;
    font-weight: 300;
    line-height: 1.82;
    color: var(--g-body);
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */
.g-review {
    display: flex;
    flex-direction: column;
    gap: .95rem;
    padding: clamp(1.3rem, 3vw, 1.9rem);
    height: 100%;
}
.g-quote { width: 30px; height: 30px; color: rgba(233, 196, 106, .45); }
.g-stars { display: flex; gap: .18rem; color: var(--gold-bright); }
.g-stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.g-review p {
    font-size: .93rem;
    font-weight: 300;
    line-height: 1.92;
    color: var(--g-body);
    margin: 0;
}
.g-review footer {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.g-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: .92rem;
    color: #04211F;
    background: linear-gradient(140deg, var(--color-mint), var(--gold-bright));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.g-review cite {
    display: block;
    font-style: normal;
    font-size: .92rem;
    font-weight: 700;
    color: var(--g-ink);
    line-height: 1.4;
}
.g-review small { display: block; font-size: .78rem; color: var(--g-muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.g-faq { display: grid; gap: .7rem; max-width: 880px; margin-inline: auto; }
.g-faq details {
    border-radius: var(--g-r-sm);
    overflow: hidden;
    transition: border-color .4s ease, background .4s ease;
}
.g-faq summary {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.05rem clamp(1rem, 2.5vw, 1.5rem);
    cursor: pointer;
    list-style: none;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--g-ink);
}
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after {
    content: '';
    flex: none;
    width: 11px;
    height: 11px;
    margin-inline-start: auto;
    border-inline-end: 2px solid var(--color-mint);
    border-block-end: 2px solid var(--color-mint);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .4s var(--g-ease);
}
.g-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.g-faq details[open] { border-color: rgba(95, 201, 186, .34); }
.g-faq p {
    padding: 0 clamp(1rem, 2.5vw, 1.5rem) 1.3rem;
    font-size: .92rem;
    font-weight: 300;
    line-height: 1.92;
    color: var(--g-body);
    max-width: 72ch;
}

/* --------------------------------------------------------------------------
   Contact channels
   -------------------------------------------------------------------------- */
.g-ch {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: clamp(1.2rem, 2.8vw, 1.7rem);
    height: 100%;
    color: inherit;
}
.g-ch-label { font-size: .96rem; font-weight: 700; color: var(--g-ink); line-height: 1.5; }
.g-ch-value { font-size: .87rem; color: var(--g-body); line-height: 1.65; word-break: break-word; }
.g-ch .g-badge { margin-bottom: .3rem; }

.g-map {
    width: 100%;
    height: clamp(300px, 46vh, 460px);
    border: 0;
    display: block;
    filter: saturate(.86) contrast(1.04);
}

/* A tile whose content needs the full row (opening hours, long addresses) */
.g-ch--wide { grid-column: 1 / -1; }
@media (min-width: 940px) { .g-ch--wide { grid-column: auto; } }

.g-hours { display: grid; gap: .55rem; width: 100%; }
.g-hours li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .6rem .85rem;
    border-radius: 11px;
    font-size: .85rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
}
.g-hours b { color: var(--g-ink); font-weight: 700; min-width: 0; }
/* the time is the fixed half — let the day label wrap instead */
.g-hours span {
    color: var(--color-mint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: none;
}

/* --------------------------------------------------------------------------
   Long-form prose — legal pages, policies
   -------------------------------------------------------------------------- */
.g-prose {
    max-width: 74ch;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem);
}
.g-prose > * + * { margin-top: 1.15rem; }
.g-prose h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    line-height: 1.45;
    color: var(--g-ink);
    margin-top: 2.6rem;
    padding-top: 1.7rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.g-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.g-prose h3 {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    color: var(--color-mint);
    margin-top: 1.8rem;
}
.g-prose p,
.g-prose li {
    font-size: .97rem;
    font-weight: 300;
    line-height: 1.95;
    color: var(--g-body);
}
.g-prose ul { display: grid; gap: .6rem; padding-inline-start: 0; }
.g-prose ul li {
    position: relative;
    padding-inline-start: 1.5rem;
}
.g-prose ul li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: .82em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 8px rgba(233, 196, 106, .6);
}
.g-prose a {
    color: var(--color-mint);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(95, 201, 186, .45);
    transition: color .3s ease, text-decoration-color .3s ease;
}
.g-prose a:hover { color: var(--gold-bright); text-decoration-color: var(--gold-bright); }
.g-prose strong { color: var(--g-ink); font-weight: 700; }

.g-updated {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .95rem;
    border-radius: 999px;
    font-size: .78rem;
    color: var(--g-muted);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
}

/* Jump list at the top of a long document */
.g-toc { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.g-toc a {
    padding: .38rem .9rem;
    border-radius: 999px;
    font-size: .8rem;
    color: #CDE7E1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--g-ease);
}
.g-toc a:hover {
    color: var(--hero-bg);
    background: var(--color-mint);
    border-color: var(--color-mint);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.g-404-code {
    font-family: 'Anton', var(--font-heading), sans-serif;
    font-size: clamp(6rem, 26vw, 15rem);
    line-height: .85;
    letter-spacing: .02em;
    margin-bottom: .4rem;
    background:
        radial-gradient(circle 30vw at 50% 40%, rgba(214, 247, 240, .95), rgba(214, 247, 240, 0) 55%),
        linear-gradient(110deg, #0c3b36 0%, var(--color-primary) 28%, var(--color-mint) 50%, var(--color-primary) 72%, #0c3b36 100%);
    background-size: 100% 100%, 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: wmSheen 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .g-404-code { animation: none; }
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.g-cta {
    padding: clamp(2.2rem, 6vw, 4rem) clamp(1.3rem, 5vw, 3.5rem);
    text-align: center;
    border-radius: var(--g-r-lg);
    background: var(--g-fill-2);
}
.g-cta::before {
    background:
        radial-gradient(70% 100% at 50% 0%, rgba(95, 201, 186, .26), transparent 62%),
        radial-gradient(60% 90% at 50% 100%, rgba(233, 196, 106, .18), transparent 62%);
}
.g-cta .g-title { font-size: clamp(1.6rem, 4.4vw, 2.7rem); }

/* --------------------------------------------------------------------------
   Instagram reels — show only the video, crop out the IG embed chrome.
   Same construction as the REFIT reels band, re-skinned to ONE Center's teal.
   -------------------------------------------------------------------------- */
.g-reels {
    position: relative;
    isolation: isolate;          /* keeps the blobs' screen-blend off the page behind */
    overflow: hidden;
    padding: clamp(3.4rem, 8vw, 6.5rem) var(--g-pad);
    scroll-margin-top: 96px;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(0, 120, 108, .42), transparent 60%),
        radial-gradient(90% 70% at 50% 110%, rgba(0, 60, 60, .55), transparent 62%),
        linear-gradient(168deg, #052926 0%, #04211F 55%, #021513 100%);
}

/* --- animated backdrop layers --- */
.g-rb { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.g-rb > span { position: absolute; display: block; }

.g-rb-blob { border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; will-change: transform; }
.g-rb-blob.b1 {
    width: 56vw; height: 56vw; top: -20%; inset-inline-start: -16%;
    background: radial-gradient(circle, rgba(0, 144, 144, .78), transparent 70%);
    animation: gRbDriftA 22s ease-in-out infinite;
}
.g-rb-blob.b2 {
    width: 52vw; height: 52vw; bottom: -22%; inset-inline-end: -16%;
    background: radial-gradient(circle, rgba(95, 201, 186, .58), transparent 70%);
    animation: gRbDriftB 28s ease-in-out infinite;
}
/* gold stays small and tight — a warm rim light. Spread wide under
   mix-blend screen it turns the teal muddy brown. */
.g-rb-blob.b3 {
    width: 20vw; height: 20vw; top: -6%; inset-inline-start: 62%;
    filter: blur(64px);
    background: radial-gradient(circle, rgba(233, 196, 106, .42), transparent 66%);
    animation: gRbDriftC 34s ease-in-out infinite;
}
@keyframes gRbDriftA { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(9vw, 6vw, 0) scale(1.18); } }
@keyframes gRbDriftB { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-8vw, -6vw, 0) scale(1.14); } }
@keyframes gRbDriftC { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-14vw, 4vw, 0) scale(1.25); } }

/* drifting dot mesh — texture that still reads in the gaps between tiles */
.g-rb-mesh { inset: 0; overflow: hidden; }
.g-rb-mesh i {
    position: absolute;
    inset: -80px;
    background-image: radial-gradient(rgba(143, 224, 210, .5) 1.2px, transparent 1.3px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 0%, transparent 78%);
    mask-image: radial-gradient(120% 90% at 50% 40%, #000 0%, transparent 78%);
    opacity: .45;
    animation: gRbMesh 26s linear infinite;
    will-change: transform;
}
@keyframes gRbMesh { to { transform: translate3d(34px, 34px, 0); } }

/* light rails along the top and bottom edges of the band */
.g-reels::before,
.g-reels::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(95, 201, 186, .55) 18%, rgba(233, 196, 106, .8) 50%, rgba(0, 144, 144, .55) 82%, transparent);
    background-size: 200% 100%;
    animation: gRbRail 9s ease-in-out infinite;
}
.g-reels::before { top: 0; }
.g-reels::after  { bottom: 0; animation-direction: reverse; }
@keyframes gRbRail {
    0%, 100% { background-position: 130% 0; }
    50%      { background-position: -30% 0; }
}

/* slow diagonal light sweep */
.g-rb-sweep {
    top: -60%; bottom: -60%; width: 42%; inset-inline-start: -50%;
    background: linear-gradient(90deg, transparent, rgba(214, 247, 240, .1) 45%, rgba(255,255,255,.05) 55%, transparent);
    transform: rotate(14deg);
    filter: blur(14px);
    animation: gRbSweep 11s ease-in-out infinite;
    will-change: transform;
}
@keyframes gRbSweep {
    0%        { transform: translate3d(0, 0, 0) rotate(14deg); }
    55%, 100% { transform: translate3d(280%, 0, 0) rotate(14deg); }
}

.g-rb-grain {
    inset: 0;
    opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: gRbGrain .7s steps(1) infinite;
}
@keyframes gRbGrain {
    0%  { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(-3%, 2%, 0); }
    50% { transform: translate3d(2%, -3%, 0); }
    75% { transform: translate3d(-2%, -1%, 0); }
}

.g-reels .g-shell { position: relative; z-index: 1; }

/* flex, not grid, so a short final row centres instead of hugging the start */
.g-reel-grid {
    --reel-gap: clamp(8px, .9vw, 14px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--reel-gap);
    max-width: 1320px;
    margin-inline: auto;
}
.g-reel {
    position: relative;
    flex: 0 1 calc((100% - 4 * var(--reel-gap)) / 5);   /* 5 across */
    min-width: 0;
    max-width: 268px;                                   /* keeps a lone reel sane */
    aspect-ratio: 9 / 16;
    overflow: hidden;            /* crops the IG header, action bar and side bars */
    border-radius: 18px;
    background: #021513;
    /* negative delay desyncs each tile so a row shimmers instead of pulsing together */
    animation: gReelGlow 4.2s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -.42s);
    transition: transform .45s var(--g-ease), box-shadow .45s ease;
}
@keyframes gReelGlow {
    0%, 100% { box-shadow: 0 0 14px rgba(0, 144, 144, .45), 0 0 30px rgba(95, 201, 186, .2); }
    50%      { box-shadow: 0 0 26px rgba(0, 144, 144, .8),  0 0 54px rgba(95, 201, 186, .4); }
}

/* rotating conic ring — falls back to a static gradient ring without @property */
@property --g-reel-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.g-reel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from var(--g-reel-angle),
        rgba(0, 144, 144, .85), rgba(95, 201, 186, .9),
        rgba(233, 196, 106, .95), rgba(0, 144, 144, .85));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    animation: gReelRing 6s linear infinite;
    animation-delay: calc(var(--i, 0) * -.6s);
}
@keyframes gReelRing { to { --g-reel-angle: 360deg; } }

.g-reel:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 30px rgba(233, 196, 106, .5), 0 0 64px rgba(95, 201, 186, .45);
    animation-play-state: paused;
}

/* Scale the embed wider than its box so the pillarboxed 9:16 video fills the
   width, then push the profile header above the crop and the action bar below
   it. Those two offsets are fixed px in Instagram's own layout. */
.g-reel iframe {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 0;
    width: 143%;
    top: -56px;
    height: calc(100% + 56px + 360px);
}

.g-reels .g-actions { margin-top: clamp(1.6rem, 4vw, 2.6rem); }

@media (max-width: 1180px) { .g-reel { flex-basis: calc((100% - 3 * var(--reel-gap)) / 4); } }
@media (max-width: 900px)  { .g-reel { flex-basis: calc((100% - 2 * var(--reel-gap)) / 3); } }
@media (max-width: 600px)  {
    .g-reel { flex-basis: calc((100% - var(--reel-gap)) / 2); max-width: none; }
    .g-rb-mesh i { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
    .g-reel, .g-reel::after,
    .g-reels::before, .g-reels::after,
    .g-rb-blob, .g-rb-mesh i, .g-rb-sweep, .g-rb-grain { animation: none !important; }
    .g-reel { box-shadow: 0 0 18px rgba(0, 144, 144, .45); }
    .g-reel:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.g-rise {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s ease, transform .9s var(--g-ease);
    transition-delay: calc(var(--d, 0) * 70ms);
}
.g-rise.is-in { opacity: 1; transform: none; }

/* Directional variants — the two halves of a split section counter-move
   toward each other instead of both drifting up in lockstep. */
.g-rise--start { transform: translate3d(-46px, 12px, 0); }
.g-rise--end   { transform: translate3d(46px, 12px, 0); }
[dir="rtl"] .g-rise--start { transform: translate3d(46px, 12px, 0); }
[dir="rtl"] .g-rise--end   { transform: translate3d(-46px, 12px, 0); }
.g-rise--zoom  { transform: scale(.94) translateY(24px); }
.g-rise--start.is-in, .g-rise--end.is-in, .g-rise--zoom.is-in { transform: none; }

/* --------------------------------------------------------------------------
   Word-by-word headline reveal. JS wraps every word of a .g-title in .g-w,
   numbering them with --wi; they lift and un-blur in sequence.
   -------------------------------------------------------------------------- */
.g-w {
    display: inline-block;
    opacity: 0;
    transform: translateY(.44em);
    filter: blur(8px);
    transition: opacity .62s ease, transform .78s var(--g-ease), filter .62s ease;
    transition-delay: calc(var(--wi, 0) * 52ms);
    will-change: transform, opacity, filter;
}
.g-title.words-in .g-w { opacity: 1; transform: none; filter: blur(0); }
/* No JS, no split — never leave a headline invisible */
.g-title:not([data-split]) .g-w { opacity: 1; transform: none; filter: none; }

/* --------------------------------------------------------------------------
   Scroll progress rail — sits above the fixed header
   -------------------------------------------------------------------------- */
.g-progress {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 1200;
    pointer-events: none;
    background: rgba(255,255,255,.05);
}
.g-progress span {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(var(--p, 0));
    transform-origin: left center;
    background: linear-gradient(90deg, var(--color-primary), var(--color-mint) 45%, var(--gold-bright));
    box-shadow: 0 0 12px rgba(95, 201, 186, .7);
}
[dir="rtl"] .g-progress span { transform-origin: right center; }

/* --------------------------------------------------------------------------
   Hero scroll cue
   -------------------------------------------------------------------------- */
.g-scrollcue {
    position: absolute;
    bottom: clamp(26px, 4vh, 44px);
    inset-inline-start: clamp(18px, 4vw, 54px);
    z-index: 11;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(233, 250, 245, .72);
    -webkit-tap-highlight-color: transparent;
    transition: color .35s ease;
}
.g-scrollcue:hover { color: var(--gold-bright); }
.g-scrollcue i {
    position: relative;
    display: block;
    width: 1px;
    height: 42px;
    overflow: hidden;
    background: rgba(255,255,255,.22);
}
.g-scrollcue i::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 40%;
    background: linear-gradient(180deg, transparent, var(--gold-bright));
    animation: gCue 2.1s cubic-bezier(.7, 0, .3, 1) infinite;
}
@keyframes gCue {
    0%       { transform: translateY(-100%); }
    60%, 100% { transform: translateY(250%); }
}
@media (max-width: 640px) { .g-scrollcue span { display: none; } }

/* --------------------------------------------------------------------------
   Journey steps — an animated rail threads the four cards together
   -------------------------------------------------------------------------- */
.g-steps { position: relative; }
@media (min-width: 1040px) {
    .g-steps::before {
        content: '';
        position: absolute;
        top: 46px;
        inset-inline: 8%;
        height: 2px;
        z-index: -1;
        background: linear-gradient(90deg, transparent, rgba(95, 201, 186, .5) 12%, rgba(233, 196, 106, .55) 50%, rgba(95, 201, 186, .5) 88%, transparent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 1.5s var(--g-ease) .25s;
    }
    [dir="rtl"] .g-steps::before { transform-origin: right center; }
    .g-steps.is-in::before { transform: scaleX(1); }
}
.g-step-n {
    transition: color .5s ease, -webkit-text-stroke-color .5s ease;
}
.g-step:hover .g-step-n {
    color: rgba(233, 196, 106, .16);
    -webkit-text-stroke-color: var(--gold-bright);
}

/* --------------------------------------------------------------------------
   Counters
   -------------------------------------------------------------------------- */
.g-num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Overrides — retire the old light "oc-" sections so every page is one canvas
   -------------------------------------------------------------------------- */
.oc-section, .oc-about, .oc-contact { background: transparent; }
.page-hero { background: transparent; }

/* Slider sits flush under the fixed header */
.hero-slider { height: 100svh; }

/* The Ken Burns scale(1.08) makes each slide image wider than its frame. The
   section clips it visually, but the extra width still counted toward the
   document's scroll width — which in RTL let the page scroll sideways by
   ~27px and stretched every 100%-wide fixed bar to match. Clip per slide, and
   clip the root as a backstop (clip, not hidden: it creates no scrollport). */
.hero-slider .slide { overflow: hidden; }
html { overflow-x: clip; }

/* --------------------------------------------------------------------------
   Mobile polish
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    :root { --g-blur: blur(18px) saturate(155%); }
    .g-sec { scroll-margin-top: 78px; }
    .g-actions .g-btn { flex: 1 1 100%; }
    .g-hero { padding-top: clamp(7.5rem, 22vh, 9.5rem); }
}

/* Two-up tiles on a phone need to give the words their space back */
@media (max-width: 560px) {
    .g-grid--tiles > .g-card,
    .g-grid--tiles > .g-ch,
    .g-grid--tiles > .g-step { padding: 1.05rem .95rem; gap: .7rem; }
    .g-grid--tiles .g-card-top { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .g-grid--tiles .g-card h3,
    .g-grid--tiles .g-ch-label { font-size: .96rem; line-height: 1.5; }
    .g-grid--tiles .g-note,
    .g-grid--tiles .g-ch-value,
    .g-grid--tiles .g-step p { font-size: .83rem; line-height: 1.72; }
    .g-grid--tiles .g-badge { width: 38px; height: 38px; border-radius: 12px; }
    .g-grid--tiles .g-badge .g-ico { width: 18px; height: 18px; }
    .g-grid--duo .g-stat { padding: .95rem .6rem; }
}

/* Backdrop-filter is expensive on long lists; keep panels readable without it */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass, .g-btn--ghost, .g-eyebrow { background: rgba(9, 46, 43, .88); }
}

@media (prefers-reduced-motion: reduce) {
    .g-media::after,
    .g-media .g-ico,
    .g-btn--wa,
    .g-scrollcue i::after,
    .g-title .hl { animation: none !important; }
    .g-rise { opacity: 1; transform: none; transition: none; }
    .g-w { opacity: 1; transform: none; filter: none; transition: none; }
    .g-steps::before { transform: scaleX(1); transition: none; }
    .g-lift, .g-badge, .g-media img, .glass::before { transition: none; }
}