/* =====================================================================
   Berolink — Chapter 5 · Contact
   Reuses warm tokens + the .ap-* kit (home → nav → approach → contact).
   Register: same charter as Company — gardenia hero, cream-hi body, the
   weight carried by a single framed article (here, the contact directory).
   ===================================================================== */

.ct-wrap{ background:var(--cream-hi); }

/* ============================ HERO (gardenia) ========================== */
.ct-intro{ background:var(--gardenia); padding-top:clamp(3rem,6vh,5rem); }
.ct-intro .ap-h{ font-size:clamp(2rem,4.4vw,3.05rem); line-height:1.07; max-width:18ch;
  margin-top:clamp(14px,2.2vh,20px); }
.ct-intro .ap-lead{ max-width:54ch; }
.ct-intro .ap-lead .em{ color:var(--umber); font-weight:600; font-style:normal; }

/* ============================ DIRECTORY (framed register) ============== */
.ct-directory{ padding-top:clamp(3.4rem,6vh,5rem); }
.ct-frame{ max-width:var(--maxw); margin:0 auto;
  border:1px solid var(--line); border-top:2px solid var(--peri-deep); border-radius:6px;
  padding:clamp(30px,5.5vh,64px) clamp(24px,4.5vw,58px); }

.ct-path{ display:grid; grid-template-columns:minmax(0,1.6fr) auto;
  gap:clamp(1rem,4vw,3.2rem); align-items:center;
  padding:clamp(22px,3.6vh,34px) 0; border-top:1px solid var(--line); }
.ct-path:first-child{ border-top:0; padding-top:0; }
.ct-path .eyebrow{ color:var(--peri-deep); }
.ct-path .lead{ font-family:var(--body); color:var(--taupe);
  font-size:clamp(0.98rem,1.4vw,1.1rem); line-height:1.6; margin:0.62em 0 0; max-width:50ch; }
.ct-path .lead .em{ color:var(--umber); font-weight:600; font-style:normal; }

/* CTA — restrained text-link; the bold pills live in the footer below */
.ct-cta{ font-family:var(--body); font-weight:600; font-size:clamp(0.95rem,1.3vw,1.05rem);
  color:var(--umber); display:inline-flex; align-items:center; gap:0.5em; white-space:nowrap;
  border-bottom:1px solid var(--line); padding-bottom:3px;
  transition:color .3s ease, border-color .3s ease, gap .3s ease; }
.ct-cta .ar{ transition:transform .3s ease; }
.ct-cta:hover, .ct-cta:focus-visible{ color:var(--peri-deep); border-color:var(--peri-deep); }
.ct-cta:hover .ar, .ct-cta:focus-visible .ar{ transform:translateX(4px); }

/* ============================ RESPONSIVE ============================ */
@media (max-width:860px){
  .ct-frame{ padding:clamp(24px,4.5vh,40px) clamp(20px,5vw,30px); }
}
@media (max-width:680px){
  .ct-path{ grid-template-columns:1fr; gap:1rem; align-items:start; }
}