/* ==========================================================================
   Andersen in Trinidad and Tobago 2026 — WordPress layer on top of the Andersen Global build.

   1. Tokens
   2. Layout / navbar offset
   3. Header additions (brand sub-line, Services mega panel)
   4. New sections (heading band, stats, pagination, FAQ, forms)
   5. Sidebar widgets
   6. Imported-content compatibility (legacy Andersen in Trinidad and Tobago markup)
   7. WordPress core classes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — mirror the SCSS variables so inline styles in imported
   content resolve to the same palette.
   -------------------------------------------------------------------------- */
:root {
	--att-red: #ab0e1e;
	--att-red-cta: #f40826;
	--att-red-alt: #bf1329;
	--att-red-dark: #8d0c18;
	--att-navy: #162d43;
	--att-navy-2: #2f4357;
	--att-blue: #226995;
	--att-slate: #243444;
	--att-gray: #a3aaae;
	--att-gray-mid: #d0d3d4;
	--att-gray-light: #ebebeb;
	--att-off-white: #f7f7f7;
	--att-gray-alt: #717c89;
	--att-ff: "Work Sans", sans-serif;
	--att-ff-body: "Roboto", sans-serif;
	--att-ff-cond: "Roboto Condensed", sans-serif;

	/* Consumed by inline styles inside imported content. */
	--slate: #717c89;
	--navy: #162d43;
	--red: #ab0e1e;
	--cta: #f40826;
	--radius: 4px;
	--radius-lg: 10px;
	--ff-head: "Work Sans", sans-serif;
	--ff-body: "Roboto", sans-serif;
}

/* --------------------------------------------------------------------------
   2. Layout — the navbar is fixed, so the page body is offset by its height.
   theme.js keeps --att-navbar-h in sync; --bpt is the design's fallback.
   -------------------------------------------------------------------------- */
.main-content {
	padding-top: var(--att-navbar-h, var(--bpt, 185px));
}

.home-page .main-content {
	padding-top: var(--att-navbar-h, var(--bpt, 185px));
}

img {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
.top-nav-bar .member-note {
	color: rgba(255, 255, 255, 0.55);
	white-space: nowrap;
}

@media (max-width: 1023px) {
	.top-nav-bar .member-note { display: none; }
}

/* Worldwide locations picker — 180 countries, so the panel sizes to the longest
   country name, opens against the right edge of the bar (li.opens-left) and
   scrolls inside the max-height app.css already sets on .locations .menu. */
.top-nav-bar .top-nav .locations .menu.worldwide {
	width: max-content;
	min-width: 100%;
	max-width: min(320px, calc(100vw - 40px));
	padding-bottom: 0.4rem;
	overscroll-behavior: contain;
}

.top-nav-bar .top-nav .locations .menu.worldwide a {
	white-space: nowrap;
}

/* Our own country in the list points at the Offices page, not the global map. */
.top-nav-bar .top-nav .locations .menu.worldwide li.is-current > a {
	color: var(--att-red);
}

/* Header type scale. The template is drawn for 1920px+ screens (20px primary
   nav links, 18px secondary links, 16px utility bar), which reads oversized and
   crowded at laptop widths. One step down on each tier, with the vertical rhythm
   tightened to match. Scoped to the desktop bar (>=75em, where .main-nav
   appears) so the off-canvas menu keeps its own larger, tap-friendly type. */
.top-nav-bar { font-size: clamp(12px, 0.7vw, 13px); }

@media print, screen and (min-width: 75em) {
	.main-bar {
		padding-top: clamp(10px, 0.85vw, 15px);
		padding-bottom: clamp(10px, 0.85vw, 15px);
	}

	.main-nav { font-size: clamp(13px, 0.92vw, 16px); }

	.main-nav .secondary-nav li a { font-size: clamp(12px, 0.85vw, 15px); }

	/* Gap between the secondary row and the primary bar (was a flat 25px). */
	.main-nav .primary-nav { margin-top: clamp(8px, 0.9vw, 15px); }

	/* Horizontal padding stays 12px so the is-current underline still lines up. */
	.main-nav ul.lvl-1 a { padding: 8px 12px !important; }
}

/* Current page in the primary bar. */
.main-nav ul.lvl-1 li.is-current > a { color: #fff; }

.main-nav ul.lvl-1 li.is-current > a::before {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 2px;
	height: 2px;
	background: var(--att-red-cta);
}

/* While its panel is open, the template gives the menu item a near-white
   background (#f9f9f9) — but the link stays white, so the label vanishes into
   its own background. On a service page the is-current rule above holds it
   white even on hover, since that selector outranks the template's :hover.
   Both states need the dark-on-light treatment the open item is drawn for. */
.main-nav ul.lvl-1 > li.is-active > a,
.main-nav ul.lvl-1 > li.is-current.is-active > a {
	color: var(--att-red);
}

.main-nav ul.lvl-1 > li { position: relative; }

/* Services mega panel — one wide dropdown instead of a 290px column.

   Foundation anchors a submenu to its parent item's left edge, and the Services
   item sits near the right of the bar, so a 980px panel runs off the screen.
   Taking the item out of the positioning context lets the panel resolve against
   the fixed .navbar instead, where it can be pinned to the bar's right gutter.
   The selector is deliberately specific: Foundation's own .opens-left rule would
   otherwise win and pull the panel back to the item. */
.main-nav ul.lvl-1 > li.has-mega { position: static; }

.main-nav ul.lvl-1 > li.has-mega > ul.lvl-2.mega {
	width: min(980px, calc(100vw - 70px));
	padding: 0;
	left: auto;
	right: 35px;
}

.main-nav ul.lvl-2.mega > li.mega-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	width: 100%;
	border-bottom: none;
	padding: 26px 30px 30px;
}

.main-nav ul.lvl-2.mega .mega-col {
	flex: 1 1 0;
	min-width: 200px;
	padding-right: 26px;
}

.main-nav ul.lvl-2.mega .mega-col + .mega-col {
	border-left: 1px solid var(--att-gray-mid);
	padding-left: 26px;
}

.main-nav ul.lvl-2.mega .mega-col h5 {
	color: var(--att-red);
	margin: 0 0 10px;
	font-family: var(--att-ff-cond);
}

.main-nav ul.lvl-2.mega .mega-col h5 a { padding: 0 !important; color: inherit; }

.main-nav ul.lvl-2.mega .mega-col .mega-link {
	display: block;
	padding: 6px 0 !important;
	font-size: 15px;
	line-height: 1.35;
	color: #464646;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.main-nav ul.lvl-2.mega .mega-col .mega-link:last-child { border-bottom: none; }
.main-nav ul.lvl-2.mega .mega-col .mega-link:hover { color: var(--att-red); }

.main-nav .lvl-1 > li.has-mega.is-open > .lvl-2 { display: block; }

/* Off-canvas panel. */
.off-canvas .mobile-menu .secondary-nav {
	list-style: none;
	margin: 24px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
   4. Sections added for WordPress
   -------------------------------------------------------------------------- */
/* Page hero. The template's 86px display heading and 150px band are drawn for
   very wide screens; this takes the whole header down a step and trims its
   padding, keeping the larger allowance on top for the absolutely-positioned
   breadcrumbs. */
.section-page_hero {
	padding-top: clamp(62px, 5.4vw, 104px);
	padding-bottom: clamp(44px, 4.6vw, 88px);
}

.section-page_hero .text {
	font-size: clamp(15px, 1.15vw, 20px);
	max-width: clamp(460px, 40vw, 780px);
}

.section-page_hero .text h1 {
	font-size: clamp(32px, 3.4vw, 62px);
	letter-spacing: clamp(-1px, -0.055vw, -0.4px);
	margin-bottom: 0.3em;
}

.section-page_hero .hero-eyebrow {
	font-family: var(--att-ff-cond);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: clamp(11px, 0.78vw, 14px);
	margin: 0 0 10px;
	color: #fff;
	opacity: 0.85;
}

.section-page_hero .hero-secondary {
	display: inline-block;
	margin-left: clamp(12px, 1.5vw, 26px);
	color: #fff !important;
}

.section-page_hero .hero-secondary:hover { color: var(--att-gray-mid) !important; }

.section-page_hero.gradient .bg::after,
.section-page_hero.gradient-diagonal .bg::after {
	content: "";
	position: absolute;
	inset: 0;
}

.section-page_hero.gradient .bg::after {
	background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(22, 45, 67, 0.6) 60%, rgba(22, 45, 67, 0.15) 100%);
}

.section-page_hero.gradient-diagonal .bg::after {
	background: linear-gradient(120deg, rgba(0, 0, 0, 0.88) 0%, rgba(34, 105, 149, 0.55) 70%, rgba(34, 105, 149, 0.15) 100%);
}

/* Home hero slider — the front page's header band. Matched to the page-hero
   scale above (the template ships flat 42px/20px copy here). */
.new_slider_one_content h3 {
	font-size: clamp(28px, 2.6vw, 40px);
	line-height: 1.15;
	margin-bottom: clamp(14px, 1.3vw, 20px);
}

.new_slider_one_content p {
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.5;
	margin-bottom: clamp(18px, 1.7vw, 26px);
}

/* Section heading band that introduces a blocks grid. */
.section-heading-band {
	background: #fff;
	padding-top: clamp(40px, 5vw, 90px);
	padding-bottom: clamp(14px, 1.6vw, 26px);
}

.section-heading-band h2 {
	color: var(--att-navy);
	font-weight: 500;
	letter-spacing: -0.035em;
	font-size: clamp(30px, 3vw, 48px);
	margin: 0 0 10px;
}

.section-heading-band p {
	font-family: var(--att-ff-body);
	max-width: 900px;
	font-size: clamp(15px, 1.1vw, 20px);
	color: var(--att-gray-alt);
	margin: 0;
}

.section-heading-band + .section-blocks { padding-top: clamp(18px, 2vw, 34px); }

/* Statistics strip. */
.section-stats {
	background: var(--att-navy);
	color: #fff;
	padding-top: clamp(34px, 3.6vw, 62px);
	padding-bottom: clamp(34px, 3.6vw, 62px);
}

.section-stats .item {
	border-left: 3px solid var(--att-red-cta);
	padding-left: 18px;
}

.section-stats .num {
	display: block;
	font-family: var(--att-ff);
	font-weight: 500;
	letter-spacing: -0.03em;
	font-size: clamp(28px, 2.8vw, 46px);
	line-height: 1.05;
}

.section-stats .lbl {
	display: block;
	margin-top: 6px;
	font-family: var(--att-ff-body);
	font-size: clamp(13px, 0.95vw, 16px);
	color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 639px) {
	.section-stats .item { margin-bottom: 22px; }
}

/* Pagination. */
.section-pagination {
	padding: clamp(30px, 4vw, 60px) 0;
	background: var(--att-off-white);
}

.section-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	justify-content: center;
}

.section-pagination a,
.section-pagination span {
	display: block;
	padding: 8px 15px;
	font-family: var(--att-ff);
	font-weight: 600;
	color: var(--att-navy);
	background: #fff;
	text-decoration: none;
}

.section-pagination .current {
	background: var(--att-red);
	color: #fff;
}

.section-pagination a:hover { background: var(--att-gray-light); }

/* FAQ accordion. */
.att-faq { margin-top: clamp(34px, 4vw, 60px); }

.att-faq > h2 {
	color: var(--att-navy);
	font-weight: 500;
	letter-spacing: -0.035em;
}

.att-faq .accordion { background: none; margin: 0; }

.att-faq .accordion-item { border-bottom: 1px solid var(--att-gray-mid); }

.att-faq .accordion-title {
	font-family: var(--att-ff);
	font-size: clamp(17px, 1.25vw, 22px);
	font-weight: 500;
	color: var(--att-navy);
	border: none;
	padding: 18px 40px 18px 0;
	line-height: 1.35;
}

.att-faq .accordion-title:hover,
.att-faq .accordion-title:focus { background: none; color: var(--att-red); }

.att-faq .accordion-title::before {
	color: var(--att-red-cta);
	font-size: 1.4em;
	right: 4px;
}

.att-faq .accordion-content {
	border: none;
	padding: 0 40px 22px 0;
	font-family: var(--att-ff-body);
}

.att-faq .accordion-content p:last-child { margin-bottom: 0; }

/* Contact form. */
.att-form { margin-top: clamp(22px, 2.5vw, 36px); }

.att-form label {
	font-family: var(--att-ff);
	font-weight: 600;
	color: var(--att-navy);
	font-size: clamp(14px, 1vw, 17px);
}

.att-form input,
.att-form select,
.att-form textarea {
	border: 1px solid var(--att-gray-mid);
	box-shadow: none;
	border-radius: 2px;
	font-family: var(--att-ff-body);
}

.att-form input:focus,
.att-form select:focus,
.att-form textarea:focus {
	border-color: var(--att-blue);
	box-shadow: none;
}

.att-form-note {
	font-size: 13px;
	color: var(--att-gray-alt);
	margin: 12px 0 0;
}

.att-form-fallback { margin-top: clamp(22px, 2.5vw, 36px); }

/* Contact Form 7 inside .att-form. */
.att-form .wpcf7-form-control-wrap { display: block; }

.att-form .wpcf7-not-valid { border-color: #c0392b; }

.att-form .wpcf7-not-valid-tip {
	display: block;
	margin: -0.6rem 0 1rem;
	font-size: 13px;
	font-weight: 400;
	color: #c0392b;
}

.att-form .wpcf7-spinner { vertical-align: middle; }

.att-form .wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-width: 1px;
	font-family: var(--att-ff-body);
	font-size: 15px;
}

.att-byline {
	font-family: var(--att-ff-cond);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 13px;
	color: var(--att-red);
	margin-bottom: 18px;
}

.att-article-main .main-column--content { max-width: 900px; }

/* --------------------------------------------------------------------------
   5. Sidebar widgets
   -------------------------------------------------------------------------- */
/* The template gives .main-column a 93-140px right gutter, which on a service
   page is empty space to the right of the widget rail - more width than the
   grid split itself costs. Halving it widens both columns; the rail needs it,
   since here it is a quarter of a column that is already three quarters of the
   page, and the CTA button had ~109px to set a label in. */
.tpl-service .section-sidebar .main-column {
	padding-right: clamp(35px, 3.6vw, 70px);
}

/* The template only ever nests .main-column-sidebar inside .main-column's
   padded sub-grid. The contact page and articles put it straight into the
   full-bleed .grid-main instead, where it has no padding at all: the widgets
   butt against the form column and run to the viewport edge. Give that rail
   the same gutters as .main-column, plus a rule to separate it from the form. */
.section-sidebar .grid-main > .cell > .main-column-sidebar {
	padding: clamp(35px, 2.6vw, 50px) clamp(35px, 3.6vw, 70px);
}

@media screen and (min-width: 64em) {
	.section-sidebar .grid-main > .cell > .main-column-sidebar {
		border-left: 1px solid var(--att-gray-mid);
		height: 100%;
	}

	.section-contact .main-column { padding-right: clamp(35px, 3.6vw, 70px); }
}

@media screen and (max-width: 63.99875em) {
	.section-sidebar .grid-main > .cell > .main-column-sidebar {
		padding: 0 35px 35px;
	}
}

.main-column-sidebar .widget + .widget { margin-top: clamp(26px, 3vw, 44px); }

.main-column-sidebar .widget > h4 {
	font-family: var(--att-ff);
	font-weight: 600;
	color: var(--att-navy);
	font-size: clamp(17px, 1.2vw, 21px);
	padding-bottom: 10px;
	border-bottom: 3px solid var(--att-red-cta);
	margin-bottom: 16px;
}

.main-column-sidebar .widget--links ul,
.main-column-sidebar .widget--offices ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-column-sidebar .widget--links li { margin-bottom: 10px; line-height: 1.35; }

.main-column-sidebar .widget--links li a {
	font-family: var(--att-ff-body);
	color: var(--att-navy);
	text-decoration: none;
	font-size: 15px;
}

.main-column-sidebar .widget--links li a:hover { color: var(--att-red); }

.main-column-sidebar .widget--cta {
	background: var(--att-navy);
	color: #fff;
	padding: 24px 22px;
}

.main-column-sidebar .widget--cta > h4 {
	color: #fff;
	border-bottom-color: var(--att-red-cta);
}

.main-column-sidebar .widget--cta p {
	font-family: var(--att-ff-body);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 18px;
}

/* Sidebar CTA button. The template's button is drawn for the hero: 24px leading
   and up to 40px of right padding to clear the diagonal wedge. In a 200-290px
   rail that leaves only ~110-180px for the label, so a service CTA like
   "Book a VAT Review" wraps to two lines and the button stands 65px tall.
   Tighter leading, a narrower wedge allowance and 14px type bring it back to
   one line at normal widths, and keep it compact when a longer label does wrap. */
.main-column-sidebar .widget--cta .button {
	font-size: 14px;
	width: 100%;
	text-align: left;
	line-height: 1.3;
	padding: 11px 24px 11px 16px;
}

.main-column-sidebar .widget--cta .button::after { width: 16px; }

.main-column-sidebar .widget--offices .item + .item { margin-top: 18px; }

.main-column-sidebar .widget--offices h5 {
	color: var(--att-navy);
	margin-bottom: 4px;
}

.main-column-sidebar .widget--offices p {
	font-family: var(--att-ff-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--att-gray-alt);
	margin: 0;
}

/* The template draws these as white cards: a 4px red rule under the photo and
   20px of padding round the name. Both survive into the compact row below and
   distort it - the rule eats into the circle, flattening its bottom into a red
   arc, and the padded white box pushes the name off the photo's centre line. */
.main-column-sidebar .widget--team .item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	background: none;
}

.main-column-sidebar .widget--team .item + .item { margin-top: 0; }

.main-column-sidebar .widget--team .item .image {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 50%;
	border-bottom: 0;
	background: var(--att-gray-light);
}

.main-column-sidebar .widget--team .item .text { padding: 0; }

/* Same 2:3 portraits as the people list, here in a 56px circle. `cover` on a
   square box scales the photo by its width, so the circle shows the middle
   16-83% of it - the chest. Anchor the crop just below the top edge and zoom
   from there, which frames the head at about half the circle's height. */
.main-column-sidebar .widget--team .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 2%;
	transform: scale(1.75);
	transform-origin: 50% 0;
}

.main-column-sidebar .widget--team .item .text h4 {
	font-size: 16px;
	margin: 0;
	color: var(--att-navy);
}

/* Service nav in the left rail. */
.section-sidebar .sidebar li.is-current > a {
	color: var(--att-red);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. Imported-content compatibility.
   The Andersen in Trinidad and Tobago pages and articles were authored against the previous
   theme's class names; these rules re-express them in the 2026 design.
   Everything is scoped to .main-content so the template components above
   keep their own styling.
   -------------------------------------------------------------------------- */
.main-content .section {
	padding-top: clamp(44px, 5vw, 96px);
	padding-bottom: clamp(44px, 5vw, 96px);
}

.main-content .section.bg-soft { background: var(--att-off-white); }

.main-content .section-head { max-width: 1000px; margin-bottom: clamp(24px, 3vw, 44px); }
.main-content .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.main-content .center { text-align: center; }

.main-content .eyebrow {
	font-family: var(--att-ff-cond);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: clamp(12px, 0.9vw, 15px);
	color: var(--att-red);
	margin: 0 0 10px;
}

.main-content .section h1,
.main-content .section h2 {
	color: var(--att-navy);
	font-weight: 500;
	letter-spacing: -0.035em;
}

.main-content .section h2 { font-size: clamp(28px, 2.8vw, 46px); }
.main-content .section h3 { color: var(--att-navy); font-weight: 500; letter-spacing: -0.02em; }

.main-content .lead {
	font-family: var(--att-ff-body);
	font-size: clamp(17px, 1.35vw, 23px);
	line-height: 1.5;
	color: var(--att-gray-alt);
}

.main-content .section p,
.main-content .section li { font-family: var(--att-ff-body); }

.main-content .section a { color: var(--att-red); }

/* Legacy grids. */
.main-content .grid {
	display: grid;
	gap: clamp(18px, 1.8vw, 30px);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.main-content .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.main-content .grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.main-content .grid-5 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Legacy cards. */
.main-content .card {
	background: #fff;
	border: 1px solid var(--att-gray-mid);
	border-top: 4px solid var(--att-red-cta);
	border-radius: 0;
	padding: clamp(20px, 2vw, 32px);
	display: block;
	text-decoration: none;
	transition: box-shadow 0.3s, transform 0.3s;
}

.main-content a.card:hover {
	box-shadow: 0 12px 30px rgba(22, 45, 67, 0.14);
	transform: translateY(-3px);
}

.main-content .card h3 { margin-top: 0; font-size: clamp(19px, 1.5vw, 25px); }
.main-content .card p { color: var(--att-gray-alt); font-size: 15px; }
.main-content .card .more {
	display: inline-block;
	margin-top: 8px;
	font-family: var(--att-ff);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--att-red-alt);
	font-size: 15px;
}

.main-content .ico {
	width: 46px;
	height: 46px;
	color: var(--att-red);
	margin-bottom: 14px;
}

.main-content .ico svg { width: 100%; height: 100%; }

/* Legacy buttons. */
.main-content .btn {
	display: inline-block;
	font-family: var(--att-ff);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	text-decoration: none !important;
	color: #fff !important;
	background: var(--att-red-cta);
	padding: 12px 34px 12px 22px;
	position: relative;
	transition: background 0.3s;
}

.main-content .btn::after {
	content: "";
	width: 22px;
	height: 100%;
	background: #000;
	opacity: 0.27;
	position: absolute;
	right: 0;
	top: 0;
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.main-content .btn:hover { background: var(--att-red-dark); }
.main-content .btn--lg { font-size: clamp(16px, 1.2vw, 21px); padding: 15px 46px 15px 28px; }
.main-content .btn--navy { background: var(--att-navy); }
.main-content .btn--navy:hover { background: var(--att-blue); }

.main-content .btn--ghost {
	background: transparent;
	border: 2px solid #fff;
}

.main-content .btn--ghost::after { display: none; }
.main-content .btn--ghost:hover { background: #fff; color: var(--att-navy) !important; }

/* Legacy inline note. The full-bleed template band keeps its own styling. */
.main-content .callout:not(.att-band) {
	background: var(--att-off-white);
	border-left: 5px solid var(--att-red-cta);
	color: var(--att-slate);
	text-align: left;
	padding: clamp(18px, 1.8vw, 28px);
	margin: clamp(24px, 2.6vw, 40px) 0;
	font-family: var(--att-ff-body);
	font-size: 1em;
}

.main-content .callout:not(.att-band) p:last-child { margin-bottom: 0; }
.main-content .callout:not(.att-band) a { color: var(--att-red); }

/* Legacy full-bleed CTA band. */
.main-content .banner {
	position: relative;
	color: #fff;
	text-align: center;
	padding: clamp(60px, 6vw, 110px) 0;
	overflow: hidden;
	background: var(--att-navy);
}

.main-content .banner > .bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.4;
	z-index: 1;
}

.main-content .banner > .container { position: relative; z-index: 2; }

.main-content .banner h2 {
	color: #fff;
	font-size: clamp(26px, 2.6vw, 44px);
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.main-content .banner p {
	color: rgba(255, 255, 255, 0.85);
	max-width: 820px;
	margin: 0 auto 24px;
	font-size: clamp(16px, 1.2vw, 21px);
}

.main-content .banner .eyebrow { color: #fff; }

/* Legacy prose + aside. */
.main-content .with-aside {
	display: grid;
	gap: clamp(26px, 3vw, 54px);
	grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
	align-items: start;
}

@media (max-width: 1023px) {
	.main-content .with-aside { grid-template-columns: 1fr; }
}

.main-content .prose { font-family: var(--att-ff-body); }
.main-content .prose h2 { margin-top: 1.4em; }

.main-content .aside-card {
	background: var(--att-navy);
	color: #fff;
	padding: clamp(20px, 2vw, 30px);
	position: sticky;
	top: calc(var(--att-navbar-h, 185px) + 20px);
}

.main-content .aside-card h3 { color: #fff; margin-top: 0; }
.main-content .aside-card ul { list-style: none; margin: 0; padding: 0; }
.main-content .aside-card li { margin-bottom: 8px; }
.main-content .aside-card a { color: #fff; }

/* Legacy pills, chips and tags. */
.main-content .pill,
.main-content .tag,
.main-content .chip {
	display: inline-block;
	font-family: var(--att-ff-cond);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	padding: 5px 12px;
	background: var(--att-gray-light);
	color: var(--att-navy);
	text-decoration: none;
}

.main-content .chip:hover { background: var(--att-red); color: #fff; }
.main-content .chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* Legacy stats. */
.main-content .stats {
	display: grid;
	gap: clamp(18px, 2vw, 32px);
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin-top: clamp(24px, 3vw, 46px);
}

.main-content .stat { border-left: 3px solid var(--att-red-cta); padding-left: 16px; }
.main-content .stat .num {
	font-family: var(--att-ff);
	font-weight: 500;
	font-size: clamp(26px, 2.4vw, 42px);
	color: var(--att-navy);
	line-height: 1.05;
}
.main-content .stat .lbl { color: var(--att-gray-alt); font-size: 15px; }

/* Legacy FAQ (details/summary) — articles that were not converted. */
.main-content .faq details {
	border-bottom: 1px solid var(--att-gray-mid);
	padding: 16px 0;
}

.main-content .faq summary {
	cursor: pointer;
	font-family: var(--att-ff);
	font-weight: 500;
	font-size: clamp(17px, 1.2vw, 21px);
	color: var(--att-navy);
}

.main-content .faq .ans { padding-top: 12px; font-family: var(--att-ff-body); }

/* Legacy hub list. */
.main-content .hublist { list-style: none; margin: 0; padding: 0; }

.main-content .hub-item {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: clamp(16px, 2vw, 30px);
	padding: clamp(18px, 2vw, 30px) 0;
	border-bottom: 1px solid var(--att-gray-mid);
}

@media (max-width: 639px) {
	.main-content .hub-item { grid-template-columns: 1fr; }
}

.main-content .hub-item .thumb {
	background: var(--att-navy);
	min-height: 120px;
	display: flex;
	align-items: flex-start;
	padding: 14px;
}

.main-content .hub-item .thumb .pill { background: var(--att-red); color: #fff; }

/* Our People — the imported markup already matches the template component,
   these fill in the pieces the template does not ship. */
.main-content .people-intro { max-width: 900px; margin-bottom: clamp(26px, 3vw, 46px); }

/* People list. The Andersen in Trinidad and Tobago headshots are 2:3 portraits, and the template's
   strip is a wide 150x90 letterbox, so `object-fit: cover` centred vertically
   scales the photo to ~2.9x the strip height and crops the middle - which is
   the chest, not the face. Anchoring the crop to the top keeps the head. */
.main-content .people-list .item-img > span img {
	object-position: center top;
}

/* On phones the strip is full width, where 120px of a portrait photo is a band
   across the chest even when top-anchored. Enough height for head and shoulders. */
@media print, screen and (max-width: 39.99875em) {
	.main-content .people-list .item-img { height: 200px; }
}

.main-content .people-list .item-more {
	display: block;
	font-family: var(--att-ff);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--att-red-alt);
	margin-top: 6px;
}

.person-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(10, 16, 22, 0.75);
	padding: 5vh 20px;
	overflow-y: auto;
}

.person-modal.is-open { display: block; }

.person-modal .profile-card {
	background: #fff;
	max-width: 780px;
	margin: 0 auto;
	position: relative;
}

.person-modal .profile-header {
	background: var(--att-navy);
	padding: 16px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.person-modal .profile-header img { max-width: 150px; filter: brightness(0) invert(1); }

.person-modal .modal-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	padding: 0 6px;
}

.person-modal .profile-image img {
	width: 100%;
	max-height: 380px;
	object-fit: cover;
	object-position: top center;
}

.person-modal .profile-content { padding: clamp(20px, 2.4vw, 36px); font-family: var(--att-ff-body); }
.person-modal .profile-content h2 { color: var(--att-navy); font-weight: 500; margin-top: 0; }
.person-modal .profile-content .role {
	font-family: var(--att-ff-cond);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--att-red);
	font-size: 13px;
}

/* Legacy split section and service blocks. */
.main-content .split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	align-items: center;
}

.main-content .split.bg-navy { background: var(--att-navy); color: #fff; }
.main-content .split.bg-navy h2,
.main-content .split.bg-navy .lead { color: #fff; }
.main-content .split .media img { width: 100%; height: 100%; object-fit: cover; }
.main-content .split .body { padding: clamp(28px, 4vw, 70px); }

.main-content .svc-block {
	display: block;
	text-decoration: none;
	background: #fff;
	border-bottom: 4px solid var(--att-red-cta);
}

.main-content .svc-block img { width: 100%; height: 220px; object-fit: cover; }
.main-content .svc-block h3 { margin: 18px 18px 8px; }
.main-content .svc-block p { margin: 0 18px 12px; color: var(--att-gray-alt); font-size: 15px; }
.main-content .svc-block .more {
	display: inline-block;
	margin: 0 18px 20px;
	font-family: var(--att-ff);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--att-red-alt);
	font-size: 15px;
}

/* Legacy hero blocks (only reachable if content is pasted from the old theme). */
.main-content .hero { position: relative; background: var(--att-navy); color: #fff; padding: clamp(60px, 7vw, 130px) 0; }
.main-content .hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.main-content .hero > .container { position: relative; z-index: 2; }
.main-content .hero h1 { color: #fff; }
.main-content .hero-card { background: rgba(0, 0, 0, 0.45); padding: 24px; }
.main-content .hero-card h3 { color: #fff; }

/* Legacy contact form grid. */
.main-content .form-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.main-content .form-grid .full { grid-column: 1 / -1; }
.main-content .form-grid label { display: block; font-family: var(--att-ff); font-weight: 600; margin-bottom: 6px; }
.main-content .form-grid input,
.main-content .form-grid select,
.main-content .form-grid textarea {
	width: 100%;
	border: 1px solid var(--att-gray-mid);
	padding: 10px 12px;
	font-family: var(--att-ff-body);
}

/* --------------------------------------------------------------------------
   7. WordPress core classes
   -------------------------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.main-content .alignleft { float: left; margin: 0 24px 18px 0; }
.main-content .alignright { float: right; margin: 0 0 18px 24px; }
.main-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.main-content .wp-caption { max-width: 100%; }
.main-content .wp-caption-text { font-style: italic; font-size: 14px; color: var(--att-gray-alt); }

.admin-bar .navbar { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .navbar { top: 46px; }
}