/* ═══════════════════════════════════════════════
   MyMedi — მომავლის სტომატოლოგია
   Design tokens carried over from mymedi.ge
   ═══════════════════════════════════════════════ */

:root {
  --bg:       #0b0b0b;
  --bg-soft:  #121212;
  --bg-card:  #171717;
  --text:     #f6f6f2;
  --muted:    #b9b9b4;
  --gold:     #e8d37b;
  --gold-dim: #c9b45f;
  --line:     rgba(255, 255, 255, .12);
  --line-soft:rgba(255, 255, 255, .07);

  --ff: "Noto Sans Georgian", "Segoe UI", Arial, sans-serif;
  --ff-display: "Playfair Display", "Noto Sans Georgian", Georgia, serif;

  --r:   14px;
  --r-lg: 22px;
  --wrap: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  font-family: var(--ff);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(var(--wrap), calc(100% - 40px)); margin-inline: auto; }

/* Grid children default to min-width:auto, so a long <select> option or an
   unbreakable string can push a column wider than its container. */
.hero__in > *, .why__in > *, .contact__in > *, .cards > *, .team > *,
.revs > *, .locs > *, .posts > *, .cform__row > *, .trust__in > *, .ftr__in > * { min-width: 0; }

/* ───────── Buttons ───────── */
.btn {
  --btn-py: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: var(--btn-py) 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--ff);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), border-color .25s var(--ease);
}
.btn svg { width: 17px; height: 17px; fill: currentColor; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #14120a;
  box-shadow: 0 8px 26px rgba(232, 211, 123, .22);
}
.btn--gold:hover { box-shadow: 0 14px 36px rgba(232, 211, 123, .34); }

.btn--ghost {
  background: rgba(255, 255, 255, .035);
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--sm  { --btn-py: 9px;  padding-inline: 18px; font-size: 14px; }
.btn--lg  { --btn-py: 16px; padding-inline: 32px; font-size: 16px; }
.btn--block { width: 100%; }

/* ───────── Header ───────── */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 14px 0;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              padding .35s var(--ease), backdrop-filter .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  padding: 8px 0;
  background: rgba(9, 9, 9, .82);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--line-soft);
}
.hdr__in { display: flex; align-items: center; gap: 22px; }

/* The logo is a transparent circular PNG. It must NOT use mix-blend-mode:screen —
   that was a hack for the old opaque JPG, and screening a black badge against a
   near-black page erases everything except the wordmark. */
.hdr__logo {
  height: 46px;
  width: auto;
  transition: height .35s var(--ease);
}
.hdr.is-stuck .hdr__logo { height: 38px; }

.nav {
  display: flex;
  gap: 26px;
  margin-inline: auto;
  font-size: 15px;
  color: var(--muted);
}
.nav a { position: relative; padding: 4px 0; transition: color .2s; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--gold);
  transition: width .28s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after,
.nav a.is-active::after { width: 100%; }
.nav a.is-active { color: var(--gold); }

.hdr__cta { display: flex; align-items: center; gap: 14px; }

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  transition: opacity .2s;
}
.phone-link svg { width: 16px; height: 16px; fill: currentColor; }
.phone-link:hover { opacity: .8; }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 18px; height: 1.7px;
  margin-inline: auto;
  background: var(--text);
  transition: transform .3s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.7px) rotate(-45deg); }

/* ───────── Hero ───────── */
.hero {
  position: relative;
  padding: 168px 0 96px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 16%, rgba(232, 211, 123, .10), transparent 36%),
    radial-gradient(circle at 16% 84%, rgba(255, 255, 255, .05), transparent 40%),
    linear-gradient(125deg, #070707 0%, #151515 48%, #2b2b2b 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
.hero__glow {
  position: absolute;
  top: -180px; right: -140px;
  width: 620px; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 0 130px rgba(232, 211, 123, .10), inset 0 0 90px rgba(255, 255, 255, .02);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.05); opacity: 1; }
}

.hero__in {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 62px;
  align-items: center;
}

/* Georgian compounds like "თავდაჯერებულობას" are long, unbreakable single
   words. Sized so the longest one fits its column, with break-word as a hard
   guarantee that it can never overlap the booking card. */
.hero__title {
  font-size: clamp(26px, 4.4vw, 54px);
  font-weight: 700;
  letter-spacing: -.5px;
  margin-bottom: 22px;
  overflow-wrap: break-word;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--gold), #fff6cf 55%, var(--gold-dim));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero__lead {
  max-width: 540px;
  font-size: clamp(16px, 1.6vw, 18.5px);
  color: var(--muted);
  margin-bottom: 34px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ───────── Hero 3D stage ─────────
   Replaced the hero enquiry form; the full form lives in #contact (mainForm).
   No card chrome — the model sits straight on the page. The canvas is
   transparent and the poster has an alpha channel, so the hero's own --bg and
   .hero__glow show through both. aspect-ratio rather than a fixed height, so the
   box is reserved before the model resolves (no reflow between poster and first
   frame) and tooth.js keeps its framing at every breakpoint. */
.hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 78vh;
}

/* The model has to compete with a fixed-size grid column, and the framing can
   only be as tight as the widest moment of the animation allows — so buy the
   canvas extra room instead. With the card chrome gone the stage has no visible
   box, so bleeding it into the page gutter costs nothing visually: the model
   simply renders larger. Capped at 140px so it does not run away on ultrawide,
   and .hero already clips overflow, so this can never produce a scrollbar. */
@media (min-width: 1081px) {
  .hero__stage {
    width: calc(100% + clamp(0px, (100vw - var(--wrap)) / 2 - 10px, 140px));
  }
}

.hero__stage-poster,
.hero__stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__stage-poster { object-fit: contain; }

/* The canvas is transparent, so it must not be painted over the poster until
   there is something in it — otherwise the first frames show an empty box. */
.hero__stage-canvas { opacity: 0; transition: opacity .5s ease; touch-action: pan-y; }
.hero__stage.is-ready .hero__stage-canvas { opacity: 1; }
.hero__stage.is-ready .hero__stage-poster { opacity: 0; transition: opacity .5s ease; }
.hero__stage.is-dragging .hero__stage-canvas { cursor: grabbing; }
.hero__stage-canvas:hover { cursor: grab; }

/* ───────── Hero stage bubbles ─────────────────────
   Stacked under the copy, the model fills only the middle of its square: the
   framing is pinned by the widest moment of the animation, so at rest there is
   a dead band roughly y 0–8% and y 76–100% (measured off the poster's alpha).
   These labels fill it. Off by default and switched on in the max-width:1080px
   block — above that the stage sits beside the copy and there is no void. */
.hero__bubbles { display: none; }

@keyframes bubble-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--rise, -9px)); }
}

/* ───────── Forms ───────── */
.qform, .cform { display: grid; gap: 13px; }

.qform label, .cform label { display: grid; gap: 7px; }
.qform label > span, .cform label > span {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .2px;
}

input, select, textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(0, 0, 0, .34);
  color: var(--text);
  font-family: var(--ff);
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea { resize: vertical; min-height: 96px; }
select { max-width: 100%; text-overflow: ellipsis; }
input::placeholder, textarea::placeholder { color: rgba(185, 185, 180, .55); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(0, 0, 0, .5);
  box-shadow: 0 0 0 3px rgba(232, 211, 123, .13);
}
select option { background: #141414; color: var(--text); }

input.is-bad, select.is-bad, textarea.is-bad {
  border-color: #e0736b;
  box-shadow: 0 0 0 3px rgba(224, 115, 107, .13);
}

/* Bot honeypot. Deliberately NOT `display:none` or `hidden` — a bot that
   parses the CSS skips those, and the field only works if the bot fills it in.
   Off-screen positioning keeps it in the accessibility tree of naive scrapers
   while `aria-hidden` on the wrapper hides it from real screen readers. */
.cform__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.qform__err {
  padding: 12px 15px;
  border: 1px solid rgba(224, 115, 107, .4);
  border-radius: var(--r);
  background: rgba(224, 115, 107, .1);
  color: #f0a49d;
  font-size: 14.5px;
  text-align: center;
}

/* Submit is disabled while the POST is in flight, so a double-click cannot
   file the same enquiry twice. */
.btn.is-busy { opacity: .65; cursor: progress; }

.qform__note { font-size: 12px; color: rgba(185, 185, 180, .7); text-align: center; }
.qform__ok {
  padding: 12px 15px;
  border: 1px solid rgba(232, 211, 123, .35);
  border-radius: var(--r);
  background: rgba(232, 211, 123, .09);
  color: var(--gold);
  font-size: 14.5px;
  text-align: center;
}

/* ───────── Trust bar ───────── */
.trust {
  border-block: 1px solid var(--line-soft);
  background: var(--bg-soft);
}
.trust__in {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 40px 0;
  text-align: center;
}
.trust__item b {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(34px, 4.4vw, 50px);
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
}
.trust__item span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}

/* ───────── Section shell ───────── */
.sec { padding: clamp(70px, 8vw, 110px) 0; }
.sec--alt { background: var(--bg-soft); border-block: 1px solid var(--line-soft); }
/* First section on a standalone page: clears the fixed header, which the
   landing page's hero handles with its own padding. */
.sec--page { padding-top: 148px; }

.sec__head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 62px); text-align: center; }

.kicker {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold);
}
.sec__title {
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -.4px;
  margin-bottom: 16px;
  overflow-wrap: break-word;
}
.sec__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--gold), #fff6cf 55%, var(--gold-dim));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.sec__lead { font-size: 16.5px; color: var(--muted); }

.sec__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
}
.sec__cta p { color: var(--muted); }

/* ───────── Service cards ───────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 20px;
}
.card {
  position: relative;
  padding: 30px 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 211, 123, .38);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .45);
}
.card--hl { border-color: rgba(232, 211, 123, .3); background: linear-gradient(165deg, rgba(232, 211, 123, .09), rgba(255, 255, 255, .012)); }

.card__ico {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(232, 211, 123, .08);
}

/* Drawn rather than emoji: dentistry has almost no emoji vocabulary (🦷 and
   🪥, essentially), so the cards were reaching for ⚙️, 🧬 and 📐 to stand in
   for implants, subperiosteal frames and orthodontics. Emoji also render in
   the host OS colours and break the gold palette. */
.card__ico svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card h3 { font-size: 19.5px; margin-bottom: 10px; }
.card p  { font-size: 15px; color: var(--muted); }

.card__tag {
  position: absolute;
  top: 20px; right: 20px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--gold);
  color: #14120a;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
}

/* ───────── Why us ───────── */
.why__in {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(40px, 5vw, 70px);
  align-items: start;
}
.why__copy .sec__title { text-align: left; }
.why__copy .sec__lead  { margin-bottom: 28px; }

.why__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.why__list li {
  padding: 22px 22px 22px 24px;
  border-left: 2px solid rgba(232, 211, 123, .45);
  border-radius: 0 var(--r) var(--r) 0;
  background: rgba(255, 255, 255, .028);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.why__list li:hover { background: rgba(255, 255, 255, .055); border-left-color: var(--gold); }
.why__list b    { display: block; font-size: 16.5px; margin-bottom: 6px; }
.why__list span { font-size: 14.5px; color: var(--muted); }

/* ───────── Team ───────── */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.doc {
  padding: 28px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  text-align: center;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.doc:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 211, 123, .38);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .45);
}

/* Photo slot.
   The originals are square social cards with the name burned into the lower
   third and the logo top-left; they are pre-cropped to the head-and-shoulders
   region at build time (see assets/team/_original for the untouched files), so
   nothing here needs to compensate — plain cover is correct. */
.doc__ph {
  position: relative;
  aspect-ratio: 1;
  margin-bottom: 18px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid rgba(232, 211, 123, .22);
  background: #0e0e0e;
}
.doc__ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .5s var(--ease);
}
.doc:hover .doc__ph img { transform: scale(1.07); }

/* Settle the portrait into the card rather than ending on a hard edge */
.doc__ph::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(14, 14, 14, .55), transparent);
}

/* Group banner (assistants) — shown whole, no crop */
.doc__banner {
  margin-bottom: 18px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid rgba(232, 211, 123, .22);
  background: #0e0e0e;
}
.doc__banner img { width: 100%; height: auto; }

.doc--wide { grid-column: 1 / -1; }
.doc--wide .doc__banner img { max-width: 720px; margin-inline: auto; }

/* Leadership cards carry a subtle gold lift */
.doc--lead {
  border-color: rgba(232, 211, 123, .3);
  background: linear-gradient(165deg, rgba(232, 211, 123, .075), rgba(255, 255, 255, .012));
}

.doc[hidden] { display: none; }

.team__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
}
.team__toggle .btn svg {
  width: 16px; height: 16px;
  fill: currentColor;
  transition: transform .3s var(--ease);
}
.team__toggle .btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.team__count { font-size: 13.5px; color: var(--muted); }

.doc h3 { font-size: 19px; margin-bottom: 6px; }
.doc__role {
  display: block;
  margin-bottom: 12px;
  font-size: 13.5px;
  color: var(--gold);
  letter-spacing: .2px;
}
.doc p { font-size: 14.5px; color: var(--muted); }

/* ───────── Gallery carousel ─────────
   Native scroll-snap does the sliding: keyboard, trackpad and touch all work
   without JS, which only adds the arrows, dots and autoplay on top. */
/* Full-bleed: the track spans the viewport and the arrows float over it,
   rather than sitting beside it and eating width. */
.car {
  position: relative;
}

.car__track {
  display: flex;
  gap: 18px;
  width: 100%;
  padding: 6px 18px;
  scroll-padding-inline: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.car__track::-webkit-scrollbar { display: none; }
.car__track:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--r); }

.car__item {
  flex: 0 0 clamp(300px, 44%, 640px);
  scroll-snap-align: center;
}

.car__item figure {
  margin: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.car__item figure:hover {
  border-color: rgba(232, 211, 123, .38);
  transform: translateY(-4px);
}

.car__item img {
  width: 100%;
  /* The width/height attributes on the tag are there to reserve layout space,
     but their presentational height would otherwise beat aspect-ratio and
     stretch the image — height:auto hands control back to the ratio. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #0e0e0e;
  display: block;
}

.car__item figcaption { padding: 16px 18px 18px; }
.car__item figcaption b {
  display: block;
  font-size: 16.5px;
  margin-bottom: 4px;
}
.car__item figcaption span { font-size: 13.5px; color: var(--muted); }

.car__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(12, 12, 12, .78);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .25s var(--ease);
  z-index: 3;
}
.car__nav--prev { left: 20px; }
.car__nav--next { right: 20px; }
.car__nav svg { width: 24px; height: 24px; fill: var(--text); }
.car__nav:hover {
  border-color: var(--gold);
  background: rgba(232, 211, 123, .18);
  transform: translateY(-50%) scale(1.06);
}

.car__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.car__dots button {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  cursor: pointer;
  transition: background .25s, width .25s var(--ease);
}
.car__dots button[aria-selected="true"] {
  width: 26px;
  border-radius: 999px;
  background: var(--gold);
}

/* ───────── Reviews ───────── */
.revs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 20px;
}

/* Every card the same height. Grid already stretches a row to its tallest
   member, but the two rows differed by ~50px because the quotes vary in
   length; `1fr` rows level them across the whole grid.

   Scoped to multi-column layouts on purpose — once the grid collapses to one
   column each card is its own row, and equalising there would pad every short
   quote out to the tallest card in the section for nothing. */
@media (min-width: 561px) {
  .revs { grid-auto-rows: 1fr; }
}
/* Cards in a row stretch to the tallest. Without this the caption floats
   mid-card under a short quote; flex pins it to the bottom of every card. */
.rev {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.rev:hover { transform: translateY(-5px); border-color: rgba(232, 211, 123, .3); }

.rev__stars { color: var(--gold); font-size: 16px; letter-spacing: 3px; margin-bottom: 14px; }
.rev blockquote { margin: 0 0 18px; flex: 1 0 auto; font-size: 15.5px; color: var(--text); }
.rev blockquote::before { content: "„"; color: var(--gold); font-size: 22px; }
.rev figcaption b    { display: block; font-size: 15px; }
.rev figcaption span { font-size: 13px; color: var(--muted); }

/* ───────── Blog cards (teaser on the landing page + /blog index) ───────── */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 22px;
}
.post {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.post:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 211, 123, .38);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .45);
}

.post__ph { overflow: hidden; background: #0d0d0d; }
/* The gallery sources are 4:3; the attribute height wins over aspect-ratio
   unless height is reset — the same trap as .car__item img. */
.post__ph img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.post:hover .post__ph img { transform: scale(1.06); }

.post__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 26px; flex: 1; }
.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.post__tag {
  padding: 4px 11px;
  border: 1px solid rgba(232, 211, 123, .3);
  border-radius: 999px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .3px;
}
.post__body h3 { font-size: 19px; overflow-wrap: break-word; }
.post__body h3 a::after {
  /* Whole card clickable without nesting the link — keeps one link per card
     for assistive tech while the hover target stays the full box. */
  content: "";
  position: absolute;
  inset: 0;
}
.post__body p { font-size: 14.5px; color: var(--muted); }
.post__more { margin-top: auto; padding-top: 6px; color: var(--gold); font-size: 14px; font-weight: 600; }

/* ───────── Article page ───────── */
.article { padding: 132px 0 clamp(60px, 7vw, 96px); }
.article__in { width: min(760px, calc(100% - 40px)); margin-inline: auto; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.crumbs a:hover { color: var(--gold); }

.article__head { margin-bottom: 34px; }
.article__title {
  font-size: clamp(27px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -.4px;
  margin: 14px 0 16px;
  overflow-wrap: break-word;
}
.article__lead { font-size: 17px; color: var(--muted); }

.article__ph { margin: 0 0 34px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft); }
.article__ph img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.prose { font-size: 16.5px; color: var(--muted); }
.prose > * + * { margin-top: 20px; }
.prose h2 {
  margin-top: 44px;
  font-size: clamp(21px, 2.6vw, 27px);
  color: var(--text);
  overflow-wrap: break-word;
}
.prose h3 { margin-top: 32px; font-size: 19px; color: var(--text); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { display: grid; gap: 11px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.prose ol { margin: 0; padding-left: 22px; display: grid; gap: 11px; }
.prose ol li::marker { color: var(--gold); font-weight: 600; }

.prose blockquote {
  margin: 0;
  padding: 22px 24px;
  border: 1px solid rgba(232, 211, 123, .28);
  border-radius: var(--r-lg);
  background: rgba(232, 211, 123, .06);
  color: var(--text);
}

.article__cta {
  margin-top: 52px;
  padding: 30px 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(232, 211, 123, .09), rgba(255, 255, 255, .012));
  text-align: center;
}
.article__cta h2 { font-size: 23px; margin-bottom: 10px; }
.article__cta p { color: var(--muted); margin-bottom: 20px; }
/* Symmetric either way: the two buttons sit side by side on desktop and stack
   centred on mobile — a margin-left on the second one would offset the wrap. */
.article__cta .btn { margin: 5px; }

/* ───────── Locations ───────── */
.locs { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 24px; }
.loc {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  transition: border-color .35s var(--ease);
}
.loc:hover { border-color: rgba(232, 211, 123, .32); }

.loc__map { aspect-ratio: 16 / 9; background: #0d0d0d; }
.loc__map iframe {
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg);
}

.loc__body { padding: 26px 24px 28px; }
.loc__body h3 { font-size: 22px; margin-bottom: 16px; }

.loc__meta { display: grid; gap: 11px; margin-bottom: 22px; }
.loc__meta li {
  display: flex;
  gap: 11px;
  font-size: 14.8px;
  color: var(--muted);
}
.loc__meta i { font-style: normal; flex: none; }
.loc__meta a { color: var(--gold); }
.loc__meta a:hover { text-decoration: underline; }

.loc__btns { display: flex; flex-wrap: wrap; gap: 11px; }

/* ───────── Contact ───────── */
.contact__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 66px);
  align-items: start;
}
.contact__copy .sec__title { text-align: left; }
.contact__copy .sec__lead  { margin-bottom: 30px; }

.contact__list { display: grid; gap: 18px; }
.contact__list li { display: flex; gap: 15px; align-items: flex-start; }
.contact__list i {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(232, 211, 123, .08);
  font-style: normal;
  font-size: 18px;
}
.contact__list b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .2px;
}
.contact__list a, .contact__list div > span {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}
.contact__list a:hover { color: var(--gold); }
/* The phone row holds two <a>s. Without an explicit separator the inline links
   run together into one unreadable number string. */
.contact__list .sep {
  margin: 0 3px;
  color: var(--muted);
}

.cform {
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .45);
}
/* Each form stacks a <button> (submit) directly above an <a> (Messenger).
   Buttons reset line-height to `normal`, anchors inherit 1.65, so without an
   explicit value the two sit at different heights. */
.qform .btn, .cform .btn { line-height: 1.35; }

.cform h3 { font-size: 22px; margin-bottom: 6px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

/* ───────── Footer ───────── */
.ftr { border-top: 1px solid var(--line-soft); background: #080808; }
.ftr__in {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 62px 0 44px;
}
.ftr__logo { height: 52px; width: auto; margin-bottom: 16px; }
.ftr__brand p { font-size: 14.5px; color: var(--muted); max-width: 330px; margin-bottom: 18px; }
.ftr__social { display: flex; gap: 11px; }
.ftr__social a {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--muted);
  transition: border-color .25s, color .25s;
}
.ftr__social a:hover { border-color: var(--gold); color: var(--gold); }

.ftr__col { display: grid; gap: 10px; align-content: start; }
.ftr__col h4 { font-size: 15px; margin-bottom: 4px; color: var(--text); }
.ftr__col a, .ftr__col span { font-size: 14.3px; color: var(--muted); }
.ftr__col a:hover { color: var(--gold); }

.ftr__bottom {
  padding: 20px 0 26px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: rgba(185, 185, 180, .68);
  text-align: center;
}

/* ───────── Mobile sticky CTA bar ───────── */
.mbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(9, 9, 9, .93);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
}
.mbar__btn {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 13px 10px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
}
.mbar__btn--gold  { background: linear-gradient(135deg, var(--gold), var(--gold-dim)); color: #14120a; }
.mbar__btn--ghost { border: 1px solid var(--line); color: var(--text); }

/* ───────── Scroll reveal ───────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ═══════════ Responsive ═══════════ */
@media (max-width: 1080px) {
  .hero__in       { grid-template-columns: 1fr; gap: 44px; }

  /* The horizontal nav runs out of room against the phone number and the gold
     CTA before the layout does, so these two drop out below 1080px (user's
     call, 25 Aug 2026). Desktop keeps all seven. Matched on href rather than a
     class because the four blog/ copies write the same links as
     "../index.html#gallery" — one rule covers both forms.
     #contact is still reachable here: the mobile bar's მოგვწერეთ, the hero CTA
     and the footer all point at it. */
  .nav a[href$="#gallery"],
  .nav a[href$="#contact"] { display: none; }
  /* Stacked, the stage is decoration under the copy. Bound it with max-width
     rather than max-height: a height cap feeds back through aspect-ratio and
     shrinks the square narrower than the text column, leaving a ragged right
     edge. width:100% keeps the width definite so the auto margins have a
     remainder to centre — without it the grid item sizes to its content, and
     its content is an absolutely-positioned canvas, i.e. nothing. */
  .hero__stage    { max-width: 520px; max-height: none; margin-inline: auto; }
  .why__in        { grid-template-columns: 1fr; }
  .why__copy .sec__title, .contact__copy .sec__title { text-align: left; }
  .contact__in    { grid-template-columns: 1fr; }
  .ftr__in        { grid-template-columns: 1fr 1fr; gap: 34px; }

  /* Stacked, the copy is a full-width block above the model rather than the
     left half of a pair, so it centres. .hero__lead is max-width capped, which
     without auto margins would leave it hugging the left of a centred block. */
  .hero__copy    { text-align: center; }
  .hero__lead    { margin-inline: auto; }
  .hero__actions { justify-content: center; }

  /* The stage's bottom padding sat under ~25% of empty canvas at the model's
     foot, and the two read as one dead gap before the trust bar. */
  .hero { padding-bottom: 40px; }

  /* ── Hero stage bubbles ──
     Only ever shown where the stage is stacked: the model fills just the middle
     of its square (the framing is pinned by the widest moment of the animation,
     not by the tooth), leaving a dead band at its head and foot. Above 1080px
     the stage sits beside the copy and there is no void to fill. */
  .hero__bubbles {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    /* The canvas underneath is drag-to-rotate. Never swallow that touch. */
    pointer-events: none;
  }
  .hero__bubble {
    position: absolute;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(232, 211, 123, .28);
    background: rgba(16, 16, 16, .58);
    -webkit-backdrop-filter: blur(7px);
            backdrop-filter: blur(7px);
    color: var(--gold);
    /* The pills track the stage in percent but their text does not, so a fixed
       size that suits a 343px phone stage looks lost on a 520px tablet one. */
    font-size: clamp(11.5px, 2.6vw, 13.5px);
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
    animation: bubble-float var(--dur, 7s) ease-in-out var(--del, 0s) infinite;
  }
  /* Placed in the quiet zones: clear of the tooth itself, which never moves and
     sits at x 34–64%, y 40–75% of the stage. Percentages, so they track the
     square at every width. */
  .hero__bubble--a { top:  3%; left:  0;   --dur: 7.5s; --del: -.4s; --rise: -8px; }
  .hero__bubble--b { top: 15%; right: 0;   --dur: 8.5s; --del: -2.1s; --rise: -11px; }
  .hero__bubble--c { top: 40%; left:  0;   --dur: 6.8s; --del: -3.6s; --rise: -7px; }
  .hero__bubble--d { top: 56%; right: 0;   --dur: 9.2s; --del: -1.2s; --rise: -10px; }
  .hero__bubble--e { bottom: 14%; left:  6%; --dur: 7.9s; --del: -5.0s; --rise: -9px; }
  .hero__bubble--f { bottom:  3%; right: 8%; --dur: 8.1s; --del: -2.8s; --rise: -12px; }
}

@media (max-width: 900px) {
  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 84px 24px 26px;
    background: rgba(9, 9, 9, .97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line-soft);
    transform: translateY(-102%);
    transition: transform .4s var(--ease);
  }
  .nav.is-open { transform: none; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--line-soft); font-size: 16.5px; }
  .nav a::after { display: none; }

  .burger { display: flex; }
  /* .nav is fixed here, so it no longer contributes the auto margins that push
     the actions right on desktop — without this they collapse next to the logo. */
  .hdr__cta { margin-left: auto; }
  .hdr__cta .btn--gold { display: none; }
  .phone-link span { display: none; }
  .phone-link {
    width: 42px; height: 42px;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(232, 211, 123, .08);
  }

  /* Three stats stay on one row — a 2-col grid would orphan the third. */
  .trust__in { gap: 16px 10px; padding: 32px 0; }
  .trust__item b    { font-size: clamp(26px, 7vw, 38px); }
  .trust__item span { font-size: 12.5px; margin-top: 6px; }
  .why__list { grid-template-columns: 1fr; }
  .locs      { grid-template-columns: 1fr; }
  .mbar      { display: flex; }
  body       { padding-bottom: 74px; }

  /* Swipe replaces the arrows on touch */
  .car__item { flex-basis: 86%; }
  .car__nav  { display: none; }
  .car__track { padding-inline: 12px; scroll-padding-inline: 12px; }
}

@media (max-width: 560px) {
  .wrap        { width: calc(100% - 32px); }
  .hero        { padding: 132px 0 28px; }
  .cform       { padding: 26px 20px; }
  .cform__row  { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  /* "მოითხოვეთ კონსულტაცია" is wider than the card's content box at 375px and
     .btn is nowrap, so let it take the full width instead of overhanging. */
  .article__cta .btn { width: 100%; margin-inline: 0; }
  .article__cta { padding-inline: 20px; }
  .ftr__in     { grid-template-columns: 1fr; }
  .sec__head   { text-align: left; }

}

/* ═══════════ Print / PDF ═══════════
   The brand is a dark theme, so keep the colours rather than dropping to
   white — print-color-adjust stops the engine stripping the backgrounds. */
@media print {
  :root { --wrap: 100%; }

  html, body {
    background: var(--bg) !important;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Interactive chrome carries no meaning on paper */
  .hdr__cta, .nav, .burger, .mbar, .team__toggle,
  .hero__actions, .sec__cta .btn, .loc__btns { display: none !important; }

  /* A fixed header would reprint on every page */
  .hdr {
    position: static;
    background: none;
    border-bottom: 1px solid var(--line-soft);
  }
  .hero { padding-top: 40px; }
  /* The header is static on paper, so the clearance the fixed one needed
     becomes an empty band at the top of every article. */
  .article, .sec--page { padding-top: 34px; }
  .article__cta, .crumbs { display: none; }

  /* Nothing may sit mid-animation in a static render */
  .reveal, .doc, .card, .rev, .post, .loc {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Keep a card whole rather than splitting it across a page break */
  .card, .doc, .rev, .post, .loc, .why__list li, .trust__item, .hero__stage, .cform {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* A WebGL canvas prints blank, the same way the map embeds do. Drop it and
     let the poster — a render of the same scene — carry the page. */
  .hero__stage-canvas { display: none; }
  .hero__stage.is-ready .hero__stage-poster { opacity: 1; }
  .sec { break-before: auto; padding: 34px 0; }
  .sec__head { margin-bottom: 26px; }

  /* Maps are live embeds — they render blank on paper, so show the address */
  .loc__map { display: none; }

  /* A horizontal scroller prints as whatever happens to be in view. Lay the
     gallery out as a grid instead, and drop the loop clones so each photo
     appears exactly once. */
  .car__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    overflow: visible;
    padding: 0;
  }
  .car__item[data-clone] { display: none; }
  .car__nav, .car__dots { display: none; }

  a[href^="tel:"], a[href^="mailto:"] { text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}