/* ==========================================================================
   Dental pages (2026-10-25): the field journal's cream ground and green
   plates, on top of kairo.css. The home page opens on real screenshots of
   the concept sites (the hero), says how a patient picks a dentist, then
   hands the reader a tooth chart for their own website (the checkup). The slow scroll is static/smooth.js.
   ========================================================================== */

/* Lenis (from its own lenis.css, minus the rule that blocks iframes, which
   would freeze the booking window) */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }

/* ------------------------------------------------------------ porcelain -- */
/* The dental look (2026-10-27): cool porcelain ground, navy plates, one deep
   teal accent. Same token names as the field journal, so every page follows. */
html[data-audience="dental"] {
  --cream: #F2F5F5; --cream-2: #E2E9E9; --cream-3: #FCFDFD;
  --green: #0F1E2E; --green-2: #172A3D; --green-3: #22384E;
  --ink: #0F1E2E; --ink-2: rgba(15, 30, 46, .72); --ink-3: rgba(15, 30, 46, .5);
  --on-green: #EEF4F4; --on-green-2: rgba(238, 244, 244, .72); --on-green-3: rgba(238, 244, 244, .42);
  --orange: #2A9D93;        /* marks: dots, ticks, focus */
  --orange-deep: #0B6660;   /* text and fills on porcelain: 6.2:1 */
  --orange-lift: #7FD4C9;   /* text and fills on navy */
  --glow: radial-gradient(ellipse at 80% 100%, rgba(42, 157, 147, .34) 0%, rgba(20, 80, 96, .14) 40%, transparent 70%);
  --line: rgba(15, 30, 46, .11); --line-green: rgba(238, 244, 244, .14);
}
[data-audience="dental"] .top__in { background: rgba(252, 253, 253, .86); }
[data-audience="dental"] .top .brand img { filter: brightness(0) saturate(100%) invert(9%) sepia(32%) saturate(1500%) hue-rotate(182deg); }

/* Dark porcelain (2026-10-28): follows the device setting, and is the look
   most visitors get. Same colours as Kairo OS dark: the navy plates become the
   ground, cards step up one navy, teal lifts to its light step. Porcelain white
   is kept for the things that should read as a tooth: a "yes" in the checkup,
   the shade tabs. */
@media (prefers-color-scheme: dark) {
  html[data-audience="dental"] {
    color-scheme: dark;
    --cream: #0B1520; --cream-2: #172A3D; --cream-3: #0F1E2E;
    --green: #172A3D; --green-2: #22384E; --green-3: #22384E;
    --ink: #EEF4F4; --ink-2: rgba(238, 244, 244, .74); --ink-3: rgba(238, 244, 244, .58);
    --on-green: #EEF4F4; --on-green-2: rgba(238, 244, 244, .74); --on-green-3: rgba(238, 244, 244, .5);
    --orange: #2A9D93;        /* marks */
    --orange-deep: #7FD4C9;   /* text and fills on the dark ground */
    --orange-lift: #7FD4C9;
    --orange-hover: #9CE0D7;
    --on-orange: #0F1E2E;
    --porcelain: #E6EEEE;
    --glow: radial-gradient(ellipse at 80% 100%, rgba(42, 157, 147, .22) 0%, rgba(20, 80, 96, .1) 40%, transparent 70%);
    --line: rgba(238, 244, 244, .12); --line-green: rgba(238, 244, 244, .14);
  }
  html[data-audience="dental"] body { background: radial-gradient(ellipse 110% 60% at 50% 0%, #10202F 0%, #0B1520 60%) fixed, var(--cream); }

  /* the bar, the logo, the nav */
  [data-audience="dental"] .top__in { background: rgba(15, 30, 46, .94); }
  html[data-audience="dental"] .top .brand img { filter: none; }
  [data-audience="dental"] .top__nav a:hover { background: rgba(238, 244, 244, .07); }
  [data-audience="dental"] .top__nav a[aria-current="page"] { background: var(--green-2); }

  /* the teal button keeps navy text, hover lifts it instead of turning navy */
  [data-audience="dental"] .btn--solid,
  [data-audience="dental"] :is(.result, .care) .btn--solid { background: var(--orange-lift); border-color: var(--orange-lift); color: var(--on-orange); }
  [data-audience="dental"] .btn--solid:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--on-orange); }
  [data-audience="dental"] .btn:not(.btn--solid):hover { color: var(--cream); }
  [data-audience="dental"] .dock__cta { color: var(--on-orange); }

  /* raised things get a hairline, shadows go black */
  [data-audience="dental"] :is(.fee__card, .choose__steps li, .q, .appt, .card, .pages__item, .pills li, .chart, .faq__item, .dock, .sheet__panel) { box-shadow: inset 0 0 0 1px var(--line); }
  [data-audience="dental"] .chart { box-shadow: inset 0 0 0 1px var(--line), 0 30px 70px -34px rgba(0, 0, 0, .7); }
  [data-audience="dental"] .dock { box-shadow: inset 0 0 0 1px var(--line), 0 12px 40px rgba(0, 0, 0, .55); }
  [data-audience="dental"] :is(.fee__card--care, .promises, .care, .result) { box-shadow: inset 0 0 0 1px var(--line-green); }
  [data-audience="dental"] .foot { box-shadow: inset 0 1px 0 var(--line); }
  [data-audience="dental"] :is(.hero__phone, .work__shot) { border-color: #22384E; background: #22384E; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75); }

  /* porcelain teeth: a "yes" lights the tooth up white */
  [data-audience="dental"] .choose__n { color: #0F1E2E; }
  [data-audience="dental"] .tooth.is-yes { background: var(--porcelain); }
  [data-audience="dental"] .q label:has(input[value="yes"]:checked) { background: var(--porcelain); color: #0F1E2E; }

  /* forms */
  [data-audience="dental"] :is(.field input, .field select, .field textarea) { background: var(--cream); color: var(--ink); border-color: var(--line); }
  [data-audience="dental"] .err { color: #F5A898; }
}

/* -------------------------------------------------------------- the hero -- */
.hero { padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
.hero h1 { margin-top: 20px; }
.hero .lead { margin-top: 22px; max-width: 26em; }
.hero__cap { margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.hero__cap a { color: var(--orange-deep); font-weight: 600; text-underline-offset: 3px; }

/* words left, the work right */
.hero__grid { display: grid; gap: 48px; }
.hero__phone { position: absolute; right: -6px; bottom: 0; width: 27%; aspect-ratio: 390 / 803; overflow: hidden; border: 5px solid #1d1b18; border-radius: 24px; background: #1d1b18; box-shadow: 0 30px 60px -24px rgba(35, 46, 38, .6); }
.hero__phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (min-width: 1040px) {
  .hero__grid { grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
  .hero__phone { border-width: 7px; border-radius: 30px; }
}

/* the clinic photo with the phone over it */
.hero--smile h1 { font-size: clamp(44px, 3.2vw + 16px, 84px); max-width: 14ch; }
.hero__portrait { position: relative; margin: 0 0 0 auto; width: min(100%, 560px); }
.hero__photo { display: block; overflow: hidden; aspect-ratio: 4 / 4.6; border-radius: var(--r-xl); }
.hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__portrait .hero__phone { right: auto; left: 4%; bottom: -8%; width: 30%; }
.hero__portrait figcaption { margin-top: 20px; padding-left: 38%; }
@media (min-width: 1040px) { .hero__portrait .hero__phone { left: -14%; bottom: -6%; } .hero__portrait figcaption { padding-left: 22%; } }

/* the offer, under the buttons */
.offer { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 32px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.offer div { display: grid; gap: 2px; }
.offer dt { font-family: var(--serif); font-size: clamp(26px, 1vw + 20px, 34px); line-height: 1; font-variant-numeric: tabular-nums; }
.offer dt small { font-family: var(--sans); font-size: 14px; color: var(--ink-2); margin-left: 2px; }
.offer dd { margin: 0; font-size: var(--t-small); color: var(--ink-2); }
@media (max-width: 559px) { .offer { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 20px; } .offer dt { font-size: 24px; } }

/* ------------------------------------------------------------ the price -- */
.fee { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
.fee h2 { max-width: 12ch; }
.fee .lead { margin-top: 18px; max-width: 32em; }
.fee__cards { display: grid; gap: 14px; }
.fee__card { padding: clamp(28px, 3vw, 44px); border-radius: var(--r-xl); background: var(--cream-3); box-shadow: inset 0 0 0 1px var(--line); }
.fee__card--care { background: var(--green); color: var(--on-green); box-shadow: none; position: relative; isolation: isolate; overflow: hidden; }
.fee__card--care::before { content: ""; position: absolute; inset: 0; background: var(--glow); z-index: -1; }
.fee__n { margin: 0; font-family: var(--serif); font-size: clamp(56px, 4vw + 30px, 96px); line-height: 1; font-variant-numeric: tabular-nums; }
.fee__n small { font-family: var(--sans); font-size: 18px; margin-left: 4px; opacity: .72; }
.fee__what { margin-top: 12px; color: var(--ink-2); }
.fee__card--care .fee__what { color: var(--on-green-2); }
.fee__card ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; }
.fee__card li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.fee__card--care li { border-color: var(--line-green); }
.fee__card li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); translate: 0 -2px; }
.fee__card--care li::before { background: var(--orange-lift); }
@media (min-width: 760px) { .fee__cards { grid-template-columns: 1.15fr 1fr; } }
@media (min-width: 1100px) { .fee { grid-template-columns: .8fr 1.6fr; } }

/* ---------------------------------------------- how a patient picks one -- */
.choose { display: grid; gap: clamp(32px, 4vw, 56px); }
.choose h2 { max-width: 14ch; }
.choose__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
.choose__steps li { padding: 28px; border-radius: var(--r-lg); background: var(--cream-3); }
.choose__n { display: grid; place-items: center; width: 52px; height: 74px; border-radius: 14px 14px 26px 26px / 14px 14px 34px 34px; background: var(--shade); box-shadow: inset 0 -10px 16px -8px rgba(120, 90, 40, .22), inset 0 0 0 1px rgba(15, 30, 46, .08); font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--ink); }
/* the numbers sit on a dentist's shade guide: each tab one enamel shade darker */
.choose__steps li:nth-child(1) { --shade: #F6F1E6; }
.choose__steps li:nth-child(2) { --shade: #EFE5CF; }
.choose__steps li:nth-child(3) { --shade: #E7D7B7; }
.choose__steps li:nth-child(4) { --shade: #DDC8A1; }
.choose__steps h3 { margin-top: 18px; font-size: clamp(24px, .8vw + 18px, 30px); line-height: 1.1; }
.choose__steps p { margin-top: 12px; color: var(--ink-2); }
@media (min-width: 760px) { .choose__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .choose__steps { grid-template-columns: repeat(4, 1fr); } }

/* ----------------------------------------------------------- the checkup -- */
.checkup__grid { display: grid; gap: 28px; }
.checkup__side { display: grid; gap: 28px; align-content: start; }
.checkup h2 { margin-top: 16px; max-width: 13ch; }
.checkup .lead { margin-top: 18px; }
.chart { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--cream-3); box-shadow: 0 30px 70px -34px rgba(35, 46, 38, .4); }
.chart__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.chart__label { font-size: var(--t-small); font-weight: 500; color: var(--ink-2); }
.chart__count { font-family: var(--serif); font-size: clamp(44px, 4vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; }
.chart__count small { font-size: .45em; color: var(--ink-3); }
.arch { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(5px, 1vw, 10px); margin-top: 30px; align-items: end; }
.tooth { position: relative; aspect-ratio: 3 / 4.2; border-radius: 40% 40% 28% 28% / 34% 34% 22% 22%; background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line); transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.tooth:nth-child(1), .tooth:nth-child(8) { transform: translateY(-34%); }
.tooth:nth-child(2), .tooth:nth-child(7) { transform: translateY(-16%); }
.tooth:nth-child(3), .tooth:nth-child(6) { transform: translateY(-5%); }
.tooth span { position: absolute; inset: auto 0 -26px; text-align: center; font-size: 12px; font-weight: 500; font-style: normal; color: var(--ink-3); }
.tooth.is-yes { background: var(--green); box-shadow: none; }
.tooth.is-no { background: transparent; box-shadow: inset 0 0 0 2px var(--orange); }
.tooth.is-no::after { content: ""; position: absolute; left: 50%; top: 42%; width: 7px; height: 7px; translate: -50% -50%; border-radius: 50%; background: var(--orange); }
.chart__msg { margin-top: 48px; min-height: 3.2em; color: var(--ink-2); }
.chart__msg b { color: var(--ink); }

.qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.q { display: grid; gap: 14px; padding: 20px 22px; border-radius: var(--r-lg); background: var(--cream-3); }
.q__text { display: flex; gap: 14px; align-items: baseline; }
.q__n { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--orange-deep); min-width: 18px; }
.q__text b { font-weight: 600; }
.q__text small { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.q fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 8px; }
.q legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.q label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 15px; cursor: pointer; background: var(--cream); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.q label:active { transform: scale(.97); }
.q input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; font: inherit; }
.q fieldset, .q legend { font: inherit; }
.q label:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
.q label:has(input[value="yes"]:checked) { background: var(--green); color: var(--on-green); box-shadow: none; }
.q label:has(input[value="no"]:checked) { background: transparent; color: var(--orange-deep); box-shadow: inset 0 0 0 2px var(--orange); }
.result { padding: 28px; border-radius: var(--r-lg); background: var(--glow), var(--green); color: var(--on-green); animation: dental-up .6s var(--ease); }
@keyframes dental-up { from { transform: translateY(16px); } }
.result h3 { color: var(--on-green); }
.result h3 em { font-style: italic; color: var(--orange-lift); }
.result p { margin-top: 10px; color: var(--on-green-2); }
.result .acts { margin-top: 20px; }
.result .btn--solid, .care .btn--solid { background: var(--orange-lift); border-color: var(--orange-lift); color: var(--ink); }
@media (min-width: 720px) { .q { grid-template-columns: 1fr auto; align-items: center; } }
@media (min-width: 960px) {
  .checkup__grid { grid-template-columns: .9fr 1.1fr; gap: 28px 64px; }
  .checkup__side { position: sticky; top: 100px; grid-row: span 2; }
  .result { grid-column: 2; }
}

/* ----------------------------------------------------- the three promises -- */
.promises { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); padding: clamp(36px, 6vw, 88px); background: var(--green); color: var(--on-green); }
.promises::before { content: ""; position: absolute; inset: 0; background: var(--glow); z-index: -1; }
.promises h2 { margin-top: 16px; max-width: 15ch; }
.promises h2 em, .promises h3 em { color: var(--orange-lift); }
.promises__cols { display: grid; gap: 36px; margin-top: clamp(40px, 6vw, 72px); }
.promises__cols > div { padding-top: 24px; border-top: 1px solid var(--line-green); }
.promises h3 em { font-style: italic; }
.promises p { margin-top: 12px; color: var(--on-green-2); }
@media (min-width: 860px) { .promises__cols { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* -------------------------------------------------------- the four visits -- */
.visits { display: grid; gap: 40px; }
.visits h2 { max-width: 10ch; }
.visits .lead { margin-top: 18px; }
.appt { border-radius: var(--r-lg); background: var(--cream-3); overflow: hidden; }
.appt__row { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.appt__row:last-child { border-bottom: 0; }
.appt__row > span { font-size: var(--t-small); font-weight: 500; color: var(--orange-deep); padding-top: 3px; }
.appt__row b { display: block; font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.15; }
.appt__row p { margin-top: 4px; color: var(--ink-2); }
@media (min-width: 960px) { .visits { grid-template-columns: .8fr 1.2fr; } }
@media (max-width: 520px) { .appt__row { grid-template-columns: 1fr; gap: 6px; } }

/* ----------------------------------------------------------- who it's for -- */
.who { position: relative; overflow: hidden; text-align: center; }
.who h2 { max-width: 15ch; margin-inline: auto; position: relative; }
.who .lead { margin: 22px auto 0; position: relative; }
.who__word { position: absolute; left: 50%; top: 40%; translate: -50% -50%; margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(120px, 22vw, 340px); line-height: 1; color: var(--cream-2); white-space: nowrap; pointer-events: none; }

.faqs { display: grid; gap: 32px; }
@media (min-width: 960px) { .faqs { grid-template-columns: .8fr 1.2fr; } }

/* ------------------------------------------------------------ inner pages -- */
.cards { display: grid; gap: 14px; }
.card { padding: 26px; border-radius: var(--r-lg); background: var(--cream-3); }
.card h3 { font-size: clamp(24px, 1vw + 18px, 30px); }
.card p { margin-top: 10px; color: var(--ink-2); }
.cards--quiet .card { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(4, 1fr); } }

.care { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 36px; border-radius: var(--r-xl); padding: clamp(32px, 6vw, 80px); background: var(--green); color: var(--on-green); }
.care::before { content: ""; position: absolute; inset: 0; background: var(--glow); z-index: -1; }
.care h2 { margin-top: 16px; }
.care h2 em { color: var(--orange-lift); }
.care .lead { margin-top: 18px; color: var(--on-green-2); }
.care ul { list-style: none; margin: 0; padding: 0; display: grid; }
.care li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line-green); }
.care li b { font-weight: 600; }
.care li span { color: var(--on-green-2); }
@media (min-width: 960px) { .care { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }

.pages { display: grid; gap: 14px; }
.pages__item { position: relative; padding: 28px; border-radius: var(--r-lg); background: var(--cream-3); }
.pages__n { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--orange-deep); }
.pages__item h3 { margin-top: 14px; font-size: clamp(24px, 1vw + 18px, 30px); }
.pages__item p { margin-top: 10px; color: var(--ink-2); }
@media (min-width: 760px) { .pages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pages { grid-template-columns: repeat(3, 1fr); } }

.built { display: grid; gap: 32px; }
.built h2 { max-width: 12ch; }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; align-content: start; }
.pills li { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--cream-3); font-weight: 500; }
.pills li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
@media (min-width: 960px) { .built { grid-template-columns: .8fr 1.2fr; } }

/* ------------------------------------------------------------- our work -- */
.work { display: grid; gap: 40px; align-items: center; }
.work h2 { max-width: 11ch; }
.work .lead { margin-top: 18px; max-width: 40ch; }
.work__phones { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 32px); }
.work__item { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.work__item b { margin-top: 14px; font-weight: 600; }
.work__item span:last-child { color: var(--ink-2); font-size: 15px; }
.work__shot { display: block; overflow: hidden; aspect-ratio: 390 / 803; border: 7px solid #1d1b18; border-radius: 34px; background: #1d1b18; box-shadow: 0 30px 60px -30px rgba(35, 46, 38, .45); transition: transform .3s var(--ease); }
.work__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.work__item:hover .work__shot { transform: translateY(-4px); }
.work__item:nth-child(2) { margin-top: 48px; }
@media (min-width: 960px) { .work { grid-template-columns: .8fr 1.2fr; } }
@media (prefers-reduced-motion: reduce) { .work__shot { transition: none; } .work__item:hover .work__shot { transform: none; } }