/* ===========================================================
   POWR2 — Contact page (extends article.css tokens)
   =========================================================== */
.contact-hero{background:linear-gradient(135deg,var(--steel-900),var(--steel-700));color:#fff;padding:150px 0 70px;position:relative;overflow:hidden;}
.contact-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 80% 10%, rgba(144,171,181,.22) 0%, rgba(144,171,181,0) 55%);}
.contact-hero .container{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:0 28px;}
.contact-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--electric);}
.contact-eyebrow::before{content:'';width:22px;height:1px;background:currentColor;}
.contact-hero h1{margin-top:18px;font-size:clamp(34px,4.8vw,60px);font-weight:800;line-height:1.04;letter-spacing:-.025em;color:#fff;text-wrap:balance;}
.contact-hero p{margin-top:18px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:rgba(255,255,255,.82);max-width:560px;}

/* body grid */
.contact-wrap{max-width:var(--container);margin:0 auto;padding:64px 28px 90px;
  display:grid;grid-template-columns:0.85fr 1fr;gap:56px;align-items:start;}

/* left column */
.contact-info h2{font-size:22px;font-weight:700;color:var(--heading);letter-spacing:-.01em;margin-bottom:6px;}
.contact-info .info-lede{color:var(--fg-soft);font-size:15px;line-height:1.6;margin-bottom:28px;}
.info-block{display:flex;gap:14px;padding:18px 0;border-top:1px solid var(--hairline);}
.info-block:last-of-type{border-bottom:1px solid var(--hairline);}
.info-ico{flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:var(--card);border:1px solid var(--card-line);
  display:flex;align-items:center;justify-content:center;color:var(--electric);}
.info-ico svg{width:19px;height:19px;}
.info-meta .lbl{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:4px;}
.info-meta a,.info-meta .val{color:var(--heading);font-size:15px;font-weight:600;text-decoration:none;line-height:1.5;}
.info-meta a:hover{color:var(--lemon-600);}
html.powr2-dark .info-meta a:hover{color:var(--lemon);}

.contact-social{display:flex;gap:8px;margin-top:24px;}
.contact-social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--hairline);background:transparent;color:var(--fg);
  display:inline-flex;align-items:center;justify-content:center;transition:.2s;text-decoration:none;}
.contact-social a:hover{border-color:var(--electric);color:var(--electric);transform:translateY(-2px);}
.contact-social svg{width:15px;height:15px;display:block;}

/* map */
.contact-map{margin-top:28px;border-radius:14px;overflow:hidden;border:1px solid var(--card-line);box-shadow:var(--shadow-card,0 2px 10px rgba(18,39,50,.07));aspect-ratio:16/10;background:var(--card);}
.contact-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.2);}
html.powr2-dark .contact-map iframe{filter:grayscale(.4) invert(.9) hue-rotate(180deg);}

/* right column — form card */
.contact-form-card{background:var(--card);border:1px solid var(--card-line);border-radius:18px;padding:30px 30px 34px;box-shadow:var(--shadow-card,0 2px 10px rgba(18,39,50,.07));}
.contact-form-card .form-head{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--heading);
  display:flex;align-items:center;gap:9px;margin-bottom:6px;}
.contact-form-card .form-head .dot{width:8px;height:8px;border-radius:50%;background:var(--lemon);box-shadow:0 0 0 4px rgba(170,199,96,.2);}
.contact-form-card .form-sub{font-size:13px;color:var(--fg-soft);margin-bottom:22px;}

/* HubSpot placeholder + styling hooks for the real embed */
.hs-placeholder{border:2px dashed var(--hairline);border-radius:12px;padding:30px;text-align:center;color:var(--fg-soft);}
.hs-placeholder svg{width:40px;height:40px;color:var(--electric);opacity:.8;margin:0 auto 14px;}
.hs-placeholder b{display:block;color:var(--heading);font-size:15px;margin-bottom:6px;}
.hs-placeholder code{background:var(--bg-2);border:1px solid var(--hairline);border-radius:6px;padding:2px 7px;font-size:12px;font-family:ui-monospace,Menlo,monospace;color:var(--heading);}
.hs-placeholder .hint{font-size:12px;margin-top:14px;line-height:1.6;}

/* live contact form (posts to our own REST proxy, see contact-form.js) */
.contact-form{margin-top:6px;}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cf-field{margin-top:14px;}
.cf-field.cf-full{grid-column:1/-1;}
.cf-field label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:6px;}
.cf-field input,.cf-field textarea,.cf-field select{width:100%;padding:12px 14px;border:1px solid var(--hairline);border-radius:9px;
  background:var(--bg-2);color:var(--fg);font-family:inherit;font-size:14px;transition:border-color .2s;}
.cf-field input:focus,.cf-field textarea:focus,.cf-field select:focus{outline:none;border-color:var(--electric);}
.cf-field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6e76' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px;}
.cf-field textarea{min-height:110px;resize:vertical;}
.cf-checkbox-group{display:flex;flex-direction:column;gap:10px;margin-top:2px;}
.cf-checkbox{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:var(--fg-soft);font-weight:400;text-transform:none;letter-spacing:normal;cursor:pointer;}
.cf-checkbox input[type="checkbox"]{width:16px;height:16px;flex:0 0 16px;margin-top:2px;accent-color:var(--electric);}
.cf-checkbox a{color:var(--heading);text-decoration:underline;}
.cf-privacy{font-size:13px;}
/* honeypot: hidden from sighted users and screen readers, but still present
   in the DOM/tab order-free so scripted bots that auto-fill every field trip it */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cf-status{min-height:20px;margin-top:14px;font-size:13px;font-weight:600;}
.cf-status-error{color:#c23b3b;}
.cf-status-success{color:var(--lemon-600);}
.cf-submit{width:100%;justify-content:center;margin-top:18px;}
.cf-submit.is-loading{opacity:.7;pointer-events:none;}
.cf-legal{font-size:11px;color:var(--fg-soft);margin-top:12px;text-align:center;}

/* fallback static fields (visible inside placeholder so the layout reads as a form) */
.demo-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;text-align:left;}
.demo-form .full{grid-column:1/-1;}
.demo-form label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:6px;}
.demo-form input,.demo-form select,.demo-form textarea{width:100%;padding:12px 14px;border:1px solid var(--hairline);border-radius:9px;
  background:var(--bg-2);color:var(--fg);font-family:inherit;font-size:14px;transition:border-color .2s;}
.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus{outline:none;border-color:var(--electric);}
.demo-form textarea{min-height:110px;resize:vertical;}
.demo-form .btn{grid-column:1/-1;justify-content:center;margin-top:4px;}
.demo-note{font-size:11px;color:var(--fg-soft);margin-top:14px;text-align:center;}

@media(max-width:880px){
  .contact-wrap{grid-template-columns:1fr;gap:40px;padding-top:48px;}
  .contact-hero{padding-top:120px;}
}
@media(max-width:560px){
  .demo-form{grid-template-columns:1fr;}
  .cf-row{grid-template-columns:1fr;}
}
/* ===========================================================
   POWR2 — Opt-Out page (single-column variant of contact.css)
   Append this to the end of assets/css/contact.css
   =========================================================== */
.optout-wrap{max-width:600px;margin:0 auto;padding:64px 28px 90px;}

@media(max-width:880px){
  .optout-wrap{padding-top:48px;}
}

/* Native HubSpot embed containment (Opt-Out page) — HubSpot's own form
   markup is block-level and 100% width by default, so this just guards
   against it spilling past the card on any HubSpot template that sets an
   explicit min-width. */
.hs-form-wrap{width:100%;}
.hs-form-wrap .hs-form,
.hs-form-wrap .hs-form-frame,
.hs-form-wrap iframe{max-width:100% !important;width:100% !important;}