/* ==========================================================================
   RESNIK IMPLANT INSTITUTE OF WINTER PARK — design system
   Palette : deep navy ground, arctic blue accent, cool white space
   Type    : Fraunces (display) / Jost (text, UI, data)
   ========================================================================== */

:root{
  --white:      #FFFFFF;
  --paper:      #F7F5FA;
  --paper-2:    #EDE8F3;
  --ice:        #D4D9DD;

  --navy:       #362842;
  --navy-2:     #4A3860;
  --navy-3:     #2A1F34;

  --ink:        #2C2F33;
  --ink-soft:   #4C505A;
  --ink-mute:   #767B85;
  --ink-faint:  #9AA0AA;

  --accent:     #58447F;
  --accent-2:   #43325F;
  --sky:        #BEAFDA;
  --sky-soft:   #D9CFEC;

  --rule:       rgba(44,47,51,.15);
  --rule-soft:  rgba(44,47,51,.08);
  --shadow:     0 26px 60px -38px rgba(54,40,66,.45);
  --shadow-lg:  0 40px 90px -50px rgba(54,40,66,.6);

  --on-navy:      #F3EFF8;
  --on-navy-mute: #B8AECA;
  --on-navy-rule: rgba(234,242,249,.16);

  --maxw: 1220px;
  --gut: clamp(20px, 5vw, 60px);
  --sect: clamp(64px, 8vw, 116px);
  --r: 0px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --white:      #0B1219;
    --paper:      #101A24;
    --paper-2:    #16232F;
    --ice:        #1B2B3A;

    --navy:       #1B1322;
    --navy-2:     #261B31;
    --navy-3:     #130D18;

    --ink:        #E9F1F8;
    --ink-soft:   #B9CBDB;
    --ink-mute:   #8CA1B5;
    --ink-faint:  #6B8095;

    --accent:     #BEAFDA;
    --accent-2:   #D3C7E9;
    --sky:        #BEAFDA;
    --sky-soft:   #43325F;

    --rule:       rgba(233,241,248,.15);
    --rule-soft:  rgba(233,241,248,.08);
    --shadow:     0 26px 60px -38px rgba(0,0,0,.8);
    --shadow-lg:  0 40px 90px -50px rgba(0,0,0,.9);

    --on-navy:      #E9F1F8;
    --on-navy-mute: #93A9BD;
    --on-navy-rule: rgba(233,241,248,.15);
    color-scheme: dark;
  }
}

:root[data-theme="dark"]{
  --white:#0B1219; --paper:#101A24; --paper-2:#16232F; --ice:#1B2B3A;
  --navy:#1B1322; --navy-2:#261B31; --navy-3:#130D18;
  --ink:#E9F1F8; --ink-soft:#B9CBDB; --ink-mute:#8CA1B5; --ink-faint:#6B8095;
  --accent:#BEAFDA; --accent-2:#D3C7E9; --sky:#BEAFDA; --sky-soft:#43325F;
  --rule:rgba(233,241,248,.15); --rule-soft:rgba(233,241,248,.08);
  --shadow:0 26px 60px -38px rgba(0,0,0,.8); --shadow-lg:0 40px 90px -50px rgba(0,0,0,.9);
  --on-navy:#E9F1F8; --on-navy-mute:#93A9BD; --on-navy-rule:rgba(233,241,248,.15);
  color-scheme: dark;
}

.skip{ position:absolute; left:0; top:-100px; z-index:200; background:var(--navy); color:var(--on-navy);
  padding:12px 18px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border-radius:0 0 var(--r) 0; }
.skip:focus{ top:0; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

html{ overflow-x:hidden; }
body{
  margin:0; background:var(--white); color:var(--ink); max-width:100vw;
  font-family:"Jost","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-weight:400; color:var(--ink); margin:0; text-wrap:balance;
  letter-spacing:-.012em; line-height:1.1;
}
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:830px; }
.num{ font-variant-numeric:tabular-nums; }

.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:11px; margin:0;
}
.eyebrow{ flex-wrap:wrap; }
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; flex:none; }
@media (max-width:520px){ .eyebrow{ font-size:10.6px; letter-spacing:.16em; } }
.eyebrow.c{ justify-content:center; }
.lede{ font-size:clamp(16.5px,1.4vw,19px); color:var(--ink-soft); line-height:1.68; max-width:64ch; }
.small{ font-size:14px; color:var(--ink-mute); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-family:"Jost",sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:14px 24px; border-radius:var(--r); text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.btn-solid{ background:var(--accent); color:#fff; }
.btn-solid:hover{ background:var(--navy); transform:translateY(-1px); }
.btn-line{ border-color:var(--rule); color:var(--ink); }
.btn-line:hover{ border-color:var(--accent); color:var(--accent); }
.btn-onnavy{ border-color:var(--on-navy-rule); color:var(--on-navy); }
.btn-onnavy:hover{ background:var(--on-navy); color:var(--navy); }
.btn-sky{ background:var(--sky); color:#08192A; }
.btn-sky:hover{ background:#fff; }
.arw{ font-size:15px; line-height:1; transform:translateY(-1px); }

/* ---------- top bar + nav ---------- */
.topbar{
  background:var(--navy); color:var(--on-navy-mute);
  font-size:12.4px; letter-spacing:.04em;
}
.topbar-in{ display:flex; align-items:center; gap:22px; height:40px; }
.topbar a{ text-decoration:none; color:var(--on-navy-mute); }
.topbar a:hover{ color:var(--on-navy); }
.topbar .sep{ margin-left:auto; }
@media (max-width:840px){ .topbar{ display:none; } }

.nav{
  position:sticky; top:0; z-index:70; background:var(--white);
  border-bottom:1px solid var(--rule-soft);
}
.nav-in{ display:flex; align-items:center; gap:clamp(10px,1.1vw,16px); height:82px; }
.mark{ display:flex; flex-direction:column; align-items:flex-start; line-height:1; text-decoration:none; margin-right:auto; }
.mark b{ font-family:"Fraunces","Iowan Old Style",Georgia,serif; font-weight:500; font-size:23px;
  letter-spacing:.005em; white-space:nowrap; }
.mark span{ font-size:8.4px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
  font-weight:600; margin-top:7px; white-space:nowrap; }
@media (max-width:520px){
  .mark b{ font-size:20px; }
  .mark span{ white-space:normal; letter-spacing:.14em; font-size:7.6px; line-height:1.5; max-width:210px; }
}

.menu{ display:flex; align-items:center; gap:2px; }
.menu > li{ list-style:none; position:relative; }
.menu > li > a, .menu > li > button{
  display:flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  font-family:"Jost",sans-serif; font-size:12.6px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
  padding:10px clamp(7px,0.75vw,11px); border-radius:var(--r); white-space:nowrap;
}
.menu > li > a:hover, .menu > li > button:hover, .menu > li.open > button{ color:var(--accent); background:var(--paper); }
.menu > li > a.on{ color:var(--accent); }
.caret{ width:7px; height:7px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s ease; }
.menu > li.open .caret{ transform:rotate(-135deg) translateY(-2px); }

.drop{
  position:absolute; top:calc(100% + 6px); left:0; min-width:264px; padding:10px;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--r);
  box-shadow:var(--shadow); display:none; flex-direction:column; gap:2px; z-index:80;
}
.menu > li.open .drop{ display:flex; }
.menu > li:focus-within .drop{ display:flex; }
.menu > li > .drop::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.menu > li.open > button, .menu > li:focus-within > button{ color:var(--accent); background:var(--paper); }
.menu > li:focus-within .caret{ transform:rotate(-135deg) translateY(-2px); }
@media (prefers-reduced-motion: no-preference){
  .drop{ animation:dropIn .18s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes dropIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
}
.drop a{
  display:block; padding:10px 12px; text-decoration:none; border-radius:2px;
  font-size:14.4px; color:var(--ink-soft); line-height:1.35;
}
.drop a small{ display:block; font-size:12px; color:var(--ink-faint); margin-top:3px; }
.drop a:hover{ background:var(--paper); color:var(--accent); }
.drop a:hover small{ color:var(--ink-mute); }

.nav-right{ display:flex; align-items:center; gap:14px; }
.burger{ display:none; background:none; border:1px solid var(--rule); border-radius:var(--r);
  width:44px; height:42px; cursor:pointer; padding:0; align-items:center; justify-content:center; }
.burger span{ display:block; width:18px; height:1.6px; background:var(--ink); position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.6px; background:var(--ink); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

@media (max-width:1280px){ .menu{ display:none; } .burger{ display:flex; } }
@media (max-width:1520px){ .menu > li > a, .menu > li > button{ font-size:11.6px; letter-spacing:.045em; }
  .nav-right .btn{ padding:11px 16px; font-size:11.5px; } }
@media (max-width:620px){ .nav-in{ height:70px; } .nav-right .btn{ display:none; } }
@media (max-width:560px){ .btn{ max-width:100%; white-space:normal; text-align:center; line-height:1.35; } }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:90; background:var(--white); overflow-y:auto;
  padding:24px var(--gut) 60px; display:none;
}
.drawer.on{ display:block; }
.drawer-top{ display:flex; align-items:center; justify-content:space-between; height:58px; }
.drawer-x{ background:none; border:0; font-size:26px; line-height:1; cursor:pointer; color:var(--ink); padding:6px 10px; }
.drawer h4{ font-family:"Jost",sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin:26px 0 10px; }
.drawer a{ display:block; padding:11px 0; text-decoration:none; font-size:16.5px;
  color:var(--ink-soft); border-bottom:1px solid var(--rule-soft); }
.drawer .mark{ display:flex; flex-direction:column; padding:0; border-bottom:0; }
.drawer .mark b{ font-size:21px; }
.drawer .mark span{ white-space:normal; max-width:230px; }
.drawer-top{ border-bottom:1px solid var(--rule); padding-bottom:14px; margin-bottom:6px; }

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--navy); color:var(--on-navy); overflow:hidden; }
.hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:120px; z-index:1;
  background:linear-gradient(180deg,rgba(11,27,43,0),color-mix(in srgb,var(--white) 12%,transparent)); pointer-events:none; }
.hero-in{ will-change:transform; }
.ctaband{ position:relative; overflow:hidden; }
.ctaband canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.7; }
.ctaband .wrap{ position:relative; z-index:2; }
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.85; }
.hero-in{ position:relative; z-index:2; padding-block:clamp(66px,9vw,128px); }
.hero h1{ color:var(--on-navy); font-size:clamp(36px,5vw,66px); line-height:1.03; margin-top:20px; }
.hero h1 em{ font-style:italic; font-weight:300; color:var(--sky); }
.hero .eyebrow{ color:var(--sky); }
.hero .lede{ color:var(--on-navy-mute); margin-top:20px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,70px); align-items:center; }
@media (max-width:940px){ .hero-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:760px){
  .hero:not(.hero-sub) .hero-grid > .split-art{ display:none; }
  .hero:not(.hero-sub) .hero-grid > .split-art.cover-wrap{ display:block; margin-top:34px; }
  .hero:not(.hero-sub) .hero-stats{ margin-top:clamp(26px,5vw,36px); }
}

.hero-sub{ background:var(--navy); color:var(--on-navy); }
.hero-sub .hero-in{ padding-block:clamp(46px,6vw,84px); }
.hero-sub h1{ font-size:clamp(32px,4.4vw,54px); }
.crumb{ font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--on-navy-mute);
  font-weight:600; margin:0 0 22px; }
.hero-card{ border:1px solid var(--on-navy-rule); border-radius:var(--r); padding:clamp(20px,2.6vw,30px);
  background:rgba(255,255,255,.03); }
.hero-card .hc-t{ font-size:10.8px; letter-spacing:.17em; text-transform:uppercase; font-weight:700; color:var(--sky); }
.hero-card ul{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
.hero-card li{ position:relative; padding-left:22px; font-size:14.6px; line-height:1.5; color:var(--on-navy-mute); }
.hero-card li::before{ content:""; position:absolute; left:0; top:10px; width:11px; height:1px; background:var(--sky); }
.crumb a{ text-decoration:none; color:var(--sky); }

.hero-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,3vw,32px);
  margin-top:clamp(32px,4vw,48px); padding-top:24px; border-top:1px solid var(--on-navy-rule); }
.hero-stats b{ display:block; font-family:"Fraunces","Iowan Old Style",Georgia,serif; font-size:clamp(24px,2.8vw,34px);
  color:var(--sky); line-height:1; font-variant-numeric:tabular-nums; }
.hero-stats span{ display:block; margin-top:9px; font-size:12.4px; color:var(--on-navy-mute); line-height:1.45; }

/* ---------- section shell ---------- */
.section{ padding-block:var(--sect); }
.section.tint{ background:var(--paper); }
.section.tint2{ background:var(--paper-2); }
.section.navy{ background:var(--navy); color:var(--on-navy); }
.section.navy h2,.section.navy h3{ color:var(--on-navy); }
.section.navy .lede{ color:var(--on-navy-mute); }
.section.navy .eyebrow{ color:var(--sky); }
.sec-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(18px,4vw,58px); align-items:end; }
.sec-head h2{ font-size:clamp(28px,3.6vw,46px); margin-top:16px; }
.sec-head.solo{ grid-template-columns:minmax(0,1fr); }
.sec-head.solo .lede{ margin-top:18px; }
@media (max-width:820px){ .sec-head{ grid-template-columns:minmax(0,1fr); } }
.sec-body{ margin-top:clamp(32px,4vw,54px); }

.prose{ max-width:none; }
.prose > *{ max-width:70ch; }
.prose p{ color:var(--ink-soft); font-size:16.8px; }
.prose p + p{ margin-top:16px; }
.prose h3{ font-size:clamp(21px,2.2vw,27px); margin-top:34px; margin-bottom:12px; }
.prose ul{ margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.prose li{ position:relative; padding-left:24px; color:var(--ink-soft); font-size:16.2px; line-height:1.55; }
.prose li::before{ content:""; position:absolute; left:0; top:11px; width:11px; height:1px; background:var(--accent); }

/* ---------- cards ---------- */
.cards{ display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); }
.cards.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cards.c3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cards.c4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.card{ background:var(--white); padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:11px; }
.tint .card{ background:var(--paper); }
.tint2 .card{ background:var(--paper-2); }
.card .ico{ color:var(--accent); }
.card h3{ font-size:20px; line-height:1.24; }
.card p{ font-size:15px; color:var(--ink-soft); line-height:1.58; }
.card a.more{ margin-top:auto; padding-top:8px; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); text-decoration:none; }
.card a.more:hover{ text-decoration:underline; }
@media (max-width:1000px){ .cards.c4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:880px){ .cards.c3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .cards.c2,.cards.c3,.cards.c4{ grid-template-columns:minmax(0,1fr); } }

/* linked service tiles */
.tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px); }
.tile{
  display:flex; flex-direction:column; gap:10px; text-decoration:none;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--r);
  padding:clamp(20px,2.4vw,28px); transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.tint .tile{ background:var(--white); }
.tile:hover{ border-color:var(--accent); transform:translateY(-4px);
  box-shadow:0 24px 50px -30px rgba(11,27,43,.5), 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent); }
.art{ will-change:transform; }
.tile .k{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
.tile h3{ font-size:20.5px; line-height:1.22; }
.tile p{ font-size:14.6px; color:var(--ink-soft); }
.tile .go{ margin-top:auto; padding-top:10px; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); }
@media (max-width:900px){ .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .tiles{ grid-template-columns:minmax(0,1fr); } }

/* ---------- split (text + art) ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center; }
.split.flip .split-art{ order:-1; }
.split.narrow-art{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
@media (max-width:900px){ .split,.split.narrow-art{ grid-template-columns:minmax(0,1fr); } .split.flip .split-art{ order:0; } }

.art{
  position:relative; border:1px solid var(--rule); border-radius:var(--r); padding:clamp(20px,3vw,34px);
  background:linear-gradient(165deg,var(--paper) 0%,var(--ice) 100%);
}
.navy .art{ background:linear-gradient(165deg,var(--navy-2) 0%,var(--navy-3) 100%); border-color:var(--on-navy-rule); }
.art svg{ width:100%; height:auto; display:block; }
.art figcaption{ margin-top:14px; padding-top:12px; border-top:1px solid var(--rule);
  font-size:10.8px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; }
.navy .art figcaption{ color:var(--on-navy-mute); border-color:var(--on-navy-rule); }

/* ---------- inline internal links ---------- */
.prose a.inl, .rec-main a.inl{ color:var(--accent); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 38%, transparent); }
.prose a.inl:hover{ border-bottom-color:var(--accent); }
.navy .prose a.inl{ color:var(--sky); border-bottom-color:color-mix(in srgb,var(--sky) 45%, transparent); }

/* ---------- related pages ---------- */
.rels{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px); }
.rel{ display:flex; flex-direction:column; gap:8px; text-decoration:none; padding:clamp(20px,2.4vw,28px);
  background:var(--white); border:1px solid var(--rule); border-radius:var(--r);
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.rel:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow); }
.rel .k{ font-size:10.6px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-faint); }
.rel b{ font-family:"Fraunces","Iowan Old Style",Georgia,serif; font-weight:400; font-size:21px; line-height:1.22; }
.rel .d{ font-size:14.2px; color:var(--ink-soft); line-height:1.5; }
.rel em{ margin-top:auto; padding-top:10px; font-style:normal; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; color:var(--accent); }
@media (max-width:860px){ .rels{ grid-template-columns:minmax(0,1fr); } }

/* ---------- hero magazine cover ---------- */
.cover-stage{ position:relative; display:flex; align-items:center; justify-content:center; padding:20px 0 26px; }
.cover-stage::before{
  content:""; position:absolute; width:82%; padding-bottom:82%; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--sky) 30%, transparent), transparent 66%);
  filter:blur(26px); pointer-events:none; z-index:0;
}
.cover-mag{
  position:relative; z-index:2; margin:0; width:100%; max-width:392px; display:block;
  text-decoration:none; transform:rotate(0deg);
  transition:transform .75s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.cover-stage:hover .cover-mag{ transform:translateY(-8px); }
.cover-mag img{
  width:100%; height:auto; display:block; border-radius:var(--r);
  box-shadow:0 54px 96px -36px rgba(0,0,0,.88),
             0 10px 28px -14px rgba(0,0,0,.6),
             0 0 0 1px rgba(234,242,249,.18);
}
/* a thin square accent behind the portrait, in the site's square language */
.cover-mag::after{
  content:""; position:absolute; left:-18px; top:-18px; width:104px; height:104px;
  border:3px solid var(--sky); opacity:.5; pointer-events:none; z-index:-1;
}
.cover-chip{
  position:absolute; z-index:3; left:-16px; bottom:34px; max-width:74%;
  background:var(--navy); border:1px solid var(--on-navy-rule); border-radius:3px;
  padding:11px 15px; box-shadow:0 18px 36px -16px rgba(0,0,0,.85);
}
.cover-chip span{
  display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--sky);
}
.cover-chip b{
  display:block; margin-top:6px; font-family:"Fraunces","Iowan Old Style",Georgia,serif; font-weight:400;
  font-size:16px; line-height:1.24; color:var(--on-navy);
}
.cover-chip em{
  display:block; margin-top:5px; font-style:normal; font-size:11.4px; color:var(--on-navy-mute);
}
@media (prefers-reduced-motion: reduce){ .cover-mag, .cover-stage:hover .cover-mag{ transition:none; } }
@media (max-width:760px){
  .cover-stage{ padding:10px 0 30px; }
  .cover-mag{ max-width:300px; transform:none; }
  .cover-stage:hover .cover-mag{ transform:none; }
  .cover-mag::after{ left:-10px; top:-10px; width:70px; height:70px; border-width:2px; }
  .cover-chip{ left:-8px; bottom:-14px; padding:9px 12px; max-width:82%; }
  .cover-chip b{ font-size:14px; }
  .cover-chip em{ font-size:10.6px; }
}

/* ---------- photography ---------- */
.photo{ margin:0; }
.photo img{ width:100%; height:auto; border-radius:var(--r); border:1px solid var(--rule);
  box-shadow:var(--shadow); display:block; background:var(--paper-2); }
.photo.cover img{ box-shadow:var(--shadow-lg); border-radius:var(--r); }
.photo figcaption{ margin-top:14px; padding-top:12px; border-top:1px solid var(--rule);
  font-size:10.8px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-mute); font-weight:700;
  line-height:1.7; }
.navy .photo figcaption{ color:var(--on-navy-mute); border-color:var(--on-navy-rule); }
.navy .photo img{ border-color:var(--on-navy-rule); }
.photo-col{ max-width:430px; }
.photorow{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,28px); }
@media (max-width:760px){ .photorow{ grid-template-columns:minmax(0,1fr); } }

/* ---------- product plate (white-background prosthesis shots) ---------- */
.photo.product{
  background:linear-gradient(165deg, #FFFFFF 0%, #EDF2F7 58%, #E2EAF3 100%);
  border:1px solid var(--rule); border-radius:var(--r);
  padding:clamp(20px,3vw,34px) clamp(14px,2.4vw,28px);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.photo.product img{
  border:0; border-radius:0; box-shadow:none; background:transparent;
  /* multiply drops the white ground; a filter here would create a stacking
     context and silently disable the blend, so the shadow lives on the plate */
  mix-blend-mode:multiply;
}
.photo.product figcaption{
  border-top-color:rgba(11,27,43,.14); color:#5A6E80;
}

/* ---------- records (publications, lectures) ---------- */
.recs{ border-top:1px solid var(--rule); }
.rec{ display:grid; grid-template-columns:150px 1fr; gap:clamp(14px,3vw,34px);
  padding:22px 0; border-bottom:1px solid var(--rule-soft); align-items:baseline; }
.rec-when{ font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
  color:var(--accent); padding-top:5px; }
.rec-main h3{ font-size:clamp(18px,1.9vw,21.5px); line-height:1.28; }
.rec-main p{ margin-top:7px; font-size:14.8px; color:var(--ink-mute); }
.navy .rec{ border-color:var(--on-navy-rule); }
.navy .rec-when{ color:var(--sky); }
.navy .rec-main p{ color:var(--on-navy-mute); }
@media (max-width:640px){ .rec{ grid-template-columns:minmax(0,1fr); gap:4px; } .rec-when{ padding-top:0; } }

/* ---------- verification links ---------- */
.vlinks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px); }
.vlink{ display:flex; flex-direction:column; gap:7px; text-decoration:none; padding:clamp(18px,2.2vw,26px);
  border:1px solid var(--rule); border-radius:var(--r); background:var(--white);
  transition:border-color .22s ease, transform .22s ease; }
.tint .vlink{ background:var(--white); }
.vlink:hover{ border-color:var(--accent); transform:translateY(-3px); }
.vlink b{ font-family:"Fraunces","Iowan Old Style",Georgia,serif; font-weight:400; font-size:19px; }
.vlink span{ font-size:13.6px; color:var(--ink-mute); line-height:1.5; }
.vlink em{ margin-top:auto; padding-top:8px; font-style:normal; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; font-weight:700; color:var(--accent); }
@media (max-width:860px){ .vlinks{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .vlinks{ grid-template-columns:minmax(0,1fr); } }

/* ---------- video ---------- */
.vid{ margin:0; }
.vid-frame{
  position:relative; width:100%; aspect-ratio:9/16; overflow:hidden;
  border:1px solid var(--rule); border-radius:10px; background:
    radial-gradient(90% 70% at 50% 18%, color-mix(in srgb,var(--accent) 34%, transparent), transparent 70%),
    linear-gradient(165deg, var(--navy-2) 0%, var(--navy-3) 100%);
  box-shadow:var(--shadow); display:block; padding:0; cursor:pointer;
}
.vid.wide .vid-frame{ aspect-ratio:16/9; }
.vid-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vid-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,13,20,.30) 0%, rgba(6,13,20,.05) 38%, rgba(6,13,20,.86) 100%); }
.vid-play{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:rgba(234,242,249,.94); color:var(--navy);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s ease;
}
.vid-frame:hover .vid-play{ transform:translate(-50%,-50%) scale(1.08); background:#fff; }
.vid-frame:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; }
.vid-meta{ position:absolute; left:0; right:0; bottom:0; padding:18px 18px 20px; text-align:left; }
.vid-meta b{ display:block; font-family:"Fraunces","Iowan Old Style",Georgia,serif; font-weight:400; font-size:18.5px;
  line-height:1.22; color:#EAF2F9; }
.vid-meta small{ display:block; margin-top:8px; font-size:10.6px; letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; color:#9DB4C8; }
.vid figcaption{ margin-top:13px; font-size:13.4px; color:var(--ink-mute); line-height:1.55; }
.navy .vid figcaption, .section.navy .vid figcaption{ color:var(--on-navy-mute); }
.vid figcaption a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--rule); white-space:nowrap; }
.navy .vid figcaption a{ color:var(--sky); border-color:var(--on-navy-rule); }
.vidrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:clamp(18px,3vw,34px);
  max-width:820px; }
.vidrow.one{ max-width:340px; }
.vid-col{ max-width:340px; }
@media (max-width:640px){ .vidrow{ grid-template-columns:minmax(0,1fr); justify-items:center; } }

/* photo placeholder plate */
.plate{
  position:relative; border:1px dashed var(--rule); border-radius:var(--r);
  background:repeating-linear-gradient(135deg,transparent 0 11px,var(--rule-soft) 11px 12px),var(--paper);
  display:flex; align-items:flex-end; padding:20px; min-height:240px;
}
.plate.tall{ aspect-ratio:4/5; }
.plate.wide{ aspect-ratio:16/9; }
.plate span{ font-size:10.6px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--ink-mute); background:var(--white); border:1px solid var(--rule); padding:7px 11px; border-radius:2px; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,2vw,26px); }
.steps.s4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.steps.s3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.step{ padding-top:20px; border-top:2px solid var(--rule); }
.step:first-child{ border-top-color:var(--accent); }
.step b{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.step h3{ font-size:18px; margin-top:11px; }
.step p{ font-size:14.4px; color:var(--ink-soft); margin-top:9px; line-height:1.55; }
.step .when{ display:block; margin-top:11px; font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); font-weight:700; }
.navy .step{ border-top-color:var(--on-navy-rule); }
.navy .step:first-child{ border-top-color:var(--sky); }
.navy .step p{ color:var(--on-navy-mute); }
.navy .step b{ color:var(--on-navy-mute); }
.navy .step .when{ color:var(--sky); }
@media (max-width:1000px){ .steps,.steps.s4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .steps,.steps.s4,.steps.s3{ grid-template-columns:minmax(0,1fr); } }

/* ---------- index rows ---------- */
.rows{ border-top:1px solid var(--rule); }
.rowx{ display:grid; grid-template-columns:48px minmax(0,2fr) minmax(0,3fr) minmax(0,1fr);
  gap:clamp(12px,2.4vw,30px); padding:26px 0; border-bottom:1px solid var(--rule-soft); align-items:start;
  text-decoration:none; transition:background .25s ease; }
a.rowx:hover{ background:var(--paper); }
.rowx .idx{ font-size:11.5px; font-weight:700; color:var(--ink-faint); padding-top:6px; font-variant-numeric:tabular-nums; }
.rowx h3{ font-size:clamp(19px,2vw,23px); }
.rowx p{ font-size:15.2px; color:var(--ink-soft); }
.rowx .meta{ text-align:right; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--accent); padding-top:6px; line-height:1.7; }
.rowx .meta em{ display:block; font-style:normal; color:var(--ink-faint); }
@media (max-width:900px){
  .rowx{ grid-template-columns:32px 1fr; }
  .rowx p,.rowx .meta{ grid-column:2; }
  .rowx .meta{ text-align:left; padding-top:2px; }
}

/* ---------- comparison table ---------- */
.tablewrap{ overflow-x:auto; border:1px solid var(--rule); border-radius:var(--r); background:var(--white); }
table{ border-collapse:collapse; width:100%; min-width:640px; }
th,td{ text-align:left; padding:16px 20px; border-bottom:1px solid var(--rule-soft); font-size:15px; vertical-align:top; }
thead th{ background:var(--navy); color:var(--on-navy); font-family:"Jost",sans-serif;
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:700; }
tbody th{ font-family:"Jost",sans-serif; font-weight:600; color:var(--ink); width:24%; }
td{ color:var(--ink-soft); }
tbody tr:last-child th, tbody tr:last-child td{ border-bottom:0; }
td.yes{ color:var(--accent); font-weight:600; }

/* ---------- checklist columns ---------- */
.checks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--rule-soft);
  border:1px solid var(--rule-soft); }
.check{ background:var(--white); padding:clamp(22px,2.8vw,34px); }
.tint .check{ background:var(--paper); }
.check.hi{ background:var(--ice); }
.check .tag{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--ink-faint); }
.check.hi .tag{ color:var(--accent); }
.check h3{ font-size:21px; margin-top:9px; }
.check ul{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.check li{ position:relative; padding-left:24px; font-size:15.2px; color:var(--ink-soft); line-height:1.55; }
.check li::before{ content:""; position:absolute; left:0; top:10px; width:11px; height:1px; background:var(--accent); }
@media (max-width:720px){ .checks{ grid-template-columns:minmax(0,1fr); } }

/* ---------- stats strip ---------- */
.strip{ border-block:1px solid var(--rule); background:var(--paper); }
.strip-in{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.strip-item{ padding:24px clamp(12px,2vw,24px); border-left:1px solid var(--rule-soft); display:flex; flex-direction:column; gap:6px; }
.strip-item:first-child{ border-left:0; padding-left:0; }
.strip-item b{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.strip-item span{ font-size:13.8px; color:var(--ink-soft); line-height:1.45; }
@media (max-width:1000px){
  .strip-in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .strip-item{ border-left:0; border-top:1px solid var(--rule-soft); padding-inline:0; }
  .strip-item:nth-child(2n){ padding-left:20px; border-left:1px solid var(--rule-soft); }
  .strip-item:first-child,.strip-item:nth-child(2){ border-top:0; }
}
@media (max-width:560px){ .strip-in{ grid-template-columns:minmax(0,1fr); }
  .strip-item:nth-child(2n){ padding-left:0; border-left:0; }
  .strip-item:nth-child(2){ border-top:1px solid var(--rule-soft); } }

/* ---------- faq ---------- */
.faq{ border-top:1px solid var(--rule); }
details{ border-bottom:1px solid var(--rule-soft); }
summary{ list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:"Fraunces","Iowan Old Style",Georgia,serif; font-size:clamp(17.5px,1.9vw,20.5px); line-height:1.34; color:var(--ink); }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:""; position:absolute; right:6px; top:32px; width:12px; height:1px; background:var(--accent); }
summary::before{ content:""; position:absolute; right:11px; top:27px; width:1px; height:11px; background:var(--accent);
  transition:opacity .2s ease; }
details[open] summary::before{ opacity:0; }
details .ans{ padding:0 clamp(16px,6vw,90px) 24px 0; color:var(--ink-soft); font-size:16px; }
details .ans p + p{ margin-top:12px; }

/* ---------- quote ---------- */
.quote{ font-family:"Fraunces","Iowan Old Style",Georgia,serif; font-style:italic; font-weight:300;
  font-size:clamp(20px,2.4vw,29px); line-height:1.4; color:var(--ink);
  border-left:2px solid var(--accent); padding:6px 0 6px 24px; }
.navy .quote{ color:var(--on-navy); border-color:var(--sky); }
.quote cite{ display:block; margin-top:14px; font-family:"Jost",sans-serif; font-style:normal;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
.navy .quote cite{ color:var(--on-navy-mute); }

/* ---------- reviews placeholder ---------- */
.revs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.8vw,20px); }
.rev{ border:1px dashed var(--rule); border-radius:var(--r); padding:clamp(20px,2.4vw,28px);
  background:var(--white); display:flex; flex-direction:column; gap:12px; min-height:190px; }
.tint .rev{ background:var(--white); }
.rev .stars{ color:var(--accent); letter-spacing:3px; font-size:14px; }
.rev p{ font-size:14.6px; color:var(--ink-mute); line-height:1.6; }
.rev .who{ margin-top:auto; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
@media (max-width:860px){ .revs{ grid-template-columns:minmax(0,1fr); } }

/* ---------- doctor block ---------- */
.doc{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(28px,5vw,68px); align-items:start; }
.doc > *:first-child{ align-self:stretch; }
.doc-side{ position:sticky; top:104px; }
.portrait{ position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--rule); box-shadow:var(--shadow); margin:0; background:var(--paper-2); }
.portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%;
  filter:saturate(.62) contrast(1.05) brightness(1.02); }
.portrait::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,27,43,0) 52%,rgba(11,27,43,.34) 100%); }
.portrait-cap{ margin-top:13px; font-size:10.8px; letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; color:var(--ink-faint); line-height:1.6; }
@media (max-width:880px){ .doc{ grid-template-columns:minmax(0,1fr); } .doc-side{ position:relative; top:auto; max-width:330px; } }

.cv{ margin-top:30px; border-top:1px solid var(--rule); }
.cv-row{ display:grid; grid-template-columns:186px 1fr; gap:18px; padding:15px 0; border-bottom:1px solid var(--rule-soft); }
.cv-row dt{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-faint); padding-top:3px; }
.cv-row dd{ margin:0; font-size:15.2px; color:var(--ink-soft); }
.cv-row dd em{ font-style:normal; color:var(--ink); font-weight:600; }
@media (max-width:700px){ .cv-row{ grid-template-columns:minmax(0,1fr); gap:5px; } }

/* ---------- contact ---------- */
.det{ border-top:1px solid var(--rule); }
.det-row{ display:grid; grid-template-columns:112px 1fr; gap:16px; padding:15px 0; border-bottom:1px solid var(--rule-soft); }
.det-row dt{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-faint); padding-top:3px; }
.det-row dd{ margin:0; font-size:15.4px; color:var(--ink-soft); }
.det-row dd a{ text-decoration:none; border-bottom:1px solid var(--rule); }
.det-row dd a:hover{ color:var(--accent); }

form{ background:var(--white); border:1px solid var(--rule); border-radius:var(--r); padding:clamp(22px,3vw,34px); }
.tint form{ background:var(--white); }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:17px; }
.field label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-mute); }
.field input,.field select,.field textarea{ font-family:"Jost",sans-serif; font-size:15.6px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--rule); padding:9px 2px; border-radius:0; }
.field textarea{ resize:vertical; min-height:74px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--accent); }
.field-2{ display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.form-note{ font-size:12.4px; color:var(--ink-faint); margin-top:13px; line-height:1.5; }
.form-ok{ display:none; margin-top:15px; padding:13px 15px; border:1px solid var(--rule);
  background:var(--paper); font-size:14.4px; color:var(--ink-soft); border-radius:2px; }
.form-ok.on{ display:block; }
@media (max-width:520px){ .field-2{ grid-template-columns:minmax(0,1fr); } }

/* ---------- cta band ---------- */
.ctaband{ background:linear-gradient(140deg,var(--navy-2) 0%,var(--navy-3) 100%); color:var(--on-navy); }
.ctaband h2{ color:var(--on-navy); font-size:clamp(28px,3.6vw,44px); }
.ctaband p{ color:var(--on-navy-mute); margin-top:16px; max-width:60ch; }
.ctaband .hero-actions{ margin-top:26px; }

/* ---------- footer ---------- */
.foot{ background:var(--navy); color:var(--on-navy-mute); padding-block:clamp(46px,6vw,70px); }
.foot-in{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,.7fr)); gap:clamp(20px,3vw,40px); }
.foot .mark b{ color:var(--on-navy); font-size:25px; }
.foot .mark span{ color:var(--on-navy-mute); }
.foot h4{ font-family:"Jost",sans-serif; font-size:10.8px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sky); font-weight:700; margin:0; }
.foot ul{ list-style:none; margin:13px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.foot a{ text-decoration:none; font-size:14px; color:var(--on-navy-mute); }
.foot a:hover{ color:var(--on-navy); }
.foot .blurb{ margin-top:16px; font-size:14px; max-width:34ch; line-height:1.6; }
.foot .fine{ margin-top:clamp(30px,4vw,50px); padding-top:20px; border-top:1px solid var(--on-navy-rule);
  font-size:12.2px; line-height:1.65; max-width:100ch; }
@media (max-width:980px){ .foot-in{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .foot-in{ grid-template-columns:minmax(0,1fr); } }

/* ---------- mobile action bar ---------- */
.mbar{ display:none; }
@media (max-width:620px){
  .mbar{ display:grid; grid-template-columns:1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:85;
    border-top:1px solid var(--on-navy-rule); }
  .mbar a{ display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 10px;
    font-size:12.4px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; }
  .mbar .c{ background:var(--navy); color:var(--on-navy); }
  .mbar .b{ background:var(--accent); color:#fff; }
  body{ padding-bottom:52px; }
}

/* ---------- touch targets ---------- */
@media (max-width:760px){
  .foot ul{ gap:2px; }
  .foot ul a{ display:block; padding:9px 0; }
  .foot .blurb a{ display:inline-block; padding:6px 0; }
  .crumb a{ display:inline-block; padding:4px 0; }
  .vid figcaption a, .det-row dd a{ display:inline-block; padding:5px 0; }
  .drawer a{ padding:14px 0; }
  summary{ padding-top:20px; padding-bottom:20px; }
}

/* ---------- reveal, transitions, progress ---------- */
.rise{ opacity:1; transform:none; }
.progress{ position:fixed; top:0; left:0; height:2px; width:0; z-index:100;
  background:linear-gradient(90deg,var(--accent),var(--sky)); pointer-events:none; }
@media (prefers-reduced-motion: no-preference){
  .js .rise{ opacity:0; transform:translateY(14px);
    transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1); }
  .js .rise.in{ opacity:1; transform:none; }
  /* children of a revealed group arrive in sequence */
  .js .stagger > *{ opacity:0; transform:translateY(16px);
    transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1); }
  .js .stagger.in > *{ opacity:1; transform:none; }
  .js .stagger.in > *:nth-child(1){ transition-delay:.02s } .js .stagger.in > *:nth-child(2){ transition-delay:.08s }
  .js .stagger.in > *:nth-child(3){ transition-delay:.14s } .js .stagger.in > *:nth-child(4){ transition-delay:.20s }
  .js .stagger.in > *:nth-child(5){ transition-delay:.26s } .js .stagger.in > *:nth-child(6){ transition-delay:.32s }
  .js .stagger.in > *:nth-child(7){ transition-delay:.36s } .js .stagger.in > *:nth-child(8){ transition-delay:.40s }
  .js .stagger.in > *:nth-child(9){ transition-delay:.44s }
  .page-enter{ animation:pageIn .5s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes pageIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
  /* line art draws itself on entry */
  .art svg .drawn{ transition:stroke-dashoffset 1s cubic-bezier(.3,.7,.3,1); }
  .art svg .fadein{ opacity:0; transition:opacity .7s ease .45s; }
  .art.drew svg .fadein{ opacity:1; }
  .tile{ will-change:transform; }
}
@media (prefers-reduced-motion: reduce){ .art svg .fadein{ opacity:1; } }
.page[hidden]{ display:none !important; }