/* ==========================================================================
   RSB Property  ·  site stylesheet
   Paperwork-first brand: zero radius, no shadows, hairline rules, two colours.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root{
  --green:#1F3D2B;
  --green-hover:#3F6149;
  --gold:#C1911F;
  --gold-light:#E0B84A;
  --paper:#F4F1E9;
  --white:#FFFFFF;
  --ink:#2E2C28;
  --slate:#55524B;
  --grey:#6B675E;
  --mute:#8A8579;
  --sage:#A9B8AC;
  --hair:#E2DED5;
  --hair-strong:#D5D0C5;
  --divider:#EFEBE3;
  --hair-on-green:rgba(169,184,172,0.22);

  --sans:'Archivo',Helvetica,Arial,sans-serif;
  --display:'Archivo Black',Helvetica,Arial,sans-serif;

  --gutter:clamp(22px,3.65vw,48px);
  --measure:1320px;
  --measure-narrow:1100px;
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--gold)}
button{font-family:inherit;border-radius:0;cursor:pointer}
input,select,textarea{font-family:inherit;border-radius:0}
::selection{background:var(--gold-light);color:var(--green)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@keyframes rsbDrawer{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes rsbFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* --- Frame ---------------------------------------------------------------- */
.site{container-type:inline-size;background:var(--white);width:100%;min-height:100vh}
.wrap{max-width:var(--measure);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap--narrow{max-width:var(--measure-narrow)}
.sec-paper{background:var(--paper)}
.sec-white{background:var(--white)}
.sec-green{background:var(--green)}
.rule-top{border-top:1px solid var(--hair-strong)}
.rule-bottom{border-bottom:1px solid var(--hair-strong)}
.hair-bottom{border-bottom:1px solid var(--hair)}
.stack{display:flex;flex-direction:column}
.page{display:block;animation:rsbFade .22s ease-out both}

.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:var(--paper);padding:12px 18px;
  font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;z-index:400}
.skip:focus{left:0}

/* --- Typography ----------------------------------------------------------- */
.h1-slab{margin:0;font:400 clamp(34px,11.5cqi,72px)/0.98 var(--display);letter-spacing:-.025em;text-wrap:balance}
.h1{margin:0;font:400 clamp(28px,4.4cqi,52px)/1.02 var(--display);letter-spacing:-.028em;color:var(--green);text-wrap:balance}
.h1--green-bg{color:var(--paper);font-size:clamp(28px,4.6cqi,56px)}
.h2{margin:0;font:400 clamp(24px,3.2cqi,38px)/1.08 var(--display);letter-spacing:-.025em;color:var(--green);text-wrap:balance}
.h2--sm{font-size:clamp(22px,3cqi,34px);line-height:1.1}
.h2--green-bg{color:var(--paper)}
.h3{margin:0;font:400 17px/1.2 var(--display);letter-spacing:-.02em;color:var(--green);text-wrap:balance}
.h3--lg{font-size:22px;line-height:1.15;letter-spacing:-.022em}
.h3--xl{font-size:clamp(24px,3.4cqi,34px);line-height:1.1;letter-spacing:-.025em}
.body-lg{margin:0;font:400 16px/1.75 var(--sans);color:var(--ink);text-wrap:pretty}
.body{margin:0;font:400 15px/1.7 var(--sans);color:var(--ink);text-wrap:pretty}
.body--sm{font-size:14px;line-height:1.7}
.body--xs{font-size:13.5px;line-height:1.65}
.body--md{font-size:14.5px;line-height:1.7}
.cap{font:400 12.5px/1.55 var(--sans);color:var(--grey)}
.cap--14{font-size:14px;line-height:1}
.cap--13{font-size:13px;line-height:1}
.cap--mute{font-size:11px;line-height:1.6;color:var(--mute)}
.label{font:600 9px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.on-green{color:var(--sage)}
.measure-44{max-width:44ch}
.measure-46{max-width:46ch}
.measure-52{max-width:52ch}
.measure-58{max-width:58ch}
.measure-60{max-width:60ch}
.measure-62{max-width:62ch}
.measure-22ch{max-width:22ch}
.measure-24ch{max-width:24ch}
.measure-26ch{max-width:26ch}

/* --- Logo ----------------------------------------------------------------- */
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo__mark{display:block;height:var(--logo-h,34px);width:auto;flex:none}
.logo__word{display:flex;flex-direction:column;gap:3px;line-height:1}
.logo__name{font:400 calc(var(--logo-h,34px) * .5)/1 var(--display);letter-spacing:-.02em;color:var(--green)}
.logo__sub{font:600 calc(var(--logo-h,34px) * .205)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.logo--reversed .logo__name{color:var(--paper)}
.logo--reversed .logo__sub{color:var(--sage)}
a.logo:hover .logo__name{color:var(--gold)}
a.logo--reversed:hover .logo__name{color:var(--gold-light)}

/* --- Eyebrow -------------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:12px;
  font:600 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";display:block;width:22px;height:2px;background:currentColor;flex:none}
.eyebrow--on-brand{color:var(--gold-light)}

/* --- Buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  border:none;background:transparent;padding:16px 26px;
  font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .12s ease-out,color .12s ease-out,border-color .12s ease-out}
.btn--sm{padding:14px 22px;font-size:10.5px}
.btn--xs{padding:12px 20px;font-size:10.5px}
.btn--fill{background:var(--green);color:var(--paper)}
.btn--fill:hover{background:var(--green-hover);color:var(--paper)}
.btn--outline{border:1px solid var(--green);color:var(--green)}
.btn--outline:hover{background:var(--green);color:var(--paper)}
.btn--quiet{border:1px solid var(--hair-strong);color:var(--green)}
.btn--quiet:hover{border-color:var(--green);color:var(--green)}
.btn--gold{background:var(--gold);color:var(--green)}
.btn--gold:hover{background:var(--gold-light);color:var(--green)}
.btn--ghost-on-green{border:1px solid rgba(244,241,233,.4);color:var(--paper)}
.btn--ghost-on-green:hover{border-color:var(--gold-light);color:var(--gold-light)}
.btn--outline-on-green{border:1px solid var(--gold-light);color:var(--gold-light)}
.btn--outline-on-green:hover{background:var(--gold-light);color:var(--green)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* --- Header --------------------------------------------------------------- */
.header{position:sticky;top:0;z-index:80;background:var(--paper);border-bottom:3px solid var(--gold)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:36px;
  max-width:var(--measure);margin:0 auto;padding:20px var(--gutter) 18px}
.header__brand{display:flex;align-items:center;gap:26px;flex:none}
.header__strap{flex:none;white-space:nowrap;font:600 9px/1.5 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);border-left:1px solid var(--hair-strong);padding-left:26px}
@media (max-width:1149px){.header__strap{display:none}}
.nav{display:flex;align-items:center;gap:30px;flex:none;white-space:nowrap}
.nav__item{display:flex;flex-direction:column;gap:7px}
.nav__item > span:first-child{font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.nav__item:hover > span:first-child{color:var(--gold)}
.nav__rule{height:2px;background:transparent;display:block}
.nav__item.is-active .nav__rule{background:var(--gold)}
.nav__item.is-active > span:first-child{color:var(--green)}

.header__mobile{display:none;align-items:center;justify-content:space-between;padding:14px var(--gutter)}
.nav-toggle{border:1px solid var(--green);background:transparent;padding:9px 13px;
  font:600 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.drawer{display:none;border-top:1px solid var(--hair-strong);background:var(--white);animation:rsbDrawer .18s ease-out both}
.drawer.is-open{display:block}
.drawer a{display:flex;align-items:center;justify-content:space-between;padding:15px var(--gutter);
  border-bottom:1px solid var(--divider);font:600 12px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--green)}
.drawer a:hover{background:var(--paper);color:var(--green)}
.drawer a.is-active::after{content:"";width:16px;height:3px;background:var(--gold);display:block}
@media (max-width:760px){
  .header__inner{display:none}
  .header__mobile{display:flex}
}

/* --- Grids ---------------------------------------------------------------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:56px}
.cols--wide{grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr))}
.cols--290{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.cols--280{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:40px}
.cols--start{align-items:start}
.cols--end{align-items:end}
.cols--center{align-items:center}
/* Hairlines are drawn on the cells, not as a 1px gap over a coloured ground,
   so a row that wraps short does not leave a grey block where a cell is not. */
.hairgrid{display:grid;gap:0;border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.hairgrid > *{background:var(--white);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.hairgrid--230{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.hairgrid--250{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}

/* --- Callout -------------------------------------------------------------- */
.callout{background:var(--paper);border-left:3px solid var(--gold);padding:18px 22px;
  font:400 14px/1.7 var(--sans);color:var(--ink);text-wrap:pretty}
.callout[hidden]{display:none}

/* --- CheckTable ----------------------------------------------------------- */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.check-table{width:100%;border-collapse:collapse;background:var(--white);
  border-top:2px solid var(--green);table-layout:fixed}
.check-table th,.check-table td{padding:13px 14px;border-bottom:1px solid var(--divider);text-align:left}
.check-table thead th{background:var(--paper);border-bottom:1px solid var(--hair);
  font:600 9px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.check-table thead th + th,.check-table td{text-align:center;width:88px}
.check-table tbody th{font:400 13.5px/1.5 var(--sans);color:var(--ink);width:auto}
.check-table tbody tr:hover{background:var(--paper)}
.tick{display:inline-block;width:13px;height:10px;color:var(--green)}
.tick-empty{display:inline-block;width:13px;height:1px;background:var(--hair-strong);vertical-align:middle}

/* --- DetailTable ---------------------------------------------------------- */
.detail-table{border-top:2px solid var(--green);background:var(--white);margin:0}
.detail-table__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:6px 18px;padding:14px 14px;border-bottom:1px solid var(--divider);align-items:baseline}
.detail-table__row dt{font:600 9px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.detail-table__row dd{margin:0;font:400 13.5px/1.6 var(--sans);color:var(--ink)}

/* --- Chips ---------------------------------------------------------------- */
.chip{position:absolute;background:var(--green);color:var(--paper);padding:8px 13px;
  font:600 9px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;z-index:2}
.chip--tr{right:0;top:0;padding:7px 11px;letter-spacing:.16em}
.chip--bl{left:0;bottom:0}
.chip--banner{padding:9px 14px}
.chip--paper{background:var(--paper);color:var(--green);padding:6px 9px;font-size:8.5px;letter-spacing:.16em}

/* --- Home: hero ----------------------------------------------------------- */
.hero{background:var(--green)}
.hero__inner{max-width:var(--measure);margin:0 auto;padding:82px var(--gutter) 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:56px;align-items:end}
.hero__copy{container-type:inline-size;display:flex;flex-direction:column;gap:26px}
.hero__facts{display:flex;flex-direction:column;border-top:1px solid rgba(224,184,74,.45)}
.hero__fact{display:flex;align-items:baseline;gap:20px;padding:22px 0;border-bottom:1px solid var(--hair-on-green)}
.hero__fact b{flex:none;width:74px;font:400 30px/1 var(--display);letter-spacing:-.025em;color:var(--gold-light)}
.hero__fact span{font:400 13.5px/1.55 var(--sans);color:var(--sage)}
.hero__rule{max-width:var(--measure);margin:0 auto;padding:56px var(--gutter) 74px}
.hero__rule div{height:1px;background:var(--hair-on-green)}

/* --- Sections ------------------------------------------------------------- */
.sec-pad{padding-top:80px;padding-bottom:80px}
.sec-pad--74{padding-top:74px;padding-bottom:74px}
.sec-pad--78{padding-top:78px;padding-bottom:78px}
.sec-pad--76{padding-top:76px;padding-bottom:76px}
.sec-pad--66{padding-top:66px;padding-bottom:66px}
.sec-pad--head{padding-top:58px;padding-bottom:44px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:34px}

.feature{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  border:1px solid var(--hair-strong);background:var(--white)}
.feature__photo{position:relative;min-height:380px;background:var(--paper);border-right:1px solid var(--hair)}
.feature__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature__body{padding:36px 34px;display:flex;flex-direction:column;gap:20px}
.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));gap:0;
  border-top:1px solid var(--hair);border-left:1px solid var(--hair);margin-top:6px}
.factgrid > div{background:var(--white);padding:18px 16px;display:flex;flex-direction:column;gap:8px;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.factgrid b{font:400 24px/1 var(--display);letter-spacing:-.025em;color:var(--green)}
.factgrid span{font:400 11.5px/1.5 var(--sans);color:var(--slate)}

.step{padding:28px 26px 34px;display:flex;flex-direction:column;gap:14px}
.step b{font:400 13px/1 var(--display);color:var(--gold)}

.service{padding:30px 28px 36px;display:flex;flex-direction:column;gap:14px}
.service__rule{width:34px;height:3px;background:var(--gold)}

.promises{display:flex;flex-direction:column;border-top:1px solid var(--hair-strong)}
.promise{padding:20px 0;border-bottom:1px solid var(--hair);display:flex;gap:18px;align-items:baseline}
.promise b{flex:none;font:600 11px/1.5 var(--sans);letter-spacing:.14em;color:var(--gold)}
.promise span{font:400 14.5px/1.65 var(--sans);color:var(--ink)}

/* --- House detail --------------------------------------------------------- */
.crumb{font:600 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.crumb:hover{color:var(--gold)}
.house-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px}
.rent-block{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap}
.rent-block__fig{font:400 34px/1 var(--display);letter-spacing:-.025em;color:var(--green)}
.rent-block__fig small{font:400 12.5px/1 var(--sans);color:var(--grey)}

.gallery{display:flex;flex-direction:column;gap:12px}
.gallery__banner{position:relative;border:1px solid var(--hair);height:clamp(280px,34cqi,460px);
  background:var(--paper);cursor:zoom-in;width:100%;padding:0;display:block}
.gallery__banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery__thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px}
.thumb{position:relative;height:130px;border:1px solid var(--hair);overflow:hidden;padding:0;
  background:var(--paper);display:block;width:100%}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{border-color:var(--green)}
.thumb__bar{position:absolute;left:0;top:0;right:0;height:3px;background:var(--gold);display:none;z-index:2}
.thumb.is-active .thumb__bar{display:block}

.rooms{border-top:2px solid var(--green)}
.room{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(90px,100%),1fr));gap:12px;align-items:center;
  padding:16px 14px;border-bottom:1px solid var(--divider);position:relative;width:100%;
  background:var(--white);border-left:none;border-right:none;border-top:none;text-align:left}
.room:hover{background:var(--paper)}
.room[disabled]{cursor:default;opacity:.72}
.room[disabled]:hover{background:var(--white)}
.room__name{font:600 13.5px/1.4 var(--sans);color:var(--green)}
.room__meta{font:400 12.5px/1.4 var(--sans);color:var(--slate)}
.room__rent{font:600 12.5px/1.4 var(--sans);color:var(--green)}
.room__state{font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);justify-self:end}
.room__bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);display:none}
.room.is-selected .room__bar{display:block}

.panel{background:var(--paper);border:1px solid var(--hair-strong);padding:26px;display:flex;flex-direction:column;gap:16px}
.panel--plain{background:transparent;padding:24px;gap:12px}
.map-well{height:210px;background:var(--paper);border:1px solid var(--hair);display:flex;align-items:flex-end;padding:16px}
.map-well span{font:600 9px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}

/* --- Photo viewer --------------------------------------------------------- */
.viewer{position:fixed;inset:0;z-index:300;background:rgba(31,61,43,.82);display:grid;place-items:center;
  padding:24px;animation:rsbFade .16s ease-out both;border:none;width:100%;height:100%}
.viewer[hidden]{display:none}
.viewer__panel{background:var(--paper);border:1px solid var(--green);border-top:3px solid var(--gold);
  padding:14px;display:flex;flex-direction:column;gap:12px;max-width:min(880px,100%)}
.viewer__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.viewer__count{font:600 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.viewer__img{width:100%;max-height:min(66vh,560px);object-fit:contain;background:var(--white);border:1px solid var(--hair)}
.viewer__label{font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--green)}

/* --- Forms ---------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:9px}
.field label{font:600 9px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.field input,.field select,.field textarea{
  border:1px solid var(--hair-strong);background:var(--white);padding:14px 12px;
  font:400 15px/1.3 var(--sans);color:var(--ink);width:100%}
.field textarea{line-height:1.6;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M0.7 0.7 L5.5 5.7 L10.3 0.7' fill='none' stroke='%231F3D2B' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);outline:none}
.field__error{font:400 11.5px/1.4 var(--sans);color:var(--green);border-left:3px solid var(--gold);padding-left:9px}
.field__error[hidden]{display:none}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:18px}
.field-row--sm{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.form-hint{font:400 12px/1.5 var(--sans);color:var(--grey)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.received{border:1px solid var(--green);padding:34px;display:flex;flex-direction:column;gap:18px;
  animation:rsbFade .25s ease-out both}
.received[hidden]{display:none}
.received__rule{width:44px;height:3px;background:var(--gold)}
.received h2{margin:0;font:400 26px/1.15 var(--display);letter-spacing:-.025em;color:var(--green)}

.contact-panel{background:var(--green);padding:30px;display:flex;flex-direction:column;gap:22px}
.contact-panel__row{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--hair-on-green);padding-top:16px}
.contact-panel__row b{font:600 9px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
.contact-panel__row span,.contact-panel__row a{font:400 16px/1.5 var(--sans);color:var(--paper)}
.contact-panel__row a:hover{color:var(--gold-light)}

/* --- Listing (dormant until there is a second house) ---------------------- */
.filters{background:var(--white);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:40}
.filters[hidden]{display:none}
.filters__inner{max-width:var(--measure);margin:0 auto;padding:18px var(--gutter);
  display:flex;flex-wrap:wrap;gap:30px;align-items:center}
.filter-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filter-group > span{font:600 9px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.segmented{display:flex;gap:1px;background:var(--hair);border:1px solid var(--hair);flex-wrap:wrap}
.segmented button{border:none;background:var(--white);color:var(--ink);padding:9px 13px;
  font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.segmented button:hover{background:var(--paper)}
.segmented button.is-active{background:var(--green);color:var(--paper)}
.result-line{margin-left:auto;font:400 12px/1 var(--sans);color:var(--grey)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:28px}
.card{background:var(--white);border:1px solid var(--hair-strong);display:flex;flex-direction:column;color:inherit}
.card:hover{border-color:var(--green);color:inherit}
.card__photo{position:relative;height:210px;background:var(--paper);border-bottom:1px solid var(--hair)}
.card__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__body{padding:22px;display:flex;flex-direction:column;gap:14px;flex:1}
.card__foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-top:1px solid var(--divider);padding-top:14px}
.card__foot b{font:400 26px/1 var(--display);letter-spacing:-.025em;color:var(--green)}
.card__foot span{font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.empty-state{padding:60px 0;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.empty-state[hidden]{display:none}

/* --- Footer --------------------------------------------------------------- */
.footer{background:var(--green)}
.footer__top{max-width:var(--measure);margin:0 auto;padding:56px var(--gutter) 30px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:40px}
.footer__strap{font:600 9px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
.footer__col{display:flex;flex-direction:column;gap:14px}
.footer__col > b{font:600 9px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light)}
.footer__col a{font:400 13.5px/1.5 var(--sans);color:var(--paper)}
.footer__col a:hover{color:var(--gold-light)}
.footer__legal{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter) 46px}
.footer__legal div{border-top:1px solid var(--hair-on-green);padding-top:20px;
  font:400 10.5px/1.7 var(--sans);color:var(--sage)}
.footer__legal a{color:var(--sage)}
.footer__legal a:hover{color:var(--gold-light)}

/* --- Gaps ----------------------------------------------------------------- */
.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g14{gap:14px}.g16{gap:16px}
.g18{gap:18px}.g20{gap:20px}.g22{gap:22px}.g24{gap:24px}.g26{gap:26px}.g30{gap:30px}
.g34{gap:34px}.g44{gap:44px}