/* FLATFORM BRAND STANDARDS v8 — Web Typography (section 13)
   Display cut: Noto Sans Display, Black (900), Italic, Extra Condensed.
   font-stretch cannot be set from the Elementor UI, so it is declared here. */

h1, h2,
.ff-display,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title {
  font-family: 'Noto Sans Display', 'Noto Sans', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-stretch: extra-condensed;
  text-transform: uppercase;
  letter-spacing: 0;
}

h1, .elementor-widget-heading h1.elementor-heading-title { line-height: 0.96; }
h2, .elementor-widget-heading h2.elementor-heading-title { line-height: 0.98; }

.ff-label,
.elementor-button,
.elementor-nav-menu .elementor-item {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.elementor-button { border-radius: 0; }
.ff-card { border-radius: 0; box-shadow: none; }

/* ============================================================
   ART DIRECTION SYSTEM
   Brand Guide 07: horizontal force, restrained angled cuts,
   technical grid, black fields, restraint.
   ============================================================ */

:root {
  --ff-grid: 1240px;
  --ff-green: #1C5831;
  --ff-green-2: #1D4421;
  --ff-overlap: 72px;   /* how far an overlay plate crosses the seam */
  --ff-plate-w: 400px;
}

/* Align copy to the 1240 grid while the section runs edge to edge. */
.ff-grid-l { padding-left: max(24px, calc((100vw - var(--ff-grid)) / 2)) !important; }
.ff-grid-r { padding-right: max(24px, calc((100vw - var(--ff-grid)) / 2)) !important; }

/* ---------- Photographic panels ----------
   Compositional photography is a real <img> so it carries alt text.
   NOTE: the panel must NOT clip — overlay plates intentionally cross its
   left edge. The image cannot overflow anyway: it is inset:0 + object-fit. */
.ff-panel { position: relative; overflow: visible; }
.ff-fill {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden;            /* clip the photo, never the composition */
}
.ff-fill .elementor-widget-container,
.ff-fill figure,
.ff-fill .elementor-image { height: 100%; margin: 0; }
.ff-fill img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.ff-panel > .elementor-element:not(.ff-fill) { position: relative; z-index: 2; }

/* ---------- Overlay plates ----------
   Controlled absolute positioning against the panel, with explicit insets
   and a hard max-width. No negative margins, nothing escaping a clip. */
/* Deliberately RELATIVE, not absolute: the plate keeps its space in the
   panel's flow, so it can never collapse the panel, never land on a sibling,
   and never depend on the panel not clipping. `left` only shifts it visually
   across the seam. Specificity matches the .ff-panel > child rule below so
   there is one source of truth. */
.ff-panel > .elementor-element.ff-overlay,
.ff-overlay {
  position: relative;
  z-index: 5;
  width: var(--ff-plate-w);
  max-width: calc(100% - 32px);
  margin: 0 !important;
}
.ff-panel > .elementor-element.ff-overlay--hero,
.ff-overlay--hero   { left: calc(-1 * var(--ff-overlap)); top: 72px; }
.ff-panel > .elementor-element.ff-overlay--system,
.ff-overlay--system { left: calc(-1 * var(--ff-overlap)); bottom: 72px; }

/* Dark floating caption plate — structural green edge. */
.ff-plate { background: #000000; border-left: 3px solid var(--ff-green); }

/* Restrained single-corner cut. Padding keeps text clear of the diagonal. */
.ff-angle-l { clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%); }
.ff-angle-l > .e-con-inner, .ff-angle-l { padding-left: 84px !important; }

/* ---------- Four-up proof band ----------
   Grid, not flex-wrap: four columns cannot break to a second row. */
.ff-proof-band > .e-con-inner,
.ff-proof-band.e-con-full {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
}
.ff-proof-item {
  padding: 0 28px !important;
  border-left: 1px solid rgba(36, 40, 36, 0.16);
  width: auto !important;
}
.ff-proof-item:first-child { border-left: 0; padding-left: 0 !important; }

/* Green accent rule above a label. */
.ff-rule-top::before {
  content: ""; display: block; width: 46px; height: 3px;
  background: var(--ff-green); margin-bottom: 18px;
}

/* ---------- Market + configuration tiles ---------- */
.ff-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.28) 42%, rgba(0,0,0,0.86) 100%);
  pointer-events: none;
}

/* ============================================================
   RESPONSIVE — the dimensional devices degrade deliberately
   ============================================================ */

@media (max-width: 1440px) { :root { --ff-overlap: 56px; --ff-plate-w: 380px; } }
@media (max-width: 1280px) { :root { --ff-overlap: 32px; --ff-plate-w: 340px; } }

@media (max-width: 1024px) {
  :root { --ff-overlap: 0px; }
  .ff-panel > .elementor-element.ff-overlay,
  .ff-overlay { left: 0 !important; width: 400px !important; max-width: calc(100% - 48px); margin: 0 24px !important; }
  .ff-overlay--hero { top: 40px; }
  .ff-overlay--system { bottom: 40px; }
  /* Proof band becomes a deliberate 2 x 2, never a browser-decided wrap. */
  .ff-proof-band > .e-con-inner,
  .ff-proof-band.e-con-full { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .ff-proof-item { border-left: 1px solid rgba(36,40,36,0.16); padding-left: 28px !important; }
  .ff-proof-item:nth-child(2n+1) { border-left: 0; padding-left: 0 !important; }
}

@media (max-width: 767px) {
  .ff-grid-l, .ff-grid-r { padding-left: 20px !important; padding-right: 20px !important; }
  /* Plates rejoin the flow; nothing floats over a short panel. */
  .ff-panel > .elementor-element.ff-overlay,
  .ff-overlay {
    position: static !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
  }
  .ff-angle-l { clip-path: none; }
  .ff-angle-l > .e-con-inner, .ff-angle-l { padding-left: 24px !important; }
  .ff-proof-band > .e-con-inner,
  .ff-proof-band.e-con-full { grid-template-columns: 1fr; row-gap: 26px; }
  .ff-proof-item { border-left: 0; padding-left: 0 !important; padding-right: 0 !important; }
}

/* v3: hero plate rides over sky (top), system plane rides the bottom edge,
   so neither covers the subject of its photograph. */
.ff-overlay--hero { max-width: min(var(--ff-plate-w), calc(100% - 32px)); }

/* ============================================================
   HEADER — one clean line from 1201px up
   Brand column sizes to the 325px lockup; nav column takes the rest.
   Below 1200px Elementor switches to the burger (kit: tablet_extra).
   ============================================================ */
.ff-hdr-brand { flex: 0 0 auto !important; width: auto !important; }
.ff-hdr-nav   { flex: 1 1 auto !important; width: auto !important; min-width: 0; }
.ff-hdr-nav .elementor-nav-menu--main .elementor-nav-menu { flex-wrap: nowrap !important; }
.ff-hdr-nav .elementor-nav-menu--main .elementor-item { white-space: nowrap; }

@media (max-width: 1440px) {
  .ff-hdr-nav .elementor-nav-menu--main .elementor-item {
    padding-left: 10px !important; padding-right: 10px !important; letter-spacing: 0.06em !important;
  }
}
@media (max-width: 1366px) {
  .ff-hdr-nav .elementor-nav-menu--main .elementor-item {
    font-size: 12px !important; padding-left: 7px !important; padding-right: 7px !important; letter-spacing: 0.045em !important;
  }
  .ff-hdr-nav .elementor-button { font-size: 12px !important; padding: 13px 18px !important; }
}
/* Phones: the 325px lockup cannot sit beside the burger below ~410px.
   Held to the widest size that fits; flagged as an owner decision. */
@media (max-width: 767px) {
  .ff-hdr-brand img { max-width: calc(100vw - 82px) !important; height: auto !important; }
  /* The hero carries Get a Quote directly beneath the H1 on phones. */
  .ff-hdr-nav .elementor-widget-button { display: none !important; }
}