:root{
    --turquoise:#30D5C8;
    --turquoise-dark:#0A3330;
    --turquoise-tint:#F0FFFE;
    --orange:#FF5C1A;
    --orange-dark:#CC3300;
    --ink:#111111;
    --white:#FFFFFF;
    --grey:#6E6E6E;
    --grey-line:#eeeeee;
    --container:min(92vw, 1720px);
    --gutter:clamp(20px,3vw,56px);
  }

  /* Unified page grid: every section aligns to this container */
  .container{
    max-width:var(--container); margin-left:auto; margin-right:auto;
    padding-left:var(--gutter); padding-right:var(--gutter);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  /* width/height attributes reserve space against layout shift;
     CSS keeps control of the actual rendered ratio */
  img[width][height]{height:auto;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;
    background:var(--white);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;}
  a{color:inherit;}

  [data-lang-block]{display:none;}
  [data-lang-block].active{display:block;}
  span[data-lang-block]{display:none;}
  span[data-lang-block].active{display:inline;}

  /* ===== NAV ===== */
  .nav{
    position:sticky; top:0; z-index:50;
    background:var(--ink); color:var(--white);
    padding:18px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
    display:flex; justify-content:space-between; align-items:center;
    border-bottom:1.5px solid var(--turquoise);
  }
  .nav-mark{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;}
  .nav-mark:hover .wordmark{color:var(--turquoise);}
  .nav-mark:hover .wordmark span{color:var(--white);}
  .nav-case{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; color:rgba(255,255,255,0.55); margin-left:20px;
  }
  @media (max-width:720px){ .nav-case{display:none;} }
  .nav-mark img{height:22px; width:auto; display:block;}
  .nav-mark .wordmark{font-size:17px; font-weight:300; letter-spacing:0.14em;}
  .nav-mark .wordmark span{color:var(--turquoise);}
  .nav-right{display:flex; align-items:center; gap:16px;}
  .nav-cta{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em;
    text-transform:uppercase; background:var(--orange); color:var(--white);
    padding:8px 18px; text-decoration:none; white-space:nowrap;
  }
  .nav-cta:hover{background:var(--orange-dark);}
  .lang-toggle{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em;
    display:flex; gap:2px; border:1px solid rgba(255,255,255,0.5);
  }
  .lang-toggle button{
    background:none; border:none; color:rgba(255,255,255,0.5);
    padding:6px 14px; cursor:pointer; font-family:inherit; font-size:inherit; letter-spacing:inherit;
  }
  .lang-toggle button.active{background:var(--ink); color:var(--turquoise); font-weight:700; box-shadow:inset 0 0 0 1.5px var(--turquoise);}
  @media (max-width:640px){
    .nav-cta{padding:8px 12px; font-size:10px;}
    .nav{padding:14px 4vw;}
    .nav-mark .wordmark{font-size:14px;}
  }

  /* ===== HERO ===== */
  .hero{
    padding:70px 5vw 14vh;
    max-width:1100px;
  }
  .hero-eyebrow{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em;
    text-transform:uppercase; color:var(--grey); margin-bottom:24px;
  }
  .hero h1{
    font-size:clamp(32px, 5.5vw, 66px);
    font-weight:300; letter-spacing:0.05em; line-height:1.3;
    text-transform:uppercase;
    margin-top:0; margin-bottom:32px;
  }
  .hero h1 em{font-style:italic; font-weight:300; color:var(--turquoise-dark); background:var(--turquoise); padding:4px 8px; display:inline-block;}
  .hero p{
    font-size:clamp(16px,2vw,20px); color:#444; max-width:640px; line-height:1.55;
  }
  .hero-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:32px;}
  .tag{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:11px; letter-spacing:0.06em;
    border:1px solid var(--ink); padding:5px 12px;
  }
  .tag-more{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:11px; letter-spacing:0.06em;
    border:none; color:var(--grey); padding:5px 4px;
  }

  /* ===== SECTION LABEL ===== */
  .section-eyebrow{
    display:block;
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--ink);
    margin:0 0 14px;
    padding:0 max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  }

  /* ===== CASE CARD ===== */
  .case{
    margin:0 auto 6vh; max-width:min(92vw, 1720px); padding:0 var(--gutter);
  }
  .case-head{
    padding:16px 24px; background:var(--turquoise);
    display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px;
  }
  .case-head .tagno{font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:11px; font-weight:700; letter-spacing:0.03em; color:var(--turquoise-dark); margin-bottom:4px;}
  .case-head h2{font-size:clamp(22px,3.2vw,34px); font-weight:600; letter-spacing:-0.01em; color:var(--ink); line-height:1;}
  .case-head-tags{display:flex; gap:8px; flex-wrap:wrap;}
  .case-head-tags > span{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:11px; letter-spacing:0.06em;
    border:1px solid var(--ink); color:var(--ink); padding:4px 11px;
  }
  .case-divider{height:4px; background:var(--orange);}
  .case-body{padding:40px;}
  .case-logline{font-size:17px; font-style:normal; color:#444; line-height:1.6; margin-bottom:20px; padding-bottom:28px; border-bottom:1px solid var(--grey-line);}

  .case-sec{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em;
    text-transform:uppercase; color:var(--ink); margin:36px 0 14px;
  }
  .case-sec:first-child{margin-top:0;}
  .fmt-list{border:1px solid var(--grey-line); margin-bottom:8px;}
  .fmt-row{display:flex; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--grey-line); font-size:15px;}
  .fmt-row:last-child{border-bottom:none;}
  .fmt-row .k{font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--grey); flex-shrink:0;}
  .fmt-row .v{color:#333; text-align:right;}
  .ref-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; margin-bottom:24px;
    margin-left:calc(var(--rail) + 32px);}
  .ref-card{background:var(--white); padding:0; border-top:2px solid var(--turquoise); padding-top:16px;}
  .ref-card .rk{font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--grey); margin-bottom:6px;}
  .ref-card .rn{font-size:14px; font-weight:600; margin-bottom:8px;}
  .ref-card .rd{font-size:14px; color:#444; line-height:1.55;}
  .ref-diff{padding-top:16px; margin-bottom:32px; border-top:2px solid var(--turquoise);
    margin-left:calc(var(--rail) + 32px);}
  .ref-diff .rk{font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--grey); margin-bottom:6px;}
  .ref-diff .rd{font-size:15px; line-height:1.65; color:#444; font-weight:400;}
  .tagline-block{padding:6px 0 6px 22px; margin:4px 0 36px calc(var(--rail) + 32px); border-left:4px solid var(--turquoise);}
  .tagline-block .rk{font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--orange); margin-bottom:8px;}
  .tagline-block .tl{font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:clamp(20px,2.1vw,27px); font-weight:600; line-height:1.3; color:var(--ink);}
  @media (max-width:720px){.ref-grid{grid-template-columns:1fr;} .fmt-row{flex-direction:column; gap:2px;} .fmt-row .v{text-align:left;}}

  .brief-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:24px 48px; margin-bottom:40px;
    margin-left:calc(var(--rail) + 32px);
  }
  .brief-grid:has(> .brief-block.wide:only-child){grid-template-columns:1fr;}
  /* Variant A: label rail + text column */
  .case-body{--rail:220px; --measure:720px;}
  .case-sec{
    margin-left:0;
  }

  .ref-card .rn{margin-bottom:6px;}
  .ref-card .rk{margin-bottom:6px;}
  .brief-grid .brief-block .bl{grid-column:1; margin-bottom:10px;}
  .brief-grid .brief-block p{grid-column:1;}
  .brief-block.wide{grid-column:1/-1;}
  .brief-block.wide p{max-width:var(--measure);}
  @media (max-width:960px){
    .brief-grid, .ref-grid, .ref-diff, .tagline-block{margin-left:0;}
  }
  .brief-block{background:var(--white); padding:0; border-top:2px solid var(--turquoise); padding-top:16px;}
  .brief-block .bl{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em;
    text-transform:uppercase; color:var(--grey); margin-bottom:10px;
  }
  .brief-block p{font-size:16px; line-height:1.6; color:#2A2A2A;}
  .brief-block.wide{grid-column:1/-1;}

  .storyboard-wrap{margin-bottom:40px; background:var(--ink); padding:14px;}
  .storyboard-wrap img{width:100%; display:block; border:none;}
  .storyboard-zoom{cursor:zoom-in;}
  .lightbox{
    display:none; position:fixed; inset:0; z-index:1000;
    background:rgba(10,10,10,0.92);
    overflow:auto; text-align:center;
    padding:40px 20px;
  }
  .lightbox.open{display:block;}
  .lightbox img{width:auto; height:auto; max-width:none; border:none; cursor:zoom-out;}
  .lightbox-close{
    position:fixed; top:20px; right:28px; z-index:1001;
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,0.1); color:#fff;
    border:1px solid rgba(255,255,255,0.3);
    font-size:20px; line-height:1; cursor:pointer;
  }
  .lightbox-close:hover{background:rgba(255,255,255,0.2);}
  .storyboard-cap{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; color:rgba(255,255,255,0.55);
    letter-spacing:0.03em; margin-top:12px;
  }

  .script-toggle{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; letter-spacing:0.03em; font-weight:700;
    text-transform:uppercase; background:var(--ink); color:var(--white);
    border:none; border-left:4px solid var(--turquoise);
    padding:12px 20px; cursor:pointer; width:100%;
    text-align:left; display:flex; justify-content:space-between; align-items:center;
  }
  .script-toggle:hover{background:var(--orange-dark);}
  .script-toggle .toggle-arrow{font-size:24px; font-weight:300; line-height:1; color:var(--turquoise);}
  .storyboard-toggle{
    background:var(--ink); color:var(--white); padding:12px 20px;
    border-left:4px solid var(--turquoise); margin-bottom:20px;
  }
  .storyboard-toggle:hover{background:var(--orange-dark);}
  #storyboardPanel.open, #storyboardPanel2.open, #storyboardPanel3.open{margin-top:-20px;}
  .storyboard-toggle .toggle-arrow{color:var(--turquoise); font-size:24px; font-weight:300; line-height:1;}
  .script-panel{display:none; margin-top:1px;}
  .script-panel.open{display:block;}
  .script-meta{
    padding:18px 24px; background:var(--turquoise-tint); font-size:13.5px; color:#333; line-height:1.6;
    border:1px solid var(--grey-line); border-bottom:none;
  }
  .script-meta .bl{font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--turquoise-dark); margin-bottom:6px;}
  table.script{width:100%; border-collapse:collapse; font-size:13px;}
  table.script th{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
    background:var(--ink); color:var(--white); padding:10px 16px; text-align:left;
  }
  table.script td{padding:12px 16px; border-bottom:1px solid var(--grey-line); vertical-align:top; line-height:1.5;}
  table.script td.video{width:60%; color:#222;}
  table.script td.audio{width:40%; color:#666; font-size:12.5px;}
  table.script tr.act td{
    background:var(--ink); color:var(--turquoise);
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:11px; letter-spacing:0.08em; font-weight:700;
    padding:9px 16px;
  }

  .case-foot{
    padding:14px 0 0; margin-top:8px; border-top:1px solid var(--grey-line); display:flex; justify-content:space-between; align-items:center;
  }
  .case-foot .fl{font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--grey);}
  .case-foot .fv{font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px; font-weight:600; color:var(--ink);}

  /* ===== PLACEHOLDER CASES ===== */

  /* ===== ABOUT ===== */
  .post-case-cta{
    background:var(--ink); padding:60px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); text-align:center; margin-bottom:0;
  }
  .post-case-cta h3{
    color:var(--white); font-size:clamp(24px,4vw,38px); font-weight:500; letter-spacing:-0.01em;
    max-width:700px; margin:0 auto 28px;
  }
  .post-case-cta a{
    display:inline-block; font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px; font-weight:700;
    letter-spacing:0.03em; text-transform:uppercase; background:var(--orange); color:var(--white);
    padding:16px 36px; text-decoration:none;
  }
  .post-case-cta a:hover{background:var(--orange-dark);}

  .case-tabs{
    display:flex; gap:2px; margin:0 5vw 24px; border-bottom:2px solid var(--grey-line);
    position:sticky; top:67px; z-index:40; background:var(--white);
  }
  .case-tab{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px; font-weight:700; letter-spacing:0.02em;
    background:none; border:none; padding:14px 22px; cursor:pointer; color:var(--grey);
    border-bottom:3px solid transparent; margin-bottom:-2px; text-transform:uppercase;
  }
  .case-tab.active{color:var(--ink); border-bottom-color:var(--turquoise);}
  .case-tab:hover:not(.active){color:var(--ink);}
  .case-panel{display:none;}
  .case-panel.active{display:block;}
  @media (max-width:640px){
    .case-tab{padding:12px 14px; font-size:12px;}
  }

  .about{padding:56px var(--gutter) 90px; max-width:min(92vw, 1720px); margin:0 auto; border-top:1px solid var(--grey-line);}
  .about p{font-size:16px; line-height:1.7; color:#333; margin-bottom:16px;}
  .about-meta{font-size:16px; color:#333; margin-bottom:16px;}
  .about-links{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:24px;}
  .about-links a{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px; font-weight:700; letter-spacing:0.03em;
    color:var(--ink); border-bottom:1.5px solid var(--turquoise); padding-bottom:2px;
  }
  .about-links a:hover{color:var(--turquoise-dark);}
  .about-layout{display:grid; grid-template-columns:260px minmax(0, 720px); gap:56px; align-items:start;}
  .about-left{display:flex; flex-direction:column;}
  .about-photo{
    width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
    border-radius:50%; border:1px solid var(--grey-line);
  }
  .about-text{min-width:0;}
  .about-film{margin-top:8px; max-width:100%;}
  .film-frame{position:relative; display:block; line-height:0;}
  .about-film video{width:100%; display:block; aspect-ratio:16/9; border:none; background:#000;}
  .film-play{
    position:absolute; inset:0; margin:auto; width:64px; height:64px;
    background:var(--ink); border:none; cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center;
  }
  .film-play::after{
    content:''; width:0; height:0; margin-left:4px;
    border-left:18px solid #FFFFFF; border-top:12px solid transparent; border-bottom:12px solid transparent;
  }
  .film-play:hover{background:var(--orange);}
  .film-frame.playing .film-play{display:none;}
  .about-film-cap{
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; color:var(--grey);
    letter-spacing:0.03em; margin-top:10px;
  }
  @media (max-width:720px){
    .about-layout{grid-template-columns:1fr; gap:24px;}
    .about-photo{width:140px; height:140px; aspect-ratio:auto;}
  }

  /* ===== FOOTER ===== */
  footer{
    background:var(--ink); color:rgba(255,255,255,0.85);
    padding:22px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); display:flex; justify-content:space-between; align-items:center;
    font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; flex-wrap:wrap; gap:10px;
  }
  footer .yr{color:var(--turquoise);}

  @media (max-width:640px){
    .case-body{padding:24px;}
    .case-head{padding:24px;}
    .brief-grid{grid-template-columns:1fr;}
    table.script td.video, table.script td.audio{display:block; width:100%;}
  }

/* ===== Case page navigation (multi-page architecture) ===== */
.back-to-grid{
  display:block; max-width:min(92vw, 1720px); margin:24px auto 0; padding:0 var(--gutter); font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px;
  font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink);
}
.back-to-grid:hover{color:var(--ink);}
.case-pagenav{
  display:flex; justify-content:space-between; align-items:center;
  max-width:min(92vw, 1720px); margin:0 auto 5vh; padding:20px var(--gutter) 0; border-top:1px solid var(--grey-line);
}
.case-pagenav a{
  font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--ink); display:flex; flex-direction:column; gap:4px;
}
.case-pagenav a:hover{color:var(--turquoise-dark);}
.case-pagenav .dir{font-size:11px; color:var(--grey); text-transform:uppercase; letter-spacing:0.06em; font-weight:700;}
.case-pagenav .next{text-align:right; align-items:flex-end;}

/* ===== Homepage: hero variant A (two-column with image) ===== */
.hero-c{
  padding:8vh var(--gutter) 6vh; max-width:var(--container); margin:0 auto;
}
.hero-c h1{
  font-size:clamp(32px,4.4vw,58px);
  font-weight:300; letter-spacing:0.04em; line-height:1.18;
  text-transform:uppercase; margin:0 0 26px;
}
.hero-c h1 em{
  font-style:italic; font-weight:300; color:var(--turquoise-dark);
  background:var(--turquoise); padding:2px 10px; display:inline-block;
}
.hero-c p{font-size:clamp(16px,1.5vw,20px); color:#444; line-height:1.55;}
.hero-c .hero-sub{margin-top:12px; color:#888; font-size:15px;}
.hero-cats{margin-top:22px; font-size:15px; color:var(--grey); letter-spacing:0.01em;}
@media (max-width:900px){
  .hero-c{padding:6vh var(--gutter) 5vh;}
}

/* ===== Homepage: work grid ===== */
.work-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:32px;
  padding:0 var(--gutter) 72px; max-width:var(--container); margin:0 auto;
}
.work-card{display:block; color:var(--ink); position:relative; text-decoration:none;}
.work-card h3, .work-card p, .work-card div{text-decoration:none;}
.work-card-media{overflow:hidden; background:var(--ink);}
.work-card-media img{
  width:100%; display:block; aspect-ratio:16/9; object-fit:cover;
  transition:transform .4s ease;
}
.work-card:hover .work-card-media img{transform:scale(1.04); opacity:0.82;}
.work-card h3::after{content:' \2192'; opacity:0; transition:opacity .25s ease, transform .25s ease; display:inline-block;}
.work-card:hover h3::after{opacity:1; transform:translateX(3px);}
.work-card-mech{min-height:3.2em;}
.work-card-body{display:flex; flex-direction:column;}
.work-card-tags{margin-top:auto;}
.work-card-body{padding-top:14px;}
.work-card-no{
  font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:11px; font-weight:700; letter-spacing:0.06em;
  color:var(--grey); margin-bottom:6px;
}
.work-card h3{
  font-size:22px; font-weight:600; letter-spacing:-0.01em; margin-bottom:8px;
  display:inline-block; align-self:flex-start; background:var(--turquoise); padding:1px 8px;
}
.work-card-mech{font-size:15px; line-height:1.5; color:#444; margin-bottom:10px;}
.work-card-tags{display:flex; gap:6px; flex-wrap:wrap;}
.work-card-tags > span{
  font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:11px; letter-spacing:0.06em;
  border:1px solid var(--ink); color:var(--ink); padding:4px 11px;
}