/* =========================================================================
 * HTA — brand & design system
 *
 * Colour values are sampled from the HTA strategy artwork
 * (section bars, pillar badges and card tints), then normalised into the
 * token set below. Change a value here and it updates site-wide.
 *
 *   1. Brand tokens
 *   2. Typography
 *   3. Icon family
 *   4. Header & navigation
 *   5. Hero
 *  5b. Inner page hero & breadcrumb
 *   6. Section furniture
 *   7. Four-pillar colour system
 *   8. Button system
 *   9. Cards & content
 *  10. Footer
 *  11. Responsive passes
 *  12. Motion & accessibility
 * ====================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Brand tokens
 * ------------------------------------------------------------------ */

:root {
	/* --- Primary brand palette --- */
	--hta-navy:       #073B75;   /* main navigation, headings, footer   */
	--hta-navy-dk:    #04205A;   /* sampled: strategy "section" bars    */
	--hta-navy-lt:    #104988;   /* sampled: pillar 1 badge             */
	--hta-green:      #268A35;   /* membership, networking, positive    */
	--hta-green-dk:   #1E6E2A;   /* green hover                         */
	--hta-gold:       #FEEC59;   /* THE HTA yellow — client brief 2026-09-02 */
	--hta-gold-dk:    #FEEC59;   /* no second yellow exists any more */
	--hta-teal:       #078A96;   /* capacity building, learning hub     */
	--hta-teal-dk:    #06767F;

	/*
	 * Button fills. #268A35 and #078A96 give white text 4.35:1 and 4.08:1,
	 * just under the 4.5:1 AA minimum for button-sized text, so solid
	 * buttons use these fractionally deeper tones. Visually identical,
	 * measurably accessible.
	 */
	--hta-green-btn:  #23802F;   /* 5.0:1 with white */
	--hta-teal-btn:   #06767F;   /* 5.4:1 with white */

	/* --- Supporting neutrals --- */
	--hta-white:      #FFFFFF;
	--hta-off-white:  #F7F8F6;
	--hta-light-grey: #F2F4F5;
	--hta-text:       #171717;
	--hta-muted:      #667085;
	--hta-line:       #E3E7EA;

	/* --- Pillar background tints, sampled from the artwork cards --- */
	--hta-tint-navy:  #F2F6FF;
	--hta-tint-green: #F4F9EF;
	--hta-tint-gold:  #FFFBE0;
	--hta-tint-teal:  #ECF6F8;

	/* --- Shape & depth --- */
	--hta-radius:     10px;
	--hta-radius-sm:  6px;
	--hta-radius-lg:  14px;
	--hta-shadow:     0 1px 2px rgba(23, 32, 42, .04), 0 8px 24px -12px rgba(23, 32, 42, .16);
	--hta-shadow-hi:  0 2px 6px rgba(23, 32, 42, .06), 0 22px 44px -18px rgba(23, 32, 42, .26);

	/* --- Type ---
	 * Poppins carries everything: headings, body copy, navigation, buttons,
	 * labels, forms, cards and the footer. Both tokens point at it on
	 * purpose — client brief 2026-09-02 asks for one global font — so a
	 * component reading either --hta-head or --hta-body lands on the same
	 * face, including the card, listing and profile titles the HTA Core
	 * plugin styles from these tokens. Requested in hta_child_assets();
	 * Divi's own heading_font/body_font options say Poppins too, which is
	 * what makes it global rather than a stack of overrides.
	 *
	 * Dancing Script is the one exception the brief allows: the short script
	 * line above a heading. Never body copy. */
	--hta-head:   'Poppins', Arial, sans-serif;   /* was DM Sans; client brief 2026-09-02 */
	--hta-body:   'Poppins', Arial, sans-serif;
	--hta-script: 'Dancing Script', 'Segoe Script', cursive;

	/* Near-black panel used by the hero and header. Deep navy rather than
	 * pure black, so the composition stays on brand. */
	--hta-panel: #0B1B33;

	--hta-ease: cubic-bezier(.2, .8, .2, 1);
	--hta-max:  1280px;
}

/* ------------------------------------------------------------------ *
 * 2. Typography
 *
 * These base rules are wrapped in :where(), which contributes ZERO
 * specificity. That matters: Divi writes per-module rules like
 * ".et_pb_text_0 h1 { font-size: 36px }" at specificity 0-1-1. A plain
 * "body.hta-site h1" rule scores 0-1-2 and would silently beat it, so
 * nothing set in the Visual Builder would take effect. With :where(), the
 * defaults below apply only until Divi — or a component class further down
 * this file — says otherwise.
 * ------------------------------------------------------------------ */

:where(body.hta-site) {
	font-family: var(--hta-body);
	font-size: 17px;
	line-height: 1.72;
	color: var(--hta-muted);
}

body.hta-site {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:where(body.hta-site) :is(p, li, .et_pb_text) {
	font-family: var(--hta-body);
	color: var(--hta-muted);
}

:where(body.hta-site) :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--hta-head);
	color: var(--hta-navy);
	font-weight: 600;
	line-height: 1.14;
}

/*
 * Tracking for the uppercase setting. Caps need air that lowercase does
 * not, and the smaller the heading the more it needs — at h5/h6 sizes the
 * words are short and set solid, so they close up first. Kept at zero
 * specificity with the rest of section 2, which lets a component (the
 * hero panel, the page-hero slab) tune its own value further down.
 */
:where(body.hta-site) :is(h1, h2) { letter-spacing: .018em; }
:where(body.hta-site) :is(h3, h4) { letter-spacing: .024em; }
:where(body.hta-site) :is(h5, h6) { letter-spacing: .032em; }

/*
 * Line height. Caps carry no descenders, so 1.14 looks tighter than the
 * same figure on lowercase — but Fraunces has a tall cap height, and a
 * heading that wraps to three lines on a phone must not collide. These
 * are the compact-but-safe values measured against the longest titles on
 * the site ("INDUSTRY REPRESENTATION", "ACCOMMODATION NEEDED: 40 CYCLISTS").
 */
:where(body.hta-site) h1 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; }
:where(body.hta-site) h2 { font-size: clamp(26px, 3vw, 42px); line-height: 1.14; }
:where(body.hta-site) h3 { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.24; }
:where(body.hta-site) h4 { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.32; }
:where(body.hta-site) :is(h5, h6) { line-height: 1.36; }

body.hta-site strong { color: var(--hta-text); font-weight: 600; }

body.hta-site a { transition: color .3s ease; }
:where(body.hta-site) a { color: var(--hta-navy); }
body.hta-site a:hover { color: var(--hta-green); }

body.hta-site :is(p, li, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }

/*
 * The cursive tourism face. Reserved for short decorative statements such as
 * "Together, Let's Make Harties 10 out of 10 Again!" — never body copy.
 */
.hta-script {
	font-family: var(--hta-script);
	font-size: clamp(26px, 2.8vw, 42px);
	line-height: 1.28;
	color: var(--hta-navy);
	font-weight: 600;
}

.hta-script--light { color: var(--hta-white); }
.hta-script--gold  { color: var(--hta-gold); }

/* ------------------------------------------------------------------ *
 * 3. Icon family
 *
 * One consistent outline set (24px grid, 2px stroke), delivered as CSS
 * masks so a single colour token drives every icon and no extra HTTP
 * request or icon-font is needed.
 * ------------------------------------------------------------------ */

.hta-i {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	vertical-align: -.125em;
	flex: 0 0 auto;
}

.hta-i--megaphone   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }
.hta-i--network     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.6'/%3E%3Ccircle cx='5' cy='18' r='2.6'/%3E%3Ccircle cx='19' cy='18' r='2.6'/%3E%3Cpath d='M10.5 7.2 6.4 15.5M13.5 7.2l4.1 8.3M7.6 18h8.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.6'/%3E%3Ccircle cx='5' cy='18' r='2.6'/%3E%3Ccircle cx='19' cy='18' r='2.6'/%3E%3Cpath d='M10.5 7.2 6.4 15.5M13.5 7.2l4.1 8.3M7.6 18h8.8'/%3E%3C/svg%3E"); }
.hta-i--landmark    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M4 10h16M12 3 3 8h18l-9-5z'/%3E%3Cpath d='M6 10v8M10 10v8M14 10v8M18 10v8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M4 10h16M12 3 3 8h18l-9-5z'/%3E%3Cpath d='M6 10v8M10 10v8M14 10v8M18 10v8'/%3E%3C/svg%3E"); }
.hta-i--cap         { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 9 12 4 2 9l10 5 10-5z'/%3E%3Cpath d='M6 11.5V17c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5v-5.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 9 12 4 2 9l10 5 10-5z'/%3E%3Cpath d='M6 11.5V17c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5v-5.5'/%3E%3C/svg%3E"); }
.hta-i--bulb        { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.5.4.8 1 .8 1.6V16h5.4v-.5c0-.6.3-1.2.8-1.6A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.5.4.8 1 .8 1.6V16h5.4v-.5c0-.6.3-1.2.8-1.6A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E"); }
.hta-i--bed         { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18V6M3 12h18a0 0 0 0 1 0 0v6M3 15h18'/%3E%3Cpath d='M7 12V9h4.5a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M21 18v-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18V6M3 12h18a0 0 0 0 1 0 0v6M3 15h18'/%3E%3Cpath d='M7 12V9h4.5a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M21 18v-2'/%3E%3C/svg%3E"); }
.hta-i--bag         { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14l1 14H4L5 7z'/%3E%3Cpath d='M9 10V6a3 3 0 0 1 6 0v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14l1 14H4L5 7z'/%3E%3Cpath d='M9 10V6a3 3 0 0 1 6 0v4'/%3E%3C/svg%3E"); }
.hta-i--handshake   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1.4 1.4 0 0 0 2-2'/%3E%3Cpath d='m14 16 2.5 2.5a1.4 1.4 0 0 0 2-2L15 13'/%3E%3Cpath d='M3 11 7 7l4 3 3-3 7 6-3 3-4-3-3 2-3-2-2 2-3-3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1.4 1.4 0 0 0 2-2'/%3E%3Cpath d='m14 16 2.5 2.5a1.4 1.4 0 0 0 2-2L15 13'/%3E%3Cpath d='M3 11 7 7l4 3 3-3 7 6-3 3-4-3-3 2-3-2-2 2-3-3z'/%3E%3C/svg%3E"); }
.hta-i--utensils    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v7a2.5 2.5 0 0 0 5 0V3M8.5 10v11'/%3E%3Cpath d='M17.5 3c-1.4 0-2.5 2-2.5 4.5s1.1 3.5 2.5 3.5S20 10 20 7.5 18.9 3 17.5 3Zm0 8v10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v7a2.5 2.5 0 0 0 5 0V3M8.5 10v11'/%3E%3Cpath d='M17.5 3c-1.4 0-2.5 2-2.5 4.5s1.1 3.5 2.5 3.5S20 10 20 7.5 18.9 3 17.5 3Zm0 8v10'/%3E%3C/svg%3E"); }
.hta-i--users       { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='3.2'/%3E%3Cpath d='M22 20v-2a4 4 0 0 0-3-3.9M16.5 4.1a3.2 3.2 0 0 1 0 6.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='3.2'/%3E%3Cpath d='M22 20v-2a4 4 0 0 0-3-3.9M16.5 4.1a3.2 3.2 0 0 1 0 6.2'/%3E%3C/svg%3E"); }
.hta-i--folder      { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2.5h8a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2.5h8a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z'/%3E%3C/svg%3E"); }
.hta-i--news        { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h13v14a1.5 1.5 0 0 0 1.5 1.5H5.5A1.5 1.5 0 0 1 4 19V5Z'/%3E%3Cpath d='M17 9h3v9.5a2 2 0 0 1-2 2'/%3E%3Cpath d='M7 8.5h7M7 12h7M7 15.5h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h13v14a1.5 1.5 0 0 0 1.5 1.5H5.5A1.5 1.5 0 0 1 4 19V5Z'/%3E%3Cpath d='M17 9h3v9.5a2 2 0 0 1-2 2'/%3E%3Cpath d='M7 8.5h7M7 12h7M7 15.5h4'/%3E%3C/svg%3E"); }
.hta-i--minutes     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m17.5 13.5 3 3-4 1 1-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m17.5 13.5 3 3-4 1 1-4z'/%3E%3C/svg%3E"); }
.hta-i--calendar    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.hta-i--globe       { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18Z'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------ *
 * 4. Header & navigation
 *
 * White bar, black uppercase nav, outlined JOIN HTA.
 * ------------------------------------------------------------------ */

body.hta-site #main-header {
	background-color: var(--hta-white) !important;
	box-shadow: 0 1px 0 rgba(23, 32, 42, .10);
	transition: box-shadow .4s var(--hta-ease), padding .4s var(--hta-ease);
}

body.hta-site #main-header .container {
	width: 94%;
	max-width: 1560px;
}

body.hta-site #logo {
	max-height: 64%;
	width: auto;
	object-fit: contain;
	padding: 6px 0;
	transition: max-height .4s var(--hta-ease);
}

body.hta-site.hta-scrolled #main-header { box-shadow: 0 4px 20px -10px rgba(23, 32, 42, .28); }
body.hta-site.hta-scrolled #logo { max-height: 56%; }

/* --- Menu items: black, uppercase, letterspaced -------------------- */

body.hta-site #top-menu li a {
	position: relative;
	font-family: var(--hta-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hta-text) !important;
	padding-bottom: 20px;
	opacity: 1;
	transition: color .3s ease;
}

/*
 * The hover underline uses ::before, not ::after. Divi already owns ::after
 * on any menu item with a dropdown — that is where it draws the caret — so
 * an ::after here collided with it and Divi's "top" positioning won, which
 * threw the gold bar up above the word "Resources".
 *
 * "top: auto" is explicit so nothing Divi sets can drag it upward again.
 */
body.hta-site #top-menu > li > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	top: auto;
	bottom: 10px;
	height: 2px;
	background: var(--hta-gold);
	pointer-events: none;
	transition: right .38s var(--hta-ease);
}

body.hta-site #top-menu > li > a:hover::before,
body.hta-site #top-menu > li.current-menu-item > a::before,
body.hta-site #top-menu > li > a:focus-visible::before { right: 0; }

body.hta-site #top-menu li a:hover { color: var(--hta-green) !important; }
body.hta-site #top-menu li.current-menu-item > a { color: var(--hta-green) !important; }

/* --- Dropdowns ----------------------------------------------------- */

body.hta-site #top-menu li ul.sub-menu {
	padding: 8px 0;
	border: 1px solid var(--hta-line);
	border-top: 2px solid var(--hta-gold);
	border-radius: 0;
	box-shadow: 0 22px 44px -22px rgba(23, 32, 42, .35);
	background: var(--hta-white);
}

body.hta-site #top-menu li li a {
	width: 236px;
	padding: 11px 22px;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--hta-text) !important;
	transition: background-color .25s ease, padding-left .25s ease, color .25s ease;
}

body.hta-site #top-menu li li a:hover {
	background: var(--hta-off-white);
	color: var(--hta-green) !important;
	padding-left: 28px;
}

body.hta-site #top-menu li li a::before { display: none; }

/* --- JOIN HTA: outlined in black ----------------------------------- */

body.hta-site #top-menu li.hta-nav-cta { margin-left: 22px; }

body.hta-site #top-menu li.hta-nav-cta > a {
	display: inline-block;
	padding: 12px 26px !important;
	background: transparent;
	border: 1px solid var(--hta-text);
	color: var(--hta-text) !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

body.hta-site #top-menu li.hta-nav-cta > a::before { display: none; }

body.hta-site #top-menu li.hta-nav-cta > a:hover {
	background: var(--hta-text);
	border-color: var(--hta-text);
	color: var(--hta-white) !important;
}

/* --- Mobile menu ---------------------------------------------------- */

body.hta-site .et_mobile_menu {
	padding: 6px 0;
	border-top: 2px solid var(--hta-gold);
	background: var(--hta-white);
	box-shadow: 0 24px 46px -22px rgba(23, 32, 42, .35);
}

body.hta-site .et_mobile_menu li a {
	padding: 15px 22px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hta-text);
	border-bottom: 1px solid var(--hta-line);
}

body.hta-site .et_mobile_menu li:last-child > a { border-bottom: 0; }
body.hta-site .et_mobile_menu li a:hover { background: var(--hta-off-white); opacity: 1; }

body.hta-site .et_mobile_menu .hta-nav-cta { margin: 14px 20px 10px; }

body.hta-site .et_mobile_menu .hta-nav-cta > a {
	border: 1px solid var(--hta-text);
	color: var(--hta-text) !important;
	text-align: center;
}

body.hta-site .mobile_menu_bar:before,
body.hta-site #et_mobile_nav_menu .mobile_menu_bar:before {
	font-size: 30px;
	color: var(--hta-text) !important;
}

/* ------------------------------------------------------------------ *
 * 5. Hero
 *
 * The approved composition: a light page, the photograph contained on the
 * right, and a solid dark panel overlapping it from the left. Sharp corners
 * throughout, outlined buttons, carousel indicator beneath.
 * ------------------------------------------------------------------ */

.hta-hero {
	background: var(--hta-off-white) !important;
	overflow: visible;
	/*
	 * The slide starts directly under the header — Divi's fixed nav already
	 * offsets the page, so any top padding here is dead off-white above the
	 * photograph. Set here rather than on the module: Divi emitted no padding
	 * rule at all for this section once the top value was 0, which left its
	 * own 54px default standing.
	 */
	padding-top: 0 !important;
	padding-bottom: clamp(56px, 6vw, 90px) !important;
}

.hta-hero .et_pb_row {
	width: 94%;
	max-width: 1560px;
	display: flex !important;
	align-items: center;
	position: relative;
}

/* --- Photograph, right --------------------------------------------- */

.hta-hero__media {
	position: relative;
	flex: 0 0 62%;
	max-width: 62%;
	margin: 0 0 0 auto !important;
	z-index: 1;
}

.hta-hero__media .et_pb_module { margin-bottom: 0 !important; }

.hta-hero__slides {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--hta-panel);
}

.hta-hero__slides .et_pb_image,
.hta-hero__slides .et_pb_image_wrap { height: 100%; }

.hta-hero__slides .et_pb_image {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	opacity: 0;
	transition: opacity .9s var(--hta-ease);
}

.hta-hero__slides .et_pb_image:first-child { opacity: 1; }

.hta-hero__slides .et_pb_image.is-active { opacity: 1; }

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

/* --- Slider: both edges reach the screen --------------------------- *
 *
 * The composition is unchanged — navy panel left, photograph right,
 * overlapping in the middle. The only difference is where the two of them
 * stop: the row was capped at --hta-max, so at 1440px each end sat 80px
 * short and the band floated in off-white. The row now runs the full
 * width with no side padding, which puts the panel's left edge on the
 * left edge of the screen and the photograph's right edge on the right.
 *
 * Percentages still do the work between them: the panel is 46% of the
 * row, the photo 62%, and the panel's -8% right margin is what makes them
 * overlap. Those three add to 100%, so widening the row widens both
 * proportionally and the overlap scales with it.
 *
 * Only above the 980px breakpoint — below it the row goes display:block
 * and the two stack full width already.
 */
@media (min-width: 981px) {
	.hta-hero > .et_pb_row:first-child {
		width: 100%;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}

	/*
	 * The panel's box now starts at the screen edge, but its text should
	 * not. This restores the copy to the same place it has always sat:
	 * the site gutter, plus the panel's own inset. At 1440 that is
	 * 80 + 49 = 129px, exactly where the H1 was before.
	 */
	/* Two classes, not one: the base .hta-hero__panel rule further down
	 * sets the whole padding shorthand with !important, and at equal
	 * specificity the later rule wins — which is this override's own
	 * source position working against it. .hta-hero scopes it up to 0-2-0
	 * so position in the file stops mattering. */
	.hta-hero .hta-hero__panel {
		padding-left: calc(
			max(24px, (100vw - var(--hta-max)) / 2) + clamp(28px, 3.4vw, 58px)
		) !important;
	}
}

/* --- Dark panel, left, overlapping --------------------------------- */

.hta-hero__panel {
	position: relative;
	flex: 0 0 46%;
	max-width: 46%;
	margin: 0 -8% 0 0 !important;
	padding: clamp(38px, 4vw, 66px) clamp(28px, 3.4vw, 58px) !important;
	background: var(--hta-panel);
	z-index: 3;
}

.hta-hero__panel .et_pb_module { margin-bottom: 0 !important; }

/* H1 — uppercase, tight, as drawn */
.hta-hero__panel h1 {
	margin: 0 0 20px;
	text-transform: uppercase;
	color: var(--hta-white);
	font-weight: 700;
	letter-spacing: .015em;
	line-height: 1.08;
}

/* Association name sits below the headline */
.hta-hero__kicker {
	margin: 0 0 30px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: .22em !important;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72) !important;
}

.hta-hero__lede {
	margin: 0 0 30px !important;
	color: rgba(255, 255, 255, .8) !important;
}

/* Outlined hero buttons, wrapping onto a second line like the design */
.hta-hero__panel .et_pb_button_module_wrapper {
	display: inline-block;
	margin: 0 10px 10px 0 !important;
	vertical-align: middle;
}

.hta-hero__panel .et_pb_button {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, .8) !important;
	border-radius: 0 !important;
	color: var(--hta-white) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase;
	padding: 14px 26px !important;
	box-shadow: none !important;
}

.hta-hero__panel .et_pb_button:hover {
	background: var(--hta-gold) !important;
	border-color: var(--hta-gold) !important;
	color: var(--hta-text) !important;
	padding: 14px 26px !important;
}

/* --- Carousel controls --------------------------------------------- */

.hta-hero__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-top: clamp(34px, 4vw, 58px);
}

.hta-hero__nav {
	appearance: none;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hta-line);
	background: var(--hta-white);
	color: var(--hta-navy);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.hta-hero__nav:hover {
	background: var(--hta-panel);
	border-color: var(--hta-panel);
	color: var(--hta-white);
}

.hta-hero__count {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hta-muted);
	font-variant-numeric: tabular-nums;
	min-width: 128px;
	text-align: center;
}

/* --- Responsive ----------------------------------------------------- */

@media (max-width: 1180px) {
	.hta-hero__media { flex-basis: 66%; max-width: 66%; }
	.hta-hero__panel { flex-basis: 50%; max-width: 50%; margin-right: -12% !important; }
}

@media (max-width: 980px) {
	/* Stack: photo first, panel pulled up over its lower edge. */
	.hta-hero .et_pb_row { display: block !important; }

	.hta-hero__media,
	.hta-hero__panel {
		flex: none;
		max-width: none;
		width: 100% !important;
		margin: 0 !important;
	}

	.hta-hero__media { width: 100% !important; }
	.hta-hero__slides { aspect-ratio: 16 / 9; }

	.hta-hero__panel {
		margin: -56px auto 0 !important;
		width: 92% !important;
	}
}

@media (max-width: 767px) {
	.hta-hero__slides { aspect-ratio: 4 / 3; }
	.hta-hero__panel { margin-top: -36px !important; width: 94% !important; }

	.hta-hero__panel .et_pb_button_module_wrapper {
		display: block;
		margin: 0 0 9px 0 !important;
	}

	.hta-hero__panel .et_pb_button {
		display: block;
		width: 100%;
		text-align: center;
	}

	.hta-hero__controls { gap: 14px; margin-top: 28px; }
	.hta-hero__count { min-width: 104px; font-size: 11px; }
}

/* Pages generated before the split hero keep the old overlay treatment
 * until "Re-apply design" is run. */
.hta-pagehero { position: relative; }
.hta-pagehero h1 { margin: 0; text-transform: uppercase; letter-spacing: .02em; }

/* ------------------------------------------------------------------ *
 * 5b. Inner page hero
 *
 * The approved internal-page composition: a narrow left rail on white
 * carrying the "// EYEBROW" line, a solid dark slab holding the H1, then the
 * breadcrumb and a scroll cue — with the photograph bleeding off the right
 * edge of the screen.
 *
 * The row is forced to 100% width so the photograph can reach the edge; the
 * left rail carries the page inset instead, which is why its padding-left is
 * a viewport unit rather than a fixed value.
 * ------------------------------------------------------------------ */

.hta-pagehero--split {
	position: relative;
	background: var(--hta-white) !important;
	overflow: hidden;
	/* No padding at all: the photograph runs to the top and bottom edges of
	 * the section, and the following section owns the gap beneath it. */
	padding: 0 !important;
}

.hta-pagehero--split .et_pb_row {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: stretch;
	min-height: clamp(250px, 25vw, 390px);
}

/* --- Left rail ------------------------------------------------------ */

.hta-pagehero__panel {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 0 40%;
	width: 40% !important;
	max-width: 40%;
	margin: 0 !important;
	padding: clamp(28px, 3.2vw, 54px) clamp(14px, 1.6vw, 28px) clamp(20px, 2.2vw, 34px) clamp(24px, 9vw, 150px);
}

.hta-pagehero__panel .et_pb_module { margin-bottom: 0 !important; }

.hta-pagehero__eyebrow {
	/* Sits over the slab's inner text edge, not over the slab's box edge. */
	padding-left: clamp(18px, 2.2vw, 34px);
	margin-bottom: clamp(14px, 1.6vw, 22px) !important;
}

.hta-pagehero__eyebrow .hta-eyebrow { margin-bottom: 0 !important; }

/* --- The slab ------------------------------------------------------- */

.hta-pagehero__slab {
	width: 100%;
	background: var(--hta-panel);
	padding: clamp(24px, 2.8vw, 44px) clamp(18px, 2.2vw, 34px) clamp(28px, 3.2vw, 50px) !important;
}

.hta-pagehero__slab h1 {
	margin: 0;
	color: var(--hta-white);
	text-transform: uppercase;
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: .035em;
	/*
	 * Titles run from "CONTACT US" to "INDUSTRY REPRESENTATION". The clamp
	 * keeps the long ones inside the rail; "anywhere" is the last-resort
	 * guard so a single long word can never punch through the slab.
	 */
	font-size: clamp(26px, 2.9vw, 52px) !important;
	overflow-wrap: anywhere;
}

	.hta-pagehero__lede {
	max-width: 46ch;
	margin-top: clamp(14px, 1.6vw, 24px) !important;
}

.hta-pagehero__lede .hta-lede { font-size: 16px; margin: 0; }

/* --- Breadcrumb and scroll cue, pinned to the foot of the rail ------- */

.hta-pagehero__foot {
	margin-top: auto !important;
	padding-top: clamp(14px, 1.6vw, 24px);
	padding-left: clamp(18px, 2.2vw, 34px);
}

.hta-pagehero__scroll {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	margin: 10px 0 0;
	padding: 4px;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.hta-pagehero__scroll span {
	display: block;
	width: 30px;
	height: 20px;
	background: var(--hta-text);
	transition: transform .3s var(--hta-ease), background-color .3s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath d='M2 2h9l4 5 4-5h9l-13 16z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath d='M2 2h9l4 5 4-5h9l-13 16z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hta-pagehero__scroll:hover span,
.hta-pagehero__scroll:focus-visible span {
	transform: translateY(4px);
	background: var(--hta-green);
}

/* --- Photograph, bleeding off the right edge ------------------------ */

.hta-pagehero__media {
	position: relative;
	flex: 1 1 60%;
	width: 60% !important;
	max-width: 60%;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--hta-panel);
	overflow: hidden;
}

/*
 * Taken out of flow, like the homepage slides. Left in flow the photograph's
 * natural height sets the row height, which stretches the left rail taller
 * than its content and opens a gap above the breadcrumb. Absolute means the
 * rail decides the height and the photograph fills whatever it gets.
 */
.hta-pagehero__media .et_pb_module,
.hta-pagehero__media .et_pb_image {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	height: 100%;
}

.hta-pagehero__media .et_pb_image_wrap {
	display: block;
	height: 100%;
}

.hta-pagehero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* The inner-page photography reads as black and white, as drawn. Remove
	 * this one line to run the images in full colour. */
	filter: grayscale(1);
}

/* No photograph uploaded yet: the column stays a flat brand panel. */
.hta-pagehero--split.hta-pagehero--noimg .hta-pagehero__media { background: var(--hta-panel); }

/* --- Responsive ----------------------------------------------------- */

@media (max-width: 1180px) {
	.hta-pagehero__panel { flex-basis: 44%; width: 44% !important; max-width: 44%; }
	.hta-pagehero__media { flex-basis: 56%; width: 56% !important; max-width: 56%; }
}

@media (max-width: 980px) {
	/* Stack: the rail first so the heading is the first thing read, with
	 * the photograph beneath it. */
	.hta-pagehero--split .et_pb_row {
		display: block !important;
		min-height: 0;
	}

	.hta-pagehero__panel,
	.hta-pagehero__media {
		flex: none;
		width: 100% !important;
		max-width: none;
	}

	.hta-pagehero__media { height: clamp(200px, 38vw, 320px); }

	.hta-pagehero__panel {
		padding: clamp(22px, 4vw, 36px) 5vw clamp(18px, 3vw, 28px);
	}

	.hta-pagehero__slab { width: auto; align-self: stretch; }
}

@media (max-width: 767px) {
	.hta-pagehero__slab h1 { font-size: clamp(26px, 7.4vw, 36px) !important; }
	.hta-pagehero__lede { max-width: none; }
}

/* --- Breadcrumb ----------------------------------------------------- */

.hta-crumbs { font-family: var(--hta-body); }

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

.hta-crumbs__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--hta-muted);
}

.hta-crumbs__item + .hta-crumbs__item::before {
	content: "/";
	color: var(--hta-line);
	font-weight: 400;
}

.hta-crumbs__link {
	color: var(--hta-muted);
	text-decoration: none;
	transition: color .25s ease;
}

.hta-crumbs__link:hover,
.hta-crumbs__link:focus-visible { color: var(--hta-green); }

.hta-crumbs__current { color: var(--hta-text); }

/* ------------------------------------------------------------------ *
 * 6. Section furniture
 * ------------------------------------------------------------------ */

/*
 * Section eyebrow, following the PIA convention: plain uppercase text with a
 * "//" prefix, no pill, no fill. Quieter and more editorial than a badge.
 */
.hta-eyebrow {
	display: block;
	margin: 0 0 14px !important;
	font-family: var(--hta-body) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase;
	color: var(--hta-muted) !important;
	line-height: 1.5 !important;
}

.hta-eyebrow::before {
	content: "// ";
	color: var(--hta-green);
	font-weight: 700;
}

.hta-heading--light .hta-eyebrow { color: rgba(255, 255, 255, .72) !important; }
.hta-heading--light .hta-eyebrow::before { color: var(--hta-gold); }

/* Pillar-tinted eyebrow prefixes */
.hta-eyebrow--green::before { color: var(--hta-green); }
.hta-eyebrow--gold::before  { color: var(--hta-gold-dk); }
.hta-eyebrow--teal::before  { color: var(--hta-teal); }

.hta-h2 { margin: 0 0 18px; }
.hta-lede { margin: 0; font-size: 18px; }

.hta-kicker {
	margin: 0 0 10px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase;
	color: var(--hta-green) !important;
}

.hta-col-endalign {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding-bottom: 52px;
}

.hta-col-endalign .et_pb_button_module_wrapper { margin: 0 !important; }

.hta-ticks { list-style: none; margin: 0; padding: 0; }

.hta-ticks li {
	position: relative;
	padding: 0 0 14px 34px;
	color: var(--hta-text);
	line-height: 1.6;
}

.hta-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .3em;
	width: 19px;
	height: 19px;
	background: var(--hta-green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hta-figure .et_pb_image_wrap {
	overflow: hidden;
	display: block;
	border-radius: var(--hta-radius-lg);
	box-shadow: var(--hta-shadow);
}

.hta-figure img {
	width: 100%;
	display: block;
	border-radius: var(--hta-radius-lg);
	transition: transform 1s var(--hta-ease);
}

.hta-figure:hover img { transform: scale(1.03); }

/* --- About: the photo and the copy end on the same line ------------ *
 *
 * align-self: stretch was here on its own and did nothing — Divi renders
 * .et_pb_row as display:block with floated columns, so there was no flex
 * context for the media column to stretch in. It sat at whatever height
 * the photograph's own aspect ratio gave it (605x402 from a 1600x1064
 * original) while the copy column ran on to 479px, leaving the image
 * ending 77px short of the button beside it.
 *
 * Making the row a flex line lets the taller column set the height and
 * the photo fill it. Only above Divi's 980px stacking breakpoint: below
 * that the columns are full width and stacked, the photo should keep its
 * own proportions, and there is nothing to align it to.
 */
@media (min-width: 981px) {
	.hta-about .et_pb_row {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	/* Divi's columns keep their 47.25% width and 5.5% gutter as flex
	 * items; float is simply ignored inside a flex container. */
	.hta-about__media,
	.hta-about__media .et_pb_image,
	.hta-about__media .et_pb_image_wrap {
		display: flex;
		width: 100%;
	}

	.hta-about__media { width: 47.25%; }

	/* The chain above gives the wrap a definite height, so height:100%
	 * resolves here; cover keeps the dam wall in proportion and crops
	 * the sky instead of stretching it. */
	.hta-about__media .hta-figure img {
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

.hta-about__media { align-self: stretch; }

/* ------------------------------------------------------------------ *
 * 7. Four-pillar colour system
 *
 * 01 Communication  navy   02 Networking  green
 * 03 Advocacy       gold   04 Capacity    teal
 * ------------------------------------------------------------------ */

.hta-pillar-row {
	display: flex !important;
	flex-wrap: wrap;
	gap: 24px;
	background: none;
	border: 0;
}

.hta-pillar-row .hta-pillar-col {
	margin: 0 !important;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
}

/*
 * The card is a flex column and the Explore link is pushed down with
 * margin-top:auto. It used to be absolutely positioned, which meant any
 * description longer than the bottom padding ran underneath it.
 */
.hta-pillar-card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	padding: 38px 30px 32px !important;
	background: var(--hta-white);
	border: 1px solid var(--hta-line);
	border-top: 4px solid var(--hta-navy);
	border-radius: var(--hta-radius);
	box-shadow: var(--hta-shadow);
	transition: transform .45s var(--hta-ease),
	            box-shadow .45s var(--hta-ease),
	            background-color .45s ease;
}

.hta-pillar-col:hover .hta-pillar-card {
	transform: translateY(-6px);
	box-shadow: var(--hta-shadow-hi);
}

/* Badge holding the pillar icon */
.hta-pillar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--hta-tint-navy);
	color: var(--hta-navy);
	font-size: 26px;
	transition: transform .45s var(--hta-ease);
}

.hta-pillar-col:hover .hta-pillar__badge { transform: scale(1.08) rotate(-4deg); }

.hta-pillar__num {
	position: absolute;
	top: 30px;
	right: 30px;
	font-family: var(--hta-head);
	font-size: 40px;
	font-weight: 600;
	line-height: 1;
	color: var(--hta-navy);
	opacity: .13;
}

.hta-pillar__kicker {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hta-navy);
	margin-bottom: 8px;
}

.hta-pillar__title { margin: 0 0 10px !important; color: var(--hta-text) !important; }
.hta-pillar__text  { margin: 0 0 22px !important; font-size: 15.5px !important; }

/* Sits in normal flow, pushed to the foot of the card. */
.hta-pillar__link {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--hta-navy);
	text-decoration: none;
}

.hta-pillar__link .hta-arrow { display: inline-block; transition: transform .35s var(--hta-ease); }
.hta-pillar-col:hover .hta-pillar__link .hta-arrow { transform: translateX(7px); }

/* Per-pillar colour overrides */
.hta-pillar--communication .hta-pillar-card { border-top-color: var(--hta-navy); }
.hta-pillar--communication:hover .hta-pillar-card { background: var(--hta-tint-navy); }
.hta-pillar--communication .hta-pillar__badge { background: var(--hta-tint-navy); color: var(--hta-navy); }
.hta-pillar--communication .hta-pillar__kicker,
.hta-pillar--communication .hta-pillar__num,
.hta-pillar--communication .hta-pillar__link { color: var(--hta-navy); }

.hta-pillar--networking .hta-pillar-card { border-top-color: var(--hta-green); }
.hta-pillar--networking:hover .hta-pillar-card { background: var(--hta-tint-green); }
.hta-pillar--networking .hta-pillar__badge { background: var(--hta-tint-green); color: var(--hta-green-dk); }
.hta-pillar--networking .hta-pillar__kicker,
.hta-pillar--networking .hta-pillar__num,
.hta-pillar--networking .hta-pillar__link { color: var(--hta-green-dk); }

.hta-pillar--advocacy .hta-pillar-card { border-top-color: var(--hta-gold); }
.hta-pillar--advocacy:hover .hta-pillar-card { background: var(--hta-tint-gold); }
.hta-pillar--advocacy .hta-pillar__badge { background: var(--hta-tint-gold); color: var(--hta-yellow-ink, #B58900); }
.hta-pillar--advocacy .hta-pillar__kicker,
.hta-pillar--advocacy .hta-pillar__link { color: var(--hta-yellow-ink, #B58900); }
.hta-pillar--advocacy .hta-pillar__num { color: var(--hta-gold-dk); }

.hta-pillar--capacity .hta-pillar-card { border-top-color: var(--hta-teal); }
.hta-pillar--capacity:hover .hta-pillar-card { background: var(--hta-tint-teal); }
.hta-pillar--capacity .hta-pillar__badge { background: var(--hta-tint-teal); color: var(--hta-teal-dk); }
.hta-pillar--capacity .hta-pillar__kicker,
.hta-pillar--capacity .hta-pillar__num,
.hta-pillar--capacity .hta-pillar__link { color: var(--hta-teal-dk); }

/* ------------------------------------------------------------------ *
 * 8. Button system
 *
 * Primary  green fill, white text
 * Secondary navy fill, white text
 * Outline  transparent, navy border and text
 * Light    for use on photography and dark sections
 * ------------------------------------------------------------------ */

/* Weight is restated in section 13 — Divi's per-button rule outranks this
 * selector and was holding every button at 700. */
body.hta-site .et_pb_button {
	font-family: var(--hta-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: .03em !important;
	padding: 13px 26px !important;
	border-radius: var(--hta-radius-sm) !important;
	border-width: 2px !important;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease,
	            transform .3s var(--hta-ease), box-shadow .3s ease;
}

body.hta-site .et_pb_button:hover {
	transform: translateY(-2px);
	padding: 13px 26px !important;
}

/* Divi appends its own arrow pseudo-element; ours is in the label. */
body.hta-site .et_pb_button:after { display: none !important; }

body.hta-site .et_pb_button:focus-visible {
	outline: 3px solid var(--hta-gold);
	outline-offset: 3px;
}

.hta-btn-primary.et_pb_button,
.hta-btn-primary .et_pb_button {
	background: var(--hta-green-btn) !important;
	border-color: var(--hta-green-btn) !important;
	color: var(--hta-white) !important;
	box-shadow: 0 8px 20px -10px rgba(38, 138, 53, .85);
}

.hta-btn-primary.et_pb_button:hover {
	background: var(--hta-green-dk) !important;
	border-color: var(--hta-green-dk) !important;
	box-shadow: 0 12px 26px -10px rgba(38, 138, 53, .95);
}

.hta-btn-secondary.et_pb_button {
	background: var(--hta-navy) !important;
	border-color: var(--hta-navy) !important;
	color: var(--hta-white) !important;
	box-shadow: 0 8px 20px -10px rgba(7, 59, 117, .8);
}

.hta-btn-secondary.et_pb_button:hover {
	background: var(--hta-navy-dk) !important;
	border-color: var(--hta-navy-dk) !important;
}

.hta-btn-outline.et_pb_button {
	background: transparent !important;
	border-color: var(--hta-navy) !important;
	color: var(--hta-navy) !important;
}

.hta-btn-outline.et_pb_button:hover {
	background: var(--hta-navy) !important;
	color: var(--hta-white) !important;
}

.hta-btn-light.et_pb_button {
	background: rgba(255, 255, 255, .1) !important;
	border-color: rgba(255, 255, 255, .7) !important;
	color: var(--hta-white) !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.hta-btn-light.et_pb_button:hover {
	background: var(--hta-white) !important;
	border-color: var(--hta-white) !important;
	color: var(--hta-navy) !important;
}

/* Gold is only ever used with dark text — white on gold is 1.6:1. */
.hta-btn-gold.et_pb_button {
	background: var(--hta-gold) !important;
	border-color: var(--hta-gold) !important;
	color: var(--hta-text) !important;
}

.hta-btn-gold.et_pb_button:hover {
	background: var(--hta-gold-dk) !important;
	border-color: var(--hta-gold-dk) !important;
	color: var(--hta-text) !important;
}

/* ------------------------------------------------------------------ *
 * 9. Cards & content
 * ------------------------------------------------------------------ */

body.hta-site .et_pb_row { max-width: var(--hta-max); }

/* Opportunities board on the navy section */
.hta-onpdark .hta-oppboard { border-top-color: rgba(255, 255, 255, .18); }
.hta-onpdark .hta-opp { border-bottom-color: rgba(255, 255, 255, .18); }
.hta-onpdark .hta-opp:hover { background: rgba(255, 255, 255, .06); }
.hta-onpdark .hta-opp__title,
.hta-onpdark .hta-opp__title a { color: var(--hta-white); }
.hta-onpdark .hta-opp__title a:hover { color: var(--hta-gold); }
.hta-onpdark .hta-opp__excerpt,
.hta-onpdark .hta-opp__meta { color: rgba(255, 255, 255, .72); }
.hta-onpdark .hta-card__eyebrow { color: var(--hta-gold); }
.hta-onpdark .hta-link { color: var(--hta-white); }
.hta-onpdark .hta-link:hover { color: var(--hta-gold); }
.hta-onpdark .hta-opp__icon { background: rgba(255, 255, 255, .12); color: var(--hta-white); }

.hta-onpdark .hta-empty {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .22);
	color: rgba(255, 255, 255, .76);
}

/* Single post / archive readability */
body.hta-site.single #main-content .container,
body.hta-site.hta-archive #main-content .container,
body.hta-site.archive #main-content .container,
body.hta-site.search #main-content .container { padding-top: 150px; }

body.hta-site.single .entry-content { font-size: 17px; line-height: 1.8; }

/* Contact form */
body.hta-site .hta-form .et_pb_contact_field .input,
body.hta-site .hta-form .et_pb_contact_field textarea {
	border: 1px solid var(--hta-line);
	border-radius: var(--hta-radius-sm);
	padding: 14px 16px;
	font-family: var(--hta-body);
	font-size: 15px;
	background: var(--hta-off-white);
}

body.hta-site .hta-form .et_pb_contact_field .input:focus {
	outline: 3px solid rgba(7, 59, 117, .35);
	outline-offset: 1px;
	border-color: var(--hta-navy);
}

body.hta-site .hta-form h1,
body.hta-site .hta-form .et_pb_contact_main_title {
	font-family: var(--hta-head);
	font-size: 28px;
	color: var(--hta-navy);
	margin-bottom: 22px;
}

/* ------------------------------------------------------------------ *
 * 10. Footer
 * ------------------------------------------------------------------ */

body.hta-site #main-footer { background: var(--hta-navy-dk); }

body.hta-site #footer-widgets { padding: 84px 0 56px; }
body.hta-site #footer-widgets .footer-widget { margin-bottom: 34px; }

body.hta-site .hta-foot__title,
body.hta-site #footer-widgets h4.widgettitle {
	font-family: var(--hta-head);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hta-gold);
	margin-bottom: 20px;
	padding-bottom: 0;
}

body.hta-site #footer-widgets .footer-widget li,
body.hta-site #footer-widgets .footer-widget p {
	color: rgba(255, 255, 255, .78);
	font-size: 15px;
	line-height: 1.75;
}

body.hta-site #footer-widgets .footer-widget li {
	padding: 0 0 10px;
	border: 0;
	list-style: none;
}

body.hta-site #footer-widgets .footer-widget li::before { display: none; }

body.hta-site #footer-widgets .footer-widget a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	transition: color .3s ease, padding-left .3s var(--hta-ease);
}

body.hta-site #footer-widgets .footer-widget a:hover {
	color: var(--hta-gold);
	padding-left: 6px;
}

/* Footer logo sits on a light plate so the navy mark stays readable. */
.hta-foot__logo {
	display: inline-block;
	margin-bottom: 22px;
	padding: 12px 18px;
	background: var(--hta-white);
	border-radius: var(--hta-radius);
	box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6);
}

.hta-foot__logo img {
	display: block;
	max-width: 168px;
	height: auto;
}

body.hta-site #footer-bottom {
	background: rgba(0, 0, 0, .26);
	padding: 22px 0;
}

body.hta-site #footer-info,
body.hta-site .hta-foot__credit,
body.hta-site .hta-foot__legal {
	font-size: 13px;
	color: rgba(255, 255, 255, .62);
}

body.hta-site .hta-foot__legal { margin-left: 18px; }

body.hta-site .hta-foot__legal a,
body.hta-site #footer-info a { color: rgba(255, 255, 255, .82); text-decoration: none; }
body.hta-site .hta-foot__legal a:hover { color: var(--hta-gold); }

body.hta-site #footer-bottom .et-social-icon a {
	color: rgba(255, 255, 255, .74);
	font-size: 18px;
	display: inline-block;
	transition: color .3s ease, transform .3s var(--hta-ease);
}

body.hta-site #footer-bottom .et-social-icon a:hover {
	color: var(--hta-gold);
	transform: translateY(-3px);
}

/* ------------------------------------------------------------------ *
 * 11. Responsive passes — 1920 / 1366 / 1024 / 768 / 480 / 320
 * ------------------------------------------------------------------ */

@media (min-width: 1600px) {
	:root { --hta-max: 1420px; }
	.hta-pillar-card { padding: 48px 36px 38px !important; }
}

@media (max-width: 1440px) {
	.hta-pillar-card { padding: 34px 24px 30px !important; }
	.hta-pillar__num { top: 24px; right: 24px; font-size: 34px; }
}

@media (max-width: 1180px) {
	body.hta-site #top-menu li a { font-size: 13px; }
	body.hta-site #top-menu li.hta-nav-cta > a { padding: 10px 18px !important; }
	.hta-pillar-row .hta-pillar-col { flex: 1 1 calc(50% - 12px); }
	.hta-col-endalign { padding-bottom: 44px; }
}

@media (max-width: 980px) {
	.hta-hero { min-height: 76vh !important; }
	.hta-hero .et_pb_row,
	body.hta-site .et_pb_row { width: 90%; }

	.hta-col-endalign { justify-content: flex-start; padding-bottom: 34px; }
	.hta-about__media { margin-bottom: 34px !important; }

	body.hta-site.single #main-content .container,
	body.hta-site.hta-archive #main-content .container,
	body.hta-site.archive #main-content .container { padding-top: 115px; }
}

@media (max-width: 767px) {
	body.hta-site,
	body.hta-site p,
	body.hta-site li { font-size: 16px; }

	.hta-lede { font-size: 16.5px; }

	.hta-hero { min-height: 0 !important; align-items: center; }
	.hta-hero::after { display: none; }

	.hta-hero__kicker { padding-left: 0; font-size: 11px !important; }
	.hta-hero__kicker::before { display: none; }

	/* Full-width stacked buttons are far easier to tap. */
	.hta-hero__col .et_pb_button_module_wrapper,
	.hta-cta__col .et_pb_button_module_wrapper {
		display: block;
		margin: 0 0 10px 0 !important;
	}

	.hta-hero__col .et_pb_button,
	.hta-cta__col .et_pb_button {
		display: block;
		width: 100%;
		text-align: center;
		padding: 15px 20px !important;
	}

	.hta-pillar-row { gap: 18px; }
	.hta-pillar-row .hta-pillar-col { flex: 1 1 100%; }
	.hta-pillar-card { padding: 30px 24px 28px !important; }

	body.hta-site #footer-widgets { padding: 60px 0 20px; }
	body.hta-site .hta-foot__legal { display: block; margin: 8px 0 0; }

	body.hta-site.single #main-content .container,
	body.hta-site.hta-archive #main-content .container,
	body.hta-site.archive #main-content .container { padding-top: 100px; }
}

@media (max-width: 380px) {
	body.hta-site .et_pb_row,
	.hta-hero .et_pb_row { width: 88%; }

	body.hta-site .et_pb_button { font-size: 13px !important; padding: 14px 18px !important; }

	.hta-pillar-card { padding: 26px 20px 26px !important; }
	.hta-pillar__num { font-size: 30px; }

	body.hta-site #logo { max-height: 54%; }
}

/* ------------------------------------------------------------------ *
 * 12. Motion & accessibility
 * ------------------------------------------------------------------ */

html { scroll-behavior: smooth; }

body.hta-site a:focus-visible,
body.hta-site button:focus-visible,
body.hta-site #top-menu li a:focus-visible {
	outline: 3px solid var(--hta-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

.hta-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 14px 22px;
	background: var(--hta-navy);
	color: var(--hta-white);
	border-radius: 0 0 var(--hta-radius-sm) 0;
	font-family: var(--hta-body);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.hta-skip:focus { left: 0; top: 0; }

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

	body.hta-site *,
	body.hta-site *::before,
	body.hta-site *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.hta-hero::after { animation: none; }
}

@media print {
	#main-header,
	#main-footer,
	.hta-hero::after { display: none !important; }
}

/* ------------------------------------------------------------------ *
 * 13. Typography lock
 *
 * Section 2 sets the type defaults inside :where(), which contributes
 * zero specificity so the Visual Builder stays in charge of size, weight
 * and colour. Family and letter case are not negotiable, though, and
 * :where() is far too weak to hold them — Divi bakes a font-family into
 * every module it renders, straight out of the shortcode attributes
 * stored in the page:
 *
 *     .et_pb_text_2 h2                    { font-family:'Oswald',… }        0-1-1
 *     .et_pb_text_1                       { font-family:'Poppins',… }       0-1-0
 *     body #page-container .et_pb_section
 *       .et_pb_button_0                   { font-family:'Montserrat',…
 *                                           !important }                    1-2-1
 *
 * Those rules live in the page content, so they outlive any theme change
 * and cannot be reached from CSS at normal weight. The doubled
 * .hta-site plus #page-container below scores 1-3-1, which clears the
 * highest of them, and font-family carries !important to settle the
 * button rule on its own terms.
 *
 * This layer deliberately restates ONLY font-family and text-transform.
 * Size, weight, colour, margin and layout are left to sections 2–12 and
 * to the builder, so switching the faces moves nothing else on the page.
 * ------------------------------------------------------------------ */

/* --- Headings: Poppins, uppercase --------------------------------- *
 *
 * Every h1–h6 on the front end, wherever it renders: Divi modules, the
 * post and CPT titles, the HTA Core card / event / news / opportunity /
 * timeline titles (all real <h3>s), comment and reply titles, sidebar
 * and footer widget titles. .hta-pillar__title is the one heading in the
 * system that is a <span> rather than an h-tag, so it is named.
 *
 * text-transform is used on purpose: the stored post_title, menu labels
 * and card titles keep their original sentence case in the database and
 * in search results, feeds and schema — only the rendering is capitalised.
 */
body.hta-site.hta-site :is(h1, h2, h3, h4, h5, h6),
body.hta-site.hta-site #page-container :is(h1, h2, h3, h4, h5, h6),
body.hta-site.hta-site .hta-pillar__title {
	font-family: var(--hta-head) !important;
	text-transform: uppercase;
}

/* The <span> title needs the tracking its h-tag siblings inherit from
 * section 2; it sits at h3/h4 size. */
body.hta-site.hta-site .hta-pillar__title { letter-spacing: .024em; }

/* --- Supporting text: Poppins ------------------------------------- *
 *
 * Body copy, lists, tables, quotes, captions, form fields and labels,
 * and the Divi modules that carry text. Case is untouched here — running
 * text, form entries and email addresses stay exactly as typed.
 */
body.hta-site.hta-site,
body.hta-site.hta-site :is(p, li, dd, dt, td, th, blockquote, figcaption,
	address, label, legend, input, textarea, select, button, .hta-crumbs),
body.hta-site.hta-site :is(.et_pb_text, .et_pb_text_inner, .et_pb_code,
	.et_pb_code_inner, .et_pb_widget, .et_pb_post, .et_pb_contact_field,
	.et_pb_contact_form_label, .et_pb_contact_field_options_title),
body.hta-site.hta-site #page-container :is(p, li, label, input, textarea,
	select, button, .et_pb_text, .et_pb_widget) {
	font-family: var(--hta-body) !important;
}

/* The decorative cursive accent is the one exception, and it is opt-in
 * per element — the rule above would otherwise swallow it. */
body.hta-site.hta-site .hta-script { font-family: var(--hta-script) !important; }

/* --- Navigation: Poppins medium ----------------------------------- */
body.hta-site.hta-site :is(#top-menu, .et_mobile_menu, #et-secondary-menu,
	.hta-crumbs) :is(li, a) {
	font-family: var(--hta-body) !important;
}

body.hta-site.hta-site .et_mobile_menu li a { font-weight: 500; }

/* --- Buttons: Poppins semibold ------------------------------------ *
 *
 * The long selector is the one that beats Divi's own 1-2-1 !important
 * button rule; the short one catches buttons rendered outside a section
 * (the search form, comment submit, the members-area forms).
 *
 * Weight has to be restated here for the same reason the family does.
 * Divi writes "font-weight:700!important" into that same 1-2-1 rule, so
 * section 8's 0-2-1 never reached it — every button on the site was
 * rendering at 700 regardless of what the theme asked for. 600 is the
 * semibold the type system calls for, and it is applied uniformly:
 * .hta-hero__panel's 500 scores 0-2-0 and was already being outranked
 * before this change, so nothing that was visibly 500 becomes 600.
 */
body.hta-site.hta-site #page-container .et_pb_section .et_pb_button,
body.hta-site.hta-site :is(.et_pb_button, .hta-btn, button,
	input[type="submit"], input[type="button"]) {
	font-family: var(--hta-body) !important;
	font-weight: 600 !important;
}

/* --- Long headings must not overflow ------------------------------ *
 *
 * Uppercase words cannot hyphenate at a lowercase break and they are
 * wider than the sentence-case originals, so a title that just fitted
 * before can now push past its card. These are the guards: normal
 * wrapping between words, and a last-resort break inside a word that is
 * on its own wider than the box (a long place name, a hashtag, a URL
 * pasted into a title). balance keeps two-line headings from leaving a
 * single orphan word, which is where clipping usually starts.
 */
body.hta-site.hta-site :is(h1, h2, h3, h4, h5, h6),
body.hta-site.hta-site .hta-pillar__title {
	overflow-wrap: break-word;
	word-break: normal;
	text-wrap: balance;
	hyphens: manual;
}

/* Cards and listing rows are the tightest boxes on the site: their
 * titles get the harder guard, because there is no room to spare. */
body.hta-site.hta-site :is(.hta-card__title, .hta-news__title,
	.hta-opp__title, .hta-timeline__title, .hta-pillar__title,
	.hta-foot__title) {
	overflow-wrap: anywhere;
	min-width: 0;
}

/* --- Small-screen tracking ---------------------------------------- *
 *
 * Below the tablet breakpoint the headings scale down to the bottom of
 * their clamp(), where the caps set noticeably tighter. A little extra
 * tracking there keeps them as readable as they are on desktop, and the
 * h1 gives some back because it is the only one still set large.
 */
@media (max-width: 767px) {
	:where(body.hta-site) :is(h1, h2) { letter-spacing: .022em; }
	:where(body.hta-site) :is(h3, h4) { letter-spacing: .028em; }
	:where(body.hta-site) :is(h5, h6) { letter-spacing: .036em; }

	.hta-hero__panel h1     { letter-spacing: .02em; }
	.hta-pagehero__slab h1  { letter-spacing: .04em; }
	.hta-pagehero h1        { letter-spacing: .025em; }
}

/* ------------------------------------------------------------------ *
 * 14. List components — undoing Divi's content-list defaults
 *
 * Divi styles every list inside page content:
 *
 *   #left-area ol, .entry-content ol, .et-l--body ol, …
 *     { list-style-type: decimal; list-style-position: inside;
 *       padding: 0 0 23px 0 }
 *   …the same for ul, with disc and padding: 0 0 23px 1em
 *
 * At 0-1-1 that outranks the plain ".hta-timeline" / ".hta-ticks"
 * (0-1-0) rules the components ship with, so four structural lists were
 * being re-decorated as prose lists. It was doing real damage:
 *
 *   .hta-ticks          a disc appeared beside every green tick, and the
 *                       1em padding pushed the row off the copy's margin
 *   .hta-timeline       a decimal "1." rendered above each entry, and
 *                       losing the 30px indent dragged the whole item
 *                       left — the dot no longer sat on the rule, and the
 *                       date ran straight across it
 *   .hta-card__contact  a disc beside each phone and email line
 *   .hta-crumbs__list   flex saves the markers, but not the 23px bottom
 *
 * These lists are markup semantics, not prose. Restated at 0-2-1 so the
 * components' own intent wins, with the values they each asked for.
 * ------------------------------------------------------------------ */

body.hta-site :is(.hta-ticks, .hta-timeline, .hta-crumbs__list, .hta-card__contact),
body.hta-site :is(.hta-ticks, .hta-timeline, .hta-crumbs__list, .hta-card__contact) > li {
	list-style: none;
}

body.hta-site :is(.hta-ticks, .hta-crumbs__list, .hta-card__contact) {
	padding: 0;
}

/* The timeline keeps its indent: the rule is drawn by .hta-timeline::before
 * at left:6px and the dots hang at left:-30px, so both depend on this
 * padding to line up with each other and to clear the text. */
body.hta-site .hta-timeline {
	padding: 0 0 0 30px;
}

/* ------------------------------------------------------------------ *
 * 15. Footer credit line
 *
 * et_get_footer_credits() is overridden in functions.php and emits three
 * spans inside #footer-info: the copyright, the legal links, and the
 * build credit. Divi styles #footer-info as a single centred paragraph,
 * so they are laid out here instead.
 * ------------------------------------------------------------------ */

body.hta-site #footer-info.hta-foot__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 20px;
	float: none;
	width: 100%;
	padding: 0;
	font-family: var(--hta-body);
	font-size: 13px;
	line-height: 1.6;
	color: var(--hta-muted);
}

body.hta-site .hta-foot__build {
	font-size: 12px;
	letter-spacing: .04em;
	opacity: .75;
}

body.hta-site .hta-foot__info a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease, color .3s ease;
}

body.hta-site .hta-foot__info a:hover {
	color: var(--hta-white);
	border-bottom-color: currentColor;
}

@media (max-width: 767px) {
	body.hta-site #footer-info.hta-foot__info {
		flex-direction: column;
		gap: 8px;
		text-align: center;
	}
}

/* =========================================================================
 * Membership CTA — v2 composition
 *
 * Matches the approved artwork: serif headline, ruled strapline, a three-up
 * feature row, a bordered panel holding the two action cards, and a trust
 * line beneath.
 *
 * Scoped to .hta-cta--v2 on purpose. Layouts live in the database as Divi
 * shortcodes, so a page generated before this change keeps the old markup
 * until it is regenerated — an unscoped rule would leave it half-styled.
 *
 * Every icon is a data-URI SVG set here, never in post content, so nothing
 * in the layout depends on unfiltered_html and KSES cannot strip it.
 * ====================================================================== */

:root {
	--hta-cta-cyan:  #3FC8E4;   /* feature headings, hashtag            */
	--hta-cta-blue:  #A8C9DF;   /* strapline                            */
	--hta-cta-body:  #D7E5F0;   /* feature copy, card subtitles         */
	--hta-cta-rule:  rgba(255, 255, 255, .16);
}

/* ---- Headline & strapline ---------------------------------------------- */

.hta-cta--v2 .hta-cta__title,
.hta-cta--v2 .hta-cta__title .et_pb_text_inner {
	text-align: center;
}

.hta-cta--v2 .hta-cta__title h2 {
	/* Divi's header_2_text_align is outranked by the child theme's heading
	   defaults, so the centring is asserted here. */
	text-align: center !important;
	max-width: 18ch;
	margin-inline: auto;
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 600;
	font-size: clamp(34px, 5.1vw, 74px);
	line-height: 1.04;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: #fff;
	text-wrap: balance;
}

.hta-cta--v2 .hta-cta__sub .et_pb_text_inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 3vw, 30px);
}

.hta-cta--v2 .hta-cta__sub .et_pb_text_inner::before,
.hta-cta--v2 .hta-cta__sub .et_pb_text_inner::after {
	content: "";
	flex: 0 1 auto;
	height: 1px;
	width: min(190px, 16vw);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5));
}

.hta-cta--v2 .hta-cta__sub .et_pb_text_inner::after {
	background: linear-gradient(90deg, rgba(255, 255, 255, .5), transparent);
}

.hta-cta--v2 .hta-cta__sub p {
	margin: 0;
	white-space: nowrap;
	font-size: clamp(18px, 2.1vw, 27px);
	font-weight: 500;
	line-height: 1.2;
	color: var(--hta-cta-blue);
}

/* ---- Feature row -------------------------------------------------------- */

.hta-cta--v2 .hta-cta2__features {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 0;
	margin: 0 auto 44px;
	max-width: 1000px;
}

.hta-cta--v2 .hta-cta2__feature {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex: 1 1 260px;
	max-width: 340px;
	padding: 4px 26px;
	text-align: left;
}

.hta-cta--v2 .hta-cta2__feature + .hta-cta2__feature {
	border-left: 1px solid var(--hta-cta-rule);
}

.hta-cta--v2 .hta-cta2__ficon {
	flex: 0 0 auto;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .28);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 28px 28px;
}

.hta-cta--v2 .hta-cta2__feature--connect .hta-cta2__ficon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.1'/><path d='M3.4 19a5.6 5.6 0 0 1 11.2 0'/><circle cx='17.2' cy='10.2' r='2.2'/><path d='M16.1 14.8a4.6 4.6 0 0 1 4.5 3.9'/></svg>");
}

.hta-cta--v2 .hta-cta2__feature--collaborate .hta-cta2__ficon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 7.8 9.9 5.9a1.9 1.9 0 0 0-2.5 0L3.3 9.4v4.8L5.2 16'/><path d='m12 7.8 2.1-1.9a1.9 1.9 0 0 1 2.5 0l4.1 3.5v4.8L18.8 16'/><path d='m8.2 13.2 2.1 2.1M10.5 11.5l2.3 2.3M12.8 10.3l2.1 2.1'/></svg>");
}

.hta-cta--v2 .hta-cta2__feature--grow .hta-cta2__ficon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4v16h16'/><path d='M7.6 17v-2.6M11.1 17v-4.6M14.6 17v-3.2M18.1 17V9.4'/><path d='m7 11.4 4-3.4 3.2 2.2L19 5.6'/><path d='M15.6 5.4H19v3.4'/></svg>");
}

.hta-cta--v2 .hta-cta2__ftext {
	display: block;
	padding-top: 4px;
}

.hta-cta--v2 .hta-cta2__ftitle {
	display: block;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: var(--hta-cta-cyan);
	margin-bottom: 6px;
}

.hta-cta--v2 .hta-cta2__fbody {
	display: block;
	font-size: 16px;
	line-height: 1.45;
	color: var(--hta-cta-body);
}

/* ---- Action panel ------------------------------------------------------- */

.hta-cta--v2 .hta-cta2__actions {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	max-width: 1000px;
	margin: 0 auto;
	padding: 14px;
	border: 1px solid var(--hta-cta-rule);
	border-radius: 14px;
	background: rgba(255, 255, 255, .035);
}

.hta-cta--v2 .hta-cta2__adivider {
	flex: 0 0 1px;
	align-self: stretch;
	margin: 8px 14px;
	background: var(--hta-cta-rule);
}

.hta-cta--v2 .hta-cta2__action {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 1 1 0;
	min-width: 0;
	padding: 22px 26px;
	border-radius: 10px;
	text-decoration: none;
	transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.hta-cta--v2 .hta-cta2__action:hover,
.hta-cta--v2 .hta-cta2__action:focus-visible {
	transform: translateY(-2px);
}

.hta-cta--v2 .hta-cta2__aicon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .55);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}

.hta-cta--v2 .hta-cta2__atitle {
	display: block;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.2;
	color: #fff;
	margin-bottom: 5px;
}

.hta-cta--v2 .hta-cta2__asub {
	display: block;
	font-size: 15px;
	line-height: 1.4;
	color: var(--hta-cta-body);
}

/* Primary — filled, brand green */
.hta-cta--v2 .hta-cta2__action--primary {
	background: linear-gradient(135deg, #2FA84A 0%, var(--hta-green, #268A35) 62%, #1E7A2E 100%);
}

.hta-cta--v2 .hta-cta2__action--primary:hover,
.hta-cta--v2 .hta-cta2__action--primary:focus-visible {
	background: linear-gradient(135deg, #35B953 0%, #2A9A3B 62%, #226F2F 100%);
}

.hta-cta--v2 .hta-cta2__action--primary .hta-cta2__aicon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.6 12h13.2'/><path d='m12.4 6.2 5.8 5.8-5.8 5.8'/></svg>");
}

/* Ghost — outlined */
.hta-cta--v2 .hta-cta2__action--ghost {
	border: 1px solid rgba(255, 255, 255, .38);
	background: rgba(255, 255, 255, .02);
}

.hta-cta--v2 .hta-cta2__action--ghost:hover,
.hta-cta--v2 .hta-cta2__action--ghost:focus-visible {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(255, 255, 255, .6);
}

.hta-cta--v2 .hta-cta2__action--ghost .hta-cta2__aicon {
	border-color: rgba(255, 255, 255, .45);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FC8E4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.2' r='3.4'/><path d='M5.4 19.6a6.6 6.6 0 0 1 13.2 0'/></svg>");
}

/* ---- Trust line --------------------------------------------------------- */

.hta-cta--v2 .hta-cta2__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 30px 0 0;
	font-size: 17px;
	line-height: 1.4;
	color: #fff;
}

.hta-cta--v2 .hta-cta2__shield {
	width: 26px;
	height: 26px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FC8E4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.2 19 6v5.6c0 4.2-2.9 7.6-7 8.5-4.1-.9-7-4.3-7-8.5V6z'/><path d='m8.9 12 2.2 2.2 4-4.4'/></svg>");
}

.hta-cta--v2 .hta-cta2__trustsep {
	width: 1px;
	height: 20px;
	background: rgba(255, 255, 255, .32);
}

.hta-cta--v2 .hta-cta2__tag {
	color: var(--hta-cta-cyan);
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 980px) {

	.hta-cta--v2 .hta-cta2__feature {
		flex: 1 1 100%;
		max-width: 460px;
		padding: 0;
		margin-bottom: 26px;
	}

	.hta-cta--v2 .hta-cta2__feature + .hta-cta2__feature {
		border-left: 0;
	}

	.hta-cta--v2 .hta-cta2__features {
		margin-bottom: 32px;
	}

	.hta-cta--v2 .hta-cta2__actions {
		flex-direction: column;
		padding: 12px;
	}

	.hta-cta--v2 .hta-cta2__adivider {
		flex: 0 0 1px;
		width: auto;
		height: 1px;
		margin: 4px 10px;
	}

	.hta-cta--v2 .hta-cta__sub p {
		white-space: normal;
	}

	.hta-cta--v2 .hta-cta__sub .et_pb_text_inner::before,
	.hta-cta--v2 .hta-cta__sub .et_pb_text_inner::after {
		width: 44px;
	}
}

@media (max-width: 560px) {

	.hta-cta--v2 .hta-cta2__action {
		padding: 18px;
		gap: 14px;
	}

	.hta-cta--v2 .hta-cta2__ficon {
		width: 54px;
		height: 54px;
		background-size: 25px 25px;
	}

	.hta-cta--v2 .hta-cta2__trust {
		font-size: 15px;
		gap: 9px;
	}
}

/* =========================================================================
 * Footer — v2 split composition
 *
 * Client artwork: a white contact rail bleeding off the left edge, against a
 * dark photographic panel carrying the link columns, the logo, the newsletter
 * signup and the copyright line.
 *
 * Divi renders Footer Areas #1-#4 as .footer-widget inside #footer-widgets,
 * so the columns here are those four widgets re-laid-out with grid. Divi's
 * own float/width rules are overridden rather than removed, which keeps the
 * markup untouched and the widgets editable in Appearance > Widgets.
 *
 * Scoped under .hta-site (the body class) so nothing here escapes into the
 * Divi Builder's own preview chrome.
 * ====================================================================== */

.hta-site #main-footer {
	position: relative;
	isolation: isolate;
	background-color: #0B1B33;
	background-image: url("/HTA/wp-content/uploads/hta/venue-lakeside.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 0;
}

.hta-site #main-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(6, 27, 61, .86) 0%, rgba(9, 38, 78, .78) 55%, rgba(4, 20, 48, .90) 100%);
}

/* Divi's container is narrow and padded; the split needs the full width. */
.hta-site #main-footer .container {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

.hta-site #main-footer .container::before {
	display: none;   /* Divi's decorative divider line */
}

.hta-site #footer-widgets {
	display: grid;
	grid-template-columns: minmax(260px, 26%) minmax(200px, 27%) 1fr;
	align-items: stretch;
	gap: 0;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0;
}

/* Reset Divi's float layout without touching the markup. */
.hta-site #footer-widgets .footer-widget {
	position: relative;
	z-index: 1;
	float: none;
	width: auto;
	margin: 0;
	padding: 74px 34px;
}

.hta-site #footer-widgets .footer-widget:last-child {
	padding-right: 40px;
}

/* ---- The white contact rail -------------------------------------------- */

.hta-site #footer-widgets .footer-widget:first-child {
	padding-left: 46px;
}

.hta-site #footer-widgets .footer-widget:first-child::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: -100vw;          /* bleeds off the left edge of the screen */
	background: #FFFFFF;
	z-index: -1;
}

.hta-site .hta-foot2__contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hta-site .hta-foot2__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 0 0 30px;
}

.hta-site .hta-foot2__item:last-child {
	padding-bottom: 0;
}

.hta-site .hta-foot2__icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin-top: 2px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.hta-site .hta-foot2__item--phone .hta-foot2__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23268A35'><path d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1z'/></svg>");
}

.hta-site .hta-foot2__item--email .hta-foot2__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23268A35'><path d='M3 5h18a1 1 0 0 1 1 1v.35l-10 5.6-10-5.6V6a1 1 0 0 1 1-1z'/><path d='M2 8.6V18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V8.6l-9.5 5.32a1 1 0 0 1-1 0z'/></svg>");
}

.hta-site .hta-foot2__item--visit .hta-foot2__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23268A35'><path d='M12 2a7 7 0 0 0-7 7c0 5.1 6.2 12.4 6.5 12.7a.7.7 0 0 0 1 0C12.8 21.4 19 14.1 19 9a7 7 0 0 0-7-7zm0 9.6A2.6 2.6 0 1 1 14.6 9 2.6 2.6 0 0 1 12 11.6z'/></svg>");
}

.hta-site .hta-foot2__label {
	display: block;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	color: var(--hta-navy, #073B75);
	margin-bottom: 5px;
}

.hta-site .hta-foot2__value,
.hta-site .hta-foot2__value a {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: #4B5563;
	text-decoration: none;
}

.hta-site .hta-foot2__value a:hover {
	color: var(--hta-green, #268A35);
}

/* ---- Link columns ------------------------------------------------------- */

.hta-site #footer-widgets .footer-widget:nth-child(2) .widgettitle,
.hta-site #footer-widgets .footer-widget:nth-child(3) .widgettitle,
.hta-site #footer-widgets .footer-widget .hta-foot__title {
	color: #FFFFFF;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	padding-bottom: 22px;
}

.hta-site #footer-widgets .footer-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hta-site #footer-widgets .footer-widget li {
	padding: 0 0 13px;
	border: 0;
	background: none;
}

.hta-site #footer-widgets .footer-widget li a {
	color: #D7E5F0;
	font-size: 16px;
	line-height: 1.45;
	text-decoration: none;
	transition: color .16s ease;
}

.hta-site #footer-widgets .footer-widget li a:hover {
	color: var(--hta-gold, #FEEC59);
}

/* ---- Brand / subscribe column ------------------------------------------ */

.hta-site .hta-foot2__brand .hta-foot__logo img {
	display: block;
	width: 168px;
	height: auto;
	margin-bottom: 26px;
	background: #FFFFFF;
	border-radius: 8px;
	padding: 10px 14px;
}

.hta-site .hta-foot2__subtitle {
	color: #FFFFFF;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 20px;
	padding: 0;
}

.hta-site .hta-sub {
	margin: 0;
}

.hta-site .hta-sub__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hta-site .hta-sub__input {
	display: block;
	width: 100%;
	padding: 17px 20px;
	margin-bottom: 14px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 3px;
	background: transparent;
	color: #FFFFFF;
	font-size: 16px;
	line-height: 1.3;
}

.hta-site .hta-sub__input::placeholder {
	color: rgba(255, 255, 255, .72);
}

.hta-site .hta-sub__input:focus {
	outline: 2px solid var(--hta-gold, #FEEC59);
	outline-offset: 2px;
	border-color: rgba(255, 255, 255, .85);
}

.hta-site .hta-sub__btn {
	display: block;
	width: 100%;
	padding: 16px 20px;
	border: 0;
	border-radius: 3px;
	background: #FFFFFF;
	color: var(--hta-navy, #073B75);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}

.hta-site .hta-sub__btn:hover,
.hta-site .hta-sub__btn:focus-visible {
	background: var(--hta-gold, #FEEC59);
	color: var(--hta-navy, #073B75);
}

.hta-site .hta-sub__msg {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: #FFFFFF;
}

.hta-site .hta-sub__msg--err {
	color: #FFD9D9;
}

.hta-site .hta-foot2__copy {
	margin: 28px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .72);
}

/* Divi's own footer-bottom bar is replaced by the copyright line above. */
.hta-site #main-footer #footer-bottom {
	display: none;
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {

	.hta-site #footer-widgets {
		grid-template-columns: minmax(240px, 34%) 1fr;
	}

	.hta-site #footer-widgets .footer-widget:last-child {
		grid-column: 1 / -1;
		padding-top: 0;
	}

	/* The rail no longer spans the full height once the brand column wraps,
	   so it is squared off against the first row only. */
	.hta-site #footer-widgets .footer-widget:first-child::before {
		bottom: 0;
	}
}

@media (max-width: 800px) {

	.hta-site #footer-widgets {
		grid-template-columns: 1fr;
	}

	.hta-site #footer-widgets .footer-widget {
		padding: 34px 28px;
	}

	.hta-site #footer-widgets .footer-widget:first-child {
		padding: 44px 28px;
	}

	.hta-site #footer-widgets .footer-widget:first-child::before {
		right: -100vw;   /* full-width white band once stacked */
	}

	.hta-site #footer-widgets .footer-widget:last-child {
		padding-bottom: 48px;
	}
}

/* ---- Footer v2 corrections --------------------------------------------- */

/* Divi's own footer nav bar and bottom bar are replaced by this composition. */
.hta-site #et-footer-nav,
.hta-site #footer-bottom {
	display: none;
}

/* Column headings follow the body face; both tokens are Poppins now. */
.hta-site #footer-widgets .footer-widget .widgettitle,
.hta-site #footer-widgets .footer-widget .hta-foot__title,
.hta-site .hta-foot2__subtitle {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	text-transform: none;
	letter-spacing: 0;
}

/* Divi colours every footer link; the contact rail sits on white. */
.hta-site #footer-widgets .footer-widget:first-child .hta-foot2__label {
	color: var(--hta-navy, #073B75);
}

.hta-site #footer-widgets .footer-widget:first-child .hta-foot2__value,
.hta-site #footer-widgets .footer-widget:first-child .hta-foot2__value a {
	color: #4B5563;
}

.hta-site #footer-widgets .footer-widget:first-child .hta-foot2__value a:hover {
	color: var(--hta-green, #268A35);
}

/* The logo is a raster mark with a white ground, so it keeps a plate - just
   a tighter one than the default widget image styling gives it. */
.hta-site .hta-foot2__brand .hta-foot__logo img {
	width: 146px;
	padding: 8px 10px;
	margin-bottom: 22px;
}

/* ---- Footer v2: beating Divi's inline customizer CSS -------------------- */

/* Divi prints its footer styling inline in <head>, after this stylesheet, so
   equal-specificity rules lose on source order. These four properties are the
   ones it sets; everything else above wins on its own. */

.hta-site #main-footer {
	background-image: url("/HTA/wp-content/uploads/hta/venue-lakeside.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.hta-site #main-footer #footer-widgets {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* The global heading rule is body.hta-site.hta-site #page-container :is(h1..h6)
   with !important, so the footer headings need to out-specify that, not just
   repeat !important. */
body.hta-site.hta-site #page-container #main-footer .widgettitle,
body.hta-site.hta-site #page-container #main-footer .hta-foot__title,
body.hta-site.hta-site #page-container #main-footer .hta-foot2__subtitle {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* ---- Footer v2: the reference's three-column split ---------------------- */

/* Contact sits vertically centred in the white rail, as in the artwork,
   rather than hanging from the top of a full-height column. */
.hta-site #footer-widgets .footer-widget:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hta-site #footer-widgets .footer-widget:first-child > * {
	width: 100%;
}

/* The links column carries the same top offset as the brand column so the
   heading and the logo start on the same line. */
.hta-site #footer-widgets .footer-widget:nth-child(2) {
	padding-left: 56px;
}

.hta-site #footer-widgets .footer-widget:nth-child(3) {
	padding-left: 56px;
}

@media (max-width: 900px) {

	.hta-site #footer-widgets .footer-widget:nth-child(2),
	.hta-site #footer-widgets .footer-widget:nth-child(3) {
		padding-left: 34px;
	}

	/* Brand block drops beneath the rail and links. */
	.hta-site #footer-widgets .footer-widget:nth-child(3) {
		grid-column: 1 / -1;
		padding-top: 0;
	}
}

@media (max-width: 800px) {

	.hta-site #footer-widgets .footer-widget:nth-child(2),
	.hta-site #footer-widgets .footer-widget:nth-child(3) {
		padding-left: 28px;
	}
}

/* Once the brand block spans the full width it should not stretch the form
   across the whole footer, and the logo plate needs reining in. */
@media (max-width: 900px) {

	.hta-site #footer-widgets .footer-widget:nth-child(3) .hta-sub,
	.hta-site #footer-widgets .footer-widget:nth-child(3) .hta-foot2__copy,
	.hta-site #footer-widgets .footer-widget:nth-child(3) .hta-foot2__subtitle {
		max-width: 520px;
	}

	.hta-site .hta-foot2__brand .hta-foot__logo img {
		width: 128px;
	}
}

/* =========================================================================
 * Member dashboard
 *
 * The landing page after a member logs in. Rendered by
 * [hta_member_dashboard] on the members-area page.
 * ====================================================================== */

.hta-dash {
	max-width: 1140px;
	margin: 0 auto;
}

/* ---- Header ------------------------------------------------------------- */

.hta-dash__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding: 0 0 26px;
	margin: 0 0 34px;
	border-bottom: 1px solid var(--hta-line, #E3E7EA);
}

.hta-dash__eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hta-teal, #078A96);
}

.hta-dash .hta-dash__title {
	margin: 0 0 10px;
	padding: 0;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.15;
	color: var(--hta-navy, #073B75);
}

.hta-dash__meta {
	margin: 0;
	font-size: 15px;
	color: var(--hta-muted, #667085);
}

.hta-dash__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hta-dash__btn {
	display: inline-block;
	padding: 11px 20px;
	border-radius: var(--hta-radius-sm, 6px);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.hta-dash__btn--ghost {
	border: 1px solid var(--hta-line, #E3E7EA);
	color: var(--hta-navy, #073B75);
	background: #fff;
}

.hta-dash__btn--ghost:hover,
.hta-dash__btn--ghost:focus-visible {
	border-color: var(--hta-navy, #073B75);
	background: var(--hta-tint-navy, #F2F6FF);
}

/* ---- Quick-link tiles --------------------------------------------------- */

.hta-dash__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin: 0 0 44px;
}

.hta-dash__tile {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 22px;
	border: 1px solid var(--hta-line, #E3E7EA);
	border-radius: var(--hta-radius, 10px);
	background: #fff;
	text-decoration: none;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.hta-dash__tile:hover,
.hta-dash__tile:focus-visible {
	border-color: var(--hta-navy, #073B75);
	box-shadow: var(--hta-shadow, 0 8px 24px -12px rgba(23, 32, 42, .16));
	transform: translateY(-2px);
}

.hta-dash__tileicon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background-color: var(--hta-tint-navy, #F2F6FF);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}

.hta-dash__tile--directory .hta-dash__tileicon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073B75' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.1'/><path d='M3.4 19a5.6 5.6 0 0 1 11.2 0'/><circle cx='17.2' cy='10.2' r='2.2'/><path d='M16.1 14.8a4.6 4.6 0 0 1 4.5 3.9'/></svg>");
}

.hta-dash__tile--documents .hta-dash__tileicon {
	background-color: var(--hta-tint-teal, #ECF6F8);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23078A96' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M13.5 3H7a1.6 1.6 0 0 0-1.6 1.6v14.8A1.6 1.6 0 0 0 7 21h10a1.6 1.6 0 0 0 1.6-1.6V8.1z'/><path d='M13.4 3v5.1h5.2'/><path d='M8.8 13h6.4M8.8 16.4h6.4'/></svg>");
}

.hta-dash__tile--minutes .hta-dash__tileicon {
	background-color: var(--hta-tint-navy, #F2F6FF);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073B75' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4.6' width='16' height='16' rx='1.7'/><path d='M8 3v3.2M16 3v3.2M4 9.6h16'/><path d='M8.6 13.4h6.8M8.6 16.6h4.2'/></svg>");
}

.hta-dash__tile--workshops .hta-dash__tileicon {
	background-color: var(--hta-tint-gold, #FFFBE0);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B58900' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3.4 5.4h17.2v10.2H3.4z'/><path d='M12 15.6V19M8.6 19h6.8'/><path d='M7.6 12.2l2.2-2.6 2 2.2 2.6-3.2 2 3.6'/></svg>");
}

.hta-dash__tile--opportunities .hta-dash__tileicon {
	background-color: var(--hta-tint-green, #F4F9EF);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23268A35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3.2' y='7' width='17.6' height='13' rx='1.7'/><path d='M9 7V5.4A1.4 1.4 0 0 1 10.4 4h3.2A1.4 1.4 0 0 1 15 5.4V7'/><path d='M3.2 12.2h17.6'/></svg>");
}

.hta-dash__tile--committee .hta-dash__tileicon {
	background-color: var(--hta-tint-teal, #ECF6F8);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23078A96' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20.4 14.4a1.7 1.7 0 0 1-1.7 1.7H8.2L4 20.2V5.4a1.7 1.7 0 0 1 1.7-1.7h13a1.7 1.7 0 0 1 1.7 1.7z'/><path d='M8.4 8.6h7.2M8.4 11.8h4.8'/></svg>");
}

.hta-dash__tilelabel {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--hta-navy, #073B75);
	margin-bottom: 4px;
}

.hta-dash__tileblurb {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	color: var(--hta-muted, #667085);
}

/* ---- Panels ------------------------------------------------------------- */

.hta-dash__panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 22px;
}

.hta-dash__panel {
	padding: 24px;
	border: 1px solid var(--hta-line, #E3E7EA);
	border-radius: var(--hta-radius, 10px);
	background: #fff;
}

.hta-dash__panelhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 0 0 14px;
	margin: 0 0 6px;
	border-bottom: 1px solid var(--hta-line, #E3E7EA);
}

.hta-dash .hta-dash__paneltitle {
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.25;
	color: var(--hta-navy, #073B75);
}

.hta-dash__panellink {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--hta-teal, #078A96);
	text-decoration: none;
}

.hta-dash__panellink:hover {
	text-decoration: underline;
}

.hta-dash__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hta-dash__item {
	border-bottom: 1px solid var(--hta-line, #E3E7EA);
}

.hta-dash__item:last-child {
	border-bottom: 0;
}

.hta-dash__item a {
	display: block;
	padding: 13px 0;
	text-decoration: none;
}

.hta-dash__itemtitle {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--hta-text, #171717);
}

.hta-dash__item a:hover .hta-dash__itemtitle {
	color: var(--hta-navy, #073B75);
}

.hta-dash__itemmeta {
	display: block;
	margin-top: 3px;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--hta-muted, #667085);
}

.hta-dash__empty {
	margin: 14px 0 0;
	font-size: 15px;
	color: var(--hta-muted, #667085);
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 640px) {

	.hta-dash__head {
		align-items: flex-start;
		flex-direction: column;
	}

	.hta-dash__tile {
		padding: 18px;
	}

	.hta-dash__panel {
		padding: 20px;
	}
}

/* ---- Dashboard & footer corrections ------------------------------------ */

/* Same story as the footer headings: the child theme's
   body.hta-site.hta-site #page-container :is(h1..h6) rule carries !important,
   so these have to out-specify it rather than repeat it. */
body.hta-site.hta-site #page-container .hta-dash__title,
body.hta-site.hta-site #page-container .hta-dash__paneltitle {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Divi styles .entry-content ul with bullets and indent. */
body.hta-site.hta-site #page-container .hta-dash__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.hta-site.hta-site #page-container .hta-dash__list > li {
	list-style: none;
	padding-left: 0;
}

body.hta-site.hta-site #page-container .hta-dash__list > li::before {
	content: none;
}

/* ---- Footer: logo at the top of the contact rail ------------------------ */

.hta-site .hta-foot2__logo {
	display: block;
	margin: 0 0 30px;
}

.hta-site .hta-foot2__logo img {
	display: block;
	width: 150px;
	height: auto;
}

/* The brand column no longer carries the logo, so its heading leads. */
.hta-site .hta-foot2__brand .hta-foot2__subtitle {
	margin-top: 0;
}

/* ---- Membership application form ---------------------------------------- */

.hta-join {
	max-width: 780px;
}

.hta-join__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hta-join__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px 22px;
}

.hta-join__field {
	margin: 0;
}

.hta-join__field--about {
	margin: 20px 0 0;
}

.hta-join label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--hta-navy, #073B75);
}

.hta-join__req {
	color: #C0392B;
}

.hta-join input[type="text"],
.hta-join input[type="email"],
.hta-join input[type="tel"],
.hta-join input[type="url"],
.hta-join select,
.hta-join textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--hta-line, #E3E7EA);
	border-radius: var(--hta-radius-sm, 6px);
	background: #fff;
	font-size: 16px;
	line-height: 1.4;
	color: var(--hta-text, #171717);
}

.hta-join input:focus,
.hta-join select:focus,
.hta-join textarea:focus {
	outline: 2px solid var(--hta-teal, #078A96);
	outline-offset: 1px;
	border-color: var(--hta-teal, #078A96);
}

.hta-join__consent {
	margin: 22px 0 0;
}

.hta-join__consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	color: var(--hta-text, #171717);
}

.hta-join__consent input {
	margin-top: 3px;
}

.hta-join__submit {
	margin: 26px 0 0;
}

.hta-join__msg {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: var(--hta-radius-sm, 6px);
	font-size: 15px;
}

.hta-join__msg--err {
	background: #FDECEA;
	color: #8B2016;
}

.hta-join--done {
	max-width: 720px;
	padding: 28px 30px;
	border: 1px solid var(--hta-line, #E3E7EA);
	border-left: 4px solid var(--hta-green, #268A35);
	border-radius: var(--hta-radius, 10px);
	background: var(--hta-tint-green, #F4F9EF);
}

body.hta-site.hta-site #page-container .hta-join--done h3 {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	text-transform: none !important;
	margin: 0 0 10px;
	padding: 0;
	font-size: 22px;
	color: var(--hta-navy, #073B75);
}

.hta-join--done p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* ---- Membership: benefits beside the application form ------------------- */

.hta-site .hta-join-section .hta-join-col {
	display: flex;
	flex-direction: column;
}

body.hta-site.hta-site #page-container .hta-benefits__title {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	text-transform: none !important;
	margin: 0 0 24px;
	padding: 0;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.2;
	color: var(--hta-navy, #073B75);
}

body.hta-site.hta-site #page-container ul.hta-benefits {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

body.hta-site.hta-site #page-container ul.hta-benefits > li {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 0 16px 38px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--hta-text, #171717);
}

body.hta-site.hta-site #page-container ul.hta-benefits > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--hta-tint-green, #F4F9EF);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23268A35' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='m4.5 12.5 5 5 10-11'/></svg>");
}

.hta-site .hta-benefits__close {
	margin: 0;
	padding: 22px 24px;
	border-left: 3px solid var(--hta-green, #268A35);
	background: #fff;
	border-radius: 0 var(--hta-radius-sm, 6px) var(--hta-radius-sm, 6px) 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--hta-text, #171717);
}

/* The form sits on a white card so it reads as the actionable half. */
.hta-site .hta-join-col--form {
	padding: 34px;
	border: 1px solid var(--hta-line, #E3E7EA);
	border-radius: var(--hta-radius, 10px);
	background: #fff;
}

.hta-site .hta-join-col--form .hta-join {
	max-width: none;
}

.hta-site .hta-join-col--form .hta-section-heading,
.hta-site .hta-join-col--form .hta-h2 {
	margin-top: 0;
}

@media (max-width: 980px) {

	.hta-site .hta-join-col--form {
		padding: 26px 22px;
	}
}

/* The two column headings should read as a pair, so the form heading follows
   the benefits heading rather than the site's serif section-heading style. */
body.hta-site.hta-site #page-container .hta-join-col--form .hta-h2 {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.2;
	color: var(--hta-navy, #073B75);
}

.hta-site .hta-join-col--form .hta-lede {
	font-size: 16px;
	line-height: 1.55;
}

/* ---- Plain-anchor buttons ----------------------------------------------- *
 * The .hta-btn-* classes in this stylesheet are Divi module selectors
 * (.hta-btn-outline.et_pb_button). Markup inside Code modules — the join
 * form's submit, the enquire link, the members-only gate — needs its own
 * plain-element styling, which is what these are.
 * ------------------------------------------------------------------------ */

.hta-site a.hta-btn,
.hta-site button.hta-btn {
	display: inline-block;
	padding: 14px 30px;
	border: 2px solid transparent;
	border-radius: var(--hta-radius-sm, 6px);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.hta-site a.hta-btn--primary,
.hta-site button.hta-btn--primary {
	background: var(--hta-green-btn, #23802F);
	border-color: var(--hta-green-btn, #23802F);
	color: #fff;
}

.hta-site a.hta-btn--primary:hover,
.hta-site button.hta-btn--primary:hover,
.hta-site button.hta-btn--primary:focus-visible {
	background: var(--hta-green-dk, #1E6E2A);
	border-color: var(--hta-green-dk, #1E6E2A);
	color: #fff;
}

.hta-site a.hta-btn--outline {
	background: transparent;
	border-color: var(--hta-navy, #073B75);
	color: var(--hta-navy, #073B75);
}

.hta-site a.hta-btn--outline:hover,
.hta-site a.hta-btn--outline:focus-visible {
	background: var(--hta-navy, #073B75);
	color: #fff;
}

.hta-site .hta-benefits__enquire {
	margin: 26px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

/* The question route is secondary to the application form in the next column,
   so it is a line of copy with a small button, not a full-size call to action. */
.hta-site .hta-benefits__enquire-label {
	font-size: 15px;
	color: var(--hta-muted, #667085);
}

/* The benefits column is shorter than the form, so the photograph is pinned
   to the bottom of the column and fills whatever gap is left. */
.hta-site .hta-join-col--why .hta-benefits__image {
	margin-top: auto;
	margin-bottom: 0;
}

.hta-site .hta-join-col--why .hta-benefits__image .et_pb_image_wrap,
.hta-site .hta-join-col--why .hta-benefits__image img {
	display: block;
	width: 100%;
	border-radius: var(--hta-radius, 10px);
}

.hta-site .hta-join-col--why .hta-benefits__image img {
	min-height: 260px;
	object-fit: cover;
}

@media (max-width: 980px) {

	.hta-site .hta-join-col--why .hta-benefits__image {
		margin-top: 30px;
	}

	.hta-site .hta-join-col--why .hta-benefits__image img {
		min-height: 200px;
	}
}

/* Divi floats its columns, so they take their own content height and the
   photograph could only ever sit in a short column. Making the row a flex
   container lets both columns share the taller one's height, and the image
   then grows into whatever space the form leaves. Divi's own percentage
   widths still apply — only the float is neutralised. */
@media (min-width: 981px) {

	.hta-site .hta-join-section .et_pb_row {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.hta-site .hta-join-section .et_pb_row > .et_pb_column {
		float: none;
	}

	.hta-site .hta-join-col--why .hta-benefits__image {
		flex: 1 1 auto;
		display: flex;
		min-height: 260px;
	}

	.hta-site .hta-join-col--why .hta-benefits__image .et_pb_image_wrap {
		flex: 1 1 auto;
		display: block;
	}

	.hta-site .hta-join-col--why .hta-benefits__image img {
		height: 100%;
		min-height: 0;
		object-fit: cover;
	}
}

/* =========================================================================
 * News & Updates — card grid
 *
 * Composition from the client's reference: image with the category as a pill
 * overlapping its lower edge, bold title, two-line excerpt, a rule, then the
 * date paired with "Read More" and an arrow. Rendered live by
 * [hta_news layout="grid"], so it is not stored in post_content and does not
 * need a page regeneration to change.
 * ====================================================================== */

.hta-site .hta-newsgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 30px;
}

.hta-site .hta-newscard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hta-line, #E3E7EA);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.hta-site .hta-newscard:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: 0 18px 40px -18px rgba(23, 32, 42, .28);
}

/* ---- Media + category pill --------------------------------------------- */

.hta-site .hta-newscard__media {
	position: relative;
	display: block;
	margin: 10px 10px 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	background: var(--hta-light-grey, #F2F4F5);
}

.hta-site .hta-newscard__media img,
.hta-site .hta-newscard__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.hta-site .hta-newscard__placeholder {
	background: linear-gradient(135deg, var(--hta-tint-navy, #F2F6FF), var(--hta-light-grey, #F2F4F5));
}

.hta-site .hta-newscard:hover .hta-newscard__media img {
	transform: scale(1.045);
}

.hta-site .hta-newscard__cat {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 9px 18px;
	border-radius: 0 10px 0 0;
	background: var(--hta-green-btn, #23802F);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.2;
}

/* ---- Body --------------------------------------------------------------- */

.hta-site .hta-newscard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px 24px 20px;
}

body.hta-site.hta-site #page-container .hta-newscard__title {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin: 0 0 12px;
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.32;
}

.hta-site .hta-newscard__title a {
	color: var(--hta-text, #171717);
	text-decoration: none;
}

.hta-site .hta-newscard__title a:hover {
	color: var(--hta-navy, #073B75);
}

.hta-site .hta-newscard__excerpt {
	margin: 0 0 18px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--hta-muted, #667085);

	/* Two lines, then an ellipsis — keeps every card's footer aligned. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Footer ------------------------------------------------------------- */

.hta-site .hta-newscard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--hta-line, #E3E7EA);
}

.hta-site .hta-newscard__date {
	font-size: 14.5px;
	color: var(--hta-muted, #667085);
}

.hta-site .hta-newscard__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hta-text, #171717);
	text-decoration: none;
}

.hta-site .hta-newscard__more:hover {
	color: var(--hta-green-btn, #23802F);
}

.hta-site .hta-newscard__arrow {
	width: 15px;
	height: 15px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323802F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M8.5 7H17v8.5'/></svg>");
	transition: transform .18s ease;
}

.hta-site .hta-newscard__more:hover .hta-newscard__arrow {
	transform: translate(2px, -2px);
}

@media (max-width: 600px) {

	.hta-site .hta-newsgrid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

/* =========================================================================
 * Heading treatment — client reference 2026-08-28 (HEADING.png)
 *
 * A script eyebrow in turquoise sitting over a heavy sans heading, replacing
 * the previous "// UPPERCASE" eyebrow and uppercase Fraunces headings.
 * --hta-head is switched to DM Sans at the token, so every heading follows
 * without needing its own rule; these blocks only undo the uppercasing and
 * restyle the eyebrow.
 * ====================================================================== */

:root {
	/* Brand teal lifted to the turquoise of the reference while staying in
	   the HTA family. Decorative script only — never small body copy. */
	--hta-eyebrow: #B58900;
}

/* Headings render as written, no forced capitals. */
body.hta-site.hta-site :is(h1, h2, h3, h4, h5, h6),
body.hta-site.hta-site #page-container :is(h1, h2, h3, h4, h5, h6),
body.hta-site.hta-site .hta-pillar__title {
	font-family: var(--hta-head) !important;
	font-weight: 700;
	letter-spacing: -.015em;
	text-transform: none;
}

/* The eyebrow becomes the script line above the heading. */
body.hta-site.hta-site .hta-eyebrow {
	font-family: var(--hta-script) !important;
	font-size: clamp(24px, 2.5vw, 34px) !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--hta-eyebrow) !important;
	line-height: 1.15 !important;
	margin: 0 0 6px !important;
}

body.hta-site.hta-site .hta-eyebrow::before {
	content: none;
}

body.hta-site.hta-site .hta-heading--light .hta-eyebrow {
	color: var(--hta-eyebrow-dark, #FEEC59) !important;
}

/* The eyebrow's script face needs to out-specify the site-wide
   body.hta-site.hta-site :is(p, li, …) body-font rule, which also carries
   !important. Weight 600 because that is the only Dancing Script weight
   loaded — asking for 700 gets a synthesised bold. */
body.hta-site.hta-site #page-container .hta-eyebrow,
body.hta-site.hta-site .hta-pagehero .hta-eyebrow,
body.hta-site.hta-site .hta-eyebrow {
	font-family: 'Dancing Script', 'Segoe Script', cursive !important;
	font-weight: 600 !important;
}

/* =========================================================================
 * Counter — client reference (Travol)
 *
 * Icon in a ringed circle, the figure beneath it, then the label, with
 * dashed arrows arcing between items. Rendered as a self-contained navy
 * band so the surrounding section keeps its own background.
 * ====================================================================== */

.hta-site .hta-stats--ringed {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	padding: 56px 40px;
	border-radius: 18px;
	background: var(--hta-navy, #073B75);
}

.hta-site .hta-stats--ringed .hta-stat {
	flex: 0 1 200px;
	text-align: center;
	padding: 0 10px;
}

/* ---- Ringed icon -------------------------------------------------------- */

.hta-site .hta-stats--ringed .hta-stat__ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .10);
	box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .07);
}

.hta-site .hta-stats--ringed .hta-stat__icon {
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.hta-site .hta-stat--i1 .hta-stat__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.1'/><path d='M3.4 19a5.6 5.6 0 0 1 11.2 0'/><circle cx='17.2' cy='10.2' r='2.2'/><path d='M16.1 14.8a4.6 4.6 0 0 1 4.5 3.9'/></svg>");
}

.hta-site .hta-stat--i2 .hta-stat__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><rect x='3.6' y='4.8' width='16.8' height='15.6' rx='1.8'/><path d='M8 3.2v3.2M16 3.2v3.2M3.6 9.8h16.8'/><path d='m9.2 14.4 2 2 3.6-3.8'/></svg>");
}

.hta-site .hta-stat--i3 .hta-stat__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9.6v4.8h3.2L14 19V5L7.2 9.6z'/><path d='M17.4 8.6a5 5 0 0 1 0 6.8'/><path d='M19.8 6.2a8.4 8.4 0 0 1 0 11.6'/></svg>");
}

.hta-site .hta-stat--i4 .hta-stat__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M13.4 3H7a1.7 1.7 0 0 0-1.7 1.7v14.6A1.7 1.7 0 0 0 7 21h10a1.7 1.7 0 0 0 1.7-1.7V8.2z'/><path d='M13.3 3v5.2h5.3'/><path d='M8.7 13h6.6M8.7 16.4h6.6'/></svg>");
}

/* ---- Figure and label --------------------------------------------------- */

body.hta-site.hta-site #page-container .hta-stats--ringed .hta-stat__value {
	display: block;
	font-family: var(--hta-head) !important;
	font-size: clamp(38px, 4.4vw, 56px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: #fff;
	margin-bottom: 10px;
}

.hta-site .hta-stats--ringed .hta-stat__label {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: rgba(255, 255, 255, .92);
}

/* ---- Dashed connectors -------------------------------------------------- */

.hta-site .hta-stats--ringed .hta-stat__link {
	flex: 0 1 120px;
	align-self: flex-start;
	height: 40px;
	margin-top: 34px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
}

.hta-site .hta-stats--ringed .hta-stat__link--up {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.6' stroke-linecap='round'><path d='M4 30C28 8 84 6 112 20' stroke-dasharray='2 7'/><path d='m104 14 10 6-10 6' stroke-dasharray='0'/></svg>");
}

.hta-site .hta-stats--ringed .hta-stat__link--down {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.6' stroke-linecap='round'><path d='M4 12C28 34 84 36 112 22' stroke-dasharray='2 7'/><path d='m104 28 10-6-10-6' stroke-dasharray='0'/></svg>");
}

@media (max-width: 900px) {

	.hta-site .hta-stats--ringed {
		gap: 34px 0;
		padding: 40px 22px;
	}

	.hta-site .hta-stats--ringed .hta-stat {
		flex: 0 1 50%;
	}

	.hta-site .hta-stats--ringed .hta-stat__link {
		display: none;   /* the arcs only read across a single row */
	}
}

/* =========================================================================
 * H1 in capitals, and the eyebrow-to-heading spacing of the reference.
 * ====================================================================== */

body.hta-site.hta-site h1,
body.hta-site.hta-site #page-container h1 {
	text-transform: uppercase;
}

body.hta-site.hta-site .hta-eyebrow {
	margin: 0 0 4px !important;
	line-height: 1.1 !important;
}

body.hta-site.hta-site .hta-eyebrow + h1,
body.hta-site.hta-site .hta-eyebrow + h2,
body.hta-site.hta-site .hta-eyebrow + .hta-h2 {
	margin-top: 0 !important;
}

/* hta-modules.css (the plugin's own stylesheet) styles .hta-stat as a white
   card with a coloured top stripe and a shadow. Inside the ringed variant the
   items are not cards, so that treatment is unwound here rather than edited
   there — the plain .hta-stats grid still uses it elsewhere. */
.hta-site .hta-stats--ringed .hta-stat,
.hta-site .hta-stats--ringed .hta-stat:nth-child(1),
.hta-site .hta-stats--ringed .hta-stat:nth-child(2),
.hta-site .hta-stats--ringed .hta-stat:nth-child(3),
.hta-site .hta-stats--ringed .hta-stat:nth-child(4) {
	background: transparent;
	border: 0;
	border-top: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0 10px;
	text-align: center;
}

.hta-site .hta-stats--ringed .hta-stat:hover {
	transform: none;
	box-shadow: none;
}

.hta-site .hta-stats--ringed .hta-stat .hta-stat__value,
.hta-site .hta-stats--ringed .hta-stat:nth-child(2) .hta-stat__value,
.hta-site .hta-stats--ringed .hta-stat:nth-child(3) .hta-stat__value,
.hta-site .hta-stats--ringed .hta-stat:nth-child(4) .hta-stat__value {
	color: #fff;
}

.hta-site .hta-stats--ringed .hta-stat__label {
	margin-top: 0;
	font-size: 17px;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, .92);
}

/* =========================================================================
 * Footer contacts — client reference (FOOTER CONTACTS.png)
 *
 * A solid teal tile carrying a white icon, with a bold label and a lighter
 * value beside it, on the dark panel. This supersedes the white contact rail
 * from the earlier footer reference: the rail is dropped so the whole footer
 * reads as one dark band.
 * ====================================================================== */

/* Rail off — column one now sits on the photographic panel like the rest. */
.hta-site #footer-widgets .footer-widget:first-child::before {
	display: none;
}

.hta-site #footer-widgets .footer-widget:first-child {
	padding-left: 34px;
}

.hta-site .hta-foot2__item {
	align-items: center;
	gap: 20px;
	padding-bottom: 26px;
}

.hta-site .hta-foot2__icon {
	width: 68px;
	height: 68px;
	margin-top: 0;
	border-radius: 2px;
	background-color: #1AA0B4;
	background-size: 32px 32px;
	background-position: center;
}

/* White line icons on the teal tile, replacing the filled green marks. */
.hta-site .hta-foot2__item--phone .hta-foot2__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M7.2 4.4 9 8l-1.9 1.6a12.4 12.4 0 0 0 5.3 5.3L14 13l3.6 1.8v3.3a1.5 1.5 0 0 1-1.7 1.5A15.6 15.6 0 0 1 3.4 6.1 1.5 1.5 0 0 1 4.9 4.4z'/><path d='M14.6 5.2a5.2 5.2 0 0 1 3.9 3.9M14 2.2a8.4 8.4 0 0 1 6.8 6.8'/></svg>");
}

.hta-site .hta-foot2__item--email .hta-foot2__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2.8' y='5' width='18.4' height='14' rx='1.8'/><path d='m3.4 6.6 8.6 6 8.6-6'/></svg>");
}

.hta-site .hta-foot2__item--visit .hta-foot2__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21.2s7-6.1 7-11.2a7 7 0 1 0-14 0c0 5.1 7 11.2 7 11.2z'/><circle cx='12' cy='9.6' r='2.6'/></svg>");
}

/* Label and value now read on the dark panel. */
.hta-site #footer-widgets .footer-widget:first-child .hta-foot2__label {
	color: #FFFFFF;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 4px;
}

.hta-site #footer-widgets .footer-widget:first-child .hta-foot2__value,
.hta-site #footer-widgets .footer-widget:first-child .hta-foot2__value a {
	color: #D7E5F0;
	font-size: 16px;
}

.hta-site #footer-widgets .footer-widget:first-child .hta-foot2__value a:hover {
	color: var(--hta-gold, #FEEC59);
}

@media (max-width: 800px) {

	.hta-site #footer-widgets .footer-widget:first-child::before {
		display: none;
	}

	.hta-site .hta-foot2__icon {
		width: 56px;
		height: 56px;
		background-size: 26px 26px;
	}
}

/* =========================================================================
 * Page hero: eyebrow-to-heading spacing per the client reference
 *
 * The script eyebrow sits outside the navy slab while the H1 sits inside it,
 * so the visual gap was the eyebrow's own margin PLUS the slab's 40px top
 * padding — 44px in total, which read as two separate elements rather than
 * the tight pairing in HEADING.png. The slab is tightened at the top and the
 * eyebrow pulled down so the two read as one unit.
 * ====================================================================== */

.hta-site .hta-pagehero .hta-pagehero__eyebrow {
	margin-bottom: 0 !important;
}

.hta-site .hta-pagehero .hta-pagehero__eyebrow .hta-eyebrow {
	margin: 0 0 2px !important;
}

.hta-site .hta-pagehero .hta-pagehero__slab.et_pb_module {
	padding-top: 16px !important;
	padding-bottom: 30px !important;
}

/* H1 keeps its capitals and sits tight under the script line. */
.hta-site .hta-pagehero__slab h1 {
	margin-top: 0 !important;
	line-height: 1.06;
}

/* =========================================================================
 * Events — photographic mosaic (client reference: Travol)
 *
 * A large lead tile beside smaller ones, each a photograph with the title
 * over its lower edge and a vertical tag up the right. The reference puts a
 * price in that tag; an HTA event has no single price, so it carries the date.
 * ====================================================================== */

.hta-site .hta-emosaic {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 220px;
	gap: 22px;
}

.hta-site .hta-etile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 4px;
	text-decoration: none;
	background: var(--hta-navy-dk, #04205A);
}

.hta-site .hta-etile--lead {
	grid-column: span 2;
	grid-row: span 2;
}

.hta-site .hta-etile__media,
.hta-site .hta-etile__media img,
.hta-site .hta-etile__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hta-site .hta-etile__placeholder {
	background: linear-gradient(135deg, var(--hta-navy, #073B75), var(--hta-teal-dk, #06767F));
}

.hta-site .hta-etile__media img {
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.hta-site .hta-etile:hover .hta-etile__media img {
	transform: scale(1.06);
}

/* Legibility scrim under the title. */
.hta-site .hta-etile::after {
	content: "";
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(180deg, rgba(4, 20, 48, 0) 0%, rgba(4, 20, 48, .82) 100%);
	pointer-events: none;
}

/* ---- Vertical date tag -------------------------------------------------- */

.hta-site .hta-etile__date {
	position: absolute;
	top: 0;
	right: 22px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 14px 12px 12px;
	background: var(--hta-teal-dk, #06767F);
	color: #fff;
	line-height: 1;
}

.hta-site .hta-etile__day {
	font-size: 22px;
	font-weight: 700;
}

.hta-site .hta-etile__month {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .9;
}

/* ---- Title block -------------------------------------------------------- */

.hta-site .hta-etile__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 22px 24px;
}

.hta-site .hta-etile__title {
	display: block;
	font-family: var(--hta-head);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.hta-site .hta-etile--lead .hta-etile__title {
	font-size: clamp(24px, 2.6vw, 34px);
}

.hta-site .hta-etile__meta {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .82);
}

/* A short rule under the title, as in the reference. */
.hta-site .hta-etile__body::after {
	content: "";
	display: block;
	width: 54px;
	height: 2px;
	margin-top: 14px;
	background: rgba(255, 255, 255, .55);
	transition: width .3s ease;
}

.hta-site .hta-etile:hover .hta-etile__body::after {
	width: 90px;
}

@media (max-width: 900px) {

	.hta-site .hta-emosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 190px;
	}
}

@media (max-width: 600px) {

	.hta-site .hta-emosaic {
		grid-template-columns: 1fr;
	}

	.hta-site .hta-etile--lead {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* =========================================================================
 * Homepage About — client reference (ABOUT US HOME.png)
 *
 * Copy left with a badge tile and two icon features beneath it; a circular
 * photograph right, ringed in white, carrying a floating statement card.
 * Scoped to .hta-about--v2 so a page generated before this change keeps its
 * old markup rather than being half-styled.
 * ====================================================================== */

/* ---- Media: circular photo + floating card ------------------------------ */

.hta-site .hta-about--v2 .hta-about__media {
	position: relative;
}

.hta-site .hta-about--v2 .hta-about__photo .et_pb_image_wrap {
	display: block;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 14px #fff, 0 24px 60px -28px rgba(7, 59, 117, .45);
}

.hta-site .hta-about--v2 .hta-about__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.hta-site .hta-about--v2 .hta-about__float {
	position: absolute;
	top: 8%;
	right: -10px;
	z-index: 3;
	display: block;
	max-width: 260px;
	padding: 18px 24px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 44px -20px rgba(7, 59, 117, .38);
}

.hta-site .hta-about--v2 .hta-about__floattop {
	display: block;
	font-family: var(--hta-head);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--hta-green, #268A35);
}

.hta-site .hta-about--v2 .hta-about__floatsub {
	display: block;
	margin-top: 3px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--hta-navy, #073B75);
}

/* ---- Badge tile + features --------------------------------------------- */

.hta-site .hta-about--v2 .hta-about__grid {
	display: flex;
	align-items: flex-start;
	gap: 26px;
	margin: 0 0 32px;
}

.hta-site .hta-about--v2 .hta-about__badge {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 128px;
	padding: 26px 16px;
	border-radius: 16px;
	background: var(--hta-navy, #073B75);
	text-align: center;
}

.hta-site .hta-about--v2 .hta-about__badgenum {
	display: block;
	font-family: var(--hta-head);
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	color: var(--hta-gold, #FEEC59);
}

.hta-site .hta-about--v2 .hta-about__badgelabel {
	display: block;
	margin-top: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.hta-site .hta-about--v2 .hta-about__features {
	flex: 1 1 auto;
	min-width: 0;
}

.hta-site .hta-about--v2 .hta-about__feature {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 22px;
}

.hta-site .hta-about--v2 .hta-about__feature:last-child {
	padding-bottom: 0;
}

.hta-site .hta-about--v2 .hta-about__ficon {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background-color: var(--hta-tint-gold, #FFFBE0);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px 26px;
}

.hta-site .hta-about--v2 .hta-about__feature--people .hta-about__ficon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B58900' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.1'/><path d='M3.4 19a5.6 5.6 0 0 1 11.2 0'/><circle cx='17.2' cy='10.2' r='2.2'/><path d='M16.1 14.8a4.6 4.6 0 0 1 4.5 3.9'/></svg>");
}

.hta-site .hta-about--v2 .hta-about__feature--link .hta-about__ficon {
	background-color: var(--hta-tint-teal, #ECF6F8);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23078A96' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10.2 13.8a3.6 3.6 0 0 0 5.4.4l2.4-2.4a3.6 3.6 0 0 0-5.1-5.1l-1.4 1.4'/><path d='M13.8 10.2a3.6 3.6 0 0 0-5.4-.4L6 12.2a3.6 3.6 0 0 0 5.1 5.1l1.4-1.4'/></svg>");
}

body.hta-site.hta-site #page-container .hta-about--v2 .hta-about__ftitle {
	display: block;
	font-family: var(--hta-head) !important;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hta-navy, #073B75);
	margin-bottom: 6px;
}

.hta-site .hta-about--v2 .hta-about__fbody {
	display: block;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--hta-muted, #667085);
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 980px) {

	.hta-site .hta-about--v2 .hta-about__float {
		right: 0;
		max-width: 220px;
		padding: 14px 18px;
	}

	.hta-site .hta-about--v2 .hta-about__photo .et_pb_image_wrap {
		box-shadow: 0 0 0 10px #fff, 0 20px 44px -24px rgba(7, 59, 117, .4);
	}
}

@media (max-width: 620px) {

	.hta-site .hta-about--v2 .hta-about__grid {
		flex-direction: column;
		gap: 20px;
	}

	.hta-site .hta-about--v2 .hta-about__badge {
		width: 100%;
		flex-direction: row;
		gap: 14px;
		padding: 18px;
	}

	.hta-site .hta-about--v2 .hta-about__badgelabel {
		margin-top: 0;
		text-align: left;
	}
}

/* The floating card was being squeezed by the column edge, wrapping the
   statement over four lines. Pulled clear of the photo and given room. */
.hta-site .hta-about--v2 .hta-about__float {
	top: 4%;
	right: auto;
	left: 4%;
	max-width: 300px;
	min-width: 240px;
	padding: 20px 26px;
}

@media (max-width: 980px) {

	.hta-site .hta-about--v2 .hta-about__float {
		left: 0;
		min-width: 0;
		max-width: 240px;
	}
}

/* Divi gives .et_pb_code_inner position:relative, so it — not the column —
   was the floating card's containing block, which put the card outside the
   media column entirely. Neutralised so the card positions against
   .hta-about__media as intended. */
.hta-site .hta-about--v2 .hta-about__media .et_pb_code,
.hta-site .hta-about--v2 .hta-about__media .et_pb_code_inner {
	position: static;
}

.hta-site .hta-about--v2 .hta-about__float {
	top: 2%;
	left: auto;
	right: 2%;
	max-width: 270px;
	min-width: 0;
}

@media (max-width: 980px) {

	.hta-site .hta-about--v2 .hta-about__float {
		right: 0;
		max-width: 220px;
	}
}

/* =========================================================================
 * Headings: logo colours, caps, and the reference spacing everywhere
 *
 * The logo is navy #002255 + yellow #FFEE55 (sampled from the mark itself);
 * there is no turquoise in it, so the eyebrow moves off turquoise onto the
 * logo yellow. Raw #FFEE55 on white is about 1.3:1 — unreadable — so the
 * eyebrow uses a darkened form that keeps the yellow identity and clears 3:1
 * for large text, which is the threshold that applies at this size.
 * ====================================================================== */

:root {
	--hta-eyebrow: #B58900;   /* logo yellow, darkened for legibility on white */
}

/* The big headings run in capitals, like the H1. */
body.hta-site.hta-site h2,
body.hta-site.hta-site #page-container h2,
body.hta-site.hta-site .hta-h2 {
	text-transform: uppercase;
}

/* Tight eyebrow-to-heading pairing, everywhere and not just the page hero. */
body.hta-site.hta-site .hta-eyebrow {
	margin: 0 0 2px !important;
	line-height: 1.1 !important;
}

body.hta-site.hta-site .hta-eyebrow + h1,
body.hta-site.hta-site .hta-eyebrow + h2,
body.hta-site.hta-site .hta-eyebrow + h3,
body.hta-site.hta-site .hta-eyebrow + .hta-h2 {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* On dark panels the yellow can run at full strength. */
body.hta-site.hta-site .hta-heading--light .hta-eyebrow,
body.hta-site.hta-site .hta-onpdark .hta-eyebrow {
	color: var(--hta-eyebrow-dark, #FEEC59) !important;
}

/* =========================================================================
 * Counter: photographic background behind the navy band
 * ====================================================================== */

.hta-site .hta-stats--ringed {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--hta-navy, #073B75);
	background-image: url("/HTA/wp-content/uploads/hta/hero-harties.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hta-site .hta-stats--ringed::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 34, 85, .90) 0%, rgba(7, 59, 117, .82) 50%, rgba(0, 26, 66, .92) 100%);
}

/* =========================================================================
 * FINAL DESIGN CHANGES — client brief 2026-09-02 (CHANGES.png)
 *
 * The last layer in this file, so it wins on source order over everything
 * above it and needs !important only where Divi's own inline CSS is the
 * thing being beaten.
 *
 *   1. One yellow, #FEEC59
 *   2. Poppins globally           (tokens + the hard-coded stacks: done above)
 *   3. Body copy near-black
 *   4. The main page heading system
 *   5. Counter figures count up
 *   6. Counter icons animate with them
 *   7. News cards all white, the lead included
 *   8. Footer: three columns with dividers
 *   9. Footer contact icons: white on an outlined tile
 *  10. Newsletter: yellow Subscribe, social row
 *  11. Footer bottom bar: rule, copyright, Joren Digital
 *  12. Responsive
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * 1. ONE YELLOW
 *
 * #FEEC59 is the brand yellow and the only one. Every earlier gold, mustard
 * and darkened-logo-yellow token now points at it, so the rules further up
 * this file — buttons, borders, arrows, footer accents, hover states, the
 * counter — follow without being rewritten.
 *
 * --hta-yellow-ink is the same yellow darkened for ONE job: yellow set as
 * text on a white page. #FEEC59 on white measures 1.21:1, which is
 * invisible; the ink measures 3.21:1 and clears the 3:1 threshold that
 * applies to large text. It is used by the script heading and by focus
 * rings, and nowhere else — on navy the yellow runs at full strength
 * (9.18:1) and as a fill under #171717 text it measures 14.82:1.
 *
 * Change the yellow at HTA Setup → Brand colours, not here: that option
 * writes both tokens plus the Divi Global Colour.
 * ---------------------------------------------------------------------- */

:root {
	--hta-yellow:       #FEEC59;
	--hta-yellow-ink:   #B58900;

	/* Aliases, so no earlier rule in this file needs editing. */
	--hta-gold:         #FEEC59;
	--hta-gold-dk:      #FEEC59;
	--hta-tint-gold:    #FFFBE0;   /* the yellow as a pale wash */

	/* The script heading: ink on light grounds, full strength on dark. */
	--hta-eyebrow:      #B58900;
	--hta-eyebrow-dark: #FEEC59;

	/* Body copy — item 3. */
	--hta-text:         #171717;
}

/*
 * Focus rings. A #FEEC59 outline on a white page is invisible, and a focus
 * indicator that cannot be seen is worse than a plain one, so these keep the
 * ink. On dark panels the ring is redefined below.
 */
body.hta-site a:focus-visible,
body.hta-site button:focus-visible,
body.hta-site input:focus-visible,
body.hta-site select:focus-visible,
body.hta-site textarea:focus-visible,
body.hta-site #top-menu li a:focus-visible,
body.hta-site .et_pb_button:focus-visible {
	outline: 3px solid var(--hta-yellow-ink);
	outline-offset: 3px;
}

.hta-site .hta-onpdark a:focus-visible,
.hta-site .hta-onpdark button:focus-visible,
.hta-site #main-footer a:focus-visible,
.hta-site #main-footer button:focus-visible,
.hta-site #main-footer input:focus-visible,
.hta-site .hta-stats--ringed a:focus-visible,
.hta-site #et-top-navigation a:focus-visible {
	outline-color: var(--hta-yellow);
}

/*
 * Yellow as small text on a light card. These all sat on #8A6D00 — a
 * second mustard — so they move to the ink rather than to #FEEC59, which
 * they would not survive.
 */
.hta-site .hta-pillar--advocacy .hta-pillar__badge,
.hta-site .hta-pillar--advocacy .hta-pillar__link,
.hta-site .hta-pillar--advocacy .hta-pillar__num,
.hta-site .hta-pillar--03 .hta-pillar__badge-sc,
.hta-site .hta-pillar--03 .hta-pillar__kicker,
.hta-site .hta-opp--event-partner .hta-opp__icon,
.hta-site .hta-stats:not(.hta-stats--ringed) .hta-stat:nth-child(3) .hta-stat__value {
	color: var(--hta-yellow-ink);
}

/*
 * Yellow buttons. One yellow means the hover cannot be a second hex, so it
 * deepens the same fill instead. Text stays #171717 either way.
 */
.hta-btn-gold.et_pb_button,
.hta-btn-gold.et_pb_button:hover,
.hta-site .hta-btn--gold,
.hta-site .hta-btn--gold:hover {
	background: var(--hta-yellow) !important;
	border-color: var(--hta-yellow) !important;
	color: var(--hta-text) !important;
}

.hta-btn-gold.et_pb_button:hover,
.hta-site .hta-btn--gold:hover {
	filter: brightness(.93);
}

/* Divi's contact-form submit is the one module that still shipped white on
   yellow; the generator now writes dark text, and this covers pages built
   before that change without needing them regenerated. */
.hta-site .hta-form .et_pb_contact_submit,
.hta-site .hta-form .et_pb_contact_submit:hover {
	background-color: var(--hta-yellow) !important;
	border-color: var(--hta-yellow) !important;
	color: var(--hta-text) !important;
}


/* -------------------------------------------------------------------------
 * 3. BODY COPY IN NEAR-BLACK
 *
 * Paragraph text moves off the grey-blue --hta-muted onto #171717. --hta-muted
 * stays what it always was — dates, captions, counts, the small metadata line
 * — because those are not paragraph text and going black flattens the
 * hierarchy the cards depend on.
 *
 * The base rule this replaces is wrapped in :where() at zero specificity, so
 * a matching :where() here keeps that property: anything set in the Visual
 * Builder still wins, and nothing the client types is overridden.
 *
 * Dark grounds are untouched. They set their own white and light-blue
 * colours further up, and are re-asserted at the end of this block so a
 * future edit here cannot leak black text onto navy.
 * ---------------------------------------------------------------------- */

:where(body.hta-site) {
	color: var(--hta-text);
}

:where(body.hta-site) :is(p, li, dd, dt, blockquote, .et_pb_text, .et_pb_blurb_description) {
	color: var(--hta-text);
}

/* Component body copy. These carry real specificity in their own layers, so
   they are named rather than left to the base rule. */
.hta-site .hta-lede,
.hta-site .hta-news__excerpt,
.hta-site .hta-newscard__excerpt,
.hta-site .hta-card__text,
.hta-site .hta-card__excerpt,
.hta-site .hta-opp__excerpt,
.hta-site .hta-member__excerpt,
.hta-site .hta-dash__intro,
.hta-site .hta-emosaic__excerpt,
.hta-site .hta-about--v2 .hta-about__copy,
.hta-site .hta-cta--v2 .hta-cta__strap {
	color: var(--hta-text);
}

/* And the dark grounds keep their light type — item 3 is explicit that the
   footer and dark-blue sections stay white. */
.hta-site .hta-onpdark :is(p, li),
.hta-site .hta-heading--light :is(p, li),
.hta-site .hta-hero :is(p, li),
.hta-site .hta-pagehero :is(p, li),
.hta-site .hta-stats--ringed :is(p, li, span),
.hta-site #main-footer :is(p, li, dd, dt) {
	color: inherit;
}

.hta-site .hta-onpdark .hta-opp__excerpt,
.hta-site .hta-onpdark .hta-opp__meta {
	color: rgba(255, 255, 255, .78);
}


/* -------------------------------------------------------------------------
 * 4. THE MAIN PAGE HEADING SYSTEM
 *
 *      Upcoming              ← Dancing Script, HTA yellow
 *      EVENTS & WORKSHOPS    ← Poppins, bold, uppercase, navy
 *
 * One rule set, applied by the .hta-eyebrow + heading pairing that every
 * generated page already emits, so About, News & Updates, Events &
 * Workshops, Membership, Contact and the inner pages all inherit it without
 * page-level markup. The Divi preset that matches it is the "hta-heading"
 * module class the generator puts on these text modules.
 * ---------------------------------------------------------------------- */

body.hta-site.hta-site .hta-eyebrow,
body.hta-site.hta-site #page-container .hta-eyebrow {
	font-family: 'Dancing Script', 'Segoe Script', cursive !important;
	font-weight: 600 !important;
	font-size: clamp(26px, 2.5vw, 34px) !important;
	line-height: 1.1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--hta-eyebrow) !important;
	margin: 0 0 2px !important;
}

/* On navy the yellow runs at full strength. */
body.hta-site.hta-site .hta-heading--light .hta-eyebrow,
body.hta-site.hta-site .hta-onpdark .hta-eyebrow,
body.hta-site.hta-site .hta-hero .hta-eyebrow,
body.hta-site.hta-site .hta-pagehero .hta-eyebrow {
	color: var(--hta-eyebrow-dark) !important;
}

/*
 * The heading itself: Poppins, bold, uppercase, one size.
 *
 * Scoped to the heading SYSTEM — .hta-h2 and an h2 inside a .hta-heading
 * module, which is what hta_section_heading() emits — and not to every h2 on
 * the site. A blanket "body.hta-site.hta-site h2" scores 1-2-1 and quietly
 * outranks every component that sets its own heading colour or size at lower
 * specificity: on the first pass it turned the dark membership CTA's white
 * headline navy-on-navy, 1.39:1. Case stays site-wide because that is what
 * the 2026-08-28 layer above already established; colour is deliberately NOT
 * set here, so the navy default in section 2 (zero specificity) still gives
 * every heading dark blue while a dark panel can still say white.
 */
body.hta-site.hta-site .hta-h2,
body.hta-site.hta-site .hta-heading h2,
body.hta-site.hta-site #page-container .hta-h2,
body.hta-site.hta-site #page-container .hta-heading h2 {
	font-family: var(--hta-head) !important;
	font-size: clamp(30px, 3.1vw, 42px);
	font-weight: 700 !important;
	line-height: 1.1;
	letter-spacing: -.005em;
	text-transform: uppercase;
}

/* Case only, site-wide — as established on 2026-08-28. */
body.hta-site.hta-site h2,
body.hta-site.hta-site #page-container h2 {
	text-transform: uppercase;
}

/* The pairing sits tight: the script line is part of the heading, not a
   paragraph above it. */
body.hta-site.hta-site .hta-eyebrow + h1,
body.hta-site.hta-site .hta-eyebrow + h2,
body.hta-site.hta-site .hta-eyebrow + h3,
body.hta-site.hta-site .hta-eyebrow + .hta-h2 {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* The lede that follows a heading gets air, so the block reads as three
   distinct lines rather than one dense stack. */
body.hta-site.hta-site .hta-heading .hta-lede,
body.hta-site.hta-site .hta-h2 + .hta-lede {
	margin-top: 14px;
}


/* -------------------------------------------------------------------------
 * 5 + 6. THE COUNTER
 *
 * The figures already count up from zero (initCounters in hta-filter.js).
 * That pass raises the duration to 1.7s and adds .is-counting to each
 * .hta-stat on the same frame, which is what the icon animation below hangs
 * off, so the numbers and the icons move together. The class is only added,
 * and the observer unobserves as it fires, so scrolling back up does not
 * replay it.
 *
 * The rings themselves move to the brand yellow, per the mock-up: a yellow
 * ring and glow around a WHITE icon. The icon glyphs are white already —
 * they are data-URI strokes at %23ffffff further up — and stay that way.
 * ---------------------------------------------------------------------- */

.hta-site .hta-stats--ringed .hta-stat__ring {
	position: relative;
	background: rgba(255, 255, 255, .06);
	box-shadow:
		inset 0 0 0 2px var(--hta-yellow),
		0 0 0 6px rgba(254, 236, 89, .10),
		0 0 26px -4px rgba(254, 236, 89, .55);
}

/* A second, offset ring picks up the broken arc of the reference without
   another element in the markup. */
.hta-site .hta-stats--ringed .hta-stat__ring::after {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	border: 1px dashed rgba(254, 236, 89, .45);
	pointer-events: none;
}

/* Dashed connectors in the yellow rather than white. */
.hta-site .hta-stats--ringed .hta-stat__link--up {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' fill='none' stroke='%23FEEC59' stroke-opacity='.85' stroke-width='1.7' stroke-linecap='round'><path d='M4 30C28 8 84 6 112 20' stroke-dasharray='2 7'/><path d='m104 14 10 6-10 6' stroke-dasharray='0'/></svg>");
}

.hta-site .hta-stats--ringed .hta-stat__link--down {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' fill='none' stroke='%23FEEC59' stroke-opacity='.85' stroke-width='1.7' stroke-linecap='round'><path d='M4 12C28 34 84 36 112 22' stroke-dasharray='2 7'/><path d='m104 28 10-6-10-6' stroke-dasharray='0'/></svg>");
}

/*
 * The icon animation. Fade in, scale 0.8 → 1, a slight rise, and one pass of
 * a glow on the ring — deliberately one pass, not a loop, because a footer
 * that pulses forever is the thing the brief calls excessive.
 *
 * The resting state is the animated end state, so a browser without
 * IntersectionObserver (or a visitor who prefers reduced motion) sees the
 * finished composition rather than a blank circle.
 */
@keyframes hta-stat-icon-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(.8);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hta-stat-ring-glow {
	0% {
		box-shadow:
			inset 0 0 0 2px rgba(254, 236, 89, .35),
			0 0 0 6px rgba(254, 236, 89, 0),
			0 0 0 0 rgba(254, 236, 89, 0);
	}
	55% {
		box-shadow:
			inset 0 0 0 2px var(--hta-yellow),
			0 0 0 12px rgba(254, 236, 89, .16),
			0 0 40px -2px rgba(254, 236, 89, .85);
	}
	100% {
		box-shadow:
			inset 0 0 0 2px var(--hta-yellow),
			0 0 0 6px rgba(254, 236, 89, .10),
			0 0 26px -4px rgba(254, 236, 89, .55);
	}
}

.hta-site .hta-stat.is-counting .hta-stat__ring {
	animation: hta-stat-ring-glow 1.7s var(--hta-ease, ease) both;
}

.hta-site .hta-stat.is-counting .hta-stat__icon {
	animation: hta-stat-icon-in .9s var(--hta-ease, ease) both;
}

/* The label follows a beat behind the figure, which is what makes the group
   read as one movement rather than four things starting at once. */
.hta-site .hta-stat.is-counting .hta-stat__label {
	animation: hta-stat-icon-in .8s var(--hta-ease, ease) .28s both;
}

@media (prefers-reduced-motion: reduce) {

	.hta-site .hta-stat.is-counting .hta-stat__ring,
	.hta-site .hta-stat.is-counting .hta-stat__icon,
	.hta-site .hta-stat.is-counting .hta-stat__label {
		animation: none !important;
	}
}


/* -------------------------------------------------------------------------
 * 7. NEWS & UPDATES — EVERY CARD WHITE, THE LEAD INCLUDED
 *
 * The lead article was the one item in the section with no card around it:
 * image, category, date, heading, copy and Read More sat straight on the
 * page. It becomes a card built from the same three values as the list
 * beside it — white, 16px radius, one hairline border — so the two read as
 * one system.
 *
 * .hta-news / .hta-news-layout are styled in the plugin's hta-modules.css,
 * not here. That sheet is enqueued at priority 10 and this one at 20, so
 * these rules win on source order at equal specificity; the shadow, radius
 * and padding it does NOT set are added rather than fought.
 * ---------------------------------------------------------------------- */

.hta-site .hta-news-layout {
	align-items: stretch;
}

/*
 * The lead card matches the height of the list beside it, and the PHOTOGRAPH
 * absorbs the difference rather than the text block. Left to grow, the body
 * would open a band of dead space between a two-line excerpt and Read More —
 * which is what happened on the first pass. So the media is the flexible
 * track and its fixed 16/9 is dropped; the text stays packed at the bottom.
 */
.hta-site .hta-news--lead {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 14px;
	border: 1px solid var(--hta-line);
	border-radius: 16px;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(23, 32, 42, .04);
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.hta-site .hta-news--lead:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: 0 18px 40px -18px rgba(23, 32, 42, .28);
}

.hta-site .hta-news--lead .hta-news__media {
	flex: 1 1 auto;
	min-height: 300px;
	aspect-ratio: auto;
	border-radius: 12px;
}

.hta-site .hta-news--lead .hta-news__media img {
	height: 100%;
	min-height: 300px;
	object-fit: cover;
}

.hta-site .hta-news--lead .hta-news__body {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	padding: 20px 12px 8px;
}

/* The list beside it becomes a card too — it was a bare column of rows. */
.hta-site .hta-news-list {
	padding: 8px 20px;
	border: 1px solid var(--hta-line);
	border-radius: 16px;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(23, 32, 42, .04);
}

.hta-site .hta-news-list .hta-news--item {
	padding: 20px 0;
}

.hta-site .hta-news-list .hta-news--item:first-child {
	padding-top: 18px;
}

.hta-site .hta-news-list .hta-news--item:last-child {
	padding-bottom: 18px;
}

.hta-site .hta-news--item .hta-news__media {
	border-radius: 8px;
}

/* Consistent title treatment across both, and both sit on white now. */
body.hta-site.hta-site #page-container .hta-news__title {
	font-family: var(--hta-head) !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: -.005em !important;
	color: var(--hta-text);
}

.hta-site .hta-news__title a {
	color: var(--hta-text);
}

/*
 * The section ground is the "Very light grey" brand token, so the white cards
 * above read as cards. Divi writes the section's own background_color with
 * !important, so the value that actually shows is the one in the generator —
 * this only keeps the two in agreement for a page built before that change.
 */
.hta-site .hta-news-section {
	background-color: var(--hta-light-grey, #F2F4F5);
}

/* The Read More arrow picks up the brand yellow, as in the mock-up. */
.hta-site .hta-news .hta-link .hta-arrow,
.hta-site .hta-news-list .hta-link .hta-arrow {
	color: var(--hta-yellow-ink);
}


/* -------------------------------------------------------------------------
 * 8. FOOTER — THREE COLUMNS WITH DIVIDERS
 *
 *   1  HTA logo + contact details     2  Important Links     3  Subscribe
 *
 * Divi's four footer widget areas are kept, so the client still edits all of
 * this under Appearance → Widgets; the columns are those widgets re-laid-out
 * with grid. Only three carry content, and the grid is declared for three.
 *
 * Column one holds the logo beside the contact stack, which is what the
 * mock-up shows — one column, two things side by side.
 * ---------------------------------------------------------------------- */

.hta-site #main-footer {
	background-color: #021F41;
}

.hta-site #main-footer::before {
	background: linear-gradient(180deg, rgba(2, 31, 65, .90) 0%, rgba(3, 36, 74, .86) 55%, rgba(1, 24, 54, .94) 100%);
}

.hta-site #footer-widgets {
	grid-template-columns: minmax(320px, 40%) minmax(180px, 24%) 1fr;
	max-width: 1360px;
	padding: 0 24px !important;
}

.hta-site #footer-widgets .footer-widget {
	padding: 58px 40px 34px;
}

.hta-site #footer-widgets .footer-widget:first-child {
	padding-left: 0;
	justify-content: flex-start;
}

.hta-site #footer-widgets .footer-widget:last-child {
	padding-right: 0;
}

/* ---- The dividers ------------------------------------------------------ */

/*
 * Drawn on the two right-hand columns rather than as elements, so they can be
 * dropped on mobile without the markup changing. Inset top and bottom so the
 * line stops short of the bar above and the bottom rule below, which is the
 * proportion in the mock-up.
 */
.hta-site #footer-widgets .footer-widget:nth-child(2)::after,
.hta-site #footer-widgets .footer-widget:nth-child(3)::after {
	content: "";
	position: absolute;
	left: 0;
	top: 52px;
	bottom: 28px;
	width: 1px;
	background: rgba(255, 255, 255, .14);
}

/* ---- Column 1: logo beside the contact stack --------------------------- */

.hta-site #footer-widgets .footer-widget:first-child .textwidget {
	display: grid;
	grid-template-columns: 168px 1fr;
	align-items: center;
	gap: 34px;
}

.hta-site .hta-foot2__logo {
	display: block;
}

.hta-site .hta-foot2__logo img {
	display: block;
	width: 100%;
	height: auto;
	padding: 14px;
	border-radius: 6px;
	background: #FFFFFF;
}


/* -------------------------------------------------------------------------
 * 9. FOOTER CONTACT ICONS — WHITE, ON AN OUTLINED TILE
 *
 * The teal tiles from the previous reference are gone: the mock-up puts a
 * white line icon inside a tile the colour of the footer with a thin lighter
 * border. Every tile is the same size and radius, and the row is centred on
 * the icon rather than the top of the text, so a two-line address does not
 * drag its tile upwards.
 *
 * The glyphs are the same white data-URI strokes set further up — this only
 * changes the tile they sit on, so there is one definition of each icon.
 * ---------------------------------------------------------------------- */

.hta-site .hta-foot2__icon {
	width: 54px;
	height: 54px;
	flex: 0 0 54px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .28);
	background-color: rgba(255, 255, 255, .05);
	background-size: 24px 24px;
	background-position: center;
	background-repeat: no-repeat;
	transition: border-color .18s ease, background-color .18s ease;
}

.hta-site .hta-foot2__item {
	align-items: center;
	gap: 16px;
	padding-bottom: 22px;
}

.hta-site .hta-foot2__item:last-child {
	padding-bottom: 0;
}

.hta-site .hta-foot2__item:hover .hta-foot2__icon {
	border-color: var(--hta-yellow);
	background-color: rgba(254, 236, 89, .10);
}

.hta-site #footer-widgets .footer-widget:first-child .hta-foot2__label {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #FFFFFF;
	margin-bottom: 2px;
}

.hta-site #footer-widgets .footer-widget:first-child .hta-foot2__value,
.hta-site #footer-widgets .footer-widget:first-child .hta-foot2__value a {
	font-size: 15px;
	line-height: 1.45;
	color: #D7E5F0;
}


/* -------------------------------------------------------------------------
 * 10. NEWSLETTER
 * ---------------------------------------------------------------------- */

body.hta-site.hta-site #page-container #main-footer .hta-foot2__subtitle,
body.hta-site.hta-site #page-container #main-footer .widgettitle,
body.hta-site.hta-site #page-container #main-footer .hta-foot__title {
	font-family: var(--hta-head) !important;
	font-size: 21px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #FFFFFF !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
}

.hta-site .hta-sub__input {
	padding: 15px 18px;
	margin-bottom: 12px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 6px;
	background: rgba(255, 255, 255, .04);
}

/* The Subscribe button is the brand yellow with dark text — 14.82:1. */
.hta-site .hta-sub__btn,
.hta-site .hta-sub__btn:hover,
.hta-site .hta-sub__btn:focus-visible {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 20px;
	border-radius: 6px;
	background: var(--hta-yellow);
	color: var(--hta-text);
	font-family: var(--hta-head);
	font-size: 16px;
	font-weight: 600;
}

.hta-site .hta-sub__btn:hover {
	filter: brightness(.93);
}

/* The arrow of the mock-up, added here rather than in the form markup so the
   button stays a plain <button> with a plain label. */
.hta-site .hta-sub__btn::after {
	content: "";
	width: 18px;
	height: 12px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%23171717' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 6h15'/><path d='m11.5 1.5 4.5 4.5-4.5 4.5'/></svg>");
	transition: transform .18s ease;
}

.hta-site .hta-sub__btn:hover::after {
	transform: translateX(3px);
}

/* ---- The social row ---------------------------------------------------- */

/*
 * Output by [hta_social] in the subscribe widget. The URLs come from Divi's
 * own Theme Options → General → Social Media panel; the glyphs are here,
 * because the shortcode's output passes through widget content and KSES
 * strips inline SVG.
 */
.hta-site .hta-soc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}

.hta-site .hta-soc__item {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.hta-site #footer-widgets .footer-widget .hta-soc__item::before {
	display: none;
}

.hta-site .hta-soc__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .38);
	transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.hta-site .hta-soc__link:hover {
	border-color: var(--hta-yellow);
	background: rgba(254, 236, 89, .12);
	transform: translateY(-2px);
}

.hta-site .hta-soc__icon {
	width: 19px;
	height: 19px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.hta-site .hta-soc__link--facebook .hta-soc__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M13.6 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6A22 22 0 0 0 14.4 3.5c-2.4 0-4 1.45-4 4.1V9.9H7.7V13h2.7v8z'/></svg>");
}

.hta-site .hta-soc__link--instagram .hta-soc__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.2' y='3.2' width='17.6' height='17.6' rx='5'/><circle cx='12' cy='12' r='3.9'/><circle cx='17' cy='7' r='1.05' fill='%23ffffff' stroke='none'/></svg>");
}

.hta-site .hta-soc__link--linkedin .hta-soc__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M4.6 8.9h3v11h-3zM6.1 3.9a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zM10.2 8.9h2.9v1.5h.05a3.2 3.2 0 0 1 2.85-1.6c3.05 0 3.6 2 3.6 4.6v6.5h-3v-5.8c0-1.4-.25-2.75-1.9-2.75-1.6 0-1.85 1.25-1.85 2.65v5.9h-2.65z'/></svg>");
}

.hta-site .hta-soc__link--twitter .hta-soc__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M17.6 3.4h3.2l-7 8 7.4 9.2h-5.9l-4.2-5.4-4.9 5.4H3l7.3-8.3L3.2 3.4H9l4 5z'/></svg>");
}

.hta-site .hta-soc__link--youtube .hta-soc__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M21.4 8.1a2.5 2.5 0 0 0-1.75-1.75C18.1 5.9 12 5.9 12 5.9s-6.1 0-7.65.45A2.5 2.5 0 0 0 2.6 8.1 26 26 0 0 0 2.15 12a26 26 0 0 0 .45 3.9 2.5 2.5 0 0 0 1.75 1.75C5.9 18.1 12 18.1 12 18.1s6.1 0 7.65-.45a2.5 2.5 0 0 0 1.75-1.75A26 26 0 0 0 21.85 12a26 26 0 0 0-.45-3.9zM10.1 14.9V9.1l5 2.9z'/></svg>");
}

/* The copyright no longer lives in this column — item 11 moves it to the
   bottom bar. Any page still holding the old paragraph is hidden rather than
   left to duplicate it. */
.hta-site #footer-widgets .hta-foot2__copy {
	display: none;
}


/* -------------------------------------------------------------------------
 * 11. FOOTER BOTTOM BAR
 *
 * A thin rule, the copyright left, the build credit and the Joren Digital
 * mark right. This is Divi's own #footer-bottom, which the earlier footer
 * pass had hidden because the copyright then sat inside the subscribe
 * column; the mock-up puts it back down here, so it is shown again and
 * Divi's social-icon list inside it is what gets hidden instead — the social
 * row belongs in column three now.
 * ---------------------------------------------------------------------- */

.hta-site #et-footer-nav {
	display: none;
}

.hta-site #main-footer #footer-bottom {
	display: block;
	padding: 0;
	background: transparent;
}

.hta-site #main-footer #footer-bottom .container {
	width: 100%;
	max-width: 1360px;
	padding: 22px 24px 26px;
	margin: 0 auto;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.hta-site #main-footer #footer-bottom .container::before {
	display: none;
}

/* Divi's own social list; the design's row is in the subscribe column. */
.hta-site #footer-bottom .et-social-icons {
	display: none;
}

.hta-site #footer-info.hta-foot__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	float: none;
	padding: 0;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .78);
}

.hta-site .hta-foot__credit {
	color: rgba(255, 255, 255, .82);
}

.hta-site .hta-foot__legal {
	margin-left: 0;
	font-size: 14px;
}

.hta-site .hta-foot__legal::before {
	content: "|";
	margin-right: 12px;
	color: rgba(255, 255, 255, .34);
}

.hta-site .hta-foot__legal a,
.hta-site #footer-info a {
	color: rgba(255, 255, 255, .68);
	text-decoration: none;
}

.hta-site .hta-foot__legal a:hover,
.hta-site #footer-info a:hover {
	color: var(--hta-yellow);
}

.hta-site .hta-foot__build {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
	color: rgba(255, 255, 255, .78);
}

.hta-site .hta-foot__build-text {
	font-size: 15px;
}

.hta-site .hta-foot__joren-img {
	display: block;
	width: auto;
	height: 26px;
}

/*
 * The Joren Digital mark, set as type until the artwork lands: JOREN in wide
 * caps over a ruled DIGITAL, which is the composition in the mock-up. Drop
 * uploads/hta/joren-digital.png (or .svg) in place and hta_child_joren_mark()
 * uses that instead — no CSS change needed.
 */
.hta-site .hta-foot__joren {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	color: #FFFFFF;
}

.hta-site .hta-foot__joren-name {
	font-family: var(--hta-head);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hta-site .hta-foot__joren-sub {
	position: relative;
	margin-top: 5px;
	padding: 4px 0 0;
	font-family: var(--hta-head);
	font-size: 8.5px;
	font-weight: 500;
	letter-spacing: .42em;
	text-indent: .42em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .88);
	border-top: 1px solid rgba(255, 255, 255, .55);
	width: 100%;
	text-align: center;
}


/* -------------------------------------------------------------------------
 * 12. RESPONSIVE
 *
 * Laptop 1366 · tablet 1024 / 900 · phone 700 / 480. Nothing here introduces
 * a horizontal scroll: every grid collapses to fewer tracks rather than
 * keeping a minimum width, and the footer dividers become horizontal rules
 * when the columns stack, as the brief asks.
 * ---------------------------------------------------------------------- */

@media (max-width: 1200px) {

	.hta-site #footer-widgets {
		grid-template-columns: minmax(280px, 42%) minmax(160px, 22%) 1fr;
	}

	.hta-site #footer-widgets .footer-widget {
		padding: 54px 28px;
	}

	.hta-site #footer-widgets .footer-widget:first-child .textwidget {
		grid-template-columns: 132px 1fr;
		gap: 24px;
	}
}

@media (max-width: 1024px) {

	/* Contact and links share the top row, subscribe takes the second. */
	.hta-site #footer-widgets {
		grid-template-columns: 1.4fr 1fr;
	}

	.hta-site #footer-widgets .footer-widget:nth-child(3) {
		grid-column: 1 / -1;
		padding-top: 0;
	}

	/* The third column's divider is now above it, not beside it. */
	.hta-site #footer-widgets .footer-widget:nth-child(3)::after {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}

	.hta-site #footer-widgets .footer-widget:nth-child(3) {
		padding-top: 40px;
	}

	.hta-site #footer-widgets .footer-widget:nth-child(3) .hta-sub,
	.hta-site #footer-widgets .footer-widget:nth-child(3) .hta-foot2__subtitle {
		max-width: 520px;
	}
}

@media (max-width: 900px) {

	/* The counter stacks two-up; the arcs only read across a single row and
	   are already hidden at this width further up. The ring's dashed outer
	   circle would crowd the pair, so it is dropped with them. */
	.hta-site .hta-stats--ringed .hta-stat__ring::after {
		inset: -6px;
	}

	.hta-site .hta-news-list {
		padding: 8px 16px;
	}
}

@media (max-width: 780px) {

	/* Footer stacks: one column, horizontal separators, no vertical rules. */
	.hta-site #footer-widgets {
		grid-template-columns: 1fr;
	}

	.hta-site #footer-widgets .footer-widget {
		padding: 34px 0;
	}

	.hta-site #footer-widgets .footer-widget:first-child {
		padding-top: 46px;
	}

	.hta-site #footer-widgets .footer-widget:nth-child(2)::after,
	.hta-site #footer-widgets .footer-widget:nth-child(3)::after {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
		background: rgba(255, 255, 255, .14);
	}

	.hta-site #footer-widgets .footer-widget:nth-child(2),
	.hta-site #footer-widgets .footer-widget:nth-child(3) {
		padding-left: 0;
		padding-top: 34px;
	}

	.hta-site #footer-widgets .footer-widget:last-child {
		padding-bottom: 44px;
	}

	.hta-site #footer-info.hta-foot__info {
		justify-content: flex-start;
	}

	.hta-site .hta-foot__build {
		margin-left: 0;
		flex-basis: 100%;
	}

	/* The news lead card and the list below it, full width. */
	.hta-site .hta-news--lead .hta-news__body {
		padding: 18px 8px 6px;
	}
}

@media (max-width: 560px) {

	/* Logo above the contact stack rather than beside it — 132px of logo and
	   a two-line address do not both fit across a phone. */
	.hta-site #footer-widgets .footer-widget:first-child .textwidget {
		grid-template-columns: 1fr;
		justify-items: start;
		gap: 26px;
	}

	.hta-site .hta-foot2__logo img {
		width: 150px;
	}

	.hta-site .hta-foot2__icon {
		width: 46px;
		height: 46px;
		flex-basis: 46px;
		background-size: 21px 21px;
	}

	.hta-site .hta-soc__link {
		width: 38px;
		height: 38px;
	}
}

/* -------------------------------------------------------------------------
 * 12b. The hero's laptop band overflowed
 *
 * "No horizontal scrolling" turned up a pre-existing arithmetic slip rather
 * than anything in this pass. The hero row is a flex pair whose widths have
 * to sum to exactly 100% because the panel overlaps the photo with a negative
 * right margin:
 *
 *   base           panel 46% + media 62% - 8%  = 100%   ✔
 *   ≤1180px        panel 50% + media 66% - 12% = 104%   ✘  4% of overflow
 *
 * At 1024px that put the photograph's right edge 41px past the viewport and
 * gave the whole page a horizontal scrollbar. The photograph comes back to
 * 62%, which balances the wider panel and its deeper overlap.
 * ---------------------------------------------------------------------- */

@media (max-width: 1180px) {

	.hta-hero__media {
		flex-basis: 62%;
		max-width: 62%;
	}
}

/* -------------------------------------------------------------------------
 * 4b. THE EYEBROW-TO-HEADING GAP  (client: use heading.png, not the
 *     2026-08-29 pillars screenshot)
 *
 * The two references are the SAME markup rendering two different ways, and
 * the cause is a Divi default nobody set:
 *
 *     p { padding-bottom: 1em }        ← Divi's inline reset
 *     p:last-of-type { padding-bottom: 0 }
 *
 * The eyebrow is a <p>. Where the module is eyebrow + heading, the eyebrow
 * IS the last <p>, gets no padding, and pairs tightly — that is heading.png.
 * Where a .hta-lede follows the heading, the eyebrow is no longer last, so it
 * keeps 1em of padding: at its 34px size that is **34px of empty space inside
 * the paragraph box**, under the text and above the heading. That is the
 * 2026-08-29 screenshot, and it is why "Who we are", "What we do",
 * "Communication", "Networking" and "Advocacy" all sat far from their
 * headings while "Upcoming" did not.
 *
 * Margin alone could never fix it — the space was padding, inside the box.
 *
 * Measured from the references (band analysis of the ink, so it is
 * scale-free): heading.png puts 7px between the script's descenders and the
 * heading's cap line against a 33px cap height — a ratio of 0.21. The
 * screenshot to avoid measures 98px against a 64px cap: 1.53, seven times
 * too much. The rules below hold 0.21 whether or not a lede follows.
 * ---------------------------------------------------------------------- */

body.hta-site.hta-site .hta-eyebrow,
body.hta-site.hta-site #page-container .hta-eyebrow,
body.hta-site.hta-site #page-container .et_pb_text_inner .hta-eyebrow {
	padding: 0 !important;
	margin: 0 0 3px !important;
	line-height: 1.06 !important;
}

/*
 * On the gap number, because it is easy to measure wrongly: heading.png's
 * script word is "Upcoming", whose p and g DESCEND, so its 7px is measured
 * from the descender bottom. A word with no descenders — "Communication",
 * "Networking", "Advocacy" — sits about 8px higher in the same line box, so
 * the same setting correctly shows ~15px for those. Chasing 7px on a
 * descender-free word overlapped the script into the caps on "Upcoming".
 * The rule above is the reference setting; the numbers below are what it
 * measures, and both are right:
 *
 *     descenders    ("Upcoming")        ~7px
 *     no descenders ("Communication")  ~15px
 */

/* The heading takes no top offset of its own — the 3px above is the whole
   gap, and the pairing must not depend on which element follows it. */
body.hta-site.hta-site .hta-eyebrow + h1,
body.hta-site.hta-site .hta-eyebrow + h2,
body.hta-site.hta-site .hta-eyebrow + h3,
body.hta-site.hta-site .hta-eyebrow + .hta-h2,
body.hta-site.hta-site #page-container .hta-eyebrow + h1,
body.hta-site.hta-site #page-container .hta-eyebrow + h2,
body.hta-site.hta-site #page-container .hta-eyebrow + h3,
body.hta-site.hta-site #page-container .hta-eyebrow + .hta-h2 {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/*
 * The lede takes its air as its OWN margins, above and below, rather than
 * inheriting Divi's `p { padding-bottom: 1em }` — so the block reads as a
 * tight two-line heading with a separated lede beneath, the proportion in
 * heading.png.
 *
 * The bottom margin is not optional. Zeroing the padding without replacing it
 * left the lede sitting flush — a measured 0px — against whatever followed:
 * the navy counter band, the pillar row, the news grid, and the breadcrumb on
 * every inner-page hero. 30px is the space that reads as deliberate at the
 * lede's 18px, and it is set on .hta-lede itself so it holds wherever the
 * line appears rather than only after a heading.
 */
body.hta-site.hta-site #page-container .hta-h2 + .hta-lede,
body.hta-site.hta-site #page-container h2 + .hta-lede {
	margin-top: 18px !important;
}

body.hta-site.hta-site .hta-lede,
body.hta-site.hta-site #page-container .hta-lede {
	margin-bottom: 30px !important;
	padding-bottom: 0 !important;
}

/* A lede that is the last thing in its own column needs the space outside the
   column too, or the row still closes up against the next one. */
body.hta-site.hta-site #page-container .et_pb_text_inner > .hta-lede:last-child {
	margin-bottom: 30px !important;
}

/* Join form now states plainly that it creates an account — this page is the
   only route to one, and the login box points here. */
.hta-join__intro {
	margin-bottom: 26px;
}

.hta-join__intro .hta-join__title {
	margin: 0 0 10px;
	color: var(--hta-navy, #073b75);
}

.hta-join__blurb {
	margin: 0 0 16px;
	color: var(--hta-ink, #171717);
	line-height: 1.6;
}

.hta-join__steps {
	margin: 0 0 16px;
	padding-left: 20px;
	color: var(--hta-ink, #171717);
}

.hta-join__steps li {
	margin-bottom: 6px;
	line-height: 1.55;
}

.hta-join__already {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--hta-line, #e3e7ea);
	font-size: 15px;
	color: var(--hta-muted, #667085);
}

.hta-join__already a {
	font-weight: 600;
	color: var(--hta-navy, #073b75);
	text-decoration: underline;
}