/* ========================================================
   LOVECOLOUR — shared page banner (templates/banner.css)
   Loaded by every designed route, after inner.css (or homepage.css) and
   before that page's own stylesheet.

   Deliberately self-contained: nothing here depends on .lc-page, .lc-wrap or
   the --lc-* tokens, because the homepage renders inside .lc-hp while the
   inner pages render inside .lc-page. Every class is prefixed .lc-banner* so
   the banner cannot leak into the rest of a page or another template. The one
   thing it does read from outside itself is the shared button measurement and
   colour set in assets/css/tokens.css — each value with its literal fallback —
   so a banner button is the same size and the same orange as every other
   sheet's.

   The plate is composed with its subject on the RIGHT, and the scrim is
   weighted to the left: that is what keeps white text legible over an
   unknown photograph without dimming the whole image.
   ======================================================== */

/* One band, two states, one height.
   '--plain' is a page head: a dark band exactly as tall as its copy, with
   nothing standing in for a photograph that has not been delivered.
   '--photo' is the same band holding a real photograph, which paints the plate
   behind the copy and nothing else. The band's height and padding are the
   band's own on every route and come from the copy, never from the delivered
   file, so replacing a photograph — or swapping it for one with a different
   aspect ratio and pixel size — cannot resize the band. The plate height this
   state used to reserve is gone deliberately; do not bring it back, because
   that is exactly what made an uploaded image decide the band's size. */
.lc-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  background-color: #1F1E1C;
  overflow: hidden;
  isolation: isolate;
}
/* No plate reserve: '.lc-banner--photo' takes its height from its copy exactly
   as '--plain' does, so the band's size is the same with and without a
   photograph under it. */
.lc-banner-media { position: absolute; inset: 0; z-index: 0; }
.lc-banner-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.lc-banner-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(18, 18, 17, 0.94) 0%,
    rgba(18, 18, 17, 0.80) 36%,
    rgba(18, 18, 17, 0.38) 72%,
    rgba(18, 18, 17, 0.14) 100%
  );
}
/* A pale plate (tone => 'light') keeps the same geometry with a lighter wash. */
.lc-banner--light { background-color: #E8E5DD; }
.lc-banner--light .lc-banner-scrim {
  background: linear-gradient(
    100deg,
    rgba(247, 246, 242, 0.96) 0%,
    rgba(247, 246, 242, 0.86) 38%,
    rgba(247, 246, 242, 0.44) 74%,
    rgba(247, 246, 242, 0.16) 100%
  );
}

/* The band's own room, and the only thing that gives the copy its space: the
   top of the band is the top of the breadcrumb block. Both states share these
   values, so a photograph changes the background and nothing about the size. */
.lc-banner-inner {
  position: relative;
  z-index: 2;
  padding: 64px 0 68px;
}

/* ---------- Breadcrumb ---------- */
.lc-banner-crumbs { padding: 0 0 38px; }
.lc-banner-crumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.lc-banner-crumb-list li + li::before { content: "/"; margin-inline-end: 10px; color: rgba(255, 255, 255, 0.35); }
.lc-banner-crumb-list a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.lc-banner-crumb-list a:hover { color: #FFF; }
.lc-banner-crumb-list [aria-current="page"] { color: #FFF; }
.lc-banner--light .lc-banner-crumb-list { color: #6E6E69; }
.lc-banner--light .lc-banner-crumb-list a { color: #6E6E69; }
.lc-banner--light .lc-banner-crumb-list a:hover,
.lc-banner--light .lc-banner-crumb-list [aria-current="page"] { color: #171717; }
.lc-banner--light .lc-banner-crumb-list li + li::before { color: #DFDED8; }

/* ---------- Layout ---------- */
.lc-banner-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.lc-banner-grid--panel {
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: end;
}
.lc-banner-copy { max-width: 820px; }

/* ---------- Copy ---------- */
.lc-banner-eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F36F21;
}
.lc-banner--light .lc-banner-eyebrow { color: #D2540E; }

.lc-banner-title {
  margin: 0;
  max-width: 21ch;
  font-size: clamp(30px, 4vw, 60px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: #FFF;
}
.lc-banner--light .lc-banner-title { color: #171717; }

.lc-banner-lead {
  margin: 20px 0 0;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
}
.lc-banner-body {
  margin: 14px 0 0;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.lc-banner--light .lc-banner-lead { color: #3D3D3A; }
.lc-banner--light .lc-banner-body { color: #6E6E69; }

/* ---------- Fact chips ---------- */
.lc-banner-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 42px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  list-style: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.lc-banner-grid--panel .lc-banner-facts { margin-top: 30px; }
.lc-banner--light .lc-banner-facts { border-top-color: rgba(23, 23, 23, 0.16); color: #4B4B47; }

/* ---------- Buttons ----------
   Own copies of the button primitives: the banner is used inside .lc-page
   (inner.css) and inside .lc-hp (homepage.css), so it cannot assume either
   stylesheet's button rules. The measurements and colours now come from the
   shared button tokens in assets/css/tokens.css — each with its literal value
   as the fallback — so a banner control is the same size and the same orange as
   the one in inner.css instead of a third size of its own. */
.lc-banner .lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--btn-min-h, 54px);
  padding: 0 var(--btn-pad-x, 26px);
  border: 1px solid transparent;
  border-radius: var(--btn-radius, 8px);
  font-size: var(--btn-font, 13px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--btn-track, 0.06em);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.lc-banner .lc-btn:hover { transform: translateY(-2px); text-decoration: none; }
.lc-banner .lc-btn:active { transform: translateY(0); }
/* A pointer is not the only way to a control, so every button draws the ring on
   the darkened accent, which reads on the pale band and the dark one alike. */
.lc-banner .lc-btn:focus-visible { outline: 2px solid var(--color-cta, #C8500F); outline-offset: 2px; }
/* The inquiry CTA: every "start a project" and every "send" in a banner. */
.lc-banner .lc-btn--primary { background-color: var(--color-cta, #C8500F); color: #FFF; }
.lc-banner .lc-btn--primary:hover { background-color: var(--color-cta-hover, #A83F09); color: #FFF; }
.lc-banner .lc-btn--white { background-color: #FFF; color: #171717; }
.lc-banner .lc-btn--white:hover { background-color: var(--color-cta, #C8500F); color: #FFF; }
/* The older name of the same control, kept because the shared banner passes a
   variant straight through as lc-btn--<variant> (inc/banner.php). */
.lc-banner .lc-btn--orange { background-color: var(--color-cta, #C8500F); color: #FFF; }
.lc-banner .lc-btn--orange:hover { background-color: var(--color-cta-hover, #A83F09); color: #FFF; }
/* WhatsApp. One channel a buyer can answer without filling anything in, and it
   is read as WhatsApp before it is read as a button. */
.lc-banner .lc-btn--whatsapp { background-color: var(--color-whatsapp, #25D366); color: var(--color-whatsapp-ink, #0B2B12); }
.lc-banner .lc-btn--whatsapp:hover { background-color: var(--color-whatsapp-hover, #1DA851); color: var(--color-whatsapp-ink, #0B2B12); }
.lc-banner .lc-btn--outline {
  border-color: rgba(255, 255, 255, 0.28);
  background-color: transparent;
  color: #FFF;
}
.lc-banner .lc-btn--outline:hover { border-color: #FFF; background-color: rgba(255, 255, 255, 0.08); color: #FFF; }
/* The second inquiry action — the one that opens the form already on screen.
   On a dark band the deepened accent is too quiet beside the copy, so there the
   same action takes the bright brand orange, which is the readable one on black,
   and keeps a dark label when it fills. */
.lc-banner .lc-btn--outline-accent { border-color: #F36F21; background-color: transparent; color: #F36F21; }
.lc-banner .lc-btn--outline-accent:hover { border-color: #F36F21; background-color: #F36F21; color: #171717; }
.lc-banner .lc-btn--ghost {
  border-color: rgba(255, 255, 255, 0.24);
  background-color: transparent;
  color: #FFF;
}
.lc-banner .lc-btn--ghost:hover { border-color: #FFF; background-color: rgba(255, 255, 255, 0.08); color: #FFF; }
.lc-banner--light .lc-btn--ghost,
.lc-banner--light .lc-btn--outline { border-color: rgba(23, 23, 23, 0.28); color: #171717; }
.lc-banner--light .lc-btn--ghost:hover,
.lc-banner--light .lc-btn--outline:hover { border-color: #171717; background-color: rgba(23, 23, 23, 0.05); color: #171717; }
/* On the pale band the accent outline is the deepened CTA orange, because white
   on the bright brand orange measures 2.95:1 — under what a label this size owes. */
.lc-banner--light .lc-btn--outline-accent { border-color: var(--color-cta, #C8500F); color: var(--color-cta, #C8500F); }
.lc-banner--light .lc-btn--outline-accent:hover { border-color: var(--color-cta, #C8500F); background-color: var(--color-cta, #C8500F); color: #FFF; }
/* A visitor who asked for less motion is not handed a button that lifts. */
@media (prefers-reduced-motion: reduce) {
  .lc-banner .lc-btn { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
  .lc-banner .lc-btn:hover { transform: none; }
}

.lc-banner-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- At-a-glance panel ---------- */
.lc-banner-panel {
  padding: 24px 26px 26px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lc-banner-panel-label {
  display: block;
  margin-bottom: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.lc-banner-panel-rows { margin: 0; }
.lc-banner-panel-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.lc-banner-panel-row dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 2px;
}
.lc-banner-panel-row dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: #FFF;
}
.lc-banner-panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
/* The panel is a summary block, so its controls stay below the band's own button
   height deliberately — this is the one place a banner button is shorter. */
.lc-banner-panel-actions .lc-btn { min-height: 46px; flex: 1 1 auto; }

.lc-banner--light .lc-banner-panel {
  border-color: rgba(23, 23, 23, 0.14);
  background-color: rgba(255, 255, 255, 0.72);
}
.lc-banner--light .lc-banner-panel-label { color: #6E6E69; }
.lc-banner--light .lc-banner-panel-row { border-top-color: rgba(23, 23, 23, 0.12); }
.lc-banner--light .lc-banner-panel-row dt { color: #6E6E69; }
.lc-banner--light .lc-banner-panel-row dd { color: #171717; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .lc-banner-grid--panel { grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; }
}
@media (max-width: 1080px) {
  .lc-banner-grid--panel { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
  .lc-banner-panel { max-width: 520px; }
}
@media (max-width: 900px) {
  .lc-banner-inner { padding: 54px 0 46px; }
  .lc-banner-crumbs { padding-bottom: 26px; }
  .lc-banner-title { font-size: clamp(28px, 8vw, 40px); max-width: none; }
  .lc-banner-lead { font-size: 16px; }
  .lc-banner-body { font-size: 15px; }
  .lc-banner-facts { margin-top: 30px; gap: 10px 20px; font-size: 10px; }
  .lc-banner-panel { max-width: none; padding: 20px 20px 22px; }
  .lc-banner-panel-row { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
}

/* ========================================================
   ONE BAND HEIGHT, ON EVERY DESIGNED ROUTE
   ========================================================
   Every inner route opens on the same band, and /contact/ is the measurement:
   that page's own copy — breadcrumb, eyebrow, one-line headline, lead, second
   paragraph, fact row and action row — is 589px at a 1280px viewport, and 667px
   is what a route whose headline wraps to two lines needs. Every route is padded
   down to that, its copy on the band's bottom edge (the band already ends its
   content at flex-end), so a route carrying less copy is shorter in text and not
   in band. Nothing reserved is involved: the band is still sized by copy, now by
   the reference copy rather than by whichever page you happen to be on.

   The headline term is the same clamp the headline itself uses, so the band
   follows the reference as the viewport widens — 667px at 1280, 685px from
   1500px up — instead of being frozen at one width.

   A route whose copy is taller than the band does not stretch it: its headline
   steps down instead ('--title-mid' / '--title-long' below, set from the
   character count in inc/banner.php), so no page can push past this height. */
.lc-page .lc-banner-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(565px + 2 * clamp(30px, 4vw, 60px));
}

/* Below 901px the copy wraps instead of scaling, so the reference is measured at
   the NARROW end of each step and the whole step keeps that one height: a phone,
   a small tablet and a large tablet each wear a band of their own, and inside a
   step every route is exactly as tall as every other — 660px at a 390px phone.
   Each constant is the reference measured at that step's narrow end. */
@media (max-width: 900px) {
  .lc-page .lc-banner-inner { min-height: calc(523px + 2 * clamp(28px, 8vw, 40px)); }
}
@media (max-width: 560px) {
  .lc-page .lc-banner-inner { min-height: calc(548px + 2 * clamp(28px, 8vw, 40px)); }
}
@media (max-width: 420px) {
  .lc-page .lc-banner-inner { min-height: calc(598px + 2 * clamp(28px, 8vw, 40px)); }
}

/* ---------- Headlines that step down instead of stretching the band ----------
   inc/banner.php counts the headline's characters and marks the band, so the
   longest ones take a smaller size over a longer line: the words are unchanged,
   they simply occupy fewer lines. This is also what keeps a translation honest —
   a Spanish or Russian headline longer than its English source steps down with
   it, and its page's band stays the size of every other page's. */
.lc-banner--title-mid .lc-banner-title {
  max-width: 38ch;
  font-size: clamp(27px, 3.2vw, 44px);
}
.lc-banner--title-long .lc-banner-title {
  max-width: 58ch;
  font-size: clamp(25px, 2.9vw, 40px);
}
/* The long steps take a longer line as well, which is what brings a product
   family headline back to two lines and keeps its fact row on one row. */
.lc-banner--title-mid .lc-banner-copy { max-width: 1000px; }
.lc-banner--title-long .lc-banner-copy { max-width: 1180px; }

@media (max-width: 900px) {
  .lc-banner--title-mid .lc-banner-title {
    max-width: none;
    font-size: clamp(25px, 6vw, 34px);
  }
  .lc-banner--title-long .lc-banner-title {
    max-width: none;
    font-size: clamp(22px, 5.2vw, 30px);
  }
  .lc-banner--title-mid .lc-banner-copy,
  .lc-banner--title-long .lc-banner-copy { max-width: none; }
}