@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Permanent+Marker&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { line-height: 1.5; min-height: 100vh; }
img, picture, video, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ============ TOKENS ============ */
:root {
  --black: #0a0a0a;
  --black-2: #131313;
  --black-3: #1a1a1a;
  --line: #2a2a2a;
  --line-soft: #1f1f1f;
  --white: #f5f3ed;
  --white-dim: #c8c5bd;
  --gray: #6b6b6b;
  --pink: #ed2860;
  --pink-deep: #c01a4d;
  --green: #7a9560;

  --font-display: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-accent: 'Permanent Marker', cursive;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --container: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-height: 68px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 180ms;
  --t-med: 280ms;
  --t-slow: 520ms;
}

/* ============ BASE ============ */
html, body { background: var(--black); color: var(--white); }
body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

/* Film grain overlay — applied as fixed pseudo-element over dark sections */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  z-index: 9999;
}

::selection { background: var(--pink); color: var(--white); }

/* ============ TYPOGRAPHY ============ */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
}
h1.display-xl, .display-xl {
  font-size: clamp(3.5rem, 12vw, 11.5rem);
  letter-spacing: -0.01em;
  line-height: 0.85;
}
h2, .display-lg { font-size: clamp(2.4rem, 6vw, 5.5rem); line-height: 0.9; }
h3, .display-md { font-size: clamp(1.6rem, 3vw, 2.5rem); }
h4 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.12em; }

p { color: var(--white-dim); max-width: 60ch; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--white-dim); line-height: 1.55; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white-dim);
}
/* Decorative motif bullet — replaces the ● glyph next to each section eyebrow.
   The ● in HTML is hidden via text-indent; a brand-motif PNG is shown as background.
   Sized in em so it scales with the eyebrow text. Default = cone. Modifiers
   .dot-cat and .dot-lightning swap the motif and adjust width to each icon's
   natural aspect ratio (height stays fixed for line-height consistency). */
.eyebrow .dot {
  display: inline-block;
  width: 0.95em;
  height: 1.55em;
  background: url('../images/brand/iced-packs-bullet-cone.png') center/contain no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: -0.3em;
  margin-right: 0.25em;
}
.eyebrow .dot.dot-cat {
  width: 1.2em;
  background-image: url('../images/brand/iced-packs-bullet-cat.png');
}
.eyebrow .dot.dot-lightning {
  width: 1.5em;
  background-image: url('../images/brand/iced-packs-bullet-lightning.png');
}
.accent-script {
  font-family: var(--font-accent);
  color: var(--pink);
  letter-spacing: 0;
  text-transform: none;
}

/* ============ LAYOUT ============ */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.full { width: 100%; }
section { position: relative; }
.section-pad { padding-block: clamp(4rem, 8vw, 9rem); }
.section-pad-sm { padding-block: clamp(3rem, 5vw, 5rem); }

.grid { display: grid; gap: 1px; }
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }

/* Divider line */
.rule { height: 1px; background: var(--line); width: 100%; }

/* ============ NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding-inline: var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 0.05em;
  line-height: 1;
}
.brand .dollar { color: var(--pink); }
.brand:hover .dollar { color: var(--white); transition: color var(--t-fast) var(--ease); }

/* ============ BRAND TYPO (image-based wordmark) ============ */
/*
  Used wherever the brand name would otherwise be rendered as large styled text.
  Always wrapped in the same semantic element (h1, a.brand, etc.) the text
  would have used, so heading order and link structure are preserved.
*/
.brand-typo {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}
.brand-typo--hero {
  display: block;
  width: auto;
  height: auto;
  max-width: min(85vw, 480px);
  margin: 0 auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 30px rgba(237, 40, 96, 0.18));
}
.brand-typo--section {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 280px;
  vertical-align: middle;
}
.brand-typo--footer {
  display: block;
  height: 38px;
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  transition: filter var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.footer-brand .brand:hover .brand-typo--footer {
  filter: drop-shadow(0 2px 8px rgba(237, 40, 96, 0.4));
  transform: scale(1.03);
}

/* Wordmark used in nav header — iced-out diamond-chain typography on transparent bg */
.nav-logo {
  height: 32px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  transition: transform var(--t-med) var(--ease), filter var(--t-med) var(--ease);
}
.brand:hover .nav-logo { transform: scale(1.05); filter: drop-shadow(0 2px 8px rgba(237, 40, 96, 0.35)); }
.nav-links { display: none; gap: 2rem; }
.nav-links a {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-dim);
  position: relative;
  padding: 0.4rem 0;
  transition: color var(--t-fast) var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { transform: scaleX(1); }

/* ============ TOP NAV (full categories with hover dropdowns) ============ */
.top-nav { display: none; align-items: center; }
.top-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.5rem;
}
.top-nav-item {
  position: relative;
  padding: 0.75rem 0;
}
.top-nav-link {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-dim);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.4rem 0;
  transition: color var(--t-fast) var(--ease);
}
.top-nav-link:hover { color: var(--white); }
.top-nav-item.has-dropdown > .top-nav-link::after {
  content: " ▾";
  font-size: 0.7em;
  opacity: 0.55;
  margin-left: 0.15em;
}

.top-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  background: rgba(10, 10, 10, 0.96);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
  z-index: 1000;
}
.top-nav-dropdown li a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--white-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.top-nav-dropdown li a:hover {
  background: rgba(255,255,255,0.06);
  color: var(--white);
}

.top-nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  gap: 2rem;
  min-width: 460px;
  padding: 1.25rem 1.5rem;
  background: rgba(10, 10, 10, 0.96);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
  z-index: 1000;
}
.mega-col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  color: var(--pink);
  font-weight: 500;
}
.mega-col ul { list-style: none; padding: 0; margin: 0; }
.mega-col li a {
  display: block;
  padding: 0.4rem 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--white-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.mega-col li a:hover { color: var(--white); }

.top-nav-item.has-dropdown:hover > .top-nav-dropdown,
.top-nav-item.has-dropdown:focus-within > .top-nav-dropdown,
.top-nav-item.has-dropdown.is-open > .top-nav-dropdown,
.top-nav-item.has-mega:hover > .top-nav-mega,
.top-nav-item.has-mega:focus-within > .top-nav-mega,
.top-nav-item.has-mega.is-open > .top-nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Right-anchor the last few dropdowns so they don't overflow viewport */
.top-nav-item:nth-last-child(-n+3) .top-nav-dropdown { left: auto; right: 0; }

@media (min-width: 1100px) {
  .top-nav { display: flex; }
}

.nav-utils { display: flex; align-items: center; gap: 1rem; }
.nav-utils button, .nav-utils a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  color: var(--white-dim);
  transition: color var(--t-fast) var(--ease);
}
.nav-utils button:hover, .nav-utils a:hover { color: var(--white); }
.lang-toggle {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  border: 1px solid var(--line);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: auto;
  width: auto;
  transition: border-color var(--t-fast) var(--ease);
}
.lang-toggle:hover { border-color: var(--white); }
/* Reset .nav-utils button rules for the lang-btn pair so they sit inline. */
.nav-utils .lang-toggle .lang-btn {
  width: auto;
  height: auto;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--gray);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.nav-utils .lang-toggle .lang-btn:hover { color: var(--white-dim); }
.nav-utils .lang-toggle .lang-btn.is-active { color: var(--white); }
.lang-toggle .lang-sep { color: var(--gray); }
/* Backwards-compat for any cached page still serving .lang-en/.lang-fr spans */
.lang-toggle .active { color: var(--white); }
.lang-toggle .inactive { color: var(--gray); }

.nav-utils .menu-btn {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  height: 36px;
  justify-content: center;
  padding: 0;
}
.menu-btn span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--white);
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
}
.menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============ HAMBURGER DRAWER (overlay menu, all viewports) ============ */
/* Side-drawer panel slides in from the right with a dim+blur backdrop. */
.menu-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear var(--t-slow);
}
.menu-drawer.open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.menu-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.menu-drawer.open .menu-drawer-backdrop { opacity: 1; }
.menu-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100vw, 28rem);
  background: var(--black);
  border-left: 1px solid var(--line);
  padding: calc(var(--nav-height) + 1.75rem) clamp(1.5rem, 4vw, 2.5rem) 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease);
  display: flex;
  flex-direction: column;
}
.menu-drawer.open .menu-drawer-panel { transform: translateX(0); }

/* Accordion category list */
.menu-cats { list-style: none; padding: 0; margin: 0; display: block; }
.menu-cat { border-bottom: 1px solid var(--line-soft); }
.menu-cat:first-child { border-top: 1px solid var(--line-soft); }
.menu-cat-toggle {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 1.05rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: color var(--t-fast) var(--ease);
}
.menu-cat-toggle:hover,
.menu-cat-toggle[aria-expanded="true"] { color: var(--pink); }
.menu-cat-chev {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-med) var(--ease);
}
.menu-cat-toggle[aria-expanded="true"] .menu-cat-chev { transform: rotate(45deg); }
.menu-cat-link {
  display: block;
  padding: 1.05rem 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--t-fast) var(--ease);
}
.menu-cat-link:hover { color: var(--pink); }
.menu-cat-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.menu-cat-sub[hidden] { display: none; }
.menu-cat-sub a {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--white-dim);
  padding: 0.35rem 0;
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.menu-cat-sub a:hover { color: var(--white); padding-left: 0.4rem; }

/* Drawer footer meta */
.menu-drawer .meta {
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim);
}

/* Lift menu-btn above drawer backdrop so it remains clickable when open */
.nav-utils .menu-btn { position: relative; z-index: 210; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.8rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--white);
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-med) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--pink); border-color: var(--pink); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-pink { background: var(--pink); border-color: var(--pink); color: var(--white); }
.btn-pink:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.btn .arrow { transition: transform var(--t-med) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Underline link */
.ulink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--white);
  padding-bottom: 4px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ulink:hover { color: var(--pink); border-color: var(--pink); }

/* ============ HERO ============ */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: clamp(4rem, 10vw, 8rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(237,40,96,0.08) 0%, transparent 70%),
    radial-gradient(40% 40% at 80% 80%, rgba(122,149,96,0.06) 0%, transparent 70%);
  z-index: -1;
}
.hero-inner { width: 100%; max-width: 1280px; text-align: center; position: relative; }

.hero-logo-slot {
  width: min(580px, 82vw);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  position: relative;
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 60px rgba(237, 40, 96, 0.12));
  animation: hero-neon-breathe 3s ease-in-out 1100ms infinite;
  will-change: filter;
}

.hero-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  transform: scale(1.20) rotate(var(--scroll-rotation, 0deg)) translateZ(0);
  transform-origin: center center;
  transition: none;
  will-change: transform;
  backface-visibility: hidden;
}

/* Choreographed hero entrance — stamps in, then breathes, spins on scroll. */
@keyframes hero-stamp-in {
  0%   { transform: scale(0.3) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(2deg);  opacity: 1; }
  80%  { transform: scale(0.96) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg);     opacity: 1; }
}

@keyframes hero-impact-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.04) rotate(0deg); }
}

@keyframes hero-neon-breathe {
  0%, 100% {
    filter:
      drop-shadow(0 30px 80px rgba(0, 0, 0, 0.65))
      drop-shadow(0 0 12px rgba(237, 40, 96, 0.30))
      drop-shadow(0 0 32px rgba(237, 40, 96, 0.45))
      drop-shadow(0 0 56px rgba(127, 212, 232, 0.20));
  }
  50% {
    filter:
      drop-shadow(0 30px 80px rgba(0, 0, 0, 0.65))
      drop-shadow(0 0 16px rgba(237, 40, 96, 0.55))
      drop-shadow(0 0 44px rgba(237, 40, 96, 0.75))
      drop-shadow(0 0 72px rgba(127, 212, 232, 0.40));
  }
}

/* Scroll-linked rotation: the slot rotates as user scrolls through the hero,
   composing with the img's entrance stamp/breathe without restarting them. */

@media (prefers-reduced-motion: reduce) {
  .hero-logo {
    animation: none;
    transform: none !important;
    transition: none !important;
  }
  .hero-logo-slot {
    animation: none;
    filter: drop-shadow(0 0 16px rgba(237, 40, 96, 0.45));
  }
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero-title {
  margin-top: 1rem;
  font-size: clamp(2.4rem, 13vw, 11rem);
  line-height: 0.85;
  letter-spacing: -0.015em;
  max-width: 100%;
  overflow-wrap: break-word;
}
.hero-title .ice {
  display: inline-block;
  background: linear-gradient(180deg, #ffffff 0%, #d9d6cd 50%, #aeaba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.hero-title .dollar {
  color: var(--pink);
  display: inline-block;
  transform: translateY(-0.05em);
}
.hero-headline {
  margin: 2rem auto 0;
  max-width: 22ch;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.95;
  color: var(--white);
}
.hero-headline .punct { color: var(--pink); }
.hero-sub {
  margin: 1.5rem auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 2.2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}
.hero-sub .punct { color: var(--pink); }
.hero-lead {
  margin: 1.5rem auto 0;
  max-width: 60ch;
  color: var(--white-dim);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.55;
}
.hero-ctas {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray);
}
.scroll-cue .line { width: 1px; height: 36px; background: linear-gradient(180deg, transparent, var(--white-dim) 40%, transparent 100%); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-8px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
@media (max-width: 768px) {
  .scroll-cue { display: none; }
}

/* ============ HERO MARQUEE ============ */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--black);
  overflow: hidden;
  padding-block: 1rem;
}
.marquee-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: roll 38s linear infinite;
  width: max-content;
}
.marquee span {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
.marquee span::after { content: '✦'; color: var(--pink); }
@keyframes roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ SECTION HEADERS ============ */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-head .row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.section-head h2 { max-width: 18ch; }
.section-head .copy { max-width: 42ch; color: var(--white-dim); }

/* ============ CATEGORY GRID ============ */
.cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.cat-card {
  position: relative;
  background: var(--black);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  cursor: pointer;
  transition: background var(--t-med) var(--ease);
}
.cat-card .visual {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 80% at 50% 30%, var(--cat-tone, #1a1a1a) 0%, transparent 60%),
    var(--black);
  transition: transform var(--t-slow) var(--ease);
}
.cat-card .visual svg, .cat-card .visual .ph-shape {
  opacity: 0.85;
  transition: opacity var(--t-med) var(--ease), transform var(--t-slow) var(--ease);
}
.cat-card:hover .visual { transform: scale(1.04); }
.cat-card:hover .visual svg, .cat-card:hover .visual .ph-shape { opacity: 1; }
.cat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.cat-card .body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cat-card .num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--white-dim);
}
.cat-card h3 {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  color: var(--white);
}
.cat-card .desc { color: var(--white-dim); font-size: 0.95rem; max-width: 36ch; }
.cat-card .arrow-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.cat-card .arrow-row .arrow { transition: transform var(--t-med) var(--ease); }
.cat-card:hover .arrow-row .arrow { transform: translateX(6px); color: var(--pink); }

/* Placeholder visual shapes — used until real photos arrive */
.ph-shape {
  width: 60%;
  aspect-ratio: 1;
  border: 1.5px solid var(--white-dim);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--white-dim);
  letter-spacing: 0.04em;
}
.ph-shape.circle { border-radius: 50%; }
.ph-shape.diamond { transform: rotate(45deg); }
.ph-shape.diamond span { transform: rotate(-45deg); }
.ph-shape.bag { border-radius: 8% 8% 12% 12% / 4% 4% 14% 14%; }

/* ============ DESIGN STUDIO ============ */
.design-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.design-card {
  background: var(--black);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 380px;
  position: relative;
  transition: background var(--t-med) var(--ease);
}
.design-card:hover { background: var(--black-2); }
.design-card .num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}
.design-card .icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--pink);
}
.design-card h3 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  color: var(--white);
}
.design-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.design-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--white-dim);
  font-size: 0.95rem;
  line-height: 1.5;
}
.design-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--pink);
  transform: rotate(45deg);
}
.design-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.design-cta-caption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  text-align: center;
  max-width: 50ch;
}

/* ============ WEB SERVICES ============ */
.web-services-intro {
  max-width: 70ch;
  margin: 1.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.web-services-intro p {
  color: var(--white-dim);
  font-size: 0.98rem;
  line-height: 1.6;
}
.web-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.web-services-card {
  background: var(--black);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: background var(--t-med) var(--ease);
}
.web-services-card:hover { background: var(--black-2); }
.web-services-card .num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}
.web-services-card h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  color: var(--white);
  line-height: 1.2;
}
.web-services-card p {
  color: var(--white-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}
@media (min-width: 600px) {
  .web-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .web-services-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============ PORTFOLIO STRIP ============ */
.portfolio-strip {
  background: var(--black);
}
.client-rail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.client-card {
  background: var(--black);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  transition: background var(--t-med) var(--ease);
}
.client-card:hover { background: var(--black-2); }
.client-card .ticker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--gray);
  text-transform: uppercase;
}
.client-card .name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}
.client-card .work {
  font-size: 0.85rem;
  color: var(--white-dim);
}
.client-card .footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.client-card .footer-row .arrow { transition: transform var(--t-med) var(--ease); }
.client-card:hover .footer-row .arrow { transform: translateX(6px); color: var(--pink); }

.portfolio-cta {
  display: flex;
  justify-content: center;
  padding-top: clamp(2rem, 4vw, 3rem);
}

/* ============ WHY GRID ============ */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.why-card {
  background: var(--black);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 280px;
}
.why-card .icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--pink);
}
.why-card .num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}
.why-card h3 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  color: var(--white);
}
.why-card p { color: var(--white-dim); font-size: 0.95rem; }

/* ============ PROCESS ============ */
.process {
  background: var(--black);
}
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.step {
  background: var(--black);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  min-height: 240px;
}
.step .step-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  color: var(--pink);
  letter-spacing: 0.02em;
}
.step h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); color: var(--white); }
.step p { color: var(--white-dim); font-size: 0.95rem; }

/* ============ BIG CTA ============ */
.big-cta {
  background: var(--black);
  text-align: center;
  padding-block: clamp(5rem, 12vw, 10rem);
  border-block: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.big-cta::before {
  content: 'ICED ICED ICED ICED ICED';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(8rem, 24vw, 22rem);
  color: var(--black-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.big-cta > * { position: relative; z-index: 1; }
.big-cta h2 {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.95;
}
.big-cta h2 .punct { color: var(--pink); }
.big-cta .lead {
  margin: 1.5rem auto 0;
  max-width: 50ch;
}
.big-cta .ctas {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============ FOOTER ============ */
.footer {
  background: var(--black);
  border-top: 1px solid var(--line);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 32ch;
}
.footer-brand .brand { font-size: 2rem; }
.footer-brand p { color: var(--white-dim); font-size: 0.95rem; }
.footer-brand .addr {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 0.5rem;
}
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.25rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a {
  font-size: 0.92rem;
  color: var(--white-dim);
  transition: color var(--t-fast) var(--ease);
}
.footer-col a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}
.socials { display: flex; gap: 1rem; }
.socials a {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--white-dim);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.socials a:hover { color: var(--black); background: var(--white); border-color: var(--white); }
.legal-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.legal-links a:hover { color: var(--white); }

/* ============ INNER PAGE HERO ============ */
.page-hero {
  padding: 6rem var(--gutter) clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
@media (max-width: 767px) {
  .page-hero { padding-top: 4rem; }
}
.page-hero .eyebrow { display: inline-block; margin-bottom: 1.5rem; }
.page-hero h1 {
  font-size: clamp(3rem, 9vw, 7rem);
  letter-spacing: -0.01em;
  line-height: 0.9;
}
.page-hero .lead { margin-top: 1.5rem; margin-inline: auto; }

.coming-soon {
  text-align: center;
  padding: clamp(4rem, 10vw, 8rem) var(--gutter);
}
.coming-soon .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--pink);
  color: var(--pink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 2rem;
}
.coming-soon h2 { max-width: 18ch; margin-inline: auto; margin-bottom: 1.5rem; }
.coming-soon p { margin-inline: auto; }
.coming-soon .ctas { margin-top: 2.5rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ============ CONTACT FORM ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact-info .block h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--white-dim);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}
.contact-info .block p, .contact-info .block a {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--white);
  text-transform: uppercase;
}
.contact-info .block a:hover { color: var(--pink); }

.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--line);
  padding: 0.95rem 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; font-family: var(--font-body); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--white);
  background: var(--black-2);
}
.field-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }

.file-drop {
  border: 1px dashed var(--line);
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.file-drop:hover { border-color: var(--white); background: var(--black-2); }
.file-drop input { display: none; }
.file-drop .label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.file-drop .hint {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--gray);
}

/* ============ ANIMATIONS ============ */
/* Progressive enhancement: only hide fade-ins when JS is confirmed running. */
.js .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .fade-in.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    transition: none !important;
  }
  .fade-in { opacity: 1; transform: none; }
}

/* ============ RESPONSIVE ============ */
@media (min-width: 600px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .client-rail { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .design-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

@media (min-width: 900px) {
  /* Hamburger is now sole nav at all viewports — desktop-only hides removed.
     .nav-links is permanently hidden below. */
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .client-rail { grid-template-columns: repeat(4, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1.5fr; gap: 6rem; }
}

/* .nav-links inline navigation — slim 3-link studio nav (Portfolio/About/Contact).
   Hidden on mobile (the hamburger covers everything); shown inline on desktop.
   Category pages (Stickers/Apparel/etc.) live in the hamburger drawer, not here. */
@media (min-width: 700px) {
  .nav-links { display: flex; }
}

@media (min-width: 1200px) {
  .client-rail { grid-template-columns: repeat(4, 1fr); }
}

/* Subtle scroll-bar styling */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--white-dim); }

/* ============ CONTACT BLOCK NOTE (sub-line under primary contact link) ============ */
.contact-info .block-note {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--white-dim);
  margin-top: 0.6rem;
}

/* ============ FLOATING WHATSAPP BUTTON ============ */
.whatsapp-floating {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.whatsapp-floating:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
  color: #fff;
}
.whatsapp-floating svg { width: 28px; height: 28px; }
@media (max-width: 480px) {
  .whatsapp-floating {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
  }
  .whatsapp-floating svg { width: 24px; height: 24px; }
}

/* ============ ABOUT — long-form content block ============ */
.about-content {
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(4rem, 9vw, 7rem);
}
.about-content-inner {
  max-width: 720px;
  margin-inline: auto;
}
.about-content-inner p {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.7;
  color: var(--white-dim);
  max-width: none;
  margin-bottom: 1.5rem;
}
.about-content-inner p:last-child { margin-bottom: 0; }
.about-content-inner .about-closer {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}
.about-content-inner .about-closer .accent { color: var(--pink); }

/* ============ SECTION VIDEOS (cat-card visual) ============ */
.section-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Custom services card: video has different aspect ratio, contain to fit fully */
[data-section="custom"] .section-video {
  object-fit: contain;
  background: #000;
}