@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Manrope:wght@300;400;500;600&display=swap');

:root {
  --black: #090909;
  --near-black: #101010;
  --paper: #eeeae2;
  --muted: #aaa69f;
  --line: rgba(238, 234, 226, .18);
  --page-pad: clamp(22px, 4vw, 72px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: "Inter", Arial, sans-serif;
  font-weight: 300;
}
a { color: inherit; text-decoration: none; }
.site-header {
  position: fixed;
  z-index: 20;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  padding: 24px var(--page-pad);
  mix-blend-mode: difference;
  color: white;
}
.brand {
  width: min-content;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  line-height: .9;
  letter-spacing: .15em;
  font-weight: 600;
}
.brand span { display: block; }
.menu-toggle {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11px;
  letter-spacing: .16em;
  cursor: pointer;
}
.site-nav {
  position: absolute;
  right: var(--page-pad);
  top: 58px;
  display: none;
  min-width: 190px;
  padding: 18px 0;
  border-top: 1px solid currentColor;
  font-size: 14px;
}
.site-nav.open { display: grid; gap: 12px; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #050505;
}
.hero-image {
  position: absolute;
  inset: 0;
  background-image: url("../images/previews/private-residence-south-lebanon.webp");
  background-size: cover;
  background-position: center;
  transform: scale(1.035);
  animation: reveal 1.6s cubic-bezier(.2,.75,.2,1) forwards;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.20) 42%, rgba(0,0,0,.03) 68%),
    linear-gradient(0deg, rgba(0,0,0,.56) 0%, transparent 40%);
}
.hero-copy {
  position: absolute;
  z-index: 2;
  left: var(--page-pad);
  bottom: clamp(150px, 19vh, 210px);
}
.eyebrow {
  margin: 0 0 22px;
  text-transform: uppercase;
  font-size: clamp(10px, .75vw, 13px);
  letter-spacing: .18em;
}
h1 {
  margin: 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(76px, 14.5vw, 260px);
  font-weight: 300;
  line-height: .69;
  letter-spacing: -.075em;
  text-transform: uppercase;
}
h1 span { display: block; }
.hero-meta {
  position: absolute;
  z-index: 2;
  left: var(--page-pad);
  right: var(--page-pad);
  bottom: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 28px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.55);
  font-size: 12px;
}
.hero-meta > div { display: grid; gap: 5px; }
.meta-label {
  color: rgba(255,255,255,.62);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .15em;
}
.explore {
  align-self: end;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .15em;
}

.statement, .practice, .knowledge, .about {
  padding: clamp(100px, 14vw, 220px) var(--page-pad);
  border-top: 1px solid var(--line);
}
.section-index {
  margin: 0 0 clamp(55px, 8vw, 120px);
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .16em;
}
.statement-text {
  width: min(1180px, 100%);
  margin: 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(38px, 6.6vw, 112px);
  line-height: .98;
  letter-spacing: -.055em;
}

.project-feature {
  display: grid;
  grid-template-columns: .5fr 2fr 1fr;
  gap: 30px;
  padding: 40px var(--page-pad) 100px;
  border-top: 1px solid var(--line);
}
.project-number, .project-title > p, .project-note {
  color: var(--muted);
  font-size: 11px;
}
.project-title h2 {
  margin: 8px 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(42px, 6vw, 92px);
  line-height: .95;
  font-weight: 300;
  letter-spacing: -.055em;
}
.project-location { margin: 0; }
.project-note { max-width: 320px; line-height: 1.7; }

.practice-list { display: grid; }
.practice-list a {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: baseline;
  padding: 20px 0 24px;
  border-top: 1px solid var(--line);
  transition: padding-left .25s ease, opacity .25s ease;
}
.practice-list a:last-child { border-bottom: 1px solid var(--line); }
.practice-list a:hover { padding-left: 18px; }
.practice-list span {
  color: var(--muted);
  font-size: 10px;
}
.practice-list strong {
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(34px, 5.5vw, 88px);
  font-weight: 300;
  letter-spacing: -.05em;
}

.knowledge, .about {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 30px;
}
.knowledge .section-index, .about .section-index { margin: 0; }
.knowledge > div, .about-copy { max-width: 980px; }
.knowledge-kicker {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .14em;
}
.knowledge h2, .about h2 {
  margin: 20px 0 30px;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(48px, 7vw, 116px);
  line-height: .92;
  font-weight: 300;
  letter-spacing: -.06em;
}
.knowledge > div > p:last-child, .about-copy > p {
  max-width: 650px;
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 23px);
  line-height: 1.6;
}
.about-copy a {
  display: inline-block;
  margin-top: 35px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--paper);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 28px var(--page-pad);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
footer p:last-child { text-align: right; }

@keyframes reveal {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1.035); }
}

@media (max-width: 760px) {
  .hero-copy { bottom: 180px; }
  h1 { font-size: clamp(64px, 22vw, 130px); line-height: .76; }
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .hero-meta .explore { display: none; }
  .project-feature { grid-template-columns: 1fr; }
  .knowledge, .about { grid-template-columns: 1fr; }
  .knowledge .section-index, .about .section-index { margin-bottom: 55px; }
  footer { grid-template-columns: 1fr; gap: 8px; }
  footer p { margin: 0; }
  footer p:last-child { text-align: left; }
}


/* v0.2 — HM identity */
.brand {
  position: relative;
  display: block;
  width: 54px;
  height: 54px;
}
.brand-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .28s ease, transform .28s ease;
}
.brand-logo-accent { opacity: 0; }
.brand:hover .brand-logo-default { opacity: 0; transform: scale(.96); }
.brand:hover .brand-logo-accent { opacity: 1; transform: scale(1.02); }

/* v0.2 — 3D practice menu */
.practice-3d {
  min-height: 110vh;
  padding-top: clamp(110px, 13vw, 210px);
  overflow: hidden;
}
.practice-heading {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 30px;
  margin-bottom: clamp(70px, 10vw, 140px);
}
.practice-heading .section-index { margin: 0; }
.practice-heading > div { max-width: 1100px; }
.practice-kicker {
  margin: 0 0 18px;
  color: #e8752f;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .18em;
}
.practice-heading h2 {
  margin: 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(58px, 8.5vw, 138px);
  line-height: .87;
  font-weight: 300;
  letter-spacing: -.065em;
}
.practice-intro {
  max-width: 570px;
  margin-top: 30px;
  color: var(--muted);
  line-height: 1.65;
  font-size: clamp(14px, 1.2vw, 18px);
}

.cube-stage {
  position: relative;
  height: clamp(560px, 74vw, 860px);
  display: grid;
  place-items: center;
  perspective: 1500px;
  perspective-origin: 50% 45%;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.cube-stage:active { cursor: grabbing; }

.cube-orbit {
  width: min(46vw, 520px);
  height: min(46vw, 520px);
  min-width: 280px;
  min-height: 280px;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}
.cube {
  --cube-size: min(34vw, 390px);
  width: var(--cube-size);
  height: var(--cube-size);
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(28deg);
  will-change: transform;
}

.cube-face {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  padding: clamp(18px, 2.1vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(238,234,226,.35);
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
    rgba(13,13,13,.92);
  color: var(--paper);
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: inset 0 0 70px rgba(255,255,255,.018);
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.cube-face::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: #e8752f;
  transition: height .28s ease;
}
.cube-face:hover {
  border-color: rgba(238,234,226,.72);
  background:
    linear-gradient(145deg, rgba(232,117,47,.08), rgba(255,255,255,.01)),
    rgba(13,13,13,.96);
}
.cube-face:hover::before { height: 100%; }

.cube-face strong {
  position: relative;
  z-index: 1;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: .92;
  font-weight: 300;
  letter-spacing: -.045em;
}
.face-index, .face-enter {
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--muted);
}
.face-enter { align-self: flex-end; color: var(--paper); }

.face-front  { transform: rotateY(0deg) translateZ(calc(var(--cube-size) / 2)); }
.face-back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.face-right  { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.face-left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.face-top    { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

.cube-caption {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .19em;
  font-size: 10px;
}
.cube-caption::before {
  content: "ACTIVE FACE  /  ";
  color: #e8752f;
}

.discipline-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.discipline-preview article {
  min-height: 220px;
  padding: 28px var(--page-pad);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 120px;
}
.discipline-preview article:nth-child(3n) { border-right: 0; }
.discipline-preview span {
  color: #e8752f;
  font-size: 10px;
  letter-spacing: .15em;
}
.discipline-preview h3 {
  margin: 85px 0 0;
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 48px);
  letter-spacing: -.045em;
}

@media (max-width: 760px) {
  .brand { width: 44px; height: 44px; }
  .practice-heading { grid-template-columns: 1fr; }
  .practice-heading .section-index { margin-bottom: 45px; }
  .cube-stage { height: 560px; }
  .cube-orbit { width: 300px; height: 300px; }
  .cube { --cube-size: 240px; }
  .discipline-preview { grid-template-columns: 1fr; }
  .discipline-preview article,
  .discipline-preview article:nth-child(3n) { border-right: 0; }
}


/* v0.3 — falling orange triangle logo interaction */
.brand-animated {
  width: 58px;
  height: 58px;
  overflow: visible;
}
.hm-logo {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hm-static,
.hm-top-white {
  fill: #fff;
}
.hm-top-orange {
  fill: #f7941d;
  opacity: 0;
  transform: translateY(-105px);
  transform-box: fill-box;
  transform-origin: center;
}

/* The white top face clears first. */
.hm-top-white {
  transition:
    opacity .20s ease,
    transform .28s cubic-bezier(.4,0,.2,1);
  transform-box: fill-box;
  transform-origin: center;
}

/* The orange face drops from above into the exact same position. */
.hm-top-orange {
  transition:
    opacity .12s ease .10s,
    transform .72s cubic-bezier(.18,.82,.24,1) .06s;
}

.brand-animated:hover .hm-top-white,
.brand-animated:focus-visible .hm-top-white {
  opacity: 0;
  transform: translateY(12px);
}

.brand-animated:hover .hm-top-orange,
.brand-animated:focus-visible .hm-top-orange {
  opacity: 1;
  transform: translateY(0);
}

/* Reset feels fast but still elegant when the pointer leaves. */
.brand-animated:not(:hover):not(:focus-visible) .hm-top-orange {
  transition:
    opacity .16s ease,
    transform .38s cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  .hm-top-white,
  .hm-top-orange {
    transition: none !important;
  }
  .brand-animated:hover .hm-top-white,
  .brand-animated:focus-visible .hm-top-white {
    opacity: 0;
    transform: none;
  }
  .brand-animated:hover .hm-top-orange,
  .brand-animated:focus-visible .hm-top-orange {
    opacity: 1;
    transform: none;
  }
}


/* v0.4 — final header scale + exact brand orange */
.site-header {
  padding-top: 28px;
}

.brand-animated {
  width: 82px;
  height: 82px;
}

.menu-toggle {
  font-size: 14px;
  letter-spacing: .18em;
  font-weight: 500;
}

/* Exact orange taken from the supplied HM SVG */
.hm-top-orange {
  fill: #f7941d !important;
}

/* Slightly more graceful drop */
.hm-top-orange {
  transform: translateY(-125px);
  transition:
    opacity .12s ease .08s,
    transform .82s cubic-bezier(.16,.84,.22,1) .04s;
}

.brand-animated:hover .hm-top-orange,
.brand-animated:focus-visible .hm-top-orange {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .brand-animated {
    width: 62px;
    height: 62px;
  }

  .menu-toggle {
    font-size: 12px;
  }
}

/* v0.5 — header adjustment */
.brand-animated {
  width: 94px;
  height: 94px;
}
.menu-toggle {
  color: #000 !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .18em;
}
@media (max-width: 760px) {
  .brand-animated {
    width: 70px;
    height: 70px;
  }
  .menu-toggle {
    font-size: 13px;
  }
}

/* v0.6 — fix invisible menu and make 3D cube rendering robust */

/* The previous parent blend mode made black MENU blend into the image.
   Keep the header in normal compositing so black stays truly black. */
.site-header {
  mix-blend-mode: normal !important;
}

.menu-toggle {
  color: #000 !important;
  opacity: 1 !important;
  text-shadow: 0 0 14px rgba(255,255,255,.28);
}

/* Keep the logo clearly white while MENU remains black. */
.hm-static,
.hm-top-white {
  fill: #fff !important;
}

/* More browser-safe cube dimensions.
   Avoid nested min()/calc() combinations for translateZ. */
.cube-orbit {
  width: 520px !important;
  height: 520px !important;
  max-width: 90vw;
  max-height: 90vw;
}

.cube {
  --cube-size: 380px !important;
  --cube-half: 190px;
  width: var(--cube-size) !important;
  height: var(--cube-size) !important;
  display: block !important;
  opacity: 1 !important;
}

.cube-face {
  width: var(--cube-size) !important;
  height: var(--cube-size) !important;
  display: flex !important;
  opacity: 1 !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    rgba(13,13,13,.97) !important;
  border: 1px solid rgba(238,234,226,.52) !important;
}

.face-front  { transform: rotateY(0deg) translateZ(var(--cube-half)) !important; }
.face-back   { transform: rotateY(180deg) translateZ(var(--cube-half)) !important; }
.face-right  { transform: rotateY(90deg) translateZ(var(--cube-half)) !important; }
.face-left   { transform: rotateY(-90deg) translateZ(var(--cube-half)) !important; }
.face-top    { transform: rotateX(90deg) translateZ(var(--cube-half)) !important; }
.face-bottom { transform: rotateX(-90deg) translateZ(var(--cube-half)) !important; }

/* Give the object a little more visual separation from the black field. */
.cube-stage::before {
  content: "";
  position: absolute;
  width: 470px;
  height: 470px;
  max-width: 86vw;
  max-height: 86vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.055), rgba(255,255,255,0) 68%);
  pointer-events: none;
}

@media (max-width: 760px) {
  .cube-orbit {
    width: 310px !important;
    height: 310px !important;
  }

  .cube {
    --cube-size: 240px !important;
    --cube-half: 120px;
  }

  .cube-stage::before {
    width: 290px;
    height: 290px;
  }
}

/* v0.7 — make the entire opened menu black */
.site-nav,
.site-nav a {
  color: #000 !important;
}

.site-nav {
  border-top-color: #000 !important;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: #000 !important;
  opacity: .65;
}


/* v0.8 — script signature */
.hero-signature {
  display: block;
  width: clamp(220px, 28vw, 520px);
  max-width: 70vw;
  margin-top: clamp(12px, 1.8vw, 28px);
  opacity: .94;
  transform: rotate(-3deg);
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.16));
}

/* v0.8 — real Three.js cube */
.three-stage {
  position: relative;
  height: clamp(560px, 70vw, 860px);
  min-height: 560px;
  overflow: hidden;
  cursor: grab;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.055), rgba(255,255,255,0) 42%),
    #090909;
}
.three-stage:active { cursor: grabbing; }

#practice3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.three-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.three-help {
  position: absolute;
  right: 22px;
  bottom: 22px;
  margin: 0;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .15em;
}

.three-fallback {
  position: absolute;
  inset: auto 20px 20px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .hero-signature {
    width: min(62vw, 320px);
  }
  .three-stage {
    height: 580px;
    min-height: 580px;
  }
  .three-help {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    white-space: nowrap;
  }
}


/* v1.1 — one horizontal transparent blur strip only */
.site-header {
  position: fixed;
  isolation: isolate;
}

/* A single glass strip from left to right,
   only as tall as the logo/menu header area. */
.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: 118px;
  background: rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px) saturate(110%);
  -webkit-backdrop-filter: blur(16px) saturate(110%);
}

/* Keep the existing logo and menu sizes/placement unchanged. */
.brand-animated {
  width: 94px;
  height: 94px;
}

.menu-toggle {
  color: #000 !important;
  font-size: 16px;
  font-weight: 600;
}

/* Keep the original compact menu behavior. */
.site-nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Opened menu remains black as previously agreed. */
.site-nav,
.site-nav a {
  color: #000 !important;
}

.site-nav {
  border-top-color: #000 !important;
}

@media (max-width: 760px) {
  .site-header::before {
    height: 92px;
  }

  .brand-animated {
    width: 70px;
    height: 70px;
  }

  .menu-toggle {
    font-size: 13px;
  }
}


/* v1.2 — fixed horizontal navigation */
.site-header {
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
}

/* No dropdown button anymore */
.menu-toggle {
  display: none !important;
}

.site-nav {
  position: static !important;
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(26px, 3.2vw, 56px) !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding: 7px 0 9px;
  color: #000 !important;
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px !important;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  opacity: 1 !important;
}

/* Animated orange line */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #f7941d;
  transform: translateX(-50%);
  transition: width .28s cubic-bezier(.2,.8,.2,1);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  width: 100%;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: #000 !important;
  opacity: 1 !important;
}

/* Remove any old generated dropdown heading */
.site-nav::before {
  display: none !important;
  content: none !important;
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: auto 1fr !important;
    gap: 14px;
  }

  .site-nav {
    gap: 14px !important;
    overflow-x: auto;
    justify-content: flex-end;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav a {
    flex: 0 0 auto;
    font-size: 10px !important;
    letter-spacing: .06em !important;
  }
}


/* v1.3 — reveal more of the upper architecture in the hero */
.hero-image {
  background-position: center 24% !important;
}

/* Keep the architecture visible beneath the transparent header strip */
.hero {
  padding-top: 0;
}

@media (max-width: 760px) {
  .hero-image {
    background-position: center 20% !important;
  }
}


/* v1.4 — Hero image physically starts below the fixed header.
   This reveals the villa roof/chimney instead of merely changing the crop. */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-image {
  position: absolute !important;
  top: var(--header-h, 106px) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: auto !important;
  background-position: center top !important;
  background-size: cover !important;
}

@media (max-width: 760px) {
  .hero-image {
    top: var(--header-h-mobile, 88px) !important;
    background-position: center top !important;
  }
}


/* v1.5 — remove the black band above the lowered hero image.
   The hero gets a soft sky-toned backing so the header area blends naturally
   while the villa remains physically pushed down. */
.hero {
  background:
    linear-gradient(
      180deg,
      #a9bfd0 0%,
      #b7c9d7 52%,
      #c6d4dd 100%
    ) !important;
}

.site-header::before {
  background: rgba(255,255,255,.12) !important;
  border-bottom-color: rgba(255,255,255,.20) !important;
  backdrop-filter: blur(14px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(110%) !important;
}

/* v1.6 — construction-to-finished mosaic reveal */
.hero { --mosaic-cols: 20; --mosaic-rows: 11; }

.hero-image {
  background-image: url("../images/previews/private-residence-south-lebanon-construction.webp") !important;
  background-position: center top !important;
  background-size: cover !important;
}

.mosaic-reveal {
  position: absolute;
  top: var(--header-h, 106px);
  right: 0; bottom: 0; left: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--mosaic-cols), 1fr);
  grid-template-rows: repeat(var(--mosaic-rows), 1fr);
  pointer-events: none;
  overflow: hidden;
}

.mosaic-tile {
  opacity: 0;
  background-image: url("../images/previews/private-residence-south-lebanon.webp");
  background-repeat: no-repeat;
  transform: scale(.96);
  transition: opacity 380ms ease, transform 480ms ease;
  will-change: opacity, transform;
}
.mosaic-tile.is-revealed { opacity: 1; transform: scale(1.01); }

@media (max-width: 760px) {
  .hero { --mosaic-cols: 10; --mosaic-rows: 16; }
  .mosaic-reveal { top: var(--header-h-mobile, 88px); }
}


/* v1.7 — keep the fixed navigation visible over every section */
.site-nav a {
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.28);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: #fff !important;
  opacity: 1 !important;
}

.site-nav a::after {
  background: #f7941d !important;
}

/* A slightly darker glass strip works over both bright hero imagery
   and the black editorial sections. */
.site-header::before {
  background: rgba(18,18,18,.28) !important;
  border-bottom-color: rgba(255,255,255,.16) !important;
  backdrop-filter: blur(16px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(110%) !important;
}


/* v1.8 — About editorial redesign + reusable Education gallery */

/* Education gallery */
.education-gallery {
  padding: clamp(100px, 12vw, 190px) var(--page-pad);
  border-top: 1px solid var(--line);
}
.education-intro {
  display: grid;
  grid-template-columns: .55fr 1.8fr;
  gap: clamp(35px, 7vw, 110px);
  margin-bottom: clamp(55px, 8vw, 110px);
}
.education-intro .section-index { margin: 0; }
.education-kicker,
.about-kicker {
  margin: 0 0 18px;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .15em;
}
.education-intro h2,
.about-expanded h2 {
  margin: 0 0 22px;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(44px, 6.1vw, 96px);
  line-height: .93;
  letter-spacing: -.055em;
  font-weight: 300;
}
.education-intro > div > p:last-child {
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.65;
}

.edu-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 16vw, 250px);
  gap: clamp(18px, 3vw, 40px);
  height: min(76vh, 820px);
  min-height: 560px;
}
.edu-main-card {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border: 1px solid var(--line);
  background: #050505;
  overflow: hidden;
}
.edu-main-open {
  position: relative;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
}
.edu-main-open img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #050505;
  transition: opacity .26s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.edu-main-open.is-changing img {
  opacity: .25;
  transform: scale(.985);
}
.edu-main-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .14em;
}
.edu-main-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.edu-main-actions button,
.edu-main-actions a {
  border: 0;
  background: transparent;
  color: var(--paper);
  font: inherit;
  text-transform: uppercase;
  letter-spacing: inherit;
  padding: 8px 9px;
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.edu-main-actions button:hover,
.edu-main-actions a:hover {
  color: #f7941d;
  transform: translateY(-1px);
}

.edu-filmstrip-wrap {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}
.edu-drag-label {
  margin: 0;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .15em;
}
.edu-filmstrip {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 10px;
  padding-right: 5px;
  scrollbar-width: thin;
  cursor: grab;
  user-select: none;
}
.edu-filmstrip.is-dragging { cursor: grabbing; }
.edu-thumb {
  position: relative;
  min-height: 112px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid transparent;
  background: #111;
  overflow: hidden;
  cursor: pointer;
  opacity: .58;
  transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
}
.edu-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.edu-thumb:hover {
  opacity: .9;
  transform: translateX(-4px);
}
.edu-thumb.is-active {
  opacity: 1;
  border-color: #f7941d;
}
.edu-thumb.is-active::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #f7941d;
}

/* Full-screen gallery */
.edu-lightbox {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  grid-template-columns: 72px minmax(0,1fr) 72px;
  align-items: center;
  background: rgba(4,4,4,.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.edu-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.edu-lightbox figure {
  margin: 0;
  height: min(88vh, 1000px);
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
}
.edu-lightbox figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.edu-lightbox figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0 0;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .14em;
}
.edu-lightbox figcaption a { color: var(--paper); }
.edu-lightbox figcaption a:hover { color: #f7941d; }
.edu-lightbox-close,
.edu-lightbox-nav {
  border: 0;
  background: transparent;
  color: var(--paper);
  font-weight: 300;
  cursor: pointer;
}
.edu-lightbox-close {
  position: absolute;
  top: 25px;
  right: 32px;
  font-size: 34px;
}
.edu-lightbox-nav {
  height: 100%;
  font-size: 28px;
  transition: color .2s ease;
}
.edu-lightbox-nav:hover,
.edu-lightbox-close:hover { color: #f7941d; }

/* About */
.about-expanded {
  position: relative;
  overflow: hidden;
}
.about-expanded > .section-index {
  margin-bottom: clamp(55px, 8vw, 100px);
}
.about-editorial {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.5fr);
  gap: clamp(45px, 8vw, 130px);
  align-items: start;
}
.about-portrait-card {
  position: sticky;
  top: 130px;
}
.about-portrait {
  width: 100%;
  aspect-ratio: .83;
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.02);
}
.about-portrait-index {
  display: block;
  padding-top: 12px;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .14em;
}
.about-content {
  min-width: 0;
}
.about-signature {
  width: min(620px, 88%);
  height: auto;
  display: block;
  margin: 5px 0 clamp(35px, 5vw, 65px);
}
.about-biography {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 clamp(30px, 5vw, 80px);
  max-width: 1100px;
}
.about-biography p {
  margin: 0 0 28px;
  color: #c6c1b9;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.78;
}
.about-biography p:first-child {
  color: var(--paper);
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.55;
}

/* Social links */
.social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.about-content > .social-row {
  margin-top: clamp(35px, 5vw, 65px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.social-row a {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  position: relative;
  color: #fff;
  border: 1px solid rgba(255,255,255,.11);
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.social-row a::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 5px;
  height: 1px;
  background: #f7941d;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}
.social-row a:hover {
  color: #f7941d;
  border-color: rgba(247,148,29,.35);
  transform: translateY(-3px);
}
.social-row a:hover::after { transform: scaleX(1); }
.ig-mark {
  width: 15px; height: 15px;
  border: 1.6px solid currentColor;
  border-radius: 4px;
  position: relative;
}
.ig-mark::before {
  content:"";
  position:absolute;
  width: 5px; height: 5px;
  border:1.4px solid currentColor;
  border-radius:50%;
  left:3.5px; top:3.5px;
}
.ig-mark::after {
  content:"";
  position:absolute;
  width:2px; height:2px;
  border-radius:50%;
  background:currentColor;
  right:2px; top:2px;
}
.yt-mark {
  width: 20px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 1.4px solid currentColor;
  border-radius: 4px;
  font-size: 8px;
  padding-left: 1px;
}
.mail-mark { font-size: 15px; }
.wa-mark {
  width: 18px; height: 18px;
  border: 1.4px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
}

.footer-social {
  margin-left: auto;
}
footer .footer-social a {
  width: 28px;
  height: 28px;
  border: 0;
  font-size: 12px;
}

/* Mobile */
@media (max-width: 900px) {
  .education-intro,
  .about-editorial {
    grid-template-columns: 1fr;
  }
  .edu-gallery {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .edu-main-card {
    height: min(66vh, 650px);
    min-height: 430px;
  }
  .edu-filmstrip-wrap {
    grid-template-rows: auto auto;
  }
  .edu-filmstrip {
    grid-auto-flow: column;
    grid-auto-columns: minmax(130px, 30vw);
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 8px;
  }
  .edu-thumb {
    min-height: 100px;
  }
  .about-portrait-card {
    position: relative;
    top: auto;
    width: min(520px, 100%);
  }
  .about-biography {
    grid-template-columns: 1fr;
  }
  .edu-lightbox {
    grid-template-columns: 48px minmax(0,1fr) 48px;
  }
}
@media (max-width: 600px) {
  .edu-main-card {
    height: 62vh;
    min-height: 380px;
  }
  .edu-main-meta {
    align-items: flex-start;
    flex-direction: column;
  }
  .edu-lightbox {
    grid-template-columns: 36px minmax(0,1fr) 36px;
  }
  .edu-lightbox-close { right: 18px; top: 16px; }
  .about-signature { width: 100%; }
}


/* v1.9 — Education gallery refinement:
   filmstrip moved to the left and thumbnail hover effects removed */
.edu-gallery {
  grid-template-columns: clamp(150px, 16vw, 250px) minmax(0, 1fr) !important;
}

.edu-filmstrip-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.edu-main-card {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.edu-thumb,
.edu-thumb:hover,
.edu-thumb.is-active {
  transform: none !important;
}

.edu-thumb:hover {
  opacity: .78 !important;
}

.edu-thumb.is-active {
  opacity: 1 !important;
  border-color: rgba(255,255,255,.28) !important;
}

.edu-thumb.is-active::after {
  display: none !important;
}

/* remove visual motion from the thumbnail rail */
.edu-thumb {
  transition: opacity .18s ease, border-color .18s ease !important;
}

@media (max-width: 900px) {
  .edu-gallery {
    grid-template-columns: 1fr !important;
  }

  .edu-filmstrip-wrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .edu-main-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
}

/* v1.10 — clearer selected thumbnail state */
.edu-thumb {
  touch-action: pan-y;
}
.edu-thumb.is-active {
  outline: 1px solid rgba(247,148,29,.78);
  outline-offset: -1px;
}
@media (max-width: 900px) {
  .edu-thumb { touch-action: pan-x; }
}


/* v1.11 — Through the Years + fixed slightly zoomed-out 3D cube */

/* The 3D cube now uses a slightly more distant fixed camera position.
   No zoom control is necessary; the whole object stays comfortably visible. */
.three-stage {
  overflow: hidden;
}

/* Through the Years */
.through-years {
  grid-column: 1 / -1;
  margin-top: clamp(70px, 10vw, 150px);
  padding-top: clamp(45px, 6vw, 85px);
  border-top: 1px solid var(--line);
}

.through-years-heading {
  display: grid;
  grid-template-columns: .55fr 1.25fr .9fr;
  gap: clamp(22px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(35px, 5vw, 70px);
}

.through-years-heading .about-kicker {
  margin: 0;
}

.through-years-heading h3 {
  margin: 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(42px, 5.4vw, 82px);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 300;
}

.through-years-heading > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 320px;
}

.years-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(210px, 24vw, 365px);
  gap: clamp(10px, 1.2vw, 18px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 16px;
  scrollbar-width: thin;
}

.year-card {
  margin: 0;
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.08);
  background: #080808;
}

.year-card img {
  width: 100%;
  height: clamp(330px, 46vw, 610px);
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(.88) contrast(1.03);
  transition: filter .25s ease;
}

.year-card-tall img {
  object-position: center top;
}

.year-card-dark img {
  object-fit: contain;
  background: #050505;
}

.year-card:hover img {
  filter: saturate(1) contrast(1.02);
}

.year-card figcaption {
  padding: 11px 12px 13px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .13em;
}

@media (max-width: 900px) {
  .through-years-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .years-strip {
    grid-auto-columns: minmax(220px, 72vw);
  }

  .year-card img {
    height: min(66vh, 560px);
  }
}


/* =========================================================
   v1.12 — HERO IDENTITY / MOSAIC FOCUS / GALLERY CALM MODE
   ========================================================= */

/* HERO: keep architecture dominant, identity compact and readable */
.hero-copy {
  position: absolute !important;
  left: var(--page-pad) !important;
  top: clamp(132px, 16vh, 190px) !important;
  bottom: auto !important;
  z-index: 6 !important;
  width: min(46vw, 650px) !important;
  display: grid !important;
  grid-template-columns: clamp(120px, 14vw, 190px) minmax(0, 1fr) !important;
  grid-template-areas:
    "portrait eyebrow"
    "portrait title";
  column-gap: clamp(18px, 2vw, 32px);
  align-items: end;
}

.hero-portrait-card {
  grid-area: portrait;
  align-self: start;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 5px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow:
    0 18px 45px rgba(0,0,0,.42),
    0 4px 14px rgba(0,0,0,.28);
  overflow: hidden;
}

.hero-portrait-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 34%;
}

.hero-copy .eyebrow {
  grid-area: eyebrow;
  align-self: end;
  margin: 0 0 12px !important;
  color: rgba(255,255,255,.92) !important;
  font-size: clamp(8px, .72vw, 11px) !important;
  line-height: 1.35;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.hero-copy h1 {
  grid-area: title;
  margin: 0 !important;
  font-size: clamp(40px, 4.15vw, 72px) !important;
  line-height: .84 !important;
  letter-spacing: -.065em !important;
  text-shadow:
    0 4px 18px rgba(0,0,0,.62),
    0 1px 2px rgba(0,0,0,.6);
}

.hero-copy h1 span {
  display: block;
}

/* Mosaic remains the signature interaction, but it visually retreats
   from the portrait/name area. Both construction and rendered layers
   fade softly toward the left identity block. */
.hero-image {
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,.22) 0%,
    rgba(0,0,0,.46) 20%,
    rgba(0,0,0,.80) 39%,
    #000 55%,
    #000 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,.22) 0%,
    rgba(0,0,0,.46) 20%,
    rgba(0,0,0,.80) 39%,
    #000 55%,
    #000 100%
  ) !important;
}

.mosaic-reveal {
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.10) 16%,
    rgba(0,0,0,.42) 32%,
    rgba(0,0,0,.88) 49%,
    #000 62%,
    #000 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.10) 16%,
    rgba(0,0,0,.42) 32%,
    rgba(0,0,0,.88) 49%,
    #000 62%,
    #000 100%
  ) !important;
}

/* A subtle left-side veil improves readability without killing the image. */
.hero::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0 auto 0 0;
  width: min(52vw, 760px);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(5,5,5,.58) 0%,
    rgba(5,5,5,.36) 34%,
    rgba(5,5,5,.12) 68%,
    rgba(5,5,5,0) 100%
  );
}

/* Keep hero text/portrait above overlay */
.hero-copy,
.hero-meta {
  z-index: 7 !important;
}

/* EDUCATION GALLERY: calm filmstrip, left side, click = instant focus */
.edu-gallery {
  grid-template-columns: clamp(150px, 16vw, 250px) minmax(0, 1fr) !important;
}
.edu-filmstrip-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.edu-main-card {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.edu-thumb,
.edu-thumb:hover,
.edu-thumb:focus,
.edu-thumb.is-active {
  transform: none !important;
  transition: none !important;
}

.edu-thumb {
  opacity: .70 !important;
  border-color: transparent !important;
}

.edu-thumb:hover {
  opacity: .84 !important;
}

.edu-thumb.is-active {
  opacity: 1 !important;
  border-color: rgba(247,148,29,.70) !important;
  outline: 1px solid rgba(247,148,29,.70) !important;
  outline-offset: -1px;
}

.edu-thumb.is-active::after {
  display: none !important;
}

/* Main stage also changes without the old fade/scale transition. */
.edu-main-open,
.edu-main-open img,
.edu-main-open.is-changing img {
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* ABOUT: use dramatic monochrome portrait internally */
.about-portrait {
  filter: grayscale(1) contrast(1.08) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.about-stencil-portrait {
  display: none; /* asset kept for future editorial use */
}

/* 3D cube: fixed, slightly farther away */
.three-stage {
  overscroll-behavior: contain;
}

/* Responsive hero */
@media (max-width: 900px) {
  .hero-copy {
    top: 118px !important;
    width: min(82vw, 620px) !important;
    grid-template-columns: clamp(98px, 23vw, 145px) minmax(0, 1fr) !important;
  }

  .hero-copy h1 {
    font-size: clamp(34px, 8.3vw, 58px) !important;
  }

  .hero-image {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.30), rgba(0,0,0,.78) 48%, #000 72%) !important;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.30), rgba(0,0,0,.78) 48%, #000 72%) !important;
  }

  .mosaic-reveal {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 35%, #000 68%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 35%, #000 68%) !important;
  }

  .edu-gallery {
    grid-template-columns: 1fr !important;
  }
  .edu-main-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .edu-filmstrip-wrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 600px) {
  .hero-copy {
    grid-template-columns: 100px minmax(0, 1fr) !important;
    column-gap: 14px;
    width: calc(100vw - (var(--page-pad) * 2)) !important;
  }

  .hero-copy .eyebrow {
    font-size: 7px !important;
  }

  .hero-copy h1 {
    font-size: clamp(30px, 10vw, 48px) !important;
  }
}


/* v1.13 — descriptor moved below HASSAN MARJI */
.hero-copy {
  grid-template-areas:
    "portrait title"
    "portrait eyebrow" !important;
  align-items: start !important;
}

.hero-copy h1 {
  grid-area: title !important;
  align-self: end;
}

.hero-copy .eyebrow {
  grid-area: eyebrow !important;
  align-self: start !important;
  margin: 14px 0 0 !important;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .hero-copy .eyebrow {
    margin-top: 10px !important;
    white-space: normal;
  }
}


/* v1.14 — thinner hero portrait frame */
.hero-portrait-card {
  padding: 2px !important;
  border-width: 1px !important;
}


/* v1.15 — Hassan Marji personal art philosophy on hero */
.hero-philosophy {
  position: absolute;
  z-index: 7;
  left: var(--page-pad);
  bottom: clamp(64px, 9vh, 105px);
  width: min(36vw, 520px);
  color: rgba(255,255,255,.76);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.hero-philosophy p {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(12px, .92vw, 15px);
  line-height: 1.65;
  font-weight: 300;
  letter-spacing: .018em;
}

.hero-philosophy-signature {
  margin-top: 14px;
  color: rgba(255,255,255,.94);
  font-size: clamp(10px, .72vw, 12px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .hero-philosophy {
    width: min(58vw, 470px);
    bottom: 70px;
  }
}

@media (max-width: 600px) {
  .hero-philosophy {
    left: var(--page-pad);
    width: calc(100vw - (var(--page-pad) * 2));
    bottom: 54px;
  }

  .hero-philosophy p {
    font-size: 11px;
    line-height: 1.5;
  }
}
\n\n/* v1.18 trial — HMP-style signature name + silhouette hero */
@font-face {
  font-family: "Mailman";
  src: url("../fonts/MailmanRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.hero-portrait-card {
  background: rgba(255, 255, 255, .22) !important;
  border: 1px solid rgba(255, 255, 255, .30) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero-portrait-card img {
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
}

.hero-copy h1 {
  font-family: "Mailman", cursive !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: .82 !important;
  text-transform: none !important;
}

.hero-copy h1 span {
  display: inline !important;
}
.hero-copy h1 span + span::before {
  content: " ";
}


/* v1.19 — restore original hero portrait; retain Mailman name and enlarge it */
.hero-portrait-card {
  padding: 2px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.42),
    0 4px 14px rgba(0,0,0,.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero-portrait-card img {
  object-fit: cover !important;
  object-position: center 34% !important;
  background: transparent !important;
}

.hero-copy h1 {
  font-family: "Mailman", cursive !important;
  font-size: clamp(48px, 4.9vw, 84px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: .82 !important;
  text-transform: none !important;
}

@media (max-width: 900px) {
  .hero-copy h1 {
    font-size: clamp(39px, 9vw, 64px) !important;
  }
}

@media (max-width: 600px) {
  .hero-copy h1 {
    font-size: clamp(34px, 11vw, 54px) !important;
  }
}

/* v1.21 — Practice image cube redesign */
.practice-3d {
  min-height: 100vh;
  padding-top: clamp(90px, 9vw, 140px);
  padding-bottom: clamp(80px, 9vw, 140px);
}
.practice-heading-compact {
  margin-bottom: clamp(28px, 4vw, 56px);
  align-items: end;
}
.practice-heading-compact h2 {
  font-size: clamp(34px, 4.3vw, 66px);
  line-height: .95;
  letter-spacing: -.045em;
}
.practice-interactive {
  display: grid;
  grid-template-columns: minmax(220px, .82fr) minmax(0, 2.18fr);
  gap: clamp(34px, 6vw, 90px);
  align-items: center;
  min-height: 640px;
}
.discipline-menu {
  display: flex;
  flex-direction: column;
  align-self: center;
  border-top: 1px solid var(--line);
}
.discipline-choice {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  min-height: 58px;
  padding: 0;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  text-align: left;
  font: inherit;
  font-size: clamp(13px, 1.1vw, 16px);
  cursor: pointer;
  transition: color .2s ease, padding-left .2s ease, background .2s ease;
}
.discipline-choice span {
  color: rgba(247,148,29,.72);
  font-size: 10px;
  letter-spacing: .12em;
}
.discipline-choice:hover,
.discipline-choice:focus-visible,
.discipline-choice.is-active {
  color: var(--paper);
  padding-left: 10px;
  background: rgba(255,255,255,.025);
  outline: none;
}
.discipline-choice.is-active { border-left: 2px solid #f7941d; }
.discipline-shuffle { margin-top: 22px; border-top: 1px solid rgba(247,148,29,.4); }
.practice-interactive .cube-stage {
  height: clamp(520px, 58vw, 720px);
  min-width: 0;
  touch-action: pan-y;
}
.practice-interactive #practice3d {
  width: 100%;
  height: 100%;
  display: block;
}
.practice-interactive .three-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.practice-interactive .cube-caption {
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: rgba(238,234,226,.72);
  font-size: 9px;
  letter-spacing: .2em;
}
.practice-interactive .cube-caption::before { content: "CURRENT / "; color: #f7941d; }
.practice-cube-note {
  max-width: 690px;
  margin: 28px 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: .015em;
}
@media (max-width: 820px) {
  .practice-interactive { grid-template-columns: 1fr; min-height: 0; }
  .discipline-menu { display: grid; grid-template-columns: 1fr 1fr; }
  .discipline-choice { min-height: 52px; }
  .discipline-shuffle { margin-top: 0; }
  .practice-interactive .cube-stage { height: 520px; }
  .practice-cube-note { margin-left: 0; }
}
@media (max-width: 520px) {
  .discipline-menu { grid-template-columns: 1fr; }
  .practice-interactive .cube-stage { height: 430px; }
}


/* v1.22 — Use silhouette portrait on About page */
.about-portrait-card {
  padding: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
}

.about-portrait {
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  filter: none !important;
}


/* v1.23 — Practice composition refinement */
.practice-heading-compact {
  display: block;
  margin: 0 0 clamp(18px, 2.2vw, 30px);
  max-width: 430px;
}
.practice-heading-compact .section-index {
  margin-bottom: 18px;
}
.practice-heading-compact > div {
  max-width: 430px;
}
.practice-heading-compact h2 {
  font-size: clamp(30px, 3.15vw, 50px);
  line-height: .96;
  letter-spacing: -.04em;
}

.practice-interactive {
  grid-template-columns: minmax(250px, .72fr) minmax(0, 2.65fr);
  gap: clamp(26px, 4vw, 62px);
  align-items: center;
  min-height: 650px;
}

.practice-interactive .cube-stage {
  height: clamp(600px, 63vw, 790px);
}

@media (min-width: 1200px) {
  .practice-3d {
    position: relative;
  }

  .practice-heading-compact {
    position: absolute;
    top: clamp(105px, 9vw, 145px);
    left: var(--page-x);
    z-index: 3;
    width: min(400px, 25vw);
  }

  .practice-interactive {
    padding-top: 88px;
  }

  .discipline-menu {
    padding-top: 152px;
  }

  .practice-interactive .cube-stage {
    transform: translateX(1.5vw);
  }
}

@media (max-width: 820px) {
  .practice-heading-compact {
    position: static;
    width: auto;
    max-width: 100%;
  }
}

/* v1.25 — Complete test build: Bridge-style practice + knowledge cards */
.practice-gallery{padding-top:72px;}
.practice-heading-gallery{display:grid;grid-template-columns:260px 1fr;align-items:end;gap:34px;margin-bottom:38px;}
.practice-heading-gallery .section-index{margin:0;}
.practice-heading-gallery h2{font-size:clamp(34px,4.1vw,68px);font-weight:300;line-height:.95;letter-spacing:-.045em;max-width:760px;margin:0;text-align:left;}
.bridge-browser{display:grid;grid-template-columns:240px 1fr;min-height:720px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#090909;}
.bridge-sidebar{padding:22px 18px 22px 0;border-right:1px solid var(--line);}
.bridge-label{text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:#777;margin:0 0 14px;}
.bridge-category{width:100%;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;text-align:left;padding:15px 10px;border:0;border-bottom:1px solid #242424;background:transparent;color:#8e8e8e;font:inherit;cursor:pointer;transition:.2s ease;}
.bridge-category span{font-size:10px;color:#b36b10;letter-spacing:.12em;}
.bridge-category:hover,.bridge-category.is-active{color:#f2eee6;background:#101010;padding-left:14px;}
.bridge-category.is-active{box-shadow:inset 2px 0 #f7941d;}
.bridge-content{min-width:0;padding:18px 0 28px 24px;}
.bridge-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 10px 16px 0;border-bottom:1px solid #222;margin-bottom:16px;}
.bridge-toolbar div{display:flex;align-items:baseline;gap:12px;}.bridge-toolbar span{font-size:18px}.bridge-toolbar small{color:#666;font-size:11px;letter-spacing:.12em}.bridge-toolbar button{border:1px solid #343434;background:#111;color:#aaa;padding:8px 14px;cursor:pointer;text-transform:uppercase;letter-spacing:.12em;font-size:10px}.bridge-toolbar button:hover{color:#fff;border-color:#777}
.bridge-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-right:8px;align-items:start;}
.bridge-item{position:relative;background:#111;border:1px solid #171717;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;}
.bridge-item.tall{aspect-ratio:3/4}.bridge-item.wide{grid-column:span 2;aspect-ratio:16/9}
.bridge-item img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.9);transition:transform .32s ease,filter .32s ease,opacity .25s ease;}
.bridge-item:hover img{transform:scale(1.025);filter:saturate(1.05)}
.bridge-item .item-index{position:absolute;left:8px;bottom:7px;background:rgba(0,0,0,.68);padding:3px 6px;color:#ddd;font-size:9px;letter-spacing:.12em}
.animation-principle{display:flex;flex-direction:column;justify-content:space-between;padding:18px;background:linear-gradient(145deg,#121212,#080808);border:1px solid #242424;aspect-ratio:4/3;cursor:default;overflow:hidden}.animation-principle::before{content:"";width:54px;height:54px;border:2px solid #f7941d;border-radius:50%;transform:translateX(var(--shift,0)) scale(var(--scale,1));box-shadow:22px 12px 0 -16px #f2eee6}.animation-principle strong{font-size:18px;font-weight:400}.animation-principle small{color:#777;text-transform:uppercase;letter-spacing:.12em;font-size:9px}
.practice-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:1000;display:none;align-items:center;justify-content:center}.practice-lightbox.is-open{display:flex}.practice-lightbox figure{margin:0;max-width:min(84vw,1400px);max-height:88vh;display:flex;flex-direction:column;gap:10px}.practice-lightbox img{max-width:100%;max-height:80vh;object-fit:contain}.practice-lightbox figcaption{color:#999;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.practice-lightbox-close,.practice-lightbox-nav{position:absolute;border:0;background:none;color:#fff;cursor:pointer;font-size:34px}.practice-lightbox-close{top:20px;right:28px}.practice-lightbox-nav{top:50%;transform:translateY(-50%)}.practice-lightbox-nav.prev{left:22px}.practice-lightbox-nav.next{right:22px}
.knowledge-deck{display:block;padding-top:92px;padding-bottom:110px;overflow:hidden}.knowledge-head{display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:end;margin-bottom:36px}.knowledge-head .section-index{margin:0}.knowledge-head h2{font-size:clamp(32px,4vw,62px);font-weight:300;line-height:1;letter-spacing:-.04em;max-width:760px;margin:0}.knowledge-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;perspective:1600px}.knowledge-card{position:relative;margin:0;background:#0f0f0f;border:1px solid #2a2a2a;aspect-ratio:16/10;overflow:hidden;cursor:pointer;transform-origin:left center;transition:transform .65s cubic-bezier(.2,.75,.2,1),opacity .4s ease,box-shadow .4s ease}.knowledge-card img{width:100%;height:100%;object-fit:cover;display:block}.knowledge-card-meta{position:absolute;inset:auto 0 0 0;padding:32px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.88));display:flex;justify-content:space-between;align-items:end}.knowledge-card-meta span{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#f7941d}.knowledge-card-meta strong{font-size:13px;font-weight:400;color:#fff}.knowledge-card.is-flipping{transform:rotateY(-92deg) translateX(-8%);opacity:.18;box-shadow:40px 0 60px rgba(0,0,0,.65)}.knowledge-instruction{color:#6e6e6e;font-size:10px;text-transform:uppercase;letter-spacing:.13em;margin-top:14px}
.about-expanded .years-strip{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:10px 0 20px;scroll-snap-type:x proximity}.about-expanded .year-card{flex:0 0 clamp(150px,13vw,220px);height:310px;margin:0;scroll-snap-align:start;background:#111;overflow:hidden}.about-expanded .year-card:nth-child(3n+1){height:390px}.about-expanded .year-card:nth-child(3n+2){height:340px}.about-expanded .year-card img{width:100%;height:100%;object-fit:cover}.about-expanded .year-card figcaption{position:relative;margin-top:-28px;padding:8px;background:linear-gradient(transparent,rgba(0,0,0,.8));font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#bbb}
@media(max-width:1050px){.bridge-browser{grid-template-columns:190px 1fr}.bridge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.practice-heading-gallery,.knowledge-head{grid-template-columns:1fr}.knowledge-stack{grid-template-columns:1fr 1fr}.knowledge-card:last-child{grid-column:1/-1;max-width:50%}}
@media(max-width:700px){.bridge-browser{grid-template-columns:1fr}.bridge-sidebar{border-right:0;display:flex;overflow:auto;padding:0 0 12px}.bridge-label{display:none}.bridge-category{min-width:180px}.bridge-content{padding-left:0}.bridge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bridge-item.wide{grid-column:span 2}.knowledge-stack{grid-template-columns:1fr}.knowledge-card:last-child{grid-column:auto;max-width:none}}


/* =========================================================
   v1.26 — unified publish-candidate visual system
   ========================================================= */
:root { --hm-orange:#f7941d; --hm-bg:#090909; --hm-text:#eeeae2; --hm-muted:#aaa69f; --hm-line:rgba(238,234,226,.16); --hm-x:clamp(24px,5vw,84px); }

/* Shared page rhythm */
.selected-work,.practice-gallery,.knowledge-deck,.about-expanded{padding:clamp(96px,10vw,150px) var(--hm-x);border-top:1px solid var(--hm-line)}
.section-index{margin:0;color:var(--hm-muted);font-size:10px;letter-spacing:.17em;text-transform:uppercase}
.selected-work-head,.practice-heading-gallery,.knowledge-head{display:grid;grid-template-columns:minmax(150px,.72fr) minmax(0,2.8fr);gap:36px;align-items:end;margin-bottom:clamp(34px,5vw,68px)}
.selected-work-head h2,.practice-heading-gallery h2,.knowledge-head h2{margin:0;font-family:"Manrope",Arial,sans-serif;font-size:clamp(34px,4vw,58px)!important;line-height:.96;font-weight:300;letter-spacing:-.045em;max-width:680px}

/* Work: visuals first */
.selected-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(220px,27vw,430px);gap:4px}
.selected-work-item{border:0;padding:0;background:#111;overflow:hidden;cursor:pointer;min-width:0}
.selected-work-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease,filter .35s ease}
.selected-work-item:hover img{transform:scale(1.025);filter:brightness(1.07)}
.selected-work-wide{grid-column:span 2}
.selected-work-lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:none;place-items:center;padding:40px}
.selected-work-lightbox.is-open{display:grid}.selected-work-lightbox img{max-width:92vw;max-height:88vh;object-fit:contain}.selected-work-lightbox button{position:absolute;right:28px;top:20px;border:0;background:none;color:white;font-size:34px;cursor:pointer}

/* Practice browser — same visual language */
.practice-heading-gallery{margin-bottom:42px}.bridge-browser{border-top:1px solid var(--hm-line);min-height:650px}
.bridge-sidebar{background:transparent!important}.bridge-category{font-family:inherit}.bridge-category.is-active{color:var(--hm-text)}
.bridge-category.is-active::before{background:var(--hm-orange)!important}
.bridge-toolbar{border-bottom:1px solid var(--hm-line)}
.bridge-grid{gap:4px!important}.bridge-item{background:#111!important;border:0!important}.bridge-item img{transition:transform .35s ease,filter .35s ease}.bridge-item:hover img{transform:scale(1.02);filter:brightness(1.07)}

/* Knowledge — three wide visual pages */
.knowledge-deck{min-height:auto!important}.knowledge-stack{width:100%!important;max-width:none!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;perspective:1600px}
.knowledge-card{position:relative!important;inset:auto!important;transform:none!important;min-height:clamp(260px,28vw,440px)!important;background:#111!important;border:1px solid var(--hm-line)!important;cursor:pointer;transform-origin:left center;overflow:hidden}
.knowledge-card img{width:100%;height:100%;object-fit:cover}.knowledge-card-meta{background:linear-gradient(transparent,rgba(0,0,0,.8));padding:70px 18px 16px!important}.knowledge-card.is-flipping{animation:hmPageTurn .52s ease both}
@keyframes hmPageTurn{0%{transform:rotateY(0)}48%{transform:rotateY(-70deg)}100%{transform:rotateY(0)}}
.knowledge-instruction{margin:18px 0 0;color:var(--hm-muted);font-size:10px;text-transform:uppercase;letter-spacing:.14em}

/* About — compact three-column editorial composition */
.about-expanded{padding-left:var(--hm-x)!important;padding-right:var(--hm-x)!important}.about-intro>.section-index{margin-bottom:42px}
.about-three-col{display:grid;grid-template-columns:minmax(190px,.72fr) minmax(280px,1.05fr) minmax(360px,1.65fr);gap:clamp(30px,4vw,72px);align-items:start;margin-left:auto;max-width:1500px}
.about-portrait-col{padding-top:2px}.about-portrait-panel{width:min(100%,250px);aspect-ratio:.82;background:rgba(255,255,255,.22);overflow:hidden;border:0!important;box-shadow:none!important}
.about-portrait{width:100%;height:100%;object-fit:contain!important;display:block;filter:none!important;opacity:1!important;background:transparent!important}
.about-identity-col .about-signature{width:min(100%,360px)!important;margin:0 0 18px!important}.about-kicker{font-size:9px!important;letter-spacing:.15em!important;line-height:1.55}
.about-identity-col h2{margin:28px 0 0!important;font-family:"Manrope",Arial,sans-serif;font-size:clamp(34px,3.7vw,58px)!important;line-height:.96!important;font-weight:300;letter-spacing:-.05em}
.about-biography{display:block!important;max-width:700px!important}.about-biography p{font-size:clamp(13px,.95vw,16px)!important;line-height:1.72!important;margin:0 0 18px!important;color:#c8c4bd!important}.about-biography p:first-child{font-size:clamp(15px,1.1vw,18px)!important;line-height:1.62!important;color:var(--hm-text)!important}

/* Life timeline — edge-to-edge stripe + one large navigator */
.life-timeline{margin:clamp(100px,12vw,170px) calc(var(--hm-x) * -1) 0;border-top:1px solid var(--hm-line);padding-top:44px}
.life-timeline-head{padding:0 var(--hm-x) 30px}.life-timeline-head h3{margin:8px 0 0;font-family:"Manrope",Arial,sans-serif;font-size:clamp(28px,3.4vw,48px);font-weight:300;letter-spacing:-.04em}
.life-viewer{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;gap:16px;padding:0 var(--hm-x) 28px}
.life-viewer figure{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end}.life-viewer figure>img{width:100%;height:min(61vh,650px);object-fit:contain;background:#050505;display:block}.life-viewer figcaption{display:grid;gap:8px;color:var(--hm-muted);font-size:9px;letter-spacing:.15em;text-transform:uppercase;min-width:110px}.life-viewer figcaption span:first-child{color:var(--hm-orange)}
.life-nav{width:48px;height:48px;border:1px solid var(--hm-line);background:transparent;color:var(--hm-text);font-size:20px;cursor:pointer}.life-nav:hover{border-color:var(--hm-orange);color:var(--hm-orange)}
.life-strip-wrap{width:100%;overflow:hidden;border-top:1px solid var(--hm-line);border-bottom:1px solid var(--hm-line)}.life-strip{display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#555 transparent;cursor:grab}.life-thumb{flex:0 0 auto;width:clamp(95px,10vw,165px);height:clamp(130px,14vw,220px);padding:0;border:0;background:#111;opacity:.55;cursor:pointer;transition:opacity .25s ease,filter .25s ease}.life-thumb:nth-child(3n){width:clamp(130px,15vw,230px)}.life-thumb img{width:100%;height:100%;object-fit:cover;display:block}.life-thumb:hover,.life-thumb.is-active{opacity:1}.life-thumb.is-active{outline:2px solid var(--hm-orange);outline-offset:-2px}

/* Footer */
.site-footer{display:grid!important;grid-template-columns:1fr 1.25fr 1.55fr auto!important;gap:clamp(28px,4vw,70px)!important;align-items:start;padding:40px var(--hm-x)!important;border-top:1px solid var(--hm-line)!important;color:var(--hm-text)!important;text-transform:none!important;letter-spacing:normal!important}
.footer-brand{display:grid;gap:8px}.footer-brand strong{font-size:14px;font-weight:500}.footer-brand span,.footer-meta,.platform-links small{color:var(--hm-muted);font-size:9px;letter-spacing:.11em;text-transform:uppercase}.footer-label{margin:0 0 14px;color:var(--hm-muted);font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.footer-social-icons{display:flex;flex-wrap:wrap;gap:8px}.footer-social-icons a{width:34px;height:34px;border:1px solid var(--hm-line);display:grid;place-items:center;font-size:12px;font-weight:500;transition:border-color .2s,color .2s,transform .2s}.footer-social-icons a:hover{border-color:var(--hm-orange);color:var(--hm-orange);transform:translateY(-2px)}
.platform-links{display:flex;gap:12px;flex-wrap:wrap}.platform-links a{min-width:190px;border:1px solid var(--hm-line);padding:12px 14px;display:grid;gap:5px;transition:border-color .2s}.platform-links a:hover{border-color:var(--hm-orange)}.platform-wordmark{font-family:"Manrope",Arial,sans-serif;font-size:25px;font-weight:500;letter-spacing:.04em;color:#fff}.platform-links small{font-size:8px}.footer-meta{display:grid;gap:8px;justify-items:end;white-space:nowrap}

@media(max-width:980px){.selected-work-head,.practice-heading-gallery,.knowledge-head{grid-template-columns:1fr;gap:14px}.selected-work-grid{grid-template-columns:repeat(2,1fr)}.selected-work-wide{grid-column:span 1}.about-three-col{grid-template-columns:220px 1fr}.about-biography{grid-column:1/-1;columns:2;column-gap:36px}.knowledge-stack{grid-template-columns:1fr!important}.site-footer{grid-template-columns:1fr 1fr!important}.footer-meta{justify-items:start}}
@media(max-width:640px){.selected-work-grid{grid-template-columns:1fr}.about-three-col{grid-template-columns:1fr}.about-portrait-panel{width:180px}.about-biography{columns:1}.life-viewer{grid-template-columns:44px minmax(0,1fr) 44px;padding-left:14px;padding-right:14px;gap:6px}.life-viewer figure{grid-template-columns:1fr}.life-viewer figure>img{height:48vh}.life-nav{width:40px;height:40px}.site-footer{grid-template-columns:1fr!important}.platform-links{display:grid}.footer-meta{justify-items:start}}


/* v1.27 — About intro and timeline hierarchy */
.about,
.about-expanded {
  display: block !important;
  padding-top: clamp(100px, 10vw, 150px) !important;
}

.about-editorial {
  display: grid !important;
  grid-template-columns: minmax(170px, .65fr) minmax(260px, .95fr) minmax(320px, 1.4fr) !important;
  gap: clamp(28px, 4vw, 64px) !important;
  align-items: start !important;
  max-width: 1320px !important;
  margin-left: auto !important;
}

.about-portrait-card {
  position: static !important;
  top: auto !important;
  padding: 0 !important;
  background: rgba(255,255,255,.16) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.about-portrait {
  display: block !important;
  width: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  opacity: .96 !important;
  filter: contrast(1.12) brightness(.92) !important;
}

.about-portrait-index {
  display: none !important;
}

.about-content {
  min-width: 0 !important;
}

.about-content h2,
.about-title,
.about-heading {
  font-size: clamp(32px, 3.2vw, 54px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  max-width: 520px !important;
  margin-top: 0 !important;
}

.about-signature {
  width: min(390px, 100%) !important;
  margin: 0 0 24px !important;
}

/* The life timeline must begin below the About intro, never beside it */
.life-timeline,
.about-timeline,
.timeline-section,
.about-life {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  clear: both !important;
  margin-top: clamp(72px, 8vw, 120px) !important;
}

/* Edge-to-edge timeline strip */
.life-strip,
.timeline-strip,
.about-timeline-strip {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* v1.27 — Footer / Contact as digital business card */
#contact {
  scroll-margin-top: 120px;
}

.site-footer,
footer {
  padding-top: clamp(54px, 7vw, 90px) !important;
  padding-bottom: clamp(34px, 4vw, 56px) !important;
}

.footer-contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: clamp(28px, 5vw, 78px);
  width: 100%;
  align-items: start;
}

.footer-group-title {
  margin: 0 0 16px;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .16em;
}

.footer-contact-links,
.footer-social-links,
.footer-platform-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
}

.footer-contact-links a,
.footer-platform-links a {
  font-size: 13px;
  line-height: 1.45;
}

.footer-social-links a,
.footer-platform-logo {
  transition: opacity .22s ease, transform .22s ease, color .22s ease;
}

.footer-social-links a:hover,
.footer-platform-links a:hover {
  color: #f7941d;
}

.footer-social-icon {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}

.footer-platform-logo {
  height: 34px;
  width: auto;
  display: block;
  filter: grayscale(1) brightness(0) invert(1);
}

.footer-bottomline {
  margin-top: clamp(38px, 5vw, 64px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

@media (max-width: 900px) {
  .about-editorial {
    grid-template-columns: 170px 1fr !important;
  }
  .about-content {
    grid-column: 2 !important;
  }
  .about-biography {
    grid-template-columns: 1fr !important;
  }
  .footer-contact-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .about-editorial {
    grid-template-columns: 1fr !important;
  }
  .about-portrait-card {
    width: min(190px, 58vw) !important;
  }
  .about-content {
    grid-column: 1 !important;
  }
}

/* v1.28 — compact horizontal digital-business-card footer */
.site-footer{
  padding:30px var(--hm-x, 60px)!important;
  border-top:1px solid var(--line)!important;
}
.footer-horizontal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(24px,4vw,72px);
  width:100%;
  min-width:0;
}
.footer-identity{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}
.footer-home-logo{
  width:58px;
  flex:0 0 auto;
  display:block;
  color:#fff;
  opacity:.98;
  transition:opacity .2s ease,transform .2s ease;
}
.footer-home-logo:hover{opacity:.72;transform:translateY(-1px)}
.footer-home-logo svg{display:block;width:100%;height:auto;fill:currentColor}
.footer-contact-line{
  display:flex;
  align-items:center;
  gap:10px 18px;
  flex-wrap:wrap;
  white-space:nowrap;
}
.footer-contact-line a{
  font-size:12px;
  line-height:1.2;
  color:#fff;
  opacity:.82;
}
.footer-contact-line a:hover{opacity:1;color:#fff}
.footer-contact-line .footer-site-url{font-weight:600;letter-spacing:.02em;opacity:1}
.footer-social-links{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center;
  gap:13px!important;
  flex:0 0 auto;
}
.footer-social-links a{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:#fff;
  opacity:.86;
  transition:opacity .2s ease,transform .2s ease;
}
.footer-social-links a:hover{color:#fff!important;opacity:1;transform:translateY(-2px)}
.footer-social-icon{width:19px!important;height:19px!important;fill:currentColor}
.footer-platform-links{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center;
  gap:18px!important;
  flex:0 0 auto;
}
.footer-platform-links a,.footer-platform-pending{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:auto!important;
  border:0!important;
  padding:0!important;
}
.footer-platform-wordmark{
  display:inline-block;
  color:#fff;
  font-family:"Manrope",Arial,sans-serif;
  font-size:20px;
  line-height:1;
  font-weight:700;
  letter-spacing:.08em;
  opacity:.95;
}
.footer-platform-links a:hover .footer-platform-wordmark{opacity:.7}
.footer-platform-pending{opacity:.45;cursor:default}
.footer-bottomline,.footer-contact-grid,.footer-group-title{display:none!important}

@media(max-width:1100px){
  .footer-horizontal{flex-wrap:wrap;justify-content:flex-start}
  .footer-identity{flex:1 1 100%}
}
@media(max-width:640px){
  .site-footer{padding:28px 18px!important}
  .footer-horizontal{gap:22px}
  .footer-identity{align-items:flex-start}
  .footer-contact-line{display:grid;gap:7px;white-space:normal}
  .footer-social-links{gap:10px!important}
  .footer-platform-links{gap:14px!important}
  .footer-platform-wordmark{font-size:18px}
}


/* v1.30 — hero signature + role aligned to portrait bottom */
.hero-copy {
  grid-template-areas:
    "portrait title"
    "portrait role" !important;
  grid-template-rows: 1fr auto !important;
  align-items: stretch !important;
}

.hero-copy h1 {
  grid-area: title !important;
  align-self: end !important;
  margin: 0 0 8px !important;
}

.hero-role {
  grid-area: role;
  align-self: end;
  margin: 0 !important;
  color: rgba(255,255,255,.92);
  font-size: clamp(9px, .78vw, 12px);
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .hero-copy h1 {
    margin-bottom: 6px !important;
  }
  .hero-role {
    font-size: 7px;
    letter-spacing: .12em;
    white-space: normal;
  }
}

/* HM PATCH — Practice heading one line */
.practice-heading-gallery h2{
  font-size:clamp(24px,2.25vw,42px)!important;
  white-space:nowrap;
  line-height:1.05;
}
@media(max-width:760px){
  .practice-heading-gallery h2{white-space:normal;font-size:clamp(24px,7vw,34px)!important;}
}

/* HM PATCH — Knowledge gallery styles */
.knowledge-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 4vw 6vw;}
.knowledge-gallery-item{border:0;background:#0d0d0d;color:#fff;padding:0;text-align:left;cursor:zoom-in;overflow:hidden;}
.knowledge-gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.knowledge-gallery-item span{display:block;padding:12px 14px 14px;font-size:13px;letter-spacing:.04em;}
.knowledge-lightbox{position:fixed;inset:0;z-index:10020;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.96);padding:4vh 7vw;}
.knowledge-lightbox.is-open{display:flex;}
.knowledge-lightbox figure{margin:0;width:min(82vw,1500px);height:86vh;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.knowledge-lightbox figure img{max-width:100%;max-height:calc(86vh - 42px);width:auto;height:auto;object-fit:contain;}
.knowledge-lightbox figcaption{margin-top:10px;color:rgba(255,255,255,.72);font-size:11px;letter-spacing:.12em;}
.knowledge-lightbox-close,.knowledge-lightbox-nav{position:fixed;z-index:10021;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.42);color:#fff;cursor:pointer;}
.knowledge-lightbox-close{top:22px;right:26px;width:46px;height:46px;font-size:28px;}
.knowledge-lightbox-nav{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:24px;}
.knowledge-lightbox-nav.prev{left:22px}.knowledge-lightbox-nav.next{right:22px}
@media(max-width:800px){.knowledge-gallery{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.knowledge-gallery{grid-template-columns:1fr}}

/* HM PATCH — Footer rebuild */
.site-footer{padding:34px 4vw 28px!important;border-top:1px solid rgba(255,255,255,.12);}
.footer-main-grid{display:grid;grid-template-columns:1.35fr 1.15fr 1.6fr 1fr;gap:34px;align-items:start;}
.footer-brand-block{display:flex;align-items:center;gap:18px;min-width:0;}
.footer-home-logo{flex:0 0 auto;width:72px;height:auto;}
.footer-home-logo svg{display:block;width:100%;height:auto;}
.footer-home-logo-colorize .footer-hm-static,.footer-home-logo-colorize .footer-hm-top{fill:#777;transition:fill .2s ease;}
.footer-home-logo-colorize:hover .footer-hm-static{fill:#fff;}
.footer-home-logo-colorize:hover .footer-hm-top{fill:#f7941d;}
.footer-contact-line{display:flex;flex-direction:column;gap:5px;min-width:0;}
.footer-contact-line a{color:rgba(255,255,255,.82);text-decoration:none;font-size:12px;line-height:1.3;}
.footer-site-url{font-weight:600;color:#fff!important;}
.footer-heading{margin-bottom:12px;color:rgba(255,255,255,.48);font-size:10px;text-transform:uppercase;letter-spacing:.16em;}
.footer-social-links{display:flex!important;flex-wrap:wrap;gap:15px!important;align-items:center;}
.footer-social-links a{color:#bdbdbd;text-decoration:none;font-size:21px;line-height:1;transition:color .18s ease,transform .18s ease;}
.footer-social-links a:hover{color:#fff;transform:translateY(-1px);}
.footer-platform-links{display:flex;gap:18px;flex-wrap:wrap;}
.footer-platform-card{display:flex;flex-direction:column;gap:3px;color:#fff;text-decoration:none;min-width:88px;}
.footer-platform-card strong{font-size:20px;letter-spacing:.05em;}
.footer-platform-card small{max-width:150px;color:rgba(255,255,255,.52);font-size:10px;line-height:1.25;}
.footer-platform-card.is-pending{opacity:.45;}
.footer-sitemap-links{display:flex;flex-wrap:wrap;gap:8px 14px;}
.footer-sitemap-links a{color:rgba(255,255,255,.74);text-decoration:none;font-size:12px;}
.footer-sitemap-links a:hover,.footer-contact-line a:hover,.footer-platform-card:hover strong{color:#fff;}
@media(max-width:1050px){.footer-main-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:650px){.footer-main-grid{grid-template-columns:1fr;}}

/* HM PATCH — Selected Work arrows */
.selected-work-lightbox-nav,.selected-work-lightbox-close{position:fixed;z-index:10011;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.42);color:#fff;cursor:pointer;}
.selected-work-lightbox-close{top:22px;right:26px;width:46px;height:46px;font-size:28px;}
.selected-work-lightbox-nav{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:24px;}
.selected-work-lightbox-nav.prev{left:22px}.selected-work-lightbox-nav.next{right:22px}


/* HM FOOTER V2 CLEAN REDESIGN */
.footer-v2 {
  padding: 34px 4vw 30px !important;
  background: #080808;
  border-top: 1px solid rgba(255,255,255,.12);
}

.footer-v2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.footer-v2-brand {
  display: flex;
  align-items: center;
  gap: 22px;
}

.footer-v2-logo-link {
  width: 82px;
  display: block;
  flex: 0 0 auto;
}

.footer-hm-logo {
  width: 100%;
  display: block;
}

.footer-hm-main,
.footer-hm-cap {
  fill: #757575;
  transition: fill .18s ease;
}

.footer-v2-logo-link:hover .footer-hm-main {
  fill: #fff;
}

.footer-v2-logo-link:hover .footer-hm-cap {
  fill: #f7941d;
}

.footer-v2-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-v2-contact a {
  color: rgba(255,255,255,.76);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

.footer-v2-domain {
  color: #fff !important;
  font-weight: 600;
}

.footer-v2-social {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-v2-label {
  color: rgba(255,255,255,.42);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  white-space: nowrap;
}

.footer-v2-social-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.footer-v2-social-row a {
  color: #b8b8b8;
  text-decoration: none;
  font-size: 21px;
  line-height: 1;
  min-width: 24px;
  text-align: center;
  transition: color .18s ease, transform .18s ease;
}

.footer-v2-social-row a:hover {
  color: #fff;
  transform: translateY(-1px);
}

.footer-v2-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 24px 0;
}

.footer-v2-platform-row,
.footer-v2-bottom {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  align-items: center;
}

.footer-v2-platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.footer-v2-platform {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 12px;
  align-items: baseline;
  text-decoration: none;
  color: #fff;
  min-width: 0;
}

.footer-v2-platform strong {
  font-size: 21px;
  letter-spacing: .05em;
}

.footer-v2-platform span {
  color: rgba(255,255,255,.56);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-v2-platform-pending {
  opacity: .48;
}

.footer-v2-sitemap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.footer-v2-sitemap a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: 12px;
}

.footer-v2-sitemap a:hover,
.footer-v2-contact a:hover,
.footer-v2-platform:hover strong,
.footer-v2-platform:hover span {
  color: #fff;
}

@media (max-width: 900px) {
  .footer-v2-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-v2-platform-row,
  .footer-v2-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .footer-v2-platforms {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .footer-v2 {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .footer-v2-logo-link {
    width: 68px;
  }
  .footer-v2-contact a {
    white-space: normal;
  }
}


/* HM PATCH — Standardize work and practice thumbnails */
.selected-work-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-rows:clamp(120px,11vw,170px)!important;
  gap:10px!important;
}
.selected-work-wide{
  grid-column:span 1!important;
}
.selected-work-item,
.selected-work-item img{
  width:100%;
  height:100%;
}
.selected-work-item img{
  object-fit:cover!important;
}

.bridge-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:start!important;
}
.bridge-item,
.bridge-item.wide,
.bridge-item.tall{
  grid-column:span 1!important;
  grid-row:span 1!important;
  aspect-ratio:4 / 3!important;
  min-height:0!important;
}
.bridge-item img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

@media (max-width: 1280px){
  .bridge-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media (max-width: 980px){
  .selected-work-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:clamp(120px,18vw,180px)!important;}
  .bridge-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media (max-width: 700px){
  .selected-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:clamp(110px,28vw,160px)!important;}
  .bridge-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media (max-width: 520px){
  .selected-work-grid,
  .bridge-grid{grid-template-columns:1fr!important;}
}

/* HM FINAL — Knowledge mirrors Practice */
.knowledge-browser{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:420px;border-top:1px solid var(--hm-line);border-bottom:1px solid var(--hm-line);background:#090909}
.knowledge-sidebar{padding:22px 18px 22px 0;border-right:1px solid var(--hm-line)}
.knowledge-label{text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:#777;margin:0 0 14px}
.knowledge-category{width:100%;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;text-align:left;padding:15px 10px;border:0;border-bottom:1px solid #242424;background:transparent;color:#8e8e8e;font:inherit;cursor:pointer;transition:.2s ease}
.knowledge-category span{font-size:10px;color:#b36b10;letter-spacing:.12em}
.knowledge-category:hover,.knowledge-category.is-active{color:#f2eee6;background:#101010;padding-left:14px}
.knowledge-category.is-active{box-shadow:inset 2px 0 #f7941d}
.knowledge-content{min-width:0;padding:18px 8px 28px 24px}
.knowledge-toolbar{display:flex;align-items:center;min-height:48px;padding:0 10px 16px 0;border-bottom:1px solid #222;margin-bottom:16px}
.knowledge-toolbar h3{margin:0}
.knowledge-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.knowledge-thumb{aspect-ratio:16/9;position:relative;overflow:hidden;border:0;padding:0;background:#111;cursor:zoom-in}
.knowledge-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.knowledge-empty{color:#777;font-size:12px;padding:24px 0}
.footer-v2-social a,.footer-social a,.footer-socials a{display:inline-flex;align-items:center;justify-content:center}
.footer-v2-social svg,.footer-social svg,.footer-socials svg{width:22px;height:22px;fill:currentColor;display:block}
.footer-wa-contact{display:flex;align-items:center;gap:9px;width:max-content;max-width:100%;color:inherit;text-decoration:none;margin:6px 0}
.footer-wa-contact svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
.footer-wa-contact:hover{color:#fff}
@media(max-width:1100px){.knowledge-browser{grid-template-columns:190px minmax(0,1fr)}.knowledge-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.knowledge-browser{grid-template-columns:1fr}.knowledge-sidebar{border-right:0;display:flex;overflow-x:auto;padding:0 0 12px}.knowledge-label{display:none}.knowledge-category{min-width:180px}.knowledge-content{padding-left:0}.knowledge-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.knowledge-gallery-grid{grid-template-columns:1fr}}

/* HM FINAL CONTACT FIX */
.footer-contact-phones{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
}
.footer-wa-contact{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#bdbdbd !important;
  text-decoration:none !important;
  font-size:12px !important;
  line-height:1.25 !important;
  background:none !important;
  border:0 !important;
}
.footer-wa-contact svg{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  max-width:16px !important;
  min-height:16px !important;
  max-height:16px !important;
  fill:currentColor !important;
  display:block !important;
  flex:0 0 16px !important;
}
.footer-wa-contact span{
  display:inline-block !important;
  white-space:nowrap !important;
}
.footer-wa-contact b{
  font-weight:500 !important;
  color:#d7d7d7 !important;
  margin-right:6px !important;
}
.footer-wa-contact:hover,
.footer-wa-contact:hover b{
  color:#fff !important;
}


/* HM KNOWLEDGE V2 - exact Practice page structure */
.knowledge-practice .practice-heading-gallery{
  margin-bottom:0 !important;
}

.knowledge-practice .knowledge-gallery-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  align-items:start !important;
}

.knowledge-practice .knowledge-thumb{
  position:relative !important;
  aspect-ratio:16 / 9 !important;
  border:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#111 !important;
  cursor:zoom-in !important;
}

.knowledge-practice .knowledge-thumb img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transition:transform .28s ease, filter .28s ease !important;
}

.knowledge-practice .knowledge-thumb:hover img{
  transform:scale(1.025) !important;
}

.knowledge-practice .knowledge-thumb-index{
  position:absolute !important;
  left:6px !important;
  bottom:6px !important;
  padding:2px 5px !important;
  background:rgba(0,0,0,.65) !important;
  color:#ddd !important;
  font-size:9px !important;
  letter-spacing:.1em !important;
}

.knowledge-practice .knowledge-empty{
  color:#777 !important;
  font-size:12px !important;
  padding:22px 0 !important;
}

.knowledge-practice .practice-heading-gallery h2{
  white-space:nowrap !important;
  font-size:clamp(24px,2.25vw,42px) !important;
  line-height:1.05 !important;
}

@media(max-width:1100px){
  .knowledge-practice .knowledge-gallery-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media(max-width:760px){
  .knowledge-practice .practice-heading-gallery h2{
    white-space:normal !important;
  }
  .knowledge-practice .knowledge-gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:520px){
  .knowledge-practice .knowledge-gallery-grid{
    grid-template-columns:1fr !important;
  }
}

/* HM FINAL — Life Timeline metadata layout */
.life-viewer figure {
  grid-template-columns: minmax(0, 1fr) clamp(210px, 22vw, 340px);
  gap: clamp(20px, 3vw, 48px);
  align-items: stretch;
}

.life-viewer figure > img {
  min-width: 0;
}

.life-viewer-meta {
  min-width: 0 !important;
  padding: 14px 0 10px;
  align-self: stretch;
  align-content: start;
  gap: 26px !important;
}

.life-viewer-meta #lifeCounter {
  color: var(--hm-orange);
}

.life-viewer-date,
.life-viewer-caption {
  display: grid;
  gap: 8px;
}

.life-meta-label {
  color: var(--hm-muted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.life-viewer-date strong {
  color: var(--hm-text);
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.05;
  text-transform: none;
}

.life-viewer-caption p {
  margin: 0;
  color: var(--hm-text);
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(18px, 1.6vw, 28px);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-transform: none;
}

.life-strip {
  align-items: stretch;
}

.life-thumb {
  height: auto !important;
  min-height: 0;
  display: grid;
  grid-template-rows: clamp(130px, 14vw, 220px) auto;
  align-content: start;
  overflow: hidden;
  opacity: .68;
  text-align: left;
}

.life-thumb img {
  width: 100%;
  height: 100% !important;
  min-height: 0;
  object-fit: cover;
}

.life-thumb-meta {
  min-height: 70px;
  padding: 9px 10px 12px;
  display: grid;
  align-content: start;
  gap: 5px;
  border-top: 1px solid var(--hm-line);
  background: #0d0d0d;
  pointer-events: none;
}

.life-thumb-date {
  color: var(--hm-orange);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.life-thumb-caption {
  color: var(--hm-text);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.life-strip.is-dragging {
  cursor: grabbing;
  user-select: none;
}

@media (max-width: 760px) {
  .life-viewer {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
  }

  .life-viewer figure {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .life-viewer-meta {
    padding-top: 0;
    gap: 16px !important;
  }

  .life-thumb-meta {
    min-height: 62px;
  }
}

/* HM TIMELINE REDESIGN V2 */
.life-timeline{position:relative;margin:clamp(100px,12vw,170px) calc(var(--hm-x)*-1) 0;padding-top:44px;border-top:1px solid var(--hm-line)}
.life-timeline-head{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:0 var(--hm-x) 34px}
.life-timeline-head h3{margin:0;font-family:"Manrope",Arial,sans-serif;font-size:clamp(28px,3.4vw,48px);font-weight:300;letter-spacing:-.04em}
.life-timeline-note{margin:0 0 4px;color:var(--hm-muted);font-size:9px;letter-spacing:.15em;text-transform:uppercase}
.life-strip-wrap{width:100%;overflow:hidden;border-top:1px solid var(--hm-line);border-bottom:1px solid var(--hm-line)}
.life-strip{position:relative;display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:0 0 18px;cursor:grab;scrollbar-width:thin;scrollbar-color:#555 transparent}
.life-strip.is-dragging{cursor:grabbing;user-select:none}
.life-thumb{position:relative;flex:0 0 clamp(180px,16vw,260px)!important;width:clamp(180px,16vw,260px)!important;height:auto!important;min-height:0;display:grid;grid-template-rows:34px clamp(220px,25vw,390px) minmax(76px,auto);padding:0!important;border:0;border-right:1px solid var(--hm-line);background:#0b0b0b;color:var(--hm-text);opacity:.68;text-align:left;cursor:pointer;transition:opacity .2s ease,background .2s ease;outline:none!important}
.life-thumb:hover,.life-thumb.is-active{opacity:1;background:#0f0f0f}
.life-thumb-track{position:relative;display:block;height:34px}
.life-thumb-track::before{content:"";position:absolute;left:0;right:0;top:17px;border-top:1px dashed rgba(238,234,226,.28)}
.life-thumb-dot{position:absolute;z-index:2;left:50%;top:13px;width:9px;height:9px;transform:translateX(-50%);border:1px solid rgba(238,234,226,.75);border-radius:50%;background:#0b0b0b;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.life-thumb.is-active .life-thumb-dot{border-color:var(--hm-orange);background:var(--hm-orange);transform:translateX(-50%) scale(1.35)}
.life-thumb-body{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;background:#050505}
.life-thumb-body>img,.life-thumb>img{width:100%;height:100%!important;display:block;object-fit:cover;filter:saturate(.88);transition:transform .35s ease,filter .25s ease}
.life-thumb:hover .life-thumb-body>img,.life-thumb.is-active .life-thumb-body>img{filter:saturate(1)}
.life-thumb:hover .life-thumb-body>img{transform:scale(1.018)}
.life-thumb-meta{display:grid;align-content:start;gap:7px;min-height:76px;padding:12px 14px 15px;background:#0b0b0b;pointer-events:none}
.life-thumb-date{color:var(--hm-orange);font-size:9px;font-weight:500;letter-spacing:.12em;line-height:1.2;text-transform:uppercase}
.life-thumb-date.is-undated{color:var(--hm-muted)}
.life-thumb-caption{color:var(--hm-text);font-family:"Manrope",Arial,sans-serif;font-size:12px;font-weight:300;line-height:1.35;letter-spacing:-.01em}
.life-thumb-caption.is-empty{min-height:1em}
.life-thumb-settings{position:absolute;z-index:4;top:10px;right:10px;width:32px;height:32px;display:none;place-items:center;border:1px solid rgba(255,255,255,.45);background:rgba(5,5,5,.75);backdrop-filter:blur(8px);cursor:pointer}
.timeline-edit-mode .life-thumb-settings{display:grid}.life-thumb-settings:hover{border-color:var(--hm-orange)}
.life-thumb-settings svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.life-timeline-indicator{position:absolute;z-index:7;left:0;top:0;width:0;height:34px;border-left:2px solid var(--hm-orange);pointer-events:none;transition:transform .32s cubic-bezier(.2,.75,.2,1)}
.life-timeline-indicator::before{content:"";position:absolute;left:-5px;top:0;width:8px;height:8px;border-left:2px solid var(--hm-orange);border-top:2px solid var(--hm-orange);transform:rotate(45deg);background:#090909}
.life-lightbox{position:fixed;z-index:120;inset:0;display:none;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;gap:20px;padding:clamp(24px,4vw,64px);background:rgba(0,0,0,.94);backdrop-filter:blur(10px)}
.life-lightbox.is-open{display:grid}
.life-lightbox-figure{min-width:0;max-width:1500px;width:100%;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,19vw,300px);gap:clamp(24px,4vw,60px);align-items:end}
.life-lightbox-figure img{width:100%;max-height:82vh;object-fit:contain;display:block;background:#050505}
.life-lightbox-meta{display:grid;gap:16px;align-self:end}.life-lightbox-meta span{color:var(--hm-orange);font-size:9px;letter-spacing:.15em}.life-lightbox-meta strong{color:var(--hm-text);font-family:"Manrope",Arial,sans-serif;font-size:clamp(20px,2vw,32px);font-weight:300}.life-lightbox-meta p{margin:0;color:var(--hm-text);font-family:"Manrope",Arial,sans-serif;font-size:clamp(16px,1.35vw,23px);font-weight:300;line-height:1.4}
.life-lightbox-nav,.life-lightbox-close{border:1px solid var(--hm-line);background:rgba(10,10,10,.55);color:var(--hm-text);cursor:pointer}.life-lightbox-nav{width:52px;height:52px;font-size:20px}.life-lightbox-nav:hover,.life-lightbox-close:hover{border-color:var(--hm-orange);color:var(--hm-orange)}.life-lightbox-close{position:absolute;right:28px;top:28px;width:44px;height:44px;font-size:24px}
.life-editor-modal{position:fixed;z-index:150;inset:0;display:none;place-items:center;padding:24px;background:rgba(0,0,0,.82);backdrop-filter:blur(10px)}.life-editor-modal.is-open{display:grid}
.life-editor-card{width:min(520px,100%);display:grid;gap:22px;padding:24px;border:1px solid var(--hm-line);background:#101010;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.life-editor-head{display:flex;justify-content:space-between;align-items:center}.life-editor-head strong{font-family:"Manrope",Arial,sans-serif;font-size:19px;font-weight:300}.life-editor-head button{width:34px;height:34px;border:1px solid var(--hm-line);background:transparent;color:var(--hm-text);font-size:20px;cursor:pointer}
.life-editor-card label{display:grid;gap:8px}.life-editor-card label>span{color:var(--hm-muted);font-size:9px;letter-spacing:.15em;text-transform:uppercase}.life-editor-card input,.life-editor-card textarea{width:100%;border:1px solid var(--hm-line);background:#080808;color:var(--hm-text);font:inherit;padding:12px 13px;outline:none}.life-editor-card input:focus,.life-editor-card textarea:focus{border-color:var(--hm-orange)}.life-editor-card small{color:var(--hm-muted);font-size:10px}.life-editor-error{margin:0;color:#ff9a7a;font-size:12px}.life-editor-actions{display:flex;justify-content:flex-end;gap:10px}.life-editor-actions button{padding:10px 15px;border:1px solid var(--hm-line);background:transparent;color:var(--hm-text);cursor:pointer}.life-editor-actions button[type="submit"]{border-color:var(--hm-orange);color:var(--hm-orange)}
@media(max-width:760px){.life-timeline-head{display:grid;align-items:start}.life-thumb{flex-basis:180px!important;width:180px!important;grid-template-rows:32px 230px minmax(72px,auto)}.life-lightbox{grid-template-columns:42px minmax(0,1fr) 42px;gap:8px;padding:18px 10px}.life-lightbox-nav{width:40px;height:44px}.life-lightbox-figure{grid-template-columns:1fr;gap:14px}.life-lightbox-figure img{max-height:70vh}.life-lightbox-meta{gap:8px}}

/* HM TIMELINE DOT-ONLY INDICATOR */
.life-timeline-indicator,
.life-timeline-indicator::before {
  display: none !important;
}

.life-thumb.is-active .life-thumb-dot {
  border-color: var(--hm-orange) !important;
  background: var(--hm-orange) !important;
  box-shadow: 0 0 0 4px rgba(232,117,47,.18);
  transform: translateX(-50%) scale(1.4);
}