/* ==========================================================================
   FORZA — commercial processing systems, paid-search landing page
   Palette and type are the client's existing identity, lifted from the live
   storefront's theme tokens rather than approximated from a screenshot.
   ========================================================================== */

:root{
  --cream:   #FEF6E6;   /* page ground, and type on navy            */
  --navy:    #13294B;   /* type on cream, and inverted grounds      */
  --gold:    #ECD898;   /* rules, capacity bars, accents            */
  --ink:     #0B1729;   /* deepest navy — hero and footer ground    */
  --steel:   #566379;   /* secondary text on cream — 5.5:1 on cream */
  --rule:    #E6D6B0;   /* hairline on cream                        */
  --cream-2: #F8EDD8;   /* recessed panel on cream                  */

  /* One family, as the brand uses. The fallback is a wide-ish grotesque so a
     failed Typekit load degrades in proportion rather than collapsing narrow. */
  --face: "aktiv-grotesk-extended", "Archivo", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1220px;
  --gut: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--cream);
  color:var(--navy);
  font-family:var(--face);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block }

a{ color:inherit }

h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.05; letter-spacing:.01em }

/* The brand sets display type uppercase and tracked. It is an identity trait,
   not decoration, so it belongs on headings — and nowhere else. */
.fz-hero__h,.fz-head__h,.fz-line__h,.fz-also__h,.fz-why__h,.fz-quote__h{
  text-transform:uppercase;
  letter-spacing:.03em;
}

.fz-wrap{ width:min(var(--wrap), 100%); margin-inline:auto; padding-inline:var(--gut) }

.fz-skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:var(--cream); padding:12px 18px;
}
.fz-skip:focus{ left:0 }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
}

/* ------------------------------------------------------------------ buttons */
.fz-btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font:inherit; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  font-size:14px; padding:17px 30px; border:1px solid transparent;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.fz-btn--gold{ background:var(--gold); color:var(--navy); border-color:var(--gold) }
.fz-btn--gold:hover{ background:transparent; color:var(--gold) }
.fz-btn--navy{ background:var(--navy); color:var(--cream); border-color:var(--navy) }
.fz-btn--navy:hover{ background:transparent; color:var(--navy) }
.fz-btn[disabled]{ opacity:.5; cursor:default }

/* ---------------------------------------------------------------------- nav */
.fz-nav{
  position:sticky; top:0; z-index:40;
  background:var(--cream); border-bottom:1px solid var(--rule);
}
.fz-nav__in{
  width:min(var(--wrap),100%); margin-inline:auto; padding:16px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.fz-nav__mark img{ width:clamp(130px,17vw,196px); height:auto }
.fz-nav__cta{
  font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; padding-bottom:3px; border-bottom:2px solid var(--gold);
}
.fz-nav__cta:hover{ border-bottom-color:var(--navy) }

/* --------------------------------------------------------------------- hero */
.fz-hero{ background:var(--ink); color:var(--cream); overflow:hidden }
.fz-hero__in{
  width:min(var(--wrap),100%); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:1fr 1.06fr; align-items:center;
  gap:clamp(24px,4vw,56px); min-height:clamp(520px,68vh,680px);
}
/* fr columns floor at min-content, and uppercase extended display type has a
   very wide min-content. Without this the headline steals the figure's column. */
.fz-hero__copy,.fz-hero__fig{ min-width:0 }
.fz-hero__h{
  font-size:clamp(29px,3.9vw,52px);
  margin-bottom:26px;
}
.fz-hero__lede{
  font-size:clamp(16px,1.35vw,19px);
  max-width:46ch; color:#D9E0EC; margin:0 0 32px;
}
.fz-hero__meta{
  margin:22px 0 0; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold);
}
.fz-hero__fig{ position:relative }
/* The renders are transparent PNGs, so they sit directly on the navy. A soft
   radial lift stops the stainless disappearing into the dark ground. */
.fz-hero__fig::before{
  content:""; position:absolute; inset:-8% -12%;
  background:radial-gradient(ellipse at 55% 55%, rgba(236,216,152,.16), transparent 62%);
}
.fz-hero__fig img{ position:relative; width:100% }

/* ------------------------------------------------------- section furniture */
.fz-sys{ padding:clamp(56px,8vw,104px) 0 }
.fz-head{ max-width:62ch; margin-bottom:clamp(36px,5vw,64px) }
.fz-head__h{ font-size:clamp(24px,3vw,38px); margin-bottom:16px }
.fz-head__lede{ margin:0; color:var(--steel) }

/* -------------------------------------------------------------- the ladder */
.fz-line{ border-top:1px solid var(--rule); padding-top:34px; margin-bottom:clamp(44px,6vw,72px) }
.fz-line:last-child{ margin-bottom:0 }

.fz-line__id{ margin-bottom:30px; max-width:58ch }
.fz-line__h{ font-size:clamp(20px,2.3vw,28px) }
/* Gold never appears as text on cream — it cannot reach AA there, and the
   page spends its gold on the capacity bars. This label takes steel instead. */
.fz-line__sub{
  margin:.45em 0 .9em; font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--steel);
}
.fz-line__note{ margin:0; color:var(--steel); font-size:15.5px }

.fz-line__grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(18px,2.4vw,34px);
  grid-template-columns:repeat(2,1fr);
}
.fz-line__grid--3{ grid-template-columns:repeat(3,1fr) }

.fz-card{ display:flex; flex-direction:column }
.fz-card__fig{
  background:var(--cream-2);
  border:1px solid var(--rule);
  padding:clamp(10px,1.6vw,22px);
  margin-bottom:16px;
}
.fz-card__fig img{ width:100%; mix-blend-mode:multiply }
.fz-card__id{ font-size:clamp(17px,1.7vw,21px); letter-spacing:.04em }

/* The capacity bar. This is the one piece of ornament on the page and it is
   carrying data: the fill is the batch size as a fraction of the largest
   system, so the ladder is legible at a glance rather than read off numbers. */
.fz-cap{ margin:12px 0 14px }
.fz-cap__track{ height:6px; background:var(--rule) }
.fz-cap__fill{
  height:100%; width:var(--fill); background:var(--gold);
  border-right:2px solid var(--navy);
  transform-origin:left;
}
.fz-cap__n{ margin:8px 0 0; font-size:14px; color:var(--steel) }
.fz-cap__n b{ color:var(--navy); font-size:15px }
.fz-cap__n span{ white-space:nowrap }

.fz-card__spec{
  list-style:none; margin:auto 0 0; padding:12px 0 0;
  border-top:1px solid var(--rule); font-size:14.5px; color:var(--steel);
}
.fz-card__spec li + li{ margin-top:4px }

/* ------------------------------------------------------ supporting strip */
.fz-also{ background:var(--cream-2); border-block:1px solid var(--rule); padding:clamp(52px,7vw,88px) 0 }
.fz-also__h{ font-size:clamp(22px,2.7vw,34px); margin-bottom:14px }
.fz-also__lede{ margin:0 0 clamp(30px,4vw,48px); max-width:60ch; color:var(--steel) }
.fz-also__grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(22px,3vw,40px);
  grid-template-columns:repeat(4,1fr);
}
.fz-also__grid h3{ font-size:16.5px; margin-bottom:8px; line-height:1.3 }
.fz-also__grid p{ margin:0; font-size:15px; color:var(--steel) }

/* ---------------------------------------------------------------- why forza */
.fz-why{ background:var(--navy); color:var(--cream); padding:clamp(56px,8vw,100px) 0 }
.fz-why__h{ font-size:clamp(22px,2.7vw,34px); margin-bottom:clamp(30px,4vw,48px) }
.fz-why__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(24px,3vw,44px);
  grid-template-columns:repeat(3,1fr);
}
.fz-why__list h3{ font-size:16.5px; margin-bottom:8px; color:var(--gold); line-height:1.3 }
.fz-why__list p{ margin:0; font-size:15.5px; color:#CBD5E4 }

/* --------------------------------------------------------------- the form */
.fz-quote{ padding:clamp(56px,8vw,100px) 0 }
.fz-quote__in{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,72px) }
.fz-quote__h{ font-size:clamp(24px,3vw,38px); margin-bottom:16px }
.fz-quote__copy p{ color:var(--steel); max-width:40ch }
.fz-quote__sig{ font-size:14px; border-left:2px solid var(--gold); padding-left:12px }

/* HubSpot primary, our own form as fallback. min-width:0 lets the grid column
   shrink below the iframe's intrinsic width instead of overflowing on phones. */
.fz-formwrap{ min-width:0 }
.fz-hs .hs-form-frame{ width:100% }

.fz-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px }
.fz-field{ display:flex; flex-direction:column }
.fz-field--wide{ grid-column:1 / -1 }
.fz-field label{
  font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  margin-bottom:7px; font-weight:700;
}
.fz-field input,
.fz-field select,
.fz-field textarea{
  font:inherit; font-size:16px; color:var(--navy);
  background:var(--cream-2);
  border:1px solid var(--navy); border-radius:0;
  padding:13px 14px; width:100%;
}
.fz-field textarea{ resize:vertical }
.fz-field input:focus,
.fz-field select:focus,
.fz-field textarea:focus{ background:#fff }
.fz-hint{ margin:6px 0 0; font-size:13px; color:var(--steel) }

.fz-consent{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px }
.fz-consent input{ margin-top:4px; width:17px; height:17px; flex:0 0 auto; accent-color:var(--navy) }
.fz-consent label{ color:var(--steel) }

.fz-form__status{ margin:14px 0 0; font-size:15px; min-height:1.4em }
.fz-form__status[data-state="error"]{ color:#8C2F1E }
.fz-form__status[data-state="ok"]{ color:var(--navy); font-weight:700 }

.fz-field--bad input,
.fz-field--bad select,
.fz-field--bad textarea{ border-color:#8C2F1E; border-width:2px }

/* Honeypots. Off-screen rather than display:none, which some bots skip. */
.fz-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* -------------------------------------------------------------------- foot */
.fz-foot{ background:var(--ink); color:var(--cream); padding:clamp(44px,6vw,72px) 0 0 }
.fz-foot__in{ display:grid; grid-template-columns:1.2fr 1fr; gap:36px; padding-bottom:40px }
.fz-foot__brand img{ width:180px; margin-bottom:16px }
.fz-foot__brand p{ margin:0; color:#9FB0C6; font-size:15px; max-width:38ch }
.fz-foot__cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px }
.fz-foot__cols h4{
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
}
.fz-foot__cols p{ margin:0 0 7px; font-size:15px }
.fz-foot__cols a{ color:#CBD5E4; text-decoration:none; border-bottom:1px solid transparent }
.fz-foot__cols a:hover{ border-bottom-color:var(--gold); color:var(--cream) }
.fz-foot__base{ border-top:1px solid rgba(236,216,152,.22); padding-block:20px }
.fz-foot__base p{ margin:0; font-size:13px; color:#8497B0 }

/* ------------------------------------------------------------------ motion */
/* One reveal, on the system cards only — the part of the page worth drawing
   the eye to. Everything else arrives already in place. */
.reveal{ opacity:0; transform:translateY(14px) }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease }

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.is-in{ opacity:1; transform:none; transition:none }
  *{ scroll-behavior:auto !important }
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 1000px){
  .fz-also__grid{ grid-template-columns:repeat(2,1fr) }
  .fz-why__list{ grid-template-columns:repeat(2,1fr) }
  .fz-quote__in{ grid-template-columns:1fr }
}

@media (max-width: 860px){
  .fz-hero__in{
    grid-template-columns:1fr; padding-block:44px 0; min-height:0; gap:8px;
  }
  .fz-hero__fig{ max-width:520px; margin-inline:auto }
  .fz-line__grid,
  .fz-line__grid--3{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width: 620px){
  body{ font-size:16px }
  .fz-nav__cta{ font-size:11px }
  .fz-line__grid,
  .fz-line__grid--3{ grid-template-columns:1fr }
  .fz-also__grid{ grid-template-columns:1fr }
  .fz-why__list{ grid-template-columns:1fr }
  .fz-form{ grid-template-columns:1fr }
  .fz-foot__in{ grid-template-columns:1fr }
}