/* ==========================================================================
   Start Point Insurance — global design layer
   Loaded on every page, ahead of Elementor's own CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts

   The design calls for two licensed typefaces:
     - Headings : "Monety"    (Burntilldead — commercial licence required)
     - Body     : "THICCCBOI" (commercial / unclear licence)

   Neither can be bundled here. The stacks below name them FIRST, so the
   moment the licensed files are added (Elementor > Custom Fonts, using
   exactly the names "Monety" and "THICCCBOI") every heading and paragraph
   switches to them with no further edits.

   Until then the stack falls through to Figtree — a close, openly licensed
   (SIL OFL) geometric sans, self-hosted below so there is no third-party
   request and no layout shift.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/figtree-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Design tokens — sampled directly from the supplied design file
   -------------------------------------------------------------------------- */

:root {
	/* Brand */
	--sp-green-dark: #0E4F1C;   /* primary buttons, FAQ arrows, pill outlines */
	--sp-green: #11A130;        /* accent words in headings, dots, icon strokes */
	--sp-forest: #00281D;       /* footer */
	--sp-ink: #040A06;          /* services section backdrop */

	/* Neutrals */
	--sp-cream: #F0EBE0;        /* page background */
	--sp-white: #FFFFFF;
	--sp-text: #4D4D4D;         /* body copy on cream */
	--sp-heading: #333333;      /* headings on cream */
	--sp-muted: #747370;        /* 01 / Tailored labels, meta */
	--sp-hairline: rgba(51, 51, 51, 0.18);

	/* Gradient used on the closing CTA band */
	--sp-cta-from: #0C541C;
	--sp-cta-to: #14842C;

	/* Type stacks — licensed face first, open fallback second */
	--sp-font-heading: 'Monety', 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--sp-font-body: 'THICCCBOI', 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;

	/* Rhythm */
	--sp-radius: 14px;
	--sp-radius-lg: 24px;
	--sp-section-y: 120px;
	--sp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 110px; /* clears the sticky header on anchor jumps */
}

body {
	font-family: var(--sp-font-body);
	color: var(--sp-text);
	background-color: var(--sp-cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sp-font-heading);
	color: var(--sp-heading);
	letter-spacing: -0.02em;
}

/* The design highlights part of each heading in green. */
.sp-accent { color: var(--sp-green); }
.sp-accent-dark { color: var(--sp-green-dark); }

/* --------------------------------------------------------------------------
   4. Reveal-on-scroll animations

   Driven by assets/js/theme.js via IntersectionObserver. Elements start
   hidden only when JS is present, so content is never trapped if JS fails.
   -------------------------------------------------------------------------- */

.js-anim [data-sp-anim] {
	opacity: 0;
	will-change: opacity, transform;
	transition:
		opacity 0.7s var(--sp-ease),
		transform 0.7s var(--sp-ease);
	transition-delay: var(--sp-anim-delay, 0ms);
}

.js-anim [data-sp-anim='up']    { transform: translate3d(0, 32px, 0); }
.js-anim [data-sp-anim='down']  { transform: translate3d(0, -32px, 0); }
.js-anim [data-sp-anim='left']  { transform: translate3d(36px, 0, 0); }
.js-anim [data-sp-anim='right'] { transform: translate3d(-36px, 0, 0); }
.js-anim [data-sp-anim='fade']  { transform: none; }
.js-anim [data-sp-anim='zoom']  { transform: scale(0.94); }

.js-anim [data-sp-anim].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.js-anim [data-sp-anim] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   5. Logo marquee — the "Trusted across sectors" strip
   -------------------------------------------------------------------------- */

.sp-marquee {
	display: flex;
	overflow: hidden;
	gap: 0;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sp-marquee__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 64px;
	padding-right: 64px;
	animation: sp-marquee 30s linear infinite;
}

.sp-marquee:hover .sp-marquee__track { animation-play-state: paused; }

.sp-marquee__item {
	flex: 0 0 auto;
	font-family: var(--sp-font-heading);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #9AA3A0;
	opacity: 0.85;
	white-space: nowrap;
	transition: color 0.3s var(--sp-ease), opacity 0.3s var(--sp-ease);
}

.sp-marquee__item:hover { color: var(--sp-green-dark); opacity: 1; }

/* Real partner logos sit in the same rhythm as the wordmarks: a shared
   optical height rather than a shared box, so wide and narrow marks balance. */
.sp-marquee .sp-marquee__logo {
	flex: 0 0 auto;
	height: 34px;
	width: auto;
	opacity: 0.9;
	transition: opacity 0.3s var(--sp-ease), filter 0.3s var(--sp-ease);
}

.sp-marquee .sp-marquee__logo:hover { opacity: 1; }

.sp-marquee .sp-marquee__sep {
	flex: 0 0 auto;
	height: 20px;
	width: auto;
	opacity: 0.5;
}

@keyframes sp-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-33.3333%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.sp-marquee__track { animation: none; }
}

/* --------------------------------------------------------------------------
   6. Component polish that Elementor controls cannot express cleanly
   -------------------------------------------------------------------------- */

/* Eyebrow pill — "Services", "About", "Process", "FAQ" */
.sp-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 8px;
	background: var(--sp-white);
	border: 1px solid rgba(17, 161, 48, 0.25);
	font-size: 13px;
	font-weight: 500;
	color: var(--sp-heading);
	line-height: 1;
}

.sp-pill::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sp-green);
	flex: 0 0 auto;
}

.sp-pill--dark {
	background: var(--sp-white);
	border-color: rgba(255, 255, 255, 0.9);
	color: var(--sp-green-dark);
	box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.5);
}

/* Hero standfirst: the design breaks it over two lines rather than letting it
   run the full container width on large screens. */
#home .elementor-widget-text-editor {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   Risk Radar

   The section and the card's left panel share one viewport-anchored copy of
   the radar artwork, so the mesh reads as a single continuous field rather
   than two unrelated crops. `fixed` attachment is unreliable on touch
   devices, so below the tablet breakpoint both fall back to `scroll`.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	#quote,
	#quote .e-con {
		background-attachment: scroll !important;
	}
}

/* --------------------------------------------------------------------------
   Select fields

   Elementor wraps the <select> in a div that carries `.elementor-field`, so
   the underline lands on the wrapper while the control keeps its own boxed
   border. This strips the inner box and lines the caret up with the rest of
   the form.
   -------------------------------------------------------------------------- */

/* Matches the generic `.elementor-field-group .elementor-field` underline rule
   that follows it, so the wrapper keeps the border but drops the padding —
   otherwise the wrapper's padding stacks on the select's and the text floats
   well above the line. */
.sp-quote-form .elementor-field-group .elementor-field.elementor-select-wrapper {
	position: relative;
	display: block;
	padding: 0 !important;
	line-height: 0;
}

.sp-quote-form .elementor-select-wrapper select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 14px 26px 13px 2px !important;
	font-family: var(--sp-font-body);
	font-size: 15px;
	/* Same vertical rhythm as the text inputs, so every underline in the row
	   sits on one baseline. */
	line-height: 1.7;
	color: var(--sp-heading);
	cursor: pointer;
}

.sp-quote-form .elementor-select-wrapper select:focus {
	outline: none;
}

/* Elementor's own caret, nudged onto the baseline of the underline. */
.sp-quote-form .elementor-select-wrapper .select-caret-down-wrapper {
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--sp-text);
	width: 12px;
	display: flex;
	align-items: center;
}

.sp-quote-form .elementor-select-wrapper .select-caret-down-wrapper svg {
	width: 12px;
	height: auto;
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   FAQ open / close

   The list is native <details>, so it works without JavaScript. theme.js
   upgrades it: one answer open at a time, and the height is animated rather
   than snapping. The height is only ever set during the transition, so the
   panel stays auto-height when the viewport changes.
   -------------------------------------------------------------------------- */

.sp-faq-a {
	overflow: hidden;
}

.sp-faq-item.is-animating .sp-faq-a {
	transition: height 0.42s var(--sp-ease), opacity 0.32s var(--sp-ease);
}

.sp-faq-item.is-collapsing .sp-faq-a,
.sp-faq-item.is-expanding .sp-faq-a {
	will-change: height;
}

@media (prefers-reduced-motion: reduce) {
	.sp-faq-item.is-animating .sp-faq-a { transition: none; }
}

/* Service cards lift on hover */
.sp-card {
	transition:
		transform 0.45s var(--sp-ease),
		border-color 0.45s var(--sp-ease),
		box-shadow 0.45s var(--sp-ease);
}

.sp-card:hover {
	transform: translateY(-6px);
	background-color: var(--sp-cta-to) !important;
	border-color: var(--sp-cta-to) !important;
	box-shadow: 0 18px 48px -24px rgba(17, 161, 48, 0.55);
}

/* --------------------------------------------------------------------------
   Hover bands

   Service cards and the What We Do rows both fill with brand green on hover
   and reverse everything inside. Elementor writes its colours per element, so
   these need `!important` to win — the alternative is duplicating every
   colour as a hover control on every widget.
   -------------------------------------------------------------------------- */

.sp-card:hover .elementor-heading-title,
.sp-card:hover .elementor-heading-title .sp-accent,
.sp-card:hover .elementor-widget-text-editor,
.sp-card:hover .elementor-widget-text-editor p {
	color: var(--sp-white) !important;
}

.sp-card:hover .elementor-button {
	color: var(--sp-white) !important;
	border-color: var(--sp-white) !important;
	background-color: transparent !important;
}

.sp-card:hover .elementor-button:hover {
	color: var(--sp-cta-to) !important;
	background-color: var(--sp-white) !important;
}

/* The card icons are flat PNG line art, so they are inverted to white rather
   than recoloured. */
.sp-card .elementor-widget-image img {
	transition: filter 0.4s var(--sp-ease);
}

.sp-card:hover .elementor-widget-image img {
	filter: brightness(0) invert(1);
}

/* What We Do rows — same band, bled past the text column. */
.sp-row {
	margin: 0 -24px;
	padding-left: 24px !important;
	padding-right: 24px !important;
	transition:
		background-color 0.35s var(--sp-ease),
		border-color 0.35s var(--sp-ease);
}

.sp-row:hover {
	background-color: var(--sp-green-dark);
	border-bottom-color: transparent;
}

.sp-row:hover .elementor-heading-title,
.sp-row:hover .elementor-heading-title .sp-accent,
.sp-row:hover .elementor-widget-text-editor,
.sp-row:hover .elementor-widget-text-editor p {
	color: var(--sp-white) !important;
}

.sp-row .elementor-widget-image img {
	transition: filter 0.4s var(--sp-ease);
}

.sp-row:hover .elementor-widget-image img {
	filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
	.sp-card,
	.sp-row,
	.sp-faq-item { transition: none; }
}

/* Buttons get a soft lift rather than a colour flip */
.sp-btn .elementor-button,
.elementor-button.sp-btn {
	transition:
		transform 0.35s var(--sp-ease),
		box-shadow 0.35s var(--sp-ease),
		background-color 0.35s var(--sp-ease),
		color 0.35s var(--sp-ease);
}

.sp-btn .elementor-button:hover,
.elementor-button.sp-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -14px rgba(14, 79, 28, 0.7);
}

/* The numbered "What we do" rows */
.sp-row { border-bottom: 1px solid var(--sp-hairline); }

.sp-row__title { transition: color 0.35s var(--sp-ease); }

/* Process steps */
.sp-step { border-bottom: 1px solid var(--sp-hairline); }

/* FAQ accordion — Elementor Pro's accordion, restyled to the design */
.sp-faq .e-n-accordion-item {
	border-bottom: 1px solid var(--sp-hairline);
}

.sp-faq summary { padding: 26px 0 !important; }

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	:root { --sp-section-y: 88px; }
	html { scroll-padding-top: 90px; }
	.sp-marquee__item { font-size: 24px; }
	.sp-marquee .sp-marquee__logo { height: 28px; }
	.sp-marquee .sp-marquee__sep { height: 16px; }
	.sp-marquee__track { gap: 44px; padding-right: 44px; }
}

@media (max-width: 767px) {
	:root { --sp-section-y: 64px; }
	html { scroll-padding-top: 80px; }

	.sp-marquee__item { font-size: 20px; }
	.sp-marquee .sp-marquee__logo { height: 24px; }
	.sp-marquee .sp-marquee__sep { height: 14px; }
	.sp-marquee__track { gap: 32px; padding-right: 32px; animation-duration: 22s; }

	/* Shorter travel on small screens keeps the reveals from feeling sluggish */
	.js-anim [data-sp-anim='up']    { transform: translate3d(0, 20px, 0); }
	.js-anim [data-sp-anim='left'],
	.js-anim [data-sp-anim='right'] { transform: translate3d(0, 20px, 0); }

	.sp-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   8. FAQ disclosure list

   Native <details>/<summary> so it works without JS and is keyboard- and
   screen-reader-friendly out of the box. The matching FAQPage schema is
   emitted from functions.php.
   -------------------------------------------------------------------------- */

.sp-faq-list { width: 100%; }

.sp-faq-item {
	/* Bled out past the content column so the active band runs wider than the
	   text, as it does in the design, without moving the text itself. */
	margin: 0 -24px;
	padding: 0 24px;
	border-bottom: 1px solid var(--sp-hairline);
	transition:
		background-color 0.35s var(--sp-ease),
		border-color 0.35s var(--sp-ease);
}

.sp-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 28px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--sp-font-body);
	font-size: 22px;
	font-weight: 500;
	color: var(--sp-heading);
	transition: color 0.3s var(--sp-ease);
}

.sp-faq-q::-webkit-details-marker { display: none; }

/* --------------------------------------------------------------------------
   FAQ active band

   Hovering — or opening — an item fills it with brand green and reverses
   everything inside it: question, answer and the arrow disc. The rule under
   the question is an inset shadow rather than a border, so turning it on
   cannot shift the height of a panel that is mid-animation.
   -------------------------------------------------------------------------- */

.sp-faq-item:hover,
.sp-faq-item[open] {
	background: var(--sp-green-dark);
	border-bottom-color: transparent;
}

.sp-faq-item:hover .sp-faq-q,
.sp-faq-item[open] .sp-faq-q {
	color: var(--sp-white);
}

.sp-faq-item[open] .sp-faq-q {
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}

.sp-faq-item:hover .sp-faq-a,
.sp-faq-item[open] .sp-faq-a {
	color: rgba(255, 255, 255, 0.86);
}

/* The disc inverts: white face, green arrow. */
.sp-faq-item:hover .sp-faq-icon,
.sp-faq-item[open] .sp-faq-icon {
	background: var(--sp-white);
	color: var(--sp-green-dark);
}

.sp-faq-item:hover .sp-faq-icon svg,
.sp-faq-item[open] .sp-faq-icon svg {
	stroke: currentColor;
	fill: none;
}


.sp-faq-q:focus-visible {
	outline: 2px solid var(--sp-green);
	outline-offset: 4px;
	border-radius: 4px;
}

.sp-faq-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sp-green-dark);
	color: #fff;
	transition: transform 0.4s var(--sp-ease), background-color 0.3s var(--sp-ease);
}

.sp-faq-item[open] .sp-faq-icon {
	transform: rotate(180deg);
}

.sp-faq-a {
	overflow: hidden;
	padding: 0 68px 26px 0;
	padding-top: 22px;
	color: var(--sp-text);
	font-size: 17px;
	line-height: 1.75;
	animation: sp-faq-open 0.42s var(--sp-ease);
}

.sp-faq-a p { margin: 0; }

@keyframes sp-faq-open {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
	.sp-faq-q { font-size: 17px; padding: 20px 0; gap: 14px; }
	.sp-faq-icon { width: 36px; height: 36px; }
	.sp-faq-a { padding-right: 0; font-size: 15px; }
}

/* --------------------------------------------------------------------------
   9. Quote form — Elementor Pro form restyled to the design's underline look
   -------------------------------------------------------------------------- */

.sp-quote-form .elementor-field-group .elementor-field {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(51, 51, 51, 0.22) !important;
	border-radius: 0 !important;
	padding: 14px 2px !important;
	font-family: var(--sp-font-body);
	font-size: 15px;
	color: var(--sp-heading);
	transition: border-color 0.3s var(--sp-ease);
}

.sp-quote-form .elementor-field-group .elementor-field:focus {
	border-bottom-color: var(--sp-green) !important;
	box-shadow: none !important;
	outline: none;
}

.sp-quote-form .elementor-field::placeholder { color: #9A9A9A; opacity: 1; }

.sp-quote-form textarea.elementor-field {
	border: 1px solid rgba(51, 51, 51, 0.22) !important;
	border-radius: 10px !important;
	padding: 14px !important;
	min-height: 110px;
	resize: vertical;
}

.sp-quote-form .elementor-button {
	width: 100%;
	justify-content: center;
	padding: 18px 28px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: transform 0.3s var(--sp-ease), box-shadow 0.3s var(--sp-ease), background-color 0.3s var(--sp-ease);
}

.sp-quote-form .elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -14px rgba(14, 79, 28, 0.8);
}

/* --------------------------------------------------------------------------
   10. Site header

   Sticky rather than fixed: it stays with the visitor on scroll but still
   occupies flow, so the hero starts below it exactly as the design shows
   instead of sliding underneath.
   -------------------------------------------------------------------------- */

.sp-header {
	position: sticky !important;
	top: 0;
	inset-inline: auto;
	z-index: 999;
	transition: box-shadow 0.35s var(--sp-ease);
}

/* A hairline shadow once the page has moved, so the bar separates from the
   cream sections without a hard border. */
body:not(.elementor-editor-active) .sp-header {
	box-shadow: 0 1px 0 rgba(51, 51, 51, 0.08);
}

.sp-header-cta .elementor-button {
	white-space: nowrap;
}

/* Nav underline indicator */
.sp-header .elementor-nav-menu--main .elementor-item {
	font-weight: 500;
}

@media (max-width: 1024px) {
	.sp-header-cta .elementor-button {
		padding: 13px 22px;
		font-size: 15px;
	}
}

@media (max-width: 767px) {
	.sp-header-cta .elementor-button {
		padding: 11px 16px;
		font-size: 13.5px;
		border-radius: 8px;
	}

	/* Burger sits between the logo and the CTA */
	.sp-header .elementor-menu-toggle {
		padding: 6px;
	}

	/* Elementor's full-screen dropdown gets the brand treatment */
	.sp-header .elementor-nav-menu--dropdown {
		box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.35);
		border-radius: 0 0 14px 14px;
		overflow: hidden;
	}
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.elementor-social-icon {
	background-color: transparent !important;
	transition: transform 0.3s var(--sp-ease), color 0.3s var(--sp-ease);
}

.elementor-social-icon:hover {
	transform: translateY(-3px);
	background-color: transparent !important;
}

.elementor-social-icon svg,
.elementor-social-icon i {
	fill: #fff;
	color: #fff;
	transition: fill 0.3s var(--sp-ease), color 0.3s var(--sp-ease);
}

.elementor-social-icon:hover svg,
.elementor-social-icon:hover i {
	fill: var(--sp-green);
	color: var(--sp-green);
}

/* Footer menus: remove Elementor's default item padding box */
footer .elementor-nav-menu--main .elementor-item,
.elementor-location-footer .elementor-nav-menu--main .elementor-item {
	padding-inline: 0 !important;
}

/* --------------------------------------------------------------------------
   12. Small-screen header fit

   Three items (logo, burger, CTA) have to share a 390px row without
   overflowing, so the CTA is allowed to shrink and the logo is capped.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sp-header > .e-con-inner,
	.sp-header {
		flex-wrap: nowrap !important;
		gap: 10px !important;
	}

	.sp-header .elementor-widget-theme-site-logo {
		flex: 0 1 auto;
		min-width: 0;
	}

	.sp-header .sp-header-cta {
		flex: 0 1 auto;
		min-width: 0;
	}

	.sp-header-cta .elementor-button {
		padding: 10px 13px;
		font-size: 12.5px;
	}
}

@media (max-width: 400px) {
	.sp-header-cta .elementor-button {
		padding: 9px 11px;
		font-size: 11.5px;
	}
}

/* Belt and braces against sideways scroll on phones. */
html, body { max-width: 100%; overflow-x: clip; }