/* Presentation layer on top of styles.css: hero studio light, the IDEA → FORM → PRODUCT strip,
   case cards, and dialogs. The original page structure and business content are unchanged. */

/* ---------- Hero: the real bust (transparent cut-out) on a studio backdrop; the shader draws it once lit ---------- */
/* Every glow below is sized to end inside its box, so nothing gets cut off at the edges on wide or zoomed-out screens. */
.hero-art{overflow:hidden;background:radial-gradient(ellipse 34% 52% at 70% 55%,#5e2a3a 0%,#5e2a3a00 100%)}
.hero-art{right:0;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.art-grid{display:none}
.hero-art:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 30% 42% at 70% 50%,#c2486a40 0%,transparent 70%),radial-gradient(ellipse 18% 26% at 76% 34%,#7d8cff22 0%,transparent 70%)}
.hero-art img{object-fit:contain;object-position:72% 100%}
.hero-art .studio-light{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.hero-art.is-lit .studio-light{opacity:1}
.hero-art.is-lit img{visibility:hidden}
.hero-art:after{pointer-events:none}
/* Bottom fade fixed to the hero itself: the art moves with parallax, so its own fade can slide out of view
   and leave a hard cut at the hero's bottom edge. This one stays put (above the art, below the text). */
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;z-index:-1;pointer-events:none;background:linear-gradient(0deg,var(--bg) 8%,#14111400 100%)}

/* ---------- Seamless section joins: backgrounds fade into the page colour instead of hard edges ---------- */
.process{background:linear-gradient(180deg,var(--bg) 0,#eee7ea 170px,#eee7ea calc(100% - 170px),var(--bg) 100%);padding-top:190px;padding-bottom:190px}

/* Services: a short heading only (the long intro was removed at the user's request); compact like the cases heading. */
.services.section-space{padding-top:72px}
.services .section-heading,.works .section-heading{margin-bottom:28px}

/* FAQ: only the ＋ icon turns when open (the base rule also hit the question text and tilted it). */
.faq-list summary span:not([aria-hidden]),.faq-list details[open] summary span:not([aria-hidden]){transform:none;font-size:inherit;color:inherit}

/* ---------- IDEA → FORM → PRODUCT strip ---------- */
.line-v2{position:relative;padding:64px 6% 40px;max-width:var(--shell);margin:auto;border:0;overflow:visible;background:radial-gradient(ellipse 48% 44% at 50% 52%,#2a1520 0%,#2a152000 100%)}
.line-head{display:flex;justify-content:space-between;align-items:end;gap:30px;max-width:1270px;margin:0 auto}
.line-kicker{font-size:.7rem;letter-spacing:.16em;color:#ef9aa8}
.line-head h2{font-size:clamp(1.6rem,3vw,2.9rem);line-height:1.3;margin-top:10px;word-break:keep-all;overflow-wrap:anywhere}
.line-lede{font-size:.86rem;line-height:1.9;color:#d0b9bf;text-align:right}
.line-v2 .stage{position:relative;max-width:1270px;margin:14px auto 0;aspect-ratio:var(--ar,1500/450)}
.line-v2 .stage:before{content:"";position:absolute;inset:-6% -4%;pointer-events:none;background:radial-gradient(ellipse 16% 34% at 83% 55%,#c4705838 0%,transparent 100%),radial-gradient(ellipse 16% 34% at 50% 55%,#8a7f8a2a 0%,transparent 100%),radial-gradient(ellipse 16% 34% at 17% 55%,#4f5b9a30 0%,transparent 100%)}
.line-v2 svg.fig{position:absolute;inset:0;width:100%;height:100%;display:block}
.slot-hit{position:absolute;background:none;border:0;border-radius:24px;padding:0}
.slot-hit:hover{background:radial-gradient(ellipse at 50% 70%,#ffffff0d,transparent 70%)}
.slot-hit:focus-visible{outline:2px dashed var(--accent);outline-offset:-4px}
.line-v2 .cta text{transition:fill .2s}.line-v2 .cta:hover text,.line-v2 .cta:focus text{fill:var(--accent)}
.line-steps{list-style:none;padding:0;margin:20px auto 0;max-width:1270px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;color:#d0b9bf;font-size:.85rem;text-align:center}
.line-steps span:first-child{color:#ef9aa8;font-size:.7rem}
.js .line-steps{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.line-foot{max-width:1270px;margin:8px auto 0;border-top:1px solid #ffffff20;padding-top:16px;display:flex;justify-content:space-between;gap:15px;color:#bba1a9;font-size:.7rem;letter-spacing:.06em}

/* ---------- Case cards ---------- */
.case-legend{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 6px;padding:0}
.case-legend li{display:contents}
.case-legend .legend-label{display:block;font-size:.62rem;letter-spacing:.18em;color:#ffffff70;align-self:center;margin:0 2px 0 10px}
.case-legend .legend-label:first-child{margin-left:0}
.case-legend button{display:flex;align-items:center;gap:8px;border:1px solid #ffffff22;background:#ffffff08;border-radius:999px;padding:5px 12px 5px 10px;font-size:.76rem;color:#eadde2;transition:background .3s,border-color .3s,transform .35s var(--spring)}
.case-legend button i{width:10px;height:10px;border-radius:50%;background:var(--cat);box-shadow:0 0 10px var(--cat)}
.case-legend button span{font-size:.66rem;color:#ffffff80}
.case-legend button:hover{transform:translateY(-2px);border-color:var(--cat,#fff)}
.case-legend button[aria-pressed="true"]{background:color-mix(in srgb,var(--cat,#fff) 26%,transparent);border-color:var(--cat,#fff)}
.case-legend .svc{border-style:dashed}
/* One frame colour per work type. */
[data-type="figure"]{--frame-a:#f6b2c0;--frame-b:#a23a55;--frame-c:#4a1424;--tone:#ffd3dc;--cat:#ef8ea4}
[data-type="goods"]{--frame-a:#d8c2ff;--frame-b:#7656b8;--frame-c:#2b1d4a;--tone:#e9dcff;--cat:#a98bf0}
[data-type="game"]{--frame-a:#a6eee4;--frame-b:#2f8c86;--frame-c:#0f3533;--tone:#c9fff6;--cat:#5fd0c4}
[data-type="design"]{--frame-a:#ffe1a6;--frame-b:#c48a2c;--frame-c:#4a300c;--tone:#fff0cf;--cat:#f2bd5c}
.case-hand{display:flex;justify-content:center;align-items:flex-start;padding:46px 0 40px;perspective:1400px}
/* Eight cards: narrower and overlapping more than the old five. */
.case-card{--w:min(200px,calc((90vw + 7 * 46px) / 8));margin-left:-46px;--rx:0deg;--ry:0deg;--mx:50;--my:50;--holo:0;--holo-max:.85;position:relative;flex:none;width:var(--w);aspect-ratio:63/88;padding:0;border:0;background:none;border-radius:14px;transform-style:preserve-3d;transform:translateX(var(--push,0px)) translateY(calc(var(--fan-y,0px) + var(--lift,0px))) rotate(var(--fan-r,0deg)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--scale,1));transition:transform .55s var(--spring),opacity .3s,filter .4s;z-index:var(--z,1);filter:drop-shadow(0 22px 22px #0009);text-align:left}
.case-card:first-child{margin-left:0}
.case-card.is-hover,.case-card:focus-visible{--lift:-34px;--fan-r:0deg;--scale:1.07;--holo:1;--z:10;transition:transform .35s var(--spring)}
.case-card.is-hover.is-tilting{transition:transform .08s linear}
.case-card.is-dim{opacity:.32;filter:saturate(.4) drop-shadow(0 22px 22px #0009)}
.case-card.is-flying{visibility:hidden}
.card-face{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:14px;padding:9px;overflow:hidden;background:linear-gradient(150deg,var(--frame-a),var(--frame-b) 45%,var(--frame-c));box-shadow:inset 0 0 0 1px #ffffff30,inset 0 2px 0 #ffffff40}
.case-card{container-type:inline-size}
/* Text scales with the card (16px at the full 200px card); the art keeps its share of the card when the window narrows. */
.card-face{font-size:min(1rem,8cqi)}
.case-card[data-featured] .card-face{font-size:min(1rem,6.4cqi)}
.card-top,.card-art,.card-name,.card-tags,.card-stats{position:relative;z-index:1}
.card-top{display:flex;justify-content:space-between;align-items:center;padding:.12em .25em .44em;font-size:.62em;letter-spacing:.14em;color:var(--tone)}
.card-art{flex:1;border-radius:7px;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#4a3540,#16101a 75%);box-shadow:inset 0 0 0 1px #00000080,inset 0 0 22px #0008}
.card-art img,.card-art video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,center);transform:scale(1.02) translate(calc((var(--mx) - 50) * -.06px),calc((var(--my) - 50) * -.06px));transition:transform .5s}
[data-contain] .card-art img{object-fit:contain;background:#0b0809}
.card-name{display:block;padding:.56em .3em .25em}
.card-name strong{display:block;font-size:1.02em;letter-spacing:.02em;line-height:1.3;color:#fff;text-shadow:0 1px 0 #0006}
.card-name small{display:block;font-size:.66em;color:#ffffffb0;margin-top:2px}
.card-tags{display:flex;flex-wrap:wrap;gap:.25em;padding:0 .25em .38em;min-height:1.25em}
.card-tags b,.card-tags em{font-size:.56em;font-weight:700;font-style:normal;letter-spacing:.04em;padding:.22em .66em;border-radius:999px;background:#0005;color:#fff;border:1px solid #ffffff3a}
.card-tags em{font-weight:400;color:#ffffffb8;border-style:dashed}
.card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.25em;padding:.38em .12em .06em;border-top:1px solid #ffffff2e;font-size:.66em}
.card-stats span{display:block;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-stats i{display:block;font-style:normal;font-weight:400;font-size:.79em;letter-spacing:.12em;color:#ffffffa0}
.card-play{position:absolute;z-index:2;right:6px;top:6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#000a;color:#fff;font-style:normal;font-size:.5rem;padding-left:2px}
/* Foil sits on the frame only, so supplied artwork keeps its true colours; the glare passes over everything. */
.holo,.glare{position:absolute;inset:0;border-radius:14px;pointer-events:none;transition:opacity .4s}
.holo{z-index:0;opacity:calc(var(--holo) * var(--holo-max));mix-blend-mode:color-dodge;background:repeating-linear-gradient(115deg,#0000 0%,#ff9fbf55 7%,#ffe59a55 13%,#9ff5e955 19%,#b9a0ff55 25%,#0000 32%);background-size:260% 260%;background-position:calc(var(--mx) * 1%) calc(var(--my) * 1%)}
.glare{z-index:4;opacity:calc(var(--holo) * .7);mix-blend-mode:overlay;background:radial-gradient(circle at calc(var(--mx) * 1%) calc(var(--my) * 1%),#ffffffcc 0%,#fff0 42%)}
.case-card .badge{position:absolute;z-index:6;top:-9px;right:-9px;min-width:30px;padding:2px 7px;border-radius:999px;background:var(--accent);color:#1b1015;font-size:.62rem;font-weight:700;box-shadow:0 3px 8px #0008}
.case-card .badge.is-complete{background:#f2c28b}
.case-card .badge:empty{display:none}
.case-meter{text-align:center;color:var(--muted);font-size:.78rem;letter-spacing:.06em;min-height:1.4em}
@property --mx{syntax:"<number>";inherits:true;initial-value:50}
@property --my{syntax:"<number>";inherits:true;initial-value:50}

/* Flip between card and case page: front = card face, back = the case page itself. */
.flip-shade{position:fixed;inset:0;z-index:58;background:#0b080acc;backdrop-filter:blur(6px);pointer-events:none}
.flip-front,.flip-back{position:fixed;left:0;top:0;z-index:60;transform-origin:50% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;pointer-events:none}
.flip-front{border-radius:14px;filter:drop-shadow(0 30px 40px #000a)}
.flip-front .card-face{position:absolute;inset:0}
.flip-back{background:#1f171c;border:1px solid #ffffff26;border-radius:10px;overflow:hidden;color:var(--text);box-shadow:0 40px 80px #000c}

/* Case page dialog and image viewer (own toolbar; not wrapped by app.js). */
dialog.case-dialog,dialog.case-viewer{border:1px solid #ffffff26;border-radius:10px;background:#1f171c;color:var(--text);padding:0;max-width:none;max-height:none}
dialog.case-dialog{width:min(1080px,calc(100vw - 28px));height:min(820px,calc(100vh - 40px));overflow:auto}
/* The viewer wraps the picture itself, so portrait photos get no empty side bars. */
dialog.case-viewer{width:fit-content;max-width:calc(100vw - 28px)}
dialog.case-viewer.is-zoomed{width:min(1400px,calc(100vw - 28px))}
dialog.case-dialog::backdrop,dialog.case-viewer::backdrop{background:#0b080acc;backdrop-filter:blur(6px)}
dialog.case-dialog.no-enter[open]{animation:none}
.case-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#251b21f2;backdrop-filter:blur(10px);border-bottom:1px solid #ffffff16}
.case-type{font-size:.7rem;letter-spacing:.16em;color:var(--cat,var(--accent))}
.case-close{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff33;background:#ffffff08;font-size:1.4rem;line-height:1}
.case-close:hover{background:var(--accent);color:#1b1015}
.case-body{padding:6px 28px 32px}
.case-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:18px}
.case-main{justify-self:start;border:0;padding:0;background:none;border-radius:8px;overflow:hidden;display:block;width:auto;max-width:100%}
.case-main img{display:block;width:auto;height:auto;max-width:100%}
.case-hero h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:4px 0 10px;line-height:1.2;letter-spacing:-.02em}
.case-lead{font-size:.9rem;line-height:1.8;color:#e6d6dc;margin:10px 0 0}
.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.case-facts div{background:#ffffff06;border:1px solid #ffffff12;border-radius:6px;padding:8px 10px;font-size:.84rem}
.case-facts span{display:block;font-size:.62rem;letter-spacing:.1em;color:var(--muted)}
.case-progress{margin-top:16px;font-size:.78rem;color:var(--muted)}
.case-progress i{display:block;height:4px;border-radius:4px;background:#ffffff14;margin-top:6px;overflow:hidden}
.case-progress i b{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#f2c28b);width:var(--seen,0%);transition:width .5s var(--spring)}
/* The main picture column takes the picture's own width; the text takes the rest. */
.case-hero{grid-template-columns:auto minmax(0,1fr)}
.case-main img,.case-main video{max-height:min(62vh,580px);max-width:min(560px,48vw)}
/* Steps sit side by side as one flow (wider for steps with more pictures); arrows between them. */
.case-flow{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:26px}
.case-group{position:relative;flex:var(--k) 1 calc(var(--k) * 150px);min-width:0;padding:12px 12px 14px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff05;scroll-margin-top:76px}
.case-group h3{margin:0;font-size:.95rem}.case-group h3 span{display:block;font-size:.6rem;letter-spacing:.16em;color:var(--cat,var(--accent));margin-bottom:2px}
.case-group p{margin:4px 0 0;font-size:.76rem;line-height:1.6;color:var(--muted)}
.case-group+.case-group:before{content:"→";position:absolute;left:-18px;top:16px;font-size:.85rem;color:var(--cat,var(--accent))}
dialog[open] .case-group{animation:step-in .6s var(--ease) both;animation-delay:calc(var(--n) * 90ms + 180ms)}
@keyframes step-in{from{opacity:0;transform:translateY(16px)}}
/* Thumbnails keep each picture's own shape at one row height. */
.case-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.case-thumb{position:relative;flex:0 1 auto;height:150px;max-width:100%;border:1px solid #ffffff16;border-radius:6px;background:#0d0a0c;padding:0;overflow:hidden;transition:transform .35s var(--spring),border-color .3s}
.case-thumb img,.case-thumb video{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
.case-thumb img{min-width:70px}
/* A step with one picture lets it fill the step card. */
.case-group.is-single .case-thumb{height:auto;width:100%}
.case-group.is-single .case-thumb img,.case-group.is-single .case-thumb video{width:100%;height:auto;max-height:200px}
.case-thumb:hover{transform:translateY(-3px);border-color:var(--accent)}
.case-thumb span{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;font-size:.78rem;line-height:1;background:#151015d9;border-radius:999px;color:#ffd3dc;transition:background .25s,color .25s}
.case-thumb:hover span,.case-thumb:focus-visible span{background:var(--accent);color:var(--ink)}
.case-thumb.is-seen span{color:#f2c28b}
.case-zoom{min-height:44px;padding:8px 14px;border:1px solid #c093a3;border-radius:4px;background:#38232f;font-size:.82rem}
.case-zoom[aria-pressed="true"]{background:var(--accent);color:#1b1015}
.case-viewer-stage{overflow:auto;overscroll-behavior:contain;background:#0a0809}
.case-viewer-stage img,.case-viewer-stage video{display:block;width:auto;height:calc(100svh - 100px);max-width:calc(100vw - 30px);object-fit:contain;margin:0 auto}
.case-viewer-stage [hidden]{display:none}
.case-viewer.is-zoomed .case-viewer-stage{height:calc(100svh - 100px)}
.case-viewer.is-zoomed .case-viewer-stage img{width:200%;height:auto;max-width:none;max-height:none}

/* ---------- Dialogs used by app.js (film preview, memo): sticky toolbar ---------- */
dialog{padding:0 32px 32px}
.dialog-toolbar{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:flex-end;gap:16px;min-height:66px;margin:0 -32px 18px;padding:10px 16px;background:#211a1ff2;backdrop-filter:blur(12px);border-bottom:1px solid #ffffff16}
dialog .dialog-toolbar .dialog-close{position:static!important;float:none;margin:0;flex:none}
.image-viewer .dialog-toolbar{justify-content:space-between}
.image-viewer{width:min(1200px,calc(100% - 32px));text-align:center;padding:0 24px 24px}.image-viewer .dialog-toolbar{margin:0 -24px 18px}
.zoom-image{min-height:44px;padding:10px 16px;border:1px solid #c093a3;border-radius:4px;background:#38232f;font-size:.85rem}
.zoom-image:hover,.zoom-image[aria-pressed="true"]{background:#d96f8c;color:#160f14;border-color:#d96f8c}
.image-pan-hint{font-size:.78rem;color:#d2bac4;text-align:left}
.image-stage{height:min(67svh,900px);overflow:auto;overscroll-behavior:contain;background:#0a0809}
.image-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;margin:auto}
.image-viewer.is-zoomed .image-stage img{width:200%;height:auto;max-width:none;max-height:none;margin:0}
html.motion-paused .reveal,html.motion-paused .hero h1,html.motion-paused .hero-art img{animation:none!important;opacity:1!important}
html.motion-paused dialog[open]{animation:none!important;opacity:1!important;transform:none!important}
html.motion-paused .case-card{--rx:0deg!important;--ry:0deg!important}

@media(max-width:860px){.case-card{--w:min(170px,calc((90vw + 7 * 66px) / 8));margin-left:-66px}}
@media(max-width:600px){
  .hero-art{right:0;width:100%;-webkit-mask-image:none;mask-image:none}
  .hero-art img{object-position:50% 100%}
  .hero-art:before{background:radial-gradient(ellipse 50% 45% at 50% 55%,#c2486a40 0%,transparent 70%)}
}
@media(max-width:640px){
  .process{padding-top:120px;padding-bottom:120px;background:linear-gradient(180deg,var(--bg) 0,#eee7ea 100px,#eee7ea calc(100% - 100px),var(--bg) 100%)}
  .line-v2{padding:48px 5% 28px}
  .line-head{display:block}.line-lede{text-align:left;margin-top:10px;font-size:.8rem}
  .line-v2 .stage{margin-top:18px}
  .line-foot{font-size:.6rem}
  .case-legend{gap:6px}
  /* Phones: a binder page of small cards instead of a swipe carousel, so every card (and the filter) is visible at once
     and vertical page scrolling never fights a horizontal swipe. */
  .case-hand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px;padding:26px 0 22px;perspective:none}
  .case-card{--w:100%;margin-left:0}
  .case-card.is-hover{--lift:0px;--scale:1}
  .case-card:active{--scale:.96;transition:transform .12s}
  .card-face,.case-card[data-featured] .card-face{padding:5px;border-radius:10px;font-size:1rem}
  .holo,.glare{border-radius:10px}
  .card-top{padding:1px 3px 5px;font-size:.5em;letter-spacing:.08em}
  .card-top b{display:none}
  .card-art{border-radius:5px}
  .card-name{padding:6px 3px 3px}
  .card-name strong{font-size:.74em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .card-name small,.card-stats{display:none}
  .card-tags{gap:3px;padding:0 2px 2px;min-height:0}
  .card-tags b,.card-tags em{font-size:.5em;padding:1px 5px}
  .case-card .badge{top:-6px;right:-6px;min-width:22px;padding:1px 5px;font-size:.52rem}
  dialog{padding:0 20px 24px}.dialog-toolbar{margin:0 -20px 18px;padding:9px 12px;min-height:62px}.image-stage{height:65svh}.zoom-image{font-size:.75rem}
  .image-viewer{padding:0 12px 18px}.image-viewer .dialog-toolbar{margin:0 -12px 18px}
  .case-body{padding:4px 16px 24px}
  .case-hero{grid-template-columns:1fr;gap:12px}
  .case-main{justify-self:center}
  .case-viewer-stage img,.case-viewer-stage video{height:auto;max-height:calc(100svh - 100px)}
  .case-main img,.case-main video{max-width:100%;max-height:56vh}
  .case-flow{gap:14px}
  .case-group{flex:1 1 100%}
  .case-group+.case-group:before{content:"↓";left:18px;top:-15px}
  .case-thumb{height:120px}
}
@media(hover:none){.case-card:not([data-locked]){--holo:.5;animation:holo-drift 5s ease-in-out infinite}.case-card:nth-child(2n){animation-delay:-2.5s}}
@keyframes holo-drift{0%,100%{--mx:30;--my:35}50%{--mx:70;--my:65}}
@media(prefers-reduced-motion:reduce){
  .hero-art .studio-light{display:none}
  .case-card,.case-card.is-hover{transition:none;--rx:0deg!important;--ry:0deg!important}
  .case-card{animation:none!important}
}

/* Service titles: a small white silhouette icon after each name (decorative). */
.svc-icon{display:inline-block;width:1.4em;height:1.4em;margin-left:.45em;vertical-align:-.28em;fill:#fff;opacity:.92;transition:transform .45s var(--spring)}
.service summary:hover .svc-icon,.service[open] .svc-icon{transform:translateY(-2px) rotate(-6deg)}

/* Hero title: "PRODUCT." is one letter longer than the old "FIGURE.", so the latin title runs ~10% smaller to stay clear of the bust's face. */
html:not(:lang(zh-Hans)):not(:lang(zh-Hant)) .hero h1{font-size:clamp(4.1rem,7.8vw,7.4rem)}
@media(max-width:1150px){html:not(:lang(zh-Hans)):not(:lang(zh-Hant)) .hero h1{font-size:7.7vw}}
@media(max-width:900px){html:not(:lang(zh-Hans)):not(:lang(zh-Hant)) .hero h1{font-size:9vw}}
@media(max-width:600px){html:not(:lang(zh-Hans)):not(:lang(zh-Hant)) .hero h1{font-size:clamp(3.5rem,14vw,5.3rem)}}

/* Floating consult button: only where the header nav is collapsed into the menu. Shown after the hero, hidden at the contact form. */
.float-contact{position:fixed;z-index:40;right:max(16px,env(safe-area-inset-right));bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));display:flex;align-items:center;gap:8px;padding:12px 18px 12px 16px;border-radius:999px;background:var(--accent);color:#1b1015;font-size:.86rem;font-weight:700;letter-spacing:.02em;text-decoration:none;box-shadow:0 10px 26px #0009,0 0 0 1px #ffffff30 inset;transition:opacity .35s,transform .45s var(--spring)}
.float-contact:before{content:"";width:8px;height:8px;border-radius:50%;background:#1b1015;box-shadow:0 0 0 3px #1b101530}
.float-contact.is-away{opacity:0;transform:translateY(24px) scale(.9);pointer-events:none}
.float-contact:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(min-width:1051px){.float-contact{display:none}}
html.motion-paused .float-contact{transition:none}

.hero-description small{display:inline-block;font-size:.78em;color:var(--muted)}

/* Recipient address for the memo-to-email flow: the one thing the visitor must not miss. */
.mail-target{margin:30px 0 22px;padding:20px 22px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.mail-target-label{margin:0 0 8px;font-size:.75rem;letter-spacing:.12em;color:var(--accent);font-weight:700}
.mail-target-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.mail-address{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:700;letter-spacing:.01em;overflow-wrap:anywhere;user-select:all}
.copy-address{flex:none;padding:7px 14px;border:1px solid var(--accent);border-radius:999px;background:none;color:var(--accent);font:inherit;font-size:.78rem;font-weight:600;cursor:pointer}
.copy-address:hover,.copy-address:focus-visible{background:var(--accent);color:var(--ink)}
.mail-steps{margin:14px 0 0;padding-left:1.3em;font-size:.84rem;line-height:1.75;color:var(--muted)}
.mail-target-status{margin:6px 0 0;min-height:1em;color:var(--accent)}
.mail-target+.contact-info{margin-top:0}
.brief-to{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:8px}
.brief-to span{font-size:.75rem;color:var(--muted)}
.brief-to strong{overflow-wrap:anywhere;user-select:all}

/* Contact details from the business card. */
.contact-info a{color:var(--text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 60%,transparent);text-underline-offset:3px;overflow-wrap:anywhere}
.contact-info a:hover{color:var(--accent)}
.footer-site{color:inherit}
.footer-site:hover{color:var(--accent)}

/* ---------- Featured case card: larger, upright, centre of the fan (first and 2x2 on phones) ---------- */
.case-card[data-featured]{--w:min(250px,calc((90vw + 7 * 46px) / 8 * 1.25));--holo-max:1;filter:drop-shadow(0 26px 30px #000b) drop-shadow(0 0 22px #f2c28b40)}
.case-card[data-featured] .card-face{box-shadow:inset 0 0 0 1px #ffffff40,inset 0 2px 0 #ffffff50,0 0 0 2px #f2c28b}
.case-card[data-featured] .card-name strong{font-size:1.15em}
.card-pick{position:absolute;z-index:7;top:-10px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:999px;background:linear-gradient(90deg,#f2c28b,#ef8295);color:#1b1015;font-size:.6rem;font-weight:800;letter-spacing:.18em;white-space:nowrap;box-shadow:0 4px 12px #0009}

/* ---------- Case page: step chips that jump to each step ---------- */
.case-steps{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:18px 0 0;padding:0}
.case-steps li{display:flex;align-items:center;gap:6px}
.case-steps li+li:before{content:"→";color:var(--muted);font-size:.75rem}
.case-steps button{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid #ffffff24;border-radius:999px;background:#ffffff08;color:var(--text);font:inherit;font-size:.78rem;cursor:pointer;transition:border-color .25s,background .25s,transform .3s var(--spring)}
.case-steps b{font-size:.62rem;letter-spacing:.06em;color:var(--cat,var(--accent))}
.case-steps button:hover,.case-steps button:focus-visible{border-color:var(--cat,var(--accent));background:color-mix(in srgb,var(--cat,var(--accent)) 16%,transparent);transform:translateY(-2px)}
.case-main video{display:block;width:auto;height:auto}
.case-thumb.is-video span{color:#fff;background:color-mix(in srgb,var(--cat,var(--accent)) 70%,#000)}

/* ---------- Hero: the bust photo links to its case ---------- */
.hero-caption>span{display:block}
.hero-case-link{display:inline-block;margin-top:6px;padding:0 0 1px;border:0;border-bottom:1px solid currentColor;background:none;color:var(--accent);font:inherit;font-size:.74rem;letter-spacing:.04em;cursor:pointer}
.hero-case-link:hover,.hero-case-link:focus-visible{color:#fff}

html.motion-paused dialog[open] .case-group{animation:none}
@media(max-width:640px){
  .case-card[data-featured]{grid-column:span 2;grid-row:span 2;order:-1;--w:100%}
  .case-card[data-featured] .card-top b{display:block}
  .case-card[data-featured] .card-name strong{font-size:1em}
  .case-card[data-featured] .card-name small{display:block}
  .card-pick{top:-8px;font-size:.52rem}
}
/* Footer matches the corporate site (rakuichiban.co.jp): centred link rows, X, copyright. */
footer.corp-footer{margin-top:0;padding:0;border-top:0;background:#212529;color:#fff;text-align:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","游ゴシック Medium","Yu Gothic",YuGothic,YuGothicMedium,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size:1rem;line-height:1.5}
.corp-footer-inner{max-width:960px;margin:0 auto;padding:48px 12px}
.corp-footer ul{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;margin:0 0 16px;padding:0;list-style:none}
.corp-footer a{color:#f8f9fa;text-decoration:underline}
.corp-footer a:hover,.corp-footer a:focus-visible{color:#f9fafb}
.corp-footer svg{display:block;width:1em;height:1em}
.corp-footer .corp-x a{display:inline-flex;align-items:center;gap:6px}
.corp-footer p{margin:0;color:#fff}
@media (max-width:991px){.corp-footer-inner{padding:24px 12px}}
@media (max-width:1050px){.corp-footer-inner{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}