/* ==========================================================================
   SEAN FARLEY — MOTION / EDIT / SOUND
   Design tokens: broadcast & post-production language —
   tally lights, timecode, film leader, color bars.
   ========================================================================== */

:root{
  /* -- color -- */
  --bg-0:#0b0b0d;      /* grading-suite black */
  --bg-1:#141417;      /* panel */
  --bg-2:#1c1c20;      /* raised panel / card */
  --line:#048DCB;      /* hairline */
  --ink-0:#dbdbdb;     /* warm white — scope text */
  --ink-1:#dbdbdb;     /* secondary text */
  --ink-2:#dbdbdb;     /* tertiary / meta text */
  --tally:#ff3b30;     /* tally-light red — used sparingly for live/active */

  /* -- type -- */
  --ff-display:'Barlow Condensed', sans-serif;
  --ff-body:'Inter', sans-serif;
  --ff-mono:'IBM Plex Mono', monospace;

  /* -- layout -- */
  --maxw:1406px;
  --gutter:clamp(20px, 5vw, 64px);
  --radius:2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--ink-2);
  font-family:var(--ff-body);
  font-size:22px;
  line-height:1.1;
  text-shadow: 0px 0px 8px rgb(4, 141, 203), 8px 6px 5px rgb(0, 0, 0);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  font-family:var(--ff-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin:0;
  text-align:left;
}

.eyebrow{
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
}

.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--tally);
  box-shadow:0 0 8px var(--tally);
  flex:none;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* .section also zeroes the side gutters that .wrap adds (it comes later in the file) */
.section{ padding:0; }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:28px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(28px,4vw,42px); }
.section-head .meta{ font-family:var(--ff-mono); font-size:12px; color:var(--ink-2); }

/* ---------------------------------- header ------------------------------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,13,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  max-width:var(--maxw); margin:0 auto;
}
.logo{
  display:flex; align-items:center; gap:12px;
  font-family:var(--ff-display); font-weight:700;
  font-size:20px; letter-spacing:0.03em; text-transform:uppercase;
}
.logo .mark{
  width:34px; height:34px; border:1.5px solid var(--ink-0);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-mono); font-size:13px; font-weight:500;
  flex:none;
}
.logo .rec{ font-family:var(--ff-mono); font-size:10px; color:var(--ink-2); letter-spacing:0.1em; margin-left:2px; }
.logo .rec .dot{ width:6px; height:6px; border-radius:50%; background:var(--tally); display:inline-block; margin-right:5px; animation:pulse 2s ease-in-out infinite; }

nav.main-nav ul{ list-style:none; display:flex; gap:32px; margin:0; padding:0; }
nav.main-nav a{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-1);
  padding:6px 0; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
nav.main-nav a:hover, nav.main-nav a[aria-current="page"]{ color:var(--ink-0); border-color:var(--tally); }

.nav-toggle{ display:none; }   /* shown and styled in the mobile section at the end */

@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

/* ---------------------------------- hero --------------------------------- */
.hero h1 {
  font-size: 80px;
  margin-top: 8px;    /* Normalizes the gap above text on all inner pages */
  margin-bottom: 12px;
  text-shadow: 0px 0px 10px rgba(4, 141, 203, 0.9), 20px 15px 24px rgba(0, 0, 0, 0.9);
}
.hero .role-line{
  font-family:var(--ff-mono); font-size:14px; letter-spacing:0.08em;
  color:var(--ink-1); text-transform:uppercase;
  text-shadow: 0px 0px 8px rgb(4, 141, 203), 12px 9px 8px rgba(0, 0, 0, 1);
}

/* -- tools row: 6 square logo tiles. Default state shows the static logo;
     hovering crossfades to a looping gif (your choice of clip per tool). -- */
.tools-row{
  display:grid;
  grid-template-columns:repeat(6, auto);
  justify-content:center;
  gap:40px;
  margin:10px 0 20px;
}
.tool-tile{
  width:130px;
  justify-self:center;
  aspect-ratio:1/1;
  position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.tool-tile .tool-logo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:0%;
  z-index:1;
}
.tool-tile .tool-gif{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:0%;
  opacity:0; z-index:2;
}
.tool-tile.playing .tool-logo{ opacity:0; }
.tool-tile.playing .tool-gif{ opacity:1; }
.tool-tile .label{
  position:absolute; bottom:7px; left:0; right:0; text-align:center;
  font-family:var(--ff-mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2); pointer-events:none;
  z-index:3; transition:opacity .2s ease;
}
.tool-tile.playing .label{ opacity:0; }

/* Large hero visual, directly under the name/role line.
   Ratio matches SF_GoldLogo_Temp.png (1920x654) — swap in an image or an
   autoplaying/looping muted video later at the same ratio. Full-bleed
   (edge to edge), sitting outside the .wrap max-width for impact. */
.hero-visual{
  width:100%;
  aspect-ratio:1920/654;
  overflow:hidden;
  position:relative;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(135deg, var(--bg-2) 0 2px, var(--bg-1) 2px 14px);
}
.hero-visual img, .hero-visual video{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
}

/* -- film-leader intro overlay (signature moment, plays once) -- */
.leader{
  position:fixed; inset:0; z-index:200; background:var(--bg-0);
  display:flex; align-items:center; justify-content:center;
  animation:leaderOut .25s ease-out 1.5s forwards;
}
.leader-circle{
  width:120px; height:120px; border-radius:50%;
  border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.leader-circle::before{
  content:""; position:absolute; inset:-1.5px; border-radius:50%;
  background:conic-gradient(var(--tally) 0deg, transparent 0deg);
  animation:sweep 1.5s linear forwards;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.leader-num{ font-family:var(--ff-mono); font-size:34px; color:var(--ink-0); animation:count 1.5s steps(1) forwards; }
@keyframes sweep{ to{ background:conic-gradient(var(--tally) 360deg, transparent 360deg); } }
@keyframes count{
  0%{ content:""; }
}
@keyframes leaderOut{ to{ opacity:0; visibility:hidden; } }

/* ---------------------------------- grid / cards -------------------------- */
.grid{ display:grid; }
.card{ overflow:hidden; position:relative; }
.card .thumb{
  aspect-ratio:16/9; width:100%;
  background:
    repeating-linear-gradient(135deg, var(--bg-2) 0 2px, var(--bg-1) 2px 14px);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.card .thumb img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

/* Recent Campaigns: portrait key-art tiles (2:3), no play icon, these are stills, not video.
   Six across at every breakpoint (the responsive section below does not override this). */
.grid.poster-grid{ grid-template-columns:repeat(6, 1fr); }

.card.poster{
  transition:transform .22s ease, box-shadow .22s ease;
  will-change:transform;
}
.card.poster .thumb{ aspect-ratio:2/3; }
.card.poster:hover{
  transform:scale(1.08);
  box-shadow:0 18px 34px rgba(0,0,0,0.55);
  z-index:2;
}

/* ---------------------------------- clients marquee ------------------------ */
.marquee{ overflow:hidden; }
.marquee-track{
  display:flex; gap:30px; width:max-content; animation:scroll 28s linear infinite;
  align-items:center;
  padding-right:30px;   /* same as the gap, so the loop restarts without a hop */
}
.marquee-track img{
  zoom:20%;
  display:block;
  flex:none;
}
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* gif gallery */
.justified-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.justified-grid .gif-tile {
  overflow: hidden;
  position: relative;
  flex: 0 1 auto; /* Absorb sub-pixel rounding to prevent accidental row wraps */
  min-width: 0;   /* Prevent flex items from overflowing container bounds */
}

.justified-grid .gif-tile img,
.justified-grid .gif-tile video {
  width: 100%;
  height: 100%;
  max-width: none; /* Override global img max-width constraints */
  display: block;
  object-fit: cover;
}

/* ---------------------------------- filters (social page) ------------------ */
.filters{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.filter-btn{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; border:1px solid var(--line); color:var(--ink-1);
  padding:9px 16px; cursor:pointer; transition:all .2s ease;
}
.filter-btn.active, .filter-btn:hover{ color:var(--bg-0); background:var(--ink-0); border-color:var(--ink-0); }

/* --- Case Studies Layout --- */
.case-study {
  display: grid;
  grid-template-columns: 900px 1fr; /* Video is fixed at 620px, text takes the remaining space */
  gap: 20px;
  align-items: stretch;
  width: 100%;
  margin-bottom: 40px;
}

/* Reverse layout for alternating items */
.case-study.reverse {
  grid-template-columns: 1fr 900px; /* Text takes remaining space, video is fixed at 620px */
}

.case-study .thumb {
  width: 100%;
  height: 100%; /* Stretch to fill full grid cell height */
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.case-study .thumb:hover {
  transform: scale(1.015);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}

/* Ensure the video inside fills the container completely */
.case-study .thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play Overlay Icon on Hover */
.case-study .thumb::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 54px;
  height: 54px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.case-study .thumb:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* --- Case Study Body Panel (Updates) --- */
.case-study .body {
  position: relative;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  z-index: 0;
  /* Centers content vertically within the stretched box */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-study .body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(11, 11, 13, 0.8);
  z-index: -1;
  border-radius: inherit;
}

.case-study .body::after {
  inset: 0;
  border-radius: inherit;
}

.case-study .body h3 {
  font-size: clamp(22px, 2.5vw, 28px); /* Scaled down from default */
  margin: 12px 0;
}

.case-study .body p {
  color: var(--ink-1);
  font-size: 15px; /* Smaller, tighter paragraph text */
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 24px;
}

/* --- Case study data list (<dl>): label column + value column --- */
.case-study dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px 24px;
  margin: 0;
  align-items: stretch; /* keeps each label/value border on the same line */
}

.case-study dt,
.case-study dd {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #146187;
}

.case-study dt {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.case-study dd {
  color: var(--ink-0);
  font-size: 14px;
  line-height: 1.4;
}

/* Removes side gutters so case studies stretch edge-to-edge inside the wrap box */
.wrap.case-studies-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* ---------------------------------- footer ------------------------------------ */
.bars{ height:6px; display:flex; }
.bars span{ flex:1; }
.bars span:nth-child(1){ background:#c8c8c8; }
.bars span:nth-child(2){ background:#c8c800; }
.bars span:nth-child(3){ background:#00c8c8; }
.bars span:nth-child(4){ background:#00c800; }
.bars span:nth-child(5){ background:#c800c8; }
.bars span:nth-child(6){ background:var(--tally); }
.bars span:nth-child(7){ background:#0000c8; }

footer.site-footer{ padding:56px 0 40px; }
.footer-row{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; }
.footer-row h3{ font-size:26px; margin-bottom:14px; }
.footer-row p{ color:var(--ink-1); max-width:420px; }
footer.site-footer > .wrap{ padding-top:40px; }
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; font-family:var(--ff-mono); font-size:12px; color:var(--ink-1); letter-spacing:.06em; text-transform:uppercase; }
.footer-links a{ border-bottom:1px solid var(--line); padding-bottom:2px; }
.footer-links a:hover{ color:var(--ink-0); border-color:var(--ink-0); }
.copyright{ margin-top:40px; font-family:var(--ff-mono); font-size:11px; color:var(--ink-2); }

.bio{
  max-width:750px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  font-family:var(--ff-display);
  font-weight:500;
  font-size:22px;
  line-height:1.1;
  letter-spacing:0.05em;
  margin-top:15px;
  margin-bottom:15px}

.bio-panel{
  width:100vw;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  background:rgba(11, 11, 13, 0.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* Description banner under the page title (Social and Reels pages) */
.bio-panel.banner{ padding:10px 0; }
.bio-panel.banner .bio{
  font-size:18px;
  line-height:1.35;
  max-width:830px;
  margin:0 auto;
  color:#f0f0f0;
}

.tool-tile:not(:first-child){
  margin-left:-15px;
}
.page-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:#1a1a1a;
}
.page-bg video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------------------------------- Social 1x1 Grid & Lightbox ------------------ */
.social-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap:0px;
  width: 100%;
  margin-top: 24px;
}

.social-card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--bg-1);
  transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}

.social-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.25s ease;
}

.social-card .card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
}

.social-card .card-title {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.social-card:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.7);
  z-index: 5;
}

.social-card:hover .card-overlay {
  opacity: 1;
}

.social-card:hover video {
  filter: brightness(0.7);
}

/* Lightbox Modal */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 7, 0.92);
  backdrop-filter: blur(12px);
}

.lightbox-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.lightbox-content video {
  width: auto;
  height: auto;
  max-width: min(90vw, 1200px);
  max-height: min(80vh, 1200px);
  border-radius: 2px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.8);
  outline: none;
}

.lightbox-title {
  margin-top: 16px;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-1);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  z-index: 10;
  background: none;
  border: none;
  color: var(--ink-0);
  font-size: 36px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.lightbox-close:hover {
  color: var(--tally);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(28, 28, 32, 0.6);
  border: 1px solid var(--line);
  color: var(--ink-0);
  font-size: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lightbox-nav:hover {
  background: var(--ink-0);
  color: var(--bg-0);
}

.lightbox-nav.prev { left: 32px; }
.lightbox-nav.next { right: 32px; }

@media (max-width: 1100px) {
  .social-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 800px) {
  .social-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 550px) {
  .social-grid { grid-template-columns: repeat(2, 1fr); }
  .lightbox-nav.prev { left: 10px; }
  .lightbox-nav.next { right: 10px; }
}

/* --- Page Header (Background stretches, text stays aligned to grid) --- */
.hero {
  position: relative;
  padding: 20px 0 10px;
  text-align: left;
  z-index: 1;
}

/* 1. Full-Bleed Hex Pattern (the same tile layer is used on the case-study panels) */
.hero::after,
.case-study .body::after {
  content: '';
  position: absolute;
  background-image: url('../images/hex-tile_3.svg');
  background-repeat: repeat;
  background-size: 13px auto;
  background-color: rgba(11, 11, 13, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: -2;
}

.hero::after {
  top: 0; bottom: 0;
  left: calc(-50vw + 50%);
  width: 100vw;
}

/* 2. Full-Bleed Dark Overlay & Borders */
.hero::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: calc(-50vw + 50%);
  width: 100vw;
  background-color: rgba(0, 0, 0, .7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  z-index: -1;
}

/* Home page hero: tighter padding and margins, no hex band */
.hero.home-hero {
  padding-top: 32px;
  padding-bottom: 30px;
}

.hero.home-hero::before,
.hero.home-hero::after {
  display: none;
}

.hero.home-hero h1 {
  font-size: clamp(52px, 9.5vw, 116px);
  margin: 10px 0;
}

.hero.home-hero .role-line {
  margin-bottom: 8px;
}

.hero.home-hero .eyebrow {
  margin: 0 0 2px;
}

/* ==========================================================================
   MOBILE
   Everything in this section only applies on small screens (desktop is untouched).
   Breakpoints: 900 menu, 860 case studies, 768 phone content, 560 small phones.
   ========================================================================== */

/* ---- 900px and down: hamburger menu ---- */
@media (max-width:900px){
  /* The header's blurred background moves onto a pseudo-element, because a
     backdrop-filter inside another backdrop-filter shows no blur. This lets the
     dropdown carry the exact same dark blur as the bar. */
  header.site-header{ background:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  header.site-header::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background:rgba(11,11,13,0.86);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .header-row{ padding-top:12px; padding-bottom:12px; }

  /* three-line button, top right; turns into an X while open */
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:44px; height:44px; padding:0; flex:none;
    background:rgba(11,11,13,0.86); border:1px solid var(--line); cursor:pointer;
  }
  .nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink-0); transition:transform .2s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* dropdown panel hanging off the header: same background, blur and outline */
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:rgba(11,11,13,0.86);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:8px 0;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  nav.main-nav.open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
  nav.main-nav ul{ flex-direction:column; gap:0; }
  nav.main-nav a{ display:block; padding:16px var(--gutter); font-size:14px; border:0 solid transparent; border-left-width:2px; }
  .nav-long{ display:none; }   /* "Social Content" becomes "Social", "Reels & Case Studies" becomes "Reels" */

  .tools-row{ grid-template-columns:repeat(3,1fr); }
  .tool-tile:not(:first-child){ margin-left:0; }
}

/* ---- 860px and down: case studies stack, video on top ---- */
@media (max-width:860px){
  .case-study, .case-study.reverse{ grid-template-columns:1fr; gap:20px; margin-bottom:40px; }
  .case-study .thumb{ order:-1; }
  .case-study .body{ padding:24px 20px; }
}

/* ---- 768px and down: phone content ---- */
@media (max-width:768px){
  /* keep text off the screen edge, scale the page titles (home keeps its own size) */
  .hero{ padding-left:var(--gutter); padding-right:var(--gutter); }
  .hero h1{ font-size:clamp(40px, 11.5vw, 80px); }
  .hero .role-line{ line-height:1.4; text-wrap:balance; }
  .section-head, .filters{ padding-left:var(--gutter); padding-right:var(--gutter); }

  /* Bio text scales with the screen, and the gap above and below it is set in em, so it
     stays the same proportion of the text as on desktop (0.68em on the home page,
     0.556em on the banner pages). */
  .bio-panel{ font-size:clamp(17px, 5vw, 22px); }
  .bio-panel .bio{
    font-size:1em; line-height:1.2; text-wrap:balance;
    margin-top:0.68em; margin-bottom:0.68em;
    padding-left:var(--gutter); padding-right:var(--gutter);
  }
  .bio-panel.banner{ font-size:clamp(16px, 4.4vw, 18px); padding-top:0.556em; padding-bottom:0.556em; }
  .bio-panel.banner .bio{ font-size:1em; }
}

/* ---- 560px and down: small phones ---- */
@media (max-width:560px){
  .logo .rec{ display:block; margin:4px 0 0; }   /* status line sits under the name instead of wrapping */
  .grid.poster-grid{ gap:8px; }
  .tools-row{ grid-template-columns:repeat(2,1fr); gap:10px; }
}

/* Reduced motion: one block for every animation and transition above */
@media (prefers-reduced-motion: reduce){
  .tool-tile .tool-logo, .tool-tile .tool-gif, .tool-tile .label{ transition:none; }
  .nav-toggle span, nav.main-nav{ transition:none; }
  .leader{ display:none; }
  .eyebrow .dot, .logo .rec .dot{ animation:none; }
  .card.poster{ transition:none; }
  .card.poster:hover{ transform:none; }
  .marquee-track{ animation:none; overflow-x:auto; }
}