/* Section rhythm and surfaces (spec §4.5): panels, tiles, chips, aqua feature band, Ink closing band. Loaded on every page after site.css. */

:root{
  /* Aqua tints for the feature band: Ink text must hold 7:1 on phones, which full-strength aqua (5.9:1) does not. */
  --aqua-wash:#C4E8EA;
  --aqua-soft:#9AD8DC;
  --ink-hi:#3D5457;
  --ink-deep:#1E2829;
}

.sec{padding:var(--space-7) 0}
.sec.tight{padding:var(--space-6) 0}
.sec + .sec{padding-top:0}

.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--white);font-size:var(--text-small);font-weight:600;color:var(--charcoal)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--charcoal)}
.center-head{text-align:center}
.center-head h2{max-width:18ch;margin-inline:auto}
.center-head .badge{margin-bottom:var(--space-4)}
.center-head .sub{margin:var(--space-3) auto 0;max-width:44ch}
.center-head + *{margin-top:var(--space-6)}
.kicker{font-size:var(--text-small);font-weight:600;color:var(--charcoal);letter-spacing:.04em}

.btn-ink{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-ink:hover{background:var(--ink-deep)}
.btn-light{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn-light:hover{background:var(--mist)}

/* Mist panels */
.panel{background:var(--mist);border-radius:var(--radius-img);padding:clamp(20px,3vw,40px)}
.panel .sub{color:var(--charcoal)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.split.flip > :first-child{order:2}
.split img{width:100%;border-radius:var(--radius-card);object-fit:cover;aspect-ratio:4/5}
.split img.r43{aspect-ratio:4/3}
.split img.r32{aspect-ratio:3/2}
.split .sub{margin-top:var(--space-3)}
.split .after{margin-top:var(--space-4)}
.split .display{font-size:clamp(2.75rem,5.2vw,4.5rem)}
.panel > img.wide{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius-card)}
.triad3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-5)}
.triad3 h3{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:6px}
.panel .people-list{border-top-color:var(--charcoal)}
.panel .map .lbl,.panel .map .note{stroke:var(--mist)}

/* tiles + swipe rows */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.tile{background:var(--mist);border-radius:var(--radius-img);padding:14px 14px 20px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:transform .25s}
a.tile:hover{transform:translateY(-3px)}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-card)}
.tile .num{font-size:2.6rem;font-weight:700;letter-spacing:-.04em;line-height:1;padding:8px 6px 0}
.tile h3{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;padding:0 6px}
.tile p{color:var(--charcoal);padding:0 6px}
.tile .link{padding:0 6px;min-height:0;margin-top:auto}
.tiles:focus-visible,.strip-row:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--radius-img)}

/* chips: quiet tags, not buttons */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-4);list-style:none;padding:0}
.chips li{padding:6px 12px;border-radius:var(--radius-pill);background:var(--mist);font-size:.9375rem;font-weight:500}
.panel .chips li{background:var(--white)}

/* aqua feature band */
.band-aqua{background:linear-gradient(160deg,var(--aqua-wash) 0%,var(--aqua-soft) 100%);color:var(--ink);padding:var(--space-7) 0;position:relative;overflow:hidden}
.band-aqua::before{content:"";position:absolute;right:-12%;top:-30%;width:55%;aspect-ratio:1;border-radius:50%;background:var(--aqua);opacity:.2;pointer-events:none}
.band-aqua > .wrap{position:relative}
.band-aqua .sub,.band-aqua p{color:var(--ink)}
.band-aqua .badge{background:rgba(254,254,254,.55);border-color:rgba(43,58,60,.18);color:var(--ink)}
.band-aqua .badge::before{background:var(--ink)}
.band-aqua .chips li{background:rgba(254,254,254,.7)}
.band-aqua .checks{list-style:none;margin:var(--space-4) 0 0;padding:0}
.band-aqua .checks li{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-top:1px solid rgba(43,58,60,.2);font-weight:600;font-size:1.1rem}
.band-aqua .checks li:last-child{border-bottom:1px solid rgba(43,58,60,.2)}
.band-aqua .checks svg{width:16px;height:16px;flex:none;stroke:var(--ink);transform:translateY(2px)}
.band-aqua .checks small{display:block;font-weight:500;font-size:1rem;margin-top:2px}
.band-aqua :focus-visible{outline-color:var(--ink)}

/* Ink closing band, joined to the footer as one deliberate slab */
.band-ink{background:radial-gradient(120% 90% at 85% 0%,var(--ink-hi) 0%,var(--ink) 60%);color:var(--white);padding:var(--space-7) 0}
.band-ink .sub{color:rgba(254,254,254,.9)}
.band-ink .promise{color:rgba(254,254,254,.8)}
.band-ink .btn-est{color:var(--white);border-color:rgba(254,254,254,.9)}
.band-ink .btn-est:hover{background:var(--white);color:var(--ink)}
.band-ink .split img{aspect-ratio:1/1}
.band-ink .accent{color:var(--aqua)}
.band-ink :focus-visible{outline-color:var(--white)}
.band-ink .cta-pair{margin-top:var(--space-5)}
.band-ink.center{text-align:center}
.band-ink.center h2{max-width:14ch;margin-inline:auto}
.band-ink.center .cta-pair{justify-content:center}
main:has(> .band-ink:last-child) + .site-footer{padding-top:0}
main:has(> .band-ink:last-child) + .site-footer > .wrap{border-top:1px solid rgba(254,254,254,.12);padding-top:var(--space-5)}

/* full-bleed photo with overlay */
.bleed{position:relative;color:var(--white)}
.bleed img{width:100%;height:clamp(460px,64vh,660px);object-fit:cover;display:block}
.bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,28,29,.05) 0%,rgba(20,28,29,.2) 40%,rgba(20,28,29,.8) 100%);pointer-events:none}
.bleed .over{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:0 0 var(--space-6)}
.bleed h2{text-shadow:0 2px 30px rgba(20,28,29,.35)}
.bleed .regions{margin-top:var(--space-4);display:grid;gap:6px}
.bleed .regions p{font-size:1.05rem;font-weight:600;line-height:1.35}
.bleed .regions b{display:inline-block;min-width:9.5em;font-weight:700;color:var(--aqua)}
.bleed .legal{margin-top:var(--space-4);font-weight:500;max-width:52ch}
.bleed .legal a{color:var(--white)}
.bleed :focus-visible{outline-color:var(--white)}

/* photo strip */
.strip-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,32vw,420px);gap:var(--space-4);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:0 var(--gutter) var(--space-3);scroll-padding:0 var(--gutter);scrollbar-width:none}
.strip-row::-webkit-scrollbar{display:none}
.strip-row figure{margin:0;scroll-snap-align:start}
.strip-row img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-img)}
.strip-row figcaption{margin-top:10px;font-size:var(--text-small);font-weight:600}
.strip-row figcaption span{color:var(--charcoal);font-weight:500}
@media (min-width: 961px){
  .strip-row{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;max-width:var(--page-max);margin-inline:auto}
  .strip-row img{aspect-ratio:4/3}
}

/* stats + single quote card */
.stat-row{display:flex;justify-content:center;gap:clamp(32px,8vw,120px);text-align:center}
.stat-row.left{justify-content:flex-start;text-align:left;gap:var(--space-5);margin-top:var(--space-4)}
.stat-row b{display:block;font-size:var(--text-display-xl);font-weight:700;letter-spacing:var(--tracking-display);line-height:.9;font-variant-numeric:tabular-nums}
.stat-row.left b{font-size:var(--text-display)}
.stat-row span{display:block;margin-top:10px;color:var(--charcoal);font-size:var(--text-sub)}
.quote-card{max-width:560px;margin:var(--space-6) auto 0;display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--white)}
.quote-card.solo{margin-top:0}
.quote-card .mark{flex:none;width:44px;height:44px;border-radius:12px;background:var(--mist);display:grid;place-items:center;font-size:1.6rem;font-weight:700;color:var(--charcoal)}
.quote-card blockquote{margin:0;font-size:1.15rem;font-weight:600;line-height:1.4}
.quote-card figcaption{margin-top:8px;font-size:var(--text-small);color:var(--slate);font-weight:600}

.faq-panel{max-width:820px;margin:0 auto}
.faq-panel .faq{border-top:0;margin-top:var(--space-3)}
.faq-panel .faq details:last-child{border-bottom:0}
.faq-panel .after{margin-top:var(--space-3)}

@media (max-width: 960px){
  .split{grid-template-columns:1fr}
  .split.flip > :first-child{order:0}
  .triad3{grid-template-columns:1fr;gap:var(--space-4)}
}
@media (max-width: 760px){
  body{font-size:1.125rem}
  .sub{color:var(--charcoal)}
  .band-ink .sub,.on-dark .sub{color:rgba(254,254,254,.92)}
  .btn,.sticky .btn{min-height:56px}
  .sec{padding:var(--space-6) 0}
  .sec.tight{padding:var(--space-5) 0}
  .center-head + *{margin-top:var(--space-5)}
  .split img,.split img.r43,.split img.r32,.band-ink .split img{aspect-ratio:16/11}
  .panel > img.wide{aspect-ratio:16/10}
  .tiles{grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 6px;scroll-padding:0 var(--gutter);scrollbar-width:none}
  .tiles::-webkit-scrollbar{display:none}
  .tile{scroll-snap-align:start}
  .tiles .rv{opacity:1;transform:none}
  .band-aqua,.band-ink{padding:var(--space-6) 0}
  .band-ink .cta-pair,.band-aqua .cta-pair{flex-direction:column;align-items:stretch}
  .stat-row b{font-size:3.4rem}
  .stat-row.left{flex-wrap:wrap;gap:var(--space-3) var(--space-5)}
  .stat-row.left b{font-size:2.6rem}
  .stat-row span{font-size:1rem}
  .strip-row{grid-auto-columns:72%}
  .bleed img{height:600px}
  .bleed .regions b{display:block;min-width:0}
  main:has(> .band-ink:last-child) + .site-footer .ft{grid-template-columns:1fr 1fr;gap:var(--space-4)}
  main:has(> .band-ink:last-child) + .site-footer .ft > :first-child{grid-column:1 / -1}
  main:has(> .band-ink:last-child) + .site-footer .ft .desc{display:none}
}

.stat-row.four{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:var(--space-5) clamp(28px,4.5vw,72px)}
.stat-row.four b{font-size:clamp(2.6rem,4.6vw,4.4rem)}
@media (max-width: 1100px){ .stat-row.four{grid-template-columns:repeat(2,auto)} }
@media (max-width: 760px){
  .stat-row.four{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5) var(--space-3)}
  .stat-row.four b{font-size:2.5rem}
}

.homes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-5)}
.home-card{display:block;color:inherit;text-decoration:none;border-radius:var(--radius-img)}
.home-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-img);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.home-meta{display:grid;gap:2px;margin-top:12px}
.home-meta b{font-size:1.15rem;font-weight:700}
.home-meta span{color:var(--slate)}
.home-meta .home-more{margin-top:6px;color:var(--charcoal);font-weight:600;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.home-card:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media (hover: hover){ .home-card:hover img{transform:scale(1.02)} }
.gallery{width:min(1200px,94vw);max-height:92vh;padding:0;border:0;border-radius:var(--radius-img);background:var(--white);color:var(--charcoal)}
.gallery::backdrop{background:rgba(var(--scrim),.72)}
.gal-top{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--white);border-bottom:1px solid var(--line)}
.gal-title{font-size:1.35rem;font-weight:700}
.gal-place{color:var(--slate)}
.gal-close{display:grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--charcoal);border-radius:50%;background:none;color:var(--charcoal);cursor:pointer}
.gal-close .icon{width:22px;height:22px}
.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);padding:var(--space-4)}
.gal-grid img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px}
@media (max-width: 760px){
  .homes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .home-card{scroll-snap-align:start}
  .home-card img{aspect-ratio:4/3}
  .gallery{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .gal-grid{grid-template-columns:1fr;padding:var(--space-3)}
}

.sym-divider{display:flex;align-items:center;gap:20px;max-width:820px;margin:0 auto var(--space-6)}
.sym-divider::before,.sym-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.sym-divider img{width:34px;height:auto}
.band-aqua .checks li:has(> .sym-bullet){align-items:flex-start}
.sym-bullet{flex:none;display:block;width:30px;height:30px;margin-top:-2px;border-radius:50%;background:var(--white) url(/assets/brand/symbol-aqua-grey.svg) 50% 46%/18px auto no-repeat}

.quote-card blockquote p + p{margin-top:.8em}

.review-quote{max-width:820px;margin:var(--space-6) auto 0;padding:clamp(28px,5vw,48px);background:var(--white);border:1px solid var(--line);border-radius:20px}
.review-quote .qm{display:block;width:44px;height:auto;margin-bottom:var(--space-3)}
.review-quote blockquote{margin:0;font-size:clamp(1.45rem,3vw,2.1rem);font-weight:700;line-height:1.22;letter-spacing:-.015em;color:var(--charcoal);text-wrap:pretty}
.review-quote figcaption{margin-top:var(--space-4);font-weight:600}
.review-quote figcaption span{color:var(--slate);font-weight:500}
/* Soft aqua marker behind the key phrase; charcoal on this tint stays above 4.5:1. */
.review-quote mark{color:inherit;padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(transparent 58%,#C4E8EA 58%,#C4E8EA 92%,transparent 92%) no-repeat 0 0/100% 100%}
.hl-live .review-quote mark{background-size:calc(var(--p,0) * 100%) 100%}