/* ==========================================================================
   Opal Tax Advisors — site styles
   Direction: "Quiet Confidence". Tokens mirror the saved design system.

   Structure is built with Elementor containers and widgets; this file only
   dresses them. Selectors are written against Elementor's real markup, where
   the widget wrapper carries the custom class and the inner element carries
   .elementor-heading-title.
   ========================================================================== */

:root {
  --opal-bg: #f3f2f2;
  --opal-surface: #ffffff;
  --opal-ink: #201e1d;
  --opal-accent: #0088b0;
  --opal-accent-deep: #006786;
  --opal-accent-light: #62c5ee;
  --opal-accent-pale: #cbeeff;
  --opal-night: #14100f;
  --opal-night-soft: #1b1817;
  --opal-muted: #605d5d;
  --opal-line: #d7d3d3;
  --opal-tint: #e9f8ff;
  --opal-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --opal-ease: cubic-bezier(.22, .7, .2, 1);
  --opal-gutter: 64px;
  --opal-max: 1560px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body.opal-site {
  background: var(--opal-bg);
  color: var(--opal-ink);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  --theme-font-family: var(--opal-serif);
}

/* One typeface throughout. Blocksy and the Elementor kit each ship a stack of
   their own, so this is the single place the family is decided. */
body.opal-site,
body.opal-site p,
body.opal-site li,
body.opal-site a,
body.opal-site span,
body.opal-site div,
body.opal-site button,
body.opal-site input,
body.opal-site select,
body.opal-site textarea,
body.opal-site label,
body.opal-site h1, body.opal-site h2, body.opal-site h3,
body.opal-site h4, body.opal-site h5, body.opal-site h6,
body.opal-site .elementor-heading-title,
body.opal-site .eael-accordion-tab-title,
body.opal-site .eael-accordion-content,
body.opal-site .wpforms-container,
body.opal-site .wpforms-container * { font-family: var(--opal-serif) !important; }

body.opal-site h1, body.opal-site h2, body.opal-site h3,
body.opal-site h4, body.opal-site h5, body.opal-site h6,
body.opal-site .elementor-heading-title {
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 0;
  color: var(--opal-ink);
}

body.opal-site a { color: var(--opal-accent-deep); text-decoration: none; }
body.opal-site a:hover { color: var(--opal-accent); }
body.opal-site :focus-visible { outline: 2px solid var(--opal-accent); outline-offset: 3px; }
body.opal-site ::selection { background: rgba(0, 136, 176, .22); }

body.opal-site .e-con,
body.opal-site .e-con-inner { --container-max-width: var(--opal-max); }

body.opal-site [id^="opal-"] { scroll-margin-top: 96px; }

/* --------------------------------------------------------------------------
   Header — sticky overlay, checkbox-driven mobile drawer (works without JS)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@keyframes opal-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes opal-hint { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(6px); opacity: 1; } }
@keyframes opal-pan { from { background-position: center 46%; } to { background-position: center 54%; } }

.opal-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--opal-ease), transform .8s var(--opal-ease);
}

.opal-reveal.is-in { opacity: 1; transform: none; }
.opal-stagger > * { transition-delay: calc(var(--opal-i, 0) * 80ms); }

.opal-anim { animation: opal-rise .95s var(--opal-ease) both; }
.opal-anim-1 { animation-delay: .15s; }
.opal-anim-2 { animation-delay: .3s; }
.opal-anim-3 { animation-delay: .45s; }
.opal-anim-4 { animation-delay: .6s; }
.opal-anim-5 { animation-delay: 1s; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

body.opal-site .opal-hero {
  --min-height: 100svh;
  min-height: 100svh;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  background-color: var(--opal-night);
  padding: 132px var(--opal-gutter) 92px !important;
  animation: opal-pan 40s ease-in-out infinite alternate;
}

body.opal-site .opal-hero .elementor-heading-title {
  color: #fff !important;
  font-size: clamp(42px, 6.2vw, 104px);
  line-height: 1.03;
  letter-spacing: -.025em;
  max-width: 17em;
  text-wrap: balance;
}

body.opal-site .opal-hero__lede {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .84);
  max-width: 34em;
}

/* Hero eyebrow keeps its rule; the scroll cue draws its arrow in CSS */
body.opal-site .opal-eyebrow--rule .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--opal-accent-pale) !important;
}

body.opal-site .opal-eyebrow--rule .elementor-heading-title::before {
  content: "";
  flex: none;
  width: 44px;
  height: 1px;
  background: var(--opal-accent-light);
}

body.opal-site .opal-hero__scroll { margin-top: 44px; }

body.opal-site .opal-hero__scroll .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6) !important;
}

body.opal-site .opal-hero__scroll .elementor-heading-title::before {
  content: "\2193";
  font-size: 15px;
  letter-spacing: 0;
  animation: opal-hint 2.6s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

body.opal-site .opal-eyebrow .elementor-heading-title {
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--opal-accent-deep);
}

body.opal-site .opal-h2 .elementor-heading-title { font-size: clamp(29px, 3vw, 44px); line-height: 1.1; }
body.opal-site .opal-h2-lg .elementor-heading-title { font-size: clamp(30px, 3.2vw, 50px); line-height: 1.08; }

body.opal-site .opal-lede { font-size: 19px; line-height: 1.62; color: #3a3737; margin-bottom: 20px; }
body.opal-site .opal-body { font-size: 17px; line-height: 1.65; color: #3a3737; }
body.opal-site .opal-note { font-size: 16px; line-height: 1.6; color: var(--opal-muted); }
body.opal-site .opal-quiet { font-size: 15px; line-height: 1.65; color: var(--opal-muted); }
body.opal-site .opal-lede p:last-child,
body.opal-site .opal-body p:last-child,
body.opal-site .opal-quiet p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

body.opal-site .opal-btn .elementor-button {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  border-radius: 2px;
  padding: 15px 32px;
  background: var(--opal-accent);
  color: #fff;
  border: 1px solid transparent;
  transition: background .3s ease, transform .3s var(--opal-ease);
}

body.opal-site .opal-btn .elementor-button:hover { background: var(--opal-accent-deep); transform: translateY(-2px); }

body.opal-site .opal-btn-ghost .elementor-button {
  background: transparent;
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}

body.opal-site .opal-btn-ghost .elementor-button:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .65);
}

body.opal-site .opal-btn-sm .elementor-button { padding: 11px 22px; font-size: 15px; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

body.opal-site .opal-section { padding: 130px var(--opal-gutter) 0; }
body.opal-site .opal-section--first { padding-top: 120px; }
body.opal-site .opal-section--tail { padding-bottom: 130px; }

body.opal-site .opal-wrap { max-width: var(--opal-max); margin-inline: auto; width: 100%; }

body.opal-site .opal-grid-2,
body.opal-site .opal-grid-3,
body.opal-site .opal-grid-4,
body.opal-site .opal-svc-grid,
body.opal-site .opal-split,
body.opal-site .opal-contact-grid { display: grid !important; }

body.opal-site .opal-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
body.opal-site .opal-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
body.opal-site .opal-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
body.opal-site .opal-svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
body.opal-site .opal-split { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: start; }
body.opal-site .opal-contact-grid { grid-template-columns: 1fr 1fr; gap: 32px 48px; margin-top: 24px; }

body.opal-site .opal-headrow {
  display: flex !important;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

body.opal-site .opal-headrow > *:first-child { flex: 1 1 560px; }
body.opal-site .opal-headrow > *:last-child { flex: 0 1 340px; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

body.opal-site .opal-card {
  position: relative;
  background: var(--opal-surface);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(32, 30, 29, .08);
  transition: transform .5s var(--opal-ease), box-shadow .5s var(--opal-ease);
}

/* The accent rule is drawn rather than marked up */
body.opal-site .opal-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--opal-accent);
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .5s var(--opal-ease);
}

body.opal-site .opal-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -22px rgba(32, 30, 29, .42); }
body.opal-site .opal-card:hover::before { transform: scaleX(1); }

body.opal-site .opal-card__meta .elementor-heading-title {
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--opal-muted);
}

body.opal-site .opal-card .elementor-heading-title { font-size: 22px; line-height: 1.22; }
body.opal-site .opal-card .opal-card__meta .elementor-heading-title { font-size: 11px !important; }

/* --------------------------------------------------------------------------
   Services grid — hairline-ruled cells, the page's signature move
   -------------------------------------------------------------------------- */

body.opal-site .opal-svc-grid {
  gap: 1px !important;
  background: var(--opal-line);
  border-radius: 2px;
  overflow: hidden;
}

body.opal-site .opal-svc-cell { background: var(--opal-surface); transition: background .4s ease; }
body.opal-site .opal-svc-cell:hover { background: var(--opal-tint); }
body.opal-site .opal-svc-cell.is-feature { background: #fbfbfb; }

body.opal-site .opal-svc-num .elementor-heading-title {
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--opal-accent-deep);
}

body.opal-site .opal-svc-cell .elementor-heading-title { font-size: 21px; line-height: 1.2; }
body.opal-site .opal-svc-cell .opal-svc-num .elementor-heading-title { font-size: 11px !important; }

body.opal-site .opal-svc-list ul { margin: 0; padding: 0; list-style: none; }

body.opal-site .opal-svc-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--opal-muted);
  list-style: none;
}

body.opal-site .opal-svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .9em;
  width: 8px;
  height: 1px;
  background: var(--opal-accent);
}

/* Closing cell carries the what-we-do photograph behind an ink gradient */
body.opal-site .opal-svc-cta {
  justify-content: flex-end;
  min-height: 300px;
  background-color: var(--opal-night);
}

body.opal-site .opal-svc-cta:hover { background-color: var(--opal-night); }
body.opal-site .opal-svc-cta .elementor-heading-title { color: #fff !important; font-size: 21px; line-height: 1.25; }
body.opal-site .opal-svc-cta__text { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
body.opal-site .opal-svc-cta__text p:last-child { margin-bottom: 0; }
body.opal-site .opal-svc-cta .elementor-widget-button { align-self: flex-start; }

/* --------------------------------------------------------------------------
   Dark bands
   -------------------------------------------------------------------------- */

body.opal-site .opal-band-dark { background-color: var(--opal-night); }
body.opal-site .opal-band-dark .elementor-heading-title { color: #fff !important; }
body.opal-site .opal-band-dark .opal-eyebrow .elementor-heading-title { color: var(--opal-accent-light) !important; }
body.opal-site .opal-band-dark .opal-body,
body.opal-site .opal-band-dark .opal-lede { color: rgba(255, 255, 255, .78); }
body.opal-site .opal-band-dark .opal-quiet { color: rgba(255, 255, 255, .64); }

body.opal-site .opal-reason { border-top: 1px solid rgba(255, 255, 255, .22); }
body.opal-site .opal-reason .elementor-heading-title { font-size: 24px; line-height: 1.18; margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   Approach
   -------------------------------------------------------------------------- */

body.opal-site .opal-stage__num .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px !important;
  letter-spacing: .1em;
  color: var(--opal-accent-deep);
}

body.opal-site .opal-stage__num .elementor-heading-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--opal-line);
}

body.opal-site .opal-stage .elementor-heading-title { font-size: 26px; line-height: 1.18; margin-bottom: 6px; }
body.opal-site .opal-stage .opal-stage__num .elementor-heading-title { font-size: 15px !important; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   FAQ — Essential Addons accordion, reduced to hairline rows
   -------------------------------------------------------------------------- */

body.opal-site .opal-section--faq {
  background: var(--opal-surface);
  padding-bottom: 130px;
  border-top: 1px solid var(--opal-line);
  border-bottom: 1px solid var(--opal-line);
  margin-top: 130px;
}

body.opal-site .opal-faq .eael-adv-accordion,
body.opal-site .opal-faq .eael-accordion-list,
body.opal-site .opal-faq .eael-accordion-header,
body.opal-site .opal-faq .eael-accordion-content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.opal-site .opal-faq .eael-accordion-list { border-top: 1px solid var(--opal-line) !important; }
body.opal-site .opal-faq .eael-accordion-list:last-child { border-bottom: 1px solid var(--opal-line) !important; }

body.opal-site .opal-faq .eael-accordion-header {
  display: flex !important;
  align-items: center;
  gap: 24px;
  padding: 26px 0 !important;
  margin: 0 !important;
  color: var(--opal-ink) !important;
  transition: color .3s ease;
}

body.opal-site .opal-faq .eael-accordion-header:hover { color: var(--opal-accent-deep) !important; }

body.opal-site .opal-faq .eael-accordion-tab-title {
  flex: 1;
  margin: 0;
  font-size: 21px;
  line-height: 1.32;
  font-weight: 600;
  color: inherit;
}

body.opal-site .opal-faq .eael-accordion-header > span { order: 2; line-height: 0; }
body.opal-site .opal-faq .eael-accordion-header > svg { display: none !important; }

body.opal-site .opal-faq .fa-accordion-icon {
  width: 14px;
  height: 14px;
  fill: var(--opal-accent) !important;
  color: var(--opal-accent) !important;
}

body.opal-site .opal-faq .eael-accordion-content {
  padding: 0 0 28px !important;
  font-size: 17px;
  line-height: 1.65;
  color: #3a3737 !important;
  max-width: 44em;
}

body.opal-site .opal-faq .eael-accordion-content p { margin: 0 0 14px; }
body.opal-site .opal-faq .eael-accordion-content p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Enquiry section and WPForms
   -------------------------------------------------------------------------- */

body.opal-site .opal-enquiry { background-color: var(--opal-night-soft); }
body.opal-site .opal-enquiry .elementor-heading-title { color: #fff !important; }
body.opal-site .opal-enquiry .opal-eyebrow .elementor-heading-title { color: var(--opal-accent-light) !important; }
body.opal-site .opal-enquiry .opal-lede { color: rgba(255, 255, 255, .78); }

body.opal-site .opal-contact__label .elementor-heading-title {
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5) !important;
}

body.opal-site .opal-contact__value { font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, .9); }
body.opal-site .opal-contact__value p:last-child { margin-bottom: 0; }
body.opal-site .opal-contact__value a { color: var(--opal-accent-pale) !important; }
body.opal-site .opal-contact__value a:hover { color: #fff !important; }

body.opal-site .opal-enquiry .wpforms-container { margin: 0; max-width: none; }
body.opal-site .opal-enquiry .wpforms-form .wpforms-field { padding: 0 0 22px; }

body.opal-site .opal-enquiry .wpforms-container .wpforms-field-label {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62) !important;
  margin-bottom: 9px;
}

body.opal-site .opal-enquiry .wpforms-container .wpforms-required-label { color: var(--opal-accent-light) !important; }

body.opal-site .opal-enquiry .wpforms-container input[type="text"],
body.opal-site .opal-enquiry .wpforms-container input[type="email"],
body.opal-site .opal-enquiry .wpforms-container input[type="tel"],
body.opal-site .opal-enquiry .wpforms-container textarea {
  width: 100%;
  max-width: 100%;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 17px !important;
  padding: 10px 0 !important;
  transition: border-color .3s ease;
}

body.opal-site .opal-enquiry .wpforms-container textarea { min-height: 128px; resize: vertical; }

body.opal-site .opal-enquiry .wpforms-container input:focus,
body.opal-site .opal-enquiry .wpforms-container textarea:focus {
  outline: 0;
  border-bottom-color: var(--opal-accent-light) !important;
  box-shadow: none !important;
}

body.opal-site .opal-enquiry .wpforms-container ::placeholder { color: rgba(255, 255, 255, .38); opacity: 1; }

body.opal-site .opal-enquiry .wpforms-container .wpforms-field-description {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .45) !important;
  margin-top: 8px;
}

body.opal-site .opal-enquiry .wpforms-container .wpforms-submit,
body.opal-site .opal-enquiry .wpforms-container button[type="submit"] {
  background-color: var(--opal-accent) !important;
  border: 0 !important;
  border-radius: 2px !important;
  color: #fff !important;
  font-size: 16px !important;
  padding: 15px 34px !important;
  cursor: pointer;
  transition: background-color .3s ease, transform .3s var(--opal-ease), color .3s ease;
}

body.opal-site .opal-enquiry .wpforms-container .wpforms-submit:hover,
body.opal-site .opal-enquiry .wpforms-container button[type="submit"]:hover {
  background-color: var(--opal-accent-light) !important;
  color: var(--opal-night) !important;
  transform: translateY(-2px);
}

body.opal-site .opal-enquiry .wpforms-error { color: #ffb3c9 !important; font-size: 13px; }

body.opal-site .opal-enquiry .wpforms-confirmation-container-full {
  background: rgba(98, 197, 238, .1);
  border: 1px solid rgba(98, 197, 238, .35);
  border-radius: 2px;
  padding: 22px 26px;
}

body.opal-site .opal-enquiry .wpforms-confirmation-container-full p { color: #fff; margin: 0; font-size: 17px; }

body.opal-site .opal-privacy { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .5); }
body.opal-site .opal-privacy p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Footer — rendered by Blocksy's footer builder, dressed to match
   -------------------------------------------------------------------------- */

body.opal-site footer.ct-footer {
  background-color: var(--opal-night);
  color: rgba(255, 255, 255, .64);
  font-size: 14px;
  line-height: 1.85;
}

body.opal-site .ct-footer .ct-container,
body.opal-site .ct-footer .ct-container-fluid { max-width: var(--opal-max); }

body.opal-site .ct-footer [data-row] { background: transparent; }
body.opal-site .ct-footer [data-row*="middle"] { padding-block: 84px 44px; }

body.opal-site .ct-footer [data-row*="bottom"] {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: 22px 40px;
}

body.opal-site .ct-footer a { color: rgba(255, 255, 255, .64) !important; }
body.opal-site .ct-footer a:hover { color: #fff !important; }
body.opal-site .ct-footer .widget { margin: 0; }

body.opal-site .ct-footer .opal-footer-logo { height: 46px; width: auto; max-width: none; display: block; }
body.opal-site .ct-footer .opal-footer-tagline { margin: 20px 0 0; max-width: 26em; color: rgba(255, 255, 255, .55); }
body.opal-site .ct-footer .opal-footer-text { margin: 0; }
body.opal-site .ct-footer .opal-footer-quiet { color: rgba(255, 255, 255, .45); }

body.opal-site .ct-footer .opal-footer-head,
body.opal-site .ct-footer .widget-title,
body.opal-site .ct-footer .widgettitle {
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff !important;
  margin: 0 0 10px;
}

body.opal-site .ct-footer .menu,
body.opal-site .ct-footer .widget_nav_menu ul { margin: 0; padding: 0; list-style: none; }
body.opal-site .ct-footer .widget_nav_menu li { margin: 0; list-style: none; }
body.opal-site .ct-footer .widget_nav_menu li a { display: inline-block; }

body.opal-site .ct-footer .ct-footer-copyright,
body.opal-site .ct-footer [data-id="copyright"] {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  :root { --opal-gutter: 40px; }
  body.opal-site .opal-grid-4,
  body.opal-site .opal-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
}

@media (max-width: 960px) {
  body.opal-site .opal-grid-2,
  body.opal-site .opal-grid-3,
  body.opal-site .opal-split { grid-template-columns: minmax(0, 1fr); }
  body.opal-site .opal-section { padding-top: 84px; }
  body.opal-site .opal-section--tail { padding-bottom: 84px; }
  body.opal-site .opal-section--faq { margin-top: 84px; padding-bottom: 84px; }
  body.opal-site .opal-headrow { flex-direction: column; align-items: flex-start; }
  body.opal-site .ct-footer [data-row*="middle"] { padding-block: 60px 32px; }
}

@media (max-width: 780px) {
  :root { --opal-gutter: 22px; }

  body.opal-site .opal-hero {
    min-height: 92svh;
    padding: 116px var(--opal-gutter) 72px !important;
  }

  body.opal-site .opal-eyebrow--rule .elementor-heading-title::before { display: none; }
  
  /* One column, edge to edge, so the cells stay square to the page */
  body.opal-site .opal-grid-4,
  body.opal-site .opal-svc-grid { grid-template-columns: minmax(0, 1fr); }
  body.opal-site .opal-svc-cell { padding: 32px 24px !important; }
  body.opal-site .opal-card { padding: 32px 24px !important; }
  body.opal-site .opal-svc-cta { min-height: 240px; }

  body.opal-site .opal-card .elementor-heading-title,
  body.opal-site .opal-svc-cell .elementor-heading-title { font-size: 20px; }
  body.opal-site .opal-stage .elementor-heading-title,
  body.opal-site .opal-reason .elementor-heading-title { font-size: 22px; }

  body.opal-site .opal-faq .eael-accordion-tab-title { font-size: 19px; }
  body.opal-site .opal-faq .eael-accordion-header { gap: 16px; }

  body.opal-site ul.opal-drawer-list a { font-size: 21px; }
}

@media (max-width: 620px) {
  body.opal-site .opal-contact-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.opal-site .opal-hero { animation: none; }
  .opal-anim { animation: none; }
  .opal-reveal { opacity: 1; transform: none; transition: none; }
  body.opal-site .opal-hero__scroll .elementor-heading-title::before { animation: none; }
  body.opal-site .opal-card:hover { transform: none; }
}

/* ==========================================================================
   Corrections
   ========================================================================== */

/* Only one lockup is ever visible. The sizing rule above sets display on the
   image, which was overriding the light/dark swap and showing both at once. */
  height: 38px !important;
  width: auto !important;
  max-width: none;
}


/* Footer widgets, now native image / heading / paragraph blocks */
body.opal-site .ct-footer figure.opal-footer-logo { margin: 0 0 20px; }

body.opal-site .ct-footer figure.opal-footer-logo img {
  height: 46px;
  width: auto;
  max-width: none;
  display: block;
}

body.opal-site .ct-footer .opal-footer-tagline { margin: 0; max-width: 26em; color: rgba(255, 255, 255, .55); }

/* Four columns on desktop, two on tablet, stacked on phones. Blocksy drives
   this through a custom property on the row container. */
body.opal-site .ct-footer [data-row*="middle"] > .ct-container,
body.opal-site .ct-footer [data-row*="middle"] > .ct-container-fluid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}

@media (max-width: 1000px) {
  body.opal-site .ct-footer [data-row*="middle"] > .ct-container,
  body.opal-site .ct-footer [data-row*="middle"] > .ct-container-fluid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

@media (max-width: 620px) {
  body.opal-site .ct-footer [data-row*="middle"] > .ct-container,
  body.opal-site .ct-footer [data-row*="middle"] > .ct-container-fluid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* Section head rows: on narrow screens the flex-basis was being read as a
   height once the row turned into a column, opening a large empty gap. */
@media (max-width: 960px) {
  body.opal-site .opal-headrow {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px !important;
  }

  body.opal-site .opal-headrow > *,
  body.opal-site .opal-headrow > *:first-child,
  body.opal-site .opal-headrow > *:last-child {
    flex: 0 0 auto !important;
    width: 100%;
    max-width: 100%;
  }

  body.opal-site .opal-headrow .opal-note { max-width: 100%; }
}
/* ==========================================================================
   Revision: native Blocksy header, boxed form fields, FAQ contrast
   ========================================================================== */

/* The header is now Blocksy's own builder output. These rules only dress it. */
body.opal-site .ct-header [data-row="middle"] { --header-height: 92px; }

body.opal-site .ct-header .site-logo-container img,
body.opal-site .ct-header [data-id="logo"] img {
  max-height: 52px;
  width: auto;
}

body.opal-site .ct-header [data-id="menu"] .menu > li > a {
  font-size: 17px;
  letter-spacing: .02em;
}

body.opal-site .ct-header [data-id="button"] .ct-button {
  border-radius: 2px;
  font-size: 16px;
  padding: 12px 26px;
}

/* Offcanvas panel */
body.opal-site #offcanvas .ct-panel-inner,
body.opal-site #offcanvas .ct-panel-content { background-color: var(--opal-night); }
body.opal-site #offcanvas .menu > li > a { font-size: 22px; color: #fff; }
body.opal-site #offcanvas .menu > li > a:hover { color: var(--opal-accent-light); }

/* The Elementor page starts under the transparent header */
body.opal-site .opal-hero { --min-height: 100svh; }

/* --------------------------------------------------------------------------
   FAQ — the question keeps its ink colour when hovered and when open.
   Essential Addons sets white on both states, which vanished on white.
   -------------------------------------------------------------------------- */

body.opal-site .opal-faq .eael-accordion-header,
body.opal-site .opal-faq .eael-accordion-header:hover,
body.opal-site .opal-faq .eael-accordion-header:focus,
body.opal-site .opal-faq .eael-accordion-header.active,
body.opal-site .opal-faq .eael-accordion-header.show-this,
body.opal-site .opal-faq .eael-accordion-header.active-default {
  color: var(--opal-ink) !important;
  background: transparent !important;
}

body.opal-site .opal-faq .eael-accordion-header .eael-accordion-tab-title,
body.opal-site .opal-faq .eael-accordion-header:hover .eael-accordion-tab-title,
body.opal-site .opal-faq .eael-accordion-header.active .eael-accordion-tab-title,
body.opal-site .opal-faq .eael-accordion-header.show-this .eael-accordion-tab-title,
body.opal-site .opal-faq .eael-accordion-header.active-default .eael-accordion-tab-title {
  color: var(--opal-ink) !important;
}

body.opal-site .opal-faq .eael-accordion-header.active .fa-accordion-icon,
body.opal-site .opal-faq .eael-accordion-header:hover .fa-accordion-icon {
  fill: var(--opal-accent) !important;
  color: var(--opal-accent) !important;
}

/* --------------------------------------------------------------------------
   Enquiry form — boxed fields with softly rounded corners
   -------------------------------------------------------------------------- */

body.opal-site .opal-enquiry .wpforms-container input[type="text"],
body.opal-site .opal-enquiry .wpforms-container input[type="email"],
body.opal-site .opal-enquiry .wpforms-container input[type="tel"],
body.opal-site .opal-enquiry .wpforms-container textarea {
  background-color: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 10px !important;
  padding: 15px 18px !important;
  font-size: 16px !important;
  color: #fff !important;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}

body.opal-site .opal-enquiry .wpforms-container input[type="text"]:hover,
body.opal-site .opal-enquiry .wpforms-container input[type="email"]:hover,
body.opal-site .opal-enquiry .wpforms-container input[type="tel"]:hover,
body.opal-site .opal-enquiry .wpforms-container textarea:hover {
  border-color: rgba(255, 255, 255, .3) !important;
}

body.opal-site .opal-enquiry .wpforms-container input:focus,
body.opal-site .opal-enquiry .wpforms-container textarea:focus {
  background-color: rgba(255, 255, 255, .1) !important;
  border-color: var(--opal-accent-light) !important;
  box-shadow: 0 0 0 3px rgba(98, 197, 238, .16) !important;
  outline: 0;
}

body.opal-site .opal-enquiry .wpforms-container textarea { min-height: 140px; }

body.opal-site .opal-enquiry .wpforms-container .wpforms-submit,
body.opal-site .opal-enquiry .wpforms-container button[type="submit"] {
  border-radius: 10px !important;
  padding: 15px 34px !important;
}

body.opal-site .opal-enquiry .wpforms-confirmation-container-full { border-radius: 10px; }
/* ==========================================================================
   Header — Blocksy's native builder output
   Transparent over the hero, paper once sticky. Logo, menu, CTA and the
   mobile trigger are all theme items, configurable in the Customizer.
   ========================================================================== */

body.opal-site .ct-header [data-row="middle"] .ct-container { max-width: var(--opal-max); }

/* Logo */
body.opal-site .ct-header [data-id="logo"] .site-logo-container img,
body.opal-site .ct-header [data-id="logo"] img {
  max-height: 54px;
  width: auto;
  max-width: none;
}

/* Navigation */
body.opal-site .ct-header [data-id="menu"] > ul > li > a.ct-menu-link {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .02em;
}

/* CTA button */
body.opal-site .ct-header [data-id="button"] .ct-button {
  background-color: var(--opal-accent);
  color: #fff;
  border-radius: 2px;
  font-size: 16px;
  font-weight: 400;
  padding: 13px 26px;
  transition: background-color .3s ease, transform .3s var(--opal-ease);
}

body.opal-site .ct-header [data-id="button"] .ct-button:hover {
  background-color: var(--opal-accent-deep);
  color: #fff;
  transform: translateY(-2px);
}

/* Over the hero the CTA is an outline, so it does not compete with the H1 */
body.opal-site .ct-header [data-transparent-row="yes"] [data-id="button"] .ct-button {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
}

body.opal-site .ct-header [data-transparent-row="yes"] [data-id="button"] .ct-button:hover {
  background-color: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .65);
}

/* Off-canvas panel */
body.opal-site #offcanvas .ct-panel-inner { background-color: var(--opal-night); }
body.opal-site #offcanvas .ct-toggle-close .ct-icon { fill: #fff; }

body.opal-site #offcanvas .mobile-menu > ul > li > a.ct-menu-link {
  font-size: 22px;
  color: #fff;
  padding-block: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

body.opal-site #offcanvas .mobile-menu > ul > li > a.ct-menu-link:hover { color: var(--opal-accent-light); }

/* Mobile trigger */
body.opal-site .ct-header [data-id="trigger"] .ct-icon { width: 26px; height: 26px; }

@media (max-width: 780px) {
  body.opal-site .ct-header [data-id="logo"] img { max-height: 34px; }
  body.opal-site #offcanvas .mobile-menu > ul > li > a.ct-menu-link { font-size: 20px; }
}
/* ==========================================================================
   Header states
   Blocksy's sticky script adds data-transparent-row="yes" while the header
   floats over the hero and removes it once the header sticks, so both states
   key off that one attribute.
   ========================================================================== */

/* Stuck / default: paper */
body.opal-site .ct-header [data-row="middle"] {
  background-color: rgba(243, 242, 242, .94) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 rgba(32, 30, 29, .12);
  transition: background-color .4s ease, box-shadow .4s ease;
}

/* Floating over the hero: fully transparent */
body.opal-site .ct-header [data-row="middle"][data-transparent-row="yes"] {
  background-color: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* Logo swaps with the state */
body.opal-site .ct-header [data-row="middle"] .site-logo-container .default-logo { display: none; }
body.opal-site .ct-header [data-row="middle"] .site-logo-container .sticky-logo { display: block; }
body.opal-site .ct-header [data-row="middle"][data-transparent-row="yes"] .site-logo-container .default-logo { display: block; }
body.opal-site .ct-header [data-row="middle"][data-transparent-row="yes"] .site-logo-container .sticky-logo { display: none; }

/* Menu: ink on paper, white over the photograph, brand blue on hover in both */
body.opal-site .ct-header [data-row="middle"] .ct-menu-link {
  color: var(--opal-ink) !important;
  transition: color .3s ease;
}

body.opal-site .ct-header [data-row="middle"] .ct-menu-link:hover,
body.opal-site .ct-header [data-row="middle"] .current-menu-item > .ct-menu-link {
  color: var(--opal-accent) !important;
}

body.opal-site .ct-header [data-row="middle"][data-transparent-row="yes"] .ct-menu-link { color: #fff !important; }

body.opal-site .ct-header [data-row="middle"][data-transparent-row="yes"] .ct-menu-link:hover,
body.opal-site .ct-header [data-row="middle"][data-transparent-row="yes"] .current-menu-item > .ct-menu-link {
  color: var(--opal-accent) !important;
}

/* Mobile trigger follows the same logic */
body.opal-site .ct-header [data-row="middle"] .ct-header-trigger .ct-icon { fill: var(--opal-ink); transition: fill .3s ease; }
body.opal-site .ct-header [data-row="middle"] .ct-header-trigger .ct-label { color: var(--opal-ink); }
body.opal-site .ct-header [data-row="middle"] .ct-header-trigger:hover .ct-icon { fill: var(--opal-accent); }
body.opal-site .ct-header [data-row="middle"][data-transparent-row="yes"] .ct-header-trigger .ct-icon { fill: #fff; }
body.opal-site .ct-header [data-row="middle"][data-transparent-row="yes"] .ct-header-trigger .ct-label { color: #fff; }
body.opal-site .ct-header [data-row="middle"][data-transparent-row="yes"] .ct-header-trigger:hover .ct-icon { fill: var(--opal-accent-light); }
/* ==========================================================================
   Final adjustments
   ========================================================================== */

/* Hero eyebrow reads as a standfirst on desktop, not a caption */
@media (min-width: 781px) {
  body.opal-site .opal-hero .opal-eyebrow--rule .elementor-heading-title {
    font-size: 14px !important;
    letter-spacing: .2em;
  }

  body.opal-site .opal-hero .opal-eyebrow--rule .elementor-heading-title::before { width: 54px; }
}

@media (min-width: 1200px) {
  body.opal-site .opal-hero .opal-eyebrow--rule .elementor-heading-title { font-size: 15px !important; }
}

/* --------------------------------------------------------------------------
   Footer — one text colour across every column, no accent blue
   -------------------------------------------------------------------------- */

body.opal-site .ct-footer .opal-footer-text,
body.opal-site .ct-footer .opal-footer-tagline,
body.opal-site .ct-footer .opal-footer-quiet,
body.opal-site .ct-footer .widget_nav_menu a,
body.opal-site .ct-footer .ct-widget p,
body.opal-site .ct-footer .ct-widget li a {
  color: rgba(255, 255, 255, .64) !important;
}

body.opal-site .ct-footer .opal-footer-text a,
body.opal-site .ct-footer .ct-widget p a {
  color: rgba(255, 255, 255, .64) !important;
  text-decoration: none;
  transition: color .3s ease;
}

body.opal-site .ct-footer .opal-footer-text a:hover,
body.opal-site .ct-footer .ct-widget p a:hover,
body.opal-site .ct-footer .widget_nav_menu a:hover { color: #fff !important; }

/* Air between the lockup and the sentence beneath it */
body.opal-site .ct-footer figure.opal-footer-logo { margin: 0 0 4px; }
body.opal-site .ct-footer .opal-footer-tagline { margin-top: 26px; }
body.opal-site .ct-footer [data-column="widget-area-1"] .ct-widget + .ct-widget { margin-top: 0; }
/* ==========================================================================
   Footer column alignment
   Column one leads with the lockup, the others with a small caps heading.
   Giving every heading the same block height as the logo puts the first line
   of body text on one baseline across all four columns.
   ========================================================================== */

body.opal-site .ct-footer .opal-footer-head,
body.opal-site .ct-footer .widget-title,
body.opal-site .ct-footer .widgettitle {
  display: flex;
  align-items: flex-end;
  min-height: 46px;
  margin: 0 0 30px !important;
}

body.opal-site .ct-footer figure.opal-footer-logo { margin: 0 0 4px; }
body.opal-site .ct-footer figure.opal-footer-logo img { height: 46px; width: auto; display: block; }
body.opal-site .ct-footer .opal-footer-tagline { margin-top: 26px; }

/* The heading and its list live in one widget, so the gap is set above */
body.opal-site .ct-footer .widget_nav_menu ul { margin-top: 0; }

@media (max-width: 620px) {
  body.opal-site .ct-footer .opal-footer-head,
  body.opal-site .ct-footer .widget-title,
  body.opal-site .ct-footer .widgettitle {
    min-height: 0;
    margin: 0 0 12px !important;
  }

  body.opal-site .ct-footer .opal-footer-tagline { margin-top: 18px; }
}
/* ==========================================================================
   Hero legibility without a heavy overlay
   The scrim now sits at 10–15%, so the type carries its own contrast through
   a soft shadow rather than by darkening the photograph.
   ========================================================================== */

body.opal-site .opal-hero .elementor-heading-title {
  text-shadow: 0 2px 18px rgba(20, 16, 15, .55), 0 1px 3px rgba(20, 16, 15, .4);
}

body.opal-site .opal-hero__lede,
body.opal-site .opal-hero__lede p {
  text-shadow: 0 1px 12px rgba(20, 16, 15, .6), 0 1px 2px rgba(20, 16, 15, .45);
}

body.opal-site .opal-hero .opal-eyebrow--rule .elementor-heading-title,
body.opal-site .opal-hero__scroll .elementor-heading-title {
  text-shadow: 0 1px 10px rgba(20, 16, 15, .6);
}

/* The ghost button needs a touch more edge now the ground behind it is lighter */
body.opal-site .opal-hero .opal-btn-ghost .elementor-button {
  border-color: rgba(255, 255, 255, .6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* ==========================================================================
   Preloader
   Paints before anything else and clears on window load. Nothing on the page
   depends on it: if the script never runs, the panel is simply not shown.
   ========================================================================== */

.opal-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--opal-night, #14100f);
  opacity: 1;
  transition: opacity .55s ease, visibility .55s ease;
}

.opal-preloader.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }

.opal-preloader__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.opal-preloader__mark img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  animation: opal-pulse 1.9s ease-in-out infinite;
}

/* A determinate-looking sweep rather than a spinner — quieter, and it suits
   the register of the rest of the site. */
.opal-preloader__bar {
  position: relative;
  display: block;
  width: 132px;
  height: 1px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}

.opal-preloader__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--opal-accent, #0088b0);
  animation: opal-sweep 1.4s var(--opal-ease, cubic-bezier(.22,.7,.2,1)) infinite;
}

@keyframes opal-pulse {
  0%, 100% { opacity: .78; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes opal-sweep {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* Hold the scrollbar still while the panel is up */
html.opal-loading, html.opal-loading body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .opal-preloader__mark img { animation: none; }
  .opal-preloader__bar i { animation: none; left: 0; width: 100%; opacity: .5; }
}
/* Preloader mark is the reversed lockup, which is wide rather than square */
.opal-preloader__mark img {
  width: clamp(200px, 26vw, 280px) !important;
  height: auto !important;
  object-fit: contain;
}

.opal-preloader__bar { width: clamp(160px, 20vw, 220px); }

@media (max-width: 620px) {
  .opal-preloader__mark img { width: 210px !important; }
  .opal-preloader__bar { width: 150px; }
}
/* Preloader mark is the gem symbol again — square, so it sizes as one */
.opal-preloader__mark img {
  width: 88px !important;
  height: 88px !important;
  object-fit: contain;
}

.opal-preloader__bar { width: 132px; }

@media (max-width: 620px) {
  .opal-preloader__mark img { width: 74px !important; height: 74px !important; }
  .opal-preloader__bar { width: 116px; }
}
/* ==========================================================================
   Hero motion
   The photograph is an Elementor container background, so it cannot be
   transformed directly. A pseudo-element inherits the same image and takes
   the transform instead, which keeps the drift on the compositor and leaves
   the image editable in Elementor.
   ========================================================================== */

body.opal-site .opal-hero {
  position: relative;
  overflow: hidden;
  animation: none;
}

body.opal-site .opal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform-origin: 50% 58%;
  will-change: transform;
  animation: opal-kenburns 34s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Elementor's gradient overlay sits above the moving image */
body.opal-site .opal-hero::before { z-index: 1; }

/* and the content sits above both */
body.opal-site .opal-hero > .e-con-inner,
body.opal-site .opal-hero > .elementor-element,
body.opal-site .opal-hero > .opal-wrap {
  position: relative;
  z-index: 2;
}

@keyframes opal-kenburns {
  from { transform: scale(1.05) translate3d(-1.2%, 0, 0); }
  to   { transform: scale(1.17) translate3d(1.2%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body.opal-site .opal-hero::after { animation: none; transform: none; }
}
/* ==========================================================================
   Entrance animations
   Widget-level, set through Elementor's own Motion Effects control so they
   stay editable. These rules only tune the curve and cover the failure case.
   ========================================================================== */

body.opal-site .elementor-widget.animated {
  animation-duration: .85s;
  animation-timing-function: cubic-bezier(.22, .7, .2, 1);
  animation-fill-mode: both;
}

/* A shorter travel than Elementor's default — the page should settle, not leap */
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Nothing may stay hidden: if the animation script never runs, show the copy */
@media (prefers-reduced-motion: reduce) {
  body.opal-site .elementor-invisible { visibility: visible !important; }
  body.opal-site .elementor-widget.animated { animation: none !important; }
}

@media print {
  body.opal-site .elementor-invisible { visibility: visible !important; }
}
/* ==========================================================================
   Mobile corrections
   The two-column rows carry 80–88px column gaps for desktop. Once they stack
   that same figure becomes vertical space, which opened a large hole between
   every heading and the paragraph belonging to it.
   ========================================================================== */

@media (max-width: 960px) {
  body.opal-site .opal-grid-2,
  body.opal-site .opal-split { gap: 20px !important; }

  body.opal-site .opal-grid-3 { gap: 34px !important; }
  body.opal-site .opal-grid-4 { gap: 22px !important; }
  body.opal-site .opal-headrow { gap: 14px !important; }
  body.opal-site .opal-contact-grid { gap: 26px !important; }

  /* The hairline service grid keeps its 1px rules */
  body.opal-site .opal-svc-grid { gap: 1px !important; }

  /* Balanced wrapping equalises line lengths, which on a narrow column reads
     as though the heading is floating rather than sitting flush left. */
  body.opal-site .opal-hero .elementor-heading-title,
  body.opal-site .opal-h2 .elementor-heading-title,
  body.opal-site .opal-h2-lg .elementor-heading-title {
    text-wrap: pretty;
    max-width: 100%;
  }

  /* Everything on the page reads flush left */
  body.opal-site .elementor-widget-heading .elementor-heading-title,
  body.opal-site .elementor-widget-text-editor,
  body.opal-site .elementor-widget-text-editor p,
  body.opal-site .opal-eyebrow .elementor-heading-title {
    text-align: left !important;
  }

  body.opal-site .opal-hero .elementor-heading-title { max-width: 100%; }
}

@media (max-width: 620px) {
  body.opal-site .opal-grid-2,
  body.opal-site .opal-split { gap: 16px !important; }
  body.opal-site .opal-grid-3 { gap: 28px !important; }
  body.opal-site .opal-lede { margin-bottom: 14px; }
}
/* ==========================================================================
   Email addresses stay on one line
   The footer columns narrow considerably between about 1000px and 1300px,
   and the theme allows breaking inside long words, so the address split.
   ========================================================================== */

body.opal-site .ct-footer a[href^="mailto:"],
body.opal-site .ct-footer .opal-footer-text a,
body.opal-site .opal-contact__value a[href^="mailto:"],
body.opal-site .opal-contact__value a[href^="tel:"],
body.opal-site .opal-drawer__meta a[href^="mailto:"] {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* Give the address room rather than letting the column squeeze it */
body.opal-site .ct-footer .opal-footer-text,
body.opal-site .opal-contact__value {
  overflow-wrap: normal;
  word-break: keep-all;
}

/* On the narrowest phones step the address down a touch so nowrap can never
   push it past the screen edge */
@media (max-width: 380px) {
  body.opal-site .ct-footer a[href^="mailto:"],
  body.opal-site .opal-contact__value a[href^="mailto:"] { font-size: 13.5px; }
}
/* ==========================================================================
   Sticky header pins flush to the viewport
   ========================================================================== */

body.opal-site .ct-header [data-sticky],
body.opal-site .ct-header .ct-sticky-container > [data-sticky],
body.opal-site .ct-sticky-container [data-sticky] {
  top: 0 !important;
  margin-top: 0 !important;
}

body.opal-site .ct-header [data-device="desktop"],
body.opal-site .ct-header [data-device="mobile"] { margin-top: 0 !important; }

/* ==========================================================================
   Navigation
   The menu carries a "Send an enquiry" item for the mobile panel, where there
   is no CTA button. On desktop the button already says it, so the duplicate
   is hidden rather than removed from the menu.
   ========================================================================== */

body.opal-site .ct-header [data-id="menu"] > ul > li:last-child { display: none; }

/* The lockup is the only element on the page set in caps */
body.opal-site .ct-header [data-id="menu"] > ul > li > a.ct-menu-link {
  text-transform: none;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .01em;
}

/* The off-canvas panel keeps the enquiry link, since it has no button */
body.opal-site #offcanvas .mobile-menu > ul > li:last-child { display: list-item; }