/*
Theme Name: Golden State Living
Theme URI: https://kaylahomedesigns.com
Author: Golden State Living
Description: Hand-written theme for Golden State Living.
Version: 1.9.2
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: kayla
Update URI: false

Until 2026-09-24 this folder was named "kayla", the slug of an unrelated WordPress.org blog theme, and
WordPress twice installed that theme over this one as an "update". Keep the folder name unique, and keep
Update URI: false so WordPress never asks WordPress.org about this theme.
*/

/* ---------- fonts ---------- */
@font-face{font-family:"Playfair Display";src:url(assets/fonts/playfair-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(assets/fonts/playfair-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(assets/fonts/playfair-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Great Vibes";src:url(assets/fonts/greatvibes-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --gold:#c9a961;--gold-dark:#93742F;--gold-deep:#6B4E1E;--gold-light:#C9A961;--gold-pale:#EADFC4;--gold-text:#8A6D2B;
  --gold-hair:rgba(176,141,60,.35); /* --gold at the same .35 the topbar divider uses */
  --gold-bar:linear-gradient(90deg,var(--gold-deep) 0%,var(--gold) 30%,var(--gold-light) 52%,var(--gold) 72%,var(--gold-deep) 100%);
  --cream:#FAF7F1;--white:#fff;--nav-bg:#0b0b0c;--ink:#141414;--choco:#2A1B12;--ink-muted:#C9C9C9;--text:#222;--muted:#5A5A5A;--line:#E6DFD2;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --script:"Great Vibes","Brush Script MT",cursive;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --container:1280px;--section:96px;--gutter:24px;--radius:4px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.7 var(--sans);color:var(--text);background:var(--cream)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.6rem,5vw,4.2rem)}
h2{font-size:clamp(2rem,3.4vw,2.75rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--white{background:var(--white)}
/* Same dark surface the header and footer use, so the three read as one treatment. */
.section--dark{background:var(--nav-bg);background-image:radial-gradient(circle,#c9a96112,#00000012 60%);color:#f8f6f1}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#f8f6f1}
.section--dark .eyebrow{color:var(--gold-light)}
.section--dark .lead{color:rgba(248,246,241,.8)}
.section--marble{background:
  radial-gradient(60% 40% at 15% 20%,rgba(201,169,97,.22),transparent 70%),
  radial-gradient(45% 35% at 85% 80%,rgba(201,169,97,.18),transparent 70%),
  linear-gradient(180deg,var(--white) 0%,var(--cream) 100%)}
/* Flat golden cream, for a section that wants one warm surface rather than marble's washes. */
.section--gold{background:color-mix(in srgb,var(--gold-pale) 60%,var(--cream))}
.section--gold .eyebrow{color:var(--gold-deep)} /* --gold-text only reaches 4.02:1 on this surface; this is 6.33:1 */
.eyebrow{display:block;font:600 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin-bottom:1rem}
.script{font-family:var(--script);font-weight:400;color:var(--gold-text);font-size:2rem;line-height:1}
.rule{width:64px;height:2px;background:var(--gold);margin:1.25rem 0 1.5rem}
.rule--center{margin-inline:auto}
.center{text-align:center}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--white);padding:.5rem 1rem;z-index:100}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.topbar :focus-visible,.btn:focus-visible{outline-color:var(--white)}
.footer__bottom :focus-visible{outline-color:var(--ink)}
.i{display:inline-block;vertical-align:middle;flex:none}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:0;background:var(--gold);color:var(--white);text-decoration:none;font:600 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:1rem 1.75rem;border:1px solid var(--gold);border-radius:var(--radius);white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .25s ease,box-shadow .25s ease}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(176,141,60,.6);background:color-mix(in srgb,var(--gold) 94%,var(--ink));border-color:color-mix(in srgb,var(--gold) 94%,var(--ink))} /* lifts on a soft glow in its own colour, darkened a little */
.btn__label{display:block;transition:transform .25s ease}
.btn .i{position:absolute;right:.6rem;top:50%;margin-top:-6px;opacity:0;transform:translateX(-8px);transition:opacity .25s ease,transform .25s ease} /* the arrow only shows on hover: the label slides left, the arrow slides in, the width stays */
.btn:hover .btn__label,.btn:focus-visible .btn__label{transform:translateX(-.55rem)}
.btn:hover .i,.btn:focus-visible .i{opacity:1;transform:none}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 100%);transform:translateX(-130%) skewX(-18deg);pointer-events:none} /* a faint glare, parked off the left edge */
.btn:hover::after,.btn:focus-visible::after{animation:btn-shine .8s ease-out 1} /* sweeps across once per hover, then parks again */
@keyframes btn-shine{to{transform:translateX(460%) skewX(-18deg)}}
.btn:active{transform:translateY(0);box-shadow:0 6px 14px -8px rgba(176,141,60,.5);transition-duration:.1s}
.btn.btn--outline{background:transparent;color:var(--gold)} /* two classes, so a context rule like .footer a cannot recolour it */
.btn.btn--outline:hover,.btn.btn--outline:focus-visible{background:var(--gold);color:var(--white)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
.btn--nav{padding:.85rem 1.5rem;color:var(--ink)}
.btn--nav.btn--outline:hover,.btn--nav.btn--outline:focus-visible{color:var(--ink)} /* fills to the same ink-on-gold as the button beside it */
.nav__actions{display:flex;gap:.75rem}

/* ---------- top bar ---------- */
.topbar{background:var(--gold-bar);color:var(--white);font:500 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.topbar__inner{display:flex;justify-content:flex-end;align-items:center;min-height:36px;gap:1rem}
.topbar__phone{display:inline-flex;align-items:center;gap:.5rem;padding-block:8px;color:var(--white);text-decoration:none} /* the padding makes the whole 36 px bar height the tap target for a call */
.topbar__right{display:flex;align-items:center;gap:1.25rem}
.topbar .i{width:20px;height:20px}
.social{display:flex;gap:.6rem}
.social a{display:flex;width:28px;height:28px;align-items:center;justify-content:center;color:inherit;border-radius:50%;transition:background .2s}
.social a:hover{background:rgba(255,255,255,.18)}
.topbar .social{padding-right:1.25rem;border-right:1px solid rgba(255,255,255,.35)}
.topbar .social a{width:30px;height:30px}

/* ---------- header / logo / nav ---------- */
.header{--nav-line:rgba(201,169,97,.22);background:var(--nav-bg);color:var(--cream);border-bottom:1px solid var(--nav-line)}
.header__inner{display:flex;align-items:center;justify-content:space-between;min-height:104px;gap:1.5rem}
.logo{display:inline-grid;grid-template-columns:auto auto;align-items:end;column-gap:.35rem;text-decoration:none;color:var(--ink);line-height:1}
.logo__top{grid-column:1/-1;font:400 1.05rem/1 var(--serif);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.logo__script{font:400 2.1rem/1 var(--script);color:var(--gold);margin-top:-.15rem}
.logo__llc{font:600 .55rem/1 var(--sans);letter-spacing:.18em;padding-bottom:.35rem}
.logo--light,.header .logo{color:var(--white)}
.nav{display:flex;align-items:center;gap:2rem}
.nav__list{display:flex;gap:1.25rem}
.nav__list a{position:relative;font:500 .9375rem/1.25 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--cream);padding:.5rem 0;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s} /* the transparent border only holds the space the underline sits in */
.nav__list a:hover,.nav__list a:focus-visible,.nav__list .current-menu-item>a,.nav__list .current_page_item>a{color:var(--gold)}
.nav__list a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.4,0,.2,1)} /* the underline wipes in from the left while the letters swap */
.nav__list a:hover::after,.nav__list a:focus-visible::after,.nav__list .current-menu-item>a::after,.nav__list .current_page_item>a::after{transform:none}
.nav-toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer;flex-direction:column;gap:5px}
.nav-toggle span:not(.visually-hidden){display:block;width:24px;height:2px;background:var(--cream);transition:transform .2s,opacity .2s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- footer ---------- */
.footer{position:relative;background:#0b0b0c;background-image:radial-gradient(circle, #c9a96112, #00000012 60%);color:#f8f6f1;font-size:.9rem}
.footer>*{position:relative}
.footer__topo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.footer a{color:#f8f6f1;text-decoration:none}
.footer__grid a:not(.btn):hover{color:var(--gold-light)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:2.5rem;padding-block:64px 56px}
.footer__brand p{margin:1rem 0 1.25rem;max-width:26ch}
.footer__title{font:600 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin:0 0 1.1rem}
.footer__list li{margin-bottom:.45rem}
.footer__contact li{display:flex;gap:.6rem;align-items:center;margin-bottom:.7rem}
.footer__contact a{display:inline-flex;gap:.6rem;align-items:center}
.footer__contact .i{width:16px;height:16px;color:var(--gold-light)}
.footer__contact+.btn-row{margin-top:1rem}
.footer .social a{color:#f8f6f1;border:1px solid rgba(255,255,255,.18)}
.footer .social a:hover{color:var(--white);background:var(--gold)}
.footer__areas{border-top:1px solid rgba(255,255,255,.1);padding-block:26px 40px} /* the homepage service-area band, moved here so the cities are on every page */
.footer__areas .footer__title{margin-bottom:.85rem}
.footer__areas a:hover,.footer__areas a:focus-visible{color:var(--gold-light)}
.footer__areas-list{display:flex;flex-wrap:wrap;gap:.35rem 1rem;color:rgba(248,246,241,.8);font-size:.85rem}
.footer__areas-list li{display:flex;align-items:center;gap:1rem}
.footer__areas-list li::after{content:"";width:3px;height:3px;background:var(--gold);transform:rotate(45deg)}
.footer__areas-list li:last-child::after{display:none}
.footer__bottom{background:var(--gold);color:var(--ink);font-size:.78rem} /* ink, as on the header's gold button: white on this gold is 2.25:1, ink is 8.2:1 */
.footer__bottom-inner{display:flex;justify-content:space-between;align-items:center;min-height:32px;gap:1rem;flex-wrap:wrap}
.footer__bottom a{color:var(--ink)}
.footer__legal{display:flex;gap:1.25rem}

/* ---------- back to top ---------- */
.to-top{position:fixed;right:var(--gutter);bottom:110px;z-index:40;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;background:var(--gold);color:var(--white);border:1px solid var(--gold);border-radius:50%;box-shadow:0 4px 14px rgba(20,20,20,.22);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s,background .2s,border-color .2s}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold-dark);border-color:var(--gold-dark)}
.to-top .i{width:22px;height:22px;transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}.btn:hover,.btn:focus-visible,.btn:active{transform:none}.btn__label,.btn .i{transition:none}.btn:hover::after,.btn:focus-visible::after{animation:none}}

/* ---------- responsive: header/footer ---------- */
@media (max-width:1279px){
  .header__inner{min-height:76px}
  .nav-toggle{display:flex}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--nav-bg);flex-direction:column;align-items:stretch;gap:0;padding:1rem var(--gutter) 1.5rem;border-bottom:1px solid var(--nav-line);display:none;z-index:50}
  .nav-open .nav{display:flex}
  .nav__list{flex-direction:column;gap:0}
  .nav__list a{display:block;padding:.9rem 0;border-bottom:1px solid var(--nav-line)}
  .nav__actions{flex-direction:column;margin-top:1rem}
  .btn--nav{justify-content:center}
  .header{position:relative}
}
@media (max-width:900px){
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  :root{--section:64px}
  .topbar__inner{justify-content:center}
  .footer__grid{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:359px){ /* icons and number need ~342 px on one line; narrower, the number drops under the icons instead of pushing the page sideways */
  .topbar__right{flex-wrap:wrap;justify-content:center;row-gap:0}
  .topbar .social{padding-right:0;border-right:0}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--cream);overflow:clip}
.hero__inner{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:3rem;min-height:560px;padding-block:48px}
.hero__lead{font-size:1.1rem;color:var(--muted);max-width:34ch;margin-bottom:2rem}
.hero__media{position:relative;overflow:hidden;margin-right:calc(-1 * var(--gutter))}
.hero__media img{width:100%;height:520px;object-fit:cover;border-radius:2px 0 0 2px}
.hero__media::before{content:"";position:absolute;top:-15%;bottom:-15%;left:-250px;width:330px;background:var(--cream);border-radius:50%}
.hero__media::after{content:"";position:absolute;top:-12%;bottom:-12%;left:-236px;width:330px;border:2px solid var(--gold-light);border-radius:50%;opacity:.7}

/* ---------- stats ---------- */
.stats{position:relative;isolation:isolate;overflow:hidden;background:var(--ink)} /* its own stacking context, so the negative z-index layers stay inside the strip */
.stats__bg{position:absolute;inset:0;z-index:-10;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.05);filter:blur(6px);pointer-events:none} /* assets/img/stats-bg.webp, a warm living room: blurred live, scaled so the blur has no soft edges */
.stats::after{content:"";position:absolute;inset:0;z-index:-10;background:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.72))} /* dark overlay above the photo (later in tree order at the same z-index) */
.stats__inner{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-block:28px;min-height:240px;flex-wrap:wrap} /* the strip is 240 px tall, tiles centred */
.stat{display:flex;align-items:center;gap:1.1rem;color:#d4a530;padding-inline:.9rem;border-left:1px solid rgba(255,255,255,.18);flex:1 1 180px} /* strip colours as specified: #d4a530 icons, #f6ecdd figures */
.stat:first-child{border-left:0;padding-left:0}
.stat strong{display:block;font:400 2.4rem/1 var(--serif);color:#f6ecdd}
.stat span{display:block;font:600 .78rem/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#f6ecdd;max-width:22ch;margin-top:.4rem}
.stat .i{width:46px;height:46px}
.stars{display:inline-flex;gap:2px;color:var(--gold)}
.stars .i{width:16px;height:16px}

/* ---------- founder ---------- */
.founder{overflow-x:clip}
.founder__inner{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:3rem;align-items:center}
.founder__portrait{position:relative;padding-top:.5rem}
.arch{width:min(100%,320px);aspect-ratio:4/5;border-radius:200px 200px 6px 6px;overflow:hidden;margin:0 auto;box-shadow:0 0 0 1px var(--gold-light),0 0 0 10px var(--cream),0 0 0 11px var(--gold-pale)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.founder__portrait::after{content:"";display:block;width:min(100%,240px);height:30px;margin:1.1rem auto 0;background:url(assets/icons/diamonds.svg?v=aligned-pair-3) 50%/contain no-repeat;opacity:.85}
.founder__signature{display:block;text-align:center;margin-top:.6rem;font-size:2.2rem;opacity:.85}
.founder__name{margin-bottom:.25rem}
.features li{display:flex;gap:1.1rem;align-items:flex-start;padding:1.35rem 0;border-top:1px solid var(--line)}
.features li:first-child{border-top:0}
.features .i{width:44px;height:44px;color:var(--gold);flex:none}
.features h3{font:600 .82rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .3rem}
.features p{margin:0;font-size:.9rem;color:var(--muted)}
/* award badges in one row under all three columns: a 16:9 white tile each, the same white letterbox the About cards give the square badge */
.founder__awards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,260px));justify-content:center;gap:2rem;margin:0;padding:0;list-style:none}
.founder__badge{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--white);border:1px solid var(--line)}
.founder__awards .i{width:44px;height:44px;color:var(--gold);margin-inline:auto}

/* ---------- service-area map ---------- */
.service-map{padding-block:0} /* the map meets the top and bottom of its own band */
.service-map__inner{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
/* No token, no map, so the copy stops holding a column open for it. With a map, the copy keeps the
   container's left edge while the map runs off the right of the screen: 100% here is the section, not the
   viewport, so this stays clear of the scrollbar that 100vw would count. */
.service-map__inner:has(.service-map__frame){grid-template-columns:1fr 1.15fr;max-width:none;padding-right:0;padding-left:max(var(--gutter),(100% - var(--container)) / 2 + var(--gutter))}
.service-map__copy .lead{margin-bottom:1.75rem}
.service-map__frame{position:relative}
.service-map__canvas{height:clamp(440px,72vh,720px);width:100%;background:var(--cream);border:1px solid var(--line);border-right:0;border-radius:0}
.service-map__canvas .mapboxgl-ctrl-logo{display:none} /* asked for: see the note about Mapbox attribution terms */
.service-map__popup .mapboxgl-popup-content{padding:0;border-radius:var(--radius);overflow:hidden;font-family:var(--sans);min-width:150px}
.service-map__thumb{width:100%;height:110px;object-fit:cover}
.service-map__popup-city,.service-map__popup-address,.service-map__popup-meta{display:block;padding-inline:.85rem}
.service-map__popup-city{padding-top:.7rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.service-map__popup-address{font-size:.95rem;color:var(--ink)}
.service-map__popup-meta{font-size:.8rem;color:var(--muted)}
.service-map__popup .mapboxgl-popup-content>:last-child{padding-bottom:.75rem} /* whichever line ends the card carries it */
/* Hovering does not need a way out: the pointer is the way out. The cross belongs to a held card. */
.service-map__popup .mapboxgl-popup-close-button{display:none}
.service-map__popup--pinned .mapboxgl-popup-close-button{display:flex;align-items:center;justify-content:center;top:1px;right:1px;width:22px;height:22px;padding:0;font-size:.95rem;line-height:1;color:var(--muted);background:transparent}
.service-map__popup--pinned .mapboxgl-popup-close-button:hover{background:transparent;color:var(--ink)}
.service-map__popup--pinned .service-map__popup-city{padding-right:1.75rem} /* keep the cross off the city line */
@media (max-width:900px){
  /* the :has() rule above carries the same specificity, so this has to match it to win */
  .service-map{padding-block:var(--section)}
  .service-map__inner,.service-map__inner:has(.service-map__frame){grid-template-columns:1fr;padding-inline:var(--gutter)}
  .service-map__canvas{height:clamp(280px,44vh,380px);border-right:1px solid var(--line)}
}

/* ---------- services / cards ---------- */
/* two to a row, photo above the copy; the cards in a row share one height, so their "Learn more" links line up */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:2.5rem}
.card{display:flex;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:.6rem;position:relative;overflow:hidden}
.card:focus-within{box-shadow:0 0 0 2px var(--gold)} /* the whole card is the link, so keyboard focus needs a ring; hover leaves the card alone */
.card__link{flex:1;display:grid;grid-template-rows:auto 1fr;color:inherit;text-decoration:none}
.card__media{position:relative;border-radius:10px;overflow:hidden;background:var(--cream);aspect-ratio:16/10}
/* an odd one out (a service page lists the other three) takes the last row alone, photo beside the copy, each half lined up with the columns above */
.card:last-child:nth-child(odd){grid-column:1/-1}
.card:last-child:nth-child(odd) .card__link{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;column-gap:calc(1.25rem + 1.2rem + 2px)} /* the row gap plus the two cards' padding and borders it stands in for */
.card:last-child:nth-child(odd) .card__media{aspect-ratio:auto;min-height:16rem} /* no ratio side by side: the photo fills the height its copy leaves */
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease} /* out of the flow, so the photo never sets the card's height */
.card:hover .card__media img{transform:scale(1.04)}
.card__copy{display:flex;flex-direction:column;align-items:flex-start;padding:1.15rem 1rem .75rem}
.card__title{font:400 1.4rem/1.2 var(--serif);color:var(--ink);margin:0 0 .5rem}
.card p{font-size:.9rem;color:var(--muted);margin:0 0 1.1rem}
.card__more{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.card__more .i{width:16px;height:11px}
.services__more{margin-top:2.5rem}
@media (max-width:900px){
  .cards{grid-template-columns:minmax(0,1fr)}
  .card:last-child:nth-child(odd) .card__link{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .card:last-child:nth-child(odd) .card__media{aspect-ratio:16/10;min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .card__media img{transition:none}
  .card:hover .card__media img{transform:none}
}

/* ---------- homepage partner strip ---------- */
.partners-home{background:var(--nav-bg);padding:34px 0}
.partners-home__viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} /* logos fade out rather than clip at the edges */
.partners-home__track{--logo-w:clamp(120px,14vw,150px);--logo-gap:clamp(20px,3vw,40px);display:flex;width:max-content;margin:0;padding:0;list-style:none;animation:partners-drift 75s linear infinite}
.partners-home__track{cursor:grab;touch-action:pan-y;user-select:none} /* held and dragged by partners-strip.js; pan-y keeps the page scrolling under a touch */
.partners-home__track.is-held{cursor:grabbing}
.partners-home__track li{flex:none;display:flex;align-items:center;justify-content:center;width:auto;height:48px;margin:0 var(--logo-gap);background:var(--nav-bg)}
/* That background is what the f8 screen blend lands on. It has to sit on the li: the track's running
   transform animation puts it on its own compositing layer, so a colour painted any higher up is
   outside the group and the blend falls back to transparency, which paints the plate back in. */
.partners-home__logo{max-width:var(--logo-w);width:auto;height:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:.75;transition:opacity .3s}
.partners-home__logo--screen{filter:grayscale(1) invert(1) brightness(1.4);mix-blend-mode:screen} /* f8 ships as a blue mark on a white plate: inverted the plate goes black and screen drops it, and the brightness pushes the mark the rest of the way to white */
.partners-home__logo:hover{opacity:1}
/* The track holds the run 4 times (see front-page.php), so -25% is exactly one run and copy 2 lands
   where copy 1 began. The logos are px-capped, so one run stops widening on a big screen while the
   viewport keeps going: the 3 runs still to the right of the seam are what keep the far edge covered.
   Percent, not a custom property, because var() inside @keyframes does not substitute in Chrome. */
@keyframes partners-drift{from{transform:translateX(0)}to{transform:translateX(-25%)}}

/* ---------- city strip ---------- */
/* The partner strip's drift, on every city with a location page, and driven by the same script:
   hold to stop it, drag to scrub. */
.city-strip{background:var(--nav-bg);padding:16px 0}
.city-strip__viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} /* names fade out rather than clip */
.city-strip__track{display:flex;width:max-content;margin:0;padding:0;list-style:none;animation:city-drift var(--drift-time,560s) linear infinite}
.city-strip__track{cursor:grab;touch-action:pan-y;user-select:none} /* held and dragged by partners-strip.js; pan-y keeps the page scrolling under a touch */
.city-strip__track.is-held{cursor:grabbing}
.city-strip__track li{flex:none;margin:0 clamp(14px,2vw,26px)}
.city-strip__city{display:flex;align-items:center;gap:.4rem;color:rgba(248,246,241,.8);font:500 .76rem/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.city-strip__city::before{content:"";width:13px;height:13px;flex:none;background:var(--gold);-webkit-mask:url(assets/icons/pin.svg) center/contain no-repeat;mask:url(assets/icons/pin.svg) center/contain no-repeat} /* the pin in CSS, not an inline SVG per city: 262 of those were over half the homepage's DOM */
@keyframes city-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .partners-home__track{animation:none;width:100%;flex-wrap:wrap;justify-content:center;row-gap:16px}
  .partners-home__track li[aria-hidden]{display:none} /* the repeats have nothing to add when nothing moves */
  .city-strip__track{animation:none;width:100%;flex-wrap:wrap;justify-content:center;row-gap:8px}
  .city-strip__track li[aria-hidden]{display:none}
}

/* ---------- journal: latest posts ---------- */
.journal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem}
.journal__link{display:block;text-decoration:none;color:inherit}
.journal__media:empty{background:#1b1b1b;box-shadow:inset 0 0 0 1px var(--gold-hair)}
.journal__media{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);margin-bottom:1.1rem} /* wide, frameless: nothing like the white service cards two bands up */
.journal__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.journal__link:hover .journal__media img,.journal__link:focus-visible .journal__media img{transform:scale(1.04)}
.journal__date{display:block;font:600 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);margin-bottom:.6rem}
.journal__title{font-size:1.25rem;color:#f6ecdd;margin:0 0 .6rem;transition:color .2s}
.journal__link:hover .journal__title,.journal__link:focus-visible .journal__title{color:var(--gold-light)}
.journal__item p{margin:0;font-size:.9rem;color:rgba(246,236,221,.75)}
.journal__more{margin-top:2.5rem}
@media (prefers-reduced-motion:reduce){.journal__media img{transition:none}.journal__link:hover .journal__media img{transform:none}}

/* ---------- cta band ---------- */
.cta__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding-block:56px}
.cta__copy{min-width:0}
.cta__script{font-size:clamp(1.8rem,3.4vw,2.4rem);display:block;margin-bottom:-.6rem}
.cta__title{font-size:clamp(1.6rem,3.3vw,3rem);letter-spacing:.04em;text-transform:uppercase;margin:0}
.cta__actions{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;margin-top:1.75rem}
.cta__media{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--cream)}
.cta__media img,.cta__media video{display:block;width:100%;height:100%;object-fit:cover}
.cta__phone{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font:600 1.1rem var(--sans)}
.cta__phone .i{width:18px;height:18px;color:var(--gold)}

/* ---------- responsive: homepage ---------- */
@media (max-width:1000px){
  .founder__inner{grid-template-columns:1fr 1fr}
  .features{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .features li{border-top:0;padding:0;flex-direction:column}
}
@media (max-width:700px){
  .hero__inner{grid-template-columns:1fr;min-height:0;padding-block:40px 0}
  .hero__media{margin-inline:calc(-1 * var(--gutter))}
  .hero__media img{height:320px;border-radius:0}
  .hero__media::before,.hero__media::after{display:none}
  .stats__inner{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem} /* deliberate: 2-up stat tiles read better than five stacked rows on phones */
  .stat{border-left:0;padding-inline:0}
  .founder__inner,.features,.journal__grid{grid-template-columns:1fr}
  .founder__awards{display:flex;flex-wrap:wrap;gap:1rem}
  .founder__awards li{flex:0 1 calc(50% - .5rem)} /* two up, the third centered under them: three across leaves each badge 88px wide on a phone */
  .cta__inner{grid-template-columns:1fr;padding-block:40px}
}

/* ---------- title strip / prose ---------- */
.title-strip{padding-block:56px 40px;border-bottom:1px solid var(--line)}
.title-strip__eyebrow{display:block;margin-bottom:-.4rem}
.title-strip h1{font-size:clamp(2.2rem,4vw,3.2rem);margin-bottom:0}
.title-strip .rule{margin-bottom:0}
.lead{font-size:1.1rem;color:var(--muted);max-width:70ch;margin-bottom:3rem}
.center .lead{margin-inline:auto}
.prose{max-width:760px}
.prose img{margin-bottom:2rem}
.prose ul{list-style:disc;padding-left:1.25em;margin:0 0 1em}
.prose ol{list-style:decimal;padding-left:1.25em;margin:0 0 1em}
.text-link{color:var(--gold-text);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.h3{font-size:1.35rem}

/* ---------- about ---------- */
.about__inner{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem;align-items:center}
.awards__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem}
.award-card{border:1px solid var(--line);padding:2rem;background:var(--cream)}
.award-card .i{color:var(--gold);width:44px;height:44px;margin-bottom:1rem}
/* badge sits edge to edge across the card top: -2rem cancels the padding, contain keeps the wide and the square badge uncropped, white blends the letterbox into their own marble */
.award-card__badge{display:block;width:calc(100% + 4rem);max-width:none;height:200px;margin:-2rem 0 1.5rem -2rem;object-fit:contain;background:var(--white);border-bottom:1px solid var(--line)} /* max-width:none so the base img rule does not clamp the bleed back to the content box */
.award-card h3{font-size:1.2rem}
.award-card p{margin:0;color:var(--muted);font-size:.95rem}
.features--row{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.features--row li{border-top:0;padding:0}
.faq{max-width:760px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:1.1rem 2rem 1.1rem 0;font:600 1.05rem/1.4 var(--sans);color:var(--ink);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:.9rem;font-size:1.4rem;color:var(--gold)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 1.2rem;color:var(--muted)}

/* ---------- services page ---------- */
.service{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding-block:2.5rem;border-top:1px solid var(--line)}
.service--flip .service__media{order:2}
.service__media img{aspect-ratio:4/3;object-fit:cover;width:100%}
.partners__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.5rem}
.partner{border:1px solid var(--line);padding:2rem;text-align:center}
.partner img{max-height:90px;width:auto;margin:0 auto 1rem;object-fit:contain}
.partner p{color:var(--muted);font-size:.95rem}
.partner ul li{margin-top:.35rem}
.partner a{color:var(--gold-text);text-decoration:none}


/* ---------- location pages ---------- */
.loc-hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.loc-hero__inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,5vw,4rem);padding-block:clamp(48px,7vw,88px)}
.loc-hero h1{font-size:clamp(2.2rem,4vw,3.2rem);margin-bottom:0}
.loc-hero .rule{margin:1.25rem 0}
.loc-hero .lead{margin-bottom:2rem;max-width:42ch}
.loc-hero__media{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden}
.loc-hero__media img{width:100%;height:100%;object-fit:cover}
.loc-hero--full{border-bottom:0} /* the photo is the surface here, so no hairline to close it off */
.loc-hero--full .loc-hero__inner{grid-template-columns:1fr;min-height:clamp(380px,52vw,560px);align-items:end}
.loc-hero--full .loc-hero__copy{max-width:46rem}
.loc-hero__bg{position:absolute;inset:0;z-index:-1}
.loc-hero__bg img{width:100%;height:100%;object-fit:cover}
.loc-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.4),rgba(11,11,12,.85))}
@media (max-width:820px){
  .loc-hero__inner{grid-template-columns:1fr}
  .loc-hero--split .loc-hero__media{order:-1}
}

/* ---------- service area pages ---------- */
.areas-near__county{font:600 .82rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);margin:2.5rem 0 1rem}
.areas-near__list{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem 1.5rem;margin-top:2rem}
.areas-near__county+.areas-near__list{margin-top:0}
.areas-near__list a{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:500 .95rem/1.4 var(--sans);padding:.7rem 0;border-bottom:1px solid var(--gold-hair);transition:color .2s}
.areas-near__list a:hover,.areas-near__list a:focus-visible{color:var(--gold-light)}
.areas-near__list a::before{content:"";width:18px;height:18px;flex:none;background:var(--gold);-webkit-mask:url(assets/icons/pin.svg) center/contain no-repeat;mask:url(assets/icons/pin.svg) center/contain no-repeat} /* CSS pin, as in the city strip: the Locations page lists 131 cities */
.areas-near__more{margin-top:2.5rem}
.location .prose{margin-bottom:2rem}
@media (max-width:900px){.areas-near__list{grid-template-columns:repeat(2,1fr)}}
/* ---------- reviews ---------- */
.rating-head{text-align:center;margin-bottom:3rem}
.rating-head .stars .i{width:26px;height:26px}
.rating-head__score{font-size:1.1rem;color:var(--muted);margin:.5rem 0 1.25rem}
.rating-head__score strong{font:400 2rem/1 var(--serif);color:var(--ink)}
.rating-head__actions{display:flex;gap:1.5rem;align-items:center;justify-content:center;flex-wrap:wrap}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem}
.review-card{margin:0;background:var(--cream);border:1px solid var(--line);padding:2rem;font-size:.95rem}
.review-card cite{display:block;font-style:normal;font-weight:600;color:var(--gold-text);margin-top:1rem}
.review-card .stars{margin-bottom:.75rem}

/* ---------- contact ---------- */
.contact__inner{display:grid;grid-template-columns:1fr 1.3fr;gap:4rem;align-items:start}
.contact__meta{display:flex;flex-direction:column;gap:.65rem;margin:0 0 2rem;padding:1.25rem 0;border-block:1px solid var(--line)}
.contact__meta li{display:flex;gap:.7rem;align-items:center;font-weight:500;color:var(--ink)}
.contact__meta .i{width:20px;height:20px;color:var(--gold)}
.contact__list li{display:flex;gap:.8rem;align-items:center;margin:0 0 1rem}
.contact__list .i{color:var(--gold);width:20px;height:20px}
.contact__list a{text-decoration:none;color:var(--ink);font-weight:500}
.contact__details .social a{color:var(--ink);border:1px solid var(--line)}
.contact__form{background:var(--white);border:1px solid var(--line);padding:2.5rem}
/* the booking form: labels in the site's small caps, days and hours as chips (radio buttons, no script) */
.booking fieldset{border:0;margin:0 0 1.5rem;padding:0;min-width:0}
.booking legend,.booking__fields label{display:block;padding:0;font:600 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1.25rem}
.booking legend span,.booking__fields label span{font-weight:500;letter-spacing:.04em;text-transform:none}
.booking__fields{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.booking__wide{grid-column:1/-1}
/* the calendar: whole weeks, the picked day's hours in a column beside it (under it on phones) */
.booking__cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) minmax(8.5rem,.4fr);grid-template-rows:3.25rem 1.75rem repeat(6,2.9rem);gap:.3rem .2rem;align-items:center} /* fixed rows: every month, every day, the same height */
.booking__cal[hidden]{display:none}
.booking__head{grid-column:1/8;grid-row:1;display:flex;align-items:center;justify-content:space-between;align-self:start}
.booking__month{margin:0;font:400 1.25rem/1.2 var(--serif);color:var(--ink)}
.booking__nav{display:grid;place-items:center;width:2.4rem;height:2.4rem;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.booking__nav[hidden]{display:none}
.booking__nav:hover:not(:disabled){border-color:var(--gold);background:#f3ecdd}
.booking__nav:disabled{opacity:.3;cursor:default}
.booking__nav .i{width:15px;height:10px}
.booking__nav--prev .i{transform:scaleX(-1)}
.booking__wd{grid-column:var(--col);grid-row:2;padding-bottom:.35rem;text-align:center;font:600 .66rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.booking__day{display:contents}
.booking__blank,.booking__day>label{grid-column:var(--col);grid-row:var(--row);justify-self:center;display:grid;place-items:center;width:2.6rem;aspect-ratio:1;border-radius:50%;font:500 .95rem/1 var(--sans)}
.booking__blank{color:#bdb5a6}
.booking__day>label{color:var(--ink);font-weight:600;background:#f3ecdd;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}
.booking__day>label:hover{border-color:var(--gold)}
.booking__day>input:checked+label{background:var(--gold);border-color:var(--gold)} /* ink stays on gold: white on --gold is only 2.2:1 */
.booking__day>input:disabled+label{background:none;color:#bdb5a6;font-weight:500;text-decoration:line-through;cursor:default}
.booking__day>input:disabled+label:hover{border-color:transparent}
.booking__times,.booking__times-empty{grid-column:8;grid-row:1/-1;align-self:stretch;margin:0 0 0 .9rem;padding-left:1.1rem;border-left:1px solid var(--line)}
.booking__times{display:none;flex-direction:column;gap:.5rem}
.booking__times-empty{display:none;padding-top:.6rem;font-size:.85rem;color:var(--muted)}
.booking__cal:not(:has(.booking__day>input:checked)) .booking__times-empty{display:block} /* this month has no picked day yet */
.booking__day>input:checked~.booking__times{display:flex}
.booking__times-day{margin:0 0 .35rem;font:600 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.booking__times label{display:block;padding:.7rem .5rem;text-align:center;font:600 .85rem/1 var(--sans);color:var(--gold-text);background:var(--white);border:1px solid var(--gold);border-radius:999px;cursor:pointer;transition:background .15s}
.booking__times label:hover{background:#f3ecdd}
.booking__times input:checked+label{background:var(--gold);color:var(--ink)}
.booking__times input:disabled+label{color:#b3ab9c;background:none;border-color:var(--line);text-decoration:line-through;cursor:default}
.booking__cal input:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px}
.booking__tz{display:flex;align-items:center;gap:.45rem;margin:1.1rem 0 0;font-size:.82rem;color:var(--muted)}
.booking__tz .i{width:15px;height:15px;color:var(--gold-text)}
/* the confirm step: what was picked, then who is coming */
.booking__back{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 1rem;padding:0;border:0;background:none;font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);cursor:pointer}
.booking__back[hidden]{display:none}
.booking__back .i{width:16px;height:11px;transform:scaleX(-1)}
.booking__summary{display:flex;gap:.9rem;align-items:flex-start;margin:0 0 1.75rem;padding:1.1rem 1.2rem;background:var(--cream);border:1px solid var(--gold-pale);border-radius:10px}
.booking__summary .i{flex:none;width:22px;height:22px;margin-top:.15rem;color:var(--gold-text)}
.booking__summary p{margin:0}
.booking__when{display:block;font:400 1.15rem/1.35 var(--serif);color:var(--ink)}
.booking__when:empty{display:none}
.booking__summary span{display:block;margin-top:.2rem;font-size:.85rem;color:var(--muted)}
/* two steps once site.js runs (data-step); without it the whole form shows at once. Hidden by visibility, not display, so Turnstile still loads */
.booking{position:relative}
.booking[data-step="pick"] .booking__confirm{position:absolute;inset:0 0 auto;visibility:hidden}
.booking[data-step="confirm"] .booking__pick{display:none}
.booking__title-confirm,.contact__form:has(.booking[data-step="confirm"]) .booking__title-pick{display:none}
.contact__form:has(.booking[data-step="confirm"]) .booking__title-confirm{display:inline}
@media (max-width:700px){
  .booking__cal{grid-template-columns:repeat(7,minmax(0,1fr))}
  .booking__cal{grid-template-rows:3.25rem 1.75rem repeat(6,2.6rem) auto}
  .booking__head{grid-column:1/-1}
  .booking__blank,.booking__day>label{width:2.35rem;font-size:.88rem}
  .booking__times,.booking__times-empty{grid-column:1/-1;grid-row:9;min-height:11rem;margin:1rem 0 0;padding:1rem 0 0;border-left:0;border-top:1px solid var(--line)} /* one height with or without a day picked */
  .booking__times{flex-flow:row wrap;align-content:flex-start}
  .booking__times-day{flex-basis:100%}
  .booking__times label{padding:.65rem .9rem}
}
.booking__fields input,.booking__fields textarea{display:block;width:100%;margin-top:.5rem;padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--radius);font:1rem var(--sans);color:var(--text);background:var(--cream)}
.booking__fields input:focus,.booking__fields textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.booking__hp{display:none} /* the honeypot: people and autofill never see it, bots that fill every field do */
.booking__error{margin:0 0 1.5rem;padding:.8rem 1rem;border-left:3px solid #9b2c2c;background:#fbeeee;color:#7a1f1f}
.booking .cf-turnstile{margin-bottom:1.25rem}
.booking .btn{cursor:pointer}
@media (max-width:700px){.booking__fields{grid-template-columns:1fr}}

/* ---------- blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.post-card{background:var(--white);border:1px solid var(--line)}
.post-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.post-card__body{padding:1.5rem}
.post-card time{font:500 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.post-card h2{font-size:1.3rem;margin:.5rem 0}
.post-card h2 a,.service h2 a{text-decoration:none}
.post-card p{color:var(--muted);font-size:.95rem;margin:0}

/* ---------- responsive: inner pages ---------- */
@media (max-width:900px){
  .about__inner,.service,.contact__inner,.review-grid,.awards__grid,.partners__grid{grid-template-columns:1fr}
  .service--flip .service__media{order:0}
  .features--row{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .post-grid{grid-template-columns:1fr}
  .contact__form{padding:1.5rem}
}

/* ---------- galleries ---------- */
/* photo tiles: one look for the gallery blocks and the hero wall's gallery mode */
.wp-block-gallery a,.hero__track a{border-radius:8px;overflow:hidden;box-shadow:0 10px 24px -14px rgba(20,20,20,.5)}
.wp-block-gallery img,.hero__track img{border-radius:8px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.wp-block-gallery a:hover img,.hero__track a:hover img{transform:scale(1.06)}
.wp-block-gallery{--wp--style--gallery-gap-default:1rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:0 0 3rem}
.wp-block-gallery.columns-2{grid-template-columns:repeat(2,1fr)}
.wp-block-gallery figure{margin:0;width:auto!important} /* the grid sizes the tiles: core's has-nested-images rule (an id in its :not) would size each one again, to a third of its own cell */
.wp-block-gallery a{display:block} /* the link clips its photo, so the hover zoom stays inside the tile */
.wp-block-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}
/* a long gallery opens clamped: hidden tiles are lazy, so their photos never download until "See all". The selectors outweigh core's has-nested-images display:flex */
.wp-block-gallery.is-clamped figure.wp-block-image:nth-child(n+25){display:none}
.gallery-more{text-align:center;margin:-1rem 0 3rem}
.portfolio .wp-block-heading{margin-top:1rem}
.portfolio .wp-block-heading+p{color:var(--muted);margin-bottom:2rem}
@media (max-width:900px){.wp-block-gallery{grid-template-columns:repeat(2,1fr)}.wp-block-gallery.is-clamped figure.wp-block-image:nth-child(n+13){display:none}}
@media (max-width:700px){.wp-block-gallery,.wp-block-gallery.columns-2{grid-template-columns:1fr}.wp-block-gallery.is-clamped figure.wp-block-image:nth-child(n+7){display:none}}

/* the Portfolio page (portfolio.php): a masonry grid whose 3:2 cells are sized off the section's width, so a Normal
   tile shows its whole photo; Wide, Tall and Big tiles span two, and dense packing fills the holes they leave.
   Columns per device and the gap come in as custom properties from Golden State Living > Portfolio. */
.portfolio-section{container-type:inline-size;margin:0 0 3rem}
.portfolio-grid{--cols:var(--pf-cols-desktop,3);display:grid;gap:var(--pf-gap,16px);grid-auto-flow:row dense;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  grid-auto-rows:calc((100cqw - (var(--cols) - 1) * var(--pf-gap,16px)) / var(--cols) * 2 / 3)}
.portfolio-tile{margin:0;min-width:0;border-radius:8px;overflow:hidden;box-shadow:0 10px 24px -14px rgba(20,20,20,.5)}
.portfolio-tile a{display:block;height:100%}
.portfolio-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.portfolio-tile a img{cursor:zoom-in}
.portfolio-tile a:hover img{transform:scale(1.06)}
.portfolio-tile.is-wide{grid-column:span 2}
.portfolio-tile.is-tall{grid-row:span 2}
.portfolio-tile.is-big{grid-column:span 2;grid-row:span 2}
.portfolio-sections[data-shape=same] .portfolio-tile{grid-column:auto;grid-row:auto}
.portfolio-grid.is-clamped>.portfolio-tile:nth-child(n+25){display:none}
.portfolio-section .gallery-more{margin:2rem 0 0}
.portfolio-pairs{display:grid;gap:var(--pf-gap,16px)}
.portfolio-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pf-gap,16px)}
.portfolio-pair .portfolio-tile img{height:auto;aspect-ratio:3/2}
@media (max-width:900px){
  .portfolio-grid{--cols:var(--pf-cols-tablet,2)}
  .portfolio-grid.is-clamped>.portfolio-tile:nth-child(n+13){display:none}
}
@media (min-width:701px) and (max-width:900px){ /* one column: a span of two would add a column */
  .portfolio-sections[data-cols-tablet="1"] .portfolio-tile{grid-column:auto;grid-row:auto}
}
@media (max-width:700px){
  .portfolio-grid{--cols:var(--pf-cols-phone,1)}
  .portfolio-sections[data-cols-phone="1"] .portfolio-tile{grid-column:auto;grid-row:auto}
  .portfolio-grid.is-clamped>.portfolio-tile:nth-child(n+7){display:none}
  .portfolio-pair{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Google reviews badge (hero) ---------- */
.reviews-badge{display:inline-flex;align-items:center;gap:.5rem;height:30px;padding:0 .8rem;border-radius:var(--radius);background:var(--white);color:var(--ink);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.06);text-decoration:none;font:600 .74rem/1 var(--sans);letter-spacing:.04em;white-space:nowrap;margin-bottom:1.25rem;transition:background .2s}
.reviews-badge:hover{background:var(--cream)}
.reviews-badge .i-google{width:16px;height:16px}
.reviews-badge .i-star{width:12px;height:12px}
.reviews-badge .stars{gap:1px}
.reviews-badge strong{font-weight:700;font-size:.8rem}
.topbar__phone{white-space:nowrap}
/* ---------- shared Google reviews: the plugin's grid re-flowed as CSS masonry ---------- */
.reviews-wall .grw-header{display:none}
.reviews-wall .masonry{margin-top:2.5rem}
.reviews-wall .wp-gr,.reviews-wall .grw-row,.reviews-wall .grw-content,.reviews-wall .grw-content-inner{display:block!important;width:100%!important;max-width:none!important;height:auto!important;padding:0!important;margin:0!important}
.reviews-wall .grw-reviews{display:block!important;columns:3;column-gap:1.5rem!important;width:100%!important;height:auto!important}
.reviews-wall .grw-review{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;flex:none!important;break-inside:avoid;margin:0 0 1.5rem!important;padding:0!important;overflow:visible!important} /* the slide clips to itself; the hover lift and its shadow need out */
.reviews-wall .wp-gr .grw-review-inner,.reviews-wall .wp-gr .grw-review-inner.grw-backgnd{margin:0!important;transition:transform .25s ease,box-shadow .25s ease,border-color .2s;border:1px solid var(--gold-hair)!important;border-radius:var(--radius)!important;background:var(--white)!important;height:auto!important;min-height:0!important} /* margin:0 undoes the plugin margin:4px that, with its width:100%, pushed the right border under .grw-review overflow:hidden */
.reviews-wall .wp-gr .grw-review-inner:hover{border-color:var(--gold)!important;transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(176,141,60,.45)} /* the .btn lift, softened for a wall of eight cards */
@keyframes kaylaStarPop{0%,100%{transform:scale(1)}28%{transform:scale(.8)}64%{transform:scale(1.14)}}
@keyframes kaylaStarShine{from{background-position:-100% 0}to{background-position:300% 0}}
.reviews-wall .wp-gr .grw-review-inner:hover .rpi-stars{animation:kaylaStarPop .5s cubic-bezier(.34,1.56,.64,1)}
.reviews-wall .wp-gr .grw-review-inner:hover .rpi-stars::after{background-image:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%);background-repeat:no-repeat;background-size:55% 100%;background-position:300% 0;animation:kaylaStarShine .5s .18s ease-out} /* the glint rides the gold layer, so the mask keeps it inside the star shapes */
@media (prefers-reduced-motion:reduce){.reviews-wall .wp-gr .grw-review-inner{transition:none}.reviews-wall .wp-gr .grw-review-inner:hover{transform:none}.reviews-wall .wp-gr .grw-review-inner:hover .rpi-stars,.reviews-wall .wp-gr .grw-review-inner:hover .rpi-stars::after{animation:none}}
.reviews-wall .wp-gr .grw-review .wp-google-feedback,.reviews-wall .wp-gr .grw-review .grw-scroll{max-height:none!important;height:auto!important;overflow:visible!important;overflow-y:visible!important}
.reviews-home__more{margin-top:1.5rem}
@media (max-width:900px){.reviews-wall .grw-reviews{columns:2}}
@media (max-width:700px){.reviews-wall .grw-reviews{columns:1}}
/* ---------- hero polish: hierarchy, grounded photo, entrance ---------- */
.hero{background:radial-gradient(55% 60% at 12% 20%,rgba(201,169,97,.14),transparent 70%),linear-gradient(rgba(250,247,241,.62),rgba(250,247,241,.62)),url(assets/img/marble.jpg) center/cover no-repeat,var(--cream)}
.hero__inner{grid-template-columns:1fr 1.2fr;gap:2.5rem;padding-block:56px}
.hero h1{font-size:clamp(2.2rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.015em;margin-bottom:.4em}
.hero .rule{margin:1rem 0 1.25rem}
.hero__lead{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6;max-width:36ch;margin-bottom:1.75rem}
.hero__actions{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem} /* the button pair, then See our work on its own line */
.hero__secondary{font-size:.85rem}
.hero__media img{border-radius:6px;box-shadow:0 30px 60px -30px rgba(20,20,20,.4)}
@keyframes heroIn{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero__copy>*{opacity:0;animation:heroIn .6s ease-out forwards}
.hero__copy>:nth-child(2){animation-delay:.08s}
.hero__copy>:nth-child(3){animation-delay:.16s}
.hero__copy>:nth-child(4){animation-delay:.24s}
.hero__copy>:nth-child(5){animation-delay:.32s}
.hero__viewport{opacity:0;animation:heroIn .8s ease-out .25s forwards} /* the fog overlays live on .hero__media and stay put */
.title-strip .container,.loc-hero__copy{animation:heroIn .6s ease-out backwards} /* inner pages open the same way; the location hero's photo stays put, it is that page's largest paint */
@media (prefers-reduced-motion:reduce){.hero__copy>*,.hero__viewport,.title-strip .container,.loc-hero__copy{animation:none;opacity:1}}
@media (max-width:700px){.hero__inner{grid-template-columns:1fr;padding-block:40px 0}.hero__media img{border-radius:0}}
/* ---------- image logo (used when assets/img/logo.png exists) ---------- */
/* logo.png bakes ~82px of blank margin into its 455px canvas; pull that .18 back so the mark starts at the container edge */
.logo__img{--logo-h:64px;display:block;height:var(--logo-h);width:auto;max-width:none;margin-left:calc(var(--logo-h) * -.18)} /* max-width:none: the negative margin narrows the grid track, and img{max-width:100%} would squash the logo into it */
.footer .logo__img{--logo-h:52px}
@media (max-width:900px){.logo__img{--logo-h:48px}}
/* ---------- hero image wall: three tilted columns that drift with scroll (site.js) ---------- */
.hero__media::before,.hero__media::after{display:none}
.hero__viewport{position:relative;height:560px}
.hero__wall{position:absolute;inset:-18% -24% -18% -4%;display:flex;gap:14px;transform:rotate(8deg);transform-origin:center}
.hero__col{flex:1;min-width:0;overflow:hidden}
.hero__track{display:flex;flex-direction:column;will-change:transform}
.hero__track img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin:0}
.hero__track a{display:block;margin:0 0 14px;-webkit-user-drag:none}
.hero__track img{object-fit:cover} /* aspect ratio comes inline from the photo itself */
@media (max-width:700px){.hero__viewport{height:380px;overflow:hidden}.hero__wall{gap:10px}.hero__track a{margin-bottom:10px}}
.hero__media{overflow:visible}
.hero__wall{cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none} /* a click opens the gallery; a drag shows grabbing; pan-y leaves vertical swipes to the page, so a phone scrolls past the wall instead of getting stuck on it */
.hero__wall.is-dragging{cursor:grabbing}
.hero__track img{pointer-events:none;-webkit-user-drag:none}
/* fog at the top and bottom of the wall: cream overlays, no clipping of the sides */
.hero__media::before,.hero__media::after{content:"";display:block;position:absolute;left:-26%;right:-45vw;width:auto;height:18%;border:0;border-radius:0;z-index:2;pointer-events:none;transition:opacity 1.5s ease}
.hero__media::before{top:-10%;bottom:auto;background:linear-gradient(180deg,var(--cream) 10%,rgba(250,247,241,0) 100%)}
.hero__media::after{bottom:-10%;top:auto;background:linear-gradient(0deg,var(--cream) 10%,rgba(250,247,241,0) 100%)}
.hero{border-bottom:1px solid var(--line)} /* same hairline as the header */
/* ---------- "See our work": letters swap on hover (out row slides up and fades, in row drops from above), ~500 ms total ---------- */
.hero__secondary{display:inline-block;color:var(--gold-text);font-size:.85rem;border-bottom:1px solid currentColor;padding-bottom:2px;line-height:1.2}
.flip{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.flip__row{display:inline-block;white-space:nowrap}
.flip__row span{display:inline-block;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;transition-delay:calc(var(--i) * 18ms)}
.flip__row--in{position:absolute;left:0;top:0;color:inherit}
.flip__row--in span{transform:translateY(-110%);opacity:0}
a:hover .flip__row--out span,a:focus-visible .flip__row--out span{transform:translateY(-110%);opacity:0}
a:hover .flip__row--in span,a:focus-visible .flip__row--in span{transform:none;opacity:1}
.hero__secondary .flip__row--in{color:var(--ink)}
.nav__list .flip__row--in{color:inherit} /* the nav's own gold hover colour, not the hero's ink */
@media (prefers-reduced-motion:reduce){.flip__row span{transition:none}.hero__track img,.wp-block-gallery img,.portfolio-tile img{transition:none}.nav__list a::after{transition:none}}
/* ---------- gallery mode: "See our work" expands the hero into an upright, full-width wall ---------- */
.hero__gallery-head{display:none;align-items:baseline;justify-content:space-between;gap:1rem}
.hero__gallery-head h2{margin:0}
.hero--gallery .hero__gallery-head{display:flex}
.hero--gallery .hero__inner{grid-template-columns:1fr;row-gap:1.5rem}
.hero--gallery .hero__copy{display:none}
.hero--gallery .hero__media{margin:0} /* no bleed in gallery mode: the grid sits on the layout width, on phones too */
.hero--gallery .hero__viewport{height:auto}
.hero--gallery .hero__wall{position:relative;inset:auto;transform:none;gap:16px}
.hero--gallery .hero__col{overflow:visible}
.hero.is-flipping .hero__col{flex:none} /* while the layout flips, Flip sizes the columns */
.hero--gallery .hero__wall{cursor:auto;touch-action:auto}
.hero__track img{display:block}
.hero--gallery .hero__track a{cursor:zoom-in} /* gallery mode: each photo opens the PhotoSwipe lightbox; in the tilted wall the script swallows link clicks */
.hero--gallery .wall-item--dup{display:none} /* each photo once: the grid decides the height */
.hero__gallery-foot{display:none;text-align:center;margin-top:2rem}
.hero--gallery .hero__gallery-foot{display:block}
.hero--gallery .hero__media::before,.hero--gallery .hero__media::after{opacity:0}
@media (max-width:700px){.hero--gallery .hero__wall{flex-direction:column;gap:0}.hero--gallery .hero__col{flex:none}} /* phones: one column, the three stack */
/* ---------- scroll reveal (site.js): each block below the fold waits unseen, then rises in the first time it scrolls into view ---------- */
@keyframes reveal-in{from{opacity:0;translate:0 24px}}
.reveal{opacity:0}
.is-revealed{animation:reveal-in .8s cubic-bezier(.2,.7,.2,1) backwards} /* translate rather than transform, backwards rather than forwards: it stacks on the block's own transforms and lets go once it lands, so hover lifts keep working */