/* ZERO FAFF location pages (e.g. /marketing-agency-bishop-auckland): the case study chapters (our-work/case.css), with a
   drawn town scene, a selection box round the place name, and an animated illustration for each service.
   Copy for another town: duplicate the page, change the words and the scene; nothing here is specific to one place. */
.ch[data-w="navy"]{--bg:#26364A;--fg:var(--canvas);--mute:rgba(244,241,234,.74);--line:rgba(244,241,234,.15);--line-strong:rgba(244,241,234,.42);--accent:var(--blue);--accent-ink:var(--ink);--sh:#0E151E}

/* ---------- the opening ---------- */
.loc-hero .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.kick-line{font-size:clamp(18px,1.9vw,28px);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:clamp(10px,1.4vw,18px)}
.kick-line .s{font-size:.74em}
.place{position:relative;display:inline-block;padding:.12em .2em .04em;margin-left:-.2em}
.loc .title{font-size:clamp(60px,8.6vw,150px)}
.loc .title .line{display:block}
/* on shorter desktop screens (a 1440 × 900 laptop) the opening is pulled up and the name set a little smaller, so the
   buttons clear the timeline along the bottom */
@media (min-width:981px){
  .loc-hero .hero{padding-top:clamp(20px,min(7vw,4vh),90px)}
  .loc .title{font-size:clamp(60px,min(8.6vw,13vh),150px)}
  .loc-hero .scroll-cue{display:none} /* the timeline and "What we do" already say there is more; the cue would sit on the timeline */
}
@media (min-width:981px) and (max-height:880px){
  .loc .title{font-size:clamp(60px,min(8.6vw,12vh),150px)}
  .loc-hero .sub{margin-top:14px;font-size:min(46px,5.2vh)}
  .loc-hero .squig{margin-top:10px;width:auto;height:22px}
  .loc-hero .intro{margin-top:14px}
  .loc-hero .loc-acts{margin-top:20px}
}
/* the design-tool selection box, drawn round the town's name as on the home page */
.pbox{position:absolute;inset:0;border:2px solid var(--blue);pointer-events:none;clip-path:inset(0 100% 100% 0);animation:pbox 1.1s cubic-bezier(.65,0,.25,1) 1.15s forwards}
.pbox i{position:absolute;width:11px;height:11px;background:var(--canvas);border:2px solid var(--blue)}
.pbox i:nth-child(1){left:-6px;top:-6px}.pbox i:nth-child(2){right:-6px;top:-6px}.pbox i:nth-child(3){left:-6px;bottom:-6px}.pbox i:nth-child(4){right:-6px;bottom:-6px}
.pbox em{position:absolute;right:-2px;top:-34px;padding:3px 7px;border-radius:5px;background:var(--blue);color:var(--ink);font-style:normal;font-size:12px;font-weight:800;letter-spacing:.04em;opacity:0;animation:fade .3s ease 2.15s forwards}
@keyframes pbox{0%{clip-path:inset(0 100% 100% 0)}55%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 0 0)}}
.loc-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px);opacity:0;animation:fade .7s ease 1.1s forwards}
.loc-acts.center{justify-content:center}
.btn-loc{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 22px 0 24px;border:2.5px solid var(--ink);border-radius:999px;background:var(--brass);color:var(--ink);font-size:18px;font-weight:850;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;box-shadow:4px 4px 0 var(--ink);transition:transform .2s,box-shadow .2s,background .2s}
.btn-loc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.btn-loc:hover,.btn-loc:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn-loc:hover svg{transform:translateX(4px)}
.btn-loc.ghost{background:var(--paper)}

/* the town, drawn. Shared by every town page; the moving parts below belong to particular towns */
.town{position:relative;margin:0;opacity:0;animation:drop .9s cubic-bezier(.2,.9,.25,1.15) .35s forwards}
.town-svg{display:block;width:100%;height:auto;filter:drop-shadow(12px 12px 0 var(--sh));transform:rotate(1.6deg)}
.town .draw{stroke-dasharray:1 2;stroke-dashoffset:1;animation:line 1.6s cubic-bezier(.6,0,.2,1) .8s forwards}
@keyframes line{to{stroke-dashoffset:0}}
.town .castle path[fill="#D7D0C5"]{fill-opacity:0;animation:fillin .6s ease 1.8s forwards}
.town .viaduct path[fill="#B18A57"]{fill-opacity:0;animation:fillin .6s ease 1.9s forwards}
@keyframes fillin{to{fill-opacity:1}}
.town .flag{transform-box:fill-box;transform-origin:0 50%;opacity:0;animation:flag 1.4s ease-in-out infinite,show .4s ease 2.5s forwards}
/* the door, windows and flagpole arrive once the castle is drawn and filled */
.town .castle .late{opacity:0;animation:show .4s ease 2.3s forwards}
@keyframes show{to{opacity:1}}
@keyframes flag{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-8deg) scaleX(.86)}}
.town .cloud-a{animation:cloudx 34s linear -12s infinite}
.town .cloud-b{animation:cloudx 48s linear -22s infinite}
@keyframes cloudx{from{transform:translateX(-420px)}to{transform:translateX(560px)}}
.town .sun{transform-box:fill-box;transform-origin:center;animation:sun 4s ease-in-out infinite}
@keyframes sun{50%{transform:scale(1.08)}}
.town .ripples path{animation:ripple 3s ease-in-out infinite}
.town .ripples path:nth-child(2n){animation-delay:-1.5s}
@keyframes ripple{50%{transform:translateX(14px);opacity:.3}}
.town .town-van{animation:vanx 9s linear 2.4s infinite;transform:translateX(580px)}
@keyframes vanx{0%{transform:translateX(580px)}100%{transform:translateX(-80px)}}
.town .t-birds{animation:birds 5s ease-in-out infinite}
@keyframes birds{50%{transform:translate(18px,-8px)}}
/* any town: outlines with class "fillin" fill in after they're drawn; details with class "late" arrive last */
.town .fillin{fill-opacity:0;animation:fillin .6s ease 1.8s forwards}
.town .late{opacity:0;animation:show .4s ease 2.3s forwards}
/* Chester-le-Street: a train crosses the viaduct, and a ball is hit for six into the Wear */
.town .train{animation:trainx 7s linear 1.6s infinite;transform:translateX(-70px)}
@keyframes trainx{0%{transform:translateX(-70px)}100%{transform:translateX(440px)}}
.town .bat{transform-box:view-box;transform-origin:266px 422px;animation:bat 5s ease-in-out 2.2s infinite;transform:rotate(-55deg)}
@keyframes bat{0%{transform:rotate(-55deg)}4%{transform:rotate(35deg)}22%{transform:rotate(35deg)}40%,100%{transform:rotate(-55deg)}}
.town .splash{transform-box:fill-box;transform-origin:center;opacity:0;animation:splash 5s ease-out 2.4s infinite}
@keyframes splash{0%,41%{opacity:0;transform:scale(.3)}43%{opacity:1}62%,100%{opacity:0;transform:scale(3.2)}}
.town .six{transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:six 5s cubic-bezier(.3,1.6,.5,1) 2.4s infinite}
@keyframes six{0%,40%{opacity:0;transform:scale(.4)}46%,74%{opacity:1;transform:none}80%,100%{opacity:0;transform:scale(.9)}}
/* Sunderland: the Roker lighthouse sweeps its beam, a boat rides the horizon, the gulls glide */
.town .beam{transform-box:view-box;transform-origin:469px 316px;opacity:.55;animation:beam 5s ease-in-out infinite alternate}
@keyframes beam{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
/* the boat drifts slowly along the coast and rocks about its own keel, so it never leaves the water */
.town .boat{animation:boat 30s ease-in-out infinite alternate}
@keyframes boat{0%{transform:translateX(30px)}100%{transform:translateX(-80px)}}
.town .boat > g{transform-box:fill-box;transform-origin:50% 80%;animation:bob 2.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(2.5deg)}50%{transform:rotate(-2.5deg)}}
/* Crook: smoke curls from the chimneys, the sheep graze, a mountain biker rides the forest trail */
.town .smoke circle{transform-box:fill-box;transform-origin:center;opacity:0;animation:smoke 4s ease-out infinite}
.town .smoke circle{animation-delay:2.7s}.town .smoke circle:nth-child(2){animation-delay:4s}.town .smoke circle:nth-child(3){animation-delay:5.3s}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.85}100%{opacity:0;transform:translate(16px,-44px) scale(1.7)}}
.town .sheep{transform-box:fill-box;transform-origin:50% 100%;animation:graze 3.4s ease-in-out infinite}
.town .sheep:nth-of-type(2){animation-delay:-1.2s}.town .sheep:nth-of-type(3){animation-delay:-2.3s}
@keyframes graze{0%,100%{transform:none}50%{transform:translateY(1px) rotate(-3deg)}}
.pin{position:absolute;left:17.25%;top:42.4%;width:8%;opacity:0;transform:translateY(-160%);animation:pin .8s cubic-bezier(.3,1.5,.5,1) 2.3s forwards;text-align:center}
.pin svg{display:block;width:100%;height:auto;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.25))}
.pin span{position:absolute;left:50%;top:-30px;transform:translateX(-50%);white-space:nowrap;padding:4px 9px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;box-shadow:2px 2px 0 var(--ink)}
@keyframes pin{to{opacity:1;transform:none}}
.stamp-badge{position:absolute;left:-4%;bottom:6%;display:grid;place-items:center;align-content:center;gap:5px;width:clamp(96px,10vw,128px);aspect-ratio:1;border:3px dashed var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);text-align:center;transform:rotate(-12deg);box-shadow:0 0 0 6px var(--paper),5px 5px 0 6px var(--ink);opacity:0;animation:stamp .5s cubic-bezier(.3,1.6,.5,1) 2.9s forwards}
.stamp-badge b{display:block;font-size:clamp(26px,2.8vw,36px);font-weight:900;line-height:.9}
.stamp-badge span{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;padding:0 14px}
@keyframes stamp{0%{opacity:0;transform:rotate(-12deg) scale(2.4)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}

/* ---------- the areas page (/areas): the North East drawn to scale, and a card for each town ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.area-map{position:relative;margin:0;opacity:0;animation:drop .9s cubic-bezier(.2,.9,.25,1.15) .35s forwards}
.map-svg{display:block;width:100%;height:auto;filter:drop-shadow(12px 12px 0 var(--sh));transform:rotate(-1.2deg)}
.map-svg text{font-family:"Big Shoulders",system-ui,sans-serif}
.m-sea-label{font-size:26px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;fill:#DCE8EC}
.m-ring-label{font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;fill:rgba(17,23,27,.55)}
.m-river-labels text{font-size:15px;font-weight:700;font-style:italic;letter-spacing:.05em;fill:#4F86A6}
.m-shield text{font-size:15px;font-weight:900;letter-spacing:.04em;fill:#FBF9F5}
.m-places circle{fill:#11171B}
.m-places text{font-size:17px;font-weight:700;fill:rgba(17,23,27,.78);paint-order:stroke;stroke:#EFE9DC;stroke-width:5px;stroke-linejoin:round}
.m-home-label{font-size:30px;font-weight:900;text-transform:uppercase;fill:#11171B;paint-order:stroke;stroke:#EFE9DC;stroke-width:6px;stroke-linejoin:round}
.m-home-sub{font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;fill:#7A4A33;paint-order:stroke;stroke:#EFE9DC;stroke-width:5px}
.m-pin text{font-size:21px;font-weight:900;text-transform:uppercase;fill:#6E2F40;paint-order:stroke;stroke:#EFE9DC;stroke-width:6px;stroke-linejoin:round;transition:fill .2s}
.m-pin:hover text,.m-pin:focus-visible text{fill:#11171B;text-decoration:underline}
.m-pin:focus-visible{outline:none}
.m-compass text{font-size:15px;font-weight:900;fill:#11171B}
.m-legend text{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;fill:#11171B}
/* the map comes to life: rivers run, the rings spread from Durham, the pins drop, the home star pulses */
.m-rivers path{stroke-dasharray:1 2;stroke-dashoffset:1;animation:line 1.6s cubic-bezier(.6,0,.2,1) .9s forwards}
.m-rings circle{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:ring .9s cubic-bezier(.2,1.2,.4,1) forwards}
.m-rings .r1{animation-delay:1.3s}.m-rings .r2{animation-delay:1.5s}
@keyframes ring{to{transform:none}}
.m-ring-label,.m-places,.m-river-labels,.m-shield,.m-legend,.m-compass{opacity:0;animation:fadein .5s ease 1.9s forwards}
@keyframes fadein{to{opacity:1}}
.m-home{opacity:0;animation:fadein .4s ease 1.1s forwards}
.m-pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out 1.6s infinite;opacity:0}
@keyframes pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.m-pin{opacity:0;transform:translateY(-60px);animation:mpin .7s cubic-bezier(.3,1.5,.5,1) 2.1s forwards}
@keyframes mpin{to{opacity:1;transform:none}}
.m-pin:nth-of-type(2){animation-delay:2.25s}.m-pin:nth-of-type(3){animation-delay:2.4s}.m-pin:nth-of-type(4){animation-delay:2.55s}.m-pin:nth-of-type(5){animation-delay:2.7s}
.sec-lede{margin:-12px 0 clamp(28px,3.4vw,44px);max-width:52ch;font-size:clamp(19px,1.6vw,23px);line-height:1.4;color:var(--mute)}
.tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:22px;max-width:1000px}
.tcard{position:relative;display:flex;flex-direction:column;gap:8px;min-height:250px;padding:24px 24px 22px;border:var(--border);border-radius:24px;background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:6px 6px 0 var(--ink);transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s}
.tcard:hover,.tcard:focus-visible{transform:translate(-2px,-4px) rotate(-.5deg);box-shadow:9px 9px 0 var(--ink)}
.t-stamp{position:absolute;right:-12px;top:-24px;display:grid;place-items:center;width:74px;aspect-ratio:1;border:2.5px dashed var(--ink);border-radius:50%;background:var(--paper);box-shadow:0 0 0 5px var(--paper),3px 3px 0 5px var(--ink);transform:rotate(10deg);font-size:21px;font-weight:900}
.t-k{padding-right:60px;font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.t-name{font-family:"Melodrama",serif;font-weight:500;font-size:clamp(36px,3.4vw,48px);line-height:.98}
.t-line{font-size:17px;line-height:1.4;opacity:.8;max-width:36ch}
.t-go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;padding:8px 14px 8px 16px;border:2.5px solid var(--ink);border-radius:999px;background:var(--brass);font-size:14px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.t-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.t-next{background:transparent;border-style:dashed;box-shadow:none}
.t-next:hover,.t-next:focus-visible{background:var(--paper);box-shadow:6px 6px 0 var(--ink)}
.t-next .t-go{background:var(--paper)}
.a-far{margin-top:18px;font-size:17px;font-weight:600;color:var(--mute)}

/* ---------- who we are ---------- */
.promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.promise{padding:20px 18px 18px;border:var(--border);border-radius:18px;background:var(--paper);box-shadow:6px 6px 0 var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.promise b{display:block;margin-top:10px;font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.02em}
.promise p{margin-top:4px;font-size:16.5px;line-height:1.35;color:rgba(17,23,27,.72)}
.p-ico{display:block;width:46px;height:46px}
.p-ico svg{width:100%;height:100%;overflow:visible}
[data-anim] .promise{opacity:0;transform:translateY(26px) rotate(-1.5deg)}
[data-anim].on .promise{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,1.3,.4,1)}
[data-anim].on .promise:nth-child(2){transition-delay:.1s}[data-anim].on .promise:nth-child(3){transition-delay:.2s}[data-anim].on .promise:nth-child(4){transition-delay:.3s}
.promise:hover{transform:translate(-2px,-3px) rotate(-.6deg)!important}
.promise:hover .p-ico{animation:wiggle .5s ease}
@keyframes wiggle{25%{transform:rotate(-10deg)}75%{transform:rotate(8deg)}}

/* ---------- the service icons (drawn once, used in the menu and the headings) ---------- */
.m-ico,.h-ico{display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:center}
.i-social{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect x='12' y='4' width='24' height='40' rx='5' fill='%237FB0CC' stroke='%2311171B' stroke-width='3'/><path d='M24 32 C17 27 17 21 21 21 C23 21 24 23 24 23 C24 23 25 21 27 21 C31 21 31 27 24 32 Z' fill='%23F4F1EA' stroke='%2311171B' stroke-width='2.5' stroke-linejoin='round'/><path d='M21 9 H27' stroke='%2311171B' stroke-width='2.5' stroke-linecap='round'/></svg>")}
.i-ads{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><circle cx='22' cy='26' r='17' fill='%23F4F1EA' stroke='%2311171B' stroke-width='3'/><circle cx='22' cy='26' r='10' fill='%236E2F40' stroke='%2311171B' stroke-width='3'/><circle cx='22' cy='26' r='3.5' fill='%23B18A57' stroke='%2311171B' stroke-width='2.5'/><path d='M22 26 L41 7' stroke='%2311171B' stroke-width='3' stroke-linecap='round'/><path d='M36 5 L44 4 L43 12 Z' fill='%237FB0CC' stroke='%2311171B' stroke-width='2.5' stroke-linejoin='round'/></svg>")}
.i-web{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect x='4' y='8' width='40' height='32' rx='5' fill='%23F4F1EA' stroke='%2311171B' stroke-width='3'/><path d='M4 16 H44' stroke='%2311171B' stroke-width='3'/><circle cx='9' cy='12' r='1.6' fill='%2311171B'/><circle cx='14' cy='12' r='1.6' fill='%2311171B'/><rect x='10' y='21' width='16' height='5' rx='2' fill='%237FB0CC' stroke='%2311171B' stroke-width='2'/><rect x='10' y='30' width='11' height='5' rx='2.5' fill='%23B18A57' stroke='%2311171B' stroke-width='2'/><path d='M30 24 L30 37 L33.5 34 L36 39 L38 38 L35.5 33 L40 33 Z' fill='%2311171B' stroke='%23F4F1EA' stroke-width='1.2' stroke-linejoin='round'/></svg>")}
.i-brand{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect x='5' y='14' width='14' height='28' rx='3' fill='%237FB0CC' stroke='%2311171B' stroke-width='3' transform='rotate(-16 12 28)'/><rect x='17' y='10' width='14' height='30' rx='3' fill='%23B18A57' stroke='%2311171B' stroke-width='3'/><rect x='29' y='14' width='14' height='28' rx='3' fill='%236E2F40' stroke='%2311171B' stroke-width='3' transform='rotate(16 36 28)'/></svg>")}
.i-crm{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M12 12 C26 12 22 36 36 36' fill='none' stroke='%2311171B' stroke-width='3' stroke-dasharray='2 5' stroke-linecap='round'/><circle cx='11' cy='12' r='7' fill='%237FB0CC' stroke='%2311171B' stroke-width='3'/><circle cx='24' cy='24' r='5' fill='%23F4F1EA' stroke='%2311171B' stroke-width='3'/><circle cx='37' cy='36' r='7' fill='%2346553A' stroke='%2311171B' stroke-width='3'/><path d='M34 36 L36.5 38.5 L40.5 33.5' fill='none' stroke='%23F4F1EA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.i-strat{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M6 10 L17 6 L31 11 L42 7 V38 L31 42 L17 37 L6 41 Z' fill='%23D7D0C5' stroke='%2311171B' stroke-width='3' stroke-linejoin='round'/><path d='M17 6 V37 M31 11 V42' stroke='%2311171B' stroke-width='2'/><path d='M11 32 C16 24 22 30 26 22 S34 16 36 14' fill='none' stroke='%236E2F40' stroke-width='3' stroke-dasharray='3 4' stroke-linecap='round'/><circle cx='36' cy='14' r='3.5' fill='%23B18A57' stroke='%2311171B' stroke-width='2.5'/></svg>")}

/* ---------- the services menu ---------- */
.svc-menu{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.svc-menu a{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:18px 18px 18px 16px;border:var(--border);border-radius:18px;background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:5px 5px 0 var(--ink);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.svc-menu a::after{content:"→";position:absolute;right:16px;top:50%;transform:translate(-6px,-50%);opacity:0;font-size:22px;font-weight:800;transition:all .25s}
.svc-menu a:hover,.svc-menu a:focus-visible{transform:translate(-2px,-3px);box-shadow:8px 8px 0 var(--ink)}
.svc-menu a:hover::after{opacity:1;transform:translate(0,-50%)}
.svc-menu .m-ico{grid-row:1 / 3;width:54px;height:54px;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.svc-menu a:hover .m-ico{transform:rotate(-8deg) scale(1.1)}
.svc-menu b{font-size:clamp(20px,1.8vw,26px);font-weight:900;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.svc-menu span:not(.m-ico){font-size:16px;color:rgba(17,23,27,.66)}

/* ---------- a service chapter ---------- */
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.svc.flip .svc-copy{order:2}
.svc h2{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);margin:18px 0 0;font-family:"Melodrama",serif;font-weight:500;font-size:clamp(40px,4.6vw,76px);line-height:.98;letter-spacing:-.01em}
.h-ico{flex:0 0 auto;width:clamp(48px,4.6vw,72px);height:clamp(48px,4.6vw,72px);background-color:var(--paper);background-size:72%;border:2.5px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--sh)}
.svc-lede{margin-top:clamp(16px,2vw,24px);font-size:clamp(22px,2vw,28px);line-height:1.25;font-weight:620;max-width:30ch;text-wrap:pretty}
.svc .body{margin-top:16px}
.svc .body p{color:var(--mute)}
.svc .body b{color:var(--fg)}
.gets{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.gets li{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border:2px solid var(--line-strong);border-radius:999px;font-size:15px;font-weight:700}
.gets li::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5 L7 11 L12 5' fill='none' stroke='%2311171B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}

/* the illustration card each service sits beside */
.vis{position:relative}
.v-card{position:relative;aspect-ratio:7/5;border:var(--border);border-radius:24px;background:var(--paper);box-shadow:12px 12px 0 var(--sh);overflow:hidden;transform:rotate(-1.4deg);transition:transform .6s cubic-bezier(.2,1.3,.4,1)}
.svc.flip .v-card{transform:rotate(1.4deg)}
.vis[data-anim] .v-card{transform:translateY(40px) rotate(-4deg) scale(.94);opacity:0}
.vis[data-anim].on .v-card{transform:rotate(-1.4deg);opacity:1;transition:transform .9s cubic-bezier(.2,1.25,.4,1),opacity .5s}
.svc.flip .vis[data-anim].on .v-card{transform:rotate(1.4deg)}

/* social: the feed scrolls, hearts float up, notifications pop */
.v-social{background:#DCE8EC}
.phone-f{position:absolute;left:50%;top:9%;width:38%;height:120%;transform:translateX(-50%);border:3px solid var(--ink);border-radius:26px;background:var(--paper);overflow:hidden;box-shadow:6px 6px 0 rgba(17,23,27,.2)}
.phone-f::before{content:"";position:absolute;left:50%;top:7px;width:34%;height:7px;border-radius:9px;background:var(--ink);transform:translateX(-50%);z-index:2}
.feed{position:absolute;inset:22px 9px auto;display:grid;gap:10px}
.on .feed{animation:feed 7s cubic-bezier(.6,0,.3,1) .6s infinite}
/* --mid and --end are measured by location.js so the last stop leaves the final post just inside the screen */
@keyframes feed{0%,22%{transform:translateY(0)}30%,52%{transform:translateY(var(--mid,-34%))}60%,82%{transform:translateY(var(--end,-68%))}92%,100%{transform:translateY(0)}}
.post{display:grid;grid-template-columns:18px 1fr;gap:6px;align-items:center}
.post .av{width:18px;height:18px;border-radius:50%;background:var(--brass);border:2px solid var(--ink)}
.post .ln{height:6px;border-radius:4px;background:rgba(17,23,27,.2);width:70%}
.post .img{grid-column:1 / 3;aspect-ratio:1;border:2px solid var(--ink);border-radius:10px}
.img-a{background:linear-gradient(160deg,#7FB0CC 0 55%,#46553A 55%)}
.img-b{background:radial-gradient(circle at 60% 40%,#B18A57 0 22%,transparent 23%),#6E2F40}
.img-c{background:linear-gradient(90deg,#26364A 0 50%,#F4F1EA 50%)}
.heart{position:absolute;bottom:14%;font-size:28px;color:#C0485A;text-shadow:2px 2px 0 var(--ink);opacity:0}
.heart.h1{left:66%}.heart.h2{left:72%;font-size:20px}.heart.h3{left:62%;font-size:22px}
.on .heart{animation:float 3.2s ease-out infinite}
.on .heart.h2{animation-delay:1.1s}.on .heart.h3{animation-delay:2.1s}
@keyframes float{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(16px,-150px) scale(1.15) rotate(14deg)}}
.toast{position:absolute;padding:8px 12px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink);font-size:15px;font-weight:700;box-shadow:3px 3px 0 var(--ink);opacity:0;transform:scale(.6)}
.toast b{font-weight:900;color:#1E4F5A}
.toast.t1{left:5%;top:22%}.toast.t2{right:5%;top:52%}
.on .toast{animation:pop 7s cubic-bezier(.3,1.6,.5,1) 1s infinite}
.on .toast.t2{animation-delay:2.4s}
@keyframes pop{0%{opacity:0;transform:scale(.6)}6%,40%{opacity:1;transform:scale(1)}48%,100%{opacity:0;transform:scale(.9)}}

/* paid ads: the arrow lands, the bars grow, the numbers count */
.v-ads{background:#F4F1EA}
.target{position:absolute;left:6%;top:12%;width:44%;overflow:visible}
.target .arrow{transform:translate(120px,-120px);opacity:0}
.on .target .arrow{animation:arrow .7s cubic-bezier(.5,0,.6,1.4) .5s forwards}
@keyframes arrow{to{transform:none;opacity:1}}
.on .target{animation:thud .4s ease 1.15s}
@keyframes thud{40%{transform:scale(.94) rotate(-3deg)}}
.bars{position:absolute;right:7%;bottom:12%;width:38%;height:58%;display:flex;align-items:flex-end;gap:8%;border-bottom:3px solid var(--ink)}
.bars i{flex:1;height:var(--h);border:2.5px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;background:var(--brass);transform-origin:bottom;transform:scaleY(0)}
.bars i:nth-child(odd){background:#7FB0CC}
.on .bars i{animation:grow .8s cubic-bezier(.3,1.4,.5,1) forwards}
.on .bars i:nth-child(2){animation-delay:.12s}.on .bars i:nth-child(3){animation-delay:.24s}.on .bars i:nth-child(4){animation-delay:.36s}.on .bars i:nth-child(5){animation-delay:.48s}
@keyframes grow{to{transform:scaleY(1)}}
.metric{position:absolute;left:6%;bottom:9%;padding:9px 14px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.metric span{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
.metric b{font-size:clamp(26px,2.6vw,36px);font-weight:900;line-height:1}
.metric em{font-style:normal}
.metric.m2{left:auto;right:7%;bottom:auto;top:7%;background:#7FB0CC}

/* websites: the page assembles, the cursor clicks Book now, and it's booked */
.v-web{background:#DCE8EC}
.browser{position:absolute;inset:9% 7% 11%;border:3px solid var(--ink);border-radius:16px;background:var(--paper);overflow:hidden;box-shadow:6px 6px 0 rgba(17,23,27,.2)}
.b-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:3px solid var(--ink);background:#F4F1EA}
.b-bar i{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink)}
.b-bar i:nth-child(1){background:#C0485A}.b-bar i:nth-child(2){background:var(--brass)}.b-bar i:nth-child(3){background:#46553A}
.b-bar span{margin-left:10px;padding:2px 10px;border-radius:999px;background:rgba(17,23,27,.08);font-size:12px;font-weight:700}
.b-body{padding:4% 6%}
.b-body > *{opacity:0;transform:translateY(16px)}
.on .b-body > *{animation:in .5s cubic-bezier(.2,1.3,.4,1) forwards}
.on .b-hero{animation-delay:.25s!important}.on .b-cards{animation-delay:.5s!important}
@keyframes in{to{opacity:1;transform:none}}
.b-nav{display:flex;gap:8%;align-items:center}
.b-nav i{height:7px;width:12%;border-radius:4px;background:rgba(17,23,27,.2)}
.b-nav .logo{width:18%;height:14px;background:var(--ink)}
.b-hero{display:grid;gap:8px;margin-top:6%;padding:5% 6%;border:2.5px solid var(--ink);border-radius:12px;background:#26364A}
.b-hero i{height:12px;border-radius:5px;background:var(--canvas)}
.b-hero .t1{width:72%}.b-hero .t2{width:48%;height:8px;opacity:.6}
.b-btn{justify-self:start;margin-top:4px;padding:6px 14px;border:2.5px solid var(--ink);border-radius:999px;background:var(--brass);color:var(--ink);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.on .b-btn{animation:press 6s ease 2.5s infinite}
@keyframes press{0%,30%,40%,100%{transform:none}34%{transform:scale(.9)}}
.b-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;margin-top:6%}
.b-cards i{aspect-ratio:4/3;border:2.5px solid var(--ink);border-radius:10px;background:#F4F1EA}
.b-cards i:nth-child(2){background:#7FB0CC}
.cur{position:absolute;width:24px;left:80%;top:80%;opacity:0}
.on .cur{animation:cur 6s cubic-bezier(.5,0,.3,1) 1.2s infinite}
@keyframes cur{0%{opacity:0;left:80%;top:84%}10%{opacity:1}30%,40%{left:24%;top:54%;opacity:1}60%{opacity:1}75%,100%{left:80%;top:84%;opacity:0}}
.booked{position:absolute;right:9%;top:22%;padding:8px 14px;border:2.5px solid var(--ink);border-radius:999px;background:#46553A;color:var(--paper);font-size:16px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink);opacity:0;transform:scale(.5)}
.on .booked{animation:booked 6s cubic-bezier(.3,1.6,.5,1) 1.2s infinite}
@keyframes booked{0%,36%{opacity:0;transform:scale(.5)}42%,76%{opacity:1;transform:scale(1)}84%,100%{opacity:0;transform:scale(.8)}}

/* branding: the swatches fan out, the pen draws a logo on the artboard, it is coloured in and selected, the type lands */
.v-brand{background:#F4F1EA;container-type:inline-size} /* the type panel is sized by the card's own width (cqw) */
.swatches{position:absolute;left:12%;bottom:12%;width:30%;height:56%}
.swatches i{position:absolute;left:32%;bottom:0;width:36%;height:100%;border:3px solid var(--ink);border-radius:12px;background:var(--c);transform-origin:50% 100%;box-shadow:3px 3px 0 rgba(17,23,27,.25)}
.on .swatches i{animation:fan .9s cubic-bezier(.3,1.5,.5,1) .3s forwards}
@keyframes fan{to{transform:translateX(var(--x)) rotate(var(--r))}}
.art{position:absolute;right:7%;top:12%;width:41%;aspect-ratio:4/3;border:2.5px solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:4px 4px 0 rgba(17,23,27,.2);opacity:0;transform:translateY(16px)}
.on .art{animation:in .5s cubic-bezier(.2,1.3,.4,1) .2s forwards}
/* the artboard's name, as a design tool shows it, in the blue of the selection box round the town's name */
.art-tag{position:absolute;left:-2.5px;bottom:100%;margin-bottom:5px;padding:3px 7px;border-radius:5px;background:var(--blue);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.mark{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mark .sea{opacity:0;transition:opacity .5s}
.mark .sun{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1) .15s,opacity .2s .15s}
.done .mark .sea{opacity:1}
.done .mark .sun{opacity:1;transform:none}
.art-sel{position:absolute;left:23.5%;top:14%;width:53%;height:72%;border:1.5px solid var(--blue);opacity:0;transform:scale(1.1);transition:opacity .3s .35s,transform .45s cubic-bezier(.3,1.5,.5,1) .35s;pointer-events:none}
.art-sel i{position:absolute;width:8px;height:8px;background:var(--paper);border:1.5px solid var(--blue)}
.art-sel i:nth-child(1){left:-5px;top:-5px}.art-sel i:nth-child(2){right:-5px;top:-5px}.art-sel i:nth-child(3){left:-5px;bottom:-5px}.art-sel i:nth-child(4){right:-5px;bottom:-5px}
.done .art-sel{opacity:1;transform:none}
.mark .draw{stroke-dasharray:1 2;stroke-dashoffset:1}
/* the nib is moved by location.js, frame by frame, so its point is always at the end of the line being drawn */
.nib{position:absolute;left:0;top:0;z-index:2;width:30px;opacity:0;transform:rotate(30deg);transform-origin:50% 96.7%;pointer-events:none;transition:opacity .25s}
.specimen{position:absolute;right:7%;bottom:8%;width:41%;padding:clamp(8px,2.4cqw,12px) clamp(10px,3cqw,16px);border:2.5px solid var(--ink);border-radius:clamp(10px,2.8cqw,14px);background:#26364A;color:var(--canvas);opacity:0;transform:translateY(20px)}
.specimen b{display:block;font-family:"Melodrama",serif;font-weight:500;font-size:clamp(28px,9.5cqw,54px);line-height:.9}
.specimen span{display:block;font-size:clamp(10px,2.4cqw,13px);font-weight:800;letter-spacing:.05em;line-height:1.25;text-transform:uppercase;opacity:.8}
.on .specimen{animation:in .6s cubic-bezier(.2,1.3,.4,1) 2.9s forwards}

/* CRM: a lead travels from enquiry to booked */
.v-crm{background:#DCE8EC}
.crm-flow{position:absolute;inset:0;width:100%;height:100%}
.crm-flow .dot{opacity:0}
.on .crm-flow .dot{opacity:1}
.on .crm-flow .track{animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-14}}
.node{position:absolute;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:10px 14px 10px 10px;border:2.5px solid var(--ink);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink);opacity:0;transform:scale(.7)}
.node b{font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.node small{grid-column:2;font-size:12.5px;opacity:.7}
.n-ico{grid-row:1 / 3;display:grid;place-items:center;width:34px;height:34px;border:2.5px solid var(--ink);border-radius:50%;background:#7FB0CC;font-size:16px;font-weight:900}
.node.n1{left:5%;top:11%}.node.n2{left:32%;top:42%}.node.n3{right:5%;bottom:11%}
.node.n2 .n-ico{background:var(--brass)}.node.n3 .n-ico{background:#46553A;color:var(--paper)}
.on .node{animation:pop2 .55s cubic-bezier(.3,1.6,.5,1) forwards}
.on .node.n2{animation-delay:.45s}.on .node.n3{animation-delay:.9s}
@keyframes pop2{to{opacity:1;transform:scale(1)}}

/* strategy: the route draws itself to the flag */
.v-strat{background:#F4F1EA}
.map{position:absolute;inset:0;width:100%;height:100%}
.map .route{stroke-dasharray:1 2;stroke-dashoffset:1} /* the gap is twice the line, so no dot shows at its end before it draws */
.on .map .route{animation:line 2s cubic-bezier(.6,0,.2,1) .5s forwards}
.map .p-mid circle,.map .goal{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0)}
.on .map .p-mid circle{animation:pop2 .4s cubic-bezier(.3,1.6,.5,1) forwards}
.on .map .p-mid circle:nth-child(1){animation-delay:1s}.on .map .p-mid circle:nth-child(2){animation-delay:1.7s}
.on .map .goal{animation:pop2 .5s cubic-bezier(.3,1.6,.5,1) 2.4s forwards}
.map .g-flag{transform-box:fill-box;transform-origin:0 50%;animation:flag 1.4s ease-in-out infinite}
.m-tag{position:absolute;padding:5px 11px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink);opacity:0}
.m-tag.t-now{left:6%;bottom:6%}.m-tag.t-goal{right:5%;top:22%;background:var(--brass)}
.on .m-tag.t-now{animation:fade .4s ease .4s forwards}.on .m-tag.t-goal{animation:fade .4s ease 2.6s forwards}

/* ---------- why us ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.why{position:relative;padding:26px 22px 22px;border:var(--border);border-radius:20px;background:var(--paper);box-shadow:6px 6px 0 var(--ink)}
.why b{display:block;padding-right:48px;font-family:"Melodrama",serif;font-weight:500;font-size:clamp(28px,2.4vw,36px);line-height:1}
.why p{margin-top:10px;font-size:17px;line-height:1.4;color:rgba(17,23,27,.74)}
.w-n{position:absolute;right:16px;top:12px;font-size:44px;font-weight:900;line-height:1;color:rgba(17,23,27,.12)}
[data-anim] .why{opacity:0;transform:translateY(30px)}
[data-anim].on .why{opacity:1;transform:none;transition:opacity .5s,transform .7s cubic-bezier(.2,1.3,.4,1)}
[data-anim].on .why:nth-child(2){transition-delay:.12s}[data-anim].on .why:nth-child(3){transition-delay:.24s}
.areas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:clamp(28px,4vw,44px)}
.areas span{padding:6px 13px;border:2px solid var(--ink);border-radius:999px;background:rgba(251,249,245,.6);font-size:15px;font-weight:700}
/* a nearby town with a page of its own: a pill that links to it */
.areas .a-link{padding:6px 13px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font-size:15px;font-weight:800;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:background .15s}
.areas .a-link:hover,.areas .a-link:focus-visible{background:var(--brass)}
.areas .a-all{padding:6px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--brass);color:var(--ink);font-size:15px;font-weight:900;letter-spacing:.03em;text-decoration:none;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink);transition:translate .15s,box-shadow .15s}
.areas .a-all:hover,.areas .a-all:focus-visible{translate:-1px -2px;box-shadow:4px 5px 0 var(--ink)}
.areas .a-lbl{border:0;background:none;padding-left:0;font-weight:900;text-transform:uppercase;letter-spacing:.05em}

/* ---------- proof ---------- */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pcard{display:block;padding:12px 12px 16px;border:var(--border);border-radius:20px;background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:6px 6px 0 var(--ink);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.pcard:nth-child(2){transform:translateY(18px)}
.pcard:hover,.pcard:focus-visible{transform:translate(-2px,-4px) rotate(-.6deg);box-shadow:9px 9px 0 var(--ink)}
.pcard img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:2.5px solid var(--ink);border-radius:12px}
.p-k{display:inline-block;margin-top:12px;padding:3px 10px;border-radius:999px;background:#7FB0CC;font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.pcard b{display:block;margin-top:8px;font-family:"Melodrama",serif;font-weight:500;font-size:clamp(24px,2vw,30px);line-height:1.05}
.p-n{display:block;margin-top:6px;font-size:15px;font-weight:700;opacity:.65}

/* ---------- questions ---------- */
.faq{display:grid;gap:12px;max-width:900px}
.faq details{border:var(--border);border-radius:18px;background:var(--paper);box-shadow:5px 5px 0 var(--ink);overflow:hidden}
.faq summary{position:relative;display:block;padding:20px 64px 20px 22px;font-size:clamp(20px,1.8vw,25px);font-weight:800;line-height:1.2;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:absolute;right:20px;top:50%;width:28px;height:28px;margin-top:-14px;border:2.5px solid var(--ink);border-radius:50%;background:var(--brass);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.5px;margin:-1.25px 0 0 -6px;background:var(--ink);border-radius:2px}
.faq summary i::after{transform:rotate(90deg);transition:transform .3s}
.faq details[open] summary i{transform:rotate(180deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding:0 22px 22px;font-size:18px;line-height:1.5;color:rgba(17,23,27,.78);animation:fade .4s ease}

/* ---------- let's talk ---------- */
.cta-ch{text-align:center;padding-bottom:72px}
/* a plain dark strip for the character to peek over, which also keeps him clear of the timeline */
.cta-ch::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;background:var(--ink)}
.cta-ch .inner{display:flex;flex-direction:column;align-items:center}
.cta-title{font-size:clamp(64px,10vw,170px);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:0}
.cta-title .s{font-size:.74em}
.cta-sub{margin-top:18px;max-width:40ch;font-size:clamp(19px,1.6vw,23px);color:var(--mute)}
.cta-ch .loc-acts{opacity:1;animation:none}
.cta-peek{display:block;width:clamp(150px,15vw,220px);height:auto;margin-top:clamp(40px,6vw,70px);overflow:visible}
.cta-peek .skin{fill:#96BED5}
.cta-peek #pl,.cta-peek #pr{transition:transform .3s cubic-bezier(.2,.8,.2,1)}

/* ---------- smaller screens ---------- */
@media (max-width:980px){
  .loc-hero .hero{grid-template-columns:1fr}
  .town{max-width:560px}
  .svc-grid{grid-template-columns:1fr}
  .svc.flip .svc-copy{order:0}
  .svc-menu{grid-template-columns:1fr 1fr}
  .why-grid,.proof{grid-template-columns:1fr}
  .pcard:nth-child(2){transform:none}
  .promise-grid{margin-top:24px}
}
@media (max-width:720px){
  .loc .title{font-size:16vw}
  .kick-line{font-size:17px}
  .btn-loc{height:50px;font-size:16px;padding:0 18px 0 20px}
  .svc-menu{grid-template-columns:1fr}
  .svc-menu a{padding:14px 14px 14px 12px}
  .svc-menu .m-ico{width:44px;height:44px}
  .promise-grid{grid-template-columns:1fr 1fr;gap:10px}
  .promise{padding:14px 12px}
  .promise b{font-size:18px}
  .promise p{font-size:14.5px}
  .v-card{aspect-ratio:1/1}
  .stamp-badge{left:2%}
  .t-stamp{right:-2px;width:64px;font-size:18px}
  .m-places text{font-size:24px}.m-pin text{font-size:30px}.m-home-label{font-size:40px}.m-home-sub,.m-ring-label,.m-river-labels text{font-size:21px}
  .m-legend{display:none}
  /* on the square card: a whole phone of normal proportions, the goal's label in the sky above its flag, and the
     nearby towns centred under their label */
  .phone-f{top:11%;height:auto;aspect-ratio:9/18.5}
  /* the brand board in two rows on the square card: swatches and logo side by side, the type full width beneath */
  .swatches{left:13%;bottom:37%;width:30%;height:47%}
  .swatches i{left:34%;width:32%}
  .swatches i:nth-child(1){--r:-11deg!important;--x:-58%!important}.swatches i:nth-child(2){--r:-3.7deg!important;--x:-19%!important}
  .swatches i:nth-child(3){--r:3.7deg!important;--x:19%!important}.swatches i:nth-child(4){--r:11deg!important;--x:58%!important}
  .art{top:19%;right:9%;width:37%;aspect-ratio:37/41}
  .art-sel{top:25%;height:50%} /* the logo is drawn across the artboard's width and centred, so its box is set to match */
  .specimen{left:7%;right:7%;width:auto;bottom:7%}
  .specimen span{font-size:clamp(10px,3.4cqw,13px)}
  .m-tag{font-size:12px;padding:4px 10px}.m-tag.t-goal{top:3%}
  .areas{justify-content:center}
  .areas .a-lbl{flex-basis:100%;text-align:center;padding-right:0}
  .pin span{font-size:10px;top:-24px}
  .cta-title{font-size:15vw}
  .faq summary{padding:16px 56px 16px 16px}
  .faq details p{padding:0 16px 16px;font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  .pbox{animation:none;clip-path:none}.pbox em{animation:none;opacity:1}
  .town,.loc-acts,.pin,.stamp-badge{animation:none;opacity:1;transform:none}
  .stamp-badge{transform:rotate(-12deg)}
  .town *,.v-card *,.v-card{animation:none!important}
  .town .draw,.mark .draw,.map .route{stroke-dashoffset:0}
  .town .castle path,.town .viaduct path{fill-opacity:1}
  .town .castle .late,.town .flag{opacity:1}
  .town .fillin{fill-opacity:1}.town .late,.town .six{opacity:1}.town .splash{display:none}.town .train{transform:translateX(150px)}
  .area-map,.m-home,.m-pin,.m-ring-label,.m-places,.m-river-labels,.m-shield,.m-legend,.m-compass{opacity:1;transform:none;animation:none}
  .m-rivers path{stroke-dashoffset:0;animation:none}.m-rings circle{transform:none;animation:none}.m-pulse{display:none}
  [data-anim] .promise,[data-anim] .why,.vis[data-anim] .v-card,.b-body > *,.node,.specimen,.toast,.m-tag,.booked{opacity:1;transform:none}
  .bars i,.map .p-mid circle,.map .goal{transform:none}
  .swatches i{transform:translateX(var(--x)) rotate(var(--r))}
  .art,.v-brand .mark .sea,.v-brand .mark .sun,.art-sel{opacity:1;transform:none}
  .target .arrow{transform:none;opacity:1}
}