/* ==========================================================================
   HERO LAB — now live site-wide: linked from every page (homepage uses .hl-c).
   1. "Chalk & Navy" palette, overriding modern.css tokens site-wide
   2. Four hero treatments (.hl-a … .hl-d)
   Palette on Coolors: https://coolors.co/0b2a55-1467b0-8ecae6-f6f2eb-c9754b
   ========================================================================== */

:root {
  /* Blues — pulled from the new logo (wordmark navy → figure blue → highlight) */
  --hl-ink:    #0B2A55;   /* headings, dark surfaces            */
  --hl-deep:   #071C3B;   /* deepest navy, dark hero + footer   */
  --hl-blue:   #1467B0;   /* primary actions, links             */
  --hl-sky:    #8ECAE6;   /* highlights on dark, rules          */
  --hl-mist:   #E7F1F8;   /* soft blue tint fills               */
  /* Warm complements — stop the site being wall-to-wall blue */
  --hl-chalk:  #F6F2EB;   /* page canvas (Chiltern chalk)       */
  --hl-sand:   #EAE2D5;   /* hairlines on chalk                 */
  --hl-clay:   #C9754B;   /* accent — decorative + large text   */
  --hl-clay-t: #A4552E;   /* accent for small text (AA on chalk)*/

  --c-abyss: var(--hl-deep); --c-navy: var(--hl-ink); --c-navy-600: #123A70;
  --c-ocean: var(--hl-blue); --c-azure: var(--hl-blue); --c-cyan: #3BA3D8;
  --c-sky: var(--hl-sky); --c-wash: var(--hl-mist); --c-frost: var(--hl-chalk);
  --bg-canvas: var(--hl-chalk); --bg-subtle: var(--hl-mist);
  --text-body: #3D4B5C; --text-muted: #5D6B7B;
  --font-serif: 'Chiron Sung HK', Georgia, 'Times New Roman', serif;   /* headings (client pick) */
  --font-script: 'Dancing Script', 'Brush Script MT', cursive;         /* hero line (client pick) */
}

/* ---- Site-wide palette application ---------------------------------- */
body { background: var(--hl-chalk); }
#services { background: var(--hl-chalk); }
.service-card, .pract-card, .condition-pill { border-color: var(--hl-sand); }
.service-icon { background: var(--hl-mist); }
.process-card { border-top-color: var(--hl-sand); }
.dark-block, .cta-band { background: var(--hl-deep); position: relative; overflow: hidden; }
.dark-block::after, .cta-band::after {
  content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; aspect-ratio: 1;
  background: radial-gradient(closest-side, #1467b055, transparent); pointer-events: none;
}
.dark-block > *, .cta-band > * { position: relative; z-index: 1; }
.dark-block p { color: #C9D8E8; }
.badge-accent { background: #F3E3D8; color: var(--hl-clay-t); }
.site-footer { background: var(--hl-deep); }
h1, h2, h3, h4, .pract-name { font-family: var(--font-serif); }
.sec-head h2 { font-weight: 500; letter-spacing: -0.01em; }
.site-header { background: #fffffff5; border-bottom-color: var(--hl-sand); }
.btn-primary { background: var(--hl-blue); border-color: var(--hl-blue); }
.btn-primary:hover { background: var(--hl-ink); border-color: var(--hl-ink); }
/* Logo wordmark (client pick) — condensed face, so sized up to hold its width */
.brand-name { font-family: 'Libre Caslon Condensed', Georgia, serif; font-weight: 700; font-size: 2.05rem; letter-spacing: 0; line-height: 1.05; }
@media (max-width: 560px) { .brand-name { font-size: 1.5rem; } }

/* ---- Shared hero pieces --------------------------------------------- */
.hl-hero { position: relative; overflow: hidden; }
.hl-hero h1 {
  font-family: var(--font-script); font-weight: 600;
  font-size: clamp(3rem, 6vw, 5.6rem); line-height: 1.08; letter-spacing: 0;
  color: var(--hl-ink); margin: 0;
}
.hl-hero h1 em { font-style: normal; color: var(--hl-blue); display: block; }
.hl-kicker {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px;
  font: 600 .78rem/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--hl-clay-t);
}
.hl-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.hl-lead { font-size: 1.125rem; line-height: 1.7; color: var(--text-body); max-width: 34rem; margin: 26px 0 0; }
.hl-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }
.hl-cta .btn { padding-inline: 30px; letter-spacing: .06em; font-weight: 700; }
.hl-phone { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--hl-ink); text-decoration: none; }
.hl-phone small { display: block; font: 500 .75rem var(--font-body); color: var(--text-muted); letter-spacing: .04em; }
.hl-phone svg { flex: none; width: 40px; height: 40px; padding: 11px; border-radius: 50%; border: 1px solid var(--hl-sand); color: var(--hl-blue); }
.hl-phone:hover svg { border-color: var(--hl-blue); }

.hl-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 48px 0 0; padding: 0; list-style: none; }
.hl-facts li { padding: 0 28px; border-left: 1px solid var(--hl-sand); }
.hl-facts li:first-child { padding-left: 0; border-left: 0; }
.hl-facts b { display: block; font: 400 2rem/1.1 var(--font-serif); color: var(--hl-ink); letter-spacing: -.02em; }
.hl-facts li > span { display: block; margin-top: 6px; font-size: .8125rem; color: var(--text-muted); max-width: 12rem; line-height: 1.45; }

/* Logo-echo: the dotted spine from the mark, drawn in on load */
.hl-spine { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 11px; pointer-events: none; }
.hl-spine i { display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hl-spine i:nth-child(odd) { width: 9px; height: 9px; }

/* ---- A · Editorial split (treatment close-up) ----------------------- */
.hl-a { background: var(--hl-chalk); padding: 0; }
.hl-a .hl-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); min-height: min(740px, calc(100vh - 178px)); }
.hl-a h1 { font-size: clamp(3rem, 5.2vw, 5rem); }
.hl-a .hl-copy { padding: 72px 56px 64px max(24px, calc((100vw - var(--page-max)) / 2 + 24px)); align-self: center; }
.hl-a .hl-media { position: relative; margin: 0; }
.hl-a .hl-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; border-radius: 0 0 0 220px; }
.hl-a .hl-media figcaption {
  position: absolute; left: 0; bottom: 0; transform: translateX(-100%); padding: 0 22px 26px 0;
  writing-mode: vertical-rl; rotate: 180deg; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted);
}
.hl-a .hl-spine { right: 28px; top: 50%; translate: 0 -50%; color: #ffffffd0; filter: drop-shadow(0 1px 3px #0003); }

/* ---- B · Night navy (neck close-up in an arch) ----------------------- */
.hl-b { background: var(--hl-deep); color: #fff; padding: 64px 0 0; }
.hl-b::before {
  content: ""; position: absolute; width: 900px; aspect-ratio: 1; right: -200px; top: -300px;
  background: radial-gradient(closest-side, #1467b066, transparent 70%); pointer-events: none;
}
.hl-b .hl-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: end; }
.hl-b .hl-copy { padding-bottom: 72px; }
.hl-b h1 { color: #fff; }
.hl-b h1 em { color: var(--hl-sky); }
.hl-b .hl-kicker { color: #E7A57F; }
.hl-b .hl-lead { color: #C3D2E3; }
.hl-b .btn-primary { background: #fff; border-color: #fff; color: var(--hl-deep); }
.hl-b .btn-primary:hover { background: var(--hl-sky); border-color: var(--hl-sky); }
.hl-b .hl-phone { color: #fff; }
.hl-b .hl-phone small { color: #9FB4CB; }
.hl-b .hl-phone svg { border-color: #ffffff33; color: var(--hl-sky); }
.hl-b .hl-arch { position: relative; margin: 0; }
.hl-b .hl-arch img { display: block; width: 100%; height: min(600px, 62vh); object-fit: cover; object-position: 50% 40%; border-radius: 999px 999px 0 0; }
.hl-b .hl-arch::before {
  content: ""; position: absolute; inset: -18px -18px 0; border: 1px solid #8ecae640; border-bottom: 0; border-radius: 999px 999px 0 0;
}
.hl-b .hl-spine { left: -34px; top: 18%; color: #E7A57F; }
.hl-b .hl-band { position: relative; border-top: 1px solid #ffffff1f; }
.hl-b .hl-band ul { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.hl-b .hl-band li { padding: 30px 28px; border-left: 1px solid #ffffff1f; }
.hl-b .hl-band li:first-child { border-left: 0; padding-left: 0; }
.hl-b .hl-band b { display: block; font: 400 2.1rem/1 var(--font-serif); color: #fff; }
.hl-b .hl-band li > span { display: block; margin-top: 8px; font-size: .8125rem; color: #9FB4CB; line-height: 1.45; }

/* ---- C · Cinematic full-bleed (Chilterns ridge) ---------------------- */
.hl-c { min-height: min(820px, calc(100vh - 178px)); display: flex; flex-direction: column; justify-content: space-between; background: #cfe0ea; }
.hl-c .hl-bg { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.hl-c .hl-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; animation: hl-drift 28s ease-out both; }
.hl-c .hl-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #f2f6f9f0 0%, #f2f6f9cc 30%, #f2f6f966 42%, #f2f6f900 54%), linear-gradient(0deg, #071c3b40, transparent 30%); }
@keyframes hl-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.hl-c .wrap { position: relative; }
.hl-c .hl-copy { padding: 64px 0 36px; max-width: 44rem; }
.hl-c h1 { font-size: clamp(3rem, 5.4vw, 5.1rem); white-space: nowrap; }
.hl-c .hl-lead { max-width: 29rem; }
.hl-c .hl-lead { color: #2E3D4F; }
.hl-c .hl-phone svg { background: #ffffffb0; border-color: transparent; }
.hl-c .hl-strip {
  position: relative; margin-bottom: 36px; display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-radius: 18px; box-shadow: 0 20px 50px #071c3b26;
}
.hl-c .hl-strip div { padding: 26px 30px; border-left: 1px solid var(--hl-sand); }
.hl-c .hl-strip div:first-child { border-left: 0; }
.hl-c .hl-strip b { display: block; font: 400 2rem/1 var(--font-serif); color: var(--hl-ink); }
.hl-c .hl-strip div > span { display: block; margin-top: 8px; font-size: .8125rem; color: var(--text-muted); line-height: 1.45; }

/* ---- D · Inside & outside (beech walk + treatment inset) ------------- */
.hl-d { background: linear-gradient(180deg, #fff 0%, var(--hl-chalk) 100%); padding: 72px 0 96px; }
.hl-d .hl-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 80px; align-items: center; }
.hl-d .hl-stack { position: relative; margin: 0 0 0 0; padding: 0 0 80px 0; }
.hl-d .hl-main img { display: block; width: 86%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 28px; }
.hl-d .hl-inset { position: absolute; right: 0; bottom: 0; width: 46%; margin: 0; padding: 10px; background: #fff; border-radius: 22px; box-shadow: 0 24px 60px #0b2a5526; }
.hl-d .hl-inset img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 45%; border-radius: 14px; }
.hl-d figcaption { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.hl-d .hl-main figcaption { margin-top: 14px; }
.hl-d .hl-inset figcaption { padding: 10px 6px 2px; }
.hl-d .hl-tag { position: absolute; left: -22px; top: 36px; background: var(--hl-clay); color: #fff; font: 400 1.05rem/1.2 var(--font-serif); font-style: italic; padding: 14px 20px; border-radius: 14px; }
.hl-d h1 { font-size: clamp(3rem, 5.4vw, 5.2rem); }

/* ---- Motion ports (React Bits BlurText / CountUp → vanilla) --------- */
.hl-js [data-blur] .hl-w { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(-40px); will-change: transform, filter, opacity; }
.hl-js [data-blur].is-in .hl-w { animation: hl-blur .75s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 110ms); }
@keyframes hl-blur { 55% { opacity: .6; filter: blur(4px); transform: translateY(4px); } to { opacity: 1; filter: blur(0); transform: none; } }
.hl-js .hl-fade { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; transition-delay: var(--d, 0ms); }
.hl-js .hl-fade.is-in { opacity: 1; transform: none; }
.hl-js .hl-spine i { opacity: 0; transform: scale(.3); transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); transition-delay: calc(600ms + var(--i) * 70ms); }
.hl-js .hl-spine.is-in i { opacity: 1; transform: none; }
.hl-js .hl-reveal > img { clip-path: inset(0 0 0 100%); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1) .15s; }
.hl-js .hl-reveal.is-in > img { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .hl-js [data-blur] .hl-w, .hl-js .hl-fade, .hl-js .hl-spine i { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; transition: none !important; }
  .hl-js .hl-reveal > img { clip-path: none; transition: none; }
  .hl-c .hl-bg img { animation: none; }
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 1100px) {
  .hl-a .hl-copy { padding: 64px 40px 56px 24px; }
  .hl-b .hl-band ul, .hl-c .hl-strip { grid-template-columns: repeat(2, 1fr); }
  .hl-b .hl-band li:nth-child(3) { border-left: 0; padding-left: 0; }
  .hl-b .hl-band li:nth-child(n+3), .hl-c .hl-strip div:nth-child(n+3) { border-top: 1px solid #ffffff1f; }
  .hl-c .hl-strip div:nth-child(3) { border-left: 0; }
  .hl-c .hl-strip div:nth-child(n+3) { border-top-color: var(--hl-sand); }
  .hl-d .hl-grid { gap: 48px; }
}
@media (max-width: 860px) {
  .hl-a .hl-grid, .hl-b .hl-grid, .hl-d .hl-grid { grid-template-columns: 1fr; }
  .hl-a .hl-grid { min-height: 0; }
  .hl-a .hl-copy { padding: 48px 16px 40px; }
  .hl-a .hl-media { height: 64vw; order: -1; }
  .hl-a .hl-media img { border-radius: 0 0 0 90px; }
  .hl-a .hl-media figcaption { display: none; }
  .hl-b { padding-top: 56px; }
  .hl-b .hl-copy { padding-bottom: 8px; }
  .hl-b .hl-arch { max-width: 420px; margin-inline: auto; width: 88%; }
  .hl-b .hl-arch img { height: 440px; }
  .hl-b .hl-spine { display: none; }
  .hl-c { min-height: 0; }
  .hl-c .hl-bg { position: relative; height: 62vw; }
  .hl-c .hl-bg::after { background: linear-gradient(0deg, #f6f2eb 0%, transparent 35%); }
  .hl-c .hl-copy { padding: 8px 0 32px; }
  .hl-d { padding-top: 40px; }
  .hl-d .hl-stack { order: -1; max-width: 520px; }
  .hl-d .hl-tag { left: 10px; top: 14px; font-size: .95rem; }
  .hl-hero .wrap { padding-inline: 16px; }
  .hl-c { background: var(--hl-chalk); }
  .hl-c h1 { font-size: clamp(2.5rem, 10.2vw, 4rem); white-space: normal; }
  .hl-c .hl-lead { max-width: none; }
  .hl-d .hl-stack { padding-bottom: 40px; }
  .hl-d .hl-main img { width: 88%; aspect-ratio: 4 / 3.4; object-position: 50% 35%; }
  .hl-d .hl-inset { width: 40%; padding: 6px; border-radius: 16px; }
  .hl-d .hl-inset figcaption { display: none; }
  .hl-d .hl-main figcaption { display: none; }
}
@media (max-width: 560px) {
  .hl-facts li { padding: 0 16px; }
  .hl-facts b { font-size: 1.6rem; }
  .hl-b .hl-band li, .hl-c .hl-strip div { padding: 20px 16px; }
  .hl-b .hl-band li:first-child, .hl-b .hl-band li:nth-child(3) { padding-left: 0; }
  .hl-b .hl-band b, .hl-c .hl-strip b { font-size: 1.6rem; }
  .hl-cta .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   PROCESS — "journey" treatment. Stepper-style track (scroll-drawn) +
   SpotlightCard cursor light (both from reactbits.dev, ported to vanilla)
   ========================================================================== */
#process { background: linear-gradient(180deg, #fff 0%, var(--hl-mist) 100%); }
.hl-steps { --gap: 24px; --node: 58px; --pad: 30px; position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.hl-track { position: absolute; top: calc(var(--pad) + var(--node) / 2); height: 2px; z-index: 2; pointer-events: none;
  left: calc(var(--pad) + var(--node) / 2);
  right: calc((100% - 3 * var(--gap)) / 4 - var(--pad) - var(--node) / 2);
  background: repeating-linear-gradient(90deg, var(--hl-sky) 0 6px, transparent 6px 12px); }
.hl-track i { position: absolute; inset: 0; background: var(--hl-blue); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.hl-step { position: relative; overflow: hidden; padding: var(--pad); border-radius: 22px; background: #fff;
  border: 1px solid #dfe9f1; box-shadow: 0 1px 2px #0b2a550a;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s;
  --mx: 50%; --my: 50%; }
.hl-step::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--mx) var(--my), #1467b01f, transparent 60%); }
.hl-step:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(0,0,0,.08); border-color: #c6dbeb; }
.hl-step:hover::before, .hl-step:focus-within::before { opacity: 1; }
.hl-node { position: relative; z-index: 3; width: var(--node); height: var(--node); border-radius: 50%;
  display: grid; place-items: center; font: 600 1.25rem/1 var(--font-serif); color: var(--hl-blue);
  background: #fff; border: 1.5px solid var(--hl-sky); transition: background .45s, color .45s, border-color .45s, box-shadow .45s; }
.hl-step.is-on .hl-node { background: var(--hl-blue); border-color: var(--hl-blue); color: #fff; box-shadow: 0 0 0 7px #1467b014; }
.hl-step h3 { position: relative; z-index: 1; margin: 30px 0 10px; font-size: 1.45rem; font-weight: 600; color: var(--hl-ink); }
.hl-step p { position: relative; z-index: 1; margin: 0; font-size: .975rem; line-height: 1.65; color: var(--text-body); }
.hl-ghost { position: absolute; z-index: 0; right: -4px; bottom: -44px; font: 700 7.5rem/1 var(--font-serif); color: var(--hl-mist);
  pointer-events: none; user-select: none; transition: color .5s, transform .6s cubic-bezier(.22,1,.36,1); }
.hl-step:hover .hl-ghost { color: #d7e8f4; transform: translateY(-6px); }
.hl-js .hl-step { opacity: 0; transform: translateY(18px); }
.hl-js .hl-steps.is-in .hl-step { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s; transition-delay: calc(var(--i) * 120ms), calc(var(--i) * 120ms), 0s, 0s; }
.hl-js .hl-steps.is-in .hl-step:hover { transform: translateY(-4px); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .hl-js .hl-step { opacity: 1; transform: none; transition: none; }
  .hl-track i { transform: none; }
}
@media (max-width: 1100px) { .hl-steps { --pad: 24px; --gap: 16px; } .hl-step h3 { font-size: 1.3rem; } }
@media (max-width: 860px) {
  .hl-steps { grid-template-columns: 1fr; --gap: 14px; padding-left: 0; }
  .hl-track { top: calc(var(--pad) + var(--node) / 2); bottom: calc(var(--pad) + var(--node) / 2); left: calc(var(--pad) + var(--node) / 2 - 1px); right: auto; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--hl-sky) 0 6px, transparent 6px 12px); }
  .hl-track i { transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
  .hl-step { display: grid; grid-template-columns: var(--node) 1fr; column-gap: 18px; }
  .hl-step .hl-node { grid-row: span 2; }
  .hl-step h3 { margin: 4px 0 6px; }
  .hl-ghost { font-size: 6rem; bottom: -24px; }
}