/* ============================================================
   HOME CONCEPTS A / B / C  —  /home-concept-a  /home-concept-b  /home-concept-c
   2026-10-14 MDT. Review pages for the next homepage (noindex, unlinked).
   Loaded only by the three concept pages; estate.css is untouched.

   What is ported vs new (declared):
   - Tile hover zoom is TurnerLee home (Content/Pages/en/home.html md5 2862811e…,
     .home2-col__image L312-360 + hover L520-545): scale 1 -> 1.10 over 1400ms
     cubic-bezier(.22,.61,.36,1), filter over 500ms. TL's rest dimming
     (saturate .9 / brightness .85 + vignette) is NOT ported — the PDF mosaics are
     bright. The image grows inside its own clipped frame; the tile never moves
     (Craig: no hover lift, motion sickness).
   - The three hover treatments are Craig's two ideas, new here: SOFTEN (blur +
     ivory veil + caption), OLIVE and CHARCOAL (photo fades to a solid ground with
     clean caption). section[data-hover] picks one.
   - Everything else reuses estate.css: .ph-img/.lq LQIP, .button*, .quote, .stars,
     .eyebrow, tokens. No hex values below — tokens only.
   ============================================================ */

/* --- the stage: fills the first screen under the fixed solid header --- */
.hc-hero{
  --hc-gap:6px;
  position:relative;
  margin-top:var(--hc-hdr,88px);
  /* min-height, not height: the stage fills the first screen, and if a short laptop screen
     cannot hold the H1 block the rows grow to fit it instead of letting the type overflow
     up under the header (measured 2026-10-14 at 1280x720 before this: h1 top 80 vs tile top 89). */
  min-height:max(560px, min(calc(100svh - var(--hc-hdr,88px)), 1100px));
  padding:var(--hc-gap);
  background:var(--PageBgColor);
  display:grid; gap:var(--hc-gap);
}
/* Concept A — PDF layout A: big left, right column = photo / note / photo */
.hc-hero[data-concept="a"]{
  grid-template-columns:minmax(0,2.25fr) minmax(0,1fr);
  /* the note row is auto: an fr row holding text scales EVERY fr row when the text needs more
     room, which grew the whole stage past the fold at 1280x720 (measured 2026-10-14) */
  grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:"main t1" "main note" "main t2";
}
/* Concept B — PDF layout B: big left, narrow note column, right column of two */
.hc-hero[data-concept="b"]{
  /* PDF B gives the big tile ~69% of the row; 2.6fr keeps the H1 to 4 lines */
  grid-template-columns:minmax(0,2.6fr) minmax(0,.62fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"main note t1" "main note t2";
}
/* Concept C — PDF layout C: big left, wide top-right (film loop), tall narrow + note over photo */
.hc-hero[data-concept="c"]{
  grid-template-columns:minmax(0,2fr) minmax(0,.44fr) minmax(0,.7fr);
  grid-template-rows:minmax(0,1fr) auto minmax(0,.72fr);
  grid-template-areas:"main t1 t1" "main t2 note" "main t2 t3";
}
.hc-main{ grid-area:main; display:flex; flex-direction:column; justify-content:flex-end; }
.hc-a1{ grid-area:t1; } .hc-a2{ grid-area:t2; } .hc-a3{ grid-area:t3; }
.hc-note{ grid-area:note; }

/* --- every photo cell: the frame clips, the image fills --- */
.hc-cell{ position:relative; overflow:hidden; min-height:0; background:var(--color5); }
.hc-cell > .ph-img{ position:absolute; inset:0; height:100%; }
.hc-cell > .ph-img img,.hc-cell > .ph-img video{ width:100%; height:100%; object-fit:cover; display:block; }
.hc-cell video{ position:relative; z-index:1; }

/* --- the H1 tile --- */
/* the LCP photo paints the moment it decodes (the .55s LQIP fade held LCP back ~0.8s, audit 2026-10-14) */
.lqip .hc-main .ph-img.lq img{ opacity:1; transition:none; }
/* KEN BURNS — Craig 2026-10-15: "a subtle Ken Burns grow on the hero image behind the h1", then "a little
   stronger. we don't want an initial zoom ... if there is a kenBurns." So the reveals.css settle (hc-s108, the
   1.08 -> 1 shrink on load, reveals.css:48-49) is REPLACED here, not chained: the photo starts at 1 on first
   paint and grows 1 -> 1.10 over 22s, once, then holds (no loop: motion-sickness rule). The LQIP blur
   (::before) runs the same keyframe so a photo that decodes mid-grow never jumps against its placeholder.
   (0,4,2)/(0,5,2) beat reveals' (0,4,1)/(0,5,1). The frame never takes it: photo-edit.js measures .ph-img. */
@keyframes hc-kenburns{ from{ transform:scale(1); } to{ transform:scale(1.10); } }
/* the blur layer rests at scale(1.12) to hide its soft edges (estate.css .ph-img.lq::before) — same grow, x1.12 */
@keyframes hc-kenburns-lq{ from{ transform:scale(1.12); } to{ transform:scale(1.232); } }
@media screen and (prefers-reduced-motion:no-preference){
  html .hc-hero .hc-main .ph-img img,
  html.lqip .hc-hero .hc-main .ph-img img{ transform-origin:50% 45%; animation:hc-kenburns 22s cubic-bezier(.33,0,.4,1) both; }
  html.lqip .hc-hero .hc-main .ph-img.lq::before{ transform-origin:50% 45%; animation:hc-kenburns-lq 22s cubic-bezier(.33,0,.4,1) both; }
}
/* C (the homepage): Craig 2026-10-14 — "keep the shadow/dark overlay near the bottom left of the image but
   fade away by the time the image reaches the chimneys", so the sunshine stays bright. Desktop only (1200+):
   a light corner fade on the photo plus a soft halo that rides behind the text block wherever it lands.
   Below 1200 the type covers most of the tile, so the full scrim above stays (the sun still shows above it). */
@media (min-width:1200px){
  .hc-hero[data-concept="c"] .hc-main .hc-scrim{
    background:radial-gradient(120% 95% at 0% 100%,
      color-mix(in srgb,var(--color3) 62%,transparent) 0%,
      color-mix(in srgb,var(--color3) 34%,transparent) 42%,
      transparent 70%);
  }
  .hc-hero[data-concept="c"] .hc-main .hc-copy::before{
    content:""; position:absolute; z-index:-1; pointer-events:none;
    left:-8%; right:-6%; top:-28%; bottom:-6%;
    background:radial-gradient(farthest-side at 30% 60%,
      color-mix(in srgb,var(--color3) 78%,transparent) 0%,
      color-mix(in srgb,var(--color3) 62%,transparent) 50%,
      color-mix(in srgb,var(--color3) 24%,transparent) 80%,
      transparent 100%);
  }
  /* a crisp edge under the wide glow: the H1 crosses the white chimneys */
  .hc-hero[data-concept="c"] .hc-main h1{
    text-shadow:0 1px 2px color-mix(in srgb,var(--color3) 55%,transparent),
                0 2px 18px color-mix(in srgb,var(--color3) 60%,transparent);
  }
}
/* laptops (1200-1399): the H1 climbs closer to the sun — a touch more halo (measured 2.97:1 at 1280x720 before) */
@media (min-width:1200px) and (max-width:1399.98px){
  .hc-hero[data-concept="c"] .hc-main .hc-copy::before{
    background:radial-gradient(farthest-side at 30% 60%,
      color-mix(in srgb,var(--color3) 84%,transparent) 0%,
      color-mix(in srgb,var(--color3) 70%,transparent) 50%,
      color-mix(in srgb,var(--color3) 28%,transparent) 80%,
      transparent 100%);
  }
}
/* B: the cloud bank sits where the H1 lands on short screens (p5 2.79:1 at 1280x720) — start the
   darkening at the top of the tile, not a third of the way down */
.hc-hero[data-concept="b"] .hc-main .hc-scrim{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--color3) 30%,transparent) 0%,
      color-mix(in srgb,var(--color3) 58%,transparent) 32%,
      color-mix(in srgb,var(--color3) 86%,transparent) 100%),
    linear-gradient(100deg,
      color-mix(in srgb,var(--color3) 50%,transparent) 0%,
      color-mix(in srgb,var(--color3) 24%,transparent) 60%,
      transparent 100%);
}
.hc-main .hc-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  /* weighted toward the type: down the tile, and toward the left edge where the H1 sits
     (same idea as estate.css .hero .scrim, which runs 66% -> 22% at 100deg) */
  background:
    linear-gradient(180deg,
      transparent 8%,
      color-mix(in srgb,var(--color3) 46%,transparent) 40%,
      color-mix(in srgb,var(--color3) 82%,transparent) 100%),
    linear-gradient(100deg,
      color-mix(in srgb,var(--color3) 48%,transparent) 0%,
      color-mix(in srgb,var(--color3) 20%,transparent) 60%,
      transparent 100%);
}
/* The heavier hand C needed for white architecture, now on all three: at 1280x720 the H1 rises into
   A's sun and B's cloud bank and measured 1.1-1.9:1 (audit 2026-10-14). (0,3,0) beats the base rule. */
.hc-hero .hc-main .hc-scrim{
  background:
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb,var(--color3) 56%,transparent) 34%,
      color-mix(in srgb,var(--color3) 86%,transparent) 100%),
    linear-gradient(100deg,
      color-mix(in srgb,var(--color3) 58%,transparent) 0%,
      color-mix(in srgb,var(--color3) 26%,transparent) 60%,
      transparent 100%);
}
.hc-main .hc-copy{
  position:relative; z-index:3;
  padding:var(--sp-lg) clamp(24px,4vw,64px) clamp(28px,4.4vh,56px);
  color:var(--reverse1);
}
/* Caleb (core30-caleb-log.md:205): the homepage H1 must be the VISUALLY biggest text on the page.
   Base h1 is clamp(2.25rem,1.5rem + 2.4vw,4rem) = 59px at 1440, smaller than the stat numbers (61px)
   and the band's p.h1 ties it — so the hero H1 steps up one size here. */
.hc-main h1{ font-size:clamp(2.75rem,1.7rem + 2.9vw,4.75rem); color:var(--reverse1); margin:0 0 var(--sp-sm); max-width:24ch; text-wrap:balance;
  /* TL .home2-col__label carries 0 2px 12px rgba(0,0,0,.4); same lift, in the house charcoal */
  text-shadow:0 2px 18px color-mix(in srgb,var(--color3) 55%,transparent); }
.hc-proof{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--LabelFont); font-size:.75rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--reverse1); text-decoration:none; margin:0 0 var(--sp-sm);
}
.hc-proof .stars{ color:var(--colorGold); font-size:.875rem; letter-spacing:.24em; }
.hc-proof b{ font-weight:700; }
.hc-proof:hover,.hc-proof:focus-visible{ color:var(--colorGoldSoft); }
.hc-main .button-row{ margin-top:var(--sp-sm); }

/* --- the note (cream testimonial) --- */
.hc-note{
  background:var(--color5); color:var(--color3);
  display:flex; flex-direction:column; justify-content:center; gap:12px;
  padding:clamp(18px,2.2vw,36px);
}
.hc-note .stars{ margin:0; }
.hc-note blockquote{
  margin:0; font-family:var(--font1Family); font-weight:300;
  font-size:clamp(1rem,.86rem + .42vw,1.3125rem); line-height:1.5;
}
.hc-note cite{
  font-family:var(--LabelFont); font-style:normal; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; color:var(--text-muted);
}
.hc-note .hc-note-more{
  font-family:var(--LabelFont); font-size:.6875rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--text-accent); text-decoration:none; align-self:flex-start;
}
.hc-note .hc-note-more:hover,.hc-note .hc-note-more:focus-visible{ color:var(--color3); }
.hc-note .ornament{ margin:0; }
/* B's note column is tall and narrow: center it and let it breathe */
.hc-hero[data-concept="b"] .hc-note{ text-align:center; align-items:center; }
.hc-hero[data-concept="b"] .hc-note .hc-note-more{ align-self:center; }

/* --- linked photo tiles + the three hover treatments --- */
a.hc-tile{ display:block; color:inherit; text-decoration:none; container:hctile / size; }
/* captions size to their own tile: one uppercase word ("CELEBRATIONS") overflowed C's narrow column
   and a short tile could not hold three lines (audit 2026-10-14) */
/* (0,2,0): these sit above the base .hc-cap-k rule in the sheet, so they need the extra class to win */
@container hctile (max-width:300px){
  .hc-tile .hc-cap-k{ font-size:clamp(.9375rem,7.4cqi,1.625rem); letter-spacing:.1em; }
  .hc-tile .hc-cap-s{ display:none; }
}
@container hctile (max-height:220px){ .hc-tile .hc-cap-s{ display:none; } }
.hc-tile .ph-img img,.hc-tile .ph-img video,
.lqip .hc-tile .ph-img.lq img{
  transform-origin:center center;
  transform:scale(var(--ph-zoom,1));
  /* opacity is restated here on purpose: .lqip .ph-img.lq img owns the LQIP fade,
     and a transition shorthand in a stronger rule would otherwise wipe it. */
  transition:opacity .55s ease,
             transform 1400ms cubic-bezier(.22,.61,.36,1),
             filter 500ms cubic-bezier(.22,.61,.36,1);
}
.hc-tile:hover .ph-img img,.hc-tile:focus-visible .ph-img img,
.hc-tile:hover .ph-img video,.hc-tile:focus-visible .ph-img video,
.lqip .hc-tile:hover .ph-img.lq img,.lqip .hc-tile:focus-visible .ph-img.lq img{
  transform:scale(calc(var(--ph-zoom,1) * 1.10));
}
.hc-veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .6s cubic-bezier(.22,.61,.36,1);
}
.hc-cap{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px; padding:var(--sp-sm);
  opacity:0; transition:opacity .5s ease .08s;
}
.hc-cap-k{
  font-family:var(--font1Family); font-weight:300; text-transform:uppercase;
  letter-spacing:.14em; font-size:clamp(1.125rem,.95rem + .6vw,1.625rem); line-height:1.2;
}
.hc-cap-s{ font-family:var(--font3Family); font-size:.9375rem; line-height:1.5; max-width:30ch; }
.hc-cap-go{
  font-family:var(--LabelFont); font-size:.6875rem; text-transform:uppercase; letter-spacing:.2em;
  display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  padding-bottom:4px; border-bottom:var(--BorderBrandWidth) solid currentColor;
}
.hc-tile:hover .hc-veil,.hc-tile:focus-visible .hc-veil,
.hc-tile:hover .hc-cap,.hc-tile:focus-visible .hc-cap{ opacity:1; }

/* SOFTEN — the photo blurs and goes quiet under an ivory veil; charcoal caption */
/* 68%: at 46% the caption measured 3.5:1 over dark photos (WCAG AA needs 4.5:1), audit 2026-10-14 */
.hc-hero[data-hover="soften"] .hc-veil{ background:color-mix(in srgb,var(--PageBgColor) 68%,transparent); }
.hc-hero[data-hover="soften"] .hc-cap{ color:var(--color3); }
.hc-hero[data-hover="soften"] .hc-tile:hover .ph-img img,
.hc-hero[data-hover="soften"] .hc-tile:focus-visible .ph-img img,
.hc-hero[data-hover="soften"] .hc-tile:hover .ph-img video,
.hc-hero[data-hover="soften"] .hc-tile:focus-visible .ph-img video{ filter:blur(6px) saturate(.85); }
/* OLIVE — the photo gives way to a solid olive ground; reverse caption */
/* olive deepened 20% toward charcoal, solid: plain --color1 measured 3.9-4.5:1 under the ivory caption */
.hc-hero[data-hover="olive"] .hc-veil{ background:color-mix(in srgb,var(--color1) 80%,var(--color3)); }
.hc-hero[data-hover="olive"] .hc-cap{ color:var(--reverse1); }
/* CHARCOAL — same, on the house charcoal */
.hc-hero[data-hover="charcoal"] .hc-veil{ background:color-mix(in srgb,var(--color3) 92%,transparent); }
.hc-hero[data-hover="charcoal"] .hc-cap{ color:var(--reverse1); }
.hc-hero[data-hover="charcoal"] .hc-cap-go{ color:var(--colorGoldSoft); }

/* the ring is drawn on a top layer: an inset outline sat under .hc-veil/.hc-cap and never showed */
.hc-tile:focus-visible{ outline:none; }
.hc-tile:focus-visible::after{ content:""; position:absolute; inset:4px; z-index:4; border:2px solid var(--colorGold); pointer-events:none; }

/* Touch screens have no hover: keep a quiet caption on every tile instead */
@media (hover:none){
  /* (0,4,0) — beats every data-hover treatment above without !important */
  .hc-hero[data-hover] .hc-tile .hc-veil{ opacity:1; background:linear-gradient(180deg,transparent 20%,color-mix(in srgb,var(--color3) 72%,transparent) 58%,color-mix(in srgb,var(--color3) 92%,transparent) 100%); }
  .hc-hero[data-hover] .hc-tile .hc-cap{ opacity:1; justify-content:flex-end; align-items:flex-start; text-align:left; color:var(--reverse1); padding:var(--sp-xs); gap:4px;
    text-shadow:0 1px 10px color-mix(in srgb,var(--color3) 75%,transparent); }
  .hc-hero[data-hover] .hc-tile .hc-cap-s{ display:none; }
  .hc-hero[data-hover] .hc-tile .hc-cap-k{ font-size:1rem; }
  .hc-hero[data-hover] .hc-tile .hc-cap-go{ border-bottom:0; padding-bottom:0; color:var(--reverse1); }
  .hc-hero[data-hover] .hc-tile:hover .ph-img img,.hc-hero[data-hover] .hc-tile:hover .ph-img video{ filter:none; }
}
@media (prefers-reduced-motion:reduce){
  .hc-tile .ph-img img,.hc-tile .ph-img video,.lqip .hc-tile .ph-img.lq img,
  .hc-veil,.hc-cap,.hc-film-play img,.hc-film-play::after,.hc-film-btn{ transition:none; }
  .hc-tile:hover .ph-img img,.hc-tile:focus-visible .ph-img img,
  .lqip .hc-tile:hover .ph-img.lq img,.lqip .hc-tile:focus-visible .ph-img.lq img,
  .hc-tile:hover .ph-img video,.hc-tile:focus-visible .ph-img video{ transform:scale(var(--ph-zoom,1)); }
}

/* --- tablet + phone: the H1 tile leads full-width, the rest follow in two columns --- */
@media (max-width:991.98px){
  .hc-hero,
  .hc-hero[data-concept="a"],.hc-hero[data-concept="b"],.hc-hero[data-concept="c"]{
    height:auto; max-height:none; min-height:0;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:none; grid-auto-rows:auto;
    grid-template-areas:none;
  }
  .hc-main{ grid-area:auto; grid-column:1 / -1; min-height:max(520px, min(calc(100svh - var(--hc-hdr,88px) - 12px), 820px)); }
  .hc-a1,.hc-a2,.hc-a3{ grid-area:auto; aspect-ratio:4 / 5; }
  .hc-note{ grid-area:auto; grid-column:1 / -1; }
  .hc-hero[data-concept="c"] .hc-a1{ grid-column:1 / -1; aspect-ratio:16 / 9; }
  .hc-hero[data-concept="a"] .hc-a1{ order:1; } .hc-hero[data-concept="a"] .hc-a2{ order:2; } .hc-hero[data-concept="a"] .hc-note{ order:3; }
  .hc-hero[data-concept="b"] .hc-note{ order:3; }
}
@media (max-width:575.98px){
  .hc-main .hc-copy{ padding:var(--sp-md) 20px 28px; }
  .hc-main .button-row .button{ width:100%; }
}

/* ============================================================
   BELOW THE FOLD — the film, services, moments
   ============================================================ */
.hc-film-frame{
  position:relative; width:min(100%,1080px); margin:var(--sp-md) auto 0;
  aspect-ratio:16 / 9; background:var(--color3); overflow:hidden;
}
/* Craig 2026-10-14: "make the MOVIE 90% container width instead of 70%" */
@media (min-width:992px){ .hc-film-frame{ width:90%; } }
.hc-film-play{
  position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0; border:0;
  background:none; cursor:pointer; display:block; color:var(--reverse1);
}
.hc-film-play img{ width:100%; height:100%; object-fit:cover; display:block; transition:filter .5s ease; }
.hc-film-play::after{
  content:""; position:absolute; inset:0;
  background:color-mix(in srgb,var(--color3) 28%,transparent); transition:background .5s ease;
}
.hc-film-play:hover::after,.hc-film-play:focus-visible::after{ background:color-mix(in srgb,var(--color3) 14%,transparent); }
.hc-film-btn{
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(64px,7vw,96px); aspect-ratio:1; border-radius:50%;
  border:1px solid var(--colorGold); background:color-mix(in srgb,var(--color3) 40%,transparent);
  display:grid; place-items:center; transition:background .4s ease, border-color .4s ease;
}
.hc-film-btn svg{ width:34%; height:34%; margin-left:8%; fill:var(--reverse1); }
.hc-film-play:hover .hc-film-btn,.hc-film-play:focus-visible .hc-film-btn{ background:color-mix(in srgb,var(--colorGold) 85%,transparent); }
.hc-film-meta{
  position:absolute; z-index:2; left:0; right:0; bottom:0; padding:var(--sp-xs) var(--sp-sm);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-xs);
  font-family:var(--LabelFont); font-size:.6875rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--reverse1);
}
.hc-film-play:focus-visible{ outline:2px solid var(--colorGold); outline-offset:4px; }
.hc-film-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.hc-film-after{ display:flex; justify-content:center; margin-top:var(--sp-sm); }

/* services: six bordered editorial cards, text only */
.hc-svc .card-ed{ height:100%; }
.hc-svc .card-body{ display:flex; flex-direction:column; gap:10px; height:100%; }
.hc-svc .card-body p{ flex:1 1 auto; }

/* moments: three tall photographs */
.hc-moments .ph-img{ aspect-ratio:4 / 5; }

/* ============================================================
   REVIEW SWITCHER — temporary, concept pages only. Top-LEFT, just under the header, over the sky of
   the H1 photo: bottom-right covered "Watch the Film" at 1024x768, top-right covered C's caption at
   1280x720 (measured 2026-10-14). The H1 tile's type sits at its bottom, so this corner is empty.
   ============================================================ */
.hc-switch{
  position:fixed; left:12px; top:calc(var(--hc-hdr,88px) + 12px); z-index:90;
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px;
  padding:10px 14px; background:var(--PageBgColor);
  border:var(--BorderBrandWidth) solid var(--BorderBrandColor);
  font-family:var(--LabelFont); font-size:.6875rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--color3); max-width:calc(100vw - 28px);
}
.hc-switch-g{ display:flex; align-items:center; gap:6px; }
.hc-switch-l{ color:var(--text-muted); margin-right:2px; }
.hc-switch a,.hc-switch button{
  font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--color3);
  background:none; border:var(--BorderBrandWidth) solid transparent; padding:6px 9px; cursor:pointer;
  text-decoration:none; line-height:1;
}
.hc-switch a:hover,.hc-switch button:hover{ border-color:var(--BorderBrandColor); }
.hc-switch a[aria-current="page"],.hc-switch button[aria-pressed="true"]{
  background:var(--color3); color:var(--reverse1); border-color:var(--color3);
}
/* phones: in the page flow (after the content), never over the hero's buttons */
@media (max-width:991.98px){ .hc-switch{ position:static; max-width:none; margin:0; justify-content:center; border-width:var(--BorderBrandWidth) 0; } }

/* film intro: the live hero's lead line, on charcoal */
#film .lead{ color:var(--reverse1); margin-top:var(--sp-xs); }
/* Craig 2026-10-14: "this script font works best large" — his size, verbatim, and "possibly 0.7 opacity".
   Opacity goes through --script-op (the fade-in keyframe reads it too); .rev .script sets .41 at (0,2,0). */
.hc-film-script {
font-size: clamp(1.4rem,1.05rem + 4vw,4.1rem);
}
.rev .hc-film-script{ --script-op:.7; }
/* services: the H3 is the card's first, descriptive link — it reads as a heading, not a link */
.hc-svc h3 a{ color:inherit; text-decoration:none; }
.hc-svc h3 a:hover,.hc-svc h3 a:focus-visible{ color:var(--text-accent); }
/* map (Caleb: the GBP listing's map near the bottom) */
.hc-map-frame{ position:relative; aspect-ratio:16 / 9; background:var(--color5); border:var(--BorderBrandWidth) solid var(--BorderBrandColor); }
.hc-map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ============================================================
   PHONES + TABLETS: the hero shows the TALL sunset (real photo + outpainted sky/ground, Craig-approved
   2026-10-14) so the estate, vista, Grand Hall and sun all sit in the frame instead of a crop on the sun
   (client: "it's a photo of the sun on my phone"). The dark comes in slowly from below the vista, and the
   headline steps down on xs (Craig: "go smaller font for sure on responsive xs mobile").
   ============================================================ */
.hc-main .ph-img img{ object-position:var(--hc-op,50% 50%); }
@media (max-width:991.98px){
  .hc-main .ph-img img{ object-position:var(--hc-op-sm,50% 40%); }
  /* Craig 2026-10-14: "dont want dark fade covering entire image ... make sure the dark color is only behind
     the text". No photo-wide scrim on phones/tablets: one soft dark patch rides behind the text block only. */
  .hc-hero[data-concept] .hc-main .hc-scrim{ background:none; }
  .hc-hero .hc-main .hc-copy::before{
    content:""; position:absolute; z-index:-1; pointer-events:none;
    left:-6%; right:-6%; top:-10%; bottom:-4%;
    background:radial-gradient(farthest-side at 42% 58%,
      color-mix(in srgb,var(--color3) 78%,transparent) 0%,
      color-mix(in srgb,var(--color3) 64%,transparent) 55%,
      color-mix(in srgb,var(--color3) 22%,transparent) 85%,
      transparent 100%);
  }
}
@media (max-width:575.98px){
  /* Craig 2026-10-14: "much smaller text on responsive xs mobile" */
  .hc-hero .hc-main h1{ font-size:1.6rem; }
  /* Craig 2026-10-14: "on responsive xs mobile we should get rid of the google reviews in the hero so the text
     can go down closer to the buttons" — xs only; the cream review tile just below carries the rating */
  .hc-hero .hc-main .hc-proof{ display:none; }
}

/* IMAGE REVEALS moved to css/estate/reveals.css (2026-10-15), loaded on every Estate page by the template. */