/* ==========================================================================
   ATEH LAW — home page components
   Loaded after style.css; all colours come from the tokens defined there.
   ========================================================================== */

/* --- Shared helpers ------------------------------------------------------ */
.ateh-center,
.ateh-center p,
.ateh-center h1, .ateh-center h2, .ateh-center h3 { text-align: center; }
.ateh-center .et_pb_text_inner { text-align: center; }

.ateh-gold { color: var(--ateh-gold-bright); }

/* Centred section headers sit in a max-w-3xl (768px) measure in the design. */
.ateh-values .ateh-center,
.ateh-commit .ateh-center {
	max-width: 768px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.ateh-lede p {
	margin: 0 auto;
	max-width: 768px;
	font-size: 16px !important;
	line-height: 1.625;
}
.ateh-practice .ateh-lede p,
.ateh-advantage .ateh-lede p { margin-left: 0; max-width: none; }

/* --- Section header rhythm ------------------------------------------------
   Divi gives every module a ~30px bottom margin. The centred section headers
   are space-y-4 (16px) in the design, and the advantage column is space-y-6
   (24px) with pt-2 extra above its button.
   ------------------------------------------------------------------------ */
.ateh-values > .et_pb_row:first-of-type .et_pb_module,
.ateh-practice > .et_pb_row:first-of-type .et_pb_module,
.ateh-commit > .et_pb_row:first-of-type .et_pb_module {
	margin-bottom: 16px !important;
}
.ateh-values > .et_pb_row:first-of-type .et_pb_module:last-child,
.ateh-practice > .et_pb_row:first-of-type .et_pb_module:last-child,
.ateh-commit > .et_pb_row:first-of-type .et_pb_module:last-child {
	margin-bottom: 0 !important;
}

.ateh-advantage > .et_pb_row:first-of-type .et_pb_column:first-child .et_pb_module {
	margin-bottom: 24px !important;
}
.ateh-advantage > .et_pb_row:first-of-type .et_pb_column:first-child .et_pb_module:last-child {
	margin-bottom: 0 !important;
}
/* pt-2 on the button row. Needs to match the column selector's depth above,
   otherwise the 24px rhythm rule outranks it. */
.ateh-advantage > .et_pb_row:first-of-type .et_pb_column:first-child .ateh-pullquote {
	margin-bottom: 32px !important;
}

/* --- Call-to-action links styled as buttons ------------------------------ */
/* Generic button row. Deliberately carries NO horizontal offset — the home
   hero's 32px inset belongs to the hero alone and must not leak into other
   sections' button rows. */
.ateh-btnrow p,
.ateh-hero__actions p,
.ateh-letstalk__buttons p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
}

/* The row is a flex container, so text-align can't centre it — pair
   .ateh-center with a button row to get a centred CTA. */
.ateh-btnrow.ateh-center p,
.ateh-hero__actions.ateh-center p { justify-content: center; }

/* --- Button pairs ---------------------------------------------------------
   Divi wraps every Button module in its own full-width block, so two buttons
   in one column stack vertically. Divi 4 exposes no flex-container primitive,
   so this is the single layout rule that cannot come from module settings.
   Add `ateh-btnpair` to the COLUMN; everything else stays a module setting.
   ------------------------------------------------------------------------ */
.ateh-btnpair .et_pb_button_module_wrapper {
	display: inline-block;
	vertical-align: top;
	margin: 0 12px 0 0 !important;
}

/* Design spec: text-[10px] font-bold tracking-widest (0.1em), px-8 py-3.5.
   Anything wider makes the paired CTAs wrap out of their column. */
.ateh-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ateh-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	/* Explicit line-height: otherwise the parent text module's 1.75em leaks in
	   and the buttons render ~15px taller than the design. */
	line-height: 1.5;
	padding: 14px 32px;
	border: 1px solid transparent;
	border-radius: var(--ateh-radius);
	transition: var(--ateh-transition);
	white-space: nowrap;
}

/* Secondary buttons carry px-6 rather than px-8. */
.ateh-cta--ghost,
.ateh-cta--outline { padding-left: 24px; padding-right: 24px; }

/* Primary CTAs end with a chevron in the design. */
.ateh-cta--arrow::after {
	content: "\000035";
	font-family: 'ETmodules';
	font-weight: normal;
	letter-spacing: 0;
	margin-left: 10px;
	font-size: 13px;
	line-height: 1;
}

/* The home hero is the one place using the larger text-xs / 0.2em treatment. */
.ateh-hero .ateh-cta { font-size: 12px; letter-spacing: 0.2em; }
.ateh-cta--gold {
	background: linear-gradient(90deg, var(--ateh-gold) 0%, var(--ateh-gold-bright) 100%);
	color: var(--ateh-navy-deep);
}
.ateh-cta--gold:hover { background: linear-gradient(90deg, var(--ateh-gold-deep) 0%, var(--ateh-gold) 100%); }
.ateh-cta--ghost { border-color: rgba(203, 213, 225, 0.5); color: var(--ateh-white); }
.ateh-cta--ghost:hover { border-color: var(--ateh-silver); background: rgba(255, 255, 255, 0.06); }
.ateh-cta--navy { background: var(--ateh-navy); color: var(--ateh-white); }
.ateh-cta--navy:hover { background: var(--ateh-navy-soft); }
.ateh-cta--light { background: var(--ateh-white); color: var(--ateh-navy); }
.ateh-cta--light:hover { background: var(--ateh-silver-pale); }
.ateh-cta--plain {
	background: transparent;
	color: var(--ateh-silver);
	padding-left: 0;
	padding-right: 0;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.ateh-cta--plain:hover { color: var(--ateh-white); }

/* ==========================================================================
   HERO
   ========================================================================== */

.ateh-hero { position: relative; overflow: hidden; }

/* Dark scrim so the skyline never fights the headline. */
.ateh-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--ateh-navy-deep) 8%, rgba(10, 17, 31, 0.82) 46%, rgba(10, 17, 31, 0.25) 100%),
		linear-gradient(180deg, rgba(10, 17, 31, 0.5) 0%, transparent 35%, var(--ateh-navy-deep) 100%);
	pointer-events: none;
	z-index: 0;
}
.ateh-hero .et_pb_row { position: relative; z-index: 1; }
.ateh-hero .et_pb_column { max-width: 640px; }

.ateh-hero__title {
	border-left: 4px solid var(--ateh-gold);
	padding-left: 28px;
	margin-bottom: 26px !important;
}
.ateh-hero__title h1 {
	font-family: var(--ateh-font-display);
	font-weight: 600;
	font-size: clamp(34px, 4.6vw, 60px);
	line-height: 1.14;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	color: var(--ateh-white);
	padding: 0;
}
/* The 32px inset aligns the home hero's copy with the gold accent bar.
   Scoped to .ateh-hero so it can never affect other pages' button rows. */
.ateh-hero .ateh-hero__sub { padding-left: 32px; margin-bottom: 30px !important; }
.ateh-hero .ateh-hero__sub p { max-width: 520px; }
.ateh-hero .ateh-hero__actions { padding-left: 32px; }

/* ==========================================================================
   PILLARS BANNER
   ========================================================================== */

.ateh-pillarbar .et_pb_column { display: flex; align-items: center; }
.ateh-pillarbar__list p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 0;
	font-family: var(--ateh-font-display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ateh-silver);
}
.ateh-pillarbar__list .ateh-sep { color: var(--ateh-gold); font-weight: 300; }
.ateh-pillarbar__promise p {
	margin: 0;
	text-align: right;
	font-size: 15px;
	letter-spacing: 0.04em;
}

/* ==========================================================================
   VALUE PILLAR CARDS
   ========================================================================== */

/* Divi lays columns out as floats, so cards in a row end up ragged. Making the
   row a flex container stretches every card to the tallest one, which is what
   lets the card footers line up.

   Divi's own gutter is a percentage, so it can't hit the design's fixed 24px
   gap. Overriding the column widths with calc() gives the exact grid. */
.et_pb_row.ateh-values__grid,
.et_pb_row.ateh-parow,
.et_pb_row.ateh-why {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 24px;
}
.ateh-values__grid .et_pb_column,
.ateh-parow .et_pb_column,
.ateh-why .et_pb_column {
	margin: 0 !important;
	float: none;
}
.ateh-values__grid .et_pb_column { width: calc((100% - 72px) / 4) !important; }
.ateh-why .et_pb_column          { width: calc((100% - 96px) / 5) !important; }
.ateh-parow .et_pb_column        { width: calc((100% - 24px) / 2) !important; }
.et_pb_row.ateh-parow:has(.et_pb_column:nth-child(3)) .et_pb_column {
	width: calc((100% - 48px) / 3) !important;
}

.ateh-pillar {
	background: var(--ateh-surface);
	border: 1px solid var(--ateh-border);
	padding: 32px !important;
	display: flex;
	flex-direction: column;
	transition: var(--ateh-transition);
}
.ateh-pillar:hover {
	border-color: var(--ateh-gold);
	box-shadow: var(--ateh-shadow-hover);
	transform: translateY(-3px);
}
.ateh-pillar .et_pb_module { margin-bottom: 0 !important; }

.ateh-pillar .ateh-pillar__icon { margin-bottom: 24px !important; }
.ateh-pillar__icon p { margin: 0; line-height: 1; }
.ateh-pillar__icon.ateh-ico::before {
	margin: 0;
	font-size: 24px;
	color: var(--ateh-gold);
	width: 48px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	background: rgba(197, 160, 89, 0.10);
	border: 1px solid rgba(197, 160, 89, 0.30);
}
.ateh-pillar__kicker p {
	margin: 0 0 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ateh-slate-400);
	line-height: 1.6;
}
.ateh-pillar__title h3 {
	font-family: var(--ateh-font-body);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ateh-navy);
	padding: 0 0 8px;
}
.ateh-pillar__body p {
	margin: 0;
	font-size: 12px;
	line-height: 1.75;
	color: var(--ateh-slate-500);
}
.ateh-pillar__foot {
	margin-top: auto !important;
	padding-top: 24px;
}
.ateh-pillar__foot p {
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid var(--ateh-silver-pale);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ateh-slate-400);
}
.ateh-pillar__foot p::after {
	content: "\000024";
	font-family: 'ETmodules';
	float: right;
	color: var(--ateh-gold);
	letter-spacing: 0;
}

/* --- Founder quote band --------------------------------------------------- */
.ateh-quoteband {
	background: var(--ateh-surface);
	border: 1px solid var(--ateh-border);
	box-shadow: var(--ateh-shadow);
	padding: 40px !important;
	text-align: center;
}
.ateh-quoteband .et_pb_module { margin-bottom: 0 !important; }
.ateh-quoteband__text p {
	margin: 0 auto 12px;
	max-width: 896px;
	font-size: 30px;
	line-height: 1.2;
	text-align: center;
}
.ateh-quoteband__attr p {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ateh-slate-400);
	text-align: center;
}

/* ==========================================================================
   PRACTICE AREA CARDS
   ========================================================================== */

.ateh-practice__cta { justify-content: flex-end; align-items: flex-end; display: flex !important; }
.ateh-practice__cta .ateh-hero__actions p { justify-content: flex-end; }

.ateh-pa {
	background: var(--ateh-surface);
	border: 1px solid var(--ateh-border);
	padding: 28px 26px !important;
	display: flex;
	flex-direction: column;
	transition: var(--ateh-transition);
}
.ateh-pa:hover {
	border-color: var(--ateh-gold);
	box-shadow: var(--ateh-shadow-hover);
	transform: translateY(-3px);
}
.ateh-pa .et_pb_module { margin-bottom: 0 !important; }

.ateh-pa__head p {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 20px;
}
.ateh-pa__icon.ateh-ico::before {
	margin: 0;
	font-size: 20px;
	color: var(--ateh-gold);
	width: 42px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	background: rgba(197, 160, 89, 0.10);
	border: 1px solid rgba(197, 160, 89, 0.30);
}
.ateh-badge-inline {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ateh-gold);
	background: rgba(197, 160, 89, 0.10);
	border: 1px solid rgba(197, 160, 89, 0.32);
	padding: 5px 9px;
	line-height: 1;
	white-space: nowrap;
}
.ateh-pa__title h3 {
	font-family: var(--ateh-font-body);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ateh-navy);
	padding: 0 0 6px;
}
.ateh-pa__tag p {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--ateh-slate-500);
}
.ateh-pa__body p {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.75;
	color: var(--ateh-slate-500);
}
.ateh-pa .ateh-pa__list { margin-bottom: 18px !important; }
.ateh-pa__list p {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--ateh-border);
	font-size: 12px;
	color: var(--ateh-slate-600);
}
.ateh-pa__list .ateh-ico::before { color: var(--ateh-gold); font-size: 13px; }

.ateh-pa__links {
	margin-top: auto !important;
	padding-top: 18px;
}
.ateh-pa__links p {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--ateh-border);
}
.ateh-pa__links a {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ateh-navy);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.ateh-pa__links a::after {
	content: "\000024";
	font-family: 'ETmodules';
	margin-left: 6px;
	color: var(--ateh-gold);
	letter-spacing: 0;
	font-size: 12px;
}
.ateh-pa__links a:hover { color: var(--ateh-gold-deep); }

/* ==========================================================================
   ADVANTAGE
   ========================================================================== */

.ateh-pullquote {
	background: var(--ateh-white);
	border: 1px solid var(--ateh-border);
	border-left: 4px solid var(--ateh-gold);
	padding: 16px;
	margin-bottom: 24px !important;
}
.ateh-pullquote p { margin: 0; font-size: 14px; }

.ateh-advantage__media { position: relative; }
.ateh-advantage__img {
	border: 1px solid var(--ateh-border);
	background: var(--ateh-white);
	padding: 8px;
	box-shadow: var(--ateh-shadow);
	margin-bottom: 0 !important;
}
.ateh-advantage__img .et_pb_image_wrap { display: block; }
.ateh-advantage__img img {
	width: 100%;
	height: 384px;
	object-fit: cover;
	display: block;
}
.ateh-advantage__caption {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	background: var(--ateh-navy);
	border: 1px solid var(--ateh-navy-darkest);
	box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.55);
	padding: 16px;
	margin: 0 !important;
}
.ateh-advantage__caption p { display: flex; align-items: center; margin: 0; }
.ateh-advantage__mark {
	width: 40px;
	height: 40px;
	background: var(--ateh-white);
	color: var(--ateh-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 20px;
	margin-right: 16px;
	flex: none;
}
.ateh-advantage__captiontext { display: inline-flex; flex-direction: column; line-height: 1.4; }
.ateh-advantage__captiontext strong {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ateh-white);
}
.ateh-advantage__captiontext em {
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ateh-slate-400);
	margin-top: 3px;
}

/* --- Why choose us -------------------------------------------------------- */
.ateh-whycard {
	background: var(--ateh-surface);
	border: 1px solid var(--ateh-border);
	padding: 24px !important;
	transition: var(--ateh-transition);
}
.ateh-whycard:hover { border-color: var(--ateh-gold); box-shadow: var(--ateh-shadow-hover); }
.ateh-whycard .et_pb_module { margin-bottom: 0 !important; }
.ateh-whycard .ateh-whycard__icon { margin-bottom: 16px !important; }
.ateh-whycard__icon p { margin: 0; line-height: 1; }
.ateh-whycard__icon.ateh-ico::before {
	margin: 0;
	font-size: 19px;
	color: var(--ateh-gold);
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: rgba(197, 160, 89, 0.10);
	border: 1px solid rgba(197, 160, 89, 0.30);
}
.ateh-whycard__title h4 {
	font-family: var(--ateh-font-body);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ateh-navy);
	padding: 0 0 4px;
}
.ateh-whycard__sub p {
	margin: 0 0 16px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ateh-slate-400);
}
.ateh-whycard__body p {
	margin: 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--ateh-slate-500);
}

/* ==========================================================================
   LET'S TALK
   ========================================================================== */

.ateh-letstalk__quote p {
	margin: 0 0 16px;
	font-size: clamp(24px, 3vw, 34px);
	color: var(--ateh-white) !important;
}
.ateh-letstalk__body p { max-width: 560px; margin: 0 0 20px; }
.ateh-letstalk__meta p {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ateh-slate-400);
}
.ateh-letstalk__meta .ateh-ico::before { color: var(--ateh-gold); }
.ateh-letstalk__actions { display: flex !important; align-items: center; }
.ateh-letstalk__buttons p { flex-direction: column; align-items: stretch; width: 100%; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
	.ateh-why .et_pb_column { width: 31.3% !important; margin-right: 3% !important; margin-bottom: 24px !important; }
	.ateh-why .et_pb_column:nth-child(3n) { margin-right: 0 !important; }
}

@media (max-width: 980px) {
	.ateh-hero .et_pb_column { max-width: 100%; }
	.ateh-pillarbar .et_pb_column { display: block; }
	.ateh-pillarbar__list p { justify-content: center; }
	.ateh-pillarbar__promise p { text-align: center; margin-top: 10px; }
	.ateh-values__grid .et_pb_column,
	.ateh-parow .et_pb_column { margin-bottom: 24px !important; }
	.ateh-practice__cta { justify-content: flex-start; margin-top: 20px; }
	.ateh-practice__cta .ateh-hero__actions p { justify-content: flex-start; }
	.ateh-advantage__media { margin-top: 30px; }
	.ateh-why .et_pb_column { width: 48% !important; margin-right: 4% !important; }
	.ateh-why .et_pb_column:nth-child(3n) { margin-right: 4% !important; }
	.ateh-why .et_pb_column:nth-child(2n) { margin-right: 0 !important; }
	.ateh-letstalk__actions { margin-top: 26px; }
}

@media (max-width: 767px) {
	.ateh-hero__title { padding-left: 18px; border-left-width: 3px; }
	.ateh-hero__sub, .ateh-hero__actions { padding-left: 21px; }
	.ateh-hero__actions p .ateh-cta { width: 100%; }
	.ateh-why .et_pb_column { width: 100% !important; margin-right: 0 !important; }
	.ateh-pa__head p { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   RESPONSIVE — GRID OVERRIDES
   --------------------------------------------------------------------------
   The calc() column widths above carry !important so they beat Divi's own
   float widths. That also means Divi's responsive rules can't reclaim them,
   so every grid needs an explicit override at each breakpoint or it stays
   at its desktop column count on a phone.
   ========================================================================== */

/* --- Tablet: 4-up and 5-up collapse to 2-up, 3-up stays --------------- */
@media (max-width: 1100px) {
	.ateh-values__grid .et_pb_column { width: calc((100% - 24px) / 2) !important; }
	.ateh-why .et_pb_column          { width: calc((100% - 48px) / 3) !important; margin: 0 !important; }
}

/* --- Small tablet: everything to 2-up --------------------------------- */
@media (max-width: 980px) {
	.ateh-values__grid .et_pb_column,
	.ateh-why .et_pb_column,
	.ateh-parow .et_pb_column,
	.et_pb_row.ateh-parow:has(.et_pb_column:nth-child(3)) .et_pb_column {
		width: calc((100% - 24px) / 2) !important;
		margin: 0 !important;
	}
}

/* --- Phone: single column across the board ---------------------------- */
@media (max-width: 767px) {
	.ateh-values__grid .et_pb_column,
	.ateh-why .et_pb_column,
	.ateh-parow .et_pb_column,
	.et_pb_row.ateh-parow:has(.et_pb_column:nth-child(3)) .et_pb_column,
	.ateh-quoteband,
	.ateh-advantage__media {
		width: 100% !important;
		margin: 0 !important;
	}

	/* Nothing may exceed the viewport. */
	.ateh-hero .et_pb_column { max-width: 100%; }
	.ateh-pillarbar__list p { justify-content: center; gap: 10px; }
	.ateh-quoteband__text p { font-size: 22px; }
	.ateh-letstalk__quote p { font-size: 24px; }
}

/* Guard: no section may push the page wider than the screen. */
@media (max-width: 980px) {
	.et_pb_section, .et_pb_row, .et_pb_column { max-width: 100%; }
	img { max-width: 100%; height: auto; }
}