/* Site Builder — Law Firm Contact page styles */

.sb-lf-ct {
	--sb-ct-gold: #c9a227;
	--sb-ct-navy: #0f1830;
	--sb-ct-ivory: #f7f4ec;
	--sb-ct-line: rgba(15, 24, 48, 0.12);
	--sb-ct-scrim: rgba(8, 13, 26, 0.82);
	position: relative;
	width: 100%;
	background-color: var(--sb-ct-ivory);
	color: #2c2a26;
	font-family: var(--sb-font-sans);
	overflow-x: clip;
}

.sb-lf-ct * {
	box-sizing: border-box;
}

.sb-lf-stretch {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.sb-lf-ct-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}

/* ---------------------------------------------------------------------
   Banner

   The photograph is a real <img> with object-fit rather than a CSS
   background, so the focal point can be moved per breakpoint from the
   Elementor control. That matters here: the banner is a ~3:1 letterbox on
   desktop but nearly square on a phone, and the source photo is 3:2 — one
   fixed crop cannot keep both Milad and the client in frame at both
   shapes, which is exactly how the old fixed `center left` background lost
   most of the picture.
   --------------------------------------------------------------------- */
/* min-height, not height: on a phone the copy needs more room than the
   fixed height allowed, and the banner was clipping it. The Banner Height
   control is a floor now, so the band can grow when the wording is long. */
.sb-lf-ct-banner {
	position: relative;
	display: flex;
	min-height: 560px;
	overflow: hidden;
	background: var(--sb-ct-navy);
}

.sb-lf-ct-banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
	display: block;
}

.sb-lf-ct-banner-overlay,
.sb-lf-ct-banner-scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Kept from the original design — an even wash that ties the photo to the
   rest of the palette. */
.sb-lf-ct-banner-overlay {
	background: rgba(10, 16, 30, 0.52);
}

/* The scrim is separate and directional: it darkens only the empty wall on
   the left where the copy sits, and fades out well before it reaches the
   two faces. Darkening the whole frame further would have dulled the
   photograph, which is the one thing on this page that has to stay legible. */
.sb-lf-ct-banner-scrim {
	background: linear-gradient(
		100deg,
		var(--sb-ct-scrim) 0%,
		var(--sb-ct-scrim) 26%,
		rgba(8, 13, 26, 0.45) 44%,
		rgba(8, 13, 26, 0) 62%
	);
}

.sb-lf-ct-banner-inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	/* flex child of the banner, so it still fills the full height even though
	   that height is now a minimum rather than a fixed value. */
	flex: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}

/* Hard ceiling on the copy width, not a stylistic choice: the banner is
   always wider than the photo's 3:2, so the image is scaled to fit the width
   and never cropped horizontally — which fixes Milad at ~38% across at every
   desktop size. The text column has to stop short of that line, so it is
   capped both absolutely and as a share of the viewport. */
.sb-lf-ct-banner-text {
	max-width: min(360px, 28vw);
}

/* Past these widths the centred 1200px column would push the copy rightwards
   faster than the photo moves, walking the text back into Milad's face — so
   the banner column widens to keep the copy pinned near the left edge. */
@media (min-width: 1500px) {
	.sb-lf-ct-banner-inner { max-width: 1500px; }
}

@media (min-width: 1900px) {
	.sb-lf-ct-banner-inner { max-width: 1800px; }
}

.sb-lf-ct-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 18px;
	color: #d8b451;
	font-family: var(--sb-font-serif);
	font-style: italic;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: var(--sb-hero-eyebrow-tracking);
	text-transform: uppercase;
}

.sb-lf-ct-eyebrow-icon {
	width: 17px;
	height: 17px;
	flex: none;
}

/* Page hero — matched to the homepage hero headline. */
.sb-lf-ct-banner-heading {
	margin: 0;
	color: #ffffff;
	font-family: var(--sb-font-serif);
	text-transform: uppercase;
	font-weight: var(--sb-hero-title-weight);
	font-size: var(--sb-hero-title-size);
	line-height: var(--sb-hero-title-leading);
	letter-spacing: var(--sb-hero-title-tracking);
}

.sb-lf-ct-banner-text p {
	margin: 20px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 16px;
	line-height: 1.75;
}

/* ---------------------------------------------------------------------
   Shared section furniture
   --------------------------------------------------------------------- */
.sb-lf-ct-h2 {
	margin: 0;
	color: var(--sb-ct-navy);
	font-family: var(--sb-font-serif);
	font-weight: 600;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.2;
}

.sb-lf-ct-rule {
	display: block;
	width: 64px;
	height: 2px;
	margin: 18px auto 0;
	background: var(--sb-ct-gold);
}

.sb-lf-ct-rule-left {
	margin-left: 0;
	margin-right: auto;
	width: 48px;
}

.sb-lf-ct-rule-top {
	margin: 0 auto 22px;
}

.sb-lf-ct-lede {
	margin: 20px auto 0;
	max-width: 680px;
	color: #5a5750;
	font-size: 16.5px;
	line-height: 1.78;
}

/* ---------------------------------------------------------------------
   Main section — form + panel
   --------------------------------------------------------------------- */
.sb-lf-ct-main {
	padding: clamp(56px, 7vw, 92px) 0 clamp(56px, 7vw, 88px);
}

.sb-lf-ct-intro {
	text-align: center;
	margin-bottom: clamp(36px, 4vw, 54px);
}

/* Two thirds / one third, and `align-items: start` so the panel's top edge
   lines up with the form's rather than stretching to match its height. */
/* The custom property carries the whole `<flex>` value (e.g. `2fr`), not a
   bare number — `fr` cannot be produced by concatenation or calc(), so
   splitting it would silently invalidate the whole declaration and drop the
   grid back to a single stacked column. `minmax(0, …)` stops the long
   textarea and select contents from forcing the form column wider than its
   share. */
.sb-lf-ct-grid {
	display: grid;
	grid-template-columns: minmax(0, var(--sb-ct-form-fr, 2fr)) minmax(0, 1fr);
	align-items: start;
	gap: clamp(20px, 2.4vw, 32px);
}

.sb-lf-ct-card {
	background: #ffffff;
	border: 1px solid var(--sb-ct-line);
	border-radius: 10px;
	box-shadow: 0 18px 40px -30px rgba(15, 24, 48, 0.5);
	padding: clamp(26px, 3vw, 40px);
}

/* Form fields */
.sb-lf-ct-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 20px;
}

.sb-lf-ct-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sb-lf-ct-field-full {
	margin-top: 18px;
}

.sb-lf-ct-label {
	margin-bottom: 7px;
	color: #4a4742;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.sb-lf-ct-req {
	margin-left: 3px;
	color: var(--sb-ct-gold);
}

.sb-lf-ct-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--sb-ct-line);
	border-radius: 6px;
	background: #fdfcf9;
	color: var(--sb-ct-navy);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Restrained focus treatment: the border moves to gold and picks up a
   1px ring of the same colour — no glow. */
.sb-lf-ct-input:focus {
	outline: none;
	border-color: var(--sb-ct-gold);
	background: #ffffff;
	box-shadow: 0 0 0 1px var(--sb-ct-gold);
}

.sb-lf-ct-field:focus-within .sb-lf-ct-label {
	color: var(--sb-ct-navy);
}

.sb-lf-ct-textarea {
	resize: vertical;
	min-height: 120px;
}

.sb-lf-ct-select-wrap {
	position: relative;
}

.sb-lf-ct-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	cursor: pointer;
}

.sb-lf-ct-chevron {
	position: absolute;
	top: 50%;
	right: 13px;
	width: 17px;
	height: 17px;
	margin-top: -8.5px;
	color: #8a867d;
	pointer-events: none;
	transition: color 0.25s ease, transform 0.25s ease;
}

.sb-lf-ct-select-wrap:focus-within .sb-lf-ct-chevron {
	color: var(--sb-ct-gold);
}

/* An option hidden by the Area-of-Law filter — see law-firm-contact.js */
.sb-lf-ct-select option[hidden] {
	display: none;
}

/* Choice pills */
.sb-lf-ct-choices {
	margin: 22px 0 0;
	padding: 0;
	border: 0;
}

.sb-lf-ct-choices .sb-lf-ct-label {
	display: block;
	padding: 0;
}

.sb-lf-ct-choice-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sb-lf-ct-choice {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border: 1px solid var(--sb-ct-line);
	border-radius: 999px;
	background: #fdfcf9;
	color: #4a4742;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.sb-lf-ct-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sb-lf-ct-choice:hover {
	border-color: var(--sb-ct-gold);
	color: var(--sb-ct-navy);
}

.sb-lf-ct-choice:has(input:checked) {
	background: var(--sb-ct-navy);
	border-color: var(--sb-ct-navy);
	color: #ffffff;
	box-shadow: inset 0 0 0 1px var(--sb-ct-gold);
}

.sb-lf-ct-choice:has(input:focus-visible) {
	outline: 2px solid var(--sb-ct-gold);
	outline-offset: 2px;
}

/* `:has()` is well supported now, but a browser without it would leave the
   selected pill looking identical to the others — this fallback keeps the
   state visible via the class the JS mirrors onto the label. */
.sb-lf-ct-choice.is-checked {
	background: var(--sb-ct-navy);
	border-color: var(--sb-ct-navy);
	color: #ffffff;
	box-shadow: inset 0 0 0 1px var(--sb-ct-gold);
}

/* Submit */
.sb-lf-ct-submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	padding: 15px 34px;
	border: none;
	border-radius: 6px;
	background: var(--sb-ct-navy);
	color: #ffffff;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.sb-lf-ct-submit:hover {
	background: #16223f;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -14px rgba(15, 24, 48, 0.7);
}

.sb-lf-ct-submit:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

.sb-lf-ct-submit-icon {
	width: 17px;
	height: 17px;
	transition: transform 0.3s ease;
}

.sb-lf-ct-submit:hover .sb-lf-ct-submit-icon {
	transform: translateX(3px);
}

.sb-lf-ct-disclaimer {
	margin: 14px 0 0;
	max-width: 560px;
	color: #8a867d;
	font-size: 12.5px;
	line-height: 1.6;
}

.sb-lf-ct-response {
	margin-top: 14px;
	font-size: 14.5px;
	font-weight: 600;
}

.sb-lf-ct-response.is-success { color: #2f7a4c; }
.sb-lf-ct-response.is-error { color: #b03a52; }

/* ---------------------------------------------------------------------
   Contact panel
   --------------------------------------------------------------------- */
.sb-lf-ct-panel-heading {
	margin: 0;
	color: var(--sb-ct-navy);
	font-family: var(--sb-font-serif);
	font-weight: 600;
	font-size: 25px;
	line-height: 1.2;
}

.sb-lf-ct-route {
	padding-top: 22px;
	margin-top: 22px;
	border-top: 1px solid var(--sb-ct-line);
}

.sb-lf-ct-route:first-of-type {
	border-top: none;
	margin-top: 24px;
	padding-top: 0;
}

.sb-lf-ct-route-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.sb-lf-ct-flag {
	width: 26px;
	height: 18px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(15, 24, 48, 0.12);
	flex: none;
}

.sb-lf-ct-route-title {
	color: var(--sb-ct-navy);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sb-lf-ct-route-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-lf-ct-route-list li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 15px;
}

.sb-lf-ct-route-list li:last-child {
	margin-bottom: 0;
}

.sb-lf-ct-ico {
	width: 17px;
	height: 17px;
	flex: none;
	color: var(--sb-ct-gold);
}

.sb-lf-ct-ico-lead {
	color: var(--sb-ct-gold);
}

.sb-lf-ct-route-list a {
	color: #3c3a35;
	text-decoration: none;
	transition: color 0.25s ease;
	word-break: break-word;
}

.sb-lf-ct-route-list a:hover {
	color: var(--sb-ct-gold);
}

/* WhatsApp sits right beside the Farsi number on purpose — it is the route
   most likely to be used by a Farsi-speaking caller, so it reads as part of
   that number rather than a generic social link. */
.sb-lf-ct-wa {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(37, 211, 102, 0.12);
	color: #128c4a !important;
	font-size: 12.5px;
	font-weight: 700;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.sb-lf-ct-wa:hover {
	background: rgba(37, 211, 102, 0.22);
	transform: translateY(-1px);
	color: #0f7a40 !important;
}

.sb-lf-ct-wa-icon {
	width: 15px;
	height: 15px;
	flex: none;
}

.sb-lf-ct-address {
	margin: 0;
	color: #5a5750;
	font-size: 15px;
	line-height: 1.65;
}

/* ---------------------------------------------------------------------
   Location
   --------------------------------------------------------------------- */
.sb-lf-ct-location {
	padding: 0 0 clamp(56px, 7vw, 88px);
}

.sb-lf-ct-location-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto clamp(30px, 3.6vw, 44px);
}

.sb-lf-ct-map {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--sb-ct-line);
	box-shadow: 0 18px 40px -30px rgba(15, 24, 48, 0.5);
	line-height: 0;
}

.sb-lf-ct-map iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
	filter: saturate(0.9);
}

/* Reveal */
.sb-lf-reveal {
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--sb-delay, 0s);
}

.sb-lf-reveal.sb-lf-pending {
	opacity: 0;
	transform: translateY(26px);
}

.sb-lf-reveal.sb-lf-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.sb-lf-ct * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}

	.sb-lf-reveal.sb-lf-pending {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1000px) {
	.sb-lf-ct-grid {
		grid-template-columns: 1fr;
	}

	.sb-lf-ct-panel {
		order: 2;
	}
}

@media (max-width: 760px) {
	.sb-lf-ct-fields {
		grid-template-columns: 1fr;
	}

	.sb-lf-ct-choice {
		flex: 1 1 auto;
		justify-content: center;
	}

	.sb-lf-ct-submit {
		width: 100%;
		justify-content: center;
	}
}

/* Elementor's own mobile controls switch at 767px, so the banner's mobile
   layout matches that breakpoint exactly — otherwise the saved mobile type
   sizes and this layout disagree over a few pixels of width. */
@media (max-width: 767px) {
	/* On a narrow screen the copy can no longer sit beside the photograph
	   without covering somebody's face, so it moves under it and the scrim
	   turns bottom-up to match. The focal point control shifts the crop
	   upward at the same breakpoint, keeping both men in the visible half. */
	.sb-lf-ct-banner-inner {
		align-items: flex-end;
		/* Reserves the top of the frame for the photograph. Without it the copy
		   floated up the banner and left the picture as a sliver behind the
		   header — the copy is long, and at desktop type sizes it filled almost
		   the whole band. */
		padding-top: 230px;
		padding-bottom: 36px;
	}

	/* Lighter than desktop: here the wash sits over the part of the photograph
	   that is meant to be seen, and the scrim below already does the work of
	   making the copy readable. */
	.sb-lf-ct-banner-overlay {
		background: rgba(10, 16, 30, 0.34);
	}

	.sb-lf-ct-banner-scrim {
		background: linear-gradient(
			to top,
			var(--sb-ct-scrim) 0%,
			var(--sb-ct-scrim) 26%,
			rgba(8, 13, 26, 0.55) 52%,
			rgba(8, 13, 26, 0) 78%
		);
	}

	.sb-lf-ct-banner-text {
		max-width: none;
	}

	.sb-lf-ct-eyebrow {
		margin-bottom: 12px;
		font-size: 12.5px;
	}

	/* The shared hero size is built for a full-width headline; four lines of
	   it in a phone-width column crowded everything else out of the band. */
	.sb-lf-ct-banner-heading {
		font-size: clamp(25px, 7.6vw, 33px);
		line-height: 1.16;
		letter-spacing: 0.01em;
	}

	.sb-lf-ct-banner-text p {
		margin-top: 14px;
		font-size: 14.5px;
		line-height: 1.62;
	}
}