/* ==========================================================================
   KEFI HEALTHCARE  ·  GLOBAL DESIGN SYSTEM
   Brand : #5A2E91 (plum)  ->  #BB3E97 (magenta)
   Type  : Manrope (primary) / Google Sans (secondary)
   ========================================================================== */

/* --------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------- */
:root{
  /* Brand */
  --plum:        #5A2E91;
  --magenta:     #BB3E97;
  --plum-deep:   #3D1E66;
  --plum-ink:    #241038;

  /* Legacy accent var remapped onto the brand so any inherited
     rule resolves on palette instead of teal. */
  --teal:        #BB3E97;

  /* Neutrals */
  --ink:         #1C1230;
  --ink-2:       #4A4160;
  --ink-3:       #7A7290;
  --paper:       #FFFFFF;
  --paper-2:     #FAF6FC;
  --paper-3:     #F3ECF7;
  --line:        rgba(28,18,48,.10);
  --line-2:      rgba(28,18,48,.06);

  /* Brand tints */
  --tint:        rgba(187,62,151,.08);
  --tint-2:      rgba(90,46,145,.08);

  /* Gradients */
  --grad:        linear-gradient(120deg, #5A2E91 0%, #BB3E97 100%);
  --grad-soft:   linear-gradient(120deg, rgba(90,46,145,.12) 0%, rgba(187,62,151,.12) 100%);

  /* Type */
  --font-head:   "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:   "Google Sans", "Google Sans Text", "Product Sans", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(28,18,48,.05);
  --sh-2: 0 6px 20px -8px rgba(28,18,48,.14);
  --sh-3: 0 22px 48px -20px rgba(58,24,96,.30);
  --sh-4: 0 34px 70px -28px rgba(58,24,96,.42);

  /* Geometry */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .22s var(--ease);
  --t: .38s var(--ease);
  --t-slow: .7s var(--ease-out);

  /* Layout */
  --nav-h: 88px;
  --nav-h-sm: 70px;
}

/* --------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  /* The closed mobile drawer is fixed and parked off-screen to the right.
     body overflow does not clip fixed children, so clip at the root. */
  overflow-x:hidden;
}
@supports (overflow-x: clip){
  html{ overflow-x:clip; }
}

body{
  margin:0;
  font-family: var(--font-body);
  font-size:1rem;
  line-height:1.7;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* An overflow on body makes it a scroll container, which stops
   position:sticky working anywhere inside the page. The root already
   clips the off-screen drawer, so body does not need to. */
@supports (overflow-x: clip){
  body{ overflow-x:visible; }
}

body.nav-open{ overflow:hidden; }

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-head);
  color: var(--ink);
  margin:0 0 .5em;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.02em;
}

p{ margin:0 0 1rem; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }

::selection{ background: rgba(187,62,151,.18); color: var(--plum-ink); }

.container{
  width:100%;
  max-width:1220px;
  margin-inline:auto;
  padding-inline:24px;
}

/* --------------------------------------------------------------
   3. SHARED TYPE PATTERNS
   -------------------------------------------------------------- */
.display-lg{
  font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.35rem);
  line-height:1.08;
  letter-spacing:-.03em;
}

.gradient-text{
  background: var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.section-header{
  max-width: 760px;
  margin-bottom: clamp(40px, 5vw, 66px);
}

.section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-head);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
  color: var(--magenta);
  margin-bottom:18px;
}
/* the leading dash was removed at the client's request */
.section-eyebrow::before{ content:none; }

.section-header p{
  font-size:1.055rem;
  line-height:1.75;
  color: var(--ink-3);
  max-width:60ch;
  margin:18px 0 0;
}

/* --------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------- */
.btn-outline{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 34px;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.01em;
  color: var(--plum);
  background: var(--paper);
  border:1.5px solid rgba(90,46,145,.25);
  overflow:hidden;
  isolation:isolate;
  transition: color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn-outline::before{
  content:"";
  position:absolute; inset:0;
  background: var(--grad);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
  z-index:-1;
}
.btn-outline i{ transition: transform var(--t); font-size:.82em; }
.btn-outline:hover{
  color:#fff;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
}
.btn-outline:hover::before{ transform: translateY(0); }
.btn-outline:hover i{ transform: translateX(5px); }

/* --------------------------------------------------------------
   7. HEADER / DESKTOP NAV
   -------------------------------------------------------------- */
#navbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1100;
  height: var(--nav-h);
  display:flex;
  align-items:center;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border-bottom:1px solid var(--line-2);
  transition: height var(--t), background var(--t), box-shadow var(--t), border-color var(--t);
}
#navbar.is-stuck{
  height: 72px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 34px -22px rgba(36,16,56,.42);
  border-bottom-color: var(--line);
}

/* the container sits between the bar and the nav, so it has to pass the
   height down or the menu items cannot reach the bottom edge */
#navbar > .container{
  display:flex;
  align-items:center;
  height:100%;
}

.nav-inner{
  display:flex;
  align-items:center;
  gap:20px;
  width:100%;
  height:100%;
}

.nav-logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  transition: transform var(--t);
}
.nav-logo img{ transition: height var(--t); }
#navbar.is-stuck .nav-logo img{ height:52px !important; }
.nav-logo:hover{ transform: translateY(-1px); }

.nav-menu{
  display:flex;
  align-items:stretch;
  gap:2px;
  height:100%;
  margin-left:auto;
}

/* Full height items mean the pointer never leaves the trigger on its way
   down to the panel, which sits flush against the bar. */
.nav-item{
  position:relative;
  display:flex;
  align-items:center;
}

.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 15px;
  border-radius: var(--r-sm);
  font-family: var(--font-head);
  font-size:.93rem;
  font-weight:650;
  color: var(--ink);
  letter-spacing:-.005em;
  white-space:nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-link i{
  font-size:.62em;
  color: var(--ink-3);
  transition: transform var(--t), color var(--t);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:15px; right:15px; bottom:4px;
  height:2px;
  border-radius:2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .34s var(--ease-out);
}
.nav-link:hover,
.nav-item:hover > .nav-link,
.nav-item.is-open > .nav-link{ color: var(--plum); }
.nav-item:hover > .nav-link::after,
.nav-item.is-open > .nav-link::after{ transform: scaleX(1); }
.nav-item:hover > .nav-link i,
.nav-item.is-open > .nav-link i{ transform: rotate(180deg); color: var(--magenta); }

.nav-link.is-active{ color: var(--plum); }
.nav-link.is-active::after{ transform: scaleX(1); }

/* ---- Dropdown / mega panel ---- */
.nav-item > .dropdown-menu{
  position:absolute;
  top: 100%;
  left:50%;
  transform: translate(-50%, 12px);
  min-width:260px;
  padding:26px 22px 20px;
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .3s var(--ease), transform .34s var(--ease-out), visibility .3s;
}
/* a slim safety strip in case a sub-pixel seam remains */
.nav-item > .dropdown-menu::before{
  content:"";
  position:absolute;
  top:-6px; left:0; right:0;
  height:6px;
}
.nav-item > .dropdown-menu::after{
  content:"";
  position:absolute;
  top:0; left:22px; right:22px;
  height:3px;
  border-radius:0 0 3px 3px;
  background: var(--grad);
}
.nav-item:hover > .dropdown-menu,
.nav-item:focus-within > .dropdown-menu,
.nav-item.is-open > .dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translate(-50%, 0);
}


.dropdown-menu > a{
  display:block;
  position:relative;
  padding:8px 12px 8px 16px;
  border-radius:9px;
  font-size:.875rem;
  font-weight:500;
  line-height:1.45;
  color: var(--ink-2);
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.dropdown-menu > a::before{
  content:"";
  position:absolute;
  left:5px; top:50%;
  width:4px; height:4px;
  margin-top:-2px;
  border-radius:50%;
  background: var(--magenta);
  opacity:0;
  transform: scale(.4);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.dropdown-menu > a:hover{
  color: var(--plum);
  background: var(--tint);
  transform: translateX(3px);
}
.dropdown-menu > a:hover::before{ opacity:1; transform: scale(1); }

/* Submenu groups render as labelled columns, not nested flyouts */
.dropdown-submenu{ margin-bottom:18px; }

.dropdown-submenu > .submenu-link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 0 9px;
  margin-bottom:8px;
  border-bottom:1px solid var(--line-2);
  font-family: var(--font-head);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--plum);
  cursor:default;
}
.dropdown-submenu > .submenu-link .chevron-icon{ display:none; }

.sub-menu-level{
  display:block;
  position:static;
}
.sub-menu-level > a{
  display:block;
  position:relative;
  padding:7px 12px 7px 16px;
  border-radius:9px;
  font-size:.86rem;
  font-weight:500;
  line-height:1.4;
  color: var(--ink-2);
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.sub-menu-level > a::before{
  content:"";
  position:absolute;
  left:5px; top:50%;
  width:4px; height:4px;
  margin-top:-2px;
  border-radius:50%;
  background: var(--magenta);
  opacity:0;
  transform: scale(.4);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.sub-menu-level > a:hover{
  color: var(--plum);
  background: var(--tint);
  transform: translateX(3px);
}
.sub-menu-level > a:hover::before{ opacity:1; transform: scale(1); }

/* ---- Header CTA ---- */
.nav-cta{
  position:relative;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-left:14px;
  padding:13px 24px;
  border-radius: var(--r-pill);
  background: var(--grad);
  background-size:170% 100%;
  color:#fff;
  font-family: var(--font-head);
  font-weight:700;
  font-size:.9rem;
  white-space:nowrap;
  box-shadow: 0 12px 26px -14px rgba(187,62,151,.85);
  transition: background-position .5s var(--ease), transform var(--t), box-shadow var(--t);
}
.nav-cta i{ font-size:.78em; transition: transform var(--t); }
.nav-cta:hover{
  color:#fff;
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(187,62,151,.95);
}
.nav-cta:hover i{ transform: translateX(4px); }

/* ---- Hamburger ---- */
.nav-hamburger{
  display:none;
  flex:0 0 auto;
  width:46px; height:46px;
  margin-left:auto;
  border-radius:13px;
  border:1px solid var(--line);
  background: var(--paper);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  transition: border-color var(--t), background var(--t);
}
.nav-hamburger span{
  display:block;
  width:19px; height:2px;
  border-radius:2px;
  background: var(--ink);
  transition: transform var(--t), opacity var(--t-fast), width var(--t), margin var(--t);
}
.nav-hamburger span:nth-child(2){ width:13px; margin-left:-6px; }
.nav-hamburger:hover{ border-color: rgba(187,62,151,.4); background: var(--tint); }
.nav-hamburger:hover span:nth-child(2){ width:19px; margin-left:0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------
   8. MOBILE NAV
   -------------------------------------------------------------- */
.mobile-backdrop{
  position:fixed;
  inset:0;
  z-index:1190;
  background: rgba(30,14,50,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity:0;
  visibility:hidden;
  transition: opacity var(--t), visibility var(--t);
}
.mobile-backdrop.is-open{ opacity:1; visibility:visible; }

.nav-mobile{
  position:fixed;
  top:0; right:0;
  z-index:1200;
  width: min(408px, 90vw);
  height:100dvh;
  display:flex;
  flex-direction:column;
  background: var(--paper);
  box-shadow: -30px 0 70px -30px rgba(36,16,56,.5);
  transform: translateX(102%);
  visibility:hidden;
  transition: transform .48s var(--ease-out), visibility .48s;
}
.nav-mobile.is-open{ transform: translateX(0); visibility:visible; }

.mobile-nav-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  border-bottom:1px solid var(--line-2);
}
.mobile-logo img{ height:46px; width:auto; object-fit:contain; }

.mobile-close{
  width:42px; height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid var(--line);
  color: var(--ink);
  font-size:1rem;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.mobile-close:hover{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
  transform: rotate(90deg);
}

.mobile-nav-links{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:14px 14px 20px;
  -webkit-overflow-scrolling:touch;
}
.mobile-nav-links::-webkit-scrollbar{ width:5px; }
.mobile-nav-links::-webkit-scrollbar-thumb{ background: var(--paper-3); border-radius:5px; }

.mobile-link,
.mobile-dropdown-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 14px;
  border-radius:13px;
  font-family: var(--font-head);
  font-size:1rem;
  font-weight:700;
  color: var(--ink);
  transition: background var(--t-fast), color var(--t-fast);
}
.mobile-link + .mobile-link,
.mobile-dropdown + .mobile-link,
.mobile-link + .mobile-dropdown{ border-top:1px solid var(--line-2); }

.mobile-link:hover,
.mobile-link:active{ background: var(--tint); color: var(--plum); }

.mobile-dropdown{ border-top:1px solid var(--line-2); }
.mobile-dropdown-toggle i,
.mobile-submenu-toggle i{
  font-size:.7em;
  color: var(--ink-3);
  transition: transform var(--t), color var(--t);
}
.mobile-dropdown.is-open > .mobile-dropdown-toggle{ color: var(--plum); }
.mobile-dropdown.is-open > .mobile-dropdown-toggle i{ transform: rotate(180deg); color: var(--magenta); }

.mobile-dropdown-menu,
.mobile-submenu-menu{
  display:grid;
  grid-template-rows: 0fr;
  overflow:hidden;
  transition: grid-template-rows .42s var(--ease-out);
}
.mobile-dropdown-menu > *,
.mobile-submenu-menu > *{ min-height:0; }
.mobile-dropdown.is-open > .mobile-dropdown-menu,
.mobile-dropdown-submenu.is-open > .mobile-submenu-menu{ grid-template-rows: 1fr; }

.acc-inner > a{
  display:block;
  padding:11px 14px 11px 26px;
  border-radius:11px;
  font-size:.92rem;
  font-weight:500;
  color: var(--ink-2);
  position:relative;
  transition: background var(--t-fast), color var(--t-fast);
}
.acc-inner > a::before{
  content:"";
  position:absolute;
  left:12px; top:50%;
  width:5px; height:5px;
  margin-top:-2.5px;
  border-radius:50%;
  background: rgba(187,62,151,.35);
  transition: background var(--t-fast), transform var(--t-fast);
}
.acc-inner > a:hover,
.acc-inner > a:active{ background: var(--tint); color: var(--plum); }
.acc-inner > a:hover::before{ background: var(--magenta); transform: scale(1.3); }

.mobile-dropdown-submenu{
  margin:6px 0 6px 12px;
  padding-left:12px;
  border-left:2px solid var(--paper-3);
}
.mobile-submenu-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 14px 11px 12px;
  border-radius:11px;
  font-family: var(--font-head);
  font-size:.79rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--plum);
}
.mobile-dropdown-submenu.is-open > .mobile-submenu-toggle i{ transform: rotate(180deg); }

.mobile-nav-footer{
  flex:0 0 auto;
  padding:18px 20px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-2);
  background: var(--paper-2);
}
.mobile-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:16px 22px;
  border-radius: var(--r-pill);
  background: var(--grad);
  color:#fff;
  font-family: var(--font-head);
  font-weight:700;
  font-size:.95rem;
  box-shadow: 0 14px 30px -14px rgba(187,62,151,.85);
  transition: transform var(--t), box-shadow var(--t);
}
.mobile-cta i{ font-size:.78em; }
.mobile-cta:hover{ color:#fff; transform: translateY(-2px); }
.mobile-cta:active{ transform: scale(.985); }

/* --------------------------------------------------------------
   9. FOOTER
   -------------------------------------------------------------- */
#footer{
  position:relative;
  /* every section carries its own bottom padding, so a margin here only
     exposed a white band between a dark section and the footer */
  margin-top:0;
  background: linear-gradient(165deg, #241038 0%, #35184F 55%, #46205E 100%);
  color: rgba(255,255,255,.72);
  overflow:hidden;
}
/* the gradient rule that used to sit on top of the footer is gone at the
   client's request; the band now separates on its own colour */
#footer::before{ content:none; }
#footer::after{
  content:"";
  position:absolute;
  right:-14%; top:-30%;
  width:620px; height:620px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(187,62,151,.24), transparent 66%);
  pointer-events:none;
}

.footer-main{
  position:relative;
  z-index:1;
  padding: clamp(56px, 7vw, 86px) 0 clamp(36px, 4vw, 52px);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.25fr;
  gap: clamp(30px, 4vw, 56px);
}

.footer-logo{
  height:60px;
  width:auto;
  object-fit:contain;
  margin-bottom:22px;
  filter: brightness(0) invert(1);
  opacity:.96;
}

.footer-brand p{
  font-size:.935rem;
  line-height:1.8;
  color: rgba(255,255,255,.62);
  max-width:38ch;
  margin-bottom:26px;
}

.footer-social{ display:flex; gap:11px; }
.social-btn{
  width:42px; height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.8);
  font-size:.92rem;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.social-btn:hover{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
  transform: translateY(-4px);
}

.footer-col h4{
  font-family: var(--font-head);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 22px;
  padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.12);
  position:relative;
}
.footer-col h4::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  width:36px; height:2px;
  background: var(--grad);
}

.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col ul li a{
  position:relative;
  display:inline-block;
  font-size:.92rem;
  color: rgba(255,255,255,.65);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.footer-col ul li a::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:0; height:1.5px;
  margin-top:-.75px;
  border-radius:2px;
  background: var(--grad);
  transition: width var(--t-fast);
}
.footer-col ul li a:hover{ color:#fff; padding-left:20px; }
.footer-col ul li a:hover::before{ width:13px; }

.footer-contact-list{
  display:flex;
  flex-direction:column;
  gap:18px;
  font-size:.92rem;
  color: rgba(255,255,255,.68);
}
.footer-contact-list li{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.footer-contact-list i{
  flex:0 0 34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color: var(--magenta);
  font-size:.82rem;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.footer-contact-list li:hover i{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
}
.footer-contact-list a,
.footer-contact-list span{
  padding-top:5px;
  color:inherit;
  transition: color var(--t-fast);
}
.footer-contact-list a:hover{ color:#fff; }

.footer-bottom{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding:24px 0 30px;
  border-top:1px solid rgba(255,255,255,.1);
}
.footer-bottom p{
  margin:0;
  font-size:.86rem;
  color: rgba(255,255,255,.5);
}
.footer-bottom-links{ display:flex; gap:26px; }
.footer-bottom-links a{
  font-size:.86rem;
  color: rgba(255,255,255,.5);
  transition: color var(--t-fast);
}
.footer-bottom-links a:hover{ color:#fff; }
/* --------------------------------------------------------------
   12. MOBILE STICKY CTA BAR
   -------------------------------------------------------------- */
.mobile-sticky-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1060;
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border-top:1px solid var(--line);
  box-shadow: 0 -12px 30px -22px rgba(36,16,56,.5);
  transform: translateY(105%);
  transition: transform .45s var(--ease-out);
}
.mobile-sticky-cta.is-ready{ transform: translateY(0); }

.msc-book{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  height:50px;
  border-radius:15px;
  background: var(--plum-ink);
  color:#fff;
  font-family: var(--font-head);
  font-weight:700;
  font-size:.94rem;
  transition: transform var(--t-fast);
}
.msc-book i{ font-size:.76em; }
.msc-book:active{ transform: scale(.985); color:#fff; }

/* --------------------------------------------------------------
   13. IMAGE PLACEHOLDER SYSTEM
   -------------------------------------------------------------- */
.img-holder{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(120deg, rgba(90,46,145,.10) 0%, rgba(187,62,151,.10) 100%),
    var(--paper-2);
}
.img-holder::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(45deg, rgba(90,46,145,.05) 25%, transparent 25%, transparent 75%, rgba(90,46,145,.05) 75%),
    linear-gradient(45deg, rgba(90,46,145,.05) 25%, transparent 25%, transparent 75%, rgba(90,46,145,.05) 75%);
  background-size:26px 26px;
  background-position:0 0, 13px 13px;
}
.img-holder::after{
  content:"\f03e";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:1.9rem;
  color: rgba(90,46,145,.24);
}
.img-holder > img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
}
.img-holder > img.img-missing{ display:none; }

/* --------------------------------------------------------------
   14. SCROLL REVEAL
   -------------------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform: translateY(26px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform: translateX(-30px); }
[data-reveal="right"]{ transform: translateX(30px); }
[data-reveal="zoom"]{ transform: scale(.955); }

/* --------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------- */
@media (max-width:1180px){
  .nav-link{ padding:10px 11px; font-size:.88rem; }
  .nav-cta{ padding:12px 19px; font-size:.85rem; margin-left:8px; }
  }

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

  .nav-menu,
  .nav-cta{ display:none; }
  .nav-hamburger{ display:flex; }

  #navbar{ background: rgba(255,255,255,.94); }
  .nav-logo img{ height:48px !important; }
  #navbar.is-stuck{ height:62px; }
  #navbar.is-stuck .nav-logo img{ height:42px !important; }

  .footer-grid{ grid-template-columns: repeat(2, 1fr); gap:38px; }
  .footer-brand{ grid-column: 1 / -1; }
  .footer-brand p{ max-width:56ch; }
}

@media (max-width:768px){
  .container{ padding-inline:20px; }

  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .footer-bottom-links{ gap:20px; }
}

@media (max-width:560px){
  .footer-grid{ grid-template-columns: 1fr; gap:34px; }
  .btn-outline{ width:100%; justify-content:center; }
  .nav-mobile{ width:100%; }
  .footer-brand p{ max-width:none; }
}

/* --------------------------------------------------------------
   16. ACCESSIBILITY
   -------------------------------------------------------------- */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--magenta);
  outline-offset:3px;
  border-radius:6px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* --------------------------------------------------------------
   17. PAGE BANNER (shared by every inner page)
   -------------------------------------------------------------- */
.breadcrumb-banner{
  position:relative;
  margin-top: var(--nav-h);
  min-height: clamp(190px, 21vw, 280px);
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background: var(--plum-ink);
}

/* The band has no photograph behind it: this gradient is the banner */
.breadcrumb-banner .banner-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(to top, rgba(28,12,46,.92) 0%, rgba(28,12,46,.42) 48%, rgba(28,12,46,.30) 100%),
    linear-gradient(115deg, rgba(90,46,145,.88) 0%, rgba(187,62,151,.62) 100%);
}

/* Hairline grid texture so the flat overlay does not read as a filter */
.breadcrumb-banner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 116px 100%;
  pointer-events:none;
}

/* Soft brand bloom in the corner */
.breadcrumb-banner::after{
  content:"";
  position:absolute;
  right:-12%; top:-45%;
  width:560px; height:560px;
  border-radius:50%;
  z-index:2;
  background: radial-gradient(circle, rgba(187,62,151,.55), transparent 62%);
  pointer-events:none;
}



.banner-content{
  position:relative;
  z-index:3;
  width:100%;
  padding-block: clamp(34px, 3.8vw, 52px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}

.banner-title{
  font-family: var(--font-head);
  font-weight:800;
  /* size lives in type.css with the rest of the scale */
  color:#fff;
  margin:0;
  max-width:24ch;
  text-shadow: 0 14px 40px rgba(20,8,36,.4);
  animation: banner-title-in .9s var(--ease-out) .12s both;
}
@keyframes banner-title-in{
  from{ transform: translateY(20px); opacity:0; }
  to  { transform: translateY(0); opacity:1; }
}

/* one line of context under the title, in place of the old rule */
/* The lines run from 59 to 84 characters. At the old 62ch measure the
   short ones sat on one line and the long ones on two, which is what
   read as unbalanced. Measured: 59 characters need 441px and 84 need
   about 600px, so a 40ch box (390px) wraps the shortest while keeping
   the longest under two lines. All 33 break to exactly two. */
.banner-sub{
  margin:.7rem 0 0;
  max-width:40ch;
  color: rgba(255,255,255,.8);
  line-height:1.6;
  text-shadow: 0 8px 24px rgba(20,8,36,.35);
  animation: banner-title-in .9s var(--ease-out) .24s both;
}

/* --------------------------------------------------------------
   18. MEGA PANEL  (Our Services)
   Four labelled columns beside a call card.
   -------------------------------------------------------------- */
.nav-item.has-mega{ position:static; }

.mega-panel{
  width: min(1180px, calc(100vw - 40px));
  padding: 34px 34px 30px !important;
  left:50% !important;
  transform: translate(-50%, 12px) !important;
}
.nav-item.has-mega:hover > .mega-panel,
.nav-item.has-mega:focus-within > .mega-panel,
.nav-item.has-mega.is-open > .mega-panel{ transform: translate(-50%, 0) !important; }

.mega-cols{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr)) 260px;
  gap: 26px;
  align-items:start;
}

.mega-col{ display:flex; flex-direction:column; gap:2px; min-width:0; }

.mega-title{
  display:block;
  padding:0 0 10px;
  margin-bottom:8px;
  border-bottom:1px solid var(--line-2);
  font-family: var(--font-head);
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color: var(--magenta);
}

.mega-col > a{
  position:relative;
  display:block;
  padding:8px 10px 8px 12px;
  border-radius:9px;
  font-weight:500;
  line-height:1.45;
  color: var(--ink-2);
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.mega-col > a::before{
  content:"";
  position:absolute;
  left:2px; top:50%;
  width:4px; height:4px;
  margin-top:-2px;
  border-radius:50%;
  background: var(--magenta);
  opacity:0;
  transform: scale(.4);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.mega-col > a:hover{
  color: var(--plum);
  background: var(--tint);
  transform: translateX(3px);
}
.mega-col > a:hover::before{ opacity:1; transform: scale(1); }

/* the call card */
.mega-aside{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:26px 24px;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #4A2278 0%, #7E2F86 55%, #BB3E97 100%);
  color:#fff;
}
.mega-aside-label{
  font-family: var(--font-head);
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color: rgba(255,255,255,.82);
}
.mega-aside p{
  margin:0;
  line-height:1.65;
  color: rgba(255,255,255,.92);
}
.mega-aside-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:auto;
  padding:13px 20px;
  border-radius: var(--r-pill);
  background:#fff;
  color: var(--plum);
  font-family: var(--font-head);
  font-weight:700;
  line-height:1.3;
  transition: transform var(--t), box-shadow var(--t);
}
.mega-aside-cta:hover{
  color: var(--plum);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(0,0,0,.5);
}

@media (max-width:1240px){
  .mega-cols{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .mega-aside{ display:none; }
}

/* --------------------------------------------------------------
   19. UNIVERSAL IMAGE PLACEHOLDER
   Every image sits on a branded panel, so a slot reads as
   deliberate whether or not the photograph has arrived.
   -------------------------------------------------------------- */
img:not(.nav-logo img):not(.mobile-logo img):not(.footer-logo){
  background:
    linear-gradient(120deg, rgba(90,46,145,.10) 0%, rgba(187,62,151,.10) 100%),
    var(--paper-2);
}

/* a failed image never shows its alt text or a broken glyph */
img.img-missing{
  font-size:0 !important;
  color:transparent !important;
}

/* and its container shows the placeholder mark */
.has-placeholder{ position:relative; }
.has-placeholder::after{
  content:"\f03e";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:1.9rem;
  color: rgba(90,46,145,.24);
  pointer-events:none;
  z-index:1;
}

/* --------------------------------------------------------------
   Footer links are 23px tall, which is a small target on a phone.
   Below the tablet breakpoint they take vertical padding so each one
   clears a comfortable tap size without changing how they look.
   -------------------------------------------------------------- */
@media (max-width:768px){
  .footer-col ul{ gap:4px; }
  .footer-col ul li a{
    padding-block:9px;
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .footer-col ul li a:hover{ padding-left:20px; }

  /* the legal links at the very bottom need the same room */
  .footer-bottom-links a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding-block:9px;
  }
}

/* --------------------------------------------------------------
   FOOTER  ·  light ground, full colour mark
   The footer logo used to be flattened to a white silhouette with a
   brightness/invert filter so it would read on the dark plum. Dropping
   the filter shows the same artwork as the header, which only works on
   a light ground, so the band and its text move with it.
   -------------------------------------------------------------- */
#footer{
  /* deeper than the tinted band the FAQ sits on, so the footer still
     reads as its own field where the two meet */
  background: linear-gradient(165deg, #F1E9F7 0%, #E6D9F0 100%);
  color: var(--ink-2);
  border-top:1px solid var(--line);
}
/* the glow was tuned for a dark band; on a light one it only needs a hint */
#footer::after{
  background: radial-gradient(circle, rgba(187,62,151,.10), transparent 66%);
}

/* the mark itself: identical to the header, at the footer's size */
.footer-logo{
  filter:none;
  opacity:1;
}

/* ink-3 only reaches 4.2:1 on this ground, so footer copy uses ink-2 */
.footer-brand p{ color: var(--ink-2); }

.social-btn{
  border:1px solid var(--line);
  background: var(--paper);
  color: var(--plum);
}
.social-btn:hover{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
}

.footer-col h4{
  color: var(--ink);
  border-bottom:1px solid var(--line);
}

.footer-col ul li a{ color: var(--ink-2); }
.footer-col ul li a:hover{ color: var(--plum); }

.footer-contact-list{ color: var(--ink-2); }
.footer-contact-list i{
  background: var(--paper);
  border:1px solid var(--line);
  color: var(--magenta);
}
.footer-contact-list li:hover i{
  background: var(--grad);
  border-color:transparent;
  color:#fff;
}
.footer-contact-list a:hover{ color: var(--plum); }

.footer-bottom{ border-top:1px solid var(--line); }
.footer-bottom p,
.footer-bottom-links a{ color: var(--ink-2); }
.footer-bottom-links a:hover{ color: var(--plum); }

/* --------------------------------------------------------------
   PHONE AND TABLET CTAs
   The sticky bar carries the booking action on its own, and calling
   The breakpoint matches the one where the menu becomes the drawer.
   -------------------------------------------------------------- */
@media (max-width:1024px){
  .mobile-sticky-cta{ display:flex; }
  .mobile-sticky-cta .msc-book{ flex:1 1 auto; }

  body{ padding-bottom:76px; }
}

/* --------------------------------------------------------------
   NARROW SCREEN SAFETY NET
   Nothing here changes a layout that already fits. It stops a single
   long word, an email address or a stray fixed width from pushing a
   line past the screen edge, which the root's overflow clip would
   otherwise hide by cutting the text off rather than wrapping it.
   -------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
p, li, span, a, label, blockquote, figcaption{
  overflow-wrap: break-word;
}

/* the page shell can never be wider than the screen */
.container{ max-width: min(1220px, 100%); }

@media (max-width:768px){
  /* headings are the most likely to hold an unbreakable term */
  h1, h2, h3{ word-break: break-word; }
}

/* --------------------------------------------------------------
   ENTRY ANIMATIONS ON NARROW SCREENS
   AOS starts fade-left / fade-right elements 100px to the side and
   slides them home. On a phone that 100px is wider than the margin,
   so until the animation runs the element sticks out past the screen
   and the root's clip cuts it off instead of wrapping it. Sideways
   entry is replaced with a vertical one here, which cannot overflow.
   The tripled attribute selector matches AOS's own specificity.
   -------------------------------------------------------------- */
@media (max-width:1024px){
  [data-aos^="fade-left"][data-aos^="fade-left"][data-aos^="fade-left"],
  [data-aos^="fade-right"][data-aos^="fade-right"][data-aos^="fade-right"],
  [data-aos^="zoom-in-left"][data-aos^="zoom-in-left"][data-aos^="zoom-in-left"],
  [data-aos^="zoom-in-right"][data-aos^="zoom-in-right"][data-aos^="zoom-in-right"],
  [data-aos^="zoom-out-left"][data-aos^="zoom-out-left"][data-aos^="zoom-out-left"],
  [data-aos^="zoom-out-right"][data-aos^="zoom-out-right"][data-aos^="zoom-out-right"]{
    transform: translate3d(0, 28px, 0) !important;
  }
  [data-aos^="fade-left"][data-aos^="fade-left"].aos-animate,
  [data-aos^="fade-right"][data-aos^="fade-right"].aos-animate,
  [data-aos^="zoom-in-left"][data-aos^="zoom-in-left"].aos-animate,
  [data-aos^="zoom-in-right"][data-aos^="zoom-in-right"].aos-animate,
  [data-aos^="zoom-out-left"][data-aos^="zoom-out-left"].aos-animate,
  [data-aos^="zoom-out-right"][data-aos^="zoom-out-right"].aos-animate{
    transform: translate3d(0, 0, 0) !important;
  }
}


/* The social row closes the Contact Us column under its own heading.
   That heading carries the gap, so the row sits tight beneath it the
   way each list sits beneath its own column title. */
.footer-contact .footer-social{ margin-top:0; }
.footer-col h4.footer-social-head{ margin-top:30px; }

/* Email and location in the contact cards are links now. `a` inherits
   colour site wide, so the cards look exactly as they did; the underline
   only appears on hover, which is what marks them as clickable. */
.contact-card p a{
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition: opacity var(--t-fast);
}
.contact-card p a:hover{ text-decoration:underline; }