/* ================================================================
   Expert's Dental Clinic & Lab — style.css
   Theme: Navy / Gold on clean white-blue
   Images: fully visible, no cropping, proper aspect-ratio, bordered
   ================================================================ */

/* ---- TOKENS ---- */
:root {
  --text:        #17324D;
  --muted:       rgba(23, 50, 77, 0.68);
  --gold:        #C9A84C;
  --gold-glow:   rgba(201, 168, 76, 0.18);
  --border:      rgba(23, 50, 77, 0.10);
  --card-bg:     rgba(255, 255, 255, 0.98);
  --card-bg2:    rgba(247, 250, 253, 0.95);
  --shadow-card: 0 8px 32px rgba(23, 50, 77, 0.09);
  --shadow-img:  0 12px 40px rgba(23, 50, 77, 0.14);
  --radius:      24px;
  --radius-sm:   14px;
  --max:         1240px;
  --nav-h:       80px;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { width: 100%; overflow-x: clip; }
body {
  font-family: "DM Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(ellipse at top left,  rgba(201,168,76,0.08)  0%, transparent 38%),
    radial-gradient(ellipse at 90% 10%,   rgba(160,195,225,0.18) 0%, transparent 28%),
    linear-gradient(180deg, #F9FBFD 0%, #F2F7FB 55%, #ECF3F8 100%);
  min-height: 100vh;
}
a    { color: inherit; text-decoration: none; }
img  { max-width: 100%; display: block; }
ul   { list-style: none; }
button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; }

/* ---- AMBIENT BLOBS ---- */
.page-shell { position: relative; isolation: isolate; overflow: clip; }
.page-shell::before,
.page-shell::after {
  content: "";
  position: fixed;
  width: 30vw; height: 30vw;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1; opacity: 0.35; pointer-events: none;
  animation: drift 16s ease-in-out infinite alternate;
}
.page-shell::before { top: -12vw; right: -14vw; background: rgba(201,168,76,0.12); }
.page-shell::after  { bottom: 10vh; left: -16vw; background: rgba(130,175,215,0.16); animation-duration: 20s; }
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(2vw,3vh,0) scale(1.07); }
}

/* ---- CONTAINER ---- */
.container { width: min(calc(100% - 2.4rem), var(--max)); margin: 0 auto; }
main section { padding: 5rem 0; }

/* ================================================================
   HEADER
   ================================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .3s, backdrop-filter .3s, border-color .3s, box-shadow .3s;
}
.site-header.scrolled {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(18px);
  border-color: var(--border);
  box-shadow: 0 8px 28px rgba(23,50,77,0.08);
}
.nav-wrap {
  min-height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.brand-mark {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.brand-tag { color: var(--muted); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 1.4rem; }
.nav-links a {
  position: relative; color: var(--muted); font-size: 0.93rem;
  transition: color .25s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); transform-origin: center; transition: transform .25s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }

/* ---- BUTTONS ---- */
.button, .button-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: .75rem 1.3rem; border-radius: 999px;
  font-weight: 600; font-size: .92rem; white-space: nowrap;
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.button {
  background: linear-gradient(135deg, #d6b666 0%, #b89230 100%);
  color: #fffdf6;
  box-shadow: 0 8px 22px rgba(201,168,76,0.30);
}
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(201,168,76,0.40); }
.button.pulse { animation: pulse 2.4s infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 8px 22px rgba(201,168,76,0.30), 0 0 0 0 rgba(201,168,76,0.35); }
  60%      { box-shadow: 0 12px 28px rgba(201,168,76,0.40), 0 0 0 16px rgba(201,168,76,0); }
}
.button-outline {
  border: 1.5px solid var(--border); background: rgba(255,255,255,0.84); color: var(--text);
}
.button-outline:hover { transform: translateY(-2px); border-color: rgba(201,168,76,0.5); background: #fff; }

/* ---- MOBILE TOGGLE ---- */
.menu-toggle {
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  border: 1.5px solid var(--border); background: rgba(255,255,255,0.82);
  display: none; align-items: center; justify-content: center; position: relative;
}
.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  content: ""; position: absolute;
  width: 1.05rem; height: 2px; background: var(--text); border-radius: 2px;
  transition: transform .3s, opacity .3s, top .3s;
}
.menu-toggle span   { top: 1.35rem; }
.menu-toggle::before { top: 1.03rem; }
.menu-toggle::after  { top: 1.67rem; }
.menu-toggle.active span    { opacity: 0; }
.menu-toggle.active::before { top: 1.35rem; transform: rotate(45deg); }
.menu-toggle.active::after  { top: 1.35rem; transform: rotate(-45deg); }
.mobile-panel { display: none; }

/* ================================================================
   TYPOGRAPHY HELPERS
   ================================================================ */
.eyebrow, .section-label {
  display: inline-flex; align-items: center; gap: .75rem;
  color: var(--gold); text-transform: uppercase;
  letter-spacing: .24em; font-size: .72rem; margin-bottom: 1rem;
}
.eyebrow::before, .section-label::before {
  content: ""; width: 2.5rem; height: 1px;
  background: linear-gradient(90deg, rgba(201,168,76,0), rgba(201,168,76,.9));
}
h1, h2, h3 { font-family: "Cormorant Garamond", serif; font-weight: 600; }
h1 {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: 1.02; max-width: 14ch; margin-bottom: 1.2rem;
}
.section-head {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: end;
  margin-bottom: 2.8rem;
}
.section-number {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 8vw, 5.5rem);
  color: rgba(201,168,76,0.20); line-height: .9;
}
.section-copy h2 {
  font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; margin-bottom: .5rem;
}
.section-copy p { color: var(--muted); line-height: 1.8; max-width: 46rem; font-size: .95rem; }

/* ================================================================
   IMAGE FRAMES — the key fix: fully visible, never cropped, bordered
   ================================================================ */
.img-frame {
  width: 100%;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-img);
  overflow: hidden;
  background: #f0f4f8;
  /* Ensure image shows completely — no clipping */
  display: flex; align-items: center; justify-content: center;
}

/* For landscape images (16:9 ratio) — hero banner, digital x-ray, tech */
.img-frame--hero     { /* no fixed aspect-ratio — fits content naturally */ }
.img-frame--landscape { /* landscape banner images */ }
.img-frame--portrait  { /* portrait image — smile results */ }

.img-frame img {
  width: 100%;
  height: auto;        /* ← This is the KEY: auto height = fully visible */
  display: block;
  object-fit: contain; /* ← Never crop, show everything */
  border-radius: 0;
}

/* ================================================================
   HERO
   ================================================================ */
.hero {
  padding-top: 2rem; padding-bottom: 2.5rem;
  min-height: calc(100vh - var(--nav-h));
  display: flex; align-items: center;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}
.hero p.lead {
  font-size: clamp(.95rem, 1.4vw, 1.1rem); color: var(--muted);
  line-height: 1.85; margin-bottom: 1.6rem; max-width: 42rem;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.5rem; }
.rating-badge, .meta-chip {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem .95rem; border: 1.5px solid var(--border);
  background: rgba(255,255,255,0.88); border-radius: 999px;
  backdrop-filter: blur(10px); font-size: .86rem; color: var(--text);
}
.rating-badge strong { color: var(--gold); font-size: .98rem; }
.meta-chip { font-size: .78rem; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.8rem; }
.quick-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
}
.fact-card {
  padding: .9rem 1rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: linear-gradient(160deg, rgba(255,255,255,0.98), rgba(247,250,253,.94));
  box-shadow: var(--shadow-card);
}
.fact-card span {
  display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .16em; color: rgba(23,50,77,.5); margin-bottom: .4rem;
}
.fact-card strong { font-size: .85rem; line-height: 1.5; }

/* Hero visual: the image sits inside the frame, shows fully */
.hero-visual { position: relative; }
.hero-visual .img-frame {
  border: 2.5px solid rgba(201,168,76,.30);
  box-shadow: 0 20px 60px rgba(23,50,77,0.12), 0 0 0 6px rgba(201,168,76,.08);
}

/* ================================================================
   WHY US
   ================================================================ */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
.why-card {
  padding: 1.6rem; border-radius: var(--radius); min-height: 12rem;
  border: 1.5px solid var(--border);
  background: linear-gradient(160deg, var(--card-bg), var(--card-bg2));
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
  transition: transform .25s, border-color .25s;
}
.why-card:hover { transform: translateY(-3px); border-color: rgba(201,168,76,.35); }
.why-card::after {
  content: ""; position: absolute; inset: auto -2rem -2rem auto;
  width: 7rem; height: 7rem;
  background: radial-gradient(circle, rgba(201,168,76,.20), transparent 68%);
}
.why-icon { font-size: 2rem; margin-bottom: .8rem; }
.why-card h3 { font-size: 1.55rem; margin-bottom: .45rem; }
.why-card p  { color: var(--muted); line-height: 1.75; font-size: .92rem; }

/* ================================================================
   SERVICES
   ================================================================ */
.service-pills {
  display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .4rem;
  scrollbar-width: none; margin-bottom: 1.6rem;
}
.service-pills::-webkit-scrollbar { display: none; }
.service-pills span {
  flex: 0 0 auto; padding: .6rem 1rem; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid rgba(201,168,76,.28); background: rgba(201,168,76,.09);
  font-size: .86rem;
}
.services-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
.service-card {
  padding: 1.5rem; border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: linear-gradient(160deg, var(--card-bg), var(--card-bg2));
  box-shadow: var(--shadow-card);
  transition: transform .25s, border-color .25s;
}
.service-card:hover { transform: translateY(-4px); border-color: rgba(201,168,76,.35); }
.service-icon { font-size: 1.7rem; display: block; margin-bottom: .8rem; }
.service-card h3 { font-size: 1.35rem; line-height: 1.2; margin-bottom: .8rem; }
.service-list { display: grid; gap: .3rem; }
.service-list li {
  color: var(--muted); font-size: .86rem; line-height: 1.55;
  padding-left: 1rem; position: relative;
}
.service-list li::before {
  content: "·"; position: absolute; left: 0; color: var(--gold); font-weight: 700;
}

/* ================================================================
   ABOUT — 3 IMAGES ROW
   ================================================================ */

/* Three about images — each fully visible */
.about-images-row {
  display: grid;
  /* Mix: two landscape + one portrait.
     We use auto columns so portrait naturally stays narrower. */
  grid-template-columns: 1fr 0.6fr 1fr;
  gap: 1.4rem;
  align-items: start;      /* ← align to top so portraits don't stretch */
  margin-bottom: 2.2rem;
}

/* Each figure wrapper */
.about-fig {
  display: flex; flex-direction: column; gap: .7rem;
}

/* The image frame for about images */
.about-fig .img-frame {
  border: 2px solid var(--border);
  box-shadow: var(--shadow-img);
  border-radius: var(--radius);
  background: #eef2f6;
  /* No fixed height — grows with image */
  display: block;
  overflow: hidden;
}

/* Image itself — fully visible always */
.about-fig .img-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Caption badge */
.about-fig figcaption {
  display: inline-block; align-self: flex-start;
  padding: .35rem .85rem; border-radius: 999px;
  background: var(--text); color: #fff;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(23,50,77,.18);
}

/* About two-column cards row */
.about-cards-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 2.5rem;
}
.about-card {
  padding: 1.8rem; border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: linear-gradient(160deg, var(--card-bg), var(--card-bg2));
  box-shadow: var(--shadow-card);
}
.about-card h3 { font-size: 1.9rem; margin-bottom: .45rem; line-height: 1.1; }
.about-card > p { color: var(--muted); line-height: 1.75; font-size: .93rem; margin-bottom: 1.1rem; }

/* Trust list */
.trust-list { display: grid; gap: .9rem; }
.trust-item {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start;
  padding-bottom: .9rem; border-bottom: 1px solid rgba(23,50,77,.07);
}
.trust-item:last-child { padding-bottom: 0; border-bottom: 0; }
.trust-item strong {
  color: var(--gold); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap; padding-top: .1rem;
}
.trust-item span { color: var(--muted); line-height: 1.7; font-size: .9rem; }

/* Tech list */
.tech-list { display: grid; gap: .85rem; }
.tech-item {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start;
  padding-bottom: .85rem; border-bottom: 1px solid rgba(23,50,77,.07);
}
.tech-item:last-child { padding-bottom: 0; border-bottom: 0; }
.tech-icon { font-size: 1.4rem; }
.tech-item strong { display: block; font-size: .88rem; margin-bottom: .15rem; }
.tech-item span   { font-size: .84rem; color: var(--muted); line-height: 1.6; }

/* ================================================================
   TEAM
   ================================================================ */
.team-section { }
.team-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.1; margin-bottom: .4rem;
}
.team-subtitle { color: var(--muted); line-height: 1.8; margin-bottom: 1.4rem; max-width: 52rem; font-size: .93rem; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.team-card {
  padding: 1.4rem; border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: linear-gradient(160deg, var(--card-bg), var(--card-bg2));
  box-shadow: var(--shadow-card);
  transition: transform .25s, border-color .25s;
}
.team-card:hover { transform: translateY(-3px); border-color: rgba(201,168,76,.30); }
.team-icon  { font-size: 1.8rem; margin-bottom: .6rem; }
.team-name  { font-size: 1.05rem; font-weight: 700; margin-bottom: .2rem; }
.team-role  { color: var(--gold); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .6rem; }
.team-card p { color: var(--muted); font-size: .88rem; line-height: 1.7; }

/* ================================================================
   REVIEWS
   ================================================================ */
.reviews-shell { overflow: hidden; position: relative; }
.reviews-track { display: flex; gap: 1rem; transition: transform .6s ease; will-change: transform; }
.review-card {
  flex: 0 0 calc(33.333% - 0.67rem); padding: 1.5rem; min-height: 14rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: linear-gradient(160deg, var(--card-bg), var(--card-bg2));
  box-shadow: var(--shadow-card);
}
.review-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem;
}
.review-name  { font-size: 1rem; font-weight: 700; }
.review-stars { color: var(--gold); letter-spacing: .06em; }
.review-card p { color: var(--muted); line-height: 1.8; font-size: .92rem; font-style: italic; }

/* ================================================================
   CONTACT / HOURS
   ================================================================ */
.hours-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1.4rem; align-items: start;
}
.hours-card, .location-card {
  padding: 1.8rem; border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: linear-gradient(160deg, var(--card-bg), var(--card-bg2));
  box-shadow: var(--shadow-card);
}
.hours-card h3, .location-card h3 { font-size: 1.9rem; margin-bottom: .45rem; line-height: 1.1; }
.hours-card > p, .location-card > p { color: var(--muted); line-height: 1.7; font-size: .9rem; }
.hours-table {
  width: 100%; margin-top: 1.1rem; border-collapse: collapse;
  border-radius: var(--radius-sm); overflow: hidden; background: rgba(255,255,255,.78);
}
.hours-table tr { border-bottom: 1px solid rgba(23,50,77,.07); }
.hours-table tr:nth-child(odd) { background: rgba(255,255,255,.5); }
.hours-table tr.today { background: linear-gradient(90deg, rgba(201,168,76,.24), rgba(201,168,76,.08)); }
.hours-table td { padding: .85rem 1rem; color: var(--muted); font-size: .9rem; }
.hours-table td:first-child { color: var(--text); font-weight: 700; }
.map-frame {
  overflow: hidden; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); min-height: 17rem; margin-top: 1.1rem;
}
.map-frame iframe { width: 100%; height: 100%; min-height: 17rem; border: 0; display: block; }
.contact-list { display: grid; gap: .8rem; margin-top: 1rem; }
.contact-list a, .contact-list div { color: var(--muted); line-height: 1.7; font-size: .9rem; }
.contact-list strong {
  display: block; color: var(--text); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: .1rem;
}
.contact-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.1rem; }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid rgba(23,50,77,.08);
  background: linear-gradient(180deg, #e8f0f7 0%, #dfe9f2 100%);
}
.footer-grid {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 1.5rem; align-items: start;
}
.footer-grid p, .footer-grid a { color: var(--muted); line-height: 1.8; font-size: .9rem; }
.footer-title { font-family: "Cormorant Garamond", serif; font-size: 1.7rem; margin-bottom: .35rem; }
.footer-note {
  margin-top: 1.8rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(23,50,77,.08);
  color: rgba(23,50,77,.5); font-size: .84rem;
}

/* ================================================================
   REVEAL ANIMATION
   ================================================================ */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* 1080 */
@media (max-width: 1080px) {
  .hero-grid, .hours-grid, .footer-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid     { grid-template-columns: repeat(2, 1fr); }
  .review-card   { flex-basis: calc(50% - .5rem); }
  .about-images-row { grid-template-columns: 1fr; }
  .about-cards-row  { grid-template-columns: 1fr; }
}

/* 840 */
@media (max-width: 840px) {
  :root { --nav-h: 70px; }

  .nav-links, .nav-actions .button { display: none; }
  .menu-toggle { display: inline-flex; }

  .mobile-panel {
    display: block; overflow: hidden;
    max-height: 0; opacity: 0;
    background: rgba(255,255,255,.95); backdrop-filter: blur(18px);
    border-top: 1px solid var(--border);
    transition: max-height .35s ease, opacity .35s ease, padding-bottom .35s ease;
  }
  .mobile-panel.open { max-height: 28rem; opacity: 1; padding-bottom: 1.1rem; }
  .mobile-panel-inner { display: grid; gap: .6rem; padding-top: .5rem; }
  .mobile-panel-inner a { width: 100%; justify-content: center; }

  .hero { min-height: auto; padding-top: 1.5rem; padding-bottom: 3rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .section-head { grid-template-columns: 1fr; }
  .section-number { display: none; }
  .why-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr; }
  .review-card { flex-basis: 100%; }
  .quick-facts { grid-template-columns: 1fr 1fr; }
}

/* 600 */
@media (max-width: 600px) {
  .container { width: min(calc(100% - 1.4rem), var(--max)); }
  main section { padding: 3.5rem 0; }
  h1 { font-size: 2.6rem; }
  .hero-actions, .contact-actions { flex-direction: column; }
  .hero-actions a, .contact-actions a { width: 100%; justify-content: center; }
  .quick-facts { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand-tag { display: none; }
  .hours-grid { grid-template-columns: 1fr; }
}

/* 400 */
@media (max-width: 400px) {
  h1 { font-size: 2.2rem; }
  .section-copy h2 { font-size: 1.65rem; }
  .service-card, .team-card, .why-card { padding: 1.1rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================
   BRAND / LOGO
========================= */

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-mark {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.brand-tag {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 2px;
}

/* Responsive */

@media (max-width:768px) {

    .brand-logo {
        width: 48px;
        height: 48px;
    }

    .brand-mark {
        font-size: 1rem;
    }

    .brand-tag {
        display: none;
    }
}