/* ==========================================================================
   Mpungose Dental Surgery — Design Tokens
   ========================================================================== */
:root{
  /* Brand */
  --blue: #00a0e2;
  --blue-dark: #0a3a52;   /* derived deep shade of brand blue, for depth/footer */
  --blue-mid: #06799f;    /* mid shade — WCAG-AA-safe blue for text/button fills */
  --blue-glow: #4cc3f7;   /* light shade — WCAG-AA-safe blue for text on dark navy */
  --blue-tint: #eaf6fc;   /* wash background */
  --blue-tint-2: #d7eef8;
  --grey: #727270;
  --grey-100: #f4f4f3;
  --grey-200: #e7e6e4;
  --grey-500: #8b8b88;
  --ink: #23262b;
  --white: #ffffff;

  /* Type */
  --font-head: 'Montserrat', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;

  /* Fluid type scale */
  --fs-display: clamp(2.6rem, 4.6vw + 1rem, 5rem);
  --fs-h2: clamp(2rem, 2.6vw + 1rem, 3.2rem);
  --fs-h3: clamp(1.25rem, 1vw + 1rem, 1.6rem);
  --fs-lede: clamp(1.15rem, 0.6vw + 1rem, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.85rem;

  /* Spacing (4/8 rhythm) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 7rem;
  --sp-8: 10rem;

  /* Motion */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 200ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;

  /* Layout */
  --container: clamp(1200px, 82vw, 1600px);
  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;

  /* z-scale */
  --z-nav: 100;
  --z-float: 20;
  --z-base: 1;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
/* <picture> wrappers (inject-pictures.js) must not change layout: the <img> keeps sizing against its original parent */
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-head); margin:0; line-height:1.1; font-weight:700; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; }
svg{ display:block; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--blue-mid); color:var(--white);
  padding:.75rem 1.25rem; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
/* Reveal is opt-in only once JS confirms it can drive it (progressive enhancement) */
.js-ready [data-reveal]{
  opacity:0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.12s; }
[data-reveal-delay="2"]{ transition-delay:.24s; }
[data-reveal-delay="3"]{ transition-delay:.36s; }

/* ==========================================================================
   Buttons & Links
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding: 1rem 1.7rem;
  border-radius: 14px 999px 14px 999px;
  font-family: var(--font-head);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  cursor:pointer;
  border:1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast);
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

/* blue-mid, not the lighter brand blue, so white button labels clear WCAG AA (4.5:1) */
.btn-primary{ background: var(--blue-mid); color:var(--white); box-shadow: 0 10px 24px -8px rgba(0,160,226,.55); }
.btn-primary:hover{ background: var(--blue-dark); box-shadow: 0 14px 30px -8px rgba(0,160,226,.65); }

.btn-light{ background: var(--white); color: var(--blue-dark); }
.btn-light:hover{ background: var(--blue-tint); }

.btn-outline-light{ background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn-outline-light:hover{ background: rgba(255,255,255,.12); border-color: var(--white); }

.text-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-head); font-weight:600; font-size:.92rem;
  background: var(--blue-mid); color: var(--white) !important;
  border-radius: 14px 999px 14px 999px; padding: .8rem 1.6rem; margin-top: var(--sp-3);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.text-link:hover{ background: var(--blue-dark); transform: translateY(-1px); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  padding: var(--sp-3) 0;
  transition: background var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out), box-shadow var(--dur-med);
}
.site-header.is-scrolled{
  background: var(--white);
  padding: var(--sp-2) 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.header-inner{
  max-width: var(--container); margin:0 auto; padding: 0 var(--sp-4);
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
}
.brand{
  display:inline-block; background: var(--white); border-radius: var(--radius-sm);
  padding: .5rem .8rem; line-height:0; box-shadow: 0 8px 20px -10px rgba(6,32,46,.4);
  transition: padding var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled .brand{ padding: .35rem .6rem; box-shadow:none; }
.brand-logo{ height: 40px; width:auto; object-fit:contain; transition: height var(--dur-med) var(--ease-out); }
.site-header.is-scrolled .brand-logo{ height: 32px; }

/* flex:1 makes this fill the space between the logo and the CTA button, so its
   links center on that space rather than fighting the button for room */
.primary-nav{ flex:1; min-width:0; display:flex; justify-content:center; }
.primary-nav > ul{
  display:flex; align-items:center; justify-content:center; gap: var(--sp-5);
  background: var(--grey-100); border: 1px solid var(--grey-200);
  border-radius: 999px; padding: .6rem 2rem;
}
.primary-nav a{
  font-family: var(--font-head); font-weight:600; font-size:.92rem;
  color: var(--ink); position:relative; padding: .3rem 0;
  transition: color var(--dur-med), text-shadow var(--dur-med);
}
/* Over the full-bleed hero photo (desktop bar only — mobile's is the white slide-in drawer,
   which must always stay dark-on-white regardless of scroll state) */
.primary-nav > ul > li > a::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: var(--blue); transform: scaleX(0); transform-origin:left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.primary-nav > ul > li > a:hover::after{ transform: scaleX(1); }

/* Book Your Visit — a sibling of .primary-nav in .header-inner, not a list item inside it,
   so it's pinned to the right edge on its own and never competes with the centered links */
.nav-cta{
  font-family: var(--font-head); font-weight:600; font-size:.92rem;
  background: var(--blue-mid); color:var(--white) !important; border-radius: 14px 999px 14px 999px;
  padding: .9rem 1.9rem;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.nav-cta:hover{ background: var(--blue-dark); transform: translateY(-1px); }

.has-sub{ position:relative; }
.sub-nav{
  position:absolute; top: calc(100% + 1.1rem); left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--white); border-radius: var(--radius-sm); box-shadow: 0 24px 48px -16px rgba(10,58,82,.28);
  min-width: 280px; padding: .6rem; opacity:0; visibility:hidden;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.has-sub:hover .sub-nav, .has-sub:focus-within .sub-nav{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.sub-nav li a{ display:block; padding:.65rem .9rem; border-radius: 8px; font-size:.88rem; font-weight:600; }
.sub-nav li a:hover{ background: var(--blue-tint); color: var(--blue-dark); }
.sub-nav li a::after{ display:none; }
.sub-nav .sub-nav-mobile{ display:none; }
/* Dropdown chevron on Services, so it reads as a menu. ::before because ::after is the hover underline. */
.primary-nav .has-sub > a{ padding-right: 1.1em; }
.has-sub > a::before{
  content:''; position:absolute; right:.1em; top:50%; width:.38em; height:.38em;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.has-sub:hover > a::before, .has-sub:focus-within > a::before, .has-sub.is-open > a::before{
  transform: translateY(-25%) rotate(-135deg);
}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; background:none; border:none; cursor:pointer; z-index:110;
}
.nav-toggle span{
  width:24px; height:2px; background: var(--ink); margin:0 auto;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast), background var(--dur-med);
}

.nav-scrim{
  display:none; position:fixed; inset:0; background: rgba(10,26,36,.45); z-index:104;
  opacity:0; transition: opacity var(--dur-med) var(--ease-out);
}
.nav-scrim.is-visible{ opacity:1; }
/* the mobile `display:block` below would otherwise override [hidden] and leave an
   invisible full-screen layer over the page, swallowing every tap */
.nav-scrim[hidden]{ display:none !important; }

/* ==========================================================================
   HERO — full-bleed image, asymmetric scrim
   ========================================================================== */
.hero{
  position:relative; min-height: 100dvh; display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; background: var(--blue-dark);
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 50% 28%;
  z-index:0; filter: saturate(1.08) contrast(1.03);
  /* static pan/zoom keeps her face clear of the headline; JS only ever touches --parallax-y */
  --parallax-y: 0px;
  transform: scale(1.3) translateX(10%) translateY(var(--parallax-y));
  will-change: transform;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(6,32,46,.94) 0%, rgba(6,32,46,.74) 34%, rgba(6,32,46,.28) 58%, rgba(6,32,46,.08) 78%),
    linear-gradient(0deg, rgba(6,32,46,.55) 0%, transparent 26%);
}
.hero-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 3px 3px;
}
.hero-inner{
  max-width: var(--container); margin:0 auto; width:100%;
  padding: calc(var(--sp-8) + var(--sp-3)) var(--sp-4) var(--sp-7);
  position:relative; z-index:2;
}
.hero-title{ font-size: var(--fs-display); max-width: 13ch; color: var(--white); }
.hero-blurb{ margin: var(--sp-3) 0 var(--sp-4); max-width: 44ch; color: rgba(255,255,255,.82); font-size: 1.08rem; }

/* ==========================================================================
   ABOUT — editorial offset
   ========================================================================== */
.about{ padding: var(--sp-5) var(--sp-2); background: var(--white); position:relative; overflow:hidden; }
.about::before{
  content:''; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 900px; height:900px;
  border-radius:50%; z-index:0;
  background: radial-gradient(circle, var(--blue-tint-2) 0%, var(--blue-tint) 45%, rgba(234,246,252,0) 72%);
}
.about-inner{
  position:relative; z-index:1;
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1fr 1.5fr; gap: var(--sp-6); align-items:start;
}
/* reused by the Services and Why sections' numbered eyebrows */
.about-index{ display:flex; flex-direction:column; gap:.5rem; position:sticky; top:120px; }
.section-num{ font-family: var(--font-head); font-weight:800; font-size:2.6rem; color: var(--blue-tint-2); line-height:1; }
.section-label{ font-family: var(--font-head); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; color: var(--grey); }

.about-portrait{ position:relative; margin-top: var(--sp-5); max-width: 420px; }
.about-portrait img{
  width:100%; aspect-ratio: 3/4; object-fit:cover; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;
  box-shadow: 0 30px 60px -24px rgba(35,38,43,.35);
}
.portrait-caption{
  position:absolute; left:-14px; bottom:-14px; background: var(--blue-dark); color:var(--white);
  font-family: var(--font-head); font-size:.78rem; font-weight:600; padding: .9rem 1.1rem; border-radius: var(--radius-sm);
  line-height:1.4; box-shadow: 0 18px 30px -14px rgba(10,58,82,.5);
}

.about-copy{ padding-top: var(--sp-6); }
.about-heading{ font-size: var(--fs-h2); color: var(--ink); margin-bottom: var(--sp-2); }
.about-role{ display:block; font-family: var(--font-head); font-weight:600; font-size:.95rem; color: var(--blue-mid); margin-bottom: var(--sp-4); }
.lede{ font-size: var(--fs-lede); color: var(--ink); font-weight:600; }
.about-copy p + p{ margin-top: var(--sp-3); color: var(--grey); }

/* ==========================================================================
   TRUST — full-bleed editorial band
   ========================================================================== */
.trust{ position:relative; background: var(--blue-dark); color: var(--white); overflow:hidden; padding: var(--sp-7) var(--sp-4); }
.trust-bg{ position:absolute; inset:0; z-index:0; }
.trust-bg img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(.05) brightness(.75) saturate(1.3) contrast(1.05);
}
.trust::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: rgba(10,58,82,.72);
}
.trust-inner{ position:relative; z-index:2; max-width: var(--container); margin:0 auto; }
.trust-quote{
  font-family: var(--font-head); font-weight:700; font-size: var(--fs-h2); max-width: none; width:100%;
  margin: 0 0 var(--sp-6); position:relative;
}
.trust-quote .accent{ color: var(--blue-glow); }
.trust-columns{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.trust-col p{ color: rgba(255,255,255,.82); }
.trust-col p + p{ margin-top: var(--sp-3); }

/* ==========================================================================
   SERVICES — broken bento grid
   ========================================================================== */
.services{ padding: var(--sp-7) var(--sp-4); background: var(--grey-100); }
.services-head{ max-width: var(--container); margin: 0 auto var(--sp-6); }
.services-heading{ font-size: var(--fs-h2); color: var(--ink); margin-bottom: var(--sp-3); }
.services-intro{ color: var(--grey); font-size: 1.05rem; max-width: 62ch; }

.services-tabwrap{
  max-width: var(--container); margin:0 auto; display:grid;
  grid-template-columns: 300px 1fr; gap: var(--sp-6); align-items:start;
}

.services-tabs{
  display:flex; flex-direction:column; border-top: 1px solid var(--grey-200);
}
.tab-btn{
  display:flex; flex-direction:row; align-items:center; gap: var(--sp-3); text-align:left;
  padding: var(--sp-3) var(--sp-2); background:none; border:none; border-bottom: 1px solid var(--grey-200);
  cursor:pointer; font-family: var(--font-head); font-weight:600; font-size:.94rem; color: var(--grey);
  position:relative; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tab-btn img{ flex:none; width:52px; height:52px; object-fit:contain; mix-blend-mode:multiply; }
.tab-btn::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--blue-mid);
  transform: scaleY(0); transform-origin:center; transition: transform var(--dur-med) var(--ease-out);
}
.tab-btn:hover{ color: var(--ink); }
.tab-btn.is-active{ color: var(--blue-dark); background: var(--white); }
.tab-btn.is-active::before{ transform: scaleY(1); }

.services-panels{ position:relative; }
.tab-panel{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-6); align-items:center; min-height: 360px;
  animation: panel-in .5s var(--ease-out);
}
.tab-panel[hidden]{ display:none; }
@keyframes panel-in{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.tab-panel img{ width:100%; height:100%; max-height:420px; object-fit:cover; border-radius: var(--radius-lg); box-shadow: 0 30px 50px -24px rgba(35,38,43,.3); }
.panel-body{ display:flex; flex-direction:column; gap: .8rem; }
.panel-body h3{ font-size: var(--fs-h2); }

.panel-body p{ color: var(--grey); font-size: 1.02rem; }
.tile-link{
  display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  font-family: var(--font-head); font-weight:600; font-size:.92rem;
  background: var(--blue-mid); color: var(--white) !important;
  border-radius: 14px 999px 14px 999px; padding:.8rem 1.6rem; margin-top:.4rem;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.tile-link:hover{ background: var(--blue-dark); transform: translateY(-1px); }

/* ==========================================================================
   WHY CHOOSE US — inline numbered band
   ========================================================================== */
.why{ background: var(--white); padding: var(--sp-7) var(--sp-4); }
.why-inner{ max-width: var(--container); margin:0 auto; }
.why-head{ margin-bottom: var(--sp-6); text-align:center; }
.why-heading{ font-size: var(--fs-h2); color: var(--ink); margin-bottom: var(--sp-3); }
.why-intro{ color: var(--grey); font-size: 1.05rem; max-width: 62ch; margin:0 auto; }

.why-list{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.why-list li{
  padding: var(--sp-5) var(--sp-4); background: var(--grey-100); border-radius: var(--radius-lg);
  display:flex; flex-direction:column; gap: var(--sp-3);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.why-list li:hover{ transform: translateY(-6px); box-shadow: 0 30px 50px -24px rgba(35,38,43,.3); }
.why-list img{ width:72px; height:72px; object-fit:contain; mix-blend-mode:multiply; }
.why-list p{ font-family: var(--font-head); font-weight:600; font-size: 1.02rem; color: var(--ink); max-width: 22ch; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials{ position:relative; overflow:hidden; padding: var(--sp-7) var(--sp-4); }
.testimonials-bg{ position:absolute; inset:0; z-index:0; }
.testimonials-bg img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(.05) brightness(.75) saturate(1.3) contrast(1.05);
}
.testimonials::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: rgba(10,58,82,.72);
}
.testimonials-inner{ position:relative; z-index:2; max-width: var(--container); margin:0 auto; }
.testimonials-head{ margin-bottom: var(--sp-6); text-align:center; }
.testimonials-heading{ font-size: var(--fs-h2); color: var(--white); margin-bottom: var(--sp-3); }
.testimonials-intro{ color: rgba(255,255,255,.82); font-size: 1.05rem; max-width: 62ch; margin:0 auto; }

.testimonial-slider{
  display:flex; align-items:center; gap: var(--sp-3);
  max-width: 760px; margin: 0 auto;
}
.slider-arrow{
  flex: none; display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background: var(--white); color: var(--blue-dark);
  box-shadow: 0 14px 30px -14px rgba(35,38,43,.35);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.slider-arrow svg{ width:20px; height:20px; }
.slider-arrow:hover{ background: var(--blue-mid); color: var(--white); transform: translateY(-2px); }
.slider-arrow:active{ transform: translateY(0); }
.slider-arrow:focus-visible{ outline: 2px solid var(--blue-mid); outline-offset: 2px; }

.testimonial-viewport{ flex:1; min-width:0; overflow:hidden; }
.testimonial-track{
  display:flex; align-items:stretch; list-style:none; margin:0; padding:0;
  transition: transform var(--dur-med) var(--ease-out);
  touch-action: pan-y; cursor: grab;
}
.testimonial-track:active{ cursor: grabbing; }
.testimonial-card{
  flex: 0 0 100%; min-width:0; box-sizing:border-box;
  background: var(--white); border-radius: var(--radius-md);
  padding: var(--sp-4); box-shadow: 0 30px 50px -24px rgba(35,38,43,.3);
  display:flex; flex-direction:column; justify-content:flex-start;
  text-align:left; gap: .7rem;
}
.testimonial-head{ display:flex; align-items:center; gap:.7rem; }
.testimonial-avatar{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  font-family: var(--font-head); font-weight:700; font-size:.95rem; color: var(--white);
}
.testimonial-who{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.testimonial-name{ font-family: var(--font-head); font-weight:700; font-size:.92rem; color: var(--ink); }
.testimonial-source{
  display:flex; align-items:center; gap:.3rem;
  font-size:.76rem; color: var(--grey);
}
.testimonial-source .google-g{ width:13px; height:13px; flex:none; }
.testimonial-stars{ display:flex; gap:.15rem; color:#f5a623; }
.testimonial-stars svg{ width:14px; height:14px; }
.testimonial-card blockquote{
  font-family: var(--font-body); font-weight:400; font-size: .92rem; line-height:1.55;
  color: var(--ink); margin:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden;
}

/* Desktop: 3 reviews per page instead of 1 */
@media (min-width: 901px){
  .testimonial-slider{ max-width: none; }
  .testimonial-track{ gap: var(--sp-4); }
  .testimonial-card{ flex: 0 0 calc((100% - 2 * var(--sp-4)) / 3); }
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{ position:relative; overflow:hidden; background: var(--blue); padding: var(--sp-8) var(--sp-4); }
.cta-visual{ position:absolute; inset:0; z-index:0; }
.cta-visual img{
  width:100%; height:100%; object-fit:cover; object-position: center 20%;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: luminosity; opacity:.32;
}
.cta-band::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(120deg, var(--blue-dark) 0%, rgba(10,58,82,.35) 55%, rgba(0,160,226,.15) 100%);
}
.cta-inner{ position:relative; z-index:2; max-width: 760px; margin:0 auto; text-align:center; color: var(--white); }
.cta-inner h2{ font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.cta-inner p{ color: rgba(255,255,255,.88); font-size: 1.1rem; max-width: 46ch; margin: 0 auto var(--sp-5); }
.cta-actions{ display:flex; justify-content:center; gap: var(--sp-3); flex-wrap:wrap; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--blue-dark); color: rgba(255,255,255,.85); padding: var(--sp-7) var(--sp-4) var(--sp-4); }
.footer-top{
  max-width: var(--container); margin: 0 auto; padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(255,255,255,.14);
  display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-5);
}
.footer-logo-card{
  display:inline-block; margin-bottom: var(--sp-3); line-height:0;
}
.footer-logo{ height:44px; width:auto; }
.footer-brand p{ font-size: .92rem; color: rgba(255,255,255,.66); max-width: 34ch; }
.site-footer h3, .site-footer h4{ font-family: var(--font-head); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color: var(--blue-glow); margin-bottom: var(--sp-3); }
.site-footer .footer-location p, .footer-contact p{ font-size:.92rem; margin-bottom:.5rem; color: rgba(255,255,255,.75); }
.footer-location a, .footer-contact a{ transition: color var(--dur-fast); }
.footer-location a:hover, .footer-contact a:hover{ color: var(--blue-glow); }
.footer-contact .muted{ color: rgba(255,255,255,.68); font-style: italic; }
.footer-contact .hours{ color: rgba(255,255,255,.75); line-height:1.6; }
.footer-contact .hours strong{ color:#fff; }

.social-row{ display:flex; gap:.6rem; margin-top: var(--sp-3); }
.social-row span{
  width:38px; height:38px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; cursor:default;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.social-row svg{ width:17px; height:17px; color: rgba(255,255,255,.75); }
.social-row span:hover{ border-color: var(--blue-glow); background: rgba(0,160,226,.12); }

.footer-bottom{
  max-width: var(--container); margin: var(--sp-4) auto 0; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap: var(--sp-2);
  font-size:.85rem; color: rgba(255,255,255,.55);
}
.footer-tagline{ font-style:italic; }
.footer-legal{ display:flex; gap: var(--sp-3); }
.footer-legal a:hover{ color: var(--blue-glow); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .about-inner{ grid-template-columns: 0.9fr 1.6fr; }
  .about-index{ grid-column: 1 / -1; position:static; flex-direction:row; align-items:center; gap:1rem; }
  .services-tabwrap{ grid-template-columns: 240px 1fr; }
  .tab-panel{ grid-template-columns: 1fr; }
  .tab-panel img{ max-height: 300px; }
}

@media (max-width: 900px){
  .header-inner{ gap: var(--sp-2); }
  .primary-nav{
    display:block; /* undo the desktop centering flex — this is a fixed slide-in drawer now */
    position:fixed; inset: 0 0 0 auto; width:min(340px, 86vw); height:100dvh;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    background: linear-gradient(165deg, var(--blue-dark) 0%, var(--blue-mid) 100%);
    padding: 6.5rem var(--sp-4) var(--sp-4);
    transform: translateX(100%); transition: transform var(--dur-med) var(--ease-out);
    z-index: 105;
  }
  /* shadow only while open — on the closed, off-screen drawer it bled onto the page's right edge */
  .primary-nav.is-open{ transform: translateX(0); box-shadow: -30px 0 60px rgba(6,32,46,.4); }
  .primary-nav > ul{
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap: var(--sp-2);
    /* the glass-pill treatment is a desktop-bar-over-photo effect only — plain here */
    background:none; border:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    border-radius:0; padding:0;
  }
  /* drawer links go light-on-blue instead of the desktop dark-on-white bar */
  .primary-nav a{ color: var(--white); }
  .primary-nav > ul > li{ width:100%; }
  .primary-nav > ul > li > a{ display:block; padding: .65rem .75rem; border-radius: 10px; transition: background var(--dur-fast); }
  .primary-nav > ul > li > a:hover, .primary-nav > ul > li > a:focus-visible{ background: rgba(255,255,255,.14); }
  .primary-nav > ul > li > a::after{ background: var(--blue-glow); }
  .primary-nav > ul > li > a[aria-current="page"]{ background: rgba(255,255,255,.16); color: var(--blue-glow); }
  .has-sub.is-open > a{ background: rgba(255,255,255,.14); }
  /* the expanded submenu is a distinct white card floating on the blue drawer */
  .sub-nav li a{ color: var(--ink); }
  /* stays visible in the mobile bar (outside the hamburger drawer) — compact + nowrap so it fits beside the logo and toggle */
  .nav-cta{ padding: .55rem .9rem; font-size:.78rem; white-space:nowrap; }
  .has-sub .sub-nav{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; display:none; margin-top:.5rem; }
  .has-sub.is-open .sub-nav{ display:block; }
  .sub-nav .sub-nav-mobile{ display:block; }
  .primary-nav .has-sub > a{ padding-right: 2.25rem; }
  .has-sub > a::before{ right: 1rem; }
  /* hover/focus mean nothing on touch; only the tapped-open state flips the chevron */
  .has-sub:hover > a::before, .has-sub:focus-within > a::before{ transform: translateY(-70%) rotate(45deg); }
  .has-sub.is-open > a::before{ transform: translateY(-25%) rotate(-135deg); }
  /* the desktop hover/focus-within rule has higher specificity than the reset above
     and would otherwise still slide this half its own width off to the side on tap */
  .has-sub:hover .sub-nav, .has-sub:focus-within .sub-nav{ transform:none; }
  .nav-toggle{ display:flex; }
  .nav-scrim{ display:block; }
  .nav-toggle.is-active span{ background: var(--white); }
  .nav-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2){ opacity:0; }
  .nav-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .hero-title{ max-width: none; }
  .hero-blurb{ max-width: none; }

  .about-inner{ grid-template-columns: 1fr; }
  .about-portrait{ max-width: 380px; }

  .trust-columns{ grid-template-columns: 1fr; }

  .services-tabwrap{ grid-template-columns: 1fr; }
  .services-tabs{ flex-direction:row; flex-wrap:wrap; border-top:none; }
  .tab-btn{ flex-direction:column; text-align:center; gap:.5rem; border-bottom: 1px solid var(--grey-200); flex: 1 1 33%; padding: var(--sp-3); }
  .tab-btn::before{ left:0; right:0; top:auto; bottom:-1px; width:auto; height:2px; transform: scaleX(0); }
  .tab-btn.is-active::before{ transform: scaleX(1); }


  .why-list{ grid-template-columns: repeat(2, 1fr); }

  .testimonial-slider{ gap: var(--sp-2); }
  .slider-arrow{ width:40px; height:40px; }
  .testimonial-card{ padding: var(--sp-3); }
  .testimonial-card blockquote{ font-size: .92rem; }

  .footer-top{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }

  /* narrow viewports crop far more vertically than horizontally, so the same
     desktop pan pushes her right up against the text — ease off here */
  .hero-bg{ object-position: 62% 22%; transform: scale(1.12) translateX(4%) translateY(var(--parallax-y)); }
}

@media (max-width: 560px){
  .header-inner{ padding: 0 var(--sp-3); }
  .hero-inner{ padding-top: var(--sp-6); }
  .about, .trust, .services, .why, .testimonials{ padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .services-tabs{ grid-template-columns: repeat(2, 1fr); }
  .why-list{ grid-template-columns: 1fr; }
  .testimonial-slider{ gap: var(--sp-1); }
  .slider-arrow{ width:36px; height:36px; }
  .slider-arrow svg{ width:16px; height:16px; }
  .testimonial-card{ padding: var(--sp-3); gap: var(--sp-2); }
  .cta-actions{ flex-direction:column; align-items:stretch; }
  .footer-top{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   DENTRI-LAYOUT REBUILD — component styles for index-copy.html
   Fully rounded pills, circular icon badges, blue-highlight boxes,
   checkmark lists, and the restructured hero/services/why/CTA/footer.
   ========================================================================== */

/* Global: fully pill-shaped buttons, no shadow, per the new design system */
.btn, .nav-cta, .text-link, .tile-link{ border-radius: 999px; }
.btn-primary{ box-shadow:none; }
.btn-primary:hover{ box-shadow:none; }

.eyebrow{
  font-family: var(--font-head); font-weight:700; font-size: var(--fs-eyebrow);
  text-transform:uppercase; letter-spacing:.14em; color: var(--blue-mid); margin-bottom: var(--sp-2);
}
.highlight-box{
  display:inline; background: var(--blue-tint-2); color: var(--blue-dark);
  border-radius: 12px; padding: .08em .35em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.highlight-box--blue{ background: var(--blue-tint-2); color: var(--blue-dark); }
.highlight-box--dark{ background: var(--blue-dark); color: var(--white); }
.highlight-box--light{ background: var(--blue-glow); color: var(--blue-dark); }

.check-circle{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; background: var(--blue-tint); color: var(--blue-mid);
}
.check-circle svg{ width:15px; height:15px; }

.icon-circle{
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; background: var(--blue-tint); color: var(--blue-mid);
  margin: 0 auto var(--sp-3);
  transition: transform var(--dur-med) var(--ease-out);
}
.icon-circle svg{ width:40px; height:40px; }

/* -------------------- Header phone -------------------- */
.nav-phone{
  display:flex; align-items:center; gap:.45rem;
  font-family: var(--font-head); font-weight:600; font-size:.9rem; color: var(--ink);
  white-space:nowrap;
}
.nav-phone svg{ width:18px; height:18px; flex-shrink:0; }
@media (max-width: 900px){ .nav-phone{ display:none; } }

/* Service pages open on a solid-blue banner (same blue as the CTA button), so before the
   header picks up its white scrolled background these two need to switch to a light
   treatment or they disappear into the banner behind them. */
.site-header--on-blue:not(.is-scrolled) .nav-phone{ color: var(--white); }
.site-header--on-blue:not(.is-scrolled) .nav-cta{ background: var(--white); color: var(--blue-dark) !important; }
.site-header--on-blue:not(.is-scrolled) .nav-cta:hover{ background: var(--blue-tint); }
.site-header--on-blue:not(.is-scrolled) .nav-toggle span{ background: var(--white); }

/* -------------------- HERO 2 -------------------- */
.hero2{ padding: 100px 30px; }
.hero2-shell{
  position:relative; max-width: clamp(1320px, 90vw, 1800px); margin:0 auto;
}
.hero2-media{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  min-height: 620px; box-shadow: 0 40px 70px -30px rgba(35,38,43,.35);
}
.hero2-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 60% 30%; }
.hero2-scrim{
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(6,32,46,.88) 0%, rgba(6,32,46,.6) 38%, rgba(6,32,46,.1) 68%, transparent 90%);
}
.hero2-headline{ position:relative; z-index:2; max-width: 560px; padding: var(--sp-6) var(--sp-5); }
.hero2-title{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; font-size: clamp(2.1rem, 3.4vw + 1rem, 3.6rem); }
.pill{ display:inline-block; border-radius: 999px; padding: .12em .55em; line-height:1.15; }
.js-ready .hero2-title .pill{
  opacity:0; transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js-ready .hero2-media.is-visible .hero2-title .pill{ opacity:1; transform:none; }
.hero2-title .pill:nth-child(1){ transition-delay: .1s; }
.hero2-title .pill:nth-child(2){ transition-delay: .22s; }
.hero2-title .pill:nth-child(3){ transition-delay: .34s; }
.pill-blue{ background: var(--blue-mid); color: var(--white); }
.pill-white{ background: var(--white); color: var(--blue-dark); }
.hero2-blurb{ margin: var(--sp-4) 0 var(--sp-4); max-width: 42ch; color: rgba(255,255,255,.85); font-size: 1.05rem; }
.hero2-cta{ box-shadow: 0 14px 30px -12px rgba(6,32,46,.5) !important; }

.hero2-form{
  position: absolute; top: 50%; right: var(--sp-4); transform: translateY(-50%);
  width: min(340px, calc(100% - 3rem));
  background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 30px 60px -20px rgba(35,38,43,.35);
  padding: var(--sp-4); z-index:3;
}
.hero2-form h2, .hero2-form h3{ font-size: var(--fs-h3); color: var(--ink); margin-bottom: var(--sp-3); }
.booking-form{ display:flex; flex-direction:column; gap: var(--sp-2); }
.booking-form label{ display:flex; flex-direction:column; gap:.35rem; font-family: var(--font-head); font-weight:600; font-size:.82rem; color: var(--grey); }
.booking-form input, .booking-form textarea{
  font-family: var(--font-body); font-size:1rem; color: var(--ink); padding: .75rem .9rem;
  border-radius: var(--radius-sm); border: 1px solid var(--grey-200); background: var(--grey-100);
  outline-offset:2px;
}
.booking-form textarea{ resize: vertical; min-height: 4.5rem; font-family: inherit; }
.booking-form input:focus, .booking-form textarea:focus{ border-color: var(--blue-mid); background: var(--white); }
.phone-field{ display:flex; align-items:stretch; gap:.5rem; }
.phone-flag{
  flex:none; display:flex; align-items:center; padding: 0 .8rem; border-radius: var(--radius-sm);
  background: var(--grey-100); border: 1px solid var(--grey-200); font-size:.9rem; color: var(--ink);
}
.phone-field input{ flex:1; min-width:0; }
.booking-submit{ justify-content:center; margin-top:.4rem; width:100%; }

@media (max-width: 1080px){
  .hero2-media{ min-height: 560px; }
  .hero2-headline{ max-width: 480px; }
  .hero2-form{ width: min(300px, calc(100% - 2.5rem)); padding: var(--sp-3); }
}
@media (max-width: 900px){
  /* fixed header clearance, not a spacing token: the tokens shrink on phones
     (see the responsive refinements below) and the ~104px header then sat on the hero */
  .hero2{ padding-top: 120px; }
  .hero2-media{ min-height:auto; padding-bottom: var(--sp-3); }
  .hero2-headline{ padding: var(--sp-5) var(--sp-3) var(--sp-4); max-width:none; }
  .hero2-form{ position:static; transform:none; margin: var(--sp-4) auto 0; width:100%; max-width:420px; }
}

/* Centered variant — hero with no floating form beside it (e.g. Contact) */
.hero2--centered .hero2-media{ display:flex; align-items:center; justify-content:center; text-align:center; }
.hero2--centered .hero2-headline{ max-width: 900px; margin: 0 auto; }
.hero2--centered .hero2-title{ align-items:center; font-weight:400; }
.hero2--centered .hero2-blurb{ margin-left:auto; margin-right:auto; }
/* Centered text needs even legibility on all sides, not the left-heavy fade used
   for the homepage's left-aligned hero, so swap in a flat, uniform tint instead. */
.hero2--centered .hero2-scrim{ background: rgba(6,32,46,.55); }

/* -------------------- TRUST 2 (image left, text right) -------------------- */
.trust2{ background: var(--white); padding: var(--sp-7) var(--sp-4); }
.trust2-inner{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items:center;
}
.trust2-media{ overflow:hidden; border-radius: var(--radius-lg); }
.trust2-media img{
  width:100%; aspect-ratio: 4/5; object-fit:cover;
  box-shadow: 0 30px 60px -24px rgba(35,38,43,.35);
  transition: transform var(--dur-slow) var(--ease-out);
}
.trust2-media:hover img{ transform: scale(1.06); }
.trust2-copy{ position:relative; }
.trust2-copy::before{
  content:''; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 640px; height:640px;
  border-radius:50%; z-index:0;
  background: radial-gradient(circle, var(--blue-tint-2) 0%, var(--blue-tint) 45%, rgba(234,246,252,0) 72%);
}
.trust2-copy > *{ position:relative; z-index:1; }
.trust2-quote{ font-size: var(--fs-h2); color: var(--ink); margin-bottom: var(--sp-4); }
.trust2-quote .accent{ color: var(--blue-mid); }
.trust2-copy p{ color: var(--grey); }
.trust2-copy p + p{ margin-top: var(--sp-3); }

@media (max-width: 900px){
  .trust2-inner{ grid-template-columns: 1fr; }
  .trust2-media{ order:-1; }
}

/* -------------------- VALUE INTRO -------------------- */
.value-intro{
  padding: var(--sp-7) var(--sp-4);
  background: linear-gradient(180deg, var(--blue-tint) 0%, var(--white) 70%);
  text-align:center;
}
.value-intro-head{ max-width: 780px; margin: 0 auto; }
.value-heading{ font-size: var(--fs-h2); color: var(--ink); line-height:1.3; }
.value-cards{
  max-width: 1000px; margin: var(--sp-6) auto 0;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.value-card{
  background: var(--white); border-radius: var(--radius-md); box-shadow: 0 24px 48px -24px rgba(35,38,43,.25);
  padding: var(--sp-5) var(--sp-4); text-align:center;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.value-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 56px -20px rgba(35,38,43,.32); }
.value-card:hover .icon-circle{ transform: scale(1.08); }
.value-card h3{ font-size: 1.15rem; color: var(--ink); margin-bottom: .6rem; }
.value-card p{ color: var(--grey); font-size: .96rem; }

@media (max-width: 900px){
  .value-cards{ grid-template-columns: 1fr; }
}

/* -------------------- SERVICES CHECKLIST -------------------- */
.services-list{ padding: var(--sp-7) var(--sp-4); background: var(--white); }
.services-list-inner{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items:center;
}
.services-list-media{ overflow:hidden; border-radius: var(--radius-lg); }
.services-list-media img{
  width:100%; aspect-ratio: 4/5; object-fit:cover;
  box-shadow: 0 30px 60px -24px rgba(35,38,43,.35);
  transition: transform var(--dur-slow) var(--ease-out);
}
.services-list-media:hover img{ transform: scale(1.06); }
.services-list-copy{ position:relative; }
.services-list-copy::before{
  content:''; position:absolute; top:50%; left:38%; transform: translate(-50%,-50%);
  width: 480px; height:480px;
  border-radius:50%; z-index:0;
  background: radial-gradient(circle, var(--blue-tint-2) 0%, var(--blue-tint) 45%, rgba(234,246,252,0) 72%);
}
.services-list-copy > *{ position:relative; z-index:1; }
.services-list-heading{ font-size: var(--fs-h2); margin: .3rem 0 var(--sp-4); }
.checklist{ display:flex; flex-direction:column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.checklist li{
  display:flex; align-items:center; gap: var(--sp-3);
  font-family: var(--font-head); font-weight:600; font-size: 1.02rem; color: var(--ink);
}
.js-ready .checklist li{
  opacity:0; transform: translateX(-14px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.js-ready .services-list-copy.is-visible .checklist li{ opacity:1; transform:none; }
.checklist li:nth-child(1){ transition-delay: .05s; }
.checklist li:nth-child(2){ transition-delay: .12s; }
.checklist li:nth-child(3){ transition-delay: .19s; }
.checklist li:nth-child(4){ transition-delay: .26s; }
.checklist li:nth-child(5){ transition-delay: .33s; }
.checklist li .check-circle{ transition: transform var(--dur-fast) var(--ease-out); }
.checklist li:hover .check-circle{ transform: scale(1.15); }

@media (max-width: 900px){
  .services-list-inner{ grid-template-columns: 1fr; }
}

/* -------------------- WHY CHOOSE US 2 -------------------- */
.why2{ background: var(--grey-100); padding: var(--sp-7) var(--sp-4); position:relative; }
.why2::before{
  content:''; position:absolute; top:0; left:50%; transform: translateX(-50%);
  width:70%; height:2px; background: var(--grey-200);
}
.why2-inner{
  max-width: 1180px; margin:0 auto;
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-5); align-items:center;
}
.why2-heading{ font-size: var(--fs-h2); margin: .3rem 0 var(--sp-3); }
.why2-intro{ color: var(--grey); font-size: 1.05rem; margin-bottom: var(--sp-5); }
.why2-features{ display:flex; flex-direction:column; gap: var(--sp-4); }
.why2-features li{ display:flex; align-items:flex-start; gap: var(--sp-3); }
.js-ready .why2-features li{
  opacity:0; transform: translateX(-14px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.js-ready .why2-copy.is-visible .why2-features li{ opacity:1; transform:none; }
.why2-features li:nth-child(1){ transition-delay: .08s; }
.why2-features li:nth-child(2){ transition-delay: .18s; }
.why2-features li:nth-child(3){ transition-delay: .28s; }
.why2-features li .check-circle{ transition: transform var(--dur-fast) var(--ease-out); }
.why2-features li:hover .check-circle{ transform: scale(1.15); }
.why2-features strong{ font-family: var(--font-head); font-size:1.02rem; color: var(--ink); }
.why2-features p{ color: var(--grey); font-size:.95rem; margin-top:.2rem; }

.why2-collage{ display:flex; flex-direction:column; gap: var(--sp-3); }
.why2-collage img{
  width:100%; aspect-ratio: 3.4/1; object-fit:cover; border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -18px rgba(35,38,43,.3);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.why2-collage img:hover{ transform: scale(1.03); box-shadow: 0 26px 48px -16px rgba(35,38,43,.4); }
.collage-a{ width:92%; margin-left:0; object-position: 50% 62%; }
.collage-b{ width:92%; margin-left:8%; object-position: 50% 30%; }
.collage-c{ width:82%; margin-left:0; object-position: 92% 45%; }

@media (max-width: 900px){
  .why2-inner{ grid-template-columns: 1fr; }
  .why2-collage{ max-width: 460px; margin: var(--sp-5) auto 0; }
  .collage-a, .collage-b, .collage-c{ width:100%; margin-left:0; }
}

/* -------------------- CTA BANNER 2 -------------------- */
.cta-banner2{ position:relative; overflow:hidden; padding: var(--sp-8) var(--sp-4); }
.cta-banner2-bg{ position:absolute; inset:0; z-index:0; }
.cta-banner2-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.5) saturate(1.1);
    padding: 80px 50px;
    border-radius: 140px;
}.cta-banner2-inner{ position:relative; z-index:2; max-width: 760px; margin:0 auto; text-align:center; color: var(--white); }
.cta-banner2-inner h2{ font-size: var(--fs-h2); line-height:1.3; margin-bottom: var(--sp-5); }
.cta-banner2-phones{ display:flex; justify-content:center; gap: var(--sp-4); flex-wrap:wrap; }
.cta-banner2-phones a{
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--font-head); font-weight:700; font-size: 1.1rem; color: var(--white);
  transition: color var(--dur-fast);
}
.cta-banner2-phones svg{ width:22px; height:22px; }
.cta-banner2-phones a:hover{ color: var(--blue-glow); }
@media (max-width: 900px){
  .cta-banner2{ padding: var(--sp-6) var(--sp-3); }
  .cta-banner2-bg img{ padding: 30px 16px; border-radius: 48px; }
}
@media (max-width: 560px){
  .cta-banner2-bg img{ padding: 18px 10px; border-radius: 28px; }
}

/* -------------------- FOOTER 2 -------------------- */
.footer2-top{ grid-template-columns: 1.3fr 1fr 1.2fr 1fr; }
.footer-quicklinks nav{ display:flex; flex-direction:column; align-items:flex-start; gap: var(--sp-2); }
.footer-quicklinks nav a:not(.footer-book-btn){ font-size:.94rem; color: rgba(255,255,255,.8); transition: color var(--dur-fast); }
.footer-quicklinks nav a:not(.footer-book-btn):hover{ color: var(--blue-glow); }
.footer-book-btn{ margin-top: var(--sp-1); padding: .7rem 1.4rem; font-size:.85rem; }
.footer-location-block{ margin-bottom: var(--sp-3); }
.footer-location-block strong{ display:block; font-family: var(--font-head); font-size:.92rem; color: var(--white); margin-bottom:.3rem; }
.footer-map{ display:flex; flex-direction:column; }
.maps-link{
  display:flex; align-items:center; gap:.5rem; font-size:.88rem; color: rgba(255,255,255,.8);
  margin-bottom: var(--sp-2); transition: color var(--dur-fast);
}
.maps-link svg{ width:16px; height:16px; flex:none; }
.maps-link:hover{ color: var(--blue-glow); }
.footer-map-followheading{ margin-top: var(--sp-3); }

@media (max-width: 900px){
  .footer2-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer2-top{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Interior pages — About / Services / Service detail / Contact / Legal
   ========================================================================== */

/* -------------------- PAGE HERO (banner used at top of every interior page) -------------------- */
.page-hero{ position:relative; overflow:hidden; padding: 168px var(--sp-4) var(--sp-6); background: var(--blue-dark); }
.page-hero-bg{ position:absolute; inset:0; z-index:0; }
.page-hero-bg img{ width:100%; height:100%; object-fit:cover; filter: brightness(.5) saturate(1.05); }
.page-hero-inner{ position:relative; z-index:2; max-width: var(--container); margin:0 auto; text-align:center; color: var(--white); }
.page-hero .eyebrow{ color: var(--blue-glow); }
.page-hero-title{ font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.page-hero-lede{ max-width: 62ch; margin: 0 auto; color: rgba(255,255,255,.85); font-size: 1.05rem; }
.page-hero-crumbs{ margin-top: var(--sp-4); display:flex; justify-content:center; gap:.5rem; font-family: var(--font-head); font-weight:600; font-size:.85rem; color: rgba(255,255,255,.7); }
.page-hero-crumbs a{ color: rgba(255,255,255,.85); transition: color var(--dur-fast); }
.page-hero-crumbs a:hover{ color: var(--white); }

/* -------------------- PROSE (generic readable content block) -------------------- */
.prose-section{ padding: var(--sp-7) var(--sp-4); background: var(--white); }
.prose-inner{ max-width: 780px; margin:0 auto; }
.prose-inner h2{ font-size: var(--fs-h2); color: var(--ink); margin: var(--sp-6) 0 var(--sp-3); }
.prose-inner h2:first-child{ margin-top:0; }
.prose-inner h3{ font-size: 1.2rem; color: var(--ink); margin: var(--sp-5) 0 .6rem; }
.prose-inner p{ color: var(--grey); margin-bottom: var(--sp-3); }
.prose-inner p:last-child{ margin-bottom:0; }
.prose-inner ul{ display:flex; flex-direction:column; gap: .6rem; margin: var(--sp-2) 0 var(--sp-4); }
.prose-inner ul li{ position:relative; padding-left: 1.4rem; color: var(--grey); }
.prose-inner ul li::before{ content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background: var(--blue-mid); }
.prose-inner strong{ color: var(--ink); }
.prose-inner a:not(.btn){ color: var(--blue-mid); font-weight:600; text-decoration:underline; text-underline-offset:.2em; }
.prose-inner a:not(.btn):hover{ color: var(--blue-dark); }
.prose-lede{ font-size: var(--fs-lede); font-weight:600; color: var(--ink) !important; }
.prose-cta{ margin-top: var(--sp-5); }

/* -------------------- ABOUT: team grid -------------------- */
.team-section{ padding: var(--sp-7) var(--sp-4); background: var(--grey-100); }
.team-inner{ max-width: var(--container); margin:0 auto; }
.team-head{ max-width: 680px; margin: 0 auto var(--sp-6); text-align:center; }
.team-heading{ font-size: var(--fs-h2); color: var(--ink); margin: .3rem 0 var(--sp-3); }
.team-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); max-width: 900px; margin: 0 auto; }
.team-card{ background: var(--white); border-radius: var(--radius-md); box-shadow: 0 24px 48px -24px rgba(35,38,43,.25); padding: var(--sp-5) var(--sp-4); text-align:center; }
.team-avatar{ display:flex; align-items:center; justify-content:center; width:76px; height:76px; border-radius:50%; margin: 0 auto var(--sp-3); font-family: var(--font-head); font-weight:700; font-size:1.6rem; color: var(--white); background: var(--blue-mid); }
.team-card h3{ font-size: 1.1rem; color: var(--ink); margin-bottom:.2rem; }
.team-role{ display:block; font-family: var(--font-head); font-weight:600; font-size:.85rem; color: var(--blue-mid); margin-bottom: var(--sp-3); }
.team-card p{ color: var(--grey); font-size:.94rem; text-align:left; }
@media (max-width: 900px){ .team-grid{ grid-template-columns: 1fr; } }

/* -------------------- SERVICES OVERVIEW: card grid -------------------- */
.service-grid-section{ padding: var(--sp-7) var(--sp-4); background: var(--white); }
.service-grid-inner{ max-width: var(--container); margin:0 auto; }
.service-grid-head{ max-width: 680px; margin: 0 auto var(--sp-6); text-align:center; }
.service-grid-heading{ font-size: var(--fs-h2); color: var(--ink); margin: .3rem 0 var(--sp-3); }
.service-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.service-card{ background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-md); overflow:hidden; display:flex; flex-direction:column; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 56px -24px rgba(35,38,43,.28); }
.service-card img{ width:100%; aspect-ratio: 4/3; object-fit:cover; }
.service-card-body{ padding: var(--sp-4); display:flex; flex-direction:column; flex:1; gap:.6rem; }
.service-card-body h3{ font-size: 1.1rem; color: var(--ink); }
.service-card-body p{ color: var(--grey); font-size:.94rem; flex:1; }
@media (max-width: 900px){ .service-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .service-grid{ grid-template-columns: 1fr; } }
/* Centred variant: 3 + 2 layout with the last row centred (2 + 2 + 1 centred on tablet) */
.service-grid--centered{ grid-template-columns: repeat(6, 1fr); }
.service-grid--centered .service-card{ grid-column: span 2; }
.service-grid--centered .service-card:nth-child(4){ grid-column: 2 / span 2; }
@media (max-width: 900px){
  .service-grid--centered{ grid-template-columns: repeat(4, 1fr); }
  .service-grid--centered .service-card:nth-child(4){ grid-column: span 2; }
  .service-grid--centered .service-card:nth-child(5){ grid-column: 2 / span 2; }
}
@media (max-width: 600px){
  .service-grid--centered{ grid-template-columns: 1fr; }
  .service-grid--centered .service-card,
  .service-grid--centered .service-card:nth-child(4),
  .service-grid--centered .service-card:nth-child(5){ grid-column: auto; }
}

/* -------------------- SERVICE BANNER (solid page hero) -------------------- */
.service-banner{ position:relative; overflow:hidden; background: var(--blue-mid); padding: 190px var(--sp-4) var(--sp-5); text-align:center; }
.service-banner-inner{ position:relative; z-index:1; max-width: var(--container); margin:0 auto; }
.service-banner h1{ color: var(--white); font-size: clamp(1.6rem, 4vw + 1rem, 40px); letter-spacing:.03em; font-weight: 300; margin-bottom: var(--sp-2); }
.service-banner-crumbs{ font-family: var(--font-head); font-weight:600; font-size:.92rem; color: rgba(255,255,255,.85); }
.service-banner-crumbs a{ color: var(--white); }
.service-banner-crumbs a:hover{ text-decoration:underline; }
@media (max-width: 560px){ .service-banner{ padding-top: 140px; padding-bottom: var(--sp-4); } }

/* Floating decorative dots on the solid-blue service banner */
.service-banner-dots{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.service-banner-dots .dot{
  position:absolute; background: rgba(255,255,255,.35); animation: floatDot 7s ease-in-out infinite;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3.2c-1.9 0-3.1.9-4.4.9-1.1 0-2-.6-2.9-.6C3.1 3.5 2.5 4.6 2.5 6c0 2.4.9 4.7 1.5 6.9.5 2 1 4.6 2 6 .6.9 1.3 1.5 2 1.5.9 0 1.1-1.6 1.4-3.1.3-1.4.6-2.8 1.6-2.8s1.3 1.4 1.6 2.8c.3 1.5.5 3.1 1.4 3.1.7 0 1.4-.6 2-1.5 1-1.4 1.5-4 2-6 .6-2.2 1.5-4.5 1.5-6.9 0-1.4-.6-2.5-1.7-2.5-.9 0-1.8.6-2.9.6-1.3 0-2.5-.9-4.4-.9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3.2c-1.9 0-3.1.9-4.4.9-1.1 0-2-.6-2.9-.6C3.1 3.5 2.5 4.6 2.5 6c0 2.4.9 4.7 1.5 6.9.5 2 1 4.6 2 6 .6.9 1.3 1.5 2 1.5.9 0 1.1-1.6 1.4-3.1.3-1.4.6-2.8 1.6-2.8s1.3 1.4 1.6 2.8c.3 1.5.5 3.1 1.4 3.1.7 0 1.4-.6 2-1.5 1-1.4 1.5-4 2-6 .6-2.2 1.5-4.5 1.5-6.9 0-1.4-.6-2.5-1.7-2.5-.9 0-1.8.6-2.9.6-1.3 0-2.5-.9-4.4-.9Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.service-banner-dots .dot-1{ width:14px; height:14px; top:22%; left:8%; animation-delay:0s; }
.service-banner-dots .dot-2{ width:20px; height:20px; top:68%; left:16%; animation-delay:1.2s; background: rgba(255,255,255,.22); }
.service-banner-dots .dot-3{ width:12px; height:12px; top:32%; left:30%; animation-delay:.6s; }
.service-banner-dots .dot-4{ width:17px; height:17px; top:78%; left:52%; animation-delay:2s; background: rgba(255,255,255,.28); }
.service-banner-dots .dot-5{ width:13px; height:13px; top:18%; left:64%; animation-delay:1.6s; }
.service-banner-dots .dot-6{ width:19px; height:19px; top:60%; left:78%; animation-delay:.9s; background: rgba(255,255,255,.22); }
.service-banner-dots .dot-7{ width:11px; height:11px; top:38%; left:90%; animation-delay:2.4s; }
.service-banner-dots .dot-8{ width:15px; height:15px; top:82%; left:94%; animation-delay:.3s; background: rgba(255,255,255,.24); }

@keyframes floatDot{
  0%, 100%{ transform: translate(0, 0); opacity:.7; }
  50%{ transform: translate(8px, -20px); opacity:1; }
}

/* -------------------- SERVICE DETAIL page -------------------- */
.service-detail{ padding: var(--sp-7) var(--sp-4); background: var(--white); }
.service-detail-inner{ max-width: var(--container); margin:0 auto; display:grid; grid-template-columns: 2fr 1fr; gap: var(--sp-6); align-items:start; }

/* Circle lives on the main column only (not the section), so the overflow clip it
   needs never wraps the sticky sidebar next to it and break its stickiness. */
.service-main{ position:relative; overflow:hidden; }
.service-main::before{
  content:''; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 900px; height:900px;
  border-radius:50%; z-index:0;
  background: radial-gradient(circle, var(--blue-tint-2) 0%, var(--blue-tint) 45%, rgba(234,246,252,0) 72%);
}
.service-main > *{ position:relative; z-index:1; }
.service-main img{ width:100%; border-radius: var(--radius-md); margin-bottom: var(--sp-4); box-shadow: 0 30px 60px -24px rgba(35,38,43,.35); }
.service-main p{ color: var(--grey); margin-bottom: var(--sp-3); }
.service-main .prose-lede{ margin-bottom: var(--sp-4); }
.service-main h2, .service-main h3{ font-size: 1.15rem; color: var(--ink); margin: var(--sp-5) 0 .6rem; }
.service-main ul{ display:flex; flex-direction:column; gap: .7rem; margin: var(--sp-2) 0 var(--sp-4); }
.service-main ul li{ display:flex; align-items:flex-start; gap:.65rem; color: var(--grey); }
.tooth-bullet{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin-top:.05em; border-radius:50%;
  background: var(--blue-tint); color: var(--blue-mid);
}
.tooth-bullet svg{ width:14px; height:14px; }
.service-main a{ color: var(--blue-mid); font-weight:600; text-decoration:underline; text-underline-offset:.2em; }
.service-main a:hover{ color: var(--blue-dark); }

.service-sidebar{ position:sticky; top: 120px; display:flex; flex-direction:column; gap: var(--sp-5); }
.sidebar-form-card{
  background: linear-gradient(135deg, var(--blue-mid) 0%, var(--blue-dark) 100%);
  border-radius: var(--radius-lg); padding: var(--sp-4); color: var(--white);
  box-shadow: 0 30px 60px -24px rgba(6,32,46,.4);
}
.sidebar-form-card h3{ color: var(--white); font-size: 1.25rem; margin-bottom: var(--sp-3); }
.sidebar-form-card form{ display:flex; flex-direction:column; gap: .8rem; }
.sidebar-form-card input, .sidebar-form-card textarea{
  width:100%; border:none; border-radius: var(--radius-sm); padding: .85rem 1rem;
  font-family: var(--font-body); font-size:1rem; color: var(--ink); background: var(--white);
  outline-offset:2px;
}
.sidebar-form-card textarea{ min-height:110px; resize:vertical; font-family:inherit; }
.sidebar-form-card button{ width:100%; justify-content:center; }

.sidebar-services h3{ font-size: 1.25rem; color: var(--ink); margin-bottom: .6rem; }
.sidebar-services .accent-bar{ display:block; width:48px; height:3px; background: var(--blue-mid); margin-bottom: var(--sp-3); }
.sidebar-services-list{ display:flex; flex-direction:column; gap: .7rem; }
.sidebar-services-list a{
  display:block; background: var(--blue-mid); color: var(--white); text-align:center;
  font-family: var(--font-head); font-weight:600; font-size:.92rem;
  padding: .9rem 1.2rem; border-radius: var(--radius-sm);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.sidebar-services-list a:hover{ background: var(--blue-dark); transform: translateY(-2px); }

@media (max-width: 900px){
  .service-detail-inner{ grid-template-columns: 1fr; }
  .service-sidebar{ position:static; }
}

/* -------------------- CONTACT page -------------------- */
.contact-section{ padding: var(--sp-7) var(--sp-4); background: var(--grey-100); position:relative; overflow:hidden; }
.contact-section::before{
  content:''; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 900px; height:900px;
  border-radius:50%; z-index:0;
  background: radial-gradient(circle, var(--blue-tint-2) 0%, var(--blue-tint) 45%, rgba(234,246,252,0) 72%);
}
.contact-inner{ position:relative; z-index:1; max-width: var(--container); margin:0 auto; display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items:start; }

.contact-book h2, .contact-info h2{ font-size: var(--fs-h2); color: var(--ink); margin-bottom: var(--sp-3); line-height:1.35; }
.contact-book .disclaimer{ color: var(--grey); margin-bottom: var(--sp-4); margin-top: 20px; }
.contact-book .disclaimer strong{ color: var(--ink); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.time-row{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); }

.contact-info .intro{ color: var(--grey); margin-bottom: var(--sp-2); }
.contact-info .hours-line{ color: var(--ink); font-size:.96rem; margin-bottom: var(--sp-5); }
.contact-info .hours-line strong{ font-family: var(--font-head); font-weight:700; color: var(--blue-mid); margin-right:.3em; }

.location-block{ margin-bottom: var(--sp-5); }
.location-block:last-child{ margin-bottom:0; }
.location-block h3{
  display:flex; align-items:center; gap:.55rem;
  font-size: 1.5rem; color: var(--blue-dark);
  padding-bottom: .6rem; margin-bottom: var(--sp-3);
  border-bottom: 2px solid var(--blue-tint-2);margin-top:20px;
}
.location-block h3 .location-pin{ display:flex; flex:none; color: var(--blue-mid); }
.location-block h3 .location-pin svg{ width:22px; height:22px; }
.location-block > p{ color: var(--grey); font-size:.96rem; margin-bottom: .4rem; }
.location-block > p strong{ font-family: var(--font-head); font-weight:700; color: var(--blue-mid); margin-right:.3em; }
.location-block > p a{ color: var(--blue-mid); font-weight:600; }
.location-block > p a:hover{ color: var(--blue-dark); }
.location-map{ margin-top: .8rem; }
.location-map iframe{ width:100%; height:200px; border:0; border-radius: var(--radius-md); box-shadow: 0 20px 40px -24px rgba(35,38,43,.3); }

@media (max-width: 900px){
  .contact-inner{ grid-template-columns: 1fr; }
  .time-row{ grid-template-columns: 1fr 1fr; }
}

/* -------------------- LEGAL pages -------------------- */
.legal-section{ padding: var(--sp-7) var(--sp-4); background: var(--white); }
.legal-inner{ max-width: 760px; margin:0 auto; }
.legal-inner .legal-updated{ color: var(--grey); font-size:.92rem; margin-bottom: var(--sp-5); }
.legal-inner h2{ font-size: 1.35rem; color: var(--ink); margin: var(--sp-5) 0 .8rem; }
.legal-inner h2:first-of-type{ margin-top: 0; }
.legal-inner p{ color: var(--grey); margin-bottom: var(--sp-3); }
.legal-inner ul{ display:flex; flex-direction:column; gap: .5rem; margin: var(--sp-2) 0 var(--sp-3); }
.legal-inner ul li{ position:relative; padding-left: 1.4rem; color: var(--grey); }
.legal-inner ul li::before{ content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background: var(--blue-mid); }
.legal-inner strong{ color: var(--ink); }
.legal-inner a{ color: var(--blue-mid); font-weight:600; text-decoration:underline; text-underline-offset:.2em; }

@media (max-width: 560px){
  .page-hero{ padding-top: 148px; }
}

/* ==========================================================================
   QA fixes
   ========================================================================== */
/* Footer: larger tap targets on touch screens without spreading the columns out */
@media (max-width: 1024px){
  .site-footer a:not(.btn):not(.avily-link):not(.maps-link){ display:inline-block; padding: 6px 0; }
  .maps-link{ padding: 6px 0; }
  .footer-legal{ gap: var(--sp-4); }
}
/* Avily credit */
.avily-credit{ margin:0; }
.avily-credit .avily-link{ text-decoration:none; color: inherit; }
.avily-credit .avily-link:hover{ text-decoration:underline; color: var(--blue-glow); }
.avily-credit img{ display:inline-block; height:1em; width:auto; vertical-align:middle; margin:0 4px; filter: brightness(0) invert(1); opacity:.75; }

/* ==========================================================================
   Responsive refinements — tablet + mobile
   ========================================================================== */
@media (max-width: 900px){
  /* Section rhythm: the desktop 7-10rem paddings leave huge gaps once columns stack */
  :root{ --sp-6: 3.5rem; --sp-7: 4.5rem; --sp-8: 6rem; }
  /* Keep the CTA beside the hamburger instead of floating mid-header */
  .nav-cta{ margin-left:auto; }
  /* Stacked feature photos: landscape crop instead of a full-width 4:5 portrait */
  .trust2-media img, .services-list-media img{ aspect-ratio: 4/3; }
  .cta-banner2-phones a{ padding: 8px 0; }
}
@media (max-width: 560px){
  :root{ --sp-6: 3rem; --sp-7: 3.5rem; --sp-8: 4.5rem; }
  .slider-arrow{ width:44px; height:44px; }
}

/* ==========================================================================
   Randburg landing page (randburg-dental-practice.html)
   ========================================================================== */
.btn-outline{ background: transparent; color: var(--blue-mid); border-color: var(--blue-mid); }
.btn-outline:hover{ background: var(--blue-mid); color: var(--white); }
.hero2-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap: var(--sp-2); }
.book-actions{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.location-team{ color: var(--grey); margin-top: var(--sp-3); }
.location-team a{ color: var(--blue-mid); font-weight:600; text-decoration:underline; text-underline-offset:.2em; }
.location-team a:hover{ color: var(--blue-dark); }
.location-map--tall{ margin-top:0; }
.location-map--tall iframe{ height: 360px; }
@media (max-width: 560px){
  .hero2-actions, .book-actions{ flex-direction:column; align-items:stretch; }
  .hero2-actions .btn, .book-actions .btn{ justify-content:center; }
  .location-map--tall iframe{ height: 260px; }
}