/* ==========================================================================
   CITYMALL ABOUT US / CONTACT US
   Loaded on those two pages only, after homepage.css, whose tokens
   (--ct-blue, --ct-navy, --ct-orange, ...) and .ct-about / .ct-brands blocks
   are reused here.
   ========================================================================== */

.ct-page{padding-bottom:10px;}
.ct-page h1{margin:0;color:var(--ct-ink);font-weight:800;}

/* ---------- hero ---------- */
.ct-page__hero{
  background:linear-gradient(135deg,var(--ct-navy),var(--ct-blue) 70%,var(--ct-cyan));
  color:#fff;border-radius:var(--ct-radius);padding:44px 40px;margin-bottom:30px;
}
.ct-page__eyebrow{
  margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.8);
}
.ct-page .ct-page__hero h1{color:#fff;font-size:32px;line-height:1.2;max-width:820px;}
.ct-page__lede{margin:14px 0 0;max-width:720px;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.92);}

/* ---------- sections ---------- */
.ct-page__section{margin-bottom:34px;}
.ct-page__h2{font-size:21px;margin-bottom:18px !important;}

.ct-page__split{
  display:grid;grid-template-columns:1.7fr 1fr;gap:34px;align-items:start;margin-bottom:34px;
}
.ct-page__prose h2,.ct-page__form-wrap h2{font-size:22px;margin-bottom:14px;}
.ct-page__prose p{color:#475467;font-size:15px;line-height:1.7;margin:0 0 14px;}
.ct-page__editor{margin-top:18px;color:#475467;font-size:15px;line-height:1.7;}

/* what we supply */
.ct-page__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ct-page__tile{
  display:flex;flex-direction:column;gap:6px;
  background:var(--ct-card);border:1px solid var(--ct-line);border-radius:var(--ct-radius);
  padding:20px;box-shadow:var(--ct-shadow);transition:border-color .15s,transform .15s;
}
.ct-page__tile:hover{border-color:var(--ct-blue);transform:translateY(-2px);}
.ct-page .ct-page__tile h3{font-size:16px;}
.ct-page__tile p{margin:0;color:var(--ct-muted);font-size:14px;line-height:1.55;flex:1;}
.ct-page__tile span{color:var(--ct-blue);font-weight:700;font-size:13.5px;margin-top:6px;}

.ct-page__points{grid-template-columns:repeat(3,1fr);margin-top:0;}

/* closing call to action */
.ct-page__cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:#f4f8fc;border:1px solid var(--ct-line);border-radius:var(--ct-radius);
  padding:28px 30px;margin:10px 0 30px;
}
.ct-page__cta h2{font-size:20px;}
.ct-page__cta p{margin:6px 0 0;color:var(--ct-muted);font-size:14.5px;}
.ct-page__cta-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.ct-page__cta-actions .ct-about__btn{margin-top:0;}
.ct-page__btn-ghost{
  display:inline-block;padding:10px 20px;border:2px solid var(--ct-blue);border-radius:3px;
  color:var(--ct-blue) !important;font-weight:700;font-size:14px;
}
.ct-page__btn-ghost:hover{background:var(--ct-blue);color:#fff !important;}

/* ---------- contact channels ---------- */
.ct-page__channels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px;}
.ct-page__channel{
  display:flex;flex-direction:column;gap:4px;
  background:var(--ct-card);border:1px solid var(--ct-line);border-top:3px solid var(--ct-blue);
  border-radius:var(--ct-radius);padding:18px 20px;box-shadow:var(--ct-shadow);
}
a.ct-page__channel:hover{border-color:var(--ct-blue);}
.ct-page__channel--wa{border-top-color:#25d366;}
.ct-page__channel-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ct-muted);}
.ct-page__channel strong{font-size:16.5px;color:var(--ct-ink);word-break:break-word;}
.ct-page__channel span:last-child{font-size:13.5px;color:var(--ct-muted);}

/* ---------- form ---------- */
.ct-page__split--form{grid-template-columns:1.2fr 1fr;}
.ct-form{display:flex;flex-direction:column;gap:14px;}
.ct-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ct-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:700;color:var(--ct-ink);}
.ct-form label em{color:#d92d20;font-style:normal;margin-left:3px;}
.ct-form input,.ct-form select,.ct-form textarea{
  width:100%;height:auto;min-height:46px;line-height:1.4;margin:0;padding:11px 12px;font:inherit;font-size:15px;font-weight:400;color:var(--ct-ink);
  background:#fff;border:1px solid #cfd8e3;border-radius:3px;
}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{
  outline:none;border-color:var(--ct-blue);box-shadow:0 0 0 3px rgba(27,111,179,.15);
}
.ct-form textarea{resize:vertical;min-height:140px;}
.ct-form__hint{margin:-4px 0 0;font-size:13px;color:var(--ct-muted);}
.ct-form button.ct-about__btn{align-self:flex-start;border:0;cursor:pointer;margin-top:0;}
.ct-form__hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden;}

.ct-page__notice{padding:12px 14px;border-radius:3px;font-size:14.5px;margin:0 0 16px;}
.ct-page__notice--ok{background:#ecfdf3;border:1px solid #abefc6;color:#067647;}
.ct-page__notice--err{background:#fef3f2;border:1px solid #fecdca;color:#b42318;}

/* ---------- map ---------- */
.ct-page__map iframe{
  display:block;width:100%;height:420px;border:1px solid var(--ct-line);border-radius:var(--ct-radius);
}
.ct-page__map-link{display:inline-block;margin-top:10px;color:var(--ct-blue) !important;font-weight:700;font-size:14px;}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .ct-page__channels{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:992px){
  .ct-page__split,.ct-page__split--form{grid-template-columns:1fr;gap:26px;}
  .ct-page__grid,.ct-page__points{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .ct-page__hero{padding:28px 20px;}
  .ct-page .ct-page__hero h1{font-size:24px;}
  .ct-page__lede{font-size:15px;}
  .ct-page__grid,.ct-page__points,.ct-page__channels,.ct-form__row{grid-template-columns:1fr;}
  .ct-page__cta{padding:22px 18px;}
  .ct-page__map iframe{height:300px;}
}

/* ---------- compare page ---------- */
.ct-cmp-head{ margin:4px 0 22px; }
.ct-cmp-head h1{ font-size:28px; }
.ct-cmp-head p{ margin:6px 0 0; color:var(--ct-muted); font-size:14.5px; }
.ct-cmp-clear{ margin-left:10px; color:var(--ct-blue) !important; font-weight:700; }

.ct-cmp-empty{
  background:#f4f8fc; border:1px solid var(--ct-line); border-radius:var(--ct-radius);
  padding:36px 30px; margin-bottom:34px; text-align:center;
}
.ct-cmp-empty p{ margin:0 0 10px; color:#475467; font-size:15px; }
.ct-cmp-empty .ct-about__btn{ margin-top:8px; }

.ct-cmp-scroll{ overflow-x:auto; margin-bottom:34px; border:1px solid var(--ct-line); border-radius:var(--ct-radius); }
.ct-cmp{ width:100%; min-width:calc(170px + var(--ct-cmp-cols) * 210px); border-collapse:collapse; table-layout:fixed; margin:0; background:#fff; }
.ct-cmp th,.ct-cmp td{ padding:14px 16px; border-bottom:1px solid var(--ct-line); vertical-align:top; text-align:left; font-size:14px; color:var(--ct-ink); }
.ct-cmp tbody tr:nth-child(odd) td,.ct-cmp tbody tr:nth-child(odd) th{ background:#f8fafc; }
.ct-cmp tr:last-child th,.ct-cmp tr:last-child td{ border-bottom:0; }
.ct-cmp .ct-cmp-label{
  width:170px; font-weight:700; color:var(--ct-muted); font-size:13px; text-transform:uppercase; letter-spacing:.04em;
  position:sticky; left:0; z-index:1; background:#fff;
}
.ct-cmp td + td{ border-left:1px solid var(--ct-line); }
.ct-cmp-product{ text-align:center !important; }
.ct-cmp-remove{ display:inline-block; margin-bottom:8px; color:#b42318 !important; font-size:12.5px; font-weight:700; }
.ct-cmp-img{ display:block; margin:0 auto 10px; max-width:170px; }
.ct-cmp-img img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; }
.ct-cmp-name{ display:block; font-weight:700; font-size:14.5px; line-height:1.35; margin-bottom:12px; color:var(--ct-ink) !important; }
.ct-cmp-cart .button{
  display:inline-block !important; position:static !important; opacity:1 !important; visibility:visible !important;
  background:var(--ct-orange) !important; color:#fff !important; border:0 !important; border-radius:3px !important;
  padding:9px 16px !important; font-size:13.5px !important; font-weight:700 !important; width:auto !important;
}
.ct-cmp-cart .added_to_cart{ display:block; margin-top:6px; font-size:13px; }
.ct-cmp .price{ font-weight:800; color:var(--ct-blue); font-size:16px; }
.ct-cmp-in{ color:#12a150; font-weight:700; }
.ct-cmp-out{ color:#e0563f; font-weight:700; }
.ct-cmp-na{ color:#b0b8c4; }
.ct-cmp td p{ margin:0; line-height:1.55; color:#475467; }

@media(max-width:600px){
  .ct-cmp-head h1{ font-size:23px; }
  .ct-cmp{ min-width:calc(110px + var(--ct-cmp-cols) * 170px); }
  .ct-cmp .ct-cmp-label{ width:110px; font-size:11.5px; }
  .ct-cmp th,.ct-cmp td{ padding:12px 10px; font-size:13px; }
}