/* budjones.ca — homepage only.
   Loaded just on "/" so the rest of the site does not carry the hero and
   section styles it never uses.

   The header used to be absolute and transparent here, floating the nav over
   the hero photo. It no longer is. Bud's complaint was that the phone number
   covered his face, and with the header overlaying a photo anchored to the
   bottom of the hero there is no height at which it does not: his head sits at
   the top of the hero, which is also the top of the page, which is exactly
   where the call button and the menu button are. Shrinking the photo to duck
   under the header only made him smaller. So the home page now uses the same
   solid in-flow header as every other page, and the hero starts below it. */

section{position:relative}
.sec{padding:clamp(80px,12vh,170px) 0}

/* ---------------- hero ---------------- */
/* Not a full 100svh any more. The search sits in the band directly below and
   is the thing most visitors came for, so the hero is capped to leave the top
   of that band inside the first screen on a normal laptop. Still tall enough
   to carry the headline and the full-height portrait. */
.hero{position:relative;min-height:clamp(560px,78svh,880px);display:flex;align-items:flex-end;
  padding-bottom:clamp(40px,7vh,90px);overflow:hidden}
.hero::before{content:"";position:absolute;z-index:1;right:-6vw;top:0;bottom:22%;
  width:min(46vw,640px);background:var(--gold);transform:skewX(-7deg);transform-origin:top right}
/* max-height:100% is load-bearing. The height below is a share of the VIEWPORT
   while the hero is now capped to clamp(560px,78svh,880px), so on a short or a
   narrow screen the photo came out taller than the box it sits in, overflowed
   the top, and `overflow:hidden` cut the top of Bud's head off. Measured at
   360x700: hero 504px, photo 574px, top at -70px. Clamping to the containing
   block means the viewport figure only ever applies when it already fits. */
.hero-photo{position:absolute;z-index:2;right:clamp(-40px,2vw,60px);bottom:0;
  height:min(92vh,980px);max-height:100%;width:auto;
  filter:drop-shadow(-30px 20px 60px rgba(0,0,0,.55));
  animation:riseIn 1.5s cubic-bezier(.16,1,.3,1) .15s both}
.hero-inner{position:relative;z-index:3;width:100%}
/* Scale is tuned to the LONGEST line, currently 15 characters
   ("The right home."). Change the wording and re-check this number. */
.hero .display{position:relative;text-shadow:0 2px 34px rgba(26,26,27,.5);
  font-size:clamp(2.5rem,9.2vw,9.8rem)}
.hero .display .ln{display:block;overflow:hidden}
.hero .display .ln>span{display:block;animation:lineUp 1.15s cubic-bezier(.16,1,.3,1) both}
.hero .display .ln:nth-child(1)>span{animation-delay:.18s}
.hero .display .ln:nth-child(2)>span{animation-delay:.30s}
.hero .display .ln:nth-child(3)>span{animation-delay:.42s}
.hero .display em{font-style:normal;color:var(--gold)}
.hero-meta{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);align-items:flex-end;
  margin-top:38px;animation:fadeUp 1s ease .72s both}
.hero-sub{max-width:38ch;font-size:1rem;color:#C6C8CA}
.scrollcue{display:flex;align-items:center;gap:12px;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.3em;font-size:.62rem;color:var(--grey-med)}
.scrollcue i{display:block;width:52px;height:1px;background:var(--grey-med);
  position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateX(-100%);animation:sweep 2.4s infinite}

@keyframes riseIn{from{opacity:0;transform:translateY(60px) scale(.985)}to{opacity:1;transform:none}}
@keyframes lineUp{from{transform:translateY(102%)}to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

@media(max-width:860px){
  .hero{min-height:clamp(500px,72svh,720px)}
  /* The slab is skewed, so its bottom-left corner swings about 45px further
     left than its top. At phone width that made the gold span nearly the whole
     screen exactly where it ended, leaving a hard horizontal edge a few pixels
     above the headline. Clear of the text, but reading as a band cutting across
     it. Ending at 62% leaves a deliberate strip of dark between the two.
     Keep at least ~60px of gap after any wording or type-scale change. */
  .hero::before{right:-24vw;width:88vw;top:0;bottom:62%}
  /* Taller and lower-anchored, so the frame does not go empty now that the
     slab is shorter. The photo now carries the upper half, not the slab. */
  .hero-photo{height:min(82vh,820px);right:-18%;opacity:1}
  .hero-inner{padding-bottom:5vh}
  /* On dark, the headline no longer needs the shadow that lifted it off gold. */
  .hero .display{text-shadow:0 2px 24px rgba(26,26,27,.75)}
}

/* ---------------- stats ---------------- */
.stats{background:var(--gold);color:var(--ink)}
.stats .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(37,37,38,.22)}
.stat{background:var(--gold);padding:clamp(28px,4vw,54px) clamp(18px,2.6vw,40px)}
.stat b{display:block;font-family:var(--display);font-weight:900;line-height:.9;
  font-size:clamp(2.6rem,5.4vw,4.6rem);letter-spacing:-.02em}
.stat span{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:.66rem;margin-top:12px;color:#44433E}
@media(min-width:900px){.stats .grid{grid-template-columns:repeat(4,1fr)}}

/* ---------------- area breakdown ---------------- */
/* Was a two-column grid with a decorative search panel on the left. The panel
   is gone (its fields were static text), so the rows now run full width. */
.search{background:var(--ink-900)}
.citylist{display:flex;flex-direction:column}
@media(min-width:760px){
  .citylist-wide{display:grid;grid-template-columns:repeat(2,1fr);
    column-gap:clamp(30px,5vw,80px)}
}
@media(min-width:1180px){
  .citylist-wide{grid-template-columns:repeat(3,1fr)}
}
.cityrow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;
  border-bottom:1px solid var(--ink-700);transition:padding-left .35s,border-color .35s}
.cityrow:hover{padding-left:14px;border-color:var(--gold)}
.cityrow .nm{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:clamp(1.05rem,2vw,1.5rem);color:var(--white)}
.cityrow .ct{font-family:var(--display);font-weight:800;color:var(--gold);font-size:1.05rem}

/* ---------------- about ---------------- */
.about{background:var(--ink)}
.aboutgrid{display:grid;gap:clamp(34px,5vw,74px);align-items:center}
@media(min-width:1000px){.aboutgrid{grid-template-columns:.58fr 1.42fr}}
.portrait{position:relative;max-width:340px}
.portrait img{width:100%;position:relative;z-index:2}
.portrait::before{content:"";position:absolute;z-index:1;left:-5%;right:18%;top:12%;bottom:0;
  border:1px solid var(--gold);opacity:.55}
.quote{font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(1.45rem,3.1vw,2.5rem);line-height:1.18;color:var(--white);margin:0 0 26px}
.quote span{color:var(--gold)}
.sig{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.24em;font-size:.7rem;color:var(--grey-med);margin-top:30px}

/* ---------------- area tiles ---------------- */
.hoods{background:var(--ink-900)}
.hoodgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--ink-700);margin-top:48px}
@media(min-width:760px){.hoodgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1180px){.hoodgrid{grid-template-columns:repeat(4,1fr)}}
.hood{background:var(--ink-900);padding:clamp(22px,2.6vw,38px);min-height:clamp(140px,16vw,210px);
  display:flex;flex-direction:column;justify-content:flex-end;position:relative;
  overflow:hidden;transition:background .4s}
.hood::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.hood:hover{background:var(--ink-800)}
.hood:hover::before{transform:scaleY(1)}
.hood b{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1rem,1.7vw,1.35rem);color:var(--white);line-height:1.05}
.hood i{font-style:normal;font-family:var(--display);font-weight:600;letter-spacing:.2em;
  font-size:.62rem;color:var(--gold);margin-bottom:10px}
.hood .n{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.16em;
  color:var(--grey-med);margin-top:8px;text-transform:uppercase}

/* ---------------- closing call to action ---------------- */
.cta{background:var(--gold);color:var(--ink);text-align:center;padding:clamp(70px,11vh,150px) 0}
.cta h2{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.88;
  letter-spacing:-.025em;font-size:clamp(2.4rem,8vw,6.4rem);margin:0 0 26px;color:var(--ink)}
.cta p{max-width:52ch;margin:0 auto 38px;color:#3F3E39;font-size:1.05rem}
.ctabtns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.btn-dark{background:var(--ink);color:var(--gold);padding:19px 40px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.2em;
  font-size:.78rem;transition:transform .3s,box-shadow .3s}
.btn-dark:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,37,38,.35)}
/* Deliberately NOT .btn-out: that one is built for dark backgrounds. This sits on gold. */
.btn-ink-out{border:1px solid var(--ink);color:var(--ink);padding:19px 40px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.2em;
  font-size:.78rem;transition:background .3s,color .3s}
.btn-ink-out:hover{background:var(--ink);color:var(--gold)}


/* ---------------- hero search ----------------
   The focal point of the page, and a real form: a GET to /listings/ whose
   field names are the query keys that page already parses.

   It earns the weight three ways, because one was not enough: a gold rule
   across the top of the band, its own headline at section scale, and boxed
   fields on a lighter panel than the band behind them. The band sits directly
   under the hero and the hero is capped so the top of it lands in the first
   screen. */
.herosearch{background:var(--ink-900);border-bottom:1px solid var(--ink-700);
  position:relative;z-index:5;padding-bottom:clamp(22px,3.5vh,38px)}
.herosearch::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-dark) 55%,transparent)}

.hsearch{padding-top:clamp(26px,4vh,44px)}
.hsearch-head{display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);flex-wrap:wrap;
  margin-bottom:clamp(18px,2.6vh,28px)}
.hsearch-head .num{letter-spacing:.34em;flex:none}
.hsearch-head h2{font-family:var(--display);font-weight:900;text-transform:uppercase;
  line-height:.92;letter-spacing:-.02em;color:var(--white);margin:0;
  font-size:clamp(1.55rem,3.4vw,2.9rem)}

/* One row on a desktop, stacked on a phone. The keyword field takes the slack
   and the button is sized to its own text. */
.hsearch-row{display:grid;gap:12px}
@media(min-width:860px){
  .hsearch-row{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.15fr) auto;
    align-items:end;gap:14px}
}
.hsf{display:block;min-width:0}
.hsf>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}
.hsf select,.hsf input{width:100%;background:var(--ink-800);border:1px solid var(--ink-600);
  color:var(--white);font-family:var(--display);font-weight:700;font-size:1.02rem;
  padding:15px 14px;border-radius:0;-webkit-appearance:none;appearance:none;
  transition:border-color .25s;cursor:pointer}
.hsf input{cursor:text;font-weight:600}
.hsf select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23BEAF87' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.hsf select option{background:var(--ink);color:var(--white)}
.hsf input::placeholder{color:#6C6E70;font-weight:500}
.hsf select:hover,.hsf input:hover{border-color:var(--grey-med)}
.hsf select:focus,.hsf input:focus{outline:none;border-color:var(--gold)}
.hsf select:focus-visible,.hsf input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.hsearch-go{background:var(--gold);color:var(--ink);border:0;cursor:pointer;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.18em;font-size:clamp(.78rem,1.5vw,.9rem);
  padding:16px clamp(24px,3vw,40px);white-space:nowrap;
  transition:background .3s,letter-spacing .3s,transform .3s}
.hsearch-go:hover{background:var(--white);letter-spacing:.26em;transform:translateY(-2px)}
.hsearch-go:focus-visible{outline:2px solid var(--white);outline-offset:3px}

.hs-quick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;
  margin-top:clamp(16px,2.4vh,24px)}
.hs-quick span{font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:.6rem;color:var(--grey-med);margin-right:2px}
.hs-quick a{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.84rem;color:var(--grey-light);
  border:1px solid var(--ink-600);padding:9px 14px;white-space:nowrap;
  transition:border-color .25s,color .25s}
.hs-quick a b{color:var(--gold);font-weight:800;margin-left:5px}
.hs-quick a:hover{border-color:var(--gold);color:var(--white)}
@media(max-width:860px){
  /* Full-width button under the stacked fields, and a 16px tap-target floor on
     the inputs: anything under 16px makes iOS Safari zoom the page on focus. */
  .hsearch-go{width:100%;text-align:center;margin-top:4px}
  .hsf select,.hsf input{font-size:16px;padding:16px 14px}
  .hsf select{padding-right:36px}
  .hs-quick{justify-content:flex-start}
}