.elementor-531 .elementor-element.elementor-element-8388a1a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-8392b90 *//* ============================================================
   PointingFish — CONTACT PAGE CSS  (pf-contact.css)
   ------------------------------------------------------------
   Loaded ONLY on: contact.html
   Requires: pf-main.css
   NOTE: pf-header.css / pf-footer.css NOT loaded here —
         WordPress theme handles nav and footer globally.

   Edit THIS file when working on contact.html.
   DO NOT add shared styles here — those go in pf-main.css.
   ------------------------------------------------------------
   SECTIONS IN THIS FILE:
     1.  Page Hero
     2.  Contact Grid Layout
     3.  Contact Sidebar & Methods
     4.  Demo Note
     5.  Contact Form Wrapper  (CF7 renders inside — no form CSS)
     6.  FAQs
     7.  Offices
     8.  Responsive (900px + 600px)
   ============================================================ */


/* ============================================================
   SECTION 1 — PAGE HERO
   contact.html › <section class="page-hero">
   ============================================================ */
.pf-site .page-hero {
  padding: 80px 0 72px;
  background: linear-gradient(150deg, var(--pf-sand-100) 0%, #fdfcfa 50%, white 100%);
}

.pf-site .page-hero .eyebrow { margin-bottom: 16px; }
.pf-site .page-hero h1        { margin-bottom: 20px; }
.pf-site .page-hero h1 em     { color: var(--pf-aqua-400); }
.pf-site .page-hero .lead     { max-width: 52ch; }


/* ============================================================
   SECTION 2 — CONTACT GRID LAYOUT
   contact.html › <div class="contact-grid">
   ============================================================ */
.pf-site .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}


/* ============================================================
   SECTION 3 — CONTACT SIDEBAR & METHODS
   contact.html › <div class="contact-info">
   ============================================================ */
.pf-site .contact-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pf-site .contact-method {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.pf-site .contact-method__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pf-navy-900);
  border-radius: 10px;
  color: var(--pf-aqua-400);
}

.pf-site .contact-method__icon svg { width: 22px; height: 22px; }

.pf-site .contact-method__body h3 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pf-navy-900);
  margin-bottom: 4px;
}

.pf-site .contact-method__body p {
  font-size: 0.83rem;
  color: var(--pf-ink-500);
  line-height: 1.5;
  margin-bottom: 6px;
  max-width: none;
}

.pf-site .contact-method__body a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pf-aqua-400);
  transition: color var(--ease-out);
}

.pf-site .contact-method__body a:hover { color: var(--pf-navy-900); }

.pf-site .contact-divider {
  height: 1px;
  background: var(--pf-line);
}


/* ============================================================
   SECTION 4 — DEMO NOTE
   contact.html › <div class="demo-note">
   ============================================================ */
.pf-site .demo-note {
  padding: 24px;
  background: var(--pf-navy-900);
  border-radius: var(--radius-md);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.pf-site .demo-note__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--pf-aqua-300);
}

.pf-site .demo-note__icon svg { width: 100%; height: 100%; }

.pf-site .demo-note h4 {
  font-size: 0.88rem;
  font-weight: 600;
  color: white;
  margin-bottom: 6px;
}

.pf-site .demo-note p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  max-width: none;
  margin: 0;
}


/* ============================================================
   SECTION 5 — CONTACT FORM WRAPPER
   contact.html › <div class="contact-form-wrap">
   CF7 shortcode renders inside — CF7/WP styles the form fields.
   ============================================================ */
.pf-site .contact-form-wrap {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-md);
}

.pf-site .contact-form-wrap h2 {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.pf-site .contact-form-wrap h2 em { color: var(--pf-aqua-400); }

.pf-site .contact-form-wrap > p {
  font-size: 0.88rem;
  color: var(--pf-ink-500);
  margin-bottom: 28px;
  max-width: none;
}


/* ============================================================
   SECTION 6 — FAQs
   contact.html › <div class="faq-list">
   ============================================================ */
.pf-site .section--sand { background: var(--pf-sand-100); }

.pf-site .faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 72px;
  align-items: start;
}

.pf-site .faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pf-site .faq-item { border-bottom: 1px solid var(--pf-line); }

.pf-site .faq-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 0 20px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pf-navy-900);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--ease-out);
}

.pf-site .faq-btn:hover { color: var(--pf-aqua-400); }

.pf-site .faq-btn__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--pf-aqua-400);
  transition: transform var(--ease-out);
}

.pf-site .faq-item.open .faq-btn__icon { transform: rotate(45deg); }

.pf-site .faq-answer {
  display: none;
  padding: 8px 0 20px 16px;
  font-size: 0.88rem;
  color: var(--pf-ink-700);
  line-height: 1.7;
  max-width: 72ch;
}

.pf-site .faq-item.open .faq-answer { display: block; }


/* ============================================================
   SECTION 7 — OFFICES
   contact.html › <div class="offices-grid">
   ============================================================ */
.pf-site .offices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pf-site .office-card {
  padding: 28px 24px;
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-md);
  background: white;
  transition: box-shadow var(--ease-out), transform var(--ease-out);
}

.pf-site .office-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.pf-site .office-card__flag {
  font-size: 1.6rem;
  margin-bottom: 12px;
  line-height: 1;
}

.pf-site .office-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pf-navy-900);
  margin-bottom: 8px;
}

.pf-site .office-card p {
  font-size: 0.83rem;
  color: var(--pf-ink-700);
  line-height: 1.6;
  max-width: none;
  margin: 0;
}

.pf-site .office-card__tag {
  display: inline-flex;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--pf-aqua-400);
  background: var(--pf-aqua-100);
  border-radius: 4px;
  padding: 3px 9px;
  letter-spacing: 0.05em;
}


/* ============================================================
   SECTION 8 — RESPONSIVE
   ============================================================ */
/*@media (max-width: 900px) {*/
/*  .pf-site .contact-grid { grid-template-columns: 1fr; gap: 48px; }*/
/*  .pf-site .faq-grid     { grid-template-columns: 1fr; gap: 40px; }*/
/*  .pf-site .offices-grid { grid-template-columns: 1fr 1fr; }*/
/*}*/

/*@media (max-width: 600px) {*/
/*  .pf-site .offices-grid      { grid-template-columns: 1fr; }*/
/*  .pf-site .contact-form-wrap { padding: 28px 20px; }*/
/*}*//* End custom CSS */