/* ============================================================
   D-STUDIO — Web Site
   palette: pamphlet 2022 (navy #2D385D / yellow #E19927-#E3C34F / off-white)
   ============================================================ */

:root{
  --navy:      #1F2A4C;
  --navy-2:    #27345C;
  --navy-deep: #18213D;
  --paper:     #FAF8F2;
  --card:      #FFFFFF;
  --ink:       #1F2A4C;
  --fg:        #F7F5EE;
  --mut:       #6A6F85;   /* muted on paper */
  --mut-l:     #A8AEC6;   /* muted on navy */
  --line:      rgba(37,46,82,.16);   /* on paper */
  --line-l:    rgba(245,242,233,.2); /* on navy */
  --yellow:    #D9A62E;
  --yellow-2:  #E5BE55;
  --yellow-d:  #A87E14;   /* text-safe on paper */

  --jp: "Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,sans-serif;
  --en: "Jost","Zen Kaku Gothic New","Hiragino Sans",sans-serif;

  --pad: 20px;
  --maxw: 1240px;
}

@media (min-width:600px){ :root{ --pad: 36px; } }
@media (min-width:1000px){ :root{ --pad: 56px; } }
@media (min-width:1400px){ :root{ --pad: 72px; } }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--jp);
  font-size:15px; line-height:1.95;
  font-feature-settings:"palt" 1;
  letter-spacing:.04em;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

/* ---------- primitives ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.en{ font-family:var(--en); letter-spacing:.22em; font-weight:400; }
.mut{ color:var(--mut); }

.eyebrow{
  font-family:var(--en); font-size:11px; letter-spacing:.34em;
  color:var(--yellow-d); text-transform:uppercase; display:block; margin-bottom:22px;
}
.eyebrow.dark{ color:var(--yellow-d); }
.on-navy .eyebrow, .navy .eyebrow{ color:var(--yellow-2); }

.sec-title{
  font-family:var(--en); font-weight:300;
  font-size:clamp(30px,4.6vw,54px); letter-spacing:.14em; line-height:1.2;
  color:var(--navy);
}
.sec-title small{
  display:block; font-family:var(--jp); font-size:12px;
  letter-spacing:.24em; color:var(--mut); margin-top:14px; font-weight:400;
}

.section{ padding:clamp(80px,11vw,150px) 0; }
.rule{ height:1px; background:var(--line); border:0; }

.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--en); font-size:12px; letter-spacing:.24em;
  border:1px solid var(--navy); color:var(--navy);
  padding:19px 34px; border-radius:2px;
  transition:.35s ease; white-space:nowrap; background:transparent;
}
.btn:hover{ background:var(--navy); color:var(--paper); }
.btn .arw{ transition:transform .35s ease; }
.btn:hover .arw{ transform:translateX(5px); }
.btn.solid{ background:var(--yellow); color:var(--navy-deep); border-color:var(--yellow); }
.btn.solid:hover{ background:var(--navy); border-color:var(--navy); color:var(--paper); }
/* buttons placed on navy sections */
.navy .btn, .on-navy .btn{ border-color:var(--line-l); color:var(--fg); }
.navy .btn:hover, .on-navy .btn:hover{ background:var(--fg); color:var(--navy); border-color:var(--fg); }
.navy .btn.solid, .on-navy .btn.solid{ background:var(--yellow); border-color:var(--yellow); color:var(--navy-deep); }
.navy .btn.solid:hover, .on-navy .btn.solid:hover{ background:var(--fg); border-color:var(--fg); color:var(--navy); }

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  transition:background .4s ease, border-color .4s ease, padding .4s ease;
  border-bottom:1px solid transparent;
}
.hdr.stuck{ background:rgba(37,46,82,.92); backdrop-filter:blur(14px); border-bottom-color:var(--line-l); padding:15px var(--pad); }
.hdr__logo img{ height:19px; width:auto; }
.nav{ display:flex; align-items:center; gap:clamp(18px,2.6vw,40px); }
.nav a{ font-family:var(--en); font-size:11.5px; letter-spacing:.22em; color:var(--fg); opacity:.85; transition:.3s; }
.nav a:hover{ opacity:1; color:var(--yellow-2); }
.nav a.client{
  border:1px solid var(--yellow); color:var(--yellow-2); padding:10px 18px; opacity:1; border-radius:2px;
}
.nav a.client:hover{ background:var(--yellow); color:var(--navy-deep); }

/* ---------- hero ---------- */
.hero{ position:relative; height:100svh; min-height:620px; display:flex; align-items:flex-end; overflow:hidden; background:var(--navy-deep); }
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,36,64,.78) 0%,rgba(28,36,64,.28) 40%,rgba(28,36,64,.95) 100%);
}
.hero__in{ position:relative; width:100%; padding-bottom:clamp(48px,8vw,96px); color:var(--fg); }
.hero h1{
  font-weight:400; font-size:clamp(26px,4.4vw,50px); line-height:1.55;
  letter-spacing:.11em; text-shadow:0 2px 30px rgba(20,26,48,.6);
}
.hero h1 span{ display:block; }
.hero__sub{
  margin-top:26px; font-family:var(--en); font-size:11.5px; letter-spacing:.28em; color:var(--yellow-2);
}
.hero__scroll{
  position:absolute; right:var(--pad); bottom:clamp(48px,8vw,96px);
  font-family:var(--en); font-size:10px; letter-spacing:.3em; color:var(--mut-l);
  writing-mode:vertical-rl; display:flex; align-items:center; gap:14px;
}
.hero__scroll::after{ content:""; width:1px; height:64px; background:linear-gradient(180deg,var(--yellow),transparent); }

/* ---------- stats band (navy) ---------- */
.stats{ background:var(--navy); color:var(--fg); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stats__item{ padding:clamp(30px,4vw,46px) 6px; text-align:center; border-left:1px solid var(--line-l); }
.stats__item:first-child{ border-left:0; }
.stats__n{ font-family:var(--en); font-size:clamp(26px,3.6vw,42px); font-weight:300; letter-spacing:.06em; color:var(--yellow-2); }
.stats__n em{ font-style:normal; font-size:.5em; letter-spacing:.1em; margin-left:3px; }
.stats__l{ font-size:11px; letter-spacing:.2em; color:var(--mut-l); margin-top:6px; }

/* ---------- reasons ---------- */
.reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(44px,6vw,74px); }
.reason{ background:var(--card); padding:clamp(30px,3.6vw,48px) clamp(24px,2.6vw,38px); }
.reason__n{ font-family:var(--en); font-size:12px; letter-spacing:.24em; color:var(--yellow-d); }
.reason h3{ font-size:19px; font-weight:600; letter-spacing:.1em; margin:16px 0 18px; color:var(--navy); }
.reason p{ font-size:13.5px; line-height:2.1; color:var(--mut); }

/* ---------- works grid ---------- */
.works{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,30px) clamp(12px,1.6vw,24px); }
.works.two{ grid-template-columns:repeat(2,1fr); }
.work{ display:block; }
.work__ph{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--navy-2); }
.work__ph img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.3,1); }
.work:hover .work__ph img{ transform:scale(1.055); }
.work__tag{
  position:absolute; left:12px; top:12px; z-index:2;
  font-family:var(--en); font-size:9.5px; letter-spacing:.2em;
  background:rgba(37,46,82,.85); color:var(--paper); backdrop-filter:blur(6px);
  padding:6px 11px;
}
.work__meta{ padding:15px 2px 0; }
.work__cat{ font-family:var(--en); font-size:10px; letter-spacing:.24em; color:var(--yellow-d); }
.work__ttl{ font-size:14.5px; letter-spacing:.08em; margin-top:8px; line-height:1.7; color:var(--navy); font-weight:500; }
.work__cl{ font-size:11.5px; color:var(--mut); margin-top:5px; letter-spacing:.1em; }

/* ---------- filter ---------- */
.filter{ display:flex; flex-wrap:wrap; gap:10px; margin:clamp(34px,4.4vw,54px) 0 clamp(30px,3.6vw,44px); }
.filter button{
  font-family:var(--en); font-size:11px; letter-spacing:.2em;
  padding:11px 20px; border:1px solid var(--line); color:var(--mut); transition:.3s; border-radius:2px;
}
.filter button:hover{ color:var(--navy); border-color:var(--navy); }
.filter button.on{ background:var(--navy); color:var(--paper); border-color:var(--navy); }

/* ---------- page head ---------- */
.phead{ padding-top:clamp(140px,17vw,220px); padding-bottom:clamp(40px,5vw,64px); border-bottom:1px solid var(--line); }
.phead h1{ font-family:var(--en); font-weight:300; font-size:clamp(38px,7vw,86px); letter-spacing:.1em; line-height:1; color:var(--navy); }
.phead p{ margin-top:20px; font-size:13px; color:var(--mut); letter-spacing:.14em; max-width:52em; line-height:2.1; }
.phead a{ border-bottom:1px solid var(--line); }

/* ---------- split (about / profile) ---------- */
.split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(30px,5vw,74px); align-items:center; }
.split__ph img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.split h2{ font-size:clamp(22px,2.7vw,32px); font-weight:600; letter-spacing:.11em; line-height:1.7; color:var(--navy); }
.split p{ margin-top:24px; font-size:13.5px; line-height:2.25; color:var(--mut); }
.split .btn{ margin-top:36px; }

/* ---------- note cards ---------- */
.notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.note{ background:var(--card); padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; min-height:230px; transition:background .4s; }
.note:hover{ background:#FFFDF3; }
.note__k{ font-family:var(--en); font-size:10px; letter-spacing:.24em; color:var(--yellow-d); }
.note h3{ font-size:16px; font-weight:600; line-height:1.85; letter-spacing:.06em; margin:16px 0 auto; color:var(--navy); }
.note__f{ display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--mut); font-family:var(--en); letter-spacing:.16em; margin-top:24px; }

/* ---------- client area band (navy) ---------- */
.band{ background:var(--navy); color:var(--fg); }
.band__in{ display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center; }
.band h2{ font-family:var(--en); font-weight:300; font-size:clamp(24px,3.2vw,38px); letter-spacing:.12em; color:var(--fg); }
.band p{ margin-top:16px; font-size:13px; color:var(--mut-l); line-height:2.1; }
.band .eyebrow{ color:var(--yellow-2); }
.band .btn{ border-color:var(--line-l); color:var(--fg); }
.band .btn.solid{ background:var(--yellow); border-color:var(--yellow); color:var(--navy-deep); }
.band .btn.solid:hover{ background:var(--fg); border-color:var(--fg); color:var(--navy); }

/* ---------- contact ---------- */
.contact{ text-align:center; }
.contact .lead{ font-size:clamp(17px,2.1vw,24px); line-height:2.1; letter-spacing:.1em; margin-top:28px; color:var(--navy); }
.contact .mail{
  display:inline-block; margin-top:40px; font-family:var(--en);
  font-size:clamp(20px,3.2vw,38px); letter-spacing:.14em; color:var(--navy);
  border-bottom:1px solid var(--navy); padding-bottom:12px; transition:.35s;
}
.contact .mail:hover{ color:var(--yellow-d); border-color:var(--yellow-d); }
.navy .contact .lead, .cta .lead{ color:var(--fg); }
.cta .mail{ color:var(--fg); border-color:var(--line-l); }
.cta .mail:hover{ color:var(--yellow-2); border-color:var(--yellow-2); }

/* ---------- footer (navy) ---------- */
.ftr{ background:var(--navy-deep); color:var(--fg); padding:clamp(44px,5vw,64px) 0 34px; }
.ftr__in{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; }
.ftr img{ height:17px; }
.ftr__nav{ display:flex; gap:26px; flex-wrap:wrap; }
.ftr__nav a{ font-family:var(--en); font-size:11px; letter-spacing:.2em; color:var(--mut-l); }
.ftr__nav a:hover{ color:var(--yellow-2); }
.ftr__cp{ margin-top:40px; font-family:var(--en); font-size:10px; letter-spacing:.2em; color:var(--mut-l); opacity:.7; }

/* ============================================================
   PRIVATE PAGE
   ============================================================ */
.gate{ min-height:100svh; display:flex; align-items:center; justify-content:center; padding:var(--pad); background:var(--navy-deep); color:var(--fg); }
.gate__box{ width:100%; max-width:430px; text-align:center; }
.gate img{ height:22px; margin:0 auto 44px; }
.gate__lock{ font-family:var(--en); font-size:10px; letter-spacing:.34em; color:var(--yellow-2); }
.gate h1{ font-family:var(--en); font-weight:300; font-size:clamp(24px,3.6vw,34px); letter-spacing:.14em; margin:20px 0 18px; }
.gate p{ font-size:12.5px; color:var(--mut-l); line-height:2.1; }
.gate form{ margin-top:38px; display:flex; gap:10px; }
.gate input{
  flex:1; background:rgba(245,242,233,.06); border:1px solid var(--line-l); color:var(--fg);
  padding:16px 18px; font-family:var(--en); font-size:13px; letter-spacing:.2em; border-radius:2px; outline:none;
}
.gate input::placeholder{ color:var(--mut-l); }
.gate input:focus{ border-color:var(--yellow); }
.gate .btn{ border-color:var(--yellow); background:var(--yellow); color:var(--navy-deep); }
.gate .btn:hover{ background:var(--fg); border-color:var(--fg); color:var(--navy); }
.gate .err{ color:#E8896B; font-size:11.5px; margin-top:16px; letter-spacing:.1em; min-height:1.4em; }
.gate__note{ margin-top:44px; font-size:11px; color:var(--mut-l); line-height:2; opacity:.85; }
.gate__note a{ border-bottom:1px solid var(--line-l); }

.notice{
  display:flex; gap:14px; align-items:flex-start;
  border:1px solid rgba(181,127,20,.4); background:rgba(226,167,46,.09);
  padding:20px 24px; border-radius:2px; margin-top:34px;
}
.notice__i{ font-family:var(--en); font-size:10px; letter-spacing:.2em; color:var(--yellow-d); padding-top:3px; white-space:nowrap; }
.notice p{ font-size:12px; color:var(--mut); line-height:2; }

.pwork{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(24px,3.6vw,52px); align-items:center; padding:clamp(34px,4.4vw,56px) 0; border-top:1px solid var(--line); }
.pwork:nth-child(even) .pwork__ph{ order:2; }
.pwork__ph{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--navy-2); }
.pwork__ph img{ width:100%; height:100%; object-fit:cover; }
.pwork__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.pwork__play span{
  width:64px; height:64px; border:1px solid rgba(245,242,233,.75); border-radius:50%;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
  background:rgba(28,36,64,.35); color:var(--paper); transition:.4s;
}
.pwork__ph:hover .pwork__play span{ background:var(--yellow); color:var(--navy-deep); border-color:var(--yellow); }
.pwork__st{ font-family:var(--en); font-size:10px; letter-spacing:.22em; color:var(--yellow-d); }
.pwork h3{ font-size:clamp(17px,2.1vw,23px); font-weight:600; letter-spacing:.09em; margin:14px 0 16px; line-height:1.75; color:var(--navy); }
.pwork p{ font-size:13px; color:var(--mut); line-height:2.15; }
.pmeta{ display:flex; flex-wrap:wrap; gap:10px 30px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.pmeta div{ font-size:11.5px; color:var(--mut); letter-spacing:.12em; }
.pmeta b{ display:block; font-family:var(--en); font-size:9.5px; letter-spacing:.22em; color:var(--yellow-d); margin-bottom:5px; font-weight:400; }
.pacts{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.pacts a{ font-family:var(--en); font-size:10.5px; letter-spacing:.18em; border:1px solid var(--line); color:var(--navy); padding:12px 18px; transition:.3s; }
.pacts a:hover{ background:var(--navy); color:var(--paper); }

/* ============================================================
   ABOUT / PAMPHLET LP
   ============================================================ */
.lite{ background:var(--paper); color:var(--ink); }

.lp-hero{ position:relative; min-height:88svh; display:flex; align-items:center; background:var(--navy-deep); overflow:hidden; }
.lp-hero__bg{ position:absolute; inset:0; }
.lp-hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.32; }
.lp-hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(28,36,64,.85),rgba(28,36,64,.4)); }
.lp-hero__in{ position:relative; padding-top:clamp(120px,14vw,170px); padding-bottom:clamp(60px,8vw,90px); color:var(--fg); }
.lp-hero h1{ font-size:clamp(28px,5vw,58px); font-weight:400; line-height:1.5; letter-spacing:.12em; }
.lp-hero .lead{ margin-top:30px; font-size:14px; color:var(--mut-l); line-height:2.3; max-width:40em; }
.lp-hero__cta{ display:flex; gap:14px; margin-top:44px; flex-wrap:wrap; }

.voice{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); margin-top:clamp(40px,5vw,60px); }
.voice__c{ border:1px solid var(--line); border-top:3px solid var(--yellow); padding:clamp(24px,2.8vw,34px); background:var(--card); }
.voice__q{ font-size:16px; font-weight:600; line-height:1.85; letter-spacing:.07em; color:var(--navy); }
.voice__q::before{ content:"“"; font-family:var(--en); color:var(--yellow-d); margin-right:2px; }
.voice__q::after{ content:"”"; font-family:var(--en); color:var(--yellow-d); }
.voice__w{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--mut); line-height:1.9; letter-spacing:.1em; }

.flow{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(40px,5vw,58px); }
.flow__s{ background:var(--card); padding:26px 14px; text-align:center; }
.flow__n{ font-family:var(--en); font-size:11px; letter-spacing:.2em; color:var(--yellow-d); }
.flow__t{ font-size:12px; margin-top:10px; letter-spacing:.08em; line-height:1.7; color:var(--navy); }

.price{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); margin-top:clamp(40px,5vw,58px); }
.price__c{ border:1px solid var(--line); border-top:3px solid var(--navy); padding:clamp(26px,3vw,38px); background:var(--card); }
.price__k{ font-size:12.5px; letter-spacing:.16em; color:var(--mut); }
.price__v{ font-family:var(--en); font-size:clamp(26px,3.4vw,38px); font-weight:300; margin:14px 0 18px; letter-spacing:.04em; color:var(--navy); }
.price__v em{ font-style:normal; font-size:.42em; letter-spacing:.16em; margin-left:4px; color:var(--mut); }
.price__d{ font-size:11.5px; color:var(--mut); line-height:2; letter-spacing:.06em; }

.clients{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(36px,4.4vw,52px); }
.clients div{ background:var(--card); padding:24px 12px; text-align:center; font-size:12px; letter-spacing:.1em; color:var(--navy); }

.cta{ background:var(--navy); color:var(--fg); text-align:center; }
.cta .eyebrow{ color:var(--yellow-2); }
.cta .sec-title{ color:var(--fg); }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.2,.7,.3,1), transform 1s cubic-bezier(.2,.7,.3,1); }
.rv.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .works, .works.two, .reasons, .notes, .voice, .price{ grid-template-columns:repeat(2,1fr); }
  .split, .band__in, .pwork{ grid-template-columns:1fr; }
  .pwork:nth-child(even) .pwork__ph{ order:0; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stats__item:nth-child(3){ border-left:0; }
  .stats__item:nth-child(n+3){ border-top:1px solid var(--line-l); }
  .flow{ grid-template-columns:repeat(4,1fr); }
  .clients{ grid-template-columns:repeat(2,1fr); }
  .nav{ display:none; }
}
@media (max-width:560px){
  .works, .works.two, .reasons, .notes, .voice, .price{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:repeat(2,1fr); }
  .hero__scroll{ display:none; }
}

/* ---------- photo gallery ---------- */
.pgroup{ margin-top:clamp(44px,6vw,70px); }
.pgroup__hd{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:clamp(18px,2.4vw,28px); }
.pgroup__hd h3{ font-size:clamp(16px,2vw,21px); font-weight:600; letter-spacing:.1em; color:var(--navy); }
.pgroup__hd .cl{ font-family:var(--en); font-size:10.5px; letter-spacing:.22em; color:var(--yellow-d); }
.pgallery{ columns:3; column-gap:clamp(10px,1.4vw,18px); }
.pgallery a{ display:block; margin-bottom:clamp(10px,1.4vw,18px); overflow:hidden; background:var(--navy-2); }
.pgallery img{ width:100%; display:block; transition:transform .8s cubic-bezier(.2,.7,.3,1), opacity .4s; }
.pgallery a:hover img{ transform:scale(1.04); opacity:.92; }
@media (max-width:900px){ .pgallery{ columns:2; } }
@media (max-width:560px){ .pgallery{ columns:2; } }

/* ---------- private works: 2-up grid ---------- */
.pworks{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(34px,4.4vw,60px) clamp(18px,2.4vw,32px); margin-top:clamp(26px,3.4vw,44px); }
.pworks .pwork{ grid-template-columns:1fr; gap:18px; padding:0; border-top:0; align-items:start; }
.pworks .pwork:nth-child(even) .pwork__ph{ order:0; }
.pworks .pwork h3{ font-size:16.5px; margin:12px 0 12px; }
.pworks .pwork p{ font-size:12.5px; }
.pworks .pmeta{ margin-top:18px; padding-top:16px; }
@media (max-width:700px){ .pworks{ grid-template-columns:1fr; } }

/* ---------- pamphlet download ---------- */
.pamph{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,3.4vw,48px); align-items:center;
  border:1px solid var(--line); border-top:3px solid var(--yellow); background:var(--card);
  padding:clamp(26px,3.4vw,44px); }
.pamph__cover{ width:clamp(120px,16vw,190px); }
.pamph__cover img{ width:100%; box-shadow:0 10px 30px rgba(31,42,76,.18); }
.pamph h3{ font-size:clamp(17px,2.1vw,22px); font-weight:600; letter-spacing:.1em; color:var(--navy); margin:10px 0 14px; }
.pamph p{ font-size:13px; color:var(--mut); line-height:2.1; max-width:46em; }
.pamph .btn{ margin-top:24px; }
.pamph .sz{ font-family:var(--en); font-size:10px; letter-spacing:.18em; color:var(--mut); margin-left:14px; }
@media (max-width:700px){ .pamph{ grid-template-columns:1fr; } .pamph__cover{ margin:0 auto; } }

/* ---------- section jump buttons ---------- */
.jumpnav{ display:flex; gap:14px; flex-wrap:wrap; margin-top:clamp(32px,4.4vw,52px); }
.jumpnav .btn{ padding:14px 24px; font-size:11px; }
[id="videos"], [id="photos"]{ scroll-margin-top:90px; }

/* ---------- lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:4vmin; background:rgba(24,33,61,.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; pointer-events:none; transition:opacity .35s ease; cursor:zoom-out; }
.lb.on{ opacity:1; pointer-events:auto; }
.lb img{ max-width:92vw; max-height:88vh; display:block; box-shadow:0 30px 90px rgba(10,15,32,.55);
  transform:scale(.96); transition:transform .35s cubic-bezier(.2,.7,.3,1); }
.lb.on img{ transform:scale(1); }
.lb__x{ position:fixed; top:16px; right:22px; font-family:var(--en); font-size:15px; letter-spacing:.2em;
  color:#F7F5EE; opacity:.8; cursor:pointer; padding:10px; }
.lb__x:hover{ opacity:1; }
.pgallery a{ cursor:zoom-in; }

/* ---------- price section ---------- */
.pricecards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); margin-top:clamp(40px,5vw,58px); }
.pc{ background:var(--card); border:1px solid var(--line); }
.pc__hd{ background:var(--navy); color:var(--fg); text-align:center; padding:16px 10px; font-size:13.5px; letter-spacing:.14em; font-weight:600; }
.pc.reco .pc__hd{ background:var(--yellow); color:var(--navy-deep); }
.pc__bd{ padding:clamp(24px,2.8vw,36px); text-align:center; }
.pc__nm{ font-size:12.5px; letter-spacing:.2em; color:var(--mut); }
.pc__pr{ font-family:var(--en); font-size:clamp(30px,3.6vw,42px); font-weight:300; color:var(--navy); margin:12px 0 4px; }
.pc__pr em{ font-style:normal; font-size:.4em; letter-spacing:.14em; color:var(--mut); margin-left:4px; }
.pc__ls{ margin:22px 0 0; padding:20px 0 0; border-top:1px solid var(--line); list-style:none; text-align:left; }
.pc__ls li{ font-size:12.5px; color:var(--mut); line-height:2.2; letter-spacing:.06em; padding-left:1.2em; position:relative; }
.pc__ls li::before{ content:""; position:absolute; left:2px; top:.95em; width:5px; height:5px; border-radius:50%; background:var(--yellow); }
.factors{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(30px,3.6vw,44px); }
.factor{ background:var(--card); padding:22px 14px; text-align:center; }
.factor b{ display:block; font-size:13px; letter-spacing:.12em; color:var(--navy); margin-bottom:6px; }
.factor span{ font-size:11px; color:var(--mut); letter-spacing:.08em; }
.pnote{ font-size:11.5px; color:var(--mut); margin-top:20px; letter-spacing:.08em; line-height:2; }
@media (max-width:900px){ .pricecards{ grid-template-columns:1fr; } .factors{ grid-template-columns:repeat(2,1fr); } }

/* ---------- faq ---------- */
.faq{ margin-top:clamp(40px,5vw,58px); border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:16px; padding:clamp(20px,2.4vw,28px) 4px; font-size:14.5px; font-weight:600; letter-spacing:.08em; color:var(--navy); transition:.3s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--yellow-d); }
.faq summary::before{ content:"Q"; font-family:var(--en); color:var(--yellow-d); font-weight:400; letter-spacing:0; }
.faq summary::after{ content:"+"; margin-left:auto; font-family:var(--en); font-size:18px; color:var(--mut); transition:transform .3s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .faq__a{ display:flex; gap:16px; padding:0 4px clamp(20px,2.4vw,28px); font-size:13px; color:var(--mut); line-height:2.15; letter-spacing:.05em; }
.faq .faq__a::before{ content:"A"; font-family:var(--en); color:var(--navy); }
.faq .faq__a p{ flex:1; }

/* ---------- case study ---------- */
.case{ border:1px solid var(--line); background:var(--card); margin-top:clamp(30px,4vw,46px); }
.case__hd{ background:var(--navy); color:var(--fg); padding:clamp(24px,3vw,36px) clamp(24px,3vw,40px); display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.case__hd .k{ font-family:var(--en); font-size:10px; letter-spacing:.3em; color:var(--yellow-2); display:block; margin-bottom:12px; }
.case__hd h3{ font-size:clamp(17px,2.2vw,23px); font-weight:600; letter-spacing:.1em; line-height:1.6; }
.case__hd .cl{ font-size:12px; color:var(--mut-l); margin-top:6px; letter-spacing:.12em; }
.case__meta{ display:flex; gap:26px; font-size:11.5px; color:var(--mut-l); letter-spacing:.1em; white-space:nowrap; }
.case__meta b{ display:block; font-family:var(--en); font-size:9px; letter-spacing:.24em; color:var(--yellow-2); font-weight:400; margin-bottom:4px; }
.case__bd{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.case__cell{ background:var(--card); padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,40px); }
.case__cell h4{ font-family:var(--en); font-size:10.5px; letter-spacing:.28em; color:var(--yellow-d); font-weight:400; margin-bottom:12px; }
.case__cell p{ font-size:12.5px; color:var(--mut); line-height:2.15; letter-spacing:.04em; }
.case__strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); }
.case__strip img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.case__cmt{ border-top:3px solid var(--yellow); padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,40px); background:#FFFDF5; }
.case__cmt h4{ font-family:var(--en); font-size:10.5px; letter-spacing:.28em; color:var(--yellow-d); font-weight:400; margin-bottom:12px; }
.case__cmt p{ font-size:13px; color:var(--ink); line-height:2.15; }
.case__watch{ border-top:1px solid var(--line); padding:18px clamp(24px,3vw,40px); }
.case__watch a{ font-family:var(--en); font-size:10.5px; letter-spacing:.18em; border:1px solid var(--line); color:var(--navy); padding:12px 18px; display:inline-block; transition:.3s; }
.case__watch a:hover{ background:var(--navy); color:var(--paper); }
@media (max-width:800px){ .case__bd{ grid-template-columns:1fr; } .case__strip{ grid-template-columns:repeat(3,1fr); } .case__strip img:nth-child(n+4){ display:none; } }

/* ---------- process example (about) ---------- */
.pex__tag{ display:inline-block; background:var(--yellow); color:var(--navy-deep); font-size:12px; font-weight:600; letter-spacing:.16em; padding:9px 20px; margin-top:clamp(36px,4.6vw,56px); }
.pex{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px); margin-top:clamp(24px,3vw,38px); }
.pex__c{ background:var(--card); border:1px solid var(--line); }
.pex__ph{ aspect-ratio:16/10; overflow:hidden; background:var(--navy-2); display:flex; align-items:center; justify-content:center; }
.pex__ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.pex__ph svg{ width:64px; height:64px; }
.pex__bd{ padding:clamp(16px,1.8vw,24px); }
.pex__st{ font-family:var(--en); font-size:10px; letter-spacing:.26em; color:var(--yellow-d); }
.pex__nm{ font-size:14.5px; font-weight:600; letter-spacing:.12em; color:var(--navy); margin:6px 0 10px; }
.pex__pt{ font-size:12.5px; font-weight:600; color:var(--navy); letter-spacing:.06em; margin-bottom:8px; }
.pex__pt::before{ content:"◆ "; color:var(--yellow-d); }
.pex__tx{ font-size:11.5px; color:var(--mut); line-height:2; letter-spacing:.03em; }
@media (max-width:900px){ .pex{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pex{ grid-template-columns:1fr; } }

/* ---------- flow arrows ---------- */
.flow__s{ position:relative; }
.flow__s:not(:last-child)::after{
  content:"→"; position:absolute; right:0; top:50%; transform:translate(50%,-50%);
  font-family:var(--en); font-size:15px; font-weight:400; color:var(--yellow-d);
  background:var(--card); padding:2px 3px; z-index:2; line-height:1;
}
@media (max-width:900px){ .flow__s:nth-child(4n)::after{ display:none; } }
@media (max-width:560px){ .flow__s:nth-child(4n)::after{ display:inline; } .flow__s:nth-child(2n)::after{ display:none; } }

.pex__c{ position:relative; }
.pex__c:not(:last-child)::after{
  content:"→"; position:absolute; top:31%; right:calc(-1 * clamp(16px,2vw,26px) / 2);
  transform:translate(50%,-50%);
  font-family:var(--en); font-size:22px; color:var(--yellow); z-index:2; line-height:1;
  text-shadow:0 0 6px var(--paper);
}
.pex__c:nth-child(4n)::after{ content:"↓"; right:auto; left:50%; top:auto; bottom:calc(-1 * clamp(16px,2vw,26px) / 2 - 12px); transform:translateX(-50%); }
.pex__c:last-child::after{ display:none; }
@media (max-width:900px){
  .pex__c:nth-child(4n)::after{ content:"→"; left:auto; bottom:auto; right:calc(-1 * clamp(16px,2vw,26px) / 2); top:31%; transform:translate(50%,-50%); }
  .pex__c:nth-child(2n)::after{ content:"↓"; right:auto; left:50%; top:auto; bottom:calc(-1 * clamp(16px,2vw,26px) / 2 - 12px); transform:translateX(-50%); }
}
@media (max-width:560px){
  .pex__c:not(:last-child)::after, .pex__c:nth-child(2n)::after, .pex__c:nth-child(4n)::after{
    content:"↓"; right:auto; left:50%; top:auto; bottom:-26px; transform:translateX(-50%);
  }
}

/* ---------- price tiers (about) ---------- */
.ptier{ display:inline-flex; align-items:center; gap:12px; margin-top:clamp(40px,5vw,60px); }
.ptier .no{ font-family:var(--en); font-size:12px; letter-spacing:.1em; background:var(--navy); color:var(--fg); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ptier h3{ font-size:clamp(16px,2vw,20px); font-weight:600; letter-spacing:.12em; color:var(--navy); }
.ptier .en2{ font-family:var(--en); font-size:10px; letter-spacing:.26em; color:var(--yellow-d); margin-left:6px; }
.ptier__lead{ font-size:12.5px; color:var(--mut); letter-spacing:.06em; margin-top:10px; line-height:2; }

/* ---------- mobile drawer menu ---------- */
.mburger{ display:none; position:fixed; top:16px; right:16px; z-index:220; width:44px; height:44px;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
  background:rgba(31,42,76,.4); backdrop-filter:blur(8px); border-radius:2px; cursor:pointer; border:0; }
.mburger span{ display:block; width:20px; height:1.5px; background:var(--fg); transition:.3s; }
.mdim{ position:fixed; inset:0; background:rgba(10,15,32,.55); z-index:230; opacity:0; pointer-events:none; transition:opacity .35s; }
.mdrawer{ position:fixed; top:0; right:0; bottom:0; width:min(82vw,340px); background:var(--navy-deep); z-index:240;
  display:flex; flex-direction:column; padding:70px 30px 26px;
  transform:translateX(105%); transition:transform .4s cubic-bezier(.2,.7,.3,1); box-shadow:-20px 0 60px rgba(10,15,32,.5); overflow-y:auto; }
.mnav-open .mdim{ opacity:1; pointer-events:auto; }
.mnav-open .mdrawer{ transform:none; }
.mdrawer .mx{ position:absolute; top:18px; right:20px; font-family:var(--en); font-size:12px; letter-spacing:.2em; color:var(--mut-l); cursor:pointer; padding:6px; background:none; border:0; }
.mdrawer a{ display:flex; align-items:baseline; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-l); color:var(--fg); }
.mdrawer .en3{ font-family:var(--en); font-size:13px; letter-spacing:.22em; }
.mdrawer .jp3{ font-size:10.5px; color:var(--mut-l); letter-spacing:.14em; }
.mdrawer .cbtn{ margin-top:auto; text-align:center; border:1px solid var(--yellow); color:var(--yellow-2);
  font-family:var(--en); font-size:12px; letter-spacing:.22em; padding:16px; border-radius:2px; display:block; }
.mdrawer .cbtn:hover{ background:var(--yellow); color:var(--navy-deep); }
@media (max-width:900px){ .mburger{ display:flex; } }
[id="price"], [id="faq"]{ scroll-margin-top:90px; }

/* ---------- LINE CTA ---------- */
.cta2{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:44px; }
.btn.line{ background:#06C755; border-color:#06C755; color:#fff; padding:20px 38px; font-size:13px; display:inline-flex; align-items:center; gap:12px; }
.btn.line:hover{ background:#05b34c; border-color:#05b34c; color:#fff; }
.btn.line svg{ width:22px; height:22px; flex-shrink:0; }
.cta2 .btn.mailb{ padding:20px 38px; font-size:12px; }
.cta .cta2 .btn.mailb, .navy .cta2 .btn.mailb{ border-color:var(--line-l); color:var(--fg); }
.cta .cta2 .btn.mailb:hover, .navy .cta2 .btn.mailb:hover{ background:var(--fg); color:var(--navy); }
.ctanote{ font-size:11.5px; color:var(--mut); margin-top:22px; letter-spacing:.08em; line-height:2; }
.cta .ctanote{ color:var(--mut-l); }

/* ---------- company info ---------- */
.cinfo{ border:1px solid var(--line); background:var(--card); margin-top:clamp(36px,4.6vw,56px); }
.cinfo dl{ display:grid; grid-template-columns:200px 1fr; margin:0; }
.cinfo dt{ padding:clamp(16px,2vw,22px) clamp(20px,2.6vw,32px); font-size:12.5px; font-weight:600; letter-spacing:.14em; color:var(--navy); background:rgba(31,42,76,.04); border-bottom:1px solid var(--line); }
.cinfo dd{ padding:clamp(16px,2vw,22px) clamp(20px,2.6vw,32px); font-size:13px; color:var(--mut); letter-spacing:.06em; line-height:2; border-bottom:1px solid var(--line); margin:0; }
.cinfo dt:last-of-type, .cinfo dd:last-of-type{ border-bottom:0; }
.cinfo dd ul{ margin:0; padding-left:1.2em; }
.cinfo dd .en4{ font-family:var(--en); letter-spacing:.08em; }
@media (max-width:640px){ .cinfo dl{ grid-template-columns:1fr; } .cinfo dt{ border-bottom:0; padding-bottom:4px; } .cinfo dd{ padding-top:0; } }