/* ----------------------------------
   HOME - ART DIRECTION V0.2
----------------------------------- */

/* SECTION 1: HERO */
.hero {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  padding: var(--margin-fluid);
  position: relative;
}

/* We want asymmetrical, monumental typography */
.hero-content {
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .hero-content {
    grid-template-columns: 3fr 9fr;
    align-items: end;
  }
}

.hero-pill-wrap {
  overflow: hidden;
  margin-bottom: 1rem;
}

.hero-pill-wrap .pill {
  /* Motion handles transform */
  will-change: transform;
}

.hero-title-wrap {
  overflow: hidden;
  grid-column: 1 / -1;
}

.hero-title {
  font-size: var(--text-hero);
  line-height: 0.85;
  text-transform: uppercase;
  margin-left: -0.05em; /* Optical alignment */
  will-change: transform;
}

.hero-subtitle-wrap {
  overflow: hidden;
}

.hero-subtitle {
  font-size: var(--text-h3);
  font-family: var(--font-body);
  font-weight: 400;
  will-change: transform;
}

.hero-copy-wrap {
  overflow: hidden;
  max-width: 400px;
}

.hero-copy {
  font-size: var(--text-base);
  color: rgba(15, 15, 15, 0.7);
  will-change: transform;
}

/* SECTION 2: VELOCIDAD DEL CAMBIO (Immersive Tunnel) */
.tunnel-section {
  padding: 0;
  background-color: var(--color-black);
  color: var(--color-paper);
}

.tunnel-container {
  /* Using standard CSS for spacing since scroll-jacking is forbidden.
     We make each sentence take a full screen height to force pause. */
  display: flex;
  flex-direction: column;
}

.tunnel-item {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--margin-fluid);
  position: sticky;
  top: 0;
}

/* We use position sticky to let them stack/overlap naturally in the viewport 
   as the user scrolls down, creating an immersive reveal effect without JS jacking */
.tunnel-item:nth-child(1) { z-index: 1; background-color: #0F0F0F; }
.tunnel-item:nth-child(2) { z-index: 2; background-color: #141414; }
.tunnel-item:nth-child(3) { z-index: 3; background-color: #1A1A1A; }
.tunnel-item:nth-child(4) { z-index: 4; background-color: #1F1F1F; }
.tunnel-item:nth-child(5) { z-index: 5; background-color: #242424; }
.tunnel-item:nth-child(6) { z-index: 6; background-color: var(--color-black); }

.tunnel-text {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  text-align: center;
  max-width: 1200px;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  opacity: 0.2;
  transform: scale(0.95);
  transition: opacity 0.8s var(--curve-editorial), transform 0.8s var(--curve-editorial);
  will-change: opacity, transform;
}

.tunnel-text.is-active {
  opacity: 1;
  transform: scale(1);
}

/* SECTION 3: ESTRATEGIA (Architectural System) */
.strategy-section {
  padding: 15vh var(--margin-fluid);
  position: relative;
  background-color: var(--color-paper);
}

.strategy-intro {
  margin-bottom: 20vh;
}

.strategy-title {
  font-size: var(--text-h1);
  line-height: 1;
  margin-bottom: 2rem;
}

.strategy-subtitle {
  font-size: var(--text-h3);
  font-family: var(--font-body);
  max-width: 800px;
}

.arch-system-container {
  width: 100%;
  height: 60vh;
  position: relative;
  border: 1px solid var(--color-line);
  margin: 10vh 0;
}

.arch-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.arch-line {
  stroke: var(--color-black);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2s var(--curve-editorial);
}

.arch-system-container.is-visible .arch-line {
  stroke-dashoffset: 0;
}

/* SECTION 4: CONECTAR DECISIONES */
.connect-section {
  padding: 15vh var(--margin-fluid);
  background-color: var(--color-black);
  color: var(--color-paper);
}

.connect-header {
  font-size: var(--text-h2);
  max-width: 900px;
  margin-bottom: 15vh;
}

.connect-diagram {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  position: relative;
}

@media (min-width: 1024px) {
  .connect-diagram {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
}

.disciplines, .questions {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.questions {
  text-align: right;
}

.diagram-item {
  font-family: var(--font-body);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s var(--curve-editorial), transform 0.6s var(--curve-editorial);
}

.questions .diagram-item {
  transform: translateX(20px);
}

.connect-diagram.is-visible .diagram-item {
  opacity: 1;
  transform: translateX(0);
}

.director-core {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  text-align: center;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1s var(--curve-editorial) 0.5s, transform 1s var(--curve-editorial) 0.5s;
}

.connect-diagram.is-visible .director-core {
  opacity: 1;
  transform: scale(1);
}

/* Connection lines overlay */
.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.connect-close-wrap {
  margin-top: 20vh;
  overflow: hidden;
}

.connect-close {
  font-size: var(--text-h1);
  text-align: center;
  transform: translateY(100%);
  transition: transform 1s var(--curve-editorial);
}

.connect-close.is-visible {
  transform: translateY(0);
}

/* SECTION 5: PERCEPCIÓN (Spatial Environments) */
.perception-section {
  padding: 15vh 0; /* Full bleed for environments */
}

.perception-intro {
  padding: 0 var(--margin-fluid);
  margin-bottom: 20vh;
}

.perception-intro h2 {
  font-size: var(--text-h1);
}

.perception-env {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--margin-fluid);
  position: relative;
  border-top: 1px solid var(--color-line);
}

.env-title {
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: absolute;
  top: 2rem;
  left: var(--margin-fluid);
}

.env-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .env-items {
    flex-direction: row;
    gap: 4rem;
    align-items: baseline;
  }
}

.env-item {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--curve-editorial), transform 0.8s var(--curve-editorial);
}

.perception-env.is-visible .env-item {
  opacity: 1;
  transform: translateY(0);
}

.perception-outro {
  padding: 15vh var(--margin-fluid);
  text-align: center;
}

.perception-outro p {
  font-size: var(--text-h2);
}

/* ----------------------------------
   HOME - PHASE 2 BLOCKS 6-10
----------------------------------- */

/* SECTION 6: TRES TERRITORIOS */
.territories-section {
  padding: 15vh 0;
  background-color: var(--color-black);
  color: var(--color-paper);
}

.territory-intro {
  padding: 0 var(--margin-fluid);
  margin-bottom: 15vh;
}

.territory-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

@media (min-width: 1024px) {
  .territory-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.territory-col {
  padding: 3rem var(--margin-fluid);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

@media (min-width: 1024px) {
  .territory-col {
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }
  .territory-col:last-child {
    border-right: none;
  }
}

.territory-col h3 {
  font-family: var(--font-body);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 3rem;
  color: rgba(247, 246, 242, 0.5);
}

.territory-col p {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.2;
}

/* SECTION 7: CASOS */
.cases-section {
  padding: 15vh 0;
  background-color: var(--color-paper);
}

.cases-intro {
  padding: 0 var(--margin-fluid);
  margin-bottom: 15vh;
}

.case-block {
  border-top: 1px solid var(--color-line);
  padding: 5vh var(--margin-fluid);
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  transition: background-color 0.4s var(--curve-editorial);
}

.case-block:hover {
  background-color: rgba(15, 15, 15, 0.03);
}

@media (min-width: 1024px) {
  .case-block {
    grid-template-columns: 3fr 9fr;
    gap: 0;
  }
}

.case-name {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  margin-bottom: 2rem;
}

.case-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .case-details {
    grid-template-columns: 1fr 1fr;
  }
}

.case-data-group {
  margin-bottom: 2rem;
}

.case-label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(15, 15, 15, 0.5);
  margin-bottom: 0.5rem;
  display: block;
}

.case-value {
  font-size: var(--text-base);
}

/* SECTION 8: JUANMA LEÓN */
.about-section {
  padding: 20vh var(--margin-fluid);
  background-color: var(--color-black);
  color: var(--color-paper);
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}

@media (min-width: 1024px) {
  .about-section {
    grid-template-columns: 4fr 8fr;
  }
}

.about-title {
  font-family: var(--font-body);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(247, 246, 242, 0.5);
}

.about-copy {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.2;
}

.about-copy p {
  margin-bottom: 2rem;
}

/* SECTION 9: MÉTODO */
.method-section {
  padding: 15vh 0;
  background-color: var(--color-paper);
}

.method-grid {
  border-top: 1px solid var(--color-line);
}

.method-step {
  display: grid;
  grid-template-columns: 1fr;
  padding: 4rem var(--margin-fluid);
  border-bottom: 1px solid var(--color-line);
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .method-step {
    grid-template-columns: 4fr 8fr;
    align-items: center;
  }
}

.method-name {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  margin-bottom: 1rem;
}

.method-desc {
  font-size: var(--text-h3);
}

.method-outro {
  padding: 15vh var(--margin-fluid);
  text-align: center;
}

/* SECTION 10: CONTACTO */
.contact-section {
  padding: 20vh var(--margin-fluid);
  background-color: var(--color-paper);
  border-top: 1px solid var(--color-line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}

@media (min-width: 1024px) {
  .contact-section {
    grid-template-columns: 6fr 6fr;
  }
}

.contact-intro h2 {
  font-size: var(--text-h2);
  margin-bottom: 2rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-group {
  position: relative;
}

.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-line);
  padding: 0.5rem 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-black);
  transition: border-color 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-black);
}

/* Validation styles */
.form-input.is-invalid {
  border-color: #D00000;
}
.error-msg {
  color: #D00000;
  font-size: 0.75rem;
  position: absolute;
  bottom: -1.2rem;
  left: 0;
  display: none;
}
.form-input.is-invalid + .error-msg {
  display: block;
}

.form-submit {
  align-self: flex-start;
  margin-top: 1rem;
  cursor: pointer;
  background: transparent;
}

/* FOOTER */
.site-footer {
  background-color: var(--color-black);
  color: var(--color-paper);
  padding: 10vh var(--margin-fluid) 5vh;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  margin-bottom: 10vh;
}

@media (min-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

.footer-brand .display-text {
  font-size: var(--text-h2);
  margin-bottom: 1rem;
}

.footer-brand .pill {
  border-color: rgba(255,255,255,0.3);
  color: var(--color-paper);
  margin-bottom: 1rem;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-nav a {
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: opacity 0.3s ease;
}
.footer-nav a:hover {
  opacity: 0.6;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 2rem;
  font-size: var(--text-small);
  color: rgba(247, 246, 242, 0.5);
}

@media (min-width: 1024px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

/* Motion additions for Phase 2 */
.reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--curve-editorial), transform 0.8s var(--curve-editorial);
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.no-js .hero-title,
.no-js .hero-subtitle,
.no-js .hero-copy,
.no-js .hero-pill-wrap .pill,
.no-js .tunnel-text,
.no-js .arch-line,
.no-js .diagram-item,
.no-js .director-core,
.no-js .connect-close,
.no-js .env-item,
.no-js .reveal-item {
  opacity: 1 !important;
  transform: none !important;
  stroke-dashoffset: 0 !important;
}
\n/* ----------------------------------
   HOME - VISUAL MASTER V1.0 (RECONSTRUCTION)
   Isolated using .h- prefix to prevent conflicts
----------------------------------- */

.home-page .site-footer {
  background-color: var(--h-black) !important;
  color: var(--h-off) !important;
  border-top: none;
}
.home-page .site-footer .footer-bottom { border-top-color: rgba(255,255,255,0.15) !important; }
.home-page .footer-brand .pill { border-color: rgba(255,255,255,0.3) !important; color: var(--h-off) !important; }

.h-section {
  position: relative;
  min-height: 100svh;
  padding: clamp(100px, 13vw, 180px) var(--h-pad);
  border-top: 1px solid var(--h-border);
  font-family: var(--h-font-body);
}
.h-eyebrow {
  font: 500 11px/1 var(--h-font-display);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--h-mid);
  margin-bottom: 28px;
}
.h-poster {
  font-family: var(--h-font-display);
  font-weight: 700;
  letter-spacing: -.068em;
  line-height: .91;
  margin: 0;
  max-width: 1500px;
  text-wrap: balance;
  color: inherit;
}
.h-poster.h-lg { font-size: clamp(48px, 7.6vw, 116px); }
.h-poster.h-md { font-size: clamp(42px, 6vw, 92px); }
.h-body-copy {
  font-size: clamp(18px, 1.65vw, 26px);
  line-height: 1.42;
  letter-spacing: -.025em;
  color: var(--h-mid);
  max-width: 760px;
}

/* Visibility Pattern */
.h-reveal {
  opacity: 1; /* Visible por defecto */
  transform: none;
  transition: opacity 1s var(--h-ease), transform 1s var(--h-ease);
}
.js-ready .h-reveal {
  opacity: 0;
  transform: translateY(40px);
}
.js-ready .h-reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* 1 HERO */
.h-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 48px 120px;
  position: relative;
  overflow: hidden;
  border-top: 0;
}
.h-barcode { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 3px; width: 18px; }
.h-barcode.left { left: 16px; }
.h-barcode.right { right: 16px; }
.h-bb { background: var(--h-black); opacity: .08; height: 1px; }
.h-bb.thick { height: 3px; }
.h-bl { writing-mode: vertical-rl; font-size: 8px; letter-spacing: .1em; color: var(--h-mid); opacity: .3; text-align: center; margin-top: 8px; font-family: var(--h-font-display); }

.h-stamp {
  position: absolute; right: 80px; top: 50%; transform: translateY(-60%);
  width: 100px; height: 100px;
  border: 1.5px solid rgba(0,0,0,.6); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: rot 25s linear infinite;
}
@keyframes rot { from { transform: translateY(-60%) rotate(0); } to { transform: translateY(-60%) rotate(360deg); } }
.h-stamp svg { width: 84px; height: 84px; }

.h-status-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--h-off); border: 1px solid var(--h-border);
  border-radius: 100px; padding: 6px 16px;
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--h-mid); margin-bottom: 40px;
  opacity: 1;
}
.js-ready .h-status-badge { opacity: 0; transform: translateY(15px); transition: opacity 1s var(--h-ease), transform 1s var(--h-ease); }
.js-ready .h-status-badge.in { opacity: 1; transform: none; }
.h-status-dot { width: 6px; height: 6px; background: #4ade80; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.h-hero-h {
  font-family: var(--h-font-display);
  font-size: clamp(64px, 10.5vw, 160px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.04em;
  color: var(--h-black);
  overflow: hidden;
  padding-bottom: 12px;
}
.h-h-line { display: block; overflow: hidden; padding-bottom: 8px; margin-bottom: -8px; }
.h-inn { display: block; transition: transform 1.1s var(--h-ease); transform: none; }
.js-ready .h-inn { transform: translateY(105%); }
.js-ready .h-inn.in { transform: none; }
.h-scramble-word { color: var(--h-grey); display: inline-block; min-width: 8ch; font-weight: 800; }

.h-services-row {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--h-border);
  padding-top: 28px;
  opacity: 1;
}
.js-ready .h-services-row { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--h-ease), transform 1s var(--h-ease); }
.js-ready .h-services-row.in { opacity: 1; transform: none; }
.h-svc-pill {
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--h-mid); padding: 0 24px;
  border-right: 1px solid var(--h-border);
  white-space: nowrap;
}
.h-svc-pill:first-child { padding-left: 0; }
.h-svc-pill:last-child { border-right: none; }

.h-hero-bottom {
  position: absolute; bottom: 40px; left: 48px; right: 48px;
  display: flex; align-items: flex-end; justify-content: space-between;
  opacity: 1;
}
.js-ready .h-hero-bottom { opacity: 0; transition: opacity 1s var(--h-ease); }
.js-ready .h-hero-bottom.in { opacity: 1; }
.h-bottom-email {
  font-family: var(--h-font-display); font-size: 14px; font-weight: 500;
  color: var(--h-mid); text-decoration: none; letter-spacing: .02em;
  border-bottom: 1px solid var(--h-border); padding-bottom: 4px;
  transition: color .25s, border-color .25s;
}
.h-bottom-email:hover { color: var(--h-black); border-color: var(--h-black); }
.h-bottom-year { font-size: 11px; color: var(--h-mid); letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 768px) {
  .h-hero { padding: 80px 24px 80px; }
  .h-barcode, .h-stamp { display: none; }
  .h-services-row { flex-wrap: wrap; gap: 12px; }
  .h-svc-pill { border-right: none; padding: 0; border: 1px solid var(--h-border); border-radius: 100px; padding: 5px 14px; }
  .h-hero-bottom { left: 24px; right: 24px; bottom: 24px; }
}

/* 2 CHANGE */
.h-change { background: var(--h-black); color: var(--h-off); border-color: rgba(255,255,255,.15); }
.h-change .h-eyebrow, .h-change .h-body-copy { color: #999991; }
.h-change-intro { min-height: 78svh; display: flex; align-items: center; }
.h-change-ideas { margin-top: 15vh; border-top: 1px solid rgba(255,255,255,.18); }
.h-change-row { display: grid; grid-template-columns: 80px 1fr; gap: clamp(18px,4vw,64px); padding: clamp(35px,6vw,82px) 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.h-change-num { font: 500 11px/1 var(--h-font-display); letter-spacing: .12em; color: #777770; padding-top: 12px; }
.h-change-text { font: 500 clamp(31px,5vw,76px)/1.01 var(--h-font-display); letter-spacing: -.055em; max-width: 1250px; margin: 0; color: var(--h-off); text-wrap: balance; }
.h-change-row:nth-child(3) .h-change-text { font-size: clamp(28px,4.2vw,64px); font-weight: 400; color: #c7c7c0; }

/* 3 STRATEGY */
.h-strategy { overflow: hidden; background: var(--h-white); }
.h-strategy-head { position: sticky; top: 0; min-height: 74svh; display: flex; align-items: center; background: var(--h-white); z-index: 2; }
.h-decision-system { min-height: 120svh; position: relative; display: grid; place-items: center; padding: 15vh 0; }
.h-core { width: min(42vw, 520px); aspect-ratio: 1; border-radius: 50%; background: var(--h-black); color: var(--h-white); display: grid; place-items: center; text-align: center; padding: 40px; font: 600 clamp(24px,3vw,46px)/1.05 var(--h-font-display); letter-spacing: -.045em; position: relative; z-index: 2; }
.h-orbit { position: absolute; border: 1px solid var(--h-border); border-radius: 50%; inset: 50%; transform: translate(-50%,-50%); }
.h-orbit.o1 { width: min(72vw, 900px); height: min(72vw, 900px); }
.h-orbit.o2 { width: min(94vw, 1180px); height: min(94vw, 1180px); }
.h-node { position: absolute; background: var(--h-white); border: 1px solid var(--h-border); border-radius: 999px; padding: 12px 18px; font: 500 clamp(12px,1.2vw,16px)/1 var(--h-font-display); white-space: nowrap; z-index: 3; box-shadow: 0 12px 35px rgba(0,0,0,.05); }
.n1 { top: 13%; left: 19%; }
.n2 { top: 19%; right: 14%; }
.n3 { bottom: 20%; left: 9%; }
.n4 { bottom: 13%; right: 20%; }
.n5 { top: 48%; left: 2%; }
.n6 { top: 45%; right: 1%; }

/* 4 CONNECTION */
.h-departments { background: var(--h-off); overflow: hidden; border-top: 1px solid var(--h-border); }
.h-department-copy { margin: 70px 0 110px auto; }
.h-constellation { position: relative; min-height: 720px; border: 1px solid rgba(10,10,10,.18); border-radius: 28px; overflow: hidden; background: rgba(255,255,255,.2); }
.h-constellation svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-constellation line { stroke: rgba(10,10,10,.2); stroke-width: 1; stroke-dasharray: 4 8; }
.h-center-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: clamp(150px,20vw,250px); aspect-ratio: 1; border-radius: 50%; background: var(--h-black); color: var(--h-white); display: grid; place-items: center; text-align: center; padding: 20px; font: 600 clamp(18px,2vw,28px)/1.08 var(--h-font-display); letter-spacing: -.04em; z-index: 3; }
.h-discipline { position: absolute; font: 500 clamp(16px,2vw,28px)/1 var(--h-font-display); letter-spacing: -.035em; transition: transform .45s var(--h-ease); }
.h-discipline:hover { transform: scale(1.08); }
.d1 { left: 8%; top: 13%; }
.d2 { right: 10%; top: 14%; }
.d3 { left: 5%; top: 49%; }
.d4 { right: 5%; top: 48%; }
.d5 { left: 13%; bottom: 12%; }
.d6 { right: 12%; bottom: 12%; }
.d7 { left: 42%; top: 9%; }
.d8 { left: 41%; bottom: 8%; }
.h-questions { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 90px; border-top: 1px solid rgba(10,10,10,.22); border-left: 1px solid rgba(10,10,10,.22); }
.h-question { min-height: 190px; padding: 28px; border-right: 1px solid rgba(10,10,10,.22); border-bottom: 1px solid rgba(10,10,10,.22); font: 500 clamp(22px,2.4vw,38px)/1.08 var(--h-font-display); letter-spacing: -.045em; display: flex; align-items: flex-end; }
.h-connect { margin-top: 18vh; font: 700 clamp(64px,12vw,185px)/.85 var(--h-font-display); letter-spacing: -.08em; }

/* 5 PERCEPTION */
.h-perception-head { max-width: 1200px; }
.h-touchpoints { margin: 110px 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--h-border); border-left: 1px solid var(--h-border); }
.h-touch { min-height: 180px; padding: 24px; border-right: 1px solid var(--h-border); border-bottom: 1px solid var(--h-border); font: 500 clamp(19px,2vw,30px)/1.08 var(--h-font-display); letter-spacing: -.035em; display: flex; align-items: flex-end; position: relative; overflow: hidden; }
.h-touch::before { content: ""; position: absolute; inset: auto 0 0; height: 0; background: var(--h-black); transition: height .55s var(--h-ease); z-index: 0; }
.h-touch:hover::before { height: 100%; }
.h-touch span { position: relative; z-index: 1; transition: color .35s; }
.h-touch:hover span { color: var(--h-white); }
.h-definition { margin-top: 15vh; display: grid; grid-template-columns: 1fr 2fr; border-top: 1px solid var(--h-border); }
.h-definition-label { padding: 28px 0; font: 500 11px/1 var(--h-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--h-mid); }
.h-definition-copy { padding: 25px 0 80px; font: 600 clamp(36px,5.4vw,82px)/.98 var(--h-font-display); letter-spacing: -.06em; max-width: 1100px; }
.h-definition-copy em { font-style: normal; color: var(--h-grey); }

/* 6 THREE TERRITORIES */
.h-territories { background: #0c0c0c; color: var(--h-off); border-top: 1px solid rgba(255,255,255,.1); }
.h-territories .h-eyebrow, .h-territories .h-body-copy { color: #8e8e88; }
.h-territory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.18); margin-top: 100px; }
.h-territory { min-height: 690px; background: #0c0c0c; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.h-territory h3 { font: 600 clamp(36px,4.6vw,70px)/.95 var(--h-font-display); letter-spacing: -.06em; margin: 0; position: relative; z-index: 2; }
.h-territory p { max-width: 360px; color: #9a9a93; font-size: 18px; line-height: 1.45; position: relative; z-index: 2; margin-top: 0; }
.h-art { position: absolute; inset: 12% 8% 24%; display: grid; place-items: center; transition: transform .8s var(--h-ease); }
.h-art svg { width: 100%; height: 100%; overflow: visible; }
.h-art .h-line { stroke: var(--h-off); stroke-width: 1.25; fill: none; opacity: .78; }
.h-art .h-softline { stroke: #777770; stroke-width: 1; fill: none; opacity: .65; }
.h-art .h-fill { fill: var(--h-off); }
.h-territory:hover .h-art { transform: scale(1.025) rotate(.5deg); }

/* 7 CASES */
.h-cases { background: #ecece6; }
.h-case-list { margin-top: 90px; border-top: 1px solid var(--h-border); }
.h-case { display: grid; grid-template-columns: 90px minmax(0,1fr) minmax(320px,.8fr); gap: 40px; padding: 48px 0; border-bottom: 1px solid var(--h-border); align-items: center; text-decoration: none; color: inherit; }
.h-case-num { font: 500 11px/1 var(--h-font-display); letter-spacing: .12em; color: var(--h-mid); }
.h-case h3 { font: 600 clamp(34px,4.8vw,72px)/.96 var(--h-font-display); letter-spacing: -.06em; margin: 0 0 18px; }
.h-case p { max-width: 600px; color: var(--h-mid); font-size: 18px; line-height: 1.45; margin:0; }
.h-case-visual { aspect-ratio: 16/11; background: #d9d9d1; border-radius: 22px; overflow: hidden; position: relative; }
.h-case-visual svg { width: 100%; height: 100%; transition: transform .9s var(--h-ease); }
.h-case:hover .h-case-visual svg { transform: scale(1.045); }
.h-case-tag { display: inline-flex; border: 1px solid var(--h-border); border-radius: 999px; padding: 8px 12px; font: 500 11px/1 var(--h-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--h-mid); margin-bottom: 22px; }

/* 8 PERSON */
.h-person { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(50px,8vw,130px); align-items: center; }
.h-portrait { aspect-ratio: 4/5; background: #dcdcd5; border-radius: 28px; overflow: hidden; position: relative; }
.h-portrait svg { width: 100%; height: 100%; }
.h-person-copy .h-poster { margin-bottom: 50px; }
.h-person-copy p { font-size: clamp(19px,1.7vw,27px); line-height: 1.42; color: var(--h-mid); max-width: 700px; margin-bottom: 1rem; }
.h-person-meta { margin-top: 55px; border-top: 1px solid var(--h-border); }
.h-meta-row { display: flex; justify-content: space-between; gap: 30px; padding: 18px 0; border-bottom: 1px solid var(--h-border); font-size: 14px; }
.h-meta-row span:first-child { color: var(--h-mid); }

/* 9 METHOD */
.h-method { background: #d8d8d0; border-top: 1px solid var(--h-border); }
.h-method-grid { margin-top: 100px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(9,9,9,.2); border-left: 1px solid rgba(9,9,9,.2); }
.h-step { min-height: 420px; padding: 28px; border-right: 1px solid rgba(9,9,9,.2); border-bottom: 1px solid rgba(9,9,9,.2); display: flex; flex-direction: column; justify-content: space-between; transition: background .45s var(--h-ease), color .45s var(--h-ease); }
.h-step:hover { background: var(--h-black); color: var(--h-white); }
.h-step-num { font: 500 11px/1 var(--h-font-display); letter-spacing: .12em; }
.h-step h3 { font: 600 clamp(32px,3.4vw,54px)/.95 var(--h-font-display); letter-spacing: -.055em; margin: 0 0 18px; }
.h-step p { font-size: 17px; line-height: 1.45; color: var(--h-mid); transition: color .45s; margin:0; }
.h-step:hover p { color: var(--h-grey); }
.h-method-close { margin-top: 16vh; font: 700 clamp(56px,9vw,142px)/.88 var(--h-font-display); letter-spacing: -.075em; }

/* 10 CONTACT */
.h-contact { background: var(--h-black); color: var(--h-white); border-top: 1px solid rgba(255,255,255,.1); }
.h-contact .h-eyebrow { color: #777770; }
.h-contact-top { max-width: 1300px; }
.h-contact-link { font: 600 clamp(54px,9vw,140px)/.9 var(--h-font-display); letter-spacing: -.07em; text-decoration: none; display: block; margin-top: 80px; }
.h-contact-link span { border-bottom: 4px solid currentColor; }
.h-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 90px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.18); }
.h-contact-copy { color: #9b9b95; font-size: 18px; line-height: 1.5; max-width: 520px; }
.h-contact-actions { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.h-contact-actions a { font: 500 18px/1.2 var(--h-font-display); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 6px; }

/* Responsive adjustments for 10 blocks */
@media (max-width: 980px) {
  .h-territory-grid { grid-template-columns: 1fr; }
  .h-territory { min-height: 520px; }
  .h-case { grid-template-columns: 60px 1fr; }
  .h-case-visual { grid-column: 2; }
  .h-person { grid-template-columns: 1fr; }
  .h-portrait { max-width: 720px; }
  .h-method-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .h-change-row { grid-template-columns: 38px 1fr; }
  .h-strategy-head { position: relative; min-height: 20vh; margin-bottom: 2rem; }
  .h-decision-system { min-height: 92svh; padding: 5vh 0; }
  .h-core { width: 52vw; }
  .h-orbit.o1 { width: 80vw; height: 80vw; }
  .h-orbit.o2 { width: 112vw; height: 112vw; }
  .h-node { padding: 9px 12px; }
  .n1 { top: 16%; left: 2%; }
  .n2 { top: 20%; right: 0; }
  .n3 { bottom: 18%; left: 0; }
  .n4 { bottom: 15%; right: 0; }
  .n5 { top: 48%; left: -4%; }
  .n6 { top: 48%; right: -4%; }
  .h-constellation { min-height: 620px; }
  .h-discipline { font-size: 16px; }
  .d7 { left: 35%; }
  .d8 { left: 34%; }
  .h-questions { grid-template-columns: 1fr 1fr; }
  .h-touchpoints { grid-template-columns: 1fr 1fr; }
  .h-definition { grid-template-columns: 1fr; }
  .h-definition-copy { padding-top: 0; }
  .h-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .h-questions, .h-touchpoints, .h-method-grid { grid-template-columns: 1fr; }
  .h-question, .h-touch { min-height: 125px; }
  .h-constellation { min-height: 560px; }
  .h-center-label { width: 140px; }
  .d1 { left: 5%; top: 8%; }
  .d2 { right: 5%; top: 12%; }
  .d3 { left: 2%; top: 38%; }
  .d4 { right: 2%; top: 42%; }
  .d5 { left: 5%; bottom: 13%; }
  .d6 { right: 4%; bottom: 9%; }
  .d7 { left: 37%; top: 25%; }
  .d8 { left: 35%; bottom: 28%; }
  .h-case { grid-template-columns: 1fr; }
  .h-case-visual { grid-column: 1; }
  .h-case-num { margin-bottom: -20px; }
}