:root{
  --bg:#0a0a0c;
  --panel:#111113;
  --text:#f3f1ea;
  --dim:#8a8a90;
  --dim2:#5f5f66;
  --gold:#c9a24b;
  --line:#242428;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}

/* ---------- NAV ---------- */
/* minimal bar riding over the God spot: brand left, CTA right, no sticky slab.
   --gutter is the shared left inset the wordmark and the big name both hang on */
:root{ --gutter:clamp(24px, 10vw, 200px); }
.nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:30px var(--gutter); position:absolute; top:0; left:0; right:0; z-index:50;
  transition:transform 0.75s cubic-bezier(.22,.7,.3,1);
}
.nav--tucked{transform:translateY(-130%); transition-duration:0.28s;}
/* the skip pills: small, see-through, stacked in the top-right corner, both
   directions always on offer once the reader is below the nav. The pair steps
   out of the way while the page is actually moving (nav.js) and returns once
   the scroll settles; the direction that would go nowhere is dimmed. */
.skip-group{
  position:fixed; top:calc(10px + env(safe-area-inset-top, 0px)); right:12px; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.skip-group--on{opacity:1; pointer-events:auto;}
.skip-group--on.skip-group--scrolling{opacity:0; pointer-events:none; transition-duration:.15s;}
.skip-btn{
  border:1px solid rgba(243,241,234,0.28); border-radius:999px; padding:5px 10px;
  font-size:10px; letter-spacing:0.08em; color:rgba(243,241,234,0.72); font-weight:600;
  background:rgba(12,12,14,0.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity .3s, background .2s, color .2s;
}
.skip-btn:hover{background:rgba(12,12,14,0.6); color:var(--text);}
.skip-btn--idle{opacity:0.3; pointer-events:none;}
.nav-brand{display:flex; align-items:center; gap:6px;}
.nav-right{display:flex; align-items:center; gap:clamp(14px,2vw,28px);}
.nav-link{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,241,234,.78); transition:color .2s;}
.nav-link:hover{color:#fff;}
/* gear pages sit left of Resume on wide screens; phones keep just Resume */
.nav-right .nav-gear{margin-right:-4px;}
@media (max-width:900px){ .nav-right .nav-gear{display:none !important;} }
@media (max-width:600px){ .nav-right{flex-direction:column; align-items:flex-end; gap:7px;} .nav-link{order:2; font-size:9.5px; letter-spacing:.14em; padding-right:2px;} }
/* signature angled up into the right, just overlapping the printed name */
.nav-sig{height:38px; width:auto; display:block; filter:brightness(0) invert(1);
  transform:rotate(-25deg); transform-origin:center bottom;
  margin-right:-10px; position:relative; z-index:1; pointer-events:none;}
.nav-name{
  font-family:'Outfit',sans-serif; text-transform:uppercase;
  font-size:21px; font-weight:800; letter-spacing:0.02em;
}

/* ---------- GOD SPOT (hero): name upper-middle on the gutter; the portrait sits
   smaller on the right and is dropped deep into a near-black field with only a
   faint cool glow, the way the reference keeps its subject faded into the dark ---------- */
/* Fixed, width-scaled height (not viewport-height driven) so the strip lands at
   the same pixel as the reference regardless of how tall the screen is. */
.hero{
  position:relative; overflow:hidden;
  min-height:clamp(520px, 40vw, 820px); display:flex; align-items:center;
  /* one continuous blue→teal wash: a bright core around the subject, plus a broad
     linear bleed that carries the colour all the way left behind the name and
     eases to nothing — a long, soft falloff, never a hard line */
  background:
    /* spotlight glow placed right behind him and matched to the studio backdrop,
       so the photo's own bright top and sides melt into it — no rectangle */
    radial-gradient(30vw 42vw at 80% 32%, rgba(74,156,224,0.78) 0%, rgba(50,132,198,0.44) 38%, rgba(30,96,152,0.12) 66%, rgba(24,80,130,0) 85%),
    /* broad, very soft leftward bleed that carries the colour behind the name and
       eases to nothing over a long distance — a gradual falloff, never a line */
    linear-gradient(100deg, rgba(10,15,22,0) 0%, rgba(18,58,92,0.14) 34%, rgba(26,92,146,0.30) 62%, rgba(32,114,172,0.46) 88%, rgba(38,128,182,0.55) 100%),
    #0a0f13;
}
/* film-grain texture over the whole god spot, the way the reference blends its hero */
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the subject is a transparent cutout, so it drops straight onto the gradient with
   no rectangle. It is darkened and slightly faded to sit back in the frame, and
   its foot dissolves into the carousel. Position + size ride on CSS variables the
   localhost hero editor writes (translate + scale), so it can be dragged/resized. */
.hero-photo{position:absolute; top:0; right:0; bottom:0; width:40%; overflow:hidden;}
.hero-photo img{
  position:absolute; left:50%; bottom:0; height:90%; width:auto;
  transform:translate(calc(-50% + var(--hx,0px)), var(--hy, clamp(30px, 3.6vw, 64px))) scale(var(--hs,1));  /* default drop keeps the head below the nav button */
  transform-origin:center bottom;
  filter:brightness(0.72) contrast(1.02) saturate(0.96);
  opacity:0.92;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 88%, transparent 99.5%);
          mask-image:linear-gradient(180deg, #000 0%, #000 88%, transparent 99.5%);
}
.hero-photo img.adm-grabbing{cursor:grabbing;}
/* a full photo (not a cutout) in the hero: it fills the right side and its
   edges feather away into the page on every side, so there is no frame */
.hero-photo--full{width:60%; top:clamp(70px, 9vh, 110px);}   /* starts below the nav */
.hero-photo--full img{left:0; top:0; bottom:auto; width:100%; height:100%; object-fit:cover; object-position:45% 20%;
  transform:none; filter:brightness(0.82) contrast(1.04) saturate(0.95);
  /* feathered on every side: a soft oval, faded harder toward the top and left */
  -webkit-mask-image:radial-gradient(ellipse 68% 70% at 60% 54%, #000 36%, rgba(0,0,0,.5) 62%, transparent 90%);
          mask-image:radial-gradient(ellipse 68% 70% at 60% 54%, #000 36%, rgba(0,0,0,.5) 62%, transparent 90%);}
body.editing-hero .hero-photo{overflow:visible; z-index:40;}
body.editing-hero .hero-photo img{cursor:grab; outline:2px dashed rgba(201,162,75,.9); outline-offset:-2px;}
.hero-handle{position:absolute; width:16px; height:16px; z-index:41; background:var(--gold);
  border:2px solid #0b0b0c; border-radius:50%; display:none; transform:translate(-50%,-50%);}
body.editing-hero .hero-handle{display:block;}
.hero-handle[data-c="nw"],.hero-handle[data-c="se"]{cursor:nwse-resize;}
.hero-handle[data-c="ne"],.hero-handle[data-c="sw"]{cursor:nesw-resize;}

.hero-inner{position:relative; z-index:2; padding:0 var(--gutter); max-width:1200px;}
.hero-eyebrow{
  font-family:'Outfit',sans-serif; text-transform:uppercase;
  font-size:clamp(15px, 1.5vw, 24px); font-weight:500; letter-spacing:0.01em;
  color:#fff; margin-bottom:20px;
}
.hero-name{
  font-family:'Bebas Neue',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(72px, 11.6vw, 232px); line-height:0.88; letter-spacing:0.005em;
  margin:0;
}

/* ---------- BTS STRIP: infinite right-to-left marquee, rounded cards ---------- */
.strip{overflow:hidden; position:relative; z-index:2; background:var(--bg); padding:10px 0;}
.strip__track{display:flex; width:max-content; will-change:transform;
  animation-name:strip-scroll; animation-timing-function:linear; animation-iteration-count:infinite;}
.strip:hover .strip__track{animation-play-state:paused;}
.strip__card{
  flex:0 0 auto; width:405px; height:265px; margin-right:12px;
  overflow:hidden; border-radius:14px; background:var(--panel); position:relative;
}
/* the slight scale trims any thin white border baked into a source frame */
.strip__card img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02);}
.strip__card--motion{outline:2px solid var(--gold); outline-offset:-2px;}
/* stop-motion frames stacked; only .is-on shows — an opacity flip, no decode gap */
.strip__card--motion .sm-frame{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; display:block; transform:scale(1.02);
}
.strip__card--motion .sm-frame.is-on{opacity:1;}
.strip__card--motion canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
@keyframes strip-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
/* the strip can be grabbed and pulled through to scan it fast (mouse or touch) */
.strip--scrub{cursor:grab; touch-action:pan-y; user-select:none;}
.strip--scrub .strip__card{cursor:inherit;}
.strip--scrub.strip--grabbing, .strip--scrub.strip--grabbing .strip__card{cursor:grabbing;}
/* the media inside a card must not swallow the drag (native image-drag / capture) */
.strip--scrub .strip__card img,
.strip--scrub .strip__card canvas,
.strip--scrub .strip__card .sm-frame{pointer-events:none; -webkit-user-drag:none;}

/* ---------- SERVICES: the About-style block, tightened ---------- */
.services{
  display:grid; grid-template-columns:minmax(0,0.9fr) 1.1fr; gap:56px; align-items:center;
  max-width:1400px; margin:0 auto; padding:11vh 40px;
}
.services-photo{aspect-ratio:4/3; overflow:hidden; border-radius:6px; background:var(--panel);}
.services-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.services-head{
  font-family:'Bebas Neue',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(46px,6vw,96px); line-height:0.86; letter-spacing:0.01em; margin:0;
}
.services-kicker{
  margin:20px 0 22px; font-size:12px; letter-spacing:0.16em; color:var(--gold); font-weight:600;
}
.services-copy p{font-size:16px; line-height:1.7; color:#d3d2cb; margin-bottom:16px; max-width:56ch;}

/* ---------- DP WORK + reel cards (the scrubbable video windows) ---------- */
.reel-section{padding:6vh 40px 110px; position:relative; z-index:2;}
.reel-head{max-width:1400px; margin:0 auto; padding-bottom:26px;}
.reel-card{
  position:relative; aspect-ratio:16/10; background:#000; overflow:hidden;
  cursor:grab; touch-action:none; user-select:none;
}
.reel-card.grabbing{cursor:grabbing;}
.reel-card canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.reel-card video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:none; pointer-events:none;
}
.reel-card.has-video video{display:block;}
.reel-card.has-video canvas{display:none;}
.frame-counter{
  display:none; position:absolute; top:12px; right:12px; z-index:3;
  background:rgba(0,0,0,.55); color:#cfcfd2; font-size:11px; letter-spacing:0.05em;
  padding:4px 8px; border-radius:3px; font-variant-numeric:tabular-nums;
}
.reel-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:14px 16px 16px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.92) 100%);
}
.reel-badges{font-size:10.5px; letter-spacing:0.12em; color:var(--gold); font-weight:600;}
.reel-credits{font-size:10.5px; letter-spacing:0.03em; color:#c9c8c2; margin-top:4px; line-height:1.4;}
.reel-bottom{display:flex; justify-content:space-between; align-items:flex-end; margin-top:10px;}
.reel-title{font-size:16px; font-weight:700;}
.reel-time{font-size:12px; color:#bdbdbf; font-variant-numeric:tabular-nums;}

/* ---------- STILLS: pinned parallax chapters ---------- */
.stills-section{position:relative; z-index:2; padding-top:9vh;}
.stills-head{max-width:1400px; margin:0 auto; padding:0 40px 5vh;}
.stills-eyebrow{
  font-size:11px; letter-spacing:0.3em; color:#9fb0b5; font-weight:500;
  margin-bottom:26px;
}
.stills-headline{
  font-family:'Fraunces',serif; font-optical-sizing:auto;
  font-weight:300; font-size:clamp(44px, 7vw, 96px); line-height:1.04;
  letter-spacing:-0.01em; margin:0;
}
/* chapters butt together at the same 2px seam the video grid uses; each
   stage is a full viewport of imagery, four rows deep */
.chapter{position:relative;}
.chapter + .chapter{margin-top:2px;}
.chapter__stage{
  position:relative;
  height:100vh; display:flex; flex-direction:column; justify-content:center;
  gap:2px; overflow:hidden; background:var(--bg);
}
.chapter__row{display:flex; align-items:stretch; gap:2px; will-change:transform;}
.chapter__row figure{
  margin:0; flex:0 0 auto; height:calc((100vh - 6px)/4);
  background:var(--panel); overflow:hidden; position:relative;
}
.chapter__row figure img{
  display:block; height:100%; width:100%; object-fit:cover;
  backface-visibility:hidden;
}
/* a scrubbable video living inside a row: vertical swipes keep scrolling the
   page, horizontal drags scrub the clip */
.chapter__row .reel-card{aspect-ratio:auto; touch-action:pan-y;}

/* ---------- PILLARS: the vertical receipts ---------- */
.pillars-section{position:relative; z-index:2; padding:14vh 40px 100px;}
.pillars-head{padding:0 0 6vh;}
.pillars-platforms{
  margin-top:26px; font-size:12px; letter-spacing:0.18em;
  color:var(--dim); line-height:2;
}
/* each pillar is a framed capsule: media and its description live inside
   the same rounded frame, and the frames float apart from one another */
.pillar-grid{
  max-width:1060px; margin:0 auto; display:grid;
  grid-template-columns:repeat(2, 1fr); gap:34px 30px; align-items:start;
}
.pillar{
  background:var(--panel); border:1px solid var(--line);
  border-radius:22px; padding:14px 14px 24px;
}
/* media is height-capped so a whole capsule (video + words) fits one screen */
.pillar-media{display:flex; flex-direction:column; gap:8px; align-items:center;}
.pillar-media .reel-card{
  aspect-ratio:9/16; height:44vh; width:auto; max-width:100%;
  touch-action:pan-y; border-radius:14px;
}
.pillar-media.stacked .reel-card{aspect-ratio:16/9; height:calc((44vh - 8px)/2);}
.pillar-copy{padding:0 8px;}
.pillar-kicker{
  margin-top:16px; font-size:10.5px; letter-spacing:0.12em;
  color:var(--gold); font-weight:600;
}
.pillar-title{font-size:17px; font-weight:700; margin-top:6px;}
.pillar-text{font-size:12.5px; color:#b9b7b0; line-height:1.55; margin-top:8px;}

/* ---------- PROOF: credits + awards, right under the carousel ---------- */
.proof{position:relative; z-index:2; border-bottom:1px solid var(--line); padding:7vh 40px 8vh;}
.proof-inner{max-width:1400px; margin:0 auto;}
.proof-label{font-size:11px; letter-spacing:0.3em; color:#9fb0b5; font-weight:500; margin-bottom:22px;}
.proof-names{list-style:none; display:flex; flex-wrap:wrap; gap:10px 34px;
  font-family:'Outfit',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(17px,1.7vw,24px); letter-spacing:0.02em; color:#d9d7cf;}
.proof-awards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:7vh;}
/* the awards: cream cards with a fine gold double rule, a mark on top (laurel or
   the ASC badge), then kicker, title and detail, all centred like a plaque */
.award{position:relative; text-align:center; color:#1d1a15; border-radius:16px; padding:34px 28px 30px;
  background:radial-gradient(120% 90% at 50% 0%, #fbf6ea 0%, #f1e8d4 55%, #e9dec6 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px rgba(0,0,0,.45);}
.award::before{content:''; position:absolute; inset:8px; border:1px solid rgba(160,124,52,.55); border-radius:11px; pointer-events:none;}
.award::after{content:''; position:absolute; inset:12px; border:1px solid rgba(160,124,52,.22); border-radius:8px; pointer-events:none;}
.award-mark{height:76px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.laurel{width:120px; height:64px; color:#a77d2e; fill:#a77d2e;}
.asc-badge{width:74px; height:auto; display:block; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));}
.award-kicker{font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:#8a6a2c; font-weight:600;}
.award-big{font-family:'Fraunces',serif; font-weight:400; font-size:clamp(22px,1.9vw,28px); line-height:1.15; margin-top:8px; color:#16130f;}
.award-small{font-size:13px; color:#5c5446; margin-top:10px; letter-spacing:0.01em; line-height:1.5;}

/* award plaques flip (js/awards.js): front = the award, back = the film */
.award-flip{perspective:1400px; cursor:pointer; outline:none; border-radius:16px;}
.award-flip:focus-visible{box-shadow:0 0 0 2px var(--gold);}
.award-inner{position:relative; height:100%; transition:transform .8s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d;}
.award-flip.is-flipped .award-inner{transform:rotateY(180deg);}
.award-front, .award-back{backface-visibility:hidden; -webkit-backface-visibility:hidden; height:100%;}
.award-front{display:flex; flex-direction:column; align-items:center;}
.award-back{position:absolute; inset:0; transform:rotateY(180deg); padding:0; overflow:hidden; background:#0d0c0a; cursor:default;}
.award-back::before, .award-back::after{z-index:2; border-color:rgba(201,162,75,.45);}
.award-back .feature-play img{opacity:.9;}
.award-back-text{position:absolute; left:0; right:0; bottom:0; padding:44px 124px 20px 22px; text-align:left; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 70%);}
.award-back-title{font-family:'Fraunces',serif; font-size:26px; color:#f6efe0;}
.award-back-sub{font-size:12.5px; color:#cfc6b3; margin-top:4px;}
.award-unflip{position:absolute; bottom:18px; right:18px; z-index:3; border:1px solid rgba(246,239,224,.5); border-radius:99px;
  background:rgba(13,12,10,.6); color:#f6efe0; font-size:11.5px; letter-spacing:.06em; padding:6px 12px; cursor:pointer;}
.award-hint{margin-top:auto; padding-top:16px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#a07c34;}
.award-flip:hover .award-hint{color:#6f531d;}
.award-mark{height:118px;}
.award-mark--asc .asc-badge{width:118px;}
.laurel{width:150px; height:80px;}

/* the two Life Is Better with Dogs episodes, stacked */
.pillar-vid{position:relative; aspect-ratio:16/9; height:calc((44vh - 8px)/2); max-width:100%; overflow:hidden; border-radius:14px; background:#000;}

/* no play circles on the video cards: the hover zoom says "this plays" */
.feature-play .yt-play, .yt .yt-play{display:none;}
.feature-play:hover img{transform:scale(1.04);}
.feature-play img{transition:transform .6s;}
.feature-play img.unbox{transform:scale(1.34);}  /* YouTube's 4:3 thumbnail has black bars baked in */
.feature-play:hover img.unbox{transform:scale(1.38);}
.contact-kinds{max-width:900px; margin:0 auto 26px; line-height:2;}

/* shared head for the new sections, on the same inset as the stills head */
.sec-head{max-width:1400px; margin:0 auto; padding:0 0 5vh;}

/* ---------- DIRECTED: Sons of Legion ---------- */
.directed{position:relative; z-index:2; padding:12vh 40px 8vh; max-width:1480px; margin:0 auto;}
.directed-stats{max-width:1400px; margin:0 auto 5vh; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.directed-stats div{border-top:1px solid var(--line); padding-top:16px;}
.directed-stats b{display:block; font-family:'Bebas Neue',sans-serif; font-weight:400;
  font-size:clamp(48px,6vw,92px); line-height:0.9; color:var(--gold);}
.directed-stats span{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--dim);}
.directed-videos{max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.directed-videos figure{margin:0;}
.yt,.yt-frame{display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:14px; background:#000 center/cover no-repeat; cursor:pointer; position:relative;}
.yt-play{position:absolute; left:50%; top:50%; width:74px; height:74px; transform:translate(-50%,-50%);
  border-radius:50%; background:rgba(10,10,12,.62); border:1.5px solid rgba(243,241,234,.7);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); transition:transform .2s, background .2s;}
.yt-play::after{content:''; position:absolute; left:30px; top:23px; border-style:solid; border-width:14px 0 14px 22px;
  border-color:transparent transparent transparent var(--text);}
.yt:hover .yt-play{transform:translate(-50%,-50%) scale(1.08); background:rgba(201,162,75,.85);}
.directed-videos figcaption{display:flex; justify-content:space-between; gap:12px; margin-top:12px; font-size:14px;}
.directed-videos figcaption span{color:var(--dim); white-space:nowrap;}
.directed-copy{max-width:1400px; margin:5vh auto 0;}
.directed-text{font-family:'Fraunces',serif; font-weight:300; font-size:clamp(17px,1.6vw,24px); line-height:1.5; color:var(--text);}

/* ---------- SPECIALTY: the rigs ---------- */
.specialty{position:relative; z-index:2; padding:10vh 40px 6vh; max-width:1480px; margin:0 auto;}
.rig-grid{max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.rig{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px 24px 26px;}
.rig--wide{grid-column:1 / -1; padding:32px 34px;}
.rig-kicker{font-size:10.5px; letter-spacing:0.14em; color:var(--gold); font-weight:600;}
.rig h3{font-size:19px; font-weight:700; margin:10px 0 8px;}
.rig--wide h3{font-family:'Fraunces',serif; font-weight:300; font-size:clamp(30px,3.4vw,52px); line-height:1.08; margin:12px 0 14px;}
.rig p{font-size:14px; line-height:1.65; color:#b9b7b0;}
.rig--wide p{font-size:16px; max-width:80ch; color:#d3d2cb;}
.rig-link{display:inline-block; margin-top:16px; font-size:13px; font-weight:600; letter-spacing:0.04em; color:var(--gold);}

/* specialty cards: a picture or stop-motion on top, the AGC card's two videos */
.rig-media{margin:-24px -24px 18px; aspect-ratio:16/10; overflow:hidden; border-radius:16px 16px 0 0; background:#000;}
.rig-media img, .rig-media canvas{display:block; width:100%; height:100%; object-fit:cover;}
.rig-videos{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin-top:22px;}
.rig-video{margin:0;}
.rig-video-box{position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:12px; background:#000;}
.rig-video figcaption{margin-top:10px; font-size:13px; color:#c9c8c2;}
.sec-roles{margin:22px 0 0;}

/* ---------- ABOUT extras: quotes + press ---------- */
.quotes{display:grid; gap:14px; margin:26px 0 18px;}
.quotes blockquote{font-family:'Fraunces',serif; font-weight:300; font-size:19px; line-height:1.4; color:var(--text);
  border-left:2px solid var(--gold); padding-left:16px;}
.quotes cite{display:block; font-family:'Inter',sans-serif; font-style:normal; font-size:12px; letter-spacing:0.08em; color:var(--dim); margin-top:6px;}
.press{display:flex; flex-wrap:wrap; gap:10px 22px;}
.press a{font-size:13px; font-weight:600; color:var(--gold);}

/* ---------- WEB & APP: full-width band, device frames ---------- */
.webdev{position:relative; z-index:2; padding:14vh 0 12vh; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,10,14,.35), rgba(10,10,14,.15));}
.webdev-in{max-width:1480px; margin:0 auto; padding:0 var(--gutter);}
.webdev-head{max-width:820px; margin-bottom:8vh;}
.webdev-lede{color:#cfcdc6; font-size:18px; line-height:1.6; margin:22px 0 0; max-width:680px;}
.build{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:56px; align-items:center; margin-bottom:12vh;}
.build:last-child{margin-bottom:0;}
.build--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);}
.build--flip .build-media{order:2;} .build--flip .build-copy{order:1;}
/* the browser window fills the media column; phones stand in front of its
   lower-right corner, like a product shot */
.build-media{position:relative; min-width:0; padding:0 0 9% 0;}
.build-media .device--browser{width:84%;}
.build-media .device--phone{position:absolute; bottom:0; right:0; width:22%;}
.build-media--trio .device--phone{right:19%; bottom:4%;}
.build-media--trio .device--social{right:0; bottom:0;}
.device{position:relative; margin:0; background:#000; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);}
.device video{display:block; width:100%; height:100%; object-fit:cover;}
.device--browser{border-radius:12px; aspect-ratio:16/10.4; display:flex; flex-direction:column;}
.device--browser video{flex:1; min-height:0;}
.device-bar{display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#1b1b20; flex:none;}
.device-bar i{width:9px; height:9px; border-radius:50%; background:#3a3a42;}
.device-bar i:nth-child(1){background:#ff5f57;} .device-bar i:nth-child(2){background:#febc2e;} .device-bar i:nth-child(3){background:#28c840;}
.device-bar span{margin-left:10px; flex:1; max-width:340px; height:18px; border-radius:6px; background:#2a2a31; color:#a9a8a2;
  font-size:11px; line-height:18px; padding:0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.device--phone{aspect-ratio:9/19; border-radius:28px; border:5px solid #1c1c22;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12);}
.device--social{aspect-ratio:9/16;}
/* the day-5 build reads as a raw early cut: a touch of contrast, soft vignette, fine grain */
.device--rough video{filter:contrast(1.08) saturate(.88) brightness(.96);}
.device--rough::after{content:''; position:absolute; inset:30px 0 0; pointer-events:none; z-index:1;
  background:radial-gradient(120% 95% at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay; opacity:.5;}
.device[data-full]{cursor:pointer;}
.device[data-full]:hover{box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 2px var(--gold);}
.device-tag{position:absolute; left:10px; bottom:10px; z-index:2; padding:4px 10px; border-radius:99px; background:rgba(10,10,12,.66);
  color:#f3f1ea; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.build-title{font-family:'Fraunces',serif; font-weight:340; font-size:clamp(40px,4.4vw,64px); line-height:1; margin:6px 0 0;}
.build-tag{font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:.06em; color:var(--gold); margin:12px 0 0;}
.build-text{color:#cfcdc6; font-size:16.5px; line-height:1.65; margin:16px 0 0;}
.build-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:26px;}
.ghost-link{font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--text); border-bottom:1px solid rgba(201,162,75,.6); padding-bottom:2px;}
.ghost-link:hover{color:var(--gold);}
.doc-link{display:flex; align-items:center; gap:12px; padding:8px 14px 8px 8px; border-radius:12px; border:1px solid #34343a; background:rgba(255,255,255,.03);
  transition:border-color .2s, background .2s;}
.doc-link:hover{border-color:var(--gold); background:rgba(201,162,75,.08);}
.doc-link img{width:64px; height:44px; object-fit:cover; object-position:top; border-radius:6px;}
.doc-link span{display:flex; flex-direction:column; font-size:13px; font-weight:600; color:var(--text);}
.doc-link small{font-size:11px; font-weight:500; color:var(--dim); margin-top:2px;}
.build-self{margin-top:12vh; padding:6vh 0 0; border-top:1px solid rgba(255,255,255,.08); text-align:center; max-width:760px; margin-left:auto; margin-right:auto;}
.build-self .build-title{font-size:clamp(44px,5.4vw,80px);}
.build-self .build-text{max-width:620px; margin-left:auto; margin-right:auto;}
@media (max-width:1000px){
  .build, .build--flip{grid-template-columns:1fr; gap:30px;}
  .build--flip .build-media{order:0;} .build--flip .build-copy{order:1;}
}
@media (max-width:600px){
  .webdev{padding:9vh 0 8vh;}
  .webdev-in{padding:0 16px;}
  .webdev-lede{font-size:15.5px;}
  .build-media .device--browser{width:90%;}
  .build-media .device--phone{width:28%; border-width:3px; border-radius:16px;}
  .build-media--trio .device--phone{right:24%;}
  .build-media--trio .device--social{right:0;}
  .device-tag{font-size:8.5px; padding:3px 7px; left:6px; bottom:6px;}
  .device-bar{height:22px;} .device-bar span{font-size:9px; height:14px; line-height:14px;}
  .build-text{font-size:15px;}
}

/* ---------- CONTACT ---------- */
.contact{position:relative; z-index:2; text-align:center; padding:16vh 40px 14vh; border-top:1px solid var(--line);}
.contact-head{font-family:'Bebas Neue',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(72px,11vw,190px); line-height:0.86; margin:0;}
.contact-links{display:flex; justify-content:center; gap:28px; margin-top:34px; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--dim);}
.contact-links a:hover{color:var(--text);}

/* quick note card: autofilled name + email, pre-written editable message */
.note{position:relative; max-width:640px; margin:0 auto; text-align:left; padding:28px 30px 26px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border:1px solid rgba(201,162,75,.28);
  box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);}
.note-title{font-family:'Bebas Neue',sans-serif; font-size:34px; line-height:1; letter-spacing:.01em; margin:0 0 20px 2px;}
.note-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.note-field{display:block; margin-bottom:14px;}
.note-field > span{display:block; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin:0 0 7px 2px;}
.note-field em{font-style:normal; letter-spacing:.04em; text-transform:none; color:var(--dim2); font-weight:500; margin-left:6px;}
.note-field input, .note-field textarea{width:100%; box-sizing:border-box; font:400 16px/1.5 'Inter',sans-serif; color:var(--text);
  background:rgba(0,0,0,.35); border:1px solid #2e2e34; border-radius:10px; padding:12px 14px; outline:none; transition:border-color .2s, box-shadow .2s;}
.note-field textarea{resize:vertical; min-height:120px; overscroll-behavior:contain;}
.note-field input:focus, .note-field textarea:focus{border-color:rgba(201,162,75,.7); box-shadow:0 0 0 3px rgba(201,162,75,.15);}
.note-field input::placeholder{color:#55555c;}
.note-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.note-list{display:flex; align-items:center; gap:10px; font-size:13px; color:#a9a8a2; margin:4px 0 20px 2px; cursor:pointer;}
.note-list input{accent-color:var(--gold); width:16px; height:16px;}
.note-check{margin:0 0 14px;}
.note-check:empty{margin:0;}
.note-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.note-status{margin:0; font-size:13px; color:#d9b866;}
.note-done{position:absolute; inset:0; border-radius:18px; background:rgba(12,12,14,.97); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:30px; animation:noteIn .45s ease both;}
.note-done[hidden]{display:none;}
.note-done-mark{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; font-size:26px; color:#0b0b0c; background:var(--gold); margin-bottom:18px;}
.note-done-title{font-family:'Bebas Neue',sans-serif; font-size:44px; line-height:1;}
.note-done p{color:#bdbbb4; font-size:15px; margin:12px 0 0; max-width:340px;}
@keyframes noteIn{from{opacity:0; transform:scale(.98);} to{opacity:1; transform:none;}}

/* or email directly */
.mail-pick{margin:36px auto 0; max-width:640px;}
.mail-pick-label{display:block; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:14px;}
.mail-pick-row{display:flex; justify-content:center; flex-wrap:wrap; gap:10px;}
.mail-opt{font:600 14px/1 'Inter',sans-serif; color:var(--text); padding:13px 18px; border-radius:10px; background:rgba(255,255,255,.04);
  border:1px solid #34343a; cursor:pointer; transition:border-color .2s, background .2s;}
.mail-opt:hover{border-color:var(--gold); background:rgba(201,162,75,.08);}
.mail-pick-addr{margin-top:14px; font-size:14px; color:var(--dim); letter-spacing:.02em; user-select:all;}

/* ---------- FEATURED: a poster card that links out (Way of the Warrior Kid) ---------- */
.poster-card{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; border-radius:14px; background:#000;}
.poster-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 48%; transition:transform .6s;}
.poster-card:hover img{transform:scale(1.03);}

/* ---------- FEATURED: playable cards (thumbnail button + overlay) ---------- */
.feature-card{position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:14px; background:linear-gradient(135deg,#1d1d22,#0b0b0d);}
.feature-play{position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background:none; cursor:pointer; display:block;}
.feature-play img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s;}
.feature-card:hover .feature-play img{transform:scale(1.03);}
.feature-play .yt-play{top:42%;}
.feature-card .reel-overlay{pointer-events:none;}
.feature-link{pointer-events:auto; font-size:12px; font-weight:600; color:var(--gold); white-space:nowrap;}
.feature-link:hover{text-decoration:underline;}

/* Featured Work + Splinter/2nd Unit: three across on desktop, one big card per row on phones */
.feature-grid{max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px;}
.feature-grid .feature-card, .feature-grid .poster-card{aspect-ratio:4/3;}
.reel-head--sub{padding-top:7vh;}
.sub-headline{font-family:'Fraunces',serif; font-weight:300; font-size:clamp(28px,3.4vw,52px); line-height:1.08; letter-spacing:-0.01em;}
@media (max-width:900px){
  .feature-grid{grid-template-columns:1fr; gap:18px;}
  .feature-grid .feature-card, .feature-grid .poster-card{aspect-ratio:16/11;}
}

/* ---------- MORE WORK: endless carousels (MemoryLab's marquee) ---------- */
.rails{position:relative; z-index:2; padding:10vh 0 4vh;}
.rails .sec-head{padding:0 40px 3vh;}
.rail{margin-bottom:6vh;}
.rail-head{max-width:1400px; margin:0 auto 16px; padding:0 40px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;}
.rail-head h3{font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); font-weight:600;}
.rail-head p{font-size:13px; color:var(--dim);}
.marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);}
.marquee{touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none;}
.marquee--grabbing{cursor:grabbing;}
.marquee-track{display:flex; gap:16px; width:max-content; will-change:transform;}  /* moved by js/rails.js */
.rail-tile{position:relative; flex:none; width:340px; aspect-ratio:16/9; border:0; padding:0; border-radius:12px;
  overflow:hidden; background:var(--panel); cursor:pointer; text-align:left; color:var(--text); font:inherit; display:block;}
.rail-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s;}
.rail-tile:hover img{transform:scale(1.05);}
.rail-tile--text{background:linear-gradient(135deg,#1d1d22,#0d0d10); border:1px solid var(--line);}
.rail-label{position:absolute; top:16px; left:16px; font-family:'Outfit',sans-serif; font-weight:800; font-size:20px; color:#d9d7cf;}
.rail-play{display:block; width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(243,241,234,.55); position:relative;}
.rail-play::after{content:''; position:absolute; left:15px; top:11px; border-style:solid; border-width:9px 0 9px 14px; border-color:transparent transparent transparent rgba(243,241,234,.8);}
.rail-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.88) 100%);}
.rail-views{position:absolute; top:10px; right:10px; background:rgba(0,0,0,.6); border-radius:4px; padding:3px 7px; font-size:11px; font-weight:600; letter-spacing:0.03em;}
.rail-text{position:absolute; left:14px; right:14px; bottom:12px; display:flex; flex-direction:column; gap:2px;}
.rail-role{font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); font-weight:600;}
.rail-title{font-size:15px; font-weight:700; line-height:1.25;}
.rail-sub{font-size:12.5px; color:#c9c8c2;}

/* the video player that opens over the page */
.player{border:0; padding:0; background:transparent; width:min(1200px, 94vw, calc((100vh - 120px) * 16 / 9)); max-width:none; overflow:visible;
  position:fixed; inset:0; margin:auto; height:fit-content;}  /* margin:auto centers it; the site's *{margin:0} reset had pinned it top-left */
.player::backdrop{background:rgba(0,0,0,.86);}
.player-frame iframe{display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:10px; background:#000;}
.player-close{position:absolute; top:-46px; right:0; width:38px; height:38px; border-radius:50%; border:1px solid rgba(243,241,234,.4);
  background:rgba(12,12,14,.6); color:var(--text); font-size:24px; line-height:1; cursor:pointer;}
@media (max-width:860px){
  .rails .sec-head, .rail-head{padding-left:24px; padding-right:24px;}
  .rail-tile{width:260px;}
}

/* ---------- CURATE (localhost only; admin.js does not run when deployed) ---------- */
.adm-pill{
  position:fixed; bottom:64px; left:24px; z-index:70;
  border:1px solid #3a3a40; border-radius:999px; padding:9px 16px;
  font-size:11px; letter-spacing:0.12em; color:var(--dim); cursor:pointer;
  background:rgba(10,10,12,0.7); backdrop-filter:blur(6px); font-family:'Inter',sans-serif;
}
.adm-pill:hover{color:var(--text); border-color:var(--gold);}
/* both pills sit bottom-left, Curate stacked on Adjust hero (the bottom-right
   corner belongs to the Work with me button); the hero bar rides a little higher */
.adm-pill--hero{left:24px; right:auto; bottom:22px;}
.adm-bar--hero{bottom:74px;}
.adm-bar{
  position:fixed; bottom:22px; left:50%; transform:translate(-50%, 80px); z-index:70;
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border:1px solid #3a3a40; border-radius:999px;
  background:rgba(10,10,12,0.88); backdrop-filter:blur(10px);
  transition:transform .3s ease, opacity .3s ease; opacity:0; pointer-events:none;
}
.adm-bar--open{transform:translate(-50%, 0); opacity:1; pointer-events:auto;}
.adm-status{font-size:11.5px; color:var(--dim); letter-spacing:0.04em; padding:0 6px; white-space:nowrap;}
.adm-btn{
  border:1px solid #3a3a40; border-radius:999px; padding:7px 13px; cursor:pointer;
  font-size:11.5px; color:var(--text); background:none; font-family:'Inter',sans-serif;
  white-space:nowrap;
}
.adm-btn:hover:not(:disabled){border-color:var(--gold);}
.adm-btn:disabled{opacity:0.35; cursor:default;}
.adm-btn--danger{color:#ff8d7a; border-color:#5a2c24;}
.adm-btn--danger:hover:not(:disabled){border-color:#ff8d7a;}
.adm-btn--gold{color:var(--gold);}
.curating .chapter__row figure{cursor:grab;}
.curating .chapter__row figure:hover img{filter:brightness(1.15);}
.chapter__row figure.adm-selected{outline:3px solid var(--gold); outline-offset:-3px;}
.chapter__row figure.adm-selected img{filter:brightness(0.45) saturate(0.6);}
.chapter__row figure.adm-dragging{opacity:0.35;}

/* ---------- LIGHTBOX (click a still, it glides to centre stage) ---------- */
.lb-backdrop{
  position:fixed; inset:0; z-index:79;
  background:rgba(5,5,6,0.74); opacity:0;
}
.lb-img{
  position:fixed; z-index:80; margin:0; object-fit:cover; display:block;
  border-radius:8px; box-shadow:0 34px 90px rgba(0,0,0,0.65);
  cursor:zoom-out; touch-action:none;
}
.lb-credit{position:fixed; left:0; right:0; z-index:81; text-align:center; pointer-events:none; opacity:0; transform:translateY(6px);
  font-size:13px; font-weight:600; letter-spacing:.14em; line-height:1.7; text-transform:uppercase; color:rgba(243,241,234,.86); padding:0 16px; white-space:pre-line;}
@media (max-width:600px){ .lb-credit{font-size:11px; letter-spacing:.1em;} }
/* CURATE: each still's credit shows on it while curating */
.adm-credit{display:none;}
.curating .chapter__row figure .adm-credit{display:block; position:absolute; left:6px; right:6px; bottom:6px; padding:3px 6px; border-radius:4px;
  background:rgba(0,0,0,.66); color:#f3e2b5; font-size:10.5px; line-height:1.3; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.adm-credit-in{background:#0d0d0f; border:1px solid #3a3a40; color:var(--text); border-radius:8px; padding:6px 10px; font:12.5px/1.35 'Inter',sans-serif; width:280px; resize:vertical; min-height:38px; align-self:center;}
/* carousel stepping arrows (desktop); phones swipe */
.lb-nav{position:fixed; inset:0; z-index:82; pointer-events:none; opacity:0; transition:opacity .3s;}
.lb-nav.on{opacity:1;}
.lb-arrow{position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.28);
  background:rgba(10,10,12,.55); color:#fff; font-size:34px; line-height:1; cursor:pointer; pointer-events:none; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .2s, border-color .2s;}
.lb-nav.on .lb-arrow{pointer-events:auto;}
.lb-arrow:hover{background:rgba(201,162,75,.25); border-color:var(--gold);}
.lb-arrow--prev{left:max(16px, 2.5vw);} .lb-arrow--next{right:max(16px, 2.5vw);}
@media (hover:none){ .lb-arrow{display:none;} }
/* pinching works on the lifted picture only; the page behind never moves */
.lb-backdrop{touch-action:none;}

@media (max-width:860px){
  /* phone gutter: the reference hangs everything on 5vw at 375 */
  :root{ --gutter:clamp(18px, 5vw, 40px); }
  .pillars-section{padding:10vh 24px 80px;}
  .pillar-grid{grid-template-columns:1fr; gap:24px;}
  .reel-section{padding:4vh 24px 80px;}
  .reel-card{aspect-ratio:16/11;}
  .nav{padding:18px var(--gutter);}
  .nav-sig{height:30px; margin-right:-8px;}
  .nav-name{font-size:16px; white-space:nowrap;}

  /* ---- hero, measured against the reference at 375px wide: the carousel lands
     at 416px (1.11× the width), the name is Bebas 88px (23.4vw) with a 24px
     eyebrow 32px above it, the whole text block bottom-aligned 32px above the
     strip, and the subject is tucked top-right and dropped back into the dark.
     Mobile keeps its own framing: the desktop hero editor's transform is
     deliberately not applied here. ---- */
  .hero{
    min-height:clamp(416px, 111vw, 640px); align-items:flex-end;
    background:
      radial-gradient(64vw 76vw at 74% 30%, rgba(74,156,224,0.70) 0%, rgba(50,132,198,0.40) 38%, rgba(30,96,152,0.12) 66%, rgba(24,80,130,0) 85%),
      linear-gradient(170deg, rgba(10,15,22,0) 0%, rgba(18,58,92,0.14) 34%, rgba(26,92,146,0.30) 62%, rgba(32,114,172,0.42) 100%),
      #0a0f13;
  }
  .hero-photo{width:64%; opacity:0.62;}
  .hero-photo img{height:82%; transform:translate(-50%, 0) scale(1);}
  .hero-photo--full{width:100%; top:60px;}
  .hero-photo--full img{height:100%; transform:none; object-position:66% 25%;}
  .hero-inner{width:100%; padding:0 var(--gutter) 32px;}
  .hero-eyebrow{font-size:clamp(18px, 6.4vw, 24px); margin-bottom:30px; line-height:1.25;}
  .hero-name{font-size:clamp(64px, 23.4vw, 110px); line-height:1;}

  /* carousel cards at the reference's phone size: 85% of the width, 3:2 */
  .strip__card{width:min(85vw, 360px); height:calc(min(85vw, 360px) / 1.5); margin-right:16px;}
  /* split into two half-size strips running opposite ways (js/strip.js) */
  .strip--half{padding:6px 0 4px;}
  .strip--half.strip--second{padding:4px 0 6px;}
  .strip--half .strip__card{width:min(42vw, 180px); height:calc(min(42vw, 180px) / 1.5); margin-right:8px; border-radius:10px;}
  .services{grid-template-columns:1fr; gap:26px; padding:8vh 22px;}
  .services-photo{aspect-ratio:16/10;}
  .stills-head{padding:0 24px 4vh;}
  .proof{padding:6vh 24px 7vh;}
  .proof-names{gap:6px 20px;}
  .proof-awards{grid-template-columns:1fr; gap:16px;}
  .directed,.specialty{padding-left:24px; padding-right:24px;}
  .directed-stats{grid-template-columns:repeat(2,1fr); gap:20px 16px;}
  .directed-videos{grid-template-columns:1fr; gap:22px;}
  .directed-videos figcaption{flex-direction:column; gap:2px;}
  .rig-grid{grid-template-columns:1fr; gap:14px;}
  .rig--wide{padding:24px;}
  .rig-videos{grid-template-columns:1fr;}
  .contact{padding:12vh 24px 11vh;}
  .note{padding:22px 18px 20px; border-radius:16px;}
  .note-row{grid-template-columns:1fr; gap:0;}
  .note-title{font-size:30px; margin-bottom:16px;}
  .note-send{width:100%;}
  .mail-pick-row{display:grid; grid-template-columns:1fr 1fr;}
  .mail-opt{padding:13px 14px; font-size:14px;}
}
.nowrap{white-space:nowrap;}

/* ---------- BTS strips: two half-height rows + the floating Swipe tip ---------- */
.strips{position:relative; z-index:2; background:var(--bg);}
.strip--half{padding:8px 0 5px;}
.strip--half.strip--second{padding:5px 0 8px;}
.strip--half .strip__card{width:260px; height:170px; margin-right:10px; border-radius:12px;}
.strips-tip{position:absolute; left:50%; top:50%; z-index:6; pointer-events:none;
  transform:translate(-50%,-50%); padding:9px 18px; border-radius:99px;
  background:rgba(12,12,14,.5); border:1px solid rgba(243,241,234,.35); color:rgba(243,241,234,.92);
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:tip-bob 1.8s ease-in-out infinite; transition:opacity .5s;}
.strips-tip span{opacity:.75; letter-spacing:0;}
.strips-tip.is-gone{opacity:0;}
@keyframes tip-bob{0%,100%{transform:translate(-50%,-50%);} 50%{transform:translate(calc(-50% + 12px),-50%);}}
@media (prefers-reduced-motion:reduce){.strips-tip{animation:none;}}

/* ---------- FEATURED WORK: the Way of the Warrior Kid spotlight ---------- */
.spotlight{position:relative; z-index:2; padding:12vh 40px 6vh; max-width:1480px; margin:0 auto;}
.spot{max-width:1400px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; align-items:center;}
.spot-media{position:relative; border-radius:18px; overflow:hidden; background:#000; aspect-ratio:1085/1400; height:min(84vh, 820px); width:auto; max-width:100%; justify-self:end;}
.spot-open{position:absolute; inset:0; border:0; padding:0; background:none; cursor:pointer; display:block; width:100%; height:100%;}
.spot-open img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s;}
.spot-open:hover img{transform:scale(1.03);}
.spot-bts{position:absolute; left:18px; bottom:18px; padding:8px 14px; border-radius:99px; background:rgba(10,10,12,.62);
  color:#f3f1ea; font-size:12px; font-weight:600; letter-spacing:.08em; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.spot-imdb{position:absolute; right:18px; bottom:18px; z-index:2; padding:8px 14px; border-radius:99px; background:var(--gold);
  color:#0b0b0c; font-size:12px; font-weight:700; letter-spacing:.06em;}
.spot-release{display:flex; align-items:center; gap:22px;}
.spot-network{height:clamp(40px,3.6vw,58px); width:auto; display:block;}
.spot-date{border-left:1px solid rgba(201,162,75,.55); padding-left:22px;}
.spot-date span{display:block; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); font-weight:600;}
.spot-date b{display:block; font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(40px,4.4vw,70px); line-height:.95;
  color:var(--gold); letter-spacing:.01em; margin-top:4px; text-shadow:0 0 28px rgba(201,162,75,.35);}
.spot-title{font-family:'Fraunces',serif; font-weight:300; font-size:clamp(46px,5.6vw,96px); line-height:1.0; letter-spacing:-0.015em; margin:16px 0 0;}
.spot-cast{margin:18px 0 0; font-size:16px; color:#d3d2cb;}
.spot-roles{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px;}
.spot-roles li{border:1px solid rgba(201,162,75,.5); color:var(--text); border-radius:99px; padding:6px 13px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;}
.spot-text{margin:22px 0 0; font-size:16px; line-height:1.65; color:#b9b7b0; max-width:52ch;}
.spot-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:28px;}
.spot-btn{border:0; border-radius:10px; padding:15px 24px; background:var(--gold); color:#0b0b0c; font-weight:700; font-size:15px; cursor:pointer;}
.spot-btn:hover{box-shadow:0 10px 30px rgba(201,162,75,.35);}
.spot-link{font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--gold);}

/* the Oprah special's poster is portrait: keep her and the title in frame */
.feature-play img.oprah-poster{object-position:center 22%;}

/* ---------- ARMENIA: same frame as the Sons of Legion pair ---------- */
.armenia{position:relative; z-index:2; padding:8vh 40px 8vh; max-width:1480px; margin:0 auto;}
.armenia .sec-head .stills-eyebrow{margin-bottom:14px;}

/* ---------- AI before/after pair ---------- */
.pillar-vid.ba video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
/* the AI clip is letterboxed 2.39:1 inside 16:9; scale the bars away */
.pillar-vid.ba video{transform:scale(1.34);}
.ba-tag{position:absolute; left:10px; bottom:10px; padding:4px 10px; border-radius:99px; background:rgba(10,10,12,.62);
  color:#f3f1ea; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;}
.player-frame video{display:block; width:100%; aspect-ratio:16/9; border-radius:10px; background:#000;}

/* ---------- BTS gallery pop-up (js/bts-gallery.js) ---------- */
html.bg-locked, html.bg-locked body{overflow:hidden;}
.bg-pop{position:fixed; inset:0; z-index:95; background:#050506; display:none; flex-direction:column;}
.bg-pop.is-open{display:flex;}
.bg-top{display:flex; align-items:center; gap:16px; padding:16px max(16px, env(safe-area-inset-right)) 10px 20px; color:#f3f1ea;}
.bg-title{flex:1; min-width:0; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bg-count{font-size:13px; color:#a9a7a0; font-variant-numeric:tabular-nums;}
.bg-close{width:40px; height:40px; border-radius:50%; border:1px solid rgba(243,241,234,.4); background:none; color:#f3f1ea; font-size:24px; line-height:1; cursor:pointer;}
.bg-track{flex:1; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior:contain; touch-action:pan-x;}
.bg-track::-webkit-scrollbar{display:none;}
/* each picture fills its slide (letterboxed, never cropped), so the web-size
   stills scale up to the screen instead of sitting at their pixel size */
.bg-slide{flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; position:relative; overflow:hidden; padding:0 84px 3vh;}
.bg-slide img, .bg-slide video, .bg-slide canvas{display:block; width:100%; height:100%; object-fit:contain; transform-origin:0 0;}
.bg-track.is-zoomed{overflow-x:hidden; touch-action:none;}
.bg-nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid rgba(243,241,234,.35);
  background:rgba(12,12,14,.55); color:#f3f1ea; font-size:30px; line-height:1; cursor:pointer;}
.bg-prev{left:16px;} .bg-next{right:16px;}
.bg-nav:disabled{opacity:.25; cursor:default;}

@media (max-width:860px){
  .spotlight{padding:9vh 24px 4vh;}
  .spot{grid-template-columns:1fr; gap:26px;}
  .spot-media{aspect-ratio:4/5; height:auto; width:100%; justify-self:stretch;}
  .spot-release{flex-wrap:wrap; gap:14px;}
  .spot-date{border-left:0; padding-left:0; width:100%;}
  .spot-open img{object-position:center 30%;}
  .spot-title{font-size:clamp(40px,12vw,64px);}
  .spot-text{font-size:15px;}
  .armenia{padding:6vh 24px 6vh;}
}
@media (max-width:600px){
  .strip--half .strip__card{width:min(42vw, 180px); height:calc(min(42vw, 180px) / 1.5); margin-right:8px; border-radius:10px;}
  .strip--half{padding:6px 0 4px;}
  .strip--half.strip--second{padding:4px 0 6px;}
  .strips-tip{font-size:11px; padding:7px 14px;}
  .bg-nav{display:none;}
  .bg-slide{padding:0 0 4vh;}

  /* phones: the words sit under the picture, never on top of it, so they
     can't collide with titles already printed on a thumbnail */
  .feature-grid .feature-card, .feature-grid .poster-card{aspect-ratio:auto; overflow:visible; background:none; border-radius:0;}
  .feature-grid .feature-card .feature-play{position:relative; inset:auto; height:auto; aspect-ratio:16/10; border-radius:14px; overflow:hidden;}
  .feature-grid .poster-card img{position:relative; inset:auto; display:block; height:auto; aspect-ratio:16/10; border-radius:14px;}
  .feature-grid .reel-overlay{position:static; background:none; padding:12px 2px 6px;}
  .feature-grid .feature-link{pointer-events:auto;}

  /* awards: smaller plaques */
  .award{padding:24px 20px 22px;}
  .award-mark{height:82px; margin-bottom:10px;}
  .award-mark--asc .asc-badge{width:82px;}
  .laurel{width:112px; height:60px;}
  .award-big{font-size:22px;}
  .award-small{font-size:12.5px; margin-top:8px;}
  .award-hint{padding-top:12px;}
  .award-back-title{font-size:22px;}
  .award-unflip{bottom:14px; right:14px;}

  /* Sons of Legion paragraph: centered on phones */
  .directed-text{text-align:center;}
}

/* ---------- PHONES + TABLETS: every section reads in rows, three across
   (two across for the wide videos), instead of one big card per row ---------- */
@media (max-width:860px){
  .proof-awards{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
  .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
  .directed-stats{grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;}
  .directed-videos{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .rig-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
  .rig-videos{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .pillar-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:start;}
  .pillar-media .reel-card, .pillar-media.stacked .reel-card{height:auto; width:100%;}
  .pillar-vid{height:auto; width:100%;}
}
@media (max-width:600px){
  /* awards: three small plaques */
  .award{padding:12px 7px 10px; border-radius:10px;}
  .award::before{inset:4px; border-radius:7px;} .award::after{inset:6px; border-radius:5px;}
  .award-flip, .award-back{border-radius:10px;}
  .award-mark{height:38px; margin-bottom:6px;}
  .award-mark--asc .asc-badge{width:38px;}
  .laurel{width:58px; height:31px;}
  .award-kicker{font-size:6.5px; letter-spacing:.14em;}
  .award-big{font-size:11px; line-height:1.15; margin-top:4px;}
  .award-small{font-size:7.5px; line-height:1.35; margin-top:4px;}
  .award-hint{font-size:6px; letter-spacing:.1em; padding-top:8px;}
  .award-back-text{padding:18px 7px 28px;}
  .award-back-title{font-size:12px;}
  .award-back-sub{font-size:7px; line-height:1.3; margin-top:2px;}
  .award-unflip{bottom:6px; right:6px; font-size:7.5px; padding:3px 7px; letter-spacing:.02em;}

  /* DP Work + Splinter Unit: poster-shaped thumbnails, small captions under */
  .feature-grid .feature-card .feature-play, .feature-grid .poster-card img{aspect-ratio:4/5;}
  .feature-grid .reel-overlay{padding:6px 0 2px;}
  .feature-grid .reel-badges{font-size:7px; letter-spacing:.08em; line-height:1.35;}
  .feature-grid .reel-credits{font-size:7px; line-height:1.35; margin-top:3px;}
  .feature-grid .reel-bottom{flex-direction:column; align-items:flex-start; gap:2px; margin-top:4px;}
  .feature-grid .reel-title{font-size:11px; line-height:1.2;}
  .feature-grid .feature-link, .feature-grid .reel-time{font-size:8px;}

  /* Big impact + Armenia: two across */
  .directed-stats b{font-size:clamp(26px,8.6vw,38px);}
  .directed-stats span{font-size:7.5px; letter-spacing:.1em;}
  .directed-stats div{padding-top:10px;}
  .directed-videos figcaption{margin-top:6px; font-size:10.5px; line-height:1.3;}
  .directed-videos figcaption span{font-size:9px; white-space:normal;}
  .yt, .yt-frame{border-radius:10px;}

  /* specialty: three small rig cards, the wide AGC card on top */
  .rig{padding:8px 8px 10px; border-radius:10px;}
  .rig-media{margin:-8px -8px 8px; aspect-ratio:1/1; border-radius:10px 10px 0 0;}
  .rig-kicker{font-size:6.5px; letter-spacing:.1em;}
  .rig h3{font-size:11px; line-height:1.2; margin:4px 0 2px;}
  .rig p{font-size:11px; line-height:1.5;}
  .rig--wide{padding:16px;}
  .rig--wide h3{font-size:26px;}
  .rig--wide p{font-size:13px;}
  .rig-link{font-size:11px; margin-top:8px;}
  .rig-videos{gap:8px; margin-top:12px;}
  .rig-video figcaption{font-size:9.5px; margin-top:6px;}

  /* pillars: two across */
  .pillar{padding:6px 6px 10px; border-radius:12px;}
  .pillar-media{gap:5px;}
  .pillar-media .reel-card, .pillar-vid{border-radius:8px;}
  .pillar-copy{padding:0 2px;}
  .pillar-kicker{font-size:7px; letter-spacing:.08em; margin-top:8px; line-height:1.35;}
  .pillar-title{font-size:11.5px; line-height:1.25; margin-top:3px;}
  .pillar-text{font-size:11px; line-height:1.5;}
  .ba-tag{font-size:7px; padding:2px 6px; left:5px; bottom:5px;}
}

/* "More" chevrons (js/more.js): on phones a card's description folds away
   behind a small chevron so the cards can sit side by side */
.more-btn{display:none;}
@media (max-width:600px){
  .foldable .fold{display:none;}
  .foldable.is-open .fold{display:block;}
  .more-btn{display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:3px 0; border:0; background:none;
    color:var(--gold); font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;}
  .more-btn::after{content:''; width:5px; height:5px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg) translateY(-2px); transition:transform .25s;}
  .foldable.is-open .more-btn::after{transform:rotate(-135deg) translate(-1px,-1px);}
}

/* section backdrops (js/backdrops.js): fixed, blurred, drifting slowly */
.backdrops{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.backdrop{position:absolute; inset:-30% -10%; background:center/cover no-repeat; opacity:0;
  filter:blur(28px) saturate(1.15); will-change:opacity, transform; transform:scale(1.15);}
/* gradients are already soft: blurring them is pure GPU cost on every frame */
.backdrop--color{filter:none;}
.backdrop-veil{position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 45%, rgba(10,10,12,.15) 0%, rgba(10,10,12,.55) 70%, rgba(10,10,12,.8) 100%);}
/* everything sits above the backdrop layer */
.hero{z-index:2;}
.services{position:relative; z-index:2;}
@media (max-width:600px){ .rig--wide .more-btn{display:flex;} }
/* thumbnails cropped tall on phones: keep the faces in frame */
@media (max-width:600px){
  .feature-grid img[src*="hurt-thumb"]{object-position:18% center;}
  .feature-grid img[src*="_KwZ1tuibHw"]{object-position:70% center;}
}

/* AI before/after as scrub cards; the "as shot" half waits for its file */
.pillar-media.stacked .reel-card.ba{touch-action:pan-y; border-radius:14px;}
.reel-card.ba video{transform:scale(1.34);}
.reel-card.ba .ba-tag{z-index:4;}
.reel-card[data-optional]:not(.has-video){display:none;}
/* scrub cards that can pop forward show a pointer hint */
.pillar .reel-card{cursor:pointer;}

/* the player at the clip's own shape, popping forward */
.player.player--free{width:auto; max-width:94vw;}
.player--free .player-frame video{width:auto; height:auto; max-width:94vw; max-height:84vh; aspect-ratio:auto; margin:0 auto;}
.player[open]{animation:player-pop .45s cubic-bezier(.2,.8,.2,1);}
@keyframes player-pop{from{opacity:0; transform:scale(.86);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){.player[open]{animation:none;}}
/* the stills heading stays above the incoming rows while it fades */
#stills .stills-head{position:relative; z-index:3;}

/* peek (js/peek.js): a row item lifted forward on phones */
.peek-backdrop{position:fixed; inset:0; z-index:89; background:rgba(5,5,6,.8); opacity:0; transition:opacity .35s;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.peek-backdrop.on{opacity:1;}
.peek-box{position:fixed; z-index:90; margin:0 !important; padding:0 !important; display:block !important; max-width:none !important;
  transform-origin:0 0; transition:transform .45s cubic-bezier(.2,.8,.2,1); cursor:pointer;}
.peek-box > *{box-shadow:0 30px 80px rgba(0,0,0,.65);}
.peek-hint{position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom)); z-index:91; transform:translate(-50%,10px); opacity:0;
  transition:opacity .35s, transform .35s; pointer-events:none; white-space:nowrap; padding:8px 14px; border-radius:99px;
  background:rgba(12,12,14,.7); border:1px solid rgba(243,241,234,.3); color:#f3f1ea; font-size:11px; letter-spacing:.06em;}
.peek-hint.on{opacity:1; transform:translate(-50%,0);}
@media (prefers-reduced-motion:reduce){.peek-box{transition:none;}}
/* "Worked for" list centered on every screen size */
.proof-label{text-align:center;}
.proof-names{justify-content:center;}

/* More Work: carousels / grid toggle beside the heading */
.rails-head{display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap;}
.view-toggle{display:inline-flex; gap:2px; padding:3px; margin-bottom:10px; border:1px solid rgba(243,241,234,.22); border-radius:10px; background:rgba(12,12,14,.45);}
.view-toggle button{width:40px; height:34px; border:0; border-radius:7px; background:none; color:rgba(243,241,234,.5); display:grid; place-items:center; cursor:pointer; padding:0;}
.view-toggle button:hover{color:var(--text);}
.view-toggle button[aria-pressed="true"]{background:rgba(243,241,234,.14); color:var(--gold);}

/* grid view: every tile at once, small, no motion (the second, looping copy
   of each row is hidden) */
.marquee-track.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px;
  width:auto; max-width:1400px; margin:0 auto; padding:0 40px;}
.marquee-track.grid:not(.peek-box){transform:none !important;}
.marquee-track.grid > [aria-hidden="true"]{display:none;}
.marquee-track.grid .rail-tile{width:auto;}
.marquee-track.grid .rail-title{font-size:13px;}
.marquee-track.grid .rail-sub{font-size:11px;}
.marquee-track.grid .rail-role{font-size:9px;}
.rails.is-grid .rail{margin-bottom:4vh;}
.rails.is-grid .marquee{cursor:default;}
@media (max-width:600px){
  .marquee-track.grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; padding:0 16px;}
  .marquee-track.grid .rail-tile{border-radius:8px;}
  .marquee-track.grid .rail-text{left:6px; right:6px; bottom:5px;}
  .marquee-track.grid .rail-role{display:none;}
  .marquee-track.grid .rail-title{font-size:8.5px; line-height:1.2;}
  .marquee-track.grid .rail-sub{font-size:7px;}
  .marquee-track.grid .rail-views{top:4px; right:4px; font-size:7px; padding:1px 4px;}
  .view-toggle button{width:36px; height:30px;}
}

/* Lenis smooth scrolling (js/smooth.js); the library's own iframe rule is left
   out on purpose, it would block clicks in the video player */
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}

/* ---------- gold buttons (Work with me, Send note, the Web & App links) in a
   saturated orange-gold: glossy, a little 3D, with a slow glint of light ---------- */
.cta-btn{position:relative; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate;
  padding:15px 32px; border-radius:12px; text-decoration:none; white-space:nowrap;
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#2a1600;
  background:linear-gradient(180deg,#ffdb8a 0%,#ffb43a 34%,#f39a12 60%,#cf7406 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),            /* bright top lip */
    inset 0 -3px 6px rgba(110,50,0,.45),            /* shade along the bottom edge */
    inset 1px 0 0 rgba(255,255,255,.35), inset -1px 0 0 rgba(255,255,255,.25),
    0 3px 0 #9a5404,                                /* the button's depth */
    0 10px 26px rgba(245,155,30,.42), 0 2px 6px rgba(0,0,0,.35);
  transition:transform .2s, box-shadow .25s, filter .25s;}
.cta-btn span{position:relative; z-index:2; text-shadow:0 1px 0 rgba(255,255,255,.45);}
/* gloss: a soft reflection across the top half */
.cta-btn::before{content:''; position:absolute; z-index:1; left:16.25%; right:16.25%; top:2px; height:36%; border-radius:10px 10px 50% 50% / 10px 10px 100% 100%;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.05)); pointer-events:none;}
/* glint: a narrow band of light sliding across now and then */
.cta-btn::after{content:''; position:absolute; z-index:1; top:-60%; left:-70%; width:38%; height:220%; transform:rotate(22deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0)); pointer-events:none;
  animation:cta-glint 5s ease-in-out infinite;}
@keyframes cta-glint{0%,62%{left:-70%;} 100%{left:135%;}}
.cta-btn:hover{transform:translateY(-2px); filter:saturate(1.1) brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 6px rgba(110,50,0,.45), 0 5px 0 #9a5404, 0 16px 34px rgba(245,155,30,.55), 0 2px 6px rgba(0,0,0,.35);}
.cta-btn:active{transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 5px rgba(110,50,0,.5), 0 1px 0 #9a5404, 0 6px 16px rgba(245,155,30,.4);}
@media (prefers-reduced-motion:reduce){.cta-btn::after{animation:none; display:none;}}
.head-row{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}

/* ---------- Big impact: heading left, dedicated reel frame right ---------- */
.directed-top{max-width:1400px; margin:0 auto 4vh; display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:40px; align-items:end;}
.directed-top .sec-head{padding-bottom:0; margin:0;}
.reel-slot{position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; cursor:pointer;
  background:radial-gradient(120% 120% at 30% 20%, rgba(201,162,75,.16), rgba(10,10,12,.6) 60%), rgba(10,10,12,.55);
  border:1px solid rgba(243,241,234,.18); box-shadow:0 30px 70px rgba(0,0,0,.45);}
.reel-slot video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;}
.reel-slot.has-video video{display:block;}
.reel-slot.has-video .reel-slot-empty{display:none;}
.reel-slot-empty{position:absolute; inset:14px; border:1px dashed rgba(243,241,234,.25); border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;}
.reel-slot-empty span{font-family:'Fraunces',serif; font-weight:300; font-size:clamp(22px,2.2vw,34px); color:var(--text);}
.reel-slot-empty small{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);}

/* ---------- About: button, title and the photo with Shane on the left; the
   copy on the right starts level with the top of the photo ---------- */
.services{grid-template-areas:"head ." "photo copy"; grid-template-rows:auto auto; align-items:start; row-gap:0;}
.services .services-head{grid-area:head; margin-bottom:26px;}
.services-photo{grid-area:photo;}
.services-copy{grid-area:copy;}
.services-copy .services-kicker{margin-top:0;}

@media (max-width:860px){
  .directed-top{grid-template-columns:1fr; gap:22px;}
  .services{grid-template-columns:1fr; grid-template-areas:"cta" "head" "photo" "copy"; row-gap:0;}
  .services-photo{margin-bottom:26px;}
}
@media (max-width:600px){
  .cta-btn{padding:13px 24px; font-size:12px;}
}

/* ---------- button placements, round 2 ---------- */
/* Worked for + awards sit higher, right under Featured Work; button below the plaques */
.spotlight{padding-bottom:2vh;}
.proof{padding-top:3vh;}
.head-row--first{align-items:flex-start;}
/* Big impact: the reel starts at the top of the section */
.directed{padding-top:5vh;}
.directed-top{align-items:start;}

/* placeholders still being filled: visible on localhost only */
html:not(.is-local) .local-only{display:none !important;}
/* with the reel frame hidden, the Big Impact heading takes the full width */
html:not(.is-local) .directed-top{grid-template-columns:1fr;}

/* phones: Work with me buttons 10% smaller than their earlier phone size */
@media (max-width:600px){
  .cta-btn{padding:11.7px 21.6px; font-size:10.8px; border-radius:11px;}
}

/* phones: the work and social cards read as photo, name, network. The long
   kicker and credit lines stay on desktop; .reel-hub / .pillar-hub only show here. */
.reel-hub, .pillar-hub{display:none;}
@media (max-width:600px){
  .feature-grid .reel-badges, .feature-grid .reel-credits{display:none;}
  /* the watch links stay: Disney+, Apple TV, IMDb */
  .feature-grid .feature-link, .feature-grid .reel-time{display:block; order:3; margin-top:3px; font-size:8.5px; color:var(--gold);}
  .feature-grid .reel-hub{display:block; font-size:8.5px; font-weight:600; letter-spacing:.06em; color:var(--gold); text-transform:uppercase; line-height:1.3;}
  .feature-grid .reel-bottom{margin-top:0;}

  /* social: four identical frames, two across */
  .pillar-grid{align-items:stretch;}
  .pillar{display:flex; flex-direction:column;}
  .pillar-media, .pillar-media.stacked{aspect-ratio:4/5; width:100%; flex:none;}
  .pillar-media > .reel-card, .pillar-media > .pillar-vid,
  .pillar-media.stacked > .reel-card, .pillar-media.stacked > .pillar-vid{
    aspect-ratio:auto !important; width:100%; height:auto; flex:1 1 0; min-height:0;}
  .pillar-vid img{width:100%; height:100%; object-fit:cover;}
  .pillar-kicker{display:none;}
  .pillar-title{margin-top:8px; min-height:2.5em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .pillar-hub{display:block; font-size:8.5px; font-weight:600; letter-spacing:.06em; color:var(--gold); text-transform:uppercase; margin-top:2px;}
}

/* the one Work with me button (nav.js): bottom-right corner; fades in 350ms
   after scrolling rests */
.cta-btn.cta-float{position:fixed; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); right:24px; z-index:61;
  font-size:12px; padding:10px 20px; opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .45s, transform .45s cubic-bezier(.22,.7,.3,1);}
.cta-btn.cta-float.cta-float--on{opacity:1; transform:none; pointer-events:auto;}
@media (max-width:600px){
  .cta-btn.cta-float{font-size:10.5px; padding:9px 14px; right:16px;}
}
/* while a picture is lifted, the corner buttons stay out of the way (the wall
   sliding behind would otherwise blink them on and off) */
.lb-open .skip-group, .lb-open .cta-btn.cta-float{opacity:0 !important; pointer-events:none !important;}