/* Little Learners Nurseries v3 "Calm". See v3/DESIGN.md.
   Same four nursery colours as v2, taken from the logo. What changed is how they are
   spent: the full colour only in small marks (a dot, an arrow), a soft tint of it for
   panels, white and warm grey everywhere else, navy text. No outlines, no floods. */

:root{
  --ink:#14284A; --ink-2:#4F5B70;
  --paper:#FFFFFF; --paper-2:#F5F4F0;
  --rule:#E3E1DA; --rule-2:#CFCBC0;
  --blue:#0C5D8F; --blue-dk:#08466C; --blue-tint:#E7F0F6;

  /* the four nursery colours, unchanged from v2 (sampled from the logo) */
  --n-red:#C22E17; --n-green:#1E7F36; --n-yellow:#F7EB27; --n-purple:#6E2F80;

  /* default pairing, overridden per data-c */
  --c:var(--blue); --c-tint:var(--paper-2); --c-on:#fff;

  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:40px;
  --s7:56px; --s8:72px; --s9:96px;
  --section:clamp(64px,8vw,120px);
  --maxw:1240px;
  --gutter:clamp(16px,4vw,40px);
  --pad:clamp(28px,5vw,72px);
  --r-lg:32px; --r-md:26px; --r-sm:16px;
}

/* --c-on is the text/icon colour ON the full colour (only the yellow takes navy) */
[data-c="red"]   {--c:var(--n-red);    --c-tint:#FBEAE6; --c-on:#fff}
[data-c="green"] {--c:var(--n-green);  --c-tint:#E5F2E8; --c-on:#fff}
[data-c="yellow"]{--c:var(--n-yellow); --c-tint:#FCF6D2; --c-on:var(--ink)}
[data-c="purple"]{--c:var(--n-purple); --c-tint:#F2E9F5; --c-on:#fff}
[data-c="blue"]  {--c:var(--blue);     --c-tint:var(--blue-tint); --c-on:#fff}
[data-c="ink"]   {--c:var(--blue);     --c-tint:var(--paper-2);   --c-on:#fff}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display,.stat__num,.panel__name,.mega__name{
  font-family:Parkinsans,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
h1,h2,h3,h4{color:var(--ink); line-height:1.08; margin:0 0 var(--s3); font-weight:600; letter-spacing:-.02em}
h1{font-size:clamp(2.35rem,4.8vw,4.1rem); letter-spacing:-.035em}
h2{font-size:clamp(1.8rem,3.2vw,2.85rem); font-weight:500; letter-spacing:-.03em}
h3{font-size:clamp(1.12rem,1.5vw,1.3rem); line-height:1.25}
h4{font-size:1rem}
p{margin:0 0 var(--s3)}
/* height:auto is load-bearing: the width/height attrs (kept for CLS) otherwise fix
   the used height and defeat aspect-ratio (see v2 DESIGN.md). */
img{max-width:100%; height:auto; display:block}
a{color:var(--ink); text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--rule-2)}
a:hover{color:var(--blue); text-decoration-color:currentColor}
ul,ol{padding-left:1.25em; margin:0 0 var(--s3)}
li{margin-bottom:var(--s2)}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
code{font-size:.9em}

/* long emails/URLs must never push a box off the page (the v1 St Hellier bug) */
.wrap,.panel,.card,.contactcol,.prose,td,li,p,dd{overflow-wrap:anywhere}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); width:100%}
.wrap .wrap{padding:0; max-width:none}
/* a reading column: it keeps the page's left edge, only its contents are capped */
.measure{max-width:68ch}
.wrap.measure{max-width:var(--maxw)}
.wrap.measure>*{max-width:68ch}
.section--alt p{max-width:75ch}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:12px 20px; z-index:200}
.skip:focus{left:12px; top:12px}

/* Sections are spaced by margin, not padding, so two in a row collapse to one gap
   instead of doubling it. */
section.section{padding:0; margin:var(--section) 0}
.pagehead+.section{margin-top:clamp(56px,6vw,96px)}

/* Alternate sections are a soft rounded panel the width of the content column,
   never a full-bleed band. On a nursery page it takes that nursery's tint. */
section.section--alt,section.section--ink{
  background:var(--c-tint); border-radius:var(--r-lg);
  width:calc(100% - 2 * var(--gutter)); max-width:calc(var(--maxw) - 2 * var(--gutter));
  margin:var(--section) auto; padding:clamp(48px,6vw,88px) 0;
}
.section--alt>.wrap,.section--ink>.wrap{padding:0 var(--pad)}
.section--ink{--c-tint:var(--blue-tint)}

.eyebrow{
  display:flex; align-items:flex-start; gap:10px; font-weight:600; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin:0 0 var(--s3);
}
.lede{font-size:clamp(1.08rem,1.4vw,1.22rem); color:var(--ink-2); max-width:58ch; margin-bottom:var(--s4); line-height:1.6}

.dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--c); flex-shrink:0}
.dots{display:inline-flex; gap:4px; flex-shrink:0}
.eyebrow>.dot,.eyebrow>.dots{margin-top:.38em}

/* ---------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font:600 .98rem/1.2 "Instrument Sans",system-ui,sans-serif;
  padding:14px 24px; border-radius:999px; background:var(--ink); color:#fff;
  text-decoration:none; border:1.5px solid var(--ink); cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{background:var(--blue); border-color:var(--blue); color:#fff}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--rule-2)}
.btn--ghost:hover{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn--onc{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn--oninc{background:#fff; color:var(--ink); border-color:#fff}
a.btn,a.btn:visited{color:#fff}
a.btn--ghost,a.btn--ghost:visited,a.btn--ghost:hover{color:var(--ink)}
a.btn--oninc,a.btn--oninc:visited{color:var(--ink)}
.btnrow{display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s4)}
.linkrow{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin-top:var(--s4)}
.linkrow a{font-weight:600}

/* ----------------------------------------------------------------- header -- */
/* A floating white bar, the width of the content column. No backdrop-filter on it:
   that would become the containing block of the fixed mobile drawer inside it. */
.hdr{position:sticky; top:0; z-index:100; padding:12px var(--gutter) 0}
.hdr__in{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  max-width:calc(var(--maxw) - 2 * var(--gutter)); margin:0 auto; position:relative;
  background:#fff; border:1px solid var(--rule); border-radius:999px;
  padding:6px 8px 6px 22px; box-shadow:0 10px 30px -18px rgba(20,40,74,.35);
}
.hdr__logo{display:flex; align-items:center; flex-shrink:0}
.hdr__logo img{height:50px; width:auto}
.hdr__nav{display:flex; align-items:center; gap:var(--s2); flex:1; justify-content:flex-end}
.hdr__nav>ul{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.hdr__nav>ul>li{margin:0}
.navlink{
  display:inline-flex; align-items:center; gap:6px; padding:10px 14px; color:var(--ink);
  text-decoration:none; font:500 .98rem/1.2 "Instrument Sans",system-ui,sans-serif;
  border-radius:999px; background:none; border:none; cursor:pointer;
  -webkit-appearance:none; white-space:nowrap;
}
.navlink:hover,.navlink[aria-expanded="true"],.navlink[aria-current="page"]{background:var(--paper-2); color:var(--ink)}
.navlink svg{width:10px; height:7px; transition:transform .15s}
[data-open="true"]>.navlink svg{transform:rotate(180deg)}
.hdr .btn{padding:12px 22px; white-space:nowrap}
.navtoggle{display:none}

/* ------------------------------------------------------------ mega menus -- */
[data-sub]{position:static; margin:0}
[data-sub][data-simple]{position:relative}
.megapanel{
  display:none; position:absolute; right:0; top:calc(100% + 10px);
  width:max-content; max-width:min(880px,90vw);
  background:#fff; border:1px solid var(--rule); border-radius:24px;
  padding:var(--s4); z-index:50; box-shadow:0 24px 60px -24px rgba(20,40,74,.35);
}
[data-sub] .megapanel::before{content:""; position:absolute; top:-12px; left:0; right:0; height:12px}
[data-sub][data-open="true"] > .megapanel{display:block}
.mega__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
.mega__card{
  display:flex; gap:12px; align-items:flex-start; text-decoration:none; color:var(--ink);
  border-radius:var(--r-sm); background:var(--c-tint); padding:16px 18px;
  transition:box-shadow .15s;
}
.mega__card:hover{color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--c)}
.mega__dot{display:block; width:10px; height:10px; border-radius:50%; background:var(--c); margin-top:7px; flex-shrink:0}
.mega__body{display:block}
.mega__name{display:block; font-weight:600; font-size:1.05rem; line-height:1.25}
.mega__sub{display:block; font-size:.85rem; color:var(--ink-2); margin-top:var(--s1); line-height:1.4}
.mega__more{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin-top:var(--s4);
  padding-top:var(--s3); border-top:1px solid var(--rule);
}
.mega__more a{font-size:.95rem; font-weight:600; color:var(--ink); text-decoration:none}
.mega__more a:hover{color:var(--blue); text-decoration:underline}
.megapanel--simple{width:270px; padding:var(--s2)}
[data-sub][data-open="true"] > .megapanel--simple{display:flex; flex-direction:column; gap:2px}
.megapanel--simple a{
  display:block; padding:11px var(--s3); border-radius:12px; color:var(--ink);
  text-decoration:none; font-weight:500; font-size:.98rem;
}
.megapanel--simple a:hover{background:var(--paper-2); color:var(--ink)}
.megapanel--4,.megapanel--3{left:0; right:0; width:auto; max-width:none}
.megapanel--4 .mega__grid{grid-template-columns:repeat(4,1fr)}
.megapanel--3 .mega__grid{grid-template-columns:repeat(3,1fr)}

/* -------------------------------------------------------------------- hero -- */
/* A wide photo; the headline sits in a white notch cut into its bottom-left corner,
   flush with the photo's left edge, so the text lines up with every section below. */
.hero{padding:var(--s4) 0 0}
.hero__photo img{width:100%; height:clamp(300px,42vw,560px); object-fit:cover; border-radius:var(--r-lg)}
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px); align-items:start;
}
.hero__card{
  position:relative; margin:-150px 0 0 -2px; background:#fff;
  border-top-right-radius:var(--r-lg); padding:44px clamp(24px,4vw,56px) 0 2px;
}
.hero__card h1{margin-bottom:var(--s4)}
.hero__card .lede{margin-bottom:0}
.hero__facts{
  list-style:none; margin:0; padding:52px 0 0;
  display:grid; grid-template-columns:1fr 1fr; gap:32px 28px;
}
.hero__facts li{margin:0; padding-top:14px; border-top:1px solid var(--rule)}
.hero__facts strong{
  display:block; font:600 clamp(1.9rem,2.8vw,2.5rem)/1 Parkinsans,system-ui,sans-serif;
  letter-spacing:-.03em; margin-bottom:8px;
}
.hero__facts span{display:block; font-size:.9rem; color:var(--ink-2); line-height:1.45}

/* ---------------------------------------------- the nursery cards (finder) -- */
.split{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);
  gap:clamp(32px,5vw,80px); align-items:start;
}
.split__intro{position:sticky; top:120px}
.split__h{font-size:1rem; margin:var(--s6) 0 0; padding-top:var(--s4); border-top:1px solid var(--rule)}
.arealinks{list-style:none; margin:var(--s2) 0 0; padding:0}
.arealinks li{margin:0; border-bottom:1px solid var(--rule)}
.arealinks a{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:11px 0; text-decoration:none; font-size:.97rem}
.arealinks a span{display:grid; color:var(--ink-2); transition:transform .2s}
.arealinks a:hover span{transform:translateX(4px); color:var(--blue)}
.arealinks svg{width:16px; height:10px}
.finder{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px}
.finder--few{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.finder--few:has(>.panel:only-child){max-width:780px}
/* one or two nurseries: a wide card, photo beside the text, so the row is filled */
.finder--few .panel{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.finder--few .panel__img img{height:100%; aspect-ratio:auto; min-height:240px}
.finder--few .panel__body{padding:18px 12px 10px 22px}
.finder--stagger{grid-template-columns:1fr 1fr; padding-bottom:72px}
.finder--stagger>.panel:nth-child(even){transform:translateY(72px)}
.panel{
  display:flex; flex-direction:column; background:var(--c-tint); color:var(--ink);
  text-decoration:none; padding:10px; border-radius:var(--r-md);
}
.panel:hover{color:var(--ink)}
/* inset by the card's 10px padding, so its radius is the card's minus 10 (concentric) */
.panel__img{display:block; overflow:hidden; border-radius:var(--r-sm)}
.panel__img img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .4s ease}
.panel:hover .panel__img img{transform:scale(1.04)}
.panel__body{padding:18px 12px 10px; display:flex; flex-direction:column; flex:1; gap:6px}
.panel__area{display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--ink-2)}
.panel__name{font-size:clamp(1.35rem,2vw,1.65rem); font-weight:600; line-height:1.1; letter-spacing:-.02em}
.panel__chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.panel__go{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  margin-top:auto; padding-top:20px; font-weight:600; font-size:.95rem;
}
.panel__arrow{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:#fff; color:var(--ink); transition:background .2s,color .2s; flex-shrink:0;
}
.panel__arrow svg{width:18px; height:11px}
.panel:hover .panel__arrow{background:var(--c); color:var(--c-on)}

.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600;
  padding:5px 9px; border-radius:999px; line-height:1.3; white-space:nowrap;
}
.chip--onc{background:#fff; color:var(--ink)}
.chip--out{border:1px solid currentColor}
a.chip--link{text-decoration:none; color:var(--ink); transition:box-shadow .15s}
a.chip--link:hover{color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.chip svg{width:14px; height:14px; flex-shrink:0}
.chiprow{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4)}

/* ------------------------------------------------------------ about block -- */
.about{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(32px,6vw,96px); align-items:center;
}
.about__photo img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-lg)}
.offer{list-style:none; padding:0; margin:var(--s5) 0 0; border-top:1px solid var(--rule)}
.offer li{
  display:grid; grid-template-columns:48px minmax(0,1fr); gap:18px; align-items:start;
  padding:20px 0; margin:0; border-bottom:1px solid var(--rule);
}
.offer__icon{
  display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:var(--blue-tint); color:var(--blue);
}
.offer__icon svg{width:24px; height:24px}
.offer h3{font-size:1.1rem; margin:2px 0 4px}
.offer h3 a{text-decoration:none}
.offer h3 a:hover{text-decoration:underline}
.offer p{font-size:.95rem; color:var(--ink-2); margin:0}

/* -------------------------------------------------- commitment + funding -- */
.panelbox{
  background:var(--paper-2); border-radius:var(--r-lg); padding:var(--pad);
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:clamp(24px,5vw,80px);
}
.panelbox h2{margin:0}
.commit{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:28px 40px}
.commit li{margin:0; padding-top:16px; border-top:1px solid var(--rule-2); font-size:.98rem; line-height:1.55}

.fundbox{
  background:var(--blue-tint); border-radius:var(--r-lg); padding:var(--pad);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px); align-items:end;
}
.fundbox p{color:var(--ink-2)}
.fundbox__nums{display:flex; align-items:flex-end; gap:clamp(20px,3vw,40px); flex-wrap:wrap}
.fundnum{flex:1 1 150px}
.fundnum .stat__num{font-size:clamp(5rem,10vw,8.5rem); line-height:.82; letter-spacing:-.06em; color:var(--ink); margin-bottom:14px}
.fundnum--small .stat__num{font-size:clamp(3.2rem,5.6vw,4.9rem); color:var(--blue)}
.fundnum .stat__lbl{display:block; max-width:24ch}

.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s5); margin:var(--s5) 0}
.stat__num{display:block; font-weight:600; line-height:1}
.stat__lbl{font-size:.9rem; color:var(--ink-2); line-height:1.45}

/* ---------------------------------------------------------- contact strip -- */
.contactstrip h2{margin-bottom:var(--s5)}
.contactcols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(20px,3vw,40px)}
.contactcol{padding-top:20px; border-top:1px solid var(--rule)}
.contactcol h3 a{text-decoration:none}
.contactcol h3 a:hover{text-decoration:underline}
.contactcol p{font-size:.95rem; margin-bottom:var(--s2)}
.contactcol__addr{color:var(--ink-2)}
.contactcol__links{display:flex; flex-direction:column; gap:2px}

/* the contact page keeps v2's contact cards: soft tint, a dot for the colour */
.contactgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.contactcard{background:var(--c-tint); border-radius:var(--r-md); overflow:hidden}
.contactcard__bar{width:12px; height:12px; border-radius:50%; background:var(--c); margin:24px 24px 0}
.contactcard__in{padding:12px 24px 24px}
.contactcard h3,.contactcol h3{display:flex; align-items:flex-start; gap:10px; margin-bottom:var(--s2)}
.contactcard h3>.dot,.contactcol h3>.dot{margin-top:.42em}
.contactcard h3 a{text-decoration:none}
.contactcard p{margin-bottom:var(--s2); font-size:.95rem}
.contactcard p:last-child{margin-bottom:0}

/* --------------------------------------------------------------- pagehead -- */
.pagehead{padding:var(--s4) 0 0}
.pagehead__grid{background:var(--c-tint); border-radius:var(--r-lg); overflow:hidden; display:grid}
.pagehead__grid--photo{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.pagehead__text{padding:var(--pad); align-self:center}
.pagehead__text .lede{margin-bottom:0}
/* flush to the panel's edge: it takes the panel's corners, no radius of its own */
.pagehead__photo{min-height:100%}
.pagehead__photo img{width:100%; height:100%; min-height:380px; object-fit:cover}
.pagehead .chiprow{margin-top:var(--s4)}
.pagehead .btnrow{margin-top:var(--s4)}
.pagehead a.btn--onc,.pagehead a.btn--onc:visited{color:#fff}
.pagehead a.btn--onc[style]{color:var(--ink)}
.crumbs{font-size:.85rem; margin-bottom:var(--s4); color:var(--ink-2)}
.crumbs a{color:var(--ink-2)}

/* ------------------------------------------------------------------ cards -- */
.cols{display:grid; gap:clamp(32px,5vw,72px)}
.cols--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cols--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tilegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.tilegrid--3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tile{
  display:block; background:var(--paper-2); border-radius:22px; padding:var(--s4);
  text-decoration:none; color:var(--ink); transition:box-shadow .15s;
}
.section--alt .tile{background:#fff}
a.tile:hover{color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}
.tile h3{margin-bottom:var(--s2)}
.tile p{color:var(--ink-2); font-size:.95rem; margin:0}
.card{background:var(--paper-2); border-radius:var(--r-md); padding:var(--s5)}
.card h3{margin-top:0}
.card .card__h{margin-top:0; font-size:clamp(1.12rem,1.5vw,1.3rem)}

/* ----------------------------------------------------------------- tables -- */
.tablewrap{overflow-x:auto; margin:var(--s4) 0}
table.datatable{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--rule); border-radius:20px; overflow:hidden; margin-bottom:var(--s4)}
table.datatable th,table.datatable td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--rule); font-size:.97rem}
table.datatable th{background:var(--paper-2); color:var(--ink); font-weight:600}
table.datatable tr:last-child td{border-bottom:none}
.feenote{background:var(--blue-tint); border-radius:20px; padding:var(--s4); margin:var(--s4) 0}

/* -------------------------------------------------------------------- FAQ -- */
.faq{border-bottom:1px solid var(--rule)}
.faq:first-of-type{border-top:1px solid var(--rule)}
.faq summary{
  padding:22px 0; font:600 1.08rem/1.35 Parkinsans,system-ui,sans-serif;
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--s3);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; display:grid; place-items:center; flex-shrink:0; width:32px; height:32px;
  border-radius:50%; background:var(--paper-2); font-size:1.2rem; line-height:1; color:var(--ink);
}
.faq[open] summary::after{content:"\2212"}
.faq p{padding:0 48px 22px 0; margin:0; color:var(--ink-2)}

/* ------------------------------------------------------------------ forms -- */
form.enquiry{display:grid; gap:var(--s3)}
form.enquiry label{font-weight:600; font-size:.9rem; display:block; margin-bottom:6px}
form.enquiry input,form.enquiry textarea{
  width:100%; padding:13px var(--s3); border:1px solid var(--rule-2); border-radius:12px;
  font:inherit; font-size:1rem; background:#fff; color:var(--ink);
}
form.enquiry input:focus,form.enquiry textarea:focus{border-color:var(--ink); outline:none; box-shadow:0 0 0 3px var(--blue-tint)}
form.enquiry textarea{resize:vertical}
form.enquiry .btn{justify-self:start}
.hp{position:absolute; left:-9999px}
.formnote{font-size:.9rem; margin:var(--s2) 0 0; color:var(--ink-2)}
.formnote.ok{color:var(--n-green); font-weight:600}
.formnote.err{color:var(--n-red); font-weight:600}

/* ----------------------------------------------------------------- footer -- */
.ftr{background:var(--ink); color:#C9D2E3; border-radius:var(--r-lg) var(--r-lg) 0 0}
.ftr__in{padding-top:var(--s8)}
.ftr__grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) minmax(0,1.3fr); gap:var(--s5)}
.ftr__brand p{margin:var(--s3) 0; font-size:.95rem; max-width:28ch}
/* the multicolour logo sits on a white chip on navy, as partner logos do */
.ftr__logo{display:inline-block; background:#fff; border-radius:var(--r-sm); padding:8px 14px}
.ftr__logo img{height:56px; width:auto}
.ftr__stripe{display:flex}
.ftr .ftr__h{color:#fff; margin-bottom:var(--s3); font:600 .8rem/1.3 "Instrument Sans",system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase}
.ftr a{color:#C9D2E3; text-decoration:none}
.ftr a:hover{color:#fff; text-decoration:underline}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li{margin-bottom:var(--s2); font-size:.95rem}
.ftr__base{
  margin-top:var(--s7); padding:var(--s4) 0; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); justify-content:space-between;
  font-size:.85rem; color:#9FB0CB;
}
.ftr__base a{color:#9FB0CB}

/* ------------------------------------------------------------------- misc -- */
.arealist{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--s5); margin:var(--s4) 0 0}
.arealist a{
  display:flex; justify-content:space-between; gap:var(--s3); padding:13px 0;
  border-bottom:1px solid var(--rule-2); text-decoration:none; color:var(--ink); font-weight:500;
}
.arealist a::after{content:"\2192"; color:var(--ink-2)}
.arealist a:hover{color:var(--blue)}
.prose h2{margin-top:var(--s6)}
.prose h2:first-child{margin-top:0}
.measure h2{margin-top:var(--s6)}
.measure h2:first-child{margin-top:0}
.cols p+h2{margin-top:var(--s6)}
.sectionhead{display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6); align-items:flex-end; justify-content:space-between}
.sectionhead>div:first-child{flex:1 1 420px}
.sectionhead__aside{display:flex; flex-wrap:wrap; gap:var(--s2)}
.swatch{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s2)}
.swatch__chip{width:40px; height:40px; border-radius:12px; border:1px solid var(--rule); flex-shrink:0}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:1100px){
  .hdr__in{padding:6px 6px 6px 18px}
  .hdr__logo img{height:42px}
  .navtoggle{
    display:inline-flex; align-items:center; gap:var(--s2); background:var(--ink); color:#fff;
    border:none; border-radius:999px; padding:12px 20px; font:600 .95rem/1.2 "Instrument Sans",system-ui,sans-serif;
    cursor:pointer;
  }
  .hdr__nav{
    display:none; position:fixed; inset:0 0 0 auto; width:min(370px,88vw);
    background:#fff; padding:var(--s4); box-shadow:-20px 0 60px -30px rgba(20,40,74,.5);
    overflow-y:auto; flex-direction:column; align-items:stretch; gap:var(--s2);
  }
  .hdr[data-open="true"] .hdr__nav{display:flex}
  .hdr__nav>ul{flex-direction:column; align-items:stretch; width:100%; gap:2px}
  .navlink{width:100%; justify-content:space-between; padding:13px var(--s3)}
  .megapanel,.megapanel--4,.megapanel--3{
    position:static; width:auto; max-width:none; border:none; border-radius:0; box-shadow:none;
    padding:var(--s2) 0 var(--s2) var(--s2); background:transparent;
  }
  .megapanel--simple{width:auto; padding:var(--s2) 0 var(--s2) var(--s2)}
  .mega__grid,.megapanel--4 .mega__grid,.megapanel--3 .mega__grid{grid-template-columns:1fr; gap:8px}
  .hdr .btn{width:100%; margin-top:var(--s3)}
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__brand{grid-column:1 / -1}
  .finder--few .panel{grid-template-columns:minmax(0,1fr)}
  .finder--few .panel__img img{aspect-ratio:4/3; min-height:0}
  .finder--few .panel__body{padding:18px 12px 10px}
}
@media (max-width:980px){
  .hero__grid,.split,.about,.panelbox,.fundbox,.pagehead__grid--photo{grid-template-columns:minmax(0,1fr)}
  /* narrower than the photo, so its rounded corner never meets the photo's own */
  .hero__card{margin-top:-80px; margin-right:28%; padding-top:32px}
  .hero__facts{padding-top:0}
  .split__intro{position:static}
  .about__photo img{aspect-ratio:4/3}
  .pagehead__photo{order:-1; min-height:0}
  .pagehead__photo img{min-height:0; aspect-ratio:16/9; height:auto}
  .contactcols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5) var(--s5)}
  .arealist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .hero__card{margin:0; padding:28px 0 0; border-radius:0}
  .hero__photo img{border-radius:24px}
  .finder--stagger{grid-template-columns:minmax(0,1fr); padding-bottom:0}
  .finder--stagger>.panel:nth-child(even){transform:none}
  .arealist{grid-template-columns:minmax(0,1fr)}
  .commit{grid-template-columns:minmax(0,1fr)}
  .contactcols{grid-template-columns:minmax(0,1fr)}
  .ftr__grid{gap:var(--s5) var(--s4)}
  :root{--r-lg:24px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}