/* ==========================================================================
   Naoto Ozawa — Cinematographer / Video Director Portfolio
   Design System & Global Styles
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Color */
  --bg:            #0a0a0b;
  --bg-soft:       #111113;
  --bg-elevated:   #17171a;
  --fg:            #f3f1ec;
  --fg-dim:        #b9b6b0;
  --fg-faint:      #7d7a75;
  --line:          rgba(243,241,236,0.12);
  --line-strong:   rgba(243,241,236,0.24);
  --accent:        #c9a86a;      /* brass / gold — sparingly */
  --accent-dim:    #8f7a4f;
  --scrim:         rgba(10,10,11,0.55);

  /* Type */
  --font-display:  'Fraunces', 'Times New Roman', serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-hero:   clamp(2.6rem, 8vw, 7.5rem);
  --fs-1:      clamp(2.1rem, 5vw, 4.4rem);
  --fs-2:      clamp(1.5rem, 3vw, 2.4rem);
  --fs-3:      clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-body:   clamp(1rem, 1vw, 1.08rem);
  --fs-small:  0.82rem;
  --fs-micro:  0.72rem;

  /* Space (8px base, fluid) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.6rem;
  --sp-4: clamp(2rem, 4vw, 3.2rem);
  --sp-5: clamp(3.5rem, 7vw, 6rem);
  --sp-6: clamp(5rem, 10vw, 9rem);
  --sp-7: clamp(7rem, 14vw, 13rem);

  --container: 1440px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-1: .5s;
  --dur-2: .9s;

  --radius: 2px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  background:var(--bg);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure{ margin:0; }
::selection{ background:var(--accent); color:#0a0a0b; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Layout helpers ---------- */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{
  padding-block:var(--sp-7);
  position:relative;
}
.section--tight{ padding-block:var(--sp-6); }
.eyebrow{
  display:flex;
  align-items:center;
  gap:.9em;
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.eyebrow::before{
  content:'';
  width:2.4em;
  height:1px;
  background:var(--accent);
  display:inline-block;
}
.h-display{
  font-family:var(--font-display);
  font-weight:400;
  font-style:italic;
  line-height:1.05;
  letter-spacing:-0.01em;
}
.h-display b, .h-display strong{
  font-weight:500;
  font-style:normal;
  color:var(--accent);
}
.text-dim{ color:var(--fg-dim); }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- Film grain overlay (site-wide, cinematic texture) ---------- */
.grain{
  position:fixed; inset:0;
  z-index:999;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:2000;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
  /* Safety net: force-hide after 4s even if JS never runs (e.g. blocked script) */
  animation:forceHideLoader 0s linear 4s forwards;
}
.loader span{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.4rem,3vw,2rem);
  color:var(--fg-dim);
  letter-spacing:.02em;
  opacity:0;
  animation:fadeUp 1.1s var(--ease) forwards .15s;
}
.loader.is-hidden{ opacity:0; visibility:hidden; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@keyframes forceHideLoader{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* ---------- Custom cursor (desktop only) ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:1500;
  width:14px; height:14px; border-radius:50%;
  background:var(--fg);
  transform:translate(-50%,-50%);
  pointer-events:none;
  mix-blend-mode:difference;
  transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease);
  display:none;
}
@media (pointer:fine){ .cursor{ display:block; } }
.cursor.is-active{ width:64px; height:64px; }
.cursor__label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:#0a0a0b;
  opacity:0; transition:opacity .25s var(--ease);
}
.cursor.is-active .cursor__label{ opacity:1; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:800;
  padding:var(--sp-3) 0;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(10,10,11,0.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-color:var(--line);
  padding:var(--sp-2) 0;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
}
.logo{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.3rem;
  letter-spacing:.01em;
  white-space:nowrap;
}
.logo em{ color:var(--accent); font-style:normal; }
.nav-desktop{
  display:none;
  align-items:center;
  gap:var(--sp-5);
}
.nav-desktop ul{ display:flex; gap:var(--sp-4); }
.nav-link{
  position:relative;
  font-size:var(--fs-small);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg-dim);
  padding-block:.3em;
  transition:color .3s var(--ease);
}
.nav-link::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--fg);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-link:hover, .nav-link.is-active{ color:var(--fg); }
.nav-link:hover::after, .nav-link.is-active::after{ transform:scaleX(1); transform-origin:left; }

.nav-right{ display:flex; align-items:center; gap:var(--sp-3); }
.lang-toggle{ display:flex; gap:.5em; font-size:var(--fs-small); letter-spacing:.06em; }
.lang-toggle a{ color:var(--fg-faint); transition:color .3s var(--ease); }
.lang-toggle a.is-active{ color:var(--fg); border-bottom:1px solid var(--accent); }
.lang-toggle a:hover{ color:var(--fg); }

.menu-btn{
  display:flex; flex-direction:column; gap:5px; z-index:1600; position:relative;
  padding:.4em;
}
.menu-btn span{ width:22px; height:1px; background:var(--fg); transition:transform .35s var(--ease), opacity .35s var(--ease); }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (min-width: 900px){
  .nav-desktop{ display:flex; }
  .menu-btn{ display:none; }
}

/* Full-screen mobile / overlay nav */
.nav-overlay{
  position:fixed; inset:0; z-index:1550;
  background:var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--sp-5) var(--gutter);
  transform:translateY(-100%);
  transition:transform .6s var(--ease);
}
.nav-overlay.is-open{ transform:translateY(0); }
.nav-overlay ul{ display:flex; flex-direction:column; gap:var(--sp-2); }
.nav-overlay .nav-overlay-link{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(2.2rem,9vw,4rem);
  color:var(--fg-dim);
  display:inline-flex; align-items:baseline; gap:.4em;
  transition:color .3s var(--ease);
}
.nav-overlay .nav-overlay-link small{ font-family:var(--font-body); font-style:normal; font-size:.32em; color:var(--fg-faint); }
.nav-overlay .nav-overlay-link:hover{ color:var(--fg); }
.nav-overlay-foot{
  margin-top:var(--sp-5);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3);
  color:var(--fg-faint); font-size:var(--fs-small); letter-spacing:.04em;
}
.nav-overlay-foot a{ color:var(--fg-dim); }
.nav-overlay-foot a:hover{ color:var(--fg); }
body.nav-is-open{ overflow:hidden; }

/* ---------- Buttons / links ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.8em;
  font-size:var(--fs-small); letter-spacing:.08em; text-transform:uppercase;
  padding:1em 1.8em;
  border:1px solid var(--line-strong);
  border-radius:999px;
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.btn:hover{ border-color:var(--fg); }
.btn--solid{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.btn--solid:hover{ background:var(--accent); border-color:var(--accent); color:#161206; }
.btn__arrow{ transition:transform .35s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

.text-link{
  position:relative; display:inline-block;
  background-image:linear-gradient(var(--fg),var(--fg));
  background-position:0 100%; background-repeat:no-repeat; background-size:0% 1px;
  transition:background-size .45s var(--ease);
  padding-bottom:.15em;
}
.text-link:hover{ background-size:100% 1px; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  background:var(--bg);
}
.hero__media{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(201,168,106,.16), transparent 60%),
    radial-gradient(120% 100% at 85% 100%, rgba(70,80,95,.28), transparent 55%),
    linear-gradient(160deg, #050506 0%, #101013 45%, #0a0a0b 100%);
}
.hero__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s var(--ease);
}
.hero__media video.is-ready{ opacity:.55; }
.hero__media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, var(--bg) 0%, rgba(10,10,11,0.15) 42%, rgba(10,10,11,.5) 100%);
}
.hero__lines{
  position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(243,241,236,.05) 0 1px, transparent 1px 8.333%);
}
.hero__content{
  position:relative; z-index:2;
  padding:var(--sp-6) var(--gutter) var(--sp-5);
}
.hero__eyebrow{ margin-bottom:var(--sp-3); }
.hero__title{
  font-size:var(--fs-hero);
  max-width:18ch;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line span{ display:inline-block; }
/* Line-reveal animation only runs once JS confirms it can finish the job */
html.has-js .hero__title .line span{ transform:translateY(110%); }
.hero__sub{
  margin-top:var(--sp-4);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:var(--sp-3);
  border-top:1px solid var(--line);
  padding-top:var(--sp-3);
}
.hero__sub p{ max-width:42ch; color:var(--fg-dim); font-size:var(--fs-3); }
.hero__scroll{
  display:flex; align-items:center; gap:.7em;
  font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint);
}
.hero__scroll-line{ width:1px; height:44px; background:var(--line-strong); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--accent);
  animation:scrollLine 2.4s var(--ease-soft) infinite;
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------- Marquee ---------- */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:var(--sp-3) 0;
  white-space:nowrap;
}
.marquee__track{
  display:inline-flex; gap:2.5rem;
  animation:marquee 32s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.3rem,2.6vw,2rem);
  color:var(--fg-dim);
  display:inline-flex; align-items:center; gap:2.5rem;
}
.marquee span::after{ content:'—'; color:var(--accent); font-family:var(--font-body); font-style:normal; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Section heads ---------- */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
.section-head h2{ font-size:var(--fs-1); max-width:16ch; }
.section-head .section-desc{ max-width:34ch; color:var(--fg-dim); }
.index-num{ font-family:var(--font-display); font-style:italic; color:var(--fg-faint); font-size:var(--fs-3); }

/* ---------- Work grid & cards ---------- */
.work-grid{
  display:grid; grid-template-columns:1fr;
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
}
.work-card{
  position:relative;
  background:var(--bg);
  padding:var(--sp-4) var(--gutter);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-3);
  overflow:hidden;
}
.work-card__thumb{
  position:absolute; inset:0; z-index:0;
  opacity:0; transform:scale(1.08);
  transition:opacity .6s var(--ease), transform .8s var(--ease);
  background-size:cover; background-position:center;
}
.work-card:hover .work-card__thumb{ opacity:1; transform:scale(1); }
.work-card:hover .work-card__thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,10,11,.86),rgba(10,10,11,.5)); }
.work-card__num{ font-family:var(--font-display); font-style:italic; color:var(--fg-faint); font-size:var(--fs-3); position:relative; z-index:1; transition:color .4s var(--ease); }
.work-card__title-wrap{ position:relative; z-index:1; min-width:0; }
.work-card__title{ font-family:var(--font-display); font-style:italic; font-size:var(--fs-2); transition:color .4s var(--ease); }
.work-card__meta{ margin-top:.4em; display:flex; gap:1.2em; flex-wrap:wrap; font-size:var(--fs-small); color:var(--fg-faint); letter-spacing:.04em; text-transform:uppercase; }
.work-card__cat{ position:relative; z-index:1; font-size:var(--fs-small); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-dim); text-align:right; white-space:nowrap; }
.work-card__arrow{ position:relative; z-index:1; opacity:0; transform:translateX(-8px); transition:opacity .4s var(--ease), transform .4s var(--ease); margin-left:var(--sp-2); }
.work-card:hover .work-card__arrow{ opacity:1; transform:translateX(0); }

@media (min-width:700px){
  .work-card{ padding-block:var(--sp-3); }
}

/* Featured grid (Home) — visual tiles */
.feature-grid{
  display:grid; grid-template-columns:1fr; gap:var(--sp-2);
}
@media (min-width:800px){
  .feature-grid{ grid-template-columns:repeat(6,1fr); }
  .feature-grid .feature-tile:nth-child(1){ grid-column:span 4; }
  .feature-grid .feature-tile:nth-child(2){ grid-column:span 2; }
  .feature-grid .feature-tile:nth-child(3){ grid-column:span 2; }
  .feature-grid .feature-tile:nth-child(4){ grid-column:span 4; }
}
.feature-tile{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--line);
}
@media (min-width:800px){ .feature-tile{ aspect-ratio:16/10; } }
.feature-tile__img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.02);
  transition:transform 1s var(--ease);
}
.feature-tile:hover .feature-tile__img{ transform:scale(1.08); }
.feature-tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,0.05) 55%);
}
.feature-tile__content{
  position:absolute; left:0; right:0; bottom:0; padding:var(--sp-3);
  z-index:1;
}
.feature-tile__cat{ font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.feature-tile__title{ font-family:var(--font-display); font-style:italic; font-size:var(--fs-2); margin-top:.3em; }
.feature-tile__play{
  position:absolute; top:var(--sp-3); right:var(--sp-3); z-index:1;
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(243,241,236,.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.8);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  backdrop-filter:blur(6px);
}
.feature-tile:hover .feature-tile__play{ opacity:1; transform:scale(1); }

/* ---------- Reveal-on-scroll ----------
   Progressive enhancement: content is fully visible by default so it never
   breaks for no-JS browsers, crawlers, or if main.js fails to load. The
   'has-js' class (set by an inline script in <head>) is what opts an
   element into the hidden-until-scrolled-into-view animation. */
.reveal{ transition:opacity 1s var(--ease), transform 1s var(--ease); }
html.has-js .reveal{ opacity:0; transform:translateY(28px); }
html.has-js .reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-line .line{ overflow:hidden; }
.reveal-line .line span{ display:block; transition:transform .9s var(--ease); }
html.has-js .reveal-line .line span{ transform:translateY(100%); }
html.has-js .reveal-line.is-visible .line span{ transform:translateY(0); }

/* stagger children */
[data-stagger] > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-5); }
@media (min-width:900px){ .about-grid{ grid-template-columns: .8fr 1.2fr; gap:var(--sp-6); align-items:start; } }
.about-portrait{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(155deg,#1b1b1e,#0a0a0b 70%);
  border:1px solid var(--line);
}
.about-portrait::before{
  content:'';
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(135deg, rgba(201,168,106,.06) 0 2px, transparent 2px 22px);
}
.about-portrait__caption{
  position:absolute; left:var(--sp-3); bottom:var(--sp-3);
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim);
}
.stat-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); margin-top:var(--sp-5); }
@media (min-width:600px){ .stat-row{ grid-template-columns:repeat(4,1fr); } }
.stat{ border-top:1px solid var(--line); padding-top:var(--sp-2); }
.stat__num{ font-family:var(--font-display); font-style:italic; font-size:var(--fs-1); color:var(--accent); }
.stat__label{ font-size:var(--fs-small); color:var(--fg-dim); letter-spacing:.04em; margin-top:.3em; }

.skill-list{ margin-top:var(--sp-4); }
.skill-row{
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) 0; border-top:1px solid var(--line);
  font-size:var(--fs-3);
}
.skill-row:last-child{ border-bottom:1px solid var(--line); }
.skill-row span:last-child{ color:var(--fg-faint); font-size:var(--fs-small); letter-spacing:.06em; }

/* ---------- Services ---------- */
.service-list{ border-top:1px solid var(--line); }
.service-item{
  border-bottom:1px solid var(--line);
  padding:var(--sp-4) 0;
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3) var(--sp-4);
  align-items:start;
}
.service-item__num{ font-family:var(--font-display); font-style:italic; color:var(--fg-faint); font-size:var(--fs-2); }
.service-item__title{ font-family:var(--font-display); font-style:italic; font-size:var(--fs-1); }
.service-item__desc{ margin-top:var(--sp-2); color:var(--fg-dim); max-width:60ch; }
.service-item__tags{ margin-top:var(--sp-2); display:flex; gap:.6em; flex-wrap:wrap; }
.tag{
  font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line-strong); border-radius:999px; padding:.4em .9em; color:var(--fg-dim);
}

.process-steps{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); margin-top:var(--sp-6); }
@media (min-width:800px){ .process-steps{ grid-template-columns:repeat(4,1fr); } }
.process-step__num{ font-family:var(--font-display); font-style:italic; font-size:var(--fs-1); color:var(--accent); }
.process-step__title{ margin-top:var(--sp-2); font-size:var(--fs-3); letter-spacing:.02em; }
.process-step__desc{ margin-top:.6em; color:var(--fg-dim); font-size:var(--fs-small); line-height:1.8; }

/* ---------- Contact ---------- */
.contact-hero{ text-align:left; }
.contact-email{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.8rem,6vw,3.6rem);
  display:inline-block; margin-top:var(--sp-3);
  word-break:break-word;
}
.form{ margin-top:var(--sp-6); display:grid; gap:var(--sp-4); max-width:760px; }
.field{ position:relative; border-bottom:1px solid var(--line-strong); padding-bottom:.6em; }
.field label{
  display:block; font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint);
  margin-bottom:.6em;
}
.field input, .field textarea, .field select{
  width:100%; background:transparent; border:0; outline:0;
  color:var(--fg); font-family:var(--font-body); font-size:var(--fs-3);
  padding:.3em 0;
}
.field select{ appearance:none; }
.field select option{ background:var(--bg-elevated); color:var(--fg); }
.field textarea{ resize:vertical; min-height:6em; }
.field input::placeholder, .field textarea::placeholder{ color:var(--fg-faint); }
.form-row{ display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
@media (min-width:640px){ .form-row--2{ grid-template-columns:1fr 1fr; } }
.form-note{ font-size:var(--fs-small); color:var(--fg-faint); margin-top:-.6rem; }
.form-status{ font-size:var(--fs-small); letter-spacing:.02em; min-height:1.4em; }
.form-status.is-error{ color:#d98c6b; }
.form-status.is-success{ color:var(--accent); }

.contact-info{ margin-top:var(--sp-6); display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
@media (min-width:700px){ .contact-info{ grid-template-columns:repeat(3,1fr); } }
.contact-info__item{ border-top:1px solid var(--line); padding-top:var(--sp-2); }
.contact-info__label{ font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); }
.contact-info__value{ margin-top:.5em; font-size:var(--fs-3); }
.contact-info__value a:hover{ color:var(--accent); }

/* ---------- Work detail page ---------- */
.work-hero{ min-height:70svh; display:flex; align-items:flex-end; position:relative; overflow:hidden; }
.work-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.work-hero__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, var(--bg) 5%, rgba(10,10,11,.25) 60%); }
.work-hero__content{ position:relative; z-index:1; padding:var(--sp-6) var(--gutter) var(--sp-5); width:100%; }
.work-hero__title{ font-size:var(--fs-hero); max-width:22ch; }
.work-meta-bar{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:var(--sp-4); margin-top:var(--sp-4);
}
@media (min-width:700px){ .work-meta-bar{ grid-template-columns:repeat(4,1fr); } }
.work-meta-bar dt{ font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); }
.work-meta-bar dd{ margin:.5em 0 0; font-size:var(--fs-3); }

.work-video-frame{
  aspect-ratio:16/9; width:100%;
  background:var(--bg-soft); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.work-video-frame video{ width:100%; height:100%; object-fit:cover; }
.work-video-frame__placeholder{ text-align:center; color:var(--fg-faint); font-size:var(--fs-small); letter-spacing:.08em; text-transform:uppercase; padding:var(--sp-3); }

.still-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-2); }
@media (min-width:700px){ .still-grid{ grid-template-columns:repeat(2,1fr); } }
.still{ aspect-ratio:4/3; background:linear-gradient(150deg,#1a1a1d,#0b0b0c); border:1px solid var(--line); }

.work-nav{ display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:var(--sp-4); margin-top:var(--sp-6); gap:var(--sp-3); flex-wrap:wrap; }
.work-nav a{ font-family:var(--font-display); font-style:italic; font-size:var(--fs-2); color:var(--fg-dim); }
.work-nav a:hover{ color:var(--fg); }
.work-nav .dir{ display:block; font-family:var(--font-body); font-style:normal; font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:.4em; }

/* ---------- Filter tabs (Works page) ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.6em; margin-bottom:var(--sp-5); }
.filter-btn{
  font-size:var(--fs-small); letter-spacing:.06em; text-transform:uppercase;
  padding:.7em 1.3em; border:1px solid var(--line-strong); border-radius:999px; color:var(--fg-dim);
  transition:all .3s var(--ease);
}
.filter-btn:hover{ color:var(--fg); border-color:var(--fg); }
.filter-btn.is-active{ background:var(--fg); color:var(--bg); border-color:var(--fg); }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:var(--sp-6) var(--sp-4);
}
.footer-cta{ text-align:center; padding-bottom:var(--sp-6); border-bottom:1px solid var(--line); margin-bottom:var(--sp-5); }
.footer-cta h2{ font-size:clamp(2.2rem,7vw,5rem); }
.footer-cta .btn{ margin-top:var(--sp-4); }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:700px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.footer-col h4{ font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:var(--sp-2); }
.footer-col ul{ display:grid; gap:.7em; }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{
  margin-top:var(--sp-6);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2);
  color:var(--fg-faint); font-size:var(--fs-small);
}

/* ---------- 404 ---------- */
.page-404{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--sp-6) var(--gutter); }
.page-404__num{ font-family:var(--font-display); font-style:italic; font-size:clamp(6rem,20vw,14rem); color:var(--fg-faint); line-height:1; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0 !important; }
.center{ text-align:center; }
.max-w{ max-width:60ch; }