/* ============================================================
   Clinic Enquiry Site — landing page
   Aesthetic: clinical specimen sheet. Warm paper, deep ink,
   sage-teal pulled from the clinic photograph, figures set in
   mono so money reads like an invoice rather than a promise.
   ============================================================ */

:root{
  /* Neutrals are tinted toward the brand hue (168) rather than the default
     warm cream, so the page reads as one deliberate palette. */
  --paper:      oklch(0.978 0.009 172);
  --paper-2:    oklch(0.955 0.013 172);
  --paper-3:    oklch(0.928 0.017 172);
  --ink:        oklch(0.245 0.022 248);
  --ink-soft:   oklch(0.44 0.018 248);
  --ink-faint:  #5c646d;              /* 5.6:1 on paper, 5.1:1 on paper-3 */
  --accent:     #0C8A72;            /* Dentaldfy teal */
  --accent-dp:  #0A6E5C;
  --accent-wash:#E3F2ED;
  --warm:       oklch(0.955 0.028 80);   /* Dentaldfy amber wash, for the second hue */
  --warm-2:     oklch(0.905 0.055 80);
  --wa:         #0A6E5C;            /* primary button = Dentaldfy accent-deep, 5.7:1 with white */              /* 5.07:1 with white text */
  --wa-hover:   #075849;
  --rule:       oklch(0.885 0.012 172);
  --rule-strong:oklch(0.765 0.016 172);

  --measure: 62ch;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --shell: 1180px;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.28rem + 0.8vw, 2rem);
  --step-3:  clamp(1.9rem, 1.55rem + 1.7vw, 3rem);
  --step-4:  clamp(2.4rem, 1.7rem + 3.4vw, 4.6rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
h1,h2,h3{ font-family:"Newsreader", Georgia, serif; font-weight:500; line-height:1.06; letter-spacing:-0.018em; margin:0 }
p{ margin:0 }
a{ color:inherit }
.mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums }

/* Horizontal inset lives on the section (real padding), not on a narrower shell,
   so every coloured/bordered container has a genuine inset. */
.shell{ width:min(100%, var(--shell)); margin-inline:auto }
.rule{ height:1px; background:var(--rule); border:0; margin:0 }

/* --- eyebrow / small caps label --- */
.label{
  font-family:"IBM Plex Mono", monospace; font-size:0.72rem; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint);
}
.label--accent{ color:var(--accent-dp) }

/* ============================ header ============================ */
.top{
  /* opaque, not translucent: a blurred sticky header gives unpredictable
     contrast over whatever scrolls beneath it */
  position:sticky; top:0; z-index:60; background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.top__in{ display:flex; align-items:center; gap:1.5rem; height:60px; padding-inline:var(--gut) }
.brand{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.2rem; letter-spacing:-0.02em; white-space:nowrap;
  display:inline-flex; align-items:center; gap:0.55rem; text-decoration:none;
}
.brand b{ font-weight:700 }
.brand i{ font-style:normal; color:var(--accent) }
.brand__mark{ width:26px; height:26px; object-fit:contain; flex:none }
footer .brand__mark{ width:30px; height:30px }
.top nav{ margin-left:auto; display:flex; gap:1.6rem }
.top nav a{
  font-size:var(--step--1); color:var(--ink-soft); text-decoration:none;
  padding-block:0.3rem; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.top nav a:hover{ color:var(--ink); border-color:var(--accent) }
@media (max-width:860px){ .top nav{ display:none } }

/* ============================ buttons ============================ */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem; text-decoration:none;
  font-size:var(--step-0); font-weight:500; padding:0.85rem 1.35rem;
  border-radius:2px; border:1px solid transparent; cursor:pointer;
  transition:transform .35s var(--ease), background-color .25s, border-color .25s, color .25s;
}
.btn:hover{ transform:translateY(-2px) }
.btn--wa{ background:var(--wa); color:#fff }
.btn--wa:hover{ background:var(--wa-hover) }
.btn--ghost{ border-color:var(--rule-strong); color:var(--ink) }
.btn--ghost:hover{ border-color:var(--ink); background:var(--paper-2) }
.btn svg{ width:19px; height:19px; flex:none }

/* ============================ hero ============================ */
.hero{ padding:clamp(3rem,7vw,6rem) var(--gut) 0; position:relative; isolation:isolate; overflow:hidden }

/* the clinic photograph, full-bleed and faded, sitting behind the whole hero */
.hero__bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("assets/img/clinic-hero.png") center 42% / cover no-repeat;
  opacity:0.46; filter:saturate(0.78);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 48%, transparent 94%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 48%, transparent 94%);
}
/* a real scrim over the text column, so the photograph can stay visible
   on the right instead of being washed out to a ghost across the whole hero */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg,
    var(--paper) 0%,
    color-mix(in oklab, var(--paper) 94%, transparent) 38%,
    color-mix(in oklab, var(--paper) 62%, transparent) 62%,
    color-mix(in oklab, var(--paper) 30%, transparent) 100%);
}

.hero__grid{ display:grid; grid-template-columns:1.12fr 0.88fr; gap:clamp(2rem,5vw,4.5rem); align-items:center }
.hero__aside{ align-self:center }
@media (max-width:940px){
  .hero__grid{ grid-template-columns:1fr; gap:2.5rem; align-items:start }
  .hero__bg{ opacity:0.34 }
  .hero::after{
    background:linear-gradient(180deg,
      color-mix(in oklab, var(--paper) 88%, transparent) 0%,
      color-mix(in oklab, var(--paper) 78%, transparent) 55%,
      color-mix(in oklab, var(--paper) 40%, transparent) 100%);
  }
}

.hero h1{ font-size:var(--step-4); margin-top:1.1rem; max-width:17ch }
.hero h1 em{ font-style:normal; color:var(--accent-dp); }
.hero__sub{
  margin-top:1.5rem; font-size:var(--step-1); color:var(--ink-soft);
  max-width:46ch; line-height:1.5;
}
.hero__sub b{ color:var(--ink); font-weight:500 }

.hero__cta{ display:flex; flex-wrap:wrap; gap:0.85rem; margin-top:2rem }
.hero__note{ margin-top:1rem; font-size:var(--step--1); color:var(--ink-faint) }

/* price plate — the offer, stated immediately */
.plate{
  border:1px solid color-mix(in oklab, var(--accent) 45%, var(--rule-strong));
  background:var(--paper-2); padding:1.6rem 1.7rem; position:relative;
}
.plate__row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem }
.plate__price{ font-family:"IBM Plex Mono",monospace; font-size:var(--step-3); font-weight:500; letter-spacing:-0.03em }
.plate__price small{ font-size:max(12px, 0.4em); color:var(--ink-faint); font-weight:400; letter-spacing:0 }
.plate__split{ margin-top:1.15rem; padding-top:1.15rem; border-top:1px solid var(--rule) }
.plate__split dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:0.45rem 1rem; font-size:var(--step--1) }
.plate__split dt{ color:var(--ink-faint) }
.plate__split dd{ margin:0; text-align:right; font-family:"IBM Plex Mono",monospace }

/* trust strip */
.strip{ border-block:1px solid var(--rule); margin-top:clamp(3rem,7vw,5rem); padding-block:9px }
.strip ul{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(4,1fr);
}
.strip li{ padding:0.75rem 1.4rem; border-right:1px solid var(--rule); font-size:var(--step--1); color:var(--ink-soft) }
.strip li:first-child{ padding-left:0 }
.strip li:last-child{ border-right:0; padding-right:0 }
.strip li b{ display:block; color:var(--ink); font-weight:500; margin-bottom:0.15rem }
@media (max-width:840px){
  .strip ul{ grid-template-columns:repeat(2,1fr) }
  .strip li{ padding:0.7rem 1rem }
  .strip li:nth-child(odd){ padding-left:0 }
  .strip li:nth-child(even){ padding-right:0 }
  .strip li:nth-child(2){ border-right:0 }
  .strip li:nth-child(-n+2){ border-bottom:1px solid var(--rule) }
}

/* ============================ generic section ============================ */
section{ padding:clamp(3.5rem,8vw,7rem) var(--gut) }
.sec__head{ display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:baseline; margin-bottom:clamp(2rem,4vw,3rem) }
@media (max-width:700px){ .sec__head{ grid-template-columns:1fr; gap:0.7rem } }
.sec__head h2{ font-size:var(--step-3); max-width:20ch }
.sec__lede{ font-size:var(--step-1); color:var(--ink-soft); max-width:var(--measure); line-height:1.55 }

/* ============================ reframe ============================ */
.reframe{ background:linear-gradient(118deg, var(--accent-wash) 0%, oklch(0.90 0.05 168) 48%, var(--warm) 100%) }
.reframe__in{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center }
@media (max-width:860px){ .reframe__in{ grid-template-columns:1fr } }
.reframe h2{ font-size:var(--step-3); max-width:14ch }
.reframe p{ color:var(--ink-soft); max-width:56ch }
.reframe p + p{ margin-top:1rem }
.reframe q{ quotes:none; display:block; font-family:"Newsreader",serif; font-size:var(--step-2);
  line-height:1.3; color:var(--ink); border-left:1px solid var(--accent); padding-left:1.4rem; margin-top:1.6rem }

/* ============================ spec table ============================ */
.spec{ border-top:1px solid var(--ink) }
.spec__row{
  display:grid; grid-template-columns:clamp(8rem,17vw,13rem) 1fr; gap:1.5rem;
  padding:1.05rem 0; border-bottom:1px solid var(--rule);
}
.spec__row dt{ font-weight:500; font-size:var(--step--1); padding-top:0.15rem }
.spec__row dd{ margin:0; color:var(--ink-soft); max-width:66ch }
.spec__row dd b{ color:var(--ink); font-weight:500 }
@media (max-width:640px){ .spec__row{ grid-template-columns:1fr; gap:0.3rem } }

/* ============================ payment rail ============================ */
.rail{ background:var(--ink); color:var(--paper) }
.rail h2{ color:var(--paper); font-size:var(--step-3); max-width:18ch }
.rail .sec__lede{ color:oklch(0.78 0.015 248) }
.rail .label{ color:oklch(0.68 0.03 168) }
.track{ margin-top:clamp(2.5rem,5vw,3.5rem); display:grid; grid-template-columns:repeat(5,1fr); gap:0 }
@media (max-width:860px){ .track{ grid-template-columns:1fr } }
.stop{ position:relative; padding:2.4rem 1.2rem 0 0 }
.stop::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:oklch(0.42 0.02 248);
}
.stop::after{
  content:""; position:absolute; top:-4.5px; left:0; width:9px; height:9px; border-radius:50%;
  background:var(--paper);
}
.stop--gate::after{ background:var(--accent); box-shadow:0 0 0 4px oklch(0.50 0.082 168 / 0.25) }
.stop--gate .stop__t{ color:oklch(0.80 0.09 168) }
.stop__n{ font-family:"IBM Plex Mono",monospace; font-size:0.72rem; color:#8b959e; letter-spacing:0.1em }
.stop__t{ font-family:"Newsreader",serif; font-size:var(--step-1); margin-top:0.35rem; line-height:1.2 }
.stop__d{ font-size:var(--step--1); color:oklch(0.74 0.015 248); margin-top:0.5rem; max-width:24ch }
.stop__amt{ font-family:"IBM Plex Mono",monospace; font-size:var(--step--1); margin-top:0.7rem; color:var(--paper) }
@media (max-width:860px){
  .stop{ padding:0 0 1.9rem 1.6rem }
  .stop::before{ top:0; bottom:0; left:0; right:auto; width:1px; height:auto }
  .stop::after{ top:2px; left:-4px }
  .stop__d{ max-width:none }
}

/* guarantee document block */
.guar{
  margin-top:clamp(2.5rem,5vw,3.5rem); border:1px solid oklch(0.42 0.02 248);
  padding:clamp(1.4rem,3vw,2.2rem); background:oklch(0.29 0.022 248); position:relative;
}
.guar h3{ font-size:var(--step-2); color:var(--paper); margin-bottom:0.9rem }
.guar p{ color:oklch(0.86 0.014 248); max-width:66ch; font-size:var(--step--1); line-height:1.7 }
.guar p + p{ margin-top:0.8rem }
.guar strong{ color:var(--paper); font-weight:500 }

/* ============================ excluded ============================ */
.excl{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:0 1.5rem; margin:0; padding:0; list-style:none; border-top:1px solid var(--rule) }
.excl li{ padding:0.7rem 0; border-bottom:1px solid var(--rule); font-size:var(--step--1); color:var(--ink-soft); display:flex; gap:0.7rem }
.excl li::before{ content:"—"; color:var(--ink-faint); font-family:"IBM Plex Mono",monospace }

/* ============================ demo phone ============================ */
.demo__in{ display:grid; grid-template-columns:1fr 340px; gap:clamp(2rem,5vw,4rem); align-items:center }
@media (max-width:880px){ .demo__in{ grid-template-columns:1fr } }
.phone{
  width:330px; margin-inline:auto; border:9px solid var(--ink); border-radius:34px;
  overflow:hidden; background:#fff; position:relative;
  box-shadow:0 26px 50px -22px oklch(0.24 0.03 248 / 0.45);
}
.ph__bar{ height:26px; background:var(--ink); display:flex; align-items:center; justify-content:center }
.ph__bar span{ width:74px; height:5px; border-radius:3px; background:oklch(0.42 0.02 248) }
.ph__hero{ position:relative }
.ph__hero img{ height:140px; width:100%; object-fit:cover; object-position:center 28% }
.ph__hero div{
  position:absolute; inset:auto 0 0 0; padding:0.6rem 0.75rem; color:#fff;
  background:linear-gradient(transparent, oklch(0.24 0.03 248 / 0.85));
  font-family:"Newsreader",serif; font-size:1rem; line-height:1.2;
}
.ph__body{ padding:0.85rem }
/* the DEMO marker sits inside the frame, so nothing needs to be clipped out of it */
.ph__demo{
  display:inline-block; background:var(--accent-dp); color:#fff;
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:0.16em;
  padding:0.25rem 0.6rem; margin-bottom:0.7rem;
}
.ph__row{ display:flex; gap:0.4rem; margin-bottom:0.6rem }
.ph__chip{ flex:1; border:1px solid var(--rule-strong); padding:0.45rem 0.3rem; text-align:center; font-size:12px; color:var(--ink-soft); border-radius:2px }
.ph__doc{ display:flex; gap:0.6rem; align-items:center; padding:0.6rem; background:var(--paper-2); margin-bottom:0.65rem }
.ph__doc img{ width:40px; height:40px; object-fit:cover; object-position:top center; border-radius:50% }
.ph__doc b{ font-size:12px; display:block }
.ph__doc span{ font-size:12px; color:var(--ink-faint) }
.ph__wa{
  background:var(--wa); color:#fff; text-align:center; padding:0.6rem;
  font-size:12px; font-weight:500; border-radius:2px; display:flex; align-items:center; justify-content:center; gap:0.4rem;
}
.ph__wa svg{ width:14px; height:14px }
.ph__meta{ font-size:12px; color:var(--ink-faint); text-align:center; margin-top:0.6rem }
.demo__note{ font-size:var(--step--1); color:var(--ink-faint); margin-top:1.2rem; max-width:52ch }

/* ============================ comparison ============================ */
.cmp{ width:100%; border-collapse:collapse; font-size:var(--step--1) }
.cmp th,.cmp td{ text-align:left; padding:0.85rem 1rem; border-bottom:1px solid var(--rule); vertical-align:top }
.cmp thead th{ font-weight:500; border-bottom:1px solid var(--ink); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); font-family:"IBM Plex Mono",monospace }
.cmp tbody th{ font-weight:500; color:var(--ink); width:26% }
.cmp .col-us{ background:var(--accent-wash) }
.cmp thead .col-us{ color:var(--accent-dp) }
.cmp-wrap{ overflow-x:auto }
@media (max-width:700px){ .cmp{ min-width:620px } }

/* ============================ faq ============================ */
.faq{ border-top:1px solid var(--ink); padding-block:10px }
.faq details{ border-bottom:1px solid var(--rule) }
.faq details:last-child{ border-bottom:0 }
.faq summary{
  cursor:pointer; list-style:none; padding:1.1rem 2.5rem 1.1rem 0; position:relative;
  font-family:"Newsreader",serif; font-size:var(--step-1); line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; position:absolute; right:0.4rem; top:1rem; font-family:"IBM Plex Mono",monospace;
  color:var(--accent-dp); font-size:1.2rem; transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq .ans{ padding:0 0 1.4rem; color:var(--ink-soft); max-width:var(--measure) }
.faq .ans b{ color:var(--ink); font-weight:500 }

/* ============================ founder ============================ */
.founder{ background:linear-gradient(200deg, var(--paper-2) 0%, var(--warm) 60%, oklch(0.92 0.04 168) 100%) }
.founder__in{ display:grid; grid-template-columns:260px 1fr; gap:clamp(2rem,5vw,4rem); align-items:start }
@media (max-width:860px){ .founder__in{ grid-template-columns:1fr; gap:2rem } }
.founder__photo{ margin:0 }
.founder__photo img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; object-position:top center; filter:saturate(0.92) }
.founder__photo figcaption{
  margin-top:0.7rem; font-family:"IBM Plex Mono",monospace; font-size:12px;
  color:var(--ink-faint); line-height:1.6; word-break:break-word;
}
.founder__copy h2{ font-size:var(--step-3); max-width:20ch }
.founder__copy > p{ margin-top:1.1rem; color:var(--ink-soft); max-width:62ch }
.quotes{ list-style:none; margin:1.9rem 0 0; padding:0; display:grid; gap:0; border-top:1px solid var(--rule) }
.quotes li{ padding:0.95rem 0; border-bottom:1px solid var(--rule) }
.quotes p{ font-family:"Newsreader",serif; font-size:var(--step-1); line-height:1.4; max-width:56ch }
.quotes cite{ display:block; margin-top:0.35rem; font-style:normal; font-size:12px; color:var(--ink-faint); font-family:"IBM Plex Mono",monospace }
.founder__note{ margin-top:1.3rem; font-size:var(--step--1); color:var(--ink-faint); max-width:58ch }

/* ============================ work band ============================ */
.wgrid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.75rem) }
@media (max-width:900px){ .wgrid{ grid-template-columns:1fr } }
.wcard a{
  display:block; text-decoration:none; border:1px solid var(--rule-strong); background:var(--paper);
  height:100%; transition:transform .4s var(--ease), border-color .25s;
}
.wcard a:hover{ transform:translateY(-3px); border-color:var(--accent) }
.wcard img{ width:100%; aspect-ratio:3/2; object-fit:cover; object-position:top center; border-bottom:1px solid var(--rule) }
.wcard__b{ padding:1.1rem 1.2rem 1.25rem }
.wcard__b h3{ font-size:var(--step-1) }
.wcard__b p{ margin-top:0.45rem; font-size:var(--step--1); color:var(--ink-soft) }
.wcard__u{ display:block; margin-top:0.7rem; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--accent-dp) }
.wcard--lead a{ border-color:var(--accent) }

/* ============================ tiers ============================ */
/* hairline dividers come from the grid gap, so the wrapper carries no border
   of its own and every cell keeps a real inset */
.tiers{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--rule-strong);
}
@media (max-width:900px){ .tiers{ grid-template-columns:1fr } }
.tier{ padding:clamp(1.5rem,3vw,2.1rem); background:var(--paper) }
.tier--lead{ background:var(--accent-wash) }
.tier h3{ font-size:var(--step-2) }
.tier__for{ font-size:var(--step--1); color:var(--ink-faint); margin-top:0.45rem }
.tier__p{ font-family:"IBM Plex Mono",monospace; font-size:var(--step-2); margin-top:0.9rem; letter-spacing:-0.02em }
.tier__p small{ display:block; font-size:max(12px, 0.46em); color:var(--ink-faint); letter-spacing:0; margin-top:0.35rem }
.tier ul{ list-style:none; margin:1.3rem 0 0; padding:0 }
.tier li{ font-size:var(--step--1); color:var(--ink-soft); padding:0.45rem 0 0.45rem 1.25rem; position:relative; border-top:1px solid var(--rule) }
.tier li::before{ content:""; position:absolute; left:0; top:0.95rem; width:6px; height:1px; background:var(--accent) }

/* ============================ close ============================ */
.close{ background:linear-gradient(160deg, oklch(0.90 0.05 168) 0%, var(--paper-3) 50%, var(--warm-2) 100%) }
.close__in{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem,5vw,4rem); align-items:start }
@media (max-width:880px){ .close__in{ grid-template-columns:1fr } }
.close h2{ font-size:var(--step-3); max-width:16ch }
.qs{ counter-reset:q; list-style:none; margin:1.5rem 0 0; padding:0; border-top:1px solid var(--rule-strong) }
.qs li{ counter-increment:q; padding:0.7rem 0 0.7rem 2.2rem; border-bottom:1px solid var(--rule-strong); position:relative; font-size:var(--step-0) }
.qs li::before{
  content:counter(q,decimal-leading-zero); position:absolute; left:0; top:0.78rem;
  font-family:"IBM Plex Mono",monospace; font-size:0.7rem; color:var(--accent-dp);
}

/* ============================ footer ============================ */
footer{ border-top:1px solid var(--ink); padding:2.5rem var(--gut) 3.5rem; font-size:var(--step--1); color:var(--ink-soft) }
.foot__grid{ display:flex; flex-wrap:wrap; gap:2rem 3rem; justify-content:space-between; align-items:flex-start }
footer p{ max-width:58ch }
footer a{ color:var(--accent-dp) }

/* ============================ motion ============================ */
.rev{ opacity:0; transform:translateY(18px) }
.rev.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease) }
.rev.in.d1{ transition-delay:.07s } .rev.in.d2{ transition-delay:.14s } .rev.in.d3{ transition-delay:.21s }
@media (prefers-reduced-motion:reduce){
  .rev,.rev.in{ opacity:1; transform:none; transition:none }
  .btn:hover{ transform:none }
  *{ scroll-behavior:auto !important }
}
html{ scroll-behavior:smooth }
:focus-visible{ outline:2px solid var(--accent-dp); outline-offset:3px }

/* ============================ scope tiles ============================ */
.tiles{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule-strong);
  border:1px solid var(--rule-strong);
}
@media (max-width:900px){ .tiles{ grid-template-columns:repeat(2,1fr) } }
.tiles li{ background:var(--paper); padding:1.2rem 1.25rem 1.35rem }
.tiles b{
  display:block; font-family:"Newsreader",serif; font-weight:500;
  font-size:var(--step-2); letter-spacing:-0.02em; line-height:1.1;
}
.tiles span{ display:block; margin-top:0.45rem; font-size:var(--step--1); color:var(--ink-soft) }

/* disclosure for the full written scope */
.more{ margin-top:1.75rem; border-top:1px solid var(--rule-strong); padding-top:14px }
.more summary{
  cursor:pointer; list-style:none; font-size:var(--step--1); color:var(--accent-dp);
  font-family:"IBM Plex Mono",monospace; letter-spacing:0.04em; padding:4px 0;
}
.more summary::-webkit-details-marker{ display:none }
.more summary::before{ content:"+ "; }
.more[open] summary::before{ content:"– "; }
.more .spec{ margin-top:1.1rem }

/* ============================ vsl ============================ */
.vsl{ margin:0 0 clamp(2.5rem,5vw,3.75rem) }
.vsl video{
  width:100%; max-width:960px; display:block; aspect-ratio:16/9;
  margin-inline:auto;
  border:1px solid var(--rule-strong); background:var(--ink);
}

/* ============================ ambient backgrounds ============================ */
/* Two quiet things the paper can do: a drift of sage light (transform-only, 28–36 s,
   still under reduced motion) and the dot grid from the Dentaldfy mark, faded into
   one corner. A section opts in with .lit; nothing here touches the text layer.
   The hero already isolates itself and layers its photograph and scrim above this. */
.lit{ position:relative; isolation:isolate; overflow:hidden }
.light{
  position:absolute; inset:-22%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 46% at 26% 32%, oklch(0.84 0.075 168 / 1), transparent 68%),
    radial-gradient(36% 40% at 78% 74%, oklch(0.88 0.08 80 / 1), transparent 68%),
    radial-gradient(26% 28% at 62% 18%, oklch(0.90 0.06 172 / 1), transparent 68%);
  filter:blur(36px);
  animation:drift 16s cubic-bezier(0.45,0,0.55,1) infinite alternate;
}
.light--b{
  background:
    radial-gradient(38% 42% at 74% 28%, oklch(0.85 0.075 168 / 1), transparent 68%),
    radial-gradient(32% 36% at 20% 76%, oklch(0.89 0.08 80 / 1), transparent 68%);
  animation-duration:22s; animation-direction:alternate-reverse;
}
@keyframes drift{
  from{ transform:translate3d(-7%,-4%,0) scale(1) }
  to{   transform:translate3d(7%,6%,0)   scale(1.16) }
}
.dots::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(oklch(0.50 0.082 168 / .42) 1.3px, transparent 1.8px) 0 0 / 20px 20px;
  -webkit-mask-image:radial-gradient(55% 60% at 100% 0%, #000, transparent 72%);
          mask-image:radial-gradient(55% 60% at 100% 0%, #000, transparent 72%);
}
.dots--bl::before{
  -webkit-mask-image:radial-gradient(55% 60% at 0% 100%, #000, transparent 72%);
          mask-image:radial-gradient(55% 60% at 0% 100%, #000, transparent 72%);
}
/* In the hero the scrim (.hero::after) paints last among the z:-1 layers and hid the
   light entirely; lift it above the scrim and keep the text column above it. */
.hero > .light{ z-index:0; opacity:.85 }
.hero > .hero__grid{ position:relative; z-index:1 }
@media (prefers-reduced-motion:reduce){ .light{ animation:none } }

/* ============================ legal pages ============================ */
.legal .shell{ max-width:var(--measure); margin-inline:auto }
.legal h1{ font-size:var(--step-3); margin-top:.6rem }
.legal__meta{ margin-top:.8rem; font-size:var(--step--1); color:var(--ink-faint); font-family:"IBM Plex Mono",monospace }
.legal h2{ font-size:var(--step-1); margin-top:2.2rem }
.legal p{ margin-top:1rem; color:var(--ink-soft); line-height:1.6 }
.legal ul{ margin:1rem 0 0; padding-left:1.2rem; color:var(--ink-soft); line-height:1.6 }
.legal li + li{ margin-top:.5rem }
.legal a{ color:var(--accent-dp) }