/* ==========================================================================
   Alarca Realty — Charlotte Property Management
   Custom styles layered on top of Bootstrap 4.
   Bootstrap handles grid/layout (.container, .row, .col-*, .navbar, flex
   utilities). This file only carries brand color, type, and the bespoke
   components Bootstrap doesn't provide out of the box.
   ========================================================================== */

   :root{
	--navy:#14243a;
	--pink:#c65375;
	--pink-dark:#a7405f;
	--primary:#a7405f;
	--cream:#f7f3ef;
	--text:#2c394a;
	--muted:#677386;
  }
  
  body{
	font-family:Arial,Helvetica,sans-serif;
	color:var(--text);
	line-height:1.55;
  }
  
  a{ color:inherit; }
  a:hover{ color:inherit; text-decoration:none; }
  
  h1,h2,h3{
	font-family:Georgia,serif;
	color:var(--navy);
	line-height:1.08;
  }
  
  /* ---- Top utility bar -------------------------------------------------- */
  .top-bar{
	background:#0d1b2c;
	color:#fff;
	font-size:14px;
  }
  .top-bar .container{
	padding-top:8px;
	padding-bottom:8px;
  }
  
  /* ---- Navbar ------------------------------------------------------------ */
  .navbar-alarca{
	padding-top:18px;
	padding-bottom:18px;
	background:#fff;
  }
  .brand{
	font-weight:900;
	color:var(--navy);
	letter-spacing:.04em;
	line-height:1.1;
  }
  .brand small{
	display:block;
	color:var(--pink);
	font-size:10px;
	letter-spacing:.16em;
	font-weight:700;
  }
  .navbar-alarca .nav-link{
	font-weight:700;
	color:#536174;
  }
  .navbar-alarca .nav-link:hover{
	color:var(--pink-dark);
  }
  
  /* ---- Buttons ------------------------------------------------------------
	 Custom brand button skins. Deliberately namespaced (btn-alarca-*) so they
	 don't collide with Bootstrap's own .btn-primary / .btn-secondary colors. */
  .btn-alarca-primary, .ion-form button {
	background:var(--pink);
	color:#fff;
	border:0;
	border-radius:999px;
	padding:14px 22px;
	font-weight:800;
  }
  .btn-alarca-primary:hover{
	background:var(--pink-dark);
	color:#fff;
  }
  .btn-alarca-secondary{
	border:1px solid #d8dee7;
	background:#fff;
	color:var(--navy);
	border-radius:999px;
	padding:14px 22px;
	font-weight:800;
  }
  .btn-alarca-secondary:hover{
	border-color:var(--pink);
	color:var(--pink-dark);
  }
  .btn-alarca-cta{
	background:#fff;
	color:var(--pink-dark);
	border:0;
	border-radius:999px;
	padding:14px 22px;
	font-weight:800;
	white-space:nowrap;
  }
  .btn-alarca-cta:hover{
	background:var(--cream);
	color:var(--pink-dark);
  }
  
  /* ---- Hero --------------------------------------------------------------- */
  .hero{
	padding:20px 0;
	background:radial-gradient(circle at 80% 20%,rgba(198,83,117,.14),transparent 28%),
				linear-gradient(#fff,#fbfaf8);
  }
  .eyebrow{
	color:#a7405f;
	text-transform:uppercase;
	letter-spacing:.12em;
	font-size:13px;
	font-weight:900;
  }
  h1{ font-size:clamp(46px,6vw,76px); letter-spacing:-.04em; margin:14px 0; }
  h1 span{ color:#a7405f; }
  h2{ font-size:clamp(34px,4vw,50px); margin:14px 0; }
  .lead-alarca{ font-size:19px; color:#586577; }
  .proof-points{
	display:flex;
	gap:18px;
	flex-wrap:wrap;
	font-weight:700;
	color:#5e6b7b;
	font-size:14px;
  }
  
  /* ---- Analysis form card --------------------------------------------------
	 Named analysis-card (not .card) to avoid fighting Bootstrap's own card
	 component defaults. */
  .analysis-card{
	background:#fff;
	border:1px solid #e1e5eb;
	border-radius:22px;
	padding:28px;
	box-shadow:0 20px 45px rgba(20,36,58,.12);
  }
  .analysis-card h3{
	font-size:29px;
	margin:8px 0;
  }
  .analysis-card label{
	font-size:12px;
	font-weight:800;
	margin-bottom:5px;
  }
  .analysis-card .form-control{
	border:1px solid #d7dde5;
	border-radius:10px;
  }
  .analysis-card small{
	color:var(--muted);
  }
  
  /* ---- Stats band ---------------------------------------------------------- */
  .stats-band{
	background:var(--navy);
	color:#fff;
  }
  .stat{
	text-align:center;
	padding:25px;
	border-right:1px solid rgba(255,255,255,.12);
  }
  .stat strong{
	display:block;
	font:700 31px Georgia,serif;
  }
  .stat span{
	font-size:13px;
	color:#ced7e2;
  }
  @media(max-width:767.98px){
	.stat{ border-right:0; border-bottom:1px solid rgba(255,255,255,.12); }
  }
  
  /* ---- Generic section rhythm ---------------------------------------------- */
  .section-alarca{ padding:82px 0; }
  .section-alt{ background:var(--cream); }
  .intro-alarca{ max-width:760px; margin-bottom:34px; }
  .intro-alarca p{ font-size:18px; color:var(--muted); }
  
  /* ---- "Why owners choose" / guarantee items ------------------------------- */
  .item-alarca{
	border:1px solid #e2e6ec;
	border-radius:17px;
	padding:25px;
	background:#fff;
	box-shadow:0 8px 24px rgba(20,36,58,.06);
	height:100%;
  }
  .item-alarca h3{ margin:0 0 8px; font-size:22px; }
  .item-alarca p{ margin:0; color:var(--muted); }
  .amount{ font:700 38px Georgia,serif; color:#a7405f; margin-bottom:10px; }
  
  /* ---- Services grid --------------------------------------------------------- */
  .service-alarca{
	border-top:3px solid var(--pink);
	padding:20px;
	background:#fff;
	box-shadow:0 8px 22px rgba(20,36,58,.06);
	height:100%;
  }
  .service-alarca h3{ margin:0 0 6px; font-size:20px; }
  .service-alarca p{ margin:0; color:var(--muted); font-size:14px; }
  
  /* ---- Local/out-of-state visual panel --------------------------------------- */
  .visual-panel{
	height:390px;
	border-radius:24px;
	background:linear-gradient(145deg,#14243a,#2d496b);
	position:relative;
	overflow:hidden;
  }
  .house{
	position:absolute;
	left:13%; right:13%; bottom:0; height:68%;
	background:var(--cream);
	clip-path:polygon(50% 0,100% 28%,92% 28%,92% 100%,8% 100%,8% 28%,0 28%);
  }
  .door{
	position:absolute;
	left:42%; bottom:0; width:16%; height:34%;
	background:var(--pink);
  }
  .badge-alarca{
	position:absolute;
	top:22px; right:22px;
	background:#fff;
	border-radius:14px;
	padding:14px 16px;
	font-weight:900;
	color:var(--navy);
	z-index:2;
  }
  .bullets-alarca div{
	padding-left:30px;
	position:relative;
	margin-bottom:13px;
  }
  .bullets-alarca div:before{
	content:"✓";
	position:absolute;
	left:0;
	color:#2f7a63;
	font-weight:900;
  }
  
  /* ---- Process / how it works ------------------------------------------------ */
  .process-alarca{
	background:var(--navy);
	color:#fff!important;
  }
  .process-alarca h2, .process-alarca h3{ color:#fff; }
  .step-alarca{
	border:1px solid rgba(255,255,255,.16);
	border-radius:16px;
	padding:24px;
	background:rgba(255,255,255,.05);
	height:100%;
  }
  .step-alarca .step-num{
	display:grid;
	place-items:center;
	width:40px;
	height:40px;
	border-radius:50%;
	background:var(--pink);
	margin-bottom:14px;
	font-weight:700;
  }
  .step-alarca p{ color:#ced7e2; margin-bottom:0; }
  
  /* ---- CTA band --------------------------------------------------------------- */
  .cta-alarca{
	background:linear-gradient(135deg,#a7405f,var(--pink));
	color:#fff;
	border-radius:24px;
	padding:42px;
  }
  .cta-alarca h2{ color:#fff; margin:0 0 8px; }
  
  /* ---- Footer ------------------------------------------------------------------ */
  .footer-alarca{
	background:#0d1b2c;
	color:#ccd5df;
	padding:30px 0;
  }
  
  /* ---- Small screens ------------------------------------------------------------ */
  @media(max-width:575.98px){
	.top-bar .top-est{ display:none; }
	h1{ font-size:44px; }
  }
/* ==========================================================================
   Forms
============================================================================= */
.form-container { position: relative; border: 0; background-color: var(--gray); padding: 60px 40px 75px; border-radius: 0; }
.form-container h2, .form-container__header, .form-container__lead { color: var(--body-text); font-size: 48px; font-family: var(--secondary-font); text-transform: none; text-align: center; margin: 0 0 30px; color: var(--dark); }
.form-container .ion-form-group { margin-bottom: 15px; }
.form-container .ion-form-group input, .form-container .ion-form-group textarea { border: 0 !important; border-radius: 23px !important; background: #fff; }
.form-container .ion-form-group input, .form-container .ion-form-group select { height: 47px; }
.form-container .ion-form-group label { margin-left: 30px!important; font-weight: 500!important; font-size: 16px!important;  }
.form-container .ion-form-group textarea { height: 175px; }
.form-container .ion-form-instructions {font-size: 13px!important;}

.form-container .ion-form-group ::-webkit-input-placeholder, .form-container .ion-form-group select:invalid { color: var(--body-text); font-size: 16px; text-transform: uppercase; letter-spacing: .1em; }
.form-container .ion-form-group select { padding-left: 5px; border: 0;appearance:none;-webkit-appearance: none;border-radius:23px; }
.form-container .ion-form-group-break h3 { color: inherit; font-size: 14px; margin: 0; text-transform: uppercase; font-weight: bold; padding-top: 10px; }
.form-container .ion-form-group-radio label, .form-container .ion-form-group-checkbox label { display: block; color: inherit; }
.form-container .ion-form-group-radio label:not(:first-child), .form-container .ion-form-group-checkbox label:not(:first-child) { width: 50%; display: inline-block; }
.form-container .ion-form-group-radio input, .form-container .ion-form-group-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.form-container .ion-form-group-radio span, .form-container .ion-form-group-checkbox span { display: flex; padding-left: 30px; padding-right: 15px; position: relative; font-size: 15px; }
.form-container .ion-form-group-radio span::before, .form-container .ion-form-group-checkbox span::before { content: ''; position: absolute; left: 0; top: 2px; height: 20px; width: 20px; background: #fff; display: block; transition: 0.3s; border: 1px solid #222; }
.form-container .ion-form-group-radio span::after, .form-container .ion-form-group-checkbox span::after { content: '\f00c'; color: var(--primary); opacity: 0; position: absolute; left: 3px; top: 2px; font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: 600; line-height: 23px; -webkit-font-smoothing: antialiased; transition: 0.3s; }
.form-container .ion-form-group-radio input:hover span::after, .form-container .ion-form-group-checkbox input:hover span::after { opacity: .4; transition: 0.3s; }
.form-container .ion-form-group-radio input:checked ~ span::after, .form-container .ion-form-group-checkbox input:checked ~ span::after { opacity: 1; transition: 0.3s; }
.form-container iframe { margin: -10px 0 10px; }
.form-container form > div:last-of-type > div { margin-left: auto; }
.form-container .ion-btn { background-color: var(--primary); border-color: var(--primary); font-size: 0; width: 145px; height: 33px; margin: 0 0 0 auto; display: flex; align-items: center; justify-content: center; }
.form-container .ion-btn::after { content: 'Submit'; line-height: 1; font-size: 17px; font-style: normal; font-weight: 400; text-transform: uppercase; }
.form-container .ion-btn:hover { color: var(--primary); border-color: var(--primary); }
.form-container__arrow { position: absolute; left: 98%; top: -20%; transform: rotate3d(2, 1, 0, 180deg); }
.form-container__arrow svg { max-width: 119px; fill: var(--primary); color: var(--primary); }
@media (min-width:992px) {
	.form-container { max-width: 100%; width: 539px; margin-left: auto; }
}
/* Form Container Stacked on small screens */
@media (min-width:600px) and (max-width:991px) {
	.form-container form { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0; gap: 20px; }
	.form-container form .ion-form-group { flex-basis: calc(50% - 20px); flex-grow: 1; margin: 0; }
	.form-container form .ion-form-group.ion-form-group-textarea, .form-container form .ion-form-group.ion-form-group-break, .form-container form .ion-form-group.ion-form-group-checkbox, .form-container form .ion-form-group.ion-form-group-radio, .form-container form > div:last-of-type { flex-basis: 100%; }
	.form-container form > div:last-of-type > div { margin-left: auto; }
}

/* Form Container Stacked */
@media (min-width:992px) {
	.form-container--stacked { width: auto; }
	.form-container--stacked form { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0; gap: 12px; }
	.form-container--stacked form .ion-form-group { flex-basis: calc(50% - 20px); flex-grow: 1; margin: 0; }
	.form-container--stacked form .ion-form-group:first-child { flex-basis: 100%; }
	.form-container--stacked form .ion-form-group.ion-form-group-textarea, .form-container--stacked form .ion-form-group.ion-form-group-break, .form-container--stacked form .ion-form-group.ion-form-group-checkbox, .form-container--stacked form .ion-form-group.ion-form-group-radio, .form-container--stacked form > div:not(.ion-form-group):last-of-type { flex-basis: 100%; }
	.form-container--stacked form .ion-form-group.ion-form-group-textarea { margin-bottom: 5px;}
	.form-container--stacked form .ion-form-group.ion-form-group-textarea textarea  {height: 5em;}
	.form-container--stacked form > div:not(.ion-form-group):last-of-type { padding: 0 10px; }
	.form-container--stacked form > div:not(.ion-form-group):last-of-type > div { margin-left: auto; }
}

/* Floating Form Labels */
.form-container .ion-form .ion-form-group { position: relative; }
.form-container .ion-form .ion-form-group .ion-form-instructions {font-size: 12px!important;}
.form-container .ion-form .ion-form-group:not(.ion-form-group-checkbox):not(.ion-form-group-radio) label { font-weight: 400; margin: 0; position: absolute; font-size: 16px; bottom: 10px; left: .5em; z-index: 2; height: 100%; padding: 1.2em 0em 0; overflow: hidden; text-align: start; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; white-space: nowrap; pointer-events: none; border: var(--bs-border-width) solid transparent; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; -o-transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; }
.form-container .ion-form-group ::-webkit-input-placeholder, .form-container .ion-form-group select:invalid, .form-container .ion-form-group label:not(.float-label) + select:not(:focus), .form-container .ion-form-group ::placeholder { color: transparent!important; }
.form-container .ion-form .ion-form-group:not(.ion-form-group-checkbox):not(.ion-form-group-radio):has(input:focus) label, .form-container .ion-form .ion-form-group:has(textarea:focus) label, .form-container .ion-form .ion-form-group:has(select:focus) label, .form-container .float-label { -webkit-transform: translateY(-.45em) scale(.5); -ms-transform: translateY(-.45em) scale(.5); -moz-transform: translateY(-.45em) scale(.5); transform: translateY(-.45em) scale(.5); opacity: .7; }
.form-container .ion-form-group-dropdown:has(.float-label) select:not(:focus), .float-label + select { color: var(--body-text)!important; }
.form-container .ion-form-group-dropdown label { left: -1px!important; }
.float-label { -webkit-transform: translateY(-.45em) scale(.5); -ms-transform: translateY(-.45em) scale(.5); -moz-transform: translateY(-.45em) scale(.5); transform: translateY(-.45em) scale(.5); opacity: .7; }


/* Form Inline
================================================== */
.form-container-inline { justify-content: center; }
.form-container-inline > div { width: 100%; max-width: 100%; overflow: hidden; }
.form-container-inline form { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 -15px; }
.form-container-inline label { font-weight: 400!important; text-transform: lowercase; margin-bottom: 15px!important; }
.form-container-inline input { font-size: 17px; border: 0!important; height: 29px; padding: 0 15px!important; border-radius: 14.5px!important; background: var(--gray); color: var(--secondary); }
.form-container-inline button { width: 153px; height: 53px; line-height: 53px; border-radius:0; background: var(--secondary); border-color: var(--secondary); text-transform: uppercase; padding: 0; letter-spacing: .025em; margin: 7px; font-family: 'Nunito', sans-serif; }
.form-container-inline button:hover { color: var(--secondary); }
.form-container-inline .ion-form-group { margin: 0; flex: 1 1 auto; padding: 20px 15px; }
.form-container-inline .ion-form-group ::-webkit-input-placeholder, .form-container-inline .ion-form-group select:invalid { color: #191919; text-transform: lowercase; }
.form-container-inline--btn-arrow button { background-color: var(--secondary); border-color: var(--secondary); font-size: 0; width: 53px; height: 53px; line-height: 53px; border-radius: 50%; margin: 30px 15px 0; display: flex; align-items: center; justify-content: center; }
.form-container-inline--btn-arrow button::after { content: '\f061'; width: 53px; height: 53px; line-height: 57px; border-radius: 50%; font-size: 28px; font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: 400; -webkit-font-smoothing: antialiased; }
@media (min-width: 501px) {
	.form-container-inline .ion-form-group { flex: 1 1 33.33%; }
	.form-container-inline--last-grow .ion-form-group:last-of-type { flex: 2 0 100%!important; min-width: 344px; }
}

.form-container-inline--hide-labels label { position: absolute; left: 110vw; top: -110vh; visibility: hidden; opacity: 0; }