/* Hamley House Medical. Their colours and typeface, measured off the live site:
   teal #157970 (Elementor primary), mist #A9D0D3 (Elementor text colour, used as the
   section ground), card teal #599D9C, Poppins throughout. Self-hosted: no Google request. */
@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/poppins-700.woff2) format("woff2")}

:root{
  --teal:#157970; --teal-dk:#0f5e57; --mist:#A9D0D3; --pale:#F3F9F9;
  /* their card colour is #599D9C; white text on it is 3.3:1, so cards use a
     darker step of the same hue: 4.95:1 (measured, not estimated) */
  --card:#3A7A79; --ink:#14201f; --ink-2:#3c4a4a; --white:#fff; --line:#d5e6e7;
  --wrap:1240px; --r:12px; --r-s:8px;
  --shadow:0 1px 2px rgba(10,40,38,.06),0 8px 24px rgba(10,40,38,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.7 Poppins,system-ui,sans-serif;letter-spacing:.01em}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
a:hover{color:var(--teal-dk)}
:focus-visible{outline:3px solid #9a4a06;outline-offset:2px;border-radius:4px;box-shadow:0 0 0 6px #fff}
h1,h2,h3,h4{font-weight:700;line-height:1.2;margin:0 0 .6em;text-wrap:balance;color:var(--teal)}
h2,.h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.6rem)}
h3,.h3{font-size:1.3rem}
h4{font-size:1.02rem;color:var(--ink);margin-top:1.2em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:860px}
.center{text-align:center}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--teal);color:#fff;padding:8px 14px;border-radius:6px;z-index:50}
.skip:focus{left:8px}

/* icons */
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.18em}
.ic-a{width:1em;height:1em;margin-left:.45em}
.ic-l{width:44px;height:44px;stroke-width:1.5;color:var(--teal);margin:0 auto 14px;display:block}
.ic-s{width:18px;height:18px;fill:currentColor}

/* buttons: their pill, dark teal, arrow */
.btn{display:inline-flex;align-items:center;gap:.1em;background:var(--teal);color:#fff;font-weight:600;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.85em 1.6em;border-radius:999px;text-decoration:none;border:2px solid var(--teal);transition:background .2s,transform .2s}
.btn:hover{background:var(--teal-dk);border-color:var(--teal-dk);color:#fff;transform:translateY(-1px)}
.btn .ic:not(.ic-a){margin-right:.5em}
.btn-sm{font-size:.82rem;padding:.6em 1.25em;text-transform:none;letter-spacing:.02em}
.btn-dk{background:var(--teal-dk);border-color:var(--teal-dk)}
.btn-o{background:transparent;color:var(--teal)}
.btn-o:hover{background:var(--teal);color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.4em}
.btns-c{justify-content:center}

/* header */
.hd{position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 1px 0 var(--line)}
.hd-in{max-width:1440px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:20px;min-height:96px}
.logo img{width:150px;height:auto}
.nav{margin-left:auto}
.nav>ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;align-items:center}
.nav li{position:relative}
.nav>ul>li>a{display:block;padding:10px 14px;font-weight:600;font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.nav>ul>li>a:hover,.nav li.cur>a{color:var(--teal)}
.nav li.cur>a{box-shadow:inset 0 -2px 0 var(--teal)}
.has-sub{display:flex;align-items:center}
.has-sub>a{padding-right:2px!important}
.sub-t{background:none;border:0;padding:6px 8px 6px 2px;color:var(--ink);cursor:pointer;display:flex}
.sub-t .ic{width:16px;height:16px}
.sub{position:absolute;top:100%;left:0;min-width:270px;list-style:none;margin:0;padding:8px;background:#fff;border-radius:var(--r-s);box-shadow:var(--shadow);border:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.has-sub:hover:not(.shut) .sub,.has-sub:focus-within:not(.shut) .sub,.has-sub.open .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:9px 12px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:.92rem}
.sub a:hover,.sub a[aria-current]{background:var(--pale);color:var(--teal)}
.hd-act{display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;font-weight:600;padding:10px 20px;border-radius:999px;text-decoration:none;white-space:nowrap;margin-right:8px}
.pill:hover{background:var(--teal-dk);color:#fff}
.soc{width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.soc:hover{background:var(--teal-dk);color:#fff}
.nav-d{display:none}

/* the practice's notice (set in /editor/): a calm band under the header, not an alarm */
.notice{background:#fdf3d8;border-bottom:1px solid #ecd9a4;color:var(--ink);font-size:.95rem}
.notice .wrap{padding-top:12px;padding-bottom:12px}
.notice strong{color:var(--teal-dk);margin-right:.35em}
/* hero: their full-bleed photo with a dark wash and white type */
.hero{position:relative;color:#fff;min-height:min(78vh,820px);display:flex;align-items:center;overflow:hidden;background:#1d2b33}
.hero-s{min-height:min(52vh,520px)}
.hero-home{min-height:calc(100vh - 96px - 70px)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,26,40,.78) 0%,rgba(14,26,40,.6) 45%,rgba(14,26,40,.38) 100%)}
.hero-in{position:relative;z-index:1;padding-top:72px;padding-bottom:72px;width:100%}
.hero h1{color:#fff;font-size:clamp(2.1rem,1.3rem + 3.4vw,4rem);max-width:15em;line-height:1.15}
.hero .lead{max-width:44em;font-size:clamp(1rem,.95rem + .3vw,1.15rem);font-weight:500;margin-bottom:1.6em}
.tag{display:inline-block;background:var(--teal);color:#fff;font-weight:600;font-size:.82rem;padding:5px 12px;border-radius:999px;margin-bottom:18px}

/* quick facts strip (new: the four things people come to the home page for) */
.quick{background:var(--teal);color:#fff}
.quick-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.quick-in>div{display:flex;gap:12px;align-items:center;padding:20px 16px;border-left:1px solid rgba(255,255,255,.18)}
.quick-in>div:first-child{border-left:0}
.quick p{margin:0;font-size:.93rem;line-height:1.4}
.quick strong{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.quick a{color:#fff;text-decoration:none}
.quick a:hover{text-decoration:underline}
.quick .ic{width:26px;height:26px}

.band-word{padding:56px 0 48px;text-align:center}
.big-word{margin:0;font-weight:700;color:var(--teal);font-size:clamp(2rem,1rem + 4.6vw,5.2rem);letter-spacing:.02em;text-transform:uppercase;line-height:1}

/* sections */
.sec{padding:clamp(56px,4vw + 32px,96px) 0}
.sec-tight{padding:44px 0}
.sec-tint{background:var(--mist)}
.sec-pale{background:var(--pale)}
.sec-tint h2,.sec-tint h3,.sec-tint .h3{color:var(--teal-dk)}
/* on the mist ground their teal is 3.2:1; links and outline buttons there use the darker teal (4.6:1) */
.sec-tint a:not(.btn){color:var(--teal-dk)}
.sec-tint .btn-o{color:var(--teal-dk);border-color:var(--teal-dk)}
.sec-tint .btn-o:hover{background:var(--teal-dk);color:#fff}
.sec-hd{text-align:center;max-width:860px;margin:0 auto 40px}
.eyebrow{font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:.4em}
.subt{font-size:1.15rem;font-weight:500;color:var(--ink)}
.cards+.center{margin-top:40px}
.close-line{font-weight:600;margin:40px auto 18px;max-width:42em}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.split-r .split-img{order:2}
.split-img img{border-radius:var(--r);width:100%;box-shadow:var(--shadow)}
.split-img-p img{max-height:640px;object-fit:cover}
.prose{max-width:62ch}
.prose h2{margin-bottom:.5em}

/* service cards: their teal tile with the photo inset */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:var(--card);color:#fff;border-radius:var(--r);padding:16px 16px 22px;display:flex;flex-direction:column}
.card-img img{border-radius:var(--r-s);aspect-ratio:4/3;object-fit:cover;width:100%}
.card h3{font-size:1.15rem;margin:16px 4px 6px;color:#fff}
.card h3 a{color:#fff;text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card p{margin:0 4px 18px;font-size:.93rem;line-height:1.55;flex:1}
.card .btn{align-self:flex-start;margin-left:4px}

.whys{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.why,.val{background:var(--pale);border:1px solid var(--line);border-radius:var(--r);padding:30px 24px;text-align:center}
.why{grid-column:span 2}
.why:nth-child(4){grid-column:2/span 2}
.why h3,.val h3{font-size:1.06rem;color:var(--teal)}
.why p,.val p{font-size:.93rem;margin:0;color:var(--ink-2)}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.val{background:var(--mist);border-color:transparent}
.val h3{color:var(--teal-dk)}
.val p{color:var(--ink)}
.mission{font-size:clamp(1.1rem,1rem + .4vw,1.35rem);font-weight:500;line-height:1.6;margin-bottom:1.6em}

/* people */
.person{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.person-r{grid-template-columns:1fr minmax(260px,420px)}
.person-r .person-img{order:2}
.person-img img{border-radius:var(--r);box-shadow:var(--shadow);width:100%}
.person .prose{max-width:70ch}
.role{font-weight:600;font-size:.92rem;color:var(--ink);margin-top:-.3em}
.badges{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:1.2em}
.badges img{height:44px;width:auto;background:#fff;padding:4px 6px;border-radius:6px}
.ticks{list-style:none;padding:0;margin:0 0 1.2em}
.ticks li{position:relative;padding-left:1.6em;margin:.35em 0}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.6em;height:.6em;border-radius:50%;background:var(--teal)}

.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.chips a{display:block;padding:8px 16px;border:1px solid var(--line);background:#fff;border-radius:999px;text-decoration:none;font-weight:500;font-size:.92rem}
.chips a:hover{border-color:var(--teal);background:var(--teal);color:#fff}

/* fees */
.fees{background:var(--mist);border-radius:var(--r);padding:clamp(16px,3vw,32px)}
.fees table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-s);overflow:hidden;font-variant-numeric:tabular-nums}
.fees th,.fees td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
.fees thead th{background:var(--teal);color:#fff;font-size:.88rem;font-weight:600}
.fees thead th span{font-weight:400;display:block;font-size:.8rem;opacity:.9}
.fees tbody th{font-weight:600}
.fees td{font-weight:500}
.fees-note{margin-top:18px;font-size:.92rem}
.fees-note p{margin:.4em 0}
.jump{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:1.4em}
.jump a{padding:8px 16px;border:1px solid var(--teal);border-radius:999px;text-decoration:none;font-weight:500;font-size:.92rem}
.jump a:hover{background:var(--teal);color:#fff}
.upd{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.upd-c{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.thanks{margin-top:36px}

/* resources */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.res{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-s);text-decoration:none;font-weight:600;color:var(--teal);background:#fff;transition:.15s}
.res:hover{border-color:var(--teal);box-shadow:var(--shadow)}

/* contact */
.contact{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.c-box{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:#fff}
.c-box h2{display:flex;align-items:center;gap:10px}
.c-urgent{background:var(--pale)}
.hrs{border-collapse:collapse}
.hrs th{text-align:left;font-weight:600;padding:5px 16px 5px 0;vertical-align:top}
.hrs td{padding:5px 0;white-space:nowrap;vertical-align:top}

.policy h2{font-size:1.25rem;margin-top:1.8em}
.policy ul{padding-left:1.2em}

/* footer: their mist panel and teal bar */
.ft{background:var(--mist);color:var(--ink);margin-top:0}
.ft-in{display:grid;grid-template-columns:1.1fr 1fr 1.1fr 1fr;gap:36px;padding-top:64px;padding-bottom:56px}
.ft h2{font-size:1.05rem;color:var(--ink);margin-bottom:.9em}
.ft p{font-size:.95rem;margin:0 0 .7em;line-height:1.5}
.ft a{color:var(--ink)}
.ft-brand img{width:240px;max-width:100%}
.ft-soc{display:flex;gap:8px;margin-top:14px}
.ft-soc .soc{color:#fff}
.ic-row{display:flex;gap:10px;align-items:flex-start}
.ic-row .ic{margin-top:.2em}
.ft .btn{margin-top:.6em;color:#fff}
.ft-bar{background:var(--teal);color:#fff;text-align:center;padding:12px 16px;font-weight:600;font-size:.88rem}
.ft-bar p{margin:0}

/* responsive */
@media (max-width:1180px){
  .nav>ul>li>a{padding:10px 9px;font-size:.82rem}
  .pill span{display:none}.pill{padding:10px 12px;margin-right:2px}
}
@media (max-width:980px){
  .hd-in{min-height:76px}
  .logo img{width:118px}
  .nav-d{display:block;order:3;margin-left:6px}
  .nav-d summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--teal)}
  .nav-d summary::-webkit-details-marker{display:none}
  .nav-d summary .ic{width:28px;height:28px}
  .hd-act{margin-left:auto}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:var(--shadow);max-height:calc(100vh - 76px);overflow:auto;margin:0}
  .nav-d[open]~.nav{display:block}
  .nav>ul{flex-direction:column;align-items:stretch;padding:8px 16px 20px;gap:0}
  .nav li{border-bottom:1px solid var(--line)}
  .nav>ul>li>a{padding:14px 4px;font-size:.95rem}
  .has-sub{flex-wrap:wrap}
  .has-sub>a{flex:1}
  .sub-t{padding:12px}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;display:none;width:100%;padding:0 0 10px 10px}
  .has-sub.open .sub{display:block}
  .no-js .has-sub .sub{display:block}
  .no-js .sub-t{display:none}
  .sub li{border:0}
  .cards{grid-template-columns:repeat(2,1fr)}
  .whys{grid-template-columns:1fr 1fr}.why,.why:nth-child(4){grid-column:auto}
  .vals,.res-grid{grid-template-columns:1fr 1fr}
  .quick-in{grid-template-columns:1fr 1fr}
  .quick-in>div:nth-child(3){border-left:0}
  .quick-in>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18)}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .split,.person,.person-r,.upd,.contact{grid-template-columns:1fr}
  .split-r .split-img,.person-r .person-img{order:0}
  .person-img{max-width:440px}
  .hero{min-height:auto}
  .hero-home{min-height:calc(88vh - 76px - 120px)}
  .hero-in{padding-top:56px;padding-bottom:56px}
  .soc{display:none}.ft .soc{display:inline-flex}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .hd-in{padding:8px 16px}
  .cards,.whys,.vals,.res-grid,.ft-in{grid-template-columns:1fr}
  .quick-in>div{padding:14px 8px;gap:8px}
  .quick .ic{width:20px;height:20px}
  .quick p{font-size:.82rem}
  .fees thead{display:none}
  .fees table,.fees tbody,.fees tr,.fees th,.fees td{display:block}
  .fees tr{border-bottom:2px solid var(--mist);padding:8px 0}
  .fees tbody th{border:0;padding:10px 14px 4px;color:var(--teal)}
  .fees td{display:flex;justify-content:space-between;border:0;padding:4px 14px}
  .fees td::before{content:attr(data-label);font-weight:400;color:var(--ink-2)}
  .btn{white-space:normal}
}
@media (min-width:1800px){
  :root{--wrap:1400px}
  body{font-size:17px}
}
@media print{.hd,.ft,.hero-bg,.quick{display:none}.hero{color:#000;min-height:0}.hero::after{display:none}.hero h1{color:#000}}