/* ============================================================
   "Ripple" theme — one visual system taken from the practice logo
   ------------------------------------------------------------
   COLOUR   The four blues in the logo, plus one accent:
              --r-200 #ACD3EB  light ripple   (highlights on dark)
              --r-400 #78B5DC  mid ripple     (accents, buttons on dark)
              --r-500 #448CBE  deep ripple    (lines, icons, hover)
              --r-700 #1F4E73  logo ink       (headings, links, eyebrows)
            plus a deep navy (--dark) for the header, hero, CTA and
            footer bands, and very light tints of the ripple blue for
            page grounds and cards. One warm accent: the dark red
            (--maroon #7E2434) is used for the small capital
            section labels; subheadings stay logo blue.
   TYPE     Fraunces (semi-bold, upright) for names and headings, the
            same sturdy serif feel as "Dr Diana Tran" in the logo;
            Public Sans for body copy and for the widely-spaced
            capital labels that echo "SPECIALIST DERMATOLOGIST".
   FORMAT   Full-width navy header and footer; light-blue page
            banner; white cards with a hairline border; pill buttons;
            the ripple mark as a quiet watermark on dark bands.
   Loaded last, after base.css and site-extra.css, on every page.
   ============================================================ */

:root{
  /* logo blues */
  --r-200:#ACD3EB;
  --r-400:#78B5DC;
  --r-500:#448CBE;
  --r-700:#1F4E73;

  /* dark red accent for the small capital section labels (carried over from the letterhead) */
  --maroon:#7E2434;
  --maroon-deep:#5E1B27;

  /* dark bands */
  --dark:#0F2F4A;
  --footer-bg:#0B2740;

  /* grounds and lines */
  --bg:#EEF5FB;
  --surface:#FFFFFF;
  --surface-2:#DCEBF6;
  --line:#CFE1F0;
  --line-strong:#9CC3E0;

  /* text */
  --ink:#12283B;
  --ink-soft:#3F5A70;
  --ink-faint:#566F85;
  --on-dark:#F4F9FD;
  --on-dark-soft:#BFD6E8;

  /* names the older stylesheets and inline styles already use */
  --accent:var(--r-500);
  --accent-strong:var(--dark);
  --accent-tint:var(--surface-2);
  --warm:var(--maroon);           /* every eyebrow in the markup reads var(--warm) */
  --warm-tint:#F3E1E3;

  --shadow:0 1px 2px rgba(15,47,74,0.07), 0 10px 26px -14px rgba(15,47,74,0.24);

  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body{ background:var(--bg); color:var(--ink); }

/* ---------- type: one serif, one sans ---------- */
h1, h2, h3, h4{
  font-family:var(--serif);
  font-weight:600;
  font-variation-settings:'opsz' 30;
  color:var(--r-700);
  letter-spacing:-0.005em;
}
.team-member h3, .location h3, .step h3{
  font-family:var(--serif);
  font-weight:600;
  font-variation-settings:'opsz' 30;
  color:var(--r-700);
}
.team-member h3{ font-size:1.25rem; }
.location h3{ font-size:1.1rem; }
.step h3{ font-size:1.05rem; }

/* section labels: wide-tracked capitals like the logo's tagline */
.eyebrow{
  font-family:var(--sans);
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--maroon);
}
.section-head .eyebrow::after,
.page-hero .eyebrow::after{
  content:'';
  display:block;
  width:44px; height:2px;
  margin-top:10px;
  background:var(--r-400);
  border-radius:2px;
}
.group-label, .sk-gallery-label, .tag, .location .tag, .team-member .tag, .acc-trigger .tag-mini{
  letter-spacing:0.16em;
}
.group-label{ color:var(--maroon); }

/* the italic serif labels become upright semi-bold serif */
.reason h3, .focus-item h3, .service-row .label, .pub-item h3,
.ba-case h3, .acc-trigger, .ba-modal-title, .lb-caption{
  font-family:var(--serif);
  font-style:normal;
  font-weight:600;
  font-variation-settings:'opsz' 30;
  color:var(--r-700);
}
.lb-frame .lb-caption{ font-style:normal; font-size:1.05rem; color:var(--on-dark); }
.acc-trigger{ font-size:1.1rem; }
.ba-case h3{ font-size:1.2rem; }
.timeline .year{ color:var(--maroon); letter-spacing:0.14em; text-transform:uppercase; }
.pull{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-variation-settings:'opsz' 30;
  color:var(--r-700);
  border-left:3px solid var(--r-400);
}

/* ---------- links ---------- */
.prose a, p a, .ba-related a, .ba-show-more a{ color:var(--r-700); }
a[style*="color:var(--accent-strong)"]{ color:var(--r-700) !important; }
p.xlink a{ color:var(--r-700); border-bottom:1px solid var(--r-400); }
p.xlink a:hover, p.xlink a:focus-visible{ border-bottom-color:var(--r-700); }
.map-link a{ color:var(--r-700); font-weight:600; text-decoration:none; border-bottom:1px solid var(--r-400); }
.map-link a:hover{ color:var(--r-500); }
.crumb a:hover{ color:var(--r-700); }

/* ---------- header: full-width navy bar with the logo lockup ---------- */
header.site{
  margin-inline:-20px;              /* undo the body's side padding so the bar is edge to edge */
  padding-inline:20px;
  background:var(--dark);
  border-bottom:1px solid rgba(172,211,235,0.18);
  backdrop-filter:none;
  box-shadow:0 2px 18px -8px rgba(15,47,74,0.5);
}
.wordmark{ color:var(--on-dark); letter-spacing:0.02em; }
nav.links{ color:var(--on-dark); }
nav.links a:hover, nav.links a:focus-visible{ color:var(--r-200); border-color:var(--r-400); }
nav.links a.is-active{ color:var(--r-200); border-color:var(--r-400); }
.nav-toggle{ background:rgba(172,211,235,0.10); border-color:rgba(172,211,235,0.35); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ background:var(--on-dark); }
@media (max-width:880px){
  nav.links{ background:var(--dark); border-bottom:1px solid rgba(172,211,235,0.18); box-shadow:var(--shadow); }
  nav.links a{ border-bottom-color:rgba(172,211,235,0.16); }
}

/* ---------- buttons: pills. Navy on light grounds, light blue on dark bands ---------- */
.btn{
  background:var(--r-700);
  color:#fff;
  font-weight:700;
  letter-spacing:0.01em;
}
.btn:hover, .btn:focus-visible{ background:var(--dark); color:#fff; }
header.site .btn, .hero .btn, .cta .btn, .lb-frame .btn{
  background:var(--r-200);
  color:var(--dark);
}
header.site .btn:hover, header.site .btn:focus-visible,
.hero .btn:hover, .cta .btn:hover{ background:#fff; color:var(--dark); }
nav.links a.btn, nav.links a.btn.is-active{ color:var(--dark); border-color:transparent; }
nav.links a.btn:hover, nav.links a.btn:focus-visible{ color:var(--dark); }
/* outline buttons that carry an inline navy label */
.btn[style*="transparent"]{ background:transparent !important; color:var(--r-700) !important; border:1px solid var(--r-500) !important; }
.btn[style*="transparent"]:hover{ background:var(--surface-2) !important; }

/* ---------- home hero: full-bleed navy band with the ripple mark behind the portrait ---------- */
.hero{
  background:var(--dark);
  box-shadow:0 0 0 100vmax var(--dark);
  clip-path:inset(0 -100vmax 0 -100vmax);
  padding-block:84px 76px;
  margin-top:-1px;
}
.hero::before{
  content:'';
  position:absolute; right:0; top:50%;
  width:min(520px, 70vw); aspect-ratio:1;
  transform:translateY(-50%);
  background:url('../images/logo-mark.svg') center/contain no-repeat;
  opacity:0.10;
  pointer-events:none;
}
.hero{ border-bottom-color:transparent !important; }
.hero-text, .hero-photo-wrap{ position:relative; z-index:1; }
.hero .eyebrow, .cta .eyebrow{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  background:var(--on-dark);
  color:var(--maroon) !important;
}
.hero .eyebrow::after{ display:none; }
@media (max-width:480px){
  .hero .eyebrow{ border-radius:14px; letter-spacing:0.16em; }
}
.hero h1{ color:var(--on-dark); }
.hero h1 em{ color:var(--r-200); font-style:normal; }
.hero-lede{ color:var(--on-dark-soft); }
.credentials{ background:var(--r-200); color:var(--dark); }
.credentials b{ color:var(--dark); }
.role-badge{ color:var(--on-dark-soft); }
.role-badge .dot{ background:var(--r-400); }
.hero-photo-wrap::before{ background:rgba(120,181,220,0.22); }

/* ---------- subpage banner: light-blue band with a faint ripple ---------- */
.page-hero{
  position:relative;
  background:var(--surface-2);
  box-shadow:0 0 0 100vmax var(--surface-2);
  clip-path:inset(0 -100vmax 0 -100vmax);
  margin-top:-1px;
  padding-block:48px 34px;
}
.page-hero::after{
  content:'';
  position:absolute; right:0; top:50%;
  width:min(280px, 40vw); aspect-ratio:1;
  transform:translateY(-50%);
  background:url('../images/logo-mark.svg') center/contain no-repeat;
  opacity:0.45;
  pointer-events:none;
}
.page-hero > *{ position:relative; z-index:1; }
.page-hero h1{ color:var(--r-700); }
@media (min-width:761px){
  .page-hero::after{ width:230px; }
  .page-hero h1{ max-width:calc(100% - 260px); }   /* keep headings clear of the ripple */
}
@media (max-width:760px){ .page-hero::after{ opacity:0.22; width:min(220px, 50vw); } }

/* ---------- accents on light grounds ---------- */
.reason:hover{ background:var(--surface-2); }
.acc-item.open .acc-plus{ background:var(--surface-2); }
.acc-plus::before, .acc-plus::after{ background:var(--r-700); }
.acc-plus{ border-color:var(--r-400); }
.timeline li::before{ border-color:var(--r-500); background:var(--surface); }
.step .num{ border-color:var(--r-500); color:var(--r-700); font-weight:600; }
.ba-handle .ba-grip{ color:var(--r-700); }
.ba-label{ background:rgba(15,47,74,0.82); }
.team-member:hover{ box-shadow:0 4px 10px rgba(15,47,74,0.08), 0 16px 32px -16px rgba(15,47,74,0.3); }
.contact-list .k{ color:var(--r-200); }

/* ---------- CTA panel: navy card with a corner ripple ---------- */
.cta{ position:relative; overflow:hidden; background:var(--dark); }
.cta::after{
  content:'';
  position:absolute; right:-70px; bottom:-90px;
  width:340px; aspect-ratio:1;
  background:url('../images/logo-mark.svg') center/contain no-repeat;
  opacity:0.07;
  pointer-events:none;
}
.cta > *{ position:relative; z-index:1; }
.cta h2{ color:var(--on-dark); }
.cta p{ color:var(--on-dark-soft); }
.cta .eyebrow::after{ display:none; }
.cta p a[style*="F2F6FC"]{ color:var(--r-200); }

/* ---------- footer: full-bleed navy band ---------- */
footer{
  background:var(--footer-bg);
  box-shadow:0 0 0 100vmax var(--footer-bg);
  clip-path:inset(0 -100vmax 0 -100vmax);
  border-top:none;
  margin-top:48px;
  padding-block:28px 34px;
}
footer .foot-name{ color:var(--on-dark); }
footer .foot-name span{ color:var(--r-200); }
footer .foot-address{ color:#9CBBD3; }
footer .foot-links a{ color:var(--on-dark-soft); }
footer .foot-links a:hover{ color:var(--r-200); }

/* ---------- logo (header lockup + footer mark) ---------- */
.wordmark{ display:inline-flex; align-items:center; }
.logo-lockup{ display:block; height:56px; width:auto; }
.logo-mark--foot{ width:28px; height:28px; display:inline-block; vertical-align:middle; margin-right:10px; margin-top:-3px; }
@media (max-width:480px){
  .logo-lockup{ height:46px; }
  .logo-mark--foot{ width:28px; height:28px; }
}

/* ============================================================
   Interactive additions: back-to-top, and a before/after lightbox
   ============================================================ */

/* ---------- back to top ---------- */
.to-top{
  position:fixed;
  right:20px; bottom:20px;
  z-index:70;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--dark);
  color:var(--r-200);
  border:1px solid rgba(172,211,235,0.3);
  font-size:1.15rem;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(15,47,74,0.6);
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}
.to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover, .to-top:focus-visible{ background:var(--footer-bg); outline:none; }
@media (prefers-reduced-motion: reduce){ .to-top{ transition:none; } }

/* ---------- before/after: expand affordance ---------- */
.ba-slider{ cursor:ew-resize; }
.ba-expand{
  position:absolute;
  top:10px; right:10px;
  z-index:5;
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid rgba(244,249,253,0.55);
  background:rgba(15,47,74,0.75);
  color:var(--on-dark);
  font-size:0.95rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.2s ease;
}
.ba-expand:hover, .ba-expand:focus-visible{ background:var(--r-200); color:var(--dark); transform:scale(1.06); outline:none; }
/* the after-label already sits top-right; nudge it down so the button has room */
.ba-slider .ba-label.after{ top:48px; }

/* ---------- before/after: lightbox ---------- */
body.ba-modal-open{ overflow:hidden; }
.ba-modal{
  position:fixed; inset:0; z-index:80;
  padding:24px;
}
.ba-modal:not([hidden]){
  display:flex; align-items:center; justify-content:center;
}
.ba-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(8,24,40,0.8);
}
.ba-modal-inner{
  position:relative;
  z-index:1;
  background:var(--surface);
  border-radius:18px;
  padding:22px 22px 26px;
  max-width:640px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.5);
}
.ba-modal-title{
  font-size:1.2rem;
  margin:0 0 14px;
  padding-right:32px;
}
.ba-modal-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:var(--ink);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ba-modal-close:hover, .ba-modal-close:focus-visible{ background:var(--surface-2); outline:none; }
.ba-slider--modal{ max-width:100%; margin:0 auto; }
.ba-slider--modal .ba-expand{ display:none; }

/* ============================================================
   Nav fit — nine items with longer labels. Wide screens keep one
   row; mid-width screens put the links on a second row under the
   logo; below 1180px the menu button takes over.
   ============================================================ */
@media (min-width:1331px){
  .nav-inner{ max-width:1300px; }
  nav.links{ gap:14px; flex-wrap:nowrap; font-size:0.85rem; }
  nav.links a{ white-space:nowrap; }
}
@media (min-width:1181px) and (max-width:1330px){
  .nav-inner{ max-width:1160px; flex-wrap:wrap; row-gap:4px; padding-bottom:10px; }
  nav.links{ flex:1 1 100%; gap:20px; justify-content:space-between; font-size:0.88rem; }
  nav.links a{ white-space:nowrap; }
}
@media (max-width:1180px){
  .nav-toggle{ display:inline-flex; }
  nav.links{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--dark);
    border-bottom:1px solid rgba(172,211,235,0.18);
    box-shadow:var(--shadow);
    padding:8px 20px 16px;
    z-index:60;
  }
  nav.links.open{ display:flex; }
  nav.links a{ padding-block:12px; border-bottom:1px solid rgba(172,211,235,0.16); border-radius:0; }
  nav.links a.btn{ margin-top:10px; text-align:center; border-bottom:none; }
}

/* ============================================================
   Home page: College emblem beside the credentials, and the
   Toorak suites photograph in the contact section.
   ============================================================ */
.acd-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:18px;
}
.acd-badge{
  flex:none;
  width:124px;
  background:#fff;
  border-radius:12px;
  padding:6px;
  box-shadow:0 8px 22px -10px rgba(0,0,0,0.5);
}
.acd-badge img{ display:block; width:100%; height:auto; border-radius:6px; }
.acd-row .credentials{
  display:block;
  margin-top:0;
  flex:0 1 auto;
  white-space:normal;
  border-radius:14px;
}

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.3fr);
  gap:24px;
  align-items:stretch;
}
.contact-photo{
  position:relative;
  margin:0;
  min-height:360px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--surface-2);
}
.contact-photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 45%;
  display:block;
}
.contact-photo figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:38px 18px 14px;
  background:linear-gradient(180deg, rgba(15,47,74,0), rgba(15,47,74,0.85));
  color:var(--on-dark);
  font-size:0.84rem; font-weight:600; letter-spacing:0.02em;
}
.contact-grid .cta{ grid-template-columns:1fr; align-content:center; }
@media (max-width:760px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-photo{ min-height:0; aspect-ratio:4/3; }
}

/* map now lives in the contact section */
.contact-map{ max-width:none; margin-top:24px; border-radius:20px; }
.map-link{ margin:12px 0 0; font-size:0.9rem; }