/* ROUND 66 — pixel QC pass (client feedback document, 16 tabs, 23 Sep 2026).
   Loads after r63 / r64 / r65 on every page, scoped to body.sh-r66.
   Sections follow the document's tab order; each block names its comment. */

/* ================================================ §0 Type scale capped at Figma
   Rounds 63 and 64 scale every desktop type style with the viewport (0.78x at
   1024, 1x at the 1440 Figma frame, up to 1.2x at 1919). Above 1440 that makes
   every heading LARGER than Figma, which is what most of this document's
   "should be on one line", "should be 2 lines" and "content overflows the
   circle" comments are: at 1920 the gallery heading was 70.8px and wrapped,
   where Figma is 59px on one line. The scale is capped at 1, so from the 1440
   frame upwards every page matches Figma exactly; the approved scaling DOWN
   between 1024 and 1440 is untouched. */
@media (min-width:1024px){
  .sh-r66.sh-r63:not(.sh-r63-home),
  .sh-r66.sh-r63.sh-r63-home{--fl:clamp(.78, tan(atan2(100vw, 1440px)), 1)}
}

/* ==================================================================== §1 Homepage */

/* Style Ideas photo: full image, no crop, Figma proportions.
   style-ideas.png is 693x570 and Figma places it at exactly that size, so at the
   1440 frame the photo already shows in full. home.css stretches the box off the
   right edge of wider viewports (margin-right: -(100vw - maxw)/2) while the
   height stays 570, so at 1920 the box became 936x570 and object-fit:cover threw
   away a quarter of the photo. The bleed is dropped and the box capped at the
   photo's own 693x570, which holds the Figma size, proportions and left position
   at every desktop width. The mask stays off (round 63), so the photo is at full
   opacity, which is the same comment's third line. */
@media (min-width:1024px){
  .sh-r66.sh-r63-home .ideas__col--style .ideas__media{margin-right:0;max-width:693px}
}

/* FIND YOUR STYLE / EXPLORE PLANS back to the rev-52 label size. The heading and
   body copy already match rev-52 once the scale is capped (§0); only the link
   button was still being scaled, at 14px/1.68px against rev-52's 12px/1.6px. */
@media (min-width:1024px){
  .sh-r66.sh-r63.sh-r63-home .ideas__text .link-btn{font-size:12px;letter-spacing:1.6px}
}

/* Build Options cards: 3 full cards + half of the 4th inside the scroller at any
   desktop width. The scroller's right padding is part of the visible area, so it
   is added back before the split. Gap, content, hover and scrollbar unchanged. */
@media (min-width:1024px){
  .sh-r66.sh-r63-home .build__card{
    flex:0 0 calc((100% + var(--global-padding, 48px) - 3 * 32px) / 3.5)}
}

/* Find your local office: heading at its Figma size, and the map keeps its full
   frame when a location circle is clicked (the 1.5x zoom pushed the top of the
   map out of view). */
@media (min-width:1024px){
  .sh-r66.sh-r63.sh-r63-home .local__title{font-size:48px}
}
.sh-r66 .local__mapbox{transform:none !important}

/* ===================================================================== §2 Gallery */

/* Left filter column back to rev-52: rev-52 scrolled with the page; round 63
   made it sticky with its own scrollbar. Category, Type, Style, Keyword and
   Reset Filters are restored. The image grid is untouched. */
@media (min-width:1024px){
  .sh-r66.sh-r63 .gal__filters{position:static;max-height:none;overflow:visible;padding-right:0}
}

/* =============================================================== §3 Build Options */

/* Card headings on one line. Desktop only: on a phone the cards are narrower
   than the longest heading, so holding one line there would push the page
   sideways. */
@media (min-width:1024px){
  .sh-r66.sh-page-build-options .bo-card__title,
  .sh-r66.sh-r63-home .build__card-title{white-space:nowrap}
  .sh-r66.sh-page-build-options .bo-card__title{font-size:clamp(20px, 1.55vw, 27px)}
}

/* ============================================================== §4 Design & Build */

/* "Design & Build gives you exactly what you want." and "The Sentinel difference."
   back to rev-52. Compared against the rev-52 render at 1920 and 1440, the two
   rows' headings, copy, buttons and photo frames are already pixel-identical
   once the type scale is capped (§0); the only thing left was the photographs.
   Round 63 line 595 gives every .ed__photo image the parallax treatment —
   scale(1.12) plus a scroll-linked translate — so each photo sat zoomed in and
   drifting inside its frame, where rev-52 shows the whole frame flat and still.
   The transform is dropped on this page only; the parallax elsewhere, and the
   frames, layout and content here, are untouched. */
.sh-r66.sh-page-design-and-build .ed__photo img.sh-plx{transform:none}

/* ============================================================ §5 Subdivide & Build */

/* "Knockdown & Rebuild" — the content column beside the form box (eyebrow,
   heading, copy, button). Capping the type scale (§0) puts it back to the rev-52
   render exactly: measured against the rev-52 snapshot the whole .sf section is
   pixel-identical at 1920 and 1440, so nothing further is needed here and the
   form card on the right is untouched. */

/* ========================================================= §6 Already Have Plans */

/* Header transparent at the top of the page, the site's usual ground once the
   page scrolls. The bar's background is its own layer, .nav::before (home.css
   317), which inner.css 44 fills with cream on every inner page; round 63 line
   696 hid that layer altogether here, so the header was transparent at the top
   — right — but stayed transparent over the page as it scrolled — wrong. The
   layer is shown again and left transparent only while the header carries
   .sh-nav-top, the class inner.js already toggles at the top of the page, so
   the scrolled state is the site's own and no new script is involved. */
.sh-r66.sh-page-already-have-plans .nav::before{display:block;background:var(--cream)}
.sh-r66.sh-page-already-have-plans .nav.sh-nav-top::before{background:transparent;box-shadow:none}

/* ============================================================== §7 Build vs Buying */

/* Comparison table: softer, lighter shadow to match Figma. */
.sh-r66.sh-page-building-vs-buying .bvb__table,
.sh-r66.sh-page-building-vs-buying .cmp{box-shadow:0 18px 44px rgba(37,42,38,.07) !important}

/* ================================================= §7 + §8 Hero circles (BvB, Pricing)
   The panel was 550 wide but grew past 550 tall as soon as the copy needed the
   room, so border-radius:999px drew an oval. It is a true circle again, with the
   eyebrow, heading, copy and button sized to sit inside it. */
@media (min-width:1024px){
  .sh-r66 .ch__circle{width:550px;height:550px;min-height:0;aspect-ratio:1;padding:0 64px;gap:16px}
  .sh-r66 .ch__circle .kd__head{width:100%}
  .sh-r66 .ch__circle .kd__title.h1{font-size:46px;line-height:1.08}
  .sh-r66 .ch__circle .ch__copy{font-size:15px;line-height:1.5;max-width:34ch;margin-inline:auto}
}

/* Pricing: the Finance photo is shown whole, at its own proportions. */
.sh-r66.sh-page-pricing .ti__photo:has(img[src*="finance"]){height:auto;aspect-ratio:auto}
.sh-r66.sh-page-pricing .ti__photo img[src*="finance"]{height:auto;object-fit:contain}

/* ======================================================= §9 The Sentinel Foundation */

/* Our Partners: one line per partner. Desktop only — at 402px the longest
   partner name is wider than the column, and holding it on one line pushed the
   page 37px sideways. */
@media (min-width:1024px){
  .sh-r66.sh-page-the-sentinel-foundation .sy-ticks__list li,
  .sh-r66.sh-page-the-sentinel-foundation .sy-ticks__list li span{white-space:nowrap}
}

/* Why We Created the Foundation: the section photo has sharp corners. */
.sh-r66.sh-page-the-sentinel-foundation .sy-cols__photo,
.sh-r66.sh-page-the-sentinel-foundation .sy-cols__photo img{border-radius:0}

/* Our Charity Homes: two full cards and a slice of the third. */
@media (min-width:1024px){
    .sh-r66.sh-page-the-sentinel-foundation .chh-other .chc{flex:0 0 calc((100% - 2 * 32px) / 2.35);width:auto}
}

/* Applications: the caption sits under the photo, not across the bottom of it.
   inner.css lays the figure out as a column with a 10px gap, so the caption
   already belongs below the image. Round 63 line 595 gives the image the
   parallax treatment — height:100% of the figure and scale(1.12) — so the photo
   was both filling the figure and then drawn 12% larger than its own box, which
   put its bottom 30px over the caption. Height and transform come off here, the
   photo keeps its 865:466 frame, and the caption falls underneath it. */
.sh-r66.sh-page-the-sentinel-foundation .sy-apps__fig{overflow:visible}
.sh-r66.sh-page-the-sentinel-foundation .sy-apps__fig img{height:auto;transform:none}
.sh-r66.sh-page-the-sentinel-foundation .sy-apps__fig figcaption{
  display:block;overflow:visible;white-space:normal}

/* ============================================================== §10 Charity Homes */

/* Community Giving: three full cards across the first row. */
@media (min-width:1024px){
  .sh-r66.sh-page-charity-homes .chp-list__cards .chc{
    flex:0 0 calc((100% - 2 * 32px) / 3);width:auto}
}

/* ============================================ §11 + §13 Our Process / Knockdown steps */

/* One circle behind Step One.
   inner.css gives each step a single off-white circle that scales in when the
   step arrives (.proc-step__circle). Round 63 hid those circles until a step had
   been passed (r63.css 709/710) and added a second, white, travelling circle
   that rides the dashed line (.sh-proc-traveller, built in r63.js), so at the
   top of the section the reader sees the step-one circle AND a white disc parked
   on the line — the duplicate circle in the document. The traveller is taken out
   of view and each step's own circle behaves as it did in rev-52, which leaves a
   single circle behind the step-one image. The dashed line, the photographs, the
   copy and the scroll behaviour are untouched. */
.sh-r66 .sh-proc-traveller{display:none}
.sh-r66.sh-r63 .proc-step__circle{opacity:1!important}

/* Step copy sits inside the curve rather than over the dashed line, and the step
   headings stay on one line. */
@media (min-width:1024px){
  .sh-r66 .proc-step__text{position:relative;z-index:2}
  .sh-r66 .proc-step__title{white-space:nowrap}
  .sh-r66 .proc__line{z-index:0}
}

/* Celebration: heading, copy and BOOK NOW sit inside the white circle on their
   own — inner.css gives .proc__final-text the circle's own 433x433 box and
   centres the three of them in it, and measured against the rev-52 render the
   block runs from 75px to 306px inside a circle that spans -26px to 407px. No
   rule is needed here; an earlier attempt at this item capped the text at 300px
   and was what pushed the heading out through the top of the circle.

   The dashed line stops 20px above the circle and 5px to its right of centre, in
   rev-52 as well as now, so it is nudged onto the circle's top centre. The path
   itself is untouched; only the two line layers move, and only on the two pages
   that draw them. */
@media (min-width:1024px){
  .sh-r66.sh-page-our-process .proc__line,
  .sh-r66.sh-page-knockdown-rebuild .proc__line{transform:translate(-5px, 20px)}
}

/* ========================================================== §12 Our Design Approach */

/* Our Design Philosophy: the heading holds one line at its Figma size, the copy
   is a step smaller, and the copy column is bottom-aligned with the photo. */
@media (min-width:1024px){
  .sh-r66.sh-page-our-design-approach .da__h.h2{font-size:42px;white-space:nowrap}
  .sh-r66.sh-page-our-design-approach .da__body{font-size:15px;line-height:1.55}
  .sh-r66.sh-page-our-design-approach .da__inner{align-items:flex-end}
  .sh-r66.sh-page-our-design-approach .da__col--pt96{padding-top:0}
}

/* Personality & Functionality back to rev-52 — the whole section: heading,
   description, cards, content, colours and layout. Measured against the rev-52
   snapshot, two things had drifted. The description was being held to 78ch
   (826px) and so ran to three lines, where inner.css line 3345 gives it 948px
   and the two lines the document asks for; that cap is gone. And round 63 line
   588 caps every .ic-card__title at 12ch, which broke "Light, warmth & comfort"
   onto three lines and grew the whole card row by one line (324px cards against
   rev-52's 279px). The cap is lifted on this page only, so the card titles wrap
   as they did in rev-52; the cards elsewhere keep round 63's cap. */
.sh-r66.sh-page-our-design-approach .da-pf .ic-card__title{max-width:none}

/* ============================================================ §13 Knockdown & Rebuild */

/* Hero heading on two lines at the Figma size. Scoped to the hero section, so
   the centred headings further down the page keep their own width. */
@media (min-width:1024px){
  .sh-r66.sh-page-knockdown-rebuild .kd .kd__text .kd__head{max-width:560px}
  .sh-r66.sh-page-knockdown-rebuild .kd .kd__text .kd__title{font-size:48px;line-height:1.08}
}

/* Smarter than a renovation: the description holds to two lines. */
@media (min-width:1024px){
  .sh-r66.sh-page-knockdown-rebuild .kd-cards__text{width:1010px}
  .sh-r66.sh-page-knockdown-rebuild .kd-cards__text .kd__copy{max-width:none;width:950px}
}

/* ========================================================= §14 House & Land Packages */

/* Hero: heading on one line, description on two. */
@media (min-width:1024px){
  .sh-r66.sh-page-house-and-land-packages .kd__title.h1{white-space:nowrap}
  .sh-r66.sh-page-house-and-land-packages .hl-intro__copy{max-width:66ch}
}

/* Package card headings in title case, not all caps. */
.sh-r66 .hlc__title{text-transform:none;letter-spacing:0}

/* ============================================================= §15 House & Land Detail */

/* MORE PHOTOS: a rounded rectangle with the next photo as its ground, which is
   how the display-home pages already draw the same tile (.dd__more in inner.css:
   a 154x138 frame, the photo covering it, a 30% scrim and the count centred in
   white). The tile on a House & Land page carries both classes, and round 63
   lines 676/677 turned it into a small oval chip with a round thumbnail beside
   the text. Those two rules are undone so the shared tile shows through, with
   the 12px radius the document asks for; the tile keeps its position in the
   bottom-right of the hero and the gallery behaviour is untouched. */
.sh-r66.sh-r63 .hld__more{
  display:flex;align-items:center;justify-content:center;
  gap:0;padding:0 0 10px;border:2px solid var(--cream);border-radius:12px;
  background:none;box-shadow:none;overflow:hidden}
.sh-r66.sh-r63 .hld__more img{
  position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover}
.sh-r66.sh-r63 .hld__more .label{
  position:relative;z-index:1;width:133px;text-align:center;
  color:var(--white);text-shadow:0 4px 34px #000}
/* a touch more scrim than the display-home tile: a House & Land thumbnail can be
   a pale render, and the count has to stay readable on it */
.sh-r66.sh-r63 .hld__more::after{background:rgba(0,0,0,.42)}

/* More House & Land packages: two full cards and half of the third, scrolling. */
@media (min-width:1024px){
  .sh-r66 .hl-more .hs__rail{overflow-x:auto}
  .sh-r66 .hl-more .hlc{
    flex:0 0 calc((100vw - 2 * var(--global-padding, 48px) - 2 * 32px) / 2.5);width:auto}
}

/* ============================================================== §16 Accessible Living */

/* The whole hero panel sits inside the circle. */
@media (min-width:1024px){
  .sh-r66.sh-page-accessible-living .ac-hero__circle{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:0 78px;gap:14px}
  .sh-r66.sh-page-accessible-living .ac-hero__circle .kd__title{font-size:42px;line-height:1.08;max-width:11ch;margin-inline:auto}
  .sh-r66.sh-page-accessible-living .ac-hero__circle p:not(.kd__eyebrow){font-size:15px;line-height:1.5;max-width:30ch;margin-inline:auto}
}

/* Clever, accessible design ideas: less air between the heading and the cards. */
@media (min-width:1024px){
  .sh-r66.sh-page-accessible-living .ac-ideas__head{min-height:0;padding:112px 0 32px}
  .sh-r66.sh-page-accessible-living .ac-ideas__track{padding-top:0}
}