/*
Theme Name: HAC SA Property Group
Theme URI: https://hacsa.com.au
Description: Custom child theme for HAC SA Property Group - "A name that means home." Sales, leasing and property management across Greater Sydney.
Author: HAC SA Property Group
Version: 1.17.1
Template: hello-elementor
Text Domain: hacsa
*/


:root{
  --bg:#F7F3EA; --bg-soft:#FCFAF4; --card:#FFFFFF;
  --band:#241611; --band-2:#33211a;
  --line:#E7DECE; --line-2:#D8CDB8;
  --clay:#A9773C; --clay-2:#C6944E; --gold:#CDA05E;
  --brown:#6E3D22;
  --ink:#2A1B12; --text:#574B3D; --dim:#928472;
  --shadow:0 22px 55px -28px rgba(70,45,20,.45);
  --maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Inter",system-ui,sans-serif;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Archivo",-apple-system,system-ui,sans-serif;color:var(--ink);
  font-weight:600;line-height:1.06;margin:0 0 .4em;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,6vw,4.5rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.35rem}
p{margin:0 0 1.1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em{font-style:italic;color:var(--brown)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:"Space Mono",monospace;text-transform:uppercase;
  letter-spacing:.22em;font-size:.72rem;color:var(--clay)}
.mono{font-family:"Space Mono",monospace}
.muted{color:var(--dim)}
.center{text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.5em;
  border-radius:3px;font-weight:600;font-size:.92rem;cursor:pointer;
  border:1px solid transparent;transition:.35s ease;letter-spacing:.01em}
.btn-primary{background:var(--clay);color:#fff;box-shadow:0 10px 24px -14px rgba(169,119,60,.8)}
.btn-primary:hover{background:var(--brown)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg-soft)}
.btn-onband{background:var(--gold);color:#2a1608}
.btn-onband:hover{background:#e0bd84}

/* header */
header.site{position:sticky;top:0;z-index:50;background:var(--band);
  border-bottom:1px solid rgba(205,160,94,.25);transition:box-shadow .4s ease}
header.site.scrolled{box-shadow:0 12px 34px -20px rgba(0,0,0,.65)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;
  transition:padding .4s cubic-bezier(.2,.7,.2,1)}
.brand img{height:112px;width:auto;display:block;transition:height .4s cubic-bezier(.2,.7,.2,1)}
header.site.scrolled .nav{padding:8px 0}
header.site.scrolled .brand img{height:60px}
@media(max-width:960px){.brand img{height:84px}header.site.scrolled .brand img{height:52px}}
.menu{display:flex;gap:30px;align-items:center}
.menu a{font-size:.9rem;font-weight:500;color:#E9DFCF;position:relative;padding:4px 0}
.menu a:hover{color:#fff}
.menu a.active{color:var(--gold)}
.menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--gold);transition:width .32s ease}
.menu a:hover::after,.menu a.active::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav-tel{font-family:"Space Mono",monospace;font-size:.82rem;color:#E9DFCF}
.burger{display:none;background:none;border:0;font-size:1.5rem;color:#E9DFCF;cursor:pointer}
@media(max-width:960px){
  .menu,.nav-tel{display:none}
  .burger{display:block}
  .menu.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--band-2);padding:20px 28px;gap:18px}
}

/* hero */
.hero{position:relative;min-height:84vh;display:flex;align-items:flex-end;
  color:#fff;overflow:hidden}
.hero .art{position:absolute;inset:0;z-index:0}
.hero video.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  will-change:transform}
.hero .scrim{
	/* Two washes. The vertical one seats the search panel against the page
	   below; the diagonal one darkens the left so the headline stays legible
	   no matter which slide is showing — they vary a lot in brightness. */
	position:absolute; inset:0;
	background:
		linear-gradient(105deg, rgba(30,18,10,.70) 0%, rgba(30,18,10,.44) 38%, rgba(30,18,10,0) 68%),
		linear-gradient(180deg, rgba(40,25,14,.20) 0%, rgba(40,25,14,.20) 45%, rgba(30,18,10,.62) 100%);
}
.hero .wrap{position:relative;z-index:2;padding-bottom:54px;padding-top:110px;width:100%}
.hero h1{color:#fff;max-width:15ch;text-shadow:0 2px 30px rgba(30,18,8,.3)}
.hero .lede{font-size:1.15rem;max-width:46ch;color:rgba(255,255,255,.94);margin-bottom:28px}
.hero .lede em{color:#F3D8AE}
.hero .eyebrow{color:#F3D8AE}

/* search bar */
.searchbar{background:rgba(255,255,255,.97);border-radius:5px;box-shadow:var(--shadow);
  display:flex;flex-wrap:wrap;align-items:stretch;overflow:hidden;max-width:920px;margin-top:8px}
.searchbar .tabs{display:flex;width:100%;border-bottom:1px solid var(--line)}
.searchbar .tabs button{flex:0 0 auto;background:none;border:0;padding:14px 22px;
  font-family:"Inter";font-weight:600;font-size:.85rem;color:var(--dim);cursor:pointer}
.searchbar .tabs button.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--clay)}
.searchbar .fields{display:flex;flex-wrap:wrap;width:100%}
.searchbar .f{flex:1 1 180px;padding:14px 18px;border-right:1px solid var(--line);color:var(--ink)}
.searchbar .f label{display:block;font-family:"Space Mono",monospace;font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.searchbar .f .v{font-size:.95rem;font-weight:600}
.searchbar .go{flex:0 0 auto;border:0;background:var(--clay);color:#fff;padding:0 30px;
  font-weight:700;cursor:pointer;font-size:.95rem}
.searchbar .go:hover{background:var(--brown)}
@media(max-width:640px){.searchbar .f{flex:1 1 50%;border-bottom:1px solid var(--line)}.searchbar .go{flex:1 1 100%;padding:16px}}

/* sections */
section{padding:94px 0}
.sec-head{max-width:640px;margin-bottom:46px}
.sec-head.center{margin-left:auto;margin-right:auto}
.line-top{border-top:1px solid var(--line)}

/* intent cards */
.intent{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.intent a{background:var(--card);padding:38px 28px;transition:.3s;display:block}
.intent a:hover{background:var(--bg-soft)}
.intent .n{font-family:"Space Mono",monospace;font-size:.7rem;color:var(--clay);letter-spacing:.16em}
.intent h3{margin:14px 0 8px}
.intent p{font-size:.92rem;margin:0;color:var(--dim)}
@media(max-width:860px){.intent{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.intent{grid-template-columns:1fr}}

/* listings grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:5px;overflow:hidden;
  transition:.4s;box-shadow:0 2px 10px -6px rgba(70,45,20,.15)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .art{aspect-ratio:4/3;position:relative;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover .art{transform:scale(1.07)}
.card .tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);
  font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 10px;border-radius:2px;color:var(--brown)}
.card .tag.lease{background:var(--brown);color:#F3D8AE}
/* spoken for but not yet settled — amber, still eye-catching */
.card .tag.pending{background:var(--gold);color:#2a1608}
/* finished — present but visually retired, and the photo dims to match */
.card .tag.done{background:rgba(36,22,17,.9);color:#D8C4A6}
.card:has(.tag.done) .art{filter:saturate(.55) brightness(.94)}
.card .body{padding:20px 22px 24px}
.card .price{font-family:"Archivo",serif;font-size:1.4rem;color:var(--ink)}
.card .addr{font-weight:600;color:var(--ink);margin:6px 0 2px}
.card .sub{font-size:.86rem;color:var(--dim)}
.card .specs{display:flex;gap:18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  font-family:"Space Mono",monospace;font-size:.74rem;color:var(--text)}
.card .specs b{color:var(--ink)}
/* property type, set off from the bed/bath/car run by a divider like the portals use */
.card .specs .ptype{margin-left:auto;padding-left:14px;position:relative;color:var(--dim);
  white-space:nowrap}
.card .specs .ptype::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:var(--line-2)}
@media(max-width:380px){.card .specs .ptype{display:none}}

/* placeholder art fills — bright, warm, sunlit */
.ph{background-size:cover;background-position:center}
.ph::after{content:"placeholder";position:absolute;bottom:8px;right:10px;
  font-family:"Space Mono",monospace;font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(60,40,22,.4)}
.ph1{background:linear-gradient(150deg,#f2e0c4,#d9b88c 55%,#b58f5f)}
.ph2{background:linear-gradient(150deg,#e2e7d5,#bcc79f 60%,#94a473)}
.ph3{background:linear-gradient(150deg,#f3cfab,#dc9d6b 60%,#b76f3e)}
.ph4{background:linear-gradient(150deg,#e2ebef,#b8cad3 60%,#8ea6b1)}
.ph5{background:linear-gradient(150deg,#f6e6c6,#dcbf88 55%,#c09b58)}
.ph6{background:linear-gradient(150deg,#ede2d1,#cdb99d 60%,#a89073)}
.hero-art{background:linear-gradient(120deg,rgba(255,240,218,.22),rgba(120,80,45,.28)),
  linear-gradient(150deg,#e9cda2,#cb9e67 45%,#946538);
  background-size:200% 200%,200% 200%;animation:heroShift 22s ease-in-out infinite;
  will-change:transform,background-position}

/* statement */
.statement{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.statement h2{font-size:clamp(2rem,4vw,3.1rem);max-width:16ch}
@media(max-width:820px){.statement{grid-template-columns:1fr;gap:28px}}

/* proof band */
.proof{background:linear-gradient(135deg,#efe6d4,#e6d6ba);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center}
.proof .big{font-family:"Archivo",serif;font-size:2.4rem;color:var(--brown);line-height:1}
.proof .lbl{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8a7659;margin-top:10px}
@media(max-width:720px){.proof .grid4{grid-template-columns:repeat(2,1fr);gap:32px}}

/* suburbs */
.suburbs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.suburbs a{position:relative;aspect-ratio:3/4;border-radius:5px;overflow:hidden;color:#fff;
  display:flex;align-items:flex-end;padding:22px}
.suburbs a .scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(30,18,8,.72))}
.suburbs a .lab{position:relative;z-index:2}
.suburbs a .lab b{font-family:"Archivo",serif;font-size:1.3rem;display:block}
.suburbs a .lab span{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.85)}
.suburbs a:hover .art{transform:scale(1.05)}
.suburbs .art{transition:.6s}
@media(max-width:760px){.suburbs{grid-template-columns:repeat(2,1fr)}}

/* journal */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.jgrid article .art{aspect-ratio:3/2;border-radius:5px;margin-bottom:18px;position:relative}
.jgrid article .k{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--clay)}
.jgrid article h3{margin:8px 0 6px;font-size:1.15rem}
.jgrid article p{font-size:.9rem;color:var(--dim);margin:0}
@media(max-width:820px){.jgrid{grid-template-columns:1fr;gap:28px}}

/* cta panel */
.cta-panel{position:relative;border-radius:6px;overflow:hidden;color:#fff;text-align:center}
.cta-panel .art{position:absolute;inset:0}
.cta-panel .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,25,14,.5),rgba(40,25,14,.68))}
.cta-panel .inner{position:relative;z-index:2;padding:88px 24px}
.cta-panel h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta-panel p{max-width:48ch;margin-inline:auto;color:rgba(255,255,255,.92)}

/* page hero */
.page-hero{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:60px 0 40px}
.page-hero .eyebrow{margin-bottom:14px}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:5px;padding:16px 18px;margin-bottom:40px}
.filters .f{border:1px solid var(--line);border-radius:3px;padding:9px 14px;font-size:.85rem;
  font-weight:600;color:var(--ink);background:var(--bg-soft)}
.filters .spacer{flex:1}
.filters .count{font-family:"Space Mono",monospace;font-size:.78rem;color:var(--dim)}

/* single property */
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:58vh}
.gallery .g{position:relative;border-radius:5px;overflow:hidden}
.gallery .g:first-child{grid-row:1/3}
@media(max-width:700px){.gallery{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
  .gallery .g{aspect-ratio:16/10}.gallery .g:first-child{grid-row:auto}}
.prop-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;margin-top:54px}
@media(max-width:860px){.prop-layout{grid-template-columns:1fr}}
.prop-specs{display:flex;gap:34px;flex-wrap:wrap;font-family:"Space Mono",monospace;
  font-size:.82rem;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:24px 0}
.prop-specs b{color:var(--ink);font-size:1.05rem;display:block;font-family:"Archivo",serif}
.feature-list{columns:2;gap:30px;padding:0;list-style:none;margin:24px 0}
.feature-list li{padding:8px 0 8px 22px;position:relative;font-size:.92rem;break-inside:avoid}
.feature-list li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:8px;
  background:var(--clay);border-radius:50%}
.agent-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:5px;padding:26px;position:sticky;top:104px}
.agent-card .who{display:flex;gap:14px;align-items:center;margin-bottom:20px}
.agent-card .avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#c6944e,#6e3d22)}
.agent-card .who b{font-family:"Archivo",serif;font-size:1.1rem;color:var(--ink);display:block}
.agent-card .who span{font-size:.8rem;color:var(--dim)}
.map-ph{aspect-ratio:16/9;border-radius:5px;margin-top:40px;position:relative;
  background:linear-gradient(135deg,#e6e9df,#c7cdb8)}

/* forms */
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.form .row{grid-template-columns:1fr}}
.form label{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:6px;display:block}
.form input,.form select,.form textarea{width:100%;padding:13px 14px;border:1px solid var(--line-2);
  border-radius:3px;font-family:"Inter";font-size:.95rem;background:var(--card);color:var(--ink)}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--clay)}
.appraise{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:860px){.appraise{grid-template-columns:1fr;gap:36px}}
.steps{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:22px}
.steps li{display:flex;gap:16px}
.steps .num{font-family:"Archivo",serif;font-size:1.3rem;color:var(--clay);flex:0 0 auto;width:34px}
.steps b{color:var(--ink);display:block}
.steps p{margin:2px 0 0;font-size:.9rem;color:var(--dim)}

/* footer */
footer.site{background:var(--band);color:#C9BBA6;padding:70px 0 34px;
  border-top:3px solid var(--clay)}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media(max-width:820px){footer.site .cols{grid-template-columns:1fr 1fr;gap:32px}}
footer.site h4{color:#fff;font-size:1rem;margin-bottom:16px}
footer.site .fbrand img{height:130px;width:auto;margin-bottom:12px}
footer.site a{color:#C9BBA6;font-size:.9rem;display:block;padding:5px 0}
footer.site a:hover{color:#fff}
footer.site .legal{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:"Space Mono",monospace;font-size:.72rem;color:#8B7C66}
html.motion-ready .reveal{opacity:0;transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
/* Must carry html.motion-ready too. The hidden state above scores 0-2-1 and a
   bare .reveal.in scores 0-2-0, so the hidden rule won and revealed content
   stayed at opacity 0 forever. It went unnoticed because the reduced-motion
   block below forces opacity:1 !important, and this site was only ever
   reviewed on a machine with reduce-motion switched on. */
html.motion-ready .reveal.in{opacity:1;transform:none}

/* scroll progress bar */
.scrollprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,#C6944E,#CDA05E,#6E3D22)}
/* back-to-top */
.totop{position:fixed;right:24px;bottom:24px;z-index:90;width:52px;height:52px;border-radius:50%;
  background:var(--clay);color:#fff;border:0;font-size:1.3rem;cursor:pointer;line-height:1;
  opacity:0;transform:translateY(16px);pointer-events:none;transition:.35s ease;box-shadow:var(--shadow)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--brown);transform:translateY(-3px)}
/* suburb marquee */
.marquee{background:var(--band);overflow:hidden;white-space:nowrap;padding:15px 0;
  border-top:1px solid rgba(205,160,94,.22);border-bottom:1px solid rgba(205,160,94,.22)}
.marquee .track{display:inline-block;will-change:transform;
  animation:scrollx 46s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee i{font-style:normal;font-family:"Space Mono",monospace;letter-spacing:.2em;
  text-transform:uppercase;font-size:.72rem;margin:0 22px;color:#C9BBA6}
.marquee i b{color:var(--gold)}
/* subtle button arrow slide */
.btn .ar{display:inline-block;transition:transform .3s ease}
.btn:hover .ar{transform:translateX(4px)}

@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes heroShift{0%{background-position:0% 50%,100% 50%}
  50%{background-position:100% 50%,0% 50%}100%{background-position:0% 50%,100% 50%}}
/* ===== values ===== */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:860px){.values{grid-template-columns:1fr;gap:20px}}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:34px 30px 30px;
  transition:.4s cubic-bezier(.2,.7,.2,1);position:relative}
.vcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2)}
.vcard .n{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.2em;color:var(--clay)}
.vcard h3{margin:16px 0 12px;font-size:1.3rem}
.vcard p{font-size:.94rem;color:var(--text);margin:0}
.vcard .who{display:inline-block;margin-top:20px;font-family:"Space Mono",monospace;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brown);background:#EFE4D0;
  border-radius:20px;padding:5px 12px}
/* ===== about page ===== */
/* About story — one centred article column now the slideshow is gone.
   The text stays left-aligned like the rest of the site; it is the COLUMN that
   is centred. That is what clears the dead space the old 1fr 1fr grid left
   behind, without making this page feel unrelated to the others. */
/* Left-aligned, NOT centred: the story shares the page hero's left edge, so the
   h1, the intro line, the paragraphs and the pullquote all sit on one axis.
   Both live inside .wrap, so margin-left:0 is all it takes to line them up.
   NB rem, not ch. `ch` is font-relative, so 42rem on every element in the column
   is what keeps them equal — 64ch of Archivo at 1.85rem is nearly 400px wider
   than 64ch of Inter at 1.04rem. */
.story{display:block;max-width:42rem;margin:0}
.story .prose{max-width:none}
/* A lead paragraph, so the eye lands somewhere before the body copy settles. */
.story .prose > p:first-of-type{font-size:1.22rem;line-height:1.62;color:var(--ink)}
.story .prose > p:first-of-type em{color:var(--brown)}
/* The pullquote shares the same column, so its clay rule lines up with the left
   edge of the paragraphs above rather than floating on its own axis. */
/* Doubled-up class on purpose: .pullquote{margin:36px 0} is declared after
   this and ties on specificity, so a bare .about-quote loses the auto
   margins and the quote drifts off the column's left edge. */
.pullquote.about-quote{max-width:42rem;margin:56px 0 0}
@media(max-width:700px){
  .story .prose > p:first-of-type{font-size:1.1rem}
  .about-quote{margin-top:40px}
}
.story .art{aspect-ratio:4/5;border-radius:6px;position:relative}
.pullquote{border-left:3px solid var(--clay);padding:6px 0 6px 28px;margin:36px 0;
  font-family:"Archivo",sans-serif;font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.32;
  color:var(--ink);letter-spacing:-.02em;font-weight:500}
.pullquote cite{display:block;font-family:"Space Mono",monospace;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-style:normal;margin-top:16px}
.prose{max-width:62ch}
.prose p{font-size:1.04rem;line-height:1.75}

/* ===== team page ===== */
.team-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px;
  border-bottom:1px solid var(--line);padding-bottom:22px}
.team-filter button{background:none;border:1px solid var(--line-2);border-radius:30px;
  padding:9px 20px;font-family:"Inter",sans-serif;font-size:.85rem;font-weight:500;
  color:var(--text);cursor:pointer;transition:.3s}
.team-filter button:hover{border-color:var(--clay);color:var(--ink)}
.team-filter button.on{background:var(--clay);border-color:var(--clay);color:#fff}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);gap:28px}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr}}
.tcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;transition:.45s cubic-bezier(.2,.7,.2,1)}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tcard.hide{display:none}
.tcard .portrait{aspect-ratio:1/1;position:relative;overflow:hidden;background:var(--bg-soft)}
.tcard .portrait img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tcard:hover .portrait img{transform:scale(1.05)}
.tcard .logofill{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,#FCFAF4,#F3EDE0 55%,#E9DFCB)}
.tcard .logofill img{width:60%;height:auto;opacity:.92;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tcard:hover .logofill img{transform:scale(1.05)}
.tcard .tbody{padding:20px 22px 24px}
.tcard .tcontact{list-style:none;padding:0;margin:14px 0 0;font-family:"Space Mono",monospace;
  font-size:.74rem;color:var(--text)}
.tcard .tcontact li{padding:3px 0;display:flex;align-items:center;gap:8px}
.tcard .tcontact li span{color:var(--clay)}
/* agent profile page */
.agent-hero{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;
  padding:56px 0 20px}
@media(max-width:860px){.agent-hero{grid-template-columns:1fr;gap:30px}}
.agent-hero .pic{aspect-ratio:1/1;border-radius:6px;overflow:hidden;position:relative;
  background:var(--bg-soft);border:1px solid var(--line)}
.agent-hero .pic img{width:100%;height:100%;object-fit:cover;object-position:center}
.agent-hero .pic .logofill{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(155deg,#FCFAF4,#F3EDE0 55%,#E9DFCB)}
.agent-hero .pic .logofill img{width:58%;height:auto;object-fit:contain;opacity:.92}
.agent-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem);margin-bottom:6px}
.agent-hero .arole{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay);margin-bottom:26px}
.agent-hero .abio{font-size:1.05rem;line-height:1.7;max-width:56ch}
.quals{margin-top:28px;padding:24px 26px;background:var(--bg-soft);
  border:1px solid var(--line);border-left:3px solid var(--clay);border-radius:0 5px 5px 0}
.quals h4{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--clay);margin:0 0 14px}
.quals ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.quals li{position:relative;padding-left:24px;font-size:.93rem;color:var(--ink);font-weight:500}
.quals li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:11px;
  border-radius:50%;background:var(--clay);
  box-shadow:inset 0 0 0 2px var(--bg-soft),0 0 0 1px var(--clay)}
.quals p.mono{font-size:.66rem;color:var(--dim);margin:14px 0 0;letter-spacing:.06em}
.acontact{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.adetails{list-style:none;padding:22px 0 0;margin:26px 0 0;border-top:1px solid var(--line);
  font-family:"Space Mono",monospace;font-size:.8rem;display:grid;gap:9px}
.adetails li span{color:var(--dim);display:inline-block;min-width:78px}
.tcard .tname{font-family:"Archivo",sans-serif;font-weight:600;font-size:1.25rem;color:var(--ink);
  letter-spacing:-.02em;margin:0}
.tcard .trole{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--clay);margin-top:7px}
.tcard .tbio{font-size:.9rem;color:var(--dim);margin:14px 0 0;line-height:1.6}
.tspec{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line)}
.tspec span{font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brown);background:#EFE4D0;border-radius:20px;padding:5px 11px}
.tcard .tlinks{display:flex;gap:14px;margin-top:18px;font-family:"Space Mono",monospace;
  font-size:.72rem;letter-spacing:.06em}
.tcard .tlinks span{color:var(--clay);border-bottom:1px solid transparent;transition:.3s}
.tcard:hover .tlinks span{border-color:var(--clay)}
/* join-us band */
.joinus{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:52px 48px}
@media(max-width:820px){.joinus{grid-template-columns:1fr;gap:28px;padding:36px 28px}}

/* ===== initial page-load intro (BresicWhitney-style curtain) ===== */
.intro{position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.intro-lock{display:flex;flex-direction:column;align-items:center}
/* 1 · the mark (triangle only — the wordmark below it is cropped away) */
.intro-mark{margin-bottom:26px;opacity:0;transform:translateY(-26px) scale(.86);
  animation:markIn 1.05s 1.35s cubic-bezier(.16,.9,.24,1) forwards}
.intro-mark img{width:210px;height:auto;display:block}
@media(max-width:640px){.intro-mark{margin-bottom:18px}.intro-mark img{width:150px}}
/* 2 · the wordmark, set as type and revealed letter by letter */
.intro-word{display:flex;overflow:hidden;padding-bottom:4px}
.intro-word span{display:inline-block;font-family:"Archivo",sans-serif;font-weight:700;
  font-size:clamp(2.6rem,8vw,4.6rem);line-height:1;letter-spacing:-.02em;color:var(--brown);
  transform:translateY(115%);animation:letterUp .95s cubic-bezier(.72,0,.16,1) forwards}
.intro-word span.sp{width:.28em}
.intro-sub{font-family:"Archivo",sans-serif;font-weight:600;
  font-size:clamp(.62rem,1.5vw,.82rem);letter-spacing:.42em;text-transform:uppercase;
  color:var(--clay);margin-top:14px;opacity:0;transform:translateY(8px);
  animation:subIn 1s 1.0s cubic-bezier(.2,.7,.2,1) forwards}
.intro .bar{position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,#E6C48C,#CDA05E,#6E3D22);
  animation:introBar 2.5s .1s cubic-bezier(.4,0,.2,1) forwards}
body.intro-done .intro{opacity:0;transform:scale(1.05);
  transition:opacity .85s ease,transform 1.1s cubic-bezier(.6,0,.3,1)}
@keyframes letterUp{to{transform:none}}
@keyframes subIn{to{opacity:1;transform:none}}
@keyframes markIn{60%{opacity:1}to{opacity:1;transform:none}}
@keyframes introBar{to{width:100%}}
/* hero reveal after intro */
html.motion-ready .hero-reveal{opacity:0;transform:translateY(28px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
body.ready .hero-reveal{opacity:1;transform:none}
.hero h1{overflow:hidden}
.hero h1 span{display:block}
html.motion-ready .hero h1 span{transform:translateY(110%);
  transition:transform 1.05s cubic-bezier(.7,0,.2,1)}
body.ready .hero h1 span{transform:none}

/* Reduced motion: no travel or parallax, but the intro still plays as a gentle fade
   (opacity changes are not "motion" and keep the brand moment intact). */
@media(prefers-reduced-motion:reduce){
  html:not(.force-motion) .reveal,html:not(.force-motion) .hero-reveal{opacity:1!important;transform:none!important;transition:none!important}
  html:not(.force-motion) .hero h1 span{transform:none!important;transition:none!important}
  html:not(.force-motion) .hero-art{animation:none!important}
  html:not(.force-motion) .card:hover,html:not(.force-motion) .tcard:hover,html:not(.force-motion) .vcard:hover,html:not(.force-motion) .totop:hover{transform:none!important}
  html:not(.force-motion) .card:hover .art,html:not(.force-motion) .tcard:hover .portrait img{transform:none!important}
  html:not(.force-motion) .intro-word span{transform:none;opacity:0;animation:fadeIn .55s ease forwards}
  html:not(.force-motion) .intro-sub{transform:none;animation:fadeIn .6s .95s ease forwards}
  html:not(.force-motion) .intro-mark{transform:none;animation:fadeIn .7s 1.3s ease forwards}
  html:not(.force-motion) body.intro-done .intro{transform:none;transition:opacity .6s ease}
}
@keyframes fadeIn{to{opacity:1}}

/* =====================================================================
   Elementor Site Settings override
   Elementor prints `.elementor-kit-NNN h1 … h6` (specificity 0,1,1) which
   outranks our element-level rules. `body.hacsa` (0,1,2) reclaims them.
   ===================================================================== */
body.hacsa{font-family:"Inter",system-ui,-apple-system,sans-serif;color:var(--text);
  background:var(--bg);font-size:17px;line-height:1.65}
body.hacsa h1,body.hacsa h2,body.hacsa h3,
body.hacsa h4,body.hacsa h5,body.hacsa h6{
  font-family:"Archivo",-apple-system,system-ui,sans-serif;
  color:var(--ink);font-weight:600;line-height:1.06;letter-spacing:-.02em}
body.hacsa h1{font-size:clamp(2.6rem,6vw,4.5rem)}
body.hacsa h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
body.hacsa h3{font-size:1.35rem}
body.hacsa h4{font-size:1rem}
body.hacsa p{margin:0 0 1.1em}
body.hacsa a{color:inherit;text-decoration:none}

/* light-on-dark areas the kit would otherwise darken */
body.hacsa .hero h1,body.hacsa .cta-panel h2,body.hacsa .suburbs a .lab b{color:#fff}
body.hacsa .hero .lede{color:rgba(255,255,255,.94)}
body.hacsa .hero .eyebrow,body.hacsa .cta-panel .eyebrow{color:#F3D8AE}
body.hacsa .proof .big{color:var(--brown)}
body.hacsa footer.site h4{color:#fff}
body.hacsa footer.site a{color:#C9BBA6}
body.hacsa footer.site a:hover{color:#fff}
body.hacsa .menu a{color:#E9DFCF}
body.hacsa .menu a.active{color:var(--gold)}
body.hacsa .intro-word span{color:var(--brown)}
body.hacsa .intro-sub{color:var(--clay)}
body.hacsa .agent-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
body.hacsa .tcard .tname{font-size:1.25rem;color:var(--ink)}
body.hacsa .card .price{font-size:1.4rem;color:var(--ink)}
body.hacsa .vcard h3,body.hacsa .intent h3{font-size:1.3rem}
body.hacsa .jgrid article h3{font-size:1.15rem}
body.hacsa .quals h4{font-family:"Space Mono",monospace;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--clay)}

/* Hello Elementor resets that fight the layout */
body.hacsa .site-header,body.hacsa .site-footer{display:none}
body.hacsa main.site-main,body.hacsa .site-main{max-width:none;padding:0;margin:0}

/* WordPress nav_menu outputs <li> items; strip list styling so they sit inline */
body.hacsa .menu ul,body.hacsa .menu li{list-style:none;margin:0;padding:0}
body.hacsa .menu li{display:inline-flex;align-items:center}
body.hacsa .menu li a{padding:4px 0}
body.hacsa footer.site .menu li{display:block}
@media(max-width:960px){body.hacsa .menu.open li{display:block;width:100%}}

/* map embeds */
.map-embed{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;
  margin-top:40px;border:1px solid var(--line);background:var(--bg-soft)}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.appraise .map-embed{margin-top:0;aspect-ratio:4/3}

/* photo count badge on the property gallery */
.gallery{position:relative}
.gallery-count{position:absolute;right:14px;bottom:14px;z-index:2;
  background:rgba(23,16,11,.82);color:#E6C48C;border:1px solid rgba(205,160,94,.4);
  font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 10px;border-radius:2px}

/* ---------------------------------------------------------------
   WPForms — bend the plugin's "modern" renderer to the HAC SA brand.
   WPForms Modern exposes CSS custom properties on .wpforms-container,
   so most of this is just re-pointing those at our tokens. The direct
   rules below cover what the variables don't reach (fonts, hover,
   focus ring, dropdown arrow, confirmation message).
   --------------------------------------------------------------- */
body.hacsa .wpforms-container{
  --wpforms-field-border-radius:3px;
  --wpforms-field-border-size:1px;
  --wpforms-field-border-style:solid;
  --wpforms-field-background-color:var(--card);
  --wpforms-field-border-color:var(--line-2);
  --wpforms-field-text-color:var(--ink);
  --wpforms-label-color:var(--dim);
  --wpforms-label-sublabel-color:var(--dim);
  --wpforms-label-error-color:#B4442E;
  --wpforms-button-border-radius:3px;
  --wpforms-button-background-color:var(--clay);
  --wpforms-button-border-color:var(--clay);
  --wpforms-button-text-color:#fff;
  --wpforms-field-size-input-height:46px;
  --wpforms-field-size-font-size:.95rem;
  --wpforms-field-size-padding-h:14px;
  --wpforms-button-size-height:46px;
  --wpforms-button-size-font-size:.92rem;
  --wpforms-button-size-padding-h:26px;
  margin:0;
}
body.hacsa .wpforms-container .wpforms-form{
  font-family:"Inter",system-ui,sans-serif;
}
/* fields */
body.hacsa .wpforms-container .wpforms-form input[type=text],
body.hacsa .wpforms-container .wpforms-form input[type=email],
body.hacsa .wpforms-container .wpforms-form input[type=tel],
body.hacsa .wpforms-container .wpforms-form input[type=number],
body.hacsa .wpforms-container .wpforms-form input[type=url],
body.hacsa .wpforms-container .wpforms-form select,
body.hacsa .wpforms-container .wpforms-form textarea{
  font-family:"Inter",system-ui,sans-serif;
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:3px;
  color:var(--ink);
  box-shadow:none;
  transition:border-color .25s ease,box-shadow .25s ease;
}
body.hacsa .wpforms-container .wpforms-form textarea{min-height:120px;resize:vertical}
body.hacsa .wpforms-container .wpforms-form input::placeholder,
body.hacsa .wpforms-container .wpforms-form textarea::placeholder{color:var(--dim);opacity:1}
body.hacsa .wpforms-container .wpforms-form input:focus,
body.hacsa .wpforms-container .wpforms-form select:focus,
body.hacsa .wpforms-container .wpforms-form textarea:focus{
  outline:none;
  border-color:var(--clay);
  box-shadow:0 0 0 3px rgba(169,119,60,.14);
}
/* select: replace the browser chrome with our own caret */
body.hacsa .wpforms-container .wpforms-form select{
  appearance:none;-webkit-appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A9773C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
/* labels — match the .form label treatment used elsewhere */
body.hacsa .wpforms-container .wpforms-form .wpforms-field-label,
body.hacsa .wpforms-container .wpforms-form .wpforms-field-label-inline{
  font-family:"Space Mono",monospace;
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
  font-weight:400;
  margin-bottom:6px;
}
body.hacsa .wpforms-container .wpforms-form .wpforms-field-sublabel{
  font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}
body.hacsa .wpforms-container .wpforms-form .wpforms-required-label{color:var(--clay)}
/* submit */
body.hacsa .wpforms-container .wpforms-form button[type=submit],
body.hacsa .wpforms-container .wpforms-form .wpforms-submit{
  font-family:"Inter",system-ui,sans-serif;
  font-weight:600;letter-spacing:.01em;
  background:var(--clay);
  border:1px solid transparent;
  border-radius:3px;
  color:#fff;
  box-shadow:0 10px 24px -14px rgba(169,119,60,.8);
  transition:.35s ease;
  cursor:pointer;
}
body.hacsa .wpforms-container .wpforms-form button[type=submit]:hover,
body.hacsa .wpforms-container .wpforms-form .wpforms-submit:hover{
  background:var(--brown);border-color:transparent;color:#fff;
}
/* the enquiry card is narrow — let the button fill it */
body.hacsa .agent-card .wpforms-container .wpforms-form button[type=submit]{width:100%}
/* validation + confirmation */
body.hacsa .wpforms-container .wpforms-form label.wpforms-error{
  font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:#B4442E;
}
body.hacsa .wpforms-container .wpforms-form input.wpforms-error,
body.hacsa .wpforms-container .wpforms-form textarea.wpforms-error,
body.hacsa .wpforms-container .wpforms-form select.wpforms-error{border-color:#B4442E}
body.hacsa .wpforms-confirmation-container-full,
body.hacsa div[submit-success]>.wpforms-confirmation-container-full{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-left:3px solid var(--clay);
  border-radius:3px;
  color:var(--text);
  padding:20px 22px;
}
body.hacsa .wpforms-confirmation-container-full p{margin:0}
/* WPForms sizes the whole form to its "medium" field width, which strands it
   at ~40% of our column. Let the container fill whatever box it's dropped in. */
body.hacsa .form .wpforms-container,
body.hacsa .appraise .wpforms-container,
body.hacsa .agent-card .wpforms-container{width:100%}
body.hacsa .wpforms-container .wpforms-field-medium,
body.hacsa .wpforms-container .wpforms-field-small,
body.hacsa .wpforms-container .wpforms-field-large{max-width:100%;width:100%}
body.hacsa .appraise .wpforms-container .wpforms-form button[type=submit]{min-width:190px}

/* "under offer" / "sold" note on the single property page */
.status-note{margin:18px 0 0;padding:14px 16px;border-radius:3px;font-size:.92rem;
  border-left:3px solid var(--clay);background:var(--bg-soft);color:var(--text)}
.status-note.pending{border-left-color:var(--gold)}
.status-note.done{border-left-color:var(--band);color:var(--dim)}

/* ---------------------------------------------------------------------------
   Load more
   --------------------------------------------------------------------------- */
.loadmore-wrap{margin-top:56px}
.loadmore{min-width:210px;justify-content:center}
.loadmore .rest{color:var(--dim);font-weight:400;margin-left:.4em}
.loadmore:hover .rest{color:inherit;opacity:.75}
.loadmore[disabled]{opacity:.6;cursor:default}

/* ---------------------------------------------------------------------------
   Scroll motion
   Defaults are the FINISHED state. The JS adds the starting offsets only when
   motion is allowed, so a script failure or an old browser simply shows the
   content rather than hiding it.
   --------------------------------------------------------------------------- */

/* headings revealed line by line */
.sec-head h2 .ln,
.page-hero h1 .ln{display:block;overflow:hidden}
.sec-head h2 .ln-i,
.page-hero h1 .ln-i{display:block}
html.motion-ready .sec-head h2 .ln-i,
html.motion-ready .page-hero h1 .ln-i{transform:translateY(105%);
  transition:transform .9s cubic-bezier(.72,0,.16,1)}
/* Same specificity trap as .reveal.in above — the hidden state is prefixed
   with html.motion-ready, so the visible state has to be as well. */
html.motion-ready .sec-head h2.lines-in .ln-i,
html.motion-ready .page-hero h1.lines-in .ln-i{transform:none}
.sec-head h2 .ln:nth-child(2) .ln-i,
.page-hero h1 .ln:nth-child(2) .ln-i{transition-delay:.08s}
.sec-head h2 .ln:nth-child(3) .ln-i,
.page-hero h1 .ln:nth-child(3) .ln-i{transition-delay:.16s}
.sec-head h2 .ln:nth-child(n+4) .ln-i,
.page-hero h1 .ln:nth-child(n+4) .ln-i{transition-delay:.24s}

/* card imagery drifts a few pixels as it crosses the viewport */
.card .art,.cta-panel .art{--drift:0px}
.card .art{transform:translate3d(0,var(--drift),0)}
.card:hover .art{transform:translate3d(0,var(--drift),0) scale(1.07)}

/* section rules draw in from the left */
.line-top{position:relative;border-top-color:transparent}
.line-top::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--line);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.line-top.drawn::before{width:100%}

@media(prefers-reduced-motion:reduce){
  html:not(.force-motion) .sec-head h2 .ln-i,html:not(.force-motion) .page-hero h1 .ln-i{transform:none!important;transition:none!important}
  html:not(.force-motion) .card .art,html:not(.force-motion) .cta-panel .art{--drift:0px!important}
  html:not(.force-motion) .line-top{border-top-color:var(--line)}
  html:not(.force-motion) .line-top::before{display:none}
}

/* ---------------------------------------------------------------------------
   Status pills — replaces the status dropdown.
   Plain links, so every filtered view has its own URL and opens in a new tab
   like anything else on the page.
   --------------------------------------------------------------------------- */
.pills{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pill{display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--bg-soft);color:var(--text);
  font-size:.82rem;font-weight:600;line-height:1;white-space:nowrap;
  transition:background .25s ease,border-color .25s ease,color .25s ease}
.pill:hover{border-color:var(--clay);color:var(--ink)}
.pill.on{background:var(--clay);border-color:var(--clay);color:#fff}
.pill.on:hover{background:var(--brown);border-color:var(--brown);color:#fff}
.pill:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
@media(max-width:640px){
  /* let the row scroll sideways rather than stack into a tall block */
  .pills{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px;width:100%}
  .pills::-webkit-scrollbar{display:none}
}

/* ---------------------------------------------------------------------------
   CTA panel centring.
   The panel is text-align:center, but the paragraph was still sitting left:
   our own `p{margin:0 0 1.1em}` reset zeroes the inline margins, and depending
   on cascade order it can land after `.cta-panel p{margin-inline:auto}`.
   Spell the centring out at body.hacsa specificity so nothing can undo it.
   --------------------------------------------------------------------------- */
body.hacsa .cta-panel{text-align:center}
body.hacsa .cta-panel .inner{display:flex;flex-direction:column;align-items:center}
body.hacsa .cta-panel h2,
body.hacsa .cta-panel p,
body.hacsa .cta-panel .eyebrow{margin-left:auto;margin-right:auto;text-align:center}
body.hacsa .cta-panel p{max-width:48ch}
body.hacsa .cta-panel h2{max-width:20ch}

/* ---------------------------------------------------------------------------
   Story slideshow (About page)
   --------------------------------------------------------------------------- */
.slideshow{position:relative;overflow:hidden;min-height:100%}
.slideshow .slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;z-index:0;transition:opacity 1.6s cubic-bezier(.4,0,.2,1)}
.slideshow .slide.on{opacity:1;z-index:1}
/* The incoming frame is lifted above the outgoing one by JS so the old image
   stays fully opaque underneath while the new one fades in over the top.
   Fading both at once left each at ~50% halfway through, so the backdrop
   showed between them — that dip was what read as an abrupt cut. */
.slideshow .slide.is-entering{z-index:2}
.slideshow .dots{position:absolute;left:0;right:0;bottom:16px;z-index:2;
  display:flex;gap:8px;justify-content:center}
.slideshow .dot{width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.85);background:transparent;transition:.3s ease}
.slideshow .dot.on{background:#fff}
.slideshow .dot:hover{background:rgba(255,255,255,.6)}
.slideshow .dot:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Gallery tiles are buttons now, so strip the button chrome back to the tile. */
.gallery .g{border:0;padding:0;cursor:zoom-in;display:block;width:100%;height:100%;
  background-color:var(--bg-soft)}
.gallery .g:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
.gallery-count{border:1px solid rgba(205,160,94,.4);cursor:pointer}
.gallery-count:hover{background:rgba(23,16,11,.95);color:#fff}

/* inspection times */
.opens{margin:26px 0 6px;padding:20px 22px;background:var(--bg-soft);
  border:1px solid var(--line);border-left:3px solid var(--clay);border-radius:3px}
.opens .eyebrow{margin-bottom:10px}
.opens ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.opens li{font-weight:600;color:var(--ink)}
.opens p{margin:12px 0 0;font-size:.68rem;letter-spacing:.08em}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(18,11,7,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.lb.on{opacity:1;visibility:visible}
.lb img{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:3px}
.lb button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  color:#fff;cursor:pointer;border-radius:50%;width:46px;height:46px;font-size:1.2rem;line-height:1;
  transition:.25s ease}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb .lb-close{top:22px;right:22px}
.lb .lb-prev{left:22px}
.lb .lb-next{right:22px}
.lb .lb-count{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#D8C4A6;
  font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.14em}
@media(max-width:600px){
  .lb .lb-prev{left:8px}.lb .lb-next{right:8px}
  .lb button{width:40px;height:40px}
}

/* ---------------------------------------------------------------------------
   This week's open inspections
   --------------------------------------------------------------------------- */
.open-day{margin-bottom:46px}
.open-day h2{font-size:1.5rem;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:0}
.open-list{list-style:none;margin:0;padding:0}
.open-item{display:grid;grid-template-columns:190px 1fr;gap:24px;padding:22px 0;
  border-bottom:1px solid var(--line);align-items:center}
.open-item .shot{display:block;aspect-ratio:4/3;border-radius:4px;background:var(--bg-soft) center/cover no-repeat;
  border:1px solid var(--line)}
.open-item .when{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.open-item .when b{font-family:"Space Mono",monospace;font-size:.92rem;color:var(--ink)}
.open-item h3{margin:0 0 2px;font-size:1.2rem}
.open-item h3 a:hover{color:var(--clay)}
.open-item .sub{margin:0 0 10px;color:var(--dim);font-size:.9rem}
.open-item .specs{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;
  font-family:"Space Mono",monospace;font-size:.76rem;color:var(--text)}
.open-item .specs b{color:var(--ink)}
.open-item .specs .price{font-family:"Archivo",sans-serif;font-size:1.05rem;color:var(--ink);font-weight:600}
/* a cancelled time stays listed, but visibly retired */
.open-item.is-off .shot{filter:saturate(.4) brightness(.97)}
.open-item.is-off .when b{text-decoration:line-through;color:var(--dim)}

.chip{font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 9px;border-radius:2px;white-space:nowrap}
.chip.ok{background:rgba(110,61,34,.1);color:var(--brown);border:1px solid rgba(110,61,34,.2)}
.chip.warn{background:var(--gold);color:#2a1608}
.chip.off{background:rgba(36,22,17,.9);color:#D8C4A6}

@media(max-width:640px){
  .open-item{grid-template-columns:110px 1fr;gap:16px}
  .open-day h2{font-size:1.25rem}
}

/* hero search panels — only the active one is shown */
.searchbar .panel{display:none}
.searchbar .panel.on{display:flex}
.searchbar .f.grow{flex:1 1 340px}
.searchbar .f select,.searchbar .f input[type=text]{width:100%;border:0;background:transparent;
  font-family:"Inter",system-ui,sans-serif;font-size:.95rem;font-weight:600;color:var(--ink);
  padding:0;outline:none}
.searchbar .f input[type=text]::placeholder{color:var(--dim);font-weight:400}
.searchbar .f select{appearance:none;-webkit-appearance:none;cursor:pointer}
.searchbar .f:focus-within{box-shadow:inset 0 -2px 0 var(--clay)}
@media(max-width:640px){.searchbar .f.grow{flex:1 1 100%}}

/* hero backdrop slideshow — sits where the video was, behind the scrim */
.hero .hero-shots{position:absolute;inset:0;z-index:0;min-height:0}
/* Slower fade than the About slideshow — this one is full-bleed, and a large
   image needs longer to feel like a dissolve rather than a switch. The very
   slow scale is what stops a still photo reading as frozen between fades;
   drop the transform lines to remove it. NB the 2.2s must stay in step with
   FADE in main.js. */
.hero .hero-shots .slide{transform:scale(1.05);
  transition:opacity 2.2s cubic-bezier(.4,0,.2,1), transform 9s linear}
.hero .hero-shots .slide.on{transform:scale(1)}
.hero .hero-shots .dots{display:none}

/* Hero slideshow controls — a sibling of .scrim so they stay clickable, and
   parked bottom-right where they clear the headline and the search panel. */
.hero .hero-controls{position:absolute;right:28px;bottom:22px;z-index:3;
  display:flex;align-items:center;gap:14px}
.hero .hero-controls .dots{display:flex;gap:8px}
.hero .hero-controls .dot{width:8px;height:8px;padding:0;border-radius:50%;
  cursor:pointer;border:1px solid rgba(255,255,255,.85);background:transparent;
  transition:.3s ease}
.hero .hero-controls .dot.on{background:#fff}
.hero .hero-controls .dot:hover{background:rgba(255,255,255,.6)}
.hero .hero-pause{width:26px;height:26px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.7);background:rgba(30,18,10,.35);
  position:relative;transition:.3s ease}
.hero .hero-pause:hover{background:rgba(30,18,10,.6)}
/* Two bars for pause; the paused state swaps them for a single play triangle. */
.hero .hero-pause::before,.hero .hero-pause::after{content:"";position:absolute;
  top:7px;width:2px;height:11px;background:#fff;transition:.2s ease}
.hero .hero-pause::before{left:9px}
.hero .hero-pause::after{right:9px}
.hero .hero-pause.is-paused::before{left:9px;top:7px;width:0;height:0;background:transparent;
  border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #fff}
.hero .hero-pause.is-paused::after{opacity:0}
.hero .hero-controls .dot:focus-visible,
.hero .hero-pause:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:640px){.hero .hero-controls{right:20px;bottom:16px}}
/* Nothing advances under reduced motion, so a pause button would be a lie.
   The dots stay — they are manual control, which is still useful. */
@media(prefers-reduced-motion:reduce){
  html:not(.force-motion) .hero .hero-pause{display:none}
}

/* ---------------------------------------------------------------------------
   Rotating hero promises. Three phrases cycle under a fixed opening line.
   Each maps to one of the three values, so the motion carries meaning.
   --------------------------------------------------------------------------- */
.hero h1 .rw{display:block;position:relative;height:1.12em;overflow:hidden;color:#F3D8AE}
.hero h1 .rw span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;
  animation:rwCycle 10.5s infinite cubic-bezier(.2,.7,.2,1)}
.hero h1 .rw span:nth-child(2){animation-delay:3.5s}
.hero h1 .rw span:nth-child(3){animation-delay:7s}
@keyframes rwCycle{
  0%   {opacity:0;transform:translateY(45%)}
  4%   {opacity:1;transform:none}
  28%  {opacity:1;transform:none}
  33%  {opacity:0;transform:translateY(-45%)}
  100% {opacity:0;transform:translateY(45%)}
}
@media(max-width:700px){.hero h1 .rw span{white-space:normal}.hero h1 .rw{height:2.3em}}

@media(prefers-reduced-motion:reduce){
  /* hold on the first promise rather than cycling */
  html:not(.force-motion) .hero h1 .rw span{animation:none;opacity:0}
  html:not(.force-motion) .hero h1 .rw span:first-child{opacity:1}
}

/* full-width atmospheric video band (About) */
/* Sits inside .wrap now rather than running full-bleed, so its left edge lines
   up with the headline and the paragraphs. .videoband-band exists only to
   cancel the 94px section padding around it. */
/* .wrap sets padding:0 28px and outranks section{padding:94px 0}, so the story
   section carries no vertical padding of its own — the band has to provide
   the gap or the video ends up flush against the first paragraph. */
.videoband-band{padding:40px 0 52px}
.videoband{position:relative;height:52vh;min-height:320px;overflow:hidden;padding:0;margin:0;
  border-radius:6px}
.videoband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.videoband .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(36,22,17,.28),rgba(36,22,17,.42))}
@media(max-width:700px){.videoband{height:38vh;min-height:220px}}

/* the rotating headline needs a wider, slightly smaller h1 than the old slogan */
.hero h1:has(.rw){max-width:24ch;font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.1}
.hero h1 .rw{height:1.25em}
.hero h1 .rw span{white-space:nowrap}
@media(max-width:860px){
  .hero h1:has(.rw){font-size:clamp(1.7rem,5.4vw,2.3rem);max-width:20ch}
  .hero h1 .rw{height:2.5em}
  .hero h1 .rw span{white-space:normal}
}

/* rotating phrases fade rather than slide behind a mask, so a long line is never
   cut off by the h1's max-width — the spans are absolutely positioned and simply
   overhang, which is fine over a full-bleed hero. */
.hero h1 .rw{overflow:visible}
@keyframes rwCycle{
  0%   {opacity:0;transform:translateY(22%)}
  5%   {opacity:1;transform:none}
  28%  {opacity:1;transform:none}
  33%  {opacity:0;transform:translateY(-22%)}
  100% {opacity:0;transform:translateY(22%)}
}

/* ---------------------------------------------------------------------------
   Elementor override.
   elementor/assets/css/frontend.min.css carries, inside
   @media (prefers-reduced-motion: reduce):

       html * { transition-duration: 0s !important }

   `html *` is weak in specificity but !important beats everything we write, so
   for any visitor with the OS flag set it silently flattened EVERY crossfade on
   the site. The slideshow still changed image on schedule — it just did it in
   zero seconds, which is exactly what read as an abrupt cut.

   We opt back in explicitly, and only for the slides. Anything not listed here
   is still frozen for those visitors; extend this block if that changes.
   --------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html.force-motion .slideshow .slide{transition-duration:1.6s!important}
  html.force-motion .hero .hero-shots .slide{transition-duration:2.2s,9s!important}
}