/* ==========================================================================
   AAA Property Developers — Home  ("Console")
   White ground with warm sand bands, terracotta accent, Inter Tight throughout.
   Content lives in rounded modules inside the page gutter.
   Everything here is scoped to  body.h4  so no other page is touched.
   ========================================================================== */

body.h4{
  --pg:      #FFFFFF;   /* the page */
  --wash:    #F2EADD;   /* alternating sections */
  --wash-2:  #EAE0CF;

  --ink:     #241B15;
  --ink-2:   #43352B;
  --muted:   #6B5B4E;
  --faint:   #9C8E80;

  --ac:      #C4552D;   /* terracotta */
  --ac-d:    #9B3F1E;
  --ac-l:    #DB8A6A;
  --ac-200:  #EDBFAD;
  --ac-50:   #F7E8E0;

  --ok:      #4E7C59;
  --hold:    #C98A2B;
  --gone:    #B6AC9E;

  --hair:    #E6DCCB;
  --hair-2:  #F0E9DC;

  --pad:     clamp(20px,3.6vw,52px);
  --maxw:    1480px;
  --ez:      cubic-bezier(.19,1,.22,1);

  background:var(--pg);
  color:var(--muted);
  font-family:var(--f-sans);
  font-size:16.5px;line-height:1.62;letter-spacing:-.012em;
}

body.h4 .h4-wrap,
body.h4 .wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---------------- type ---------------- */
body.h4 .h4-d1{
  font-weight:700;letter-spacing:-.045em;line-height:1.02;color:var(--ink);
  font-size:clamp(2.5rem,4.4vw,4.3rem);
}
body.h4 .h4-em{display:block;color:var(--ac);font-style:normal}
body.h4 .h4-d2{
  font-weight:700;letter-spacing:-.04em;line-height:1.06;color:var(--ink);
  font-size:clamp(1.85rem,3.1vw,2.9rem);
}
body.h4 .h4-sub{margin-top:22px;max-width:52ch;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.68;color:var(--muted)}
body.h4 .h4-lead{font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.7;color:var(--muted);max-width:46ch}
body.h4 .h4-fine{margin-top:14px;font-size:.75rem;line-height:1.55;color:var(--faint)}

body.h4 .h4-mono{
  font-family:var(--f-mono);font-size:.64rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}

body.h4 .h4-link{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.88rem;font-weight:600;color:var(--ac);transition:gap .3s var(--ez);
}
body.h4 .h4-link:hover{gap:.95em}
body.h4 .h4-link svg{width:15px;height:15px}

/* ---------------- buttons ---------------- */
body.h4 .h4-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:14px 24px;border-radius:10px;border:1px solid var(--ac);
  background:var(--ac);color:#fff;cursor:pointer;
  font-size:.9rem;font-weight:600;letter-spacing:-.015em;white-space:nowrap;
  box-shadow:0 12px 26px -14px rgba(196,85,45,.55);
  transition:background .3s var(--ez),border-color .3s var(--ez),transform .3s var(--ez),box-shadow .3s var(--ez);
}
body.h4 .h4-btn:hover{background:var(--ac-d);border-color:var(--ac-d);transform:translateY(-1px)}
body.h4 .h4-btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ez)}
body.h4 .h4-btn:hover svg{transform:translateX(3px)}
body.h4 .h4-btn--line{background:#fff;color:var(--ink);border-color:var(--hair);box-shadow:none}
body.h4 .h4-btn--line:hover{background:#fff;color:var(--ac);border-color:var(--ac)}
body.h4 .h4-btn--ink{background:var(--ink);color:#fff;border-color:var(--ink)}
body.h4 .h4-btn--ink:hover{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
body.h4 .h4-btn--w{width:100%;margin-top:4px}
body.h4 .h4-btn--wa{background:#1FA463;border-color:#1FA463;box-shadow:none;width:100%;margin-top:16px}
body.h4 .h4-btn--wa:hover{background:#188A52;border-color:#188A52}

body.h4 .h4-ticks{display:grid;gap:12px;margin-top:24px}
body.h4 .h4-ticks li{display:flex;align-items:flex-start;gap:10px;font-size:.94rem;color:var(--ink-2)}
body.h4 .h4-ticks svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--ac)}

/* ---------------- section shell ---------------- */
body.h4 .h4-sec{position:relative;padding-block:clamp(56px,6.5vw,104px)}
body.h4 .h4-sec--wash{background:var(--wash)}

body.h4 .h4-head{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(18px,3vw,56px);align-items:end;
  margin-bottom:clamp(28px,3.4vw,48px);
}
body.h4 .h4-head>.h4-link{justify-self:start;align-self:end}
@media (max-width:900px){body.h4 .h4-head{grid-template-columns:1fr;align-items:start;gap:18px}}

/* a module: a rounded panel on the page ground */
body.h4 .h4-module{
  background:#fff;border:1px solid var(--hair);border-radius:18px;
  box-shadow:0 1px 2px rgba(36,27,21,.03),0 18px 40px -30px rgba(36,27,21,.2);
}

/* ---------------- scroll progress ---------------- */
body.h4 .h4-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:70;pointer-events:none}
body.h4 .h4-progress i{display:block;height:100%;width:var(--p,0%);background:var(--ac);transition:width .1s linear}

/* ---------------- word reveals (only hidden once JS is up) ---------------- */
body.h4 .h4-rev .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
body.h4 .h4-rev .w i{display:inline-block;font-style:normal}
html.js-h4 body.h4 .h4-rev .w i{transform:translateY(106%);transition:transform .8s var(--ez) var(--wd,0ms)}
html.js-h4 body.h4 .h4-rev.is-in .w i{transform:none}

/* ==========================================================================
   01 · HERO
   ========================================================================== */
body.h4 .h4-hero{padding-block:clamp(34px,4vw,60px) clamp(40px,4.4vw,66px)}
body.h4 .h4-hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
@media (max-width:1000px){body.h4 .h4-hero__grid{grid-template-columns:1fr;gap:36px}}

body.h4 .h4-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;background:var(--ac-50);
  font-size:.78rem;font-weight:500;color:var(--ac-d);
}
body.h4 .h4-pill b{font-weight:700}
body.h4 .h4-pill i{
  width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 0 rgba(78,124,89,.5);animation:h4pulse 2.4s var(--ez) infinite;
}
@keyframes h4pulse{70%{box-shadow:0 0 0 7px rgba(78,124,89,0)}100%{box-shadow:0 0 0 0 rgba(78,124,89,0)}}

body.h4 .h4-hero__copy .h4-d1{margin-top:22px;max-width:15ch}
body.h4 .h4-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}

body.h4 .h4-trust{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;
  margin-top:32px;padding-top:26px;border-top:1px solid var(--hair);
}
body.h4 .h4-trust li{display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--muted)}
body.h4 .h4-trust svg{width:17px;height:17px;flex:none;color:var(--ac)}
@media (max-width:520px){body.h4 .h4-trust{grid-template-columns:1fr}}

/* the photo stage */
body.h4 .h4-hero__stage{position:relative}
body.h4 .h4-stage{
  position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3.1;
  background:var(--wash-2);box-shadow:0 30px 70px -40px rgba(36,27,21,.45);
}
body.h4 .h4-shot{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s var(--ez)}
body.h4 .h4-shot.is-on{opacity:1}
body.h4 .h4-shot img{width:100%;height:100%;object-fit:cover}
body.h4 .h4-shot::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(36,27,21,.42) 0%,transparent 30%,transparent 52%,rgba(36,27,21,.6) 100%);
}

body.h4 .h4-stage__top{
  position:absolute;left:16px;right:16px;top:14px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
body.h4 .h4-stage__place{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
}
body.h4 .h4-stage__place svg{width:13px;height:13px}
body.h4 .h4-stage__ix{font-family:var(--f-mono);font-size:.62rem;color:rgba(255,255,255,.66)}
body.h4 .h4-stage__ix b{color:#fff;font-weight:500}

body.h4 .h4-switch{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
  display:flex;gap:6px;flex-wrap:wrap;
}
body.h4 .h4-switch__b{
  padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.34);background:rgba(36,27,21,.42);
  color:rgba(255,255,255,.88);font-size:.75rem;font-weight:500;letter-spacing:-.01em;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:all .3s var(--ez);
}
body.h4 .h4-switch__b:hover{background:rgba(36,27,21,.65);color:#fff}
body.h4 .h4-switch__b.is-on{background:#fff;border-color:#fff;color:var(--ink);font-weight:600}

/* The spec card overlaps the stage's top-right — the aerials are empty sky
   up there, and the layout pills own the bottom edge. */
body.h4 .h4-spec{
  position:absolute;right:-8px;top:52px;z-index:3;width:min(244px,58%);
  background:#fff;border:1px solid var(--hair);border-radius:16px;padding:15px 17px 13px;
  box-shadow:0 22px 46px -26px rgba(36,27,21,.4);
}
body.h4 .h4-spec__lbl{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
body.h4 .h4-spec__big{
  display:block;margin-top:2px;font-size:2.6rem;font-weight:700;letter-spacing:-.05em;
  line-height:1.05;color:var(--ac);
}
body.h4 .h4-spec__dl{margin:10px 0 0;display:grid;border-top:1px solid var(--hair-2)}
body.h4 .h4-spec__dl>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--hair-2);
}
body.h4 .h4-spec__dl>div:last-child{border-bottom:0;padding-bottom:0}
body.h4 .h4-spec__dl dt{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
body.h4 .h4-spec__dl dd{margin:0;font-size:.88rem;font-weight:600;color:var(--ink)}
body.h4 .h4-spec__dl dd small{font-weight:500;font-size:.68rem;color:var(--faint);margin-left:2px}

@media (max-width:1000px){
  body.h4 .h4-spec{position:relative;right:auto;top:auto;width:100%;margin-top:12px}
  body.h4 .h4-spec__dl{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px;border-top:0}
  body.h4 .h4-spec__dl>div{display:grid;gap:2px;border-bottom:0;padding:0}
}
@media (max-width:620px){
  body.h4 .h4-stage{aspect-ratio:4/3.4}
  /* the pills stay pinned to the photo's bottom edge and scroll sideways —
     going static would drop them out of the aspect-ratio box */
  body.h4 .h4-switch{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  body.h4 .h4-switch::-webkit-scrollbar{display:none}
  body.h4 .h4-switch__b{flex:none}
}

/* the four figures under the hero */
body.h4 .h4-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(34px,4vw,60px);border-top:1px solid var(--hair);
}
body.h4 .h4-stat{padding:22px 24px 0;border-left:1px solid var(--hair)}
body.h4 .h4-stat:first-child{border-left:0;padding-left:0}
body.h4 .h4-stat b{
  display:flex;align-items:baseline;
  font-size:clamp(1.9rem,3vw,2.7rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--ink);
}
body.h4 .h4-stat b i{font-style:normal;color:var(--ac)}
body.h4 .h4-stat small{display:block;margin-top:8px;font-size:.78rem;line-height:1.45;color:var(--faint)}
@media (max-width:760px){
  body.h4 .h4-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  body.h4 .h4-stat{padding:18px 16px;border-top:0}
  body.h4 .h4-stat:nth-child(odd){border-left:0;padding-left:0}
  body.h4 .h4-stat:nth-child(n+3){border-top:1px solid var(--hair)}
}

/* ==========================================================================
   02 · TICKER
   ========================================================================== */
body.h4 .h4-ticker{background:var(--ink);overflow:hidden;padding-block:12px}
body.h4 .h4-ticker__t{display:flex;width:max-content;animation:h4run 42s linear infinite}
body.h4 .h4-ticker:hover .h4-ticker__t{animation-play-state:paused}
@keyframes h4run{to{transform:translateX(-33.333%)}}
body.h4 .h4-ticker__t span{
  display:inline-flex;align-items:center;gap:9px;padding-inline:20px;
  font-size:.86rem;font-weight:500;letter-spacing:-.015em;color:rgba(255,255,255,.72);white-space:nowrap;
}
body.h4 .h4-ticker__t i{
  font-style:normal;font-family:var(--f-mono);font-size:.6rem;
  padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.12);color:var(--ac-l);
}
@media (prefers-reduced-motion:reduce){body.h4 .h4-ticker__t{animation:none}}

/* ==========================================================================
   03 · SITE PLAN
   ========================================================================== */
body.h4 .h4-plan{overflow:hidden}
body.h4 .h4-plan__bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--hair-2);
}
body.h4 .h4-filters{display:flex;flex-wrap:wrap;gap:6px}
body.h4 .h4-filters button{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:999px;border:1px solid var(--hair);background:#fff;
  font-size:.8rem;font-weight:500;color:var(--muted);cursor:pointer;
  transition:all .25s var(--ez);
}
body.h4 .h4-filters button i{font-style:normal;font-family:var(--f-mono);font-size:.62rem;color:var(--faint)}
body.h4 .h4-filters button:hover{border-color:var(--ac-200);color:var(--ac)}
body.h4 .h4-filters button.is-on{background:var(--ac);border-color:var(--ac);color:#fff}
body.h4 .h4-filters button.is-on i{color:rgba(255,255,255,.7)}
body.h4 .h4-plan__hint{color:var(--faint)}

/* the drawing is portrait, like the survey sheet, so the readout sticks
   alongside it rather than scrolling away at the top */
body.h4 .h4-plan__grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;align-items:start}
@media (max-width:1040px){body.h4 .h4-plan__grid{grid-template-columns:1fr}}

body.h4 .h4-plan__svg{padding:clamp(12px,1.8vw,24px);color:var(--ac-200)}
body.h4 .h4-plan__svg svg{
  width:100%;height:auto;display:block;max-height:min(1180px,150vh);margin-inline:auto;
}
body.h4 .h4-plan__bgrid{color:var(--ac-200)}
body.h4 .h4-road{fill:var(--wash-2)}
body.h4 .h4-road__c{stroke:#fff;stroke-width:2.4;stroke-dasharray:16 14;fill:none}
body.h4 .h4-plan__road-t{
  font-family:var(--f-mono);font-size:15px;letter-spacing:.18em;fill:var(--faint);
}
body.h4 .h4-plan__dim-t{
  font-family:var(--f-mono);font-size:14px;letter-spacing:.06em;fill:var(--faint);opacity:.75;
}
body.h4 .h4-plan__stamp text{
  font-family:var(--f-mono);font-size:24px;letter-spacing:.1em;fill:var(--ink-2);
  text-transform:uppercase;
}
body.h4 .h4-plan__stamp .h4-plan__stamp-s{font-size:15px;letter-spacing:.14em;fill:var(--faint)}

/* the two open-space reservations on the sheet */
body.h4 .h4-park polygon{fill:#C4D2AE;stroke:#fff;stroke-width:1.6}
body.h4 .h4-park text{
  font-family:var(--f-mono);font-size:14px;font-weight:500;fill:#5B6B48;pointer-events:none;
}

body.h4 .h4-plot{cursor:pointer;transition:opacity .25s var(--ez)}
body.h4 .h4-plot polygon{stroke:#fff;stroke-width:1.6;transition:fill .25s var(--ez),stroke .25s var(--ez)}
body.h4 .h4-plot text{
  font-family:var(--f-mono);font-size:17px;font-weight:500;pointer-events:none;fill:#fff;
}
body.h4 .h4-plot.is-available polygon{fill:#5E8F6A}
body.h4 .h4-plot.is-booked    polygon{fill:#D69A3E}
body.h4 .h4-plot.is-sold      polygon{fill:#DBD3C7}
body.h4 .h4-plot.is-sold text{fill:#9C8E80}
body.h4 .h4-plot:hover polygon,body.h4 .h4-plot:focus-visible polygon,body.h4 .h4-plot.is-active polygon{
  stroke:var(--ac);stroke-width:4;
}
body.h4 .h4-plot.is-available:hover polygon,body.h4 .h4-plot.is-available.is-active polygon{fill:#4E7C59}
body.h4 .h4-plot.is-dim{opacity:.2}
body.h4 .h4-plot:focus{outline:none}

/* the drawing shrinks a long way on a phone, so the lettering that carries
   meaning grows and the survey annotation steps out of the way */
@media (max-width:760px){
  body.h4 .h4-plot text{font-size:30px}
  body.h4 .h4-park text{font-size:24px}
  body.h4 .h4-plan__road-t{font-size:26px;letter-spacing:.1em}
  body.h4 .h4-plan__dim-t,body.h4 .h4-plan__stamp{display:none}
  body.h4 .h4-plot polygon{stroke-width:2.6}
}

/* the readout */
body.h4 .h4-panel{border-left:1px solid var(--hair-2);padding:20px;background:var(--wash);position:sticky;top:84px}
@media (max-width:1040px){body.h4 .h4-panel{border-left:0;border-top:1px solid var(--hair-2);position:static}}

body.h4 .h4-panel__big{
  display:block;margin-top:10px;font-size:3rem;font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--ac);
}
body.h4 .h4-panel__lbl{display:block;margin-top:4px;font-size:.84rem;color:var(--muted)}

body.h4 .h4-bar{display:flex;height:8px;border-radius:5px;overflow:hidden;margin-top:16px;background:var(--wash-2)}
body.h4 .h4-bar i{display:block;width:var(--p);height:100%}
body.h4 .h4-bar i.is-available{background:var(--ok)}
body.h4 .h4-bar i.is-booked{background:var(--hold)}
body.h4 .h4-bar i.is-sold{background:var(--gone)}

body.h4 .h4-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
body.h4 .h4-legend span{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--muted)}
body.h4 .h4-legend i{width:8px;height:8px;border-radius:3px;flex:none}
body.h4 .h4-legend i.is-available{background:var(--ok)}
body.h4 .h4-legend i.is-booked{background:var(--hold)}
body.h4 .h4-legend i.is-sold{background:var(--gone)}

body.h4 .h4-bands{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);display:grid;gap:10px}
body.h4 .h4-extent{display:grid;grid-template-columns:78px 1fr 38px;align-items:center;gap:9px}
body.h4 .h4-extent b{font-size:.74rem;font-weight:600;color:var(--ink-2)}
body.h4 .h4-extent i{display:block;height:5px;border-radius:3px;background:var(--wash-2);overflow:hidden}
body.h4 .h4-extent i u{display:block;height:100%;width:var(--w);background:var(--ac);text-decoration:none}
body.h4 .h4-extent em{font-style:normal;font-family:var(--f-mono);font-size:.64rem;color:var(--faint);text-align:right}

body.h4 .h4-panel__head{display:flex;align-items:center;gap:10px}
body.h4 .h4-panel__no{font-size:2.2rem;font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--ink)}
body.h4 .h4-chip{
  margin-left:auto;padding:5px 11px;border-radius:999px;
  font-family:var(--f-mono);font-size:.58rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
}
body.h4 .h4-chip[data-s="available"]{background:#E7EFE8;color:#3A5F43}
body.h4 .h4-chip[data-s="booked"]{background:#F8EEDB;color:#8A5C15}
body.h4 .h4-chip[data-s="sold"]{background:#F0EBE4;color:#7A6D60}

body.h4 .h4-panel__dl{margin:16px 0 0;display:grid;border-top:1px solid var(--hair)}
body.h4 .h4-panel__dl>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--hair);
}
body.h4 .h4-panel__dl dt{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
body.h4 .h4-panel__dl dd{margin:0;font-size:.9rem;font-weight:600;color:var(--ink)}

body.h4 .h4-panel__total{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding:13px 15px;border-radius:10px;background:var(--ac-50);
}
body.h4 .h4-panel__total b{font-size:1.4rem;font-weight:700;letter-spacing:-.045em;color:var(--ac-d)}
body.h4 .h4-panel__card.is-gone .h4-btn--wa{background:var(--gone);border-color:var(--gone);pointer-events:none}

/* ==========================================================================
   04 · LAYOUT CARDS
   ========================================================================== */
body.h4 .h4-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
@media (max-width:1180px){body.h4 .h4-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){body.h4 .h4-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){body.h4 .h4-grid{grid-template-columns:1fr}}

body.h4 .h4-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--hair);border-radius:16px;overflow:hidden;
  transition:transform .3s var(--ez),box-shadow .3s var(--ez),border-color .3s var(--ez);
}
body.h4 .h4-card:hover{transform:translateY(-4px);border-color:var(--ac-200);box-shadow:0 22px 46px -28px rgba(36,27,21,.35)}
body.h4 .h4-card__media{position:relative;display:block;margin:8px 8px 0;border-radius:11px;overflow:hidden;aspect-ratio:4/3}
body.h4 .h4-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ez)}
body.h4 .h4-card:hover .h4-card__media img{transform:scale(1.05)}
body.h4 .h4-card__tag{
  position:absolute;left:9px;top:9px;
  padding:5px 10px;border-radius:999px;
  font-family:var(--f-mono);font-size:.56rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ac);color:#fff;
}
body.h4 .h4-card__tag.is-sold{background:rgba(255,255,255,.92);color:var(--muted)}
body.h4 .h4-card__b{display:flex;flex-direction:column;flex:1;padding:15px 16px 16px}
body.h4 .h4-card__place{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-mono);font-size:.57rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}
body.h4 .h4-card__place svg{width:11px;height:11px}
body.h4 .h4-card__b h3{margin-top:7px;font-size:1.02rem;letter-spacing:-.03em;color:var(--ink)}
body.h4 .h4-card__meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
body.h4 .h4-card__meta i{
  font-style:normal;padding:4px 9px;border-radius:999px;background:var(--wash);
  font-size:.68rem;font-weight:500;color:var(--muted);
}
body.h4 .h4-card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:14px;
}
body.h4 .h4-card__foot b{font-size:1.2rem;font-weight:700;letter-spacing:-.04em;color:var(--ink)}
body.h4 .h4-card__foot b small{font-size:.66rem;font-weight:500;color:var(--faint);margin-left:2px}
body.h4 .h4-card__foot b.is-out{font-size:.88rem;color:var(--faint)}
body.h4 .h4-card__foot em{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--wash);transition:background .3s var(--ez);
}
body.h4 .h4-card:hover .h4-card__foot em{background:var(--ac)}
body.h4 .h4-card__foot em svg{width:14px;height:14px;color:var(--ac);transition:color .3s var(--ez)}
body.h4 .h4-card:hover .h4-card__foot em svg{color:#fff}

/* ==========================================================================
   05 · COMPANY
   ========================================================================== */
body.h4 .h4-about{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4vw,72px);align-items:center}
@media (max-width:940px){body.h4 .h4-about{grid-template-columns:1fr;gap:34px}}

body.h4 .h4-about__art{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start}
body.h4 .h4-frame{margin:0;border-radius:16px;overflow:hidden;position:relative}
body.h4 .h4-frame img{width:100%;height:100%;object-fit:cover;display:block}
body.h4 .h4-frame--tall{aspect-ratio:4/5}
body.h4 .h4-frame--wide{aspect-ratio:4/3.4;margin-top:clamp(20px,3vw,48px)}
body.h4 .h4-frame--wide figcaption{
  position:absolute;left:10px;bottom:10px;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.94);
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
body.h4 .h4-frame--wide figcaption svg{width:11px;height:11px;color:var(--ac)}

/* ==========================================================================
   06 · WHAT WE FINISH — sticky title beside a stepped list
   ========================================================================== */
body.h4 .h4-stick{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,4vw,72px);align-items:start}
@media (max-width:940px){body.h4 .h4-stick{grid-template-columns:1fr;gap:28px}}
body.h4 .h4-stick__side{position:sticky;top:calc(var(--nav-h) + 28px)}
@media (max-width:940px){body.h4 .h4-stick__side{position:static}}

body.h4 .h4-stick__list{display:grid;gap:12px}
body.h4 .h4-step2{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:20px;align-items:center;
  background:#fff;border:1px solid var(--hair);border-radius:16px;padding:14px;
  transition:border-color .3s var(--ez),box-shadow .3s var(--ez),transform .3s var(--ez);
}
body.h4 .h4-step2:hover{border-color:var(--ac-200);box-shadow:0 18px 40px -30px rgba(36,27,21,.35);transform:translateX(4px)}
body.h4 .h4-step2__img{display:block;border-radius:11px;overflow:hidden;aspect-ratio:1/1}
body.h4 .h4-step2__img img{width:100%;height:100%;object-fit:cover}
body.h4 .h4-step2__b h3{margin-top:8px;font-size:1.15rem;letter-spacing:-.032em;color:var(--ink)}
body.h4 .h4-step2__b p{margin-top:8px;font-size:.88rem;line-height:1.62;color:var(--muted)}
@media (max-width:560px){
  body.h4 .h4-step2{grid-template-columns:1fr;gap:14px}
  body.h4 .h4-step2__img{aspect-ratio:16/9}
}

/* ==========================================================================
   07 · THE BLUE MODULE
   ========================================================================== */
body.h4 .h4-accent{
  background:var(--ac);border-radius:22px;color:rgba(255,255,255,.82);
  padding:clamp(28px,4vw,56px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,64px);align-items:center;
  box-shadow:0 30px 70px -40px rgba(155,63,30,.55);
}
@media (max-width:940px){body.h4 .h4-accent{grid-template-columns:1fr;gap:30px}}
body.h4 .h4-accent .h4-d2{color:#fff;max-width:18ch}
body.h4 .h4-accent__sub{margin-top:18px;max-width:46ch;font-size:.98rem;line-height:1.68;color:rgba(255,255,255,.8)}
body.h4 .h4-accent__stats{display:grid;gap:1px;background:rgba(255,255,255,.26);border-radius:14px;overflow:hidden}
body.h4 .h4-accent__stats>div{background:var(--ac);padding:16px 20px;display:flex;align-items:baseline;gap:16px}
body.h4 .h4-accent__stats b{font-size:2.1rem;font-weight:700;letter-spacing:-.05em;line-height:1;color:#fff;min-width:2.6ch}
body.h4 .h4-accent__stats small{font-size:.8rem;line-height:1.45;color:rgba(255,255,255,.78)}

/* ==========================================================================
   08 · SERVICES
   ========================================================================== */
/* three columns, so the nine services fill three clean rows. In the hairline
   grid an orphan cell leaves a visible hole, so a last item that would sit
   alone is stretched across the row instead. */
body.h4 .h4-svcs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:18px;overflow:hidden;
}
@media (max-width:1020px){
  body.h4 .h4-svcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.h4 .h4-svc:nth-child(odd):last-child{grid-column:1/-1}
}
@media (max-width:600px){
  body.h4 .h4-svcs{grid-template-columns:1fr}
  body.h4 .h4-svc:nth-child(odd):last-child{grid-column:auto}
}

body.h4 .h4-svc{position:relative;display:block;background:#fff;padding:24px 22px 26px;transition:background .3s var(--ez)}
body.h4 .h4-svc:hover{background:var(--ac-50)}
body.h4 .h4-svc__ico{
  display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  background:var(--ac-50);transition:background .3s var(--ez);
}
body.h4 .h4-svc:hover .h4-svc__ico{background:var(--ac)}
body.h4 .h4-svc__ico svg{width:20px;height:20px;color:var(--ac);transition:color .3s var(--ez)}
body.h4 .h4-svc:hover .h4-svc__ico svg{color:#fff}
body.h4 .h4-svc h3{margin-top:16px;font-size:1rem;letter-spacing:-.03em;color:var(--ink)}
body.h4 .h4-svc p{margin-top:9px;font-size:.85rem;line-height:1.62;color:var(--muted)}

/* ==========================================================================
   09 · PROCESS — one module, five columns
   ========================================================================== */
body.h4 .h4-flow{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--hair);overflow:hidden;
}
@media (max-width:1020px){body.h4 .h4-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){body.h4 .h4-flow{grid-template-columns:1fr}}
body.h4 .h4-flow__s{background:#fff;padding:24px 22px 26px;position:relative}
body.h4 .h4-flow__n{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--ac);color:#fff;font-size:.82rem;font-weight:700;
}
body.h4 .h4-flow__s h3{margin-top:15px;font-size:1.05rem;letter-spacing:-.032em;color:var(--ink)}
body.h4 .h4-flow__s p{margin-top:8px;font-size:.85rem;line-height:1.6;color:var(--muted)}

/* ==========================================================================
   10 · OWNERS
   ========================================================================== */
body.h4 .h4-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
@media (max-width:900px){body.h4 .h4-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){body.h4 .h4-quotes{grid-template-columns:1fr}}
body.h4 .h4-q{
  margin:0;background:#fff;border:1px solid var(--hair);border-radius:16px;padding:22px;
  display:flex;flex-direction:column;
}
body.h4 .h4-q.is-lead{grid-column:span 3;background:var(--ink);border-color:var(--ink)}
@media (max-width:900px){body.h4 .h4-q.is-lead{grid-column:span 2}}
@media (max-width:600px){body.h4 .h4-q.is-lead{grid-column:auto}}
body.h4 .h4-q.is-lead blockquote{color:#fff;font-size:clamp(1.15rem,1.9vw,1.6rem);letter-spacing:-.032em;line-height:1.36;max-width:44ch}
body.h4 .h4-q.is-lead figcaption{border-top-color:rgba(255,255,255,.16)}
body.h4 .h4-q.is-lead figcaption b{color:#fff}
body.h4 .h4-q.is-lead figcaption small{color:rgba(255,255,255,.6)}
body.h4 .h4-q.is-lead .h4-q__av{background:rgba(255,255,255,.14);color:#fff}
body.h4 .h4-q__st{display:flex;gap:3px;color:var(--ac)}
body.h4 .h4-q.is-lead .h4-q__st{color:var(--ac-l)}
body.h4 .h4-q__st svg{width:14px;height:14px}
body.h4 .h4-q blockquote{margin:14px 0 0;font-size:.93rem;line-height:1.68;color:var(--ink-2);flex:1}
body.h4 .h4-q figcaption{display:flex;align-items:center;gap:11px;margin-top:20px;padding-top:16px;border-top:1px solid var(--hair-2)}
body.h4 .h4-q__av{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none;
  background:var(--ac-50);color:var(--ac);font-size:.9rem;font-weight:700;
}
body.h4 .h4-q figcaption b{display:block;font-size:.86rem;color:var(--ink)}
body.h4 .h4-q figcaption small{display:block;font-size:.73rem;color:var(--faint)}

/* ==========================================================================
   11 · FAQ + ENQUIRY in one row
   ========================================================================== */
body.h4 .h4-duo{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(14px,1.6vw,20px);align-items:start}
@media (max-width:1000px){body.h4 .h4-duo{grid-template-columns:1fr}}

body.h4 .h4-faqmod{padding:8px clamp(18px,2vw,28px) 4px}
body.h4 .h4-faqmod .faq{border-top:0}
body.h4 .h4-faqmod .faq__i:last-child{border-bottom:0}

body.h4 .h4-form{padding:clamp(20px,2.4vw,30px)}
body.h4 .h4-form h3{font-size:1.3rem;letter-spacing:-.035em;color:var(--ink)}
body.h4 .h4-form__g{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
@media (max-width:520px){body.h4 .h4-form__g{grid-template-columns:1fr}}
body.h4 .h4-f{display:grid;gap:6px}
body.h4 .h4-f--w{grid-column:1/-1}
body.h4 .h4-f>span{font-size:.76rem;font-weight:600;color:var(--muted)}
body.h4 .h4-f>span i{font-style:normal;font-weight:500;color:var(--faint)}
body.h4 .h4-f input,body.h4 .h4-f select,body.h4 .h4-f textarea{
  width:100%;padding:11px 13px;border-radius:9px;
  border:1px solid var(--hair);background:var(--wash);
  color:var(--ink);font-family:inherit;font-size:.92rem;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
body.h4 .h4-f textarea{resize:vertical;min-height:84px}
body.h4 .h4-f input::placeholder,body.h4 .h4-f textarea::placeholder{color:var(--faint)}
body.h4 .h4-f input:focus,body.h4 .h4-f select:focus,body.h4 .h4-f textarea:focus{
  outline:0;border-color:var(--ac);background:#fff;box-shadow:0 0 0 3px var(--ac-50);
}
body.h4 .h4-form .form__msg{margin:14px 0 0}

body.h4 .h4-crows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin-top:clamp(14px,1.6vw,20px)}
@media (max-width:820px){body.h4 .h4-crows{grid-template-columns:1fr}}
body.h4 .h4-crow{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-radius:14px;background:var(--wash);border:1px solid transparent;
  transition:background .25s var(--ez),border-color .25s var(--ez);
}
body.h4 .h4-crow:hover{background:#fff;border-color:var(--ac-200)}
body.h4 .h4-crow>svg:first-child{width:20px;height:20px;color:var(--ac);flex:none}
body.h4 .h4-crow>svg:last-child{width:16px;height:16px;color:var(--faint);margin-left:auto;flex:none}
body.h4 .h4-crow span{display:grid;gap:2px;min-width:0}
body.h4 .h4-crow small{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
body.h4 .h4-crow b{font-size:.92rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis}

/* ---------------- reveal + reduced motion ---------------- */
body.h4 [data-rise]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ez),transform .6s var(--ez)}
body.h4 [data-rise].is-in,html:not(.js-h4) body.h4 [data-rise]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  body.h4 .h4-shot{transition:none}
  body.h4 .h4-pill i{animation:none}
  body.h4 [data-rise]{opacity:1;transform:none}
}