/*
Theme Name:   SEQ Building Design Child
Theme URI:    https://seqbuildingdesign.com.au
Description:  Hello Elementor child theme for SEQ Building Design
Author:       Zeeshan Haider
Author URI:   https://linkedin.com/in/z-e-e-s-h-a-n
Template:     hello-elementor
Version:      1.1.2
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  seq-child
*/

/* ============================================================
   FONTS — self-hosted Bebas Neue (matches Alan's live site files)
   Files in theme: wp-content/themes/seq-child/fonts/
   Theme-relative url() resolves against this stylesheet's URL.
   ============================================================ */
@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/BebasNeue-webfont.woff') format('woff'),
       url('fonts/BebasNeue-webfont.ttf')  format('truetype');
  font-weight: 400;
  font-style: normal;
  /* `block` keeps text invisible briefly while the font loads, then
     paints with Bebas Neue — no Arial-to-Bebas swap flash. Combined
     with the wp_head preload, the font is already cached when this
     rule is parsed, so the invisible window is effectively zero. */
  font-display: block;
}

/* ============================================================
   DESIGN TOKENS — match seqbuildingdesign.com.au prototype
   ============================================================ */
:root {
  --seq-ink:          #3D3D3F;
  --seq-ink-2:        #212121;
  --seq-orange:       #FF5100;
  --seq-orange-2:     #FF5100;
  /* GLOBALCOLOR: beige palette replaced with the original's light greys */
  --seq-paper:        #f0f0f0;
  --seq-paper-2:      #fafafa;
  --seq-line:         #e0dacf;
  --seq-muted:        #606060;
  --seq-white:        #ffffff;
  --seq-glass:        rgba(255,255,255,.82);
  --seq-radius:       5px;
  --seq-transition:   .3s cubic-bezier(.34,.1,.64,1);
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Open Sans', sans-serif;
  color: var(--seq-ink);
  background: var(--seq-white);
  font-size: 16px;
  line-height: 1.62;
  /* G2 (Alan): force DEFAULT font smoothing. The hello-elementor parent
     reset.css sets body{-webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale}, which renders text visibly
     thinner than the original site (default subpixel smoothing).
     Weight/colour already match; `auto` closes the perceived-weight
     gap. Must stay an explicit override — removing our declaration
     just lets the parent reset win. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--seq-ink);
}

h3, h4, h5 { line-height: 1.28; letter-spacing: -0.015em; }
p { text-wrap: pretty; margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--seq-orange); transition: color .2s; }
a:hover { color: var(--seq-orange-2); }

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.seq-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 9999;
  background: linear-gradient(90deg, var(--seq-orange), var(--seq-orange-2));
  box-shadow: 0 0 12px rgba(255,81,0,.5);
  transition: width .12s linear;
  pointer-events: none;
}

/* ============================================================
   HEADER — condense + glass on scroll
   ============================================================ */
.site-header,
header.site-header {
  /* STICKYDARK (Alan, round 2): header follows the page on scroll again.
     Original complaint was only the WHITE scrolled state, not stickiness —
     so position:sticky is restored (the proven pre-G1 state) and the
     .scrolled state below is now dark charcoal instead of white. sticky
     (not fixed) keeps the header in normal flow at the top so the hero-band
     pages still pull their photo up under it; it sticks once scrolled.
     The .scrolled JS toggle is re-enabled in seq-main.js. */
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--seq-white);
  border-bottom: 1px solid var(--seq-line);
  transition: box-shadow .25s ease, background .25s ease, min-height .25s ease;
}

/* Offset the sticky header below the WP admin bar ONLY when logged in
   (body.admin-bar). Logged-out visitors keep the base top:0 above.
   These (.admin-bar .site-header = 0,2,0) win over base top:0. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* Full-width sticky bar (Part D): override hello-elementor's
   .site-header:not(.dynamic-header){max-width:1140px;margin-inline:auto}.
   Inner .seq-header-inner stays centered at its own max-width + padding. */
header.site-header:not(.dynamic-header),
.site-header:not(.dynamic-header) {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Scrolled header (Alan, final): back to GREY, but matched to the hero
   "home box" grey — rgba(61,61,63,.85), the same tone/depth as the WELCOME
   box below — not the heavy solid #212121 and not fully transparent. */
.site-header.scrolled {
  box-shadow: none;
  background: rgba(61, 61, 63, 0.85);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}

/* Header logo shrink on scroll — width only. Height must stay auto so the
   267x91 logo scales proportionally; a max-height clamp here squashed it. */
.site-header.scrolled .elementor-widget-site-logo img,
.site-header.scrolled .custom-logo {
  width: 220px;
  height: auto;
  max-height: none;
  transition: width .25s ease;
}

/* STICKYDARK: white nav links on the dark scrolled bar. Scoped to the
   DESKTOP nav only (>=1280px, matching the 1279px drawer breakpoint) so
   the mobile drawer — which has a WHITE panel with dark links — is never
   forced white-on-white. Orange hover/active preserved. */
@media (min-width: 1280px) {
  .site-header.scrolled .seq-menu > li > a,
  .site-header.scrolled .seq-menu > li > a:link,
  .site-header.scrolled .seq-menu > li > a:visited {
    color: #FFFFFF !important;
    text-shadow: none !important;
  }
  /* Hover/active items already get an ORANGE BACKGROUND pill + WHITE text
     from the base nav rules — do NOT recolor their text (orange-on-orange
     rendered as a solid orange block with invisible text). Keep white. */
  .site-header.scrolled .seq-menu > li > a:hover,
  .site-header.scrolled .seq-menu > li.current-menu-item > a,
  .site-header.scrolled .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
}

/* STICKYDARK: on mobile the burger bars are dark ink — invisible on the
   dark scrolled bar — so turn them white when scrolled and closed. When the
   drawer is OPEN the X sits over the white drawer panel, so keep it dark. */
@media (max-width: 1279px) {
  .site-header.scrolled .seq-burger span { background: #FFFFFF; }
  .site-header.scrolled.seq-nav-open .seq-burger span { background: var(--seq-ink); }
}

/* Nav link underline sweep */
.elementor-nav-menu a {
  position: relative;
}
.elementor-nav-menu a::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--seq-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s;
}
.elementor-nav-menu a:hover::before,
.elementor-nav-menu .current-menu-item > a::before {
  transform: scaleX(1);
}

/* ============================================================
   BUTTONS — gradient + sheen sweep
   ============================================================ */
.elementor-button,
.seq-btn,
.wp-block-button__link {
  position: relative;
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  padding: 13px 26px;
  border-radius: var(--seq-radius);
  border: 0;
  cursor: pointer;
  color: #fff !important;
  background-image: linear-gradient(135deg, var(--seq-orange) 0%, #FF5100 100%);
  box-shadow: 0 6px 18px rgba(255,81,0,.22);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--seq-transition), box-shadow var(--seq-transition), filter var(--seq-transition);
  text-decoration: none;
}

.elementor-button::before,
.seq-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.38) 50%, transparent 100%);
  transform: translateX(-130%);
  transition: transform .6s ease;
}

.elementor-button:hover,
.seq-btn:hover,
.wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(255,107,53,.40);
  filter: saturate(1.08);
  color: #fff !important;
}

.elementor-button:hover::before,
.seq-btn:hover::before {
  transform: translateX(130%);
}

.elementor-button:active,
.seq-btn:active {
  transform: translateY(-1px);
}

/* Ghost variant */
.elementor-button.seq-ghost {
  background-image: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: none;
}
.elementor-button.seq-ghost:hover {
  background: rgba(255,255,255,.12);
  box-shadow: none;
}

/* Dark variant */
.elementor-button.seq-dark {
  background-image: linear-gradient(135deg, var(--seq-ink), var(--seq-ink-2));
  box-shadow: 0 6px 18px rgba(61,61,63,.22);
}
.elementor-button.seq-dark:hover {
  box-shadow: 0 14px 30px rgba(61,61,63,.30);
}

/* ============================================================
   EYEBROW LABEL
   ============================================================ */
.seq-eyebrow {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--seq-orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.seq-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--seq-orange);
  flex-shrink: 0;
}

/* ============================================================
   CARDS — feature / service / project
   ============================================================ */

/* Feature cards (3-col) */
.seq-fcard {
  background: var(--seq-white);
  border: 1px solid var(--seq-line);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--seq-transition), box-shadow var(--seq-transition), border-color var(--seq-transition);
}
.seq-fcard:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 56px rgba(61,61,63,.18);
  border-color: var(--seq-orange);
}
.seq-fcard .seq-fcard-img {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.seq-fcard .seq-fcard-img img,
.seq-fcard .seq-fcard-img .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.seq-fcard:hover .seq-fcard-img img {
  transform: scale(1.06);
}
.seq-fcard .seq-fcard-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.seq-fcard h3 { font-size: 21px; margin-bottom: 10px; }
.seq-fcard p  { color: var(--seq-muted); font-size: 15.5px; flex: 1; margin-bottom: 16px; }

/* Service cards (6-grid) */
.seq-svc {
  background: var(--seq-white);
  border: 1px solid var(--seq-line);
  border-radius: var(--seq-radius);
  padding: 24px 18px;
  overflow: hidden;
  transition: transform var(--seq-transition), box-shadow var(--seq-transition), border-color var(--seq-transition);
}
.seq-svc:hover {
  transform: translateY(-6px);
  border-color: var(--seq-orange);
  box-shadow: 0 18px 36px rgba(61,61,63,.12);
}
.seq-svc .seq-svc-thumb {
  height: 150px;
  object-fit: cover;
  width: 100%;
  border-radius: 3px;
  margin-bottom: 16px;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.seq-svc:hover .seq-svc-thumb { transform: scale(1.05); }
.seq-svc h4 { font-size: 16px; margin-bottom: 8px; }
.seq-svc p  { font-size: 14.5px; color: var(--seq-muted); margin-bottom: 12px; line-height: 1.55; }

/* More link */
.seq-more {
  font-weight: 600;
  color: var(--seq-orange);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: gap .2s;
}
.seq-more::after { content: "→"; transition: transform .2s; }
.seq-more:hover  { color: var(--seq-orange); }
.seq-more:hover::after { transform: translateX(4px); }

/* Project tiles — LEGACY (old pre-Elementor homepage markup, now unused).
   Renamed from .seq-proj to .seq-projtile so it no longer collides with the
   Elementor project columns that are now tagged .seq-proj for hover effects. */
.seq-projtile {
  position: relative;
  border-radius: var(--seq-radius);
  overflow: hidden;
  aspect-ratio: 3/2;
  background: var(--seq-ink);
  transition: box-shadow var(--seq-transition), transform var(--seq-transition);
}
.seq-projtile:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(33,33,33,.30);
}
.seq-projtile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.seq-projtile:hover img { transform: scale(1.08); }
.seq-projtile .seq-proj-cap {
  position: absolute;
  inset: auto 0 0;
  padding: 18px 16px 16px;
  background: linear-gradient(180deg, transparent, rgba(33,33,33,.88));
  color: #fff;
}
.seq-projtile .seq-proj-cap h4 { font-size: 18px; margin-bottom: 6px; color: #fff; }

/* Category chips */
.seq-chip {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 15px;
  border: 1px solid var(--seq-line);
  border-radius: 40px;
  background: var(--seq-white);
  color: var(--seq-muted);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  display: inline-block;
  margin: 4px;
}
.seq-chip:hover,
.seq-chip.active {
  background: var(--seq-ink);
  color: #fff;
  border-color: var(--seq-ink);
}

/* ============================================================
   SECTION SHELLS
   ============================================================ */
.seq-section { padding: clamp(54px, 8vw, 90px) 0; }
.seq-section-alt { background: var(--seq-paper-2); }
.seq-section-dark {
  background: var(--seq-ink);
  color: #fff;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 26px 26px;
}
.seq-section-dark h2,
.seq-section-dark h3 { color: #fff; }
.seq-section-dark p   { color: #D5D5D5; }

/* Section head */
.seq-section-head { margin-bottom: clamp(26px, 4vw, 38px); }
.seq-section-head h2 { font-size: clamp(26px, 5.6vw, 38px); }
.seq-section-head p  { color: var(--seq-muted); margin-top: 10px; max-width: 54ch; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.seq-hero {
  position: relative;
  min-height: 78vh;
  background: var(--seq-ink);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.seq-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33,33,33,.25) 0%, rgba(33,33,33,.22) 40%, rgba(33,33,33,.82) 100%);
  pointer-events: none;
}
.seq-hero .seq-hero-inner {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 0 0 clamp(66px, 9vw, 94px);
  width: 100%;
}
.seq-hero :is(h1,h2) {
  font-size: clamp(28px, 7vw, 52px);
  color: #fff;
  max-width: 13ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.seq-hero p {
  font-size: clamp(15px, 3.6vw, 19px);
  margin: 14px 0 24px;
  max-width: 34ch;
  color: #eef1f5;
}

/* ============================================================
   PROCESS STEPS (scroll-reveal)
   ============================================================ */
.seq-psteps { position: relative; display: flex; flex-direction: column; gap: 26px; }
.seq-psteps::before {
  content: "";
  position: absolute;
  left: 23px; top: 10px; bottom: 10px;
  width: 2px;
  background: rgba(255,255,255,.14);
}
.seq-pstep {
  position: relative;
  padding-left: 66px;
}
.seq-pstep .seq-num {
  position: absolute;
  left: 0; top: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--seq-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  z-index: 2;
}
.seq-pstep h3 { font-size: 20px; margin-bottom: 6px; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.seq-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
}
.seq-reveal.in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   UTILITY BAR
   ============================================================ */
.seq-utility {
  background: var(--seq-ink-2, #212121);
  color: #D5D5D5;
  font-size: 13px;
  padding: 0 clamp(20px, 5vw, 44px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  flex-wrap: wrap;
  gap: 8px;
}
.seq-utility a {
  color: #D5D5D5;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
}
.seq-utility a:hover { color: #fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
footer.site-footer {
  background: var(--seq-ink-2, #212121);
  color: #B5B5B5;
}
/* Full-bleed navy bar: override hello-elementor's 1140px centered
   container (.site-footer:not(.dynamic-footer){max-width:1140px;
   margin-inline:auto}). Inner .seq-foot4 / .seq-foot-bottom2-in keep
   their own max-width:1180 + margin:auto + horizontal padding. */
footer.site-footer:not(.dynamic-footer),
.site-footer:not(.dynamic-footer) {
  width: 100%;
  max-width: none;
  margin: 0;
}
.site-footer a { color: #B5B5B5; }
.site-footer a:hover { color: var(--seq-orange-2); }
.site-footer h4 {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.seq-foot-brand {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  color: #fff;
  font-weight: 700;
}
.seq-foot-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 18px 0;
  font-size: 13px;
  color: #9A9A9A;
}

/* ============================================================
   CONTACT CTA BAND
   ============================================================ */
.seq-contact-cta {
  background: var(--seq-paper-2);
  text-align: center;
  padding: clamp(54px, 8vw, 80px) 0;
}
.seq-phone {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 700;
  color: var(--seq-ink);
  display: inline-block;
  margin: 6px 0 10px;
  text-decoration: none;
}
.seq-phone:hover { color: var(--seq-orange); }

/* ============================================================
   WHY SECTION — stats
   ============================================================ */
.seq-stat .n {
  font-family: 'Open Sans', sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--seq-ink);
  line-height: 1;
}
.seq-stat .l {
  font-size: 13px;
  color: var(--seq-muted);
  margin-top: 4px;
}

/* Why panel */
.seq-why-panel {
  background: var(--seq-ink);
  color: #fff;
  border-radius: 4px;
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.seq-why-panel::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border: 1px solid rgba(255,81,0,.4);
  border-radius: 50%;
}
.seq-why-panel h3 { font-size: 22px; margin-bottom: 10px; color: #fff; }
.seq-why-panel p  { color: #D5D5D5; }

/* ============================================================
   ELEMENTOR OVERRIDES
   ============================================================ */

/* Remove Elementor default section padding when we use our own */
.elementor-section.seq-no-pad > .elementor-container { padding: 0; }

/* Constrain max-width */
.elementor-section > .elementor-container { max-width: 1180px; }

/* Smooth anchor scroll */
html { scroll-behavior: smooth; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .seq-utility { font-size: 12px; }
  .seq-hero { min-height: 60vh; }
  .seq-fcard .seq-fcard-body { padding: 18px; }
  .seq-svc { padding: 18px 14px; }
}

@media (min-width: 1280px) {
  .elementor-section > .elementor-container { max-width: 1220px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .seq-reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   HEADER / FOOTER LAYOUT — child theme header.php & footer.php
   (colours + .site-header / .site-footer / .elementor-nav-menu
    base styles are defined above; this adds the layout)
   ============================================================ */

/* ---- Header bar ---- */
.seq-header-inner {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 14px clamp(18px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-header.scrolled .seq-header-inner { padding-top: 10px; padding-bottom: 10px; }
.seq-logo-wrap { flex: 0 0 auto; margin-right: auto; }

/* Text logo: orange "seq" + navy "BUILDING DESIGN" */
.seq-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  line-height: 1;
}
.seq-logo-mark {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -.02em;
  color: var(--seq-orange);
}
.seq-logo-word {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--seq-ink);
}
/* STEP 3 — render WP custom_logo at its natural 267x91 (matches Alan's live site).
   Was clamped to max-height 58px which is why the rebuild's logo looked too small. */
.site-header .custom-logo-link img,
.site-header img.custom-logo {
  width: 267px;
  max-width: 100%;
  height: auto;
  max-height: none;
  display: block;
  transition: width .25s ease;
}
.site-header.scrolled .custom-logo-link img,
.site-header.scrolled img.custom-logo { width: 220px; }

/* Primary menu */
.seq-nav .seq-menu,
.seq-nav .elementor-nav-menu {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.seq-menu li { position: relative; }
.seq-menu a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--seq-ink);
  text-decoration: none;
  padding: 6px 0;
  display: block;
  white-space: nowrap;
}
.seq-menu .current-menu-item > a { color: var(--seq-orange); }

/* Dropdown sub-menus (Part A) */
.seq-menu li { position: relative; }
.seq-menu .menu-item-has-children > a::after { content: "\25BE"; font-size: 10px; margin-left: 6px; vertical-align: 1px; display: inline-block; }
.seq-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 258px;
  /* SUBMENUGLASS (Alan) — frosted-glass dropdown: semi-transparent white +
     strong backdrop blur so the dark item text stays readable. */
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 16px 40px rgba(33,33,33,.14);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 8px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 999;
  text-align: left;
}
.seq-menu .sub-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.seq-menu li:hover > .sub-menu,
.seq-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* Scoped under .seq-nav so text-transform:none beats the uppercase nav rule */
.seq-nav .seq-menu .sub-menu a {
  display: block;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--seq-ink);
  white-space: normal;
  line-height: 1.35;
}
.seq-nav .seq-menu .sub-menu a:hover { background: var(--seq-paper); color: var(--seq-orange); }
.seq-menu .sub-menu a::before { display: none; }
.seq-menu .sub-menu .menu-item-has-children > a::after { content: "\203A"; float: right; }
.seq-menu .sub-menu .sub-menu { top: 0; left: 100%; }

/* Header actions + CTA */
.seq-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.seq-header-cta { padding: 10px 20px; font-size: 13px; }

/* Hamburger */
.seq-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  flex-direction: column;
  justify-content: space-between;
}
.seq-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--seq-ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

/* ---- Footer ---- */
.seq-footer-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 78px) clamp(18px, 4vw, 40px) clamp(30px, 4vw, 46px);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr;
  gap: clamp(28px, 5vw, 64px);
}
.seq-foot-brand-mark { color: var(--seq-orange); }
.seq-foot-brand-word { color: #fff; }
.seq-foot-tag {
  font-family: 'Open Sans', sans-serif;
  font-style: italic;
  color: var(--seq-orange-2);
  margin: 10px 0 12px;
}
.seq-foot-blurb { color: #B5B5B5; font-size: 14.5px; max-width: 44ch; }
.seq-foot-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.seq-foot-menu a { font-size: 14.5px; text-decoration: none; }
.seq-foot-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
}
.seq-foot-contact-list a[href^="tel"] {
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
  color: #fff;
  text-decoration: none;
}
.seq-foot-contact-list a[href^="tel"]:hover { color: var(--seq-orange-2); }
.seq-foot-cta { color: var(--seq-orange-2); font-weight: 600; text-decoration: none; }
.seq-foot-bottom-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.seq-foot-bottom-inner p { margin: 0; }

/* ---- Header/footer responsive ---- */
/* NAVBREAKPOINT: 1279px (was 1024px). The desktop nav's intrinsic width
   (logo 267 + gap 28 + menu 915) only fits viewports >= 1280px — below
   that "Contact Us" clips off-screen. Must match the matchMedia gate in
   js/seq-main.js (mobile accordion). */
@media (max-width: 1279px) {
  .seq-burger { display: flex; }
  .seq-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(86vw, 360px);
    background: #fff;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.34,.1,.64,1);
    padding: 92px 28px 28px;
    box-shadow: -20px 0 50px rgba(33,33,33,.22);
    overflow-y: auto;
    z-index: 120;
  }
  .site-header.seq-nav-open .seq-nav { transform: none; }
  .site-header.seq-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(33,33,33,.5);
    z-index: 110;
  }
  .site-header.seq-nav-open .seq-burger { position: relative; z-index: 130; }
  .seq-nav .seq-menu { flex-direction: column; align-items: flex-start; gap: 4px; }
  .seq-menu a { font-size: 17px; padding: 11px 0; }
  .seq-menu a::before { display: none; }
  /* Mobile accordion (Part B): collapsed until parent <li> gets .open */
  .seq-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 0 16px;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .seq-menu li.open > .sub-menu { max-height: 800px; }
  .seq-menu .menu-item-has-children > a::after { float: right; }
  /* Burger -> X */
  .seq-nav-open .seq-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .seq-nav-open .seq-burger span:nth-child(2) { opacity: 0; }
  .seq-nav-open .seq-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 880px) {
  .seq-footer-inner { grid-template-columns: 1fr 1fr; }
  .seq-foot-about { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .seq-header-cta { display: none; }
}
@media (max-width: 560px) {
  .seq-footer-inner { grid-template-columns: 1fr; }
  .seq-foot-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   TYPOGRAPHY AUTHORITY — child theme is the single source of
   truth for fonts. Force Elementor heading/text/button widgets
   to Open Sans (body-scoped selectors out-specify Elementor's
   own two-class kit defaults without needing !important).
   ============================================================ */
body,
body.seq-site,
body.elementor-page,
body .elementor-widget-container,
body .elementor-heading-title,
body .elementor-widget-heading .elementor-heading-title,
body .elementor-widget-heading h1,
body .elementor-widget-heading h2,
body .elementor-widget-heading h3,
body .elementor-widget-heading h4,
body .elementor-widget-heading h5,
body .elementor-widget-heading h6,
body .elementor-widget-text-editor,
body .elementor-widget-text-editor p,
body .elementor-button,
body .elementor-widget-button .elementor-button {
  font-family: 'Open Sans', sans-serif;
}

/* ============================================================
   HERO SLIDER — theme-rendered, matches approved mockup
   4 cross-fading slides w/ per-slide content + dots + autoplay.
   ============================================================ */
.seq-hero-slider {
  position: relative;
  /* Width-proportional like the original's LayerSlider (650px at >=980px
     width, 66.33vw = 650/980 below) instead of viewport-height-driven —
     72vh rendered ~553px on 1366x768 laptops vs the original's fixed 650.
     Mobile (<=767) keeps its own taller rule; the rebuild hero holds real
     text + buttons that don't fit the original's 259px mobile strip. */
  height: min(650px, 66.33vw);
  background: var(--seq-ink);
  overflow: hidden;
}
.seq-hero-slides { height: 100%; }
.seq-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
.seq-hero-slide.active { opacity: 1; }
.seq-hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  /* HEROBRIGHTEN: heavy full-slide gradient removed — client wants the
     photos bright like the original, which has NO overlay (it darkens
     only behind the text lines). What remains is a very subtle radial
     vignette behind the text zone only (feathers to fully transparent
     well before the slide edges), the original's own strategy. Slide 4
     (pale blueprint photo) is unreadable without it. */
  background: radial-gradient(ellipse 62% 48% at 50% 46%,
    rgba(33, 33, 33, 0.30) 0%,
    rgba(33, 33, 33, 0.16) 55%,
    rgba(33, 33, 33, 0) 78%);
}
.seq-hero-inner {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 0 clamp(20px, 5vw, 44px);
  max-width: 1220px;
  margin: 0 auto;
  width: 100%;
}
.seq-hero-inner :is(h1,h2) {
  font-size: clamp(28px, 7vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  max-width: 640px;
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.seq-hero-inner p {
  font-size: clamp(15px, 3.6vw, 19px);
  margin: 14px 0 24px;
  max-width: 34ch;
  color: #eef1f5;
}
.seq-hero-btn { display: inline-block; }

/* Per-slide staggered text entrance (mockup: heroUp) */
@keyframes seqHeroUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.seq-hero-slide.active .seq-hero-inner :is(h1,h2)       { animation: seqHeroUp .8s .05s both; }
.seq-hero-slide.active .seq-hero-inner p        { animation: seqHeroUp .85s .18s both; }
.seq-hero-slide.active .seq-hero-inner .seq-hero-btn { animation: seqHeroUp .9s .30s both; }

/* Dots */
.seq-hero-dots {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 9px;
}
.seq-hero-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  padding: 0;
  transition: .2s;
}
.seq-hero-dots button.active {
  background: var(--seq-orange-2);
  width: 26px;
  border-radius: 6px;
}

@media (max-width: 767px) {
  .seq-hero-slider { height: 64vh; min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .seq-hero-slide.active .seq-hero-inner :is(h1,h2),
  .seq-hero-slide.active .seq-hero-inner p,
  .seq-hero-slide.active .seq-hero-inner .seq-hero-btn { animation: none !important; }
}

/* ============================================================
   MOCKUP REFINEMENT — header typography mockup (Parts A/B/C)
   ============================================================ */

/* ---- PART A: make Elementor heading widgets compute to 800.
   Elementor sets per-widget weight 700 via
   `.elementor-1188 .elementor-element.elementor-element-{id} .elementor-heading-title`
   = specificity (0,4,0). These selectors carry TWO classes on the widget
   wrapper (.elementor-element.elementor-widget-heading) plus body.seq-site,
   giving (0,4,1) — strictly higher, so they win without !important. ---- */
body.seq-site .elementor-element.elementor-widget-heading .elementor-heading-title,
body.seq-site .elementor-widget.elementor-widget-heading .elementor-heading-title {
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* ============================================================
   PART B — TOP UTILITY BAR (orange, scrolls away above header)
   ============================================================ */
.seq-topbar {
  background: var(--seq-orange);
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}
.seq-topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  min-height: 38px;
  padding: 6px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  flex-wrap: wrap;
}
.seq-topbar a {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  opacity: .96;
}
.seq-topbar a:hover { opacity: 1; text-decoration: underline; }
.seq-topbar svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.seq-topbar .seq-topbar-spacer { margin-left: auto; }
.seq-topbar .seq-topbar-social { display: flex; gap: 14px; }
.seq-topbar .seq-topbar-social a { opacity: .92; }
.seq-topbar .seq-topbar-social a:hover { opacity: 1; text-decoration: none; }
@media (max-width: 600px) {
  .seq-topbar .seq-topbar-about { display: none; } /* keep bar tidy on phones */
}

/* ---- PART B: nav restyle (uppercase, weight 600, navy → orange) ---- */
.seq-nav .seq-menu a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--seq-ink);
}
.seq-nav .seq-menu a:hover { color: var(--seq-orange); }
/* Disable the old sliding underline; use a static 2px bar on the active item */
.seq-nav .seq-menu a::before { display: none; }
.seq-nav .seq-menu .current-menu-item > a,
.seq-nav .seq-menu .current-menu-ancestor > a,
.seq-nav .seq-menu .current_page_item > a { color: var(--seq-orange); }
.seq-nav .seq-menu .current-menu-item > a::after,
.seq-nav .seq-menu .current-menu-ancestor > a::after,
.seq-nav .seq-menu .current_page_item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--seq-orange);
}
/* CTA keeps orange gradient button; tighten to mockup proportions */
.seq-header-cta { text-transform: none; letter-spacing: .04em; }
.seq-nav .seq-menu a.seq-header-cta,
.seq-header-cta { text-transform: none; }

/* ============================================================
   PART C — FOOTER (three columns + bottom quick-links)
   ============================================================ */
.seq-foot4 {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 60px) clamp(20px, 4vw, 32px) 28px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 40px);
}
.seq-foot4 h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.seq-foot4 .seq-foot-brand {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.seq-foot4 .seq-foot-brand b { color: var(--seq-orange-2); font-weight: 800; }
.seq-foot4 .seq-foot-tag {
  font-style: italic;
  color: var(--seq-orange-2);
  margin: 8px 0 12px;
  font-size: 14px;
}
.seq-foot4 .seq-foot-blurb { font-size: 14px; line-height: 1.7; color: #B5B5B5; }
.seq-foot4 ul { list-style: none; margin: 0; padding: 0; }
.seq-foot4 ul li { margin-bottom: 10px; }
.seq-foot4 ul a { color: #D5D5D5; text-decoration: none; font-size: 14px; }
.seq-foot4 ul a:hover { color: var(--seq-orange-2); }
.seq-foot4 .seq-foot-contact div {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.seq-foot4 .seq-foot-contact svg {
  width: 16px; height: 16px;
  /* GITBOX (Alan): the original's Get In Touch box uses neutral
     text-toned icons (grey #707070 on white), never orange — mirror
     that treatment on the dark footer with the column's text grey. */
  fill: #B5B5B5;
  margin-top: 3px;
  flex-shrink: 0;
}
.seq-foot4 .seq-foot-contact a { color: #D5D5D5; text-decoration: none; }
.seq-foot4 .seq-foot-contact a:hover { color: var(--seq-orange-2); }
.seq-foot-social { display: flex; gap: 12px; margin-top: 16px; }
.seq-foot-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  text-decoration: none;
}
.seq-foot-social a:hover { background: var(--seq-orange); }
.seq-foot-social svg { width: 15px; height: 15px; fill: currentColor; }

/* Footer GALLERY column — 6 project thumbs, 3 per row, matching the
   original's footer widget: 69x69 tiles (border included), 7px gaps,
   3px #373737 frame. */
.seq-foot-gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 69px);
  gap: 7px;
}
.seq-foot-gal-grid a { display: block; line-height: 0; }
.seq-foot-gal-grid img {
  width: 69px;
  height: 69px;
  box-sizing: border-box;
  object-fit: cover;
  display: block;
  border: 3px solid #373737;
}
.seq-foot-gal-grid a:hover img { border-color: var(--seq-orange-2); }

.seq-foot-bottom2 { border-top: 1px solid rgba(255,255,255,.1); }
.seq-foot-bottom2 .seq-foot-bottom2-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px clamp(20px, 4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: #9A9A9A;
}
.seq-foot-bottom2-in a { color: #9A9A9A; text-decoration: none; }
.seq-foot-bottom2-in a:hover { color: #D5D5D5; }
.seq-foot-quicklinks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seq-foot-quicklinks .sep { opacity: .5; }

@media (max-width: 900px) {
  /* 4 columns -> clean 2x2 (the Fix-3 full-width Get In Touch span was
     only needed while the footer had 3 columns). */
  .seq-foot4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .seq-foot4 { grid-template-columns: 1fr; }
  .seq-foot-bottom2 .seq-foot-bottom2-in { flex-direction: column; align-items: flex-start; }
}

/* Hover micro-interactions — from approved mockup */
.seq-card{overflow:hidden;transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.seq-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(61,61,63,.16)}
/* Elementor draws the card border on the inner > .elementor-element-populated
   (selector specificity 0,4,0). Retarget the hover border there; !important is
   required because this selector (0,3,0) is lower than Elementor's (0,4,0). */
.seq-card:hover > .elementor-element-populated{border-color:#FF5100 !important}
.seq-card img{transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.seq-card:hover img{transform:scale(1.06)}
.seq-proj{border-radius:10px;overflow:hidden;transition:transform .3s ease, box-shadow .3s ease}
.seq-proj:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(33,33,33,.22)}
.seq-proj img{transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.seq-proj:hover img{transform:scale(1.08)}
body .elementor-button{transition:transform .25s ease, box-shadow .25s ease, filter .25s ease}
body .elementor-button:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(255,81,0,.34);filter:saturate(1.06)}
@media (prefers-reduced-motion: reduce){
  .seq-card,.seq-proj,.seq-card img,.seq-proj img,body .elementor-button{transition:none !important}
  .seq-card:hover,.seq-proj:hover,.seq-card:hover img,.seq-proj:hover img,body .elementor-button:hover{transform:none !important}
}

/* Part C — smooth hover: the lift transition must live ON THE COLUMN and
   include `transform`. Elementor sets its own column transition
   (.elementor-1188 .elementor-element.elementor-element-{id} = 0,3,0) that
   omits transform, so the lift snapped. These body.seq-site selectors are
   (0,3,1) and win without !important; same idea for the button widget. */
body.seq-site .elementor-element.seq-card,
body.seq-site .elementor-element.seq-proj {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.seq-site .elementor-widget .elementor-button {
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
@media (prefers-reduced-motion: reduce){
  body.seq-site .elementor-element.seq-card,
  body.seq-site .elementor-element.seq-proj,
  body.seq-site .elementor-widget .elementor-button { transition: none !important; }
}

/* ============================================================
   CONTACT PAGE (post 271) — intro, CF7 form, contact card, map
   ============================================================ */
.seq-intro-sub { color: var(--seq-muted); font-size: clamp(16px,2.4vw,19px); margin-top: 10px; max-width: 56ch; }

/* Quote-instructions list */
.seq-quote-list { margin: 0 0 22px; padding-left: 18px; color: var(--seq-muted); font-size: 15px; line-height: 1.6; }
.seq-quote-list li { margin-bottom: 6px; }

/* CF7 form — inherit site font + on-brand controls */
.wpcf7 { font-family: 'Open Sans', sans-serif; }
.wpcf7 p { margin: 0 0 16px; }
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=url],
.wpcf7 input[type=number],
.wpcf7 input[type=date],
.wpcf7 input[type=file],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  border: 1px solid var(--seq-line);
  border-radius: var(--seq-radius);
  background: #fff;
  color: var(--seq-ink);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: none;
  border-color: var(--seq-orange);
  box-shadow: 0 0 0 3px rgba(255,81,0,.15);
}
.wpcf7 textarea { min-height: 140px; resize: vertical; }
/* narrow inline fields */
.wpcf7 input.wpcf7-captchar,
.wpcf7 input.wpcf7-quiz { width: 140px; display: inline-block; }
.wpcf7-not-valid-tip { color: var(--seq-orange); font-size: 13px; }
.wpcf7 .wpcf7-response-output { border-radius: var(--seq-radius); margin: 14px 0 0; padding: 12px 16px; font-size: 14px; }
/* submit styled like .elementor-button orange */
.wpcf7 input[type=submit] {
  display: inline-block;
  width: auto;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  padding: 13px 30px;
  border: 0;
  border-radius: var(--seq-radius);
  color: #fff;
  background-image: linear-gradient(135deg, var(--seq-orange) 0%, #FF5100 100%);
  box-shadow: 0 6px 18px rgba(255,81,0,.22);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.wpcf7 input[type=submit]:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(255,81,0,.34);
  filter: saturate(1.06);
}

/* Contact info card (seq-card look) */
.seq-contact-card {
  background: #fff;
  border: 1px solid var(--seq-line);
  border-radius: 8px;
  padding: 26px 24px;
}
.seq-contact-card h3 { font-size: 18px; margin-bottom: 14px; color: var(--seq-ink); }
.seq-contact-card .seq-cc-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 0;
  border-top: 1px solid var(--seq-line);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--seq-ink);
}
.seq-contact-card .seq-cc-row:first-of-type { border-top: 0; padding-top: 0; }
/* GITBOX2 (Alan): grey icons on the white card — the original's Get In
   Touch treatment on a white background (icons #707070, never orange). */
.seq-contact-card svg { width: 18px; height: 18px; fill: #707070; flex-shrink: 0; margin-top: 3px; }
.seq-contact-card a { color: var(--seq-ink); text-decoration: none; }
.seq-contact-card a:hover { color: var(--seq-orange); }
.seq-contact-card .seq-cc-label { font-weight: 700; display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--seq-muted); }
.seq-contact-card .seq-cc-phone { font-size: 20px; font-weight: 700; color: var(--seq-ink); }
.seq-contact-card .seq-cc-hours span { display: block; }

/* Full-bleed map row (override the theme's 1180 container cap for this section) */
/* Full-bleed map row — zero out Elementor's container/column/widget padding
   so the iframe spans edge-to-edge (same as the footer goes full-bleed). */
.seq-map-section,
.seq-map-section > .elementor-container { max-width: 100% !important; width: 100%; padding: 0 !important; margin: 0 !important; }
.seq-map-section .elementor-column,
.seq-map-section .elementor-column-wrap,
.seq-map-section .elementor-widget-wrap,
.seq-map-section .elementor-element-populated,
.seq-map-section .elementor-widget,
.seq-map-section .elementor-widget-html { padding: 0 !important; margin: 0 !important; }
.seq-map-embed { line-height: 0; width: 100%; }
.seq-map-embed iframe { width: 100%; height: 360px; border: 0; display: block; }

/* ============================================================
   SERVICE PAGE (recovered Pego copy, homepage-matched)
   ============================================================ */
.seq-article { max-width: 800px; margin: 0 auto; }
.seq-article > *:first-child { margin-top: 0; }
.seq-article p { margin: 0 0 16px; color: var(--seq-ink); font-size: 16.5px; }
.seq-article h2 { font-size: clamp(23px,3vw,31px); font-weight: 800; letter-spacing: -0.015em; margin: 38px 0 14px; }
.seq-article h3 { font-size: 21px; font-weight: 800; margin: 26px 0 10px; }
.seq-article img { border-radius: 8px; margin: 8px 0 22px; }
.seq-article .seq-banner { width: 100%; height: auto; }

/* recovered service list */
.seq-twocol { display: grid; grid-template-columns: 1fr 1.8fr; gap: 30px; align-items: start; margin: 22px 0 8px; }
.seq-twocol img { margin: 0; width: 100%; }
.seq-bullets { list-style: none; padding: 0; margin: 0; }
.seq-bullets li {
  position: relative; padding: 11px 0 11px 30px;
  border-bottom: 1px solid var(--seq-line); font-size: 15.5px; color: var(--seq-ink);
}
.seq-bullets li:last-child { border-bottom: 0; }
.seq-bullets li::before {
  content: ""; position: absolute; left: 2px; top: 15px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--seq-orange);
  -webkit-mask: no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E");
  mask: no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E");
}

/* recovered service blocks → seq-card style grid */
/* Flexbox (not grid) so a short trailing row centers instead of stranding an
   empty slot on the right. 3 per row on desktop; wraps 3->2->1 via min-width.
   gap 18px, basis calc(33.333% - 12px) => 3 cards exactly fill the row. */
.seq-svccards { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 26px 0 6px; }
.seq-svccard {
  flex: 0 1 calc(33.333% - 12px); min-width: 230px;
  border: 1px solid var(--seq-line); border-radius: 8px; padding: 22px; background: #fff;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.seq-svccard:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(61,61,63,.12); border-color: var(--seq-orange-2); }
.seq-svccard h4 { font-size: 17px; font-weight: 800; margin: 0 0 8px; color: var(--seq-ink); }
.seq-svccard p { font-size: 14.5px; color: var(--seq-muted); margin: 0; line-height: 1.55; }
/* Whole service card clickable (hub page). Anchor reuses .seq-svccard box;
   strip link underline/colour and tint the title orange on hover for affordance. */
a.seq-svccard { text-decoration: none; display: block; }
a.seq-svccard:hover h4 { color: var(--seq-orange-2); }
a.seq-svccard h4::after { content: " \2192"; color: var(--seq-orange-2); font-weight: 700; opacity: 0; transition: opacity .25s ease; }
a.seq-svccard:hover h4::after { opacity: 1; }

/* FAQ accordion (FAQs page) — native <details>/<summary>, no JS, all closed by
   default. Hide the default disclosure marker; use a CSS chevron that rotates on
   open; orange accent on hover/open; readable answer body. */
.seq-faq { max-width: 800px; margin: 6px auto 0; }
.seq-faq details { border-bottom: 1px solid var(--seq-line); }
.seq-faq details:first-of-type { border-top: 1px solid var(--seq-line); }
.seq-faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 46px 20px 0; font-weight: 700; color: var(--seq-ink);
  font-size: 17px; line-height: 1.45; transition: color .2s ease;
}
.seq-faq summary::-webkit-details-marker { display: none; }
.seq-faq summary::after {
  content: ""; position: absolute; right: 8px; top: 22px;
  width: 9px; height: 9px; border-right: 2px solid var(--seq-orange);
  border-bottom: 2px solid var(--seq-orange); transform: rotate(45deg);
  transition: transform .25s ease;
}
.seq-faq details[open] summary::after { transform: rotate(-135deg); top: 26px; }
.seq-faq summary:hover { color: var(--seq-orange-2); }
.seq-faq details[open] summary { color: var(--seq-orange-2); }
.seq-faq .seq-faq-a { padding: 0 46px 22px 0; }
.seq-faq .seq-faq-a p { margin: 0 0 14px; color: var(--seq-ink); font-size: 16px; line-height: 1.7; }
.seq-faq .seq-faq-a p:last-child { margin-bottom: 0; }
.seq-faq .seq-faq-a a { color: var(--seq-orange); text-decoration: underline; }
.seq-faq .seq-faq-a ul, .seq-faq .seq-faq-a ol { margin: 4px 0 14px; padding-left: 22px; }
.seq-faq .seq-faq-a li { margin: 0 0 8px; color: var(--seq-ink); font-size: 15.5px; line-height: 1.6; }

/* closing CTA band (orange, like homepage estimate band) */
/* GLOBALCOLOR (Alan audit): band restyled from solid orange/white to the
   original's construction — light grey band, ORANGE heading 28px/600,
   dark body. Button flips to solid orange so it reads on the grey. */
.seq-cta-band { background: rgb(240, 240, 240); color: #3D3D3F; text-align: center; }
.seq-cta-inner { max-width: 760px; margin: 0 auto; padding: clamp(46px,7vw,70px) 24px; }
.seq-cta-band h2 { color: #FF5100; font-size: 28px; font-weight: 600; margin-bottom: 12px; }
.seq-cta-band p { color: #606060; max-width: 60ch; margin: 0 auto 24px; font-size: 15px; }
.seq-cta-band .seq-cta-btn {
  display: inline-block; background: var(--seq-orange); color: #fff !important;
  font-weight: 700; font-size: 14px; letter-spacing: .02em; padding: 14px 32px;
  border-radius: var(--seq-radius); text-decoration: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.14); transition: transform .25s ease, box-shadow .25s ease;
}
.seq-cta-band .seq-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.2); color: #fff !important; }
@media (max-width: 680px) { .seq-twocol { grid-template-columns: 1fr; } }

/* Inner-page Elementor headings → navy. Elementor's default
   (.elementor-widget-heading .elementor-heading-title = 0,2,0) falls back
   to var(--e-global-color-primary), which is light blue in this kit. This
   (0,3,1) wins and applies to every page EXCEPT the homepage, whose heading
   widgets carry explicit per-widget white/orange colors that must be kept. */
body:not(.home) .elementor-widget-heading .elementor-heading-title { color: var(--seq-ink); }

/* Even two-column split (text | services list) for engineering/subdivision/
   multi-res pages whose Pego layout is one_half + one_half. Distinct from the
   image-oriented .seq-twocol (1fr/1.8fr). */
.seq-splitcols { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; margin: 16px 0 8px; }
.seq-splitcols > div > h3:first-child,
.seq-splitcols > div > *:first-child { margin-top: 0; }
.seq-splitcols .seq-bullets li { font-size: 15px; }
@media (max-width: 680px) { .seq-splitcols { grid-template-columns: 1fr; gap: 18px; } }

/* Stacked comparison blocks (DCP page tab content) — reuse .seq-svccard look,
   full-width single column so the text-heavy blocks stay readable. */
.seq-tabcards { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 18px 0 8px; }
.seq-tabcards .seq-svccard h3 { font-size: 18px; margin-bottom: 8px; }
.seq-tabcards .seq-svccard h4 { font-size: 15px; margin: 12px 0 6px; }

/* Numbered process steps (Building Design Process page) + price block (Feasibility).
   New helpers — no existing class covered a numbered vertical timeline / price. */
.seq-steps { margin: 22px 0 8px; padding: 0; list-style: none; }
.seq-step { position: relative; padding: 0 0 22px 62px; }
.seq-step::before { content:""; position:absolute; left:17px; top:8px; bottom:-4px; width:2px; background:var(--seq-line); }
.seq-step:last-child::before { display:none; }
.seq-stepnum { position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; background:var(--seq-orange); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; z-index:1; }
.seq-step h3 { margin:0 0 6px; font-size:18px; }
.seq-step p { margin:0 0 10px; }
.seq-step p:last-child { margin-bottom:0; }
.seq-milestone { margin: 0 0 22px 62px; padding: 12px 16px; background: var(--seq-paper); border-left: 3px solid var(--seq-orange); border-radius: 4px; }
.seq-milestone strong { color: var(--seq-ink); display:block; margin-bottom:2px; }
.seq-price { font-size: clamp(32px,5vw,44px); font-weight: 800; color: var(--seq-orange); line-height:1.1; margin:0; }
.seq-price small { display:block; font-size:14px; font-weight:600; color:var(--seq-muted); margin-top:6px; }

/* ============================================================
   ABOUT PAGE (post 1625) — native-widget helpers
   ============================================================ */
/* Constrain the "Who we are" body to a readable measure */
.seq-about-narrow > .elementor-container { max-width: 820px; }
/* Why-choose cards: column carries .seq-card (shared lift/hover) + .seq-aboutcard.
   Border/padding/radius drawn here so we don't rely on per-column Elementor
   border settings; height:100% keeps a row of cards equal height. */
.seq-aboutcard > .elementor-element-populated {
  border: 1px solid var(--seq-line); border-radius: 8px;
  padding: 26px 22px; background: #fff; height: 100%;
}
.seq-aboutcard .elementor-heading-title { font-size: 16px; font-weight: 800; line-height: 1.35; }
.seq-aboutcard .elementor-widget-text-editor { font-size: 14.5px; color: var(--seq-muted); line-height: 1.55; }
/* Award images + captions */
.seq-awardimg img { border-radius: 8px; }
.seq-awardcap .elementor-widget-container { font-size: 13.5px; color: var(--seq-muted); line-height: 1.5; text-align: center; margin-top: 8px; }

/* ============================================================
   GALLERIES (posts 639 / 1354) + LATEST PROJECTS hub (1591)
   ============================================================ */
/* Uniform responsive image grid: 3 / 2 / 1 cols, 4:3 cover tiles,
   caption bar under each, hover lift + zoom (matches site treatment). */
.seq-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px auto 4px; }
@media (max-width: 900px){ .seq-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .seq-gallery { grid-template-columns: 1fr; } }
.seq-gallery a.seq-gtile { display: block; border: 1px solid var(--seq-line); border-radius: 8px;
  overflow: hidden; background: #fff; text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.seq-gallery a.seq-gtile:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(61,61,63,.16); border-color: var(--seq-orange-2); }
.seq-gallery .seq-gimg { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.seq-gallery .seq-gimg img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.2,.6,.2,1); }
.seq-gallery a.seq-gtile:hover .seq-gimg img { transform: scale(1.06); }
.seq-gallery .seq-gimg::after { content: ""; position: absolute; inset: 0; background: rgba(61,61,63,0); transition: background .3s ease; }
.seq-gallery a.seq-gtile:hover .seq-gimg::after { background: rgba(61,61,63,.08); }
.seq-gallery .seq-gcap { padding: 11px 14px; font-size: 14px; font-weight: 700; color: var(--seq-ink); line-height: 1.35; }
@media (prefers-reduced-motion: reduce){
  .seq-gallery a.seq-gtile, .seq-gallery .seq-gimg img { transition: none !important; }
  .seq-gallery a.seq-gtile:hover, .seq-gallery a.seq-gtile:hover .seq-gimg img { transform: none !important; }
}
/* Hub image cards (Latest Projects → 2 galleries) */
.seq-hubcards { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin: 8px auto 4px; max-width: 920px; }
a.seq-hubcard { flex: 0 1 calc(50% - 11px); min-width: 280px; display: block; text-decoration: none;
  border: 1px solid var(--seq-line); border-radius: 10px; overflow: hidden; background: #fff;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
a.seq-hubcard:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(61,61,63,.16); border-color: var(--seq-orange-2); }
a.seq-hubcard .seq-hubimg { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
a.seq-hubcard .seq-hubimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.2,.6,.2,1); }
a.seq-hubcard:hover .seq-hubimg img { transform: scale(1.05); }
a.seq-hubcard h4 { font-size: 18px; font-weight: 800; color: var(--seq-ink); margin: 0; padding: 18px 20px 4px; }
a.seq-hubcard p { font-size: 14.5px; color: var(--seq-muted); margin: 0; padding: 0 20px 20px; line-height: 1.5; }

/* ============================================================
   BDAQ AWARDS PAGE (post 293) — image+text award blocks
   ============================================================ */
.seq-awardbody > .elementor-container { max-width: 980px; }
.seq-awardbody .elementor-inner-section { margin-bottom: 46px; }
.seq-awardbody .elementor-inner-section:last-child { margin-bottom: 0; }
.seq-awardbody .elementor-widget-image img { width: 100%; }
.seq-awardbody .elementor-widget-heading .elementor-heading-title { font-size: clamp(18px,2.4vw,22px); line-height: 1.3; }

/* ============================================================
   POLISH FIXES (2026-06)
   ============================================================ */
/* FIX 4 (updated by GLOBALCOLOR) — the estimate-band button now sits on a
   light grey band, so it takes the solid-orange treatment (the original's
   QUICK QUOTE button). d87a5b7 (old Get Started) was removed earlier. */
.elementor-element-979c5af .elementor-button {
  background-image: none !important;
  background-color: #FF5100 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
}
.elementor-element-979c5af .elementor-button:hover {
  background-color: #e64a00 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.2);
}
/* FIX 2 — footer brand logo image (replaces the text wordmark) */
.seq-foot-brand-img { display: inline-block; margin: 0 0 12px; line-height: 0; }
.seq-foot-brand-img img { max-width: 190px; height: auto; display: block; }

/* ============================================================
   PHOTO GALLERY (post 1354) — Isotope filter bar + layout
   Scoped to .page-id-1354 so the 3D gallery (639) keeps its CSS grid.
   ============================================================ */
.seq-filterbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px auto 26px; max-width: 880px; }
.seq-filter {
  font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--seq-ink); background: #fff; border: 1px solid var(--seq-line);
  padding: 9px 18px; border-radius: 30px; cursor: pointer; line-height: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.seq-filter:hover { border-color: var(--seq-orange-2); color: var(--seq-orange); }
.seq-filter.is-active { background: var(--seq-orange); border-color: var(--seq-orange); color: #fff; box-shadow: 0 6px 16px rgba(255,81,0,.26); }
.seq-filter.is-active:hover { color: #fff; }

/* Isotope needs explicit item widths + a normal-flow container (not grid),
   and must own the transform (so kill the translateY hover lift on this page). */
.page-id-1354 .seq-gallery { display: block; }
/* SMOOTH: Isotope sets the container height inline with no easing — a CSS
   height transition makes the grid grow/shrink fluidly when a filter
   changes the row count. Tiles get GPU hints so the transform/opacity
   animation doesn't repaint-jank on image-heavy rows. */
.page-id-1354 .seq-gallery { transition: height .5s cubic-bezier(.4, 0, .2, 1); }
.page-id-1354 .seq-gallery .seq-gtile {
  width: calc(33.333% - 12px);
  margin-bottom: 18px;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.page-id-1354 .seq-gallery .seq-gtile:hover { transform: none; }
@media (max-width: 900px) { .page-id-1354 .seq-gallery .seq-gtile { width: calc(50% - 9px); } }
@media (max-width: 560px) { .page-id-1354 .seq-gallery .seq-gtile { width: 100%; } }

/* ============================================================
   POLISH FIX BATCH (2026-06) — focus, heading scale, tap targets
   ============================================================ */
/* FIX 2 — visible keyboard focus rings (a11y). :focus-visible shows for
   keyboard nav only (not mouse). CF7 inputs keep their orange border+glow
   focus style and now also get this ring. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.seq-cta-btn:focus-visible, .elementor-button:focus-visible, .seq-filter:focus-visible,
a.seq-svccard:focus-visible, a.seq-hubcard:focus-visible, a.seq-gtile:focus-visible,
.seq-faq summary:focus-visible, .seq-menu a:focus-visible, #seq-burger:focus-visible {
  outline: 2px solid var(--seq-orange);
  outline-offset: 2px;
  border-radius: 3px;
}

/* FIX 3 — cross-page heading scale consistency */
/* About (1625): section H2s render ~32px (native widgets) → match content H2 scale */
.page-id-1625 h2.elementor-heading-title { font-size: clamp(23px, 3.4vw, 31px); }
/* Feasibility (283): "Who is it for?" content h4 were 24px (> their 18px h3) → normalize */
.page-id-283 .elementor-widget-html h4 { font-size: 17px; line-height: 1.3; }
/* Contact (271): "Request an estimate" h3 was a 28px outlier → align to content scale */
.page-id-271 h3.elementor-heading-title { font-size: clamp(20px, 2.6vw, 23px); }

/* FIX 4 — filter pills: larger tap target on mobile (≥40px tall) */
@media (max-width: 600px) {
  .seq-filter { padding: 13px 18px; }
}

/* ============================================================
   MOBILE DESIGN POLISH (≤600px) — mobile-scoped only; desktop (≥601) untouched
   ============================================================ */
@media (max-width: 600px) {
  /* FIX 1 — content H1 + hero heading sized down for small screens */
  body .elementor-widget-heading h1.elementor-heading-title,
  body.seq-site .elementor-widget-heading h1.elementor-heading-title,
  h1.elementor-heading-title { font-size: 28px !important; line-height: 1.18; }
  .seq-hero-inner :is(h1,h2), .seq-hero :is(h1,h2) { font-size: clamp(24px, 7.5vw, 28px); }

  /* FIX 3 — tighter vertical section rhythm (exclude orange CTA band; trim its inner pad)
     [refined 2026-06: 36→28 so the intro→body gap is ~56px, not ~72px] */
  body.seq-site .elementor-section.elementor-top-section:not(.seq-cta-band) {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .seq-cta-inner { padding: 40px 22px; }

  /* FIX 2 — Photo gallery (1354): 2 columns on mobile (was 1), keep 4:3 + gutter */
  .page-id-1354 .seq-gallery .seq-gtile { width: calc(50% - 9px); }
  .page-id-1354 .seq-gallery .seq-gcap { font-size: 13px; padding: 9px 11px; line-height: 1.3; min-height: 50px; }

  /* FIX 4 — About (1625) "why choose" cards 2-up on mobile */
  .page-id-1625 .elementor-column.seq-aboutcard { width: 50% !important; }
  .page-id-1625 .seq-aboutcard > .elementor-element-populated { padding: 18px 14px; }

  /* FIX 5 — Hub (1589) service cards: keep 2 columns down to small phones */
  .page-id-1589 .seq-svccards .seq-svccard { flex: 0 1 calc(50% - 9px); min-width: 150px; }
}

/* ============================================================
   MOBILE REFINEMENT (2026-06) — all-width gallery alignment + Multi-Res image
   ============================================================ */
/* FIX 1 — Photo gallery (Isotope at all widths): equalize tile height via a
   caption min-height (~2 lines) + vertically center the title, so 1-line and
   2-line captions occupy the same space and rows bottom-align. */
.page-id-1354 .seq-gallery .seq-gcap {
  min-height: 60px;
  display: flex;
  align-items: center;
}
/* FIX 3 — Multi-Residential card image (widget cd8405f) has a small 300×200
   source; force width:100% so it fills the card like its (larger) siblings. */
.elementor-element-cd8405f img { width: 100%; }

/* ============================================================
   RICH SERVICE-PAGE TEMPLATE (post 1027 + rollout) — 2026-06
   Decorative layer only; his copy stays in native widgets.
   ============================================================ */
/* SEQ icon set (mask-image; --ic picks the icon, color via background-color) */
.ic-house{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M12%202.7%202.5%2011h2.6v10.3h5.1V15h3.6v6.3h5.1V11h2.6z%22%2F%3E%3C%2Fsvg%3E");}
.ic-clock{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M12%202a10%2010%200%20100%2020%2010%2010%200%20000-20zm1%2010.4%203.3%201.9-.8%201.3L11%2013V6h2z%22%2F%3E%3C%2Fsvg%3E");}
.ic-shield{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M12%201.5%204.5%204.4v6.1c0%204.7%203.2%208.6%207.5%209.9%204.3-1.3%207.5-5.2%207.5-9.9V4.4zM10.7%2015%207.4%2011.7l1.4-1.4%201.9%201.9%204.1-4.1%201.4%201.4z%22%2F%3E%3C%2Fsvg%3E");}
.ic-pin{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M12%202a7%207%200%2000-7%207c0%205%207%2013%207%2013s7-8%207-13a7%207%200%2000-7-7zm0%209.5A2.5%202.5%200%201112%206.5a2.5%202.5%200%20010%205z%22%2F%3E%3C%2Fsvg%3E");}
.ic-ruler{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M3.5%2016.8%2016.8%203.5l3.7%203.7L7.2%2020.5zM6.2%2012.9l1.6%201.6%201.4-1.4-1.6-1.6zm3.3-3.3%201.6%201.6L12.5%207.8%2010.9%206.2z%22%2F%3E%3C%2Fsvg%3E");}
.ic-layers{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M12%202%202.3%207.3%2012%2012.6l9.7-5.3zM4.6%2011.2%202.3%2012.5%2012%2017.8l9.7-5.3-2.3-1.3L12%2015z%22%2F%3E%3C%2Fsvg%3E");}
.ic-ground{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M2.5%2015h19v5.5h-19zM5.5%2013.5V9h1.6v4.5zM9.2%2013.5V7h1.6v6.5zM12.9%2013.5V8h1.6v5.5zM16.6%2013.5V6.5h1.6v7z%22%2F%3E%3C%2Fsvg%3E");}
.ic-clipboard{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M9%202.2h6v1.6h2.6v18H6.4v-18H9zM9%203.8v1.8h6V3.8zM8%2013.4l2.9%202.9%205.1-5.1-1.4-1.4-3.7%203.7-1.5-1.5z%22%2F%3E%3C%2Fsvg%3E");}
.ic-check{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M9.3%2016.2%205%2011.9%203.6%2013.3%209.3%2019%2020.4%207.9%2019%206.5z%22%2F%3E%3C%2Fsvg%3E");}
/* ICONSWAP — glyphs tracing the original's entypo-fontello set */
.ic-gear{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M12%208.2a3.8%203.8%200%20100%207.6%203.8%203.8%200%20000-7.6zm9.3%205.3-2.3-.4c-.1.6-.3%201.1-.6%201.6l1.4%201.9-2.1%202.1-1.9-1.4c-.5.3-1%20.5-1.6.6l-.4%202.3h-3l-.4-2.3a6.6%206.6%200%2001-1.6-.6l-1.9%201.4-2.1-2.1%201.4-1.9c-.3-.5-.5-1-.6-1.6l-2.3-.4v-3l2.3-.4c.1-.6.3-1.1.6-1.6L4.8%205.8l2.1-2.1%201.9%201.4c.5-.3%201-.5%201.6-.6l.4-2.3h3l.4%202.3c.6.1%201.1.3%201.6.6l1.9-1.4%202.1%202.1-1.4%201.9c.3.5.5%201%20.6%201.6l2.3.4z%22%2F%3E%3C%2Fsvg%3E");}
.ic-bucket{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M4.5%204h15l-.7%203H5.2zM6%208.5h12l-1.4%2012.7c-.1.5-.5.8-1%20.8H8.4c-.5%200-.9-.3-1-.8z%22%2F%3E%3C%2Fsvg%3E");}
.ic-tape{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%22M7.3%208.6a4.7%204.7%200%20100%209.4%204.7%204.7%200%20000-9.4zm0%202.8a1.9%201.9%200%20110%203.8%201.9%201.9%200%20010-3.8zm9.4-2.8a4.7%204.7%200%20100%209.4%204.7%204.7%200%20000-9.4zm0%202.8a1.9%201.9%200%20110%203.8%201.9%201.9%200%20010-3.8zM7.3%2018h9.4v-1.4H7.3z%22%2F%3E%3C%2Fsvg%3E");}
/* shared icon-chip renderer (uses --ic from an .ic-* class) */
.seq-ic { display:inline-block; width:30px; height:30px; background-color: var(--seq-orange);
  -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }

/* SECTION A — richer intro band: paper gradient + faint house watermark top-right */
.seq-svc-introband { position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--seq-paper) 0%, var(--seq-paper-2) 100%); }
.seq-svc-introband::after { content:""; position:absolute; top:-18px; right:-10px;
  width:230px; height:230px; background-color: var(--seq-ink); opacity:.05;
  -webkit-mask: var(--house-ic) center/contain no-repeat; mask: var(--house-ic) center/contain no-repeat;
  pointer-events:none; }
@media (max-width:600px){ .seq-svc-introband::after { width:150px; height:150px; opacity:.045; } }

/* SECTION B — stat callout boxes (icon + number + label). Column carries .seq-statbox + .ic-* */
.seq-statbox { text-align:center; padding:24px 18px; }
.seq-statbox .seq-ic { width:40px; height:40px; margin:0 auto 12px; display:block; }
.seq-statbox .seq-stat-num, .seq-statbox h3 { font-size:26px; font-weight:800; color:var(--seq-ink); margin:0 0 2px; line-height:1.1; }
.seq-statbox .seq-stat-lbl, .seq-statbox p { font-size:14px; color:var(--seq-muted); margin:0; line-height:1.4; }
.seq-statrow { border-top:1px solid var(--seq-line); border-bottom:1px solid var(--seq-line); }

/* SECTION C — one-stop accent band */
.seq-onestop { text-align:center; border-top:3px solid var(--seq-orange); background:var(--seq-paper); }
.seq-onestop::before { content:""; display:block; width:36px; height:36px; margin:0 auto 10px;
  background-color:var(--seq-orange); -webkit-mask: var(--house-ic) center/contain no-repeat; mask: var(--house-ic) center/contain no-repeat; }
.seq-onestop .elementor-heading-title { max-width:760px; margin:0 auto; font-size:clamp(20px,3vw,28px); }

/* SECTION D — horizontal process strip (reuses stepnum circle look) */
.seq-procstrip { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 0; margin:6px 0; }
.seq-procstep { flex:1 1 0; min-width:90px; text-align:center; position:relative; padding:0 6px; }
.seq-procstep:not(:last-child)::after { content:""; position:absolute; top:27px; left:60%; right:-40%; height:2px; background:var(--seq-line); z-index:0; }
.seq-procicon { position:relative; z-index:1; width:54px; height:54px; border-radius:50%; background:var(--seq-orange);
  margin:0 auto 10px; display:flex; align-items:center; justify-content:center; }
.seq-procicon::before { content:""; width:26px; height:26px; background-color:#fff;
  -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
.seq-procstep .seq-proc-lbl { font-size:14px; font-weight:700; color:var(--seq-ink); line-height:1.3; display:block; }
@media (max-width:600px){ .seq-procstep{ flex:1 1 33%; min-width:33%; margin-bottom:14px; } .seq-procstep::after{ display:none; } }

/* SECTION E — icon list variant. G4 (Alan): marker now matches the
   original site's exact symbol — the 18x18 orange square with white ">"
   chevron (li-custom-image.png, copied from the furniot theme into
   uploads). PNG replaces the old orange checkmark mask; border-radius:0
   guards against the base .seq-bullets circle rule rounding the square. */
.seq-bullets--icon { display:grid; gap:2px 26px; }
.seq-bullets--icon li { position:relative; padding:9px 0 9px 30px; border-bottom:1px solid var(--seq-line); list-style:none; }
.seq-bullets--icon li::before { content:""; position:absolute; left:0; top:11px; width:18px; height:18px;
  background: url('../../uploads/2026/07/li-custom-image.png') center/contain no-repeat;
  -webkit-mask: none; mask: none; border-radius: 0; }
@media (min-width:601px){ .seq-bullets--icon { grid-template-columns:1fr 1fr; } }

/* SECTION F — icon feature cards: extend .seq-svccard with a top icon. Card carries .seq-svccard--icon + .ic-* */
.seq-svccard--icon { text-align:left; }
.seq-svccard--icon .seq-ic { width:42px; height:42px; margin:0 0 14px; display:block; }
/* expose house icon as a shared var for introband/onestop */
:root { --house-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M12%202.7%202.5%2011h2.6v10.3h5.1V15h3.6v6.3h5.1V11h2.6z%22%2F%3E%3C%2Fsvg%3E"); --check-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M9.3%2016.2%205%2011.9%203.6%2013.3%209.3%2019%2020.4%207.9%2019%206.5z%22%2F%3E%3C%2Fsvg%3E"); }

/* ============================================================
   RICH TEMPLATE REFINEMENTS (2026-06) — polish, repeatable
   ============================================================ */
/* R5 — consistent section H2 scale (match .seq-article h2 ~23–31) */
.page-id-1027 h2.elementor-heading-title { font-size: clamp(23px, 3.2vw, 31px); }
.seq-onestop .elementor-heading-title { font-size: clamp(23px, 3.2vw, 31px); }

/* R2 — stat callouts as white cards on the paper band */
.seq-statrow { border-top: 0; border-bottom: 0; }
.seq-statbox { background: #fff; border: 1px solid var(--seq-line); border-radius: 12px; padding: 28px 20px; height: 100%; }
.seq-statbox > .elementor-element-populated { height: 100%; }
.seq-statchip { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px;
  border-radius: 50%; background: rgba(255,81,0,.10); margin: 0 auto 14px; }
.seq-statchip .seq-ic { width: 26px; height: 26px; margin: 0; display: block; }
.seq-statbox h3 { font-size: 27px; line-height: 1.05; margin: 0 0 4px; }
.seq-statbox p { font-size: 13.5px; }

/* R3 — feature-card icon chip (rounded square, orange tint) + equal heights */
.seq-icchip { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 13px; background: rgba(255,81,0,.10); margin: 0 0 14px; }
.seq-icchip .seq-ic { width: 26px; height: 26px; margin: 0; display: block; }
.seq-svccard--icon h4 { font-size: 18px; }
.seq-svccard--icon > .elementor-element-populated { height: 100%; }

/* R4 — mobile: feature cards 1 column, hide the desktop spacer column */
@media (max-width: 600px) {
  .page-id-1027 .seq-svccard--icon { width: 100% !important; flex: 0 0 100% !important; min-width: 0 !important; }
  .page-id-1027 .seq-cardspacer { display: none !important; }
}

/* ============================================================
   SERVICE-PAGE VERTICAL ICON-LIST (matches his original layout)
   icon left + heading/paragraph right, stacked rows w/ dividers
   ============================================================ */
.seq-svcrow { position: relative; border-bottom: 1px solid var(--seq-line); }
.seq-svcrow:last-child { border-bottom: 0; }
.seq-svcrow > .elementor-container { padding-left: 58px; }
/* ICONSWAP (Alan): rows match the original's icon treatment — 36px,
   dark grey #373737 (the original's entypo glyphs), not orange 32px.
   Scoped to .seq-svcrow::before only; .seq-ic / statboxes / procicons
   keep their own styling. */
.seq-svcrow::before { content: ""; position: absolute; left: 6px; top: 24px; width: 36px; height: 36px;
  background-color: #373737;
  -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
.seq-svcrow h4, .seq-svcrow h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; }
.seq-svcrow p { margin: 0; color: var(--seq-muted); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 600px) {
  .seq-svcrow > .elementor-container { padding-left: 44px; }
  .seq-svcrow::before { width: 26px; height: 26px; top: 22px; left: 2px; }
}

/* ============================================================
   MOBILE ICON-LIST SPACING POLISH (≤600px) — desktop unchanged
   ============================================================ */
@media (max-width: 600px) {
  /* .seq-svcrow vertical icon-list: smaller icon, tighter icon↔text gap,
     clean top-align with the heading first line, comfortable edge breathing */
  .seq-svcrow > .elementor-container { padding-left: 38px; padding-right: 4px; }
  .seq-svcrow::before { width: 22px; height: 22px; left: 0; top: 20px; }
  .seq-svcrow h4, .seq-svcrow h3 { font-size: 17px; }
  .seq-svcrow p { font-size: 15px; line-height: 1.58; }

  /* process strip: slightly smaller circles so the 3-across row breathes */
  .seq-procicon { width: 46px; height: 46px; }
  .seq-procicon::before { width: 22px; height: 22px; }
  .seq-procstep { padding: 0 4px; }
  .seq-procstep .seq-proc-lbl { font-size: 13px; }

  /* orange-check bullets: tidy indent + icon size */
  .seq-bullets--icon li { padding-left: 28px; }
  .seq-bullets--icon li::before { width: 16px; height: 16px; top: 12px; }
}

/* ============================================================
   MOBILE ICON SPACING — TIGHTEN PASS 2 (≤600px) — desktop unchanged
   ============================================================ */
@media (max-width: 600px) {
  /* A) svcrow: gap 16→12px; drop icon ~10px to center on heading first line */
  .seq-svcrow > .elementor-container { padding-left: 34px; }
  .seq-svcrow::before { width: 22px; height: 22px; left: 0; top: 30px; }
  /* B) process strip: circles a touch smaller, even label gap */
  .seq-procicon { width: 44px; height: 44px; margin-bottom: 8px; }
  .seq-procicon::before { width: 21px; height: 21px; }
  /* C) check-list: slightly tighter item rhythm (gap already a clean 12px) */
  .seq-bullets--icon li { padding-top: 8px; padding-bottom: 8px; }
}

/* In-content download/action button (orange, on light sections) — reusable */
.seq-btn-dl { display:inline-flex; align-items:center; gap:9px; background:var(--seq-orange); color:#fff;
  font-weight:700; font-size:15px; padding:12px 22px; border-radius:var(--seq-radius); text-decoration:none;
  line-height:1; transition:background .15s ease; }
.seq-btn-dl:hover { background:var(--seq-orange-2); color:#fff; }
.seq-btn-dl::before { content:""; width:18px; height:18px; background-color:#fff;
  -webkit-mask: var(--check-ic) center/contain no-repeat; mask: var(--check-ic) center/contain no-repeat; }

/* ============================================================
   3-UP CARDS for service pages (audience blocks + subdivision
   diagrams) — generic, stack cleanly on mobile
   ============================================================ */
@media (max-width: 600px) {
  .seq-svccard--icon, .seq-subcard { width: 100% !important; flex: 0 0 100% !important; min-width: 0 !important; }
}
.seq-subcard { text-align: center; }
.seq-subcard img { max-width: 200px; width: 100%; height: auto; border-radius: var(--seq-radius); }
.seq-subcard h4 { margin: 14px 0 0; font-size: 18px; }

/* ============================================================
   3-WAY COMPARISON COLUMNS (editorial pages, e.g. DCP page)
   ============================================================ */
.seq-cmpcol { background:#fff; border:1px solid var(--seq-line); border-radius:var(--seq-radius); padding:22px 20px; height:100%; }
.seq-cmpcol > .elementor-element-populated { height:100%; }
.seq-cmpcol img { border-radius:var(--seq-radius); margin:0 0 14px; }
.seq-cmpcol h3 { font-size:19px; margin:0 0 6px; }
.seq-cmpcol h4 { font-size:15px; color:var(--seq-orange); margin:6px 0 10px; line-height:1.35; }
.seq-cmpcol .cmp-emph { font-weight:800; margin:14px 0 6px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--seq-ink); }
.seq-cmpcol .cmp-out { font-weight:700; margin:12px 0 0; color:var(--seq-ink); }
.seq-cmpcol .cmp-note { font-size:12.5px; color:var(--seq-muted); font-style:italic; margin:14px 0 0; padding-top:12px; border-top:1px solid var(--seq-line); }
@media (max-width:600px){ .seq-cmpcol{ width:100%!important; flex:0 0 100%!important; min-width:0!important; } }

/* ============================================================
   NUMBERED PROCESS STEPS (1743) + DIRECTORY "more info" link
   ============================================================ */
.seq-numsteps { counter-reset: seqstep; }
.seq-numstep { position: relative; border-bottom: 1px solid var(--seq-line); counter-increment: seqstep; }
.seq-numstep:last-child { border-bottom: 0; }
.seq-numstep > .elementor-container { padding-left: 66px; }
.seq-numstep::before { content: counter(seqstep); position: absolute; left: 4px; top: 24px; width: 42px; height: 42px;
  border-radius: 50%; background: var(--seq-orange); color: #fff; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center; }
.seq-numstep h3 { margin: 0 0 6px; font-size: 18px; }
.seq-numstep p { margin: 0 0 8px; color: var(--seq-muted); }
@media (max-width: 600px) {
  .seq-numstep > .elementor-container { padding-left: 50px; }
  .seq-numstep::before { width: 34px; height: 34px; font-size: 16px; top: 22px; }
}
.seq-morelink { display: inline-block; margin-top: 4px; color: var(--seq-orange); font-weight: 700; text-decoration: none; }
.seq-morelink::after { content: " →"; }
.seq-morelink:hover { color: var(--seq-orange-2); }
.seq-pricetag { font-size: 22px; font-weight: 800; color: var(--seq-orange); margin: 6px 0 0; }
.seq-support { background: var(--seq-paper); border-left: 4px solid var(--seq-orange); border-radius: var(--seq-radius); padding: 22px 24px; }
.seq-support h3 { margin: 0 0 8px; }

/* Awards caveat — small print / footnote treatment (BDAQ page) */
.seq-finecaveat { font-size: 12.5px; color: var(--seq-muted); font-style: italic; margin-top: 10px; line-height: 1.5; }

/* ============================================================
   BLOG — index post grid + single-post article (matches rebuild)
   ============================================================ */
/* index grid */
.seq-bloggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.seq-blogcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--seq-line);
  border-radius: var(--seq-radius); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; height: 100%; }
.seq-blogcard:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(61,61,63,.10); }
.seq-blogcard a { text-decoration: none; }
.seq-blogcard-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--seq-paper-2); }
.seq-blogcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.seq-blogcard:hover .seq-blogcard-thumb img { transform: scale(1.04); }
.seq-blogcard-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.seq-blogcard-date { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--seq-orange); margin: 0 0 8px; }
.seq-blogcard-title { font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--seq-ink); margin: 0 0 10px; }
.seq-blogcard:hover .seq-blogcard-title { color: var(--seq-orange); }
.seq-blogcard-excerpt { font-size: 14.5px; line-height: 1.6; color: var(--seq-muted); margin: 0 0 14px; flex: 1; }
.seq-blogcard-more { font-size: 14px; font-weight: 700; color: var(--seq-orange); margin-top: auto; }
.seq-blogcard-more::after { content: " →"; }
@media (max-width: 980px) { .seq-bloggrid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 600px) { .seq-bloggrid { grid-template-columns: 1fr; gap: 18px; } }

/* single-post header + article */
/* Centred to match the service-page heading blocks (BLOGHEAD fix).
   .seq-blog-header exists only in page-design-news.php and single.php. */
.seq-blog-header { text-align: center; }
/* P4 (Alan): blog heading renders UPPERCASE — display only, stored
   text unchanged. Same scope as the centring rule above. */
.seq-blog-header h1 { text-transform: uppercase; }
.seq-blog-meta { font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--seq-muted); margin: 12px 0 0; }
.seq-blog-meta .seq-blog-cat { color: var(--seq-orange); }
.seq-blog-featimg { margin: 0 auto 8px; max-width: 880px; }
.seq-blog-featimg img { width: 100%; height: auto; border-radius: var(--seq-radius); display: block; }
.seq-blog-article { max-width: 820px; margin: 0 auto; }
.seq-blog-article p { font-size: 16.5px; line-height: 1.75; color: #2B2B2B; margin: 0 0 18px; }
.seq-blog-article h2 { font-size: clamp(22px, 3vw, 28px); color: var(--seq-ink); margin: 34px 0 12px; }
.seq-blog-article h3 { font-size: 20px; color: var(--seq-ink); margin: 26px 0 10px; }
.seq-blog-article h4 { font-size: 17px; color: var(--seq-ink); margin: 22px 0 8px; }
.seq-blog-article ul, .seq-blog-article ol { margin: 0 0 18px; padding-left: 22px; }
.seq-blog-article li { font-size: 16px; line-height: 1.7; color: #2B2B2B; margin: 0 0 6px; }
.seq-blog-article img { max-width: 100%; height: auto; border-radius: var(--seq-radius); margin: 14px 0; }
.seq-blog-article a { color: var(--seq-orange); text-decoration: underline; }
.seq-blog-article blockquote { border-left: 4px solid var(--seq-orange); background: var(--seq-paper);
  margin: 20px 0; padding: 16px 20px; border-radius: var(--seq-radius); color: var(--seq-ink); }
.seq-blog-back { display: inline-block; margin: 4px 0 0; font-weight: 700; color: var(--seq-orange); text-decoration: none; }
.seq-blog-back::before { content: "← "; }

/* Container wrap for theme-rendered templates (blog) — matches site content width */
.seq-wrap { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.seq-blog-header .seq-wrap { position: relative; z-index: 1; }
@media (max-width: 600px) { .seq-wrap { padding-left: 16px; padding-right: 16px; } }

/* ============================================================
   MOBILE CTA BAND POLISH (2026-06) — phone-only
   The FIX 3 rule at the global mobile block (~line 1604) excludes
   .seq-cta-band from the 28px section-padding clamp, so Elementor's
   default section padding kept inflating the band; combined with the
   .seq-cta-inner 40px the band felt cavernous on phones. Also no
   mobile rule existed for .seq-cta-btn, leaving desktop padding
   (14px 32px / 14px) making the button look oversized in the narrow
   column. This block tightens both and right-sizes the heading.
   Scoped to ≤600px (and a tighter ≤400px) — desktop untouched.
   ============================================================ */
@media (max-width: 600px) {
  body.seq-site .elementor-section.elementor-top-section.seq-cta-band {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .seq-cta-inner { padding: 36px 20px; }
  .seq-cta-band h2 { font-size: 24px; line-height: 1.25; margin-bottom: 10px; }
  .seq-cta-band p { font-size: 15.5px; margin: 0 auto 18px; }
  .seq-cta-band .seq-cta-btn {
    display: inline-block; width: auto;
    padding: 13px 26px; font-size: 15px;
  }
}
@media (max-width: 400px) {
  .seq-cta-inner { padding: 28px 16px; }
  .seq-cta-band h2 { font-size: 22px; }
  .seq-cta-band .seq-cta-btn { padding: 12px 22px; font-size: 14.5px; }
}

/* ============================================================
   MOBILE FLOATING CALL BUTTON (.seq-fab-call) — 2026-06
   Replaces the green "Call Now Button" plugin bar on mobile.
   Injected into wp_footer from functions.php. Desktop untouched
   (FAB hidden ≥769px; plugin's own bar also hidden ≥650px).
   ============================================================ */
@media (max-width: 768px) {
  .seq-fab-call {
    position: fixed; right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 9999; width: 56px; height: 56px; border-radius: 50%;
    background: #c0432a; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); color: #fff; text-decoration: none;
    animation: seq-fab-pulse 2s infinite;
  }
  /* Hide the Call Now Button plugin's green bottom bar — replaced by .seq-fab-call */
  #callnowbutton { display: none !important; }
  /* Hide the "Really Simple Click to Call" red bar too — same category (mobile-only
     full-width fixed phone bar) and its z-index 10000 would otherwise cover the FAB.
     Plugin's own CSS also injects body{padding-bottom:50px} at ≤736px — kill that
     so we don't leave a 50px empty strip below the page. */
  #click_to_call_bar { display: none !important; }
  body { padding-bottom: 0 !important; }
}
@media (min-width: 769px) { .seq-fab-call { display: none; } }
@keyframes seq-fab-pulse {
  0% { box-shadow: 0 0 0 0 rgba(192,67,42,0.5); }
  70% { box-shadow: 0 0 0 14px rgba(192,67,42,0); }
  100% { box-shadow: 0 0 0 0 rgba(192,67,42,0); }
}

/* ============================================================
   STEP 2 — TYPOGRAPHY (ALAN) — match the live original
   * Nav links: Bebas Neue 24px 400 white, padding 8px 18px
   * Inner-page H1: Bebas Neue 60px 400 #3D3D3F UPPERCASE l-s 1.5px centred
   * All other content headings: Open Sans
   * Orange sub-headings (h2.seq-orange-sub): Open Sans 24px 400 #FF5100
   * Hero H1 home (Open Sans 40px 700 UPPERCASE) untouched
   ============================================================ */
/* Scoped to TOP-LEVEL menu items only (`> li > a`). Dropdown items in
   .sub-menu keep their own Open Sans 13.5px 500 styling. */
body.seq-site .seq-menu > li > a,
body.seq-site .seq-menu > li > a:link,
body.seq-site .seq-menu > li > a:visited {
  font-family: 'Bebas Neue', 'BebasNeueRegular', Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 24px;
  padding: 8px 18px;
}

/* Inner-page H1 (anything except the home hero, which uses .seq-hero scoping).
   !important on font-weight + letter-spacing because the base `h1,h2,h3,h4,h5`
   rule at the top of this stylesheet sets 800 / -0.015em and Elementor's inline
   per-widget CSS sometimes wins specificity even at our 3-class scope. */
body:not(.home).seq-site h1.elementor-heading-title,
body:not(.home).seq-site h1.page-title,
body:not(.home).seq-site .entry-content h1 {
  font-family: 'Bebas Neue', 'BebasNeueRegular', Arial, sans-serif;
  font-weight: 400 !important;
  font-size: 60px;
  line-height: 60px;
  color: #3D3D3F;
  letter-spacing: 1.5px !important;
  text-align: center;
  text-transform: uppercase;
}

/* Other content headings: force Open Sans (overrides any inherited family). */
body.seq-site h2.elementor-heading-title,
body.seq-site h3.elementor-heading-title,
body.seq-site h4.elementor-heading-title,
body.seq-site .entry-content h2,
body.seq-site .entry-content h3,
body.seq-site .entry-content h4 { font-family: 'Open Sans', sans-serif; }

body.seq-site h2.seq-orange-sub,
body.seq-site h2.elementor-heading-title.seq-orange-sub {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #FF5100;
  text-align: center;
  letter-spacing: -1px;
}

/* ============================================================
   STEP 3 — LOGO (ALAN) — original 267x91 logo from live site
   ============================================================ */
.seq-logo-img { display: inline-block; line-height: 0; }
.seq-logo-img img { width: 267px; max-width: 100%; height: auto; display: block; transition: width .25s ease; }
.site-header.scrolled .seq-logo-img img { width: 220px; height: auto; }

/* ============================================================
   STEP 4 — NAV HOVER + ACTIVE STATE (ALAN) — match original
   * Hover:  bg #FF5100 solid + white text (NAVHOVER fix — measured the
     original at rgb(255,81,0) alpha 1.0; the earlier 0.5 alpha was ours)
   * Active: bg #FF5100 + white text
   ============================================================ */
/* Scoped to top-level only — sub-menu items keep their own .sub-menu a:hover
   (cream bg + orange text) from the dropdown CSS block above. */
body.seq-site .seq-menu > li > a:hover,
body.seq-site .seq-menu > li > a:focus-visible {
  background-color: #FF5100;
  color: #FFFFFF !important;
  text-decoration: none;
}
body.seq-site .seq-menu > li.current-menu-item > a,
body.seq-site .seq-menu > li.current_page_item > a,
body.seq-site .seq-menu > li.current-menu-ancestor > a {
  background-color: #FF5100;
  color: #FFFFFF !important;
}

/* ============================================================
   STEP 5 — Mailto CTA button on contact page
   Replaces the Contact Form 7 widget. Styled to match Alan's
   original "More Information" primary CTA on the live site.
   ============================================================ */
a.seq-mailto-btn {
  display: inline-block;
  background-color: #FF5100;
  color: #FFFFFF !important;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  padding: 5px 18px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: -1px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
a.seq-mailto-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 81, 0, 0.35);
  color: #FFFFFF !important;
}

/* ============================================================
   POLISH (post-STEP-7) — body colour, contact subhead, home hero H1
   ============================================================ */

/* Δ1 — body text colour to match original (#606060). The base body rule
   uses var(--seq-ink) = #3D3D3F (heading grey). Override at body level only;
   headings keep their --seq-ink because they're styled separately. */
body.seq-site { color: #606060; }

/* Δ4 — contact-page intro subhead. Original renders this as an orange H2.
   Rebuild marks it up as <p class="seq-intro-sub">, so style the <p> to match. */
body.seq-site .seq-intro-sub {
  color: #FF5100;
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  font-weight: 400;
  font-style: italic; /* FIX 6c — original renders this Open Sans italic */
  text-align: center;
  letter-spacing: -1px;
  margin: -10px 0 0;
}

/* Δ2 — home hero H1 to match original (Open Sans 40px 700 UPPERCASE white,
   left-aligned). Existing .seq-hero-inner rule clamps to 52px and lower-cases. */
body.home .seq-hero-inner :is(h1, h2),
body.home .seq-hero :is(h1, h2) {
  font-size: 40px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  line-height: 1.18 !important;
}

/* ============================================================
   HERO PIXEL-MATCH (Alan) — centre block, two-line heading, fix CTA
   ============================================================ */

/* (1) Centre the hero text + button block horizontally.
   The slide is already display:flex; align-items:center so vertical
   centring is built in. Adding text-align:center + auto margins on
   children does the horizontal centring without restructuring. */
body.home .seq-hero-inner {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* (1b) Defeat the existing .seq-hero-inner :is(h1,h2) max-width:640px clamp
   that was forcing the H1 to wrap to 4 lines on a centred layout. */
body.home .seq-hero-inner :is(h1, h2) {
  max-width: none !important;
  margin: 0 auto !important;
  /* HEROBRIGHTEN: crisp close shadow + wide glow — carries readability
     now that the slide overlay is gone. */
  text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 22px rgba(0,0,0,.5);
}
body.home .seq-hero-inner p {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* (3) Second heading line — separate <p class="seq-hero-sub">.
   Open Sans 36px 400 white, sentence case (NOT uppercase), centred.
   The base h1/h2 rule doesn't touch <p>, so this rule is unopposed. */
body.home .seq-hero-inner .seq-hero-sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.18;
  color: #FFFFFF;
  text-transform: none;
  letter-spacing: normal;
  max-width: none;
  margin: 8px auto 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 22px rgba(0,0,0,.5);
}

/* HEROBRIGHTEN: the small intro paragraph had no shadow of its own —
   give it the same treatment now the overlay is gone. */
body.home .seq-hero-inner p {
  text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.5);
}

/* (4) CTA button — defeat Elementor's .elementor-button defaults
   (gradient bg, padding 13px 26px, radius 5px, 14px 600). Use !important
   on every property the Elementor stylesheet sets, and double-class for
   specificity bump. */
body.home .seq-hero-inner a.seq-hero-btn,
body.home .seq-hero-inner a.elementor-button.seq-hero-btn,
.seq-hero-slide a.seq-hero-btn,
.seq-hero-slide a.elementor-button.seq-hero-btn {
  display: inline-block !important;
  background: #FF5100 !important;
  background-image: none !important;
  background-color: #FF5100 !important;
  color: #FFFFFF !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  text-transform: uppercase !important;
  letter-spacing: -1px !important;
  padding: 5px 18px 6px !important;
  border-radius: 4px !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 16px auto 0 !important;
  text-decoration: none !important;
}
body.home .seq-hero-inner a.seq-hero-btn:hover,
body.home .seq-hero-inner a.elementor-button.seq-hero-btn:hover {
  background: #FF5100 !important;
  background-color: #FF5100 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 81, 0, 0.35) !important;
}

/* ============================================================
   HEADER TRANSPARENT-ON-HOME (Alan) — option (b)
   * Home, at top: transparent header over hero photo, white nav.
   * Home, scrolled (.scrolled): solid white + shadow + dark nav.
   * Inner pages (not .home): unchanged — solid white + dark nav.
   * Orange topbar (.seq-topbar) kept as-is on every page.
   * Hero is pulled up so it starts at the topbar bottom and the
     transparent header floats over the photo without clipping the
     heading (heading is already vertically centred inside the hero,
     so pulling the hero up by header height puts the heading well
     clear of the header).
   ============================================================ */
body.home .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Nav links white when header is transparent over the hero photo —
   scoped to TOP-LEVEL menu items only (`> li > a`) so dropdown items
   inside .sub-menu keep their dark-on-white styling and stay readable. */
body.home .site-header:not(.scrolled) .seq-menu > li > a,
body.home .site-header:not(.scrolled) .seq-menu > li > a:link,
body.home .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

/* Active nav item: solid orange + white text + no text-shadow.
   Same top-level scope. */
body.home .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.home .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}

/* Pull the hero up under the transparent header so the photo extends
   to the top of the page (just below the orange topbar). Negative margin
   equal to the header's natural height. .scrolled state doesn't change
   the hero — it only restyles the header. */
body.home .seq-hero-slider {
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
/* And raise the hero a touch in scrolled compact-header height too */
body.home .site-header.scrolled ~ * .seq-hero-slider { margin-top: 0; }

/* Header stays above hero (sticky z-index 100); inner content respects flow. */

/* Mobile (≤768): the transparent-over-hero treatment doesn't fit a small
   viewport (header is ~30% of mobile screen height and would clip the H1
   behind itself). On mobile home, keep the header SOLID WHITE — same as
   inner pages — so the hero starts cleanly below it with no clipping. */
@media (max-width: 768px) {
  body.home .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.home .site-header:not(.scrolled) .seq-menu > li > a,
  body.home .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.home .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.home .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.home .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;     /* keep active item white on orange */
  }
  /* No negative margin on mobile — hero sits below the solid header. */
  body.home .seq-hero-slider { margin-top: 0; }
}

/* ============================================================
   HEADER POLISH (Alan) — remove redundant Get in touch CTA + font flash
   * The .seq-header-cta "Get in touch" button is an extra the rebuild
     added that the original site does NOT have, and at desktop width
     it was overflowing the header right edge. Removing matches the
     original and stops the cutoff.
   * Bebas Neue preload is handled in functions.php (wp_head).
   ============================================================ */
.seq-header-cta { display: none !important; }

/* Nav overflow fix — at desktop the 6 items at Bebas Neue 24px + 18px
   horizontal padding overflow the 1220px header-inner container by ~90px,
   clipping the "Contact Us" active pill at the right viewport edge.
   Tightening horizontal padding to 13px restores fit (~60px width saved
   across 6 items). Mobile uses a burger so unaffected. */
@media (min-width: 901px) {
  body.seq-site .seq-menu > li > a,
  body.seq-site .seq-menu > li > a:link,
  body.seq-site .seq-menu > li > a:visited {
    padding: 8px 13px !important;
  }
}

/* ============================================================
   FIX 6 — inner-page heading blocks
   ============================================================ */
/* 6a — remove the orange eyebrow label on all inner pages (the original
   site has none). Eyebrows are .seq-eyebrow spans inside Elementor
   text-editor widgets on 24 inner pages plus the blog templates
   (single.php / page-design-news.php). Also hide the wrapping <p>
   (:has, supported by all current browsers) so no empty margin remains;
   the bare span rule is the fallback for anything older. */
body:not(.home) .seq-eyebrow { display: none !important; }
body:not(.home) p:has(> .seq-eyebrow) { display: none !important; }

/* 6b — centre the inner-page heading block. The H1 already centres via
   the inner-page H1 rule; the subheading <p class="seq-intro-sub"> is
   capped at max-width:56ch, which pins its BOX left even though its
   text centres — auto inline margins centre the box itself. */
body:not(.home) .seq-intro-sub { margin-inline: auto; }

/* ============================================================
   HERO BAND — CONTACT PAGE ONLY (page-id-271), first pass.
   Recreates the original's construction: photo strip
   (brisbane-home-design1.jpg, 301px) below the orange topbar with a
   transparent header floating over it, and the ~1170px white content
   card rising into the band's bottom edge, heading on the card.
   EVERY rule is scoped to body.page-id-271 — a global inner-page
   transparent-header change broke the site before. No overlay: the
   original relies on white nav text + text-shadow only.
   ============================================================ */

/* Transparent header at top of the contact page (desktop). Mirrors the
   proven body.home rules; .scrolled reverts to the global solid white. */
body.page-id-271 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* White nav links over the photo — TOP-LEVEL items only (`> li > a`)
   so dropdown items keep dark-on-white. Shadow matches the original
   (0 1px 0 #333). */
body.page-id-271 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-271 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-271 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
/* Active item keeps its solid orange box, no shadow. */
body.page-id-271 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-271 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}

/* The heading section becomes the band host: pulled up under the
   transparent sticky header (same -152px header-height constant the
   homepage hero uses), beige background and old padding overridden.
   The photo strip itself is a ::before capped at 301px — the original
   band height — with the original's #FF5100 fallback, position 0 0,
   repeat, natural size. Below the strip the section is white so it
   merges into the white content that follows. */
body.page-id-271 .elementor-element.elementor-element-seqct001 {
  background: #FFFFFF !important;
  /* padding-top (not child margin) positions the card 218px into the
     band — a child margin-top would collapse through the section and
     drag the whole band down below the header. -152px = header height
     (same constant the homepage hero uses), so the band top lands
     right below the orange topbar. */
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-271 .elementor-element.elementor-element-seqct001::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
/* The white card: centred 1170px container, top edge 218px into the
   band so it overlaps the strip's last ~83px, exactly as the original. */
body.page-id-271 .elementor-element.elementor-element-seqct001 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* original's floating-sheet shadow */
}

/* ============================================================
   FONTMATCH — inner-page body text + section-heading weight
   (client: match original's weight/size/colour; homepage excluded)
   ============================================================ */
/* Body paragraphs in Elementor text widgets: original is 13px #606060 —
   we match the colour exactly and meet size at 15px for readability.
   :not(.seq-intro-sub) guard: the orange page subheading is a <p> inside
   a text-editor widget and must keep its own 24px #FF5100 italic. */
body:not(.home).seq-site .elementor-widget-text-editor p:not(.seq-intro-sub) {
  color: #606060;
  font-size: 15px;
}
/* Content section headings ("Who we are", "Request an estimate", ...):
   800 -> 700; the original never renders text bolder than 600. H1 is a
   different rule (Bebas 400 !important) and unaffected; .seq-orange-sub
   guard keeps the orange 400-weight subheads out. */
/* The :not(.seq-orange-sub) guard on EVERY line is also load-bearing for
   specificity: it lifts these to (0,4,2), above the PART A rule at
   (0,4,1) that forces Elementor heading widgets to 800. */
body:not(.home).seq-site h2.elementor-heading-title:not(.seq-orange-sub),
body:not(.home).seq-site h3.elementor-heading-title:not(.seq-orange-sub),
body:not(.home).seq-site h4.elementor-heading-title:not(.seq-orange-sub),
body:not(.home).seq-site .seq-contact-card h3 {
  font-weight: 700;
}

/* ============================================================
   FRONTLABELS — hide the three homepage eyebrow labels (client:
   match the original, which has no section labels). Each is a
   dedicated text-editor widget whose only content is the label
   span, so hiding the widget removes the label cleanly. The
   orange "Get Started" / "Get in touch" CTA BUTTONS are separate
   widgets and untouched. CSS-hide only — post 1188 data unedited.
   ============================================================ */
body.home .elementor-element-df62304,   /* "What We Do" */
body.home .elementor-element-a5f20e3,   /* "Brisbane Services" */
body.home .elementor-element-4cd8967 {  /* "How It Works" */
  display: none;
}

/* INTROBLOCK — homepage intro paragraph (widget 0bb5d5e) sized/coloured
   like the original's welcome band text (30px #3D3D3F, centred). The
   orange phrase spans + bold + contact link live in the widget content. */
body.home .elementor-element-0bb5d5e,
body.home .elementor-element-0bb5d5e p {
  font-size: 30px;
  color: #3D3D3F;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 600px) {
  body.home .elementor-element-0bb5d5e,
  body.home .elementor-element-0bb5d5e p { font-size: 22px; }
}

/* INTROCARD — the original renders the intro as a raised "popup" card,
   not a full-width band: white box (~875px), 3px solid orange top line,
   pulled up over the hero's bottom edge (original: margin-top -80px on
   .welcome1), drop shadow beneath (original used shadow-welcome1.png;
   we use an equivalent box-shadow). Section beige band removed so the
   card floats on the page background. */
body.home .elementor-element.elementor-element-6688fa1 {
  background: transparent !important;
  padding: 0 0 26px !important;
}
body.home .elementor-element.elementor-element-6688fa1 > .elementor-container {
  max-width: 875px;
  background: #FFFFFF;
  border-top: 3px solid #FF5100;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  margin: -80px auto 0;
  position: relative;
  z-index: 2;
  padding: 30px 38px 34px;
}
/* Hero dots would sit under the overlapping card — lift them clear. */
body.home .seq-hero-dots { bottom: 100px; }

@media (max-width: 600px) {
  body.home .elementor-element.elementor-element-6688fa1 > .elementor-container {
    max-width: calc(100% - 28px);
    margin-top: -46px;
    padding: 22px 20px 26px;
  }
}

/* Mobile (≤768): same fallback as the homepage — transparent-over-photo
   doesn't fit small screens. Solid white header, dark nav, no pull-up;
   the photo band + card still render below the header as a normal band. */
@media (max-width: 768px) {
  body.page-id-271 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-271 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-271 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-271 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-271 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-271 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important; /* active stays white on orange */
  }
  /* Selector carries extra classes to out-rank the global mobile rule
     `body.seq-site .elementor-section.elementor-top-section:not(.seq-cta-band)
     { padding-top: 28px !important }` (≤600px), which otherwise wins on
     specificity and crushes the band offset. */
  body.seq-site.page-id-271 .elementor-section.elementor-element.elementor-element-seqct001 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-271 .elementor-element.elementor-element-seqct001::before { height: 220px; }
  body.page-id-271 .elementor-element.elementor-element-seqct001 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — ABOUT PAGE (page-id-1625, sec0 seqa1001).
   Exact copy of the verified contact-page recipe with only the two
   variables swapped (271 -> 1625, seqct001 -> seqa1001). Scoped to
   body.page-id-1625 ONLY — never a shared inner-page selector.
   ============================================================ */
body.page-id-1625 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1625 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1625 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1625 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1625 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1625 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1625 .elementor-element.elementor-element-seqa1001 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1625 .elementor-element.elementor-element-seqa1001::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1625 .elementor-element.elementor-element-seqa1001 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1625 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1625 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1625 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1625 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1625 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1625 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1625 .elementor-section.elementor-element.elementor-element-seqa1001 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1625 .elementor-element.elementor-element-seqa1001::before { height: 220px; }
  body.page-id-1625 .elementor-element.elementor-element-seqa1001 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — STRUCTURAL ENGINEERING (page-id-1242, sec0 b30005).
   Exact copy of the verified contact/About recipe, two variables
   swapped (271 -> 1242, seqct001 -> b30005). Scoped to
   body.page-id-1242 ONLY — never a shared inner-page selector.
   ============================================================ */
body.page-id-1242 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1242 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1242 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1242 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1242 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1242 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1242 .elementor-element.elementor-element-b30005 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1242 .elementor-element.elementor-element-b30005::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1242 .elementor-element.elementor-element-b30005 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1242 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1242 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1242 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1242 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1242 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1242 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1242 .elementor-section.elementor-element.elementor-element-b30005 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1242 .elementor-element.elementor-element-b30005::before { height: 220px; }
  body.page-id-1242 .elementor-element.elementor-element-b30005 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — RAISE + BUILD IN UNDER (page-id-1027, sec0 sv005).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1027 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1027 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1027 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1027 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1027 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1027 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1027 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1027 .elementor-element.elementor-element-sv005 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1027 .elementor-element.elementor-element-sv005::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1027 .elementor-element.elementor-element-sv005 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1027 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1027 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1027 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1027 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1027 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1027 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1027 .elementor-section.elementor-element.elementor-element-sv005 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1027 .elementor-element.elementor-element-sv005::before { height: 220px; }
  body.page-id-1027 .elementor-element.elementor-element-sv005 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — NEW HOME DESIGN (page-id-1236, sec0 b10125).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1236 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1236 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1236 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1236 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1236 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1236 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1236 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1236 .elementor-element.elementor-element-b10125 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1236 .elementor-element.elementor-element-b10125::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1236 .elementor-element.elementor-element-b10125 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1236 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1236 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1236 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1236 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1236 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1236 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1236 .elementor-section.elementor-element.elementor-element-b10125 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1236 .elementor-element.elementor-element-b10125::before { height: 220px; }
  body.page-id-1236 .elementor-element.elementor-element-b10125 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — HOUSE EXTENSIONS (page-id-1234, sec0 b10005).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1234 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1234 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1234 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1234 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1234 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1234 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1234 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1234 .elementor-element.elementor-element-b10005 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1234 .elementor-element.elementor-element-b10005::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1234 .elementor-element.elementor-element-b10005 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1234 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1234 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1234 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1234 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1234 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1234 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1234 .elementor-section.elementor-element.elementor-element-b10005 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1234 .elementor-element.elementor-element-b10005::before { height: 220px; }
  body.page-id-1234 .elementor-element.elementor-element-b10005 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — DECK ADDITIONS (page-id-1238, sec0 b10177).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1238 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1238 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1238 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1238 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1238 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1238 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1238 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1238 .elementor-element.elementor-element-b10177 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1238 .elementor-element.elementor-element-b10177::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1238 .elementor-element.elementor-element-b10177 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1238 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1238 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1238 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1238 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1238 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1238 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1238 .elementor-section.elementor-element.elementor-element-b10177 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1238 .elementor-element.elementor-element-b10177::before { height: 220px; }
  body.page-id-1238 .elementor-element.elementor-element-b10177 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — CARPORTS + GARAGES (page-id-1240, sec0 b10229).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1240 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1240 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1240 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1240 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1240 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1240 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1240 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1240 .elementor-element.elementor-element-b10229 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1240 .elementor-element.elementor-element-b10229::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1240 .elementor-element.elementor-element-b10229 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1240 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1240 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1240 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1240 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1240 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1240 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1240 .elementor-section.elementor-element.elementor-element-b10229 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1240 .elementor-element.elementor-element-b10229::before { height: 220px; }
  body.page-id-1240 .elementor-element.elementor-element-b10229 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — RAISE ONLY PLANS (page-id-1764, sec0 b10065).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1764 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1764 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1764 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1764 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1764 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1764 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1764 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1764 .elementor-element.elementor-element-b10065 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1764 .elementor-element.elementor-element-b10065::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1764 .elementor-element.elementor-element-b10065 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1764 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1764 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1764 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1764 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1764 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1764 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1764 .elementor-section.elementor-element.elementor-element-b10065 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1764 .elementor-element.elementor-element-b10065::before { height: 220px; }
  body.page-id-1764 .elementor-element.elementor-element-b10065 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — MULTI-RESIDENTIAL (page-id-1249, sec0 b20005).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1249 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1249 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1249 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1249 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1249 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1249 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1249 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1249 .elementor-element.elementor-element-b20005 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1249 .elementor-element.elementor-element-b20005::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1249 .elementor-element.elementor-element-b20005 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1249 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1249 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1249 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1249 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1249 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1249 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1249 .elementor-section.elementor-element.elementor-element-b20005 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1249 .elementor-element.elementor-element-b20005::before { height: 220px; }
  body.page-id-1249 .elementor-element.elementor-element-b20005 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — SUBDIVISIONS (page-id-1244, sec0 b30060).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1244 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1244 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1244 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1244 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1244 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1244 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1244 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1244 .elementor-element.elementor-element-b30060 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1244 .elementor-element.elementor-element-b30060::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1244 .elementor-element.elementor-element-b30060 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1244 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1244 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1244 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1244 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1244 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1244 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1244 .elementor-section.elementor-element.elementor-element-b30060 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1244 .elementor-element.elementor-element-b30060::before { height: 220px; }
  body.page-id-1244 .elementor-element.elementor-element-b30060 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — SERVICES HUB (page-id-1589, sec0 seqh1001).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1589 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1589 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1589 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1589 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1589 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1589 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1589 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1589 .elementor-element.elementor-element-seqh1001 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1589 .elementor-element.elementor-element-seqh1001::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1589 .elementor-element.elementor-element-seqh1001 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1589 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1589 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1589 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1589 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1589 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1589 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1589 .elementor-section.elementor-element.elementor-element-seqh1001 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1589 .elementor-element.elementor-element-seqh1001::before { height: 220px; }
  body.page-id-1589 .elementor-element.elementor-element-seqh1001 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — LATEST PROJECTS (page-id-1591, sec0 1591i).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1591 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1591 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1591 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1591 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1591 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1591 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1591 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1591 .elementor-element.elementor-element-1591i {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1591 .elementor-element.elementor-element-1591i::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1591 .elementor-element.elementor-element-1591i > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1591 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1591 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1591 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1591 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1591 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1591 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1591 .elementor-section.elementor-element.elementor-element-1591i {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1591 .elementor-element.elementor-element-1591i::before { height: 220px; }
  body.page-id-1591 .elementor-element.elementor-element-1591i > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — PHOTO GALLERY (page-id-1354, sec0 1354i).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1354 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1354 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1354 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1354 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1354 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1354 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1354 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1354 .elementor-element.elementor-element-1354i {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1354 .elementor-element.elementor-element-1354i::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1354 .elementor-element.elementor-element-1354i > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1354 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1354 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1354 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1354 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1354 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1354 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1354 .elementor-section.elementor-element.elementor-element-1354i {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1354 .elementor-element.elementor-element-1354i::before { height: 220px; }
  body.page-id-1354 .elementor-element.elementor-element-1354i > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — 3D GALLERY (page-id-639, sec0 639i).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-639 ONLY — never a shared selector.
   ============================================================ */
body.page-id-639 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-639 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-639 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-639 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-639 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-639 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-639 .elementor-element.elementor-element-639i {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-639 .elementor-element.elementor-element-639i::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-639 .elementor-element.elementor-element-639i > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-639 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-639 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-639 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-639 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-639 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-639 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-639 .elementor-section.elementor-element.elementor-element-639i {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-639 .elementor-element.elementor-element-639i::before { height: 220px; }
  body.page-id-639 .elementor-element.elementor-element-639i > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — FAQS (page-id-1623, sec0 seqf1001).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1623 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1623 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1623 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1623 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1623 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1623 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1623 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1623 .elementor-element.elementor-element-seqf1001 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1623 .elementor-element.elementor-element-seqf1001::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1623 .elementor-element.elementor-element-seqf1001 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1623 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1623 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1623 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1623 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1623 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1623 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1623 .elementor-section.elementor-element.elementor-element-seqf1001 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1623 .elementor-element.elementor-element-seqf1001::before { height: 220px; }
  body.page-id-1623 .elementor-element.elementor-element-seqf1001 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — BUILDING DESIGN PROCESS (page-id-1743, sec0 b50092).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1743 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1743 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1743 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1743 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1743 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1743 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1743 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1743 .elementor-element.elementor-element-b50092 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1743 .elementor-element.elementor-element-b50092::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1743 .elementor-element.elementor-element-b50092 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1743 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1743 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1743 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1743 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1743 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1743 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1743 .elementor-section.elementor-element.elementor-element-b50092 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1743 .elementor-element.elementor-element-b50092::before { height: 220px; }
  body.page-id-1743 .elementor-element.elementor-element-b50092 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — DCP + CHARACTER (page-id-1644, sec0 b40005).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1644 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1644 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1644 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1644 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1644 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1644 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1644 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1644 .elementor-element.elementor-element-b40005 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1644 .elementor-element.elementor-element-b40005::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1644 .elementor-element.elementor-element-b40005 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1644 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1644 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1644 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1644 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1644 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1644 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1644 .elementor-section.elementor-element.elementor-element-b40005 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1644 .elementor-element.elementor-element-b40005::before { height: 220px; }
  body.page-id-1644 .elementor-element.elementor-element-b40005 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — DRAFTSMAN (page-id-1660, sec0 b40065).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1660 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1660 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1660 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1660 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1660 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1660 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1660 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1660 .elementor-element.elementor-element-b40065 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1660 .elementor-element.elementor-element-b40065::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1660 .elementor-element.elementor-element-b40065 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1660 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1660 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1660 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1660 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1660 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1660 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1660 .elementor-section.elementor-element.elementor-element-b40065 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1660 .elementor-element.elementor-element-b40065::before { height: 220px; }
  body.page-id-1660 .elementor-element.elementor-element-b40065 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — BUILDERS PLANS (page-id-1663, sec0 b40085).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1663 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1663 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1663 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1663 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1663 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1663 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1663 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1663 .elementor-element.elementor-element-b40085 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1663 .elementor-element.elementor-element-b40085::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1663 .elementor-element.elementor-element-b40085 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1663 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1663 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1663 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1663 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1663 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1663 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1663 .elementor-section.elementor-element.elementor-element-b40085 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1663 .elementor-element.elementor-element-b40085::before { height: 220px; }
  body.page-id-1663 .elementor-element.elementor-element-b40085 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — CUSTOM PLANS (page-id-1473, sec0 b50062).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1473 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1473 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1473 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1473 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1473 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1473 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1473 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1473 .elementor-element.elementor-element-b50062 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1473 .elementor-element.elementor-element-b50062::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1473 .elementor-element.elementor-element-b50062 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1473 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1473 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1473 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1473 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1473 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1473 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1473 .elementor-section.elementor-element.elementor-element-b50062 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1473 .elementor-element.elementor-element-b50062::before { height: 220px; }
  body.page-id-1473 .elementor-element.elementor-element-b50062 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — FEASIBILITY (page-id-283, sec0 b50004).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-283 ONLY — never a shared selector.
   ============================================================ */
body.page-id-283 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-283 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-283 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-283 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-283 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-283 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-283 .elementor-element.elementor-element-b50004 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-283 .elementor-element.elementor-element-b50004::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-283 .elementor-element.elementor-element-b50004 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-283 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-283 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-283 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-283 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-283 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-283 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-283 .elementor-section.elementor-element.elementor-element-b50004 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-283 .elementor-element.elementor-element-b50004::before { height: 220px; }
  body.page-id-283 .elementor-element.elementor-element-b50004 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — BDAQ AWARDS (page-id-293, sec0 seqb001).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-293 ONLY — never a shared selector.
   ============================================================ */
body.page-id-293 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-293 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-293 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-293 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-293 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-293 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-293 .elementor-element.elementor-element-seqb001 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-293 .elementor-element.elementor-element-seqb001::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-293 .elementor-element.elementor-element-seqb001 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-293 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-293 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-293 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-293 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-293 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-293 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-293 .elementor-section.elementor-element.elementor-element-seqb001 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-293 .elementor-element.elementor-element-seqb001::before { height: 220px; }
  body.page-id-293 .elementor-element.elementor-element-seqb001 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   HERO BAND — TOTAL PROJECT COSTS (page-id-1566, sec0 b20035).
   Exact copy of the verified contact recipe, two variables swapped.
   Scoped to body.page-id-1566 ONLY — never a shared selector.
   ============================================================ */
body.page-id-1566 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-1566 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-1566 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-1566 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-1566 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-1566 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-1566 .elementor-element.elementor-element-b20035 {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.page-id-1566 .elementor-element.elementor-element-b20035::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-1566 .elementor-element.elementor-element-b20035 > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-1566 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-1566 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-1566 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-1566 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-1566 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-1566 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-1566 .elementor-section.elementor-element.elementor-element-b20035 {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-1566 .elementor-element.elementor-element-b20035::before { height: 220px; }
  body.page-id-1566 .elementor-element.elementor-element-b20035 > .elementor-container {
    padding: 28px 18px 12px;
  }
}

/* ============================================================
   RECENT PROJECTS strip — rendered by seq_recent_projects_strip()
   (functions.php) just before the footer on 12 allowlisted pages.
   Matches the original: 16px/600 uppercase left-aligned heading with
   thin divider, 150x100 tiles, 40px gaps. Tiles link to the gallery;
   orange-border hover like the footer thumbs.
   ============================================================ */
.seq-recentprojects {
  background: #fff;
  padding: 10px 0 44px;
}
.seq-recentprojects .seq-rp-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: #212121;
  text-align: left;
  letter-spacing: normal;
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid #F6F4F4; /* the original's .title-stripes line */
}
.seq-recentprojects .seq-rp-grid {
  display: grid;
  grid-template-columns: repeat(4, 150px);
  gap: 40px;
  margin-top: 18px;
}
.seq-recentprojects .seq-rp-grid a { display: block; text-decoration: none; }
.seq-recentprojects .seq-rp-grid img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  display: block;
  border: 2px solid transparent;
  box-sizing: border-box;
}
.seq-recentprojects .seq-rp-grid a:hover img { border-color: var(--seq-orange-2); }
/* Tile captions (RPCAPTIONS) — the original's measured styling: title
   16px/600 #3D3D3F, category 11px/400 #606060 uppercase (comma-separated
   when a project has several). No like counts — that was a social plugin. */
.seq-recentprojects .seq-rp-t {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #3D3D3F;
  margin-top: 10px;
}
.seq-recentprojects .seq-rp-grid a:hover .seq-rp-t { color: var(--seq-orange-2); }
.seq-recentprojects .seq-rp-c {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: #606060;
  text-transform: uppercase;
  margin-top: 4px;
}

@media (max-width: 700px) {
  .seq-recentprojects .seq-rp-grid {
    grid-template-columns: repeat(2, 150px);
    gap: 18px;
    justify-content: start;
  }
}

/* ============================================================
   FEATURE PROJECTS — homepage strip rendered by
   seq_feature_projects_strip() (functions.php), relocated to sit
   before the call band. Original: 3 cells 300x200 (2 project tiles
   + feasibility promo), 40px gaps, same heading/caption styling as
   the Recent Projects strip (classes reused).
   ============================================================ */
.seq-featureprojects .seq-fp-grid {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 40px;
  margin-top: 18px;
}
.seq-featureprojects .seq-fp-grid > a { display: block; text-decoration: none; }
.seq-featureprojects .seq-fp-grid img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  display: block;
  border: 2px solid transparent;
  box-sizing: border-box;
}
.seq-featureprojects .seq-fp-grid a:hover img { border-color: var(--seq-orange-2); }
.seq-featureprojects .seq-fp-promo p {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #606060;
  line-height: 1.6;
  margin: 6px 0 10px;
}
.seq-featureprojects .seq-fp-promo-title { text-transform: uppercase; font-size: 15px; }
.seq-featureprojects .seq-fp-readmore {
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--seq-orange);
  padding: 7px 16px;
  text-decoration: none;
}
.seq-featureprojects .seq-fp-readmore:hover { background: var(--seq-orange-2); color: #fff; }

@media (max-width: 1024px) {
  .seq-featureprojects .seq-fp-grid { grid-template-columns: repeat(2, 300px); justify-content: start; }
}
@media (max-width: 700px) {
  .seq-featureprojects .seq-fp-grid { grid-template-columns: minmax(0, 300px); gap: 26px; }
}

/* ============================================================
   P5 (Alan) — DRAFTSMAN PAGE (page-id-1660) heading styling.
   R2SMALL update: Alan now wants the page H1 in the site's standard
   dark (#3D3D3F), NOT orange (caps + size still come from the
   inner-page H1 rule, unchanged). The two OTHER titles on this page
   (b40073 "We also do..." h4, b40069 "Draftsman Brisbane Home
   Owners..." h3) STAY orange caps — they are scoped separately below.
   Scoped strictly to page-id-1660.
   ============================================================ */
body.page-id-1660.seq-site h1.elementor-heading-title {
  color: #3D3D3F;
}
/* Extra classes out-rank Elementor's per-widget colour rule (0,4,0). */
body.page-id-1660 .elementor-element.elementor-element-b40073 h4.elementor-heading-title {
  color: #FF5100;
  text-transform: uppercase;
  text-align: center;
}

/* ============================================================
   P6 — BLOG TEASERS (rendered by seq_blog_teasers(), relocated
   mid-page). Original content/structure, rebuild card language.
   ============================================================ */
.seq-blogteasers { margin: 6px 0 30px; }
.seq-blogteasers--cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.seq-blogteasers .seq-bt-card {
  border: 1px solid var(--seq-line);
  border-top: 3px solid var(--seq-orange);
  background: #fff;
  padding: 18px 20px 16px;
}
.seq-blogteasers--stack { display: grid; gap: 14px; max-width: 640px; }
.seq-blogteasers .seq-bt-title {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--seq-ink);
  text-decoration: none;
}
.seq-blogteasers .seq-bt-title:hover { color: var(--seq-orange-2); }
.seq-blogteasers .seq-bt-meta,
.seq-blogteasers .seq-bt-date {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #606060;
  margin: 8px 0 0;
}
.seq-blogteasers--stack .seq-bt-date { margin: 0 0 4px; }
.seq-blogteasers .seq-bt-cats {
  display: block;
  font-size: 12.5px;
  color: #606060;
  margin-top: 6px;
}
.seq-blogteasers .seq-bt-more {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--seq-orange);
  text-decoration: none;
}
.seq-blogteasers .seq-bt-more:hover { color: var(--seq-orange-2); }
@media (max-width: 760px) {
  .seq-blogteasers--cols { grid-template-columns: 1fr; gap: 14px; }
}


/* ============================================================
   FEASIBILITY REVISIONS (page 283) — Alan's revision round.
   f) hide the booklet graphic at the bottom (original shows it only
      beside "What's included" — the fsadv283 widget now covers that).
   c) float the ad/booklet image right so the "What's included" content
      wraps beside it, like the original (280px image, right of Project
      Costs). Cleared before the "When should you get" heading.
   d) "Financing a major renovation" was the only named subheading
      smaller than Project Challenges (24px vs 28px) — raised to match.
      Selector mirrors the proven P5 pattern to beat the typography-
      authority rule.
   ============================================================ */
body.page-id-283 .elementor-element-b50053 { display: none; }
body.page-id-283 .elementor-element-fsadv283 { max-width: 300px; margin-left: auto; margin-right: auto; }
body.page-id-283 .elementor-element.elementor-element-b50015 h4.elementor-heading-title,
body.page-id-283 .elementor-element.elementor-element-b50017 h4.elementor-heading-title,
body.page-id-283 .elementor-element.elementor-element-b50019 h4.elementor-heading-title { font-size: 28px; }


/* ============================================================
   HOMEPAGE REVISIONS P2 (Alan) — intro card letter-spacing.
   Original intro paragraph is 30px/36px with letter-spacing -1.5px
   (extracted 2026-07-13); the rebuild was at `normal`, which is why
   the letters read "further apart". Scoped to the intro text widget.
   ============================================================ */
body.home .elementor-element.elementor-element-0bb5d5e { letter-spacing: -1.5px; }


/* ============================================================
   HEROBOX (Alan) — semi-transparent ink boxes behind the hero
   heading lines, matching the original exactly. Original values
   (extracted 2026-07-13): each line is tiled with the theme image
   bg-black-transparent.png = uniform rgb(61,61,63) @ alpha .85;
   heading (.big-title) padding 15px 40px, sub (.medium-title)
   10px 40px, line-height 1.3, boxes hug the text (width:auto);
   text-shadow 1px 2px 1px rgba(0,0,0,.4). Typography (40px/700 and
   36px/400, letter-spacing normal) already matches and is untouched.
   Replaces the HEROBRIGHTEN glow shadow, which read "thinner" than
   the original's boxed text. Placed at end of file so equal-
   specificity rules here win the cascade.
   ============================================================ */
body.home .seq-hero-inner :is(h1, h2) {
  display: inline-block;
  background: rgba(61, 61, 63, 0.85);
  padding: 15px 40px !important;
  line-height: 1.3 !important;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.4);
}
body.home .seq-hero-inner .seq-hero-sub {
  display: inline-block;
  background: rgba(61, 61, 63, 0.85);
  padding: 10px 40px;
  line-height: 1.3;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.4);
}
/* Mobile: keep the boxes but slim the padding so they fit 390px. */
@media (max-width: 600px) {
  body.home .seq-hero-inner :is(h1, h2) { padding: 10px 18px !important; }
  body.home .seq-hero-inner .seq-hero-sub { padding: 8px 14px; }
}

/* ============================================================
   HEROBOX2 (Alan) — box the remaining bare line on every slide.
   Each slide's plain <p> tagline (the 'p' field in the hero PHP)
   rendered directly on the photo: slide 1 already boxes its heading
   + .seq-hero-sub, but its tagline <p> was still bare, and slides 2-4
   have ONLY a heading box + a bare tagline <p>. Give that plain <p>
   the SAME box as .seq-hero-sub so no line floats bare, matching the
   original (which boxes every text line on every slide). Scoped to
   p:not(.seq-hero-sub) so the already-correct subtitle + heading
   boxes are untouched. End of file = wins the cascade.
   ============================================================ */
body.home .seq-hero-inner p:not(.seq-hero-sub) {
  /* block + fit-content so the box hugs its text AND takes its own line —
     inline-block let the CTA button flow up beside the tagline. Auto side
     margins keep it centred, matching the heading/sub boxes above. */
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: rgba(61, 61, 63, 0.85);
  padding: 10px 40px;
  line-height: 1.3;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
  body.home .seq-hero-inner p:not(.seq-hero-sub) { padding: 8px 14px; }
}


/* ============================================================
   SERVICES BAND MATCH (Alan) — homepage 6-card services section
   restyled to the original (extracted 2026-07-13): light grey band
   rgb(250,250,250); transparent cards; UPPERCASE 15px/600 #212121
   titles (title = link); 13px/400 #606060 body; 12px italic orange
   "More information..." links. Sections: 5e8309d (lead), 39367aa +
   61f7d7d (card rows). Scoped to body.home + section ids.
   ============================================================ */
body.home .elementor-element-5e8309d,
body.home .elementor-element-39367aa,
body.home .elementor-element-61f7d7d {
  background-color: rgb(250, 250, 250) !important;
  background-image: none !important;
}
body.home .elementor-element-39367aa .elementor-widget-wrap,
body.home .elementor-element-61f7d7d .elementor-widget-wrap {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body.home .elementor-element-39367aa h4.elementor-heading-title,
body.home .elementor-element-61f7d7d h4.elementor-heading-title,
body.home .elementor-element-39367aa h4.elementor-heading-title a,
body.home .elementor-element-61f7d7d h4.elementor-heading-title a {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  color: #212121 !important;
}
body.home .elementor-element-39367aa .elementor-widget-text-editor,
body.home .elementor-element-61f7d7d .elementor-widget-text-editor {
  font-size: 13px;
  font-weight: 400;
  color: #606060;
  line-height: 1.6;
}


/* ============================================================
   HERO BAND — BLOG LANDING (page-id-139, template page-design-news.php).
   Transplant of the verified contact-page recipe. Band host is the
   template''s own .seq-blog-header section (that class exists ONLY in
   page-design-news.php / single.php), card is its .seq-wrap. Scoped to
   body.page-id-139 ONLY — never a shared inner-page selector.
   ============================================================ */
body.page-id-139 .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-id-139 .site-header:not(.scrolled) .seq-menu > li > a,
body.page-id-139 .site-header:not(.scrolled) .seq-menu > li > a:link,
body.page-id-139 .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.page-id-139 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.page-id-139 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.page-id-139 .seq-blog-header {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;   /* card offset via section padding, NOT child margin */
  margin-top: -152px;              /* header height — band top lands below the orange topbar */
  position: relative;
  z-index: 0;
}
body.page-id-139 .seq-blog-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.page-id-139 .seq-blog-header > .seq-wrap {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px !important; /* !important: template sets inline padding */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.page-id-139 .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.page-id-139 .site-header:not(.scrolled) .seq-menu > li > a,
  body.page-id-139 .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.page-id-139 .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.page-id-139 .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.page-id-139 .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.page-id-139 .seq-blog-header {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.page-id-139 .seq-blog-header::before { height: 220px; }
  body.page-id-139 .seq-blog-header > .seq-wrap { padding: 28px 18px 12px !important; }
}

/* ============================================================
   HERO BAND — SINGLE BLOG POSTS (body.seq-site.single-post, template
   single.php). Triple-keyed: WP core emits `single-post` only for
   post-type `post` singles; `.seq-site` is our theme''s own body class;
   `.seq-blog-header` exists only in our two blog templates. Exact copy
   of the landing block above with the scope swapped.
   ============================================================ */
body.seq-site.single-post .site-header:not(.scrolled) {
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.seq-site.single-post .site-header:not(.scrolled) .seq-menu > li > a,
body.seq-site.single-post .site-header:not(.scrolled) .seq-menu > li > a:link,
body.seq-site.single-post .site-header:not(.scrolled) .seq-menu > li > a:visited {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 #333;
}
body.seq-site.single-post .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
body.seq-site.single-post .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
  text-shadow: none !important;
}
body.seq-site.single-post .seq-blog-header {
  background: #FFFFFF !important;
  padding: 218px 0 0 !important;
  margin-top: -152px;
  position: relative;
  z-index: 0;
}
body.seq-site.single-post .seq-blog-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 301px;
  background: #FF5100 url('../../uploads/2026/07/brisbane-home-design1.jpg') 0 0 repeat;
  background-size: auto;
}
body.seq-site.single-post .seq-blog-header > .seq-wrap {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 42px 40px 18px !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  body.seq-site.single-post .site-header:not(.scrolled) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--seq-line) !important;
  }
  body.seq-site.single-post .site-header:not(.scrolled) .seq-menu > li > a,
  body.seq-site.single-post .site-header:not(.scrolled) .seq-menu > li > a:link,
  body.seq-site.single-post .site-header:not(.scrolled) .seq-menu > li > a:visited {
    color: #3D3D3F !important;
    text-shadow: none !important;
  }
  body.seq-site.single-post .site-header:not(.scrolled) .seq-menu > li.current-menu-item > a,
  body.seq-site.single-post .site-header:not(.scrolled) .seq-menu > li.current_page_item > a {
    color: #FFFFFF !important;
  }
  body.seq-site.single-post .seq-blog-header {
    margin-top: 0;
    padding: 150px 0 0 !important;
  }
  body.seq-site.single-post .seq-blog-header::before { height: 220px; }
  body.seq-site.single-post .seq-blog-header > .seq-wrap { padding: 28px 18px 12px !important; }
}


/* ============================================================
   CTA BAND MATCH (Alan) — homepage "Call SEQ Building Design" band
   restyled to the original (extracted 2026-07-13): light grey
   rgb(250,250,250) CONTENT-WIDTH block (1170px, like the original''s
   .section.light-grey-margin at 1170x245), not a full-bleed beige
   band. Heading 40px/400 Open Sans #212121 with the phone span in
   orange (span lives in the widget content); body 22px/400 #606060
   centred. !important + stacked classes beat the typography-authority
   800-weight rule, same pattern as P5.
   ============================================================ */
body.home .elementor-element.elementor-element-109d829 {
  background: transparent !important;
  padding: 0 0 60px !important;
}
body.home .elementor-element-109d829 > .elementor-container {
  max-width: 1170px !important; /* Elementor per-section content_width outranks a plain max-width */
  margin: 0 auto;
  background: rgb(250, 250, 250);
  padding: 46px 24px 50px;
}
body.home .elementor-element.elementor-element-87963d8 .elementor-heading-title {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  color: #212121 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: center;
  line-height: 1.3;
}
body.home .elementor-element.elementor-element-ceb77fc,
body.home .elementor-element.elementor-element-ceb77fc p {
  font-size: 22px !important;
  font-weight: 400;
  color: #606060 !important;
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 600px) {
  body.home .elementor-element.elementor-element-87963d8 .elementor-heading-title { font-size: 26px !important; }
  body.home .elementor-element.elementor-element-ceb77fc,
  body.home .elementor-element.elementor-element-ceb77fc p { font-size: 17px !important; }
}


/* ============================================================
   DRAFTSMAN TITLE MATCH (Alan) — "Draftsman Brisbane Home Owners
   and Builders Prefer..." (widget b40069, h3) gets the same orange
   caps treatment as the "We also do..." block (b40073, h4: 24px/700
   #FF5100 uppercase centred, ls -0.36px). Same selector pattern as
   the P5 rule — stacked classes beat the per-widget Elementor rule.
   Scoped to body.page-id-1660 ONLY.
   ============================================================ */
body.page-id-1660 .elementor-element.elementor-element-b40069 h3.elementor-heading-title {
  color: #FF5100;
  text-transform: uppercase;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.36px;
}


/* ============================================================
   GLOBALCOLOR (Alan audit) — remaining band/palette fixes.
   1) Estimate band (0823b5e): light grey, dark text (bg + widget
      colours also changed in the Elementor data; CSS is belt+braces
      for the body copy which inherits).
   2) DCP "Call SEQ Building Design" (section b40048): homepage CTA
      treatment — grey 1170px container, 40px/400 dark heading with
      orange phone span (span set in the widget), 22px grey body.
   3) Gallery (1354t) + Feasibility (b50058) "Call SEQ" bands: they
      carry .seq-cta-band, so the grey band comes from the global
      rule; these overrides give them the homepage 40px/400 heading
      treatment instead of the 28px orange one, per the original.
   ============================================================ */
body.home .elementor-element-0823b5e,
body.home .elementor-element.elementor-element-0823b5e {
  background-color: rgb(250, 250, 250) !important;
}
body.home .elementor-element-0823b5e .elementor-widget-text-editor,
body.home .elementor-element-0823b5e .elementor-widget-text-editor p {
  color: #606060 !important;
}
body.seq-site .elementor-element.elementor-element-b40048 {
  background: transparent !important;
}
body.seq-site .elementor-element-b40048 > .elementor-container {
  max-width: 1170px !important;
  margin: 0 auto;
  background: rgb(250, 250, 250);
  padding: 40px 24px 44px;
}
body.seq-site .elementor-element.elementor-element-b40048 h3.elementor-heading-title {
  font-size: 40px !important;
  font-weight: 400 !important;
  color: #212121 !important;
  text-align: center;
  letter-spacing: normal !important;
}
body.seq-site .elementor-element-b40048 .elementor-widget-text-editor,
body.seq-site .elementor-element-b40048 .elementor-widget-text-editor p {
  font-size: 22px !important;
  color: #606060 !important;
  text-align: center;
}
.elementor-element-1354t.seq-cta-band,
.elementor-element-b50058.seq-cta-band {
  background: rgb(250, 250, 250);
}
.elementor-element-1354t.seq-cta-band h2,
.elementor-element-b50058.seq-cta-band h2 {
  color: #212121;
  font-size: 40px;
  font-weight: 400;
}
.elementor-element-1354t.seq-cta-band p,
.elementor-element-b50058.seq-cta-band p {
  font-size: 22px;
}
@media (max-width: 600px) {
  body.seq-site .elementor-element.elementor-element-b40048 h3.elementor-heading-title,
  .elementor-element-1354t.seq-cta-band h2,
  .elementor-element-b50058.seq-cta-band h2 { font-size: 26px !important; }
}

/* ============================================================
   GALLERY LIGHTBOX ARROWS (Alan, R2 ARROWS) — make Elementor's
   NATIVE lightbox navigation discoverable. The prev/next buttons
   already exist as wide (15%) invisible hit-zones holding only a
   faint 90%-white chevron with NO scrim — unreadable on light
   photos, which is why Alan couldn't tell he could browse. Give the
   chevron a solid dark circular scrim (white ring + shadow) so it
   reads on ANY photo, always shown (not hover-only), desktop + mobile;
   pin it to the outer edge, vertically centred, so it never covers the
   subject. Enlarge the counter into a prominent pill. A gentle
   double-pulse on open doubles as the "you can browse" hint (pure CSS,
   replays because Elementor builds the lightbox fresh each open).
   Lightbox is appended to <body> → global; only the gallery uses it.
   !important because Elementor's own lightbox CSS otherwise ties/wins.
   Swipe (Swiper touch) + keyboard (Swiper keyboard) are native — kept.
   ============================================================ */
/* Elementor renders these buttons as full-height side strips positioned
   top:50% of the swiper container — which is TALLER than the viewport, so
   they land off-screen. Pin them fixed and centre to the viewport so the
   circle always sits mid-screen at the left/right edge, on any photo size. */
.elementor-lightbox .elementor-swiper-button {
  position: fixed !important;
  top: 50% !important;
  bottom: auto !important;
  height: auto !important;
  width: auto !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  z-index: 99999 !important;
}
.elementor-lightbox .elementor-swiper-button-prev { left: 8px !important; right: auto !important; }
.elementor-lightbox .elementor-swiper-button-next { right: 8px !important; left: auto !important; }

.elementor-lightbox .elementor-swiper-button svg,
.elementor-lightbox .elementor-swiper-button i {
  box-sizing: content-box !important;
  width: 22px !important;
  height: 22px !important;
  padding: 13px !important;                 /* 22 + 2x13 = 48px circle */
  border-radius: 50% !important;
  background: rgba(15, 15, 15, .55) !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .5) !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  font-size: 22px !important;
  line-height: 22px !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: seqArrowHint 1s ease 2;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.elementor-lightbox .elementor-swiper-button:hover svg,
.elementor-lightbox .elementor-swiper-button:hover i,
.elementor-lightbox .elementor-swiper-button:focus svg,
.elementor-lightbox .elementor-swiper-button:focus i {
  background: rgba(255, 81, 0, .92) !important;
  border-color: rgba(255, 255, 255, .85) !important;
  transform: scale(1.08);
}
@keyframes seqArrowHint {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.16); }
}

.elementor-lightbox .elementor-slideshow__counter {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  color: #FFFFFF !important;
  background: rgba(15, 15, 15, .55) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  width: auto !important;
  min-width: 54px !important;
  text-align: center !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45) !important;
}

@media (max-width: 600px) {
  .elementor-lightbox .elementor-swiper-button-prev { left: 3px !important; }
  .elementor-lightbox .elementor-swiper-button-next { right: 3px !important; }
  .elementor-lightbox .elementor-swiper-button svg,
  .elementor-lightbox .elementor-swiper-button i {
    width: 20px !important; height: 20px !important; padding: 11px !important;  /* 42px */
  }
  .elementor-lightbox .elementor-slideshow__counter { font-size: 16px !important; }
}