/*
Theme Name: Helipad
Theme URI: https://www.helipad.co.uk
Description: Child theme for helipad.co.uk. Carries the approved design's colour, type and layout tokens so every Divi module inherits them, and self hosts the two webfonts. Built for Divi 4.
Author: Helipad
Version: 1.6.1
Template: Divi
Text Domain: helipad
*/

/* ---------------------------------------------------------------------------
   Do not enqueue style.css from functions.php.

   Divi already handles it: with a child theme active and no stylesheet
   enqueued by the child, Divi enqueues the parent style.css first and this
   file second, in that order. Enqueueing it here as well loads it twice and
   can put it in front of the parent.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   1. Tokens

   Every value below comes from the approved design. Change a colour here and
   it changes across the site, including inside the three Helipad modules,
   which read the same custom property names.
   --------------------------------------------------------------------------- */

:root {
	/* Surfaces */
	--hp-bg:              #0A0C0E;   /* the base, near black and slightly cool */
	--hp-panel:           #0D1013;   /* cards, modals, inset blocks */
	--hp-panel-alt:       #111517;   /* occasional second level surface */

	/* Ink. Warm off white, never pure white. */
	--hp-fg:              #F4F2EE;
	--hp-fg-rgb:          244, 242, 238;

	/* Text is set on the foreground colour at reduced alpha, never in grey. */
	--hp-fg-80:           rgba(var(--hp-fg-rgb), .80);  /* emphasised body, addresses */
	--hp-fg-72:           rgba(var(--hp-fg-rgb), .72);  /* footer links */
	--hp-fg-66:           rgba(var(--hp-fg-rgb), .66);  /* standard body copy */
	--hp-fg-62:           rgba(var(--hp-fg-rgb), .62);  /* secondary labels */
	--hp-fg-58:           rgba(var(--hp-fg-rgb), .58);  /* tertiary, card blurbs */
	--hp-fg-50:           rgba(var(--hp-fg-rgb), .50);  /* timestamps, meta */

	/* Accent. Burnt orange, used sparingly: small type, hairlines, 7 to 9px dots. */
	--hp-accent:          #C4713F;
	--hp-accent-rgb:      196, 113, 63;
	--hp-accent-hover:    rgba(var(--hp-accent-rgb), .60);

	/* The Redhill marker on the map, and nothing else. */
	--hp-hq:              rgba(178, 74, 60, .78);

	/* Rules and borders. Nothing on the site uses a solid border colour. */
	--hp-rule-07:         rgba(var(--hp-fg-rgb), .07);
	--hp-rule-10:         rgba(var(--hp-fg-rgb), .10);
	--hp-rule-16:         rgba(var(--hp-fg-rgb), .16);

	/* Type */
	--hp-font-body:       "Schibsted Grotesk", "Helvetica Neue", Helvetica, sans-serif;
	--hp-font-display:    Carlito, Calibri, Candara, sans-serif;
	--hp-font-mono:       ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Scale. Taken from the design source, not from the summary document: the
	   two disagree, and the source is what Jamie approved on screen. */
	--hp-h1-hero:         clamp(46px, 7.4vw, 116px); /* the home headline only */
	--hp-h1:              clamp(38px, 5.6vw, 86px);  /* every other page title */
	--hp-h2-lg:           clamp(30px, 3.9vw, 60px);  /* section openers */
	--hp-h2-md:           clamp(28px, 3.2vw, 50px);  /* the Flight Ops panel */
	--hp-h2:              clamp(26px, 2.6vw, 42px);  /* the standard section h2 */
	--hp-h2-sm:           clamp(21px, 1.8vw, 27px);  /* the Contact cards */
	--hp-h2-legal:        clamp(22px, 2.1vw, 30px);  /* the Privacy rail */
	--hp-h3:              clamp(22px, 1.7vw, 28px);  /* cards */
	--hp-body:            16px;
	--hp-body-small:      15px;

	/* Layout */
	--hp-page-max:        2400px;
	--hp-gutter:          clamp(20px, 3.2vw, 64px);
	--hp-section-major:   clamp(96px, 13vh, 180px);
	--hp-section-minor:   clamp(44px, 7vh, 80px);
	--hp-section-footer:  clamp(64px, 9vh, 120px);
	--hp-section-first:   clamp(140px, 20vh, 220px);   /* clears the fixed nav */
	--hp-card-pad:        clamp(36px, 4.5vw, 72px);
}


/* ---------------------------------------------------------------------------
   2. Webfonts, served from this theme

   Both faces are SIL Open Font License 1.1, so self hosting is permitted.
   The licences are in fonts/ beside the files.

   Carlito is the metric compatible stand in for Calibri, which is what the
   design names. Serving Carlito ourselves means the headings look the same on
   a Mac, a phone and a Windows machine, instead of only where Calibri happens
   to be installed.

   Note on weight. The design asks for body weight 300. Schibsted Grotesk has
   no 300; its lightest cut is 400, so the approved design was already
   rendering at 400 and that is what is set below. Nothing changes visually.
   --------------------------------------------------------------------------- */

@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/schibsted-grotesk-latin-400-normal.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;
}

@font-face {
	font-family: "Schibsted Grotesk";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/schibsted-grotesk-latin-400-italic.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;
}

@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/schibsted-grotesk-latin-700-normal.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;
}

@font-face {
	font-family: Carlito;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/carlito-latin-400-normal.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;
}


/* ---------------------------------------------------------------------------
   3. The page
   --------------------------------------------------------------------------- */

html,
body,
body.et-db #et-boc,
#page-container {
	background-color: var(--hp-bg);
}

body {
	color: var(--hp-fg-66);
	font-family: var(--hp-font-body);
	font-size: var(--hp-body);
	font-weight: 400;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Keep measure sensible. The design holds body copy to 70 to 72 characters. */
.hp-measure,
.hp-measure p {
	max-width: 71ch;
}

p {
	text-wrap: pretty;
}

/* The whole site is square. No radius anywhere, including on Divi's own
   buttons, inputs and images. */
#page-container .et_pb_button,
#page-container .et_pb_module,
#page-container .et_pb_image img,
#page-container input,
#page-container select,
#page-container textarea,
#page-container button {
	border-radius: 0;
}


/* ---------------------------------------------------------------------------
   4. Headings

   The display face at weight 400, large, with tight negative tracking is the
   whole typographic idea. Adding weight breaks it, so bold is turned off
   rather than left to a plugin or an editor to get right.
   --------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
#page-container h1,
#page-container h2,
#page-container h3,
#page-container h4,
#page-container h5,
#page-container h6 {
	font-family: var(--hp-font-display);
	font-weight: 400;
	color: var(--hp-fg);
}

h1, #page-container h1 {
	font-size: var(--hp-h1);
	line-height: 1.02;
	letter-spacing: -.014em;
	text-wrap: balance;
}

h2, #page-container h2 {
	font-size: var(--hp-h2);
	line-height: 1.1;
}

h3, #page-container h3 {
	font-size: var(--hp-h3);
	line-height: 1.2;
}

/* The home headline is the largest type on the site and is its own size. */
#page-container h1.hp-display,
#page-container .hp-display h1 {
	font-size: var(--hp-h1-hero);
	line-height: .96;
	letter-spacing: -.015em;
}

/* Section openers that the design sets larger than a standard h2. */
#page-container .hp-h2-lg h2 {
	font-size: var(--hp-h2-lg);
	line-height: 1.06;
}

/* The three numbered cards on Contact. */
#page-container .hp-grid-3 h2,
#page-container .hp-h2-sm h2 {
	font-size: var(--hp-h2-sm);
	line-height: 1.2;
	margin: 24px 0 0;
}

/* Legal copy on the Privacy rail sits smaller than a page section heading. */
#page-container .hp-rail-body h2 {
	font-size: var(--hp-h2-legal);
	line-height: 1.12;
	letter-spacing: -.008em;
}


/* ---------------------------------------------------------------------------
   5. Repeated components
   --------------------------------------------------------------------------- */

/* Eyebrow, then 22 to 28px of space, then the heading. The most repeated
   pattern on the site. */
.hp-eyebrow {
	display: block;
	margin: 0;
	font-family: var(--hp-font-mono);
	font-size: 14px;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--hp-accent);
	line-height: 1.4;
}

/* The gap between an eyebrow and the heading under it, per heading level.
   The design sets this on the heading, not on the eyebrow, and the figures
   differ by page. */
.hp-eyebrow + h1 { margin-top: 28px; }
.hp-eyebrow + h2 { margin-top: 22px; }
.hp-eyebrow + h3 { margin-top: 26px; }
.hp-h2-lg .hp-eyebrow + h2 { margin-top: 26px; }

/* An eyebrow standing alone above a block rather than a heading. */
.hp-eyebrow:last-child { margin-bottom: 0; }

/* Meta label: timestamps, counts, small print. */
.hp-meta {
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hp-fg-50);
}

/* Card */
.hp-card {
	background: var(--hp-panel);
	border: 1px solid var(--hp-rule-16);
	padding: var(--hp-card-pad);
	transition: border-color .4s ease;
}

.hp-card:hover {
	border-color: var(--hp-accent-hover);
}

.hp-card p:last-child {
	margin-bottom: 0;
}

/* Small body, used in card blurbs. */
.hp-blurb {
	font-size: var(--hp-body-small);
	line-height: 1.66;
	color: var(--hp-fg-58);
}


/* ---------------------------------------------------------------------------
   6. Links and buttons

   The primary call to action is the pale block, not an orange one. The design
   is explicit that one orange button on a page is already one too many.
   --------------------------------------------------------------------------- */

#page-container a {
	color: var(--hp-accent);
	text-decoration: none;
	transition: color .3s ease, opacity .3s ease;
}

#page-container a:hover {
	color: var(--hp-fg);
}

#page-container .et_pb_button,
#page-container .et_pb_button:hover {
	background-color: var(--hp-fg);
	border: 0;
	color: var(--hp-bg);
	font-family: var(--hp-font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding: 19px 34px;
	line-height: 1;
	transition: background-color .3s ease, color .3s ease;
}

/* Divi adds an arrow glyph and extra padding on hover. Both are off. */
#page-container .et_pb_button:after,
#page-container .et_pb_button:before {
	display: none;
}

#page-container .et_pb_button:hover {
	background-color: var(--hp-accent);
	color: var(--hp-fg);
	padding: 19px 34px;
}

/* The quieter second action: a hairline box rather than a filled block. */
#page-container .hp-button-ghost.et_pb_button,
#page-container .hp-button-ghost.et_pb_button:hover {
	background-color: transparent;
	border: 1px solid var(--hp-rule-16);
	color: var(--hp-fg-80);
}

#page-container .hp-button-ghost.et_pb_button:hover {
	border-color: var(--hp-accent-hover);
	color: var(--hp-fg);
}


/* ---------------------------------------------------------------------------
   7. Layout and sections
   --------------------------------------------------------------------------- */

#page-container .et_pb_row,
#page-container .et_pb_row.et_pb_row_fullwidth {
	max-width: var(--hp-page-max);
	width: 100%;
	padding-left: var(--hp-gutter);
	padding-right: var(--hp-gutter);
}

#page-container .et_pb_section {
	background-color: transparent;
	padding-top: var(--hp-section-major);
	padding-bottom: 0;
}

/* Put this class on the first section of every page so it clears the fixed
   nav. */
#page-container .hp-section-first {
	padding-top: var(--hp-section-first);
}

#page-container .hp-section-minor {
	padding-top: var(--hp-section-minor);
}

/* The last section before the footer. */
#page-container .hp-section-last {
	padding-bottom: var(--hp-section-footer);
}

/* Rule between stacked blocks. */
.hp-rule {
	border: 0;
	border-top: 1px solid var(--hp-rule-10);
	margin: 0;
}


/* ---------------------------------------------------------------------------
   8. Navigation and footer
   --------------------------------------------------------------------------- */

#main-header,
#main-header.et-fixed-header {
	background-color: rgba(10, 12, 14, .88);
	backdrop-filter: blur(10px);
	box-shadow: none;
	border-bottom: 1px solid var(--hp-rule-07);
}

#top-menu a,
#et-top-navigation #top-menu li a {
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hp-fg-72);
}

/* Flight Ops is a boxed control in the nav, not another plain link. On hover
   it fills and inverts. */
#top-menu li.hp-nav-cta {
	margin-left: 10px;
}

#top-menu li.hp-nav-cta > a,
#et-top-navigation #top-menu li.hp-nav-cta > a {
	padding: 13px 22px;
	border: 1px solid rgba(var(--hp-fg-rgb), .3);
	color: var(--hp-fg);
	transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

#top-menu li.hp-nav-cta > a:hover,
#et-top-navigation #top-menu li.hp-nav-cta > a:hover {
	background-color: var(--hp-fg);
	border-color: var(--hp-fg);
	color: var(--hp-bg);
	opacity: 1;
}

/* Divi draws an underline under the current item; the design does not. */
#top-menu li.hp-nav-cta > a::after {
	display: none;
}

#top-menu a:hover,
#et-top-navigation #top-menu li a:hover {
	color: var(--hp-fg);
	opacity: 1;
}

#top-menu li.current-menu-item > a {
	color: var(--hp-accent);
}

#main-footer {
	background-color: var(--hp-bg);
	border-top: 1px solid var(--hp-rule-07);
}

#footer-bottom {
	background-color: transparent;
}

#main-footer a,
#footer-bottom a {
	color: var(--hp-fg-72);
}

#main-footer a:hover,
#footer-bottom a:hover {
	color: var(--hp-fg);
}


/* ---------------------------------------------------------------------------
   9. Forms

   Square, hairline, on the panel colour. Divi's defaults are rounded and pale.
   --------------------------------------------------------------------------- */

#page-container input[type="text"],
#page-container input[type="email"],
#page-container input[type="tel"],
#page-container input[type="url"],
#page-container input[type="number"],
#page-container input[type="date"],
#page-container select,
#page-container textarea {
	background-color: var(--hp-panel);
	border: 1px solid var(--hp-rule-16);
	color: var(--hp-fg);
	font-family: var(--hp-font-body);
	font-size: var(--hp-body);
	padding: 16px 18px;
	transition: border-color .3s ease;
}

#page-container input:focus,
#page-container select:focus,
#page-container textarea:focus {
	border-color: var(--hp-accent);
	outline: 0;
}

#page-container ::placeholder {
	color: var(--hp-fg-50);
}

#page-container label {
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hp-fg-62);
}


/* ---------------------------------------------------------------------------
   10. Accessibility

   The design has no visible focus style of its own. One is added here, because
   every interactive element on the site needs to be reachable by keyboard and
   visible when it is. It only shows for keyboard users.
   --------------------------------------------------------------------------- */

#page-container a:focus-visible,
#page-container button:focus-visible,
#page-container input:focus-visible,
#page-container select:focus-visible,
#page-container textarea:focus-visible,
#page-container [tabindex]:focus-visible {
	outline: 2px solid var(--hp-accent);
	outline-offset: 3px;
}

/* Skip link, visible once focused. */
.hp-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
}

.hp-skip-link:focus {
	left: var(--hp-gutter);
	top: 12px;
	background: var(--hp-fg);
	color: var(--hp-bg);
	padding: 12px 18px;
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* Honour a request for less movement. The design's three motion rules all
   become instant. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}


/* ---------------------------------------------------------------------------
   11. Breakpoints

   The design is fluid and breaks in only four places. Three of them belong to
   individual components and live with those components. The one global change
   is the gutter on a phone.
   --------------------------------------------------------------------------- */

@media (max-width: 440px) {
	:root {
		--hp-gutter: 20px;
	}
}


/* ---------------------------------------------------------------------------
   12. Page patterns

   Three repeated blocks that are not modules: the stat band on the home page,
   the core services grid, and the numbered rail used on Our Story and Privacy.
   They are built as grids rather than Divi columns because the design's
   collapse points, 6 to 3 to 2 to 1, are not what Divi's own columns do.
   --------------------------------------------------------------------------- */

/* The hairline grid shared by the stat band and the services grid: one pixel
   of rule colour showing through the gaps, with each cell on the page colour. */
.hp-grid,
.hp-stats {
	display: grid;
	gap: 1px;
	background: var(--hp-rule-10);
	border: 1px solid var(--hp-rule-10);
}

.hp-grid > *,
.hp-stats > * {
	background: var(--hp-bg);
	padding: clamp(24px, 2.4vw, 40px);
}

/* Stat band, four figures */
.hp-stats {
	grid-template-columns: repeat(4, 1fr);
}

.hp-stat-figure {
	display: block;
	font-family: var(--hp-font-display);
	font-size: clamp(34px, 3.6vw, 56px);
	line-height: 1;
	color: var(--hp-fg);
	margin-bottom: 14px;
}

.hp-stat-figure sup,
.hp-stat-unit {
	font-size: .45em;
	vertical-align: super;
	letter-spacing: .02em;
}

.hp-stat-label {
	display: block;
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hp-fg-50);
	line-height: 1.6;
}

@media (max-width: 860px) {
	.hp-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 440px) {
	.hp-stats { grid-template-columns: 1fr; }
}

/* Core services, six across */
.hp-grid-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1340px) { .hp-grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .hp-grid-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .hp-grid-6 { grid-template-columns: 1fr; } }

/* Two and three across, for the contact cards and the what-we-do blocks */
.hp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.hp-grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 860px) {
	.hp-grid-3,
	.hp-grid-2 { grid-template-columns: 1fr; }
}

.hp-grid h3 {
	font-size: var(--hp-h3);
	line-height: 1.2;
	margin: 0 0 14px;
}

/* The numeral above a card heading carries the design's own gap. */
.hp-grid .hp-numeral + h3 { margin-top: 0; }

.hp-grid p {
	font-size: var(--hp-body-small);
	line-height: 1.6;
	color: var(--hp-fg-58);
	margin: 0;
}

/* The numeral that opens a card or a rail entry */
.hp-numeral {
	display: block;
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--hp-accent);
	margin-bottom: 18px;
}

/* ---------------------------------------------------------------------------
   13. Numbered rail

   Our Story and the Privacy page both run a left column carrying a year or a
   numeral, a hairline rule, and the content to the right.
   --------------------------------------------------------------------------- */

.hp-rail {
	display: grid;
	grid-template-columns: 120px 1px 1fr;
	gap: 0 clamp(24px, 3vw, 56px);
}

.hp-rail + .hp-rail {
	margin-top: clamp(40px, 6vh, 80px);
}

.hp-rail-mark {
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hp-accent);
	padding-top: .4em;
}

.hp-rail-rule {
	background: linear-gradient(to bottom, transparent, var(--hp-rule-16) 12%, var(--hp-rule-16) 88%, transparent);
}

.hp-rail-body h2,
.hp-rail-body h3 {
	margin-top: 0;
}

.hp-rail-body p:last-child {
	margin-bottom: 0;
}

/* The design moves the numeral above its heading at 860px on Privacy, and
   narrows the year column at 980px on Our Story. */
@media (max-width: 980px) {
	.hp-rail { grid-template-columns: 76px 1px 1fr; }
}

@media (max-width: 860px) {
	.hp-rail { grid-template-columns: 1fr; }
	.hp-rail-rule { display: none; }
	.hp-rail-mark { padding-top: 0; margin-bottom: 10px; }
}

/* ---------------------------------------------------------------------------
   14. Hero

   Full bleed photograph with the headline over it. The crop is set in the
   design and must not be changed: the left edge sits just past the truck and
   both vehicles on the right stay in shot.
   --------------------------------------------------------------------------- */

.hp-hero {
	position: relative;
	min-height: clamp(560px, 86vh, 920px);
	display: flex;
	align-items: flex-end;
}

/* The two veils the design puts over the photograph: a horizontal gradient so
   the headline has something to sit on, and a vertical one so the section
   below does not start against a bright edge. Drawn as a pseudo element so the
   page needs no extra markup. */
.hp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(10, 12, 14, .82), rgba(10, 12, 14, .30) 62%, rgba(10, 12, 14, .55)),
		linear-gradient(to top, rgba(10, 12, 14, .92), transparent 58%);
	pointer-events: none;
	z-index: 0;
}

#page-container .hp-hero .et_pb_row {
	position: relative;
	z-index: 1;
}

/* A photograph beside copy, as on What we do. The ratio is the design's. */
.hp-figure {
	position: relative;
	aspect-ratio: 1.7 / 1;
	overflow: hidden;
	background: var(--hp-panel);
}

.hp-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A section whose photograph sits behind everything at low strength. */
.hp-section-photo {
	position: relative;
}

.hp-section-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(10, 12, 14, .86), rgba(10, 12, 14, .94));
	pointer-events: none;
	z-index: 0;
}

#page-container .hp-section-photo .et_pb_row {
	position: relative;
	z-index: 1;
}

.hp-hero-body {
	position: relative;
	z-index: 1;
	max-width: 1000px;     /* the design's figure; 62ch was forcing a third line */
}

/* The headline carries its own shadow in the design, so it holds up over the
   bright part of the photograph rather than relying on the veil alone. */
.hp-hero-body h1 {
	margin: 0;
	text-shadow: 0 2px 44px rgba(10, 12, 14, .80), 0 1px 3px rgba(10, 12, 14, .55);
	/* The break after "Airspace" is written into the headline, so the browser
	   must not rebalance the lines around it. */
	text-wrap: initial;
}

.hp-hero-body > p:first-of-type {
	max-width: 620px;
	margin: 34px 0 0;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.62;
	color: rgba(var(--hp-fg-rgb), .9);
	text-shadow: 0 1px 22px rgba(10, 12, 14, .72);
}

.hp-hero-body .hp-meta {
	margin-top: 26px;
}

/* A pair of actions, square and side by side. */
.hp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}


/* ---------------------------------------------------------------------------
   15. Buttons sitting together

   Divi wraps every button module in its own block, so two buttons in one
   column stack. The design puts them side by side.
   --------------------------------------------------------------------------- */

#page-container .et_pb_button_module_wrapper {
	display: inline-block;
	margin: 0 14px 14px 0;
}

#page-container .et_pb_button_module_wrapper:last-child {
	margin-right: 0;
}

/* Screen reader only, used by the Contact page, which has no visible h1. */
.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;
}


/* ---------------------------------------------------------------------------
   16. Footer bottom line
   --------------------------------------------------------------------------- */

#footer-info {
	float: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: baseline;
	padding: 18px 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--hp-fg-50);
}

.hp-footer-company {
	flex: 1 1 32ch;
}

.hp-footer-links a {
	color: var(--hp-fg-72);
}

#footer-bottom .et-social-icons {
	float: none;
	margin: 0 0 8px;
	padding: 0;
}

#footer-bottom .et-social-icon a {
	color: var(--hp-fg-72);
}

#footer-bottom .et-social-icon a:hover {
	color: var(--hp-accent);
	opacity: 1;
}

@media (max-width: 640px) {
	#footer-info { display: block; }
	.hp-footer-links { display: block; margin-top: 10px; }
}

/* The build credit, quieter than the company line. */
.hp-footer-builder {
	color: var(--hp-fg-50);
	white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   17. Header

   Divi holds the header inside a 1080px container, so the logo floats in from
   the edge. The design puts it hard against the page gutter, with the nav hard
   against the other one.
   --------------------------------------------------------------------------- */

#main-header .container {
	width: 100%;
	max-width: var(--hp-page-max);
	padding-left: var(--hp-gutter);
	padding-right: var(--hp-gutter);
}

#logo {
	max-height: 46px;
	width: auto;
}

@media (max-width: 640px) {
	#logo { max-height: 34px; }
}


/* ---------------------------------------------------------------------------
   18. Our Story: the collage background

   Thirty photographs behind the page, greyscaled and held at 30 per cent, under
   two veils: a horizontal gradient so the right hand side stays dark enough to
   read against, and a radial vignette. Values are the design's.

   The layer is position:fixed on purpose here. Unlike the Events map, which was
   fixed by mistake, this one is meant to stay with the viewport while the page
   scrolls over it.
   --------------------------------------------------------------------------- */

.hp-coll {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.hp-coll-lay {
	position: absolute;
	left: 0;
	right: 0;
	top: -8%;
	height: 200%;
	filter: grayscale(1) contrast(1.05);
	will-change: transform;
}

.hp-coll img {
	position: absolute;
	display: block;
	opacity: .30;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.hp-veil {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to right,
		rgba(10, 12, 14, .46) 0%,
		rgba(10, 12, 14, .55) 30%,
		rgba(10, 12, 14, .76) 56%,
		rgba(10, 12, 14, .87) 72%,
		rgba(10, 12, 14, .89) 100%);
}

.hp-veil2 {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(130% 90% at 50% 50%, transparent 40%, rgba(10, 12, 14, .64) 100%);
}

/* Everything Divi renders has to sit above the collage, and the page itself
   must not paint over it. */
body.hp-has-collage #page-container,
body.hp-has-collage #et-main-area,
body.hp-has-collage #main-content,
body.hp-has-collage .et_pb_section {
	background-color: transparent;
}

body.hp-has-collage #page-container {
	position: relative;
	z-index: 2;
}

/* The header and footer keep their own backing so the collage does not show
   through the navigation. */
body.hp-has-collage #main-footer {
	background-color: rgba(10, 12, 14, .92);
}


/* ---------------------------------------------------------------------------
   19. Our Story: the chapter rail

   Year, a dot on the rule, the text, then three square photographs. The design
   splits the last two columns 1.06 to 1.
   --------------------------------------------------------------------------- */

.hp-chapter {
	display: grid;
	grid-template-columns: 150px 40px minmax(0, 1.06fr) minmax(0, 1fr);
	gap: 0 clamp(20px, 2.6vw, 46px);
	align-items: center;
	padding: clamp(34px, 6vh, 74px) 0;
}

.hp-chapter-year {
	font-family: var(--hp-font-mono);
	font-size: 14px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hp-accent);
	text-align: right;
	line-height: 1.5;
	align-self: start;
	padding-top: .4em;
}

/* The small s in 1990s, as the design sets it. */
.hp-chapter-year .hp-s {
	font-size: .72em;
	letter-spacing: .12em;
}

/* The dot sitting on the spine. */
.hp-chapter-dot {
	position: relative;
	align-self: stretch;
}

.hp-chapter-dot::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(to bottom,
		transparent 0,
		rgba(196, 113, 63, .5) 8%,
		rgba(196, 113, 63, .5) 92%,
		transparent 100%);
}

.hp-chapter-dot::after {
	content: "";
	position: absolute;
	left: 15px;
	top: calc(50% - 4px);
	width: 9px;
	height: 9px;
	background: var(--hp-accent);
}

.hp-chapter-body h2 {
	margin-top: 0;
}

.hp-chapter-body p:last-child {
	margin-bottom: 0;
}

/* Three square photographs, side by side. */
.hp-chapter-shots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.hp-chapter-shots figure {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--hp-panel);
}

.hp-chapter-shots img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease, opacity .4s ease;
}

.hp-chapter-shots img:hover {
	transform: scale(1.04);
}

/* The design narrows the year column at 980px and restacks below 760px. */
@media (max-width: 980px) {
	.hp-chapter { grid-template-columns: 96px 32px minmax(0, 1.06fr) minmax(0, 1fr); }
	.hp-chapter-dot::before { left: 15px; }
	.hp-chapter-dot::after { left: 11px; }
}

@media (max-width: 760px) {
	.hp-chapter {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: clamp(28px, 5vh, 48px) 0;
	}
	.hp-chapter-year { text-align: left; padding-top: 0; }
	.hp-chapter-dot { display: none; }
}


/* ---------------------------------------------------------------------------
   20. Flight Ops panel

   The whole block is one link to the portal. A photograph occupies the right
   46 per cent at 60 per cent strength, with a gradient over it so the panel
   colour carries into the picture rather than meeting it at a hard edge. The
   button is nudged down to clear the aircraft, which is the design's own note.
   --------------------------------------------------------------------------- */

.hp-ops-panel {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--hp-rule-16);
	background: var(--hp-panel);
	padding: var(--hp-card-pad);
	transition: border-color .4s ease;
	text-decoration: none;
}

#page-container a.hp-ops-panel:hover {
	border-color: var(--hp-accent-hover);
	color: inherit;
}

.hp-ops-photo {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 46%;
	pointer-events: none;
}

.hp-ops-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .6;
}

.hp-ops-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right,
		#0D1013 0%,
		rgba(13, 16, 19, .4) 60%,
		rgba(13, 16, 19, .7) 100%);
}

.hp-ops-body {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.hp-ops-body h2 {
	font-size: clamp(28px, 3.2vw, 50px);
	line-height: 1.08;
	margin: 22px 0 0;
	max-width: 620px;
}

.hp-ops-body p {
	max-width: 520px;
	margin: 22px 0 0;
	line-height: 1.68;
	color: var(--hp-fg-62);
}

/* The call to action. A span rather than a button, because the whole panel is
   already the link. */
.hp-ops-cta {
	position: relative;
	top: clamp(16px, 2.8vh, 34px);
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 19px 34px;
	background: var(--hp-fg);
	color: var(--hp-bg);
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .3s ease, color .3s ease;
}

#page-container a.hp-ops-panel:hover .hp-ops-cta {
	background: var(--hp-accent);
	color: var(--hp-fg);
}

.hp-ops-cta span {
	font-size: 14px;
	line-height: 1;
}

/* On a narrow screen the photograph would crowd the text, so it steps back. */
@media (max-width: 860px) {
	.hp-ops-photo { width: 100%; opacity: .4; }
	.hp-ops-cta { top: 0; }
}

/* The design holds legal copy to 72 characters, the same as everywhere else.
   Without this the policy runs the full width of a wide screen. */
.hp-rail-body p,
.hp-rail-body ul {
	max-width: 72ch;
}

.hp-rail-body ul {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.hp-rail-body li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 10px;
	line-height: 1.72;
	color: var(--hp-fg-66);
}

.hp-rail-body li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 7px;
	height: 1px;
	background: var(--hp-accent);
}

/* Address blocks in the policy keep their own line breaks. */
.hp-addr {
	color: var(--hp-fg-80);
}


/* ---------------------------------------------------------------------------
   21. Services background video

   The design grades the film back so the headline reads over it.
   --------------------------------------------------------------------------- */

.hp-video-section .et_pb_section_video_bg video {
	filter: brightness(.72) saturate(.9);
}

/* A veil over the film so the headline reads. The design grades the video but
   puts nothing over it, and the sky in this clip is bright enough that the
   eyebrow and the body copy fall below a comfortable contrast. The handover's
   own accessibility note asks for a contrast pass over accent coloured text on
   photographic backgrounds; this is that pass. */
.hp-video-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to right, rgba(10, 12, 14, .80), rgba(10, 12, 14, .34) 64%, rgba(10, 12, 14, .52)),
		linear-gradient(to top, rgba(10, 12, 14, .88), transparent 62%);
}

#page-container .hp-video-section .et_pb_row {
	position: relative;
	z-index: 2;
}

/* The poster frame sits underneath, so anyone who has asked for less movement
   gets a still photograph rather than nothing. The handover asks for exactly
   this. */
@media (prefers-reduced-motion: reduce) {
	.hp-video-section .et_pb_section_video_bg {
		display: none;
	}
}


/* ---------------------------------------------------------------------------
   22. Lightbox

   For the Our Story chapter photographs. Written here rather than using Divi's
   own, because the design opens plain photographs with no gallery chrome, and
   because this one answers the keyboard: Escape closes, the arrows move, focus
   returns to the photograph that opened it.
   --------------------------------------------------------------------------- */

.hp-chapter-shots img {
	cursor: zoom-in;
}

.hp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 12, 14, .94);
	padding: clamp(20px, 4vw, 72px);
	opacity: 0;
	transition: opacity .3s ease;
}

.hp-lightbox[data-open="1"] {
	opacity: 1;
}

.hp-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.hp-lightbox-close,
.hp-lightbox-prev,
.hp-lightbox-next {
	position: absolute;
	background: none;
	border: 0;
	color: var(--hp-fg-72);
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 16px 20px;
	line-height: 1;
}

.hp-lightbox-close:hover,
.hp-lightbox-prev:hover,
.hp-lightbox-next:hover {
	color: var(--hp-fg);
}

.hp-lightbox-close {
	top: clamp(10px, 2vw, 28px);
	right: clamp(10px, 2vw, 28px);
}

.hp-lightbox-prev { left: 0; top: 50%; transform: translateY(-50%); font-size: 20px; }
.hp-lightbox-next { right: 0; top: 50%; transform: translateY(-50%); font-size: 20px; }

.hp-lightbox-count {
	position: absolute;
	bottom: clamp(10px, 2vw, 28px);
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--hp-fg-50);
}

body.hp-lightbox-open {
	overflow: hidden;
}


/* ---------------------------------------------------------------------------
   19. The enquiry section

   Full bleed, its own hairline above it, two columns that fall to one on a
   phone. The inputs are the design's: no boxes, a single rule under each
   field, label as a mono eyebrow above it. The global form rules in section 9
   are Divi's forms; these override them inside this section only.
   --------------------------------------------------------------------------- */

#page-container .hp-enq {
	position: relative;
	z-index: 3;
	margin-top: clamp(48px, 6vh, 88px);
	border-top: 1px solid rgba(var(--hp-fg-rgb), .12);
	background-color: var(--hp-bg);
}

.hp-enq-inner {
	max-width: 2400px;
	margin: 0 auto;
	padding: clamp(70px, 10vh, 140px) clamp(20px, 3.2vw, 64px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(40px, 6vw, 110px);
}

.hp-enq-intro .hp-eyebrow {
	font-size: 14px;
	letter-spacing: .26em;
}

#page-container .hp-enq-intro .hp-eyebrow + h2 {
	margin-top: 26px;
}

.hp-enq-lead {
	max-width: 440px;
	margin: 26px 0 0;
	font-size: 16px;
	line-height: 1.68;
	font-weight: 300;
	color: rgba(var(--hp-fg-rgb), .6);
	text-wrap: pretty;
}

.hp-enq-contact {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 40px;
}

#page-container a.hp-enq-tel {
	font-family: var(--hp-font-display);
	font-size: clamp(21px, 2vw, 30px);
	letter-spacing: .01em;
	color: var(--hp-fg);
}

#page-container a.hp-enq-mail {
	font-size: 15px;
	letter-spacing: .06em;
	color: rgba(var(--hp-fg-rgb), .7);
}

/* The form itself. */
.hp-enq-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top: clamp(40px, 6.4vw, 104px);
}

.hp-enq-pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 22px;
}

.hp-enq-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* The label is a span inside the label element, so the global label rule in
   section 9 would style the wrapper rather than the text. It is reset here and
   the type is put on the span. */
#page-container .hp-enq-field {
	font-family: inherit;
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}

#page-container .hp-enq-label {
	display: block;
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(var(--hp-fg-rgb), .66);
}

#page-container .hp-enq-form input[type="text"],
#page-container .hp-enq-form input[type="email"],
#page-container .hp-enq-form select,
#page-container .hp-enq-form textarea {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid rgba(var(--hp-fg-rgb), .22);
	border-radius: 0;
	padding: 12px 0;
	font-family: var(--hp-font-body);
	font-size: 16px;
	color: var(--hp-fg);
	transition: border-color .3s ease;
}

#page-container .hp-enq-form select.hp-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, rgba(var(--hp-fg-rgb), .66) 50%),
	                  linear-gradient(135deg, rgba(var(--hp-fg-rgb), .66) 50%, transparent 50%);
	background-position: calc(100% - 9px) 1.25em, calc(100% - 4px) 1.25em;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 22px;
}

/* A dark menu, because the page is dark and the browser's own list is not. */
#page-container .hp-enq-form select.hp-select option {
	background-color: var(--hp-bg);
	color: var(--hp-fg);
}

#page-container .hp-enq-form textarea {
	resize: vertical;
	min-height: 96px;
	line-height: 1.6;
}

#page-container .hp-enq-form input:focus,
#page-container .hp-enq-form select:focus,
#page-container .hp-enq-form textarea:focus {
	border-bottom-color: var(--hp-accent);
	outline: 0;
}

/* The send button. Same shape as the design's: pale fill, dark label, the one
   accent reserved for the hover. */
#page-container .hp-enq-send {
	align-self: flex-start;
	margin-top: 14px;
	padding: 19px 38px;
	background-color: var(--hp-fg);
	color: var(--hp-bg);
	border: 0;
	border-radius: 0;
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .35s ease, color .35s ease;
}

#page-container .hp-enq-send:hover {
	background-color: var(--hp-accent);
	color: var(--hp-fg);
}

#page-container .hp-enq-send[disabled] {
	cursor: default;
	opacity: .6;
}

/* The message under the button. Present in the markup at all times so that a
   screen reader announces it when it fills, rather than when it appears. */
.hp-enq-note {
	margin-top: 14px;
	min-height: 1em;
	font-size: 13px;
	line-height: 1.5;
	color: var(--hp-accent);
	opacity: 0;
	transition: opacity .3s ease;
}

.hp-enq-note.is-shown {
	opacity: 1;
}

/* The honeypot. Off the page rather than display:none, because a form filler
   that skips hidden fields does not skip this one. */
.hp-enq-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The thank you, in place of the form. */
.hp-enq-done {
	margin-top: clamp(40px, 6.4vw, 104px);
	border-left: 1px solid var(--hp-accent);
	padding-left: clamp(20px, 2.4vw, 34px);
}

#page-container .hp-enq-done h3 {
	margin: 0;
	font-size: var(--hp-h3);
	line-height: 1.2;
}

.hp-enq-done p {
	max-width: 440px;
	margin: 18px 0 0;
	font-size: 16px;
	line-height: 1.68;
	font-weight: 300;
	color: rgba(var(--hp-fg-rgb), .6);
}

.hp-enq-done-alt {
	font-size: 15px;
}

#page-container .hp-enq-done:focus {
	outline: 0;
}

/* One column on a phone, and the form sits straight under the words rather
   than a long way below them. */
@media (max-width: 980px) {
	.hp-enq-form,
	.hp-enq-done {
		margin-top: 0;
	}
}


/* ---------------------------------------------------------------------------
   20. The LinkedIn icon in the footer

   Divi's footer social bar carries glyphs for Facebook, Twitter, Google+ and
   Instagram and nothing else. LinkedIn is in the icon font, and the Social
   Media Follow module uses it, but that module's stylesheet is only loaded on
   a page that contains the module. In the footer the list item therefore
   renders with no glyph and no width, so the link is there and invisible.
   --------------------------------------------------------------------------- */

#main-footer .et-social-icon.et-social-linkedin a.icon:before {
	content: "\E09D";
}


/* The registered office line.

   It has to be on the page, and Redhill is the address that means anything to
   anybody, so this one recedes. Dimmed rather than hidden: text set to the
   background colour is not a disclosure, and a search engine reads it as
   something being concealed. It brightens on hover and on focus so anyone
   looking for it can read it without selecting the text. */
.hp-footer-registered {
	color: rgba(var(--hp-fg-rgb), .26);
	transition: color .3s ease;
}

#footer-info:hover .hp-footer-registered,
.hp-footer-registered:focus-within {
	color: var(--hp-fg-50);
}


/* ---------------------------------------------------------------------------
   23. Matching the approved design, 2026-11-05

   Headings were held to the body-copy measure. The hp-measure class sat on
   the whole text module, so a page title was squeezed into about 600px and
   ran to three or four lines where the design sets it on two. The measure now
   applies to the copy only, and each heading takes the width the design gives
   it.
   --------------------------------------------------------------------------- */

#page-container .hp-measure {
	max-width: none;
}

#page-container .hp-measure > .et_pb_text_inner > *:not(h1):not(h2):not(h3),
#page-container .hp-measure .et_pb_text_inner > p {
	max-width: 71ch;
}

#page-container .hp-measure h1 {
	max-width: 1000px;
	text-wrap: balance;
}

#page-container .hp-measure h2 {
	max-width: 1000px;
	text-wrap: balance;
}

/* Two pages set their title to their own width. */
.hp-page-flight-ops #page-container .hp-measure h1 {
	max-width: 1100px;
}

.hp-page-our-story #page-container .hp-measure h1 {
	max-width: 16ch;
}

/* The page intro paragraph under a title, as the design sizes it. */
#page-container .hp-section-first .hp-measure h1 + p {
	max-width: 600px;
	margin-top: 30px;
	font-size: 17px;
	line-height: 1.68;
	font-weight: 300;
}

/* Core services on Home: five across, then three, two, one. */
.hp-grid-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1340px) { .hp-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .hp-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .hp-grid-5 { grid-template-columns: 1fr; } }

.hp-grid-5 > div {
	display: flex;
	flex-direction: column;
	background: var(--hp-panel);
}

.hp-grid-5 p {
	flex: 1 1 auto;
}

.hp-grid-5 .hp-card-link,
#page-container .hp-grid-5 .hp-card-link {
	align-self: flex-start;
	margin-top: 24px;
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(var(--hp-accent-rgb), .4);
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--hp-accent);
	text-decoration: none;
}

.hp-grid-5 .hp-card-link:hover,
.hp-grid-5 .hp-card-link:focus-visible {
	color: var(--hp-fg);
	border-color: var(--hp-fg);
}

/* Faint rings behind the season table, centred on the table's lower left. */
#page-container .hp-radar {
	position: relative;
	overflow: hidden;
}

#page-container .hp-radar::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 28%;
	top: 62%;
	width: min(1700px, 150vw);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: .9;
	background:
		radial-gradient(circle at 50% 50%, rgba(var(--hp-accent-rgb), .20) 0, rgba(var(--hp-accent-rgb), .05) 4%, transparent 9%),
		repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent calc(4.5% - 1px), rgba(var(--hp-accent-rgb), .13) 4.5%, transparent calc(4.5% + 1px));
	-webkit-mask-image: radial-gradient(circle, #000 0, #000 30%, transparent 70%);
	mask-image: radial-gradient(circle, #000 0, #000 30%, transparent 70%);
}

#page-container .hp-radar .et_pb_row {
	position: relative;
	z-index: 1;
}

/* Find your next event: a photograph panel. The button is the link, and
   stretches over the whole panel, so the panel clicks through without a
   heading sitting inside a link. */
.hp-find {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: clamp(340px, 44vh, 470px);
	padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px);
	overflow: hidden;
	border: 1px solid var(--hp-rule-16);
	background: var(--hp-panel);
	text-align: center;
	color: var(--hp-fg);
	isolation: isolate;
	transition: border-color .4s ease;
}

/* Photograph and veil sit behind the text inside the panel's own layer, so
   the text needs no positioning and the button's cover reaches the panel. */
.hp-find img {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s ease;
}

.hp-find::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(85% 95% at 50% 50%, rgba(10, 12, 14, .58) 0%, rgba(10, 12, 14, .86) 100%);
}

.hp-find-body {
	max-width: 640px;
}

.hp-find:hover,
.hp-find:focus-within {
	border-color: rgba(var(--hp-fg-rgb), .4);
}

.hp-find:hover img {
	transform: scale(1.03);
}

.hp-find .hp-eyebrow {
	display: block;
}

#page-container .hp-find h2 {
	margin: 24px 0 0;
	font-size: clamp(32px, 4.2vw, 66px);
	line-height: 1.06;
	letter-spacing: -.012em;
	text-wrap: balance;
}

#page-container .hp-find .hp-find-text {
	max-width: 440px;
	margin: 24px auto 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.66;
	font-weight: 300;
	color: rgba(var(--hp-fg-rgb), .85);
}

#page-container .hp-find .hp-find-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 34px;
	padding: 17px 32px;
	background: var(--hp-fg);
	color: var(--hp-bg);
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .3s ease, color .3s ease;
}

#page-container .hp-find .hp-find-cta:hover,
#page-container .hp-find .hp-find-cta:focus-visible {
	background: var(--hp-accent);
	color: var(--hp-fg);
}

.hp-find .hp-find-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.hp-find .hp-find-cta:focus-visible {
	outline: 2px solid var(--hp-accent);
	outline-offset: 4px;
}

/* WordPress adds an empty paragraph after an eyebrow span. */
#page-container .hp-eyebrow + p:empty {
	display: none;
}

/* The closing line under Core services on the Services page. */
#page-container .hp-closing {
	max-width: none;
	margin: clamp(36px, 5vh, 56px) 0 0;
	text-align: center;
	font-size: 16px;
	line-height: 1.6;
	color: var(--hp-fg-62);
}

/* Venues and organisers: copy left, four numbered steps right, the H mark
   cut off at the right edge. */
#page-container .hp-organisers {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--hp-rule-10);
	border-bottom: 1px solid var(--hp-rule-10);
	background-color: var(--hp-panel);
	padding-top: clamp(64px, 9vh, 120px);
	padding-bottom: clamp(64px, 9vh, 120px);
	margin-top: var(--hp-section-major);
}

#page-container .hp-organisers::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	height: 125%;
	aspect-ratio: 1;
	transform: translate(50%, -50%);
	background: url(../../plugins/helipad-divi/assets/helipad-mark.png) center / contain no-repeat;
	opacity: .12;
	pointer-events: none;
}

#page-container .hp-organisers .et_pb_row {
	position: relative;
	z-index: 1;
}

.hp-organisers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(40px, 6vw, 100px);
	align-items: center;
}

#page-container .hp-organisers-grid h2 {
	margin: 26px 0 0;
	font-size: clamp(30px, 3.6vw, 56px);
	line-height: 1.08;
	text-wrap: balance;
}

.hp-organisers-grid p {
	max-width: 520px;
	margin: 26px 0 0;
	font-size: 16px;
	line-height: 1.68;
	font-weight: 300;
	color: var(--hp-fg-62);
}

.hp-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--hp-rule-10);
}

.hp-steps li {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 22px 0;
	background: var(--hp-panel);
	list-style: none;
}

.hp-steps .hp-step-num {
	flex-shrink: 0;
	padding-top: 4px;
	font-family: var(--hp-font-mono);
	font-size: 14px;
	letter-spacing: .2em;
	color: var(--hp-accent);
}

.hp-steps strong {
	display: block;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: .01em;
	color: var(--hp-fg);
}

.hp-steps .hp-step-text {
	display: block;
	margin-top: 7px;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.55;
	color: var(--hp-fg-50);
}

/* Services: the film runs behind the whole list, as the design has it. */
#page-container .hp-video-section .helipad-sv__rows {
	border-top-color: rgba(var(--hp-fg-rgb), .12);
}

@media (prefers-reduced-motion: reduce) {
	.hp-find img,
	.hp-find,
	.hp-find .hp-find-cta {
		transition: none;
	}
}