/* Home page. Relies on the tokens in warm.css and the shared roles in portfolio.css. */

.hm { --deep: #0b1219; --deep-2: #111b26; --line-dark: rgba(248, 250, 252, 0.14); }
.on-dark { background: var(--night); color: var(--cream); }
.section-title em { color: var(--accent-deep); }
/* Type hierarchy: the label line is the bold one, the headline under it stays light */
.hm .eyebrow { display: flex; align-items: center; gap: 0.65rem; color: var(--accent-deep); font-size: calc(var(--fs-small) + 2.67px); font-weight: 800; letter-spacing: 0.16em; }
.hm .on-dark .eyebrow, .hm .on-dark.hm-services .eyebrow { color: var(--accent-light); }
.hm .section-title { font-weight: 400; letter-spacing: -0.02em; }
.hm .section-title em { font-weight: 500; }
.hm-label {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.hm-about .hm-label { margin-bottom: clamp(1.1rem, 2vw, 1.6rem); }
.hm-services .hm-label,
.hm-work .hm-label,
.hm-sectors .hm-label { color: #fff; }
.hm-services .hm-label em,
.hm-work .hm-label em,
.hm-sectors .hm-label em { color: var(--accent-light); }
.hm-subhead {
  margin: 0.7rem 0 0;
  max-width: 28ch;
  color: var(--ink);
  font-family: var(--display);
  font-size: calc(clamp(1.2rem, 0.95rem + 0.85vw, 1.65rem) - 2px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.hm-services .hm-subhead,
.hm-work .hm-subhead,
.hm-sectors .hm-subhead { color: rgba(248, 250, 252, 0.78); }
.hm-head .hm-subhead { max-width: 34ch; }
.hm-work .hm-subhead { max-width: 22em; }
.on-dark .section-title em { color: var(--accent-light); }

.hm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4) var(--s-7);
  margin-bottom: var(--s-7);
}
.hm-head > div { max-width: 46rem; }
.hm-head > p { max-width: 26rem; margin-top: 0.35rem; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.on-dark .hm-head > p { color: rgba(248, 250, 252, 0.68); }

.hm-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--btn);
  padding: 0 1.35rem;
  border: 1px solid rgba(248, 250, 252, 0.45);
  border-radius: 999px;
  color: var(--cream);
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.hm-ghost span { transition: transform 0.35s var(--ease); }
.hm-ghost:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.hm-ghost:hover span { transform: translateX(4px); }

/* ---------- Hero: night on one side of the split, day on the other ---------- */
.hm-hero {
  --split: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100svh;
  min-height: 640px;
  max-height: 1040px;
  overflow: hidden;
  background: #05080c;
  color: var(--cream);
  isolation: isolate;
}
.hm-hero__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hm-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hm-hero__slide.is-active { opacity: 1; }
.hm-hero__stage {
  position: absolute;
  inset: -10% -18%;
  transform: translate3d(var(--shift-x, 0px), var(--shift-y, 0px), 0);
  will-change: transform;
}
.hm-hero__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hm-hero__day { filter: saturate(1.08) brightness(1.02); }
.hm-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 88% 18%, rgba(255, 196, 132, 0.22), transparent 55%);
  pointer-events: none;
}
.hm-hero__night {
  position: absolute;
  inset: 0;
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--split) - 9%), transparent calc(var(--split) + 9%));
  mask-image: linear-gradient(90deg, #000 calc(var(--split) - 9%), transparent calc(var(--split) + 9%));
}
/* Night vision: a cool dusk grade, with a bloom pass that lifts only the brightest points so the lights glow */
.hm-hero__night img { filter: brightness(1) saturate(1.12) contrast(1.06); }
.hm-hero__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #7489d6 0%, #91a2e2 55%, #9d92d2 100%);
  mix-blend-mode: multiply;
}
.hm-hero__night img.hm-hero__glow {
  filter: brightness(0.52) contrast(9) sepia(0.6) saturate(2.4) blur(6px);
  mix-blend-mode: screen;
  opacity: 1;
  animation: hm-glow 5s ease-in-out infinite alternate;
}
@keyframes hm-glow { to { opacity: 0.7; } }
.hm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.95) 0%, rgba(8, 8, 8, 0.86) 28%, rgba(8, 8, 8, 0.4) 50%, rgba(8, 8, 8, 0) 70%),
    linear-gradient(0deg, rgba(5, 8, 12, 0.72) 0%, transparent 34%),
    linear-gradient(180deg, rgba(5, 8, 12, 0.45) 0%, transparent 28%);
  pointer-events: none;
}

.hm-hero__split {
  position: absolute;
  top: var(--header);
  bottom: 0;
  left: var(--split);
  z-index: 1;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(255, 226, 190, 0.9) 18%, rgba(255, 226, 190, 0.9) 82%, transparent);
  box-shadow: 0 0 24px 6px rgba(255, 206, 150, 0.35);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.hm-hero.is-wiping .hm-hero__split { opacity: 1; }

/* Day / night vision toggle */
.hm-hero__mode {
  position: absolute;
  top: calc(var(--header) + var(--s-5));
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.hm-mode {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.35rem 0.35rem 0.35rem 1.05rem;
  border: 1px solid rgba(248, 250, 252, 0.3);
  border-radius: 999px;
  background: rgba(5, 8, 12, 0.36);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--cream);
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}
.hm-mode__label { display: grid; overflow: hidden; font-size: var(--fs-ui); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.hm-mode__label span { grid-area: 1 / 1; transition: transform 0.6s var(--ease), opacity 0.4s ease; }
.hm-mode__label .is-night { opacity: 0; transform: translateY(100%); }
.hm-mode[aria-pressed="true"] .hm-mode__label .is-day { opacity: 0; transform: translateY(-100%); }
.hm-mode[aria-pressed="true"] .hm-mode__label .is-night { opacity: 1; transform: none; color: #ffe2be; }
.hm-mode__sky {
  position: relative;
  width: 4.75rem;
  height: 2.35rem;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(180deg, #5fb4ff, #b9e2ff);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background 0.8s ease;
}
.hm-mode[aria-pressed="true"] .hm-mode__sky { background: linear-gradient(180deg, #0a1433, #27306a); }
.hm-mode__sky i { position: absolute; display: block; }
.hm-mode__cloud { right: 0.5rem; bottom: 0.35rem; width: 1.5rem; height: 0.55rem; border-radius: 999px; background: #fff; box-shadow: 0.45rem -0.3rem 0 -0.05rem #fff, -0.35rem -0.15rem 0 -0.12rem #fff; transition: transform 0.7s var(--ease), opacity 0.5s ease; animation: hm-cloud 6s ease-in-out infinite alternate; }
.hm-mode__cloud.is-b { right: 1.8rem; bottom: 1.35rem; transform: scale(0.6); opacity: 0.85; animation-duration: 8s; }
@keyframes hm-cloud { to { translate: -0.3rem 0; } }
.hm-mode[aria-pressed="true"] .hm-mode__cloud { opacity: 0; transform: translateY(1.6rem); }
.hm-mode__stars {
  inset: 0;
  background:
    radial-gradient(1px 1px at 22% 30%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 38% 68%, #fff 99%, transparent),
    radial-gradient(1px 1px at 50% 22%, #fff 99%, transparent),
    radial-gradient(1px 1px at 14% 72%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 30% 46%, #ffe9c4 99%, transparent);
  opacity: 0;
  transform: translateY(-1rem);
  transition: opacity 0.6s ease 0.2s, transform 0.8s var(--ease) 0.2s;
}
.hm-mode[aria-pressed="true"] .hm-mode__stars { opacity: 1; transform: none; animation: hm-twinkle 2.4s ease-in-out 1s infinite alternate; }
@keyframes hm-twinkle { to { opacity: 0.45; } }
.hm-mode__orb {
  top: 0.3rem;
  left: 0.3rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3b0, #ffc93c 60%, #f5a623);
  box-shadow: 0 0 0 4px rgba(255, 214, 90, 0.25), 0 0 16px 4px rgba(255, 200, 60, 0.6);
  transition: transform 0.8s cubic-bezier(0.68, -0.3, 0.32, 1.3), background 0.6s ease, box-shadow 0.6s ease;
}
.hm-mode__orb i { position: absolute; inset: 0; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 62% 30%, rgba(150, 160, 190, 0.7) 0 12%, transparent 13%), radial-gradient(circle at 34% 62%, rgba(150, 160, 190, 0.6) 0 16%, transparent 17%), radial-gradient(circle at 70% 70%, rgba(150, 160, 190, 0.55) 0 9%, transparent 10%); transition: opacity 0.5s ease 0.3s; }
.hm-mode[aria-pressed="true"] .hm-mode__orb { transform: translateX(2.4rem) rotate(200deg); background: radial-gradient(circle at 40% 35%, #ffffff, #dfe5f3 70%); box-shadow: 0 0 0 4px rgba(220, 228, 250, 0.12), 0 0 18px 4px rgba(200, 215, 255, 0.45); }
.hm-mode[aria-pressed="true"] .hm-mode__orb i { opacity: 1; }
.hm-mode:hover .hm-mode__orb { scale: 1.06; }
.hm-mode:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }

.hm-hero__copy {
  position: relative;
  z-index: 2;
  margin-block: auto 0;
  padding: calc(var(--header) + var(--s-7)) 0 calc(var(--s-7) + 3.5rem);
}
.hm-hero__texts { display: grid; }
.hm-hero__text { grid-area: 1 / 1; max-width: 44rem; visibility: hidden; }
.hm-hero__text.is-active { visibility: visible; }
.hm-hero__title {
  font-family: var(--display);
  font-size: clamp(2.35rem, 1.15rem + 4.4vw, 5.35rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.hm-hero__title strong { font-weight: 800; letter-spacing: -0.01em; }
.hm-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hm-line > * { display: block; transform: translateY(110%); transition: transform 0.45s ease; }
.hm-hero__text.is-active .hm-line > * { transform: none; transition: transform 1.05s var(--ease) calc(0.35s + var(--l) * 0.1s); }
.hm-hero__sub {
  max-width: 30rem;
  margin-top: var(--s-5);
  color: rgba(248, 250, 252, 0.86);
  font-size: calc(var(--fs-lede) - 4px);
  line-height: 1.4;
  text-shadow: 0 1px 14px rgba(5, 8, 12, 0.6);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hm-hero__text.is-active .hm-hero__sub { opacity: 1; transform: none; transition: opacity 0.8s ease 0.75s, transform 1s var(--ease) 0.75s; }
.hm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hm-hero__ghost {
  display: inline-flex;
  align-items: center;
  height: var(--btn);
  padding: 0 1.35rem;
  border: 1.5px solid rgba(248, 250, 252, 0.6);
  border-radius: 999px;
  color: var(--cream);
  font-size: var(--fs-ui);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.hm-hero__ghost:hover { background: var(--cream); color: var(--ink); }
.js .hm-hero__actions { animation: rise 1s var(--ease) 0.9s both; }

.hm-voices__nav button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.hm-voices__nav svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hm-voices__nav button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.hm-hero__scroll {
  position: absolute;
  bottom: var(--s-5);
  left: 50%;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  color: rgba(248, 250, 252, 0.7);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.hm-hero__scroll i { position: relative; width: 1.15rem; height: 1.8rem; border: 1.5px solid currentColor; border-radius: 1rem; }
.hm-hero__scroll i::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: 50%;
  width: 2px;
  height: 0.4rem;
  margin-left: -1px;
  border-radius: 2px;
  background: currentColor;
  animation: hm-wheel 1.8s var(--ease) infinite;
}
@keyframes hm-wheel {
  0% { opacity: 0; transform: translateY(-2px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(8px); }
}

/* ---------- Client logos ---------- */
.hm-clients { padding: var(--section) 0 calc(var(--section) * 0.9); overflow: hidden; }
.hm-clients__head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-5); margin-bottom: var(--s-6); }
.hm-clients__title {
  text-align: center;
  color: var(--ink);
  font-size: clamp(1.2rem, 0.95rem + 0.85vw, 1.65rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hm-clients__title span { color: var(--accent-deep); }
.hm-iso { display: flex; flex: none; align-items: center; justify-self: start; gap: var(--s-3); color: var(--ink); text-decoration: none; }
.hm-iso--end { flex-direction: row-reverse; justify-self: end; text-align: right; }
.hm-iso img { width: auto; height: clamp(5.5rem, 3.6rem + 3.8vw, 8.25rem); filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.22)); transform-origin: 50% 20%; animation: hm-sway 4.5s ease-in-out infinite alternate; }
@keyframes hm-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.hm-iso__copy { display: grid; gap: 0.1rem; line-height: 1.15; }
.hm-iso__copy strong { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; }
.hm-iso__copy span { color: var(--muted); font-size: var(--fs-ui); font-weight: 700; letter-spacing: 0.08em; }
.hm-iso:hover img { animation-play-state: paused; }
/* Logo tunnel: tiles sit on the inside of a cylinder, so they shrink toward the centre. */
.hm-tunnel { position: relative; height: clamp(10.5rem, 7rem + 7vw, 14rem); overflow: hidden; }
.hm-tunnel__stage { position: absolute; inset: 0; margin: 0; padding: 0; perspective: var(--tunnel-p, 300px); }
.hm-tunnel__tile {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--tile-w, 4rem);
  height: var(--tile-h, 5rem);
  margin: calc(var(--tile-h, 5rem) / -2) 0 0 calc(var(--tile-w, 4rem) / -2);
  padding: 0.35rem;
  border: var(--edge);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  backface-visibility: hidden;
  visibility: hidden;
}
.hm-tunnel__tile.is-on { visibility: visible; }
.hm-tunnel__tile img { width: 100%; height: 100%; max-height: 3.5rem; object-fit: contain; }
.js .hm-tunnel[data-reveal] { transform: scale(0.94); transition: opacity 1s ease, transform 1.4s var(--ease); }
.js .hm-tunnel[data-reveal].is-in { transform: none; }
.hm-tunnel:not(.is-ready) .hm-tunnel__stage { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); overflow: hidden; perspective: none; }
.hm-tunnel:not(.is-ready) .hm-tunnel__tile { position: static; width: 9rem; height: 4.5rem; visibility: visible; }

/* ---------- Stats: a 3D strip; columns flip up, numbers are extruded and the strip tilts toward the pointer ---------- */
.hm-stats { padding: clamp(3rem, 5.5vw, 4.5rem) 0; overflow: hidden; background: var(--deep); perspective: 1100px; }
.hm-stats__list {
  --tx: 0;
  --ty: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  transform: rotateX(calc(var(--ty) * -12deg)) rotateY(calc(var(--tx) * 16deg));
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease);
}
.hm-stats__list > div { position: relative; padding: 0 var(--s-5); transform-style: preserve-3d; }
.hm-stats__list > div + div::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--line-dark), rgba(158, 197, 255, 0.85), var(--line-dark)) 0 0 / 100% 300% no-repeat;
  animation: hm-divider 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.6s);
}
@keyframes hm-divider { 0%, 100% { background-position: 0 0; } 50% { background-position: 0 100%; } }
.hm-stats__list > div:first-child { padding-left: 0; }
.hm-stats dt {
  color: #f6f8fc;
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.25rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 #6f8fbd, 0 2px 0 #5b7cad, 0 3px 0 #4b6c9c, 0 4px 0 #3e5d8a, 0 5px 0 #324f78, 0 6px 0 #284366, 0 16px 22px rgba(0, 0, 0, 0.6);
  transform-origin: 30% 60%;
  animation: hm-stat-float 6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -1.5s);
}
.hm-stats dt span { font-weight: 700; }
@keyframes hm-stat-float {
  from { transform: rotateY(-14deg) rotateX(8deg) translateZ(0); }
  to { transform: rotateY(12deg) rotateX(-6deg) translateZ(30px); }
}
.hm-stats dd {
  margin: var(--s-4) 0 0;
  color: rgba(248, 250, 252, 0.66);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateZ(14px);
}
.js .hm-stats__list > div { opacity: 0; transform: rotateX(-88deg) translateZ(-40px); transform-origin: 50% 100%; transition: opacity 0.8s ease, transform 1.3s cubic-bezier(0.22, 1.3, 0.36, 1); transition-delay: calc(var(--i) * 0.14s); }
.js .hm-stats__list.is-in > div { opacity: 1; transform: none; }

/* ---------- About ---------- */
.hm-about { padding: calc(var(--section) * 1.1) 0; }
.hm-about .eyebrow { margin-bottom: var(--s-6); }
.hm-about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hm-about__media { position: relative; aspect-ratio: 16 / 11; margin: 0 6% 7% 0; }
.hm-about__frame {
  position: absolute;
  inset: 8% -6% -7% 8%;
  border: 1.5px solid var(--accent);
  border-radius: 6rem 14px 14px 14px;
}
.hm-about__main, .hm-about__inset { position: absolute; margin: 0; overflow: hidden; background: var(--night); }
.hm-about__main { inset: 0; border-radius: 6rem 14px 14px 14px; box-shadow: var(--shadow-lift); }
.hm-about__inset { right: -6%; bottom: -7%; width: 42%; aspect-ratio: 4 / 3; border: 6px solid var(--bg); border-radius: 14px; box-shadow: var(--shadow-lift); }
.hm-about__main img, .hm-about__inset img { width: 100%; height: 100%; object-fit: cover; }
.hm-about__badge {
  position: absolute;
  top: -1.6rem;
  right: 1.2rem;
  display: grid;
  place-items: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--shadow);
}
.hm-about__badge svg { position: absolute; inset: 0.35rem; width: calc(100% - 0.7rem); height: calc(100% - 0.7rem); animation: hm-spin 22s linear infinite; }
.hm-about__badge text { fill: var(--accent-deep); font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.hm-about__badge b { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.9rem; letter-spacing: 0.06em; }
@keyframes hm-spin { to { transform: rotate(360deg); } }
.js .hm-about__media { opacity: 1; transform: none; }
.js .hm-about__main img { clip-path: inset(100% 0 0 0); filter: grayscale(1); transform: scale(1.18); transition: clip-path 1.4s var(--ease), transform 2.2s var(--ease), filter 1.6s ease 0.9s; }
.js .hm-about__media.is-in .hm-about__main img { clip-path: inset(0 0 0 0); filter: none; transform: none; }
.js .hm-about__inset { opacity: 0; transform: translate(14%, 14%); transition: opacity 0.9s ease 0.7s, transform 1.2s var(--ease) 0.7s; }
.js .hm-about__media.is-in .hm-about__inset { opacity: 1; transform: none; }
.js .hm-about__frame { opacity: 0; transform: translate(-5%, -5%); transition: opacity 1s ease 0.5s, transform 1.4s var(--ease) 0.5s; }
.js .hm-about__media.is-in .hm-about__frame { opacity: 1; transform: none; }
.js .hm-about__badge { transform: scale(0) rotate(-90deg); transition: transform 1s var(--ease) 1s; }
.js .hm-about__media.is-in .hm-about__badge { transform: none; }
.hm-lead {
  margin-bottom: var(--s-5);
  color: var(--ink);
  font-family: var(--display);
  font-size: calc(clamp(2rem, 1.25rem + 2.2vw, 3rem) - 2.67px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hm-lead em { display: block; color: var(--accent-deep); font-weight: 500; }
.hm-about__quote { margin: var(--s-5) 0 var(--s-5); padding-left: var(--s-4); border-left: 2px solid var(--accent); }
.hm-about__quote blockquote { font-size: 1.15rem; font-weight: 600; line-height: 1.45; }
.hm-about__quote figcaption { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-ui); }
.hm-about__copy p:not(.hm-lead) { color: rgba(15, 23, 42, 0.72); }
.hm-about__copy p + p { margin-top: var(--s-4); }
.hm-about__copy .arrow-link { margin-top: var(--s-6); color: var(--ink); }
.hm-about__copy .arrow-link i { border-color: var(--line); }
.hm-about__copy .arrow-link:hover i { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(4px); }

/* ---------- What makes us unique: tiles orbit a tilted ring, the nearest one sets the copy ---------- */
.hm-unique { padding: 0 0 calc(var(--section) * 1.1); overflow: hidden; }
.hm-unique .section-title { font-size: calc(var(--fs-h2) - 12px); }
.hm-unique .eyebrow { font-size: calc(var(--fs-small) + 6.67px); }
.hm-unique .hm-head { margin-bottom: var(--s-4); }
/* Orbit: six cards ride a 3D ring that turns slowly, follows the page scroll and can be dragged */
.hm-orbit {
  --orbit-w: clamp(10.5rem, 17vw, 17rem);
  position: relative;
  height: calc(var(--orbit-w) * 2.45);
  perspective: 1800px;
  perspective-origin: 50% 30%;
  touch-action: pan-y;
  cursor: grab;
}
.hm-orbit.is-dragging { cursor: grabbing; }
.hm-orbit__ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }
.hm-orbit__card {
  --near: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orbit-w);
  aspect-ratio: 4 / 5;
  margin: calc(var(--orbit-w) * -0.625) 0 0 calc(var(--orbit-w) / -2);
  will-change: transform;
}
.hm-orbit__btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--night);
  box-shadow: 0 34px 60px -30px rgba(15, 23, 42, 0.6);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hm-orbit.is-dragging .hm-orbit__btn { cursor: grabbing; }
.hm-orbit__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(calc(0.7 + var(--near) * 0.4)) brightness(calc(0.6 + var(--near) * 0.42));
  transition: transform 1s var(--ease);
  -webkit-user-drag: none;
}
.hm-orbit__btn:hover img { transform: scale(1.05); }
.hm-orbit__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 0.4rem;
  padding: 3.2rem 1rem 1rem;
  background: linear-gradient(0deg, rgba(8, 13, 20, 0.94) 0%, rgba(8, 13, 20, 0.78) 55%, transparent);
}
.hm-orbit__text strong { font-size: 0.86rem; font-weight: 700; line-height: 1.2; }
.hm-orbit__text small { color: rgba(248, 250, 252, 0.8); font-size: 0.72rem; font-weight: 500; line-height: 1.45; }
.hm-orbit__card.is-front .hm-orbit__btn { outline: 2px solid var(--accent); outline-offset: 5px; }
.hm-orbit__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.hm-orbit:not(.is-ready) { height: auto; perspective: none; cursor: auto; }
.hm-orbit:not(.is-ready) .hm-orbit__ring { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--s-3); }
.hm-orbit:not(.is-ready) .hm-orbit__card { position: relative; top: auto; left: auto; width: auto; margin: 0; }
.js .hm-orbit[data-reveal] { transform: none; }
.js .hm-orbit[data-reveal] .hm-orbit__ring { opacity: 0; transform: translateY(60px) scale(0.86); transition: opacity 1.2s ease 0.2s, transform 1.6s var(--ease) 0.2s; }
.js .hm-orbit[data-reveal].is-in .hm-orbit__ring { opacity: 1; transform: none; }

/* Detail card opened from a ring tile */
.hm-ring__dialog {
  width: min(52rem, calc(100vw - 2rem));
  max-height: calc(100svh - 2rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-media);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 40px 90px -30px rgba(15, 23, 42, 0.55);
}
.hm-ring__dialog[open] { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); animation: hm-dialog-in 0.55s var(--ease) both; }
.hm-ring__dialog::backdrop { background: rgba(8, 13, 20, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hm-ring__dialog-media { min-height: 22rem; margin: 0; background: var(--night); }
.hm-ring__dialog-media img { width: 100%; height: 100%; object-fit: cover; }
.hm-ring__dialog-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.75rem, 4vw, 3rem); }
.hm-unique .hm-ring__dialog-body .eyebrow { font-size: calc(var(--fs-small) + 1px); }
.hm-ring__dialog-body h3 { margin-top: var(--s-3); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.hm-ring__dialog-body p { margin-top: var(--s-4); color: rgba(15, 23, 42, 0.74); font-size: 1.05rem; line-height: 1.6; }
.hm-ring__dialog-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.hm-ring__dialog-close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hm-ring__dialog-close:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.hm-ring__dialog-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes hm-dialog-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } }

/* ---------- Services and sectors ---------- */
.hm-services { padding: calc(var(--section) * 1.3) 0; background: var(--deep); }
.hm-services > .wrap > .hm-head .eyebrow { font-size: calc(var(--fs-small) + 6.67px); }
.hm-services > .wrap > .hm-head .section-title { font-size: max(1.4rem, calc(var(--fs-h2) - 8px)); }
.hm-services__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); padding: 0; list-style: none; }
.hm-service {
  position: relative;
  display: flex;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-media);
  isolation: isolate;
  outline-offset: 3px;
}
.hm-service img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.8);
  transition: transform 1.2s var(--ease), filter 0.8s ease;
}
.hm-service::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 13, 20, 0.82) 0%, rgba(8, 13, 20, 0.2) 45%, rgba(8, 13, 20, 0.85) 100%);
}
.hm-service__body { display: flex; flex-direction: column; width: 100%; padding: var(--pad-card); }
.hm-service h3 { margin-top: var(--s-3); font-size: clamp(1.2rem, 1rem + 0.55vw, 1.45rem); line-height: 1.15; }
.hm-service h3 { margin-top: 0; }
.hm-service h3::after { content: ""; display: block; width: 2rem; height: 2px; margin-top: var(--s-3); background: var(--accent-light); transition: width 0.6s var(--ease); }
.hm-service p {
  margin-top: auto;
  color: rgba(248, 250, 252, 0.86);
  font-size: 0.95rem;
  line-height: 1.5;
  transition: transform 0.7s var(--ease);
}
.hm-service:hover h3::after, .hm-service:focus-visible h3::after { width: 4rem; }
.hm-service:hover img,
.hm-service:focus-visible img { filter: none; transform: scale(1.06); }
.hm-service:hover p,
.hm-service:focus-visible p { transform: translateY(-4px); }
.js .hm-service[data-reveal] { transform: translateY(40px); transition: opacity 0.8s ease, transform 1.1s var(--ease); transition-delay: calc(var(--i) * 0.12s); }
.js .hm-service[data-reveal].is-in { transform: none; }

.hm-sectors { margin-top: calc(var(--section) * 1.2); }
.hm-sectors__head { margin-bottom: var(--s-6); }
.hm-sectors__head .section-title { font-size: calc(var(--fs-h2) - 4pt); }
.hm-sectors__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.hm-sectors__list { padding: 0; list-style: none; border-bottom: 1px solid var(--line-dark); }
.hm-sectors__list li {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--s-4);
  padding: 1.15rem 0;
  border-top: 1px solid var(--line-dark);
  cursor: default;
  outline-offset: -2px;
}
.hm-sectors__list li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.hm-sectors__n { grid-row: span 2; padding-top: 0.45rem; color: rgba(248, 250, 252, 0.45); font-size: var(--fs-ui); font-weight: 700; letter-spacing: 0.12em; transition: color 0.4s ease; }
.hm-sectors__name {
  color: rgba(248, 250, 252, 0.55);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: color 0.4s ease, transform 0.6s var(--ease);
}
.hm-sectors__text {
  max-height: 0;
  overflow: hidden;
  color: rgba(248, 250, 252, 0.68);
  font-size: 0.92rem;
  opacity: 0;
  transition: max-height 0.6s var(--ease), opacity 0.5s ease, margin 0.6s var(--ease);
}
.hm-sectors__thumb { display: none; }
.hm-sectors__list li.is-active::before { transform: scaleX(1); }
.hm-sectors__list li.is-active .hm-sectors__n { color: var(--accent-light); }
.hm-sectors__list li.is-active .hm-sectors__name { color: var(--cream); transform: translateX(6px); }
.hm-sectors__list li.is-active .hm-sectors__text { max-height: 4rem; margin-top: 0.35rem; opacity: 1; transform: translateX(6px); }
.hm-sectors__stage {
  position: sticky;
  top: calc(var(--header) + var(--s-5));
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--deep-2);
}
.hm-sectors__stage figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.7s ease; }
.hm-sectors__stage figure.is-active { opacity: 1; }
.hm-sectors__stage img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1.6s var(--ease); }
.hm-sectors__stage figure.is-active img { transform: none; }

/* ---------- Selected work: a pure-CSS 3D ring, the same construction as a CSS image slider ---------- */
.hm-work { padding: 0 0 calc(var(--section) * 1.3); overflow: hidden; background: var(--deep); }
.hm-work .hm-head { padding-top: calc(var(--section) * 1.1); border-top: 1px solid var(--line-dark); }
.hm-work .hm-head .section-title { max-width: 32ch; font-size: max(1.3rem, calc(var(--fs-h2) - 16px)); }
.hm-reel {
  position: relative;
  height: 36rem;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 40%;
}
.hm-reel__spin {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(24rem, 38vw);
  aspect-ratio: 16 / 10;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  animation: hm-reel-spin 28s linear infinite;
}
.hm-reel:hover .hm-reel__spin,
.hm-reel:focus-within .hm-reel__spin { animation-play-state: paused; }
.hm-reel__card {
  position: absolute;
  inset: 0;
  transform: rotateY(calc(var(--i) * 60deg)) translateZ(min(42vw, 26rem));
  transform-style: preserve-3d;
}
.hm-reel__card .hm-reel__link { transform-style: preserve-3d; }
.hm-reel__link {
  position: relative;
  display: block;
  height: 100%;
  color: var(--cream);
  text-decoration: none;
  background: #101820;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.45);
}
.hm-reel__link:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 4px; }
.hm-reel__link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hm-reel__meta {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 0.2rem;
  padding: 2rem 0.9rem 0.8rem;
  background: linear-gradient(transparent, rgba(5, 8, 12, 0.88));
  backface-visibility: hidden;
}
.hm-reel__meta strong { font-size: calc(1.05rem + 2.67px); font-weight: 600; letter-spacing: -0.01em; }
.hm-reel__meta span { color: rgba(248, 250, 252, 0.78); font-size: calc(0.68rem + 2.67px); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
@keyframes hm-reel-spin {
  from { transform: translate(-50%, -50%) rotateX(-16deg) rotateY(0deg); }
  to { transform: translate(-50%, -50%) rotateX(-16deg) rotateY(-360deg); }
}
.hm-work__count { color: rgba(248, 250, 252, 0.8); font-size: var(--fs-ui); font-weight: 700; letter-spacing: 0.14em; }
.hm-work__count small { color: rgba(248, 250, 252, 0.45); font-size: inherit; }
.hm-work__type { color: rgba(248, 250, 252, 0.8); font-size: var(--fs-ui); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }

/* ---------- Testimonials: an open notebook, one client note per page ---------- */
.hm-voices { padding: calc(var(--section) * 1.1) 0; overflow: hidden; background: linear-gradient(180deg, #efe8dc, var(--bg) 72%); }
.hm-book {
  display: grid;
  grid-template-columns: minmax(15rem, 0.78fr) minmax(0, 1.22fr);
  min-height: 28rem;
  overflow: hidden;
  border-radius: 0.35rem 1.15rem 1.15rem 0.35rem;
  background: #f7f1e6;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 28px 50px -28px rgba(48, 32, 14, 0.55);
}
.hm-book__cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.5rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.6rem) clamp(2rem, 3.4vw, 2.8rem);
  background:
    linear-gradient(90deg, #10243d 0 16px, transparent 16px),
    linear-gradient(160deg, #1d4d86, #14345c 62%, #0e243c);
  color: #fff;
}
.hm-book__cover::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 22px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.16) 46%, rgba(0, 0, 0, 0.18));
}
.hm-book__mark {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.hm-book__cover .hm-label { color: #fff; }
.hm-book__cover .hm-label em { color: #c5dbf2; }
.hm-book__cover .hm-subhead { max-width: 16ch; color: rgba(255, 255, 255, 0.78); }
.hm-voices__nav { display: flex; gap: var(--s-2); margin-top: 1.6rem; }
.hm-book__page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 28rem;
  padding: 1.7rem 1.5rem 1.15rem 2.15rem;
  background-color: #fbf7ef;
  background-image:
    linear-gradient(#c45b52, #c45b52),
    repeating-linear-gradient(transparent 0 1.9rem, rgba(31, 90, 158, 0.16) 1.9rem calc(1.9rem + 1px));
  background-repeat: no-repeat, repeat;
  background-size: 1.5px 100%, auto;
  background-position: 1.15rem 0, 0 0.55rem;
}
.hm-voices__stage { position: relative; }
.hm-voices__deck { display: grid; flex: 1; perspective: 1200px; }
.hm-voice {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-height: 18rem;
  margin: 0.4rem 0.2rem 0 0.35rem;
  padding: 0.15rem 0.2rem 0;
  background: transparent;
  transform-origin: left center;
}
.hm-voice:not(.is-active) { visibility: hidden; }
.hm-voice.is-out { z-index: 2; visibility: visible; animation: hm-page-turn 0.7s ease both; }
@keyframes hm-page-turn {
  to { opacity: 0; transform: rotateY(-78deg) translateX(-8%); }
}
.hm-voice blockquote {
  color: #243044;
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.92rem + 0.45vw, 1.28rem);
  font-weight: 500;
  line-height: 1.9rem;
  letter-spacing: -0.01em;
}
.hm-voice blockquote span { display: inline-block; opacity: 0; transform: translateY(0.35em); transition: opacity 0.3s ease, transform 0.3s ease; }
.hm-voice.is-active blockquote span { opacity: 1; transform: none; transition: opacity 0.45s ease, transform 0.55s var(--ease); transition-delay: calc(0.12s + var(--w) * 0.018s); }
.hm-voice figcaption {
  margin-top: auto;
  padding-top: 1.4rem;
  color: var(--accent-deep);
  font-family: var(--display);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease);
}
.hm-voice.is-active figcaption { opacity: 1; transform: none; transition-delay: 0.7s; }
.hm-voice figcaption span {
  display: inline-block;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid rgba(23, 69, 124, 0.35);
}
.hm-voices__dots { display: flex; gap: 0.4rem; align-self: flex-end; margin-top: 0.8rem; }
.hm-voices__dots span { position: relative; width: 1.7rem; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(31, 90, 158, 0.18); }
.hm-voices__dots span.is-active { width: 2.6rem; }
.hm-voices__dots i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hm-voices.is-playing .hm-voices__dots span.is-active i { animation: hm-progress 7s linear forwards; }
.hm-voices.is-paused .hm-voices__dots i { animation-play-state: paused; }
@keyframes hm-progress { to { transform: scaleX(1); } }

/* ---------- FAQ: a graphic board, every question visible ---------- */
.hm-faq { padding: calc(var(--section) * 0.9) 0 calc(var(--section) * 1.15); }
.hm-faq__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: 1.35rem;
}
.hm-faq .hm-label {
  white-space: nowrap;
  font-size: clamp(1.7rem, 0.85rem + 2.6vw, var(--fs-section));
}
.hm-faq .hm-subhead { flex: none; margin: 0 0 0.35rem; }
.hm-faq__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  border: 0;
}
.hm-faq__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: var(--edge);
  border-radius: calc(var(--radius) + 2px);
  background: #fff;
  box-shadow: var(--shadow);
}
.hm-faq__item h3 { font-size: inherit; }
.hm-faq__item button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem 0.8rem;
  width: 100%;
  padding: 0 0.95rem 0.95rem;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
}
.hm-faq__art {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  grid-column: 1 / -1;
  height: 6.1rem;
  margin: 0 -0.95rem;
  padding: 0.75rem 0.95rem;
  color: var(--accent);
  background:
    radial-gradient(circle at 82% 12%, rgba(31, 90, 158, 0.22), transparent 38%),
    linear-gradient(165deg, #e7f0fa 0%, #f7fafc 70%);
}
.hm-faq__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(31, 90, 158, 0.08) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(31, 90, 158, 0.08) 0 1px, transparent 1px 18px);
  mask-image: linear-gradient(180deg, #000 15%, transparent 90%);
}
.hm-faq__art { position: relative; }
.hm-faq__art b,
.hm-faq__art svg { position: relative; z-index: 1; }
.hm-faq__art b {
  color: var(--accent-deep);
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.hm-faq__art svg {
  width: 3.4rem;
  height: 3.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hm-faq__q {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
}
.hm-faq__item button i {
  position: relative;
  align-self: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.hm-faq__item button i::before,
.hm-faq__item button i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 1.5px;
  margin: -0.75px 0 0 -0.35rem;
  background: currentColor;
  transition: transform 0.45s var(--ease);
}
.hm-faq__item button i::after { transform: rotate(90deg); }
.hm-faq__item button:hover i { border-color: var(--accent); }
.hm-faq__item button[aria-expanded="true"] i { background: var(--accent); border-color: var(--accent); color: #fff; }
.hm-faq__item button[aria-expanded="true"] i::after { transform: rotate(0deg); }
.hm-faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.hm-faq__answer > div { overflow: hidden; }
.hm-faq__answer p { padding: 0 1rem 1.05rem; color: var(--muted); font-size: 0.9rem; line-height: 1.55; opacity: 0; transform: translateY(-6px); transition: opacity 0.4s ease, transform 0.5s var(--ease); }
.hm-faq__item:has([aria-expanded="true"]) .hm-faq__answer { grid-template-rows: 1fr; }
.hm-faq__item:has([aria-expanded="true"]) .hm-faq__answer p { opacity: 1; transform: none; transition-delay: 0.1s; }

/* ---------- Call to action, matching the other pages ---------- */
.hm-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
  padding: clamp(1.25rem, 2.3vw, 1.8rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(169, 200, 236, 0.22);
  border-radius: var(--radius-media);
  background:
    radial-gradient(circle at 85% 50%, rgba(47, 109, 181, 0.3), transparent 30%),
    linear-gradient(110deg, #0e1823, #16202a);
  color: var(--cream);
}
.hm-cta .section-title {
  max-width: none;
  color: #fff;
  font-size: calc(clamp(1.85rem, 1.4rem + 1.35vw, 2.8rem) - 2pt);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.hm-cta .section-title em { color: #a9c8ec; }
.hm-cta .pill { flex: none; background: #2f6db5; }
.hm-cta .pill:hover { background: #a9c8ec; color: #0e1823; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .hm-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-service { aspect-ratio: 4 / 3.6; }
  .hm-service p { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .hm-about__grid,
  .hm-sectors__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-faq__head { align-items: flex-start; flex-direction: column; gap: 0.45rem; }
  .hm-book { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hm-book__cover::after { display: none; }
  .hm-book__page { min-height: 22rem; }
  .hm-about__media { aspect-ratio: 16 / 12; max-height: none; margin: var(--s-4) 7% 9% 0; }
  .hm-sectors__stage { display: none; }
  .hm-sectors__list li { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .hm-sectors__thumb {
    display: block;
    grid-column: 2;
    width: 100%;
    max-height: 0;
    border-radius: var(--radius);
    object-fit: cover;
    opacity: 0;
    transition: max-height 0.7s var(--ease), opacity 0.5s ease, margin 0.7s var(--ease);
  }
  .hm-sectors__list li.is-active .hm-sectors__thumb { max-height: 14rem; margin-top: var(--s-3); opacity: 1; }
  .hm-reel { height: auto; overflow: visible; }
  .hm-reel__spin {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: auto;
    margin: 0 1.25rem;
    aspect-ratio: auto;
    transform: none;
    animation: none;
  }
  .hm-reel__card { position: static; transform: none; backface-visibility: visible; }
  .hm-reel__link { height: auto; aspect-ratio: 16 / 10; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .hm-hero { min-height: 600px; max-height: none; }
  .hm-hero::after {
    background:
      linear-gradient(0deg, rgba(5, 8, 12, 0.92) 0%, rgba(5, 8, 12, 0.6) 50%, rgba(5, 8, 12, 0.25) 100%);
  }
  .hm-hero__copy { padding-top: calc(var(--header) + var(--s-6)); }
  .hm-hero__title { font-size: calc(clamp(2.05rem, 9.5vw, 2.85rem) - 4px); }
  .hm-hero__scroll { display: none; }
  .hm-hero__copy { padding-bottom: var(--s-7); }
  .hm-mode__opt { padding: 0.45rem 0.75rem; }
  .hm-head { margin-bottom: var(--s-6); }
  .hm-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); }
  .hm-stats__list > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hm-about__badge { width: 5.75rem; height: 5.75rem; top: -1.4rem; right: 0.6rem; }
  .hm-about__badge text { font-size: 12px; }
  .hm-about__badge b { width: 2.3rem; height: 2.3rem; font-size: 0.75rem; }
  .hm-clients__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
  .hm-clients__title { grid-column: 1 / -1; grid-row: 1; }
  .hm-iso img { height: 4.5rem; }
  .hm-orbit { --orbit-w: 38vw; height: calc(var(--orbit-w) * 2.3); }
  .hm-orbit { --orbit-w: 42vw; }
  .hm-orbit__text { gap: 0.25rem; padding: 1.6rem 0.55rem 0.55rem; }
  .hm-orbit__text strong { font-size: 0.66rem; }
  .hm-orbit__text small { font-size: 0.56rem; line-height: 1.35; }
  .hm-ring__dialog[open] { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .hm-ring__dialog-media { min-height: 0; aspect-ratio: 16 / 10; }
  .hm-book__page { padding-right: 1rem; padding-left: 1.7rem; }
  .hm-services__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-service { aspect-ratio: 16 / 12; }
  .hm-faq__list { grid-template-columns: minmax(0, 1fr); }
  .hm-faq .hm-label { font-size: calc(clamp(1.65rem, 7.4vw, 2.4rem) - 4px); }
  .hm-cta { flex-direction: column; align-items: flex-start; }
  .hm-cta .section-title { white-space: normal; }
}
@media (max-width: 560px) {
  .hm-hero__actions .pill,
  .hm-hero__actions .hm-hero__ghost { flex: 1; justify-content: center; }
  .hm-reel__spin { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hm-hero__stage { animation: none; transform: none; inset: 0; }
  .hm-hero__slide, .hm-hero__slide img, .hm-line > *, .hm-hero__sub, .hm-voice,
  .hm-sectors__stage figure, .hm-sectors__stage img, .hm-faq__answer, .hm-faq__answer p { transition: none; }
  .hm-hero__slide img { transform: none; }
  .hm-hero__scroll i::after, .hm-faq__item:not([hidden]) { animation: none; }
  .hm-about__badge svg { animation: none; }
  .hm-voice, .hm-voice blockquote span, .hm-voice figcaption { transition: none; }
  .hm-voice.is-out { animation: none; }
  .hm-reel__spin { animation: none; }
  .hm-ring__dialog[open] { animation: none; }
  .hm-stats dt, .hm-stats__list > div::before, .hm-iso img, .hm-hero__glow, .hm-mode__cloud, .hm-mode__stars { animation: none; }
  .js .hm-hero__actions { animation: none; }
  .js .hm-about__main img, .js .hm-about__inset, .js .hm-about__frame, .js .hm-about__badge { clip-path: none; filter: none; opacity: 1; transform: none; transition: none; }
  .js .hm-stats__list > div { opacity: 1; transform: none; transition: none; }
  .js .hm-orbit[data-reveal] .hm-orbit__ring { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  .hm-reel { height: auto; overflow: visible; }
  .hm-reel__spin {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    width: auto;
    margin: 0 clamp(1.25rem, 4vw, 4rem);
    aspect-ratio: auto;
    transform: none;
  }
  .hm-reel__card { position: static; transform: none; backface-visibility: visible; }
  .hm-reel__link { height: auto; aspect-ratio: 16 / 10; }
}

/* ---------- October homepage refinements ---------- */
/* Hanging brass lantern: unlit in day vision, glowing in night vision. */
.hm-hero__mode { top: var(--header); }
.hm-mode {
  position: relative;
  flex-direction: column;
  gap: 0.3rem;
  width: 7.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hm-mode__cord {
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(#4e3b1d, #b58a3c);
  box-shadow: 1px 0 rgba(255, 221, 143, 0.2);
}
.hm-mode__lantern {
  position: relative;
  display: block;
  width: 3.15rem;
  height: 4.2rem;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.36));
  transform-origin: 50% -2.4rem;
  transition: filter 0.6s ease, transform 0.45s var(--ease);
}
.hm-mode:hover .hm-mode__lantern { transform: rotate(2deg); }
.hm-mode__cap,
.hm-mode__base {
  position: absolute;
  left: 50%;
  z-index: 2;
  display: block;
  width: 2.7rem;
  height: 0.62rem;
  border: 1px solid #7b591d;
  border-radius: 50%;
  background: linear-gradient(90deg, #8a641f, #e6bc5f 48%, #8a641f);
  transform: translateX(-50%);
}
.hm-mode__cap { top: 0.32rem; }
.hm-mode__cap::before {
  content: "";
  position: absolute;
  bottom: 0.42rem;
  left: 50%;
  width: 1.3rem;
  height: 0.75rem;
  border: 2px solid #c69b43;
  border-bottom: 0;
  border-radius: 1rem 1rem 0 0;
  transform: translateX(-50%);
}
.hm-mode__base { bottom: 0.2rem; height: 0.78rem; }
.hm-mode__glass {
  position: absolute;
  top: 0.72rem;
  right: 0.55rem;
  bottom: 0.7rem;
  left: 0.55rem;
  display: block;
  border: 2px solid #b18431;
  border-radius: 0.35rem 0.35rem 0.6rem 0.6rem;
  background: rgba(45, 40, 31, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 231, 174, 0.16);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}
.hm-mode__glass::before,
.hm-mode__glass::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #b18431;
}
.hm-mode__glass::before { left: 32%; }
.hm-mode__glass::after { right: 32%; }
.hm-mode__flame {
  position: absolute;
  bottom: 1.03rem;
  left: 50%;
  z-index: 3;
  display: block;
  width: 0.7rem;
  height: 1.15rem;
  border-radius: 70% 30% 65% 35%;
  background: radial-gradient(circle at 50% 72%, #fff6bd 0 18%, #ffd252 40%, #ef8b1f 78%);
  box-shadow: 0 0 14px 5px rgba(255, 190, 48, 0.8);
  opacity: 0;
  transform: translateX(-50%) rotate(4deg) scale(0.5);
  transition: opacity 0.5s ease, transform 0.6s var(--ease);
}
.hm-mode[aria-pressed="true"] .hm-mode__lantern {
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 20px rgba(255, 188, 47, 0.72));
}
.hm-mode[aria-pressed="true"] .hm-mode__glass {
  background: radial-gradient(circle at 50% 62%, rgba(255, 223, 108, 0.9), rgba(233, 151, 26, 0.3) 58%, rgba(59, 44, 20, 0.38));
  box-shadow: inset 0 0 12px rgba(255, 241, 180, 0.75), 0 0 22px rgba(255, 188, 47, 0.58);
}
.hm-mode[aria-pressed="true"] .hm-mode__flame {
  opacity: 1;
  transform: translateX(-50%) rotate(4deg) scale(1);
  animation: hm-lantern-flame 0.9s ease-in-out infinite alternate;
}
@keyframes hm-lantern-flame {
  to { transform: translateX(-50%) rotate(-3deg) scale(0.9, 1.08); }
}
.hm-mode__label {
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(5, 8, 12, 0.62);
  font-size: 0.58rem;
  letter-spacing: 0.13em;
}
.hm-mode:focus-visible { outline-offset: 0.3rem; }

/* The same brand statement remains aligned and readable on every hero image. */
.hm-hero__text { max-width: 38rem; }
.hm-hero__title {
  font-size: calc(clamp(2.25rem, 1.35rem + 3.5vw, 4.75rem) - 4px);
  text-shadow: 0 3px 28px rgba(5, 8, 12, 0.78);
}
.hm-hero__sub {
  max-width: 34rem;
  padding-left: 1rem;
  border-left: 3px solid var(--accent-light);
  font-size: calc(clamp(0.95rem, 0.82rem + 0.35vw, 1.2rem) - 2px);
}

/* Digital presence: a 3D reel of eight project cards. */
.hm-presence {
  padding: 0 0 calc(var(--section) * 1.15);
  overflow: hidden;
  background: var(--deep);
}
.hm-presence .hm-head {
  padding-top: calc(var(--section) * 0.95);
  border-top: 1px solid var(--line-dark);
}
.hm-presence .hm-label { color: #fff; }
.hm-presence .hm-label em { color: var(--accent-light); }
.hm-presence .hm-subhead { color: rgba(248, 250, 252, 0.78); }
.hm-reel--presence { height: 39rem; }
.hm-reel--presence .hm-reel__spin {
  width: min(21rem, 32vw);
  animation-duration: 36s;
}
.hm-reel--presence .hm-reel__card {
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(min(47vw, 30rem));
}

/* Testimonial notebook: handwriting is traced while the pen moves, then the page turns. */
.hm-book__cover { grid-template-columns: 1fr; }
.hm-book__page { overflow: hidden; }
.hm-pen {
  position: absolute;
  top: 3.15rem;
  left: 2.5rem;
  z-index: 6;
  width: 8rem;
  height: 0.72rem;
  border-radius: 70% 0.2rem 0.2rem 70%;
  background: linear-gradient(180deg, #173e70, #09233f 58%, #051426);
  box-shadow: 0 4px 5px rgba(31, 42, 58, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: rotate(-18deg);
}
.hm-pen::before {
  content: "";
  position: absolute;
  right: -1rem;
  top: 0.08rem;
  border-top: 0.28rem solid transparent;
  border-bottom: 0.28rem solid transparent;
  border-left: 1.1rem solid #b79455;
}
.hm-pen::after {
  content: "";
  position: absolute;
  right: -1.18rem;
  top: 0.22rem;
  border-top: 0.13rem solid transparent;
  border-bottom: 0.13rem solid transparent;
  border-left: 0.34rem solid #243044;
}
.hm-voices.is-playing .hm-pen {
  opacity: 1;
  animation: hm-pen-write var(--voice-write, 4.45s) linear both;
}
.hm-voices.is-paused .hm-pen,
.hm-voices.is-paused .hm-voice.is-active blockquote span { animation-play-state: paused; }
.hm-voices.is-playing .hm-voices__dots span.is-active i { animation-duration: var(--voice-hold, 7s); }
@keyframes hm-pen-write {
  0% { translate: 0 0; }
  18% { translate: calc(100% + 12rem) 0; }
  20% { translate: 0 1.9rem; }
  38% { translate: calc(100% + 12rem) 1.9rem; }
  40% { translate: 0 3.8rem; }
  58% { translate: calc(100% + 12rem) 3.8rem; }
  60% { translate: 0 5.7rem; }
  78% { translate: calc(100% + 12rem) 5.7rem; }
  80% { translate: 0 7.6rem; opacity: 1; }
  96% { translate: calc(100% + 12rem) 7.6rem; opacity: 1; }
  100% { translate: calc(100% + 12rem) 7.6rem; opacity: 0; }
}
.hm-voice blockquote { font-family: var(--display); }
.hm-voice.is-active blockquote span {
  opacity: 0;
  transform: none;
  transition: none;
}
.hm-voices.is-playing .hm-voice.is-active blockquote span {
  animation: hm-ink-word 0.38s ease both;
  animation-delay: calc(0.22s + var(--w) * 0.07s);
}
@keyframes hm-ink-word {
  from { opacity: 0; filter: blur(1.2px); clip-path: inset(0 100% 0 0); }
  to { opacity: 1; filter: none; clip-path: inset(0); }
}
.hm-voice.is-out {
  transform-origin: left center;
  box-shadow: -18px 0 30px rgba(48, 32, 14, 0.14);
  animation-duration: 1s;
}
@keyframes hm-page-turn {
  45% { opacity: 1; transform: perspective(1200px) rotateY(-42deg) translateX(-3%); }
  to { opacity: 0; transform: perspective(1200px) rotateY(-105deg) translateX(-12%); }
}

/* Compact, single-column accordion. All questions remain visible; answers open on +. */
.hm-faq { padding: calc(var(--section) * 0.7) 0 calc(var(--section) * 0.85); }
.hm-faq .hm-label {
  font-size: calc(clamp(1.9rem, 1.35rem + 1.5vw, 2.75rem) - 4px);
}
.hm-faq__list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.hm-faq__item {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.hm-faq__item button {
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  min-height: 4.5rem;
  padding: 0.75rem 0.2rem;
  cursor: pointer;
}
.hm-faq__art {
  grid-column: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
}
.hm-faq__art::before,
.hm-faq__art svg { display: none; }
.hm-faq__art b {
  font-size: 1rem;
  letter-spacing: 0.08em;
}
.hm-faq__q { font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.08rem); }
.hm-faq__answer p {
  max-width: 58rem;
  padding: 0 3.4rem 1.2rem;
  font-size: 0.9rem;
}
.hm-faq__item:has([aria-expanded="true"]) { background: rgba(227, 236, 246, 0.42); }

@media (max-width: 900px) {
  .hm-reel--presence { height: auto; }
  .hm-reel--presence .hm-reel__spin {
    position: static;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(76vw, 22rem);
    gap: 1rem;
    width: auto;
    margin: 0;
    padding: 0 1.25rem 1rem;
    overflow-x: auto;
    aspect-ratio: auto;
    transform: none;
    animation: none;
    scroll-snap-type: x mandatory;
  }
  .hm-reel--presence .hm-reel__card {
    position: static;
    transform: none;
    scroll-snap-align: center;
  }
  .hm-reel--presence .hm-reel__link { height: auto; aspect-ratio: 16 / 10; }
}

@media (max-width: 760px) {
  .hm-mode__cord { height: 1.2rem; }
  .hm-mode__lantern { width: 2.45rem; height: 3.35rem; }
  .hm-mode__label { font-size: 0.5rem; }
  .hm-hero__copy { padding-top: calc(var(--header) + 6rem); }
  .hm-hero__title { font-size: calc(clamp(2.05rem, 9vw, 2.7rem) - 4px); }
  .hm-hero__sub { padding-left: 0.75rem; }
  .hm-book { grid-template-columns: minmax(0, 1fr); }
  .hm-book__cover { min-height: 12rem; }
  .hm-pen { display: none; }
  .hm-faq__item button { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
  .hm-faq__answer p { padding-left: 3.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-mode[aria-pressed="true"] .hm-mode__flame,
  .hm-voices.is-playing .hm-pen,
  .hm-voices.is-playing .hm-voice.is-active blockquote span { animation: none; }
  .hm-pen { display: none; }
  .hm-voice.is-active blockquote span { opacity: 1; clip-path: none; filter: none; }
}

/* ---------- Our process: six steps on one line that draws in ---------- */
.hm-process { padding: calc(var(--section) * 1.15) 0; background: var(--bg); }
.hm-process .hm-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.hm-process .hm-label em { color: var(--accent-deep); }
.hm-process__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-process__grid::before,
.hm-process__grid::after {
  content: "";
  position: absolute;
  top: 0.45rem;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
}
.hm-process__grid::after {
  height: 2px;
  margin-top: -0.5px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2.2s var(--ease) 0.2s;
}
.js .hm-process__grid[data-reveal] { opacity: 1; transform: none; }
.hm-process__grid.is-in::after,
html:not(.js) .hm-process__grid::after { transform: scaleX(1); }
.hm-process__grid > li {
  position: relative;
  padding-top: 2.1rem;
  transition: opacity 0.7s ease, transform 0.8s var(--ease);
  transition-delay: calc(0.25s + var(--i) * 0.28s);
}
.js .hm-process__grid:not(.is-in) > li { opacity: 0; transform: translateY(16px); }
.hm-process__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--accent-deep);
  border-radius: 50%;
  background: var(--bg);
  transition: background 0.4s ease, box-shadow 0.4s ease;
  transition-delay: inherit;
}
.hm-process__grid.is-in .hm-process__dot { background: var(--accent-deep); box-shadow: 0 0 0 5px var(--accent-soft); }
.hm-process__grid b {
  display: block;
  color: var(--accent-deep);
  font-family: var(--display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}
.hm-process__grid h3 {
  margin: 0.9rem 0 0.5rem;
  color: var(--ink);
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.15rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.hm-process__grid p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

@media (max-width: 1100px) {
  .hm-process__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.75rem; }
  .hm-process__grid::before, .hm-process__grid::after { display: none; }
  .hm-process__grid > li { border-top: 1px solid var(--line); padding-top: 1.6rem; }
  .hm-process__dot { top: -0.45rem; }
}

@media (max-width: 760px) {
  .hm-process__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-left: 1.75rem; }
  .hm-process__grid::before, .hm-process__grid::after { display: block; top: 0.5rem; bottom: 0.5rem; left: 0.4rem; right: auto; width: 1px; height: auto; }
  .hm-process__grid::after { width: 2px; margin: 0 0 0 -0.5px; transform: scaleY(0); transform-origin: top; }
  .hm-process__grid.is-in::after { transform: scaleY(1); }
  .hm-process__grid > li { border-top: 0; padding: 0 0 2rem; }
  .hm-process__dot { top: 0.35rem; left: -1.75rem; }
  .hm-process__grid h3 { margin-top: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-process__grid::after { transform: none; transition: none; }
  .hm-process__grid > li, .js .hm-process__grid:not(.is-in) > li { opacity: 1; transform: none; transition: none; }
}
/* ---------- Selected work: a fixed collage of the six featured projects ---------- */
.hm-work { padding-bottom: calc(var(--section) * 1.2); }
.hm-collage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(11rem, 15.5vw, 14.5rem);
  gap: clamp(0.6rem, 1.1vw, 0.95rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-collage__tile:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.hm-collage__tile:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
.hm-collage__tile:nth-child(3) { grid-column: 3; grid-row: 2; }
.hm-collage__tile:nth-child(4) { grid-column: 4; grid-row: 2; }
.hm-collage__tile:nth-child(5) { grid-column: 1; grid-row: 3; }
.hm-collage__tile:nth-child(6) { grid-column: 2 / 5; grid-row: 3; }
.hm-collage__tile { position: relative; overflow: hidden; border-radius: var(--radius-media); background: var(--deep-2); }
.js .hm-collage__tile[data-reveal] { transform: translateY(18px) scale(0.98); transition-delay: calc(var(--i) * 0.08s); }
.js .hm-collage__tile[data-reveal].is-in { transform: none; }
.hm-collage__tile a { position: absolute; inset: 0; color: var(--cream); text-decoration: none; }
.hm-collage__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter 0.5s ease;
}
.hm-collage__tile a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 9, 14, 0.86) 0%, rgba(5, 9, 14, 0.35) 38%, transparent 62%);
}
.hm-collage__meta {
  position: absolute;
  right: 3.75rem;
  bottom: clamp(0.85rem, 1.6vw, 1.25rem);
  left: clamp(0.9rem, 1.6vw, 1.35rem);
  z-index: 1;
  display: grid;
  gap: 0.25rem;
  transition: transform 0.5s var(--ease);
}
.hm-collage__meta small { color: rgba(248, 250, 252, 0.7); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; }
.hm-collage__meta strong {
  font-family: var(--display);
  font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hm-collage__tile:nth-child(1) .hm-collage__meta strong { font-size: clamp(1.7rem, 1.1rem + 2vw, 3rem); }
.hm-collage__meta > span { color: var(--accent-light); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.hm-collage__go {
  position: absolute;
  right: clamp(0.85rem, 1.6vw, 1.25rem);
  bottom: clamp(0.85rem, 1.6vw, 1.25rem);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(248, 250, 252, 0.55);
  border-radius: 50%;
  transition: background 0.3s ease, color 0.3s ease, transform 0.4s var(--ease);
}
.hm-collage__tile a:hover img,
.hm-collage__tile a:focus-visible img { transform: scale(1.07); }
.hm-collage__tile a:hover .hm-collage__meta { transform: translateY(-4px); }
.hm-collage__tile a:hover .hm-collage__go,
.hm-collage__tile a:focus-visible .hm-collage__go { background: #fff; color: var(--ink); transform: rotate(-45deg); }
.hm-collage__tile a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: -4px; border-radius: var(--radius-media); }
.hm-collage:hover .hm-collage__tile:not(:hover) img { filter: brightness(0.6) saturate(0.85); }

@media (max-width: 900px) {
  .hm-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(9.5rem, 30vw, 13rem); }
  .hm-collage__tile:nth-child(n) { grid-column: auto; grid-row: auto; }
  .hm-collage__tile:nth-child(1) { grid-column: 1 / -1; grid-row: span 2; }
  .hm-collage__tile:nth-child(6) { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .hm-collage__tile:nth-child(1) { grid-row: span 1; }
  .hm-collage__meta { right: 0.9rem; }
  .hm-collage__go { display: none; }
}

/* ---------- Testimonials: a spiral diary written by hand, page by page ---------- */
.hm-diary-zone .hm-head { align-items: flex-end; margin-bottom: 0; }
.hm-diary-zone .hm-label em { color: var(--accent-deep); }
.hm-diary__nav { margin-top: 0; }
.hm-diary {
  position: relative;
  display: flex;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  perspective: 2600px;
}
.hm-diary__book {
  --pw: min(30rem, 45vw);
  --lh: 2.15rem;
  position: relative;
  width: calc(var(--pw) * 2);
  height: calc(var(--pw) * 0.98);
  transform-style: preserve-3d;
  transform: translateX(calc(var(--pw) * -0.5)) rotateX(9deg);
  transition: transform 1.6s var(--ease);
}
.hm-diary__book.is-open { transform: rotateX(9deg); }
.hm-diary__book::before {
  content: "";
  position: absolute;
  inset: 6% 2% -5%;
  border-radius: 50%;
  background: rgba(40, 28, 12, 0.28);
  filter: blur(26px);
  transform: translateZ(-20px);
  transition: inset 1.6s var(--ease);
}
.hm-diary__book:not(.is-open)::before { inset: 6% 2% -5% 52%; }
.hm-diary__paper {
  background-color: #fbf8f1;
  background-image:
    linear-gradient(90deg, rgba(60, 40, 15, 0.1), transparent 9%),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), rgba(31, 90, 158, 0.14) calc(var(--lh) - 1px) var(--lh));
  background-position: 0 0, 0 calc(1.35rem - var(--lh) * 0.22);
  background-repeat: no-repeat, repeat;
}
.hm-diary__page--left,
.hm-diary__leaf .hm-diary__face--back { background-position: 0 0, 0 calc(1.35rem - var(--lh) * 0.22); }
.hm-diary__page {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 18px 30px rgba(60, 40, 15, 0.14);
}
.hm-diary__page--left {
  left: 0;
  border-radius: 12px 0 0 12px;
  background-image:
    linear-gradient(270deg, rgba(60, 40, 15, 0.12), transparent 9%),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), rgba(31, 90, 158, 0.14) calc(var(--lh) - 1px) var(--lh));
  opacity: 0;
  transition: opacity 0.2s ease 0.9s;
}
.hm-diary__book.is-open .hm-diary__page--left { opacity: 1; }
.hm-diary__page--right { left: 50%; border-radius: 0 12px 12px 0; }
.hm-diary__sheet { position: absolute; inset: 0; padding: 1.35rem 1.6rem 1.2rem 2.4rem; overflow: hidden; }
.hm-diary__date {
  margin: 0;
  height: var(--lh);
  color: var(--accent-deep);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: var(--lh);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hm-diary__date small { color: rgba(24, 33, 43, 0.4); font-size: inherit; }
.hm-diary__ink,
.hm-diary__sign {
  margin: 0;
  color: #1b2f4d;
  font-family: var(--display);
  font-size: clamp(0.95rem, 0.7rem + 0.55vw, 1.16rem);
  line-height: var(--lh);
}
.hm-diary__ink { margin-top: var(--lh); font-weight: 500; letter-spacing: -0.005em; }
.hm-diary__sign { margin-top: var(--lh); text-align: right; font-weight: 700; }
.hm-diary__word { display: inline-block; clip-path: inset(-20% 100% -20% -2%); }
.hm-diary__word.is-done { clip-path: none; }
.hm-diary__folio {
  position: absolute;
  right: 0;
  bottom: 0.9rem;
  left: 0;
  margin: 0;
  color: rgba(24, 33, 43, 0.32);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-align: center;
  text-transform: uppercase;
}
.hm-diary__spiral {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2.3rem;
  transform: translateX(-50%) translateZ(6px);
  pointer-events: none;
}
.hm-diary__spiral i {
  height: 0.42rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #fafbfc 0%, #b9c0c9 40%, #5b626b 72%, #c7ccd3 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.28);
}
.hm-diary__cover,
.hm-diary__leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
}
.hm-diary__cover {
  transform: translateZ(2px) rotateY(0deg);
  transition: transform 1.6s cubic-bezier(0.55, 0.05, 0.2, 1) 0.15s;
}
.hm-diary__book.is-open .hm-diary__cover { transform: translateZ(2px) rotateY(-180deg); }
.hm-diary__book.has-turned .hm-diary__cover { visibility: hidden; }
.hm-diary__leaf { z-index: 3; }
.hm-diary__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0 12px 12px 0;
  backface-visibility: hidden;
}
.hm-diary__face--back { border-radius: 12px 0 0 12px; transform: rotateY(180deg); }
.hm-diary__leaf .hm-diary__face--back {
  background-image:
    linear-gradient(270deg, rgba(60, 40, 15, 0.12), transparent 9%),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), rgba(31, 90, 158, 0.14) calc(var(--lh) - 1px) var(--lh));
}
.hm-diary__cover .hm-diary__face--front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2.4rem 2rem 2.9rem;
  color: #fff;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, 0.16), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 5px),
    linear-gradient(140deg, #2464ad, #17457c 55%, #0e2f5c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 34px rgba(10, 30, 60, 0.3);
}
.hm-diary__cover .hm-diary__face--front::after {
  content: "";
  position: absolute;
  inset: 0.8rem 0.8rem 0.8rem 1.6rem;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  pointer-events: none;
}
.hm-diary__band {
  position: absolute;
  top: 0;
  right: 13%;
  bottom: 0;
  width: 0.7rem;
  background: linear-gradient(90deg, #0a2346, #123a6d 50%, #0a2346);
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.25);
}
.hm-diary__brand { margin: 0 0 1.1rem; color: rgba(255, 255, 255, 0.78); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; }
.hm-diary__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.hm-diary__tag { margin: 1rem 0 0; color: #c5dbf2; font-size: 0.95rem; }
.hm-diary__cover .hm-diary__face--back { display: grid; place-items: center; padding: 2rem 3rem; }
.hm-diary__inside { margin: 0; max-width: 16rem; color: rgba(24, 33, 43, 0.55); font-size: 0.95rem; line-height: 1.6; text-align: center; }

/* The pen: its tip sits on the element's origin, the body leans away like a right hand holds it. */
.hm-quill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  will-change: transform;
}
.hm-quill.is-on { opacity: 1; }
.hm-quill__pen,
.hm-quill__shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0.8rem;
  height: 9.6rem;
  transform-origin: 50% 100%;
}
.hm-quill__pen { transform: translate(-50%, calc(var(--lift, 0) * -9px)) rotate(30deg); }
.hm-quill__shadow {
  border-radius: 999px;
  background: rgba(30, 24, 14, 0.42);
  filter: blur(4px);
  opacity: calc(0.55 - var(--lift, 0) * 0.25);
  transform: translate(calc(-50% + 4px + var(--lift, 0) * 12px), calc(var(--lift, 0) * 4px)) rotate(56deg) scaleY(0.92);
}
.hm-quill__pen i { position: absolute; left: 0; right: 0; display: block; }
.hm-quill__nib {
  bottom: 0;
  height: 1.15rem;
  background: linear-gradient(90deg, #8a6a2b, #f3d58a 45%, #b48a3a 60%, #6e5222);
  clip-path: polygon(50% 100%, 6% 22%, 6% 0, 94% 0, 94% 22%);
}
.hm-quill__grip {
  bottom: 1.1rem;
  height: 1.7rem;
  border-radius: 2px;
  background: linear-gradient(90deg, #1b1f26, #5b6370 35%, #aab2bd 46%, #3a414c 62%, #12161c);
}
.hm-quill__barrel {
  bottom: 2.75rem;
  height: 5.6rem;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, #08142a 0%, #1c3a66 28%, #6f92c4 42%, #23467a 58%, #0a1730 100%);
}
.hm-quill__cap {
  bottom: 8.3rem;
  height: 1.3rem;
  border-radius: 0.5rem 0.5rem 2px 2px;
  background: linear-gradient(90deg, #6e5222, #e9c776 42%, #f8e3a6 50%, #a37c31 70%, #5a431b);
}
.hm-quill__pen .hm-quill__clip {
  bottom: 4.6rem;
  left: auto;
  right: -0.2rem;
  width: 0.22rem;
  height: 4.6rem;
  border-radius: 2px;
  background: linear-gradient(90deg, #8a6a2b, #f3d58a, #8a6a2b);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

@media (max-width: 760px) {
  .hm-diary { perspective: 1800px; }
  .hm-diary__book { --lh: 1.95rem; width: min(calc(100% - 0.75rem), 25rem); height: auto; aspect-ratio: 10 / 11; margin-left: 0.75rem; transform: none; }
  .hm-diary__book.is-open { transform: none; }
  .hm-diary__book::before { inset: 8% 4% -4%; }
  .hm-diary__book:not(.is-open)::before { inset: 8% 4% -4%; }
  .hm-diary__page--left { display: none; }
  .hm-diary__page--right,
  .hm-diary__cover,
  .hm-diary__leaf { left: 0; width: 100%; }
  .hm-diary__spiral { left: 0; }
  .hm-diary__book.is-open .hm-diary__cover { opacity: 0; transition: transform 1.6s cubic-bezier(0.55, 0.05, 0.2, 1) 0.15s, opacity 0.4s ease 1.2s; }
  .hm-diary__sheet { padding: 1.2rem 1.2rem 1rem 2.1rem; }
  .hm-diary__ink, .hm-diary__sign { font-size: 0.95rem; }
  .hm-quill__pen, .hm-quill__shadow { height: 7.6rem; width: 0.66rem; }
  .hm-quill__barrel { height: 4.2rem; }
  .hm-quill__cap { bottom: 6.9rem; height: 0.7rem; }
  .hm-quill__pen .hm-quill__clip { bottom: 3.6rem; height: 3.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-diary__book, .hm-diary__cover, .hm-diary__page--left { transition: none; }
  .hm-quill { display: none; }
}

/* ---------- Digital presence: names on both faces, pause only over a card ---------- */
.hm-reel--presence .hm-reel__link { background: transparent; }
.hm-reel--presence .hm-reel__link > img,
.hm-reel--presence .hm-reel__link > .hm-reel__meta { backface-visibility: hidden; }
.hm-reel__back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #101820;
  transform: rotateY(180deg) translateZ(1px);
  backface-visibility: hidden;
}
.hm-reel__back img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); }
.hm-reel--presence:hover .hm-reel__spin,
.hm-reel--presence:focus-within .hm-reel__spin { animation-play-state: running; }
.hm-reel--presence .hm-reel__spin:has(.hm-reel__link:hover),
.hm-reel--presence .hm-reel__spin:has(.hm-reel__link:focus-visible) { animation-play-state: paused; }
@media (max-width: 900px) {
  .hm-reel__back { display: none; }
}
/* ---------- Pull-cord day / night switch ---------- */
.hm-hero__mode.hm-cord {
  top: var(--header);
  left: auto;
  right: clamp(1.25rem, 5vw, 4.5rem);
  z-index: 6;
  width: 44px;
  height: 8.5rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.hm-cord__sway {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: top center;
  animation: hm-cord-sway 4.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes hm-cord-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}
.hm-cord__pull {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hm-cord__pull.is-pulling {
  animation: hm-cord-yank 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
}
@keyframes hm-cord-yank {
  0% { transform: translate(-50%, 0); }
  35% { transform: translate(-50%, 13px); }
  65% { transform: translate(-50%, -3px); }
  100% { transform: translate(-50%, 0); }
}
.hm-cord__line {
  width: 1.5px;
  height: 6.4rem;
  background: #000;
}
.hm-cord__knob {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 34px;
  margin-top: -1px;
  padding: 0;
  border: 0;
  border-radius: 40% 40% 46% 46% / 34% 34% 60% 60%;
  color: #2a2115;
  background: radial-gradient(circle at 36% 30%, #f9edd0 0%, #d8b57e 52%, #7c6238 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  transition: box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hm-cord__knob:hover { transform: translateY(1px) scale(1.04); }
.hm-cord__knob:active { transform: translateY(2px) scale(0.98); }
.hm-cord__knob:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.hm-cord__knob[aria-pressed="true"] {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 0 18px 2px rgba(234, 141, 63, 0.7);
}
.hm-cord__ico {
  position: absolute;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hm-cord__ico--moon { opacity: 0; transform: rotate(-45deg) scale(0.7); }
.hm-cord__knob[aria-pressed="true"] .hm-cord__ico--sun { opacity: 0; transform: rotate(45deg) scale(0.7); }
.hm-cord__knob[aria-pressed="true"] .hm-cord__ico--moon { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hm-cord__sway { animation: none; }
}

/* Hero night vision now uses real after-dark photographs, not a graded copy of the day shot. */
.hm-hero__night img { filter: none; }

/* ---------- Day to night comparison ---------- */
.hm-daynight {
  padding: 0 0 calc(var(--section) * 1.15);
  background: var(--deep);
  color: var(--cream);
}
.hm-daynight .hm-head {
  padding-top: calc(var(--section) * 0.95);
  border-top: 1px solid var(--line-dark);
}
.hm-daynight .hm-label { color: #fff; }
.hm-daynight .hm-label em { color: var(--accent-light); }
.hm-daynight .hm-head > div { max-width: none; }
.hm-daynight .hm-subhead { max-width: none; color: rgba(248, 250, 252, 0.78); }
.hm-daynight__stage { position: relative; margin: 0; }

.hm-compare {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: #0b0b0a;
  box-shadow: 0 1px 0 0 rgba(248, 250, 252, 0.24) inset, 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  user-select: none;
  touch-action: pan-y;
}
.hm-compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}
.hm-compare__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
  will-change: clip-path;
}
.hm-compare__tag {
  position: absolute;
  top: var(--s-4);
  z-index: 4;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(248, 250, 252, 0.14);
  border-radius: 100px;
  background: rgba(10, 10, 9, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(248, 250, 252, 0.9);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hm-compare__tag--day { left: var(--s-4); }
.hm-compare__tag--night { right: var(--s-4); }
.hm-compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  z-index: 5;
  width: 2px;
  transform: translateX(-1px);
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0), rgba(248, 250, 252, 0.9) 18%, rgba(248, 250, 252, 0.9) 82%, rgba(248, 250, 252, 0));
  box-shadow: 0 0 14px -1px rgba(248, 250, 252, 0.5);
  pointer-events: none;
}
.hm-compare__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--deep);
  background: rgba(248, 250, 252, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(248, 250, 252, 0.12);
  transform: translate(-50%, -50%);
}
.hm-compare:not(.is-touched) .hm-compare__handle { animation: hm-compare-pulse 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes hm-compare-pulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(248, 250, 252, 0.12); }
  50% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 12px rgba(248, 250, 252, 0.05); }
}
.hm-compare__range {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.hm-compare__range:focus-visible ~ .hm-compare__divider .hm-compare__handle {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

.hm-daynight__switch {
  position: relative;
  display: inline-flex;
  margin-top: var(--s-5);
  padding: 4px;
  border: 1px solid rgba(248, 250, 252, 0.24);
  border-radius: 100px;
  background: var(--deep-2);
  isolation: isolate;
}
.hm-daynight__thumb {
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 100px;
  background: var(--cream);
  transform: translateX(var(--thumb, 0%));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.hm-daynight__seg {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: 100px;
  background: none;
  color: rgba(248, 250, 252, 0.6);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hm-daynight__seg:hover { color: var(--cream); }
.hm-daynight__seg[aria-pressed="true"],
.hm-daynight__seg[aria-pressed="true"]:hover { color: var(--deep); }
.hm-daynight__seg:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hm-daynight__thumb { transition: none; }
  .hm-compare:not(.is-touched) .hm-compare__handle { animation: none; }
}

/* ---------- FAQ: a compact two-column card grid ---------- */
.hm-faq { padding: calc(var(--section) * 0.65) 0 calc(var(--section) * 0.75); }
.hm-faq__head { margin-bottom: 1.1rem; }
.hm-faq__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.6rem;
  border-top: 0;
  counter-reset: none;
}
.hm-faq__item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 25, 36, 0.04);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.hm-faq__item:hover { border-color: rgba(31, 90, 158, 0.35); }
.hm-faq__item:has([aria-expanded="true"]) {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 10px 28px -14px rgba(31, 90, 158, 0.45);
}
.hm-faq__item button {
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  gap: 0.7rem;
  min-height: 3.4rem;
  padding: 0.55rem 0.85rem 0.55rem 0.7rem;
  text-align: left;
}
.hm-faq__art b {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  background: var(--accent-soft, #e3ecf6);
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  transition: background 0.3s ease, color 0.3s ease;
}
.hm-faq__item:has([aria-expanded="true"]) .hm-faq__art b { background: var(--accent); color: #fff; }
.hm-faq__q { font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.hm-faq__answer p {
  padding: 0 1rem 0.95rem 3.5rem;
  font-size: 0.86rem;
  line-height: 1.55;
}
@media (max-width: 760px) {
  .hm-faq__list { grid-template-columns: minmax(0, 1fr); }
  .hm-faq__item button { padding-left: 0.6rem; }
  .hm-faq__answer p { padding-left: 3.4rem; }
}

/* ---------- Selected work: full-bleed editorial rows ---------- */
.hm-sw { padding: 0; background: #0b0b0b; color: #f4f4f2; }
.hm-sw__head {
  position: relative;
  padding: calc(var(--section) * 1.05) 0 calc(var(--section) * 0.95);
}
.hm-sw__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.1rem;
  color: rgba(244, 244, 242, 0.62);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.hm-sw__eyebrow::after { content: ""; width: 7.5rem; height: 1px; background: rgba(244, 244, 242, 0.32); }
.hm-sw__title {
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: var(--fs-section);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hm-sw__title span { color: var(--accent-light); font-weight: 300; }
.hm-sw__sub {
  margin: 1.2rem 0 0;
  color: rgba(244, 244, 242, 0.62);
  font-size: calc(clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem) - 2px);
  line-height: 1.55;
}

.hm-sw__list { margin: 0; padding: 0; list-style: none; }
.hm-sw__row { position: relative; border-top: 1px solid rgba(244, 244, 242, 0.08); }
.hm-sw__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(24rem, 41vw, 38rem);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.hm-sw__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.6s var(--ease), filter 0.8s ease;
  filter: brightness(0.86);
}
.hm-sw__row.is-in .hm-sw__img { transform: scale(1); }
.hm-sw__link:hover .hm-sw__img { transform: scale(1.035); filter: brightness(0.95); }
.hm-sw__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.94) 0%, rgba(8, 8, 8, 0.82) 26%, rgba(8, 8, 8, 0.35) 46%, rgba(8, 8, 8, 0) 62%),
    linear-gradient(0deg, rgba(8, 8, 8, 0.35), transparent 40%);
}
.hm-sw__row--flip .hm-sw__shade {
  background:
    linear-gradient(270deg, rgba(8, 8, 8, 0.94) 0%, rgba(8, 8, 8, 0.82) 26%, rgba(8, 8, 8, 0.35) 46%, rgba(8, 8, 8, 0) 62%),
    linear-gradient(0deg, rgba(8, 8, 8, 0.35), transparent 40%);
}
.hm-sw__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(30rem, 40%);
  margin-left: max(var(--gutter), calc((100% - var(--max)) / 2));
}
.hm-sw__row--flip .hm-sw__link { justify-content: flex-end; }
.hm-sw__row--flip .hm-sw__body { margin-right: max(var(--gutter), calc((100% - var(--max)) / 2)); margin-left: 0; }
.hm-sw__count {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.6rem;
  color: rgba(244, 244, 242, 0.75);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}
.hm-sw__count i { color: rgba(244, 244, 242, 0.45); font-style: normal; }
.hm-sw__count::after { content: ""; width: 4.5rem; height: 1px; margin-left: 0.6rem; background: rgba(244, 244, 242, 0.3); }
.hm-sw__name {
  font-family: var(--display);
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
.hm-sw__kind {
  margin-top: 0.55rem;
  color: rgba(244, 244, 242, 0.85);
  font-size: clamp(0.78rem, 0.7rem + 0.3vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.hm-sw__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  color: rgba(244, 244, 242, 0.9);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hm-sw__arrow {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid rgba(244, 244, 242, 0.6);
  border-radius: 50%;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.hm-sw__arrow svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease); }
.hm-sw__link:hover .hm-sw__arrow { background: #fff; border-color: #fff; color: #0b0b0b; }
.hm-sw__link:hover .hm-sw__arrow svg { transform: translateX(2px); }
.hm-sw__link:focus-visible { outline: 2px solid var(--accent-light); outline-offset: -4px; }

.js .hm-sw__row[data-reveal] { opacity: 1; transform: none; }
.js .hm-sw__row[data-reveal] .hm-sw__body > * { opacity: 0; transform: translateX(-24px); transition: opacity 0.7s ease, transform 0.9s var(--ease); }
.js .hm-sw__row--flip[data-reveal] .hm-sw__body > * { transform: translateX(24px); }
.js .hm-sw__row[data-reveal].is-in .hm-sw__body > * { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .hm-sw__body, .hm-sw__row--flip .hm-sw__body { width: min(26rem, 70%); }
}
@media (max-width: 640px) {
  .hm-sw__link { align-items: flex-end; min-height: 30rem; }
  .hm-sw__shade, .hm-sw__row--flip .hm-sw__shade { background: linear-gradient(0deg, rgba(8, 8, 8, 0.95) 0%, rgba(8, 8, 8, 0.75) 45%, rgba(8, 8, 8, 0.1) 80%); }
  .hm-sw__row--flip .hm-sw__link { justify-content: flex-start; }
  .hm-sw__body, .hm-sw__row--flip .hm-sw__body { width: auto; margin: 0 var(--gutter) 2rem; }
  .hm-sw__count { margin-bottom: 1rem; }
  .hm-sw__cta { margin-top: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-sw__img { transform: none; transition: none; }
  .js .hm-sw__row[data-reveal] .hm-sw__body > * { opacity: 1; transform: none; transition: none; }
}

/* Selected work: two columns of three, each row in the reference layout (copy left, image fading in from the right) */
.hm-sw__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 1px;
  background: rgba(244, 244, 242, 0.08);
}
.hm-sw__row { border-top: 0; background: #0b0b0b; }
.hm-sw__link { min-height: clamp(17rem, 20.5vw, 23rem); }
.hm-sw__shade {
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.95) 0%, rgba(8, 8, 8, 0.86) 28%, rgba(8, 8, 8, 0.4) 50%, rgba(8, 8, 8, 0) 70%),
    linear-gradient(0deg, rgba(8, 8, 8, 0.4), transparent 45%);
}
.hm-sw__body { width: min(20rem, 52%); margin: 0 0 0 clamp(1.5rem, 3vw, 2.75rem); }
.hm-sw__count { margin-bottom: 1rem; font-size: 0.64rem; }
.hm-sw__count::after { width: 3.5rem; }
.hm-sw__name { font-size: clamp(1.6rem, 0.9rem + 1.45vw, 2.45rem); }
.hm-sw__kind { margin-top: 0.4rem; font-size: clamp(0.66rem, 0.6rem + 0.2vw, 0.78rem); }
.hm-sw__cta { gap: 0.8rem; margin-top: 1.2rem; font-size: 0.6rem; }
.hm-sw__arrow { width: 2.2rem; height: 2.2rem; }
.hm-sw__arrow svg { width: 0.85rem; height: 0.85rem; }

@media (max-width: 1000px) {
  .hm-sw__list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .hm-sw__link { min-height: clamp(18rem, 50vw, 26rem); }
  .hm-sw__body { width: min(22rem, 55%); }
}
@media (max-width: 640px) {
  .hm-sw__link { min-height: 26rem; }
  .hm-sw__shade { background: linear-gradient(0deg, rgba(8, 8, 8, 0.95) 0%, rgba(8, 8, 8, 0.75) 45%, rgba(8, 8, 8, 0.1) 80%); }
  .hm-sw__body { width: auto; margin: 0 var(--gutter) 1.75rem; }
}
/* Digital presence: larger cards on a wider ring */
@media (min-width: 901px) {
  .hm-reel--presence { height: 38rem; perspective: 1800px; }
  .hm-reel--presence .hm-reel__spin { top: 37%; width: min(24rem, 28vw); }
  .hm-reel--presence .hm-reel__card { transform: rotateY(calc(var(--i) * 45deg)) translateZ(min(46vw, 35rem)); }
}

/* Digital presence sits tighter; a white band separates it from the day-to-night section */
.hm-presence { padding-bottom: calc(var(--section) * 0.45); }
.hm-presence .hm-head { padding-top: calc(var(--section) * 0.75); }

.hm-daynight .hm-head { border-top: 0; }

/* Dark sections: 3cm white bands between them, headers 1cm below each dark edge */
.hm-services { padding-top: 1cm; overflow-x: clip; }
.hm-services > .wrap > .hm-head { padding-top: 0; margin-top: 0; }
.hm-sectors { margin-top: calc(var(--section) * 0.8); }
.hm-sectors::before {
  content: "";
  display: block;
  height: 3cm;
  margin: 0 calc(50% - 50vw) 1cm;
  background: #fff;
}
.hm-sw { border-top: 3cm solid #fff; }
.hm-sw__head { padding-top: 1cm; }
.hm-presence .hm-head { padding-top: 1cm; }
.hm-daynight { border-top: 3cm solid #fff; }
.hm-daynight .hm-head { padding-top: 1cm; }

/* Home page headings and subheadings, 3pt smaller */
.hm-label,
.hm-sw__title { font-size: calc(var(--fs-section) - 3pt); }
.hm-faq .hm-label { font-size: calc(clamp(1.9rem, 1.35rem + 1.5vw, 2.75rem) - 4px - 3pt); }
.hm-subhead { font-size: calc(clamp(1.2rem, 0.95rem + 0.85vw, 1.65rem) - 2px - 3pt); }
.hm-sw__sub { font-size: max(0.8rem, calc(clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem) - 2px - 3pt)); }
.hm-hero__title { font-size: calc(clamp(2.25rem, 1.35rem + 3.5vw, 4.75rem) - 4px - 3pt); }
.hm-hero__sub { font-size: max(0.85rem, calc(clamp(0.95rem, 0.82rem + 0.35vw, 1.2rem) - 2px - 3pt)); }
.hm-clients__title { font-size: calc(clamp(1.2rem, 0.95rem + 0.85vw, 1.65rem) - 3pt); }
.hm-lead { font-size: calc(clamp(2rem, 1.25rem + 2.2vw, 3rem) - 2.67px - 3pt); }
.hm-cta .section-title { font-size: calc(clamp(1.85rem, 1.4rem + 1.35vw, 2.8rem) - 2pt - 3pt); }
@media (max-width: 760px) {
  .hm-hero__title { font-size: calc(clamp(2.05rem, 9vw, 2.7rem) - 4px - 3pt); }
  .hm-faq .hm-label { font-size: calc(clamp(1.65rem, 7.4vw, 2.4rem) - 4px - 3pt); }
}

/* Selected work: tiles sit apart, open up as they scroll in (right column a beat later), and the hovered one takes focus */
.hm-sw__list {
  --tile-gap: clamp(0.6rem, 1vw, 0.9rem);
  gap: var(--tile-gap);
  padding: 0 var(--tile-gap) var(--tile-gap);
  background: #0b0b0b;
}
.hm-sw__link { clip-path: inset(0); transition: clip-path 1.2s var(--ease), opacity 0.8s ease; }
.js .hm-sw__row[data-reveal]:not(.is-in) .hm-sw__link { opacity: 0; clip-path: inset(7% 5%); }
.hm-sw__row { --d: 0s; }
.hm-sw__row:nth-child(n + 4) { --d: 0.18s; }
.hm-sw__row .hm-sw__link { transition-delay: var(--d); }
@media (hover: hover) {
  .hm-sw__list:has(.hm-sw__link:hover) .hm-sw__row:not(:hover) .hm-sw__img { filter: brightness(0.55) saturate(0.8); }
}
@media (max-width: 1000px) {
  .hm-sw__row:nth-child(n + 4) { --d: 0s; }
}

/* Selected work copy: brand, type, line, details, then View project rising in last and sitting a little lower */
.hm-sw__desc { max-width: 17rem; margin-top: 0.8rem; color: rgba(244, 244, 242, 0.82); font-size: 0.8rem; line-height: 1.5; }
.hm-sw__meta { display: flex; flex-wrap: wrap; margin: 0.9rem 0 0; padding: 0; list-style: none; color: rgba(244, 244, 242, 0.6); font-size: 0.66rem; }
.hm-sw__meta li + li::before { content: "|"; margin: 0 0.5rem; color: rgba(244, 244, 242, 0.35); }
.hm-sw__cta { margin-top: 1.7rem; }

.js .hm-sw__row[data-reveal] .hm-sw__body > * { transition-delay: calc(var(--d) + 0.2s); }
/* The type label is hidden but keeps its line, so the description below stays where it was */
.hm-sw__kind { visibility: hidden; }
.js .hm-sw__row[data-reveal] .hm-sw__desc { transition-delay: calc(var(--d) + 0.44s); }
.js .hm-sw__row[data-reveal] .hm-sw__meta { transition-delay: calc(var(--d) + 0.54s); }
.js .hm-sw__row[data-reveal] .hm-sw__meta li { transition: opacity 0.6s ease, transform 0.7s var(--ease); }
.js .hm-sw__row[data-reveal]:not(.is-in) .hm-sw__meta li { opacity: 0; transform: translateY(8px); }
.js .hm-sw__row[data-reveal] .hm-sw__meta li:nth-child(1) { transition-delay: calc(var(--d) + 0.6s); }
.js .hm-sw__row[data-reveal] .hm-sw__meta li:nth-child(2) { transition-delay: calc(var(--d) + 0.7s); }
.js .hm-sw__row[data-reveal] .hm-sw__meta li:nth-child(3) { transition-delay: calc(var(--d) + 0.8s); }
.js .hm-sw__row[data-reveal] .hm-sw__body > .hm-sw__cta { transition-delay: calc(var(--d) + 0.95s); }
.js .hm-sw__row[data-reveal]:not(.is-in) .hm-sw__body > .hm-sw__cta { transform: translateY(18px); }

/* With a mouse, View project only shows on hover or keyboard focus; touch screens keep it visible */
@media (hover: hover) {
  .hm-sw__cta,
  .js .hm-sw__row[data-reveal].is-in .hm-sw__body > .hm-sw__cta {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.45s var(--ease);
    transition-delay: 0s;
  }
  .hm-sw__link:hover .hm-sw__cta,
  .hm-sw__link:focus-visible .hm-sw__cta,
  .js .hm-sw__row[data-reveal].is-in .hm-sw__link:hover .hm-sw__body > .hm-sw__cta,
  .js .hm-sw__row[data-reveal].is-in .hm-sw__link:focus-visible .hm-sw__body > .hm-sw__cta { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-sw__link { transition: none; }
  .js .hm-sw__row[data-reveal]:not(.is-in) .hm-sw__link { opacity: 1; clip-path: none; }
  .js .hm-sw__row[data-reveal] .hm-sw__meta li { transition: none; }
  .js .hm-sw__row[data-reveal]:not(.is-in) .hm-sw__meta li,
  .js .hm-sw__row[data-reveal]:not(.is-in) .hm-sw__body > .hm-sw__cta { opacity: 1; transform: none; }
}


/* Selected work, ambient: each photo drifts slowly once it has arrived, and a soft light sweeps across the card under the cursor */
.hm-sw__row:nth-child(1) { --dx: -1.6%; --dy: -1%; }
.hm-sw__row:nth-child(2) { --dx: 1.4%; --dy: -1.2%; }
.hm-sw__row:nth-child(3) { --dx: -1.2%; --dy: 1%; }
.hm-sw__row:nth-child(4) { --dx: 1.6%; --dy: 1%; }
.hm-sw__row:nth-child(5) { --dx: -1.4%; --dy: -1.2%; }
.hm-sw__row:nth-child(6) { --dx: 1.2%; --dy: 1.2%; }
.hm-sw__row.is-in .hm-sw__img { animation: hm-sw-drift 20s ease-in-out infinite alternate; }
.hm-sw__row:nth-child(even).is-in .hm-sw__img { animation-delay: -7s; }
.hm-sw__row:nth-child(3n).is-in .hm-sw__img { animation-duration: 24s; }
@keyframes hm-sw-drift { from { scale: 1; translate: 0 0; } to { scale: 1.07; translate: var(--dx) var(--dy); } }

.hm-sw__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.07) 54%, transparent 62%);
  transform: translateX(-100%);
  pointer-events: none;
}
.hm-sw__link:hover::after { transform: translateX(100%); transition: transform 1.3s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .hm-sw__row.is-in .hm-sw__img { animation: none; }
  .hm-sw__link::after { display: none; }
}

/* Our process: six steps hung on one chain, alternating above and below it. The chain draws in, each
   step drops onto its link, then the plan travels along and locks every link in blue as it passes. */
.hm-chain {
  --g: clamp(0.9rem, 1.6vw, 1.4rem);
  --spine: clamp(4.5rem, 7vw, 5.75rem);
  --chain-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Crect x='1.5' y='2' width='14' height='8' rx='4' fill='none' stroke='%23c2cbd5' stroke-width='2'/%3E%3Cpath d='M12 6h12M0 6h4' stroke='%23c2cbd5' stroke-width='2.6'/%3E%3C/svg%3E");
  --chain-x-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Crect x='1.5' y='2' width='14' height='8' rx='4' fill='none' stroke='%231f5a9e' stroke-width='2'/%3E%3Cpath d='M12 6h12M0 6h4' stroke='%231f5a9e' stroke-width='2.6'/%3E%3C/svg%3E");
  --chain-y: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Crect x='2' y='1.5' width='8' height='14' rx='4' fill='none' stroke='%23c2cbd5' stroke-width='2'/%3E%3Cpath d='M6 12v12M6 0v4' stroke='%23c2cbd5' stroke-width='2.6'/%3E%3C/svg%3E");
  --chain-y-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Crect x='2' y='1.5' width='8' height='14' rx='4' fill='none' stroke='%231f5a9e' stroke-width='2'/%3E%3Cpath d='M6 12v12M6 0v4' stroke='%231f5a9e' stroke-width='2.6'/%3E%3C/svg%3E");
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto var(--spine) auto;
  column-gap: var(--g);
  margin: 0;
  padding: 0;
  list-style: none;
}
.js .hm-chain[data-reveal] { opacity: 1; transform: none; }
.hm-chain__step { --t: calc(0.15s + var(--i) * 0.3s); position: relative; grid-row: 1; align-self: end; }
.hm-chain__step:nth-child(even) { grid-row: 3; align-self: start; }
.hm-chain__step:nth-child(1) { grid-column: 1 / span 2; }
.hm-chain__step:nth-child(2) { grid-column: 2 / span 2; }
.hm-chain__step:nth-child(3) { grid-column: 3 / span 2; }
.hm-chain__step:nth-child(4) { grid-column: 4 / span 2; }
.hm-chain__step:nth-child(5) { grid-column: 5 / span 2; }
.hm-chain__step:nth-child(6) { grid-column: 6 / span 2; }

.hm-chain__node,
.hm-chain__link { position: absolute; top: calc(100% + var(--spine) / 2); left: 50%; }
.hm-chain__step:nth-child(even) .hm-chain__node,
.hm-chain__step:nth-child(even) .hm-chain__link { top: calc(var(--spine) / -2); }
.hm-chain__node {
  z-index: 2;
  width: 1.15rem;
  height: 1.15rem;
  margin: -0.575rem 0 0 -0.575rem;
  border: 2px solid #c2cbd5;
  border-radius: 50%;
  background: var(--bg);
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--t) + 0.1s), border-color 0.4s ease, background-color 0.4s ease;
}
.hm-chain.is-in .hm-chain__node { transform: scale(1); }
.hm-chain__step.is-active .hm-chain__node { border-color: var(--accent); background: #fff; animation: hm-chain-pulse 1.6s ease-out infinite; }
.hm-chain__step.is-done .hm-chain__node { border-color: var(--accent); background: var(--accent); }
@keyframes hm-chain-pulse {
  from { box-shadow: 0 0 0 0 rgba(31, 90, 158, 0.42); }
  to { box-shadow: 0 0 0 12px rgba(31, 90, 158, 0); }
}

/* the link reaches exactly to the next step's node: half this step plus one gap */
.hm-chain__link { z-index: 1; width: calc(50% + var(--g) / 2); height: 12px; margin-top: -6px; }
.hm-chain__link::before,
.hm-chain__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--chain-x) 0 50% / 24px 12px;
  background-repeat: round no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s linear var(--t);
}
.hm-chain__link::after { background-image: var(--chain-x-on); transition: clip-path 0.7s var(--ease); }
.hm-chain.is-in .hm-chain__link::before,
.hm-chain__step.is-done .hm-chain__link::after { clip-path: inset(0); }

.hm-chain__card {
  position: relative;
  display: grid;
  grid-template-columns: clamp(4.75rem, 7vw, 6.4rem) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.95rem;
  align-items: center;
  padding: 0.85rem 1.05rem 0.85rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 18, 25, 0.04);
  transition: opacity 0.55s ease calc(var(--t) + 0.3s), transform 0.75s var(--ease) calc(var(--t) + 0.3s), border-color 0.4s ease, box-shadow 0.4s ease;
}
.js .hm-chain:not(.is-in) .hm-chain__card { opacity: 0; transform: translateY(-18px); }
.js .hm-chain:not(.is-in) .hm-chain__step:nth-child(even) .hm-chain__card { transform: translateY(18px); }
/* short hanger from the card down (or up) to its node on the chain */
.hm-chain__card::before {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  width: 12px;
  height: calc(var(--spine) / 2 - 1px);
  margin-left: -6px;
  background: var(--chain-y) 50% 0 / 12px 24px;
  background-repeat: no-repeat round;
  transition: clip-path 0.35s ease calc(var(--t) + 0.2s);
}
.hm-chain__step:nth-child(even) .hm-chain__card::before { top: auto; bottom: calc(100% + 1px); }
.js .hm-chain:not(.is-in) .hm-chain__card::before { clip-path: inset(100% 0 0); }
.js .hm-chain:not(.is-in) .hm-chain__step:nth-child(even) .hm-chain__card::before { clip-path: inset(0 0 100%); }
.hm-chain__step:is(.is-active, .is-done) .hm-chain__card::before { background-image: var(--chain-y-on); }

.hm-chain__art { position: relative; grid-row: span 2; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #f8f7f1; }
.hm-chain__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.hm-chain__art::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.62rem no-repeat;
  transform: scale(0);
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.hm-chain__step.is-done .hm-chain__art::after { transform: scale(1); }
.hm-chain__card h3 {
  align-self: end;
  margin: 0 0 0.3rem;
  color: var(--ink);
  font-size: clamp(0.92rem, 0.86rem + 0.2vw, 1.02rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.hm-chain__card p { align-self: start; margin: 0; color: var(--muted); font-size: 0.83rem; line-height: 1.5; }
.hm-chain__step.is-active .hm-chain__card { border-color: var(--accent-light); box-shadow: 0 22px 44px -26px rgba(31, 90, 158, 0.55); }
.hm-chain__step.is-active .hm-chain__art img { transform: scale(1.08); }

/* narrower screens: the chain runs down the left edge and every step hangs off it */
@media (max-width: 1100px) {
  .hm-chain {
    --node-x: -1.75rem;
    --node-y: calc(0.85rem + 1px + 2.125rem);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--g);
    padding-left: 2.4rem;
  }
  .hm-chain__step,
  .hm-chain__step:nth-child(n) { grid-row: auto; grid-column: auto; align-self: auto; }
  .hm-chain__node,
  .hm-chain__link,
  .hm-chain__step:nth-child(even) .hm-chain__node,
  .hm-chain__step:nth-child(even) .hm-chain__link { top: var(--node-y); left: var(--node-x); }
  .hm-chain__link { width: 12px; height: calc(100% + var(--g)); margin: 0 0 0 -6px; }
  .hm-chain__link::before,
  .hm-chain__link::after { background: var(--chain-y) 50% 0 / 12px 24px; background-repeat: no-repeat round; clip-path: inset(0 0 100%); }
  .hm-chain__link::after { background-image: var(--chain-y-on); }
  .hm-chain__card { grid-template-columns: 4.25rem minmax(0, 1fr); align-items: start; }
  .hm-chain__card::before,
  .hm-chain__step:nth-child(even) .hm-chain__card::before {
    top: var(--node-y);
    bottom: auto;
    left: calc(var(--node-x) - 1px);
    width: calc(-1 * var(--node-x));
    height: 12px;
    margin: -6px 0 0;
    background: var(--chain-x) 0 50% / 24px 12px;
    background-repeat: round no-repeat;
  }
  .js .hm-chain:not(.is-in) .hm-chain__card::before,
  .js .hm-chain:not(.is-in) .hm-chain__step:nth-child(even) .hm-chain__card::before { clip-path: inset(0 100% 0 0); }
  .hm-chain__step:is(.is-active, .is-done) .hm-chain__card::before { background-image: var(--chain-x-on); }
  .hm-chain__card h3 { align-self: start; margin-top: 0.2rem; }
  .js .hm-chain:not(.is-in) .hm-chain__card,
  .js .hm-chain:not(.is-in) .hm-chain__step:nth-child(even) .hm-chain__card { transform: translateX(18px); }
}

@media (prefers-reduced-motion: reduce) {
  .hm-chain__node,
  .hm-chain__link::before,
  .hm-chain__link::after,
  .hm-chain__card,
  .hm-chain__card::before,
  .hm-chain__art img,
  .hm-chain__art::after { transition: none; animation: none; }
}

/* Hero: static stage, quicker crossfade, fixed headline */
.hm-hero__stage{transform:none!important}
.hm-hero__slide{transition:opacity .9s ease}

/* Light cord: gold to match the pull knob, slightly longer */
.hm-cord__line{height:calc(6.4rem + 4px);background:linear-gradient(90deg,#9c7a45 0%,#e8cc96 50%,#b8955c 100%)}

@media (max-width: 760px) {
  .hm-orbit__text { transition: opacity 0.4s ease; }
  .hm-orbit__card:not(.is-front) .hm-orbit__text { opacity: 0; }
  .hm-orbit__text strong { font-size: 13px; }
  .hm-orbit__text small { font-size: 11px; line-height: 1.4; }
  .hm-sw__meta { font-size: 12px; }
  .hm-sw__cta { font-size: 11px; }
}

@media (min-width: 901px) {
  .hm-reel--presence .hm-reel__spin { width: min(22rem, 26vw); }
  .hm-reel--presence .hm-reel__card { transform: rotateY(calc(var(--i) * 36deg)) translateZ(min(48vw, 37rem)); }
}