/* prestinhearing.com — landing. Warm instrument, modern: restraint + precision.
   Built to ../brand/aesthetic-principles.md. See ../research/ for the evidence. */

@font-face{ font-family:"Fraunces"; src:url("fonts/fraunces.woff2") format("woff2"); font-weight:400 700; font-display:swap; }
@font-face{ font-family:"Switzer"; src:url("fonts/switzer-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Switzer"; src:url("fonts/switzer-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Switzer"; src:url("fonts/switzer-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"JBMono"; src:url("fonts/jbmono-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"JBMono"; src:url("fonts/jbmono-500.woff2") format("woff2"); font-weight:500; font-display:swap; }

:root{
  /* clean modern WHITE base — flat, no page-wide tint; one faint blue only at the hero top */
  --paper:#ffffff; --paper-2:#f6f7f9; --paper-3:#f4f6f8;
  --surface:#ffffff; --surface-2:#f7f9fc; --surface-sunk:#eef1f5;
  --ink-band:#0f1217; --ink-band-2:#171b22;
  --rule:#e8eaee; --rule-strong:#d4d7dd;
  --ink:#1b1d22; --body:#43464d; --muted:#6b6f76;   /* muted darkened to pass WCAG AA (~5.2:1) for the older audience */
  --brass:#a8823f; --brass-deep:#856630; --brass-lite:#c2a05a; --brass-soft:#eef3fb;
  --blue-wash:#e7f0fc;                 /* the faint blue at the hero top (Apple-style) */
  --ear-r:#9c4a3c; --ear-l:#3a4a57;    /* clinical audiogram convention (the one exception) */
  --font-display:"Big Caslon","Hoefler Text","Fraunces",Georgia,serif;
  --font-ui:"Switzer",system-ui,-apple-system,sans-serif;
  --font-data:"JBMono",ui-monospace,Menlo,monospace;
  --maxw:1240px; --measure:680px;
  /* layered depth shadows, warm-tinted toward the palette (never pure black) */
  --sh-1:0 1px 2px rgba(20,28,45,.05);
  --sh-2:0 1px 2px rgba(20,28,45,.04), 0 2px 8px rgba(20,28,45,.05), 0 16px 38px rgba(20,28,45,.06);
  --sh-3:0 2px 6px rgba(20,28,45,.05), 0 8px 20px rgba(20,28,45,.07), 0 34px 80px rgba(20,28,45,.09);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* faint film grain (dithers any gradient banding — the Stripe/Vercel trick) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--body); font-family:var(--font-ui); font-size:18px; line-height:1.7;
  font-feature-settings:"cnum" 1,"tnum" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:var(--paper);          /* one continuous white canvas for every section */
  position:relative;                /* anchors the top .sky to the page top */
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; position:relative; z-index:2; }
.measure{ max-width:var(--measure); }
.mono{ font-family:var(--font-data); }
a{ color:inherit; }
::selection{ background:var(--brass-deep); color:#ffffff; }
::-moz-selection{ background:var(--brass-deep); color:#ffffff; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:4px; }
.eyebrow{ font-family:var(--font-data); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-deep); margin:0 0 22px; }
h1,h2,h3{ font-family:var(--font-display); color:var(--ink); font-weight:600; }
h1{ letter-spacing:.012em; } h2{ letter-spacing:.01em; }

/* ---- nav ---- */
.nav{ position:sticky; top:0; z-index:20; transition:background .3s,border-color .3s,box-shadow .3s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:color-mix(in srgb,var(--paper) 80%,transparent); backdrop-filter:saturate(1.2) blur(12px); border-bottom:1px solid var(--rule); box-shadow:var(--sh-1); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand{ font-family:var(--font-display); font-size:27px; font-weight:500; color:var(--ink); letter-spacing:.02em; text-decoration:none; }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a:not(.btn){ text-decoration:none; color:var(--body); font-size:15px; transition:color .2s; }
.nav-links a:not(.btn):hover{ color:var(--ink); }
.btn{ font-family:var(--font-ui); font-size:15px; font-weight:500; padding:11px 22px; border-radius:9px; border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-block; transition:transform .18s var(--ease), box-shadow .25s, background .2s, border-color .2s, color .2s; }
.btn-primary{ background:var(--ink); color:#ffffff; box-shadow:var(--sh-1); }
.btn-primary:hover{ background:#2c2e34; transform:translateY(-1px); box-shadow:var(--sh-2); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--rule-strong); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--sh-1); }

/* ---- sections (one continuous canvas; rhythm by spacing, not background) ---- */
section{ padding:132px 0; position:relative; }
h2{ font-size:clamp(32px,4vw,50px); line-height:1.08; margin:0 0 18px; }
.lede{ font-size:21px; color:var(--body); margin:0; line-height:1.6; }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--rule),transparent); border:none; margin:0; }

/* ---- the top sky: ONE vertical blue wash at the very top of the page. It fades
   down smoothly (gradient) and JS fades its opacity out as you scroll. It is
   anchored to the page top and scrolls away — no static perimeter vignette. ---- */
.sky{ position:absolute; top:0; left:0; right:0; height:50vh; pointer-events:none; z-index:0;
  background:linear-gradient(180deg in oklab,
    #edf3fc 0%, #f5f9fd 44%, #fbfcfe 74%, rgba(237,243,252,0) 100%);
  will-change:opacity; }

/* ---- hero (transparent so the sky shows through) ---- */
.hero{ padding:118px 0 140px; text-align:center; position:relative; background:transparent; }
.mission::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:var(--grain); background-size:170px 170px; opacity:.04; }
.hero h1{ font-size:clamp(46px,7.4vw,88px); line-height:1.0; margin:0 0 26px; letter-spacing:.01em; }
.hero .lede{ max-width:640px; margin:0 auto 34px; font-size:22px; }
.hero-cta{ display:flex; gap:16px; justify-content:center; align-items:center; }
.hero-cta .btn{ padding:14px 28px; font-size:16px; }
.hero-trust{ margin-top:22px; font-family:var(--font-data); font-size:12.5px; letter-spacing:.05em; color:var(--muted);
  display:flex; gap:13px; justify-content:center; flex-wrap:wrap; align-items:center; }
.hero-trust .sep{ color:var(--rule-strong); }
.hero-trust b{ color:var(--brass-deep); font-weight:500; }

/* ---- the product mock (3D tilt, warm-tinted depth) ---- */
.stage{ perspective:1600px; margin:72px auto 0; max-width:960px; }
.mock{ border-radius:16px; overflow:hidden; background:var(--surface);
  box-shadow:0 2px 10px rgba(54,42,24,.07), 0 12px 34px rgba(54,42,24,.09), 0 44px 90px rgba(54,42,24,.10);
  transform-style:preserve-3d; transition:transform .25s var(--ease), box-shadow .3s; will-change:transform; }
.mock-bar{ display:flex; align-items:center; gap:8px; padding:13px 16px; background:linear-gradient(180deg,var(--surface-2),var(--surface-sunk)); border-bottom:1px solid var(--rule); }
.dot{ width:11px; height:11px; border-radius:50%; background:var(--rule-strong); }
.mock-url{ margin-left:14px; font-family:var(--font-data); font-size:12.5px; color:var(--muted); background:var(--paper); border:1px solid var(--rule); border-radius:7px; padding:5px 14px; }
.mock-body{ padding:34px 38px 40px; text-align:left; transform:translateZ(40px); }
.mock-top{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:20px; }
.mock-title{ font-family:var(--font-display); font-size:23px; color:var(--ink); letter-spacing:.01em; }
.mock-org{ font-size:13px; color:var(--muted); }
.mock-table{ width:100%; border-collapse:collapse; font-size:15px; }
.mock-table th{ text-align:left; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--rule-strong); padding:8px 10px; }
.mock-table td{ padding:11px 10px; border-bottom:1px solid var(--rule); }
.mock-table .num{ font-family:var(--font-data); text-align:right; }
.mock-table .ser{ font-family:var(--font-data); color:var(--brass-deep); }
.mock-derived{ color:var(--brass-deep); }

/* ---- trust strip (right after the hero — the Canada-first story) ---- */
.trust{ padding:60px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
.trust-item{ }
.trust-item .mk{ color:var(--brass); font-size:18px; line-height:1; margin-bottom:12px; }
.trust-item h3{ font-family:var(--font-display); font-size:18px; margin:0 0 7px; color:var(--ink); font-weight:600; letter-spacing:.005em; }
.trust-item p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--muted); }

/* ---- feature rows ---- */
.feature{ display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center; }
.feature + .feature{ margin-top:128px; }
.feature.flip .feature-text{ order:2; }
.feature h3{ font-family:var(--font-display); font-size:30px; margin:0 0 14px; letter-spacing:.01em; color:var(--ink); }
.feature p{ margin:0; color:var(--body); font-size:18px; }
.feature-art{ position:relative; z-index:2; background:linear-gradient(165deg,var(--surface),var(--surface-2)); border:1px solid var(--rule); border-radius:18px; min-height:330px; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); transition:box-shadow .35s; }
.feature-art:hover{ box-shadow:var(--sh-3); }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.chip{ font-family:var(--font-data); font-size:12px; color:var(--brass-deep); background:var(--surface); border:1px solid var(--rule-strong); border-radius:999px; padding:6px 14px; }

/* ---- founding-clinic quote (the single proof beat) ---- */
.quote{ text-align:center; }
.quote .mk{ color:var(--brass); font-size:30px; line-height:1; }
.quote blockquote{ font-family:var(--font-display); font-size:clamp(26px,3.4vw,38px); line-height:1.32; color:var(--ink); margin:18px auto 0; max-width:900px; letter-spacing:.004em; font-weight:500; }
.quote .cite{ font-family:var(--font-data); font-size:13px; letter-spacing:.05em; color:var(--brass-deep); margin-top:26px; }
.quote .cite .ph{ color:var(--muted); }

/* ---- pricing ---- */
.prices{ display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:900px; margin:0 auto; }
.price{ background:linear-gradient(170deg,var(--surface),var(--surface-2)); border:1px solid var(--rule-strong); border-radius:16px; padding:40px 36px; transition:transform .3s var(--ease), box-shadow .3s; box-shadow:var(--sh-1); }
.price:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); }
.price.feat{ border-color:var(--brass); box-shadow:var(--sh-2), 0 0 0 1px var(--brass) inset; }
.price .badge{ font-family:var(--font-data); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--brass); border-radius:999px; padding:4px 11px; display:inline-block; margin-bottom:14px; }
.price h3{ font-family:var(--font-display); font-size:25px; margin:0 0 5px; color:var(--ink); }
.price .who{ font-size:14.5px; color:var(--muted); margin:0 0 24px; }
.price .amt{ font-family:var(--font-data); font-size:38px; color:var(--ink); }
.price .per{ font-size:14px; color:var(--muted); }
.price ul{ list-style:none; padding:0; margin:24px 0 30px; }
.price li{ padding:9px 0 9px 26px; position:relative; font-size:15.5px; border-bottom:1px solid var(--rule); }
.price li:before{ content:"◇"; position:absolute; left:2px; color:var(--brass); font-size:11px; top:11px; }
.price .btn{ width:100%; text-align:center; }
.indic{ text-align:center; color:var(--muted); font-size:13.5px; margin-top:22px; }

/* ---- about ---- */
.founders{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:44px; }
.founder{ background:linear-gradient(170deg,var(--surface),var(--surface-2)); border:1px solid var(--rule); border-radius:16px; padding:34px; transition:transform .3s var(--ease), box-shadow .3s; box-shadow:var(--sh-1); }
.founder:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.founder .nm{ font-family:var(--font-display); font-size:22px; color:var(--ink); letter-spacing:.01em; }
.founder .role{ font-family:var(--font-data); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-deep); margin:3px 0 0; }
.founder-head{ display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.founder-photo{ width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:center; flex:none; border:1px solid var(--rule-strong); box-shadow:var(--sh-1); }
.founder p{ margin:0; font-size:17px; line-height:1.74; color:var(--body); }

/* ---- mission band (the ONE dark statement band, warm) ---- */
.mission{ text-align:center; color:#f4efe6; position:relative; overflow:hidden;
  background:var(--ink-band); }
.mission{ background:radial-gradient(900px 520px at 50% 0% in oklab, var(--ink-band-2), var(--ink-band) 72%); }
.mission .brand-lg{ font-family:var(--font-display); font-size:clamp(52px,8vw,92px); color:#f4efe6; line-height:1; letter-spacing:.02em; }
.mission .stmt{ font-family:var(--font-display); font-size:clamp(22px,2.8vw,30px); color:#e2d6c1; max-width:620px; margin:30px auto 0; line-height:1.45; font-weight:400; letter-spacing:.01em; }
.mission .tag{ font-family:var(--font-data); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:#b8aa8c; margin-top:34px; }

/* ---- footer ---- */
.foot{ padding:64px 0 44px; background:var(--paper-3); border-top:1px solid var(--rule); }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; }
.foot .brand{ font-size:24px; }
.foot-cols{ display:flex; gap:72px; flex-wrap:wrap; }
.foot-col h4{ font-family:var(--font-data); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:500; }
.foot-col a{ display:block; text-decoration:none; color:var(--body); font-size:14.5px; padding:5px 0; transition:color .2s; }
.foot-col a:hover{ color:var(--ink); }
.foot-base{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid var(--rule); flex-wrap:wrap; }
.foot-base .mono{ font-size:12.5px; color:var(--muted); }

/* ---- reveal (opacity + small rise, ~once) ---- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---- responsive ---- */
@media (max-width:880px){
  .wrap{ padding:0 24px; }
  .feature{ grid-template-columns:1fr; gap:28px; }
  .feature.flip .feature-text{ order:0; }
  .trust-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .prices{ grid-template-columns:1fr; }
  .founders{ grid-template-columns:1fr; }
  .nav-links a:not(.btn){ display:none; }
  section{ padding:84px 0; }
  .trust{ padding:48px 0; }
  .hero{ padding:60px 0 76px; }
}
@media (max-width:520px){
  .trust-grid{ grid-template-columns:1fr; gap:26px; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto; animation:none !important; }
  .reveal{ opacity:1; transform:none; }
  .mock{ transform:none !important; }
}