/* =====================================================================
   FHA — the CONSULTATION-card CTA  (round 28)
   ---------------------------------------------------------------------
   Replaces the two flat navy buttons (SCHEDULE APPOINTMENT / PURCHASE
   GIFT CARD, plus INTRODUCE YOURSELF on 33) with a live-type rebuild of
   his own consultation card, so the primary CTA finally speaks the same
   language as everything else on the site.

   GEOMETRY IS NOT EYEBALLED.  Every number below is derived from the
   measured proportions of images/s2/consult-cta.png (1800x300, 6:1):

       card aspect ................ 6 : 1
       caps ink height ............ 28.7% of H      top of ink 14.3% of H
       caps right inset ............ 5.6% of W
       etch ink height ............ 47.3% of H      bottom 2.3% of H
       etch left ................... 0.8% of W

   and from the measured ink metrics of his fonts at 200px:

       Playfair Display 700 caps ... ink height .730 em, ascent .720 em
       Playfair Display 500 caps ... ink height .705 em
       Burgues Script .............. ascent .695 em, descender .205 em
                                     ("purchase" descends, "schedule" does not)

   The anchor carries font-size == its own height, so every child is a
   pure em fraction of the card and the whole thing scales exactly.

       H = 1em, W = 6em
       .cg-big   .393em   ->  .730 x .393 = .287 H   (caps ink)   OK
       .cg-the   .244em   ->  .62 of .big, the ratio on the master button
       caps baseline  .426em from the top   (.143 ink top + .283 ascent)
       .cg-etch  .681em   ->  .695 x .681 = .473 H   (etch ascent)  OK

   CHROME.  No new animation loop: the caps ride the site's existing
   --shx/--shy sheen bus (the same one behind the metal monogram and the
   mobile thumb), so the reflection drifts with the pointer and settles
   when nothing moves.  js/cta-glass.js keeps that bus alive on the pages
   whose driver is mobile-only, and pauses it off-screen.

   HOVER.  Background goes to the pages 22/23 aqua glass and the chrome
   goes BRIGHTER, not darker.  Measured: a navy wash lands at 2.52:1
   against that glass, the bright ramp at 4.78:1.  The floor for text
   this size is 3:1.
   ===================================================================== */

@font-face {
    font-family: 'Burgues Script';
    src: url('../fonts/BurguesScript.woff2?v=2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------- shell */
.cg {
    position: relative;
    display: block;
    box-sizing: border-box;
    aspect-ratio: 6 / 1;
    border-radius: 2px;
    overflow: hidden;
    text-decoration: none;
    background: #032F48;
    border: 1px solid rgba(161, 231, 232, .38);
    box-shadow: inset 0 1px 0 rgba(161, 231, 232, .20),
                0 4px 14px rgba(2, 24, 38, .28);
    -webkit-tap-highlight-color: transparent;
    transition: background-color .34s ease, background-image .34s ease,
                border-color .34s ease, box-shadow .34s ease;
}

/* the blanket `.action *` rule in style.css sets display/background/
   max-width/padding/font-size on every descendant — neutralise it for
   this component at full ancestor depth so nothing leaks in. */
.banner .banner-detail-container .details .action a.cg,
.banner .banner-detail-container .details .action button.cg,
#fhaMobile .ctaRow a.cg,
#fhaMobile .ctaRow button.cg {
    max-width: none;
    padding: 0;
    margin: 0 auto;
    border-radius: 2px;
    background-color: #032F48;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    text-align: left;
}

.banner .banner-detail-container .details .action a.cg > *,
.banner .banner-detail-container .details .action button.cg > *,
.banner .banner-detail-container .details .action a.cg > * > *,
.banner .banner-detail-container .details .action button.cg > * > * {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background-color: transparent;
    color: inherit;
    font-weight: inherit;
    transition: none;
}

/* ------------------------------------------------------------- the caps
   The wrapper carries .cg-big's size so the strut is predictable: with
   line-height 1 the Playfair baseline sits .915 em below the box top
   (measured), so top = .426 - .915 x .393 = .066 em puts the caps
   baseline exactly on his card's line. */
.cg .cg-caps,
.banner .banner-detail-container .details .action .cg .cg-caps {
    position: absolute;
    /* NB: these offsets are in the CAPS' own em (.393 of the card), and
       they are tuned against the rendered INK, not the glyph box. */
    right: .779em;              /* ink right inset = 5.6% of W, his card */
    top: .187em;                /* ink top          = 14.3% of H, his card */
    z-index: 3;
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: .393em;
    line-height: 1;
    white-space: nowrap;
}

.cg .cg-the,
.banner .banner-detail-container .details .action .cg .cg-the,
.cg .cg-big,
.banner .banner-detail-container .details .action .cg .cg-big {
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    line-height: 1;
}

.cg .cg-the,
.banner .banner-detail-container .details .action .cg .cg-the {
    font-weight: 500;
    font-size: .621em;          /* .244 em of the card */
    letter-spacing: .15em;
}

.cg .cg-big,
.banner .banner-detail-container .details .action .cg .cg-big {
    font-weight: 700;
    font-size: 1em;             /* .393 em of the card */
    letter-spacing: .02em;
    margin-left: .26em;
}

/* ---- CHROME: the ramp rides the site's --shx / --shy sheen bus ---- */
.cg .cg-the,
.banner .banner-detail-container .details .action .cg .cg-the,
.cg .cg-big,
.banner .banner-detail-container .details .action .cg .cg-big {
    background-image: linear-gradient(168deg,
        #FFFFFF 0%, #F0F8FA 13%, #C3D6DC 33%, #FFFFFF 50%,
        #B6CCD3 68%, #E6F2F4 86%, #FFFFFF 100%);
    background-size: 235% 235%;
    background-position: calc(50% + var(--shx, 0%)) calc(50% + var(--shy, 0%));
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 1px .5px rgba(2, 24, 38, .62));
    transition: filter .3s ease;
}

/* engines without background-clip:text must not render invisible text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .cg .cg-the,
    .cg .cg-big {
        background-image: none;
        -webkit-text-fill-color: #EDF6F7;
        color: #EDF6F7;
    }
}

/* ------------------------------------------------------------- the etch */
.cg .cg-etch,
.banner .banner-detail-container .details .action .cg .cg-etch {
    position: absolute;
    left: .34em;                /* clear of the card edge for Burgues' entry swash */
    /* with line-height 1 the Burgues baseline sits .165 em below the box
       bottom (measured), so bottom = .023 - .165 x .681 = -.089 em lands
       the baseline 2.3% of H off the card floor, as on his art. */
    bottom: -.19em;             /* ink bottom just off the card floor */
    z-index: 2;
    display: block;
    font-family: 'Burgues Script', 'Distant Stroke', cursive;
    font-weight: 400;
    font-size: .681em;          /* .695 ascent x .681 = .473 H, his card */
    line-height: 1;
    color: rgba(178, 200, 206, .55);
    pointer-events: none;
    transition: color .34s ease;
}

/* "purchase" descends below the baseline and "schedule" does not, so the
   gift-card etch is lifted by its own measured descender (.205 em of the
   etch's own size = .140 em of the card) instead of being clipped. */
.cg--gift .cg-etch,
.banner .banner-detail-container .details .action .cg--gift .cg-etch,
.banner .banner-detail-container .details .action .cg--gift .cg-etch,
#fhaMobile .ctaRow .cg--gift .cg-etch { bottom: .015em; }   /* + .205 em descender, so "purchase." clears the floor */

/* ------------------------------------------------------- hover / focus */
.cg:hover,
.cg:focus-visible {
    background-color: transparent;
    background-image: linear-gradient(92deg,
        rgba(235, 248, 249, .16), rgba(190, 230, 230, .24));
    -webkit-backdrop-filter: blur(10px) saturate(1.18);
    backdrop-filter: blur(10px) saturate(1.18);
    border-color: rgba(255, 255, 255, .30);
    box-shadow: 0 2px 8px rgba(2, 24, 38, .22);
}

.cg:hover .cg-etch,
.cg:focus-visible .cg-etch { color: rgba(238, 251, 251, .62); }

.cg:hover .cg-the,
.cg:hover .cg-big,
.cg:focus-visible .cg-the,
.cg:focus-visible .cg-big {
    background-image: linear-gradient(168deg,
        #FFFFFF 0%, #FBFEFE 18%, #DCECEF 42%, #FFFFFF 56%,
        #D2E5E9 76%, #FFFFFF 100%);
    filter: drop-shadow(0 1px 1.5px rgba(2, 44, 68, .55));
}

.cg:focus-visible {
    outline: 2px solid #A2E7E8;
    outline-offset: 2px;
}

.cg:active { box-shadow: inset 0 3px 9px rgba(0, 10, 18, .45); }

/* =====================================================================
   DESKTOP placement — same width the flat button occupied, so nothing
   above or beside it moves; font-size is exactly width / 6.
   ===================================================================== */
@media (min-width: 992px) {
    .banner .banner-detail-container .details .action a.cg.cg,
    .banner .banner-detail-container .details .action button.cg.cg {
        width: min(23.4vw, 408px);
        max-width: none;
        font-size: min(3.9vw, 68px);
    }

    /* short-viewport tier — his laptop runs ~830px of inner height and the
       s2 columns have no spare pixels; hold the card a touch smaller there */
    @media (max-height: 870px) {
        .banner .banner-detail-container .details .action a.cg.cg,
        .banner .banner-detail-container .details .action button.cg.cg {
            width: min(20.5vw, 356px);
            max-width: none;
            font-size: min(3.4167vw, 59.3px);
        }
    }
}

/* =====================================================================
   MOBILE — the fixed bar becomes a slider: gutter with the chevron trail
   on the right, chrome chevrons at the left of the panel where the
   accordion arrow sits on the standard glass slider buttons, and the
   panel drags right to commit (js/cta-glass.js).
   ===================================================================== */
@media (max-width: 991px) {
    /* r31 (his note): the bar shared neither edge with the QUESTIONS?
       ANSWERED. card above it — that card is left-anchored at 30px while
       the bar was viewport-centred at a fixed 330px, so at 414px and up
       they drifted apart and the bar read as off-centre.  Both now start
       at 30px; the bar runs a little wider than the card on the right and
       still sits inside the sticky footer's 14px insets. */
    #fhaMobile .ctaRow {
        height: auto;
        left: 30px;
        right: auto;
        transform: none;
        width: min(calc(100vw - 60px), 420px);
    }

    #fhaMobile .cgSlot { container-type: inline-size; }

    #fhaMobile .cgSlot {
        position: relative;
        width: 100%;
        border-radius: 2px;
        overflow: hidden;
    }

    #fhaMobile .cgSlot .gutR {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 9.3%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(90deg, rgba(2, 26, 40, .30), rgba(2, 26, 40, .17));
        box-shadow: inset 2px 0 5px rgba(0, 10, 18, .45);
        border-radius: 0 2px 2px 0;
        z-index: 1;
    }

    #fhaMobile .cgSlot .gutR svg {
        display: block;
        width: 18px;
        height: 16px;
        overflow: visible;
    }

    #fhaMobile .cgSlot .gutR path {
        fill: none;
        stroke: #DCF1F1;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 1px 1px rgba(2, 44, 68, .4));
    }

    #fhaMobile .cgSlot .gutR path:nth-child(1) { opacity: .30; }
    #fhaMobile .cgSlot .gutR path:nth-child(2) { opacity: .55; }
    #fhaMobile .cgSlot .gutR path:nth-child(3) { opacity: .85; }

    #fhaMobile .cgSlot.dragging .gutR path { stroke: #A2E7E8; }

    /* the panel */
    /* THE alignment bug he kept seeing: the shared neutralise rule gives the
       card `margin: 0 auto`, which is right on desktop (it centres the card in
       its column) and wrong here — it centred the 302px panel inside the 333px
       slot, splitting the 31px gutter into 15.5px on EACH side.  That is why
       the bar sat 15px right of the card above it and why the gutter looked
       half-width.  On mobile the panel is flush left; the gutter is all on
       the right, where the swipe goes. */
    #fhaMobile .ctaRow a.cg,
    #fhaMobile .ctaRow button.cg {
        margin: 0;
        position: relative;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        user-select: none;
        width: 90.7%;
        font-size: calc((min(330px, 86vw) * .907) / 6);
        font-size: calc(100cqw * .907 / 6);
        z-index: 2;
        touch-action: pan-y;
        cursor: grab;
        transition: transform .42s cubic-bezier(.25, 1.1, .4, 1),
                    background-color .34s ease, background-image .34s ease,
                    border-color .34s ease, box-shadow .34s ease;
    }

    #fhaMobile .cgSlot.dragging a.cg,
    #fhaMobile .cgSlot.dragging button.cg { cursor: grabbing; }

    #fhaMobile .ctaRow .cg.nosnap { transition: none; }

    /* chrome chevrons where the accordion arrow lives on the s2 sliders */
    /* the chevrons move UP out of vertical centre, the same fix the FAQ
       master's arrow needed in r24d: the script owns the lower-left corner,
       so anything centred there is competing with it for the same pixels.
       Level with the caps line, the etch can run as far left as the card. */
    #fhaMobile .cg .cg-arw {
        position: absolute;
        left: 1.09%;
        top: 4%;
        width: 12%;
        height: 38%;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    #fhaMobile .cg .cg-arw svg {
        display: block;
        width: .30em;
        height: .27em;
        overflow: visible;
    }

    #fhaMobile .cg .cg-arw path {
        fill: none;
        stroke: url(#cgChrome);
        stroke-width: 2.1;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 1px 1px rgba(2, 44, 68, .5));
    }

    #fhaMobile .cg .cg-arw path:nth-child(1) { opacity: .48; }
    #fhaMobile .cg .cg-arw path:nth-child(2) { opacity: .74; }

    /* the etch starts clear of the chevrons on the narrow card */
    /* clear of the chrome chevrons: Burgues' entry stroke on p/s reaches
       well left of the glyph origin, so the box starts past the arrow zone */
    #fhaMobile .cg .cg-etch { left: 1.19em; }
    #fhaMobile .cg--gift .cg-etch,
.banner .banner-detail-container .details .action .cg--gift .cg-etch,
#fhaMobile .ctaRow .cg--gift .cg-etch { bottom: .015em; }   /* + .205 em descender, so "purchase." clears the floor */
}

/* the desktop card carries no chevrons */
@media (min-width: 992px) {
    .cg .cg-arw { display: none; }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cg,
    #fhaMobile .ctaRow a.cg,
    #fhaMobile .ctaRow button.cg { transition: none; }
}

/* ------------------------------------------------------- high contrast */
html.hc .cg {
    background-color: #022C44;
    border-color: rgba(162, 231, 232, .5);
}

html.hc .cg .cg-the,
html.hc .cg .cg-big {
    background-image: none;
    -webkit-text-fill-color: #F6FCFC;
    color: #F6FCFC;
}

html.hc .cg .cg-etch { color: rgba(242, 251, 251, .78); }

/* =====================================================================
   Legacy override tail.  `.banner .banner-detail-container .action *`
   (style.css) forces display:block and text-transform:uppercase on every
   descendant; both are restated here at full ancestor depth so the caps
   sit on one line and the script keeps its own case.
   ===================================================================== */
.banner .banner-detail-container .details .action .cg .cg-the,
.banner .banner-detail-container .details .action .cg .cg-big,
#fhaMobile .ctaRow .cg .cg-the,
#fhaMobile .ctaRow .cg .cg-big {
    display: inline;
    text-transform: uppercase;
}

.banner .banner-detail-container .details .action .cg .cg-etch,
#fhaMobile .ctaRow .cg .cg-etch {
    display: block;
    text-transform: none;
}

.banner .banner-detail-container .details .action .cg .cg-caps,
#fhaMobile .ctaRow .cg .cg-caps {
    display: block;
    text-transform: none;
}

.banner .banner-detail-container .details .action .cg .cg-arw,
#fhaMobile .ctaRow .cg .cg-arw { display: none; }

@media (max-width: 991px) {
    #fhaMobile .ctaRow .cg .cg-arw { display: flex; }
}

/* the two absolutely-positioned children must shrink-wrap; the legacy
   cascade leaves them stretched to the card without an explicit sizing */
.cg .cg-caps,
.cg .cg-etch,
.banner .banner-detail-container .details .action .cg .cg-caps,
.banner .banner-detail-container .details .action .cg .cg-etch,
#fhaMobile .ctaRow .cg .cg-caps,
#fhaMobile .ctaRow .cg .cg-etch {
    width: max-content;
    max-width: none;
}

/* =====================================================================
   Mobile legacy override tail.  #fhaMobile .cta (mobile-home.css) and the
   per-section CTA rules set font-size and letter-spacing on the bar and
   its descendants; every value the card depends on is restated here at
   #fhaMobile depth so the two variants render identically on every page.
   ===================================================================== */
#fhaMobile .ctaRow .cg .cg-caps {
    font-size: .393em;
    letter-spacing: normal;
    line-height: 1;
}

#fhaMobile .ctaRow .cg .cg-the {
    font-size: .621em;
    letter-spacing: .15em;
    line-height: 1;
}

#fhaMobile .ctaRow .cg .cg-big {
    font-size: 1em;
    letter-spacing: .02em;
    line-height: 1;
}

#fhaMobile .ctaRow .cg .cg-etch {
    font-size: .681em;
    letter-spacing: normal;
    line-height: 1;
}

/* the desktop card takes the same treatment against `.action *` */
.banner .banner-detail-container .details .action .cg .cg-caps { letter-spacing: normal; }
.banner .banner-detail-container .details .action .cg .cg-etch { letter-spacing: normal; }

#fhaMobile .ctaRow .cg .cg-big { margin-left: .26em; }

/* =====================================================================
   r33 — BURGUES HAIRLINES (his note: "barely visible at smaller sizes")
   ---------------------------------------------------------------------
   His instinct was right — the script needs more ink — but a duplicate
   shifted 1-2px right smears the THICK strokes sideways and reads as a
   printing misregistration; only the hairlines should gain.  Compared
   six approaches at the real rendered sizes (32px mobile / 42px master):
   an offset shadow ghosts, a paint-order stroke at .7px fattens the
   thicks, and a stroke in the same rgba double-composites into a dark
   rim.  What works is an OPAQUE ink set to exactly the colour the .55
   alpha was already compositing to, plus a .45px stroke in that same
   colour: the hairlines roughly double in weight, the thicks barely
   move, and nothing changes colour.
        over #056981 (master)  rgba(178,200,206,.55) -> rgb(100,157,171)
        over #032F48 (CTA)     rgba(178,200,206,.55) -> rgb( 99,131,146)
   A fixed px stroke is deliberate: it is proportionally strongest at
   the small sizes he flagged and vanishes at the large ones.
   ===================================================================== */
.cg .cg-etch,
.banner .banner-detail-container .details .action .cg .cg-etch,
#fhaMobile .ctaRow .cg .cg-etch {
    color: rgb(99, 131, 146);
    -webkit-text-stroke: .45px rgb(99, 131, 146);
}

.cg:hover .cg-etch,
.cg:focus-visible .cg-etch {
    color: rgba(238, 251, 251, .72);
    -webkit-text-stroke: .35px rgba(238, 251, 251, .72);
}

html.hc .cg .cg-etch {
    color: rgba(242, 251, 251, .88);
    -webkit-text-stroke: .45px rgba(242, 251, 251, .88);
}

/* =====================================================================
   r34 — page 33's mobile bar is a <button>, not an anchor (its CTA opens
   the Next Gen sheet rather than a booking widget), and section3.css
   resets it with `font: inherit` at (1,3,1):

     #fhaMobile.ngm .ctaRow button.cta { ... font: inherit; ... }

   That shorthand also resets FONT-SIZE, which on this component is the
   card's own height and therefore the em base for every child.  The card
   still measured a correct 302x50 at 6:1, but its font-size collapsed to
   16px, so the caps rendered at 6.3px and the etch at 10.9px — the right
   box with almost invisible type in it.

   Restated here at (1,4,1) so it outranks that reset.  The doubled .cg is
   deliberate: it is the cheapest way past a rule that is more specific
   than the component's own selector.
   ===================================================================== */
@media (max-width: 991px) {
    #fhaMobile .ctaRow .cgSlot a.cg.cg,
    #fhaMobile .ctaRow .cgSlot button.cg.cg {
        font-size: calc((min(330px, 86vw) * .907) / 6);
        font-size: calc(100cqw * .907 / 6);
        font-family: 'Playfair Display', serif;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
    }
}

/* =====================================================================
   r34 — his note on the mobile etch: "move schedule a little to the left,
   maybe increase size, and a little more brightness / shimmer."

   LEFT is per variant, not shared.  Burgues' entry stroke reaches a very
   different distance left of the glyph origin depending on the letter —
   measured at the rendered size, "s" sits ~3px left of its origin and "p"
   ~11px.  One shared inset therefore has to clear the WIDEST bearing,
   which is why "schedule" looked over-indented while "purchase" only just
   cleared the chevrons.  Each variant now gets the inset that lands its
   INK in the same place, ~31px in, just past the chevron zone (14-28px).

   SIZE goes .681 -> .72 em and the ink is lifted from the .55-alpha
   composite to the .72 one — the same colour relationship, one step up.

   SHIMMER is deliberately a whisper: a low-contrast ramp on the same
   --shx/--shy bus as the caps, so the script catches the light with them
   instead of introducing a second moving thing.
   ===================================================================== */
@media (max-width: 991px) {
    #fhaMobile .ctaRow .cg .cg-etch {
        font-size: .72em;
        color: rgb(130, 158, 169);
        /* r36 — the real cause of his "hollow bits".  The fill is a
           gradient and the stroke was a FIXED colour brighter than two of
           its four stops, so wherever a dark stop landed on a letter the
           rim out-shone the interior and the bowl read as a punched hole.
           paint-order could not fix that: it is a colour relationship,
           not a paint order.  The stroke is now set just BELOW the
           darkest stop, so the rim can never out-shine the fill — it can
           only ever add weight. */
        -webkit-text-stroke: .85px rgb(130, 158, 169);
        /* his note: "p and a have hollow spots".  CSS paints the text
           stroke OVER the fill by default, so on the bowls the solid rim
           read brighter than the gradient interior and the counters looked
           punched out.  paint-order puts the fill back on top: the stroke
           then only thickens the OUTER edge, which is all it was ever for. */
        paint-order: stroke fill;
        background-image: linear-gradient(168deg,
            rgb(152, 180, 191) 0%, rgb(132, 160, 171) 38%,
            rgb(160, 188, 198) 54%, rgb(136, 164, 176) 100%);
        background-size: 235% 235%;
        background-position: calc(50% + var(--shx, 0%)) calc(50% + var(--shy, 0%));
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
    }

    /* the ramp must not blank the text where background-clip:text is
       unsupported — the opaque colour above is the fallback, so only
       clear the fill where we know the clip works */
    @supports ((-webkit-background-clip: text) or (background-clip: text)) {
        #fhaMobile .ctaRow .cg .cg-etch {
            -webkit-text-fill-color: transparent;
        }
    }

    /* LEFT: every word's INK starts at 22px, whatever its entry stroke does
       (measured left-of-origin: schedule 4px, purchase 18px, about you 3px).
       BOTTOM: every word's INK ends 1.5px above the card floor, whatever its
       descender does (2px / 9px / 13px) — that is what was cutting the "y"
       off "you", which used the shared no-descender value. */
    #fhaMobile .ctaRow .cg--appt  .cg-etch { left: .717em; bottom: -.186em; }
    #fhaMobile .ctaRow .cg--gift  .cg-etch { left: 1.104em; bottom: .034em; }
    #fhaMobile .ctaRow .cg--intro .cg-etch { left: .690em; bottom: .090em; }
}

/* =====================================================================
   r35 — the same descender law on DESKTOP.  The shared `bottom` was
   derived for a word with no descender ("schedule"), so "purchase" sat a
   little low and "about you" had its y clipped by the card floor there
   too — the same fault his phone screenshot caught, just less obvious at
   the larger size.  Per variant, from the canvas ink metrics expressed in
   the etch's own em:  descent .055 / .248 / .359 em, baseline .255 em
   above a line-height:1 box bottom, target ink bottom .034 em (= 2.3% of
   the card height, his art's figure).
   ===================================================================== */
@media (min-width: 992px) {
    .banner .banner-detail-container .details .action .cg--appt  .cg-etch { bottom: -.194em; }
    .banner .banner-detail-container .details .action .cg--gift  .cg-etch { bottom: .027em; }
    .banner .banner-detail-container .details .action .cg--intro .cg-etch { bottom: .082em; }

    /* r36 — and the same per-variant LEFT law desktop had been missing.
       The shared .34em was derived for "schedule", whose ink starts 4px
       left of the origin at the reference size; "purchase" starts 18px
       left (the p's descender swash), so on the wide card its entry
       stroke was landing OUTSIDE the panel and being cut by the
       overflow:hidden.  Per variant, every word's ink now starts 3.31%
       of the card width in — the same inset the phone uses. */
    .banner .banner-detail-container .details .action .cg--appt  .cg-etch { left: .402em; }
    .banner .banner-detail-container .details .action .cg--gift  .cg-etch { left: .789em; }
    .banner .banner-detail-container .details .action .cg--intro .cg-etch { left: .375em; }

    /* and the fill-over-stroke fix, so no bowl reads hollow at any size */
    .cg .cg-etch,
    .banner .banner-detail-container .details .action .cg .cg-etch {
        paint-order: stroke fill;
    }
}

/* =====================================================================
   r35b — his call: drop the chevrons ON the card.  The gutter keeps its
   chevron trail (that is the swipe affordance and it lives outside the
   panel); the pair inside the panel was only ever echoing the s2 accordion
   arrow, and with the script in that corner they were two marks competing
   for one space.  Hidden rather than deleted from 20 files, so it is one
   line to bring them back.

   With the corner free, every etch moves left again — ink now starts 10px
   in on a 302px card, near his art's flush inset, instead of the 22px the
   chevrons were forcing.
   ===================================================================== */
@media (max-width: 991px) {
    #fhaMobile .ctaRow .cg .cg-arw,
    #fhaMobile .cg .cg-arw { display: none; }

    #fhaMobile .ctaRow .cg--appt  .cg-etch { left: .386em; }
    #fhaMobile .ctaRow .cg--gift  .cg-etch { left: .773em; }
    #fhaMobile .ctaRow .cg--intro .cg-etch { left: .359em; }
}

/* =====================================================================
   r37 — THE CTA TREATMENT
   ---------------------------------------------------------------------
   His notes, in order:

     "the shimmer of the logo and the shimmer of the words the appointment
      to be a little more prominent but not gimmicky"
     "schedule script should somehow be a little brighter or have some
      sort of additional shimmer effect"
     "when the cursor hovers over the button I would actually like the
      background to not be a dull lavender gray but some sort of
      beautiful aqua"
     "I like how there's a subtle gradient to the questions button, so I'm
      wondering if there can be some sort of soft gradient attached to the
      schedule the appointment CTA"

   The lavender-gray was real and diagnosable: the hover glass was a
   NEAR-WHITE tint — rgba(235,248,249,.16) — at 1.18 saturation over the
   teal container.  White over teal at low alpha desaturates to exactly
   the grey-lilac he described.  The fix is not more opacity, it is an
   actually-aqua tint and enough saturation to hold it.

   This also finally delivers the second half of his original r28 brief,
   which I under-built: "the aqua glass background that was used on pages
   22 and 23 sliders, and the chrome text could have a navy wash."
   ===================================================================== */

/* ---- 1. the field: a soft gradient in place of the flat navy --------- */
.cg,
.banner .banner-detail-container .details .action a.cg,
.banner .banner-detail-container .details .action button.cg,
#fhaMobile .ctaRow a.cg,
#fhaMobile .ctaRow button.cg {
    background-color: #032F48;
    background-image: linear-gradient(163deg,
        #0A4A67 0%, #063A55 34%, #032F48 58%, #022639 100%);
}

/* ---- 2. hover / focus / press: the aqua glass ------------------------ */
.cg:hover,
.cg:focus-visible,
.cg:active,
.banner .banner-detail-container .details .action a.cg:hover,
.banner .banner-detail-container .details .action a.cg:focus-visible,
.banner .banner-detail-container .details .action a.cg:active,
.banner .banner-detail-container .details .action button.cg:hover,
.banner .banner-detail-container .details .action button.cg:focus-visible,
.banner .banner-detail-container .details .action button.cg:active,
#fhaMobile .ctaRow a.cg:active,
#fhaMobile .ctaRow button.cg:active {
    background-color: rgba(23, 122, 138, .34);
    background-image: linear-gradient(92deg,
        rgba(150, 228, 231, .34), rgba(84, 196, 205, .46));
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    backdrop-filter: blur(10px) saturate(1.5);
    border-color: rgba(206, 244, 245, .55);
    box-shadow: 0 2px 10px rgba(2, 24, 38, .26);
}

/* the caps take a NAVY wash on the aqua — same seven-stop metal ramp as
   the chrome, rotated into the navy family so it still reads as polished
   metal rather than as flat dark type */
.cg:hover .cg-the,
.cg:hover .cg-big,
.cg:focus-visible .cg-the,
.cg:focus-visible .cg-big,
.cg:active .cg-the,
.cg:active .cg-big,
.banner .banner-detail-container .details .action .cg:hover .cg-the,
.banner .banner-detail-container .details .action .cg:hover .cg-big,
.banner .banner-detail-container .details .action .cg:active .cg-the,
.banner .banner-detail-container .details .action .cg:active .cg-big,
#fhaMobile .ctaRow .cg:active .cg-the,
#fhaMobile .ctaRow .cg:active .cg-big {
    background-image: linear-gradient(168deg,
        #1F5E7E 0%, #113E59 13%, #07293D 33%, #235C78 50%,
        #06253A 68%, #164B69 86%, #1F5E7E 100%);
    filter: drop-shadow(0 1px .5px rgba(236, 252, 252, .55));
}

/* ---- 3. the etch: brighter at rest, shimmering on hover -------------- */
/* DESKTOP was a flat rgb(99,131,146) — the dimmest thing on the card.  It
   now rides the same --shx/--shy sheen bus the caps do, one step up in
   value, with the stroke set below the darkest stop (the r36 law) so no
   bowl can read hollow. */
@media (min-width: 992px) {
    .cg .cg-etch,
    .banner .banner-detail-container .details .action .cg .cg-etch {
        color: rgb(124, 160, 176);
        -webkit-text-stroke: .45px rgb(124, 160, 176);
        paint-order: stroke fill;
        background-image: linear-gradient(168deg,
            rgb(148, 185, 200) 0%, rgb(126, 162, 178) 38%,
            rgb(158, 194, 209) 54%, rgb(130, 166, 182) 100%);
        background-size: 235% 235%;
        background-position: calc(50% + var(--shx, 0%)) calc(50% + var(--shy, 0%));
        background-repeat: no-repeat;
    }

    @supports ((-webkit-background-clip: text) or (background-clip: text)) {
        .cg .cg-etch,
        .banner .banner-detail-container .details .action .cg .cg-etch {
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}

/* on hover the script lifts to near-white and keeps a ramp, so it catches
   the light with the caps instead of going flat */
.cg:hover .cg-etch,
.cg:focus-visible .cg-etch,
.cg:active .cg-etch,
.banner .banner-detail-container .details .action .cg:hover .cg-etch,
.banner .banner-detail-container .details .action .cg:active .cg-etch,
#fhaMobile .ctaRow .cg:active .cg-etch {
    color: rgb(226, 245, 247);
    -webkit-text-stroke: .45px rgb(226, 245, 247);
    paint-order: stroke fill;
    background-image: linear-gradient(168deg,
        #FFFFFF 0%, #E9F8F9 34%, #FFFFFF 54%, #E4F5F7 100%);
    background-size: 235% 235%;
    background-position: calc(50% + var(--shx, 0%)) calc(50% + var(--shy, 0%));
    background-repeat: no-repeat;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .cg:hover .cg-etch,
    .cg:focus-visible .cg-etch,
    .cg:active .cg-etch,
    .banner .banner-detail-container .details .action .cg:hover .cg-etch,
    .banner .banner-detail-container .details .action .cg:active .cg-etch,
    #fhaMobile .ctaRow .cg:active .cg-etch {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* ---- 4. page 43: "purchase" a little right, a little larger ---------- */
/* His note.  The gift card is the one variant whose script has room to
   spare — 12.5px of clearance to the caps against 3.75px on the other
   two — so it can take the size without crowding anything. */
@media (max-width: 991px) {
    #fhaMobile .ctaRow .cg--gift .cg-etch {
        font-size: .762em;                 /* .72 -> .762, +5.8% */
        left: .795em;                      /* ink 10px -> 14px in */
        bottom: .058em;
    }
}

@media (min-width: 992px) {
    .banner .banner-detail-container .details .action .cg--gift .cg-etch {
        font-size: .721em;                 /* .681 -> .721, the same +5.8% */
        left: .800em;
        bottom: .048em;
    }
}

/* =====================================================================
   r37b — THE HOLLOW TAIL ON THE "p"  (his note: "still seeing the hollow
   part of the tail of the 'p'")
   ---------------------------------------------------------------------
   He was right and it was MY doing.  Diagnosed by rendering the glyph
   outline: the p's descender is a long tapering wedge that falls BELOW
   one device pixel in width for most of its length.

   The etch is painted as a gradient clipped to the text
   (`background-clip: text`), and that clip works off the glyph's own
   coverage mask.  Where the wedge is sub-pixel, coverage is near zero,
   so the gradient paints almost nothing — while `-webkit-text-stroke`
   is an opaque pen that traces BOTH edges at full strength.  Result: two
   bright rails with the card showing through between them.  A hollow
   tube.  The r36 stroke that closed the bowls opened this.

   Proved by comparison at the true rendered size: gradient + stroke =
   tube (at .85px AND at 1.3px, and at either paint-order); solid colour
   + the same stroke = a solid tail.  So the stroke is not the fault —
   the empty fill behind it is.

   Fix: paint a SOLID copy of the glyph underneath, using the gradient's
   own darkest stop, with a zero-offset zero-blur text-shadow.  Wherever
   the clip mask is too thin to carry the gradient, that solid layer
   shows through; wherever it is not, the gradient covers it completely.
   The shimmer is kept, the tail seals, and the bowls stay closed.
   ===================================================================== */
@media (max-width: 991px) {
    #fhaMobile .ctaRow .cg .cg-etch {
        text-shadow: 0 0 0 rgb(132, 160, 171);
    }
}

@media (min-width: 992px) {
    .cg .cg-etch,
    .banner .banner-detail-container .details .action .cg .cg-etch {
        text-shadow: 0 0 0 rgb(126, 162, 178);
    }
}

.cg:hover .cg-etch,
.cg:focus-visible .cg-etch,
.cg:active .cg-etch,
.banner .banner-detail-container .details .action .cg:hover .cg-etch,
.banner .banner-detail-container .details .action .cg:active .cg-etch,
#fhaMobile .ctaRow .cg:active .cg-etch {
    text-shadow: 0 0 0 #E4F5F7;
}

/* =====================================================================
   r37c — CARD 33 ("the INTRODUCTION" / "about you")
   ---------------------------------------------------------------------
   His note: "I'm fine with moving the phrase the introduction a little
   to the right and the phrase about you a little more to the left and
   even if you need to stretch narrow and drag the tail of the Y farther
   to the left to lower the phrase."

   Measured from the rendered card (302x50 panel, ink boxes read off the
   pixels rather than the DOM): "about you" is 118px of ink and the caps
   ink starts at 38px, so the two share 90px of column — by far the worst
   of the three cards.  Three moves, each one small:

     caps   right inset .779 -> .58 em   (+4px right; the margin goes
                                          17.5px -> 13.5px, still clear)
     etch   left  .359 -> .239 em        (-4px left)
     etch   scaleX .93 from the left     (-8px off the right end)
     etch   size  .72 -> .69 em          (ink top drops ~2px against the
                                          floor law, so the ascenders
                                          clear the caps by ~5.6px
                                          instead of 3.75px)

   The condense is his call and is deliberate: it narrows this one phrase
   without shrinking the script's stroke weight the way size alone would.
   ===================================================================== */
@media (max-width: 991px) {
    #fhaMobile .ctaRow .cg--intro .cg-caps {
        right: .58em;
    }

    #fhaMobile .ctaRow .cg--intro .cg-etch {
        font-size: .69em;
        left: .239em;
        bottom: .112em;
        transform: scaleX(.93);
        transform-origin: left bottom;
    }
}

@media (min-width: 992px) {
    .banner .banner-detail-container .details .action .cg--intro .cg-caps {
        right: .58em;
    }

    .banner .banner-detail-container .details .action .cg--intro .cg-etch {
        font-size: .653em;
        left: .251em;
        bottom: .104em;
        transform: scaleX(.93);
        transform-origin: left bottom;
    }
}