/* ============================================================
   Sentinel Homes — Inner pages (inner-pages phase, Sep 2026)
   Loaded on every NON-front page AFTER home.css. home.css supplies the
   tokens and every shared component (nav, footer, buttons, FAQ, banners,
   motion); this file adds the inner-page layouts on top. It is never
   enqueued on the homepage, so nothing here can reach the locked design.
   Source of truth: Figma "Sentinel-Homes-24-08" (1440 desktop frames).
   ============================================================ */

/* ---------- Page frame ----------
   The shared nav is position:fixed (home.css). On the homepage it overlays
   the hero; on inner pages the content starts directly beneath it, so the
   main element is padded by the bar's height at each breakpoint:
   ≥1201: 32 + 55.76 + 32 = 119.76  (Figma Desktop Nav)
   1024–1200: 32 + 40 + 32 = 104     (home.css compact desktop bar)
   ≤1023: 16 + 31 + 16 = 63          (Figma mobile Nav 63.1) */
.sh-inner{--sh-nav-h:119.76px}
@media (max-width:1200px){.sh-inner{--sh-nav-h:104px}}
@media (max-width:1023px){.sh-inner{--sh-nav-h:63px}}
.sh-inner .page-main{padding-top:var(--sh-nav-h);min-height:60vh}
/* ROUND 52 (client, 8 Sep): WordPress already pushes the page down by the admin bar
   (html{margin-top:32px}) and the fixed nav sits at top:32px, so adding the bar's
   height here again opened a 32px gap under the inner-page header for logged-in
   users. The nav height alone is the right clearance. Homepage untouched. */
.sh-inner.admin-bar .page-main{padding-top:var(--sh-nav-h)}

/* ---------- Nav on inner pages: the cream state at rest (DESKTOP ONLY) ----------
   Figma inner frames show the bar solid cream (#F7F3EA) with charcoal logo
   and links, white "S" saved button and sage CONTACT — exactly home.css's
   `.nav.scrolled` colours, applied here from the first frame. The bar still
   compacts on scroll via home.js (that part stays with .scrolled).

   ROUND 46 (client, 7 Sep 2026 — "reuse the exact same Header … for both
   desktop and mobile"): these overrides now apply at ≥1024px only. Below
   that, home.css's own mobile/tablet chrome — the approved homepage bar
   (≤768: the #637468 bar with the white logo and burger at every scroll
   position; 769–1023: the cream bar with the charcoal logo) — reaches the
   inner pages untouched. Before this, the un-scoped `.sh-inner .nav::before`
   kept the bar cream on phones while home.css's `.nav.scrolled .nav__logo img
   {filter:…invert(1)}` (higher specificity) turned the logo and burger white
   as soon as the page scrolled: white on cream, the invisible header in the
   client's screenshots. The markup was always the shared site-nav.php. */
@media (min-width:1024px){
.sh-inner .nav::before{background:var(--cream)}
.sh-inner .nav__logo img{filter:brightness(0) invert(.26)}
.sh-inner .nav__links{color:var(--charcoal)}
.sh-inner .nav__links a{color:var(--charcoal)}
.sh-inner .nav__save{background:var(--white);border-color:transparent;color:var(--charcoal);box-shadow:var(--shadow-sm)}
.sh-inner .nav__contact{background-color:var(--sage);--sweep:rgba(45,55,47,.28);border-color:transparent;color:var(--off-white)}
.sh-inner .nav__toggle{color:var(--charcoal)}
.sh-inner .nav.scrolled::before{box-shadow:0 4px 24px rgba(66,64,64,.08)}
}

/* ---------- Page ground ----------
   Inner frames sit on cream (Figma frame fill #F7F3EA) rather than the
   homepage's off-white body. */
.sh-inner{background:var(--cream)}

/* ---------- Legacy wrappers (configurator demo pages) ----------
   page-plans.php / single-house.php belong to the colleague's configurator
   and keep their simple heading + container until that work is connected. */
.shell-page-head{width:100%;padding:56px var(--global-padding) 8px;max-width:var(--maxw);margin:0 auto}
.shell-page-head__eyebrow{font-family:var(--sans);font-weight:600;font-size:13.33px;letter-spacing:1.6px;text-transform:uppercase;color:var(--slate-green);margin:0 0 10px}
.shell-page-head__title{font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.1vw,65.56px);letter-spacing:-1.11px;line-height:1.08;margin:0}
.shell-page-head__lede{color:var(--mid-grey);max-width:640px;margin:16px 0 0}
.shell-house{width:100%;max-width:var(--maxw);margin:28px auto 96px;padding:0 var(--global-padding)}
.shell-house .house-configurator{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}
.shell-content{width:100%;max-width:900px;margin:40px auto 96px;padding:0 var(--global-padding)}
.shell-content h1,.shell-content h2{font-family:var(--serif);font-weight:400}

/* ============================================================
   BUILD OPTIONS PAGE — Figma build-options-desktop 435:3921
   text-content 470:4365: warm-sand ground + plan-lines graphic at 40%,
   padding 96/48, heading block 800 wide, then a 2 + 3 card grid.
   Cards reuse the homepage card language (same tokens, same open/close
   curves, same feathered hover shadow the client approved in round 26,
   same .link-btn) in the page's own 2 + 3 layout.
   ============================================================ */
.bo{position:relative;background:var(--warm-sand);overflow:hidden}
.bo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background:url("home/graphics.png") no-repeat center top;background-size:cover}
.bo__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:var(--section-spacing);
  padding:var(--section-spacing) var(--global-padding)}
/* Text Block 439:4151 — 800 wide, 64 side padding, 24 gap, centred */
.bo__head{width:800px;max-width:100%;padding:26px 64px 0;display:flex;flex-direction:column;gap:24px;text-align:center}
/* ^ 26px = the Text Block's empty 22px eyebrow row + 4px gap (I439:4151;887:16037):
   the heading sits at the same y as on pages that carry an eyebrow. */
.bo__title{margin:0;color:var(--charcoal)}
.bo__intro{color:var(--charcoal)}
.bo__intro p{margin:0}
.bo__intro p+p{margin-top:12px}
/* Frame 439:4063 — wrap, 32 gap, 96 bottom padding */
.bo__cards{display:flex;flex-wrap:wrap;gap:var(--desktop-grid-gap,32px);align-items:stretch;width:100%;padding-bottom:var(--section-spacing)}
.bo-card{position:relative;flex:1 1 330px;min-width:330px;display:flex;flex-direction:column;
  background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15);outline:none}
/* Row 1: Large Card 439:4064 fixed 648 wide; its neighbour fills the rest. Both 488 tall. */
.bo-card--large{height:488px}
.bo-card--large:first-child{flex:0 0 648px}
.bo-card__media{position:relative;width:100%;height:356px;overflow:hidden;flex:none}
.bo-card--large .bo-card__media{flex:1 1 auto;height:auto;min-height:0}
.bo-card__media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);
  transition:transform .8s var(--ease-card-close)}
.bo-card__body{background:var(--off-white);padding:var(--space-8) var(--space-8) 30px;display:flex;flex-direction:column;gap:0;justify-content:flex-end;
  transition:background-color .6s var(--ease-card-close)}
.bo-card__title{margin:0;color:var(--charcoal)}
.bo-card__desc{margin:0;color:var(--mid-grey)}
/* Hover reveal — identical mechanics to .build__card-reveal on the homepage */
.bo-card__reveal{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
  transition:grid-template-rows .8s var(--ease-card-close),opacity .55s var(--ease-card-close),margin-top .8s var(--ease-card-close)}
.bo-card__reveal-in{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:12px;padding-bottom:2px}
/* ^ the 2px keeps the link's 1px underline overhang unclipped while open (same
   trick as the homepage card); the body's 30px bottom padding + these 2px =
   Figma's 32, so the closed card measures exactly 32 + title + 32. */
.bo-card:hover .bo-card__reveal,.bo-card:focus-within .bo-card__reveal,.bo-card:focus .bo-card__reveal{
  grid-template-rows:1fr;opacity:1;margin-top:10px; /* Figma body gap 10 */
  transition:grid-template-rows .9s var(--ease-card-open),opacity .68s var(--ease-card-open) .06s,margin-top .9s var(--ease-card-open)}
.bo-card:hover .bo-card__reveal-in,.bo-card:focus-within .bo-card__reveal-in,.bo-card:focus .bo-card__reveal-in{overflow:visible}
.bo-card .link-btn{align-self:flex-start;margin-top:2px}
.bo-card:hover,.bo-card:focus-within,.bo-card:focus{box-shadow:var(--shadow-card-hover)}
.bo-card:hover .bo-card__body,.bo-card:focus-within .bo-card__body,.bo-card:focus .bo-card__body{background:var(--white);transition:background-color .6s var(--ease-card-open)}
/* Figma hover card shows the photo at 105% — the gentle image scale */
.bo-card:hover .bo-card__media img,.bo-card:focus-within .bo-card__media img,.bo-card:focus .bo-card__media img{transform:scale(1.05);transition:transform .9s var(--ease-card-open)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  .bo-card{transition:transform .8s var(--ease-card-close),box-shadow .8s var(--ease-card-close)}
  .bo-card:hover,.bo-card:focus-within{transform:translateY(-6px);transition:transform .9s var(--ease-card-open),box-shadow .9s var(--ease-card-open)}
}
/* Tag 468:4334 — "MOST POPULAR": cream, radius 4, 4/8 padding, 32 from the left, 28 from the top */
.bo-card__tag{position:absolute;left:32px;top:28px;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  padding:var(--space-1) var(--space-2);border-radius:4px;background:var(--cream);color:var(--charcoal);white-space:nowrap}
@media (prefers-reduced-motion: reduce){
  .bo-card__media img,.bo-card:hover .bo-card__media img{transform:none;transition:none}
}

/* ---- Derived responsive (no inner-page mobile frames in 24-08; follows the
   homepage's mobile conventions: 24px gutters, 36px H1, stacked cards) ---- */
@media (max-width:1200px){
  .bo-card--large:first-child{flex:1 1 330px}
}
@media (max-width:1023px){
  .bo__inner{gap:64px;padding:64px var(--global-padding)}
  .bo__head{padding:0}
  .bo-card--large{height:auto}
  .bo-card--large .bo-card__media{flex:none;height:356px}
  .bo__cards{padding-bottom:0}
}
@media (max-width:768px){
  .bo__inner{gap:48px;padding:64px 24px}
  .bo__title{font-size:36px}
  .bo__intro{font-size:16px}
  .bo__cards{gap:24px}
  .bo-card,.bo-card--large:first-child{flex:1 1 100%;min-width:0}
  .bo-card__media,.bo-card--large .bo-card__media{height:240px}
  .bo-card__body{padding:24px}
  .bo-card__title{font-size:22px}
  /* Touch: no hover — the description and link are always shown */
  .bo-card .bo-card__reveal{grid-template-rows:1fr;opacity:1;margin-top:10px}
  .bo-card .bo-card__reveal-in{overflow:visible}
  .bo-card__body{background:var(--white)}
  .bo-card__tag{left:24px;top:20px}
}

/* home.js's global scroll-reveal tags every h2/p/.link-btn with .reveal and
   fades it in on intersection. Inside a collapsed card panel those elements
   have no height, so they may never be observed as visible — keep the card's
   own copy opaque and let the card hover own its reveal. */
.sh-inner .bo-card .reveal{opacity:1;transition-delay:0s}

/* Saved badge: inner.js hides the count at zero; the component's own
   display:inline-flex would otherwise beat the [hidden] attribute. */
.sh-inner .nav__save-count[hidden]{display:none}

/* ============================================================
   GALLERY — Figma gallery-desktop 355:1744 / award-winning-desktop 883:14610
   Text Block 355:2430 (866 wide, centred; eyebrow + H1 + intro), then
   filters (192 at x48) + masonry grid (4 × 272, 16px gaps) ending at x1392.
   Award page: no filters, 3 × ~437 columns.
   ============================================================ */
.gal{position:relative;background:var(--cream)}
/* Text Block: nav(119.76) + 96 → eyebrow 22 → 4 → H1 → 24 → intro; grid top at y466 */
.gal__head{max-width:866px;margin:0 auto;padding:96px 48px 76px;text-align:center;display:flex;flex-direction:column;align-items:center}
.gal__eyebrow{margin:0 0 4px;color:var(--charcoal);min-height:22px;display:flex;align-items:center}
.gal__title{margin:0;color:var(--charcoal)}
.gal__intro{margin-top:24px;color:var(--charcoal)}
.gal__intro p{margin:0}
.gal__body{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--global-padding) var(--section-spacing);display:flex;gap:16px;align-items:flex-start}
.gal__filters-toggle{display:none}

/* ---- Filters 355:2889 ---- */
.gal__filters{flex:0 0 192px;width:192px;display:flex;flex-direction:column;gap:10px}
.gal__group{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.gal__group-label{color:var(--charcoal);padding:0;margin:0}
.gal__options{display:flex;flex-direction:column;gap:10px;padding-bottom:12px}
.gal__opt{display:flex;align-items:center;gap:8px;cursor:pointer;position:relative}
.gal__opt input{position:absolute;opacity:0;width:0;height:0}
/* square-rounded-filled (off) / square-rounded-check-filled (on): the Figma glyphs */
.gal__check{flex:0 0 24px;width:24px;height:24px;background:url("inner/check-off.svg") center/24px no-repeat;transition:transform .25s var(--ease-soft)}
.gal__opt input:checked~.gal__check{background-image:url("inner/check-on.svg")}
.gal__opt input:focus-visible~.gal__check{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
.gal__opt-text{color:var(--mid-grey);white-space:nowrap;transition:color .2s var(--ease-soft)}
.gal__opt input:checked~.gal__opt-text{color:var(--charcoal)}
.gal__opt:hover .gal__check{transform:scale(1.06)}
.gal__more{align-self:flex-start;background:none;border:0;padding:0 0 12px;margin-top:-6px;color:var(--slate-green);cursor:pointer}
.gal__more:hover{color:var(--charcoal)}
/* Form Input 1348:39879 */
.gal__group--keyword{width:186px}
.gal__keyword{width:100%;border:0;border-radius:4px;background:var(--white);padding:8px 12px;font:400 14px/1.5 var(--sans);color:var(--charcoal);box-shadow:0 1px 2px rgba(0,0,0,.15);outline:none}
.gal__keyword::placeholder{color:var(--mid-grey)}
.gal__keyword:focus-visible{box-shadow:0 1px 2px rgba(0,0,0,.15),0 0 0 2px var(--amber)}
.gal__reset{display:inline-flex;align-items:center;gap:8px;padding:8px 0;margin-top:10px;background:none;border:0;cursor:pointer;
  font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--charcoal);align-self:flex-start}
.gal__reset img{width:16px;height:16px;transition:transform .5s var(--ease-fluid)}
.gal__reset:hover img{transform:rotate(180deg)}

/* ---- Grid ---- */
.gal__grid-wrap{flex:1 1 auto;min-width:0;position:relative}
.gal__grid{display:flex;gap:16px;align-items:flex-start}
.gal__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
.gal__empty{margin:48px 0;color:var(--mid-grey)}
.gal__empty .link-btn{margin-left:12px}
/* toggle-bar 712:6305 — sits in the 76px gap above the grid, right-aligned */
.gal__toggle{position:absolute;right:0;top:-48px;display:flex;align-items:center;gap:10px;padding-bottom:8px}
.gal__toggle-label{color:var(--charcoal);cursor:pointer}
.gal__switch-input{position:absolute;opacity:0;width:0;height:0}
.gal__switch{position:relative;display:block;width:44px;height:24px;border-radius:12px;background:#d9d3c3;cursor:pointer;transition:background-color .3s var(--ease-soft)}
.gal__switch-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--white);transition:transform .3s var(--ease-fluid)}
.gal__switch-input:checked~.gal__switch{background:var(--sage)}
.gal__switch-input:checked~.gal__switch .gal__switch-thumb{transform:translateX(20px)}
.gal__switch-input:focus-visible~.gal__switch{outline:2px solid var(--amber);outline-offset:2px}

/* ---- Tile (Gallery Card) ---- */
.gt{position:relative;width:100%;aspect-ratio:var(--gt-aspect,272 / 272);border-radius:16px;overflow:hidden;
  background:var(--white);box-shadow:0 1px 2px rgba(0,0,0,.15);cursor:pointer;outline:none;
  transition:box-shadow .6s var(--ease-card-close),opacity .4s var(--ease-fade),transform .4s var(--ease-fade)}
.gt.is-hidden{display:none}
.gt:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.gt__media{position:absolute;inset:0}
.gt__media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform .9s var(--ease-card-close)}
/* Client comment: "a nice subtle animation (scale the background image) on hover" */
.gt:hover .gt__media img,.gt:focus-visible .gt__media img{transform:scale(1.05);transition:transform 1.1s var(--ease-card-open)}
.gt:hover,.gt:focus-visible{box-shadow:var(--shadow-card-hover)}
/* Drawing tiles 355:2657: white tile, drawing contained inside 15px padding, tag top-left */
.gt--drawing .gt__media{inset:15px}
.gt--drawing .gt__media img{object-fit:contain}
.gt--drawing:hover .gt__media img{transform:scale(1.03)}
.gt__corner-tag{position:absolute;left:15px;top:15px;padding:4px 8px;border-radius:4px;background:var(--cream);color:var(--charcoal);z-index:2}
/* InfoOverlay 357:1509: 264px gradient to 50% black, 16/20 padding, 8 gap — revealed on hover */
.gt__info{position:absolute;left:0;right:0;bottom:0;height:264px;max-height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:8px;
  padding:16px 20px;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 79.737%);
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease-fade),transform .6s var(--ease-fade);pointer-events:none}
.gt:hover .gt__info,.gt:focus-visible .gt__info,.gt.is-touch .gt__info{opacity:1;transform:none;pointer-events:auto}
.gt__tag{display:inline-flex;align-items:center;padding:4px 8px;border-radius:4px;background:var(--cream);color:var(--charcoal);white-space:nowrap}
.gt__text{display:flex;flex-direction:column;gap:4px;width:100%}
.gt__title{margin:0;font:500 16px/1.15 var(--sans);color:var(--white)}
.gt__sub{margin:0;font:500 12px/1.5 var(--sans);color:var(--white)}
.gt__more{margin-top:0;color:var(--off-white)}
/* BottomBar 355:2612: 32px glass circle, maximize glyph 20 — bottom 15 / right 16 */
.gt__max{position:absolute;right:16px;bottom:15px;width:32px;height:32px;border-radius:16px;background:rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .5s var(--ease-fade)}
.gt:hover .gt__max,.gt:focus-visible .gt__max,.gt.is-touch .gt__max{opacity:1}
.gt__max img{width:20px;height:20px}
/* Save button 362:3463 → glass circle (8px padding, 16px heart, blur 7) at rest;
   on tile hover / when saved it becomes the Sentinel pill: sage "SAVE" or
   slate-green "SAVED" with the filled heart (362:3435 / 362:3437). */
.gt__save{position:absolute;right:16px;top:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(50.67deg,rgba(24,24,24,.1) 0%,rgba(255,255,255,.1) 103.35%),rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);color:#f7f3ea;
  transition:background-color .35s var(--ease-soft),padding .35s var(--ease-soft),transform .3s var(--ease-spring)}
.gt__save-icon{width:16px;height:16px;background:url("inner/heart.svg") center/16px no-repeat;display:block}
.gt__save.is-saved .gt__save-icon{background-image:url("inner/heart-filled.svg")}
.gt__save-label{display:none;color:#f7f3ea;white-space:nowrap}
.gt:hover .gt__save,.gt:focus-visible .gt__save,.gt__save:focus-visible,.gt__save--pill{padding:8px 12px;background:var(--sage)}
.gt:hover .gt__save-label,.gt:focus-visible .gt__save-label,.gt__save:focus-visible .gt__save-label,.gt__save--pill .gt__save-label{display:block}
.gt__save.is-saved{background:var(--slate-green)}
.gt:hover .gt__save.is-saved,.gt__save--pill.is-saved{background:var(--slate-green)}
/* Touch (no hover): tiles rest in the glass-heart state; a saved tile shows the
   filled heart on slate; the overlay + maximize stay visible on info tiles. */
.gt.is-touch .gt__save{padding:8px}
.gt.is-touch .gt__save-label{display:none}
.gt__save:hover{transform:scale(1.04)}
.gt__save.just-saved .gt__save-icon{animation:gt-pop .5s var(--ease-spring)}
@keyframes gt-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.gt--drawing .gt__save{opacity:0;transition:opacity .35s var(--ease-fade)}
.gt--drawing:hover .gt__save,.gt--drawing .gt__save.is-saved{opacity:1}
.gt--drawing .gt__save{background:var(--sage)}

/* ---- Lightbox (gallery-viewer 358:2601): charcoal room, 96 padding, card
   1119 × 710 max, radius 16, 0 12 24 shadow; close glyph outside top-right ---- */
.glb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:96px}
.glb[hidden]{display:none}
.glb__scrim{position:absolute;inset:0;background:rgba(66,64,64,.96)}
.glb__card{position:relative;margin:0;width:min(1119px,100%);max-height:100%;aspect-ratio:1119 / 710;border-radius:16px;overflow:hidden;
  box-shadow:0 12px 24px rgba(0,0,0,.2);background:#2f2e2e;
  animation:glb-in .45s var(--ease-fade)}
@keyframes glb-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.glb__img{width:100%;height:100%;object-fit:cover;display:block}
.glb__info{position:absolute;left:0;right:0;bottom:0;height:264px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:8px;padding:16px 20px;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 79.737%)}
.glb__info:empty,.glb__info.is-empty{display:none}
.glb .gt__save--pill{position:absolute;right:16px;top:16px}
.glb__close{position:absolute;top:calc(50% - 355px - 21px);right:calc(50% - 559.5px - 21px);width:20px;height:20px;padding:0;border:0;background:none;color:var(--off-white);cursor:pointer;z-index:2}
.glb__close svg{width:20px;height:20px;display:block}
.glb__close:hover{transform:scale(1.1)}
.glb__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;z-index:2;
  background:rgba(255,255,255,.14);color:var(--off-white);display:flex;align-items:center;justify-content:center;transition:background-color .3s var(--ease-soft)}
.glb__nav:hover{background:rgba(255,255,255,.26)}
.glb__nav svg{width:24px;height:24px}
.glb__nav--prev{left:calc(50% - 559.5px - 68px)}
.glb__nav--next{right:calc(50% - 559.5px - 68px)}
.glb__nav[hidden]{display:none}
body.glb-open{overflow:hidden}
@media (max-width:1311px){ /* card narrower than 1119: anchor chrome to the card edges */
  .glb{padding:72px 24px}
  .glb__close{top:24px;right:24px}
  .glb__nav--prev{left:8px}.glb__nav--next{right:8px}
}

/* ---- Derived responsive ---- */
@media (max-width:1200px){
  .gal__filters{flex-basis:168px;width:168px}
  .gal__group--keyword{width:100%}
}
@media (max-width:1023px){
  .gal__head{padding:64px 24px 56px}
  .gal__body{flex-direction:column;gap:24px}
  .gal__filters-toggle{display:inline-flex;align-self:flex-start;background:var(--white);border-color:var(--white);color:var(--charcoal);box-shadow:var(--shadow-sm)}
  .gal__filters{display:none;width:100%;flex-basis:auto;flex-direction:row;flex-wrap:wrap;gap:24px 40px;padding:24px;background:var(--white);border-radius:16px}
  .gal__filters.is-open{display:flex}
  .gal__grid-wrap{width:100%}
  .gal__toggle{position:static;justify-content:flex-end;margin-bottom:16px}
  .gt__info{height:auto;max-height:70%}
}
@media (max-width:768px){
  .gal__head{padding:48px 24px 40px}
  .gal__title{font-size:36px}
  .gal__intro{font-size:16px}
  .gal__body{padding:0 24px 64px}
  .gal__grid,.gal__col{gap:12px}
  .gal__filters{gap:16px 24px;padding:20px}
  .gt{border-radius:12px}
  .gt__info{padding:12px 14px}
  .gt__save{right:10px;top:10px}
  .gt__max{right:10px;bottom:10px}
  .glb{padding:56px 12px}
  .glb__card{aspect-ratio:auto;height:auto;max-height:calc(100% - 0px)}
  .glb__img{height:auto;max-height:70vh}
  .glb__info{height:auto}
}

/* ============================================================
   GALLERY DETAIL — Figma gallery-detail 1128:36562
   Hero 1440×869 (photo, gradient to 60% black from 40%), then the charcoal
   column-layout: left stack 520 (48 in), right column 808 (584 in), 96 top
   padding, 16 vertical rhythm; decorative Playfair Italic title 101/100 in
   #FFCF56 straddling the join (71px above it).
   ============================================================ */
.gd{background:var(--charcoal);color:var(--white)}
.gd__hero{position:relative;height:869px;overflow:hidden}
.gd__hero-bg{position:absolute;inset:0}
.gd__hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block}
.gd__hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 40.335%,rgba(0,0,0,.6) 100%)}
.gd__body{position:relative;background:var(--charcoal)}
.gd__deco{position:absolute;left:var(--global-padding);top:-71px;margin:0;z-index:2;
  font:italic 400 101px/100px var(--serif);color:#ffcf56;white-space:nowrap;letter-spacing:0;
  max-width:calc(100% - 2 * var(--global-padding))}
/* Long titles: wrap rather than clip (Figma's is two words) */
.gd__deco{white-space:normal;line-height:.95}
.gd__inner{max-width:var(--maxw);margin:0 auto;padding:96px var(--global-padding) 96px;display:flex;gap:16px;align-items:flex-start}
/* ---- Left stack 1128:37075: 520 incl. 32 right padding, 16 gap ---- */
.gd__stack{flex:0 0 520px;width:520px;padding-right:32px;display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--sh-nav-h) + 24px)}
.gd__intro{display:flex;flex-direction:column;gap:24px;padding-bottom:11px}
.gd__region{margin:0 0 4px;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--white)}
.gd__headline{margin:0;color:var(--white)}
.gd__rule{display:block;width:251px;height:2px;background:var(--amber)}
.gd__awards{display:flex;flex-direction:column;gap:16px}
.gd__awards-line{display:block;color:var(--white);min-height:14px;position:relative;overflow:hidden}
/* Awards rotate with the homepage's vertical push (home.css .rec-desc.is-multi);
   here the line is left-aligned, not right-aligned as in the hero. */
.gd__awards-line.rec-desc.is-multi{min-height:14px;width:100%}
.gd__awards-line.rec-desc.is-multi .rec-award{left:0;right:auto}
.gd__desc{color:var(--white)}
.gd__desc p{margin:0}
.gd__desc.is-clamped .gd__desc-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.gd__desc-more{background:none;border:0;padding:0;font:inherit;color:var(--white);text-decoration:underline;text-underline-position:from-font;cursor:pointer}
.gd__desc-more:hover{color:var(--cream)}
/* "Inspired?" 1128:37638: 287 wide, 12 gap, 20 bottom padding */
.gd__inspired{width:287px;display:flex;flex-direction:column;gap:12px;padding-bottom:20px;color:var(--white)}
.gd__inspired-title{margin:0;color:var(--white)}
.gd__inspired p{margin:0}
.gd__inspired .btn{align-self:flex-start}
/* "Open to view" 1128:37120: terracotta, 396 wide, 24 padding, radius 4 */
.gd__open{width:396px;max-width:100%;background:var(--terracotta);border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:12px;color:var(--white)}
.gd__open-label{margin:0 0 4px;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase}
.gd__open-title{margin:0;color:var(--white)}
.gd__open p{margin:0}
/* ---- Right column 1128:36909: 808 wide ---- */
.gd__col{flex:1 1 auto;min-width:0;max-width:808px;display:flex;flex-direction:column;gap:16px}
.gd__actions{display:flex;justify-content:flex-end;gap:12px;min-height:40px}
.gd__save-icon{width:16px;height:16px;background:url("inner/heart-charcoal.svg") center/16px no-repeat;display:inline-block}
.gd__save.is-saved .gd__save-icon{background-image:url("inner/heart-filled.svg");filter:brightness(0) invert(.26)}
.gd__save.is-saved{background-color:var(--warm-sand)}
.btn--sand{background-color:var(--warm-sand);--sweep:var(--cream);color:var(--charcoal);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.btn--sand:hover,.btn--sand:focus-visible{box-shadow:var(--lift-shadow-dark)}
.btn--sand img,.gd__video .btn img{width:16px;height:16px;display:block}
/* Video Testimonial - Large 1128:37181: 808 × 458, radius 16, 30% wash */
.gd__video{position:relative;height:458px;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#2f2e2e}
.gd__video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gd__video-overlay{position:absolute;inset:0;background:rgba(0,0,0,.3)}
.gd__video-text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:15px;padding:0 24px;text-align:center;max-width:619px}
.gd__video-label{margin:0 0 4px;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--off-white)}
.gd__video-title{margin:0;font:400 36px/1.17 var(--serif);color:var(--white)}
.gd__video-label+.gd__video-title{margin-top:-11px}
.gd__video.is-playing .gd__video-poster,.gd__video.is-playing .gd__video-overlay,.gd__video.is-playing .gd__video-text{display:none}
.gd__video-player{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
/* Photo column: every photo is a Gallery Card (808 wide, own ratio, 16 gap) */
.gd__photos{display:flex;flex-direction:column;gap:16px}
.gd__photo{margin:0}
.gd__photo.gt{background:#2f2e2e}
.gd__photo .gt__save{opacity:0;transition:opacity .35s var(--ease-fade),background-color .35s var(--ease-soft),padding .35s var(--ease-soft)}
.gd__photo:hover .gt__save,.gd__photo:focus-visible .gt__save,.gd__photo .gt__save.is-saved,.gd__photo .gt__save:focus-visible{opacity:1}
.gd-none{padding:160px 48px;text-align:center;color:var(--charcoal)}

/* ---- Derived responsive ---- */
@media (max-width:1200px){
  .gd__stack{flex-basis:420px;width:420px}
  .gd__deco{font-size:80px;line-height:80px;top:-56px}
}
@media (max-width:1023px){
  .gd__hero{height:62vw;min-height:360px}
  .gd__inner{flex-direction:column;gap:40px;padding:72px 24px 64px}
  .gd__stack{position:static;width:100%;flex-basis:auto;padding-right:0}
  .gd__col{max-width:none;width:100%}
  .gd__deco{position:static;font-size:56px;line-height:1;padding:28px 24px 0;max-width:none;white-space:normal;overflow:visible}
  .gd__video{height:56vw;min-height:280px}
}
@media (max-width:768px){
  .gd__headline{font-size:36px}
  .gd__deco{font-size:44px;padding:24px 24px 0}
  .gd__inner{padding:40px 24px 56px}
  .gd__inspired,.gd__open{width:100%}
  .gd__actions{justify-content:flex-start}
  .gd__photos{gap:12px}
  .gd__photo .gt__save{opacity:1}
}

/* ============================================================
   DISPLAY HOMES LIST — Figma display-homes_desktop 743:10645
   text-content 709 tall: pt 50, 48 side padding, 71 gap; left Text Block
   408 (py 96, gap 15); right photo 865×466 + 14px caption. Cards: 3 per
   row (426.67 × 448, gap 32) — the Build Options card, with a label row.
   ============================================================ */
.dh{background:var(--cream)}
.dh__intro{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:71px;padding:50px var(--global-padding) 0}
.dh__text{flex:0 0 408px;width:408px;display:flex;flex-direction:column;align-items:flex-start;gap:15px;padding:96px 0}
.dh__eyebrow{margin:0 0 -11px;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--charcoal)}
.dh__title{margin:0;color:var(--charcoal)}
.dh__copy{color:var(--charcoal)}
.dh__copy p{margin:0 0 10px;font-size:16px;line-height:1.5}
.dh__copy p:last-child{margin:0;font-size:14px}
.dh__hero{flex:1 1 auto;min-width:0;margin:0;display:flex;flex-direction:column;gap:4px}
.dh__hero-link{display:block;aspect-ratio:865 / 466;border-radius:16px;overflow:hidden}
.dh__hero-link img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease-card-open)}
.dh__hero-link:hover img{transform:scale(1.03)}
.dh__caption{font:400 14px/1.5 var(--sans);color:var(--charcoal)}
.dh__grid{max-width:var(--maxw);margin:0 auto;padding:96px var(--global-padding) 96px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.dh-card{position:relative;display:flex;flex-direction:column;height:448px;background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15);
  transition:transform .8s var(--ease-card-close),box-shadow .8s var(--ease-card-close)}
.dh-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-6px);transition:transform .9s var(--ease-card-open),box-shadow .9s var(--ease-card-open)}
.dh-card__media{display:block;flex:1 1 auto;min-height:0;overflow:hidden}
.dh-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease-card-open)}
.dh-card:hover .dh-card__media img{transform:scale(1.05)}
.dh-card__body{flex:none;padding:32px;display:flex;flex-direction:column;gap:10px;background:var(--white)}
.dh-card__title{margin:0;color:var(--charcoal)}
.dh-card__kind{margin:0;color:var(--charcoal)}
.dh-card__hours{margin:0;color:var(--mid-grey)}
.dh-card__tag{position:absolute;left:32px;top:28px;padding:4px 8px;border-radius:4px;background:var(--amber);color:var(--charcoal)}
@media (max-width:1023px){
  .dh__intro{flex-direction:column;gap:32px;padding:32px 24px 0}
  .dh__text{width:100%;flex-basis:auto;padding:32px 0 0}
  .dh__hero{width:100%}
  .dh__grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:64px 24px}
}
@media (max-width:768px){
  .dh__grid{grid-template-columns:1fr;gap:24px;padding:48px 24px 64px}
  .dh-card{height:auto}
  .dh-card__media{aspect-ratio:4 / 3}
  .dh-card__body{padding:24px}
  .dh-card__tag{left:24px;top:20px}
}

/* ============================================================
   DISPLAY HOME DETAIL — Figma display-homes-detail_desktop 743:10782
   ============================================================ */
.dd{background:var(--cream);color:var(--charcoal)}
/* Hero 743:11237: 869 tall, photo + gradient (40%→60% black), content bottom-aligned, 48 padding */
.dd__hero{position:relative;height:869px;overflow:hidden;display:flex;align-items:flex-end}
.dd__slides{position:absolute;inset:0}
.dd__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:0;transition:opacity 1.2s var(--ease-fade)}
.dd__slide.is-current{opacity:1}
.dd__hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 40.335%,rgba(0,0,0,.6) 100%)}
.dd__hero-row{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:48px var(--global-padding);display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.dd__hero-stack{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.dd__tag{display:inline-flex;padding:4px 8px;border-radius:4px;background:var(--off-white);color:var(--charcoal);margin-bottom:-9px;position:relative;z-index:1}
.dd__deco{margin:0;font:italic 400 101px/100px var(--serif);color:#ffcf56;letter-spacing:0}
.dd__line{margin:0;color:var(--white)}
/* "N more photos" tile 743:11469: 154 × 138, cream 2px border, radius 4, photo + 30% wash */
.dd__more{position:relative;flex:0 0 154px;width:154px;height:138px;border:2px solid var(--cream);border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding-bottom:10px;text-decoration:none}
.dd__more img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dd__more::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3)}
.dd__more span{position:relative;z-index:1;color:var(--white);text-align:center;text-shadow:0 4px 34px #000;width:133px}
/* Info cards 767:8468: cream, 96/48 padding, 32 gap; text block 457; sage card; map card (Build Options card) */
.dd__info{max-width:var(--maxw);margin:0 auto;padding:96px var(--global-padding);display:flex;align-items:stretch;gap:32px}
.dd__why{flex:0 0 457px;width:457px;display:flex;flex-direction:column;align-items:flex-start;gap:24px;align-self:center}
.dd__eyebrow{margin:0 0 -20px;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--charcoal)}
.dd__eyebrow--light{color:var(--white)}
.dd__why-title{margin:0;color:var(--charcoal)}
.dd__why-text{max-width:365px}
.dd__why-text p{margin:0 0 13px}
.dd__why-text p:last-child{margin:0}
.dd__open{flex:1 1 0;min-width:0;background:var(--sage);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.15);padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;color:var(--off-white);min-height:447px}
.dd__open-icon{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:999px;background:var(--cream)}
.dd__open-icon img{width:24px;height:24px;display:block}
.dd__open-title{margin:0;font:400 35px/1.27 var(--serif);color:var(--off-white)}
.dd__open p{margin:0;max-width:320px;color:var(--off-white)}
.dd__map{flex:1 1 0;min-width:330px;height:auto;min-height:447px}
.dd__map .bo-card__media{flex:1 1 auto;height:auto;min-height:0}
.dd__map .bo-card__body{gap:10px;padding-bottom:32px}
/* Full-width video 743:11252: 893 tall */
.vid{position:relative;height:893px;display:flex;align-items:center;justify-content:center;background:#2f2e2e;overflow:hidden}
.vid .gd__video-text{max-width:619px}
.vid.is-playing .gd__video-poster,.vid.is-playing .gd__video-overlay,.vid.is-playing .gd__video-text{display:none}
/* Floor plan 772:8656: off-white, 96 top / 48 bottom, drawing 1065×652 centred, caption row */
.dd__plan{background:var(--off-white);padding:96px var(--global-padding) 48px;display:flex;flex-direction:column;align-items:center;gap:70px}
.dd__plan-drawing{width:1065px;max-width:100%;height:652px;display:flex;align-items:center;justify-content:center}
.dd__plan-drawing img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.dd__plan-caption{width:100%;max-width:1344px;display:flex;justify-content:space-between;align-items:center}
.dd__plan-name{font:500 18px/1.3 var(--sans);color:var(--charcoal)}
.dd__plan-copy{font:400 14px/1.5 var(--sans);color:var(--mid-grey)}
/* Photo gallery 1026:34864: charcoal, text block (eyebrow, H1, amber rule) then 3-col masonry */
.dd__gallery{background:var(--charcoal);padding:96px var(--global-padding) 96px}
.dd__gallery-head{max-width:1344px;margin:0 auto 16px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;padding:0 64px}
.dd__gallery-head h2{margin:0;color:var(--white)}
.dd__gallery-grid{max-width:1344px;margin:0 auto}
/* Book a tour 772:8657 (site check section): off-white, text block 560, form 429 + team 381, 32 gap */
.book{background:var(--off-white);padding:96px var(--global-padding)}
.book__inner{max-width:842px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:32px}
.book__head{width:560px;max-width:100%;padding:0 64px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.book__eyebrow{margin:0 0 -20px;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--charcoal)}
.book__title{margin:0;color:var(--charcoal)}
.book__intro{margin:0;color:var(--charcoal)}
.book__row{width:100%;display:flex;gap:32px;align-items:flex-start}
.book__form{flex:1 1 0;min-width:0;background:var(--cream);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px;position:relative}
.book__frow{display:flex;gap:16px;width:100%}
.book__field{flex:1 1 0;min-width:0;display:block}
.book__field input,.book__field textarea{width:100%;border:0;border-radius:4px;background:var(--white);padding:8px 12px;font:400 14px/1.5 var(--sans);color:var(--charcoal);box-shadow:0 1px 2px rgba(0,0,0,.15);outline:none;resize:vertical}
.book__field textarea{min-height:101px}
.book__field input::placeholder,.book__field textarea::placeholder{color:var(--mid-grey)}
.book__field input:focus-visible,.book__field textarea:focus-visible{box-shadow:0 1px 2px rgba(0,0,0,.15),0 0 0 2px var(--amber)}
.book__consent{display:flex;align-items:center;gap:4px;cursor:pointer;position:relative;font:400 14px/1.5 var(--sans);color:var(--charcoal)}
.book__consent input{position:absolute;opacity:0;width:0;height:0}
.book__check{flex:0 0 20px;width:20px;height:20px;background:url("inner/check-off.svg") center/20px no-repeat}
.book__consent input:checked~.book__check{background-image:url("inner/check-on-small.svg")}
.book__consent input:focus-visible~.book__check{outline:2px solid var(--amber);outline-offset:2px;border-radius:5px}
.btn--sage{background-color:var(--sage);--sweep:var(--slate-green);color:#f7f3ea;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.btn--sage:hover,.btn--sage:focus-visible{box-shadow:var(--lift-shadow-dark)}
.book__submit{width:100%}
.book__submit img{width:16px;height:16px;display:block}
.book__note{margin:0;text-align:center;font:500 12px/1.5 var(--sans);color:var(--mid-grey)}
.book__notice{margin:0;padding:12px 16px;border-radius:4px;font:500 14px/1.5 var(--sans)}
.book__notice--ok{background:var(--sage);color:var(--off-white)}
.book__notice--err{background:var(--terracotta);color:var(--off-white)}
.book__team{flex:0 0 381px;width:381px;display:flex;flex-direction:column;gap:16px}
/* Person Card 1388:12956: 132 photo + white body p16, 4px radius, small shadow */
.person{display:flex;align-items:stretch;border-radius:4px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.15);background:var(--white);min-height:116px}
.person__photo{flex:0 0 132px;width:132px;background:var(--warm-sand)}
.person__photo img{width:100%;height:100%;object-fit:cover;display:block}
.person__body{flex:1 1 0;min-width:0;padding:16px;display:flex;flex-direction:column;gap:4px}
.person__name{margin:0;font:500 18px/1.3 var(--sans);color:var(--charcoal)}
.person__role{margin:0;font:400 14px/1.5 var(--sans);color:var(--mid-grey)}
.person__links{display:flex;gap:12px;flex-wrap:wrap}
.person__links .link-btn img{width:16px;height:16px}
@media (max-width:1200px){
  .dd__why{flex-basis:360px;width:360px}
  .dd__deco{font-size:80px;line-height:80px}
}
@media (max-width:1023px){
  .dd__hero{height:70vw;min-height:420px}
  .dd__hero-row{padding:32px 24px;flex-direction:column;align-items:flex-start;gap:20px}
  .dd__deco{font-size:56px;line-height:1;white-space:normal}
  .dd__line{font-size:20px}
  .dd__info{flex-direction:column;padding:64px 24px;gap:24px}
  .dd__why{width:100%;flex-basis:auto}
  .dd__open{min-height:0;padding:32px 24px}
  .dd__map{min-height:0}
  .dd__map .bo-card__media{aspect-ratio:16 / 10;flex:none}
  .vid{height:56vw;min-height:320px}
  .dd__plan{padding:64px 24px 40px;gap:32px}
  .dd__plan-drawing{height:auto;aspect-ratio:1065 / 652}
  .dd__gallery{padding:64px 24px}
  .book{padding:64px 24px}
  .book__head{width:100%;padding:0}
  .book__row{flex-direction:column}
  .book__team{width:100%;flex-basis:auto}
}
@media (max-width:768px){
  .dd__deco{font-size:44px}
  .dd__more{display:none}
  .book__frow{flex-direction:column}
}

/* ============================================================
   EDITORIAL TWO-COLUMN PAGES — Figma design & build-desktop 476:4718
   section-content: 96/48 padding, rows 128 apart; left column 580, right
   column fills; photos at their Figma heights (--h), 48 stacks, 18px leads.
   ============================================================ */
.ed{background:var(--cream)}
.ed__inner{max-width:var(--maxw);margin:0 auto;padding:96px var(--global-padding);display:flex;flex-direction:column;gap:128px}
.ed__row{display:flex;gap:128px;align-items:flex-start}
.ed__col--l{flex:0 0 580px;width:580px;display:flex;flex-direction:column;gap:64px}
.ed__col--r{flex:1 1 0;min-width:0}
.ed__col--pt96{padding-top:96px}
.ed__stack{display:flex;flex-direction:column;align-items:flex-start}
.ed__stack--40{gap:40px}.ed__stack--48{gap:48px}.ed__stack--128{gap:128px}
.ed__h{margin:0;color:var(--charcoal)}
.ed__photo{margin:0;width:100%;height:var(--h,480px);overflow:hidden}
.ed__photo img{width:100%;height:100%;object-fit:cover;display:block}
.ed__body{color:var(--charcoal)}
.ed__body p{margin:0 0 10px}.ed__body p:last-child{margin:0}
.ed__body a{color:inherit;text-decoration:underline;text-underline-position:from-font}
.ed__body--468{max-width:468px}
.ed__text{display:flex;flex-direction:column;gap:20px}
.ed__text--568{max-width:568px}.ed__text--567{max-width:567px}
.ed__lead{margin:0;font:500 18px/1.3 var(--sans);color:var(--charcoal)}
@media (max-width:1200px){
  .ed__row{gap:64px}
  .ed__col--l{flex-basis:46%;width:46%}
  .ed__photo{height:auto;aspect-ratio:580 / var(--hn,480)}
}
@media (max-width:1023px){
  .ed__inner{padding:64px 24px;gap:64px}
  .ed__row{flex-direction:column;gap:48px}
  .ed__col--l{width:100%;flex-basis:auto;gap:32px}
  .ed__col--pt96{padding-top:0}
  .ed__stack--128{gap:48px}
  .ed__photo{height:auto;aspect-ratio:4 / 3}
  .ed__h{font-size:36px}
}

/* ============================================================
   KNOCKDOWN & REBUILD — Figma knockdown-rebuild-desktop 489:7016
   text-content 526:7338 (667 tall): Text Block 408 (py 96, gap 15) + the
   before/after composition (865 wide: after photo 84.85% at ml 15.03%,
   before polaroid 34.85% at mt 248 rotated 4.03°, mid-grey captions).
   ============================================================ */
.sh-inner{--tan:#d9d3c3;--light-brown:#a07d69}
.kd{background:var(--cream)}
.kd__intro{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:71px;padding:48.65px var(--global-padding)}
.kd__text{flex:0 0 408px;width:408px;display:flex;flex-direction:column;align-items:flex-start;gap:15px;padding:96px 0}
.kd__head{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}
.kd__head--c{align-items:center;text-align:center}
.kd__eyebrow{margin:0;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--charcoal)}
.kd__title{margin:0;color:var(--charcoal)}
.kd__eyebrow--light,.kd__title--light{color:var(--off-white)}
.kd__copy{color:var(--charcoal)}
.kd__copy p{margin:0 0 10px}.kd__copy p:last-child{margin:0}
.kd__compare{flex:1 1 0;min-width:0;display:grid;grid-template-columns:100%;grid-template-rows:max-content;align-items:start;justify-items:start}
.kd__compare>*{grid-area:1/1}
.kd__after{margin:0 0 0 15.03%;width:84.85%;aspect-ratio:734 / 459;overflow:hidden}
.kd__before{margin:28.67% 0 0;width:34.85%;aspect-ratio:301.44 / 321.71;overflow:hidden;transform:rotate(4.03deg) skewX(-.54deg);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.kd__after img,.kd__before img{width:100%;height:100%;object-fit:cover;display:block}
.kd__before img{object-position:50% 100%} /* Figma crops the polaroid from the top; its white foot stays whole */
.kd__cap{position:relative;z-index:1;font:600 12px/1.2 var(--sans);letter-spacing:1.44px;text-transform:uppercase;color:var(--mid-grey)}
.kd__cap--before{margin:57.46% 0 0 4.44%}
.kd__cap--after{justify-self:end;margin:54.1% 0 0}

/* Card Section 598:9011 (842 tall): warm-sand + paper texture at 20% + cream
   gradient rising from the foot; centred Text Block 821 (py 96); four Text
   Cards 312 × 340 (radius 16, p32, gap 16) in a 32-gap row (py 10); pb 96. */
.kd-cards{position:relative;isolation:isolate;overflow:hidden;padding-bottom:96px;
  background:linear-gradient(to top,var(--cream) 0%,rgba(247,243,234,0) 99.8%),var(--warm-sand)}
.kd-cards__texture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;pointer-events:none;z-index:-1}
.kd-cards__inner{position:relative;display:flex;flex-direction:column;align-items:center}
.kd-cards__text{width:821px;max-width:calc(100% - 96px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:15px;padding:96px 0}
.kd-cards__text .link-btn{align-self:center} /* home.css pins .link-btn to flex-start; this Text Block is centred */
.kd-cards__row{width:100%;max-width:var(--maxw);display:flex;justify-content:center;gap:32px;padding:10px var(--global-padding)}
.kd-card{flex:0 1 312px;width:312px;height:340px;border-radius:16px;padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;color:var(--white);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.kd-card--sage{background:var(--sage)}
.kd-card--tan{background:var(--tan);color:var(--charcoal)}
.kd-card--brown{background:var(--light-brown)}
.kd-card--slate{background:var(--slate-green)}
.kd-card__tag{display:inline-flex;padding:4px 8px;border-radius:4px;background:var(--cream);color:var(--charcoal);font:600 12px/1.2 var(--sans);letter-spacing:1.44px;text-transform:uppercase}
.kd-card__title{margin:0;width:100%;font:400 35px/1.27 var(--serif)}
.kd-card__text{margin:0;font-size:16px;line-height:1.5;max-width:320px}

/* "The Sentinel difference" 526:7486 (821 tall): charcoal, square photo on the
   right (68.35% wide, bleeding 14.5% above/below), #504c4b→transparent wash
   from the left; centred Text Block 570 (p 96) in off-white; cream pill. */
.kd-diff{position:relative;isolation:isolate;overflow:hidden;background:var(--charcoal);min-height:821px;display:flex;align-items:center}
.kd-diff__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.kd-diff__bg img{position:absolute;left:32.53%;top:-14.51%;width:68.35%;height:119.89%;object-fit:cover}
.kd-diff__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(66,64,64,0) 42.3%,#504c4b 59.1%)}
.kd-diff__inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 0 0 var(--global-padding)}
.kd-diff__text{width:570px;max-width:100%;padding:96px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:15px;color:var(--off-white)}
.kd-diff__copy{display:flex;flex-direction:column;gap:10px}
.kd-diff__lead{margin:0;font:500 18px/1.3 var(--sans)}
.kd-diff__copy .body p{margin:0}
.kd-diff .btn--primary{--sweep:var(--warm-sand)}

/* ---- Derived responsive ---- */
@media (max-width:1200px){
  .kd__intro{gap:40px}
  .kd__text{flex-basis:360px;width:360px}
  .kd-cards__row{flex-wrap:wrap}
  .kd-card{flex-basis:calc(50% - 16px);width:auto;max-width:420px}
}
@media (max-width:1023px){
  .kd__intro{flex-direction:column;align-items:stretch;gap:32px;padding:24px 24px 48px}
  .kd__text{width:100%;flex-basis:auto;padding:32px 0 0}
  .kd__compare{width:100%}
  .kd-cards{padding-bottom:64px}
  .kd-cards__text{padding:64px 0 32px;max-width:calc(100% - 48px)}
  .kd-cards__row{padding:0 24px;gap:24px}
  .kd-diff{min-height:0}
  .kd-diff__bg img{left:0;top:0;width:100%;height:100%}
  .kd-diff__bg::after{background:rgba(66,64,64,.72)}
  .kd-diff__inner{padding:0}
  .kd-diff__text{width:100%;padding:80px 24px;margin:0 auto}
  .kd__title.h1{font-size:44px}
}
@media (max-width:768px){
  .kd-card{flex-basis:100%;max-width:none;height:auto;min-height:280px;padding:28px}
  .kd-card__title{font-size:30px}
  .kd__title.h2{font-size:36px}
  .kd__title.h1{font-size:38px}
}

/* ============================================================
   PROCESS — shared scroll-driven component (section-process.php)
   Figma Process 543:7651 (1344 wide at x48, 2372 tall): Text Block 821
   (py 96) → 4 Process Steps (px 48, row gap 24, pb 96 + 48 outer; the last
   pb 96 + 37). Image frame ~394 × 386 skewed −0.54°, text block 455.
   Odd steps: image left, text left-aligned. Even: text right-aligned, image
   right. decorative-circle 1476:31301 (373, off-white) behind the step
   image; decorative-line 543:7774 (919 × 1711 dotted slate-green) from
   (227, 3070) on the page = (179, 344) inside the steps block; step-dot 10px.
   Then Celebration 543:7817 (893 tall): photo + cream gradient, off-white
   circle 433 at (501, −46), centred Text Block 821 (pt 72, pb 96), sage pill.
   ============================================================ */
.proc{background:var(--cream);position:relative}
.proc__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 var(--global-padding);display:flex;flex-direction:column;align-items:center}
.proc__head{width:821px;max-width:100%;padding:96px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.proc__eyebrow{margin:0;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--charcoal)}
.proc__title{margin:0;color:var(--charcoal)}
.proc__steps{position:relative;width:100%;display:flex;flex-direction:column}
/* Layer order as in Figma: circles (0) < dotted line (1) < step image/text (2) < travelling dot (3). */
.proc__line{position:absolute;left:179px;top:344.24px;width:919.228px;height:1711.08px;pointer-events:none;overflow:visible;z-index:1}
.proc__line--dot{z-index:3}
.proc-step{position:relative;display:flex;align-items:center;gap:24px;padding:0 48px 144px}
.proc-step__img,.proc-step__text{position:relative;z-index:2}
.proc-step--r{justify-content:flex-end}
.proc-step:last-child{padding-bottom:133px}
.proc-step__media{position:relative;flex:0 0 394px;width:394px;height:386px;display:flex;align-items:center;justify-content:center}
.proc-step--r .proc-step__media{flex-basis:399px;width:399px;height:380px}
/* The circle grows to full size behind the image as the image arrives (client). */
.proc-step__circle{position:absolute;z-index:0;top:50%;right:0;width:373px;height:373px;margin-top:-186.5px;border-radius:50%;background:var(--off-white);
  transform:scale(1);transform-origin:50% 50%;transition:transform 1.25s var(--ease-lux)}
.proc-step--r .proc-step__circle{right:auto;left:0}
.proc-step__img{width:100%;height:100%;transform:skewX(-.54deg);transition:opacity .95s var(--ease-lux) .1s,translate 1.1s var(--ease-lux) .1s}
.proc-step__img img{width:100%;height:100%;object-fit:contain;display:block}
.js .proc-step:not(.is-in) .proc-step__circle{transform:scale(0)}
.js .proc-step:not(.is-in) .proc-step__img{opacity:0;translate:0 28px}
.proc-step__text{width:455px;max-width:600px;display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.proc-step--r .proc-step__text{align-items:flex-end;text-align:right}
.proc-step--r .proc-step__text .link-btn{align-self:flex-end}
.proc-step__head{display:flex;flex-direction:column;align-items:inherit;gap:4px;width:100%}
.proc-step__label{margin:0;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--charcoal)}
.proc-step__title{margin:0;color:var(--charcoal)}
.proc-step__body{color:var(--charcoal)}
.proc-step__body p{margin:0 0 10px}.proc-step__body p:last-child{margin:0}
/* Celebration */
.proc__final{position:relative;isolation:isolate;min-height:893px;display:flex;justify-content:center;align-items:flex-start;padding:72px var(--global-padding) 0}
.proc__final-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
/* The circle rises 46px above the block (Figma 543:7817 renders 939 tall) — the block itself must not clip. */
.proc__final::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(to bottom,var(--cream) 12%,rgba(247,243,234,0) 66.7%)}
.proc__final-circle{position:absolute;left:calc(50% - 219px);top:-46px;width:433px;height:433px;border-radius:50%;background:var(--off-white);z-index:-1;
  transform:scale(1);transition:transform 1.25s var(--ease-lux)}
.js .proc__final:not(.is-in) .proc__final-circle{transform:scale(0)}
.proc__final-text{position:relative;width:821px;max-width:100%;padding:0 0 96px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:15px}
.proc__final-head{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.proc__final-body{margin:0;color:var(--charcoal)}
@media (prefers-reduced-motion: reduce){
  .js .proc-step:not(.is-in) .proc-step__circle,.js .proc__final:not(.is-in) .proc__final-circle{transform:scale(1)}
  .js .proc-step:not(.is-in) .proc-step__img{opacity:1;translate:none}
}
/* ---- Derived responsive ---- */
@media (max-width:1200px){
  .proc__line{display:none}
  .proc-step{padding:0 0 96px}
  .proc-step__media{flex-basis:340px;width:340px;height:334px}
  .proc-step--r .proc-step__media{flex-basis:340px;width:340px;height:334px}
  .proc-step__circle{width:322px;height:322px;margin-top:-161px}
  .proc-step__title.h1{font-size:48px}
}
@media (max-width:1023px){
  .proc__inner{padding:0 24px}
  .proc__head{padding:64px 0 48px}
  .proc-step,.proc-step--r{flex-direction:column;align-items:center;justify-content:flex-start;gap:24px;padding:0 0 64px}
  .proc-step__text,.proc-step--r .proc-step__text{width:100%;max-width:560px;align-items:center;text-align:center}
  .proc-step__text .link-btn,.proc-step--r .proc-step__text .link-btn{align-self:center}
  .proc-step__circle,.proc-step--r .proc-step__circle{right:auto;left:50%;margin-left:-161px}
  .proc__final{min-height:0;padding:56px 24px 0}
  .proc__final-text{padding-bottom:64px}
  .proc__final-circle{left:calc(50% - 180px);width:360px;height:360px}
  .proc__title.h1{font-size:44px}
}
@media (max-width:768px){
  .proc-step__media,.proc-step--r .proc-step__media{flex-basis:auto;width:min(300px,80vw);height:auto;aspect-ratio:1}
  .proc-step__circle,.proc-step--r .proc-step__circle{width:92%;height:92%;margin:0;top:4%;left:4%}
  .proc-step__title.h1,.proc__title.h1{font-size:38px}
}

.body-sm{font-size:14px;line-height:1.5}
.h3-serif{font-family:var(--serif);font-weight:400;font-size:35px;line-height:1.27}

/* ============================================================
   SUBDIVIDE & BUILD — Figma subdividing-desktop 604:4558
   Hero Full Bleed 862 (photo/video + slate-green washes, transparent nav,
   Text Block 699 at (−4,163) p128/64 gap 24) → Card Section (3 flexible
   cards) → Success Stories (slate-green + aerial texture ×20% multiply;
   Text Block 772; two-half cards, 24 gap; cream pill 236) → Subdivision
   Videos (cream; 587×488 cards in a 32-gap scroller; 2px rail + chevrons;
   white pill) → Proven development plans (warm-sand + texture; heading row
   275 items-end; 3-col Large Cards 403).
   ============================================================ */
/* Full-bleed hero pages: the nav rides transparent over the photo (the
   homepage's top-of-page state) and turns cream once scrolled / panel-open.
   ROUND 46: desktop only, like the block at the top of this file — on phones
   and tablets the homepage bar is solid at every scroll position, so the
   inner hero pages now get that same solid bar (home.css, untouched). */
.sh-hero .page-main{padding-top:0}
.sh-hero.admin-bar .page-main{padding-top:0} /* ROUND 52: same double-count as .sh-inner above */
@media (min-width:1024px){
.sh-hero .nav:not(.scrolled):not(.panel-open)::before{background:transparent;box-shadow:none}
.sh-hero .nav:not(.scrolled):not(.panel-open) .nav__logo img{filter:none}
.sh-hero .nav:not(.scrolled):not(.panel-open) .nav__links,
.sh-hero .nav:not(.scrolled):not(.panel-open) .nav__links a{color:var(--off-white)}
.sh-hero .nav:not(.scrolled):not(.panel-open) .nav__save{background:transparent;border-color:var(--off-white);color:var(--off-white);box-shadow:none}
.sh-hero .nav:not(.scrolled):not(.panel-open) .nav__contact{background-color:transparent;border-color:var(--white);color:var(--off-white);--sweep:rgba(255,255,255,.14)} /* R46: border white + the white hover sweep = home.css .btn--outline-light, the homepage's own top-of-page values (were off-white / the cream bar's dark sweep: differences the computed-style diff against the homepage caught) */
.sh-hero .nav:not(.scrolled):not(.panel-open) .nav__toggle{color:var(--off-white)}
}

.kd__eyebrow--white{color:var(--white)}
.sd-hero{position:relative;isolation:isolate;min-height:862px;overflow:hidden;background:var(--slate-green);display:flex;align-items:flex-start}
.sd-hero__bg{position:absolute;inset:0;z-index:-1}
.sd-hero__bg img,.sd-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Figma: slate-green 50% multiply band at the top (nav legibility) + a slate-green wash rising from bottom-left. */
.sd-hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(-79.93deg,rgba(99,116,104,0) 11.1%,#637468 81.3%),linear-gradient(to bottom,rgba(58,70,62,.5) 3.6%,rgba(58,70,62,0) 21.5%)}
.sd-hero__inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto}
.sd-hero__text{width:699px;max-width:100%;margin:163px 0 0 -4px;padding:128px 24px 128px 64px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.sd-hero__copy{color:var(--off-white)}
.sd-hero__copy p{margin:0 0 13px}.sd-hero__copy p:last-child{margin:0}
.sd-hero .link-btn--light{color:var(--white)}
.kd-cards--flex .kd-card{flex:1 1 0;width:auto}

/* ---- Success Stories 1216:38209 ---- */
.sd-stories{position:relative;isolation:isolate;overflow:hidden;background:var(--slate-green);padding:96px var(--global-padding)}
.sd-stories__texture{position:absolute;top:0;left:-15.41%;width:130.83%;height:100%;object-fit:cover;opacity:.2;mix-blend-mode:multiply;z-index:-1;pointer-events:none}
.sd-stories__inner{max-width:calc(var(--maxw) - 96px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:48px}
.sd-stories__text{width:772px;max-width:100%;padding:0 64px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.sd-stories__text .kd__eyebrow{letter-spacing:1.44px;line-height:1.2}
.sd-stories__copy{color:var(--off-white)}
.sd-stories__copy p{margin:0}
.sd-stories__text .link-btn{align-self:center;color:var(--white)}
.sd-stories__list{display:flex;flex-direction:column;gap:24px;width:100%}
.sd-story{display:flex;align-items:stretch;background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.sd-story[hidden]{display:none}
.js .sd-story.is-collapsed{opacity:0;translate:0 16px}
.js .sd-story.is-in{opacity:1;translate:none;transition:opacity .85s var(--ease-lux),translate .95s var(--ease-lux)}
.sd-story__media{position:relative;flex:1 1 0;min-width:0;min-height:420px;display:flex;align-items:flex-end}
/* Client: "3 slides for each story, they animate with a quick fade" */
.sd-story__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease-soft)}
.sd-story__slide.is-current{opacity:1}
.sd-story__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 65.6%,rgba(0,0,0,.4) 100%);pointer-events:none}
.sd-story__chips{position:relative;z-index:1;display:flex;gap:10px;padding:12px}
.sd-story__chip{border:0;cursor:pointer;padding:4px 12px;border-radius:999px;background:var(--slate-green);color:var(--white);font-family:var(--sans);transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft)}
.sd-story__chip:hover{background:var(--sage)}
.sd-story__chip.is-active{background:var(--cream);color:var(--charcoal)}
.sd-story__chip:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.sd-story__body{flex:1 1 0;min-width:0;background:var(--off-white);padding:32px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px}
.sd-story__head{display:flex;flex-direction:column;gap:8px;width:100%}
.sd-story__eyebrow,.sd-story__title{margin:0;color:var(--charcoal)}
.sd-story__text{color:var(--mid-grey)}
.sd-story__text p{margin:0 0 10px}.sd-story__text p:last-child{margin:0}
.sd-story__more{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:var(--sans)}
.sd-story__set{display:none}
.sd-stories__more{width:236px}

/* ---- Subdivision Videos 648:4830 + generic horizontal scroller ---- */
.sd-vids{background:var(--cream);padding:96px 0;display:flex;flex-direction:column;align-items:center;gap:48px}
.sd-vids__text{width:772px;max-width:calc(100% - 48px);padding:0 64px;text-align:center}
.sd-vids__text .kd__eyebrow{letter-spacing:1.44px;line-height:1.2}
.hs{width:100%;max-width:var(--maxw);display:flex;flex-direction:column;gap:48px}
.hs.is-static{gap:0}
.hs__track{display:flex;gap:32px;padding:0 var(--global-padding);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-left:var(--global-padding);-webkit-overflow-scrolling:touch}
.hs__track::-webkit-scrollbar{display:none}
.hs__bar{display:flex;align-items:center;gap:16px;padding:0 var(--global-padding);height:24px}
.hs__rail{flex:1 1 0;height:2px;background:var(--off-white);position:relative;cursor:pointer}
.hs__grab{position:absolute;left:0;top:0;height:100%;width:100px;background:var(--tan);transition:transform .25s var(--ease-soft)}
.hs__arrows{display:flex;gap:10px}
.hs__arrow{border:0;background:none;padding:0;cursor:pointer;width:24px;height:24px;display:block;color:var(--charcoal);transition:opacity .25s}
.hs__arrow img{width:24px;height:24px;display:block}
.hs__arrow:disabled{opacity:.3;cursor:default}
/* Nothing to scroll (a short row on a wide screen): no rail, no chevrons. */
.hs.is-static .hs__bar{display:none}
.sd-vid{position:relative;flex:0 0 587px;width:587px;height:488px;border-radius:16px;overflow:hidden;background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.15);scroll-snap-align:start;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sd-vid__poster,.sd-vid__loop,.sd-vid__player{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.sd-vid__loop{opacity:0;transition:opacity .4s var(--ease-soft)}
.sd-vid.is-live .sd-vid__loop{opacity:1}
.sd-vid__tag{position:absolute;left:32px;top:28px;z-index:1;padding:4px 8px;border-radius:4px;background:var(--cream);color:var(--charcoal);font:600 12px/1.2 var(--sans);letter-spacing:1.44px;text-transform:uppercase}
.sd-vid__play{position:relative;z-index:1;border:0;cursor:pointer;width:69px;height:69px;padding:0;border-radius:50%;background:var(--off-white);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:transform .45s var(--ease-spring)}
.sd-vid__play img{width:41.4px;height:41.4px;display:block}
.sd-vid:hover .sd-vid__play{transform:scale(1.06)}
.sd-vid.is-playing .sd-vid__play,.sd-vid.is-playing .sd-vid__tag,.sd-vid.is-playing .sd-vid__poster{display:none}
.sd-vid.is-playing .sd-vid__loop{opacity:1;cursor:default}
.sd-vids__cta{width:236px}

/* ---- Proven development plans 650:5052 ---- */
.sd-plans{position:relative;isolation:isolate;overflow:hidden;padding:0 var(--global-padding) 96px;
  background:linear-gradient(to top,var(--cream) 0%,rgba(247,243,234,0) 99.8%),var(--warm-sand)}
.sd-plans__inner{max-width:calc(var(--maxw) - 96px);margin:0 auto;display:flex;flex-direction:column;gap:32px}
.sd-plans__head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:128px 0 17px}
.sd-plans__head .kd__eyebrow{letter-spacing:1.44px;line-height:1.2}
.sd-plans__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.sd-plan{flex:none;min-width:0;height:403px;display:flex;flex-direction:column;color:inherit}
.sd-plan__media{flex:1 1 auto;min-height:0;overflow:hidden}
.sd-plan__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease-card-open)}
.sd-plan:hover .sd-plan__media img,.sd-plan:focus-visible .sd-plan__media img{transform:scale(1.05)}
.sd-plan__body{flex:none;background:var(--off-white);padding:32px;display:flex;flex-direction:column;gap:10px}
.sd-plan__title{margin:0;color:var(--charcoal)}
.sd-plan__text{margin:0;color:var(--mid-grey);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- Derived responsive ---- */
@media (max-width:1200px){
  .sd-hero{min-height:720px}
  .sd-hero__text{margin-top:120px;padding:96px 48px}
  .sd-vid{flex-basis:480px;width:480px;height:400px}
  .sd-plans__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .sd-hero{min-height:0}
  .sd-hero__text{width:100%;margin:104px 0 0;padding:64px 24px 72px;gap:20px}
  .sd-hero .kd__title.h1{font-size:44px}
  .sd-stories{padding:64px 24px}
  .sd-stories__text{padding:0}
  .sd-story{flex-direction:column}
  .sd-story__media{min-height:0;aspect-ratio:4 / 3;flex:none}
  .sd-story__body{padding:24px}
  .sd-vids{padding:64px 0}
  .hs__track,.hs__bar{padding:0 24px}
  .sd-vid{flex-basis:min(420px,82vw);width:min(420px,82vw);height:auto;aspect-ratio:587 / 488}
  .sd-plans{padding:0 24px 64px}
  .sd-plans__head{flex-direction:column;align-items:flex-start;padding:64px 0 8px;gap:24px}
  .sd-plans__grid{gap:24px}
  .sd-plan{height:auto}
  .sd-plan__media{aspect-ratio:4 / 3;flex:none}
}
@media (max-width:768px){
  .sd-hero .kd__title.h1{font-size:38px}
  .sd-hero__copy{font-size:18px}
  .sd-plans__grid{grid-template-columns:1fr}
  .sd-vid__tag{left:20px;top:20px}
}

/* ============================================================
   BRING YOUR OWN PLANS — Figma quote-plans-desktop 655:5472
   "upload plans" 311 tall (off-white; Text Block 746 pt128 px64 gap 24) →
   Section 669 tall (warm-sand + off-white→transparent wash; px 128;
   Text Block 697 p128/64 gap 24 with a 24px checkmark list at 1.8 line
   height; cream form 436 p24 gap 16 — the Book-a-tour form styles) → Footer.
   ============================================================ */
.qp-intro{background:var(--off-white);padding:13.5px var(--global-padding);display:flex;justify-content:center}
.qp-intro__text{width:746px;max-width:100%;padding:128px 64px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.qp-intro__copy{margin:0;color:var(--charcoal)}
.qp{background:linear-gradient(to bottom,var(--off-white) 0%,rgba(255,255,255,0) 100%),var(--warm-sand);padding:0 128px}
.qp__inner{max-width:calc(var(--maxw) - 256px);margin:0 auto;display:flex;align-items:center;min-height:669px}
.qp__text{flex:0 0 697px;width:697px;padding:128px 64px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.qp__copy{color:var(--charcoal)}
.qp__copy p{margin:0}
.qp__lead{margin:0 0 13px!important}
.qp__list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column}
.qp__list li{display:flex;align-items:center;gap:8px;line-height:1.8;min-height:28.8px}
.qp__list img{flex:none;width:24px;height:24px;display:block}
.qp__form{flex:0 0 436px;width:436px;margin:87.5px 0}
.book__field--icon{position:relative;display:flex;align-items:center;gap:4px;background:var(--white);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.15);padding:0 0 0 12px}
.book__field--icon img{flex:none;width:24px;height:24px;display:block}
.book__field--icon input{box-shadow:none;padding-left:0;background:transparent}
.book__field--icon:focus-within{box-shadow:0 1px 2px rgba(0,0,0,.15),0 0 0 2px var(--amber)}
.qp__upload{align-items:center}
.qp__file{position:relative;display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:4px;background:var(--white);box-shadow:0 1px 2px rgba(0,0,0,.15);font:400 14px/1.5 var(--sans);color:var(--mid-grey);cursor:pointer;white-space:nowrap;flex:none}
.qp__file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.qp__file img{width:24px;height:24px;display:block}
.qp__file:focus-within{box-shadow:0 1px 2px rgba(0,0,0,.15),0 0 0 2px var(--amber)}
.qp__file.has-file{color:var(--charcoal)}
.qp__hint{margin:0;font:400 14px/1.5 var(--sans);color:var(--charcoal);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1200px){
  .qp{padding:0 48px}
  .qp__inner{gap:32px}
  .qp__text{flex:1 1 0;width:auto;padding:96px 0}
}
@media (max-width:1023px){
  .qp-intro__text{padding:64px 0 0}
  .qp{padding:0 24px}
  .qp__inner{flex-direction:column;align-items:stretch;min-height:0;padding:56px 0 64px;gap:32px}
  .qp__text{padding:0}
  .qp__form{flex:none;width:100%;margin:0}
  .kd__title.h1{font-size:44px}
}

/* ============================================================
   ACCESSIBLE LIVING — Figma accessible-desktop 658:6113
   Hero Full Bleed 862 (photo + charcoal 50% multiply band + a flat 20% black
   scrim; transparent nav; cream CIRCLE 550 at (842,209) p64, gap 24) with the
   amber "beautifully built" tagline (Playfair Italic 101/100) at (48,793) →
   accessible-desktop-section 1231 (warm-sand → cream; header py96 gap15;
   card-grid 1267 px48, 2 rows × 3 cards gap 32, radius 16, py48, gap 16) →
   Clever ideas 872 (warm-sand + texture; pl48; heading row 275 items-end;
   Large Cards 396 × 403 in a 32-gap scroller with the glass heart) →
   plan-cards 3497 (FloorPlan Cards 1092 × 315: photo | drawing, cream tag,
   cream heart, "4 Bed | 2 Bath | Double Garage" and 235m² along the foot;
   Text Block and Map Tool Block break the run).
   ============================================================ */
.ac-hero{position:relative;isolation:isolate;z-index:1;min-height:862px;background:var(--slate-green)}
/* The tagline (667:5298) is a page-level element in Figma: it starts inside the
   hero and its descenders carry over the section below, so only the photo is
   clipped, never the hero box. */
.ac-hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.ac-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.ac-hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(66,64,64,.5) 3.6%,rgba(102,102,102,0) 21.5%),rgba(0,0,0,.2)}
.ac-hero__inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;min-height:862px}
/* Figma: a true circle — 550 square, radius 999, centred text. */
.ac-hero__circle{position:absolute;left:842px;top:209px;width:550px;height:550px;border-radius:999px;background:var(--cream);
  padding:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center}
.ac-hero__circle .kd__title em{font-style:italic}
.ac-hero__copy{margin:0;color:var(--charcoal)}
.ac-hero__tagline{position:absolute;left:48px;bottom:-31px;margin:0;font:italic 400 101px/100px var(--serif);color:var(--amber);pointer-events:none;white-space:nowrap}

.ac-what{background:linear-gradient(to top,var(--cream) 0%,rgba(247,243,234,0) 99.97%),var(--warm-sand);padding:0 0 96px;display:flex;flex-direction:column;align-items:center}
.ac-what__head{padding:96px var(--global-padding);display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center;width:100%}
.ac-what__head .kd__eyebrow{letter-spacing:1.6px;line-height:16px}
.ac-what__copy{margin:0;color:var(--charcoal)}
.ac-what__grid{width:1267px;max-width:100%;padding:10px var(--global-padding);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ac-card{border-radius:16px;padding:48px 32px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.ac-card--sage{background:var(--sage);color:var(--white)}
.ac-card--tan{background:var(--tan);color:var(--charcoal)}
.ac-card--brown{background:var(--light-brown);color:var(--white)}
.ac-card--slate{background:var(--slate-green);color:var(--white)}
.ac-card__icon{flex:none;width:40px;height:40px;border-radius:999px;background:var(--off-white);display:flex;align-items:center;justify-content:center}
.ac-card__icon img{width:24px;height:24px;display:block}
.ac-card__title,.ac-card__text{margin:0;color:inherit}
.ac-card__text{max-width:300px}

.ac-ideas{position:relative;isolation:isolate;overflow:hidden;padding:0 0 96px var(--global-padding);
  background:linear-gradient(to top,var(--cream) 0%,rgba(247,243,234,0) 99.78%),var(--warm-sand)}
.ac-ideas__texture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;z-index:-1;pointer-events:none}
.ac-ideas__head{display:flex;align-items:flex-end;min-height:275px;padding:128px 0 72px}
.ac-ideas__head .kd__eyebrow{letter-spacing:1.44px;line-height:1.2}
.hs--flush{max-width:none;padding-right:0}
.hs--flush .hs__track{padding:0 32px 0 0}
.hs--flush .hs__bar{padding:0 var(--global-padding) 0 0}
.hs__grab--dark{background:var(--charcoal)}
.ac-ideas__track{padding-top:16px;padding-bottom:16px}
.ac-idea{position:relative;flex:0 0 396px;width:396px;height:403px;border-radius:16px;overflow:hidden;background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.15);display:flex;flex-direction:column;scroll-snap-align:start}
.ac-idea__media{flex:1 1 auto;min-height:0;overflow:hidden}
.ac-idea__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease-card-open)}
.ac-idea:hover .ac-idea__media img{transform:scale(1.05)}
.ac-idea__body{flex:none;background:var(--off-white);padding:32px;display:flex;flex-direction:column;gap:10px}
.ac-idea__title{margin:0;color:var(--charcoal);font-family:var(--sans);font-weight:500;font-size:27px;line-height:1.27}
.ac-idea__text{margin:0;color:var(--mid-grey)}
.ac-idea .gt__save{right:18px;top:17px}

.ac-plans{background:var(--cream);padding:0 var(--global-padding) 0}
.ac-plans__inner{max-width:1092px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.ac-plans__head{padding:128px 64px 0;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.ac-plans__head .kd__eyebrow{letter-spacing:1.6px;line-height:16px}
.ac-plans__copy{margin:0;color:var(--charcoal)}
.ac-plan{position:relative;height:315px;border-radius:16px;overflow:hidden;background:var(--white);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.ac-plan__link{position:absolute;inset:0;display:flex;align-items:stretch;color:inherit;text-decoration:none}
.ac-plan__photo,.ac-plan__drawing{flex:1 1 0;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ac-plan__photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease-card-open)}
.ac-plan:hover .ac-plan__photo img{transform:scale(1.04)}
/* The drawing sits inset on white, as in Figma (65.5% of its frame). */
.ac-plan__drawing{background:var(--white);padding:16px 24px 40px}
.ac-plan__drawing img{max-width:70%;max-height:100%;object-fit:contain;display:block}
.ac-plan__tag{position:absolute;left:17px;top:19px;z-index:2;padding:4px 8px;border-radius:4px;background:var(--cream);color:var(--charcoal);white-space:nowrap}
.ac-plan__save{right:16px;top:14px;background:var(--cream);color:var(--charcoal)}
.ac-plan__save .gt__save-icon{background-image:url("inner/heart-dark.svg")}
.ac-plan__save.is-saved .gt__save-icon{background-image:url("inner/heart-filled.svg")}
.ac-plan__specs{position:absolute;right:0;bottom:22px;left:50%;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 64px 0 0;pointer-events:none}
.ac-plan__spec,.ac-plan__area{margin:0;color:var(--charcoal);white-space:nowrap}
.ac-plan__spec .sep{color:rgba(0,0,0,.3);padding:0 6px}
.ac-plan__area b{font-weight:700}
.ac-mid{padding:128px 64px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.ac-mid--map{padding-bottom:64px}
.ac-map{display:flex;align-items:stretch;padding-top:12px;width:412px;max-width:100%}
.ac-map__field{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;padding:12px 16px;background:var(--white);border:1px solid var(--warm-sand);border-radius:4px 0 0 4px}
.ac-map__field img{flex:none;width:24px;height:24px;display:block}
.ac-map__field input{flex:1 1 0;min-width:0;border:0;background:transparent;font:400 16px/1.4 var(--sans);letter-spacing:.32px;color:var(--charcoal);outline:none}
.ac-map__field input::placeholder{color:var(--mid-grey)}
.ac-map__field:focus-within{box-shadow:0 0 0 2px var(--amber)}
.ac-map__go{border-radius:0 4px 4px 0;padding-left:20px;padding-right:16px}

/* ---- Derived responsive ---- */
@media (max-width:1439px){
  .ac-hero__circle{left:auto;right:24px}
}
@media (max-width:1200px){
  .ac-hero,.ac-hero__inner{min-height:720px}
  .ac-hero__circle{width:480px;height:480px;padding:48px;top:150px}
  .ac-hero__tagline{font-size:76px;line-height:76px;bottom:-24px}
  .ac-what__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ac-idea{flex-basis:340px;width:340px}
}
@media (max-width:1023px){
  .ac-hero,.ac-hero__inner{min-height:0}
  .ac-hero__inner{padding:104px 24px 64px;display:flex;justify-content:center}
  .ac-hero__circle{position:static;width:100%;height:auto;max-width:520px;border-radius:16px;padding:40px 28px;gap:20px}
  .ac-hero__tagline{position:static;padding:0 24px 24px;font-size:56px;line-height:56px;white-space:normal}
  .ac-what{padding-bottom:64px}
  .ac-what__head{padding:64px 24px}
  .ac-what__head .kd__title.h1{font-size:40px}
  .ac-what__grid{grid-template-columns:1fr;padding:0 24px;gap:24px}
  .ac-card{padding:40px 28px}
  .ac-card__title.h2{font-size:34px}
  .ac-ideas{padding:0 0 64px 24px}
  .ac-ideas__head{min-height:0;padding:64px 0 32px}
  .hs--flush .hs__bar{padding-right:24px}
  .ac-idea{flex-basis:min(340px,80vw);width:min(340px,80vw);height:auto;min-height:360px}
  .ac-idea__media{aspect-ratio:396 / 220;flex:none}
  .ac-idea__body{padding:24px}
  .ac-plans{padding:0 24px}
  .ac-plans__head{padding:64px 0 0}
  /* Stacked card: photo, then the drawing, then the specs row in normal flow
     (the desktop card pins the specs over the drawing's foot). */
  .ac-plan{height:auto;display:flex;flex-direction:column}
  .ac-plan__link{position:static;flex-direction:column;flex:none}
  .ac-plan__photo,.ac-plan__drawing{flex:none;width:100%}
  .ac-plan__photo{aspect-ratio:16 / 9}
  .ac-plan__drawing{padding:20px 16px;min-height:200px}
  .ac-plan__drawing img{max-width:100%;max-height:260px}
  .ac-plan__specs{position:static;order:3;padding:0 20px 20px;justify-content:space-between;flex-wrap:wrap;gap:8px 16px}
  .ac-plan__tag{left:16px;top:16px}
  .ac-mid{padding:56px 0}
  .ac-mid .kd__title.h2{font-size:34px}
}
@media (max-width:768px){
  .ac-hero__circle .kd__title.h2{font-size:34px}
  .ac-hero__tagline{font-size:44px;line-height:44px}
  .ac-map{flex-direction:column;width:100%}
  .ac-map__field{border-radius:4px}
  .ac-map__go{border-radius:999px;margin-top:12px;justify-content:center}
}

/* ============================================================
   HOUSE & LAND — Figma house-and-land-desktop 483:4806 (listing)
   + H&L Detail 743:9987 (single)
   Listing: Text Block 866 (pt96 pb128, px 48/96) → grid: filters 242 at x48
   (label 12/1.44, radio rows 24px gap 10, RESET) + two columns of 519-wide
   H&L Cards, 32 gap, the sage Text Card second in column two.
   Card 489:5352: photo 333 tall with the cream price tag at (23, foot),
   white body p32 gap 12 — address label, H3 27, body, FIND OUT MORE.
   Detail: hero photo 1029×535 flush right, content card riding up 93px;
   left col 641 (lot line H3 + price H4, 207×2 tan rule, body, inclusions
   1.7, fine print, floor plan 390, video 400, map 349), right col 369
   (SAVE + DOWNLOAD BROCHURE, spec rows with warm-sand rules, person cards,
   warm-sand "Not quite right?" 270).
   ============================================================ */
.hl-intro{background:var(--off-white);display:flex;justify-content:center}
.hl-intro__text{width:866px;max-width:100%;padding:96px 96px 128px 48px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.hl-intro__copy{margin:0;color:var(--charcoal)}
.hl{background:var(--off-white);padding:0 var(--global-padding) 96px}
.hl__inner{max-width:calc(var(--maxw) - 96px);margin:0 auto;display:flex;align-items:flex-start;gap:32px}
.hl__filters{flex:0 0 242px;width:242px;position:sticky;top:120px;display:flex;flex-direction:column;gap:10px}
.hl__flabel{margin:0;color:var(--charcoal)}
.hl__radios{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.hl__radio{display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;font:400 16px/1.5 var(--sans);color:var(--mid-grey);transition:color .25s var(--ease-soft)}
.hl__radio input{position:absolute;opacity:0;width:0;height:0}
.hl__dot{flex:0 0 24px;width:24px;height:24px;background:url("inner/house-land/radio-off.svg") center/24px no-repeat}
.hl__radio input:checked~.hl__dot{background-image:url("inner/house-land/radio-on.svg")}
.hl__radio input:checked~.hl__rlabel{color:var(--charcoal)}
.hl__radio:hover{color:var(--charcoal)}
.hl__radio input:focus-visible~.hl__dot{outline:2px solid var(--amber);outline-offset:2px;border-radius:50%}
.hl__reset{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 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)}
.hl__reset img{width:16px;height:16px;transition:transform .5s var(--ease-fluid)}
.hl__reset:hover img{transform:rotate(180deg)}
.hl__grid{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-content:start}
.hl__empty{margin:48px 0 0;color:var(--mid-grey)}

.hlc{position:relative;background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:box-shadow .45s var(--ease-soft),transform .45s var(--ease-soft)}
.hlc[hidden]{display:none}
.hlc:hover,.hlc:focus-within{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.hlc__link{display:flex;flex-direction:column;height:100%;color:inherit}
.hlc__media{position:relative;height:333px;flex:none;display:flex;align-items:flex-end;padding:0 0 20px 23px;overflow:hidden}
.hlc__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease-card-open)}
.hlc:hover .hlc__media img{transform:scale(1.05)}
.hlc__price{position:relative;z-index:1;padding:4px 8px;border-radius:4px;background:var(--cream);color:var(--charcoal);font:600 14px/1.2 var(--sans);letter-spacing:1.68px;text-transform:uppercase;white-space:nowrap}
.hlc__body{flex:1 1 auto;background:var(--white);padding:32px;display:flex;flex-direction:column;gap:12px}
.hlc__address{margin:0;color:var(--charcoal)}
.hlc__title{margin:0;color:var(--charcoal)}
.hlc__text{margin:0;color:var(--mid-grey);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hlc__more{margin-top:auto;align-self:flex-start}

.hl-sage{background:var(--sage);border-radius:16px;padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;color:var(--white);box-shadow:0 1px 2px rgba(0,0,0,.15);min-height:585px}
.hl-sage__head{display:flex;flex-direction:column;gap:0;width:100%}
.hl-sage__eyebrow{margin:0;color:var(--off-white)}
.hl-sage__title{margin:0;color:var(--white)}
.hl-sage__copy{max-width:300px}
.hl-sage__lead{margin:0 0 20px;color:var(--white)}
.hl-sage__body{margin:0;color:var(--white)}
.hl-sage__cta{width:236px;justify-content:center}

/* ---- Detail ---- */
.hld{background:var(--off-white);padding-bottom:96px}
.hld__hero{margin-left:auto;width:1029px;max-width:calc(100% - 48px);height:535px}
.hld__hero img{width:100%;height:100%;object-fit:cover;display:block}
.hld__inner{position:relative;max-width:calc(var(--maxw) - 96px);margin:-93px auto 0;padding:0}
.hld__tag{display:inline-block;color:var(--charcoal)}
/* The package name is the Decorative token (Playfair Italic 101/100, amber),
   riding over the photo's bottom-left corner exactly as the frame draws it. */
.hld__title{margin:4px 0 24px;max-width:939px;font:italic 400 101px/100px var(--serif);color:var(--amber)}
.hld__cols{display:flex;gap:48px;align-items:flex-start;padding-left:143px}
.hld__main{flex:0 1 641px;min-width:0;display:flex;flex-direction:column;gap:48px}
.hld__text{display:flex;flex-direction:column;gap:8px;padding:8px 0}
.hld__lot{display:flex;flex-direction:column;gap:13px}
.hld__lot-line,.hld__lot-price{margin:0;color:var(--charcoal)}
.hld__rule{display:block;width:207px;height:2px;background:var(--tan);margin:8px 0}
.hld__body{color:var(--charcoal)}
.hld__body p{margin:0 0 10px}
.hld__body p:last-child{margin:0}
.hld__incl{margin-top:8px}
.hld__incl-title{margin:0 0 8px;color:var(--charcoal)}
.hld__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hld__list li{display:flex;align-items:flex-start;gap:8px;line-height:1.7;color:var(--charcoal)}
.hld__list img{flex:none;width:24px;height:24px;display:block;margin-top:1px}
.hld__fine{margin-top:8px;color:var(--charcoal)}
.hld__fine p{margin:0 0 10px}
.hld__ref{color:var(--mid-grey)}
.hld__plan{position:relative;margin:0;border-radius:16px;overflow:hidden;background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.15);min-height:390px;display:flex;align-items:center;justify-content:center;padding:24px}
.hld__plan img{max-width:100%;max-height:340px;object-fit:contain;display:block}
.hld__zoom{position:absolute;right:16px;top:16px;width:36px;height:36px;border:0;border-radius:999px;background:var(--cream);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:transform .3s var(--ease-spring)}
.hld__zoom:hover{transform:scale(1.06)}
.hld__video .vid{min-height:400px;height:400px;border-radius:16px;overflow:hidden}
/* Card-sized video (641×400 in the frame): the poster plus a round play
   button — the label/title of the full-width block would crowd it. */
.hld__video .gd__video-label,.hld__video .gd__video-title{display:none}
.hld__video .vid__text{gap:0}
.hld__video .btn{width:69px;height:69px;padding:0;border-radius:50%;justify-content:center;font-size:0;letter-spacing:0;gap:0}
.hld__video .btn img{width:20px;height:20px;margin:0}
.hld__video .btn span,.hld__video .btn .arrow{display:none}
.hld__map{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.hld__map img{width:100%;height:350px;object-fit:cover;display:block}
.hld__side{flex:0 0 369px;width:369px;display:flex;flex-direction:column;gap:24px;position:sticky;top:120px}
.hld__actions{display:flex;gap:12px;align-items:stretch}
.hld__save{flex:none}
.hld__save img{width:16px;height:16px}
.hld__save.is-saved{background:var(--slate-green);color:var(--off-white)}
.hld__save.is-saved img{filter:brightness(0) invert(1)}
.hld__brochure{flex:1 1 auto;justify-content:center}
.hld__brochure img{width:16px;height:16px}
.hld__specs{margin:0;padding-top:23px;display:flex;flex-direction:column}
.hld__spec{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--warm-sand);color:var(--charcoal)}
.hld__spec dt,.hld__spec dd{margin:0}
.hld__nqr{background:var(--warm-sand);border-radius:16px;padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.15);min-height:270px}
.hld__nqr-title{margin:0;color:var(--charcoal)}
.hld__nqr-body{margin:0;max-width:320px;color:var(--charcoal)}

/* More packages 772:9594 */
.hl-more{position:relative;isolation:isolate;overflow:hidden;background:var(--slate-green);padding:96px 0 96px var(--global-padding);display:flex;flex-direction:column;gap:48px}
.hl-more__texture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;z-index:-1;pointer-events:none}
.hl-more__head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-right:var(--global-padding)}
.hl-more__head .kd__eyebrow{letter-spacing:1.44px;line-height:1.2}
.hl-more__track{padding:0 32px 0 0}
.hl-more .hlc{flex:0 0 500px;width:500px;scroll-snap-align:start}
.hs__rail--sage{background:var(--sage)}
.hs__rail--sage .hs__grab{background:var(--tan)}
.hs__arrow--light img{filter:brightness(0) invert(1)}

/* ---- Derived responsive ---- */
@media (max-width:1200px){
  .hld__title{font-size:76px;line-height:76px}
  .hld__hero{width:100%;max-width:100%;height:440px}
  .hld__cols{padding-left:0;gap:32px}
  .hld__main{flex:1 1 auto}
  .hl-more .hlc{flex-basis:420px;width:420px}
}
@media (max-width:1023px){
  .hl-intro__text{padding:64px 24px 48px}
  .hl-intro .kd__title.h1{font-size:40px}
  .hl{padding:0 24px 64px}
  .hl__inner{flex-direction:column;gap:32px}
  .hl__filters{position:static;flex:none;width:100%}
  .hl__radios{flex-direction:row;flex-wrap:wrap;gap:10px 20px}
  .hl__grid{grid-template-columns:1fr;width:100%}
  .hl-sage{min-height:0;padding:40px 28px}
  .hlc__media{height:240px}
  .hlc__body{padding:24px}
  .hld{padding-bottom:64px}
  .hld__hero{height:320px}
  .hld__inner{margin-top:-48px;padding:0 24px}
  .hld__title{margin:8px 0 20px;font-size:56px;line-height:1}
  .hld__cols{flex-direction:column}
  .hld__side{position:static;flex:none;width:100%}
  .hld__main{gap:32px}
  .hld__video .vid{height:280px;min-height:280px}
  .hl-more{padding:64px 0 64px 24px;gap:32px}
  .hl-more__head{flex-direction:column;align-items:flex-start;gap:24px;padding-right:24px}
  .hl-more__head .kd__title.h2{font-size:34px}
  .hl-more .hlc{flex-basis:min(360px,82vw);width:min(360px,82vw)}
}
@media (max-width:768px){
  .hld__title{font-size:40px}
  .hld__actions{flex-direction:column}
  .hld__brochure{width:100%}
  .hld__save{width:100%;justify-content:center}
  .hlc__price{font-size:12px;letter-spacing:1.44px}
}

/* ============================================================
   PLAN LIBRARY — Figma plans-list 358:2766 / plans-grid 362:5104
   Text Block 866 (pt247 pb128) → plans-content: filters 198 at x48 (labels
   12/1.44, small radios 20px, 24px pill groups, range, plan-name input, 2px
   warm-sand rule, RESET) + the 1130 column: wide FloorPlan Cards (315 tall)
   with the Map Tool Block breaking the run, or the "Exteriors" masonry of
   549-wide Gallery Cards; the view switch sits top-right (362:4290).
   Detail (2096:14151): 914 render with the roof selector and the name in the
   Decorative token → SAVE / DOWNLOAD PLAN → 253 specs column (spec rows,
   PLACE ON A MAP, price guide bar) + 1065 floor-plan viewer with fullscreen
   and the 2D/3D switch.
   ============================================================ */
.pl-intro{background:var(--off-white);display:flex;justify-content:center}
.pl-intro__text{width:866px;max-width:100%;padding:96px 96px 96px 48px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.pl-intro__copy{margin:0;color:var(--charcoal)}
.pl-intro .btn img{width:16px;height:16px}
.pl{background:var(--off-white);padding:0 var(--global-padding) 96px}
.pl__inner{max-width:calc(var(--maxw) - 96px);margin:0 auto;display:flex;align-items:flex-start;gap:16px}
.pl__filters{flex:0 0 198px;width:198px;position:sticky;top:120px;display:flex;flex-direction:column;gap:10px;padding-right:12px}
.pl__flabel{margin:0;color:var(--charcoal)}
.pl__group{display:flex;flex-direction:column;gap:10px;padding-bottom:12px}
.pl__radio{display:flex;align-items:center;gap:4px;cursor:pointer;position:relative;font:400 14px/1.5 var(--sans);color:var(--mid-grey);transition:color .25s var(--ease-soft)}
.pl__radio input{position:absolute;opacity:0;width:0;height:0}
.pl__dot{flex:0 0 20px;width:20px;height:20px;background:url("inner/radio-sm-off.svg") center/20px no-repeat}
.pl__radio input:checked~.pl__dot{background-image:url("inner/radio-sm-on.svg")}
.pl__radio input:checked~.pl__rlabel,.pl__radio:hover{color:var(--charcoal)}
.pl__radio input:focus-visible~.pl__dot{outline:2px solid var(--amber);outline-offset:2px;border-radius:50%}
.pl__pills{display:flex;gap:4px;flex-wrap:wrap;padding-bottom:12px}
.pl__pill{width:24px;height:24px;padding:0;border:0;border-radius:999px;background:var(--white);color:var(--mid-grey);font:600 12px/16px var(--sans);letter-spacing:.5px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.15);transition:background-color .25s var(--ease-soft),color .25s var(--ease-soft),transform .25s var(--ease-spring)}
.pl__pill:hover{transform:scale(1.08)}
.pl__pill.is-on{background:var(--sage);color:var(--off-white)}
.pl__size{padding-bottom:12px}
.pl__size-vals{display:flex;justify-content:space-between;font:600 12px/1.5 var(--sans);letter-spacing:.6px;color:var(--mid-grey)}
.pl__size-track{position:relative;height:16px;margin-top:4px}
.pl__size-track input{position:absolute;left:0;top:0;width:100%;margin:0;height:16px;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.pl__size-track::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--tan)}
.pl__size-track input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--sage);border:2px solid var(--off-white);box-shadow:0 1px 2px rgba(0,0,0,.2);cursor:pointer}
.pl__size-track input::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border:2px solid var(--off-white);border-radius:50%;background:var(--sage);cursor:pointer}
.pl__name{display:flex;flex-direction:column;gap:10px}
.pl__name input{width:100%;border:0;border-radius:4px;background:var(--white);padding:8px 12px;font:400 14px/1.5 var(--sans);color:var(--charcoal);box-shadow:0 1px 2px rgba(0,0,0,.15);outline:none}
.pl__name input:focus-visible{box-shadow:0 1px 2px rgba(0,0,0,.15),0 0 0 2px var(--amber)}
.pl__rule{display:block;height:2px;background:var(--warm-sand);margin:12px 0 0}
.pl__reset{display:inline-flex;align-items:center;gap:8px;padding:8px 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)}
.pl__reset img{width:16px;height:16px;transition:transform .5s var(--ease-fluid)}
.pl__reset:hover img{transform:rotate(180deg)}
.pl__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:32px}
.pl__actions{display:flex;gap:12px;justify-content:flex-end;margin-top:-62px}
.pl__view img{width:16px;height:16px}
.pl__view.is-on{background:var(--off-white)}
.pl__list,.pl__grid{display:flex;flex-direction:column;gap:32px}
.pl__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-content:start}
.pl[data-view="plans"] .pl__grid,.pl[data-view="exteriors"] .pl__list{display:none}
.pl-row .ac-plan__link{position:absolute;inset:0}
.pl-row{min-height:315px}
/* The frame's list card carries no name (you click through); a plan library
   reads better when it does, so the name sits beside the type tag in the same
   cream pill treatment rather than over the photo. */
.pl-row__name{position:absolute;left:17px;top:19px;z-index:2;padding:4px 8px;border-radius:4px;background:var(--white);color:var(--charcoal);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.pl-row .ac-plan__tag{left:auto;right:64px;top:19px;background:var(--cream)}
.pl-ext{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.15);aspect-ratio:549 / 328;background:var(--warm-sand)}
.pl-ext[hidden]{display:none}
.pl-ext__link{display:block;width:100%;height:100%}
.pl-ext img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease-card-open)}
.pl-ext:hover img{transform:scale(1.05)}
.pl-ext .gt__save{right:15px;top:15px}
.pl__empty{margin:0;color:var(--mid-grey)}
.pl__more{align-self:center;width:44px;height:44px;border:0;border-radius:999px;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease-spring)}
.pl__more:hover{transform:translateY(3px)}
.pl__more img{width:24px;height:24px}
.pl-map{background:var(--off-white)}

/* ---- Plan detail ---- */
.pd__hero{position:relative;isolation:isolate;height:914px;max-height:82vh;overflow:hidden;background:var(--slate-green)}
.pd__render{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease-soft)}
.pd__render.is-current{opacity:1}
.pd__name{position:absolute;left:48px;bottom:24px;margin:0;font:italic 400 101px/100px var(--serif);color:var(--off-white);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.pd__roofs{position:absolute;right:48px;bottom:32px;display:flex;gap:18px}
.pd__roof{width:131px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--white);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .3s var(--ease-spring),border-color .3s var(--ease-soft)}
.pd__roof img{width:100%;height:64px;object-fit:cover;display:block}
.pd__roof .label{display:block;padding:4px 0;color:var(--charcoal)}
.pd__roof:hover{transform:translateY(-3px)}
.pd__roof.is-on{border-color:var(--amber);transform:translateY(-8px)}
.pd__body{background:var(--off-white);padding:48px var(--global-padding) 96px}
.pd__actions{max-width:calc(var(--maxw) - 96px);margin:0 auto 34px;display:flex;gap:12px;justify-content:flex-end}
.pd__save img,.pd__pdf img{width:16px;height:16px}
.pd__save.is-saved{background:var(--slate-green);color:var(--off-white)}
.pd__save.is-saved img{filter:brightness(0) invert(1)}
.pd__cols{max-width:calc(var(--maxw) - 96px);margin:0 auto;display:flex;gap:48px;align-items:flex-start}
.pd__side{flex:0 0 253px;width:253px;display:flex;flex-direction:column;gap:0;padding-top:16px}
.pd__eyebrow{margin:0;color:var(--charcoal)}
.pd__summary{margin:12px 0;color:var(--charcoal);white-space:nowrap}
.pd__summary .sep{color:var(--tan);padding:0 6px}
.pd__specs{margin:0 0 16px;display:flex;flex-direction:column}
.pd__spec{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--warm-sand);color:var(--charcoal)}
.pd__spec:last-child{border-bottom:0}
.pd__spec dt,.pd__spec dd{margin:0}
.pd__map{width:100%;justify-content:center}
.pd__price{padding-top:32px;display:flex;flex-direction:column;gap:12px}
.pd__price-title{margin:0;color:var(--charcoal)}
.pd__price-scale{display:flex;justify-content:space-between;color:var(--charcoal)}
.pd__price-bar{position:relative;height:8px;border-radius:4px;background:rgba(0,0,0,.1);overflow:hidden}
.pd__price-fill{position:absolute;top:0;height:8px;border-radius:4px;background:var(--sage)}
.pd__price-note{margin:0;font:500 12px/1.5 var(--sans);color:var(--mid-grey)}
.pd__price-note a{color:var(--slate-green);text-decoration:underline}
.pd__desc{margin-top:32px;font:500 12px/1.5 var(--sans);color:var(--mid-grey)}
.pd__desc p{margin:0 0 10px}
.pd__viewer{position:relative;flex:1 1 auto;min-width:0;min-height:652px;border-radius:16px;background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;padding:32px}
.pd__drawing{display:none;max-width:100%;max-height:588px;object-fit:contain}
.pd__drawing.is-current{display:block}
.pd__vbtns{position:absolute;right:24px;bottom:24px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.pd__full{width:118px;justify-content:center;background:var(--cream)}
.pd__dims{display:flex;border-radius:999px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.pd__dim{width:59px;padding:12px 0;border:0;background:var(--white);color:var(--charcoal);font:600 12px/16px var(--sans);letter-spacing:1.6px;cursor:pointer;transition:background-color .25s var(--ease-soft),color .25s var(--ease-soft)}
.pd__dim.is-on{background:var(--sage);color:var(--off-white)}
.pd-more{background:var(--cream);padding:96px 0 96px var(--global-padding);display:flex;flex-direction:column;gap:48px}
.pd-more__head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-right:var(--global-padding)}
.pd-more__track{padding:0 32px 0 0}
.pd-card{flex:0 0 375px;width:375px;height:521px;scroll-snap-align:start}
.pd-card .sd-plan__media{flex:1 1 auto}

@media (max-width:1200px){
  .pd__hero{height:600px}
  .pd__name{font-size:76px;line-height:76px}
  .pd__viewer{min-height:520px}
}
@media (max-width:1023px){
  .pl-intro__text{padding:64px 24px 48px}
  .pl-intro .kd__title.h1{font-size:40px}
  .pl{padding:0 24px 64px}
  .pl__inner{flex-direction:column;gap:24px}
  .pl__filters{position:static;flex:none;width:100%;padding-right:0}
  .pl__group{flex-direction:row;flex-wrap:wrap;gap:10px 20px}
  .pl__size{max-width:260px}
  .pl__main{width:100%}
  .pl__actions{margin-top:0;justify-content:flex-start;flex-wrap:wrap}
  .pl__grid{grid-template-columns:1fr}
  .pl-row{min-height:0}
  .pd__hero{height:420px}
  .pd__name{left:24px;bottom:16px;font-size:48px;line-height:48px}
  .pd__roofs{right:16px;bottom:16px;gap:8px}
  .pd__roof{width:92px}
  .pd__roof img{height:48px}
  .pd__body{padding:32px 24px 64px}
  .pd__actions{margin-bottom:24px;justify-content:flex-start}
  .pd__cols{flex-direction:column;gap:32px}
  .pd__side{flex:none;width:100%;padding-top:0}
  .pd__viewer{width:100%;min-height:360px;padding:20px}
  .pd__drawing{max-height:420px}
  .pd-more{padding:64px 0 64px 24px;gap:32px}
  .pd-more__head{flex-direction:column;align-items:flex-start;gap:24px;padding-right:24px}
  .pd-card{flex-basis:min(320px,80vw);width:min(320px,80vw);height:auto}
  .pd-card .sd-plan__media{aspect-ratio:4 / 3;flex:none}
}
@media (max-width:768px){
  .pd__name{font-size:36px;line-height:36px}
  .pd__roofs{position:static;padding:12px 24px;justify-content:center;background:rgba(0,0,0,.15)}
  .pd__hero{height:auto}
  .pd__render{position:relative;height:280px}
  .pd__render:not(.is-current){display:none}
  .pd__name{position:absolute;bottom:96px}
}

/* ============================================================
   SHARED EDITORIAL SECTIONS (used by pricing, our process, building vs
   buying, our design approach, regions and the community pages)
   · ch  = circle hero          Figma 683:6798 / 658:6328
   · ti  = text & image section Figma 712:6019  (518×668 photo + text)
   · ic  = info-cards row       Figma 685:7010  (3 Text Cards)
   · is  = image split section  Figma 712:5909  (half text, half photo)
   ============================================================ */
.ch{position:relative;isolation:isolate;z-index:1;min-height:904px;background:var(--slate-green)}
.ch__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--cream)}
.ch__bg img{width:100%;height:100%;object-fit:cover;display:block}
.ch__inner{position:relative;max-width:var(--maxw);margin:0 auto;min-height:904px;display:flex;align-items:center;padding:100px var(--global-padding) 0}
.ch--right .ch__inner{justify-content:flex-end}
/* The frame draws a 550 square; longer client copy grows it downwards rather
   than letting the CTA slide under the curve (radius keeps the round edge). */
.ch__circle{width:550px;min-height:550px;max-width:100%;border-radius:999px;background:var(--cream);padding:64px 72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.ch__circle .ch__copy{font-size:18px;line-height:1.45}
.ch__circle .kd__title em{font-style:italic}
.ch__copy{margin:0;color:var(--charcoal)}
.ch .link-btn{align-self:center}

.ti{background:var(--cream)}
.ti--off-white{background:var(--off-white)}
.ti--warm-sand{background:var(--warm-sand)}
.ti__inner{max-width:1109px;margin:0 auto;padding:96px var(--global-padding);display:flex;gap:80px;align-items:center}
.ti--flip .ti__inner{flex-direction:row-reverse}
.ti__photo{flex:0 0 518px;width:518px;height:668px;margin:0;overflow:hidden}
.ti__photo img{width:100%;height:100%;object-fit:cover;display:block}
.ti__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:24px}
.ti__body{color:var(--charcoal)}
.ti__body p{margin:0 0 13px}
.ti__body p:last-child{margin:0}
.ti__body ul{list-style:disc;margin:0 0 13px;padding-left:24px}
.ti__body li{line-height:1.7}

.ic{background:var(--cream)}
.ic--off-white{background:var(--off-white)}
.ic--warm-sand{background:var(--warm-sand)}
.ic__inner{max-width:var(--maxw);margin:0 auto;padding:96px var(--global-padding);display:grid;grid-template-columns:repeat(var(--ic-cols,3),minmax(0,1fr));gap:32px;align-items:stretch}
.ic-card{align-self:stretch}
.ic-card{flex:1 1 0;min-width:0;border-radius:16px;padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.ic-card--sage{background:var(--sage);color:var(--off-white)}
.ic-card--tan{background:var(--tan);color:var(--charcoal)}
.ic-card--brown{background:var(--light-brown);color:var(--off-white)}
.ic-card--slate{background:var(--slate-green);color:var(--off-white)}
.ic-card__tag{padding:4px 8px;border-radius:4px;background:var(--cream);color:var(--charcoal)}
.ic-card__title,.ic-card__text{margin:0;color:inherit}
.ic-card__text{max-width:320px}
.ic-card__cta{margin-top:0}

.is{display:flex;align-items:stretch;background:var(--warm-sand);min-height:600px}
.is--cream{background:var(--cream)}
.is--off-white{background:var(--off-white)}
.is--flip{flex-direction:row-reverse}
.is__text{flex:1 1 50%;min-width:0;padding:96px 64px 96px var(--global-padding);display:flex;flex-direction:column;justify-content:center;gap:24px;max-width:720px}
.is--flip .is__text{padding:96px var(--global-padding) 96px 64px}
.is__body{color:var(--charcoal)}
.is__body p{margin:0 0 13px}
.is__body p:last-child{margin:0}
.is__photo{flex:1 1 50%;min-width:0;overflow:hidden}
.is__photo img{width:100%;height:100%;min-height:600px;object-fit:cover;display:block}
.is .btn{align-self:flex-start}

@media (max-width:1200px){
  .ch,.ch__inner{min-height:720px}
  .ch__circle{width:480px;height:480px;padding:48px}
  .ic__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ti__inner{gap:48px;padding:80px var(--global-padding)}
  .ti__photo{flex-basis:420px;width:420px;height:560px}
}
@media (max-width:1023px){
  .ch,.ch__inner{min-height:0}
  .ch__inner{padding:104px 24px 64px;justify-content:center}
  .ch__circle{width:100%;height:auto;max-width:520px;border-radius:16px;padding:40px 28px;gap:20px}
  .ch__circle .kd__title.h1{font-size:38px}
  .ti__inner,.ti--flip .ti__inner{flex-direction:column;gap:32px;padding:64px 24px}
  .ti__photo{flex:none;width:100%;height:auto;aspect-ratio:518 / 500}
  .ti__text .kd__title.h2{font-size:34px}
  .ic__inner{grid-template-columns:1fr;padding:64px 24px;gap:24px}
  .ic-card{padding:32px 24px}
  .is,.is--flip{flex-direction:column;min-height:0}
  .is__text,.is--flip .is__text{padding:64px 24px;max-width:none}
  .is__text .kd__title.h2{font-size:34px}
  .is__photo img{min-height:0;height:320px}
}

/* our-process 803:14776 additions to the shared Process component:
   the price/free pill beside the step label, and the step checklist. */
.proc-step__labels{display:flex;align-items:center;gap:8px}
.proc-step--r .proc-step__labels{justify-content:flex-end}
.proc-step__tag{padding:4px 8px;border-radius:4px;font:600 12px/1.2 var(--sans);letter-spacing:1.44px;text-transform:uppercase;white-space:nowrap}
.proc-step__tag--amber{background:var(--amber);color:var(--white)}
.proc-step__tag--sage{background:var(--sage);color:var(--off-white)}
.proc-step__checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.proc-step__checks li{display:flex;align-items:flex-start;gap:12px;color:var(--charcoal)}
.proc-step--r .proc-step__checks li{flex-direction:row-reverse;text-align:right}
.proc-step__checks img{flex:none;width:24px;height:24px;display:block;margin-top:1px}

/* ============================================================
   BUILDING VS BUYING — Figma 987:26502
   Section Header 800 centred → comparison table 1280 (warm-sand header,
   off-white rows divided by warm-sand, 345 label column + two equal columns
   with a 20px tick/cross) → "What matters most" head + three Text Cards.
   ============================================================ */
.bvb{background:var(--cream);padding:96px var(--global-padding)}
.bvb__head{max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.bvb__copy{margin:0;max-width:700px;color:var(--charcoal)}
.bvb__table{max-width:1280px;margin:56px auto 0}
.cmp{border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.cmp__head,.cmp__row{display:flex;gap:16px;align-items:flex-start;padding:8px 16px}
.cmp__head{background:var(--warm-sand);padding:20px 16px;align-items:center}
.cmp__row{background:var(--off-white);border-bottom:1px solid var(--warm-sand)}
.cmp__row:last-child{border-bottom:0}
.cmp__cell{flex:1 1 0;min-width:0;display:flex;gap:8px;align-items:flex-start;padding:16px 12px;color:var(--charcoal)}
.cmp__cell--label{flex:0 0 345px;width:345px;display:block}
.cmp__cell img{flex:none;width:20px;height:20px;display:block;margin-top:2px}
.bvb-wm{background:var(--off-white);padding:96px 0 0}
.bvb-wm__head{max-width:800px;margin:0 auto;padding:0 var(--global-padding);text-align:center}
.bvb-wm .ic__inner{padding-top:56px}
@media (max-width:1023px){
  .bvb{padding:64px 24px}
  .bvb__head .kd__title.h2{font-size:34px}
  .bvb__table{margin-top:32px}
  .cmp{border-radius:12px}
  .cmp__head{display:none}
  .cmp__row{flex-direction:column;gap:4px;padding:16px}
  .cmp__cell{padding:4px 0}
  .cmp__cell--label{flex:none;width:100%;font-weight:600}
  .bvb-wm{padding:64px 0 0}
  .bvb-wm__head{padding:0 24px}
  .bvb-wm__head .kd__title.h2{font-size:34px}
}

/* ============================================================
   OUR DESIGN APPROACH — Figma 931:21051
   Two editorial wrappers: a 580 left stack (H2 + 580×676 photo + 468-wide
   body + link) and a 636 right stack (636×407 photo + 568-wide body +
   636×510 photo), gap 128; then the six-card grid; then the second wrapper.
   ============================================================ */
.da{background:var(--cream)}
.da--alt{background:var(--warm-sand)} /* ROUND 58: Figma 931:21051 draws The Sentinel difference on Colour/Warm Sand (#EFE8D6); was off-white */
.da__inner{max-width:var(--maxw);margin:0 auto;padding:96px var(--global-padding);display:flex;gap:128px;align-items:flex-start}
.da__col{display:flex;flex-direction:column;gap:48px}
.da__col--l{flex:0 0 580px;width:580px}
.da__col--r{flex:1 1 0;min-width:0}
.da__col--pt96{padding-top:96px}
.da__h{margin:0;color:var(--charcoal)}
.da__photo{margin:0;width:100%;height:var(--h,480px);overflow:hidden;border-radius:4px}
.da__photo img{width:100%;height:100%;object-fit:cover;display:block}
.da__body{color:var(--charcoal)}
.da__body p{margin:0 0 13px}
.da__body p:last-child{margin:0}
.da__body--468{max-width:468px}
.da__body--568{max-width:568px}
.da-pf{background:var(--cream);padding:96px 0 0} /* ROUND 58: Figma 931:21051 keeps Personality & Functionality on Colour/Cream — only The Sentinel difference below it is Warm Sand */
.da-pf__head{max-width:948px;margin:0 auto;padding:0 var(--global-padding);display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.da-pf__copy{margin:0;color:var(--charcoal)}
.da-pf .ic__inner{padding-top:56px}
@media (max-width:1200px){
  .da__inner{gap:64px;padding:80px var(--global-padding)}
  .da__col--l{flex-basis:460px;width:460px}
}
@media (max-width:1023px){
  .da__inner{flex-direction:column;gap:48px;padding:64px 24px}
  .da__col{gap:32px}
  .da__col--l,.da__col--r{flex:none;width:100%}
  .da__col--pt96{padding-top:0}
  .da__photo{height:auto;aspect-ratio:4 / 3}
  .da__h.h2,.da-pf__head .kd__title.h2{font-size:34px}
  .da-pf{padding:64px 0 0}
  .da-pf__head{padding:0 24px}
}

/* ============================================================
   REGION PAGE — Figma location-desktop 712:7681
   Owner story (897-wide photo with the 800 panel riding over it) → contact
   strip (office details, regional enquiry form, the local display home) →
   intro text & image → area packages → display homes → video → reviews grid
   → region gallery → FAQ → Footer CTA.
   ============================================================ */
.rg-hero{position:relative;background:var(--cream);min-height:800px;display:flex;align-items:stretch}
.rg-hero__photo{position:absolute;inset:0 auto 0 0;width:897px;max-width:70%;overflow:hidden}
.rg-hero__photo img{width:100%;height:100%;object-fit:cover;display:block}
.rg-hero__panel{position:relative;margin-left:auto;width:800px;max-width:56%;background:var(--cream);display:flex;align-items:center;padding:96px 120px}
.rg-hero__text{display:flex;flex-direction:column;gap:24px}
.rg-hero__body{color:var(--charcoal)}
.rg-hero__body p{margin:0 0 13px}
.rg-hero__body p:last-child{margin:0}
.rg-contact{background:var(--off-white);padding:64px var(--global-padding)}
.rg-contact__inner{max-width:calc(var(--maxw) - 96px);margin:0 auto;display:flex;gap:32px;align-items:flex-start}
.rg-contact__details{flex:0 0 248px;width:248px;display:flex;flex-direction:column;gap:12px}
.rg-contact__title{margin:0;color:var(--charcoal)}
.rg-contact__addr,.rg-contact__hours{margin:0;color:var(--charcoal)}
.rg-contact__hours{color:var(--mid-grey)}
.rg-contact__links{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.rg-contact__form{flex:0 0 436px;max-width:436px}
.rg-contact__home{flex:1 1 330px;min-width:0;align-self:stretch}
.rg-homes{background:var(--cream);padding:96px var(--global-padding)}
.rg-homes__head{max-width:calc(var(--maxw) - 96px);margin:0 auto 32px}
.rg-homes__grid{max-width:calc(var(--maxw) - 96px);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:32px}
.rg-reviews{background:var(--off-white);padding:96px var(--global-padding)}
.rg-reviews__inner{max-width:calc(var(--maxw) - 96px);margin:0 auto;display:flex;gap:48px;align-items:flex-start}
.rg-reviews__text{flex:0 0 480px;width:480px;position:sticky;top:120px}
.rg-reviews__grid{flex:1 1 0;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.rg-review{background:var(--white);border-radius:16px;padding:24px;box-shadow:0 1px 4px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:12px}
.rg-review__meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rg-review__stars{display:inline-flex;gap:2px;color:var(--amber)}
.rg-review__stars svg{width:16px;height:16px}
.rg-review__date{color:var(--mid-grey)}
.rg-review__quote,.rg-review__name{margin:0;color:var(--charcoal)}
.rg-gallery{background:var(--cream);padding:96px var(--global-padding)}
.rg-gallery__head{max-width:calc(var(--maxw) - 96px);margin:0 auto 32px}
.rg-gallery__grid{max-width:calc(var(--maxw) - 96px);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.rg-gtile{position:relative;margin:0;border-radius:16px;overflow:hidden;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.12);aspect-ratio:656 / 420}
.rg-gtile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease-card-open)}
.rg-gtile:hover img{transform:scale(1.05)}
@media (max-width:1200px){
  .rg-hero__panel{padding:80px 64px;max-width:60%}
  .rg-contact__inner{flex-wrap:wrap}
  .rg-contact__home{flex-basis:100%}
  .rg-reviews__text{flex-basis:360px;width:360px}
}
@media (max-width:1023px){
  .rg-hero{flex-direction:column;min-height:0}
  .rg-hero__photo{position:relative;width:100%;max-width:100%;height:280px}
  .rg-hero__panel{width:100%;max-width:100%;margin:0;padding:48px 24px}
  .rg-hero__text .kd__title.h2{font-size:34px}
  .rg-contact{padding:48px 24px}
  .rg-contact__inner{flex-direction:column}
  .rg-contact__details,.rg-contact__form{flex:none;width:100%;max-width:none}
  .rg-homes,.rg-reviews,.rg-gallery{padding:64px 24px}
  .rg-reviews__inner{flex-direction:column;gap:32px}
  .rg-reviews__text{position:static;flex:none;width:100%}
  .rg-reviews__grid,.rg-gallery__grid{grid-template-columns:1fr}
  .rg-homes__head .kd__title.h2,.rg-reviews__text .kd__title.h2,.rg-gallery__head .kd__title.h2{font-size:34px}
}

/* ============================================================
   STORY PAGES — community-sponsorship 943:22328, parenting place 984:25320,
   broader outcomes 984:25689, charity homes 960:24017
   · sy-hero--split : 408 text column beside the 865 video/photo
   · sy-hero--decor : full-bleed photo, bright-yellow italic 101 title
   · sy-cols        : 624 copy column + 624 photo/ticklist column, gap 96
   · sy-stories     : the staggered photo + copy blocks (two columns)
   · sy-check       : photo beside a checklist
   · sy-photo       : full-width captioned photo
   ============================================================ */
.sy-hero--split{background:var(--off-white)}
.sy-hero__inner{max-width:var(--maxw);margin:0 auto;padding:96px var(--global-padding);display:flex;gap:71px;align-items:center}
.sy-hero__text{flex:0 0 408px;width:408px;display:flex;flex-direction:column;gap:15px}
.sy-hero__body{color:var(--charcoal)}
.sy-hero__body p{margin:0 0 10px}
.sy-hero__body p:last-child{margin:0}
.sy-hero__media{flex:1 1 0;min-width:0;border-radius:16px;overflow:hidden}
.sy-hero__media img{width:100%;height:479px;object-fit:cover;display:block}
.sy-hero__media .vid{height:479px;min-height:479px;border-radius:16px;overflow:hidden}
.sy-hero--decor{position:relative;isolation:isolate;z-index:1;min-height:777px;display:flex;align-items:flex-end;background:var(--slate-green);overflow:hidden}
.sy-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.sy-hero__wash{position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(0,0,0,0) 71%,rgba(0,0,0,.5) 100%)}
.sy-hero__decor{margin:0;padding:100px var(--global-padding) 40px;font:italic 400 101px/100px var(--serif);color:#ffcf56}
.sy-cols{background:var(--off-white);padding:96px var(--global-padding)}
.sy-cols__inner{max-width:calc(var(--maxw) - 96px);margin:0 auto;display:flex;gap:96px;align-items:center}
.sy-cols__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:40px}
.sy-cols__block{display:flex;flex-direction:column;gap:12px}
.sy-cols__h,.sy-cols__sub{margin:0;color:var(--charcoal)}
.sy-cols__p{margin:0;color:var(--mid-grey)}
.sy-cols__side{flex:0 0 624px;width:624px;display:flex;flex-direction:column;gap:32px}
.sy-cols__photo{margin:0;height:346px;overflow:hidden;border-radius:4px}
.sy-cols__photo img{width:100%;height:100%;object-fit:cover;display:block}
.sy-ticks{display:flex;flex-direction:column;gap:24px}
.sy-ticks__h{margin:0;color:var(--charcoal)}
.sy-ticks__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sy-ticks__list li{display:flex;align-items:flex-start;gap:8px;color:var(--charcoal)}
.sy-ticks__list img{flex:none;width:24px;height:24px;display:block}
.sy-cards{background:var(--cream);padding:96px 0 0}
.sy-cards__head{max-width:800px;margin:0 auto;padding:0 var(--global-padding);text-align:center}
.sy-cards .ic__inner{padding-top:56px}
.sy-stories{background:var(--off-white);padding:96px var(--global-padding)}
.sy-stories__inner{max-width:calc(var(--maxw) - 96px);margin:0 auto}
.sy-stories__head{margin-bottom:48px}
.sy-stories__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 128px;align-items:start}
.sy-story{display:flex;flex-direction:column;gap:24px}
.sy-story:nth-child(even){padding-top:96px}
.sy-story__photo{margin:0;height:407px;overflow:hidden;border-radius:4px}
.sy-story__photo img{width:100%;height:100%;object-fit:cover;display:block}
.sy-story__text{display:flex;flex-direction:column;gap:12px;max-width:468px}
.sy-story__h,.sy-story__p{margin:0;color:var(--charcoal)}
.sy-story__p{color:var(--mid-grey)}
.sy-check{display:flex;align-items:stretch;background:var(--warm-sand)}
.sy-check__photo{flex:0 0 45%;margin:0;overflow:hidden}
.sy-check__photo img{width:100%;height:100%;min-height:520px;object-fit:cover;display:block}
.sy-check__text{flex:1 1 0;min-width:0;padding:96px 64px;display:flex;flex-direction:column;justify-content:center;gap:24px}
.sy-check__lead{margin:0;color:var(--charcoal)}
.sy-check__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sy-check__list li{display:flex;align-items:flex-start;gap:12px;color:var(--charcoal)}
.sy-check__list img{flex:none;width:24px;height:24px;display:block}
.sy-photo{background:var(--off-white);padding:0 var(--global-padding) 96px}
.sy-photo__fig{max-width:calc(var(--maxw) - 96px);margin:0 auto;display:flex;flex-direction:column;gap:10px}
.sy-photo__fig img{width:100%;height:417px;object-fit:cover;display:block;border-radius:4px}
.sy-photo__fig figcaption{color:var(--mid-grey)}
@media (max-width:1200px){
  .sy-hero__inner{gap:48px;padding:80px var(--global-padding)}
  .sy-cols__inner{gap:48px}
  .sy-cols__side{flex-basis:460px;width:460px}
  .sy-stories__grid{gap:48px 64px}
}
@media (max-width:1023px){
  .sy-hero__inner{flex-direction:column;gap:32px;padding:64px 24px}
  .sy-hero__text{flex:none;width:100%}
  .sy-hero__text .kd__title.h2{font-size:34px}
  .sy-hero__media img,.sy-hero__media .vid{height:280px;min-height:280px}
  .sy-hero--decor{min-height:360px}
  .sy-hero__decor{padding:120px 24px 24px;font-size:44px;line-height:44px}
  .sy-cols{padding:64px 24px}
  .sy-cols__inner{flex-direction:column;gap:32px}
  .sy-cols__side{flex:none;width:100%}
  .sy-cols__photo{height:auto;aspect-ratio:16 / 9}
  .sy-ticks__list{grid-template-columns:1fr}
  .sy-cards{padding:64px 0 0}
  .sy-cards__head{padding:0 24px}
  .sy-cards__head .kd__title.h2{font-size:34px}
  .sy-stories{padding:64px 24px}
  .sy-stories__grid{grid-template-columns:1fr;gap:48px}
  .sy-story:nth-child(even){padding-top:0}
  .sy-story__photo{height:auto;aspect-ratio:16 / 10}
  .sy-stories__head .kd__title.h2{font-size:34px}
  .sy-check{flex-direction:column}
  .sy-check__photo{flex:none}
  .sy-check__photo img{min-height:0;height:280px}
  .sy-check__text{padding:48px 24px}
  .sy-check__text .kd__title.h2{font-size:34px}
  .sy-photo{padding:0 24px 64px}
  .sy-photo__fig img{height:240px}
}

/* ============================================================
   OUR HISTORY — Figma history desktop 984:26153
   ROUND 59 (client doc "Sentinel 010", 8 Sep 2026): the page rebuilt to the
   frame. Twelve 1440 × 837 panels, each a hand-placed composition
   (polaroids, a pile of prints, three photos, a newspaper page, the map of
   New Zealand with location dots, three logo cards) on the frame's papers:
   cream paper (paper.png, 100% or 50% over Colour/Cream) with the leaf
   shadow (40% multiply), sage (#7A917F × the paper's luminance), flat
   charcoal, flat slate green. Every panel is a .hist__stage drawn in the
   frame's own 1440 × 837 coordinates (inline left/top/width from
   inc/page-history.php) and scaled to the viewport with --hist-s =
   min(100cqw, --maxw) / 1440 — so a 1440 window is the frame pixel for
   pixel, narrower desktops scale it down, and 1700+ scales it up with the
   1600 content width the header uses, keeping the logo line. Backgrounds
   bleed to the viewport edges (.hist__bg spans 100cqw inside the stage).
   While a panel's photos and captions are the frame's own, the artwork is
   the frame's export (.hist__stock — rotation, soft shadow and handwritten
   caption exactly as drawn); a changed photo draws the same composition
   live (.hist__polaroid, .hist__shot). The dot nav rides the right edge at
   the header's padding (12 cream dots, 36 apart, on a 2px 40% rail; the
   panel in view is amber). Under 1024 the stages unwind into a stacked
   column (the frame has no mobile layout).
   ============================================================ */
/* the header on the first panel's paper: no cream bar, no header offset */
.sh-paper .page-main{padding-top:0}
.sh-paper.admin-bar .page-main{padding-top:0}
@media (min-width:1024px){
  .sh-paper .nav:not(.scrolled):not(.panel-open)::before{background:transparent;box-shadow:none}
}

.hist{position:relative;background:var(--cream);container-type:inline-size;overflow:hidden}
.hist__panel{--hist-w:100vw;--hist-w:100cqw;--hist-s:tan(atan2(min(var(--hist-w),var(--maxw)),1440px));
  position:relative;isolation:isolate;overflow:hidden;height:calc(837px * var(--hist-s));background:var(--cream)}
.hist__stage{position:absolute;left:50%;top:0;width:1440px;height:837px;transform:translateX(-50%) scale(var(--hist-s));transform-origin:50% 0}

/* backgrounds — bleed to the viewport, drawn in stage units */
.hist__bg{--hist-bx:calc((var(--hist-w) / var(--hist-s) - 1440px) / 2);position:absolute;top:0;height:837px;
  width:calc(var(--hist-w) / var(--hist-s));left:calc(-1 * var(--hist-bx));background:var(--cream)}
.hist__paper,.hist__leaf{position:absolute;inset:0;display:block;background-repeat:no-repeat;background-position:center;background-size:cover}
.hist__paper{background-image:url("inner/history/paper.jpg")}
.hist__leaf{background-image:url("inner/history/plant.jpg");mix-blend-mode:multiply;opacity:.4;display:none}
.hist__panel--cream .hist__leaf,.hist__panel--cream-soft .hist__leaf,.hist__panel--cream-alt .hist__leaf{display:block}
.hist__panel--cream-soft .hist__paper,.hist__panel--cream-alt .hist__paper,.hist__panel--cream-flat .hist__paper{opacity:.5}
.hist__panel--cream-alt .hist__leaf{background-size:1726px 966px;background-position:calc(var(--hist-bx) - 286px) -14px}
.hist__panel--sage,.hist__panel--sage .hist__bg{background:#7a917f}
.hist__panel--sage .hist__paper{filter:grayscale(1);mix-blend-mode:multiply}
.hist__panel--charcoal,.hist__panel--charcoal .hist__bg{background:var(--charcoal)}
.hist__panel--slate,.hist__panel--slate .hist__bg{background:var(--slate-green)}
.hist__panel--charcoal .hist__paper,.hist__panel--slate .hist__paper{display:none}

/* text block: year / heading / body, 8 apart */
.hist__text{position:absolute;display:flex;flex-direction:column;gap:8px;color:var(--charcoal)}
.hist__text--right{text-align:right}
.hist__panel--ink-light .hist__text{color:var(--cream)}
.hist__year{margin:0;font:italic 400 101px/100px var(--serif);color:var(--amber)}
.hist__h{margin:0;font:500 27px/34px var(--sans);color:inherit} /* Desktop/H3 27/127% — Figma lays the line at a whole 34 */
.hist__body{font:400 16px/1.5 var(--sans);margin-top:2px} /* +2: Chrome sets Montserrat 16/24 two pixels higher in its line box than Figma does — measured against the frame */
.hist__body p{margin:0 0 10px}
.hist__body p:last-child{margin:0}
.hist__body strong{font-weight:700}

/* artwork */
.hist__art{position:absolute;inset:0;pointer-events:none}
.hist__art img{pointer-events:auto}
.hist__stock,.hist__nz,.hist__pin,.hist__shot,.hist__polaroid,.hist__card,.hist__note{position:absolute}
.hist__stock{display:block;max-width:none}
.hist__nz{display:block;max-width:none;opacity:.5;mix-blend-mode:multiply}
.hist__pin{border-radius:50%;background:var(--cream)}
.hist__pin--amber{background:var(--amber)}
.hist__shot{overflow:hidden;background:#f3f3f1}
.hist__shot-img,.hist__polaroid-img,.hist__card-img{display:block;width:100%;height:100%;object-fit:cover}
.hist__trio .hist__shot,.hist__photo .hist__shot,.hist__shot--shadow{box-shadow:0 12px 48px rgba(0,0,0,.2)}
.hist__photo,.hist__polaroid,.hist__card{margin:0}
.hist__note{display:flex;align-items:center;margin:0;font:400 14px/1.5 var(--sans);color:var(--charcoal)}
.hist__polaroid{background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.hist__polaroid-img{position:absolute;left:4%;top:3.6%;width:92%;height:73%}
.hist__caption{display:flex;align-items:center;justify-content:center;margin:0;white-space:nowrap;overflow:hidden;
  font:400 30px/1 "Signerica Fat","Dancing Script",cursive;color:var(--mid-grey)}
.hist__card{overflow:visible}
.hist__card--sage{background:#7a917f}
.hist__card-logo{position:absolute;display:block;max-width:none}
.hist__card-year{position:absolute;right:0;width:155px;margin:0;text-align:right;color:var(--white)}

/* right-edge dot nav */
.hist__nav{position:fixed;right:max(var(--global-padding),calc(50% - var(--maxw) / 2 + var(--global-padding)));top:50%;transform:translateY(-50%);z-index:20;
  display:flex;flex-direction:column;gap:24px;padding:0}
.hist__nav::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:rgba(247,243,234,.4)}
.hist__dot{position:relative;display:block;width:12px;height:12px;border-radius:999px;background:var(--cream);
  transition:background-color .3s var(--ease-soft),transform .3s var(--ease-spring)}
.hist__dot:hover{transform:scale(1.2)}
.hist__dot.is-on{background:var(--amber);transform:scale(1.3)}
.hist__nav.is-away{opacity:0;pointer-events:none;transition:opacity .3s var(--ease-soft)}

/* phones and tablets: the frame has no mobile layout — the stages unwind into a column */
@media (max-width:1023px){
  .hist__nav{display:none}
  .hist__panel{height:auto;padding:64px 24px}
  .hist__stage{position:static;width:auto;height:auto;transform:none;display:flex;flex-direction:column;gap:32px}
  .hist__bg{inset:0;width:auto;height:auto;left:0}
  .hist__panel--cream-alt .hist__leaf{background-size:cover;background-position:center}
  .hist__text{position:relative;left:auto !important;top:auto !important;width:auto !important;max-width:586px;text-align:left}
  .hist__year{font-size:52px;line-height:52px}
  .hist__art{position:relative;inset:auto;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
  .hist__art--stock,.hist__trio,.hist__logos,.hist__photo{flex-direction:row;flex-wrap:wrap;gap:16px}
  .hist__stock,.hist__shot,.hist__polaroid,.hist__card,.hist__note{position:relative;left:auto !important;top:auto !important;transform:none !important}
  .hist__stock{width:auto !important;height:auto !important;max-width:min(100%,420px)}
  .hist__shot{width:min(100%,360px) !important;height:auto !important;aspect-ratio:4 / 3;box-shadow:0 8px 24px rgba(0,0,0,.15)}
  .hist__shot--shadow{aspect-ratio:3 / 4}
  .hist__polaroid{width:min(100%,320px) !important;height:auto !important;aspect-ratio:351 / 400}
  .hist__polaroid-img{position:absolute}
  .hist__caption{position:absolute;left:0 !important;right:0;bottom:4% !important;top:auto !important;width:auto !important;height:auto !important;font-size:22px}
  .hist__card{width:min(100%,240px) !important;height:auto !important;aspect-ratio:322 / 159;margin-bottom:28px}
  .hist__card-logo{left:50% !important;top:50% !important;transform:translate(-50%,-50%);width:70% !important;height:auto !important}
  .hist__card-year{top:100% !important;margin-top:6px;width:auto;left:0}
  .hist__note{width:auto !important;height:auto !important;max-width:377px}
  .hist__map{position:relative;z-index:1;overflow:hidden;width:1440px;height:837px;margin:0 -24px calc(837px * var(--hist-s) - 837px);transform:scale(var(--hist-s));transform-origin:0 0;order:-1;display:block} /* z-index: with order:-1 the map would paint under the absolute .hist__bg (flex paints abspos children at order 0) */
  .hist__map .hist__nz,.hist__map .hist__pin{position:absolute}
}

/* ============================================================
   PHASE 5 QC (4 Sep 2026) — fixes found by the sweep.
   ============================================================ */

/* .screen-reader-text was in use in eight templates (the history
   year dots, the plan-row and map-block labels, the book-a-tour and
   accessible-break helpers, the region page) with NO rule behind it
   anywhere in the theme — so every one of those labels was rendering
   VISIBLY. This is WordPress's own accessibility helper, verbatim
   from Twenty Twenty-One: off-screen for sighted users, still read by
   screen readers, and brought back on keyboard focus. */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal;
}
.screen-reader-text:focus{
  clip-path:none;background-color:var(--off-white);color:var(--charcoal);
  display:block;font-size:14px;font-weight:600;height:auto;left:5px;
  line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;
  width:auto;z-index:100000;box-shadow:0 0 2px 2px rgba(0,0,0,.6);
}

/* ============================================================
   ROUND 45 — Build Options page feedback (4 Sep 2026)
   ============================================================ */

/* ----------------------------------------------------------
   §1  BUILD OPTIONS — the small cards hold their height on hover
   ----------------------------------------------------------
   "Apply the same hover animation used for the Build Options
   section on the Home page. Currently, hovering over the last
   three boxes increases their height. Remove this height
   increase."

   The homepage card (.build__card) is a FIXED 493px with its image
   as a flexible child (flex:1; min-height:0), so when the
   description panel opens the image gives up the space and the
   card never moves. On this page the two large cards already do
   exactly that - .bo-card--large is a fixed 488 with
   .bo-card__media at flex:1 1 auto - and measured at 1440 they
   hold 488 on hover while the image goes 390 -> 309.

   The small cards did not: .bo-card had no height and
   .bo-card__media was a fixed 356 (flex:none), so the 105px panel
   had nowhere to go but downward. Measured: card 3 goes 454 -> 559
   on hover, and because .bo__cards is align-items:stretch its two
   row-mates are dragged to 559 with it - the whole row jumps.

   Fix: give the small cards the large cards' mechanics. 454 is
   their own closed height (356 media + 98 body: 32 + 34 title +
   32, Figma's "32 + title + 32"), so at rest nothing changes; on
   hover the image absorbs the panel (356 -> ~251) and the card
   stays 454, the same behaviour as the homepage.

   Scoped to `.bo` because .bo-card is reused by four other
   templates (display-home / plan / local-office / subdividing)
   that must not inherit a fixed height. The <1024 resets mirror
   the existing --large resets; the :not() selector outranks the
   bare .bo-card__media rules below 768, so the 240px mobile media
   height is restated here rather than lost. */
.bo .bo-card:not(.bo-card--large){height:454px}
.bo .bo-card:not(.bo-card--large) .bo-card__media{flex:1 1 auto;height:auto;min-height:0}
@media (max-width:1023px){
  .bo .bo-card:not(.bo-card--large){height:auto}
  .bo .bo-card:not(.bo-card--large) .bo-card__media{flex:none;height:356px}
}
@media (max-width:768px){
  .bo .bo-card:not(.bo-card--large) .bo-card__media{height:240px}
}

/* ============================================================
   ROUND 46 — BUILDING VS BUYING (client feedback, 7 Sep 2026;
   Google Doc 1eibJSPvXgquNlbFU6fLKpG3TrIhcUE-GZB5i8YBedQo)
   §1 banner photo — asset swap only (assets/inner/bvb/hero.jpg is now
      the Figma frame's photo, cropped to the frame's exact framing).
   §2 circle → left: the template's align switch ('left'); the entrance
      below. §5 Reviews band + §6 header/footer: template + the two nav
      scopes above. Nothing here touches the homepage (inner.css is never
      enqueued on it).
   ============================================================ */

/* §2 — circle entrance. The photo lands first; the circle then settles
   into place on the project's --ease-lux curve (home.css, round 37: the
   "expensive" easing the drawer and the reveals already use) — a soft
   lift from 32px below with a gentle 0.94→1 scale and fade over 1.4s,
   held back 160ms so it never appears with the page. `backwards` fill:
   the end state IS the natural styles, so no transform lingers to fight
   the layout, and it plays once, on load, on every viewport. The copy
   inside keeps the existing global reveal (home.js), which now reads as
   the second beat of the same movement. Reduced motion: static. */
@keyframes ch-circle-in{from{opacity:0;transform:translateY(32px) scale(.94)}to{opacity:1;transform:none}}
.ch__circle{animation:ch-circle-in 1.4s var(--ease-lux) .16s backwards}
@media (prefers-reduced-motion: reduce){
  .ch__circle{animation:none}
}

/* §3 — What Matters Most on #F7F3EA (the section AND the info-cards
   band inside it; the template also switches the band's tone to cream). */
.bvb-wm{background:var(--cream)}

/* §4 — the comparison table spans the header's content width: the same
   --maxw minus the same --global-padding as .nav__inner, so its left edge
   sits on the logo and its right edge on CONTACT at every viewport width
   (1344 at 1440; 1504 where --maxw widens to 1600). Was capped at 1280. */
.bvb__table{max-width:calc(var(--maxw) - 2 * var(--global-padding))}


/* ============================================================
   ROUND 47 — CHARITY HOMES (client, 7 Sep 2026; Google Doc
   1Kz0XFfah2TcQ-45bOVc2By1mAtjskijTVhmjmdeRNk8)
   · listing  /charity-homes/          Figma charity homes desktop   960:24017
   · single   /charity-homes/<slug>/   Figma charity homes - desktop 960:22896
   Reused as-is: .sy-hero--decor (listing hero), .ch (circle hero), .dd__info /
   .dd__why / .dd__open / .dd__map (info cards), .vid (video), .dd__plan,
   .dd__gallery + .gal__grid + .gt (gallery), .hs (scroller). New below:
   the two Large-Card flavours, the logo strip, the supplier grid and the
   section frames. Tokens and type classes come from home.css.
   ============================================================ */

/* ---- "How a Charity Home comes together" 960:24451 / 960:23414 ----
   cream (single: + the leafy texture at 20% multiply), 96/48 padding,
   64 gap, 800 text block, three 488 cards in a 32 gap. */
.chp-how{position:relative;isolation:isolate;overflow:hidden;background:var(--cream);padding:96px var(--global-padding)}
.chp-how__texture,.chp-list__texture,.chh-other__texture{position:absolute;top:0;left:-15.41%;width:130.83%;max-width:none;height:100%;object-fit:cover;opacity:.2;mix-blend-mode:multiply;z-index:-1;pointer-events:none} /* max-width:none: the global img{max-width:100%} would clip Figma's 130.83% plate at 84.6% and leave the right of the section bare */
.chp-how__inner{max-width:calc(var(--maxw) - 2 * var(--global-padding));margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:64px}
.chp-how__head,.chh-sup__head{width:800px;max-width:100%;gap:16px}
.chp-how__eyebrow,.chp-list__eyebrow,.chh-sup__eyebrow,.chh-other__head .kd__eyebrow{letter-spacing:1.44px;line-height:1.2}
.chp-how__eyebrow,.chh-sup__eyebrow{color:var(--slate-green)}
.chp-how__cards{display:flex;gap:32px;align-items:flex-start;width:100%}
.chp-card{flex:1 1 0;min-width:0;height:488px;display:flex;flex-direction:column;background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.chp-card__media{flex:1 1 auto;min-height:0;overflow:hidden}
.chp-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.chp-card__body{flex:none;background:var(--off-white);padding:32px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.chp-card__label,.chp-card__title{margin:0;color:var(--charcoal)}
.chp-card__text{margin:0;color:var(--mid-grey)}

/* ---- "Our Charity Homes" 960:24326 ---- leafy cream, 56 top / 96 bottom,
   the 772 × 315 text block, then the cards wrapping (flex 1, min 330,
   24 gap → three per row, the last row's cards widen). */
.chp-list{position:relative;isolation:isolate;overflow:hidden;background:var(--cream);padding:56px var(--global-padding) 96px}
.chp-list__inner{max-width:calc(var(--maxw) - 2 * var(--global-padding));margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:48px}
.chp-list__text{width:772px;max-width:100%;min-height:315px;padding:0 64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center}
.chp-list__body{margin:0;color:var(--charcoal)}
.chp-list__cards{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;width:100%}
.chp-list__cards .chc{flex:1 1 0;min-width:330px;max-width:calc(50% - 12px)} /* a lone last card takes half the row, never all of it */

/* ---- Charity Home card (Figma Large Card + tag) ---- 446.5 tall; photo
   grows, body (32 padding, 10 gap) holds: location H3, CHARITY HOME label,
   summary, optional link. Tag cream in construction, amber once sold. Hover
   is the site's card lift. */
.chc{position:relative;display:flex;flex-direction:column;height:446.5px;background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15);
  transition:transform .8s var(--ease-card-close),box-shadow .8s var(--ease-card-close)}
.chc:hover,.chc:focus-within{box-shadow:var(--shadow-card-hover);transform:translateY(-6px);transition:transform .9s var(--ease-card-open),box-shadow .9s var(--ease-card-open)}
.chc__media{position:relative;display:block;flex:1 1 auto;min-height:0;overflow:hidden}
.chc__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease-card-open)}
.chc:hover .chc__media img{transform:scale(1.05)}
.chc__tag{position:absolute;left:32px;top:28px;padding:4px 8px;border-radius:4px;background:var(--cream);color:var(--charcoal);white-space:nowrap}
.chc--sold .chc__tag{background:var(--amber)}
.chc__body{flex:none;background:var(--off-white);padding:32px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.chc__title,.chc__label{margin:0;color:var(--charcoal)}
.chc__title a{color:inherit;text-decoration:none}
.chc__text{margin:0;color:var(--mid-grey)}
.chc__more{margin-top:0}

/* ---- Single hero 960:23489 ---- the circle hero at 777 with the smaller
   433 × 417 ellipse (padding 64, gap 24, eyebrow 1.6 tracking, H2, body-lg),
   Figma's 71%→50% black wash and the bottom-left label + line. */
.ch--charity,.ch--charity .ch__inner{min-height:777px}
.ch--charity .ch__inner{padding:100px var(--global-padding) 0}
.ch__wash{position:absolute;inset:0;z-index:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 71.236%,rgba(0,0,0,.5) 100%);pointer-events:none}
.ch__circle--sm{width:433px;min-height:417px;padding:64px;gap:24px}
.ch__circle--sm .kd__head{gap:4px}
.ch__circle--sm .ch__copy{font-size:20px;line-height:1.5}
.chh-hero__stack{position:absolute;left:var(--global-padding);bottom:26px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;color:var(--white)}
.chh-hero__label,.chh-hero__line{margin:0;color:var(--white)}

/* ---- Partner logo strip 1071:35500 ---- the two logo bands run wider than
   the frame in Figma (986 + 904 on 1440), so they scroll: one set followed by
   its copy, translated by half the track — a seamless loop. Hover pauses it;
   reduced motion gets a plain scrollable strip. */
.chh-logos{overflow:hidden;background:var(--cream);height:86px;display:flex;align-items:flex-end}
.chh-logos__track{display:flex;width:max-content;will-change:transform;animation:chh-marquee 48s linear infinite}
.chh-logos:hover .chh-logos__track{animation-play-state:paused}
.chh-logos__set{display:flex;align-items:flex-end;flex:none}
.chh-logos__set img{height:85px;width:auto;display:block}
@keyframes chh-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .chh-logos{overflow-x:auto}
  .chh-logos__track{animation:none;will-change:auto}
  .chh-logos__set[aria-hidden]{display:none}
}

/* ---- Info cards ---- the Display Home detail's .dd__info as-is (the story
   heading's line breaks come through nl2br). */
/* ---- Gallery ---- the Display Home detail's .dd__gallery; Figma's Text
   Block here is a fixed 174 (1071:35426), 64 taller than its content. */
.chh .dd__gallery-head{min-height:174px;justify-content:flex-start}

/* ---- "Our Generous Suppliers" 960:23631 ---- warm sand, 96/48, 64 gap,
   4 × 282 white tiles (radius 4, padding 16, 228 × 111 logo box) in a 16 gap. */
.chh-sup{background:var(--warm-sand);padding:96px var(--global-padding)}
.chh-sup__inner{max-width:calc(var(--maxw) - 2 * var(--global-padding));margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:64px}
.chh-sup__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,282px);gap:16px;justify-content:center}
.chh-sup__tile{background:var(--white);border-radius:4px;padding:16px;display:flex;align-items:center;justify-content:center}
.chh-sup__tile img{width:228px;height:111px;object-fit:contain;display:block}

/* ---- "Other Charity Homes" 984:25249 ---- slate green + leafy texture,
   96 vertical, 48 gap, 772 text block, then the .hs scroller with 580 cards
   in a 24 gap, the sage rail with its white grab and white chevrons. */
.chh-other{position:relative;isolation:isolate;overflow:hidden;background:var(--slate-green);padding:96px 0}
.chh-other__inner{display:flex;flex-direction:column;align-items:center;gap:48px}
.chh-other__head{width:772px;max-width:100%;padding:0 64px;gap:4px}
.chh-other .hs{max-width:none;gap:48px}
.chh-other .hs__track{gap:24px}
.chh-other .chc{flex:0 0 580px;width:580px;scroll-snap-align:start}
.chh-other .hs__rail{background:var(--sage)}
.chh-other .hs__grab{background:var(--white)}
.chh-other .hs__arrow img{filter:brightness(0) invert(1)}
.chh-other .hs__bar{height:2px} /* Figma's scrollbar frame is the 2px line; the 24px chevrons sit centred on it */

@media (max-width:1200px){
  .chp-how__cards{flex-wrap:wrap}
  .chp-card{flex:1 1 calc(50% - 16px);min-width:280px}
  .chh-sup__grid{grid-template-columns:repeat(auto-fit,minmax(220px,282px));width:100%}
}
@media (max-width:1023px){
  .chp-how{padding:64px 24px}
  .chp-how__inner,.chp-list__inner,.chh-sup__inner,.chh-other__inner{gap:32px}
  .chp-how__head .kd__title.h2,.chp-list__text .kd__title.h2,.chh-sup__head .kd__title.h2,.chh-other__head .kd__title.h2{font-size:34px}
  .chp-card{flex:1 1 100%;height:auto}
  .chp-card__media{flex:none;aspect-ratio:4 / 3}
  .chp-card__body{padding:24px}
  .chp-list{padding:48px 24px 64px}
  .chp-list__text{min-height:0;padding:0}
  .chp-list__cards .chc{min-width:100%}
  .chc{height:auto}
  .chc__media{flex:none;aspect-ratio:4 / 3}
  .chc__body{padding:24px}
  .chc__tag{left:24px;top:20px}
  /* Shared .dd__info fix: in the stacked column the sage card and the map
     card kept their desktop flex:1 1 0 — a zero basis in a column whose
     height is auto, with min-height:0 — so they collapsed to their padding
     (measured 64px and 0px on the Display Home detail too). An auto basis
     lets their content size them again. */
  .dd__open,.dd__map{flex-basis:auto}
  .ch--charity,.ch--charity .ch__inner{min-height:0}
  .ch--charity .ch__inner{padding:104px 24px 96px}
  .ch__circle--sm{width:100%;max-width:520px;min-height:0;padding:40px 28px;gap:20px}
  .chh-hero__stack{left:24px;bottom:24px}
  .chh-logos{height:64px}
  .chh-logos__set img{height:60px}
  .chh-sup{padding:64px 24px}
  .chh-sup__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chh-sup__tile img{width:100%;height:90px}
  .chh-other{padding:64px 0}
  .chh-other__head{padding:0 24px}
  .chh-other .chc{flex-basis:330px;width:330px}
}


/* ============================================================
   ROUND 48 — DISPLAY HOMES (client, 7 Sep 2026; Google Doc
   1y8JYPj1YgC6V-N5mNABeG6zR7_VnRS3DtQc6LeBnvXk)
   · listing  /display-homes/            Figma display-homes_desktop        743:10645
   · detail   /display-homes/<slug>/     Figma display-homes-detail_desktop 743:10782
   The rules below OVERRIDE the display-homes block above (same selectors,
   later in the file); the earlier block is left in place as the baseline.
   ============================================================ */

/* §1 Card band on #637468 — Figma "H&L Packages" 743:10919: slate green,
   full-bleed, 96 top/bottom, rows 48 apart, columns 32, the three 426.67 cards
   inside the header's content width. The intro above it sits exactly where
   the frame puts it: text-content is 709 tall with the nav over its top 120
   and the 496 text block centred (top 131.5) — 11.5 under the nav, 81.5 above
   the green. */
.dh__intro{padding:11.5px var(--global-padding) 81.5px}
.dh__grid{max-width:none;background:var(--slate-green);padding:96px max(var(--global-padding),calc((100% - var(--maxw)) / 2 + var(--global-padding)));gap:48px 32px}

/* §2 Card hover = the homepage Build Options hover (home.css .build__card):
   the card lifts 6px on --ease-card-open/--ease-card-close with the Figma
   Large Shadow, and a 0fr -> 1fr grid row slides open under the hours (the
   address and the first "Why visit?" line) while the photo settles above it —
   the same clock, the same curves. The photo itself no longer zooms; at rest
   the card is the Figma card, untouched. The row's -10px rest margin cancels
   the body's 10px gap so the closed panel takes no room. */
.dh-card__media img{transition:none}
.dh-card:hover .dh-card__media img{transform:none}
.dh-card__reveal{display:grid;grid-template-rows:0fr;opacity:0;margin-top:-10px;
  transition:grid-template-rows .8s var(--ease-card-close),opacity .55s var(--ease-card-close),margin-top .8s var(--ease-card-close)}
.dh-card__reveal-in{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:4px}
.dh-card:hover .dh-card__reveal,.dh-card:focus-within .dh-card__reveal{grid-template-rows:1fr;opacity:1;margin-top:0;
  transition:grid-template-rows .9s var(--ease-card-open),opacity .68s var(--ease-card-open) .06s,margin-top .9s var(--ease-card-open)}
.dh-card:hover .dh-card__reveal-in,.dh-card:focus-within .dh-card__reveal-in{overflow:visible}
.dh-card__addr{margin:0;font:500 14px/1.5 var(--sans);color:var(--charcoal)}
.dh-card__desc{margin:0;font:400 14px/1.5 var(--sans);color:var(--mid-grey);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.dh-card:hover,.dh-card:focus-within{box-shadow:var(--shadow-card-hover)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  .dh-card{transition:transform .8s var(--ease-card-close),box-shadow .8s var(--ease-card-close)}
  .dh-card:hover,.dh-card:focus-within{transform:translateY(-6px);transition:transform .9s var(--ease-card-open),box-shadow .9s var(--ease-card-open)}
}
@media (prefers-reduced-motion: reduce){
  .dh-card,.dh-card:hover{transform:none;transition:none}
  .dh-card__reveal{transition:none}
}

/* §5 Detail hero under the transparent nav: body.sh-hero (set in
   inc/display-homes-r48.php) reuses the existing .sh-hero rules above — the
   869 photo now starts at y = 0 as the frame draws it, so the title row lands
   at Figma's 796 / 922 instead of 120 lower. No new rule needed.
   Three small detail-page corrections measured against the frame: the
   LIMITED TIME ONLY tag overlaps the title by 9 (Figma tag-wrapper mb -9 with
   no stack gap; the stack's 10 gap had it floating 11 higher); the Book a
   Tour textarea is a block so its row is Figma's 101, not 108 (form 435, not
   442); and the person card's portrait fills a 132 column instead of sizing
   the card — 116 tall as drawn, whatever the photo's ratio. */
.dd__tag{margin-bottom:-19px}
.book__field textarea{display:block}
.person__photo{position:relative;min-height:116px}
.person__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@media (max-width:1200px){
  .dh__grid{padding:96px var(--global-padding)}
}
@media (max-width:1023px){
  .dh__intro{padding:32px 24px 0}
  .dh__grid{padding:64px 24px;gap:32px 24px}
  /* no hover on touch: the panel is simply open, as the homepage does below 1024 */
  .dh-card__reveal{grid-template-rows:1fr;opacity:1;margin-top:0}
  .dh-card__reveal-in{overflow:visible}
}
@media (max-width:768px){
  .dh__grid{padding:48px 24px 64px;gap:24px}
}


/* ============================================================
   ROUND 49 — GALLERY (client, 7 Sep 2026; Google Doc
   1zJBHQKX_oiB62P9VQILSkOBQ_yc1XOL6dmarx-ZWLiU)
   · listing  /gallery/            Figma gallery-desktop 355:1744
   · detail   /gallery/<slug>/     Figma gallery-detail  1128:36562
   ============================================================ */

/* §1 Filter legends: "Add 10px bottom padding to the filtering legend". The
   CATEGORY / TYPE / STYLE labels are <legend>s, which a fieldset lays out
   outside its flex flow — the group's 10px gap never reached them, so the
   first checkbox sat flush under the label (the client's screenshot). The
   Keyword group's label is a plain <label> inside the gap and already sits
   10 above its field, so only legends get the padding. */
legend.gal__group-label{padding-bottom:10px}

/* §2 Gallery detail vs Figma gallery-detail 1128:36562 (the template already
   existed and carries every Figma comment: rotating awards line, save the
   home / save a photo, VIEW PLAN only with a linked plan, the terracotta
   block only for a current display home). Three corrections measured against
   the frame:
   - the nav rides transparent over the 869 hero from y = 0 (body.sh-hero, set
     in inc/gallery-r49.php for entries that have a detail page);
   - region line -> headline is Figma's 4px (the Text Block's inner group),
     not the intro's 24 gap plus 4;
   - the shortened description is three lines with "more" ON the third line
     ("...are... more"), not a fourth line: the link sits over the line's end
     on a charcoal fade, so the block is Figma's 72 tall. */
.gd__region{margin:0 0 -20px}
.gd__desc.is-clamped p{position:relative}
.gd__desc.is-clamped .gd__desc-more{position:absolute;right:0;bottom:0;line-height:1.5;padding-left:28px;background:linear-gradient(to right,rgba(66,64,64,0),var(--charcoal) 22px)}



/* ============================================================
   ROUND 50 — remaining tasks (AJ, 8 Sep 2026): Our Process Reviews band
   (Q16), Subdividing texture, Building vs Buying WMM gap, the Saved items
   page (Q11), navigation live. Homepage untouched.
   ============================================================ */

/* Subdividing: the leafy texture behind the stories band is 130.83% wide
   and was clipped at 84.6% by the global img{max-width:100%} — the same
   latent rule the R47 sections already opt out of. */
.sd-stories__texture{max-width:none}

/* Building vs Buying: Figma 987:26502 has ONE 96 gap between the comparison
   table and the What Matters Most heading (Side-by-Side Comparison ends at
   2071 where What Matters Most starts, with its own 96 top padding). The
   table section carried its own 96 bottom padding as well = 192. */
.bvb{padding-bottom:0}

/* Saved items page — the Gallery's head block and tiles, unchanged; only
   the toolbar, the empty state and the tile without a photo are new. */
.sv__body{max-width:var(--maxw);margin:0 auto;padding:0 var(--global-padding) var(--section-spacing)}
.sv__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.sv__count{margin:0;color:var(--charcoal)}
.sv__clear{appearance:none;-webkit-appearance:none;background:none;border-top:0;border-left:0;border-right:0;border-radius:0;cursor:pointer} /* .link-btn is drawn for <a>; strip the UA button box, keep its amber underline */
.sv__grid[hidden],.sv__bar[hidden],.sv__empty[hidden]{display:none} /* the flex displays above would otherwise beat the UA's [hidden] */
.sv__tile{cursor:pointer}
.sv__tile--noimg .gt__media{background:var(--warm-sand)}
.sv__empty{max-width:560px;margin:0 auto;padding:48px 32px;background:var(--off-white);border-radius:16px;box-shadow:0 1px 4px rgba(0,0,0,.15);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.sv__empty-title{margin:0;color:var(--charcoal)}
.sv__empty p{margin:0;color:var(--charcoal)}
.sv__links{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 32px;margin-top:8px}
@media (max-width:768px){
  .sv__body{padding:0 24px 64px}
  .sv__bar{margin-bottom:16px}
  .sv__empty{padding:32px 20px}
}
/* ============================================================
   ROUND 51 — Plans Configurator page (AJ, 8 Sep 2026). Figma
   plans-configurator-detail-desktop 382:3091 + its comments. The House
   Configurator AI plugin renders itself inside .pc__hero; no rule here
   targets a plugin class (the hc- prefix) — the fade is a sibling layer with
   pointer-events:none. Homepage untouched.
   ============================================================ */

/* 1. Hero — the shortcode, full-bleed under the nav on cream; the render
   fades from cream at the top (0 → 32.6%) and into grey at the foot
   (84.3 → 97.9%) as in the frame. */
.pc__hero{position:relative;isolation:isolate;background:var(--cream)}
.pc__hero-in{position:relative}
.pc__hero-in>p:empty{display:none}
.pc__hero-fade{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:22px;transform:translateZ(0);will-change:transform;
  background:linear-gradient(180deg,var(--cream) 0%,rgba(253,251,249,0) 32.6%),linear-gradient(180deg,rgba(150,150,150,0) 84.3%,rgba(150,150,150,.9) 97.9%)}
.pc__empty{padding:96px var(--global-padding);text-align:center;color:var(--mid-grey)}

/* 2. Plan content (382:3103) — the plan detail column + viewer, with the
   frame's differences: buttons stacked full-width in the column, no card
   behind the drawing (it multiplies onto the off-white), FLIP above 2D/3D,
   the active view charcoal. */
.pc-plan{padding:128px var(--global-padding) 48px}
.pc-plan__side{justify-content:space-between;min-height:652px;padding-top:0}
.pc-plan__actions{display:flex;flex-direction:column;gap:12px}
.pc-plan__actions .btn{width:100%;justify-content:center}
.pc-plan__actions .btn img{width:16px;height:16px;display:block}
.pc-plan__desc{margin-top:32px}
.pc-plan__viewer{background:transparent;box-shadow:none;min-height:652px}
.pc-plan__viewer .pd__drawing{mix-blend-mode:multiply;max-height:652px;transition:transform .45s var(--ease-soft)}
.pc-plan__viewer.is-flipped .pd__drawing{transform:scaleX(-1)}
.pc-plan__flip{width:118px;justify-content:center;border:1px solid rgba(0,0,0,.3)}
.pc-plan__flip img{width:16px;height:16px}
.pc-plan .pd__dim{border:1px solid rgba(0,0,0,.3)}
.pc-plan .pd__dim+.pd__dim{border-left:0}
.pc-plan .pd__dim.is-on{background:var(--charcoal);color:var(--off-white)}

/* Price guide partial (component "price-guide", #100–#102) — on the plan
   detail page and here. */
.pg__login{width:100%;justify-content:center}
.pg__title{position:relative;display:inline-flex;align-items:center;gap:4px}
.pg__pick{display:inline-flex;width:16px;height:16px}
.pg__pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.pg__pick img{width:16px;height:16px;display:block;pointer-events:none}
.pg__range{display:flex;flex-direction:column;gap:12px}
.pg__fixed{margin:0;color:var(--charcoal)}
.pg__fixed[hidden],.pg__range[hidden]{display:none}

/* 3. Try it at your place (405:2830 → 426:3612 → 426:3955). */
.pc-map{background:var(--off-white);padding:0 var(--global-padding) var(--section-spacing)}
.pc-map__card{position:relative;isolation:isolate;height:764px;border-radius:32px;overflow:hidden;background:var(--sage)}
.pc-map__canvas{position:absolute;inset:0;z-index:0;background:#8fa393}
.pc-map__canvas .leaflet-tile-pane{filter:grayscale(.45) sepia(.18) saturate(.85) brightness(1.03) contrast(.95)}
.pc-map__canvas .leaflet-control-attribution{background:rgba(255,255,255,.6);font:400 10px/1.4 var(--sans);color:var(--charcoal);border-radius:6px 0 0 0}
.pc-map__canvas .leaflet-control-attribution a{color:var(--slate-green)}
.pc-map__wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(122,145,127,.6);transition:opacity .5s var(--ease-soft)}
.pc-map__shade{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(0,0,0,0) 68.65%,rgba(0,0,0,.3) 100%);transition:opacity .5s var(--ease-soft)}
.pc-map__card.is-placed .pc-map__wash{opacity:0}
.pc-map__card.is-placed .pc-map__shade{opacity:1}
.pc-map__intro{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;pointer-events:none}
.pc-map__intro>*{pointer-events:auto}
.pc-map__title{margin:0;color:var(--off-white)}
.pc-map__lead{margin:0;max-width:654px;font:500 16px/1.5 var(--sans);color:var(--off-white)}
.pc-map__form{display:flex;align-items:stretch;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.pc-map__field{display:flex;align-items:center;gap:4px;width:304px;padding:12px 16px;background:var(--white);border-radius:16px 0 0 16px;cursor:text}
.pc-map__field img{width:24px;height:24px;display:block}
.pc-map__field input{flex:1 1 0;min-width:0;border:0;background:none;padding:0;font:400 16px/1.4 var(--sans);letter-spacing:.32px;color:var(--charcoal);outline:none}
.pc-map__field input::placeholder{color:var(--mid-grey)}
.pc-map__go{display:flex;align-items:center;border:0;background:var(--warm-sand);padding:12px 20px;border-radius:0 16px 16px 0;cursor:pointer;transition:background-color .25s var(--ease-soft)}
.pc-map__go:hover{background:var(--cream)}
.pc-map__go img{width:16px;height:16px;display:block}
.pc-map__card.is-busy .pc-map__go{opacity:.6;cursor:progress}
.pc-map__msg{margin:0;font:500 14px/1.5 var(--sans);color:var(--off-white)}
.pc-map__msg.is-error{color:#ffe1d8}
.pc-map__msg[hidden]{display:none}
.pc-map__card.is-placed .pc-map__intro{inset:auto;top:24px;left:24px;align-items:flex-start;padding:0;text-align:left}
.pc-map__card.is-placed .pc-map__title,.pc-map__card.is-placed .pc-map__lead{display:none}
.pc-map__card.is-placed .pc-map__form{filter:drop-shadow(0 12px 24px rgba(0,0,0,.2))}
.pc-map__card.is-placed .pc-map__msg{padding:6px 10px;border-radius:8px;background:rgba(66,64,64,.75)}
.pc-map__ui{position:absolute;inset:0;z-index:2;pointer-events:none}
.pc-map__ui[hidden]{display:none}
.pc-map__ui>*{pointer-events:auto}
.pc-map__save{position:absolute;top:24px;right:24px;box-shadow:0 12px 24px rgba(0,0,0,.2)}
.pc-map__save img{width:16px;height:16px}
.pc-map__save.is-saved{background:var(--slate-green);color:var(--off-white)}
.pc-map__save.just-saved img{animation:gt-pop .5s var(--ease-spring)}
.pc-map__sun{position:absolute;top:170px;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.pc-map__sun--pm{left:16px;align-items:flex-start;filter:drop-shadow(0 12px 24px rgba(0,0,0,.2))}
.pc-map__sun--am{right:15px;align-items:flex-end}
.pc-map__sun-bubble{display:flex;align-items:center;justify-content:center;width:58px;height:58px;padding:6px;margin:5px 6px}
.pc-map__sun--pm .pc-map__sun-bubble{background:#ffcf56;border-radius:50% 50% 4px 50%;transform:rotate(-14.76deg)}
.pc-map__sun--am .pc-map__sun-bubble{background:var(--off-white);border-radius:50% 50% 50% 4px;transform:rotate(15.63deg)}
.pc-map__sun-bubble img{width:43px;height:43px;display:block}
.pc-map__sun-label{padding:0 10px;font:800 12px/1.15 var(--sans);letter-spacing:1.44px;text-transform:uppercase;color:var(--off-white);text-shadow:0 1px 3px rgba(0,0,0,.45)}
.pc-map__sun--am .pc-map__sun-label{text-align:right}
.pc-map__tools{position:absolute;left:50%;top:62%;transform:translateX(-50%);display:flex;gap:12px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.pc-map__tool{box-shadow:none}
.pc-map__tool img{width:16px;height:16px}
.pc-map__tool.is-pressed span{display:none}
.pc-map__tool.is-pressed{background:var(--cream)}
.pc-map__foot{position:absolute;left:24px;right:24px;bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.pc-map__zoom{display:flex;border-radius:999px;overflow:hidden;box-shadow:0 12px 24px rgba(0,0,0,.2)}
.pc-map__zoom button{display:flex;align-items:center;border:0;background:var(--white);padding:8px 12px;cursor:pointer;transition:background-color .25s var(--ease-soft)}
.pc-map__zoom button:hover{background:var(--cream)}
.pc-map__zoom button:first-child{border-right:1px solid rgba(0,0,0,.3)}
.pc-map__zoom img{width:20px;height:20px;display:block}
.pc-map__viewing{margin:0;font:600 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--white);text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.pc-map__viewing mark{background:none;color:inherit;box-shadow:inset 0 -2px #ffcf56;padding-bottom:2px}
.pc-map__switch{box-shadow:0 12px 24px rgba(0,0,0,.2)}
.pc-map__switch img{width:16px;height:16px}
/* the plan footprint (a Leaflet marker whose icon is the drawing, sized by
   the page script from the house's metres; #6 blue outline + move cursor) */
.pc-fp-wrap{background:none;border:0}
.pc-fp{position:absolute;left:0;top:0;width:0;height:0;cursor:move}
.pc-fp__box{position:absolute;left:0;top:0;box-sizing:content-box;padding:8px;border:2px solid transparent;border-radius:16px;transition:border-color .2s var(--ease-soft)}
.pc-fp:hover .pc-fp__box,.leaflet-drag-target .pc-fp__box{border-color:#5b9dff}
.pc-fp__box img{width:100%;height:100%;display:block;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
.pc-fp--nodrawing .pc-fp__box{background:rgba(255,255,255,.55);border-color:var(--charcoal)}
/* Switch Plan drawer */
.pc-map__dim{position:absolute;inset:0;z-index:4;background:rgba(99,116,104,.6)}
.pc-map__dim[hidden]{display:none}
.pc-map__drawer{position:absolute;top:0;right:0;bottom:0;z-index:5;width:332px;display:flex;flex-direction:column;padding:24px 12px;background:var(--cream);overflow:visible}
.pc-map__drawer[hidden]{display:none}
.pc-map__close{position:absolute;left:-48px;top:34px;border:0;background:none;padding:0;cursor:pointer;line-height:0}
.pc-map__close img{width:24px;height:24px;display:block}
.pc-map__drawer-head{padding:0 12px;flex:none}
.pc-map__drawer-title{margin:0;font:700 12px/16px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--charcoal)}
.pc-map__filters{display:flex;gap:10px;padding:8px 0}
.pc-map__filter{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:center;padding:12px;background:var(--white);border-radius:4px;border-bottom:1px solid var(--warm-sand);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.pc-map__filter select{appearance:none;-webkit-appearance:none;width:100%;border:0;background:none;padding:0 22px 0 0;font:500 14px/1.15 var(--sans);color:var(--charcoal);cursor:pointer;outline:none}
.pc-map__filter img{position:absolute;right:10px;top:50%;width:20px;height:20px;transform:translateY(-50%);pointer-events:none}
.pc-map__list{list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
.pc-map__row{position:relative;border-bottom:1px solid var(--white);border-radius:4px}
.pc-map__row.is-active{background:var(--white)}
.pc-map__row-pick{display:flex;gap:10px;align-items:stretch;width:100%;padding:12px 52px 12px 12px;border:0;background:none;text-align:left;cursor:pointer;color:var(--charcoal);font-family:var(--sans)}
.pc-map__row-pick:hover .pc-map__row-name{text-decoration:underline}
.pc-map__row-text{flex:0 0 160px;width:160px;display:flex;flex-direction:column}
.pc-map__row-head{display:flex;gap:8px;align-items:flex-end}
.pc-map__row-name{font:500 18px/1.3 var(--sans)}
.pc-map__row-area,.pc-map__row-dims,.pc-map__row-specs{font:400 14px/1.5 var(--sans)}
.pc-map__row-specs .sep{color:var(--tan);padding:0 4px}
.pc-map__row-img{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center}
.pc-map__row-img img{max-width:100%;max-height:70px;object-fit:contain;mix-blend-mode:multiply}
.pc-map__row-save{right:4px;top:10px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.pc-map__row-save .gt__save-icon{background-image:url("inner/heart-dark.svg")}
.pc-map__row-save.is-saved .gt__save-icon{background-image:url("inner/heart-filled.svg")}
/* login gate (#98) */
.pc-map__gate{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(66,64,64,.45)}
.pc-map__gate[hidden]{display:none}
.pc-map__gate-card{max-width:480px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 40px 28px;text-align:center;background:var(--off-white);border-radius:16px;box-shadow:0 12px 48px rgba(0,0,0,.2)}
.pc-map__gate-eyebrow{margin:0;color:var(--sage)}
.pc-map__gate-title{margin:0;color:var(--charcoal)}
.pc-map__gate-text{margin:0;color:var(--mid-grey)}
.pc-map__gate-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:12px}
.pc-map__gate-actions [hidden]{display:none}
.pc-map__gate-back{border:0;background:none;padding:8px 0;cursor:pointer;color:var(--charcoal)}

/* 4. Plan name over the looping render (426:4158; #58). */
.pc-feature{position:relative;height:786px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--charcoal)}
.pc-feature__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc-feature__in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.pc-feature__name{margin:0;font:italic 400 101px/100px var(--serif);color:var(--amber);text-align:center}
.pc-feature__dl{margin-top:-20px;box-shadow:0 12px 24px rgba(0,0,0,.2)}
.pc-feature__dl img{width:16px;height:16px}

/* 5. Walkthrough video — the shared block at the frame's 809. */
.pc .vid{height:809px}

/* 6. Similar Plans (426:4396) — FloorPlan Card - Vertical in the shared
   scroller; hover lifts the card and cycles its exterior photos (#59). */
.pc-similar{background:var(--warm-sand);padding:0 0 128px;display:flex;flex-direction:column}
.pc-similar__text{width:557px;max-width:100%;display:flex;flex-direction:column;gap:24px;padding:128px var(--global-padding) 48px}
.pc-similar__title{margin:0;color:var(--charcoal)}
.pc-similar__body{margin:0;color:var(--charcoal)}
.pc-similar__cta{align-self:flex-start;color:var(--charcoal)}
.pc-similar__hs{gap:58px}
.pc-similar .hs__track{padding:0 32px 0 var(--global-padding)}
.pc-similar .hs__bar{padding:0 var(--global-padding)}
.pc-card{position:relative;flex:0 0 375px;width:375px;height:521px;border-radius:16px;overflow:hidden;background:var(--white);box-shadow:0 1px 2px rgba(0,0,0,.15);scroll-snap-align:start;transition:box-shadow .35s var(--ease-soft)}
.pc-card:hover,.pc-card:focus-within{box-shadow:0 12px 24px rgba(0,0,0,.2)}
.pc-card__link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.pc-card__photo{position:relative;flex:none;height:226px;overflow:hidden;background:var(--warm-sand)}
.pc-card__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease-soft)}
.pc-card__photo img.is-on{opacity:1}
.pc-card__drawing{flex:none;height:212px;display:flex;align-items:center;justify-content:center;padding:14px 12px}
.pc-card__drawing img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.pc-card__foot{flex:1 1 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px;color:var(--charcoal)}
.pc-card__title{margin:0;font:400 20px/1.5 var(--sans)}
.pc-card__specs{margin:0;white-space:nowrap}
.pc-card__specs .sep{color:rgba(0,0,0,.3);padding:0 6px}
.pc-card__area{margin:0}
.pc-card__save{right:12px;top:14px}

@media (max-width:768px){
  .pc__hero-fade{display:none} /* ≤760 the plugin stacks its panel under the render — no fade over the panel */
  .pc-plan{padding:64px 24px 32px}
  .pc-plan__cols{flex-direction:column;gap:32px}
  .pc-plan__side{flex:none;width:100%;min-height:0}
  .pc-plan__viewer{width:100%;min-height:0;display:block}
  .pc-plan__viewer .pd__drawing{width:100%;max-height:none}
  .pc-plan .pd__vbtns{position:static;flex-direction:row;justify-content:flex-end;margin-top:12px}
  .pc-map{padding:0 24px 64px}
  .pc-map__card{height:640px;border-radius:16px}
  .pc-map__title{font-size:36px}
  .pc-map__lead{font-size:14px}
  .pc-map__form{width:100%;max-width:400px}
  .pc-map__field{width:auto;flex:1 1 0;padding:12px}
  .pc-map__card.is-placed .pc-map__intro{top:16px;left:16px;right:112px}
  .pc-map__card.is-placed .pc-map__form{max-width:none;width:100%}
  .pc-map__save{top:16px;right:16px}
  .pc-map__sun{top:120px;transform:scale(.8)}
  .pc-map__sun--pm{left:4px;transform-origin:left top}
  .pc-map__sun--am{right:4px;transform-origin:right top}
  .pc-map__foot{left:16px;right:16px;bottom:16px;flex-wrap:wrap;justify-content:space-between;row-gap:12px}
  .pc-map__viewing{order:3;width:100%;font-size:10px;letter-spacing:1.2px}
  .pc-map__drawer{width:100%;padding-top:56px}
  .pc-map__close{left:auto;right:12px;top:14px}
  .pc-map__close img{filter:brightness(0) saturate(100%) invert(24%) sepia(3%) saturate(400%) hue-rotate(314deg)}
  .pc-map__row-text{flex-basis:140px;width:140px}
  .pc-map__gate-card{padding:28px 20px 20px}
  .pc-feature{height:480px}
  .pc-feature__name{font-size:56px;line-height:1}
  .pc-feature__dl{margin-top:-8px}
  .pc .vid{height:520px}
  .pc-similar{padding-bottom:64px}
  .pc-similar__text{width:100%;padding:64px 24px 32px;gap:16px}
  .pc-similar__title{font-size:40px}
  .pc-similar__hs{gap:32px}
  .pc-similar .hs__track{padding:0 24px}
  .pc-similar .hs__bar{padding:0 24px}
  .pc-card{flex-basis:300px;width:300px;height:440px}
  .pc-card__photo{height:180px}
  .pc-card__drawing{height:170px}
  .pc-card__foot{padding:12px}
  .pc-card__title{font-size:18px}
}

/* ============================================================
   ROUND 54 — BUILD OPTIONS GRID (client doc "Sentinel 004", 8 Sep 2026)

   1. "Make all cards have equal height." The two lead cards were
      488 and the three small cards 454 (Figma 439:4063 draws the
      second row 34px shorter). The client's screenshot at 1919 wide
      had a 454 card next to two 488 cards in ONE row and asked for
      every card to match — so every card on this page is now the
      lead cards' 488, with the same fixed-height mechanics (image
      flexes, body fixed, hover reveal eats into the image; the card
      never grows). To return the small cards to Figma's 454, change
      the one height below.

   2. "The first row should display only 2 cards. All following rows
      should display 3 cards per row." The page already intended 2 + 3
      (648 + rest, then 3 up) but used flex-wrap: at 1440 the content
      box is 1344 and a third 330px card cannot fit beside 648 + 330,
      but from 1700px --maxw widens to 1600 (content 1504) and it can —
      the client's 1919-wide screenshot shows 3 + 2. The template now
      wraps the cards in two rows: .bo__row--lead (grid 648 + 1fr,
      Figma's Large Card width, the neighbour fills the rest) and
      .bo__row--grid (3 equal columns; a 4th, 5th… row keeps 3 per
      row). Gaps stay 32 (24 on phones), as before.

   Responsive follows the existing breakpoints: ≤1200 the lead row is
   two equal columns (648 no longer leaves room for its neighbour),
   ≤1023 both rows are 2 columns with natural height + 356 media (the
   description is shown on hover as before), ≤768 one column, 240
   media, description always shown. Scoped to .bo — .bo-card is reused
   by four other templates.
   ============================================================ */
.bo .bo__cards{display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--desktop-grid-gap,32px)}
.bo .bo__row{display:grid;gap:var(--desktop-grid-gap,32px);align-items:stretch;width:100%}
.bo .bo__row--lead{grid-template-columns:648px minmax(0,1fr)}
.bo .bo__row--lead > .bo-card:only-child{grid-column:1 / -1}
.bo .bo__row--grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.bo .bo-card,.bo .bo-card--large,.bo .bo-card:not(.bo-card--large){height:488px;min-width:0;flex:none;width:auto}
.bo .bo-card .bo-card__media{flex:1 1 auto;height:auto;min-height:0}
@media (max-width:1200px){
  .bo .bo__row--lead{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .bo .bo__row--lead,.bo .bo__row--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bo .bo-card,.bo .bo-card--large,.bo .bo-card:not(.bo-card--large){height:auto}
  .bo .bo-card .bo-card__media{flex:none;height:356px}
}
@media (max-width:768px){
  .bo .bo__cards,.bo .bo__row{gap:24px}
  .bo .bo__row--lead,.bo .bo__row--grid{grid-template-columns:minmax(0,1fr)}
  .bo .bo-card .bo-card__media{height:240px}
}

/* ============================================================
   ROUND 55 — PLANS PAGE HOVER VIDEO (client doc "Sentinel 006", 8 Sep 2026)
   "When hovering over a house image, the corresponding video plays instead of
   the static image … keep the static image as the default state … remove the
   current image zoom effect on hover … stop/reset when the mouse leaves … on
   both the Exteriors and Plans & Exteriors tabs. Keep the existing layout and
   styling unchanged."
   The <video class="pl-hv"> sits over the photo at opacity 0; inner.js adds
   `is-hv` to the card on the video's `playing` event (so the photo stays until
   a frame is actually painted) and removes it on leave. The zoom is switched
   off for this page's cards only (.pl scopes it — .ac-plan is also the
   Accessible page's card, which keeps its zoom). Layout untouched: the video
   is absolutely positioned inside the photo box, object-fit cover.
   ============================================================ */
.pl .ac-plan__photo,.pl .pl-ext__link{position:relative}
.pl-hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease-card-open)}
.pl [data-pl-hv].is-hv .pl-hv{opacity:1}
.pl .ac-plan:hover .ac-plan__photo img,.pl .ac-plan:focus-within .ac-plan__photo img,
.pl .pl-ext:hover img,.pl .pl-ext:focus-within img{transform:none}
@media (prefers-reduced-motion: reduce){
  .pl-hv{transition:none}
}

/* ============================================================
   ROUND 57 — CHARITY HOMES (client doc "Sentinel 008", 8 Sep 2026)
   Header space on both pages = the rev-42 fix (no change here).

   1. Banner text on the logo's line. The listing hero's H1 and the detail
      hero's bottom-left caption were positioned from the viewport edge
      (--global-padding), while the logo sits inside .nav__inner (max-width
      --maxw, centred) — identical at 1440, apart from 1700px where --maxw
      widens to 1600 (the client's 1919-wide screenshots). Both now take the
      header's own content box. The detail circle already did (.ch__inner).
   2. Community Giving cards (listing): every card the same height with the
      same image height; the FIND OUT MORE link revealed on hover (the
      homepage card's 0fr → 1fr mechanics — the image gives up the room, the
      card never moves); the existing smooth image zoom + lift kept. The body
      has a fixed minimum (244) that fits a four-line summary, so a shorter summary
      leaves the image at the same height; summaries clamp at four lines.
   3. Partner strip: one image per sponsor (~52px tall, centred, 96 apart)
      instead of the two composite bands.
   4. Other Charity Homes (detail): the homepage Build Options card treatment
      — 358 × 493, radius 14.4, white body, title (27/1.27 sans 500) at rest,
      summary + link in the hover reveal, image flexes; in the existing .hs
      scroller with its rail + arrows.
   ============================================================ */
/* 1 — logo-line alignment */
.sy-hero__decor{width:100%;max-width:var(--maxw);margin:0 auto}
.chh-hero__stack{left:max(var(--global-padding),calc(50% - var(--maxw) / 2 + var(--global-padding)))}

/* 2 — listing cards: equal heights, link on hover */
.chc{height:480px}
.chc__body{min-height:244px;justify-content:flex-start} /* fits title + label + a four-line summary at the 4-up width (358 wide, 1920 screens) */
.chc__text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.chc__reveal{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;width:100%;
  transition:grid-template-rows .8s var(--ease-card-close),opacity .55s var(--ease-card-close),margin-top .8s var(--ease-card-close)}
.chc__reveal-in{overflow:hidden;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:2px}
.chc:hover .chc__reveal,.chc:focus-within .chc__reveal{grid-template-rows:1fr;opacity:1;margin-top:0;
  transition:grid-template-rows .9s var(--ease-card-open),opacity .68s var(--ease-card-open) .06s,margin-top .9s var(--ease-card-open)}
.chc:hover .chc__reveal-in,.chc:focus-within .chc__reveal-in{overflow:visible}
.chc__more{margin-top:2px}
.chc__body{gap:10px}
/* home.js's scroll-reveal tags every .link-btn / p with .reveal and fades it in on
   intersection; inside the collapsed panel they have no height and may never be
   observed — keep the card's own copy opaque (same fix as .bo-card). */
.sh-inner .chc .reveal{opacity:1;transition-delay:0s}

/* 3 — partner strip, one image per sponsor */
.chh-logos{align-items:center}
.chh-logos__set{align-items:center;gap:96px;padding:0 48px}
.chh-logos__set img{height:52px;width:auto;max-width:240px;object-fit:contain}

/* 4 — Other Charity Homes: the homepage Build Options card */
.chh-other .chc{flex:0 0 358px;width:358px;height:493px;border-radius:14.4px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.chc--build .chc__body{min-height:0;background:var(--white);padding:24px 24px 30.6px;gap:0}
.chc--build .chc__title{font-family:var(--sans);font-weight:500;font-size:27px;line-height:1.27}
.chc--build .chc__text{font-size:16px;line-height:1.5;-webkit-line-clamp:5}
.chc--build:hover .chc__reveal,.chc--build:focus-within .chc__reveal{margin-top:10px}
.chc--build .chc__tag{left:24px;top:20px}

@media (max-width:1023px){
  .chh-other .chc{flex-basis:330px;width:330px;height:460px}
}
@media (max-width:768px){
  .chc,.chh-other .chc{height:auto}
  .chc__body{min-height:0}
  .chc .chc__reveal{grid-template-rows:1fr;opacity:1}
  .chc--build .chc__reveal{margin-top:10px}
  .chc .chc__reveal-in{overflow:visible}
  .chc__text,.chc--build .chc__text{display:block;-webkit-line-clamp:none;overflow:visible}
  .chh-logos__set{gap:48px;padding:0 24px}
  .chh-logos__set img{height:40px;max-width:180px}
}
@media (prefers-reduced-motion: reduce){
  .chc__reveal,.chc:hover .chc__reveal{transition:none}
}

/* ============================================================
   ROUND 60 — client docs "Sentinel 003" (9 tabs), "Accessible living",
   "Awards", "Broader Outcomes" (8–9 Sep 2026). Every rule is scoped to the
   inner pages (.sh-inner or an inner-page class); home.css is untouched.
   ============================================================ */

/* ---- shared: the 251 × 2 amber rule Figma sets under centred headings ---- */
.kd__rule{display:block;width:251px;height:2px;background:var(--amber);flex:none}
.kd__head--c .kd__rule{margin-top:12px} /* heading glyph bottom → rule = 20 (the h2 line box holds the other 8) */

/* ---- "Take the first step" (tabs 1, 2, 4, 5, 7, 9): the photo's bottom edge — the
        family and the dog — stays in frame however tall the 100vh band gets on large
        desktops; below 769 the mobile file (a mirrored export) is turned back to the
        photograph's real orientation. Inner pages only: the homepage is locked. ---- */
@media (min-width:1024px){
  .sh-inner .footer-cta__bg img{object-position:50% 100%}
}
@media (max-width:768px){
  .sh-inner .footer-cta__bg img{transform:scaleX(-1)}
}

/* ---- Design & Build (tab 1): the right column's top photo is a nested stack that
        shrank to its text (align-items:flex-start); both photos span the column ---- */
.ed__stack .ed__stack{width:100%}

/* ---- Display Homes (tab 2): square-cornered hero, a breath under the caption on phones ---- */
.dh__hero-link{border-radius:0}
@media (max-width:1023px){
  .sh-inner .dh__intro{padding-bottom:24px}
}

/* ---- Gallery (tab 3): FILTERS centred on phones; Awards (Doc 2): 10px under the heading ---- */
@media (max-width:1023px){
  .gal__filters-toggle{align-self:center}
}
.gal__body--featured{margin-top:10px}

/* ---- House & Land (tab 4): the 24px radio artwork carries a 1/4px drop shadow that
        the old 24px box clipped; the glyph is drawn on a 28px canvas (−2/−1 overhang),
        the box grows to 28 and pulls back in so the circle keeps its 24px place ---- */
.hl__dot{flex:0 0 28px;width:28px;height:28px;margin:-2px -2px -2px -2px;background:url("inner/house-land/radio-off-28.svg") center/28px no-repeat}
.hl__radio input:checked~.hl__dot{background-image:url("inner/house-land/radio-on-28.svg")}
.hl__radio input:focus-visible~.hl__dot{outline-offset:0}

/* ---- Knockdown & Rebuild (tab 5) hero: the BEFORE polaroid is the transparent
        cut-out (its own tilt and shadow are in the artwork) — no rotated box, no
        clipping, no second shadow. Figma: 258 × 300 at (549, 427) on the page. ---- */
.kd__before{margin:29.9% 0 0 2.54%;width:29.9%;aspect-ratio:716 / 830;overflow:visible;transform:none;box-shadow:none}
.kd__before img{object-fit:contain;object-position:50% 50%}

/* ---- Process component (tabs 5 & 9) ---- */
/* even steps: text (right-aligned) on the LEFT, image on the RIGHT — Figma Step Two / Four */
.proc-step--r{flex-direction:row-reverse;justify-content:flex-start}
/* the step text block: 455 on KDR, 600 on our-process (--proc-tw from the template); a checklist line never wraps on desktop (Figma: "A detailed list of our services and every product to be included in your new home" runs on) */
.proc-step__text{width:var(--proc-tw,455px);max-width:none}
@media (min-width:1201px){ .proc-step__checks li span{white-space:nowrap} }
/* the amber rule under "Our 5 Step Process" (our-process 801:11713: 128 × 2) */
.proc__rule{display:block;width:128px;height:2px;background:var(--amber);margin-top:12px}
/* Step One's photo leans left (−3°), Step Two's right (2°) as drawn; the cut-outs
   (transparent) let the off-white circle show behind every step */
.proc-step__img{transform:rotate(var(--tilt,0deg)) skewX(-.54deg)}
/* the dotted line is anchored to its END — the top-centre of the Celebration circle
   (circle top = block bottom − 46) — so it lands there whatever the copy's height */
.proc__line{top:auto;bottom:46px}
/* Celebration: heading, copy and the button live INSIDE the 433 circle (Figma 543:7817 /
   our-process): a 433-wide column vertically centred on the visible part of the circle */
.proc__final{padding:0 var(--global-padding)}
.proc__final-text{width:433px;max-width:100%;min-height:387px;padding:12px 40px 0;justify-content:center;gap:15px}
.proc__final-text .proc__title.h1{font-size:52px;line-height:1.1}
.proc__final-body{font-size:16px;line-height:1.5}
/* the background photo keeps its bottom (glasses, "welcome home") in frame on wide screens */
.proc__final-bg{object-position:50% 100%}
@media (max-width:1200px){
  .proc-step--r{justify-content:flex-start}
  .proc-step__text{width:min(var(--proc-tw,455px),calc(100% - 364px))}
}
@media (max-width:1023px){
  .proc-step,.proc-step--r{flex-direction:column}
  .proc-step__text,.proc-step--r .proc-step__text{width:100%;max-width:560px}
  .proc__line{bottom:auto}
  .proc__final{padding:0 24px}
  .proc__final-text{min-height:0;padding:64px 24px 0}
}

/* ---- Accessible Living (Doc 1) ---- */
.ac-hero__circle .link-btn{align-self:center}                       /* (a) 658:6330 — the link sits on the circle's centre line */
.ac-ideas__head{min-height:0;padding:200px 0 16px}                   /* (b) 658:6525 — eyebrow 200 under the section top; cards at 307 */
.ac-plans{background:var(--warm-sand)}                              /* (c) 667:5379 — #EFE8D6 */
.ac-mid{padding:57px 64px}                                          /* (d) 667:5568 — 57 above and below; heading → button 24 */
.ac-mid--map{padding-bottom:57px;gap:16px}                          /* (e) 667:5631 — heading → form 16 */
.ac-map{padding-top:0}
@media (max-width:1023px){
  .ac-ideas__head{padding:64px 0 8px}
  .ac-mid,.ac-mid--map{padding:56px 0}
}

/* ---- Book a free site check — form section (Accessible / KDR / Our Process) ----
   1440 × 820: text column (eyebrow, H1, two paragraphs, CONTACT DETAILS) 429 wide,
   64 gap, cream form card 437; the pair centred. Off-white plain; warm-sand and
   sage carry the leaf texture. */
.sf{position:relative;isolation:isolate;overflow:hidden;background:var(--off-white);padding:96px var(--global-padding)}
.sf--warm-sand{background:var(--warm-sand)}
.sf--sage{background:var(--sage)}
.sf__texture{position:absolute;top:0;left:-15.41%;width:130.83%;max-width:none;height:100%;object-fit:cover;opacity:.2;mix-blend-mode:multiply;z-index:-1;pointer-events:none}
.sf__inner{max-width:930px;margin:0 auto;min-height:628px;display:flex;align-items:center;gap:64px}
.sf__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.sf__text .kd__head{gap:4px}
.sf__body{color:var(--charcoal)}
.sf__body p{margin:0 0 10px}
.sf__body p:last-child{margin:0}
.sf__chat{color:inherit;text-decoration:underline;text-underline-position:from-font}
.sf__form{flex:0 0 437px;width:437px;padding:16px} /* the Book-a-tour card (gap 16, 101 textarea) with the frame's 16 padding */
.sf--sage .kd__eyebrow,.sf--sage .kd__title,.sf--sage .sf__body{color:var(--off-white)}
.sf--sage .link-btn{color:var(--off-white);border-bottom-color:var(--underline-base-dark)}
.sf--sage .sf__texture{opacity:.28}
@media (max-width:1023px){
  .sf{padding:64px 24px}
  .sf__inner{flex-direction:column;gap:32px;min-height:0}
  .sf__form{flex:none;width:100%;max-width:520px}
  .sf__text .kd__title.h1{font-size:40px}
}

/* ---- Pricing (tab 7) ---- */
/* the new slate-green image split ("Why square metre rates can be misleading"): light
   type, cream pill; 929 tall with the text column 568 wide */
.is--slate-green{background:var(--slate-green)}
.is--slate-green .kd__eyebrow,.is--slate-green .kd__title,.is--slate-green .is__body{color:var(--off-white)}
.is--slate-green .is__text{max-width:680px;padding-top:145px;padding-bottom:145px}
.is--slate-green .is__photo{flex:0 0 50%}
.is--slate-green .is__photo img{min-height:929px}
/* the frame's text & image sections are 871 tall (96 above the 668 photo, 107 below) with
   the 1109 pair set at x = 165 (no inner side padding) */
.sh-pricing .ti__inner{padding:96px 0 107px}
@media (max-width:1200px){
  .is--slate-green .is__text{padding-top:96px;padding-bottom:96px}
  .is--slate-green .is__photo img{min-height:600px}
}
@media (max-width:1200px){
  .sh-pricing .ti__inner{padding-left:var(--global-padding);padding-right:var(--global-padding)}
}
@media (max-width:1023px){
  .is--slate-green .is__photo{flex:none}
  .is--slate-green .is__text{padding:64px 24px}
  .is--slate-green .is__photo img{min-height:0;height:56vw}
  .sh-pricing .ti__inner{padding:64px 24px}
}

/* ---- Plans (tab 6) ---- */
.sh-plans .pl-intro,.sh-plans .pl,.sh-plans .pl-map{background:var(--cream)}   /* #F7F3EA across the page */
.sh-plans .pl-intro .btn--primary{background-color:var(--white);--sweep:var(--cream)} /* the pill stays legible on the cream page */
/* Home type info card (plans-list-accessible_desktop): terracotta, 314 tall, text
   padded 48 with the body held to 330, photo flush on the right (548 wide) */
.pl-info{display:flex;align-items:stretch;background:var(--terracotta);border-radius:16px;overflow:hidden;min-height:314px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.pl-info[hidden]{display:none}
.pl-info__text{flex:1 1 0;min-width:0;padding:40px 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;color:var(--off-white)}
.pl-info__h{margin:0;color:var(--off-white)}
.pl-info__body{margin:0;max-width:330px;color:var(--off-white)}
.pl-info__cta{margin-top:6px}
.pl-info__photo{flex:0 0 548px;width:548px;min-width:0;overflow:hidden}
.pl-info__photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:1200px){
  .pl-info__photo{flex-basis:44%;width:44%}
}
@media (max-width:1023px){
  .pl-info{flex-direction:column}
  .pl-info__text{padding:32px 24px}
  .pl-info__photo{flex:none;width:100%;height:220px}
  .pl-info__h.h2{font-size:34px}
}

/* ---- Story pages: Broader Outcomes (Doc 3) ---- */
/* decor hero: sage pill, italic title, one-line description — Figma 984:26008 */
.sy-hero__stack{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:100px var(--global-padding) 40px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.sy-hero__stack .sy-hero__decor{padding:0;max-width:none;margin:0}
.sy-hero__pill{margin:0;padding:4px 8px;border-radius:4px;background:var(--sage);color:var(--off-white);line-height:16px}
.sy-hero__desc{margin:0;color:var(--white)}
/* masonry: two columns 580 / 636 (128 apart), the heading tops the left column and
   the right column starts level with it; photo → eyebrow 48, block → block 128 */
.sy-stories__inner{display:grid;grid-template-columns:580fr 636fr;gap:0 128px;align-items:start}
.sy-stories__col{display:flex;flex-direction:column;gap:128px;min-width:0}
.sy-stories__head{margin-bottom:8px}
.sy-story,.sy-story:nth-child(even){padding-top:0;gap:48px}
.sy-story__text{gap:16px;max-width:468px}
.sy-story__text .kd__eyebrow{margin-bottom:8px}
.sy-story__text .link-btn{margin-top:8px}
.sy-stories__col--l .sy-story__photo{height:676px}
.sy-stories__col--r .sy-story__photo{height:510px}
.sy-stories__col--r .sy-story:first-child .sy-story__photo{height:407px}
/* the checklist block: off-white, the 526 × 680 photo inset 96 with 110 above and
   below, 96 to the text; the list rows 30 apart on 20px ticks */
.sy-check{background:var(--off-white);padding:110px 0;justify-content:flex-start;align-items:center}
.sy-check__photo{flex:0 0 526px;width:526px;height:680px;margin-left:max(96px,calc(50% - 624px))}
.sy-check__photo img{min-height:0}
.sy-check__text{flex:0 1 745px;max-width:745px;padding:0 0 0 99px;gap:24px}
.sy-check__list{gap:10px}
.sy-check__list li{gap:8px;line-height:20px;min-height:20px;align-items:center}
.sy-check__list img{width:20px;height:20px}
.sy-check__list li span{line-height:20px}
@media (max-width:1200px){
  .sy-stories__inner{gap:0 64px}
  .sy-stories__col--l .sy-story__photo{height:560px}
  .sy-stories__col--r .sy-story__photo,.sy-stories__col--r .sy-story:first-child .sy-story__photo{height:420px}
  .sy-check__photo{flex-basis:44%;width:44%;height:auto;aspect-ratio:526 / 680;margin-left:48px}
  .sy-check__text{padding:0 48px}
}
@media (max-width:1023px){
  .sy-hero__stack{padding:120px 24px 24px;gap:8px}
  .sy-hero__desc{font-size:16px;line-height:1.5}
  .sy-stories__inner{grid-template-columns:1fr;gap:48px}
  .sy-stories__col{gap:48px}
  .sy-story,.sy-story:nth-child(even){gap:24px}
  .sy-stories__col--l .sy-story__photo,.sy-stories__col--r .sy-story__photo,.sy-stories__col--r .sy-story:first-child .sy-story__photo{height:auto;aspect-ratio:16 / 10}
  .sy-check{flex-direction:column;padding:48px 24px;gap:32px}           /* the doc: padding on phones */
  .sy-check__photo{flex:none;width:100%;max-width:520px;height:auto;aspect-ratio:526 / 680;margin:0}
  .sy-check__text{flex:none;max-width:none;width:100%;padding:0}
}

/* ---- Story pages: Parenting Place (tab 8) ---- */
/* Sponsorship hero: cream, square-cornered video thumbnail with the frame's overlay */
.sy-hero--split:has(.sy-hero__media--video){background:var(--cream)}
.sy-hero__media--video{border-radius:0}
.sy-vid{position:relative;height:479px;display:flex;align-items:center;justify-content:center;background:#2f2e2e;overflow:hidden}
.sy-vid .gd__video-text{max-width:619px}
.sy-vid .gd__video-title{font-size:36px}
.sy-vid .btn img{width:16px;height:16px;display:block}
.sy-vid.is-playing .gd__video-poster,.sy-vid.is-playing .gd__video-overlay,.sy-vid.is-playing .gd__video-text{display:none}
.sy-vid--nolink .btn{cursor:default}
/* "How we support Parenting Place": warm-sand, rule under the heading, cards with a
   40px white icon circle, FIND OUT MORE as the light text link */
.sy-cards--icons{background:var(--warm-sand)}
.sy-cards--icons .ic__inner{padding-top:80px}       /* rule → cards 65 as drawn */
.ic-card--icon{padding:32px;gap:16px;min-height:383px} /* Figma card 428 × 383 */
.ic-card__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--white);margin-bottom:8px}
.ic-card__icon img{width:20px;height:20px;display:block}
.ic-card__link{margin-top:8px}
.ic-card--tan .ic-card__link{color:var(--charcoal);border-bottom-color:var(--underline-base)}
/* the full-bleed quote: 914 tall photo, transparent → black wash, attribution label,
   H1 quote (max 1200) and the amber rule, 24 apart, 110 above the bottom */
.sy-quote{position:relative;isolation:isolate;min-height:914px;display:flex;align-items:flex-end;justify-content:center;background:var(--charcoal);overflow:hidden;padding:64px 64px 110px}
.sy-quote__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2}
.sy-quote__wash{position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(53,64,82,0) 0%,rgba(0,0,0,.72) 100%)}
.sy-quote__text{position:relative;margin:0;max-width:1232px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.sy-quote__who{margin:0;color:var(--off-white)}
.sy-quote__p{margin:0;color:var(--cream);text-wrap:balance}
/* Our Charity Homes: the detail page's slate-green scroller with the Figma's larger
   580 × 446 cards (title, CHARITY HOME, summary at rest) under a centred head with
   body + FIND OUT MORE */
.sy-homes{padding:148px 0 96px}
.sy-homes__head{width:772px;max-width:100%;padding:0 64px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.sy-homes__head .chh-other__head{width:100%;padding:0}
.sy-homes__body{margin:0;color:var(--off-white)}
.sy-homes__cta{margin-top:-8px}
.sy-homes .chh-other__inner{gap:110px}
.sy-homes .chc,.sy-homes .chh-other .chc{flex:0 0 580px;width:580px;height:446.5px;border-radius:16px}
.sy-homes .chc__body{min-height:0;justify-content:flex-start}
@media (max-width:1023px){
  .sy-hero--split .sy-hero__media--video,.sy-vid{height:56vw;min-height:240px}
  .sy-quote{min-height:0;padding:200px 24px 64px}
  .sy-quote__p.h1{font-size:34px;line-height:1.15}
  .sy-homes{padding:64px 0}
  .sy-homes__head{padding:0 24px}
  .sy-homes .chh-other__inner{gap:32px}
  .sy-homes .chc,.sy-homes .chh-other .chc{flex-basis:330px;width:330px;height:auto}
}

/* ============================================================
   ROUND 61 — client doc "Sentinel 002" (9 Sep 2026)
   1. Hero image zoom — the homepage hero's own utility (home.css `sh-zoom`
      on the section + `sh-zoom-media` on the photo wrapper: resting
      scale 1.12, hover eases to 1 over 14s, release returns over 7s,
      fine-pointer + reduced-motion-off only) is now on the Accessible
      Living, Broader Outcomes, Building vs Buying, Charity Homes, Pricing
      and Subdivide & Build heroes via their templates. No rules of its
      own beyond the story hero's clipping wrapper below.
   2. Header shade — the homepage's top-of-hero darkening (home.css
      .hero::before: 96px, neutral, 31% → 0, desktop only) on the seven
      pages whose header rides over the photo / paper.
   3. Sticky header — the bar's cream ground always spans the header's
      resting height while the page is at the top (≤72, home.js's
      threshold), so the strip between the compact bar and the first
      section can never show while the bar grows back (inner.js toggles
      `sh-nav-top`).
   ============================================================ */
/* 1. the story hero photo in its own clipping wrapper (was the bare img) */
.sy-hero__bgwrap{position:absolute;inset:0;z-index:-1}
/* 2. the homepage's header shade, verbatim (home.css .hero::before) */
@media (min-width:1024px){
  .ac-hero::before,.sy-hero--decor::before,.ch::before,.sd-hero::before,.sh-paper .hist__panel[data-hist-panel="0"]::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);
  }
}
/* 3. the cream bar keeps the resting header height while the page is at the top */
.sh-inner:not(.sh-hero):not(.sh-paper) .nav.sh-nav-top:not(.panel-open)::before{bottom:auto;height:max(100%,var(--sh-nav-h))}

/* ============================================================
   ROUND 62 — client doc "Sentinel fine tuning QC" (20 tabs, 15 Sep 2026)
   One block per tab, in the document's order. Every rule below is scoped
   to an inner page; nothing here reaches the homepage (inner.css is not
   enqueued there).
   ============================================================ */

/* ---- TAB 1 · Accessible Living ---- */
/* §1 the hero circle enters on load exactly like the Charity Home single (ROUND 46 ch-circle-in) */
.ac-hero__circle{animation:ch-circle-in 1.4s var(--ease-lux) .16s backwards}
@media (prefers-reduced-motion: reduce){ .ac-hero__circle{animation:none} }
/* §2 the circle's right edge sits on the header's CONTACT edge — positioned from the right of
   the 1440/1600 grid (left:842 was only right at exactly 1440; the client's 1919 screen showed
   it 160px short) */
@media (min-width:1024px){
  .ac-hero__circle{left:auto;right:var(--global-padding)}
}
/* §3 "beautifully built" starts on the header logo's left edge (the grid's gutter, not the viewport's) */
@media (min-width:1024px){
  .ac-hero__tagline{left:max(var(--global-padding),calc((100% - var(--maxw)) / 2 + var(--global-padding)))}
}
/* §4 the Clever ideas section starts on the logo's left edge too, and its rail ends on the
   CONTACT edge */
@media (min-width:1024px){
  .ac-ideas{padding-left:max(var(--global-padding),calc((100% - var(--maxw)) / 2 + var(--global-padding)))}
  .ac-ideas .hs--flush .hs__bar{padding-right:max(var(--global-padding),calc((100% - var(--maxw)) / 2 + var(--global-padding)))}
}
/* §6 the plan cards' hover video — the ROUND 55 /plans/ rules, scoped to .sh-hv */
.sh-hv .ac-plan__photo{position:relative}
.sh-hv .pl-hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .45s var(--ease-card-open)}
.sh-hv [data-pl-hv].is-hv .pl-hv{opacity:1}
.sh-hv .ac-plan:hover .ac-plan__photo img,.sh-hv .ac-plan:focus-within .ac-plan__photo img{transform:none}
@media (prefers-reduced-motion: reduce){ .sh-hv .pl-hv{transition:none} }
/* §7 the ideas strip: 3 full cards + a portion of the 4th at every desktop width (396 × 403 at
   1440 exactly — the card grows with the strip on wider screens), and on desktop the section
   pins while the page scroll drives the strip (inner.js, the homepage Build Options mechanics).
   The strip = the section's inline size minus the grid gutter; container units, never vw, so a
   classic scrollbar can't skew it (HANDOVER §4-2). */
@media (min-width:1024px){
  .ac-ideas{container-type:inline-size}
  .ac-idea{--r62-card:calc((100cqw - 96px) / 3.2727); /* 100cqw = the section's CONTENT box = the strip (the gutter is the section's padding) */
    flex:0 0 var(--r62-card);width:var(--r62-card);height:auto;aspect-ratio:396 / 403}
  .ac-idea__media{flex:1 1 auto;min-height:0;aspect-ratio:auto}
  .ac-idea__body{padding:32px}
}
@media (min-width:1024px) and (prefers-reduced-motion: no-preference){
  .sh-r62-pin-wrap{position:relative}
  .sh-r62-pin-wrap>.sh-r62-pinned{position:sticky}
  /* the clipped window: left edge on the section's content edge, right edge to the viewport */
  .sh-r62-pinned .sh-r62-window{overflow:hidden;padding-top:48px;padding-bottom:48px;margin-top:-48px;margin-bottom:-48px}
  .sh-r62-pinned .hs__track{overflow:visible;scroll-snap-type:none;will-change:transform;padding-left:0}
  .sh-r62-pinned .ac-ideas__track{padding-top:16px;padding-bottom:16px}
  .sh-r62-pinned .hs.is-static .hs__bar{display:flex} /* the strip is driven, never "static" */
  .sh-r62-pinned .hs__grab{transition:none}
}
/* §9 the form card carries 6px more padding on this page (16 → 22) */
.sh-accessible .sf__form{padding:22px}

/* ---- TAB 2 · Already Have Plans ---- */
/* §1 the header ground is the page's own off-white (Figma quote-plans-desktop: the nav sits on
   #FDFBF9, not the cream of the other inner pages) */
@media (min-width:1024px){
  .sh-quote-plans .nav::before{background:var(--off-white)}
}

/* ---- TAB 3 · Award Winning Homes ---- */
/* §1 the award medals as their own assets — Figma Gallery Card "awards": 59 × 59 each, 12px
   overlap, bottom 16 / left 15 (10 / 10 on phones, 44px medals) */
.gt__awards{position:absolute;left:15px;bottom:16px;z-index:2;display:flex;align-items:center;pointer-events:none}
.gt__award{width:59px;height:59px;flex:none;display:block;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.gt__award+.gt__award{margin-left:-12px}
.gt--has-info:hover .gt__awards,.gt--has-info:focus-visible .gt__awards,.gt--has-info.is-touch .gt__awards{opacity:0;transition:opacity .3s var(--ease-fade)} /* the info overlay takes the foot on hover */
.gt__awards{transition:opacity .4s var(--ease-fade)}
@media (max-width:768px){
  .gt__awards{left:10px;bottom:10px}
  .gt__award{width:44px;height:44px}
  .gt__award+.gt__award{margin-left:-9px}
}
/* §2 no size jump on load: the columns arrive from the server (gallery-grid.php), and a tile
   is never a bare flex item of the grid */
.gal__grid>.gt{flex:0 0 100%}

/* ---- TAB 4 · Broader Outcomes ---- */
/* §1 the story's optional button appears on hover (Figma comment) — desktop pointer devices;
   touch and keyboard focus keep it visible */
@media (hover: hover) and (min-width:1024px){
  .sy-story .link-btn{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease-fade),transform .5s var(--ease-fade)}
  .sy-story:hover .link-btn,.sy-story:focus-within .link-btn{opacity:1;transform:none}
}
/* §2 the "How we are making a difference" section sits on Colour/Cream #F7F3EA (Figma 1229:11995);
   the Responsible Suppliers block stays off-white */
.sy-stories{background:var(--cream)}

/* ---- TAB 6 · Parenting Place ---- */
/* §1 the card icons at the frame's 24px (the Donations "$" is the frame's own glyph, parenting/icon-donation.svg) */
.sy-cards--icons .ic-card__icon img{width:24px;height:24px}
/* §2 attribution → quote is 4px in the frame (1067:35298: a 4px column), the rule stays 24 below */
.sy-quote__who{margin-bottom:-20px}
/* §3 Community Giving: the head is centred on the page and the first card starts on the grid's
   left margin (the logo edge), as does the rail — the scroller was flush to the viewport at
   wide widths (48px from the screen edge on a 1919 monitor, 207 for the logo) */
.sy-homes__head{margin:0 auto;align-items:center}
.sy-homes__cta{align-self:center}
@media (min-width:1024px){
  .sy-homes .hs__track{padding-left:max(var(--global-padding),calc((100% - var(--maxw)) / 2 + var(--global-padding)));scroll-padding-left:max(var(--global-padding),calc((100% - var(--maxw)) / 2 + var(--global-padding)))}
  .sy-homes .hs__bar{padding-left:max(var(--global-padding),calc((100% - var(--maxw)) / 2 + var(--global-padding)));padding-right:max(var(--global-padding),calc((100% - var(--maxw)) / 2 + var(--global-padding)))}
}

/* ---- TAB 7 · Plans ---- */
/* §1 HELP ME FIND A PLAN: sage pill with the white sparkle (358:2767) */
.sh-plans .pl-intro .btn--sage{background-color:var(--sage);--sweep:var(--slate-green);color:var(--off-white)}
.pl-intro__cta img{filter:brightness(0) invert(1)}
/* §2 "Smart plans for Investors" on one line: the filter column is the frame's full 198 (no
   inner right padding) and a home-type label never wraps */
.pl__filters{padding-right:0}
.pl__rlabel{white-space:nowrap}
/* §3 Accessible Homes card: the photo fades into the terracotta on its left (712:7462 — the
   frame's gradient runs terracotta at the photo's left edge to clear at 23%); the photo is the
   frame's 635 wide, so text 331 + 94 + photo 635 = 1108 */
.pl-info__photo{position:relative;flex-basis:635px;width:635px}
.pl-info__photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,var(--terracotta) 0.6%,rgba(159,95,59,0) 23.4%)}
@media (max-width:1200px){ .pl-info__photo{flex-basis:48%;width:48%} }
@media (max-width:1023px){
  .pl-info__photo{flex:none;width:100%}
  .pl-info__photo::after{background:linear-gradient(to bottom,var(--terracotta) 0.6%,rgba(159,95,59,0) 23.4%)}
}
/* §4 the map block: TRY IT is the sage pill; the load-more chevron under the run goes (the
   remaining plans reveal as the visitor reaches the end of the list — inner.js) */
.pl-map .ac-map__go.btn--sage{background-color:var(--sage);--sweep:var(--slate-green);color:var(--off-white)}
.pl__more{display:none !important}

/* ---- TAB 8 · Pricing ---- */
/* §1 §3 §4 the text & image buttons are pills, not the column's full width */
.ti__text .btn{align-self:flex-start}
/* §2 Square metre rates: the frame's 929-tall section, the photo filling the whole right half
   (it was a 50%-of-section box after a 680-capped text column, leaving slate-green to its
   right on wide screens, and its 929 min-height stretched the section past the frame) */
@media (min-width:1024px){
  .is--slate-green{min-height:929px}
  .is--slate-green .is__photo{flex:1 1 50%;position:relative;min-height:0}
  .is--slate-green .is__photo img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover;object-position:50% 40%}
}

/* ---- TAB 9 · Subdivide & Build ---- */
/* §1 the hero text starts on the grid's left margin (the logo edge) — no inner 64 + the -4 nudge */
@media (min-width:1024px){
  .sd-hero__text{margin-left:0;padding-left:var(--global-padding)} /* the inner is the 1440/1600 grid; its gutter is the text's left edge */
}
/* §2 "We handle the paperwork." holds two lines on every desktop width: the title box is the
   frame's 362 (a 426 card less 32 padding) even when the 1600 grid makes the card wider */
.kd-cards--flex .kd-card__title{max-width:362px;margin-left:auto;margin-right:auto}
/* §3 LOAD MORE STORIES centred under the cards (a link when there is nothing more to reveal) */
.sd-stories__more{align-self:center;margin:0 auto;display:inline-flex}
/* §4 Subdivision Videos: 2 full cards + the third cut by the viewport at EVERY desktop width
   (Figma 648:4830 — 587-wide cards, 32 apart, from x = 48, the third showing 154px), the strip
   starting on the grid margin and running to the screen edge, so it always scrolls */
@media (min-width:1024px){
  .sd-vids{container-type:inline-size}
  .sd-vids .hs{max-width:none}
  .sd-vids .hs__track{--r62-l:max(var(--global-padding),calc((100cqw - var(--maxw)) / 2 + var(--global-padding)));padding-left:var(--r62-l);padding-right:var(--global-padding);scroll-padding-left:var(--r62-l)}
  .sd-vids .hs__bar{padding-left:max(var(--global-padding),calc((100cqw - var(--maxw)) / 2 + var(--global-padding)));padding-right:max(var(--global-padding),calc((100cqw - var(--maxw)) / 2 + var(--global-padding)))}
  .sd-vid{--r62-w:calc((100cqw - max(var(--global-padding),calc((100cqw - var(--maxw)) / 2 + var(--global-padding))) - 64px) / 2.2624);flex-basis:var(--r62-w);width:var(--r62-w);height:auto;aspect-ratio:587 / 488}
}

/* ---- TAB 10 · The Sentinel Foundation (Figma 943:22328) ---- */
/* §1 the hero: cream, the 408 text column, the square-cornered 865 × 479 video thumbnail — the
   Parenting Place hero rules already give the split hero its video variant; here the frame's
   50px top inset (the header height) and the 96 text padding */
.sh-foundation .sy-hero--split{background:var(--cream)}
@media (min-width:1024px){ .sh-foundation .sy-hero__inner{padding-top:20px;padding-bottom:90px} } /* the frame: video at y 140 under the 120 header, 709 tall */
.sh-foundation .sy-hero__body p+p{margin-top:10px}
/* §2 the partner-logo banner: an 86px white band, the logos in one continuous row (96 apart,
   their Figma pixel sizes), grey at rest; a logo with a colour file shows it on hover */
.sy-logos{overflow:hidden;background:var(--white);height:86px;display:flex;align-items:center}
.sy-logos__track{display:flex;width:max-content;will-change:transform;animation:sy-marquee 60s linear infinite}
.sy-logos:hover .sy-logos__track{animation-play-state:paused}
.sy-logos__row{list-style:none;margin:0;padding:0 48px 0 48px;display:flex;align-items:center;gap:96px;flex:none}
.sy-logo{position:relative;flex:none;display:flex;align-items:center;justify-content:center;min-width:48px}
.sy-logo img{display:block;width:auto;max-height:60px;filter:grayscale(1);transition:opacity .35s var(--ease-fade),filter .35s var(--ease-fade)}
.sy-logo__colour{position:absolute;inset:0;margin:auto;opacity:0;filter:none}
.sy-logo:hover .sy-logo__grey,.sy-logo:focus-within .sy-logo__grey{filter:none}
.sy-logo--pair:hover .sy-logo__grey{opacity:0}
.sy-logo--pair:hover .sy-logo__colour{opacity:1}
@keyframes sy-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .sy-logos{overflow-x:auto}
  .sy-logos__track{animation:none;will-change:auto}
  .sy-logos__row[aria-hidden]{display:none}
}
/* §3 Why We Created the Foundation: Colour/Warm Sand #EFE8D6, the 624-wide text column, the
   624 × 346 photo, "Our Partners" (H4, 18/1.3) over a 2 × 240 grid of sage hearts */
.sh-foundation .sy-cols{background:var(--warm-sand)}
.sh-foundation .sy-cols__text{max-width:624px}
.sh-foundation .sy-ticks__list{grid-template-columns:repeat(2,240px);column-gap:16px;row-gap:16px}
/* §4 no captioned photo (default cleared); §5 Our Charity Homes = the Parenting Place block */
/* §6 Applications — 943:22880: cream, 128 above/below the 506 text column, 64 to the photo
   (865 × 466 at 1440, then its caption 10 below: 14px mid-grey, "Pictured:" bold) */
.sy-apps{background:var(--cream);padding:0 var(--global-padding)}
.sy-apps__inner{max-width:var(--maxw);margin:0 auto;display:flex;gap:64px;align-items:center}
.sy-apps__text{flex:0 0 506px;width:506px;padding:128px 0;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.sy-apps__text .kd__title.h1{letter-spacing:-.59px}
.sy-apps__body{color:var(--charcoal)}
.sy-apps__body p{margin:0 0 13px}
.sy-apps__body p:last-child{margin:0}
.sy-apps__fig{flex:1 1 0;min-width:0;margin:0;display:flex;flex-direction:column;gap:10px}
.sy-apps__fig img{width:100%;aspect-ratio:865 / 466;object-fit:cover;display:block}
.sy-apps__fig figcaption{margin:0;color:var(--mid-grey)}
.sy-apps__fig figcaption strong{font-weight:700}
@media (max-width:1200px){
  .sy-apps__text{flex-basis:44%;width:44%;padding:96px 0}
}
@media (max-width:1023px){
  .sy-logos{height:72px}
  .sy-logos__row{gap:56px;padding:0 24px}
  .sy-logo img{max-height:44px}
  .sh-foundation .sy-ticks__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sy-apps{padding:64px 24px}
  .sy-apps__inner{flex-direction:column;gap:32px;align-items:stretch}
  .sy-apps__text{flex:none;width:100%;padding:0}
  .sy-apps__text .kd__title.h1{font-size:40px}
}

/* ---- TAB 12 · Our Process (Figma 801:11713) ---- */
/* §1 §3–§6 the dotted line runs through the centre of every step's photo: the five steps take
   the frame's own heights and photo/text offsets (Process Step 803:14776 …79: 529.5 / 524.2 /
   561 / 524.2 / 536 tall, photo at 0 / 0 / 15.7 / 0 / 8.7, text at 80.8 / 90.1 / 0 / 108.6 / 0),
   the block is the frame's 1344 at every desktop width, and the line sits where the frame
   draws it — x 225.8, 307.7 below the block's top — instead of floating with the copy. */
@media (min-width:1201px){
  .sh-process .proc__steps{max-width:1344px;margin:0 auto;padding-bottom:88.7px} /* 42 to the frame's end + 46 to the circle top */
  .sh-process .proc-step{align-items:flex-start;padding-bottom:0}
  .sh-process .proc-step:nth-of-type(1){height:529.52px}
  .sh-process .proc-step:nth-of-type(2){height:524.18px}
  .sh-process .proc-step:nth-of-type(3){height:561px}
  .sh-process .proc-step:nth-of-type(4){height:524.18px}
  .sh-process .proc-step:nth-of-type(5){height:536px}
  .sh-process .proc-step:nth-of-type(3) .proc-step__media{margin-top:15.74px}
  .sh-process .proc-step:nth-of-type(5) .proc-step__media{margin-top:8.74px}
  .sh-process .proc-step:nth-of-type(1) .proc-step__text{margin-top:80.76px}
  .sh-process .proc-step:nth-of-type(2) .proc-step__text{margin-top:90.09px}
  .sh-process .proc-step:nth-of-type(4) .proc-step__text{margin-top:108.59px}
  .sh-process .proc-step__media{margin-left:3.64px}
  .sh-process .proc-step--r .proc-step__media{margin-left:0;margin-right:0}
  .sh-process .proc-step--l .proc-step__text{margin-left:-3.6px}  /* photo 394.2 + 24 gap = the frame's 418.2 */
  .sh-process .proc__line{top:307.7px;bottom:auto;left:calc(50% - 446.16px) !important} /* 225.84 on the 1344 block (the partial's inline left is the generic end-anchor) */
}
/* §2 the travelling dot stays off Step One's photo: it appears once the line has left the
   picture (inner.js hides it for the first 6% of the path) */
.sh-process .proc__dot.is-hidden{opacity:0}
.proc__dot{transition:opacity .3s var(--ease-fade)}
/* §7 Celebration: the copy + BOOK NOW centred in the 433 circle (887:16713 — circle top −25.76,
   the 366-wide text column) at every desktop width */
@media (min-width:1024px){
  .sh-process .proc__final-circle{top:-25.76px}
  .sh-process .proc__final-text{width:433px;min-height:433px;margin-top:-25.76px;padding:0 33.5px;justify-content:center}
}
/* §8 the background is the frame's 946-tall cover crop of the square photo (its middle band:
   the "welcome home" card and glasses in, the counter's dark front out) */
@media (min-width:1024px){
  .sh-process .proc__final{min-height:946px}
  .sh-process .proc__final-bg{object-position:50% 50%}
}
/* §9 the form section: CONTACT DETAILS centred under the copy, the card's outer padding +5 (16 → 21) */
.sf__cta{align-self:center} /* every form-section frame (Accessible, Subdivide, KDR, Our Process) centres the link under the copy */
.sh-process .sf__form{padding:21px}

/* ---- TAB 13 · Our History ---- */
/* §1 the header shade fades out smoothly (a 240px ease-out veil instead of the 96px hard band) */
@media (min-width:1024px){
  .sh-paper .hist__panel[data-hist-panel="0"]::before{height:240px;
    background:linear-gradient(180deg,rgba(0,0,0,.26) 0,rgba(0,0,0,.2) 14%,rgba(0,0,0,.13) 32%,rgba(0,0,0,.07) 52%,rgba(0,0,0,.025) 76%,rgba(0,0,0,0) 100%)}
}
/* §2 2015 → 2016–2018 (Figma comment: "this section animates from the previous, with new circles
   popping up and the text changing, rather than scrolling down to it"): inner.js wraps the two
   map panels in a runner twice their height; both stick at the top while the runner scrolls, the
   2015 copy fades out, the 2016–2018 copy fades in and the new amber circles pop on the same map. */
.hist.sh-hist-merged{overflow:clip} /* `hidden` would make .hist the sticky scrollport and stop the panels holding */
.hist__merge{position:relative}
.hist__merge>.hist__panel{position:sticky;top:0}
.hist__merge>.hist__panel--merge-b{margin-top:calc(-837px * var(--hist-s));background:transparent;pointer-events:none}
.hist__merge>.hist__panel--merge-b .hist__bg,.hist__merge>.hist__panel--merge-b .hist__nz,.hist__merge>.hist__panel--merge-b .hist__pin.is-dup{display:none}
.hist__merge>.hist__panel--merge-b .hist__text{opacity:0}
.hist__merge .hist__text{transition:opacity .4s var(--ease-fade),transform .5s var(--ease-fade);will-change:opacity}
.hist__merge>.hist__panel--merge-b .hist__pin:not(.is-dup){transform:scale(0);transition:transform .55s var(--ease-spring),opacity .3s var(--ease-fade);opacity:0}
.hist__merge>.hist__panel--merge-b .hist__pin.is-pop{transform:scale(1);opacity:1}
.hist__merge>.hist__panel--merge-a.is-gone .hist__text{opacity:0;transform:translateY(-12px)}
.hist__merge>.hist__panel--merge-b.is-here .hist__text{opacity:1}

/* ---- TAB 15 · Knockdown & Rebuild ---- */
/* §1 the BEFORE polaroid stands straight: the artwork (before.png) is drawn leaning 4° and the
   frame turns it back upright — Figma 526:7321: a 301.44 × 321.71 box at (24.2, 248) of the 865
   comparison, the picture inside rotated 4.03° / skewed −0.54° and sized to the box (Figma's
   hypot() fit: 92.2% × 94.2%). The BEFORE label then sits in the polaroid's foot (4.44% / 504)
   and AFTER under the big photo's right edge, as drawn. */
.kd__before{margin:28.67% 0 0 2.8%;width:34.85%;aspect-ratio:301.44 / 321.71;overflow:visible;transform:none;box-shadow:none;display:flex;align-items:center;justify-content:center}
.kd__before img{width:92.2%;height:94.2%;object-fit:contain;object-position:50% 50%;transform:rotate(4.03deg) skewX(-.54deg)}

/* ---- TAB 14 · Our Design Approach (Figma 931:21051) ---- */
/* §1 §3 the five photos are square-cornered as drawn */
.da__photo{border-radius:0}
/* §1 §3 the lead sentence is bold; the rest is its own paragraph (13px apart, the body rhythm) */
.da__body strong{font-weight:600;color:var(--charcoal)}
/* §2 Personality & Functionality: the copy holds two lines (the frame's 948 column), and the
   band is the frame's cream → clear gradient (#F7F3EA at the top to #F7F3EA 0% at the foot) over
   the off-white page ground */
.da-pf{background:linear-gradient(180deg,rgba(247,243,234,0) 0%,var(--cream) 100%),var(--warm-sand)} /* the frame renders warm sand at the heading fading to cream at the foot (Figma pixels 240,233,215 → 247,243,234) */
.da-pf .ic{background:transparent}
.da-pf__head{max-width:calc(948px + 2 * var(--global-padding))} /* the copy column is the frame's 948 (943:21604) — the head's gutters sat inside it and forced a third line */
.da-pf__copy{max-width:948px}
/* §2 The Sentinel difference: the photo keeps the frame's scale at every width — a square picture
   119.89% of the section's height, its right edge on the section's (Figma 526:7486 places the
   984 × 984 image at 32.53% / −14.51% on 1440); as a 68.35%-wide cover box it zoomed and
   cropped on wider screens */
@media (min-width:1024px){
  .kd-diff__bg img{left:auto;right:-0.83%;width:auto;aspect-ratio:1 / 1;height:119.89%;top:-14.51%;object-fit:cover}
}
/* §3 §4 the 4-step process: the frame's step heights and offsets (543:7613 …7652: 529.5 / 524.2 /
   529.5 / 513.2 tall, photos at 0, text at 71.8 / 69.1 / 71.8 / 69.1), the 1344 block, the line
   at x 179 / y 344.24 of the block — so it starts at Step One's photo and runs through the centre
   of every photo */
@media (min-width:1201px){
  .sh-kdr .proc__steps{max-width:1344px;margin:0 auto}
  .sh-kdr .proc-step{align-items:flex-start;padding-bottom:0}
  .sh-kdr .proc-step:nth-of-type(1),.sh-kdr .proc-step:nth-of-type(3){height:529.52px}
  .sh-kdr .proc-step:nth-of-type(2){height:524.18px}
  .sh-kdr .proc-step:nth-of-type(4){height:513.18px}
  .sh-kdr .proc-step:nth-of-type(1) .proc-step__text,.sh-kdr .proc-step:nth-of-type(3) .proc-step__text{margin-top:71.76px}
  .sh-kdr .proc-step:nth-of-type(2) .proc-step__text,.sh-kdr .proc-step:nth-of-type(4) .proc-step__text{margin-top:69.09px}
  .sh-kdr .proc-step__media{margin-left:3.64px}
  .sh-kdr .proc-step--r .proc-step__media{margin-left:0}
  .sh-kdr .proc-step--l .proc-step__text{margin-left:-3.6px}
  .sh-kdr .proc__line{top:344.24px;bottom:auto;left:calc(50% - 493px) !important}
}
.sh-kdr .proc__dot.is-hidden{opacity:0}
/* §5 Celebration (543:7817): the copy + FREE SITE CHECKS centred in the 433 circle (top −46) */
@media (min-width:1024px){
  .sh-kdr .proc__final-text{width:433px;min-height:433px;margin-top:-46px;padding:0 33.5px;justify-content:center}
}
/* §6 the background's lower band is out of frame: the frame's centred cover crop of the square photo */
@media (min-width:1024px){
  .sh-kdr .proc__final-bg{object-position:50% 50%}
}
/* §7 the form card's outer padding +5 (16 → 21); CONTACT DETAILS centred (global .sf__cta rule above) */
.sh-kdr .sf__form{padding:21px}

/* ---- TAB 16 · House & Land Packages (Figma 483:4806) ---- */
/* §1 the page ground is Colour/Cream #F7F3EA */
.hl-intro,.hl{background:var(--cream)}
/* §2 the filter column as drawn (483:5043): FILTER BY AREA → the first option 10px, the options
   34 apart, RESET FILTERS 10px under the last */
.hl__radios{margin-top:0}
.hl__reset{margin-top:0}
/* §3 the FAQ photo shows whole at every desktop width — the band grows with the picture's
   aspect (1668 × 943) instead of cropping its top on wide screens; the blend/fade is untouched */
@media (min-width:1024px){
  .sh-hl .faq{min-height:max(876px,calc(100vw * 943 / 1668))}
  .sh-hl .faq__bg img{object-position:50% 0}
}

/* ---- TAB 17 · House & Land single (Figma 743:9987) ---- */
/* §1 cream page ground; the HOUSE & LAND PACKAGE tag is the off-white pill (772:9079: 4 × 8 padding,
   4px radius, 12/1.2 semibold, 1.44 tracking); DOWNLOAD BROCHURE is the sage pill filling the
   column beside SAVE (795:8339) */
.hld{background:var(--cream)}
.hld__tag{background:var(--off-white);padding:4px 8px;border-radius:4px;letter-spacing:1.44px;line-height:1.2}
.hld__brochure.btn--sage{background-color:var(--sage);--sweep:var(--slate-green);color:#f7f3ea}
.hld__brochure.btn--sage img{filter:brightness(0) invert(1)}
/* §2 the consultant cards: EMAIL and the phone number stay on one row (772:9743, 12 apart) */
.person__links{flex-wrap:nowrap;gap:12px}
.person__links .link-btn{white-space:nowrap}
/* §3 What's included: charcoal bullets, no heading (772:9425 — 27px rows) */
.hld__list--bullets{padding-left:0}
.hld__list--bullets li{gap:0;line-height:27px}
.hld__list--bullets li::before{content:"\2022";flex:none;width:14px;color:var(--charcoal);font-size:14px}
/* §4 the video (641 × 400, 16 radius) and the map (641 × 350) under the floor plan; the live
   map takes the same frame */
.hld__map--live{background:var(--warm-sand);border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.hld__map--live iframe{display:block;width:100%;height:350px;border:0}

/* ---- TAB 18 · Building vs Buying (Figma 987:26502) ---- */
/* §1 §3 the two eyebrows in Colour/Slate Green #637468, 16px above their headings (987:26507 / 26535) */
.bvb .kd__head .kd__eyebrow,.bvb-wm .kd__head .kd__eyebrow{color:var(--slate-green)}
.bvb .kd__head,.bvb-wm .kd__head{gap:16px}
/* §2 the table header is the frame's 64px (1043:35179: a 4.5px band around 55px cells) */
.cmp__head{padding:4.5px 16px}
.cmp__head .cmp__cell{padding:16px 12px}

/* ---- TAB 19 · Gallery / Award single (Figma 1128:36562) ---- */
/* §1 a long decorative title wraps AND pushes the content down instead of riding over it: the
   title is in flow (still 71px up over the photo), the content follows it at the frame's
   distance (a one-line title keeps the frame's geometry exactly: title ends 29 below the
   photo, content 96 below the photo) */
@media (min-width:1024px){
  .gd__deco{position:relative;top:auto;left:auto;margin:-71px 0 0;padding:0 var(--global-padding);max-width:none;width:100%;box-sizing:border-box}
  .gd__inner{padding-top:67px}
}
/* §2 the content's right edge is the grid's (the CONTACT button's) at every desktop width — the
   photo column grows past the frame's 808 on the 1600 grid */
.gd__col{max-width:none}

/* ---- TAB 20 · Display Home detail ---- */
/* §2 the Photo Gallery grid spans the grid's margins (logo → CONTACT) at every desktop width,
   not the frame's fixed 1344 */
.dd__gallery-grid,.dd__gallery-head{max-width:calc(var(--maxw) - 2 * var(--global-padding))} /* 1344 on the 1440 grid, 1504 on the 1600 grid — the logo/CONTACT edges */