@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  --black:#0d0d0d;
  --ink:#161616;
  --paper:#eeeeee;
  --line:#d4d4d4;
  --muted:#5a5a5a;
  --accent:#000000;
  --accent-soft:#8c8c8c;
  --white:#ffffff;
  --marker:#fff53d;
  --maxw:1140px;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;font-size:17px;}

body{
  font-family:'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.85;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}

img{max-width:100%;display:block;}

.serif{font-family:'Cormorant Garamond', serif;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* Preloader */
#preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .9s cubic-bezier(.16,.84,.44,1);
}
#preloader.is-hidden{
  opacity:0;
  pointer-events:none;
}
.preloader-inner{
  display:flex;
  align-items:center;
  gap:14px;
}
.preloader-logo{
  height:84px;
  width:auto;
  display:block;
  transition:transform .9s cubic-bezier(.16,.84,.44,1);
  transform:scale(1);
}
#preloader.is-hidden .preloader-logo{
  transform:scale(1.3);
}
.preloader-pct{
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:13px;
  color:var(--muted);
  min-width:36px;
  transition:opacity .4s ease;
}
#preloader.is-hidden .preloader-pct{
  opacity:0;
}

/* Hero text reveal — scoped to the homepage hero only (.hero-animated),
   so other pages that reuse .hero (contact, works/shiziki, etc.) render
   their text normally instead of waiting for a reveal that never fires. */
.hero.hero-animated .eyebrow,
.hero.hero-animated p{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease;
}
.hero.hero-animated.is-revealed .eyebrow{
  opacity:1;
  transform:translateY(0);
  transition-delay:0s;
}
.hero.hero-animated.is-revealed p{
  opacity:1;
  transform:translateY(0);
  transition-delay:1.1s;
}
/* Pages without the h1 character-by-character animation (contact.html)
   don't need to wait for it — show the paragraph much sooner. */
.hero.hero-animated.hero-simple.is-revealed p{
  transition-delay:.3s;
}
.hero.hero-animated h1 .ch{
  display:inline-block;
  opacity:0;
  animation:chIn .4s ease forwards;
  animation-play-state:paused;
}
.hero.hero-animated.is-revealed h1 .ch{
  animation-play-state:running;
}

/* Profile page (works/shiziki.html) — same soft fade-up, staggered
   role label -> name -> English name. */
.hero.hero-animated .profile-role,
.hero.hero-animated .profile-title h1,
.hero.hero-animated .profile-title .en-name{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease;
}
.hero.hero-animated.is-revealed .profile-role{
  opacity:1;
  transform:translateY(0);
  transition-delay:0s;
}
.hero.hero-animated.is-revealed .profile-title h1{
  opacity:1;
  transform:translateY(0);
  transition-delay:.15s;
}
.hero.hero-animated.is-revealed .profile-title .en-name{
  opacity:1;
  transform:translateY(0);
  transition-delay:.3s;
}

/* Panel pages (About / Recruit / Award) — same soft fade-up on load. */
.panel-page.page-animated{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s ease, transform .7s ease;
}
.panel-page.page-animated.is-revealed{
  opacity:1;
  transform:translateY(0);
}

/* Section headings that fade up the moment they scroll into view (or are
   already in view right when the page settles, e.g. landing straight on
   #member from another page) — same soft-fade language as the rest of
   the site's text reveals, just triggered by visibility instead of load. */
.reveal-on-scroll h2{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal-on-scroll.is-revealed h2{
  opacity:1;
  transform:translateY(0);
}

@keyframes chIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;
  min-height:64px;
  z-index:100;
  background:rgba(238,238,238,0.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}

.logo{
  display:flex;
  align-items:center;
  height:100%;
}
.logo-img{
  height:54px;
  max-height:54px;
  width:auto;
  display:block;
  align-self:center;
}

.nav-toggle{display:none;}

.main-nav ul{
  display:flex;
  align-items:center;
  gap:26px;
  list-style:none;
}

.main-nav a{
  display:inline-block;
  font-size:11px;
  font-weight:500;
  line-height:1;
  letter-spacing:0.12em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:4px;
}

.main-nav a::after{
  content:'';
  position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--accent);
  transition:width .3s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after{width:100%;}

.main-nav a.active{color:var(--accent);}

.main-nav .nav-sns a{display:inline-flex;align-items:center;gap:6px;}
.sns-ico{width:15px;height:15px;flex:none;display:block;}


/* Header: "Member" drop-down (mouse devices only) */
.main-nav .has-sub{position:relative;}
.main-nav .sub-nav{
  position:absolute;top:calc(100% + 22px);left:50%;
  transform:translateX(-50%) translateY(-4px);
  display:block;gap:0;
  min-width:168px;padding:6px 0;
  background:rgba(238,238,238,0.97);
  backdrop-filter:blur(6px);
  border:1px solid var(--line);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.main-nav .sub-nav li{display:block;}
.main-nav .sub-nav a{
  display:block;padding:11px 20px;
  font-size:11px;letter-spacing:.12em;white-space:nowrap;
}
.main-nav .sub-nav a::after{display:none;}
/* Heading: only members with works pages are listed here. */
.main-nav .sub-nav .sub-nav-label{
  padding:8px 20px 6px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  margin-bottom:4px;
}
.main-nav .sub-nav .sub-nav-all{
  margin-top:4px;border-top:1px solid var(--line);
}
.main-nav .sub-nav .sub-nav-all a{color:var(--muted);}
.main-nav .sub-nav .sub-nav-all a:hover{color:var(--ink);}
.main-nav .sub-nav a:hover{background:var(--white);}
/* invisible bridge so the pointer can travel from "Member" to the list */
.main-nav .has-sub::after{
  content:'';position:absolute;left:-14px;right:-14px;top:100%;height:26px;
}
@media (hover:hover) and (min-width:861px){
  .main-nav .has-sub:hover .sub-nav,
  .main-nav .has-sub:focus-within .sub-nav{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  }
}
@media (hover:none), (max-width:860px){
  .main-nav .sub-nav,.main-nav .has-sub::after{display:none;}
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:100px 40px 56px;
  border-bottom:1px solid var(--line);
}

.hero > *{position:relative;z-index:1;}

.hero-watermark{
  position:absolute;
  z-index:0;
  top:100px; /* fallback; top edge is aligned to the eyebrow line via JS */
  right:4%;
  width:600px;
  max-width:44vw;
  height:60vh; /* fallback; JS sets an exact px height to fit inside the hero */
  max-height:60vh;
  opacity:0.09;
  filter:grayscale(1);
  pointer-events:none;
}
.hero-watermark img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:top right;
  display:block;
}

@media (max-width:1000px){
  .hero-watermark{width:420px;max-width:52vw;}
}
@media (max-width:700px){
  .hero-watermark{display:none;}
}

.break-lg{display:none;}
@media (min-width:661px){
  .break-lg{display:inline;}
}

.hero .eyebrow{
  font-size:12px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:28px;
}

.hero h1{
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-weight:700;
  font-size:clamp(26px, 3.8vw, 46px);
  line-height:1.45;
  max-width:820px;
  letter-spacing:0.01em;
}

.hero p{
  margin-top:28px;
  max-width:560px;
  color:var(--ink);
  font-size:16px;
  line-height:1.95;
}

/* Contact hero — compact: no min-height, tight padding and line spacing */
.hero.hero-simple{min-height:0;padding:114px 40px 40px;}
.hero.hero-simple .eyebrow{margin-bottom:12px;}
.hero.hero-simple h1{line-height:1.3;}
.hero.hero-simple p:not(.eyebrow){margin-top:14px;line-height:1.7;}

/* Section headings */
.section{
  padding:72px 40px;
  border-bottom:1px solid var(--line);
}

.section-bleed{
  padding:72px 0;
  border-bottom:1px solid var(--line);
}
.section-bleed .wrap{padding:0 40px;}
.section-bleed .section-head{padding:0;}

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:36px;
  flex-wrap:wrap;
  gap:16px;
}

.section-head .num{
  font-family:'Cormorant Garamond', serif;
  font-size:14px;
  color:var(--accent);
  letter-spacing:0.2em;
}

.section-head h2{
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-weight:700;
  font-size:clamp(20px,2.2vw,28px);
  margin-top:8px;
}

.section-head .desc{
  max-width:340px;
  color:var(--muted);
  font-size:14px;
  line-height:1.9;
}

/* Members grid */
/* Offset the anchor target so the fixed header never covers the heading
   when jumping here from the "Member" nav link. */
#member{scroll-margin-top:90px;}
@media (max-width:860px){
  #member{scroll-margin-top:100px;}
}

.members{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.member{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:12px;
  aspect-ratio:3/2;
  padding:20px 22px 22px;
  background:var(--paper);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.member .role{
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.member .name{
  font-size:17px;
  font-weight:500;
  letter-spacing:0.08em;
}
/* Only members with a page of their own react to the cursor. */
.member.is-link{cursor:pointer;transition:background .3s ease;}
.member.is-link:hover{background:var(--white);}
.member .role{transition:opacity .25s ease, transform .25s ease;}
.member.is-link .works{
  position:absolute;left:22px;top:20px;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink);
  opacity:0;transform:translateY(6px);
  transition:opacity .25s ease .05s, transform .25s ease .05s;
}
.member.is-link:hover .role{opacity:0;transform:translateY(-6px);}
.member.is-link:hover .works{opacity:1;transform:translateY(0);}
/* Touch devices have no hover, so show "View Works" permanently as a third
   line (right-aligned) on the clickable members. All cells get the same
   extra bottom padding so names stay aligned across a row. */
@media (hover:none){
  .member{padding-bottom:42px;min-height:128px;}
  .member.is-link .works{
    right:22px;left:auto;top:auto;bottom:16px;
    opacity:1;transform:none;
    color:var(--muted);
    transition:none;
  }
  .member.is-link:hover .role{opacity:1;transform:none;}
}
@media (max-width:900px){.members{grid-template-columns:repeat(3,minmax(0,1fr));}.member{aspect-ratio:3/2;}}
@media (max-width:560px){.members{grid-template-columns:repeat(2,minmax(0,1fr));}.member{padding:16px;aspect-ratio:auto;min-height:112px;}.member.is-link .works{left:16px;top:16px;}}
@media (hover:none) and (max-width:560px){.member{padding-bottom:38px;min-height:128px;}.member.is-link .works{left:auto;top:auto;right:16px;bottom:13px;}}

/* Topic / news list */
.news-list{border-top:1px solid var(--line);}

.news-item{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:28px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}

.news-item time{
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.05em;
}

.news-item .title{font-size:15px;margin-bottom:8px;}
.news-item a{color:var(--accent);font-size:14px;font-weight:500;}
.news-item a:hover{text-decoration:underline;}

/* CTA band */
.cta{
  padding:72px 40px;
  text-align:center;
  background:var(--ink);
  color:var(--paper);
}

.cta h2{
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-weight:700;
  font-size:clamp(20px,2.4vw,28px);
  margin-bottom:24px;
}

.cta p{color:#b8b8b8;margin-bottom:36px;font-size:14px;}

.btn{
  display:inline-block;
  padding:15px 44px;
  border:1px solid var(--paper);
  font-size:12px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  transition:all .3s ease;
}

.btn:hover{background:var(--paper);color:var(--ink);}

.btn-dark{border-color:var(--ink);color:var(--ink);}
.btn-dark:hover{background:var(--ink);color:var(--paper);}

/* Table */
.info-table{width:100%;border-collapse:collapse;font-size:15px;}
.info-table th,.info-table td{
  text-align:left;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.info-table th{
  width:180px;
  color:var(--muted);
  font-weight:500;
  letter-spacing:0.08em;
  font-size:13px;
  text-transform:uppercase;
}

/* History */
.history p{margin-bottom:18px;color:var(--ink);font-size:15px;max-width:680px;}

/* Map */
.map-frame{
  border:1px solid var(--line);
  margin-top:20px;
}
.map-frame iframe{width:100%;height:360px;border:0;display:block;}
/* In the two-column layout, let the map fill the whole column height
   so the frame doesn't leave an empty strip under the map. */
.split-cols .map-frame{display:flex;}
.split-cols .map-frame iframe{flex:1;height:auto;min-height:360px;}
@media (max-width:860px){
  .split-cols .map-frame iframe{height:320px;flex:none;}
}

/* Award list */
.award-list{list-style:none;}
.award-list li{
  padding:22px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:baseline;
  gap:20px;
  font-size:15px;
}
.award-list li .yr{
  font-family:'Cormorant Garamond', serif;
  color:var(--accent);
  font-size:16px;
  width:70px;
  flex-shrink:0;
}

/* Contact — single column: form first, direct-contact details below. */
.contact-grid{
  display:flex;
  flex-direction:column;
  gap:56px;
  max-width:720px;
  margin:0 auto;
}

/* Contact page only (the About page reuses .contact-info without the rule). */
.contact-grid .contact-info{
  padding-top:36px;
  border-top:1px solid var(--line);
}
.contact-info dt{
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:22px;
  font-weight:500;
}
.contact-info dt:first-child{margin-top:0;}
.contact-info dd{font-size:16px;margin-top:6px;}
.contact-info .tel-note{display:block;margin-top:4px;font-size:12px;color:var(--muted);letter-spacing:0.04em;}

.form-group{margin-bottom:24px;}
.form-group label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  letter-spacing:0.08em;
  color:var(--ink);
  margin-bottom:8px;
  font-weight:500;
}
.form-group .req{
  font-size:10px;
  letter-spacing:0.08em;
  font-weight:500;
  color:var(--paper);
  background:var(--ink);
  padding:2px 6px;
  line-height:1.4;
}
.form-group input,
.form-group textarea{
  width:100%;
  border:1px solid #b9b9b9;
  border-radius:3px;
  background:var(--white);
  padding:13px 14px;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-group input:hover,
.form-group textarea:hover{border-color:#8a8a8a;}
.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(0,0,0,0.08);
}
.form-group textarea{resize:vertical;min-height:160px;line-height:1.7;}

.submit-btn{
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  padding:16px 56px;
  font-size:13px;
  letter-spacing:0.15em;
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.submit-btn:hover{background:transparent;color:var(--ink);}

/* Footer — copyright only (the fixed header already carries the nav and SNS links). */
.site-footer{
  padding:36px 40px;
  text-align:center;
}
.site-footer .copyright{
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.04em;
}

/* Profile hero (works pages) */
.profile-hero{
  display:flex;
  gap:48px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.profile-photo{
  width:180px;height:220px;
  background:linear-gradient(135deg,#3a3a3a,#161616);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#d4d4d4;
  font-family:'Cormorant Garamond', serif;
  font-size:44px;
  overflow:hidden;
}
.profile-photo img{
  width:100%;height:100%;
  object-fit:cover;
}
.profile-role{
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}
.profile-title h1{
  font-size:clamp(14px, 1.9vw, 23px); /* ~50% of the default .hero h1 size */
  margin-bottom:6px;
}
.profile-title .en-name{
  font-size:13px;
  letter-spacing:0.1em;
  color:var(--muted);
}

/* Staff switcher (works pages)
   Fixed directly under the fixed header (--hh is set by JS from the header height). */
.staff-switch{
  position:fixed;left:0;right:0;top:var(--hh,64px);
  z-index:90;
  padding:0 40px;
  background:rgba(238,238,238,0.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
/* make room: header + bar (~46px) + original gap */
body:has(.staff-switch) .hero{padding-top:calc(var(--hh,64px) + 90px) !important;}
.staff-switch ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
}
.staff-switch li{min-width:0;}
.staff-switch a,
.staff-switch span{
  display:block;
  padding:14px 4px 12px;
  text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:12px;letter-spacing:.12em;
  color:var(--muted);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.staff-switch a{color:var(--ink);transition:color .2s ease,border-color .2s ease;}
.staff-switch a:hover{border-bottom-color:var(--muted);}
.staff-switch .is-current{color:var(--ink);font-weight:700;border-bottom-color:var(--ink);}
.staff-switch .is-soon{opacity:.45;cursor:default;}
@media (max-width:640px){
  .staff-switch{padding:0 8px;}
  .staff-switch a,.staff-switch span{padding:14px 0 12px;font-size:11px;letter-spacing:.04em;}
}

.profile-bio{
  margin-top:14px;
  font-size:13px;
  line-height:1.9;
  letter-spacing:.04em;
  color:var(--muted);
}

/* Works grid */
.works-grid{
  display:grid;
  grid-template-columns:repeat(1,1fr);
  gap:32px 24px;
}
@media (min-width:560px){
  .works-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:900px){
  .works-grid{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1500px){
  .works-grid{grid-template-columns:repeat(4,1fr);}
}
.work-card{background:var(--paper);min-width:0;}
/* Works pages: let the grid keep growing with the window (so cards get
   bigger instead of just leaving wider side margins), up to a sane cap. */
.works-section .wrap{max-width:1800px;}
.work-thumb{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#e2e2e2,#c7c7c7);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  overflow:hidden;
  cursor:pointer;
}
.work-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease, filter .5s ease;
}
.work-thumb:hover img{transform:scale(1.06);filter:grayscale(0.2) brightness(0.9);}

.play-btn{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.8);
  width:56px;height:56px;
  border-radius:50%;
  background:rgba(0,0,0,0.55);
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:background .3s ease, transform .3s ease, opacity .3s ease;
  pointer-events:none;
}
.play-btn::after{
  content:'';
  width:0;height:0;
  margin-left:4px;
  border-style:solid;
  border-width:8px 0 8px 14px;
  border-color:transparent transparent transparent #ffffff;
}
.work-thumb:hover .play-btn{opacity:1;background:rgba(0,0,0,0.8);transform:translate(-50%,-50%) scale(1.08);}

.work-info{padding:12px 0 8px;container-type:inline-size;}
/* Very long titles: shrink to fit the card width on a single line. */
.work-info h3.long{
  font-size:min(16px, calc(var(--fit, 3.3) * 1cqi));
  white-space:nowrap;
  line-height:1.6;
}
.work-info h3{
  font-size:16px;font-weight:700;margin-bottom:0;line-height:1.45;
  white-space:normal;overflow:visible;
}
.work-info h3.long{line-height:1.45;}
/* Title followed by sub / awards / credits: keep them close. */
.work-info h3 + .credit,
.work-info h3 + .sub,
.work-info h3 + .awards{margin-top:-1px;}
.work-info .sub + .credit,
.work-info .sub + .awards{margin-top:-2px;}
.work-info .sub{font-size:13px;font-weight:500;color:#555;line-height:1.6;margin-bottom:4px;}
.work-info .awards{font-size:11px;color:var(--muted);line-height:1.75;margin-bottom:0;letter-spacing:0.02em;}
/* Awards -> credits: only the gap after the last awards line. */
.work-info .awards + .credit{margin-top:2px;}
.work-info .credit{
  font-size:11px;color:var(--muted);
  letter-spacing:0;
  white-space:normal;overflow:visible;
}
/* Keep each credit ("Dir=…", "Pr=…") intact; if the column is too narrow,
   break between credits rather than inside a name. */
.work-info .credit .cr{display:inline-block;white-space:nowrap;}

/* Recent Works — asymmetric two-column masonry (ref: atsushi-takita.com) */
.video-masonry{
  display:flex;
  align-items:flex-start;
  gap:clamp(24px, 4vw, 64px);
  width:100%;
}
.video-col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:clamp(40px, 6vw, 88px);
}
.video-col.-offset{padding-top:clamp(40px, 8vw, 130px);}

.video-tile{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  cursor:pointer;
  background:#000;
  isolation:isolate;
}
.video-tile img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s ease, filter .5s ease;
  filter:grayscale(0.15);
}
.video-tile:hover img{transform:scale(1.05);filter:grayscale(0);}

.tile-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,0);
  transition:background .45s ease;
  display:flex;align-items:center;justify-content:center;
}
.video-tile:hover .tile-overlay{background:rgba(0,0,0,0.5);}

.tile-caption{
  position:absolute;
  left:28px;bottom:24px;
  right:28px;
  color:#fff;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease;
}
.video-tile:hover .tile-caption{opacity:1;transform:translateY(0);}
.tile-caption .client{
  font-size:11px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  opacity:0.75;
  margin-bottom:6px;
}
.tile-caption .title{font-size:16px;font-weight:500;line-height:1.5;}

.tile-play{
  position:relative;
  width:74px;height:74px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transform:scale(0.75);
  transition:opacity .4s ease, transform .4s ease;
}
.video-tile:hover .tile-play{opacity:1;transform:scale(1);}

.tile-play .core{
  position:relative;
  width:14px;height:14px;
  margin-left:3px;
  border-style:solid;
  border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #ffffff;
}

@media (max-width:860px){
  .video-col.-offset{padding-top:0;}
}
@media (max-width:560px){
  .video-masonry{flex-direction:column;gap:32px;}
  .video-col{gap:32px;}
  .video-tile{aspect-ratio:16/11 !important;}
  .tile-caption{left:20px;right:20px;bottom:18px;}
  .tile-caption .title{font-size:14px;}
}

/* Panel pages (About / Recruit / Award) */
.panel-page{
  padding:118px 22px 80px;
}
.panel{
  background:var(--white);
  max-width:1160px;
  margin:0 auto 28px;
  padding:60px 64px;
  border:1px solid var(--line);
}

.panel-title-wrap{text-align:center;margin-bottom:44px;}
.panel-title{
  display:inline-block;
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:0.1em;
}

.panel-figure{width:100%;margin-bottom:44px;overflow:hidden;}
.panel-figure img{width:100%;height:auto;display:block;}

.split-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}

.job-subhead{
  font-size:16px;
  font-weight:700;
  margin-bottom:14px;
}
.page-lede{
  font-size:14px;
  color:var(--muted);
  margin-bottom:30px;
  line-height:1.9;
}

.job-card{
  border:1px solid var(--line);
  padding:32px 36px;
  margin-bottom:30px;
}
.job-card h3{font-size:16px;font-weight:700;margin-bottom:16px;}
.job-card .job-desc{font-size:14px;color:var(--muted);margin-bottom:22px;line-height:1.85;}
.job-row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:20px;
  padding:16px 0;
  border-top:1px dashed var(--line);
}
.job-row:first-of-type{border-top:none;}
.job-row dt{font-size:12px;color:var(--muted);letter-spacing:0.05em;}
.job-row dd{font-size:14px;line-height:1.8;}

.closing-note p{font-size:14px;color:var(--muted);margin-bottom:8px;line-height:1.9;}

.highlight-btn{
  display:inline-block;
  background:var(--ink);
  color:var(--white);
  padding:18px 56px;
  font-size:13px;
  letter-spacing:0.12em;
  text-align:center;
  margin-top:28px;
  transition:background .3s ease;
}
.highlight-btn:hover{background:var(--accent-soft);}

@media (max-width:760px){
  .panel{padding:40px 26px;}
  .split-cols{grid-template-columns:1fr;gap:36px;}
  .job-row{grid-template-columns:100px 1fr;}
}

/* Video lightbox modal */
.video-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(10,10,10,0.72);
  padding:20px;
}
.video-modal.is-open{display:flex;}
.video-modal .modal-inner{
  position:relative;
  /* As wide as the window allows, but never taller than the viewport
     (16:9 player + room for the close button above it). */
  width:min(100%, 1500px, calc((100vh - 100px) * 16 / 9));
}
.video-modal .modal-frame{
  position:relative;
  width:100%;
  padding-top:56.25%;
  background:#000;
}
.video-modal .modal-frame iframe{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  border:0;
  background:#000;
}
/* Small spinner over the black stage until the player has loaded.
   The iframe itself is never hidden, so video/audio start together. */
.video-modal .modal-frame::before{
  content:'';
  position:absolute;top:50%;left:50%;z-index:1;
  width:28px;height:28px;margin:-14px 0 0 -14px;
  border:2px solid rgba(255,255,255,0.25);
  border-top-color:rgba(255,255,255,0.9);
  border-radius:50%;
  pointer-events:none;
  animation:modalSpin .8s linear infinite;
}
.video-modal .modal-frame.is-ready::before{display:none;}
@keyframes modalSpin{to{transform:rotate(360deg);}}
.video-modal .modal-close{
  position:absolute;
  top:-44px;right:0;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  background:none;
  border:none;
  font-family:inherit;
}
.video-modal .modal-close:hover{color:var(--accent-soft);}

/* Responsive */
@media (max-width:860px){
  .site-header{padding:18px 22px;}
  .main-nav ul{gap:22px;}
  .hero{padding:100px 22px 40px;}
  .hero.hero-simple{padding:100px 22px 32px;}
  .section{padding:56px 22px;}
  .section-bleed{padding:56px 0;}
  .section-bleed .wrap{padding:0 22px;}
  .news-item{grid-template-columns:1fr;gap:6px;}
  .contact-grid{gap:44px;}
  .info-table th{width:120px;}
  .site-footer{padding:30px 22px;}
  /* SNS links collapse to icon-only so the header nav still fits. */
  .main-nav .nav-sns a{font-size:0;gap:0;}
  .sns-ico{width:18px;height:18px;}
  .profile-hero{gap:28px;}
  .profile-photo{width:130px;height:160px;}
}

@media (max-width:640px){
  .site-header{flex-wrap:wrap;padding:10px 16px;row-gap:8px;min-height:0;}
  .logo-img{height:38px;max-height:38px;}
  .main-nav{width:100%;}
  .main-nav ul{justify-content:space-between;gap:8px;}
  .main-nav a{font-size:10px;letter-spacing:0.06em;}
}

/* Yellow marker underline on English headings (as on the current site):
   a highlighter band over the lower part of the text. */
.section-head h2,
.panel-title,
.hero .eyebrow{
  line-height:1.4;
  background:linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 94%, transparent 94%);
}
.hero .eyebrow{
  align-self:flex-start;
  width:fit-content;
  padding:0 .1em;
}
.panel-title{padding:0 .12em;}