/* ============================================================
   Rockwell Health : "Contact" page styles
   Adds ONLY this page's section styles on top of the shared
   editorial system (../style.css owns tokens, header, footer,
   buttons, .ed-head, .ed-eyebrow, .ed-kicker, .ed-textlink).
   Page sub-prefix: ed-ct-

   Spine (deliberately not the homepage's light→light→sand→navy):
     1 · Lead : asymmetric: framing copy + the message FORM as the
         page's centerpiece, side by side, above the fold.
     2 · Other ways to reach us : sand band, 2x2 link rail.
     3 · Visit us : compact location lines (no maps, no photos);
         details live on the Locations page.
     4 · Closer : LIGHT card band (not navy) so we never stack two
         navy surfaces and the page closes warm, not heavy.
   ============================================================ */

/* ============================================================
   1 · Lead : the centerpiece. Copy rail on the left frames the
   page and carries the two fastest contacts; the form sits in an
   elevated card on the right, lifted above the section seam so it
   reads as the thing to do here.
   ============================================================ */
.ed-ct-lead{
  position:relative;
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper) 58%, var(--paper-2) 100%);
  overflow:hidden;
}
/* faint navy "9" hairline-arc motif, top-right, echoing the brand
   without competing with the form (pure decoration, aria-hidden) */
.ed-ct-lead::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-160px; right:-180px; width:520px; height:520px; border-radius:50%;
  border:1px solid var(--line-2);
  -webkit-mask-image:radial-gradient(circle at center, transparent 64%, #000 65%);
          mask-image:radial-gradient(circle at center, transparent 64%, #000 65%);
  opacity:.7;
}
.ed-ct-lead-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:0.82fr 1.28fr;
  gap:clamp(30px,3.2vw,52px); align-items:start;
  padding-block:clamp(54px,7.5vw,104px);
}

/* --- LEFT · framing copy + at-a-glance contacts --- */
.ed-ct-aside{ max-width:30rem; padding-top:clamp(4px,1.4vw,28px); }
.ed-ct-lead h1{
  font-size:clamp(2.6rem,5vw,4.1rem);
  line-height:1.02; letter-spacing:-.026em; color:var(--navy);
}
.ed-ct-lead h1 em{ font-style:italic; font-weight:600; color:var(--red); }
.ed-ct-lead-sub{
  margin-top:24px; max-width:40ch;
  font-size:clamp(1.08rem,1.3vw,1.24rem);
  line-height:1.62; color:var(--body-2);
}

/* at-a-glance: the two fastest direct contacts, as a tight list
   (icon + label + value), ruled, not carded */
.ed-ct-glance{
  margin-top:clamp(30px,3.4vw,44px);
  border-top:1px solid var(--line-2);
  max-width:30rem;
}
.ed-ct-glance-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:clamp(15px,1.7vw,19px) 0;
  border-bottom:1px solid var(--line);
}
.ed-ct-glance dt{
  display:flex; align-items:center; gap:13px;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--body-2);
}
.ed-ct-glance dd{ margin:0; }
.ed-ct-glance dd a{
  font-family:"Spectral",serif; font-weight:600;
  font-size:clamp(1.12rem,1.4vw,1.32rem); letter-spacing:-.012em;
  color:var(--navy); border-radius:var(--r-xs);
  transition:color var(--fast) var(--ease);
}
.ed-ct-glance dd a:hover{ color:var(--red-ink); }

/* shared small icon chip (also used in the lead glance) */
.ed-ct-ic{
  display:grid; place-items:center; flex:none;
  width:38px; height:38px; border-radius:var(--r-sm);
  background:var(--card); color:var(--navy);
  border:1px solid var(--line-2); box-shadow:var(--sh-1);
}
.ed-ct-ic svg{ width:19px; height:19px; }

/* --- RIGHT · message form, the centerpiece card --- */
.ed-ct-formcard{
  position:relative;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-3);
  padding:clamp(26px,3vw,46px);
}
/* crisp keyline so the warm card reads sharp on warm paper */
.ed-ct-formcard::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(40,34,80,.05);
}
.ed-ct-form-title{
  font-size:clamp(1.5rem,2.1vw,1.95rem); font-weight:600;
  letter-spacing:-.016em; line-height:1.1; color:var(--navy);
}
.ed-ct-form-intro{
  margin-top:10px; max-width:44ch;
  font-size:1rem; line-height:1.56; color:var(--body-2);
}

.ed-ct-form{
  margin-top:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; gap:clamp(16px,1.8vw,22px);
}
.ed-ct-row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.6vw,20px);
}
.ed-ct-field{ display:flex; flex-direction:column; gap:8px; }
.ed-ct-field label{
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.82rem; letter-spacing:.04em; color:var(--navy);
}
.ed-ct-field input,
.ed-ct-field textarea,
.ed-ct-field select{
  width:100%; font-family:"Figtree",sans-serif;
  font-size:1rem; line-height:1.5; color:var(--body);
  background:var(--paper); border:1.5px solid var(--line-2);
  border-radius:var(--r-sm); padding:.78em .95em;
  transition:border-color var(--fast) var(--ease),
             background var(--fast) var(--ease),
             box-shadow var(--fast) var(--ease);
  -webkit-appearance:none; appearance:none;
}
.ed-ct-field textarea{ resize:vertical; min-height:128px; }
.ed-ct-field input::placeholder,
.ed-ct-field textarea::placeholder{ color:var(--body-2); opacity:1; }
.ed-ct-field input:hover,
.ed-ct-field textarea:hover,
.ed-ct-field select:hover{ border-color:var(--line-3); }
.ed-ct-field input:focus,
.ed-ct-field textarea:focus,
.ed-ct-field select:focus{
  outline:none; border-color:var(--navy); background:var(--card);
  box-shadow:0 0 0 3px rgba(38,33,104,.12);
}
.ed-ct-field input:focus-visible,
.ed-ct-field textarea:focus-visible,
.ed-ct-field select:focus-visible{ box-shadow:var(--focus); border-color:var(--navy); }

/* select with custom chevron */
.ed-ct-select{ position:relative; }
.ed-ct-select select{ padding-right:2.6em; cursor:pointer; }
.ed-ct-select svg{
  position:absolute; right:.95em; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--navy); pointer-events:none;
}

.ed-ct-submit{ align-self:flex-start; margin-top:4px; }
.ed-ct-note{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:2px; padding-top:clamp(16px,1.8vw,20px);
  border-top:1px solid var(--line);
  font-size:.88rem; line-height:1.5; color:var(--body-2); max-width:52ch;
}
.ed-ct-note svg{ width:18px; height:18px; flex:none; color:var(--red-ink); margin-top:.06em; }
.ed-ct-note strong{ color:var(--body); font-weight:700; }

/* ============================================================
   2 · Other ways to reach us : sand band, 2x2 link rail.
   Distinct, scannable routes (book, call, telehealth, portal),
   each a full-width target with icon + label + arrow.
   ============================================================ */
.ed-ct-ways-sec{
  padding-block:var(--sec);
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.ed-ct-ways{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,22px);
}
.ed-ct-ways a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(16px,1.8vw,20px); height:100%;
  padding:clamp(20px,2.2vw,28px);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
  transition:transform var(--med) var(--ease),
             box-shadow var(--med) var(--ease),
             border-color var(--med) var(--ease);
}
.ed-ct-ways a:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.ed-ct-ways a:focus-visible{ box-shadow:var(--focus); }
.ed-ct-way-ic{
  display:grid; place-items:center; flex:none;
  width:48px; height:48px; border-radius:var(--r-sm);
  background:var(--paper-2); color:var(--navy);
  border:1px solid var(--line-2);
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.ed-ct-way-ic svg{ width:23px; height:23px; }
.ed-ct-way-txt{
  display:flex; flex-direction:column; gap:4px;
  font-size:.95rem; line-height:1.5; color:var(--body-2);
}
.ed-ct-way-txt strong{
  font-family:"Spectral",serif; font-weight:600; color:var(--navy);
  font-size:1.2rem; letter-spacing:-.012em; line-height:1.18;
}
.ed-ct-way-go{
  width:20px; height:20px; flex:none; color:var(--body-2);
  transition:transform var(--fast) var(--ease), color var(--fast) var(--ease);
}
.ed-ct-ways a:hover .ed-ct-way-ic{ background:var(--navy); color:#ff8a80; border-color:var(--navy); }
.ed-ct-ways a:hover .ed-ct-way-go{ color:var(--red-ink); transform:translateX(3px); }

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ed-ct-ways li{
      animation:ed-rise .6s var(--ease) both;
      animation-timeline:view(); animation-range:entry 2% cover 22%;
    }
    .ed-ct-ways li:nth-child(2){ animation-range:entry 5% cover 24%; }
    .ed-ct-ways li:nth-child(3){ animation-range:entry 8% cover 26%; }
    .ed-ct-ways li:nth-child(4){ animation-range:entry 11% cover 28%; }
  }
}

/* ============================================================
   3 · Visit us : COMPACT location summary on paper. One tight
   line per location (pin + name + one-line address + phone +
   "See location details"). No photos, no hours, no maps; the
   Locations page owns those.
   ============================================================ */
.ed-ct-visit{ padding-block:var(--sec); background:var(--paper); }
.ed-ct-visit-head{ max-width:60ch; margin-bottom:clamp(30px,3.4vw,46px); }
.ed-ct-visit-head h2{
  font-size:clamp(2rem,3.4vw,2.85rem); font-weight:600;
  letter-spacing:-.02em; line-height:1.08; color:var(--navy);
}
.ed-ct-visit-lede{
  margin-top:18px; max-width:54ch;
  font-size:clamp(1.04rem,1.2vw,1.18rem); line-height:1.6; color:var(--body-2);
}

.ed-ct-places{
  border-top:1px solid var(--line-2);
}
.ed-ct-place{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center; gap:clamp(16px,2.4vw,30px);
  padding:clamp(22px,2.6vw,30px) 0;
  border-bottom:1px solid var(--line);
}
.ed-ct-place-pin{
  display:grid; place-items:center; flex:none;
  width:46px; height:46px; border-radius:var(--r-sm);
  background:var(--paper-2); color:var(--navy);
  border:1px solid var(--line-2);
}
.ed-ct-place-pin svg{ width:22px; height:22px; }
.ed-ct-place-main{ min-width:0; }
.ed-ct-place-main h3{
  font-size:clamp(1.3rem,1.8vw,1.6rem); font-weight:600;
  letter-spacing:-.014em; line-height:1.12; color:var(--navy);
}
.ed-ct-place-addr{
  margin-top:5px; font-size:.98rem; line-height:1.45; color:var(--body-2);
}
.ed-ct-place-call{
  font-family:"Figtree",sans-serif; font-weight:600; font-size:1rem;
  color:var(--body); white-space:nowrap; border-radius:var(--r-xs);
  transition:color var(--fast) var(--ease);
}
.ed-ct-place-call:hover{ color:var(--red-ink); }
.ed-ct-place-link{ white-space:nowrap; font-size:.98rem; }

.ed-ct-visit-all{ margin-top:clamp(26px,3vw,36px); }

/* ============================================================
   4 · Closer : LIGHT card band (deliberately NOT navy, so we
   never stack two navy surfaces). A confident, framed sand→card
   panel: copy left, CTAs right.
   ============================================================ */
.ed-ct-closer{
  padding-block:clamp(56px,7vw,104px);
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.ed-ct-closer-in{
  position:relative;
  display:grid; grid-template-columns:1.2fr auto;
  align-items:center; gap:clamp(28px,4vw,56px);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
  padding:clamp(30px,4vw,56px);
}
/* short red rule above the heading : same brand motif as the hero
   kicker (not a side-stripe accent) */
.ed-ct-closer-rule{
  display:block; width:38px; height:2px; border-radius:2px;
  background:var(--red); margin-bottom:clamp(16px,1.8vw,22px);
}
.ed-ct-closer-copy h2{
  font-size:clamp(1.9rem,3.2vw,2.7rem); font-weight:600;
  letter-spacing:-.022em; line-height:1.06; color:var(--navy);
}
.ed-ct-closer-copy p{
  margin-top:14px; max-width:46ch;
  font-size:clamp(1.04rem,1.2vw,1.16rem); line-height:1.58; color:var(--body-2);
}
.ed-ct-closer-cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* ============================================================
   Responsive : 1024 (tablet)
   ============================================================ */
@media (max-width:1024px){
  /* lead: form drops beneath the framing copy */
  .ed-ct-lead-in{ grid-template-columns:1fr; gap:clamp(32px,5vw,48px); }
  .ed-ct-aside{ max-width:62ch; padding-top:0; }
  .ed-ct-lead-sub{ max-width:60ch; }
  .ed-ct-glance{ max-width:520px; }
  .ed-ct-lead::before{ width:380px; height:380px; top:-130px; right:-150px; }

  /* closer stacks; CTAs sit beneath copy */
  .ed-ct-closer-in{ grid-template-columns:1fr; gap:clamp(24px,4vw,34px); }
}

/* ============================================================
   Responsive : 760
   ============================================================ */
@media (max-width:760px){
  /* ways → single column */
  .ed-ct-ways{ grid-template-columns:1fr; }

  /* visit lines wrap: name/address up top, call + link beneath */
  .ed-ct-place{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "pin main"
      ".   meta";
    row-gap:14px; column-gap:18px;
    align-items:start;
  }
  .ed-ct-place-pin{ grid-area:pin; }
  .ed-ct-place-main{ grid-area:main; }
  .ed-ct-place-call{
    grid-area:meta; justify-self:start; align-self:center;
  }
  .ed-ct-place-link{
    grid-column:1 / -1; justify-self:start;
  }
}

/* ============================================================
   Responsive : 560 (phone / 390 target)
   ============================================================ */
@media (max-width:560px){
  /* form: name/email/phone fields go single column */
  .ed-ct-row{ grid-template-columns:1fr; }
  .ed-ct-submit{ align-self:stretch; justify-content:center; }

  /* at-a-glance rows stack value beneath label so long values never crowd */
  .ed-ct-glance-row{
    flex-direction:column; align-items:flex-start; gap:8px;
  }

  /* closer CTAs full-width */
  .ed-ct-closer-cta{ width:100%; }
  .ed-ct-closer-cta .ed-btn{ flex:1 1 auto; justify-content:center; }
}

/* ============================================================
   Reduced motion : neutralize this page's reveals/hovers
   defensively (shared sheet disables transitions globally too)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ed-ct-ways li{ animation:none; opacity:1; transform:none; }
  .ed-ct-ways a:hover{ transform:none; }
  .ed-ct-ways a:hover .ed-ct-way-go{ transform:none; }
}
