/* ROUND 93 — the two 30-Sep feedback documents (AJ). Every rule sits under body.sh-r93; page rules carry the
   page class too. See inc/round93.php for the data-side changes. */

/* ============================================================ Site-wide */

/* FAQ (Our Process, Build Options, every FAQ): the copy column is vertically centred in the section instead of
   top-aligned with empty room under it. .faq keeps its min-height; the photo and wash are absolute. */
.sh-r93 .faq{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}

/* Footer newsletter: the validation line is readable and has room under the field and before the rule below. */
/* r63 places the line as the form's next sibling inside .footer__news, in terracotta (unreadable on the charcoal) */
.sh-r93 .footer__news .sh-ferr,.sh-r93 .footer__news-row .sh-ferr{display:block;margin:10px 0 0;font:500 13px/1.4 var(--sans);color:#f6c9b8}
.sh-r93 .footer__news:has(.sh-ferr){margin-bottom:8px}

/* Story-page split hero on phones and tablets: the photo column is a flex item with flex:1 1 0 inside a COLUMN
   flex box, so it collapsed to 0px and the picture never showed (About, First-time guide, Partner, Our Promise). */
@media (max-width:1023px){
  .sh-r93 .sy-hero__media{flex:none;width:100%}
}
/* A portrait hero photo (Our Promise, First-time guide) is shown whole beside the copy instead of cropped to the
   865 × 479 landscape slot: its own aspect, 600 tall at most, the column shrinks to the photo. */
@media (min-width:1024px){
  .sh-r93 .sy-hero__media--portrait{flex:0 1 auto;max-width:48%;display:flex;justify-content:flex-end}
  .sh-r93 .sy-hero__media--portrait img{width:auto;height:auto;max-width:100%;max-height:600px;object-fit:contain;border-radius:16px}
}
@media (max-width:1023px){
  .sh-r93 .sy-hero__media--portrait img{height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
}

/* ============================================================ Awards (/awards/) */
/* Hero: the text group sits centred between the header and the cards with the frame's 112px above and below. */
@media (min-width:769px){
  .sh-r93.sh-r74 .gal--featured .gal__head{padding:112px 48px 112px}
}
@media (max-width:768px){
  .sh-r93.sh-r74 .gal--featured .gal__head{padding:48px 24px 48px}
  .sh-r93 .gal--featured .gal__intro{margin-top:12px}
}
/* Card hover: tag, heading and "N more photos" only — no location line. */
.sh-r93 .gal--featured .gt__sub{display:none}

/* ============================================================ About / First-time guide: phone header */
/* The header bar over these two heroes is clear (round 67); on phones it takes the dark green the sticky bar
   uses, so the white logo and burger read. */
@media (max-width:768px){
  .sh-r93.sh-r67.sh-page-first-time-builders-guide .nav.sh-nav-top:not(.panel-open)::before,
  .sh-r93.sh-r67.sh-page-about-sentinel-homes .nav.sh-nav-top:not(.panel-open)::before{background:#637468;box-shadow:none}
}

/* ============================================================ First-time guide: top padding */
@media (min-width:1024px){
  /* the hero carried the header's 120px plus its own 96px above the copy; now the same 96px as below */
  .sh-r93.sh-r67.sh-page-first-time-builders-guide .sy-hero--split{padding-top:calc(var(--nav-h,120px) - 24px)}
  .sh-r93.sh-r67.sh-page-first-time-builders-guide .sy-hero__inner{padding-top:72px;padding-bottom:72px}
}

/* ============================================================ Our Promise / Pricing: whole pictures */
/* The editorial parallax (r63) scaled these pictures 112% inside their frames, cropping 6% on every side. */
.sh-r93.sh-page-our-promise .sy-story__photo img.sh-plx,
.sh-r93.sh-page-our-promise .sy-check__photo img.sh-plx,
.sh-r93.sh-page-pricing .is__photo img.sh-plx{transform:none}
/* Our Promise story photos at their own aspect (the Broader Outcomes treatment) */
@media (min-width:1024px){
  .sh-r93.sh-page-our-promise .sy-story__photo{height:auto}
  .sh-r93.sh-page-our-promise .sy-story__photo img{height:auto;object-fit:fill}
}

/* ============================================================ Design & Build / Design Approach: closer crop */
@media (min-width:1024px){
  .sh-r93.sh-page-design-and-build .ed__photo img,
  .sh-r93.sh-page-design-and-build .ed__photo img.sh-plx{transform:scale(1.12);transform-origin:50% 50%}
  .sh-r93.sh-page-our-design-approach .da__photo img{transform:scale(1.15);transform-origin:50% 45%}
}

/* ============================================================ Our Process / Knockdown: Celebration on phones */
/* Below 1024 the travelling-circle script does not run, but r63's rules still hid the Celebration circle and left
   the copy at opacity 0, so the block was an empty band over the photo. */
@media (max-width:1023px){
  .sh-r93.sh-r63 .proc__final{padding-top:24px}
  .sh-r93.sh-r63 .proc__final-circle{opacity:1!important;left:50%;top:24px;width:min(360px,calc(100vw - 48px));height:min(360px,calc(100vw - 48px));transform:translateX(-50%) scale(1)}
  .js .sh-r93.sh-r63 .proc__final:not(.is-in) .proc__final-circle{transform:translateX(-50%) scale(0)}
  .js .sh-r93.sh-r63 .proc__final-text,.js .sh-r93.sh-r63 .proc__final.is-in .proc__final-text{transform:none;opacity:1}
  .sh-r93.sh-r63 .proc__final-text{width:min(360px,calc(100vw - 48px));min-height:min(360px,calc(100vw - 48px));margin:0 auto;padding:24px 28px;justify-content:center;gap:12px;box-sizing:border-box}
  .sh-r93.sh-r63 .proc__final-text .proc__title.h1{font-size:40px}
  .sh-r93.sh-r63 .proc__final{min-height:min(560px,140vw)}
}

/* ============================================================ Knockdown & Rebuild */
/* The Sentinel difference: the fade belongs to the photo, not the section, so the left edge of the picture melts
   into the ground at every width (the section-wide gradient left a hard edge wherever the photo started). */
@media (min-width:1024px){
  .sh-r93.sh-page-knockdown-rebuild .kd-diff{background:#504c4b}
  .sh-r93.sh-page-knockdown-rebuild .kd-diff__bg::after{display:none}
  .sh-r93.sh-page-knockdown-rebuild .kd-diff__bg img{-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.25) 22%,rgba(0,0,0,.8) 48%,#000 60%);mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.25) 22%,rgba(0,0,0,.8) 48%,#000 60%)}
  /* Step five: the dashed line ends on the Celebration circle's top centre (it ran 24px into it) */
  .sh-r93.sh-r66.sh-page-knockdown-rebuild .proc__line{transform:translate(-2px,-4px)}
  /* Celebration: the picture's lower band (the card and glasses) stays in frame */
  .sh-r93.sh-kdr .proc__final-bg{object-position:50% 100%}
}
/* Phones: the group (polaroid + big photo) is centred on the page; BEFORE and AFTER are smaller and both sit INSIDE
   the big photo along its bottom edge (BEFORE left-aligned to the photo, just past the polaroid; AFTER at the right). */
@media (max-width:768px){
  .sh-r93.sh-page-knockdown-rebuild .kd__compare{width:100%;justify-items:center}
  .sh-r93.sh-page-knockdown-rebuild .kd__after{margin:0 0 0 15.03%;width:84.85%;justify-self:start}
  .sh-r93.sh-page-knockdown-rebuild .kd__before{justify-self:start}
  .sh-r93.sh-page-knockdown-rebuild .kd__cap{font-size:10px;letter-spacing:1.2px;color:var(--white);text-shadow:0 1px 6px rgba(0,0,0,.55);align-self:start}
  /* the big photo is 84.85% wide × 459/734 tall and starts 15.03% in: its bottom edge sits at 53.06% of the group width */
  .sh-r93.sh-r74.sh-page-knockdown-rebuild .kd__cap--before{justify-self:start;margin:47% 0 0 calc(34.85% + 2.8% + 12px)}
  .sh-r93.sh-page-knockdown-rebuild .kd__cap--after{justify-self:end;margin:47% 12px 0 0}
}

/* ============================================================ Subdivide & Build */
@media (min-width:1024px){
  /* Subdivision Videos: the scrollbar as drawn — off-white track, tan grab */
  .sh-r93.sh-r63.sh-page-subdivide-and-build .sd-vids .hs__rail{background:var(--off-white)}
  .sh-r93.sh-r63.sh-page-subdivide-and-build .sd-vids .hs__grab{background:var(--tan)}
  /* Proven development plans: the Build Options tile height (488, r63) does not apply here; the frame's 403 with the
     off-white body at 180 (32 padding, title, three lines) and the photo filling the rest */
  .sh-r93.sh-r63.sh-page-subdivide-and-build .bo-card.sd-plan{height:403px}
  .sh-r93.sh-page-subdivide-and-build .sd-plan__body{min-height:180px;justify-content:flex-end}
  .sh-r93.sh-page-subdivide-and-build .sd-plan__text{-webkit-line-clamp:3;min-height:72px}
}
@media (max-width:768px){
  /* Proven development plans head: copy and BROWSE ALL PLANS centred */
  .sh-r93.sh-page-subdivide-and-build .sd-plans__head{align-items:center;text-align:center}
  .sh-r93.sh-page-subdivide-and-build .sd-plans__head .kd__head{align-items:center}
}

/* ============================================================ Accessible Living */
/* Clever ideas: scrollbar as drawn (off-white track, charcoal grab), always shown on desktop */
@media (min-width:1024px){
  .sh-r93.sh-r63.sh-page-accessible-living .ac-ideas .hs__rail{background:var(--off-white)}
  .sh-r93.sh-r63.sh-page-accessible-living .ac-ideas .hs__grab{background:var(--charcoal)}
  .sh-r93.sh-page-accessible-living .ac-ideas .hs.is-static .hs__bar{display:flex}
}
@media (max-width:768px){
  /* hero: the amber tagline centred */
  .sh-r93.sh-page-accessible-living .ac-hero__tagline{text-align:center} /* static block on phones (inner.css) — centred text */
}

/* ============================================================ Build Options */
@media (max-width:768px){
  /* heading → copy 12px (was 24); the text group sits 48px under the header bar and 48px above the first card */
  .sh-r93.sh-page-build-options .bo__head{gap:12px;align-items:center;text-align:center}
  .sh-r93.sh-page-build-options .bo__inner{padding-top:48px}
}

/* ============================================================ Partner with Sentinel (phones) */
@media (max-width:1023px){
  .sh-r93.sh-r74.sh-page-partner-with-sentinel .sy-stories__head{margin-bottom:-16px} /* heading → first photo: 32px */
  .sh-r93.sh-page-partner-with-sentinel .sy-stories{padding-bottom:32px}             /* step three copy → case-study photo */
  .sh-r93.sh-page-partner-with-sentinel .sy-stories + .ti .ti__inner{padding-top:32px}
}

/* ============================================================ Major Subdivisions */
.sh-r93.sh-page-major-subdivisions .ti--cream{background:var(--warm-sand)}

/* ============================================================ Building vs Buying */
/* one soft shadow on the table (the wrapper carried a second copy, which read as a hard, doubled edge) */
.sh-r93.sh-r66.sh-page-building-vs-buying .bvb__table{box-shadow:none!important}
.sh-r93.sh-r66.sh-page-building-vs-buying .cmp{box-shadow:0 10px 40px rgba(37,42,38,.06)!important}
@media (max-width:768px){
  .sh-r93.sh-page-building-vs-buying .ch__circle{min-height:0}
}

/* ============================================================ Charity Home detail */
@media (min-width:1024px){
  /* the hero panel back to a 470 circle (r66 grew every .ch__circle to 550 for BvB / Pricing); type sizes kept */
  .sh-r93.sh-r66 .ch--charity .ch__circle--sm{width:470px;height:470px;padding:0 48px;gap:16px}
  .sh-r93.sh-r66 .ch--charity .ch__circle--sm .ch__copy{max-width:34ch}
  /* the location lines sit centred under the circle with clear space above them */
  .sh-r93 .chh-hero__stack{left:max(var(--global-padding),calc(50% - var(--maxw) / 2 + var(--global-padding)));width:470px;align-items:center;text-align:center;bottom:28px}
}
/* map card: the two-pin Leaflet map fills the media box; pins are the site's amber dot (home) and slate dot (office) with
   their names beside them */
.sh-r93 .sh-r93-lmap{position:absolute;inset:0;width:100%;background:var(--warm-sand);z-index:0} /* r93.js sets bottom to the body's height on desktop */
.sh-r93 .bo-card__media--map:not(.sh-r63 .bo-card .bo-card__media){position:relative}
.sh-r93 .sh-r93-lmap .leaflet-pane img{filter:saturate(.55) sepia(.18) brightness(1.02) contrast(.95)} /* the site's muted map tone (r63) */
.sh-r93 .sh-r93-lmap .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.7)}
.sh-r93 .sh-r93-pin-wrap{background:none;border:0;margin:-9px 0 0 -9px;width:18px!important;height:18px!important;overflow:visible}
.sh-r93 .sh-r93-pin{display:block;width:18px;height:18px;border-radius:50%;border:3px solid var(--white);box-shadow:0 1px 4px rgba(0,0,0,.3);background:var(--amber);box-sizing:border-box}
.sh-r93 .sh-r93-pin--office{background:var(--slate-green)}
.sh-r93 .sh-r93-pin__label{position:absolute;left:50%;top:22px;width:150px;margin-left:-75px;text-align:center;font-size:9px;line-height:1.3;letter-spacing:.9px;color:var(--charcoal);white-space:normal}
.sh-r93 .sh-r93-pin__label span{display:inline;background:rgba(253,251,249,.92);padding:2px 5px;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sh-r93 .sh-r93-pin--office + .sh-r93-pin__label{top:auto;bottom:22px}
/* map card: office lines */
.sh-r93 .chh-office{display:flex;flex-direction:column;gap:2px;margin:4px 0 8px;color:var(--charcoal)}
.sh-r93 .chh-office p{margin:0}
.sh-r93 .chh-office__label{color:var(--mid-grey)}
.sh-r93 .chh-office__name{font-weight:500}
.sh-r93 .chh-office a{color:inherit;text-decoration:none}
.sh-r93 .chh-office a:hover{text-decoration:underline}