/* =========================================================
   Self-hosted fonts
   Playfair Display and Inter, downloaded from Google Fonts and
   served locally. Both ship as variable woff2 files, so one file
   per style covers the full weight range — matching exactly the
   weights/styles previously loaded from fonts.googleapis.com.
   ========================================================= */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/Inter-Variable.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('../fonts/PlayfairDisplay-Variable.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/PlayfairDisplay-Italic-Variable.woff2') format('woff2');
}

/* =========================================================
   Dr Bob Achila — design tokens
   ========================================================= */
:root{
  --color-navy-900:#0f1d33;
  --color-navy-800:#152a4a;
  --color-navy-700:#1d3660;
  --color-ivory:#f7f2e9;
  --color-ivory-deep:#f0e8d8;
  --color-white:#ffffff;
  --color-gold:#c9a45c;
  --color-gold-soft:#e4d3ac;
  --color-gold-ink:#8a6a2c;
  --color-ink:#1b2333;
  --color-ink-soft:#525c6e;
  --color-on-navy:#f4f1ea;
  --color-on-navy-soft:rgba(244,241,234,.74);
  --color-border:rgba(27,35,51,.12);
  --color-border-on-navy:rgba(244,241,234,.18);

  --font-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --container-w:1200px;
  --radius:4px;
  --shadow-sm:0 1px 2px rgba(15,29,51,.06);
  --shadow-md:0 12px 32px -12px rgba(15,29,51,.28);

  --header-h:78px;
}

/* =========================================================
   Reset
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}
body{margin:0;background:var(--color-ivory);color:var(--color-ink);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,p,address,figure{margin:0;}
address{font-style:normal;}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit;}
[hidden]{display:none!important;}
:focus-visible{outline:2px solid var(--color-gold);outline-offset:3px;}

.container{max-width:var(--container-w);margin-inline:auto;padding-inline:24px;}

.skip-link{position:fixed;top:-100%;left:12px;background:var(--color-navy-900);color:var(--color-on-navy);padding:12px 18px;border-radius:var(--radius);z-index:200;transition:top .15s ease;}
.skip-link:focus{top:12px;}

.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.icon-sm{width:16px;height:16px;}
.icon-lg{width:30px;height:30px;stroke-width:1.3;}

/* =========================================================
   Type
   ========================================================= */
.eyebrow{
  font-family:var(--font-sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-gold-ink);
  margin:0 0 14px;
}
.eyebrow-on-navy{color:var(--color-gold);}

h2{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(1.7rem,1.35rem + 1.6vw,2.5rem);
  line-height:1.18;
  color:var(--color-navy-900);
  max-width:20ch;
}
.section-head{max-width:640px;margin-bottom:48px;}
.section-lede{margin-top:16px;font-size:1.05rem;color:var(--color-ink-soft);max-width:52ch;}
.section-head-on-navy h2{color:var(--color-on-navy);}
.section-lede-on-navy{color:var(--color-on-navy-soft);}

section{padding-block:clamp(56px,8vw,104px);}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:600;font-size:.95rem;
  padding:13px 24px;border-radius:var(--radius);
  border:1px solid transparent;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-gold{background:var(--color-gold);color:var(--color-navy-900);}
.btn-gold:hover{background:#d7b673;}
.btn-gold-outline{border-color:var(--color-gold);color:var(--color-gold-ink);background:transparent;}
.btn-gold-outline:hover{background:var(--color-gold);color:var(--color-navy-900);}
.btn-outline{border-color:var(--color-navy-900);color:var(--color-navy-900);}
.btn-outline:hover{background:var(--color-navy-900);color:var(--color-on-navy);}
.btn-outline-on-navy{border-color:var(--color-border-on-navy);color:var(--color-on-navy);}
.btn-outline-on-navy:hover{background:rgba(244,241,234,.08);border-color:var(--color-on-navy-soft);}
.btn-text{color:var(--color-navy-900);font-weight:600;font-size:.92rem;padding:13px 6px;}
.btn-text:hover{color:var(--color-gold-ink);}

.text-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--color-navy-900);font-size:.94rem;margin-top:18px;}
.text-link .icon{transition:transform .15s ease;}
.text-link:hover{color:var(--color-gold-ink);}
.text-link:hover .icon{transform:translateX(3px);}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(247,242,233,.92);backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--color-border);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--header-h);gap:16px;
}
.brand{display:flex;flex-direction:column;gap:2px;line-height:1.1;}
.brand-name{font-family:var(--font-serif);font-weight:600;font-size:1.35rem;color:var(--color-navy-900);}
.brand-subtitle{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-soft);}

.nav-toggle{display:none;padding:8px;color:var(--color-navy-900);}
.nav-toggle .icon-close{display:none;}

.site-nav{display:flex;align-items:center;gap:30px;}
.site-nav a{font-size:.92rem;font-weight:500;color:var(--color-ink);}
.site-nav a:hover{color:var(--color-gold-ink);}
.nav-cta{margin-left:6px;padding:11px 20px;}

/* =========================================================
   Hero
   ========================================================= */
.hero{background:linear-gradient(180deg,var(--color-navy-900),var(--color-navy-800));color:var(--color-on-navy);overflow:hidden;}
.hero-inner{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;
  padding-block:clamp(48px,7vw,88px);
}
.hero-title{font-family:var(--font-serif);font-weight:700;font-size:clamp(2.6rem,2rem + 3vw,4.2rem);line-height:1.04;margin:0 0 14px;color:var(--color-white);}
.hero-role{font-size:clamp(1.05rem,.95rem + .4vw,1.25rem);color:var(--color-on-navy);margin-bottom:10px;font-weight:500;}
.hero-focus{font-family:var(--font-serif);font-style:italic;font-size:1.05rem;color:var(--color-gold-soft);margin-bottom:22px;}
.hero-copy{max-width:46ch;color:var(--color-on-navy-soft);font-size:1.03rem;margin-bottom:32px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px;}
.hero-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 22px;}
.hero-trust li{display:flex;align-items:flex-start;gap:9px;font-size:.85rem;line-height:1.4;color:var(--color-on-navy-soft);}
.hero-trust .icon{color:var(--color-gold);width:18px;height:18px;margin-top:1px;}

.hero-portrait{position:relative;width:100%;aspect-ratio:4/5;border-radius:6px;overflow:hidden;box-shadow:var(--shadow-md);}
.hero-portrait img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 12%;
}

/* =========================================================
   Services
   ========================================================= */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.service-card{
  background:var(--color-white);border:1px solid var(--color-border);
  border-radius:6px;padding:34px 30px;position:relative;
}
.service-number{
  display:block;font-family:var(--font-serif);font-size:.85rem;font-weight:600;
  color:var(--color-gold-ink);letter-spacing:.08em;margin-bottom:18px;
}
.service-card .icon-lg{color:var(--color-navy-800);margin-bottom:18px;}
.service-card h3{font-family:var(--font-serif);font-weight:600;font-size:1.22rem;color:var(--color-navy-900);margin-bottom:12px;line-height:1.3;}
.service-card p{color:var(--color-ink-soft);font-size:.95rem;}

/* =========================================================
   Locations
   ========================================================= */
.locations{background:var(--color-white);}
.location-grid{display:grid;grid-template-columns:65fr 35fr;gap:28px;margin-bottom:32px;}
.location-card{
  border:1px solid var(--color-border);border-radius:6px;padding:34px;
  background:var(--color-ivory);
}
.location-card--emphasis{padding:40px;}
.location-card--emphasis h3{font-size:1.45rem;}
.location-card h3{font-family:var(--font-serif);font-weight:600;font-size:1.3rem;color:var(--color-navy-900);margin-bottom:14px;}
.location-card-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 28px;
  margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--color-border);
}
.location-card-head h3{margin-bottom:0;}
.location-card-head-text{flex:1 1 220px;min-width:200px;}
.location-card-head-text h3{margin-bottom:10px;}
.location-brand{
  width:42%;min-width:180px;max-width:300px;height:auto;flex-shrink:0;
  border-radius:4px;border:1px solid var(--color-border);
}
.location-card address{color:var(--color-ink-soft);font-size:.95rem;line-height:1.7;margin-bottom:18px;}
.location-card-head-text address{margin-bottom:0;}
.location-label{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-navy-800);margin-bottom:10px;}
.location-note{color:var(--color-ink-soft);font-size:.92rem;margin-bottom:18px;}
.location-services{display:grid;gap:8px;margin-bottom:24px;}
.location-services li{font-size:.92rem;color:var(--color-ink-soft);padding-left:16px;position:relative;}
.location-services li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:1px;background:var(--color-gold-ink);}
.location-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;}

.hospital-panel{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  background:var(--color-navy-900);color:var(--color-on-navy);
  border-radius:6px;padding:36px;
}
.hospital-panel .icon-lg{color:var(--color-gold);margin-top:4px;}
.hospital-panel h3{font-family:var(--font-serif);font-weight:600;font-size:1.25rem;margin-bottom:12px;color:var(--color-white);}
.hospital-panel p{color:var(--color-on-navy-soft);font-size:.94rem;margin-bottom:10px;max-width:64ch;}
.hospital-panel p:last-child{margin-bottom:0;}

/* =========================================================
   About
   ========================================================= */
.about-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;}
.about-portrait{position:relative;width:100%;aspect-ratio:4/5;border-radius:6px;overflow:hidden;box-shadow:var(--shadow-md);}
.about-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;}
.about-content p{color:var(--color-ink-soft);font-size:1rem;margin-bottom:16px;max-width:56ch;}

.training-heading{
  font-family:var(--font-sans);font-weight:700;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-navy-800);
  margin:8px 0 22px;padding-top:24px;border-top:1px solid var(--color-border);
}
.training-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 36px;margin-bottom:4px;}
.training-item h3{font-family:var(--font-sans);font-weight:700;font-size:1rem;color:var(--color-navy-900);margin:0 0 8px;line-height:1.35;}
.training-item p{margin:0;font-size:.92rem;color:var(--color-ink-soft);line-height:1.68;}
.training-item strong{color:var(--color-ink);font-weight:600;}

/* =========================================================
   Contact
   ========================================================= */
.contact{background:linear-gradient(180deg,var(--color-navy-800),var(--color-navy-900));}
.contact .section-head{margin-inline:auto;text-align:center;max-width:560px;}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;margin-inline:auto;}
.contact-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  background:rgba(244,241,234,.05);border:1px solid var(--color-border-on-navy);
  border-radius:6px;padding:30px 20px;transition:background .15s ease,border-color .15s ease;
}
.contact-card:hover{background:rgba(244,241,234,.09);border-color:var(--color-gold);}
.contact-card .icon-lg{color:var(--color-gold);}
.contact-label{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-on-navy-soft);}
.contact-value{font-family:var(--font-serif);font-size:1.05rem;color:var(--color-white);}
.contact-reassurance{text-align:center;color:var(--color-on-navy-soft);font-size:.88rem;margin-top:32px;}

/* graceful WhatsApp fallback: if only 2 contact cards remain, keep them centred and matched in width */
.contact-grid:has(.js-whatsapp[hidden]){grid-template-columns:repeat(2,minmax(0,240px));}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{background:var(--color-navy-900);color:var(--color-on-navy-soft);padding-top:56px;}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;padding-bottom:36px;border-bottom:1px solid var(--color-border-on-navy);}
.footer-name{font-family:var(--font-serif);font-size:1.35rem;color:var(--color-white);margin-bottom:6px;}
.footer-title,.footer-place{font-size:.88rem;color:var(--color-on-navy-soft);}
.footer-nav{display:flex;flex-wrap:wrap;gap:20px 26px;align-content:start;}
.footer-nav a{font-size:.88rem;color:var(--color-on-navy-soft);}
.footer-nav a:hover{color:var(--color-gold);}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-block:22px;font-size:.8rem;}

/* =========================================================
   Mobile sticky action bar
   ========================================================= */
.mobile-action-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--color-navy-900);border-top:1px solid var(--color-border-on-navy);
  padding:10px max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-right));
  gap:8px;
}
.mobile-action-bar a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:.72rem;font-weight:600;color:var(--color-on-navy-soft);padding:6px 4px;border-radius:6px;
}
.mobile-action-bar a.is-primary{background:var(--color-gold);color:var(--color-navy-900);}
.mobile-action-bar .icon{width:18px;height:18px;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .service-grid{grid-template-columns:1fr;}
  .location-grid{grid-template-columns:1fr;}
  .about-inner{grid-template-columns:1fr;gap:36px;}
  .about-portrait{max-width:360px;margin-inline:auto;}
  .contact-grid{grid-template-columns:1fr;max-width:360px;}
  .contact-grid:has(.js-whatsapp[hidden]){grid-template-columns:1fr;max-width:360px;}
}

@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:36px;}
  .hero-portrait{order:-1;max-width:420px;margin-inline:auto;width:70%;}
  .hero-content{text-align:left;}
}

/* Header nav gets its own (wider) breakpoint: with five nav links, the
   brand lockup and the CTA button, the horizontal nav starts wrapping
   awkwardly well before typical tablet widths — so tablets get the
   off-canvas menu too, not just phones. */
@media (max-width:1180px){
  :root{--header-h:64px;}

  .nav-toggle{display:inline-flex;}
  .site-nav{
    position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:120;
    height:calc(100vh - var(--header-h));background:var(--color-ivory);
    flex-direction:column;align-items:flex-start;gap:2px;padding:20px 24px 90px;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
    overflow-y:auto;
  }
  .site-nav.is-open{
    opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear 0s;
  }
  .site-nav a{width:100%;padding:14px 4px;border-bottom:1px solid var(--color-border);font-size:1rem;}
  .nav-cta{margin-left:0;margin-top:14px;justify-content:center;}

  body.nav-open{overflow:hidden;}
  .nav-toggle[aria-expanded="true"] .icon-open{display:none;}
  .nav-toggle[aria-expanded="true"] .icon-close{display:inline-flex;}
}

@media (max-width:760px){

  .hero-ctas .btn{flex:1 1 auto;}
  .hero-trust{grid-template-columns:1fr;gap:12px;}

  .location-card-head{align-items:flex-start;}
  .location-card-head-text{flex-basis:100%;}
  .location-brand{width:min(220px,60%);}

  .training-grid{grid-template-columns:1fr;gap:20px;}

  .footer-inner{flex-direction:column;}

  .mobile-action-bar{display:flex;}
  body{padding-bottom:72px;}
}

@media (max-width:480px){
  .container{padding-inline:18px;}
  .service-card,.location-card{padding:26px 22px;}
  .hospital-panel{grid-template-columns:1fr;padding:26px;}
}