/* Contact (/contact). Sits on top of /site.css ("Modern Brokerage"): navy
   only as gradients on dark surfaces, gold fills with navy text, 28px
   sections, 20px cards, 14px images, pills for every control.

   Lead plumbing is untouched: #contactForm (funnel "contact") keeps the live
   fields exactly and is wired by the inline wireForm call after /main.js.
   Labels here wrap the fields; main.js reads placeholder / aria-label. */

/* ---------- Header: this page's nav item ---------- */
.hd .nav-link.is-active{ background:rgba(255,255,255,.2); }
.hd.is-solid .nav-link.is-active{ background:#fff; box-shadow:0 1px 3px rgba(7,25,49,.1); }

/* ---------- Compact header band: centred headline, no photo ----------
   site.js watches .hero-card for the header's solid state and the mobile
   CTA, so the band is the page's .hero-card. The contact block overlaps it. */
.ct-hero .hero-card{
  height:auto; justify-content:flex-start;
  padding:calc(var(--hd-h) + 58px) 24px clamp(150px, 13vw, 196px);
  background:
    radial-gradient(55% 80% at 88% 0%, rgba(201,164,92,.20) 0%, rgba(201,164,92,0) 62%),
    radial-gradient(45% 70% at 6% 100%, rgba(201,164,92,.10) 0%, rgba(201,164,92,0) 60%),
    linear-gradient(160deg, #16396A 0%, #0B2446 44%, #071931 82%, #050F20 100%);
}
.ct-hero .hero-body{ max-width:860px; }

.ct-crumbs{ display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:0 16px 0 6px; border-radius:999px; font-size:14px; font-weight:500;
  background:rgba(4,13,27,.34); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.ct-crumbs a{ position:relative; display:inline-flex; align-items:center; min-height:40px; padding:0 8px 0 10px; border-radius:999px; color:rgba(255,255,255,.78); transition:color .2s ease; }
.ct-crumbs a::after{ content:""; position:absolute; inset:-4px 0; }
.ct-crumbs a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.ct-crumbs i{ font-size:12px; opacity:.6; }
.ct-crumbs span{ padding-left:6px; color:#fff; }

.ct-title{ margin-top:24px; font-size:clamp(2.4rem, 4.8vw, 4.4rem); font-weight:500; letter-spacing:-0.04em; line-height:1.02; text-wrap:balance; }
.ct-title .ln{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.ct-title .ln > span{ display:inline-block; animation:lineUp 1.1s var(--ease) both; animation-delay:calc(.2s + var(--i, 0) * .12s); }
.ct-title em{ font-style:normal; color:var(--accent-tint); }
.ct-sub{ margin-top:18px; font-size:clamp(16px, 1.3vw, 18.5px); line-height:1.55; color:rgba(255,255,255,.84); max-width:52ch; text-wrap:balance; }

/* ---------- Contact block: one wide card lifted over the band ---------- */
.ct-stage{ position:relative; z-index:10; margin-top:calc(-1 * clamp(120px, 10.5vw, 156px)); padding:0 24px; scroll-margin-top:calc(var(--hd-h) + 20px); }
.ct-card{
  max-width:1180px; margin:0 auto; padding:12px;
  display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); gap:12px;
  background:#fff; border-radius:var(--r-sec); border:1px solid var(--line);
  box-shadow:0 40px 80px -40px rgba(7,25,49,.45), 0 8px 24px -12px rgba(7,25,49,.12);
  animation:riseBig 1s var(--ease) .45s both;
}
.ct-h{ font-size:clamp(1.55rem, 2.1vw, 1.9rem); font-weight:500; letter-spacing:-0.03em; line-height:1.12; }
.ct-note{ margin-top:10px; font-size:15.5px; line-height:1.6; color:var(--muted); max-width:46ch; }

/* Left: the direct ways in. */
.ct-reach{ background:var(--panel); border-radius:var(--r-card); padding:clamp(24px, 3vw, 40px); }

/* Phone first: it is the quickest route to a person, so it is the one
   dark surface in the card. */
.ct-phone{
  display:grid; grid-template-columns:56px 1fr 44px; align-items:center; gap:16px;
  margin-top:24px; padding:14px 14px 14px 14px; border-radius:var(--r-card); color:#fff;
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(201,164,92,.22) 0%, rgba(201,164,92,0) 60%),
    var(--navy-grad);
  box-shadow:0 20px 40px -24px rgba(7,25,49,.6);
  transition:transform .4s var(--ease), box-shadow .4s ease;
}
.ct-phone:hover{ transform:translateY(-2px); box-shadow:0 26px 50px -24px rgba(7,25,49,.7); }
.ct-phone:active{ transform:scale(.99); }
.ct-phone-ic{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--ink); font-size:25px; }
.ct-phone-t{ display:flex; flex-direction:column; min-width:0; }
.ct-phone-t small{ font-size:13.5px; font-weight:500; color:rgba(255,255,255,.72); }
.ct-phone-t b{ font-size:clamp(1.55rem, 2.3vw, 2rem); font-weight:500; letter-spacing:-0.03em; line-height:1.15; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ct-go{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none; background:#fff; color:var(--ink); font-size:18px; transition:transform .35s var(--ease), background-color .25s ease; }
.ct-phone:hover .ct-go{ transform:rotate(45deg); }
.ct-phone-note{ margin-top:10px; padding:0 4px; font-size:14px; line-height:1.55; color:var(--muted); }

.ct-label{ margin-top:28px; font-size:14px; font-weight:600; color:var(--ink-2); }
.ct-people{ display:grid; gap:8px; margin-top:12px; }
.ct-person{
  display:grid; grid-template-columns:48px 1fr 24px; align-items:center; gap:14px;
  min-height:68px; padding:10px 18px 10px 10px; border-radius:var(--r-img); background:#fff; border:1px solid var(--line);
  transition:border-color .25s ease, box-shadow .3s ease;
}
.ct-person:hover{ border-color:var(--line-2); box-shadow:0 14px 28px -20px rgba(7,25,49,.45); }
.ct-person img{ width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:50% 20%; }
.ct-person-t{ display:flex; flex-direction:column; min-width:0; line-height:1.35; }
.ct-person-t b{ font-size:15.5px; font-weight:500; }
.ct-person-t span{ font-size:14px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .2s ease; }
.ct-person:hover .ct-person-t span{ color:var(--accent-text); }
.ct-person > i{ font-size:20px; color:var(--accent-text); }

.ct-facts{ margin:28px 0 0; display:grid; gap:0; border-top:1px solid var(--line-2); }
.ct-facts > div{ padding:16px 4px; }
.ct-facts > div + div{ border-top:1px solid var(--line); }
.ct-facts dt{ display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; color:var(--ink); }
.ct-facts dt i{ font-size:19px; color:var(--accent-text); }
.ct-facts dd{ margin:6px 0 0 29px; font-size:14.5px; line-height:1.55; color:var(--muted); }

/* Right: the form. */
.ct-form{ display:flex; flex-direction:column; padding:clamp(22px, 3.4vw, 44px) clamp(18px, 3.4vw, 44px) clamp(20px, 2.6vw, 32px); }
.ct-quote{ margin:auto 0 0; padding-top:24px; border-top:1px solid var(--line); }
.ct-quote > *{ max-width:52ch; }
.ct-quote .stars{ color:var(--accent-text); font-size:15px; }
.ct-quote blockquote{ margin:10px 0 0; }
.ct-quote blockquote p{ font-size:16.5px; line-height:1.55; color:var(--ink-2); letter-spacing:-0.005em; }
.ct-quote figcaption{ margin-top:10px; font-size:14px; color:var(--muted); }
#contactForm{ margin-top:26px; }
.ct-fld{ display:block; }
.ct-fld > span{ display:block; font-size:14px; font-weight:500; color:var(--ink-2); margin:0 0 7px 4px; }
#contactForm textarea.field{ height:150px; }
#contactForm .btn{ width:100%; margin-top:6px; }
#contactSuccess.show{ margin-top:26px; }
.ct-form .form-error{ margin-top:12px; }
.ct-micro{ display:flex; align-items:center; justify-content:center; gap:8px; margin:16px 0 28px; font-size:13.5px; color:var(--muted); text-align:center; }
.ct-micro i{ font-size:16px; color:var(--accent-text); }

/* ---------- Quick routes: one gold feature plus three rows ---------- */
.ct-routes-head{ margin-bottom:clamp(24px, 3vw, 36px); }
.ct-routes-head .h2{ max-width:18ch; text-wrap:balance; }
.ct-routes{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); gap:14px; }

.ct-route-gold{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  min-height:100%; padding:32px; border-radius:var(--r-sec); color:var(--ink); overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg, #F6E3A6 0%, #E6C572 26%, #D4AE5E 52%, #EBCB7F 74%, #F7E6AE 100%);
  box-shadow:0 30px 60px -34px rgba(185,140,50,.8), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .5s var(--ease), box-shadow .5s ease;
}
.ct-route-gold:hover{ transform:translateY(-4px); box-shadow:0 36px 70px -32px rgba(185,140,50,.9), inset 0 1px 0 rgba(255,255,255,.6); }
.ct-route-gold:active{ transform:scale(.99); }
.ct-route-gold .ic{ width:60px; height:60px; font-size:28px; background:rgba(255,255,255,.6); color:var(--ink); transition:transform .5s var(--ease); }
.ct-route-gold:hover .ic{ transform:translateY(-3px) rotate(-6deg); }
.ct-rg-t{ display:block; margin-top:auto; padding-top:40px; }
.ct-rg-t b{ display:block; font-size:clamp(1.6rem, 2.4vw, 2.1rem); font-weight:500; letter-spacing:-0.035em; line-height:1.08; }
.ct-rg-t span{ display:block; margin-top:12px; font-size:15.5px; line-height:1.6; color:rgba(7,25,49,.8); max-width:38ch; }
.ct-rg-cta{ display:inline-flex; align-items:center; gap:12px; margin-top:26px; height:52px; padding:0 6px 0 22px; border-radius:999px; background:var(--ink); color:#fff; font-size:15px; font-weight:500; white-space:nowrap; }
.ct-rg-cta .ct-go{ width:40px; height:40px; }
.ct-route-gold:hover .ct-rg-cta .ct-go{ transform:rotate(45deg); }

.ct-rows{ display:grid; grid-template-rows:repeat(3, 1fr); border:1px solid var(--line); border-radius:var(--r-sec); overflow:hidden; }
.ct-row{ display:grid; grid-template-columns:52px 1fr 44px; align-items:center; gap:18px; padding:26px 28px; transition:background-color .3s ease; }
.ct-row + .ct-row{ border-top:1px solid var(--line); }
.ct-row:hover{ background:var(--panel); }
.ct-row .ic{ background:var(--accent-soft); transition:transform .5s var(--ease); }
.ct-row:hover .ic{ transform:translateY(-3px) rotate(-6deg); }
.ct-row-t b{ display:block; font-size:17.5px; font-weight:500; letter-spacing:-0.015em; }
.ct-row-t span{ display:block; margin-top:4px; font-size:14.5px; line-height:1.5; color:var(--muted); }
.ct-row .ct-go{ background:var(--panel); }
.ct-row:hover .ct-go{ background:var(--ink); color:#fff; transform:rotate(45deg); }

/* ---------- Meet in person: photo with copy on the empty wall ---------- */
.ct-meet{ position:relative; overflow:hidden; border-radius:var(--r-sec); background:var(--panel-2); min-height:clamp(380px, 32vw, 440px); display:flex; align-items:center; justify-content:flex-end; }
.ct-meet-img{ position:absolute; inset:0; }
.ct-meet-img img{ width:100%; height:100%; object-fit:cover; object-position:0% 45%; }
.ct-meet-img::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(241,237,232,0) 38%, rgba(241,237,232,.55) 60%, rgba(241,237,232,.78) 100%); }
.ct-meet-copy{ position:relative; width:min(44%, 460px); margin-right:clamp(28px, 5vw, 72px); }
.ct-meet-copy .h2{ max-width:14ch; text-wrap:balance; }
.ct-meet-copy p{ margin-top:16px; font-size:17px; line-height:1.6; color:var(--ink-2); max-width:34ch; }
.ct-meet-copy .pill{ margin-top:26px; }

/* ---------- Mobile CTA steps aside while the form is on screen ---------- */
@media (max-width:820px){
  body.ct-form-in .mobile-cta{ transform:translateY(calc(100% + 24px)); }
}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .ct-card{ grid-template-columns:1fr; }
  .ct-form{ order:-1; }
  .ct-routes{ grid-template-columns:1fr; }
  .ct-rg-t{ padding-top:28px; }
  .ct-meet{ display:block; min-height:0; background:var(--panel); }
  .ct-meet-img{ position:relative; aspect-ratio:16/9; }
  .ct-meet-img img{ object-position:4% 40%; }
  .ct-meet-img::after{ display:none; }
  .ct-meet-copy{ width:auto; margin:0; padding:28px clamp(20px, 4vw, 40px) 32px; }
  .ct-meet-copy .h2{ max-width:none; }
}
@media (max-width:760px){
  .ct-hero .hero-card{ min-height:0; justify-content:flex-start; padding:calc(var(--hd-h) + 26px) 18px 104px; border-radius:0 0 24px 24px; }
  .ct-crumbs{ min-height:36px; font-size:13.5px; }
  .ct-crumbs a{ min-height:36px; }
  .ct-title{ margin-top:16px; font-size:clamp(2.1rem, 9.8vw, 2.7rem); line-height:1.05; }
  .ct-sub{ margin-top:12px; font-size:15.5px; }

  .ct-stage{ margin-top:-80px; padding:0 12px; }
  .ct-card{ padding:8px; gap:8px; border-radius:24px; }
  .ct-form{ padding:22px 12px 16px; }
  #contactForm{ margin-top:20px; }
  #contactForm textarea.field{ height:124px; }
  .ct-reach{ padding:22px 14px 8px; border-radius:18px; }
  .ct-phone{ grid-template-columns:48px 1fr 40px; gap:12px; padding:12px; margin-top:18px; }
  .ct-phone-ic{ width:48px; height:48px; font-size:22px; }
  .ct-phone-t b{ font-size:1.5rem; }
  .ct-go{ width:40px; height:40px; font-size:17px; }
  .ct-person{ grid-template-columns:44px 1fr 20px; gap:12px; padding:8px 14px 8px 8px; }
  .ct-person img{ width:44px; height:44px; }
  .ct-person-t span{ font-size:13.5px; }
  .ct-facts dd{ margin-left:0; }

  .ct-routes{ gap:10px; }
  .ct-route-gold{ padding:22px; border-radius:24px; }
  .ct-route-gold .ic{ width:50px; height:50px; font-size:24px; }
  .ct-rg-t{ padding-top:22px; }
  .ct-rg-t span{ font-size:15px; }
  .ct-rg-cta{ width:100%; justify-content:space-between; margin-top:20px; }
  .ct-rows{ border-radius:24px; grid-template-rows:none; }
  .ct-row{ grid-template-columns:44px 1fr 40px; gap:14px; padding:18px 16px; }
  .ct-row .ic{ width:44px; height:44px; font-size:21px; }
  .ct-row-t b{ font-size:16.5px; }
  .ct-row-t span{ font-size:14px; }

  .ct-meet{ border-radius:24px; }
  .ct-meet-img{ aspect-ratio:4/3; }
  .ct-meet-img img{ object-position:6% 40%; }
  .ct-meet-copy{ padding:22px 20px 22px; }
  .ct-meet-copy p{ font-size:16px; }
  .ct-meet-copy .pill{ width:100%; justify-content:space-between; }
}

@media (prefers-reduced-motion:reduce){
  .ct-title .ln > span, .ct-card{ animation:none !important; }
}
@media (prefers-reduced-transparency:reduce){
  .ct-crumbs{ background:rgba(7,25,49,.9); -webkit-backdrop-filter:none; backdrop-filter:none; }
}