/* =============================================================
   Titan Premium Flooring — brand styling on top of Elementor.

   These rules mirror the React design tokens from src/index.css.
   Selectors target Elementor's emitted classnames so the styling
   applies to widgets created by the home.json import without
   editing each widget by hand.

   Priority order: this file loads at wp_enqueue_scripts(100), so
   it comes AFTER Elementor's frontend.min.css (priority ~9) and
   AFTER per-post stylesheets, letting us win on specificity ties.
   We use !important only on truly stubborn Elementor defaults
   (font-family, button background) — never on layout.
   ============================================================= */

:root {
  --titan-charcoal:   #2B2B2B;
  --titan-cream:      #F4EEDF;
  --titan-gold:       #B49883;
  --titan-offwhite:   #F8F5EF;
  --titan-warm-bg:    #F5F1EB;
  --titan-muted-fg:   #737373;
  --titan-border:     #DAD4CA;
  --titan-dark:       #262626;
}

/* -- Body & body-text widgets ----------------------------------- */

body,
body.elementor-default {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  color: var(--titan-charcoal);
  background: var(--titan-warm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 300;
  line-height: 1.8;
}

/* -- Headings: Playfair Display --------------------------------- */
/* Font-family and weight come from this plugin (they're invariants
   across the site). Font-size and color come from each widget's
   own settings in Elementor — leave those alone so per-widget
   tweaks (e.g. 96px cream hero h1) win the cascade. Previously this
   block force-cast every heading to charcoal and clamped h1 to 84px,
   which made the hero render dark + undersized. */

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-weight: 500;
  line-height: 1.15;
}

/* "div" header_size — used for the eyebrow labels and the italic
   tagline. We narrow the Playfair override here so eyebrows get
   Inter, while the italic Playfair tagline keeps its serif. */
.elementor-widget-heading .elementor-heading-title[style*="letter-spacing"] {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500;
}

/* The hero italic tagline uses Playfair via inline styles set in
   the generator — let it stay serif by being explicit. */
.elementor-widget-heading .elementor-heading-title[style*="font-style"] {
  font-family: 'Playfair Display', serif !important;
  font-style: italic;
}

/* -- Eyebrow labels (10px / 0.4em tracking / uppercase / gold) -- */

/* Most eyebrows are heading widgets with header_size="div", colour
   set per-widget in the JSON (gold for most sections, cream for the
   hero over the dark image). Don't force a color here — that would
   make the hero eyebrow render gold against a dark image when it
   should be cream. Reinforce only the tracking/size/transform. */
.elementor-widget-heading .elementor-heading-title[style*="letter-spacing: 0.4em"],
.elementor-widget-heading .elementor-heading-title[style*="letter-spacing:0.4em"] {
  font-size: 10px !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase;
  font-weight: 500;
}

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

.elementor-widget-button .elementor-button {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 16px 48px;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  line-height: 1;
}

.elementor-widget-button .elementor-button:hover {
  opacity: 0.9;
}

/* -- Icon-box widget (Features + Applications grids) ------------ */

.elementor-widget-icon-box .elementor-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--titan-border);
  border-radius: 50%;
  transition: border-color 0.3s, background-color 0.3s;
  margin-bottom: 16px;
}

.elementor-widget-icon-box .elementor-icon:hover {
  border-color: var(--titan-gold);
  background: rgba(180, 152, 131, 0.06);
}

.elementor-widget-icon-box .elementor-icon i,
.elementor-widget-icon-box .elementor-icon svg {
  color: var(--titan-gold);
  fill: var(--titan-gold);
  font-size: 22px;
  width: 22px;
  height: 22px;
}

.elementor-widget-icon-box .elementor-icon-box-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--titan-charcoal);
  margin-top: 0;
}

.elementor-widget-icon-box .elementor-icon-box-description {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--titan-muted-fg);
  line-height: 1.6;
}

/* -- Dividers --------------------------------------------------- */

.elementor-widget-divider .elementor-divider-separator {
  border-top-color: var(--titan-gold) !important;
  opacity: 0.4;
}

/* -- Sections / containers -------------------------------------- */

/* Honour our padding intent on boxed containers. Hello Elementor
   sometimes pulls these in too tight on smaller screens. */
.elementor-element.e-con-boxed > .e-con-inner,
.e-con > .e-con-inner {
  max-width: 1200px;
}

/* Force boxed sections to honour our intended max-width even when
   Elementor's container settings get overridden by user edits. */
.elementor-section-boxed > .elementor-container {
  max-width: 1200px;
}

/* -- Hero background overlay & legibility ----------------------- */

/* Elementor's container model (e-con) only paints a background
   overlay via a ::before pseudo-element when its OWN frontend CSS
   provides content/position/inset. With Hello Elementor active and
   the widget-* stylesheets minimised, those base rules sometimes
   don't ship — so the per-element rule that sets the overlay's
   color (e.g. `linear-gradient(rgba(43,43,43,0.6)...)`) paints
   nothing because the pseudo-element never renders.

   This block makes ANY e-con-* container with a background image
   render its ::before overlay reliably: positioned absolute, full
   inset, behind the content stack, and on top of the bg image. */

.elementor-element.e-con[style*="background-image"],
.elementor-element.e-con-full[style*="background-image"],
.elementor-element.e-con-boxed[style*="background-image"],
.elementor-element[data-settings*="background_image"] {
  position: relative;
}

.elementor-element.e-con[style*="background-image"]::before,
.elementor-element.e-con-full[style*="background-image"]::before,
.elementor-element.e-con-boxed[style*="background-image"]::before,
.elementor-element[data-settings*="background_overlay_background"]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Hoist widgets above the overlay (containers stack as flex, so
   children sit at z-index auto by default and disappear under the
   overlay if we don't lift them). */
.elementor-element.e-con > .e-con-inner,
.elementor-element.e-con > .elementor-widget,
.elementor-element.e-con-full > .e-con-inner,
.elementor-element.e-con-full > .elementor-element {
  position: relative;
  z-index: 1;
}

/* -- Spacer fixes ---------------------------------------------- */

/* On phones, collapse big spacers to ~60% of desktop to keep
   the page from feeling sparse. */
@media (max-width: 768px) {
  .elementor-widget-spacer .elementor-spacer-inner {
    height: calc(var(--spacer-size, 24px) * 0.7);
  }
}

/* -- Typography responsive cleanup ------------------------------ */

@media (max-width: 768px) {
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: 40px;
    line-height: 1.1;
  }
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: 30px;
  }
}

/* -- Product cards (Collections section) ----------------------- */

/* Cards live inside an inner container with a white background — give
   them a subtle hover lift for the modern editorial feel from React. */
.elementor-element.e-con-boxed.elementor-element-edit-mode-active,
.elementor-element.e-con-boxed[style*="background-color:#FFFFFF"] {
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

/* -- Footer / header z-index sanity ---------------------------- */

header.elementor-location-header,
.elementor-location-header {
  z-index: 100;
}

/* -- Suppress Hello Elementor's default chrome ----------------- */
/* The titan-style.php plugin unhooks `hello_elementor_do_header`
   and `hello_elementor_do_footer`, but some Hello versions inline
   the wrapper markup rather than going through the action. Hide
   the wrappers here too so we are resilient to that. */
.site-header.dynamic-header,
.site-footer.dynamic-footer {
  display: none !important;
}

/* Hello Elementor also renders an automatic page header
   (`<div class="page-header"><h1 class="entry-title">About</h1>`)
   above the Elementor content on internal pages. The Elementor
   design already provides its own hero heading, so this default
   one duplicates the title and looks unintentional. Suppress it. */
body:not(.home) .page-header,
.page-content > .page-header {
  display: none !important;
}

/* -- Injected branded header (rendered at wp_body_open) -------- */
/* The PHP plugin prints `<header class="titan-injected-header">`
   with a logo on the left and a nav on the right. It starts
   transparent over the dark hero and switches to an opaque cream
   backdrop once the user scrolls past 80px (the JS toggle adds
   .titan-scrolled). */

.titan-injected-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
  padding: 20px 0;
}

.titan-injected-header.titan-scrolled {
  background: rgba(245, 241, 235, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  padding: 12px 0;
}

/* On non-home pages there is no dark hero behind the header, so a
   transparent bar is invisible against the light page bg. Treat
   the header as permanently "scrolled" (cream backdrop, dark logo,
   charcoal nav) on those pages, regardless of scroll position. */
body:not(.home) .titan-injected-header {
  background: rgba(245, 241, 235, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  padding: 12px 0;
}

.titan-injected-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.titan-injected-header-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.titan-injected-header-logo img {
  height: 104px;
  width: auto;
  display: block;
  transition: height 0.3s ease, filter 0.4s ease;
}

/* Over the dark hero, the logo art (light-on-transparent) reads
   well as-is. Once the header gains its cream background, invert
   the logo so the dark wordmark sits on light. */
.titan-injected-header.titan-scrolled .titan-injected-header-logo img,
body:not(.home) .titan-injected-header .titan-injected-header-logo img {
  height: 80px;
  filter: brightness(0) saturate(100%);
}

.titan-injected-header-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.titan-injected-header-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 238, 223, 0.85);
  text-decoration: none;
  transition: color 0.3s ease;
}

.titan-injected-header.titan-scrolled .titan-injected-header-nav a,
body:not(.home) .titan-injected-header .titan-injected-header-nav a {
  color: var(--titan-charcoal);
}

.titan-injected-header-nav a:hover {
  color: var(--titan-gold);
}

@media (max-width: 880px) {
  .titan-injected-header-inner {
    padding: 0 20px;
    gap: 16px;
  }
  .titan-injected-header-logo img {
    height: 72px;
  }
  .titan-injected-header.titan-scrolled .titan-injected-header-logo img {
    height: 56px;
  }
  .titan-injected-header-nav {
    gap: 18px;
  }
  .titan-injected-header-nav a {
    font-size: 9px;
    letter-spacing: 0.15em;
  }
}

@media (max-width: 560px) {
  /* On narrow phones the four nav links won't fit alongside the
     logo. Hide nav and lean on a brand-only header. A hamburger
     pattern is intentionally deferred — the React site uses one
     and we can wire it later if needed. */
  .titan-injected-header-nav {
    display: none;
  }
}

/* -- Hide WP admin bar offset for cleaner hero ----------------- */

html[lang] {
  margin-top: 0 !important;
}
* html body {
  margin-top: 0 !important;
}

/* =============================================================
   Helper classes referenced by home.json via _css_classes / IDs.
   Without these the home page renders with full-bleed paragraphs,
   wrong image aspect ratios, an unstyled thickness pill, and a
   header that doesn't sit on top of the hero correctly.
   ============================================================= */

/* -- Image aspect ratios --------------------------------------- */

.elementor-widget-image.titan-aspect-4-5 img,
.titan-aspect-4-5 .elementor-image img,
.titan-aspect-4-5 img {
  aspect-ratio: 4 / 5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.elementor-widget-image.titan-aspect-3-4 img,
.titan-aspect-3-4 .elementor-image img,
.titan-aspect-3-4 img {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@supports not (aspect-ratio: 1 / 1) {
  .titan-aspect-4-5 img { height: 500px; }
  .titan-aspect-3-4 img { height: 480px; }
}

/* -- Body-copy max widths -------------------------------------- */

.titan-text-maxw-672 > .elementor-widget-container,
.titan-text-maxw-672 .elementor-widget-container {
  max-width: 672px;
  margin-left: auto;
  margin-right: auto;
}

.titan-text-maxw-576 > .elementor-widget-container,
.titan-text-maxw-576 .elementor-widget-container {
  max-width: 576px;
  margin-left: auto;
  margin-right: auto;
}

/* -- Thickness pill (6MM / 7MM next to product names) ---------- */

.titan-pill {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: rgba(180, 152, 131, 0.12);
  color: var(--titan-gold);
  padding: 4px 12px;
  line-height: 1.4;
  vertical-align: middle;
}

/* -- Fixed header & spacer ------------------------------------- */
/* Elementor renders the header with inline position:fixed via its
   own data-settings. We supply the rest: z-index, transparency over
   the dark hero, and a sensible logo size. The empty spacer keeps a
   0 min-height so the hero can sit underneath the fixed bar. */

#titan-header {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: transparent !important;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

body.titan-scrolled #titan-header,
#titan-header.titan-scrolled {
  background: rgba(245, 241, 235, 0.95) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

#titan-header .elementor-widget-image img {
  height: 96px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  #titan-header .elementor-widget-image img {
    height: 64px;
  }
}

#titan-header-spacer {
  min-height: 0;
  padding: 0;
}

/* =============================================================
   Page-12 section grid layouts.

   The home.json importer sets `width: 32%` etc. on inner
   containers, but Elementor's 4.0 container model doesn't
   translate that to compiled CSS — it only emits flex-direction
   variables. Result: every child stacks vertically.

   We fix that by force-applying flex-row + percentage widths to
   the *grid* sub-container of each known section. IDs below are
   stable in the live DB (page-12) — when home.json is re-imported
   the IDs regenerate and these rules need updating, or move to
   class-based selectors via _css_classes on each grid.
   ============================================================= */

/* === Brand Intro (Flooring Designed for Modern Spaces) =========
   Section 972f3ff5 — image left, text right. */
@media (min-width: 992px) {
  .elementor-element-972f3ff5 > .e-con-inner > .elementor-element.e-con > .e-con-inner {
    flex-direction: row !important;
    align-items: center !important;
    gap: 48px !important;
  }
  .elementor-element-972f3ff5 > .e-con-inner > .elementor-element.e-con > .e-con-inner > .elementor-element.e-con {
    flex: 1 1 0 !important;
  }
}

/* === Collections (Discover the Titan Collections) ==============
   Targets the actual card IDs in page-12 because Elementor sets
   --container-widget-width:100% on each card via its own per-element
   CSS — descendant selectors lose by specificity, so we hit the IDs
   directly. Grid wrapper (01d60216) needs flex-wrap forced too. */

/* Section header (4efd1b93 = Collections title container). The
   eyebrow + h2 are emitted with per-widget colours and sizes via
   Elementor's compiled post-12.css, so we only need to make sure
   the heading container itself stretches full width and centers
   its children. Previously the inner container was inheriting
   the parent's flex-start and the heading floated left. */
.elementor-element-4efd1b93 > .e-con-inner {
  align-items: center;
  text-align: center;
  margin: 0 auto 48px;
}

.elementor-element-01d60216 > .e-con-inner {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 32px !important;
}

@media (min-width: 992px) {
  .elementor-element-855ebe33,
  .elementor-element-a9155e06,
  .elementor-element-ff0e4dc3 {
    --container-widget-width: calc(33.333% - 22px);
    --container-widget-flex-grow: 0;
    width: calc(33.333% - 22px) !important;
    max-width: calc(33.333% - 22px) !important;
    flex: 0 0 calc(33.333% - 22px) !important;
  }
}

@media (min-width: 600px) and (max-width: 991px) {
  .elementor-element-855ebe33,
  .elementor-element-a9155e06,
  .elementor-element-ff0e4dc3 {
    width: calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
    flex: 0 0 calc(50% - 16px) !important;
  }
}

/* === Features (Built for Beauty. Engineered for Performance.) ==
   Grid wrapper is 850c320b. 8 cells: 6c7ef10c, b9af8f3d, ee43d974,
   393c5a28, a0eb9d54, ebf2c2e9, 5623152c, 4bff9346.
   4-col desktop, 2-col tablet/mobile. */

.elementor-element-850c320b > .e-con-inner {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 40px 24px !important;
}

@media (min-width: 992px) {
  .elementor-element-6c7ef10c,
  .elementor-element-b9af8f3d,
  .elementor-element-ee43d974,
  .elementor-element-393c5a28,
  .elementor-element-a0eb9d54,
  .elementor-element-ebf2c2e9,
  .elementor-element-5623152c,
  .elementor-element-4bff9346 {
    --container-widget-width: calc(25% - 18px);
    --container-widget-flex-grow: 0;
    width: calc(25% - 18px) !important;
    max-width: calc(25% - 18px) !important;
    flex: 0 0 calc(25% - 18px) !important;
    text-align: center;
  }
}

@media (min-width: 600px) and (max-width: 991px) {
  .elementor-element-6c7ef10c,
  .elementor-element-b9af8f3d,
  .elementor-element-ee43d974,
  .elementor-element-393c5a28,
  .elementor-element-a0eb9d54,
  .elementor-element-ebf2c2e9,
  .elementor-element-5623152c,
  .elementor-element-4bff9346 {
    width: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    flex: 0 0 calc(50% - 12px) !important;
    text-align: center;
  }
}

/* === Technology (Uniclic Locking Technology) ===================
   Section 6eb71f49 — text left, diagram right (2-col desktop). */
@media (min-width: 992px) {
  .elementor-element-6eb71f49 > .e-con-inner > .elementor-element.e-con > .e-con-inner {
    flex-direction: row !important;
    align-items: center !important;
    gap: 64px !important;
  }
  .elementor-element-6eb71f49 > .e-con-inner > .elementor-element.e-con > .e-con-inner > .elementor-element.e-con {
    flex: 1 1 0 !important;
  }
}

/* === Theme Builder header & footer ===========================
   Styles for the new Pro header/footer templates imported by the
   titan-theme-builder plugin. The header is .titan-site-header,
   footer is .titan-site-footer. */

.titan-site-header {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.titan-site-header .elementor-widget-image img.titan-site-logo,
.titan-site-header .titan-site-logo img {
  max-height: 96px;
  width: auto;
  display: block;
}

/* Nav inside the header (rendered as an HTML widget) */
.titan-nav {
  display: flex;
  gap: 40px;
  align-items: center;
}

.titan-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--titan-muted-fg);
  text-decoration: none;
  transition: color 0.3s ease;
}

.titan-nav a:hover {
  color: var(--titan-gold);
}

@media (max-width: 768px) {
  .titan-nav {
    gap: 16px;
  }
  .titan-nav a {
    font-size: 10px;
    letter-spacing: 0.15em;
  }
}

/* Footer */
.titan-site-footer {
  color: rgba(244, 238, 223, 0.7);
}

.titan-site-footer .elementor-heading-title {
  color: var(--titan-gold) !important;
}

.titan-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.titan-footer-list li {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(244, 238, 223, 0.7);
}

.titan-footer-list a {
  color: rgba(244, 238, 223, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.titan-footer-list a:hover {
  color: var(--titan-cream);
}

/* Force the footer's 3-column row to actually be 3 columns on desktop. */
@media (min-width: 992px) {
  .titan-footer-cols {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  .titan-footer-cols > .titan-footer-col {
    flex: 1 1 0 !important;
  }
}

/* === Site-wide injected footer (rendered at wp_footer) =========
   titan-style.php prints a <footer class="titan-injected-footer">
   on every front-end page. This is the single source of truth for
   the brand footer so About / Contact / Uniclic also get one. The
   homepage's old in-page footer (b9547f77) is hidden below to
   avoid a double footer. */

.titan-injected-footer {
  background-color: var(--titan-dark);
  color: rgba(244, 238, 223, 0.7);
  padding: 80px 0 32px;
  font-family: 'Inter', sans-serif;
}

.titan-injected-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.titan-injected-footer-cols {
  display: flex;
  gap: 80px;
}

@media (max-width: 767px) {
  .titan-injected-footer-cols {
    flex-direction: column;
    gap: 40px;
  }
}

.titan-injected-footer-brand {
  flex: 2 1 0;
  min-width: 0;
}

.titan-injected-footer-brand img {
  height: 80px;
  width: auto;
  display: block;
  margin: 0 0 24px;
}

.titan-injected-footer-brand p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(246, 242, 232, 0.5);
  max-width: 320px;
  margin: 0;
}

.titan-injected-footer-col {
  flex: 1 1 0;
  min-width: 0;
}

.titan-injected-footer-col h4 {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--titan-gold);
  margin: 0 0 24px 0;
}

.titan-injected-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.titan-injected-footer-col li {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(246, 242, 232, 0.7);
}

.titan-injected-footer-col a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(246, 242, 232, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.titan-injected-footer-col a:hover {
  color: #F6F2E8;
}

.titan-injected-footer-copyright {
  border-top: 1px solid rgba(246, 242, 232, 0.1);
  margin-top: 48px;
  padding-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}

.titan-injected-footer-copyright p {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(246, 242, 232, 0.35);
  margin: 0;
}

/* Hide the homepage's in-page footer (b9547f77) — the wp_footer
   action above renders the global one now, and showing both
   produces a double footer on the home page. */
body.home .elementor-element-b9547f77 {
  display: none !important;
}

/* === Footer (page-12 in-content footer) ========================
   Structure:
     b9547f77 (outer dark container, full-bleed)
       61f7e601 (boxed inner)
         8d656c3d (3-column row)           ← needs flex-row
           e6e8071f (col 1: logo + tagline)
           b2e6fb1d (col 2: NAVIGATION)
           8e5a9644 (col 3: COLLECTIONS)
         15d4d8f0 (copyright bar, inline-styled)

   Without these rules every container is `flex-direction:column`
   by default (Elementor container default), so the three columns
   stack into a single tall column on desktop — which is what the
   user reported. We also re-assert the dark background on the
   outer container since the home.json importer's inline style
   sometimes loses to per-element CSS that resets background. */

.elementor-element-b9547f77 {
  background-color: var(--titan-dark) !important;
  color: rgba(244, 238, 223, 0.7);
  padding: 80px 0 32px;
}

.elementor-element-61f7e601 > .e-con-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

/* 3-column row on desktop, single column on mobile. */
@media (min-width: 768px) {
  .elementor-element-8d656c3d > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 80px !important;
  }
  .elementor-element-e6e8071f {
    flex: 2 1 0 !important;
    min-width: 0;
  }
  .elementor-element-b2e6fb1d,
  .elementor-element-8e5a9644 {
    flex: 1 1 0 !important;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .elementor-element-8d656c3d > .e-con-inner {
    flex-direction: column !important;
    gap: 40px !important;
  }
}

/* Tagline column logo: keep at footer scale. Inline style on the
   <img> sets 56px but the home.json importer sometimes loses it
   when re-imported, so re-assert here. */
.elementor-element-e6e8071f img {
  height: 80px !important;
  width: auto !important;
  margin-bottom: 24px !important;
}

/* Copyright bar already has inline styles for flex/space-between;
   just make sure it stretches the full row on desktop. */
.elementor-element-15d4d8f0 {
  width: 100%;
  margin-top: 48px;
}

/* === Non-home pages: clear the fixed header ====================
   The home page hero has min-height:100vh and the header sits
   transparently over its dark background — no offset needed. On
   inner pages (About / Contact / Uniclic / 404) the page content
   starts immediately, so the fixed header (104px logo + 40px
   padding ≈ 144px) overlaps the top of the page. Add body
   padding-top there so content begins below the header. */

body:not(.home) {
  padding-top: 120px;
}

@media (max-width: 880px) {
  body:not(.home) {
    padding-top: 96px;
  }
}

/* === About page (post-15) layout fixes =========================
   The home.json-style importer produced four e-parent sections
   for About:
     d40b86f2 / 0ac30a32  → Hero (eyebrow + h1 + divider + body)
     f69fa027 / 76b6106c  → Image (21:9)
     86f679f9             → Philosophy (eyebrow + h2 + 3-card grid)
       a2ee1021             header
       f6746098             grid (7e5f3fc7 / b9ff53f4 / f5d4eea8)
     4c2a1662 / ccc9c562  → Quality (2-col: copy + 4:5 image)
       b11e1158             left copy column
       3027e0c9             right image column

   Without these rules Elementor's default flex-direction:column
   makes the philosophy grid stack into a single tall column and
   the quality 2-col section stacks vertically. We also re-pull
   the hero to left-align (the heading widget defaults to centred
   alignment via the section centre-align rule). */

/* Hero — section padding + left-align */
.elementor-element-d40b86f2 {
  padding: 64px 0 96px !important;
}
@media (max-width: 991px) {
  .elementor-element-d40b86f2 {
    padding: 32px 0 64px !important;
  }
}

.elementor-element-0ac30a32 > .e-con-inner {
  align-items: flex-start;
  text-align: left;
}

/* Specific override: the eyebrow and h1 widgets inherit the
   container's flex-align — make sure they sit left and use a
   reasonable max width like the React reference (max-w-3xl ≈
   768px for the h1, max-w-2xl ≈ 672px for the body). */
.elementor-element-52c254cc .elementor-widget-container,
.elementor-element-7ae3c534 .elementor-widget-container,
.elementor-element-0e506b2a .elementor-widget-container,
.elementor-element-a19f3b02 .elementor-widget-container,
.elementor-element-00f7baf5 .elementor-widget-container {
  text-align: left;
  max-width: 768px;
  margin-left: 0;
  margin-right: auto;
}

.elementor-element-a19f3b02 .elementor-widget-container,
.elementor-element-00f7baf5 .elementor-widget-container {
  max-width: 672px;
}

/* The divider sits between heading + body. Constrain it to a
   short gold line like the React `w-16 h-[1px] bg-primary/40`. */
.elementor-element-0e506b2a .elementor-divider {
  text-align: left;
}
.elementor-element-0e506b2a .elementor-divider-separator {
  width: 64px;
  max-width: 64px;
  border-top: 1px solid var(--titan-gold) !important;
  opacity: 0.4;
  display: inline-block;
}

/* Image section — padding bottom */
.elementor-element-f69fa027 {
  padding: 0 0 96px !important;
}

/* Philosophy section — cream bg, big padding, header centered,
   3-card grid */
.elementor-element-86f679f9 {
  background-color: var(--titan-cream) !important;
  padding: 96px 0 !important;
}
@media (max-width: 991px) {
  .elementor-element-86f679f9 {
    padding: 64px 0 !important;
  }
}

.elementor-element-a2ee1021 > .e-con-inner {
  align-items: center;
  text-align: center;
  max-width: 768px;
  margin: 0 auto 56px;
}
.elementor-element-be257d3d .elementor-widget-container,
.elementor-element-c1354715 .elementor-widget-container {
  text-align: center;
}

/* 3-card grid */
@media (min-width: 768px) {
  .elementor-element-f6746098 > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 64px !important;
  }
  .elementor-element-7e5f3fc7,
  .elementor-element-b9ff53f4,
  .elementor-element-f5d4eea8 {
    flex: 1 1 0 !important;
    min-width: 0;
  }
}
@media (max-width: 767px) {
  .elementor-element-f6746098 > .e-con-inner {
    flex-direction: column !important;
    gap: 48px !important;
  }
}

/* Quality section — 2-col layout (copy + image) */
.elementor-element-4c2a1662 {
  padding: 96px 0 !important;
}
@media (max-width: 991px) {
  .elementor-element-4c2a1662 {
    padding: 64px 0 !important;
  }
}

@media (min-width: 992px) {
  .elementor-element-ccc9c562 > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 80px !important;
  }
  .elementor-element-b11e1158,
  .elementor-element-3027e0c9 {
    flex: 1 1 0 !important;
    min-width: 0;
  }
}
@media (max-width: 991px) {
  .elementor-element-ccc9c562 > .e-con-inner {
    flex-direction: column !important;
    gap: 48px !important;
  }
}

/* Left column heading + divider left-aligned */
.elementor-element-b11e1158 > .e-con-inner {
  align-items: flex-start;
}
.elementor-element-a423bf91 .elementor-divider {
  text-align: left;
}
.elementor-element-a423bf91 .elementor-divider-separator {
  width: 48px;
  max-width: 48px;
  border-top: 1px solid var(--titan-gold) !important;
  opacity: 0.4;
  display: inline-block;
}

/* === Applications (Perfect for Residential and Commercial) =====
   Grid wrapper 34d8fdf8, cells: ede29666, d77eeb4b, 553b8fea,
   886f26e2, 2353db7a, aede6c9a. 6-col desktop, 3 tablet, 2 mobile. */

.elementor-element-34d8fdf8 > .e-con-inner {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 16px !important;
}

@media (min-width: 992px) {
  .elementor-element-ede29666,
  .elementor-element-d77eeb4b,
  .elementor-element-553b8fea,
  .elementor-element-886f26e2,
  .elementor-element-2353db7a,
  .elementor-element-aede6c9a {
    --container-widget-width: calc(16.666% - 14px);
    --container-widget-flex-grow: 0;
    width: calc(16.666% - 14px) !important;
    max-width: calc(16.666% - 14px) !important;
    flex: 0 0 calc(16.666% - 14px) !important;
    text-align: center;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .elementor-element-ede29666,
  .elementor-element-d77eeb4b,
  .elementor-element-553b8fea,
  .elementor-element-886f26e2,
  .elementor-element-2353db7a,
  .elementor-element-aede6c9a {
    width: calc(33.333% - 12px) !important;
    max-width: calc(33.333% - 12px) !important;
    flex: 0 0 calc(33.333% - 12px) !important;
  }
}

@media (max-width: 767px) {
  .elementor-element-ede29666,
  .elementor-element-d77eeb4b,
  .elementor-element-553b8fea,
  .elementor-element-886f26e2,
  .elementor-element-2353db7a,
  .elementor-element-aede6c9a {
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    flex: 0 0 calc(50% - 8px) !important;
  }
}