/* Epic Senior Care — extracted stylesheet.
   The pages already carry this inline (one file each, nothing to load).
   Use this copy only if you would rather link a shared stylesheet. */
/* ==========================================================================
   Epic Senior Care Inc. — design system
   Concept: a house, not a facility. Domestic, calm, high-legibility.
   All text/background pairs tested at WCAG 2.1/2.2 AA or better.
   ========================================================================== */

:root{
  /* Brand, straight off the logo: royal blue #102A43 and gold #F4A000. */
  --blue:        #102A43;   /* primary. 11.3:1 either way against white */
  --blue-lit:    #1B3D5C;   /* hover fills. 9.5:1 with white */
  --navy:        #0B1F31;   /* deepest band + footer */
  --ink:         #24313F;   /* body text. 15.4:1 on white */
  --ink-soft:    #4C5C6B;   /* secondary text. 9.1:1 on white */
  --paper:       #FFFFFF;
  --mist:        #F5F7FA;   /* pale blue band */
  --sand:        #FFF9F0;   /* pale gold band */
  --gold:        #F4A000;   /* logo gold. Surfaces and dark backgrounds only */
  --gold-ink:    #8A5A00;   /* the gold family as text on light. 6.6:1 */

  /* Lines */
  --heading:     #172B3A;   /* H1-H3. 14.6:1 on white */
  --brand-blue:  #0033CC;   /* the logo blue. Focus rings only */
  --line:        #E3E8EF;
  --line-strong: #5F6E7E;   /* 4.9:1 on white — safe for inputs/UI edges */
  --line-dark:   #22415B;

  /* Type */
  --font-display: "Source Serif 4", "Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --wrap: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --band-y: clamp(3.5rem, 7vw, 6.5rem);
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;

  --header-h: 76px;
  --shadow: 0 10px 30px -18px rgba(16,42,67,.5);
  --dur: .28s;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  color-scheme: light;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* WCAG 2.2 – 2.4.11 Focus Not Obscured: keep targets clear of the sticky header */
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:1.125rem;      /* 18px base — senior-friendly */
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

/* ---------- Type scale ---------- */
h1,h2,h3,h4{letter-spacing:-.015em;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--blue);
  margin:0 0 .6em;
  letter-spacing:-.012em;
  text-wrap:balance;
}
h1{font-size:clamp(2.35rem,5.4vw,4.05rem);line-height:1.05;letter-spacing:-.022em}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.14}
h3{font-size:clamp(1.24rem,1.9vw,1.45rem);line-height:1.3;font-weight:600}
h4{font-size:1.08rem;line-height:1.35;font-family:var(--font-ui);font-weight:700;letter-spacing:0}
p{margin:0 0 1.1em;max-width:68ch}
.lede{font-size:clamp(1.16rem,1.9vw,1.33rem);line-height:1.55;color:var(--ink-soft);max-width:60ch}

a{color:var(--blue);text-underline-offset:.22em;text-decoration-thickness:.08em}
a:hover{color:var(--gold-ink)}

ul,ol{padding-left:1.15em;margin:0 0 1.1em}
li{margin-bottom:.42em;max-width:66ch}

hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

/* ---------- Focus (visible on every surface, survives high contrast) ---------- */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
.band--dark :focus-visible,
.site-footer :focus-visible,
.drawer :focus-visible{outline-color:var(--gold)}

/* ---------- Utilities ---------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}
.wrap{width:min(100% - (var(--gut) * 2), var(--wrap));margin-inline:auto}
.band{padding-block:var(--band-y)}
.band--paper{background:var(--paper)}
.band--mist{background:var(--mist)}
.band--sand{background:var(--sand)}
.band--dark{background:var(--blue);color:#EFF2F6}
.band--navy{background:var(--navy);color:#EDF1F5}
.band--dark h2,.band--dark h3,.band--navy h2,.band--navy h3{color:#FFFFFF}
.band--dark p,.band--navy p{color:#DCE3EB}
.band--dark a:not(.btn),.band--navy a:not(.btn){color:var(--gold)}
.band--tight{padding-block:clamp(2.25rem,4vw,3.25rem)}

.stack > * + *{margin-top:1.1rem}
.measure{max-width:64ch}

/* Skip link */
.skip-link{
  position:absolute;top:0;left:var(--gut);z-index:200;
  transform:translateY(-140%);
  background:var(--navy);color:#fff;
  padding:.85rem 1.4rem;border-radius:0 0 var(--r-md) var(--r-md);
  font-weight:600;text-decoration:none;
  transition:transform var(--dur) var(--ease);
}
.skip-link:focus-visible{transform:translateY(0);outline-offset:-3px;outline-color:var(--gold)}

main:focus{outline:none}
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
section[tabindex="-1"]:focus,div[tabindex="-1"]:focus{outline:none}

/* ==========================================================================
   Header — animated sticky
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 8px 24px -20px rgba(16,42,67,.75);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);
}

/* Utility strip collapses on scroll */
.util{
  background:var(--navy);color:#DCE3EB;
  font-size:.9rem;
  overflow:hidden;
  max-height:52px;
  transition:max-height var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.is-stuck .util{max-height:0;opacity:0}
.util__row{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:center;padding:.6rem 0;justify-content:flex-end}
.util a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;min-height:32px}
.util a:hover{color:var(--gold);text-decoration:underline}
.util__sep{color:#7C8B99}

.bar{
  display:flex;align-items:center;gap:1.25rem;
  min-height:var(--header-h);
  transition:min-height var(--dur) var(--ease);
}
.is-stuck .bar{min-height:64px}

/* Wordmark lockup */
.brand{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--blue);margin-right:auto;padding:.35rem 0}
.brand__mark{
  display:grid;grid-template-columns:repeat(3,5px);grid-auto-rows:5px;gap:3px;
  padding:7px;border:1.5px solid var(--blue);border-radius:7px;flex:none;
  transition:transform var(--dur) var(--ease);
}
.brand__mark i{background:var(--blue);border-radius:50%;display:block}
.brand__mark i:nth-child(12){background:var(--gold-ink)}
.is-stuck .brand__mark{transform:scale(.88)}
.brand__name{display:block;font-family:var(--font-display);font-size:1.32rem;font-weight:600;line-height:1.05;letter-spacing:-.015em}
.brand__sub{
  display:block;font-family:var(--font-ui);font-size:.78rem;font-weight:600;
  letter-spacing:.01em;color:var(--ink-soft);line-height:1.3;max-width:15ch;
  max-height:2.8em;opacity:1;overflow:hidden;
  transition:max-height var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.is-stuck .brand__sub{max-height:0;opacity:0}

/* Desktop nav */
.nav{display:none}
.nav ul{list-style:none;margin:0;padding:0}
.nav > ul{display:flex;align-items:center;gap:.35rem}
.nav li{margin:0}
.nav__link,.nav__btn{
  font:inherit;font-size:1rem;font-weight:500;
  color:var(--ink);background:none;border:0;
  padding:.7rem .85rem;min-height:44px;
  display:inline-flex;align-items:center;gap:.35rem;
  text-decoration:none;border-radius:var(--r-sm);cursor:pointer;
  position:relative;
}
.nav__link:hover,.nav__btn:hover{color:var(--blue);background:var(--mist)}
/* current-page marker */
.nav__link[aria-current="page"],
.nav__btn[aria-current="true"]{color:var(--blue);font-weight:700}
.nav__link[aria-current="page"]::after,
.nav__btn[aria-current="true"]::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.35rem;height:3px;
  background:var(--gold-ink);border-radius:2px;
}
.nav__caret{width:10px;height:10px;flex:none;transition:transform var(--dur) var(--ease)}
.nav__btn[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}

.nav__sub{
  position:absolute;top:calc(100% - .25rem);left:0;min-width:290px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow);padding:.5rem;
  display:none;flex-direction:column;gap:2px;z-index:10;
}
.has-sub{position:relative}
.has-sub.is-open .nav__sub{display:flex}
.nav__sub a{
  display:flex;align-items:center;padding:.6rem .8rem;min-height:44px;
  text-decoration:none;color:var(--ink);border-radius:var(--r-sm);
  font-size:.98rem;line-height:1.35;
}
.nav__sub a:hover,.nav__sub a:focus-visible{background:var(--mist);color:var(--blue)}

.nav-cta{display:none}

/* Hamburger */
.burger{
  margin-left:auto;
  width:48px;height:48px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--paper);border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  cursor:pointer;color:var(--blue);
}
.burger:hover{background:var(--mist)}
.burger__box{position:relative;width:22px;height:14px;display:block}
.burger__box span{
  position:absolute;left:0;height:2.5px;width:100%;background:currentColor;border-radius:2px;
  transition:transform var(--dur) var(--ease), opacity .16s linear, width var(--dur) var(--ease);
}
.burger__box span:nth-child(1){top:0}
.burger__box span:nth-child(2){top:6px;width:74%}
.burger__box span:nth-child(3){top:12px}
.burger[aria-expanded="true"] .burger__box span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box span:nth-child(2){opacity:0;width:0}
.burger[aria-expanded="true"] .burger__box span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */
.scrim{
  position:fixed;inset:0;z-index:120;background:rgba(16,42,67,.55);
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease), visibility var(--dur);
}
.scrim.is-open{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:130;
  width:min(100%,430px);
  background:var(--blue);color:#EFF2F6;
  display:flex;flex-direction:column;
  transform:translateX(102%);
  transition:transform .38s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open{transform:translateX(0)}
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.5rem;border-bottom:1px solid var(--line-dark)}
.drawer__eyebrow{font-size:.82rem;letter-spacing:.06em;color:#A7B4C1;font-weight:600}
.drawer__close{
  width:48px;height:48px;border-radius:var(--r-sm);
  background:transparent;border:1.5px solid var(--line-dark);color:#fff;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem;line-height:1;
}
.drawer__close:hover{background:var(--blue-lit)}

.drawer__nav{list-style:none;margin:0;padding:.5rem 0;flex:1}
.drawer__nav li{margin:0;border-bottom:1px solid var(--line-dark)}
.drawer__nav > li > a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.5rem;min-height:64px;
  font-family:var(--font-display);font-size:1.65rem;font-weight:500;
  color:#fff;text-decoration:none;
}
.drawer__nav > li > a:hover{background:var(--blue-lit);color:var(--gold)}
.drawer__nav > li > a[aria-current="page"]{color:var(--gold)}
.drawer__nav > li > a[aria-current="page"] .drawer__dot{background:var(--gold);opacity:1}
.drawer__dot{width:9px;height:9px;border-radius:50%;background:#fff;opacity:.35;flex:none}
.drawer__sub{list-style:none;margin:0;padding:0 0 .85rem 1.5rem}
.drawer__sub li{border:0;margin:0}
.drawer__sub a{
  display:block;padding:.65rem 1.5rem .65rem 0;min-height:44px;
  color:#CBD5DF;text-decoration:none;font-size:1rem;
}
.drawer__sub a:hover{color:var(--gold);text-decoration:underline}

.drawer__foot{padding:1.35rem 1.5rem 2rem;background:var(--navy);border-top:1px solid var(--line-dark)}
.drawer__call{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--gold);color:var(--navy);
  font-weight:700;font-size:1.1rem;text-decoration:none;
  padding:1rem;border-radius:var(--r-md);min-height:56px;
}
.drawer__call:hover{background:#FFB733;color:var(--navy)}
.drawer__meta{margin:.9rem 0 0;font-size:.92rem;color:#B3BFCA;max-width:none}
.drawer__meta a{color:#DCE3EB}

/* Staggered reveal of drawer items */
.drawer.is-open .drawer__nav > li{animation:drawerIn .42s var(--ease) both}
.drawer.is-open .drawer__nav > li:nth-child(1){animation-delay:.06s}
.drawer.is-open .drawer__nav > li:nth-child(2){animation-delay:.11s}
.drawer.is-open .drawer__nav > li:nth-child(3){animation-delay:.16s}
.drawer.is-open .drawer__nav > li:nth-child(4){animation-delay:.21s}
.drawer.is-open .drawer__foot{animation:drawerIn .42s var(--ease) .26s both}
@keyframes drawerIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-weight:600;font-size:1.03rem;
  padding:.9rem 1.6rem;min-height:52px;min-width:44px;
  border-radius:var(--r-md);border:2px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn--primary:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn--ghost{background:transparent;color:var(--blue);border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn--gold-ink{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn--gold-ink:hover{background:#FFB733;border-color:#FFB733;color:var(--navy)}
.btn--onDark{background:transparent;color:#fff;border-color:#41586E}
.btn--onDark:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.6rem}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background:
    radial-gradient(1100px 520px at 88% -12%, #D7DFE7 0%, rgba(215,223,231,0) 62%),
    linear-gradient(180deg,#F5F7FA 0%, var(--paper) 100%);
  padding-block:clamp(3rem,6vw,5.5rem) clamp(3.25rem,6vw,5.5rem);
  border-bottom:1px solid var(--line);
}
.hero__grid{display:grid;gap:clamp(2.25rem,4vw,3.5rem)}
.hero h1{margin-bottom:.45em}
.hero .lede{margin-bottom:0}

.hero--page{padding-block:clamp(2.5rem,5vw,4rem)}
.hero--page h1{font-size:clamp(2.1rem,4.4vw,3.3rem)}

/* At-a-glance panel */
.glance{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.6vw,1.9rem);box-shadow:var(--shadow);
}
.glance h2{font-size:1.12rem;font-family:var(--font-ui);font-weight:700;color:var(--ink);margin-bottom:.9rem;letter-spacing:0}
.dots{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin:0 0 .8rem;padding:0;list-style:none;max-width:196px}
.dots li{margin:0;aspect-ratio:1;border-radius:7px;background:var(--mist);border:1.5px solid var(--line);display:block}
.dots li.is-filled{background:var(--blue);border-color:var(--blue)}
.dots li.is-open{background:var(--paper);border:1.5px dashed var(--gold-ink)}
.glance__cap{font-size:.95rem;color:var(--ink-soft);margin:0 0 1.15rem;max-width:none}
.glance dl{margin:0;display:grid;gap:.7rem}
.glance dl > div{display:flex;gap:.75rem;align-items:flex-start;border-top:1px solid var(--line);padding-top:.7rem}
.glance dt{font-weight:700;font-size:.93rem;color:var(--ink-soft);flex:0 0 44%}
.glance dd{margin:0;font-size:.98rem;font-weight:500}

/* Reserved: the dot motif is no longer used on the home page */
.js .dots li{opacity:0;transform:scale(.72)}
.js .dots.is-ready li{animation:dotIn .5s var(--ease) both}
.dots.is-ready li:nth-child(1){animation-delay:.05s}
.dots.is-ready li:nth-child(2){animation-delay:.10s}
.dots.is-ready li:nth-child(3){animation-delay:.15s}
.dots.is-ready li:nth-child(4){animation-delay:.20s}
.dots.is-ready li:nth-child(5){animation-delay:.25s}
.dots.is-ready li:nth-child(6){animation-delay:.30s}
.dots.is-ready li:nth-child(7){animation-delay:.35s}
.dots.is-ready li:nth-child(8){animation-delay:.40s}
.dots.is-ready li:nth-child(9){animation-delay:.45s}
.dots.is-ready li:nth-child(10){animation-delay:.50s}
.dots.is-ready li:nth-child(11){animation-delay:.55s}
.dots.is-ready li:nth-child(12){animation-delay:.62s}
@keyframes dotIn{to{opacity:1;transform:none}}

/* ==========================================================================
   Facts strip
   ========================================================================== */
.facts{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line)}
.facts li{margin:0;background:var(--mist);padding:1.6rem 1.4rem}
.facts b{display:block;font-family:var(--font-display);font-size:1.28rem;font-weight:600;color:var(--blue);line-height:1.2}
.facts span{display:block;font-size:.95rem;color:var(--ink-soft);margin-top:.3rem}

/* ==========================================================================
   Cards
   ========================================================================== */
.grid{display:grid;gap:1.25rem}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.35rem,2.4vw,1.75rem);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card h3{margin-bottom:.5rem}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card ul{padding-left:1.1em;font-size:1rem;color:var(--ink-soft)}
.band--mist .card,.band--sand .card{background:var(--paper)}
.card--link:hover{border-color:var(--blue);transform:translateY(-3px)}
.card--link a{text-decoration:underline;text-decoration-color:rgba(138,90,0,.34);text-decoration-thickness:.09em;font-weight:600}
.card--link:hover a{text-decoration-color:var(--gold-ink)}
.card--link a::after{content:"";position:absolute;inset:0}
.card--link{position:relative}

/* Audience router */
.router{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.router li{margin:0}
.router a{
  display:block;height:100%;position:relative;
  background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--blue);
  border-radius:var(--r-md);padding:1.4rem 1.4rem 1.5rem;text-decoration:none;color:var(--ink);
  transition:border-left-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.router a:hover{border-left-color:var(--gold-ink);transform:translateY(-3px);box-shadow:var(--shadow)}
.router strong{display:block;font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--blue);margin-bottom:.3rem}
.router span{display:block;font-size:.99rem;color:var(--ink-soft);line-height:1.5}

/* Answer block (AEO) */
.answer{
  border-left:5px solid var(--gold-ink);
  background:var(--paper);
  padding:1.4rem 1.5rem;border-radius:0 var(--r-md) var(--r-md) 0;
  border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.answer p:last-child{margin-bottom:0}
.answer p:first-child{font-size:1.1rem}

/* Photo slots — replace with real photography, see README */
.photo{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(140deg,#1B3D5C 0%,#102A43 45%,#0B1F31 100%);
  min-height:220px;display:flex;align-items:flex-end;
  border:1px solid var(--line-dark);
}
.photo::before{
  content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:26px 26px;
}
.photo--tall{min-height:340px}
.photo--wide{min-height:280px}
.photo{aspect-ratio:3/2}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.photo figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:.8rem 1rem;
  background:linear-gradient(0deg,rgba(16,42,67,.92),rgba(16,42,67,0));
  color:#DCE3EB;font-size:.88rem;line-height:1.4;
}

/* ==========================================================================
   Sequence / steps  (used only where content is genuinely a sequence)
   ========================================================================== */
.steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:1.1rem}
.steps li{
  margin:0;counter-increment:step;position:relative;
  padding:1.3rem 1.4rem 1.4rem 4.1rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
}
.steps li::before{
  content:counter(step);position:absolute;left:1.25rem;top:1.3rem;
  width:36px;height:36px;border-radius:50%;
  background:var(--blue);color:#fff;font-weight:700;font-size:1rem;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);
}
.steps h3,.steps h4{margin-bottom:.35rem;font-size:1.16rem;font-family:var(--font-display);font-weight:600;color:var(--blue);letter-spacing:-.012em}
.steps p:last-child{margin-bottom:0}

/* Day timeline */
.rhythm{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.rhythm li{margin:0;padding:0 0 1.6rem 1.6rem;position:relative;max-width:62ch}
.rhythm li::before{content:"";position:absolute;left:-7px;top:.55rem;width:12px;height:12px;border-radius:50%;background:var(--gold-ink);border:2px solid var(--paper)}
.rhythm time{display:block;font-weight:700;font-size:.95rem;color:var(--blue);margin-bottom:.15rem}
.rhythm p{margin:0}

/* ==========================================================================
   Tables
   ========================================================================== */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:1rem}
caption{text-align:left;padding:1rem 1.1rem;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
th,td{padding:.9rem 1.1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{background:var(--mist);color:var(--blue);font-weight:700;font-size:.97rem}
tbody th{font-weight:700;color:var(--ink)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.hours-table{min-width:0}
.hours-table th{font-weight:600;white-space:nowrap}
.hours-table td{text-align:right}

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;text-align:left;font:inherit;font-family:var(--font-display);
  font-size:clamp(1.08rem,1.7vw,1.24rem);font-weight:600;color:var(--blue);
  background:none;border:0;cursor:pointer;
  padding:1.25rem 3rem 1.25rem 0;min-height:56px;position:relative;
}
.faq__q:hover{color:var(--gold-ink)}
.faq__q::after{
  content:"";position:absolute;right:.55rem;top:50%;width:14px;height:14px;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform var(--dur) var(--ease);
}
.faq__q[aria-expanded="true"]::after{transform:translateY(-25%) rotate(-135deg)}
.faq__a{padding:0 3rem 1.4rem 0}
.faq__a > :last-child{margin-bottom:0}
.faq__a[hidden]{display:none}

/* ==========================================================================
   Contact / forms
   ========================================================================== */
.contact-grid{display:grid;gap:2.5rem}

.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2.1rem)}
.field{margin-bottom:1.35rem}
.field label{display:block;font-weight:600;margin-bottom:.35rem;font-size:1rem}
.req{color:var(--gold-ink);font-weight:700}
.hint{display:block;font-size:.9rem;color:var(--ink-soft);margin-bottom:.45rem}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1.05rem;
  padding:.8rem .9rem;min-height:52px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);
}
.field textarea{min-height:150px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--blue)}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{
  border-color:#A31621;border-width:2px;background:#FDF5F5;
}
.field-error{display:block;color:#8E1219;font-weight:600;font-size:.94rem;margin-top:.4rem}
.field-error:empty{display:none}
.radios{display:grid;gap:.5rem;margin:0;padding:0;border:0}
.radios legend{font-weight:600;margin-bottom:.5rem;padding:0;font-size:1rem}
.radio{display:flex;align-items:center;gap:.65rem;min-height:44px;cursor:pointer;font-weight:400}
.radio input{width:22px;height:22px;min-height:0;flex:none;accent-color:var(--blue)}

.form-status{margin-bottom:1.35rem}
.alert{border-radius:var(--r-md);padding:1rem 1.15rem;border:2px solid;font-size:1rem}
.alert h2,.alert h3{font-size:1.08rem;margin:0 0 .4rem;font-family:var(--font-ui);letter-spacing:0}
.alert p:last-child,.alert ul:last-child{margin-bottom:0}
.alert--error{background:#FDF3F3;border-color:#A31621;color:#6E0E14}
.alert--error h2,.alert--error h3,.alert--error a{color:#6E0E14}
.alert--ok{background:#EFF2F6;border-color:var(--blue);color:var(--ink)}
.alert--ok h2,.alert--ok h3{color:var(--blue)}
.alert ul{margin:.5rem 0 0;padding-left:1.2em}

.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.contact-list li{margin:0;border-top:1px solid var(--line);padding-top:1.1rem}
.contact-list b{display:block;font-size:.92rem;color:var(--ink-soft);font-weight:700;margin-bottom:.15rem}
.contact-list a,.contact-list span{font-size:1.16rem;font-weight:600;color:var(--blue);font-style:normal}
.contact-list address{font-style:normal}

.map-frame{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--mist)}
.map-frame iframe{display:block;width:100%;height:400px;border:0}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta__inner{display:grid;gap:1.75rem;align-items:center}
.cta h2{margin-bottom:.4em}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--navy);color:#E3E8EF;padding-block:clamp(2.75rem,5vw,4rem) 0;font-size:1rem}
.site-footer h2{font-size:1.05rem;font-family:var(--font-ui);font-weight:700;color:#fff;letter-spacing:.01em;margin-bottom:.85rem}
.site-footer a{color:#E3E8EF;text-decoration:none}
.site-footer a:hover{color:var(--gold);text-decoration:underline}
.foot-grid{display:grid;gap:2.25rem}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin:0 0 .55rem}
.foot-list a{display:inline-block;min-height:32px;padding:.15rem 0}
.foot-brand p{color:#A7B4C1;font-size:.98rem;max-width:36ch}
.foot-bottom{
  margin-top:2.5rem;border-top:1px solid #152F45;padding:1.35rem 0 2rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:center;
  font-size:.92rem;color:#A7B4C1;
}
.foot-bottom p{margin:0;max-width:none}
.foot-legal{display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;list-style:none;margin:0;padding:0}
.foot-legal li{margin:0}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width:600px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .router{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .facts{grid-template-columns:repeat(4,1fr)}
  .router{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .cta__inner{grid-template-columns:1.35fr .9fr}
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
}
@media (min-width:1000px){
  .burger{display:none}
  .nav{display:block}
  .nav-cta{display:inline-flex}
  .hero__grid{grid-template-columns:1.1fr .9fr;align-items:start}
  .hero--page .hero__grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .split--wide{grid-template-columns:1.15fr .85fr}
}

/* ==========================================================================
   Preferences: motion, contrast, forced colors, print
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js .dots li{opacity:1;transform:none}
  .drawer{transition:none}
}

@media (prefers-contrast: more){
  :root{--line:#3D4C5A;--ink-soft:#172B3A}
  .card,.router a,.answer,.form,.table-scroll{border-width:2px}
  a{text-decoration-thickness:.12em}
}

@media (forced-colors: active){
  .card,.router a,.glance,.form,.faq__item{border:1px solid CanvasText}
  .btn{border:2px solid ButtonText}
  .dots li{border:2px solid CanvasText}
  .brand__mark i{background:CanvasText}
  :focus-visible{outline:3px solid Highlight}
  .photo::before{display:none}
}

@media print{
  .site-header,.drawer,.scrim,.skip-link,.map-frame,.cta{display:none!important}
  body{font-size:11pt;color:#000}
  .band{padding-block:1rem}
  a::after{content:" (" attr(href) ")";font-size:.85em}
}

/* ==========================================================================
   No-JavaScript fallback — the whole site stays navigable without scripts
   ========================================================================== */
.drawer:not(.is-open){visibility:hidden}
.drawer.is-open{visibility:visible}

html:not(.js) .burger{display:none}
html:not(.js) .drawer,html:not(.js) .scrim{display:none}
html:not(.js) .bar{flex-wrap:wrap;padding-bottom:.6rem}
html:not(.js) .nav{display:block;width:100%}
html:not(.js) .nav ul{flex-wrap:wrap;justify-content:flex-start}
html:not(.js) .nav__btn{display:none}
html:not(.js) .has-sub .nav__sub{
  position:static;display:flex;flex-direction:row;flex-wrap:wrap;
  box-shadow:none;border:0;padding:0;min-width:0;background:none;gap:0;
}


/* ==========================================================================
   Logo lockup
   ========================================================================== */
.brand{gap:.7rem}
.brand__logo{display:block;width:auto;height:52px;flex:none}
.is-stuck .brand__logo{height:42px}
.brand__logo,.brand__name,.brand__sub{transition:height var(--dur) var(--ease)}
@media (max-width:420px){
  .brand__logo{height:42px}
  .brand__name{font-size:1.12rem}
}

/* ==========================================================================
   Motion — one reveal pattern, used sparingly, off when the visitor asks
   ========================================================================== */
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal-1{transition-delay:.06s}
.js .reveal-2{transition-delay:.12s}
.js .reveal-3{transition-delay:.18s}
.js .reveal-4{transition-delay:.24s}

/* Hero entrance: the one orchestrated moment on the page. */
.js .hero__grid > *{animation:heroIn .7s var(--ease) both}
.js .hero__grid > *:nth-child(2){animation-delay:.12s}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Cards and links answer the pointer, quietly. */
.card,.router a,.photo,.tile{transition:transform var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.card:hover,.router a:hover,.tile:hover{transform:translateY(-3px);
  box-shadow:0 18px 34px -24px rgba(16,42,67,.55);border-color:var(--blue)}
.photo:hover img{transform:scale(1.03)}
.photo img{transition:transform .6s var(--ease)}

.nav__link{position:relative}
.nav__link::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.45rem;height:3px;
  background:var(--gold);border-radius:3px;transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}

/* ==========================================================================
   Photography
   ========================================================================== */
.photo-grid{display:grid;gap:1.1rem;margin:2rem 0 0}
@media (min-width:700px){
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .photo-grid--3{grid-template-columns:repeat(3,1fr)}
  .photo-grid .photo--span{grid-column:1 / -1}
}
.photo--flat{aspect-ratio:4/3}
.photo--band{aspect-ratio:21/9;min-height:0}
figure.photo{margin:0}

/* A photograph with a caption sitting under it rather than over it. */
.shot{margin:0}
.shot .photo{margin:0}
.shot figcaption{
  position:static;background:none;color:var(--ink-soft);
  font-size:.92rem;padding:.6rem .1rem 0;line-height:1.5;
}

/* ==========================================================================
   Tiles — a lighter alternative to cards, with a gold rule
   ========================================================================== */
.tiles{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.1rem}
@media (min-width:760px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.5rem 1.4rem;position:relative;overflow:hidden;
}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold)}
.tile h3{margin:0 0 .45em;font-size:1.16rem}
.tile p{margin:0;color:var(--ink-soft);font-size:.99rem}

/* ==========================================================================
   Legal + statement pages
   ========================================================================== */
.legal{max-width:44rem}
.legal h2{margin-top:2.4rem}
.legal h3{margin-top:1.6rem;font-size:1.12rem}
.legal ul{padding-left:1.1rem}
.legal li{margin-bottom:.5rem}
.legal__meta{
  background:var(--mist);border-left:4px solid var(--blue);
  padding:1rem 1.2rem;border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.96rem;color:var(--ink-soft);
}
.legal__toc{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.2rem 1.4rem;margin:0 0 2.4rem;
}
.legal__toc h2{margin:0 0 .6em;font-size:1.05rem}
.legal__toc ol{margin:0;padding-left:1.2rem;columns:2;column-gap:2rem}
@media (max-width:620px){.legal__toc ol{columns:1}}
.legal__toc li{margin-bottom:.35rem;break-inside:avoid}

/* ==========================================================================
   Footer legal row
   ========================================================================== */
.foot-legal{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;
  margin:0;padding:0;list-style:none;
}
.foot-legal a{color:#CBD5DF;text-decoration:none;font-size:.92rem;min-height:32px;
  display:inline-flex;align-items:center}
.foot-legal a:hover{color:var(--gold);text-decoration:underline}
.foot-doxa{font-size:.9rem;color:#A7B4C1;margin:.9rem 0 0}
.foot-doxa a{color:#DCE3EB;font-weight:600}
.foot-doxa a:hover{color:var(--gold)}

/* ==========================================================================
   Logo on dark panels — the drawer and footer use the light lockup
   ========================================================================== */
.drawer__logo{display:block;height:38px;width:auto}
.foot-logo{display:block;height:56px;width:auto;margin-bottom:.9rem}

/* The drawer is deliberately a different surface from the header: the header
   stays white as you scroll, the menu is the deep navy panel over it. */
.drawer{background:linear-gradient(165deg,#1B3D5C 0%,#0B1F31 62%)}
.drawer__top{border-bottom-color:rgba(255,255,255,.16)}
.drawer__nav li{border-bottom-color:rgba(255,255,255,.14)}
.drawer__foot{background:rgba(6,4,34,.55);border-top-color:rgba(255,255,255,.16)}
.drawer__close{border-color:rgba(255,255,255,.35)}
.drawer__close:hover{background:rgba(255,255,255,.14)}
.scrim{background:rgba(16,42,67,.62)}

/* Header stays paper-white; only its shadow and blur change on scroll. */
.site-header.is-stuck{background:rgba(255,255,255,.96)}

/* ==========================================================================
   Hero — proof row and the panel that overlaps the photograph
   ========================================================================== */
.hero__proof{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1rem}
@media (min-width:560px){.hero__proof{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.hero__proof li{margin:0;padding-top:.8rem;border-top:3px solid var(--gold)}
.hero__proof b{display:block;font-family:var(--font-display);font-size:1.14rem;
  font-weight:600;color:var(--blue);line-height:1.2}
.hero__proof span{display:block;font-size:.93rem;color:var(--ink-soft);margin-top:.25rem}

.hero__media{position:relative}
.hero__media .photo{box-shadow:0 26px 50px -30px rgba(16,42,67,.6)}
.glance--float{position:relative;z-index:2;margin-top:-2rem}
@media (min-width:900px){
  .glance--float{margin:-3.75rem 1.5rem 0 -2.5rem}
}
.stack > .glance{margin-bottom:1.8rem}


/* ==========================================================================
   Section rhythm — no two bands in a row are the same surface
   ========================================================================== */
.band--cream{background:var(--sand)}
.band--tint{background:linear-gradient(180deg,var(--mist) 0%,var(--paper) 100%)}
.band--rule{border-top:1px solid var(--line)}

/* Eyebrow above a heading, gold rule under it — the pattern used across the
   client's other sites, so the family of sites reads as one hand. */
.eyebrow{
  display:block;font-family:var(--font-ui);font-size:.86rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);
  margin:0 0 .6rem;
}
.band--dark .eyebrow,.cta .eyebrow{color:var(--gold)}
.ruled{position:relative;padding-top:.9rem}
.ruled::before{content:"";position:absolute;top:0;left:0;width:64px;height:4px;
  background:var(--gold);border-radius:4px}
.band--dark .ruled::before{background:var(--gold)}

/* ==========================================================================
   Hero — text left, photograph held to one side and bled off the right edge
   ========================================================================== */
.hero{
  background:
    radial-gradient(900px 420px at 8% -10%, #EAF0F8 0%, rgba(234,240,248,0) 70%),
    linear-gradient(180deg,#F5F7FA 0%, var(--paper) 88%);
  padding-block:clamp(2.5rem,5vw,4rem) clamp(3rem,6vw,5rem);
  overflow:hidden;position:relative;
}
.hero__eyebrow{
  font-family:var(--font-ui);font-size:.86rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 1rem;
}
.hero h1 .accent{color:var(--gold-ink);display:block}
.hero__media{position:relative}
.hero__media img{border-radius:var(--r-lg);display:block;width:100%;height:100%;object-fit:cover}
.hero__badge{
  position:absolute;left:-1rem;bottom:1.5rem;z-index:2;
  background:var(--navy);color:#fff;border-radius:var(--r-md);
  padding:1rem 1.25rem;max-width:15rem;box-shadow:0 20px 40px -24px rgba(16,42,67,.8);
}
.hero__badge b{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1.1;color:var(--gold)}
.hero__badge span{display:block;font-size:.92rem;color:#D7DFE7;margin-top:.2rem}

.hero__trust{
  list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.1rem;
}
@media (min-width:620px){.hero__trust{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.hero__trust li{margin:0;display:flex;gap:.7rem;align-items:flex-start}
.hero__trust svg{flex:none;width:26px;height:26px;color:var(--navy);margin-top:.1rem}
.hero__trust b{display:block;font-size:.99rem;color:var(--ink)}
.hero__trust span{display:block;font-size:.9rem;color:var(--ink-soft);line-height:1.4}

@media (min-width:1000px){
  .hero__grid{grid-template-columns:1fr 45%;align-items:center;gap:clamp(2.5rem,4vw,4rem)}
  .hero__media{margin-right:calc(50% - 50vw);height:min(70vh,600px)}
  .hero__media img{border-radius:var(--r-lg) 0 0 var(--r-lg);min-height:100%}
}

/* Slim band of proof directly under the hero */
.strip{background:var(--navy);color:#fff}
.strip ul{list-style:none;margin:0;padding:1.5rem 0;display:grid;gap:1.1rem}
@media (min-width:760px){.strip ul{grid-template-columns:repeat(4,1fr);gap:1.8rem}}
.strip li{margin:0;display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem;color:#D7DFE7}
.strip svg{flex:none;width:22px;height:22px;color:var(--gold);margin-top:.15rem}
.strip b{color:#fff;display:block;font-weight:600}

/* ==========================================================================
   Service cards with an icon — "How can we help?"
   ========================================================================== */
.svc{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.15rem}
@media (min-width:640px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc > li{margin:0}
.svc a{
  display:flex;flex-direction:column;height:100%;gap:.5rem;text-decoration:none;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.6rem 1.5rem 1.4rem;color:inherit;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.svc a:hover{transform:translateY(-4px);border-color:var(--navy);
  box-shadow:0 22px 40px -28px rgba(16,42,67,.65)}
.svc__icon{
  width:52px;height:52px;border-radius:14px;background:var(--sand);
  display:flex;align-items:center;justify-content:center;margin-bottom:.55rem;
}
.svc__icon svg{width:26px;height:26px;color:var(--gold-ink)}
.svc a:hover .svc__icon{background:var(--navy)}
.svc a:hover .svc__icon svg{color:var(--gold)}
.svc h3{margin:0;font-size:1.16rem;color:var(--navy)}
.svc p{margin:0;color:var(--ink-soft);font-size:.98rem;flex:1}
.svc__more{font-weight:600;color:var(--navy);font-size:.95rem;margin-top:.4rem}
.svc a:hover .svc__more{color:var(--gold-ink);text-decoration:underline}

/* ==========================================================================
   Reasons list — "Why families choose Epic"
   ========================================================================== */
.reasons{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.reasons li{margin:0;padding-left:3.4rem;position:relative}
.reasons li::before{
  content:"";position:absolute;left:0;top:.1rem;width:2.4rem;height:2.4rem;
  border-radius:50%;background:var(--sand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102A43' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:1.2rem;background-repeat:no-repeat;background-position:center;
}
.reasons h3{margin:0 0 .3em;font-size:1.14rem;color:var(--navy)}
.reasons p{margin:0;color:var(--ink-soft)}

/* A collage of photographs at deliberately different shapes */
.collage{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);align-content:start}
.collage figure{margin:0}
.collage .photo{height:100%}
.collage .a{aspect-ratio:4/5}
.collage .b{aspect-ratio:1}
.collage .c{aspect-ratio:1}
.collage .d{aspect-ratio:4/5}
@media (min-width:1000px){
  .collage{grid-template-columns:repeat(2,1fr);gap:1.15rem}
  .collage .a{margin-top:2.2rem}
  .collage .d{margin-top:-1rem}
}

/* ==========================================================================
   Numbered steps — "Getting started"
   ========================================================================== */
.howto{list-style:none;counter-reset:howto;margin:2.2rem 0 0;padding:0;display:grid;gap:1.2rem}
@media (min-width:820px){.howto{grid-template-columns:repeat(4,1fr)}}
.howto li{
  margin:0;counter-increment:howto;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.5rem 1.4rem;position:relative;
}
.howto li::before{
  content:counter(howto,decimal-leading-zero);
  display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:50%;background:var(--gold);color:var(--navy);
  font-family:var(--font-ui);font-weight:800;font-size:1rem;margin-bottom:.9rem;
}
.howto h3{margin:0 0 .35em;font-size:1.1rem;color:var(--navy)}
.howto p{margin:0;color:var(--ink-soft);font-size:.97rem}

/* ==========================================================================
   FAQ beside a photograph
   ========================================================================== */
.faq-split{display:grid;gap:2rem}
@media (min-width:1000px){.faq-split{grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start}}
.faq-aside .photo{aspect-ratio:4/5}
.faq-aside .box{
  background:var(--navy);color:#fff;border-radius:var(--r-md);padding:1.5rem;margin-top:1.1rem;
}
.faq-aside .box h3{color:#fff;margin:0 0 .5em;font-size:1.14rem}
.faq-aside .box p{color:#D7DFE7;margin:0 0 1rem;font-size:.97rem}

/* Service-area chips */
.areas{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.areas li{
  margin:0;background:var(--paper);border:1px solid var(--line);border-radius:100px;
  padding:.5rem 1rem;font-size:.95rem;font-weight:500;color:var(--navy);
}


/* ==========================================================================
   Final brand pass
   Palette straight from the client's sheet. Gold carries the accents so the
   page is warm rather than blue; navy is kept for dark sections and outlines.
   ========================================================================== */
h1,h2,h3,h4{color:var(--heading)}
.band--dark h1,.band--dark h2,.band--dark h3,.cta h2{color:#fff}
a{color:var(--gold-ink)}
a:hover{color:#6E4700}
.lede{color:var(--ink-soft)}

/* Focus: the logo blue, used here and almost nowhere else. 8.9:1 on white. */
:focus-visible{outline:3px solid var(--brand-blue);outline-offset:2px}
.band--dark :focus-visible,.cta :focus-visible,.site-footer :focus-visible,
.drawer :focus-visible{outline-color:var(--gold)}

/* Buttons — gold leads, navy supports */
.btn--primary{background:var(--gold);color:#102A43;border-color:var(--gold)}
.btn--primary:hover{background:#FFB733;border-color:#FFB733;color:#0B1F31}
.btn--ghost{color:var(--heading);border-color:var(--heading);background:transparent}
.btn--ghost:hover{background:var(--heading);color:#fff}
.btn--amber{background:var(--gold);color:#102A43;border-color:var(--gold)}
.btn--amber:hover{background:#FFB733;border-color:#FFB733}

/* The logo, sized to lead and dropping into the hero below it */
.site-header,.bar{overflow:visible}
.brand__logo{height:86px;margin-bottom:-22px;position:relative;z-index:2}
.is-stuck .brand__logo{height:54px;margin-bottom:0}
.brand__sub{display:none}
@media (min-width:1180px){.brand__sub{display:block}}
@media (max-width:640px){
  .brand__logo{height:60px;margin-bottom:-12px}
}

/* Hero — warm, not blue */
.hero{
  background:
    radial-gradient(820px 420px at 92% 4%, #FFF3DD 0%, rgba(255,243,221,0) 68%),
    linear-gradient(180deg,var(--sand) 0%, var(--paper) 78%);
  border-bottom:1px solid var(--line);
}
.hero h1 .accent{color:var(--gold-ink)}
.hero__badge{
  left:auto;right:1.25rem;bottom:1.25rem;background:rgba(255,255,255,.97);
  color:var(--ink);border-left:5px solid var(--gold);
  box-shadow:0 22px 44px -26px rgba(16,42,67,.7);
}
.hero__badge b{color:var(--heading);font-size:1.24rem}
.hero__badge span{color:var(--ink-soft)}
.hero__trust svg{color:var(--gold-ink)}

/* The proof strip lightens up; the dark bands are the footer and the CTA */
.strip{background:var(--mist);color:var(--ink);border-bottom:1px solid var(--line)}
.strip li{color:var(--ink-soft)}
.strip b{color:var(--heading)}
.strip svg{color:var(--gold-ink)}

/* Cards */
.svc a:hover{border-color:var(--gold)}
.svc a:hover .svc__icon{background:var(--gold)}
.svc a:hover .svc__icon svg{color:#102A43}
.svc h3,.howto h3,.reasons h3,.tile h3{color:var(--heading)}
.svc__more{color:var(--gold-ink)}
.card:hover,.router a:hover,.tile:hover{border-color:var(--gold)}

/* The panel beside the FAQ warms up too */
.faq-aside .box{background:var(--sand);border:1px solid var(--line);border-left:5px solid var(--gold)}
.faq-aside .box h3{color:var(--heading)}
.faq-aside .box p{color:var(--ink-soft)}

/* Menu drawer: deep navy, clearly a different surface from the white header */
.drawer{background:linear-gradient(168deg,#1B3D5C 0%,#0B1F31 66%)}
.drawer__nav a{color:#fff}
.drawer__nav a:hover{color:var(--gold)}
.drawer__sub a{color:#D7DFE7}
.scrim{background:rgba(11,31,49,.66)}

/* Footer */
.site-footer{background:var(--navy)}
.foot-list a:hover,.foot-legal a:hover,.foot-doxa a:hover{color:var(--gold)}

/* Photographs from a phone are portrait; let the frames follow suit */
.photo--portrait{aspect-ratio:3/4}
.photo--tall{aspect-ratio:3/4}
.collage .a{aspect-ratio:3/4}
.collage .b{aspect-ratio:1/1}
.collage .c{aspect-ratio:5/6}
.collage .d{aspect-ratio:4/3}
@media (min-width:1000px){
  .hero__media{height:min(78vh,660px)}
}
.photo img{object-position:center}


/* ==========================================================================
   Depth pass — gradients, curved band transitions and softer surfaces.
   Every background here stays light enough that charcoal text holds 12:1 or
   better; the dark bands run the other way with white text at 14:1.
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------
   Three layers, tuned to the photograph beside them: warm cream where the
   decking is, a gold wash behind the roofline, and a cool wash bottom-left
   picking up the sky. */
.hero{
  background:
    radial-gradient(760px 520px at 88% -6%,  rgba(244,160,0,.20) 0%, rgba(244,160,0,0) 62%),
    radial-gradient(680px 480px at -8% 92%,  rgba(16,42,67,.10)  0%, rgba(16,42,67,0)  60%),
    radial-gradient(1100px 700px at 52% 120%, rgba(255,249,240,.9) 0%, rgba(255,249,240,0) 70%),
    linear-gradient(118deg, #FFF6E6 0%, #FFFDF9 44%, #F7FAFD 100%);
  border-bottom:0;
  position:relative;
}
/* the wash drifts, very slowly, and not at all if motion is unwelcome */
@media (prefers-reduced-motion:no-preference){
  .hero{background-size:180% 180%,180% 180%,180% 180%,100% 100%;
        animation:heroDrift 34s ease-in-out infinite alternate}
}
@keyframes heroDrift{
  from{background-position:0% 0%, 100% 100%, 50% 100%, 0 0}
  to  {background-position:14% 8%, 86% 92%, 46% 92%, 0 0}
}
/* and it curves into whatever comes next */
.hero::after{
  content:"";position:absolute;left:-6%;right:-6%;bottom:-5.5rem;height:11rem;
  background:var(--paper);border-radius:50% 50% 0 0 / 100% 100% 0 0;pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}

.hero h1{font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.06}
.hero .lede{font-size:clamp(1.06rem,1.6vw,1.2rem)}

/* The photograph melts into the wash instead of sitting on it as a rectangle. */
.hero__media{position:relative;isolation:isolate}
.hero__media img{box-shadow:0 40px 70px -40px rgba(16,42,67,.55)}
@media (min-width:1000px){
  .hero__media::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    border-radius:var(--r-lg) 0 0 var(--r-lg);
    background:linear-gradient(96deg,#FFF6E6 0%, rgba(255,246,230,.55) 9%, rgba(255,246,230,0) 26%);
  }
  .hero__media img{
    -webkit-mask-image:linear-gradient(96deg, transparent 0%, #000 16%);
            mask-image:linear-gradient(96deg, transparent 0%, #000 16%);
  }
}

/* ---- Inner page heroes ------------------------------------------------- */
.hero--page{
  background:
    radial-gradient(620px 360px at 92% 0%, rgba(244,160,0,.20) 0%, rgba(244,160,0,0) 64%),
    radial-gradient(520px 340px at 2% 96%, rgba(16,42,67,.09) 0%, rgba(16,42,67,0) 62%),
    linear-gradient(112deg,#FFF6E6 0%,#FFFCF6 52%,#F6F9FC 100%);
  position:relative;
}
.hero--page::after{
  content:"";position:absolute;left:-6%;right:-6%;bottom:-4rem;height:8rem;
  background:var(--paper);border-radius:50% 50% 0 0 / 100% 100% 0 0;pointer-events:none;
}
.hero--page .wrap{position:relative;z-index:1}

/* ---- Bands: gradients rather than flat fills, and curved joins ---------- */
.band{position:relative}
.band--paper{background:linear-gradient(180deg,#FFFFFF 0%,#FCFDFE 62%,#F9FBFD 100%)}
.band--cream{
  background:
    radial-gradient(680px 420px at 4% 8%, rgba(244,160,0,.16) 0%, rgba(244,160,0,0) 60%),
    linear-gradient(158deg,#FFF9F0 0%,#FFF2DF 52%,#FFFBF4 100%);
}
.band--tint{
  background:
    radial-gradient(720px 460px at 96% 6%, rgba(16,42,67,.10) 0%, rgba(16,42,67,0) 62%),
    linear-gradient(180deg,#F3F7FB 0%,#F7FAFD 55%,#FFFFFF 100%);
}
/* a white crest curving into the tinted bands below it */
.band--cream,.band--tint{overflow:hidden}
.band--cream::before,.band--tint::before{
  content:"";position:absolute;left:-8%;right:-8%;top:-7rem;height:10rem;
  background:var(--paper);border-radius:0 0 50% 50% / 0 0 100% 100%;pointer-events:none;
}
.band--cream > .wrap,.band--tint > .wrap{position:relative;z-index:1}

/* ---- Dark band and footer --------------------------------------------- */
.band--dark{
  background:
    radial-gradient(700px 420px at 82% 8%, rgba(244,160,0,.18) 0%, rgba(244,160,0,0) 60%),
    linear-gradient(126deg,#1B3D5C 0%,#102A43 48%,#0B1F31 100%);
  border-top:3px solid var(--gold);
}
.site-footer{
  background:
    radial-gradient(620px 380px at 92% 0%, rgba(244,160,0,.12) 0%, rgba(244,160,0,0) 62%),
    linear-gradient(180deg,#123049 0%,#0B1F31 100%);
}
.strip{
  background:linear-gradient(180deg,#F7FAFD 0%,#EFF4F9 100%);
  border-bottom:1px solid var(--line);border-top:1px solid rgba(255,255,255,.6);
}

/* ---- Surfaces ---------------------------------------------------------- */
.card,.tile,.svc a,.howto li,.glance,.legal__toc{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 100%);
}
.svc a{position:relative;overflow:hidden}
.svc a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--gold),#FFCE6B);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease);
}
.svc a:hover::after{transform:scaleX(1)}
.svc__icon{background:linear-gradient(150deg,#FFF3DC 0%,#FFE7BC 100%)}
.svc a:hover .svc__icon{background:linear-gradient(150deg,#F4A000 0%,#FFC351 100%)}
.howto li::before{background:linear-gradient(150deg,#F4A000 0%,#FFC351 100%)}
.faq-aside .box{
  background:linear-gradient(158deg,#FFF9F0 0%,#FFF1DC 100%);
}
.glance{box-shadow:0 24px 46px -34px rgba(16,42,67,.55)}

/* ---- Buttons ----------------------------------------------------------- */
.btn--primary,.btn--amber{
  background:linear-gradient(135deg,#F4A000 0%,#FFBE45 100%);
  border-color:transparent;color:#102A43;
  box-shadow:0 12px 26px -16px rgba(244,160,0,.9);
}
.btn--primary:hover,.btn--amber:hover{
  background:linear-gradient(135deg,#E09200 0%,#FFB02A 100%);color:#0B1F31;
}
.btn--onDark{backdrop-filter:blur(2px)}

/* ---- Headings get a fading gold rule ----------------------------------- */
.ruled::before{background:linear-gradient(90deg,var(--gold) 0%,rgba(244,160,0,.25) 100%);width:78px}

/* ---- Photographs ------------------------------------------------------- */
.photo{box-shadow:0 26px 46px -34px rgba(16,42,67,.6)}
.collage .photo{box-shadow:0 22px 40px -30px rgba(16,42,67,.55)}

/* ---- Header: shorter when open, and it gets out of the way going down ---- */
.site-header{
  transition:transform .5s cubic-bezier(.22,.61,.36,1),
             box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
  will-change:transform;
}
.site-header.is-hidden{transform:translateY(-102%)}
.bar{min-height:66px}
.brand__logo{height:74px;margin-bottom:-16px}
.is-stuck .brand__logo{height:46px;margin-bottom:0}
@media (max-width:640px){
  .brand__logo{height:54px;margin-bottom:-10px}
  .is-stuck .brand__logo{height:40px}
}

/* Reduced motion: no drift, and the curves stay put. */
@media (prefers-reduced-motion:reduce){
  .hero{animation:none}
}

/* Windows high-contrast mode strips backgrounds; keep the shapes out of the way. */
@media (forced-colors:active){
  .hero::after,.hero--page::after,.band--cream::before,.band--tint::before{display:none}
}


/* ==========================================================================
   Brightness pass. Cleaner, warmer, higher-contrast surfaces; the hero photo
   sits on the right and dissolves leftwards into the copy.
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;animation:none;
  background:linear-gradient(112deg,#FFF3E0 0%,#FFFCF6 46%,#FFF7EA 100%);
  padding-block:clamp(1.5rem,4vw,3.25rem) clamp(3rem,7vw,5.5rem);
  border-bottom:0;
}
.hero::after{display:none}

.hero__photo{position:absolute;inset:0 0 0 auto;width:62%;z-index:0}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:52% 42%;display:block}
/* the fade that carries the photograph into the text side */
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,#FFF3E0 0%, rgba(255,243,224,1) 22%, rgba(255,247,234,.92) 42%,
                    rgba(255,247,234,.45) 64%, rgba(255,247,234,.08) 86%, rgba(255,247,234,0) 100%),
    linear-gradient(180deg, rgba(255,243,224,.55) 0%, rgba(255,243,224,0) 24%);
}
.hero .wrap{position:relative;z-index:1}
.hero__copy{max-width:36rem}
.hero__eyebrow{color:var(--gold-ink);font-size:.9rem;letter-spacing:.16em}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.15rem);line-height:1.02;letter-spacing:-.02em}
.hero h1 .accent{color:var(--gold-ink)}
.hero .lede{font-size:clamp(1.08rem,1.5vw,1.24rem);color:var(--ink);max-width:31rem}
.hero .btn-row{margin-top:1.9rem}
.hero__trust{margin-top:2.4rem;border-top:1px solid rgba(138,90,0,.24);padding-top:1.5rem}
.hero__trust svg{color:var(--gold-ink);width:28px;height:28px}

@media (max-width:999px){
  .hero{padding-top:0}
  .hero__photo{position:relative;width:100%;height:clamp(220px,42vw,320px);margin-bottom:1.75rem}
  .hero__photo::after{
    background:linear-gradient(180deg, rgba(255,243,224,.28) 0%, rgba(255,243,224,0) 34%,
                               rgba(255,247,234,.86) 86%, #FFF7EA 100%);
  }
  .hero__copy{max-width:none}
}
@media (min-width:1000px){
  .hero{min-height:min(78vh,640px);display:flex;align-items:center}
  .hero > .wrap{width:100%}
}
@media (min-width:1000px) and (max-width:1279px){
  .hero__photo{width:54%}
  .hero__copy{max-width:30rem}
  .hero h1{font-size:clamp(2.2rem,4.2vw,3.1rem)}
}

/* ---- Inner-page heroes: same family, quieter ---------------------------- */
.hero--page{
  min-height:0;display:block;overflow:hidden;
  background:linear-gradient(112deg,#FFF3E0 0%,#FFFDF9 52%,#F0F5FF 100%);
  padding-block:clamp(2.5rem,5vw,4rem) clamp(2.5rem,5vw,4rem);
}
.hero--page::after{
  content:"";position:absolute;right:-6rem;top:-8rem;width:26rem;height:26rem;border-radius:50%;
  background:radial-gradient(circle,rgba(244,160,0,.28) 0%,rgba(244,160,0,0) 68%);
  pointer-events:none;display:block;
}
.hero--page h1{font-size:clamp(2.05rem,4vw,3.15rem);line-height:1.08}

/* ---- Sections: brighter, cleanly separated ----------------------------- */
.band--cream::before,.band--tint::before{display:none}
.band--paper{background:#FFFFFF}
.band--cream{background:linear-gradient(135deg,#FFF8EC 0%,#FFEFD6 100%)}
.band--tint{background:linear-gradient(135deg,#F0F5FF 0%,#E2ECFF 100%)}
.band--dark{
  background:linear-gradient(122deg,#0033CC 0%,#123A78 46%,#102A43 100%);
  border-top:0;
}
.band--dark .lede{color:#DCE6F5}
.site-footer{background:linear-gradient(180deg,#123049 0%,#0B1F31 100%)}

/* The proof strip is now the brightest thing on the page. */
.strip{
  background:linear-gradient(90deg,#F4A000 0%,#FFC145 55%,#FFD37A 100%);
  border:0;color:#102A43;
}
.strip li{color:#24313F}
.strip b{color:#102A43;font-weight:700}
.strip svg{color:#102A43}

/* ---- Surfaces ---------------------------------------------------------- */
.card,.tile,.svc a,.howto li,.glance,.legal__toc,.faq-aside .box{
  background:#FFFFFF;border-color:#E6EBF2;
  box-shadow:0 18px 38px -30px rgba(16,42,67,.55);
}
.svc a:hover,.card:hover,.tile:hover{
  box-shadow:0 26px 46px -26px rgba(16,42,67,.45);border-color:var(--gold);
}
.svc__icon{background:linear-gradient(150deg,#FFE9C2 0%,#FFD489 100%)}
.svc__icon svg{color:#7A4F00}
.howto li::before{color:#102A43}
.faq-aside .box{background:linear-gradient(150deg,#FFF8EC 0%,#FFEFD6 100%);border-left:5px solid var(--gold)}
.areas li{background:#fff;border-color:#E6EBF2}

/* ---- Header: three states, moving under its own steam ------------------ */
.site-header{
  transition:transform .55s cubic-bezier(.16,1,.3,1),
             box-shadow .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease);
  will-change:transform;
}
.site-header.is-away{transform:translateY(-100%)}
.site-header.is-stuck{
  background:rgba(255,255,255,.97);
  box-shadow:0 10px 30px -18px rgba(16,42,67,.6);
  border-bottom-color:var(--line);
}
.bar{min-height:64px}
.brand__logo{height:80px;margin-bottom:-26px}
.is-stuck .brand__logo{height:48px;margin-bottom:-8px}
@media (max-width:640px){
  .brand__logo{height:56px;margin-bottom:-14px}
  .is-stuck .brand__logo{height:42px;margin-bottom:-6px}
}

/* Gold as text on the royal-blue end of the dark band needs lightening:
   #F4A000 is only 4.2:1 there, #FFC145 is 5.5:1. */
.band--dark .eyebrow,.cta .eyebrow{color:#FFC145}
.band--dark a:not(.btn){color:#FFC145}
.band--dark a:not(.btn):hover{color:#FFD98A}


/* ==========================================================================
   v4 — typography, proportions and the pieces that needed rebuilding.
   ========================================================================== */

/* ---- Type ---------------------------------------------------------------
   Body at 17-18px with a 1.7 line, which is what reading research and the
   senior-care audience both want. Headings tighten as they grow. */
html{font-size:100%}
body{
  font-size:clamp(1.0625rem,.28vw + 1rem,1.1875rem);
  line-height:1.7;letter-spacing:.003em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--heading)}
h1{line-height:1.06;letter-spacing:-.021em}
h2{font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1.14;letter-spacing:-.016em;margin-bottom:.5em}
h3{font-size:clamp(1.14rem,1.3vw,1.3rem);line-height:1.28;letter-spacing:-.008em}
p,li{max-width:74ch}
.lede{font-size:clamp(1.1rem,.5vw + 1rem,1.3rem);line-height:1.6;color:var(--ink-soft);max-width:62ch}
.eyebrow{font-size:.8rem;letter-spacing:.17em}
.btn{font-family:var(--font-ui);font-weight:600;letter-spacing:.005em;font-size:1rem}

/* ---- Header: a little taller, logo dipping into the hero ---------------- */
.bar{min-height:78px}
.brand__logo{height:92px;margin-bottom:-30px}
.is-stuck .brand__logo{height:56px;margin-bottom:-10px}
@media (max-width:640px){
  .bar{min-height:66px}
  .brand__logo{height:62px;margin-bottom:-16px}
  .is-stuck .brand__logo{height:46px;margin-bottom:-8px}
}

/* ---- Hero: photograph is 40% of the content width, copy takes the rest -- */
.hero{padding-block:clamp(1.5rem,3.5vw,3rem) clamp(3rem,6vw,5rem)}
.hero h1{font-size:clamp(2.1rem,3.5vw,3.15rem)}
.hero .lede{font-size:clamp(1.08rem,.4vw + 1rem,1.22rem);max-width:34rem}
.hero__copy{max-width:38rem}
.hero__photo{width:44%}
@media (min-width:1000px) and (max-width:1279px){
  .hero__photo{width:42%}
  .hero__copy{max-width:31rem}
  .hero h1{font-size:clamp(2.1rem,3.6vw,2.7rem)}
}
@media (min-width:1000px){
  .hero{min-height:min(72vh,600px)}
  .hero__trust{max-width:36rem}
}

/* ---- Inner-page heroes: contained, and a different mix on each ---------- */
.hero--page{padding-block:clamp(2.25rem,4vw,3.5rem) clamp(2.25rem,4vw,3.5rem)}
.hero--page h1{font-size:clamp(1.9rem,3vw,2.75rem);max-width:20ch}
.hero--page .lede{max-width:48ch}
.hero--page .hero__grid{display:block}
.hero--warm{background:linear-gradient(112deg,#FFF1D9 0%,#FFFCF6 54%,#FFF6E6 100%)}
.hero--sky{background:linear-gradient(112deg,#E6EEFF 0%,#F8FBFF 52%,#FFF6E6 100%)}
.hero--mix{background:linear-gradient(112deg,#FFF1D9 0%,#FDF9FF 48%,#E9F0FF 100%)}
.hero--sky::after{background:radial-gradient(circle,rgba(0,51,204,.16) 0%,rgba(0,51,204,0) 68%)}
.hero--mix::after{background:radial-gradient(circle,rgba(244,160,0,.24) 0%,rgba(244,160,0,0) 68%)}

/* ---- Inside the home: video tour beside a set of three shapes ----------- */
.tour{display:grid;gap:1.4rem;margin-top:2rem}
@media (min-width:960px){.tour{grid-template-columns:1.15fr .85fr;align-items:start}}
.videobox{
  position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--navy);box-shadow:0 30px 60px -34px rgba(16,42,67,.7);
}
.videobox img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.videobox::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,13,20,0) 38%,rgba(7,13,20,.72) 72%,rgba(7,13,20,.9) 100%);
}
.videobox__play{
  position:absolute;inset:auto auto 50% 50%;transform:translate(-50%,50%);z-index:2;
  display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;
  background:linear-gradient(135deg,#F4A000,#FFC145);color:#102A43;
  border:0;border-radius:100px;padding:.85rem 1.5rem .85rem .85rem;
  font:600 1rem/1 var(--font-ui);box-shadow:0 16px 34px -16px rgba(16,42,67,.8);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.videobox__play:hover{transform:translate(-50%,50%) scale(1.04)}
.videobox__icon{
  width:2.4rem;height:2.4rem;border-radius:50%;background:#102A43;color:#FFC145;
  display:inline-flex;align-items:center;justify-content:center;
}
.videobox__icon svg{width:1.3rem;height:1.3rem}
.videobox__soon{
  position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:1.1rem 1.3rem;
  color:#fff;font-size:.97rem;line-height:1.5;max-width:none;
}
.videobox.has-video .videobox__soon{display:none}
.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}

.tour__grid{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr)}
.tour__a{grid-column:1 / -1}
@media (min-width:520px) and (max-width:959px){
  .tour__grid{grid-template-columns:repeat(3,1fr)}
  .tour__a{grid-column:auto}
}

/* ---- Service area: cards, and a visiting panel with some colour --------- */
.areas{display:grid;gap:.85rem;grid-template-columns:repeat(2,1fr);margin-top:1.9rem}
@media (min-width:560px){.areas{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.areas{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1240px){.areas{grid-template-columns:repeat(3,1fr)}}
.areas li{
  display:flex;gap:.6rem;align-items:flex-start;margin:0;padding:.85rem .95rem;
  background:#fff;border:1px solid #EDE2CE;border-radius:var(--r-md);
  box-shadow:0 10px 24px -22px rgba(16,42,67,.6);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.areas li:hover{transform:translateY(-2px);border-color:var(--gold);
  box-shadow:0 18px 30px -22px rgba(16,42,67,.5)}
.area__pin{
  flex:none;width:2rem;height:2rem;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;
  background:linear-gradient(150deg,#FFE9C2,#FFD489);color:#7A4F00;
}
.area__pin svg{width:1.05rem;height:1.05rem}
.areas b{display:block;font-size:.99rem;color:var(--heading);line-height:1.3}
.areas span{display:block;font-size:.86rem;color:var(--ink-soft);line-height:1.35}

.visit{
  position:relative;overflow:hidden;border-radius:var(--r-lg);padding:1.9rem 1.75rem;
  background:linear-gradient(150deg,#123A78 0%,#102A43 58%,#0B1F31 100%);
  color:#fff;box-shadow:0 30px 60px -36px rgba(16,42,67,.85);
}
.visit::before{
  content:"";position:absolute;right:-5rem;top:-5rem;width:16rem;height:16rem;border-radius:50%;
  background:radial-gradient(circle,rgba(244,160,0,.34) 0%,rgba(244,160,0,0) 70%);
}
.visit > *{position:relative;z-index:1}
.visit h3{color:#fff;margin:0 0 1rem;font-size:1.4rem}
.visit dl{margin:0;display:grid;gap:.85rem}
.visit dl > div{display:grid;grid-template-columns:8.5rem 1fr;gap:.6rem;
  padding-bottom:.85rem;border-bottom:1px solid rgba(255,255,255,.16)}
.visit dl > div:last-of-type{border-bottom:0;padding-bottom:0}
.visit dt{font:600 .82rem/1.4 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:#FFC145}
.visit dd{margin:0;color:#E6EDF5;font-size:.99rem;line-height:1.5}
.visit dd a{color:#fff;font-weight:600}
.visit .btn-row{margin-top:1.5rem}
.visit .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.visit .btn--ghost:hover{background:#fff;color:var(--navy)}

/* ---- "Still not sure?" — one wide, centred card ------------------------- */
.helpbox{
  margin:2.6rem auto 0;max-width:60rem;text-align:center;
  background:linear-gradient(150deg,#FFF8EC 0%,#FFEFD6 100%);
  border:1px solid #F0DFBE;border-left:0;border-radius:var(--r-lg);
  padding:2.4rem clamp(1.4rem,4vw,3rem);
  box-shadow:0 24px 50px -38px rgba(16,42,67,.6);
}
.helpbox h3{margin:0 0 .5em;font-size:clamp(1.4rem,2vw,1.8rem)}
.helpbox p{margin:0 auto;max-width:56ch;color:var(--ink-soft)}
.helpbox .btn-row{justify-content:center;margin-top:1.6rem}

/* ---- Footer: nearly black ---------------------------------------------- */
.site-footer{background:linear-gradient(180deg,#0D1B27 0%,#070D14 62%,#04080C 100%)}
.site-footer::before{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,#F4A000,#FFC145 45%,#0033CC);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}

/* ---- Legal pages: sidebar contents, wider column, calmer headings ------- */
.legal-layout{display:grid;gap:2.5rem}
@media (min-width:940px){
  .legal-layout{grid-template-columns:16.5rem minmax(0,1fr);gap:3.5rem;align-items:start}
  .legal__aside{position:sticky;top:calc(var(--header-h,80px) + 1.5rem)}
}
.legal{max-width:64ch}
.legal h2{
  font-size:clamp(1.35rem,1.8vw,1.65rem);margin-top:2.6rem;padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.legal h2:first-of-type{margin-top:1.6rem}
.legal h3{font-size:1.08rem;margin-top:1.7rem;color:var(--gold-ink)}
.legal p,.legal li{font-size:1.03rem}
.legal__aside{background:linear-gradient(160deg,#FFF8EC 0%,#FFF1DE 100%);
  border:1px solid #F0DFBE;box-shadow:0 18px 40px -34px rgba(16,42,67,.6)}
.legal__aside h2{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);border:0;margin:0 0 .8em;padding:0;font-family:var(--font-ui)}
.legal__aside ol{columns:1;counter-reset:toc;list-style:none;padding:0;margin:0}
.legal__aside li{margin-bottom:.55rem;counter-increment:toc;font-size:.95rem;line-height:1.4}
.legal__aside li::before{content:counter(toc,decimal-leading-zero);
  color:var(--gold-ink);font:700 .75rem/1 var(--font-ui);margin-right:.5rem}
.legal__aside a{color:var(--ink);text-decoration:none}
.legal__aside a:hover{color:var(--gold-ink);text-decoration:underline}
.legal__meta{
  background:linear-gradient(135deg,#EFF4FF 0%,#E4ECFF 100%);border-left:5px solid var(--brand-blue);
  font-size:1rem;
}
.hero--page + .band .legal h1{margin-top:0}


/* ==========================================================================
   v5 — hero indent, the floating proof card, the mosaic, and real variety
        in photograph shapes.
   ========================================================================== */

/* ---- Hero copy sits in from the edge, and is vertically centred --------- */
:root{--gut:clamp(1.5rem,4.5vw,3.5rem)}
.hero__copy{padding-left:0}
@media (min-width:820px){
  .hero__copy{margin-left:clamp(1rem,3.5vw,4.5rem)}
}
@media (min-width:1000px){
  .hero{padding-bottom:clamp(4.5rem,8vw,7rem)}
}
.hero--page .wrap > *,
.hero--page .hero__grid{max-width:none}
@media (min-width:820px){
  .hero--page .wrap > *{margin-left:clamp(1rem,3.5vw,4.5rem)}
}

/* ---- The proof row: a card, lifted into the hero above it -------------- */
.proofcard{position:relative;z-index:2;margin-top:clamp(-3.5rem,-4vw,-2rem)}
.proofcard .wrap{max-width:min(64rem,calc(100% - 2 * var(--gut)))}
.proofcard ul{
  list-style:none;margin:0;padding:clamp(1.1rem,2vw,1.6rem) clamp(1.2rem,2.4vw,2rem);
  display:grid;gap:1.1rem 1.6rem;grid-template-columns:repeat(2,1fr);
  background:linear-gradient(135deg,#FFFFFF 0%,#FFF9EF 100%);
  border:1px solid #F0E2C8;border-radius:var(--r-lg);
  box-shadow:0 30px 60px -34px rgba(16,42,67,.55);
}
@media (min-width:860px){.proofcard ul{grid-template-columns:repeat(4,1fr)}}
.proofcard li{margin:0;display:grid;grid-template-columns:2.5rem 1fr;
  grid-template-areas:"i b" "i s";column-gap:.75rem;align-items:center;max-width:none}
.proofcard__ico{
  grid-area:i;width:2.5rem;height:2.5rem;border-radius:50%;
  background:linear-gradient(150deg,#FFE9C2,#FFD489);color:#7A4F00;
  display:inline-flex;align-items:center;justify-content:center;
}
.proofcard__ico svg{width:1.3rem;height:1.3rem}
.proofcard b{grid-area:b;color:var(--heading);font-size:1rem;line-height:1.25}
.proofcard span:not(.proofcard__ico){grid-area:s;color:var(--ink-soft);font-size:.88rem;line-height:1.35}

/* ---- Photograph shapes. Six of them, used deliberately. ---------------- */
.photo--arch{border-radius:50% 50% var(--r-md) var(--r-md) / 34% 34% var(--r-md) var(--r-md)}
.photo--circle{border-radius:50%;aspect-ratio:1}
.photo--wide{aspect-ratio:16/9}
.photo--tall{aspect-ratio:2/3}
.photo--square{aspect-ratio:1}
.shot--inset .photo{max-width:26rem}

/* ---- Inside the home: a mosaic, not a row of matching boxes ------------ */
.tour__head{display:grid;gap:1rem;align-items:end;margin-bottom:2.2rem}
@media (min-width:900px){.tour__head{grid-template-columns:1fr 1fr;gap:2.5rem}}
.tour__head .lede{margin:0}

.mosaic{display:grid;gap:1.15rem;grid-template-columns:repeat(2,1fr)}
.mosaic figure{margin:0}
.mosaic figcaption{color:var(--ink-soft);font-size:.92rem;line-height:1.45;padding-top:.55rem}
.mosaic__video{grid-column:1 / -1}
@media (min-width:900px){
  .mosaic{grid-template-columns:repeat(12,1fr);grid-auto-rows:auto}
  .mosaic__video{grid-column:1 / span 7}
  .mosaic__arch {grid-column:8 / span 5;margin-top:-1.5rem}
  .mosaic__wide {grid-column:1 / span 5}
  .mosaic__round{grid-column:6 / span 3;margin-top:1.75rem}
  .mosaic__tall {grid-column:9 / span 4;margin-top:-2.5rem}
}
.mosaic .photo{height:auto}
.mosaic__round figcaption{text-align:center}

.videobox{aspect-ratio:16/10}
.videobox img{aspect-ratio:auto;height:100%}
.videobox__soon b{display:block;color:#FFC145;font-family:var(--font-ui);font-weight:600}

/* ---- Service area line -------------------------------------------------- */
.areas-line{margin-top:1.2rem}
.areas-line b{color:var(--heading)}

/* min-height fights the small shapes; let each frame keep its own ratio, and
   drop the dark placeholder fill now that every frame holds a photograph. */
.photo{min-height:0;border-color:var(--line);background:#EDF1F5}
.photo--circle,.photo--arch,.mosaic .photo,.collage .photo{min-height:0}
.shot figcaption{max-width:46ch}


/* ==========================================================================
   v6 — hero proportions, the slideshow, the video split, contact panels.
   ========================================================================== */

/* ---- Hero: copy further in; the photograph reaches deeper, more softly --- */
@media (min-width:820px){
  .hero__copy{margin-left:clamp(2rem,6vw,7.5rem)}
  .hero--page .wrap > *{margin-left:clamp(2rem,6vw,7.5rem)}
}
@media (min-width:1000px){
  .hero__photo{width:52%}
  .hero__copy{max-width:36rem}
}
@media (min-width:1000px) and (max-width:1279px){
  .hero__photo{width:48%}
  .hero__copy{max-width:30rem;margin-left:clamp(1.5rem,4vw,3.5rem)}
}
/* A long, slow dissolve rather than a wall: fully covered where the words are,
   then releasing gradually across two thirds of the picture. */
.hero__photo::after{
  background:
    linear-gradient(96deg,
      #FFF3E0 0%, rgba(255,243,224,.995) 18%, rgba(255,245,229,.97) 30%,
      rgba(255,246,232,.88) 42%, rgba(255,247,234,.66) 56%, rgba(255,247,234,.38) 70%,
      rgba(255,247,234,.16) 84%, rgba(255,247,234,0) 100%),
    linear-gradient(180deg, rgba(255,243,224,.5) 0%, rgba(255,243,224,0) 22%);
}
@media (min-width:1000px){
  .hero__photo img{
    -webkit-mask-image:linear-gradient(96deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 34%);
            mask-image:linear-gradient(96deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 34%);
  }
}

/* ---- Inner heroes: shallower ------------------------------------------- */
.hero--page{padding-block:clamp(1.6rem,3vw,2.5rem) clamp(1.6rem,3vw,2.5rem)}
.hero--page h1{font-size:clamp(1.8rem,2.6vw,2.4rem);margin-bottom:.35em}
.hero--page .lede{font-size:clamp(1.02rem,.3vw + 1rem,1.12rem);max-width:52ch}
.hero--page .btn-row{margin-top:1.2rem}

/* ---- Slideshow --------------------------------------------------------- */
.slides{margin-top:2rem}
.slides__track{list-style:none;margin:0;padding:0}
.slides__item{margin:0;display:grid;gap:1.5rem;align-items:center}
@media (min-width:820px){
  .slides__item{grid-template-columns:1.35fr .65fr;gap:2.5rem}
}
.slides__photo{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;
  background:#EDF1F5;box-shadow:0 30px 60px -34px rgba(16,42,67,.6);
}
.slides__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slides__caption h3{margin:0 0 .4em;font-size:clamp(1.3rem,1.8vw,1.7rem)}
.slides__caption p{margin:0;color:var(--ink-soft)}
.slides__caption{border-left:4px solid var(--gold);padding-left:1.2rem}

.slides__controls{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:1.4rem;
}
.slides__nav{
  width:2.9rem;height:2.9rem;border-radius:50%;flex:none;cursor:pointer;
  background:#fff;border:1px solid var(--line-strong);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.slides__nav svg{width:1.2rem;height:1.2rem}
.slides__nav:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px)}
.slides__dots{list-style:none;display:flex;gap:.5rem;margin:0;padding:0}
.slides__dots li{margin:0}
.slides__dot{
  width:2.4rem;height:2.4rem;padding:0;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.slides__dot::before{
  content:"";width:.7rem;height:.7rem;border-radius:50%;
  background:var(--line-strong);transition:all var(--dur) var(--ease);
}
.slides__dot:hover::before{background:var(--gold-ink)}
.slides__dot[aria-current="true"]::before{background:var(--gold);width:1.9rem;border-radius:1rem}
.slides__play{
  margin-left:auto;cursor:pointer;background:none;border:1px solid var(--line-strong);
  color:var(--navy);border-radius:100px;padding:.5rem 1rem;font:600 .9rem/1 var(--font-ui);
  display:inline-flex;align-items:center;gap:.5rem;min-height:2.9rem;
}
.slides__play:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.slides__playicon{
  width:.85rem;height:.85rem;flex:none;
  border-left:4px solid currentColor;border-right:4px solid currentColor;
}
.slides__play[aria-pressed="true"] .slides__playicon{
  border:0;width:0;height:0;
  border-top:.45rem solid transparent;border-bottom:.45rem solid transparent;
  border-left:.75rem solid currentColor;border-right:0;
}

/* ---- Video, below the photographs, with its own words ------------------ */
.tourvid{
  display:grid;gap:1.8rem;margin-top:3.2rem;padding-top:2.6rem;
  border-top:1px solid var(--line);
}
@media (min-width:900px){
  .tourvid{grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:center}
}
.tourvid__copy h3{margin:0 0 .5em;font-size:clamp(1.3rem,1.8vw,1.7rem)}
.tourvid__copy p{color:var(--ink-soft)}
.tourvid .videobox{aspect-ratio:16/10;margin:0}

/* ---- FAQ photograph: small and round ----------------------------------- */
.faq-aside .photo--circle{max-width:19rem;margin-inline:auto}
@media (min-width:1000px){.faq-split{grid-template-columns:.55fr 1.45fr;gap:2.5rem}}

/* ---- Contact: a coloured panel and a livelier form --------------------- */
.reachpanel{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.2rem);
  background:linear-gradient(150deg,#123A78 0%,#102A43 58%,#0B1F31 100%);
  color:#E6EDF5;box-shadow:0 30px 60px -36px rgba(16,42,67,.85);
}
.reachpanel::before{
  content:"";position:absolute;right:-6rem;top:-6rem;width:18rem;height:18rem;border-radius:50%;
  background:radial-gradient(circle,rgba(244,160,0,.3) 0%,rgba(244,160,0,0) 70%);
}
.reachpanel > *{position:relative;z-index:1}
.reachpanel .eyebrow{color:#FFC145}
.reachpanel h2,.reachpanel h3,.reachpanel h4{color:#fff}
.reachpanel h2.ruled::before{background:linear-gradient(90deg,#FFC145,rgba(255,193,69,.25))}
.reachpanel p,.reachpanel td,.reachpanel li{color:#DCE6F5}
.reachpanel a{color:#fff;font-weight:600}
.reachpanel a:hover{color:#FFC145}
.reachpanel .contact-list li{border-bottom-color:rgba(255,255,255,.16)}
.reachpanel .contact-list b{color:#FFC145}
.reachpanel .hours-table caption{color:#FFC145}
.reachpanel .hours-table th,.reachpanel .hours-table td{
  color:#E6EDF5;border-bottom-color:rgba(255,255,255,.16)
}
.reachpanel .steps li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.reachpanel .steps li::before{background:linear-gradient(150deg,#F4A000,#FFC145);color:#102A43}

.formcard .form{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFBF3 100%);
  border:1px solid #F0E2C8;border-radius:var(--r-lg);
  box-shadow:0 30px 60px -38px rgba(16,42,67,.55);
  padding:clamp(1.5rem,3vw,2.4rem);position:relative;overflow:hidden;
}
.formcard .form::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#F4A000,#FFC145 50%,#0033CC);
}
.formcard .form h2{margin-top:.4rem}
.field input,.field select,.field textarea{
  background:#fff;border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--gold-ink)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(0,51,204,.14)
}

@media (min-width:960px){
  .contact-grid{grid-template-columns:.9fr 1.1fr;gap:2.5rem;align-items:start}
}

/* ---- Pull quote and callout -------------------------------------------- */
.pullquote{
  margin:0;max-width:52rem;position:relative;padding:0 0 0 clamp(2.5rem,5vw,4.5rem);
}
.pullquote::before{
  content:"\201C";position:absolute;left:0;top:-.35em;
  font-family:var(--font-display);font-size:clamp(4rem,9vw,7rem);line-height:1;
  color:var(--gold);
}
.pullquote p{
  margin:0;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.35;color:var(--heading);
  letter-spacing:-.014em;max-width:none;
}
.callout{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  background:linear-gradient(135deg,#FFF8EC 0%,#FFEFD6 100%);
  border:1px solid #F0DFBE;border-left:5px solid var(--gold);
  border-radius:var(--r-md);padding:clamp(1.2rem,2.5vw,1.8rem);max-width:58rem;
}
.callout__mark{
  width:2.6rem;height:2.6rem;border-radius:50%;flex:none;
  background:linear-gradient(150deg,#F4A000,#FFC145);color:#102A43;
  display:inline-flex;align-items:center;justify-content:center;
}
.callout__mark svg{width:1.3rem;height:1.3rem}
.callout p{margin:0;color:var(--ink)}
.callout b{color:var(--heading)}


/* ==========================================================================
   v7 — a seamless hero fade, a slideshow that actually slides, shorter
        inner-page heroes.
   ========================================================================== */

/* The hidden attribute must win. Several components set display on the same
   element, which was quietly overriding it. */
[hidden]{display:none !important}

/* ---- Hero: no second colour, so there is no edge to see ----------------- */
.hero__photo::after{display:none}          /* the painted overlay was the seam */
.hero__photo img{
  -webkit-mask-image:linear-gradient(96deg,
      transparent 0%, rgba(0,0,0,.06) 10%, rgba(0,0,0,.2) 20%, rgba(0,0,0,.45) 32%,
      rgba(0,0,0,.72) 44%, rgba(0,0,0,.9) 56%, #000 70%);
          mask-image:linear-gradient(96deg,
      transparent 0%, rgba(0,0,0,.06) 10%, rgba(0,0,0,.2) 20%, rgba(0,0,0,.45) 32%,
      rgba(0,0,0,.72) 44%, rgba(0,0,0,.9) 56%, #000 70%);
}
@media (max-width:999px){
  .hero__photo img{
    -webkit-mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.85) 62%, rgba(0,0,0,.25) 88%, transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.85) 62%, rgba(0,0,0,.25) 88%, transparent 100%);
  }
}
/* Browsers without masking keep a painted fade instead. */
@supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  .hero__photo::after{
    display:block;
    background:linear-gradient(96deg,#FFF7EA 0%, rgba(255,247,234,.92) 28%,
               rgba(255,247,234,.5) 52%, rgba(255,247,234,0) 78%);
  }
}

/* ---- Slideshow: one track, sliding left to right ----------------------- */
.slides__viewport{overflow:hidden;border-radius:var(--r-lg)}
.slides__track{
  display:flex;margin:0;padding:0;list-style:none;
  transition:transform .62s cubic-bezier(.22,.61,.36,1);will-change:transform;
}
.slides__item{
  flex:0 0 100%;min-width:100%;margin:0;display:grid;gap:1.5rem;align-items:center;
  padding:.25rem;
}
@media (min-width:820px){
  .slides__item{grid-template-columns:1.35fr .65fr;gap:2.5rem}
}
.slides__item[inert]{opacity:.35;transition:opacity .5s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .slides__track{transition:none}
  .slides__item[inert]{opacity:1}
}

/* ---- Inner-page heroes: another quarter shorter ------------------------- */
.hero--page{padding-block:clamp(1.15rem,2.1vw,1.85rem) clamp(1.15rem,2.1vw,1.85rem)}
.hero--page h1{font-size:clamp(1.65rem,2.3vw,2.05rem)}
.hero--page .lede{font-size:clamp(.99rem,.25vw + .95rem,1.06rem);max-width:56ch}
.hero--page::after{width:20rem;height:20rem;right:-5rem;top:-7rem}


/* ==========================================================================
   v8 — logo and hero copy on one line, a subtler fade, shorter inner heroes.
   ========================================================================== */

/* The tagline beside the logo is gone; the logo art is trimmed to its edges
   so its left edge is now the same line as the text below it. */
.brand__sub{display:none !important}
.brand{gap:0}

/* ---- Hero: copy aligned to the logo, gutter wide enough to breathe ------ */
:root{--gut:clamp(1.9rem,4.5vw,3.5rem)}
.hero__copy,
.hero--page .wrap > *{margin-left:0 !important}
@media (min-width:1000px){
  .hero__copy{max-width:37rem}
}

/* ---- A single, even wash. No pale band through the middle. ------------- */
.hero{
  background:linear-gradient(107deg,#FFF2DE 0%,#FFF4E4 52%,#FFF0DA 100%);
  animation:none;
}
/* and a longer, gentler dissolve on the photograph itself */
.hero__photo img{
  -webkit-mask-image:linear-gradient(94deg,
      transparent 0%, rgba(0,0,0,.04) 14%, rgba(0,0,0,.14) 26%, rgba(0,0,0,.32) 38%,
      rgba(0,0,0,.56) 50%, rgba(0,0,0,.78) 62%, rgba(0,0,0,.93) 74%, #000 88%);
          mask-image:linear-gradient(94deg,
      transparent 0%, rgba(0,0,0,.04) 14%, rgba(0,0,0,.14) 26%, rgba(0,0,0,.32) 38%,
      rgba(0,0,0,.56) 50%, rgba(0,0,0,.78) 62%, rgba(0,0,0,.93) 74%, #000 88%);
}

/* ---- Inner-page heroes: a quarter shorter again, headline larger ------- */
.hero--page{
  min-height:0 !important;
  padding-block:clamp(.85rem,1.5vw,1.35rem) clamp(.95rem,1.7vw,1.5rem) !important;
}
.hero--page h1{font-size:clamp(1.95rem,2.9vw,2.6rem);margin:0 0 .25em;max-width:22ch}
.hero--page .lede{
  font-size:clamp(1rem,.25vw + .95rem,1.08rem);line-height:1.5;
  margin:0;max-width:58ch;
}
.hero--page::after{width:16rem;height:16rem;right:-4.5rem;top:-6rem}

/* ---- Why families choose: three photographs, aligned ------------------- */
.collage{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr);align-content:start}
.collage figure{margin:0}
.collage__a{grid-column:1 / -1}
.collage__a .photo{aspect-ratio:16/10}
.collage__b .photo,.collage__c .photo{aspect-ratio:1}
.collage .photo{border-radius:var(--r-md);height:auto}

/* ---- Inside the home: heading, then the line under it ------------------ */
.tour__head{display:block;margin-bottom:2.2rem}
.tour__head .lede{margin:.9rem 0 0;max-width:62ch}

/* ---- Visiting us: wider card, both buttons on one line ----------------- */
@media (min-width:1000px){
  .split--area{grid-template-columns:1fr 1.02fr}
}
.visit .btn-row{flex-wrap:nowrap;gap:.7rem}
.visit .btn-row .btn{
  flex:1 1 auto;white-space:nowrap;text-align:center;justify-content:center;
  padding-inline:clamp(.8rem,1.6vw,1.25rem);font-size:.97rem;
}
@media (max-width:520px){
  .visit .btn-row{flex-wrap:wrap}
  .visit .btn-row .btn{flex:1 1 100%}
}


/* ==========================================================================
   v9 — the hero fade the mock-up shows, an organised why-choose block, and
        inner heroes with somewhere to go.
   ========================================================================== */

/* ---- Hero: a short, soft edge on the photograph, not a wash across it --- */
.hero__photo img{
  -webkit-mask-image:linear-gradient(90deg,
      transparent 0%, rgba(0,0,0,.28) 6%, rgba(0,0,0,.62) 13%,
      rgba(0,0,0,.88) 21%, #000 30%);
          mask-image:linear-gradient(90deg,
      transparent 0%, rgba(0,0,0,.28) 6%, rgba(0,0,0,.62) 13%,
      rgba(0,0,0,.88) 21%, #000 30%);
}
@media (max-width:999px){
  .hero__photo img{
    -webkit-mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.9) 70%, rgba(0,0,0,.3) 92%, transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.9) 70%, rgba(0,0,0,.3) 92%, transparent 100%);
  }
}
@media (min-width:1000px){
  .hero__photo{width:50%}
  /* the copy sits just inside the logo's left edge, as in the mock-up */
  .hero__copy{margin-left:clamp(.5rem,1.5vw,1.75rem) !important;max-width:35rem}
}
@media (min-width:1000px) and (max-width:1279px){
  .hero__photo{width:46%}
  .hero__copy{max-width:30rem}
}

/* ---- Why families choose: 2 x 2 of icons, one large captioned picture --- */
.split--why{display:grid;gap:2.5rem}
@media (min-width:1000px){
  .split--why{grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,4vw,4rem);align-items:center}
}
.reasons{display:grid;gap:1.6rem 2rem;margin:2rem 0 0}
@media (min-width:620px){.reasons{grid-template-columns:repeat(2,1fr)}}
.reasons li{margin:0;padding:0;max-width:none}
.reasons li::before{content:none}
.reasons__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.9rem;height:2.9rem;border-radius:50%;margin-bottom:.7rem;
  background:linear-gradient(150deg,#FFE9C2,#FFD489);color:#7A4F00;
}
.reasons__ico svg{width:1.45rem;height:1.45rem}
.reasons h3{margin:0 0 .3em;font-size:1.08rem}
.reasons p{margin:0;color:var(--ink-soft);font-size:.97rem;line-height:1.55;max-width:34ch}

.feature{position:relative;margin:0}
.feature__photo{
  border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 34px 66px -38px rgba(16,42,67,.7);
}
.feature__photo img{width:100%;height:100%;object-fit:cover;display:block}
.feature__cap{
  position:absolute;right:0;bottom:-1px;max-width:17rem;
  background:linear-gradient(140deg,#123A78 0%,#102A43 60%,#0B1F31 100%);
  color:#fff;font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.35;
  padding:1.1rem 1.3rem;border-left:5px solid var(--gold);
  border-radius:var(--r-md) 0 var(--r-lg) 0;
}
@media (max-width:619px){.feature__cap{position:static;max-width:none;border-radius:0 0 var(--r-md) var(--r-md)}}

/* ---- Inner heroes: roughly twice the height, with room for actions ------ */
.hero--page{
  padding-block:clamp(1.9rem,3.2vw,3rem) clamp(2rem,3.4vw,3.2rem) !important;
}
.hero--page .btn-row{margin-top:1.4rem}
.hero__mini{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  margin:1.5rem 0 0;padding:1.1rem 0 0;border-top:1px solid rgba(138,90,0,.22);
}
.hero__mini li{
  margin:0;max-width:none;font-size:.92rem;font-weight:600;color:var(--ink-soft);
  display:flex;align-items:center;gap:.45rem;
}
.hero__mini li::before{
  content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--gold);flex:none;
}


/* ==========================================================================
   v10 — container inset, the hero fade reaching the copy, page-hero colours
         restored, and the why-choose block rebuilt.
   ========================================================================== */

/* ---- Everything sits further in from the page edge --------------------- */
:root{--gut:clamp(1.5rem,5vw,4.5rem)}

/* ---- Hero: H1 starts a hair right of the logo -------------------------- */
.hero__copy{margin-left:0 !important}
@media (min-width:900px){
  .hero__copy{margin-left:.4rem !important;max-width:33rem}
}
@media (min-width:1280px){
  .hero__copy{margin-left:.6rem !important;max-width:35rem}
}

/* ---- Hero photograph: wider, and dissolving right where the words end --- */
@media (min-width:1000px){
  .hero__photo{width:58%}
  .hero__photo img{
    -webkit-mask-image:linear-gradient(90deg,
        transparent 0%, transparent 13%, rgba(0,0,0,.18) 21%, rgba(0,0,0,.45) 28%,
        rgba(0,0,0,.72) 35%, rgba(0,0,0,.9) 42%, #000 52%);
            mask-image:linear-gradient(90deg,
        transparent 0%, transparent 13%, rgba(0,0,0,.18) 21%, rgba(0,0,0,.45) 28%,
        rgba(0,0,0,.72) 35%, rgba(0,0,0,.9) 42%, #000 52%);
  }
}
@media (min-width:1000px) and (max-width:1279px){
  .hero__photo{width:54%}
  .hero__copy{max-width:28rem}
}

/* ---- Page heroes: their own colours again (these were being overridden) - */
.hero.hero--warm{
  background:
    radial-gradient(620px 340px at 94% 2%, rgba(244,160,0,.26) 0%, rgba(244,160,0,0) 66%),
    linear-gradient(110deg,#FFEFD2 0%,#FFF8EC 56%,#FFF3E0 100%);
}
.hero.hero--sky{
  background:
    radial-gradient(620px 340px at 94% 2%, rgba(0,51,204,.16) 0%, rgba(0,51,204,0) 66%),
    linear-gradient(110deg,#DFE9FF 0%,#F3F7FF 54%,#EAF1FF 100%);
}
.hero.hero--mix{
  background:
    radial-gradient(620px 340px at 92% 4%, rgba(244,160,0,.24) 0%, rgba(244,160,0,0) 66%),
    linear-gradient(110deg,#E6EDFF 0%,#FBF7F1 52%,#FFEFD6 100%);
}
.hero--page .wrap > *{margin-left:0 !important}
@media (min-width:900px){
  .hero--page .wrap > *{margin-left:.4rem !important}
}

/* ---- Why families choose: cleaner picture, caption that sits properly --- */
.feature__photo{aspect-ratio:4/5;border-radius:var(--r-lg)}
@media (min-width:1000px){.feature__photo{aspect-ratio:5/6}}
.feature__cap{
  right:auto;left:0;bottom:1.5rem;max-width:min(20rem,88%);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:1rem 1.4rem;font-size:1.08rem;
}
.reasons{gap:1.8rem 2.2rem}
.reasons li{display:block}
.reasons__ico{width:2.7rem;height:2.7rem;margin-bottom:.65rem}
.reasons h3{font-size:1.05rem;line-height:1.3}
.reasons p{font-size:.95rem;max-width:32ch}


/* ==========================================================================
   v11 — the container bug, a photograph you can actually see, taller heroes.
   ========================================================================== */

/* The hero's container was being forced to the full viewport width, which put
   the copy hard against the page edge while the logo stayed inside the grid.
   Give it the same measure as every other container and centre it. */
@media (min-width:1000px){
  .hero > .wrap{
    width:min(100% - (var(--gut) * 2), var(--wrap)) !important;
    margin-inline:auto;flex:0 1 auto;
  }
}

/* Copy starts a whisker right of the logo's first stroke. */
.hero__copy{margin-left:0 !important}
@media (min-width:900px){.hero__copy{margin-left:.35rem !important;max-width:34rem}}
@media (min-width:1280px){.hero__copy{margin-left:.5rem !important;max-width:35rem}}

/* ---- The photograph: present and solid, soft only at its left edge ------ */
@media (min-width:1000px){
  .hero__photo{width:52%}
  .hero__photo img{
    -webkit-mask-image:linear-gradient(90deg,
        transparent 0%, rgba(0,0,0,.35) 8%, rgba(0,0,0,.7) 16%,
        rgba(0,0,0,.92) 24%, #000 32%);
            mask-image:linear-gradient(90deg,
        transparent 0%, rgba(0,0,0,.35) 8%, rgba(0,0,0,.7) 16%,
        rgba(0,0,0,.92) 24%, #000 32%);
  }
}
@media (min-width:1000px) and (max-width:1279px){
  .hero__photo{width:48%}
  .hero__copy{max-width:28rem}
}

/* ---- About, Services and Contact get a taller opening ------------------ */
.hero--tall{
  padding-block:clamp(3rem,5vw,4.6rem) clamp(3rem,5vw,4.6rem) !important;
}
.hero--tall h1{font-size:clamp(2.05rem,3.1vw,2.8rem)}
.hero--tall .lede{font-size:clamp(1.04rem,.3vw + 1rem,1.15rem);max-width:56ch}
.hero--tall::after{width:22rem;height:22rem;right:-5rem;top:-7rem}


/* ==========================================================================
   v12 — availability, cost, the owner's story and the referral path.
   ========================================================================== */

/* ---- Availability: a slim navy bar under the proof card ---------------- */
.avail{
  background:linear-gradient(120deg,#123A78 0%,#102A43 55%,#0B1F31 100%);
  color:#E6EDF5;position:relative;z-index:1;
}
.avail .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
  padding-block:1.05rem;
}
.avail__now{
  margin:0;display:flex;gap:.8rem;align-items:flex-start;flex:1 1 22rem;
  font-size:.99rem;line-height:1.5;max-width:none;color:#DCE6F5;
}
.avail__now b{color:#fff;margin-right:.35rem}
.avail__dot{
  width:.8rem;height:.8rem;border-radius:50%;flex:none;margin-top:.42rem;
  background:var(--gold);box-shadow:0 0 0 4px rgba(244,160,0,.24);
}
[data-state="open"] .avail__dot{background:#3FBF6A;box-shadow:0 0 0 4px rgba(63,191,106,.24)}
[data-state="full"] .avail__dot{background:#C7CDD6;box-shadow:0 0 0 4px rgba(199,205,214,.2)}
.avail .btn{flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
  .avail__dot{animation:availPulse 2.8s ease-in-out infinite}
}
@keyframes availPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(244,160,0,.24)}
  50%{box-shadow:0 0 0 8px rgba(244,160,0,.10)}
}

/* ---- Cost: two columns of what is and is not in the rate --------------- */
.incl{display:grid;gap:1.8rem 2.5rem;margin-top:1.8rem}
@media (min-width:680px){.incl{grid-template-columns:repeat(2,1fr)}}
.incl h3{margin:0 0 .6em;font-size:1.05rem}
.incl h3 + h3,.incl > div > h3:nth-of-type(2){margin-top:1.6rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ticks li{
  margin:0;padding-left:1.85rem;position:relative;font-size:.97rem;
  line-height:1.5;color:var(--ink-soft);max-width:38ch;
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.28rem;width:1.15rem;height:1.15rem;border-radius:50%;
  background:linear-gradient(150deg,#FFE9C2,#FFD489);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A4F00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"),
    linear-gradient(150deg,#FFE9C2,#FFD489);
  background-size:.7rem,cover;background-repeat:no-repeat;background-position:center,center;
}
.ticks--minus li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C5C6B' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"),
    linear-gradient(150deg,#E7EBF1,#D7DEE7);
}
.costnote{
  margin-top:1.6rem;background:linear-gradient(135deg,#FFF8EC,#FFEFD6);
  border:1px solid #F0DFBE;border-left:5px solid var(--gold);
  border-radius:var(--r-md);padding:1rem 1.2rem;font-size:1rem;max-width:46rem;
}

/* ---- Referral panel ---------------------------------------------------- */
.referral{display:grid;gap:2rem}
@media (min-width:900px){.referral{grid-template-columns:1.3fr .7fr;gap:3rem;align-items:start}}
.referral__card{
  background:linear-gradient(150deg,#123A78 0%,#102A43 60%,#0B1F31 100%);
  color:#E6EDF5;border-radius:var(--r-lg);padding:1.7rem 1.6rem;
  box-shadow:0 30px 60px -38px rgba(16,42,67,.85);
}
.referral__card h3{color:#fff;margin:0 0 .6em;font-size:.86rem;letter-spacing:.14em;
  text-transform:uppercase;font-family:var(--font-ui)}
.referral__card p{color:#DCE6F5;margin:0 0 .6rem;max-width:none}
.referral__card a{color:#fff;font-weight:600}
.referral__card a:hover{color:var(--gold)}
.referral__num{font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.1}
.referral__num a{color:#FFC145}
.referral__card hr{border:0;border-top:1px solid rgba(255,255,255,.18);margin:1.2rem 0}
.referral__note{font-size:.9rem;color:#AEBACA}


/* ==========================================================================
   WordPress / Astra bridge. Ignored entirely on the static build.
   ========================================================================== */

/* The active-page underline, whether the attribute or the WP class marks it */
.current-menu-item > a::after,
.current-menu-ancestor > a::after,
.current_page_item > a::after{transform:scaleX(1)}
.current-menu-item > a,
.current_page_item > a{color:var(--heading)}

/* Let the logo overhang the header. Astra clips these by default. */
#masthead,
.ast-main-header-wrap,
.ast-primary-header-bar,
.ast-header-break-point .main-header-bar,
.site-branding,
.ast-site-identity{overflow:visible !important}
#masthead{position:relative;z-index:99}

/* Logo sizing when Astra renders it instead of our markup */
.custom-logo-link img,
.ast-site-identity .custom-logo-link img{
  height:80px;width:auto;margin-bottom:-26px;position:relative;z-index:2;
  transition:height var(--dur) var(--ease),margin var(--dur) var(--ease);
}
.ast-sticky-active .custom-logo-link img,
.is-stuck .custom-logo-link img{height:48px;margin-bottom:-8px}
@media (max-width:640px){
  .custom-logo-link img{height:56px;margin-bottom:-14px}
  .ast-sticky-active .custom-logo-link img{height:42px;margin-bottom:-6px}
}

/* Our scroll states, applied to whichever element is the header */
#masthead.is-away,
.ast-main-header-wrap.is-away{transform:translateY(-100%)}
#masthead,
.ast-main-header-wrap{
  transition:transform .55s cubic-bezier(.16,1,.3,1),
             box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* Elementor wraps every HTML widget; stop it constraining our full-width bands */
.elementor-widget-html > .elementor-widget-container{display:contents}
.elementor-section.elementor-section-boxed > .elementor-container{max-width:none}