/* ============================================================
   GHN — custom overrides
   1. Typographic wordmark (logo without icon, larger text)
   2. Centered homepage hero, icon mark centered behind it
   Load AFTER css/style.css
   ============================================================ */

/* ---------- 1. wordmark ---------- */
.brand-word{
  display:inline-flex; align-items:baseline; gap:14px;
  font-family:var(--serif); font-weight:500;
  font-size:34px; letter-spacing:.05em; line-height:1;
  color:var(--text); white-space:nowrap;
  transition:font-size .5s var(--ease);
}
.brand-word em{
  font-family:var(--sans); font-style:normal; font-weight:400;
  font-size:11.5px; letter-spacing:.46em; text-transform:uppercase;
  color:var(--gold); transform:translateY(-3px);
}
.site-header.scrolled .brand-word{ font-size:27px; }

/* footer variant */
.brand-word-foot{ font-size:40px; margin-bottom:22px; }
.site-header.scrolled .brand-word-foot{ font-size:40px; }

/* ---------- 2. centered homepage hero ---------- */
.hero-center .wrap{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.hero-center .kicker{ justify-content:center; }
.hero-center .kicker::after{
  content:""; width:48px; height:1px; background:var(--gold); opacity:.7;
}
.hero-center .hero-title{ max-width:none; }
.hero-center .hero-sub{ margin-inline:auto; }
.hero-center .hero-actions{ justify-content:center; }

/* icon mark: centered behind the headline instead of bleeding off-right */
.hero-center .hero-mark{
  left:50%; right:auto; top:50%;
  transform:translate(-50%,-50%);
  height:100vh; opacity:.055;
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .brand-word{ font-size:25px; gap:10px; }
  .brand-word em{ font-size:9px; letter-spacing:.32em; }
  .brand-word-foot{ font-size:32px; }
  .hero-center .hero-mark{ height:70vh; }
}

/* ============================================================
   GHN — enhancements & fixes (v2, 2026)
   ============================================================ */

/* --- FIX: homepage hero content overlapping the bottom hero bar --- */
.hero-center{ padding-bottom: clamp(150px, 18vh, 240px); }
.hero-center .hero-actions{ margin-top: 46px; }

@media (max-width: 880px){
  .hero-foot .wrap{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-center{ padding-bottom: clamp(190px, 28vh, 280px); }
}
@media (max-width: 560px){
  /* on small screens, let the strap sit in normal flow instead of pinned */
  .hero-foot{ position: static; border-top: 0; margin-top: 44px; }
  .hero-center{ padding-bottom: clamp(60px, 9vh, 100px); }
  .hero-foot .wrap{ padding: 0; }
  .scroll-cue{ display: none; }
}

/* --- POLISH: tasteful hover motion --- */
.prop-card{ transition: transform .6s var(--ease); }
.prop-card:hover{ transform: translateY(-6px); }
.btn{ will-change: color; }
.btn-solid:hover{ box-shadow: 0 14px 40px -16px rgba(190,155,92,.5); }
.svc-row .go{ will-change: transform; }
.door h3{ transition: color .4s var(--ease); }
.door:hover h3{ color: var(--gold-soft); }

/* gentle fade-up for the hero strap so it doesn't pop in */
.hero .hero-foot{ opacity: 0; animation: heroFootIn 1s var(--ease) .5s forwards; }
@keyframes heroFootIn{ to{ opacity: 1; } }

/* --- Contact form: sent state --- */
form.is-sent .field,
form.is-sent .radio-row,
form.is-sent .form-note{ opacity: .45; transition: opacity .5s var(--ease); }
form .btn{ transition: background .45s var(--ease), color .45s var(--ease); }

/* --- ACCESSIBILITY: never leave reveal content stuck hidden --- */
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-title .line > span{ animation: none !important; transform: none !important; }
  .hero .hero-foot{ animation: none !important; opacity: 1 !important; }
  .marquee-track{ animation: none !important; }
  .scroll-cue::after{ animation: none !important; }
  html{ scroll-behavior: auto !important; }
}

/* ============================================================
   GHN — v3 revamp (Jul 2026)
   Real logo · word bands · richer motion
   ============================================================ */

/* ---------- real logo ---------- */
.brand-logo{
  height:46px; width:auto; display:block;
  transition:height .5s var(--ease), opacity .4s;
}
.brand:hover .brand-logo{ opacity:.85; }
.site-header.scrolled .brand-logo{ height:36px; }
.f-logo{ height:120px; width:auto; display:block; margin-bottom:26px; }
@media (max-width:640px){
  .brand-logo{ height:36px; }
  .site-header.scrolled .brand-logo{ height:30px; }
  .f-logo{ height:96px; }
}

/* ---------- word bands (replace numeric stats) ---------- */
.stat .wordstat{
  font-family:var(--serif); font-size:clamp(26px,2.6vw,40px);
  color:var(--text); line-height:1.15; letter-spacing:.01em;
}
.stat .wordstat em{ font-style:italic; color:var(--gold); }

/* ---------- gold marquee variant (tenant types) ---------- */
.marquee-gold{ background:linear-gradient(180deg, var(--ink-2), #140809); }
.marquee-gold .marquee-track span{ color:var(--gold); opacity:.75; }
.marquee-gold .marquee-track{ animation-duration:44s; }
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* ---------- motion v3 ---------- */
/* deeper, softer reveal: rise + settle + un-blur */
html.js .reveal{
  opacity:0; transform:translateY(44px);
  filter:blur(7px);
  transition:opacity 1.15s var(--ease), transform 1.15s var(--ease), filter 1.15s var(--ease);
}
html.js .reveal.in{ opacity:1; transform:none; filter:blur(0); }

/* gentle continuous drift on inner-page hero watermark */
.hero-inner .hero-mark{ animation:markDrift 14s ease-in-out infinite alternate; }
@keyframes markDrift{
  from{ transform:translateY(-52%) scale(1); }
  to  { transform:translateY(-48%) scale(1.03); }
}

/* CTA watermark slow breathe */
.cta-band .mark{ animation:markBreathe 12s ease-in-out infinite alternate; }
@keyframes markBreathe{
  from{ opacity:.045; transform:translate(-50%,-50%) scale(1); }
  to  { opacity:.075; transform:translate(-50%,-50%) scale(1.05); }
}

/* cards & tiles: lift + gold edge on hover */
.sector, .value, .step, .feature-card{
  transition:transform .6s var(--ease), background .6s, box-shadow .6s;
}
.sector:hover, .value:hover, .step:hover{
  transform:translateY(-5px);
  box-shadow:inset 0 -1px 0 var(--gold), 0 18px 44px -24px rgba(0,0,0,.8);
}
.feature-card:hover{ transform:translateY(-6px); }

/* doors: slow ken-burns on the artwork */
.door .door-bg svg{ transition:transform 6s var(--ease); transform:scale(1.001); }
.door:hover .door-bg svg{ transform:scale(1.08); }

/* svc rows: arrow slide + number fade */
.svc-row .n{ transition:color .5s; }
.svc-row:hover .n{ color:var(--gold); }

/* nav links: smoother underline (uses existing ::after) */
.nav-links a::after{ transition:transform .55s var(--ease); }

/* image frames: subtle parallax target */
.ph svg{ will-change:transform; }

/* footer logo breathing room */
.f-brand p{ max-width:34ch; }

@media (prefers-reduced-motion: reduce){
  .hero-inner .hero-mark, .cta-band .mark{ animation:none !important; }
  html.js .reveal{ filter:none !important; }
}

/* ============================================================
   GHN — v4: real photography
   ============================================================ */
.ph{ position:relative; overflow:hidden; }
.ph-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  filter:saturate(.82) contrast(1.04) brightness(.9);
  transition:transform 1.4s var(--ease), filter .8s;
}
.ph.has-img > svg, .ph.has-img .ph-tag{ display:none; }
/* warm brand wash over photos so they sit in the palette */
.ph.has-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(121,18,16,.18), rgba(10,10,12,.28) 75%);
}
.feature-card:hover .ph-img, a:hover > .ph .ph-img{ transform:scale(1.05); }
.door .door-bg .ph-img{ transition:transform 1.2s var(--ease); }
.door:hover .door-bg .ph-img{ transform:scale(1.06); }
/* door overlay already darkens via .door::before */

/* faint photographic backdrop on inner-page heroes */
.hero-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.34; z-index:-2; pointer-events:none;
  filter:saturate(.72) brightness(.8) contrast(1.05);
  -webkit-mask-image:linear-gradient(to bottom, black 60%, transparent 96%);
  mask-image:linear-gradient(to bottom, black 60%, transparent 96%);
}