/* ===================================================================
   Just Motion — production stylesheet
   Palette: charcoal, warm black, cream, warm white, emerald, dark green,
   dusty rose, blush, neutral grey. Green kept as an accent.
   Type: DM Serif Display (headings), DM Sans (body).
=================================================================== */

:root {
  --charcoal: #17171a;
  --warm-black: #0e0e0c;
  --cream: #faf6ee;
  --warm-white: #fbfaf6;
  --emerald: #1ba37e;
  --dark-green: #0b3b2a;
  --dusty-rose: #c98b84;
  --blush: #ecd8d2;
  --grey: #6d6d6a;
  --line: #e6e2d9;
  --ink: #1d1d1b;

  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1200px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--warm-white);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.eyebrow {
  display: inline-block; font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--emerald); font-weight: 600; margin-bottom: 1rem;
}
.eyebrow .idx { color: var(--grey); margin-right: 0.4rem; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; }
.section-heading { font-size: clamp(1.9rem, 4.5vw, 3rem); }

/* ---- Button system ----
   Every button is readable in its DEFAULT state (no reliance on hover).
   Variants: .btn (primary, dark fill) · .btn--light (cream fill, for dark sections)
   · .btn--ghost-dark (cream text+border, for dark sections)
   · .btn--ghost-light (ink text+border, for light sections). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; line-height: 1.1;
  padding: 0.85rem 1.6rem; border-radius: 50px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--cream); cursor: pointer; text-align: center;
  transition: transform 0.2s ease, background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.18); background: #000; color: #fff; }

/* cream-filled primary for dark backgrounds */
.btn--light { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--light:hover { background: #fff; color: var(--ink); }

/* outline on DARK sections: cream text + cream border, visible by default */
.btn--ghost-dark { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn--ghost-dark:hover { background: var(--cream); color: var(--ink); }

/* outline on LIGHT sections: ink text + ink border, visible by default */
.btn--ghost-light { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost-light:hover { background: var(--ink); color: var(--cream); }

/* emerald primary (used on the full-portfolio CTA for prominence) */
.btn--emerald { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.btn--emerald:hover { background: #158a6a; border-color: #158a6a; color: #fff; }

/* shared states */
.btn:active { transform: translateY(0); }
.btn:focus-visible, a:focus-visible, .work-link:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; border-radius: 6px; }
.btn.is-disabled, .btn[aria-disabled="true"] {
  background: var(--line); border-color: var(--line); color: var(--grey);
  cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none;
}

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,250,246,0.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.logo-text { font-family: var(--font-serif); font-size: 1.4rem; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 1.8rem; list-style: none; }
.nav-links a { font-size: 0.93rem; font-weight: 500; color: var(--ink); transition: color 0.2s; }
.nav-links a:hover { color: var(--emerald); }
.nav-cta { padding: 0.6rem 1.2rem; }
/* nav CTA is a .btn inside .nav-links, so raise specificity to keep its text readable (cream on dark) */
.nav-links a.nav-cta { color: var(--cream); }
.nav-links a.nav-cta:hover { color: var(--cream); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.4rem; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: 0.3s; }

/* ---- Hero (full-bleed real footage) ---- */
.hero {
  background: var(--charcoal); color: var(--cream); position: relative; overflow: hidden;
  min-height: clamp(560px, 88vh, 900px); display: flex; align-items: center;
}
/* media layer */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-media video { opacity: 0; transition: opacity 1.1s ease; }
.hero-media video.is-playing { opacity: 1; }
/* legibility scrim: dark at left/bottom so copy always reads */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(15,15,17,0.93) 0%, rgba(15,15,17,0.78) 38%, rgba(15,15,17,0.30) 70%, rgba(15,15,17,0.42) 100%),
    linear-gradient(to top, rgba(15,15,17,0.85) 0%, rgba(15,15,17,0) 42%);
}
/* subtle film-grain / scanline texture for craft */
.hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(4rem, 10vw, 7rem); }
/* NOTE: never size this block in `ch` — `ch` resolves against .hero-copy's own
   1rem font, not the headline's, which collapses the h1 to one word per line.
   The measure is set on the h1 itself, where `ch` means what you expect. */
.hero-copy { max-width: min(56rem, 100%); }
.hero-eyebrow { color: var(--emerald); }
.hero h1 {
  font-size: clamp(2.3rem, 4.9vw, 4.1rem);
  line-height: 1.06;
  max-width: 19ch; /* 3 balanced lines at desktop, CTAs stay above the fold */
  color: var(--cream); margin-bottom: 1.4rem; text-wrap: balance;
}
.hero h1 em { color: var(--blush); }
.hero-lead { font-size: 1.12rem; color: #ded9cf; max-width: 38ch; margin-bottom: 2rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero-meta { margin-top: 2.6rem; display: flex; gap: 1.6rem; flex-wrap: wrap; font-size: 0.85rem; color: #c3bfb5; }
.hero-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }
/* "now playing" badge — signals the footage is their own work */
.hero-badge {
  position: absolute; z-index: 2; right: var(--pad); bottom: clamp(1.5rem, 4vw, 2.5rem);
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #cfcbc1;
  background: rgba(15,15,17,0.55); border: 1px solid rgba(255,255,255,0.16);
  padding: 0.5rem 0.9rem; border-radius: 50px; backdrop-filter: blur(6px);
}
.hero-badge .rec { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); animation: recpulse 2s ease-in-out infinite; }
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
/* scroll cue */
.hero-cue { position: absolute; z-index: 2; left: var(--pad); bottom: clamp(1.5rem,4vw,2.5rem); display: flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #9b978d; }
.hero-cue i { display: block; width: 34px; height: 1px; background: linear-gradient(90deg, var(--emerald), transparent); animation: cueslide 2.4s ease-in-out infinite; }
@keyframes cueslide { 0%,100% { transform: translateX(0); opacity: .4 } 50% { transform: translateX(8px); opacity: 1 } }

/* ---- Scroll progress ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 60;
  background: linear-gradient(90deg, var(--emerald), var(--blush));
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}

/* ---- Stats band ---- */
.stats { background: var(--warm-black); color: var(--cream); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat-n { font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 3rem); color: var(--cream); line-height: 1; }
.stat-n .suf { color: var(--emerald); }
.stat-l { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9b978d; margin-top: 0.5rem; }

/* ---- Marquee strip ---- */
.strip { background: var(--warm-black); color: var(--cream); padding-block: 0.9rem; overflow: hidden; white-space: nowrap; }
.strip-track { display: inline-flex; gap: 2.4rem; animation: marquee 26s linear infinite; }
.strip-item { font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: #cfcbc1; }
.strip-item b { color: var(--emerald); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Selected Work ---- */
.work { background: var(--cream); }
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.6rem); }
.work-card { background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s; }
.work-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.10); }
.work-cover { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #d7d3ca; }
.work-cover::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0)); }
.work-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.6s ease, opacity 0.5s ease; }
.work-card:hover .work-cover img { transform: scale(1.06); }
/* hover-to-play preview video sits above the still */
.work-cover video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.45s ease; z-index: 1;
}
.work-cover video.is-playing { opacity: 1; }
/* small "play" affordance so people know there's motion */
.work-play {
  position: absolute; z-index: 2; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(15,15,17,0.62); border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.work-play svg { margin-left: 2px; }
.work-card:hover .work-play { opacity: 0; transform: scale(0.8); }
.work-cat { position: absolute; z-index: 2; top: 12px; left: 12px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(23,23,26,0.9); color: var(--cream); padding: 0.4rem 0.75rem; border-radius: 50px; font-weight: 600; }
.work-body { padding: 1.3rem 1.3rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.work-body h3 { font-size: 1.4rem; }
.work-body p { font-size: 0.95rem; color: var(--grey); flex: 1; }
.work-link { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.92rem; color: var(--ink); margin-top: 0.4rem; }
.work-link svg { transition: transform 0.2s; }
.work-link:hover svg { transform: translate(2px,-2px); }
.work-link.disabled { color: var(--grey); font-weight: 500; cursor: default; }
.work-link .badge { font-size: 0.72rem; background: var(--blush); color: var(--dark-green); padding: 0.2rem 0.6rem; border-radius: 50px; font-weight: 600; }
.work-allcta { margin-top: 2.6rem; text-align: center; }

/* ---- Services ---- */
.services { background: var(--warm-white); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.4rem; }
.service-card { background: var(--charcoal); color: var(--cream); border-radius: var(--radius); padding: 1.8rem 1.6rem; transition: transform 0.3s; }
.service-card:hover { transform: translateY(-4px); }
.service-num { font-family: var(--font-serif); font-size: 1.1rem; color: var(--emerald); margin-bottom: 0.8rem; }
.service-card h3 { font-size: 1.3rem; color: var(--cream); margin-bottom: 0.6rem; }
.service-card p { font-size: 0.94rem; color: #cbc7bd; }
.service-note { text-align: center; margin-top: 2rem; color: var(--grey); font-size: 0.95rem; }

/* ---- Process ---- */
.process { background: var(--cream); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.4rem; }
.process-step { background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.4rem; }
.process-step.accent { background: var(--dark-green); color: var(--cream); border-color: var(--dark-green); }
.process-step.accent h3, .process-step.accent .step-n { color: var(--cream); }
.process-step.accent p { color: #cfe3da; }
.step-n { font-family: var(--font-serif); font-size: 1.6rem; color: var(--emerald); }
.process-step h3 { font-size: 1.25rem; margin: 0.5rem 0; }
.process-step p { font-size: 0.92rem; color: var(--grey); }

/* ---- Drone band (interactive) ---- */
.drone { background: var(--dark-green); color: var(--cream); position: relative; overflow: hidden; }
/* topographic contour treatment */
.drone-topo { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    repeating-radial-gradient(circle at 78% 42%, rgba(255,255,255,0.07) 0 1px, transparent 1px 42px),
    repeating-radial-gradient(circle at 78% 42%, rgba(27,163,126,0.10) 0 1px, transparent 1px 84px);
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%); }
.drone-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
/* the craft that follows the pointer */
.drone-craft { position: absolute; top: 0; left: 0; z-index: 1; width: 96px; height: auto;
  will-change: transform; transition: opacity 0.4s ease; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.35)); pointer-events: none; }
.drone-craft.drone-rest { top: 16%; right: 8%; left: auto; }
@media (prefers-reduced-motion: reduce) { .drone-craft { transition: none; } }
.drone .eyebrow { color: var(--blush); }
.drone h2 { color: var(--cream); font-size: clamp(1.8rem,4vw,2.6rem); }
.drone p { color: #cfe3da; margin-top: 1rem; max-width: 46ch; }
/* real aerial footage inside the drone band */
.drone-reel { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 22px 50px rgba(0,0,0,0.32); }
.drone-reel img, .drone-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drone-reel video { opacity: 0; transition: opacity 0.8s ease; }
.drone-reel video.is-playing { opacity: 1; }
.drone-reel .tagline {
  position: absolute; z-index: 2; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #e7efe9;
  background: rgba(11,59,42,0.6); border: 1px solid rgba(255,255,255,0.2);
  padding: 0.4rem 0.8rem; border-radius: 50px; backdrop-filter: blur(6px);
}
.drone-card { border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius); padding: 1.6rem; background: rgba(255,255,255,0.04); margin-top: 1.2rem; }
.drone-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.drone-card li { display: flex; gap: 0.6rem; font-size: 0.95rem; color: #e4efe9; }
.drone-card li::before { content: "▲"; color: var(--emerald); font-size: 0.7rem; margin-top: 0.35rem; }

/* ---- Brands ---- */
.brands { background: var(--warm-white); text-align: center; }
.brands-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2.2rem; }
.brand-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; align-items: center; justify-content: center; transition: border-color 0.3s, transform 0.3s; }
.brand-tile:hover { border-color: var(--emerald); transform: translateY(-3px); }
.brand-mark { font-family: var(--font-serif); font-size: 1.25rem; color: var(--charcoal); opacity: 0.55; transition: opacity 0.3s, color 0.3s; }
.brand-tile:hover .brand-mark { opacity: 1; color: var(--dark-green); }
.brand-label { font-size: 0.72rem; color: var(--grey); }
.brands-note { margin-top: 1.6rem; font-size: 0.85rem; color: var(--grey); }

/* ---- Founders ---- */
.founders { background: var(--cream); }
.founders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); margin-top: 2.4rem; }

/* The founder portraits are pre-cut collage artwork — the torn paper sheet AND the
   white sticker outline are baked into the source PNGs. So: no card chrome, and no
   CSS paper underneath (that would double up the paper). The artwork IS the card.
   Both files are normalised to an identical 820x1280 canvas so the two columns
   align and the tape anchors below land on paper in BOTH sheets.
   drop-shadow (not box-shadow) so the shadow follows the irregular torn silhouette
   instead of a rectangle.
   Fallback: no WebP-alpha support -> the original uncut JPEG. */
.founder-card { background: none; border: 0; display: flex; flex-direction: column; }
.founder-photo {
  position: relative; aspect-ratio: 820 / 1280; background: none;
  filter: drop-shadow(0 10px 16px rgba(29,29,27,0.16));
  transition: transform 0.55s cubic-bezier(0.2,0.7,0.2,1);
}
.founder-photo picture { position: relative; z-index: 1; display: block; height: 100%; }
.founder-photo img {
  position: relative; z-index: 1; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
}

/* ---- Push pin holding each sheet to the page ----
   THE POSITION IS NOT ARBITRARY — it was derived by measuring the alpha of both
   PNGs row by row, and it is the only pocket that works. The constraint:
     - the sheets are a narrow peak at the top (paper spans just x 36-54% at y=2%)
       and only widen lower down, so anywhere near the box corners is transparent
       space and the pin would float in mid-air;
     - the top-centre IS paper, but it's also where both heads are — a pin there
       sits on their heads like a balloon (Megan's hair reaches the paper's peak);
     - lower down the paper is wide, but their arms flare outward, so the
       person-free margin closes up again.
   The one pocket that is paper-but-not-person in BOTH sheets is the upper-right
   lobe at roughly y 5-10%, x 55-64%. Hence the values below.
   If the artwork is ever replaced, re-measure before moving this. */
.founder-photo::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  top: 5.5%; left: 58%; width: 4.6%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, #fff 0%, rgba(255,255,255,0.5) 15%, rgba(255,255,255,0) 44%),
    radial-gradient(circle at 64% 74%, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 58%),
    radial-gradient(circle at 50% 44%, #23b98f 0%, #14795e 60%, #0a4534 100%);
  box-shadow: 0 3px 7px rgba(29,29,27,0.34), inset 0 -1px 2px rgba(0,0,0,0.28);
}
/* each sheet sits at a slightly different angle, straightening on hover */
.founders-grid .founder-card:nth-child(1) .founder-photo { transform: rotate(-1.5deg); }
.founders-grid .founder-card:nth-child(2) .founder-photo { transform: rotate(1.7deg); }
.founders-grid .founder-card:hover .founder-photo { transform: rotate(0deg) translateY(-5px); }
@media (prefers-reduced-motion: reduce) {
  .founder-photo, .founders-grid .founder-card:hover .founder-photo { transition: none; }
}

.founder-tag { margin-bottom: 0.75rem; }
.founder-name { font-family: var(--font-serif); font-size: 1.75rem; line-height: 1.1; color: var(--ink); }
.founder-role { font-size: 0.76rem; letter-spacing: 0.05em; color: var(--dark-green); font-weight: 600; margin-top: 0.2rem; }
.founder-body { padding: 1.3rem 0.4rem 0; }
.founder-body p { font-size: 0.95rem; color: var(--grey); }
.founder-skills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.founder-skills span {
  font-size: 0.72rem; letter-spacing: 0.04em; color: var(--dark-green);
  background: #eef3f0; border: 1px solid #dbe7e1; padding: 0.28rem 0.6rem; border-radius: 50px;
}

/* ---- Manifesto ---- */
.manifesto { background: var(--charcoal); color: var(--cream); text-align: center; }
.manifesto blockquote { font-family: var(--font-serif); font-size: clamp(1.5rem,3.5vw,2.4rem); line-height: 1.3; max-width: 22ch; margin: 0 auto; }
.manifesto blockquote em { color: var(--blush); }
.manifesto .attr { margin-top: 1.2rem; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--emerald); }

/* ---- Packages ---- */
.packages { background: var(--warm-white); }
.packages-sub { max-width: 52ch; color: var(--grey); margin-top: 0.8rem; }
.pkg-cat-label { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin: 2.4rem 0 1.2rem; }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.pkg-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
.pkg-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem 1.5rem; background: var(--cream); display: flex; flex-direction: column; }
.pkg-card.featured { border-color: var(--emerald); box-shadow: 0 0 0 1px var(--emerald); }
.pkg-badge { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--emerald); font-weight: 600; }
.pkg-name { font-family: var(--font-serif); font-size: 1.7rem; margin: 0.4rem 0 0.3rem; }
.pkg-tagline { font-size: 0.9rem; color: var(--grey); min-height: 2.4em; }
.pkg-price { font-size: 1.05rem; margin: 1rem 0; color: var(--grey); }
.pkg-price strong { font-family: var(--font-serif); font-size: 2rem; color: var(--ink); }
.pkg-divider { height: 1px; background: var(--line); margin-bottom: 1rem; }
.pkg-includes { font-size: 0.82rem; font-weight: 600; color: var(--dark-green); margin-bottom: 0.7rem; }
.pkg-features { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.pkg-features li { font-size: 0.9rem; color: var(--ink); display: flex; gap: 0.5rem; }
.pkg-features li::before { content: "—"; color: var(--emerald); }
.pkg-adnote { font-size: 0.78rem; color: var(--grey); margin-top: 1rem; font-style: italic; }
.pkg-cta { margin-top: 1.3rem; }
.pkg-cta .btn { width: 100%; justify-content: center; }
.pkg-terms { margin-top: 2.6rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; background: var(--cream); }
.pkg-terms h4 { font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); margin-bottom: 0.8rem; }
.pkg-terms ul { list-style: none; display: grid; gap: 0.5rem; }
.pkg-terms li { font-size: 0.86rem; color: var(--grey); padding-left: 1rem; position: relative; }
.pkg-terms li::before { content: "·"; position: absolute; left: 0.2rem; color: var(--emerald); }

/* ---- Full-portfolio CTA (closing section) ---- */
.portfolio-cta { background: var(--charcoal); color: var(--cream); text-align: center; }
.portfolio-cta .eyebrow { color: var(--emerald); }
.portfolio-cta h2 { font-size: clamp(2rem, 5vw, 3.2rem); color: var(--cream); }
.portfolio-cta h2 em { color: var(--blush); }
.portfolio-cta p { max-width: 52ch; margin: 1.1rem auto 2rem; color: #d3cfc5; }
.portfolio-cta .btn { padding: 1rem 2rem; font-size: 1rem; }
.portfolio-cta .cta-note { margin-top: 1rem; font-size: 0.82rem; color: #9b978d; }

/* ---- Footer ---- */
footer { background: var(--charcoal); color: var(--cream); }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; padding-block: 3rem; }
.footer-brand p { color: #b9b5ab; font-size: 0.9rem; margin-top: 0.7rem; max-width: 40ch; }
.footer-location { font-size: 0.85rem; color: var(--emerald); margin-top: 0.3rem; }
.footer-col h4 { font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: #9b978d; margin-bottom: 0.8rem; }
.footer-col ul { list-style: none; display: grid; gap: 0.5rem; }
.footer-col a { color: #d8d4ca; font-size: 0.92rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--emerald); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-block: 1.3rem; text-align: center; font-size: 0.8rem; color: #9b978d; }

/* ---- Reveal animation ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .strip-track { animation: none; } }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .drone-inner { grid-template-columns: 1fr; }
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
  .founders-grid { grid-template-columns: 1fr; }
  .pkg-grid, .pkg-grid.two { grid-template-columns: 1fr; max-width: 480px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .nav-links { position: fixed; inset: 68px 0 auto 0; background: var(--warm-white); flex-direction: column; gap: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform 0.3s; }
  .nav-links.open { transform: translateY(0); }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a { display: block; padding: 0.9rem; }
  .nav-links .nav-cta { margin: 0.6rem 1.2rem; }
  .nav-toggle { display: block; }
  .work-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; }
  .hero { min-height: 78vh; }
  .hero-copy { max-width: 100%; }
  .hero-badge { display: none; }
  .hero-cue { font-size: 0.66rem; }
}