/* ==========================================================================
   Halum Fine Homes — Exclusive Portfolio
   Brand: Warm Black #110607 · Ivory #FBF9F6 · White
   Type:  Compass Display (headings) · Compass Sans (everything else).
          Playfair Display / Jost stay in each stack as web fallbacks for
          machines without the licensed Compass fonts (previews, handoff).
   Mobile-first. Breakpoints: 480 / 640 / 768 / 1024 / 1280.
   All selectors are scoped to .hfh so nothing can collide with a theme.
   ========================================================================== */

.hfh{
  --hfh-black:#110607; --hfh-ivory:#FBF9F6; --hfh-mute:#a79c97;
  /* Break out of any theme container, with or without a full-width template.
     Symmetric negative margins matter: 100vw includes the vertical scrollbar,
     so a margin-left-only break-out pushes the whole design ~8px off-center
     and clips the remainder on the right. Bleeding equally both ways keeps
     the contents centered on the true page center at every width. */
  width:100vw; max-width:100vw; overflow-x:hidden;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:var(--hfh-ivory); color:var(--hfh-black);
  font-family:'Compass Sans','Jost',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-style:normal; font-size:16px; font-weight:400; line-height:1.6; letter-spacing:normal;
  text-align:left; -webkit-font-smoothing:antialiased;
}

/* ---- defensive reset: keep opinionated themes out -------------------- */
/* :where() keeps every reset at zero specificity, so utility classes below
   always win — while still overriding whatever the theme sets on elements. */
.hfh,.hfh *,.hfh *::before,.hfh *::after{box-sizing:border-box;}
.hfh :where(div,section,nav,footer,p,span,a,h1,h2,h3,ul,li,figure,img){
  max-width:none; float:none; text-shadow:none;
}
.hfh :where(figure){margin:0;padding:0;}
.hfh :where(img){max-width:100%;height:auto;display:block;border:0;border-radius:0;box-shadow:none;}
.hfh :where(p){margin:0;padding:0;}
.hfh :where(p,div,span,li,h1,h2,h3){text-align:inherit;}
.hfh :where([style*="justify"]){text-align:inherit;}
.hfh :where(ul,li){margin:0;padding:0;list-style:none;}
.hfh :where(h1,h2,h3){
  margin:0;padding:0;font-family:'Compass Display','Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:400;text-transform:none;text-wrap:balance;
}
.hfh :where(a){color:inherit;text-decoration:none;border:0;box-shadow:none;}
.hfh :where(a:hover),.hfh :where(a:focus){color:#b9aca4;}
.hfh :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

/* ---- shared ----------------------------------------------------------- */
.hfh-pad{padding-left:clamp(18px,5vw,56px);padding-right:clamp(18px,5vw,56px);}
/* THREE TIERS of uppercase micro-type, separated on size, tracking, AND
   brightness so the hierarchy survives being stacked a few lines apart:
     1  .hfh-subtitle  19-26px display serif      — block title (loudest)
     2  .hfh-eyebrow   11px / .3em  / present     — section eyebrow
     3  .hfh-label     8.5px / .28em / recessed   — column label (quietest)
   The block title is the outlier twice over: display face, and far larger. The
   eyebrow and label are both micro-type and close in size, so they separate on
   value instead. */
.hfh-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#7a6c66;}
.hfh-eyebrow--dark{color:#b9aca4;}
/* Display face, one step under a section title. The eyebrow above it stays
   micro-type, so the two never read as the same tier. */
.hfh-subtitle{
  font-family:'Compass Display','Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:400;font-size:clamp(19px,3.4vw,26px);letter-spacing:.07em;
  text-transform:uppercase;color:var(--hfh-ivory);
}
.hfh-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:12px 26px;border:1px solid rgba(255,255,255,.4);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  white-space:nowrap;max-width:100%;
}
.hfh-btn:hover,.hfh-btn:focus{background:rgba(255,255,255,.1);color:#fff;}

/* ---- home / exclusive portfolio --------------------------------------- */
.hfh-home{
  min-height:100vh; min-height:100svh;
  background:var(--hfh-black);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding-top:26px;padding-bottom:26px;
}
.hfh-home__main{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:clamp(40px,8vh,96px);flex:1;width:100%;max-width:900px;padding:clamp(48px,9vh,96px) 0;
}
/* equal air above the centered stack and below it, before the footer */
.hfh-home__main{margin-top:clamp(48px,10vh,120px);}
.hfh-home .hfh-footer{margin-top:clamp(48px,10vh,120px);}
.hfh-home__mark{width:clamp(58px,14vw,96px);height:auto;}
.hfh-home__team{font-size:clamp(10px,2.6vw,13px);letter-spacing:.16em;text-transform:uppercase;font-weight:500;}
.hfh-home__title{font-size:clamp(27px,8vw,58px);letter-spacing:.06em;text-transform:uppercase;line-height:1.1;margin-top:16px;}
.hfh-home__name{font-size:clamp(13px,3.6vw,17px);letter-spacing:.14em;text-transform:uppercase;font-weight:400;}
.hfh-home__role{font-size:14px;font-weight:300;color:#cfc6c1;margin-top:4px;}
.hfh-home__contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:4px clamp(12px,2vw,18px);margin-top:18px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:300;color:#cfc6c1;}
.hfh-home__contact a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding-inline:6px;}
.hfh-home__contact span{opacity:.4;}
@media (max-width:520px){
  .hfh-home__contact{flex-direction:column;gap:0;}
  .hfh-home__contact span{display:none;}
}

/* ---- hero -------------------------------------------------------------- */
.hfh-hero{
  position:relative;height:68vh;height:68svh;min-height:460px;
  overflow:hidden;background:var(--hfh-black);display:flex;flex-direction:column;
}
/* HERO CROP — one line. Lower percentages favour the façade, higher show
   more foreground lawn. Reviewed at 1920px: 30% / 38% / 45%. */
.hfh-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  --hfh-hero-pos:center 38%; object-position:var(--hfh-hero-pos);}
.hfh-hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,6,7,.6) 0%,rgba(17,6,7,.15) 38%,rgba(17,6,7,.75) 100%);}

/* ONE row at every width: monogram left, then INQUIRE + toggle right.
   Under 900px the links live in a panel beneath the bar, driven by a real
   checkbox — opening and closing needs NO JavaScript. (It used to depend on
   the script adding a class, so if the script did not run the panel simply
   sat open.) The script only syncs aria-expanded and adds the conveniences:
   close on link tap, on outside tap, and on Escape. */
.hfh-nav{
  position:relative;z-index:5;display:grid;
  grid-template-areas:"mark right";
  grid-template-columns:auto auto;justify-content:space-between;align-items:center;
  padding-top:16px;color:#fff;
}
.hfh-nav__marklink{grid-area:mark;display:flex;align-items:center;min-height:44px;}
/* Fluid on the same curve as the hero type: 26px at 375px → 52px at 1920px.
   The offset+vw form matters — a bare vw clamp would sit at the 26px floor
   until ~960px and only then start growing. */
.hfh-nav__mark{height:clamp(26px,19.7px + 1.68vw,52px);width:auto;object-fit:contain;}
.hfh-nav__right{grid-area:right;display:flex;align-items:center;gap:clamp(8px,1.5vw,16px);}

/* Off-canvas but still focusable, so the label can be reached by keyboard. */
.hfh-nav__check{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0;
  pointer-events:none;}
.hfh-nav__links{
  position:absolute;top:100%;right:clamp(18px,5vw,56px);left:auto;z-index:6;
  width:min(240px,calc(100vw - 36px));
  display:flex;flex-direction:column;align-items:stretch;
  background:rgba(17,6,7,.96);border:1px solid rgba(255,255,255,.14);
  padding:4px 18px 8px;
  max-height:70vh;overflow:hidden;opacity:1;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  transition:max-height .3s ease,opacity .22s ease,padding .3s ease;
}
.hfh-nav__links a{display:flex;align-items:center;justify-content:center;
  min-height:48px;text-align:center;
  border-bottom:1px solid rgba(255,255,255,.1);}
.hfh-nav__links a:last-child{border-bottom:0;}
/* Closed by default; the checkbox opens it. */
.hfh-nav__links{max-height:0;opacity:0;visibility:hidden;padding-top:0;padding-bottom:0;}
.hfh-nav__check:checked ~ .hfh-nav__links{
  max-height:70vh;opacity:1;visibility:visible;padding-top:4px;padding-bottom:8px;
}

/* Hamburger → X. Three bars: the element is the middle one. */
.hfh-nav__toggle{
  width:44px;height:44px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.4);background:transparent;
}
.hfh-nav__toggle:hover{background:rgba(255,255,255,.1);}
.hfh-nav__toggle:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.hfh-nav__bars{position:relative;display:block;width:18px;height:1px;background:#fff;
  transition:background-color .2s ease;}
.hfh-nav__bars::before,.hfh-nav__bars::after{
  content:"";position:absolute;left:0;width:18px;height:1px;background:#fff;
  transition:transform .24s ease,top .24s ease;
}
.hfh-nav__bars::before{top:-6px;}
.hfh-nav__bars::after{top:6px;}
.hfh-nav__check:checked ~ .hfh-nav__right .hfh-nav__bars{background:transparent;}
.hfh-nav__check:checked ~ .hfh-nav__right .hfh-nav__bars::before{top:0;transform:rotate(45deg);}
.hfh-nav__check:checked ~ .hfh-nav__right .hfh-nav__bars::after{top:0;transform:rotate(-45deg);}
.hfh-nav__check:focus-visible ~ .hfh-nav__right .hfh-nav__toggle{outline:2px solid #fff;outline-offset:3px;}



.hfh-hero__body{
  position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;color:#fff;padding-bottom:clamp(28px,6vh,72px);
}
.hfh-hero__kicker{display:flex;align-items:center;gap:12px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;color:#e6ded9;}
.hfh-hero__kicker span{width:22px;height:1px;background:rgba(255,255,255,.7);flex:none;}
/* Title and address ride the same vw curve as the monogram so the header
   composition holds from 375px to 1920px instead of the mark shrinking away
   under a title that keeps growing. */
.hfh-hero__title{font-size:clamp(27px,19.5px + 2vw,58px);line-height:1.15;letter-spacing:.05em;
  text-transform:uppercase;margin:14px 0 10px;max-width:14ch;}
.hfh-hero__addr{font-size:clamp(9.5px,8.2px + .36vw,15px);letter-spacing:.16em;text-transform:uppercase;
  font-weight:300;color:#ded6d2;}

/* ---- quick info bar ---------------------------------------------------- */
.hfh-bar{
  background:var(--hfh-black);color:#fff;display:grid;
  grid-template-columns:repeat(2,1fr);row-gap:14px;align-items:center;text-align:center;
  padding-top:clamp(22px,3.5vw,32px);padding-bottom:clamp(22px,3.5vw,32px);
  font-size:clamp(9.5px,1vw,11.5px);letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;
}
.hfh-bar__item{padding:0 clamp(10px,2vw,20px);}
/* A text character inside one cell, NOT a cell divider: same weight, size and
   colour as the words around it, only slightly held back. */
.hfh-bar__dot{font-weight:inherit;font-size:inherit;color:inherit;opacity:.55;
  padding:0 .15em;}
.hfh-bar__item:not(:nth-child(2n+1)){border-left:1px solid rgba(255,255,255,.28);}

/* ---- residence --------------------------------------------------------- */
.hfh-residence{
  padding-top:clamp(52px,9vw,120px);padding-bottom:clamp(52px,9vw,120px);
  display:grid;grid-template-columns:1fr;max-width:1120px;margin:0 auto;
  gap:clamp(34px,7vw,90px);align-items:center;
}
.hfh-residence__copy{display:flex;flex-direction:column;gap:22px;}
.hfh-residence__title{font-size:clamp(24px,5.6vw,34px);line-height:1.25;}
/* Measure is capped on the TEXT, not the column: above 1600px the column
   widens with the container but the line length stays readable. */
.hfh-residence__body{font-size:15px;line-height:1.85;font-weight:300;color:#3d312e;
  text-wrap:pretty;max-width:68ch;}
/* No forced ratio and no cover: the residence photo is a wide architectural
   shot, and a 3/4 slot centre-cropped half its width away. It shows whole, at
   whatever proportions the photo actually has — same rule as the floor plans. */
.hfh-residence__img{width:100%;height:auto;background:#ece7e1;cursor:zoom-in;}

/* ---- residence video tile --------------------------------------------- */
/* A real <button>, so it is keyboard operable and announced with its label.
   The poster is a plain <img> (swappable); the play control is drawn here. */
.hfh-video{
  position:relative;display:block;width:100%;padding:0;margin:0;
  border:0;background:#ece7e1;cursor:pointer;overflow:hidden;
  -webkit-appearance:none;appearance:none;text-align:center;
}
.hfh-video__poster{width:100%;height:auto;display:block;transition:transform .5s ease;}
.hfh-video__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,6,7,.28) 0%,rgba(17,6,7,.18) 45%,rgba(17,6,7,.55) 100%);
  transition:background-color .25s ease;}
.hfh-video__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(56px,7vw,84px);height:clamp(56px,7vw,84px);border-radius:50%;
  border:1px solid rgba(251,249,246,.85);pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .25s ease,border-color .25s ease,transform .25s ease;
}
/* Ivory triangle, drawn with borders so there is no asset to load. */
.hfh-video__play::after{
  content:"";display:block;
  border-style:solid;border-width:.55em 0 .55em .92em;
  border-color:transparent transparent transparent var(--hfh-ivory);
  font-size:clamp(13px,1.5vw,18px);margin-left:.22em;
  transition:border-left-color .25s ease;
}
.hfh-video:hover .hfh-video__poster,
.hfh-video:focus-visible .hfh-video__poster{transform:scale(1.02);}
.hfh-video:hover .hfh-video__play,
.hfh-video:focus-visible .hfh-video__play{
  background:var(--hfh-ivory);border-color:var(--hfh-ivory);transform:translate(-50%,-50%) scale(1.06);
}
.hfh-video:hover .hfh-video__play::after,
.hfh-video:focus-visible .hfh-video__play::after{border-left-color:var(--hfh-black);}
.hfh-video:focus-visible{outline:2px solid var(--hfh-black);outline-offset:4px;}

/* ---- details ----------------------------------------------------------- */
.hfh-details{background:var(--hfh-black);color:#fff;
  padding-top:clamp(52px,8vw,96px);padding-bottom:clamp(52px,8vw,96px);}
.hfh-details__inner{
  --hfh-details-gap:clamp(44px,7vw,84px);
  max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:var(--hfh-details-gap);
}
/* The section eyebrow belongs to the block under it, so it cancels most of
   the section gap rather than floating midway between two blocks. */
.hfh-details__inner > .hfh-eyebrow{margin-bottom:calc(18px - var(--hfh-details-gap));}
.hfh-details__block{--hfh-block-gap:26px;display:flex;flex-direction:column;gap:var(--hfh-block-gap);}
.hfh-details__block > .hfh-eyebrow{margin-bottom:calc(10px - var(--hfh-block-gap));}
.hfh-details__title{font-size:clamp(21px,4.6vw,30px);letter-spacing:.07em;text-transform:uppercase;}

.hfh-essence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
.hfh-essence__item{padding:18px 16px 18px 0;border-top:1px solid rgba(255,255,255,.16);}
/* Seven items never fill a 2-, 3- or 5-column row, which left the last one
   alone under a hairline that stopped part-way across. The final item takes
   the whole row until a column count divides evenly (see 1024 and 1600). */
.hfh-essence__item:last-child{grid-column:1 / -1;}
.hfh-label{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#8a7d77;}
.hfh-value{font-size:14px;font-weight:300;line-height:1.6;color:#fff;margin-top:8px;}

.hfh-features{display:grid;grid-template-columns:1fr;}
.hfh-features__col{padding:20px 0;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:10px;}
.hfh-features__col:last-child{border-bottom:1px solid rgba(255,255,255,.16);}
.hfh-features__col .hfh-value{line-height:1.8;color:#ded6d2;margin-top:0;}

/* ---- gallery ----------------------------------------------------------- */
.hfh-gallery{padding-top:clamp(52px,8vw,104px);padding-bottom:clamp(52px,8vw,104px);}
.hfh-gallery__inner{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(24px,4vw,40px);}
.hfh-gallery__head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;}
.hfh-gallery__title{font-size:clamp(21px,4.6vw,30px);letter-spacing:.07em;text-transform:uppercase;}
.hfh-gallery__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.hfh-gallery__img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#ece7e1;cursor:zoom-in;}

/* The lightbox is appended to <body>, i.e. OUTSIDE .hfh, so it cannot inherit
   the brand tokens — it declares them itself. Without this every var() here
   silently falls back to inherited values and the captions wash out. */
.hfh-lightbox{
  --hfh-black:#110607; --hfh-ivory:#FBF9F6; --hfh-mute:#a79c97;
  position:fixed;inset:0;z-index:99999;background:rgba(17,6,7,.95);display:none;
  align-items:center;justify-content:center;padding:clamp(14px,5vw,64px);touch-action:pan-y;}
.hfh-lightbox.is-open{display:flex;}
.hfh-lightbox__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}

/* Controls carry their own backdrop rather than relying on the photo behind
   them — over a bright exterior shot a bare glyph disappears. 48px circles,
   inset far enough to clear the WordPress admin bar when it is present. */
.hfh-lightbox__nav,.hfh-lightbox__close{
  position:absolute;width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(17,6,7,.72);border:1px solid rgba(255,255,255,.35);
  color:var(--hfh-ivory);-webkit-text-fill-color:var(--hfh-ivory);
  font-family:'Compass Sans','Jost',Helvetica,Arial,sans-serif;font-style:normal;
  line-height:1;transition:background-color .15s ease,color .15s ease;
}
.hfh-lightbox__nav:hover,.hfh-lightbox__close:hover,
.hfh-lightbox__nav:focus-visible,.hfh-lightbox__close:focus-visible{
  background:var(--hfh-ivory);border-color:var(--hfh-ivory);
  color:var(--hfh-black);-webkit-text-fill-color:var(--hfh-black);
}
.hfh-lightbox__nav:focus-visible,.hfh-lightbox__close:focus-visible{
  outline:2px solid #fff;outline-offset:3px;
}
.hfh-lightbox__close{
  top:calc(24px + var(--hfh-adminbar, 0px));right:24px;
  font-size:26px;font-weight:400;padding-bottom:3px;
}
.hfh-lightbox__nav{top:50%;transform:translateY(-50%);font-size:30px;font-weight:500;}
.hfh-lightbox__nav--prev{left:24px;padding-right:3px;}
.hfh-lightbox__nav--next{right:24px;padding-left:3px;}

/* Floor plans sit on an ivory ground, so the controls invert. */
.hfh-lightbox--plan{background:rgba(251,249,246,.97);}
.hfh-lightbox--plan .hfh-lightbox__nav,
.hfh-lightbox--plan .hfh-lightbox__close{
  background:rgba(17,6,7,.86);border-color:rgba(17,6,7,.4);
  color:var(--hfh-ivory);-webkit-text-fill-color:var(--hfh-ivory);
}
.hfh-lightbox--plan .hfh-lightbox__nav:hover,
.hfh-lightbox--plan .hfh-lightbox__close:hover,
.hfh-lightbox--plan .hfh-lightbox__nav:focus-visible,
.hfh-lightbox--plan .hfh-lightbox__close:focus-visible{
  background:var(--hfh-black);border-color:var(--hfh-black);
  color:var(--hfh-ivory);-webkit-text-fill-color:var(--hfh-ivory);
}
.hfh-lightbox--plan .hfh-lightbox__nav:focus-visible,
.hfh-lightbox--plan .hfh-lightbox__close:focus-visible{outline-color:var(--hfh-black);}

/* Phones: prev/next drop to the bottom corners, clear of a thumb reaching
   for the image itself. All three stay 48px. */
@media (max-width:639px){
  .hfh-lightbox__nav{top:auto;bottom:24px;transform:none;}
  .hfh-lightbox__nav--prev{left:24px;}
  .hfh-lightbox__nav--next{right:24px;}
  .hfh-lightbox{padding-bottom:88px;}
}

/* Plan lightbox extras: caption, a full-size escape hatch (so an agent can
   pinch-zoom or print the drawing), and the FULL room list beside the plan —
   complementary here, where the page itself only shows highlights. */
.hfh-lightbox--plan.is-open{flex-direction:column;gap:10px;}
.hfh-lightbox--plan .hfh-lightbox__img{max-width:95vw;max-height:82vh;object-fit:contain;}
.hfh-lightbox__stage{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  width:100%;max-width:100%;min-height:0;
}
.hfh-lightbox__aside{width:100%;max-width:520px;}
.hfh-lightbox__asidetitle{
  font-family:'Compass Sans','Jost',Helvetica,Arial,sans-serif;font-style:normal;
  font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  color:#7a6c66;text-align:center;margin-bottom:8px;
}
.hfh-lightbox__aside ul{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;
  list-style:none;margin:0;padding:0;
}
.hfh-lightbox__aside li{
  font-size:12px;line-height:1.75;font-weight:300;color:#3d312e;letter-spacing:.02em;
}
@media (min-width:900px){
  .hfh-lightbox__stage{flex-direction:row;align-items:center;justify-content:center;gap:clamp(24px,3vw,44px);}
  .hfh-lightbox--plan .hfh-lightbox__img{max-width:100%;max-height:76vh;}
  .hfh-lightbox__stage > .hfh-lightbox__img{flex:1 1 auto;min-width:0;}
  .hfh-lightbox__aside{flex:0 0 clamp(200px,17vw,260px);width:auto;max-width:none;
    border-left:1px solid rgba(17,6,7,.14);padding-left:clamp(20px,2vw,30px);}
  .hfh-lightbox__aside ul{grid-template-columns:1fr;}
  .hfh-lightbox__asidetitle{text-align:left;}
}
.hfh-lightbox__meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 20px;
  padding:0 72px;text-align:center;
  font-family:'Compass Sans','Jost',Helvetica,Arial,sans-serif;font-style:normal;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--hfh-black);
}
.hfh-lightbox__open{
  display:inline-flex;align-items:center;min-height:44px;
  text-decoration:underline;text-decoration-color:rgba(17,6,7,.4);
  text-decoration-thickness:1px;text-underline-offset:3px;color:var(--hfh-black);
}
.hfh-lightbox__open:hover{text-decoration-color:var(--hfh-black);color:var(--hfh-black);}
@media (max-width:639px){
  .hfh-lightbox__meta{padding:0 16px;}
  .hfh-lightbox--plan.is-open{padding-bottom:88px;}
  .hfh-lightbox--plan .hfh-lightbox__img{max-height:68vh;}
}

/* ---- video lightbox ---------------------------------------------------- */
/* 16:9, capped at 90% of the viewport in both axes. Native controls; the
   script autoplays on open and pauses + rewinds on close. */
.hfh-lightbox--video{background:rgba(17,6,7,.96);}
.hfh-lightbox__frame{
  position:relative;width:min(90vw,calc(90vh * 16 / 9));aspect-ratio:16/9;
  background:#000;max-height:90vh;
}
.hfh-lightbox__frame > video,
.hfh-lightbox__frame > iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  background:#000;
}

/* ---- by level (tabbed) -------------------------------------------------- */
.hfh-levels{display:flex;flex-direction:column;gap:clamp(22px,3.5vw,32px);}

/* Radios + labels, so switching levels needs NO JavaScript. (The tab row used
   to be hidden until a script revealed it, which meant no script, no tabs.) */
.hfh-levels__tabs{
  display:flex;align-items:stretch;gap:clamp(4px,2vw,28px);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.hfh-levels__radio{position:absolute;width:1px;height:1px;opacity:0;margin:0;
  padding:0;pointer-events:none;}
.hfh-tab{
  flex:1 1 auto;min-height:44px;padding:10px 4px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:-1px;border-bottom:1px solid transparent;
  font-family:'Compass Sans','Jost',Helvetica,Arial,sans-serif;font-style:normal;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#7d716b;white-space:nowrap;transition:color .15s ease;
}
.hfh-tab{cursor:pointer;}
.hfh-tab:hover{color:#b9aca4;}
.hfh-levels__radio:checked + .hfh-tab{color:var(--hfh-ivory);border-bottom-color:var(--hfh-ivory);}
.hfh-levels__radio:focus-visible + .hfh-tab{outline:2px solid var(--hfh-ivory);outline-offset:-2px;}
.hfh-tab__short{display:inline;}
.hfh-tab__long{display:none;}

.hfh-levels__panels{display:block;}
.hfh-levels__panels > .hfh-panel{display:none;}
.hfh-levels:has(#hfh-lvl-first:checked) .hfh-panel--first,
.hfh-levels:has(#hfh-lvl-second:checked) .hfh-panel--second,
.hfh-levels:has(#hfh-lvl-third:checked) .hfh-panel--third,
.hfh-levels:has(#hfh-lvl-basement:checked) .hfh-panel--basement{display:block;}
/* Somewhere without :has(), show every level stacked rather than none. */
@supports not selector(:has(*)){
  .hfh-levels__tabs{display:none;}
  .hfh-levels__panels{display:flex;flex-direction:column;gap:clamp(28px,5vw,48px);}
  .hfh-levels__panels > .hfh-panel{display:block;}
}

/* Ivory tile: the white drawing reads as a deliberate surface on the warm
   black ground. No forced ratio — the tile sizes to its own plan. */
.hfh-plan{
  background:var(--hfh-ivory);padding:12px;margin:0;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hfh-plan--narrow{max-width:720px;margin-left:auto;margin-right:auto;}
.hfh-plan__img{width:100%;height:auto;object-fit:contain;cursor:zoom-in;display:block;}
.hfh-plan__caption{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 12px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:#7a6c66;text-align:center;
}
.hfh-plan__hint{font-weight:400;color:#a4968f;}
.hfh-plan__hint--tap{display:none;}
@media (hover:none){
  .hfh-plan__hint--click{display:none;}
  .hfh-plan__hint--tap{display:inline;}
}

/* One-line highlights row, then the full list behind a disclosure. */
.hfh-highlights{
  margin-top:clamp(18px,2.5vw,24px);text-align:center;
  font-size:13px;line-height:1.9;font-weight:300;letter-spacing:.02em;color:#ded6d2;
  text-wrap:pretty;
}
.hfh-highlights__dot{opacity:.45;padding:0 .18em;}

/* <details>/<summary>, so it works with no JS at all. */
.hfh-disclosure{margin-top:clamp(14px,2vw,20px);}
.hfh-disclosure__summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:#9a8d87;transition:color .15s ease;
}
.hfh-disclosure__summary::-webkit-details-marker{display:none;}
.hfh-disclosure__summary::marker{content:"";}
.hfh-disclosure__summary:hover{color:var(--hfh-ivory);}
.hfh-disclosure__summary:focus-visible{outline:2px solid var(--hfh-ivory);outline-offset:3px;}
/* Chevron drawn from two borders; rotates on open. */
.hfh-disclosure__chev{
  display:block;width:7px;height:7px;flex:none;margin-top:-4px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);transition:transform .24s ease;
}
.hfh-disclosure[open] .hfh-disclosure__chev{transform:rotate(-135deg);margin-top:2px;}

/* Rooms fill across in reading order, not down. */
.hfh-rooms{
  display:grid;grid-template-columns:1fr;gap:0 clamp(20px,3vw,40px);
  margin-top:clamp(14px,2vw,20px);
  border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(14px,2vw,20px);
}
.hfh-rooms li{
  font-size:13.5px;line-height:1.85;letter-spacing:.02em;color:#cfc6c1;font-weight:300;
}

@media (min-width:480px){
  .hfh-tab{font-size:10.5px;letter-spacing:.2em;}
  .hfh-plan__caption{letter-spacing:.28em;}
}
@media (min-width:640px){
  .hfh-tab__short{display:none;}
  .hfh-tab__long{display:inline;}
  .hfh-tab{flex:0 1 auto;padding-inline:clamp(8px,2vw,18px);}
  .hfh-levels__tabs{gap:clamp(10px,3vw,34px);}
  .hfh-rooms{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hfh-plan{padding:18px;}
  .hfh-highlights{font-size:13.5px;}
}
@media (min-width:768px){
  .hfh-rooms{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:1024px){
  .hfh-plan{padding:24px;}
}

/* ---- inquire ----------------------------------------------------------- */
/* Ivory, so the dark By Level band and the dark footer read as two sections
   rather than one long black tail. */
.hfh-inquire{background:var(--hfh-ivory);color:var(--hfh-black);text-align:center;
  padding-top:clamp(44px,6vw,66px);padding-bottom:clamp(44px,6vw,66px);
  display:flex;flex-direction:column;align-items:center;gap:18px;}
/* No cap at the base size: at 27px a 16ch measure is ~240px, which would
   force three lines on desktop too. The cap belongs only where the line can
   actually reach the edge of the screen. */
.hfh-inquire__title{font-size:clamp(19px,4.4vw,27px);letter-spacing:.07em;text-transform:uppercase;
  margin-inline:auto;text-wrap:balance;}
.hfh-inquire__title .hfh-nowrap{display:inline;}
@media (max-width:520px){
  .hfh-inquire{padding-left:clamp(28px,9vw,48px);padding-right:clamp(28px,9vw,48px);}
  /* Exactly two lines on a phone: "Private Showings" / "by Appointment".
     A ch cap let it break anywhere; balance was making it three. */
  .hfh-inquire__title{max-width:none;text-wrap:nowrap;}
  .hfh-inquire__title .hfh-nowrap{display:block;}
}
@media (min-width:521px) and (max-width:720px){
  .hfh-inquire__title{max-width:22ch;}
}
.hfh-inquire__line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 18px;font-size:12.5px;font-weight:300;color:#3d312e;}
.hfh-inquire__name{letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:var(--hfh-black);}
.hfh-inquire__sep{opacity:.3;}
/* The shared button is drawn for dark grounds; invert it on this one. */
.hfh-inquire .hfh-btn{border-color:rgba(17,6,7,.4);color:var(--hfh-black);}
.hfh-inquire .hfh-btn:hover,.hfh-inquire .hfh-btn:focus{
  background:var(--hfh-black);border-color:var(--hfh-black);color:var(--hfh-ivory);}
.hfh-inquire__line a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:4px;}

/* ---- footer ------------------------------------------------------------ */
/* One centered column at every width. Nothing left- or right-aligned,
   nothing reflows between breakpoints — only size, tracking, line breaks. */
.hfh-footer{background:var(--hfh-black);color:var(--hfh-mute);padding-bottom:34px;}
.hfh-footer__inner{border-top:1px solid rgba(255,255,255,.14);
  padding-top:clamp(26px,4vw,36px);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:clamp(14px,2vw,18px);}

.hfh-footer__brand{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.2vw,22px);}
.hfh-footer__compass{width:clamp(150px,18vw,200px);height:auto;opacity:.9;}
.hfh-footer__team{color:#fff;font-size:clamp(10px,1.1vw,11px);
  letter-spacing:.2em;text-transform:uppercase;font-weight:400;}

.hfh-footer__addr{color:#cfc6c1;font-size:clamp(10px,1.1vw,11px);
  letter-spacing:.14em;text-transform:uppercase;font-weight:300;line-height:1.7;}

.hfh-footer__legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px clamp(12px,2vw,20px);
  font-size:clamp(10px,1.1vw,11px);letter-spacing:.14em;
  text-transform:uppercase;font-weight:300;color:#cfc6c1;}
/* Underline via text-decoration, not border-bottom: the anchor is a 44px tap
   target, so a bottom border would float ~16px under the centered text. */
.hfh-footer__legal a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding-inline:6px;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);
  text-decoration-thickness:1px;text-underline-offset:3px;}
.hfh-footer__legal a:hover{text-decoration-color:#b9aca4;}
.hfh-footer__dot{opacity:.4;}

.hfh-footer__disc{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:clamp(18px,2.5vw,24px);margin-top:clamp(6px,1.5vw,12px);}
.hfh-footer__marks{height:26px;width:auto;opacity:.85;}
.hfh-footer__disc p{text-align:center;font-size:10.5px;line-height:1.75;font-weight:300;
  max-width:64ch;text-wrap:pretty;}

/* phones: the separator dot becomes a line break */
@media (max-width:520px){
  .hfh-footer__legal{flex-direction:column;gap:10px;}
  .hfh-footer__dot{display:none;}
  .hfh-footer__addr br{display:inline;}
}

/* ==========================================================================
   480px and up
   ========================================================================== */
@media (min-width:480px){
  .hfh-eyebrow{letter-spacing:.3em;}
  .hfh-home__team{letter-spacing:.22em;}
  .hfh-home__title{letter-spacing:.07em;}
  .hfh-hero__kicker{letter-spacing:.34em;}
  .hfh-hero__addr{letter-spacing:.24em;}
  .hfh-btn{letter-spacing:.28em;padding:12px 30px;}
  .hfh-label{letter-spacing:.28em;}
  .hfh-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
}

/* ==========================================================================
   640px and up — spec bar goes to three columns
   ========================================================================== */
@media (min-width:640px){
  .hfh-bar{grid-template-columns:repeat(3,1fr);letter-spacing:.2em;}
  .hfh-bar__item:not(:nth-child(2n+1)){border-left:0;}
  .hfh-bar__item:not(:nth-child(3n+1)){border-left:1px solid rgba(255,255,255,.28);}
}

/* ==========================================================================
   768px and up (tablet)
   ========================================================================== */
@media (min-width:768px){
  .hfh-nav{padding-top:22px;}
  .hfh-hero{height:74vh;height:74svh;min-height:520px;}
  .hfh-hero__title{max-width:12ch;}

  .hfh-essence{grid-template-columns:repeat(3,minmax(0,1fr));}
  .hfh-essence__item{padding:20px 22px 20px 0;}
  .hfh-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;}
  .hfh-features__col:last-child,.hfh-features__col{border-bottom:0;}
  .hfh-gallery__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
  .hfh-residence__body{font-size:15.5px;}
}

/* ==========================================================================
   900px and up — the menu becomes an inline row and the toggle retires
   ========================================================================== */
@media (min-width:900px){
  .hfh-nav{grid-template-areas:"mark links right";grid-template-columns:auto 1fr auto;
    align-items:flex-start;column-gap:clamp(20px,4vw,44px);}
  .hfh-nav__toggle{display:none;}
  .hfh-nav__links,
  .hfh-nav__check:checked ~ .hfh-nav__links{
    grid-area:links;position:static;justify-self:end;align-self:flex-start;
    width:auto;
    display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;
    gap:clamp(18px,3vw,34px);
    background:none;border:0;padding:0;max-height:none;overflow:visible;
    opacity:1;visibility:visible;white-space:nowrap;
    font-size:clamp(10px,.72vw,12.5px);letter-spacing:.22em;
  }
  .hfh-nav__links a{min-height:44px;border-bottom:0;padding-inline:2px;}
  .hfh-nav__right{align-self:flex-start;}
}

/* ==========================================================================
   1024px and up (desktop)
   ========================================================================== */
@media (min-width:1024px){
  .hfh-hero{height:78vh;height:78svh;}
  .hfh-residence{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,7vw,90px) 70px;}
  .hfh-residence__copy{gap:28px;}
  .hfh-essence{grid-template-columns:repeat(5,minmax(0,1fr));}
  .hfh-essence__item{padding:22px 24px 22px 0;}
  .hfh-essence__item:last-child{grid-column:auto;}
  .hfh-essence__item:nth-child(6){grid-column:1 / span 3;}
  .hfh-essence__item:nth-child(7){grid-column:4 / span 2;}
  .hfh-features{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 56px;}
  .hfh-gallery__grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;}
  .hfh-value{font-size:15px;}
}

/* ==========================================================================
   1180px and up (spec bar goes to one row)
   ========================================================================== */
@media (min-width:1280px){
  .hfh-bar{grid-template-columns:repeat(6,auto);justify-content:center;letter-spacing:.22em;}
  .hfh-bar__item{padding:0 clamp(14px,2.2vw,30px);white-space:nowrap;}
  .hfh-bar__item:not(:nth-child(3n+1)){border-left:0;}
  .hfh-bar__item:not(:first-child){border-left:1px solid rgba(255,255,255,.28);}
  .hfh-gallery__grid{grid-template-columns:repeat(7,minmax(0,1fr));}
}

/* ==========================================================================
   1100px and up — disclaimer sits beside the info column
   ========================================================================== */
@media (min-width:1100px){
  /* two equal halves — the dividing rule lands exactly on the page centerline */
  .hfh-footer__inner{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:0;row-gap:0;align-items:center;max-width:none;margin:0;
  }
  .hfh-footer__brand{grid-column:1;}
  .hfh-footer__addr{grid-column:1;margin-top:14px;}
  .hfh-footer__legal{grid-column:1;margin-top:12px;}
  .hfh-footer__disc{
    grid-column:2;grid-row:1 / span 3;align-self:stretch;
    border-top:0;border-left:1px solid rgba(255,255,255,.14);
    padding-top:0;margin-top:0;padding-left:clamp(32px,4vw,60px);
    align-items:center;justify-content:center;gap:14px;
  }
  .hfh-footer__disc p{text-align:center;max-width:60ch;}
  .hfh-footer__brand,.hfh-footer__addr,.hfh-footer__legal{padding-right:clamp(32px,4vw,60px);}
}

/* ==========================================================================
   1600px and up — the design stops sitting in a narrow centred column.
   Containers grow to ~1680px on fluid padding; the reading measure does not.
   ========================================================================== */
@media (min-width:1600px){
  .hfh-pad{padding-left:clamp(56px,4vw,104px);padding-right:clamp(56px,4vw,104px);}
  .hfh-hero{height:84vh;height:84svh;}
  .hfh-residence{max-width:1680px;}
  .hfh-details__inner{max-width:1680px;}
  .hfh-gallery__inner{max-width:1680px;}
  /* Columns multiply, tiles do not stretch: each track is capped and the grid
     centres however many fit. 199px is chosen so eight tracks plus seven 12px
     gaps come to exactly 1680 — the container cap — leaving no odd slack, and
     so the count never drops below the seven columns of the 1280 band. */
  .hfh-gallery__grid{grid-template-columns:repeat(auto-fill,minmax(0,199px));
    justify-content:center;gap:12px;}
  .hfh-essence{grid-template-columns:repeat(7,minmax(0,1fr));}
  .hfh-essence__item:nth-child(6),.hfh-essence__item:nth-child(7){grid-column:auto;}
  .hfh-plan{padding:32px;}
}

/* ==========================================================================
   PASSWORD GATE
   WordPress replaces page content with its own form on protected pages, so
   the inline stylesheet in the Custom HTML block never loads. Everything the
   gate needs must live here, in the plugin-enqueued stylesheet.
   ========================================================================== */
.hfh-gate{
  min-height:100vh; min-height:100svh;
  background:var(--hfh-black);color:#fff;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,7vw,64px) clamp(20px,5vw,56px);
}
.hfh-gate__inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  width:100%;max-width:440px;gap:clamp(14px,2.4vw,18px);
}
.hfh-gate__mark{width:clamp(56px,13vw,72px);height:auto;margin-bottom:clamp(10px,2vw,16px);}
.hfh-gate__eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:#cfc6c1;}
/* Sentence case in the markup, uppercased here: screen readers and search
   still get readable text. All caps at display size needs more air, and the
   trailing letter-space is cancelled so the centered line stays optically
   centered. text-wrap:balance breaks it after "SHARED". */
.hfh-gate__title{font-size:clamp(22px,5.2vw,31px);line-height:1.28;
  letter-spacing:.06em;margin-right:-.06em;text-transform:uppercase;
  max-width:24ch;text-wrap:balance;}
.hfh-gate__error{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:400;color:#e4b7ae;}

.hfh-gate__form{display:flex;flex-direction:column;align-items:stretch;
  width:100%;gap:10px;margin-top:clamp(4px,1.5vw,10px);}
.hfh-gate__label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:#cfc6c1;text-align:left;}
.hfh-gate__input{
  width:100%;height:48px;min-height:44px;padding:12px 14px;
  background:var(--hfh-ivory);color:var(--hfh-black);
  border:1px solid rgba(255,255,255,.4);border-radius:0;
  font-family:'Compass Sans','Jost',Helvetica,Arial,sans-serif;font-style:normal;font-size:15px;letter-spacing:.08em;
}
.hfh-gate__input:focus{outline:2px solid #fff;outline-offset:2px;}
/* Ivory on transparent, inverting to warm-black-on-ivory. color is repeated
   with -webkit-text-fill-color because some themes force a button color that
   would otherwise leave dark text on the dark fill. Height matches the input
   exactly (48px) so the two align on the tablet+ row. */
.hfh .hfh-gate__button{
  width:100%;height:48px;min-height:44px;padding:0 26px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.4);background:transparent;
  color:var(--hfh-ivory);-webkit-text-fill-color:var(--hfh-ivory);
  font-family:'Compass Sans','Jost',Helvetica,Arial,sans-serif;font-style:normal;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  transition:background-color .15s ease,color .15s ease;
}
.hfh .hfh-gate__button:hover,
.hfh .hfh-gate__button:focus-visible{
  background:var(--hfh-ivory);border-color:var(--hfh-ivory);
  color:var(--hfh-black);-webkit-text-fill-color:var(--hfh-black);
}
.hfh .hfh-gate__button:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.hfh-gate__help{font-size:11px;letter-spacing:.06em;font-weight:300;color:#a79c97;
  margin-top:clamp(6px,1.5vw,12px);}
/* Underline on the inline anchor itself via text-decoration, so the rule is
   exactly as wide as the text — a border-bottom on the 44px tap-target box
   would run past it and sit low. Tap height comes from the line's padding. */
.hfh-gate__help{padding:10px 0;}
.hfh-gate__help a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);
  text-decoration-thickness:1px;text-underline-offset:3px;}
.hfh-gate__help a:hover,.hfh-gate__help a:focus{text-decoration-color:#b9aca4;}

@media (min-width:768px){
  .hfh-gate__eyebrow{letter-spacing:.3em;}
  .hfh-gate__form{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px;}
  .hfh-gate__label{flex:1 0 100%;text-align:center;}
  .hfh-gate__input{flex:1 1 200px;width:auto;}
  /* .hfh prefix matches the specificity of the base button rule above */
  .hfh .hfh-gate__button{flex:0 0 auto;width:auto;padding-inline:32px;}
}