/* ═══════════════════════════════════════════════════════════════════
   /contact-us/ — Editorial redesign matching the Portfolio (Client
   Stories) page: centered hero, navy stats band, gold-shimmer numbers,
   editorial cards. Same brand language (navy eyebrows, gold accents,
   dusty rose primary CTA).

   Scoped to .contact-preview so styles don't leak.
   ═══════════════════════════════════════════════════════════════════ */

html:has(.contact-preview),
body:has(.contact-preview){
  overflow-x:clip;
}main:has(.contact-preview){
  background:var(--bg);
  max-width:none;
  padding:0;
  width:100%;
  overflow-x:clip;
}.contact-preview{
  --contact-max: 1180px;
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.6;
  overflow-x:clip;
  max-width:100vw;
}.contact-preview > section{
  padding:5rem max(2rem, calc((100vw - var(--contact-max)) / 2));
  position:relative;
  margin:0;
}
@media (max-width:720px){.contact-preview > section{padding:3rem 1rem}
}/* Shared section heads — centred (Portfolio pattern) */
.contact-preview .bmb-section-head{
  text-align:center;
  margin-bottom:3rem;
  max-width:60ch;
  margin-left:auto;
  margin-right:auto;
}.contact-preview .bmb-section-head .bmb-eyebrow{
  display:inline-flex;
  font-family:var(--font-display);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.22em;
  color:var(--cream);
  text-transform:uppercase;
  gap:14px;
  align-items:center;
  margin:0 auto 1.25rem;
  justify-content:center;
}.contact-preview .bmb-section-head .bmb-eyebrow::before,
.contact-preview .bmb-section-head .bmb-eyebrow::after{
  content:"";
  width:36px;
  height:1px;
  background:var(--gold);
}.contact-preview .bmb-section-head h2{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.15;
  margin:0;
}.contact-preview .bmb-section-head h2 em{
  font-style:italic;
  color:var(--spectrum-1);
  font-weight:500;
}.contact-preview .bmb-section-head p.bmb-section-lead{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.55;
  color:var(--muted);
  margin:.8rem auto 0;
  max-width:60ch;
}/* ═══ HERO (centered, Portfolio pattern) ═════════════════════════ */
.contact-preview .contact-hero{
  padding-top:6rem;
  padding-bottom:4rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}.contact-preview .contact-hero::before{
  content:"";
  position:absolute;
  top:-25%;
  left:-10%;
  width:55%;
  height:120%;
  background:radial-gradient(circle, rgba(141, 49, 155, 0.30) 0%, rgba(141, 49, 155, 0) 65%);
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
  animation:contactAmbientA 24s ease-in-out infinite;
}.contact-preview .contact-hero::after{
  content:"";
  position:absolute;
  bottom:-30%;
  right:-15%;
  width:55%;
  height:120%;
  background:radial-gradient(circle, rgba(127, 168, 232, 0.28) 0%, rgba(127, 168, 232, 0) 65%);
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
  animation:contactAmbientB 28s ease-in-out infinite;
}
@keyframes contactAmbientA{0%, 100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,20px) scale(1.05)}
}
@keyframes contactAmbientB{0%, 100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,-30px) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){.contact-preview .contact-hero::before,
  .contact-preview .contact-hero::after{animation:none}
}.contact-preview .contact-hero-inner{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
}.contact-preview .contact-hero-eyebrow{
  display:inline-flex;
  font-family:var(--font-display);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cream);
  gap:14px;
  align-items:center;
  margin:0 auto 1.5rem;
  justify-content:center;
}.contact-preview .contact-hero-eyebrow::before,
.contact-preview .contact-hero-eyebrow::after{
  content:"";
  width:38px;
  height:1px;
  background:var(--gold);
}.contact-preview .contact-hero-display{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 auto 1.2rem;
  max-width:18ch;
}.contact-preview .contact-hero-display em{
  font-style:italic;
  color:var(--spectrum-1);
  font-weight:500;
}/* H1 lock = "Contact us" — kept visually quiet as small caps below display */
.contact-preview .contact-hero-h1{
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.3em;
  color:var(--muted);
  text-transform:uppercase;
  margin:0 0 1.5rem;
}.contact-preview .contact-hero-lead{
  font-size:1.08rem;
  line-height:1.7;
  color:var(--ink-2);
  max-width:60ch;
  margin:0 auto;
}/* ═══ NAVY STATS BAND (Portfolio pattern) ════════════════════════ */
.contact-preview .contact-stats{
  background:linear-gradient(180deg, rgba(80, 55, 95, 0.97), rgba(80, 55, 95, 0.93));
  position:relative;
  overflow:hidden;
}.contact-preview .contact-stats::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:80%;
  height:120%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(127, 168, 232, 0.10) 0%, transparent 65%);
  filter:blur(60px);
  pointer-events:none;
}.contact-preview .contact-stats-grid{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:var(--contact-max);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2rem;
  position:relative;
  z-index:1;
}.contact-preview .contact-stats-grid li{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  padding:1.2rem 1rem;
  position:relative;
}.contact-preview .contact-stats-grid li:not(:last-child)::after{
  content:"";
  position:absolute;
  top:25%;
  right:-1rem;
  width:1px;
  height:50%;
  background:linear-gradient(180deg, transparent, rgba(127, 168, 232, 0.35), transparent);
}.contact-preview .contact-stat-num{
  font-family:var(--serif);
  font-size:clamp(2.1rem, 4vw, 3.1rem);
  font-weight:500;
  line-height:1;
  background:linear-gradient(115deg, #7fa8e8 0%, #d8eef9 28%, #8d319b 42%, #d8eef9 55%, #7fa8e8 88%);
  background-size:220% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  letter-spacing:-.01em;
}.contact-preview .contact-stat-suffix{
  font-size:.6em;
  margin-left:.1em;
  vertical-align:.18em;
  color:#d8eef9;
  -webkit-text-fill-color:#d8eef9;
}.contact-preview .contact-stat-label{
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-2);
}
@media (max-width:900px){.contact-preview .contact-stats-grid{grid-template-columns:repeat(2, 1fr);gap:1.4rem}.contact-preview .contact-stats-grid li:not(:last-child)::after{display:none}
}/* ═══ CHANNEL CARDS (replacing portfolio's testimonial grid) ═════ */
.contact-preview .contact-channels-grid{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:var(--contact-max);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.6rem;
}.contact-preview .contact-channel{
  /* Flex column + full height + auto-margin on the CTA pushes all three
     cards to the same height regardless of body-text length. */
  display:flex;
  flex-direction:column;
  height:100%;
  padding:2rem 1.8rem;
  background:var(--cream);
  border:1px solid rgba(127, 168, 232, 0.18);
  border-radius:20px;
  color:inherit;
  text-decoration:none;
  position:relative;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),
             box-shadow .35s ease,
             border-color .35s ease,
             background .35s ease;
}.contact-preview .contact-channel-detail{
  flex:1;
}.contact-preview .contact-channel-cta{
  margin-top:auto;
}.contact-preview .contact-channel:hover{
  transform:translateY(-4px);
  border-color:rgba(127, 168, 232, 0.40);
  background:var(--cream);
  box-shadow:0 16px 36px -16px rgba(127, 168, 232, 0.22);
}.contact-preview .contact-channel-meta{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:1.1rem;
}.contact-preview .contact-channel-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(80, 55, 95, 0.06);
  color:var(--navy);
  flex-shrink:0;
}.contact-preview .contact-channel-icon svg{width:22px;height:22px}.contact-preview .contact-channel-tag{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-ink);
}.contact-preview .contact-channel-value{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.25rem, 1.9vw, 1.55rem);
  font-weight:500;
  color:var(--ink);
  margin:0 0 .8rem;
  letter-spacing:-.01em;
}.contact-preview .contact-channel-detail{
  font-family:var(--sans);
  font-size:.96rem;
  line-height:1.55;
  color:var(--ink-2);
  margin:0 0 1.2rem;
}.contact-preview .contact-channel-cta{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
  display:inline-flex;
  gap:.4rem;
  align-items:center;
}.contact-preview .contact-channel:hover .contact-channel-cta{
  color:var(--ink);
}
@media (max-width:900px){.contact-preview .contact-channels-grid{grid-template-columns:1fr;gap:1.2rem}
}/* ═══ LOCATION CARDS (2 cols, with maps) ═════════════════════════ */
.contact-preview .contact-locations{
  background:var(--bg);
}.contact-preview .contact-locations-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:2rem;
  max-width:var(--contact-max);
  margin:0 auto;
}.contact-preview .contact-location{
  background:var(--cream);
  border:1px solid rgba(127, 168, 232, 0.18);
  border-radius:22px;
  padding:2rem;
  display:flex;
  flex-direction:column;
  /* min-width:0 lets the card shrink below its iframe's min-content
     width — required because the Google Maps iframe defaults to a
     natural width larger than mobile viewports. */
  min-width:0;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;color:var(--ink-on-cream);}.contact-preview .contact-location:hover{
  border-color:rgba(127, 168, 232, 0.40);
  transform:translateY(-3px);
  box-shadow:0 16px 36px -16px rgba(127, 168, 232, 0.22);
}.contact-preview .contact-location-tag{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--navy);
  margin:0 0 .7rem;
  display:inline-block;
  padding:.25rem .7rem;
  background:rgba(80, 55, 95, 0.06);
  border-radius:999px;
  width:fit-content;
}.contact-preview .contact-location h3{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.5rem, 2.4vw, 2rem);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.1;
  margin:0 0 1rem;
}.contact-preview .contact-location address{
  font-family:var(--sans);
  font-style:normal;
  font-size:1rem;
  line-height:1.55;
  color:var(--ink-2);
  margin:0 0 1.2rem;
}.contact-preview .contact-location-meta{
  margin:0 0 1.4rem;
  padding:1rem 0;
  border-top:1px dashed rgba(127, 168, 232, 0.28);
  border-bottom:1px dashed rgba(127, 168, 232, 0.28);
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:1.2rem;
  row-gap:.55rem;
}.contact-preview .contact-location-meta dt{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--navy);
  align-self:start;
  padding-top:.15rem;
}.contact-preview .contact-location-meta dd{
  margin:0;
  font-family:var(--sans);
  font-size:.96rem;
  line-height:1.5;
  color:var(--ink-2);
}.contact-preview .contact-location-meta dd a{
  color:var(--brand);
  text-decoration:underline;
  text-decoration-color:rgba(141, 49, 155, 0.4);
  text-underline-offset:3px;
}.contact-preview .contact-location-meta dd a:hover{
  text-decoration-color:var(--brand);
}.contact-preview .contact-location-map{
  margin:0 0 1.4rem;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(127, 168, 232, 0.20);
  aspect-ratio:16/9;
  background:rgba(80, 55, 95, 0.04);
}.contact-preview .contact-location-map iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}.contact-preview .contact-location .bmb-cta{
  margin-top:auto;
  align-self:flex-start;
}
@media (max-width:900px){.contact-preview .contact-locations-grid{grid-template-columns:1fr;gap:1.4rem}
}/* ═══ ENQUIRY FORM (editorial centered) ══════════════════════════ */
.contact-preview .contact-form-section{
  background:var(--bg);
}.contact-preview .contact-form{
  max-width:680px;
  margin:0 auto;
  background:var(--cream);
  border:1px solid rgba(127, 168, 232, 0.22);
  border-radius:22px;
  padding:2.4rem 2.2rem;
  display:flex;
  flex-direction:column;
  gap:1.2rem;color:var(--ink-on-cream);}
@media (max-width:600px){.contact-preview .contact-form{padding:1.6rem 1.2rem}
}.contact-preview .contact-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
}
@media (max-width:600px){.contact-preview .contact-form-row{grid-template-columns:1fr;gap:1rem}
}.contact-preview .contact-form-field{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}.contact-preview .contact-form-field > span{
  font-family:var(--sans);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-on-cream);
}.contact-preview .contact-form input,
.contact-preview .contact-form select,
.contact-preview .contact-form textarea{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.45;
  padding:.75rem .9rem;
  border:1px solid rgba(127, 168, 232, 0.30);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}.contact-preview .contact-form input:focus,
.contact-preview .contact-form select:focus,
.contact-preview .contact-form textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(141, 49, 155, 0.18);
}.contact-preview .contact-form textarea{resize:vertical;min-height:120px}.contact-preview .contact-form-consent{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  font-family:var(--sans);
  font-size:.88rem;
  line-height:1.5;
  color:var(--ink-2);
  cursor:pointer;
}.contact-preview .contact-form-consent input{
  width:auto;
  margin-top:.18rem;
  accent-color:var(--brand);
}.contact-preview .contact-form-consent a{
  color:var(--brand);
  text-decoration:underline;
  text-decoration-color:rgba(141, 49, 155, 0.4);
  text-underline-offset:3px;
}.contact-preview .contact-form-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.95rem 2.2rem;
  border:0;
  border-radius:999px;
  font-family:var(--sans);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.01em;
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-dk, #6e2479) 100%);
  color:#fff;
  cursor:pointer;
  align-self:flex-start;
  box-shadow:0 8px 24px -6px rgba(141, 49, 155, 0.55),
             0 16px 44px -10px rgba(141, 49, 155, 0.35);
  transition:transform .25s ease, box-shadow .25s ease;
}.contact-preview .contact-form-submit:hover{
  transform:translateY(-2px) scale(1.02);
}.contact-preview .contact-form-submit:disabled{
  opacity:.6;
  cursor:wait;
}.contact-preview .contact-form-status{
  font-family:var(--sans);
  font-size:.92rem;
  line-height:1.5;
  color:var(--ink-2);
  margin:0;
  min-height:1.4em;
}.contact-preview .contact-form-status a{
  color:var(--brand);
  text-decoration:underline;
}/* ═══ FINAL CTA (Portfolio pattern) ══════════════════════════════ */
.contact-preview .contact-cta{
  text-align:center;
  padding-top:6rem;
  padding-bottom:6rem;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}.contact-preview .contact-cta::before{display:none;}.contact-preview .contact-cta-inner{
  position:relative;
  z-index:1;
  max-width:60ch;
  margin:0 auto;
}.contact-preview .contact-cta .bmb-eyebrow{
  display:inline-flex;
  font-family:var(--font-display);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cream);
  gap:14px;
  align-items:center;
  margin:0 auto 1.5rem;
  justify-content:center;
}.contact-preview .contact-cta .bmb-eyebrow::before,
.contact-preview .contact-cta .bmb-eyebrow::after{
  content:"";
  width:36px;
  height:1px;
  background:var(--gold);
}.contact-preview .contact-cta h2{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(2rem, 3.6vw, 3rem);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.1;
  margin:0 0 1.2rem;
}.contact-preview .contact-cta p{
  font-size:1.05rem;
  line-height:1.65;
  color:var(--ink-2);
  margin:0 0 2rem;
}.contact-preview .contact-cta-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}.contact-preview .contact-cta .bmb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.95rem 2.2rem;
  border-radius:999px;
  font-family:var(--sans);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}.contact-preview .contact-cta .bmb-cta--primary{
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-dk, #6e2479) 100%);
  color:#fff;
  box-shadow:0 8px 24px -6px rgba(141, 49, 155, 0.55),
             0 16px 44px -10px rgba(141, 49, 155, 0.35);
}.contact-preview .contact-cta .bmb-cta--primary:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 12px 32px -6px rgba(141, 49, 155, 0.75),
             0 20px 52px -10px rgba(141, 49, 155, 0.45);
}.contact-preview .contact-cta .bmb-cta--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid rgba(141, 49, 155, 0.4);
}.contact-preview .contact-cta .bmb-cta--ghost:hover{
  background:rgba(141, 49, 155, 0.08);
  color:var(--brand);
  border-color:var(--brand);
}/* Shared ghost CTA for location cards */
.contact-preview .bmb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.7rem 1.4rem;
  border-radius:999px;
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}.contact-preview .contact-location .bmb-cta--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid rgba(141, 49, 155, 0.4);
}.contact-preview .contact-location .bmb-cta--ghost:hover{
  background:rgba(141, 49, 155, 0.08);
  color:var(--brand);
  border-color:var(--brand);
}