/* Contact page: the numbers and form opener, "Which number should I call?", licensed and insured, onward links */
:root { --c-a: #6cc43f; --c-b: #f1f4ee; --c-c: #e8b23a; }

/* ---------- opener ---------- */
.cop { position: relative; background: var(--chalk); overflow: clip; padding: calc(var(--tb) + var(--hh) + clamp(16px, 2.6vh, 34px)) 0 clamp(24px, 3.4vh, 44px); }
.cop__hills { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; overflow: clip; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 38%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 38%, #000 100%); }
.cop__hills-img { position: absolute; inset: 0 -6% -10% -6%; background: url("../../img/hampshire-south-downs.webp") 50% 60% / cover; opacity: .75; }
.cop__hills::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(238, 241, 234, .8) 0%, rgba(238, 241, 234, .45) 48%, rgba(238, 241, 234, 0) 100%); }
.cop__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(30px, 5vw, 96px); align-items: start; }
.cop__copy { display: grid; gap: 18px; align-content: start; padding-top: 6px; }
.cop__title { font: 800 clamp(2.5rem, 4.6vw, 4.6rem)/.98 var(--display); font-stretch: 74%; letter-spacing: -.01em; color: var(--ink); }
.cop__lede { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: var(--text); }
.cop__phones { display: grid; border-top: 1px solid var(--line); }
.cop__phones li { border-bottom: 1px solid var(--line); }
.cline { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 10px 18px 10px 0; text-decoration: none; color: var(--ink); isolation: isolate; }
.cline::before { content: ""; position: absolute; inset: 0 -14px; border-radius: 18px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); z-index: -1; }
.cline:hover::before, .cline:focus-visible::before { transform: none; }
.cline:hover, .cline:focus-visible { color: var(--white); }
.cline__ring { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--brand); transition: background .4s, transform .5s var(--ease); }
.cline__ring svg { width: 24px; fill: var(--ink); }
.cline__ring { position: relative; }
.motion .cline__ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: cline-ripple 3s cubic-bezier(.2, .7, .3, 1) infinite; pointer-events: none; }
.motion .cop__phones li:nth-child(2) .cline__ring::after { animation-delay: 1s; }
.motion .cop__phones li:nth-child(3) .cline__ring::after { animation-delay: 2s; }
@keyframes cline-ripple { 0% { box-shadow: 0 0 0 0 rgba(80, 170, 38, .55); } 70%, 100% { box-shadow: 0 0 0 18px rgba(80, 170, 38, 0); } }
.cline:hover .cline__ring { transform: rotate(-14deg) scale(1.06); }
.cline__area { font-weight: 700; font-size: 1rem; color: var(--muted); transition: color .4s; }
.cline:hover .cline__area, .cline:focus-visible .cline__area { color: rgba(255, 255, 255, .78); }
.cline--mail .cline__num { font: 700 clamp(1.05rem, 1.4vw, 1.3rem)/1.2 var(--body, inherit); white-space: normal; overflow-wrap: anywhere; }
.cline__num { font: 800 clamp(1.9rem, 2.9vw, 2.75rem)/1 var(--display); font-stretch: 80%; letter-spacing: .005em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cop__which { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 18px 6px 6px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(12, 42, 32, .45); text-decoration: none; font-weight: 600; color: var(--text); }
.cop__which::before { content: ""; width: 34px; height: 34px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6.3 7-12a7 7 0 0 0-14 0c0 5.7 7 12 7 12z' fill='%236cc43f'/%3E%3Ccircle cx='12' cy='10' r='2.6' fill='%230c2a20'/%3E%3C/svg%3E") center / 20px no-repeat; }
.cop__which strong { color: var(--trail); white-space: nowrap; }
.cop__which::before, .cop__which svg { flex: none; }
.cop__which svg { width: 18px; fill: none; stroke: var(--trail); stroke-width: 2.2; transition: transform .35s var(--ease); }
.cop__which:hover svg { transform: translateY(3px); }
.cop__form { position: relative; padding: 0 0 18px 18px; }
.cop__outline { position: absolute; left: 0; bottom: 0; top: 58px; right: 18px; border: 2px solid var(--brand); border-radius: 30px; pointer-events: none; }
.cop__formh { position: relative; height: 1.1em; font: 800 clamp(1.6rem, 2.2vw, 2rem)/1.1 var(--display); font-stretch: 80%; white-space: nowrap; color: var(--ink); margin: 0 0 12px 4px; }
.cop__form .form { gap: 10px; padding: 20px 24px 22px; }
.cop__form .form__type { gap: 4px; }
.cop__form .form__type legend, .cop__form .field > span { margin-bottom: 4px; line-height: 1.4; }
.cop__form .seg span { padding-block: 9px; line-height: 1.4; }
.cop__form .field input { padding: 9px 12px; line-height: 1.4; }
.cop__form .field textarea { height: 64px; min-height: 64px; padding: 9px 12px; line-height: 1.4; }
.cop__form .btn--lg { padding-block: .9em; }
.cop__form .form__row--3 { grid-template-columns: 1fr 1.05fr 1.25fr; gap: 12px; }

/* ---------- which number ---------- */
.no-js .which__find, .no-js .which__say { display: none; }
.which { position: relative; overflow-anchor: none; background: var(--ink); color: rgba(255, 255, 255, .86); padding: clamp(64px, 5.6vw, 96px) 0; overflow: clip; }
.which__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 15% 10%, rgba(31, 107, 83, .75), transparent 60%), radial-gradient(ellipse 40% 50% at 85% 100%, rgba(31, 107, 83, .5), transparent 60%); background-repeat: no-repeat; background-size: 150% 150%, 150% 150%; background-position: 0% 0%, 100% 100%; }
.which__grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.which__copy { display: grid; gap: 18px; align-content: center; }
.which__lede { font-size: clamp(1.0625rem, 1.25vw, 1.2rem); }
.which__find { display: grid; gap: 10px; }
.which__label { font-weight: 700; font-size: .95rem; color: var(--white); }
.which__field { position: relative; }
.which__field svg { position: absolute; left: 20px; top: 50%; width: 22px; translate: 0 -50%; fill: none; stroke: var(--brand-hi); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.which__field input { width: 100%; font: 700 1.2rem/1.2 var(--body); color: var(--white); padding: 17px 20px 17px 56px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); transition: border-color .3s, background .3s, box-shadow .3s; }
.which__field input::placeholder { color: rgba(255, 255, 255, .62); font-weight: 600; }
.which__field input:focus { outline: none; border-color: var(--brand-hi); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 4px rgba(108, 196, 63, .25); }
.which__try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .95rem; }
.which__try > span { color: rgba(255, 255, 255, .7); margin-right: 2px; }
.which__try button { min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: .95rem; color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); transition: background .3s, color .3s, box-shadow .3s; }
.which__try button:hover, .which__try button.is-on { background: var(--brand); color: var(--ink); box-shadow: none; }
.which__say { min-height: 1.6em; font-weight: 700; font-size: 1.05rem; color: var(--white); }
.which__say strong { color: var(--brand-hi); }
.which__nums { display: grid; gap: 8px; }
.wnum a { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 13px 20px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); text-decoration: none; color: var(--white); transition: background .45s var(--ease), box-shadow .45s, opacity .45s, transform .5s var(--ease); }
.wnum a:hover { background: rgba(255, 255, 255, .1); }
.wnum__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.wnum--a { --c: var(--c-a); }
.wnum--b { --c: var(--c-b); }
.wnum--c { --c: var(--c-c); }
.wnum__area { font-weight: 700; }
.wnum__area small { margin-left: 8px; font-weight: 600; font-size: .88rem; color: rgba(255, 255, 255, .66); white-space: nowrap; }
.wnum__num { font: 800 clamp(1.5rem, 2vw, 1.95rem)/1 var(--display); font-stretch: 80%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.which.has-pick .wnum:not(.is-lit) a { opacity: .45; }
.wnum.is-lit a { background: var(--c); color: var(--ink); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); transform: translateX(10px); }
.wnum.is-lit .wnum__area small { color: rgba(12, 42, 32, .75); }
.wnum.is-lit .wnum__dot { background: var(--ink); box-shadow: 0 0 0 4px rgba(12, 42, 32, .2); }
.which__say a { display: inline-block; padding-block: 12px; margin-block: -12px; margin-left: 6px; color: var(--brand-hi); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.which__map { position: relative; display: grid; gap: 14px; }
.cmap { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: min(72svh, 680px); border-radius: var(--dome); overflow: clip; background: #0a221a; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 90px -40px rgba(0, 0, 0, .7); cursor: crosshair; }
.cmap .tmap { --k: .1; }
.cmap .tmap__sea { fill: #0a221a; }
.cmap .tmap__n { fill: #0f3027; stroke: rgba(255, 255, 255, .06); stroke-width: .08; }
.cmap .tmap__s { fill: #16483a; stroke: rgba(255, 255, 255, .22); stroke-width: .1; }
.cmap__area { opacity: .2; }
.cmap__area circle { transform-box: fill-box; transform-origin: center; }
.cmap__area--a { fill: var(--c-a); }
.cmap__area--b { fill: var(--c-b); opacity: .15; }
.cmap__area--c { fill: var(--c-c); opacity: .28; }
.cmap .tmap__dot { cursor: pointer; }
.cmap .tmap__dot.is-out { visibility: hidden; }
.cmap .tmap__dot circle { r: calc(var(--k) * 6px); stroke: #0a221a; stroke-width: calc(var(--k) * 2px); transition: r .3s; }
.cmap .tmap__dot[data-tel="a"] circle { fill: var(--c-a); }
.cmap .tmap__dot[data-tel="b"] circle { fill: var(--c-b); }
.cmap .tmap__dot[data-tel="c"] circle { fill: var(--c-c); }
.cmap .tmap__dot text { font: 700 calc(var(--k) * 15px) var(--body); fill: var(--white); stroke: #0a221a; stroke-width: calc(var(--k) * 4px); stroke-linejoin: round; transform: translate(calc(var(--k) * 4px), calc(var(--k) * 1px)); opacity: 0; transition: opacity .35s; pointer-events: none; }
.cmap .tmap__dot[data-named] text, .cmap .tmap__dot.is-hover text { opacity: 1; }
.cmap .tmap__dot.is-hover circle { r: calc(var(--k) * 9px); }
.cmap .tmap__dot.is-pick text { opacity: 0; }
.which.has-pick .cmap__area:not(.is-lit) { opacity: .07; }
.which.has-pick .cmap .tmap__dot:not(.is-area) circle { opacity: .35; }
.cmap__line { fill: none; stroke: var(--white); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; }
.which.has-pick .cmap__line { opacity: .85; }
.cmap__pin { opacity: 0; }
.which.has-pick .cmap__pin { opacity: 1; }
.cmap .tmap__name { font-size: 24px; }
.which__cap { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; font-weight: 600; color: rgba(255, 255, 255, .75); }
.which__key { display: inline-flex; align-items: center; gap: 8px; }
.which__key::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.which__key--a { --c: var(--c-a); }
.which__key--b { --c: var(--c-b); }
.which__key--c { --c: var(--c-c); }

/* ---------- licensed and insured ---------- */
.lic { position: relative; background: var(--white); padding: clamp(80px, 8vw, 120px) 0; overflow: clip; }
.lic { --ring: 0; }
.lic::before { content: ""; position: absolute; right: -14vw; top: -16vw; width: 40vw; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(80, 170, 38, .35); translate: 0 calc(var(--ring) * 120px); rotate: calc(var(--ring) * 50deg); }
.lic__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.lic__copy { display: grid; gap: 24px; justify-items: start; }
.lic__lede { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--muted); }
.lic__list { display: grid; gap: 0; width: 100%; border-top: 1px solid var(--line); }
.lic__list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.lic__list svg { width: 44px; height: 44px; padding: 8px; border-radius: 14px; background: var(--chalk); fill: none; stroke: var(--trail); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lic__list div { display: grid; gap: 4px; }
.lic__list strong { font: 800 clamp(1.3rem, 1.7vw, 1.6rem)/1.1 var(--display); font-stretch: 82%; color: var(--ink); }
.lic__list span { color: var(--muted); }
.lic__list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--trail); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lic__media { position: relative; height: min(70svh, 620px); }
.lic__ph { position: absolute; right: 0; top: 0; width: 82%; height: 80%; border-radius: var(--dome); overflow: clip; box-shadow: 0 40px 80px -40px rgba(12, 42, 32, .5); }
.lic__ph img { width: 100%; height: 115%; object-fit: cover; object-position: 78% 50%; }
.cert { position: absolute; left: 0; bottom: 0; width: min(76%, 400px); display: grid; gap: 12px; padding: 24px 26px 22px; border-radius: 30px 30px 8px 8px; background: #fbfcf8; color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line), 0 40px 70px -24px rgba(12, 42, 32, .5); transform: rotate(-2.5deg); transition: transform .5s var(--ease), box-shadow .4s; }
.cert:hover { transform: rotate(0) translateY(-6px); }
.cert__k { font: 800 1.05rem/1.2 var(--display); font-stretch: 88%; padding-right: 92px; }
.cert__row { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.cert__row span { font-size: .875rem; font-weight: 600; color: var(--muted); }
.cert__row strong { font-size: 1rem; }
.cert__no { font: 800 1.7rem/1 var(--display) !important; font-stretch: 85%; letter-spacing: .04em; color: var(--trail); font-variant-numeric: tabular-nums; }
.cert__stamp { position: absolute; right: 16px; top: -26px; width: 104px; height: 104px; border-radius: 50%; background: var(--white); box-shadow: 0 14px 30px -12px rgba(12, 42, 32, .45); }
.cert__stamp svg { width: 100%; height: 100%; overflow: visible; }
.cert__c { fill: none; stroke: var(--brand); stroke-width: 2.5; }
.cert__c--in { stroke-width: 2; stroke-dasharray: 4 5; }
/* the dashed ring scales in (--s from contact.js) and turns round the stamp's own centre */
.cert__in, .cert__c--in { transform-box: view-box; transform-origin: 60px 60px; }
.cert__in { transform: scale(var(--s, 1)); }
.motion .cert__c--in { animation: cert-turn 18s linear infinite; }
@keyframes cert-turn { to { transform: rotate(360deg); } }
.cert__tick { fill: none; stroke: var(--trail); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.cert__open { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--trail); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- onward ---------- */
.onw { position: relative; background: var(--trail); color: rgba(255, 255, 255, .88); padding: clamp(80px, 8vw, 120px) 0; overflow: clip; }
.onw__bg { position: absolute; inset: -20% 0; background: linear-gradient(180deg, rgba(12, 42, 32, .5), rgba(12, 42, 32, 0) 40%, rgba(12, 42, 32, .4)), url("../../img/hampshire-south-downs.webp") center / cover; opacity: .2; mix-blend-mode: luminosity; pointer-events: none; }
.onw .wrap { position: relative; }
.onw__head { display: grid; gap: 16px; margin-bottom: clamp(30px, 4vw, 52px); }
.onw__lede { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
.onw__more { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: clamp(26px, 3vw, 40px); }
.onw__more a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 800 clamp(1.3rem, 1.7vw, 1.6rem)/1 var(--display); font-stretch: 82%; color: var(--white); text-decoration: none; background: linear-gradient(var(--brand-hi), var(--brand-hi)) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--ease); }
.onw__more a:hover { background-size: 100% 2px; }
.onw__more svg { width: 24px; fill: none; stroke: var(--brand-hi); stroke-width: 2; transition: transform .35s var(--ease); }
.onw__more a:hover svg { transform: translateX(6px); }
.onw .card__media { height: clamp(200px, 26svh, 300px); }

/* ---------- responsive ---------- */
@media (min-width: 961px) and (max-height: 820px) {
  .cop { padding-top: calc(var(--tb) + var(--hh) + 14px); }
  .cop__title { font-size: clamp(2.3rem, 3.7vw, 3.5rem); }
  .cop__lede { font-size: 1.0625rem; }
  .cline { padding-block: 8px; }
  .cline__ring { width: 46px; height: 46px; }
  .cline__num { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
  .cop__copy { gap: 14px; padding-top: 0; }
  .cop__formh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cop__outline { top: 18px; }
  .cop__form .form { gap: 8px; padding: 18px 22px 20px; }
  .cop__form .field textarea { height: 56px; min-height: 56px; }
}
@media (max-width: 1180px) {
  .cop__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); }
}
@media (max-width: 960px) {
  .cop__grid, .which__grid, .lic__grid { grid-template-columns: minmax(0, 1fr); }
  .cop__form { padding: 0 0 12px 12px; }
  .cop__outline { right: 12px; }
  .cop__hills { top: 0; bottom: auto; height: 70svh; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 50%, transparent 100%); }
  .cop__hills::after { background: rgba(238, 241, 234, .74); }
  .which__map { order: -1; }
  .which__copy { display: contents; }
  .which__grid > .which__map { order: 3; }
  .which__copy > h2 { order: 1; }
  .which__copy > .which__lede { order: 2; }
  .which__find { order: 2; }
  .which__say { order: 4; }
  .which__nums { order: 5; }
  .which__grid { gap: 20px; }
  .lic__media { height: min(70svh, 560px); }
}
@media (max-width: 720px) {
  .cop__title { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .cline { grid-template-columns: 46px minmax(0, 1fr); gap: 4px 14px; padding: 12px 0; }
  .cline__ring { width: 46px; height: 46px; grid-row: 1 / 3; }
  .cline__area { font-size: .92rem; }
  .cline__num { font-size: 1.9rem; }
  .cop__which { font-size: .95rem; border-radius: 26px; line-height: 1.35; padding-block: 8px; }
  .which__try button { padding: 0 13px; font-size: .9rem; }
  .which__try button:nth-of-type(4) { display: none; }
  .cmap { aspect-ratio: 1 / 1; border-radius: 30px 30px 8px 8px; }
  .wnum a { padding: 12px 16px; gap: 12px; }
  .wnum.is-lit a { transform: none; }
  .lic__media { height: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lic__ph { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .cert { position: relative; width: calc(100% - 32px); margin: -40px 0 0 16px; }
  .cert__k { padding-right: 80px; }
  .cert__stamp { width: 84px; height: 84px; top: -20px; }
}

/* alive at rest: the dashed ring turns slowly behind the licensed section, the list icons glint in turn */
.motion .lic::before { animation: lic-turn 50s linear infinite; }
@keyframes lic-turn { to { transform: rotate(360deg); } }
.motion .lic__list li svg { animation: lic-glint 6s ease-in-out infinite; }
.motion .lic__list li:nth-child(2) svg { animation-delay: 2s; }
.motion .lic__list li:nth-child(3) svg { animation-delay: 4s; }
@keyframes lic-glint { 0%, 30%, 100% { background: var(--chalk); stroke: var(--trail); } 12% { background: var(--brand); stroke: var(--ink); } }