.hp-modal__paragraph--purpose,
.hp-modal__integration{
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 400;
  letter-spacing: normal;
}

.hp-modal__purpose-thumb{
  float: right;
  width: clamp(220px, 40vw, 420px);
  height: clamp(160px, 21vw, 250px);
  margin-left: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(12px, 1.8vw, 18px);
  border-radius: clamp(12px, 1.8vw, 18px);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.hp-modal__purpose-thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.hp-modal__section-label {
  display: inline-block;
  margin-right: clamp(6px, 0.6vw, 12px);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: none;
}

.hp-modal__integration{
  clear: both;
  margin-top: clamp(72px, 6vw, 140px);
  padding-top: clamp(28px, 3.4vw, 36px);
  border-top: 1px solid rgba(255,255,255,0.12);
  width: 100%;
}

.hp-modal__integration-intro{
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.hp-modal__body strong{
  font-weight: 800;
}

.hp-modal__dialog::-webkit-scrollbar{
  width: 12px;
}

.hp-modal__dialog::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
}

.hp-modal__dialog::-webkit-scrollbar-thumb{
  background: var(--modal-scrollbar);
  border-radius: 12px;
  min-height: 40px;
}

.hp-modal__dialog::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.8);
}

@media (max-width: 1024px){
  .hp-modal__paragraph--purpose .hp-modal__purpose-thumb{
    display: none;
  }
}

/* Modal text serif font override */
.hp-modal__body,
.hp-modal__paragraph,
.hp-modal__paragraph--purpose, 
.hp-modal__integration,
.hp-modal__integration-intro {
  font-family: 'Nixie One', serif !important;
}

/* Ensure all modal content uses serif font */
.hp-modal__body p,
.hp-modal__text,
.hp-modal__section-label {
  font-family: 'Nixie One', serif !important;
}

/* AGGRESSIVE MOBILE MODAL FIXES - Apply to all narrow screens */
@media (max-width: 900px) {
  /* Force all modal text to be serif and visible */
  .hp-modal *,
  .hp-modal__dialog *,
  .hp-modal__body *,
  .hp-modal__paragraph,
  .hp-modal__body p,
  .hp-modal__text p {
    font-family: 'Nixie One', serif !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Modal sizing for narrow screens */
  .hp-modal__dialog {
    width: calc(100% - 30px) !important;
    max-height: 85vh !important;
    min-height: 300px !important;
    padding: 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 16px !important;
  }
  
  /* Triangle image smaller on narrow screens */
  .ihp-triangle img {
    transform: scale(0.7) !important;
  }
}

/* SUPER AGGRESSIVE MODAL FIXES - Force visibility and serif on ALL elements */
.hp-modal__body,
.hp-modal__body *,
.hp-modal__paragraph,
.hp-modal__paragraph *,
.hp-modal__text,
.hp-modal__text *,
.hp-modal__integration,
.hp-modal__integration *,
.hp-modal__integration-intro,
.hp-modal__integration-intro * {
  font-family: 'Nixie One', serif !important;
  color: rgba(247,250,255,0.92) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* MODAL VISIBILITY AND MOBILE FIXES */
.hp-modal {
  display: flex !important;
}

.hp-modal--visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Triangle image - make it 25% smaller on ALL mobile devices */
@media (max-width: 768px) {
  .ihp-triangle img {
    transform: scale(0.75) !important;
  }
}

@media (max-width: 480px) {
  .ihp-triangle img {
    transform: scale(0.65) !important;
  }
  
  /* Mobile modal fixes */
  .hp-modal__dialog {
    width: calc(100vw - 20px) !important;
    max-height: 85vh !important;
    min-height: 300px !important;
    padding: 15px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
  }
  
  .hp-modal__body {
    max-height: none !important;
  }
}

/* Font stack aligned with Members page */
@font-face {
  font-family: 'Blinker';
  src: url('https://static.igem.wiki/teams/5836/fonts/blinker/blinker-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('https://static.igem.wiki/teams/5836/fonts/fraunces/fraunces-72pt-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nixie One';
  src: url('') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Theme */
:root{
  --bg: #0b1320;              /* your blue */
  --gold: #d7af6b;

  --font-body: "Blinker", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Fraunces", "Blinker", system-ui, sans-serif;

  --gutter: clamp(28px, 5.5vw, 64px);
  --panel-bg: #6c7076;
  --panel-text: #e8ecef;
  --panel-radius: 32px;

  /* push the ribbon WAY up so it appears immediately after a tiny scroll */
  --ribbon-nudge: -128px;
  --panel-gap: clamp(6px, 1vh, 12px);

  /* hotspot colors */
  --entre-blue: #1c3f60;   /* dark azure */
  --bio-blue:   #368fe2;   /* bold azure */
  --comm-blue:  #66a8ec;   /* vibrant blue */
  --dev-yellow: #a8761e;   /* very dark yellow */
  --dry-yellow: #e6cc96;   /* very light yellow */
  --des-yellow: #e6a31b;   /* medium yellow */
  --clin-red:   #8a3341;   /* magnifying glass wedge */
  --med-pink:   #c71f45;   /* stethoscope wedge */
  --surv-red:   #6f1524;   /* very dark red */

  /* lines & accents */
  --wire: #6f1524;         /* burgundy path */
  --ink: #fff;

  /* cards */
  --card-bg: #0e1828;      /* deep blue card (no white backgrounds) */
  --card-br: rgba(255,255,255,.12);
  --card-shadow: 0 18px 44px rgba(0,0,0,.45);
}

/* Base */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

/* Override the global body padding and container for human-practices page */
body{
  margin: 0;
  background: var(--bg);
  color: var(--gold);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-body);
  padding-top: 0 !important; /* Remove the global 90px padding */
}

/* Make container full width and remove padding for human-practices page */
.container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--bg) !important;
}

/* ── FULL-BLEED HERO ── */
.ihp-hero{
  position: relative;
  width: 100vw;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  min-height: 80vh; /* Reduced from 100svh to 80vh */
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
  padding-top: 80px; /* Account for the fixed navbar */
  box-sizing: border-box;
}
.ihp-hero::after{
  content: "";
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(11,19,32,0.38) 0%, rgba(11,19,32,0.55) 65%, rgba(11,19,32,0.68) 100%);
  z-index: 1;
}
.ihp-hero__video{
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.ihp-hero__video iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* maintain 16:9 ratio */
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}
.ihp-hero__title-wrap{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(75vw, 1000px);
  pointer-events: none;
  z-index: 2;
}
.ihp-title{
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.21rem, 8.5vw, 6.12rem);
  line-height: 1.05;
  letter-spacing: 0.10em;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
  text-shadow: 0 6px 24px rgba(0,0,0,.55);
  animation: floatY 6s ease-in-out infinite alternate;
}
.no-break{ white-space: nowrap; }
@keyframes floatY{ from{transform:translateY(-18px);} to{transform:translateY(18px);} }
@media (prefers-reduced-motion: reduce){ .ihp-title{ animation:none; } }

/* ── SECTION BELOW HERO ── */
.ihp-section{ margin: 0 auto 4vh; padding: 0; } /* Reduced bottom margin from 8vh to 4vh */

/* Icons ribbon — sits very high so it appears immediately on scroll */
.ihp-ribbon{
  width: min(1080px, calc(100% - (2 * var(--gutter))));
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--ribbon-nudge);
  display: grid;
  place-items: center;
  position: relative;
}
.ihp-ribbon img{
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  user-select: none; -webkit-user-drag: none;
}

/* =========================
   RIBBON HOTSPOTS (for the icons bar)
   ========================= */
.ihp-ribbon-hotspot{
  position: absolute;
  z-index: 4;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  height: 60%;
  bottom: 0;
}

/* Ribbon Labels */
.ihp-ribbon-label{
  position: absolute;
  z-index: 5;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .04em;
  font-size: clamp(11px, 0.9vw, 14px);
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 8px 16px rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  bottom: 55%;
  transform: translate(-50%, 0) scale(0.85);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 1. Entrepreneurial Strategies (dark blue) */
.ihp-ribbon-hotspot--entre{ left: 0%; width: 11.1%; }
.ihp-ribbon-label--entre{ background: var(--entre-blue); left: 5.5%; }
.ihp-ribbon-hotspot--entre:hover ~ .ihp-ribbon-label--entre,
.ihp-ribbon-hotspot--entre:focus-visible ~ .ihp-ribbon-label--entre{
  opacity:1; visibility:visible; transform: translate(-50%, 0) scale(1);
}

/* 2. Bioethics (medium blue) */
.ihp-ribbon-hotspot--bio{ left: 11.1%; width: 11.1%; }
.ihp-ribbon-label--bio{ background: var(--bio-blue); left: 16.65%; }
.ihp-ribbon-hotspot--bio:hover ~ .ihp-ribbon-label--bio,
.ihp-ribbon-hotspot--bio:focus-visible ~ .ihp-ribbon-label--bio{
  opacity:1; visibility:visible; transform: translate(-50%, 0) scale(1);
}

/* 3. Engaging with Community (ultra light blue) */
.ihp-ribbon-hotspot--comm{ left: 22.2%; width: 11.1%; }
.ihp-ribbon-label--comm{ background: var(--comm-blue); left: 27.75%; }
.ihp-ribbon-hotspot--comm:hover ~ .ihp-ribbon-label--comm,
.ihp-ribbon-hotspot--comm:focus-visible ~ .ihp-ribbon-label--comm{
  opacity:1; visibility:visible; transform: translate(-50%, 0) scale(1);
}

/* 4. Through Survivor Eyes (very dark red) */
.ihp-ribbon-hotspot--surv{ left: 33.3%; width: 11.1%; }
.ihp-ribbon-label--surv{ background: var(--surv-red); left: 38.85%; }
.ihp-ribbon-hotspot--surv:hover ~ .ihp-ribbon-label--surv,
.ihp-ribbon-hotspot--surv:focus-visible ~ .ihp-ribbon-label--surv{
  opacity:1; visibility:visible; transform: translate(-50%, 0) scale(1);
}

/* 5. Clinician Insights (magnifying glass red) */
.ihp-ribbon-hotspot--clin{ left: 44.4%; width: 11.1%; }
.ihp-ribbon-label--clin{ background: #8a3341; left: 49.95%; }
.ihp-ribbon-hotspot--clin:hover ~ .ihp-ribbon-label--clin,
.ihp-ribbon-hotspot--clin:focus-visible ~ .ihp-ribbon-label--clin{
  opacity:1; visibility:visible; transform: translate(-50%, 0) scale(1);
}

/* 6. Medical Experts (stethoscope pink) */
.ihp-ribbon-hotspot--med{ left: 55.5%; width: 11.1%; }
.ihp-ribbon-label--med{ background: var(--med-pink); left: 61.05%; }
.ihp-ribbon-hotspot--med:hover ~ .ihp-ribbon-label--med,
.ihp-ribbon-hotspot--med:focus-visible ~ .ihp-ribbon-label--med{
  opacity:1; visibility:visible; transform: translate(-50%, 0) scale(1);
}

/* 7. Designing Experiments (medium yellow) */
.ihp-ribbon-hotspot--design{ left: 66.6%; width: 11.1%; }
.ihp-ribbon-label--design{ background: var(--des-yellow); left: 72.15%; }
.ihp-ribbon-hotspot--design:hover ~ .ihp-ribbon-label--design,
.ihp-ribbon-hotspot--design:focus-visible ~ .ihp-ribbon-label--design{
  opacity:1; visibility:visible; transform: translate(-50%, 0) scale(1);
}

/* 8. Dry Lab (very light yellow) */
.ihp-ribbon-hotspot--dry{ left: 77.7%; width: 11.1%; }
.ihp-ribbon-label--dry{ background: var(--dry-yellow); color: #0b0f17; left: 83.25%; }
.ihp-ribbon-hotspot--dry:hover ~ .ihp-ribbon-label--dry,
.ihp-ribbon-hotspot--dry:focus-visible ~ .ihp-ribbon-label--dry{
  opacity:1; visibility:visible; transform: translate(-50%, 0) scale(1);
}

/* 9. Building Device (very dark yellow) */
.ihp-ribbon-hotspot--device{ left: 88.8%; width: 11.2%; }
.ihp-ribbon-label--device{ background: var(--dev-yellow); left: 94.4%; }
.ihp-ribbon-hotspot--device:hover ~ .ihp-ribbon-label--device,
.ihp-ribbon-hotspot--device:focus-visible ~ .ihp-ribbon-label--device{
  opacity:1; visibility:visible; transform: translate(-50%, 0) scale(1);
}

/* Big rounded panel directly under ribbon (kept for your top board) */
.ihp-panel{
  margin-left: var(--gutter);
  margin-right: var(--gutter);
  margin-top: clamp(0px, 0.8vw, 12px);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  min-height: unset;
  overflow: visible;
  color: var(--panel-text);
}
.ihp-panel__inner{
  max-width: min(96vw, 960px);
  margin: 0 auto;
  padding: clamp(12px, 3.2vw, 28px) clamp(14px, 3vw, 32px);
  display: block;
}
.ihp-panel__text{
  max-width: 920px;
  margin: 0 auto;
}
.ihp-panel__inner p{
  margin: 0 0 1.1em;
  text-align: left;
  font-family: 'Nixie One', serif !important;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  line-height: 1.72;
  color: #ffffff !important;
}
.ihp-panel__inner p:last-child{
  margin-bottom: 0;
}
.ihp-panel__text .ihp-overview{
  margin: 1.6em 0 1.8em;
  padding-left: 1.4em;
  color: #ffffff !important;
  font-family: 'Nixie One', serif !important;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.74;
}
.ihp-panel__text .ihp-overview > li{
  margin-bottom: 1.6em;
  color: #ffffff !important;
  font-family: 'Nixie One', serif !important;
}
.ihp-panel__text .ihp-overview > li:last-child{
  margin-bottom: 0;
}
.ihp-panel__text .ihp-overview__intro{
  margin: 0 0 0.9em;
}
.ihp-panel__text .ihp-overview__intro strong{
  display: block;
  margin-bottom: 0.25em;
}
.ihp-panel__text .ihp-overview__intro span{
  display: block;
  font-weight: 400;
  color: #ffffff !important;
  font-family: 'Nixie One', serif !important;
}
.ihp-panel__text .ihp-overview__sublist{
  margin: 0;
  padding-left: 1.1em;
  list-style: circle;
}
.ihp-panel__text .ihp-overview__sublist li{
  margin-bottom: 0.75em;
  color: #ffffff !important;
  font-family: 'Nixie One', serif !important;
}
.ihp-panel__text .ihp-overview__sublist li:last-child{
  margin-bottom: 0;
}
.ihp-panel__text .hp-tag{
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ihp-panel__text .hp-tag--category{
  color: #ffffff;
}
.ihp-panel__text .hp-tag--surv{ color: var(--surv-red); }
.ihp-panel__text .hp-tag--med{ color: var(--med-pink); }
.ihp-panel__text .hp-tag--clin{ color: var(--clin-red); }
.ihp-panel__text .hp-tag--design{ color: var(--des-yellow); }
.ihp-panel__text .hp-tag--dry{ color: var(--dry-yellow); }
.ihp-panel__text .hp-tag--device{ color: var(--dev-yellow); }
.ihp-panel__text .hp-tag--comm{ color: var(--comm-blue); }
.ihp-panel__text .hp-tag--bio{ color: var(--bio-blue); }
.ihp-panel__text .hp-tag--entre{ color: var(--entre-blue); }

/* ── Direction-aware reveal ── */
.reveal{
  opacity: 0;
  transform: translateY(60px);
  transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .8s ease, filter .8s ease;
  filter: blur(4px);
  will-change: transform, opacity, filter;
}
.reveal.reveal--in{
  opacity: 1;
  transform: translateY(0);
  filter: none;
}
.reveal.reveal--out-up{
  opacity: 0;
  transform: translateY(-60px);
  filter: blur(4px);
}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.reveal--in, .reveal.reveal--out-up{
    opacity: 1; transform:none; filter:none; transition:none;
  }
}

/* Mobile tweaks */
@media (max-width: 900px){
  :root{
    --ribbon-nudge: -96px;
    --panel-gap: 10px;
  }
  .ihp-title{ font-size: clamp(1.7rem, 7.65vw, 3.4rem); line-height: 1; }
  .ihp-panel{ min-height: auto; }
}

@media (max-width: 600px){
  :root{
    --ribbon-nudge: -40px;
  }
  .ihp-hero{
    min-height: 60vh !important;
  }
  .ihp-ribbon{
    width: 130vw !important;
    max-width: none !important;
    margin-left: calc(50% - 65vw) !important;
    margin-right: calc(50% - 65vw) !important;
    overflow: visible;
  }
  .ihp-ribbon img{
    transform: scale(1.2);
    transform-origin: center;
  }
  .ihp-panel{
    margin-left: 5vw !important;
    margin-right: 5vw !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Triangle block */
.ihp-triangle{
  width: min(1200px, calc(100% - (2 * var(--gutter))));
  margin: clamp(16px, 4vh, 36px) auto 8vh;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;

  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: clamp(12px, 4vh, 40px) !important;
  margin-bottom: 12vh !important;

  position: relative;
}
.ihp-triangle img{
  width: 100% !important;
  height: auto !important;
  display: block;
}
@media (min-width: 900px){
  .ihp-triangle img{
    transform: scale(.95);
    transform-origin: center;
  }
}

@media (max-width: 600px){
  .ihp-triangle{
    width: 95vw !important;
    max-width: none !important;
    margin-left: calc(50% - 47.5vw) !important;
    margin-right: calc(50% - 47.5vw) !important;
    margin-top: clamp(20px, 6vh, 60px) !important;
    margin-bottom: 8vh !important;
    filter: none !important;
    opacity: 1 !important;
    display: flex;
    justify-content: center;
  }
  .ihp-triangle img{
    width: 100% !important;
    height: auto !important;
    transform: scale(0.75) !important;
    transform-origin: center !important;
    filter: none !important;
    object-fit: contain;
  }
  .ihp-triangle.reveal{
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .ihp-triangle.reveal.reveal--out-up,
  .ihp-triangle.reveal.reveal--in{
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* =========================
   HOTSPOTS (interactive areas) - 9 individual triangles
   ========================= */

  .hp-modal--integration-only .hp-modal__inner{
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-modal--integration-only .hp-modal__media{
    display: none;
  }

  .hp-modal--integration-only .hp-modal__body{
    padding: 0;
  }
.ihp-hotspot{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
}
.ihp-label{
  position: absolute;
  z-index: 3;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: .06em;
  font-size: clamp(14px, 1.2vw, 18px);
  padding: 12px 18px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 12px 24px rgba(0,0,0,.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ihp-hotspot--comm{ clip-path: polygon(56% 4%, 76% 40%, 64% 42%, 52% 43%, 45% 34%, 48% 12%); }
.ihp-label--comm{
  background: var(--comm-blue);
  left: 50%;
  top: 18%;
}
.ihp-hotspot--bio{ clip-path: polygon(46% 38%, 74% 39%, 67% 45%, 58% 48%, 51% 49%, 43% 46%, 38% 41%); }
.ihp-label--bio{
  background: var(--bio-blue);
  left: 46%;
  top: 43%;
}
.ihp-hotspot--entre{ clip-path: polygon(22% 14%, 42% 30%, 40% 52%, 31% 69%, 9% 52%, 15% 29%); }
.ihp-label--entre{
  background: var(--entre-blue);
  left: 36%;
  top: 50%;
}
.ihp-hotspot--surv{ clip-path: polygon(62% 44%, 78% 36%, 93% 47%, 88% 60%, 73% 64%, 60% 59%, 54% 51%, 56% 45%); }
.ihp-label--surv{
  background: var(--surv-red);
  left: 58%;
  top: 44%;
}
.ihp-hotspot--clin{ clip-path: polygon(64% 54%, 83% 54%, 92% 64%, 82% 76%, 69% 70%, 60% 61%); }
.ihp-label--clin{
  background: var(--clin-red);
  left: 65%;
  top: 58%;
}
.ihp-hotspot--med{ clip-path: polygon(63% 67%, 80% 75%, 96% 89%, 86% 100%, 61% 88%, 56% 76%); }
.ihp-label--med{
  background: var(--med-pink);
  left: 69%;
  top: 76%;
}
.ihp-hotspot--design{ clip-path: polygon(46% 55%, 63% 53%, 58% 68%, 41% 64%); }
.ihp-label--design{
  background: var(--des-yellow);
  color: #0b0f17;
  left: 52%;
  top: 60%;
}
.ihp-hotspot--dry{ clip-path: polygon(41% 64%, 58% 68%, 54% 82%, 32% 79%); }
.ihp-label--dry{
  background: var(--dry-yellow);
  color: #0b0f17;
  left: 43%;
  top: 72%;
}
.ihp-hotspot--device{ clip-path: polygon(34% 76%, 56% 79%, 37% 94%, 16% 86%); }
.ihp-label--device{
  background: var(--dev-yellow);
  left: 29%;
  top: 81%;
}

.ihp-hotspot--comm:hover ~ .ihp-label--comm,
.ihp-hotspot--comm:focus-visible ~ .ihp-label--comm,
.ihp-hotspot--bio:hover ~ .ihp-label--bio,
.ihp-hotspot--bio:focus-visible ~ .ihp-label--bio,
.ihp-hotspot--entre:hover ~ .ihp-label--entre,
.ihp-hotspot--entre:focus-visible ~ .ihp-label--entre,
.ihp-hotspot--surv:hover ~ .ihp-label--surv,
.ihp-hotspot--surv:focus-visible ~ .ihp-label--surv,
.ihp-hotspot--clin:hover ~ .ihp-label--clin,
.ihp-hotspot--clin:focus-visible ~ .ihp-label--clin,
.ihp-hotspot--med:hover ~ .ihp-label--med,
.ihp-hotspot--med:focus-visible ~ .ihp-label--med,
.ihp-hotspot--design:hover ~ .ihp-label--design,
.ihp-hotspot--design:focus-visible ~ .ihp-label--design,
.ihp-hotspot--dry:hover ~ .ihp-label--dry,
.ihp-hotspot--dry:focus-visible ~ .ihp-label--dry,
.ihp-hotspot--device:hover ~ .ihp-label--device,
.ihp-hotspot--device:focus-visible ~ .ihp-label--device{
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 1024px){
  .ihp-hotspot {
    display: block !important;
  }
  
  .ihp-label{
    display: none !important;
  }
  
  /* Force triangle to be even smaller on tablets and phones */
  .ihp-triangle img {
    transform: scale(0.65) !important;
  }
  
  /* Ensure modals work on all narrow screens */
  .hp-modal__dialog {
    width: calc(100% - 20px) !important;
    max-height: 80vh !important;
    padding: 15px !important;
    overflow-y: auto !important;
  }
}








/* ===== JOURNEY (tube-only, SUPER LONG) ===== */
.journey{
  position: relative;
  width: min(1200px, calc(100% - (2 * var(--gutter))));
  margin: 0 auto 0;
  min-height: 11500px;  /* huge canvas so nothing clips */
  overflow: visible;
}
.journey__svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* 3-layer tube */
.j-back{
  fill: none;
  stroke: rgba(0,0,0,.45);
  stroke-width: 116;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#tubeShadow);
  opacity: .35;
}
.j-rim{
  fill: none;
  stroke: rgba(9,12,18,.8);
  stroke-width: 100;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .55;
}
.j-tube{
  fill: none;
  stroke: url(#tubeGrad);
  stroke-width: 92;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px){
  .journey{ min-height: 9800px; }
}

/* Pull the SVG up to remove internal top padding */
.journey__svg{ top:-160px; }     /* tweak: -80 … -260 */




/* pull triangle and tube closer together */
.ihp-triangle{ margin-bottom: -6vh !important; }

/* yank the tube section up even more */
.journey{ margin-top: -16vh; }      /* was -8vh */

/* pull the SVG artwork up inside its section */
.journey__svg{ top: -520px; }       /* was -260px */

/* optional: if desktop triangle image had extra slack from scaling */
@media (min-width: 900px){
  .ihp-triangle img{ transform: none !important; }
}

/* === Journey textbox (card) === */
.jbox{
  position: absolute;
  left: var(--x, 1000px);
  top: var(--y, 780px);
  transform: translate(-50%, -50%);
  width: clamp(320px, 34vw, 620px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  background: transparent;
  pointer-events: auto;
}
.jbox__hd{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  background: var(--gold);            /* #d7af6b */
  color: #0b1320;
}
.jbox__title{
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(1.2rem, 2.2vw, 2.25rem);
}
.jbox__body{
  background: #ffffff;
  color: #0b0f17;
  padding: clamp(18px, 2.6vw, 28px);
  min-height: 220px;                  /* big white area like your mock */
}

/* optional color variants if you add more later */
.jbox--dry .jbox__hd{ background: var(--gold); }     /* yellow/tan */
.jbox--human .jbox__hd{ background: #1c3f60; color:#e9f2ff; } /* blue */
.jbox--wet .jbox__hd{ background: #6e0d25; color:#fff; }      /* red */

.jbox__hd.jbox__hd--red{
  background: #6e0d25;
  color: #fff;
}

.jbox__hd.jbox__hd--med{
  background: var(--med-pink);
  color: #fff5f8;
}

.jbox__hd.jbox__hd--clin{
  background: var(--clin-red);
  color: #fff4f7;
}

.jbox__hd.jbox__hd--yellow{
  background: var(--gold);
  color: #0b0f17;
}

.jbox__hd.jbox__hd--blue{
  background: #1c3f60;
  color: #e9f2ff;
}

/* mobile reposition, keep it readable */
@media (max-width: 900px){
  .jbox{
    left: 45%;
    top: 980px;                       /* adjust if needed */
    width: min(88vw, 560px);
  }

  .jbox.jbox--dry {
    top: 220px;
  }
  
  /* Reduce journey section height for mobile */
  .journey{ 
    min-height: 8500px; 
    margin-top: -12vh;
  }
  
  /* Adjust SVG positioning for mobile */
  .journey__svg{ 
    top: -420px;
  }
}

/* iPhone 14 Pro specific adjustments (393px width) - EXACT proportional scaling */
@media (max-width: 600px){
  /* Add more space between triangle and journey section */
  .ihp-triangle{
    margin-bottom: 8vh !important; /* Increase from default -6vh to +8vh */
  }
  
  /* Journey section - scale proportionally from 1200px desktop to 393px mobile */
  .journey{ 
    width: 100vw;
    margin-top: 4vh; /* Change from -8vh to +4vh to add more spacing */
    /* Scale height proportionally: 11500px * (393/1200) = 3768px */
    min-height: 3768px;
  }
  
  /* SVG maintains exact proportions */
  .journey__svg{ 
    top: -171px; /* -520px * (393/1200) = -171px */
    width: 100%;
    left: 0;
  }
  
  /* Scale journey dots proportionally */
  .journey-dot{
    /* Scale size: 120px * (393/1200) = 39px, but keep readable at 60px */
    --size: 60px !important;
    border-width: 2px;
    overflow: hidden;
  }
  
  .journey-dot__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
  
  /* Make first circle's tooltip appear to the right instead of up */
  .journey-dot[style*="220px"][style*="852px"] .journey-dot__tooltip {
    bottom: auto !important;
    top: 50% !important;
    left: 100% !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    margin-left: 10px !important;
    margin-bottom: 0 !important;
  }
  
  /* Scale textboxes proportionally - keep same shape but make much smaller */
  .jbox{
    width: min(90vw, 280px) !important; /* Keep original proportional width */
    position: absolute !important;
    z-index: 10 !important;
    transform: translate(-50%, -50%) scale(0.55) !important; /* Scale down to 55% while keeping exact shape */
    transform-origin: center !important;
  }
  
  /* EXACT proportional positioning for textboxes */
  /* Desktop: --x:155px, --y:400px -> approx Mobile 51px, 131px */
  .jbox[style*="155px"][style*="400px"] { 
    left: 80px !important; /* Slightly to the right of proportional 51px */
    top: 131px !important; /* 400*393/1200 */
  }
  /* Desktop: 550px -> Mobile: 180px */
  .jbox[style*="550px"][style*="2780px"] { 
    left: 180px !important; 
    top: 881px !important; /* Lifted up by 30px from 911px */
  }
  /* Desktop: 780px -> Mobile: 256px */
  .jbox[style*="780px"][style*="3510px"] { 
    left: 256px !important; 
    top: 1121px !important; /* Lifted up by 30px from 1151px */
  }
  .jbox[style*="550px"][style*="4210px"] { 
    left: 180px !important; 
    top: 1349px !important; /* Lifted up by 30px from 1379px */
  }
  .jbox[style*="550px"][style*="5630px"] { 
    left: 180px !important; 
    top: 1815px !important; /* Lifted up by 30px from 1845px */
  }
  .jbox[style*="780px"][style*="6345px"] { 
    left: 256px !important; 
    top: 2050px !important; /* Lifted up by 30px from 2080px */
  }
  .jbox[style*="550px"][style*="8480px"] { 
    left: 180px !important; 
    top: 2751px !important; /* Lifted up by 30px from 2781px */
  }
  .jbox[style*="780px"][style*="9200px"] { 
    left: 256px !important; 
    top: 2987px !important; /* Lifted up by 30px from 3017px */
  }
  .jbox[style*="550px"][style*="9900px"] { 
    left: 180px !important; 
    top: 3217px !important; /* Lifted up by 30px from 3247px */
  }
  
  /* EXACT proportional positioning for journey dots */
  /* Example: Desktop 220px,852px -> Mobile 72px,279px */
  .journey-dot[style*="220px"][style*="852px"] { 
    left: 72px !important;  /* 220*393/1200 */
    top: 279px !important;  /* 852*393/1200 */
  }
  .journey-dot[style*="980px"][style*="950px"] { 
    left: 321px !important; /* 980*393/1200 */
    top: 311px !important;  /* 950*393/1200 */
  }
  .journey-dot[style*="980px"][style*="1535px"] { 
    left: 321px !important; 
    top: 503px !important;  /* 1535*393/1200 */
  }
  .journey-dot[style*="240px"][style*="1642px"] { 
    left: 79px !important;  /* 240*393/1200 */
    top: 538px !important;  /* 1642*393/1200 */
  }
  .journey-dot[style*="270px"][style*="2290px"] { 
    left: 88px !important;  /* 270*393/1200 */
    top: 751px !important;  /* 2290*393/1200 */
  }
  .journey-dot[style*="980px"][style*="2365px"] { 
    left: 321px !important; 
    top: 775px !important;  /* 2365*393/1200 */
  }
  .journey-dot[style*="980px"][style*="3005px"] { 
    left: 321px !important; 
    top: 985px !important;  /* 3005*393/1200 */
  }
  .journey-dot[style*="260px"][style*="3110px"] { 
    left: 85px !important;  /* 260*393/1200 */
    top: 1019px !important; /* 3110*393/1200 */
  }
  .journey-dot[style*="300px"][style*="3745px"] { 
    left: 98px !important;  /* 300*393/1200 */
    top: 1227px !important; /* 3745*393/1200 */
  }
  .journey-dot[style*="1110px"][style*="4100px"] { 
    left: 364px !important; /* 1110*393/1200 */
    top: 1344px !important; /* 4100*393/1200 */
  }
  .journey-dot[style*="1000px"][style*="3810px"] { 
    left: 328px !important; /* 1000*393/1200 */
    top: 1249px !important; /* 3810*393/1200 */
  }
  .journey-dot[style*="300px"][style*="4540px"] { 
    left: 98px !important;  
    top: 1487px !important; /* 4540*393/1200 */
  }
  .journey-dot[style*="980px"][style*="4453px"] { 
    left: 321px !important; 
    top: 1459px !important; /* 4453*393/1200 */
  }
  .journey-dot[style*="320px"][style*="5172px"] { 
    left: 105px !important; /* 320*393/1200 */
    top: 1695px !important; /* 5172*393/1200 */
  }
  .journey-dot[style*="1020px"][style*="5250px"] { 
    left: 334px !important; /* 1020*393/1200 */
    top: 1721px !important; /* 5250*393/1200 */
  }
  .journey-dot[style*="1020px"][style*="5855px"] { 
    left: 334px !important; 
    top: 1920px !important; /* 5855*393/1200 */
  }
  .journey-dot[style*="320px"][style*="5938px"] { 
    left: 105px !important; 
    top: 1947px !important; /* 5938*393/1200 */
  }
  .journey-dot[style*="320px"][style*="6565px"] { 
    left: 105px !important; 
    top: 2152px !important; /* 6565*393/1200 */
  }
  .journey-dot[style*="1020px"][style*="6660px"] { 
    left: 334px !important; 
    top: 2183px !important; /* 6660*393/1200 */
  }
  .journey-dot[style*="1020px"][style*="7280px"] { 
    left: 334px !important; 
    top: 2386px !important; /* 7280*393/1200 */
  }
  .journey-dot[style*="320px"][style*="7355px"] { 
    left: 105px !important; 
    top: 2411px !important; /* 7355*393/1200 */
  }
  
  /* Missing circles near the end - Device section continues */
  .journey-dot[style*="320px"][style*="8015px"] { 
    left: 105px !important; 
    top: 2627px !important; /* 8015*393/1200 */
  }
  .journey-dot[style*="1020px"][style*="8105px"] { 
    left: 334px !important; 
    top: 2656px !important; /* 8105*393/1200 */
  }
  .journey-dot[style*="1020px"][style*="8688px"] { 
    left: 334px !important; 
    top: 2847px !important; /* 8688*393/1200 */
  }
  
  /* Blue section circles - Entrepreneurial Strategies */
  .journey-dot[style*="320px"][style*="8775px"] { 
    left: 105px !important; 
    top: 2876px !important; /* 8775*393/1200 */
  }
  .journey-dot[style*="320px"][style*="9435px"] { 
    left: 105px !important; 
    top: 3092px !important; /* 9435*393/1200 */
  }
  
  /* Blue section circles - Engaging with Community */
  .journey-dot[style*="980px"][style*="9495px"] { 
    left: 321px !important; 
    top: 3112px !important; /* 9495*393/1200 */
  }
  .journey-dot[style*="980px"][style*="10130px"] { 
    left: 321px !important; 
    top: 3320px !important; /* 10130*393/1200 */
  }
  
  /* Blue section circles - Bioethics */
  .journey-dot[style*="320px"][style*="10190px"] { 
    left: 105px !important; 
    top: 3340px !important; /* 10190*393/1200 */
  }
  
  /* PHONE MODAL STACK: IMAGE → TITLE → TEXT */
  .hp-modal__dialog{
    width: calc(100% - 20px) !important;
    padding: clamp(20px, 5vw, 28px) !important;
    max-height: 75vh !important;
    min-height: 400px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .hp-modal__inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: clamp(18px, 5vw, 24px) !important;
    margin-top: clamp(6px, 4vw, 12px) !important;
  }

  .hp-modal__media{
    order: -2 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .hp-modal__media img{
    width: 100% !important;
    height: auto !important;
    border-radius: clamp(16px, 5vw, 24px) !important;
  }

  .hp-modal__text{
    order: -1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(14px, 4vw, 18px) !important;
    text-align: left !important;
  }

  .hp-modal__text h3{
    order: -1 !important;
    margin: 0 !important;
    font-size: clamp(1.5rem, 5vw, 1.9rem) !important;
  }

  .hp-modal__body{
    order: 0 !important;
    margin-top: 0 !important;
    gap: clamp(12px, 4vw, 16px) !important;
    font-size: clamp(1rem, 3.6vw, 1.2rem) !important;
  }
}

/* MOBILE MODAL FIX - IMAGE FIRST, TITLE SECOND, TEXT THIRD */
@media (max-width: 1024px) {
  .hp-modal {
    padding: 10px !important;
  }
  
  .hp-modal__dialog {
    width: calc(100% - 20px) !important;
    max-height: 80vh !important;
    min-height: 300px !important;
    padding: 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 16px !important;
  }
  
  .hp-modal__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 0 !important;
  }
  
  /* IMAGE FIRST - AT THE VERY TOP */
  .hp-modal__media {
    order: -2 !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
  }
  
  .hp-modal__media img {
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }
  
  /* TITLE/NAME SECOND - AFTER IMAGE */
  .hp-modal__text {
    order: -1 !important;
  }
  
  .hp-modal__text h3 {
    margin: 0 0 16px 0 !important;
    font-size: clamp(1.4rem, 4vw, 1.8rem) !important;
    font-family: 'Nixie One', serif !important;
  }
  
  /* TEXT CONTENT THIRD - LAST */
  .hp-modal__body {
    order: 0 !important;
    font-family: 'Nixie One', serif !important;
    font-size: clamp(0.95rem, 3.2vw, 1.1rem) !important;
    line-height: 1.6 !important;
    gap: 12px !important;
  }
  
  .hp-modal__body p {
    font-family: 'Nixie One', serif !important;
    margin-bottom: 12px !important;
  }
  
  .hp-modal__close {
    width: 32px !important;
    height: 32px !important;
    top: 12px !important;
    right: 12px !important;
    font-size: 1.2rem !important;
  }
  
  /* Ensure modal paragraphs are visible and properly styled on mobile */
  .hp-modal__paragraph,
  .hp-modal__body p {
    font-family: 'Nixie One', serif !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: clamp(0.95rem, 3.5vw, 1.15rem) !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
  }
}

@media (max-width: 600px) {
  .jbox{
    overflow: hidden;
  }

  .jbox__hd{
    padding: 14px 18px;
  }

  .jbox__title{
    font-size: clamp(1.1rem, 5.4vw, 1.6rem);
  }

  .jbox__body{
    display: none !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
}

/* === Journey dots placeholders (future photos) === */

.journey-dot{
  position: absolute;
  left: var(--x, 0px);
  top: var(--y, 0px);
  transform: translate(-50%, -50%);
  width: var(--size, 120px);
  height: var(--size, 120px);
  border-radius: 50%;
  border: 4px solid #d7af6b;
  background: rgba(11, 19, 32, 0.75);
  box-shadow: 0 14px 32px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease,
              box-shadow .25s ease;
  --hover-accent: #0cc0df;
  --ring-color: rgba(215,175,107,0.4);
  --tooltip-bg: #0cc0df;
  --tooltip-text: #04111a;
  --tooltip-cta-bg: #142d63;
  --tooltip-cta-text: #ffffff;
  outline: none;
}

.journey-dot__image{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.journey-dot--active{
  --active-highlight: #2d8bed;
  background: var(--active-highlight);
  border-color: var(--active-highlight);
  box-shadow: 0 20px 48px rgba(45,141,237,0.45), 0 0 0 16px rgba(45,141,237,0.28);
  transform: translate(-50%, -50%) scale(1.05);
}

.journey-dot--active .journey-dot__image{
  filter: saturate(1.1);
  box-shadow: inset 0 0 0 999px rgba(45,141,237,0.18);
}

.journey-dot--active .journey-dot__tooltip{
  opacity: 1;
  transform: translate(-50%, calc(-100% - 20px)) scale(1);
  pointer-events: auto;
}


.journey-dot:hover,
.journey-dot:focus-visible{
  background: var(--hover-accent);
  border-color: var(--hover-accent);
  box-shadow: 0 18px 40px rgba(12,192,223,0.45);
  transform: translate(-50%, -50%) scale(1.05);
}

.journey-dot__tooltip{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, calc(-100% - 12px)) scale(.92);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  padding: 18px 24px 18px;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  min-width: clamp(200px, 23vw, 260px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 3;
}

.journey-dot__name{
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  letter-spacing: .02em;
}

.journey-dot__cta{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--tooltip-cta-bg);
  color: var(--tooltip-cta-text);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 18px rgba(0,0,0,0.3);
  text-decoration: none;
  pointer-events: auto;
}

.journey-dot:hover .journey-dot__tooltip,
.journey-dot:focus-visible .journey-dot__tooltip{
  opacity: 1;
  transform: translate(-50%, calc(-100% - 20px)) scale(1);
  pointer-events: auto;
}

.journey-dot.red {
  border-color: var(--surv-red);
  --ring-color: rgba(111,21,36,0.42);
  --hover-accent: #a83242;
  --tooltip-bg: #5b0f1c;
  --tooltip-text: #fde9ed;
  --tooltip-cta-bg: #0b1320;
  --tooltip-cta-text: #ffffff;
}

.journey-dot.med {
  border-color: var(--med-pink);
  --ring-color: rgba(199,31,69,0.38);
  --hover-accent: #f44a70;
  --tooltip-bg: #c71f45;
  --tooltip-text: #fff2f6;
  --tooltip-cta-bg: #0b1320;
  --tooltip-cta-text: #ffffff;
}

.journey-dot.clin {
  border-color: var(--clin-red);
  --ring-color: rgba(138,51,65,0.38);
  --hover-accent: #b2495c;
  --tooltip-bg: #8a3341;
  --tooltip-text: #fff6f9;
  --tooltip-cta-bg: #0b1320;
  --tooltip-cta-text: #ffffff;
}

.journey-dot.yellow {
  border-color: #d7af6b;
  --ring-color: rgba(215,175,107,0.45);
  --hover-accent: #e6c984;
  --tooltip-bg: #c4933f;
  --tooltip-text: #0b0f17;
  --tooltip-cta-bg: #0b1320;
  --tooltip-cta-text: #fdf4dc;
}

.journey-dot.dry {
  border-color: var(--dry-yellow);
  --ring-color: rgba(230,204,150,0.45);
  --hover-accent: #f1d9ab;
  --tooltip-bg: #d9bc86;
  --tooltip-text: #0b0f17;
  --tooltip-cta-bg: #0b1320;
  --tooltip-cta-text: #fff5da;
}

.journey-dot.design {
  border-color: var(--des-yellow);
  --ring-color: rgba(230,163,27,0.45);
  --hover-accent: #f4b23d;
  --tooltip-bg: #e2910d;
  --tooltip-text: #0b0f17;
  --tooltip-cta-bg: #0b1320;
  --tooltip-cta-text: #fff2cb;
}

.journey-dot.device {
  border-color: var(--dev-yellow);
  --ring-color: rgba(168,118,30,0.45);
  --hover-accent: #c58c33;
  --tooltip-bg: #8d6320;
  --tooltip-text: #fff6dd;
  --tooltip-cta-bg: #0b1320;
  --tooltip-cta-text: #ffe6b8;
}

.journey-dot.blue {
  border-color: #1c3f60;
  --ring-color: rgba(28,63,96,0.4);
  --hover-accent: #1c3f60;
  --tooltip-bg: #1c3f60;
  --tooltip-text: #f4fbff;
  --tooltip-cta-bg: #06162b;
  --tooltip-cta-text: #ffffff;
}

.journey-dot.blue--entre {
  border-color: #1c3f60;
  --ring-color: rgba(28,63,96,0.4);
  --hover-accent: #1c3f60;
  --tooltip-bg: #1c3f60;
  --tooltip-text: #f4fbff;
  --tooltip-cta-bg: #06162b;
  --tooltip-cta-text: #ffffff;
}

.journey-dot.blue--comm {
  border-color: #66a8ec;
  --ring-color: rgba(102,168,236,0.38);
  --hover-accent: #66a8ec;
  --tooltip-bg: #66a8ec;
  --tooltip-text: #0b1320;
  --tooltip-cta-bg: #0b1f3a;
  --tooltip-cta-text: #ffffff;
}

.journey-dot.blue--bio {
  border-color: #368fe2;
  --ring-color: rgba(54,143,226,0.38);
  --hover-accent: #368fe2;
  --tooltip-bg: #368fe2;
  --tooltip-text: #f4fbff;
  --tooltip-cta-bg: #07264d;
  --tooltip-cta-text: #ffffff;
}


/* === Journey preview overlay (first step) === */
.hp-preview{
  position: fixed;
  inset: 0;
  z-index: 1350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 6vw, 64px);
  background: linear-gradient(135deg, rgba(7,12,22,0.68) 0%, rgba(7,12,22,0.48) 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}
.hp-preview--visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hp-preview--hidden{
  display: none;
}
.hp-preview__backdrop{
  position: absolute;
  inset: 0;
}
.hp-preview__card{
  position: relative;
  background: #fdfdfd;
  color: #0b1320;
  --preview-accent: #00bde3;
  --preview-accent-contrast: #ffffff;
  width: min(700px, calc(100% - 32px));
  max-height: min(90vh, 820px);
  border: clamp(10px, 1.3vw, 16px) solid var(--preview-accent);
  border-radius: clamp(28px, 6vw, 42px);
  box-shadow: 0 28px 72px rgba(0,0,0,0.38);
  padding: clamp(40px, 5vw, 64px) clamp(40px, 6vw, 66px) clamp(160px, 12vw, 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 2.8vw, 36px);
  outline: none;
}

/* Specific styling for Prof. Christopoulos preview card only */
.hp-preview--christopoulos .hp-preview__card {
  width: min(900px, calc(100% - 24px));
  max-height: min(95vh, 1000px);
  padding: clamp(50px, 6vw, 80px) clamp(50px, 7vw, 80px) clamp(180px, 14vw, 260px);
  gap: clamp(30px, 3.2vw, 42px);
}

.hp-preview__close{
  position: absolute;
  top: clamp(18px, 3vw, 24px);
  right: clamp(18px, 3vw, 24px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #0b1320;
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}
.hp-preview__close:hover,
.hp-preview__close:focus-visible{
  background: var(--preview-accent);
  color: var(--preview-accent-contrast);
}
.hp-preview__header{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 3vw, 26px);
}
.hp-preview__title-group{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hp-preview__name{
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: none;
  text-align: center;
}
.hp-preview__divider{
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--preview-accent);
}
.hp-preview__body{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(18px, 2vw, 24px);
}
.hp-preview__avatar{
  position: relative;
  width: clamp(140px, 28vw, 180px);
  height: clamp(140px, 28vw, 180px);
  border-radius: clamp(44px, 12vw, 54px);
  border: clamp(10px, 2vw, 16px) solid var(--preview-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.05);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
.hp-preview__avatar::before{
  content: "";
  position: absolute;
  inset: clamp(18px, 3vw, 26px);
  background: linear-gradient(180deg, #e1ebf4 0%, #cad8e6 100%);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='42' r='28'/%3E%3Cpath d='M18 117c0-22.091 17.909-40 40-40h4c22.091 0 40 17.909 40 40'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='42' r='28'/%3E%3Cpath d='M18 117c0-22.091 17.909-40 40-40h4c22.091 0 40 17.909 40 40'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hp-preview__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
}
.hp-preview__avatar.hp-preview__avatar--with-photo::before{
  display: none;
}
.hp-preview__avatar.hp-preview__avatar--with-photo img{
  display: block;
}
.hp-preview__role{
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 600;
}
.hp-preview__summary{
  width: 100%;
  margin-top: clamp(6px, 1.4vw, 16px);
  padding: 0;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.8vw, 1.18rem);
  line-height: 1.58;
  color: #0b1320;
  text-align: left;
}
.hp-preview__summary p{
  margin: 0;
}
.hp-preview__actions{
  position: absolute;
  left: clamp(40px, 6vw, 66px);
  right: clamp(40px, 6vw, 66px);
  bottom: clamp(18px, 2.4vw, 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 28px);
}
.hp-preview__arrow{
  width: clamp(48px, 10vw, 60px);
  height: clamp(48px, 10vw, 60px);
  border-radius: 50%;
  border: 2px solid #0b1320;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.hp-preview__arrow--prev::before{
  content: "\2039";
  font-size: clamp(1.6rem, 3.5vw, 2rem);
  line-height: 1;
}
.hp-preview__arrow--next::before{
  content: "\203a";
  font-size: clamp(1.6rem, 3.5vw, 2rem);
  line-height: 1;
}
.hp-preview__arrow:hover,
.hp-preview__arrow:focus-visible{
  background: #0b1320;
  color: #ffffff;
}
.hp-preview__arrow[disabled]{
  opacity: 0.45;
  cursor: default;
  background: #ffffff;
  color: rgba(11,19,32,0.55);
  border-color: rgba(11,19,32,0.35);
  box-shadow: none;
  pointer-events: none;
}
.hp-preview__arrow[disabled]:hover,
.hp-preview__arrow[disabled]:focus-visible{
  background: #ffffff;
  color: rgba(11,19,32,0.55);
}
.hp-preview__cta{
  padding: clamp(12px, 2.6vw, 16px) clamp(32px, 8vw, 56px);
  border-radius: 999px;
  border: none;
  background: var(--preview-accent);
  color: var(--preview-accent-contrast);
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: lowercase;
  cursor: pointer;
  box-shadow: 0 16px 32px rgba(0,0,0,0.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.hp-preview__cta:hover,
.hp-preview__cta:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.28);
  filter: brightness(0.92);
}
.hp-preview__card:focus-visible{
  outline: 3px solid var(--preview-accent);
  outline-offset: 4px;
}

@media (min-width: 641px) and (max-width: 1024px){
  .hp-preview__card{
    padding: clamp(36px, 4.5vw, 56px) clamp(32px, 5.2vw, 54px) clamp(110px, 10vw, 140px);
  }
  .hp-preview__summary{
    margin-bottom: clamp(18px, 2.6vw, 28px);
  }
  .hp-preview__actions{
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: clamp(20px, 3vw, 32px);
  }
}

@media (min-width: 1025px){
  .hp-preview{
    justify-content: flex-end;
    align-items: center;
    padding: clamp(32px, 5vw, 56px);
    background: none;
    pointer-events: none;
  }
  .hp-preview--visible{
    pointer-events: none;
  }
  .hp-preview__backdrop{
    display: none;
  }
  .hp-preview__card{
    width: clamp(360px, 32vw, 520px);
    max-height: calc(100vh - clamp(64px, 12vh, 140px));
    margin-right: clamp(16px, 4vw, 48px);
    margin-top: 0;
    padding: clamp(48px, 4.4vw, 66px) clamp(42px, 4.6vw, 60px) clamp(130px, 9vw, 170px);
    border-width: clamp(12px, 1vw, 16px);
    gap: clamp(26px, 2.4vw, 36px);
    pointer-events: auto;
    transform: translateX(28px);
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
    align-items: stretch;
    overflow: auto;
  }
  .hp-preview--visible .hp-preview__card{
    pointer-events: auto;
  }
  .hp-preview--visible .hp-preview__card{
    transform: translateX(0);
    opacity: 1;
  }
  .hp-preview__header,
  .hp-preview__body{
    align-items: flex-start;
    text-align: left;
  }
  .hp-preview__header{
    justify-content: flex-start;
  }
  .hp-preview__title-group{
    align-items: flex-start;
    text-align: left;
  }
  .hp-preview__name,
  .hp-preview__role{
    text-align: left;
  }
  .hp-preview__summary{
    margin-bottom: clamp(20px, 2.4vw, 32px);
    text-align: left;
  }
  .hp-preview__actions{
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: clamp(24px, 2.8vw, 36px);
    pointer-events: auto;
  }
  .hp-preview__arrow,
  .hp-preview__cta{
    pointer-events: auto;
  }
}

@media (max-width: 640px){
  .hp-preview__card{
    width: calc(100% - 20px);
    padding: 28px 20px 120px; /* Increased bottom padding from 32px to 120px */
    border-width: 10px;
    max-height: 85vh; /* Reduce max height to fit better */
  }
  .hp-preview__actions{
    gap: 16px;
    position: absolute; /* Position absolutely to avoid overlap */
    bottom: 20px; /* Position at bottom with margin */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    width: calc(100% - 40px); /* Full width minus margins */
  }
  .hp-preview__summary{
    margin-bottom: 20px; /* Add space between text and buttons */
  }
  .hp-preview__arrow{
    width: 48px;
    height: 48px;
  }
}


/* === Modal overlay for journey stories === */
.hp-modal{
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
  --modal-bg: linear-gradient(135deg, #142233 0%, #1e3249 70%, #27405c 100%);
  --modal-heading: #f5fbff;
  --modal-body-color: rgba(247,250,255,0.92);
  --modal-close-bg: rgba(8,16,30,0.25);
  --modal-close-color: #f5fbff;
  --modal-scrollbar: rgba(245,251,255,0.55);
}

.hp-modal--visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hp-modal--hidden{
  display: none;
}

.hp-modal__backdrop{
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(7,12,22,0.78) 0%, rgba(7,12,22,0.55) 100%);
  backdrop-filter: blur(18px);
  z-index: 0;
}

.hp-modal{
  padding: clamp(24px, 6vh, 72px) clamp(18px, 5vw, 64px);
}

.hp-modal__dialog{
  position: relative;
  z-index: 1;
  background: var(--modal-bg);
  border-radius: clamp(26px, 3vw, 36px);
  width: min(3200px, calc(100% - 16px));
  height: auto;
  max-height: min(95vh, 1300px);
  min-height: clamp(600px, 75vh, 1100px);
  padding: clamp(64px, 8vw, 96px);
  box-shadow: 0 32px 96px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  color: var(--modal-body-color);
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.hp-modal__close{
  position: absolute;
  top: clamp(16px, 1.8vw, 22px);
  right: clamp(16px, 1.8vw, 22px);
  width: clamp(38px, 4vw, 46px);
  height: clamp(38px, 4vw, 46px);
  border-radius: 50%;
  border: none;
  background: var(--modal-close-bg);
  color: var(--modal-close-color);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .2s ease, background .2s ease;
}

.hp-modal__close:hover,
.hp-modal__close:focus-visible{
  transform: scale(1.05);
  background: rgba(255,255,255,0.22);
  outline: none;
}

.hp-modal__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4.4vw, 56px);
  margin-top: clamp(12px, 2vw, 18px);
}

.hp-modal--portrait-right .hp-modal__inner{
  grid-template-columns: minmax(0, 1fr) clamp(140px, 18vw, 240px);
  align-items: start;
  gap: clamp(24px, 3vw, 36px);
}

.hp-modal--portrait-right .hp-modal__media{
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  width: clamp(140px, 18vw, 240px);
  margin: 0;
  border-radius: clamp(16px, 2vw, 22px);
}

.hp-modal--portrait-right .hp-modal__media img{
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.hp-modal--portrait-right .hp-modal__text{
  grid-column: 1 / 2;
}

@media (max-width: 900px){
  .hp-modal--portrait-right .hp-modal__inner{
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-modal--portrait-right .hp-modal__media{
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    max-width: none;
  }
}


.hp-modal__text{
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 24px);
}

.hp-modal__text h3{
  margin: 0 0 clamp(18px, 2.6vw, 24px);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  letter-spacing: .015em;
  color: var(--modal-heading);
}

.hp-modal__body{
  font-family: 'Nixie One', serif !important;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.72;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.5vw, 18px);
  flex: 1 1 auto;
  width: 100%;
}

.hp-modal__paragraph{
  margin: 0 0 clamp(20px, 2.2vw, 28px);
  font-family: 'Nixie One', serif !important;
}

.hp-modal__paragraph:last-child{
  margin-bottom: 0;
}

.hp-modal__paragraph--purpose,
.hp-modal__integration{
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 400;
  letter-spacing: normal;
}

.hp-modal__purpose-thumb{
  float: right;
  width: clamp(220px, 40vw, 420px);
  height: clamp(160px, 21vw, 250px);
  margin-left: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(12px, 1.8vw, 18px);
  border-radius: clamp(12px, 1.8vw, 18px);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.hp-modal__purpose-thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.hp-modal__section-label {
  display: inline-block;
  margin-right: clamp(6px, 0.6vw, 12px);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: none;
}

.hp-modal__integration{
  clear: both;
  margin-top: clamp(72px, 6vw, 140px);
  padding-top: clamp(28px, 3.4vw, 36px);
  border-top: 1px solid rgba(255,255,255,0.12);
  width: 100%;
}

.hp-modal__integration-intro{
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.hp-modal__body strong{
  font-weight: 800;
}

.hp-modal__dialog::-webkit-scrollbar{
  width: 12px;
}

.hp-modal__dialog::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
}

.hp-modal__dialog::-webkit-scrollbar-thumb{
  background: var(--modal-scrollbar);
  border-radius: 12px;
  min-height: 40px;
}

.hp-modal__dialog::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.8);
}

@media (max-width: 1024px){
  .hp-modal__paragraph--purpose .hp-modal__purpose-thumb{
    display: none;
  }
}

@media (max-width: 720px){
  .hp-modal__paragraph--purpose{
    display: flex;
    flex-direction: column;
  }

  .hp-modal__paragraph--purpose .hp-modal__purpose-thumb{
    float: none;
    align-self: flex-start;
    margin: 0 0 clamp(18px, 3vw, 24px);
    width: clamp(220px, 76vw, 420px);
    height: clamp(160px, 48vw, 250px);
  }
}

.hp-modal__media{
  width: 100%;
  margin: 0;
  border-radius: clamp(22px, 2.6vw, 32px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}

.hp-modal__media img{
  display: block;
  width: 100%;
  height: clamp(280px, 34vw, 420px);
  object-fit: cover;
}

/* Special handling for SVG images in modal */
.hp-modal__media img[src$=".svg"] {
  object-fit: contain;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

@media (max-width: 900px){
  .hp-modal{
    padding: clamp(16px, 6vw, 32px);
  }

  .hp-modal__dialog{
    width: calc(100% - 16px);
    min-height: auto;
    height: auto;
    max-height: 79vh;
    padding: clamp(36px, 10vw, 64px);
  }

  .hp-modal__inner{
    gap: clamp(24px, 5vw, 32px);
  }

  .hp-modal__media img{
    height: clamp(220px, 50vw, 320px);
  }

  /* SVG images in modal on mobile */
  .hp-modal__media img[src$=".svg"] {
    object-fit: contain;
  }

  .hp-modal__body{
    max-height: none;
  }
}


.hp-modal--red{
  --modal-bg: linear-gradient(145deg, #702131 0%, #8a3341 55%, #b44859 100%);
  --modal-heading: #fff5f7;
  --modal-body-color: rgba(255,238,242,0.94);
  --modal-close-bg: rgba(255,203,211,0.18);
  --modal-close-color: #fff5f7;
  --modal-scrollbar: rgba(255,227,233,0.65);
  --modal-section-bg: rgba(192,55,86,0.22);
  --modal-section-bg-strong: rgba(199,31,69,0.28);
  --modal-section-border: rgba(255,196,208,0.42);
}

.hp-modal--med{
  --modal-bg: linear-gradient(145deg, #7d1b32 0%, #a62340 50%, #c71f45 100%);
  --modal-heading: #fff3f6;
  --modal-body-color: rgba(255,236,244,0.94);
  --modal-close-bg: rgba(255,214,225,0.2);
  --modal-close-color: #fff6f9;
  --modal-scrollbar: rgba(255,220,232,0.68);
  --modal-section-bg: rgba(199,31,69,0.22);
  --modal-section-bg-strong: rgba(199,31,69,0.32);
  --modal-section-border: rgba(255,194,212,0.5);
}

.hp-modal--clin{
  --modal-bg: linear-gradient(150deg, #5f1d2e 0%, #7b2c3c 52%, #8a3341 100%);
  --modal-heading: #fff3f6;
  --modal-body-color: rgba(255,232,238,0.94);
  --modal-close-bg: rgba(255,203,211,0.16);
  --modal-close-color: #fff6f9;
  --modal-scrollbar: rgba(255,214,220,0.62);
  --modal-section-bg: rgba(138,51,65,0.24);
  --modal-section-bg-strong: rgba(138,51,65,0.32);
  --modal-section-border: rgba(255,204,213,0.46);
}

.hp-modal--yellow{
  --modal-bg: linear-gradient(140deg, #8d6320 0%, #a8761e 50%, #d3a056 100%);
  --modal-heading: #fff8e6;
  --modal-body-color: rgba(255,249,227,0.94);
  --modal-close-bg: rgba(11,19,32,0.28);
  --modal-close-color: #fff9e9;
  --modal-scrollbar: rgba(255,233,191,0.7);
  --modal-section-bg: rgba(218,165,32,0.18);
  --modal-section-bg-strong: rgba(211,160,86,0.26);
  --modal-section-border: rgba(250,214,140,0.46);
}

.hp-modal--blue{
  --modal-bg: linear-gradient(145deg, #123650 0%, #1c3f60 55%, #2a6a95 100%);
  --modal-heading: #eef7ff;
  --modal-body-color: rgba(233,245,255,0.94);
  --modal-close-bg: rgba(0,53,93,0.24);
  --modal-close-color: #eef7ff;
  --modal-scrollbar: rgba(208,232,255,0.7);
  --modal-section-bg: rgba(42,106,149,0.2);
  --modal-section-bg-strong: rgba(42,106,149,0.28);
  --modal-section-border: rgba(168,210,244,0.46);
}

.hp-modal--blue-entre{
  --modal-bg: linear-gradient(150deg, #102b44 0%, #1c3f60 60%, #2f6b99 100%);
  --modal-heading: #edf5ff;
  --modal-body-color: rgba(233,245,255,0.94);
  --modal-close-bg: rgba(31,75,112,0.24);
  --modal-close-color: #f3f9ff;
  --modal-scrollbar: rgba(182,212,239,0.7);
  --modal-section-bg: rgba(47,107,153,0.22);
  --modal-section-bg-strong: rgba(47,107,153,0.3);
  --modal-section-border: rgba(176,212,241,0.46);
}

.hp-modal--blue-comm{
  --modal-bg: linear-gradient(150deg, #1c4c7a 0%, #368fe2 50%, #66a8ec 100%);
  --modal-heading: #f5fbff;
  --modal-body-color: rgba(236,248,255,0.94);
  --modal-close-bg: rgba(36,101,157,0.22);
  --modal-close-color: #f5fbff;
  --modal-scrollbar: rgba(194,226,255,0.72);
  --modal-section-bg: rgba(102,168,236,0.22);
  --modal-section-bg-strong: rgba(54,143,226,0.28);
  --modal-section-border: rgba(182,222,255,0.46);
}

.hp-modal--blue-bio{
  --modal-bg: linear-gradient(150deg, #0d2f4b 0%, #225f9e 55%, #368fe2 100%);
  --modal-heading: #f1f9ff;
  --modal-body-color: rgba(229,243,255,0.94);
  --modal-close-bg: rgba(34,95,158,0.24);
  --modal-close-color: #f1f9ff;
  --modal-scrollbar: rgba(186,214,246,0.7);
  --modal-section-bg: rgba(54,143,226,0.22);
  --modal-section-bg-strong: rgba(54,143,226,0.3);
  --modal-section-border: rgba(170,212,255,0.44);
}

.hp-modal__integration{
  width: 100%;
}
.hp-modal__integration p{
  margin: 0;
}

.hp-modal__integration-intro {
  margin-top: clamp(80px, 12vw, 120px);
  margin-bottom: 1.5rem;
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  max-width: 65%;
}

.hp-modal--integration-only .hp-modal__body{
  max-height: none;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  line-height: 1.78;
  color: var(--modal-body-color);
  width: 100%;
  margin-top: 0;
}
.hp-modal--integration-only .hp-modal__body p{
  margin: 0;
}
.hp-modal--integration-only .hp-modal__media{
  display: none;
}

@media (max-width: 1024px){
  .hp-modal__dialog{
    width: min(92vw, 860px);
    max-height: min(92vh, 820px);
    padding: clamp(32px, 5vw, 48px);
  }

  .hp-modal__inner{
    gap: clamp(24px, 4vw, 36px);
  }

  .hp-modal__media img{
    height: clamp(240px, 38vw, 340px);
  }

  /* SVG images in modal on tablets */
  .hp-modal__media img[src$=".svg"] {
    object-fit: contain;
  }
}

@media (max-width: 768px){
  .hp-modal__dialog{
    width: min(94vw, 640px);
    max-height: min(94vh, 760px);
  }

  .hp-modal__body{
    max-height: none;
  }
}
/* ── INTEGRATION LIFECYCLE SECTION ── */
.integration-lifecycle-section {
    margin: 4rem auto;
    padding: 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(215, 175, 107, 0.15);
}

.integration-lifecycle-container {
    max-width: min(96vw, 960px);
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 48px);
}

.integration-lifecycle h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    color: var(--gold);
    margin: 0 0 1.5rem 0;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.integration-lifecycle ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.5vw, 24px);
}

.integration-lifecycle li {
    font-family: 'Nixie One', serif;
    font-size: clamp(1.1rem, 1.35vw, 1.35rem);
    color: #ffffff;
    line-height: 1.6;
    padding-left: 2rem;
    position: relative;
    text-align: left;
}

.integration-lifecycle li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: bold;
    font-size: 1.2em;
}

.integration-lifecycle li strong {
    color: var(--gold);
    font-weight: 600;
}

/* ── CONCLUSION SECTION ── */
.ihp-conclusion-section {
    margin: -12vh auto 4rem auto !important;
    padding: 0;
    position: relative;
    z-index: 10;
}

.ihp-conclusion {
    max-width: min(96vw, 960px);
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 48px);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(215, 175, 107, 0.15);
}

.ihp-conclusion h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: var(--gold);
    margin: 0 0 1.5rem 0;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ihp-conclusion p {
    font-family: 'Nixie One', serif !important;
    font-size: clamp(1.15rem, 1.45vw, 1.45rem);
    color: #ffffff !important;
    margin: 0;
    text-align: left;
    line-height: 1.6;
}