/* Unlayered, so these beat Bricks' layered defaults without !important (trap 3). */

/* ---- Layout ---- */
.gd-section { width: 100%; padding: var(--section) var(--gutter); align-self: stretch; }
.gd-section--tight { padding-top: calc(var(--section) * 0.5); }
.gd-container { width: 100%; max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: var(--s-6); align-items: stretch; }
.gd-accent { color: var(--blue); }
.gd-center { text-align: center; }
h2.gd-center { max-width: 18em; margin-inline: auto; }
.gd-grid { display: grid; gap: var(--s-5); width: 100%; align-items: stretch; }
.gd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd-stack { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; width: 100%; }
.gd-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.gd-small { font-size: 0.875rem; color: var(--text-soft); }
.gd-label { font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: var(--text-soft); }
.gd-body { color: var(--black); }

@media (max-width: 767px) {
	.gd-grid--2, .gd-grid--3 { grid-template-columns: minmax(0, 1fr); }
	.gd-section { padding-inline: var(--gutter); }
}

/* ---- Buttons ----
   One component across the site: links, buttons and filter tabs all use .gd-btn. Secondary is
   .gd-btn--2, and an unselected tab takes it automatically. Each state moves slightly darker
   within its own tone. Change a colour here and every button follows. */
.gd-btn, a.gd-btn, button.gd-btn {
	--btn-bg: var(--blue);
	--btn-bg-hover: var(--blue-hover);
	--btn-bg-active: var(--blue-active);
	--btn-text: var(--white);
	--btn-text-hover: var(--white);
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
	min-height: 2.8125rem; padding: 0.75rem 1.5rem; border: 0; border-radius: var(--r-control);
	background: var(--btn-bg); color: var(--btn-text); font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.3;
	cursor: pointer; text-align: center; transition: background-color var(--ease), color var(--ease);
}
.gd-btn--2, a.gd-btn--2, button.gd-btn--2, .gd-btn[aria-selected="false"], button.gd-btn[aria-selected="false"] {
	--btn-bg: var(--secondary-bg);
	--btn-bg-hover: var(--secondary-hover);
	--btn-bg-active: var(--secondary-active);
	--btn-text: var(--blue);
	--btn-text-hover: var(--blue-hover);
}
.gd-btn:hover, a.gd-btn:hover, button.gd-btn:hover { background: var(--btn-bg-hover); color: var(--btn-text-hover); }
.gd-btn:active, a.gd-btn:active, button.gd-btn:active { background: var(--btn-bg-active); color: var(--btn-text-hover); }
.gd-btn:disabled, button.gd-btn:disabled, .gd-btn[aria-disabled="true"] { background: var(--gray); color: var(--text-soft); cursor: default; }
/* Every primary button: on hover the label eases left and a chevron comes in beside it, at the same width. */
.gd-btn:not(.gd-btn--2, .gd-link, [aria-selected="false"], :disabled, [aria-disabled="true"]) { transition: background-color var(--ease), color var(--ease), padding 0.25s ease; }
.gd-btn:not(.gd-btn--2, .gd-link, [aria-selected="false"], :disabled, [aria-disabled="true"])::after { content: ''; flex: none; width: 0.5rem; height: 0.8rem; margin-right: -1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; translate: -0.25rem 0; transition: opacity 0.25s ease, translate 0.25s ease, margin 0.25s ease; }
@media (hover: hover) {
	.gd-btn:not(.gd-btn--2, .gd-link, [aria-selected="false"], :disabled, [aria-disabled="true"]):hover { padding-inline: 1rem; }
	.gd-btn:not(.gd-btn--2, .gd-link, [aria-selected="false"], :disabled, [aria-disabled="true"]):hover::after { margin-right: 0; opacity: 1; translate: 0 0; }
}
.gd-btn:not(.gd-btn--2, .gd-link, [aria-selected="false"], :disabled, [aria-disabled="true"]):focus-visible { padding-inline: 1rem; }
.gd-btn:not(.gd-btn--2, .gd-link, [aria-selected="false"], :disabled, [aria-disabled="true"]):focus-visible::after { margin-right: 0; opacity: 1; translate: 0 0; }

/* Round icon buttons: the same secondary tones. */
.gd-burger, .gd-vm__page, .gd-vm__close, .gd-dialog__close { background: var(--secondary-bg); color: var(--blue); transition: background-color var(--ease), color var(--ease); }
.gd-burger:hover, .gd-vm__page:hover, .gd-vm__close:hover, .gd-dialog__close:hover { background: var(--secondary-hover); color: var(--blue-hover); }
.gd-burger:active, .gd-vm__page:active, .gd-vm__close:active, .gd-dialog__close:active { background: var(--secondary-active); color: var(--blue-hover); }

/* Blue text links carry a right chevron, which eases along on hover. */
.gd-link, a.gd-link, .gd-card__more { display: inline-flex; align-items: center; gap: 0.5em; color: var(--blue); font-weight: 700; line-height: 1.3; transition: color var(--ease); }
.gd-link::after, .gd-card__more::after { content: ''; flex: none; width: 0.5em; height: 0.8em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--ease); }
a.gd-link:hover, .gd-card:hover .gd-card__more { color: var(--blue-hover); }
a.gd-btn.gd-link, a.gd-btn.gd-link:hover { color: var(--btn-text-hover); }
a.gd-link:hover::after, .gd-card:hover .gd-card__more::after { transform: translateX(0.1875rem); }

/* Pages fade into each other, with the menu staying put. Browsers without this just change page as usual. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	#brx-header { view-transition-name: gd-menu; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.4s; animation-timing-function: ease; }
	::view-transition-group(gd-menu) { animation-duration: 0.4s; }
}

/* ---- Sign-in pages: words and form on grey beside a full-height photo, on Bricks' own form ---- */
.gd-auth-page { padding-top: 0; }
.gd-auth-page #brx-header, .gd-auth-page #brx-footer { display: none; }
.gd-auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); width: 100%; min-height: 100svh; background: var(--light-white); }
.gd-auth__panel { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: var(--s-3); width: 100%; max-width: 30rem; margin-inline: auto; padding: var(--s-6) var(--gutter); }
a.gd-auth__logo { display: block; width: 6.5rem; height: 3rem; margin-bottom: var(--s-3); overflow: hidden; background: url("../img/big-bloom-logo.svg") left center / contain no-repeat; text-indent: -999rem; }
.gd-auth__panel h1 { font-size: var(--h2); }
.gd-auth__photo { position: relative; min-height: 100%; overflow: hidden; }
.gd-auth__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gd-auth__card { padding: var(--s-5); border-radius: var(--r-card); background: var(--white); }
.gd-auth form.brxe-form, .gd-auth .brxe-form { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; }
.gd-auth .brxe-form .form-group { width: 100%; padding: 0; }
.gd-auth .brxe-form .form-group > label { display: block; margin-bottom: var(--s-1); color: var(--black); font-size: 1rem; font-weight: 700; letter-spacing: normal; line-height: 1.3; text-transform: none; }
.gd-auth .brxe-form .form-group:has(.options-wrapper) > :not(.options-wrapper) { display: none; }
.gd-auth .brxe-form input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; min-height: 2.8125rem; padding: 0.75rem 1rem; border: 0; border-radius: var(--r-control); background: var(--light-white); color: var(--black); font: inherit; }
.gd-auth .brxe-form input:not([type="checkbox"]):focus { outline: 0.125rem solid var(--blue); outline-offset: 0; }
.gd-auth .brxe-form .options-wrapper { margin: 0; padding: 0; list-style: none; }
.gd-auth .brxe-form .options-wrapper li { display: flex; align-items: center; gap: var(--s-1); }
.gd-auth .brxe-form .options-wrapper label { margin: 0; color: var(--black); font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none; }
.gd-auth .brxe-form button[type="submit"], .gd-auth .brxe-form .bricks-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); width: 100%; min-height: 2.8125rem; padding: 0.75rem 1.5rem; border: 0; border-radius: var(--r-control); background: var(--blue); color: var(--white); font: inherit; font-weight: 700; line-height: 1.3; cursor: pointer; transition: background-color var(--ease); }
.gd-auth .brxe-form button[type="submit"]:hover { background: var(--blue-hover); }
.gd-auth .brxe-form button[type="submit"]:active { background: var(--blue-active); }
.gd-auth .brxe-form .message { margin: 0; border-radius: var(--r-control); }
.gd-auth__more { font-size: 0.875rem; text-align: center; }
@media (max-width: 767px) {
	.gd-auth { grid-template-columns: minmax(0, 1fr); }
	.gd-auth__photo { display: none; }
}

/* ---- Header ---- */
body { padding-top: calc(var(--header-h) + 1rem); }
.admin-bar #brx-header { margin-top: var(--wp-admin--admin-bar--height, 32px); }
#brx-header { position: fixed; inset: 0.75rem 0 auto 0; z-index: 100; padding-inline: var(--gutter); background: transparent; pointer-events: none; }
.gd-header { pointer-events: auto; max-width: var(--container); margin-inline: auto; width: 100%; background: var(--white); border-radius: var(--r-card); box-shadow: 0 0.25rem 1.5rem rgba(32, 32, 42, 0); transition: box-shadow 0.3s ease; }
.gd-header.is-scrolled { box-shadow: 0 0.25rem 1.5rem rgba(32, 32, 42, 0.1); }
.gd-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 4.5rem; padding: 0.5rem 1.25rem; }
.gd-header__logo { display: block; flex: none; line-height: 0; }
/* On pages that open on white, the menu's card can't be seen until it casts a shadow, so before scrolling the
   logo lines up with the page's left edge, then eases into its padded place. Grey-topped pages show the card. */
.gd-header__logo { translate: var(--logo-x, 0) 0; transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
body:not(:has(.gd-section--page)) .gd-header:not(.is-scrolled):not(.is-open) .gd-header__logo { --logo-x: -1.25rem; }
.gd-header__logo img { width: 4.75rem; height: auto; }
.gd-nav { display: flex; align-items: center; gap: 2.25rem; }
.gd-nav__links { display: flex; align-items: center; gap: 2.25rem; margin: 0; padding: 0; list-style: none; }
.gd-nav__links a:not(.gd-btn) { color: var(--black); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.gd-nav__links a:not(.gd-btn):hover, .gd-nav__links a[aria-current="page"]:not(.gd-btn) { color: var(--blue); }
/* The current page's link is underlined, as heavy as the letters' strokes and unbroken under the p and g. */
.gd-nav__links a[aria-current="page"]:not(.gd-btn) { position: relative; }
.gd-nav__links a[aria-current="page"]:not(.gd-btn)::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% + 0.2em); height: 0.125em; border-radius: 0.0625em; background: currentColor; }
.gd-nav__cta { display: flex; gap: var(--s-2); }
.gd-burger { display: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: var(--r-control); cursor: pointer; align-items: center; justify-content: center; }
.gd-burger svg { width: 1.25rem; height: 1.25rem; }
.gd-burger .gd-burger__x { display: none; }
.gd-burger[aria-expanded="true"] .gd-burger__x { display: block; }
.gd-burger[aria-expanded="true"] .gd-burger__bars { display: none; }

@media (min-width: 992px) { .gd-nav--narrow { display: none; } }
@media (max-width: 991px) {
	.gd-burger { display: inline-flex; }
	.gd-nav--wide { display: none; }
	/* The menu card grows out from the bar to fill the screen, and its items rise in after it. */
	html.gd-menu-open { overflow: hidden; }
	#brx-header { transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1), padding-inline 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
	html.gd-menu-open #brx-header { top: 0; padding-inline: 0; }
	.gd-header { height: 4.5rem; overflow: hidden; transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; }
	.gd-header.is-open { height: 100dvh; border-radius: 0; box-shadow: none; }
	.gd-header__wrap { display: flex; flex-direction: column; height: 100dvh; }
	.gd-nav--narrow { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: safe center; gap: var(--s-5); min-height: 0; overflow-y: auto; padding: var(--s-4) 1.25rem calc(var(--s-4) + 4.5rem + env(safe-area-inset-bottom)); visibility: hidden; transition: visibility 0s linear 0.45s; }
	.gd-header.is-open .gd-nav--narrow { visibility: visible; transition-delay: 0s; }
	.gd-nav__links { flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
	.gd-nav__links a:not(.gd-btn) { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
	.gd-nav__more { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
	.gd-nav__more a { display: inline-flex; align-items: center; gap: var(--s-1); padding-block: 0.25rem; color: var(--black); font-size: 0.9375rem; line-height: 1.3; transition: color var(--ease); }
	.gd-nav__more a:hover { color: var(--blue); }
	.gd-nav__more svg { flex: none; width: 1rem; height: 1rem; color: var(--blue); fill: var(--blue); }
	.gd-nav__cta { flex-direction: column; }
	.gd-nav__cta .gd-btn { width: 100%; }
	.gd-header.is-open .gd-nav--narrow li, .gd-header.is-open .gd-nav--narrow .gd-btn { animation: gd-menu-item 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards; }
	.gd-header.is-open .gd-nav--narrow li:nth-child(2) { animation-delay: 0.16s; }
	.gd-header.is-open .gd-nav--narrow .gd-btn:nth-child(1) { animation-delay: 0.22s; }
	.gd-header.is-open .gd-nav--narrow .gd-btn:nth-child(2) { animation-delay: 0.28s; }
	.gd-header.is-open .gd-nav--narrow .gd-nav__more li { animation-delay: 0.34s; }
}
@keyframes gd-menu-item { from { opacity: 0; translate: 0 1rem; } }
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
	#brx-header, .gd-header { transition: none; }
	.gd-header.is-open .gd-nav--narrow li, .gd-header.is-open .gd-nav--narrow .gd-btn { animation: none; }
}

/* ---- Hero ---- */
.gd-hero { position: relative; width: 100%; padding: var(--s-7) var(--gutter) var(--s-5); overflow: hidden; }
.gd-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); max-width: 44rem; margin-inline: auto; text-align: center; }
.gd-hero__eyebrow { font-weight: 700; color: var(--text-soft); }
.gd-hero__copy .gd-row { justify-content: center; margin-top: var(--s-2); }
.gd-hero__more, a.gd-hero__more { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--blue); font-size: 0.875rem; font-weight: 700; line-height: 1.3; transition: color var(--ease); }
a.gd-hero__more:hover { color: var(--blue-hover); }
.gd-more-arrow { display: block; width: 1.125rem; height: 1.5rem; color: var(--blue); animation: gd-more-drift 2s ease-in-out infinite; }
.gd-more-arrow path { transition: transform 0.3s ease, opacity 0.2s ease, stroke-dashoffset 0.3s ease; }
.gd-more-arrow__stem { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
a.gd-hero__more:hover .gd-more-arrow, a.gd-hero__more:focus-visible .gd-more-arrow { animation-play-state: paused; }
a.gd-hero__more:hover .gd-more-arrow__stem, a.gd-hero__more:focus-visible .gd-more-arrow__stem { stroke-dashoffset: 0; opacity: 1; }
a.gd-hero__more:hover .gd-more-arrow__top, a.gd-hero__more:focus-visible .gd-more-arrow__top { transform: translateY(0.5rem); opacity: 0; }
a.gd-hero__more:hover .gd-more-arrow__tip, a.gd-hero__more:focus-visible .gd-more-arrow__tip { transform: translateY(0.1875rem); }
@keyframes gd-more-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.25rem); } }
.gd-hero__photos { display: contents; }

/* A photo with its offset block of colour, as on Big Bloom's own hero. */
.gd-photo { position: relative; display: block; }
.gd-photo::before { content: ''; position: absolute; z-index: 0; inset: 0; border-radius: var(--r-panel); background: var(--blue); transform: translate(0.75rem, -0.75rem); }
.gd-photo--yellow::before { background: var(--yellow); transform: translate(0.75rem, 0.75rem); }
.gd-photo--green::before { background: var(--green); transform: translate(-0.75rem, 0.75rem); }
.gd-photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-panel); border: 0.5rem solid var(--white); box-sizing: border-box; }

@media (min-width: 992px) {
	/* The hero fills the fold. The four main photos keep their distance from the headline at any
	   width, hanging off the screen's edge only where the screen is narrow enough. */
	.gd-hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: max(38rem, calc(100svh - var(--header-h) - 1rem)); padding-block: var(--s-6) var(--s-7); }
	.gd-hero .gd-photo { position: absolute; z-index: 1; }
	.gd-hero__p1 { width: min(18.7vw, 20rem, calc(max(38rem, 100svh - 6rem) * 0.4)); aspect-ratio: 4 / 5; top: max(1rem, calc(50% - 31rem)); left: max(-1.5rem, calc(50% - 49rem)); }
	.gd-hero__p2 { width: min(16.15vw, 17.5rem); aspect-ratio: 5 / 4; bottom: max(1.5rem, calc(50% - 31.5rem)); left: max(6vw, calc(50% - 41rem)); }
	.gd-hero__p3 { width: min(16.15vw, 17.5rem); aspect-ratio: 5 / 4; bottom: max(1.5rem, calc(50% - 31.5rem)); right: max(6vw, calc(50% - 41rem)); }
	@media (max-width: 1599px) { .gd-hero__p2, .gd-hero__p3 { width: min(18.6vw, 20rem); } }
	.gd-hero__p4 { width: min(18.7vw, 20rem, calc(max(38rem, 100svh - 6rem) * 0.4)); aspect-ratio: 4 / 5; top: max(1rem, calc(50% - 31rem)); right: max(-1.5rem, calc(50% - 49rem)); }
	.gd-hero__copy { max-width: min(44rem, 46vw); }
	/* About 20% up from the fold, stopping short of the buttons on shorter screens. */
	.gd-hero__more { position: absolute; left: 50%; bottom: max(1.5rem, min(20%, 50% - 15.25rem)); z-index: 2; margin: 0; transform: translateX(-50%); white-space: nowrap; }
}
/* Wide screens: two small photos each side, scattered, running off the edge and touching nothing. */
.gd-hero__extras { display: contents; }
.gd-hero__x { display: none; }
a.gd-photo { cursor: pointer; }
.gd-hero a.gd-photo:focus-visible { outline: 0.1875rem solid var(--blue); outline-offset: 0.25rem; border-radius: var(--r-panel); }
@media (min-width: 2100px) {
	.gd-hero .gd-hero__x { display: block; }
}
.gd-hero .gd-hero__x::before { border-radius: 1.5rem; }
.gd-hero .gd-hero__x img { border-width: 0.375rem; border-radius: 1.5rem; }
.gd-hero .gd-hero__x:not(.gd-photo--yellow):not(.gd-photo--green)::before { transform: translate(0.5rem, -0.5rem); }
.gd-hero .gd-hero__x.gd-photo--yellow::before { transform: translate(0.5rem, 0.5rem); }
.gd-hero .gd-hero__x.gd-photo--green::before { transform: translate(-0.5rem, 0.5rem); }
.gd-hero__x1 { left: -4rem; top: calc(50% - 4rem); width: 13rem; aspect-ratio: 4 / 5; }
.gd-hero__x2 { left: -3rem; bottom: calc(50% - 28.5rem); width: 11rem; aspect-ratio: 5 / 4; }
.gd-hero__x3 { right: -3.5rem; top: calc(50% - 1rem); width: 12rem; aspect-ratio: 5 / 4; }
.gd-hero__x4 { right: -4.5rem; bottom: calc(50% - 30rem); width: 11.5rem; aspect-ratio: 1 / 1; }
/* Banner photos rise in one after another on load, then drift gently, each to its own rhythm.
   Scrolling carries them up and out, in site.js. */
.gd-hero__p1 { --i: 0; --fd: 9s; --fs: -1s; --fx: 0.25rem; --fy: -0.75rem; }
.gd-hero__p4 { --i: 1; --fd: 11s; --fs: -6s; --fx: -0.25rem; --fy: 0.75rem; }
.gd-hero__p3 { --i: 2; --fd: 10s; --fs: -3s; --fx: 0.3125rem; --fy: -0.625rem; }
.gd-hero__p2 { --i: 3; --fd: 12s; --fs: -8s; --fx: -0.3125rem; --fy: -0.625rem; }
.gd-hero__x1 { --i: 5; --fd: 13s; --fs: -9s; --fx: 0.25rem; --fy: 0.625rem; }
.gd-hero__x3 { --i: 6; --fd: 10.5s; --fs: -4s; --fx: -0.25rem; --fy: -0.625rem; }
.gd-hero__x4 { --i: 7; --fd: 12.5s; --fs: -11s; --fx: 0.25rem; --fy: -0.5rem; }
.gd-hero__x2 { --i: 8; --fd: 11.5s; --fs: -5s; --fx: -0.25rem; --fy: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
	.gd-hero .gd-photo {
		animation: gd-photo-float var(--fd) ease-in-out var(--fs) infinite;
		will-change: translate, opacity, transform;
	}
	.gd-intro:not(.gd-lite) .gd-hero .gd-photo {
		animation: gd-photo-in 1.4s cubic-bezier(0.3, 0.1, 0.2, 1) calc(1.8s + var(--i) * 0.06s) backwards, gd-photo-float var(--fd) ease-in-out var(--fs) infinite;
		will-change: translate, opacity, transform, scale, filter;
	}
}
/* A time warp in real 3D: the photos rush the last stretch towards the camera, along lines from the banner's
   vanishing point, starting just clear of the banner text. */
.gd-intro .gd-hero { perspective: 56rem; perspective-origin: 50% 50%; }
@media (max-width: 991px) { .gd-intro .gd-hero { --warp-depth: -2.5rem; } }
@keyframes gd-photo-in {
	0% { opacity: 0.002; translate: 0 0 var(--warp-depth, -6rem); filter: blur(0.75rem); }
	30% { opacity: 1; }
	100% { opacity: 1; translate: 0 0 0; filter: blur(0); }
}
@keyframes gd-photo-float { 50% { transform: translate(calc(var(--fx) * var(--fa, 1)), calc(var(--fy) * var(--fa, 1))); } }
@media (max-width: 991px) { .gd-hero { --fa: 0.6; } }
/* Fresh visits and refreshes only, not arrivals from elsewhere on the site (gd-intro, set in the head): the banner text fades in and comes into
   focus word by word, slowly (words split in site.js), and the photos and menu follow once it has arrived. Never fully transparent: Chrome ignores opacity 0 when
   timing the page's main paint. Scrolling takes the text out, also in site.js. */
.gd-intro:not(.gd-lite) .gd-hero__copy > :not(.gd-row):not(.is-split) { opacity: 0.01; filter: blur(0.3em); animation: gd-copy-safe 0.3s 3.5s forwards; }
.gd-w { animation: gd-word 1.2s ease-out both; }
/* Two lines on wide screens; narrower, the words balance themselves. */
.gd-hero h1 br { display: none; }
@media (min-width: 992px) {
	.gd-hero h1 { width: max-content; white-space: nowrap; }
	.gd-hero h1 br { display: inline; }
}
@keyframes gd-word { from { opacity: 0.01; filter: blur(0.3em); } to { opacity: 1; filter: blur(0); } }
@keyframes gd-copy-safe { to { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: no-preference) {
	.gd-intro:not(.gd-lite) .gd-hero__copy > .gd-row, .gd-intro:not(.gd-lite) .gd-hero__more { animation: gd-copy-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 2.4s backwards; }
}
/* Phones and touch screens (gd-lite): the same order, shorter, moving only what the graphics chip can move without
   redrawing. Blur on each word is what stutters on iPhone Safari. */
@media (prefers-reduced-motion: no-preference) {
	.gd-lite.gd-intro .gd-hero__copy > * { animation: gd-copy-in 0.7s ease-out calc(var(--ci, 0) * 110ms) backwards; }
	.gd-lite.gd-intro .gd-hero__more { animation: gd-copy-in 0.7s ease-out 0.5s backwards; }
	.gd-lite.gd-intro .gd-hero .gd-photo { animation: gd-photo-lite 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(0.4s + var(--i) * 0.06s) backwards, gd-photo-float var(--fd) ease-in-out var(--fs) infinite; }
	.gd-lite.gd-intro .gd-burger, .gd-lite.gd-intro .gd-header__logo { animation: gd-copy-in 0.6s ease-out 0.4s backwards; }
}
@keyframes gd-photo-lite { from { opacity: 0; transform: scale(0.94); } }
.gd-hero__copy > :nth-child(2) { --ci: 1; }
.gd-hero__copy > :nth-child(3) { --ci: 2; }
.gd-hero__copy > :nth-child(4) { --ci: 3; }
.gd-hero.is-away .gd-photo { animation-play-state: paused; }
@keyframes gd-copy-in { from { opacity: 0; translate: 0 1rem; } }
/* The menu arrives with the photos, one item after another. */
@media (prefers-reduced-motion: no-preference) {
	.gd-intro:not(.gd-lite) .gd-header__logo, .gd-intro:not(.gd-lite) .gd-nav--wide li, .gd-intro:not(.gd-lite) .gd-nav--wide .gd-btn, .gd-intro:not(.gd-lite) .gd-burger { animation: gd-menu-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(1.8s + var(--mi, 0) * 80ms) backwards; }
	.gd-nav--wide li:nth-child(1) { --mi: 1; }
	.gd-nav--wide li:nth-child(2) { --mi: 2; }
	.gd-nav--wide .gd-btn:nth-child(1) { --mi: 3; }
	.gd-nav--wide .gd-btn:nth-child(2) { --mi: 4; }
	.gd-burger { --mi: 1; }
}
@keyframes gd-menu-in { from { opacity: 0; translate: 0 -0.5rem; } }
@keyframes gd-logo-in { from { opacity: 0; translate: var(--logo-x, 0) -0.5rem; } }
.gd-intro:not(.gd-lite) .gd-header__logo { animation-name: gd-logo-in; }
@media (max-width: 991px) {
	/* As on Big Bloom's phone banner: two photos above the headline and two below, scattered and
	   running off the edges. --u stops growing so they don't swamp a tablet. */
	.gd-hero { --u: min(0.8vw, 0.3rem); display: flex; flex-direction: column; padding-top: calc(62 * var(--u) + var(--s-4)); padding-bottom: var(--s-4); }
	.gd-hero .gd-photo { position: absolute; z-index: 1; }
	.gd-hero .gd-photo::before { border-radius: 1.5rem; transform: translate(0.5rem, -0.5rem); }
	.gd-hero .gd-photo--yellow::before { transform: translate(0.5rem, 0.5rem); }
	.gd-hero .gd-photo--green::before { transform: translate(-0.5rem, 0.5rem); }
	.gd-hero .gd-photo img { border-width: 0.375rem; border-radius: 1.5rem; }
	.gd-hero__p1 { top: 0.75rem; left: calc(-6 * var(--u)); width: calc(44 * var(--u)); aspect-ratio: 4 / 5; }
	.gd-hero__p4 { top: calc(0.75rem + 7 * var(--u)); right: calc(-7 * var(--u)); width: calc(40 * var(--u)); aspect-ratio: 4 / 5; }
	.gd-hero__p2 { bottom: calc(var(--s-4) + 3.5rem + var(--s-3) + 8 * var(--u)); left: calc(-4 * var(--u)); width: calc(44 * var(--u)); aspect-ratio: 5 / 4; }
	.gd-hero__p3 { bottom: calc(var(--s-4) + 3.5rem + var(--s-3)); right: calc(-5 * var(--u)); width: calc(42 * var(--u)); aspect-ratio: 5 / 4; }
	.gd-hero__more, a.gd-hero__more { align-self: center; margin-top: calc(46 * var(--u) + var(--s-4) + var(--s-3)); }
}

/* ---- Panels and features ---- */
.gd-panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-5); background: var(--light-white); border-radius: var(--r-panel); }
.gd-panel__title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.gd-section--grey .gd-panel { background: var(--gray); }
.gd-section--grey .gd-panel .gd-label { color: var(--text-soft-on-gray); }
.gd-feature { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
/* Home page: scrolling sets off each heading, then its cards one after another, once (site.js).
   On each feature the two circles slide together into the Big Bloom overlap. */
.gd-rise { opacity: 0; translate: 0 1.75rem; }
.gd-rise.is-in { --rise-delay: calc(var(--si, 0) * 90ms); opacity: 1; translate: 0 0; transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--rise-delay), translate 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--rise-delay); }
@media (hover: hover) {
.gd-rise .gd-circles::before { translate: -0.375rem 0; }
.gd-rise .gd-circles::after { translate: 1.25rem 0; }
.gd-rise.is-in .gd-circles::before, .gd-rise.is-in .gd-circles::after { translate: 0 0; transition: translate 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--rise-delay) + 0.1s); }
}
@media (max-width: 991px) {
	.gd-rise { translate: 0 1rem; }
	.gd-rise.is-in { transition-duration: 0.3s; }
}
@media (min-width: 992px) {
	.home .gd-grid > :nth-child(1) { --si: 1; }
	.home .gd-grid > :nth-child(2) { --si: 2; }
	.home .gd-grid > :nth-child(3) { --si: 3; }
	.home .gd-cases__intro > :nth-child(2) { --si: 1; }
	.home .gd-cases__intro > :nth-child(3) { --si: 2; }
}
.gd-circles { --c: 2.5rem; display: flex; flex-direction: row; align-items: center; width: auto; height: var(--c); margin-bottom: var(--s-1); }
/* On hover the two cross over each other and back, as if circling on a flat plane (site.js starts it and lets it finish). */
.gd-circles.is-spin::before { animation: gd-orbit-a 1s ease-in-out; }
.gd-circles.is-spin::after { animation: gd-orbit-b 1s ease-in-out; }
@keyframes gd-orbit-a { 0%, 100% { translate: 0 0; scale: 1; } 25% { scale: 1.14; } 50% { translate: calc(var(--c) * 0.7) 0; scale: 1; } 75% { scale: 0.86; } }
@keyframes gd-orbit-b { 0%, 100% { translate: 0 0; scale: 1; } 25% { scale: 0.86; } 50% { translate: calc(var(--c) * -0.7) 0; scale: 1; } 75% { scale: 1.14; } }
.gd-circles::before, .gd-circles::after { content: ''; display: block; width: var(--c); height: var(--c); border-radius: 50%; }
.gd-circles::after { margin-left: calc(var(--c) * -0.3); mix-blend-mode: multiply; }
/* A large pair that keeps circling slowly, for the 404 page. Still for anyone who turns motion off. */
.gd-circles--lg { --c: clamp(5.5rem, 4rem + 6vw, 8.5rem); margin-block: calc(var(--c) * 0.1) calc(var(--c) * 0.1 + var(--s-1)); } /* room for the loop's small rise and fall */
/* The pair spins round one central vertical axis at a steady speed, half a turn apart: each centre sits
   0.35 of a circle from the axis, so at rest they make the logo overlap. The one coming forward grows a
   little and the one going back shrinks, both about their own centres, so nothing drifts up or down. */
@property --gd-spin { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.gd-circles--loop::before { translate: calc(var(--c) * 0.35 * (1 - cos(var(--gd-spin)))) 0; scale: calc(1 + 0.08 * sin(var(--gd-spin))); }
.gd-circles--loop::after { translate: calc(var(--c) * -0.35 * (1 - cos(var(--gd-spin)))) 0; scale: calc(1 - 0.08 * sin(var(--gd-spin))); }
@media (prefers-reduced-motion: no-preference) {
	.gd-circles--loop { animation: gd-spin 6s linear infinite; }
}
@keyframes gd-spin { to { --gd-spin: 360deg; } }
.gd-circles--by::before { background: var(--blue); } .gd-circles--by::after { background: var(--yellow); }
.gd-circles--yg::before { background: var(--yellow); } .gd-circles--yg::after { background: var(--green); }
.gd-circles--gb::before { background: var(--green); } .gd-circles--gb::after { background: var(--blue); }
.gd-feature__title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }

/* ---- Logo loop ---- */
.gd-logos { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.gd-logos__track { display: flex; width: max-content; animation: gd-logos 60s linear infinite; }
.gd-logos.is-driven .gd-logos__track { animation: none; will-change: transform; }
.gd-logos__set { display: flex; align-items: center; gap: var(--s-7); padding-right: var(--s-7); margin: 0; list-style: none; }
.gd-logos__set img { width: auto; height: calc(3.25rem * var(--logo-s, 1)); max-width: none; object-fit: contain; }
.gd-logos__set a { display: block; }
@media (hover: none), (max-width: 991px) { .gd-logos { -webkit-mask-image: none; mask-image: none; } }
@keyframes gd-logos { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.gd-logos { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.gd-logos__set[aria-hidden="true"] { display: none; }
}

/* ---- Case study cards ---- */
.gd-cases { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: start; width: 100%; }
.gd-cases__intro { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; position: sticky; top: calc(var(--header-h) + 2rem); }
.gd-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gd-card-list { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; }
.gd-card { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-4); padding: var(--s-3); background: var(--light-white); border-radius: var(--r-card); }
.gd-card[hidden] { display: none; }
.gd-card__media { position: relative; display: block; min-height: 10rem; }
.gd-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-control); position: absolute; inset: 0; }
/* A small label chip. The same chip sits on case study cards and on the programme cards. */
.gd-card__tag, .gd-tag { padding: 0.25rem 0.625rem; border-radius: 0.5rem; background: var(--white); color: var(--black); font-size: 0.875rem; font-weight: 700; line-height: 1.3; }
.gd-tag--grey { background: var(--light-white); }
.gd-card__tag { position: absolute; left: 0.5rem; bottom: 0.5rem; z-index: 1; }
.gd-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding-block: var(--s-1); }
.gd-card__title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.gd-card__title a { color: var(--black); }
.gd-card__title a::after { content: ''; position: absolute; inset: 0; }
.gd-card:hover .gd-card__title a { color: var(--blue); }
.gd-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); width: 100%; }
.gd-seemore { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--light-white); border-radius: var(--r-card); font-weight: 700; }
@media (max-width: 991px) {
	.gd-cases { grid-template-columns: minmax(0, 1fr); }
	.gd-cases__intro { position: static; }
	.gd-card-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
	.gd-card { grid-template-columns: minmax(0, 1fr); }
	.gd-card__media { aspect-ratio: 16 / 9; min-height: 0; }
}

/* ---- On stage mosaic ---- */
.gd-stage { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-4); width: 100%; }
.gd-stage__main { position: relative; }
.gd-stage__main .gd-photo { height: 100%; }
.gd-stage__main .gd-photo img { aspect-ratio: 16 / 10; }
.gd-stage__caption { position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 2; padding: 0.375rem 0.75rem; border-radius: 0.5rem; background: var(--white); font-size: 0.875rem; font-weight: 700; line-height: 1.3; }
.gd-stage__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-content: stretch; }
.gd-stage__side img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); }
.gd-stage__wide { grid-column: 1 / -1; aspect-ratio: 5 / 2; }
.gd-stage__small { aspect-ratio: 1 / 1; }
@media (max-width: 767px) { .gd-stage { grid-template-columns: minmax(0, 1fr); } }

/* ---- Book ---- */
.gd-book { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-6); align-items: center; width: 100%; }
.gd-book img { width: 100%; height: auto; border-radius: var(--r-panel); }
@media (max-width: 767px) { .gd-book { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } }

/* ---- Dark panel ---- */
.gd-dark { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: var(--s-7) clamp(1.5rem, 5vw, 4.5rem); border-radius: var(--r-panel); background: var(--black); color: var(--white); width: 100%; }
.gd-dark > * { position: relative; z-index: 1; }
.gd-dark::before { content: ''; position: absolute; top: -3.5rem; right: 3rem; width: 8rem; height: 8rem; border-radius: 50%; background: var(--yellow); }
.gd-dark::after { content: ''; position: absolute; bottom: -3.5rem; left: 40%; width: 7rem; height: 7rem; border-radius: 50%; background: var(--blue); }
.gd-dark h2 { max-width: 40rem; }
.gd-dark p { max-width: 46rem; }
.gd-dark__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-card); background: var(--dark-gray); }
.gd-dark__card .gd-panel__title { color: var(--white); }

/* ---- Forms ---- */
.gd-form-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: start; width: 100%; }
.gd-form { display: flex; flex-direction: column; gap: var(--s-4); width: 100%; padding: var(--s-5); box-sizing: border-box; border-radius: var(--r-panel); background: var(--white); }
.gd-form > div:last-child .gd-btn { width: 100%; }
/* A grey page behind a form, as on Big Bloom's contact page, running up behind the floating header. */
.gd-section--grey { background: var(--light-white); }
/* A page's banner: grey to the screen's edges, words beside a framed photo. */
.gd-section--banner { padding-bottom: var(--s-7); }
.gd-pagehead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; width: 100%; }
.gd-pagehead .gd-cs__lede { max-width: 38rem; }
.gd-pagehead__photo { aspect-ratio: 5 / 4; margin-right: 0.75rem; margin-bottom: 0.75rem; }
.gd-pagehead__photo img { border-color: var(--light-white); }
@media (max-width: 767px) { .gd-pagehead { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }
.gd-section--page { margin-top: calc((var(--header-h) + 1rem) * -1); padding-top: calc(var(--header-h) + 1rem + var(--s-7)); padding-bottom: var(--section); }
.gd-field { display: flex; flex-direction: column; gap: var(--s-1); align-self: stretch; }
.gd-field label, .gd-field legend { padding: 0; font-weight: 700; line-height: 1.3; }
.gd-field input, .gd-field textarea { width: 100%; box-sizing: border-box; min-height: 2.8125rem; padding: 0.75rem 1rem; border: 0; border-radius: var(--r-control); background: var(--light-white); color: var(--black); font: inherit; font-size: 1rem; }
.gd-field textarea { min-height: 9rem; resize: vertical; }
.gd-field fieldset { margin: 0; padding: 0; border: 0; }
.gd-field legend { margin-bottom: 0.75rem; }
.gd-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.gd-choices--stack { grid-template-columns: minmax(0, 1fr); }
.gd-choice { position: relative; display: block; }
.gd-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; min-height: 0; }
.gd-choice span { display: flex; align-items: center; justify-content: center; min-height: 2.8125rem; padding: 0.75rem; border-radius: var(--r-control); background: var(--secondary-bg); color: var(--blue); font-weight: 700; line-height: 1.3; text-align: center; transition: background-color var(--ease), color var(--ease); }
.gd-choice:hover span { background: var(--secondary-hover); color: var(--blue-hover); }
.gd-choice:active span { background: var(--secondary-active); }
.gd-choice input:checked + span { background: var(--blue); color: var(--white); }
.gd-choice:hover input:checked + span { background: var(--blue-hover); color: var(--white); }
.gd-choice input:focus-visible + span { outline: 0.1875rem solid var(--blue); outline-offset: 0.1875rem; }
.gd-check { display: flex; align-items: flex-start; gap: var(--s-1); font-size: 0.875rem; }
.gd-check input { width: 1.125rem; height: 1.125rem; min-height: 0; margin: 0; flex: none; accent-color: var(--blue); }
.gd-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gd-form__error { padding: var(--s-2) var(--s-3); border-radius: var(--r-control); background: #fde8e8; color: #8f1d1d; font-weight: 500; }
.gd-sent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-panel); background: var(--white); }
.gd-steps { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: 0; list-style: none; counter-reset: gd-step; }
.gd-steps li { display: flex; align-items: center; gap: var(--s-2); counter-increment: gd-step; }
/* Big Bloom's dot colours, as in the mockup. Numbers are large enough for white on green to pass (3.7:1 at 19px bold). */
.gd-steps li::before { content: counter(gd-step); flex: none; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--blue); color: var(--white); font-size: max(1.2rem, 19px); font-weight: 800; line-height: 1; }
.gd-steps li:nth-child(3n + 2)::before { background: var(--yellow); color: var(--black); }
.gd-steps li:nth-child(3n)::before { background: var(--green); color: var(--white); }

.gd-person { display: flex; flex-direction: row; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-3) var(--s-4); box-sizing: border-box; border-radius: var(--r-card); background: var(--white); }
.gd-person img { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; object-position: 62% 8%; }
.gd-person__name { font-weight: 700; line-height: 1.3; }
@media (max-width: 767px) { .gd-form-page { grid-template-columns: minmax(0, 1fr); } .gd-choices { grid-template-columns: minmax(0, 1fr); } }

/* ---- Pricing ---- */
/* Things that belong together sit close, and each group has clear air around it: cards 1rem apart,
   a heading 1.5rem above its cards, a full section's space between groups. */
.gd-section--groups .gd-container { gap: var(--section); }
.gd-group { display: flex; flex-direction: column; gap: var(--s-4); width: 100%; }
.gd-group .gd-grid { gap: var(--s-3); }
.gd-group__head { display: flex; flex-direction: column; gap: var(--s-2); }
.gd-group > p, .gd-group__head > p { max-width: 44rem; }
.gd-group > .gd-grid + p { margin-top: calc(var(--s-1) * -1); }
.gd-group--notes { gap: var(--s-2); }
/* Programme cards: the title a step up from other panel titles, with the chip in the top right corner beside it,
   and the button lined up along the bottom of each row. On phones the chip takes its own line above
   the title, still on the right, so long titles keep the full width. */
.gd-programme { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr; column-gap: var(--s-3); align-items: start; }
.gd-programme > * { grid-column: 1 / -1; }
.gd-programme > .gd-tag { grid-column: 2; grid-row: 1; justify-self: end; white-space: nowrap; }
.gd-programme > .gd-panel__title { grid-column: 1; grid-row: 1; align-self: center; font-size: 1.5rem; }
.gd-programme > .gd-btn { justify-self: start; align-self: end; }
@media (max-width: 767px) {
	.gd-programme { grid-template-rows: auto auto auto auto 1fr; }
	.gd-programme > .gd-panel__title { grid-column: 1 / -1; grid-row: 2; margin-top: calc(var(--s-1) * -1); }
}
.gd-price { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-card); background: var(--light-white); }
.gd-price__name { font-weight: 700; line-height: 1.3; }
.gd-price__value { font-size: var(--h3); font-weight: 800; line-height: 1.2; color: var(--blue); }
.gd-list { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding-left: 1.25rem; }

/* ---- Case study page ---- */
.gd-cs { display: flex; flex-direction: column; gap: var(--s-7); width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--s-5) var(--gutter) var(--section); box-sizing: content-box; max-width: min(var(--container), 90vw); }
.gd-crumbs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--text-soft); }
.gd-crumbs li + li::before { content: '/'; margin-right: 0.375rem; }
.gd-crumbs a { color: var(--text-soft); } .gd-crumbs a:hover { color: var(--blue); }
.gd-cs__head { display: flex; flex-direction: column; gap: var(--s-3); max-width: 60rem; }
.gd-cs__kicker { font-weight: 700; color: var(--blue); line-height: 1.3; }
.gd-cs__kicker a { color: var(--blue); } .gd-cs__kicker a:hover { color: var(--blue-hover); }
.gd-cs__lede { font-size: 1.2rem; }
.gd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s-3); margin: 0; padding: var(--s-4); border-radius: var(--r-card); background: var(--light-white); }
.gd-facts dt { font-size: 0.875rem; color: var(--text-soft); line-height: 1.3; }
.gd-facts dd { margin: 0.25rem 0 0; font-weight: 700; line-height: 1.3; }
.gd-cs__hero img, .gd-cs__wide img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r-panel); }
.gd-cs-text { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-5); align-items: start; }
.gd-cs-text__body { display: flex; flex-direction: column; gap: var(--s-3); }
.gd-cs-text__body ul { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding-left: 1.25rem; }
.gd-cs-high { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-panel); background: var(--secondary-bg); }
.gd-cs-high__label { font-weight: 700; color: var(--blue); line-height: 1.3; }
.gd-cs-high__text { font-size: var(--h3); font-weight: 800; line-height: 1.2; }
.gd-cs-photos { display: grid; gap: var(--s-3); }
.gd-cs-photos--1 { grid-template-columns: minmax(0, 1fr); }
.gd-cs-photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-cs-photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd-cs-photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
.gd-cs-photos--1 img { aspect-ratio: 5 / 2; border-radius: var(--r-panel); }
.gd-cs-block { display: flex; flex-direction: column; gap: var(--s-4); }
.gd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.gd-stat { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-card); background: var(--light-white); }
.gd-stat__value { font-size: var(--h2); font-weight: 800; line-height: 1.2; color: var(--blue); }
.gd-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.gd-quotes--1 { grid-template-columns: minmax(0, 1fr); }
.gd-quote { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: var(--s-5); border: 0; border-radius: var(--r-card); background: var(--light-white); font-family: inherit; font-style: normal; }
.gd-quote p, .gd-quote footer, .gd-quote cite { font-family: 'Red Hat Display', Arial, sans-serif; letter-spacing: normal; text-transform: none; }
.gd-quote::before { content: '\201C'; height: 2rem; font-size: 4rem; font-weight: 800; line-height: 1; color: var(--blue); }
.gd-quote p { font-size: 1.2rem; font-weight: 700; }
.gd-quote footer { font-size: 0.875rem; line-height: 1.3; color: var(--text-soft); }
.gd-quote cite { display: block; font-style: normal; font-weight: 700; color: var(--black); }
.gd-cs__credit { font-size: 0.875rem; color: var(--text-soft); font-style: italic; }
@media (max-width: 767px) {
	.gd-cs-text, .gd-quotes { grid-template-columns: minmax(0, 1fr); }
	.gd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gd-cs-photos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gd-cs-photos--3 > :first-child { grid-column: 1 / -1; }
}

/* ---- Footer ---- */
.gd-footer { padding: var(--s-7) var(--gutter) var(--s-5); background: var(--white); border-top: 0.0625rem solid var(--gray); }
.gd-footer__inner { display: flex; flex-direction: column; gap: var(--s-5); max-width: var(--container); margin-inline: auto; }
.gd-footer__top { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.gd-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.gd-footer__brand img { width: 6.5rem; height: auto; }
.gd-footer__brand p { color: var(--text-soft); }
.gd-footer__cta { display: flex; flex-direction: column; gap: var(--s-2); width: min(100%, 20rem); margin-top: var(--s-1); }
.gd-footer__cta .gd-btn { width: 100%; }
.gd-footer h2 { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--blue); }
.gd-footer ul { display: flex; flex-direction: column; gap: var(--s-1); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.gd-footer li a { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--black); line-height: 1.3; transition: color var(--ease); }
.gd-footer li a svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--blue); fill: var(--blue); }
.gd-footer li a:hover { color: var(--blue); }
.gd-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: 0.875rem; color: var(--text-soft); }
.gd-footer__legal a { color: var(--text-soft); } .gd-footer__legal a:hover { color: var(--blue); }
@media (max-width: 767px) { .gd-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-footer__brand { grid-column: 1 / -1; } }

@media (max-width: 767px) { .gd-hide-phone { display: none !important; } }

.gd-h3 { font-size: var(--h3); font-weight: 800; line-height: 1.2; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }

.gd-hack { align-items: flex-start; }
.gd-hack__head, .gd-hack__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); width: 100%; }
.gd-hack__body { flex: 1; gap: var(--s-3); }
.gd-hack__body p { max-width: 36rem; }
.gd-hack__body .gd-btn { margin-top: auto; }
.gd-hack__title { font-size: var(--h3); font-weight: 800; line-height: 1.2; }
@media (min-width: 992px) {
	.gd-hack--wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-7); align-items: start; }
}
/* Two or more hackathons: as many cards as fit, the rest a swipe or an arrow away. */
.gd-hacks { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; min-width: 0; }
.gd-hacks__track { --per: 2; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * var(--s-4)) / var(--per)); gap: var(--s-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gd-hacks__track::-webkit-scrollbar { display: none; }
.gd-hacks__track > * { scroll-snap-align: start; }
.gd-hacks--side .gd-hacks__track { --per: 1; }
.gd-hacks__bar { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
.gd-hacks__bar[hidden] { display: none; }
.gd-hacks__bar .gd-vm__page:disabled { opacity: 0.4; cursor: default; }
.gd-hacks__bar .gd-vm__pagenum { min-width: 4rem; }
@media (max-width: 991px) {
	.gd-hacks__track { grid-auto-columns: 88%; gap: var(--s-3); }
}
.gd-stage__side img.gd-stage__wide { aspect-ratio: 5 / 2; height: auto; }
.gd-stage__side img.gd-stage__small { aspect-ratio: 1 / 1; height: auto; }
.gd-section--tight { padding-block: calc(var(--section) * 0.5); }

.gd-dark .gd-small { color: #c9cdd6; }
.gd-sent[hidden], .gd-form[hidden], .gd-form__error[hidden] { display: none; }

.gd-field label, .gd-field legend, .gd-check, .gd-check span { color: var(--black); }

/* ---- Newsletter band ---- */
.gd-news { position: relative; overflow: hidden; margin: var(--s-5) calc(var(--gutter) * -1) calc(var(--s-5) * -1); padding: var(--s-6) var(--gutter); background: var(--black); color: var(--white); }
.gd-news::before { content: ''; position: absolute; top: -3.5rem; right: 8%; width: 7rem; height: 7rem; border-radius: 50%; background: var(--yellow); }
.gd-news::after { content: ''; position: absolute; bottom: -3rem; left: 22%; width: 6rem; height: 6rem; border-radius: 50%; background: var(--blue); }
.gd-news__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-4); align-items: center; max-width: var(--container); margin-inline: auto; }
.gd-news h2 { color: var(--white); font-size: var(--h3); font-weight: 800; line-height: 1.2; }
.gd-news__note { margin-top: var(--s-1); color: #c9cdd6; font-size: 0.875rem; }
.gd-news__note a { color: var(--white); text-decoration: underline; }
.gd-news__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--s-2); align-items: end; }
.gd-news .gd-field label { color: var(--white); font-size: 0.875rem; }
.gd-news .gd-field input { background: var(--white); }
.gd-news__done { grid-column: 1 / -1; }
/* On the dark band the message is a plain line under the fields, and the fields at fault are marked. */
.gd-news .gd-form__error { grid-column: 1 / -1; order: 1; padding: 0; border-radius: 0; background: none; color: #ffb4ab; font-size: 0.875rem; font-weight: 700; }
.gd-news__form.is-checked input:invalid { outline: 0.125rem solid #ffb4ab; outline-offset: 0.125rem; }
.gd-news__done { font-weight: 700; }
.gd-news__done[hidden], .gd-news__form[hidden], .gd-news .gd-form__error[hidden] { display: none; }
@media (max-width: 991px) { .gd-news__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559px) { .gd-news__form { grid-template-columns: minmax(0, 1fr); } .gd-news__form .gd-btn { width: 100%; } }
.gd-hack__meta { font-weight: 700; line-height: 1.3; color: var(--blue); }

@media (max-width: 767px) { .gd-dark::before { top: -2.5rem; right: 1rem; width: 5rem; height: 5rem; } }

/* ---- Gallery ---- */
.gd-gal { display: flex; flex-direction: column; gap: var(--s-5); width: 100%; }
/* Every photo's edge lines up. The main photo's white ring and colour block sit outside it, and
   the side column takes its height from the main photo. */
.gd-gal .gd-stage { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: stretch; padding: 0 0 1.75rem 1.75rem; box-sizing: border-box; }
.gd-gal .gd-stage__main { position: relative; display: block; height: auto; }
.gd-gal .gd-stage__main::before { inset: 0; border-radius: calc(var(--r-panel) + 0.5rem); background: var(--green); transform: translate(-1.25rem, 1.25rem); }
.gd-gal .gd-stage__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-content: stretch; }
.gd-gal__slot { position: relative; overflow: hidden; min-height: 0; border-radius: var(--r-card); background: var(--light-white); }
.gd-gal__slot--main { z-index: 1; width: 100%; aspect-ratio: 16 / 10; height: auto; border-radius: var(--r-panel); box-shadow: 0 0 0 0.5rem var(--white); }
.gd-gal .gd-stage__side .gd-stage__wide { grid-column: 1 / -1; aspect-ratio: auto; }
.gd-gal .gd-stage__side .gd-stage__small { aspect-ratio: auto; }
.gd-gal__hit { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.gd-gal__hit:focus-visible { outline-offset: -0.5rem; outline-color: var(--white); }
.gd-gal__img, .gd-gal .gd-photo img.gd-gal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; border: 0; border-radius: 0; transition: opacity 0.6s ease, transform 0.4s ease; }
.gd-gal__img.is-on, .gd-gal .gd-photo img.gd-gal__img.is-on { opacity: 1; }
.gd-gal__play { position: absolute; top: 50%; left: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; margin: -2.25rem 0 0 -2.25rem; border-radius: 50%; background: var(--blue); color: var(--white); transition: background-color var(--ease); }
.gd-gal__play[hidden] { display: none; }
.gd-gal__play svg { width: 2.25rem; height: 2.25rem; fill: currentColor; }
.gd-gal__hit:hover .gd-gal__play { background: var(--dark-blue); }
.gd-stage__side .gd-gal__play { width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; }
.gd-stage__side .gd-gal__play svg { width: 1.5rem; height: 1.5rem; }
.gd-gal__info { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); pointer-events: none; }
.gd-gal__info > * { pointer-events: auto; }
.gd-gal__info .gd-stage__caption { position: static; }
.gd-gal__info .gd-stage__caption[hidden], .gd-gal__case[hidden] { display: none; }
@media (max-width: 767px) {
	.gd-gal .gd-stage { grid-template-columns: minmax(0, 1fr); padding: 0 0 1.25rem 0.75rem; gap: 1.25rem; }
	.gd-gal .gd-stage__main::before { transform: translate(-0.75rem, 0.75rem); }
	.gd-gal__slot--main { box-shadow: 0 0 0 0.25rem var(--white); }
	.gd-gal .gd-stage__side { gap: 0.75rem; }
	.gd-gal .gd-stage__side .gd-stage__wide { aspect-ratio: 5 / 2; }
	.gd-gal .gd-stage__side .gd-stage__small { aspect-ratio: 1 / 1; }
	.gd-gal__play { width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; }
	.gd-gal__info { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }
}

/* ---- Player ---- */
html.gd-vm-open { overflow: hidden; }
.gd-vm { --vm-stage: min(calc((100svh - 15rem) * 16 / 9), calc(100vw - 30rem), 74rem); position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 3vw, 2.5rem); opacity: 0; transition: opacity 0.25s ease; }
.gd-vm[hidden] { display: none; }
.gd-vm.is-in { opacity: 1; }
.gd-vm__back { position: absolute; inset: 0; background: rgba(32, 32, 42, 0.92); }
.gd-vm__box { position: relative; display: grid; grid-template-columns: var(--vm-stage) 19rem; grid-template-rows: auto auto; gap: var(--s-4) 2rem; padding: 2rem; box-sizing: border-box; border-radius: var(--r-panel); background: var(--white); color: var(--black); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35); transform: translateY(0.5rem); transition: transform 0.25s ease; }
.gd-vm.is-in .gd-vm__box { transform: none; }
/* Close sits inside the panel's corner, level with Watch next. */
.gd-vm__close { position: absolute; top: 1.625rem; right: 1.625rem; z-index: 5; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.gd-vm__box:focus { outline: none; }
.gd-vm__close:focus-visible { outline: 0.125rem solid var(--blue); outline-offset: 0.125rem; }
.gd-vm__close svg { width: 1.375rem; height: 1.375rem; fill: currentColor; }
.gd-vm__stage { position: relative; grid-column: 1; grid-row: 1; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-card); background: var(--black); }
.gd-vm__stage iframe, .gd-vm__host { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gd-vm__poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity 0.4s ease; }
.gd-vm__photo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.gd-vm__photo.is-tall { object-fit: contain; }
.gd-vm__photolink { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.gd-vm__photosoft[hidden] { display: none; }
.gd-vm__photosoft { position: absolute; inset: -5%; width: 110%; height: 110%; max-width: none; object-fit: cover; filter: blur(2rem) brightness(0.6); }
.gd-vm__hit { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.gd-vm__info { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.gd-vm__words { flex: 1 1 20rem; min-width: 0; }
.gd-vm__kicker { margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: var(--text-soft); }
.gd-vm__title { color: var(--black); font-size: var(--h3); font-weight: 800; line-height: 1.2; }
.gd-vm__case[hidden] { display: none; }
/* Watch next: exactly as tall as the video, four even rows to a page, no scrolling. */
.gd-vm__rail { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 1rem; height: 0; min-height: 100%; }
.gd-vm__rail[hidden] { display: none; }
.gd-vm__railhead { display: flex; align-items: center; min-height: 1.75rem; padding-right: 3rem; color: var(--black); font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.gd-vm__list { flex: 1; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 0.75rem; min-height: 0; margin: 0; padding: 0; list-style: none; }
.gd-vm__list li { min-height: 0; }
.gd-vm__list li[hidden] { display: none; }
.gd-vm__next { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0.875rem; align-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: var(--black); font: inherit; font-size: 0.875rem; line-height: 1.25; text-align: left; cursor: pointer; transition: color var(--ease); }
.gd-vm__next:hover { color: var(--blue); }
.gd-vm__thumb { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 0.625rem; background: var(--light-white); }
.gd-vm__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gd-vm__next:hover .gd-vm__thumb img { transform: scale(1.03); }
.gd-vm__thumb .gd-gal__play { width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; }
.gd-vm__thumb .gd-gal__play svg { width: 1.125rem; height: 1.125rem; }
.gd-vm__nextbody { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.gd-vm__nexttext { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.gd-vm__now { display: none; font-size: 0.75rem; font-weight: 700; line-height: 1.3; color: var(--blue); }
.is-current .gd-vm__now { display: block; }
.is-current .gd-vm__nexttext { font-weight: 700; }
.is-current .gd-vm__thumb { outline: 0.125rem solid var(--blue); outline-offset: -0.125rem; }
/* Pager: the panel's bottom right corner. */
.gd-vm__pager { display: flex; align-items: center; gap: 0.25rem; margin-left: var(--s-2); }
.gd-vm__pager[hidden] { display: none; }
.gd-vm__page { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.gd-vm__page svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.gd-vm__pagenum { min-width: 3rem; font-size: 0.875rem; line-height: 1.3; color: var(--text-soft); text-align: center; font-variant-numeric: tabular-nums; }
.gd-vm__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; background: var(--black); }

.gd-vm__controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: var(--s-1); padding: 2.5rem 0.75rem 0.5rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); transition: opacity 0.25s ease; }
.gd-vm__stage.is-idle:not(.is-paused) .gd-vm__controls { opacity: 0; }
.gd-vm__stage.is-idle:not(.is-paused) .gd-vm__hit { cursor: none; }
.gd-vm__ctl { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; transition: background-color var(--ease); }
.gd-vm__ctl:hover { background: rgba(255, 255, 255, 0.18); }
.gd-vm__ctl svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.gd-vm__ctl.is-on { background: var(--white); color: var(--black); }
.gd-vm__timeline { position: relative; flex: 1; min-width: 4rem; height: 1.25rem; cursor: pointer; }
.gd-vm__timeline::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 0.25rem; margin-top: -0.125rem; border-radius: 0.125rem; background: rgba(255, 255, 255, 0.28); }
.gd-vm__buffer, .gd-vm__fill { position: absolute; left: 0; top: 50%; width: 0; height: 0.25rem; margin-top: -0.125rem; border-radius: 0.125rem; pointer-events: none; }
.gd-vm__buffer { background: rgba(255, 255, 255, 0.4); }
.gd-vm__fill { background: var(--blue); }
.gd-vm__handle { position: absolute; top: 50%; left: 0; width: 0.75rem; height: 0.75rem; margin: -0.375rem 0 0 -0.375rem; border-radius: 50%; background: var(--white); opacity: 0; pointer-events: none; transition: opacity var(--ease); }
.gd-vm__timeline:hover .gd-vm__handle, .gd-vm__timeline:focus-visible .gd-vm__handle { opacity: 1; }
.gd-vm__time { flex: none; min-width: 5.5rem; color: var(--white); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.gd-vm__vol { display: flex; align-items: center; flex: none; }
.gd-vm__vol input { width: 0; opacity: 0; accent-color: var(--white); cursor: pointer; transition: width 0.2s ease, opacity 0.2s ease; }
.gd-vm__vol:hover input, .gd-vm__vol:focus-within input { width: 5rem; opacity: 1; }
.gd-vm__stage:fullscreen { border-radius: 0; }

/* Photos: a thin edge grows along the bottom while the photo stays up. */
.gd-vm__grow { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 0.25rem; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 0ms linear; }
.gd-vm__dwellbar { display: block; height: 0.25rem; overflow: hidden; border-radius: 0.125rem; background: rgba(255, 255, 255, 0.28); }
.gd-vm__dwellbar span { display: block; width: 0; height: 100%; background: var(--white); transition: width 0ms linear; }
/* Ken Burns: a slow, steady push in, from a different point each time. */
.gd-kb { animation: gd-kb var(--kb-time, 7s) linear both; }
.gd-kb--0 { transform-origin: 50% 50%; }
.gd-kb--1 { transform-origin: 20% 30%; }
.gd-kb--2 { transform-origin: 80% 30%; }
.gd-kb--3 { transform-origin: 50% 75%; }
.gd-gal.is-held .gd-kb { animation-play-state: paused; }
@keyframes gd-kb { from { transform: scale(1); } to { transform: scale(1.07); } }
.gd-vm__upnext { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-4); background: rgba(32, 32, 42, 0.88); color: var(--white); text-align: center; }
.gd-vm__uplabel { font-size: 0.875rem; color: #c9cdd6; }
.gd-vm__uptitle { max-width: 36rem; font-size: var(--h3); font-weight: 800; line-height: 1.2; }
.gd-vm__upnext .gd-vm__dwellbar { flex: none; width: min(20rem, 70%); }
.gd-vm__upnext .gd-row { justify-content: center; }

@media (max-width: 1099px) {
	.gd-vm { align-items: flex-start; overflow-y: auto; }
	/* Narrow: close in its own clear row, the title directly under the film, Watch next running off the panel's edge. */
	.gd-vm__box { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; width: 100%; max-height: calc(100dvh - 1.5rem); gap: var(--s-4); padding: 4.25rem 1.5rem 1.75rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gray) transparent; }
	.gd-vm__info { order: 1; }
	.gd-vm__rail { order: 2; }
	.gd-vm__stage, .gd-vm__info, .gd-vm__rail { grid-column: 1; grid-row: auto; }
	.gd-vm__close { top: 1rem; right: 1rem; }
	.gd-vm__rail { height: auto; min-height: 0; }
	.gd-vm__pager { display: none; }
	/* Phones and small tablets swipe through everything instead of paging. */
	.gd-vm__list { display: flex; overflow-x: auto; gap: 0.75rem; padding: 0.25rem 1.5rem 0.5rem; margin-inline: -1.5rem; scroll-padding-inline: 1.5rem; scroll-snap-type: x proximity; scrollbar-width: none; }
	.gd-vm__list::-webkit-scrollbar { display: none; }
	.gd-vm__list li, .gd-vm__list li[hidden] { display: block; flex: 0 0 10rem; scroll-snap-align: start; }
	.gd-vm__next { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; align-items: start; gap: 0.5rem; }
	.gd-vm__thumb { height: auto; aspect-ratio: 16 / 9; }
}

/* ---- Book order ---- */
.gd-dialog { width: min(36rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; border: 0; border-radius: var(--r-panel); background: var(--white); color: var(--black); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35); }
.gd-dialog::backdrop { background: rgba(32, 32, 42, 0.92); }
.gd-dialog[open] { display: flex; overflow: hidden; animation: gd-dialog-in 0.25s ease both; }
@keyframes gd-dialog-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
/* Only the inside scrolls, inset from the rounded corners, with a slim quiet bar; the close button stays put. */
.gd-dialog__in { display: flex; flex: 1; flex-direction: column; gap: var(--s-3); min-height: 0; width: 100%; margin-block: 0.75rem; padding: 1.25rem 2rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gray) transparent; }
.gd-dialog__head { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s-3); align-items: center; padding-right: 2.5rem; }
.gd-dialog__head img { width: 100%; height: auto; object-fit: contain; }
.gd-dialog__close { position: absolute; top: 1.25rem; right: 1.25rem; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.gd-dialog__close svg { width: 1.375rem; height: 1.375rem; fill: currentColor; }
.gd-dialog .gd-form { padding: 0; background: none; border-radius: 0; gap: var(--s-3); }
.gd-dialog .gd-sent { padding: var(--s-4); border-radius: var(--r-card); }
.gd-dialog .gd-field textarea { min-height: 5.5rem; }
.gd-field__opt { font-weight: 400; color: var(--text-soft); }
@media (max-height: 760px) { .gd-dialog__head { grid-template-columns: 4.5rem minmax(0, 1fr); } }
@media (max-width: 559px) { .gd-dialog__in { padding: 0.5rem 1.25rem; } .gd-dialog__head { grid-template-columns: 6rem minmax(0, 1fr); } }

/* ---- 404: a calm way onward, nothing about errors ---- */
.gd-404 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); min-height: 62svh; text-align: center; }
.gd-404 .gd-tag + h1 { margin-top: calc(var(--s-1) * -1); }
.gd-404 > .gd-btn { margin-top: var(--s-6); } /* the main way onward sits last, with clear air above */
.gd-404__links { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); width: auto; }