/* Oasis Town Landing Pages — styles for single-oasis_town_page.php
   Brand tokens from the Elementor kit:
   navy #002259 · deep navy #001331 · steel #386FA8 · mid navy #1E3F6C
   cream #FFFCF4 · ice #F1F7FD · sky #EAF5FF · Nunito Sans / DM Serif Display

   Layout system:
   - ONE container width everywhere: .otp-wrap (1140px + side padding)
   - ONE vertical rhythm: --otp-pad section padding, --otp-gap block gap
   - Only the estimate form card is narrower (--otp-form-w)
   Type system:
   - eyebrow (.otp-eyebrow) → H2 display → body; headings use
     text-wrap:balance, tight line-height, slight negative tracking       */

.otp {
	--otp-navy:       #002259;
	--otp-deep:       #001331;
	--otp-steel:      #386FA8;
	--otp-mid:        #1E3F6C;
	--otp-cream:      #FFFCF4;
	--otp-ice:        #F1F7FD;
	--otp-sky:        #EAF5FF;
	--otp-line:       #dbe7f3;

	--otp-pad:        88px;
	--otp-gap:        56px;
	--otp-gutter:     24px;
	--otp-form-w:     780px;

	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--otp-deep);
	font-size: 17px;
	line-height: 1.7;
	overflow-x: hidden;
}

/* ---------- Type ---------- */
.otp h1, .otp h2, .otp h3 {
	font-family: "Nunito Sans", sans-serif;
	color: var(--otp-deep);
	margin: 0 0 20px;
	text-wrap: balance;
}
.otp h1 {
	font-size: clamp(2.05rem, 4.2vw, 3.25rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: .015em;
}
.otp h2 {
	font-size: clamp(1.55rem, 2.6vw, 2.3rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.012em;
}
.otp h3 {
	font-size: 1.18rem;
	font-weight: 800;
	line-height: 1.3;
}
.otp p  { margin: 0 0 1.15em; }
.otp p:last-child { margin-bottom: 0; }
.otp img { max-width: 100%; height: auto; display: block; }
.otp a { color: var(--otp-steel); }

.otp-eyebrow {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--otp-steel);
	margin: 0 0 14px;
}
.otp-eyebrow--light { color: #8fb8dd; }

/* Section heads */
.otp-sechead--split {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: var(--otp-gap);
	align-items: end;
	margin-bottom: var(--otp-gap);
}
.otp-sechead--split h2 { margin-bottom: 0; }
.otp-sechead--center {
	text-align: center;
	max-width: 760px;
	margin: 0 auto var(--otp-gap);
}
.otp-sechead--center h2 { margin-bottom: 0; }

/* ---------- Layout ---------- */
.otp-wrap {
	max-width: calc(1140px + (2 * var(--otp-gutter)));
	margin: 0 auto;
	padding-left: var(--otp-gutter);
	padding-right: var(--otp-gutter);
}
.otp-section { padding: var(--otp-pad) 0; background: #fff; }
.otp-section--cream { background: var(--otp-cream); }
.otp-section--blue  { background: var(--otp-ice); }

/* ---------- Buttons ---------- */
.otp-btn {
	display: inline-block;
	padding: 16px 36px;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3px;
	transition: background .2s, color .2s, border-color .2s, transform .2s;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}
.otp-btn--solid { background: var(--otp-steel); color: #fff !important; }
.otp-btn--solid:hover { background: var(--otp-mid); }
.otp-btn--ghost { border: 1.5px solid #fff; color: #fff !important; }
.otp-btn--ghost:hover { background: rgba(255,255,255,.15); }
.otp-btn--navy { background: var(--otp-navy); color: #fff !important; }
.otp-btn--navy:hover { background: var(--otp-mid); }
.otp-btn--ghost-navy { border: 1.5px solid var(--otp-navy); color: var(--otp-navy) !important; }
.otp-btn--ghost-navy:hover { background: var(--otp-sky); }
.otp-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Hero ---------- */
.otp-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	background-color: var(--otp-deep);
}
.otp-hero__scrim {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(180deg, rgba(0,19,49,.84) 0%, rgba(0,34,89,.6) 55%, rgba(0,19,49,.8) 100%);
}
.otp-hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	padding-top: 108px;
	padding-bottom: 116px;
}
.otp-hero h1 {
	color: #fff;
	text-transform: uppercase;
	max-width: 840px;
	margin: 0 auto 18px;
	text-shadow: 0 2px 14px rgba(0,19,49,.45);
}
/* Needs .otp to outweigh `.otp p { margin: 0 0 1.15em }` — that rule is more
   specific than a bare class and was killing the auto side-margins, pinning this
   block to the left of the centred hero. */
.otp .otp-hero__sub {
	color: var(--otp-sky);
	max-width: 620px;
	margin-inline: auto;
	margin-bottom: 0;
	text-align: center;
	font-size: 1.08rem;
	line-height: 1.75;
	/* Even line lengths, so no single word orphans onto the last line. */
	text-wrap: balance;
}
.otp-hero .otp-cta-row { justify-content: center; margin-top: 34px; }

/* Breadcrumbs — pill for legibility over photography */
.otp-crumbs {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(0,19,49,.45);
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 999px;
	padding: 9px 22px;
	margin-bottom: 34px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}
.otp-crumbs a { color: #fff; text-decoration: none; opacity: .85; transition: color .18s, opacity .18s; }
.otp-crumbs a:hover,
.otp-crumbs a:focus-visible { color: var(--otp-sky); opacity: 1; text-decoration: underline; }
.otp-crumbs__sep { color: var(--otp-sky); opacity: .8; font-size: .9rem; }

/* ---------- Lead answer block (AEO extraction target) ---------- */
.otp-answer {
	background: var(--otp-sky);
	border-left: 5px solid var(--otp-steel);
	border-radius: 4px;
	padding: 32px 38px;
	margin-bottom: 28px;
}
.otp-answer .otp-eyebrow { margin-bottom: 8px; }
.otp-answer h2 { font-size: 1.32rem; line-height: 1.3; letter-spacing: 0; margin-bottom: 10px; }
.otp-answer p { margin: 0; }
.otp-answer__lead { font-size: 1.06rem; }
.otp-updated {
	margin-top: 14px !important;
	font-size: .82rem;
	color: var(--otp-mid);
	opacity: .85;
}

/* ---------- Project summary table ---------- */
.otp-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.otp-facts-wrap { max-width: 880px; }
.otp-facts__intro { margin-top: 6px; max-width: 620px; color: var(--otp-mid); }

/* Hello Elementor's reset styles every table as a bordered, grey-striped grid
   (`table tbody>tr:nth-child(odd)>td` = specificity 0,1,4). Every rule below is
   scoped `.otp .otp-facts …` so it outweighs that reset — without the leading
   `.otp` the stripes and hairline borders come back. */
.otp .otp-facts {
	width: 100%;
	border-collapse: collapse;
	margin: 34px 0 0;
	background: #fff;
	border: 1px solid var(--otp-line);
	border-top: 3px solid var(--otp-steel);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 20px 44px -30px rgba(0,34,89,.42);
	font-size: 1rem;
	text-align: left;
}
.otp .otp-facts tbody tr > th,
.otp .otp-facts tbody tr > td {
	background: transparent;
	border: 0;
	vertical-align: top;
	transition: background .18s;
}
.otp .otp-facts tbody tr + tr > th,
.otp .otp-facts tbody tr + tr > td {
	border-top: 1px solid rgba(56,111,168,.14);
}
/* Label reads as an eyebrow, not a filled header cell — type contrast instead of
   background blocks is what keeps it from looking like a spreadsheet. */
.otp .otp-facts tbody tr > th[scope="row"] {
	width: 32%;
	padding: 24px 22px 24px 30px;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--otp-steel);
	white-space: normal;
}
.otp .otp-facts tbody tr > td {
	padding: 22px 30px 24px 0;
	color: var(--otp-navy);
	font-weight: 600;
	line-height: 1.6;
}
.otp .otp-facts tbody tr:hover > th,
.otp .otp-facts tbody tr:hover > td { background: var(--otp-ice); }

/* ---------- Two-column blocks ---------- */
.otp-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--otp-gap);
	align-items: stretch;
}
.otp-cols--rev .otp-cols__text { order: 2; }
.otp-cols--rev .otp-cols__media { order: 1; }
.otp-cols__text { align-self: center; }
.otp-cols__media { position: relative; min-height: 440px; }
.otp-cols__media img {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 14px 38px rgba(0,19,49,.16);
}
.otp-cols__text .otp-btn { margin-top: 6px; }

/* Benefits checklist */
.otp-checks { list-style: none; margin: 0 0 26px; padding: 0; }
.otp-checks li { position: relative; padding: 6px 0 6px 34px; }
.otp-checks li::before {
	content: "";
	position: absolute; left: 0; top: 11px;
	width: 19px; height: 19px;
	border-radius: 50%;
	background: var(--otp-steel);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.7 5.9-4.2 4.9a.75.75 0 0 1-1.1.03L4.3 8.7a.75.75 0 1 1 1.06-1.06l1.5 1.5 3.7-4.3a.75.75 0 0 1 1.14.96z"/></svg>') center/contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.7 5.9-4.2 4.9a.75.75 0 0 1-1.1.03L4.3 8.7a.75.75 0 1 1 1.06-1.06l1.5 1.5 3.7-4.3a.75.75 0 0 1 1.14.96z"/></svg>') center/contain no-repeat;
}

/* SlimStyle / product callout */
.otp-callout {
	background: var(--otp-cream);
	border: 1px solid #e8dfc8;
	border-radius: 4px;
	padding: 20px 24px;
	margin-bottom: 26px;
	font-size: .95rem;
}

/* ---------- Local content (editorial) ---------- */
.otp-lede {
	font-size: 1.12rem;
	line-height: 1.75;
	color: var(--otp-mid);
}
.otp-local {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: var(--otp-gap);
	align-items: start;
}
.otp-local__text > p:first-child {
	font-size: 1.05em;
}
.otp-local__aside { position: relative; }
.otp-local__photo { margin: 0; }
.otp-local__photo img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 14px 38px rgba(0,19,49,.14);
}
.otp-angle {
	position: relative;
	z-index: 1;
	background: #fff;
	border-left: 4px solid var(--otp-navy);
	border-radius: 4px;
	padding: 22px 26px;
	margin: -52px 24px 0;
	box-shadow: 0 12px 32px rgba(0,19,49,.12);
}
.otp-angle__label {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--otp-steel);
	margin: 0 0 8px;
}
.otp-angle p:last-child { margin: 0; }

/* Photo mosaic */
.otp-mosaic {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 20px;
	margin-top: var(--otp-gap);
}
.otp-mosaic figure { margin: 0; }
.otp-mosaic img {
	width: 100%;
	height: 360px;
	object-fit: cover;
	border-radius: 8px;
}

/* ---------- Showroom ---------- */
.otp-address { line-height: 1.55; }
.otp-fabnote { font-size: .92rem; color: var(--otp-mid); }

/* ---------- Process (navy cards) ---------- */
.otp-process { background: linear-gradient(180deg, var(--otp-navy) 0%, var(--otp-deep) 100%); }
.otp-process h2 { color: #fff; }
.otp-process__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}
.otp-process__card {
	position: relative;
	background: rgba(255,255,255,.055);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 10px;
	padding: 36px 30px 32px;
	overflow: hidden;
	transition: transform .25s, border-color .25s, background .25s;
}
.otp-process__card:hover {
	transform: translateY(-4px);
	border-color: rgba(255,255,255,.32);
	background: rgba(255,255,255,.085);
}
.otp-process__card::after {
	content: attr(data-num);
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 4.4rem;
	font-weight: 800;
	line-height: 1;
	color: rgba(255,255,255,.09);
	letter-spacing: -.03em;
	pointer-events: none;
}
.otp-process__card h3 { color: #fff; margin-bottom: 10px; }
.otp-process__card h3::before {
	content: "";
	display: block;
	width: 30px;
	height: 3px;
	border-radius: 2px;
	background: var(--otp-steel);
	margin-bottom: 16px;
}
.otp-process__card p { font-size: .95rem; line-height: 1.65; margin: 0; color: #c6dcf0; }
.otp-process__cta { text-align: center; margin-top: 44px; }

/* ---------- Testimonial ---------- */
.otp-quote {
	font-family: "DM Serif Display", Georgia, serif;
	font-size: 1.5rem;
	text-align: center;
	margin: 0;
	color: var(--otp-navy);
}
.otp-quote-wrap { margin: 0; }
.otp-quote-wrap figcaption {
	margin-top: 16px;
	text-align: center;
	font-size: .84rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--otp-steel);
	font-weight: 700;
}

/* ---------- FAQ ---------- */
.otp-faq-list { display: grid; gap: 14px; }
.otp-faq {
	background: #fff;
	border: 1px solid var(--otp-line);
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow .2s;
}
.otp-faq[open] { box-shadow: 0 10px 28px rgba(0,19,49,.08); }
.otp-faq summary {
	cursor: pointer;
	padding: 20px 54px 20px 26px;
	font-weight: 700;
	list-style: none;
	position: relative;
	line-height: 1.4;
}
.otp-faq summary::-webkit-details-marker { display: none; }
.otp-faq summary::after {
	content: "+";
	position: absolute; right: 24px; top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem; font-weight: 400; color: var(--otp-steel);
}
.otp-faq[open] summary::after { content: "\2212"; }
.otp-faq p { padding: 0 26px 22px; margin: 0; }
/* Question is a real h3 for heading structure; it must still read as the summary row. */
.otp-faq summary h3 {
	display: inline;
	font-size: 1rem;
	font-weight: 700;
	line-height: inherit;
	letter-spacing: 0;
	margin: 0;
	color: inherit;
}
.otp-faq__more { margin-top: 30px; text-align: center; font-size: .95rem; }

/* ---------- Nearby links ---------- */
.otp-nearby {
	background: #fff;
	padding: 30px 0;
	border-top: 1px solid #eef2f7;
	font-size: .95rem;
	text-align: center;
}
.otp-nearby p { margin: 0; }

/* ---------- Estimate form ---------- */
.otp-estimate {
	background: linear-gradient(180deg, var(--otp-deep) 0%, var(--otp-navy) 100%);
	scroll-margin-top: 120px;
}
.otp-estimate .otp-sechead--center { max-width: var(--otp-form-w); }
.otp-estimate h2 { color: #fff; }
.otp-estimate__intro { color: #c6dcf0; margin-top: 16px; }
.otp-estimate__form {
	max-width: var(--otp-form-w);   /* the only width-constrained element */
	margin: 0 auto;
	background: #fff;
	border-radius: 10px;
	padding: 40px 44px;
	box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

/* Gravity Forms field styling to match the brand */
.otp-estimate__form .gform_wrapper label.gfield_label {
	font-size: .85rem;
	font-weight: 700;
	color: var(--otp-deep);
}
.otp-estimate__form .gform_wrapper input[type=text],
.otp-estimate__form .gform_wrapper input[type=email],
.otp-estimate__form .gform_wrapper input[type=tel],
.otp-estimate__form .gform_wrapper select,
.otp-estimate__form .gform_wrapper textarea {
	width: 100%;
	padding: 13px 15px;
	font-family: inherit;
	font-size: .95rem;
	color: var(--otp-deep);
	background: #fff;
	border: 1px solid var(--otp-line);
	border-radius: 4px;
	transition: border-color .15s, box-shadow .15s;
}
.otp-estimate__form .gform_wrapper input:focus,
.otp-estimate__form .gform_wrapper select:focus,
.otp-estimate__form .gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--otp-steel);
	box-shadow: 0 0 0 3px rgba(56,111,168,.18);
}
.otp-estimate__form .gform_wrapper .gfield_required { color: #c0392b; }
.otp-estimate__form .gform_wrapper .gform_fileupload_rules,
.otp-estimate__form .gform_wrapper .gfield_description { font-size: .8rem; color: #5a6b80; }
.otp-estimate__form .gform_wrapper input[type=submit],
.otp-estimate__form .gform_wrapper .gform_button {
	background: var(--otp-navy) !important;
	color: #fff !important;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 700;
	font-size: .85rem !important;
	padding: 17px 36px !important;
	border: none;
	border-radius: 3px;
	width: 100%;
	cursor: pointer;
	transition: background .2s;
}
.otp-estimate__form .gform_wrapper input[type=submit]:hover { background: var(--otp-steel) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.otp { --otp-pad: 66px; --otp-gap: 40px; }
	.otp-cols__media { min-height: 380px; }
	.otp-local__photo img { height: 360px; }
	.otp-mosaic img { height: 300px; }
}

@media (max-width: 900px) {
	.otp-sechead--split { grid-template-columns: 1fr; align-items: start; gap: 18px; }
	.otp-cols, .otp-cols--rev { grid-template-columns: 1fr; }
	.otp-cols--rev .otp-cols__text { order: 1; }
	.otp-cols--rev .otp-cols__media { order: 2; }
	.otp-cols__media { min-height: 0; }
	.otp-cols__media img { position: static; height: auto; max-height: 440px; }
	.otp-local { grid-template-columns: 1fr; }
	.otp-process__grid { grid-template-columns: 1fr; }
	.otp-mosaic { grid-template-columns: 1fr 1fr; }
	.otp-mosaic img { height: 260px; }
	.otp-hero__inner { padding-top: 84px; padding-bottom: 88px; }
}

@media (max-width: 640px) {
	.otp { --otp-pad: 54px; --otp-gap: 30px; --otp-gutter: 18px; font-size: 16px; }
	.otp-hero__inner { padding-top: 60px; padding-bottom: 66px; }
	.otp-crumbs { padding: 8px 16px; gap: 7px; font-size: .7rem; margin-bottom: 26px; }
	.otp-cta-row { flex-direction: column; align-items: stretch; }
	.otp-btn { white-space: normal; }
	.otp-answer { padding: 24px 20px; }
	/* Stack the fact rows rather than squeezing two columns onto a phone. */
	.otp .otp-facts tbody tr > th[scope="row"],
	.otp .otp-facts tbody tr > td { display: block; width: auto; }
	.otp .otp-facts tbody tr > th[scope="row"] { padding: 20px 22px 2px; }
	.otp .otp-facts tbody tr > td { padding: 0 22px 20px; }
	.otp .otp-facts tbody tr + tr > td { border-top: 0; }
	.otp-local__photo img { height: 300px; }
	.otp-angle { margin: -36px 14px 0; padding: 18px 20px; }
	.otp-mosaic { grid-template-columns: 1fr; }
	.otp-mosaic img { height: 240px; }
	.otp-estimate__form { padding: 26px 20px; }
	.otp-faq summary { padding: 17px 46px 17px 18px; }
	.otp-faq p { padding: 0 18px 18px; }
	.otp-nearby { padding: 22px 0; }
}