/* budjones.ca — shared stylesheet
   Century 21 brand colours taken from Bud's own brand sheet. The sheet says in
   red: "Never substitute different colours for those listed here." Obsessed Grey
   is the brand's black; it is #252526, NOT #000000. */

:root{
  --gold:#BEAF87;          /* Relentless Gold  PMS 2324 */
  --gold-dark:#A19276;     /* Dark Gold */
  --ink:#252526;           /* Obsessed Grey   PMS Black 7 */
  --grey-med:#808285;      /* Medium Grey */
  --grey-light:#E6E7E8;    /* Light Grey */
  --white:#FFFFFF;         /* Site White */

  --ink-900:#1A1A1B;
  --ink-800:#1F1F20;
  --ink-700:#2E2E30;
  --ink-600:#3A3A3C;

  --display:'Barlow Semi Condensed',system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;

  --gutter:clamp(20px,5vw,80px);
  --maxw:1560px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--grey-light);
  font-family:var(--body);font-weight:400;line-height:1.62;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ---------------- type ---------------- */
.display{font-family:var(--display);font-weight:900;text-transform:uppercase;
  line-height:.84;letter-spacing:-.025em;color:var(--white);font-size:clamp(3.2rem,12.5vw,13rem)}
.eyebrow{font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.42em;font-size:clamp(.62rem,1vw,.74rem);color:var(--gold)}
.num{font-family:var(--display);font-weight:800;color:var(--gold);letter-spacing:.3em;font-size:.68rem}
.lede{font-size:clamp(1.02rem,1.35vw,1.2rem);color:#B9BBBD;max-width:46ch}
.rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent);border:0;margin:0}
.sectitle{font-family:var(--display);font-weight:900;text-transform:uppercase;
  line-height:.9;letter-spacing:-.02em;color:var(--white);font-size:clamp(2.3rem,6vw,5.4rem);margin:0}
.sechead{display:flex;align-items:baseline;gap:20px;margin-bottom:14px}

/* ---------------- nav ---------------- */
/* padding-top/bottom, never the `padding` shorthand. This element is also
   .wrap, and the shorthand resets .wrap's `padding:0 var(--gutter)` to zero,
   which put the logo and the phone button hard against both screen edges on
   a phone while everything below them stayed inset by the gutter. */
.site-nav{display:flex;align-items:center;justify-content:space-between;
  padding-top:24px;padding-bottom:24px;gap:24px}
.site-nav .mark{height:44px;width:auto}
.navlinks{display:none;gap:36px;font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--white)}
.navlinks a{position:relative;padding-bottom:4px}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--gold);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.navlinks a:hover::after,.navlinks a[aria-current]::after{width:100%}
.callbtn{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;color:var(--gold);background:var(--ink);border:1px solid var(--gold);
  padding:12px 21px;white-space:nowrap;transition:background .3s,color .3s,transform .3s}
.callbtn:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
@media(min-width:1080px){.navlinks{display:flex}}

.page-head{background:var(--ink-900);border-bottom:1px solid var(--ink-700)}
.crumbs{font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.64rem;color:var(--grey-med);padding:20px 0 0}
.crumbs a:hover{color:var(--gold)}

/* ---------------- listing grid ---------------- */
.cards{display:grid;gap:1px;background:var(--ink-700);margin-top:34px}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.cards{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1500px){.cards{grid-template-columns:repeat(4,1fr)}}

.card{background:var(--ink);display:flex;flex-direction:column;position:relative;
  transition:background .35s}
.card:hover{background:var(--ink-800)}
.card .shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-800)}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.card:hover .shot img{transform:scale(1.045)}
.card .no-shot{display:flex;align-items:center;justify-content:center;height:100%;
  font-family:var(--display);font-weight:700;letter-spacing:.2em;font-size:.68rem;color:var(--grey-med)}
.card .mine{position:absolute;top:0;left:0;background:var(--gold);color:var(--ink);
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  font-size:.6rem;padding:7px 12px;z-index:2}
.card .body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.card .price{font-family:var(--display);font-weight:900;font-size:1.7rem;color:var(--white);line-height:1}
.card .addr{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:1rem;color:var(--grey-light);margin-top:9px;line-height:1.2}
.card .meta{font-size:.8rem;color:var(--grey-med);margin-top:5px}
.card .foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;border-top:1px solid var(--ink-700);margin-top:16px}
/* CREA: listing brokerage must be visible with the content, no click required. */
.card .broker{font-size:.68rem;color:var(--grey-med);line-height:1.35}

/* "Powered by REALTOR.ca" badge, CREA's official SVG hotlinked from realtor.ca
   exactly as their embed code does. DDF Rules require a minimum 90px width shown
   at its natural ratio, and a link to THAT listing on REALTOR.ca. CREA's sample
   snippet links to the realtor.ca homepage instead, but the Rules document is the
   binding one, so the listing link wins. 110px keeps clear of the 90px floor.
   The SVG is light artwork, so it needs a light plate to sit on. */
.rca{flex:none;display:inline-block;line-height:0;background:var(--grey-light);
  padding:7px 9px;border-radius:2px;transition:opacity .25s,transform .25s}
.rca img{width:125px;height:auto;display:block}
.rca:hover{opacity:.82;transform:translateY(-1px)}

/* ---------------- listing detail ---------------- */
.detail{display:grid;gap:clamp(26px,3.5vw,58px);padding:clamp(28px,5vh,60px) 0 0}
@media(min-width:1000px){.detail{grid-template-columns:1.55fr .95fr;align-items:start}}
.gallery{display:grid;gap:4px;grid-template-columns:repeat(2,1fr)}
.gallery a:first-child{grid-column:1 / -1}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ink-800)}
.gallery a:first-child img{aspect-ratio:16/10}
.facts{border:1px solid var(--ink-700);background:linear-gradient(165deg,var(--ink-800),var(--ink-900))}
.facts .top{padding:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--ink-700)}
.facts .price{font-family:var(--display);font-weight:900;font-size:clamp(2.1rem,4.4vw,3.2rem);
  color:var(--white);line-height:.95;letter-spacing:-.015em}
.facts .addr{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:1.1rem;color:var(--grey-light);margin-top:10px;line-height:1.25}
.facts dl{margin:0;padding:clamp(18px,2.2vw,26px);display:grid;grid-template-columns:auto 1fr;gap:11px 18px;font-size:.88rem}
.facts dt{font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.6rem;color:var(--grey-med);align-self:center}
.facts dd{margin:0;color:var(--grey-light)}
.facts .cta{padding:0 clamp(18px,2.2vw,26px) clamp(20px,2.4vw,28px)}
.btn-gold{display:block;text-align:center;background:var(--gold);color:var(--ink);
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.18em;
  font-size:.78rem;padding:17px;transition:background .3s,letter-spacing .3s}
.btn-gold:hover{background:var(--white);letter-spacing:.26em}
.btn-out{display:block;text-align:center;border:1px solid var(--ink-600);color:var(--grey-light);
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.18em;
  font-size:.78rem;padding:16px;margin-top:9px;transition:border-color .3s,color .3s}
.btn-out:hover{border-color:var(--gold);color:var(--gold)}
.remarks{margin-top:clamp(34px,5vh,64px);max-width:74ch}
.remarks p{color:#B9BBBD}

/* brokerage block on the detail page, required and deliberately not subtle */
.attrib{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px;
  padding:18px;border:1px solid var(--ink-700);background:var(--ink-900)}
.attrib .who{font-size:.86rem;color:var(--grey-light);line-height:1.5}
.attrib .who b{color:var(--white);font-weight:600}

/* ---------------- filters ---------------- */
/* auto-fit so adding a filter never needs a new breakpoint */
.filters{display:grid;gap:1px;background:var(--ink-700);border:1px solid var(--ink-700);
  margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}

/* Area page stat bar. Its own component rather than borrowing .filters, which
   is a form. The column count must never be set inline: doing that pinned it to
   four columns at every width and pushed long values like a price range off the
   side of a phone. */
.statbar{display:grid;gap:1px;background:var(--ink-700);border:1px solid var(--ink-700);
  margin-top:30px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.statbar{grid-template-columns:repeat(4,1fr)}}
.statbar div{background:var(--ink);padding:15px 17px;min-width:0}
.statbar dt{font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.58rem;color:var(--grey-med);margin:0 0 7px}
.statbar dd{margin:0;font-family:var(--display);font-weight:800;color:var(--white);
  font-size:clamp(1rem,3.4vw,1.3rem);line-height:1.15;
  overflow-wrap:anywhere;hyphens:auto}

/* Opt-in feature tags. Loose matches on free-text feature lists, so an unticked
   box means "not stated" rather than "definitely absent". */
.tags{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:14px}
.tags label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--ink-600);padding:9px 15px;background:var(--ink);
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.64rem;color:var(--grey-med);
  transition:border-color .25s,color .25s,background .25s}
.tags label:hover{border-color:var(--grey-med);color:var(--grey-light)}
.tags input{position:absolute;opacity:0;width:0;height:0}
.tags label:has(input:checked){border-color:var(--gold);color:var(--ink);background:var(--gold)}
.tags label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.clearbtn{margin-left:auto;background:transparent;border:0;cursor:pointer;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.64rem;color:var(--grey-med);
  text-decoration:underline;text-underline-offset:4px;padding:9px 4px}
.clearbtn:hover{color:var(--gold)}
@media(max-width:620px){.clearbtn{margin-left:0;width:100%;text-align:left}}
.filters label{background:var(--ink);padding:14px 16px;display:block}
/* The neighbourhood filter is hidden outside Sault Ste. Marie. The rule above
   is more specific than the browser's own [hidden] rule, so without this the
   hidden attribute would do nothing at all. */
.filters label[hidden]{display:none}
.filters span{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.6rem;color:var(--grey-med);margin-bottom:7px}
.filters select,.filters input{width:100%;background:transparent;border:0;color:var(--white);
  font-family:var(--display);font-weight:700;font-size:1.05rem;padding:0;outline:none}
.filters select option{background:var(--ink);color:var(--white)}
.resultbar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:24px;flex-wrap:wrap}
.resultbar .n{font-family:var(--display);font-weight:900;font-size:1.5rem;color:var(--white)}
.resultbar .n em{font-style:normal;color:var(--gold)}
.empty{padding:60px 0;text-align:center;color:var(--grey-med)}

/* ---------------- footer ---------------- */
.site-foot{background:var(--ink-900);padding:clamp(56px,8vh,96px) 0 34px;border-top:1px solid var(--ink-700);margin-top:clamp(60px,10vh,130px)}
.ftop{display:grid;gap:40px;margin-bottom:50px}
@media(min-width:880px){.ftop{grid-template-columns:1.3fr 1fr 1fr}}
.ftop .mark{height:58px;width:auto;margin-bottom:20px}
.fh{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.24em;
  font-size:.66rem;color:var(--gold);margin-bottom:16px}
.fline{color:#A7A9AB;font-size:.95rem;margin:0 0 7px}
.fline a:hover{color:var(--gold)}
/* CREA trademark statement + liability disclaimer, required on EVERY page */
.legal{border-top:1px solid var(--ink-700);padding-top:24px;font-size:.73rem;line-height:1.75;color:#76787A}
.legal strong{color:#9A9C9E;font-weight:600}
.legal p{margin:0 0 10px}

/* browse-wrap notice, required before listing content is accessible */
.wrapnote{position:fixed;left:0;right:0;bottom:0;z-index:500;background:var(--ink-900);
  border-top:1px solid var(--gold);padding:14px var(--gutter);display:flex;align-items:center;
  gap:16px;flex-wrap:wrap;font-size:.78rem;color:#A7A9AB}
.wrapnote a{color:var(--gold);text-decoration:underline}
.wrapnote button{flex:none;background:var(--gold);color:var(--ink);border:0;cursor:pointer;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  font-size:.7rem;padding:10px 20px}
.wrapnote[hidden]{display:none}

.rv{opacity:0;transform:translateY(30px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   LIGHTBOX
   Opening photos in a new tab dumps people out of the site and
   gives them no way to move between images. This keeps them here.
   ============================================================ */
.lb{position:fixed;inset:0;z-index:4000;background:rgba(14,14,15,.97);
  display:none;flex-direction:column;backdrop-filter:blur(6px)}
.lb.open{display:flex}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(16px,3vw,34px);flex:none}
.lb-count{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.24em;font-size:.72rem;color:var(--gold)}
.lb-addr{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.82rem;color:var(--grey-light);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-x{flex:none;background:transparent;border:1px solid var(--ink-600);color:var(--grey-light);
  width:44px;height:44px;cursor:pointer;font-size:1.3rem;line-height:1;
  transition:border-color .25s,color .25s}
.lb-x:hover{border-color:var(--gold);color:var(--gold)}
.lb-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  min-height:0;padding:0 clamp(8px,2vw,24px)}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:clamp(44px,5vw,60px);
  height:clamp(64px,9vh,92px);background:rgba(37,37,38,.82);border:1px solid var(--ink-600);
  color:var(--white);cursor:pointer;font-size:1.5rem;line-height:1;
  transition:background .25s,border-color .25s;display:flex;align-items:center;justify-content:center}
.lb-nav:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.lb-prev{left:clamp(6px,1.5vw,20px)} .lb-next{right:clamp(6px,1.5vw,20px)}
.lb-nav[disabled]{opacity:.25;cursor:default}
.lb-nav[disabled]:hover{background:rgba(37,37,38,.82);border-color:var(--ink-600);color:var(--white)}
.lb-strip{flex:none;display:flex;gap:6px;overflow-x:auto;padding:14px clamp(16px,3vw,34px);
  scrollbar-width:thin}
.lb-strip img{height:62px;width:84px;object-fit:cover;cursor:pointer;flex:none;
  opacity:.45;transition:opacity .25s,outline-color .25s;outline:2px solid transparent;outline-offset:-2px}
.lb-strip img:hover{opacity:.85}
.lb-strip img.on{opacity:1;outline-color:var(--gold)}
body.lb-lock{overflow:hidden}
@media(max-width:640px){ .lb-strip{display:none} .lb-addr{display:none} }

/* ============================================================
   LISTING DETAIL: rooms and features
   Coverage varies by listing (rooms exist on 61%, taxes on 85%),
   so every block here renders only when it has content.
   ============================================================ */
.blk{margin-top:clamp(40px,6vh,76px)}
.blk h2{font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.01em;font-size:clamp(1.5rem,3vw,2.3rem);color:var(--white);margin:0 0 20px}

.rooms{width:100%;border-collapse:collapse;font-size:.92rem}
.rooms th{font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.6rem;color:var(--grey-med);text-align:left;
  padding:0 14px 11px 0;border-bottom:1px solid var(--ink-600)}
.rooms td{padding:13px 14px 13px 0;border-bottom:1px solid var(--ink-700);color:var(--grey-light)}
.rooms tr:hover td{background:var(--ink-800)}
.rooms td:first-child{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--white)}
.rooms td:last-child,.rooms th:last-child{text-align:right;padding-right:0;
  font-family:var(--display);font-weight:700;color:var(--gold);white-space:nowrap}
@media(max-width:560px){.rooms th:nth-child(2),.rooms td:nth-child(2){display:none}}

.featgrid{display:grid;gap:1px;background:var(--ink-700);border:1px solid var(--ink-700)}
@media(min-width:620px){.featgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.featgrid{grid-template-columns:repeat(3,1fr)}}
.featgroup{background:var(--ink);padding:18px 20px}
.featgroup h3{font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.6rem;color:var(--gold);margin:0 0 10px}
.featgroup ul{margin:0;padding:0;list-style:none}
.featgroup li{color:var(--grey-light);font-size:.9rem;padding:3px 0;line-height:1.45}
.featgroup li::before{content:"";display:inline-block;width:4px;height:4px;background:var(--grey-med);
  vertical-align:middle;margin-right:9px;transform:translateY(-1px)}

/* gallery thumbs are buttons now, not links to a new tab */
.gallery a{cursor:zoom-in;display:block;position:relative}
.gallery a::after{content:"";position:absolute;inset:0;background:rgba(190,175,135,0);
  transition:background .3s}
.gallery a:hover::after{background:rgba(190,175,135,.14)}

/* ---------------- contact form ---------------- */
/* Shared by the Contact page and the per-listing enquiry block. Fields are
   boxed rather than the underline treatment used by .filters: the filter bar
   sits on a dark card where an underline reads as a control, but a standalone
   form needs an obvious tap target, which matters most on a phone. */
.cform{margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cgrid{display:grid;gap:16px}
@media(min-width:720px){.cgrid{grid-template-columns:repeat(3,1fr)}}
.cf{display:block;margin-bottom:16px}
.cf span{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.6rem;color:var(--grey-med);margin-bottom:8px}
.cf input,.cf textarea{width:100%;background:var(--ink-900);border:1px solid var(--ink-600);
  color:var(--white);font-family:var(--body);font-size:1rem;padding:14px 15px;
  transition:border-color .25s;border-radius:0;-webkit-appearance:none}
.cf textarea{resize:vertical;min-height:120px;line-height:1.55}
.cf input::placeholder,.cf textarea::placeholder{color:#6C6E70}
.cf input:focus,.cf textarea:focus{outline:none;border-color:var(--gold)}
.cf input:focus-visible,.cf textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cnote{font-size:.8rem;color:var(--grey-med);margin:0 0 18px}
.cform .btn-gold{border:0;cursor:pointer;width:100%}
@media(min-width:560px){.cform .btn-gold{width:auto;min-width:280px;padding-left:40px;padding-right:40px}}

/* call / text / email, three equal choices rather than a stack */
.reach{display:grid;gap:10px;margin-top:20px}
@media(min-width:560px){.reach{grid-template-columns:repeat(3,1fr)}}
.reach .btn-out,.reach .btn-gold{margin-top:0}

/* ---------------- social icons ---------------- */
.soc{display:flex;gap:12px;flex-wrap:wrap}
.soc a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ink-600);
  color:#A7A9AB;transition:border-color .25s,color .25s,transform .25s}
.soc a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.soc a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.soc-lg a{width:48px;height:48px}

/* ---------------- contact page ---------------- */
.cwrap{display:grid;gap:clamp(30px,4vw,60px);padding-bottom:clamp(20px,4vh,40px)}
@media(min-width:1000px){.cwrap{grid-template-columns:1.35fr .9fr;align-items:start}}
.blkh{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.5rem,3vw,2.3rem);color:var(--white);margin:0 0 22px}
.cside{display:grid;gap:18px;margin-top:clamp(34px,5vh,52px)}
.cbox{border:1px solid var(--ink-700);background:linear-gradient(165deg,var(--ink-800),var(--ink-900));
  padding:clamp(22px,2.6vw,30px)}
.cbig{display:inline-block;font-family:var(--display);font-weight:900;letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.6vw,2.5rem);color:var(--white);transition:color .25s}
.cbig:hover{color:var(--gold)}
.cmeta{font-size:.82rem;color:var(--grey-med);margin:4px 0 0}

/* ---------------- mobile contact bar ---------------- */
/* Shown exactly where the header nav is not: .navlinks turns on at 1080px, so
   below that the header has the logo and the call button and nothing else.
   Three taps, always reachable, on every page.

   `bottom` is --barlift, which the footer script sets to the MLS notice's
   measured height while that notice is up and back to 0 once it is dismissed.
   Both are fixed to the bottom, and the notice wraps to a different number of
   lines at different widths, so a constant offset would be wrong at some of
   them. */
.mobilebar{display:none}
@media(max-width:1079px){
  .mobilebar{display:grid;grid-template-columns:repeat(3,1fr);
    position:fixed;left:0;right:0;bottom:var(--barlift,0px);z-index:450;
    background:var(--ink-900);border-top:1px solid var(--ink-700);
    padding-bottom:env(safe-area-inset-bottom)}
  .mobilebar a{display:flex;align-items:center;justify-content:center;
    font-family:var(--display);font-weight:800;text-transform:uppercase;
    letter-spacing:.18em;font-size:.76rem;color:var(--grey-light);
    min-height:54px;border-left:1px solid var(--ink-700)}
  .mobilebar a:first-child{border-left:0}
  .mobilebar a:active{background:var(--ink-700)}
  .mobilebar a:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
  .mobilebar .mb-go{background:var(--gold);color:var(--ink)}
  .mobilebar .mb-go:active{background:var(--gold-dark)}
  /* Keep the bar off the last of the footer. The notice already handles its own
     clearance, so this only accounts for the bar itself. */
  .site-foot{padding-bottom:calc(34px + 54px)}
}

/* ---------------- contact section on the home page ---------------- */
.contact-home{background:var(--ink-900)}
.chome{display:grid;gap:clamp(30px,4vw,56px);margin-top:clamp(26px,4vh,40px);align-items:start}
@media(min-width:1000px){.chome{grid-template-columns:1.3fr .9fr}}

/* ---------------- mobile menu ---------------- */
/* .navlinks turns on at 1080px. Everything here is for the range below that,
   where the header had no navigation at all: the logo and the call button were
   the only things in it, so Listings, About Bud and Neighbourhoods were only
   reachable from the footer. */
.page-head{position:relative;z-index:20}
.navright{display:flex;align-items:center;gap:12px;flex:none}

.menubtn{display:none;flex:none;width:46px;height:46px;padding:0;cursor:pointer;
  background:transparent;border:1px solid var(--ink-600);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:border-color .25s}
.menubtn span{display:block;width:20px;height:2px;background:var(--grey-light);
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .18s}
.menubtn:hover{border-color:var(--gold)}
.menubtn:hover span{background:var(--gold)}
.menubtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* .on is set by the footer script alongside aria-expanded */
.menubtn.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menubtn.on span:nth-child(2){opacity:0}
.menubtn.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menupanel{display:none}
.menupanel[hidden]{display:none}

@media(max-width:1079px){
  .menubtn{display:flex}
  .menupanel:not([hidden]){display:block;position:absolute;top:100%;left:0;right:0;
    background:var(--ink-900);border-bottom:1px solid var(--gold);
    box-shadow:0 24px 40px rgba(0,0,0,.45)}
  .menupanel a{display:flex;align-items:center;min-height:58px;
    padding:0 var(--gutter);border-top:1px solid var(--ink-700);
    font-family:var(--display);font-weight:700;text-transform:uppercase;
    letter-spacing:.18em;font-size:.84rem;color:var(--grey-light);
    transition:background .2s,color .2s,padding-left .25s}
  .menupanel a:first-child{border-top:0}
  .menupanel a:hover,.menupanel a:active{background:var(--ink-700);color:var(--gold)}
  .menupanel a[aria-current]{color:var(--gold)}
  .menupanel a[aria-current]::before{content:"";width:3px;height:16px;
    background:var(--gold);margin-right:12px;margin-left:-15px}
  .menupanel a:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
}

/* The phone number is the widest thing in the header. At 375px the logo, the
   number and the menu button together overflowed the gutter, so the number
   tightens up rather than any of the three being dropped. */
@media(max-width:420px){
  .site-nav{gap:10px}
  .callbtn{padding:11px 13px;letter-spacing:.1em}
}

/* The header is 95px on a phone, which is generous when the hero below it has
   to hold a full-length portrait and still leave the search band in the first
   screen. Trimmed, not restructured: the logo and both buttons stay. */
@media(max-width:860px){
  .site-nav{padding-top:15px;padding-bottom:15px}
  .site-nav .mark{height:40px}
  .menubtn{width:42px;height:42px}
}

/* ---------------- area page "show more" ---------------- */
/* Cards past the fold are in the HTML and hidden here, rather than left out of
   the HTML entirely. Crawlers and no-JS visitors still get every listing's
   link, and the images cost nothing until revealed because each is lazy. */
.cards .card.over{display:none}
.morebtn{max-width:340px;margin:34px auto 0;cursor:pointer;background:transparent}