/* ==========================================================================
   Deck — full-screen slide engine + slide layouts
   ========================================================================== */

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: #0e1422; touch-action: pan-y; }

.deck { position: fixed; inset: 0; overflow: hidden; overflow: clip; background: #0e1422; }

.slide {
  position: absolute; inset: 0;
  overflow: hidden;
  transform: translate3d(0, 100%, 0);
  visibility: hidden;
  transition:
    transform 1.05s var(--ease),
    border-radius 1.05s var(--ease),
    visibility 0s linear 1.05s;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint;
}
.slide::after { /* dimmer used when a slide recedes behind the next */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #0b101c; opacity: 0;
  transition: opacity 1.05s var(--ease);
  z-index: 50;
}
.slide.is-active {
  transform: none; visibility: visible;
  transition: transform 1.05s var(--ease), border-radius 1.05s var(--ease), visibility 0s;
}
.slide.is-past {
  transform: translate3d(0, -10%, 0) scale(0.9);
  border-radius: var(--r-xl);
}
.slide.is-past::after { opacity: 0.55; }
.slide.is-near { visibility: visible; transition: transform 1.05s var(--ease), border-radius 1.05s var(--ease), visibility 0s; }
.deck.is-jumping .slide { transition-duration: .01s !important; }

.slide__body {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: calc(var(--chrome-h) + 4px) var(--gutter) calc(var(--chrome-h) * 0.82);
  display: flex; flex-direction: column;
}
.slide__body::-webkit-scrollbar { display: none; }
.frame { flex: 1 0 auto; display: grid; min-height: 0; position: relative; z-index: 2; }

/* Themes */
.slide--dark { background: var(--oxford); color: var(--on-dark); }
.slide--dark .t-muted, .slide--space .t-muted { color: var(--on-dark-2); }
.slide--space { background: var(--space); color: var(--on-dark); }
.slide--light { background: var(--mist); color: var(--ink); }
.slide--paper { background: var(--paper); color: var(--ink); }

/* Dashed construction guides (ref: blueprint grid) */
.guides { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.guides i {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background-image: linear-gradient(to bottom, var(--line-dark) 55%, transparent 0);
  background-size: 1px 9px;
}
.slide--light .guides i, .slide--paper .guides i { background-image: linear-gradient(to bottom, var(--line-light) 55%, transparent 0); }
.guides i:nth-child(1) { left: var(--gutter); }
.guides i:nth-child(2) { left: 50%; }
.guides i:nth-child(3) { right: var(--gutter); }
.guides b {
  position: absolute; left: 0; right: 0; height: 1px;
  background-image: linear-gradient(to right, var(--line-dark) 55%, transparent 0);
  background-size: 9px 1px;
}
.guides b:nth-of-type(1) { top: var(--chrome-h); }
.guides b:nth-of-type(2) { bottom: calc(var(--chrome-h) * 0.82); }

/* ---------- Chrome ---------- */
.chrome {
  position: fixed; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--gutter);
  color: var(--on-dark);
  transition: color .6s var(--ease-out);
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }
body[data-theme="light"] .chrome { color: var(--oxford); }
.chrome--top { top: 0; height: var(--chrome-h); }
.chrome--bottom { bottom: 0; height: calc(var(--chrome-h) * 0.82); }
.chrome__home { display: flex; align-items: center; color: inherit; text-decoration: none; }
.chrome__right { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 22px); }
.chrome__section { font-size: var(--fs-small); font-weight: 500; opacity: .8; }
.menu-btn { --s: clamp(40px, 3.2vw, 50px); }
.menu-btn .bars { display: grid; gap: 4px; width: 38%; }
.menu-btn .bars i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; }

.progress { display: flex; align-items: center; gap: 14px; font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
.progress__track { width: clamp(80px, 12vw, 200px); height: 2px; background: currentColor; opacity: 1; position: relative; border-radius: 2px; }
.progress__track::before { content: ""; position: absolute; inset: 0; background: inherit; opacity: 1; }
.progress__track { background: rgba(151, 179, 221, 0.25); }
body[data-theme="light"] .progress__track { background: rgba(27, 35, 54, 0.15); }
.progress__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--livingston); border-radius: 2px; transition: width .9s var(--ease); }
.chrome__nav { display: flex; gap: 8px; }
.chrome__nav .circle-btn { --s: clamp(36px, 2.8vw, 44px); }
.hint { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); opacity: .75; transition: opacity .5s; }
.hint .mouse { width: 18px; height: 28px; border: 1.5px solid currentColor; border-radius: 10px; position: relative; }
.hint .mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px; background: currentColor; border-radius: 2px; animation: wheel 1.8s var(--ease-out) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { opacity: 0; } }
body:not([data-index="0"]) .hint { opacity: 0; pointer-events: none; }

/* ---------- Menu overlay ---------- */
.menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--oxford); color: var(--on-dark);
  display: grid; grid-template-rows: auto 1fr;
  clip-path: inset(0 0 100% 0 round 0 0 var(--r-xl) var(--r-xl));
  transition: clip-path .8s var(--ease);
  visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0 round 0); visibility: visible; }
.menu__top { height: var(--chrome-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); }
.menu__list {
  overflow-y: auto; padding: 2vh var(--gutter) 6vh;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 28px 40px; align-content: start;
}
.menu__group h3 { font-size: var(--fs-small); font-weight: 600; color: var(--livingston); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-dark); }
.menu__group button {
  display: flex; gap: 14px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 7px 0; font-size: var(--fs-body); color: var(--on-dark-2); transition: color .25s, transform .3s var(--ease-out);
}
.menu__group button span:first-child { min-width: 2ch; opacity: .6; font-variant-numeric: tabular-nums; }
.menu__group button:hover, .menu__group button[aria-current="true"] { color: #fff; transform: translateX(4px); }
.menu__group button[aria-current="true"] span:first-child { color: var(--livingston); opacity: 1; }

/* ---------- Reveal choreography ---------- */
[data-r] { transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), clip-path 1.2s var(--ease); transition-delay: var(--d, 0s); }
[data-r="up"] { opacity: 0; transform: translate3d(0, 28px, 0); }
[data-r="fade"] { opacity: 0; }
[data-r="left"] { opacity: 0; transform: translate3d(-36px, 0, 0); }
[data-r="right"] { opacity: 0; transform: translate3d(36px, 0, 0); }
[data-r="scale"] { opacity: 0; transform: scale(0.94); }
[data-r="wipe"] { clip-path: inset(100% 0 0 0 round var(--r-l)); }
[data-r="wipe-x"] { clip-path: inset(0 100% 0 0 round var(--r-l)); }
.is-shown [data-r] { opacity: 1; transform: none; }
.is-shown [data-r="wipe"], .is-shown [data-r="wipe-x"] { clip-path: inset(0 0 0 0 round var(--r-l)); }
[data-r="wipe"] img, [data-r="wipe-x"] img { transform: scale(1.14); transition: transform 2.2s var(--ease-out); transition-delay: var(--d, 0s); }
.is-shown [data-r="wipe"] img, .is-shown [data-r="wipe-x"] img { transform: none; }

/* Masked line reveal for headings */
.ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ln > span { display: block; transform: translate3d(0, 105%, 0); transition: transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.is-shown .ln > span { transform: none; }

/* Background image (Ken Burns) */
.bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7s var(--ease-out); }
.is-shown .bg img { transform: scale(1); }
.bg--shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 35, 54, .62) 0%, rgba(27, 35, 54, .35) 40%, rgba(27, 35, 54, .92) 100%); }
.bg--shade-left::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27, 35, 54, .95) 0%, rgba(27, 35, 54, .7) 45%, rgba(27, 35, 54, .15) 100%); }

/* ==========================================================================
   Building blocks
   ========================================================================== */
.card {
  position: relative; overflow: hidden;
  border-radius: var(--r-l);
  padding: clamp(18px, 1.8vw, 32px);
  display: flex; flex-direction: column; gap: 12px;
}
.card--oxford { background: var(--oxford); color: var(--on-dark); }
.card--space { background: var(--space); color: var(--on-dark); }
.card--indigo { background: var(--indigo); color: var(--on-dark); }
.card--lav { background: var(--lavender); color: var(--oxford); }
.card--paper { background: var(--paper); color: var(--oxford); }
.card--white { background: #fff; color: var(--oxford); }
.card--line { border: 1px solid var(--line-dark); }
.slide--light .card--line, .slide--paper .card--line { border-color: var(--line-light); }
.card--img { padding: 0; background: var(--space); }
.card--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card--oxford .t-muted, .card--space .t-muted, .card--indigo .t-muted { color: var(--on-dark-2); }
.card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.card__caption {
  position: absolute; left: 14px; bottom: 14px; right: 14px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 10px;
  color: #fff; z-index: 2;
}
.card--img.has-caption::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15, 21, 36, .85)); z-index: 1; pointer-events: none; }

.stat__n { font-weight: 300; line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.stat__n--xl { font-size: clamp(2.6rem, min(6vw, 11vh), 7rem); }
.stat__n--l { font-size: clamp(2rem, min(3.8vw, 7vh), 4.25rem); }
.stat__n--m { font-size: clamp(1.6rem, min(2.4vw, 4.4vh), 2.75rem); }
.stat__u { font-size: 0.42em; font-weight: 500; letter-spacing: 0; margin-left: 0.12em; }
.stat__l { font-size: var(--fs-small); line-height: 1.45; }

.rule { height: 1px; background: currentColor; opacity: 0.18; border: 0; margin: 0; }
.accent-rule { width: 48px; height: 2px; background: var(--livingston); border: 0; margin: 0; }

.stack { display: flex; flex-direction: column; gap: var(--g, 16px); }
.row { display: flex; align-items: center; gap: var(--g, 12px); flex-wrap: wrap; }
.grow { flex: 1 1 auto; }

/* Marquee / ticker (ref: news ticker band) */
.ticker {
  position: absolute; left: 0; right: 0; bottom: calc(var(--chrome-h) * 0.82);
  border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
  overflow: hidden; z-index: 3;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: tick 60s linear infinite; }
.ticker__track span { display: inline-flex; align-items: center; gap: 22px; padding: 12px 22px 12px 0; font-size: var(--fs-small); color: var(--on-dark-2); white-space: nowrap; }
.ticker__track span::after { content: ""; width: 9px; height: 9px; border: 1px solid var(--livingston); transform: rotate(45deg); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ==========================================================================
   Slide layouts
   ========================================================================== */

/* --- Cover with globe --- */
.cover { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.cover__globe { position: absolute; z-index: 1; right: -6vw; top: 50%; width: min(64vw, 118vh); aspect-ratio: 1; transform: translateY(-50%); }
.cover__globe canvas { width: 100%; height: 100%; }
.cover__text { position: relative; z-index: 2; padding-bottom: clamp(56px, 9vh, 110px); display: grid; gap: clamp(16px, 2.6vh, 28px); }
.cover__stats { position: relative; z-index: 2; justify-self: end; padding-bottom: clamp(56px, 9vh, 110px); display: grid; gap: 16px; text-align: right; }
.cover__stats .stat__n { font-size: clamp(1.4rem, min(2vw, 3.6vh), 2.2rem); font-weight: 400; }
.cover__stats .stat__l { color: var(--on-dark-2); }
.cover__stats > div { display: flex; align-items: baseline; gap: 14px; justify-content: flex-end; }
.cover .t-display { max-width: 11ch; }
.offices { display: flex; flex-wrap: wrap; gap: 6px 1.5em; font-size: var(--fs-small); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-2); }

/* --- Section divider --- */
.divider { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: 3vh 4vw; }
.divider__tag { grid-column: 1; grid-row: 1; align-self: start; }
.divider__num { grid-column: 2; grid-row: 1 / 3; font-size: clamp(6rem, min(20vw, 34vh), 22rem); font-weight: 200; line-height: 0.78; letter-spacing: -0.06em; color: var(--lavender); font-variant-numeric: lining-nums tabular-nums; }
.divider__title { grid-column: 1; grid-row: 3; align-self: end; display: flex; align-items: flex-end; gap: 24px; }
.divider__aside { grid-column: 2; grid-row: 3; align-self: end; max-width: 34ch; justify-self: end; text-align: right; color: var(--on-dark-2); font-size: var(--fs-small); }

/* --- Generic splits --- */
.split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 72px); align-items: center; }
.split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--stretch { align-items: stretch; }

/* --- Contents --- */
.contents { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 96px); align-items: stretch; }
.contents__list { display: grid; align-content: center; }
.contents__list button {
  display: grid; grid-template-columns: 4ch 1fr auto; align-items: center; gap: 12px;
  background: none; border: 0; border-top: 1px solid var(--line-light); padding: clamp(10px, 1.7vh, 20px) 0;
  text-align: left; cursor: pointer; color: inherit;
}
.contents__list button:last-child { border-bottom: 1px solid var(--line-light); }
.contents__list .n { font-size: var(--fs-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.contents__list .t { font-size: var(--fs-h3); font-weight: 400; transition: transform .4s var(--ease-out); }
.contents__list .a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-light); display: grid; place-items: center; transition: background-color .3s, color .3s; }
.contents__list .a svg { width: 40%; height: 40%; }
.contents__list button:hover .t { transform: translateX(8px); }
.contents__list button:hover .a { background: var(--oxford); color: var(--lavender); }

/* --- Portrait / quote --- */
.quote-mark { font-size: clamp(3rem, 6vw, 6rem); line-height: 0.6; color: var(--livingston); font-weight: 300; height: 0.45em; }
.signature { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.signature strong { font-weight: 600; font-size: var(--fs-h3); }
.creds { font-size: var(--fs-small); color: var(--on-dark-2); line-height: 1.7; }
.portrait { position: relative; border-radius: var(--r-xl); overflow: hidden; height: 100%; min-height: 0; background: #0b0f19; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* --- Bento (overview) --- */
.bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 18px); }

/* --- Map slide --- */
.map-wrap { position: absolute; inset: 0; z-index: 1; }
.map-wrap canvas { width: 100%; height: 100%; }
.pin { position: absolute; z-index: 3; transform: translate(-50%, -50%); display: grid; place-items: center; }
.pin__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--livingston); box-shadow: 0 0 0 4px rgba(162, 152, 127, .25), 0 0 24px 4px rgba(162, 152, 127, .45); }
.pin__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; border: 1px solid var(--livingston); animation: ping 2.6s var(--ease-out) infinite; animation-delay: var(--pd, 0s); }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }
.pin__label { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: var(--fs-small); line-height: 1.25; }
.pin__label b { display: block; font-weight: 600; color: #fff; }
.pin__label span { color: var(--on-dark-2); }
.pin--left .pin__label { left: auto; right: 18px; text-align: right; }
.pin--up .pin__label { top: calc(50% - 16px); }
.pin--down .pin__label { top: calc(50% + 16px); }
.pin--hq .pin__dot { background: var(--lavender); box-shadow: 0 0 0 4px rgba(218, 225, 241, .2), 0 0 28px 6px rgba(151, 179, 221, .5); }
.pin--hq .pin__dot::before { border-color: var(--lavender); }
.map-card { position: relative; z-index: 4; align-self: end; max-width: 400px; background: rgba(33, 46, 78, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line-dark); }

/* --- Logos wall --- */
.logo-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); }
.logo-tile { position: relative; background: #fff; border-radius: var(--r-m); aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 0; overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.logo-tile img { position: absolute; inset: 22% 16%; width: 68%; height: 56%; object-fit: contain; }
.logo-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(27, 35, 54, .4); }

/* --- Services grid --- */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, .9vw, 14px); }
.svc {
  position: relative; text-align: left; cursor: pointer; border: 1px solid var(--line-dark);
  background: rgba(55, 71, 117, .38); color: var(--on-dark);
  border-radius: var(--r-m); padding: clamp(12px, 1.3vw, 20px);
  display: flex; flex-direction: column; gap: 8px; min-height: 0;
  transition: background-color .4s var(--ease-out), transform .4s var(--ease-out), border-color .4s;
}
.svc:hover { background: var(--indigo); border-color: rgba(151, 179, 221, .4); transform: translateY(-2px); }
.svc .ic { width: 1.5em; height: 1.5em; color: var(--jordi); }
.svc__body { display: grid; gap: 6px; }
.svc__t { font-weight: 600; font-size: clamp(.86rem, min(.95vw, 1.8vh), 1rem); line-height: 1.3; }
.svc__d { font-size: var(--fs-small); color: var(--on-dark-2); line-height: 1.45; }
.svc__n { position: absolute; top: clamp(12px, 1.3vw, 20px); right: clamp(12px, 1.3vw, 20px); font-size: var(--fs-small); color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.svc--wide { grid-column: span 2; }

/* --- Service breakdown --- */
.svc-page { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3.4vw, 64px); align-items: stretch; }
.svc-page__main { display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 26px); justify-content: center; min-width: 0; }
.svc-page__head { display: flex; align-items: center; gap: 16px; }
.svc-page__num { font-size: var(--fs-small); font-weight: 600; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--oxford); color: var(--lavender); flex: none; font-variant-numeric: tabular-nums; }
.slide--dark .svc-page__num { background: var(--lavender); color: var(--oxford); }
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); }
.benefits--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.benefit { border-top: 2px solid var(--livingston); padding-top: 12px; display: grid; gap: 6px; align-content: start; }
.benefit h4 { font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; }
.benefit p { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }
.slide--dark .benefit p { color: var(--on-dark-2); }
.svc-page__side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(10px, 1vw, 16px); min-height: 0; }
.svc-page__img { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 0; background: var(--lavender); }
.svc-page__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.highlight { background: var(--oxford); color: var(--on-dark); border-radius: var(--r-l); padding: clamp(16px, 1.6vw, 26px); display: grid; gap: 8px; }
.highlight h4 { font-size: var(--fs-small); font-weight: 700; color: var(--jordi); letter-spacing: .02em; }
.highlight p { font-size: var(--fs-small); color: var(--on-dark-2); line-height: 1.55; }
.slide--dark .highlight { background: var(--space); }

/* BIM bars */
.bars { display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: 9.5em 1fr 3.2em; align-items: center; gap: 12px; font-size: var(--fs-small); }
.bar__t { height: 8px; border-radius: 8px; background: rgba(27, 35, 54, .1); overflow: hidden; }
.bar__f { height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--indigo), var(--jordi)); transition: width 1.6s var(--ease); transition-delay: var(--d, .6s); }
.is-shown .bar__f { width: var(--v); }
.bar b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* --- Process (how it works) --- */
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2vw, 32px); position: relative; }
.process::before { content: ""; position: absolute; top: calc(clamp(64px, 7vw, 112px) / 2); left: 12%; right: 12%; height: 1px; background: var(--line-dark); }
.process::after { content: ""; position: absolute; top: calc(clamp(64px, 7vw, 112px) / 2); left: 12%; height: 1px; width: 0; background: var(--livingston); transition: width 2s var(--ease) .8s; }
.is-shown .process::after { width: 76%; }
.step { display: grid; justify-items: center; text-align: center; gap: 14px; position: relative; z-index: 1; }
.step__ring { width: clamp(64px, 7vw, 112px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--oxford); border: 1px solid rgba(151, 179, 221, .35); color: var(--lavender); }
.step__ring .ic { width: 38%; height: 38%; }
.step h4 { font-size: var(--fs-body); font-weight: 600; }
.step p { font-size: var(--fs-small); color: var(--on-dark-2); max-width: 26ch; }

/* --- Projects --- */
.projects { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); }
.project { position: relative; border-radius: var(--r-l); overflow: hidden; background: var(--space); min-height: 0; }
.project img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.project:hover img { transform: scale(1.05); }
.project::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 21, 36, 0) 40%, rgba(15, 21, 36, .88)); pointer-events: none; }
.project figcaption { position: absolute; left: clamp(12px, 1.2vw, 20px); right: clamp(12px, 1.2vw, 20px); bottom: clamp(12px, 1.2vw, 18px); z-index: 2; color: #fff; display: grid; gap: 2px; }
.project figcaption b { font-weight: 600; font-size: clamp(.9rem, min(1.1vw, 2vh), 1.15rem); line-height: 1.25; }
.project figcaption span { font-size: var(--fs-small); color: var(--lavender); opacity: .85; display: inline-flex; align-items: center; gap: 6px; }
.project figcaption span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--livingston); }

/* --- Contact --- */
.offices-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px dashed var(--line-dark); border-radius: var(--r-l); }
.office { padding: clamp(16px, 1.8vw, 30px); display: grid; gap: 10px; align-content: start; }
.office + .office { border-left: 1px dashed var(--line-dark); }
.office h3 { font-size: var(--fs-h3); font-weight: 500; }
.office p { font-size: var(--fs-small); color: var(--on-dark-2); }
.office a { font-size: var(--fs-small); color: var(--jordi); text-decoration: none; border-bottom: 1px solid rgba(151, 179, 221, .45); justify-self: start; padding-bottom: 2px; }
.office a:hover { color: #fff; border-color: #fff; }

/* --- Timeline (career) --- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 20px); }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line-light); }
.timeline::after { content: ""; position: absolute; left: 0; top: 7px; height: 1px; width: 0; background: var(--livingston); transition: width 2.4s var(--ease) .5s; }
.slide--dark .timeline::before { background: var(--line-dark); }
.is-shown .timeline::after { width: 100%; }
.role { position: relative; padding-top: 32px; display: grid; gap: 8px; align-content: start; }
.role::before { content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--mist); border: 1.5px solid var(--livingston); }
.slide--dark .role::before { background: var(--oxford); }
.role--now::before { background: var(--livingston); }
.role__y { font-size: var(--fs-small); font-weight: 700; color: var(--livingston); font-variant-numeric: tabular-nums; }
.role__t { font-weight: 600; font-size: clamp(.92rem, min(1.05vw, 2vh), 1.08rem); line-height: 1.3; }
.role__o { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }
.role__a { font-size: var(--fs-small); line-height: 1.5; padding-top: 8px; border-top: 1px solid var(--line-light); }
.slide--dark .role__o { color: var(--on-dark-2); }

/* --- Certificates --- */
.certs { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 20px); align-items: start; }
.cert { display: grid; gap: 10px; text-align: left; background: none; border: 0; padding: 0; cursor: zoom-in; color: inherit; }
.cert__frame { position: relative; background: #fff; border-radius: var(--r-m); padding: 8%; aspect-ratio: 4 / 4.4; display: grid; place-items: center; box-shadow: 0 1px 0 rgba(27, 35, 54, .06), 0 20px 40px -28px rgba(27, 35, 54, .55); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.cert__frame img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.cert:hover .cert__frame { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(27, 35, 54, .06), 0 30px 50px -28px rgba(27, 35, 54, .6); }
.cert__frame::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--oxford) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dae1f1' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M15 4h5v5M9 20H4v-5M20 4l-6 6M4 20l6-6'/%3E%3C/svg%3E") center / 50% no-repeat; opacity: 0; transform: scale(.8); transition: .35s var(--ease-out); }
.cert:hover .cert__frame::after, .cert:focus-visible .cert__frame::after { opacity: 1; transform: none; }
.cert__n { font-size: var(--fs-small); color: var(--livingston); font-weight: 700; font-variant-numeric: tabular-nums; }
.cert__t { font-size: var(--fs-small); font-weight: 600; line-height: 1.35; }
.cert__s { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.35; }
.slide--dark .cert__s { color: var(--on-dark-2); }
.cred-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.cred-list li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-light); font-size: var(--fs-small); }
.cred-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--livingston); flex: none; transform: translateY(-2px); }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; color: var(--on-dark); }
.lightbox::backdrop { background: rgba(11, 16, 28, .9); backdrop-filter: blur(6px); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox__top, .lightbox__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--gutter); }
.lightbox__stage { display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); }
.lightbox__stage img { max-width: min(100%, 1100px); max-height: 100%; object-fit: contain; border-radius: 10px; background: #fff; animation: lbin .5s var(--ease-out); }
@keyframes lbin { from { opacity: 0; transform: scale(.96); } }
.lightbox__cap { font-size: var(--fs-body); font-weight: 500; }
.lightbox__count { font-size: var(--fs-small); color: var(--on-dark-2); font-variant-numeric: tabular-nums; }

/* Profile cover */
.pcover { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
.pcover__text { display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(14px, 2.4vh, 26px); padding-bottom: clamp(8px, 3vh, 40px); position: relative; z-index: 2; }
.pcover__portrait { position: absolute; right: calc(var(--gutter) * 0.5); bottom: 0; height: calc(100% - var(--chrome-h) * 0.55); z-index: 1; display: flex; align-items: flex-end; }
.pcover__portrait img { height: 100%; width: auto; max-width: none; object-fit: contain; object-position: bottom; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45)); }
.pcover__halo { position: absolute; right: 8vw; bottom: -20vh; width: min(60vw, 95vh); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(151, 179, 221, .28), rgba(55, 71, 117, .18) 55%, transparent 72%); z-index: 0; }
.contact-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-pills a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: .55em 1em; border-radius: var(--r-pill); border: 1px solid var(--line-dark); font-size: var(--fs-small); color: var(--on-dark); background: rgba(33, 46, 78, .6); backdrop-filter: blur(6px); transition: background-color .3s, border-color .3s; }
.contact-pills a:hover { background: var(--indigo); border-color: rgba(151, 179, 221, .45); }
.contact-pills .ic { width: 1.1em; height: 1.1em; color: var(--jordi); }

.statement { font-size: clamp(2.2rem, min(6vw, 11vh), 7rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc--wide { grid-column: span 1; }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .timeline::before, .timeline::after { display: none; }
  .certs { --cols: 4 !important; }
}

/* Tablet & phone: slides stack and may scroll internally */
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .cover, .split, .split--5-7, .split--7-5, .contents, .svc-page, .pcover { grid-template-columns: minmax(0, 1fr); }
  .cover { align-content: end; }
  .cover__globe { right: 50%; top: auto; bottom: 34%; transform: translateX(50%); width: min(118vw, 74vh); }
  .cover__text { padding-bottom: 0; }
  .cover__stats { justify-self: start; text-align: left; padding-bottom: clamp(64px, 10vh, 100px); grid-template-columns: repeat(3, auto); gap: 18px; }
  .cover__stats > div { flex-direction: column; align-items: flex-start; gap: 4px; justify-content: flex-start; }
  .divider { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; }
  .divider__num { grid-column: 1; grid-row: 2; align-self: center; justify-self: end; }
  .divider__title { grid-row: 3; }
  .divider__aside { grid-column: 1; grid-row: 4; justify-self: start; text-align: left; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(150px, auto); }
  .bento > * { grid-column: auto !important; grid-row: auto !important; }
  .bento > .span-all { grid-column: 1 / -1 !important; }
  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-page__side { grid-template-rows: 34vh auto; }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .process::before, .process::after { display: none; }
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 30vh; }
  .projects > * { grid-column: auto !important; grid-row: auto !important; }
  .projects > .span-all { grid-column: 1 / -1 !important; }
  .offices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .office:nth-child(3) { border-left: 0; }
  .office:nth-child(n+3) { border-top: 1px dashed var(--line-dark); }
  .portrait { min-height: 46vh; }
  .pcover__portrait { right: -10vw; top: calc(var(--chrome-h) * .6); bottom: auto; height: 58%; }
  .pcover__text { justify-content: flex-end; }
  .pcover__portrait img { -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 92%); mask-image: linear-gradient(180deg, #000 45%, transparent 92%); }
  .certs { --cols: 3 !important; }
  .map-card { max-width: none; }
  .chrome__section { display: none; }
  .guides i:nth-child(2) { display: none; }
}

@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  /* content scrolls under the chrome on small screens: fade it out */
  .chrome::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity .6s; }
  .chrome--top::before { background: linear-gradient(180deg, rgba(27, 35, 54, .92) 35%, rgba(27, 35, 54, 0)); }
  .chrome--bottom::before { background: linear-gradient(0deg, rgba(27, 35, 54, .92) 35%, rgba(27, 35, 54, 0)); }
  body[data-theme="light"] .chrome--top::before { background: linear-gradient(180deg, rgba(238, 242, 248, .94) 35%, rgba(238, 242, 248, 0)); }
  body[data-theme="light"] .chrome--bottom::before { background: linear-gradient(0deg, rgba(238, 242, 248, .94) 35%, rgba(238, 242, 248, 0)); }
  .hint { display: none; }
}

@media (max-width: 560px) {
  :root { --chrome-h: 64px; }
  .cover__globe { right: -38vw; left: auto; top: 3vh; bottom: auto; transform: none; width: 104vw; opacity: .75; }
  .cover__stats .stat__n { font-size: 1.25rem; }
  .cover__stats { gap: 10px; }
  .cover .t-display { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .row--end { justify-content: flex-start !important; }
  .benefits, .benefits--2 { grid-template-columns: minmax(0, 1fr); }
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc { flex-direction: row; align-items: flex-start; gap: 12px; }
  .svc__body { display: grid; gap: 4px; padding-right: 2.5em; }
  .timeline { grid-template-columns: minmax(0, 1fr); }
  .role { padding-top: 0; padding-left: 30px; }
  .role::before { top: 3px; }
  .process { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; }
  .step__ring { width: 58px; }
  .step > div { display: grid; gap: 4px; }
  .projects { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 34vh; }
  .offices-grid { grid-template-columns: minmax(0, 1fr); }
  .office + .office { border-left: 0; border-top: 1px dashed var(--line-dark); }
  .certs { --cols: 2 !important; }
  .cred-list { grid-template-columns: minmax(0, 1fr); }
  .bar { grid-template-columns: 7.5em 1fr 3em; }
  .chrome__nav { display: none; }
  .progress__track { width: 64px; }
  .cover__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ticker { display: none; }
  .bento { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-active, .slide.is-near { transition: opacity .4s linear, visibility 0s; transform: none !important; opacity: 0; }
  .slide.is-active { opacity: 1; }
  .slide.is-past { border-radius: 0; }
  [data-r], .ln > span, .bg img, .bar__f, .process::after, .timeline::after { transition-duration: .01s !important; transition-delay: 0s !important; }
  .ticker__track, .pin__dot::before, .hint .mouse::after { animation: none; }
}