/* ── p-residential.css — the residential page ──────────
   Loaded after shop.css / theme.css / inner-pages.css. A showcase (owner, 30 Sep 2026): the banners, categories
   and service cards borrow shop.css's shapes, but carry no price and no ADD: each has a Book / Choose link that
   opens the booking sheet. This file restyles them to the site's tokens (white cards, navy type, mono tags, gold
   actions) and lays out the page. Every hidden start state is gated behind html.fx-motion.     */

/* the page: no 96px top pad (the hero brings its own); shop.css's full-bleed .wrap → .s6-wrap */
body.s6-body:not(.has-hero) .s6-page > main.pr-main { padding-top: 0; }
.pr-main .s6-wrap { width: min(var(--s6-max), 100% - 2 * var(--s6-gutter)); }
.pr-sec { padding: clamp(22px, 3.4vh, 40px) 0; }
.pr-main .s6-lede { max-width: 52ch; text-wrap: pretty; }

/* shared heads for the shop blocks (smaller than the landing's s6-h2: these are shelves, not chapters) */
.pr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.6vh, 26px); }
.pr-head .s6-eyebrow { margin-bottom: 12px; }
.pr-head .s6-lede { margin-top: 8px; font-size: clamp(15px, 1.1vw, 17px); }
.pr-h2 { font: 700 clamp(26px, 2.5vw, 38px)/1.08 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0; }
.pr-h2 .mut, .pr-main .s6-h2 .mut { color: var(--slate); }
.pr-head-r { display: flex; align-items: center; gap: 18px; }
.pr-more { display: inline-flex; align-items: center; gap: 8px; font: 700 14.5px/1 var(--font); color: var(--navy); text-decoration: none; padding: 8px 0; }
.pr-more svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.pr-more:hover svg { transform: translateX(3px); }
.pr-arrows { display: flex; gap: 8px; } .pr-arrows[hidden] { display: none; }
.pr-arr { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; transition: background .2s ease, border-color .2s ease, opacity .2s ease; }
.pr-arr svg { width: 16px; height: 16px; } .pr-arr.prev svg { transform: scaleX(-1); }
.pr-arr:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.pr-arr:disabled { opacity: .38; cursor: default; }

/* ═══ hero ═══ */
.pr-hero { padding-bottom: clamp(28px, 5vh, 52px); }
.pr-hero .s6-wrap { position: relative; z-index: 1; }
.pr-hero .pr-line { left: 0; top: 0; }
.pr-hero .s6-lede { max-width: 46ch; text-wrap: balance; }
.pr-hero .pr-line path.base { stroke: var(--line-navy); }
.pr-hero .p6-ctas .btn { padding: 0 20px; }
.pr-hero .p6-ctas .btn.gold { padding: 0 10px 0 20px; gap: 14px; }
.pr-hero .p6-ctas .btn .ic { margin-right: 0; } .pr-hero .p6-ctas .btn .ic svg { width: 15px; height: 15px; }
.btn.white.plain { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.btn.white.plain:hover { border-color: rgba(0, 57, 108, .3); }
.pr-media { position: relative; }
.pr-hero .p6-media { background: linear-gradient(160deg, #DCE5EF, #C9D6E4); }
.pr-hero .p6-media img { object-position: 44% 50%; }
.pr-hero .p6-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .28); }
/* the socket where the line plugs in (placed by p-residential.js; shown once the line is drawn) */
.pr-port { display: none; position: absolute; z-index: 2; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 57, 108, .18), 0 3px 8px -2px rgba(0, 57, 108, .3); }
.pr-port::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--gold); }
.pr-hero.has-line .pr-port { display: block; }
/* a white callout on the photo (the landing's card shape) */
.pr-badge { position: absolute; z-index: 2; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -18px rgba(0, 30, 60, .5); }
.pr-badge .ib { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #EAF1F8; display: grid; place-items: center; }
.pr-badge .i2 { width: 22px; height: 22px; color: var(--navy); --acc: var(--gold); }
.pr-badge small { display: block; font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 5px; }
.pr-badge b { display: block; font: 700 15px/1.2 var(--font); color: var(--ink); }

/* hero entrance (motion only; the finished state is the default) */
@keyframes prRise { from { opacity: 0; transform: translateY(18px); } }
@keyframes prSettle { from { transform: scale(1.06); } }
@keyframes prFade { from { opacity: 0; } }
html.fx-motion .pr-hero .pr-copy > * { animation: prRise .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 80ms + 60ms); }
.pr-hero .pr-copy > :nth-child(2) { --d: 1; } .pr-hero .pr-copy > :nth-child(3) { --d: 2; }
.pr-hero .pr-copy > :nth-child(4) { --d: 3; } .pr-hero .pr-copy > :nth-child(5) { --d: 4; }
html.fx-motion .pr-hero .p6-media img { animation: prSettle 1.8s var(--ease) both; }
html.fx-motion .pr-hero .pr-badge { animation: prRise .9s var(--ease) .55s both; }
html.fx-motion .pr-hero .pr-line, html.fx-motion .pr-hero .pr-port { animation: prFade 1s ease .5s both; }
/* calm (app/fx.js): the words and the badge fade in where they are; the photo does not settle */
html.fx-calm .pr-hero :is(.pr-copy > *, .pr-badge) { animation-name: prFade; }
html.fx-calm .pr-hero .p6-media img { animation: none; }

/* ═══ offers ═══ */
.pr-offers { padding-top: clamp(22px, 3.2vh, 36px); }
.pr-offers .banners { margin-top: 0; gap: 14px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.pr-offers .banner { min-height: 280px; padding: 24px; border-radius: 26px; color: #fff; background: var(--navy-deep); box-shadow: var(--shadow-card); gap: 8px; }
.pr-offers .banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.pr-offers .banner img, .pr-offers .banner.b1 img { left: 0; width: 100%; transition: transform .8s var(--ease); }
.pr-offers .banner:hover img { transform: scale(1.04); }
.pr-offers .banner.b1 img { object-position: 30% 40%; }
.pr-offers .banner.b2 img { object-position: 60% 30%; }
.pr-offers .banner::before, .pr-offers .banner.b1::before, .pr-offers .banner.b2::before, .pr-offers .banner.b3::before { background: linear-gradient(to top, rgba(0, 32, 62, .94) 6%, rgba(0, 32, 62, .55) 42%, rgba(0, 32, 62, 0) 74%); }
.pr-offers .banner h3, .pr-offers .banner.b2 h3, .pr-offers .banner.b3 h3 { color: #fff; font: 700 clamp(22px, 2vw, 30px)/1.1 var(--font); letter-spacing: -.018em; max-width: 16ch; margin: 0; }
.pr-offers .banner p { font: 500 14.5px/1.5 var(--font); color: #D5E1EE; opacity: 1; max-width: 36ch; }
.pr-offers .banner .tag, .pr-offers .banner.b2 .tag, .pr-offers .banner.b3 .tag { position: absolute; top: 18px; left: 18px; padding: 8px 11px 7px; border-radius: 999px; font: 600 10.5px/1 var(--mono); letter-spacing: .14em; background: #fff; color: var(--navy); box-shadow: 0 8px 18px -10px rgba(0, 30, 60, .45); }
.pr-offers .banner .go { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.pr-offers .banner .go svg { width: 15px; height: 15px; }
.pr-offers .banner:hover .go { background: var(--gold); border-color: var(--gold); color: var(--navy); }

/* ═══ categories ═══ */
.pr-cats { padding-top: 6px; }
.pr-main .cats { gap: 12px; }
.pr-main .cat { font: 600 14px/1.25 var(--font); color: var(--ink); gap: 10px; }
.pr-main .cat span.ci { border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); aspect-ratio: 1 / .86; transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.pr-main .cat span.ci img.i { width: 60%; height: 70%; }
.pr-main .cat:hover span.ci { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: transparent; }
.pr-main .cat.biz span.ci { background: radial-gradient(90% 90% at 80% 10%, rgba(26, 90, 150, .6), transparent 70%), var(--navy); border-color: var(--navy); }

/* ═══ service cards (shop.css's .pcard shape, static here: a line of what the job is, and Book) ═══ */
.pr-main .rail { grid-auto-columns: calc((100% - 3 * 14px) / 4); gap: 14px; padding: 8px 8px 30px; margin: -8px -8px -14px; scroll-padding-inline: 8px; scrollbar-width: none; }
.pr-main .rail::-webkit-scrollbar { display: none; }
.pr-main .pcard { border-radius: var(--r-card); border-color: var(--line); background: var(--card); transition: box-shadow .3s ease, transform .3s var(--ease), border-color .3s ease; }
.pr-main .pcard:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); border-color: transparent; }
.pr-main .pimg { aspect-ratio: 3 / 2; background: linear-gradient(160deg, #DCE5EF, #C9D6E4); }
.pr-main .pcard:hover .pimg img { transform: scale(1.04); }
.pr-main .pbadge { left: 12px; top: 12px; padding: 7px 10px 6px; border-radius: 999px; font: 600 10px/1 var(--mono); letter-spacing: .14em; background: #fff; color: var(--navy); box-shadow: 0 8px 18px -10px rgba(0, 30, 60, .45); }
.pr-main .pbadge.inline { background: var(--gold-30); color: var(--gold-ink); box-shadow: none; border-radius: 7px; }
.pr-main .pbody { padding: 14px 16px 16px; gap: 8px; }
.pr-main .ptime { font: 500 11px/1 var(--mono); letter-spacing: .02em; color: var(--navy); background: #EAF1F8; padding: 6px 8px; border-radius: 7px; }
.pr-main .ptime svg { color: var(--navy); }
.pr-main .pbody h3 { font: 700 17px/1.25 var(--font); letter-spacing: -.01em; color: var(--ink); margin: 0; }
.pr-main .pr-desc { margin: 0; font: 500 13.5px/1.45 var(--font); color: var(--muted); }
.pr-main .pfoot { justify-content: flex-end; }
/* Book / Choose: the old ADD's navy outline, as a link into the booking */
.pr-main .pr-book { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 96px; height: 40px; padding: 0 14px; border-radius: 11px; border: 1.5px solid var(--navy); background: #fff; color: var(--navy); font: 700 13.5px/1 var(--font); letter-spacing: .02em; text-decoration: none; transition: background .2s ease, color .2s ease, transform .15s var(--ease); }
.pr-main .pr-book svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.pr-main .pr-book:hover { background: var(--navy); color: #fff; } .pr-main .pr-book:hover svg { transform: translateX(2px); }
.pr-main .pr-book:active { transform: scale(.97); }
.pr-main .ptime svg { flex: none; }

/* keyboard focus and the #services / #amc anchors never land under the fixed nav */
html:has(.pr-main) { scroll-padding-top: 96px; }

/* ═══ AMC: a split band, the plans as rows (what each covers, and Choose) ═══ */
.pr-amc .p6-split { align-items: center; }
.pr-amc .p6-split-media { aspect-ratio: 4 / 3.3; box-shadow: var(--shadow-card); }
.pr-amc .p6-split-media img { object-position: 50% 30%; }
.pr-amc .s6-eyebrow { margin-bottom: 12px; }
.pr-amc .s6-lede { margin-top: 10px; font-size: clamp(15px, 1.1vw, 17px); }
.pr-amc .pgrid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 24px 0 14px; }
.pr-amc .pcard { position: relative; overflow: visible; }
.pr-amc .pcard:hover { transform: none; }
.pr-amc .pcard:has(.pbadge) { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.pr-amc .pbadge { top: -10px; left: 16px; background: var(--navy); color: #fff; box-shadow: none; }
.pr-amc .pbody { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name add" "cover add" "time add"; align-items: center; column-gap: 18px; row-gap: 7px; padding: 18px 18px 16px; }
.pr-amc .pbody h3 { grid-area: name; font-size: 17px; }
.pr-amc .pr-cover { grid-area: cover; margin: -2px 0 1px; font: 500 13.5px/1.4 var(--font); color: var(--muted); }
.pr-amc .ptime { grid-area: time; justify-self: start; }
.pr-amc .pfoot { display: contents; }
.pr-amc .pfoot > :last-child { grid-area: add; }

/* ═══ how a visit works + trust ═══ */
.pr-how { padding-bottom: clamp(48px, 7vh, 88px); }
.pr-how ol.p6-steps { list-style: none; margin: 0; padding: 0; }
.pr-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(28px, 4vh, 44px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pr-trust > div { display: flex; align-items: flex-start; gap: 14px; padding: 24px 22px; }
.pr-trust > div + div { border-left: 1px solid var(--line); }
.pr-trust .ib { flex: none; width: 44px; height: 44px; border-radius: 13px; background: #EAF1F8; display: grid; place-items: center; }
.pr-trust .i2 { width: 23px; height: 23px; color: var(--navy); --acc: var(--gold); }
.pr-trust b { display: block; font: 700 15.5px/1.3 var(--font); color: var(--ink); }
.pr-trust span:not(.ib) { display: block; margin-top: 4px; font: 500 13.5px/1.45 var(--font); color: var(--muted); }

/* ═══ business split ═══ */
/* "A large estate?" goes to the business enquiry on /commercial */
.pr-biz .pr-biz-more { margin: 18px 4px 0; font: 500 15px/1.5 var(--font); color: var(--muted); }
.pr-biz .pr-biz-more a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; }
.pr-biz .p6-split-media { box-shadow: var(--shadow-card); }
.pr-biz .s6-lede { margin-top: 16px; }
.pr-biz .p6-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pr-biz .btn.gold, .pr-end .btn.gold { padding: 0 10px 0 20px; gap: 14px; }
.pr-biz .btn .ic, .pr-end .btn .ic { margin-right: 0; } .pr-biz .btn .ic svg, .pr-end .btn .ic svg { width: 15px; height: 15px; }

/* ═══ the navy CTA ═══ */
.pr-end { padding-top: clamp(40px, 6vh, 72px); }
.pr-end .p6-cta .s6-eyebrow { margin-bottom: 14px; }
.pr-end .p6-cta .s6-h2 .mut { color: #8FB0D0; }
.pr-end .p6-cta .s6-lede { margin-top: 14px; max-width: 46ch; text-wrap: balance; }

/* ═══ reveals (motion only) — only on the section containers ═══ */
html.fx-motion .pr-main .rv6 { transform: translateY(20px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
html.fx-motion .pr-main .rv6.in { transform: none; }
html.fx-calm .pr-main .rv6:not(.in) { transform: none; }   /* calm: they fade in where they are */

/* ═══ widths ═══ */
@media (max-width: 1180px) {
  .pr-main .rail { grid-auto-columns: calc((100% - 2 * 14px) / 3); }
  .pr-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-trust > div:nth-child(3) { border-left: 0; }
  .pr-trust > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 1100px) {
  .pr-offers .banners { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  .pr-offers .banner { min-height: 250px; padding: 20px; }
  .pr-offers .banner h3 { font-size: 22px; }
  .pr-offers .banner p { font-size: 13.5px; }
  .pr-main .cats { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
  .pr-main .cat { font-size: 12.5px; }
  .pr-amc .p6-split-media { aspect-ratio: 4 / 4.2; }
}
@media (max-width: 900px) {
  .pr-offers .banners { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pr-offers .banner.b1 { grid-column: 1 / -1; min-height: 240px; }
  .pr-main .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pr-amc .p6-split-media { aspect-ratio: 3 / 2; }
}
@media (max-width: 767px) {
  .pr-main .rail { grid-auto-columns: 62%; gap: 12px; }   /* a definite size: minmax(0, …) lets the grid squeeze all six into the width */
  .pr-head-r { width: 100%; justify-content: space-between; }
  .pr-arrows { display: none; }
  .pr-trust { grid-template-columns: minmax(0, 1fr); }
  .pr-trust > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .pr-trust > div { padding: 18px 4px; }
}
@media (max-width: 600px) {
  .pr-hero .p6-media { aspect-ratio: 4 / 3.2; border-radius: 22px; }
  .pr-hero .p6-icon { width: 76px; }
  .pr-badge { left: 12px; bottom: 12px; padding: 8px 14px 8px 8px; gap: 10px; } .pr-badge .ib { width: 34px; height: 34px; } .pr-badge b { font-size: 14px; }
  .pr-offers .banners { grid-template-columns: minmax(0, 1fr); }
  .pr-offers .banner { min-height: 210px; border-radius: 22px; }
  .pr-main .cats { gap: 8px; } .pr-main .cat { font-size: 11.5px; gap: 7px; } .pr-main .cat span.ci { border-radius: 16px; aspect-ratio: 1; }
  .pr-main .pr-book { min-width: 84px; }
  .pr-end .p6-cta { border-radius: 28px; }
}
@media (max-width: 380px) {
  .pr-hero .p6-ctas .btn { padding: 0 16px; font-size: 14.5px; }
  .pr-hero .p6-ctas .btn.gold { padding: 0 8px 0 16px; gap: 10px; }
}