/* =========================================================================
   Section styling for the Elementor-authored pages.
   Every rule is scoped to a CSS class set on the Elementor element, so the
   layout stays editable in the builder while the visual detail lives here.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero — Figma 655:646
   ---------------------------------------------------------------------- */
.anb-hero { position: relative; overflow: hidden; }

/* Cloud band that closes the hero, repeated on the contact section. */
.anb-hero::after,
.anb-contact::before {
	content: "";
	position: absolute;
	left: -4%; right: -4%;
	height: 140px;
	background: var(--anb-clouds, none) no-repeat center bottom / 100% auto;
	pointer-events: none;
	z-index: 2;
}
.anb-hero::after { bottom: -1px; }
.anb-contact::before { top: -1px; transform: scaleY(-1); }

.anb-hero__pill { display: block; margin-bottom: 14px; }

.anb-hero__title .elementor-heading-title { line-height: 1.15; }

.anb-hero__lead .elementor-widget-container { max-width: 542px; }

.anb-hero__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.anb-watch {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 0 0 0 4px;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--anb-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 27px;
	color: var(--anb-black);
	position: relative;
}
.anb-watch__ring { width: 52px; height: 52px; transition: transform .25s var(--anb-ease); }
.anb-watch__play {
	position: absolute;
	left: 18px; top: 50%;
	width: 24px; height: 24px;
	transform: translateY(-50%);
	pointer-events: none;
}
.anb-watch:hover .anb-watch__ring { transform: scale(1.08); }

/* -------------------------------------------------------------------------
   Hero composition — Figma 655:646, redesigned Sep 2026

   One full-bleed photograph with a dark scrim over the left half and white
   text on top. The previous split layout (text left, masked photo in a ring
   blob right) is gone, along with its pre-masked photo export.

   The scrim is CSS, not baked into the image: Figma applies it as a fill on
   the image node, so exporting that node burns the gradient in at a fixed
   1440 width. A phone crops the photo differently and would put the headline
   over a bright patch, so the scrim has to be able to change with the
   viewport. Values measured off the Figma export, not guessed --
   rgb(2,48,74) at 0.92 -> 0.54 at half width -> 0, a linear fit with about
   6/255 residual across the full span.
   ---------------------------------------------------------------------- */
.anb-hero {
	/* Figma's 655:646 frame is 937 tall but the first 94px of it are the
	   header, which the theme renders separately above this section. The
	   section itself is therefore 843 tall at 1440 wide -- 58.54vw. Using the
	   full 937 here made the section 94px too tall and pushed every piece of
	   positioned art down by that much. */
	--anb-hero-h: 843;
	min-height: min(58.54vw, 843px);
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.anb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(2, 48, 74, .92) 0%,
		rgba(2, 48, 74, .54) 50%,
		rgba(2, 48, 74, 0)  100%
	);
	pointer-events: none;
	z-index: 1;
}

/* The art layer must resolve against the SECTION, so every Elementor wrapper
   between the two has to be unpositioned. Missing the widget and its
   container is not a small error: the art then anchors to the little HTML
   widget that holds it, sitting just under the button, and all three pieces
   collapse into that corner instead of spreading across the hero. */
.anb-hero > .elementor-container,
.anb-hero__col,
.anb-hero__col > .elementor-widget-wrap,
.anb-hero__col .elementor-widget,
.anb-hero__col .elementor-widget-container { position: static; }

/* The art layer fills the section exactly, so a percentage here is a
   percentage of the section -- not of some assumed aspect ratio that stops
   matching the moment the section's height is driven by its content. */
.anb-hero__art {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}
.anb-hero__art img { position: absolute; display: block; max-width: none; }

/* Percentages of the section box, converted from the Figma render by
   subtracting the 94px header: y_section = (y_figma - 94) / 843.
   The top cluster starts above the section edge and is clipped by the
   section's overflow, exactly as it is clipped by the frame in Figma. */
.anb-hero__deco--top    { left: 82.0%; top: -3.1%; width: 15.3%; }
.anb-hero__deco--bottom { left: 75.3%; top: 71.2%; width: 14.6%; }
.anb-hero__plane        { left: 61.7%; top: 71.4%; width: 25.7%; }

/* Text sits above both the scrim and the art. These need to beat the blanket
   `position: static` above, so they carry the column class too -- otherwise
   the more specific static rule wins and the z-index does nothing. */
.anb-hero__col .anb-hero__pill,
.anb-hero__col .anb-hero__title,
.anb-hero__col .anb-hero__lead,
.anb-hero__col .anb-hero__cta { position: relative; z-index: 3; }

/* White type on a photograph: a soft shadow keeps it legible where the scrim
   is lightest, which is what allows the scrim to stay this transparent. */
.anb-hero__title .elementor-heading-title,
.anb-hero__lead {
	text-shadow: 0 1px 3px rgba(0, 20, 33, .45), 0 4px 26px rgba(0, 20, 33, .35);
}

/* The pill was a solid blue chip on a pale field; on the photo it needs its
   own contrast rather than relying on the background behind it. */
.anb-pill--onphoto {
	background: var(--anb-blue);
	color: #fff;
	border: 0;
}

@media (max-width: 1024px) {
	.anb-hero { min-height: min(120vw, 760px); }
	/* The plane's dashed trail runs across the middle of the composition and
	   collides with the headline once the text column goes full width. */
	.anb-hero__plane { display: none; }
	.anb-hero__deco--top    { left: 74%; top: 4%;  width: 22%; }
	.anb-hero__deco--bottom { left: 70%; top: 76%; width: 22%; }
}

@media (max-width: 600px) {
	/* Portrait crop puts the headline over a brighter part of the picture, so
	   the scrim becomes a vertical wash and carries more weight. */
	.anb-hero::before {
		background: linear-gradient(
			180deg,
			rgba(2, 48, 74, .78) 0%,
			rgba(2, 48, 74, .70) 55%,
			rgba(2, 48, 74, .55) 100%
		);
	}
	.anb-hero__deco--top    { left: 68%; top: 3%;  width: 30%; opacity: .85; }
	.anb-hero__deco--bottom { display: none; }
}

/* Elementor rows carry their gutter as padding inside each column, which both
   steals 24px from the row's outer edges and makes a card's real width depend
   on the gutter. Replace that model with a plain flex gap so cards land on
   their exact Figma widths (4 x 267 + 3 x 24 = 1140).
   The extra .elementor-section out-specifies
   `.elementor-section.elementor-section-boxed > .elementor-container`. */
.elementor-section.anb-grid > .elementor-container {
	flex-wrap: wrap;   /* Elementor rows are nowrap: a 2x2 grid would go 1x4 */
	gap: 24px;
}
.elementor-section.anb-grid > .elementor-container > .elementor-column {
	flex: 1 1 0;
	width: auto;
}
.elementor-section.anb-grid > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding: 0;
}

/* The outer section must not add a gutter either, or the grid starts 10px in
   from the 1140 container and every card comes out narrow. */
.anb-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding-inline: 0;
}

/* Two-up blocks need an explicit basis, otherwise flex:1 1 0 lays all four
   columns out on one row. */
.elementor-section.anb-grid--2 > .elementor-container > .elementor-column {
	flex: 0 0 calc(50% - 12px);
}

@media (max-width: 1024px) {
	.elementor-section.anb-grid > .elementor-container > .elementor-column {
		flex: 0 0 calc(50% - 12px);
	}
}
@media (max-width: 767px) {
	.elementor-section.anb-grid > .elementor-container > .elementor-column {
		flex: 0 0 100%;
	}
}

/* -------------------------------------------------------------------------
   About — Figma 655:626
   ---------------------------------------------------------------------- */
.anb-arch-image img {
	width: 382px;
	max-width: 100%;
	height: 475px;
	object-fit: cover;
	border-radius: 300px 300px 43px 43px;
}
@media (max-width: 767px) {
	.anb-arch-image img { height: 380px; border-radius: 220px 220px 32px 32px; }
}

.anb-ticks { list-style: none; margin: 0; padding: 0; }
.anb-ticks li { position: relative; padding-left: 26px; line-height: 30px; }
.anb-ticks li::before {
	content: "✔";
	position: absolute;
	left: 0;
	/* 1.86:1 on white as the brand lime; the text-safe variant keeps the
	   tick legible without changing the palette elsewhere. */
	color: var(--anb-lime-text);
	font-size: 14px;
}

/* -------------------------------------------------------------------------
   Why Parents Trust Us — Figma 655:158
   ---------------------------------------------------------------------- */
.anb-trust-card {
	height: 100%;
	background: #fff;
	border: 1px solid var(--anb-blue-light, #33b9ff);
	border-radius: 10px;
	padding: 53px 32px;
	box-shadow: 10px 20px 30px 5px rgba(0, 0, 0, .03);
	transition: transform .25s var(--anb-ease), box-shadow .25s var(--anb-ease);
}
.anb-trust-card:hover { transform: translateY(-4px); box-shadow: 10px 24px 40px 6px rgba(0, 0, 0, .07); }
.anb-trust-card .elementor-image-box-img { margin-bottom: 14px !important; }
.anb-trust-card .elementor-image-box-img img { width: 48px; height: 48px; object-fit: contain; }
.anb-trust-card .elementor-image-box-title { margin-bottom: 14px; }

.anb-trust .elementor-inner-section .elementor-column { display: flex; }

/* -------------------------------------------------------------------------
   Academic Framework — Figma 655:266
   ---------------------------------------------------------------------- */
.anb-programme {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
	padding: 20px;
	border: 1px solid var(--anb-line);
	border-radius: 15px;
	background: transparent;
	transition: border-color .25s var(--anb-ease), box-shadow .25s var(--anb-ease);
}
.anb-programme:hover { border-color: var(--anb-blue-light, #33b9ff); box-shadow: var(--anb-shadow-sm); }
.anb-programme__media {
	border-radius: 10px;
	overflow: hidden;
	background: var(--anb-line);
	aspect-ratio: 324 / 213;
}
.anb-programme__media img { width: 100%; height: 100%; object-fit: cover; }
.anb-programme__title {
	font-family: var(--anb-font-body);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--anb-black);
	margin: 0;
}
.anb-programme__blurb {
	font-size: 16px;
	line-height: 30px;
	color: var(--anb-muted);
	margin: 0;
	flex: 1 1 auto;
}
.anb-programme__meta {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--anb-muted);
}
.anb-programme__meta b { color: var(--anb-blue-text); font-weight: 700; margin-left: 4px; }

/* -------------------------------------------------------------------------
   Unique Learning Environment — Figma 655:833
   ---------------------------------------------------------------------- */


.anb-stat-card > .elementor-widget-wrap {
	border: 1px solid var(--anb-lime);
	border-radius: 7px;
	padding: 21px;
	min-height: 136px;
	align-content: center;
	justify-content: center;
	text-align: center;
}
.anb-stat.elementor-widget-counter .elementor-counter-number-wrapper,
.anb-stat.elementor-widget-counter .elementor-counter-number,
.anb-stat.elementor-widget-counter .elementor-counter-number-prefix,
.anb-stat.elementor-widget-counter .elementor-counter-number-suffix {
	font-family: var(--anb-font-body);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--anb-black);
}
.anb-stat.elementor-widget-counter .elementor-counter-number-wrapper { justify-content: center; }
.anb-stat.elementor-widget-counter .elementor-counter-title {
	font-family: var(--anb-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	color: var(--anb-black);
	margin-top: 10px;
}

/* Figma caps the stat block at 2 x 267 + 24 and the achievement block at
   2 x 306 + 24; keep those maxima so the cards never stretch to fill. */
.anb-ule .elementor-inner-section > .elementor-container { max-width: 558px; margin-left: auto; }

.anb-achievements .elementor-inner-section > .elementor-container { max-width: 636px; }

/* -------------------------------------------------------------------------
   Achievement & Results — Figma 655:800
   ---------------------------------------------------------------------- */
.anb-achievement {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	padding: 32px 24px;
	background: rgba(249, 249, 249, .98);
	border: 1px solid var(--anb-green-light-alt, #b8e0d9);
	border-radius: 10px;
	transition: transform .25s var(--anb-ease), box-shadow .25s var(--anb-ease);
}
.anb-achievement:hover { transform: translateY(-4px); box-shadow: var(--anb-shadow-sm); }
.anb-achievement__icon { width: 36px; height: 49px; object-fit: contain; }
.anb-achievement__title {
	font-family: var(--anb-font-body);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--anb-black);
	margin: 0;
}
.anb-achievement__body {
	font-size: 16px;
	line-height: 30px;
	color: var(--anb-muted);
	margin: 0;
}
.anb-achievements .elementor-inner-section .elementor-column { display: flex; }

.anb-round-image img {
	width: 382px;
	max-width: 100%;
	height: 524px;
	object-fit: cover;
	border-radius: 300px;
}
@media (max-width: 767px) {
	.anb-round-image img { height: 420px; border-radius: 200px; }
}

/* -------------------------------------------------------------------------
   Testimonials — Figma 655:859
   ---------------------------------------------------------------------- */
.anb-testimonial { position: relative; }

.anb-testimonial__slide { margin: 0; }

.anb-testimonial blockquote {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	margin: 0;
	padding: 62px 78px;
	background: var(--anb-sky-alt, #ebf8ff);
	border-radius: 7px;
}
.anb-testimonial__mark { width: 72px; height: 63px; flex: 0 0 72px; }
.anb-testimonial blockquote p {
	margin: 0;
	font-size: 16px;
	line-height: 30px;
	color: var(--anb-black);
}

.anb-testimonial figcaption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
}
.anb-testimonial__name { font-size: 16px; font-weight: 500; color: var(--anb-black); }
.anb-testimonial__role { font-size: 14px; color: var(--anb-muted); }

.anb-testimonial__nav {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
}
.anb-testimonial__nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--anb-ink);
	cursor: pointer;
	transition: background-color .2s var(--anb-ease), color .2s var(--anb-ease);
}
.anb-testimonial__nav button:hover { background: var(--anb-sky-alt, #ebf8ff); color: var(--anb-blue-text); }
.anb-testimonial__nav[hidden] { display: none; }

@media (max-width: 767px) {
	.anb-testimonial blockquote { flex-direction: column; padding: 32px 24px; gap: 16px; }
	.anb-testimonial__mark { width: 52px; height: 46px; flex: none; }
}

/* -------------------------------------------------------------------------
   Gallery — Figma 655:230
   ---------------------------------------------------------------------- */
.anb-gallery .gallery-item { margin: 0 !important; }
.anb-gallery img {
	width: 100%;
	aspect-ratio: 1 / 1.2;
	object-fit: cover;
	border-radius: 20px;
	transition: transform .3s var(--anb-ease);
}
.anb-gallery img:hover { transform: scale(1.03); }

/* -------------------------------------------------------------------------
   Contact — Figma 655:475
   ---------------------------------------------------------------------- */
.anb-contact { position: relative; overflow: hidden; }

.anb-contact__photo img {
	width: 100%;
	max-width: 459px;
	height: 686px;
	object-fit: cover;
	border-radius: 8px;
}
@media (max-width: 1024px) {
	.anb-contact__photo img { height: 420px; max-width: 100%; }
}

.anb-form { display: grid; gap: 24px; }
.anb-form__row { display: grid; gap: 25px; grid-template-columns: 1fr 1fr; }
.anb-form__field { display: grid; gap: 8px; }
.anb-form__field > label {
	font-size: 16px;
	line-height: 30px;
	color: var(--anb-black);
}
.anb-form input[type="text"],
.anb-form input[type="email"],
.anb-form input[type="tel"],
.anb-form textarea {
	width: 100%;
	padding: 14px;
	font-family: var(--anb-font-body);
	font-size: 14px;
	color: var(--anb-ink);
	background: #fff;
	border: 1px solid var(--anb-line);
	border-radius: 10px;
	transition: border-color .2s var(--anb-ease), box-shadow .2s var(--anb-ease);
}
.anb-form input::placeholder,
.anb-form textarea::placeholder { color: var(--anb-muted); }
.anb-form input:focus,
.anb-form textarea:focus {
	outline: none;
	border-color: var(--anb-blue-text);
	box-shadow: 0 0 0 3px rgba(0, 132, 201, .15);
}
.anb-form textarea { min-height: 107px; resize: vertical; }

.anb-form__hp { position: absolute; left: -9999px; }

.anb-form__status { font-size: 14px; }
.anb-form__status--ok { color: var(--anb-green-dark); }
.anb-form__status--error { color: #b3261e; }

@media (max-width: 640px) {
	.anb-form__row { grid-template-columns: 1fr; }
}

/* =========================================================================
   INNER-PAGE COMPONENTS
   Shared by all 27 inner pages. Figma refs: hero 655:966, alt row 655:1102.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Page hero banner — full-bleed photo, scrim, centred title
   ---------------------------------------------------------------------- */
.anb-page-hero {
	position: relative;
	background-size: cover;
	background-position: center;
}
/* The header sits over this section, so the scrim also guarantees nav
   contrast. It was flat-heavy (.55/.35/.55) and buried the photograph --
   on a dimmer laptop screen the banner read as near-black.

   Now the weight sits where it is actually needed: a band at the top behind
   the navigation, a lighter band at the bottom behind the breadcrumb, and
   the middle -- where the building is -- opened right up. The title keeps
   its own text-shadow, which carries legibility over the lighter middle
   without dimming the whole image to get there. */
.anb-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 32, 51, .50) 0%,
		rgba(0, 32, 51, .26) 28%,
		rgba(0, 32, 51, .16) 52%,
		rgba(0, 32, 51, .40) 100%
	);
	pointer-events: none;
}
.anb-page-hero > .elementor-container { position: relative; z-index: 1; }

.anb-page-hero__title .elementor-heading-title {
	color: var(--anb-white);
	/* Two shadows: a tight one for edge definition against busy detail, and
	   a wide soft one that darkens the area immediately behind the words.
	   This is what lets the scrim above stay light. */
	text-shadow: 0 1px 3px rgba(0, 20, 33, .55), 0 4px 28px rgba(0, 20, 33, .5);
}

.anb-crumb {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: var(--anb-fs-sm);
	color: rgba(255, 255, 255, .85);
}
.anb-crumb a { color: rgba(255, 255, 255, .85); }
.anb-crumb a:hover { color: var(--anb-lime); }
.anb-crumb__sep { opacity: .5; }
.anb-crumb [aria-current] { color: var(--anb-lime); }

/* The header is transparent-over-hero on inner pages only when it has not
   stuck; keeping it solid is simpler and matches Figma's opaque header bar. */

/* -------------------------------------------------------------------------
   Alternating text / image row
   ---------------------------------------------------------------------- */
.anb-altrow .elementor-container { gap: 60px; }
.anb-altrow__text .elementor-widget-wrap { max-width: 560px; }
.anb-altrow__media img {
	width: 100%;
	max-width: 558px;
	aspect-ratio: 558 / 378;
	object-fit: cover;
	border-radius: 16px;
}
@media (max-width: 1024px) {
	.anb-altrow .elementor-container { gap: 32px; }
	.anb-altrow__text .elementor-widget-wrap { max-width: none; }
}

/* -------------------------------------------------------------------------
   Image placeholder — honest stand-in at exact Figma dimensions
   ---------------------------------------------------------------------- */
.anb-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: var(--ph-w, 558px);
	aspect-ratio: var(--ph-ar, 558 / 378);
	border: 2px dashed var(--anb-line);
	border-radius: var(--ph-r, 16px);
	background:
		repeating-linear-gradient(45deg, transparent 0 10px, rgba(0, 132, 201, .04) 10px 20px),
		var(--anb-white-soft);
	color: var(--anb-muted);
	text-align: center;
	padding: 24px;
}
.anb-ph__icon { color: var(--anb-blue-text); opacity: .5; }
.anb-ph__label { font-size: 14px; font-weight: 500; max-width: 30ch; line-height: 1.4; }
.anb-ph__dim { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   Tick list (philosophy points) — Figma 655:1063
   ---------------------------------------------------------------------- */
.anb-ticklist__ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.anb-ticklist__ul li {
	position: relative;
	padding-left: 36px;
	font-size: 16px;
	line-height: 30px;
	color: var(--anb-ink);
}
.anb-ticklist__ul li::before {
	content: "";
	position: absolute;
	left: 0; top: 6px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--anb-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / 13px;
}
@media (max-width: 900px) { .anb-ticklist__ul { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Long-form prose blocks
   ---------------------------------------------------------------------- */
.anb-prose .elementor-widget-container { max-width: 900px; margin-inline: auto; }
.anb-prose ul.anb-ticks { margin: 14px 0; }

/* -------------------------------------------------------------------------
   Contact page — info column, form column, map
   ---------------------------------------------------------------------- */
.anb-contact-split > .elementor-container { align-items: stretch; gap: 48px; }
.anb-contact-split > .elementor-container > .elementor-column { flex: 0 0 auto; }
.anb-contact-info-col { flex: 0 0 364px !important; }
.anb-contact-form-col { flex: 1 1 auto !important; }
@media (max-width: 1024px) {
	.anb-contact-info-col, .anb-contact-form-col { flex: 0 0 100% !important; }
	.anb-contact-split > .elementor-container { gap: 32px; }
}

.anb-info { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.anb-info li { display: flex; gap: 14px; align-items: flex-start; }
.anb-info li img { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 3px; }
.anb-info__k {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--anb-blue-text);
	margin-bottom: 2px;
}
.anb-info a, .anb-info address {
	font-size: var(--anb-fs-sm);
	line-height: 1.6;
	color: var(--anb-muted);
	font-style: normal;
}
.anb-info a:hover { color: var(--anb-blue-text); }

.anb-map iframe { border-radius: var(--anb-radius-lg); display: block; }

/* -------------------------------------------------------------------------
   "Layout pending" block for pages whose Figma build is scheduled
   ---------------------------------------------------------------------- */
.anb-stub {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
	padding: 48px 32px;
	border: 1px dashed var(--anb-line);
	border-radius: var(--anb-radius-lg);
	background: var(--anb-white-soft);
}
.anb-stub__k {
	display: inline-block;
	margin: 0 0 14px;
	padding: 4px 14px;
	border-radius: var(--anb-radius-pill);
	background: var(--anb-sky);
	color: var(--anb-blue-text);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.anb-stub__h {
	font-family: var(--anb-font-display);
	font-size: var(--anb-fs-h3);
	color: var(--anb-black);
	margin: 0 0 12px;
}
.anb-stub__b { font-size: 16px; line-height: 30px; color: var(--anb-muted); margin: 0; }
.anb-stub__n { margin: 18px 0 0; font-size: 12px; color: var(--anb-muted); }
.anb-stub__n code {
	background: var(--anb-white);
	border: 1px solid var(--anb-line);
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 11px;
}


/* -------------------------------------------------------------------------
   Leadership profiles — Figma 655:1425 / 655:1439
   ---------------------------------------------------------------------- */
.anb-profile .elementor-container { gap: 24px; }

/* Figma pins the portrait at 364px; a percentage column lands 7px short once
   the 24px gap is taken out of 1140, so fix the basis instead. */
.anb-profile > .elementor-container > .anb-profile__col-photo {
	flex: 0 0 364px;
	max-width: 364px;
	width: 364px;
}
.anb-profile__photo img {
	width: 364px;
	max-width: 100%;
	height: 363px;
	object-fit: cover;
	border-radius: 232px;
	background: var(--anb-line);
}
.anb-profile__namewrap .elementor-widget-container p,
.anb-profile__name {
	margin: 0;
	font-family: var(--anb-font-body);
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
	color: var(--anb-blue-text);
}
.anb-profile__quote,
.anb-profile__quote p,
.anb-prose-wide.is-italic,
.anb-prose-wide.is-italic p {
	font-style: italic;
	font-weight: 600;
	color: var(--anb-muted);
}
.anb-prose-wide, .anb-prose-wide p { color: var(--anb-muted); }
.anb-profile__body, .anb-profile__body p { color: var(--anb-muted); }

@media (max-width: 1024px) {
	.anb-profile .elementor-container { gap: 32px; }
	.anb-profile > .elementor-container > .anb-profile__col-photo {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		text-align: center;
	}
	.anb-profile__photo img { margin-inline: auto; }
}
@media (max-width: 420px) {
	.anb-profile__photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* -------------------------------------------------------------------------
   Feature rows — Figma 411:562 (48px bordered icon + title + body)
   ---------------------------------------------------------------------- */
.anb-features { display: grid; gap: 50px; margin: 0; padding: 0; list-style: none; }
.anb-feature { display: flex; gap: 14px; align-items: flex-start; }
.anb-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 48px;
	width: 48px; height: 48px;
	border: 1px solid var(--anb-lime);
	border-radius: 10px;
}
.anb-feature__icon img { width: 24px; height: 24px; }
.anb-feature__text { display: flex; flex-direction: column; gap: 6px; }
.anb-feature__text b {
	font-family: var(--anb-font-display);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--anb-black);
}
.anb-feature__text span { font-size: 16px; line-height: 30px; color: var(--anb-muted); }
@media (max-width: 767px) { .anb-features { gap: 32px; } }

/* -------------------------------------------------------------------------
   Icon bullet points — Figma 662:648
   ---------------------------------------------------------------------- */
.anb-points { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.anb-points[data-cols="2"] { grid-template-columns: repeat(2, 1fr); column-gap: 50px; }
.anb-points li { display: flex; gap: 14px; align-items: center; }
.anb-points li img { width: 32px; height: 32px; flex: 0 0 32px; }
.anb-points li span {
	font-size: 16px;
	font-weight: 500;
	line-height: 27px;
	color: var(--anb-black);
}
@media (max-width: 900px) { .anb-points[data-cols="2"] { grid-template-columns: 1fr; } }

/* Subhead used above a feature list */
.anb-subhead p { font-family: var(--anb-font-body); font-weight: 700; color: var(--anb-black); }

/* Plain bulleted prose */
.anb-bullets { margin: 14px 0 0; padding-left: 24px; }
.anb-bullets li { line-height: 30px; margin-bottom: 4px; }

/* Pill / capsule image (Assessment System, Figma 662:669) */
.anb-pill-image img {
	width: 330px;
	max-width: 100%;
	height: 440px;
	object-fit: cover;
	border-radius: 500px;
}
@media (max-width: 767px) { .anb-pill-image img { height: 380px; } }

/* =========================================================================
   INNER-PAGE PATTERNS — added with the 21-page build pass.
   Values are taken from the Figma nodes cited above each block.
   ========================================================================= */

/* --- Pill photo rows — Figma 656:2643 / 692:831 / 228:1756 -------------- */
.anb-pillrow { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.anb-pillrow li {
	flex: 1 1 0;
	min-width: 0;
	height: 370px;
	border-radius: 500px;
	overflow: hidden;
	background: var(--anb-line);
}
.anb-pillrow li img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
	.anb-pillrow { flex-wrap: wrap; }
	.anb-pillrow li { flex: 0 0 calc(50% - 12px); height: 320px; }
}
@media (max-width: 560px) { .anb-pillrow li { flex: 0 0 100%; height: 300px; } }

/* --- Full-bleed colour tab strip — Figma 692:812 / 228:1737 ------------- */
.anb-labtabs {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--anb-sky-alt, #ebf8ff);
	border-top: 1px solid var(--anb-line);
}
.anb-labtabs li {
	flex: 1 1 0;
	min-height: 78px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	text-align: center;
	font: 400 16px/30px var(--anb-font-body);
	color: #fff;
}
.anb-labtabs .is-blue { background: var(--anb-blue); }
.anb-labtabs .is-lime { background: var(--anb-lime); }
@media (max-width: 767px) { .anb-labtabs { flex-wrap: wrap; } .anb-labtabs li { flex: 0 0 50%; } }

/* --- House system — Figma 737:209 -------------------------------------- */
.anb-house-grid {
	display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
	margin: 0; padding: 0; list-style: none;
}
@media (min-width: 1025px) {
	/* 4 x 270 + 3 x 20 = 1140 — exactly the container, all four on one row. */
	.anb-house-grid > li { flex: 0 0 270px; }
}
@media (max-width: 1024px) { .anb-house-grid { gap: 40px; } }
.anb-house { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 270px; }
.anb-house__disc {
	width: 237px; height: 237px; border-radius: 50%;
	background: var(--house-ring, var(--anb-line));
	display: flex; align-items: center; justify-content: center;
}
.anb-house__disc img {
	width: 193px; height: 193px; border-radius: 50%; object-fit: cover;
	box-shadow: 0 3.5px 17.5px rgba(0, 0, 0, .2);
}
.anb-house__card {
	width: 270px; border-radius: 54px; padding: 25px 0;
	background: var(--house-tint, var(--anb-white-soft));
	display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.anb-house__motto { font: 400 16px/26px var(--anb-font-body); color: var(--anb-ink); max-width: 216px; margin: 0; }
.anb-house__name {
	font: 600 20px/30px var(--anb-font-body);
	color: var(--house-ink, var(--anb-black));
	text-transform: uppercase;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	padding: 10px 0; width: fit-content; margin: 0;
}

/* --- Photo groupings ---------------------------------------------------- */
/* 3-up grid — Figma 657:3333 */
.anb-photogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.anb-photogrid li { height: 370px; border-radius: 20px; overflow: hidden; background: #eee; }
.anb-photogrid li img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .anb-photogrid { grid-template-columns: repeat(2, 1fr); } .anb-photogrid li { height: 280px; } }
@media (max-width: 600px) { .anb-photogrid { grid-template-columns: 1fr; } .anb-photogrid li { height: 240px; } }

/* 2-up row — Figma 662:1563 / 658:3919 */
.anb-photoduo, .anb-photopair { display: flex; gap: 35px; margin: 0; padding: 0; list-style: none; }
.anb-photoduo li, .anb-photopair li {
	flex: 1 1 0; min-width: 0; height: 400px;
	border-radius: 15px; overflow: hidden; background: var(--anb-line);
}
.anb-photoduo li img, .anb-photopair li img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anb-photopair__single img { width: 550px; max-width: 100%; height: 400px; object-fit: cover; border-radius: 15px; }
@media (max-width: 900px) {
	.anb-photoduo, .anb-photopair { flex-direction: column; }
	.anb-photoduo li, .anb-photopair li { height: 260px; }
}

/* 2x2 grid — Figma 766:160 */
.anb-photoquad { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.anb-photoquad li { height: 358px; border-radius: 15px; overflow: hidden; background: var(--anb-line); }
.anb-photoquad li img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .anb-photoquad { grid-template-columns: 1fr; } .anb-photoquad li { height: 260px; } }

/* Gallery mixed-width rows — Figma 686:352 */
.anb-photorows { display: flex; flex-direction: column; gap: 24px; }
.anb-photorows__row { display: flex; gap: 15px; }
.anb-photorows__row > figure { margin: 0; flex: 1 1 0; min-width: 0; height: 382px; border-radius: 10px; overflow: hidden; }
.anb-photorows__row > figure.is-narrow { flex: 0 0 370px; }
.anb-photorows__row img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
	.anb-photorows__row { flex-wrap: wrap; }
	.anb-photorows__row > figure,
	.anb-photorows__row > figure.is-narrow { flex: 1 1 calc(50% - 8px); height: 240px; }
}
@media (max-width: 560px) {
	.anb-photorows__row > figure,
	.anb-photorows__row > figure.is-narrow { flex: 1 1 100%; }
}

/* --- Numbered / stepped lists ------------------------------------------ */
.anb-numlist { list-style: decimal; padding-left: 24px; margin: 14px 0 0; }
.anb-numlist li { font-size: 16px; line-height: 30px; color: var(--anb-muted); }

/* Admission steps — Figma 658:4272: 48px white tile, 1px #0084C9, radius 10 */
.anb-steps { display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; }
.anb-step { display: flex; gap: 20px; align-items: flex-start; }
.anb-step__icon {
	flex: 0 0 48px; width: 48px; height: 48px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--anb-blue); border-radius: 10px;
}
.anb-step__icon img { width: 24px; height: 24px; }
.anb-step__body { font-size: 16px; line-height: 30px; color: var(--anb-muted); }
.anb-step__title { font-weight: 600; color: var(--anb-muted); margin: 0 0 5px; }
.anb-step__body .anb-bullets { margin: 0 0 8px; }

/* Compact feature rows (bare 32px glyph, no badge) — Figma 658:3937 */
.anb-features-wrap.is-compact .anb-features { gap: 20px; }
.anb-features-wrap.is-compact .anb-feature__icon {
	flex: 0 0 32px; width: 32px; height: 32px;
	border: 0; background: none; border-radius: 0;
}
.anb-features-wrap.is-compact .anb-feature__text b {
	font-family: var(--anb-font-body); font-weight: 600; font-size: 16px; line-height: 27px; color: var(--anb-black);
}
.anb-features-wrap.is-compact .anb-feature__text span { line-height: 27px; }

/* --- Tables — Figma 659:xxxx (disclosures) and 193:xxx (eligibility) ---- */
.anb-dtable-wrap, .anb-agetable-wrap { overflow-x: auto; }
.anb-agetable-wrap { border-radius: 5px; overflow: hidden; }
.anb-dtable, .anb-agetable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.anb-dtable th, .anb-dtable td {
	background: #fff; border: 1px solid #e7e7e7; padding: 14px 20px;
	letter-spacing: -.4px; text-align: center; font-size: 18px; line-height: 28px;
}
.anb-dtable th { font-weight: 600; color: #020202; min-height: 91px; }
.anb-dtable td { font-weight: 300; color: #4f4f4f; }
.anb-dtable td:first-child { text-transform: capitalize; }
.anb-dtable--nested { margin: 0; }
.anb-dtable__link { color: #4f4f4f; text-decoration: none; }
.anb-dtable__link:hover { text-decoration: underline; color: var(--anb-blue-text); }
/* A document link leaves the page, so give it a focus ring the keyboard can see
   and a hit area that is not just the 10 characters of "Click Here". */
/* The cell is the tap target: "Click Here" is 10 characters, and at 2px of
   padding it measured 32px tall on a phone, under the 44px WCAG 2.5.5 wants. */
.anb-dtable__link {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; min-width: 44px; padding: 4px 8px; border-radius: 4px;
}
.anb-dtable__link:focus-visible,
.anb-dtable-download__link:focus-visible {
	outline: 2px solid var(--anb-blue); outline-offset: 2px;
}

/* Sections A, D and E have no upload column in the Figma table; the school's
   PDF copy of each sits under the table instead. */
.anb-dtable-download { margin: 18px 0 0; text-align: right; }
.anb-dtable-download__link {
	display: inline-block; font-size: 15px; font-weight: 500;
	color: var(--anb-blue-text); text-decoration: none;
	padding: 8px 16px; border: 1px solid rgba(0, 132, 201, .35); border-radius: 6px;
	transition: background-color .15s ease, border-color .15s ease;
}
.anb-dtable-download__link:hover {
	background: rgba(0, 132, 201, .07); border-color: var(--anb-blue-text);
}
.anb-disclosure__title {
	font-family: var(--anb-font-body); font-weight: 700; font-size: 38px; line-height: 46px;
	letter-spacing: -.4px; color: var(--anb-blue-text); text-align: center; margin: 0 0 30px;
}
.anb-agetable th, .anb-agetable td {
	border: 1px solid #000; background: #fff; height: 60px; text-align: center;
	font-size: 16px; line-height: 30px; color: #000;
}
.anb-agetable th { font-weight: 600; }
@media (max-width: 767px) {
	.anb-dtable th, .anb-dtable td { font-size: 15px; padding: 10px 12px; }
	.anb-dtable-download { text-align: left; }
}

/* --- Academic structure stage strips — Figma 655:16xx ------------------- */
.anb-stage__title { font-family: var(--anb-font-display); font-size: 48px; line-height: 1.1; color: var(--anb-black); margin: 0; }
.anb-stage__note  { font-family: var(--anb-font-display); font-size: 20px; line-height: 1.6; color: var(--anb-black); margin: 0; }
.anb-stage__grades { font-weight: 700; font-size: 20px; line-height: 30px; color: var(--anb-black); margin: 0; }
.anb-stage-strip { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.anb-stage-strip li { flex: 1 1 0; min-width: 0; }
.anb-stage-strip img { width: 100%; height: 370px; object-fit: cover; border-radius: 500px; display: block; background: var(--anb-line); }
@media (max-width: 1024px) { .anb-stage-strip { flex-wrap: wrap; } .anb-stage-strip li { flex: 0 0 calc(50% - 12px); } }
@media (max-width: 767px)  { .anb-stage-strip li { flex: 0 0 100%; } .anb-stage-strip img { height: 300px; } }

/* --- FLP photo pair — Figma 662:11xx ------------------------------------ */
.anb-flp-photos { display: flex; gap: 35px; margin: 0; padding: 0; list-style: none; }
.anb-flp-photos li { flex: 1 1 0; min-width: 0; }
.anb-flp-photos img { width: 100%; height: 400px; object-fit: cover; border-radius: 15px; display: block; background: var(--anb-line); }
@media (max-width: 767px) { .anb-flp-photos { flex-direction: column; } .anb-flp-photos img { height: 260px; } }

/* --- Eligibility pill photo -------------------------------------------- */
.anb-elig-photo img { width: 291px; max-width: 100%; height: 394px; object-fit: cover; border-radius: 300px; background: var(--anb-blue); }

/* --- CTA band ----------------------------------------------------------- */
.anb-cta-actions { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.anb-btn--outline-lime {
	background: transparent; color: var(--anb-lime);
	border: 1px solid var(--anb-lime); padding: 14px 32px; gap: 12px; font-weight: 500;
}
.anb-btn--outline-lime:hover { background: var(--anb-lime); color: #fff; }

/* --- Academic calendar scaffold — Figma 662:2xx ------------------------- */
.anb-calendar { max-width: 1120px; margin-inline: auto; }
.anb-calendar__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.anb-calendar__arrow { width: 24px; height: 24px; background: none; border: 0; color: #000; cursor: pointer; }
.anb-calendar__month { font-family: var(--anb-font-display); font-size: 36px; color: #000; text-align: center; margin: 0; }
.anb-calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 600; }
.anb-calendar__controls { display: flex; justify-content: space-between; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.anb-calendar__field input {
	width: 481px; max-width: 100%; height: 58px; padding-inline: 28px;
	border: 1px solid var(--anb-muted); border-radius: 5px;
	font: 400 16px/30px var(--anb-font-body); color: var(--anb-muted);
}
.anb-calendar__btn {
	min-width: 108px; height: 58px; border: 1px solid var(--anb-muted); border-radius: 5px;
	background: transparent; font: 400 16px/30px var(--anb-font-body); color: var(--anb-muted); cursor: pointer;
}
.anb-calendar__btn--today { min-width: 133px; }

/* Day grid. The weekday header above it is the same 7-column track, so the
   two must not drift: both use `repeat(7, 1fr)` and share the container. */
.anb-calendar__weekdays { padding: 12px 0; border-bottom: 1px solid #e3e8ef; }
.anb-calendar__days {
	display: grid; grid-template-columns: repeat(7, 1fr);
	border-left: 1px solid #e3e8ef; border-top: 1px solid #e3e8ef;
}
.anb-calendar__day {
	position: relative; min-height: 108px; padding: 8px;
	border-right: 1px solid #e3e8ef; border-bottom: 1px solid #e3e8ef;
	display: flex; flex-direction: column; gap: 4px;
}
.anb-calendar__day.is-empty { background: #fafbfc; }
.anb-calendar__day.is-sunday { background: #f7f9fc; }
.anb-calendar__num { font-size: 15px; font-weight: 500; color: #4f4f4f; }
.anb-calendar__day.is-today .anb-calendar__num {
	background: var(--anb-blue); color: #fff; border-radius: 50%;
	width: 26px; height: 26px; display: grid; place-items: center;
}

/* Event chips. `min-width:0` lets the text ellipsis inside a grid cell --
   without it the chip refuses to shrink and forces the column wider. */
.anb-calendar__event {
	min-width: 0; font-size: 12px; line-height: 1.35; font-weight: 500;
	padding: 3px 6px; border-radius: 4px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	border-left: 3px solid currentColor;
}
.anb-calendar__event.is-academic { background: #eaf4fd; color: #0a5c8f; }
.anb-calendar__event.is-exam     { background: #fdeceb; color: #a8302a; }
.anb-calendar__event.is-holiday  { background: #f1efe6; color: #7a6a3f; }
.anb-calendar__event.is-event    { background: #eef7e9; color: #4a7524; }

@media (max-width: 900px) {
	/* Below this the seven columns cannot hold a readable label, so the cell
	   keeps the colour and drops the text; the day is still tappable and the
	   title attribute still carries the name. */
	.anb-calendar__day { min-height: 62px; padding: 5px; }
	.anb-calendar__event {
		font-size: 0; padding: 0; height: 6px; border-radius: 3px; border-left: 0;
	}
	.anb-calendar__month { font-size: 24px; }
}


/* --- Home: Our Gallery (Figma 655:230) ---------------------------------
   Two rows of arch tiles that deliberately run past both edges of the
   viewport. In the 1440 design space: tiles are 270x405 on a 294 pitch
   (24px gap); row 1 starts at x=-3 and row 2 at x=-150, which is what makes
   the band read as continuing rather than as a contained grid.

   The rows are sized in `em` off a font-size the section sets, so one
   variable rescales the whole band at each breakpoint and the offsets stay
   proportional. `overflow: hidden` on the wrapper is what keeps the bleed
   from turning into horizontal page scroll. */
/* The clip has to happen at the full-width section and nowhere inside it.
   Elementor wraps every widget in a container, a column and a widget-wrap,
   and any one of them clipping would cut the band off at the 1140 content
   width instead of at the viewport edge -- which is exactly what happened
   first time round. */
.anb-gallery-section { overflow: hidden; }
.anb-gallery-section > .elementor-container,
.anb-gallery-section .elementor-column,
.anb-gallery-section .elementor-widget-wrap,
.anb-gallery-section .elementor-widget,
.anb-gallery-section .elementor-widget-container { overflow: visible; }

.anb-gal {
	--tile: 270px;                     /* design tile width            */
	--gap: 24px;
	--row2-shift: -150px;              /* row 2 offset, from Figma     */
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}
.anb-gal__row {
	display: flex;
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
	/* width:max-content keeps every tile at its natural size instead of
	   letting flex shrink them to fit the column.

	   Centring is done with left:50% + translateX(-50%) rather than
	   margin-inline:auto, because the row is wider than its parent: Elementor
	   still boxes the inner container at 1140px even on a stretched section,
	   and auto margins on an overflowing element resolve to zero, which
	   pinned the band to the container's left edge instead of centring it on
	   the viewport. The parent is itself centred, so its midpoint is the
	   viewport midpoint and this lands the band correctly at any width. */
	width: max-content;
	position: relative;
	left: 50%;
}
.anb-gal__row--1 { transform: translateX(calc(-50% - 3px)); }
.anb-gal__row--2 { transform: translateX(calc(-50% + var(--row2-shift))); }
.anb-gal__cell { flex: 0 0 var(--tile); }
.anb-gal__img {
	display: block;
	width: var(--tile);
	height: auto;
	aspect-ratio: 270 / 405;
	object-fit: cover;
}

@media (max-width: 1200px) {
	.anb-gal { --tile: 210px; --gap: 18px; --row2-shift: -110px; }
}
@media (max-width: 900px) {
	.anb-gal { --tile: 168px; --gap: 14px; --row2-shift: -84px; }
}
@media (max-width: 600px) {
	/* On a phone the band is still two staggered rows -- collapsing it to a
	   grid would lose the section's whole character -- just at a size where
	   several tiles are legible at once. */
	.anb-gal { --tile: 116px; --gap: 10px; --row2-shift: -58px; }
}