/**
 * Header and footer.
 *
 * The exported header was Digilab's bootsnav navbar and the footer was an
 * Elementor five-column section. Both were rebuilt with their own markup, so
 * none of the exported rules apply to them any more — the class names they
 * targeted (.navbar, .bootsnav, .attr-nav, .elementor-7734) no longer exist.
 *
 * The design tokens this file reads from — the palette, the spacing scale and
 * the font stacks — live in css/orchid-tokens.css, which loads on every page of
 * the site rather than only on the Orchid templates.
 *
 * @package orchidassociate
 */

/* ---------------------------------------------------------------------------
 * Sticky header groundwork
 *
 * The exported Digilab stylesheet sets overflow-x: hidden on body to stop wide
 * sections producing a horizontal scrollbar. That quietly makes body a scroll
 * container, and a position: sticky child then sticks to *its* scrollport
 * rather than the viewport — so the header scrolled away instead of staying
 * put. overflow-x: clip does the same clipping without creating a scroll
 * container. The hidden value stays as the fallback for browsers without it.
 * ------------------------------------------------------------------------- */
body {
	overflow-x: hidden;

	/* The same stylesheet also carries `body,.banner-area,.banner-area div
	   {height:100vh}`. Capping body at the viewport height means a sticky
	   child can only stick within that first screenful and then scrolls away
	   with the rest of the page — the header never stayed put. The 100vh was
	   meant for the full-screen banner area, not for body. */
	height: auto;
	min-height: 100vh;
}

@supports (overflow-x: clip) {
	body {
		overflow-x: clip;
	}
}

/* ---------------------------------------------------------------------------
 * Admin bar
 *
 * WordPress already makes room for its fixed admin bar with
 * html { margin-top: 32px !important }. The exported Digilab framework
 * stylesheet adds body.admin-bar { margin-top: 32px } on top of that, so the
 * page was pushed down twice and a 32px white strip sat under the bar.
 * ------------------------------------------------------------------------- */
html body.admin-bar {
	margin-top: 0;
}

/* The sticky header has to clear the bar too, or it slides underneath it.
   Below 783px WordPress makes the bar scroll away with the page, so the
   header goes back to the top of the viewport. */
.admin-bar .o-hdr {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .o-hdr {
		top: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Shared primitives, used by the chrome and by the home sections.
 * ------------------------------------------------------------------------- */
.o-wrap {
	width: 100%;
	max-width: 1220px;
	padding: 0 24px;
	margin: 0 auto;
}

.o-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ===========================================================================
 * TOP BAR
 * ======================================================================== */
.o-topbar {
	font-family: var(--o-sans);
	font-size: 14px;
	color: var(--o-body-light);
	background: var(--o-ink-deep);
}

.o-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 32px;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding-block: 8px;
}

.o-topbar__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.o-topbar__item {
	display: flex;
	gap: 9px;
	align-items: center;
	line-height: 1.5;
}

.o-topbar__item i {
	font-size: 13px;
	color: var(--o-red);
}

.o-topbar a {
	color: var(--o-body-light);
	text-decoration: none;
	transition: color 0.2s ease;
}

.o-topbar a:hover,
.o-topbar a:focus-visible {
	color: #fff;
}

.o-topbar__cta {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 9px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--o-red);
	border-radius: 999px;
	transition: background 0.2s ease;
}

.o-topbar a.o-topbar__cta:hover,
.o-topbar a.o-topbar__cta:focus-visible {
	color: #fff;
	background: var(--o-red-dark);
}

/* ===========================================================================
 * HEADER
 * ======================================================================== */
.o-hdr {
	position: sticky;
	top: 0;
	z-index: 90;
	font-family: var(--o-sans);
	background: #fff;
	border-bottom: 1px solid var(--o-line);
	transition: box-shadow 0.25s ease;
}

.o-hdr.is-stuck {
	box-shadow: 0 4px 20px rgba(20, 32, 46, 0.09);
}

.o-hdr__inner {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	min-height: var(--o-header-h);
}

.o-hdr__brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.o-hdr__brand img {
	display: block;
	width: auto;
	max-height: 46px;
}

/* --- Primary navigation ------------------------------------------------- */
.o-nav {
	display: flex;
	flex: 1;
	justify-content: center;
}

.o-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.o-nav__list > li {
	position: relative;
}

.o-nav__list > li > a,
.o-nav__list > li > button {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--o-ink);
	text-decoration: none;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: var(--o-radius-sm);
	transition: color 0.2s ease, background 0.2s ease;
}

.o-nav__list > li > a:hover,
.o-nav__list > li > a:focus-visible,
.o-nav__list > li > button:hover,
.o-nav__list > li > button:focus-visible,
.o-nav__list > li.is-open > button {
	color: var(--o-red);
	background: var(--o-red-soft);
}

.o-nav__list > li.current-menu-item > a,
.o-nav__list > li.current_page_item > a,
.o-nav__list > li.current-menu-ancestor > a,
.o-nav__list > li.current-menu-ancestor > button {
	color: var(--o-red);
}

/* The caret on a parent item. Inside the button when the item is only a
   toggle, and a button of its own beside a parent that is also a link. */
.o-nav__list > li {
	display: flex;
	align-items: center;
}

.o-nav__caret {
	font-size: 11px;
	line-height: 1;
	transition: transform 0.2s ease;
}

.o-nav__caret--btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 30px;
	padding: 0;
	margin-left: -8px;
	color: var(--o-ink);
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 6px;
}

.o-nav__caret--btn:hover,
.o-nav__caret--btn:focus-visible,
.o-nav__list > li.is-open > .o-nav__caret--btn {
	color: var(--o-red);
	background: var(--o-red-soft);
}

.o-nav__list li.is-open > .o-nav__caret--btn,
.o-nav__list li.is-open > .o-nav__toggle > .o-nav__caret {
	transform: rotate(180deg);
}

/* --- Dropdowns ---------------------------------------------------------- */
.o-nav__sub {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;

	/* 226px wrapped the longer service names ("Admission & Correspondence")
	   onto a second line. */
	min-width: 252px;
	padding: 8px;
	margin: 0;
	list-style: none;
	visibility: hidden;
	background: #fff;

	/* The primary as a top edge, so an open dropdown reads as part of the
	   brand rather than as a plain white card. */
	border: 1px solid var(--o-line);
	border-top: 2px solid var(--o-red);
	border-radius: var(--o-radius-sm);
	box-shadow: var(--o-shadow-lift);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* The 8px the panel sits below its parent is dead space the pointer has to
   cross, and crossing it dropped the hover and closed the menu. This bridges
   the gap without moving the panel. */
.o-nav__list > li > .o-nav__sub::before {
	position: absolute;
	top: -10px;
	right: 0;
	left: 0;
	height: 10px;
	content: "";
}

.o-nav__list li:hover > .o-nav__sub,
.o-nav__list li:focus-within > .o-nav__sub,
.o-nav__list li.is-open > .o-nav__sub {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

/* A row inside the panel. A sub-menu item that has children of its own is a
   <button>, exactly like a top-level one — but every rule above is keyed to
   `.o-nav__list > li`, which is the top level only, so those buttons arrived
   with the browser's own styling: a grey box set in Arial, sitting among links
   set in Inter. They are styled with the links here instead. */
.o-nav__sub > li {
	position: relative;
	display: flex;
	align-items: center;
}

.o-nav__sub a,
.o-nav__sub .o-nav__toggle {
	display: flex;
	flex: 1;
	gap: 8px;
	align-items: center;
	padding: 9px 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--o-ink);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 6px;
	transition: color 0.2s ease, background 0.2s ease;
}

.o-nav__sub .o-nav__toggle {
	justify-content: space-between;
}

.o-nav__sub a:hover,
.o-nav__sub a:focus-visible,
.o-nav__sub .o-nav__toggle:hover,
.o-nav__sub .o-nav__toggle:focus-visible,
.o-nav__sub > li.is-open > .o-nav__toggle {
	color: var(--o-red);
	background: var(--o-red-soft);
}

/* The caret beside a sub-menu parent that is also a link. Narrower than the
   top-level one, so it does not crowd the label inside the panel. */
.o-nav__sub .o-nav__caret--btn {
	flex: 0 0 auto;
	width: 24px;
	height: 28px;
	margin-left: -4px;
}

/* The item the visitor is on, at any depth. */
.o-nav__sub > li.current-menu-item > a,
.o-nav__sub > li.current_page_item > a,
.o-nav__sub > li.current-menu-ancestor > a,
.o-nav__sub > li.current-menu-ancestor > .o-nav__toggle {
	color: var(--o-red);
}

/* A third level opens to the side rather than stacking on top. */
.o-nav__sub .o-nav__sub {
	top: -10px;
	left: calc(100% + 4px);
}

/* Its own bridge, this time across the horizontal gap. Exactly the 4px of the
   offset above: any wider and it would sit over the right edge of the row it
   opened from and swallow clicks meant for that row. */
.o-nav__sub .o-nav__sub::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -4px;
	width: 4px;
	height: auto;
	content: "";
}

@media (min-width: 1200px) {
	/* A caret inside a panel opens a level that flies out sideways, so it
	   points sideways too, open or closed. The 180° flip earlier in this file
	   belongs to the top level, which really does drop downwards. Below this
	   width the levels stack in the drawer and the flip is right again. */
	.o-nav__sub .o-nav__caret,
	.o-nav__sub li.is-open > .o-nav__caret--btn,
	.o-nav__sub li.is-open > .o-nav__toggle > .o-nav__caret {
		transform: rotate(-90deg);
	}
}

/* --- Drawer contact block ------------------------------------------------
 * Only ever on screen in the drawer. Above that width the top bar carries the
 * same two actions, so showing them here as well would be a second copy.
 * ---------------------------------------------------------------------- */
.o-nav__contact {
	display: none;
}

/* --- Header actions ----------------------------------------------------- */
.o-hdr__actions {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
	align-items: center;
}

.o-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	font-size: 15px;
	color: var(--o-ink);
	cursor: pointer;
	background: none;
	border: 1px solid var(--o-line);
	border-radius: 50%;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.o-iconbtn:hover,
.o-iconbtn:focus-visible {
	color: var(--o-red);
	background: var(--o-red-soft);
	border-color: var(--o-red);
}

.o-hdr__burger {
	display: none;
}

/* --- Search ------------------------------------------------------------- */
.o-search {
	display: none;
	padding-bottom: 18px;
}

.o-search.is-open {
	display: block;
}

.o-search__form {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 6px 6px 6px 18px;
	background: var(--o-bg-muted);
	border: 1px solid var(--o-line);
	border-radius: 999px;
}

.o-search__input {
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: 15px;
	color: var(--o-ink);
	background: none;
	border: 0;
	outline: none;
}

.o-search__submit {
	flex: 0 0 auto;
	padding: 10px 22px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	background: var(--o-red);
	border: 0;
	border-radius: 999px;
}

.o-search__submit:hover,
.o-search__submit:focus-visible {
	background: var(--o-red-dark);
}

/* ===========================================================================
 * SIDE PANEL
 * ======================================================================== */
/* A white panel, so the red office cards are what carries it rather than being
   one more bright thing on a black ground. Everything below that used to be
   light-on-dark is turned over with it — the headings, the links, the close
   button, the rules between the blocks and the social icons.

   The social icons are the one thing that cannot simply be recoloured here:
   .o-socials is the footer's markup too, and the footer is still black. Those
   rules are scoped to .o-side further down. */
.o-side {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	width: min(380px, 88vw);
	padding: 28px 28px 40px;
	overflow-y: auto;
	font-family: var(--o-sans);
	color: var(--o-body);
	background: var(--o-bg);
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.o-side.is-open {
	transform: translateX(0);
}

.o-side__scrim {
	position: fixed;
	inset: 0;
	z-index: 199;
	visibility: hidden;
	background: rgba(9, 15, 24, 0.55);
	opacity: 0;
	transition: opacity 0.3s ease, visibility 0.3s;
}

.o-side__scrim.is-open {
	visibility: visible;
	opacity: 1;
}

.o-side__close {
	position: absolute;
	top: 18px;
	right: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	font-size: 16px;
	color: var(--o-ink);
	cursor: pointer;
	background: var(--o-bg-muted);
	border: 0;
	border-radius: 50%;
}

.o-side__close:hover,
.o-side__close:focus-visible {
	color: #fff;
	background: var(--o-red);
}

.o-side__title {
	margin: 0 0 6px;
	font-family: var(--o-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--o-ink);
}

.o-side__block {
	padding-top: 22px;
	margin-top: 22px;
	border-top: 1px solid var(--o-line);
}

.o-side__block:first-of-type {
	padding-top: 0;
	margin-top: 26px;
	border-top: 0;
}

.o-side a {
	color: var(--o-body);
	text-decoration: none;
}

.o-side a:hover,
.o-side a:focus-visible {
	color: var(--o-red);
	text-decoration: underline;
}

.o-side__links {
	padding: 0;
	margin: 12px 0 0;
	list-style: none;
}

.o-side__links li + li {
	margin-top: 2px;
}

.o-side__links a {
	display: block;
	padding: 7px 0;
	font-size: 15px;
}

.o-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.o-socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	font-size: 15px;
	color: #fff;
	background: rgba(255, 255, 255, 0.09);
	border-radius: 50%;
	transition: background 0.2s ease, transform 0.2s ease;
}

.o-socials a:hover,
.o-socials a:focus-visible {
	color: #fff;
	background: var(--o-red);
	text-decoration: none;
	transform: translateY(-2px);
}

/* The same icons in the drawer, which is white. The rules above are the
   footer's and stay as they are; these override them for the panel only.

   The hover pair has to be restated rather than left to the rules above. A
   scoped `.o-side .o-socials a` outweighs a bare `.o-socials a` but only ties
   with `.o-socials a:hover`, and being later in the file it would win the tie
   — which would take the red hover away from the one place it still reads. */
.o-side .o-socials a {
	color: var(--o-ink);
	background: var(--o-bg-muted);
}

.o-side .o-socials a:hover,
.o-side .o-socials a:focus-visible {
	color: #fff;
	background: var(--o-red);
	text-decoration: none;
}

/* ===========================================================================
 * CONTACT BLOCKS (side panel and footer)
 * ======================================================================== */
.o-contact {
	margin: 14px 0 0;
	font-size: 14.5px;
	line-height: 1.75;
}

.o-contact__office + .o-contact__office {
	margin-top: 16px;
}

.o-contact__label {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--o-red);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.o-contact p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   The side panel's office blocks are cards on the brand red.

   Only in the drawer: the footer runs the same partial, and three red blocks
   across the foot of every page would be the loudest thing on the site. On red
   the label cannot stay red, so everything in the card is white — the label
   held back a step so it still reads as a label rather than as another line of
   the address.
   -------------------------------------------------------------------------- */
.o-side .o-contact__office {
	padding: 14px 16px;
	border-radius: var(--o-radius-sm, 8px);
	color: #fff;
	background: var(--o-red);
}

.o-side .o-contact__office + .o-contact__office {
	margin-top: 12px;
}

.o-side .o-contact__label {
	color: rgba(255, 255, 255, 0.82);
}

.o-side .o-contact__office a {
	color: #fff;
}

.o-side .o-contact__office a:hover,
.o-side .o-contact__office a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* The exported Digilab stylesheet carries a bare `p { color: #666 }`. A
   paragraph takes its colour from .o-ftr or .o-side only for as long as nothing
   matches it directly — and that rule does, so every paragraph on the black
   surfaces came out dark grey, while the phone numbers and email beside them
   stayed bright because .o-ftr a matches those directly. Naming the paragraphs
   puts them back on the colour of the surface they sit on; orchid-home.css
   already does the same for the home page with .orchid-home p.

   .o-contact covers the footer and the side panel both. The side panel's label
   is a <p> as well and carries the brand red, so it is excluded by name rather
   than left to lose it — and .o-ftr__tagline, the other red paragraph, is not
   matched by any of these. */
.o-ftr__about,
.o-ftr__bottom p,
.o-contact p:not(.o-contact__label) {
	color: inherit;
}

/* ===========================================================================
 * FOOTER
 * ======================================================================== */
/* The footer used to be a shade deeper than --o-ink so that it separated from a
   dark call-to-action band above it. Both are the secondary black now, so the
   seam does that work instead — and in the primary it reads as deliberate
   rather than as two blocks that failed to meet. */
.o-ftr {
	font-family: var(--o-sans);
	font-size: 15px;
	line-height: 1.75;
	color: var(--o-body-light);
	background: var(--o-ink-deep);
	border-top: 3px solid var(--o-red);
}

.o-ftr a {
	color: var(--o-body-light);
	text-decoration: none;
	transition: color 0.2s ease;
}

.o-ftr a:hover,
.o-ftr a:focus-visible {
	color: #fff;
}

.o-ftr__main {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr) 1.1fr;
	gap: 40px;
	padding: clamp(48px, 6vw, 76px) 0 clamp(36px, 4vw, 56px);
}

.o-ftr__brand {
	margin: 0;
	font-family: var(--o-display);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
}

.o-ftr__tagline {
	margin: 4px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--o-red);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.o-ftr__about {
	margin: 16px 0 0;
	font-size: 14.5px;
}

.o-ftr__title {
	display: flex;
	gap: 9px;
	align-items: center;
	margin: 0 0 14px;
	font-family: var(--o-display);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.02em;
}

.o-ftr__title i {
	font-size: 14px;
	color: var(--o-red);
}

.o-ftr__links {
	padding: 0;
	margin: 0;
	list-style: none;
}

.o-ftr__links li + li {
	margin-top: 4px;
}

.o-ftr__links a {
	display: inline-block;
	padding: 3px 0;
	font-size: 14.5px;
}

.o-ftr__icef {
	padding-top: 20px;
	margin-top: 22px;
	border-top: 1px solid var(--o-line-dark);
}

.o-ftr__icef .o-ftr__title {
	margin-bottom: 10px;
}

.o-ftr__bottom {
	padding: 20px 0;
	font-size: 14px;
	text-align: center;
	border-top: 1px solid var(--o-line-dark);
}

.o-ftr__bottom p {
	margin: 0;
}

/* ===========================================================================
 * BRAND ALIGNMENT FOR THE EXPORTED STYLESHEETS
 *
 * The export's own red is already #ec1c24, so the design layer agrees with the
 * palette. What it also carries is a second accent from the demo it was built
 * from — #4154f1 blue on pagination, post meta and the core widgets, #1baaa0
 * teal and #634ded purple on a handful of icons. Most of that is behind a
 * variant class (.cornflower-blue, .orange) that is never applied, but the
 * rules below are not, and they land on pages this theme really renders.
 *
 * These stylesheets are enqueued before this one, so plain source order is
 * enough to win; the one !important matches an !important in the original.
 * ======================================================================== */
.page-links a,
.tf-pagination-link,
.tf-posts-pagination .page-numbers,
span.post-meta__item.__date-post a,
#wp-calendar a,
.blog-area .related-slider .owl-nav .owl-prev,
.blog-area .related-slider .owl-nav .owl-next {
	color: var(--o-red);
}

.widget_rss ul li a {
	color: var(--o-red) !important;
}

.page-links span.current,
#tf-sidebar caption,
.tf-posts-pagination .page-numbers.current,
.tf-pagination.-style-default .tf-pagination-item.active .tf-pagination-link,
.tf-pagination.-style-outline .tf-pagination-item.active .tf-pagination-link,
.-has-sticky .single-item .item::before {
	color: #fff;
	background: var(--o-red);
	background-color: var(--o-red);
	border-color: var(--o-red);
}

/* Icon blocks. The originals set a teal-to-cyan or purple gradient; these
   restate the whole background so no gradient shows through underneath. */
.about-features-area .process-box .icon i,
.circle-chart__circle {
	color: var(--o-red);
	stroke: var(--o-red);
}

.about-features-area .process-box .icon i::after,
.subscribe-area .sebscribe-items::before,
.subscribe-area .sebscribe-items::after,
.services-area .services-items .owl-item .item .icon i,
.services-area .services-items .single-item .item .icon i {
	background: var(--o-red);
}

.services-area .services-items .owl-item:nth-child(2n) .item .icon i,
.services-area .services-items .single-item:nth-child(2n) .item .icon i {
	background: var(--o-red-deep);
}

.subscribe-area h2 strong {
	color: var(--o-red);
}

.subscribe-area button {
	background: var(--o-red);
}

.subscribe-area button:hover,
.subscribe-area button:focus-visible {
	background: var(--o-red-dark);
}

/* ===========================================================================
 * MOBILE
 *
 * The drawer takes over below 1200px. It used to be 991px, which left the row
 * of uppercase menu items to fit beside the logo and the icon buttons on a
 * landscape tablet — it did not, and .o-nav__list wraps, so the header grew a
 * second row and doubled in height instead of overflowing visibly. 1200px is
 * also what js/orchid-nav.js checks; the two have to agree.
 * ======================================================================== */
@media (max-width: 1279px) {
	.o-nav__list > li > a,
	.o-nav__list > li > button {
		padding: 10px 10px;
		font-size: 13px;
	}
}

@media (max-width: 1199px) {
	.o-topbar {
		display: none;
	}

	.o-hdr__burger {
		display: inline-flex;
	}

	/* Brand and buttons are the whole header row once the nav is out of flow.
	   A flex item will not shrink below its content by default, so a wide logo
	   pushed the buttons off the right edge instead of scaling down. */
	.o-hdr__inner {
		gap: 12px;
	}

	.o-hdr__brand {
		min-width: 0;
	}

	.o-hdr__brand img {
		max-width: 100%;
	}

	/* The nav becomes a drawer under the header rather than a centred row. */
	.o-nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: none;
		max-height: calc(100vh - var(--o-header-h));

		/* A phone's 100vh is the viewport with the browser's own chrome
		   retracted, so at rest the drawer is taller than what is on screen and
		   its last items sit under the address bar. dvh is the height actually
		   showing; 100vh above stays as the fallback. */
		max-height: calc(100dvh - var(--o-header-h));
		overflow-y: auto;

		/* Reaching the end of the drawer would otherwise hand the scroll to the
		   page behind it and carry the menu off the screen. */
		overscroll-behavior: contain;
		background: #fff;
		border-top: 1px solid var(--o-line);
		box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14);
	}

	.o-nav.is-open {
		display: block;
	}

	.o-nav__list {
		display: block;
		padding: 10px 16px 20px;
	}

	/* The label and its caret share a row; the sub-menu wraps below them. */
	.o-nav__list > li {
		flex-wrap: wrap;
		border-bottom: 1px solid var(--o-line);
	}

	.o-nav__list > li > a,
	.o-nav__list > li > .o-nav__toggle {
		flex: 1;
		justify-content: flex-start;
		padding: 14px 8px;
		font-size: 14px;
		border-radius: 0;
	}

	.o-nav__caret--btn {
		width: 44px;
		height: 44px;
		margin-left: 0;
	}

	.o-nav__sub,
	.o-nav__sub .o-nav__sub {
		position: static;
		display: none;
		width: 100%;
		min-width: 0;
		padding: 4px 0 12px 16px;
		visibility: visible;
		background: none;
		border: 0;
		box-shadow: none;
		opacity: 1;
		transform: none;
	}

	/* The hover bridges belong to the floating panels. Once the levels stack in
	   the drawer they have no gap to cross, and a static parent would leave
	   them positioned against whatever ancestor is. */
	.o-nav__list > li > .o-nav__sub::before,
	.o-nav__sub .o-nav__sub::before {
		content: none;
	}

	/* Rows in the drawer get the same tap target as the top level. */
	.o-nav__sub a,
	.o-nav__sub .o-nav__toggle {
		padding: 11px 8px;
	}

	.o-nav__sub .o-nav__caret--btn {
		width: 44px;
		height: 44px;
		margin-left: 0;
	}

	/* On a touch screen the caret opens the level; hover cannot. */
	.o-nav__list li.is-open > .o-nav__sub {
		display: block;
	}

	.o-nav__list li:hover > .o-nav__sub,
	.o-nav__list li:focus-within > .o-nav__sub {
		display: none;
	}

	.o-nav__list li.is-open:hover > .o-nav__sub,
	.o-nav__list li.is-open:focus-within > .o-nav__sub {
		display: block;
	}

	/* The two actions the top bar took with it when it went. */
	.o-nav__contact {
		display: grid;
		gap: 10px;
		padding: 4px 16px 20px;
	}

	.o-nav__call,
	.o-nav__cta {
		display: flex;
		gap: 10px;
		align-items: center;
		justify-content: center;
		min-height: 46px;
		padding: 11px 18px;
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
		border-radius: 999px;
		transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	}

	.o-nav__call {
		color: var(--o-ink);
		background: none;
		border: 1px solid var(--o-line);
	}

	.o-nav__call:hover,
	.o-nav__call:focus-visible {
		color: var(--o-red);
		background: var(--o-red-soft);
		border-color: var(--o-red);
	}

	.o-nav__cta {
		color: #fff;
		background: var(--o-red);
		border: 1px solid var(--o-red);
	}

	.o-nav__cta:hover,
	.o-nav__cta:focus-visible {
		color: #fff;
		background: var(--o-red-dark);
		border-color: var(--o-red-dark);
	}

	.o-nav__call i,
	.o-nav__cta i {
		font-size: 14px;
	}

	.o-ftr__main {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 32px;
	}
}

@media (max-width: 600px) {
	/* The drawer sizes itself against this, so it has to follow the header down
	   rather than stay at the desktop 78px — otherwise the drawer is 12px
	   shorter than the room it actually has. */
	:root {
		--o-header-h: 66px;
	}

	.o-hdr__inner {
		min-height: var(--o-header-h);
	}

	.o-hdr__brand img {
		max-height: 38px;
	}

	.o-ftr__main {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

/* Small phones. Three 42px buttons, their gaps and the logo came to more than
   a 320px screen has once the wrap padding is taken off, and the row overflowed
   sideways. */
@media (max-width: 400px) {
	:root {
		--o-header-h: 60px;
	}

	.o-hdr__inner {
		gap: 8px;
	}

	.o-hdr__actions {
		gap: 2px;
	}

	.o-iconbtn {
		width: 38px;
		height: 38px;
		font-size: 14px;
	}

	.o-hdr__brand img {
		max-height: 32px;
	}

	/* The search row keeps a usable field instead of giving the width to the
	   submit button's padding. */
	.o-search__form {
		padding-left: 14px;
	}

	.o-search__submit {
		padding: 10px 16px;
	}

	.o-nav__list {
		padding: 6px 12px 16px;
	}

	.o-nav__contact {
		padding: 4px 12px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.o-side,
	.o-side__scrim,
	.o-nav__sub,
	.o-socials a,
	.o-hdr {
		transition: none;
	}
}