/*
Theme Name: Alshraidy Holding Group
Theme URI: https://www.alshraidy.com
Author: Alshraidy Holding Group
Description: قالب ووردبريس حديث لمجموعة الشريدي القابضة — بنغازي، ليبيا. واجهة بانورامية وصور بحواف ناعمة للخدمات والقطاعات والمشاريع، بهوية بيضاء وكحلية ولمسات ذهبية. يدعم العربية RTL والإنجليزية LTR والتخصيص عبر WordPress.
Version: 1.3.15
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alshraidy
Tags: rtl-language-support, translation-ready, custom-colors, custom-logo, one-column, full-width-template
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

/* Light palette on warm ivory — premium print, not stark white.
   Two golds, because one cannot do both jobs on a light ground:
     --als-gold       deep antique gold, 5.8:1 on ivory — every gold TEXT and
                      every interactive boundary (button border, focus ring).
     --als-gold-line  luminous gold, 2.6:1 — ornamental hairlines ONLY. Never
                      put text or a state indicator in this colour.
   Emphasis rises with darkness: gold-soft 3.9 < gold 5.8 < champagne 8.9. */
:root {
	--als-bg: #ffffff;
	--als-surface: #f5f7f8;
	--als-elevated: #ebe5d9;
	--als-gold: #7e5c1e;
	--als-gold-line: #c0983f;
	--als-champagne: #5c4211;
	--als-gold-soft: #9c7729;
	--als-fg: #0b2c50;
	--als-fg-soft: #2e2820;
	--als-muted: #655c4f;
	--als-border: #ded5c4;
	--als-danger: #9b3412;

	/* Cairo carries both scripts, so Arabic and Latin share one voice.
	   The two tokens stay separate as the seam for pairing a different Latin
	   face later — swap --als-font-en alone and nothing else has to change. */
	--als-font-ar: "Cairo", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
	--als-font-en: "Cairo", ui-sans-serif, system-ui, sans-serif;
	--als-font-heading: var(--als-font-ar);
	--als-font-body: var(--als-font-ar);

	--als-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--als-max: 1400px;
}

html[lang^="en"],
html[dir="ltr"] {
	--als-font-heading: var(--als-font-en);
	--als-font-body: var(--als-font-en);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	border-color: var(--als-border);
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	scrollbar-color: var(--als-gold) var(--als-surface);
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 0.7rem;
}

::-webkit-scrollbar-track {
	background: var(--als-surface);
}

::-webkit-scrollbar-thumb {
	border: 2px solid var(--als-surface);
	background: var(--als-gold);
}

body {
	margin: 0;
	background-color: var(--als-bg);
	color: var(--als-fg);
	font-family: var(--als-font-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.als-locked {
	overflow: hidden;
}

h1,
h2,
h3,
h4 {
	font-family: var(--als-font-heading);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
	font-weight: 600;
}

p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:where(a, button, input, textarea, select):focus-visible {
	outline: 1px solid var(--als-gold);
	outline-offset: 3px;
}

::selection {
	background: var(--als-gold);
	color: var(--als-bg);
}

/* Arabic is a connected script: letter-spacing prises the joined glyphs apart
   and the linking strokes stretch into gaps. Tracking is a Latin device, so it
   is dropped wherever the text is Arabic. Keyed on [dir], which the language
   switcher rewrites live, so English gets its tracking back instantly.
   Latin-only elements — the eyebrows, the ALSHRAIDY wordmark, AR|EN, the 01/02
   numerals, dates — keep their tracking in both languages. */
html[dir="rtl"] :is(h1, h2, h3, h4),
html[dir="rtl"] .als-btn,
html[dir="rtl"] .als-link,
html[dir="rtl"] .als-hero__scroll,
html[dir="rtl"] .als-contact__dt,
html[dir="rtl"] .als-form__label {
	letter-spacing: normal;
}

/* Alpine templates must not flash before the runtime boots. */
[x-cloak] {
	display: none !important;
}

.als-skip {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 100;
	background: var(--als-gold);
	color: var(--als-bg);
	padding: 0.75rem 1.25rem;
	font-size: 0.85rem;
}

.als-skip:focus {
	inset-inline-start: 1rem;
	top: 1rem;
}

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

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.als-container {
	width: 100%;
	max-width: var(--als-max);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.als-section {
	padding-block: 7rem;
}

.als-section--tight {
	padding-block: 6rem;
}

.als-bordered-y {
	border-block: 1px solid var(--als-border);
}

.als-bordered-t {
	border-top: 1px solid var(--als-border);
}

.als-surface {
	background-color: var(--als-surface);
}

.als-grid {
	display: grid;
}

.als-eyebrow {
	font-size: 0.7rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--als-gold);
	font-weight: 500;
	margin: 0;
}

.als-rule {
	display: block;
	height: 1px;
	width: 4rem;
	background: var(--als-gold-line);
	border: 0;
}

.als-title {
	font-size: 1.875rem;
	line-height: 1.35;
	margin-top: 1.75rem;
}

.als-title--narrow {
	max-width: 34rem;
}

.als-intro {
	max-width: 42rem;
}

.als-intro__body {
	margin-top: 1.5rem;
	line-height: 2;
}

.als-lede {
	color: var(--als-muted);
	line-height: 2.1;
}

.als-muted {
	color: var(--als-muted);
}

/* Scroll-in reveal.
   Content is only hidden while html.als-reveal-ready is present. That class is
   set by the inline head script and pulled back off after 3s if site.js never
   arrives, so a blocked script can never leave the page blank. */
.als-reveal {
	transition:
		opacity 700ms var(--als-ease),
		transform 700ms var(--als-ease);
}

html.als-reveal-ready .als-reveal {
	opacity: 0;
	transform: translateY(24px);
}

html.als-reveal-ready .als-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   4. Buttons & links
   ========================================================================== */

.als-btn {
	display: inline-block;
	border: 1px solid var(--als-gold);
	padding: 1rem 2rem;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	color: var(--als-gold);
	background: transparent;
	transition:
		background-color 500ms var(--als-ease),
		color 500ms var(--als-ease);
	cursor: pointer;
}

.als-btn:hover,
.als-btn:focus-visible {
	background: var(--als-gold);
	color: var(--als-bg);
}

.als-btn[disabled] {
	opacity: 0.55;
	cursor: progress;
}

.als-btn--wide {
	padding-inline: 2.25rem;
}

.als-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	color: var(--als-fg);
}

.als-link__rule {
	display: block;
	height: 1px;
	width: 3.5rem;
	background: var(--als-gold-line);
	transform: scaleX(0.57);
	transform-origin: left center;
	transition: transform 500ms var(--als-ease);
}

.als-link:hover .als-link__rule,
.als-link:focus-visible .als-link__rule {
	transform: scaleX(1);
}

html[dir="rtl"] .als-link__rule {
	transform-origin: right center;
}

.als-link--gold {
	color: var(--als-gold);
	font-size: 0.875rem;
	letter-spacing: normal;
}

/* ==========================================================================
   5. Header
   ========================================================================== */

.als-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 50;
	padding-block: 1.75rem;
	border-bottom: 1px solid transparent;
	transition:
		background-color 500ms var(--als-ease),
		border-color 500ms var(--als-ease),
		padding 500ms var(--als-ease);
}

.als-header.is-scrolled {
	padding-block: 1rem;
	border-bottom-color: var(--als-border);
	background-color: rgba(251, 249, 245, 0.95);
	background-color: color-mix(in srgb, var(--als-bg) 95%, transparent);
}

.als-view-interior .als-header {
	border-bottom-color: var(--als-border);
	background-color: rgba(251, 249, 245, 0.97);
	background-color: color-mix(in srgb, var(--als-bg) 97%, transparent);
}

.als-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.als-brand {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.als-brand__line1 {
	font-family: var(--als-font-en);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	color: var(--als-fg);
}

.als-brand__line2 {
	font-family: var(--als-font-en);
	margin-top: 0.25rem;
	font-size: 0.6rem;
	letter-spacing: 0.34em;
	color: var(--als-gold);
}

.als-brand__logo {
	max-height: 46px;
	width: auto;
}

.als-brand__lockup {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.als-brand__names {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.als-brand__name {
	white-space: nowrap;
}

.als-brand__name--ar {
	font-family: var(--als-font-ar);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--als-fg);
}

.als-brand__name--en {
	font-family: var(--als-font-en);
	margin-top: 0.15rem;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--als-gold);
}

.als-nav {
	display: none;
	align-items: center;
	gap: 2.25rem;
}

.als-nav__link {
	position: relative;
	white-space: nowrap;
	font-size: 0.82rem;
	color: var(--als-muted);
	transition: color 300ms var(--als-ease);
}

.als-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -0.5rem;
	height: 1px;
	background: var(--als-gold-line);
	transform: scaleX(0);
	transition: transform 500ms var(--als-ease);
}

.als-nav__link:hover,
.als-nav__link:focus-visible,
.als-nav__link.is-current,
.als-nav__link[aria-current="page"] {
	color: var(--als-fg);
}

.als-nav__link:hover::after,
.als-nav__link:focus-visible::after,
.als-nav__link.is-current::after,
.als-nav__link[aria-current="page"]::after {
	transform: scaleX(1);
}

.als-header__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.als-lang {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--als-font-en);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
}

.als-lang__btn {
	color: var(--als-muted);
	transition: color 300ms var(--als-ease);
}

.als-lang__btn:hover {
	color: var(--als-fg);
}

.als-lang__btn.is-active {
	color: var(--als-gold);
}

.als-lang__sep {
	color: var(--als-border);
}

.als-burger {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.25rem 0;
}

.als-burger span {
	display: block;
	height: 1px;
	width: 1.75rem;
	background: var(--als-fg);
}

/* Mobile overlay menu */
.als-mobile {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	background: var(--als-bg);
}

.als-mobile__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.75rem;
}

.als-mobile__close {
	position: relative;
	width: 2rem;
	height: 2rem;
	color: var(--als-fg);
}

.als-mobile__close-icon::before,
.als-mobile__close-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.65rem;
	height: 1px;
	background: currentColor;
}

.als-mobile__close-icon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.als-mobile__close-icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.als-mobile__nav {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.als-mobile__link {
	font-family: var(--als-font-heading);
	font-size: 1.5rem;
	padding-bottom: 1.25rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--als-border);
}

.als-mobile__link.is-current,
.als-mobile__link[aria-current="page"] {
	border-bottom-color: var(--als-gold-line);
	color: var(--als-gold);
}

.als-footer__nav a.is-current,
.als-footer__nav a[aria-current="page"] {
	color: var(--als-gold);
}

/* ==========================================================================
   6. Media frames
   ========================================================================== */

.als-media {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(135deg, var(--als-elevated) 0%, var(--als-surface) 55%, var(--als-bg) 100%);
}

.als-media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Empty image slots keep the composition intact with a quiet gold hairline. */
.als-media--empty::after {
	content: "";
	position: absolute;
	inset-inline-start: 12%;
	top: 50%;
	width: 4rem;
	height: 1px;
	background: var(--als-gold-line);
	opacity: 0.7;
}

.als-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.als-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.als-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 92vh;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 70% 0%, var(--als-elevated) 0%, var(--als-bg) 70%);
}

/* Dark type on a photo needs a scrim, but a flat wash bleaches the whole
   image. Two shaped layers instead: this element grounds the section top and
   bottom, and ::before darkens only the edge the copy sits against. The far
   side of the frame stays close to the untouched photograph. */
.als-hero__overlay {
	background-image:
		/* the header's dark wordmark and nav must clear any photo — measured
		   at 4.99:1 for the muted nav links over a dark photo pixel */
		linear-gradient(
			to bottom,
			rgba(251, 249, 245, 0.93) 0%,
			rgba(251, 249, 245, 0.46) 12%,
			rgba(251, 249, 245, 0) 24%
		),
		/* the section melts into the page below */
		linear-gradient(
			to top,
			rgb(251, 249, 245) 0%,
			rgba(251, 249, 245, 0.6) 18%,
			rgba(251, 249, 245, 0.1) 48%,
			rgba(251, 249, 245, 0) 100%
		);
}

/* Readability scrim.
   Default (phones and tablets): the headline is 56rem wide and the viewport
   is narrower than that, so the copy spans the full frame and there is no
   clear side to protect. The scrim runs bottom-to-top instead — type sits on
   near-solid ground and the photograph keeps the top of the frame. */
.als-hero__overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		rgb(251, 249, 245) 0%,
		rgba(251, 249, 245, 0.95) 58%,
		rgba(251, 249, 245, 0.9) 78%,
		rgba(251, 249, 245, 0.34) 91%,
		rgba(251, 249, 245, 0.05) 100%
	);
}

/* From 1280px the frame is finally wider than the copy, so the scrim can hug
   the inline start and let the photograph through on the far side.
   The hold at 90% out to the 50% mark is not decorative: the body paragraph is
   42rem wide and its far edge lands near the 52% mark at every desktop width.
   Anything that falls off sooner drops that edge onto the bare photo — the
   same defect the phone layout made obvious. Measured worst case 4.63:1 for
   the muted paragraph over a dark photo pixel, at the 1280px breakpoint.
   Kept beside the base rule so the two variants read as a pair.
   "to left" puts the dense stop on the right, where Arabic copy begins. */
@media (min-width: 1280px) {
	.als-hero__overlay::before {
		background-image: linear-gradient(
			to left,
			rgba(251, 249, 245, 0.94) 0%,
			rgba(251, 249, 245, 0.9) 50%,
			rgba(251, 249, 245, 0.76) 64%,
			rgba(251, 249, 245, 0.2) 74%,
			rgba(251, 249, 245, 0.04) 100%
		);
	}

	html[dir="ltr"] .als-hero__overlay::before {
		background-image: linear-gradient(
			to right,
			rgba(251, 249, 245, 0.94) 0%,
			rgba(251, 249, 245, 0.9) 50%,
			rgba(251, 249, 245, 0.76) 64%,
			rgba(251, 249, 245, 0.2) 74%,
			rgba(251, 249, 245, 0.04) 100%
		);
	}
}

.als-hero__inner {
	position: relative;
	width: 100%;
	padding-top: 10rem;
	padding-bottom: 6rem;
}

.als-hero__title {
	margin-top: 2rem;
	max-width: 56rem;
	font-size: clamp(2.25rem, 6vw, 4.1rem);
	font-weight: 600;
	line-height: 1.18;
}

.als-hero__body {
	margin-top: 2rem;
	max-width: 42rem;
	font-size: 0.98rem;
	line-height: 2.05;
	color: var(--als-muted);
}

.als-hero__actions {
	margin-top: 2.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
}

.als-hero__scroll {
	display: none;
	margin-top: 5rem;
	font-size: 0.68rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--als-muted);
}

.als-hero__rule {
	margin-top: 1.5rem;
}

/* ==========================================================================
   8. About
   ========================================================================== */

.als-about__grid {
	gap: 3.5rem;
	align-items: center;
}

.als-about__media {
	height: 380px;
}

.als-about__body {
	margin-top: 2rem;
	max-width: 36rem;
}

html[dir="rtl"] .als-page-section .als-about__text .als-eyebrow {
	letter-spacing: normal;
	text-transform: none;
}

.als-about__link {
	margin-top: 2.5rem;
}

.als-home-about {
	position: relative;
	overflow: hidden;
}

.als-home-about .als-about__media::before {
	content: "";
	position: absolute;
	inset: 1rem;
	z-index: 2;
	border: 1px solid rgba(251, 249, 245, 0.62);
	border-color: color-mix(in srgb, var(--als-bg) 62%, transparent);
	pointer-events: none;
}

/* ==========================================================================
   9. Vision & mission
   ========================================================================== */

.als-vision__grid {
	gap: 3.5rem;
}

.als-vision__col + .als-vision__col {
	border-top: 1px solid var(--als-border);
	padding-top: 3.5rem;
}

.als-vision__heading {
	margin-top: 1.5rem;
	font-size: 1.5rem;
}

.als-vision__body {
	margin-top: 1.5rem;
	max-width: 32rem;
	line-height: 2.1;
	color: var(--als-muted);
}

/* ==========================================================================
   10. Numbered list (strategy)
   ========================================================================== */

.als-numbered {
	margin-top: 4rem;
	border-top: 1px solid var(--als-border);
}

.als-numbered__row {
	display: grid;
	gap: 1rem;
	padding-block: 2rem;
	border-bottom: 1px solid var(--als-border);
}

.als-numbered__num {
	font-family: var(--als-font-en);
	font-size: 1.5rem;
	color: var(--als-gold-soft);
	transition: color 500ms var(--als-ease);
}

.als-numbered__row:hover .als-numbered__num {
	color: var(--als-champagne);
}

.als-numbered__text {
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--als-fg-soft);
}

/* ==========================================================================
   11. Sectors
   ========================================================================== */

.als-sectors__grid {
	margin-top: 4rem;
	gap: 3rem;
}

.als-sectors__stage {
	display: none;
	position: relative;
	height: 600px;
	overflow: hidden;
}

.als-sectors__stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 700ms var(--als-ease);
}

.als-sectors__stage img.is-active {
	opacity: 1;
}

.als-sectors__stage-veil {
	/* No type sits over the sector stage, so it only needs the faintest wash
	   to keep the photograph in the same key as the page. */
	background: rgba(251, 249, 245, 0.08);
	background: color-mix(in srgb, var(--als-bg) 22%, transparent);
}

.als-sectors__item {
	border-bottom: 1px solid var(--als-border);
}

.als-sectors__btn {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 1.5rem;
	padding-block: 1.5rem;
	text-align: start;
}

.als-sectors__num {
	font-family: var(--als-font-en);
	font-size: 0.875rem;
	color: var(--als-muted);
	transition: color 500ms var(--als-ease);
}

.als-sectors__dash {
	display: block;
	flex: none;
	height: 1px;
	width: 2.5rem;
	opacity: 0.4;
	background: var(--als-gold-line);
	transform: scaleX(0.4);
	transform-origin: left center;
	transition:
		transform 500ms var(--als-ease),
		opacity 500ms var(--als-ease);
}

.als-sectors__name {
	font-family: var(--als-font-heading);
	font-size: 1.125rem;
	color: var(--als-muted);
	transition: color 500ms var(--als-ease);
}

.als-sectors__btn.is-active .als-sectors__num {
	color: var(--als-gold);
}

.als-sectors__btn.is-active .als-sectors__dash {
	transform: scaleX(1);
	opacity: 1;
}

html[dir="rtl"] .als-sectors__dash {
	transform-origin: right center;
}

.als-sectors__btn.is-active .als-sectors__name {
	color: var(--als-fg);
}

.als-sectors__thumb {
	height: 14rem;
	margin-bottom: 1.5rem;
}

/* ==========================================================================
   12. Services
   ========================================================================== */

.als-services__wrap {
	margin-top: 5rem;
}

.als-services__grid {
	display: grid;
	gap: 3rem;
}

.als-services__item {
	display: flex;
	min-width: 0;
	height: 100%;
	flex-direction: column;
}

.als-services__media {
	aspect-ratio: 6 / 5;
}

.als-services__body {
	display: grid;
	align-content: start;
	gap: 1.25rem;
	flex: 1;
	padding-block: 1.5rem 1.75rem;
	border-bottom: 1px solid var(--als-border);
}

.als-services__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.als-services__num {
	margin: 0;
	font-family: var(--als-font-en);
	font-size: 0.875rem;
	color: var(--als-gold);
}

.als-services__rule {
	display: block;
	width: 3.5rem;
	height: 1px;
	background: var(--als-gold-line);
}

.als-services__text {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--als-fg-soft);
}

.als-services__intro {
	max-width: 44rem;
	margin-top: 1.75rem;
}

.als-home-services {
	background-color: var(--als-elevated);
}

.als-services__footer {
	display: flex;
	justify-content: center;
	margin-top: 4rem;
}

/* ==========================================================================
   13. Companies
   ========================================================================== */

.als-companies__list {
	margin-top: 4rem;
	border-top: 1px solid var(--als-border);
}

.als-companies__row {
	display: grid;
	gap: 0.75rem;
	align-items: center;
	padding-block: 2.25rem;
	border-bottom: 1px solid var(--als-border);
	transition: background-color 500ms var(--als-ease);
}

.als-companies__row:hover {
	background-color: var(--als-surface);
}

/* 12px, so it takes the AA-safe gold rather than the softer display gold. */
.als-companies__num {
	font-family: var(--als-font-en);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: var(--als-gold);
}

.als-companies__name {
	font-size: 1.125rem;
	line-height: 1.45;
}

.als-companies__cat {
	font-size: 0.875rem;
	color: var(--als-muted);
}

.als-companies__dash {
	display: none;
	height: 1px;
	width: 3rem;
	justify-self: end;
	background: var(--als-gold-line);
	transform: scaleX(0.67);
	transform-origin: right center;
	transition: transform 500ms var(--als-ease);
}

.als-companies__row:hover .als-companies__dash {
	transform: scaleX(1);
}

html[dir="rtl"] .als-companies__dash {
	transform-origin: left center;
}

/* ==========================================================================
   14. Partners
   ========================================================================== */

.als-partners__grid {
	margin-top: 4rem;
	gap: 0;
	border-top: 1px solid var(--als-border);
}

.als-partners__item {
	display: grid;
	gap: 2rem;
	padding-block: 3rem;
	border-bottom: 1px solid var(--als-border);
}

.als-partners__item:last-child {
	padding-block-end: 0;
	border-bottom: 0;
}

.als-partners__media {
	width: 100%;
	aspect-ratio: 3 / 2;
}

.als-partners__content {
	min-width: 0;
	align-self: center;
}

.als-partners__name {
	width: 100%;
	margin-top: 1.5rem;
	font-family: var(--als-font-en);
	font-size: 1.25rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

html[dir="rtl"] .als-partners__name {
	text-align: right;
}

html[dir="ltr"] .als-partners__name {
	text-align: left;
}

.als-partners__role {
	margin-top: 0.75rem;
	font-weight: 500;
	line-height: 1.75;
	color: var(--als-fg-soft);
}

.als-partners__meta {
	margin-top: 1.5rem;
}

.als-partners__meta li {
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--als-champagne);
}

html[dir="rtl"] .als-partners__meta li {
	letter-spacing: normal;
}

.als-partners__meta li + li {
	margin-top: 0.5rem;
}

.als-partners__body {
	margin-top: 1.75rem;
	max-width: 36rem;
	line-height: 2.1;
	color: var(--als-muted);
}

.als-partners__item--detailed .als-partners__meta {
	display: grid;
	width: 100%;
	border-block: 1px solid var(--als-border);
}

.als-partners__item--detailed .als-partners__meta li {
	padding-block: 0.75rem;
}

.als-partners__item--detailed .als-partners__meta li + li {
	margin-top: 0;
	border-top: 1px solid var(--als-border);
}

.als-partners__details {
	display: grid;
	gap: 3.5rem;
	padding-block-start: 3rem;
	border-top: 1px solid var(--als-border);
}

.als-partners__capabilities {
	display: grid;
	gap: 2.5rem;
}

.als-partners__capabilities-copy {
	display: grid;
	gap: 1.5rem;
	max-width: 70ch;
}

.als-partners__capabilities-title {
	font-size: clamp(1.5rem, 3vw, 2.15rem);
	line-height: 1.45;
}

.als-partners__overview {
	display: grid;
	gap: 1.25rem;
}

.als-partners__detail-media {
	width: 100%;
	aspect-ratio: 3 / 2;
}

.als-partners__overview p,
.als-partners__project-body,
.als-partners__note-body {
	line-height: 2;
	color: var(--als-muted);
}

.als-partners__details-heading {
	margin-bottom: 1.75rem;
	font-size: clamp(1.5rem, 3vw, 2.15rem);
	line-height: 1.45;
}

.als-partners__projects-grid {
	display: grid;
	border-top: 1px solid var(--als-border);
}

.als-partners__project {
	padding-block: 1.75rem;
	border-bottom: 1px solid var(--als-border);
}

.als-partners__project-title {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--als-fg-soft);
}

.als-partners__project-body {
	margin-top: 0.75rem;
}

.als-partners__notes {
	display: grid;
	gap: 3rem;
}

.als-partners__note {
	padding-block-start: 2rem;
	border-top: 1px solid var(--als-border);
}

.als-partners__note-title {
	font-size: 1.2rem;
	line-height: 1.65;
}

.als-partners__note-body {
	margin-top: 1rem;
}

/* ==========================================================================
   15. Projects
   ========================================================================== */

.als-projects__grid {
	margin-top: 4rem;
	gap: 4rem;
}

.als-projects__name {
	margin-top: 2rem;
	font-size: 1.25rem;
	line-height: 1.45;
}

.als-projects__summary {
	margin-top: 1rem;
	max-width: 30rem;
	line-height: 2;
	color: var(--als-muted);
}

.als-projects__meta {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--als-border);
}

.als-projects__meta li {
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--als-champagne);
}

.als-projects__meta li + li {
	margin-top: 0.5rem;
}

.als-projects__body {
	margin-top: 1.5rem;
	max-width: 30rem;
	line-height: 2.1;
	color: var(--als-muted);
}

.als-projects__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.5rem;
}

.als-projects__tags li {
	border: 1px solid var(--als-border);
	padding: 0.4rem 0.9rem;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--als-fg-soft);
}

/* ==========================================================================
   16. Statement & final CTA
   ========================================================================== */

/* These two bands carry no photograph. They sit next to each other, so they
   alternate ground instead: the statement takes the tinted surface, the CTA
   returns to page ivory between two hairlines. */
.als-statement {
	background: var(--als-surface);
}

.als-statement__inner {
	padding-block: 7rem;
	max-width: 48rem;
}

.als-statement__quote {
	margin-top: 2.5rem;
	font-family: var(--als-font-heading);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.6;
}

.als-statement__body {
	margin-top: 2.25rem;
	max-width: 36rem;
	line-height: 2.1;
	color: var(--als-muted);
}

.als-cta {
	border-block: 1px solid var(--als-border);
	background: var(--als-bg);
}

.als-cta__inner {
	padding-block: 7rem;
	text-align: center;
}

.als-cta__title {
	margin-inline: auto;
	max-width: 42rem;
	font-size: clamp(1.875rem, 4vw, 2.8rem);
}

.als-cta__body {
	margin: 1.75rem auto 0;
	max-width: 36rem;
	line-height: 2;
	color: var(--als-muted);
}

.als-cta__btn {
	margin-top: 2.75rem;
}

/* ==========================================================================
   17. Contact
   ========================================================================== */

.als-contact__grid {
	gap: 4rem;
}

.als-contact__details {
	margin-top: 3rem;
}

.als-contact__details > div + div {
	margin-top: 2rem;
}

.als-contact__dt {
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--als-muted);
}

.als-contact__dd {
	margin: 0.5rem 0 0;
	color: var(--als-fg-soft);
}

.als-contact__dd a {
	transition: color 300ms var(--als-ease);
}

.als-contact__dd a:hover {
	color: var(--als-gold);
}

.als-form {
	display: grid;
	gap: 2rem;
}

.als-form__label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--als-muted);
}

.als-form__field {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--als-border);
	background: transparent;
	padding-block: 0.75rem;
	font-family: inherit;
	font-size: 0.875rem;
	color: var(--als-fg);
	caret-color: var(--als-gold);
	border-radius: 0;
	transition: border-color 300ms var(--als-ease);
	-webkit-appearance: none;
	appearance: none;
}

.als-form__field:focus {
	outline: none;
	border-bottom-color: var(--als-gold);
}

.als-form__field:user-invalid {
	border-bottom-color: var(--als-danger);
}

textarea.als-form__field {
	resize: none;
}

/* Honeypot — hidden from people, visible to naive bots. */
.als-form__trap {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

.als-form__note {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	min-height: 1.25rem;
	color: var(--als-champagne);
}

.als-form__note.is-error {
	color: var(--als-danger);
}

/* ==========================================================================
   18. Footer
   ========================================================================== */

.als-footer {
	border-top: 1px solid var(--als-border);
	background: var(--als-bg);
	padding-block: 5rem;
}

.als-footer__grid {
	gap: 3.5rem;
}

.als-footer__statement {
	margin-top: 1.75rem;
	max-width: 24rem;
	font-size: 0.875rem;
	line-height: 2;
	color: var(--als-muted);
}

/* Four visual columns from three grid children: the link list splits itself
   with CSS columns, so the footer keeps a single <nav> landmark instead of
   handing screen readers two identically named ones. */
.als-footer__nav ul {
	column-count: 2;
	column-gap: 2rem;
}

.als-footer__nav li {
	break-inside: avoid;
	margin-bottom: 1rem;
}

.als-footer__nav li:last-child {
	margin-bottom: 0;
}

.als-footer__nav a,
.als-footer__contact a {
	font-size: 0.875rem;
	color: var(--als-muted);
	transition: color 300ms var(--als-ease);
}

.als-footer__nav a:hover,
.als-footer__contact a:hover {
	color: var(--als-gold);
}

.als-footer__contact {
	font-size: 0.875rem;
	color: var(--als-muted);
}

.als-footer__contact p + p {
	margin-top: 0.75rem;
}

.als-footer__bottom {
	margin-top: 4rem;
	border-top: 1px solid var(--als-border);
	padding-top: 2rem;
}

.als-footer__rights {
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--als-muted);
}

/* ==========================================================================
   19. "Under development" holding page
   ========================================================================== */

.als-soon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 3rem 1.5rem;
	text-align: center;
}

.als-soon__inner {
	width: 100%;
	max-width: 34rem;
}

.als-soon__brand {
	align-items: center;
}

.als-soon__rule {
	margin: 2.75rem auto 0;
}

.als-soon__title {
	margin-top: 2.5rem;
	font-size: clamp(1.75rem, 6vw, 2.6rem);
	font-weight: 600;
	line-height: 1.3;
}

.als-soon__body {
	margin: 1.75rem auto 0;
	max-width: 28rem;
	line-height: 2.05;
	color: var(--als-muted);
}

.als-soon__contact {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--als-border);
}

.als-soon__contact-label {
	font-size: 0.7rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--als-gold);
	margin-bottom: 1.25rem;
}

html[dir="rtl"] .als-soon__contact-label {
	letter-spacing: normal;
	font-size: 0.8rem;
}

.als-soon__contact p + p {
	margin-top: 0.6rem;
}

.als-soon__contact a {
	color: var(--als-fg-soft);
	transition: color 300ms var(--als-ease);
}

.als-soon__contact a:hover {
	color: var(--als-gold);
}

.als-soon__place {
	margin-top: 2.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: var(--als-muted);
}

html[dir="rtl"] .als-soon__place {
	letter-spacing: normal;
}

/* ==========================================================================
   20. Interior pages (page.php / single.php / 404)
   ========================================================================== */

.als-page {
	padding-top: 12rem;
	padding-bottom: 7rem;
}

.als-page__title {
	font-size: clamp(2rem, 5vw, 3rem);
}

.als-page__rule {
	margin-top: 2rem;
}

.als-page__thumb {
	margin-top: 3rem;
	max-height: 460px;
}

.als-page__actions {
	margin-top: 3rem;
}

.als-page__list {
	margin-top: 4rem;
	border-top: 1px solid var(--als-border);
}

.als-page__item {
	padding-block: 2.5rem;
	border-bottom: 1px solid var(--als-border);
}

.als-page__item-title {
	font-size: 1.5rem;
	transition: color 300ms var(--als-ease);
}

.als-page__item a:hover .als-page__item-title {
	color: var(--als-gold);
}

.als-page__meta {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--als-gold);
}

.als-page__item .als-page__content {
	margin-top: 1.25rem;
}

.als-page__pages,
.navigation.pagination {
	margin-top: 3rem;
	display: flex;
	gap: 1rem;
	font-size: 0.875rem;
	color: var(--als-muted);
}

.navigation.pagination .current {
	color: var(--als-gold);
}

.als-page__content {
	margin-top: 3rem;
	max-width: 46rem;
	line-height: 2.05;
	color: var(--als-muted);
}

.als-page__content > * + * {
	margin-top: 1.5rem;
}

.als-page__content h2,
.als-page__content h3 {
	color: var(--als-fg);
	margin-top: 3rem;
}

.als-page__content a {
	color: var(--als-gold);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.als-page__content blockquote {
	border-inline-start: 1px solid var(--als-gold-line);
	padding-inline-start: 1.5rem;
	margin-inline: 0;
	color: var(--als-fg);
}

.als-page__content img {
	margin-block: 2rem;
}

/* Editor alignment classes WordPress expects a theme to honour. */
.alignleft {
	float: left;
	margin: 0.5rem 1.5rem 1.5rem 0;
}

.alignright {
	float: right;
	margin: 0.5rem 0 1.5rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide,
.alignfull {
	max-width: none;
}

.wp-caption-text,
.gallery-caption {
	font-size: 0.8rem;
	color: var(--als-muted);
}

.sticky,
.bypostauthor {
	/* Required by the theme review guidelines. */
	position: relative;
}

/* ==========================================================================
   21. Corporate page system
   ========================================================================== */

.als-page-hero {
	position: relative;
	overflow: hidden;
	padding-block: 11rem 5.5rem;
	border-bottom: 1px solid var(--als-border);
	background: var(--als-bg);
}

.als-page-hero::after {
	content: "";
	position: absolute;
	inset-inline-end: clamp(1.5rem, 7vw, 7rem);
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(to bottom, transparent, var(--als-border) 28%, var(--als-border) 72%, transparent);
	pointer-events: none;
}

.als-page-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 2rem;
}

.als-page-hero__label {
	color: var(--als-gold);
	font-family: var(--als-font-en);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.als-page-hero__rule {
	margin-top: 0.25rem;
}

.als-page-hero__title {
	max-width: 14ch;
	font-size: clamp(2.45rem, 8vw, 5.4rem);
	line-height: 1.12;
	text-wrap: balance;
}

.als-page-hero__intro {
	max-width: 40rem;
	color: var(--als-muted);
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	line-height: 1.95;
}

.als-page-section--first {
	padding-top: 6.5rem;
}

.als-page-section--last {
	padding-bottom: 7rem;
}

.als-home-directory {
	padding-block: 7rem;
	border-block: 1px solid var(--als-border);
	background: var(--als-surface);
}

.als-home-directory__head {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 4rem;
}

.als-home-directory__body {
	max-width: 43rem;
	color: var(--als-muted);
	font-size: 1.05rem;
	line-height: 1.95;
}

.als-home-directory__grid {
	border-top: 1px solid var(--als-border);
}

.als-home-directory__item {
	border-bottom: 1px solid var(--als-border);
}

.als-home-directory__link {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	padding-block: 1.6rem;
	transition: background-color 500ms var(--als-ease), color 300ms var(--als-ease);
}

.als-home-directory__link:hover,
.als-home-directory__link:focus-visible {
	background-color: var(--als-bg);
	background-color: color-mix(in srgb, var(--als-bg) 66%, transparent);
}

.als-home-directory__index {
	padding-top: 0.2rem;
	color: var(--als-gold);
	font-family: var(--als-font-en);
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.14em;
}

.als-home-directory__copy {
	min-width: 0;
}

.als-home-directory__title {
	display: block;
	font-family: var(--als-font-heading);
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-weight: 600;
	line-height: 1.45;
	transition: color 300ms var(--als-ease);
}

.als-home-directory__link:hover .als-home-directory__title,
.als-home-directory__link:focus-visible .als-home-directory__title {
	color: var(--als-gold);
}

.als-home-directory__summary {
	grid-column: 2;
	margin-top: 0.55rem;
	max-width: 36rem;
	color: var(--als-muted);
	font-size: 0.9rem;
	line-height: 1.8;
}

.als-home-directory__action {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	width: max-content;
	margin-top: 0.35rem;
	color: var(--als-gold);
	font-size: 0.78rem;
}

.als-home-directory__action::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 1px;
	background: var(--als-gold-line);
	transform: scaleX(0.64);
	transform-origin: left center;
	transition: transform 500ms var(--als-ease);
}

.als-home-directory__link:hover .als-home-directory__action::after,
.als-home-directory__link:focus-visible .als-home-directory__action::after {
	transform: scaleX(1);
}

html[dir="rtl"] .als-home-directory__action::after {
	transform-origin: right center;
}

.als-project-detail {
	padding-block: 7rem;
}

.als-project-detail__summary {
	color: var(--als-fg-soft);
	font-size: clamp(1.25rem, 2.4vw, 1.7rem);
	line-height: 1.8;
	text-wrap: pretty;
}

.als-project-detail__grid {
	display: grid;
	gap: 4rem;
}

.als-project-detail__heading {
	margin-bottom: 1.5rem;
	color: var(--als-gold);
	font-family: var(--als-font-en);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.als-project-detail__overview-text {
	max-width: 70ch;
	color: var(--als-muted);
	font-size: 1.05rem;
	line-height: 2.05;
}

.als-project-detail__products-block {
	margin-top: 6rem;
}

.als-page-section .als-sectors__grid,
.als-page-section .als-services__wrap,
.als-page-section .als-companies__list,
.als-page-section .als-projects__grid,
.als-page-section .als-partners__grid,
.als-page-section .als-contact__details {
	margin-top: 0;
}

.als-project-detail__facts {
	border-top: 1px solid var(--als-border);
}

.als-project-detail__fact {
	padding-block: 1.1rem;
	border-bottom: 1px solid var(--als-border);
	color: var(--als-fg-soft);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.75;
}

.als-project-detail__products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--als-border);
}

.als-project-detail__products li {
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--als-border);
	color: var(--als-fg-soft);
	font-size: 0.9rem;
}

.als-project-detail__products li:nth-child(odd) {
	padding-inline-end: 1rem;
}

.als-project-detail__products li:nth-child(even) {
	padding-inline-start: 1rem;
	border-inline-start: 1px solid var(--als-border);
}

.als-project-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 4.5rem;
	color: var(--als-gold);
	font-size: 0.85rem;
}

.als-project-detail__back::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 1px;
	background: var(--als-gold-line);
}

.als-projects__link {
	margin-top: 2rem;
}

html[dir="rtl"] .als-project-detail__heading {
	font-family: var(--als-font-ar);
	letter-spacing: normal;
	text-transform: none;
}

/* ==========================================================================
   22. Breakpoints
   ========================================================================== */

@media (max-width: 479px) {
	.als-project-detail__products {
		grid-template-columns: minmax(0, 1fr);
	}

	.als-project-detail__products li:nth-child(odd),
	.als-project-detail__products li:nth-child(even) {
		padding-inline: 0;
		border-inline-start: 0;
	}
}

@media (min-width: 640px) {
	.als-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.als-form__row--full {
		grid-column: span 2;
	}
}

@media (min-width: 768px) {
	.als-section {
		padding-block: 9rem;
	}

	.als-section--tight {
		padding-block: 8rem;
	}

	.als-hero__inner {
		padding-bottom: 7rem;
	}

	.als-hero__scroll {
		display: block;
	}

	.als-about__grid,
	.als-contact__grid,
	.als-footer__grid,
	.als-sectors__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.als-about__grid,
	.als-contact__grid {
		column-gap: 1.5rem;
		row-gap: 4rem;
	}

	.als-about__media {
		grid-column: span 5;
		height: 560px;
	}

	.als-about__text {
		grid-column: 7 / span 6;
	}

	.als-vision__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
	}

	.als-vision__col:first-child {
		padding-inline-end: 2.5rem;
	}

	.als-vision__col + .als-vision__col {
		border-top: 0;
		padding-top: 0;
		border-inline-start: 1px solid var(--als-border);
		padding-inline-start: 2.5rem;
	}

	.als-vision__col + .als-vision__col .als-vision__heading {
		margin-top: 3.4rem;
	}

	.als-vision__heading {
		font-size: 1.875rem;
	}

	.als-numbered__row {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: baseline;
		gap: 2rem;
	}

	.als-numbered__num {
		grid-column: span 2;
	}

	.als-numbered__text {
		grid-column: span 9;
	}

	.als-sectors__grid {
		column-gap: 1.5rem;
	}

	.als-sectors__stage {
		display: block;
		grid-column: span 5;
	}

	.als-sectors__panel {
		grid-column: span 7;
		border-top: 1px solid var(--als-border);
	}

	.als-sectors__name {
		font-size: 1.25rem;
	}

	.als-sectors__thumb {
		display: none;
	}

	.als-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3.5rem 2.5rem;
	}

	.als-companies__row {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 2rem;
	}

	.als-companies__num {
		grid-column: span 1;
	}

	.als-companies__name {
		grid-column: span 7;
		font-size: 1.25rem;
	}

	.als-companies__cat {
		grid-column: span 3;
	}

	.als-companies__dash {
		display: block;
		grid-column: span 1;
	}

	.als-projects__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 5rem;
	}

	.als-projects__name {
		font-size: 1.5rem;
	}

	.als-partners__name {
		font-size: 1.5rem;
	}

	/* Was 11rem to give a full-bleed photograph room to breathe. With no image
	   behind it that reads as dead beige, so it drops to the section rhythm. */
	.als-statement__inner {
		padding-block: 9rem;
	}

	.als-statement__quote {
		font-size: 2.3rem;
	}

	.als-cta__inner {
		padding-block: 9rem;
	}

	.als-title {
		font-size: 2.6rem;
	}

	.als-contact__left {
		grid-column: span 5;
	}

	.als-contact__right {
		grid-column: 7 / span 6;
	}

	/* 3 + 6 + 3 — the middle child renders as two link columns, so the eye
	   reads an even four-column footer. */
	.als-footer__brand {
		grid-column: span 3;
	}

	.als-footer__nav {
		grid-column: span 6;
	}

	.als-footer__contact {
		grid-column: span 3;
	}

	.als-page-hero {
		padding-block: 13rem 7rem;
	}

	.als-page-hero__inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 1.5rem;
		row-gap: 2rem;
		align-items: end;
	}

	.als-page-hero__label,
	.als-page-hero__rule {
		grid-column: 1 / span 12;
	}

	.als-page-hero__title {
		grid-column: 1 / span 7;
	}

	.als-page-hero__intro {
		grid-column: 9 / span 4;
		padding-bottom: 0.4rem;
	}

	.als-home-directory {
		padding-block: 9rem;
	}

	.als-home-directory__head {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 1.5rem;
		align-items: end;
		margin-bottom: 5rem;
	}

	.als-home-directory__head > :first-child {
		grid-column: 1 / span 7;
	}

	.als-home-directory__body {
		grid-column: 9 / span 4;
	}

	.als-home-directory__link {
		grid-template-columns: 3.5rem minmax(0, 4fr) minmax(12rem, 3fr) auto;
		gap: 1.5rem;
		align-items: center;
		padding: 2rem 1.25rem;
	}

	.als-home-directory__summary {
		grid-column: 3;
		margin-top: 0;
	}

	.als-home-directory__action {
		grid-column: 4;
		margin-top: 0;
	}

	.als-project-detail__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 1.5rem;
		align-items: start;
	}

	.als-project-detail__overview {
		grid-column: 1 / span 7;
	}

	.als-project-detail__aside {
		grid-column: 9 / span 4;
	}
}

@media (min-width: 900px) {
	.als-partners__item {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 2rem;
		align-items: center;
		padding-block: 5rem;
	}

	.als-partners__media {
		grid-column: 1 / span 5;
	}

	.als-partners__content {
		grid-column: 7 / -1;
	}

	.als-partners__details {
		grid-column: 1 / -1;
		gap: 5rem;
		padding-block-start: 4rem;
	}

	.als-partners__capabilities {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 2rem;
		align-items: center;
	}

	.als-partners__capabilities-copy {
		grid-column: 1 / -1;
		max-width: 70ch;
	}

	.als-partners__capabilities--with-media .als-partners__capabilities-copy {
		grid-column: 1 / span 7;
	}

	.als-partners__detail-media {
		grid-column: 9 / -1;
	}

	.als-partners__projects-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.als-partners__project {
		padding-inline: 2rem;
	}

	.als-partners__project:first-child {
		padding-inline-start: 0;
	}

	.als-partners__project:last-child {
		padding-inline-end: 0;
	}

	.als-partners__project + .als-partners__project {
		border-inline-start: 1px solid var(--als-border);
	}

	.als-partners__notes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}
}

@media (min-width: 640px) {
	.als-partners__item--detailed .als-partners__meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.als-partners__item--detailed .als-partners__meta li {
		padding-inline: 1.5rem;
	}

	.als-partners__item--detailed .als-partners__meta li:first-child {
		padding-inline-start: 0;
	}

	.als-partners__item--detailed .als-partners__meta li:last-child {
		padding-inline-end: 0;
	}

	.als-partners__item--detailed .als-partners__meta li + li {
		border-top: 0;
		border-inline-start: 1px solid var(--als-border);
	}
}

@media (min-width: 1024px) {
	.als-container {
		padding-inline: 3.5rem;
	}

	.als-about__grid,
	.als-contact__grid,
	.als-sectors__grid,
	.als-page-hero__inner,
	.als-home-directory__head,
	.als-project-detail__grid {
		column-gap: 2rem;
	}

	.als-vision__col:first-child {
		padding-inline-end: 5rem;
	}

	.als-vision__col + .als-vision__col {
		padding-inline-start: 5rem;
	}

	.als-services__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2.5rem;
	}

}

@media (min-width: 768px) and (max-width: 899px) {
	.als-page-hero__inner,
	.als-home-directory__head,
	.als-project-detail__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.als-page-hero__label,
	.als-page-hero__rule,
	.als-page-hero__title,
	.als-page-hero__intro,
	.als-home-directory__head > :first-child,
	.als-home-directory__body,
	.als-project-detail__overview,
	.als-project-detail__aside {
		grid-column: auto;
	}

	.als-page-hero__intro {
		max-width: 48rem;
		padding-bottom: 0;
	}

	.als-home-directory__link {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		align-items: start;
	}

	.als-home-directory__summary,
	.als-home-directory__action {
		grid-column: 2;
	}
}

@media (min-width: 1280px) {

	.als-nav {
		display: flex;
		gap: clamp(0.85rem, 1.25vw, 1.5rem);
	}

	.als-burger {
		display: none;
	}
}

/* ==========================================================================
   22. Motion & print
   ========================================================================== */

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

	html.als-reveal-ready .als-reveal,
	html.als-reveal-ready .als-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

@media print {
	.als-header,
	.als-burger,
	.als-lang,
	.als-hero__scroll,
	.als-form {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}