/* ==========================================================
   ANYA ANYA · Warm Sand · Deep Purple · Ancient Bronze
   Shared stylesheet for all pages
   ========================================================== */

:root{
  /* Token names are kept from the earlier palette so every rule follows the re-skin:
     navy-* = purple, vermillion = bronze, cream = sand, sky-pale = ivory on dark. */
  --sky-pale:#EFE9DD;
  --sky-light:#ECE6D9;
  --sky-mid:#B8A47C;
  --navy:#5B3F7A;
  --navy-deep:#31174C;
  --night:#1F0D33;
  --dustyrose:#9E7A76;
  --rose-ink:#86605C;
  --vermillion:#9A8253;
  --lacquer:#7A653E;
  --accent-ink:#7A653E;
  --terracotta:#C2AB7C;
  --sage:#6E8C74;
  --sage-ink:#4F6F57;
  --cream:#F4F1EA;
  --cream-deep:#EAE4D6;
  --ivory:#F4EFE4;
  --ink:#2B2A28;
  --ink-soft:#3B362D;
  --line:rgba(154,130,83,0.32);
  --line-soft:rgba(154,130,83,0.16);
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Noto Serif', serif;
  font-weight:500;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3,h4{font-family:'Song Myung', serif; font-weight:400; margin:0; letter-spacing:0.01em; color:var(--navy-deep);}
p{margin:0 0 16px;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1;}
.skip-link{position:absolute; left:-9999px; top:8px; background:var(--vermillion); color:#fff; padding:10px 16px; z-index:100;}
.skip-link:focus{left:8px;}
:focus-visible{outline:2px solid var(--vermillion); outline-offset:3px;}

/* ---------- ambient petals ---------- */
.ambient{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.petal{
  position:absolute; top:-6%; width:6px; height:6px; border-radius:50% 0 50% 50%;
  background:var(--dustyrose); opacity:0;
  animation:fall 16s linear infinite;
}
@keyframes fall{
  0%{transform:translateY(0) translateX(0) rotate(0deg); opacity:0;}
  10%{opacity:0.38;}
  90%{opacity:0.28;}
  100%{transform:translateY(112vh) translateX(40px) rotate(220deg); opacity:0;}
}

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:'Song Myung', serif;
  font-size:12px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--accent-ink);
  display:flex; align-items:center; gap:12px;
}
.eyebrow.center{justify-content:center;}
.eyebrow::before,.eyebrow.center::after{content:''; width:18px; height:1px; background:currentColor; opacity:0.5;}
.eyebrow:not(.center)::after{display:none;}
.brush-divider{width:120px; height:14px; margin:0 auto 18px; display:block; opacity:0.85;}
.lede{font-size:17px; color:var(--ink-soft); max-width:560px;}

/* ---------- buttons ---------- */
.btn{
  font-family:'Song Myung', serif; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  padding:12px 26px; border:1px solid var(--vermillion); color:var(--accent-ink);
  display:inline-block; background:transparent; cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover,.btn:focus-visible{background:var(--vermillion); border-color:var(--vermillion); color:var(--ivory);}
.btn-quiet{border-color:var(--line); color:var(--ink-soft);}
.btn-quiet:hover,.btn-quiet:focus-visible{background:transparent; border-color:var(--navy); color:var(--navy);}
.btn-solid{background:var(--vermillion); color:var(--ivory);}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--lacquer); border-color:var(--lacquer);}
.btn-row{display:flex; gap:16px; flex-wrap:wrap;}
.btn-row.center{justify-content:center;}

/* ---------- header / nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,241,234,0.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 32px; max-width:var(--maxw); margin:0 auto;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:32px; width:32px;}
.brand-text{font-family:'Jost', sans-serif; font-weight:500; font-size:14px; letter-spacing:0.24em; text-transform:uppercase; color:var(--navy-deep);}
.brand-text span{color:var(--accent-ink);}
nav.links{display:flex; gap:30px; align-items:center;}
nav.links a{
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
  color:var(--ink-soft); padding:4px 0; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
nav.links a:hover{color:var(--accent-ink);}
nav.links a[aria-current="page"]{color:var(--accent-ink); border-color:var(--vermillion);}
.nav-cta{display:none;}
.menu-toggle{
  display:none; background:none; border:1px solid var(--line); color:var(--navy-deep);
  font-family:'Song Myung', serif; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  padding:9px 14px; cursor:pointer;
}
@media(min-width:1000px){.nav-cta{display:inline-block;}}
@media(max-width:860px){
  .menu-toggle{display:inline-block;}
  nav.links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(244,241,234,0.97); border-bottom:1px solid var(--line); padding:8px 32px 20px;
  }
  nav.links.open{display:flex;}
  nav.links a{width:100%; padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:13px;}
}

/* ---------- seal ---------- */
.seal{
  width:78px; height:78px; margin:0 auto; background:var(--vermillion);
  display:flex; align-items:center; justify-content:center; position:relative;
  clip-path:polygon(6% 2%, 94% 0%, 100% 8%, 98% 92%, 92% 100%, 4% 98%, 0% 92%, 2% 6%);
  filter:drop-shadow(0 12px 22px rgba(140,42,42,0.28));
}
.seal::before{content:''; position:absolute; inset:8px; border:1.5px solid rgba(244,241,234,0.6); border-radius:2px;}
.seal-mark{font-family:'Song Myung', serif; font-size:22px; color:var(--ivory); position:relative; z-index:1;}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:90px 0 60px; text-align:center; position:relative;}
.page-hero h1{font-size:clamp(34px,5vw,54px); line-height:1.25; margin:18px auto 18px; max-width:760px;}
.page-hero .lede{margin:0 auto;}
.breadcrumb{
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;
}
.breadcrumb a:hover{color:var(--accent-ink);}

/* ---------- home hero ---------- */
.hero{position:relative; padding:90px 32px 0; text-align:center; overflow:hidden;}
.hero-grid{max-width:760px; margin:0 auto; position:relative; z-index:2;}
.hero h1{font-size:clamp(34px,5.4vw,58px); line-height:1.25; margin:26px auto 24px;}
.hero h1 em{font-style:normal; color:var(--accent-ink);}
.hero .lede{margin:0 auto 38px;}
.hero{padding-bottom:130px;}
.hero-mark{width:clamp(84px,9vw,104px); height:auto; margin:14px auto 10px; filter:drop-shadow(0 12px 18px rgba(49,23,76,0.14)); animation:mark-float 7s ease-in-out infinite;}
/* a slow drift and turn, with room around the mark so it never crowds the eyebrow */
@keyframes mark-float{0%,100%{transform:translateY(-6px) rotate(-4deg);} 50%{transform:translateY(6px) rotate(4deg);}}

/* ---------- marquee strip ---------- */
.marquee-line{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:20px 0; background:rgba(154,130,83,0.1); position:relative; z-index:1;}
.marquee-inner{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap; align-items:center;
  font-family:'Song Myung', serif; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
}
.marquee-inner .sep{color:var(--accent-ink);}

/* ---------- sections ---------- */
section{padding:110px 0; position:relative;}
section.tight{padding:80px 0;}
section.tint{background:rgba(154,130,83,0.08); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.section-head{max-width:640px; margin:0 auto 64px; text-align:center;}
.section-head h2{font-size:clamp(28px,3.8vw,42px); margin-top:16px;}
.section-head p{color:var(--ink-soft); margin-top:14px;}

/* ---------- scroll cards ---------- */
.service-grid{display:grid; grid-template-columns:1fr; gap:32px;}
@media(min-width:760px){.service-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1080px){.service-grid{grid-template-columns:repeat(4,1fr);}}
.scroll-card{position:relative; padding:18px 0 0; display:flex; flex-direction:column; transition:transform .3s ease;}
.scroll-card:hover{transform:translateY(-4px);}
.roller{height:12px; border-radius:6px; background:linear-gradient(180deg,#C99356,#8A5A2A); box-shadow:0 3px 6px rgba(0,0,0,0.18);}
.scroll-card .panel{
  flex:1; background:linear-gradient(180deg, rgba(255,255,255,0.65), rgba(154,130,83,0.07));
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  padding:34px 24px 26px; text-align:center; display:flex; flex-direction:column; align-items:center;
}
.numeral{font-family:'Song Myung', serif; font-size:12px; letter-spacing:0.18em; color:var(--card-color, var(--vermillion)); margin-bottom:16px;}
.icon{width:30px; height:30px; margin:0 auto 20px; color:var(--card-color, var(--vermillion));}
.scroll-card h3{font-size:19px; margin-bottom:14px;}
.scroll-card p{font-size:14.5px; color:var(--ink-soft); min-height:66px;}
.tag-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:22px;}
.tag{font-size:11px; letter-spacing:0.02em; padding:6px 12px; border:1px solid var(--line); color:var(--ink-soft); background:rgba(255,255,255,0.4);}
.inquire-link{
  font-family:'Song Myung', serif; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--card-color, var(--vermillion)); display:inline-flex; gap:8px; border-bottom:1px solid transparent; margin-top:auto;
}
.inquire-link:hover{border-color:currentColor;}

/* ---------- work cards ---------- */
.work-grid{display:grid; grid-template-columns:1fr; gap:24px;}
@media(min-width:620px){.work-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.work-grid{grid-template-columns:repeat(3,1fr);}}
.work-card{
  position:relative; border:1px solid var(--line); aspect-ratio:4/5; overflow:hidden;
  display:flex; align-items:flex-end; padding:22px;
  background:linear-gradient(160deg, rgba(154,130,83,0.12), rgba(49,23,76,0.16));
  transition:transform .3s ease, border-color .3s ease;
}
.work-card:hover{transform:translateY(-4px); border-color:var(--navy);}
.work-card.t-web{background:linear-gradient(160deg, rgba(49,23,76,0.18), rgba(234,228,214,0.5));}
.work-card.t-video{background:linear-gradient(160deg, rgba(154,130,83,0.16), rgba(244,241,234,0.6));}
.work-card.t-anim{background:linear-gradient(160deg, rgba(110,140,116,0.22), rgba(234,228,214,0.45));}
.work-card.t-illus{background:linear-gradient(160deg, rgba(158,122,118,0.24), rgba(244,241,234,0.6));}
.work-card .ph{position:absolute; top:18px; left:22px; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); opacity:.7;}
.wc-label{
  position:relative; z-index:1; font-family:'Song Myung', serif; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ivory); background:rgba(49,23,76,0.86); padding:9px 13px;
}
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:44px;}
.filter-btn{
  font-family:'Song Myung', serif; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  padding:9px 20px; border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:all .25s ease;
}
.filter-btn:hover{border-color:var(--navy); color:var(--navy);}
.filter-btn[aria-pressed="true"]{background:var(--navy-deep); border-color:var(--navy-deep); color:var(--ivory);}
.work-card[hidden]{display:none;}

/* case study */
.case{display:grid; grid-template-columns:1fr; gap:36px; padding:48px 0; border-top:1px solid var(--line);}
@media(min-width:860px){.case{grid-template-columns:1fr 1.1fr; gap:56px; align-items:center;}}
.case:last-child{border-bottom:1px solid var(--line);}
.case-visual{aspect-ratio:16/10; border:1px solid var(--line); position:relative; background:linear-gradient(135deg, rgba(49,23,76,0.2), rgba(154,130,83,0.12));}
.case-visual span{position:absolute; left:18px; top:16px; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft);}
.case h3{font-size:26px; margin:10px 0 14px;}
.case dl{display:grid; grid-template-columns:90px 1fr; gap:8px 18px; margin:20px 0 0; font-size:14.5px;}
.case dt{font-family:'Song Myung', serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-ink); padding-top:3px;}
.case dd{margin:0; color:var(--ink-soft);}

/* ---------- services detail ---------- */
/* each service is a card; each list inside it is its own panel */
.svc{display:grid; grid-template-columns:1fr; gap:28px; padding:32px 22px; margin-bottom:32px; background:rgba(255,255,255,0.6); border:1px solid var(--line); border-top:4px solid var(--card-color, var(--vermillion)); box-shadow:0 10px 28px rgba(49,23,76,0.06);}
@media(min-width:700px){.svc{padding:44px 40px;}}
@media(min-width:900px){.svc{grid-template-columns:240px 1fr; gap:48px;}}
.svc-side .numeral{margin-bottom:10px; font-size:13px;}
.svc-side h2{font-size:32px; margin-bottom:10px;}
.svc-side .icon{margin:0 0 18px; width:34px; height:34px;}
.svc-body{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:700px){.svc-body{grid-template-columns:1fr 1fr;}}
.svc-body > div{padding:22px 24px; background:var(--cream); border:1px solid var(--line-soft);}
.svc-body h4{font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line);}
.svc-body ul{list-style:none; margin:0; padding:0;}
.svc-body li{padding:8px 0 8px 22px; border-bottom:1px solid var(--line-soft); position:relative; font-size:15px; color:var(--ink-soft);}
.svc-body li:last-child{border-bottom:0;}
.svc-body li::before{content:'◆'; position:absolute; left:0; top:12px; font-size:8px; color:var(--card-color, var(--vermillion));}
.svc-wide{grid-column:1/-1;}
/* "Best suited to" reads as tags */
.svc-wide ul{display:flex; flex-wrap:wrap; gap:10px;}
.svc-wide li{padding:7px 14px 7px 30px; border:1px solid var(--line); background:#fff;}
.svc-wide li:last-child{border-bottom:1px solid var(--line);}
.svc-wide li::before{left:13px; top:11px;}

.steps{display:grid; grid-template-columns:1fr; gap:24px; counter-reset:step;}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr);}}
.step{padding:28px 22px; border:1px solid var(--line); background:rgba(255,255,255,0.55); position:relative; counter-increment:step;}
.step::before{content:counter(step, upper-roman); font-family:'Song Myung', serif; font-size:13px; letter-spacing:0.18em; color:var(--accent-ink); display:block; margin-bottom:12px;}
.step h3{font-size:18px; margin-bottom:10px;}
.step p{font-size:14px; color:var(--ink-soft); margin:0;}

details.faq{border-bottom:1px solid var(--line); padding:20px 0;}
details.faq:first-of-type{border-top:1px solid var(--line);}
details.faq summary{
  list-style:none; cursor:pointer; font-family:'Song Myung', serif; font-size:18px; color:var(--navy-deep);
  display:flex; justify-content:space-between; gap:20px; align-items:center;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:'+'; color:var(--accent-ink); font-size:22px; line-height:1; transition:transform .25s ease;}
details.faq[open] summary::after{transform:rotate(45deg);}
details.faq p{margin:14px 0 0; color:var(--ink-soft); font-size:15px; max-width:680px;}
.faq-wrap{max-width:780px; margin:0 auto;}

/* ---------- CTA band ---------- */
.cta-band{text-align:center; padding:90px 0; background:linear-gradient(180deg, rgba(154,130,83,0.1), rgba(244,241,234,0)); border-top:1px solid var(--line-soft);}
.cta-band h2{font-size:clamp(26px,3.4vw,38px); margin:16px 0 14px;}
.cta-band p{color:var(--ink-soft); max-width:480px; margin:0 auto 28px;}

/* ---------- Game Studio (dusk) ---------- */
.studio{background:linear-gradient(180deg, var(--navy-deep), var(--night)); color:var(--sky-pale);}
.studio .eyebrow{color:var(--terracotta);}
.studio h2,.studio h3{color:var(--sky-pale);}
.studio p{color:rgba(239,233,221,0.78);}
.studio-frame{max-width:640px; margin:0 auto; text-align:center;}
.status-line{
  display:inline-flex; align-items:center; gap:10px; font-family:'Song Myung', serif; font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--terracotta); border:1px solid rgba(194,171,124,0.45); padding:9px 18px; margin:24px 0 30px;
}
.status-line .sd{width:6px; height:6px; border-radius:50%; background:var(--terracotta);}
.studio-note{margin-top:34px; padding-top:22px; border-top:1px solid rgba(239,233,221,0.16); font-size:13.5px; color:rgba(239,233,221,0.55); font-style:italic; max-width:480px; margin-left:auto; margin-right:auto;}
.btn-dusk{border-color:rgba(239,233,221,0.4); color:var(--sky-pale);}
.btn-dusk:hover,.btn-dusk:focus-visible{background:var(--sky-pale); color:var(--navy-deep); border-color:var(--sky-pale);}
.stars-dusk{position:absolute; inset:0; pointer-events:none; opacity:.7;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(239,233,221,.8), transparent 100%),
    radial-gradient(1px 1px at 28% 62%, rgba(194,171,124,.7), transparent 100%),
    radial-gradient(1.2px 1.2px at 46% 18%, rgba(239,233,221,.7), transparent 100%),
    radial-gradient(1px 1px at 63% 74%, rgba(239,233,221,.6), transparent 100%),
    radial-gradient(1.2px 1.2px at 81% 30%, rgba(194,171,124,.6), transparent 100%),
    radial-gradient(1px 1px at 92% 80%, rgba(239,233,221,.6), transparent 100%);
  background-size:620px 520px;}

.dusk-grid{display:grid; grid-template-columns:1fr; gap:24px;}
@media(min-width:760px){.dusk-grid{grid-template-columns:repeat(3,1fr);}}
.dusk-card{border:1px solid rgba(239,233,221,0.18); padding:30px 24px; background:rgba(239,233,221,0.04);}
.dusk-card .numeral{color:var(--terracotta);}
.dusk-card h3{font-size:19px; margin-bottom:10px;}
.dusk-card p{font-size:14.5px; margin:0;}

.ladder{list-style:none; margin:0 auto; padding:0; max-width:620px; position:relative;}
.ladder::before{content:''; position:absolute; left:15px; top:10px; bottom:10px; width:1px; background:rgba(194,171,124,0.45);}
.ladder li{position:relative; padding:0 0 26px 52px; color:rgba(239,233,221,0.78); font-size:15px;}
.ladder li::before{content:''; position:absolute; left:9px; top:6px; width:13px; height:13px; border:1px solid var(--terracotta); background:var(--night); border-radius:50%;}
.ladder li.now::before{background:var(--terracotta);}
.ladder strong{display:block; font-family:'Song Myung', serif; font-weight:400; font-size:18px; color:var(--sky-pale); margin-bottom:2px;}
.ladder .tagline{font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--terracotta);}

.devlog{display:grid; grid-template-columns:1fr; gap:0; max-width:760px; margin:0 auto;}
.devlog article{display:grid; grid-template-columns:110px 1fr; gap:24px; padding:26px 0; border-top:1px solid rgba(239,233,221,0.16);}
.devlog article:last-child{border-bottom:1px solid rgba(239,233,221,0.16);}
.devlog time{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--terracotta); padding-top:4px;}
.devlog h3{font-size:19px; margin-bottom:6px;}
.devlog p{margin:0; font-size:14.5px;}
@media(max-width:560px){.devlog article{grid-template-columns:1fr; gap:6px;}}

/* ---------- about ---------- */
.about-split{display:grid; grid-template-columns:1fr; gap:48px; align-items:center;}
@media(min-width:900px){.about-split{grid-template-columns:0.8fr 1.2fr; gap:72px;}}
.portrait{position:relative; display:flex; align-items:center; justify-content:center;}
.portrait img{width:100%; height:auto; position:relative;}
.portrait span{position:absolute; bottom:22px; left:0; right:0; text-align:center; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft);}
.about-copy h2{font-size:clamp(28px,3.6vw,40px); margin:16px 0 20px;}
.about-copy p{color:var(--ink-soft);}
.values{display:grid; grid-template-columns:1fr; gap:24px;}
@media(min-width:760px){.values{grid-template-columns:repeat(3,1fr);}}
.value{padding:30px 24px; border:1px solid var(--line); background:rgba(255,255,255,0.55); text-align:center;}
.value h3{font-size:19px; margin:10px 0;}
.value p{font-size:14.5px; color:var(--ink-soft); margin:0;}
.tool-groups{display:grid; grid-template-columns:1fr; gap:28px;}
@media(min-width:760px){.tool-groups{grid-template-columns:repeat(2,1fr);}}
.tool-group h3{font-size:16px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:14px;}
.tool-list{display:flex; flex-wrap:wrap; gap:10px;}
.tool-chip{font-size:12px; border:1px solid var(--line); padding:8px 15px; color:var(--ink-soft); background:rgba(255,255,255,0.5);}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr; gap:56px;}
@media(min-width:900px){.contact-grid{grid-template-columns:0.8fr 1.2fr;}}
.contact-info{display:flex; flex-direction:column; gap:26px;}
.contact-info .item{border-top:1px solid var(--line-soft); padding-top:18px;}
.contact-info .label{font-family:'Song Myung', serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:6px;}
.contact-info .value{font-family:'Song Myung', serif; font-size:19px; color:var(--navy-deep);}
.contact-info .value a:hover{color:var(--accent-ink);}
.field{margin-bottom:24px; display:flex; flex-direction:column; gap:9px;}
.field label{font-family:'Song Myung', serif; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);}
.field input,.field select,.field textarea{
  font-family:'Noto Serif', serif; font-size:16px; font-weight:500; background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:10px 2px; color:var(--ink); resize:vertical; border-radius:0;
}
.field input::placeholder,.field textarea::placeholder{color:#8a826e;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--vermillion);}
.two-col{display:grid; grid-template-columns:1fr; gap:0 28px;}
@media(min-width:600px){.two-col{grid-template-columns:1fr 1fr;}}
.form-note{font-size:13px; color:var(--ink-soft); font-style:italic; margin-top:18px;}
.form-status{margin-top:16px; font-size:14px; color:var(--sage-ink); min-height:22px;}
.form-status.is-error{color:var(--vermillion);}
#inquiry-form button[disabled]{opacity:.6; cursor:wait;}
.ip-note{margin-top:30px; padding:18px 20px; border:1px solid var(--line); background:rgba(255,255,255,0.5); font-size:14px; color:var(--ink-soft);}
.ip-note strong{font-family:'Song Myung', serif; font-weight:400; color:var(--navy-deep);}

/* ---------- footer ---------- */
footer.site-footer{background:var(--navy-deep); color:rgba(244,239,228,0.78); position:relative; z-index:1; padding:56px 0 30px;}
.foot-grid{display:grid; grid-template-columns:1fr; gap:36px; margin-bottom:40px;}
@media(min-width:800px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;}}
.foot-brand{font-family:'Song Myung', serif; letter-spacing:0.1em; font-size:18px; color:var(--ivory); margin-bottom:10px; display:flex; align-items:center; gap:12px;}
.foot-brand img{width:28px; height:28px;}
.foot-grid p{font-size:14px; color:rgba(244,239,228,0.72); max-width:320px;}
.foot-grid h4{font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--terracotta); margin-bottom:14px;}
.foot-grid ul{list-style:none; margin:0; padding:0;}
.foot-grid li{margin-bottom:8px; font-size:14px;}
.foot-grid li a{color:rgba(244,239,228,0.82);}
.foot-grid li a:hover{color:var(--terracotta);}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-top:22px; border-top:1px solid rgba(194,171,124,0.28); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(244,239,228,0.6);}
.foot-legal{margin:14px 0 0; font-size:12px; color:rgba(244,239,228,0.7);}
/* make saving media less convenient: no dragging, no iOS long-press save sheet */
img,video{-webkit-user-drag:none; user-select:none; -webkit-touch-callout:none;}

/* ---------- reveal ---------- */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.js .reveal.in{opacity:1; transform:none;}

/* ---------- bolder type pass ---------- */
/* Song Myung ships in a single weight, so a thin outline thickens it. Noto Serif is loaded at 400 to 700. */
h1,h2,h3{-webkit-text-stroke:0.6px currentColor;}
h4{-webkit-text-stroke:0.35px currentColor;}
.eyebrow,.btn,.seal-mark,.marquee-inner,.numeral,.inquire-link,.filter-btn,.menu-toggle,.status-line,.wc-label,
.case dt,.contact-info .label,.contact-info .value,.field label,.foot-brand,details.faq summary,.ladder strong,.step::before,.ip-note strong{
  -webkit-text-stroke:0.35px currentColor;
}
.tag,.tool-chip,.breadcrumb,.devlog time,.ladder .tagline,.work-card .ph,.case-visual span,.portrait span,.foot-bottom{font-weight:600;}

/* ==========================================================
   Mascot case study (work.html)
   Art is rendered on white; `multiply` lets it sit on the page tint.
   ========================================================== */
.work-card.has-img{background:#fff;}
.work-card.has-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; transition:transform .6s ease;}
.work-card.has-img:hover img{transform:scale(1.03);}
.work-card.has-img .ph{z-index:1; background:rgba(244,241,234,0.85); padding:3px 8px; opacity:1;}
.case-visual.has-img{aspect-ratio:auto; background:#fff; display:flex; justify-content:center; padding:24px;}
.case-visual.has-img img{max-height:480px; width:auto; height:auto;}
.inline-link{color:var(--accent-ink); border-bottom:1px solid currentColor;}

.mascot-story{scroll-margin-top:90px;}
.ms-chapter{display:grid; grid-template-columns:1fr; gap:6px 40px; max-width:880px; margin:0 auto 40px;}
@media(min-width:760px){.ms-chapter{grid-template-columns:90px 1fr;}}
.ms-num{font-family:'Song Myung', serif; font-size:40px; line-height:1; color:var(--accent-ink); opacity:.85; -webkit-text-stroke:0.4px currentColor;}
.ms-body h3{font-size:clamp(22px,2.6vw,28px); margin-bottom:12px;}
.ms-body p{color:var(--ink-soft);}
.ms-body strong{color:var(--navy-deep); font-weight:700;}
.ms-constraints{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px;}
@media(min-width:760px){.ms-constraints{grid-template-columns:repeat(3,1fr);}}
.ms-constraints li{border-top:2px solid var(--navy); padding:12px 0 0; font-size:14.5px; color:var(--ink-soft); line-height:1.65;}
.ms-constraints span{display:block; font-family:'Song Myung', serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:4px;}

.ms-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:0 auto 96px;}
@media(min-width:760px){.ms-gallery{grid-template-columns:repeat(3,1fr); gap:20px;}}
.ms-gallery figure,.ms-expr figure{margin:0;}
.ms-gallery img{width:100%; height:auto; aspect-ratio:1; object-fit:cover; border:1px solid var(--line);}
figcaption{font-family:'Song Myung', serif; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; text-align:center;}

.ms-sheets{display:grid; grid-template-columns:1fr; gap:20px; margin:0 auto 96px;}
@media(min-width:900px){.ms-sheets{grid-template-columns:1fr 1fr;}}
.ms-sheets a{display:block; background:#fff; border:1px solid var(--line); padding:10px; transition:border-color .3s ease, transform .3s ease;}
.ms-sheets a:hover{border-color:var(--navy); transform:translateY(-3px);}

.ms-char{display:grid; grid-template-columns:1fr; gap:28px; align-items:center; padding:36px 0; border-top:1px solid var(--line);}
@media(min-width:960px){.ms-char{grid-template-columns:1.35fr 1fr; gap:56px;} .ms-char.flip{grid-template-columns:1fr 1.35fr;} .ms-char.flip .ms-turn{order:2;}}
.ms-turn{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; background:#fff; border:1px solid var(--line); padding:16px 8px 8px;}
.ms-turn img{width:100%; height:auto;}
.ms-profile h4{font-size:34px; margin:6px 0 12px; -webkit-text-stroke:0.5px currentColor;}
.ms-profile > p{color:var(--ink-soft);}
.ms-profile dl{display:grid; grid-template-columns:80px 1fr; gap:6px 16px; margin:16px 0 20px; font-size:14.5px;}
.ms-profile dt{font-family:'Song Myung', serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-ink); padding-top:3px;}
.ms-profile dd{margin:0; color:var(--ink-soft);}
/* fixed-width columns so circles sit at equal distances whatever the label length */
.ms-swatches{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, 66px); gap:14px 6px;}
.ms-swatches li{font-size:11px; letter-spacing:0.04em; color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:4px; font-weight:600;}
.ms-swatches li::before{content:''; width:38px; height:38px; border-radius:50%; background:var(--c); border:1px solid var(--line); box-shadow:inset 0 0 0 3px rgba(255,255,255,0.35);}
.ms-swatches small{font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:500;}

.ms-quote{max-width:560px; margin:56px auto 96px; padding:28px 32px; border:1px solid var(--line); border-left:3px solid var(--vermillion); background:rgba(244,241,234,0.7);}
.ms-quote p{font-size:19px; margin:0 0 6px; color:var(--navy-deep);}
.ms-quote span{font-family:'Song Myung', serif; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-ink); margin-right:8px;}
.ms-quote cite{display:block; margin-top:10px; font-size:12px; font-style:normal; color:var(--ink-soft);}

.ms-expr{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 auto 20px; background:#fff; border:1px solid var(--line); padding:14px 14px 10px;}
@media(min-width:760px){.ms-expr{grid-template-columns:repeat(6,1fr);}}
.ms-expr img{width:100%; height:auto;}
.ms-expr + .ms-chapter{margin-top:96px;}
.ms-wide{margin:0; background:#fff; border:1px solid var(--line); padding:16px;}
.ms-wide img{width:100%; height:auto;}
.ms-wide.ms-portrait{max-width:460px; margin:0 auto;}

/* ---------- case study page ---------- */
.cs-part{scroll-margin-top:80px;}
.cs-nav{display:grid; grid-template-columns:1fr; gap:12px; margin-top:20px;}
@media(min-width:760px){.cs-nav{grid-auto-flow:column; grid-auto-columns:1fr;}}
.cs-nav a{display:flex; align-items:baseline; gap:14px; padding:18px 20px; border:1px solid var(--line); background:rgba(244,241,234,0.6);
  font-family:'Song Myung', serif; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy-deep); transition:border-color .25s ease, transform .25s ease; -webkit-text-stroke:0.35px currentColor;}
.cs-nav a:hover{border-color:var(--vermillion); transform:translateY(-2px);}
.cs-nav span{font-size:22px; color:var(--accent-ink); letter-spacing:0;}
.cs-placeholder{max-width:640px; margin:0 auto; text-align:center; padding:48px 28px; border:1px dashed var(--line); background:rgba(244,241,234,0.5);}
.cs-placeholder span{font-family:'Song Myung', serif; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-ink);}
.cs-placeholder p{margin:10px 0 0; color:var(--ink-soft);}

.ms-facts{max-width:880px; margin:-24px auto 72px; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media(min-width:760px){.ms-facts{grid-template-columns:1fr 1fr 2fr;} .ms-facts .wide:nth-of-type(4),.ms-facts .wide:nth-of-type(5){grid-column:1 / -1;}}
.ms-facts > div{background:var(--cream); padding:16px 20px;}
.ms-facts .wide{grid-column:1 / -1;}
@media(min-width:760px){.ms-facts .wide:nth-of-type(3){grid-column:auto;}}
.ms-facts dt{font-family:'Song Myung', serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:4px; -webkit-text-stroke:0.35px currentColor;}
.ms-facts dd{margin:0; font-size:14.5px; color:var(--ink); line-height:1.6;}
.tool-tag{display:inline-block; font-size:12px; letter-spacing:0.04em; padding:3px 10px; margin:2px 6px 2px 0; border:1px solid var(--navy); color:var(--navy-deep); font-weight:600;}

/* ---------- case study: video parts ---------- */
.cs-video-top{display:grid; grid-template-columns:1fr; gap:36px; align-items:start; margin:0 auto 80px; max-width:1040px;}
@media(min-width:860px){.cs-video-top{grid-template-columns:340px 1fr; gap:56px;}}
.cs-player video{width:100%; height:auto; aspect-ratio:9/16; background:var(--night); border:1px solid var(--line); display:block;}
.cs-player-note{font-size:12px; color:var(--ink-soft); margin:10px 0 0; text-align:center;}
.cs-video-info h3{font-size:clamp(24px,2.8vw,32px); margin:8px 0 12px;}
.cs-video-info > p{color:var(--ink-soft);}
.ms-facts.compact{margin:20px 0 0; max-width:none; grid-template-columns:1fr 1fr;}
.ms-facts.compact .wide{grid-column:1 / -1;}
.tint .ms-facts > div{background:#EFEBE1;}
.cs-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 auto 96px;}
@media(min-width:760px){.cs-strip{grid-template-columns:repeat(6,1fr); gap:14px;}}
.cs-strip figure{margin:0;}
.cs-strip img{width:100%; height:auto; border:1px solid var(--line);}
.cs-board{max-width:640px; margin:0 auto 96px;}
.cs-board a{display:block; border:1px solid var(--line); background:#fff; padding:8px;}
.cs-board img{width:100%; height:auto;}
.cs-beforeafter{display:flex; align-items:center; justify-content:center; gap:20px; margin:0 auto 96px; flex-wrap:wrap;}
.cs-beforeafter figure{margin:0; width:min(260px,42vw);}
.cs-beforeafter img{width:100%; height:auto; border:1px solid var(--line); background:#fff;}
.cs-beforeafter figure:first-child img{aspect-ratio:9/16; object-fit:contain;}
.cs-arrow{font-size:28px; color:var(--accent-ink);}
.cs-beforeafter{margin-bottom:40px;}
.cs-motion{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; align-items:end; max-width:1000px; margin:0 auto 12px;}
@media(min-width:760px){.cs-motion{grid-template-columns:1fr auto 1fr 1fr 1fr; gap:18px;}}
.cs-motion .cs-arrow{display:none;}
@media(min-width:760px){.cs-motion .cs-arrow{display:block; align-self:center;}}
.cs-motion figure{margin:0;}
.cs-motion img,.cs-motion video{width:100%; height:auto; display:block; border:1px solid var(--line); background:#13296B;}
.cs-motion-note{text-align:center; font-size:13px; color:var(--ink-soft); margin:8px auto 96px; max-width:560px;}
/* square cover on a 4:5 card: show the whole image at the top, label sits in the band below */
.work-card.has-img.fit-top{background:var(--navy-deep);}
.work-card.has-img.fit-top img{height:auto; bottom:auto; object-fit:contain;}
.work-card.has-img.fit-top:hover img{transform:none;}
.work-card.has-img.fit-top .ph{display:none;}

/* House That Refuses an Heir (work.html, case-house-heir.html) */
.work-card.no-tag .ph{display:none;}
.case-visual.has-dark{aspect-ratio:auto; background:var(--night);}
.case-visual.has-dark img{display:block; width:100%; height:auto;}
.hh-player{max-width:1040px; margin:0 auto;}
.hh-player video{display:block; width:100%; height:auto; aspect-ratio:16/9; background:var(--night); border:1px solid var(--line);}
.hh-stills,.hh-loops{display:grid; grid-template-columns:1fr; gap:14px; max-width:1040px; margin:0 auto 96px;}
@media(min-width:760px){.hh-stills,.hh-loops{grid-template-columns:repeat(3,1fr); gap:18px;}}
.hh-loops{margin-bottom:56px;}
.hh-stills figure,.hh-loops figure{margin:0;}
.hh-stills img,.hh-loops video{display:block; width:100%; height:auto; aspect-ratio:16/9; background:var(--night); border:1px solid var(--line);}
.hh-stills figcaption,.hh-loops figcaption{font-size:12px; color:var(--ink-soft); margin-top:8px; text-align:center;}

/* Game Studio page: bright gold headings and labels, bold ivory body copy */
.page-studio .studio{--gold:#F2D58E; --gold-label:#E6C77E;}
.page-studio .studio h1,.page-studio .studio h2,.page-studio .studio h3,.page-studio .studio .ladder strong{color:var(--gold);}
.page-studio .studio p,.page-studio .studio .ladder li{color:#F4EFE4; font-weight:600; font-size:17px;}
.page-studio .studio .breadcrumb{color:rgba(244,239,228,0.75);}
.page-studio .studio .studio-note{color:rgba(244,239,228,0.8); font-weight:500;}
.page-studio .studio .eyebrow,.page-studio .studio .numeral,.page-studio .studio .ladder .tagline,.page-studio .studio .devlog time,.page-studio .studio .status-line{color:var(--gold-label);}
.page-studio .studio .status-line{border-color:rgba(230,199,126,0.55);}
.page-studio .studio .status-line .sd{background:var(--gold-label);}
.page-studio .studio .ladder::before{background:rgba(242,213,142,0.5);}
.page-studio .studio .ladder li::before{border-color:var(--gold-label);}
.page-studio .studio .ladder li.now::before{background:var(--gold-label);}
.page-studio .studio .dusk-card{border-color:rgba(242,213,142,0.26);}
.page-studio .studio .devlog article{border-color:rgba(242,213,142,0.2);}
.page-studio .studio .btn-dusk{border-color:rgba(242,213,142,0.6); color:var(--gold);}
.page-studio .studio .btn-dusk:hover,.page-studio .studio .btn-dusk:focus-visible{background:var(--gold); border-color:var(--gold); color:var(--navy-deep);}

/* Readability pass (all pages except Game Studio, which has its own treatment):
   Noto Serif body copy one weight heavier, and fainter small text made solid. */
body:not(.page-studio){font-weight:600;}
body:not(.page-studio) .field input,body:not(.page-studio) .field select,body:not(.page-studio) .field textarea{font-weight:600;}
body:not(.page-studio) .ms-swatches small{font-weight:600;}
body:not(.page-studio) .work-card .ph{opacity:1;}
body:not(.page-studio) figcaption{-webkit-text-stroke:0.35px currentColor;}
body:not(.page-studio) .studio p{color:rgba(239,233,221,0.92);}
body:not(.page-studio) .foot-grid p{color:rgba(244,239,228,0.88);}
body:not(.page-studio) .foot-grid li,body:not(.page-studio) .foot-grid li a{color:rgba(244,239,228,0.92);}
body:not(.page-studio) .foot-bottom{color:rgba(244,239,228,0.78);}

.tool-group.wide{grid-column:1 / -1;}

/* Dhammamakka case study */
.dm-visual{background:#EAF5F2;}
.case-visual.has-img.dm-visual{padding:0; display:block; overflow:hidden;}
.case-visual.has-img.dm-visual img{display:block; width:100%; height:auto; max-height:none;}

/* "In progress" status for ongoing projects */
.status-pill{display:inline-block; margin:10px 0 4px; padding:5px 12px; font-family:'Jost', sans-serif; font-size:11px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:#fff; background:var(--navy);}
.status-pill.on-card{position:absolute; top:48px; left:22px; margin:0; z-index:1;}
.page-hero .status-pill{margin:0 0 18px;}
.cs-placeholder .status-pill{margin:0; font-family:'Jost', sans-serif; letter-spacing:0.16em; color:#fff;}
.status-note{max-width:620px; margin:22px auto 0; padding:12px 18px; font-size:14px; font-style:italic; color:var(--ink-soft); border:1px dashed var(--line); background:rgba(255,255,255,0.5);}
.dm-full{max-width:880px; margin:0 auto 56px;}
.dm-full.dm-wide{max-width:1040px;}
.dm-full.dm-mid{max-width:720px;}
.dm-full img{display:block; width:100%; height:auto; border:1px solid var(--line);}