/* Let's Connect page — measured proportionally from the client mock-up.
   Uses room-chairs.png: the locked template scene with the mock's armchairs,
   table and their shadows composited in, so grading matches the rest of the site. */

.connect-body{background:#ded0c2}
.connect{
  position:relative;overflow:hidden;
  background:
    linear-gradient(to bottom,rgba(222,208,194,0) 0,rgba(222,208,194,0) 50vw,#ded0c2 57vw),
    url('../assets/img/room-chairs.webp') center top / 100% auto no-repeat,
    #ded0c2;
}
.connect__inner{max-width:1440px;margin:0 auto;padding:156px 150px 24px;position:relative}
.pink{color:var(--accent)}

/* Top row ------------------------------------------------------ */
.connect__top{display:flex;justify-content:space-between;align-items:flex-start;gap:60px}
.connect__intro{flex:0 0 auto;max-width:620px}
.connect__eyebrow{
  margin:0;
  font:var(--text-eyebrow);font-size:13px;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--accent);
}
.connect__eyebrow-rule{display:block;width:46px;height:2px;margin-top:10px;background:var(--accent)}
.connect__title{
  margin:26px 0 0;font-size:56px;line-height:1.14;letter-spacing:-.01em;
  font-weight:var(--fw-bold);color:var(--text-heading);
}
.connect__lede{margin:22px 0 0;font-size:21px;line-height:1.4;color:var(--text-heading)}
.connect__rule{display:block;width:46px;height:2px;margin-top:16px;background:var(--accent)}
.connect__body{margin:20px 0 0;font-size:15.5px;line-height:1.7;color:var(--text-heading)}

/* Contact card ------------------------------------------------- */
.ccard{
  display:flex;align-items:stretch;
  width:100%;max-width:620px;
  overflow:hidden;               /* guarantees content can never escape the panel */
  margin-top:54px;               /* sits a line lower than the paragraph above */
  background:linear-gradient(180deg,#f9f3ea,#f4ece1);
  border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 10px 24px -14px rgba(38,38,38,.26),0 0 0 1px rgba(38,38,38,.04);
}
.ccard__item{
  flex:1 1 0;display:flex;align-items:center;gap:16px;
  padding:20px 20px;color:var(--text-heading);min-width:0;
}
.ccard__item:hover .ccard__value{color:var(--accent-pressed)}
.ccard__badge{
  flex:0 0 auto;width:56px;height:56px;border-radius:50%;
  background:#fdf8f1;
  box-shadow:0 6px 14px -8px rgba(38,38,38,.3),inset 0 0 0 1px rgba(255,255,255,.85);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-heading);
}
.ccard__text{display:flex;flex-direction:column;gap:6px;min-width:0}
.ccard__label{
  font-size:12px;font-weight:var(--fw-semibold);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-heading);
}
.ccard__value{font-size:12.5px;line-height:1.5;color:var(--text-body);overflow-wrap:anywhere}
.ccard__divider{width:1px;margin:16px 0;background:rgba(38,38,38,.14)}

/* Actions ------------------------------------------------------ */
.connect__actions{display:flex;align-items:center;gap:28px;margin-top:30px;flex-wrap:wrap}
.connect__btn{height:54px;padding:0 26px;border-radius:14px;font-size:16px}
.connect__forward{
  display:inline-flex;align-items:center;gap:14px;
  font-size:15px;line-height:1.5;color:var(--text-heading);
}
.connect__forward svg{flex:0 0 auto;color:var(--text-heading)}

/* Right-hand quote --------------------------------------------- */
.connect__quote{flex:0 0 auto;padding-top:96px;max-width:480px}
.connect__quote p{
  margin:0;font-size:34px;line-height:1.3;letter-spacing:-.005em;
  font-weight:var(--fw-regular);color:var(--text-heading);
}
.connect__quote-rule{display:block;width:46px;height:2px;margin-top:22px;background:var(--accent)}

/* In-page footer row ------------------------------------------- */
.connect__footer{margin-top:150px}
.connect__footer-rule{display:block;height:1px;background:rgba(243,131,145,.55)}
.connect__footer-row{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:22px;
}
.connect__footer-brand{color:var(--text-heading);font-size:13px}
.connect__tagline{
  position:relative;margin:0;
  font-size:18px;line-height:1.2;font-weight:var(--fw-semibold);color:var(--text-heading);
  white-space:nowrap;
}
.connect__tagline .tagline__human{position:relative;display:inline-block}
.connect__tagline .tagline__human::after{
  content:"";position:absolute;left:0;bottom:-9px;
  width:calc(100% - 24px);height:2px;background:var(--accent);
}
.connect__tagline .tagline__ai{color:var(--accent)}

/* ---------- Responsive ---------- */
@media (max-width:1360px){
  .connect__inner{padding:148px 44px 24px}
  .connect__quote{padding-top:40px}
}
@media (max-width:1080px){
  .connect__top{flex-direction:column;gap:44px}
  .connect__quote{padding-top:0;max-width:560px}
  .connect__quote p{font-size:28px}
  .connect__footer{margin-top:80px}
}
@media (max-width:720px){
  .connect__inner{padding:120px 24px 24px}

  .connect__title{font-size:clamp(34px,9vw,56px)}
  .connect__body br{display:none}
  .ccard{flex-direction:column}
  .ccard__divider{width:auto;height:1px;margin:0 22px}
  .connect__actions{gap:20px}
  .connect__footer-row{flex-direction:column;gap:24px;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none}
}

/* MOBILE SCENE: the 1672px render is 3-4x wider than a phone needs; serve the
   900px variant below the tablet breakpoint. Position/size/repeat carry over
   from the shorthand above — only the image layers are swapped. */
@media (max-width:820px){
  .connect{background-image:
    linear-gradient(to bottom,rgba(222,208,194,0) 0,rgba(222,208,194,0) 50vw,#ded0c2 57vw),
    url('../assets/img/room-chairs-mobile.webp');}
}