/* ============================================================================
   ROUND 67 — pixel QC pass on the client's second feedback document
   ("Sentinel QC-2 - AJ", 17 tabs). One section per tab, in the document's
   order. Every rule is scoped to body.sh-r67 and, where the comment is about
   one page, to that page's body class, so nothing else on the site moves.
   The screenshots in the document were taken on the staging build (rev-54/55)
   at 1920px; the round-66 type cap already puts several "should be on N lines"
   items right at 1920 and 1440 — those are checked, not re-styled.
   ============================================================================ */

/* ================================================================ §1 Plans */

/* Hero — heading on one line, description on two (Figma 358:2766). Both hold
   at 1440 and 1920 with the round-66 cap; the nowrap keeps the heading whole
   on wider screens too. */
@media (min-width:1200px){
  .sh-r67.sh-page-plans .pl-intro .kd__title{white-space:nowrap}
}

/* MORE FILTERS ↓ under Plan name — the same label as RESET FILTERS, chevron
   turning when open; the feature tags use the filter column's own dot rows. */
.sh-r67 .pl__morew{display:inline-flex;align-items:center;gap:8px;padding:8px 0 0;background:none;border:0;cursor:pointer;align-self:flex-start;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--charcoal)}
.sh-r67 .pl__morew-chev{width:16px;height:16px;transition:transform .35s var(--ease-soft)}
.sh-r67 .pl__morew.is-open .pl__morew-chev{transform:rotate(180deg)}
.sh-r67 .pl__morew-panel{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.sh-r67 .pl__morew-panel[hidden]{display:none}
.sh-r67 .pl__morew-panel .pl__group{padding-bottom:0}
.sh-r67 .pl__morew-panel .pl__radio{align-items:flex-start}
.sh-r67 .pl__morew-panel .pl__rlabel{white-space:normal;padding-top:1px}
/* With the feature tags open the sticky column can be taller than the window;
   it scrolls within itself so RESET FILTERS stays reachable. */
@media (min-width:1024px){
  .sh-r67 .pl__filters{max-height:calc(100vh - 140px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--warm-sand) transparent}
}

/* ========================================================= §2 Plan detail page */

/* Plan image — no card around the drawing: it sits on the page ground and its
   white paper multiplies away (Figma 2096:14153). The FLIP / 2D-3D pills and
   the full-size button keep their places and behaviour. */
.sh-r67 .pd--r63 .pd__viewer{background:transparent;box-shadow:none;border-radius:0;padding:0 0 64px;min-height:0;align-self:stretch;align-items:flex-start}
.sh-r67 .pd--r63 .pd__drawing{mix-blend-mode:multiply;max-height:660px;max-width:100%;width:auto}
.sh-r67 .pd--r63 .pd__vbtns{right:0;bottom:0}
.sh-r67 .pd--r63 .pd__full{left:0;bottom:0}

/* Flip and 2D/3D — Figma: white pills, 1px hairline, soft shadow, 118×38 and
   2 × 61×38; the active dimension is charcoal on white, not sage. */
.sh-r67 .pd--r63 .pd__flip{min-height:38px;padding:0 18px;border:1px solid rgba(37,42,38,.14);box-shadow:0 2px 8px rgba(0,0,0,.08);font:600 12px/16px var(--sans);letter-spacing:1.6px}
.sh-r67 .pd--r63 .pd__dims{border:1px solid rgba(37,42,38,.14);box-shadow:0 2px 8px rgba(0,0,0,.08);background:var(--white)}
.sh-r67 .pd--r63 .pd__dim{width:61px;padding:11px 0;line-height:16px}
.sh-r67 .pd--r63 .pd__dim.is-on{background:var(--charcoal);color:var(--off-white)}

/* Left column — the column runs the height of the drawing; PLACE ON A MAP is
   the single cream pill (the SEE PRICING button goes: the price guide itself
   sits under the map button for every visitor, see inc/round67.php), then the
   PRICE GUIDE block and, at the foot of the column, the description. */
.sh-r67 .pd--r63 .pd__cols{align-items:stretch}
.sh-r67 .pd--r63 .pd__side{padding-top:0}
.sh-r67 .pd--r63 .pd__summary{margin:24px 0 16px;font-size:18px;line-height:1.5}
.sh-r67 .pd--r63 .pd__specs{margin:0 0 24px;font-size:18px}
.sh-r67 .pd--r63 .pd__spec{padding:12px 0;border-bottom:1px solid rgba(37,42,38,.14)}
.sh-r67 .pd--r63 .pd__map{margin-top:0;min-height:40px;background:var(--cream);border-color:var(--cream)}
.sh-r67 .pd--r63 .pd__pricing{display:none}
.sh-r67 .pd--r63 .pd__price{padding-top:32px;gap:16px}
.sh-r67 .pd--r63 .pd__price-scale{font-size:16px}
.sh-r67 .pd--r63 .pd__price-fill{background:#7a917f}
.sh-r67 .pd--r63 .pd__price-note{font-size:14px;line-height:1.45;color:var(--mid-grey)}
.sh-r67 .pd--r63 .pd__price-note a{display:block;margin-top:2px;color:var(--mid-grey);text-decoration:underline}
.sh-r67 .pd--r63 .pd__desc{margin-top:auto;padding-top:96px;font-size:14px;line-height:1.5}

/* Try it at your place — an inset panel with 40px corners, the full New
   Zealand map faint across it, white pill with the cream search end (Figma). */
.sh-r67 .pd--r63 .pd-try{margin:0 var(--global-padding) 48px;border-radius:40px;min-height:760px;padding:96px 48px}
.sh-r67 .pd--r63 .pd-try__map{height:94%;width:auto;left:50%;top:50%;transform:translate(-44%,-50%);opacity:.8;filter:grayscale(1) contrast(1.1)}
.sh-r67 .pd--r63 .pd-try__inner{max-width:640px;gap:14px}
.sh-r67 .pd--r63 .pd-try__sub{margin:0 0 8px;font-size:18px;opacity:1}
.sh-r67 .pd--r63 .pd-try__form{width:min(360px,100%)}
.sh-r67 .pd--r63 .pd-try__field{padding:0 0 0 18px;gap:8px;height:46px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.sh-r67 .pd--r63 .pd-try__field>img{width:18px;height:18px}
.sh-r67 .pd--r63 .pd-try__field input{font-size:16px}
.sh-r67 .pd--r63 .pd-try__go{width:56px;height:46px;border-radius:0 999px 999px 0;background:var(--cream);color:var(--charcoal)}
.sh-r67 .pd--r63 .pd-try__go svg{width:16px;height:16px}
@media (max-width:1023px){
  .sh-r67 .pd--r63 .pd-try{margin:0 24px;border-radius:24px;min-height:520px;padding:64px 24px}
  .sh-r67 .pd--r63 .pd__desc{padding-top:32px}
  .sh-r67 .pd--r63 .pd__viewer{padding-bottom:56px}
}

/* ================================================ §3 Plans list — Accessible view */

/* HELP ME FIND A PLAN goes only while the Accessible info card is showing (the
   Accessible type ticked, or the ?type=accessible deep link); the main Plans
   page keeps it. The hero precedes the card, so :has() reads the card's state. */
.sh-r67.sh-page-plans:has(.pl-info[data-pl-info="accessible"]:not([hidden])) .pl-intro__cta{display:none}

/* Accessible Homes card — the photo keeps its own proportions (1200×690) so
   the whole room shows at every desktop width; the card grows with it and the
   terracotta fade on its left edge stays as it is. */
@media (min-width:1024px){
  .sh-r67 .pl-info__photo{flex:0 0 56%;width:56%}
  .sh-r67 .pl-info__photo img{height:auto;min-height:100%;aspect-ratio:1200 / 690;object-fit:cover;object-position:left center}
}

/* ============================================================ §4 Saved · §17 Gallery */

/* Hero copy sits midway between the header and the grid. The head box starts
   under the fixed 120px header with 120px top padding and only 24px below, so
   the copy landed high; equal padding puts it in the middle (measured
   round67/gaps.py: 163 / 163 at 1920×1000). */
@media (min-width:1024px){
  .sh-r67.sh-page-saved .gal__head,
  .sh-r67.sh-page-gallery .gal__head{padding-bottom:120px}
}

/* ============================================================== §8 Blog page */

/* Hero copy midway between the header and the first card: 184px above and
   56px below become 120 / 120 (round67/gaps.py). */
@media (min-width:768px){
  .sh-r67.sh-blog .bl{padding-top:var(--nav-h,120px)}
  .sh-r67.sh-blog .bl__intro{margin-bottom:120px}
}
/* Featured card heading a step down from the 48px h2 — the serif at 35px, the
   size the site's h3-serif token uses, so it holds in two lines. */
.sh-r67.sh-blog .bl-card--feature .bl-card__title{font-size:35px;line-height:1.27}

/* ======================================================== §5 Broader Outcomes */

/* "How we are making a difference": eyebrow in #637468, 16px under it before
   the heading, and sharp corners on every story photo. */
.sh-r67.sh-page-broader-outcomes .sy-stories__head .kd__eyebrow{color:#637468;margin-bottom:12px}
.sh-r67.sh-page-broader-outcomes .sy-story__photo,
.sh-r67.sh-page-broader-outcomes .sy-story__photo img{border-radius:0}

/* Section images whole: the story photos are the Figma frames' own files
   (580×676, 636×407, 636×510), so with the fixed heights and the round-63
   parallax zoom (scale 1.12) gone they show complete at every desktop width. */
.sh-r67.sh-page-broader-outcomes .sy-story__photo,
.sh-r67.sh-page-broader-outcomes .sy-stories__col--l .sy-story__photo,
.sh-r67.sh-page-broader-outcomes .sy-stories__col--r .sy-story__photo,
.sh-r67.sh-page-broader-outcomes .sy-stories__col--r .sy-story:first-child .sy-story__photo{height:auto}
.sh-r67.sh-page-broader-outcomes .sy-story__photo img,
.sh-r67.sh-page-broader-outcomes .sy-story__photo img.sh-plx{height:auto;transform:none;object-fit:fill}
/* Responsible Suppliers photo (526×680, the file's own size): the zoom goes too. */
.sh-r67.sh-page-broader-outcomes .sy-check__photo img.sh-plx{transform:none;height:100%;object-fit:cover}

/* ========================================================== §6 Parenting Place */

/* Hero: the heading is the 48px h2 of the Figma (it rendered at the 59px h1
   size), two lines in the 408px column at every desktop width; the 16px body
   is the Figma size and holds with the round-66 cap. The video thumbnail keeps
   the frame's 865×479 proportion instead of a fixed 479px height, so it does
   not stretch or crop as the column widens past 1440. */
@media (min-width:1024px){
  .sh-r67.sh-page-parenting-place .sy-hero__text .kd__title.h2{font-size:48px;line-height:1.17}
  .sh-r67.sh-page-parenting-place .sy-hero__media--video,
  .sh-r67.sh-page-parenting-place .sy-hero__media .sy-vid{height:auto;min-height:0;aspect-ratio:865 / 479}
  .sh-r67.sh-page-parenting-place .sy-hero__media .sy-vid .gd__video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}

/* How we support Parenting Place: FIND OUT MORE centred in the Charity Homes card. */
.sh-r67.sh-page-parenting-place .ic-card .ic-card__link{align-self:center}

/* Julia Kuriger quote: 48px on desktop so it sits in two lines (was the 59px h1). */
@media (min-width:1024px){
  .sh-r67.sh-page-parenting-place .sy-quote__p.h1{font-size:48px;line-height:1.17}
}

/* Our Charity Homes: two whole cards and the start of the third at every
   desktop width (580 of 1344 at 1440, the Figma split), not a fixed 580px. */
@media (min-width:1024px){
  /* 100% = the track's content box (1344 at 1440); minus two 24px gaps, 2.234 cards
     → 580px, the Figma card, with 184px of the third showing past the right gutter */
  .sh-r67.sh-page-parenting-place .sy-homes .chc{flex:0 0 calc((100% - 48px) / 2.234);width:auto}
}

/* ============================== §7 Display home detail · §11 Gallery single — header shade */

/* The homepage's top-of-hero shade (home.css .hero::before, verbatim: 96px,
   neutral, 31% → 0, desktop only) on the display-home and gallery-detail
   heroes, the same way inner.css gives it to the other hero pages. Nothing on
   the homepage changes. */
@media (min-width:1024px){
  .sh-r67 .dd__hero::before,
  .sh-r67 .gd__hero::before{
    content:"";position:absolute;left:0;right:0;top:0;height:96px;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(0,0,0,.31) 0,
      rgba(0,0,0,.25) 24px,
      rgba(0,0,0,.215) 46px,
      rgba(0,0,0,.145) 60px,
      rgba(0,0,0,.105) 72px,
      rgba(0,0,0,.025) 84px,
      rgba(0,0,0,0) 96px);
  }
}

/* Display home detail — the LIMITED TIME ONLY tag above the title comes from
   the home's Hero Tag field (inc/round67.php); the map card already runs the
   height of the sage card (both stretch in .dd__info) and "Why visit?" is the
   home's heading field, set for Orewa by the round's one-off seed. */

/* ============================================================== §9 Location page */
/* Figma location-desktop 712:7681, measured through the Figma MCP: every
   number below is the frame's. The office page already runs the frame's
   sections (round 63); these rules bring each one to the frame. */

/* Hero (712:7998): 800px; photo 897 of 1440 with the charcoal fade from 56%
   to 89% of its width; copy column at 760px, 560 wide, centred vertically. */
@media (min-width:1024px){
  .sh-r67.single-local_office .rg2-hero{display:block;height:800px;min-height:0}
  .sh-r67.single-local_office .rg2-hero__photo{width:calc(50% + 177px)}
  .sh-r67.single-local_office .rg2-hero__photo img{object-position:54% 50%}
  .sh-r67.single-local_office .rg2-hero__photo::after{background:linear-gradient(90deg,rgba(66,64,64,0) 56.1%,#424040 89.4%)}
  .sh-r67.single-local_office .rg2-hero__text{position:absolute;left:calc(50% + 40px);top:0;bottom:0;width:560px;margin:0;padding:60px 0 0;justify-content:center;gap:24px}
  .sh-r67.single-local_office .rg2-hero__eyebrow{font-size:11px;letter-spacing:2px;line-height:normal;margin:0 0 -8px}
  .sh-r67.single-local_office .rg2-hero__title{font-size:52px;line-height:58px;letter-spacing:0;color:var(--white);max-width:none}
  .sh-r67.single-local_office .rg2-hero__quote{max-width:none;color:var(--cream)}
  .sh-r67.single-local_office .rg2-hero__quote p{margin:0 0 10px}
  .sh-r67.single-local_office .rg2-hero__sig--script{font-size:32px;line-height:1.5;margin:-14px 0 -14px}
  .sh-r67.single-local_office .rg2-hero__who{font-size:16px;gap:0;color:var(--cream)}
  .sh-r67.single-local_office .rg2-hero__who strong{font-weight:700;color:var(--cream)}
  .sh-r67.single-local_office .rg2-hero__cta{margin-top:0;background:var(--cream);border-color:var(--cream);color:var(--charcoal)}
}

/* Contact strip (723:7598): the cream band is 331px on a warm-sand section
   411px tall; the 1085px group (248 details · 436 form · 369 card, 32 apart)
   is centred, and the form and card, 383px tall, stand 26px proud of the band
   above and below — over the hero and into the sand. */
@media (min-width:1024px){
  .sh-r67.single-local_office .rg-contact{position:relative;z-index:2;background:var(--warm-sand);padding:0 var(--global-padding) 80px}
  .sh-r67.single-local_office .rg-contact::before{content:"";position:absolute;left:0;right:0;top:0;height:331px;background:var(--cream)}
  .sh-r67.single-local_office .rg-contact__inner{position:relative;max-width:none;height:331px;display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:nowrap}
  .sh-r67.single-local_office .rg-contact__details{flex:0 0 248px;width:248px;gap:0}
  .sh-r67.single-local_office .rg-contact__title{font-size:36px;line-height:1.17;min-height:66px}
  .sh-r67.single-local_office .rg-contact__olabel{margin:0 0 8px;font:600 12px/1.2 var(--sans);letter-spacing:1.44px;text-transform:uppercase;color:var(--charcoal)}
  .sh-r67.single-local_office .rg-contact__addr{font-size:14px;line-height:1.5}
  .sh-r67.single-local_office .rg-contact__hours{display:none}
  .sh-r67.single-local_office .rg-contact__links{padding-top:4px;gap:0}
  .sh-r67.single-local_office .rg-contact__links .link-btn:nth-child(2){order:-1}
  .sh-r67.single-local_office .rg-contact__links .link-btn:nth-child(3){display:none}
  .sh-r67.single-local_office .rg-contact__form{flex:0 0 436px;max-width:436px;height:382px;box-sizing:border-box;box-shadow:0 12px 24px rgba(0,0,0,.2)}
  .sh-r67.single-local_office .rg-contact__form .book__frow:has(textarea){flex:1 1 auto}
  .sh-r67.single-local_office .rg-contact__form .book__frow:has(textarea) .book__field,
  .sh-r67.single-local_office .rg-contact__form .book__field textarea{height:100%}
  .sh-r67.single-local_office .rg-contact__form .book__note{margin:0;text-align:center;font:500 12px/1.5 var(--sans);color:var(--mid-grey)}
  .sh-r67.single-local_office .rg-contact__home.dh-card{flex:0 0 369px;width:369px;height:383px;min-height:0;align-self:center;box-shadow:0 12px 48px rgba(0,0,0,.2)}
  .sh-r67.single-local_office .rg-contact__home .dh-card__media{flex:1 1 auto;aspect-ratio:auto;min-height:0}
  .sh-r67.single-local_office .rg-contact__home .dh-card__body{padding:32px;gap:10px}
  .sh-r67.single-local_office .rg-contact__home .dh-card__tag{background:#ffcf56}
}

/* Introducing (734:7952): warm-sand with the plan texture at 40% fading in
   from the top; an 1109px container, the 535px copy column sticky while the
   cards scroll; cards 4px corners, 182/131 photos, 16px bodies, 32px apart,
   the owners' card across both columns. */
@media (min-width:1024px){
  .sh-r67.single-local_office .rg2-team{background:var(--warm-sand);padding:96px var(--global-padding)}
  .sh-r67.single-local_office .rg2-team__texture{opacity:.4}
  .sh-r67.single-local_office .rg2-team::before{content:"";position:absolute;left:0;right:0;top:0;height:14%;background:linear-gradient(180deg,var(--warm-sand),rgba(247,243,234,0));pointer-events:none}
  .sh-r67.single-local_office .rg2-team__inner{max-width:1109px;gap:80px}
  .sh-r67.single-local_office .rg2-team__text{flex:0 0 535px;width:535px;padding-top:96px;top:calc(var(--nav-h,120px) + 20px);gap:24px}
  .sh-r67.single-local_office .rg2-team__text .kd__head{gap:4px}
  .sh-r67.single-local_office .rg2-team__body{max-height:9.2em}
  .sh-r67.single-local_office .rg2-team__body::after{background:linear-gradient(180deg,rgba(239,232,214,0),var(--warm-sand))}
  .sh-r67.single-local_office .rg2-team__more{appearance:none;-webkit-appearance:none;background:transparent;border:0;border-bottom:1px solid var(--amber);border-radius:0;padding:8px 0;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--charcoal);cursor:pointer}
  .sh-r67.single-local_office .rg2-team__grid{flex:1 1 0;width:auto;gap:32px}
  .sh-r67.single-local_office .rg2-person{box-shadow:0 1px 4px rgba(0,0,0,.15)}
  .sh-r67.single-local_office .rg2-person__photo,
  .sh-r67.single-local_office .rg2-person--lead .rg2-person__photo{aspect-ratio:182 / 131}
  .sh-r67.single-local_office .rg2-person__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38.55%,rgba(0,0,0,.7));opacity:0;transition:opacity .3s;pointer-events:none}
  .sh-r67.single-local_office .rg2-person:has(.rg2-person__bio):hover .rg2-person__photo::after,
  .sh-r67.single-local_office .rg2-person:has(.rg2-person__bio):focus-within .rg2-person__photo::after{opacity:1}
  .sh-r67.single-local_office .rg2-person__bio{top:auto;left:16px;bottom:17px;z-index:1}
  .sh-r67.single-local_office .rg2-person__body{padding:16px;gap:4px}
  .sh-r67.single-local_office .rg2-person__name{font-size:18px;line-height:1.3}
  .sh-r67.single-local_office .rg2-person__role{font-size:14px}
  .sh-r67.single-local_office .rg2-person__links{flex-direction:row;flex-wrap:wrap;gap:0 12px;margin-top:0}
  .sh-r67.single-local_office .rg2-person__links .link-btn{font-size:12px}
}

/* Some of our recent work (743:9341): centred label + 59px heading, 32px
   under it, two tiles 32px apart at their own heights. */
@media (min-width:1024px){
  .sh-r67.single-local_office .rg2-work__inner{gap:32px}
  .sh-r67.single-local_office .rg2-work .kd__title{font-size:59px;line-height:1.08;letter-spacing:-.59px}
  .sh-r67.single-local_office .rg2-work__grid{gap:32px}
  .sh-r67.single-local_office .rg2-work .rg-gtile{box-shadow:0 1px 4px rgba(0,0,0,.15)}
}

/* ============================================================ §10 Our History */

/* 2020–2021: the photo stack is drawn edge to edge of the 837px frame, so the
   panel is that frame's height — round 63 stretched every panel to the window
   and centred the frame, which left the stack floating with a gap above and
   below on tall screens. This panel keeps the frame height; the others keep
   the round-63 behaviour. */
@media (min-width:1024px){
  .sh-r67.sh-r63-history .hist__panel[data-hist-panel="5"]{height:calc(837px * var(--hist-s))}
  .sh-r67.sh-r63-history .hist__panel[data-hist-panel="5"] .hist__stage{top:0;transform:translateX(-50%) scale(var(--hist-s));transform-origin:50% 0}
  .sh-r67.sh-r63-history .hist__panel[data-hist-panel="5"] .hist__bg{top:0;height:837px}
  /* the stack no longer floats (round 63's 26px parallax drift) — it is pinned to the edges */
  .sh-r67.sh-r63-history .hist__panel[data-hist-panel="5"] .hist__stock{translate:0 0;transition:none}
}

/* ======================================================= §11 Gallery single page */

/* Hero title over the photo's foot (Figma 1128:36895: the amber italic sits on
   the bottom edge of the image, its descenders in the charcoal). The title box
   was 71px up, which left the letters just under the photo; 92px puts the
   baseline on the edge. The content below keeps its distance. */
@media (min-width:1024px){
  .sh-r67 .gd__deco{margin-top:-92px}
  .sh-r67 .gd__inner{padding-top:88px}
}
/* VIEW PLAN beside SAVE (both white pills, 12px apart) — SAVE moves left by
   the width of the new button. The button renders once the entry names its
   plan (Orewa Showhome → the Orewa plan, set by the round's one-off seed). */
.sh-r67 .gd__actions{gap:12px}
.sh-r67 .gd__actions .btn--sand{background:var(--white);color:var(--charcoal)}

/* =============================================== §12 First Time Builders Guide · §14 About */

/* Header: clear over the top of the page, the site's cream bar once the page
   scrolls — .sh-nav-top is the class inner.js toggles at the top (the same
   mechanism round 66 used for Already Have Plans). */
.sh-r67.sh-page-first-time-builders-guide .nav.sh-nav-top:not(.panel-open)::before,
.sh-r67.sh-page-about-sentinel-homes .nav.sh-nav-top:not(.panel-open)::before{background:transparent;box-shadow:none}
/* …and the page starts under the header rather than beneath it, so the clear
   bar shows the hero's own ground: the main column drops its header offset and
   the hero carries it as padding instead. */
@media (min-width:1024px){
  .sh-r67.sh-page-first-time-builders-guide .page-main,
  .sh-r67.sh-page-about-sentinel-homes .page-main{padding-top:0}
  .sh-r67.sh-page-first-time-builders-guide .sy-hero--split,
  .sh-r67.sh-page-about-sentinel-homes .sy-hero--split{padding-top:var(--nav-h,120px)}
}

/* What's inside → Download: 206px between the two (110 + 96 of padding) becomes 96. */
@media (min-width:1024px){
  .sh-r67.sh-page-first-time-builders-guide .sy-check{padding-bottom:48px}
  .sh-r67.sh-page-first-time-builders-guide .sy-check + .sf{padding-top:48px}
}

/* About: the two photos with square corners; "A bit about us" taller with the
   whole of both faces in frame (the portrait is cropped from its top edge). */
.sh-r67.sh-page-about-sentinel-homes .sy-hero__media,
.sh-r67.sh-page-about-sentinel-homes .sy-hero__media img,
.sh-r67.sh-page-about-sentinel-homes .sy-cols__photo,
.sh-r67.sh-page-about-sentinel-homes .sy-cols__photo img{border-radius:0}
@media (min-width:1024px){
  .sh-r67.sh-page-about-sentinel-homes .sy-hero__media img{height:560px;object-position:50% 0}
  .sh-r67.sh-page-about-sentinel-homes .sy-hero__media img.sh-plx{transform:none}
}

/* ============================================================ §13 Subdivisions */
/* single-subdivision.php now runs on the site's own blocks (see the template
   header). The rules here are the page-specific measurements: the container,
   the intro and copy columns, the photo grid and the site map. The hero is the
   Broader Outcomes hero (inner.css .sy-hero--decor) and the packages band is
   inner.css .hl-more, both untouched. */
.sh-r67 .sh-sub-single__container{max-width:var(--maxw);margin:0 auto;padding:0 var(--global-padding);box-sizing:border-box}
/* Hero: the header rides clear over the photo (body.sh-hero); the copy sits in
   the grid, left-aligned; the developer's logo keeps its plate. */
.sh-r67 .sh-sub-single__decor.sy-hero--decor{min-height:777px}
.sh-r67 .sh-sub-single__decor .sh-sub-single__logo{max-width:170px;margin-top:20px;background:rgba(37,42,38,.72);padding:12px 16px;border-radius:10px;object-fit:contain}
/* Packages band: inner.css .hl-more's own padding (round 65's 48px 0 on the
   old section class gave way to it). */
.sh-r67 .sh-sub-single__pkgs.hl-more{padding:96px 0 96px var(--global-padding)}
/* Intro paragraph: centred in the container, the 866px reading measure. */
.sh-r67 .sh-sub-single__intro{background:var(--off-white);padding:96px 0}
.sh-r67 .sh-sub-single__lede{max-width:866px;margin:0 auto;text-align:center;color:var(--charcoal)}
/* Photo set: three tiles a row in the container, 16px corners, 4:3, 24px apart. */
.sh-r67 .sh-sub-single__gallery{background:var(--off-white);padding:96px 0 0}
.sh-r67 .sh-sub-single__photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0}
.sh-r67 .sh-sub-single__photo{display:block;border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.sh-r67 .sh-sub-single__photo img{width:100%;aspect-ratio:4 / 3;object-fit:cover;display:block;border-radius:0;transition:transform .9s var(--ease-card-open,ease)}
.sh-r67 .sh-sub-single__photo:hover img{transform:scale(1.05)}
/* Developer's copy: the editorial column — 866px, centred, the site's heading
   and paragraph rhythm (48px serif h2, 27px h3, 16px body, 24px between). */
.sh-r67 .sh-sub-single__body{background:var(--off-white);padding:96px 0}
.sh-r67 .sh-sub-single__rich{max-width:866px;margin:0 auto;color:var(--charcoal)}
.sh-r67 .sh-sub-single__rich>*{margin:0 0 16px}
.sh-r67 .sh-sub-single__rich>*:last-child{margin-bottom:0}
.sh-r67 .sh-sub-single__rich h2,.sh-r67 .sh-sub-single__rich h3,.sh-r67 .sh-sub-single__rich h4{margin:48px 0 16px;color:var(--charcoal)}
.sh-r67 .sh-sub-single__rich>h2:first-child,.sh-r67 .sh-sub-single__rich>h3:first-child,.sh-r67 .sh-sub-single__rich>h4:first-child{margin-top:0}
.sh-r67 .sh-sub-single__rich h2{font:400 48px/1.17 var(--serif)}
.sh-r67 .sh-sub-single__rich h3{font:500 27px/1.27 var(--sans)}
.sh-r67 .sh-sub-single__rich h4{font:500 18px/1.4 var(--sans)}
.sh-r67 .sh-sub-single__rich p,.sh-r67 .sh-sub-single__rich li{font:400 16px/1.5 var(--sans)}
.sh-r67 .sh-sub-single__rich ul,.sh-r67 .sh-sub-single__rich ol{padding-left:22px}
/* Site map: in the container, the heading over it, 16px corners. */
.sh-r67 .sh-sub-single__map{background:var(--off-white);padding:0 0 96px}
.sh-r67 .sh-sub-single__map .kd__head{margin-bottom:32px}
.sh-r67 .sh-sub-single__map-link{display:block;border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.sh-r67 .sh-sub-single__map img{width:100%;height:auto;display:block;border-radius:0;margin:0}
@media (max-width:1023px){
  .sh-r67 .sh-sub-single__decor.sy-hero--decor{min-height:360px}
  .sh-r67 .sh-sub-single__intro,.sh-r67 .sh-sub-single__body{padding:64px 0}
  .sh-r67 .sh-sub-single__gallery{padding-top:64px}
  .sh-r67 .sh-sub-single__photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .sh-r67 .sh-sub-single__rich h2{font-size:34px}
  .sh-r67 .sh-sub-single__map{padding-bottom:64px}
}
@media (max-width:767px){
  .sh-r67 .sh-sub-single__photos{grid-template-columns:1fr}
}

/* ================================================================ §15 Homepage */

/* Style Ideas: the photo keeps its 693×570 (round 66) and now sits against the
   right edge of the screen at every width — at 1440 that is where it already
   was; past 1440 the grid stops at 1600 and the photo follows the viewport edge
   (home.css's own negative margin) instead of the grid. */
@media (min-width:1024px){
  .sh-r67.sh-r63-home .ideas__col--style .ideas__media{margin-left:auto;margin-right:calc(-1 * max(0px,(100vw - var(--maxw)) / 2))}
}

/* Office card (Figma "Location Card" 309:1704): 12px sides, 16px foot, the
   photo 182px with square corners, 18px name, 14px details; the round-64
   "Details from sentinelhomes.co.nz — to be confirmed" line and its amber dot
   go (the flag stays in the office's Contact details field for editors). */
.sh-r67.sh-r63-home .office__card{padding:12px 12px 16px}
.sh-r67.sh-r63-home .office__card img{height:182px;border-radius:0}
.sh-r67.sh-r63-home .office__body{padding:16px 0 0;gap:4px}
.sh-r67.sh-r63-home .office__name{font-weight:500;font-size:18px;line-height:1.4}
.sh-r67.sh-r63-home .office__meta{font-size:14px;line-height:1.4;color:var(--charcoal)}
.sh-r67.sh-r63-home .office__actions{margin-top:12px}
.sh-r67 .office__note{display:none}