/* =================================================================
   IMPACKED INTERNATIONAL — Website styles
   Phase 1 build: Home, About, Services, Contact
   Plain CSS, no build step — written to port cleanly into WordPress
   (paste sections into Custom HTML blocks / a theme template, or
   use this file as-is as the theme's main stylesheet).
   ================================================================= */

:root {
  /* Brand colour tokens (from the Blackbirds brand book) */
  --blue: #232EFF;
  --cyan: #0097DD;
  --gradient: linear-gradient(135deg, var(--blue), var(--cyan));
  --gradient-diag: linear-gradient(160deg, #1A2530, #263544);
  --ink: #1A2530;
  --anthracite: #263544;
  --anthracite-2: #1A2530;
  --mist: #F4F5F7;
  --line: #E3E6EA;
  --muted: #647184;
  --muted-light: #8A93A0;
  --sparkle: #8ED2F5;
  --white: #ffffff;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --container: 1280px;
  --gap: 24px;

  --font: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--cyan); }
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 64px;
  padding-right: 64px;
}

/* ---------- Type helpers ---------- */
.eyebrow {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--blue);
  text-transform: uppercase;
}
.eyebrow-light {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--sparkle);
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
  padding: 14px 26px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--gradient); color: #fff; box-shadow: 0 10px 24px rgba(35,46,255,0.28); }
.btn-primary:hover { color: #fff; opacity: 0.92; }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid #D6DAE2; padding: 12.5px 25px; }
.btn-outline:hover { color: var(--blue); border-color: var(--blue); }
.btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.55); padding: 12.5px 25px; }
.btn-outline-light:hover { color: #fff; border-color: #fff; }

/* ---------- Site header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 64px;
  position: relative;
  z-index: 20;
}
.site-header--overlay { position: absolute; top: 0; left: 0; right: 0; }

.logo { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 64px; width: auto; display: block; }
.brand-logo--sm { height: 26px; }

.site-nav { display: flex; align-items: center; gap: 38px; }
.site-nav a { font-size: 13.5px; font-weight: 500; color: #4B5563; }
.site-nav a.is-active { color: var(--blue); font-weight: 600; }
.site-header--overlay .site-nav a { color: rgba(255,255,255,0.72); }
.site-header--overlay .site-nav a.is-active { color: #fff; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: none; background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--ink); position: relative; transition: 0.2s;
}
.site-header--overlay .nav-toggle span,
.site-header--overlay .nav-toggle span::before,
.site-header--overlay .nav-toggle span::after { background: #fff; }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }

/* ---------- Hero: diagonal split (About / Services / Contact) ---------- */
.hero-split { position: relative; overflow: hidden; }
.hero-split::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--mist);
  clip-path: polygon(64% 0, 100% 0, 100% 100%, 56% 100%);
}
.hero-split-content { position: relative; padding: 36px 0 64px 0; max-width: 720px; }
.hero-split-content h1 { font-size: 46px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 16px 0 20px 0; }
.hero-split-content p { font-size: 16px; line-height: 1.75; color: var(--muted); }

/* ---------- Hero: video atmosphere (Home) ---------- */
.hero-video { position: relative; overflow: hidden; min-height: 660px; background: #141D27; }
.hero-video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(15,23,32,0.94) 0%, rgba(15,23,32,0.78) 38%, rgba(15,23,32,0.32) 66%, rgba(15,23,32,0.08) 100%);
  z-index: 1;
}
.hero-video-media { position: absolute; inset: 0; overflow: hidden; }
.hero-video-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-video-content { position: relative; z-index: 2; padding-top: 152px; padding-bottom: 180px; max-width: 600px; }
.hero-video-content h1 { font-size: 56px; line-height: 1.06; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 18px 0 22px 0; }
.hero-video-content p { font-size: 16.5px; line-height: 1.75; color: #C6CBD3; max-width: 460px; margin: 0 0 34px 0; }

/* ---------- Media placeholders (swap for real photo/video) ---------- */
.media-placeholder {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gradient-diag);
  display: flex; align-items: center; justify-content: center;
  min-height: 260px;
}
.media-placeholder .label {
  position: relative; z-index: 1;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  border: 1px dashed rgba(255,255,255,0.35);
  border-radius: 100px;
  padding: 10px 18px;
  text-align: center;
  max-width: 80%;
}
.media-placeholder--light { background: var(--mist); }
.media-placeholder--light .label { color: var(--muted); border-color: var(--line); }
.media-placeholder--step { aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--radius-md); }
.media-placeholder--step .label { font-size: 10px; padding: 7px 12px; }
.media-placeholder img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Stats bar ---------- */
.stats-bar { background: var(--gradient); }
.stats-bar .wrap { display: grid; grid-template-columns: repeat(5, 1fr); padding: 44px 64px; }
.stat { padding: 0 16px; border-right: 1px solid rgba(255,255,255,0.12); }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: none; padding-right: 0; }
.stat .num { font-size: 32px; font-weight: 800; color: #fff; }
.stat .label { font-size: 11.5px; color: rgba(255,255,255,0.78); margin-top: 6px; }
.stats-bar-note { grid-column: 1 / -1; text-align: center; font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 28px; }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.card { background: #fff; border: 1px solid #E9EBEF; border-radius: var(--radius-lg); padding: 32px 28px; }
.card--tight { padding: 26px 18px; text-align: center; }

.badge { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--gradient); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.badge--sm { width: 44px; height: 44px; border-radius: 12px; }
.badge--lg { width: 64px; height: 64px; border-radius: 16px; }
.badge svg { stroke: #fff; }
.badge--white { background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(20,29,39,0.07); }
.badge--white img { max-width: 60%; max-height: 60%; width: auto; height: auto; object-fit: contain; display: block; }

/* ---------- Sector cards (icon + photo) ---------- */
/* Each card is a single <a> linking to that sector's PDF catalogue, so
   clicking the photo, the icon or the name all open it — see the
   .sector-card-cta label for the visible "button" under the name. */
.sector-card { display: block; background: #fff; border: 1px solid #E9EBEF; border-radius: var(--radius-lg); overflow: hidden; text-align: left; color: inherit; text-decoration: none; cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.sector-card:hover { box-shadow: 0 16px 32px rgba(20,29,39,0.09); transform: translateY(-3px); }
.sector-card-photo { position: relative; aspect-ratio: 4 / 3; background: var(--gradient-diag); overflow: hidden; }
.sector-card-photo img.photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.sector-card-photo .label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5);
  padding: 0 16px;
}
.sector-card-badge { position: relative; z-index: 1; margin: -22px 0 0 18px; }
.sector-card-body { padding: 34px 20px 22px 20px; }
.sector-card-body .name { font-weight: 600; font-size: 14.5px; }
.sector-card-body .sub { font-size: 12px; color: var(--muted-light); margin-top: 4px; }
.sector-card-cta { font-size: 12px; font-weight: 600; color: var(--blue); margin-top: 8px; }
.sector-card:hover .sector-card-cta { text-decoration: underline; }
.sector-card--sm .sector-card-body { padding: 28px 16px 18px 16px; text-align: center; }
.sector-card--sm .sector-card-badge { margin-left: auto; margin-right: auto; }

/* ---------- Section paddings & backgrounds ---------- */
.section { padding: 96px 0; }
.section--tight { padding: 56px 0; }
.section--mist { background: var(--mist); }
.section--dark { background: var(--anthracite); }
.section--dark h2, .section--dark .title { color: #fff; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head--left { text-align: left; }
h2.section-title { font-size: 32px; font-weight: 800; letter-spacing: -0.01em; margin: 14px 0 0 0; }

/* ---------- CTA band (diagonal gradient) ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--gradient);
  clip-path: polygon(0 0, 65% 0, 55% 100%, 0 100%);
}
.cta-band-content { position: relative; padding: 88px 0; max-width: 760px; }
.cta-band-content h2 { font-size: 34px; font-weight: 800; color: #fff; line-height: 1.25; margin: 22px 0 30px 0; max-width: 460px; }
.cta-band-photo {
  position: absolute; inset: 0;
  clip-path: polygon(65% 0, 100% 0, 100% 100%, 55% 100%);
  background: var(--gradient-diag);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 44px;
}
.cta-band-photo img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-band-photo .label {
  position: relative;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); border: 1px dashed rgba(255,255,255,0.3); border-radius: 100px;
  padding: 9px 16px; text-align: center; white-space: nowrap;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--anthracite-2); padding: 64px 0 32px 0; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-top .col-title { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--muted-light); text-transform: uppercase; margin-bottom: 16px; }
.footer-top a, .footer-top span { display: block; font-size: 13.5px; color: #C6CBD3; margin-bottom: 11px; }
.footer-tagline { font-size: 13.5px; color: var(--muted-light); line-height: 1.7; margin-top: 18px; max-width: 260px; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; flex-wrap: wrap; gap: 8px; }
.footer-bottom span { font-size: 12px; color: #6B7481; }

/* ---------- Forms (contact) ---------- */
.field { margin-bottom: 20px; }
.field label { font-size: 12.5px; font-weight: 600; color: #3C4753; margin-bottom: 8px; display: block; }
.field input, .field textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 16px; font-family: var(--font); font-size: 14px; color: var(--ink); background: #fff;
}
.field input::placeholder, .field textarea::placeholder { color: #ABB2BD; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.loc-card { background: var(--mist); border-radius: 16px; padding: 22px; }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap { display: flex; gap: 14px; }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1080px) {
  .wrap { padding-left: 32px; padding-right: 32px; }
  .site-header { padding: 22px 32px; }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-bar .wrap { grid-template-columns: repeat(3, 1fr); row-gap: 24px; padding: 36px 32px; }
  .stat:nth-child(3n+1) { padding-left: 0; }
  .stat:nth-child(3n) { padding-right: 0; border-right: none; }
  .footer-top { grid-template-columns: 1.2fr 1fr 1fr; }
}

@media (max-width: 860px) {
  .site-nav { position: fixed; top: 0; right: 0; bottom: 0; width: 78%; max-width: 320px;
    background: #fff; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 96px 32px 32px 32px; transform: translateX(100%); transition: transform 0.25s ease; z-index: 30; }
  .site-header--overlay .site-nav { background: var(--anthracite-2); }
  .site-nav a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .site-header--overlay .site-nav a { border-bottom-color: rgba(255,255,255,0.1); }
  .site-nav.is-open { transform: translateX(0); }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }

  .grid-3 { grid-template-columns: 1fr 1fr; }
  .hero-split-content h1 { font-size: 38px; }
  .hero-video-content h1 { font-size: 42px; }
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}

@media (max-width: 620px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .site-header { padding: 18px 20px; }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .stats-bar .wrap { grid-template-columns: repeat(2, 1fr); padding: 28px 20px; }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 16px; }
  .stat:nth-child(2n+1) { padding-left: 0; }
  .stat:nth-child(2n) { padding-right: 0; }
  .hero-split-content h1 { font-size: 32px; }
  .hero-split::before { clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%); }
  .hero-video-content h1 { font-size: 34px; }
  .hero-video-content { padding-top: 120px; padding-bottom: 100px; }
  .hero-video-media video { display: none; }
  .hero-video-media { background: center / cover no-repeat url('../img/hero-poster.jpg'); }
  /* Stack the CTA band as two separate blocks on mobile — text first, at
     its own natural height with the gradient as its own background, then
     the photo below at a fixed generous height. Normal flow (rather than
     overlapping absolute layers sized off a percentage of total height)
     guarantees the text is never covered, however many lines the heading
     wraps to, and the photo always gets a proper height instead of a thin
     leftover sliver. */
  .cta-band::before { display: none; }
  .cta-band-content { background: var(--gradient); padding: 44px 0 40px 0; }
  .cta-band-content h2 { font-size: 26px; }
  .cta-band-photo {
    position: relative;
    clip-path: none;
    display: block;
    padding: 0;
    width: 100%;
    height: 260px;
  }
  .field-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* Keep the Creative/Functional/Profitable icons on one row on phones in
   landscape — there's enough width even though portrait mode wraps them. */
@media (orientation: landscape) and (max-width: 900px) {
  .grid-3.pillars-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Photo band (Services — production photos). No external library: a
   duplicated strip of slides, scrolled continuously right-to-left by a
   plain CSS animation (translateX from 0 to -50% — since the strip is
   exactly two copies back to back, that shift lines the seam up
   perfectly and the loop reads as endless). Hover/focus pauses it so a
   photo can actually be looked at; mobile keeps it running since there's
   no hover there. */
.carousel { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.carousel-track {
  display: flex;
  width: max-content;
  animation: carousel-scroll 34s linear infinite;
}
.carousel:hover .carousel-track,
.carousel:focus-within .carousel-track {
  animation-play-state: paused;
}
.carousel-slide {
  flex: 0 0 auto;
  width: 360px;
  height: 204px;
  margin-right: 17px;
  background: var(--gradient-diag);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
/* Hovering a single photo zooms just that one in, within its own frame
   (the slide's overflow:hidden crops it, so it never spills into its
   neighbours). Hovering the band also pauses the auto-scroll (above),
   so the zoomed photo stays put long enough to actually look at. */
.carousel-slide:hover img {
  transform: scale(1.12);
}

@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 620px) {
  .carousel-slide { width: 264px; height: 156px; margin-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { animation: none; }
}

/* Cookie consent banner — injected by main.js on first visit (see the
   "Cookie consent banner" comment there), shown on every page until the
   visitor accepts or declines. Nothing on the site actually waits for
   this choice to load (see cookies.html for why), so declining doesn't
   change behaviour — it's a notice + a recorded acknowledgment, not a
   feature gate. */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  background: var(--anthracite-2);
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 48px rgba(10,14,20,0.35);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
.cookie-banner p {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  margin: 0;
  flex: 1;
}
.cookie-banner p a { color: #fff; font-weight: 600; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner-actions button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  padding: 10px 20px;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.cookie-banner-actions .cookie-accept { background: var(--gradient); color: #fff; }
.cookie-banner-actions .cookie-accept:hover { opacity: 0.92; }
.cookie-banner-actions .cookie-decline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.cookie-banner-actions .cookie-decline:hover { border-color: #fff; }

@media (max-width: 620px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px; flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions button { flex: 1; }
}