/* ==========================================================================
   Building 7 — homepage
   Sections in page order, then the responsive and reduced-motion passes.
   ========================================================================== */

/* ------------------------------------------------------- the motion floor */

/*
 * Anything marked `data-reveal` starts displaced and is released by the
 * IntersectionObserver in site.js. The hidden state is only applied when
 * scripting is on, so a no-JS page is fully legible.
 */
.js [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition:
		opacity 0.72s var(--ease-out) var(--reveal-delay, 0ms),
		transform 0.72s var(--ease-out) var(--reveal-delay, 0ms),
		box-shadow 0.45s var(--ease-out),
		color 0.4s var(--ease-out),
		background-color 0.4s var(--ease-out),
		border-color 0.4s var(--ease-out);
	will-change: transform, opacity;
}

.js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

.js [data-reveal].is-in {
	will-change: auto;
}

/* Children of a staggered group ride in one after another. */
.js [data-reveal-stagger] > * {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition:
		opacity 0.6s var(--ease-out),
		transform 0.6s var(--ease-out),
		box-shadow 0.45s var(--ease-out),
		color 0.4s var(--ease-out),
		background-color 0.4s var(--ease-out),
		border-color 0.4s var(--ease-out);
}

.js [data-reveal-stagger].is-in > * {
	opacity: 1;
	transform: none;
}

.js [data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 90ms; }
.js [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 180ms; }
.js [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 270ms; }
.js [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 360ms; }
.js [data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 450ms; }
.js [data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: 540ms; }
.js [data-reveal-stagger].is-in > *:nth-child(7) { transition-delay: 630ms; }

/* Display headings arrive a word at a time, from under a clipped baseline. */
.b7-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.06em;
	margin-bottom: -0.06em;
}

.b7-word > span {
	display: inline-block;
	transform: translate3d(0, 105%, 0);
	transition: transform 0.86s var(--ease-out);
	transition-delay: calc(var(--w, 0) * 65ms);
}

.is-in .b7-word > span,
.b7-word.is-in > span {
	transform: none;
}

/* ---------------------------------------------------------------- display */

.b7-display {
	margin: 0;
	font-size: var(--fs-display);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.005em;
}

.b7-display--centre {
	text-align: center;
}

.b7-display__light {
	font-weight: 300;
}

.b7-display__bold {
	font-weight: 700;
}

/*
 * "Building 7" is a name, and a name that breaks across two lines with the 7
 * left on its own reads as a mistake. The words inside a display heading are
 * separate inline-blocks so the entrance can stagger them, which is exactly
 * what makes them breakable — this puts that back where it matters.
 */
.b7-nowrap {
	white-space: nowrap;
}

.b7-display__line {
	display: block;
}

.b7-eyebrow {
	margin: 0 0 0.1em;
	color: var(--orange);
	font-size: var(--fs-eyebrow);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.005em;
}

.b7-pipe {
	color: var(--magenta);
	padding-inline: 0.25em;
}

/* ----------------------------------------------------------------- the 7 */

/*
 * `seven-mark.webp` is the alpha silhouette the coming-soon portal was cut
 * from, so masking a gradient through it gives the same seven everywhere.
 */
.b7-seven {
	display: inline-block;
	width: 0.75em;
	height: 1em;
	vertical-align: -0.06em;
	-webkit-mask: url("../img/seven-mark.webp") no-repeat center / contain;
	mask: url("../img/seven-mark.webp") no-repeat center / contain;
	background: currentColor;
}

.b7-seven--white { background: #fff; }
.b7-seven--warm { background: var(--grad-warm); }
.b7-seven--cool { background: var(--grad-cool); }

/* --------------------------------------------------------------- buttons */

.b7-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.72em 2.1em;
	border: 0;
	border-radius: var(--r-pill);
	color: #fff;
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	isolation: isolate;
	overflow: hidden;
	transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.b7-btn--warm { background: var(--grad-warm-rev); }
.b7-btn--cool { background: var(--grad-cool-rev); }
.b7-btn--wide { width: 100%; }

/* A second fill crosses under the label instead of a colour transition. */
.b7-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transform: translate3d(-101%, 0, 0);
	transition: transform 0.55s var(--ease-out), opacity 0.2s linear;
}

.b7-btn--warm::after { background: var(--grad-cool-rev); }
.b7-btn--cool::after { background: var(--grad-warm-rev); }

.b7-btn:hover,
.b7-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -14px rgb(33 11 74 / 0.75);
}

.b7-btn:hover::after,
.b7-btn:focus-visible::after {
	opacity: 1;
	transform: none;
}

.b7-btn:active {
	transform: translateY(0);
}

/* Small circular controls: carousel arrows, lightbox controls. */
.b7-round {
	display: grid;
	place-items: center;
	width: clamp(2.75rem, 2.9vw, 3.5rem);
	height: clamp(2.75rem, 2.9vw, 3.5rem);
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: transform 0.4s var(--ease-out), filter 0.4s var(--ease-out);
}

.b7-round--warm { background: var(--grad-warm); }
.b7-round--cool { background: var(--grad-cool); }

.b7-round .b7-icon {
	width: 42%;
	height: 42%;
}

.b7-round:hover,
.b7-round:focus-visible {
	transform: scale(1.09);
	filter: saturate(1.15);
}

.b7-round[disabled] {
	opacity: 0.32;
	cursor: default;
	transform: none;
}

/* ---------------------------------------------------------------- header */

.b7-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 90;
	color: #fff;
	background: rgb(33 11 74 / 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition:
		background 0.5s var(--ease-out),
		transform 0.55s var(--ease-out),
		box-shadow 0.5s var(--ease-out);
}

/*
 * Condensed, the bar is all but opaque, so the backdrop blur behind it is
 * invisible — and a full-width backdrop filter is re-composited on every scroll
 * frame. It is only worth paying for over the hero, where the bar is
 * translucent over the photograph.
 */
.b7-header.is-condensed {
	background: rgb(24 6 58 / 0.97);
	box-shadow: 0 10px 34px -22px rgb(0 0 0 / 0.9);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.b7-header.is-hidden {
	transform: translate3d(0, -100%, 0);
}

/*
 * The bar arrives with the artwork rather than sitting there before it. Only
 * opacity is animated on the header itself, so the sticky show/hide transform
 * is never fought over; the slide belongs to the three groups inside it.
 */
.js .b7-header {
	animation: b7-fade-in 0.7s linear 0.12s both;
}

.js .b7-header__inner > * {
	animation: b7-head-in 0.9s var(--ease-out) both;
}

.js .b7-header__inner > *:nth-child(1) { animation-delay: 0.34s; }
.js .b7-header__inner > *:nth-child(2) { animation-delay: 0.18s; }
.js .b7-header__inner > *:nth-child(3) { animation-delay: 0.42s; }
.js .b7-header__inner > *:nth-child(4) { animation-delay: 0.42s; }

@keyframes b7-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes b7-head-in {
	from { opacity: 0; transform: translate3d(0, -14px, 0); }
	to { opacity: 1; transform: none; }
}

.b7-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	max-width: calc(var(--shell) + var(--gutter) * 2);
	margin-inline: auto;
	padding: clamp(0.75rem, 1.1vw, 1.35rem) var(--gutter);
	transition: padding 0.5s var(--ease-out);
}

.b7-header.is-condensed .b7-header__inner {
	padding-block: clamp(0.5rem, 0.7vw, 0.85rem);
}

.b7-header__nav--end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(0.75rem, 1vw, 1.25rem);
}

.b7-navlist {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1vw, 1.1rem);
	flex-wrap: wrap;
}

/*
 * The item is a flex line of its own so the dot centres against the link.
 * As an inline-block the dot could not: `.b7-navlink` clips its overflow for
 * the label swap, which makes its baseline its bottom edge, and `vertical-align`
 * measured from there put the dot down by the link's descender.
 */
.b7-navlist__item {
	display: flex;
	align-items: center;
}

.b7-navlist__item + .b7-navlist__item::before {
	content: "";
	flex: none;
	width: 0.4rem;
	height: 0.4rem;
	margin-inline-end: clamp(0.6rem, 1vw, 1.1rem);
	border-radius: 50%;
	background: var(--orange);
	transition: background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.b7-navlink {
	position: relative;
	display: inline-block;
	padding: 0.4rem 0.15rem;
	font-size: clamp(0.72rem, 0.9vw, 1.05rem);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-decoration: none;
	overflow: hidden;
}

/* The label lifts away and a copy rises to take its place. */
.b7-navlink__text {
	display: inline-block;
	transition: transform 0.42s var(--ease-out), opacity 0.42s var(--ease-out);
}

.b7-navlink::after {
	content: attr(data-label);
	position: absolute;
	inset: 0.4rem 0.15rem auto;
	opacity: 0;
	transform: translate3d(0, 100%, 0);
	transition: transform 0.42s var(--ease-out), opacity 0.42s var(--ease-out);
	background: var(--grad-warm-rev);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.b7-navlink:hover .b7-navlink__text,
.b7-navlink:focus-visible .b7-navlink__text {
	opacity: 0;
	transform: translate3d(0, -100%, 0);
}

.b7-navlink:hover::after,
.b7-navlink:focus-visible::after {
	opacity: 1;
	transform: none;
}

.b7-navlink.is-current::before {
	content: "";
	position: absolute;
	inset: auto 0.15rem 0;
	height: 2px;
	background: var(--grad-warm-rev);
	border-radius: 2px;
}

.b7-brand {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3em;
	font-size: clamp(1.05rem, 1.6vw, 1.9rem);
	font-weight: 300;
	letter-spacing: 0.005em;
	text-decoration: none;
	white-space: nowrap;
}

.b7-brand__word {
	font-weight: 700;
}

.b7-brand__lead {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3em;
}

/* The comma rides on the seven, with no gap between them. */
.b7-brand__mark {
	display: inline-flex;
	align-items: baseline;
}

.b7-brand__seven {
	width: 0.52em;
	height: 0.86em;
	transition: transform 0.6s var(--ease-out);
}

.b7-brand:hover .b7-brand__seven,
.b7-brand:focus-visible .b7-brand__seven {
	transform: rotate(-8deg) scale(1.1);
}

.b7-social {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--grad-cool);
	color: #fff;
	text-decoration: none;
	transition: transform 0.45s var(--ease-out), filter 0.45s var(--ease-out);
}

.b7-social .b7-icon {
	width: 58%;
	height: 58%;
}

.b7-social:hover,
.b7-social:focus-visible {
	transform: rotate(-8deg) scale(1.1);
	filter: saturate(1.2);
}

/* ------------------------------------------------------------ mobile menu */

.b7-burger {
	display: none;
	justify-self: end;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.b7-burger__box {
	display: grid;
	gap: 5px;
	justify-items: end;
}

.b7-burger__bar {
	display: block;
	width: 1.6rem;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transition: transform 0.45s var(--ease-out), opacity 0.25s linear, width 0.45s var(--ease-out);
}

.b7-burger__bar:nth-child(2) { width: 1.15rem; }

.b7-burger:hover .b7-burger__bar:nth-child(2),
.b7-burger:focus-visible .b7-burger__bar:nth-child(2) {
	width: 1.6rem;
}

.b7-burger:hover .b7-burger__bar:nth-child(1),
.b7-burger:focus-visible .b7-burger__bar:nth-child(1) {
	width: 1.15rem;
}

.b7-burger[aria-expanded="true"] .b7-burger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.b7-burger[aria-expanded="true"] .b7-burger__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}
.b7-burger[aria-expanded="true"] .b7-burger__bar:nth-child(3) {
	width: 1.6rem;
	transform: translateY(-7px) rotate(-45deg);
}

.b7-menu {
	position: fixed;
	inset: 0;
	z-index: -1;
	display: grid;
	align-content: center;
	padding: 6rem var(--gutter) 3rem;
	background: linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 60%, #2b0b5e 100%);
	opacity: 0;
	visibility: hidden;
	clip-path: circle(0% at calc(100% - 3.5rem) 2.5rem);
	transition:
		clip-path 0.66s var(--ease-soft),
		opacity 0.3s linear,
		visibility 0s linear 0.66s;
}

.b7-menu[hidden] {
	display: grid;
}

.b7-header.is-menu-open .b7-menu {
	opacity: 1;
	visibility: visible;
	clip-path: circle(150% at calc(100% - 3.5rem) 2.5rem);
	transition:
		clip-path 0.72s var(--ease-soft),
		opacity 0.2s linear,
		visibility 0s;
}

.b7-menu__list {
	display: grid;
	gap: clamp(0.35rem, 1.4vh, 1rem);
}

.b7-menu__item {
	overflow: hidden;
}

.b7-menu__link {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	padding: 0.35rem 0;
	font-size: clamp(1.75rem, 8vw, 3rem);
	font-weight: 300;
	text-decoration: none;
	transform: translate3d(0, 110%, 0);
	opacity: 0;
	transition:
		transform 0.6s var(--ease-out),
		opacity 0.4s linear,
		color 0.3s var(--ease-out);
	transition-delay: calc(var(--i) * 55ms);
}

.b7-header.is-menu-open .b7-menu__link {
	transform: none;
	opacity: 1;
}

.b7-menu__index {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: var(--track-wide);
	color: var(--orange);
	transition: transform 0.45s var(--ease-out), opacity 0.3s linear;
}

.b7-menu__text {
	display: inline-block;
	transition: transform 0.45s var(--ease-out);
}

.b7-menu__link:hover .b7-menu__text,
.b7-menu__link:focus-visible .b7-menu__text {
	transform: translateX(0.35rem);
}

.b7-menu__link:hover .b7-menu__index,
.b7-menu__link:focus-visible .b7-menu__index {
	transform: translateX(0.2rem) translateY(-0.15rem);
	opacity: 0.75;
}

.b7-menu__link:hover .b7-menu__text,
.b7-menu__link:focus-visible .b7-menu__text {
	background: var(--grad-warm-rev);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.b7-menu__foot {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: clamp(1.5rem, 5vh, 3rem);
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: transform 0.6s var(--ease-out), opacity 0.4s linear;
	transition-delay: calc(var(--i) * 55ms);
}

.b7-header.is-menu-open .b7-menu__foot {
	opacity: 1;
	transform: none;
}


/* ================================================================== hero */

.b7-hero {
	position: relative;
	background: var(--ink);
	color: #fff;
}

/*
 * The track is the scroll distance the portal opens over; the stage sticks
 * inside it. Using position: sticky rather than a scripted pin keeps normal
 * scrolling intact — no trapping, no jump when the section is entered.
 */
.b7-hero__track {
	position: relative;
	height: 260vh;
}

.b7-hero__stage {
	/*
	 * `--S` is the whole composition's scale: the width of the ribbon seven.
	 * Every layer, and the keyhole, is expressed against it and against the
	 * centre of the stage, so a single value recomposes the artwork at any
	 * aspect ratio. The landscape value reproduces the 1.773 artboard the
	 * coming-soon plugin composes on, to the pixel — but the artwork now fills
	 * the stage instead of sitting letterboxed inside it.
	 */
	--S: min(73vw, 129.4dvh);
	--mask-w: calc(var(--S) * 0.3877);
	--mask-h: calc(var(--S) * 0.5246);

	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: var(--ink);
	isolation: isolate;
}

.b7-hero__art {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background: var(--ink);
	transform: translate3d(0, 0, 0);
	contain: layout paint;
}

.b7-hero__art > span {
	position: absolute;
	display: block;
	width: var(--lw);
	left: calc(50% + var(--lx, 0px));
	top: calc(50% + var(--ly, 0px));
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.b7-hero__art img {
	display: block;
	width: 100%;
	height: auto;
	transform: rotate(var(--lr, 0deg));
	user-select: none;
	-webkit-user-drag: none;
}

/* The approved composition, as ratios of `--S`. */
.b7-hero__orb {
	--lw: calc(var(--S) * 0.962);
	--lx: calc(var(--S) * 0.1034);
	--ly: calc(var(--S) * -0.0803);
	z-index: 2;
}

.b7-hero__ribbon {
	--lw: var(--S);
	--lx: calc(var(--S) * -0.503);
	--ly: calc(var(--S) * -0.3885);
	z-index: 3;
}

.b7-hero__lines {
	--lw: calc(var(--S) * 0.818);
	--lx: calc(var(--S) * -0.7645);
	--ly: calc(var(--S) * -0.452);
	z-index: 4;
}

/*
 * Three fills that only appear where the frame is taller than the approved
 * composition. On a phone the artboard would otherwise sit as a band across the
 * middle of the screen with flat aubergine above and below it; these carry the
 * same three brand elements into that space so the opening frame is a full
 * composition at every size. They are removed again on wide screens.
 */
.b7-hero__wash,
.b7-hero__lines2,
.b7-hero__orb2 {
	display: none;
}

.b7-hero__wash {
	inset: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background:
		radial-gradient(58% 34% at 76% 6%, rgb(174 5 241 / 0.42), rgb(174 5 241 / 0) 70%),
		radial-gradient(64% 32% at 14% 96%, rgb(243 131 5 / 0.3), rgb(243 131 5 / 0) 72%);
}

.b7-hero__lines2 {
	--lw: calc(var(--S) * 0.92);
	--lx: calc(var(--S) * -0.28);
	--ly: calc(var(--S) * -1.34);
	z-index: 1;
	opacity: 0.55;
}

.b7-hero__lines2 img {
	--lr: 194deg;
}

.b7-hero__orb2 {
	--lw: calc(var(--S) * 0.72);
	--lx: calc(var(--S) * -0.95);
	--ly: calc(var(--S) * 0.34);
	z-index: 1;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--grad-cool);
	opacity: 0.92;
}

/* The measuring stick the script reads the keyhole's size from, so the mask
   geometry always follows whatever the stylesheet composed. */
.b7-hero__gauge {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--mask-w);
	height: var(--mask-h);
	visibility: hidden;
	pointer-events: none;
}

/*
 * Portrait and near-square frames: a taller composition. The seven grows to
 * carry the screen, the fills come in above and below it, and the keyhole
 * grows with everything else.
 */
@media (max-aspect-ratio: 11 / 10) {
	.b7-hero__stage {
		--S: min(118vw, 61dvh);
	}

	.b7-hero__wash,
	.b7-hero__lines2,
	.b7-hero__orb2 {
		display: block;
	}
}

@media (max-aspect-ratio: 3 / 5) {
	.b7-hero__stage {
		--S: min(122vw, 56dvh);
	}
}

/*
 * The panorama is a viewport-level sibling of the artboard so the revealed
 * photograph fills the screen. The seven-shaped mask is zoomed from an anchor
 * inside its bowl, which is what makes the photo grow out of the mark rather
 * than simply fading up.
 */
.b7-hero__portal {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: url("../img/seven-mark.webp");
	mask-image: url("../img/seven-mark.webp");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	-webkit-mask-size: var(--mask-w) var(--mask-h);
	mask-size: var(--mask-w) var(--mask-h);
}

.b7-hero__portal-media {
	position: absolute;
	inset: 0;
	transform: translate3d(0, 0, 0) scale(1.04);
	transform-origin: 50% 50%;
	will-change: transform;
	/* So the floor highlight can measure the photograph's cover box. */
	container-type: size;
}

.b7-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

/*
 * Floor 7, lit over the photograph.
 *
 * `--iw`/`--ih` are the size the 16:9 panorama is painted at under
 * object-fit: cover, so the box below sits on the same pixels of the photograph
 * at every aspect ratio. Its numbers are the SVG viewBox (715 530 401 100) as
 * fractions of the panorama's 1920 x 1080: the storey band plus room for the
 * halo. If the box changes, change `$b7_floor_box` in sections/hero.php too. Nothing here may create a stacking context — no opacity, transform or
 * filter on `.b7-floor` itself — or the two layers would blend with an empty
 * group instead of with the photograph.
 */
.b7-floor {
	--iw: max(100vw, 177.7778vh);
	--ih: max(100vh, 56.25vw);
	--wipe: 1;

	position: absolute;
	left: calc(50% - 0.1276042 * var(--iw));
	top: calc(50% - 0.0092593 * var(--ih));
	width: calc(0.2088542 * var(--iw));
	height: calc(0.0925926 * var(--ih));
	pointer-events: none;
	forced-color-adjust: none;
}

@supports (width: 1cqw) {
	.b7-floor {
		--iw: max(100cqw, 177.7778cqh);
		--ih: max(100cqh, 56.25cqw);
	}
}

.b7-floor__tint,
.b7-floor__lift,
.b7-floor__glow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	transition: opacity 0.6s var(--ease-out);
}

/*
 * The supplied artwork's own treatment, measured against the untouched
 * photograph: the gradient's hue and saturation over the photograph's
 * luminance, at about two-thirds strength. Every mullion and window survives.
 */
.b7-floor__tint {
	mix-blend-mode: color;
	opacity: 0.68;
}

/* A little warm light on the floor itself: the dark glazing takes most of it,
   which is what reads as lit from inside. */
.b7-floor__lift {
	mix-blend-mode: screen;
	opacity: 0.24;
}

/*
 * The glow proper is a halo around the floor rather than a wash over it, so
 * the facade keeps its detail under the colour. It is plain alpha: on a pale
 * facade a screen or lighten blend barely registers.
 */
.b7-floor__glow {
	opacity: 1;
}

.b7-floor__halo {
	opacity: 0.95;
}

.b7-floor.is-off .b7-floor__tint,
.b7-floor.is-off .b7-floor__lift,
.b7-floor.is-off .b7-floor__glow {
	opacity: 0;
}

/* The light runs along the floor from left to right, behind a soft edge. */
.b7-floor.is-wiping .b7-floor__tint,
.b7-floor.is-wiping .b7-floor__lift,
.b7-floor.is-wiping .b7-floor__glow {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) * 116% - 16%), transparent calc(var(--wipe) * 116%));
	mask-image: linear-gradient(90deg, #000 calc(var(--wipe) * 116% - 16%), transparent calc(var(--wipe) * 116%));
}

.b7-floor__spark {
	position: absolute;
	left: 0;
	top: 50.25%;
	width: 8%;
	height: 72%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(255 246 232 / 0.95), rgb(255 196 128 / 0.6) 38%, rgb(251 49 76 / 0) 100%);
	mix-blend-mode: screen;
	opacity: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Once lit, the glow breathes twice and then holds: 4.8s in all, inside the
   five seconds anything may move by itself without a pause control. */
.b7-floor.is-breathing .b7-floor__glow {
	animation: b7-floor-breathe 2.4s var(--ease-soft) 2;
}

.b7-floor.is-breathing .b7-floor__lift {
	animation: b7-floor-breathe-lift 2.4s var(--ease-soft) 2;
}

@keyframes b7-floor-breathe {
	0%,
	100% { opacity: 1; }
	50% { opacity: 0.35; }
}

@keyframes b7-floor-breathe-lift {
	0%,
	100% { opacity: 0.24; }
	50% { opacity: 0.06; }
}

/* A veil that lifts as the portal opens, so the header stays readable. */
.b7-hero__stage::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 3;
	height: min(30vh, 16rem);
	background: linear-gradient(to bottom, rgb(24 6 58 / 0.55), rgb(24 6 58 / 0));
	opacity: var(--hero-veil, 0);
	pointer-events: none;
	transition: opacity 0.4s linear;
}

.b7-hero__trigger {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.b7-hero__trigger:focus-visible {
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px var(--magenta);
	border-radius: 0;
}

.b7-hero__prompt {
	position: absolute;
	left: 50%;
	bottom: clamp(1.75rem, 5vh, 3.5rem);
	z-index: 5;
	display: grid;
	justify-items: center;
	gap: 0.85rem;
	margin: 0;
	transform: translateX(-50%);
	color: #fff;
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-shadow: 0 2px 14px rgb(24 6 58 / 0.7);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.b7-hero__prompt.is-shown {
	opacity: 1;
}

.b7-hero__prompt-line {
	display: block;
	width: 1px;
	height: 2.25rem;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0));
	transform-origin: 50% 0;
	animation: b7-prompt 2.6s var(--ease-soft) infinite;
}

@keyframes b7-prompt {
	0%, 100% { transform: scaleY(0.35); opacity: 0.35; }
	45% { transform: scaleY(1); opacity: 1; }
}

/* ------------------------------------------------------------- welcome */

.b7-welcome {
	position: relative;
	z-index: 5;
	padding-block: clamp(3.5rem, 7vw, 8.5rem) clamp(4rem, 8vw, 9rem);
	background: var(--ink);
	overflow: hidden;
}

.b7-welcome__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	align-items: center;
	gap: clamp(2rem, 4vw, 5rem);
}

.b7-welcome__ribbon,
.b7-welcome__lines {
	position: absolute;
	display: block;
	pointer-events: none;
	z-index: 1;
}

.b7-welcome__ribbon {
	top: -14%;
	right: -14%;
	width: min(62vw, 60rem);
	transform: translate3d(0, var(--par, 0px), 0) rotate(14deg);
	opacity: 0.95;
}

.b7-welcome__lines {
	bottom: -30%;
	right: 12%;
	width: min(46vw, 42rem);
	opacity: 0.5;
	transform: translate3d(0, var(--par, 0px), 0) rotate(-9deg);
}

.b7-welcome__ribbon img,
.b7-welcome__lines img {
	display: block;
	width: 100%;
	height: auto;
}

.b7-welcome__title {
	font-size: var(--fs-hero);
	margin-bottom: 0.5em;
}

.b7-welcome__facts {
	margin-bottom: 1.4em;
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
}

.b7-welcome__body {
	max-width: 34em;
	color: rgb(255 255 255 / 0.88);
	line-height: 1.55;
}

/* The same emphasis as the floor-plan copy, and the phrases the brochure sets
   in bold. */
.b7-welcome__body strong {
	color: #fff;
	font-weight: 600;
}

.b7-welcome__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

/* The circular interior photograph. */
.b7-orbit {
	position: relative;
	margin: 0;
	aspect-ratio: 1;
}

.b7-orbit__frame {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	transform: translate3d(0, 0, 0);
}

.b7-orbit__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	transition: transform 1.2s var(--ease-out);
}

.b7-orbit:hover .b7-orbit__img {
	transform: scale(1.12);
}

.b7-orbit__glow {
	position: absolute;
	inset: -6%;
	border-radius: 50%;
	background: conic-gradient(from 200deg, rgb(243 131 5 / 0.5), rgb(251 49 76 / 0.5), rgb(174 5 241 / 0.45), rgb(243 131 5 / 0.5));
	filter: blur(26px);
	opacity: 0.55;
	z-index: -1;
}

/* ================================================= light-surface linework */

.b7-paper {
	position: relative;
	background: var(--paper);
	color: var(--ink);
	overflow: hidden;
}

.b7-linework {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--orange);
	opacity: 0.22;
	pointer-events: none;
}

/* On these two the strands run behind body copy and a form, so they sit
   further back than they do on the specification section. */
.b7-transport__lines,
.b7-contact__lines {
	opacity: 0.09;
}

.b7-linework path {
	stroke-dasharray: var(--len, 2400);
	stroke-dashoffset: var(--len, 2400);
}

.js .b7-linework.is-in path {
	animation: b7-draw 1.9s var(--ease-out) forwards;
	animation-delay: calc(var(--strand, 0) * 90ms);
}

@keyframes b7-draw {
	to { stroke-dashoffset: 0; }
}

/* ====================================================== specifications */

/*
 * The boundary seven hangs out over the section above, so this section cannot
 * clip. `.b7-paper`'s `overflow: hidden` would cut the seven off, and
 * `overflow-clip-margin` — which would have clipped everything else while
 * letting the seven through — is not implemented in Safari, so it silently cut
 * the seven off there too. Nothing else in here overflows: the linework is an
 * `<svg>`, which clips its own geometry, and the carousel clips at its own
 * viewport. The raised stacking order puts the seven over the dark section it
 * crosses into.
 */
.b7-specs {
	z-index: 6;
	padding-block: clamp(3.5rem, 6vw, 7rem) clamp(3rem, 5vw, 6rem);
	overflow: visible;
}

.b7-specs__leaf,
.b7-contact__leaf {
	--leaf-w: clamp(3.25rem, 8vw, 7rem);
	position: absolute;
	top: calc(var(--leaf-w) * -0.62);
	z-index: 3;
	width: var(--leaf-w);
	pointer-events: none;
}

.b7-specs__leaf {
	left: 5%;
}

.b7-specs__leaf img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Every corner ribbon is the brand seven, and every one of them turns into it
 * as its section arrives.
 *
 * The turn is a transition the script triggers by class, not a value it writes
 * per scroll frame. Scroll-linking it meant the mark inherited every stutter
 * and change of pace in the reader's wheel or trackpad; on its own clock it is
 * smooth however the page is scrolled, and it runs backwards when the reader
 * scrolls back up past it.
 */
[data-turn-seven],
[data-boundary-seven] {
	transform-origin: 50% 50%;
	transition: transform 1.35s var(--ease-turn);
	will-change: transform;
}

[data-turn-seven] {
	transform: translate3d(0, var(--par, 0px), 0) rotate(var(--seven-from, -180deg));
}

[data-turn-seven].is-turned {
	transform: translate3d(0, var(--par, 0px), 0) rotate(0deg);
}

[data-boundary-seven] {
	transform: rotate(var(--seven-from, -180deg));
}

[data-boundary-seven].is-turned {
	transform: rotate(0deg);
}

.b7-specs .b7-shell {
	position: relative;
	z-index: 2;
}

.b7-specs .b7-display {
	margin-bottom: clamp(2rem, 4vw, 4rem);
}

/* --------------------------------------------------------------- carousel */

.b7-carousel {
	--disc: clamp(4.5rem, 9.4vw, 11.25rem);

	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: clamp(0.5rem, 1.5vw, 1.75rem);
}

/*
 * The arrows line up with the middle of the discs, not with the middle of the
 * cards — the labels below the discs would otherwise pull them low, which is
 * not where the artwork puts them.
 */
.b7-carousel__arrow {
	grid-row: 1;
	margin-top: calc(0.5rem + var(--disc) / 2);
	transform: translateY(-50%);
}

.b7-carousel__arrow:hover,
.b7-carousel__arrow:focus-visible {
	transform: translateY(-50%) scale(1.09);
}

.b7-carousel__arrow:active {
	transform: translateY(-50%) scale(0.96);
}

/*
 * The padding is headroom: the featured disc lifts and grows, and `overflow`
 * clips at the padding edge, so without it the lift and its shadow would be
 * sliced off. The negative margin keeps the row exactly where it was.
 */
.b7-carousel__viewport {
	grid-row: 1;
	padding: 1.1rem 0;
	margin-block: -1.1rem;
	overflow: hidden;
}

.b7-carousel__track {
	display: flex;
	align-items: flex-start;
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.b7-carousel__slide {
	flex: 0 0 calc((100% - (var(--per-view) - 1) * clamp(0.75rem, 1.5vw, 1.5rem)) / var(--per-view));
	/* Without this a long label's automatic minimum size widens its own card,
	   and the whole row stops being a grid of equal columns. */
	min-width: 0;
}

.b7-specs__track {
	--per-view: 5;
}

.b7-carousel__foot {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 1.6vw, 1.5rem);
	margin-top: clamp(1rem, 2vw, 1.75rem);
}

.b7-carousel__dots {
	display: flex;
	align-items: center;
	gap: clamp(0.4rem, 0.7vw, 0.7rem);
}

/*
 * The button is the target — 24px square, which is what WCAG 2.2 asks for even
 * where the mark inside it is small — and the visible dot is drawn inside it.
 */
.b7-carousel__dot {
	position: relative;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 50%;
	cursor: pointer;
}

.b7-carousel__dot::after {
	content: "";
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: rgb(245 40 96 / 0.3);
	transition: background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.b7-carousel__dot:hover::after {
	background: rgb(245 40 96 / 0.6);
	transform: scale(1.2);
}

.b7-carousel__dot.is-current::after {
	background: var(--grad-warm-rev);
	transform: scale(1.5);
}

.b7-carousel__playpause {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: none;
	border: 1px solid rgb(245 40 96 / 0.55);
	border-radius: 50%;
	color: var(--magenta);
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.3s var(--ease-out), background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.b7-carousel__playpause:hover,
.b7-carousel__playpause:focus-visible {
	opacity: 1;
	background: rgb(245 40 96 / 0.12);
	transform: scale(1.06);
}

.b7-gallery__playpause,
.b7-ticker__playpause,
.b7-campus__playpause {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.25rem;
	padding: 0.4rem 0.9rem;
	background: none;
	border: 1px solid currentColor;
	border-radius: var(--r-pill);
	color: var(--magenta);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.b7-gallery__playpause:hover,
.b7-gallery__playpause:focus-visible,
.b7-ticker__playpause:hover,
.b7-ticker__playpause:focus-visible {
	opacity: 1;
	transform: translateY(-1px);
}

.b7-carousel__playpause-icon,
.b7-gallery__playpause-icon,
.b7-ticker__playpause-icon {
	display: block;
	width: 0.9rem;
	height: 0.9rem;
}

.b7-carousel__ico-play { display: none; }

[aria-pressed="true"] .b7-carousel__ico-play { display: block; }
[aria-pressed="true"] .b7-carousel__ico-pause { display: none; }

/* --------------------------------------------------------------- one spec */

/*
 * Every slide always lays its note out, whether or not that note is the one on
 * show: the slides are equal-height flex items, so the row is permanently as
 * tall as the longest note and changing slides can never resize the section.
 * Only opacity and visibility change. Being plain layout, it re-measures
 * itself on any resize or font change with nothing to recalculate.
 */
.b7-spec {
	display: grid;
	grid-template-rows: auto auto;
	align-content: start;
	text-align: center;
}

.b7-spec__button {
	display: grid;
	justify-items: center;
	gap: clamp(0.75rem, 1.2vw, 1.25rem);
	width: 100%;
	padding: 0.5rem 0.25rem;
	background: none;
	border: 0;
	cursor: pointer;
}

.b7-spec__disc {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--disc);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--grad-warm);
	color: #fff;
	transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
}

.b7-spec__ring {
	position: absolute;
	inset: 7%;
	border: 1.5px solid rgb(255 255 255 / 0.85);
	border-radius: 50%;
	transition: transform 0.55s var(--ease-out), opacity 0.4s linear;
}

.b7-spec__icon {
	position: relative;
	width: 52%;
	height: 52%;
}

.b7-spec__label {
	max-width: 11em;
	overflow-wrap: break-word;
	color: var(--magenta);
	font-size: clamp(0.7rem, 0.83vw, 1rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	transition: color 0.35s var(--ease-out);
}

.b7-spec__button:hover .b7-spec__disc,
.b7-spec__button:focus-visible .b7-spec__disc,
.b7-spec.is-active .b7-spec__disc {
	transform: translateY(-6px) scale(1.06);
	box-shadow: 0 22px 40px -26px rgb(251 49 76 / 0.9);
}

/* The featured card is lit; the rest sit back a little rather than being
   dimmed to the point of being hard to read. */
.b7-spec {
	transition: opacity 0.5s var(--ease-out);
}

.js .b7-spec:not(.is-active) {
	opacity: 0.82;
}

.b7-spec__button:hover .b7-spec__ring,
.b7-spec__button:focus-visible .b7-spec__ring,
.b7-spec.is-active .b7-spec__ring {
	transform: scale(1.07);
	opacity: 0.55;
}

.b7-spec.is-active .b7-spec__label {
	color: var(--ink);
}

/* The note is hidden by default and shown with its slide; its box stays. */
.b7-spec__note {
	min-height: 0;
	max-width: 16em;
	margin: 0 auto;
	padding-top: 0.6rem;
	color: var(--ink);
	font-size: 0.9rem;
	line-height: 1.4;
	opacity: 0;
	transition: opacity 0.4s var(--ease-out);
}

.b7-spec__button[aria-expanded="true"] + .b7-spec__note {
	opacity: 1;
}

.b7-specs__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
	margin-top: clamp(2rem, 3.5vw, 3.5rem);
}

/* ============================================================== gallery */

.b7-gallery {
	position: relative;
	background: var(--ink);
}

.b7-gallery__strip {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 1.75rem);
	padding: clamp(0.6rem, 1.1vw, 1.1rem) var(--gutter);
	background: var(--grad-strip);
	color: #fff;
}

.b7-gallery__title {
	margin: 0;
	font-size: clamp(0.78rem, 1vw, 1.25rem);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	white-space: nowrap;
}

.b7-gallery__rule {
	flex: 1 1 auto;
	height: 1px;
	background: rgb(255 255 255 / 0.55);
}

.b7-gallery__seven {
	display: block;
	width: clamp(1.35rem, 1.8vw, 2.1rem);
	height: clamp(1.9rem, 2.5vw, 2.9rem);
}

.b7-gallery__seven .b7-seven {
	width: 100%;
	height: 100%;
}

.b7-gallery__pager {
	display: flex;
	align-items: center;
	gap: clamp(0.4rem, 0.7vw, 0.7rem);
}

.b7-gallery__dot {
	width: 0.85rem;
	height: 0.85rem;
	padding: 0;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: background 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

/* The 44px target sits outside the visible dot. */
.b7-gallery__dot::before {
	content: "";
	position: absolute;
	width: 2.75rem;
	height: 2.75rem;
	transform: translate(-50%, -50%);
	margin-left: 0.42rem;
	margin-top: 0.42rem;
}

.b7-gallery__dot {
	position: relative;
}

.b7-gallery__dot.is-current,
.b7-gallery__dot[aria-pressed="true"] {
	background: #fff;
	transform: scale(1.15);
}

.b7-gallery__dot:hover {
	background: rgb(255 255 255 / 0.6);
}

/*
 * A snapping track at every width, not a fixed three-up grid: twelve
 * photographs in three columns would have stacked into four rows. Three are on
 * show and the pager scrolls the rest into view, which is also what the swipe
 * gesture already did on phones.
 */
.b7-gallery__row {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.b7-gallery__row::-webkit-scrollbar {
	display: none;
}

.b7-gallery__cell {
	position: relative;
	flex: 0 0 calc(100% / 3);
	scroll-snap-align: center;
	overflow: hidden;
}

.b7-gallery__link {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	text-decoration: none;
}

.b7-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1s var(--ease-out), filter 0.6s var(--ease-out);
	filter: saturate(0.94);
}

.b7-gallery__cell.is-current .b7-gallery__img {
	filter: saturate(1.06);
	transform: scale(1.06);
}

.b7-gallery__veil {
	position: absolute;
	inset: 0;
	background: var(--grad-warm);
	opacity: 0;
	transition: opacity 0.45s var(--ease-out);
	mix-blend-mode: multiply;
}

.b7-gallery__zoom {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: clamp(3rem, 4.2vw, 4.75rem);
	height: clamp(3rem, 4.2vw, 4.75rem);
	color: #fff;
	transform: translate(-50%, -50%) scale(0.75);
	opacity: 0;
	transition: transform 0.5s var(--ease-out), opacity 0.35s linear;
}

.b7-gallery__zoom .b7-icon {
	width: 100%;
	height: 100%;
}

.b7-gallery__link:hover .b7-gallery__veil,
.b7-gallery__link:focus-visible .b7-gallery__veil,
.b7-gallery__cell.is-current .b7-gallery__veil {
	opacity: 0.72;
}

.b7-gallery__link:hover .b7-gallery__zoom,
.b7-gallery__link:focus-visible .b7-gallery__zoom {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.b7-gallery__cell.is-current .b7-gallery__veil {
	opacity: 0.18;
}

.b7-gallery__link:hover .b7-gallery__img,
.b7-gallery__link:focus-visible .b7-gallery__img {
	transform: scale(1.08);
}

/* =========================================================== floor plans */

.b7-floors {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--paper);
	color: var(--ink);
}

.b7-floors__ink {
	position: relative;
	padding: clamp(3rem, 5.5vw, 6.5rem) clamp(1.5rem, 4vw, 5rem) clamp(3rem, 5.5vw, 6.5rem) var(--gutter);
	background: var(--ink);
	color: #fff;
	overflow: hidden;
}

.b7-floors__lines {
	position: absolute;
	top: -34%;
	left: -20%;
	width: 92%;
	transform: translate3d(0, var(--par, 0px), 0) rotate(-24deg);
	opacity: 0.75;
	pointer-events: none;
}

.b7-floors__lines img {
	display: block;
	width: 100%;
	height: auto;
}

/* The magenta sweep that fills the panel's lower right corner. */
.b7-floors__swoosh {
	position: absolute;
	right: -34%;
	bottom: -46%;
	width: 108%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--grad-cool);
	opacity: 0.92;
	pointer-events: none;
	transform: translate3d(0, 0, 0) scale(0.94);
	transform-origin: 78% 78%;
	transition: transform 1.4s var(--ease-out);
}

.b7-floors[data-in] .b7-floors__swoosh,
.b7-floors__ink.is-in .b7-floors__swoosh {
	transform: none;
}

.b7-floors__copy {
	position: relative;
	z-index: 2;
	display: grid;
	gap: clamp(1rem, 1.6vw, 1.6rem);
	max-width: 40rem;
}

.b7-floors__copy .b7-display {
	margin-bottom: 0.35em;
}

.b7-floors__copy p {
	color: rgb(255 255 255 / 0.9);
	line-height: 1.5;
}

.b7-floors__copy strong {
	color: #fff;
	font-weight: 600;
}

.b7-floors__note {
	font-size: 0.9em;
	color: rgb(255 255 255 / 0.75);
}

/* -------------------------------------------------------- the suite table */

.b7-suites {
	margin-block: clamp(0.75rem, 1.6vw, 1.5rem);
	border: 1px solid rgb(255 255 255 / 0.55);
	border-radius: clamp(0.9rem, 1.2vw, 1.4rem);
	overflow: hidden;
	backdrop-filter: blur(2px);
}

.b7-suites__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	margin: 0;
	padding: clamp(0.7rem, 1.15vw, 1.1rem) clamp(0.9rem, 1.5vw, 1.5rem);
	background: none;
	border: 0;
	border-bottom: 1px solid rgb(255 255 255 / 0.4);
	color: #fff;
	text-align: left;
	cursor: pointer;
	transition: background 0.4s var(--ease-out);
}

.b7-suites__row:last-child {
	border-bottom: 0;
	cursor: auto;
}

.b7-suites__row--total {
	cursor: auto;
}

.b7-suites__row--total::before {
	content: none;
}

.b7-suites__row {
	position: relative;
}

/* The bar names which suite is lit, and grows from the top rather than
   appearing, so hovering down the table reads as one movement. */
.b7-suites__row::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--grad-cool);
	transform: scaleY(0);
	transform-origin: 50% 0;
	transition: transform 0.45s var(--ease-out);
}

.b7-suites__row--suite-2::before {
	background: var(--grad-warm);
}

.b7-suites__row:hover,
.b7-suites__row:focus-visible,
.b7-suites__row[aria-pressed="true"] {
	background: rgb(255 255 255 / 0.14);
}

.b7-suites__row:hover::before,
.b7-suites__row:focus-visible::before,
.b7-suites__row[aria-pressed="true"]::before {
	transform: scaleY(1);
}

.b7-suites__name {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
}

.b7-suites__badge {
	display: grid;
	place-items: center;
	width: 1.65em;
	height: 1.65em;
	border-radius: 50%;
	font-size: 0.86em;
	font-weight: 700;
	letter-spacing: 0;
	transition: transform 0.4s var(--ease-out);
}

.b7-suites__badge--suite-1 { background: var(--grad-cool); }
.b7-suites__badge--suite-2 { background: var(--grad-warm); }

.b7-suites__row[aria-pressed="true"] .b7-suites__badge {
	transform: scale(1.18);
}

.b7-suites__area {
	font-size: var(--fs-label);
	font-weight: 300;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.b7-suites__row--total .b7-suites__area {
	font-weight: 700;
}

/* --------------------------------------------------------------- the plan */

.b7-floors__plan {
	display: grid;
	align-content: center;
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	padding: clamp(3rem, 5.5vw, 6.5rem) var(--gutter) clamp(3rem, 5.5vw, 6.5rem) clamp(1.5rem, 4vw, 5rem);
	background: var(--paper);
}

.b7-plan {
	position: relative;
	margin: 0;
}

.b7-plan__link {
	position: relative;
	display: block;
	border-radius: 0.5rem;
	overflow: visible;
	text-decoration: none;
}

.b7-plan__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.35rem;
	transition: transform 0.7s var(--ease-out);
}

.b7-plan__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.b7-plan__region {
	fill: rgb(33 11 74 / 0);
	stroke: rgb(255 255 255 / 0);
	stroke-width: 6;
	transition: fill 0.45s var(--ease-out), stroke 0.45s var(--ease-out);
}

/* Dimming the other suite is what makes the chosen one read as highlighted. */
.b7-plan.is-suite-1 [data-plan-region="suite-2"],
.b7-plan.is-suite-2 [data-plan-region="suite-1"] {
	fill: rgb(33 11 74 / 0.62);
}

.b7-plan.is-suite-1 [data-plan-region="suite-1"],
.b7-plan.is-suite-2 [data-plan-region="suite-2"] {
	stroke: rgb(255 255 255 / 0.95);
}

.b7-plan__zoom {
	position: absolute;
	top: 50%;
	left: 0;
	display: grid;
	place-items: center;
	width: clamp(2.75rem, 3.4vw, 3.9rem);
	height: clamp(2.75rem, 3.4vw, 3.9rem);
	border-radius: 50%;
	background: var(--grad-cool);
	color: #fff;
	transform: translate(-45%, -50%);
	transition: transform 0.5s var(--ease-out), filter 0.4s var(--ease-out);
}

.b7-plan__zoom .b7-icon {
	width: 46%;
	height: 46%;
}

.b7-plan__link:hover .b7-plan__zoom,
.b7-plan__link:focus-visible .b7-plan__zoom {
	transform: translate(-45%, -50%) scale(1.12);
	filter: saturate(1.2);
}

.b7-plan__link:hover .b7-plan__img,
.b7-plan__link:focus-visible .b7-plan__img {
	transform: scale(1.015);
}

/* =============================================== location and connectivity */

.b7-location {
	position: relative;
	padding-bottom: clamp(3rem, 6vw, 7rem);
	background: linear-gradient(96deg, var(--coral) 0%, #f85a2a 46%, var(--orange) 100%);
	color: #fff;
	overflow: hidden;
}

.b7-ticker {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: clamp(1.25rem, 2.4vw, 2.5rem);
}

.b7-ticker__mask {
	flex: 1 1 auto;
	overflow: hidden;
}

.b7-ticker__belt {
	display: flex;
	width: max-content;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.b7-ticker__run {
	display: inline-flex;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 1.6rem);
	padding-right: clamp(0.75rem, 1.6vw, 1.6rem);
	color: rgb(255 255 255 / 0.6);
	font-size: clamp(1.1rem, 2.05vw, 2.5rem);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	white-space: nowrap;
}

.b7-ticker__playpause {
	flex: 0 0 auto;
	margin-right: var(--gutter);
	color: #fff;
	border-color: rgb(255 255 255 / 0.6);
}

.b7-location__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 5rem);
	padding-right: var(--gutter);
}

.b7-location__map {
	position: relative;
	margin: 0;
}

.b7-location__maplink {
	position: relative;
	display: block;
	background: #fff;
	border-radius: 0 50% 50% 0 / 0 50% 50% 0;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.7s var(--ease-out);
}

.b7-location__img {
	display: block;
	width: 100%;
	height: auto;
	transform: scale(1.01);
	transition: transform 1s var(--ease-out);
}

.b7-location__zoom {
	position: absolute;
	top: 16%;
	right: 24%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: clamp(2.6rem, 3.2vw, 3.75rem);
	height: clamp(2.6rem, 3.2vw, 3.75rem);
	border-radius: 50%;
	background: var(--grad-cool);
	color: #fff;
	transition: transform 0.5s var(--ease-out);
}

.b7-location__zoom .b7-icon {
	width: 46%;
	height: 46%;
}

.b7-location__maplink:hover .b7-location__zoom,
.b7-location__maplink:focus-visible .b7-location__zoom {
	transform: scale(1.12);
}

.b7-location__maplink:hover .b7-location__img,
.b7-location__maplink:focus-visible .b7-location__img {
	transform: scale(1.04);
}

.b7-location__copy {
	display: grid;
	gap: clamp(0.9rem, 1.4vw, 1.5rem);
	/* The artwork sets this column against the map rather than as a narrow
	   caption beside it; 44rem is about 65 characters at the largest body size,
	   which is the measure the design draws and still a comfortable one. */
	max-width: 44rem;
}

.b7-location__copy .b7-display {
	margin-bottom: 0.3em;
}

.b7-location__copy p {
	line-height: 1.5;
}

.b7-location__lead {
	font-weight: 600;
}

/* ============================================================= transport */

.b7-transport {
	padding-block: clamp(3.5rem, 6vw, 7.5rem);
}

.b7-transport .b7-shell {
	position: relative;
	z-index: 2;
}

.b7-transport .b7-display {
	margin-bottom: clamp(2rem, 4vw, 4.5rem);
}

.b7-modes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto auto auto;
	gap: clamp(0.5rem, 1.4vw, 1.5rem) clamp(1rem, 3vw, 3.5rem);
	justify-items: center;
}

/*
 * `display: contents` lifts each mode's parts into the shared grid, so the
 * three panels land in one full-width cell under the row — the single shared
 * panel the design shows — without moving anything in the DOM.
 */
.b7-mode {
	display: contents;
}

.b7-mode__disc {
	grid-column: var(--col);
	grid-row: 1;
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(5rem, 9.9vw, 11.9rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--grad-warm);
	color: #fff;
	transition: transform 0.55s var(--ease-out), box-shadow 0.5s var(--ease-out), background 0.5s var(--ease-out);
}

.b7-mode__ring {
	position: absolute;
	inset: 7%;
	border: 1.5px solid rgb(255 255 255 / 0.85);
	border-radius: 50%;
	transition: transform 0.55s var(--ease-out);
}

.b7-mode__icon {
	position: relative;
	width: 50%;
	height: 50%;
}

.b7-mode.is-open .b7-mode__disc {
	background: linear-gradient(135deg, var(--violet) 0%, var(--purple) 55%, var(--pink) 100%);
	box-shadow: 0 24px 44px -28px rgb(174 5 241 / 0.95);
}

/* The disc belongs to the button below it: it answers a hover on either. */
.b7-mode:hover .b7-mode__disc,
.b7-mode:focus-within .b7-mode__disc {
	transform: translateY(-6px) scale(1.04);
	box-shadow: 0 24px 44px -28px rgb(251 49 76 / 0.9);
}

.b7-mode:hover .b7-mode__ring,
.b7-mode:focus-within .b7-mode__ring {
	transform: scale(1.07);
}

.b7-mode:hover .b7-mode__label,
.b7-mode:focus-within .b7-mode__label {
	color: var(--ink);
}

.b7-mode__label {
	grid-column: var(--col);
	grid-row: 2;
	margin: clamp(0.75rem, 1.4vw, 1.5rem) 0 0;
	color: var(--magenta);
	font-size: clamp(0.72rem, 0.94vw, 1.15rem);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-align: center;
	transition: color 0.4s var(--ease-out);
}

.b7-mode.is-open .b7-mode__label {
	color: var(--ink);
}

.b7-mode.is-open .b7-mode__by {
	color: var(--violet);
}

.b7-mode__cta {
	grid-column: var(--col);
	grid-row: 3;
	margin-top: clamp(0.75rem, 1.2vw, 1.25rem);
	background: var(--grad-warm-rev);
}

.b7-mode.is-open .b7-mode__cta {
	background: var(--grad-cool-rev);
}

.b7-mode.is-pending .b7-mode__cta {
	opacity: 0.82;
}

.b7-mode__panel {
	grid-column: 1 / -1;
	grid-row: 4;
	width: min(100%, 62rem);
	margin-top: clamp(1.75rem, 3vw, 3.25rem);
	padding: clamp(1.25rem, 2.2vw, 2.25rem) clamp(1rem, 2.4vw, 2.5rem);
	border: 1px solid var(--magenta);
	border-radius: clamp(1rem, 1.6vw, 1.75rem);
	background: #fff;
}

.b7-mode__panel[hidden] {
	display: none;
}

.b7-mode__rows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.5rem, 0.9vw, 0.9rem) clamp(1rem, 2vw, 2rem);
}

.b7-mode__row {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.4em;
	font-size: clamp(0.85rem, 1.04vw, 1.25rem);
	line-height: 1.35;
}

.b7-mode__row:nth-child(odd) {
	justify-content: flex-end;
	position: relative;
	padding-right: clamp(0.5rem, 1vw, 1rem);
}

.b7-mode__row:nth-child(odd)::after {
	content: "|";
	position: absolute;
	right: calc(clamp(1rem, 2vw, 2rem) / -2 - 0.15em);
	color: var(--magenta);
}

.b7-mode__row:nth-child(even) {
	justify-content: flex-start;
}

.b7-mode__place {
	font-weight: 600;
}

.b7-mode__time {
	font-weight: 300;
}

.b7-mode__pending {
	text-align: center;
	color: var(--grey);
	font-style: italic;
}

/* Statements rather than places and journey times: the Road panel's shape. */
.b7-mode__notes {
	display: grid;
	justify-items: start;
	gap: clamp(0.5rem, 1.1vw, 0.9rem);
	/* The list is centred as a block, not item by item, so the markers line
	   up under one another instead of drifting with each line's length. */
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.b7-mode__note {
	position: relative;
	max-width: 34em;
	padding-left: 1.35em;
	font-weight: 600;
	text-align: left;
}

.b7-mode__note::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--grad-warm-rev);
}

/* The incoming panel is faded and lifted a touch by the script. */
.b7-mode__panel.is-swapping {
	opacity: 0;
	transform: translate3d(0, 10px, 0);
}

.b7-mode__panel {
	transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}

/* ============================================================= amenities */

.b7-amen {
	position: relative;
	padding-block: clamp(3.5rem, 6.5vw, 8rem);
	background: var(--ink);
	color: #fff;
	overflow: hidden;
}

.b7-amen__ribbon,
.b7-amen__lines {
	position: absolute;
	display: block;
	pointer-events: none;
}

.b7-amen__ribbon {
	top: -22%;
	right: -12%;
	width: min(52vw, 52rem);
	transform: translate3d(0, var(--par, 0px), 0) rotate(-118deg);
}

.b7-amen__lines {
	left: -8%;
	bottom: -34%;
	width: min(40vw, 36rem);
	opacity: 0.6;
	transform: translate3d(0, var(--par, 0px), 0) rotate(64deg);
}

.b7-amen__ribbon img,
.b7-amen__lines img {
	display: block;
	width: 100%;
	height: auto;
}

.b7-amen__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(2rem, 4vw, 5rem);
}

.b7-amen__copy {
	display: grid;
	gap: clamp(1rem, 1.8vw, 1.9rem);
	max-width: 40rem;
}

.b7-amen__copy p {
	color: rgb(255 255 255 / 0.86);
	line-height: 1.5;
}

.b7-amen__subhead {
	margin: 0.4em 0 0;
	font-size: clamp(0.95rem, 1.35vw, 1.65rem);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
}

.b7-amen__lists {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.4vw, 1.5rem) clamp(1rem, 2.5vw, 2.5rem);
}

.b7-amen__list {
	display: grid;
	gap: clamp(0.35rem, 0.9vw, 0.9rem);
	align-content: start;
}

.b7-amen__venue {
	display: flex;
	align-items: center;
	gap: 0.8em;
	width: 100%;
	min-height: 2.4rem;
	padding: 0.25rem 0.4rem 0.25rem 0;
	background: none;
	border: 0;
	border-radius: var(--r-pill);
	color: #fff;
	text-align: left;
	cursor: pointer;
	transition: transform 0.4s var(--ease-out), background 0.4s var(--ease-out);
}

/*
 * Every venue reads the same at rest; the cool gradient is what answering the
 * venue looks like. It is a second fill crossfaded underneath the glyph,
 * because one gradient cannot transition into another.
 */
.b7-amen__icon {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: clamp(1.5rem, 1.9vw, 2.25rem);
	height: clamp(1.5rem, 1.9vw, 2.25rem);
	border-radius: 50%;
	background: var(--grad-warm);
	transition: transform 0.45s var(--ease-out);
}

.b7-amen__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--grad-cool);
	opacity: 0;
	transition: opacity 0.4s var(--ease-out);
}

.b7-amen__icon img {
	width: 54%;
	height: auto;
}

.b7-amen__name {
	font-size: clamp(0.72rem, 0.94vw, 1.15rem);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	line-height: 1.25;
}

.b7-amen__venue:hover,
.b7-amen__venue:focus-visible,
.b7-amen__venue[aria-pressed="true"] {
	transform: translateX(4px);
}

.b7-amen__venue:hover .b7-amen__icon,
.b7-amen__venue:focus-visible .b7-amen__icon,
.b7-amen__venue[aria-pressed="true"] .b7-amen__icon {
	transform: scale(1.16) rotate(-8deg);
}

.b7-amen__venue:hover .b7-amen__icon::after,
.b7-amen__venue:focus-visible .b7-amen__icon::after,
.b7-amen__venue[aria-pressed="true"] .b7-amen__icon::after {
	opacity: 1;
}

/* ---------------------------------------------------------- campus plan */

.b7-amen__planwrap {
	display: grid;
	justify-items: center;
	gap: 1rem;
}

.b7-campus {
	position: relative;
	width: min(100%, 40rem);
	margin: 0;
}

.b7-campus__disc {
	position: relative;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fff;
	overflow: hidden;
}

.b7-campus__svg {
	display: block;
	width: 100%;
	height: 100%;
}

.b7-campus__road {
	stroke-dasharray: var(--len, 2000);
	stroke-dashoffset: var(--len, 2000);
}

.js .b7-campus.is-in .b7-campus__road {
	animation: b7-draw 1.6s var(--ease-out) forwards;
	animation-delay: calc(var(--road, 0) * 140ms);
}

.b7-campus__block,
.b7-campus__seven-block {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.js .b7-campus__block,
.js .b7-campus__seven-block {
	opacity: 0;
	transform: scale(0.72);
	transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
	transition-delay: calc(var(--b, 0) * 55ms + 500ms);
}

.js .b7-campus.is-in .b7-campus__block,
.js .b7-campus.is-in .b7-campus__seven-block {
	opacity: 1;
	transform: none;
}

.js .b7-campus__num,
.js .b7-campus__seven-mark,
.js .b7-campus__trust {
	opacity: 0;
	transition: opacity 0.5s linear 0.95s;
}

.js .b7-campus.is-in .b7-campus__num,
.js .b7-campus.is-in .b7-campus__seven-mark,
.js .b7-campus.is-in .b7-campus__trust {
	opacity: 1;
}

.b7-campus__points {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.b7-campus__point {
	position: absolute;
	top: var(--y);
	left: var(--x);
	pointer-events: auto;
}

.b7-campus__dot {
	position: relative;
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.b7-campus__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--magenta);
	box-shadow: 0 0 0 0 rgb(245 40 96 / 0.45);
	transform: translate(-50%, -50%);
	transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.b7-campus__dot:hover::before,
.b7-campus__dot:focus-visible::before,
.b7-campus__point.is-active .b7-campus__dot::before {
	transform: translate(-50%, -50%) scale(1.3);
	box-shadow: 0 0 0 0.5rem rgb(245 40 96 / 0.22);
}

.b7-campus__flag {
	position: absolute;
	top: 50%;
	left: 1.15rem;
	display: block;
	padding: 0.4em 1em;
	border: 1px solid var(--pink);
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--ink);
	font-size: clamp(0.55rem, 0.72vw, 0.85rem);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	white-space: nowrap;
	transform: translate(0, -50%) scale(0.9);
	transform-origin: 0 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s linear, transform 0.4s var(--ease-out);
}

.b7-campus__point.is-flip .b7-campus__flag {
	left: auto;
	right: 1.15rem;
	transform-origin: 100% 50%;
}

.b7-campus__dot:hover + .b7-campus__flag,
.b7-campus__dot:focus-visible + .b7-campus__flag,
.b7-campus__point.is-active .b7-campus__flag {
	opacity: 1;
	transform: translate(0, -50%) scale(1);
	z-index: 3;
}

.b7-campus__enlarge {
	position: absolute;
	right: 6%;
	bottom: 6%;
	display: grid;
	place-items: center;
	width: clamp(2.75rem, 3.4vw, 3.9rem);
	height: clamp(2.75rem, 3.4vw, 3.9rem);
	border-radius: 50%;
	background: var(--grad-warm);
	color: #fff;
	text-decoration: none;
	transition: transform 0.5s var(--ease-out);
}

.b7-campus__zoom {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

.b7-campus__enlarge .b7-icon {
	width: 46%;
	height: 46%;
}

.b7-campus__enlarge:hover,
.b7-campus__enlarge:focus-visible {
	transform: scale(1.12);
}

.b7-campus__playpause {
	color: #fff;
	border-color: rgb(255 255 255 / 0.5);
	transition: opacity 0.35s var(--ease-out), color 0.3s var(--ease-out),
		border-color 0.3s var(--ease-out);
}

/*
 * The demo control keeps its box when it is not offered, so the plan above it
 * never jumps as the demonstration starts and finishes. `visibility` still
 * takes it out of the tab order and the accessibility tree.
 */
.b7-campus__playpause.is-gone {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* =============================================== contact, form and map */

.b7-contact {
	padding-top: clamp(3.5rem, 6vw, 7.5rem);
	/* As on the specifications section: its seven crosses the edge above. */
	overflow: visible;
}

.b7-contact__inner {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: clamp(0.75rem, 1.4vw, 1.5rem);
	text-align: center;
}

.b7-contact__leaf {
	left: 6%;
}

.b7-contact__leaf img {
	display: block;
	width: 100%;
	height: auto;
}

.b7-contact__lede {
	font-size: var(--fs-small);
}

.b7-contact__place {
	color: var(--magenta);
	font-weight: 600;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.b7-contact__people {
	display: grid;
	gap: 0.35rem;
	margin-block: clamp(0.75rem, 1.4vw, 1.5rem) clamp(1.5rem, 3vw, 3rem);
}

.b7-contact__person {
	color: var(--magenta);
	font-size: clamp(0.7rem, 0.88vw, 1.05rem);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
}

.b7-contact__person .b7-pipe {
	color: var(--orchid);
}

.b7-contact__email,
.b7-contact__phone {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.3s var(--ease-out);
}

.b7-contact__email:hover,
.b7-contact__email:focus-visible,
.b7-contact__phone:hover,
.b7-contact__phone:focus-visible {
	color: var(--violet);
}

.b7-contact__name {
	color: var(--orchid);
}

/* Pin 11: the telephone number is a link where a device can dial it. */
@media (pointer: fine) and (min-width: 861px) {
	.b7-contact__phone {
		text-decoration: none;
		pointer-events: none;
		color: var(--magenta);
	}
}

/* ------------------------------------------------------------------ form */

.b7-form {
	width: min(100%, 54rem);
	margin-top: clamp(0.5rem, 1vw, 1rem);
	border-radius: clamp(1.25rem, 2vw, 2.25rem);
	background: linear-gradient(112deg, var(--violet) 0%, var(--purple) 34%, var(--pink) 100%);
	box-shadow: 0 40px 80px -60px rgb(174 5 241 / 0.9);
	overflow: hidden;
}

.b7-form__inner {
	padding: clamp(1.5rem, 3vw, 3.25rem) clamp(1.25rem, 3vw, 3.5rem);
	text-align: left;
}

.b7-form__missing {
	color: #fff;
	text-align: center;
}

.b7-form__missing a {
	color: #fff;
}

/* Forminator's markup, restyled. Structure comes from the plugin. */
.b7-form .forminator-ui.forminator-custom-form,
.b7-form .forminator-row,
.b7-form .forminator-field {
	background: none;
	border: 0;
	box-shadow: none;
}

.b7-form .forminator-row {
	margin: 0 0 clamp(0.6rem, 1.1vw, 1.1rem);
}

.b7-form .forminator-label,
.b7-form label {
	display: block;
	margin: 0 0 0.4rem 1.4rem;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
}

.b7-form .forminator-required,
.b7-form .forminator-label .forminator-required {
	color: #fff;
}

.b7-form input[type="text"],
.b7-form input[type="email"],
.b7-form input[type="tel"],
.b7-form input[type="url"],
.b7-form input[type="number"],
.b7-form textarea,
.b7-form select {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.85rem 1.75rem;
	border: 2px solid transparent;
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--ink);
	font-family: inherit;
	font-size: clamp(0.8rem, 0.94vw, 1.05rem);
	font-weight: 600;
	letter-spacing: var(--track-wide);
	transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.b7-form textarea {
	min-height: 3.25rem;
	border-radius: 1.7rem;
	resize: vertical;
	line-height: 1.4;
}

.b7-form input::placeholder,
.b7-form textarea::placeholder {
	color: rgb(33 11 74 / 0.55);
	text-transform: uppercase;
	font-weight: 700;
}

.b7-form input:focus,
.b7-form textarea:focus,
.b7-form select:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgb(255 255 255 / 0.85);
	transform: translateY(-1px);
}

/* Consent row. */
.b7-form .forminator-checkbox,
.b7-form .forminator-consent-label {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0.35rem 0 0 1.4rem;
	color: #fff;
	font-size: clamp(0.8rem, 0.94vw, 1.05rem);
	font-weight: 400;
	letter-spacing: var(--track-body);
	text-transform: none;
	cursor: pointer;
}

.b7-form .forminator-checkbox input[type="checkbox"],
.b7-form input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.b7-form input[type="checkbox"]:checked {
	background: #fff;
	box-shadow: inset 0 0 0 4px var(--violet);
	transform: scale(1.05);
}

/* Submit. */
.b7-form button[type="submit"],
.b7-form .forminator-button-submit {
	display: block;
	width: 100%;
	min-height: 3.25rem;
	margin-top: clamp(0.75rem, 1.4vw, 1.4rem);
	padding: 0.9rem 2rem;
	border: 1.5px solid rgb(255 255 255 / 0.85);
	border-radius: var(--r-pill);
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), transform 0.35s var(--ease-out);
}

.b7-form button[type="submit"]:hover,
.b7-form button[type="submit"]:focus-visible,
.b7-form .forminator-button-submit:hover,
.b7-form .forminator-button-submit:focus-visible {
	background: #fff;
	color: var(--violet);
	transform: translateY(-2px);
}

.b7-form .forminator-error-message,
.b7-form .forminator-response-message {
	margin-top: 0.5rem;
	padding: 0.6rem 1.25rem;
	border-radius: 1rem;
	background: rgb(255 255 255 / 0.94);
	color: var(--ink);
	font-size: 0.9rem;
	font-weight: 600;
}

.b7-form .forminator-response-message.forminator-success {
	background: #fff;
	color: var(--violet);
}

.b7-form .forminator-error input,
.b7-form input[aria-invalid="true"],
.b7-form textarea[aria-invalid="true"] {
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9);
}

/* --------------------------------------------------------------- the map */

.b7-map {
	margin-top: clamp(2.5rem, 5vw, 5.5rem);
}

.b7-map__frame {
	position: relative;
	aspect-ratio: 1920 / 600;
	min-height: 18rem;
	background: #e9e6ef;
	overflow: hidden;
}

.b7-map__embed {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.b7-map__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: calc(var(--shell) + var(--gutter) * 2);
	margin-inline: auto;
	padding: clamp(1rem, 2vw, 1.75rem) var(--gutter);
}

.b7-map__address {
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--ink);
}

/* ================================================================ footer */

.b7-footer {
	position: relative;
	background: var(--ink);
	color: #fff;
}

.b7-footer__main {
	padding-block: clamp(2.5rem, 4.5vw, 4.5rem);
}

.b7-footer__grid {
	display: grid;
	grid-template-columns: auto auto auto auto;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 3vw, 3.5rem);
}

.b7-footer__nav ul {
	display: grid;
	gap: clamp(0.5rem, 1vw, 1rem);
}

.b7-footer__link {
	position: relative;
	display: inline-block;
	padding: 0.2rem 0;
	font-size: clamp(0.68rem, 0.83vw, 1rem);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.35s var(--ease-out);
}

.b7-footer__link::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1.5px;
	background: var(--grad-warm-rev);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.45s var(--ease-out);
}

.b7-footer__link:hover::after,
.b7-footer__link:focus-visible::after {
	transform: scaleX(1);
}

.b7-footer__link--address {
	display: grid;
	gap: 0.35rem;
}

.b7-footer__contact {
	display: grid;
	gap: clamp(0.5rem, 1vw, 1rem);
	text-align: right;
}

.b7-footer__colliers img {
	display: block;
	width: clamp(7rem, 10vw, 11rem);
	height: auto;
	border-radius: 0.35rem;
	transition: transform 0.5s var(--ease-out);
}

.b7-footer__colliers:hover img,
.b7-footer__colliers:focus-visible img {
	transform: translateY(-3px) scale(1.03);
}

.b7-footer__seven {
	position: relative;
	width: clamp(5rem, 9vw, 10rem);
	aspect-ratio: 1146 / 1577;
}

.b7-footer__seven-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.9;
}

.b7-footer__seven-fill {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 62%;
	height: 82%;
	opacity: 0.92;
}

.b7-footer__legal {
	background: var(--grad-warm-rev);
	color: #fff;
	text-align: center;
}

.b7-footer__legal p {
	padding-block: clamp(0.6rem, 1vw, 1rem);
	font-size: clamp(0.7rem, 0.83vw, 0.95rem);
	font-weight: 400;
}

/* Inline, but still given a 24px box so the two credits are as easy to hit as
   everything else on the page. */
.b7-footer__legal a {
	display: inline-block;
	padding-block: 0.25rem;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: opacity 0.3s var(--ease-out);
}

.b7-footer__legal a:hover,
.b7-footer__legal a:focus-visible {
	opacity: 0.8;
}

.b7-footer__sep {
	padding-inline: 0.4em;
	opacity: 0.75;
}

/* ========================================================== text dialog

   The disclaimer opens as a native <dialog>. Its entrance is the page's own
   language rather than a generic pop: the brand gradient wipes across the panel
   the way it crosses under a button label, the panel rises behind it, the seven
   turns into place as it does at every section boundary, and the clauses arrive
   in sequence behind the wipe. Everything moving is transform or opacity.
   ====================================================================== */

.b7-modal {
	width: min(46rem, calc(100vw - 2 * var(--gutter)));
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
}

.b7-modal::backdrop {
	background: rgb(18 5 42 / 0.72);
	opacity: 0;
	transition: opacity 0.5s var(--ease-out);
}

.b7-modal.is-open::backdrop {
	opacity: 1;
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
}

.b7-modal__panel {
	position: relative;
	display: grid;
	border-radius: clamp(1rem, 2vw, 1.75rem);
	background: var(--paper);
	color: var(--ink);
	box-shadow: 0 48px 90px -40px rgb(18 5 42 / 0.75);
	overflow: hidden;
	opacity: 0;
	transform: translate3d(0, 34px, 0) scale(0.965);
	transition: opacity 0.45s var(--ease-out), transform 0.75s var(--ease-soft);
}

.b7-modal.is-open .b7-modal__panel {
	opacity: 1;
	transform: none;
}

/* A hairline of the brand gradient around the paper, as the panels elsewhere
   on this page carry. */
.b7-modal__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	border: 1px solid var(--magenta);
	opacity: 0.5;
	pointer-events: none;
}

/* The wipe: in from the left, out to the right, uncovering the panel. */
.b7-modal__sweep {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--grad-warm-rev);
	transform: translate3d(-101%, 0, 0);
	pointer-events: none;
}

.b7-modal.is-open .b7-modal__sweep {
	animation: b7-modal-sweep 1.05s var(--ease-soft) forwards;
}

@keyframes b7-modal-sweep {
	0% { transform: translate3d(-101%, 0, 0); }
	42% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(101%, 0, 0); }
}

.b7-modal__seven {
	position: absolute;
	right: -2.5rem;
	bottom: -3rem;
	z-index: 1;
	font-size: clamp(8rem, 15vw, 13rem);
	line-height: 1;
	opacity: 0;
	transform: rotate(-186deg);
	transition: opacity 0.8s var(--ease-out) 0.45s, transform 1.4s var(--ease-turn) 0.35s;
	pointer-events: none;
}

.b7-modal.is-open .b7-modal__seven {
	opacity: 0.09;
	transform: rotate(0deg);
}

.b7-modal__scroll {
	position: relative;
	z-index: 2;
	max-height: min(78vh, 40rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Held off the panel's rounded corner rather than running into it. */
	margin-right: clamp(0.3rem, 0.7vw, 0.55rem);
	/* Firefox, and the fallback anywhere `::-webkit-scrollbar` is not read. */
	scrollbar-width: thin;
	scrollbar-color: var(--magenta) rgb(33 11 74 / 0.07);
}

/*
 * WebKit and Blink draw the same bar properly: a brand-gradient thumb on a
 * faint track. The transparent border with `background-clip: content-box` is
 * what keeps the thumb a slim pill inside a wider, easier-to-grab gutter.
 */
.b7-modal__scroll::-webkit-scrollbar {
	width: 0.85rem;
}

.b7-modal__scroll::-webkit-scrollbar-track {
	margin-block: clamp(0.9rem, 2.2vw, 1.75rem);
	border: 0.3rem solid transparent;
	border-radius: var(--r-pill);
	background: rgb(33 11 74 / 0.07);
	background-clip: content-box;
}

.b7-modal__scroll::-webkit-scrollbar-thumb {
	border: 0.25rem solid transparent;
	border-radius: var(--r-pill);
	/* Run the warm ramp down the thumb: at this width the 135deg token would
	   only ever show one end of itself. */
	background: linear-gradient(180deg, var(--orange) 0%, var(--coral) 100%);
	background-clip: content-box;
}

.b7-modal__scroll::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, var(--violet) 0%, var(--pink) 100%);
	background-clip: content-box;
}

.b7-modal__body {
	padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3.25rem);
}

/* The page's own eyebrow is set at display size; a dialog needs a label. */
.b7-modal__eyebrow {
	margin: 0 0 0.9em;
	color: var(--magenta);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
}

.b7-modal__title {
	margin-bottom: 0.55em;
	font-size: clamp(1.75rem, 4vw, 3rem);
}

.b7-modal__intro {
	margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
	font-size: var(--fs-small);
	font-weight: 600;
}

.b7-modal__clauses {
	display: grid;
	gap: clamp(0.7rem, 1.4vw, 1.1rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: b7-clause;
}

.b7-modal__clause {
	position: relative;
	padding-left: 2.9em;
	counter-increment: b7-clause;
	font-size: var(--fs-small);
	line-height: 1.55;
}

/* The supplied (i)-(v) labels, drawn by the list rather than sitting in the
   copy, so they can take the brand gradient. */
.b7-modal__clause::before {
	content: "(" counter(b7-clause, lower-roman) ")";
	position: absolute;
	left: 0;
	top: 0;
	width: 2.3em;
	background: var(--grad-warm-rev);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.b7-modal__close {
	position: absolute;
	top: clamp(0.75rem, 1.6vw, 1.25rem);
	right: clamp(0.75rem, 1.6vw, 1.25rem);
	z-index: 5;
}

/* The copy arrives behind the wipe, a line at a time. */
.js .b7-modal__body > *,
.js .b7-modal__clause {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}

.js .b7-modal.is-open .b7-modal__body > *,
.js .b7-modal.is-open .b7-modal__clause {
	opacity: 1;
	transform: none;
	transition-delay: calc(360ms + var(--step, 0) * 70ms);
}

.js .b7-modal.is-open .b7-modal__eyebrow { --step: 0; }
.js .b7-modal.is-open .b7-modal__title { --step: 1; }
.js .b7-modal.is-open .b7-modal__intro { --step: 2; }
.js .b7-modal.is-open .b7-modal__clauses { --step: 3; transition: none; opacity: 1; transform: none; }
.js .b7-modal.is-open .b7-modal__clause:nth-child(1) { --step: 3; }
.js .b7-modal.is-open .b7-modal__clause:nth-child(2) { --step: 4; }
.js .b7-modal.is-open .b7-modal__clause:nth-child(3) { --step: 5; }
.js .b7-modal.is-open .b7-modal__clause:nth-child(4) { --step: 6; }
.js .b7-modal.is-open .b7-modal__clause:nth-child(5) { --step: 7; }

/* Leaving: the panel drops away and the backdrop goes with it. */
.b7-modal.is-closing .b7-modal__panel {
	opacity: 0;
	transform: translate3d(0, 20px, 0) scale(0.985);
	transition: opacity 0.28s var(--ease-out), transform 0.32s var(--ease-out);
}

.b7-modal.is-closing::backdrop {
	opacity: 0;
}

/* No script: the dialog is simply a block of text the footer link jumps to. */
/*
 * A <dialog> is `position: absolute` in the UA sheet, so it has to be put back
 * into the flow as well as shown, or the block lands on top of the footer.
 */
html:not(.js) .b7-modal {
	position: static;
	display: block;
	inset: auto;
	width: min(46rem, calc(100% - 2 * var(--gutter)));
	max-width: none;
	margin: clamp(2.5rem, 6vw, 5rem) auto;
	padding: 0;
}

html:not(.js) .b7-modal__panel {
	opacity: 1;
	transform: none;
}

html:not(.js) .b7-modal__sweep,
html:not(.js) .b7-modal__close {
	display: none;
}

html:not(.js) .b7-modal__scroll {
	max-height: none;
	overflow: visible;
}

/* ============================================================= lightbox */

.b7-lb {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	padding: 0;
	border: 0;
	background: rgb(24 6 58 / 0.96);
	color: #fff;
	opacity: 0;
	transition: opacity 0.32s linear;
	overflow: hidden;
}

.b7-lb::backdrop {
	background: rgb(12 3 30 / 0.8);
	backdrop-filter: blur(6px);
}

.b7-lb.is-open {
	opacity: 1;
}

.b7-lb__stage {
	position: absolute;
	inset: clamp(3.5rem, 7vh, 6rem) clamp(1rem, 8vw, 7rem) clamp(4.5rem, 9vh, 7rem);
	display: grid;
	place-items: center;
	container-type: size;
}

/*
 * The width comes from the full image's own dimensions (`--lb-w`/`--lb-h`, set
 * by the script) fitted to the stage, never from the file currently loaded:
 * the thumbnail stands in while the full file decodes. `--lb-pad` is a sheet's
 * padding. Without the dimensions the min() is invalid and the image falls
 * back to `auto`; without container units the browser keeps the first width.
 */
.b7-lb__img {
	--lb-pad: 0px;

	max-width: 100%;
	max-height: 100%;
	width: auto;
	width: min(
		100cqw,
		calc(var(--lb-w) * 1px + 2 * var(--lb-pad)),
		calc((100cqh - 2 * var(--lb-pad)) * var(--lb-w) / var(--lb-h) + 2 * var(--lb-pad))
	);
	height: auto;
	object-fit: contain;
	border-radius: 0.5rem;
	transform-origin: 50% 50%;
	transition:
		transform 0.62s var(--ease-out),
		clip-path 0.62s var(--ease-out),
		opacity 0.2s linear;
	will-change: transform, clip-path;
}

.b7-lb.is-leaving-next .b7-lb__img { opacity: 0; transform: translate3d(-3%, 0, 0); }
.b7-lb.is-leaving-prev .b7-lb__img { opacity: 0; transform: translate3d(3%, 0, 0); }
.b7-lb.is-entering-next .b7-lb__img { opacity: 0; transform: translate3d(3%, 0, 0); transition: none; }
.b7-lb.is-entering-prev .b7-lb__img { opacity: 0; transform: translate3d(-3%, 0, 0); transition: none; }

/*
 * A white card behind the image (`b7-lb--sheet`, the floor plan). The padding
 * is the card's margin around the drawing. The opening move maps the drawing,
 * not the card, onto the plan on the page and clips the padding away, so the
 * card grows out from the plan's edges; the resting clip is an inset() too, or
 * there would be nothing for that clip to animate to.
 */
.b7-lb--sheet .b7-lb__img {
	--sheet-r: clamp(0.85rem, 1.8vmin, 1.5rem);
	--lb-pad: clamp(0.85rem, 3.2vmin, 2.5rem);
	padding: var(--lb-pad);
	border-radius: var(--sheet-r);
	background: #fff;
	clip-path: inset(0 round var(--sheet-r));
}

.b7-lb__bar {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1rem clamp(1rem, 6vw, 5rem) clamp(1rem, 3vh, 2rem);
	text-align: center;
}

.b7-lb__caption {
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
}

.b7-lb__count {
	color: rgb(255 255 255 / 0.7);
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
}

.b7-lb__close {
	position: absolute;
	top: clamp(0.75rem, 2vh, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
}

.b7-lb__prev,
.b7-lb__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.b7-lb__prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.b7-lb__next { right: clamp(0.5rem, 2vw, 1.5rem); }

.b7-lb__prev:hover,
.b7-lb__prev:focus-visible,
.b7-lb__next:hover,
.b7-lb__next:focus-visible {
	transform: translateY(-50%) scale(1.09);
}

/* ==========================================================================
   Responsive
   The source artboard is desktop-only, so each of these is a recomposition
   rather than a shrink: columns become a reading order, the transport row
   becomes an accordion, and the gallery becomes a swipeable track.
   ========================================================================== */

@media (max-width: 1200px) {
	.b7-specs__track { --per-view: 4; }

	.b7-welcome__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	}
}

@media (max-width: 1024px) {
	.b7-specs__track { --per-view: 3; }

	.b7-header__nav--start .b7-navlist,
	.b7-header__nav--end {
		display: none;
	}

	.b7-header__inner {
		grid-template-columns: 1fr auto;
	}

	.b7-brand {
		justify-self: start;
		grid-column: 1;
	}

	.b7-burger {
		display: grid;
		place-items: center;
		grid-column: 2;
	}

	.b7-floors {
		grid-template-columns: 1fr;
	}

	.b7-floors__ink {
		padding-inline: var(--gutter);
	}

	.b7-floors__plan {
		padding-inline: var(--gutter);
	}

	.b7-gallery__cell {
		flex: 0 0 50%;
	}

	.b7-location__grid,
	.b7-amen__grid {
		grid-template-columns: 1fr;
		padding-right: 0;
	}

	/* Stacked, the map is a card in the middle of the panel rather than a
	   shape running off the left edge, so it takes an even radius and a
	   margin either side. */
	.b7-location__map {
		padding-inline: var(--gutter);
	}

	.b7-location__maplink {
		border-radius: clamp(1rem, 4vw, 2.25rem);
	}

	.b7-location__copy,
	.b7-amen__copy {
		max-width: none;
		padding-inline: var(--gutter);
	}

	.b7-location__zoom {
		top: 8%;
		right: 8%;
	}

	.b7-amen__planwrap {
		padding-inline: var(--gutter);
	}

	.b7-footer__grid {
		grid-template-columns: 1fr 1fr;
		justify-content: start;
		gap: 2.5rem;
	}

	.b7-footer__contact {
		text-align: left;
	}

	.b7-footer__seven {
		grid-column: 2;
		justify-self: end;
	}
}

@media (max-width: 860px) {
	.b7-specs__track { --per-view: 2; }

	/* Two across on a phone, and the disc grows to suit the narrower column
	   rather than staying at the desktop's viewport-relative size. */
	.b7-carousel { --disc: clamp(3.75rem, 23vw, 9rem); }


	.b7-hero__track { height: 220vh; }

	.b7-welcome__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.b7-welcome__media {
		order: -1;
		width: min(78%, 22rem);
		margin-inline: auto;
	}

	.b7-welcome__ribbon {
		top: -6%;
		right: -34%;
		width: 92vw;
	}

	/* One photograph at a time, filling the frame. */
	.b7-gallery__cell {
		flex: 0 0 100%;
	}

	/*
	 * Twelve 24px pager targets are 288px on their own — wider than the strip
	 * had left them, so they ran off the right edge with only the page's
	 * `overflow-x: clip` hiding it. The strip wraps instead: the title, the
	 * seven and the play control take the first line, and the pager gets a
	 * full-width line of its own. The gap goes because the targets already
	 * carry their own spacing around a much smaller drawn dot, and the strip's
	 * side padding narrows so twelve still fit on one line at 320px.
	 */
	.b7-gallery__strip {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.55rem;
		padding-inline: 0.75rem;
	}

	.b7-gallery__title {
		order: 1;
		font-size: 0.72rem;
	}

	.b7-gallery__seven {
		order: 2;
	}

	.b7-gallery__playpause {
		order: 3;
	}

	.b7-gallery__pager {
		order: 4;
		flex: 1 1 100%;
		justify-content: center;
		flex-wrap: wrap;
		gap: 0;
	}

	.b7-gallery__rule {
		display: none;
	}

	/* Transport: each panel opens under its own button. */
	.b7-modes {
		grid-template-columns: 1fr;
		gap: clamp(1.25rem, 4vw, 2rem);
	}

	.b7-mode {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 0.5rem 1.25rem;
		width: 100%;
		padding-bottom: clamp(1rem, 3vw, 1.5rem);
		border-bottom: 1px solid rgb(245 40 96 / 0.35);
	}

	.b7-mode__disc {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 4.5rem;
	}

	.b7-mode__label {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
		text-align: left;
	}

	.b7-mode__cta {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		margin-top: 0;
	}

	.b7-mode__panel {
		grid-column: 1 / -1;
		grid-row: 3;
		width: 100%;
		margin-top: 1rem;
	}

	.b7-mode__rows {
		grid-template-columns: 1fr;
	}

	/*
	 * Two columns rather than `space-between` on three items: with the dash in
	 * the middle of the leftover space it landed at a different place on every
	 * row, which read as a ragged column. The dash is decorative, so on one
	 * line per row the place and the time simply take an edge each.
	 */
	.b7-mode__row,
	.b7-mode__row:nth-child(odd),
	.b7-mode__row:nth-child(even) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: baseline;
		column-gap: 0.75rem;
		justify-content: initial;
		padding-right: 0;
	}

	.b7-mode__dash {
		display: none;
	}

	.b7-mode__time {
		text-align: right;
	}

	.b7-mode__row:nth-child(odd)::after {
		content: none;
	}

	.b7-amen__lists {
		grid-template-columns: 1fr;
	}

	.b7-map__bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.b7-map__frame {
		aspect-ratio: 4 / 3;
	}

	/*
	 * Stacked, the footer reads as a centred block rather than a single
	 * left-hung list: the two link groups sit side by side while there is
	 * room for them, and the Colliers mark and the seven pair up beneath as
	 * one centred row.
	 */
	.b7-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-items: center;
		align-items: start;
		gap: clamp(1.75rem, 5vw, 2.5rem) clamp(1rem, 4vw, 2.5rem);
		text-align: center;
	}

	.b7-footer__nav {
		grid-column: 1;
		grid-row: 1;
	}

	.b7-footer__contact {
		grid-column: 2;
		grid-row: 1;
		text-align: center;
	}

	.b7-footer__brandmark {
		grid-column: 1;
		grid-row: 2;
		justify-self: end;
		align-self: end;
	}

	.b7-footer__seven {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		align-self: end;
	}

	.b7-footer__link--address {
		justify-items: center;
	}
}

@media (max-width: 430px) {
	/* One large specification at a time: two would leave the discs too small
	   to read, and there is plenty to page through either way. */
	.b7-specs__track { --per-view: 1; }
	.b7-carousel { --disc: min(42vw, 11rem); }
	.b7-spec__label { max-width: 100%; }

	/* Below this the two link columns start breaking words, so they take a
	   row each. The two marks stay paired. */
	.b7-footer__nav,
	.b7-footer__contact {
		grid-column: 1 / -1;
	}

	.b7-footer__contact {
		grid-row: 2;
	}

	.b7-footer__brandmark {
		grid-row: 3;
	}

	.b7-footer__seven {
		grid-row: 3;
	}
}

@media (max-width: 620px) {
	.b7-hero__track { height: 200vh; }

	/* "Floor 7, Building 7, Chiswick Park" is about fourteen ems on one line;
	   on the smallest phones it shrinks with the screen so the menu button
	   keeps its place. */
	.b7-brand {
		font-size: clamp(0.85rem, 4.4vw, 1.05rem);
	}

	.b7-spec__label {
		font-size: 0.68rem;
		letter-spacing: 0.06em;
	}


	.b7-carousel {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 0.35rem;
	}

	.b7-specs__actions .b7-btn,
	.b7-welcome__actions .b7-btn {
		width: 100%;
	}

	.b7-gallery__cell {
		flex: 0 0 100%;
	}

	.b7-campus__flag {
		font-size: 0.55rem;
		padding: 0.35em 0.7em;
	}

	.b7-lb__stage {
		inset: 3.5rem 0.75rem 5rem;
	}

	.b7-footer__legal p {
		line-height: 1.7;
	}
}

/* ==========================================================================
   Reduced motion
   Everything that moves on its own stops; everything that is revealed by
   movement is simply present. No content depends on animation.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

	.js [data-reveal],
	.js [data-reveal-stagger] > * {
		opacity: 1;
		transform: none;
	}

	.b7-word > span {
		transform: none;
	}

	.b7-linework path,
	.b7-campus__road {
		stroke-dashoffset: 0;
	}

	.js .b7-campus__block,
	.js .b7-campus__seven-block,
	.js .b7-campus__num,
	.js .b7-campus__seven-mark,
	.js .b7-campus__trust {
		opacity: 1;
		transform: none;
	}

	.b7-hero__prompt-line {
		animation: none;
		opacity: 0.8;
		transform: scaleY(0.7);
	}

	/* The portal is simply open, and the section is one screen tall. */
	.b7-hero__track {
		height: auto;
	}

	.b7-hero__stage {
		position: relative;
		height: 78vh;
		min-height: 26rem;
	}

	.b7-hero__portal {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.b7-hero__art {
		display: none;
	}

	.b7-ticker__belt {
		transform: none !important;
	}

	.b7-ticker__mask {
		overflow: hidden;
	}
}

/* No script: nothing is hidden behind a class that will never arrive. */
html:not(.js) .b7-hero__track { height: auto; }
html:not(.js) .b7-hero__stage { position: relative; height: 78vh; min-height: 26rem; }
html:not(.js) .b7-hero__portal { -webkit-mask-image: none; mask-image: none; }
html:not(.js) .b7-hero__art { display: none; }
html:not(.js) .b7-hero__trigger { display: none; }
html:not(.js) .b7-mode__panel[hidden] { display: block; }
html:not(.js) .b7-spec__note { opacity: 1; visibility: visible; }

/* Controls that only a script can honour do not pretend to work without one. */
html:not(.js) .b7-carousel__arrow,
html:not(.js) .b7-carousel__foot,
html:not(.js) .b7-gallery__pager,
html:not(.js) .b7-ticker__playpause,
html:not(.js) .b7-map__loading,
html:not(.js) .b7-map__shield {
	display: none;
}

/* With no script the carousel is simply the whole row. */
html:not(.js) .b7-carousel {
	grid-template-columns: minmax(0, 1fr);
}

html:not(.js) .b7-specs__track {
	flex-wrap: wrap;
	justify-content: center;
}
html:not(.js) .b7-menu { display: none; }
html:not(.js) .b7-burger { display: none; }

/* ==========================================================================
   Corrections after the first visual pass against the XD artwork.
   ========================================================================== */

/* `hidden` has to beat the shared display rules on the pause controls. */
.b7-carousel__playpause[hidden],
.b7-gallery__playpause[hidden],
.b7-ticker__playpause[hidden],
.b7-campus__playpause[hidden] {
	display: none;
}

/* The gallery control sits on the gradient strip, not on paper. */
.b7-gallery__playpause {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	min-height: 0;
	padding: 0;
	justify-content: center;
	color: #fff;
	border-color: rgb(255 255 255 / 0.7);
	opacity: 0.85;
}

.b7-gallery__playpause:hover,
.b7-gallery__playpause:focus-visible {
	opacity: 1;
	background: rgb(255 255 255 / 0.16);
}

/* Keep the belt from running under the ticker's own control. */
.b7-ticker__mask {
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 5rem), transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 5rem), transparent 100%);
}

/* Transport: the divider belongs between the pair, not before the second. */
.b7-mode__row:nth-child(odd)::after {
	content: none;
}

.b7-mode__row:nth-child(odd) {
	border-right: 1px solid var(--magenta);
	padding-right: clamp(0.75rem, 1.5vw, 1.5rem);
}

/*
 * The location map: the artwork is a much wider area than the design shows, so
 * it is cropped to the campus and its surrounding stations.
 */
.b7-location__maplink {
	aspect-ratio: 6 / 5;
}

.b7-location__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(2.3);
	transform-origin: 49% 60%;
}

.b7-location__maplink:hover .b7-location__img,
.b7-location__maplink:focus-visible .b7-location__img {
	transform: scale(2.38);
}

.b7-location__zoom {
	top: 18%;
	right: 26%;
}

/* The campus enlarge control belongs on the disc. */
.b7-campus__enlarge {
	right: 9%;
	bottom: 12%;
}

/* The footer mark: a gradient seven riding the family of drawn lines. */
.b7-footer__seven-art {
	filter: brightness(3.1) saturate(0.65);
	opacity: 0.85;
}

.b7-footer__seven-fill {
	width: 72%;
	height: 92%;
	right: 2%;
	bottom: 2%;
}

/*
 * The floor-plan sweep: a wide arc entering at the right and leaving through
 * the bottom-left corner, as the artwork does, rather than a disc in a corner.
 */
.b7-floors__swoosh {
	right: -52%;
	bottom: -72%;
	width: 156%;
	border-radius: 50%;
}

/* A second, warm ribbon so the compositions carry both brand gradients. */
.b7-welcome__ribbon-warm,
.b7-amen__ribbon-warm {
	position: absolute;
	display: block;
	pointer-events: none;
	z-index: 1;
}

.b7-welcome__ribbon-warm img,
.b7-amen__ribbon-warm img {
	display: block;
	width: 100%;
	height: auto;
}

.b7-welcome__ribbon-warm {
	top: 6%;
	right: -26%;
	width: min(48vw, 46rem);
	transform: translate3d(0, var(--par, 0px), 0) rotate(-8deg);
}

.b7-amen__ribbon-warm {
	top: -6%;
	right: -22%;
	width: min(44vw, 44rem);
	transform: translate3d(0, var(--par, 0px), 0) rotate(-136deg);
}

@media (max-width: 1024px) {
	.b7-location__maplink {
		aspect-ratio: 5 / 4;
	}
}

@media (max-width: 860px) {
	.b7-welcome__ribbon-warm {
		width: 78vw;
		right: -34%;
	}

	/*
	 * On a phone the amenities copy runs the full width of the section, so the
	 * ribbons that sit beside it on desktop would run straight through the
	 * heading and the paragraph. They move down to frame the campus plan
	 * instead, where there is nothing to read.
	 */
	.b7-amen__ribbon {
		top: auto;
		bottom: 4%;
		right: -46vw;
		width: 108vw;
	}

	.b7-amen__ribbon-warm {
		top: auto;
		bottom: -6%;
		right: -30vw;
		width: 84vw;
	}

	.b7-amen__lines {
		bottom: -8%;
		left: -34vw;
		width: 92vw;
		opacity: 0.45;
	}

	.b7-location__maplink {
		aspect-ratio: 4 / 3;
	}
}

.b7-campus__enlarge {
	right: 15%;
	bottom: 16%;
}

.b7-location__img {
	transform: scale(2);
	transform-origin: 47% 56%;
}

.b7-location__maplink:hover .b7-location__img,
.b7-location__maplink:focus-visible .b7-location__img {
	transform: scale(2.08);
}

.b7-location__zoom {
	top: 12%;
	right: 20%;
}

/* A grid item's automatic minimum size stops max-height from capping it. */
.b7-lb__img {
	min-width: 0;
	min-height: 0;
}

/*
 * The sweep in the floor-plan panel: a very large circle whose upper-left arc
 * crosses the panel from the right edge down to the bottom-left, matching the
 * artwork rather than reading as a disc in the corner.
 */
.b7-floors__swoosh {
	right: -128%;
	bottom: -92%;
	width: 196%;
}

/* ==========================================================================
   Forminator, restyled
   Forminator scopes its own rules to `.forminator-ui.forminator-custom-form`,
   so these are written at the same weight rather than reaching for !important.
   The plugin keeps ownership of validation, spam protection and submission —
   only the appearance is the theme's.
   ========================================================================== */

/*
 * Forminator prints the form with an inline `display: none` and reveals it from
 * its own script. An inline style cannot be beaten by a selector, so with
 * scripting off the section would be an empty panel — this is the one place a
 * `!important` earns its keep. It is scoped to the no-script case so that with
 * scripting on the plugin keeps full control of its own states; site.js carries
 * a matching backstop for a script that loads but never runs.
 */
html:not(.js) .b7-form .forminator-ui.forminator-custom-form {
	display: block !important;
}

.b7-form .forminator-ui.forminator-custom-form {
	color: #fff;
}

.b7-form .forminator-ui.forminator-custom-form .forminator-row {
	margin: 0 0 clamp(0.6rem, 1.1vw, 1.1rem);
	padding: 0;
}

.b7-form .forminator-ui.forminator-custom-form .forminator-field {
	position: relative;
	background: none;
	border: 0;
	padding: 0;
}

/*
 * The design shows the field name inside the capsule. It stays there and stays
 * visible: a persistent label rather than a placeholder that disappears the
 * moment someone starts typing.
 */
.b7-form .forminator-ui.forminator-custom-form .forminator-label {
	position: absolute;
	top: 0.7rem;
	left: 1.5rem;
	right: 1.5rem;
	z-index: 2;
	margin: 0;
	color: var(--ink);
	font-family: inherit;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-align: center;
	pointer-events: none;
}

.b7-form .forminator-ui.forminator-custom-form .forminator-required {
	color: var(--pink);
}

.b7-form .forminator-ui.forminator-custom-form .forminator-input,
.b7-form .forminator-ui.forminator-custom-form .forminator-textarea,
.b7-form .forminator-ui.forminator-custom-form input[type="text"],
.b7-form .forminator-ui.forminator-custom-form input[type="email"],
.b7-form .forminator-ui.forminator-custom-form textarea {
	width: 100%;
	min-height: 4rem;
	height: auto;
	padding: 1.85rem 1.75rem 0.7rem;
	border: 2px solid transparent;
	border-radius: 2rem;
	background: #fff;
	color: var(--ink);
	font-family: inherit;
	font-size: clamp(0.85rem, 0.94vw, 1.05rem);
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	box-shadow: none;
	transition:
		border-color 0.3s var(--ease-out),
		box-shadow 0.3s var(--ease-out),
		transform 0.3s var(--ease-out);
}

.b7-form .forminator-ui.forminator-custom-form .forminator-textarea,
.b7-form .forminator-ui.forminator-custom-form textarea {
	min-height: 4rem;
	resize: vertical;
	--forminator-textarea-min-height: 4rem;
}

.b7-form .forminator-ui.forminator-custom-form .forminator-input:focus,
.b7-form .forminator-ui.forminator-custom-form .forminator-textarea:focus,
.b7-form .forminator-ui.forminator-custom-form textarea:focus,
.b7-form .forminator-ui.forminator-custom-form input:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9);
	transform: translateY(-1px);
}

/* Consent: a ringed circle, matching the control in the artwork. */
.b7-form .forminator-ui.forminator-custom-form .forminator-field-consent .forminator-label {
	position: static;
	margin: 0 0 0.5rem;
	color: #fff;
	text-align: center;
}

.b7-form .forminator-ui.forminator-custom-form .forminator-checkbox__wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	margin: 0;
}

.b7-form .forminator-ui.forminator-custom-form .forminator-checkbox {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.35rem;
	cursor: pointer;
}

.b7-form .forminator-ui.forminator-custom-form .forminator-checkbox input[type="checkbox"] {
	position: absolute;
	width: 1.3rem;
	height: 1.3rem;
	min-height: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.b7-form .forminator-ui.forminator-custom-form .forminator-checkbox-box {
	display: block;
	width: 1.3rem;
	height: 1.3rem;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background: transparent;
	transition: background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.b7-form .forminator-ui.forminator-custom-form .forminator-checkbox input:checked + .forminator-checkbox-box {
	background: #fff;
	box-shadow: inset 0 0 0 4px var(--violet);
}

.b7-form .forminator-ui.forminator-custom-form .forminator-checkbox input:focus-visible + .forminator-checkbox-box {
	box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9), 0 0 0 6px var(--ink);
}

.b7-form .forminator-ui.forminator-custom-form .forminator-checkbox__label,
.b7-form .forminator-ui.forminator-custom-form .forminator-consent__label {
	color: #fff;
	font-family: inherit;
	font-size: clamp(0.85rem, 0.94vw, 1.05rem);
	font-weight: 400;
	letter-spacing: var(--track-body);
	text-transform: none;
}

/* Submit. */
.b7-form .forminator-ui.forminator-custom-form .forminator-row-last .forminator-field {
	margin-top: clamp(0.75rem, 1.4vw, 1.4rem);
}

.b7-form .forminator-ui.forminator-custom-form .forminator-button,
.b7-form .forminator-ui.forminator-custom-form .forminator-button-submit {
	display: block;
	width: 100%;
	min-height: 3.4rem;
	padding: 0.95rem 2rem;
	border: 1.5px solid rgb(255 255 255 / 0.85);
	border-radius: var(--r-pill);
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background 0.4s var(--ease-out),
		color 0.4s var(--ease-out),
		transform 0.35s var(--ease-out);
}

.b7-form .forminator-ui.forminator-custom-form .forminator-button:hover,
.b7-form .forminator-ui.forminator-custom-form .forminator-button:focus-visible,
.b7-form .forminator-ui.forminator-custom-form .forminator-button-submit:hover,
.b7-form .forminator-ui.forminator-custom-form .forminator-button-submit:focus-visible {
	background: #fff;
	color: var(--violet);
	transform: translateY(-2px);
}

.b7-form .forminator-ui.forminator-custom-form .forminator-button[disabled] {
	opacity: 0.65;
	cursor: progress;
	transform: none;
}

/* Messages: readable on the gradient, and never colour-only. */
.b7-form .forminator-ui.forminator-custom-form .forminator-error-message,
.b7-form .forminator-ui.forminator-custom-form .forminator-response-message {
	margin: 0.45rem 0 0;
	padding: 0.6rem 1.4rem;
	border-radius: 1.2rem;
	background: #fff;
	color: var(--ink);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
}

.b7-form .forminator-ui.forminator-custom-form .forminator-response-message[aria-hidden="true"] {
	display: none;
}

.b7-form .forminator-ui.forminator-custom-form .forminator-response-message.forminator-success {
	color: var(--violet);
}

.b7-form .forminator-ui.forminator-custom-form .forminator-has_error .forminator-input,
.b7-form .forminator-ui.forminator-custom-form input[aria-invalid="true"],
.b7-form .forminator-ui.forminator-custom-form textarea[aria-invalid="true"] {
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgb(255 255 255 / 0.95);
}

/*
 * Forminator ships its own scoped rules at four classes deep; repeating a class
 * here matches that weight without resorting to !important.
 */
.b7-form form.forminator-ui.forminator-custom-form textarea.forminator-textarea.forminator-textarea {
	min-height: 4rem;
	height: 4rem;
	border-radius: 2rem;
	padding: 1.85rem 1.75rem 0.7rem;
	text-align: center;
	resize: vertical;
}

.b7-form form.forminator-ui.forminator-custom-form .forminator-button.forminator-button {
	display: block;
	width: 100%;
	min-height: 3.4rem;
	margin: 0;
	padding: 0.95rem 2rem;
	border: 1.5px solid rgb(255 255 255 / 0.85);
	border-radius: var(--r-pill);
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-align: center;
	box-shadow: none;
}

.b7-form form.forminator-ui.forminator-custom-form .forminator-button.forminator-button:hover,
.b7-form form.forminator-ui.forminator-custom-form .forminator-button.forminator-button:focus-visible {
	background: #fff;
	color: var(--violet);
}

/* Consent: one label, beside its control. */
.b7-form form.forminator-ui.forminator-custom-form .forminator-field-consent .forminator-field {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding-block: 0.4rem;
}

.b7-form form.forminator-ui.forminator-custom-form .forminator-field-consent .forminator-label {
	order: 2;
	position: static;
	margin: 0;
	color: #fff;
	font-size: clamp(0.85rem, 0.94vw, 1.05rem);
	font-weight: 400;
	letter-spacing: var(--track-body);
	text-transform: none;
	text-align: left;
}

.b7-form form.forminator-ui.forminator-custom-form .forminator-field-consent .forminator-required {
	color: #fff;
}

.b7-form form.forminator-ui.forminator-custom-form .forminator-checkbox__wrapper {
	order: 1;
	display: block;
	margin: 0;
}

/* The plugin repeats the consent text as a description; one visible copy is
   enough, and the checkbox is still named by the label above. */
.b7-form form.forminator-ui.forminator-custom-form .forminator-consent__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.b7-form form.forminator-ui.forminator-custom-form .forminator-checkbox.forminator-checkbox {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	min-height: 2.75rem;
	min-width: 2.75rem;
	justify-content: center;
	cursor: pointer;
}

.b7-form form.forminator-ui.forminator-custom-form .forminator-checkbox-box.forminator-checkbox-box {
	width: 1.3rem;
	height: 1.3rem;
	min-width: 1.3rem;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
}

.b7-form form.forminator-ui.forminator-custom-form .forminator-checkbox input:checked + .forminator-checkbox-box.forminator-checkbox-box {
	background: #fff;
	box-shadow: inset 0 0 0 4px var(--violet);
}

.b7-form form.forminator-ui.forminator-custom-form .forminator-checkbox input:not(:checked) + .forminator-checkbox-box.forminator-checkbox-box {
	background-color: transparent;
	background-image: none;
}

/* Forminator's generated per-form rules carry [data-design]; match them. */
.b7-form form.forminator-ui.forminator-custom-form[data-design] .forminator-checkbox .forminator-checkbox-box.forminator-checkbox-box {
	width: 1.3rem;
	height: 1.3rem;
	flex: 0 0 1.3rem;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background-color: transparent;
	background-image: none;
}

.b7-form form.forminator-ui.forminator-custom-form[data-design] .forminator-checkbox input:checked + .forminator-checkbox-box.forminator-checkbox-box {
	background-color: #fff;
	box-shadow: inset 0 0 0 4px var(--violet);
}

.b7-form form.forminator-ui.forminator-custom-form[data-design] .forminator-checkbox-box:before {
	display: none;
}

/* Validation messages, in the page's own voice. */
.b7-form form.forminator-ui.forminator-custom-form[data-design] .forminator-error-message {
	margin: 0.45rem 1.25rem 0;
	padding: 0.5rem 1.4rem;
	border: 0;
	border-radius: 1.2rem;
	background: #fff;
	color: var(--ink);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
}

/* The consent row wraps so its message lands under the control, not beside it. */
.b7-form form.forminator-ui.forminator-custom-form .forminator-field-consent .forminator-field {
	flex-wrap: wrap;
}

.b7-form form.forminator-ui.forminator-custom-form .forminator-field-consent .forminator-error-message {
	order: 3;
	flex: 1 0 100%;
	margin-inline: auto;
	max-width: 28rem;
}

.b7-form form.forminator-ui.forminator-custom-form[data-design] .forminator-field-consent .forminator-field {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: center;
	gap: 0.5rem 0.6rem;
}

.b7-form form.forminator-ui.forminator-custom-form[data-design] .forminator-field-consent .forminator-checkbox__wrapper {
	grid-column: 1;
	grid-row: 1;
}

.b7-form form.forminator-ui.forminator-custom-form[data-design] .forminator-field-consent .forminator-label {
	grid-column: 2;
	grid-row: 1;
}

.b7-form form.forminator-ui.forminator-custom-form[data-design] .forminator-field-consent .forminator-error-message {
	grid-column: 1 / -1;
	grid-row: 2;
	margin-inline: 0;
}

.b7-form form.forminator-ui.forminator-custom-form[data-design] .forminator-error-message.forminator-error-message {
	background-color: #fff;
	color: var(--ink);
	border: 0;
}

/*
 * Forminator injects its design stylesheet at runtime, after the theme's, at
 * the same weight — so the two colours that would otherwise land pale pink on a
 * magenta panel are the one place this file has to insist.
 */
.b7-form form.forminator-ui.forminator-custom-form .forminator-error-message {
	background-color: #fff !important;
	color: var(--ink) !important;
}

/* ==========================================================================
   Target size (WCAG 2.2 AA, 2.5.8)
   Controls that the design draws small keep their drawn size but carry a
   24 x 24 hit area; links inside a sentence take the inline exception but are
   still padded where it costs the layout nothing.
   ========================================================================== */

.b7-gallery__dot {
	width: 1.5rem;
	height: 1.5rem;
	border: 0;
	background: none;
	display: grid;
	place-items: center;
}

.b7-gallery__dot::before {
	content: "";
	position: static;
	width: 0.85rem;
	height: 0.85rem;
	margin: 0;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background: none;
	transform: none;
	transition: background 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.b7-gallery__dot.is-current::before,
.b7-gallery__dot[aria-pressed="true"]::before {
	background: #fff;
	transform: scale(1.15);
}

.b7-gallery__dot:hover::before {
	background: rgb(255 255 255 / 0.6);
}

.b7-gallery__dot.is-current,
.b7-gallery__dot[aria-pressed="true"],
.b7-gallery__dot:hover {
	background: none;
	transform: none;
}

.b7-footer__link {
	min-height: 1.5rem;
	padding-block: 0.28rem;
}

.b7-contact__place,
.b7-contact__email,
.b7-contact__phone {
	display: inline-block;
	padding-block: 0.28rem;
}

@media (max-width: 860px) {
	/* The pair divider and its gutter have no meaning once the rows stack —
	   and the gutter left every other time 12px short of the column edge. */
	.b7-mode__row:nth-child(odd) {
		border-right: 0;
		padding-right: 0;
	}

	/* Keep the decorative ribbons clear of the heading at phone widths. */
	.b7-welcome__ribbon-warm {
		top: -4%;
		right: -46%;
		width: 82vw;
	}

	.b7-welcome__ribbon {
		top: -10%;
		right: -40%;
		width: 88vw;
	}
}

/* ==========================================================================
   Mobile drawer — now a sibling of the header
   ========================================================================== */

.b7-menu {
	z-index: 80;
	padding-top: clamp(5rem, 14vh, 8rem);
}

.b7-header {
	z-index: 90;
}

.b7-menu[hidden] {
	display: grid;
}

html.b7-menu-open .b7-menu {
	opacity: 1;
	visibility: visible;
	clip-path: circle(150% at calc(100% - 3.5rem) 2.5rem);
	transition:
		clip-path 0.72s var(--ease-soft),
		opacity 0.2s linear,
		visibility 0s;
}

html.b7-menu-open .b7-menu__link {
	transform: none;
	opacity: 1;
}

html.b7-menu-open .b7-menu__foot {
	opacity: 1;
	transform: none;
}

/* The bar stays legible above the open drawer. */
html.b7-menu-open .b7-header {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	transform: none;
}

/* The drawer's entrance has settled — nothing here depends on a frame arriving. */
.b7-menu.is-settled .b7-menu__link,
.b7-menu.is-settled .b7-menu__foot {
	opacity: 1;
	transform: none;
	transition: none;
}

/* The drawer no longer inherits the header's colour now that it sits outside it. */
.b7-menu {
	color: #fff;
}

/*
 * Without scripting there is nothing to disclose, so the modes stack as three
 * labelled panels — the same composition the accordion uses on a phone — and
 * the buttons that would do nothing are not drawn.
 */
html:not(.js) .b7-modes {
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 2.5rem);
}

html:not(.js) .b7-mode {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.5rem 1.25rem;
	width: 100%;
	padding-bottom: clamp(1rem, 3vw, 1.5rem);
	border-bottom: 1px solid rgb(245 40 96 / 0.35);
}

html:not(.js) .b7-mode__disc {
	grid-column: 1;
	grid-row: 1;
	width: 4.5rem;
}

html:not(.js) .b7-mode__label {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	text-align: left;
}

html:not(.js) .b7-mode__cta {
	display: none;
}

html:not(.js) .b7-mode__panel {
	grid-column: 1 / -1;
	grid-row: 2;
	width: 100%;
	margin-top: 1rem;
}

html:not(.js) .b7-mode__panel-title {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 0.75rem;
	overflow: visible;
	clip-path: none;
	color: var(--magenta);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-align: center;
}

/* ==========================================================================
   The map
   ========================================================================== */

.b7-map__frame {
	display: grid;
	background: #f7f4f9;
}

.b7-map__canvas,
.b7-map__embed {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	border: 0;
}

.b7-map__frame--embed .b7-map__canvas {
	display: none;
}

/*
 * The marker is the page's own element, positioned over the map by an overlay,
 * so it is the brand seven at the size the design draws it rather than a
 * flattened pin image.
 */
/*
 * The marker the design draws: an orange teardrop with the brand seven inside
 * it, and the building's name beside it. It drops in rather than appearing.
 */
.b7-map__pin {
	--pin: clamp(2.9rem, 3.8vw, 4.5rem);

	/* The teardrop's own point is what has to sit on the coordinates, so the
	   pin box is the teardrop and the label hangs off it. */
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: var(--pin);
	height: var(--pin);
	transform: translate(-50%, -100%);
	pointer-events: none;
}

.b7-map__pin[hidden] {
	display: none;
}

.b7-map__pin-drop {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--warm-orange);
	filter: drop-shadow(0 8px 12px rgb(33 11 74 / 0.4));
	transform: translate3d(0, -22px, 0) scale(0.82);
	opacity: 0;
	transition: transform 0.72s var(--ease-out), opacity 0.4s linear;
}

.b7-map__pin-label {
	position: absolute;
	top: 34%;
	left: calc(100% + 0.35rem);
	padding: 0.3em 0.85em;
	border-radius: var(--r-pill);
	background: rgb(255 255 255 / 0.94);
	color: var(--ink);
	font-size: clamp(0.7rem, 0.85vw, 0.95rem);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 6px 18px -10px rgb(33 11 74 / 0.7);
	transform: translate3d(-8px, -50%, 0);
	opacity: 0;
	transition: transform 0.6s var(--ease-out) 0.18s, opacity 0.4s linear 0.18s;
}

.b7-map__pin.is-in .b7-map__pin-drop {
	transform: none;
	opacity: 1;
}

.b7-map__pin.is-in .b7-map__pin-label {
	transform: translate3d(0, -50%, 0);
	opacity: 1;
}

.b7-map__pin-shape {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.b7-map__pin-seven {
	position: relative;
	width: 40%;
	height: 44%;
	margin-top: -14%;
}

/*
 * Without an API key the marker can only be drawn over the frame, so the frame
 * must not move under it. The shield holds the map still and offers the
 * controls; taking them swaps in the embed that carries Google's own marker.
 */
.b7-map__shield {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	align-items: end;
	justify-items: center;
	padding-bottom: clamp(0.9rem, 2.2vw, 1.75rem);
	opacity: 0;
	transition: opacity 0.4s linear;
	pointer-events: none;
}

.b7-map__frame.is-shielded .b7-map__embed {
	pointer-events: none;
}

/* Not before the map is actually under it. */
.b7-map__frame.is-shielded.is-loaded .b7-map__shield {
	opacity: 1;
	pointer-events: auto;
}

.b7-map__explore {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.6rem 1.5rem;
	border: 0;
	border-radius: var(--r-pill);
	background: rgb(255 255 255 / 0.96);
	color: var(--ink);
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 14px 30px -18px rgb(33 11 74 / 0.9);
	transition: transform 0.35s var(--ease-out), background 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

.b7-map__explore:hover,
.b7-map__explore:focus-visible {
	transform: translateY(-2px);
	background: var(--grad-warm-rev);
	color: #fff;
}

/* A quiet holding state, in the brand's own mark, until the map is there. */
.b7-map__loading {
	grid-area: 1 / 1;
	z-index: 1;
	display: grid;
	place-items: center;
	background: #f7f4f9;
}

.b7-map__loading[hidden] {
	display: none;
}

.b7-map__loading-mark {
	display: block;
	width: 2.5rem;
	height: 3.25rem;
	opacity: 0.28;
	animation: b7-map-wait 2.4s var(--ease-soft) infinite;
}

.b7-map__loading-mark .b7-seven {
	width: 100%;
	height: 100%;
}

@keyframes b7-map-wait {
	0%, 100% { opacity: 0.18; transform: translateY(2px) scale(0.97); }
	50% { opacity: 0.42; transform: translateY(-2px) scale(1); }
}

/* Google's own controls, brought into the page's language. */
.b7-map__frame .gm-style .gm-bundled-control button,
.b7-map__frame .gm-style button[title] {
	border-radius: 999rem !important;
}

.b7-map__frame .gm-style-cc,
.b7-map__frame .gmnoprint a {
	filter: saturate(0.6);
}

/* ==========================================================================
   Forced colours (Windows High Contrast)
   Gradients and masks vanish in this mode, so anything whose meaning lives in
   a fill is given a border to carry it instead.
   ========================================================================== */

@media (forced-colors: active) {
	.b7-btn,
	.b7-round,
	.b7-social,
	.b7-spec__disc,
	.b7-mode__disc,
	.b7-amen__icon,
	.b7-suites__badge,
	.b7-campus__enlarge,
	.b7-plan__zoom,
	.b7-location__zoom,
	.b7-map__explore,
	.b7-carousel__playpause {
		border: 1px solid ButtonBorder;
		forced-color-adjust: none;
		background: ButtonFace;
		color: ButtonText;
	}

	/* The pager dot's whole meaning is a gradient fill, so it needs an outline
	   to carry it, and the chosen one needs Highlight. */
	.b7-carousel__dot::after {
		border: 1px solid ButtonBorder;
		background: Canvas;
	}

	.b7-carousel__dot.is-current::after {
		background: Highlight;
	}

	.b7-map__pin-label {
		border: 1px solid CanvasText;
	}

	.b7-seven,
	.b7-map__pin-seven {
		background: CanvasText;
	}

	.b7-gallery__dot::before {
		border-color: ButtonBorder;
		background: Canvas;
	}

	.b7-gallery__dot.is-current::before,
	.b7-gallery__dot[aria-pressed="true"]::before {
		background: Highlight;
	}

	.b7-mode.is-open .b7-mode__cta,
	.b7-suites__row[aria-pressed="true"],
	.b7-amen__venue[aria-pressed="true"] {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}

	.b7-suites__row::before {
		display: none;
	}

	.b7-linework,
	.b7-welcome__ribbon,
	.b7-welcome__ribbon-warm,
	.b7-welcome__lines,
	.b7-amen__ribbon,
	.b7-amen__ribbon-warm,
	.b7-amen__lines,
	.b7-specs__leaf,
	.b7-contact__leaf,
	.b7-floors__lines,
	.b7-floors__swoosh,
	.b7-orbit__glow,
	.b7-hero__wash,
	.b7-hero__orb2 {
		display: none;
	}
}

/* ==========================================================================
   Print
   A property page gets printed and taken into meetings. Give it a clean,
   ink-light document: the artwork goes, the content stays, and links that
   matter print their destination.
   ========================================================================== */

@media print {
	@page {
		margin: 14mm;
	}

	html,
	body.b7-home {
		background: #fff !important;
		color: #000 !important;
		font-size: 11pt;
	}

	.b7-header,
	.b7-menu,
	.b7-skip,
	.b7-hero__track,
	.b7-carousel__arrow,
	.b7-carousel__foot,
	.b7-gallery__playpause,
	.b7-gallery__pager,
	.b7-ticker__playpause,
	.b7-campus__playpause,
	.b7-campus__enlarge,
	.b7-plan__zoom,
	.b7-location__zoom,
	.b7-gallery__zoom,
	.b7-map__consent,
	.b7-lb,
	.b7-linework,
	.b7-welcome__ribbon,
	.b7-welcome__ribbon-warm,
	.b7-welcome__lines,
	.b7-amen__ribbon,
	.b7-amen__ribbon-warm,
	.b7-amen__lines,
	.b7-specs__leaf,
	.b7-contact__leaf,
	.b7-floors__lines,
	.b7-floors__swoosh,
	.b7-orbit__glow,
	.b7-footer__seven,
	.b7-form {
		display: none !important;
	}

	.b7-welcome,
	.b7-floors__ink,
	.b7-amen,
	.b7-footer,
	.b7-gallery,
	.b7-location {
		background: #fff !important;
		color: #000 !important;
	}

	.b7-welcome__body,
	.b7-welcome__body strong,
	.b7-floors__copy p,
	.b7-floors__copy strong,
	.b7-amen__copy p,
	.b7-location__copy p,
	.b7-amen__name,
	.b7-suites__row,
	.b7-footer__link,
	.b7-footer__legal p {
		color: #000 !important;
	}

	.b7-eyebrow,
	.b7-display__bold,
	.b7-spec__label,
	.b7-mode__label,
	.b7-contact__person {
		color: #000 !important;
	}

	.b7-suites {
		border-color: #000;
	}

	.b7-mode__panel[hidden] {
		display: block !important;
	}

	.b7-spec__note {
		opacity: 1 !important;
		visibility: visible !important;
	}

	/* Print where a link actually goes, but only for real destinations. */
	.b7-contact__email::after,
	.b7-footer__link[href^="tel:"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}

	/*
	 * Entrances are held back until their section is scrolled to. A reader who
	 * prints the page without scrolling all of it would otherwise print blank
	 * headings and empty columns, so on paper everything is simply present.
	 */
	.js [data-reveal],
	.js [data-reveal-stagger] > *,
	.js .b7-campus__block,
	.js .b7-campus__seven-block,
	.js .b7-campus__num,
	.js .b7-campus__seven-mark,
	.js .b7-campus__trust,
	.b7-spec {
		opacity: 1 !important;
		transform: none !important;
	}

	.b7-word > span {
		transform: none !important;
	}

	.b7-campus__road {
		stroke-dashoffset: 0 !important;
	}

	/* The specification row is a carousel on screen and a list on paper: all of
	   it, un-clipped and un-translated. */
	.b7-carousel {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.b7-carousel__viewport {
		overflow: visible !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.b7-carousel__track {
		flex-wrap: wrap;
		justify-content: center;
		transform: none !important;
	}

	.b7-carousel__slide {
		flex: 0 0 auto;
		width: 8.5rem;
	}

	.b7-gallery__row,
	.b7-amen__grid,
	.b7-location__grid,
	.b7-floors {
		break-inside: avoid;
	}

	.b7-specs,
	.b7-floors,
	.b7-amen,
	.b7-contact {
		break-before: page;
	}
}

/* ==========================================================================
   Consistency between what is seen and what is announced
   ========================================================================== */

/*
 * A collapsed specification note is closed to everyone. Without this it stays
 * in the accessibility tree while its button says aria-expanded="false", which
 * is a contradiction a screen-reader user has to resolve for themselves.
 */
.b7-spec__note {
	visibility: hidden;
}

.b7-spec__button[aria-expanded="true"] + .b7-spec__note {
	visibility: visible;
}

/* `hidden` must beat `display: grid` on the round controls. */
.b7-round[hidden] {
	display: none;
}


@media (prefers-reduced-motion: reduce) {
	.b7-map__loading-mark {
		animation: none;
		opacity: 0.28;
	}
}

@media print {
	.b7-map__loading,
	.b7-map__pin,
	.b7-map__shield {
		display: none !important;
	}
}