/* ---- Page header ---- */
#p-innovation-hub .page-header .hub-place { margin-top: var(--s-5); }

/* ---- Number chip: plan areas and room entries (lit and dimmed colours: the style queries in the scroll-linked block) ---- */
#p-innovation-hub .hub-mark {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--tint-border);
  border-radius: var(--r-control);
  background: var(--tint);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--teal-ink);
}

/* ---- Rooms tour: base (phone and tablet, plan card before the entries) ---- */
/* .hub-tour is the size container: --hub-plan-room is the width the plan may use inside the card. */
#p-innovation-hub .hub-tour {
  container-type: inline-size;
  --hub-plan-room: calc(100cqi - 2 * var(--s-4) - 2px);
  --hub-plan-h: min(calc(var(--hub-plan-room) * 594 / 1646), 200px);
  /* The strip (sticky, below) is the plan plus 10px padding above and below and a 1px bottom border. */
  --hub-strip: calc(var(--hub-plan-h) + 21px);
  --hub-line: calc(var(--header-h) + 1px + 160px);
  /* Room photos: in colour while at least this share of the photo is in view, black and white while less is.
     The one value to tune. "In view" starts under the site header (--hub-view-top), and under the plan strip
     where the strip is sticky (phone and tablet, below). */
  --hub-color-at: 33%;
  --hub-view-top: calc(var(--header-h) + 1px);
}
#p-innovation-hub .hub-map { margin-bottom: var(--s-5); padding: var(--s-4); }
#p-innovation-hub .hub-map .hub-card-head { display: none; }

/* ---- Floor plan, measured from the owner's drawing (594 x 1646 units, portrait) ----
   --x --y --w --h place each area in percent of the upright plan. Desktop draws it upright; phone and
   tablet turn it a quarter turn counterclockwise (2.77:1, top of the drawing on the left). The area that
   is not part of the office is left out of the outline, so the outline has a notch there.
   --it --ir --ib --il inset each side of an area (upright sides). A side on the outer wall insets by the
   wall (--hub-wall), so the area sits on the wall's inner face. Where two areas meet, the one above or on
   the left reaches 1px past the line (-1px): its border lies on its neighbour's, one 1px wall and no gap.
   Sides on open floor stay at 0. */
#p-innovation-hub .hub-room--conf2 { --x: 30.47; --y: 0; --w: 40.91; --h: 12.45; --it: var(--hub-wall); --ib: -1px; }
#p-innovation-hub .hub-room--eng { --x: 0; --y: 12.45; --w: 50.51; --h: 19.87; --ib: var(--hub-wall); --il: var(--hub-wall); }
#p-innovation-hub .hub-room--collab { --x: 50.51; --y: 49.45; --w: 49.49; --h: 32.99; --it: var(--hub-wall); --ir: var(--hub-wall); --ib: -1px; --il: var(--hub-wall); }
#p-innovation-hub .hub-room--conf1 { --x: 54.55; --y: 82.44; --w: 45.45; --h: 17.56; --ir: var(--hub-wall); --ib: var(--hub-wall); }
#p-innovation-hub .hub-room--huddle1 { --x: 0; --y: 86.45; --w: 25.93; --h: 13.55; --ir: -1px; --ib: var(--hub-wall); --il: var(--hub-wall); }
#p-innovation-hub .hub-room--huddle2 { --x: 25.93; --y: 86.45; --w: 28.62; --h: 13.55; --ir: -1px; --ib: var(--hub-wall); }
#p-innovation-hub .hub-plan {
  container: hub-plan / inline-size;
  --hub-wall: 2px;
  position: relative;
  isolation: isolate;
  display: block;
  justify-self: center;
  width: calc(var(--hub-plan-h) * 1646 / 594);
  height: var(--hub-plan-h);
  aspect-ratio: auto;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
}
/* Outer wall and floor: one outline, the floor inset 2px (--hub-wall) inside it. */
#p-innovation-hub .hub-plan::before,
#p-innovation-hub .hub-plan::after { content: ""; position: absolute; inset: 0; }
#p-innovation-hub .hub-plan::before {
  background: var(--line-strong);
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%, 71.93% 100%, 71.93% 49.49%, 49.45% 49.49%, 49.45% 19.53%, 38.82% 19.53%, 38.82% 49.49%, 32.32% 49.49%, 32.32% 100%);
}
#p-innovation-hub .hub-plan::after {
  background: var(--bg);
  clip-path: polygon(2px calc(100% - 2px), 2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 2px), calc(71.93% + 2px) calc(100% - 2px), calc(71.93% + 2px) calc(49.49% - 2px), calc(49.45% + 2px) calc(49.49% - 2px), calc(49.45% + 2px) calc(19.53% - 2px), calc(38.82% - 2px) calc(19.53% - 2px), calc(38.82% - 2px) calc(49.49% - 2px), calc(32.32% - 2px) calc(49.49% - 2px), calc(32.32% - 2px) calc(100% - 2px));
}
/* On its side: the upright top is on the left, the upright right side on top. The lit area (--hub-z from
   hub-lit) sits over its neighbours, so its gold edge shows on all four sides. */
#p-innovation-hub a.hub-room {
  position: absolute;
  z-index: var(--hub-z, 1);
  left: calc(var(--y) * 1% + var(--it, 0px));
  top: calc((100 - var(--x) - var(--w)) * 1% + var(--ir, 0px));
  width: calc(var(--h) * 1% - var(--it, 0px) - var(--ib, 0px));
  height: calc(var(--w) * 1% - var(--ir, 0px) - var(--il, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--bg-tint);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: var(--ink-2);
  text-decoration: none;
}
#p-innovation-hub a.hub-room:hover { --hub-z: 2; filter: brightness(1.3); }
#p-innovation-hub a.hub-room:hover .hub-room-name { text-decoration: underline; }
#p-innovation-hub a.hub-room:focus-visible { z-index: 4; outline: 2px solid var(--ink); outline-offset: 1px; }
/* Names stay in the links for screen readers; the plan shows them only where they fit (desktop). */
#p-innovation-hub .hub-room-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1023px) {
  @container hub-plan (max-width: 339px) {
    #p-innovation-hub a.hub-room .hub-mark { padding-inline: 3px; font-size: 10px; line-height: 1.4; }
  }
}

/* ---- Room entries: contiguous, spacing is padding inside each li ---- */
#p-innovation-hub .hub-stops { margin: 0; padding: 0; list-style: none; }
#p-innovation-hub .hub-stop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-top: 1px solid var(--hub-edge, var(--hairline));
}
#p-innovation-hub .hub-stop h3 { display: flex; align-items: center; gap: var(--s-3); }
#p-innovation-hub .hub-stop > p:not([class]) { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 40em; }
#p-innovation-hub .hub-use { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
#p-innovation-hub .hub-use .mono { margin-right: var(--s-1); }
#p-innovation-hub .hub-stop .link-ghost { justify-self: start; }
/* Room photos: flat and edge to edge, no bezel or dim. 16:9 on phones, 2:1 from 640px. The crop moves
   vertically only; --hub-focus keeps each room's subject in frame. */
#p-innovation-hub .hub-stop .shot { padding: 0; border: 0; background: var(--bg-tint); }
#p-innovation-hub .hub-stop .shot img { aspect-ratio: 16 / 9; border-radius: 0; filter: none; object-position: 50% var(--hub-focus, 50%); }
/* Two layers, one frame, one file: .hub-bw has the same src, srcset and sizes as .hub-color, so the browser
   downloads each photo once. .hub-bw fills the frame under .hub-color with the same cover crop (the two line up
   at 16:9 and 2:1) and shows it in black and white through a fixed filter that never changes. The colour photo
   paints on top (position: relative); the scroll-linked block below fades it in while enough of the photo is in
   view (--hub-color-at). */
#p-innovation-hub .hub-stop .shot .hub-bw { position: absolute; inset: 0; height: 100%; filter: grayscale(1) brightness(0.75); }
#p-innovation-hub .hub-stop .shot .hub-color { position: relative; }
#p-innovation-hub #room-collaboration { --hub-focus: 32%; }
#p-innovation-hub #room-conference { --hub-focus: 14%; }
#p-innovation-hub #room-huddle { --hub-focus: 6%; }
#p-innovation-hub #room-engineering { --hub-focus: 30%; }
/* From 640px the copy and its "Used for" tags share one row under the photo. */
@media (min-width: 640px) {
  #p-innovation-hub .hub-stop { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--s-6); }
  #p-innovation-hub .hub-stop > :is(h3, .shot) { grid-column: 1 / -1; }
  #p-innovation-hub .hub-stop > :is(p:not([class]), .link-ghost) { grid-column: 1; }
  #p-innovation-hub .hub-stop .shot img { aspect-ratio: 2 / 1; }
  #p-innovation-hub .hub-use { align-self: start; align-content: start; padding-top: var(--s-3); border-top: 1px solid var(--hairline); }
  #p-innovation-hub .hub-use .mono { flex-basis: 100%; margin: 0; }
}

/* ---- Desktop: upright plan left and sticky, fitted to the viewport height; entries right ---- */
@media (min-width: 1024px) {
  #p-innovation-hub .hub-tour {
    /* Card top (header + 25px) + card chrome (85.5px: 24px padding each side, 2px border, 19.5px place line,
       16px gap) + 24px below: the card fits the viewport. */
    --hub-plan-h: clamp(360px, calc(100svh - var(--header-h) - 134.5px), 720px);
    --hub-line: calc(var(--header-h) + 1px + 200px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-7);
  }
  #p-innovation-hub .hub-map {
    position: sticky;
    top: calc(var(--header-h) + 1px + var(--s-5));
    z-index: 10;
    align-self: start;
    gap: var(--s-4);
    margin-bottom: 0;
    padding: var(--s-5);
  }
  #p-innovation-hub .hub-map .hub-card-head { display: flex; }
  #p-innovation-hub .hub-plan { width: calc(var(--hub-plan-h) * 594 / 1646); }
  #p-innovation-hub .hub-plan::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 71.93%, 50.51% 71.93%, 50.51% 49.45%, 80.47% 49.45%, 80.47% 38.82%, 50.51% 38.82%, 50.51% 32.32%, 0 32.32%); }
  #p-innovation-hub .hub-plan::after { clip-path: polygon(2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 2px), 2px calc(100% - 2px), 2px calc(71.93% + 2px), calc(50.51% + 2px) calc(71.93% + 2px), calc(50.51% + 2px) calc(49.45% + 2px), calc(80.47% + 2px) calc(49.45% + 2px), calc(80.47% + 2px) calc(38.82% - 2px), calc(50.51% + 2px) calc(38.82% - 2px), calc(50.51% + 2px) calc(32.32% - 2px), 2px calc(32.32% - 2px)); }
  #p-innovation-hub a.hub-room {
    left: calc(var(--x) * 1% + var(--il, 0px));
    top: calc(var(--y) * 1% + var(--it, 0px));
    width: calc(var(--w) * 1% - var(--il, 0px) - var(--ir, 0px));
    height: calc(var(--h) * 1% - var(--it, 0px) - var(--ib, 0px));
    padding: var(--s-1);
  }
  /* Names on the four larger areas; the two huddle rooms keep their number only. Below 175px wide (short
     laptop viewports) the names no longer fit their areas, so the plan shows numbers only, as on phones. */
  @container hub-plan (min-width: 175px) {
    #p-innovation-hub :is(.hub-room--collab, .hub-room--conf1, .hub-room--conf2, .hub-room--eng) .hub-room-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; text-wrap: balance; }
  }
  @container hub-plan (max-width: 219px) {
    #p-innovation-hub a.hub-room { gap: 2px; padding: 2px; font-size: 11px; }
  }
  @container hub-plan (width < 150px) {
    #p-innovation-hub a.hub-room .hub-mark { padding-inline: 3px; font-size: 10px; line-height: 1.4; }
  }
  /* Short viewports: drop the place line (19.5px + 16px gap) so the plan keeps that height (chrome 50px). */
  @media (max-height: 719px) {
    #p-innovation-hub .hub-tour { --hub-plan-h: clamp(360px, calc(100svh - var(--header-h) - 99px), 720px); }
    #p-innovation-hub .hub-map .hub-card-head { display: none; }
  }
  #p-innovation-hub .hub-stop { padding-block: var(--s-7); scroll-margin-top: 0; }
  /* The last room must reach the reading line while the plan card is still pinned: the card ends the plan
     + 85.5px chrome below its top, which is 176px above the reading line, so -75px leaves about 15px. */
  #p-innovation-hub .hub-stop:last-child { min-height: calc(var(--hub-plan-h) - 75px); }
}

/* ---- Scroll-linked highlight and room photos (no JS) ---- */
/* Lit: the area fills with the gold tint (--tint-border) inside the gold ring; its name stays --ink (6:1)
   and its chip goes solid gold. Dimmed areas keep the plain fill. Entries use only the edge and chip.
   The keyframes carry the state (--hub-state) and the properties that are not colours; the colours inside the
   plan links come from the style queries below. The room photos do not follow the plan: hub-color-in runs on
   each photo's own timeline (end of this block). */
@keyframes hub-dim { from, to { --hub-state: dim; } }
@keyframes hub-lit { from, to { --hub-state: lit; --hub-edge: var(--teal); --hub-z: 3; } }
@keyframes hub-color-in { from, to { --hub-color-on: 1; } }
@supports (animation-timeline: view()) and (timeline-scope: none) {
  #p-innovation-hub .hub-tour { timeline-scope: --hub-collab, --hub-conf, --hub-huddle, --hub-eng; }
  #p-innovation-hub .hub-stop { view-timeline-axis: block; view-timeline-inset: var(--hub-line) calc(100% - var(--hub-line)); }
  #p-innovation-hub #room-collaboration { view-timeline-name: --hub-collab; }
  #p-innovation-hub #room-conference { view-timeline-name: --hub-conf; }
  #p-innovation-hub #room-huddle { view-timeline-name: --hub-huddle; }
  #p-innovation-hub #room-engineering { view-timeline-name: --hub-eng; }
  /* Each area dims while another numbered room is at the reading line and lights while its own is. The plan
     is neutral before and after the tour. A state change, not motion. site.css sets
     `animation: none !important` on every element under prefers-reduced-motion, so these longhands carry
     !important to keep the highlight for everyone. */
  #p-innovation-hub a.hub-room { animation-name: hub-dim, hub-dim, hub-dim, hub-lit !important; animation-duration: auto !important; animation-fill-mode: none !important; }
  #p-innovation-hub .hub-room--collab { animation-timeline: --hub-conf, --hub-huddle, --hub-eng, --hub-collab !important; }
  #p-innovation-hub :is(.hub-room--conf1, .hub-room--conf2) { animation-timeline: --hub-collab, --hub-huddle, --hub-eng, --hub-conf !important; }
  #p-innovation-hub :is(.hub-room--huddle1, .hub-room--huddle2) { animation-timeline: --hub-collab, --hub-conf, --hub-eng, --hub-huddle !important; }
  #p-innovation-hub .hub-room--eng { animation-timeline: --hub-collab, --hub-conf, --hub-huddle, --hub-eng !important; }
  #p-innovation-hub .hub-stop { animation-name: hub-lit !important; animation-duration: auto !important; animation-fill-mode: none !important; animation-timeline: view(block var(--hub-line) calc(100% - var(--hub-line))) !important; }
  /* Colours inside the plan links. Chrome paints a :visited link, and everything inside it, with colours that
     CSS animations never reach (a guard against history sniffing). Once a visitor clicks an area, its
     #room-... URL is in history, and from then on an animated colour stays at its base value: the lit area kept
     only its gold ring (box-shadow is not a link colour) and lost its fill, edge and chip, on every later visit
     too. A style query turns the animated --hub-state into ordinary rules, which visited links use like any
     other rule. A link cannot query itself, so its fill, edge and ring paint on its ::before, which queries the
     link; z-index -1 keeps that layer under the chip and name and over the link's own fill and hairline. */
  #p-innovation-hub a.hub-room::before { content: ""; position: absolute; inset: -1px; z-index: -1; border: 1px solid transparent; }
  @container style(--hub-state: lit) {
    #p-innovation-hub a.hub-room::before { border-color: var(--teal); background: var(--tint-border); box-shadow: 0 0 0 1px var(--teal); }
    #p-innovation-hub .hub-room-name { color: var(--ink); }
    #p-innovation-hub .hub-mark { border-color: var(--teal); background: var(--teal); color: var(--bg); }
  }
  @container style(--hub-state: dim) {
    #p-innovation-hub .hub-room-name { color: var(--ink-3); }
    #p-innovation-hub .hub-mark { border-color: var(--hairline); background: transparent; color: var(--ink-3); }
  }
  /* Room photos follow their own visibility, not the plan. Each photo's frame (.shot, the same box as the photo)
     is its own view() timeline, which starts under the header (and the plan strip, --hub-view-top). The frame
     runs it, not the img: .shot has overflow: hidden (site.css), so an img's view() would track the frame, which
     never scrolls. hub-color-in sets --hub-color-on from entry --hub-color-at to exit 100% - --hub-color-at:
     while at least that share of the photo is in view, coming in or going out, the colour photo fades in over its
     black and white copy, and back out when less is. Several photos can be in colour at once. Only opacity
     changes; the filter on .hub-bw never does. Without this block every photo shows in colour. The !important
     longhands keep the switch under prefers-reduced-motion, as for the plan above; site.css drops the transition
     there, so the photo still changes, without the fade. */
  #p-innovation-hub .hub-stop .shot { animation-name: hub-color-in !important; animation-duration: auto !important; animation-fill-mode: none !important; animation-timeline: view(block var(--hub-view-top) 0px) !important; animation-range: entry var(--hub-color-at) exit calc(100% - var(--hub-color-at)) !important; }
  #p-innovation-hub .hub-stop .shot .hub-color { opacity: var(--hub-color-on, 0); }
  @media (prefers-reduced-motion: no-preference) {
    #p-innovation-hub .hub-stop .shot .hub-color { transition: opacity 600ms ease-out; }
  }

  /* Phone and tablet: the plan, on its side, becomes a compact sticky strip under the site header. */
  @media (max-width: 1023px) and (min-height: 500px) {
    #p-innovation-hub .hub-tour {
      --hub-plan-h: min(calc(100cqi * 594 / 1646), 200px, calc(28svh - 21px));
      --hub-line: calc(var(--header-h) + 1px + var(--hub-strip) + 20%);
      --hub-view-top: calc(var(--header-h) + 1px + var(--hub-strip));
    }
    #p-innovation-hub .hub-map {
      position: sticky;
      top: calc(var(--header-h) + 1px);
      z-index: 10;
      height: var(--hub-strip);
      margin: 0 calc(var(--gutter) * -1);
      padding: 10px var(--gutter);
      border-width: 0 0 1px;
      border-radius: 0;
    }
    #p-innovation-hub .hub-stop { scroll-margin-top: var(--hub-strip); }
    /* End of the tour: keep the last room lit until the strip itself starts to scroll away. */
    #p-innovation-hub .hub-stop:last-child { view-timeline-inset: calc(var(--header-h) + 1px + var(--hub-strip)) calc(100% - var(--hub-line)); }
    #p-innovation-hub .hub-stop:last-child { animation-timeline: view(block calc(var(--header-h) + 1px + var(--hub-strip)) calc(100% - var(--hub-line))) !important; }
  }
}

/* ---- Sessions band (unchanged) ---- */
#p-innovation-hub .hub-sessions { display: grid; gap: var(--s-6); }
#p-innovation-hub .hub-sessions .section-head { margin-bottom: 0; }
#p-innovation-hub .hub-sessions .hub-cta { margin-top: 0; }
@media (min-width: 900px) {
  #p-innovation-hub .hub-sessions { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: var(--s-6) var(--s-7); }
  #p-innovation-hub .hub-sessions .hub-list { grid-column: 2; grid-row: 1 / 3; }
  #p-innovation-hub .hub-sessions .hub-cta { grid-row: 2; align-self: start; border-top: 0; padding-top: 0; }
}

/* ---- Visit cover: building photo with the visit panel on top ---- */
#p-innovation-hub .hub-cover { position: relative; isolation: isolate; padding-bottom: var(--section-pad); background: var(--bg); scroll-margin-top: 0; }
#p-innovation-hub .hub-cover-photo { position: relative; }
#p-innovation-hub .hub-cover-photo::after { content: ""; position: absolute; inset: 0; background: rgba(28, 30, 34, 0.62); pointer-events: none; }
#p-innovation-hub .hub-cover-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 42% 46%; }
#p-innovation-hub .hub-visit {
  position: relative;
  margin-top: calc(var(--s-8) * -1);
  padding: var(--s-5) 20px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
#p-innovation-hub .hub-visit .eyebrow { margin: 0; }
#p-innovation-hub .hub-visit .sol-dl { border-bottom: 0; }
#p-innovation-hub .hub-coords { display: block; margin-top: var(--s-1); }
/* Tablet keeps the stacked band (an overlay panel would hide the building); 16:9 so the band stays short. */
@media (min-width: 600px) and (max-width: 1023px) {
  #p-innovation-hub .hub-cover-img { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  #p-innovation-hub .hub-cover { display: grid; align-items: end; min-height: clamp(600px, 80svh, 760px); padding-block: var(--s-10) var(--s-8); }
  #p-innovation-hub .hub-cover-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  /* Panel on the left half; the tower (36.9%-55.6% of the photo's width) starts 40px past it at any width. */
  #p-innovation-hub .hub-cover-img { position: absolute; top: 0; left: calc(50% + 40px); width: auto; height: auto; max-width: none; min-height: 100%; min-width: calc((50% + 40px) * 2.75); aspect-ratio: auto; object-fit: fill; transform: translateX(-36.9%); }
  #p-innovation-hub .hub-cover > .container { position: relative; z-index: 1; display: flex; justify-content: flex-start; }
  #p-innovation-hub .hub-visit { width: min(600px, 50%); margin-top: 0; padding: var(--s-6); background: rgba(14, 15, 17, 0.9); }
}