@charset "UTF-8";
/* ==========================================================================
   blok design lab — main stylesheet
   Dark editorial tone. One vertical front page, plus the works pages.
   Structure:
     1. COMMON      — reset, tokens, cursor, loading, brand, nav
     2. HOME        — body.blok-home (one vertical page)
     3. WORK CARD   — shared by the front page and the works archive
     4. WORKS       — body.blok-works
     5. WORK DETAIL — body.blok-work
     6. SITE CHROME — footer, closing CTA, static pages
     7. CONTACT FORM
     8. THEME ADDITIONS
   ========================================================================== */

/* ==========================================================================
   1. COMMON
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0A0A0A;
  --bg-2:#141414;
  --ink:#fff;
  --ink-dim:#999;
  --ink-low:#555;
  --accent:#E85827;
  --line:rgba(255,255,255,0.08);
  --line-str:rgba(255,255,255,0.2);}
body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;cursor:none;overflow-x:hidden;}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;
  border-radius:50%;
  pointer-events:none;
  z-index:10000;
  transition:width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s,opacity .3s;}
.cursor-dot{width:6px;height:6px;
  background:var(--ink);
  transform:translate(-50%,-50%);}
.cursor-ring{width:30px;height:30px;
  border:1px solid var(--ink);
  transform:translate(-50%,-50%);}
body.hover-link .cursor-dot{opacity:0}
body.hover-link .cursor-ring{width:70px;height:70px;
  background:var(--accent);
  border-color:var(--accent);
  mix-blend-mode:difference;}
body.hover-work .cursor-dot{opacity:0}
body.hover-work .cursor-ring{width:90px;height:90px;
  border-color:var(--accent);
  background:transparent;}
body.hover-work .cursor-ring::after{content:'VIEW';
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.15em;}
@media(max-width:900px){
  .cursor-dot,.cursor-ring{display:none}
  body{cursor:auto}
}
.loading{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;animation:loadingOut .4s cubic-bezier(.6,0,.3,1) .7s forwards;}
.loading svg{width:120px;color:var(--ink);animation:logoIn .45s cubic-bezier(.2,.8,.2,1) forwards;}
.loading .line{width:120px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:lineSweep .45s cubic-bezier(.6,0,.3,1) .2s forwards;}
.loading .caption{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-dim);letter-spacing:0.3em;
  opacity:0;
  animation:fadeUp .4s ease .5s forwards;}
@keyframes logoIn{from{opacity:0;transform:scale(0.92)}60%{opacity:1;transform:scale(1.01)}to{opacity:1;transform:scale(1)}}
@keyframes lineSweep{to{transform:scaleX(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes loadingOut{to{opacity:0;pointer-events:none;transform:translateY(-20px)}}
/* Inner pages paint straight away; only the front page waits for the intro. */
.app{opacity:1}
body.blok-home .app{opacity:0;animation:appIn .4s ease .85s forwards}
@media(prefers-reduced-motion:reduce){
  .loading{display:none}
  body.blok-home .app{opacity:1;animation:none}
}
@keyframes appIn{to{opacity:1}}
.brand{position:fixed;top:24px;left:28px;z-index:50;
  display:flex;align-items:center;gap:10px;}
.brand svg{width:38px;color:var(--ink);display:block;}
.brand-meta{font-family:'JetBrains Mono',monospace;
  font-size:9px;color:var(--ink-dim);
  letter-spacing:0.12em;text-transform:uppercase;
  line-height:1.4;
  border-left:1px solid var(--line-str);
  padding-left:10px;}
.brand-meta .accent{color:var(--accent)}
#mainnav{position:fixed;top:24px;right:28px;z-index:50;
  display:flex;flex-direction:column;gap:6px;
  font-family:'Inter',sans-serif;font-size:12px;
  text-align:right;}
#mainnav .hamburger{display:none}
#mainnav a{color:var(--ink-dim);text-decoration:none;
  padding:4px 0;display:inline-flex;align-items:center;gap:8px;
  justify-content:flex-end;
  transition:color .3s;
  position:relative;}
#mainnav a::before{content:'';width:5px;height:5px;background:var(--accent);
  opacity:0;transform:translateX(4px);
  transition:opacity .3s,transform .3s;}
#mainnav a:hover,#mainnav a.active{color:var(--ink)}
#mainnav a:hover::before,#mainnav a.active::before{opacity:1;transform:translateX(0)}
#mainnav a .pix{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink-low);margin-right:2px}
#mainnav a.nav-cta{color:var(--accent)}
@media(max-width:900px){
  #mainnav{top:14px;right:14px;
    padding:0;border:none;background:transparent;
    font-size:11px;
    display:block;}
  #mainnav > a, #mainnav > .sub{display:none !important}
  #mainnav .hamburger{display:flex !important;
    width:44px;height:44px;
    background:var(--bg);
    border:1px solid var(--line-str);
    align-items:center;justify-content:center;
    flex-direction:column;gap:5px;
    cursor:pointer;padding:0;
    position:relative;z-index:60;}
  #mainnav .hamburger span{display:block;width:18px;height:1.5px;background:var(--ink);
    transition:transform 0.3s,opacity 0.3s,background 0.3s,top 0.3s;
    position:relative;top:0;}
  #mainnav.open .hamburger span{position:absolute;top:50%;left:50%;margin:-0.75px 0 0 -9px}
  #mainnav.open .hamburger span:nth-child(1){transform:rotate(45deg);background:var(--accent)}
  #mainnav.open .hamburger span:nth-child(2){opacity:0}
  #mainnav.open .hamburger span:nth-child(3){transform:rotate(-45deg);background:var(--accent)}
  #mainnav.open{position:fixed;inset:0;
    background:var(--bg);z-index:55;
    padding:80px 32px;}
  #mainnav.open > a, #mainnav.open > .sub{display:block !important}
  #mainnav.open > a{font-size:32px;font-weight:600;
    color:var(--ink);
    padding:8px 0;
    text-align:left;
    justify-content:flex-start;}
  #mainnav.open > a .pix{font-size:11px;margin-right:8px}
  #mainnav.open > a::before{display:inline-block;width:6px;height:6px;
    opacity:0.3;transform:translateX(0);
    margin-right:0;}
  #mainnav.open > a.active::before,#mainnav.open > a:hover::before{opacity:1}
  #mainnav.open > .sub{padding-left:0;margin-bottom:4px}
  #mainnav.open > .sub a{display:inline-block !important;
    font-size:18px;font-weight:400;
    color:var(--ink-dim);
    padding:6px 24px 6px 24px;}
  #mainnav.open .hamburger{position:fixed;top:14px;right:14px;background:transparent;border-color:var(--accent)}
  #mainnav.open::after{content:'hello@blok.jp / instagram.com/blok_mizumoto_ota';
    position:absolute;bottom:32px;left:32px;right:32px;
    font-family:'JetBrains Mono',monospace;font-size:10px;
    color:var(--ink-low);letter-spacing:0.1em;
    padding-top:16px;border-top:1px solid var(--line);
    pointer-events:none;}
  .brand{top:18px;left:18px}
  .brand-meta{display:none}
}
html{scroll-behavior:smooth}
.brand a{text-decoration:none;display:inline-block}
body.hover-card .cursor-ring{width:100px;height:100px;
  background:transparent;border-color:var(--accent);
  mix-blend-mode:normal;}
body.hover-card .cursor-dot{width:0;height:0;opacity:0;}
.cursor-ring::after{content:'VIEW';
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:0.2em;color:var(--accent);opacity:0;transition:opacity .3s;}
body.hover-card .cursor-ring::after{opacity:1}
@media(max-width:900px){
  #mainnav.open > a.active::before{opacity:1}
}
@media(max-width:900px){
    }
@media(max-width:900px){
  }
.gyro-prompt{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  background:var(--bg);color:var(--accent);
  border:1px solid var(--accent);padding:10px 18px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.2em;z-index:60;cursor:pointer;
  animation:promptPulse 2s ease-in-out infinite;}
@keyframes promptPulse{0%,100%{opacity:0.6}50%{opacity:1}}
.work-thumb,.thumb,.ph{overflow:hidden;position:relative}
.work-thumb img,.thumb img,.ph img{position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;z-index:1;}
.work-thumb.has-image::after,
.thumb.has-image::before,
.ph.has-image::after{content:none!important}
body.admin-bar .brand{top:56px}
body.admin-bar nav{top:56px}
@media(max-width:900px){
  body.admin-bar .brand{top:64px}
  body.admin-bar nav{top:60px}
}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;
  position:absolute!important;word-wrap:normal!important;}

/* ==========================================================================
   2. HOME  (body.blok-home) — one vertical page
   ========================================================================== */

/* --- shared section frame ------------------------------------------------ */
body.blok-home .sec{position:relative;padding:140px 0}
body.blok-home .sec + .sec{border-top:1px solid var(--line)}
body.blok-home .sec-inner{max-width:1240px;margin:0 auto;padding:0 80px}

body.blok-home .sec-head{margin-bottom:72px;max-width:900px}
body.blok-home .sec-num{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.25em;margin-bottom:20px;}
body.blok-home .sec-title{font-size:clamp(40px,5.5vw,84px);
  font-weight:700;letter-spacing:-0.035em;line-height:1;
  margin-bottom:28px;}
body.blok-home .sec-title em{color:var(--accent);font-family:'Bodoni Moda',serif;
  font-style:italic;font-weight:400;}
body.blok-home .sec-lead{font-size:clamp(15px,1.2vw,18px);
  color:var(--ink-dim);line-height:2;letter-spacing:0.01em;}
body.blok-home .sec-lead strong{color:var(--ink);font-weight:600}
body.blok-home .sec-actions{margin-top:64px}

/* --- buttons ------------------------------------------------------------- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--bg);text-decoration:none;
  padding:20px 44px;border:1px solid var(--accent);
  font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:0.2em;font-weight:500;
  transition:background .3s,color .3s;}
.btn-primary:hover{background:transparent;color:var(--accent)}

.btn-ghost{display:inline-flex;align-items:center;
  border:1px solid var(--line-str);color:var(--ink);text-decoration:none;
  padding:18px 40px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.2em;
  transition:border-color .3s,color .3s;}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* --- 001 HERO ------------------------------------------------------------ */
body.blok-home .sec-hero{min-height:100vh;display:flex;align-items:center;
  padding:160px 0 120px;overflow:hidden;}
body.blok-home .sec-hero .sec-inner{width:100%}

/* Grain and a single slow sweep — the original texture, without the glitch */
body.blok-home .sec-hero .noise{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.05;mix-blend-mode:overlay;
}
body.blok-home .sec-hero .scanline{
  position:absolute;left:0;right:0;height:1px;top:0;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(232,88,39,0.5),transparent);
  animation:heroSweep 9s linear infinite;pointer-events:none;
}
@keyframes heroSweep{0%{top:-2%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:102%;opacity:0}}

body.blok-home .hero-mark{position:relative;z-index:2;margin-bottom:56px}
body.blok-home .hero-mark svg{width:clamp(180px,26vw,320px);color:var(--ink);display:block}

body.blok-home .hero-copy{position:relative;z-index:2;
  font-size:clamp(38px,6.4vw,92px);
  font-weight:700;letter-spacing:-0.04em;line-height:1.15;
  margin-bottom:36px;}

body.blok-home .hero-en{position:relative;z-index:2;
  font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400;
  color:var(--accent);
  font-size:clamp(16px,1.7vw,24px);line-height:1.7;
  margin-bottom:44px;}

body.blok-home .hero-lead{position:relative;z-index:2;
  font-size:clamp(14px,1.15vw,17px);
  color:var(--ink-dim);line-height:2.1;letter-spacing:0.01em;
  margin-bottom:52px;}
body.blok-home .hero-lead strong{color:var(--ink);font-weight:600}

body.blok-home .sec-hero .btn-primary{position:relative;z-index:2}

body.blok-home .hero-tags{position:relative;z-index:2;
  margin-top:64px;display:flex;flex-wrap:wrap;gap:10px 28px;
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--ink-low);letter-spacing:0.2em;}
body.blok-home .hero-tags span{display:inline-flex;align-items:center;gap:8px}
body.blok-home .hero-tags span::before{content:'';width:4px;height:4px;background:var(--accent)}

body.blok-home .hero-status{position:absolute;left:80px;bottom:40px;z-index:2;
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--ink-low);letter-spacing:0.2em;}

/* --- 002 WORKS ----------------------------------------------------------- */
body.blok-home .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 40px}

/* --- 003 SERVICES -------------------------------------------------------- */
body.blok-home .service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);}
body.blok-home .service{background:var(--bg);padding:48px 44px;
  display:flex;flex-direction:column;align-items:flex-start;
  transition:background .3s;}
body.blok-home .service:hover{background:var(--bg-2)}
body.blok-home .service-no{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.2em;margin-bottom:24px;}
body.blok-home .service-title{font-size:clamp(21px,2vw,28px);font-weight:600;
  letter-spacing:-0.01em;margin-bottom:14px;}
body.blok-home .service-body{color:var(--ink-dim);font-size:14px;line-height:1.9;
  margin-bottom:28px;flex:1;}
body.blok-home .service-link{font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-low);text-decoration:none;letter-spacing:0.15em;
  border-bottom:1px solid var(--line-str);padding-bottom:5px;
  transition:color .3s,border-color .3s;}
body.blok-home .service-link:hover{color:var(--accent);border-color:var(--accent)}

/* --- 004 FLOW ------------------------------------------------------------ */
body.blok-home .flow-list{list-style:none;counter-reset:none;
  border-top:1px solid var(--line);}
body.blok-home .flow-step{display:grid;grid-template-columns:120px 1fr;gap:48px;
  padding:40px 0;border-bottom:1px solid var(--line);align-items:baseline;}
body.blok-home .flow-no{font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--accent);letter-spacing:0.2em;}
body.blok-home .flow-title{font-size:clamp(20px,2vw,26px);font-weight:600;
  margin-bottom:10px;letter-spacing:-0.01em;}
body.blok-home .flow-note{font-size:13px;color:var(--accent);font-weight:400;
  font-family:'JetBrains Mono',monospace;letter-spacing:0.05em;}
body.blok-home .flow-body p{color:var(--ink-dim);font-size:15px;line-height:1.9}

/* --- 005 ABOUT ----------------------------------------------------------- */
body.blok-home .company-head{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.25em;margin-bottom:28px;}
body.blok-home .company-table .row{display:grid;grid-template-columns:180px 1fr;gap:40px;
  padding:22px 0;border-bottom:1px solid var(--line);}
body.blok-home .company-table dt{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-low);letter-spacing:0.15em;padding-top:4px;}
body.blok-home .company-table dd{color:var(--ink);font-size:15px;line-height:1.7}
body.blok-home .company-table dd .note{display:block;color:var(--ink-dim);
  font-size:13px;margin-top:6px;}
body.blok-home .company-table dd a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--line-str);transition:color .3s,border-color .3s;}
body.blok-home .company-table dd a:hover{color:var(--accent);border-color:var(--accent)}

/* --- 006 CONTACT --------------------------------------------------------- */
body.blok-home .contact-grid{display:grid;grid-template-columns:1fr 340px;gap:80px;
  align-items:start;}
body.blok-home .contact-direct .label{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.25em;margin-bottom:28px;}
body.blok-home .contact-direct .row{padding:18px 0;border-bottom:1px solid var(--line)}
body.blok-home .contact-direct .row:last-child{border-bottom:none}
body.blok-home .contact-direct .k{display:block;font-family:'JetBrains Mono',monospace;
  font-size:9px;color:var(--ink-low);letter-spacing:0.2em;margin-bottom:8px;}
body.blok-home .contact-direct .v{color:var(--ink);font-size:15px;text-decoration:none;
  transition:color .3s;}
body.blok-home .contact-direct .v:hover{color:var(--accent)}
body.blok-home .contact-direct .v.mail{font-family:'Bodoni Moda',serif;font-style:italic;
  font-size:clamp(20px,2vw,26px);color:var(--accent);}

/* --- responsive ---------------------------------------------------------- */
@media(max-width:1100px){
  body.blok-home .work-grid{grid-template-columns:repeat(2,1fr)}
  body.blok-home .contact-grid{grid-template-columns:1fr;gap:56px}
}
@media(max-width:900px){
  body.blok-home .sec{padding:88px 0}
  body.blok-home .sec-inner{padding:0 24px}
  body.blok-home .sec-head{margin-bottom:48px}
  body.blok-home .sec-actions{margin-top:44px}

  body.blok-home .sec-hero{min-height:auto;padding:132px 0 88px}
  body.blok-home .hero-mark{margin-bottom:40px}
  body.blok-home .hero-copy{margin-bottom:28px}
  body.blok-home .hero-en{margin-bottom:32px}
  body.blok-home .hero-lead{margin-bottom:40px;line-height:2}
  body.blok-home .sec-hero .btn-primary{width:100%}
  body.blok-home .hero-tags{margin-top:48px;gap:8px 20px}
  body.blok-home .hero-status{left:24px;bottom:24px}

  body.blok-home .work-grid{grid-template-columns:1fr;gap:44px}
  body.blok-home .service-grid{grid-template-columns:1fr}
  body.blok-home .service{padding:36px 28px}

  body.blok-home .flow-step{grid-template-columns:1fr;gap:12px;padding:28px 0}
  body.blok-home .flow-no{font-size:11px}

  body.blok-home .company-table .row{grid-template-columns:1fr;gap:8px;padding:18px 0}
  body.blok-home .sec-actions .btn-primary,
  body.blok-home .sec-actions .btn-ghost{width:100%}
}

/* Long Japanese lines should wrap on their own terms, never leaving a single
   orphaned word on the last line. */
body.blok-home .hero-copy,
body.blok-home .hero-lead,
body.blok-home .sec-lead,
body.blok-home .service-title,
body.blok-home .flow-title,
body.blok-home .flow-body p{
  word-break:normal;overflow-wrap:anywhere;line-break:strict;
}
@media(max-width:600px){
  /* the authored <br> positions are tuned for wide screens */
  body.blok-home .hero-lead br,
  body.blok-home .sec-lead br,
  body.blok-profile .lead br,
  .profile-bio br{display:none}
}


/* ==========================================================================
   PROFILE PAGE  (body.blok-profile)
   ========================================================================== */
body.blok-profile .crumb{padding:120px 80px 0;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-low);letter-spacing:0.15em;text-transform:uppercase;}
body.blok-profile .crumb a{color:var(--ink-low);text-decoration:none;transition:color .3s}
body.blok-profile .crumb a:hover{color:var(--accent)}
body.blok-profile .crumb .sep{margin:0 10px;color:var(--line-str)}
body.blok-profile .crumb .here{color:var(--accent)}

body.blok-profile .page-hero{padding:32px 80px 80px;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;}
body.blok-profile .page-hero .sec-num{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.2em;margin-bottom:18px;}
body.blok-profile .page-hero h1{font-size:clamp(44px,7vw,96px);
  font-weight:700;letter-spacing:-0.035em;line-height:1;}
body.blok-profile .page-hero h1 em{color:var(--accent);font-family:'Bodoni Moda',serif;
  font-style:italic;font-weight:400;}
body.blok-profile .page-hero .lead{font-size:clamp(15px,1.25vw,18px);
  color:var(--ink-dim);line-height:1.9;max-width:440px;}
body.blok-profile .page-hero .lead strong{color:var(--ink);font-weight:500}

body.blok-profile .profile-page{padding:40px 80px 120px;max-width:1240px;margin:0 auto}
body.blok-profile .profile-records{margin-top:96px;padding-top:56px;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
body.blok-profile .back-all{margin-top:80px;padding-top:40px;border-top:1px solid var(--line)}
body.blok-profile .back-all a{font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-low);text-decoration:none;letter-spacing:0.15em;
  border-bottom:1px solid var(--line-str);padding-bottom:4px;
  transition:color .3s,border-color .3s;}
body.blok-profile .back-all a:hover{color:var(--accent);border-color:var(--accent)}
.profile{display:grid;grid-template-columns:380px 1fr;gap:72px;align-items:start}
.profile-portrait{position:relative}
.profile-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.05);transition:filter .5s;}
.profile-portrait:hover img{filter:grayscale(0) contrast(1)}
.profile-portrait .tag{position:absolute;left:14px;bottom:14px;
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--accent);letter-spacing:0.2em;}

.profile-name{font-size:clamp(28px,3.2vw,44px);font-weight:700;
  letter-spacing:-0.02em;line-height:1.2;}
.profile-name-en{font-family:'Bodoni Moda',serif;font-style:italic;
  color:var(--accent);font-size:clamp(18px,1.8vw,24px);margin-top:6px;}
.profile-role{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-low);letter-spacing:0.2em;margin-top:18px;
  padding-top:18px;border-top:1px solid var(--line);}
.profile-bio{margin-top:32px;color:var(--ink-dim);
  font-size:15px;line-height:2;}
.profile-bio p + p{margin-top:20px}
.profile-bio .em{color:var(--accent);font-family:'Bodoni Moda',serif;font-style:italic}

.profile-block{margin-top:40px}
.profile-block h2{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.25em;margin-bottom:18px;}
.profile-block ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.profile-block li{color:var(--ink);font-size:14px;line-height:1.7}
.profile-block li em{display:block;font-family:'Bodoni Moda',serif;
  font-style:italic;color:var(--ink-dim);font-size:13px;margin-top:2px;}
.profile-block ul.dated li{display:grid;grid-template-columns:80px 1fr;gap:20px}
.profile-block .year{font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-low);letter-spacing:0.05em;}



@media(max-width:1100px){
  .profile{grid-template-columns:300px 1fr;gap:48px}
}
@media(max-width:900px){
  body.blok-profile .crumb{padding:110px 24px 0}
  body.blok-profile .page-hero{grid-template-columns:1fr;gap:28px;padding:24px 24px 48px}
  body.blok-profile .profile-page{padding:24px 24px 80px}
  body.blok-profile .profile-records{grid-template-columns:1fr;gap:44px;margin-top:64px}
  .profile{grid-template-columns:1fr;gap:36px}
  .profile-block ul.dated li{grid-template-columns:70px 1fr;gap:14px}
}


/* ==========================================================================
   3. WORK CARD — shared by the front page selection and the works archive
   ========================================================================== */
.work{text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:18px;
  transition:opacity .4s;}
.work.hidden{display:none}
.work .thumb{width:100%;aspect-ratio:4/5;
  background:var(--bg-2);
  position:relative;overflow:hidden;}
.work .thumb::before{content:attr(data-num);
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-low);letter-spacing:0.2em;
  opacity:0.6;}
.work .thumb::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(232,88,39,0.0) 100%);
  transition:background .5s;
  pointer-events:none;}
.work:hover .thumb::after{background:linear-gradient(180deg,transparent 30%,rgba(232,88,39,0.15) 100%);}
.work .meta-line{margin-top:12px;display:flex;align-items:center;justify-content:space-between;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-low);letter-spacing:0.15em;
  padding-bottom:8px;border-bottom:1px solid var(--line);
  text-transform:uppercase;}
.work .meta-line .cat{color:var(--accent)}
.work .arrow{display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.2em;color:var(--ink-low);
  margin-top:6px;text-transform:uppercase;
  transition:color .3s,gap .3s;}
.work:hover .arrow{color:var(--accent);gap:14px}
@media(max-width:900px){
  .work .thumb{aspect-ratio:4/5}
}
.work .work-client{font-size:clamp(19px,1.5vw,24px);
  font-weight:600;letter-spacing:-0.01em;line-height:1.45;
  color:var(--ink);transition:color .3s;}
.work:hover .work-client{color:var(--accent)}
.work .work-client .sep{color:var(--ink-low);font-weight:400;margin:0 2px}
.work .work-industry{font-size:13px;font-weight:400;color:var(--ink-dim)}
.work .work-sub{font-family:'Bodoni Moda',serif;font-style:italic;
  color:var(--ink-dim);font-size:14px;}
.work.is-empty{opacity:.55;pointer-events:none}


/* ==========================================================================
   4. WORKS / 5. WORK DETAIL
   ========================================================================== */
body.blok-works .crumb{padding:88px 80px 0;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-low);letter-spacing:0.15em;text-transform:uppercase;}
body.blok-works .crumb a{color:var(--ink-low);text-decoration:none;transition:color .3s}
body.blok-works .crumb a:hover{color:var(--accent)}
body.blok-works .crumb .sep{margin:0 10px;color:var(--line-str)}
body.blok-works .crumb .here{color:var(--accent)}
body.blok-works .page-hero{padding:32px 80px 80px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:end;
  min-height:50vh;}
body.blok-works .page-hero .sec-num{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.2em;margin-bottom:18px;}
body.blok-works .page-hero h1{font-size:clamp(54px,8vw,120px);
  font-weight:700;letter-spacing:-0.035em;line-height:0.95;}
body.blok-works .page-hero h1 em{color:var(--accent);font-family:'Bodoni Moda',serif;
  font-style:italic;font-weight:400;}
body.blok-works .page-hero .lead{font-size:clamp(15px,1.25vw,18px);
  color:var(--ink-dim);line-height:1.9;letter-spacing:0.01em;
  max-width:420px;}
body.blok-works .page-hero .lead strong{color:var(--ink);font-weight:500}
body.blok-works .page-hero .meta{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-low);letter-spacing:0.15em;
  margin-top:24px;display:flex;gap:24px;flex-wrap:wrap;}
body.blok-works .page-hero .meta span{display:flex;align-items:center;gap:6px}
body.blok-works .page-hero .meta span::before{content:'◆';color:var(--accent);font-size:8px}
body.blok-works .filters{position:sticky;top:0;z-index:40;
  background:var(--bg);
  padding:18px 80px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;gap:10px 32px;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;}
body.blok-works .filter-row{display:flex;align-items:center;gap:24px;grid-column:1}
body.blok-works .filters .label{color:var(--accent);
  width:104px;flex:0 0 auto;
  padding-right:20px;border-right:1px solid var(--line);
  text-transform:none;letter-spacing:0.08em;}
body.blok-works .filters .tabs{display:flex;gap:24px;flex-wrap:wrap;flex:1;
  text-transform:none;letter-spacing:0.08em;}
body.blok-works .filters button{background:none;border:none;cursor:none;
  font-family:inherit;font-size:inherit;letter-spacing:inherit;
  color:var(--ink-low);padding:6px 0;
  position:relative;text-transform:inherit;
  transition:color .3s;}
body.blok-works .filters button:hover{color:var(--ink)}
body.blok-works .filters button.active{color:var(--ink)}
body.blok-works .filters button::after{content:'';position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.6,0,.3,1);}
body.blok-works .filters button.active::after{transform:scaleX(1)}
body.blok-works .filters .count{font-size:10px;color:var(--ink-low);
  grid-column:2;grid-row:1 / span 2;align-self:center;letter-spacing:0.15em;}
body.blok-works .filters .count .num{color:var(--accent)}
body.blok-works .magazine{padding:60px 80px 120px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
  align-items:start;}
body.blok-works .col{display:flex;flex-direction:column;gap:60px;
  will-change:transform;}
body.blok-works .col[data-col="0"]{padding-top:0}
body.blok-works .col[data-col="1"]{padding-top:80px}
body.blok-works .col[data-col="2"]{padding-top:160px}
body.blok-works .empty{grid-column:1 / -1;
  text-align:center;padding:120px 0;
  color:var(--ink-low);
  font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:0.2em;}
body.blok-works .empty .accent{color:var(--accent)}
body.blok-works .cta{padding:120px 80px 140px;
  border-top:1px solid var(--line);
  text-align:center;
  background:radial-gradient(ellipse at 50% 100%,rgba(232,88,39,0.08) 0%,transparent 60%);}
body.blok-works .cta .pre{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.3em;margin-bottom:24px;}
body.blok-works .cta h2{font-size:clamp(44px,7vw,96px);
  font-weight:700;line-height:0.95;
  letter-spacing:-0.03em;margin-bottom:32px;}
body.blok-works .cta h2 em{color:var(--accent);font-family:'Bodoni Moda',serif;
  font-style:italic;font-weight:400;}
body.blok-works .cta .mail{font-family:'Bodoni Moda',serif;font-style:italic;
  font-size:clamp(20px,3vw,30px);
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent);padding-bottom:4px;}
body.blok-works .cta .mail:hover{color:var(--ink);border-color:var(--ink)}
body.blok-works .cta .back{margin-top:48px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.2em;}
body.blok-works .cta .back a{color:var(--ink-dim);text-decoration:none;
  border-bottom:1px solid var(--line-str);padding-bottom:3px;
  transition:color .3s,border-color .3s;}
body.blok-works .cta .back a:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:1100px){
  body.blok-works .magazine{grid-template-columns:repeat(2,1fr);gap:40px}
  body.blok-works .col[data-col="0"]{padding-top:0}
  body.blok-works .col[data-col="1"]{padding-top:80px}
  body.blok-works .col[data-col="2"]{padding-top:0}
}
@media(max-width:900px){
  body.blok-works .crumb{padding:80px 24px 0}
  body.blok-works .page-hero{grid-template-columns:1fr;gap:24px;
    padding:24px 24px 40px;min-height:auto;}
  body.blok-works .filters{padding:14px 24px;gap:10px;grid-template-columns:1fr;
    flex-wrap:wrap;}
  body.blok-works .filter-row{gap:14px;align-items:baseline}
  body.blok-works .filters .label{width:76px;padding-right:12px;font-size:10px;padding-bottom:0;border-bottom:none}
  body.blok-works .filters .tabs{gap:16px;font-size:10px;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  body.blok-works .filters .tabs::-webkit-scrollbar{display:none}
  body.blok-works .filters .count{display:none}
  body.blok-works .magazine{grid-template-columns:1fr;
    padding:40px 24px 80px;gap:48px;}
  body.blok-works .col[data-col]{padding-top:0}
  body.blok-works .col{gap:48px}
  body.blok-works .cta{padding:80px 24px 100px}
}
body.blok-work .crumb{padding:88px 80px 0;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-low);letter-spacing:0.15em;text-transform:uppercase;}
body.blok-work .crumb a{color:var(--ink-low);text-decoration:none;transition:color .3s}
body.blok-work .crumb a:hover{color:var(--accent)}
body.blok-work .crumb .sep{margin:0 10px;color:var(--line-str)}
body.blok-work .crumb .here{color:var(--accent)}
body.blok-work .work-hero{padding:32px 80px 60px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:60px;
  align-items:end;
  border-bottom:1px solid var(--line);}
body.blok-work .work-hero .num{font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--accent);letter-spacing:0.2em;
  margin-bottom:16px;}
body.blok-work .work-hero h1{font-size:clamp(48px,7vw,108px);
  font-weight:700;letter-spacing:-0.035em;line-height:0.95;}
body.blok-work .work-hero .meta{display:flex;flex-direction:column;gap:14px;
  text-align:right;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;}
body.blok-work .work-hero .meta .row{display:flex;align-items:baseline;gap:14px;
  justify-content:flex-end;}
body.blok-work .work-hero .meta .k{color:var(--ink-low);font-size:9px}
body.blok-work .work-hero .meta .v{color:var(--ink);}
body.blok-work .work-hero .meta .v.cat{color:var(--accent)}
body.blok-work .block-full{width:100%;
  height:90vh;min-height:600px;
  background:var(--bg-2);
  position:relative;
  overflow:hidden;}
body.blok-work .block-full.hero-img{height:100vh;min-height:680px}
body.blok-work .block-full .ph{position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 30% 40%,rgba(232,88,39,0.18) 0%,transparent 60%),
    radial-gradient(ellipse at 70% 70%,rgba(232,88,39,0.08) 0%,transparent 50%),
    var(--bg-2);
  display:flex;align-items:center;justify-content:center;}
body.blok-work .block-full .ph::after{content:attr(data-label);
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-low);letter-spacing:0.2em;
  text-transform:uppercase;}
body.blok-work .block-intro{padding:120px 80px;
  display:grid;
  grid-template-columns:200px 1fr;
  gap:80px;
  align-items:start;
  max-width:1400px;}
body.blok-work .block-intro .label{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.25em;
  padding-top:8px;position:sticky;top:120px;}
body.blok-work .block-intro .body{max-width:760px;}
body.blok-work .block-intro p{font-size:clamp(16px,1.4vw,20px);
  line-height:2;color:var(--ink);
  letter-spacing:0.01em;margin-bottom:24px;}
body.blok-work .block-intro p:last-child{margin-bottom:0}
body.blok-work .block-intro p .em{color:var(--accent);font-family:'Bodoni Moda',serif;
  font-style:italic;font-weight:400;}
body.blok-work .block-intro p strong{color:var(--ink);font-weight:500}
body.blok-work .block-wide{padding:0 80px 100px;}
body.blok-work .block-wide .ph{width:100%;aspect-ratio:16/9;
  background:
    linear-gradient(135deg,#1a1a1a 0%,#0f0f0f 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;}
body.blok-work .block-wide .ph::after{content:attr(data-label);
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-low);letter-spacing:0.2em;
  text-transform:uppercase;}
body.blok-work .block-wide .caption{margin-top:14px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-low);letter-spacing:0.15em;
  text-transform:uppercase;}
body.blok-work .block-wide .caption .num{color:var(--accent);margin-right:14px}
body.blok-work .block-split-2{padding:0 80px 100px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;}
body.blok-work .block-split-2 .item .ph{width:100%;aspect-ratio:4/5;
  background:linear-gradient(135deg,#1a1a1a 0%,#0f0f0f 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;}
body.blok-work .block-split-2 .item .ph::after{content:attr(data-label);
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-low);letter-spacing:0.2em;
  text-transform:uppercase;}
body.blok-work .block-split-2 .item .cap{margin-top:14px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-low);letter-spacing:0.15em;
  text-transform:uppercase;}
body.blok-work .block-split-2 .item .cap .num{color:var(--accent);margin-right:10px}
body.blok-work .block-split-2.offset .item:nth-child(2){margin-top:80px;}
body.blok-work .block-split-3{padding:0 80px 100px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;}
body.blok-work .block-split-3 .item .ph{width:100%;aspect-ratio:1/1;
  background:linear-gradient(135deg,#1a1a1a 0%,#0f0f0f 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;}
body.blok-work .block-split-3 .item .ph::after{content:attr(data-label);
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-low);letter-spacing:0.2em;
  text-transform:uppercase;}
body.blok-work .block-split-3 .item .cap{margin-top:12px;
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--ink-low);letter-spacing:0.15em;
  text-transform:uppercase;}
body.blok-work .block-quote{padding:120px 80px;
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);}
body.blok-work .block-quote .mark{font-family:'Bodoni Moda',serif;font-style:italic;
  font-size:120px;color:var(--accent);
  line-height:0;display:block;margin-bottom:0;}
body.blok-work .block-quote p{font-family:'Shippori Mincho',serif;
  font-size:clamp(22px,2.6vw,38px);
  line-height:1.7;letter-spacing:0.02em;
  color:var(--ink);max-width:880px;margin:0 auto;
  font-weight:400;}
body.blok-work .block-quote p em{color:var(--accent);font-family:'Bodoni Moda',serif;
  font-style:italic;}
body.blok-work .block-quote .attr{margin-top:36px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-low);letter-spacing:0.2em;}
body.blok-work .credits{padding:120px 80px;
  background:var(--bg-2);
  border-top:1px solid var(--line);}
body.blok-work .credits-head{margin-bottom:60px;}
body.blok-work .credits-head .label{font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--accent);letter-spacing:0.3em;
  padding-bottom:14px;border-bottom:1px solid var(--line);
  display:inline-block;}
body.blok-work .credits-list{max-width:920px;}
body.blok-work .credits-list .row{display:grid;grid-template-columns:180px 1fr;gap:32px;
  padding:18px 0;border-bottom:1px solid var(--line);
  align-items:baseline;}
body.blok-work .credits-list .row:last-child{border-bottom:none}
body.blok-work .credits-list .role{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.2em;}
body.blok-work .credits-list .name{font-size:16px;color:var(--ink);}
body.blok-work .credits-list .name .sub{display:block;font-size:13px;color:var(--ink-dim);
  font-family:'Bodoni Moda',serif;font-style:italic;
  margin-top:2px;}
body.blok-work .next-work{padding:120px 80px;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:60px;
  align-items:center;}
body.blok-work .next-work .info{display:flex;flex-direction:column;gap:20px;}
body.blok-work .next-work .info .nx-label{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.3em;}
body.blok-work .next-work .info .nx-num{font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-low);letter-spacing:0.2em;}
body.blok-work .next-work .info h3{font-size:clamp(40px,5.5vw,72px);
  font-weight:700;letter-spacing:-0.025em;line-height:1;}
body.blok-work .next-work .info h3 a{color:var(--ink);text-decoration:none;
  transition:color .3s;}
body.blok-work .next-work .info h3 a:hover{color:var(--accent)}
body.blok-work .next-work .info .nx-cat{font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-dim);letter-spacing:0.2em;}
body.blok-work .next-work .info .nx-arrow{margin-top:12px;display:inline-flex;align-items:center;gap:14px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-low);letter-spacing:0.2em;
  transition:gap .3s,color .3s;}
body.blok-work .next-work:hover .info .nx-arrow{gap:24px;color:var(--accent)}
body.blok-work .next-work .img .ph{width:100%;aspect-ratio:4/5;
  background:linear-gradient(135deg,#1a1a1a 0%,#0f0f0f 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;}
body.blok-work .next-work .img .ph::after{content:attr(data-label);
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-low);letter-spacing:0.2em;}
body.blok-work .back-all{padding:60px 80px;
  text-align:center;
  border-top:1px solid var(--line);}
body.blok-work .back-all a{font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.25em;color:var(--ink-dim);
  text-decoration:none;
  border-bottom:1px solid var(--line-str);padding-bottom:4px;
  transition:color .3s,border-color .3s;}
body.blok-work .back-all a:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:900px){
  body.blok-work .crumb{padding:80px 24px 0}
  body.blok-work .work-hero{grid-template-columns:1fr;gap:24px;
    padding:24px 24px 40px;}
  body.blok-work .work-hero .meta{text-align:left}
  body.blok-work .work-hero .meta .row{justify-content:flex-start}
  body.blok-work .block-full,body.blok-work .block-full.hero-img{height:60vh;min-height:400px}
  body.blok-work .block-intro{padding:60px 24px;grid-template-columns:1fr;gap:16px;}
  body.blok-work .block-intro .label{position:static;padding-top:0;margin-bottom:8px}
  body.blok-work .block-wide{padding:0 24px 60px}
  body.blok-work .block-split-2{padding:0 24px 60px;
    grid-template-columns:1fr;gap:32px;}
  body.blok-work .block-split-2.offset .item:nth-child(2){margin-top:0}
  body.blok-work .block-split-3{padding:0 24px 60px;
    grid-template-columns:1fr;gap:24px;}
  body.blok-work .block-quote{padding:80px 24px}
  body.blok-work .block-quote .mark{font-size:80px}
  body.blok-work .credits{padding:60px 24px}
  body.blok-work .credits-head{margin-bottom:32px}
  body.blok-work .credits-list{margin-left:0}
  body.blok-work .credits-list .row{grid-template-columns:1fr;gap:4px;padding:14px 0}
  body.blok-work .next-work{padding:60px 24px;grid-template-columns:1fr;gap:32px;}
  body.blok-work .back-all{padding:40px 24px}
}
body.blok-work .block-full + .block-wide,
body.blok-work .block-full + .block-split-2,
body.blok-work .block-full + .block-split-3{padding-top:100px}
@media(max-width:900px){
  body.blok-work .block-full + .block-wide,
  body.blok-work .block-full + .block-split-2,
  body.blok-work .block-full + .block-split-3{padding-top:60px}
}

/* ==========================================================================
   6. SITE CHROME (footer, closing CTA, static pages)
   ========================================================================== */

/* --- closing CTA on inner pages ------------------------------------------ */
.foot-cta{padding:100px 80px;border-top:1px solid var(--line);text-align:center}
.foot-cta-lead{color:var(--ink-dim);font-size:15px;line-height:2;margin-bottom:36px}

/* --- site footer --------------------------------------------------------- */
.site-footer{padding:32px 80px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-low);letter-spacing:0.12em;}
.site-footer .foot-nav{display:flex;gap:28px;flex-wrap:wrap}
.site-footer a{color:var(--ink-low);text-decoration:none;transition:color .3s}
.site-footer a:hover{color:var(--accent)}

/* --- generic static page (privacy policy, and anything else) ------------- */
body.blok-page .page-body{max-width:820px;margin:0 auto;padding:140px 80px 120px}
body.blok-page .page-body h1{font-size:clamp(32px,4vw,56px);font-weight:700;
  letter-spacing:-0.03em;line-height:1.2;margin-bottom:16px;}
body.blok-page .page-updated{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-low);letter-spacing:0.15em;margin-bottom:56px;
  padding-bottom:24px;border-bottom:1px solid var(--line);}
body.blok-page .page-body h2{font-size:20px;font-weight:600;letter-spacing:-0.01em;
  margin:56px 0 16px;padding-left:16px;border-left:2px solid var(--accent);}
body.blok-page .page-body h3{font-size:16px;font-weight:600;margin:32px 0 12px}
body.blok-page .page-body p{color:var(--ink-dim);font-size:15px;line-height:2;margin-bottom:20px}
body.blok-page .page-body ul,
body.blok-page .page-body ol{color:var(--ink-dim);font-size:15px;line-height:2;
  margin:0 0 20px 22px;}
body.blok-page .page-body li{margin-bottom:6px}
body.blok-page .page-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
body.blok-page .page-body strong{color:var(--ink);font-weight:600}
body.blok-page .page-body table{width:100%;border-collapse:collapse;margin-bottom:24px}
body.blok-page .page-body th,
body.blok-page .page-body td{border:1px solid var(--line);padding:12px 16px;
  font-size:14px;color:var(--ink-dim);text-align:left;}
body.blok-page .page-body th{color:var(--ink);font-weight:500;background:var(--bg-2)}

@media(max-width:900px){
  .foot-cta{padding:72px 24px}
  .foot-cta .btn-primary{width:100%}
  .site-footer{padding:24px;flex-direction:column;align-items:flex-start;gap:16px}
  .site-footer .foot-nav{gap:18px}
  body.blok-page .page-body{padding:110px 24px 80px}
}


/* ==========================================================================
   7. CONTACT FORM (Contact Form 7)
   ========================================================================== */

/* Rows are plain markup inside the CF7 form */
.contact-form .form-row{display:block;margin-bottom:30px}
.contact-form .form-row > label{display:block;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--ink-dim);letter-spacing:0.18em;text-transform:uppercase;
  margin-bottom:12px;}
.contact-form .form-row .hint{display:block;margin-top:8px;
  font-size:11px;color:var(--ink-low);letter-spacing:0.02em;}
.contact-form .req{color:var(--accent)}
.contact-form p{margin-bottom:30px}
.contact-form p:last-child{margin-bottom:0}

/* Inputs */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form input[type="number"],
.contact-form input[type="date"],
.contact-form select,
.contact-form textarea{
  width:100%;
  background:transparent;color:var(--ink);
  border:none;border-bottom:1px solid var(--line-str);border-radius:0;
  padding:12px 2px;
  font-family:'Inter',sans-serif;font-size:16px;line-height:1.6;letter-spacing:0.01em;
  transition:border-color .3s,background .3s;
  -webkit-appearance:none;appearance:none;
}
.contact-form textarea{min-height:170px;resize:vertical}

/* Native select chrome is light-on-white, so draw our own arrow instead. */
.contact-form select{
  padding-right:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),
                   linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);
  background-position:calc(100% - 15px) calc(50% + 1px),calc(100% - 9px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
.contact-form select:focus{
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%);
}
/* The dropdown list itself is drawn by the OS — set both so it is legible. */
.contact-form select option{background-color:#141414;color:#fff}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:var(--ink-low)}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;border-bottom-color:var(--accent);background:rgba(255,255,255,0.02);
}

/* Consent checkbox */
.contact-form .wpcf7-acceptance .wpcf7-list-item{margin:0}
.contact-form .wpcf7-list-item-label,
.contact-form .wpcf7-acceptance label{
  display:flex;align-items:flex-start;gap:12px;
  font-size:13px;color:var(--ink-dim);line-height:1.7;cursor:pointer;
}
.contact-form input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  flex:0 0 auto;width:16px;height:16px;margin-top:3px;
  border:1px solid var(--line-str);background:transparent;
  cursor:pointer;transition:border-color .3s,background .3s;
}
.contact-form input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.contact-form input[type="radio"]{
  -webkit-appearance:none;appearance:none;
  flex:0 0 auto;width:16px;height:16px;margin-top:3px;border-radius:50%;
  border:1px solid var(--line-str);background:transparent;cursor:pointer;
  transition:border-color .3s,box-shadow .3s;
}
.contact-form input[type="radio"]:checked{
  border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--accent);
}
.contact-form input[type="checkbox"]:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.contact-form .wpcf7-list-item-label a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* Submit */
.contact-form input[type="submit"],
.contact-form .wpcf7-submit{
  width:auto;background:var(--accent);color:var(--bg);
  border:1px solid var(--accent);
  padding:20px 52px;
  font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:0.2em;text-transform:uppercase;font-weight:500;
  cursor:pointer;transition:background .3s,color .3s;
}
.contact-form input[type="submit"]:hover,
.contact-form .wpcf7-submit:hover{background:transparent;color:var(--accent)}
.contact-form input[type="submit"]:disabled{opacity:0.4;cursor:default}

/* CF7 feedback */
.contact-form .wpcf7-spinner{background-color:var(--accent);margin-left:16px}
.contact-form .wpcf7-not-valid-tip{display:block;margin-top:8px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.08em;}
.contact-form .wpcf7-not-valid{border-bottom-color:var(--accent)}
.contact-form .wpcf7-response-output{
  margin:28px 0 0;padding:18px 22px;border:1px solid var(--line-str);
  font-size:13px;line-height:1.7;color:var(--ink-dim);
}
.contact-form form.sent .wpcf7-response-output{border-color:var(--accent);color:var(--ink)}
.contact-form form.invalid .wpcf7-response-output,
.contact-form form.failed .wpcf7-response-output,
.contact-form form.aborted .wpcf7-response-output{border-color:var(--accent)}

/* reCAPTCHA attribution, shown in place of the hidden badge */
.recaptcha-notice{margin-top:24px;font-size:11px;line-height:1.8;
  color:var(--ink-low);letter-spacing:0.02em;}
.recaptcha-notice a{color:var(--ink-dim);text-decoration:underline;
  text-underline-offset:3px;transition:color .3s;}
.recaptcha-notice a:hover{color:var(--accent)}

/* Setup notice / fallback */
.form-notice{border:1px dashed var(--line-str);padding:28px 32px;
  font-size:14px;color:var(--ink-dim);line-height:1.9;}
.form-notice ul{margin:12px 0 0 20px}
.form-notice strong{color:var(--ink)}
.form-notice .sub{margin-top:14px;font-size:11px;color:var(--ink-low)}

@media(max-width:900px){
  .contact-form input[type="submit"],
  .contact-form .wpcf7-submit{width:100%;padding:20px}
}


/* ==========================================================================
   8. THEME ADDITIONS
   ========================================================================== */

/* Real images inside the placeholder-styled image slots.
   Every slot keeps its bracketed data-label until an image is set. */
.work-thumb,.thumb,.ph{overflow:hidden;position:relative}

/* The slots are flex containers — they centre the placeholder label — so an
   image left in the flex flow gets shrunk below the slot width whenever its
   aspect ratio is wider than the slot. Taking it out of flow avoids that. */
.work-thumb img,.thumb img,.ph img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;z-index:1;
}

/* Hide only the bracketed label, never the hover overlays that share a slot.
   The page-scoped rules that set the label are more specific, hence
   !important rather than repeating a long selector for every variant. */
.work-thumb.has-image::after,
.thumb.has-image::before,
.ph.has-image::after{content:none!important}

/* Blocks are ordered freely in the editor, so restore the breathing room the
   static design added by hand after a full-bleed image. */
body.blok-work .block-full + .block-wide,
body.blok-work .block-full + .block-split-2,
body.blok-work .block-full + .block-split-3{padding-top:100px}
@media(max-width:900px){
  body.blok-work .block-full + .block-wide,
  body.blok-work .block-full + .block-split-2,
  body.blok-work .block-full + .block-split-3{padding-top:60px}
}

/* WordPress admin bar offset */
body.admin-bar .brand{top:56px}
body.admin-bar nav{top:56px}
@media(max-width:900px){
  body.admin-bar .brand{top:64px}
  body.admin-bar nav{top:60px}
}

/* Work detail — the three-line summary above the hero image */
body.blok-work .work-summary{padding:0 80px 60px;max-width:1000px}
body.blok-work .work-summary .row{display:grid;grid-template-columns:120px 1fr;gap:28px;
  padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline;}
body.blok-work .work-summary .row:first-child{border-top:1px solid var(--line)}
body.blok-work .work-summary .k{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.12em;}
body.blok-work .work-summary .v{color:var(--ink);font-size:15px;line-height:1.8}
@media(max-width:900px){
  body.blok-work .work-summary{padding:0 24px 40px}
  body.blok-work .work-summary .row{grid-template-columns:1fr;gap:6px;padding:14px 0}
}

/* Scroll reveal. The hidden state is only applied once main.js has confirmed
   it can reveal again, so a JS failure never leaves the page blank. */
body.js-reveal .reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);}
body.js-reveal .reveal.is-visible{opacity:1;transform:none}

/* Anchor targets must clear the fixed brand and nav */
:target{scroll-margin-top:96px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sec-hero .scanline{animation:none;opacity:0}
}

/* Screen-reader text (WP standard) */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;
  position:absolute!important;word-wrap:normal!important;
}
.skip-link:focus{
  position:fixed!important;top:12px;left:12px;z-index:9999;
  clip:auto;clip-path:none;width:auto;height:auto;
  background:var(--accent);color:var(--bg);padding:12px 20px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.15em;
}