/* ============================================================
   TEETH TRIP v3 — "Large Print, measured".
   One typeface, large sizes, no cards, no shadows, no gradients.
   Every colour is a token; every price, day count and clock time
   is rendered from assets/engine.js, never typed into the markup.
   Design system: Teeth Trip v2 (tokens.json).
   ============================================================ */

/* ---------- the one family, self-hosted ---------- */
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/AtkinsonHyperlegibleNext-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/AtkinsonHyperlegibleNext-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- tokens ---------- */
:root{
  --ground:#F9F7F7; --surface:#FFFFFF; --panel:#DBE2EF;
  --ink:#112D4E; --ink-secondary:#3A5478; --border:#5F84B3;
  --brand:#3F72AF; --on-brand:#FFFFFF; --on-ink:#F9F7F7;
  --confirmed:#3F72AF; --error:#B3331D; --table-rule:#DBE2EF;

  --f:'Atkinson Hyperlegible Next','Atkinson Hyperlegible',system-ui,sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  --s12:48px; --s16:64px; --s24:96px;

  --r-control:10px; --r-panel:16px; --r-pill:999px;
  --measure:680px; --measure-wide:880px; --page:1120px;
  --gutter:16px; --section:var(--s16);

  color-scheme:light;
  --backdrop-ink:#C9D5E6; --backdrop-ink2:#DDE5F0;
  /* How much ground a frosted section panel keeps. By day it is solid: Harbour Blue on Cloud is
     4.64:1 with nothing to spare, and any of the city showing through takes it under 4.5. By
     night the panel lets 18 % through, where Cloud on Deep Navy has contrast to burn. */
  --glass:100%;
}
@media (min-width:768px){ :root{ --gutter:24px; --section:var(--s24); } }

@media (prefers-color-scheme:dark){
  :root:not([data-theme="day"]){
    --ground:#112D4E; --surface:#17395F; --panel:#1E4470;
    --ink:#F9F7F7; --ink-secondary:#DBE2EF; --border:#6F93BF;
    --brand:#8FB4E3; --on-brand:#112D4E; --on-ink:#112D4E;
    --confirmed:#8FB4E3; --error:#F0917A; --table-rule:#2A4A70;
    color-scheme:dark;
      --backdrop-ink:#3E5F86; --backdrop-ink2:#27436A;
      --glass:82%;
}
}
:root[data-theme="night"]{
  --ground:#112D4E; --surface:#17395F; --panel:#1E4470;
  --ink:#F9F7F7; --ink-secondary:#DBE2EF; --border:#6F93BF;
  --brand:#8FB4E3; --on-brand:#112D4E; --on-ink:#112D4E;
  --confirmed:#8FB4E3; --error:#F0917A; --table-rule:#2A4A70;
  color-scheme:dark;
  --backdrop-ink:#3E5F86; --backdrop-ink2:#27436A;
  --glass:82%;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--f);font-size:20px;font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (min-width:768px){ body{font-size:21px} }
img{max-width:100%;height:auto;display:block}
::selection{background:var(--brand);color:var(--on-brand)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sr-focus:focus{position:fixed;top:var(--s4);left:var(--s4);z-index:100;width:auto;height:auto;clip:auto;
  padding:var(--s3) var(--s6);background:var(--ink);color:var(--on-ink);border-radius:var(--r-control)}

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
.measure-wide{max-width:var(--measure-wide)}

/* ---------- type roles ---------- */
h1,h2,h3{font-weight:700;line-height:1.15;text-wrap:balance}
.display{font-size:40px;line-height:1.15;font-weight:700;max-width:16ch}
.heading{font-size:34px;line-height:1.15;font-weight:700}
.subheading{font-size:26px;line-height:1.25;font-weight:700}
.small{font-size:18px;line-height:1.5;color:var(--ink-secondary)}
.money-large{font-size:28px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.money{font-size:20px;line-height:1.4;font-weight:500;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
@media (min-width:768px){
  .display{font-size:64px;line-height:1.05}
  .heading{font-size:52px;line-height:1.1}
  .subheading{font-size:34px;line-height:1.2}
  .money-large{font-size:36px;line-height:1.15}
  .money{font-size:21px}
}
p{max-width:var(--measure);text-wrap:pretty}
a{color:var(--brand);font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--ink)}
strong{font-weight:700}

/* ---------- header ---------- */
.top{padding-block:var(--s6)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4)}
/* the WhatsApp pill and the two social buttons sit together at the right; on a phone the
   group wraps under the wordmark as one row, still at the right */
.reach{display:flex;align-items:center;gap:var(--s2);margin-inline-start:auto;flex:none}
.social{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;flex:none;
  border-radius:50%;background:var(--ink);color:var(--on-ink);text-decoration:none;
  transition:background-color .12s,color .12s}
.social:hover{background:var(--brand);color:var(--on-brand)}
.social svg{width:26px;height:26px;display:block}
.logo{display:block;flex:none;width:150px;height:59px;text-decoration:none;
  background:url(brand/wordmark.svg) left center/contain no-repeat}
@media (min-width:768px){ .logo{width:194px;height:76px} }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="day"]) .logo{background-image:url(brand/wordmark-night.svg)}
}
:root[data-theme="night"] .logo{background-image:url(brand/wordmark-night.svg)}

/* ---------- the pill ---------- */
.pill{display:inline-flex;align-items:center;gap:var(--s3);min-height:56px;padding:0 var(--s6) 0 20px;
  border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);
  font-size:20px;font-weight:500;line-height:1;text-decoration:none;
  transition:background-color .12s,color .12s;flex:none}
.pill:hover{background:var(--brand);color:var(--on-brand)}
/* the presence dot sits on the ink pill, so it takes --on-ink: brand never sits on ink */
.pill .dot{width:10px;height:10px;border-radius:50%;background:var(--on-ink);flex:none}
.pill svg{width:22px;height:22px;flex:none}
.pill .lbl{white-space:nowrap}
@media (max-width:479px){ .pill{padding:0 20px 0 16px;gap:var(--s2);font-size:18px} }
/* The pill, the two social buttons and the language menu come to more than a phone's width, and
   overflow-x:hidden would quietly crop the last of them rather than show it. Let the group wrap
   onto a second line instead. The max-width matters: .reach is flex:none, so without it the group
   is sized to its own content and never has a reason to wrap. Nothing shrinks below 44px and no
   label goes under 18px. */
@media (max-width:599px){ .reach{flex-wrap:wrap;justify-content:flex-end;max-width:100%} }
.pill-fixed{position:fixed;inset-inline-end:var(--gutter);bottom:var(--gutter);z-index:60;
  visibility:hidden;opacity:0;transition:opacity .12s}
.pill-fixed.on{visibility:visible;opacity:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 var(--s6);
  border-radius:var(--r-control);font-family:var(--f);font-size:20px;font-weight:500;line-height:1;
  cursor:pointer;text-decoration:none;transition:background-color .12s,color .12s,border-color .12s}
.btn-primary{background:var(--brand);color:var(--on-brand);border:2px solid var(--brand)}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.btn-outline{background:transparent;color:var(--ink);border:2px solid var(--border)}
.btn-outline:hover{background:var(--panel);color:var(--ink)}
/* on the panel the border token only reaches 2.97:1, under the 3:1 a control needs: use --ink */
.panel .btn-outline{border-color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ---------- sections ---------- */
/* Sections sit inside .wrap, so this must not be a child selector on main. Each one is a frosted
   panel over the backdrop: translucent ground and a blur, no border and no shadow, so the
   system's "no cards" rule bends as little as it can. The 2px rule that used to separate
   sections is gone; the strip of city showing between the panels does that job now. The plain
   ground comes first so a browser without color-mix still gets a solid, readable panel. */
main .wrap>section,.sect{margin-top:var(--section);padding:var(--s6);border-radius:var(--r-panel);
  background:var(--ground);background:color-mix(in srgb,var(--ground) var(--glass),transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)}
main .wrap>section:first-child,.sect.first{margin-top:0}
@media (min-width:768px){ main .wrap>section,.sect{padding:var(--s8)} }
/* On a phone the blur is the dearest thing on the screen: every panel in view is re-blurred for
   each frame the page moves. A lighter blur keeps the frosted look at a fraction of the cost,
   and by day, where --glass makes the panel solid, the blur has nothing to show through and is
   dropped altogether. The translucency itself is untouched. */
@media (max-width:599px){
  main .wrap>section,.sect{-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1)}
  :root[data-theme="day"] main .wrap>section,:root[data-theme="day"] .sect{-webkit-backdrop-filter:none;backdrop-filter:none}
}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.stack-lg{display:flex;flex-direction:column;gap:var(--s6)}

/* ---------- hero + intake ---------- */
.hero{padding-top:var(--s8);padding-bottom:var(--s4)}
.hero .display{margin-bottom:var(--s6)}
.intake{max-width:var(--measure);display:flex;flex-direction:column;gap:var(--s3)}
.intake label{font-size:18px;line-height:1.5;color:var(--ink-secondary)}
.field{display:block;width:100%;min-height:96px;padding:20px var(--s6);
  border:2px solid var(--border);border-radius:var(--r-control);
  background:var(--surface);color:var(--ink);
  font-family:var(--f);font-size:22px;font-weight:400;line-height:1.4;resize:vertical}
@media (min-width:768px){ .field{font-size:24px} }
/* placeholders sit back at 55 %, so a hint reads as a hint and not as something already typed */
.field::placeholder{color:var(--ink-secondary);opacity:.55;transition:opacity .2s}
.field.ph-fade::placeholder{opacity:0}
.field:focus{outline:3px solid var(--brand);outline-offset:2px}
/* keyword chips under the field: a treatment each, dropped into the sentence on click */
/* Two rows deep even when a deal fits in one, so the band does not change height every six
   seconds and nudge the page (scroll anchoring fires scroll events for every nudge). */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);min-height:96px}
.chips[hidden]{display:none}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);border-radius:var(--r-pill);
  border:2px solid var(--brand);background:transparent;color:var(--brand);
  font-family:var(--f);font-size:18px;font-weight:500;line-height:1;cursor:pointer;
  transition:background-color .12s,color .12s,border-color .12s,opacity .2s}
.chip:hover,.chip:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
/* while the six are fading out they are not a target: nothing is clicked by accident */
.chips.swap .chip{opacity:0;pointer-events:none}
/* the one button, at the right edge of the bar, on a phone too */
.intake-actions{display:flex;justify-content:flex-end}

/* ---------- the Range Bracket ---------- */
.bracket{display:flex;align-items:center;gap:var(--s4)}
.bracket .rail{flex:1;display:flex;align-items:center;min-width:64px}
.bracket .tick{width:3px;height:16px;background:var(--ink);flex:none}
.bracket .bar{flex:1;height:2px;background:var(--brand);transform-origin:50% 50%}
.bracket .money-large{color:var(--ink)}
.zero .money-large,.zero .tick{color:var(--confirmed)}
.zero .tick{background:var(--confirmed)}
.zero .bar{background:var(--confirmed)}
.zero{padding-top:var(--s6);border-top:2px solid var(--ink);display:flex;flex-direction:column;gap:var(--s3)}
.zero p{font-size:20px;line-height:1.55;color:var(--ink)}
@media (min-width:768px){ .zero p{font-size:21px} }

/* ---------- the trip line ---------- */
.trip{max-width:var(--measure-wide);display:flex;flex-direction:column;gap:var(--s2)}
.trip .line{display:flex;align-items:center;height:24px}
.trip .dot{width:12px;height:12px;border-radius:50%;background:var(--ink);flex:none}
.trip .seg{flex:1;height:2px;background:var(--ink);min-width:12px}
.trip .gap{flex:0 0 40%;display:flex;align-items:center;position:relative}
.trip .gap .tick{width:3px;height:16px;background:var(--ink);flex:none}
.trip .gap .bar{flex:1;height:2px;background:var(--brand)}
.trip .gap .lbl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--ground);padding:0 var(--s3);
  font-size:18px;font-weight:500;line-height:1.4;font-variant-numeric:tabular-nums lining-nums;
  color:var(--ink);white-space:nowrap}
@media (min-width:768px){ .trip .gap .lbl{font-size:21px} }
.panel .trip .gap .lbl{background:var(--panel)}
.trip .labels{display:grid;gap:var(--s2);font-size:18px;line-height:1.5;color:var(--ink-secondary)}
.trip .labels b{display:block;font-size:20px;font-weight:500;font-variant-numeric:tabular-nums lining-nums;color:var(--ink)}
.trip .labels.two{grid-template-columns:30% 40% 30%}
.trip .labels.two>:nth-child(2){text-align:center}
.trip .labels.two>:last-child{text-align:end}
.trip .labels.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.trip .labels.four>:nth-child(2),.trip .labels.four>:nth-child(3){text-align:center}
.trip .labels.four>:last-child{text-align:end}
@media (max-width:559px){
  .trip .labels.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trip .labels.four>:nth-child(2){text-align:end}
  .trip .labels.four>:nth-child(3){text-align:start}
}

/* ---------- panels ---------- */
.panel{background:var(--panel);border-radius:var(--r-panel);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s6);max-width:var(--measure)}
@media (min-width:768px){ .panel{padding:var(--s8)} }
.panel.wide{max-width:var(--measure-wide)}
.ticks{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.ticks li{display:flex;gap:var(--s3);align-items:flex-start;max-width:none}
.ticks svg{width:24px;height:24px;flex:none;margin-top:4px}
.ticks svg path{stroke:var(--confirmed)}

/* ---------- not-ours rows ---------- */
.notours{display:flex;flex-direction:column;gap:var(--s1);font-size:18px;line-height:1.5;color:var(--ink-secondary)}
.notours div{display:flex;justify-content:space-between;gap:var(--s4);max-width:none}
.notours b{font-weight:500;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);white-space:nowrap}

/* ---------- price table ---------- */
.tablewrap{max-width:var(--measure-wide);overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:min(100%,520px)}
caption{text-align:start;padding-bottom:var(--s3);font-size:18px;line-height:1.5;color:var(--ink-secondary);max-width:var(--measure)}
th{text-align:start;padding:0 var(--s4) var(--s3) 0;font-size:18px;font-weight:500;line-height:1.5;
  color:var(--ink-secondary);border-bottom:2px solid var(--ink)}
td{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:2px solid var(--table-rule);
  font-size:20px;line-height:1.4;vertical-align:top}
@media (min-width:768px){ td{font-size:21px} }
th.num,td.num{text-align:right;padding-right:0}
td.num{font-weight:500;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
td.trip-cell{font-size:18px;color:var(--ink-secondary);white-space:nowrap}
tr.notours-row td{color:var(--ink-secondary);font-size:18px;border-bottom:0;padding-top:var(--s3);padding-bottom:var(--s1)}
tr.notours-row td.num{color:var(--ink)}
@media (max-width:559px){ td.trip-cell{white-space:normal} }

/* ---------- conversation ---------- */
.convo{display:flex;flex-direction:column;gap:var(--s4);max-width:var(--measure)}
.msg{padding:var(--s4) var(--s6);border-radius:var(--r-panel);font-size:20px;line-height:1.55;
  white-space:pre-wrap;max-width:88%}
@media (min-width:768px){ .msg{font-size:21px} }
.msg.me{align-self:flex-end;background:var(--ink);color:var(--on-ink)}
.msg.bot{align-self:flex-start;background:var(--panel);color:var(--ink)}
.msg.bot strong{font-weight:700}
.msg.waiting{align-self:flex-start;background:transparent;border:2px solid var(--border);color:var(--ink-secondary)}
.msg.failed{align-self:flex-start;background:transparent;border:2px solid var(--error);color:var(--error)}

/* The reply bar, which is what makes this read as one conversation rather than an answer with a
   comment under it: the transcript runs above it and you keep typing here. It appears with the
   first reply, so an untouched page is still just the hero bar. One line, because a follow-up is
   a sentence, not the opening brief. */
.followup{display:flex;gap:var(--s3);align-items:stretch;max-width:var(--measure);margin-top:var(--s6)}
.followup[hidden]{display:none}
.field-inline{flex:1;min-width:0;min-height:56px;padding:0 20px;
  border:2px solid var(--border);border-radius:var(--r-control);
  background:var(--surface);color:var(--ink);
  font-family:var(--f);font-size:20px;font-weight:400;line-height:1.4}
@media (min-width:768px){ .field-inline{font-size:21px} }
.field-inline::placeholder{color:var(--ink-secondary);opacity:.55}
.field-inline:focus{outline:3px solid var(--brand);outline-offset:2px}
.followup .btn{flex:none}
/* below 480px the Send button takes the full width rather than squeezing the box it sits beside */
@media (max-width:479px){ .followup{flex-direction:column} .followup .btn{width:100%} }

/* ---------- photographs ---------- */
figure{display:flex;flex-direction:column;gap:var(--s3);margin:0}
figure img{border-radius:var(--r-control);border:2px solid var(--border);width:100%}
.slot{border-radius:var(--r-panel);background:var(--panel);display:flex;align-items:flex-end;
  padding:var(--s6);font-size:18px;line-height:1.5;color:var(--ink-secondary)}
.slot.r32{aspect-ratio:3/2}
.slot.r45{aspect-ratio:4/5}
figcaption{font-size:18px;line-height:1.5;color:var(--ink-secondary)}
.figrow{display:grid;gap:var(--s6);max-width:var(--measure-wide)}
@media (min-width:640px){ .figrow.two{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- forms ---------- */
.formstack{display:flex;flex-direction:column;gap:var(--s4);max-width:var(--measure)}
.formstack label.lb{display:flex;flex-direction:column;gap:var(--s2);font-size:18px;line-height:1.5;color:var(--ink-secondary)}
.formstack input[type=email],.formstack input[type=text]{
  width:100%;padding:var(--s4) 20px;border:2px solid var(--border);border-radius:var(--r-control);
  background:var(--surface);color:var(--ink);font-family:var(--f);font-size:20px;line-height:1.4}
.formstack textarea{
  width:100%;min-height:128px;padding:var(--s4) 20px;border:2px solid var(--border);border-radius:var(--r-control);
  background:var(--surface);color:var(--ink);font-family:var(--f);font-size:20px;line-height:1.4;resize:vertical}
.formstack textarea::placeholder{color:var(--ink-secondary);opacity:.55}
.formstack input:focus,.formstack textarea:focus{outline:3px solid var(--brand);outline-offset:2px}
.check{display:flex;gap:var(--s3);align-items:flex-start;font-size:18px;line-height:1.5;color:var(--ink)}
.check input{width:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--brand)}
.formmsg{font-size:18px;line-height:1.5;min-height:1.5em}
.formmsg.ok{color:var(--confirmed)}
.formmsg.bad{color:var(--error)}

/* ---------- footer ---------- */
.foot{margin-top:var(--section);padding-top:var(--s6);padding-bottom:var(--s16);border-top:2px solid var(--ink)}
.foot .wrap{display:flex;flex-direction:column;gap:var(--s6)}
.foot ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.foot a{font-size:18px;font-weight:400;color:var(--ink)}
.foot a:hover{color:var(--brand)}
.foot .fact{font-size:18px;line-height:1.5;color:var(--ink);max-width:var(--measure)}
.foot .company{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);font-size:18px;line-height:1.5;color:var(--ink-secondary)}

/* ---------- the one orchestrated moment ---------- */
@media (prefers-reduced-motion:no-preference){
  .draw .bar{animation:grow .48s cubic-bezier(.2,.8,.2,1) both}
  .draw .tick{animation:appear .16s linear .32s both}
  .draw .money-large{animation:appear .2s linear .4s both}
  .draw.d1 .bar{animation-delay:.2s}
  .draw.d1 .tick{animation-delay:.52s}
  .draw.d2 .bar{animation-delay:.4s}
  .draw.d2 .tick{animation-delay:.72s}
  .draw.d2 .money-large{animation-delay:.8s}
}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes appear{from{opacity:0}to{opacity:1}}

/* ---------- 3D scenes (three.js; assets/scene.js draws into .scene) ---------- */
.hero-grid{display:grid;gap:var(--s8);align-items:center}
@media (min-width:960px){ .hero-grid{grid-template-columns:minmax(0,1fr) minmax(320px,42%)} }
.hero-scene{aspect-ratio:4/3}
.scene{border-radius:var(--r-panel);background:var(--panel)}
.scene .scene-fallback-art{display:none;position:absolute;inset:0;width:100%;height:100%;color:var(--ink)}
.scene.scene-fallback .scene-fallback-art{display:block}

/* The home hero sits straight on the backdrop, with no panel: the headline and the bar read at
   4.5:1 over the muted city (checked), and a frosted box here would only cover the one thing
   the page opens on. */
.hero-band{position:relative}
.hero-band .band-inner{padding-block:var(--s16)}
.hero-band .display{margin-bottom:var(--s6)}
/* the field's label sits on the bare scene too; the secondary ink fails over the darker faces
   of the city by day, so here it takes the full ink */
.hero-band .intake label{color:var(--ink)}
/* Over the scene the chips take the ink, not the brand: brand on the backdrop city is only
   2.6:1, and a keyword you cannot read is not a keyword. */
.hero-band .chip{color:var(--ink);border-color:var(--ink)}
.hero-band .chip:hover,.hero-band .chip:focus-visible{background:var(--ink);color:var(--on-ink)}

/* Empty until someone asks: no frosted panel around nothing. app.js marks it live with the
   first turn, and only then does it take the section treatment. */
.answer-slot:not(.live){padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.answer-slot>div:not(:empty){margin-top:var(--s8)}
.answer-slot.live>div:not(:empty):first-child{margin-top:0}

/* The marketing blocks carried over from the live site. The badges are statements, not
   controls, so they are list items rather than buttons: nothing here is clickable. */
/* The molar sits beside the badges. Below 860px it drops under them, capped so a square
   scene never eats a phone screen. */
.pitch{display:grid;gap:var(--s8);align-items:start}
@media (min-width:860px){ .pitch{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s12);align-items:center} }
.pitch-copy{display:flex;flex-direction:column;gap:var(--s6);min-width:0}
.pitch-scene{width:100%;max-width:300px;justify-self:start}
.lead{font-size:24px;line-height:1.45;font-weight:500;max-width:var(--measure)}
@media (min-width:768px){ .lead{font-size:28px} }
.badges{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s3)}
.badges li{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);
  border:2px solid var(--border);border-radius:var(--r-pill);
  font-size:20px;font-weight:500;line-height:1.2;color:var(--ink)}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--s8)}
@media (min-width:768px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8) var(--s12)} }
.steps li{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.steps .hd{display:flex;align-items:baseline;gap:var(--s3)}
.steps .n{font-size:20px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums lining-nums}
.steps b{font-size:24px;line-height:1.25;font-weight:700}
.steps p{margin:0;font-size:20px;line-height:1.55;color:var(--ink-secondary);max-width:42ch}
.safe{margin:0;display:grid;gap:var(--s8)}
@media (min-width:768px){ .safe{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s12)} }
.safe>div{min-width:0}
.safe dt{font-size:24px;line-height:1.25;font-weight:700;margin-bottom:var(--s2)}
.safe dd{margin:0;font-size:20px;line-height:1.55;color:var(--ink-secondary)}

/* At reading width the step and column titles take the next size up, and their copy
   matches body text, so the marketing blocks sit in the same scale as everything else. */
@media (min-width:768px){
  .steps b,.safe dt{font-size:30px;line-height:1.2}
  .steps p,.safe dd{font-size:21px}
}

/* ---------- the backdrop ---------- */
/* The Bosphorus runs behind the whole page and stays put while the page scrolls over it. It is
   fixed to the viewport rather than painted per section, so there is one scene, one WebGL
   context and one set of lanes for the boats and aircraft. The header and footer sit on solid
   ground above it; everything between them reads through the frosted section panels. The
   muted ink keeps the city a backdrop and not a subject. This rule follows .scene on purpose:
   scene.js adds that class to every mount, and this one has to win. */
/* Sized to the LARGE viewport, not the visible one: on a phone the address bar slides away as
   the page scrolls, and a box that followed it would grow and shrink with every flick, re-fitting
   the camera each time. At 100lvh the backdrop is the full screen from the start and simply has
   its bottom edge under the bar while the bar is there. 100vh is the same thing on browsers
   without the unit. */
.backdrop{position:fixed;inset:0 0 auto;z-index:0;width:auto;height:100vh;height:100lvh;aspect-ratio:auto;
  border-radius:0;background:var(--ground);pointer-events:none;
  --ink:var(--backdrop-ink);--ink-secondary:var(--backdrop-ink2);--brand:var(--backdrop-ink)}
.top,.foot{position:relative;z-index:2;background:var(--ground)}
main{position:relative;z-index:1}
/* Until scene.js adds .scene to the mount (or for good, with scripts off) nothing in scene.css
   hides the inline fallback drawing, which would sit at the top left as a 300×150 box. Until
   then it is the backdrop, full size; once the class arrives, scene.css decides. */
.backdrop:not(.scene) .scene-fallback-art{display:block;position:absolute;inset:0;width:100%;height:100%;color:var(--ink)}
@media print{ .backdrop{display:none} }

/* ---------- the language menu ---------- */
/* A button dressed like the pill beside it, wearing the flag and the name of the language in
   use, with a listbox under it. A native select would be less code, but it cannot show a flag,
   and the emoji ones come out as letter pairs on Windows. The flags are symbols in
   assets/flags.svg, the one file on the site where hex colours belong. Logical properties
   throughout: the list hangs off the inline end, so in Arabic it still sits under the button. */
.langwrap{position:relative;display:inline-flex;flex:none}
.lang{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:var(--s3);
  min-height:56px;padding-block:0;padding-inline:16px 44px;
  border:2px solid var(--ink);border-radius:var(--r-pill);background:var(--ground);color:var(--ink);
  font-family:var(--f);font-size:18px;font-weight:500;line-height:1;cursor:pointer}
.lang:hover{background:var(--panel)}
.lang:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.lang .lang-name{white-space:nowrap}
.langwrap .chev{position:absolute;inset-inline-end:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);
  pointer-events:none;color:var(--ink)}
/* the flag is a 3:2 box; the hairline ring in the text colour gives a white-heavy flag an edge */
.flag{width:24px;height:16px;flex:none;display:block;border-radius:3px;overflow:hidden;
  outline:1px solid color-mix(in srgb,currentColor 20%,transparent);outline-offset:-1px}
/* The list hangs under the button, above the rest of the header. Its edge is the same 2px ink
   rule every control has: the system draws no shadows, and the list is no exception. */
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + var(--s2));z-index:6;min-width:100%;
  margin:0;padding:var(--s2);list-style:none;
  border:2px solid var(--ink);border-radius:var(--r-panel);background:var(--ground);color:var(--ink)}
.lang-menu[hidden]{display:none}
.lang-menu li{display:flex;align-items:center;gap:var(--s3);min-height:48px;padding-inline:var(--s3);
  border-radius:var(--r-control);font-size:18px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer}
.lang-menu li:hover,.lang-menu li:focus-visible{background:var(--panel)}
.lang-menu li:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.lang-menu [aria-selected="true"]{font-weight:700}
/* the tick keeps its room on every row, so the list is the same width whichever is chosen */
.lang-menu .mark{width:24px;height:24px;flex:none;margin-inline-start:auto;visibility:hidden}
.lang-menu [aria-selected="true"] .mark{visibility:visible}

/* ---------- partner clinics ---------- */
/* One row that scrolls sideways and snaps card to card. Each card is a panel; the map inside it
   is a box that stays empty until the visitor asks, so an untouched page makes no request to
   Google at all. */
.clinics{list-style:none;padding:var(--s1) var(--s1) var(--s4);margin:0 calc(-1 * var(--s1));
  display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.clinic{flex:0 0 min(86vw,360px);scroll-snap-align:start;min-width:0;
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s6);border-radius:var(--r-panel);background:var(--panel)}
/* the map is the card's picture: first, edge to edge, always there */
.clinic .map{margin:calc(-1 * var(--s6)) calc(-1 * var(--s6)) var(--s2);border-radius:var(--r-panel) var(--r-panel) 0 0}
.clinic .addr a{color:var(--ink);font-weight:500}
.clinic h3{font-size:22px;line-height:1.25;font-weight:700;text-wrap:balance}
@media (min-width:768px){ .clinic h3{font-size:24px} }
.clinic .rating{display:flex;align-items:center;gap:var(--s2);font-size:20px;font-weight:700;
  font-variant-numeric:tabular-nums lining-nums;max-width:none}
.clinic .rating svg{width:22px;height:22px;flex:none;color:var(--brand)}
.clinic .rating small{font-size:18px;font-weight:400;color:var(--ink-secondary)}
.clinic .addr{font-size:18px;line-height:1.5;color:var(--ink-secondary)}
.clinic .map{aspect-ratio:4/3;border-radius:var(--r-control);overflow:hidden;background:var(--surface)}
.clinic .map[hidden]{display:none}
.clinic .map iframe{width:100%;height:100%;border:0;display:block}
.clinic .acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:auto}
/* the buttons may wrap their label: "Appeler +90 553 593 01 10" is wider than a phone-width card,
   and a gap keeps the word and the number apart, since inline-flex drops the space between them */
.clinic .acts .btn{min-height:48px;height:auto;padding:var(--s2) var(--s4);font-size:18px;gap:var(--s2);
  white-space:normal;text-align:center;max-width:100%}
/* on the panel the border token misses 3:1; the outline takes the ink, as on every panel */
.clinic .btn-outline{border-color:var(--ink)}
/* six cards never fit the 1120px page, so the hint stays at every width */
.clinics-hint{font-size:18px;color:var(--ink-secondary)}

/* ---------- the header stays ---------- */
/* Sticky, on the ground, above the panels. On a phone it wraps to two rows, which is too much
   to carry down the page, so once the page has scrolled the social buttons and the language
   menu step out and the wordmark shrinks: the pill and the theme button ride along. */
.top{position:sticky;top:0;z-index:5}
@media (max-width:599px){
  .scrolled .top{padding-block:var(--s3)}
  .scrolled .top .social,.scrolled .top .langwrap{display:none}
  .scrolled .logo{width:120px;height:47px}
}

/* ---------- day and night, by choice ---------- */
.theme{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;flex:none;padding:0;
  border:2px solid var(--ink);border-radius:50%;background:var(--ground);color:var(--ink);cursor:pointer;
  transition:background-color .12s}
.theme:hover{background:var(--panel)}
.theme:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.theme svg{width:24px;height:24px;display:block}
/* the button offers the other theme: a sun by night, a moon by day */
.theme .sun{display:none}
:root[data-theme="night"] .theme .sun{display:block}
:root[data-theme="night"] .theme .moon{display:none}

/* ---------- photographs ---------- */
/* Four, chosen by Can on 30 September 2026, licensed for use without credit (Unsplash and Pexels
   licences; the photographers are named in README.md). Each sits beside the copy it belongs
   to, in the panel's own radius, with no border. */
.photo{margin:0;border-radius:var(--r-panel);overflow:hidden;background:var(--panel)}
.photo img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.photo.l{aspect-ratio:4/3}
.photo.p{aspect-ratio:3/4}
.with-photo{display:grid;gap:var(--s8);align-items:start;min-width:0}
.with-photo>*{min-width:0}
@media (min-width:860px){
  .with-photo{grid-template-columns:minmax(0,1fr) 380px;align-items:center}
  .with-photo.p{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
}
.hero-grid .photo{max-width:none}

/* ---------- once a conversation starts ---------- */
/* The opening bar has done its job: it steps aside and the chat is the first thing under the
   header, the reply bar its only input. On the inner pages the planner's bar does the same. */
.chatting .hero-band{display:none}
.chatting #plan .intake{display:none}
.chatting .answer-slot.live{margin-top:var(--s8)}
.answer-slot{scroll-margin-top:140px}

/* ---------- the footer's buttons ---------- */
.foot-social{display:flex;gap:var(--s2)}
/* .foot a paints every footer link ink; on an ink button that hid the icon, so the buttons showed
   blank. The button keeps its own contrast pair here, at higher specificity than .foot a. */
.foot .social{color:var(--on-ink)}
.foot .social:hover{color:var(--on-brand)}

/* ---------- right to left ---------- */
/* Arabic flips the page with dir="rtl". Nearly everything follows on its own because the layout
   is flex and grid with logical properties; these are the few places a physical side was named. */
[dir=rtl] .logo{background-position:right center}
/* the trip-line gap label is placed with a physical left:50% and translate(-50%,-50%), which
   centres it in either direction; it needs no RTL override (one was tried, and it pushed the
   label a full width to the right) */