/* =========================================================================
   contact-page.css — styles for the standalone /contact page.
   Scoped under .contactpage. Headings use the site's Gilroy fonts (loaded by
   head.php) to match the homepage; the lead form itself is styled by contact.css.
   ========================================================================= */
.contactpage{
  --cp-navy:#0b1b34; --cp-blue:#1c4ed8; --cp-yellow:#f6a623;
  --cp-ink:#16213a; --cp-muted:#5b6678; --cp-line:#e7ebf2; --cp-bg:#f4f7fb;
}
.contactpage .container{max-width:1180px;margin:0 auto;padding:0 22px;}
.contactpage *{box-sizing:border-box;}
/* Match the homepage: Gilroy italic font FILES (font-style:normal, so no synthesised double-slant).
   NB: no colour here — colour is set per-context so the dark hero can stay white. */
.contactpage h1,.contactpage h2{font-family:'Gilroy-ExtraBoldItalic','Gilroy-HeavyItalic',var(--display),sans-serif;font-style:normal;}

/* ------------------------------- HERO ----------------------------------- */
/* padding-bottom:0 + align-items:flex-end so the plumber sits FLUSH on the hero's
   bottom edge (no empty navy gap under him); the text keeps its own bottom padding. */
.cp-hero{background:linear-gradient(160deg,#12294a 0%,var(--cp-navy) 60%,#06101f 100%);color:#fff;padding:48px 0 0;overflow:hidden;}
.cp-hero__inner{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;}
.cp-hero__text{flex:1 1 560px;max-width:660px;padding-bottom:54px;}
.cp-hero__figure{flex:0 0 auto;margin:0;align-self:flex-end;}
.cp-hero__figure img{display:block;height:auto;max-height:360px;width:auto;max-width:340px;object-fit:contain;object-position:bottom center;vertical-align:bottom;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));}
.cp-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font:700 13px/1 'Inter',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#bcd0ea;background:rgba(255,255,255,.08);padding:8px 14px;border-radius:40px;}
.cp-hero__eyebrow .cp-ic{width:16px;height:16px;color:var(--cp-yellow);}
/* Mirror the homepage .hero-title: white, uppercase, Gilroy heavy-italic file.
   Scoped as .contactpage .cp-hero__title (0,2,0) so it beats any base h1 colour rule. */
.contactpage .cp-hero__title{color:#fff;text-transform:uppercase;font-family:'Gilroy-HeavyItalic','Gilroy-ExtraBoldItalic',var(--display);font-weight:400;font-size:clamp(29px,4.6vw,50px);line-height:1.08;letter-spacing:.4px;margin:0 0 16px;}
.cp-hl{display:inline-block;background:var(--cp-yellow);color:var(--cp-navy);padding:1px 14px 4px;transform:skewX(-8deg);}
.cp-hl > span{display:inline-block;transform:skewX(8deg);}
.cp-hero__lead{font-size:16.5px;line-height:1.6;color:#d7e2f0;margin:0 0 24px;max-width:68ch;}
.cp-hero__cta{display:flex;flex-wrap:wrap;gap:12px;}
.cp-btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:800 15px/1 'Inter',sans-serif;padding:14px 24px;border-radius:44px;white-space:nowrap;transition:filter .15s ease,transform .15s ease;}
.cp-btn .cp-ic{width:19px;height:19px;}
.cp-btn--call{background:var(--cp-yellow);color:var(--cp-navy);}
.cp-btn--call:hover{filter:brightness(.96);transform:translateY(-1px);}
.cp-btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);}
.cp-btn--ghost:hover{background:rgba(255,255,255,.1);}

/* --------------------------- MAIN TWO-COLUMN ---------------------------- */
.cp-main{padding:40px 0 60px;background:var(--cp-bg);}
.cp-main__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:start;margin-bottom:26px;}

/* Blue form panel — matches the homepage contact section (--contact-blue #1a4ad1),
   so the white form fields (border:0, subtle shadow) stand out clearly.
   The homepage form styles read --contact-* custom props that are normally scoped to
   .contact-section; we redeclare them here so the yellow submit button + field radius
   resolve exactly like the homepage. */
.cp-formcard{background:#1a4ad1;border:0;border-radius:16px;padding:30px 28px;box-shadow:0 18px 44px -22px rgba(3,25,54,.6);
  --contact-blue:#1a4ad1;--contact-yellow:#FAB72A;--contact-radius:10px;}
.contactpage .cp-formcard .cp-h2{color:#fff;}
.cp-h2{font-size:clamp(21px,2.8vw,27px);margin:0 0 8px;}
.cp-sub{color:rgba(255,255,255,.85);font-size:15.5px;line-height:1.55;margin:0 0 20px;}

.cp-side{display:flex;flex-direction:column;gap:18px;}
.cp-card{background:#fff;border:1px solid var(--cp-line);border-radius:16px;padding:22px 22px;box-shadow:0 10px 30px -24px rgba(3,25,54,.5);}
.cp-h3{display:flex;align-items:center;gap:9px;font-family:'Gilroy-ExtraBoldItalic',var(--display),sans-serif;font-style:normal;color:var(--cp-navy);font-size:17px;margin:0 0 12px;}
.cp-h3 .cp-ic{width:20px;height:20px;color:var(--cp-blue);flex:none;}

.cp-bigphone{display:inline-block;font:800 26px/1.1 'Inter',sans-serif;color:var(--cp-navy);text-decoration:none;letter-spacing:-.5px;}
.cp-bigphone:hover{color:var(--cp-blue);}
.cp-line{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:15px;}
.cp-line .cp-ic{width:18px;height:18px;color:var(--cp-blue);flex:none;}
.cp-line a{color:var(--cp-ink);text-decoration:none;}
.cp-line a:hover{color:var(--cp-blue);}

.cp-open{display:flex;align-items:center;gap:9px;margin:0;font-weight:700;color:var(--cp-navy);font-size:16px;}
.cp-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18);flex:none;}
.cp-note{color:var(--cp-muted);font-size:13.5px;line-height:1.5;margin:10px 0 0;}
.cp-note a{color:var(--cp-blue);font-weight:600;}

.cp-areas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.cp-areas li{display:inline-flex;align-items:center;background:#eef3fb;color:var(--cp-navy);font-weight:600;font-size:13.5px;padding:7px 13px;border-radius:40px;}

/* ------------------------------- MAP ------------------------------------ */
.cp-map{border:1px solid var(--cp-line);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px -24px rgba(3,25,54,.5);line-height:0;background:#dfe7f1;}
.cp-map iframe{display:block;width:100%;height:360px;border:0;}

/* ---------------------------- RESPONSIVE -------------------------------- */
@media (max-width:900px){.cp-main__grid{grid-template-columns:1fr;}}
@media (max-width:860px){.cp-hero__inner{display:block;} .cp-hero__figure{display:none;}}
@media (max-width:560px){
  .cp-hero{padding:36px 0 42px;}
  .cp-btn{flex:1 1 auto;justify-content:center;}
  .cp-formcard{padding:24px 18px;}
  .cp-map iframe{height:280px;}
}