/* ============================================================
   L Brother — Sections, part 1
   Hero, trust strip, section headers, services, consultation form.
   ============================================================ */

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */

.hero {
  position: relative;
  padding-top: clamp(140px, 17vh, 210px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.hero h1 {
  margin-bottom: 26px;
}

.hero .lead {
  margin-bottom: 34px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
}

.hero-note .dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tw-accent);
}

/* ------------------------------------------------------------
   Hero constellation — abstract brand shapes instead of photos
   ------------------------------------------------------------ */

.constellation {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 340px;
}

.shape {
  position: absolute;
  border-radius: 50%;
}

.shape.pill {
  border-radius: var(--r-pill);
}

/* Main navy disc carrying the LB glyph */
.c-main {
  inset: 8% 6% 18% 12%;
  background: var(--tw-ink);
  overflow: hidden;
}

/* Soft steel glow bleeding in from the bottom-left */
.c-main::after {
  content: "";
  position: absolute;
  left: -10%;
  bottom: -14%;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--tw-accent-soft), transparent 70%);
  opacity: .85;
}

.c-main .glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(60px, 13vw, 150px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  opacity: .96;
}

/* Satellite shapes */
.c-2 {
  top: 2%;
  right: 2%;
  width: 34%;
  height: 34%;
  background: var(--tw-accent);
}

.c-3 {
  top: 18%;
  left: 0;
  width: 20%;
  height: 20%;
  background: transparent;
  border: 2px solid var(--ink);
}

.c-4 {
  right: 8%;
  bottom: 6%;
  width: 46%;
  height: 20%;
  background: var(--tint);
}

/* Orbit rings */
.orbit {
  position: absolute;
  inset: -6% -4%;
  border: 1.4px solid var(--tw-accent-soft);
  border-radius: 50%;
  opacity: .45;
  pointer-events: none;
}

.orbit.o2 {
  inset: 8% 16%;
  border-style: dashed;
  opacity: .3;
}

/* Floating round action badge */
.sat {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: var(--sh-card);
  transition: transform .25s var(--ease-out);
}

.sat svg {
  width: 22px;
  height: 22px;
}

.sat:hover {
  transform: scale(1.08);
}

/* ------------------------------------------------------------
   Trust strip
   ------------------------------------------------------------ */

.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 40px;
  padding-block: 30px;
  border-block: 1px solid var(--line);
}

.trust-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.trust-item b {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.trust-item span {
  max-width: 18ch;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
}

/* ------------------------------------------------------------
   Section header
   ------------------------------------------------------------ */

.sec-head {
  max-width: 760px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.sec-head .eyebrow {
  margin-bottom: 18px;
}

.sec-head .lead {
  margin-top: 20px;
}

/* Title left, supporting note right */
.sec-head--split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  max-width: none;
}

/* ------------------------------------------------------------
   Services
   ------------------------------------------------------------ */

.svc-group {
  margin-top: clamp(40px, 5vw, 64px);
}

.svc-group:first-of-type {
  margin-top: 0;
}

.svc-group-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.svc-group-label h3 {
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--granite);
  white-space: nowrap;
}

.svc-group-label .rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 300px;
  padding: 32px 30px 30px;
  background: var(--lifted);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition:
    transform    .3s var(--ease),
    box-shadow   .3s var(--ease),
    border-color .3s var(--ease);
}

.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-card);
  border-color: transparent;
}

/* Circular icon with a small accent pill */
.svc-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 64px;
  background: var(--tw-ink);
  border-radius: 50%;
  color: #fff;
}

.svc-icon svg {
  width: 30px;
  height: 30px;
}

.svc-icon::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 2px;
  width: 20px;
  height: 12px;
  background: var(--tw-accent);
  border-radius: var(--r-pill);
}

.svc-card h4 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.svc-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--slate);
}

.svc-card .svc-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.svc-card .svc-more svg {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--ease-out);
}

.svc-card:hover .svc-more svg {
  transform: translateX(4px);
}

/* Oversized ghost numeral in the card corner */
.svc-card .ghost-no {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--whisper);
  pointer-events: none;
}

/* ------------------------------------------------------------
   Consultation form — dark panel + white card
   ------------------------------------------------------------ */

.form-section {
  position: relative;
  background: var(--tw-ink);
  color: #fff;
  border-radius: var(--r-card);
  overflow: hidden;
}

.form-wrap {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 0;
}

/* Left: copy and messenger shortcuts */
.form-intro {
  position: relative;
  padding: clamp(40px, 5vw, 68px);
}

.form-intro .eyebrow {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, .6);
}

.form-intro .eyebrow::before {
  background: var(--tw-accent);
}

.form-intro h2 {
  margin-bottom: 20px;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.form-intro p {
  max-width: 42ch;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
}

.form-msgs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 34px;
}

.form-msgs .label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.msg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.msg-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r-pill);
  transition: all .2s var(--ease);
}

.msg-chip svg {
  width: 18px;
  height: 18px;
}

.msg-chip:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

/* Decorative ring bleeding off the panel corner */
.form-deco {
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  border: 1.4px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
}

.form-deco::after {
  content: "";
  position: absolute;
  top: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: var(--tw-accent);
  border-radius: 50%;
  opacity: .5;
}

/* Right: the form card itself */
.form-card {
  padding: clamp(36px, 4vw, 52px);
  background: var(--lifted);
  color: var(--ink);
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--granite);
}

.field input {
  width: 100%;
  padding: 15px 18px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition:
    border-color .2s var(--ease),
    box-shadow   .2s var(--ease);
}

.field input::placeholder {
  color: #9BA3B8;
}

.field input:focus {
  outline: none;
  border-color: var(--tw-ink);
  box-shadow: 0 0 0 4px rgba(46, 58, 86, .09);
}

.field input.invalid {
  border-color: #C2334A;
  box-shadow: 0 0 0 4px rgba(194, 51, 74, .12);
}

/* One field per row; the grid keeps the gap consistent */
.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.field .err {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #C2334A;
}

.field input.invalid + .err {
  display: block;
}

/* Segmented radio control (meeting format) */
.seg {
  display: flex;
  gap: 8px;
}

.seg label {
  flex: 1;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.seg label span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--granite);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: all .2s var(--ease);
}

.seg label span svg {
  width: 18px;
  height: 18px;
}

.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg input:checked + span {
  background: var(--tw-ink);
  color: #fff;
  border-color: var(--tw-ink);
}

.form-card .btn {
  width: 100%;
  margin-top: 8px;
}

/* Success state — swapped in by JS after a successful submit */
.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 10px;
  text-align: center;
}

.form-success.show {
  display: flex;
}

.form-success .ok {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: #E7F5EC;
  color: #2E8B57;
  border-radius: 50%;
}

.form-success .ok svg {
  width: 34px;
  height: 34px;
}

.form-success h3 {
  font-size: 24px;
  font-weight: 800;
}

.form-success p {
  max-width: 32ch;
  color: var(--slate);
}