/* ==========================================================================
   Compassion Home Care
   Design tokens, layout and components
   Brand navy sampled from the supplied logo: #08486E
   ========================================================================== */

:root{
  --ink:#0B2A40;
  --ink-soft:#3C5768;
  --navy:#08486E;
  --navy-deep:#063A59;
  --navy-line:#1C5E85;
  --mist:#E9F1F6;
  --mist-deep:#D3E3EE;
  --paper:#FCFBF9;
  --sand:#F5EFE6;
  --moss:#2E6B57;
  --moss-soft:#E8F1ED;
  --amber:#187881;
  --amber-text:#187881;
  --amber-soft:#EDF4F5;
  --line:#DBE3E9;
  --white:#FFFFFF;

  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Jost", "Helvetica Neue", Arial, sans-serif;

  --radius:10px;
  --radius-sm:6px;
  --shadow:0 1px 2px rgba(11,42,64,.06), 0 8px 24px rgba(11,42,64,.06);
  --shadow-lift:0 2px 4px rgba(11,42,64,.08), 0 16px 40px rgba(11,42,64,.12);
  --wrap:1120px;
  --gutter:22px;
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--navy); text-underline-offset:3px}
a:hover{color:var(--navy-deep)}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:900; line-height:1.1; letter-spacing:-.01em; color:var(--ink); margin:0 0 .5em}
h1{font-size:clamp(2.1rem,1.4rem + 2.9vw,3.5rem); letter-spacing:-.015em}
h2{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.4rem); letter-spacing:-.01em}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.35rem)}
h4{font-size:1.02rem}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em; padding-left:1.15em}
li{margin-bottom:.45em}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:3px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--white); color:var(--navy); padding:12px 18px; font-weight:700;
}
.skip:focus{left:12px; top:12px}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.wrap--narrow{max-width:800px}

/* ------------------------------------------------------------- header -- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(252,251,249,.96);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--wrap); margin:0 auto; padding:12px var(--gutter);
  display:flex; align-items:center; gap:20px;
}
.brand{display:flex; align-items:center; flex:0 0 auto; text-decoration:none}
.brand img{width:236px}
.nav{margin-left:auto; display:flex; align-items:center; gap:4px}
.nav a{
  font-size:.94rem; font-weight:500; color:var(--ink); text-decoration:none;
  padding:9px 11px; border-radius:var(--radius-sm); white-space:nowrap;
}
.nav a:hover{background:var(--mist); color:var(--navy)}
.nav a[aria-current="page"]{color:var(--navy); font-weight:700; box-shadow:inset 0 -2px 0 var(--navy)}
.header-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.header-phone{
  font-family:var(--font-display); font-weight:600; font-size:1.02rem;
  color:var(--navy); text-decoration:none; white-space:nowrap;
}
.header-phone:hover{text-decoration:underline}
.menu-toggle{
  display:none; align-items:center; gap:8px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:9px 12px; font:600 .92rem var(--font-body); color:var(--ink); cursor:pointer;
}
.drawer{display:none}

/* -------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:700 .96rem/1 var(--font-body); letter-spacing:.005em;
  padding:14px 20px; border-radius:var(--radius-sm); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--navy); color:var(--white); box-shadow:0 6px 16px rgba(8,72,110,.22)}
.btn--primary:hover{background:var(--navy-deep); color:var(--white)}
.btn--ghost{background:transparent; color:var(--navy); border-color:var(--mist-deep)}
.btn--ghost:hover{background:var(--mist); color:var(--navy-deep)}
.btn--onnavy{background:var(--white); color:var(--navy)}
.btn--onnavy:hover{background:var(--mist); color:var(--navy-deep)}
.btn--outline-light{background:transparent; color:var(--white); border-color:rgba(255,255,255,.5)}
.btn--outline-light:hover{background:rgba(255,255,255,.12); color:var(--white)}
.btn--moss{background:var(--moss); color:var(--white)}
.btn--moss:hover{background:#255744; color:var(--white)}
.btn--sm{padding:11px 15px; font-size:.9rem}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:1.4rem}

/* ------------------------------------------------------------- sections -- */
.section{padding:clamp(52px,6.4vw,96px) 0}
.section--tight{padding:clamp(40px,4.6vw,64px) 0}
.section--mist{background:var(--mist)}
.section--sand{background:var(--sand)}
.section--moss{background:var(--moss-soft)}
.section--navy{background:var(--navy); color:var(--white)}
.section--navy h2,.section--navy h3{color:var(--white)}
.section--navy p{color:rgba(255,255,255,.9)}
.section-head{max-width:720px; margin-bottom:2.2rem}
.section-head p{color:var(--ink-soft); font-size:1.06rem; margin-bottom:0}
.section--navy .section-head p{color:rgba(255,255,255,.86)}

.eyebrow{
  display:block; font:700 .74rem/1 var(--font-body); letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber-text); margin-bottom:1rem;
}
.section--navy .eyebrow,.hero .eyebrow{color:#F3CE94}
.section--moss .eyebrow{color:var(--moss)}

.lede{font-size:1.13rem; color:var(--ink-soft)}
.section--navy .lede{color:rgba(255,255,255,.92)}

/* ----------------------------------------------------------------- hero -- */
.hero{position:relative; background:var(--navy); color:var(--white); overflow:hidden}
.hero::after{
  content:""; position:absolute; right:-14%; top:-40%; width:70%; height:180%;
  background:radial-gradient(closest-side, rgba(255,255,255,.10), transparent 72%);
  pointer-events:none;
}

/* --------------------------------------------------------- hero motifs -- */
.hero-motif{
  position:absolute; z-index:0; pointer-events:none;
  top:50%; right:clamp(-40px,-2vw,10px); transform:translateY(-50%);
  width:clamp(220px,26vw,360px); height:clamp(220px,26vw,360px);
  color:#FFFFFF; opacity:.16;
}
.hero-motif svg{width:100%; height:100%; display:block}
.hero-motif :is(path,circle,line,rect){vector-effect:non-scaling-stroke}

@keyframes motifPulse{0%,100%{transform:translateY(-50%) scale(1); opacity:.14} 50%{transform:translateY(-50%) scale(1.055); opacity:.22}}
@keyframes motifFloat{0%,100%{transform:translateY(-50%)} 50%{transform:translateY(calc(-50% - 14px))}}
@keyframes motifDraw{0%{stroke-dashoffset:240} 50%{stroke-dashoffset:0} 100%{stroke-dashoffset:-240}}
@keyframes motifDrawOnce{from{stroke-dashoffset:120} to{stroke-dashoffset:0}}
@keyframes motifTypingDot{0%,60%,100%{opacity:.15; transform:translateY(0)} 30%{opacity:.5; transform:translateY(-5px)}}

.hero-motif--pulse{animation:motifPulse 5.5s ease-in-out infinite; transform-origin:center}
.hero-motif--float{animation:motifFloat 6.5s ease-in-out infinite}
.hero-motif--draw .motif-line{stroke-dasharray:36 12; animation:motifDraw 6s linear infinite}
.hero-motif--draw-once .motif-line{stroke-dasharray:120; animation:motifDrawOnce 1.4s ease-out .3s both}
.hero-motif--typing .motif-dot{animation:motifTypingDot 1.4s ease-in-out infinite}
.hero-motif--typing .motif-dot:nth-child(2){animation-delay:.18s}
.hero-motif--typing .motif-dot:nth-child(3){animation-delay:.36s}

@media (max-width:640px){
  .hero-motif{width:clamp(160px,44vw,220px); height:clamp(160px,44vw,220px); opacity:.13}
}
@media (prefers-reduced-motion:reduce){
  .hero-motif--pulse,.hero-motif--float{animation:none}
  .hero-motif--draw .motif-line,.hero-motif--draw-once .motif-line,.hero-motif--typing .motif-dot{animation:none; stroke-dashoffset:0}
}
.hero-figure{position:absolute; inset:0; z-index:0; margin:0; overflow:hidden}
.hero-figure img{width:100%; height:100%; display:block; object-fit:cover; object-position:center 30%}
.hero-figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,72,110,.72) 0%, rgba(8,72,110,.48) 42%, rgba(8,72,110,.75) 85%, var(--navy) 100%);
}
@media (min-width:900px){
  .hero-figure::after{
    background:linear-gradient(to right, rgba(8,72,110,.76) 0%, rgba(8,72,110,.52) 26%, rgba(8,72,110,.26) 48%, rgba(8,72,110,.06) 68%, rgba(8,72,110,0) 88%);
  }
}
.hero-inner{position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; padding:clamp(52px,6.6vw,104px) var(--gutter)}
.hero-content{max-width:790px}
.hero h1{color:var(--white); margin-bottom:.4em}
.hero p{color:rgba(255,255,255,.9); font-size:clamp(1.02rem,.98rem + .3vw,1.2rem); max-width:66ch}
.hero--photo .hero-content{text-shadow:0 2px 16px rgba(2,20,32,.55)}
.hero--page .hero-inner{padding-top:clamp(44px,4.6vw,72px); padding-bottom:clamp(44px,4.6vw,72px)}
.hero-crumb{font-size:.86rem; color:rgba(255,255,255,.72); margin-bottom:1.2rem}
.hero-crumb a{color:rgba(255,255,255,.85)}
.hero-crumb a:hover{color:var(--white)}

.trustbar{background:var(--navy-deep); border-top:1px solid var(--navy-line); position:relative; z-index:1}
.trustbar ul{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); list-style:none;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.trustbar li{
  margin:0; padding:15px 16px 15px 0; color:rgba(255,255,255,.94);
  font-size:.88rem; font-weight:600; display:flex; align-items:center; gap:9px;
}
.trustbar li + li{border-left:1px solid var(--navy-line); padding-left:16px}
.trustbar svg{flex:0 0 auto; color:#8FC4E3}

/* ----------------------------------------------- signature: three doors -- */
.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.door{
  position:relative; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px 24px; box-shadow:var(--shadow); overflow:hidden;
}
.door::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--navy)}
.door--moss::before{background:var(--moss)}
.door--amber::before{background:var(--amber)}
.door-said{
  font-family:var(--font-display); font-size:1.28rem; line-height:1.3; font-weight:600;
  color:var(--ink); margin:0 0 .55rem;
}
.door p{color:var(--ink-soft); font-size:.99rem}
.door .btn{margin-top:auto; align-self:flex-start}
.door-note{font-size:.86rem; color:var(--ink-soft); margin:12px 0 0}

/* ---------------------------------------------------------------- cards -- */
.grid{display:grid; gap:18px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; box-shadow:var(--shadow);
}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
.card--link{text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .16s ease, box-shadow .16s ease}
.card--link:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift); color:inherit}
.card--link .more{margin-top:auto; padding-top:14px; font-weight:700; font-size:.92rem; color:var(--navy)}
.card--plain{box-shadow:none}
.card-icon{
  width:40px; height:40px; border-radius:8px; background:var(--mist); color:var(--navy);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.card--moss .card-icon{background:var(--moss-soft); color:var(--moss)}

/* --------------------------------------------------------------- lists -- */
.ticks{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.ticks li{position:relative; padding-left:30px; margin:0; color:var(--ink)}
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em; width:17px; height:17px; border-radius:50%;
  background:var(--mist);
  box-shadow:inset 0 0 0 1.5px var(--navy);
}
.ticks li::after{
  content:""; position:absolute; left:5px; top:.72em; width:7px; height:4px;
  border-left:2px solid var(--navy); border-bottom:2px solid var(--navy);
  transform:rotate(-45deg);
}
.ticks--2{grid-template-columns:repeat(2,1fr); gap:11px 28px}
.section--navy .ticks li{color:rgba(255,255,255,.94)}
.section--navy .ticks li::before{background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.section--navy .ticks li::after{border-color:var(--white)}

.steps{list-style:none; counter-reset:step; padding:0; margin:0; display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.steps li{
  counter-increment:step; margin:0; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 22px;
}
.steps li::before{
  content:counter(step); display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:var(--navy); color:var(--white);
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; margin-bottom:14px;
}
.steps h3{margin-bottom:.3em}
.steps p{margin:0; color:var(--ink-soft); font-size:.98rem}
.steps--4{grid-template-columns:repeat(4,1fr)}
.steps--moss li::before{background:var(--moss)}

/* --------------------------------------------------------------- notes -- */
.note{
  border-left:4px solid var(--amber); background:var(--amber-soft);
  padding:18px 22px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin:1.6rem 0;
}
.note p:last-child{margin-bottom:0}
.note strong{font-family:var(--font-display)}
.note--navy{border-left-color:var(--navy); background:var(--mist)}
.note--moss{border-left-color:var(--moss); background:var(--moss-soft)}

.chips{list-style:none; padding:0; margin:1.4rem 0 0; display:flex; flex-wrap:wrap; gap:9px}
.chips li{margin:0}
.chip{
  display:inline-block; padding:7px 14px; border-radius:999px; font-size:.86rem; font-weight:600;
  background:rgba(255,255,255,.12); color:var(--white); border:1px solid rgba(255,255,255,.28);
}
.chip--light{background:var(--white); color:var(--navy); border-color:var(--mist-deep)}

/* ---------------------------------------------------------------- FAQ -- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:18px 44px 18px 0; position:relative;
  font-family:var(--font-display); font-weight:600; font-size:1.08rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px; margin-top:-8px;
  border-right:2px solid var(--navy); border-bottom:2px solid var(--navy);
  transform:rotate(45deg); transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq summary:hover{color:var(--navy)}
.faq .answer{padding:0 12px 20px 0; color:var(--ink-soft)}
.faq .answer p:last-child{margin-bottom:0}

/* --------------------------------------------------------------- split -- */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:start}
.split--center{align-items:center}
.panel{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; box-shadow:var(--shadow)}
.panel h3:first-child{margin-top:0}

.factlist{margin:0; display:grid; gap:14px}
.factlist div{display:grid; grid-template-columns:132px 1fr; gap:12px; align-items:baseline}
.factlist dt{font-weight:700; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.factlist dd{margin:0}

/* ---------------------------------------------------------------- form -- */
.form{display:grid; gap:18px}
.field{display:grid; gap:7px}
.field label,.fieldset legend{font-weight:700; font-size:.93rem; color:var(--ink)}
.field .hint{font-size:.85rem; color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font:400 1rem var(--font-body); color:var(--ink); background:var(--white);
  border:1.5px solid var(--mist-deep); border-radius:var(--radius-sm); padding:13px 14px; width:100%;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#B6CEDD}
.field textarea{min-height:132px; resize:vertical}
.field--row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.fieldset{border:1.5px solid var(--mist-deep); border-radius:var(--radius-sm); padding:16px 18px; margin:0}
.fieldset legend{padding:0 6px}
.radios{display:grid; gap:9px; margin-top:8px}
.radios label{display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:.98rem}
.radios input{width:18px; height:18px; margin:3px 0 0; flex:0 0 auto}
.field label.consent,.consent{display:flex; gap:11px; align-items:flex-start; font-size:.95rem; font-weight:400; color:var(--ink-soft)}
.consent input{width:19px; height:19px; margin:3px 0 0; flex:0 0 auto}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.req{color:#A4342A}

/* -------------------------------------------------------------- footer -- */
.site-footer{background:var(--navy); color:rgba(255,255,255,.82); padding:clamp(48px,5vw,72px) 0 0; margin-top:0}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px}
.site-footer h4{
  color:var(--white); font-family:var(--font-body); font-weight:700; font-size:.78rem;
  letter-spacing:.15em; text-transform:uppercase; margin-bottom:1rem;
}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin-bottom:.55em}
.site-footer a{color:rgba(255,255,255,.86); text-decoration:none; font-size:.96rem}
.site-footer a:hover{color:var(--white); text-decoration:underline}
.footer-logo{width:250px; margin-bottom:18px}
.footer-brand p{font-size:.95rem; color:rgba(255,255,255,.78)}
.footer-legal{
  border-top:1px solid var(--navy-line); margin-top:44px; padding:26px 0 34px;
  font-size:.86rem; color:rgba(255,255,255,.7);
}
.footer-legal p{margin-bottom:.8em; max-width:95ch}
.footer-legal p:last-child{margin-bottom:0}

/* --------------------------------------------------------- mobile call -- */
.callbar{display:none}

/* ---------------------------------------------------------------- misc -- */
.prose h2{margin-top:2.2em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.8em}
.prose ul{padding-left:1.2em}
.center{text-align:center}
.cta-band{text-align:center}
.cta-band .btn-row{justify-content:center}
.cta-band p{margin-left:auto; margin-right:auto; max-width:62ch}
.mono-phone{font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:var(--white); text-decoration:none}

/* ---------------------------------------------------------- animation -- */
.reveal{opacity:0; transform:translateY(14px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}

/* --------------------------------------------------------- responsive -- */
@media (max-width:1040px){
  .nav a{padding:9px 8px; font-size:.9rem}
  .brand img{width:210px}
  .header-phone{display:none}
}
@media (max-width:900px){
  .nav{display:none}
  .menu-toggle{display:inline-flex}
  .header-actions{margin-left:auto}
  .header-actions .btn--primary{display:none}
  .drawer{
    display:block; position:fixed; top:0; right:0; bottom:0; left:auto; width:min(320px,84vw);
    z-index:90; background:var(--paper); box-shadow:var(--shadow-lift);
    padding:20px var(--gutter) 40px; overflow-y:auto;
    transform:translateX(100%); visibility:hidden; transition:transform .25s ease, visibility .25s;
  }
  .drawer.is-open{transform:translateX(0); visibility:visible}
  body.drawer-open::before{
    content:""; position:fixed; top:0; bottom:0; left:0; right:min(320px,84vw); z-index:85;
    background:var(--navy);
  }
  .drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px}
  .drawer-head img{width:170px}
  .drawer nav{display:block}
  .drawer nav a{
    display:block; padding:14px 2px; border-bottom:1px solid var(--line);
    font-family:var(--font-display); font-size:1.16rem; font-weight:600; color:var(--ink); text-decoration:none;
  }
  .drawer nav a.sub{font-family:var(--font-body); font-size:1rem; font-weight:500; padding-left:16px; color:var(--ink-soft)}
  .drawer-details{border-bottom:1px solid var(--line)}
  .drawer-details .drawer-submenu a.sub{border-bottom:0}
  .drawer-details[open]{padding-bottom:6px}
  .drawer-trigger{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 2px; cursor:pointer; list-style:none;
    font-family:var(--font-display); font-size:1.16rem; font-weight:600; color:var(--ink);
  }
  .drawer-trigger::-webkit-details-marker{display:none}
  .drawer-trigger::marker{content:""}
  .drawer-trigger::after{
    content:""; flex:0 0 auto; width:9px; height:9px; margin-top:-3px;
    border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft);
    transform:rotate(45deg); transition:transform .18s ease;
  }
  .drawer-details[open] .drawer-trigger::after{transform:rotate(-135deg); margin-top:3px}
  .drawer .btn{width:100%; margin-top:18px}
  .doors,.grid--3,.grid--4,.steps,.steps--4,.split,.trustbar ul{grid-template-columns:repeat(2,1fr)}
  .trustbar li:nth-child(3){border-left:0; padding-left:0}
  .trustbar li:nth-child(3),.trustbar li:nth-child(4){border-top:1px solid var(--navy-line)}
  .footer-grid{grid-template-columns:1fr 1fr; gap:30px}
  body{padding-bottom:64px}
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; gap:1px; position:fixed; left:0; right:0; bottom:0; z-index:80;
    background:var(--navy-line); border-top:1px solid var(--navy-line);
  }
  .callbar a{
    background:var(--navy); color:var(--white); text-decoration:none; text-align:center;
    padding:16px 8px; font-weight:700; font-size:.96rem;
  }
  .callbar a.alt{background:var(--navy-deep)}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero-figure{position:relative; inset:auto; aspect-ratio:4/3; overflow:hidden}
  .hero-figure img{object-fit:cover; object-position:center center}
  .hero-figure::after{background:linear-gradient(180deg, rgba(8,72,110,0) 55%, var(--navy) 100%)}
  .hero-inner{padding-top:clamp(28px,5vw,40px)}
  .hero--photo .hero-content{text-shadow:none}
  .doors,.grid--2,.grid--3,.grid--4,.steps,.steps--4,.split,.ticks--2,.field--row,.trustbar ul{grid-template-columns:1fr}
  .trustbar li{border-left:0 !important; padding-left:0 !important; border-top:1px solid var(--navy-line)}
  .trustbar li:first-child{border-top:0}
  .footer-grid{grid-template-columns:1fr}
  .factlist div{grid-template-columns:1fr; gap:2px}
  .brand img{width:190px}
  .drawer-head img{width:150px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
  .splash{display:none}
}

/* ------------------------------------------------------------- splash -- */
.splash{
  position:fixed; inset:0; z-index:9999; background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  animation:splashOut .6s ease 1.15s forwards;
}
.no-splash .splash{display:none}
.splash-inner{
  text-align:center; opacity:0;
  animation:splashIn .6s ease .1s forwards;
}
.splash-inner img{width:clamp(200px,42vw,380px); margin:0 auto 22px}
.splash-tag{
  font:700 clamp(.78rem,.7rem + .3vw,.98rem)/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin:0;
}
@keyframes splashIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes splashOut{to{opacity:0; visibility:hidden}}

@media print{
  .site-header,.callbar,.drawer,.cta-band{display:none}
  body{background:#fff}
}

/* ==========================================================================
   Patterns adapted from the design study (audience-led IA, alternating
   image bands, staged expectations, credential strip, inline enquiry)
   ========================================================================== */

/* ------------------------------------------------------- services menu -- */
.has-menu{position:relative}
.nav-trigger{
  display:inline-flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer;
  font:500 .94rem var(--font-body); color:var(--ink); padding:9px 11px; border-radius:var(--radius-sm);
}
.nav-trigger:hover{background:var(--mist); color:var(--navy)}
.nav-trigger[aria-expanded="true"]{background:var(--mist); color:var(--navy)}
.nav-trigger svg{transition:transform .18s ease}
.nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.megamenu{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:min(660px,86vw); background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-lift); padding:22px;
  display:grid; grid-template-columns:1fr 1fr; gap:10px 18px;
  opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.megamenu.is-open{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.megamenu a{
  display:block; padding:12px 14px; border-radius:var(--radius-sm); text-decoration:none;
  color:var(--ink); font-size:.95rem; font-weight:600; white-space:normal;
}
.megamenu a span{display:block; font-weight:400; font-size:.86rem; color:var(--ink-soft); margin-top:3px}
.megamenu a:hover{background:var(--mist); color:var(--navy)}
.megamenu .all{grid-column:1 / -1; border-top:1px solid var(--line); margin-top:6px; padding-top:14px; color:var(--navy)}

/* ---------------------------------------------------------- image band -- */
.band{
  display:grid; grid-template-columns:minmax(0,1.618fr) minmax(0,1fr); gap:clamp(28px,4.4vw,64px); align-items:center;
}
.band + .band{margin-top:clamp(44px,5.4vw,84px)}
.band--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.618fr)}
.band--flip .band-figure{order:2}
.band-figure{position:relative; margin:0}
.band-figure img{
  width:100%; border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:var(--shadow); background:var(--mist);
}
.map-embed{
  width:100%; aspect-ratio:3/2; display:block;
  border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:var(--shadow); background:var(--mist);
}
.panel .map-embed{aspect-ratio:4/3; margin-top:16px}
.band-figure figcaption{
  font-size:.82rem; color:var(--ink-soft); margin-top:10px;
}
.band-figure::after{
  content:""; position:absolute; inset:auto -14px -14px auto; width:58%; height:58%;
  border-right:3px solid var(--mist-deep); border-bottom:3px solid var(--mist-deep);
  border-radius:0 0 var(--radius) 0; z-index:-1;
}
.band--moss .band-figure::after{border-color:#C3DACF}
.band-body h2{margin-bottom:.45em}
.band-body p:last-child{margin-bottom:0}
.band-body .btn-row{margin-top:1.5rem}

/* ------------------------------------------------------------ timeline -- */
.timeline{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:stage}
.stage{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; position:relative;
}
.stage::before{
  content:""; position:absolute; left:24px; right:24px; top:0; height:4px;
  background:var(--navy); border-radius:0 0 3px 3px;
}
.stage-when{
  font:700 .74rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber-text); display:block; margin-bottom:.7rem;
}
.stage h3{margin-bottom:.5em}
.stage p{color:var(--ink-soft); font-size:.98rem}
.stage ul{margin:0; padding-left:1.1em; font-size:.97rem; color:var(--ink-soft)}
.stage ul li{margin-bottom:.4em}

/* --------------------------------------------------------- credentials -- */
.credentials{background:var(--sand); border-top:1px solid #E7DCCB; padding:34px 0}
.credentials-inner{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center;
}
.credentials h2{font-size:1.06rem; font-family:var(--font-body); font-weight:700; margin:0 0 .3em}
.credentials p{margin:0; font-size:.92rem; color:var(--ink-soft); max-width:52ch}
.cred-marks{display:flex; flex-wrap:wrap; gap:10px}
.cred-mark{
  display:flex; align-items:center; gap:9px; background:var(--white); border:1px solid #E7DCCB;
  border-radius:999px; padding:9px 16px; font-size:.87rem; font-weight:600; color:var(--ink);
}
.cred-mark svg{color:var(--navy); flex:0 0 auto}

/* ------------------------------------------------------- inline enquiry -- */
.enquiry{background:var(--navy); color:var(--white); border-radius:var(--radius); padding:clamp(28px,3.4vw,44px)}
.enquiry h2{color:var(--white); margin-bottom:.4em}
.enquiry p{color:rgba(255,255,255,.88)}
.enquiry .form{margin-top:1.5rem}
.enquiry .field label{color:var(--white)}
.enquiry .field .hint{color:rgba(255,255,255,.75)}
.enquiry .field input,.enquiry .field select{border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.06); color:var(--white)}
.enquiry .field input::placeholder{color:rgba(255,255,255,.6)}
.enquiry .field input:hover,.enquiry .field select:hover{border-color:rgba(255,255,255,.55)}
.enquiry .field select option{color:var(--ink)}
.enquiry .consent{color:rgba(255,255,255,.85)}
.enquiry .consent a{color:var(--white)}
.enquiry-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}

/* --------------------------------------------------------- testimonials -- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.quote{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; position:relative;
}
.quote p{font-size:1.02rem; color:var(--ink)}
.quote::before{
  content:"\201C"; font-family:var(--font-display); font-size:3.4rem; line-height:1;
  color:var(--mist-deep); display:block; margin-bottom:.1em;
}
.quote cite{display:block; font-style:normal; font-weight:700; font-size:.9rem; color:var(--ink-soft); margin-top:1rem}

/* ----------------------------------------------------------- watermark -- */
.has-watermark{position:relative; overflow:hidden}
.has-watermark > .wrap{position:relative; z-index:1}
.watermark{
  position:absolute; right:-70px; top:50%; transform:translateY(-50%);
  width:min(440px,42%); opacity:.05; pointer-events:none; z-index:0;
}
.section--navy .watermark{opacity:.09}

@media (max-width:900px){
  .band,.timeline,.quotes,.enquiry-grid,.credentials-inner{grid-template-columns:1fr}
  .band--flip .band-figure{order:0}
  .megamenu{display:none}
  .watermark{display:none}
  .credentials-inner{gap:18px}
}
@media (max-width:640px){
  .cred-mark{font-size:.83rem; padding:8px 13px}
}

/* ------------------------------------------------------------ chc-chat -- */
.chc-chat{position:fixed; right:clamp(14px,3vw,26px); bottom:24px; z-index:120}
.chc-chat-launcher{
  width:60px; height:60px; border-radius:50%; border:0; cursor:pointer;
  background:var(--moss); color:var(--white); box-shadow:var(--shadow-lift);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, background .15s ease;
}
.chc-chat-launcher:hover{background:#255744; transform:translateY(-2px)}
.chc-chat-launcher svg{width:26px; height:26px}
.chc-chat-launcher .chc-icon-close{display:none}
.chc-chat.is-open .chc-icon-chat{display:none}
.chc-chat.is-open .chc-icon-close{display:block}

.chc-chat-greeting{
  position:absolute; right:0; bottom:74px; width:min(260px,72vw);
  background:var(--white); color:var(--ink); border-radius:14px 14px 4px 14px;
  padding:14px 34px 14px 16px; box-shadow:var(--shadow-lift);
  font-size:.92rem; line-height:1.4;
  opacity:0; transform:translateY(8px) scale(.97); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.chc-chat-greeting.is-visible{opacity:1; transform:none; pointer-events:auto}
.chc-chat.is-open .chc-chat-greeting{display:none}
.chc-chat-greeting-close{
  position:absolute; top:8px; right:8px; width:20px; height:20px; border:0; background:none;
  color:var(--ink-soft); font-size:1.1rem; line-height:1; cursor:pointer; padding:0;
}

.chc-chat-panel{
  position:absolute; right:0; bottom:74px; width:min(360px,86vw); height:min(520px,72vh);
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow-lift);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.chc-chat.is-open .chc-chat-panel{opacity:1; transform:none; pointer-events:auto}
.chc-chat-head{
  background:var(--navy); color:var(--white); padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; flex:0 0 auto;
}
.chc-chat-head strong{display:block; font-family:var(--font-display); font-size:1.02rem; font-weight:700}
.chc-chat-head span{display:block; font-size:.78rem; color:rgba(255,255,255,.75)}
.chc-chat-close{background:none; border:0; color:var(--white); font-size:1.3rem; line-height:1; cursor:pointer; padding:4px}
.chc-chat-log{flex:1 1 auto; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.chc-msg{max-width:88%; padding:9px 13px; border-radius:12px; font-size:.9rem; line-height:1.45}
.chc-msg--bot{align-self:flex-start; background:var(--mist); color:var(--ink); border-bottom-left-radius:3px}
.chc-msg--user{align-self:flex-end; background:var(--moss); color:var(--white); border-bottom-right-radius:3px}
.chc-chat-quick{display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 10px; flex:0 0 auto}
.chc-chat-quick button{
  font-size:.78rem; font-weight:600; padding:6px 11px; border-radius:999px;
  border:1px solid var(--mist-deep); background:var(--white); color:var(--navy); cursor:pointer;
}
.chc-chat-quick button:hover{background:var(--mist)}
.chc-chat-form{display:flex; gap:8px; padding:10px 16px; border-top:1px solid var(--line); flex:0 0 auto}
.chc-chat-form input{
  flex:1 1 auto; font:400 .92rem var(--font-body); padding:9px 12px;
  border:1.5px solid var(--mist-deep); border-radius:var(--radius-sm); color:var(--ink);
}
.chc-chat-form button{
  background:var(--navy); color:var(--white); border:0; border-radius:var(--radius-sm);
  padding:0 14px; font-weight:700; cursor:pointer;
}
.chc-chat-form button:hover{background:var(--navy-deep)}
.chc-chat-foot{
  font-size:.72rem; color:var(--ink-soft); text-align:center; padding:0 14px 12px; margin:0; flex:0 0 auto;
}
.chc-chat-foot a{color:var(--navy)}
.chc-msg--typing{display:flex; align-items:center; gap:4px; padding:12px 13px}
.chc-typing-dot{
  width:6px; height:6px; border-radius:50%; background:var(--ink-soft);
  animation:chcTypingBounce 1.2s ease-in-out infinite;
}
.chc-typing-dot:nth-child(2){animation-delay:.15s}
.chc-typing-dot:nth-child(3){animation-delay:.3s}
@keyframes chcTypingBounce{0%,60%,100%{transform:translateY(0); opacity:.5} 30%{transform:translateY(-4px); opacity:1}}
@media (prefers-reduced-motion:reduce){
  .chc-typing-dot{animation:none; opacity:.7}
}

@media (max-width:900px){
  .chc-chat{bottom:88px; right:14px}
}
@media (max-width:480px){
  .chc-chat-panel{width:92vw; right:-6px}
  .chc-chat-greeting{width:78vw}
}
@media (prefers-reduced-motion:reduce){
  .chc-chat-greeting,.chc-chat-panel{transition:none}
}