/* ROUND 77 — QC doc "Sentinel QC 29-09-2026" (inc/round77.php). One block per doc item. */

/* ============================================================ Pricing (/pricing/) */
@media (min-width:769px){
  /* Hero: the circle hugs its content as in Figma (content 80% of the circle's height, 77% of its width);
     the fonts inside stay as they are (46 / 15 px), so the circle comes down from 550 to 440 px. */
  .sh-r77.sh-page-pricing .ch__circle{width:440px;height:440px;min-height:0;padding:0 48px}
}
/* Cards: the headings run on two lines (the round-63 12ch cap made them three). */
.sh-r77.sh-page-pricing .ic-card__title{max-width:none}
@media (min-width:769px){
  /* Spacing below the cards: the next section's own 96px top padding is the gap (Figma 96), no double 96 + 96. */
  .sh-r77.sh-page-pricing .ic__inner{padding-bottom:0}
  /* Square metre rates: full bleed on wide screens (the r63 1440 cap removed); the copy keeps Figma's 608px measure. */
  .sh-r63.sh-r77.page-template-pricing .is{max-width:none;margin-inline:0}
  .sh-r63.sh-r77.page-template-pricing .is--slate-green .is__text{max-width:none;flex:0 0 50%}
  .sh-r63.sh-r77.page-template-pricing .is--slate-green .is__text > *{max-width:608px}
}
@media (max-width:768px){
  /* Mobile: card run → next section gap 64px, the spacing the other sections use */
  .sh-r77.sh-page-pricing .ic__inner{padding-bottom:0}
  /* Finance (How your site affects pricing) → Pricing FAQ: 64px, not 64 + 48 */
  .sh-r77.sh-page-pricing .ti:has(+ .faq) .ti__inner,.sh-r77.sh-page-pricing .ti:has(+ div:empty + .faq) .ti__inner{padding-bottom:16px}
}

/* ============================================================ Main menu side sheet */
/* The panel's scroll area starts under the header bar (r77.js keeps --sh-r77-bar = bar height), so scrolled
   panel content never runs over the nav; the first row stays where it was (bar + 20px). */
@media (min-width:1024px){
  .sh-r77 .nav__panel{top:var(--sh-r77-bar,120px);padding-top:20px}
}

/* ============================================================ Ready to take the first step (mobile) */
/* The mirrored mobile photo no longer animates between the zoom scale and its mirror (the "flip"). */
@media (max-width:768px){
  .sh-r77.sh-inner .footer-cta .footer-cta__bg img,
  .sh-r77.sh-inner .footer-cta.sh-zoom .sh-zoom-media img,
  .sh-r77.sh-inner .footer-cta.sh-zoom:hover .sh-zoom-media img{transform:scaleX(-1)!important;transition:none!important;animation:none!important}
}

/* ============================================================ Forms (site-wide) */
/* Validation messages sit under their own field box in a small font (r63.js puts them inside the field);
   a row of two fields keeps both widths. */
.sh-r77 .sh-ferr-host{display:block}
.sh-r77 .sh-ferr-host.book__field--icon,.sh-r77 .sh-ferr-host.book__field--select{flex-wrap:wrap}
.sh-r77 .sh-ferr-host > .sh-ferr,.sh-r77 .sh-lead__form .sh-ferr-host > .sh-ferr{display:block;flex:0 0 100%;width:100%;margin:6px 0 0;padding:0 2px;font:500 12px/1.35 var(--sans);letter-spacing:0;text-transform:none;color:#b5462b;text-align:left}

/* ============================================================ Knockdown & Rebuild + Our Process timelines */
/* The circles are not there at the start: each one grows from nothing to full size behind its photo when the
   dotted line (drawn on scroll by inner.js) reaches that step (r77.js adds .sh-r77-reached), and the photo
   animates in with it. Line, photos and circle size unchanged; r77.js centres each photo in its circle. */
.sh-r77 .sh-r77-proc .proc-step__circle{transform:scale(0);transition:transform 1.1s var(--ease-lux,cubic-bezier(.16,1,.3,1)),opacity .4s ease}
.sh-r77 .sh-r77-proc .proc-step.sh-r77-reached .proc-step__circle{transform:scale(1)}
@media (min-width:1024px){
  .sh-r77.js .sh-r77-proc .proc-step:not(.sh-r77-reached) .proc-step__img,
  .sh-r77 .sh-r77-proc .proc-step:not(.sh-r77-reached) .proc-step__img{opacity:0;translate:0 28px}
}
@media (max-width:1023px){
  /* phones / tablets: a true circle (r77.js sizes it to the photo), appearing as the step scrolls in */
  .sh-r77 .sh-r77-proc .proc-step__circle,.sh-r77 .sh-r77-proc .proc-step--r .proc-step__circle{aspect-ratio:1;margin:0;right:auto}
  .sh-r77.js .sh-r77-proc .proc-step:not(.sh-r77-reached) .proc-step__circle{transform:scale(0)}
  .sh-r77 .sh-r77-proc .proc-step__media{overflow:visible}
}
@media (prefers-reduced-motion:reduce){
  .sh-r77 .sh-r77-proc .proc-step__circle{transition:none}
}
@media (max-width:1023px){
  /* Our Process (mobile): the "You'll get" lists read left-aligned, icon and text together */
  .sh-r77 .proc-step__checks{text-align:left;align-self:stretch;width:100%}
  .sh-r77 .proc-step__checks li{justify-content:flex-start;text-align:left;align-items:flex-start}
  .sh-r77 .proc-step__checks li span{text-align:left}
}

/* ============================================================ Plans Configurator (/plans-configurator/) */
@media (min-width:1024px){
  /* Left column: Figma 435:3143 stacks the items with no filler: specs → buttons → price guide, and the
     description 53px under them (it was pushed to the column foot by space-between). */
  .sh-r77 .pc-plan__side{justify-content:flex-start}
  .sh-r77 .pc-plan__side .pd__specs{margin-bottom:0}
  .sh-r77 .pc-plan__desc{margin-top:53px}
}
/* Address search: no yellow focus ring inside the field (map tool and "Try it at your place" forms) */
.sh-r77 .pc-map__field input:focus,.sh-r77 .pc-map__field input:focus-visible,
.sh-r77 .ac-map__field input:focus,.sh-r77 .ac-map__field input:focus-visible,
.sh-r77 .pd-try__field input:focus,.sh-r77 .pd-try__field input:focus-visible{outline:none!important;box-shadow:none!important;border-color:transparent!important}
.sh-r77 .pc-map__field:focus-within,.sh-r77 .ac-map__field:focus-within{outline:none!important}

/* Video (Figma 426:4204 "Video Testimonial - Large"), now under Similar Plans */
.sh-r77 .pc-test{min-height:809px;padding:10px}
.sh-r77 .pc-test .pd-test__wash{background:rgba(66,64,64,.7)}
.sh-r77 .pc-test .pd-test__inner{width:619px;max-width:100%;min-height:738px;padding:96px var(--global-padding,24px);gap:15px;justify-content:center}
.sh-r77 .pc-test .pd-test__quote{margin:0;font:400 36px/1.17 var(--serif,'Playfair Display',serif);color:var(--white,#fff)}
.sh-r77 .pc-test .pd-test__who{margin:0;font:500 16px/1.15 var(--sans);color:var(--white,#fff);opacity:1}
.sh-r77 .pc-test .pc-test__watch{display:inline-flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #e8b639;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--white,#fff)}
.sh-r77 .pc-test .pc-test__watch img{width:16px;height:16px;display:block}
@media (max-width:768px){
  .sh-r77 .pc-test{min-height:560px}
  .sh-r77 .pc-test .pd-test__inner{min-height:0;padding:64px 24px}
  .sh-r77 .pc-test .pd-test__quote{font-size:28px}
}

/* Similar Plans cards (configurator): photo, floor plan and details show at rest again (AJ, 29 Sep). Round 77
   had hidden them until hover, following the QC doc, which left blank white cards. */

@media (max-width:768px){
  /* Map search on phones: the field and its search button fit beside SAVED instead of running under it */
  .sh-r77 .pc-map .pc-map__card.is-placed .pc-map__intro{right:129px;width:auto}
  .sh-r77 .pc-map__intro .pc-map__form{width:100%;min-width:0}
  .sh-r77 .pc-map__intro .pc-map__field{flex:1 1 auto;min-width:0;width:auto}
  .sh-r77 .pc-map__intro .pc-map__field input{min-width:0;width:100%}
}
@media screen and (max-width:600px){
  /* Logged-in phones: the WordPress bar and the green header scroll as one sticky header (the bar used to
     scroll away and leave a blank strip above the green bar). */
  body.admin-bar.sh-r77 #wpadminbar{position:fixed;top:0}
}

/* ============================================================ Plan detail (and the configurator's plan leads) */
/* Get in Touch popup: every line of content centred, SEND ME THE PLANS centred (fields keep their width) */
.sh-r77.single-plan .sh-lead__card,.sh-r77.sh-page-plans-configurator .sh-lead__card{text-align:center}
.sh-r77.single-plan .sh-lead__head,.sh-r77.sh-page-plans-configurator .sh-lead__head{align-items:center;text-align:center}
.sh-r77.single-plan .sh-lead__title,.sh-r77.single-plan .sh-lead__sub,.sh-r77.single-plan .sh-lead__head .kd__eyebrow,
.sh-r77.sh-page-plans-configurator .sh-lead__title,.sh-r77.sh-page-plans-configurator .sh-lead__sub,.sh-r77.sh-page-plans-configurator .sh-lead__head .kd__eyebrow{margin-left:auto;margin-right:auto;text-align:center}
.sh-r77.single-plan .sh-lead .book__consent,.sh-r77.sh-page-plans-configurator .sh-lead .book__consent{justify-content:center;text-align:center}
.sh-r77.single-plan .sh-lead .book__submit,.sh-r77.sh-page-plans-configurator .sh-lead .book__submit{justify-content:center;margin-left:auto;margin-right:auto}
.sh-r77.single-plan .sh-lead .book__note,.sh-r77.sh-page-plans-configurator .sh-lead .book__note{text-align:center}

/* Try it at your place: #7A917F at 60% over the map (the map sits under the wash, not blended into it) */
.sh-r77 .pd--r63 .pd-try{background:transparent;isolation:isolate}
.sh-r77 .pd--r63 .pd-try__map{mix-blend-mode:normal;z-index:0}
.sh-r77 .pd--r63 .pd-try::before{content:"";position:absolute;inset:0;background:rgba(122,145,127,.6);z-index:1;pointer-events:none}
.sh-r77 .pd--r63 .pd-try__inner{z-index:2}

/* Similar Plans: Figma 426:4396 — 375px cards, 32px apart, from the 48px margin out to the right screen edge,
   so the 4th card is cut by the edge (3 full + part of the 4th at 1440) */
@media (min-width:1024px){
  .sh-r77 .pd-sim__hs{width:auto;max-width:none;margin-right:calc(-1 * (var(--global-padding,48px) + max(0px,(100vw - var(--maxw,1440px)) / 2)))}
  .sh-r77 .pd-sim{overflow-x:clip}
  .sh-r77 .pd-sim__hs .hs__track{width:auto}
  .sh-r77 .pd-sim__track{gap:32px}
  .sh-r77 .pd-sim__card{flex:0 0 375px;width:375px}
  .sh-r77 .pd-sim__photo{aspect-ratio:auto;height:226px}
  .sh-r77 .pd-sim__draw{height:212px;padding:16px 24px}
  .sh-r77 .pd-sim__foot{padding:0 16px 16px}
}

@media (max-width:768px){
  /* Hero: the dark block under the render goes; the hero is the image, with the plan name on it */
  .sh-r63.sh-r77 .pd--r63 .pd__hero{height:auto;min-height:0;background:transparent}
  .sh-r63.sh-r77 .pd--r63 .pd__media{position:relative;inset:auto}
  /* Try it at your place: off-white around it (not the warm page colour) and room below it */
  .sh-r77 .pd--r63{background:var(--off-white-2,#fdfbf9)}
  .sh-r67.sh-r77 .pd--r63 .pd-try{margin:0 24px 48px}
}

/* ============================================================ Display Homes: grid items 530-540px → 450px */
@media (min-width:1024px){
  .sh-r63.sh-r77 .dh__grid > .dh-card{min-height:0;height:450px}
}

/* Display home detail: Photo Gallery heading → yellow rule 47px → 24px (the head's own gap only) */
.sh-r77 .dd__gallery-head .gd__rule{margin-top:0}
@media (max-width:768px){
  /* LIMITED TIME ONLY tag no longer tucks under the heading: 10px clear space (the stack's gap) */
  .sh-r77 .dd__hero-stack .dd__tag{margin-bottom:0}
}

/* Our Design Approach, The Sentinel difference (Figma 943:21729): the right-hand copy starts on the same line
   as the photo on the left (heading 49px + the 48px column gap above the photo) */
@media (min-width:1024px){
  .sh-r77.sh-page-our-design-approach .da--alt .da__inner{align-items:flex-start}
  .sh-r77.sh-page-our-design-approach .da--alt .da__col--r{padding-top:97px}
}

/* Foundation + Parenting Place video block on phones: the play icon had picked up the 280px image min-height
   (the WATCH pill grew into an arch) and the 36px title ran out of the 240px box. The block now grows with its
   copy, the poster covers it, and the title steps down so label, title and WATCH sit centred as on desktop. */
@media (max-width:768px){
  .sh-r77 .sy-vid .btn img{width:16px;height:16px;min-height:0}
  .sh-r77 .sy-hero--split .sy-hero__media--video,.sh-r77 .sy-hero__media .sy-vid{height:auto;min-height:280px;aspect-ratio:auto}
  .sh-r77 .sy-hero__media .sy-vid .gd__video-poster{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover}
  .sh-r77 .sy-vid .gd__video-overlay{position:absolute;inset:0;height:auto}
  .sh-r77 .sy-vid .gd__video-text{padding:48px 24px}
  .sh-r77 .sy-vid .gd__video-title{font-size:28px;line-height:1.2}
}
@media (max-width:768px){
  /* Foundation, Applications: the inner 96px sat on top of the section's 64px (160px each end); now 64px like
     the sections above it */
  .sh-r77 .sy-apps .sy-apps__inner{padding-top:0;padding-bottom:0}
}

/* ============================================================ Invest in a Display Home */
/* Card headings on two lines like the other pages' cards (the 252px cap made two of them three lines) */
.sh-r77.sh-page-invest-in-a-display-home .ic-card__title{max-width:none}
/* Ticks sit on the first line of their item, wrapped or not */
.sh-r77 .sy-check__list li{align-items:flex-start}
.sh-r77 .sy-check__list li > img{flex:0 0 auto;margin-top:0}
/* Awards collage: room between the photos and the caption; less space down to the Let's Chat form */
.sh-r77.sh-page-invest-in-a-display-home .sy-photo figcaption{margin-top:24px}
.sh-r77.sh-page-invest-in-a-display-home .sy-photo{padding-bottom:0}

/* ============================================================ Parenting Place (Figma 984:25320) */
@media (min-width:1024px){
  /* hero: the video starts 20px under the nav (y 140 in the frame), not 96px */
  .sh-r77.sh-page-parenting-place .sy-hero__inner{padding-top:20px}
}
/* What Matters Most cards: FIND OUT MORE follows the copy at the card's 16px gap (it was pushed ~50px down) */
.sh-r63.sh-r77.sh-page-parenting-place .sy-cards .ic-card .ic-card__link{margin-top:0}

/* ============================================================ Homepage: Download the guide book
   Hidden for launch (AJ, 30 Sep) via the body class from inc/round77.php; option sh_r77_guide_book_live = 1 shows
   it again. */
.sh-r77-no-guide-book section.feature[aria-label="Download the guide book"],
.sh-r77-no-guide-book [data-sh-lead="guide-book"]{display:none!important}

/* ============================================================ Building vs Buying */
@media (min-width:769px){
  /* hero circle type at the design's Desktop/H1 and Body Large (as the Figma circle hero 683:6799: 59px/1.08,
     -0.59px; 20px/1.5) */
  .sh-r77.sh-page-building-vs-buying .ch .ch__circle .kd__title.h1{font-size:59px;line-height:1.08;letter-spacing:-.59px}
  .sh-r77.sh-page-building-vs-buying .ch__circle .ch__copy{font-size:20px;line-height:1.5;max-width:none}
  /* comparison table: more room between the columns */
  .sh-r77.sh-page-building-vs-buying .cmp__row,.sh-r77.sh-page-building-vs-buying .cmp__head{gap:48px}
}
/* What matters most cards: headings on two lines like the other cards */
.sh-r77.sh-page-building-vs-buying .ic-card__title{max-width:none}
@media (max-width:768px){
  /* the comparison section closes with the same 64px it opens with */
  .sh-r77.sh-page-building-vs-buying .bvb{padding-bottom:64px}
}

/* ============================================================ Our Promise */
/* Four Commitments cards: every heading on two lines, ABOUT THE GUARANTEE centred like the other cards' buttons */
.sh-r63.sh-r77.sh-page-our-promise .ic-card .ic-card__title{max-width:320px;margin-inline:auto;text-wrap:balance}
.sh-r63.sh-r77.sh-page-our-promise .ic-card:nth-child(2) .ic-card__title{max-width:260px}
.sh-r63.sh-r77.sh-page-our-promise .ic-card:nth-child(3) .ic-card__title{max-width:230px}
.sh-r77.sh-page-our-promise .ic-card .btn,.sh-r77.sh-page-our-promise .ic-card .link-btn{align-self:center;margin-inline:auto}
/* How we keep our promise: square photo corners */
.sh-r77.sh-page-our-promise .sy-story__photo,.sh-r77.sh-page-our-promise .sy-story__photo img{border-radius:0}
@media (min-width:1024px){
  /* the last story (Owner-operated in every region) puts its copy beside the photo, tops aligned, the copy
     starting on the right-hand column's line */
  .sh-r77.sh-page-our-promise .sy-stories__col--l .sy-story:last-child{flex-direction:row;align-items:flex-start;gap:128px;width:calc(100% + 128px + 636px)}
  .sh-r77.sh-page-our-promise .sy-stories__col--l .sy-story:last-child .sy-story__photo{flex:0 0 580px;width:580px}
  .sh-r77.sh-page-our-promise .sy-stories__col--l .sy-story:last-child .sy-story__text{flex:0 1 468px}
}

/* ============================================================ Already Have Plans */
@media (min-width:769px){
  /* the header at rest takes the banner's off-white, so the two read as one; the sticky (cream) state is as it was */
  .sh-r66.sh-r77.sh-page-already-have-plans .nav.sh-nav-top::before{display:block;background:var(--off-white,#fdfbf9)}
  /* intro → What to expect / form: the banner closes 24px under its copy (it was held to 340px tall); the
     copy keeps its place */
  .sh-r63.sh-r77.sh-page-already-have-plans .qp-intro{min-height:0;padding-top:92px;padding-bottom:24px}
}
@media (max-width:768px){
  /* phones: the header on the dark green the other pages use, so the white logo and menu are readable */
  .sh-r63.sh-r77.sh-page-already-have-plans .nav::before,.sh-r66.sh-r77.sh-page-already-have-plans .nav.sh-nav-top::before{display:block;background:var(--slate-green,#637468)}
}

/* ============================================================ First Time Builders Guide */
@media (min-width:1024px){
  /* Free Guide → What's Inside: the hero's own 96px is the gap (What's Inside added another 110px) */
  .sh-r77.sh-page-first-time-builders-guide .sy-check{padding-top:0}
  /* Download: the block hugs its form (a 628px minimum left ~160px empty above and below it) */
  .sh-r77.sh-page-first-time-builders-guide .sf__inner{min-height:0}
}

/* ============================================================ Gallery: Keyword → RESET FILTERS at the filter groups'
   own 10px gap */
.sh-r77 .gal__filters .gal__reset{margin-top:0}

/* ============================================================ Gallery detail: hero heading over the photo
   The charcoal body used to start 92px up and cover the foot of the photo, so the title read as sitting under it.
   Now the photo runs its full height and the title is lifted onto it: the photo's edge crosses the letters about
   two-thirds of the way down, as in the design; the content below keeps its place. */
@media (min-width:1024px){
  .sh-r67.sh-r77 .gd__deco{margin-top:0;margin-bottom:-92px;top:-64px;z-index:3}
}

/* ============================================================ Location (Figma 734:7952) */
/* Team cards under the owners' card: two columns; at rest a card shows photo, name and role; hovering it lifts it
   (Large Shadow), shows READ BIO on the photo when the person has a bio, and opens the Email / phone links,
   stacked, as on Rhys Gullery's card in the frame. */
@media (hover:hover) and (min-width:1024px){
  .sh-r77.single-local_office .rg2-person:not(.rg2-person--lead){transition:box-shadow .45s var(--ease-fade,ease)}
  .sh-r77.single-local_office .rg2-person:not(.rg2-person--lead):hover,
  .sh-r77.single-local_office .rg2-person:not(.rg2-person--lead):focus-within{box-shadow:0 12px 48px rgba(0,0,0,.2)}
  .sh-r77.single-local_office .rg2-person:not(.rg2-person--lead) .rg2-person__links{flex-direction:column;align-items:flex-start;gap:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease-fade,ease),opacity .45s var(--ease-fade,ease)}
  .sh-r77.single-local_office .rg2-person:not(.rg2-person--lead):hover .rg2-person__links,
  .sh-r77.single-local_office .rg2-person:not(.rg2-person--lead):focus-within .rg2-person__links{max-height:96px;opacity:1}
}
/* House & Land Packages on the location page sits on warm sand, where the dark-band rail (cream at 30%) vanished:
   a white rail with the tan thumb, as drawn, and the arrows in charcoal (prev dimmed at the start) */
.sh-r63.sh-r77 .rg2-packages .hs__rail{background:var(--white,#fff)}
.sh-r63.sh-r77 .rg2-packages .hs__grab{background:var(--tan,#d9d3c3)}
.sh-r63.sh-r77 .rg2-packages .hs__arrow{color:var(--charcoal,#424040)}
@media (max-width:768px){
  /* READ MORE: the site's underlined text button, not the browser's grey button box */
  .sh-r77.single-local_office .rg2-team__more{-webkit-appearance:none;appearance:none;background:none;border:0;border-bottom:1px solid var(--underline-base,rgba(226,217,195,.5));border-radius:0;padding:8px 0;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;cursor:pointer}
  /* Display Homes: eyebrow, heading and the card centred on the screen */
  .sh-r77.single-local_office .rg2-homes .kd__head{text-align:center;align-items:center}
  .sh-r77.single-local_office .rg2-homes__track:has(> .dh-card:only-child){justify-content:center}
  /* House & Land cards: the photo meets the white card body, no dark band under it */
  .sh-r77.single-local_office .rg2-packages .hlc__media{background:var(--white,#fff)}
  .sh-r77.single-local_office .rg2-packages .hlc__media img{display:block;width:100%;height:100%;object-fit:cover}
  /* Google rating: the text block is its own height (it kept the desktop column's 400px), so the photo follows
     the copy at the section's 40px gap */
  .sh-r77.single-local_office .rg2-reviews__text{flex:0 0 auto;height:auto}
}

/* ============================================================ Accessible Living */
/* hero circle text width: already the full 422px text area of the Figma circle since round 74 (staging still
   runs the older 11ch / 30ch caps shown in the screenshot), so nothing further here */
/* Clever, accessible design ideas: more air under the heading (23px → 48px to the cards); the scrollbar rail white */
.sh-r77.sh-page-accessible-living .ac-ideas .hs__track{margin-top:0}
.sh-r63.sh-r77.sh-page-accessible-living .ac-ideas .hs__rail{background:var(--white,#fff)}
@media (max-width:768px){
  /* every card snaps to the same left line as the first (the snap padding doubled the 24px gutter) */
  .sh-r77.sh-page-accessible-living .ac-ideas .hs__track{scroll-padding-left:0}
}
/* Accessible plan rows (plans list): the m² value ends on the SAVE button's right edge (16px in, not 24px) */
@media (min-width:769px){.sh-r63.sh-r77 .ac-plan .ac-plan__specs{padding-right:16px}}

/* ============================================================ Account */
/* Your details: First name / Last name 16px apart; the password card's CHANGE PASSWORD sits 24px under the field */
.sh-r64.sh-r77 .acc .sh-acc__grid{column-gap:16px;row-gap:16px}
.sh-r64.sh-r77 .acc .sh-acc__form{gap:16px}
.sh-r64.sh-r77 .acc .sh-acc__form .sh-acc__submit{margin-top:8px}
@media (max-width:768px){
  /* the greeting starts 32px under the header (was 64px plus an empty band), and the page closes 64px after
     the Session card instead of 120px + a section's spacing */
  .sh-r63.sh-r77 .lg.acc{padding-top:32px;padding-bottom:64px}
  .sh-r64.sh-r77 .acc .lg__inner{padding-bottom:0}
}

/* ============================================================ House & Land */
/* detail hero: "10 MORE / PHOTOS" on two centred lines, as in the design */
.sh-r77 .hld__more .label{max-width:84px;line-height:1.2;text-align:center}
/* Auckland packages page: no yellow area name under the House & Land Packages heading */
.sh-r77 .hl-intro__area{display:none}

/* ============================================================ Our History */
/* side dot navigation: white dots on a white line on every panel (round 63 turned them charcoal on the light
   panels); the active dot stays amber */
.sh-r77 .hist__nav .hist__dot,.sh-r63-history.sh-r77 .hist__nav.sh-inv .hist__dot{background:var(--white,#fff)}
.sh-r77 .hist__nav .hist__dot.is-on,.sh-r63-history.sh-r77 .hist__nav.sh-inv .hist__dot.is-on{background:var(--amber,#e8b639)}
.sh-r77 .hist__nav::before,.sh-r63-history.sh-r77 .hist__nav.sh-inv::before{background:var(--white,#fff)}
@media (max-width:768px){
  /* first panel: 64px clear under the fixed header, the same as its bottom padding */
  .sh-r77 .hist > .hist__panel:first-of-type{padding-top:calc(63px + 64px)}
}

/* ============================================================ Homepage, Find your local office
   Portrait and square team photos (flagged by r77.js) are shown whole, centred in a taller frame on the card's
   own cream, instead of being cropped to the 182px strip. Landscape photos are unchanged. */
.sh-r77.sh-r63-home .office .office__card img.sh-r77-whole{height:320px;object-fit:contain;object-position:50% 50%;background:var(--cream,#f7f3ea)}
@media (max-width:768px){
  .sh-r77.sh-r63-home .office .office__card img.sh-r77-whole{height:280px}
}

/* ============================================================ Plan detail: the plan title stays put (AJ, 29 Sep)
   The hero title no longer travels down into the page on scroll: it sits in its place at the foot of the hero and
   scrolls with it. The hidden landing copy of the title under the hero is removed, so no empty band is left. */
.sh-r63.sh-r77 .pd--r63 .pd__name--travel{transform:none!important;will-change:auto}
.sh-r63.sh-r77 .pd--r63.is-landed .pd__name--travel{opacity:1}
.sh-r63.sh-r77 .pd--r63 .pd__name--static{display:none}
@media (min-width:769px){
  .sh-r63.sh-r77 .pd--r63 .pd__top{justify-content:flex-end}   /* SAVE / DOWNLOAD BROCHURE stay on the right */
}

/* ============================================================ Homepage, Floor Plans / Style Ideas (AJ, 30 Sep)
   Style Ideas photo anchored to the grid's right edge instead of the viewport's: identical up to 1600px, and past
   that it no longer drifts away from the copy (round 67 pinned it to the screen edge). On phones the materials
   square gives way to the text column below 436px (Figma's ~40px overlap kept, aspect kept square). */
@media (min-width:1024px){
  .sh-r63.sh-r77.sh-r63-home .ideas__col--style .ideas__media{margin-right:0}
}
@media (max-width:768px){
  .sh-r63.sh-r77.sh-r63-home .ideas__col--style .ideas__media{width:min(296px,calc(100vw - 140px));height:auto;aspect-ratio:1 / 1}
  .sh-r63.sh-r77.sh-r63-home .ideas__col--style .ideas__text{z-index:2}
}