/* ============================================================================
   PAGE CSS — Homepage
   Site Assets -> Page Assets (CSS)  |  asset key: home
   Compiles to /uploads/site-assets/css/pages/home.css
   Only styles that exist nowhere else on the site.
   ========================================================================= */

/* ------------------------------------------------------------------- HERO -- */
.afn-hero{
  min-height:100svh;
  display:flex;align-items:center;
  padding:140px var(--afn-gutter) 90px;
  position:relative;overflow:hidden;
}
.afn-hero__bg{position:absolute;inset:0;z-index:0}
.afn-hero__poster,
.afn-hero__video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
  filter:grayscale(18%) contrast(1.05);
}
.afn-hero__video{opacity:0;transition:opacity .9s var(--afn-ease)}
.afn-hero__video.is-playing{opacity:1}

.afn-hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg, rgba(24,27,33,.94) 0%, rgba(24,27,33,.78) 34%, rgba(24,27,33,.42) 62%, rgba(24,27,33,.28) 100%),
    linear-gradient(180deg, rgba(24,27,33,.55) 0%, transparent 26%, transparent 62%, rgba(24,27,33,.96) 100%);
}
.afn-hero__rule{
  position:absolute;inset:0;z-index:2;opacity:.35;pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(195,209,235,.045) 0 1px, transparent 1px 120px);
  mix-blend-mode:screen;
}

.afn-hero__copy{position:relative;z-index:3;max-width:900px;padding-bottom:clamp(30px,6vh,70px)}

.afn-hero__meta{
  font-family:var(--afn-font-mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--afn-blue);display:flex;gap:26px;margin-bottom:34px;flex-wrap:wrap;
}
.afn-hero__meta span{display:flex;align-items:center;gap:8px}
.afn-dot{width:5px;height:5px;border-radius:50%;background:var(--afn-ice);box-shadow:0 0 10px rgba(195,209,235,.8)}

.afn-hero__title{font-size:clamp(48px,7.6vw,100px);text-shadow:0 2px 40px rgba(24,27,33,.6)}
.afn-line{display:block;overflow:hidden}
.afn-js .afn-line > span{display:block;transform:translateY(110%);animation:afn-rise 1.1s var(--afn-ease) forwards}
.afn-js .afn-line:nth-child(2) > span{animation-delay:.12s}
@keyframes afn-rise{to{transform:translateY(0)}}

.afn-hero__tagline{
  font-family:var(--afn-font-display);font-style:italic;
  font-size:clamp(22px,2.6vw,34px);color:var(--afn-ice);
  margin-top:22px;line-height:1.15;
}
.afn-hero__sub{
  margin-top:30px;
  font-family:var(--afn-font-display);font-style:italic;
  font-size:clamp(18px,1.8vw,24px);
  color:var(--afn-blue);letter-spacing:.01em;
}
.afn-js .afn-hero__sub{opacity:0;animation:afn-fade 1.2s .5s var(--afn-ease) forwards}
@keyframes afn-fade{to{opacity:1}}

.afn-scribble{position:relative;display:inline-block;color:var(--afn-ice);padding-bottom:2px}
.afn-scribble svg{position:absolute;left:-2%;bottom:-9px;width:104%;height:13px;overflow:visible}
.afn-scribble path{
  stroke:var(--afn-ice);fill:none;stroke-width:2.4;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(195,209,235,.55));
}
.afn-js .afn-scribble path{
  stroke-dasharray:250;stroke-dashoffset:250;
  animation:afn-draw 1.5s 1.5s var(--afn-ease) forwards;
}
@keyframes afn-draw{to{stroke-dashoffset:0}}

.afn-hero__actions{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap}
.afn-js .afn-hero__actions{opacity:0;animation:afn-fade 1s .8s var(--afn-ease) forwards}

.afn-scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:5;
}
.afn-js .afn-scroll-cue{opacity:0;animation:afn-fade 1.2s 1.4s var(--afn-ease) forwards}
.afn-scroll-cue svg{width:22px;height:36px;overflow:visible}
.afn-scroll-cue rect{fill:none;stroke:var(--afn-blue);stroke-width:1.2;transition:stroke .35s}
.afn-cue-dot{fill:var(--afn-ice);animation:afn-cue 2.2s var(--afn-ease) infinite}
.afn-scroll-cue span{
  font-family:var(--afn-font-mono);font-size:9px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--afn-blue);padding-left:.42em;transition:color .35s;
}
.afn-scroll-cue:hover rect{stroke:var(--afn-ice)}
.afn-scroll-cue:hover span{color:var(--afn-ice)}
.afn-scroll-cue::after{content:"";width:1px;height:26px;background:linear-gradient(180deg,var(--afn-blue),transparent)}
@keyframes afn-cue{
  0%{transform:translateY(0);opacity:0}
  25%{opacity:1}
  70%{transform:translateY(14px);opacity:1}
  100%{transform:translateY(18px);opacity:0}
}

/* ------------------------------------------------------------------ STATS -- */
.afn-stats{
  border-top:1px solid var(--afn-char);border-bottom:1px solid var(--afn-char);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.afn-stat{
  padding:clamp(30px,4vw,52px) var(--afn-gutter);
  border-right:1px solid var(--afn-char);
  display:flex;flex-direction:column;gap:8px;
  transition:background .5s var(--afn-ease);
}
.afn-stat:last-child{border-right:none}
.afn-stat:hover{background:rgba(195,209,235,.04)}
.afn-stat__num{
  font-family:var(--afn-font-display);font-size:clamp(38px,4.4vw,64px);
  color:var(--afn-white);line-height:1;transition:text-shadow .5s var(--afn-ease);
}
.afn-stat:hover .afn-stat__num{text-shadow:0 0 26px rgba(195,209,235,.4)}
.afn-stat__num i{font-style:normal;color:var(--afn-ice)}
.afn-stat__lbl{
  font-family:var(--afn-font-mono);font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--afn-slate);transition:color .4s;
}
.afn-stat:hover .afn-stat__lbl{color:var(--afn-blue)}

/* ------------------------------------------------------------------ ABOUT -- */
.afn-about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,110px);align-items:center}
.afn-about__visual{position:relative}
.afn-about__visual img{
  width:100%;height:clamp(420px,60vh,620px);object-fit:cover;
  border-radius:var(--afn-radius);border:1px solid rgba(68,74,84,.6);
  filter:grayscale(35%);
  transition:filter .8s var(--afn-ease), transform 1s var(--afn-ease), box-shadow .8s var(--afn-ease);
}
.afn-about__visual:hover img{filter:grayscale(0);transform:scale(1.015) translateY(-4px);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.afn-about__depth{
  position:absolute;inset:auto -18px -18px auto;width:70%;height:70%;
  border:1px solid var(--afn-char);z-index:-1;border-radius:var(--afn-radius);
  transition:transform .8s var(--afn-ease), border-color .8s var(--afn-ease);
}
.afn-about__visual:hover .afn-about__depth{transform:translate(7px,7px);border-color:var(--afn-slate)}
.afn-about__copy h2{font-size:clamp(34px,4vw,58px);margin:18px 0 26px}
.afn-about__copy .afn-body{margin-top:18px}
.afn-about__copy .afn-sig{margin-top:34px}
.afn-about__copy .afn-btn{margin-top:36px}

/* --------------------------------------------------------------- SERVICES -- */
.afn-services{padding:0}
.afn-services .afn-sec-head{padding:0 var(--afn-gutter);margin-bottom:clamp(28px,4vh,50px)}
.afn-services .afn-sec-head h2{font-size:clamp(28px,3.2vw,46px)}

.afn-track-hint{
  padding:0 var(--afn-gutter);display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--afn-font-mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--afn-blue);margin-bottom:22px;
}

.afn-services__pin{position:relative}
.afn-services__sticky{
  padding:0 0 clamp(50px,7vh,80px);
}

/* Default (and mobile, and no-JS): native horizontal scroll-snap. */
.afn-track{
  display:flex;gap:clamp(18px,2vw,28px);
  padding:6px var(--afn-gutter) 34px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--afn-char) transparent;
}
.afn-track::-webkit-scrollbar{height:4px}
.afn-track::-webkit-scrollbar-thumb{background:var(--afn-char)}

.afn-track-progress{margin:0 var(--afn-gutter);height:1px;background:var(--afn-char);position:relative;display:none}
.afn-track-progress i{
  position:absolute;left:0;top:-.5px;height:2px;width:0;
  background:var(--afn-ice);box-shadow:0 0 8px rgba(195,209,235,.7);
  transition:width .1s linear;
}

/* Scroll-pinned mode — desktop only, added by JS. */
.afn-services.is-pinned .afn-services__sticky{
  position:sticky;top:0;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-start;
  overflow:hidden;padding:92px 0 18px;
}
.afn-services.is-pinned .afn-track{
  overflow:visible;scroll-snap-type:none;padding-bottom:20px;
  will-change:transform;
}
.afn-services.is-pinned .afn-track-progress{display:block}
.afn-services.is-pinned .afn-sec-head{margin-bottom:clamp(16px,2.6vh,30px)}
.afn-services.is-pinned .afn-track-hint{margin-bottom:14px}
.afn-services.is-pinned .afn-svc{padding:clamp(20px,2.1vw,32px);gap:16px;flex-basis:clamp(360px,45vw,600px)}
.afn-services.is-pinned .afn-svc h3{font-size:clamp(24px,2.1vw,31px)}
.afn-services.is-pinned .afn-svc p{font-size:13.5px;line-height:1.62}
.afn-services.is-pinned .afn-ba img{height:140px}

@media (max-height:840px){
  .afn-services.is-pinned .afn-services__sticky{padding-top:78px}
  .afn-services.is-pinned .afn-sec-head h2{font-size:clamp(24px,2.6vw,36px)}
  .afn-services.is-pinned .afn-svc{gap:13px;padding:20px 22px}
  .afn-services.is-pinned .afn-svc h3{font-size:22px}
  .afn-services.is-pinned .afn-svc p{font-size:12.5px;line-height:1.55}
  .afn-services.is-pinned .afn-ba img{height:120px}
}

.afn-svc{
  scroll-snap-align:start;
  flex:0 0 clamp(320px,42vw,560px);
  border:1px solid var(--afn-char);border-radius:var(--afn-radius);
  background:linear-gradient(180deg, rgba(68,74,84,.16), rgba(24,27,33,0) 45%);
  transition:border-color .4s var(--afn-ease), transform .5s var(--afn-ease), box-shadow .5s var(--afn-ease);
}
.afn-svc > article{
  height:100%;padding:clamp(26px,3vw,44px);
  display:flex;flex-direction:column;gap:22px;
}
.afn-svc:hover{
  border-color:var(--afn-blue);transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(195,209,235,.06);
}
.afn-svc__num{font-family:var(--afn-font-mono);font-size:11px;color:var(--afn-slate);letter-spacing:.2em}
.afn-svc h3{font-family:var(--afn-font-display);font-weight:400;font-size:clamp(26px,2.4vw,36px);color:var(--afn-white);line-height:1.1}
.afn-svc p{color:var(--afn-slate);font-size:14.5px;line-height:1.75}
.afn-svc .afn-link{margin-top:auto}

.afn-ba{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.afn-ba--single{grid-template-columns:1fr}
.afn-ba figure{
  position:relative;overflow:hidden;border-radius:var(--afn-radius);
  border:1px solid rgba(68,74,84,.55);background:var(--afn-black);
}
.afn-ba img{width:100%;height:170px;object-fit:contain;padding:6px;transition:transform .8s var(--afn-ease)}
.afn-ba--single img{height:190px}
.afn-svc:hover .afn-ba img{transform:scale(1.03)}
.afn-ba figcaption{
  position:absolute;bottom:8px;left:8px;
  font-family:var(--afn-font-mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--afn-ice);background:rgba(24,27,33,.7);backdrop-filter:blur(4px);
  padding:4px 9px;border:1px solid rgba(195,209,235,.16);
}

/* -------------------------------------------------------------- ECOSYSTEM -- */
.afn-eco{
  display:grid;gap:16px;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(120px,auto);
}
.afn-cell{
  border:1px solid var(--afn-char);border-radius:var(--afn-radius);
  padding:clamp(24px,2.6vw,38px);
  background:rgba(68,74,84,.10);
  position:relative;overflow:hidden;
  transition:border-color .4s var(--afn-ease), background .4s var(--afn-ease);
}
.afn-cell:hover{border-color:var(--afn-blue);background:rgba(195,209,235,.05)}
.afn-cell--lead{grid-column:span 7;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.afn-cell--lead h2{font-size:clamp(30px,3.4vw,50px)}

.afn-cell--sm{
  grid-column:span 4;display:flex;flex-direction:column;gap:10px;
  justify-content:flex-end;min-height:170px;
}
.afn-cell__k{font-family:var(--afn-font-mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--afn-slate)}
.afn-cell__v{font-family:var(--afn-font-display);font-size:24px;color:var(--afn-white);line-height:1.15;transition:color .4s}
.afn-cell--sm:hover .afn-cell__v{color:var(--afn-ice)}
.afn-cell--sm::before{
  content:"";position:absolute;top:22px;left:24px;width:8px;height:8px;
  border:1px solid var(--afn-ice);transform:rotate(45deg);opacity:.7;
  transition:transform .6s var(--afn-ease), background .5s, box-shadow .5s, opacity .5s;
}
.afn-cell--sm:hover::before{transform:rotate(225deg);background:var(--afn-ice);opacity:1;box-shadow:0 0 14px rgba(195,209,235,.8)}

.afn-holo{
  grid-column:span 5;grid-row:span 2;padding:0;
  background:var(--afn-black);border:1px solid rgba(164,179,207,.35);
  min-height:340px;perspective:1100px;transform-style:preserve-3d;
  --afn-px:0;--afn-py:0;--afn-mx:50%;--afn-my:50%;
  transition:border-color .5s var(--afn-ease), box-shadow .6s var(--afn-ease), transform .9s var(--afn-ease);
}
.afn-holo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(10%) contrast(1.04);transform-origin:center;
  transition:filter .8s var(--afn-ease), transform .5s var(--afn-ease);
}
.afn-holo:hover img{
  filter:grayscale(0);
  transform:scale(1.07) translate(calc(var(--afn-px) * -14px), calc(var(--afn-py) * -10px));
}
.afn-holo:hover{
  border-color:var(--afn-ice);
  box-shadow:0 0 0 1px rgba(195,209,235,.18), 0 46px 90px -46px rgba(0,0,0,.95), 0 30px 70px -40px rgba(195,209,235,.28);
}
.afn-holo::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg, transparent 65%, rgba(24,27,33,.7));
}
.afn-holo__glare{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:0;transition:opacity .55s var(--afn-ease);
  background:radial-gradient(460px circle at var(--afn-mx) var(--afn-my), rgba(255,255,255,.16), rgba(195,209,235,.07) 34%, transparent 62%);
  mix-blend-mode:screen;
}
.afn-holo:hover .afn-holo__glare{opacity:1}
.afn-holo__texture{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .7s var(--afn-ease);
  background:radial-gradient(rgba(195,209,235,.12) 1px, transparent 1px);
  background-size:26px 26px;
  background-position:calc(var(--afn-px) * 8px) calc(var(--afn-py) * 8px);
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(340px circle at var(--afn-mx) var(--afn-my), #000 30%, transparent 75%);
          mask-image:radial-gradient(340px circle at var(--afn-mx) var(--afn-my), #000 30%, transparent 75%);
}
.afn-holo:hover .afn-holo__texture{opacity:.5}
.afn-holo:hover .afn-corner--tl{top:9px;left:9px}
.afn-holo:hover .afn-corner--tr{top:9px;right:9px}
.afn-holo:hover .afn-corner--bl{bottom:9px;left:9px}
.afn-holo:hover .afn-corner--br{bottom:9px;right:9px}
.afn-holo__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:var(--afn-font-mono);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--afn-blue);
}

/* -------------------------------------------------------------- FINAL CTA -- */
.afn-cta{
  text-align:center;border-top:1px solid var(--afn-char);
  position:relative;overflow:hidden;padding:0;
}
.afn-cta__bg{position:absolute;inset:0;z-index:0}
.afn-cta__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  filter:grayscale(90%) contrast(1.08) brightness(.6);transform:scale(1.05);
}
.afn-cta__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(24,27,33,.55) 0%, rgba(24,27,33,.74) 55%, rgba(24,27,33,.94) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 25%, rgba(24,27,33,.6) 100%);
}
.afn-cta::before{
  content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:900px;height:520px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(195,209,235,.14), transparent 70%);
  pointer-events:none;z-index:1;
}
.afn-cta__inner{position:relative;z-index:2;padding:clamp(100px,13vh,170px) var(--afn-gutter)}
.afn-cta__glass{
  max-width:760px;margin:0 auto;position:relative;
  padding:clamp(46px,5.5vw,76px) clamp(28px,4vw,64px);
  background:linear-gradient(180deg, rgba(195,209,235,.10), rgba(68,74,84,.10));
  border:1px solid rgba(195,209,235,.22);border-radius:var(--afn-radius);
  backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 44px 90px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-color .5s var(--afn-ease), box-shadow .5s var(--afn-ease);
}
.afn-cta__glass:hover{
  border-color:rgba(195,209,235,.4);
  box-shadow:0 54px 110px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.09);
}
.afn-cta__glass .afn-corner{width:22px;height:22px}
.afn-cta__glass .afn-corner--tl{top:-1px;left:-1px}
.afn-cta__glass .afn-corner--tr{top:-1px;right:-1px}
.afn-cta__glass .afn-corner--bl{bottom:-1px;left:-1px}
.afn-cta__glass .afn-corner--br{bottom:-1px;right:-1px}
.afn-cta__glass:hover .afn-corner--tl{top:5px;left:5px}
.afn-cta__glass:hover .afn-corner--tr{top:5px;right:5px}
.afn-cta__glass:hover .afn-corner--bl{bottom:5px;left:5px}
.afn-cta__glass:hover .afn-corner--br{bottom:5px;right:5px}
.afn-cta h2{font-size:clamp(40px,6vw,88px);margin:18px 0 20px}
.afn-cta .afn-lede{margin:0 auto 42px}
.afn-cta .afn-eyebrow{justify-content:center}

/* -------------------------------------------------------------- RESPONSIVE */
@media (max-width:960px){
  .afn-hero{padding-top:120px}
  .afn-scroll-cue{display:none}
  .afn-stats{grid-template-columns:1fr}
  .afn-stat{border-right:none;border-bottom:1px solid var(--afn-char)}
  .afn-stat:last-child{border-bottom:none}
  .afn-about{grid-template-columns:1fr}
  .afn-eco{grid-template-columns:1fr}
  .afn-cell--lead,.afn-cell--sm,.afn-holo{grid-column:span 1;grid-row:auto}
  .afn-holo{min-height:320px}
  .afn-services .afn-sec-head h2{font-size:clamp(20px,6vw,26px);line-height:1.2}
  .afn-svc{flex-basis:calc(100vw - (var(--afn-gutter) * 2))}
  .afn-svc > article{padding:20px;gap:14px}
  .afn-svc h3{font-size:22px}
  .afn-ba img{height:130px}
  .afn-svc p{font-size:13px;line-height:1.58}
}



/* =============================================================================
   PATCH for PAGE CSS — Homepage   (Site Assets -> Page Assets (CSS), key: home)

   WHY: the homepage's static before/after image pair uses .afn-ba, but
   global.css ALREADY defines .afn-ba as the DRAGGABLE compare slider used on the
   implants pillar page (global.css ~line 1207, driven by [data-afn-compare]).

   The current page CSS only overrides `display`. Everything else from the
   compare-slider component still cascades onto the homepage pair:

       touch-action : none            <-- BLOCKS TOUCH SCROLLING over these images
       cursor       : ew-resize       <-- implies a drag affordance that does not exist
       border-radius: 22px            <-- contradicts the homepage's 2px radius language
       overflow     : hidden
       border       : 1px solid var(--afn-line-strong)
       background   : var(--afn-black)
       user-select  : none
       box-shadow   : 0 20px 50px rgba(0,0,0,.4)
       margin       : 0 0 38px

   The touch-action line is the shippable bug: on a phone, a vertical swipe that
   starts on a before/after image does nothing, so the page feels stuck.

   FIX: neutralise the inherited component in PAGE css only. global.css is not
   touched, so the implants pillar page's real compare slider is unaffected.

   Append this to the existing home page CSS asset, AFTER the current .afn-ba
   rules (or replace the current `.afn-ba{display:grid...}` line with this block).
   ============================================================================= */

.afn-services .afn-ba{
  /* re-assert the homepage's own layout */
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;

  /* neutralise the inherited compare-slider component */
  touch-action:auto;
  cursor:auto;
  user-select:auto;
  border:0;
  border-radius:0;
  overflow:visible;
  background:none;
  box-shadow:none;
  margin:0 0 18px;
}

.afn-services .afn-ba--single{grid-template-columns:1fr}

/* global.css sets .afn-ba img{pointer-events:none}. Harmless for static images,
   but restore it so the hover zoom on .afn-svc:hover .afn-ba img reads correctly. */
.afn-services .afn-ba img{pointer-events:auto}