/*
Theme Name: Zwerg
Theme URI: https://example.com/zwerg
Author: Your Studio
Author URI: https://example.com
Description: Custom-built theme for Zwerg — a film & branding studio. Grunge dark hero, forge/ore visual language, clickable team bios, clickable service pages, and an editable client-logo carousel. Original build, not based on any commercial template.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: zwerg
*/

/* =========================================================
   0. TOKENS
   ========================================================= */
:root{
  --bg:          #0B0B0A;
  --bg-raised:   #17160F;
  --bg-olive:    #211F16;
  --bg-light:    #F2EFE7;
  --bg-light-2:  #E9E5D9;

  --fg:          #F4F1E9;
  --fg-dim:      #ABA79A;
  --fg-faint:    #605D52;

  --ink:         #15140F;
  --ink-dim:     #5B5849;

  --accent:      #E23B2E;
  --accent-dim:  #B32E23;

  --line:        rgba(244,241,233,0.16);
  --line-soft:   rgba(244,241,233,0.08);
  --line-ink:    rgba(21,20,15,0.14);
  --line-ink-soft: rgba(21,20,15,0.07);

  --font-display: 'Archivo', 'Arial Black', sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-italic:  'Instrument Serif', Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --container: 1360px;
  --gutter: clamp(20px, 4vw, 64px);

  --ease: cubic-bezier(.16,.84,.44,1);
}

/* =========================================================
   1. RESET
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body{
  margin:0;
  background: var(--bg-light);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; background:none; border:none; color:inherit; }
input, textarea{ font-family: inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }
::selection{ background: var(--accent); color: var(--fg); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* =========================================================
   2. LAYOUT HELPERS
   ========================================================= */
.wrap{ max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section{ padding-block: clamp(56px, 9vw, 130px); }
.on-dark{ background: var(--bg); color: var(--fg); }
.on-olive{ background: var(--bg-olive); color: var(--fg); border-bottom: 1px solid var(--line); }
.on-light{ background: var(--bg-light); color: var(--ink); }
.on-light-2{ background: var(--bg-light-2); color: var(--ink); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:6px; height:6px; background: var(--accent); display:inline-block; }

.reveal{ opacity:0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* bracket corner decoration, reused across sections */
.bracket{ position:relative; }
.bracket::before, .bracket::after{
  content:""; position:absolute; width:26px; height:26px;
  border: 2px solid var(--accent);
}
.bracket::before{ top:-14px; left:-14px; border-right:none; border-bottom:none; }
.bracket::after{ bottom:-14px; right:-14px; border-left:none; border-top:none; }

/* =========================================================
   3. HEADER
   ========================================================= */
.site-header{
  position: fixed; top:0; left:0; right:0;
  z-index: 100;
  padding: 22px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
  mix-blend-mode: normal;
}
.site-logo-mark{
  display:flex;
  width:34px; height:34px; background: var(--accent);
  align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:900; color: var(--fg); font-size:16px;
  border-radius:2px;
}
.site-logo-mark img{ width:100%; height:100%; object-fit:contain; padding:4px; }
.site-header.is-scrolled{
  background: rgba(11,11,10,0.82);
  backdrop-filter: blur(10px);
  padding-block: 14px;
  border-color: var(--line);
}
.site-branding a{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.site-branding a span{ color: var(--accent); }

.nav-toggle{
  display:flex; flex-direction:column; gap:5px; padding:10px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.nav-toggle span{ display:block; width:22px; height:2px; background: var(--fg); }

.primary-nav{
  position: fixed; inset:0;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform: translateY(-10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  z-index: 150;
}
.primary-nav.is-open{ opacity:1; pointer-events:auto; transform:none; }
.primary-nav ul{ display:flex; flex-direction:column; gap: 22px; text-align:center; }
.primary-nav a{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 6vw, 54px);
  color: var(--fg-dim);
  transition: color .25s var(--ease);
}
.primary-nav a:hover{ color: var(--accent); }
.nav-close{
  position:absolute; top:24px; right:var(--gutter);
  font-family: var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em;
  color: var(--fg-dim); border:1px solid var(--line); padding:10px 16px; border-radius:2px;
}

/* =========================================================
   4B. DEMO REEL
   ========================================================= */
.demo-reel{
  position: relative;
  height: 78vh; min-height: 420px;
  background: #000 center/cover no-repeat;
  display:flex; align-items:flex-end;
  cursor:pointer;
  overflow:hidden;
}
.demo-reel::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.75) 100%);
}
.demo-reel-word{
  position:relative; z-index:2;
  font-family: var(--font-display); font-weight:900;
  font-size: clamp(40px, 8vw, 110px);
  letter-spacing:-0.02em; color: var(--fg);
  padding: 0 var(--gutter) 40px;
  line-height:1;
}
.demo-reel-play{
  position:absolute; z-index:2; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 84px; height:84px; border-radius:50%;
  border: 1px solid rgba(244,241,233,0.5);
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.demo-reel:hover .demo-reel-play{ background: var(--accent); border-color: var(--accent); transform: translate(-50%,-50%) scale(1.08); }
.demo-reel-play .tri{
  width:0; height:0; margin-left:5px;
  border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  border-left: 20px solid var(--fg);
}
@media (max-width: 780px){ .demo-reel{ height:60vh; } }

/* =========================================================
   5. HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 150px var(--gutter) 100px;
  isolation: isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 42% 38% at 8% 6%, rgba(244,241,233,0.10), transparent 70%),
    radial-gradient(ellipse 55% 45% at 15% 12%, rgba(226,59,46,0.12), transparent 60%);
  pointer-events:none; z-index:-1;
}
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:8px;
  background: #000;
}
.hero-kicker{
  font-family: var(--font-mono); font-size: 13px; color: var(--fg-dim);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 22px;
  position:relative; z-index:1;
}
.hero-title{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(38px, 6.4vw, 78px);
  line-height: 1.05; letter-spacing: -0.01em; color: var(--fg);
  max-width: 16ch;
  position:relative; z-index:1;
}
.hero-title b, .hero-title strong{ font-weight: 900; }
.hero-title .accent{ color: var(--accent); font-weight:900; }
.hero-desc{
  font-family: var(--font-italic); font-style: italic; font-size: 19px;
  color: var(--fg-dim); max-width: 44ch; margin-top: 26px;
  position:relative; z-index:1;
}
.hero-foot{ margin-top: 54px; display:flex; align-items:center; gap: 26px; flex-wrap:wrap; position:relative; z-index:1; }

.hero-graphic{
  position:absolute; right: clamp(20px, 6vw, 90px); top:50%; transform: translateY(-50%);
  max-height: 72%; width:auto; max-width: 38%;
  object-fit:contain; opacity:0.94; pointer-events:none;
  z-index: 0;
}
@media (max-width: 900px){ .hero-graphic{ display:none; } }

.play-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding: 14px 10px;
  font-family: var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent);
}
.play-btn .bracket-l, .play-btn .bracket-r{
  width:16px; height:26px; border: 2px solid var(--accent);
}
.play-btn .bracket-l{ border-right:none; }
.play-btn .bracket-r{ border-left:none; }
.play-btn:hover{ color: var(--fg); }
.play-btn:hover .bracket-l, .play-btn:hover .bracket-r{ border-color: var(--fg); }

.scroll-cue{
  position:absolute; right: var(--gutter); bottom: 90px;
  color: var(--fg-dim);
}
.scroll-cue svg{ animation: bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(8px);} }

/* =========================================================
   6. VIDEO MODAL
   ========================================================= */
.video-modal{
  position: fixed; inset:0; z-index: 300;
  background: rgba(11,11,10,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity .3s var(--ease);
  padding: var(--gutter);
}
.video-modal.is-open{ opacity:1; pointer-events:auto; }
.video-modal .frame{
  width: min(1100px, 100%); aspect-ratio: 16/9;
  background: #000;
}
.video-modal .frame iframe{ width:100%; height:100%; border:0; }
.video-modal .close{
  position:absolute; top:24px; right:var(--gutter);
  font-family: var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em;
  color: var(--fg-dim); border:1px solid var(--line); padding:10px 16px; border-radius:2px;
}
.video-modal .close:hover{ color: var(--fg); }

/* =========================================================
   7. STORY SECTION
   ========================================================= */
.story-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:start; position:relative; }
.story-grid::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background: var(--line-ink); transform: translateX(-35px);
}
@media (max-width: 860px){ .story-grid::before{ display:none; } }
.story-title{ font-family: var(--font-display); font-weight: 800; font-size: clamp(32px,4.6vw,54px); letter-spacing:-0.01em; margin-bottom: 30px; }
.story-title .accent{ color: var(--accent); }
.story-copy p{ color: var(--ink-dim); margin-bottom: 1.3em; font-size: 15.5px; }
.story-copy strong{ color: var(--ink); }
.story-photo{ overflow:hidden; }
.story-photo img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 860px){ .story-grid{ grid-template-columns:1fr; gap:36px; } }

/* =========================================================
   8. SERVICES BAND
   ========================================================= */
.services-head{ display:flex; align-items:center; gap: 22px; flex-wrap:wrap; }
.services-head .chip{ width: 60px; height:34px; border-radius: 100px; overflow:hidden; flex-shrink:0; }
.services-head .chip img{ width:100%; height:100%; object-fit:cover; }
.services-title{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 6vw, 66px); line-height: 1.02; letter-spacing:-0.01em; color: var(--fg);
}
.services-title b{ font-weight: 900; }
.services-rule{ height: 3px; background: var(--accent); margin-block: 44px; width: 100%; max-width: 560px; }
.services-grid{ display:grid; grid-template-columns: repeat(4, 1fr); border-top:1px solid var(--line); }
.service-col{
  padding: 30px 24px; border-left: 1px solid var(--line); min-height: 220px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition: background .3s var(--ease);
}
.service-col:first-child{ border-left:none; }
.service-col:hover{ background: var(--line-soft); }
.service-col .num{ font-family: var(--font-mono); font-size:12px; color: var(--accent); }
.service-col h3{
  font-family: var(--font-display); font-weight:700; font-size: 18px; color: var(--fg);
  margin-top: 20px; line-height:1.3;
}
.service-col .go{
  font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--fg-dim); display:flex; align-items:center; gap:8px; margin-top:20px;
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.service-col:hover .go{ color: var(--accent); gap:12px; }
@media (max-width: 860px){
  .services-grid{ grid-template-columns: 1fr 1fr; }
  .service-col:nth-child(3){ border-left:none; }
}
@media (max-width: 560px){
  .services-grid{ grid-template-columns: 1fr; }
  .service-col{ border-left:none !important; border-top:1px solid var(--line); }
}

/* =========================================================
   9. TEAM
   ========================================================= */
.team-grid-wrap{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items:center; }
.team-photos{ position:relative; padding: 20px; }
.team-photos .p1{ width: 78%; aspect-ratio: 3/4; overflow:hidden; }
.team-photos .p2{ width: 62%; aspect-ratio: 3/4; overflow:hidden; margin-left: 30%; margin-top: -18%; position:relative; z-index:2; }
.team-photos img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1); }
.team-intro-copy p{ color: var(--ink-dim); margin-bottom: 1.2em; font-size: 15.5px; }
.team-intro-copy strong{ color: var(--ink); }

.team-grid{
  margin-top: 70px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--line-ink);
  border: 1px solid var(--line-ink);
}
.team-card{
  background: var(--bg-light); padding: 26px; position:relative; overflow:hidden;
  transition: background .3s var(--ease);
}
.team-card:hover{ background: var(--bg-light-2); }
.team-card .photo{ aspect-ratio: 3/4; overflow:hidden; margin-bottom: 18px; position:relative; }
.team-card .photo img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1); transition: filter .4s var(--ease), transform .5s var(--ease); }
.team-card:hover .photo img{ filter: grayscale(0); transform: scale(1.04); }
.team-card .view-bio{
  position:absolute; inset:auto 12px 12px 12px;
  font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  background: var(--accent); color: var(--fg); padding: 8px 12px; border-radius: 100px;
  opacity:0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.team-card:hover .view-bio{ opacity:1; transform:none; }
.team-card h3{ font-family: var(--font-display); font-weight:700; font-size:17px; }
.team-card .role{ font-family: var(--font-mono); font-size:11px; color: var(--accent); text-transform:uppercase; margin-top:4px; }
@media (max-width: 860px){ .team-grid-wrap{ grid-template-columns: 1fr; gap:40px; } .team-grid{ grid-template-columns: repeat(2,1fr); } }

/* =========================================================
   10. TESTIMONIALS + CLIENT CAROUSEL
   ========================================================= */
.testimonial-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
  padding-bottom: 30px; border-bottom: 1px solid var(--line-ink);
}
.testimonial-head p{ font-family: var(--font-italic); font-style:italic; font-size:17px; color: var(--ink-dim); text-align:right; }
.testimonial-big{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(38px, 7vw, 84px); letter-spacing:-0.01em; text-transform:uppercase;
}

.clients-carousel{ overflow:hidden; margin-top: 60px; }
.clients-track{ display:flex; align-items:center; width:max-content; animation: clientscroll 30s linear infinite; }
.clients-track:hover{ animation-play-state: paused; }
.client-logo{
  height: 46px; display:flex; align-items:center; padding-inline: 50px; flex-shrink:0;
  filter: grayscale(1); opacity: .7; transition: opacity .3s var(--ease), filter .3s var(--ease);
}
.client-logo:hover{ filter:none; opacity:1; }
.client-logo img{ height:100%; width:auto; object-fit:contain; }
@keyframes clientscroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* =========================================================
   11. BLOG / SUBSCRIBE
   ========================================================= */
.blog-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 44px; flex-wrap:wrap; gap:16px; }
.blog-head h2{ font-family: var(--font-display); font-weight:700; font-size: clamp(26px,3.4vw,38px); }
.blog-head h2 b{ font-weight:900; color: var(--accent); }
.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.blog-card .thumb{ aspect-ratio: 4/3; overflow:hidden; margin-bottom: 20px; }
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.blog-card:hover .thumb img{ transform: scale(1.04); }
.blog-card .meta{ font-family: var(--font-mono); font-size:11px; color: var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.blog-card h3{ font-family: var(--font-display); font-weight:700; font-size:20px; margin-block: 10px 8px; line-height:1.3; }
.blog-card p{ color: var(--ink-dim); font-size:14px; }
@media (max-width: 860px){ .blog-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   12. CTA BANNER
   ========================================================= */
.cta-banner{ text-align:center; padding-block: clamp(80px,12vw,150px); }
.cta-banner h2{ font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 6.4vw, 80px); line-height: .98; letter-spacing: -0.02em; color: var(--fg); }
.cta-banner h2 .accent{ color: var(--accent); }
.btn{
  display:inline-flex; align-items:center; gap: 12px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing:.08em; text-transform:uppercase;
  background: var(--accent); color: var(--fg);
  padding: 16px 30px; border-radius: 2px;
  margin-top: 40px; transition: transform .3s var(--ease), background .3s var(--ease);
}
.btn:hover{ background: var(--fg); color: var(--bg); transform: translateY(-3px); }
.btn-outline{ background:transparent; border:1px solid var(--line); color:var(--fg); }
.btn-outline:hover{ background: var(--fg); color: var(--bg); }

/* =========================================================
   13. FOOTER
   ========================================================= */
.site-footer{ background: var(--bg); color: var(--fg); border-top: 1px solid var(--line); padding-block: 70px 30px; }
.site-footer .wrap{ padding-left: calc(var(--gutter)); }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-end; gap: 40px; flex-wrap:wrap; margin-bottom: 60px; }
.footer-title{ font-family: var(--font-display); font-weight: 900; font-size: clamp(30px,5vw,60px); letter-spacing:-0.02em; }
.footer-title span{ color: var(--accent); }
.footer-cols{ display:flex; gap: 60px; flex-wrap:wrap; }
.footer-col h4{ font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color: var(--fg-faint); margin-bottom: 14px; }
.footer-col li{ margin-bottom: 8px; }
.footer-col a{ color: var(--fg-dim); font-size: 14px; transition: color .25s; }
.footer-col a:hover{ color: var(--accent); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top: 26px; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-faint); flex-wrap:wrap; gap:12px; }

.newsletter-form{ display:flex; border-bottom: 1px solid var(--line); max-width:260px; }
.newsletter-form input{
  flex:1; background:transparent; border:none; color: var(--fg);
  font-family: var(--font-body); font-size:14px; padding-block:8px;
}
.newsletter-form input::placeholder{ color: var(--fg-faint); }
.newsletter-form input:focus{ outline:none; }
.newsletter-form button{ color: var(--accent); padding:4px; display:flex; align-items:center; transition: transform .25s var(--ease); }
.newsletter-form button:hover{ transform: translateX(4px); }
.newsletter-note{ font-size:13px; color: var(--accent); margin-bottom:12px; }
.newsletter-note.error{ color:#ff6b6b; }

/* =========================================================
   14. GENERIC PAGE / SINGLE
   ========================================================= */
.page-header{ padding: 160px var(--gutter) 60px; border-bottom: 1px solid var(--line-ink); }
.page-header.on-dark{ border-bottom-color: var(--line); }
.page-header h1{ font-family: var(--font-display); font-weight:800; font-size: clamp(34px,6vw,70px); letter-spacing:-0.02em; }
.content-area{ padding-block: 70px; max-width: 780px; }
.content-area h2{ font-family: var(--font-display); font-size: 26px; margin-block: 1.4em .5em; }
.content-area p{ color: var(--ink-dim); margin-bottom: 1.2em; }
.content-area a{ color: var(--accent); text-decoration:underline; }

.post-list{ display:flex; flex-direction:column; }
.post-row{ padding-block: 26px; border-top:1px solid var(--line-ink-soft); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.post-row h2{ font-family: var(--font-display); font-size: 22px; font-weight:700; }
.post-row .meta{ font-family: var(--font-mono); font-size:12px; color: var(--fg-faint); text-transform:uppercase; }

/* =========================================================
   15. TEAM SINGLE / BIO PAGE
   ========================================================= */
.bio-hero{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; padding: 150px var(--gutter) 70px; align-items:end; }
.bio-photo{ aspect-ratio: 3/4; overflow:hidden; }
.bio-photo img{ width:100%; height:100%; object-fit:cover; }
.bio-name{ font-family: var(--font-display); font-weight:900; font-size: clamp(34px,5.6vw,64px); letter-spacing:-0.02em; }
.bio-role{ font-family: var(--font-mono); font-size:13px; color: var(--accent); text-transform:uppercase; letter-spacing:.08em; margin-top:14px; }
.bio-links{ display:flex; gap: 16px; margin-top: 26px; flex-wrap:wrap; }
.bio-links a{ font-family: var(--font-mono); font-size:12px; text-transform:uppercase; border:1px solid var(--line-ink); padding:9px 16px; border-radius:100px; }
.bio-links a:hover{ background: var(--ink); color: var(--bg-light); }
.bio-body{ max-width: 720px; padding: 0 var(--gutter) 90px; margin-inline:auto; color: var(--ink-dim); }
.bio-body p{ margin-bottom: 1.2em; font-size: 16.5px; }
.bio-contact{ font-family: var(--font-mono); font-size: 14px; margin-top: 20px; }
.bio-contact a{ color: var(--accent); }

/* Behind-the-scenes photo gallery — add a Gallery block in the team
   member's content and it'll pick up this styling automatically. */
.bio-body .wp-block-gallery{
  margin-block: 2em; gap: 10px;
}
.bio-body .wp-block-image img{ border-radius:2px; }
.bio-body figcaption{
  font-family: var(--font-mono); font-size:11px; color: var(--fg-faint);
  text-transform:uppercase; letter-spacing:.06em; margin-top:6px;
}
@media (max-width: 780px){ .bio-hero{ grid-template-columns:1fr; } }

/* =========================================================
   16. SERVICE SINGLE
   ========================================================= */
.service-hero{ padding: 150px var(--gutter) 60px; }
.service-hero h1{ font-family: var(--font-display); font-weight:900; font-size: clamp(36px,6.4vw,84px); letter-spacing:-0.02em; max-width:16ch; color: var(--fg); }
.service-body{ max-width: 760px; margin-inline:auto; padding-block: 60px; color: var(--ink-dim); }
.service-body p{ margin-bottom: 1.3em; font-size: 17px; }

/* =========================================================
   17. CONTACT FORM
   ========================================================= */
.contact-form{ display:grid; gap: 22px; max-width: 640px; }
.field label{ display:block; font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-dim); margin-bottom: 8px; }
.field input, .field textarea{ width:100%; background: transparent; border: none; border-bottom: 1px solid var(--line-ink); color: var(--ink); font-size: 17px; padding-block: 10px; resize: vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--accent); }
.form-notice{ font-family: var(--font-mono); font-size:13px; padding: 14px 16px; border-radius:2px; margin-bottom: 24px; }
.form-notice.success{ background: rgba(226,59,46,0.10); color: var(--accent); }
.form-notice.error{ background: rgba(255,90,90,0.12); color:#ff6b6b; }

/* Skip link */
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--fg); padding:10px 16px; z-index:400; }
.skip-link:focus{ left: 16px; top:16px; }

/* Placeholder avatar (no photo uploaded yet) */
.placeholder-avatar{ width:100%; height:100%; }
.placeholder-avatar svg{ width:100%; height:100%; display:block; }

/* =========================================================
   22. INTRO OVERLAY — "Ignite. Spark. Shoot."
   ========================================================= */
.intro-overlay{
  position: fixed; inset:0; z-index: 500;
  background: #000;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.intro-overlay.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-word{
  position:absolute;
  font-family: var(--font-display); font-weight:900;
  font-size: clamp(32px, 7vw, 72px);
  color: var(--fg); letter-spacing:-0.01em;
  opacity:0;
}
.intro-word.w1{ animation: introFade 1.15s ease forwards; animation-delay: 0s; }
.intro-word.w2{ animation: introFade 1.15s ease forwards; animation-delay: 1.05s; }
.intro-word.w3{ animation: introFade 1.15s ease forwards; animation-delay: 2.1s; }
@keyframes introFade{
  0%{ opacity:0; transform: translateY(10px); }
  18%{ opacity:1; transform:none; }
  82%{ opacity:1; }
  100%{ opacity:0; transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce){
  .intro-overlay{ display:none; }
}

/* =========================================================
   18. TICKER BAND (straight-line section break, solid accent)
   ========================================================= */
.ticker-band{
  background: var(--accent); color: var(--ink);
  overflow:hidden; position:relative;
}
.ticker-track{
  display:flex; width:max-content;
  animation: tickerscroll 22s linear infinite;
}
.ticker-track span{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(16px, 2.2vw, 22px);
  text-transform: uppercase; letter-spacing: .02em;
  padding-inline: 26px; white-space: nowrap;
  display:flex; align-items:center; gap:26px;
}
.ticker-track span::after{ content:"◆"; font-size:9px; opacity:.6; }
@keyframes tickerscroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* =========================================================
   19. OFFSET SEAM BADGE — logo straddling a straight section break
   ========================================================= */
.seam{ position: relative; height: 0; }
.seam-badge{
  position:absolute; left:50%; top:0;
  transform: translate(-50%,-50%);
  width: 74px; height:74px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  z-index: 40;
}
.seam-badge img{ width: 34px; height:auto; }
.seam-badge .fallback{
  font-family: var(--font-display); font-weight:900; font-size:20px; color: var(--accent);
}
@media (max-width: 780px){ .seam-badge{ width:54px; height:54px; } .seam-badge img{ width:24px; } }

/* =========================================================
   21. CROSSHAIR / GRID DECORATION
   ========================================================= */