/* ============================================================================
   GLOBAL CSS — COMPLETE FILE  (v2)
   Site Assets -> Global CSS   ... REPLACE the whole box with this file.

   PART 1 is the homepage global CSS, byte-for-byte unchanged.
   PART 2 adds the shared service-page components.
   Everything is namespaced (.afn-*) or scoped to .afn-scope so it can never
   collide with Elementor widgets or the parent theme.
   ========================================================================= */

/* ============================================================================
   PART 1 — ORIGINAL GLOBAL (unchanged)
   ========================================================================= */
/* ---------------------------------------------------------------- TOKENS -- */
:root{
  --afn-ice:#C3D1EB;
  --afn-blue:#A4B3CF;
  --afn-slate:#757C8A;
  --afn-char:#444A54;
  --afn-mid:#181B21;
  --afn-white:#FFFFFF;
  --afn-black:#000000;

  --afn-font-display:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --afn-font-body:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --afn-font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --afn-gutter:clamp(20px, 5vw, 96px);
  --afn-radius:2px;
  --afn-ease:cubic-bezier(.22,.9,.24,1);
}

/* ------------------------------------------------------- SCOPED BASELINE -- */
.afn-scope{
  background:var(--afn-mid);
  color:var(--afn-ice);
  font-family:var(--afn-font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:clip;
}
.afn-scope *,
.afn-scope *::before,
.afn-scope *::after{box-sizing:border-box}

/* The reset is wrapped in :where() so it contributes ZERO specificity of its
   own. It still outranks a theme's bare `p {}` rules, but any .afn-* component
   class can override it on source order. Written as `.afn-scope p {}` these
   rules would be 0-1-1 and would silently beat every 0-1-0 component class. */
.afn-scope :where(h1,h2,h3,h4,h5,h6,p,figure,figcaption,blockquote,ul,ol,li,hr){margin:0;padding:0}
.afn-scope :where(ul,ol){list-style:none}
.afn-scope :where(blockquote){quotes:none}

.afn-scope :where(img,video){display:block;max-width:100%}
.afn-scope :where(a){color:inherit;text-decoration:none}
.afn-scope a:focus-visible,
.afn-scope button:focus-visible,
.afn-scope [tabindex]:focus-visible{outline:1.5px solid var(--afn-ice);outline-offset:4px}
.afn-scope ::selection{background:var(--afn-ice);color:var(--afn-mid)}

/* Section rhythm — scoped, never a bare `section {}` rule. */
.afn-section{padding:clamp(90px,12vh,160px) var(--afn-gutter)}
.afn-section--tight{padding-top:0}

.afn-divider{
  height:1px;border:0;margin:0 var(--afn-gutter);
  background:linear-gradient(90deg,transparent,var(--afn-char),transparent);
}

/* --------------------------------------------------------- AMBIENT LAYER -- */
.afn-ambient{position:absolute;inset:0;pointer-events:none;z-index:0}

.afn-aurora{
  position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 600px at 78% -10%, rgba(195,209,235,.10), transparent 60%),
    radial-gradient(700px 500px at -10% 40%, rgba(164,179,207,.06), transparent 60%),
    radial-gradient(1000px 700px at 50% 120%, rgba(195,209,235,.05), transparent 65%);
}
.afn-grain{
  position:fixed;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.afn-cursor-glow{
  position:fixed;left:0;top:0;width:560px;height:560px;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.055) 0%, rgba(195,209,235,.035) 38%, transparent 70%);
  transform:translate(-50%,-50%);
  filter:blur(34px);mix-blend-mode:screen;
  opacity:0;transition:opacity .8s var(--afn-ease);
}
.afn-has-cursor .afn-cursor-glow{opacity:1}
@media (hover:none){.afn-cursor-glow{display:none}}

/* Everything above the ambient layer. */
.afn-scope > *:not(.afn-ambient){position:relative;z-index:2}

/* -------------------------------------------------------------- TYPOGRAPHY */
.afn-eyebrow{
  font-family:var(--afn-font-mono);
  font-size:11px;font-weight:300;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--afn-slate);
  display:flex;align-items:center;gap:14px;
}
.afn-eyebrow::before{content:"";width:32px;height:1px;background:var(--afn-char);flex:0 0 auto}
.afn-eyebrow--center{justify-content:center}

.afn-display{
  font-family:var(--afn-font-display);
  font-weight:400;line-height:1.02;letter-spacing:-.01em;
  color:var(--afn-white);
}
.afn-display em{font-style:italic;color:var(--afn-ice)}

.afn-lede{color:var(--afn-blue);font-size:clamp(16px,1.4vw,19px);line-height:1.7;max-width:56ch}
.afn-body{color:var(--afn-slate);font-size:15.5px;line-height:1.8;max-width:60ch}
.afn-body--narrow{max-width:52ch}
.afn-sig{font-family:var(--afn-font-display);font-style:italic;font-size:26px;color:var(--afn-blue)}

/* Section head */
.afn-sec-head{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(24px,4vw,80px);align-items:end;
  margin-bottom:clamp(44px,6vw,80px);
}
.afn-sec-head h2{font-size:clamp(34px,4.4vw,66px)}
.afn-sec-index{
  font-family:var(--afn-font-mono);font-size:11px;color:var(--afn-blue);
  letter-spacing:.2em;align-self:start;padding-top:10px;
}

/* ------------------------------------------------------------------ BUTTON */
.afn-btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--afn-font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:14px 26px;border:1px solid var(--afn-char);border-radius:var(--afn-radius);
  color:var(--afn-ice);background:transparent;cursor:pointer;
  transition:color .35s var(--afn-ease), background .35s var(--afn-ease),
             border-color .35s var(--afn-ease), box-shadow .35s var(--afn-ease);
  position:relative;overflow:hidden;
}
.afn-btn::before{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-20deg);transition:left .7s var(--afn-ease);pointer-events:none;
}
.afn-btn:hover::before{left:170%}
.afn-btn:hover,.afn-btn:focus-visible{
  border-color:var(--afn-ice);background:var(--afn-ice);color:var(--afn-mid);
  box-shadow:0 12px 34px -14px rgba(195,209,235,.35);
}
.afn-btn--solid{background:var(--afn-ice);color:var(--afn-mid);border-color:var(--afn-ice)}
.afn-btn--solid:hover,.afn-btn--solid:focus-visible{background:var(--afn-white);border-color:var(--afn-white);color:var(--afn-black)}

.afn-arrow{transition:transform .35s var(--afn-ease)}
.afn-btn:hover .afn-arrow,.afn-btn:focus-visible .afn-arrow{transform:translateX(5px)}

.afn-link{
  display:inline-flex;align-items:center;gap:10px;width:max-content;
  font-family:var(--afn-font-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--afn-blue);transition:color .3s;
}
.afn-link:hover,.afn-link:focus-visible{color:var(--afn-white)}
.afn-link:hover .afn-arrow,.afn-link:focus-visible .afn-arrow{transform:translateX(5px)}

/* ------------------------------------------------------- CORNER BRACKETS -- */
.afn-corner{position:absolute;width:26px;height:26px;z-index:4;pointer-events:none;transition:all .5s var(--afn-ease)}
.afn-corner::before,.afn-corner::after{content:"";position:absolute;background:var(--afn-ice);box-shadow:0 0 8px rgba(195,209,235,.6)}
.afn-corner::before{width:100%;height:1.5px}
.afn-corner::after{width:1.5px;height:100%}
.afn-corner--tl{top:14px;left:14px}
.afn-corner--tr{top:14px;right:14px;transform:scaleX(-1)}
.afn-corner--bl{bottom:14px;left:14px;transform:scaleY(-1)}
.afn-corner--br{bottom:14px;right:14px;transform:scale(-1)}

/* ------------------------------------------------------------ REVEAL BASE -- */
/* Visible by default. The hidden start state only applies once JS confirms
   IntersectionObserver support and adds .afn-js to <html>. */
.afn-reveal{opacity:1;transform:none}
.afn-js .afn-reveal{
  opacity:0;transform:translateY(34px);
  transition:opacity .9s var(--afn-ease), transform .9s var(--afn-ease);
}
.afn-js .afn-reveal.is-inview{opacity:1;transform:none}
.afn-js .afn-reveal--d1{transition-delay:.1s}
.afn-js .afn-reveal--d2{transition-delay:.2s}
.afn-js .afn-reveal--d3{transition-delay:.3s}

/* ------------------------------------------------- SPLIT (reusable block) -- */
.afn-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,110px);align-items:center}
.afn-split--flip .afn-split__visual{order:2}
.afn-split__visual{position:relative}
.afn-split__visual img{
  width:100%;height:clamp(380px,68vh,540px);object-fit:cover;border-radius:var(--afn-radius);
  border:1px solid rgba(68,74,84,.6);filter:grayscale(30%);
  transition:filter .8s var(--afn-ease), transform 1s var(--afn-ease),
             box-shadow .8s var(--afn-ease), border-color .6s;
}
.afn-split__visual:hover img{
  filter:grayscale(0);transform:scale(1.015) translateY(-4px);
  border-color:var(--afn-slate);box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}
.afn-split h2{font-size:clamp(32px,3.8vw,56px);margin:18px 0 26px}
.afn-split .afn-btn{margin-top:36px}

/* --------------------------------------------- GALLERY (reusable masonry) -- */
.afn-gallery{columns:3;column-gap:clamp(14px,1.6vw,22px)}
.afn-gallery figure{
  position:relative;display:block;break-inside:avoid;
  margin-bottom:clamp(14px,1.6vw,22px);
  border:1px solid rgba(68,74,84,.55);border-radius:var(--afn-radius);
  overflow:hidden;background:var(--afn-black);
  transition:border-color .4s var(--afn-ease), box-shadow .5s var(--afn-ease), transform .5s var(--afn-ease);
}
.afn-gallery figure:hover{border-color:var(--afn-blue);box-shadow:0 24px 50px -30px rgba(0,0,0,.85);transform:translateY(-5px)}
.afn-gallery img{width:100%;height:auto;filter:grayscale(40%) contrast(1.02);transition:filter .7s var(--afn-ease)}
.afn-gallery figure:hover img{filter:grayscale(0)}

/* ------------------------------------------- SLIDER (reusable component) --- */
.afn-slider{margin-top:8px;outline:none}
.afn-slider__frame{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px)}
.afn-slider__viewport{overflow:hidden;flex:1;min-width:0}
.afn-slider__track{
  display:flex;gap:clamp(16px,1.8vw,24px);margin:0;padding:4px 2px;
  touch-action:pan-y;
  transition:transform .85s var(--afn-ease);
}
.afn-js .afn-slider__track{cursor:grab}
.afn-js .afn-slider__track:active{cursor:grabbing}

/* No-JS / pre-init: horizontal scroll-snap keeps every review reachable. */
.afn-slider__viewport{scroll-snap-type:x mandatory;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--afn-char) transparent}
.afn-js .afn-slider__viewport{overflow-x:hidden}
.afn-slide{flex:0 0 var(--afn-slide-w, min(420px, 82vw));scroll-snap-align:start}
.afn-js .afn-slide{
  transition:opacity .6s var(--afn-ease), filter .6s var(--afn-ease), transform .6s var(--afn-ease);
}
.afn-js .afn-slide.is-edge{transform:scale(.94)}
.afn-js .afn-slide.is-edge .afn-rev{opacity:.6;filter:saturate(.65)}

.afn-rev{
  height:100%;border:1px solid var(--afn-char);border-radius:var(--afn-radius);
  padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:18px;
  background:linear-gradient(165deg, rgba(195,209,235,.06), rgba(68,74,84,.10));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  min-height:300px;position:relative;overflow:hidden;
  transition:border-color .45s var(--afn-ease), box-shadow .5s var(--afn-ease), transform .12s ease-out;
}
.afn-rev::before{
  content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.08),transparent);
  transform:skewX(-20deg);transition:left .9s var(--afn-ease);pointer-events:none;
}
.afn-rev:hover::before{left:170%}
.afn-rev:hover{border-color:var(--afn-blue);box-shadow:0 30px 70px -36px rgba(0,0,0,.85), 0 0 0 1px rgba(195,209,235,.08)}
.afn-rev__stars{color:var(--afn-ice);letter-spacing:6px;font-size:14px;transition:text-shadow .4s}
.afn-rev:hover .afn-rev__stars{text-shadow:0 0 14px rgba(195,209,235,.65)}
.afn-rev h3{
  font-family:var(--afn-font-mono);font-weight:400;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--afn-white);
}
.afn-rev__quote{
  font-family:var(--afn-font-display);font-style:italic;font-size:19px;line-height:1.55;
  color:var(--afn-blue);min-height:calc(1.55em * 6);
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
}
.afn-rev__src{
  font-family:var(--afn-font-mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--afn-slate);margin-top:auto;
}

.afn-slider__arrow{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--afn-char);background:transparent;color:var(--afn-ice);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .35s var(--afn-ease);
}
.afn-slider__arrow:hover{border-color:var(--afn-ice);background:var(--afn-ice);color:var(--afn-mid);box-shadow:0 12px 30px -14px rgba(195,209,235,.4)}
.afn-slider__arrow:disabled{opacity:.3;cursor:default;pointer-events:none}
/* Arrows are useless before JS wires them up. */
.afn-slider__arrow{display:none}
.afn-js .afn-slider__arrow{display:flex}

.afn-slider__controls{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(24px,3vw,36px)}
.afn-slider__progress{flex:1;height:1px;background:var(--afn-char);position:relative}
.afn-slider__progress i{
  position:absolute;left:0;top:-.5px;height:2px;background:var(--afn-ice);
  box-shadow:0 0 8px rgba(195,209,235,.7);
  transition:width .5s var(--afn-ease), left .5s var(--afn-ease);
}
.afn-slider__counter{
  font-family:var(--afn-font-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--afn-blue);white-space:nowrap;
}

/* -------------------------------------------------------------- RESPONSIVE */
@media (max-width:960px){
  .afn-split,.afn-split--flip{grid-template-columns:1fr}
  .afn-split--flip .afn-split__visual{order:0}
  .afn-gallery{columns:2}
  .afn-slider__frame{gap:8px}
  .afn-sec-head{grid-template-columns:1fr;row-gap:18px;align-items:start}
}
@media (max-width:640px){
  .afn-gallery{columns:1}
  .afn-slider__arrow{width:38px;height:38px}
  .afn-rev__quote{font-size:16.5px}
}

/* --------------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  .afn-scope *,.afn-scope *::before,.afn-scope *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .afn-js .afn-reveal{opacity:1;transform:none}
  .afn-cursor-glow{display:none}
}

/* ============================================================================
   ============================================================================
   PART 2 — SHARED SERVICE-PAGE COMPONENTS
   Added for the Dental Implants pillar. Reused by Full Arch, Implant-Supported
   Prosthesis, Bone & Gum Graft, and by the FR / RO translations.
   Nothing below is implant-specific and nothing below touches the homepage.
   ============================================================================
   ========================================================================= */

/* ------------------------------------------------- TOKENS (additions only) -- */
/* Merged into the same cascade as the :root block above. Kept separate so the
   original token set stays untouched and reviewable. */
:root{
  --afn-max:1360px;

  --afn-line:rgba(195,209,235,.14);
  --afn-line-strong:rgba(195,209,235,.28);

  --afn-glass:rgba(24,27,33,.52);
  --afn-glass-soft:rgba(24,27,33,.38);
  --afn-glass-tint:rgba(195,209,235,.055);
  --afn-glass-blur:blur(18px) saturate(1.25);
  --afn-glass-blur-heavy:blur(26px) saturate(1.3);
  --afn-glass-edge:inset 0 1px 0 rgba(195,209,235,.16);
}

/* ------------------------------------------------------- LAYOUT CONTAINER -- */
/* The homepage lays its sections out individually. Long-form service pages need
   a single measured column, so this is the shared wrapper for them. */
.afn-inner{width:100%;max-width:var(--afn-max);margin-inline:auto}

/* Visually hidden — table captions, extra labels. */
.afn-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ------------------------------------------ SECTION HEAD — stacked variant -- */
/* The base .afn-sec-head is a two-column grid (index beside the title), which is
   the homepage rhythm. Service pages stack: index, title, then a lede. */
.afn-sec-head--stack{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:18px;margin-bottom:clamp(30px,3.5vw,52px);
}
.afn-sec-head--stack h2{font-size:clamp(32px,4.6vw,62px)}
.afn-sec-head--stack .afn-sec-index{padding-top:0}
.afn-sec-head--flush{margin-bottom:0}

/* ------------------------------------------------------------------ GLASS -- */
.afn-glass{
  background:linear-gradient(155deg,var(--afn-glass-tint),transparent 55%),var(--afn-glass-soft);
  backdrop-filter:var(--afn-glass-blur);
  -webkit-backdrop-filter:var(--afn-glass-blur);
  border:1px solid var(--afn-line);
  box-shadow:var(--afn-glass-edge),0 18px 44px rgba(0,0,0,.32);
}

/* -------------------------------------------- REVEAL — directional variants -- */
/* Extends the base .afn-reveal above. Same .afn-js gate, same .is-inview state
   class — these two names must match the reveal observer in global.js. */
.afn-js .afn-reveal--left{transform:translateX(-44px)}
.afn-js .afn-reveal--right{transform:translateX(44px)}
.afn-js .afn-reveal--scale{transform:scale(.94)}
.afn-js .afn-reveal--depth{
  transform:perspective(1000px) rotateX(9deg) translateY(38px);
  transform-origin:center 80%;
}
.afn-js .afn-reveal--left.is-inview,
.afn-js .afn-reveal--right.is-inview,
.afn-js .afn-reveal--scale.is-inview,
.afn-js .afn-reveal--depth.is-inview{transform:none}

@media (prefers-reduced-motion:reduce){
  .afn-js .afn-reveal--left,
  .afn-js .afn-reveal--right,
  .afn-js .afn-reveal--scale,
  .afn-js .afn-reveal--depth{opacity:1;transform:none}
}

/* --------------------------------------------------------- SCROLL PROGRESS -- */
.afn-scope .afn-progress{
  position:fixed;top:0;left:0;width:100%;height:2px;z-index:200;pointer-events:none;
}
.afn-scope .afn-progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--afn-ice),var(--afn-blue));
  box-shadow:0 0 12px rgba(195,209,235,.5);
}

/* -------------------------------------------------------- MOBILE STICKY CTA -- */
.afn-scope .afn-mcta{display:none}
@media (max-width:820px){
  .afn-scope .afn-mcta{
    display:block;position:fixed;left:16px;right:16px;bottom:16px;z-index:90;padding:8px;
    border:1px solid var(--afn-line-strong);border-radius:100px;
    background:rgba(24,27,33,.7);
    backdrop-filter:var(--afn-glass-blur-heavy);
    -webkit-backdrop-filter:var(--afn-glass-blur-heavy);
    box-shadow:var(--afn-glass-edge),0 14px 34px rgba(0,0,0,.4);
  }
  .afn-scope .afn-mcta a{
    display:flex;justify-content:center;align-items:center;gap:10px;
    padding:15px;border-radius:100px;
    background:var(--afn-ice);color:var(--afn-mid);
    font-family:var(--afn-font-mono);font-size:12.5px;
    letter-spacing:.14em;text-transform:uppercase;
  }
}

/* ------------------------------------------------------------- DASH LIST -- */
.afn-dlist{display:flex;flex-direction:column;margin:18px 0}
.afn-dlist li{
  display:flex;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--afn-line);
  color:var(--afn-blue);font-size:15.5px;line-height:1.6;
  transition:padding-left .4s var(--afn-ease);
}
.afn-dlist li:first-child{border-top:1px solid var(--afn-line)}
.afn-dlist li::before{
  content:"—";flex-shrink:0;color:var(--afn-slate);
  font-family:var(--afn-font-mono);font-size:13px;
}
.afn-dlist strong{color:var(--afn-white)}
@media (hover:hover){ .afn-dlist li:hover{padding-left:8px} }

/* ------------------------------------------------------------------ NOTE -- */
.afn-note{
  margin-top:24px;padding:22px 28px;
  border-left:2px solid var(--afn-ice);border-radius:0 16px 16px 0;
  background:linear-gradient(90deg,rgba(195,209,235,.08),transparent 70%),rgba(24,27,33,.35);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.afn-note p{font-size:15.5px;color:var(--afn-blue)}
.afn-note strong{color:var(--afn-white)}

/* ------------------------------------------------------------ CHIPS / PILL -- */
.afn-chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.afn-chips li{
  padding:8px 16px;border:1px solid var(--afn-line);border-radius:100px;
  background:rgba(24,27,33,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--afn-font-mono);font-size:12px;letter-spacing:.08em;color:var(--afn-blue);
  transition:border-color .35s,color .35s;
}
@media (hover:hover){
  .afn-chips li:hover{border-color:var(--afn-ice);color:var(--afn-ice)}
}
.afn-pill{
  display:inline-block;margin-left:10px;padding:3px 10px;
  border:1px solid var(--afn-line);border-radius:100px;white-space:nowrap;
  font-family:var(--afn-font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--afn-slate);
}

/* ---------------------------------------------------------- MEDIA FRAME -- */
.afn-frame{
  position:relative;overflow:hidden;border-radius:22px;
  border:1px solid var(--afn-line-strong);background:var(--afn-black);
  box-shadow:0 20px 50px rgba(0,0,0,.38);
  transform-style:preserve-3d;
}
.afn-frame img{width:100%;height:auto}
.afn-frame__tag{
  position:absolute;top:18px;left:18px;z-index:3;
  padding:8px 16px;border:1px solid var(--afn-line-strong);border-radius:100px;
  background:rgba(24,27,33,.55);
  backdrop-filter:var(--afn-glass-blur);-webkit-backdrop-filter:var(--afn-glass-blur);
  box-shadow:var(--afn-glass-edge);
  font-family:var(--afn-font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--afn-ice);
}
.afn-media-stack{display:flex;flex-direction:column;gap:18px}

/* -------------------------------------------------- PANEL + DATA TABLE -- */
.afn-panel{
  border-radius:22px;overflow:hidden;
  background:linear-gradient(150deg,rgba(195,209,235,.05),transparent 45%),rgba(24,27,33,.5);
  backdrop-filter:var(--afn-glass-blur-heavy);-webkit-backdrop-filter:var(--afn-glass-blur-heavy);
  border:1px solid var(--afn-line-strong);
  box-shadow:var(--afn-glass-edge),0 24px 56px rgba(0,0,0,.35);
}
.afn-panel__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding:clamp(26px,3vw,38px) clamp(20px,3.5vw,44px);
  border-bottom:1px solid var(--afn-line-strong);
}
.afn-panel__head h3{font-size:clamp(21px,2.2vw,28px)}
.afn-panel__head span{
  font-family:var(--afn-font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--afn-slate);
}
.afn-panel__intro{
  padding:22px clamp(20px,3.5vw,44px) 0;
  max-width:80ch;font-size:15px;color:var(--afn-blue);
}
.afn-panel__foot{
  padding:20px clamp(20px,3.5vw,44px) 30px;font-size:14px;color:var(--afn-slate);
}
.afn-panel__foot strong{color:var(--afn-blue);font-weight:500}

.afn-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:18px}
.afn-table{width:100%;min-width:420px;border-collapse:collapse}
.afn-table th{
  padding:16px clamp(20px,3.5vw,44px);text-align:left;font-weight:500;
  border-bottom:1px solid var(--afn-line-strong);
  font-family:var(--afn-font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--afn-slate);
}
.afn-table td{
  padding:17px clamp(20px,3.5vw,44px);
  border-bottom:1px solid var(--afn-line);
  font-size:15.5px;color:var(--afn-blue);
}
.afn-table th:last-child,
.afn-table td:last-child{text-align:right}
.afn-table tr:last-child td{border-bottom:0}
.afn-table__p{
  font-family:var(--afn-font-mono);font-size:14.5px;color:var(--afn-white);
  letter-spacing:.04em;white-space:nowrap;
}
@media (hover:hover){
  .afn-table tbody tr{transition:background .35s}
  .afn-table tbody tr:hover{background:rgba(195,209,235,.05)}
}
@media (max-width:620px){
  .afn-table td .afn-pill{display:inline-block;margin:6px 0 0}
}

/* -------------------------------------------------------------------- FAQ -- */
/* Native <details>. Every answer opens and closes without JavaScript. */
.afn-faq{max-width:900px}
.afn-faq__item{
  margin-bottom:12px;border-radius:16px;overflow:hidden;
  background:linear-gradient(150deg,rgba(195,209,235,.045),transparent 55%),rgba(24,27,33,.4);
  backdrop-filter:var(--afn-glass-blur);-webkit-backdrop-filter:var(--afn-glass-blur);
  border:1px solid var(--afn-line);box-shadow:var(--afn-glass-edge);
  transition:border-color .4s;
}
.afn-faq__item[open],
.afn-faq__item:hover{border-color:var(--afn-line-strong)}
.afn-faq__item > summary{
  display:flex;align-items:baseline;gap:22px;padding:24px 26px;
  cursor:pointer;list-style:none;
}
.afn-faq__item > summary::-webkit-details-marker{display:none}
.afn-faq__item > summary:focus-visible{outline:1.5px solid var(--afn-ice);outline-offset:-3px}
.afn-faq__item > summary i{
  flex-shrink:0;font-style:normal;font-family:var(--afn-font-mono);
  font-size:12px;letter-spacing:.08em;color:var(--afn-slate);transition:color .3s;
}
.afn-faq__item > summary h3{
  flex:1;font-family:var(--afn-font-body);
  font-size:clamp(16.5px,1.6vw,19px);font-weight:500;line-height:1.45;color:var(--afn-white);
}
.afn-faq__tog{
  position:relative;top:4px;flex-shrink:0;
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--afn-line-strong);background:rgba(24,27,33,.4);
  color:var(--afn-blue);font-size:16px;font-weight:300;
  transition:transform .4s var(--afn-ease),background .4s,color .4s,border-color .4s;
}
.afn-faq__tog::before{content:"+"}
.afn-faq__item[open] .afn-faq__tog{
  background:var(--afn-ice);color:var(--afn-mid);border-color:var(--afn-ice);
  transform:rotate(45deg);
}
.afn-faq__item[open] > summary i{color:var(--afn-ice)}
.afn-faq__body{padding:0 26px 30px calc(26px + 2.2em)}
.afn-faq__body p{margin-bottom:14px;font-size:15.5px;color:var(--afn-blue)}
.afn-faq__body p:last-child{margin-bottom:0}
.afn-faq__body strong{color:var(--afn-white)}
@media (max-width:640px){ .afn-faq__body{padding-left:26px} }

/* ------------------------------------------------------ BEFORE / AFTER -- */
/* The range input is the real control: keyboard-operable, and the "before"
   image is ordinary content if the JS never runs. */
.afn-ba{
  position:relative;margin:0 0 38px;border-radius:22px;overflow:hidden;
  border:1px solid var(--afn-line-strong);background:var(--afn-black);
  user-select:none;touch-action:none;cursor:ew-resize;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  transition:border-color .5s var(--afn-ease),box-shadow .6s var(--afn-ease);
}
.afn-ba img{width:100%;height:auto;pointer-events:none}
.afn-ba__after{
  position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 calc(100% - var(--afn-pos,50%)) 0 0);
}
.afn-ba__after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.afn-ba__handle{
  position:absolute;top:0;bottom:0;left:var(--afn-pos,50%);width:1px;z-index:4;
  background:var(--afn-ice);transform:translateX(-.5px);pointer-events:none;
  box-shadow:0 0 24px rgba(195,209,235,.55);
  transition:box-shadow .5s var(--afn-ease),background .5s;
}
.afn-ba__knob{
  position:absolute;top:50%;left:var(--afn-pos,50%);transform:translate(-50%,-50%);
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;z-index:5;
  pointer-events:none;border:1px solid var(--afn-ice);
  background:rgba(24,27,33,.55);
  backdrop-filter:var(--afn-glass-blur);-webkit-backdrop-filter:var(--afn-glass-blur);
  color:var(--afn-ice);font-family:var(--afn-font-mono);font-size:14px;letter-spacing:2px;
  box-shadow:var(--afn-glass-edge),0 8px 24px rgba(0,0,0,.35);
  transition:box-shadow .5s var(--afn-ease),border-color .5s var(--afn-ease),background .5s,color .5s;
}
.afn-ba__knob::before{
  content:"";position:absolute;inset:-10px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(195,209,235,.28),transparent 72%);
  transition:opacity .55s var(--afn-ease);
}
.afn-ba:hover,.afn-ba.is-demo,.afn-ba:focus-within{
  border-color:rgba(195,209,235,.5);
  box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 44px rgba(195,209,235,.14);
}
.afn-ba:hover .afn-ba__handle,
.afn-ba.is-demo .afn-ba__handle,
.afn-ba:focus-within .afn-ba__handle{
  background:var(--afn-white);
  box-shadow:0 0 30px rgba(195,209,235,.9),0 0 64px rgba(195,209,235,.35);
}
.afn-ba:hover .afn-ba__knob,
.afn-ba.is-demo .afn-ba__knob,
.afn-ba:focus-within .afn-ba__knob{
  border-color:var(--afn-white);color:var(--afn-white);background:rgba(195,209,235,.16);
  box-shadow:var(--afn-glass-edge),0 0 0 8px rgba(195,209,235,.10),0 0 38px rgba(195,209,235,.55);
}
.afn-ba:hover .afn-ba__knob::before,
.afn-ba.is-demo .afn-ba__knob::before,
.afn-ba:focus-within .afn-ba__knob::before{opacity:1}
.afn-ba__label{
  position:absolute;bottom:18px;z-index:4;pointer-events:none;
  padding:8px 16px;border:1px solid var(--afn-line-strong);border-radius:100px;
  background:rgba(24,27,33,.55);
  backdrop-filter:var(--afn-glass-blur);-webkit-backdrop-filter:var(--afn-glass-blur);
  box-shadow:var(--afn-glass-edge);
  font-family:var(--afn-font-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--afn-white);
}
.afn-ba__label--before{left:18px}
.afn-ba__label--after{right:18px;color:var(--afn-ice)}
.afn-ba__range{
  position:absolute;inset:0;z-index:6;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;
}
.afn-ba__hint{
  position:absolute;left:0;right:0;bottom:-32px;z-index:1;text-align:center;
  font-family:var(--afn-font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--afn-slate);
}

/* ------------------------------------------------------------ REVIEW WALL -- */
/* Markup ships every review exactly once — crawlable and translatable.
   global.js clones the columns to close the marquee loop, desktop only. */
.afn-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.afn-wall__col{display:flex;flex-direction:column;gap:18px}
.afn-wall__card{
  position:relative;overflow:hidden;border-radius:18px;padding:24px 26px;
  background:linear-gradient(150deg,rgba(195,209,235,.07),transparent 55%),rgba(24,27,33,.5);
  backdrop-filter:var(--afn-glass-blur);-webkit-backdrop-filter:var(--afn-glass-blur);
  border:1px solid var(--afn-line);
  box-shadow:var(--afn-glass-edge),0 14px 34px rgba(0,0,0,.28);
  transition:border-color .5s var(--afn-ease),transform .5s var(--afn-ease);
}
@media (hover:hover){
  .afn-wall__card:hover{border-color:var(--afn-line-strong);transform:translateY(-3px)}
}
.afn-wall__name{
  display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:10px;
  font-family:var(--afn-font-mono);font-size:13px;font-weight:500;
  letter-spacing:.05em;color:var(--afn-white);
}
.afn-wall__quote p{
  font-size:14.5px;line-height:1.65;color:var(--afn-blue);
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;
}
.afn-wall__src{
  margin-top:12px;font-family:var(--afn-font-mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--afn-slate);
}
.afn-stars{color:var(--afn-ice);letter-spacing:3px;font-size:12px;flex-shrink:0}

/* Marquee state — only added once global.js has cloned each column. */
.afn-wall.is-marquee{
  height:clamp(560px,72vh,760px);overflow:hidden;
  mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.afn-wall.is-marquee .afn-wall__col{animation:afn-marq 72s linear infinite}
.afn-wall.is-marquee .afn-wall__col:nth-child(2){animation-duration:86s;animation-direction:reverse}
.afn-wall.is-marquee .afn-wall__col:nth-child(3){animation-duration:64s}
.afn-wall.is-marquee:focus-within .afn-wall__col{animation-play-state:paused}
@media (hover:hover){
  .afn-wall.is-marquee:hover .afn-wall__col{animation-play-state:paused}
}
@keyframes afn-marq{to{transform:translateY(calc(-50% - 9px))}}

@media (prefers-reduced-motion:reduce){
  .afn-wall.is-marquee{height:auto;overflow:visible;mask-image:none;-webkit-mask-image:none}
  .afn-wall.is-marquee .afn-wall__col{animation:none}
}

/* Tablet / mobile: no marquee at all. Every review stays in the DOM and stays
   readable — nothing is display:none. The stack is capped and made a scroll
   region so the page does not grow by 42 cards on a phone. */
@media (max-width:960px){
  .afn-wall{
    grid-template-columns:1fr;gap:14px;
    max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:6px;
  }
  .afn-wall__col{gap:14px}
}
/* ============================================================================
   ============================================================================
   PART 3 — ABOUT PAGE + PATIENT CONSULTATION PAGE DESIGN SYSTEM
   Added for the About page's referral section and the new Patient
   Consultation page. Nothing below is About/Consultation-specific
   layout — that stays in each page's own Page CSS — this is the
   shared tokens/resets/components layer those two pages need.

   PART 1 and PART 2 above are untouched, byte-for-byte, from the
   version already in production. Nothing in this Part 3 renames,
   overrides, or reopens any selector or custom property from Parts
   1/2 — verified programmatically, not just by eye: zero overlap in
   class names and zero overlap in custom-property names between this
   part and everything above it.

   WHY THE .afn-suite PREFIX ON EVERYTHING BELOW
   Parts 1/2 use --afn-* prefixed tokens (--afn-ice, --afn-blue, etc.)
   and .afn-* prefixed classes, scoped under .afn-scope. This Part 3
   deliberately uses different, unprefixed names (--ice, --mist, .btn,
   .glass, .display, ...) scoped under a different wrapper class,
   .afn-suite, present only on the About page and the Consultation
   page. A page that doesn't include .afn-suite — Home, Implant
   Pillar, Full Arch — is completely unaffected by any rule below.
   ------------------------------------------------------------
   CONTAINS: design tokens, resets, ambient background field, type
   system, caliper rail, glass primitive, reveal-on-scroll system,
   button component, shared section header, and the shared form
   suite (used by both the referral form and the consultation form).
   ============================================================================
   ========================================================================= */

/* ============================================================
   00 · FONTS
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@200;300;400&display=swap");

/* ============================================================
   01 · TOKENS
   Bare :root — safe unscoped. These custom properties do nothing
   until referenced with var(), and no other page's CSS references
   these particular names.
   ============================================================ */
:root{
  --ice:#C3D1EB;
  --mist:#A4B3CF;
  --steel:#757C8A;
  --slate:#444A54;
  --ink:#181B21;
  --white:#FFFFFF;
  --black:#000000;
  --font-display:'Instrument Serif', serif;
  --font-body:'Instrument Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --gutter:clamp(20px, 5vw, 110px);
  --rail:clamp(0px, 4vw, 74px);
  --r:3px;
  --r-lg:6px;
  --ease:cubic-bezier(.22,.9,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --glass:linear-gradient(150deg, rgba(195,209,235,.085), rgba(68,74,84,.10) 46%, rgba(24,27,33,.22));
  --glass-edge:1px solid rgba(195,209,235,.16);
  --glass-shadow:0 40px 90px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07);
}

/* ============================================================
   02 · SUITE RESET
   Everything a bare *, body, img, a, :focus-visible reset used to
   do sitewide, now scoped to .afn-suite only.
   ============================================================ */
.afn-suite, .afn-suite *{box-sizing:border-box}
.afn-suite{
  background:var(--ink);
  color:var(--mist);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
}
/* The theme's own <body> sits outside this wrapper. This colors the
   true page background dark only on pages that actually contain the
   suite — harmless, and invisible, on every other page on the site. */
body:has(.afn-suite){background:var(--ink);overflow-x:clip}
html:has(.afn-suite){scroll-behavior:smooth}
.afn-suite ::selection{background:var(--ice);color:var(--ink)}
.afn-suite img{display:block;max-width:100%}
.afn-suite a{color:inherit;text-decoration:none}
.afn-suite :focus-visible{outline:1.5px solid var(--ice);outline-offset:4px;border-radius:2px}
.afn-suite .afn-main,.afn-suite main,.afn-suite header,.afn-suite footer{position:relative;z-index:2}
.afn-suite section{position:relative;padding:clamp(96px,13vh,190px) var(--gutter) clamp(96px,13vh,190px) calc(var(--gutter) + var(--rail))}
.afn-suite .hairline{
  height:1px;margin-left:calc(var(--gutter) + var(--rail));margin-right:var(--gutter);
  background:linear-gradient(90deg, transparent, rgba(117,124,138,.55) 22%, rgba(117,124,138,.55) 78%, transparent);
}

/* ============================================================
   03 · AMBIENT FIELD
   ============================================================ */
.afn-suite .field{position:fixed;inset:0;z-index:0;pointer-events:none}
.afn-suite .field .glowfield{
  position:absolute;inset:-20%;
  background:
    radial-gradient(760px 560px at 74% -6%, rgba(195,209,235,.10), transparent 62%),
    radial-gradient(620px 520px at -8% 38%, rgba(164,179,207,.065), transparent 60%),
    radial-gradient(900px 700px at 46% 116%, rgba(195,209,235,.05), transparent 66%);
  transform:translate3d(0,0,0);
  transition:transform 1.4s var(--ease-out);
}
.afn-suite .field .weave{
  position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(90deg, rgba(195,209,235,.030) 0 1px, transparent 1px 160px),
    repeating-linear-gradient(0deg, rgba(195,209,235,.016) 0 1px, transparent 1px 160px);
  mask-image:radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 82%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 82%);
}
.afn-suite .field .grain{
  position:absolute;inset:0;opacity:.34;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.afn-suite .lens{
  position:fixed;left:0;top:0;width:620px;height:620px;border-radius:50%;
  pointer-events:none;z-index:3;opacity:0;
  background:radial-gradient(circle,
    rgba(255,255,255,.055) 0%,
    rgba(195,209,235,.038) 34%,
    transparent 70%);
  filter:blur(38px);
  mix-blend-mode:screen;
  transform:translate(-50%,-50%);
  transition:opacity .9s var(--ease);
}
body.pointer .afn-suite .lens{opacity:1}
@media (hover:none), (prefers-reduced-motion:reduce){.afn-suite .lens{display:none}}

/* ============================================================
   04 · TYPE SYSTEM
   ============================================================ */
.afn-suite .display{
  font-family:var(--font-display);
  font-weight:400;line-height:1.02;letter-spacing:-.012em;
  color:var(--white);
}
.afn-suite .display em{font-style:italic;color:var(--ice)}
.afn-suite .mono{
  font-family:var(--font-mono);font-weight:300;
  font-size:10.5px;letter-spacing:.30em;text-transform:uppercase;
  color:var(--steel);
}
.afn-suite .eyebrow{display:inline-flex;align-items:center;gap:14px}
.afn-suite .eyebrow::before{content:"";width:26px;height:1px;background:var(--slate)}
.afn-suite .lede{
  font-size:clamp(16.5px,1.35vw,19.5px);line-height:1.72;color:var(--mist);
  max-width:58ch;
}
.afn-suite .copy{font-size:15.5px;line-height:1.85;color:var(--steel);max-width:62ch}
.afn-suite .copy strong{color:var(--mist);font-weight:500}
.afn-suite .copy a, .afn-suite .link-in{
  color:var(--ice);
  border-bottom:1px solid rgba(195,209,235,.28);
  padding-bottom:1px;
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.afn-suite .copy a:hover, .afn-suite .link-in:hover{border-color:var(--ice);color:var(--white)}

/* Shared section header, used by every content section on every page
   in this suite: an index label, a heading, and an optional lede. */
.afn-suite .sec-head{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3.4vw,64px);
  align-items:end;margin-bottom:clamp(38px,5.4vw,74px);
}
.afn-suite .sec-head h2{font-size:clamp(28px,4.1vw,62px)}
.afn-suite .sec-head .idx{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;color:var(--steel);padding-top:9px;align-self:start;white-space:nowrap}
.afn-suite .sec-head .sub{grid-column:2;margin-top:16px}
@media (max-width:760px){
  .afn-suite .sec-head{grid-template-columns:1fr;gap:14px}
  .afn-suite .sec-head .sub{grid-column:1}
}

/* ============================================================
   05 · CALIPER RAIL — signature navigation
   ============================================================ */
.afn-suite .caliper{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  pointer-events:none;
}
.afn-suite .caliper::before{
  content:"";position:absolute;left:calc(50% - .5px);top:9vh;bottom:9vh;width:1px;
  background:linear-gradient(180deg,transparent,rgba(117,124,138,.5) 12%,rgba(117,124,138,.5) 88%,transparent);
}
.afn-suite .caliper-fill{
  position:absolute;left:calc(50% - .5px);top:9vh;width:1px;height:0;
  background:linear-gradient(180deg,var(--ice),rgba(195,209,235,.25));
  box-shadow:0 0 12px rgba(195,209,235,.6);
}
.afn-suite .caliper ol{list-style:none;position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(14px,2.1vh,26px);pointer-events:auto}
.afn-suite .tick{position:relative;display:flex;align-items:center;justify-content:center;height:18px}
.afn-suite .tick a{
  display:block;width:18px;height:18px;position:relative;
}
.afn-suite .tick a::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:11px;height:1px;background:var(--slate);
  transition:width .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.afn-suite .tick a:hover::before,.afn-suite .tick.on a::before{width:22px;background:var(--ice);box-shadow:0 0 10px rgba(195,209,235,.75)}
.afn-suite .tick .lbl{
  position:absolute;left:calc(100% + 4px);top:50%;transform:translateY(-50%) translateX(-8px);
  white-space:nowrap;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ice);background:rgba(24,27,33,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(195,209,235,.16);border-radius:2px;padding:5px 10px;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.afn-suite .tick a:hover + .lbl, .afn-suite .tick a:focus-visible + .lbl{opacity:1;transform:translateY(-50%) translateX(0)}
@media (max-width:1100px){.afn-suite .caliper{display:none}}

/* ============================================================
   06 · GLASS PRIMITIVE
   ============================================================ */
.afn-suite .glass{
  position:relative;border-radius:var(--r-lg);
  background:var(--glass);
  border:var(--glass-edge);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:var(--glass-shadow);
  overflow:hidden;
  transition:border-color .55s var(--ease), box-shadow .55s var(--ease), transform .6s var(--ease-out);
}
.afn-suite .glass::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(160deg, rgba(255,255,255,.10), transparent 34%);
  opacity:.9;
}
.afn-suite .glass .sheen{
  position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.13), rgba(195,209,235,.05) 38%, transparent 66%);
  mix-blend-mode:screen;transition:opacity .5s var(--ease);
}
.afn-suite .glass:hover .sheen{opacity:1}
.afn-suite .glass:hover{border-color:rgba(195,209,235,.34)}
.afn-suite .brk{position:absolute;width:18px;height:18px;pointer-events:none;z-index:4;opacity:.55;transition:all .55s var(--ease)}
.afn-suite .brk::before,.afn-suite .brk::after{content:"";position:absolute;background:var(--ice);box-shadow:0 0 8px rgba(195,209,235,.55)}
.afn-suite .brk::before{width:100%;height:1px}
.afn-suite .brk::after{width:1px;height:100%}
.afn-suite .b-tl{top:10px;left:10px}
.afn-suite .b-tr{top:10px;right:10px;transform:scaleX(-1)}
.afn-suite .b-bl{bottom:10px;left:10px;transform:scaleY(-1)}
.afn-suite .b-br{bottom:10px;right:10px;transform:scale(-1)}
.afn-suite .glass:hover .brk{opacity:1}
.afn-suite .glass:hover .b-tl{top:6px;left:6px}.afn-suite .glass:hover .b-tr{top:6px;right:6px}
.afn-suite .glass:hover .b-bl{bottom:6px;left:6px}
.afn-suite .glass:hover .b-br{bottom:6px;right:6px}

/* ============================================================
   07 · REVEALS
   Gated behind .afn-js, the same progressive-enhancement class the
   rest of the site already uses (see .afn-reveal in Part 1/2 of this
   file): visible by default, and only hidden-then-revealed once JS
   has confirmed IntersectionObserver support and added .afn-js to
   <html>. Without that gate, a visitor with JavaScript disabled or
   blocked would never see this content at all — the earlier version
   of this rule had exactly that bug.
   ============================================================ */
.afn-suite .rv{opacity:1;transform:none}
.afn-js .afn-suite .rv{
  opacity:0;transform:translateY(30px);
  transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
}
.afn-js .afn-suite .rv.in{opacity:1;transform:none}
.afn-suite .rv.d1{transition-delay:.08s}.afn-suite .rv.d2{transition-delay:.16s}.afn-suite .rv.d3{transition-delay:.24s}
.afn-suite .rv.d4{transition-delay:.32s}.afn-suite .rv.d5{transition-delay:.40s}.afn-suite .rv.d6{transition-delay:.48s}
.afn-suite .rise{display:block;overflow:hidden}
.afn-js .afn-suite .rise > span{display:block;transform:translateY(105%);transition:transform 1.15s var(--ease-out)}
.afn-js .afn-suite .rise.in > span{transform:none}

/* ============================================================
   08 · BUTTON COMPONENT
   ============================================================ */
.afn-suite .btn{
  position:relative;display:inline-flex;align-items:center;gap:11px;overflow:hidden;
  font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  padding:13px 22px;border:1px solid var(--slate);border-radius:var(--r);
  color:var(--ice);background:transparent;cursor:pointer;
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), box-shadow .5s var(--ease), transform .4s var(--ease-out);
  will-change:transform;
}
.afn-suite .btn .arw{transition:transform .4s var(--ease)}
.afn-suite .btn::before{
  content:"";position:absolute;inset:0;left:-130%;width:56%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-20deg);transition:left .8s var(--ease);pointer-events:none;
}
.afn-suite .btn:hover::before{left:190%}
.afn-suite .btn:hover{border-color:var(--ice);background:var(--ice);color:var(--ink);box-shadow:0 16px 40px -18px rgba(195,209,235,.45)}
.afn-suite .btn:hover .arw{transform:translateX(5px)}
.afn-suite .btn.fill{background:var(--ice);color:var(--ink);border-color:var(--ice)}
.afn-suite .btn.fill:hover{background:var(--white);border-color:var(--white);color:var(--black)}
.afn-suite .btn.sm{padding:10px 16px;font-size:9.5px}
/* Excluded from the magnetic-cursor effect in Global JS: a submit button
   that visibly drifts away from the pointer is a usability defect on a
   form, not a flourish. */
.afn-suite .btn.no-magnet{transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), box-shadow .5s var(--ease)}

/* ============================================================
   09 · REDUCED MOTION — shared components
   Page-specific motion (hero underline draw, portrait image zoom,
   parallax slabs, etc.) is handled in each page's own Page CSS.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .afn-suite,.afn-suite *,.afn-suite *::before,.afn-suite *::after{
    animation:none!important;transition:none!important;
  }
  html:has(.afn-suite){scroll-behavior:auto!important}
  .afn-suite .rv{opacity:1;transform:none}
  .afn-suite .rise > span{transform:none}
}

/* ============================================================
   10 · SHARED FORM SUITE
   Used by BOTH the dentist/clinic referral form (About page) and
   the patient consultation form (its own page). One implementation,
   scoped to .afn-suite, so neither page duplicates it and a fix or
   a design change here reaches both at once.

   Structure any form using this suite is expected to follow:

     <div class="afn-form-layout">
       <aside class="afn-form-aside"> … image, .afn-form-points … </aside>
       <div class="glass afn-form-panel">
         <h3 class="afn-form-title">…</h3>
         <p class="afn-form-note">…</p>
         <form class="afn-form" data-api="…" data-endpoint="…" data-lang="…" data-msg-*="…">
           <p class="afn-trap">…honeypot…</p>
           <fieldset class="afn-set"><legend>…</legend>
             <div class="afn-rows">
               <p class="afn-field">…</p>
               <p class="afn-field afn-wide">…</p>
             </div>
             <p class="afn-label" id="…">…</p>
             <div class="afn-choices" data-name="…" data-require-one>…chips…</div>
           </fieldset>
           <p class="afn-consent"><label>…</label></p>
           <div class="afn-submit"><button class="btn fill no-magnet">…</button>
             <p class="afn-status" role="status" aria-live="polite"></p></div>
           <p class="afn-legal">…</p>
         </form>
       </div>
     </div>
   ============================================================ */

.afn-suite .afn-form-layout{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(16px,2.2vw,34px);
  align-items:start;
}

/* ---- left rail --------------------------------------------------
   Sticky within the layout only. align-items:start above means a
   grid item's sticky containing block is still the full grid *area*
   (bounded by the taller sibling, .afn-form-panel) even though the
   box itself is only as tall as its own content. That is what keeps
   this pinned while the form scrolls and releases it automatically
   at the bottom of the row — no extra height, no empty space, no
   JS. Disabled below 1080px, where the columns stack. ------------- */
.afn-suite .afn-form-aside{
  display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px);
  align-self:start;
}
@media (min-width:1081px){
  .afn-suite .afn-form-aside{
    position:sticky;
    top:clamp(20px,4vh,44px);
  }
}

.afn-suite .afn-form-img{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(68,74,84,.7);background:var(--black);
}
.afn-suite .afn-form-img img{
  width:100%;height:clamp(260px,38vh,420px);object-fit:cover;object-position:50% 30%;
  filter:grayscale(42%) contrast(1.05);
  transform:scale(1.05);
  transition:filter 1.1s var(--ease), transform 1.4s var(--ease-out);
}
.afn-suite .afn-form-img:hover img{filter:grayscale(0);transform:scale(1.09)}
.afn-suite .afn-form-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(24,27,33,.30) 0%, transparent 32%, transparent 56%, rgba(24,27,33,.88) 100%);
}
.afn-suite .afn-form-img .stamp i{
  width:5px;height:5px;border-radius:50%;background:var(--ice);
  box-shadow:0 0 10px rgba(195,209,235,.9);display:inline-block;font-style:normal;
}
@media (prefers-reduced-motion:reduce){
  .afn-suite .afn-form-img img{transform:none}
}

.afn-suite .afn-form-points{list-style:none;display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px);margin:0;padding:0}
.afn-suite .afn-form-point{
  padding:clamp(20px,2.1vw,32px);
  display:flex;gap:clamp(16px,1.8vw,26px);align-items:flex-start;
}
.afn-suite .afn-form-point > *{position:relative;z-index:2}
.afn-suite .afn-form-point .n{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--slate);
  padding-top:5px;white-space:nowrap;transition:color .5s var(--ease);
}
.afn-suite .afn-form-point:hover .n{color:var(--ice)}
.afn-suite .afn-form-point h3{
  font-family:var(--font-display);font-weight:400;line-height:1.14;
  font-size:clamp(19px,1.6vw,26px);color:var(--white);
  margin-bottom:10px;
}

/* ---- form panel ----------------------------------------------- */

.afn-suite .afn-form-panel{padding:clamp(24px,2.8vw,50px)}
.afn-suite .afn-form-panel > *{position:relative;z-index:2}

.afn-suite .afn-form-title{
  font-family:var(--font-display);font-weight:400;line-height:1.1;
  font-size:clamp(24px,2.4vw,38px);color:var(--white);
}
.afn-suite .afn-form-note{margin-top:12px;max-width:56ch}

.afn-suite .afn-form{margin-top:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:clamp(20px,2.2vw,32px)}

.afn-suite .afn-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.afn-suite .afn-set{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:16px;position:relative}
/* A native <legend> cuts a hole in its fieldset border, which leaves a
   broken rule. The separator is drawn as a pseudo-element instead. */
.afn-suite .afn-set + .afn-set{padding-top:clamp(18px,2vw,28px)}
.afn-suite .afn-set + .afn-set::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(68,74,84,.5);
}
.afn-suite .afn-set legend{
  font-family:var(--font-mono);font-size:9.5px;font-weight:300;
  letter-spacing:.28em;text-transform:uppercase;color:var(--steel);
  padding:0;margin-bottom:4px;
}

.afn-suite .afn-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.afn-suite .afn-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.afn-suite .afn-wide{grid-column:1 / -1}

.afn-suite .afn-form label,
.afn-suite .afn-label{
  font-family:var(--font-mono);font-size:9.5px;font-weight:300;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
  line-height:1.7;
}
.afn-suite .afn-label{margin-bottom:-4px}
.afn-suite .afn-form abbr[title]{color:var(--ice);text-decoration:none;border:0;margin-left:2px}

.afn-suite .afn-form input[type=text],
.afn-suite .afn-form input[type=email],
.afn-suite .afn-form input[type=tel],
.afn-suite .afn-form input[type=date],
.afn-suite .afn-form select,
.afn-suite .afn-form textarea{
  width:100%;
  font-family:var(--font-body);font-size:15px;line-height:1.6;
  color:var(--white);
  background:rgba(24,27,33,.42);
  border:1px solid rgba(68,74,84,.85);
  border-radius:var(--r);
  padding:11px 13px;
  transition:border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.afn-suite .afn-form textarea{resize:vertical;min-height:118px}

.afn-suite .afn-form select{
  padding-right:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.afn-suite .afn-form select option{background:var(--ink);color:var(--mist)}

.afn-suite .afn-form input::placeholder,
.afn-suite .afn-form textarea::placeholder{color:var(--slate);opacity:1}

.afn-suite .afn-form input:hover,
.afn-suite .afn-form select:hover,
.afn-suite .afn-form textarea:hover{border-color:rgba(117,124,138,.95)}

.afn-suite .afn-form input:focus,
.afn-suite .afn-form select:focus,
.afn-suite .afn-form textarea:focus{
  outline:none;
  border-color:rgba(195,209,235,.6);
  background:rgba(24,27,33,.66);
  box-shadow:0 0 0 3px rgba(195,209,235,.10);
}
.afn-suite .afn-form input:focus-visible,
.afn-suite .afn-form select:focus-visible,
.afn-suite .afn-form textarea:focus-visible{outline:1.5px solid var(--ice);outline-offset:2px}

.afn-suite .afn-form input[type=date]{color-scheme:dark;min-height:44px}

/* ---- chips ----------------------------------------------------- */

.afn-suite .afn-choices{display:flex;flex-wrap:wrap;gap:8px}

.afn-suite .afn-chip{
  position:relative;display:inline-flex;align-items:center;
  font-family:var(--font-body);font-size:13.5px;letter-spacing:0;text-transform:none;
  color:var(--mist);line-height:1.4;
  cursor:pointer;
}
.afn-suite .afn-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.afn-suite .afn-chip span{
  display:block;padding:9px 15px;
  border:1px solid rgba(68,74,84,.85);border-radius:var(--r);
  background:rgba(24,27,33,.34);
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.afn-suite .afn-chip:hover span{border-color:rgba(117,124,138,1);color:var(--ice)}
.afn-suite .afn-chip input:checked + span{
  border-color:var(--ice);
  background:rgba(195,209,235,.13);
  color:var(--white);
  box-shadow:inset 0 0 0 1px rgba(195,209,235,.22);
}
.afn-suite .afn-chip input:focus-visible + span{outline:1.5px solid var(--ice);outline-offset:3px}

/* ---- consent, submit, status ----------------------------------- */

.afn-suite .afn-consent{padding-top:clamp(16px,2vw,24px);border-top:1px solid rgba(68,74,84,.5)}
.afn-suite .afn-consent label{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start;
  font-family:var(--font-body);font-size:13.5px;letter-spacing:0;text-transform:none;
  color:var(--steel);line-height:1.62;cursor:pointer;
}
.afn-suite .afn-consent input{
  -webkit-appearance:none;appearance:none;
  width:17px;height:17px;margin-top:3px;flex:none;
  border:1px solid rgba(117,124,138,.9);border-radius:2px;
  background:rgba(24,27,33,.5);cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.afn-suite .afn-consent input:checked{
  background:var(--ice);border-color:var(--ice);
  background-image:linear-gradient(45deg,transparent 42%,var(--ink) 42%,var(--ink) 52%,transparent 52%),linear-gradient(-45deg,transparent 60%,var(--ink) 60%,var(--ink) 70%,transparent 70%);
}
.afn-suite .afn-consent input:focus-visible{outline:1.5px solid var(--ice);outline-offset:3px}

.afn-suite .afn-submit{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
.afn-suite .afn-submit .btn[disabled]{opacity:.5;pointer-events:none}

.afn-suite .afn-status{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);line-height:1.7;max-width:44ch;
  min-height:1.7em;
}
.afn-suite .afn-status[data-state="ok"]{color:var(--ice)}
.afn-suite .afn-status[data-state="error"]{color:#E2A6A6}

.afn-suite .afn-legal{
  font-size:12.5px;line-height:1.72;color:var(--slate);max-width:62ch;
}

/* Invalid state, applied by Global JS only after a submit attempt. */
.afn-suite .afn-field.is-invalid input,
.afn-suite .afn-field.is-invalid textarea,
.afn-suite .afn-field.is-invalid select{border-color:rgba(226,166,166,.8)}
.afn-suite .afn-choices.is-invalid .afn-chip span{border-color:rgba(226,166,166,.55)}
.afn-suite .afn-consent.is-invalid input{border-color:rgba(226,166,166,.8)}

/* ---- responsive ------------------------------------------------ */

@media (max-width:1080px){
  .afn-suite .afn-form-layout{grid-template-columns:1fr;gap:clamp(14px,2.4vw,26px)}
  .afn-suite .afn-form-img img{height:clamp(240px,34vh,340px)}
}
@media (max-width:620px){
  .afn-suite .afn-rows{grid-template-columns:1fr}
  .afn-suite .afn-form-point{flex-direction:column;gap:10px}
  .afn-suite .afn-chip{font-size:13px}
  .afn-suite .afn-chip span{padding:9px 13px}
  .afn-suite .afn-submit{align-items:flex-start;flex-direction:column;gap:14px}
  .afn-suite .afn-submit .btn{width:100%;justify-content:center}
}