/* ==========================================================================
   Fenix Aesthetics — Design system
   Tokens first. Swap --fx-serif / --fx-sans to change the whole type system.
   ========================================================================== */

:root{
  /* Brand — values taken from the Figma file's own variables, not sampled.
     Primary #b4853d · Secondary #1b1810 · Tertiary #f3e4c9 · Border #e4e9e9
     · BG-Grey #fbfbfb · Text #333333 · 80% #555555                          */
  --fx-ink:#1B1810;
  --fx-ink-soft:#242119;
  --fx-gold:#B4853D;
  --fx-gold-hi:#C9A063;   /* the gold lifted for the nav over the photograph */
  --fx-gold-dp:#9D7944;
  --fx-cream:#F3E4C9;
  --fx-paper:#FBFBFB;   /* header bar and treatment cards only */
  --fx-page:#FFFFFF;

  /* Text — the frame sets body copy as raw greys rather than one token, and
     the four are not interchangeable: #444 list rows, #555 bullet labels,
     #666 card copy, #777 section sub-copy. */
  --fx-title:#1B1810;
  --fx-copy-strong:#444;
  --fx-copy-mid:#555;
  --fx-copy:#666;
  --fx-copy-soft:#777;
  --fx-text-light:#737373;   /* Figma "Text-Light", treatment pages */
  --fx-on-dark:rgba(255,255,255,.78);
  --fx-on-dark-mute:rgba(255,255,255,.55);
  --fx-line:#E4E9E9;

  /* Type — Fraunces (display) + Outfit (UI), both Google Fonts.
     Lufga appears on 6 footer runs in the source file; it is a commercial
     face and is not loaded here, so those fall through to Outfit. Self-host
     it and add it to --fx-sans-alt if you hold a licence.                    */
  --fx-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --fx-sans:"Outfit","Helvetica Neue",Arial,sans-serif;
  --fx-sans-alt:var(--fx-sans);

  /* Layout */
  --fx-container:1440px;
  --fx-gutter:39.35px;
  --fx-section:137.73px;
  --fx-radius:2px;
}

/* --------------------------------------------------------------- Reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fx-page);
  color:var(--fx-copy);
  font-family:var(--fx-sans);
  font-size:16px;
  line-height:1.7;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  /* Pairs with the minmax(0,1fr) tracks below: a long unbroken string in a
     grid cell would otherwise widen the track past the viewport. */
  overflow-wrap:break-word;
}
/* height:auto is load-bearing — wp_get_attachment_image() emits width and
   height attributes, and those beat CSS that sets only width. */
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--fx-gold);outline-offset:3px}

/* ----------------------------------------------------------- Utilities -- */
.fx-container{
  width:100%;
  max-width:var(--fx-container);
  margin-inline:auto;
  padding-inline:var(--fx-gutter);
}
.fx-section{padding-block:var(--fx-section)}
.fx-section--dark{background:var(--fx-ink);color:var(--fx-on-dark)}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--fx-gold);color:#fff;padding:12px 20px;font-size:13px;
}
.skip-link:focus{left:12px;top:12px}

/* --------------------------------------------------------------- Type -- */
.fx-eyebrow{
  font-family:var(--fx-sans);
  font-size:14.17px;      /* Figma: 14.166px, Outfit SemiBold, ls 1.9833px */
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fx-gold);
  display:flex;
  align-items:center;
  gap:14.76px;
  line-height:1.5;
  margin-bottom:19.68px;
}
.fx-eyebrow::before,
.fx-eyebrow::after{
  content:"";
  height:1.23px;
  width:39.35px;
  background:currentColor;
  flex:none;
}
.fx-eyebrow::after{display:none}
.fx-eyebrow--center{justify-content:center}
.fx-eyebrow--center::after{display:block}

.fx-h1,.fx-h2,.fx-h3{
  font-family:var(--fx-serif);
  color:var(--fx-title);
  font-weight:500;
  line-height:1.14;
  letter-spacing:-.01em;
}
.fx-h1{font-size:clamp(42px,6vw,86.4px);font-weight:400;line-height:1.08}
.fx-h2{font-size:clamp(32px,3.9vw,50.4px);font-weight:400;letter-spacing:-.01em;line-height:1.5}
.fx-head--split .fx-h2{line-height:1.1}   /* Figma: 55.44px on 50.4px */
.fx-h3{font-size:clamp(20px,1.8vw,23.61px);line-height:1.3}
.fx-h1 em,.fx-h2 em{font-style:italic;font-weight:400}

.fx-section--dark .fx-h1,
.fx-section--dark .fx-h2,
.fx-section--dark .fx-h3{color:#fff}

.fx-lede{font-size:15.5px;line-height:1.8;max-width:60ch}

.fx-rte p{margin-bottom:23.61px;font-size:18.69px;font-weight:300;line-height:1.8;color:var(--fx-copy-mid)}
.fx-rte p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ Buttons -- */
.fx-btn{
  --btn-bg:var(--fx-gold);
  --btn-fg:#fff;
  --btn-bd:var(--fx-gold);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:17.71px 43.29px;   /* Figma: the hero pair, 17.708 / 43.286 */
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1.23px solid var(--btn-bd);
  border-radius:var(--fx-radius);
  font-size:16.72px;      /* Figma: 16.724px, Outfit SemiBold */
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.5;
  white-space:nowrap;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.fx-btn:hover{transform:translateY(-2px)}
.fx-btn--gold:hover{--btn-bg:var(--fx-gold-dp);--btn-bd:var(--fx-gold-dp)}
.fx-btn--dark{--btn-bg:var(--fx-ink);--btn-bd:var(--fx-ink)}
.fx-btn--dark:hover{--btn-bg:var(--fx-gold);--btn-bd:var(--fx-gold)}
.fx-btn--outline{--btn-bg:transparent;--btn-fg:var(--fx-gold);--btn-bd:var(--fx-gold);padding:14.76px 34.43px;font-size:15.35px}
.fx-btn--outline:hover{--btn-bg:var(--fx-gold);--btn-fg:#fff}
.fx-btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.4);font-weight:500;letter-spacing:.06em}
.fx-btn--ghost:hover{--btn-bg:#fff;--btn-fg:var(--fx-ink);--btn-bd:#fff}
.fx-btn--light{--btn-bg:#fff;--btn-fg:var(--fx-gold);--btn-bd:#fff;padding:19.67px 48px;font-size:16.13px;font-weight:700;letter-spacing:.1em}
.fx-btn--light:hover{--btn-bg:var(--fx-ink);--btn-fg:#fff;--btn-bd:var(--fx-ink)}
.fx-btn--outline-ink{--btn-bg:transparent;--btn-fg:var(--fx-ink);--btn-bd:var(--fx-ink)}
.fx-btn--outline-ink:hover{--btn-bg:var(--fx-ink);--btn-fg:#fff;--btn-bd:var(--fx-ink)}
.fx-btn--sm{padding:8.8px 22.4px;font-size:12.8px;letter-spacing:.06em}
.fx-btn--xs{padding:11px 14px;font-size:12px;letter-spacing:.07em}

/* --------------------------------------------------- Media placeholder -- */
.fx-ph{
  position:relative;
  width:100%;
  height:100%;
  min-height:180px;
  background:
    radial-gradient(120% 90% at 20% 10%,rgba(199,164,105,.30),transparent 60%),
    radial-gradient(100% 80% at 85% 90%,rgba(36,30,26,.22),transparent 55%),
    linear-gradient(145deg,#EFE5D6,#D9CBB6);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.fx-ph::after{
  content:attr(data-label);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(36,30,26,.42);
  padding:0 18px;
  text-align:center;
  line-height:1.7;
}
.fx-ph--dark{
  background:
    radial-gradient(120% 90% at 25% 15%,rgba(181,142,82,.35),transparent 58%),
    linear-gradient(150deg,#3A312A,#221C18);
}
.fx-ph--dark::after{color:rgba(255,255,255,.38)}

/* =============================================================== TOPBAR == */
.fx-topbar{
  background:var(--fx-ink);
  color:rgba(243,228,201,.85);        /* Figma: Tertiary at 85% */
  font-size:12px;
  letter-spacing:.04em;               /* Figma: 0.48px on 12px */
  position:relative;
  z-index:60;
}
.fx-topbar__inner{
  padding-inline:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:37.2px;                  /* Figma: 18px line + 9.6px each side */
  flex-wrap:wrap;
}
.fx-topbar__contact{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.fx-topbar__contact a{display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.fx-topbar__contact a:hover{color:var(--fx-cream)}
/* The design sets these as text glyphs inside the run, not as drawn icons. */
.fx-topbar__glyph{font-size:12px;line-height:1;flex:none}

/* =============================================================== HEADER == */
/* Sits over the hero rather than above it. Absolute keeps it out of flow, so
   the hero starts at the top bar and .fx-hero__inner adds the header's 72px
   back to its top inset — every section below still lands on the frame's y. */
.fx-header{
  position:absolute;
  inset-inline:0;
  z-index:50;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.13);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.fx-header__inner{
  padding-inline:16px;
  display:flex;
  align-items:center;
  gap:32px;
  min-height:72px;
}
.fx-brand{
  font-family:var(--fx-serif);
  font-size:24px;                     /* Figma: 24px Fraunces SemiBold, ls -1px */
  font-weight:600;
  letter-spacing:-.042em;
  color:#fff;
  flex:none;
}
.fx-brand img{max-height:44px;width:auto}
.fx-nav{margin-inline:auto}
.fx-nav ul{display:flex;align-items:center;gap:34px}
.fx-nav a{
  font-size:13.6px;                   /* Figma: 13.6px Outfit Regular, ls 0.272px */
  font-weight:400;
  letter-spacing:.02em;
  color:rgba(255,255,255,.82);
  padding-block:6px;
  transition:color .22s ease;
}
.fx-nav a:hover{color:#fff}
/* A fallback item whose page has not been built yet. The design draws seven
   labels, so the label stays; with nothing behind it, it is not a link. */
.fx-nav li > span{
  font-size:13.6px;
  font-weight:400;
  letter-spacing:.02em;
  color:rgba(255,255,255,.45);
  padding-block:6px;
  cursor:default;
}
/* The frame marks the current page in gold, with no underline. */
.fx-nav .current-menu-item > a{color:var(--fx-gold-hi)}
.fx-header__cta{flex:none}

/* Pinned state: the bar turns white and the type flips to ink, since it is no
   longer sitting on the photograph.

   Scoped away from .fx-lighthead — inner pages already start on a white bar
   and own their pinned state in the "Light header" block. Without the scope
   these rules out-specify it and would recolour its current-page link and
   give it a slide-down it never had. */
body:not(.fx-lighthead) .fx-header.is-stuck{
  position:fixed;
  top:0;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--fx-line);
  box-shadow:0 10px 40px rgba(36,30,26,.12);
  animation:fxSlideDown .35s ease;
}
body:not(.fx-lighthead) .fx-header.is-stuck .fx-brand{color:var(--fx-ink)}
body:not(.fx-lighthead) .fx-header.is-stuck .fx-nav a{color:var(--fx-copy-strong)}
body:not(.fx-lighthead) .fx-header.is-stuck .fx-nav a:hover{color:var(--fx-ink)}
body:not(.fx-lighthead) .fx-header.is-stuck .fx-nav .current-menu-item > a{color:var(--fx-gold-dp)}
body:not(.fx-lighthead) .fx-header.is-stuck .fx-burger{border-color:rgba(36,30,26,.22)}
body:not(.fx-lighthead) .fx-header.is-stuck .fx-burger span,
body:not(.fx-lighthead) .fx-header.is-stuck .fx-burger span::before,
body:not(.fx-lighthead) .fx-header.is-stuck .fx-burger span::after{background:var(--fx-ink)}
body:not(.fx-lighthead) .fx-header.is-stuck .fx-burger[aria-expanded="true"] span{background:transparent}
@keyframes fxSlideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* Burger */
.fx-burger{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--fx-radius);
  flex:none;
}
.fx-burger span{
  display:block;width:18px;height:1.5px;background:#fff;position:relative;
  transition:background .2s ease;
}
.fx-burger span::before,
.fx-burger span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:#fff;
  transition:transform .28s ease,top .28s ease;
}
.fx-burger span::before{top:-6px}
.fx-burger span::after{top:6px}
.fx-burger[aria-expanded="true"] span{background:transparent}
.fx-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.fx-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ================================================================= HERO == */
.fx-hero{position:relative;background:var(--fx-ink);isolation:isolate;padding-bottom:98.38px}
.fx-hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.fx-hero__media img,
.fx-hero__media .fx-ph{width:100%;height:100%;object-fit:cover;object-position:center}
/* Figma: one bottom-up scrim, #1b1810 solid at the foot through 70% at 40%
   to 20% at the top — not the left-to-right wash this used to carry. */
.fx-hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,#1b1810 0%,rgba(27,24,16,.7) 40%,rgba(27,24,16,.2) 100%);
}
.fx-hero__inner{
  padding-top:190.05px;               /* Figma 118.053 + the 72px header over it */
  position:relative;
}
.fx-hero .fx-eyebrow{
  color:var(--fx-gold);
  margin-bottom:29.51px;
  font-size:14.76px;                  /* Figma: 14.757px Outfit Medium */
  font-weight:500;
  letter-spacing:.15em;               /* Figma: 2.2135px on 14.757px */
}
.fx-hero .fx-eyebrow::before{width:49.19px}
.fx-hero__title{
  font-family:var(--fx-serif);
  color:#fff;
  font-size:clamp(40px,6vw,86.4px);   /* Figma: 86.4px / lh 93.312 */
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.012em;
  max-width:17ch;
}
.fx-hero__title em{font-style:italic;color:var(--fx-cream)}
.fx-hero__text{
  margin-top:29.51px;
  max-width:688.64px;
  color:rgba(255,255,255,.75);
  font-size:20.66px;                  /* Figma: 20.659px Outfit Light */
  font-weight:300;
  line-height:1.7;
}
.fx-hero__actions{display:flex;flex-wrap:wrap;gap:19.68px;margin-top:49.19px}

/* Hero feature strip */
.fx-hero__features{
  position:relative;
  margin-top:78.7px;
  border-top:1.23px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.1);
}
/* Figma separates the four cells with a 1.23px gap that lets the lighter
   container show through, rather than drawing a divider rule. */
.fx-hero__features-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.23px;
}
.fx-feature{padding:29.51px;background:rgba(0,0,0,.3)}
.fx-feature__title{
  font-size:13.77px;                  /* Figma: 13.773px Outfit SemiBold */
  font-weight:600;
  line-height:1.5;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fx-gold);
  margin-bottom:7.87px;
}
.fx-feature__text{font-size:15.74px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.65)}

/* ================================================================ ABOUT == */
.fx-about__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:98.38px;
  align-items:center;
}
.fx-about__media{position:relative}
/* Figma: a 1.23px Tertiary outline offset 29.51px up and left of the photo. */
.fx-about__frame{
  position:absolute;
  left:-29.51px;top:-29.51px;
  width:378.87px;height:413.19px;
  max-width:60%;
  border:1.23px solid var(--fx-cream);
  pointer-events:none;
}
.fx-about__media img,
.fx-about__media .fx-ph{
  width:100%;
  aspect-ratio:631.46/688.64;
  object-fit:cover;
  min-height:0;
}
.fx-badge{
  position:absolute;
  right:-24.59px;
  bottom:-26.28px;
  background:var(--fx-gold);
  color:#fff;
  padding:29.51px;
  text-align:left;
}
.fx-badge__num{
  display:block;
  font-family:var(--fx-serif);
  font-size:49.19px;                  /* Figma: 49.189px Fraunces Regular */
  line-height:1;
  font-weight:400;
}
.fx-badge__label{
  display:block;
  margin-top:5.9px;
  font-size:14.76px;                  /* Figma: 14.757px Outfit Regular */
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.fx-about__body .fx-h2{
  font-size:clamp(34px,4vw,57.6px);    /* Figma: 57.6px, lh 66.24 */
  line-height:1.15;
  margin-bottom:29.51px;
}
.fx-about__body .fx-eyebrow{margin-bottom:24.59px}
.fx-checklist{margin:49.19px 0;display:grid;gap:14.76px}
.fx-checklist li{
  display:flex;
  align-items:center;
  gap:14.76px;
  font-size:17.22px;                  /* Figma: 17.216px Outfit Regular */
  font-weight:400;
  line-height:1.5;
  color:var(--fx-copy-strong);
}
/* Figma draws this as a bordered square holding a smaller filled one — not a
   tick. Both squares are Primary. */
.fx-checklist__mark{
  width:24.59px;height:24.59px;
  flex:none;
  border:1.23px solid var(--fx-gold);
  display:grid;
  place-items:center;
}
.fx-checklist__mark::before{
  content:"";
  width:7.38px;height:7.38px;
  background:var(--fx-gold);
}
.fx-about__body .fx-btn{padding:16.71px 39.35px;font-size:15.74px}

/* ================================================================== WHY == */
.fx-why{background:var(--fx-cream);padding-block:118.05px}
.fx-head{margin-bottom:78.7px}
.fx-head--center{text-align:center;max-width:720px;margin-inline:auto}
.fx-head--center .fx-eyebrow{justify-content:center}
.fx-head--center .fx-eyebrow::after{display:block}
.fx-head__sub{margin-top:14.76px;color:var(--fx-copy-soft);font-size:18.69px;font-weight:300;line-height:1.5}
.fx-head--split{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.fx-head--light .fx-head__sub{color:var(--fx-on-dark)}

/* Cards are solid white with the cream ground showing through a 2.46px gap. */
.fx-why__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2.46px;
}
.fx-why__item{background:#fff;padding:49.19px}
.fx-why__num{
  display:block;
  font-family:var(--fx-serif);
  font-size:49.19px;                  /* Figma: 49.189px Fraunces Light */
  font-weight:300;
  line-height:1;
  color:var(--fx-gold);
  opacity:.4;
  margin-bottom:24.59px;
}
.fx-why__item h3{
  font-family:var(--fx-serif);
  font-size:23.61px;                  /* Figma: 23.611px Fraunces Medium */
  font-weight:500;
  line-height:1.3;
  color:var(--fx-title);
  margin-bottom:14.76px;
}
.fx-why__item p{font-size:17.22px;font-weight:300;line-height:1.75;color:var(--fx-copy)}

/* =========================================================== TREATMENTS == */
.fx-treatments__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:29.51px;
}
.fx-tcard{
  background:var(--fx-paper);
  border:1.23px solid var(--fx-line);
  padding:44.27px;
  display:flex;
  flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.fx-tcard:hover{
  transform:translateY(-4px);
  border-color:var(--fx-gold);
  box-shadow:0 22px 50px -28px rgba(36,30,26,.45);
}
/* The frame keeps all five cards on the same three-column track: the last
   row holds two of them and leaves the third cell empty. */
.fx-tcard__icon{
  display:block;
  font-size:31.48px;                  /* Figma: 31.481px, the ✦ ◈ ❋ ◎ ⬡ glyphs */
  line-height:1.5;
  color:var(--fx-gold);
  margin-bottom:19.68px;
}
.fx-tcard__title{
  font-family:var(--fx-serif);
  font-size:22.63px;                  /* Figma: 22.627px Fraunces Medium */
  font-weight:500;
  line-height:1.3;
  color:var(--fx-title);
  margin-bottom:14.76px;
}
.fx-tcard__text{font-size:16.72px;font-weight:300;line-height:1.7;color:var(--fx-copy);margin-bottom:24.59px}
.fx-tcard__list{
  border-top:1.23px solid var(--fx-line);
  padding-top:24.59px;
  margin-top:auto;
  display:grid;
  gap:8.85px;
}
.fx-tcard__list li{
  position:relative;
  padding-left:16.72px;
  font-size:15.74px;                  /* Figma: 15.74px Outfit Regular */
  font-weight:400;
  line-height:1.5;
  color:var(--fx-copy-mid);
}
.fx-tcard__list li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:4.92px;height:4.92px;
  background:var(--fx-gold);
}

/* =========================================================== TECHNOLOGY == */
/* Technology is the one section the frame drops 88.54px below its head
   rather than the 78.7px the others use. */
.fx-tech .fx-head{margin-bottom:88.54px}
.fx-tech__grid{display:grid;gap:2.46px}
/* Card and photo are exact halves of the container and butt together — the
   only gap in this block is the 2.46px between rows. */
.fx-techrow{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;
}
.fx-techrow--flip .fx-techcard{order:2}
.fx-techrow--flip .fx-techmedia{order:1}
.fx-techcard{
  background:var(--fx-ink-soft);
  padding:68.86px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:510.49px;
}
.fx-techcard__num{
  font-family:var(--fx-serif);
  font-size:59.03px;                  /* Figma: 59.026px Fraunces Light */
  font-weight:300;
  line-height:1;
  color:var(--fx-gold);
  opacity:.3;
  margin-bottom:29.51px;
}
.fx-techcard h3{
  font-family:var(--fx-serif);
  font-size:27.55px;                  /* Figma: 27.546px Fraunces Medium */
  font-weight:500;
  line-height:1.3;
  color:#fff;
  margin-bottom:9.84px;
}
.fx-techcard__kicker{
  font-size:15.35px;                  /* Figma: 15.347px Outfit Medium */
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fx-gold);
  margin-bottom:19.68px;
}
.fx-techcard__text{
  font-size:17.71px;                  /* Figma: 17.708px Outfit Light */
  font-weight:300;
  line-height:1.75;
  color:rgba(255,255,255,.6);
}
.fx-techmedia{overflow:hidden;background:var(--fx-ink-soft)}
.fx-techmedia img,
.fx-techmedia .fx-ph{
  width:100%;height:100%;min-height:510.49px;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.fx-techmedia:hover img{transform:scale(1.045)}

/* ========================================================= TESTIMONIALS == */
.fx-testi__viewport{overflow:hidden}
.fx-testi__track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.fx-testi__slide{
  flex:0 0 100%;
  background:var(--fx-cream);
  padding:59.03px 39.35px;
  text-align:center;
}
.fx-testi__mark{
  display:block;
  font-family:var(--fx-serif);
  font-size:98.38px;                  /* Figma: 98.377px opening quote mark */
  line-height:.5;
  color:var(--fx-gold);
  opacity:.25;
  margin-bottom:29.51px;
}
.fx-testi__quote{
  font-family:var(--fx-serif);
  font-style:italic;
  font-size:clamp(22px,2.5vw,29.51px); /* Figma: 29.513px Fraunces Italic */
  font-weight:400;
  line-height:1.55;
  color:var(--fx-title);
  max-width:836.21px;
  margin-inline:auto;
}
.fx-testi__meta{margin-top:34.43px}
.fx-testi__name{
  display:block;
  font-family:var(--fx-sans);         /* Figma uses Outfit here, not the serif */
  font-style:normal;
  font-size:17.71px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--fx-title);
}
.fx-testi__role{
  display:block;
  margin-top:4.92px;
  font-size:14.17px;                  /* Figma: 14.166px Outfit Regular */
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fx-gold);
}
.fx-testi__dots{display:flex;justify-content:center;gap:14.76px;margin-top:39.35px}
.fx-testi__dots button{
  width:9.84px;height:9.84px;background:var(--fx-line);
  transition:background .25s ease,width .25s ease;
}
.fx-testi__dots button[aria-selected="true"]{background:var(--fx-gold);width:34.43px}

/* ================================================================== CTA == */
.fx-cta{background:var(--fx-gold);color:#fff;padding-block:98.38px;text-align:center}
.fx-cta h2{
  font-family:var(--fx-serif);
  font-size:clamp(30px,3.6vw,50.4px);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.01em;
  color:#fff;
}
.fx-cta p{
  margin:19.68px auto 49.19px;
  max-width:860.8px;
  color:rgba(255,255,255,.85);
  font-size:19.68px;                  /* Figma: 19.675px Outfit Light */
  font-weight:300;
  line-height:1.7;
}

/* =============================================================== FOOTER == */
.fx-footer{background:var(--fx-ink);color:var(--fx-on-dark);padding-top:80px}
.fx-footer .fx-container{padding-inline:56px}
.fx-footer__top{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,2.65fr);
  gap:64px;
  padding-bottom:56px;
}
.fx-footer__brand .fx-brand{
  font-size:37.15px;                  /* Figma: 37.151px Fraunces Regular */
  font-weight:500;
  color:#fff;
  letter-spacing:-.01em;
  display:inline-block;
  margin-bottom:20px;
}
.fx-footer__about{
  font-family:var(--fx-sans-alt);     /* Figma uses Lufga here; see --fx-sans-alt */
  font-size:14px;
  font-weight:400;
  line-height:1.63;
  color:rgba(255,255,255,.45);
  max-width:320px;
}
.fx-rating{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:14px;color:var(--fx-cream);font-weight:600}
/* Figma: five 16px stars filled in Tertiary, 2px apart. */
.fx-rating__stars{display:flex;gap:2px;color:var(--fx-cream)}
.fx-rating__stars svg{width:16px;height:16px}
.fx-rating strong{color:var(--fx-cream);font-weight:600}

.fx-footer__cols{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px;
}
.fx-footer__col h4{
  font-size:12px;                     /* Figma: 12px Outfit Bold, ls 1.8px */
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:16px;
}
.fx-footer__col li + li{margin-top:18px}
.fx-footer__col a{
  font-family:var(--fx-sans-alt);
  font-size:14px;
  line-height:1.43;
  color:var(--fx-cream);
  transition:color .2s ease;
}
.fx-footer__col a:hover{color:#fff}

.fx-footer__social{
  display:flex;
  align-items:center;
  gap:32px;
  padding-block:40px;
  border-top:1px solid var(--fx-copy-strong);
}
.fx-footer__social-label{font-size:16px;font-weight:600;color:#fff}
.fx-social{display:flex;gap:16px}
/* Figma: 38px tiles, white at 10%, 4px corners — the mark keeps its own
   exported size inside (they are not all square). */
.fx-social a{
  width:38px;height:38px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.1);
  border-radius:4px;
  color:#fff;
  transition:background .22s ease,color .22s ease;
}
.fx-social a:hover{background:var(--fx-gold);color:#fff}

/* Figma sets this row as plain 12px links divided by hairlines, not pills. */
.fx-footer__badges{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  padding-bottom:40px;
}
.fx-badge-pill{
  padding-right:16px;
  border-right:1px solid #fff;
  font-size:12px;
  line-height:1.235;
  color:#fff;
}
.fx-badge-pill:last-child{border-right:0;padding-right:0}
.fx-footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-block:40px;
  border-top:1px solid var(--fx-copy-strong);
  font-size:12px;
  color:var(--fx-cream);
}
.fx-footer__bottom .fx-brand{font-size:21.23px;color:#fff}

/* ======================================================= Inner page bits == */
.fx-pagehead{background:var(--fx-ink);padding:168px 0 76px;text-align:center}
.fx-pagehead .fx-h1{color:#fff;font-size:clamp(34px,4.4vw,58px)}
.fx-pagehead__crumbs{margin-top:14px;font-size:12px;color:var(--fx-on-dark-mute)}
.fx-prose{max-width:760px;margin-inline:auto}
.fx-prose h2,.fx-prose h3{font-family:var(--fx-serif);color:var(--fx-title);margin:36px 0 14px;font-weight:500}
.fx-prose h2{font-size:32px}
.fx-prose h3{font-size:24px}
.fx-prose p,.fx-prose ul,.fx-prose ol{margin-bottom:20px}
.fx-prose ul,.fx-prose ol{padding-left:22px;list-style:disc}
.fx-prose ol{list-style:decimal}
.fx-prose li{margin-bottom:8px}
.fx-prose a{color:var(--fx-gold);text-decoration:underline;text-underline-offset:3px}
.fx-prose img{margin:28px 0}
.fx-prose blockquote{
  border-left:2px solid var(--fx-gold);
  padding-left:24px;margin:28px 0;
  font-family:var(--fx-serif);font-style:italic;font-size:21px;color:var(--fx-title);
}
.fx-postcard{display:block;margin-bottom:44px}
.fx-postcard__media{aspect-ratio:16/10;overflow:hidden;margin-bottom:20px}
.fx-postcard__media img{width:100%;height:100%;object-fit:cover}
.fx-postcard h2{font-family:var(--fx-serif);font-size:27px;font-weight:500;color:var(--fx-title);margin-bottom:10px}
.fx-postcard__meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fx-gold);margin-bottom:12px}
.fx-pagination{display:flex;gap:8px;justify-content:center;margin-top:20px}
.fx-pagination .page-numbers{
  min-width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--fx-line);font-size:13px;
}
.fx-pagination .current{background:var(--fx-ink);color:#fff;border-color:var(--fx-ink)}
.fx-404{text-align:center;padding-block:130px}
.fx-404__code{font-family:var(--fx-serif);font-size:clamp(90px,16vw,190px);line-height:.9;color:var(--fx-cream)}
.fx-404 .fx-lede{margin:16px auto 32px;text-align:center}
.fx-comments{padding-bottom:var(--fx-section)}

.fx-searchform{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.fx-searchform input[type="search"]{
  flex:1 1 240px;
  min-width:0;
  padding:14px 16px;
  border:1px solid var(--fx-line);
  border-radius:var(--fx-radius);
  font:inherit;
  color:var(--fx-title);
  background:var(--fx-paper);
}
.fx-searchform input[type="search"]:focus-visible{border-color:var(--fx-gold)}

/* ====================================================== Treatment page ==
   Figma frame 16405:29257 ("Dermal Fillers"). Two things differ from the
   homepage and are the frame's own doing, not drift:
     · section headings are set in Outfit, not Fraunces (.fx-th2);
     · body runs on this frame ask for Lufga, which is commercial and not
       loaded, so they fall through --fx-sans-alt to Outfit as elsewhere.
   ======================================================================== */

/* --------------------------------------------------------- Hero ------- */
/* White, not --fx-paper: the light navigation bar above is white, and a
   4/255 step under it reads as a seam. The frame paints this band #FBFEFF
   and the card grid below it pure white — both round to the same surface. */
.fx-thero{background:var(--fx-page);padding-block:80px}
.fx-thero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:80px;
  align-items:center;
}
.fx-thero__body{padding-right:80px}
.fx-thero .fx-eyebrow{margin-bottom:10px}
.fx-thero__title{
  font-family:var(--fx-serif);
  font-size:clamp(38px,4.4vw,56px);   /* Figma: 56px Fraunces Regular, lh 64 */
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.036em;             /* Figma: -2px on 56px */
  color:var(--fx-title);
}
.fx-thero__intro{
  margin-top:24px;
  display:grid;
  gap:8px;
  max-width:62ch;
  font-size:16px;
  font-weight:300;
  line-height:1.6;
  color:var(--fx-text-light);
}
.fx-thero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:48px}

.fx-thero__media{position:relative;aspect-ratio:11/10;overflow:hidden}
.fx-thero__img,
.fx-thero__media .fx-ph{width:100%;height:100%;object-fit:cover}
.fx-thero__count{
  position:absolute;
  left:16px;bottom:16px;
  display:grid;
  gap:8px;
  padding:8px 12px;
  background:var(--fx-ink);
}
.fx-thero__count-num{
  font-size:22px;
  font-weight:700;
  line-height:24px;
  color:var(--fx-cream);
}
.fx-thero__count-label{
  font-family:var(--fx-sans-alt);
  font-size:14px;
  line-height:16px;
  color:#F3F3F3;
}

/* Breadcrumb */
.fx-crumbs{margin-bottom:44px}
.fx-crumbs ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  font-size:10px;      /* Figma: 10px, ls 0.2px, uppercase */
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--fx-text-light);
}
.fx-crumbs li{display:flex;align-items:center;gap:4px}
.fx-crumbs li + li::before{content:"/";font-size:8px;font-weight:700}
.fx-crumbs a{transition:color .2s}
.fx-crumbs a:hover{color:var(--fx-gold)}
.fx-crumbs [aria-current]{font-weight:600}

/* Treatment-area chips */
.fx-areas{margin-top:48px}
.fx-areas__label{
  font-family:var(--fx-sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--fx-gold);
  margin-bottom:12px;
}
.fx-areas__list{display:flex;flex-wrap:wrap;gap:8px}
.fx-areas__list li{
  border:1px solid var(--fx-line);
  padding:5px 14px;
  font-size:12px;
  font-weight:300;
  line-height:18px;
  letter-spacing:.04em;
  color:var(--fx-ink);
}

/* Eyebrow carrying the diamond mark instead of the rule */
.fx-eyebrow--mark{
  gap:6px;
  font-family:var(--fx-sans-alt);
  font-size:12px;         /* Figma: 12px Lufga, ls 4px */
  font-weight:400;
  letter-spacing:.33em;
}
.fx-eyebrow--mark::before{display:none}
.fx-eyebrow--mark svg{width:14px;height:14px;flex:none}

/* Section heading in Outfit, as this frame sets it */
.fx-th2{
  font-family:var(--fx-sans);
  font-size:clamp(30px,3.6vw,48px);   /* Figma: 48px Outfit Regular, lh 56 */
  font-weight:400;
  line-height:1.17;
  letter-spacing:-.021em;             /* Figma: -1px on 48px */
  color:var(--fx-title);
}
.fx-th2--sm{
  font-size:clamp(28px,3vw,40px);     /* Figma: 40px, ls -1.6px */
  letter-spacing:-.04em;
}

/* ------------------------------------------------- Filler card grid --- */
.fx-fillers{background:var(--fx-page);padding-block:80px}
.fx-fillers__head{margin-bottom:32px}
.fx-filters{display:flex;flex-wrap:wrap;gap:2px}
.fx-filters__btn{
  padding:9px 18px;
  background:var(--fx-page);
  border-bottom:1px solid var(--fx-line);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#888;
  transition:background .2s,color .2s,border-color .2s;
}
.fx-filters__btn:hover{color:var(--fx-ink)}
.fx-filters__btn[aria-pressed="true"]{background:var(--fx-gold);border-bottom-color:var(--fx-gold);color:#fff}

.fx-fillers__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.fx-fcard{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px;
  background:var(--fx-page);
  border:1px solid var(--fx-line);
  transition:border-color .25s ease;
}
.fx-fcard:hover{border-color:var(--fx-gold)}
.fx-fcard__media{position:relative;height:200px;border-radius:8px;overflow:hidden}
.fx-fcard__img,
.fx-fcard__media .fx-ph{width:100%;height:100%;object-fit:cover}
.fx-fcard__badge{
  position:absolute;
  left:16px;top:16px;
  padding:5px 12px;
  background:var(--fx-gold);
  color:#fff;
  font-size:10.4px;
  font-weight:700;
  line-height:15.6px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.fx-fcard__body{display:flex;flex-direction:column;gap:16px;flex:1;padding:8px}
.fx-fcard__title{
  font-family:var(--fx-sans-alt);
  font-size:20px;
  font-weight:500;
  line-height:24px;
  letter-spacing:-.02em;
  color:var(--fx-ink);
}
.fx-fcard__text{
  font-family:var(--fx-sans-alt);
  font-size:16px;
  font-weight:300;
  line-height:24px;
  letter-spacing:-.02em;
  color:var(--fx-text-light);
  flex:1;
}
.fx-fcard__actions{display:flex;gap:12px}
/* minmax(0,…) via min-width:0 — a long label would otherwise push the pair
   wider than the card. */
.fx-fcard__actions .fx-btn{flex:1 1 0;min-width:0;padding-inline:8px}

/* --------------------------------------------------------- Facts ------ */
.fx-facts{background:var(--fx-ink);color:#fff;padding-block:32px}
.fx-facts__list{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px 40px;
}
.fx-facts__item{display:grid;gap:6px;text-align:center}
.fx-facts__value{
  font-size:24px;
  font-weight:500;
  line-height:1.2;
  text-transform:capitalize;
}
.fx-facts__label{
  margin:0;
  font-family:var(--fx-sans-alt);
  font-size:20px;
  line-height:1.2;
  opacity:.6;
}

/* ------------------------------------------------------ Approach ------ */
.fx-approach{background:var(--fx-cream);padding-block:80px}
.fx-approach__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:80px;
  align-items:center;
}
.fx-approach .fx-eyebrow{margin-bottom:9px}
.fx-approach__text{
  margin-top:32px;
  display:grid;
  gap:32px;
  font-family:var(--fx-sans-alt);
  font-size:16px;
  line-height:24px;
  color:var(--fx-ink);
}
.fx-approach__btn{margin-top:40px}
.fx-approach__btn svg{width:14px;height:14px}
/* gap:1px with no background of its own — the cream ground is the rule. */
.fx-approach__list{display:grid;gap:1px}
.fx-approach__item{
  display:flex;
  align-items:center;
  gap:24px;
  padding:28px 32px;
  background:var(--fx-page);
}
.fx-approach__num{
  flex:none;
  width:32px;
  font-family:var(--fx-serif);
  font-size:25.6px;
  font-weight:300;
  line-height:25.6px;
  color:var(--fx-gold);
}
.fx-approach__title{font-size:18px;font-weight:400;line-height:1.3;color:var(--fx-ink)}
.fx-approach__copy{
  margin-top:6.4px;
  font-size:14px;
  font-weight:300;
  line-height:1.5;
  color:var(--fx-ink);
}

/* ------------------------------------------------------- Related ------ */
.fx-related{background:var(--fx-page);padding-block:80px}
.fx-related__head{margin-bottom:16px}
.fx-related__all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-bottom:2px;
  border-bottom:1px solid var(--fx-gold);
  font-size:12.48px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fx-gold);
}
.fx-related__all svg{width:13px;height:13px}
.fx-related__grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}
.fx-rcard{
  display:block;
  padding:24px;
  background:var(--fx-paper);
  border:1px solid var(--fx-line);
  transition:border-color .25s ease,transform .25s ease;
}
.fx-rcard:hover{border-color:var(--fx-gold);transform:translateY(-3px)}
.fx-rcard__icon{display:block;font-size:20.8px;line-height:31.2px;color:var(--fx-gold)}
.fx-rcard__title{margin-top:12px;font-size:18px;font-weight:500;line-height:24px;color:var(--fx-ink)}
.fx-rcard__text{
  margin-top:6.4px;
  font-size:16px;
  font-weight:300;
  line-height:24px;
  color:var(--fx-ink);
}

/* ----------------------------------------------------------- CTA ------ */
.fx-tcta{background:var(--fx-page);padding-block:124px;text-align:center}
.fx-tcta__inner{display:flex;flex-direction:column;align-items:center}
.fx-tcta__eyebrow{
  font-size:10px;
  font-weight:400;
  letter-spacing:.08em;
  color:var(--fx-title);
  margin-bottom:8px;
}
.fx-tcta__title{
  font-family:var(--fx-sans);
  font-size:clamp(30px,3.8vw,48px);  /* Figma: 48px SemiBold, ls -2px */
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.042em;
  color:var(--fx-title);
}
.fx-tcta__text{
  margin-top:16px;
  max-width:720px;
  font-family:var(--fx-sans-alt);
  font-size:16px;
  line-height:24px;
  color:rgba(9,20,19,.55);
}
.fx-tcta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:40px}

/* ------------------------------------------------- Treatment breaks --- */
@media (max-width:1100px){
  .fx-thero__inner{gap:48px}
  .fx-thero__body{padding-right:0}
  .fx-related__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:980px){
  .fx-thero{padding-block:64px}
  .fx-thero__inner{grid-template-columns:minmax(0,1fr);gap:44px}
  .fx-thero__media{max-width:640px}
  .fx-fillers__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-approach__inner{grid-template-columns:minmax(0,1fr);gap:48px}
  .fx-facts__list{justify-content:flex-start;gap:24px 32px}
  .fx-facts__item{flex:1 1 40%}
  .fx-related__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-tcta{padding-block:96px}
}

@media (max-width:640px){
  .fx-thero{padding-block:52px}
  .fx-crumbs{margin-bottom:30px}
  .fx-thero__actions .fx-btn,
  .fx-tcta__actions .fx-btn{flex:1 1 100%}
  .fx-fillers__grid,
  .fx-related__grid{grid-template-columns:minmax(0,1fr)}
  .fx-facts__item{flex:1 1 100%;text-align:left}
  .fx-approach{padding-block:60px}
  .fx-approach__item{flex-direction:column;align-items:flex-start;gap:12px;padding:24px 22px}
  .fx-related{padding-block:60px}
  .fx-tcta{padding-block:72px}
}

/* ========================================== Hyalase treatment detail ==
   Figma frame 16514:18744, "Non-Surgical Filler Dissolving (Hyalase)".
   Four things differ from the rest of the theme and are the frame's own
   doing, not drift:

     · every heading is Outfit, not Fraunces — 56px on the hero, 40px on
       most sections, 49.189px on the FAQ. Fraunces survives only on the
       hero stat values and the aftercare numerals;
     · the breadcrumb, the "how it works" body copy and the hero image
       caption ask for Lufga, which is commercial and not loaded, so they
       fall through --fx-sans-alt to Outfit as everywhere else here;
     · the frame is 1440 wide with its content flush to the frame edge
       rather than inside the homepage's 1280 container, so these sections
       use .fx-hy-wrap and each section's own side padding;
     · the header sits on white rather than over a dark hero, so this page
       carries the .fx-lighthead body class (see fenix_body_class()).

   Sizes carry their Figma value where it is not obvious from the rule.
   ====================================================================== */

:root{
  --fx-hy-frame:1440px;        /* Figma frame width */
  --fx-hy-text:#191919;        /* Figma "Text"       */
  --fx-hy-sand:#F9F6F0;        /* process + FAQ ground */
  --fx-hy-shell:#FBF9F5;       /* aftercare cards, related ground */
  --fx-hy-clay:#E5D5C0;        /* image mattes */

  /* Jost carries one 10px label; Gilda Display carries the five benefit
     numerals. Both are Google Fonts and load in the same css2 request as
     Fraunces and Outfit — see inc/enqueue.php. */
  --fx-sans-geo:"Jost",var(--fx-sans);
  --fx-serif-display:"Gilda Display",var(--fx-serif);
}

.fx-hy-wrap{
  width:100%;
  max-width:var(--fx-hy-frame);
  margin-inline:auto;
  padding-inline:24px;
}

/* ------------------------------------------------- Light header ------- *
 * The frame puts the brand 16px from the frame edge and runs the gold CTA
 * flush to the opposite edge, so the bar has no gutter of its own.
 */
/* Sticky, not fixed. This bar sits in the flow under the topbar, so pinning it
   with position:fixed took it out of the flow and dropped everything below it
   by the bar's height — and with no top inset the fixed box stayed frozen at
   its old offset partway down the viewport instead of at the top. Sticky pins
   it to the top and leaves it in the flow, so nothing moves. */
.fx-lighthead .fx-header{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom-color:transparent;
}
.fx-lighthead .fx-header__inner{
  max-width:var(--fx-hy-frame);
  padding-inline:0;
  min-height:72px;
  gap:32px;
}
/* Scoped to the header: .fx-brand is also the footer wordmark, and ink on
   the ink footer is invisible. */
.fx-lighthead .fx-header .fx-brand{color:var(--fx-ink);margin-left:16px}
.fx-lighthead .fx-nav a{color:#444}
.fx-lighthead .fx-nav li > span{color:rgba(27,24,16,.38)}
.fx-lighthead .fx-nav a:hover,
.fx-lighthead .fx-nav .current-menu-item > a{color:var(--fx-gold)}
.fx-lighthead .fx-header__cta{
  padding:8.8px 22.4px;      /* Figma: 8.8 / 22.4 */
  font-size:12.8px;
  letter-spacing:.06em;      /* Figma: 0.768px on 12.8px */
  border-radius:0;
}
.fx-lighthead .fx-burger{border-color:rgba(27,24,16,.28);margin-right:16px}
.fx-lighthead .fx-burger span,
.fx-lighthead .fx-burger span::before,
.fx-lighthead .fx-burger span::after{background:var(--fx-ink)}
.fx-lighthead .fx-burger[aria-expanded="true"] span{background:transparent}
/* Pinning is the sticky rule's job; is-stuck only carries the appearance. */
.fx-lighthead .fx-header.is-stuck{
  background:rgba(255,255,255,.97);
  border-bottom-color:var(--fx-line);
  box-shadow:0 10px 30px rgba(27,24,16,.10);
}
.fx-lighthead .fx-nav.is-open{
  background:rgba(255,255,255,.985);
  border-top-color:var(--fx-line);
}
.fx-lighthead .fx-nav.is-open li{border-bottom-color:var(--fx-line)}

/* ------------------------------------------------------ Shared -------- */
.fx-hy-eyebrow{
  display:flex;
  align-items:center;
  gap:7.378px;
  font-family:var(--fx-sans);
  font-size:14.757px;
  font-weight:400;
  line-height:22.135px;
  letter-spacing:.333em;        /* Figma: 4.9189px on 14.757px */
  text-transform:uppercase;
  color:var(--fx-gold);
}
.fx-hy-eyebrow svg{width:17.216px;height:17.216px;flex:none}
.fx-hy-eyebrow--center{justify-content:center;text-align:center}
/* The hero and the side-effects panel set the label smaller, in Lufga, and
   with a narrower track than the rest of the page. */
.fx-hy-eyebrow--sm{
  font-family:var(--fx-sans-alt);
  font-size:12px;
  line-height:16px;
  letter-spacing:.083em;        /* Figma: 1px on 12px */
  gap:6px;
}
.fx-hy-eyebrow--sm svg{width:14px;height:14px}
.fx-hy-eyebrow--flat{letter-spacing:normal}
.fx-hy-eyebrow--wide{
  font-family:var(--fx-sans-alt);
  font-size:12px;
  line-height:16px;
  letter-spacing:.333em;        /* Figma: 4px on 12px */
  gap:6px;
}
.fx-hy-eyebrow--wide svg{width:14px;height:14px}
.fx-hy-eyebrow--plain{font-size:14px;line-height:normal;letter-spacing:normal}

.fx-hy-h2{
  font-family:var(--fx-sans);
  font-size:clamp(28px,3vw,40px);
  font-weight:400;
  line-height:normal;
  letter-spacing:-.025em;       /* Figma: -1px on 40px */
  color:var(--fx-ink);
}
.fx-hy-h2--tight{letter-spacing:-.049em}   /* Figma: -1.9675px on 40px */
.fx-hy-h2--plain{letter-spacing:normal}
.fx-hy-h2--medium{font-weight:500}
.fx-hy-h2--cream{color:var(--fx-cream)}
.fx-hy-h2--white{color:#fff}
.fx-hy-h2--consult{letter-spacing:-.0154em;color:var(--fx-ink)}

/* The 7px gold bullet used by the "how it works" and candidacy lists. */
.fx-hy-dot{
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--fx-gold);
}

/* ------------------------------------------------------ Buttons ------- *
 * The frame draws square buttons at sizes the homepage set does not carry,
 * so each variant states its own box rather than leaning on .fx-btn--sm.
 */
.fx-hy-btn--fill,
.fx-hy-btn--ghost,
.fx-hy-btn--ink,
.fx-hy-btn--bold,
.fx-hy-btn--pale,
.fx-hy-btn--light,
.fx-hy-btn--outline{border-radius:0}

.fx-hy-btn--fill{flex:1 1 0;min-width:0}
.fx-hy-hero__actions .fx-btn--gold{
  padding:14px 32px;
  font-size:12.8px;
  font-weight:600;
  letter-spacing:.08em;         /* Figma: 1.024px on 12.8px */
}
.fx-hy-btn--ghost{
  --btn-bg:transparent;
  --btn-fg:#1C352D;             /* Figma: the arrow stroke and label colour */
  --btn-bd:var(--fx-ink);
  gap:8px;
  padding:11px 32px;
  font-size:14px;
  font-weight:400;
  letter-spacing:normal;
  text-transform:capitalize;
}
.fx-hy-btn--ghost:hover{--btn-bg:var(--fx-ink);--btn-fg:#fff}
.fx-hy-btn--ghost svg{width:24px;height:24px;flex:none}

.fx-hy-btn--ink{
  --btn-bg:var(--fx-ink);
  --btn-fg:#fff;
  --btn-bd:var(--fx-ink);
  gap:10px;
  padding:16px 32px;
  font-size:14px;
  font-weight:500;
  letter-spacing:normal;
}
.fx-hy-btn--ink:hover{--btn-bg:var(--fx-gold);--btn-bd:var(--fx-gold)}
.fx-hy-btn--ink svg{width:14px;height:14px;flex:none}

.fx-hy-btn--bold{
  padding:16px 36px;
  font-size:12.8px;
  font-weight:700;
  letter-spacing:.09em;         /* Figma: 1.152px on 12.8px */
}
.fx-hy-btn--pale{
  --btn-bg:transparent;
  --btn-fg:#888;
  --btn-bd:#ddd;
  padding:16px 28px;
  font-size:12.8px;
  font-weight:500;
  letter-spacing:.05em;         /* Figma: 0.64px on 12.8px */
}
.fx-hy-btn--pale:hover{--btn-bg:var(--fx-ink);--btn-fg:#fff;--btn-bd:var(--fx-ink)}

.fx-hy-btn--light{
  --btn-bg:#fff;
  --btn-fg:var(--fx-gold);
  --btn-bd:#fff;
  padding:16px 36px;
  font-size:13.12px;
  font-weight:700;
  letter-spacing:.09em;         /* Figma: 1.1808px on 13.12px */
}
.fx-hy-btn--light:hover{--btn-bg:var(--fx-ink);--btn-fg:#fff;--btn-bd:var(--fx-ink)}
.fx-hy-btn--outline{
  --btn-bg:transparent;
  --btn-fg:#fff;
  --btn-bd:rgba(255,255,255,.55);
  padding:16px 32px;
  font-size:13.12px;
  font-weight:400;
  letter-spacing:.05em;         /* Figma: 0.656px on 13.12px */
}
.fx-hy-btn--outline:hover{--btn-bg:#fff;--btn-fg:var(--fx-gold);--btn-bd:#fff}

/* --------------------------------------------------------- Hero ------- */
.fx-hy-hero{background:#fff;padding-block:80px}
.fx-hy-hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:center;
}

.fx-hy-crumbs{margin-bottom:48px}
.fx-hy-crumbs ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  font-family:var(--fx-sans-alt);
  font-size:10px;
  letter-spacing:.02em;         /* Figma: 0.2px on 10px */
  text-transform:uppercase;
  color:var(--fx-text-light);
}
.fx-hy-crumbs li{display:flex;align-items:center;gap:4px}
.fx-hy-crumbs li + li::before{content:"/";font-size:8px;font-weight:700}
.fx-hy-crumbs a{transition:color .2s}
.fx-hy-crumbs a:hover{color:var(--fx-gold)}
.fx-hy-crumbs [aria-current]{font-weight:600}

.fx-hy-hero .fx-hy-eyebrow{margin-bottom:8px}
.fx-hy-hero__title{
  font-family:var(--fx-sans);
  font-size:clamp(36px,3.9vw,56px);
  font-weight:500;
  line-height:1.143;            /* Figma: 64px on 56px */
  letter-spacing:-.036em;       /* Figma: -2px on 56px */
  text-transform:capitalize;
  color:var(--fx-hy-text);
}
.fx-hy-hero__intro{
  margin-top:24px;
  display:grid;
  gap:8px;
  font-size:16px;
  font-weight:300;
  line-height:normal;
  color:var(--fx-text-light);
}

.fx-hy-stats{display:flex;flex-wrap:wrap;gap:32px;margin-top:48px}
.fx-hy-stat__value{
  font-family:var(--fx-serif);
  font-size:21.6px;
  font-weight:400;
  line-height:21.6px;
  color:var(--fx-ink);
}
.fx-hy-stat__label{
  margin:4px 0 0;
  font-size:10.88px;
  line-height:16.32px;
  letter-spacing:.08em;         /* Figma: 0.8704px on 10.88px */
  text-transform:uppercase;
  color:#aaa;
}

.fx-hy-hero__actions{
  display:flex;
  align-items:stretch;
  gap:16px;
  margin-top:48px;
  max-width:499px;              /* Figma: the pair is 499 wide */
}

.fx-hy-hero__media{
  position:relative;
  height:600px;
  margin-left:80px;             /* Figma: pl-80 on the image column */
  overflow:hidden;
  background:var(--fx-hy-clay);
}
.fx-hy-hero__img,
.fx-hy-hero__media .fx-ph{width:100%;height:100%;object-fit:cover}
.fx-hy-chip{
  position:absolute;
  left:24px;
  bottom:24px;
  padding:8px 12px;
  background:var(--fx-hy-text);
}
.fx-hy-chip__kicker{
  display:block;
  font-size:14px;
  font-weight:500;
  line-height:24px;
  color:var(--fx-cream);
}
.fx-hy-chip__title{
  display:block;
  font-family:var(--fx-sans-alt);
  font-size:22px;
  font-weight:600;
  line-height:normal;
  color:#F3F3F3;
}

/* -------------------------------------------- What is Hyalase --------- */
.fx-hy-about{background:var(--fx-paper);padding-block:80px}
.fx-hy-about .fx-hy-wrap{padding-inline:40px}
.fx-hy-about__inner{display:flex;align-items:flex-start;gap:56px}
/* The frame pins the photograph at top:0. A sticky header would sit over it
   once pinned, so the offset clears the 72px bar. */
.fx-hy-about__media{
  flex:none;
  width:550px;
  height:340px;
  position:sticky;
  top:96px;
  overflow:hidden;
  background:var(--fx-cream);
}
.fx-hy-about__img,
.fx-hy-about__media .fx-ph{width:100%;height:100%;object-fit:cover}
.fx-hy-about__body{flex:1 1 0;min-width:0}
.fx-hy-about .fx-hy-eyebrow{margin-bottom:9px}
.fx-hy-about .fx-hy-h2{margin-bottom:32px}
.fx-hy-about__text{
  display:grid;
  gap:8px;
  margin-bottom:24px;
  font-family:var(--fx-sans-alt);
  font-size:18px;
  line-height:28px;
  color:var(--fx-ink);
}

.fx-hy-dotlist{display:grid;gap:8px}
.fx-hy-dotlist li{
  display:flex;
  align-items:center;
  gap:27px;
  padding-block:14px;
  border-bottom:1px solid var(--fx-text-light);
}
.fx-hy-dotlist li:last-child{border-bottom:0}
.fx-hy-dotlist p{
  flex:1 1 0;
  min-width:0;
  font-size:18px;
  font-weight:400;
  line-height:21px;
  color:var(--fx-ink);
}
/* The frame sets the first lead SemiBold and the other three Medium; the
   heavier of the two is used throughout rather than reproducing the slip. */
.fx-hy-dotlist strong{font-weight:600}

.fx-hy-about__actions{margin-top:40px;display:flex}

/* ------------------------------------------------------ Process ------- */
.fx-hy-process{background:var(--fx-hy-sand);padding-block:80px}
.fx-hy-process .fx-hy-wrap{padding-inline:40px}
.fx-hy-process__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:80px;
  align-items:center;
}
.fx-hy-process .fx-hy-eyebrow{margin-bottom:12px}
.fx-hy-process .fx-hy-h2{margin-bottom:40px}

.fx-hy-steps{display:block}
.fx-hy-step{
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding-block:24px;
  border-bottom:1.23px solid var(--fx-cream);
}
.fx-hy-step:last-child{border-bottom:0}
.fx-hy-step__num{
  flex:none;
  width:56px;
  font-size:40px;
  font-weight:400;
  line-height:normal;
  color:var(--fx-gold);
}
.fx-hy-step__body{flex:1 1 0;min-width:0}
.fx-hy-step__title{
  font-size:24px;
  font-weight:500;
  line-height:normal;
  color:var(--fx-ink);
}
.fx-hy-step__text{
  margin-top:8px;
  font-size:18px;
  font-weight:300;
  line-height:28px;
  color:var(--fx-text-light);
}

.fx-hy-process__media{
  align-self:stretch;
  display:flex;
  padding-block:80px;
  background:transparent;
}
/* Same reason as the candidacy image below: basis 0 keeps the photograph's
   intrinsic height out of the grid row, so the step list sets the height and
   the image fills what is left inside the 80px inset. */
.fx-hy-process__img,
.fx-hy-process__media .fx-ph{
  width:100%;
  flex:1 1 0;
  min-height:0;
  object-fit:cover;
  background:var(--fx-hy-clay);
}

/* ------------------------------------------------- Key benefits ------- */
.fx-hy-benefits{
  background:#FCFCFC;
  border-top:1px solid var(--fx-line);
  padding-block:80px;
}
.fx-hy-benefits .fx-hy-wrap{padding-inline:40px}
.fx-hy-benefits__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}
.fx-hy-kicker{
  font-family:var(--fx-sans-geo);
  font-size:10px;
  font-weight:400;
  line-height:15px;
  letter-spacing:.5em;          /* Figma: 5px on 10px */
  text-transform:uppercase;
  color:var(--fx-gold);
}
.fx-hy-benefits__intro .fx-hy-h2{
  margin-top:16px;
  line-height:1.2;              /* Figma: 48px on 40px */
  color:var(--fx-hy-text);
}
.fx-hy-benefits__strip{
  flex:none;
  width:430px;
  height:80px;
  overflow:hidden;
  background:var(--fx-line);
}
.fx-hy-benefits__img,
.fx-hy-benefits__strip .fx-ph{width:100%;height:100%;object-fit:cover;opacity:.7}

.fx-hy-benefits__grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:64px;
  background:#fff;
  border:1px solid var(--fx-line);
}
.fx-hy-benefit{position:relative;padding:32px;border-right:1px solid var(--fx-line)}
.fx-hy-benefit:last-child{border-right:0}
/* The three cream pips the frame parks on the first rules. */
.fx-hy-benefit:nth-child(-n+3)::after{
  content:"";
  position:absolute;
  right:-4px;
  top:148.88px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--fx-cream);
}
.fx-hy-benefit__num{
  display:block;
  font-family:var(--fx-serif-display);
  font-size:24px;
  font-weight:400;
  line-height:32px;
  color:var(--fx-gold);
}
.fx-hy-benefit__title{
  margin-top:20px;
  font-size:18px;
  font-weight:500;
  line-height:24px;
  color:var(--fx-hy-text);
}
.fx-hy-benefit__text{
  margin-top:12px;
  font-size:14px;
  font-weight:400;
  line-height:20px;
  color:var(--fx-text-light);
}

/* ----------------------------------------------------- Candidacy ------ */
.fx-hy-candidacy{background:#fff}
.fx-hy-candidacy__panel{background:var(--fx-ink);padding:80px 56px}
.fx-hy-candidacy__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:60px;
  align-items:start;
}
.fx-hy-candidacy .fx-hy-eyebrow{margin-bottom:14.757px}
.fx-hy-candidacy .fx-hy-h2{margin-bottom:39.351px}
.fx-hy-candidacy__lede{
  margin-bottom:16px;
  font-size:18px;
  font-weight:300;
  line-height:31.973px;
  color:#C0B5A0;
}
.fx-hy-checks li{
  display:flex;
  align-items:flex-start;
  gap:19.675px;
  padding-block:19.675px;
  border-bottom:1.23px solid #3A3220;
}
.fx-hy-checks li:last-child{border-bottom:0}
.fx-hy-checks .fx-hy-dot{width:7.378px;height:7.378px;margin-top:9.838px}
.fx-hy-checks p{
  flex:1 1 0;
  min-width:0;
  font-size:18px;
  font-weight:300;
  line-height:26px;
  color:#D4C9B0;
}

.fx-hy-candidacy__aside{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-self:stretch;
}
.fx-hy-note{
  background:#2A2218;
  border:1.23px solid rgba(180,133,61,.13);
  padding:24px;
}
.fx-hy-note__title{
  margin-bottom:12px;
  font-size:18px;
  font-weight:500;
  line-height:normal;
  color:var(--fx-gold);
}
.fx-hy-note__text{
  font-size:14px;
  font-weight:300;
  line-height:22px;
  color:#C0B5A0;
}
/* flex-basis 0 with min-height 0, not `1 1 auto`: with `auto` the basis is the
   photograph's own 1100px, which drives the grid row instead of filling what
   the copy column leaves — the image ends up three times its designed height.
   At 0 the column contributes nothing to row sizing, so the row is the copy
   column, and the image then fills the 326.74px the frame leaves under the
   note. */
.fx-hy-candidacy__media{flex:1 1 0;min-height:0;overflow:hidden;background:#3A3220}
.fx-hy-candidacy__img,
.fx-hy-candidacy__media .fx-ph{width:100%;height:100%;object-fit:cover;opacity:.8}

/* ----------------------------------------------------- Aftercare ------ */
.fx-hy-aftercare{background:#fff;padding-block:80px}
.fx-hy-aftercare__head{
  max-width:848px;              /* Figma: 1392 less 272 either side */
  margin-inline:auto;
  text-align:center;
}
.fx-hy-aftercare .fx-hy-eyebrow{margin-bottom:14.757px}
.fx-hy-aftercare .fx-hy-h2{margin-bottom:14.757px}
.fx-hy-aftercare__lede{
  font-size:19.675px;
  font-weight:300;
  line-height:31.973px;
  color:var(--fx-text-light);
}
.fx-hy-aftercare__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:60px;
}
.fx-hy-care{
  background:var(--fx-hy-shell);
  border:1.23px solid #E9E0D0;
  border-radius:16px;
  padding:24px;
}
.fx-hy-care__num{
  display:block;
  font-family:var(--fx-serif);
  font-size:34.432px;
  font-weight:400;
  line-height:51.648px;
  color:var(--fx-gold);
}
.fx-hy-care__title{
  margin-top:12px;
  font-size:18.446px;
  font-weight:600;
  line-height:27.669px;
  color:var(--fx-ink);
}
.fx-hy-care__text{
  margin-top:12px;
  font-size:17.216px;
  font-weight:300;
  line-height:24.594px;
  color:var(--fx-text-light);
}

/* --------------------------------------------------- Side effects ----- */
.fx-hy-safety{background:#fff}
.fx-hy-safety__panel{background:var(--fx-ink);padding:80px 56px}
.fx-hy-safety__inner{display:flex;align-items:center;gap:40px}
.fx-hy-safety__body{flex:1 1 0;min-width:0;padding-right:120px}
.fx-hy-safety .fx-hy-h2{margin-top:8px}
.fx-hy-safety__lede{
  margin-top:24px;
  font-size:14px;
  font-weight:300;
  line-height:22px;
  color:rgba(255,255,255,.55);
}
/* gap:1px over the pale ground draws the hairlines between the rows. */
.fx-hy-effects{
  flex:none;
  width:494.953px;
  display:grid;
  gap:1px;
  background:rgba(255,255,255,.08);
}
.fx-hy-effect{background:var(--fx-ink);padding:16px 24px}
.fx-hy-effect__glyph{
  display:block;
  font-size:20px;
  line-height:30px;
  color:var(--fx-gold);
}
.fx-hy-effect__text{
  margin-top:8px;
  font-size:14px;
  font-weight:300;
  line-height:20px;
  color:rgba(255,255,255,.48);
}

/* ------------------------------------------------- Consult band ------- */
.fx-hy-consult{background:#fff;padding-block:70.26px}
.fx-hy-consult .fx-hy-wrap{padding-inline:58.55px}
.fx-hy-consult__inner{display:flex;align-items:center;gap:80px}
.fx-hy-consult__body{flex:1 1 0;min-width:0}
.fx-hy-consult__text{
  margin-top:8px;
  font-size:16px;
  font-weight:300;
  line-height:normal;
  color:#777;
}
.fx-hy-consult__actions{flex:none;display:flex;gap:12px;justify-content:flex-end}

/* --------------------------------------------- Before and after ------- */
.fx-hy-results{background:#fff}
.fx-hy-results .fx-hy-wrap{padding:24px}
.fx-hy-results__panel{background:var(--fx-cream);padding:80px 40px}
.fx-hy-results__inner{display:flex;align-items:center;gap:80px}
.fx-hy-results__body{flex:1 1 0;min-width:0}
.fx-hy-results .fx-hy-eyebrow{margin-bottom:16px}
.fx-hy-results .fx-hy-h2{margin-bottom:32px}
.fx-hy-results__text{
  margin-bottom:32px;
  font-size:20px;
  font-weight:300;
  line-height:28px;
  color:var(--fx-ink);
}
.fx-hy-results__actions{display:flex}
.fx-hy-results__media{
  flex:1 1 0;
  min-width:0;
  height:401px;
  padding:8px;
  opacity:.75;
}
.fx-hy-results__img,
.fx-hy-results__media .fx-ph{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}

/* ---------------------------------------------------------- FAQ ------- */
.fx-hy-faq{background:var(--fx-hy-sand);padding-block:98.377px}
.fx-hy-faq .fx-hy-wrap{padding-inline:29.513px}
.fx-hy-faq__head{text-align:center;margin-bottom:59.026px}
.fx-hy-faq .fx-hy-eyebrow{margin-bottom:14.757px}
.fx-hy-faq__title{
  font-family:var(--fx-sans);
  font-size:clamp(28px,3.42vw,49.189px);
  font-weight:400;
  line-height:1.5;              /* Figma: 73.783px on 49.189px */
  letter-spacing:-.04em;        /* Figma: -1.9675px on 49.189px */
  color:var(--fx-ink);
}
.fx-hy-faq__item{border-bottom:1.23px solid #E0D5C5}
.fx-hy-faq__heading{margin:0}
.fx-hy-faq__q{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:19.675px;
  padding-block:24.594px;
  text-align:left;
  font-family:var(--fx-sans);
  font-size:20.905px;
  font-weight:500;
  line-height:31.358px;
  color:var(--fx-ink);
  transition:color .2s ease;
}
.fx-hy-faq__q:hover{color:var(--fx-gold)}
.fx-hy-faq__q--static{display:block;cursor:default}
.fx-hy-faq__sign{
  flex:none;
  width:34.432px;
  padding-left:19.675px;
  font-size:27.054px;
  font-weight:400;
  line-height:40.581px;
  color:var(--fx-gold);
  transition:transform .25s ease;
}
.fx-hy-faq__q[aria-expanded="true"] .fx-hy-faq__sign{transform:rotate(45deg)}
.fx-hy-faq__a{padding-bottom:24.594px;max-width:80ch}
.fx-hy-faq__a p{
  font-size:17.216px;
  font-weight:300;
  line-height:28px;
  color:var(--fx-text-light);
}

/* ------------------------------------------ Related treatments -------- */
.fx-hy-related{background:var(--fx-hy-shell);padding-block:80px}
.fx-hy-related__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:49.189px;
}
.fx-hy-related .fx-hy-eyebrow{margin-bottom:14.757px}
.fx-hy-related__all{
  flex:none;
  font-size:17.216px;
  font-weight:400;
  line-height:25.824px;
  letter-spacing:.036em;        /* Figma: 0.6149px on 17.216px */
  color:var(--fx-gold);
  transition:opacity .2s ease;
}
.fx-hy-related__all:hover{opacity:.75}
.fx-hy-related__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24.594px;
}
.fx-hy-rcard__link{display:block}
.fx-hy-rcard__media{
  position:relative;
  display:block;
  height:319.727px;
  overflow:hidden;
  background:var(--fx-hy-clay);
}
.fx-hy-rcard__img,
.fx-hy-rcard__media .fx-ph{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.fx-hy-rcard__link:hover .fx-hy-rcard__img{transform:scale(1.045)}
.fx-hy-rcard__badge{
  position:absolute;
  left:14.757px;
  top:14.757px;
  padding:4.919px 9.838px;
  background:var(--fx-gold);
  font-size:12.297px;
  font-weight:500;
  line-height:18.446px;
  letter-spacing:.05em;         /* Figma: 0.6149px on 12.297px */
  text-transform:uppercase;
  color:#fff;
}
.fx-hy-rcard__title{
  margin-top:14.757px;
  font-size:20px;
  font-weight:500;
  line-height:29.513px;
  color:var(--fx-ink);
}
.fx-hy-rcard__cta{
  display:inline-flex;
  align-items:center;
  gap:9.838px;
  margin-top:14.757px;
  font-size:15.986px;
  font-weight:400;
  line-height:23.98px;
  letter-spacing:.038em;        /* Figma: 0.6149px on 15.986px */
  text-transform:uppercase;
  color:var(--fx-gold);
}
.fx-hy-rcard__cta span{font-size:19.675px;line-height:29.513px}

/* ------------------------------------------------- Closing CTA -------- */
.fx-hy-cta{background:var(--fx-gold);padding-block:81.97px}
.fx-hy-cta .fx-hy-wrap{padding-inline:58.55px}
.fx-hy-cta__inner{max-width:620px;margin-inline:auto;text-align:center}
.fx-hy-cta__title{
  font-family:var(--fx-sans);
  font-size:clamp(28px,3.2vw,40px);
  font-weight:400;
  line-height:1.537;            /* Figma: 61.478px on 40px */
  letter-spacing:-.0154em;      /* Figma: -0.6148px on 40px */
  color:#fff;
}
.fx-hy-cta__text{
  margin-top:13.6px;
  font-size:16px;
  font-weight:300;
  line-height:normal;
  color:rgba(255,255,255,.82);
}
.fx-hy-cta__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:36px;
}

/* --------------------------------------------------- Breakpoints ------ */
@media (max-width:1280px){
  .fx-hy-about__media{width:min(42vw,550px);height:320px}
  .fx-hy-effects{width:min(42vw,494.953px)}
  .fx-hy-safety__body{padding-right:40px}
  .fx-hy-hero__media{margin-left:40px;height:520px}
  .fx-hy-benefits__strip{width:min(32vw,430px)}
  .fx-hy-benefit{padding:24px}
  .fx-hy-benefit:nth-child(-n+3)::after{display:none}
}

@media (max-width:1100px){
  .fx-hy-process__inner,
  .fx-hy-results__inner{gap:48px}
  .fx-hy-candidacy__inner{gap:40px}
  .fx-hy-benefits__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fx-hy-benefit{border-bottom:1px solid var(--fx-line)}
  .fx-hy-benefit:nth-child(3n){border-right:0}
  .fx-hy-benefit:nth-child(n+4){border-bottom:0}
  .fx-hy-related__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-hy-aftercare__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:980px){
  .fx-lighthead .fx-header__inner{padding-inline:var(--fx-gutter)}
  .fx-lighthead .fx-header .fx-brand{margin-left:0}
  .fx-lighthead .fx-burger{margin-right:0}

  .fx-hy-hero{padding-block:56px}
  .fx-hy-hero__inner{grid-template-columns:minmax(0,1fr);gap:40px}
  .fx-hy-hero__media{margin-left:0;height:420px}
  .fx-hy-crumbs{margin-bottom:32px}

  .fx-hy-about__inner{flex-direction:column;gap:40px}
  .fx-hy-about__media{position:static;width:100%;height:300px}
  .fx-hy-about .fx-hy-wrap,
  .fx-hy-process .fx-hy-wrap,
  .fx-hy-benefits .fx-hy-wrap{padding-inline:24px}

  .fx-hy-process__inner{grid-template-columns:minmax(0,1fr);gap:40px}
  .fx-hy-process__media{padding-block:0}
  .fx-hy-process__img,
  .fx-hy-process__media .fx-ph{min-height:320px}

  .fx-hy-benefits__head{flex-direction:column;align-items:flex-start;gap:24px}
  .fx-hy-benefits__strip{width:100%}
  .fx-hy-benefits__grid{margin-top:40px}

  .fx-hy-candidacy__panel,
  .fx-hy-safety__panel{padding:56px 28px}
  .fx-hy-candidacy__inner{grid-template-columns:minmax(0,1fr)}
  .fx-hy-candidacy__media{min-height:320px}

  .fx-hy-safety__inner{flex-direction:column;align-items:stretch;gap:32px}
  .fx-hy-safety__body{padding-right:0}
  .fx-hy-effects{width:100%}

  .fx-hy-consult .fx-hy-wrap,
  .fx-hy-cta .fx-hy-wrap{padding-inline:28px}
  .fx-hy-consult__inner{flex-direction:column;align-items:flex-start;gap:28px}
  .fx-hy-consult__actions{justify-content:flex-start}

  .fx-hy-results__panel{padding:56px 28px}
  .fx-hy-results__inner{flex-direction:column;gap:40px}
  .fx-hy-results__media{width:100%;height:340px}

  .fx-hy-faq{padding-block:72px}
  .fx-hy-faq__head{margin-bottom:40px}
}

@media (max-width:640px){
  .fx-hy-hero{padding-block:44px}
  .fx-hy-hero__actions{flex-direction:column;max-width:none}
  .fx-hy-hero__actions .fx-btn{width:100%}
  .fx-hy-hero__media{height:340px}
  .fx-hy-stats{gap:20px 28px}

  .fx-hy-about,
  .fx-hy-process,
  .fx-hy-benefits,
  .fx-hy-aftercare,
  .fx-hy-related{padding-block:56px}
  .fx-hy-about__media{height:240px}
  .fx-hy-dotlist li{align-items:flex-start;gap:16px}

  .fx-hy-step{flex-direction:column;gap:8px}
  .fx-hy-step__num{width:auto}

  .fx-hy-benefits__grid,
  .fx-hy-aftercare__grid,
  .fx-hy-related__grid{grid-template-columns:minmax(0,1fr)}
  .fx-hy-benefit{border-right:0;border-bottom:1px solid var(--fx-line)}
  .fx-hy-benefit:last-child{border-bottom:0}

  .fx-hy-aftercare__head{text-align:left}
  .fx-hy-aftercare .fx-hy-eyebrow--center{justify-content:flex-start}

  .fx-hy-consult__actions{flex-direction:column;align-self:stretch}
  .fx-hy-consult__actions .fx-btn{width:100%}

  .fx-hy-results__media{height:260px}
  .fx-hy-related__head{flex-direction:column;align-items:flex-start;gap:20px}

  .fx-hy-faq{padding-block:56px}
  .fx-hy-cta{padding-block:60px}
  .fx-hy-cta__actions{flex-direction:column}
  .fx-hy-cta__actions .fx-btn{width:100%}
}

/* ====================================== Tear Trough treatment detail ==
   Figma frame 16481:18619, "Tear Trough Filler". The second page on the
   treatment-detail pattern, so its templates reuse the .fx-hy-* components
   above and add .fx-tt as a page scope. Everything here is a delta against
   those components; only the benefits grid and the closing banner are
   compositions of their own.

   What this frame does differently, in one place:
     · every panel, card image and photo is rounded (16 / 19.675 / 24 / 24.594);
     · section heads run 49.189px rather than 40px, and the step, card and body
       type steps up with them;
     · sections are inset 29.513px rather than 24 or 40;
     · benefits are a 3x2 card grid with a gold numeral disc, not a five-across
       bordered strip;
     · aftercare carries five cards, square rather than rounded;
     · there is no light consultation band, and the closing CTA is a
       left-aligned banner with one button.
   ====================================================================== */

/* Heading scale this frame uses for its centred section heads. */
.fx-tt-h2{
  font-family:var(--fx-sans);
  font-size:clamp(28px,3.42vw,49.189px);
  font-weight:400;
  line-height:1.5;              /* Figma: 73.783px on 49.189px */
  letter-spacing:-.04em;        /* Figma: -1.9675px on 49.189px */
  color:var(--fx-ink);
  text-align:center;
}

/* The same step up applied to the shared .fx-hy-h2 on this page. */
.fx-tt .fx-hy-h2{
  font-size:clamp(28px,3.42vw,49.189px);
  line-height:1.5;
  letter-spacing:-.04em;
}
/* The hero-adjacent heads stay at the smaller size the frame keeps them at. */
.fx-tt-about .fx-hy-h2,
.fx-tt-results .fx-hy-h2,
.fx-tt-related .fx-hy-h2{
  font-size:clamp(28px,3vw,40px);
  line-height:normal;
}
.fx-tt-about .fx-hy-h2{letter-spacing:-.04em}   /* Figma: -1.6px on 40px */

/* ------------------------------------------------------ Buttons ------- */
.fx-tt-btn--outline{
  --btn-bg:transparent;
  --btn-fg:var(--fx-ink);
  --btn-bd:var(--fx-ink);
  border-radius:0;
  padding:14px 32px;
  font-size:12.8px;
  font-weight:500;
  letter-spacing:.06em;         /* Figma: 0.768px on 12.8px */
}
.fx-tt-btn--outline:hover{--btn-bg:var(--fx-ink);--btn-fg:#fff}

.fx-tt-btn--light{
  --btn-bg:#fff;
  --btn-fg:var(--fx-gold);
  --btn-bd:#fff;
  border-radius:0;
  padding:24.594px 49.189px;
  font-size:15.986px;
  font-weight:600;
  letter-spacing:.077em;        /* Figma: 1.2297px on 15.986px */
}
.fx-tt-btn--light:hover{--btn-bg:var(--fx-ink);--btn-fg:#fff;--btn-bd:var(--fx-ink)}

/* --------------------------------------------------------- Hero ------- */
.fx-tt-hero .fx-hy-hero__inner{gap:52px}
/* The frame insets this chip 16px, not 24. */
.fx-tt-hero .fx-hy-chip{left:16px;bottom:16px}
.fx-tt-hero .fx-hy-chip__title{
  font-family:var(--fx-sans);
  line-height:33px;
}

/* ------------------------------------------- What is Tear Trough ------ */
.fx-tt-about .fx-hy-about__inner{gap:80px}
.fx-tt-about .fx-hy-about__media{border-radius:24px}
.fx-tt-about .fx-hy-about__text{margin-bottom:40px}
/* Unlike the Hyalase list, every row here keeps its rule. */
.fx-tt-about .fx-hy-dotlist li:last-child{border-bottom:1px solid var(--fx-text-light)}
.fx-tt-about .fx-hy-dotlist p{font-weight:300;color:var(--fx-hy-text)}
.fx-tt-about .fx-hy-dotlist strong{font-weight:500}

/* ------------------------------------------------------ Process ------- */
.fx-tt-process{padding-block:98.377px}
.fx-tt-process .fx-hy-wrap{padding-inline:29.513px}
.fx-tt-process .fx-hy-process__inner{
  grid-template-columns:minmax(0,1fr) 491.887px;
  gap:78.702px;
}
.fx-tt-process .fx-hy-eyebrow{margin-bottom:14.757px}
.fx-tt-process .fx-hy-h2{margin-bottom:49.189px}
.fx-tt-process .fx-hy-step{
  gap:39.351px;
  padding-block:29.513px;
  border-bottom:1.23px solid #D5C9B4;
}
.fx-tt-process .fx-hy-step:last-child{border-bottom:1.23px solid #D5C9B4}
.fx-tt-process .fx-hy-step__num{
  width:59.026px;
  font-family:var(--fx-serif);
  font-size:39.351px;
  line-height:39.351px;
}
.fx-tt-process .fx-hy-step__title{
  font-size:22.135px;
  font-weight:600;
  line-height:33.202px;
}
.fx-tt-process .fx-hy-step__text{
  margin-top:9.838px;
  font-size:19.675px;
  line-height:29.513px;
}
/* A fixed, rounded photograph rather than one stretched to the copy. */
.fx-tt-process .fx-hy-process__media{
  align-self:center;
  padding-block:0;
  width:491.887px;
  height:688.642px;
  border-radius:24.594px;
  overflow:hidden;
  background:var(--fx-hy-clay);
}
.fx-tt-process .fx-hy-process__img,
.fx-tt-process .fx-hy-process__media .fx-ph{
  flex:1 1 0;
  min-height:0;
  height:100%;
}

/* ------------------------------------------------ Key benefits -------- */
.fx-tt-benefits{background:#fff;padding-block:98.377px}
.fx-tt-benefits .fx-hy-wrap{padding-inline:29.513px}
.fx-tt-benefits__head{
  max-width:787.02px;           /* Figma: the heading column */
  margin-inline:auto;
  text-align:center;
  margin-bottom:59.026px;
}
.fx-tt-benefits .fx-hy-eyebrow{margin-bottom:14.757px}
.fx-tt-benefits__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:29.513px;
}
.fx-tt-bcard{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14.757px;
  padding:39.351px;
  background:#fff;
  border:1.23px solid #E9E0D0;
}
/* The frame alternates the grounds along the grid, so the rule is the cell
   position rather than anything about the card. */
.fx-tt-bcard:nth-child(odd){background:var(--fx-hy-shell)}
.fx-tt-bcard__num{
  display:grid;
  place-items:center;
  flex:none;
  width:39.351px;
  height:39.351px;
  border-radius:50%;
  background:var(--fx-gold);
  font-family:var(--fx-serif);
  font-size:17.216px;
  font-weight:400;
  line-height:25.824px;
  color:#fff;
}
.fx-tt-bcard__title{
  font-size:22.135px;
  font-weight:600;
  line-height:33.202px;
  color:var(--fx-ink);
}
.fx-tt-bcard__text{
  font-size:18.446px;
  font-weight:300;
  line-height:27.054px;
  color:var(--fx-text-light);
}

/* ----------------------------------------------------- Candidacy ------ */
/* On this frame the ink ground is the section itself, so there is no panel. */
.fx-tt-candidacy{background:var(--fx-ink);padding-block:98.377px}
.fx-tt-candidacy .fx-hy-wrap{padding-inline:29.513px}
.fx-tt-candidacy .fx-hy-candidacy__inner{
  grid-template-columns:minmax(0,1fr) 516.482px;
  gap:78.702px;
}
.fx-tt-candidacy .fx-hy-eyebrow{margin-bottom:14.757px}
.fx-tt-candidacy .fx-hy-h2{margin-bottom:39.351px}
.fx-tt-candidacy .fx-hy-candidacy__lede{
  margin-bottom:0;
  font-size:19.675px;
  line-height:31.973px;
}
.fx-tt-candidacy .fx-hy-checks{margin-top:39.351px}
.fx-tt-candidacy .fx-hy-checks li:last-child{border-bottom:1.23px solid #3A3220}
.fx-tt-candidacy .fx-hy-checks p{font-size:19.675px;line-height:29.513px}
.fx-tt-candidacy .fx-hy-candidacy__aside{padding-top:19.675px;gap:19.675px}
.fx-tt-candidacy .fx-hy-note{padding:29.513px;border-radius:19.675px}
.fx-tt-candidacy .fx-hy-note__title{
  margin-bottom:14.757px;
  font-size:19.675px;
  font-weight:600;
  line-height:29.513px;
}
.fx-tt-candidacy .fx-hy-note__text{font-size:18.446px;line-height:29.513px}
/* A fixed, rounded photograph, so it is not the column filler this time. */
.fx-tt-candidacy .fx-hy-candidacy__media{
  flex:none;
  height:368.915px;
  border-radius:24.594px;
}

/* ----------------------------------------------------- Aftercare ------ */
.fx-tt-aftercare{padding-block:98.377px}
.fx-tt-aftercare .fx-hy-wrap{padding-inline:29.513px}
.fx-tt-aftercare .fx-hy-aftercare__head{max-width:none}
.fx-tt-aftercare .fx-hy-eyebrow{margin-bottom:14.757px}
.fx-tt-aftercare .fx-tt-h2{margin-bottom:14.757px}
.fx-tt-aftercare .fx-hy-aftercare__lede{
  max-width:713.237px;          /* Figma: the sub-copy column */
  margin-inline:auto;
}
.fx-tt-aftercare .fx-hy-aftercare__grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:29.513px;
  margin-top:59.026px;
}
.fx-tt-aftercare .fx-hy-care{border-radius:0;padding:24.594px}

/* ------------------------------------------------ Before and after ---- */
.fx-tt-results .fx-hy-results__panel{border-radius:24px}
.fx-tt-results .fx-hy-results__media{border-radius:16px;overflow:hidden}

/* ------------------------------------------------ Related treatments -- */
.fx-tt-related .fx-hy-rcard__media{border-radius:19.675px}

/* ---------------------------------------------------- Closing CTA ----- */
.fx-tt-cta{background:var(--fx-gold);padding-block:98.377px}
.fx-tt-cta .fx-hy-wrap{padding-inline:29.513px}
.fx-tt-cta__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:59.026px;
}
.fx-tt-cta__body{max-width:933.356px}
.fx-tt-cta__title{
  font-family:var(--fx-sans);
  font-size:clamp(30px,3.6vw,51.648px);
  font-weight:400;
  line-height:1.1;              /* Figma: 56.813px on 51.648px */
  letter-spacing:-.036em;       /* Figma: -1.8446px on 51.648px */
  color:#fff;
}
.fx-tt-cta__text{
  max-width:639.453px;
  margin-top:19.675px;
  font-size:20.905px;
  font-weight:300;
  line-height:31.973px;
  color:rgba(255,255,255,.85);
}
.fx-tt-cta__actions{flex:none;display:flex}

/* --------------------------------------------------- Breakpoints ------ */
@media (max-width:1280px){
  .fx-tt-process .fx-hy-process__inner{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
  .fx-tt-process .fx-hy-process__media{width:auto;height:560px}
  .fx-tt-candidacy .fx-hy-candidacy__inner{grid-template-columns:minmax(0,1fr) minmax(0,420px)}
  .fx-tt-aftercare .fx-hy-aftercare__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:1100px){
  .fx-tt-benefits__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-tt-process .fx-hy-process__inner,
  .fx-tt-candidacy .fx-hy-candidacy__inner{gap:48px}
  .fx-tt-cta__inner{gap:40px}
}

@media (max-width:980px){
  .fx-tt-hero .fx-hy-hero__inner{gap:40px}
  .fx-tt-about .fx-hy-about__inner{gap:40px}

  .fx-tt-process .fx-hy-wrap,
  .fx-tt-benefits .fx-hy-wrap,
  .fx-tt-candidacy .fx-hy-wrap,
  .fx-tt-aftercare .fx-hy-wrap,
  .fx-tt-cta .fx-hy-wrap{padding-inline:28px}

  .fx-tt-process,
  .fx-tt-benefits,
  .fx-tt-candidacy,
  .fx-tt-aftercare,
  .fx-tt-cta{padding-block:72px}

  .fx-tt-process .fx-hy-process__inner{grid-template-columns:minmax(0,1fr)}
  .fx-tt-process .fx-hy-process__media{width:100%;height:420px;align-self:stretch}

  .fx-tt-candidacy .fx-hy-candidacy__inner{grid-template-columns:minmax(0,1fr)}
  .fx-tt-candidacy .fx-hy-candidacy__aside{padding-top:0}
  .fx-tt-candidacy .fx-hy-candidacy__media{height:320px}

  .fx-tt-aftercare .fx-hy-aftercare__grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .fx-tt-cta__inner{flex-direction:column;align-items:flex-start;gap:32px}
  .fx-tt-cta__actions{align-self:stretch}
  .fx-tt-cta__actions .fx-btn{width:100%}
}

@media (max-width:640px){
  .fx-tt-benefits__grid,
  .fx-tt-aftercare .fx-hy-aftercare__grid{grid-template-columns:minmax(0,1fr)}
  .fx-tt-bcard{padding:28px}
  .fx-tt-process .fx-hy-process__media{height:300px}
  .fx-tt-process .fx-hy-step{flex-direction:column;gap:8px}
  .fx-tt-process .fx-hy-step__num{width:auto}
  .fx-tt-btn--light{padding:18px 28px;font-size:13px}
  .fx-tt-aftercare .fx-hy-aftercare__head{text-align:left}
  .fx-tt-aftercare .fx-tt-h2{text-align:left}
  .fx-tt-aftercare .fx-hy-eyebrow--center{justify-content:flex-start}
  .fx-tt-aftercare .fx-hy-aftercare__lede{margin-inline:0}
}

/* =================================== Facial Packages treatment detail ==
   Figma frame 16516:20054, "Facial Packages". The third page on the
   treatment-detail pattern and the closest to the Hyalase frame: its hero,
   aftercare, consultation band, FAQ and closing CTA are the same components
   at the same sizes and need no rules at all here.

   What this block carries is only the difference:
     · the three package bands, which are the "how it works" component with a
       longer body, a wider column gap, and the image and ground alternating;
     · four rounded corners the frame adds (candidacy and side-effects panels
       24, the before/after panel 24 with a 16 image, related cards 19.675,
       the benefits header strip 8).
   ====================================================================== */

/* ----------------------------------------------- Package bands -------- */
.fx-fp-package .fx-hy-about__inner{gap:80px}
/* The frame alternates the ground with the side, so both come off the row
   index rather than off anything about the package. */
.fx-fp-package--sand{background:var(--fx-hy-sand)}
.fx-fp-package--flip .fx-hy-about__inner{flex-direction:row-reverse}

.fx-fp-package__intro{
  margin-bottom:24px;
  font-family:var(--fx-sans-alt);
  font-size:18px;
  font-weight:400;
  line-height:28px;
  color:var(--fx-ink);
}
.fx-fp-package__label{
  margin-bottom:16px;
  font-family:var(--fx-sans-alt);
  font-size:18px;
  font-weight:600;
  line-height:28px;
  color:var(--fx-ink);
}
.fx-fp-package__text{
  margin-bottom:24px;
  font-size:18px;
  font-weight:400;
  line-height:28px;
  color:var(--fx-ink);
}
/* The frame drops the top padding on the first row so the list sits tight
   under its label; every other row keeps the pair. */
.fx-fp-package .fx-hy-dotlist li:first-child{padding-top:0}
.fx-fp-package .fx-hy-dotlist{margin-bottom:40px}

/* -------------------------------------------- Rounded corners --------- */
.fx-fp-benefits .fx-hy-benefits__strip{border-radius:8px}
.fx-fp-candidacy .fx-hy-candidacy__panel{border-radius:24px}
.fx-fp-safety .fx-hy-safety__panel{border-radius:24px}
.fx-fp-results .fx-hy-results__panel{border-radius:24px}
.fx-fp-results .fx-hy-results__media{border-radius:16px;overflow:hidden}
.fx-fp-related .fx-hy-rcard__media{border-radius:19.675px}

/* --------------------------------------------------- Breakpoints ------ */
@media (max-width:980px){
  .fx-fp-package .fx-hy-about__inner{gap:40px}
  /* Stacked, the image leads every band; a reversed column would put the
     photograph under its own copy on alternate bands only. */
  .fx-fp-package--flip .fx-hy-about__inner{flex-direction:column}
}

/* ============================== Cheek, Chin & Jaw treatment detail ==
   Figma frame 16452:19410. The fourth page on the treatment-detail pattern
   and the one that departs furthest from it. Reused unchanged: the hero, the
   consultation band, the before/after panel, the related grid and the closing
   CTA. Everything below is new to this frame.

   Four things it does that no other treatment frame does:
     · the area bands join each bullet lead to its description with an em dash
       and close on a numbered panel;
     · the second band puts a dark three-up stat strip under its photograph;
     · "Why choose dermal fillers?" is the only treatment heading set in
       Fraunces, with its second line in gold italic;
     · the FAQ is not the accordion the other pages use — narrower rows,
       Fraunces questions, a grey plus.
   ====================================================================== */

/* Section kicker: 11.2px Outfit SemiBold, wide track. Used by three bands. */
.fx-cj-kicker{
  font-family:var(--fx-sans);
  font-size:11.2px;
  font-weight:600;
  line-height:16.8px;
  letter-spacing:.16em;         /* Figma: 1.792px on 11.2px */
  text-transform:uppercase;
  color:var(--fx-gold);
}
.fx-cj-kicker--center{text-align:center}

/* ------------------------------------------------------- Hero -------- */
.fx-cj-hero .fx-hy-hero__inner{gap:80px}
/* This frame insets the caption 16px, not 24. */
.fx-cj-hero .fx-hy-chip{left:16px;bottom:16px}

/* -------------------------------------------------- Area bands ------- */
.fx-cj-area{background:var(--fx-paper);padding-block:80px}
.fx-cj-area--flip{background:var(--fx-cream)}
.fx-cj-area .fx-hy-wrap{padding-inline:24px}
.fx-cj-area--flip .fx-hy-wrap{padding-inline:40px}
.fx-cj-area__inner{display:flex;align-items:flex-start;gap:80px}
.fx-cj-area__body{flex:1 1 0;min-width:0}

/* First band: a sticky photograph beside a long column. Second band: a fixed
   one with the stat strip under it, so it leads rather than trails. */
.fx-cj-area__media{
  flex:none;
  width:656px;
  position:sticky;
  top:96px;
  overflow:hidden;
  background:var(--fx-cream);
}
.fx-cj-area__img,
.fx-cj-area__media .fx-ph{width:100%;height:340px;object-fit:cover}

.fx-cj-area--flip .fx-cj-area__inner{flex-direction:row-reverse}
.fx-cj-area--flip .fx-cj-area__media{
  width:550px;
  position:static;
  background:transparent;
  overflow:visible;
}
.fx-cj-area--flip .fx-cj-area__img,
.fx-cj-area--flip .fx-cj-area__media .fx-ph{height:608.688px;background:#DDD}

.fx-cj-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:20px 24px;
  background:var(--fx-ink);
}
.fx-cj-strip__item{text-align:center}
.fx-cj-strip__value{
  font-family:var(--fx-serif);
  font-size:16px;
  font-weight:400;
  line-height:16px;
  color:var(--fx-gold);
}
.fx-cj-strip__label{
  margin:4px 0 0;
  font-size:9.6px;
  line-height:14.4px;
  letter-spacing:.08em;         /* Figma: 0.768px on 9.6px */
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

.fx-cj-area .fx-hy-eyebrow{margin-bottom:9px}
.fx-cj-area .fx-hy-h2{margin-bottom:32px;letter-spacing:-.04em}
.fx-cj-area__text{
  display:grid;
  gap:8px;
  margin-bottom:40px;
  font-family:var(--fx-sans-alt);
  font-size:18px;
  line-height:28px;
  color:var(--fx-ink);
}
/* Every row keeps its rule on this frame, and the lead is Medium against the
   Light description. */
.fx-cj-area__list{margin-bottom:40px}
.fx-cj-area__list li:last-child{border-bottom:1px solid var(--fx-text-light)}
.fx-cj-area__list p{font-weight:300}
.fx-cj-area__list strong{font-weight:500}

.fx-cj-panel__title{
  margin-bottom:24px;
  font-family:var(--fx-sans);
  font-size:clamp(28px,3vw,40px);
  font-weight:400;
  line-height:normal;
  letter-spacing:-.04em;
  color:var(--fx-ink);
}
/* gap:1px over the border colour draws the rules between the rows. */
.fx-cj-panel{
  display:grid;
  gap:1px;
  margin-bottom:40px;
  border:1px solid var(--fx-line);
  border-radius:24px;
  overflow:hidden;
  background:var(--fx-line);
}
/* The banded panel loses its frame on the second band, where the rows sit on
   white against the cream ground instead. */
.fx-cj-area--flip .fx-cj-panel{border:0;border-radius:0;background:transparent}
.fx-cj-panel__row{
  display:flex;
  align-items:center;
  gap:24px;
  padding:24px 32px;
  background:#F3F3F3;
}
.fx-cj-area--flip .fx-cj-panel__row{background:#fff}
.fx-cj-panel__num{
  flex:none;
  width:32px;
  font-family:var(--fx-serif);
  font-size:25.6px;
  font-weight:300;
  line-height:25.6px;
  color:var(--fx-gold);
}
.fx-cj-panel__heading{
  font-size:18px;
  font-weight:400;
  line-height:normal;
  color:var(--fx-ink);
}
.fx-cj-panel__text{
  margin-top:6.4px;
  font-size:16px;
  font-weight:300;
  line-height:24px;
  color:var(--fx-ink);
}
.fx-cj-area__actions{display:flex}

/* --------------------------------------------- Why choose fillers ---- */
.fx-cj-why{background:var(--fx-ink);padding-block:93.68px}
.fx-cj-why .fx-hy-wrap{padding-inline:58.55px}
.fx-cj-why__inner{display:flex;align-items:center;gap:40px}
.fx-cj-why__body{flex:1 1 0;min-width:0;max-width:495px}
.fx-cj-why__title{
  margin-top:16px;
  font-family:var(--fx-serif);
  font-size:clamp(32px,3.25vw,46.84px);
  font-weight:400;
  line-height:1.1;              /* Figma: 51.524px on 46.84px */
  letter-spacing:-.015em;
  color:#fff;
}
.fx-cj-why__title span,
.fx-cj-why__title em{display:block}
.fx-cj-why__title em{font-style:italic;color:var(--fx-gold)}
.fx-cj-why__text{
  margin-top:24px;
  max-width:380px;
  font-size:14.72px;
  font-weight:300;
  line-height:27.232px;
  color:rgba(255,255,255,.55);
}
/* gap:1px over the pale ground draws the hairlines, as on the side-effects
   panel of the other frames. */
.fx-cj-why__grid{
  flex:none;
  display:grid;
  grid-template-columns:repeat(2,246.977px);
  gap:1px;
  background:rgba(255,255,255,.08);
}
.fx-cj-wcard{background:var(--fx-ink);padding:36px 32px}
.fx-cj-wcard__glyph{
  display:block;
  font-size:20px;
  line-height:30px;
  color:var(--fx-gold);
}
.fx-cj-wcard__title{
  margin-top:16px;
  font-family:var(--fx-serif);
  font-size:16px;
  font-weight:500;
  line-height:20.8px;
  color:#fff;
}
.fx-cj-wcard__text{
  margin-top:8px;
  font-size:13.12px;
  font-weight:300;
  line-height:22.96px;
  color:rgba(255,255,255,.48);
}

/* ------------------------------------------------------ Your visit --- */
.fx-cj-visit{background:#fff;padding:80px 0 81.97px}
.fx-cj-visit__inner{display:flex;align-items:center;gap:80px}
.fx-cj-visit__media{
  flex:none;
  width:502.953px;
  height:420px;
  overflow:hidden;
  background:var(--fx-cream);
}
.fx-cj-visit__img,
.fx-cj-visit__media .fx-ph{width:100%;height:100%;object-fit:cover}
.fx-cj-visit__body{flex:1 1 0;min-width:0;padding-block:16px}
.fx-cj-visit__title{
  margin-top:16px;
  font-family:var(--fx-sans);
  font-size:clamp(28px,2.85vw,40.985px);
  font-weight:400;
  line-height:1.15;             /* Figma: 47.133px on 40.985px */
  letter-spacing:-.015em;
  color:var(--fx-ink);
}
.fx-cj-visit__text{
  display:grid;
  gap:16px;
  margin-top:20px;
  font-size:15.2px;
  font-weight:300;
  line-height:28.12px;
  color:#777;
}

/* ------------------------------------------------------------ FAQ ---- */
.fx-cj-faq{background:var(--fx-hy-sand);padding-block:93.68px}
.fx-cj-faq .fx-hy-wrap{padding-inline:58.55px}
.fx-cj-faq__head{text-align:center;margin-bottom:56px}
.fx-cj-faq__title{
  margin-top:13.6px;
  font-family:var(--fx-serif);
  font-size:clamp(28px,2.85vw,40.985px);
  font-weight:400;
  line-height:1.5;              /* Figma: 61.478px on 40.985px */
  letter-spacing:-.015em;
  color:var(--fx-ink);
}
.fx-cj-faq__list{border-top:1px solid #E8E8E8}
.fx-cj-faq__item{border-bottom:1px solid #E8E8E8}
.fx-cj-faq__heading{margin:0}
.fx-cj-faq__q{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:21.6px;
  text-align:left;
  font-family:var(--fx-serif);
  font-size:16px;
  font-weight:500;
  line-height:22.4px;
  color:var(--fx-ink);
  transition:color .2s ease;
}
.fx-cj-faq__q:hover{color:var(--fx-gold)}
.fx-cj-faq__q--static{display:block;cursor:default}
.fx-cj-faq__sign{
  flex:none;
  font-family:var(--fx-sans);
  font-size:22.4px;
  font-weight:300;
  line-height:22.4px;
  color:#bbb;
  transition:transform .25s ease,color .2s ease;
}
.fx-cj-faq__q[aria-expanded="true"] .fx-cj-faq__sign{transform:rotate(45deg);color:var(--fx-gold)}
.fx-cj-faq__a{padding-bottom:21.6px;max-width:80ch}
.fx-cj-faq__a p{
  font-size:15.2px;
  font-weight:300;
  line-height:28.12px;
  color:#777;
}

/* ------------------------------------------------------ Closing CTA -- */
/* The closing title on this frame is longer than the Hyalase one and the
   frame still sets it on a single line, so the copy column is wider here.
   740px is the window that holds: the title needs 719.7px to fit on one
   line, and the paragraph beneath it collapses onto one line above 774px,
   where the frame draws two. */
.fx-cj-cta .fx-hy-cta__inner{max-width:740px}

/* -------------------------------------------- Rounded corners -------- */
.fx-cj-results .fx-hy-results__panel{border-radius:24px}
.fx-cj-results .fx-hy-results__media{border-radius:16px;overflow:hidden}
.fx-cj-related .fx-hy-rcard__media{border-radius:19.675px}

/* --------------------------------------------------- Breakpoints ------ */
@media (max-width:1280px){
  .fx-cj-area__media{width:min(46vw,656px)}
  .fx-cj-area--flip .fx-cj-area__media{width:min(40vw,550px)}
  .fx-cj-why__grid{flex:1 1 0;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-cj-why__inner{gap:32px}
  .fx-cj-visit__media{width:min(42vw,502.953px)}
}

@media (max-width:1100px){
  .fx-cj-area__inner{gap:48px}
  .fx-cj-visit__inner{gap:48px}
}

@media (max-width:980px){
  .fx-cj-hero .fx-hy-hero__inner{gap:40px}

  .fx-cj-area{padding-block:64px}
  .fx-cj-area__inner{flex-direction:column;gap:40px}
  /* Stacked, the photograph leads every band; a reversed column would put it
     under its own copy on the second one only. */
  .fx-cj-area--flip .fx-cj-area__inner{flex-direction:column}
  .fx-cj-area__media,
  .fx-cj-area--flip .fx-cj-area__media{position:static;width:100%}
  .fx-cj-area--flip .fx-cj-area__img,
  .fx-cj-area--flip .fx-cj-area__media .fx-ph{height:420px}

  .fx-cj-why{padding-block:72px}
  .fx-cj-why .fx-hy-wrap,
  .fx-cj-faq .fx-hy-wrap{padding-inline:28px}
  .fx-cj-why__inner{flex-direction:column;align-items:flex-start;gap:40px}
  .fx-cj-why__body{max-width:none}
  .fx-cj-why__grid{width:100%}

  .fx-cj-visit{padding-block:64px}
  .fx-cj-visit__inner{flex-direction:column;gap:40px}
  .fx-cj-visit__media{width:100%;height:360px}

  .fx-cj-faq{padding-block:72px}
}

@media (max-width:640px){
  .fx-cj-area__media .fx-cj-area__img,
  .fx-cj-area--flip .fx-cj-area__img{height:300px}
  .fx-cj-panel__row{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 24px}
  .fx-cj-panel__num{width:auto}
  .fx-cj-why__grid{grid-template-columns:minmax(0,1fr)}
  .fx-cj-visit__media{height:280px}
  .fx-cj-faq__head{text-align:left}
  .fx-cj-kicker--center{text-align:left}
}

/* ============================================================== Reveal == */
.fx-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.fx-reveal.is-in{opacity:1;transform:none}

/* ========================================================= Breakpoints == */
@media (max-width:1100px){
  :root{--fx-section:88px}
  .fx-nav ul{gap:24px}
  .fx-nav a{font-size:11.5px}
  .fx-about__grid{gap:48px}
}

@media (max-width:980px){
  .fx-nav,.fx-header__cta{display:none}
  .fx-burger{display:flex}
  .fx-header__inner{justify-content:space-between}
  .fx-nav.is-open{
    display:block;
    position:absolute;
    top:100%;inset-inline:0;
    background:rgba(24,19,16,.985);
    backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.13);
    padding:8px var(--fx-gutter) 26px;
    margin:0;
  }
  .fx-header.is-stuck .fx-nav.is-open{
    background:rgba(255,255,255,.985);
    border-top-color:var(--fx-line);
  }
  .fx-nav.is-open ul{flex-direction:column;align-items:stretch;gap:0}
  .fx-nav.is-open li{border-bottom:1px solid rgba(255,255,255,.09)}
  .fx-header.is-stuck .fx-nav.is-open li{border-bottom-color:var(--fx-line)}
  .fx-nav.is-open a{display:block;padding:15px 0;font-size:13px}

  .fx-hero__features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-feature{padding:26px}

  .fx-about__grid{grid-template-columns:1fr;gap:52px}
  .fx-about__media{max-width:520px}
  .fx-why__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-why__item{padding:38px 32px}

  .fx-treatments__grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .fx-techrow{grid-template-columns:minmax(0,1fr)}
  .fx-techrow--flip .fx-techcard{order:0}
  .fx-techrow--flip .fx-techmedia{order:0}
  .fx-techcard{min-height:0;padding:36px 32px}
  .fx-techcard__num{margin-bottom:22px}
  .fx-techmedia img,.fx-techmedia .fx-ph{min-height:280px}
  .fx-about__frame{display:none}

  .fx-footer__top{grid-template-columns:1fr;gap:44px}
  .fx-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
}

@media (max-width:640px){
  :root{--fx-section:68px;--fx-gutter:20px}
  .fx-topbar__inner,
  .fx-header__inner,
  .fx-footer .fx-container{padding-inline:var(--fx-gutter)}
  .fx-topbar__inner{justify-content:center;text-align:center;padding-block:9px;gap:6px}
  .fx-topbar__contact{gap:18px;justify-content:center}
  .fx-topbar__hours{width:100%;text-align:center}
  .fx-header__inner{min-height:72px}
  .fx-brand{font-size:21px}
  .fx-hero{padding-bottom:64px}
  .fx-hero__inner{padding-top:136px}   /* 64 + the 72px header over it */
  .fx-hero__actions .fx-btn{flex:1 1 100%}
  .fx-hero__features-grid{grid-template-columns:minmax(0,1fr)}
  .fx-feature{padding:22px}
  .fx-badge{right:auto;left:0;bottom:-1px;padding:18px 22px}
  .fx-badge__num{font-size:32px}
  .fx-why__grid{grid-template-columns:minmax(0,1fr)}
  .fx-why__item{padding:32px 26px 34px}
  .fx-treatments__grid{grid-template-columns:minmax(0,1fr)}
  .fx-tcard{padding:30px 26px}
  .fx-head{margin-bottom:44px}
  .fx-head--split{align-items:flex-start}
  .fx-testi__slide{padding:48px 26px}
  .fx-footer__cols{grid-template-columns:minmax(0,1fr)}
  .fx-footer__social{flex-direction:column;align-items:flex-start;gap:14px}
  .fx-footer__bottom{justify-content:center;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .fx-reveal{opacity:1;transform:none}
}