/* ============================================================
   SHISEILABO WEB CATALOG  —  Flipbook
   想像以上を、創造で。
   Inside-page sizing uses container-query units (cqh/cqw) so all
   type & spacing scale with the rendered leaf (design = 600 x 840).
   1cqh = 8.4px(design) , 1cqw = 6px(design)
   ============================================================ */

:root{
  --ink:        #14233a;
  --ink-soft:   #3c4a60;
  --teal:       #0e8390;
  --teal-deep:  #0a5d68;
  --blue:       #1b93cf;
  --orange:     #d96a2c;
  --orange-soft:#e88a4e;
  --paper:      #f8f6f0;
  --paper-2:    #f0ece2;
  --line:       #d9d3c6;
  --muted:      #6d7585;
  --gold:       #b9892f;

  --serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --sans:  "Noto Sans JP", "Hiragino Sans", sans-serif;
  --latin: "Cormorant Garamond", "Noto Serif JP", serif;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html,body{ height:100%; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(120% 120% at 50% -10%, #1d3b46 0%, #0e2230 45%, #081722 100%);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- top bar ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px; color:#eaf2f2; pointer-events:none;
}
.topbar .brand{ font-family:var(--latin); font-weight:600; letter-spacing:.18em; font-size:18px; text-transform:uppercase; opacity:.92; }
.topbar .brand small{ display:block; font-family:var(--sans); font-size:9.5px; letter-spacing:.34em; opacity:.6; margin-top:2px;}
.topbar .links{ pointer-events:auto; display:flex; gap:10px; }
.topbar .links a{
  font-size:11.5px; letter-spacing:.12em; color:#dfeceb; text-decoration:none;
  border:1px solid rgba(255,255,255,.32); padding:7px 14px; border-radius:40px; transition:.25s; backdrop-filter:blur(4px);
}
.topbar .links a:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.topbar .links a.primary{ background:var(--orange); border-color:var(--orange); color:#fff; }
.topbar .links a.primary:hover{ background:#fff; color:var(--orange); }

/* ---------- stage ---------- */
.stage{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 12px 88px; }
#flipbook{ box-shadow:0 40px 90px -30px rgba(0,0,0,.7); border-radius:3px; }

/* ---------- a single page leaf (query container) ---------- */
.page{
  background:var(--paper);
  overflow:hidden;
  position:relative;
  container-type:size;
}
.page-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:5.4cqh 5.2cqw 6cqh;
}
.page.--left  .page-inner{ box-shadow:inset -26px 0 36px -28px rgba(0,0,0,.28); }
.page.--right .page-inner{ box-shadow:inset  26px 0 36px -28px rgba(0,0,0,.28); }

.page-num{ position:absolute; bottom:2.1cqh; font-size:1.2cqh; letter-spacing:.22em; color:var(--muted); font-family:var(--latin); font-weight:600; }
.page.--left  .page-num{ left:5.2cqw; }
.page.--right .page-num{ right:5.2cqw; }
.page-foot{ position:absolute; bottom:2.1cqh; font-size:1.02cqh; letter-spacing:.3em; color:var(--muted); text-transform:uppercase; opacity:.7; }
.page.--left  .page-foot{ right:5.2cqw; }
.page.--right .page-foot{ left:5.2cqw; }

/* ---------- type helpers ---------- */
.eyebrow{ font-family:var(--latin); font-weight:600; text-transform:uppercase; letter-spacing:.3em; font-size:1.45cqh; color:var(--teal); display:flex; align-items:center; gap:1.6cqw; margin-bottom:2.1cqh; }
.eyebrow::before{ content:""; width:4.3cqw; height:1.5px; background:var(--orange); display:inline-block; }
.eyebrow .no{ color:var(--orange); }

h1,h2,h3{ font-family:var(--serif); font-weight:700; line-height:1.34; color:var(--ink); letter-spacing:.01em; }
.h-xl{ font-size:4.5cqh; line-height:1.28; }
.h-lg{ font-size:3.5cqh; line-height:1.3; }
.h-md{ font-size:2.75cqh; }
.lead{ font-size:1.66cqh; line-height:2.0; color:var(--ink-soft); font-weight:400; }
.small{ font-size:1.43cqh; line-height:1.9; color:var(--muted); }
.accent{ color:var(--teal); }
.accent-o{ color:var(--orange); }
.serif{ font-family:var(--serif); }
.mt-a{ margin-top:auto; }
.divider{ width:5.4cqh; height:2px; background:var(--orange); margin:2.1cqh 0; }

/* ---------- full-bleed image page ---------- */
.page.--img{ background:#0b1a24; }
.page.--img .bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.page.--img .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,20,30,.05) 0%, rgba(8,20,30,.15) 45%, rgba(8,20,30,.82) 100%); }
.page.--img .scrim.--top{ background:linear-gradient(180deg, rgba(8,20,30,.78) 0%, rgba(8,20,30,.14) 40%, rgba(8,20,30,.08) 100%); }
.page.--img .img-cap{ position:absolute; left:0; right:0; bottom:0; padding:5.2cqh 5cqw 6cqh; color:#f3f8f8; }
.page.--img .img-cap.--top{ bottom:auto; top:0; padding-top:5.6cqh; }
.page.--img .img-cap h2,.page.--img .img-cap h1{ color:#fff; }
.page.--img .img-cap .eyebrow{ color:#7fe3e0; }
.page.--img .img-cap .lead{ color:#dfeae9; }

/* ---------- cover ---------- */
.cover{ background:#06141d; }
.cover .bg{ position:absolute; inset:0; background-size:cover; background-position:60% center; }
.cover .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,12,18,.55) 0%, rgba(4,12,18,.25) 35%, rgba(4,12,18,.92) 100%); }
.cover .cv-inner{ position:absolute; inset:0; display:flex; flex-direction:column; padding:6.4cqh 5.5cqw; color:#fff; }
.cover .cv-top{ font-family:var(--latin); letter-spacing:.34em; font-size:1.6cqh; text-transform:uppercase; opacity:.85; }
.cover .cv-top small{ display:block; font-family:var(--sans); letter-spacing:.28em; font-size:1.1cqh; opacity:.6; margin-top:.5cqh;}
.cover .cv-mid{ margin-top:auto; }
.cover h1{ color:#fff; font-size:5.4cqh; line-height:1.32; text-shadow:0 4px 30px rgba(0,0,0,.5); }
.cover .cv-sub{ margin-top:2.2cqh; font-size:1.7cqh; letter-spacing:.06em; color:#dfeae9; line-height:1.7; }
.cover .cv-rule{ width:10cqw; height:2px; background:var(--orange); margin:3cqh 0 0; }
.cover .cv-foot{ margin-top:3.6cqh; font-size:1.35cqh; letter-spacing:.2em; color:#bcd2d1; }

/* back cover */
.back{ background:radial-gradient(120% 120% at 50% 0%, #15323b 0%, #0a1d26 70%); color:#eaf3f2;}
.back .bk-inner{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6cqh 6cqw; }
.back h2{ color:#fff; font-size:4cqh; line-height:1.4; }
.back .bk-rule{ width:9cqw; height:2px; background:var(--orange); margin:2.8cqh auto; }
.back .bk-links{ margin-top:1.8cqh; display:flex; flex-direction:column; gap:1.5cqh; align-items:center; }
.back .bk-links a{ color:#eaf3f2; text-decoration:none; font-size:1.6cqh; letter-spacing:.06em; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:.4cqh; transition:.25s; }
.back .bk-links a:hover{ color:var(--orange-soft); border-color:var(--orange-soft); }
.back .bk-foot{ position:absolute; bottom:4cqh; left:0; right:0; text-align:center; font-size:1.05cqh; letter-spacing:.3em; opacity:.5; text-transform:uppercase; }
.back .bk-mark{ font-family:var(--latin); letter-spacing:.3em; font-size:1.7cqh; text-transform:uppercase; margin-bottom:3.6cqh; opacity:.85;}

/* ---------- contents (目次) ---------- */
.toc{ list-style:none; margin-top:.6cqh; }
.toc li{ display:flex; align-items:baseline; gap:1.6cqw; padding:1.18cqh 0; border-bottom:1px solid var(--line); }
.toc .n{ font-family:var(--latin); font-weight:600; color:var(--orange); font-size:1.85cqh; width:4.6cqw; }
.toc .t{ flex:1; font-size:1.58cqh; color:var(--ink); }
.toc .t small{ display:block; font-family:var(--latin); letter-spacing:.16em; font-size:1.12cqh; color:var(--muted); text-transform:uppercase; margin-top:.2cqh; }
.toc .pg{ font-family:var(--latin); color:var(--muted); font-size:1.45cqh; }

/* ---------- feature list ---------- */
.feat{ list-style:none; }
.feat li{ padding:1.55cqh 0; border-top:1px solid var(--line); }
.feat li:last-child{ border-bottom:1px solid var(--line); }
.feat h3{ font-size:1.78cqh; display:flex; align-items:center; gap:1.4cqw; }
.feat h3 .ic{ color:var(--teal); font-size:1.4cqh; font-family:var(--latin); font-weight:700; }
.feat p{ font-size:1.36cqh; line-height:1.75; color:var(--muted); margin-top:.6cqh; }

/* ---------- three traits / DNA ---------- */
.trait .row{ display:flex; gap:2cqw; padding:1.5cqh 0; border-bottom:1px solid var(--line); }
.trait .k{ font-family:var(--latin); font-weight:700; color:var(--orange); font-size:2.6cqh; line-height:1; width:5.6cqw; }
.trait .b h3{ font-size:1.78cqh; }
.trait .b p{ font-size:1.3cqh; color:var(--muted); line-height:1.7; margin-top:.5cqh; }

/* ---------- engine formula ---------- */
.formula{ display:flex; align-items:center; justify-content:center; gap:1.4cqw; margin:3cqh 0 2cqh; flex-wrap:wrap; }
.formula .chip{ border:1.5px solid var(--ink); border-radius:6px; padding:1.6cqh 1.4cqw; min-width:15cqw; text-align:center; font-family:var(--serif); font-weight:700; font-size:1.66cqh; color:var(--ink); background:#fff; }
.formula .chip small{ display:block; font-family:var(--latin); font-size:1.05cqh; letter-spacing:.12em; color:var(--teal); margin-top:.5cqh; text-transform:uppercase;}
.formula .op{ font-family:var(--serif); font-size:2.4cqh; color:var(--orange); }
.pmbar{ text-align:center; background:var(--teal); color:#fff; padding:1.3cqh; border-radius:6px; font-family:var(--serif); font-weight:700; font-size:1.66cqh; letter-spacing:.04em; }

/* ---------- domain cards ---------- */
.domains{ display:flex; flex-direction:column; gap:1.4cqh; margin-top:1.6cqh; }
.domain{ display:flex; gap:2cqw; padding:1.8cqh 2cqw; background:#fff; border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:4px; }
.domain:nth-child(2){ border-left-color:var(--blue); }
.domain:nth-child(3){ border-left-color:var(--orange); }
.domain .no{ font-family:var(--latin); font-weight:700; font-size:2.9cqh; color:var(--line); line-height:1; }
.domain h3{ font-size:1.78cqh; }
.domain h3 small{ display:block; font-family:var(--latin); font-size:1.05cqh; letter-spacing:.16em; color:var(--teal); text-transform:uppercase; margin-top:.4cqh; font-weight:600;}
.domain p{ font-size:1.3cqh; color:var(--muted); line-height:1.7; margin-top:.6cqh; }

/* ---------- 12 step method ---------- */
.steps{ margin-top:1.2cqh; }
.step{ display:flex; gap:1.6cqw; padding:1.05cqh 0; border-bottom:1px dashed var(--line); }
.step .sn{ font-family:var(--latin); font-weight:700; color:var(--orange); font-size:1.55cqh; width:5cqw; flex:none; padding-top:.1cqh; }
.step .st{ font-size:1.4cqh; line-height:1.45; color:var(--ink); }
.phase-tag{ display:inline-block; align-self:flex-start; font-family:var(--latin); font-size:1.1cqh; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:var(--teal); padding:.5cqh 1.6cqw; border-radius:30px; margin-bottom:1.2cqh; }
.phase-tag.--b{ background:var(--orange); }

/* ---------- stats / case ---------- */
.stats{ display:flex; gap:2cqw; margin-top:1cqh; }
.stat{ flex:1; }
.stat .num{ font-family:var(--serif); font-weight:700; font-size:3.6cqh; color:var(--teal); line-height:1; }
.stat .num .u{ font-size:1.8cqh; }
.stat .lb{ font-size:1.18cqh; color:var(--muted); margin-top:.7cqh; letter-spacing:.04em; }
.casebox{ background:#fff; border:1px solid var(--line); border-radius:5px; padding:2cqh 2cqw; margin-top:1.5cqh; }
.casebox .ct{ font-family:var(--latin); letter-spacing:.14em; font-size:1.2cqh; color:var(--orange); text-transform:uppercase; }
.casebox h3{ font-size:1.66cqh; margin:.6cqh 0 1cqh; }
.casebox p{ font-size:1.3cqh; color:var(--muted); line-height:1.7; }

/* ---------- profile table ---------- */
.profile{ width:100%; border-collapse:collapse; margin-top:1.2cqh; }
.profile th,.profile td{ text-align:left; vertical-align:top; padding:1.3cqh .6cqw; border-bottom:1px solid var(--line); font-size:1.4cqh; }
.profile th{ width:32%; color:var(--teal); font-weight:600; letter-spacing:.04em; }
.profile td{ color:var(--ink-soft); line-height:1.65; }

/* ---------- contact ---------- */
.contact-cta{ margin-top:1.8cqh; display:flex; flex-direction:column; gap:1.3cqh; }
.contact-cta a{ display:flex; align-items:center; justify-content:space-between; gap:1.4cqw; text-decoration:none; padding:1.8cqh 2.4cqw; border-radius:6px; font-size:1.66cqh; letter-spacing:.04em; transition:.25s; font-weight:500; }
.contact-cta a.web{ background:var(--ink); color:#fff; }
.contact-cta a.web:hover{ background:var(--teal-deep); }
.contact-cta a.ask{ background:var(--orange); color:#fff; }
.contact-cta a.ask:hover{ background:var(--orange-soft); }

/* ---------- process steps (4) ---------- */
.proc{ margin-top:1.2cqh; }
.proc .pstep{ display:flex; gap:2cqw; padding:1.5cqh 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.proc .pstep .pn{ width:5cqh; height:5cqh; flex:none; border-radius:50%; border:1.5px solid var(--teal); color:var(--teal); display:flex; align-items:center; justify-content:center; font-family:var(--latin); font-weight:700; font-size:1.7cqh; }
.proc .pstep h3{ font-size:1.66cqh; }
.proc .pstep p{ font-size:1.25cqh; color:var(--muted); line-height:1.65; margin-top:.3cqh; }

/* ---------- target grid ---------- */
.tgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6cqw; margin-top:1.6cqh; }
.tgrid .tg{ background:#fff; border:1px solid var(--line); border-radius:5px; padding:1.7cqh 1.8cqw; }
.tgrid .tg h3{ font-size:1.55cqh; color:var(--teal); }
.tgrid .tg p{ font-size:1.2cqh; color:var(--muted); margin-top:.6cqh; line-height:1.6; }

/* ---------- 協業プログラム (collaboration programs 01-05) ---------- */
.proglist{ display:flex; flex-direction:column; gap:1.25cqh; margin-top:1.4cqh; }
.program{ --pc:var(--teal); position:relative; display:flex; gap:1.9cqw; padding:1.5cqh 1.8cqw; background:#fff; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.program::before{ content:""; position:absolute; inset:0; background:var(--pc); opacity:.05; pointer-events:none; }
.program::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--pc); }
.program.c1{ --pc:#0e8390; } .program.c2{ --pc:#1b93cf; } .program.c3{ --pc:#1f9e86; }
.program.c4{ --pc:#d96a2c; } .program.c5{ --pc:#b9892f; }
.program .pno{ position:relative; z-index:1; flex:none; align-self:flex-start; width:5.6cqh; height:5.6cqh; border-radius:50%; background:var(--pc); color:#fff; font-family:var(--latin); font-weight:700; font-size:2.5cqh; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px -3px var(--pc); }
.program .pb{ position:relative; z-index:1; flex:1; }
.program .pb h3{ font-size:1.62cqh; line-height:1.3; }
.program .pb .tgt{ display:inline-block; font-size:1.12cqh; color:#fff; background:var(--ink-soft); border-radius:30px; padding:.35cqh 1.5cqw; margin:.7cqh 0 .6cqh; letter-spacing:.02em; }
.program .pb .svc{ font-size:1.22cqh; color:var(--muted); line-height:1.6; }
.program .pb .area{ display:inline-block; font-size:1.08cqh; color:var(--pc); margin-top:.6cqh; font-family:var(--latin); font-weight:600; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- Value Engine : Venn diagram ---------- */
.venn{ position:relative; width:84cqw; aspect-ratio:1 / 0.9; margin:2.6cqh auto 1.4cqh; }
.venn .blob{ position:absolute; width:62%; aspect-ratio:1; border-radius:50%; mix-blend-mode:multiply; }
.venn .m { top:0;     left:19%; background:radial-gradient(circle at 42% 40%, rgba(14,131,144,.66), rgba(14,131,144,.40)); }
.venn .t { bottom:0;  left:0;   background:radial-gradient(circle at 60% 42%, rgba(27,147,207,.62), rgba(27,147,207,.36)); }
.venn .cr{ bottom:0;  right:0;  background:radial-gradient(circle at 40% 42%, rgba(217,106,44,.60), rgba(217,106,44,.34)); }
.venn .vlab{ position:absolute; text-align:center; font-family:var(--latin); font-weight:700; color:#fff; font-size:1.8cqh; line-height:1.1; text-shadow:0 1px 7px rgba(0,0,0,.30); white-space:nowrap; }
.venn .vlab small{ display:block; font-family:var(--sans); font-weight:500; font-size:1.05cqh; margin-top:.4cqh; opacity:.95; letter-spacing:.02em; }
.venn .lab-m { top:13%;    left:50%; transform:translateX(-50%); }
.venn .lab-t { bottom:13%; left:22%; transform:translateX(-50%); }
.venn .lab-cr{ bottom:13%; right:22%; transform:translateX(50%); }
.venn .vcenter{ position:absolute; top:51%; left:50%; transform:translate(-50%,-50%); text-align:center; font-family:var(--serif); font-weight:700; color:#fff; font-size:1.6cqh; line-height:1.25; text-shadow:0 1px 9px rgba(0,0,0,.5); }
.venn .vcenter small{ display:block; font-family:var(--latin); font-weight:600; font-size:1.02cqh; letter-spacing:.2em; opacity:.92; margin-bottom:.3cqh; text-transform:uppercase; }

/* ---------- Three Domains : editorial triad ---------- */
.triad{ margin-top:1.8cqh; }
.triad .band{ --ac:var(--teal); position:relative; padding:1.9cqh 0 1.9cqh 4cqw; border-top:1px solid var(--line); overflow:hidden; }
.triad .band:last-child{ border-bottom:1px solid var(--line); }
.triad .band.d1{ --ac:#0e8390; } .triad .band.d2{ --ac:#1b93cf; } .triad .band.d3{ --ac:#d96a2c; }
.triad .band::before{ content:""; position:absolute; left:0; top:1.9cqh; bottom:1.9cqh; width:3px; background:var(--ac); border-radius:3px; }
.triad .ghost{ position:absolute; right:0; top:50%; transform:translateY(-50%); font-family:var(--latin); font-weight:700; font-size:9.4cqh; line-height:.7; color:var(--ac); opacity:.12; pointer-events:none; }
.triad .lab{ font-family:var(--latin); font-weight:700; letter-spacing:.24em; text-transform:uppercase; font-size:1.12cqh; color:var(--ac); }
.triad .band h3{ font-size:2.5cqh; margin:.3cqh 0 .5cqh; }
.triad .band p{ font-size:1.32cqh; color:var(--muted); line-height:1.65; max-width:76%; }

/* ---------- service cards (marketing / produce) ---------- */
.scards{ display:grid; grid-template-columns:1fr 1fr; gap:1.3cqh 1.5cqw; margin-top:1.6cqh; }
.scards.col1{ grid-template-columns:1fr; }
.scard{ --ac:var(--teal); position:relative; background:#fff; border:1px solid var(--line); border-radius:7px; padding:1.7cqh 1.7cqw 1.6cqh; overflow:hidden; }
.scard::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ac); }
.scard .si{ font-family:var(--latin); font-weight:700; font-size:1.05cqh; letter-spacing:.18em; color:var(--ac); text-transform:uppercase; }
.scard h3{ font-size:1.62cqh; margin:.5cqh 0 .55cqh; }
.scard p{ font-size:1.2cqh; color:var(--muted); line-height:1.6; }

/* ---------- method : vertical timeline ---------- */
.tl{ margin-top:1.4cqh; }
.tl .ti{ position:relative; display:flex; gap:2.2cqw; }
.tl .ti .node{ position:relative; flex:none; width:6.4cqw; display:flex; justify-content:center; }
.tl .ti .node b{ width:3.4cqh; height:3.4cqh; border-radius:50%; background:var(--teal); color:#fff; font-family:var(--latin); font-weight:700; font-size:1.4cqh; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; box-shadow:0 2px 6px -2px rgba(14,131,144,.6); }
.tl.--b .ti .node b{ background:var(--orange); box-shadow:0 2px 6px -2px rgba(217,106,44,.6); }
.tl .ti .node::before{ content:""; position:absolute; top:1.7cqh; bottom:-1.7cqh; left:50%; width:2px; background:var(--line); transform:translateX(-50%); }
.tl .ti:last-child .node::before{ display:none; }
.tl .ti .tx{ font-size:1.4cqh; line-height:1.35; padding:.8cqh 0 1.6cqh; }
.tl .ti .tx small{ display:block; color:var(--muted); font-size:1.08cqh; margin-top:.25cqh; }

/* ---------- product : problem → solution map ---------- */
.psmap{ margin-top:1.3cqh; }
.psmap .h{ font-family:var(--serif); font-weight:700; font-size:1.66cqh; margin-bottom:.4cqh; }
.psrow{ display:grid; grid-template-columns:1fr auto 1.15fr; align-items:center; gap:1.4cqw; padding:1.05cqh 0; border-bottom:1px dashed var(--line); }
.psrow .pq{ font-size:1.2cqh; color:var(--muted); line-height:1.45; }
.psrow .arr{ color:var(--orange); font-family:var(--latin); font-weight:700; font-size:1.7cqh; }
.psrow .ps{ font-size:1.28cqh; color:var(--ink); font-weight:500; line-height:1.35; }
.psrow .ps small{ display:block; font-family:var(--latin); font-size:1cqh; color:var(--teal); letter-spacing:.05em; margin-top:.2cqh; }
.devline{ display:flex; gap:1.5cqw; margin-top:1.4cqh; }
.devline .dv{ flex:1; background:#fff; border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:5px; padding:1.2cqh 1.3cqw; }
.devline .dv:nth-child(2){ border-left-color:var(--blue); }
.devline .dv h3{ font-size:1.42cqh; }
.devline .dv p{ font-size:1.08cqh; color:var(--muted); line-height:1.55; margin-top:.4cqh; }

/* ---------- case studies : graphical metrics ---------- */
.bigstat{ display:flex; align-items:baseline; gap:1.6cqw; margin-top:1.4cqh; padding:1.2cqh 1.8cqw; background:linear-gradient(100deg, var(--teal-deep), var(--teal)); border-radius:8px; color:#fff; }
.bigstat .bn{ font-family:var(--serif); font-weight:700; font-size:4.4cqh; line-height:1; }
.bigstat .bn .u{ font-size:2.2cqh; }
.bigstat .bl{ font-size:1.25cqh; line-height:1.4; opacity:.95; }
.mgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4cqh 1.5cqw; margin-top:1.5cqh; }
.mcard{ --ac:var(--teal); background:#fff; border:1px solid var(--line); border-radius:8px; padding:1.6cqh 1.6cqw; }
.mcard .mcase{ font-family:var(--latin); font-size:1cqh; letter-spacing:.12em; color:var(--ac); text-transform:uppercase; }
.mcard .mnum{ font-family:var(--serif); font-weight:700; font-size:3.9cqh; color:var(--ac); line-height:1; margin-top:.4cqh; }
.mcard .mnum .u{ font-size:1.9cqh; }
.mcard .mnum .ar{ font-size:2cqh; }
.mcard .mlb{ font-size:1.18cqh; color:var(--muted); margin-top:.5cqh; line-height:1.45; }
.mcard .bar{ height:.7cqh; border-radius:30px; background:var(--paper-2); margin-top:1cqh; overflow:hidden; }
.mcard .bar i{ display:block; height:100%; background:var(--ac); border-radius:30px; }
.mcard.c1{ --ac:#0e8390; } .mcard.c2{ --ac:#1b93cf; } .mcard.c3{ --ac:#d96a2c; } .mcard.c4{ --ac:#b9892f; }

/* ---------- profile stat chips ---------- */
.pchips{ display:flex; gap:1.4cqw; margin-top:1.2cqh; }
.pchip{ flex:1; background:#fff; border:1px solid var(--line); border-top:3px solid var(--teal); border-radius:6px; padding:1.2cqh 1cqw; text-align:center; }
.pchip:nth-child(2){ border-top-color:var(--blue); }
.pchip:nth-child(3){ border-top-color:var(--orange); }
.pchip .pn{ font-family:var(--serif); font-weight:700; font-size:2.4cqh; color:var(--ink); line-height:1; }
.pchip .pn .u{ font-size:1.3cqh; }
.pchip .pl{ font-size:1.02cqh; color:var(--muted); margin-top:.5cqh; letter-spacing:.04em; }

/* ============================================================
   loader + controls + hint
   ============================================================ */
.loader{ position:fixed; inset:0; background:#0a1d26; z-index:90; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:20px; transition:opacity .6s; }
.loader.hide{ opacity:0; pointer-events:none; }
.loader .ld-mark{ font-family:var(--latin); letter-spacing:.3em; color:#eaf3f2; font-size:16px; text-transform:uppercase; }
.loader .ld-bird{ width:42px; height:42px; border:3px solid rgba(255,255,255,.2); border-top-color:var(--orange); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.controls{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:40; display:flex; align-items:center; gap:16px; color:#eaf3f2; }
.controls button{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:.2s; backdrop-filter:blur(6px); }
.controls button:hover{ background:#fff; color:var(--ink); }
.controls .pageinfo{ font-family:var(--latin); letter-spacing:.18em; font-size:13px; min-width:74px; text-align:center; }
.hint{ position:fixed; bottom:78px; left:50%; transform:translateX(-50%); z-index:40; color:#bcd2d1; font-size:11px; letter-spacing:.14em; opacity:.8; transition:opacity .5s; text-align:center; padding:0 12px; }
.hint.hide{ opacity:0; pointer-events:none; }

/* mobile edge tap zones — hidden on desktop */
.edge{ display:none; }

/* ============================================================
   responsive (book fits; just tighten chrome on small screens)
   ============================================================ */
@media (max-width:720px){
  .topbar{ padding:10px 14px; }
  .topbar .brand{ font-size:15px; }
  .topbar .brand small{ display:none; }
  .stage{ padding:54px 4px 92px; touch-action:pan-y; }

  /* large left/right tap targets: reliable flipping + intercepts iOS edge-swipe-back */
  .edge{
    display:flex; align-items:center; z-index:45;
    position:fixed; top:58px; bottom:74px; width:17vw; max-width:80px; min-width:48px;
    border:none; cursor:pointer; color:#fff; font-size:26px; font-family:var(--latin);
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    opacity:.9; transition:opacity .2s; padding:0;
  }
  .edge:active{ opacity:1; }
  .edge .c{ width:38px; height:38px; border-radius:50%; background:rgba(8,20,30,.42); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; }
  .edge-prev{ left:0; justify-content:flex-start; padding-left:6px; background:linear-gradient(90deg, rgba(8,20,30,.34), rgba(8,20,30,0)); }
  .edge-next{ right:0; justify-content:flex-end; padding-right:6px; background:linear-gradient(270deg, rgba(8,20,30,.34), rgba(8,20,30,0)); }

  /* lift the bottom controls above the mobile browser toolbar / notch */
  .controls{ bottom:calc(env(safe-area-inset-bottom, 0px) + 14px); gap:14px; }
  .controls button{ width:50px; height:50px; font-size:20px; background:rgba(8,20,30,.5); }
  .hint{ bottom:calc(env(safe-area-inset-bottom, 0px) + 74px); }
}