/* ============================================================
   FLATFORM LANDING v4 — Art Direction v2 (approved 20 Sept 2026)
   Loaded after ff-brand.css. Brand colours only:
   #1C5831 #1D4421 #242824 #000000 #FFFFFF #F3F4F1
   ============================================================ */

:root { --ff-gl: max(24px, calc((100vw - 1240px) / 2)); }

/* Display cut on every display heading, whatever its tag. */
.ff-display .elementor-heading-title { font-stretch: extra-condensed; }

/* 02 — the three "may change" lines step back in weight. */
.ff-fade1 { opacity: .5; }
.ff-fade2 { opacity: .28; }

/* ---------- 01 Hero plate: green, bottom edge, crossing the seam ---------- */
.ff-plate4 { background: #1C5831; }
.ff-panel > .elementor-element.ff-overlay--hero4,
.ff-overlay--hero4 { left: calc(-1 * var(--ff-overlap)); top: auto; width: 340px; }

/* ---------- Scrims (sit between photo z0 and copy z2) ---------- */
.ff-scrim-b::after, .ff-scrim-l::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.ff-scrim-b::after { background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.86) 100%); }
.ff-scrim-l::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.40) 42%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
}

/* ---------- Angled cuts (desktop only) ---------- */
@media (min-width: 1025px) {
  .ff-cut   { clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%); }
  .ff-cut-r { clip-path: polygon(0 0, 100% 0, calc(100% - 80px) 100%, 0 100%); }
}

/* ---------- 04 The new way to build: bands on a continuous rail ---------- */
.ff-band { border-top: 1px solid rgba(255,255,255,.12); }
.ff-band--last { border-top: 0; }
.ff-rail { position: relative; padding-left: calc(var(--ff-gl) + 48px) !important; }
.ff-rail::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--ff-gl) + 7px); width: 3px; background: rgba(255,255,255,.18);
}
.ff-rail::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--ff-gl) + 1px); width: 15px; height: 15px; background: #1C5831;
}
.ff-band--last .ff-rail::before { background: rgba(255,255,255,.42); }
.ff-band--last .ff-rail::after { background: #FFFFFF; }
.ff-cap .elementor-heading-title {
  display: inline-block; background: rgba(0,0,0,.8); padding: 8px 12px;
}
.ff-lede-dark p { margin: 0; color: #C9CEC7; font-size: 20px; line-height: 1.6; max-width: 40ch; }
.ff-lede-dark strong { color: #FFFFFF; font-weight: 700; }

/* ---------- 05 Configurations: a product family ---------- */
.ff-spec-grid.e-con-full,
.ff-spec-grid > .e-con-inner {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.ff-spec-grid > .ff-spec { width: auto !important; }
.ff-spec { border-top: 10px solid #1C5831 !important; }
.ff-spec-tag { margin-top: 14px !important; }
.ff-spec-list { margin: 30px 0 0; border-top: 3px solid #1C5831; }
.ff-spec-list > div {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px;
  padding: 16px 0; border-bottom: 1px solid rgba(36,40,36,.18);
}
.ff-spec-list dt {
  font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: #1C5831; padding-top: 4px;
}
.ff-spec-list dd { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: #242824; }
.ff-spec-fit { margin-top: auto !important; padding-top: 26px; }
.ff-fit summary, .ff-faq summary { list-style: none; cursor: pointer; }
.ff-fit summary::-webkit-details-marker, .ff-faq summary::-webkit-details-marker { display: none; }
.ff-fit summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0 4px; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: #242824;
}
.ff-fit summary::after, .ff-faq summary::after { content: "+"; color: #1C5831; font-size: 24px; line-height: 1; font-weight: 400; }
.ff-fit[open] summary::after, .ff-faq details[open] summary::after { content: "\2013"; }
.ff-fit p { margin: 12px 0 8px; font-size: 14px; color: #242824; }
.ff-fit ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.65; color: #242824; }

/* ---------- 06 Application ribbons ---------- */
.ff-ribbon p {
  margin: 0; max-width: 760px; font-family: 'Noto Sans', sans-serif; font-weight: 700;
  font-size: 15px; line-height: 1.9; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF;
}
.ff-ribbon i { font-style: normal; padding: 0 .55em; color: rgba(255,255,255,.45); }
#residential .ff-ribbon p { color: #242824; max-width: 34em; }
#residential .ff-ribbon i { color: #1C5831; }

/* ---------- 07 Repeatable growth ---------- */
.ff-grow {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 22px;
  font-family: 'Noto Sans Display', sans-serif; font-weight: 900; font-style: italic;
  font-stretch: extra-condensed; text-transform: uppercase; line-height: .9;
}
.ff-grow span:nth-child(1) { font-size: 36px; color: rgba(255,255,255,.3); }
.ff-grow span:nth-child(2) { font-size: 60px; color: rgba(255,255,255,.58); }
.ff-grow span:nth-child(3) { font-size: 76px; color: #FFFFFF; border-bottom: 6px solid #1C5831; padding-bottom: 6px; }
.ff-q { margin: 0 0 14px; padding-left: 18px; border-left: 4px solid #1C5831;
  font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.35; color: #FFFFFF; max-width: 30ch; }
.ff-q-sub { margin: 0; padding-left: 22px; font-size: 17px; line-height: 1.6; color: #C9CEC7; max-width: 48ch; }

/* ---------- 08 Why the system matters: a spec framework ---------- */
.ff-cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 3px solid #1C5831; }
.ff-cgrid > div { padding: 30px 28px 34px; border-bottom: 1px solid rgba(36,40,36,.18); border-left: 1px solid rgba(36,40,36,.18); }
.ff-cgrid > div:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.ff-cgrid h3 {
  margin: 0; font-family: 'Noto Sans Display', sans-serif; font-weight: 900; font-style: italic;
  font-stretch: extra-condensed; text-transform: uppercase; font-size: 52px; line-height: .92; color: #242824;
}
.ff-cgrid p { margin: 10px 0 0; font-size: 15px; color: #242824; opacity: .72; }
.ff-faq details { border-top: 1px solid rgba(36,40,36,.22); }
.ff-faq details:last-child { border-bottom: 1px solid rgba(36,40,36,.22); }
.ff-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0;
  font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.4; color: #242824;
}
.ff-faq p { margin: 0 0 22px; max-width: 62ch; font-size: 16px; line-height: 1.6; color: #242824; }

/* ---------- 09 / 10 ---------- */
.ff-measure .elementor-heading-title { max-width: 40ch; }
.ff-formcard .elementor-field-group .elementor-field { border-radius: 0; }
.ff-formcard .elementor-field-textual { min-height: 48px; }

/* ---------- Footer ---------- */
.ff-foot-nav .elementor-nav-menu--main .elementor-item { justify-content: flex-end; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .ff-cgrid h3 { font-size: 44px; }
}
@media (max-width: 1024px) {
  .ff-rail { padding-left: 88px !important; }
  .ff-rail::before { left: 47px; }
  .ff-rail::after { left: 41px; }
  .ff-spec-grid.e-con-full,
  .ff-spec-grid > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
  .ff-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ff-cgrid > div:nth-child(3n+1) { border-left: 1px solid rgba(36,40,36,.18); padding-left: 28px; }
  .ff-cgrid > div:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .ff-hide-m { display: none !important; }
  .ff-panel > .elementor-element.ff-overlay--hero4,
  .ff-overlay--hero4 { width: 340px !important; }
}
@media (max-width: 767px) {
  .ff-rail { padding-left: 52px !important; }
  .ff-rail::before { left: 22px; }
  .ff-rail::after { left: 16px; }
  .ff-cgrid { grid-template-columns: minmax(0, 1fr); }
  .ff-cgrid > div, .ff-cgrid > div:nth-child(3n+1) { border-left: 0 !important; padding: 22px 0 24px !important; }
  .ff-cgrid h3 { font-size: 46px; }
  .ff-grow span:nth-child(1) { font-size: 22px; }
  .ff-grow span:nth-child(2) { font-size: 32px; }
  .ff-grow span:nth-child(3) { font-size: 48px; }
  .ff-lede-dark p { font-size: 18px; }
  .ff-faq summary { font-size: 16px; }
  .ff-panel > .elementor-element.ff-overlay--hero4,
  .ff-overlay--hero4 { width: 100% !important; }
  .ff-foot-nav .elementor-nav-menu--main .elementor-item { justify-content: flex-start; }
}

/* OH spread: keep the tent roof in frame on wide screens. */
@media (min-width: 1025px) {
  #outdoor-hospitality .ff-fill img { object-position: 50% 24% !important; }
}

/* ============================================================
   POLISH PASS — 22 Sep 2026 (CSS only; no document changes)
   ============================================================ */

/* Anchor navigation: let the same-page jumps glide. */
html { scroll-behavior: smooth; }

/* 04 — the engineering drawing is a document, not a texture.
   Show it whole on a white field so it reads as the spec it is. */
.ff-panel:has(img[src*="dome-platform-engineering-drawing"]) { background: #FFFFFF !important; }
img[src*="dome-platform-engineering-drawing"] { object-fit: contain !important; background: #FFFFFF; }
.ff-panel:has(img[src*="dome-platform-engineering-drawing"]) .ff-cap .elementor-heading-title {
  background: #242824;
}

/* 05 — charcoal field so the configuration panels read as their own
   chapter instead of continuing the black install-ready run. */
#configurations { background-color: #242824 !important; }

/* 05 — panel detail: the disclosure reads as a control. */
.ff-fit summary { transition: color .15s ease; }
.ff-fit summary:hover { color: #1C5831; }
.ff-spec-fit { border-top: 1px solid rgba(36,40,36,.18); }
.ff-fit summary { padding-top: 16px; }

/* 08 — FAQ rows get the same treatment. */
.ff-faq summary { transition: color .15s ease; }
.ff-faq summary:hover { color: #1C5831; }

/* 10 — form fields: square, quiet, with a green focus state. */
.ff-formcard .elementor-field-textual,
.ff-formcard select.elementor-field-textual {
  border-radius: 0 !important;
  border: 1px solid rgba(36,40,36,.35) !important;
  background: #FFFFFF !important;
  font-family: 'Noto Sans', sans-serif;
}
.ff-formcard .elementor-field-textual:focus,
.ff-formcard select.elementor-field-textual:focus {
  outline: 0; border-color: #1C5831 !important; box-shadow: inset 0 0 0 1px #1C5831;
}
.ff-formcard .elementor-field-group > label { margin-bottom: 6px; }
.ff-formcard .elementor-button { transition: background-color .15s ease; }

/* Buttons and nav: restrained motion only. */
.elementor-button { transition: background-color .15s ease, color .15s ease; }