/* Parkers Gates & Fencing: the site's stylesheet.
   The design (design/parkers-site.html) first, then WordPress and Elementor. The fonts are in
   assets/fonts/fonts.css; the logo pickets (agent B) and the widgets (agent E1) have their own files. */
/* Parkers site: plum + Parkers pink, Poppins display / Inter body, picket-line section edges. Single brand look. */
:root{
  --pink:#E23D8E;--pink-deep:#B8246C;--blush:#FCE8F1;
  /* pink behind white or pale text (buttons, pink panels, the CTA band): same hue, 6% darker, white on it 4.53:1
     (white on --pink is 3.97:1). --pink stays for accents: lines, icons, large headings. */
  --pink-ui:#DE227E;--blush-2:#F7D3E4;
  --plum:#1E1426;--plum-2:#2B1D35;--steel:#66636E;--galv:#ECEAF0;--ink:#231C29;--paper:#FFFFFF;
  --muted-d:#C7BCCF;--line:#E4E1E8;
  --font-display:Poppins,"Helvetica Neue",Arial,sans-serif;--body:Inter,"Helvetica Neue",Arial,sans-serif;
  --gut:max(20px,env(safe-area-inset-left,0px));--gutr:max(20px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.05;margin:0;text-wrap:balance}
p{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:6px}
.wrap{max-width:1280px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gutr)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:16px;padding:15px 26px;border-radius:999px;white-space:nowrap;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-pink{background:var(--pink-ui);color:#fff;box-shadow:0 10px 26px -10px rgba(226,61,142,.75)}
.btn-pink:hover{background:#C81F71}
.btn-ghost{border:1.5px solid rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-dark{background:var(--plum);color:#fff}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-white{background:#fff;color:var(--pink-deep)}

/* utility bar */
.util{background:var(--plum);color:#d9d0de;font-size:13.5px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:42px;gap:20px}
.util .l,.util .r{display:flex;gap:26px;align-items:center}
.util b{color:#fff;font-weight:600}
.util .dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;display:inline-block;margin-right:8px;box-shadow:0 0 0 4px rgba(61,220,132,.18)}
.soc{display:flex;gap:10px}
.soc a{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font:700 11px var(--font-display);color:#fff}
.soc a:hover{background:var(--pink)}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:#fff;box-shadow:0 1px 0 var(--line)}
/* The header row is header.site's own .wrap (">"): the mega menu's .wrap sits inside the header too, and the
   row's rules used to reach it (its first tile took the logo link's 44px height, James 22 Oct 2026). */
header.site > .wrap{display:flex;align-items:center;height:84px;gap:20px}
.logo{width:258px;height:auto;aspect-ratio:620/101;flex:none}
/* The logo keeps its 620:101 shape at every width (QA Q1b-01): it is sized by width (258px = 42px tall), its
   link may shrink, and the img reset's max-width:100% then scales it down whole. It is the same size at the top
   of the page and once scrolled: it used to start at the design's 319px and shrink on scrolling, and since
   22 Oct 2026 it keeps the scrolled size all the time, with no animation (James). */
header.site > .wrap > a:first-child{flex:0 1 auto;min-width:0}
.menu{list-style:none;display:flex;gap:2px;white-space:nowrap;margin:0 0 0 6px;padding:0;font-family:var(--font-display);font-weight:500;font-size:15.5px}
.menu > li{position:relative}
.menu > li > a,.menu > li > button{display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:10px;background:none;border:0;cursor:pointer;font-family:var(--font-display);font-weight:500;font-size:15.5px;color:var(--ink)}
.menu > li > a:hover,.menu > li > button:hover{background:var(--blush);color:var(--pink-deep)}
.menu > li.on > a,.menu > li.on > button{color:var(--pink-deep)}
.menu > li.on > a::after,.menu > li.on > button::after{content:"";position:absolute;left:12px;right:12px;bottom:-21px;height:3px;border-radius:3px;background:var(--pink)}
.menu svg{width:12px;height:12px;opacity:.6}
header.site .end{margin-left:auto;display:flex;align-items:center;gap:20px}
.callblk{display:flex;flex-direction:column;line-height:1.2;font-size:12.5px;color:var(--steel);white-space:nowrap}
.callblk b{font-family:var(--font-display);font-size:17px;color:var(--ink)}
/* From 1381px the call block shows (hidden at 1380 and below). The top bar, the header row and the mega menu
   then run wider than the page, up to 1520px (1480px of content), so the row is no longer crammed into 1240px
   (James, 22 Oct 2026: "make it a bit wider and space it out nicer"): the logo 228x37 (true shape) and
   from 1600px 258x42, the sizes it used to shrink to once scrolled (see .logo above), the design's 15.5px
   menu text with 24px between menu items and 28px from 1440px (each item's own padding, so the hover pill keeps
   its shape), the menu centred between the logo and the call block, and 20px between the call block and the
   button. If fonts ever draw wider, the space either side of the menu goes first, then the logo scales down
   whole instead of squashing. */
@media (min-width:1381px){
  .util > .wrap,header.site > .wrap,.mega > .wrap{max-width:1520px}
  .logo{width:228px}
  header.site > .wrap > nav{margin-left:auto}
  .menu{gap:0;margin-left:0}
}
@media (min-width:1440px){
  .menu > li > a,.menu > li > button{padding:10px 14px}
  .menu > li.on > a::after,.menu > li.on > button::after{left:14px;right:14px}
}
@media (min-width:1600px){
  .logo{width:258px}
}
.burger{display:none;width:46px;height:46px;border-radius:50%;background:var(--pink);border:0;place-items:center;cursor:pointer}
.burger svg{width:22px;height:22px}
.callbtn{display:none;width:46px;height:46px;border-radius:50%;background:var(--plum);place-items:center}
.callbtn svg{width:20px;height:20px}

/* mega */
.mega{position:absolute;left:0;right:0;top:100%;background:#fcfcfc;border-radius:0 0 28px 28px;box-shadow:0 40px 60px -30px rgba(30,20,38,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s .18s}
.mega.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
/* gap 20px: what the header row's old rule gave it below 1381px (the design's own 16px never applied) */
.mega .wrap{display:grid!important;grid-template-columns:repeat(4,1fr) 1.15fr;gap:20px;height:auto!important;padding-top:48px;padding-bottom:30px;align-items:stretch}
.mg{position:relative;border-radius:18px;overflow:hidden;min-height:220px;color:#fff;display:flex;align-items:flex-end;padding:18px}
.mg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.mg:hover img{transform:scale(1.05)}
.mg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,20,38,.9),rgba(30,20,38,0) 65%)}
.mg div{position:relative;z-index:2}
.mg b{font-family:var(--font-display);font-size:19px;display:block}
.mg small{font-size:13.5px;color:#e3dbe8}
.mside{background:var(--blush);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.mside h4{font-size:19px}
.mside ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px;color:#5a3a4b}
.mside li a:hover{color:var(--pink-deep)}
.mside li::before{content:"";display:inline-block;width:6px;height:14px;border-radius:3px 3px 0 0;background:var(--pink);margin-right:10px;vertical-align:-1px}
/* The Google reviews in the pink box (Kit::google_box(), James 22 Oct 2026, where "More from Parkers" was):
   Google's G and "Google reviews" at the old heading's 19px, the score beside widgets.css's stars (bigger), the
   number of reviews in the old list's colour, then the button. The stars drop under the score when the box is
   narrow (1025 to 1380px). */
.grev{display:grid;gap:12px}
.grev p{margin:0}
.grev-top{display:flex;align-items:center;gap:10px;font:600 19px/1.2 var(--font-display);color:var(--ink)}
.grev-g{display:block;flex:none;width:24px;height:24px}
.grev-score{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.grev-score b{font:700 46px/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.grev-score .gbadge-stars{--gs:120px}
.grev-count{font-size:15px;color:#5a3a4b}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:60;background:var(--plum);color:#fff;overflow:auto;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutr) 40px var(--gut);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.mnav.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.mnav .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mnav .top img{width:58px;height:58px}
.mnav .x{width:46px;height:46px;border-radius:50%;background:#fff;border:0;display:grid;place-items:center;cursor:pointer}
.mnav a.it,.mnav button.it{display:flex;width:100%;justify-content:space-between;align-items:center;padding:16px 0;border:0;border-bottom:1px solid rgba(255,255,255,.1);font:600 22px var(--font-display);letter-spacing:-.01em;background:none;color:#fff;cursor:pointer;text-align:left}
/* the "Gates" label: pink on plum is 4.47:1, so it is set bold to count as large text (3:1); its 600 weight is an
   inline style in template-parts/phone-menu.php, hence !important */
.mnav div.it{font-weight:700!important}
.mnav .sub{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 0 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.mnav .sub a{position:relative;height:96px;border-radius:14px;overflow:hidden;display:flex;align-items:flex-end;padding:10px;font:600 14px var(--font-display)}
.mnav .sub img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mnav .sub a::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,20,38,.85),rgba(30,20,38,0) 70%)}
.mnav .sub span{position:relative;z-index:2}
/* The CTA band's .cta rule (below) matched this box too and painted it pink behind both buttons, clipping the
   quote button's glow (James 22 Oct 2026: "the big pink block on the mobile menu build your quote button"). */
.mnav .cta{margin-top:24px;display:grid;gap:10px;background:none;overflow:visible}

/* pickets */
.pickets{display:block;width:100%;height:auto}
.edge{position:absolute;left:0;right:0;bottom:-1px;line-height:0}

/* shared section heads */
.sec{padding-block:clamp(72px,9vw,130px)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(32px,4vw,56px);flex-wrap:wrap}
.head h2{font-size:clamp(36px,4.6vw,62px);max-width:740px}
.head p{max-width:430px;color:var(--steel);font-size:18px}
.dark{background:var(--plum);color:#fff}
.dark .head p{color:#bfb3c9}

/* HERO */
.hero{position:relative;min-height:clamp(620px,62vw,880px);overflow:hidden;background:var(--plum);color:#fff;display:flex;align-items:center}
.hero .media{position:absolute;inset:0}
.hero .media img{width:100%;height:100%;object-fit:cover;object-position:100% 40%;animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1) translateX(-1.5%)}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,20,38,.92) 0%,rgba(30,20,38,.72) 40%,rgba(30,20,38,.15) 75%,rgba(30,20,38,.05)),linear-gradient(0deg,rgba(30,20,38,.55),rgba(30,20,38,0) 40%)}
.hero .wrap{position:relative;width:100%;padding-top:110px;padding-bottom:170px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:#f3d6e5;margin-bottom:26px;background:rgba(226,61,142,.16);border:1px solid rgba(226,61,142,.45);padding:7px 14px 7px 8px;border-radius:999px}
.kicker i{width:22px;height:22px;border-radius:50%;background:var(--pink);display:grid;place-items:center}
.hero h1{font-size:clamp(42px,6vw,84px);letter-spacing:-.035em;line-height:1;margin-bottom:26px;max-width:820px}
.hero .lede{font-size:clamp(16px,1.5vw,20px);line-height:1.55;color:#e6dfea;max-width:560px;margin-bottom:36px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.vid{position:absolute;right:var(--gutr);bottom:180px;width:290px;background:rgba(30,20,38,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:16px 18px;cursor:pointer;text-align:left;color:#fff}
.vid .row{display:flex;align-items:center;gap:14px}
.vid .play{width:44px;height:44px;border-radius:50%;background:var(--pink);display:grid;place-items:center;flex:none}
.vid small{display:block;color:#cbbfd3;font-size:12.5px}
.vid b{font-family:var(--font-display);font-weight:600;font-size:15px}
.vid .bar{height:4px;border-radius:4px;background:rgba(255,255,255,.18);margin-top:14px;overflow:hidden}
.vid .bar i{display:block;height:100%;width:0;background:var(--pink);animation:prog 17s linear infinite}
.vid.paused .bar i{animation-play-state:paused}
@keyframes prog{to{width:100%}}
.hero.paused .media img{animation-play-state:paused}

/* page hero (inner pages) */
.phero{position:relative;background:var(--plum);color:#fff;overflow:hidden}
.phero .g{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;padding-top:clamp(50px,6vw,90px);padding-bottom:clamp(110px,10vw,150px)}
.crumb{font-size:14px;color:#a99db3;margin-bottom:22px}
.crumb a:hover{color:#fff}
.crumb b{color:#fff;font-weight:500}
.phero h1{font-size:clamp(40px,5.6vw,80px);letter-spacing:-.04em;margin-bottom:24px}
.phero p.lede{font-size:clamp(16px,1.5vw,20px);color:#d9d0de;max-width:540px;margin-bottom:32px}
.phero .pic{border-radius:28px;overflow:hidden;aspect-ratio:5/4;box-shadow:0 40px 70px -30px rgba(0,0,0,.7);max-width:100%}
.phero .pic img{width:100%;height:100%;object-fit:cover}

/* trust strip */
.trust .row{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--galv);border-bottom:1px solid var(--galv)}
.trust .it{padding:24px 18px;display:flex;gap:12px;align-items:center;border-right:1px solid var(--galv)}
.trust .it:last-child{border-right:0}
.ic{width:42px;height:42px;border-radius:12px;background:var(--blush);display:grid;place-items:center;flex:none}
.ic svg{width:22px;height:22px;stroke:var(--pink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trust b{display:block;font:600 15px/1.25 var(--font-display)}
.trust small{color:var(--steel);font-size:13px;line-height:1.35;display:block}

/* bento */
.bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:320px 320px;gap:18px}
.tile{position:relative;border-radius:26px;overflow:hidden;color:#fff;background:#333;display:block}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,20,38,.88) 0%,rgba(30,20,38,.15) 55%,rgba(30,20,38,0))}
.tile .c{position:absolute;left:26px;right:26px;bottom:24px;z-index:2}
.tile h3{font-size:30px;margin-bottom:6px}
.tile p{font-size:15px;color:#e7dfec;max-width:380px}
.go{position:absolute;right:20px;top:20px;z-index:2;width:50px;height:50px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:background .15s}
.go svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2}
.tile:hover .go{background:var(--pink)}
.tile:hover .go{color:#fff}
.tile.big{grid-row:span 2}
.tile.big h3{font-size:44px}
.tags{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.tags span{font-size:13px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
.tile.pinkt{background:var(--pink-ui)}
/* the tile widget prints this line with style="color:#ffe3f0" (3.3:1 on pink); white on --pink-ui is 4.53:1 */
.tile.pinkt .c > p{color:#fff!important}
.tile.pinkt::after{display:none}
.tile.pinkt .c{top:26px;bottom:auto}
.tile.pinkt .kp{position:absolute;right:-30px;bottom:-40px;width:250px;height:210px;border-radius:22px;overflow:hidden;transform:rotate(-6deg);box-shadow:0 20px 40px -10px rgba(0,0,0,.45);z-index:1}
.tile.pinkt .kp img{position:static;width:100%;height:100%;object-fit:cover}
.tile.pinkt .go{top:auto;bottom:22px;left:26px;right:auto;z-index:3}

/* process */
.proc{position:relative;overflow:hidden;padding-bottom:0!important}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;align-items:end}
.step h3{font-size:22px;margin-bottom:8px;letter-spacing:-.015em}
.step p{font-size:15px;color:#c7bccf;line-height:1.55;min-height:96px}
.step .bar{border-radius:20px 20px 0 0;background:linear-gradient(180deg,var(--pink),#c22f77);position:relative;margin-top:24px}
.step .bar .num{position:absolute;left:22px;top:18px;font:700 54px/1 var(--font-display);color:rgba(255,255,255,.95)}
.step:nth-child(1) .bar{height:130px;opacity:.55}
.step:nth-child(2) .bar{height:180px;opacity:.68}
.step:nth-child(3) .bar{height:230px;opacity:.8}
.step:nth-child(4) .bar{height:280px;opacity:.9}
.step:nth-child(5) .bar{height:330px}
.finial{position:absolute;left:50%;top:-24px;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:var(--pink)}

/* work strip */
.strip{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:16px;height:440px}
.strip figure{position:relative;border-radius:22px;overflow:hidden;margin:0}
.strip figure:nth-child(2){margin-top:60px}
.strip figure:nth-child(4){margin-top:30px}
.strip img{width:100%;height:100%;object-fit:cover}
figcaption.cap{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.94);border-radius:12px;padding:8px 12px;font-size:13.5px;font-weight:500;max-width:88%;color:var(--ink)}
figcaption.cap small{display:block;color:var(--steel);font-weight:400;font-size:12.5px}
.workfoot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:40px;padding-top:28px;border-top:1px solid var(--galv);flex-wrap:wrap}
.workfoot p{color:var(--steel)}
.workfoot p b{color:var(--ink)}

/* about teaser */
.about{background:var(--galv)}
.about .g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.about .ph{position:relative;height:540px}
.about .ph .a{position:absolute;left:0;top:0;width:80%;height:460px;border-radius:28px;overflow:hidden}
.about .ph .a img{width:100%;height:100%;object-fit:cover}
.about .ph .b{position:absolute;right:0;bottom:20px;background:#fff;border-radius:22px;padding:22px 26px;box-shadow:0 24px 40px -18px rgba(30,20,38,.35)}
.about .ph .b img{width:240px;height:auto}
.about h2{font-size:clamp(34px,4.2vw,56px);margin-bottom:24px}
.about p{color:#4b4553;font-size:18px;margin-bottom:16px;max-width:540px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:32px 0 34px}
.facts div{background:#fff;border-radius:18px;padding:18px}
.facts b{display:block;font:700 30px var(--font-display);letter-spacing:-.02em;color:var(--pink)}
.facts small{color:var(--steel);font-size:13.5px;line-height:1.35;display:block}

/* reviews */
.rev .g{display:grid;grid-template-columns:360px 1fr 1fr;gap:18px}
.score{background:var(--plum);color:#fff;border-radius:26px;padding:34px}
.score .n{font:700 84px/1 var(--font-display);letter-spacing:-.04em}
.stars{display:flex;gap:4px;margin:12px 0 10px}
.stars svg{width:20px;height:20px;fill:var(--pink)}
.score p{color:#c7bccf;font-size:15px}
.score .src{display:flex;gap:10px;margin-top:26px}
.score .src span{background:rgba(255,255,255,.08);border-radius:10px;padding:8px 12px;font-size:13px}
.rcard{border:1.5px solid var(--galv);border-radius:26px;padding:30px;position:relative}
.rcard .q{font:700 110px/.6 var(--font-display);color:var(--blush);position:absolute;right:26px;top:38px}
.rcard p{font-size:17px;line-height:1.55;margin:14px 0 24px;color:#6f6878;font-style:italic}
.who{display:flex;gap:12px;align-items:center}
.who i{width:44px;height:44px;border-radius:50%;background:var(--blush);display:grid;place-items:center;font:normal 700 16px var(--font-display);color:var(--pink-deep)}
.who b{display:block;font-size:15px}
.who small{color:var(--steel)}

/* areas */
.areas .box{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center;border-radius:32px;background:linear-gradient(135deg,#2a1c34,#1e1426);color:#fff;padding:clamp(28px,5vw,70px);overflow:hidden}
.areas h2{font-size:clamp(32px,3.8vw,50px);margin-bottom:16px}
.areas p{color:#c7bccf;margin-bottom:24px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);font-size:15px}
.chips span.hq{background:var(--pink-ui);border-color:var(--pink-ui)}
.map svg{width:100%;height:auto}
.pc{display:flex;gap:10px;margin-top:26px;background:rgba(255,255,255,.07);border-radius:16px;padding:8px;align-items:center;max-width:460px}
.pc input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:15px var(--body);padding:8px 10px}
.pc input::placeholder{color:#a99db3}
.pc input:focus{outline:none}
/* The postcode box shows focus as the other fields do (pink edge and glow), on the whole pill because the
   field inside it has no edge of its own (QA Q3b-04, Q1a-07). Not while the button has focus: its own ring shows. */
.pc:focus-within{box-shadow:0 0 0 2px var(--pink),0 0 0 6px rgba(226,61,142,.28)}
.pc:has(.btn:focus){box-shadow:none}
.pcmsg{margin-top:12px;font-size:14.5px;color:#f6b8d6;min-height:22px}

/* CTA band */
.cta{background:var(--pink-ui);color:#fff;position:relative;overflow:hidden}
.cta .g{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:clamp(70px,8vw,110px);padding-bottom:clamp(70px,7vw,90px);flex-wrap:wrap}
.cta h2{font-size:clamp(42px,6vw,84px);max-width:760px;letter-spacing:-.04em}
.cta .r{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cta .tel{font:600 30px var(--font-display);letter-spacing:-.01em}
.cta .tel small{display:block;font:400 14px var(--body)}

footer.site{background:var(--plum);color:#cfc6d6;font-size:15px}
footer.site .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px;padding-top:80px;padding-bottom:56px}
footer.site h2{font-size:15px;color:#fff;margin-bottom:16px;letter-spacing:0;font-weight:600}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer.site ul a:hover{color:#fff}
footer.site .bottom{border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;padding-bottom:32px;font-size:13.5px;color:#9b90a4}

/* service pages */
.opts3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.opt-card{border-radius:24px;overflow:hidden;border:1.5px solid var(--galv);background:#fff;display:flex;flex-direction:column}
.opt-card .im{aspect-ratio:4/3;overflow:hidden;background:var(--galv)}
.opt-card .im img{width:100%;height:100%;object-fit:cover}
.opt-card .im.draw{display:grid;place-items:center;background:var(--blush)}
.opt-card .im.draw svg{width:62%;height:auto;stroke:var(--pink-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.opt-card .b{padding:22px 24px 26px}
.opt-card h3{font-size:22px;margin-bottom:8px;letter-spacing:-.015em}
.opt-card p{color:var(--steel);font-size:15.5px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.split .pic{border-radius:28px;overflow:hidden;aspect-ratio:1/1}
.split .pic img{width:100%;height:100%;object-fit:cover}
.split h2{font-size:clamp(32px,3.8vw,50px);margin-bottom:20px}
.split p{color:#4b4553;font-size:17.5px;margin-bottom:14px}
.ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.faq{max-width:860px}
.faq details{border-bottom:1.5px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font:600 19px var(--font-display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:34px;height:34px;border-radius:50%;background:var(--blush);display:grid;place-items:center;flex:none;transition:transform .2s}
.faq summary i svg{width:16px;height:16px;stroke:var(--pink-deep);fill:none;stroke-width:2.5}
.faq details[open] summary i{transform:rotate(45deg);background:var(--pink)}
.faq details[open] summary i svg{stroke:#fff}
.faq details p{padding:0 50px 22px 0;color:#4b4553}

/* work gallery page */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.filters button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:10px 18px;font:500 15px var(--body);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:#fff}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal figure{margin:0;position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;cursor:zoom-in;background:var(--galv)}
.gal figure.tall{grid-row:span 2;aspect-ratio:auto}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gal figure:hover img{transform:scale(1.04)}
.lb{position:fixed;inset:0;z-index:80;background:rgba(20,13,26,.92);display:grid;place-items:center;padding:30px}
.lb img{max-height:82vh;border-radius:16px}
.lb p{color:#fff;text-align:center;margin-top:14px;font-family:var(--font-display)}
.lb button{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:max(20px,env(safe-area-inset-right,0px));width:46px;height:46px;border-radius:50%;border:0;background:#fff;cursor:pointer;display:grid;place-items:center}

/* about page */
.collage{position:relative;height:500px}
.collage figure{position:absolute;margin:0;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.collage img{width:100%;height:100%;object-fit:cover}
.collage .c1{left:4%;top:10px;width:56%;height:78%;transform:rotate(-4deg)}
.collage .c2{right:0;top:50px;width:50%;height:70%;transform:rotate(5deg);border:6px solid var(--pink)}
.collage .c3{left:30%;bottom:0;width:46%;height:44%;transform:rotate(-1deg)}
.collage .badge{position:absolute;right:0;bottom:0;background:#fff;border-radius:18px;padding:16px 20px;box-shadow:0 18px 30px -10px rgba(0,0,0,.5)}
.collage .badge img{width:190px;height:auto}
.quoteblk{font:600 clamp(26px,2.9vw,38px)/1.2 var(--font-display);letter-spacing:-.02em;margin:0}
.sig{margin-top:26px;display:flex;gap:14px;align-items:center;color:var(--steel)}
.sig i{width:54px;height:54px;border-radius:50%;background:var(--blush);display:grid;place-items:center;font:normal 700 16px var(--font-display);color:var(--pink-deep)}
.sig b{display:block;color:var(--ink);font-family:var(--font-display)}
.exg{display:grid;grid-template-columns:repeat(2,1fr);border-top:1.5px solid #d8d4de}
.ex{display:grid;grid-template-columns:80px 1fr;gap:10px;padding:36px 36px 36px 0;border-bottom:1.5px solid #d8d4de}
.ex:nth-child(odd){border-right:1.5px solid #d8d4de}
.ex:nth-child(even){padding-left:36px}
.ex .pk{display:flex;gap:5px;align-items:flex-end;height:54px}
.ex .pk i{width:9px;border-radius:5px 5px 0 0;background:var(--pink)}
.ex h3{font-size:24px;margin-bottom:8px;letter-spacing:-.015em}
.ex p{color:#4b4553;font-size:16.5px}
.team{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px}
.person{border-radius:24px;overflow:hidden;border:1.5px solid var(--galv)}
.person .photo{height:250px;background:linear-gradient(160deg,#f7d2e3,#e98fbb);display:grid;place-items:center;position:relative;overflow:hidden}
.person.lead{grid-row:span 2;display:flex;flex-direction:column}
.person.lead .photo{flex:1;min-height:360px}
.person .photo span{position:relative;z-index:2;background:rgba(255,255,255,.88);padding:7px 14px;border-radius:999px;font-size:13.5px;color:#7a3a5a}
.person .info{padding:20px 24px 24px}
.person h3{font-size:22px;letter-spacing:-.015em}
.person small{color:var(--pink-deep);font-weight:600;font-size:14px}
.person p{color:var(--steel);font-size:15px;margin-top:8px}
.vans{position:relative;min-height:560px;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.vans img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.vans::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,20,38,.85),rgba(30,20,38,.6) 45%,rgba(30,20,38,.2) 65%)}
.vans .wrap{position:relative;z-index:2;width:100%;padding-bottom:80px}
.vans h2{font-size:clamp(38px,5vw,66px);margin-bottom:16px;max-width:560px}
.vans p{font-size:19px;color:#e6dfea;max-width:520px}
.cg{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cred{border-radius:24px;padding:28px;border:1.5px solid var(--galv)}
.cred .ic{width:52px;height:52px;border-radius:16px;margin-bottom:20px}
.cred h3{font-size:20px;letter-spacing:-.01em;margin-bottom:8px}
.cred p{color:var(--steel);font-size:15px}
.cred.pink{background:var(--pink-ui);border-color:var(--pink-ui);color:#fff}
.cred.pink .ic{background:rgba(255,255,255,.18)}
.cred.pink .ic svg{stroke:#fff}
.cred.pink p{color:#fff}
.note{display:inline-block;background:#FFF6B3;color:#3a3200;font:500 13px/1.35 var(--body);padding:8px 12px;border-radius:8px;margin-bottom:22px}

/* contact page */
.cgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:start}
.cline{display:flex;gap:16px;align-items:center;padding:20px 0;border-bottom:1.5px solid var(--line)}
.cline b{display:block;font:600 20px var(--font-display);letter-spacing:-.01em}
.cline small{color:var(--steel)}
.copy{margin-left:auto;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-size:13.5px;cursor:pointer}
.cform{background:var(--blush);border-radius:28px;padding:clamp(24px,4vw,44px)}
.cform h2{font-size:clamp(28px,3vw,40px);margin-bottom:10px}
.cform > p{color:#6c4a5d;margin-bottom:24px}

/* ---------- responsive ---------- */
@media (max-width:1380px){
  .callblk{display:none}
}
@media (max-width:1180px){
  .menu > li > a,.menu > li > button{padding:10px 8px;font-size:15px}
  .trust .row{grid-template-columns:repeat(3,1fr)}
  .trust .it:nth-child(3){border-right:0}
  .trust .it:nth-child(n+4){border-top:1px solid var(--galv)}
}
@media (max-width:1024px){
  .menu,header.site .wrap > nav,header.site .end .btn{display:none}
  .mega{display:none}
  .burger,.callbtn{display:grid}
  header.site .wrap{height:72px}
  .logo{width:221px}
  .util .l span:nth-child(2),.util .r span:first-child{display:none}
  .vid{display:none}
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:280px}
  .tile.big{grid-row:span 1;grid-column:span 2}
  /* contrast: the tile and van-band words run wider over the photos here, so a stronger shade under them */
  .tile::after{background:linear-gradient(0deg,rgba(30,20,38,.9) 0%,rgba(30,20,38,.72) 50%,rgba(30,20,38,.2) 80%,rgba(30,20,38,0))}
  .vans::after{background:linear-gradient(0deg,rgba(30,20,38,.9),rgba(30,20,38,.72) 50%,rgba(30,20,38,.1) 80%),linear-gradient(90deg,rgba(30,20,38,.85),rgba(30,20,38,.2) 65%)}
  .steps{grid-template-columns:1fr 1fr;align-items:start}
  .step .bar{height:90px!important;opacity:1!important;margin-top:16px}
  .step:last-child{grid-column:span 2}
  .step p{min-height:0}
  .strip{grid-template-columns:1fr 1fr;height:auto}
  .strip figure{height:260px;margin-top:0!important}
  .about .g,.split,.phero .g,.cgrid,.areas .box{grid-template-columns:1fr}
  .rev .g{grid-template-columns:1fr 1fr}
  .score{grid-column:span 2}
  .opts3,.gal{grid-template-columns:1fr 1fr}
  .cg{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr 1fr}
  .person.lead{grid-row:auto;grid-column:span 2}
  footer.site .top{grid-template-columns:1fr 1fr}
  .phero .pic{aspect-ratio:16/10}
}
@media (max-width:680px){
  body{font-size:16px}
  /* No top bar on a phone (James 22 Oct 2026: "looks very odd"): it was down to the number and the two social
     buttons, and the header's own call button and the footer have both. */
  .util{display:none}
  .hero{min-height:0}
  .hero .wrap{padding-top:70px;padding-bottom:120px}
  .hero .media img{object-position:92% center}
  .hero .shade{background:linear-gradient(0deg,rgba(30,20,38,.95) 35%,rgba(30,20,38,.45) 80%,rgba(30,20,38,.3))}
  /* contrast over the video's sky: a darker chip under the same pink tint, white words, the tick on --pink-ui */
  .hero .kicker{background:linear-gradient(rgba(226,61,142,.16),rgba(226,61,142,.16)),rgba(30,20,38,.6);color:#fff}
  .hero .kicker i{background:var(--pink-ui)}
  .ctas .btn{width:100%}
  .trust .row{grid-template-columns:1fr 1fr}
  .trust .it{border-right:0!important;border-top:1px solid var(--galv)}
  .trust .it:last-child{grid-column:span 2}
  .bento{grid-template-columns:1fr}
  .tile.big{grid-column:auto}
  .tile.big h3{font-size:32px}
  .steps{grid-template-columns:1fr;gap:28px}
  .step:last-child{grid-column:auto}
  .step{display:grid;grid-template-columns:64px 1fr;column-gap:16px;align-items:start}
  .step .bar{grid-row:1/3;grid-column:1;height:64px!important;margin:0;border-radius:16px}
  .step .bar .num{left:0;right:0;top:12px;text-align:center;font-size:36px}
  .step .finial{display:none}
  .proc{padding-bottom:72px!important}
  .trust .it{flex-direction:column;align-items:flex-start;padding:18px 10px}
  .trust b,.trust small{white-space:normal}
  .bento{grid-auto-rows:minmax(260px,auto)}
  .tile.big{min-height:380px}
  .strip{grid-template-columns:1fr}
  .about .ph{height:380px}
  .about .ph .a{height:320px}
  .about .ph .b{padding:14px 16px}
  .about .ph .b img{width:170px}
  .facts{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .facts div{padding:12px}
  .facts b{font-size:22px}
  .rev .g,.opts3,.gal,.cg,.team{grid-template-columns:1fr}
  .score,.person.lead{grid-column:auto}
  .gal figure.tall{grid-row:auto;aspect-ratio:4/3}
  footer.site .top{grid-template-columns:1fr}
  .exg{grid-template-columns:1fr}
  .ex{padding:28px 0!important;border-right:0!important;grid-template-columns:60px 1fr}
  .collage{height:360px}
  .faq details p{padding-right:0}
  .cta .tel{font-size:24px}
}
/* Phones under 430px: the three facts stay equal thirds (QA Q1b-02). A column only grew because its
   longest word ("Manufacturer's", or "+2 years") was wider than a third, so the figure scales with the
   screen and stays on one line, the caption steps down to 12px at 360, and the side padding is 8px. */
@media (max-width:429px){
  .facts{gap:6px}
  .facts div{padding:12px 8px}
  .facts b{font-size:clamp(16px,5.4vw,22px);white-space:nowrap}
  .facts small{font-size:clamp(12px,calc(3.6vw - 1px),13.5px)}
}
/* ---------- quote builder ---------- */
.qsec{background:var(--galv)}
.qb{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:start}
.qb-vis{position:sticky;top:110px;display:grid;gap:14px}
.qb-card{background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(30,20,38,.45)}
.qb-draw{position:relative;background:#F3EFF5}
.qb-draw svg.scene{display:block;width:100%;height:auto}
.qb-open{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;background:#fff;border:0;border-radius:999px;padding:9px 14px;font:600 14px var(--font-display);color:var(--pink-deep);cursor:pointer;box-shadow:0 6px 16px -8px rgba(0,0,0,.3)}
.qb-open svg{width:16px;height:16px}
.qb-chips{display:flex;flex-wrap:wrap;gap:8px;padding:16px 18px 20px}
.qb-chips span{background:var(--galv);border-radius:999px;padding:7px 13px;font-size:14px}
.qb-chips span.p{background:var(--blush);color:var(--pink-deep);font-weight:500}
.qb-chips .empty{background:none;color:var(--steel);padding:0}
/* The leaves move as the Kent Gate preview's do (21 Oct 2026): 1.3s on its easing; swing leaves fold to .14 about the
   hinge each one names inline (transform-box view-box, so the drawing's own units, the same in Safari and Chrome); the
   sliding leaf runs back by --dx. .open is the play after each pick (quote.js playGate), .opened the Open button. */
.leaf{transition:transform 1.3s cubic-bezier(.16,1,.3,1);transform-box:view-box}
.qb-draw.open .leaf.swingL,.qb-draw.open .leaf.swingR,.opened .leaf.swingL,.opened .leaf.swingR{transform:scaleX(.14)}
.qb-draw.open .leaf.slide,.opened .leaf.slide{transform:translateX(var(--dx))}

.qb-panel{background:#fff;border-radius:28px;box-shadow:0 30px 60px -36px rgba(30,20,38,.45);overflow:hidden;min-width:0}
.qb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 26px 14px;flex-wrap:wrap}
.qb-top .st{font:600 14.5px var(--font-display);color:var(--pink-deep)}
.qb-fill{border:0;background:#FFF2C2;color:#5b4700;border-radius:999px;padding:8px 14px;font:500 13.5px var(--body);cursor:pointer}
.qb-prog{display:flex;gap:6px;padding:0 26px}
.qb-prog i{flex:1;height:5px;border-radius:5px;background:var(--blush-2)}
.qb-prog i.on{background:var(--pink)}
.qb-body{padding:26px 26px 6px}
.qb-body h3{font-size:clamp(24px,2.4vw,30px);margin-bottom:6px}
.qb-body .intro{color:var(--steel);margin-bottom:22px}
.qb-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 26px 26px}
.qb-foot .btn-outline{padding:13px 22px}
.qb-foot .btn-pink{margin-left:auto}

.fld{margin-bottom:22px}
.fl{display:block;font:600 15px var(--font-display);margin-bottom:10px}
.fl em{font:400 14px var(--body);color:var(--steel);font-style:normal}
.hint{font-size:13.5px;color:var(--steel);margin:-4px 0 10px}
.ferr{color:#C0263B;font-size:14px;font-weight:500;margin-top:8px;min-height:0}
.ferr:empty{display:none}
.fld.bad .cards,.fld.bad .segs,.fld.bad .pics,.fld.bad .icos,.fld.bad .sws{outline:2px solid #F3B4C0;outline-offset:6px;border-radius:12px}
.fld input[type=text],.fld input[type=tel],.fld input[type=email],.fld input:not([type]),.fld textarea{width:100%;border:1.5px solid #E2D9E6;border-radius:14px;padding:14px 15px;font:16px var(--body);color:var(--ink);background:#fff}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(226,61,142,.14)}
.fld.bad input,.fld.bad textarea{border-color:#E26A7E}
.qrow2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.cform .fld label{display:block;font:600 15px var(--font-display);margin-bottom:8px}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{position:relative;text-align:left;border:1.5px solid #EADFEF;border-radius:18px;background:#fff;padding:0;overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.card img{width:100%;height:110px;object-fit:cover}
.card .t{display:block;padding:12px 14px 14px}
.card b{display:block;font:600 16px var(--font-display)}
.card small{display:block;color:var(--steel);font-size:13.5px;line-height:1.35;margin-top:2px}
.tick{position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;border:1.5px solid #E2D9E6;color:#fff}
.tick svg{width:16px;height:16px}
[aria-pressed="true"] .tick{background:var(--pink);border-color:var(--pink)}
.card[aria-pressed="true"]{border-color:var(--pink);box-shadow:0 0 0 4px rgba(226,61,142,.14)}
.chips2{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid #EADFEF;background:#fff;border-radius:999px;padding:9px 14px;font:500 14.5px var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.chip[aria-pressed="true"]{border-color:var(--pink);background:var(--blush);color:var(--pink-deep)}
.chip .tx{width:18px;height:18px;border-radius:5px;flex:none}
.other{margin-top:16px;padding-top:16px;border-top:1px dashed #E7DDEB}
.other .fl{font-size:14px}
.segs{display:flex;flex-wrap:wrap;gap:8px}
.seg{border:1.5px solid #EADFEF;background:#fff;border-radius:12px;padding:11px 15px;font:500 15px var(--body);cursor:pointer}
.seg[aria-pressed="true"]{border-color:var(--pink-ui);background:var(--pink-ui);color:#fff}
.pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.picb{border:1.5px solid #EADFEF;background:#fff;border-radius:16px;padding:10px 8px 10px;cursor:pointer;display:grid;gap:6px;justify-items:center;font:500 13.5px var(--body);text-align:center;position:relative}
.picb svg.pic{width:100%;max-width:96px;height:auto;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.picb[aria-pressed="true"]{border-color:var(--pink);box-shadow:0 0 0 4px rgba(226,61,142,.14);color:var(--pink-deep)}
.picb[aria-pressed="true"] svg.pic{stroke:var(--pink-deep)}
.sws{display:flex;flex-wrap:wrap;gap:10px}
.swb{border:1.5px solid #EADFEF;background:#fff;border-radius:14px;padding:8px 12px 8px 8px;display:inline-flex;gap:9px;align-items:center;cursor:pointer;font:500 14.5px var(--body)}
.swb i{width:28px;height:28px;border-radius:8px;border:1px solid rgba(0,0,0,.12)}
.swb[aria-pressed="true"]{border-color:var(--pink);box-shadow:0 0 0 4px rgba(226,61,142,.14)}
/* each tile wide enough for its words on one line ("Won't open or close" needs about 158px), 3 Nov 15:58 */
.icos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,164px),1fr));gap:10px}
.icob{border:1.5px solid #EADFEF;background:#fff;border-radius:16px;padding:14px 10px;cursor:pointer;display:grid;gap:8px;justify-items:center;font:500 14px var(--body);text-align:center;position:relative}
.icob > svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icob[aria-pressed="true"]{border-color:var(--pink);background:var(--blush);color:var(--pink-deep)}
.icob[aria-pressed="true"] > svg{stroke:var(--pink-deep)}
.icob .tick{width:22px;height:22px;right:6px;top:6px}
.sl{display:flex;align-items:center;gap:14px}
.sl input[type=range]{flex:1;accent-color:var(--pink);height:28px;min-width:0}
.sl output{font:600 17px var(--font-display);min-width:70px;text-align:right;color:var(--pink-deep)}
.ns{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--steel);margin-top:6px;cursor:pointer}
.ns input{accent-color:var(--pink);width:16px;height:16px}
.sl.off{opacity:.4}
.tg{display:flex;width:100%;justify-content:space-between;align-items:center;gap:14px;border:1.5px solid #EADFEF;background:#fff;border-radius:16px;padding:14px 16px;cursor:pointer;text-align:left;font:500 15px var(--body)}
.tg .sw{width:50px;height:30px;border-radius:30px;background:#DCD5E0;position:relative;flex:none;transition:background .15s}
.tg .sw::after{content:"";position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}
.tg[aria-checked="true"] .sw{background:var(--pink)}
.tg[aria-checked="true"] .sw::after{left:24px}
.stp{display:inline-flex;align-items:center;border:1.5px solid #EADFEF;border-radius:14px;overflow:hidden}
.stp button{width:46px;height:44px;border:0;background:#fff;font:600 20px var(--font-display);cursor:pointer;color:var(--pink-deep)}
.stp output{min-width:46px;text-align:center;font:600 17px var(--font-display)}
.qdemo{color:var(--steel);font-size:14px;margin-top:18px}

/* after sending */
.thanks{padding:28px 26px 26px}
.th-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:26px}
.big-tick{width:52px;height:52px;border-radius:50%;background:var(--pink);display:grid;place-items:center;flex:none;color:#fff}
.big-tick svg{width:26px;height:26px}
.th-head h3{font-size:26px;margin-bottom:6px}
.th-head p{color:var(--steel)}

/* ---------- Tommy's questions (2 Nov 2026): the new parts of the builder, all qf- ---------- */
/* 44px tap targets everywhere in the builder */
.qb-panel .chip,.qb-panel .seg{min-height:44px}
.fld.bad .chips2,.fld.bad .qf-ticks{outline:2px solid #F3B4C0;outline-offset:6px;border-radius:12px}
.qb-open{min-height:44px}
/* the first question's tiles (and the gate and fence types): a line drawing, a tick, the words */
.qf-tiles{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.qf-tile{align-content:start;padding:12px 8px;min-height:44px}
.qf-tile .tick{width:22px;height:22px;right:7px;top:7px}
.qf-tile .tick svg{width:13px;height:13px}
.qf-tt{line-height:1.3}
/* step 1 since 3 Nov 2026 (James): five category cards, one choice, then (round 2, 11:19) a sixth, "Prefer to call
   us?". Six cards, two to a row. Round 3 (12:21): each card as tall as its own words, so a short line leaves no white
   space under it; the call card stretches to the card beside it. The gate job question: two labelled groups of drawn
   tiles, one choice. */
.qf-cats{align-items:start}
.qf-cats .card{display:flex;flex-direction:column;justify-content:flex-start;min-height:44px}
.qf-cats .card img{display:block}
/* The call card (round 3): the Parkers van behind it (a taller box, so the livery sits in the top of the card), plum
   fading in over the lower part where the white words sit (4.5:1 or more even on the van's white side), then the
   number and the email, a link each, 44px tall. Not a choice: no tick, never pressed. No photo: plain plum. */
.qf-cats .qf-call{align-self:stretch;justify-content:flex-end;cursor:auto;color:#fff;background:var(--plum);border-color:var(--plum)}
.qf-call .qf-call-ph{position:absolute;left:0;bottom:0;width:100%;height:135%;object-fit:cover;object-position:0 40%}
.qf-call .t{position:relative;isolation:isolate;padding:2px 12px 6px}
.qf-call .t::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-36px;bottom:0;background:linear-gradient(180deg,rgba(30,20,38,0),rgba(30,20,38,.74) 36px,rgba(30,20,38,.9))}
.qf-call b{color:#fff;text-wrap:balance;margin-bottom:2px}
.qf-call-l{display:flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;font:600 13.5px/1.35 var(--body);overflow-wrap:anywhere}
.qf-call-ic{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:var(--pink-ui);vertical-align:middle}
.qf-call-ic svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.qf-call-l:hover > span{text-decoration:underline;text-underline-offset:3px}
.qf-call-l:focus-visible{outline:2px solid #fff;outline-offset:1px;border-radius:6px}
.qf-gl{font:600 15px var(--font-display);margin:0 0 10px}
.qf-gl + .pics{margin-bottom:18px}
.qf-jobs .pics:last-child{margin-bottom:0}
.fld.bad .qf-jobs{outline:2px solid #F3B4C0;outline-offset:6px;border-radius:12px}
/* the drawing (3 Nov 2026): bi-fold leaves concertina, each side's outer leaf on its post and the inner leaf on the
   outer one's edge (quote.js names the hinges and the carry, --bx/--by), the inner leaf shading as it turns away;
   a barrier's arm lifts on its pivot. Same timing as the other leaves; reduced motion moves nothing (line 18). */
.qb-draw.open .leaf.bfo.bfL,.opened .leaf.bfo.bfL{transform:scaleX(.3) skewY(-15deg)}
.qb-draw.open .leaf.bfo.bfR,.opened .leaf.bfo.bfR{transform:scaleX(.3) skewY(15deg)}
.qb-draw.open .leaf.bfi.bfL,.opened .leaf.bfi.bfL{transform:translate(var(--bx),var(--by)) scaleX(.3) skewY(15deg)}
.qb-draw.open .leaf.bfi.bfR,.opened .leaf.bfi.bfR{transform:translate(var(--bx),var(--by)) scaleX(.3) skewY(-15deg)}
.leaf .fsh{transition:opacity 1.3s cubic-bezier(.16,1,.3,1)}
.qb-draw.open .leaf.bfi .fsh,.opened .leaf.bfi .fsh{opacity:.38}
.qb-draw.open .leaf.bfo .fsh,.opened .leaf.bfo .fsh{opacity:.16}
.qb-draw.open .leaf.boom,.opened .leaf.boom{transform:rotate(-72deg)}
/* access control: a tick list with every option's words on one line (James, 3 Nov 2026 15:58: "very jammed"). Two
   columns only where each is at least 300px wide (the longest name, "Automatic opening on exit", needs about 272px
   with its tick and picture), else one; each row is as tall as its own words. A bracketed part, and what follows
   "Not sure,", sits on a smaller muted line under the name (quote.js tickWords()). */
.qf-ticks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(300px,calc(50% - 5px))),1fr));gap:8px}
.qf-tk{display:flex;align-items:center;gap:10px;min-height:52px;padding:9px 12px;border:1.5px solid #EADFEF;border-radius:14px;background:#fff;cursor:pointer;text-align:left;font:500 14.5px/1.3 var(--body);color:var(--ink)}
.qf-tk > svg{width:22px;height:22px;flex:none;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qf-tl{min-width:0;overflow-wrap:break-word}
.qf-tl small{display:block;font:400 12.5px/1.25 var(--body);color:var(--steel);margin-top:1px}
.qf-tb{width:22px;height:22px;border-radius:6px;border:1.5px solid #D9CCE0;background:#fff;display:grid;place-items:center;flex:none;color:#fff}
.qf-tb svg{width:14px;height:14px}
.qf-tk[aria-pressed="true"]{border-color:var(--pink);background:var(--blush);color:var(--pink-deep)}
.qf-tk[aria-pressed="true"] .qf-tb{background:var(--pink);border-color:var(--pink)}
.qf-tk[aria-pressed="true"] > svg{stroke:var(--pink-deep)}
/* measurements in mm or m, with the unit inside the box */
.qf-num{position:relative;max-width:260px}
.fld .qf-num input{padding-right:54px}
.qf-unit{position:absolute;right:16px;top:50%;transform:translateY(-50%);font:600 15px var(--font-display);color:var(--steel);pointer-events:none}
.qf-num.off{opacity:.55}
.qf-num.off:focus-within{opacity:1}
/* a tick box (not sure of the measurements, length not sure yet) */
.qf-box{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 0;cursor:pointer;font:500 15px/1.35 var(--body)}
.qf-box input{position:absolute;left:0;top:50%;width:26px;height:26px;margin:-13px 0 0;opacity:0;cursor:pointer}
.qf-box .qf-tb{width:26px;height:26px;border-radius:7px}
.qf-box input:checked + .qf-tb{background:var(--pink);border-color:var(--pink)}
.qf-box input:focus-visible + .qf-tb{box-shadow:0 0 0 4px rgba(226,61,142,.25);border-color:var(--pink)}
.qf-sub{font:600 16px var(--font-display);margin:4px 0 14px;padding-top:16px;border-top:1px solid #F0E8F3}
/* photos and drawings */
.qf-slots{display:grid;gap:12px}
.qf-slot{border:1.5px dashed #E0CFE6;border-radius:18px;background:#FDF8FB;padding:14px;min-width:0}
.qf-slot-h{display:flex;gap:12px;align-items:flex-start}
.qf-slot-h > svg{width:24px;height:24px;flex:none;stroke:var(--pink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.qf-slot-h b{display:block;font:600 15px/1.3 var(--font-display)}
.qf-slot-h small{display:block;color:var(--steel);font-size:13.5px;margin-top:2px}
.qf-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin-top:12px}
.qf-thumbs:empty{display:none}
.qf-add{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;padding:10px 18px;border-radius:999px;background:#fff;border:1.5px solid var(--pink);color:var(--pink-deep);font:600 14.5px var(--font-display);cursor:pointer;max-width:100%}
.qf-add input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.qf-add svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.qf-add:focus-within{box-shadow:0 0 0 4px rgba(226,61,142,.25)}
.qf-ph{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#EFE9F2;border:1.5px solid #EADFEF;min-width:0}
.qf-ph img{width:100%;height:100%;object-fit:cover;display:block}
.qf-doc{display:grid;place-items:center;align-content:center;gap:4px;height:100%;padding:8px;text-align:center;min-width:0}
.qf-doc svg{width:26px;height:26px;stroke:var(--pink-deep);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qf-doc small{font-size:11.5px;line-height:1.25;color:var(--ink);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.qf-wait{display:block;height:100%;background:linear-gradient(90deg,#EFE9F2,#F8F4FA,#EFE9F2);background-size:200% 100%;animation:qfwait 1.2s linear infinite}
@keyframes qfwait{to{background-position:-200% 0}}
.qf-bar{position:absolute;left:8px;right:8px;bottom:8px;height:6px;border-radius:6px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(35,28,41,.08)}
.qf-bar i{display:block;height:100%;width:0;border-radius:6px;background:var(--pink);transition:width .2s}
.qf-ok{position:absolute;left:6px;bottom:6px;width:24px;height:24px;border-radius:50%;background:#1a9e5a;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.qf-ok svg{width:14px;height:14px}
.qf-ph.is-doc .qf-ok{top:6px;bottom:auto} /* a drawing's name sits at the bottom, so its tick goes top left */
.qf-x{position:absolute;right:0;top:0;width:44px;height:44px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer}
.qf-x span{width:26px;height:26px;border-radius:50%;background:rgba(35,28,41,.78);color:#fff;display:grid;place-items:center}
.qf-x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round}
.qf-x:focus-visible{outline:none}
.qf-x:focus-visible span{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--pink)}
.qf-ph.is-fail{border-color:#E26A7E}
.qf-retry,.qf-failed{position:absolute;left:0;right:0;bottom:0;min-height:44px;border:0;background:#C0263B;color:#fff;font:600 12px/1.2 var(--body);padding:6px;text-align:center}
.qf-retry{cursor:pointer;width:100%}
.qf-failed{display:grid;place-items:center}
.qf-pherr{margin:10px 0 0;padding:0;list-style:none;color:#C0263B;font-size:13.5px;font-weight:500;overflow-wrap:anywhere}
.qf-pherr:empty{display:none}
.qf-count{margin-top:12px;font:600 14px var(--font-display);color:var(--steel)}
.qf-phmsg{color:#C0263B;font-size:14px;font-weight:500;margin-top:8px}
.qf-phmsg:empty{display:none}
/* check and send */
.qf-grp{border:1.5px solid #EADFEF;border-radius:18px;padding:12px 16px 6px;margin-bottom:12px;background:#fff;min-width:0}
.qf-grp.bad{border-color:#F3B4C0}
.qf-grp-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.qf-grp-h h4{font:600 16px/1.3 var(--font-display);margin:0;min-width:0}
.qf-chg{min-height:44px;min-width:44px;padding:8px 16px;border-radius:999px;border:1.5px solid #EADFEF;background:#fff;color:var(--pink-deep);font:600 14px var(--font-display);cursor:pointer;flex:none}
.qf-chg:hover{border-color:var(--pink)}
.qf-gmiss{color:#C0263B;font-size:14px;font-weight:500;margin:0 0 8px}
.qf-dl{margin:0}
.qf-dl > div{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:4px 14px;padding:9px 0;border-top:1px solid #F3EEF5}
.qf-dl dt{color:var(--steel);font-size:14px;line-height:1.4}
.qf-dl dd{margin:0;font-size:14.5px;line-height:1.4;font-weight:500;overflow-wrap:anywhere;white-space:pre-line}
.qf-thumbs.qf-mini{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px;margin:6px 0 0}
.qf-grp .qf-count{margin:8px 0 8px}
.qf-ack{font-size:14px;color:var(--steel);margin:16px 0 4px}
.qf-ack a{color:var(--pink-deep);text-decoration:underline;text-underline-offset:2px}
.qf-backto{justify-content:flex-end}
/* the thanks */
.qf-thanks .th-head{margin-bottom:22px}
.qf-thanks .th-head p + p{margin-top:8px}
.qf-thanks .th-head a{color:var(--pink-deep);font-weight:600;white-space:nowrap}
.qf-ref{color:var(--ink)!important}
.qf-ref b{font-family:var(--font-display);color:var(--pink-deep);letter-spacing:.02em}
.qf-em{color:var(--ink);overflow-wrap:anywhere}
.qf-warn{background:#FFF6D9;color:#5b4700!important;border-radius:12px;padding:10px 14px;font-size:14.5px;overflow-wrap:anywhere}
.qf-thanks .qf-warn a{white-space:normal}
.qf-again{margin-top:4px}
.qf-again .btn{padding:11px 18px;font-size:14.5px}

.mail{font-size:14px}
.mail-top{display:flex;align-items:center;gap:7px;background:#F1EEF3;padding:12px 16px;color:var(--steel);font-size:13px}
.mail-top i{width:10px;height:10px;border-radius:50%;background:#D7D1DB}
.mail-top span{margin-left:10px;display:inline-flex;gap:6px;align-items:center}
.mail-top svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.mail-meta{padding:16px 18px;border-bottom:1px solid #F0E8F3}
.mail-subj{font:600 18px var(--font-display);margin-bottom:10px;letter-spacing:-.01em}
.mail-from{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--steel)}
.mail-from b{color:var(--ink)}
.mail-from .av{width:34px;height:34px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;font:700 14px var(--font-display);flex:none}
.mail-from time{margin-left:auto;white-space:nowrap}
.mail-from > div{min-width:0;overflow-wrap:anywhere}
.mail-body{padding:16px 18px 20px;max-height:640px;overflow:auto}
.em-band{display:flex;align-items:center;gap:12px;background:var(--plum);color:#fff;border-radius:14px;padding:12px 14px;margin-bottom:14px}
.em-band img{height:30px;width:auto}
.em-band b{display:block;font:600 15px var(--font-display)}
.em-band span{font-size:12.5px;color:#C7BCCF}
.em-band em{margin-left:auto;font-style:normal;font-size:12.5px;background:rgba(255,255,255,.1);padding:5px 9px;border-radius:8px}
.em-draw{border-radius:12px;overflow:hidden;margin-bottom:12px;border:1px solid #EEE7F1}
.em-h{font:600 13px var(--font-display);color:var(--pink-deep);margin:14px 0 6px}
.em-t{width:100%;border-collapse:collapse}
.em-t td{padding:6px 0;border-bottom:1px solid #F3EEF5;vertical-align:top}
.em-t td:first-child{color:var(--steel);width:44%;padding-right:10px}
.em-ph{display:flex;gap:8px;flex-wrap:wrap}
.em-ph img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.em-ph figure{margin:0;width:64px}
.em-ph figcaption{font-size:11px;line-height:1.25;color:var(--steel);margin-top:3px;overflow-wrap:anywhere}
.em-ph .qf-doc{width:64px;height:64px;border-radius:8px;background:#F3EFF5;padding:0}
.em-t td:last-child{white-space:pre-line;overflow-wrap:anywhere}

@media (max-width:1024px){
  .qb{grid-template-columns:1fr}
  .qb-vis{position:relative;top:0}
  /* As the preview on phones and tablets: no chips under the drawing, its softer shadow. */
  .qb-chips{display:none}
  .qb-card{box-shadow:0 10px 24px -14px rgba(24,22,29,.35)}
}
/* The drawing floats just under the header while the questions scroll beneath it, as on the preview (James, 21 Oct
   2026): CSS position:sticky only. Portrait only, since on a landscape phone it would cover the questions. The
   email copy on the thank you screen (.sent) stays in the page. The questions keep clear of it when focused. */
@media (max-width:1024px) and (orientation:portrait){
  .qb-vis{position:sticky;top:calc(72px + env(safe-area-inset-top,0px));z-index:5}
  .qb-vis.sent{position:relative;top:0;z-index:auto}
  .qb-panel *{scroll-margin-top:calc(72px + env(safe-area-inset-top,0px) + (100vw - 32px) / 2.25 + 16px)}
}
@media (min-width:601px) and (max-width:1024px) and (orientation:portrait){
  body.admin-bar .qb-vis{top:calc(var(--wp-admin--admin-bar--height,32px) + 72px + env(safe-area-inset-top,0px))}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr 1fr}
  .card img{height:84px}
  .qf-call .t{padding:2px 8px 4px}
  .qf-call-l{font-size:12.5px}
  .qf-call-ic{width:22px;height:22px;margin-right:6px}
  .qrow2{grid-template-columns:1fr}
  .qb-body,.qb-top,.qb-foot,.thanks{padding-left:18px;padding-right:18px}
  .qb-prog{padding:0 18px}
  .pics{grid-template-columns:repeat(3,1fr)}
  .qf-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qf-num{max-width:none}
  .qf-dl > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .qf-slot{padding:12px}
  .qf-thumbs{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
}
/* Back and "Send my enquiry" no longer fit side by side under about 440px: Send takes its own full-width row under
   Back. In the drawn email the time drops under the sender, so a long reply-to address never pushes it out. */
@media (max-width:440px){
  .qb-foot.qf-send{flex-wrap:wrap;row-gap:12px}
  .qb-foot.qf-send .btn-pink{flex:1 0 100%;justify-content:center;margin-left:0}
  .mail-from{flex-wrap:wrap;row-gap:2px}
  .mail-from time{flex:0 0 100%;margin-left:0;padding-left:44px;box-sizing:border-box}
}
/* Under 360px the one column of ticks is narrower than the longest name needs at full size, so the tick, the
   picture, the gaps and the words are a little smaller there: still one line each, still at least 44px to tap. */
@media (max-width:359px){
  .qf-tk{gap:7px;padding:8px 9px;font-size:13px;min-height:48px}
  .qf-tk > svg{width:18px;height:18px}
  .qf-tk .qf-tb{width:20px;height:20px}
  .qf-tl small{font-size:11.5px}
}
/* After sending on a phone or tablet the thanks comes first and the drawn email follows it. */
@media (max-width:1024px){
  .qb-vis.sent{order:2}
}

/* =====================================================================================================
   WordPress
   Everything above is the design's own stylesheet with two changes: the mega menu's panel is #fcfcfc
   (asked for on 21 Oct 2026) and one byte-identical repeat is gone (.callblk{display:none} sat in both
   the 1380px and the 1180px queries). Below: what a real site needs that the single-file design did not.
   ===================================================================================================== */

/* "Skip to content": out of sight until a keyboard user tabs to it. */
.skip{position:absolute;left:max(12px,env(safe-area-inset-left,0px));top:-200px;z-index:100;background:var(--plum);color:#fff;font:600 15px var(--font-display);padding:12px 18px;border-radius:12px;box-shadow:0 10px 26px -10px rgba(30,20,38,.6)}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
/* Its target, <main id="main" tabindex="-1">, takes focus without a ring round the whole page and lands just
   under the sticky header rather than behind it (QA Q3b-12). */
#main:focus{outline:none}
#main{scroll-margin-top:84px}
@media (max-width:1024px){#main{scroll-margin-top:72px}}

/* The phone numbers and email addresses in the header and footer are links now; they look as before. */
.util .r a:hover,.callblk a:hover,footer.site .top li a:hover{color:#fff}
.callblk a:hover{color:var(--pink-deep)}

/* The logos carry their width and height (so nothing jumps as they load); the footer's is sized by its
   width alone, as in the design. */
footer.site .top img{height:auto}

/* The privacy policy link after the small print. Underlined: it sits in text of the same colour. */
footer.site .bottom a{text-decoration:underline;text-underline-offset:3px}
footer.site .bottom a:hover{color:#fff}

/* The band over the footer: its picket edge's height is set by assets/css/pickets.css (the logo's pickets,
   agent B), which also keeps the space before the edge is drawn. No aspect-ratio here: with that fixed
   height it would widen the edge past the screen. */

/* Logged in: the sticky header sits under WordPress's toolbar (the toolbar scrolls away on phones). */
@media (min-width:601px){body.admin-bar header.site{top:calc(var(--wp-admin--admin-bar--height,32px) + env(safe-area-inset-top,0px))}}

/* =====================================================================================================
   Elementor
   Each page is Elementor containers carrying the design's classes, with Elementor's Heading, Text editor
   and Button widgets for the words. These rules undo what Elementor adds on top, so the design's rules
   lay them out as in the design. They use as few classes as possible, so a setting changed in
   Elementor's panel (which Elementor writes with more) still wins. Layouts for particular containers
   (.head, .ctas, .workfoot...) are in widgets.css with the widgets that use them.
   ===================================================================================================== */

/* Containers are plain boxes: no padding or gap of Elementor's own (it adds 10px and 20px). */
.e-con{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;--gap:0px;--row-gap:0px;--column-gap:0px}

/* Headings: Elementor sets line-height 1 on every heading widget; the design uses 1.05 (and its own
   rules, with more classes, still set the rest). A heading widget set to a paragraph keeps the text's. */
:where(h1,h2,h3,h4,h5,h6).elementor-heading-title{line-height:1.05}
:where(p,div,span).elementor-heading-title{line-height:inherit}

/* Elementor takes the shadow off every link in a page: the design's pink buttons keep theirs. */
.elementor a.btn-pink{box-shadow:0 10px 26px -10px rgba(226,61,142,.75)}

/* Buttons. A Button widget's classes ("btn btn-pink") land on the widget's own box, not on its link, so
   the box would be a second, padded pill around Elementor's grey button. The box becomes a plain box
   and the link gets the design's button: the same values as .btn and .btn-pink, .btn-ghost, .btn-dark,
   .btn-outline and .btn-white above. */
.elementor-widget-button.btn{display:block;gap:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;white-space:normal;transform:none;transition:none;cursor:auto;font:inherit;color:inherit}
.elementor-widget-button.btn:hover{background:none;transform:none}
.elementor-widget-button.btn .elementor-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:16px;line-height:inherit;padding:15px 26px;border-radius:999px;white-space:nowrap;border:0;cursor:pointer;fill:currentColor;transition:transform .15s,box-shadow .15s,background .15s}
.elementor-widget-button.btn .elementor-button:hover{transform:translateY(-1px)}
.elementor-widget-button.btn .elementor-button-content-wrapper{gap:10px;align-items:center}
.elementor-widget-button.btn .elementor-button svg{width:18px;height:18px;flex:none}
.elementor-widget-button.btn-pink .elementor-button{background:var(--pink-ui);color:#fff;box-shadow:0 10px 26px -10px rgba(226,61,142,.75)}
.elementor-widget-button.btn-pink .elementor-button:hover{background:#C81F71}
.elementor-widget-button.btn-ghost .elementor-button{border:1.5px solid rgba(255,255,255,.5);color:#fff;background:transparent}
.elementor-widget-button.btn-dark .elementor-button{background:var(--plum);color:#fff}
.elementor-widget-button.btn-outline .elementor-button{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.elementor-widget-button.btn-white .elementor-button{background:#fff;color:var(--pink-deep)}
/* Elementor turns a button's words white on hover, focus and once visited: right for the filled
   buttons, invisible on the outline and white ones. */
.elementor-widget-button.btn-outline .elementor-button:is(:hover,:focus,:visited){color:var(--ink)}
.elementor-widget-button.btn-white .elementor-button:is(:hover,:focus,:visited){color:var(--pink-deep)}
/* Phones: the design's full-width buttons in a row of buttons (.ctas .btn{width:100%}). */
@media (max-width:680px){.ctas .elementor-widget-button.btn .elementor-button{width:100%}}

/* =====================================================================================================
   Scroll reveal (James, 21 Oct 2026: "classy and professional")
   As each block comes into view it fades in and lifts 16px, once, on the design's easing. app.js (initReveal)
   sets data-rv="0" only on blocks wholly below the screen when the page opens, "go" as each comes up into
   view (--rv-d staggers items that arrive together), then "1" when it has finished, which carries no styles,
   so nothing is left with a transform. Screen only, and only with no reduced-motion preference: printing,
   reduced motion and no JavaScript all show every block as it is.
   ===================================================================================================== */
@media screen and (prefers-reduced-motion:no-preference){
  [data-rv="0"]{opacity:0!important;transform:translateY(16px)!important;transition:none!important}
  [data-rv="go"]{transition-property:opacity,transform!important;transition-duration:.7s!important;transition-timing-function:cubic-bezier(.16,1,.3,1)!important;transition-delay:var(--rv-d,0ms)!important}
  [data-rv="now"]{transition:none!important}
}