/* ============================================================
   AURORA DENTAL STUDIO — BASE
   Design system: tokens, reset, typography, grid, utilities
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Palette — white + light blue, sparingly deployed */
  --paper:      #ffffff;
  --bone:       #f4f8fb;
  --mist:       #e9f3f9;
  --ice:        #d5eaf7;
  --aurora:     #4bbbe8;
  --aurora-lit: #6fcbf0;
  --deep:       #1188c4;
  --abyss:      #0d5f8d;

  --ink:        #0a1922;
  --ink-70:     #3c4f5a;
  --ink-45:     #6d818c;
  --ink-25:     #a3b4bd;
  --line:       #e0eaf1;
  --line-soft:  #eef4f8;

  /* Type */
  --display: "Bricolage Grotesque", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-mega:    clamp(3.4rem, 13vw, 13rem);
  --fs-display: clamp(2.9rem, 8.4vw, 8.2rem);
  --fs-h1:      clamp(2.4rem, 6vw, 5.4rem);
  --fs-h2:      clamp(1.9rem, 4.2vw, 3.6rem);
  --fs-h3:      clamp(1.35rem, 2.1vw, 1.95rem);
  --fs-h4:      clamp(1.1rem, 1.4vw, 1.3rem);
  --fs-lead:    clamp(1.02rem, 1.35vw, 1.28rem);
  --fs-body:    1.0425rem;
  --fs-sm:      0.905rem;
  --fs-xs:      0.795rem;
  --fs-label:   0.688rem;

  /* Space */
  --pad:     clamp(1.25rem, 4.2vw, 4.5rem);
  --gut:     clamp(1rem, 1.7vw, 1.75rem);
  --sec:     clamp(5rem, 12vh, 10.5rem);
  --sec-sm:  clamp(3.25rem, 7vh, 6rem);

  /* Motion */
  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-io:   cubic-bezier(.65,.05,.36,1);
  --e-soft: cubic-bezier(.33,1,.68,1);
  --t-fast: .28s;
  --t-mid:  .55s;
  --t-slow: .9s;

  --nav-h: 78px;
  --rail:  clamp(0px, 3.4vw, 58px);
  --maxw:  1680px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
  background:var(--paper);
}
body{
  font-family:var(--text);
  font-size:var(--fs-body);
  line-height:1.58;
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-feature-settings:"ss01","cv05","kern";
}
body.is-locked{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; background:var(--bone); }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:none; }
button{ cursor:pointer; }
ul,ol{ list-style:none; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--aurora); color:#fff; }
:focus-visible{ outline:2px solid var(--deep); outline-offset:3px; border-radius:2px; }
:focus:not(:focus-visible){ outline:none; }

/* Scrollbar */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--bone); }
::-webkit-scrollbar-thumb{ background:var(--ice); border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:var(--aurora); }

/* Lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- 3. TYPE ---------- */
.display,h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:300;
  line-height:.94;
  letter-spacing:-.035em;
  font-variation-settings:"opsz" 64;
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); letter-spacing:-.028em; line-height:1.06; }
h4{ font-size:var(--fs-h4); letter-spacing:-.02em; line-height:1.2; font-weight:400; }

.mega{ font-family:var(--display); font-size:var(--fs-mega); font-weight:200; line-height:.82; letter-spacing:-.05em; font-variation-settings:"opsz" 96; }
/* section headings — deliberately smaller than the page-level display sizes */
.dsp{ font-size:clamp(2.1rem, 5vw, 4.4rem); letter-spacing:-.042em; }
.lead{ font-size:var(--fs-lead); line-height:1.48; color:var(--ink-70); font-weight:350; letter-spacing:-.012em; }
.body-lg{ font-size:1.09rem; line-height:1.62; color:var(--ink-70); }
.muted{ color:var(--ink-45); }
.small{ font-size:var(--fs-sm); }
.xs{ font-size:var(--fs-xs); }

/* Label — the signature micro-type of the system */
.label{
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-45);
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.label--ink{ color:var(--ink); }
.label--blue{ color:var(--deep); }
.label .dot{ width:5px; height:5px; border-radius:50%; background:var(--aurora); flex:none; }
.idx{
  font-family:var(--display);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.08em;
  color:var(--ink-25);
  font-variation-settings:"opsz" 12;
}

.wm{ font-weight:200; }
.italic{ font-style:italic; }
.tight{ letter-spacing:-.045em; }
.blue{ color:var(--deep); }
.ink45{ color:var(--ink-45); }

/* Inline media chip inside headlines */
.chip-img{
  display:inline-block;
  vertical-align:middle;
  width:clamp(58px,7.4vw,132px);
  height:clamp(34px,4.1vw,72px);
  border-radius:999px;
  object-fit:cover;
  object-position:50% 38%;
  margin:0 .18em;
  transform:translateY(-.06em);
}

/* ---------- 4. LAYOUT ---------- */
.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.shell--wide{ max-width:1920px; }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut); }
.sec{ padding-block:var(--sec); position:relative; }
.sec--sm{ padding-block:var(--sec-sm); }
.sec--flush-t{ padding-top:0; }
.sec--flush-b{ padding-bottom:0; }
.bone{ background:var(--bone); }
.mist{ background:var(--mist); }
.night{ background:var(--ink); color:var(--paper); }
.night .lead,.night .muted{ color:rgba(255,255,255,.62); }
.night .label{ color:rgba(255,255,255,.5); }
.hr{ height:1px; background:var(--line); border:0; }
.night .hr{ background:rgba(255,255,255,.14); }

/* Section head: label left, title right — the recurring editorial pattern */
.shead{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:var(--gut);
  align-items:start;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.shead__aside{ display:flex; flex-direction:column; gap:1rem; }
.shead__t{ max-width:19ch; }
.shead__meta{ font-size:var(--fs-sm); color:var(--ink-45); max-width:34ch; }
.night .shead{ border-color:rgba(255,255,255,.14); }

/* ---------- 5. UTILITIES ---------- */
.flex{ display:flex; }
.between{ display:flex; justify-content:space-between; align-items:center; }
.center{ display:flex; align-items:center; }
.col{ display:flex; flex-direction:column; }
.wrap{ flex-wrap:wrap; }
.g1{ gap:.5rem } .g2{ gap:1rem } .g3{ gap:1.6rem } .g4{ gap:2.4rem } .g6{ gap:3.6rem }
.mt1{ margin-top:.6rem } .mt2{ margin-top:1.2rem } .mt3{ margin-top:2rem }
.mt4{ margin-top:3rem } .mt6{ margin-top:4.5rem } .mt8{ margin-top:6rem }
.mb2{ margin-bottom:1.2rem } .mb3{ margin-bottom:2rem } .mb4{ margin-bottom:3rem } .mb6{ margin-bottom:4.5rem }
.tc{ text-align:center } .tr{ text-align:right }
.rel{ position:relative } .ovh{ overflow:hidden }
.nowrap{ white-space:nowrap }
.mw-xs{ max-width:34ch } .mw-sm{ max-width:44ch } .mw-md{ max-width:58ch } .mw-lg{ max-width:72ch }
.full{ width:100% } .fit{ width:fit-content }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hide-mob{ display:revert }
.only-mob{ display:none }
.stack-sep > * + *{ border-top:1px solid var(--line); }

/* Aspect helpers */
.ar-1{ aspect-ratio:1/1 } .ar-45{ aspect-ratio:4/5 } .ar-34{ aspect-ratio:3/4 }
.ar-32{ aspect-ratio:3/2 } .ar-169{ aspect-ratio:16/9 } .ar-21{ aspect-ratio:2/1 }
.ar-23{ aspect-ratio:2/3 }
.cover{ width:100%; height:100%; object-fit:cover; }

/* Arch — signature silhouette, echoing the curve of the logo */
.arch{ border-radius:999px 999px 4px 4px; overflow:hidden; }
.arch-sm{ border-radius:180px 180px 4px 4px; overflow:hidden; }
.pill{ border-radius:999px; overflow:hidden; }
.soft{ border-radius:3px; overflow:hidden; }

@media (max-width:900px){
  .hide-mob{ display:none !important }
  .only-mob{ display:revert }
  .shead{ grid-template-columns:1fr; gap:1.5rem }
  /* Keep 12 tracks so inline `grid-column: 6/13` spans stay valid, and
     stack every child instead — dropping to 6 tracks pushed items into
     implicit columns and overflowed the page. */
  .grid{ grid-template-columns:repeat(12,1fr) }
  .grid > *{ grid-column:1 / -1 !important; }
}