/* ============================================================
   Dental Innovative Design — "The Granted Archive"
   Hand-coded. No frameworks, no Tilda.
   ============================================================ */

/* ---------- Fonts (self-hosted, open-source) ---------- */
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-var.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('../fonts/newsreader-var.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('../fonts/newsreader-400-italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --paper:#F4F1E9;
  --paper-2:#EBE6D8;
  --paper-3:#E3DCCB;
  --ink:#16202C;
  --ink-80:#33414f;
  --ink-60:#5d6874;
  --navy:#1F3A5F;
  --oxblood:#7A2E2A;
  --oxblood-bright:#9a3a35;
  --stone:#C9C2B2;
  --stone-2:#d8d2c4;
  --gold:#A8884E;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --shell:1240px;
  --gutter:clamp(1.15rem, 4vw, 3.5rem);

  --ease:cubic-bezier(.2,.7,.2,1);
  --line:1px solid var(--stone);
  --header-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-optical-sizing:auto;
  font-size:clamp(1.02rem,.97rem + .35vw,1.18rem);
  line-height:1.72;
  font-weight:420;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* faint engineering grid on the paper */
  background-image:
    linear-gradient(var(--paper-3) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-3) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  background-position:center top;
  background-attachment:fixed;
}
body::before{ /* soften the grid */
  content:""; position:fixed; inset:0; z-index:-1;
  background:radial-gradient(120% 80% at 50% 0%, transparent 0%, var(--paper) 72%);
  pointer-events:none;
}
/* gradient defs holder — keep rendered (paint servers) but out of flow (no line box above header) */
.il-defs{position:absolute;width:0;height:0;overflow:hidden}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:430;line-height:1.04;margin:0;
  letter-spacing:-.01em;}
p{margin:0}

.shell{width:min(100% - var(--gutter)*2, var(--shell));margin-inline:auto}
.mono{font-family:var(--font-mono);font-weight:500;font-style:normal}
.visually-hidden,.skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* focus */
:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px;border-radius:1px}

.skip-link{left:12px;top:8px}
.skip-link:focus{position:fixed;width:auto;height:auto;clip:auto;margin:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:.6rem 1rem;font-family:var(--font-mono);
  font-size:.8rem;letter-spacing:.04em}

/* ---------- Kicker / eyebrow ---------- */
.kicker{
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood);
  margin:0 0 1rem;display:inline-flex;align-items:center;gap:.6rem;
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:90;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:var(--line);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled{background:color-mix(in srgb,var(--paper) 95%, transparent);
  box-shadow:0 1px 0 var(--stone-2)}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  min-height:var(--header-h);gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand-mark{color:var(--oxblood);display:grid;place-items:center}
.brand-name{font-family:var(--font-display);font-size:1.12rem;letter-spacing:-.01em;font-weight:480}

/* Brand logo — inline SVG sprite recolored to the site palette.
   Wordmark inherits currentColor; emblem uses --logo-mark (accent). */
.logo-sprite{position:absolute;width:0;height:0;overflow:hidden}
.dl-word{fill:currentColor}
.dl-mark{fill:var(--logo-mark, currentColor);fill-rule:evenodd}
.brand-logo{display:block;width:clamp(55px,2.86rem + 1.3vw,65px);aspect-ratio:1;
  background-color:var(--oxblood);
  -webkit-mask:url(../media/brand/logo.png) center/contain no-repeat;
          mask:url(../media/brand/logo.png) center/contain no-repeat}
.brand{transition:opacity .25s var(--ease)}
.brand:hover{opacity:.8}
.brand-logo.brand-logo--footer{width:clamp(68px,3.9rem + 1.95vw,83px);background-color:var(--gold)}

.nav{display:flex;align-items:center}
.nav-list{list-style:none;display:flex;gap:.2rem;margin:0;padding:0}
.nav-link{
  text-decoration:none;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-80);padding:.5rem .7rem;border-radius:2px;
  position:relative;transition:color .25s var(--ease);
}
.nav-link::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.3rem;height:1px;
  background:var(--oxblood);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-link:hover,.nav-link.is-active{color:var(--ink)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1)}

.menu-toggle{display:none}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,8vw,7rem) 0}
.hero-grid{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% 18%, color-mix(in srgb,var(--navy) 9%, transparent), transparent 60%);
  mask:linear-gradient(#000,transparent 92%)}
.hero-inner{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:center;
  position:relative}
.hero-eyebrow{color:var(--navy)}
.hero-title{
  font-size:clamp(3rem,2rem + 7vw,6.6rem);
  font-variation-settings:'opsz' 144;
  font-weight:420;line-height:.98;letter-spacing:-.025em;margin:0 0 1.4rem;
  max-width:14ch;
}
.hero-maxim{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.5rem,1.1rem + 2.2vw,2.6rem);
  color:var(--oxblood);line-height:1.1;margin:0 0 1.5rem;position:relative;
}
.hero-maxim .maxim-mark{color:var(--stone);font-size:1.3em;margin-right:.05em;vertical-align:-.12em}
.hero-maxim .tm{font-family:var(--font-mono);font-size:.42em;vertical-align:.7em;color:var(--ink-60);font-style:normal}
.hero-lead{max-width:42ch;font-size:1.18rem;color:var(--ink-80);margin:0 0 2rem}

.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:.85rem 1.3rem;border:1px solid var(--ink);transition:.25s var(--ease);
  transition-property:background,color,transform,border-color}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--oxblood);border-color:var(--oxblood);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--stone)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}

/* Hero register card (filled, chamfered)
   NB: use .plate.plate--register so the dark fill out-specifies the later
   generic .plate{background:var(--paper)} rule regardless of source order. */
.hero-register{justify-self:stretch}
.plate.plate--register{
  --chamfer:18px;
  background:
    linear-gradient(180deg, #1b2836, #131c27);
  color:var(--paper);
  padding:1.4rem 1.5rem 1.2rem;
  clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,var(--chamfer) 100%,0 calc(100% - var(--chamfer)));
  box-shadow:0 28px 60px -38px rgba(22,32,44,.6);
  position:relative;
}
.plate-head{display:flex;justify-content:space-between;align-items:center;
  font-size:.7rem;letter-spacing:.14em;color:var(--stone);
  padding-bottom:.9rem;margin-bottom:.4rem;border-bottom:1px solid rgba(201,194,178,.22)}
.juris-index{list-style:none;margin:0;padding:0}
.juris-index li{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:baseline;gap:.8rem;
  padding:.62rem 0;border-bottom:1px solid rgba(201,194,178,.12)}
.juris-index .j-code{color:var(--gold);font-weight:600;font-size:.95rem;letter-spacing:.05em}
.juris-index .j-name{font-family:var(--font-body);font-size:1.04rem;color:#f6f2e9;font-weight:560;
  letter-spacing:.005em}
.juris-index .j-n{color:var(--stone);font-size:.82rem}
.plate-foot{margin-top:1rem;font-size:.62rem;letter-spacing:.14em;color:var(--ink-60);
  color:#7e8a96;text-align:center}

/* Hero ticker */
.hero-juris{display:none; /* ticker hidden per client request (2026-06-29); delete this declaration to restore */ margin-top:clamp(2.5rem,6vw,4.5rem);border-block:var(--line);
  background:color-mix(in srgb,var(--paper-2) 60%, transparent);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.juris-track{display:flex;width:max-content;padding:.7rem 0;
  font-size:.78rem;letter-spacing:.06em;color:var(--ink-60);
  will-change:transform;transform:translate3d(0,0,0);
  animation:marquee 46s linear infinite;-webkit-animation:marquee 46s linear infinite}
.juris-track span{white-space:nowrap;position:relative;padding-left:3.6rem}
.juris-track span::before{content:"◦";position:absolute;left:1.4rem;color:var(--oxblood)}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@-webkit-keyframes marquee{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-50%,0,0)}}

/* ============================================================
   Section scaffold
   ============================================================ */
.section{padding-block:clamp(4rem,9vw,8rem);position:relative}
.section + .section{border-top:var(--line)}
.section-head{max-width:62ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-title{font-size:clamp(2rem,1.4rem + 3vw,3.6rem);font-variation-settings:'opsz' 90;
  letter-spacing:-.02em;max-width:18ch}
.section-head .lede,.lede{font-size:1.18rem;color:var(--ink-80);margin-top:1.2rem;max-width:54ch}

.prose p{margin:0 0 1.15rem;max-width:68ch}
.prose p:last-child{margin-bottom:0}
.prose--lg p{font-size:1.16rem}
.prose a{color:var(--oxblood);text-underline-offset:3px}
.prose .prose-sub{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--oxblood);margin:1.7rem 0 .55rem;line-height:1.4}
.prose .prose-sub:first-child{margin-top:0}
.prose .prose-list{margin:1.15rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem}
.prose .prose-list li{position:relative;padding-left:1.1rem;max-width:68ch;color:var(--ink-80)}
.prose .prose-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--gold);border-radius:50%}

/* ---------- Plates: shared (bordered document frame w/ corner ticks) ---------- */
.plate{position:relative;background:var(--paper)}
.plate--portrait,.plate--photo,.plate--blueprint{
  border:1px solid var(--stone);padding:10px;background:var(--paper-2);
}
.plate--portrait::before,.plate--portrait::after,
.plate--photo::before,.plate--photo::after,
.plate--doc::before,.plate--doc::after,
.plate--blueprint::before,.plate--blueprint::after{
  content:"";position:absolute;width:11px;height:11px;border:1px solid var(--ink-60);
  opacity:.5;pointer-events:none}
.plate--portrait::before,.plate--photo::before,.plate--doc::before,.plate--blueprint::before{
  top:-1px;left:-1px;border-right:0;border-bottom:0}
.plate--portrait::after,.plate--photo::after,.plate--doc::after,.plate--blueprint::after{
  bottom:-1px;right:-1px;border-left:0;border-top:0}

.plate-tag{display:block;margin-top:.6rem;font-size:.64rem;letter-spacing:.13em;
  color:var(--ink-60);text-align:center;text-transform:uppercase}

/* portrait img treatment — unify mixed sources */
.photo-placeholder{display:block;width:100%;aspect-ratio:3/4;background:color-mix(in srgb,var(--stone) 24%,var(--paper))}
.plate--portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;
  filter:grayscale(1) contrast(1.02) brightness(1.02) sepia(.12);
  transition:filter .5s var(--ease),transform .8s var(--ease)}
.plate--portrait:hover img,.founder:hover .plate--portrait img{filter:none}

/* ============================================================
   Team
   ============================================================ */
.founder{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3rem);
  margin-bottom:clamp(3rem,7vw,5.5rem)}
.founder-media{max-width:360px}
.role-eyebrow{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy);margin:0 0 .8rem}
.name{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);font-variation-settings:'opsz' 60;margin:0 0 .4rem}
.creds-line{color:var(--ink-60);font-size:clamp(1.02rem,.97rem + .35vw,1.18rem);letter-spacing:.04em;font-style:normal}
.founder .creds-line{margin-bottom:1.6rem;display:inline-block}

.advisors-head{display:flex;align-items:center;gap:1.4rem;margin:0 0 2.4rem}
.board-title{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);white-space:nowrap;font-variation-settings:'opsz' 50}
.advisors-head .rule{flex:1;height:1px;background:var(--stone)}

.advisors{display:grid;gap:clamp(2rem,4vw,3.2rem)}
.advisor{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,3vw,2.4rem);
  padding-bottom:clamp(2rem,4vw,3.2rem);border-bottom:var(--line)}
.advisor:last-child{border-bottom:0;padding-bottom:0}
.advisor-media{max-width:240px}
.role-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--oxblood);margin:1.2rem 0 .3rem !important}
.advisor .name{font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);margin-bottom:1rem}

.creds{list-style:none;margin:1rem 0 1.2rem;padding:0;display:grid;gap:.6rem}
.creds li{position:relative;padding-left:1.7rem;font-size:1rem;color:var(--ink-80)}
.creds .tick{position:absolute;left:0;top:.05em;color:var(--oxblood);font-size:.9em}
.signoff{margin-top:1.2rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem}
.name-sm{font-family:var(--font-display);font-size:1.05rem;font-weight:500}

/* ============================================================
   About
   ============================================================ */
.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3rem);align-items:start}
.about-side{position:relative}
.plate--blueprint img{width:100%;mix-blend-mode:multiply;filter:contrast(1.05)}
.about-steps{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.4rem);
  margin-top:clamp(2.4rem,5vw,3.6rem)}
.step{padding-top:1.4rem;border-top:2px solid var(--ink)}
.sub{font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem);margin:0 0 .8rem;font-variation-settings:'opsz' 48}
.step-lede{font-style:italic;color:var(--navy);font-size:1.15rem;margin-bottom:.9rem}

.about-engineering{margin-top:clamp(3rem,6vw,5rem)}
.band-head{margin-bottom:1.6rem}
.band-title{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);font-variation-settings:'opsz' 60;max-width:20ch}
.duo{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.4rem);margin-top:2rem}

.about-preclinical{margin-top:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:1fr;
  gap:clamp(1.8rem,4vw,3rem);align-items:start}
.film{margin:0;border:1px solid var(--stone);padding:10px;background:var(--ink)}
.film-video{width:100%;height:auto;display:block;background:#0c1219}
.film .plate-tag{color:var(--stone)}
.q{font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--ink);margin-bottom:1rem}
.pullquote{margin:1.6rem 0 0;padding:1.4rem 0 0;border-top:2px solid var(--oxblood)}
.pullquote p{font-family:var(--font-display);font-size:clamp(1.2rem,1rem + 1vw,1.6rem);
  line-height:1.35;font-weight:440;font-style:italic;color:var(--ink)}

.about-ip{margin-top:clamp(3rem,6vw,5rem)}

/* ============================================================
   Projects / Register
   ============================================================ */
.section--projects{background:
  linear-gradient(180deg, color-mix(in srgb,var(--paper-2) 50%,transparent), transparent 30%)}
.section-head--projects{max-width:60ch}

.register{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;
  gap:clamp(1.1rem,2.5vw,1.8rem);counter-reset:reg}
.plate--doc{background:var(--paper);border:1px solid var(--stone);padding:0}
.plate--doc::before,.plate--doc::after{opacity:.45}
.doc-trigger{all:unset;display:grid;grid-template-columns:104px 1fr;gap:1.1rem;
  width:100%;box-sizing:border-box;padding:1rem;cursor:pointer;align-items:start}
.doc-thumb{display:block;overflow:hidden;background:var(--paper-3);border:1px solid var(--stone-2);
  aspect-ratio:1413/2000;align-self:start}
.doc-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:grayscale(1) contrast(1.04);transition:transform .8s var(--ease),filter .5s var(--ease)}
.doc-trigger:hover .doc-thumb img{transform:scale(1.04);filter:grayscale(.55) contrast(1.05)}
.doc-cap{display:flex;flex-direction:column;align-items:flex-start;gap:.18rem;padding:.2rem 0}
.doc-juris{display:flex;align-items:center;gap:.7rem;width:100%;font-size:.7rem;letter-spacing:.1em;
  color:var(--ink);margin-bottom:.35rem}
.doc-juris .j{font-weight:600}
.doc-juris .st{margin-left:auto;font-size:.6rem;letter-spacing:.08em;color:var(--paper);
  background:var(--navy);padding:.16rem .5rem;text-transform:uppercase}
.plate--doc .st{}
.doc-no{font-size:.8rem;color:var(--oxblood);font-weight:500}
.doc-for{font-style:italic;color:var(--ink-60);font-size:.95rem;margin:.15rem 0}
.doc-title{font-family:var(--font-display);font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);
  line-height:1.18;font-weight:440;font-variation-settings:'opsz' 40}
.doc-open{margin-top:.7rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-60);transition:color .25s var(--ease),transform .25s var(--ease)}
.doc-trigger:hover .doc-open{color:var(--oxblood);transform:translateX(3px)}

/* application/design status colours */
.doc-juris .st{background:var(--navy)}
.plate--doc:has(.st:where(:not(:empty))) .st{}
.doc-cap--solo{padding:1.4rem 1.2rem}
.plate--textonly{background:
  repeating-linear-gradient(135deg,var(--paper) 0 11px,var(--paper-2) 11px 12px)}
.plate--textonly .doc-juris .st{background:var(--ink-60)}

.trademark{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:1fr;
  gap:clamp(1.6rem,4vw,3rem);align-items:center;padding:clamp(1.6rem,4vw,2.6rem);
  background:color-mix(in srgb,var(--stone) 32%,var(--paper));color:var(--ink);position:relative;
  --chamfer:22px;
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer))}
.tm-media{max-width:300px;background:var(--paper);border-color:var(--stone)}
.tm-media .doc-thumb,.tm-media{padding:10px}
.tm-media .doc-trigger--bare{all:unset;display:block;cursor:pointer;position:relative}
.tm-media .doc-thumb{aspect-ratio:1680/2159;overflow:hidden;display:block}
.tm-media img{width:100%;height:100%;object-fit:cover;object-position:top}
.tm-media .doc-open{position:absolute;bottom:8px;left:0;right:0;text-align:center;color:var(--ink-60)}
.trademark .kicker{color:var(--oxblood)}
.tm-headline{font-size:clamp(1.8rem,1.4rem + 2vw,2.8rem);font-style:italic;color:var(--oxblood);
  margin:0 0 1rem;font-variation-settings:'opsz' 80}
.tm-copy p{color:var(--ink-80);max-width:60ch}

/* ============================================================
   Key Opinion Leaders
   ============================================================ */
.kol-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.kol-figure{display:flex;flex-direction:column;align-items:flex-start;
  border-top:2px solid var(--oxblood);padding-top:1.2rem}
.kol-count{font-family:var(--font-display);font-style:normal;font-size:clamp(5rem,4rem + 8vw,11rem);
  line-height:.85;color:var(--ink);font-variation-settings:'opsz' 144;font-weight:380;letter-spacing:-.03em}
.kol-count-label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);
  margin-top:.6rem}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3rem);align-items:center}
.contact-card{font-style:normal}
.contact-name{font-family:var(--font-display);font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);margin:0 0 1rem}
.contact-addr{font-size:1.18rem;color:var(--ink-80);margin:0 0 1.2rem;line-height:1.5}
.phone-link{font-size:1rem;letter-spacing:.04em;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--oxblood);padding-bottom:2px;transition:color .25s var(--ease)}
.phone-link:hover{color:var(--oxblood)}
.plate--photo img{width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:grayscale(.85) contrast(1.03) sepia(.1);transition:filter .5s var(--ease)}
.plate--photo:hover img{filter:grayscale(0)}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{border-top:1px solid var(--ink);background:var(--ink);color:var(--paper);
  padding-block:clamp(2.4rem,5vw,3.6rem)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem}
.footer-brand{display:inline-flex;align-items:center;gap:.6rem}
.site-footer .brand-mark{color:var(--gold)}
.footer-name{font-family:var(--font-display);font-size:1.1rem}
.footer-credit{display:inline-flex;align-items:center;gap:.7rem;font-size:.8rem;color:var(--stone)}
.partner{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--paper)}
.partner-mark{width:30px;height:25px;flex-shrink:0;margin:0;animation:none;
  background-color:var(--stone);transition:background-color .25s var(--ease);
  -webkit-mask:url(../media/brand/insemantic-mark.svg) no-repeat center/contain;
          mask:url(../media/brand/insemantic-mark.svg) no-repeat center/contain}
.partner-name{font-family:var(--font-mono);font-size:.8rem;font-weight:500;color:var(--stone);transition:color .25s var(--ease)}

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox{border:0;padding:0;background:transparent;margin:0;color:var(--paper);
  width:100vw;max-width:100vw;height:100vh;max-height:100vh;height:100dvh;max-height:100dvh}
.lightbox::backdrop{background:rgba(14,20,28,.88);backdrop-filter:blur(3px)}
.lightbox[open]{display:flex;flex-direction:column}
.lightbox-bar{flex:0 0 auto;height:52px;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:0 clamp(1rem,3vw,2rem);border-bottom:1px solid rgba(201,194,178,.2);background:#0d141c}
.lightbox-label{flex:1;min-width:0;font-size:.72rem;letter-spacing:.08em;color:var(--stone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lightbox-close{all:unset;cursor:pointer;font-family:var(--font-mono);font-size:1.05rem;flex:0 0 auto;
  width:2.2rem;height:2.2rem;display:grid;place-items:center;border:1px solid rgba(201,194,178,.3);
  color:var(--paper);transition:.2s var(--ease)}
.lightbox-close:hover{background:var(--oxblood);border-color:var(--oxblood)}
/* stage gets an EXPLICIT height so the image's max-height:100% resolves and the
   document scales to fit the screen height (no scrolling) */
.lightbox-stage{height:calc(100vh - 52px);height:calc(100dvh - 52px);
  display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
/* viewport-based caps (52px bar + 2×16px padding = 84px) so the document always
   fits the screen height regardless of parent layout — no scrolling */
.lightbox-stage img{max-width:calc(100vw - 32px);
  max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);
  width:auto;height:auto;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);background:var(--paper)}

/* ============================================================
   Reveal motion
   ============================================================ */
/* progressive enhancement: only hide when JS is active, so content
   never disappears if the script fails to load */
.js [data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width:720px){
  .advisor{grid-template-columns:200px 1fr;align-items:start}
  .about-grid{grid-template-columns:1.6fr .9fr}
  .about-steps{grid-template-columns:1fr 1fr}
  .duo{grid-template-columns:1fr 1fr}
  .about-preclinical{grid-template-columns:1.1fr .9fr}
  .register{grid-template-columns:1fr 1fr}
  .trademark{grid-template-columns:300px 1fr}
  .contact-grid{grid-template-columns:1fr 1fr}
  .kol-grid{grid-template-columns:auto 1fr;gap:clamp(2.5rem,5vw,5rem)}
}
@media (min-width:980px){
  .hero-inner{grid-template-columns:1.25fr .75fr}
  .founder{grid-template-columns:360px 1fr;align-items:start}
  .doc-trigger{grid-template-columns:128px 1fr;gap:1.3rem;padding:1.15rem}
}

/* Desktop nav vs mobile drawer */
@media (max-width:899px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;
    all:unset;display:grid;place-items:center;width:44px;height:44px;cursor:pointer;
    border:1px solid var(--stone)}
  .menu-toggle-bars,.menu-toggle-bars::before,.menu-toggle-bars::after{
    content:"";display:block;width:20px;height:1.5px;background:var(--ink);
    transition:transform .3s var(--ease),opacity .2s var(--ease)}
  .menu-toggle-bars{position:relative}
  .menu-toggle-bars::before{position:absolute;top:-6px}
  .menu-toggle-bars::after{position:absolute;top:6px}
  .menu-toggle[aria-expanded="true"] .menu-toggle-bars{background:transparent}
  .menu-toggle[aria-expanded="true"] .menu-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .menu-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}

  .nav-list{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--ink);
    padding:.5rem var(--gutter) 1.5rem;
    transform:translateY(-12px);opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
  .nav-list.is-open{transform:none;opacity:1;pointer-events:auto;visibility:visible;
    transition:opacity .3s var(--ease),transform .3s var(--ease),box-shadow .3s;
    box-shadow:0 24px 40px -28px rgba(22,32,44,.5)}
  .nav-link{display:block;padding:.85rem .4rem;font-size:.82rem;border-bottom:1px solid var(--paper-3)}
  .nav-link::after{display:none}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
  .plate--portrait img{filter:grayscale(1) sepia(.12) contrast(1.02)}
}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}

/* ============================================================
   Rebrand (Meddent) — new content sections
   Reuses existing tokens; no design-system changes.
   ============================================================ */

/* plain bullet lists reusing .creds (team variant uses .tick; these don't) */
.creds li:not(:has(.tick)){padding-left:1.3rem}
.creds li:not(:has(.tick))::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:1.5px;background:var(--oxblood)}

.model-intro{font-family:var(--font-mono);font-size:clamp(1.05rem,.9rem + .6vw,1.4rem);letter-spacing:.05em;
  text-transform:uppercase;color:var(--oxblood);margin:0 0 1.3rem;font-weight:500;line-height:1.25}

/* about — business model 3 columns */
.model-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.4rem);margin-bottom:1.4rem}
.model-col{padding-top:1.2rem;border-top:2px solid var(--ink)}
.model-col .sub{margin-bottom:.9rem}
.model-close{margin-top:.8rem;max-width:62ch;font-style:italic;color:var(--ink-80);font-size:clamp(1.2rem,1.05rem + .5vw,1.4rem);line-height:1.5}
.about-band{margin-top:clamp(3rem,6vw,5rem)}

/* clinician roles chips */
.role-grid{list-style:none;margin:1.3rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.role-grid li{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;
  padding:.5rem .9rem;border:1px solid var(--stone);background:var(--paper-2);color:var(--ink-80)}

/* markets — hairline table of cards */
.markets-split{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3.4rem);
  margin:clamp(1.6rem,4vw,2.6rem) 0 clamp(2rem,4vw,3rem);align-items:start}
.market-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--stone)}
.market-list .market{background:none;display:block;padding:.85rem .15rem;border-bottom:1px solid var(--stone)}
.market-name{font-family:var(--font-display);font-size:clamp(1.18rem,1rem + .6vw,1.55rem);
  font-variation-settings:'opsz' 40;line-height:1.18;color:var(--ink)}
@media (min-width:760px){.markets-split{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}

/* research collaborations */
.collab-grid{list-style:none;margin:0 0 clamp(2rem,4vw,3rem);padding:0;
  display:grid;gap:1px;background:var(--stone);border:1px solid var(--stone)}
.collab{background:var(--paper);display:flex;align-items:center;
  gap:clamp(1rem,2vw,1.6rem);padding:1.15rem 1.4rem;flex-wrap:wrap}
.collab-logo{flex:none;width:172px;height:66px;object-fit:contain;object-position:center}
.collab-name{font-family:var(--font-display);font-size:clamp(1.1rem,1rem + .6vw,1.5rem);
  font-variation-settings:'opsz' 48}
.collab-loc{color:var(--oxblood);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;margin-left:auto}

/* investment */
.invest-grid{margin-bottom:1.8rem}
.invest-grid .model-intro{margin-bottom:1.3rem}
.invest-list{grid-template-columns:1fr;gap:.75rem 2.4rem;max-width:62rem}
@media (min-width:560px){ .invest-list{grid-template-columns:1fr 1fr} }
@media (min-width:920px){ .invest-list{grid-template-columns:repeat(3,1fr)} }

/* products in #projects */
.products{margin-top:clamp(3rem,6vw,5rem);display:grid;gap:clamp(2rem,4vw,3.2rem)}
.product{padding-top:1.6rem;border-top:2px solid var(--ink)}
.product .sub{margin-bottom:1rem}
.product--featured{padding-top:1.6rem;border-top:2px solid var(--oxblood);
  display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:start}
.product-doc{margin:0}
.product-doc .doc-trigger{grid-template-columns:1fr;gap:.9rem;padding:1rem}
.product-doc .doc-thumb{max-width:220px;align-self:start}
.product-docs{display:flex;flex-direction:column;gap:clamp(.9rem,1.8vw,1.4rem);margin:0}
.product-docs .product-doc .doc-thumb{max-width:158px}
.product-docs .product-doc .doc-trigger{padding:.8rem;gap:.55rem}
.product-docs .product-doc .doc-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* vision closing band */
.vision-band{background:var(--ink);color:var(--paper);padding-block:clamp(4.5rem,13vw,9.5rem)}
.vision-band .kicker{color:var(--gold)}
.vision-head{display:flex;align-items:center;gap:1.4rem;margin-bottom:clamp(1.6rem,4vw,2.8rem)}
.vision-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--gold) 0%,color-mix(in srgb,var(--gold) 28%,transparent) 62%,transparent 100%)}
.vision-statement{font-family:var(--font-display);font-style:normal;font-weight:420;
  font-size:clamp(2.05rem,1rem + 5.4vw,5.6rem);line-height:1.04;letter-spacing:-.018em;
  color:var(--paper);font-variation-settings:'opsz' 120;max-width:24ch;margin:0}
.vis-em{color:var(--gold)}

@media (min-width:760px){ .model-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:880px){ .product--featured{grid-template-columns:300px 1fr} }

/* ============================================================
   Hero v2 + thematic line-art illustration system
   draw-on keys off the existing reveal observer's .is-visible
   ============================================================ */
.hero .hero-inner{align-items:center}
.hero-copy{max-width:none}

.hero-illus{margin:0;display:flex;align-items:center;justify-content:center}
.illus{position:relative}
.illus-svg{width:100%;max-width:480px;height:auto;display:block;overflow:visible}

/* element styling */
.il-arch{stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;fill:none}
.il-target circle,.il-target path{stroke:var(--oxblood);stroke-width:1.5;stroke-linecap:round;fill:none}
.il-faint path{stroke:var(--ink);stroke-width:1;opacity:.28;stroke-linecap:round;fill:none}
.il-dim path,.il-axis{stroke:var(--ink-60);stroke-width:1;stroke-dasharray:4 5;opacity:.55;fill:none}
.il-label{fill:var(--ink-60);font-family:var(--font-mono);font-size:9px;letter-spacing:2.5px}
.il-nodes circle{fill:var(--oxblood);stroke:var(--paper);stroke-width:1.5}
.spark{fill:var(--gold)}
.spark-dot{fill:var(--oxblood)}

/* draw-on */
.illus [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease)}
.illus.is-visible [data-draw]{stroke-dashoffset:0}
.il-arch[data-draw]{transition-delay:.1s}
.il-faint path[data-draw]{transition-delay:.5s}
.il-target [data-draw]{transition-delay:1s}

/* nodes pop in */
.il-nodes circle{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.illus.is-visible .il-nodes circle{opacity:1;transform:scale(1)}
.illus.is-visible .il-nodes circle:nth-child(1){transition-delay:1.10s}
.illus.is-visible .il-nodes circle:nth-child(2){transition-delay:1.22s}
.illus.is-visible .il-nodes circle:nth-child(3){transition-delay:1.34s}
.illus.is-visible .il-nodes circle:nth-child(4){transition-delay:1.46s}
.illus.is-visible .il-nodes circle:nth-child(5){transition-delay:1.58s}
.illus.is-visible .il-nodes circle:nth-child(6){transition-delay:1.70s}

/* sparkles */
.spark,.spark-dot{opacity:.22;transform-box:fill-box;transform-origin:center}
@keyframes twinkle{0%,100%{opacity:.16;transform:scale(.8)}50%{opacity:.9;transform:scale(1.12)}}
.illus.is-visible .spark{animation:twinkle 3.6s var(--ease) infinite}
.illus.is-visible .spark-dot{animation:twinkle 4.4s var(--ease) infinite}
.illus.is-visible .spark:nth-of-type(2){animation-delay:1.1s}
.illus.is-visible .spark:nth-of-type(3){animation-delay:2.2s}
.illus.is-visible .spark-dot:nth-of-type(2){animation-delay:1.5s}
.illus.is-visible .spark-dot:nth-of-type(3){animation-delay:.7s}

/* gentle float */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-illus .illus-svg{animation:floaty 7.5s ease-in-out infinite}

/* overview band */
.section--overview{padding-block:clamp(3rem,7vw,6rem)}
.overview-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.overview-copy .section-title{max-width:20ch;margin-bottom:1.4rem}
@media (min-width:900px){ .overview-copy{max-width:64ch} }

@media (prefers-reduced-motion:reduce){
  .illus [data-draw]{stroke-dashoffset:0 !important;transition:none}
  .il-nodes circle{opacity:1 !important;transform:none !important;transition:none}
  .spark,.spark-dot{opacity:.6;animation:none !important}
  .hero-illus .illus-svg{animation:none !important}
}

/* ---- hero refine pass ---- */
.hero-title{font-size:clamp(2.5rem,1.55rem + 4.4vw,5rem);max-width:15ch}
.hero-maxim{font-size:clamp(1.3rem,1rem + 1.6vw,2.05rem);max-width:30ch;margin-bottom:1.8rem}
.illus-svg{max-width:560px}
.hero .hero-inner{align-items:center}
@media (min-width:980px){ .hero .hero-inner{width:auto;max-width:1600px;margin-left:max(var(--gutter), calc((100vw - var(--shell)) / 2));margin-right:var(--gutter);grid-template-columns:minmax(0,0.72fr) minmax(0,1fr);gap:clamp(1.8rem,3vw,3rem)} }

/* ---- 3D illustration system (serious, dimensional; no sparkles) ---- */
.illus-3d .il-wall,.illus-3d .il-topface{stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.illus-3d .post-body{stroke:var(--ink);stroke-width:1.1}
.illus-3d .post-top{fill:#ECEFF2;stroke:var(--ink);stroke-width:1.1}
.illus-3d .post-head{fill:var(--oxblood)}
.il-cal path{stroke:var(--ink-60);stroke-width:1;stroke-dasharray:4 5;opacity:.55;fill:none}
.il-post{opacity:0;transform:translateY(22px);transform-box:fill-box;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.illus.is-visible .il-post{opacity:1;transform:translateY(0)}
.illus.is-visible .il-post:nth-child(1){transition-delay:.25s}
.illus.is-visible .il-post:nth-child(2){transition-delay:.40s}
.illus.is-visible .il-post:nth-child(3){transition-delay:.55s}
.illus.is-visible .il-post:nth-child(4){transition-delay:.70s}
.illus.is-visible .il-post:nth-child(5){transition-delay:.85s}
.hero-illus .illus-svg{animation:floaty 8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .il-post{opacity:1 !important;transform:none !important;transition:none}
}

/* ---- section illustrations layout + new 3D primitives ---- */
.head-illus{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  margin-bottom:clamp(2rem,4vw,3.4rem)}
@media (min-width:880px){ .head-illus .section-head{margin-bottom:0} }
.sec-illus{margin:0;display:flex;justify-content:center}
.sec-illus .illus-svg{max-width:400px;animation:floaty 9s ease-in-out infinite}

/* globe */
.globe-ball{stroke:var(--ink);stroke-width:1.3}
.globe-wire ellipse,.globe-wire path{fill:none;stroke:var(--ink);stroke-width:1;opacity:.3;stroke-linecap:round}
.il-pins .il-pin path{stroke:var(--ink);stroke-width:1.3}
.il-pins .il-pin circle{fill:var(--oxblood);stroke:var(--paper);stroke-width:1.6}

/* iso cube */
.cube-top,.cube-left,.cube-right{stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.il-streams .stream{fill:none;stroke:var(--oxblood);stroke-width:1.7;opacity:.9;stroke-linecap:round}
.il-stream-nodes circle{fill:var(--paper);stroke:var(--oxblood);stroke-width:2}

/* rise-in for pins/stream-nodes (serious, staggered) */
.il-pin,.il-stream-nodes circle{opacity:0;transform:translateY(16px);transform-box:fill-box;
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.illus.is-visible .il-pin,.illus.is-visible .il-stream-nodes circle{opacity:1;transform:translateY(0)}
.illus.is-visible .il-pin:nth-child(1){transition-delay:.7s}
.illus.is-visible .il-pin:nth-child(2){transition-delay:.85s}
.illus.is-visible .il-pin:nth-child(3){transition-delay:1.0s}
.illus.is-visible .il-pin:nth-child(4){transition-delay:1.15s}
.illus.is-visible .il-pin:nth-child(5){transition-delay:1.3s}
.illus.is-visible .il-stream-nodes circle:nth-child(1){transition-delay:.9s}
.illus.is-visible .il-stream-nodes circle:nth-child(2){transition-delay:1.05s}
.illus.is-visible .il-stream-nodes circle:nth-child(3){transition-delay:1.2s}
@media (prefers-reduced-motion:reduce){
  .il-pin,.il-stream-nodes circle{opacity:1 !important;transform:none !important;transition:none}
}

/* ---- batch2 illustration elements ---- */
.il-flow{fill:none;stroke:var(--ink-60);stroke-width:1;stroke-dasharray:4 5;opacity:.55}
.il-arrowhead{fill:none;stroke:var(--ink-60);stroke-width:1.3;opacity:.7;stroke-linecap:round;stroke-linejoin:round}
.net-node{stroke:var(--ink);stroke-width:1.3}
.net-link{fill:none;stroke:var(--ink);stroke-width:1.1;opacity:.4}
.net-dot{fill:var(--oxblood);stroke:var(--paper);stroke-width:1.4}
.il-arrow{fill:none;stroke:var(--oxblood);stroke-width:1.8;stroke-linecap:round}
.il-bar{opacity:0;transform:translateY(22px);transform-box:fill-box;
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.illus.is-visible .il-bar{opacity:1;transform:translateY(0)}
.illus.is-visible .il-bar:nth-child(2){transition-delay:.15s}
.illus.is-visible .il-bar:nth-child(3){transition-delay:.3s}
.illus.is-visible .il-bar:nth-child(4){transition-delay:.45s}
.illus.is-visible .il-bar:nth-child(5){transition-delay:.6s}
.illus.is-visible .il-bar:nth-child(6){transition-delay:.75s}
.il-arrow{opacity:0;transition:opacity .8s var(--ease) .8s}
.illus.is-visible .il-arrow{opacity:.9}
@media (prefers-reduced-motion:reduce){
  .il-bar{opacity:1 !important;transform:none !important;transition:none}
  .il-arrow{opacity:.9 !important;transition:none}
}

/* ---- batch3: instruments + vision gold ---- */
.tool-body,.tool-shaft,.tool-blade,.tool-cap,.tip-soft{stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.tool-cap{fill:#DDE2E6}
.grip-ridge{stroke:var(--ink);stroke-width:1;opacity:.35}
.sleeve-hole{fill:#3a4654}
.tip-hole{fill:#2c3744}
.tip-vent{fill:none;stroke:var(--ink);stroke-width:1.2;opacity:.7}

.product--illus{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.product-illus{margin:0;display:flex;justify-content:center}
.product-illus .illus-svg{max-width:380px;animation:floaty 10s ease-in-out infinite}
@media (min-width:820px){
  .product--illus{grid-template-columns:1fr .82fr}
  .product--illus .product-illus{order:2}.product--illus .product-text{order:1}
  .product--illus-left{grid-template-columns:.82fr 1fr}
  .product--illus-left .product-illus{order:1}.product--illus-left .product-text{order:2}
}

/* vision gold-on-dark */
/* vision — single-column monument (see .vision-statement) */

.vision-illus{margin:0;display:flex;justify-content:center}
.vision-illus .illus-svg{max-width:330px;animation:floaty 9s ease-in-out infinite}
.illus-gold .globe-ball{stroke:#EBD08A;stroke-width:1.3}
.illus-gold .globe-wire-gold ellipse,.illus-gold .globe-wire-gold path{fill:none;stroke:#E7C77A;stroke-width:1;opacity:.5}
.illus-gold .vorbit{fill:none;stroke:#C99A3E;stroke-width:1.4;stroke-dasharray:5 6;opacity:.85}
.illus-gold .vorbit-node{fill:#EBD08A;stroke:var(--ink);stroke-width:1.4}

/* ============================================================
   Visual-polish pass — hero video, bigger+animated illustrations,
   markets grid fill, palette-toned depth (no glossy steel)
   ============================================================ */
.hero-media{margin:0;display:flex;justify-content:flex-end;width:100%}
.plate--video{position:relative;border:1px solid var(--stone);padding:8px;background:var(--paper-2);
  width:100%;max-width:none}
.plate--video::before,.plate--video::after{content:"";position:absolute;width:11px;height:11px;
  border:1px solid var(--ink-60);opacity:.5;pointer-events:none}
.plate--video::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.plate--video::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.hero-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--ink)}
.video-tag{position:absolute;left:15px;bottom:15px;color:var(--paper);font-size:.62rem;letter-spacing:.14em;
  background:color-mix(in srgb,var(--ink) 70%,transparent);padding:.3rem .55rem}

/* bigger illustrations, fill the void */
.sec-illus .illus-svg{max-width:520px}
@media (min-width:880px){ .head-illus{grid-template-columns:1fr} }

/* palette-toned metal accents (no cool glossy steel) */
.tool-cap{fill:#E8E2D4}
.sleeve-hole,.tip-hole{fill:#2a2c2a}

/* markets — vertical register beside strategy text (see .markets-split above) */

/* === internal animation (transform/opacity only) === */
.globe-wire .merid{transform-box:fill-box;transform-origin:center}
.illus.is-visible .globe-wire .m1{animation:meridSweep 7s var(--ease) infinite}
.illus.is-visible .globe-wire .m2{animation:meridSweep 7s var(--ease) infinite;animation-delay:-3.5s}
@keyframes meridSweep{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.12)}}

.il-streams .stream{stroke-width:2.1;stroke-dasharray:10 7;opacity:.95}
.illus.is-visible .il-streams .stream{animation:streamFlow 1.6s linear infinite}
@keyframes streamFlow{to{stroke-dashoffset:-17}}

.vorbit{transform-box:fill-box;transform-origin:center;transform:rotate(-18deg)}
.illus.is-visible .vorbit{animation:orbitSpin 30s linear infinite}
@keyframes orbitSpin{from{transform:rotate(-18deg)}to{transform:rotate(342deg)}}
.illus.is-visible .vorbit-node{animation:nodePulse 3.2s var(--ease) infinite}
@keyframes nodePulse{0%,100%{opacity:1}50%{opacity:.4}}

@media (prefers-reduced-motion:reduce){
  .sec-illus,.vision-illus{transform:none !important}
}

/* ============================================================
   Product schematics in #projects — annotated technical figures
   (replaces decorative illustrations; callouts use verbatim terms)
   ============================================================ */
/* featured (Arch System): head -> full-width process -> (scan | prose) */
.product--featured{display:block}
.product-head .sub{margin-bottom:0}
.product--featured > .prose{margin-top:clamp(1.1rem,2.2vw,1.7rem)}
.product-process{margin:clamp(1.2rem,3vw,2rem) 0 0}
.product-process .illus-svg{max-width:760px;width:100%;margin-inline:auto;animation:none}
.product-featured-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.4rem);
  align-items:start;margin-top:clamp(1.2rem,3vw,2rem)}
@media (min-width:880px){ .product-featured-grid{grid-template-columns:300px 1fr} }

/* Bone-graft: two lead patents beside the text, extra jurisdictions below */
.product-doc-grid{display:grid;grid-template-columns:1fr;gap:clamp(.9rem,1.8vw,1.4rem);margin-top:clamp(1.6rem,3vw,2.4rem)}
.product-doc-grid .product-doc .doc-thumb{max-width:180px}
@media (min-width:600px){ .product-doc-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .product-doc-grid{grid-template-columns:repeat(4,1fr)} }

/* instrument products: large sticky schematic + scrolling text, alternating */
.product--schema{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.6rem);align-items:start}
.product--schema .product-illus{margin:0;display:block;justify-content:initial}
.product--schema .illus-svg{max-width:none;width:100%;animation:none}
@media (min-width:860px){
  .product--schema{grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4vw,3.4rem)}
  .product--schema .product-illus{order:1;position:sticky;top:calc(var(--header-h) + 18px);align-self:start}
  .product--schema .product-text{order:2}
  .product--schema.product--flip .product-illus{order:2}
  .product--schema.product--flip .product-text{order:1}
}

/* schematic part styling */
.sch .sch-blade,.sch .sch-shaft,.sch .sch-grip,.sch .tool-body,.sch .tip-soft{stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.sch .il-wall,.sch .il-topface{stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.sch .post-body{stroke:var(--ink);stroke-width:1.1}
.sch .post-top{fill:#EFE9DC;stroke:var(--ink);stroke-width:1.1}
.sch .sch-cap{fill:#E8E2D4;stroke:var(--ink);stroke-width:1.1}
.sch .drill-rod{fill:none;stroke:var(--ink-80);stroke-width:2;stroke-linecap:round}

/* callouts */
.il-lead{fill:none;stroke:var(--ink-60);stroke-width:1}
.il-cdot{fill:var(--oxblood);stroke:var(--paper);stroke-width:1.4}
.il-clabel{fill:var(--ink-80);font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:1.3px;text-transform:uppercase}
.sch-instrument{opacity:0;transition:opacity .7s var(--ease)}
.illus.is-visible .sch-instrument{opacity:1;transition-delay:.05s}
.il-call{opacity:0;transition:opacity .55s var(--ease)}
.illus.is-visible .il-call{opacity:1}
.illus.is-visible .il-call.c1{transition-delay:.55s}
.illus.is-visible .il-call.c2{transition-delay:.85s}
.illus.is-visible .il-call.c3{transition-delay:1.15s}
.illus.is-visible .il-call.c4{transition-delay:1.45s}
.illus.is-visible .c1 .il-lead{transition-delay:.55s}
.illus.is-visible .c2 .il-lead{transition-delay:.85s}
.illus.is-visible .c3 .il-lead{transition-delay:1.15s}
.illus.is-visible .c4 .il-lead{transition-delay:1.45s}

/* mini-process (Arch System) */
.proc .sch-arch{stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.proc .proc-tick{fill:none;stroke:var(--ink-60);stroke-width:1;stroke-dasharray:3 4;opacity:.75}
.proc .proc-mark{fill:var(--oxblood)}
.proc .sch-chip{fill:url(#gTop);stroke:var(--ink);stroke-width:1.4}
.proc .proc-trace{fill:none;stroke:var(--ink-60);stroke-width:1.2}
.proc .proc-node{fill:var(--oxblood)}
.proc .proc-leg{stroke:var(--ink);stroke-width:1.4;fill:none}
.proc .proc-arrow{fill:none;stroke:var(--oxblood);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.proc .proc-imp{fill:none;stroke:var(--ink-80);stroke-width:2;stroke-linecap:round}
.proc .proc-impdot{fill:var(--oxblood)}
.proc .proc-num{fill:var(--oxblood);font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:1px}
.proc .proc-label{fill:var(--ink-80);font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:1.3px;text-transform:uppercase}
.proc-step{opacity:0;transform:translateY(12px);transform-box:fill-box;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.illus.is-visible .proc-step{opacity:1;transform:none}
.illus.is-visible .proc-step.s1{transition-delay:.2s}
.illus.is-visible .proc-step.s2{transition-delay:.6s}
.illus.is-visible .proc-step.s3{transition-delay:1s}
.illus.is-visible .proc-arrow{transition-delay:.5s}

@media (prefers-reduced-motion:reduce){
  .sch-instrument,.il-call,.proc-step{opacity:1 !important;transform:none !important;transition:none}
  .il-lead,.proc-arrow,.proc-tick,.proc-trace,.drill-rod{stroke-dashoffset:0 !important;transition:none}
}

/* ============================================================
   Fix pass — product blocks: kill empty space + keep callouts in frame
   ============================================================ */
/* Sticky schema centered vertically -> it accompanies the text instead of
   pinning at the top and leaving its lower half empty beside long copy. */
@media (min-width:860px){
  .product--schema .product-illus{top:clamp(96px, calc(50vh - 185px), 360px)}
}
/* Same treatment for the Arch System patent scan beside its 5-paragraph prose. */
@media (min-width:880px){
  .product-featured-grid .product-docs{position:sticky;top:clamp(84px, calc(50vh - 300px), 168px);align-self:start}
}
/* Schematics never spill outside their own box (callouts stay in the column). */
.sch,.proc{overflow:hidden}
/* Keep callouts/labels legible when the schematic shrinks on narrow screens. */
@media (max-width:760px){
  .sch .il-clabel{font-size:13px}
  .proc .proc-label{font-size:15px}
  .proc .proc-num{font-size:18px}
}

/* ============================================================
   Mobile fix pass — readable headings + animation under reduce-motion
   ============================================================ */
/* (1) Display headings on phones: Fraunces is cut for huge sizes (thin display
   hairlines). At small mobile sizes that reads too thin / some letters break up.
   Lower the optical size (sturdier "text" cut) and nudge weight up — mobile only,
   desktop look unchanged. */
@media (max-width:700px){
  h1,h2,h3,h4{font-weight:460}
  .hero-title{font-variation-settings:'opsz' 42;font-weight:480}
  .section-title{font-variation-settings:'opsz' 40;font-weight:470}
  .sub{font-variation-settings:'opsz' 30;font-weight:470}
  .band-title{font-variation-settings:'opsz' 36;font-weight:470}
  .name{font-variation-settings:'opsz' 32;font-weight:480}
  .board-title{font-variation-settings:'opsz' 32}
  .vision-statement{font-variation-settings:'opsz' 52;letter-spacing:-.012em}
  .kol-count{font-variation-settings:'opsz' 64;font-weight:450}
  .hero-maxim{font-variation-settings:'opsz' 36}
}

/* (2) Under reduce-motion the site was fully frozen. Re-allow GENTLE, non-vestibular
   motion so illustrations still feel alive on phones with Reduce Motion / Low Power:
   opacity fade-ins + SVG line-draw. Parallax, continuous spin/float and video autoplay
   stay disabled (handled above / in JS). */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{transition:opacity .7s var(--ease) !important;transform:none !important}
  .illus [data-draw]{stroke-dasharray:1 !important;stroke-dashoffset:1 !important;
    transition:stroke-dashoffset 1.5s var(--ease) !important;animation:none !important}
  .illus.is-visible [data-draw]{stroke-dashoffset:0 !important}
  .il-call{opacity:1 !important}
}

/* ============================================================
   Mobile animation robustness — run continuous illustration motion
   ALWAYS, not gated on the scroll/reveal observer. Phones then get
   visible ongoing motion even if IntersectionObserver lags or the
   reveal never fires. (Still frozen under prefers-reduced-motion by
   the global rule above.)
   ============================================================ */
.globe-wire .m1{animation:meridSweep 7s var(--ease) infinite}
.globe-wire .m2{animation:meridSweep 7s var(--ease) infinite;animation-delay:-3.5s}
.il-streams .stream{animation:streamFlow 1.6s linear infinite}
.vorbit{animation:orbitSpin 30s linear infinite}
.vorbit-node{animation:nodePulse 3.2s var(--ease) infinite}

/* ============================================================
   iOS animation fix — rotation/scale around explicit viewBox coords
   (transform-box:view-box, как на рабочем sgtraining), без fill-box,
   который на части мобильного WebKit не отрабатывает.
   ============================================================ */
.globe-wire .merid{transform-box:view-box;transform-origin:220px 218px}
.vorbit{transform-box:view-box;transform-origin:180px 180px}

/* GPU-promote continuously animated illustration elements (smoother on mobile) */
.globe-wire .merid,.vorbit,.sec-illus .illus-svg,.vision-illus .illus-svg,.product-illus .illus-svg{will-change:transform}

/* ============================================================
   Owner's choice: keep gentle SVG illustration motion running even
   under Reduce Motion (the user's other live sites do the same and
   they explicitly want it). transform/opacity only — GPU-friendly.
   Overrides the global reduce-motion freeze above.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .globe-wire .m1{animation:meridSweep 7s var(--ease) infinite !important}
  .globe-wire .m2{animation:meridSweep 7s var(--ease) infinite !important;animation-delay:-3.5s !important}
  .il-streams .stream{animation:streamFlow 1.6s linear infinite !important}
  .vorbit{animation:orbitSpin 30s linear infinite !important}
  .vorbit-node{animation:nodePulse 3.2s var(--ease) infinite !important}
  .sec-illus .illus-svg,.vision-illus .illus-svg,.product-illus .illus-svg{animation:floaty 9s ease-in-out infinite !important}
}

/* footer partner logo — SVG mark, recolored (mask), links to insemantic.com */
@keyframes is-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.partner{transition:opacity .25s var(--ease)}
.partner:hover{opacity:.85}
.partner:hover .partner-name{text-decoration:underline;text-underline-offset:2px;color:var(--paper)}
.partner:hover .partner-mark{background-color:var(--paper)}

/* Patent ticker keeps running even under Reduce Motion (user wants it; transform-only). */
@media (prefers-reduced-motion:reduce){
  .juris-track{animation:marquee 46s linear infinite !important;
    -webkit-animation:marquee 46s linear infinite !important;animation-play-state:running !important}
}