/* Estatelio — homepage, transcribed from "Estatelio Homepage.dc.html" */

/* --- Hero ------------------------------------------------------ */
.est-hero { position: relative; background: var(--navy); color: var(--bone); overflow: hidden; }
.est-hero__media { position: absolute; inset: 0; opacity: 0.46; }
.est-hero__media .est-slot { width: 100%; height: 100%; }
.est-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, #10263F 0%, rgba(16,38,63,0.93) 42%, rgba(16,38,63,0.38) 100%);
}
.est-hero__inner {
  position: relative; max-width: var(--shell); margin: 0 auto;
  padding: 78px var(--gutter) 68px; pointer-events: none;
}
.est-hero__eyebrow {
  margin: 0 0 16px;
  font-size: 11.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--clay-light); font-weight: 600;
  animation: riseIn 0.8s ease both;
}
.est-hero h1 {
  margin: 0;
  font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(34px, 4.2vw, 58px); line-height: 1.12; letter-spacing: -0.005em;
  max-width: 19ch; word-spacing: 0.04em; text-wrap: balance;
  animation: riseIn 0.9s 0.08s ease both;
}
.est-hero__rule {
  height: 2px; background: var(--clay); width: 130px; margin: 26px 0 20px;
  transform-origin: left;
  animation: lineIn 0.9s 0.5s cubic-bezier(.2,.8,.2,1) both;
}
.est-hero__lede {
  margin: 0; max-width: 46ch;
  font-size: 16px; line-height: 1.75; color: var(--hero-body); font-weight: 300;
  animation: riseIn 0.9s 0.22s ease both;
}
.est-hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px;
  pointer-events: auto;
  animation: riseIn 0.9s 0.34s ease both;
}

/* --- Credential strip ------------------------------------------ */
.est-strip { background: var(--navy); border-top: 1px solid rgba(246,242,234,0.14); color: var(--on-navy-strip); }
.est-strip__inner {
  max-width: var(--shell); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  align-items: center; justify-content: space-between;
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
}

/* --- Services --------------------------------------------------- */
.est-services { background: var(--bone); padding: var(--section-y) var(--gutter); }
.est-services__head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 36px; align-items: end; margin-bottom: 38px;
}
.est-services__intro {
  margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--ink-body);
  font-weight: 300; max-width: 42ch;
}
/* Cards butt together on shared hairlines — Brand Guidelines 07 */
.est-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
}
.est-card { background: var(--bone); padding: 26px 24px 30px; transition: background .25s ease; }
.est-card:hover { background: var(--linen); }
.est-card__numeral {
  margin: 0 0 14px;
  font-family: 'Newsreader', Georgia, serif; font-size: 17px;
  color: var(--clay); letter-spacing: 0.16em;
}
.est-card h3 {
  margin: 0 0 10px;
  font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: 21px; line-height: 1.2;
}
.est-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: var(--ink-body); font-weight: 300; }
.est-card ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 8px; font-size: 13.5px; color: var(--navy); font-weight: 300;
}
.est-card li { display: flex; gap: 10px; }
.est-card li::before { content: "—"; color: var(--clay); }

/* --- Process ----------------------------------------------------- */
.est-process { background: var(--navy); color: var(--bone); padding: var(--section-y) var(--gutter); }
.est-process .est-h2 { margin: 0 0 36px; max-width: 24ch; }
.est-process__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px 30px;
}
.est-step { border-top: 1px solid rgba(246,242,234,0.26); padding-top: 22px; }
.est-step__n {
  margin: 0 0 10px;
  font-family: 'Newsreader', Georgia, serif; font-size: 30px; line-height: 1;
  color: var(--clay-light);
}
.est-step h3 {
  margin: 0 0 10px;
  font-size: 14.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.est-step p { margin: 0; font-size: 15px; line-height: 1.72; color: var(--on-navy-body); font-weight: 300; }

/* --- Co-agents ---------------------------------------------------- */
.est-agents { background: var(--linen); padding: var(--section-y) var(--gutter); }
.est-agents__grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 44px; align-items: center;
}
.est-agents .est-h2 { margin: 0 0 18px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; letter-spacing: 0; }
.est-agents__body { margin: 0 0 16px; font-size: 15.5px; line-height: 1.75; color: var(--ink-body); font-weight: 300; max-width: 46ch; }
.est-agents ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 13px; max-width: 48ch; }
.est-agents li { display: flex; gap: 14px; font-size: 15px; line-height: 1.7; color: var(--navy); font-weight: 300; }
.est-agents li::before { content: "—"; color: var(--clay); font-family: 'Newsreader', Georgia, serif; }
.est-link {
  display: inline-block; border-bottom: 1px solid var(--clay); padding-bottom: 4px;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--navy);
}
.est-link:hover { color: var(--clay); }
.est-agents__figure { position: relative; margin: 0; }
.est-agents__figure .est-slot { width: 100%; aspect-ratio: 4 / 3; height: auto; }
.est-agents__quote {
  position: absolute; bottom: -1px; left: -1px;
  background: var(--navy); color: var(--bone);
  padding: 16px 20px; max-width: 72%; pointer-events: none;
}
.est-agents__quote p { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 18px; line-height: 1.35; }

/* --- About -------------------------------------------------------- */
.est-about { background: var(--bone); padding: var(--section-y) var(--gutter); }
.est-about__grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 44px; align-items: start;
}
.est-about__figure { margin: 0; }
.est-about__figure .est-slot { width: 100%; aspect-ratio: 4 / 3; height: auto; }
.est-about__caption {
  margin: 16px 0 0;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone);
}
.est-about .est-h2 { margin: 0 0 18px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; letter-spacing: 0; max-width: 22ch; }
.est-about__body { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: var(--ink-about); font-weight: 300; max-width: 50ch; }
.est-about__body--last { margin: 0 0 26px; }
.est-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
}
.est-fact { background: var(--bone); padding: 18px 16px; }
.est-fact__label { margin: 0 0 6px; font-family: 'Newsreader', Georgia, serif; font-size: 17px; }
.est-fact p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); font-weight: 300; }

/* --- Contact ------------------------------------------------------ */
.est-contact { background: var(--navy); color: var(--bone); padding: var(--section-y) var(--gutter) 0; }
.est-contact__grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 44px; align-items: start;
}
.est-contact .est-h2 {
  margin: 0 0 24px;
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1.16; letter-spacing: 0; max-width: 19ch;
}
.est-contact__lede { margin: 0 0 26px; font-size: 15.5px; line-height: 1.75; color: var(--on-navy-body); font-weight: 300; max-width: 40ch; }
.est-meta { display: grid; gap: 14px; max-width: 36ch; }
.est-meta__item { border-top: 1px solid rgba(246,242,234,0.22); padding-top: 16px; }
.est-meta__label { margin: 0 0 6px; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-navy-soft); }
.est-meta__value { margin: 0; font-size: 16.5px; color: var(--bone); font-weight: 300; }

.est-form { background: var(--bone); color: var(--navy); padding: 26px 26px 28px; }
.est-form__fields { display: grid; gap: 15px; }
.est-form__row { display: grid; gap: 8px; }
.est-form label, .est-form__legend {
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.est-form input[type="text"],
.est-form input[type="email"] {
  border: 0; border-bottom: 1px solid var(--field-line); background: transparent;
  padding: 10px 0; font-family: 'Sora', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 15px; color: var(--navy); outline: none;
}
.est-form input[type="text"]:focus,
.est-form input[type="email"]:focus { border-bottom-color: var(--clay); }
.est-form textarea {
  border: 1px solid var(--field-line); background: transparent; padding: 12px;
  font-family: 'Sora', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 15px; color: var(--navy); outline: none; resize: vertical;
}
.est-form textarea:focus { border-color: var(--clay); }
.est-intent { display: grid; gap: 10px; }
.est-intent__options { display: flex; flex-wrap: wrap; gap: 8px; }
.est-chip {
  border: 1px solid var(--field-line); background: transparent; color: var(--ink-body);
  padding: 9px 16px;
  font-family: 'Sora', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 13px; font-weight: 300; cursor: pointer;
  transition: all .18s ease;
}
.est-chip.is-on { border-color: var(--clay); background: var(--clay); color: var(--bone); font-weight: 500; }
.est-form__submit {
  background: var(--navy); color: var(--bone); border: 0; padding: 14px 16px;
  font-family: 'Sora', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; transition: background .2s ease;
}
.est-form__submit:hover { background: var(--clay); }
.est-form__note { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--stone); font-weight: 300; }
.est-form__thanks { display: grid; gap: 14px; padding: 26px 0; }
.est-form__thanks h3 { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.2; }
.est-form__thanks p { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--ink-body); font-weight: 300; }
.est-form__error {
  margin: 0 0 18px; padding: 12px 14px;
  border: 1px solid var(--clay); color: var(--clay);
  font-size: 13.5px; line-height: 1.6; font-weight: 300;
}

/* --- Responsive additions (no mobile artboard in the design) ------ */
@media (max-width: 860px) {
  .est-hero__inner { padding: 64px var(--gutter) 56px; }
  .est-services__head { gap: 32px; margin-bottom: 44px; }
  .est-agents__grid, .est-about__grid, .est-contact__grid { gap: 44px; }
  .est-form { padding: 26px 22px 28px; }
}

@media (max-width: 560px) {
  .est-hero__inner { padding: 60px var(--gutter) 54px; }
  .est-hero__rule { margin: 32px 0 24px; width: 140px; }
  .est-hero__lede { font-size: 16.5px; }
  .est-strip__inner { gap: 10px 24px; font-size: 11.5px; }
  .est-card { padding: 26px 22px 28px; }
  .est-agents__quote { position: static; max-width: none; padding: 20px 22px; }
  .est-agents__quote p { font-size: 20px; }
  .est-form__thanks h3 { font-size: 28px; }
}

/* --- Intent chips as radios (works without JS, same look as the design) --- */
.est-intent__radio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.est-intent__radio:checked + .est-chip {
  border-color: var(--clay); background: var(--clay); color: var(--bone); font-weight: 500;
}
.est-intent__radio:focus-visible + .est-chip { outline: 2px solid var(--clay); outline-offset: 2px; }
.est-chip:hover { border-color: var(--clay); }

/* Anchors clear the sticky header */
.est-page section[id] { scroll-margin-top: 64px; }