/* /connect — loaded AFTER main.css and only by connect.html.
   Nothing here redefines a token or a shared component: it composes the
   existing ones (.mark, .btn, .eyebrow, .d-xl/.d-m, .lead, .foot) and adds
   the few layout rules this utility page needs. main.css is untouched, so no
   other page can be affected by anything in this file. */

.cx{background:var(--ground)}

/* ── Header + hero: one continuous navy plane ───────────── */
.cx__top{background:var(--primary);padding-block:22px 0}
.cx__top .mark{display:inline-flex}
.cx__top .mark__a,.cx .foot .mark__a{color:var(--ground)}
.cx__top .mark__b{color:rgba(244,241,235,.92)}
/* Same on-dark lift the nav and footer use: the light-plane red/blue sit at
   ~1.7:1 on navy and effectively vanish. */
.cx__top .mark__r{background:var(--brand-red-on-dark)}
.cx__top .mark__l{background:var(--brand-blue-on-dark)}

.cx__hero{margin-top:-1px; /* no sub-pixel seam under the header */
  background:var(--primary);color:var(--ground);
  padding-block:clamp(36px,7vw,72px) clamp(44px,7vw,80px)}
.cx__hero .eyebrow{color:rgba(244,241,235,.78)}
.cx__hero h1{margin-top:14px;max-width:14ch}
.cx__hero .lead{color:rgba(244,241,235,.9);margin-top:18px;max-width:44ch}

/* Three primary actions: stacked full-width on a phone, one row from 768. */
.cx__primary{display:grid;gap:12px;margin-top:clamp(28px,4vw,40px);max-width:920px}
.cx__primary li{display:flex}
.cx__act{width:100%;justify-content:flex-start;gap:16px;min-height:68px;padding:12px 22px;
  letter-spacing:.1em}
.cx__act > svg{width:22px;height:22px;flex:none}
.cx__act-t{display:flex;flex-direction:column;gap:3px;line-height:1.25;text-align:left}
/* The sub-line is plain sentence-case text, not tracked caps — it is a
   description, not a second label. */
.cx__act-n{font-size:14.5px;font-weight:400;letter-spacing:0;text-transform:none;opacity:.86}

/* Google review — one more action under the three primaries, same button
   language, full width of the same measure. The arrow marks it as external. */
.cx__review{margin-top:14px;max-width:920px}
.cx__review .cx__act{justify-content:flex-start}
.cx__go{width:18px;height:18px;flex:none;margin-left:auto}
.cx__review .cx__act > svg:first-child{width:22px;height:22px}

/* ── Painting / Holiday Lighting ────────────────────────── */
.cx__biz{padding-block:clamp(32px,5vw,56px) clamp(48px,7vw,88px)}
.cx__grid{display:grid;gap:20px}
.cx__card{padding-block:0; /* main.css pads every bare <section> */
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-1);overflow:hidden}
.cx__card-h{padding:clamp(22px,3vw,30px) clamp(20px,3vw,28px) 20px}
/* No eyebrow above the card titles any more (Oct 2026), so no margin-top:
   the header's own padding sets the space above the name. */
.cx__card-h h2{font-size:clamp(21px,2.4vw,26px);line-height:1.2}
.cx__list{display:block}
.cx__row{display:flex;align-items:center;gap:15px;min-height:64px;
  padding:10px clamp(20px,3vw,28px);border-top:1px solid var(--border);
  transition:background-color .3s var(--ease)}
a.cx__row:hover{background:rgba(21,34,56,.04)}
a.cx__row:focus-visible{outline-offset:-3px}
.cx__row .i{width:22px;height:22px;flex:none;stroke:var(--accent);stroke-width:1.25;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.cx__row .t{display:flex;flex-direction:column;gap:2px;font-weight:500;font-size:16.5px;
  line-height:1.3;min-width:0}
.cx__row .t small{font-size:14px;font-weight:400;color:var(--text-2);overflow-wrap:anywhere}
.cx__row .go{margin-left:auto;width:18px;height:18px;flex:none;stroke:var(--primary);
  stroke-width:1.25;fill:none;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease),stroke .3s var(--ease)}
a.cx__row:hover .go{transform:translateX(3px);stroke:var(--accent)}

/* ── Footer ─────────────────────────────────────────────── */
.cx__foot{padding-block:clamp(40px,5vw,60px) 0}
.cx__foot .foot__grid{gap:28px}
.cx__foot-h{font-family:var(--body);font-weight:500;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(244,241,235,.72);margin-bottom:16px}
.cx__foot li a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
.cx__foot .foot__base{padding-bottom:22px;margin-top:clamp(28px,4vw,40px)}
.cx__foot .foot__base span{color:rgba(244,241,235,.72)}

/* Focus rings on navy: main.css's ring is navy-on-navy there. */
.cx__top :focus-visible,.cx__hero :focus-visible,.cx__foot :focus-visible{
  outline:2px solid rgba(244,241,235,.9);outline-offset:3px}

/* ── Entrance — a short fade-up, off for reduced motion ─── */
@media (prefers-reduced-motion:no-preference){
  .cx__rise{animation:cx-rise .7s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
}
@keyframes cx-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Breakpoints ────────────────────────────────────────── */
@media (min-width:768px){
  .cx__primary{grid-template-columns:repeat(3,1fr);gap:14px}
  .cx__act{padding-inline:20px}
  .cx__grid{grid-template-columns:1fr 1fr;gap:24px;align-items:start}
}
@media (min-width:1025px){
  .cx__foot .foot__grid{grid-template-columns:1.6fr 1fr}
}