:root{
  --bg:#0b0b0c;
  --bg-alt:#131315;
  --line:#232325;
  --text:#f5f3ef;
  --text-dim:#9b9891;
  --accent:#ff5c2b;
  --accent2:#84b3ae;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#0b0b0c;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px;}
h1,h2,h3,.display{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:600;
  line-height:1.03;
  letter-spacing:-.028em;
}
.eyebrow{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
  font-weight:500;
  display:block;
}
.eyebrow a{color:var(--text-dim);border-bottom:1px solid var(--line);padding-bottom:1px;}
.eyebrow a:hover{color:var(--text);border-color:var(--text);}
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;}

/* ---- INTRO (home, first load only) ---- */
.intro{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);cursor:pointer;
  transition:opacity 1s ease;
}
.intro.is-hidden{opacity:0;pointer-events:none;}
.intro-mark{
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(28px,6vw,60px);letter-spacing:-.02em;color:var(--text);
  opacity:0;transform:translateY(10px);
  animation:introReveal 1.6s cubic-bezier(.22,1,.36,1) forwards;
  text-align:center;
}
.intro-mark span{color:var(--text-dim);}
.intro-line{
  display:block;height:2px;width:0;margin:14px auto 0;background:var(--accent);
  animation:introLine 1s ease 1.1s forwards;
}
@keyframes introReveal{to{opacity:1;transform:translateY(0);}}
@keyframes introLine{to{width:100%;}}
@media (prefers-reduced-motion: reduce){
  .intro{display:none;}
}

/* ---- NAV ---- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px;
  background:linear-gradient(to bottom, rgba(11,11,12,.85), rgba(11,11,12,.4) 70%, transparent);
}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;letter-spacing:-.02em;}
.logo span{color:var(--text-dim);}
nav ul{list-style:none;display:flex;gap:24px;}
nav a{font-size:14px;color:var(--text-dim);transition:color .2s;}
nav a:hover{color:var(--text);}
nav a[aria-current="page"]{color:var(--text);}
.tc{font-size:13px;color:var(--text-dim);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;color:var(--text);width:38px;height:38px;cursor:pointer;font-size:16px;}

/* ---- PHOTO HERO (home) ---- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:url("/images/hero.jpg") center/cover no-repeat;
  filter:brightness(1.24) saturate(1.38) contrast(1.03);
}
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(11,11,12,.12) 0%, rgba(11,11,12,.30) 42%, rgba(11,11,12,.80) 78%, var(--bg) 100%);
}
.hero-inner{position:relative;z-index:2;padding:150px 0 48px;}
.hero h1{
  font-size:clamp(42px,7.5vw,104px);
  max-width:16ch;
  letter-spacing:-.035em;
}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero-sub{
  margin-top:24px;
  max-width:460px;
  color:#dcd9d3;
  font-size:17px;
  line-height:1.55;
}

/* ---- PLAIN PAGE HERO (subpages) ---- */
.page-hero{position:relative;overflow:hidden;padding:168px 0 88px;border-bottom:1px solid var(--line);}
.page-hero-media{position:absolute;inset:0;z-index:0;}
.page-hero-bg{
  position:absolute;inset:-20px;z-index:0;background-size:cover;background-position:center;
  filter:blur(3px) brightness(.7);
}
.page-hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(11,11,12,.25) 0%, rgba(11,11,12,.55) 55%, var(--bg) 100%);
}
video.page-hero-bg{object-fit:contain;inset:0;width:100%;height:100%;}
.page-hero-photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:opacity .5s ease;
}
.page-hero-photo.is-hidden{opacity:0;}
.page-hero-logo{
  position:absolute;z-index:2;right:28px;bottom:28px;
  width:104px;height:104px;border-radius:16px;overflow:hidden;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
}
.page-hero-logo img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:640px){ .page-hero-logo{width:72px;height:72px;right:20px;bottom:20px;border-radius:12px;} }
.page-hero > .wrap{position:relative;z-index:2;}
.page-hero h1{font-size:clamp(38px,6.4vw,80px);max-width:18ch;margin-top:16px;letter-spacing:-.03em;}
.page-hero p{margin-top:22px;max-width:580px;color:var(--text-dim);font-size:17px;line-height:1.65;}
.page-hero p + p{margin-top:14px;}

/* ---- WIDE BRAND BANNER ---- */
.brand-banner{position:relative;aspect-ratio:1584/396;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg);}
.brand-banner img{
  width:100%;height:100%;object-fit:cover;object-position:right center;display:block;
}
.brand-banner-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, var(--bg) 0%, transparent 24%, transparent 76%, var(--bg) 100%);
}
.brand-banner-text{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;
  width:58%;padding:0 4% 0 5%;
}
.brand-banner-text span{
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(13px,2.1vw,22px);line-height:1.35;letter-spacing:-.01em;
  color:var(--text);text-shadow:0 2px 14px rgba(0,0,0,.6);
}
@media(max-width:640px){ .brand-banner-text span{font-size:11px;line-height:1.3;} }

.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
.tag-row span, .tag-row a{
  font-size:12px;color:var(--text-dim);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;background:rgba(11,11,12,.4);
  transition:border-color .2s, color .2s;
}
.tag-row a:hover{color:var(--text);border-color:var(--text);}

/* ---- BUTTONS ---- */
.hero-cta{
  margin-top:32px;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:999px;
  background:var(--text);color:var(--bg);
  font-size:14px;font-weight:500;
  transition:transform .2s ease, opacity .2s ease;
}
.hero-cta::after{content:"→";}
.hero-cta:hover{transform:translateY(-2px);opacity:.92;}
.hero-cta.ghost{background:transparent;border:1px solid var(--line);color:var(--text);}
.hero-cta.ghost:hover{border-color:var(--text);}

/* ---- MARQUEE ---- */
.marquee{border-bottom:1px solid var(--line);padding:16px 0;overflow:hidden;white-space:nowrap;background:var(--bg-alt);}
.marquee-track{display:inline-block;animation:marquee 100s linear infinite;}
.marquee span{font-size:15px;color:var(--text-dim);padding:0 6px;}
.marquee span::after{content:"•";margin-left:32px;color:var(--line);}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- SECTION shared ---- */
section{padding:112px 0;border-bottom:1px solid var(--line);}
#overview{padding:56px 0 64px;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:52px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(30px,4.4vw,50px);margin-top:12px;}
.section-head p{max-width:340px;color:var(--text-dim);font-size:15px;line-height:1.6;}

/* ---- WORK GRID ---- */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;}
.work-card{
  grid-column:span 6;
  position:relative;border:1px solid var(--line);border-radius:14px;
  aspect-ratio:4/3;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px;
  background:linear-gradient(155deg,#1b1b1e,#0c0c0d 72%);
  transition:border-color .25s, transform .25s;
}
.work-card:hover{border-color:#3a3a3d;transform:translateY(-3px);}
.work-card:nth-child(3n+2){grid-column:span 4;}
.work-card:nth-child(3n+3){grid-column:span 8;}
.work-num{position:absolute;top:20px;right:22px;font-size:12px;color:var(--text-dim);}
.work-tag{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px;}
.work-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:22px;letter-spacing:-.02em;}

.work-card--video{grid-column:span 12;aspect-ratio:16/9;}
.work-card--video:hover{transform:none;}
.work-video{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:0;}
.work-card--video .work-cap{
  position:absolute;top:0;left:0;right:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;gap:6px;
  padding:22px;
  background:linear-gradient(to bottom, rgba(11,11,12,.78), transparent);
}
.work-card--video .work-num{position:static;}

/* ---- QUOTE LIST (Work) ---- */
.quote-list{list-style:none;}
.quote-list li{
  position:relative;padding:14px 0 14px 22px;border-top:1px solid var(--line);
  font-size:15px;line-height:1.55;color:var(--text-dim);font-style:italic;
}
.quote-list li:last-child{border-bottom:1px solid var(--line);}
.quote-list li::before{
  content:"“";position:absolute;left:0;top:12px;
  color:var(--accent);font-style:normal;font-size:18px;line-height:1;
}

/* ---- PORTFOLIO CATEGORIES (Work) ---- */
.portfolio-cat + .portfolio-cat{margin-top:56px;padding-top:56px;border-top:1px solid var(--line);}
.portfolio-cat-title{font-size:clamp(20px,2.6vw,28px);}
.portfolio-cat-empty{margin-top:16px;color:var(--text-dim);font-size:14px;font-style:italic;}

/* ---- VIDEO SHOWCASE (Production, YouTube) ---- */
.video-stage{
  position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-alt);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.65);
}
.video-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

.video-thumbs{
  display:flex;gap:16px;margin-top:20px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  padding-bottom:6px;scrollbar-width:thin;
}
.video-thumbs::-webkit-scrollbar{height:6px;}
.video-thumbs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
.video-thumb{
  all:unset;box-sizing:border-box;cursor:pointer;display:block;
  flex:0 0 220px;scroll-snap-align:start;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--bg-alt);transition:border-color .2s ease;
}
.video-thumb:hover{border-color:#3a3a3d;}
.video-thumb.is-active{border-color:var(--accent);}
.video-thumb-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;}
.video-thumb-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:blur(3px);transform:scale(1.06);
  transition:filter .4s ease, transform .4s ease;
}
.video-thumb.is-active .video-thumb-img img,
.video-thumb:hover .video-thumb-img img{filter:blur(0);transform:scale(1);}
.video-thumb-img::after{
  content:"▶";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--text);background:rgba(11,11,12,.25);
  opacity:.9;transition:opacity .2s ease;
}
.video-thumb.is-active .video-thumb-img::after{opacity:0;}
.video-thumb-label{display:block;padding:12px 14px 4px;font-size:13px;font-weight:500;color:var(--text-dim);}
.video-thumb.is-active .video-thumb-label{color:var(--text);}
.video-thumb .chooser-progress{margin:8px 14px 12px;}
@media(max-width:860px){ .video-thumb{flex-basis:170px;} }

/* ---- CLIENT / INSTAGRAM GRID ---- */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ig-item{display:block;}
.ig-thumb{
  position:relative;aspect-ratio:3/2;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(155deg,#1b1b1e,#0c0c0d 72%);
  display:flex;align-items:center;justify-content:center;
}
.ig-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:blur(4px);transform:scale(1.08);
  transition:transform .45s ease, filter .45s ease;
}
.ig-item:hover .ig-thumb img{filter:blur(0);transform:scale(1);}
.ig-thumb .ig-empty{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);}
.ig-item:hover .ig-thumb{border-color:#3a3a3d;}
.ig-item:hover .ig-thumb img{transform:scale(1.04);}
.ig-client{display:block;margin-top:12px;font-size:14px;color:var(--text-dim);}
.ig-item:hover .ig-client{color:var(--text);}
@media(max-width:860px){ .ig-grid{grid-template-columns:repeat(2,1fr);} }

/* ---- REEL STRIP (home) ---- */
.reel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.reel-item{
  position:relative;display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);
}
.reel-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:blur(4px);transform:scale(1.08);
  transition:transform .5s ease, filter .5s ease;
}
.reel-item:hover img{transform:scale(1);filter:blur(0);}
.reel-label{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:14px;
  background:linear-gradient(180deg, rgba(11,11,12,.1) 0%, rgba(11,11,12,.45) 100%);
  opacity:1;transition:opacity .3s ease;
  pointer-events:none;
}
.reel-label span{
  display:block;
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(13px,1.6vw,16px);line-height:1.3;
  letter-spacing:.01em;color:var(--text);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.reel-item:hover .reel-label{opacity:0;}
@media(max-width:860px){ .reel-grid{grid-template-columns:repeat(2,1fr);} }

/* ---- INTERACTIVE CHOOSER (home) ---- */
.chooser-tabs{border-top:1px solid var(--line);}
.chooser-tab{
  all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;
  padding:20px 12px;border-bottom:1px solid var(--line);
  border-radius:10px;transition:background .2s ease;
}
.chooser-tab:hover{background:rgba(255,255,255,.03);}
.chooser-tab-inner{display:flex;align-items:center;gap:18px;}
.chooser-tab-badge{
  flex:none;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--text-dim);
  border:1px solid var(--line);
  transition:border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease;
}
.chooser-tab-label{
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(17px,2.2vw,24px);letter-spacing:-.02em;
  color:var(--text-dim);transition:color .2s ease, transform .25s ease;
}
.chooser-tab:hover .chooser-tab-badge{border-color:var(--accent);color:var(--accent);}
.chooser-tab:hover .chooser-tab-label{color:var(--text);}
.chooser-tab.is-active .chooser-tab-badge{
  border-color:var(--accent);background:var(--accent);color:#0b0b0c;transform:scale(1.1);
}
.chooser-tab.is-active .chooser-tab-label{color:var(--text);transform:translateX(4px);}
.chooser-progress{display:block;height:2px;margin:12px 0 0 50px;background:var(--line);border-radius:2px;overflow:hidden;}
.chooser-progress-fill{display:block;height:100%;width:0%;background:var(--accent);}

.chooser-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:8px;}
.chooser-panel{display:none;}
.chooser-panel.is-active{display:block;animation:chooserFade .35s ease;}
.chooser-panel h3{font-size:clamp(24px,3vw,34px);}
.chooser-panel p{margin-top:14px;color:var(--text-dim);font-size:16px;line-height:1.6;max-width:440px;}
.chooser-image{
  position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);order:2;background:var(--bg-alt);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.65);
}
.chooser-image img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .3s ease, transform .4s ease;
}
@keyframes chooserFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:860px){
  .chooser-stage{grid-template-columns:1fr;gap:24px;}
  .chooser-image{order:-1;}
  .chooser-progress{margin-left:42px;}
}

/* ---- NUMBERED ROW (divisions / team) ---- */
.shot{display:grid;grid-template-columns:64px 1fr 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--line);align-items:start;}
.shot:last-child{border-bottom:1px solid var(--line);}
.shot-num{color:var(--text-dim);font-size:14px;padding-top:4px;}
.shot h3{font-size:clamp(20px,2.6vw,28px);}
.shot p{color:var(--text-dim);font-size:15px;line-height:1.6;max-width:440px;}
a.shot{transition:border-color .2s;}
a.shot:hover{border-top-color:#3a3a3d;}
a.shot:hover h3{color:var(--accent);}
.shot-arrow{grid-column:3;justify-self:end;align-self:center;color:var(--text-dim);font-size:14px;white-space:nowrap;}
a.shot:hover .shot-arrow{color:var(--accent);}

.person{display:grid;grid-template-columns:112px 1fr;gap:28px;padding:32px 0;border-top:1px solid var(--line);align-items:start;}
.person:last-child{border-bottom:1px solid var(--line);}
.person-photo{width:112px;height:112px;border-radius:50%;object-fit:cover;border:1px solid var(--line);display:block;}
.person h3{font-size:clamp(22px,3vw,30px);}
.person-role{display:block;color:var(--accent2);font-size:14px;margin:8px 0 14px;}
.person p{color:var(--text-dim);font-size:15.5px;line-height:1.7;max-width:660px;margin-bottom:12px;}

/* ---- PLAIN BULLET LIST ---- */
.list-plain{list-style:none;}
.list-plain li{position:relative;padding:16px 0 16px 26px;border-top:1px solid var(--line);font-size:15.5px;color:var(--text-dim);line-height:1.55;}
.list-plain li:last-child{border-bottom:1px solid var(--line);}
.list-plain li::before{content:"";position:absolute;left:2px;top:25px;width:7px;height:7px;border-radius:50%;background:var(--accent);}

/* ---- INFO / PRACTICE CARDS ---- */
.work-feature{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;}
.work-feature img{width:100%;border-radius:14px;border:1px solid var(--line);display:block;}
@media(max-width:860px){.work-feature{grid-template-columns:1fr;}.work-feature img{max-width:200px;}}

.info-card{border:1px solid var(--line);border-radius:14px;padding:28px;background:var(--bg-alt);}
.info-card p{color:var(--text-dim);font-size:15.5px;line-height:1.65;}
.info-card p strong{color:var(--text);font-weight:600;}
.practice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:860px){.practice-grid{grid-template-columns:1fr;}}

/* ---- TESTIMONIALS ---- */
.quote-row{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none;}
.quote-row::-webkit-scrollbar{display:none;}
.quote-card{min-width:330px;border:1px solid var(--line);border-radius:14px;padding:28px;background:var(--bg-alt);}
.quote-card p{font-size:16px;line-height:1.6;color:var(--text);margin-bottom:20px;}
.quote-who{font-size:13px;color:var(--text-dim);}
.quote-who b{color:var(--text);font-weight:500;}

/* ---- CONTACT / FOOTER ---- */
.contact h2{font-size:clamp(40px,8vw,104px);}
.contact-row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:36px;flex-wrap:wrap;gap:24px;}
.contact-email{font-size:18px;border-bottom:1px solid var(--line);padding-bottom:6px;transition:border-color .25s,color .25s;}
.contact-email:hover{border-color:var(--accent);color:var(--accent);}

/* ---- ENQUIRY FORM ---- */
.enquiry-form{max-width:640px;margin-top:44px;display:flex;flex-direction:column;gap:18px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field label{font-size:13px;color:var(--text-dim);}
.form-field input,.form-field select,.form-field textarea{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;color:var(--text);font-family:'Inter',sans-serif;font-size:15px;
  transition:border-color .2s;width:100%;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--accent2);outline:none;}
.form-field textarea{resize:vertical;min-height:110px;font-family:inherit;}
.form-field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239b9891' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;
}
.enquiry-form button{align-self:flex-start;border:none;cursor:pointer;}
.enquiry-form button:disabled{opacity:.6;cursor:default;}
.form-status{font-size:14px;min-height:1em;}
.form-status.success{color:var(--accent2);}
.form-status.error{color:var(--accent);}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}
footer{padding:34px 0;}
.foot-tagline{color:var(--text-dim);font-size:13px;margin-bottom:20px;max-width:420px;line-height:1.55;}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;color:var(--text-dim);font-size:13px;}
.foot-links{display:flex;gap:18px;}
.foot-links a:hover{color:var(--text);}

@media(max-width:860px){
  nav{display:none;}
  .nav-toggle{display:block;width:44px;height:44px;font-size:18px;}
  .work-card, .work-card:nth-child(3n+2), .work-card:nth-child(3n+3){grid-column:span 12;}
  .shot{grid-template-columns:1fr;gap:10px;}
  .shot-arrow{justify-self:start;}
  .person{grid-template-columns:1fr;gap:16px;}

  /* tighter rhythm on phones -- desktop section spacing is untouched above 860px */
  section{padding:64px 0;}
  .hero-inner{padding:120px 28px 40px;}

  /* subpage hero: video/photo stay as a backdrop behind the text (same
     composition as desktop). Desktop uses object-fit:contain for the
     video since its wide hero band suits that; a phone's hero is tall
     and narrow, so containing a 2.4:1 video there just shrinks it to a
     thin strip surrounded by empty space (worse than cropping it).
     Mobile uses cover instead, so the backdrop actually fills the area
     behind the text like a real backdrop should. */
  .page-hero{padding:100px 0 40px;}
  video.page-hero-bg{object-fit:cover;}
  .page-hero-logo{width:56px;height:56px;right:14px;bottom:14px;border-radius:10px;}
  .section-head{margin-bottom:36px;}
  .portfolio-cat + .portfolio-cat{margin-top:40px;padding-top:40px;}
  .tag-row a, .tag-row span{padding:9px 14px;}
}
@media(max-width:480px){
  header{padding:18px 20px;}
  .tc{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
}