/* ═══════════════════════════════════════════════════════════════════
   GATING SYSTEMS — desktop is two 864 x 553 panels, one open on the left
   and one closed on the right; mobile stacks them. A 68px "?" (53 at 390)
   toggles each panel.

   Flex throughout - there is no display:grid in this theme.
   ═══════════════════════════════════════════════════════════════════ */

.gating-section__head { text-align: center; }
.gating-section__head .eyebrow { margin-bottom: clamp(10px, 8.54px + 0.374vw, 15px); }
.gating-section__title { margin-bottom: clamp(10px, 7.09px + 0.747vw, 20px); }

/* intro ends 3104, panels start 3144 (desktop) / 3485 -> 3505 (mobile) */
.gating-section__intro { margin-bottom: clamp(20px, 14.17px + 1.495vw, 40px); }

/* The two halves meet with no gap. Equal halves, so
   basis 0 with the floor on min-width; the wrap IS the stack, and 384 each
   is what puts it at 768. */
.gating-section__panels {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.gating-section__panel {
	/* 53px at 390 -> 68px at 1728. One variable, because
	   the title's clearance is derived from it. */
	--gate-toggle: clamp(53px, 48.63px + 1.121vw, 68px);
	flex: 1 1 0;
	min-width: min(384px, 100%);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	/* 313px at 390 -> 553px at 1728 */
	min-height: clamp(313px, 243.05px + 17.937vw, 553px);
	padding: clamp(30px, 18.34px + 2.990vw, 70px)
	         clamp(20px,  8.34px + 2.990vw, 60px)
	         clamp(30px, 21.26px + 2.242vw, 60px);
	color: var(--white);
	background: var(--red-ink);
}

.gating-section__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Only the open panel carries the #210202 70% wash. */
.gating-section__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--red-ink);
	opacity: 0;
	transition: opacity .35s ease;
}
.gating-section__panel.is-open::after { opacity: .7; }

.gating-section__content {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* The copy shares its rows with the "?", so the column stops where the
	   button starts. The button's right inset IS the panel's inline padding,
	   so that is exactly one button's width - no extra gap. Both frames fall
	   out of it: 390 - 20 - 20 - 53 = 297, the width the mobile frame draws
	   and 864 - 60 - 60 - 68 = 676, which is where the
	   desktop frame's body ends with the 421/616 max-widths still
	   binding. Without it the title ran under the button below ~1150. */
	padding-right: var(--gate-toggle);
	/* Closed: the title sits on the floor of the panel. */
	margin-top: auto;
	transition: margin .35s ease;
}
.gating-section__panel.is-open .gating-section__content { margin-top: 0; margin-bottom: auto; }

.gating-section__panelTitle > * {
	max-width: 421px;
	font-weight: 600;
	line-height: 1.28; /* 32px title in a 41px box */
	text-shadow: 0 4px 34px rgba(0, 0, 0, .65);
}

/* Collapsible copy. CSS cannot transition to auto and a hard-coded height
   clips the first time the copy grows, so js/gating_systems.js measures the
   inner block and writes it into --body-h. */
.gating-section__body {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .35s ease, opacity .25s ease;
}
.gating-section__panel.is-open .gating-section__body {
	max-height: var(--body-h, 1200px);
	opacity: 1;
}

/* flow-root, or the first paragraph's 20px top margin COLLAPSES out through
   this box: scrollHeight then reads 20px short, --body-h is written 20px short,
   and the panel's overflow slices exactly that much off the bottom - which is
   the "Enquire now" button. */
.gating-section__bodyInner { display: flow-root; min-height: 0; }

.gating-section__bodyInner > * { max-width: 616px; }
.gating-section__bodyInner p { margin-top: 20px; }   /* title 3255 -> copy 3275 */
.gating-section__bodyInner p + p { margin-top: 14px; }

.gating-section__cta { margin-top: 30px; } /* copy 3511 -> button 3541 */

/* The "?" control - 68px at 1728, 53px at 390. */
.gating-section__toggle {
	position: absolute;
	z-index: 2;
	top:   clamp(20px, 5.43px + 3.737vw, 70px);
	right: clamp(20px, 8.34px + 2.990vw, 60px);
	display: flex;
	align-items: center;
	justify-content: center;
	width:  var(--gate-toggle);
	height: var(--gate-toggle);
	border-radius: 50%;
	background: var(--red);
	color: var(--white);
	transition: background-color .2s ease, transform .2s ease;
}
.gating-section__toggle:hover { background: #c72c2d; }
.gating-section__toggleGlyph > * { display: block; font-weight: 600; line-height: 1; }

/* The whole panel is the click target, so it says so. The button keeps its own
   hit area and stays the accessible control; the panel listener in
   js/gating_systems.js is what the photograph's clicks reach. */
.gating-section__panel { cursor: pointer; }

/* Open, the "?" becomes a close X. Two bars turned 45 degrees rather than a
   glyph, so it is the same drawing as the services and project cards' close
   control; sized off --gate-toggle at the 22/52 the project card uses, so it
   tracks the button at every width. The two layers cross-fade because a text
   glyph cannot morph into a cross. */
.gating-section__toggleGlyph,
.gating-section__toggleClose {
	position: absolute;
	transition: opacity .2s ease, transform .25s ease;
}
.gating-section__toggleClose {
	width:  calc(var(--gate-toggle) * 0.423);
	height: calc(var(--gate-toggle) * 0.423);
	opacity: 0;
	transform: rotate(0deg);
}
.gating-section__toggleClose::before,
.gating-section__toggleClose::after {
	content: "";
	position: absolute;
	/* inset + margin auto, NOT the static position: an absolutely positioned
	   ::before with `left: auto` resolves to the END of its host box. */
	inset: 0;
	margin: auto;
	background: var(--white);
}
.gating-section__toggleClose::before { width: 100%; height: 2px; }
.gating-section__toggleClose::after  { width: 2px;  height: 100%; }

.gating-section__panel.is-open .gating-section__toggleGlyph { opacity: 0; }
.gating-section__panel.is-open .gating-section__toggleClose { opacity: 1; transform: rotate(45deg); }

/* There is deliberately NO max-width override below 768.
   The mobile frame's 297 is not a cap - it IS the
   content box: 390 - 20 - 20 - 53, which `padding-right: var(--gate-toggle)`
   on .gating-section__content already produces. Pinned as a max-width it kept
   binding once the panel grew, so a stacked panel at ~700px held its copy in a
   297px column with ~280px of dead space beside it. Deleted 2026-09-02; the
   base 421/616 caps still bind on the 864-wide desktop panel, which is the
   only place a cap does any work.

   The top/right insets stay clamped 390 -> 1728 for the same reason as before:
   re-setting them to the 390 values below 768 would kill the clamp and jump at
   the breakpoint. */