.hero{
  position:relative;width:100%;
  min-height:100vh;overflow:hidden;padding-top:64px;padding-bottom:96px;
  background:var(--black,#1c1917);display:flex;align-items:center;
}
.hero-content{position:relative;z-index:2;padding:0 0 0 105px;width:100%}
.eyebrow-row{display:flex;align-items:center;gap:0;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px;line-height:1}
.eyebrow-kanji{font-family:'Noto Serif JP',serif;font-size:12px;font-weight:700;color:var(--red,#ea252c);margin-right:3px}
.eyebrow-sep{color:var(--red,#ea252c);margin-right:5px;font-weight:400;font-size:11px}
.eyebrow-text{color:var(--red,#ea252c);letter-spacing:.14em}
.hero-h1{font-size:clamp(38px,4.2vw,54px);font-weight:900;letter-spacing:-.02em;color:#111;line-height:1;text-transform:uppercase}

/* Subtle grid texture, matches the dark case-card treatment elsewhere on the site */
.cs-hero-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
}
/* Red spotlight glow — full-bleed gradient (no separate sized box), so it fades
   smoothly into the black background with no visible edge/seam */
.cs-hero-spotlight{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 65% 70% at 20% 50%, rgba(234,37,44,.4), rgba(234,37,44,.14) 45%, transparent 75%);
  animation:cs-glow-pulse 6s ease-in-out infinite;
}
@keyframes cs-glow-pulse{0%,100%{opacity:.65}50%{opacity:1}}

/* Pill — "+ Case Studies | Project Chronicles" */
.cs-hero-pill{
  display:inline-flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  padding:20px 36px 20px 24px;border-radius:999px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.cs-hero-plus{font-family:'Poppins',sans-serif;font-size:24px;font-weight:300;color:rgba(255,255,255,.65);line-height:1}
.cs-hero-solid{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(22px,3vw,36px);color:#fff;white-space:nowrap}
.cs-hero-cursor{width:2px;height:clamp(22px,3vw,36px);background:#fff;animation:cs-cursor-blink 1s step-end infinite}
@keyframes cs-cursor-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.cs-hero-fade{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(22px,3vw,36px);color:rgba(255,255,255,.28);white-space:nowrap}
/* TABS — centered pill bar, floated up to overlap the hero's bottom edge */
.tabs-outer{position:relative;z-index:5;margin-top:-72px;padding:0 105px}
.tabs-wrap{
  max-width:1280px;margin:0 auto;
  background:#F5F5F5;border-radius:16px;
  display:flex;align-items:center;
  padding:6px;gap:4px;
  box-shadow:0 24px 48px rgba(0,0,0,.28);
  overflow-x:auto;scrollbar-width:none;
}
.tabs-wrap::-webkit-scrollbar{display:none}
.tab{height:40px;padding:0 20px;background:transparent;border:none;border-radius:10px;font-family:'Inter',sans-serif;font-size:13px;font-weight:400;color:#444;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .2s,color .2s}
.tab:hover:not(.active){background:rgba(0,0,0,.06)}
.tab.active{background:#111;color:#fff;font-weight:500}
@media(max-width:900px){.tabs-outer{padding:0 24px;margin-top:-56px}}

/* PANEL */
.panel{display:none}
.panel.active{display:block}

/* CONTENT WRAPPER — matches the large left margin from design */
.content-wrap{max-width:1280px;margin:0 auto;padding:0 105px}

/* PROJECT BANNER — dark gradient cover card, top of each panel */
.proj-banner-wrap{padding-top:32px}
.proj-banner{
  position:relative;overflow:hidden;
  border-radius:20px;
  padding:40px 44px 32px;
  background:linear-gradient(120deg,#06211d 0%,#0e3d37 48%,#1c6d5f 100%);
}
.proj-banner::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:40px 40px;
}
.proj-banner-inner{position:relative;z-index:1}
.proj-banner-eyebrow{display:flex;align-items:center;gap:0;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1;margin-bottom:18px}
.proj-banner-eyebrow .k{font-family:'Noto Serif JP',serif;font-size:11px;font-weight:700;color:#e30613;margin-right:3px}
.proj-banner-eyebrow .sl{color:#e30613;margin-right:5px;font-weight:400}
.proj-banner-eyebrow .lbl{color:rgba(255,255,255,.55)}
.proj-banner-title{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.01em;color:#fff;line-height:1.3;margin-bottom:16px;max-width:640px}
.proj-banner-desc{font-size:13.5px;font-weight:300;color:rgba(255,255,255,.6);line-height:1.75;max-width:600px;margin-bottom:32px}
.proj-banner-meta{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.proj-banner-meta-extra{margin-top:14px}
.proj-banner-meta-lbl{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.proj-banner-meta-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.9)}
.proj-banner-meta-sep{width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 4px}
.proj-banner.has-image{display:flex;align-items:center;gap:32px;justify-content:space-between}
.proj-banner.has-image .proj-banner-inner{flex:1;min-width:0}
.proj-banner-image{position:relative;z-index:1;flex-shrink:0;width:220px;height:160px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06)}
.proj-banner-image img{width:100%;height:100%;object-fit:cover;display:block}
.proj-banner-image.proj-banner-video iframe,.proj-banner-image.proj-banner-video video{width:100%;height:100%;object-fit:cover;border:0;display:block}
@media(max-width:700px){
  .proj-banner.has-image{flex-direction:column;align-items:stretch}
  .proj-banner-image{width:100%;height:180px}
}
@media(max-width:600px){
  .proj-banner{padding:28px 24px 24px;border-radius:16px}
}

/* FOOTER */
.cs-footer{position:relative;width:100%;background:#fff;overflow:hidden;margin-top:40px}
.cs-footer-img-wrap{position:relative;width:100%;overflow:hidden;line-height:0}
.cs-footer-img{width:100%;height:auto;max-height:520px;object-fit:cover;object-position:center center;display:block}
.cs-footer-bar{text-align:center;padding:20px 0 32px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:300;color:#888;text-transform:uppercase;letter-spacing:.06em}

/* PROBLEM SECTION — 2 col grid, left col floats middle, right starts at top */
.problem-section{padding-top:72px;padding-bottom:80px}
.problem-grid{display:grid;grid-template-columns:280px 1fr;gap:0;align-items:start}
.problem-left{padding-top:160px}/* offset so label aligns to mid-content visually */
.sec-eyebrow{display:flex;align-items:center;gap:0;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1;margin-bottom:10px}
.sec-eyebrow .k{font-family:'Noto Serif JP',serif;font-size:12px;font-weight:700;color:#E30613;margin-right:3px}
.sec-eyebrow .sl{color:#E30613;margin-right:5px;font-weight:400}
.sec-eyebrow .lbl{color:#E30613}
.sec-label{font-size:20px;font-weight:800;letter-spacing:-.02em;color:#111;line-height:1.2}
.prob-h3{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;color:#111;line-height:1.25;margin-bottom:28px}
.prob-p{font-size:15px;font-weight:400;color:#555;line-height:1.85;margin-bottom:18px}
.prob-p:last-child{margin-bottom:0}

/* SECTION BLOCK */
.sec-block{padding-top:0;padding-bottom:80px}
.sec-title{font-size:20px;font-weight:800;letter-spacing:-.02em;color:#111;margin-top:10px;margin-bottom:32px}

/* PROCESS CARDS */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.phase-card{border:1px solid #E2E2E2;border-radius:8px;padding:18px 16px 22px;background:#fff}
.phase-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.phase-num-lbl{font-size:10px;font-weight:400;color:#AAA;letter-spacing:0;line-height:1.4;padding-right:4px}
.phase-kanji{font-family:'Noto Serif JP',serif;font-size:18px;font-weight:700;color:#E30613;flex-shrink:0;margin-top:-2px}
.phase-title{font-size:14px;font-weight:700;color:#111;margin-bottom:8px;letter-spacing:-.01em;line-height:1.3}
.phase-desc{font-size:12px;color:#666;line-height:1.7;margin-bottom:16px}
.phase-bullets{list-style:none}
.phase-bullets li{font-size:11.5px;color:#666;padding-left:14px;position:relative;margin-bottom:4px;line-height:1.6}
.phase-bullets li::before{content:"•";position:absolute;left:0;color:#bbb;font-size:10px;top:1px}

/* RESEARCH SECTION */
.res-intro{font-size:15px;color:#555;line-height:1.85;margin-top:10px;margin-bottom:36px;max-width:700px}

/* DIVIDER */
hr.div{border:none;border-top:1px solid #EBEBEB;margin:0}

/* ══════════ GENERIC CASE-STUDY SECTION (17-part structure) ══════════ */
.cs-section{padding:56px 0}
.cs-section + .cs-section{border-top:1px solid #EBEBEB}
.cs-sec-head{margin-bottom:28px}
.cs-sec-intro{font-size:14px;color:#666;line-height:1.75;max-width:720px;margin:12px 0 4px}

/* generic card grid — competitive analysis, user interviews, analytics plan */
.cs-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:24px}
.cs-info-card{border:1px solid #E2E2E2;border-radius:8px;padding:18px 18px 20px;background:#fff}
.cs-info-card-tag{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E30613;margin-bottom:10px}
.cs-info-card-title{font-size:14px;font-weight:700;color:#111;margin-bottom:8px;line-height:1.35}
.cs-info-card-desc{font-size:12px;color:#666;line-height:1.7}

/* personas */
.cs-personas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}
.cs-persona-card{border:1px solid #E2E2E2;border-radius:10px;padding:20px}
.cs-persona-name{font-size:15px;font-weight:800;color:#111}
.cs-persona-role{font-size:11px;color:#E30613;font-weight:600;letter-spacing:.04em;margin-bottom:12px}
.cs-persona-quote{font-size:12.5px;font-style:italic;color:#555;line-height:1.65;margin-bottom:14px;padding-left:12px;border-left:2px solid #E2E2E2}
.cs-persona-col-title{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#999;margin-bottom:6px;margin-top:12px}
.cs-persona-list{list-style:none}
.cs-persona-list li{font-size:12px;color:#555;padding-left:14px;position:relative;margin-bottom:4px;line-height:1.6}
.cs-persona-list li::before{content:"•";position:absolute;left:0;color:#bbb}

/* metrics */
.cs-metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin-top:24px}
.cs-metric{border-top:2px solid #111;padding-top:12px}
.cs-metric-val{font-size:26px;font-weight:800;color:#E30613;line-height:1}
.cs-metric-lbl{font-size:11px;color:#666;margin-top:6px;line-height:1.5}

/* roadmap */
.cs-roadmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.cs-roadmap-col{background:#FAFAF9;border-radius:10px;padding:18px}
.cs-roadmap-col-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#111;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.cs-roadmap-col-title::before{content:'';width:8px;height:8px;border-radius:50%;background:#E30613}
.cs-roadmap-col:nth-child(2) .cs-roadmap-col-title::before{background:#c8a24a}
.cs-roadmap-col:nth-child(3) .cs-roadmap-col-title::before{background:#999}
.cs-roadmap-list{list-style:none}
.cs-roadmap-list li{font-size:12.5px;color:#444;padding:8px 0;border-top:1px solid #ECECEA;line-height:1.6}
.cs-roadmap-list li:first-child{border-top:none}

/* flow steps */
.cs-flow-grid{display:flex;flex-wrap:wrap;gap:0;margin-top:24px;counter-reset:flowstep}
.cs-flow-step{flex:1 1 160px;padding:16px 16px 16px 0;position:relative}
.cs-flow-step:not(:last-child)::after{content:'→';position:absolute;right:-4px;top:16px;color:#ccc;font-size:16px}
.cs-flow-num{font-size:10px;color:#E30613;font-weight:700;margin-bottom:6px}
.cs-flow-label{font-size:13px;font-weight:700;color:#111;margin-bottom:4px}
.cs-flow-desc{font-size:11.5px;color:#666;line-height:1.6}

/* media (wireframes / design system / hi-fi ui) */
.cs-media-figure{margin-top:24px;border-radius:12px;overflow:hidden;border:1px solid #ECECEA;background:#FAFAF9;position:relative}
.cs-media-figure img{width:100%;display:block}
.cs-media-caption{font-size:11px;color:#999;padding:10px 16px}

/* video embeds (YouTube/Vimeo iframe or direct file <video>) */
.cs-media-figure.cs-media-video{aspect-ratio:16/9;background:#000}
.cs-media-figure.cs-media-video iframe,.cs-media-figure.cs-media-video video{width:100%;height:100%;display:block;border:0}

/* multi-image/video section media — Stacked display mode */
.cs-media-stack{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.cs-media-stack .cs-media-figure{margin-top:0}

/* multi-image/video section media — Carousel display mode */
.cs-media-carousel{position:relative;margin-top:24px;border-radius:12px;overflow:hidden;background:#000}
.cs-media-carousel-track{display:flex;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.cs-media-carousel-slide{flex:0 0 100%;max-width:100%}
.cs-media-carousel-slide .cs-media-figure{margin-top:0;border:0;border-radius:0}
.cs-media-carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.9);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;z-index:2;transition:background .2s;
}
.cs-media-carousel-arrow:hover{background:#fff}
.cs-media-carousel-prev{left:12px}
.cs-media-carousel-next{right:12px}
.cs-media-carousel-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.cs-media-carousel-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:transform .2s,background .2s}
.cs-media-carousel-dot.on{background:#fff;transform:scale(1.3)}

/* paragraph styles (prose / media sections) */
.cs-para-highlight{
  background:#0e0e0e;color:#fff;border-radius:12px;
  padding:24px 26px;margin-top:8px;
}
.cs-para-highlight .prob-p{color:rgba(255,255,255,.82)}
.cs-para-highlight .prob-p:last-child{margin-bottom:0}
.cs-para-quote{
  border-left:3px solid var(--red,#ea252c);
  padding:4px 0 4px 20px;margin-top:8px;
}
.cs-para-quote .prob-p{font-style:italic;color:#4a4640}
.cs-para-quote .prob-p:last-child{margin-bottom:0}

/* fullscreen-enabled images (case-study sections + banner) */
.cs-zoomable{cursor:zoom-in}
.cs-media-figure.has-zoom:hover .cs-zoom-hint,.proj-banner-image:hover .cs-zoom-hint{opacity:1}
.cs-zoom-hint{
  position:absolute;top:12px;right:12px;
  background:rgba(17,17,17,.72);color:#fff;font-size:11px;font-weight:600;
  padding:6px 12px;border-radius:20px;opacity:0;transition:opacity .2s;
  pointer-events:none;
}

/* LIGHTBOX */
.cs-lightbox{
  position:fixed;inset:0;z-index:1000;
  background:rgba(10,10,10,.92);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  padding:40px;opacity:0;visibility:hidden;transition:opacity .25s;
}
.cs-lightbox.open{opacity:1;visibility:visible}
.cs-lightbox-img{max-width:min(92vw,1100px);max-height:80vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.cs-lightbox-caption{color:#ddd;font-size:13px;margin-top:16px;text-align:center;max-width:700px}
.cs-lightbox-close{
  position:absolute;top:24px;right:28px;
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:transparent;color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.cs-lightbox-close:hover{background:rgba(255,255,255,.12)}

/* RESPONSIVE */
@media(max-width:900px){
  .content-wrap{padding:0 24px}
  .problem-grid{grid-template-columns:1fr;gap:32px}
  .problem-left{padding-top:0}
  .phases{grid-template-columns:1fr 1fr}
  .hero-content{padding:0 24px}
  .cs-roadmap-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .phases{grid-template-columns:1fr}
  .cs-hero-pill{padding:16px 22px 16px 18px;gap:10px}
  .cs-flow-step:not(:last-child)::after{display:none}
}
@media(max-width:480px){
  .cs-hero-solid,.cs-hero-fade{font-size:clamp(19px,6.6vw,26px);white-space:normal}
  .cs-hero-cursor{display:none}
  .cs-hero-pill{padding:16px 18px}
}