/* Fonts are self-hosted (SIL Open Font License, see /fonts/OFL-*.txt). */
@font-face{font-family:'Fraunces';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/Fraunces-500-soft50-latin.woff) format('woff')}
@font-face{font-family:'Figtree';font-weight:300 900;font-style:normal;font-display:swap;src:url(/fonts/Figtree-var-latin.woff) format('woff')}

body{margin:0;background:#FFFFFF}
a{color:#010066}a:hover{color:#16168A}
*{box-sizing:border-box}
:focus-visible{outline:2px solid #4646B3;outline-offset:2px}
.on-blue :focus-visible{outline-color:#FFCC00}
input,select,button{font:inherit;color:inherit}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details[open] .faq-plus{transform:rotate(45deg)}

/* Scroll and entrance motion (after scroll-craft's taste floor): transform + opacity only,
   14px rise, ease-out, plays once on load or is tied to the hand while scrolling. */
@keyframes nm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes nm-card{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes nm-rule{from{background-size:0% 4px}to{background-size:100% 4px}}
@keyframes nm-drift{from{transform:none}to{transform:translateY(-64px)}}
@media (prefers-reduced-motion:no-preference){
  .ld{animation:nm-rise 620ms cubic-bezier(.23,1,.32,1) backwards}
  .ld-2{animation-delay:70ms}.ld-3{animation-delay:200ms}.ld-4{animation-delay:270ms}
  .ld-card{animation:nm-card 760ms cubic-bezier(.23,1,.32,1) 360ms backwards}
  .rule{animation:nm-rule 640ms cubic-bezier(.23,1,.32,1) 640ms backwards}
  @supports (animation-timeline:view()){
    .rv{animation:nm-rise linear both;animation-timeline:view();animation-range:entry 0px entry 200px}
    @media (min-width:1024px){
      .hero-drift{animation:nm-drift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    }
  }
}

/* Form: +60 phone group focus ring, and a short shake on fields that fail when "Register my interest" is pressed.
   Two identical keyframes so the shake replays on every failed submit. */
.ph:focus-within{outline:2px solid #4646B3;outline-offset:2px}
@keyframes shake-x{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@keyframes shake-x2{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@media (prefers-reduced-motion:no-preference){
  .shk-a{animation:shake-x .45s cubic-bezier(.36,.07,.19,.97) both}
  .shk-b{animation:shake-x2 .45s cubic-bezier(.36,.07,.19,.97) both}
}

/* Verified badge on the example listing, with a tooltip on hover or keyboard focus */
.vbadge{position:relative;display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#010066;color:#FFFFFF;cursor:help;outline-offset:3px}
.vbadge::after{content:attr(data-tip);position:absolute;right:-6px;bottom:calc(100% + 8px);white-space:nowrap;padding:6px 10px;border-radius:6px;background:#13142B;color:#FFFFFF;font:600 12px/1.2 'Figtree',ui-sans-serif,system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity 150ms cubic-bezier(.2,0,0,1)}
.vbadge:hover::after,.vbadge:focus::after{opacity:1}

/* Featured categories: three image cards, one column on tablet and phone */
.cat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cat-card{aspect-ratio:4/5}
/* Reserve the same height for every description so the three titles line up. */
.cat-desc{min-height:3em}
.cat-btn{transition:background-color 150ms cubic-bezier(.2,0,0,1)}
.cat-btn:hover{background:#FFD21F !important}
@media (max-width:900px){.cat-grid{grid-template-columns:1fr;gap:16px}.cat-card{aspect-ratio:auto;min-height:360px}.cat-desc{min-height:0}}

/* Hero: copy left, example listing right; card drops below the copy under 1024px */
/* Listing section: three pieces on one grid, in reading order (heading + intro, the example card, the three points).
   Desktop: copy on the left, the card on the right spanning its height, as before. Under 1000px it is one column
   in that order, so on phones the card sits straight after the intro line. */
.lst-grid{display:grid;grid-template-columns:minmax(0,560px) minmax(440px,1fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:". card" "head card" "points card" ". card";column-gap:80px}
.lst-head{grid-area:head}.lst-card{grid-area:card;align-self:center;justify-self:center;width:100%;max-width:440px;min-width:0}.lst-points{grid-area:points}
@media (max-width:999px){
  .lst-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "card" "points";row-gap:32px}
  .lst-head{max-width:560px}
  .lst-card{width:100%;max-width:440px;justify-self:center}
  .lst-points{margin-top:0 !important}
}
.hero-grid{display:flex;flex-wrap:wrap;gap:56px 64px;align-items:center}
.hero-copy{flex:1 1 560px;min-width:0}
.hero-card{flex:0 1 420px;min-width:0}
@media (max-width:1023px){.hero-card{flex-basis:100%;max-width:440px}}
.hero-card :focus-visible{outline-color:#4646B3}

/* Category cards: motion. Border, shadow, one light sweep, arrow nudge. Text never moves while hovered. */
.fb-card{transition:border-color 220ms cubic-bezier(.2,0,0,1),box-shadow 220ms cubic-bezier(.2,0,0,1),transform 120ms cubic-bezier(.2,0,0,1)}
.fb-shine{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.fb-shine::before{content:'';position:absolute;top:0;left:0;width:45%;height:100%;transform:translateX(-160%) skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,204,0,.16),transparent)}
.fb-arrow{transition:transform 180ms cubic-bezier(0,0,.2,1)}
.fb-link{transition:background-color 150ms cubic-bezier(.2,0,0,1)}
.fb-card:focus-within{border-color:#FFCC00 !important;box-shadow:0 4px 10px rgba(1,0,102,.12),0 28px 64px rgba(1,0,102,.22) !important}
.fb-link:focus-visible .fb-arrow{transform:translateX(3px)}
.fb-link:hover{background:#E6E6F7 !important}
@media (hover:hover){
  .fb-card:hover{border-color:#FFCC00 !important;box-shadow:0 4px 10px rgba(1,0,102,.12),0 28px 64px rgba(1,0,102,.22) !important}
  .fb-card:hover .fb-shine::before{transform:translateX(330%) skewX(-18deg);transition:transform 700ms cubic-bezier(.65,0,.35,1)}
  .fb-card:hover .fb-arrow{transform:translateX(3px)}
}
.fb-card:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){
  .fb-card,.fb-arrow{transition:none}
  .fb-shine{display:none}
  .fb-card:active{transform:none}
  .fb-card:hover .fb-arrow,.fb-link:focus-visible .fb-arrow{transform:none}
}

/* Example listing card (v5). One cover photo, a name block, the three facts as an icon list, one action.
   Hover: border and shadow deepen, the photo eases in, the arrow nudges. Text never moves. */
.nc-card{position:relative;display:flex;flex-direction:column;border-radius:18px;background:#FFFFFF;border:1px solid #DCDCE6;box-shadow:0 1px 2px rgba(19,20,43,.06),0 20px 44px -16px rgba(19,20,43,.22);color:#3A3C50;transition:border-color 220ms cubic-bezier(.2,0,0,1),box-shadow 220ms cubic-bezier(.2,0,0,1)}
.nc-cover{position:relative;overflow:hidden;aspect-ratio:3/2;border-radius:17px 17px 0 0;background:#E9E6DF}
.nc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;transition:transform 420ms cubic-bezier(.2,0,0,1)}
.nc-tag{position:absolute;top:14px;left:14px;margin:0;display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 9px;border-radius:999px;background:#010066;color:#FFFFFF;font-size:11px;font-weight:700;letter-spacing:.09em;line-height:1.2;text-transform:uppercase}
.nc-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:#FFCC00}
.nc-body{display:flex;flex-direction:column;padding:22px 26px 26px}
.nc-name{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:500;font-variation-settings:'SOFT' 50,'WONK' 0;font-size:30px;line-height:1.1;letter-spacing:-.01em;color:#010066;text-wrap:balance}
.nc-meta{margin:8px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px;line-height:1.4;color:#515368}
.nc-meta-place{display:inline-flex;align-items:center;gap:5px;color:#13142B;font-weight:500}
.nc-dot{width:3px;height:3px;border-radius:50%;background:#9A9CB0}
.nc-desc{margin:16px 0 0;font-size:15px;line-height:1.6;color:#3A3C50;text-wrap:pretty}
.nc-facts{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid #EBEBF1;display:grid;gap:10px}
.nc-facts li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.4;font-weight:500;color:#13142B}
.nc-facts svg{flex:none;color:#010066}
a.nc-cta{margin-top:24px;height:52px;border-radius:10px;background:#010066;color:#FFFFFF;text-decoration:none;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;transition:background-color 150ms cubic-bezier(.2,0,0,1)}
a.nc-cta:hover{background:#16168A;color:#FFFFFF}
.nc-cta:focus-visible{outline:2px solid #4646B3;outline-offset:3px}
.nc-arrow{color:#FFCC00;transition:transform 180ms cubic-bezier(0,0,.2,1)}
.nc-card:focus-within{border-color:#B9B9D6}
.nc-cta:focus-visible .nc-arrow{transform:translateX(3px)}
@media (hover:hover){
  .nc-card:hover{border-color:#B9B9D6;box-shadow:0 2px 4px rgba(19,20,43,.06),0 28px 56px -18px rgba(19,20,43,.30)}
  .nc-card:hover .nc-img{transform:scale(1.04)}
  .nc-card:hover .nc-arrow{transform:translateX(3px)}
}
@media (max-width:599px){
  .nc-cover{aspect-ratio:16/9}
  .nc-body{padding:20px 20px 22px}
  .nc-name{font-size:27px}
  .nc-meta{flex-direction:column;align-items:flex-start;gap:6px}
  .nc-dot{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nc-card,.nc-img,.nc-arrow,.nc-cta{transition:none}
  .nc-card:hover .nc-img{transform:none}
  .nc-card:hover .nc-arrow,.nc-cta:focus-visible .nc-arrow{transform:none}
}

/* ── v2: illustrated header, hero and footer ───────────────────────── */
/* Segmented pill nav (logo | links | CTA). Under 760px the links and CTA move into a Menu pill. */
.pill{transition:background-color 150ms cubic-bezier(.2,0,0,1),box-shadow 150ms cubic-bezier(.2,0,0,1)}
.mnav-panel .navlink:hover{background:#F3F3FB}
.pill-links .navlink:hover{background:rgba(255,255,255,.12)}
.pill-cta:hover{background:#FFD21F !important}
.hero-primary:hover{background:#FFD21F !important}
.hero-secondary:hover{background:rgba(255,255,255,.14) !important}
.mnav{display:none;position:relative}
.mnav summary::-webkit-details-marker{display:none}
.mnav-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(280px,calc(100vw - 32px));z-index:10}
@media (max-width:759px){
  .pillnav{justify-content:space-between !important}
  .pill-links,.pill-cta{display:none !important}
  .mnav{display:block}
}
/* Painted artwork: full-bleed, faded into the page at the top and bottom. Text sits on the sky. */
.art-wrap{position:relative;overflow:hidden;aspect-ratio:16/9;margin-top:-19vw}
.art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}
.foot-art{position:relative;overflow:hidden;aspect-ratio:16/7;margin-top:-5vw}
@media (max-width:1023px){.foot-grid{justify-content:flex-start !important}}
@media (max-width:759px){
  .art-wrap{aspect-ratio:auto;height:520px;margin-top:-330px}
  .art-wrap .art-img{object-position:50% 100%}
  .foot-art{aspect-ratio:auto;height:300px;margin-top:-56px}
  .foot-art .art-img{object-position:72% 100%}
}
/* Hero fits one screen (760px and up): one centred column of copy over the plain sky, and the 3:1 street
   panorama (4800x1600) fills whatever height is left under it. The street is the bottom quarter of the picture
   (skyline about 75% down), so the picture is sized by that space, not by screen width: it zooms into the
   middle of the street, keeping the lorry and corner shop centred, and the skyline always lands under the copy.
   Its sky is the page navy (#010857), so the two join without a seam. It scales up from its bottom edge. */
.art-frame{position:absolute;inset:0}
.hero .hero-sink{transform-origin:50% 100%}
@media (min-width:760px){
  .hero{display:flex;flex-direction:column;min-height:clamp(600px,100vh,1080px);min-height:clamp(600px,100svh,1080px)}
  .hero .pillnav,.hero-copy{flex:none}
  .hero-copy{padding-top:clamp(28px,6vh,72px) !important}
  .hero-copy h1{font-size:clamp(2.25rem,min(4.2vw,7.5vh),4.75rem) !important;max-width:18.5ch !important}
  .hero .art-wrap{flex:1 1 0;min-height:150px;aspect-ratio:auto;margin-top:0;overflow:visible;z-index:0;container-type:size;container-name:stage}
  .art-frame{inset:auto;--fh:min(386cqh,90cqw);--fw:calc(var(--fh) * 3);height:var(--fh);width:var(--fw);bottom:0;
    left:calc((100cqw - var(--fw)) / 2)}
  /* Portrait tablets: a shorter header, so the street isn't stranded below a tall empty sky. */
  @media (max-aspect-ratio:1/1){.hero{min-height:clamp(600px,70svh,900px)}}
  @container stage (min-aspect-ratio:11/1){
    .art-frame{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
  }
}
/* Short screens (most laptops): tighten the gaps in the copy block. */
@media (min-width:760px) and (max-height:860px){
  .hero .pillnav{padding-top:14px !important}
  .hero-copy > p:first-child{padding:6px 14px !important}
  .hero-copy h1{margin-top:clamp(14px,2.4vh,28px) !important;font-size:clamp(2.25rem,min(4.2vw,6.6vh),4.75rem) !important}
  .hero-copy h1 + p{margin-top:clamp(12px,2vh,24px) !important}
  .hero-copy .ld-4{margin-top:clamp(16px,2.6vh,32px) !important;gap:8px !important}
  .hero .art-frame{--fh:min(370cqh,90cqw)}
}
/* Motion: the artwork fades up once on load, then sinks slightly as you scroll (desktop only). */
@keyframes nm-art{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes nm-sink{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.06) translateY(5%)}}
@media (prefers-reduced-motion:no-preference){
  .ld-art{animation:nm-art 1100ms cubic-bezier(.23,1,.32,1) 240ms backwards}
  @supports (animation-timeline:scroll()){
    @media (min-width:760px){.hero-sink{animation:nm-sink linear both;animation-timeline:scroll(root);animation-range:0 100vh}}
  }
}
.news-btn:hover{background:#16168A !important}
.foot-link{text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── v7: legal strip at the foot of the footer ───────────────────────── */
/* Registration line on the left, legal links on the right; one line from 1024px, stacked below that.
   Separators are drawn 1px rules, hidden from screen readers. */
.fl-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:40px;border-top:1px solid rgba(255,255,255,.16);padding:10px 0}
.fl-id{margin:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:2px;font-size:13px;line-height:1.5;color:#ADADDC;padding:12px 0}
.fl-sep{flex:none;width:1px;height:14px;background:rgba(255,255,255,.28)}
.fl-links{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.fl-links li{display:flex;align-items:center}
.fl-links li+li::before{content:'';flex:none;width:1px;height:14px;margin:0 14px;background:rgba(255,255,255,.28)}
.fl-links a{color:#DCDCF4;min-height:44px;display:inline-flex;align-items:center;font-size:13px;font-weight:500}
.fl-links a:hover{color:#FFFFFF}
.news-note a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
.news-note a:hover{color:#FFFFFF;text-decoration-color:#FFCC00}
@media (max-width:1023px){
  .fl-row{flex-direction:column;align-items:flex-start;row-gap:8px;padding:14px 0 6px}
  .fl-id{padding:0}
}
@media (max-width:599px){
  .fl-id{flex-direction:column;align-items:flex-start}
  .fl-id .fl-sep{display:none}
  .fl-links{margin-left:0}
}
.foot-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ── v6: Impeccable review pass ───────────────────────────── */
/* Benefits: an open list instead of boxed tiles; the icon sits beside the heading. */
.bn-item{display:grid;grid-template-columns:24px minmax(0,1fr);align-content:start;column-gap:14px;row-gap:6px;padding:20px 0 24px;border-top:1px solid #DCDCE6}
.bn-icon{grid-column:1;grid-row:1;height:26px;display:grid;place-items:center;color:#010066}
.bn-item > h3,.bn-item > p{grid-column:2}
/* Footer email: a visible focus ring around the field (the input itself has none). */
#news-box:focus-within{outline:2px solid #FFCC00;outline-offset:3px}
/* Phone menu: the icon turns into a close icon while the menu is open. */
.mnav .mi-close{display:none}
.mnav[open] .mi-open{display:none}
.mnav[open] .mi-close{display:block}
.mnav[open] > summary{background:rgba(255,255,255,.18) !important}
/* Verified badge: a 44px tap area around the 20px mark. */
.vbadge::before{content:'';position:absolute;inset:-12px}
/* Register: the planning column stays beside the long form on wide screens. */
@media (min-width:1024px){.reg-aside{position:sticky;top:32px}}
/* Phone: the discovery options fit on one line. */
@media (max-width:420px){.found-tile{padding:0 10px !important;gap:8px !important;font-size:14px !important}}

/* ── Production additions ───────────────────────────────────────────── */
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Hidden field that only bots fill in. Kept off-screen rather than display:none, which some bots skip. */
.hp-field{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden}
/* Turnstile bot check: invisible unless Cloudflare needs the visitor to tick a box. */
.ts-slot:empty{display:none}
.ts-slot{display:flex;justify-content:center}
button[aria-busy="true"]{cursor:progress;opacity:.75}