/* =========================================================
   STONE & VALE — CONTACT PAGE + GLOBAL CSS
   Paste this whole block into Avada > Options > Custom CSS.
   Background stays WHITE. Form is smaller with more spacing.
   ========================================================= */

/* ---- GLOBAL SPACING ---- */
#main { padding-top: 0 !important; margin-top: 0 !important; }

.fusion-tb-footer,
.fusion-footer { margin-top: -40px !important; }


/* ---- CONTACT PAGE (Code Block styles) ---- */
.ct * { box-sizing: border-box; margin: 0; padding: 0; }
.ct { font-family: 'Inter', sans-serif; color: #1f1d18; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; }

.ct-eyebrow { font-size: 11px; letter-spacing: 0.3em; color: #B08D48; text-transform: uppercase; font-weight: 600; margin-bottom: 22px; }
.ct-rule { width: 56px; height: 1px; background: #B08D48; opacity: 0.85; border: none; }

/* HERO */
.ct-hero { position: relative; background: #1a1815; min-height: 520px; display: flex; align-items: center; }
.ct-hero-bg { position: absolute; inset: 0; }
.ct-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,24,21,0.97) 0%, rgba(26,24,21,0.9) 32%, rgba(26,24,21,0.55) 58%, rgba(26,24,21,0.2) 100%); }
.ct-hero-inner { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 104px 64px; }
.ct-hero-text { max-width: 540px; }
.ct-hero h1 { font-family: 'Playfair Display', serif !important; font-size: 54px !important; font-weight: 900 !important; color: #faf7f0; line-height: 1.08 !important; letter-spacing: -0.01em; margin-bottom: 28px; }
.ct-hero h1 em { font-style: italic; color: #C9A95F; }
.ct-hero .ct-rule { margin-bottom: 28px; }
.ct-hero p { font-size: 16px; color: #bcb3a1; line-height: 1.85; max-width: 440px; }

/* MAIN grid (Code Block mock version) */
.ct-main { padding: 100px 64px; }
.ct-main-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: start; }
.ct-h2 { font-family: 'Playfair Display', serif !important; font-size: 32px !important; font-weight: 700 !important; color: #1f1d18; line-height: 1.15 !important; margin-bottom: 14px; }
.ct-h2 em { font-style: italic; color: #B08D48; }
.ct-sub { font-size: 15px; color: #6b6555; line-height: 1.75; margin-bottom: 34px; max-width: 420px; }

/* info */
.ct-info-item { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid #e3ddcf; }
.ct-info-item:first-of-type { padding-top: 0; }
.ct-ico { position: relative; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(160deg,#262119 0%,#1a1815 62%); border: 1px solid rgba(176,141,72,0.40); box-shadow: inset 0 1px 0 rgba(201,169,95,0.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.ct-ico::after { content: ''; position: absolute; top: -35%; right: -30%; width: 80%; height: 80%; background: radial-gradient(circle, rgba(201,169,95,0.20), transparent 70%); pointer-events: none; }
.ct-ico svg { position: relative; z-index: 1; width: 20px; height: 20px; }
.ct-ico svg path, .ct-ico svg circle, .ct-ico svg rect { stroke: #C9A95F; }
.ct-ico svg circle[fill] { fill: #C9A95F; }
.ct-info-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #8a6d2f; font-weight: 600; margin-bottom: 6px; }
.ct-info-val { font-size: 15px; color: #1f1d18; line-height: 1.55; }
.ct-info-val a { color: #1f1d18; text-decoration: none; }
.ct-info-val a:hover { color: #B08D48; }
.ct-card { margin-top: 28px; border: 1px solid #ddd5c4; background: #faf7f0; padding: 24px; display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: center; }
.ct-card h4 { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: #1f1d18; margin-bottom: 5px; }
.ct-card p { font-size: 13px; color: #6b6555; line-height: 1.55; margin-bottom: 10px; }
.ct-card a { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #B08D48; text-decoration: none; font-weight: 600; }
.ct-card a:hover { color: #C9A95F; }

/* LOWER split */
.ct-lower { background: #faf7f0; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.ct-lower-img { position: relative; min-height: 480px; }
.ct-lower-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-lower-text { padding: 96px 64px; display: flex; flex-direction: column; justify-content: center; max-width: 620px; }
.ct-lower-text h2 { font-family: 'Playfair Display', serif !important; font-size: 40px !important; font-weight: 900 !important; color: #1f1d18; line-height: 1.1 !important; margin-bottom: 22px; }
.ct-lower-text h2 em { font-style: italic; color: #B08D48; }
.ct-lower-text p { font-size: 16px; color: #6b6555; line-height: 1.85; max-width: 440px; }
.ct-lower-sign { font-family: 'Playfair Display', serif; font-style: italic; font-size: 22px; color: #C9A95F; margin-top: 28px; }

@media (max-width: 768px) {
  .ct-hero { min-height: 0; }
  .ct-hero-inner { padding: 80px 26px; }
  .ct-hero h1 { font-size: 36px !important; }
  .ct-hero-overlay { background: linear-gradient(180deg, rgba(26,24,21,0.94) 0%, rgba(26,24,21,0.82) 100%); }
  .ct-main { padding: 60px 26px; }
  .ct-main-inner { grid-template-columns: 1fr; gap: 56px; }
  .ct-h2 { font-size: 27px !important; }
  .ct-lower { grid-template-columns: 1fr; }
  .ct-lower-img { min-height: 280px; order: 1; }
  .ct-lower-text { padding: 56px 26px; order: 2; max-width: none; }
  .ct-lower-text h2 { font-size: 30px !important; }
}

/* column-safe variant for side-by-side form + info */
.ct-col { width: auto !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
.ct-col .ct-h2 { margin-top: 0; }


/* =========================================================
   REAL AVADA FORM — smaller fields, tidy spacing (white bg)
   Class  sv-contact-form  goes on the Avada Form element.
   ========================================================= */

/* space between the "Send A Message" lead-in and the form,
   matching the original */
.sv-contact-form { margin-top: 30px !important; }

.sv-contact-form input[type="text"],
.sv-contact-form input[type="email"],
.sv-contact-form input[type="tel"],
.sv-contact-form input[type="url"],
.sv-contact-form select,
.sv-contact-form textarea,
.sv-contact-form .fusion-form-input,
.sv-contact-form .fusion-form-field input,
.sv-contact-form .fusion-form-field select,
.sv-contact-form .fusion-form-field textarea {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #1f1d18 !important;
  background: #faf7f0 !important;
  border: 1px solid #ddd5c4 !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;      /* smaller fields */
  box-shadow: none !important;
  width: 100% !important;
  margin-bottom: 16px !important;      /* a little more air between fields */
}

.sv-contact-form input::placeholder,
.sv-contact-form textarea::placeholder,
.sv-contact-form select,
.sv-contact-form .fusion-form-input::placeholder { color: #8a8270 !important; }

.sv-contact-form input:focus,
.sv-contact-form select:focus,
.sv-contact-form textarea:focus,
.sv-contact-form .fusion-form-input:focus {
  border-color: #B08D48 !important;
  outline: none !important;
  background: #fff !important;
}

.sv-contact-form textarea { min-height: 120px !important; resize: vertical !important; }   /* shorter box */

/* smaller submit button */
.sv-contact-form button[type="submit"],
.sv-contact-form input[type="submit"],
.sv-contact-form .fusion-button,
.sv-contact-form .fusion-form-submit button {
  background: #1a1815 !important;
  color: #faf7f0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 13px 32px !important;       /* smaller button */
  margin-top: 8px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.sv-contact-form button[type="submit"]:hover,
.sv-contact-form input[type="submit"]:hover,
.sv-contact-form .fusion-button:hover,
.sv-contact-form .fusion-form-submit button:hover { background: #000 !important; }


/* =========================================================
   OPTIONAL — top/bottom breathing room for the middle section
   Add class  sv-contact-main  to the container if you want more
   space above and below. No background, so it stays white.
   ========================================================= */
.sv-contact-main {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}
@media (max-width: 768px) {
  .sv-contact-main { padding-top: 56px !important; padding-bottom: 56px !important; }
}


/* =========================================================
   HIDE JETPACK / WORDPRESS.COM LIKES & SHARING
   Removes the "Like this" and "Share this" blocks (top, above
   footer, and footer). Hiding the top one also closes the gap
   under the menu on blog posts.
   ========================================================= */
#jp-post-flair,
.sharedaddy,
.sd-sharing,
.sd-block,
.sd-like,
.jetpack-likes-widget-wrapper,
.wpl-likebox,
.post-likes-widget-placeholder,
div.sharedaddy.sd-sharing-enabled,
.jp-relatedposts {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   BLOG POST — CLOSE GAP ABOVE HERO
   Removes the empty space under the menu on single posts,
   caused by Avada's content padding and post navigation block.
   Scoped to blog posts only, so other pages are untouched.
   ========================================================= */
.single-post #main.width-100 { padding-top: 0 !important; padding-bottom: 0 !important; }
.single-post #content { padding-top: 0 !important; padding-bottom: 0 !important; }
.single-post #content .fusion-row { padding-top: 0 !important; margin-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
.single-post .single-navigation { display: none !important; }

/* Kill any residual white space above the footer, including on mobile */
.single-post #main,
.single-post .post-content,
.single-post .fusion-row { padding-bottom: 0 !important; margin-bottom: 0 !important; }
@media (max-width: 768px) {
  .single-post #main,
  .single-post #content,
  .single-post #content .fusion-row,
  .single-post .post-content { padding-bottom: 0 !important; margin-bottom: 0 !important; }
}

/* Hero meta line (date + read time) */
.sv-postblog .ct-hero .sv-hero-meta {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #C9A95F !important;
  margin: 1.5rem 0 0 0 !important;
}


/* =========================================================
   INSIGHTS BLOG INDEX — CARD GRID
   Add the CSS class  sv-blog  to the Avada Blog element.
   Set the element to: Layout = Grid, Featured images = on,
   Excerpt = on (~20 words). Columns are handled by the CSS
   below, so it stays responsive automatically.
   ========================================================= */

.sv-blog { padding: 8px 0 64px !important; }

/* Turn Avada's isotope layout into a clean responsive grid */
.sv-blog .fusion-posts-container {
  position: static !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 28px !important;
  margin: 0 !important;
}
.sv-blog .fusion-posts-container > article,
.sv-blog .fusion-posts-container > .fusion-post-grid {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

/* The card */
.sv-blog article.post,
.sv-blog .fusion-post-grid {
  background: #fff !important;
  border: 1px solid #e3ddcf !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.sv-blog article.post:hover,
.sv-blog .fusion-post-grid:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(26,24,21,0.10) !important;
}
.sv-blog .fusion-post-wrapper { padding: 0 !important; margin: 0 !important; border: none !important; }

/* Featured image */
.sv-blog .fusion-image-wrapper,
.sv-blog .fusion-post-content-wrapper .fusion-image-wrapper { position: relative !important; margin: 0 !important; }
.sv-blog .fusion-image-wrapper img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
}
/* Subtle dark wash so the set looks cohesive. Delete this rule for plain images. */
.sv-blog .fusion-image-wrapper::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(26,24,21,0) 45%, rgba(26,24,21,0.28) 100%) !important;
  pointer-events: none !important;
}

/* Card content */
.sv-blog .fusion-post-content,
.sv-blog .post-content {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.sv-blog .entry-title,
.sv-blog .blog-shortcode-post-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
}
.sv-blog .entry-title a,
.sv-blog .blog-shortcode-post-title a { color: #1f1d18 !important; text-decoration: none !important; }
.sv-blog .entry-title a:hover,
.sv-blog .blog-shortcode-post-title a:hover { color: #B08D48 !important; }

.sv-blog .fusion-meta-info,
.sv-blog .fusion-single-line-meta {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #8a8270 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}

.sv-blog .fusion-post-content-container,
.sv-blog .fusion-post-content-container p {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #6b6555 !important;
  line-height: 1.65 !important;
  margin: 0 0 16px !important;
}

.sv-blog .fusion-read-more,
.sv-blog a.fusion-read-more-button,
.sv-blog .fusion-read-more-button a {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #B08D48 !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin-top: auto !important;
}
.sv-blog .fusion-read-more:hover,
.sv-blog a.fusion-read-more-button:hover { color: #C9A95F !important; }

@media (max-width: 640px) {
  .sv-blog .fusion-posts-container { grid-template-columns: 1fr !important; }
}