/* JFL — shared theme (Tailwind handles the rest) */
:root {
  --brand: #dc2626; --ink: #0a0a0a;
  /* brand mark: 3 flat-top hexagons (red fill · grey outline · red outline) */
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cpath d='M11.2 5.5 8.6 10H3.4L.8 5.5 3.4 1h5.2z' fill='%23dc2626'/%3E%3Cpath d='M20.2 10l-2.6 4.5h-5.2L9.8 10l2.6-4.5h5.2z' fill='none' stroke='%23737373' stroke-width='1.4'/%3E%3Cpath d='M29.2 5.5 26.6 10h-5.2l-2.6-4.5L21.4 1h5.2z' fill='none' stroke='%23dc2626' stroke-width='1.4'/%3E%3C/svg%3E");
}
/* hero text is on screen with the first paint (never waits for the scripts) and slides up once, pure CSS */
.h1:has(.split), .hero-in { animation: hero-up .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-in { animation-delay: .12s; }
@keyframes hero-up { from { opacity: 0; transform: translateY(28px); } }
@media (prefers-reduced-motion: reduce) {
  .h1:has(.split), .hero-in { animation: none; opacity: 1; transform: none; }
}

/* page content must always be visible (view-transition opacity was sticking at 0 → black page) */
main { opacity: 1 !important; visibility: visible !important; transform: none; }

html { scroll-behavior: auto; background: var(--ink); }   /* Lenis owns smooth scroll — avoid fighting native smooth in Chrome */
html.lenis { height: auto; } .lenis-smooth { scroll-behavior: auto !important; }
body { font-family: Barlow, sans-serif; background: var(--ink); color: #fff; overflow-x: hidden; }

/* Safari: 100svh is shorter than the visible screen when the toolbar collapses → white gap under hero.
   Use dynamic viewport height so full-screen sections always fill the screen. */
.h-svh {
  height: 100vh;
  height: 100dvh;
}

/* Process pin — mobile: clear nav on top; bottom gap smaller (was too much) */
.process-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 5rem;
  padding-bottom: 1.75rem;
  gap: .5rem;
}
.process-visual {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 34dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: .75rem;
}
.process-svg {
  height: auto;
  width: auto;
  max-width: 88%;
  max-height: 34dvh;
}
.process-copy { flex: 0 0 auto; }
@media (min-width: 768px) {
  .process-stage {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 1.5rem;
    padding-top: 6rem;
    padding-bottom: 2.5rem;
  }
  .process-visual {
    flex: none;
    height: 100%;
    max-height: 72dvh;
  }
  .process-svg {
    height: auto;
    width: 100%;
    max-height: 72dvh;
  }
}

/* promoted layers for GSAP transform / opacity (added in app.js on animated nodes only) */
.gpu-layer {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}
@media (prefers-reduced-motion: reduce) {
  .gpu-layer { will-change: auto; transform: none; }
}
::selection { background: var(--brand); color: #fff; }
.font-display, .tag, .h1, .h2, .btn { font-family: "Barlow Condensed", sans-serif; }
.tag, .btn { text-transform: uppercase; }
.wrap { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 768px) { .wrap { padding-inline: 2rem; } }

/* trademark hexagon is flat-top; .hexp (pointy-top) is only for the product honeycomb */
.hex { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.hexp { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.mark { background: var(--mark) no-repeat left center / contain; }

/* brand hexagon clusters (rendered from [data-hexes]) */
.hx { stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.hx-r { fill: var(--brand); } .hx-b { fill: var(--ink); }
.hx-o { fill: none; stroke: var(--brand); } .hx-k { fill: none; stroke: var(--ink); }
.on-dark .hx-b { fill: #fff; } .on-dark .hx-k { stroke: #ffffff59; }

.btn { display: inline-flex; align-items: center; gap: .75rem; padding: 1rem 1.75rem; background: var(--brand); color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: .15em; transition: background .3s, color .3s; }
.btn:hover { background: var(--ink); color: #fff; }
.btn.is-loading,
.btn:disabled { opacity: .85; pointer-events: none; cursor: wait; }
.btn-spin {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid #ffffff55;
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* contact form: overlay while the enquiry is being sent (added by app.js) */
.form-sending { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 1.25rem;
  background: #0a0a0ae0; backdrop-filter: blur(3px); color: #fff; font-family: "Barlow Condensed", sans-serif; font-size: 1.25rem;
  letter-spacing: .2em; text-transform: uppercase; animation: form-sending-in .25s ease-out; }
.form-sending .btn-spin { width: 3rem; height: 3rem; border-width: 3px; border-color: #ffffff33; border-top-color: var(--brand); }
@keyframes form-sending-in { from { opacity: 0; } }
.btn.ghost { background: #ffffff1a; backdrop-filter: blur(6px); } .btn.ghost:hover, .btn.dark:hover { background: #fff; color: var(--ink); }
.btn.dark { background: var(--ink); }
.btn.sm { padding: .8rem 1.3rem; font-size: .8rem; }
.tag { display: inline-flex; align-items: center; gap: .75rem; letter-spacing: .3em; color: var(--brand); font-size: .875rem; font-weight: 600; }
.h1 { font-weight: 700; line-height: .95; font-size: clamp(2.6rem, 8vw, 6.5rem); }
.h2 { font-weight: 700; line-height: 1.05; font-size: clamp(2rem, 4.5vw, 3.75rem); }
/* hidden until GSAP reveals; stay visible if JS never runs / fails */
.reveal { opacity: 0; }
@media (scripting: none) { .reveal { opacity: 1; transform: none; } }
html.no-js .reveal { opacity: 1; transform: none; }
/* cards lift on hover — uses `translate` (not `transform`) so it never fights the GSAP reveal */
.card { transition: translate .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s, --tw-ring-color .3s; }
@media (hover: hover) { .card:hover { translate: 0 -6px; box-shadow: 0 28px 50px -24px #000d; } }

/* lists with hexagon bullets (alternating red / grey) */
.hex-list li { position: relative; padding-left: 1.9rem; }
.hex-list li::before { content: ""; position: absolute; left: 0; top: .4em; width: 14px; height: 12px; background: var(--brand); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.hex-list li:nth-child(even)::before { background: #a3a3a3; }

/* navbar — frosted bar; .on-hero = over video/image; .floating = rounded bar after scroll */
.nav-link {
  position: relative;
  display: inline-block;
  opacity: .75;
  white-space: nowrap;
  transition: opacity .25s ease, color .25s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.3rem;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform: translateX(-50%) scaleX(0);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
  pointer-events: none;
}
.nav-link:hover { opacity: 1; color: var(--brand); }
.nav-link:hover::after,
.nav-link.active::after { transform: translateX(-50%) scaleX(1); }
.nav-link.active { opacity: 1; color: var(--brand); }

/* contact details + enquiry form */
.dt { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #71717a; }
.dd { margin-top: .4rem; font-size: 1.05rem; font-weight: 500; }
.f-field { display: grid; gap: .45rem; align-content: start; }   /* start: an error message under one field must not stretch the field beside it */
.f-field span { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #a1a1aa; }
.f-field input, .f-field textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: #ffffff0a;
  border: 1px solid #ffffff1f;
  color: #fff;
  outline: none;
  transition: border-color .3s, background .3s;
  border-radius: 0;
}
.f-field textarea {
  resize: none;
  min-height: 8.5rem;
  line-height: 1.5;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #52525b transparent;
}
.f-field textarea::-webkit-scrollbar { width: 6px; }
.f-field textarea::-webkit-scrollbar-track { background: transparent; }
.f-field textarea::-webkit-scrollbar-thumb { background: #52525b; border-radius: 3px; }
.f-field input:focus, .f-field textarea:focus { border-color: var(--brand); background: #ffffff12; }
/* wrong phone / email (set by app.js) */
.f-field input.is-invalid { border-color: #ef4444; }
.f-error { font-size: .8rem; color: #f87171; line-height: 1.3; }
.f-field input::placeholder, .f-field textarea::placeholder { color: #71717a; }
/* keep dark look when browser autofills */
.f-field input:-webkit-autofill,
.f-field input:-webkit-autofill:hover,
.f-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  box-shadow: 0 0 0 1000px #171717 inset;
  transition: background-color 99999s ease-out;
}

/* toast / snackbar — phone-first, safe-area aware */
.toast {
  position: fixed;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  left: max(0.75rem, env(safe-area-inset-left, 0px));
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  padding: 0.9rem 0.85rem;
  background: #0a0a0a;
  color: #fff;
  border: 1px solid #ffffff1a;
  border-radius: 0.75rem;
  box-shadow: 0 16px 40px -10px #000000aa;
  animation: toast-in .4s cubic-bezier(.22, 1, .36, 1) both;
  pointer-events: auto;
}
@media (min-width: 640px) {
  .toast {
    left: 50%;
    right: auto;
    bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    width: min(26rem, calc(100vw - 2rem));
    max-width: 26rem;
    padding: 1rem 1.1rem;
    gap: .85rem;
    transform: translateX(-50%);
  }
}
.toast-ok { align-items: flex-start; }
.toast-icon {
  flex: none;
  width: 2.25rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: #dc2626;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  font-size: .9rem;
  font-weight: 700;
  margin-top: .1rem;
}
.toast-err .toast-icon { background: #f59e0b; color: #0a0a0a; }
.toast-body { flex: 1; min-width: 0; }
.toast-title {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
}
.toast-text {
  margin: .35rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: #a1a1aa;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
@media (min-width: 640px) {
  .toast-title { font-size: 1rem; }
  .toast-text { font-size: .875rem; }
}
.toast-err .toast-text { margin: 0; color: #fff; flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: anywhere; }
.toast-close {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: #71717a;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  align-self: flex-start;
  margin: -.25rem -.15rem 0 0;
  -webkit-tap-highlight-color: transparent;
}
.toast-close:hover { color: #fff; }
.toast-hide { animation: toast-out .35s ease forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(0.75rem); }
}
@media (min-width: 640px) {
  @keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(1.25rem); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  @keyframes toast-out {
    to { opacity: 0; transform: translateX(-50%) translateY(1rem); }
  }
}

.step.active { color: #fff; } .step.active b { background: var(--brand); }
.filter.active { background: var(--brand); color: #fff; }

/* honeycomb product grid: 3 on top, 3 offset below */
.honeycomb { --w: min(11rem, calc((100vw - 2.5rem) / 3.55)); --h: calc(var(--w) * 1.1547); --g: 6px; width: max-content; max-width: 100%; margin-inline: auto; }
/* shadow follows the hexagon shapes: drop-shadow (not box-shadow, which draws a rectangle) on the rows,
   not on .honeycomb itself, because .honeycomb tilts in 3D on hover and would be flattened into a box */
.honeycomb .row { filter: drop-shadow(0 22px 22px rgb(0 0 0 / .16)); }
.honeycomb .row:hover { position: relative; z-index: 2; }   /* hovered cell grows over the other row */
@media (min-width: 480px) { .honeycomb { --g: 8px; } }
@media (min-width: 1024px) { .honeycomb { --w: min(10rem, calc((50vw - 5rem) / 3.7)); } }
.honeycomb .row { display: flex; gap: var(--g); }
.honeycomb .row + .row { margin: calc(var(--h) * -.25 + var(--g) * .6) 0 0 calc(var(--w) / 2 + var(--g) / 2); }
.honeycomb a { position: relative; display: block; width: var(--w); height: var(--h); overflow: hidden; background: linear-gradient(#f4f4f5, #d4d4d8); transition: scale .6s cubic-bezier(.2, .8, .2, 1), filter .6s; }
.honeycomb a img { transition: scale 1.2s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  .honeycomb a:hover { scale: 1.06; z-index: 2; filter: brightness(1.05); }
  .honeycomb a:hover img { scale: 1.12; }
  .honeycomb a:hover b { translate: 0 -6px; letter-spacing: .3em; }
}
.honeycomb a b { transition: translate .5s, letter-spacing .5s; }

/* small screens */
@media (max-width: 639px) {
  .btn { padding: .9rem 1.4rem; letter-spacing: .12em; }
  .tag { letter-spacing: .22em; font-size: .8rem; }
  .honeycomb a b { font-size: .65rem; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* big soft background hexagons (injected into [data-bg-hex] sections) */
.bg-hex { position: absolute; }
.bg-hex.hexp { aspect-ratio: .866; } .bg-hex.hex { aspect-ratio: 1.1547; }
.bg-hex.r { background: #dc26260f; } .bg-hex.g { background: #18181b0b; }
[data-bg-hex="dark"] .bg-hex.r { background: #dc262612; } [data-bg-hex="dark"] .bg-hex.g { background: #ffffff08; }
.bg-hex[data-size="s"].r { background: #dc26261f; } .bg-hex[data-size="s"].g { background: #18181b12; }
[data-bg-hex="dark"] .bg-hex[data-size="s"].g { background: #ffffff0d; }

#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 0;
  transition: padding .45s cubic-bezier(.22, 1, .36, 1);
  transform: translateZ(0);
  backface-visibility: hidden;
}
#nav .bar {
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  background: #ffffffcc;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid transparent;
  border-bottom-color: #0000000f;
  color: #171717;
  border-radius: 0;
  box-shadow: none;
  /* only paint props — avoid width/layout animation (that causes jitter) */
  transition: background-color .4s ease, border-color .4s ease, border-radius .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, color .35s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
}
#nav.floating { padding: .65rem clamp(1rem, 3vw, 2rem) 0; }
/* scrolled: frosted pill + dark links (always readable) */
#nav.floating .bar,
#nav.floating.on-hero .bar {
  background: #ffffffcc;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: 1.25rem;
  border-color: #0000000f;
  box-shadow: 0 12px 40px -14px #00000040;
  color: #171717;
}
#nav.floating .nav-link,
#nav.floating.on-hero .nav-link {
  opacity: .75;
  color: #171717;
  text-shadow: none;
}
#nav.floating .nav-link:hover,
#nav.floating .nav-link.active,
#nav.floating.on-hero .nav-link:hover,
#nav.floating.on-hero .nav-link.active {
  opacity: 1;
  color: var(--brand);
}
/* over hero at top only: transparent bar, white links */
#nav.on-hero:not(.floating) .bar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
  color: #fff;
}
#nav.on-hero:not(.floating) .nav-link { opacity: .9; color: #fff; text-shadow: 0 1px 8px #000c; }
#nav.on-hero:not(.floating) .nav-link:hover,
#nav.on-hero:not(.floating) .nav-link.active { color: #f87171; }
#nav.menu-open .bar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; box-shadow: none; color: #171717; }
#nav.menu-open .nav-link { color: #171717; text-shadow: none; }
#burger { gap: 6px; }
#burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #0a0a0a;   /* solid dark — both bars match (no 1.5px / currentColor wash) */
  opacity: 1;
  border-radius: 1px;
  transition: rotate .4s, translate .4s, background-color .35s ease;
}
#nav.on-hero:not(.floating) #burger span { background: #fff; }
#nav.floating #burger span,
#nav.menu-open #burger span { background: #0a0a0a; }
#burger.open span:first-child { rotate: 45deg; translate: 0 4px; }
#burger.open span:last-child { rotate: -45deg; translate: 0 -4px; }
/* Footer — minimal helpers (layout is Tailwind in footer.php) */
.footer-h { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: #fff; font-size: .875rem; margin: 0 0 .75rem; }
.footer-social { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; box-shadow: inset 0 0 0 1px #ffffff26; transition: background .2s, box-shadow .2s; }
.footer-social:hover { background: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.footer-line { display: flex; gap: .75rem; align-items: flex-start; }
.footer-line svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .15rem; }
.footer-bar { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
.footer-main { padding-top: 2.75rem; padding-bottom: 2.5rem; row-gap: 1.25rem; column-gap: 1.5rem; }
/* phone only: space above Company / Products */
@media (max-width: 767px) {
  .footer-links { padding-top: 1.25rem; }
}
@media (min-width: 768px) {
  .footer-main { padding-top: 4rem; padding-bottom: 3.5rem; row-gap: 0; }
}

/* logo is shown as-is (no white box behind it) in navbar and footer */
/* phones: keep only the big background hexagons so small ones never sit behind text */
@media (max-width: 767px) { .bg-hex[data-size="s"] { display: none; } }

/* client logo strip: white logos on dark section, looping scroll, edges fade out */
.clients { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.clients-row { display: inline-flex; padding-right: 0; }
.client { flex: none; width: 11rem; height: 6rem; display: grid; place-items: center; padding: 0 1.75rem; border-right: 1px solid #ffffff14; }
@media (min-width: 768px) { .client { width: 13.5rem; height: 7rem; } }
.client img { max-width: 100%; max-height: 2.5rem; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .6; transition: opacity .4s; }
.client span { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; opacity: .6; white-space: nowrap; transition: opacity .4s; }
.client:hover img, .client:hover span { opacity: 1; }