/* ==========================================================================
   The Halum Group — Exclusive Portfolio
   Brand: Warm Black #110607 · Ivory #FBF9F6 · White
   Type:  Compass Sans Regular throughout, headings included (Compass Display
          retired, Oct 2026). Jost stays in the stack as the web fallback 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 Sans','Jost',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-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);}
.hfh-eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#7a6c66;}
.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;
}
.hfh-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.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%);}

.hfh-nav{
  position:relative;z-index:2;display:grid;
  grid-template-areas:"mark cta" "links links";
  grid-template-columns:auto auto;justify-content:space-between;align-items:center;
  row-gap:12px;padding-top:16px;color:#fff;
}
.hfh-nav__marklink{grid-area:mark;display:flex;align-items:center;min-height:44px;}
.hfh-nav__mark{height:38px;width:auto;object-fit:contain;}
.hfh-nav__cta{grid-area:cta;justify-self:end;}
.hfh-nav__links{
  grid-area:links;justify-self:center;
  display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(14px,4vw,30px);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.hfh-nav__links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:4px;}

.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;}
.hfh-hero__title{font-size:clamp(27px,7vw,46px);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,2.6vw,12px);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);}
.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;}
.hfh-residence__body{font-size:15px;line-height:1.85;font-weight:300;color:#3d312e;text-wrap:pretty;}
.hfh-residence__img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:#ece7e1;}

/* ---- details ----------------------------------------------------------- */
.hfh-details{background:var(--hfh-black);color:#fff;
  padding-top:clamp(52px,8vw,96px);padding-bottom:clamp(52px,8vw,96px);}
.hfh-details__inner{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(44px,7vw,84px);}
.hfh-details__block{display:flex;flex-direction:column;gap:26px;}
.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);}
.hfh-label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#9a8d87;}
.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:var(--hfh-ivory);}
.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){
  /* Three tracks, the outer two equal: the room list occupies the right one
     and an empty track of the same width balances it on the left, so the
     DRAWING itself lands on the page centerline rather than the pair of them. */
  .hfh-lightbox__stage{
    display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;
    align-items:center;justify-items:center;gap:clamp(24px,3vw,44px);
  }
  .hfh-lightbox--plan .hfh-lightbox__img{max-width:100%;max-height:76vh;}
  .hfh-lightbox__stage > .hfh-lightbox__img{grid-column:2;min-width:0;}
  .hfh-lightbox__aside{grid-column:3;justify-self:start;
    width:clamp(200px,17vw,260px);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;
}
/* Same heading on the lightbox's ivory ground. The aside lays the clone out
   as a grid (see .hfh-lightbox__aside ul), where columns: is ignored, so the
   heading spans the row there. */
.hfh-lightbox__aside .hfh-rooms__group{
  grid-column:1 / -1;
  font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  line-height:1.6;color:#7a6c66;
  margin-top:14px;padding-top:10px;border-top:1px solid rgba(17,6,7,.14);
}
.hfh-lightbox__aside .hfh-rooms__group:first-child{margin-top:0;padding-top:0;border-top:0;}
/* The script toggles panes with the hidden attribute; the display rules above
   would otherwise outrank the browser's [hidden]{display:none}. */
.hfh-lightbox [hidden]{display:none !important;}

/* ==========================================================================
   PLAN LIGHTBOX — LAYOUT (v2.3.3)
   Every page carries an inline copy of the lightbox styles above, and on
   equal specificity the inline copy wins; the doubled selectors here outrank
   it so these fixes apply without re-pasting the pages.

   1. The drawing's height is budgeted from the viewport: 100vh minus the
      dialog padding minus the caption row. The old fixed 76vh ignored the
      caption and padding, so on shorter windows the stack overran the
      dialog, the stage shrank, and MAIN LEVEL · OPEN FULL SIZE landed on
      top of the drawing. Dialog padding is also trimmed in plan mode, which
      is where a portrait drawing gets its size back.
   2. The drawing and the room list are centred TOGETHER as one unit (flex
      row), not the drawing alone with the list hung off its right side.
   3. The room list scrolls inside its own column instead of growing the
      stage past the viewport.
   4. The "Full room list" title is a tier above the group headings (bigger,
      black, ruled underneath), so the two no longer read as the same thing.
   ========================================================================== */
.hfh-lightbox.hfh-lightbox--plan{padding:clamp(14px,3vw,40px);}
.hfh-lightbox.hfh-lightbox--plan .hfh-lightbox__img{
  max-width:100%;
  max-height:calc(100vh - 2 * clamp(14px,3vw,40px) - 64px); /* 64 = caption row + gap */
}
.hfh-lightbox.hfh-lightbox--plan .hfh-lightbox__aside{
  max-height:calc(100vh - 2 * clamp(14px,3vw,40px) - 64px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  align-self:center;padding-right:8px;
  scrollbar-width:thin;scrollbar-color:rgba(17,6,7,.25) transparent;
}
.hfh-lightbox .hfh-lightbox__asidetitle{
  font-size:11px;letter-spacing:.22em;font-weight:600;color:var(--hfh-black);
  padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid rgba(17,6,7,.18);
}
.hfh-lightbox .hfh-lightbox__aside .hfh-rooms__group{font-size:8.5px;color:#8a7d77;}
.hfh-lightbox .hfh-lightbox__aside .hfh-rooms__group:first-child{margin-top:8px;padding-top:0;border-top:0;}
@media (min-width:900px){
  /* One centred row: drawing, hairline, list. The list keeps a fixed width
     and the drawing takes what is left, up to its own height budget. */
  .hfh-lightbox.hfh-lightbox--plan .hfh-lightbox__stage{
    display:flex;flex-direction:row;align-items:center;justify-content:center;
    gap:clamp(24px,3vw,44px);width:auto;max-width:100%;
  }
  .hfh-lightbox.hfh-lightbox--plan .hfh-lightbox__stage > .hfh-lightbox__img{
    flex:0 1 auto;min-width:0;
    max-width:calc(100% - clamp(220px,20vw,320px) - clamp(24px,3vw,44px));
  }
  .hfh-lightbox.hfh-lightbox--plan .hfh-lightbox__aside{
    flex:0 0 clamp(220px,20vw,320px);width:clamp(220px,20vw,320px);
  }
}
/* Stacked (phone / portrait tablet): the drawing gives up some height so the
   list has room beneath it, and the list scrolls within a short window. */
@media (max-width:899px){
  .hfh-lightbox.hfh-lightbox--plan .hfh-lightbox__img{max-height:48vh;}
  .hfh-lightbox.hfh-lightbox--plan .hfh-lightbox__aside{max-height:26vh;}
  .hfh-lightbox.hfh-lightbox--plan .hfh-lightbox__stage{gap:10px;}
}

/* ---- inquire ----------------------------------------------------------- */
.hfh-inquire{background:var(--hfh-black);color:#fff;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;}
.hfh-inquire__title{font-size:clamp(19px,4.4vw,27px);letter-spacing:.07em;text-transform:uppercase;}
.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:#ded6d2;}
.hfh-inquire__name{letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:#fff;}
.hfh-inquire__sep{opacity:.35;}
.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-nav__links{font-size:10.5px;letter-spacing:.22em;}
  .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{grid-template-areas:"mark links cta";grid-template-columns:auto 1fr auto;
    align-items:flex-start;padding-top:22px;column-gap:clamp(20px,4vw,44px);}
  .hfh-nav__mark{height:clamp(44px,5vw,56px);}
  .hfh-nav__links{justify-self:end;gap:clamp(18px,3vw,34px);}
  .hfh-nav__cta{align-self:flex-start;}
  .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;}
}

/* ==========================================================================
   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-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);}
}

/* ==========================================================================
   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:.08em;margin-right:-.08em;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;}
}