/* SUNS SONS KINGDOM — HOME prototype styles v2
   Design tokens: change colors here only. */
.ssk{
  --red:#DB182B;          /* Corporate Red */
  --ink:#111111;          /* Main Black */
  --paper:#F5F5F2;        /* Off White */
  --white:#FFFFFF;        /* Pure White */
  --gray-1:#E6E6E1;       /* hairline fills */
  --gray-2:#8A8A84;       /* decorative only (not for text) */
  --gray-3:#55554F;       /* secondary text on light (7:1) */
  --gray-4:#A9A9A3;       /* secondary text on dark (8:1) */
  --ink-2:#1D1D1C;        /* placeholder on dark */
  --accent:var(--red);
  --ease:cubic-bezier(.2,.7,0,1);
  --ease-io:cubic-bezier(.65,0,.15,1);
  --pad:var(--d-pad,40px);--gut:20px;
  container:ssk/inline-size;background:var(--paper);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  font-feature-settings:"palt";-webkit-font-smoothing:antialiased;overflow-x:clip;line-height:var(--d-body-lh,1.6)}
.ssk *{box-sizing:border-box}
.ssk a{color:inherit;text-decoration:none}
.ssk :where(p,h1,h2,h3,ul,ol,figure){margin:0;padding:0}
.ssk :where(h3){font:inherit}
.ssk :where(ul,ol){list-style:none}
.ssk :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;text-align:inherit}
.ssk :focus-visible{outline:2px solid var(--red);outline-offset:3px}
.inv :focus-visible{outline-color:var(--white)}

.disp{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;font-variation-settings:"wdth" 62;font-stretch:62%;letter-spacing:-.005em}
.wide{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:700;font-variation-settings:"wdth" 125;font-stretch:125%;letter-spacing:-.02em}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-weight:400;font-size:var(--d-cap-size,12px);letter-spacing:var(--d-cap-ls,.02em);text-transform:uppercase;line-height:1.4}
/* DESIGN SETTINGS (Phase 6): phone values. Placed right after the rules they adjust, so every later, more specific rule still wins as before. */
@container ssk (max-width:720px){.mono{font-size:var(--d-cap-size-m,var(--d-cap-size,12px))}.ssk *{--pad:var(--d-pad-m,var(--d-pad,40px))}}
.mute{color:var(--gray-3)}
.inv .mute{color:var(--gray-4)}
.acc{color:var(--red)}
.inv{color:var(--white)}

.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding-inline:var(--pad)}

/* ---------- placeholders & TBD markers (dummy ≠ real data) ---------- */
.ph{position:relative;display:flex;align-items:flex-end;padding:14px;overflow:hidden;min-height:0;
  background-color:var(--gray-1);background-image:repeating-linear-gradient(135deg,transparent 0 13px,rgba(17,17,17,.07) 13px 14px)}
.ph.dark{background-color:var(--ink-2);background-image:repeating-linear-gradient(135deg,transparent 0 13px,rgba(255,255,255,.06) 13px 14px);color:#EDEDE8}
.ph-cap{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.03em;text-transform:uppercase;line-height:1.5;max-width:32ch}
.ph-tag,.draft{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;line-height:1;
  display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--white);padding:6px 8px;white-space:nowrap}
.ph.dark .ph-tag{background:var(--white);color:var(--ink)}
.ph-tag{position:absolute;top:10px;left:10px;z-index:2}
.draft{background:transparent;color:inherit;border:1px dashed currentColor;padding:5px 7px}
.tbd{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.84em;font-weight:400;letter-spacing:0;text-transform:none;
  background:rgba(17,17,17,.06);outline:1px dashed rgba(17,17,17,.4);outline-offset:-1px;padding:.1em .4em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.inv .tbd{background:rgba(255,255,255,.1);outline-color:rgba(255,255,255,.55)}
.hide-ph .ph-tag,.hide-ph .draft{display:none}
.hide-ph .tbd{background:none;outline:0;padding:0}

/* ---------- buttons / links ---------- */
.more{display:inline-flex;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid currentColor;transition:gap .35s var(--ease),color .25s}
.more:hover{gap:22px;color:var(--red)}
.inv .more:hover{color:var(--white)}
.arrow{transition:transform .4s var(--ease)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 90%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--ink)}
.hdr-in{height:var(--d-hdr-h,72px);align-items:center}
.brand{grid-column:1/5;display:flex;align-items:center;gap:12px;min-height:44px}
.brand-mark{font-family:"Archivo",Arial,sans-serif;font-weight:800;font-variation-settings:"wdth" 100;font-size:16px;letter-spacing:.04em;white-space:nowrap}
.brand-dot{width:10px;height:10px;background:var(--red);flex:none}
.nav{grid-column:5/10;display:flex;gap:4px;align-items:center}
.nav a{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 10px;position:relative;font-size:var(--d-nav-size,inherit)}
.nav a sup{font-size:9px;color:var(--gray-3)}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:9px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.hdr-r{grid-column:10/13;display:flex;justify-content:flex-end;align-items:center;gap:12px}
.lang{display:flex;outline:1px solid var(--ink);outline-offset:-1px}
.lang button{height:44px;min-width:46px;padding:0 10px;font-family:"JetBrains Mono",monospace;font-size:12px;text-align:center;transition:background .2s,color .2s}
.lang button.on{background:var(--ink);color:var(--white)}
.cta-s{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;background:var(--d-btn-bg,var(--red));color:var(--white);font-size:var(--d-btn-size,var(--d-cap-size,12px));transition:background .25s}
/* DESIGN SETTINGS: no fallback on purpose — while --d-btn-color is not set the declaration is invalid at computed-value time, so the text keeps its current (inherited) colour */
.ssk a.cta-s{color:var(--d-btn-color)}
.cta-s:hover{background:var(--ink)}
.menu-btn{display:none;height:44px;min-width:72px;padding:0 14px;border:1px solid var(--ink);align-items:center;justify-content:center}
.mmenu{border-top:1px solid var(--ink);padding:12px var(--pad) 28px;display:flex;flex-direction:column}
.mmenu a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid rgba(17,17,17,.18);font-size:44px;line-height:1.05}
.mmenu a:hover{color:var(--red)}
.mmenu a .mono{font-size:11px}

/* ---------- HERO ---------- */
.hero{position:relative;padding-top:28px;padding-bottom:56px;isolation:isolate;overflow:hidden}
.hero-meta{align-items:start;margin-bottom:6cqi;position:relative;z-index:1}
.hm-1{grid-column:1/5}.hm-2{grid-column:5/9}.hm-3{grid-column:9/13;display:flex;justify-content:flex-end}
/* background grid: the "world" that appears after the spark */
.hero-grid{position:absolute;inset:0;z-index:-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding-inline:var(--pad);pointer-events:none}
.hero-grid i{display:block;border-left:1px solid rgba(17,17,17,.075);transform-origin:top}
.hero-grid i:last-child{border-right:1px solid rgba(17,17,17,.075)}
.spark-cv{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-type{position:relative;z-index:1;align-items:end}
.h-one{grid-column:1/9;grid-row:1;font-size:7.4cqi;line-height:.86;text-transform:uppercase;white-space:nowrap;display:flex;align-items:baseline}
.one-txt{display:inline-block;padding-right:.02em}
.h-sub{grid-column:9/13;grid-row:1;align-self:end;display:flex;flex-direction:column;gap:10px;padding-bottom:.4cqi}
.h-sub p{font-size:20px;line-height:1.7;font-weight:500}
.h-ev{grid-column:1/-1;grid-row:2;margin-top:3cqi;position:relative;font-size:13.8cqi;line-height:.8;text-transform:uppercase;white-space:nowrap}
.ev-txt{display:block;padding-block:.02em}
.ev-run{position:absolute;top:4%;bottom:4%;left:100%;width:2px;background:var(--red);opacity:0;
  box-shadow:0 0 10px 1px rgba(219,24,43,.75),0 0 28px 4px rgba(219,24,43,.25);pointer-events:none}
.h-ch{grid-column:3/-1;grid-row:3;font-size:13.8cqi;line-height:.8;text-transform:uppercase;white-space:nowrap;text-align:right;overflow:hidden;padding-block:.02em}
.ch-x{display:block}
.ch-in{display:inline-block}
.h-slot{grid-column:1/3;grid-row:3;align-self:stretch;margin:1.2cqi 0 .9cqi;min-height:80px}
/* the spark = the period of ONE SPARK. */
.sp{position:relative;display:inline-block;width:.17em;height:.17em;margin-left:.07em;flex:none}
.sp-dot{position:absolute;inset:0;background:var(--red);box-shadow:0 0 .08em rgba(219,24,43,.5),0 0 .3em rgba(219,24,43,.22)}
.sp-glow{position:absolute;left:50%;top:50%;width:2em;height:2em;margin:-1em 0 0 -1em;border-radius:50%;
  background:radial-gradient(closest-side,rgba(219,24,43,.3),rgba(219,24,43,.06) 60%,rgba(219,24,43,0));opacity:.16;pointer-events:none}
.sp-burst{position:absolute;left:50%;top:50%;width:6em;height:6em;margin:-3em 0 0 -3em;overflow:visible;pointer-events:none}
.sp-burst .ray{stroke:var(--red);stroke-width:.55;stroke-linecap:round;fill:none;stroke-dasharray:.3 1.6;stroke-dashoffset:-1.4;opacity:0}
.sp-burst .ring{fill:none;stroke:var(--red);stroke-width:.35;opacity:0;transform-box:fill-box;transform-origin:center}
.outline{color:transparent;-webkit-text-stroke:2px var(--ink)}
/* photo / film slots set inside the type */
.slot{display:inline-block;position:relative;height:.68em;width:2.1em;flex:none;overflow:hidden;align-self:center;margin-top:-.04em}
.slot-2{width:1.55em}
.slot .ph{position:absolute;inset:0;padding:10px}
.slot .ph-cap{font-size:10px;max-width:none}
.hero-foot{margin-top:40px;align-items:end;row-gap:20px}
.hero-foot{position:relative;z-index:1}
.hero-copy{grid-column:1/6}
.hero-copy p{font-size:15px;line-height:1.9}
.hero-en{grid-column:7/10}
.scroll-ind{grid-column:10/13;justify-self:end;display:flex;align-items:center;gap:12px}
.scroll-ind i{display:block;width:64px;height:1px;background:var(--ink);position:relative;overflow:hidden}
.scroll-ind i::after{content:"";position:absolute;inset:0;background:var(--red);animation:sweep 2.2s cubic-bezier(.6,0,.2,1) infinite}

/* ---------- marquee ---------- */
.mq{background:var(--ink);color:var(--white);overflow:hidden;padding:20px 0}
.mq-track{display:flex;width:max-content;animation:mq 34s linear infinite}
.mq-item{display:flex;align-items:center;gap:36px;padding-right:36px;font-size:64px;line-height:1;text-transform:uppercase;white-space:nowrap}

/* ---------- sections (shared) ---------- */
.sec{padding-block:var(--d-sec-pad,128px);border-top:1px solid var(--ink)}
.sec-lab{display:flex;flex-direction:column;gap:6px}
.sec-title{font-size:var(--d-sec-title,11cqi);line-height:.82;text-transform:uppercase}
/* the spark mark: same red square as the hero period, repeated as each section's index */
.sec-lab>span:first-child::before,.ct-top .l>span:first-child::before{content:"";display:inline-block;width:.62em;height:.62em;background:var(--red);margin-right:.7em;vertical-align:.02em}
.ct-top .l>span:first-child::before{background:var(--white)}

/* ---------- PHILOSOPHY: the message ---------- */
.ph-lab{grid-column:1/-1;margin-bottom:48px}
.ph-statement{grid-column:1/-1;font-size:11.2cqi;line-height:.84;text-transform:uppercase}
.ps-line{display:block;white-space:nowrap}
.ps-2{padding-left:17%}
.ps-3{text-align:right}
.ps-w{display:inline-block}
.ps-dot{display:inline-block;width:.17em;height:.17em;background:var(--red);margin-left:.07em;box-shadow:0 0 .08em rgba(219,24,43,.5),0 0 .3em rgba(219,24,43,.22)}
.ph-jp{grid-column:7/13;margin-top:72px;font-size:30px;font-weight:700;line-height:1.55;letter-spacing:.02em}
.ph-desc{grid-column:7/12;margin-top:24px;display:flex;flex-direction:column;gap:2px}
.ph-desc p{font-size:17px;line-height:2}
/* how a spark moves a life */
.chain{grid-column:1/-1;margin-top:112px;padding-top:24px;border-top:1px solid var(--ink);display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,1.6fr) minmax(0,3fr) minmax(0,1.6fr) minmax(0,3fr);align-items:center}
.chain-lab{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;margin-bottom:28px}
.ch-src{border:1px solid var(--ink);background:var(--white)}
.ch-src li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:8px;min-height:64px;padding:8px 16px;border-bottom:1px solid rgba(17,17,17,.2)}
.ch-src li:last-child{border-bottom:0}
.ch-src b{font-size:20px;font-weight:700}
.ch-link{position:relative;height:2px;margin:0 14px;background:var(--red);transform-origin:left}
.ch-link::after{content:"";position:absolute;right:-1px;top:50%;width:9px;height:9px;border-top:2px solid var(--red);border-right:2px solid var(--red);transform:translateY(-50%) rotate(45deg)}
.ch-node{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ch-node .sq{width:14px;height:14px;background:var(--red);box-shadow:0 0 10px rgba(219,24,43,.45)}
.ch-node b{font-size:28px;font-weight:700;line-height:1.35}
.ch-end b{font-size:28px}
/* ---------- FIELDS (activity domains): crossword ---------- */
.fields{margin-top:136px;padding-top:40px;border-top:1px solid var(--ink)}
.phil{padding-block:112px 128px;background:var(--white)}
.phil-head{margin-bottom:48px;align-items:end}
.phil-head .sec-lab{grid-column:1/4}
.phil-title{grid-column:4/13;font-size:5.6cqi;line-height:.9;text-transform:uppercase}
.xw-wrap{grid-column:1/9}
.xw{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.c{position:relative;aspect-ratio:1/1;display:grid;place-items:center;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-variation-settings:"wdth" 100;font-size:4.4cqi;line-height:1;
  transition:background .35s,color .35s}
.c.e{border-color:rgba(17,17,17,.12);border-right-style:solid}
.c.e::before{content:"";width:9px;height:9px;background:
  linear-gradient(var(--gray-2),var(--gray-2)) center/1px 100% no-repeat,
  linear-gradient(var(--gray-2),var(--gray-2)) center/100% 1px no-repeat;opacity:.5}
.c.core{font-weight:800;color:var(--ink)}
.c.dom{font-weight:400;color:var(--gray-3)}
.c.x{color:var(--red);font-weight:800}
.c.xx{background:var(--red);color:var(--white)}
.c .n{position:absolute;top:5px;left:6px;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:400;color:var(--gray-3);line-height:1}
.c.xx .n{color:var(--white)}
.c.on{background:var(--ink);color:var(--white)}
.c.on .n{color:var(--gray-4)}
.c.on.x,.c.on.xx{background:var(--red);color:var(--white)}
.xw-cap{display:flex;justify-content:space-between;gap:16px;margin-top:14px}
.phil-side{grid-column:10/13;display:flex;flex-direction:column;gap:28px;align-self:start;position:sticky;top:112px}
.phil-side p.lead{font-size:18px;line-height:1.9;font-weight:500}
.clues{border-top:1px solid var(--ink)}
.clue{width:100%;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;min-height:56px;border-bottom:1px solid var(--ink);padding:6px 0;transition:background .25s,color .25s,padding .35s var(--ease)}
.clue .cw{font-size:26px;line-height:1;text-transform:uppercase}
.clue .cj{font-size:12px;color:var(--gray-3)}
.clue:hover,.clue.on{background:var(--ink);color:var(--white);padding-inline:10px}
.clue:hover .cj,.clue.on .cj,.clue:hover .mute,.clue.on .mute{color:var(--gray-4)}
.clue.core .cw{color:inherit}
.clue .tagc{font-size:10px}

/* ---------- PORTFOLIO ---------- */
.biz{padding-bottom:0}
.biz-head{align-items:end;margin-bottom:64px}
.biz-head .sec-lab{grid-column:1/4;align-self:start}
.biz-head .sec-title{grid-column:4/10;font-size:9.4cqi}
.biz-count{grid-column:10/13;justify-self:end;font-size:11cqi;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--red)}
.biz-note{grid-column:4/13;margin-top:24px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline}
.biz-note p{font-size:16px;line-height:1.9;max-width:38em}
.biz-list{border-top:1px solid var(--ink)}
.biz-row{border-bottom:1px solid var(--ink);transition:background .5s var(--ease-io),color .5s var(--ease-io)}
.biz-btn{width:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:24px var(--pad);align-items:center;transition:background .3s,color .3s}
.biz-no{grid-column:1/2}
.biz-name{grid-column:2/8;font-size:6.8cqi;line-height:.9;white-space:normal;text-wrap:balance;transition:transform .55s var(--ease),letter-spacing .55s var(--ease)}
.biz-dom{grid-column:8/12;display:flex;flex-direction:column;gap:6px}
.biz-dom b{font-size:16px;font-weight:500}
.biz-ic{grid-column:12/13;justify-self:end;width:48px;height:48px;border:1px solid currentColor;display:grid;place-items:center;transition:background .3s,border-color .3s,color .3s}
.biz-row:not(.open) .biz-btn:hover{background:var(--red);color:var(--white)}
.biz-row:not(.open) .biz-btn:hover .mute{color:rgba(255,255,255,.85)}
.biz-row:not(.open) .biz-btn:hover .biz-name{transform:translateX(1.4cqi)}
.biz-row:not(.open) .biz-btn:hover .biz-ic{background:var(--white);color:var(--red);border-color:var(--white)}
.biz-row.open{background:var(--ink);color:var(--white)}
.biz-row.open .mute{color:var(--gray-4)}
.biz-ic svg{transition:transform .55s var(--ease)}
.biz-row.open .biz-ic svg{transform:rotate(45deg)}
.biz-row.open .biz-ic{background:var(--red);border-color:var(--red)}
.biz-pw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .75s var(--ease-io)}
.biz-row.open .biz-pw{grid-template-rows:1fr}
.biz-inner{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .75s}
.biz-row.open .biz-inner{visibility:visible;transition-delay:0s}
.biz-panel{padding:8px var(--pad) 56px;row-gap:28px;align-items:start;opacity:0;transform:translateY(-20px);transition:opacity .45s ease,transform .7s var(--ease)}
.biz-row.open .biz-panel{opacity:1;transform:none;transition-delay:.18s}
.bp-visual{grid-column:2/8;clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease-io) .1s}
.biz-row.open .bp-visual{clip-path:inset(0 0 0 0)}
.bp-side{grid-column:8/13;display:flex;flex-direction:column;gap:22px}
.bp-logo{width:120px;padding:10px}
.bp-desc{display:flex;flex-direction:column;gap:12px}
.bp-desc p{font-size:17px;line-height:1.9}
.bp-value{font-size:24px!important;line-height:1.6!important;font-weight:700}
.bp-label{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bp-works{grid-column:2/8;display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;align-items:end}
.bp-works-lab{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;margin-bottom:2px}

.bp-cta{display:inline-flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:0 24px;background:var(--red);color:var(--white);font-size:24px;text-transform:none;transition:background .3s,color .3s;align-self:stretch}
.bp-cta:hover{background:var(--white);color:var(--ink)}
.bp-cta:hover .arrow{transform:translate(4px,-4px)}

/* ---------- PROJECTS (dark, photo-led) ---------- */
.proj-sec{background:var(--ink);color:var(--white);padding-block:120px 136px;border-top:0}
.proj-head{align-items:end;margin-bottom:72px}
.proj-head .sec-lab{grid-column:1/4;align-self:start}
.proj-head .sec-title{grid-column:4/13}
.proj-note{grid-column:4/13;margin-top:24px}
.pj{display:block;position:relative;color:var(--white)}
.pj-media{position:relative;overflow:hidden}
.pj-media .ph{position:absolute;inset:0;transition:transform 1.1s var(--ease)}
.pj:hover .pj-media .ph{transform:scale(1.035)}
.pj-hover{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:18px;
  background:var(--white);color:var(--ink);transform:translateY(101%);transition:transform .55s var(--ease)}
.pj:hover .pj-hover,.pj:focus-visible .pj-hover{transform:none}
.pj-hover .go{display:inline-flex;align-items:center;gap:8px;color:var(--red)}
.pj-cap{display:flex;justify-content:space-between;gap:16px;padding-top:12px;margin-top:12px;border-top:1px solid rgba(255,255,255,.35)}
.pj-cap b{font-weight:500;font-size:16px}
.pj-more{display:none}
/* P—01 full-bleed feature */

.pj-1-over{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;pointer-events:none}
.pj-1-idx{font-size:18cqi;line-height:.75;color:transparent;-webkit-text-stroke:2px var(--white)}
.pj-1 .pj-cap{margin-inline:var(--pad)}
/* P—02 / P—03 asymmetric pair */
.pj-pair{margin-top:120px;align-items:start}
.pj-vlab{grid-column:1/2;writing-mode:vertical-rl;justify-self:start;align-self:stretch;display:flex;gap:16px}
.pj-2{grid-column:2/6}
.pj-3{grid-column:7/13;margin-top:14cqi}
/* P—04 type-led */
.pj-4{margin-top:140px}
.pj-4 a{grid-column:1/-1;display:block}
.pj-4-type{font-size:11cqi;line-height:.82;text-transform:uppercase;display:flex;align-items:center;gap:.12em;white-space:nowrap}
.pj-4-type .slot{width:2em;height:.7em}
.pj-4 .pj-cap{max-width:none}
.pj-4 a:hover .pj-4-type .o{color:var(--red);-webkit-text-stroke-color:var(--red)}
.pj-4-type .o{color:transparent;-webkit-text-stroke:2px var(--white);transition:color .4s,-webkit-text-stroke-color .4s}
/* P—05 strip */
.pj-5{margin-top:140px;align-items:end}
.pj-5 .pj{grid-column:auto}
.strip{grid-column:1/-1;display:grid;grid-template-columns:5fr 3fr 4fr;gap:var(--gut);align-items:end}

.proj-end{margin-top:96px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-inline:var(--pad);flex-wrap:wrap}
.all-link{display:inline-flex;align-items:center;gap:20px;font-size:56px;line-height:1;text-transform:uppercase;min-height:64px;transition:color .3s,gap .4s var(--ease)}
.all-link:hover{color:var(--red);gap:32px}

/* ---------- JOURNAL (dense, functional) ---------- */
.jr-sec{padding-block:104px 112px}
.jr-head{align-items:end;margin-bottom:36px;row-gap:16px}
.jr-head .sec-lab{grid-column:1/4}
.jr-head h2{grid-column:4/9;font-size:72px;line-height:.85;text-transform:uppercase}
.jr-head .jr-all{grid-column:9/13;justify-self:end}
.jr-list{border-top:2px solid var(--ink)}
.jr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center;min-height:96px;padding:14px var(--pad);border-bottom:1px solid var(--ink);transition:background .3s}
.jr-date{grid-column:1/3;font-size:28px;line-height:1}
.jr-cat{grid-column:3/5}
.jr-cat span{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border:1px solid currentColor;border-radius:999px}
.jr-title{grid-column:5/10;font-size:19px;font-weight:500;line-height:1.55;transition:color .3s,transform .5s var(--ease)}
.jr-thumb{grid-column:10/12;justify-self:end;width:112px;aspect-ratio:4/3;padding:0;opacity:.5;transition:opacity .35s,transform .5s var(--ease)}
.jr-ar{grid-column:12/13;justify-self:end;width:44px;height:44px;display:grid;place-items:center;transition:transform .4s var(--ease),color .3s,background .3s}
.jr:hover{background:var(--white)}
.jr:hover .jr-title{color:var(--red);transform:translateX(10px)}
.jr:hover .jr-ar{background:var(--red);color:var(--white)}
.jr:hover .jr-thumb{opacity:1;transform:scale(1.06)}
.jr:hover .jr-cat span{border-color:var(--red);color:var(--red)}
.jr-note{padding-inline:var(--pad);margin-top:16px}

/* ---------- CONTACT (Corporate Red) ---------- */
.contact{background:var(--red);color:var(--white);padding-block:56px 64px}
.ct-top{align-items:center;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.55);margin-bottom:5cqi}
.ct-top .l{grid-column:1/7;display:flex;gap:14px}
.ct-top .r{grid-column:7/13;justify-self:end}
.ct-big{grid-column:1/-1;font-size:19cqi;line-height:.8;text-transform:uppercase;white-space:nowrap}
.ct-l2{text-align:right;color:var(--ink)}
.ct-row{margin-top:5cqi;align-items:end;row-gap:28px}
.ct-copy{grid-column:1/6;display:flex;flex-direction:column;gap:12px}
.ct-copy p{font-size:18px;line-height:1.9;font-weight:500}
.ct-btn{grid-column:7/13;display:flex;justify-content:space-between;align-items:center;min-height:104px;padding:0 32px;background:var(--ink);color:var(--white);font-size:44px;line-height:1;text-transform:uppercase;transition:background .35s,color .35s}
.ct-btn small{display:block;font-family:"Zen Kaku Gothic New",sans-serif;font-size:13px;letter-spacing:.04em;font-weight:500;margin-top:8px;text-transform:none}
.ct-btn:hover{background:var(--white);color:var(--ink)}
.ct-btn:hover .arrow{transform:translateX(10px)}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#EDEDE8;padding-top:96px}
.ftr-cols{row-gap:40px;padding-bottom:72px}
.fc{display:flex;flex-direction:column;gap:10px}
.fc-1{grid-column:1/5}.fc-2{grid-column:6/8}.fc-3{grid-column:8/10}.fc-4{grid-column:10/13}
.fc a{display:inline-flex;align-items:center;min-height:32px;transition:color .25s;font-size:var(--d-ftr-size,inherit);color:var(--d-ftr-link,inherit)}
.fc a:hover{color:var(--white);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px;text-decoration-thickness:2px}
.ftr-word{font-size:7.8cqi;line-height:.8;text-transform:uppercase;white-space:nowrap;padding-inline:var(--pad);overflow:hidden}
.ftr-word .acc{color:var(--red)}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:20px var(--pad) 28px;border-top:1px solid #333330;margin-top:32px}
.ftr-bot a{min-height:44px;display:inline-flex;align-items:center}

/* ---------- motion ---------- */
@keyframes up{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes grow{from{width:0}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@keyframes rv{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes clipin{from{clip-path:inset(10% 8% 10% 8%)}to{clip-path:inset(0 0 0 0)}}
@keyframes pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes ex-l{to{transform:translateX(-14%)}}
@keyframes ex-r{to{transform:translateX(12%)}}
@keyframes sp-in{0%{transform:scale(0);opacity:0}35%{transform:scale(1.5);opacity:1}55%{transform:scale(.8)}75%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes sp-flash{0%,100%{box-shadow:0 0 .08em rgba(219,24,43,.5),0 0 .3em rgba(219,24,43,.22)}18%{box-shadow:0 0 .14em #fff,0 0 .5em rgba(219,24,43,.95),0 0 1.4em rgba(219,24,43,.45)}}
@keyframes sp-glow{0%{opacity:0;transform:scale(.3)}25%{opacity:.75;transform:scale(1.2)}100%{opacity:.16;transform:scale(1)}}
@keyframes ray{0%{stroke-dashoffset:.3;opacity:0}6%{opacity:1}100%{stroke-dashoffset:-1.4;opacity:0}}
@keyframes ring{0%{opacity:0;transform:scale(.4)}8%{opacity:.6}100%{opacity:0;transform:scale(5)}}
@keyframes wipe-l{from{clip-path:inset(-20% 0 -20% 100%)}to{clip-path:inset(-20% 0 -20% 0)}}
@keyframes wipe-r{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% 0 -20% 0)}}
@keyframes run{0%{left:0;opacity:0}6%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes draw-v{from{transform:scaleY(0)}to{transform:none}}
@keyframes breathe{0%,100%{opacity:.16;transform:scale(1)}50%{opacity:.42;transform:scale(1.18)}}
@keyframes ember{0%,100%{box-shadow:0 0 .08em rgba(219,24,43,.5),0 0 .3em rgba(219,24,43,.22)}50%{box-shadow:0 0 .1em rgba(219,24,43,.7),0 0 .55em rgba(219,24,43,.38)}}
@keyframes ignite{from{color:transparent;-webkit-text-stroke:1.5px var(--ink)}to{color:var(--ink);-webkit-text-stroke:0 transparent}}
@keyframes draw-h{from{transform:scaleX(0)}to{transform:none}}
@keyframes draw-y{from{transform:scaleY(0)}to{transform:none}}
@keyframes sl{from{transform:translateX(-10%)}to{transform:none}}
@keyframes sr{from{transform:translateX(10%)}to{transform:none}}

@media (prefers-reduced-motion:no-preference){
  /* SPARK sequence: 0.15s spark → 0.85s burst → ONE SPARK. → trail → EVERYTHING CHANGES. → world */
  .sp-dot{animation:sp-in .7s .15s cubic-bezier(.3,1.4,.5,1) both,sp-flash 1s .85s ease-out both,ember 5s 3.4s ease-in-out infinite}
  .sp-glow{animation:sp-glow 1.6s .8s cubic-bezier(.2,.7,0,1) both,breathe 5s 3.4s ease-in-out infinite}
  .ps-dot{animation:ember 5s ease-in-out infinite}
  .sp-burst .ray{animation:ray .75s cubic-bezier(.12,.7,.2,1) both;animation-delay:var(--rd,.86s)}
  .sp-burst .ring{animation:ring 1s .85s cubic-bezier(.1,.6,.2,1) both}
  .one-txt{animation:wipe-l .95s .95s var(--ease-io) both}
  .ev-txt{animation:wipe-r 1.05s 1.6s var(--ease-io) both}
  .ev-run{animation:run 1.05s 1.6s var(--ease-io) both}
  .ch-in{animation:up 1s 2.35s var(--ease) both}
  .h-slot{animation:wipe-r 1s 2.5s var(--ease-io) both}
  .hero-grid i{animation:draw-v 1.4s var(--ease-io) both;animation-delay:calc(2.3s + var(--gi,0) * .05s)}
  .hero-meta,.h-sub,.hero-foot{animation:fade 1s 2.6s ease both}
  @supports (animation-timeline:view()){
    .h-ev .ev-x{display:block;animation:ex-l linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .h-ch .ch-x{display:block;animation:ex-r linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .ps-w{animation:ignite linear both;animation-timeline:view()}
    .ch-link{animation:draw-h linear both;animation-timeline:view();animation-range:entry 60% cover 40%}
    .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
    .reveal{animation:clipin linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    .c:not(.e) span.l{display:inline-block;animation:pop linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
    .ct-l1{animation:sl linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
    .ct-l2{animation:sr linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  }
}
@media (prefers-reduced-motion:reduce){
  .mq-track,.scroll-ind i::after{animation:none}
  .sp-burst,.spark-cv,.ev-run{display:none}
  .biz-pw,.biz-panel,.bp-visual,.biz-inner{transition:none}
  .bp-visual{clip-path:none}
}
/* touch: show project info without hover */
@media (hover:none){
  .pj-hover{display:none}
  .pj-more{display:flex}
}

/* ---------- tablet ---------- */
@container ssk (max-width:1080px){
  .nav{display:none}
  .brand{grid-column:1/7}
  .hdr-r{grid-column:7/13}
  .menu-btn{display:inline-flex}
  .biz-name{font-size:8.4cqi}
  .h-one{font-size:8.6cqi;grid-column:1/-1}
  .h-sub{grid-column:1/-1;grid-row:2;margin-top:24px;max-width:28em}
  .h-ev{grid-row:3}
  .h-ch,.h-slot{grid-row:4}
  .h-ev,.h-ch{font-size:13.4cqi}
  .xw-wrap{grid-column:1/-1}
  .ph-jp,.ph-desc{grid-column:3/-1}
  .chain{grid-template-columns:minmax(0,1fr);row-gap:0}
  .ch-link{width:2px;height:44px;margin:0 0 0 28px;transform-origin:top;animation-name:draw-y!important}
  .ch-link::after{right:auto;left:50%;top:auto;bottom:-1px;transform:translateX(-50%) rotate(135deg)}
  .ch-node{padding:16px 0}
  .c{font-size:6.4cqi}
  .phil-side{grid-column:1/-1;position:static;margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--gut)}
  .phil-side .clues{grid-row:span 3}
  .jr-thumb{display:none}
  .jr-title{grid-column:5/12}
}
/* ---------- phone ---------- */
@container ssk (max-width:720px){
  /* (phone padding stays at the root value; see shared components) */
  .g,.biz-btn,.jr{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hdr-in{height:var(--d-hdr-h-m,64px)}
  .brand{grid-column:1/3;gap:8px}.hdr-r{grid-column:3/5;gap:8px}
  .brand-mark{font-size:13px;white-space:normal;line-height:1.05}
  .brand .draft{display:none}
  .cta-s{display:none}
  .lang button{min-width:44px;padding:0 6px}
  .menu-btn{min-width:64px;padding:0 10px}
  .mmenu a{font-size:38px}
  .hero{padding-top:20px;padding-bottom:40px}
  .hero-meta{margin-bottom:28px;row-gap:8px}
  .hm-1,.hm-2{grid-column:1/-1}.hm-3{grid-column:1/-1;justify-content:flex-start}
  .hero-meta{margin-bottom:56px}
  .h-one{font-size:13.6cqi}
  .h-sub{margin-top:18px}
  .h-sub p{font-size:17px}
  .h-ev{margin-top:9cqi}
  .h-ev,.h-ch{font-size:12.6cqi}
  .h-ch{grid-column:1/-1;grid-row:4}
  .h-slot{grid-column:1/-1;grid-row:5;margin:22px 0 0}
  .hero-grid i:nth-child(n+5){display:none}
  .hero-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-foot{margin-top:28px}
  .hero-copy,.hero-en{grid-column:1/-1}
  .hero-foot .hero-copy{display:none}
  .scroll-ind{grid-column:1/-1;justify-self:start}
  .mq-item{font-size:36px;gap:20px;padding-right:20px}
  .sec{padding-block:var(--d-sec-pad-m,80px)}
  .sec-lab{flex-direction:row;gap:12px;margin-bottom:14px}
  .sec-title{font-size:var(--d-sec-title-m,15.5cqi)}
  .phil{padding-block:80px}
  .phil-head .sec-lab,.phil-title{grid-column:1/-1}
  .ph-statement{font-size:12.4cqi}
  .ps-2{padding-left:6%}
  .ph-jp,.ph-desc{grid-column:1/-1}
  .ph-jp{margin-top:44px;font-size:22px}
  .ph-desc p{font-size:15px;line-height:1.95}
  .chain{margin-top:72px}
  .chain-lab{flex-direction:column;gap:4px}
  .ch-node b,.ch-end b{font-size:22px}
  .fields{margin-top:88px}
  .phil-title{font-size:9cqi}
  .c{font-size:7.2cqi}
  .c .n{font-size:7px;top:2px;left:3px}
  .c.e::before{width:5px;height:5px}
  .xw-cap{flex-direction:column;gap:4px}
  .phil-side{grid-template-columns:1fr;margin-top:36px}
  .phil-side p.lead{font-size:16px}
  .biz-head .sec-lab,.biz-head .sec-title,.biz-note{grid-column:1/-1}
  .biz-head .sec-title{grid-row:2}
  .biz-count{grid-column:1/-1;grid-row:2;font-size:19cqi;-webkit-text-stroke-width:1.5px}
  .biz-btn{padding:20px var(--pad);row-gap:12px}
  .biz-no{grid-column:1/3;grid-row:1}
  .biz-ic{grid-column:4/5;grid-row:1}
  .biz-name{grid-column:1/-1;grid-row:2;font-size:12cqi;white-space:normal}
  .biz-dom{grid-column:1/-1;grid-row:3}
  .biz-row:not(.open) .biz-btn:hover .biz-name{transform:none}
  .biz-panel{padding:0 var(--pad) 32px;row-gap:22px}
  .bp-visual,.bp-side,.bp-works{grid-column:1/-1}
  .bp-works{grid-template-columns:1fr 1fr}

  .bp-value{font-size:19px!important}
  .bp-cta{font-size:20px;min-height:56px;padding:0 18px}
  .proj-sec{padding-block:80px 96px}
  .proj-head{margin-bottom:40px}
  .proj-head .sec-lab,.proj-head .sec-title,.proj-note{grid-column:1/-1}
  .pj-1-idx{font-size:30cqi;-webkit-text-stroke-width:1.5px}
  .pj-1-over{bottom:16px}
  .pj-pair{margin-top:64px;row-gap:48px}
  .pj-vlab{display:none}
  .pj-2{grid-column:1/4}.pj-3{grid-column:2/-1;margin-top:0}
  .pj-4{margin-top:72px}
  .pj-4-type{font-size:10.5cqi}
  .pj-4-type .slot{width:1.2em}
  .pj-5{margin-top:72px}
  .strip{grid-template-columns:1fr 1fr;row-gap:28px}
  .strip .s1{grid-column:1/-1}
  .all-link{font-size:36px}
  .proj-end{margin-top:64px}
  .jr-sec{padding-block:72px 80px}
  .jr-head .sec-lab,.jr-head h2{grid-column:1/-1}
  .jr-head h2{font-size:56px}
  .jr-head .jr-all{grid-column:1/-1;justify-self:start}
  .jr{row-gap:10px;padding:16px var(--pad);min-height:0}
  .jr-date{grid-column:1/3;font-size:22px}
  .jr-cat{grid-column:3/5;justify-self:end}
  .jr-title{grid-column:1/4;font-size:16px}
  .jr-ar{grid-column:4/5}
  .contact{padding-block:40px 48px}
  .ct-top .l,.ct-top .r{grid-column:1/-1;justify-self:start}
  .ct-top{row-gap:8px;margin-bottom:28px}
  .ct-big{font-size:19cqi}
  .ct-row{margin-top:32px}
  .ct-copy,.ct-btn{grid-column:1/-1}
  .ct-btn{min-height:84px;font-size:30px;padding:0 20px}
  .ftr{padding-top:64px}
  .fc-1{grid-column:1/-1}.fc-2{grid-column:1/3}.fc-3{grid-column:3/5}.fc-4{grid-column:1/-1}
  .ftr-word{font-size:13cqi;white-space:normal}
}
.c.e .l{display:none}

/* =====================================================================
   ROUNDED IDENTITY LAYER — Hard Structure, Soft Motion.
   Logo geometry, abstracted: ① circle  ② flowing S-curve  ③ sharp cut.
   Grid, type and hard section edges stay square; curves live in
   points, controls, masks and motion.
   ===================================================================== */
/* ① circle — every spark / mark is round */
.brand-dot,.sp-dot,.ps-dot,.ch-node .sq{border-radius:50%}
.sec-lab>span:first-child::before,.ct-top .l>span:first-child::before{border-radius:50%}
/* small UI → pills */
.ph-tag,.draft{border-radius:999px;padding-inline:10px}
.tbd{border-radius:4px}
.cta-s{border-radius:var(--d-btn-radius,999px)}.menu-btn{border-radius:999px}
.lang{border-radius:999px}
.lang button{border-radius:999px}
.nav a::after{left:50%;right:auto;width:6px;height:6px;margin-left:-3px;bottom:5px;border-radius:50%;transform:scale(0);transform-origin:center;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scale(1)}
/* arrows sit in circles */
.more .arrow{box-sizing:content-box;padding:5px;border:1px solid currentColor;border-radius:50%}
.bp-cta .arrow,.ct-btn .arrow{box-sizing:content-box;padding:12px;border-radius:50%;transition:transform .45s var(--ease),background .3s,color .3s}
.bp-cta .arrow{background:var(--white);color:var(--red)}
.bp-cta:hover .arrow{background:var(--red);color:var(--white);transform:none}
.ct-btn .arrow{background:var(--white);color:var(--ink)}
.ct-btn:hover .arrow{background:var(--ink);color:var(--white)}
.all-link .arrow{box-sizing:content-box;padding:10px;border:1px solid currentColor;border-radius:50%}
/* ③ sharp cut — primary CTAs: a capsule with one square corner */
.bp-cta{border-radius:999px 999px 999px 0;padding-left:28px;padding-right:9px}
.ct-btn{border-radius:999px 999px 999px 0;padding-left:44px;padding-right:18px}
/* accordion: circular indicator + a dot on the open row */
.biz-ic{border-radius:50%}
.biz-no{display:flex;align-items:center;gap:8px}
.biz-no::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;transform:scale(0);transition:transform .45s var(--ease)}
.biz-row.open .biz-no::before{transform:scale(1)}
/* detail panel: one large arc corner on the visual, round logo slot */
.bp-visual{border-top-right-radius:min(14cqi,220px)}
.bp-logo{border-radius:50%;justify-content:center;align-items:center;text-align:center}
/* images: strength and curve together — never one uniform radius */
.h-slot{border-radius:999px;justify-content:center;text-align:center;padding-inline:16%}
.h-slot .ph-tag{left:50%;transform:translateX(-50%)}
.pj-2 .pj-media{border-radius:999px 999px 0 0}
.pj-2 .ph-tag{left:50%;transform:translateX(-50%);top:22%}
.strip .s2 .pj-media{border-top-left-radius:min(12cqi,180px)}
.strip .s2 .ph-tag{left:auto;right:10px}
.strip .s3 .pj-media{border-radius:50%}
.strip .s3 .ph-tag{left:50%;transform:translateX(-50%);top:16%}
.strip .s3 .ph{justify-content:center}
.pj-hover{left:14px;right:14px;bottom:14px;border-radius:999px;padding:12px 20px;align-items:center;transform:translateY(calc(100% + 24px))}
.jr-thumb{width:64px;aspect-ratio:1/1;border-radius:50%}
.jr-ar{border-radius:50%}
.slot{border-radius:999px}
/* crossword: the crossing point becomes a circle */
.c.xx{background:transparent;isolation:isolate}
.c.xx::after{content:"";position:absolute;inset:9%;border-radius:50%;background:var(--red);z-index:-1}
.c.on.xx{background:var(--ink)}
/* ② flowing curve — dividers that bend once */
.crule{display:block;width:100%;height:32px;overflow:visible}
.crule path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.fields{border-top:0;padding-top:0}
.fields .crule{margin-bottom:36px}
.ct-top{border-bottom:0;padding-bottom:0}
.ct-top .crule{grid-column:1/-1;color:rgba(255,255,255,.6);margin-top:18px}
/* hero: the runner is a round spark; a wide orbit opens from the ignition point */
.ev-run{width:.13em;height:.13em;top:50%;bottom:auto;margin-top:-.065em;border-radius:50%}
.sp-arc{position:absolute;left:50%;top:50%;width:22em;height:22em;margin:-11em 0 0 -11em;overflow:visible;pointer-events:none}
.sp-arc circle{fill:none;stroke:var(--red);stroke-width:.06;opacity:.45;stroke-dasharray:1;stroke-dashoffset:0;transform:rotate(-200deg);transform-origin:center;transform-box:fill-box}
.sp-arc circle.o2{stroke:var(--ink);opacity:.12;stroke-width:.05}
/* contact: a quiet orbit closes the page */
.contact{position:relative;overflow:hidden;isolation:isolate}
.ct-orbit{position:absolute;z-index:-1;right:-14cqi;top:-16cqi;width:56cqi;aspect-ratio:1/1;border:1px solid rgba(255,255,255,.38);border-radius:50%;pointer-events:none}
.ct-orbit::after{content:"";position:absolute;left:14.6%;bottom:14.6%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--white)}
.ftr-dot{display:inline-block;width:.17em;height:.17em;margin-left:.07em;border-radius:50%;background:var(--red)}

@keyframes arc-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes iris{from{clip-path:circle(10% at 50% 62%)}to{clip-path:circle(75% at 50% 50%)}}
@media (prefers-reduced-motion:no-preference){
  .sp-arc circle{animation:arc-draw 2.2s 2.05s var(--ease-io) both}
  .sp-arc circle.o2{animation-duration:2.8s;animation-delay:2.25s}
  @supports (animation-timeline:view()){
    .pj-1 .reveal{animation-name:iris;animation-range:entry 0% cover 45%}
    .strip .s3 .reveal,.pj-2 .reveal{animation-name:fade}
  }
}
@media (prefers-reduced-motion:reduce){.sp-arc{display:none}}
@container ssk (max-width:720px){
  .ct-orbit{right:-40cqi;top:-24cqi;width:110cqi}
  .bp-cta{padding-left:20px;padding-right:6px}
  .bp-cta .arrow{padding:9px}
  .ct-btn{padding-left:26px;padding-right:12px}
  .ct-btn .arrow{width:30px;height:30px;padding:10px}
  .pj-hover{display:none}
  .pj-more{display:flex}
  .jr-thumb{display:none}
}


/* =====================================================================
   PHASE 3
   ===================================================================== */
/* official logo — used as supplied (shape, ratio, color unchanged) */
.brand{gap:0}
.brand-logo{display:block;height:var(--d-logo-h,30px);width:auto}
.ftr-brand{align-items:end;row-gap:24px;padding-bottom:8px}
.ftr-logo{grid-column:1/9;display:block}
.ftr-logo img{display:block;width:100%;height:auto}
.ftr-tag{grid-column:10/13;justify-self:end;text-align:right;display:flex;flex-direction:column;gap:8px}
.ftr-tag b{font-size:28px;line-height:.95;text-transform:uppercase;color:var(--white)}

/* mask balance: square by default, special shapes as accents (~20%) */
.bp-logo{border-radius:0}
.strip .s2 .pj-media{border-top-left-radius:0}
.strip .s2 .ph-tag{left:10px;right:auto}
.pj-4-type .slot{border-radius:0}
.jr-thumb{border-radius:0;width:96px;aspect-ratio:4/3}

/* media slots: real images drop in; ratio / focal point / crop per slot */
.media{position:relative;overflow:hidden;aspect-ratio:var(--ratio,auto)}
.media>.ph{position:absolute;inset:0}
.media-img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:var(--fit,cover);
  object-position:var(--pos,50% 50%);transform:scale(var(--zoom,1));transform-origin:var(--pos,50% 50%);transition:transform 1.1s var(--ease)}
.pj:hover .media-img{transform:scale(calc(var(--zoom,1) * 1.035))}
.bp-logo.media{padding:0}
.bp-logo .media-img{inset:12%;width:76%;height:76%}
.h-slot.media{padding:0}

/* philosophy: message first, fields in one line */
.ph-desc p{font-size:18px}
.fields-brief{grid-column:1/-1;margin-top:96px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center;row-gap:20px}
.fields-brief .crule{grid-column:1/-1;margin-bottom:12px}
.fb-lab{grid-column:1/4}
.fb-list{grid-column:4/11;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.fb-list li{display:flex;align-items:center;gap:18px;font-size:40px;line-height:1;text-transform:uppercase}
.fb-list li+li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.fb-more{grid-column:11/13;justify-self:end}

@container ssk (max-width:1080px){
  .fb-lab{grid-column:1/-1}.fb-list{grid-column:1/-1}.fb-more{grid-column:1/-1;justify-self:start}
  .ftr-logo{grid-column:1/-1}.ftr-tag{grid-column:1/-1;justify-self:start;text-align:left}
}
@container ssk (max-width:720px){
  .brand-logo{height:var(--d-logo-h-m,24px)}
  .ssk .media{aspect-ratio:var(--ratio-m,var(--ratio,auto))}
  .fields-brief{margin-top:64px}
  .fb-list{gap:6px 12px}
  .fb-list li{font-size:26px;gap:12px}
  .fb-list li+li::before{width:6px;height:6px}
  .ftr-tag b{font-size:22px}
}
.pj-media{display:block}
.bp-works .wk-2{border-radius:999px 999px 0 0}
.bp-works .wk-2 .ph-tag{left:50%;transform:translateX(-50%);top:28%}
@container ssk (max-width:720px){.bp-works .wk-1{grid-column:1/-1}}
.bp-visual{border-top-right-radius:0}
.h-slot .ph{justify-content:center;text-align:center;padding-inline:16%}

/* ---------- footer logo: compact, original file, ratio kept ---------- */
.ftr{padding-top:var(--d-ftr-pt,80px)}
.ftr-cols{padding-bottom:64px}
.ftr-logo{display:block;width:200px;margin:0 0 28px;padding:0}
.ftr-logo img{display:block;width:100%;height:auto}
.ftr-claim{font-size:11px;margin-bottom:28px}
@container ssk (max-width:1080px){.ftr-logo{width:176px}}
@container ssk (max-width:720px){.ftr{padding-top:var(--d-ftr-pt-m,56px)}.ftr-cols{padding-bottom:48px}.ftr-logo{width:152px;margin-bottom:24px}.ftr-claim{margin-bottom:24px}}

/* shared components: keep the header sticky even when the import adds a host element */
:not(.ssk):has(> .hdr){position:sticky;top:0;z-index:50}
.nav a[aria-current="page"]::after{transform:scale(1)}

/* =====================================================================
   ABOUT US — quieter, wider margins, editorial
   ===================================================================== */
.ab-intro{position:relative;padding-top:32px;padding-bottom:88px}
.ab-meta{align-items:start}
.ab-meta .l{grid-column:1/7}.ab-meta .r{grid-column:7/13;justify-self:end;display:flex;gap:12px;align-items:center}
.ab-title{grid-column:1/-1;margin-top:9cqi;font-size:16cqi;line-height:.8;text-transform:uppercase;white-space:nowrap;display:flex;align-items:baseline}
.ab-title .sp{width:.15em;height:.15em}
.ab-intro-row{margin-top:96px;align-items:end;row-gap:40px}
.ab-logo{grid-column:1/4;display:block;width:100%;max-width:220px}
.ab-logo img{display:block;width:100%;height:auto}
.ab-msg{grid-column:7/13;display:flex;flex-direction:column;gap:20px}
.ab-msg b{font-size:4.4cqi;line-height:.9;text-transform:uppercase}
.ab-msg p{font-size:20px;font-weight:500;letter-spacing:.04em}
.ab-intro .crule{margin-top:88px}

.ab-phil{background:var(--white);padding-block:144px 160px}
.ab-phil-side{grid-column:1/6;align-self:start;position:sticky;top:120px;display:flex;flex-direction:column;gap:40px}
.ab-phil-h{font-size:44px;line-height:1.5;font-weight:700;letter-spacing:.04em}
.ab-phil-media{width:78%}
.ab-text{grid-column:7/12;display:flex;flex-direction:column;gap:56px;padding-top:8px}
.ab-text p{font-size:18px;line-height:2.25;letter-spacing:.05em}
.ab-stanza{display:flex;flex-direction:column}
.ab-list li{display:grid;grid-template-columns:44px 1fr;align-items:baseline;font-size:20px;line-height:2.2;font-weight:500;letter-spacing:.05em}
.ab-list li .mono{font-size:11px}
.ab-closing{font-size:28px!important;line-height:1.75!important;font-weight:700;letter-spacing:.04em}
.ab-closing .ps-dot{vertical-align:.1em}

.ab-purpose{background:var(--ink);color:var(--white);padding-block:136px 144px}
.ab-purpose .sec-lab{grid-column:1/-1;flex-direction:row;gap:14px;margin-bottom:48px}
.ab-pur-h{grid-column:1/-1;font-size:12.4cqi;line-height:.84;text-transform:uppercase}
.ab-pur-h .l2{padding-left:16.6%}
.ab-start{grid-column:1/-1;display:flex;align-items:center;margin-top:56px}
.ab-start .dot{width:16px;height:16px;border-radius:50%;background:var(--red);flex:none;box-shadow:0 0 14px rgba(219,24,43,.55)}
.ab-start .ln{flex:1;height:1px;background:rgba(255,255,255,.5);transform-origin:left}
.ab-pur-jp{grid-column:1/8;margin-top:64px;font-size:30px;line-height:1.6;font-weight:700;letter-spacing:.04em}
.ab-pur-list{grid-column:1/-1;margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);border-top:1px solid rgba(255,255,255,.35)}
.ab-pur-list li{display:flex;flex-direction:column;gap:14px;padding-top:20px}
.ab-pur-list b{font-size:22px;line-height:1.6;font-weight:700}
.ab-pur-note{grid-column:1/8;margin-top:48px;font-size:17px;line-height:2.1}

.ab-work{padding-block:136px 152px}
.ab-work-head{align-items:end;margin-bottom:104px}
.ab-work-head .sec-lab{grid-column:1/4;align-self:start}
.ab-work-head h2{grid-column:4/13;font-size:11cqi;line-height:.82;text-transform:uppercase}
.wk{align-items:center;row-gap:32px}
.wk+.wk{margin-top:144px}
.wk-media{position:relative}
.wk-text{display:flex;flex-direction:column;gap:18px}
.wk-text h3{font-size:7cqi;line-height:.82;text-transform:uppercase}
.wk-text .jp{font-size:26px;line-height:1.5;font-weight:700;letter-spacing:.04em}
.wk-text p.body{font-size:17px;line-height:2.05;max-width:30em}
.wk-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--ink);border-radius:999px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.02em;transition:background .25s,color .25s,border-color .25s}
.pill:hover{background:var(--red);border-color:var(--red);color:var(--white)}
.pill .pdot{width:6px;height:6px;border-radius:50%;background:var(--red);transition:background .25s}
.pill:hover .pdot{background:var(--white)}
.wk-a .wk-media{grid-column:1/7}.wk-a .wk-text{grid-column:8/13}
.wk-b .wk-text{grid-column:1/6;grid-row:1}.wk-b .wk-media{grid-column:7/13;grid-row:1;border-radius:999px 999px 0 0}
.wk-c{align-items:start}
.wk-c .wk-text{grid-column:1/7}
.wk-c .wk-text h3{font-size:14cqi}
.wk-c-list{grid-column:8/13;border-top:1px solid var(--ink);margin-top:2cqi}
.wk-c-list li{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--ink)}
.wk-c-list .nm{font-size:34px;line-height:1;text-transform:uppercase}
.wk-c-list .dm{grid-column:1/-1;font-size:15px}

.ab-prof{background:var(--white);padding-block:128px 144px;border-top:1px solid var(--ink)}
.ab-prof-head{grid-column:1/5;align-self:start;display:flex;flex-direction:column;gap:20px}
.ab-prof-head h2{font-size:7cqi;line-height:.85;text-transform:uppercase}
.ab-dl{grid-column:5/13;border-top:1px solid var(--ink)}
.ab-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:8px var(--gut);padding:22px 0;border-bottom:1px solid rgba(17,17,17,.25)}
.ab-row dt{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:500}
.ab-row dd{margin:0;font-size:17px;line-height:1.85}
.ab-biz li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:4px 16px;padding:6px 0}
.ab-biz .nm{font-family:"Archivo",Arial,sans-serif;font-weight:800;font-variation-settings:"wdth" 62;font-size:20px;line-height:1.3}
.ab-biz .dm{font-size:15px;line-height:1.7}

@keyframes draw-x{from{transform:scaleX(0)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .ab-start .ln{animation:draw-x linear both;animation-timeline:view();animation-range:entry 70% cover 55%}
  }
}

@container ssk (max-width:1080px){
  .ab-msg{grid-column:5/13}
  .ab-phil-side{grid-column:1/-1;position:static}
  .ab-phil-media{width:56%}
  .ab-text{grid-column:1/-1;margin-top:56px}
  .ab-pur-jp,.ab-pur-note{grid-column:1/11}
  .wk-a .wk-media,.wk-b .wk-media{grid-column:1/-1;grid-row:auto}
  .wk-a .wk-text,.wk-b .wk-text{grid-column:1/-1;grid-row:auto}
  .wk-c .wk-text,.wk-c-list{grid-column:1/-1}
  .ab-prof-head{grid-column:1/-1;margin-bottom:40px}
  .ab-dl{grid-column:1/-1}
}
@container ssk (max-width:720px){
  .ab-intro{padding-bottom:64px}
  .ab-meta .l,.ab-meta .r{grid-column:1/-1;justify-self:start}
  .ab-meta{row-gap:8px}
  .ab-title{font-size:19cqi;white-space:normal;flex-wrap:wrap;margin-top:56px}
  .ab-intro-row{margin-top:56px}
  .ab-logo{grid-column:1/-1;max-width:160px}
  .ab-msg{grid-column:1/-1}
  .ab-msg b{font-size:9cqi}
  .ab-msg p{font-size:17px}
  .ab-intro .crule{margin-top:56px}
  .ab-phil{padding-block:88px 96px}
  .ab-phil-h{font-size:28px}
  .ab-phil-media{width:100%}
  .ab-text{gap:40px}
  .ab-text p{font-size:16px;line-height:2.15}
  .ab-list li{font-size:17px;grid-template-columns:34px 1fr}
  .ab-closing{font-size:21px!important}
  .ab-purpose{padding-block:88px 96px}
  .ab-pur-h{font-size:13.4cqi}
  .ab-pur-h .l2{padding-left:6%}
  .ab-pur-jp,.ab-pur-note{grid-column:1/-1}
  .ab-pur-jp{font-size:22px;margin-top:44px}
  .ab-pur-list{grid-template-columns:1fr;row-gap:0}
  .ab-pur-list li{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.25)}
  .ab-pur-list b{font-size:18px}
  .ab-work{padding-block:88px 96px}
  .ab-work-head{margin-bottom:56px}
  .ab-work-head .sec-lab,.ab-work-head h2{grid-column:1/-1}
  .ab-work-head h2{font-size:15.5cqi}
  .wk+.wk{margin-top:96px}
  .wk-text h3{font-size:15cqi}
  .wk-c .wk-text h3{font-size:19cqi}
  .wk-text .jp{font-size:21px}
  .wk-text p.body{font-size:15px}
  .wk-c-list .nm{font-size:26px}
  .ab-prof{padding-block:88px 96px}
  .ab-prof-head h2{font-size:14cqi}
  .ab-row{grid-template-columns:1fr;padding:18px 0}
  .ab-biz li{grid-template-columns:1fr}
}
.ab-title{display:block}
.ab-us{display:inline-flex;align-items:baseline;white-space:nowrap}
.ab-prof-head h2{font-size:5cqi}
.ab-pur-h{font-size:9.6cqi}
.ab-pur-h>span{white-space:nowrap}
.ab-pur-h .l2{padding-left:8%}
@container ssk (max-width:720px){
  .ab-phil-h{font-size:23px}
  .ab-pur-h{font-size:13.4cqi}
  .ab-pur-h>span{white-space:normal}
  .ab-prof-head h2{font-size:14cqi}
}
.ab-title .sp-glow{width:1.1em;height:1.1em;margin:-.55em 0 0 -.55em}

/* ===== ABOUT — refinement 1 (scoped to .ab-*) ===== */
/* PHILOSOPHY: statement first, then photo → text */
.ab-phil{padding-block:136px 160px}
.ab-phil-lab{grid-column:1/-1;margin-bottom:44px}
.ab-phil-h{grid-column:1/11;font-size:clamp(40px,4.6cqi,68px);line-height:1.42;letter-spacing:.03em;font-weight:700}
.ab-phil-body{margin-top:104px;align-items:start}
.ab-phil-media{grid-column:1/6;width:auto;position:sticky;top:120px}
.ab-text{grid-column:7/12;max-width:30em;gap:44px;padding-top:0}
.ab-text p{font-size:17px;line-height:2.15;letter-spacing:.04em}
.ab-text .ab-lead{font-size:24px;line-height:1.8;font-weight:700;letter-spacing:.03em}
.ab-list li{font-size:19px;line-height:2.1}
/* OUR PURPOSE → three approaches */
.ab-appr-lab{grid-column:1/-1;margin-top:80px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ab-appr{margin-top:18px}
.ab-appr li{padding:0}
.ab-appr-a{display:flex;flex-direction:column;gap:14px;height:100%;padding:26px 0 28px;transition:color .3s}
.ab-appr-a .nm{font-size:3.8cqi;line-height:.9;text-transform:uppercase;transition:color .3s}
.ab-appr-a b{font-size:18px;line-height:1.7;font-weight:500}
.ab-appr-a .go{width:44px;height:44px;margin-top:auto;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:grid;place-items:center;transition:background .3s,border-color .3s}
.ab-appr-a:hover .nm{color:var(--red)}
.ab-appr-a:hover .go{background:var(--red);border-color:var(--red)}
.ab-pur-note{grid-column:1/9}
/* HOW WE WORK: approaches, not steps */
.ab-work-sub{grid-column:4/13;margin-top:20px;font-size:20px;font-weight:500;letter-spacing:.04em}
.wk-tag{display:inline-flex;align-items:center;gap:8px;color:var(--gray-3)}
.wk-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.wk{scroll-margin-top:96px}
/* COMPANY PROFILE: readability */
.ab-row{padding:24px 0;gap:6px var(--gut);align-items:baseline}
.ab-row dt{font-size:14px;font-weight:700;line-height:1.6;color:var(--ink)}
.ab-row dt .mono{font-size:11px;font-weight:400;color:var(--gray-3)}
.ab-row dd{font-size:16px;line-height:1.9;overflow-wrap:anywhere;line-break:strict}
.ab-row .tbd{font-size:14px}
.ab-biz li{padding:8px 0}
.ab-biz li+li{border-top:1px solid rgba(17,17,17,.1)}
.ab-biz .nm{font-size:18px}
.ab-biz .dm{font-size:15px;line-height:1.8}

@container ssk (max-width:1080px){
  .ab-phil-h{grid-column:1/-1;font-size:44px}
  .ab-phil-body{margin-top:64px}
  .ab-phil-media{grid-column:1/-1;position:relative;top:auto;width:60%}
  .ab-text{grid-column:1/-1;margin-top:56px}
  .ab-appr-a .nm{font-size:5cqi}
  .ab-pur-note{grid-column:1/-1}
  .ab-work-sub{grid-column:1/-1}
}
@container ssk (max-width:720px){
  .ab-phil{padding-block:88px 96px}
  .ab-phil-h{font-size:25px;line-height:1.55}
  .ab-phil-body{margin-top:44px}
  .ab-phil-media{width:100%}
  .ab-text{margin-top:44px;gap:36px}
  .ab-text p{font-size:16px;line-height:2.05}
  .ab-text .ab-lead{font-size:20px}
  .ab-list li{font-size:17px}
  .ab-appr-lab{margin-top:56px}
  .ab-appr{grid-template-columns:1fr}
  .ab-appr li{border-bottom:1px solid rgba(255,255,255,.25)}
  .ab-appr-a{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:22px 0}
  .ab-appr-a .nm{font-size:11cqi}
  .ab-appr-a b{order:3;flex-basis:100%;font-size:16px}
  .ab-appr-a .go{margin-top:0}
  .ab-work-sub{font-size:17px}
  .ab-row{padding:20px 0;gap:8px}
  .ab-row dd{font-size:15px}
  .ab-biz .nm{font-size:17px}
  .ab-biz .dm{font-size:14px}
}
.ab-text .ab-lead,.ab-phil-h,.ab-pur-jp,.ab-appr-a b,.ab-closing{text-wrap:balance}
.ab-text p{text-wrap:pretty}
/* ABOUT final: closing message as the key statement */
.ab-text .ab-closing{margin-top:32px;padding-top:36px;border-top:1px solid var(--ink);max-width:none;
  font-size:min(34px, calc((100cqi - 2 * var(--pad)) / 15))!important;line-height:1.65!important;letter-spacing:.03em}
.ab-closing em{font-style:normal;color:var(--red)}
.ab-text{max-width:none}
.ab-text>*:not(.ab-closing){max-width:30em}
@container ssk (max-width:1080px){.ab-text .ab-closing{margin-top:16px}}

/* =====================================================================
   BUSINESS (scoped to .bz-*)
   ===================================================================== */
.cat-pills{display:flex;flex-wrap:wrap;gap:6px}
.cat-pill{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px solid currentColor;border-radius:999px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.go-c{width:44px;height:44px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;flex:none;transition:background .3s,border-color .3s,color .3s,transform .4s var(--ease)}

/* HERO */
.bz-hero{position:relative;padding-top:32px;padding-bottom:88px;overflow:hidden}
.bz-meta .l{grid-column:1/7}.bz-meta .r{grid-column:7/13;justify-self:end;display:flex;gap:12px;align-items:center}
.bz-hero-row{margin-top:48px;align-items:end;row-gap:32px}
.bz-msg{grid-column:1/7;display:flex;flex-direction:column;gap:24px;padding-bottom:1.5cqi}
.bz-jp{font-size:clamp(30px,3.2cqi,46px);line-height:1.45;font-weight:700;letter-spacing:.03em}
.bz-lines{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:17px;font-weight:700}
.bz-lines span{display:inline-flex;align-items:center;gap:10px}
.bz-lines span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.bz-msg .d{font-size:16px;line-height:2;max-width:28em}
.bz-05{grid-column:7/13;justify-self:end;font-size:30cqi;line-height:.74;color:transparent;-webkit-text-stroke:2px var(--red);letter-spacing:-.02em}
.bz-title{grid-column:1/-1;margin-top:5cqi;font-size:16cqi;line-height:.8;text-transform:uppercase;white-space:nowrap;display:flex;align-items:baseline}
.bz-title .sp{width:.15em;height:.15em}
.bz-title .sp-glow{width:1.1em;height:1.1em;margin:-.55em 0 0 -.55em}

/* OVERVIEW */
.bz-ov{padding-block:104px 120px;border-top:1px solid var(--ink)}
.bz-ov-head{align-items:end;margin-bottom:48px}
.bz-ov-head .sec-lab{grid-column:1/4;align-self:start}
.bz-ov-head h2{grid-column:4/13;font-size:4.4cqi;line-height:.9;text-transform:uppercase}
.bz-list{border-top:2px solid var(--ink)}
.bz-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:10px;align-items:center;min-height:104px;padding:18px var(--pad);border-bottom:1px solid var(--ink);transition:background .3s,color .3s}
.bz-row .no{grid-column:1/2}
.bz-row .nm{grid-column:2/6;font-size:40px;line-height:1}
.bz-row .cat-pills{grid-column:6/8}
.bz-row .ds{grid-column:8/12;font-size:15px;line-height:1.75}
.bz-row .go-c{grid-column:12/13;justify-self:end}
.bz-row:hover{background:var(--ink);color:var(--white)}
.bz-row:hover .mute{color:var(--gray-4)}
.bz-row:hover .go-c{background:var(--red);border-color:var(--red);transform:translateY(3px)}

/* BUSINESS SECTIONS — shared rules */
.bz-sec{padding-block:136px;border-top:1px solid var(--ink);scroll-margin-top:72px;align-items:start}
.bz-sec.inv{border-top-color:var(--ink)}
.bz-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:28px}
.bz-num{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.04em}
.bz-num b{font-weight:500;color:var(--red)}
.bz-name{font-size:9.6cqi;line-height:.84;text-wrap:balance}
.bz-catch{margin-top:28px;font-size:30px;line-height:1.5;font-weight:700;letter-spacing:.03em;text-wrap:balance}
.bz-desc{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.bz-desc p{font-size:16px;line-height:2.05;max-width:30em}
.bz-vals{margin-top:32px}
.bz-vals-lab{display:block;margin-bottom:10px}
.bz-vals ul{border-top:1px solid currentColor}
.bz-vals li{display:grid;grid-template-columns:22px 1fr;align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(17,17,17,.18);font-size:15px;line-height:1.7}
.inv .bz-vals li{border-bottom-color:rgba(255,255,255,.22)}
.bz-vals li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);transform:translateY(-2px)}
.bz-ctas{margin-top:36px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.bz-ctas .bp-cta{align-self:flex-start;min-width:min(100%,360px)}
.bz-tx{display:flex;flex-direction:column}
.bz-cap{margin-top:10px}

/* A — ambassador: fashion editorial */
.bz-a .m1{grid-column:1/7;grid-row:1/3}
.bz-a .bz-tx{grid-column:8/13;grid-row:1}
.bz-a .m2{grid-column:9/13;grid-row:2;align-self:end;margin-top:64px}
/* B — VAULT CORE: product UI, ordered grid */
.bz-b{background:var(--white)}
.bz-b .bz-tx{grid-column:1/6}
.bz-b .screen{grid-column:6/13}
.screen{border:1px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--white)}
.screen .bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--ink)}
.screen .bar i{width:8px;height:8px;border-radius:50%;border:1px solid var(--gray-2)}
.screen.sq{border-radius:0}
.bz-grid4{grid-column:1/-1;margin-top:72px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.bz-grid4 li{display:flex;flex-direction:column;gap:8px;padding:22px 20px 26px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.bz-grid4 b{font-size:22px;font-weight:700}
/* C — BORDERS: connections (abstract) */
.bz-c{background:var(--ink);color:var(--white)}
.bz-c .bz-tx{grid-column:1/6}
.bz-c .net{grid-column:7/13}
.net svg{display:block;width:100%;height:auto}
.net .nd{fill:var(--ink);stroke:var(--white);stroke-width:1.2}
.net .nd.r{fill:var(--white)}
.net .ln{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1}
.net .ln.hot{stroke:var(--red);stroke-width:1.6}
.net text{fill:var(--gray-4);font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.bz-c .m1{grid-column:1/-1;margin-top:88px}
/* D — BILLPORT: precision, type + UI */
.bz-d .bz-tx{grid-column:1/7}
.bz-d .screen{grid-column:8/13;margin-top:8px}
.ledger{margin-top:36px;border-top:2px solid var(--ink)}
.ledger li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--ink)}
.ledger b{font-size:20px;font-weight:700}
.ledger .mono{justify-self:end}
/* E — OEM / PRODUCTION: making, editorial */
.bz-e{background:var(--white)}
.bz-e .bz-tx{grid-column:1/7}
.bz-e .strip-e{grid-column:1/-1;margin-top:80px;display:grid;grid-template-columns:4fr 3fr 4fr;gap:var(--gut);align-items:end}
.bz-e .strip-e .media:nth-child(2){border-radius:50%}
.bz-e .strip-e .media:nth-child(2) .ph-tag{left:50%;transform:translateX(-50%);top:16%}
.bz-e .strip-e .media:nth-child(2) .ph{justify-content:center}
.bz-e .side{grid-column:8/13;align-self:end;display:flex;flex-direction:column;gap:16px}
.bz-e .bz-ctas .bp-cta{min-width:min(100%,400px)}

/* CONNECTIONS */
.bz-conn{background:var(--ink);color:var(--white);padding-block:136px 144px}
.bz-conn .sec-lab{grid-column:1/-1;flex-direction:row;gap:14px;margin-bottom:48px}
.bz-conn-h{grid-column:1/8;font-size:7.4cqi;line-height:.86;text-transform:uppercase}
.bz-conn-tx{grid-column:1/7;margin-top:40px;display:flex;flex-direction:column;gap:18px}
.bz-conn-tx .jp{font-size:28px;font-weight:700;letter-spacing:.03em}
.bz-conn-tx p.d{font-size:16px;line-height:2.05}
.bz-conn .orbit{grid-column:8/13;grid-row:2/4;align-self:center}
.orbit svg{display:block;width:100%;height:auto;overflow:visible}
.orbit .ring{fill:none;stroke:rgba(255,255,255,.25);stroke-width:1}
.orbit .sp-l{stroke:rgba(255,255,255,.35);stroke-width:1}
.orbit .nd{fill:var(--ink);stroke:var(--white);stroke-width:1.2}
.orbit .core{fill:var(--red)}
.orbit text{fill:var(--white);font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.04em}
.orbit text.c{fill:var(--white);font-size:12px}
.bz-note{grid-column:1/-1;margin-top:40px}

/* INQUIRY */
.bz-inq{padding-block:104px 112px}
.bz-inq-head{align-items:end;margin-bottom:32px}
.bz-inq-head .sec-lab{grid-column:1/4}
.bz-inq-head h2{grid-column:4/13;font-size:4.4cqi;line-height:.9;text-transform:uppercase}
.bz-inq-list{border-top:2px solid var(--ink)}
.bz-inq-list a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:84px;padding:12px var(--pad);border-bottom:1px solid var(--ink);transition:background .3s,color .3s}
.bz-inq-list a b{font-size:22px;font-weight:700}
.bz-inq-list a .t{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.bz-inq-list a:hover{background:var(--red);color:var(--white)}
.bz-inq-list a:hover .mute{color:rgba(255,255,255,.85)}
.bz-inq-list a:hover .go-c{background:var(--white);color:var(--red);border-color:var(--white)}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .net .ln{stroke-dasharray:1;stroke-dashoffset:0;animation:arc-draw linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
  }
}

@container ssk (max-width:1080px){
  .bz-msg{grid-column:1/-1;grid-row:2}
  .bz-05{grid-column:1/-1;grid-row:1;justify-self:start;font-size:36cqi}
  .bz-ov-head .sec-lab{grid-column:1/-1;margin-bottom:12px}
  .bz-ov-head h2{grid-column:1/-1;font-size:7cqi}
  .bz-row .nm{grid-column:2/7;font-size:34px}
  .bz-row .cat-pills{grid-column:7/12}
  .bz-row .ds{grid-column:2/12}
  .bz-row .go-c{grid-row:1}
  .bz-a .m1,.bz-a .bz-tx,.bz-a .m2{grid-column:1/-1;grid-row:auto}
  .bz-a .m2{grid-column:5/-1}
  .bz-a .bz-tx{margin-top:48px}
  .bz-b .bz-tx,.bz-b .screen,.bz-c .bz-tx,.bz-c .net,.bz-d .bz-tx,.bz-d .screen,.bz-e .bz-tx,.bz-e .side{grid-column:1/-1}
  .bz-b .screen,.bz-c .net,.bz-d .screen{margin-top:48px}
  .bz-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bz-e .side{margin-top:40px}
  .bz-name{font-size:12cqi}
  .bz-conn-h,.bz-conn-tx{grid-column:1/-1}
  .bz-conn .orbit{grid-column:3/11;grid-row:auto;margin-top:56px}
  .bz-inq-head .sec-lab,.bz-inq-head h2{grid-column:1/-1}
  .bz-inq-head h2{font-size:7cqi;margin-top:12px}
}
@container ssk (max-width:720px){
  .bz-hero{padding-bottom:64px}
  .bz-meta .l,.bz-meta .r{grid-column:1/-1;justify-self:start}
  .bz-meta{row-gap:8px}
  .bz-hero-row{margin-top:32px}
  .bz-05{font-size:52cqi;-webkit-text-stroke-width:1.5px}
  .bz-jp{font-size:24px}
  .bz-lines{font-size:15px;flex-direction:column}
  .bz-msg .d{font-size:15px}
  .bz-title{font-size:15.5cqi;margin-top:48px}
  .bz-ov{padding-block:72px 88px}
  .bz-ov-head h2{font-size:11cqi}
  .bz-row{grid-template-columns:repeat(4,minmax(0,1fr));padding:18px var(--pad)}
  .bz-row .no{grid-column:1/3;grid-row:1}
  .bz-row .go-c{grid-column:4/5;grid-row:1}
  .bz-row .nm{grid-column:1/-1;grid-row:2;font-size:30px}
  .bz-row .cat-pills{grid-column:1/-1;grid-row:3}
  .bz-row .ds{grid-column:1/-1;grid-row:4;font-size:14px}
  .bz-sec{padding-block:80px 88px}
  .bz-name{font-size:14cqi}
  .bz-catch{font-size:22px;margin-top:20px}
  .bz-desc p{font-size:15px}
  .bz-vals li{font-size:14px}
  .bz-a .m2{grid-column:2/-1}
  .bz-grid4{grid-template-columns:1fr 1fr}
  .bz-grid4 li{padding:16px 14px 18px}
  .bz-grid4 b{font-size:17px}
  .ledger li{grid-template-columns:1fr auto;gap:6px 12px}
  .ledger li .ds{grid-column:1/-1;grid-row:2}
  .ledger b{font-size:17px}
  .bz-c .m1,.bz-e .strip-e{margin-top:56px}
  .bz-e .strip-e{grid-template-columns:1fr 1fr}
  .bz-e .strip-e .media:first-child{grid-column:1/-1}
  .bz-ctas .bp-cta,.bz-e .bz-ctas .bp-cta{min-width:100%}
  .bz-conn{padding-block:88px 96px}
  .bz-conn-h{font-size:12cqi}
  .bz-conn-tx .jp{font-size:22px}
  .bz-conn .orbit{grid-column:1/-1}
  .bz-inq{padding-block:72px 80px}
  .bz-inq-head h2{font-size:11cqi}
  .bz-inq-list a b{font-size:17px}
  .bz-inq-list a .t{flex-direction:column;gap:2px}
}
.net text{font-size:13px}
.orbit text{font-size:15px}.orbit text.c{font-size:16px}
@container ssk (max-width:720px){.net text{font-size:22px}.orbit text{font-size:24px}.orbit text.c{font-size:24px}}
.bz-name{font-size:6.4cqi}
@container ssk (max-width:1080px){.bz-name{font-size:10cqi}}
@container ssk (max-width:720px){.bz-name{font-size:9.2cqi}.orbit text,.orbit text.c{font-size:21px}}
.bz-a .bz-name{font-size:5.8cqi}
@container ssk (max-width:1080px){.bz-a .bz-name{font-size:10cqi}}
@container ssk (max-width:720px){.bz-a .bz-name{font-size:9.2cqi}}
.bz-jp,.bz-catch,.bz-conn-tx .jp{text-wrap:balance}
.bz-ctas .bp-cta{padding-block:10px;line-height:1.25}
@container ssk (max-width:720px){.bz-ctas .bp-cta{font-size:18px}}

/* ===== BUSINESS — refinement 1 ===== */
/* readability: stronger body, quieter labels */
.bz-catch{font-size:32px}
.bz-desc{margin-top:24px;gap:10px}
.bz-desc p{font-size:17px;line-height:2;max-width:31em}
.bz-desc p:first-child{font-size:18px;font-weight:500}
.bz-vals{margin-top:36px}
.bz-vals-lab{font-size:11px;margin-bottom:12px}
.bz-vals li{font-size:16px;line-height:1.75;padding:14px 0}
.ledger b{font-size:20px}
.ledger .ds{font-size:16px}
.bz-grid4 b{font-size:22px}
.bz-row .ds{font-size:16px}

/* OEM / PRODUCTION — works first */
.bz-e2{background:var(--white);row-gap:0}
.e2-top{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end}
.e2-top .bz-head{grid-column:1/-1}
.e2-name{grid-column:1/-1;font-size:28px;line-height:1;margin-bottom:22px}
.e2-msg{grid-column:1/9;font-size:10cqi;line-height:.84;text-transform:uppercase}
.e2-top .bz-catch{grid-column:9/13;margin:0 0 .8cqi}
.e2-w1{grid-column:1/9;grid-row:2;margin-top:64px}
.e2-w2{grid-column:9/13;grid-row:2;margin-top:64px;align-self:start}
.e2-cap1{grid-column:1/9;grid-row:3;margin-top:12px}
.e2-w3{grid-column:1/4;grid-row:4;margin-top:56px;border-radius:50%;align-self:start}
.e2-w3 .ph{justify-content:center}
.e2-w3 .ph-tag{left:50%;transform:translateX(-50%);top:16%}
.e2-w4{grid-column:4/7;grid-row:4;margin-top:56px;align-self:start}
.e2-tx{grid-column:8/13;grid-row:4;margin-top:56px}
.e2-tx .bz-desc{margin-top:0}
.e2-facts{margin:28px 0 0;display:grid;gap:14px}
.e2-facts div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:12px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid rgba(17,17,17,.18)}
.e2-facts dd{margin:0;font-size:15px}
.e2-cta{min-height:76px!important;font-size:26px!important;min-width:min(100%,440px)!important}

/* CONNECTIONS — a short closing band */
.bz-conn2{background:var(--ink);color:var(--white);padding-block:96px 104px}
.bz-conn2 .sec-lab{grid-column:1/-1;flex-direction:row;gap:14px;margin-bottom:40px}
.cx-h{grid-column:1/7;display:flex;flex-direction:column;gap:20px}
.cx-h h2{font-size:4.6cqi;line-height:.9;text-transform:uppercase}
.cx-h .jp{font-size:24px;font-weight:700;letter-spacing:.03em}
.cx-map{grid-column:8/13;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 28px}
.cx-list{border-right:2px solid var(--red);padding-right:0}
.cx-list li{display:flex;align-items:center;gap:14px;min-height:44px}
.cx-list li span{font-size:22px;line-height:1;white-space:nowrap}
.cx-list li::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.4)}
.cx-spark{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cx-spark .dot{width:18px;height:18px;border-radius:50%;background:var(--red);box-shadow:0 0 14px rgba(219,24,43,.6)}
.cx-spark .mono{font-size:11px;line-height:1.5}

/* WORK WITH US — OEM first and clearly marked */
.bz-inq-list li.is-oem a{min-height:104px}
.bz-inq-list li.is-oem b{font-size:28px;color:var(--red)}
.bz-inq-list li.is-oem .go-c{background:var(--red);border-color:var(--red);color:var(--white)}
.bz-inq-list li.is-oem a:hover b{color:var(--white)}

@container ssk (max-width:1080px){
  .e2-msg{grid-column:1/-1}
  .e2-top .bz-catch{grid-column:1/-1;margin-top:24px}
  .e2-w1{grid-column:1/-1}
  .e2-w2{grid-column:5/-1;grid-row:auto;margin-top:24px}
  .e2-cap1{grid-column:1/-1;grid-row:auto}
  .e2-w3{grid-column:1/5;grid-row:auto;margin-top:40px}
  .e2-w4{grid-column:6/-1;grid-row:auto;margin-top:40px}
  .e2-tx{grid-column:1/-1;grid-row:auto;margin-top:48px}
  .cx-h{grid-column:1/-1}
  .cx-map{grid-column:1/-1;margin-top:40px}
  .cx-h h2{font-size:7cqi}
}
@container ssk (max-width:720px){
  .bz-catch{font-size:22px}
  .bz-desc p{font-size:15px;line-height:1.95}
  .bz-desc p:first-child{font-size:16px}
  .bz-vals li{font-size:15px;padding:12px 0}
  .ledger b{font-size:17px}.ledger .ds{font-size:15px}
  .bz-grid4 b{font-size:17px}
  .bz-row .ds{font-size:14px}
  .e2-name{font-size:22px}
  .e2-msg{font-size:13cqi}
  .e2-w2{grid-column:2/-1}
  .e2-w3{grid-column:1/3}
  .e2-w4{grid-column:3/-1}
  .e2-facts div{grid-template-columns:1fr;gap:4px}
  .e2-facts dd{font-size:14px}
  .e2-cta{font-size:20px!important;min-height:64px!important}
  .bz-conn2{padding-block:72px 80px}
  .cx-h h2{font-size:10.4cqi}
  .cx-h .jp{font-size:20px}
  .cx-map{grid-template-columns:1fr;gap:20px}
  .cx-list li span{font-size:18px}
  .bz-inq-list li.is-oem b{font-size:21px}
}
@container ssk (max-width:720px){.bz-ctas .bp-cta{font-size:17px}.e2-cta{font-size:16.5px!important}}

/* ===== BUSINESS — OEM final: tighter, works first, CTA beside the facts ===== */
.bz-e2{padding-block:112px 120px}
.e2-name{margin-bottom:18px}
.e2-msg{font-size:8.6cqi}
.e2-w1,.e2-w2{margin-top:48px}
.e2-tx{grid-column:1/7;grid-row:4;margin-top:44px}
.e2-act{grid-column:8/13;grid-row:4;margin-top:44px;display:flex;flex-direction:column}
.e2-act .e2-facts{margin-top:0}
.e2-act .bz-ctas{margin-top:28px}
.e2-support{grid-column:1/-1;grid-row:5;margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--gut)}
.e2-support figure{margin:0}
@container ssk (max-width:1080px){
  .e2-tx,.e2-act{grid-column:1/-1;grid-row:auto}
  .e2-act{margin-top:32px}
  .e2-msg{font-size:10cqi}
}
@container ssk (max-width:720px){
  .bz-e2{padding-block:80px 88px}
  .e2-msg{font-size:13cqi}
  .e2-w1,.e2-w2{margin-top:32px}
  .e2-w2{margin-top:16px}
  .e2-tx{margin-top:36px}
}

/* =====================================================================
   PROJECTS (scoped to .pr-*)  — list, featured, filter, detail template
   ===================================================================== */
.pr-preview{position:sticky;top:72px;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px var(--pad);background:var(--ink);color:var(--white);font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.03em;border-bottom:1px dashed rgba(255,255,255,.5)}
.pr-preview b{color:var(--white);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.pr-preview b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}

/* HERO — title first, concept answers from the right */
.pr-hero{padding-top:32px;padding-bottom:80px}
.pr-meta .l{grid-column:1/7}.pr-meta .r{grid-column:7/13;justify-self:end;display:flex;gap:12px;align-items:center}
.pr-title{grid-column:1/-1;margin-top:6cqi;font-size:16cqi;line-height:.8;text-transform:uppercase;white-space:nowrap;display:flex;align-items:baseline}
.pr-title .sp{width:.15em;height:.15em}
.pr-title .sp-glow{width:1.1em;height:1.1em;margin:-.55em 0 0 -.55em}
.pr-concept{grid-column:5/13;margin-top:56px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--gut);align-items:end;border-top:1px solid var(--ink);padding-top:24px}
.pr-concept .en{grid-column:1/6;font-size:3.4cqi;line-height:.95;text-transform:uppercase}
.pr-concept .jp{grid-column:1/6;margin-top:14px;font-size:20px;font-weight:700;letter-spacing:.04em}
.pr-count{grid-column:6/9;grid-row:1/3;justify-self:end;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pr-count b{font-family:"Archivo",Arial,sans-serif;font-weight:800;font-variation-settings:"wdth" 62;font-size:7cqi;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--red)}

/* FEATURED */
.pr-feat{padding-block:24px 128px}
.pr-feat .sec-lab{grid-column:1/-1;flex-direction:row;gap:14px;margin-bottom:24px}
.pr-feat-card{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:24px;align-items:end}
.pr-feat-media{grid-column:1/-1;border-top-left-radius:min(12cqi,200px)}
.pr-feat-tx{grid-column:1/8;display:flex;flex-direction:column;gap:14px}
.pr-feat-tx h3{font-size:6cqi;line-height:.86;text-transform:uppercase;text-wrap:balance}
.pr-feat-tx p{font-size:17px;line-height:2;max-width:32em}
.pr-feat-side{grid-column:9/13;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pr-feat-card:hover .media-img{transform:scale(calc(var(--zoom,1) * 1.03))}

/* ALL PROJECTS — filter + editorial grid */
.pr-all{padding-block:112px 128px;border-top:1px solid var(--ink)}
.pr-all-head{align-items:end;row-gap:24px;margin-bottom:28px}
.pr-all-head .sec-lab{grid-column:1/4;align-self:start}
.pr-all-head h2{grid-column:4/10;font-size:7cqi;line-height:.85;text-transform:uppercase}
.pr-all-head .pr-n{grid-column:10/13;justify-self:end}
.pr-n{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.04em}
.pr-n b{font-family:"Archivo",Arial,sans-serif;font-weight:800;font-variation-settings:"wdth" 62;font-size:40px;line-height:1;margin-right:6px;color:var(--ink)}
.pr-filter{display:flex;flex-wrap:wrap;gap:8px;padding:20px var(--pad);border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);margin-bottom:64px}
.pr-filter button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--ink);border-radius:999px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}
.pr-filter button .c{font-size:11px;color:var(--gray-3)}
.pr-filter button:hover:not([disabled]){border-color:var(--red);color:var(--red)}
.pr-filter button.on{background:var(--ink);color:var(--white)}
.pr-filter button.on .c{color:var(--gray-4)}
.pr-filter button.on::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.pr-filter button[disabled]{opacity:.38;cursor:default}
.pr-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:80px;padding-inline:var(--pad);align-items:start}
.pr-item{min-width:0}
.pr-c0{grid-column:1/9}
.pr-c1{grid-column:9/13;margin-top:14cqi}
.pr-c2{grid-column:2/7}
.pr-c3{grid-column:7/13;margin-top:8cqi}
.pr-c4{grid-column:1/-1}
.pr-c2 .pr-media{border-radius:999px 999px 0 0}
.pr-card{display:block;position:relative}
.pr-media{display:block;position:relative}
.pr-hover{position:absolute;left:14px;right:14px;bottom:14px;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;border-radius:999px;background:var(--white);color:var(--ink);transform:translateY(calc(100% + 24px));transition:transform .5s var(--ease)}
.pr-hover .go{display:inline-flex;align-items:center;gap:8px;color:var(--red)}
.pr-media{overflow:hidden}
.pr-card:hover .pr-hover,.pr-card:focus-visible .pr-hover{transform:none}
.pr-card:hover .media-img{transform:scale(calc(var(--zoom,1) * 1.035))}
.pr-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--ink)}
.pr-cap b{font-size:20px;font-weight:700;line-height:1.4}
.pr-cap .meta{text-align:right;white-space:nowrap}
.pr-none{padding:24px var(--pad) 8px}
.pr-none p{font-size:16px}

/* empty state (0 published) */
.pr-empty{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center;padding-block:40px 24px}
.pr-empty .ring{grid-column:1/5;width:100%;max-width:320px;aspect-ratio:1/1;border:1px solid var(--ink);border-radius:50%;position:relative}
.pr-empty .ring::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--red);box-shadow:0 0 14px rgba(219,24,43,.5)}
.pr-empty .tx{grid-column:6/12;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pr-empty .tx b{font-size:30px;line-height:1.5;font-weight:700;letter-spacing:.03em}
.pr-empty .tx p{font-size:16px;line-height:2}

/* inquiry band */
.pr-inq{padding-block:96px 104px}
.pr-inq-head{align-items:end;margin-bottom:28px}
.pr-inq-head .sec-lab{grid-column:1/4}
.pr-inq-head h2{grid-column:4/13;font-size:4.4cqi;line-height:.9;text-transform:uppercase}

/* DETAIL TEMPLATE */
.pd-hero{padding-top:32px;padding-bottom:56px}
.pd-back{grid-column:1/-1;margin-bottom:48px}
.pd-head{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:24px}
.pd-title{grid-column:1/11;font-size:9cqi;line-height:.84;text-transform:uppercase;text-wrap:balance}
.pd-summary{grid-column:7/12;margin-top:40px;font-size:20px;line-height:1.9;font-weight:500}
.pd-cover{grid-column:1/-1;margin-top:56px}
.pd-body{padding-block:96px 112px;align-items:start}
.pd-meta{grid-column:1/5;position:sticky;top:112px;border-top:1px solid var(--ink)}
.pd-meta div{display:grid;grid-template-columns:1fr;gap:6px;padding:16px 0;border-bottom:1px solid rgba(17,17,17,.2)}
.pd-meta dt{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-3)}
.pd-meta dd{margin:0;font-size:16px;line-height:1.7}
.pd-story{grid-column:6/12;display:flex;flex-direction:column;gap:56px}
.pd-story section{display:flex;flex-direction:column;gap:14px}
.pd-story h2{font-size:28px;line-height:1.4;font-weight:700;letter-spacing:.03em;display:flex;align-items:baseline;gap:14px}
.pd-story h2 .mono{font-size:11px}
.pd-story p{font-size:17px;line-height:2.05;max-width:32em}
.pd-gallery{padding-bottom:120px}
.pd-gallery .sec-lab{grid-column:1/-1;flex-direction:row;gap:14px;margin-bottom:28px}
.pd-gal{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--gut);align-items:end}
.pd-g0{grid-column:1/6}.pd-g1{grid-column:6/13}.pd-g2{grid-column:3/9}.pd-g3{grid-column:9/13}
.pd-rel{padding-block:96px 112px;border-top:1px solid var(--ink)}
.pd-rel .sec-lab{grid-column:1/-1;flex-direction:row;gap:14px;margin-bottom:28px}
.pd-rel-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.pd-off{padding-block:160px;text-align:left}
.pd-off .tx{grid-column:1/9;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.pd-off b{font-size:34px;line-height:1.5;font-weight:700}

@container ssk (max-width:1080px){
  .pr-concept{grid-column:1/-1}
  .pr-feat-tx,.pr-feat-side{grid-column:1/-1}
  .pr-all-head .sec-lab{grid-column:1/-1}
  .pr-all-head h2{grid-column:1/9;font-size:10cqi}
  .pr-all-head .pr-n{grid-column:9/13}
  .pr-c0,.pr-c4{grid-column:1/-1}
  .pr-c1{grid-column:1/7;margin-top:0}
  .pr-c2{grid-column:7/13}
  .pr-c3{grid-column:1/-1;margin-top:0}
  .pr-empty .ring{grid-column:1/5}
  .pr-empty .tx{grid-column:6/13}
  .pr-inq-head .sec-lab,.pr-inq-head h2{grid-column:1/-1}
  .pr-inq-head h2{font-size:7cqi;margin-top:12px}
  .pd-title{grid-column:1/-1;font-size:11cqi}
  .pd-summary{grid-column:1/-1}
  .pd-meta{grid-column:1/-1;position:relative;top:auto}
  .pd-story{grid-column:1/-1;margin-top:56px}
  .pd-rel-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container ssk (max-width:720px){
  .pr-preview{top:64px;font-size:11px}
  .pr-meta .l,.pr-meta .r{grid-column:1/-1;justify-self:start}
  .pr-meta{row-gap:8px}
  .pr-title{font-size:15cqi;margin-top:48px}
  .pr-concept{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px}
  .pr-concept .en{grid-column:1/-1;font-size:8cqi}
  .pr-concept .jp{grid-column:1/-1;font-size:18px}
  .pr-count{grid-column:1/-1;grid-row:auto;justify-self:start;align-items:flex-start;text-align:left;margin-top:20px}
  .pr-count b{font-size:20cqi}
  .pr-feat{padding-bottom:88px}
  .pr-feat-tx h3{font-size:12cqi}
  .pr-feat-tx p{font-size:15px}
  .pr-all{padding-block:80px 88px}
  .pr-all-head h2{grid-column:1/-1;font-size:13cqi}
  .pr-all-head .pr-n{grid-column:1/-1;justify-self:start}
  .pr-filter{padding:14px var(--pad);margin-bottom:40px}
  .pr-filter button{flex:none}
  .pr-grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:48px}
  .pr-c0,.pr-c1,.pr-c2,.pr-c3,.pr-c4{grid-column:1/-1;margin-top:0}
  .pr-c1,.pr-c3{grid-column:2/-1}
  .pr-hover{display:none}
  .pr-cap{flex-direction:column;gap:4px}
  .pr-cap b{font-size:17px}
  .pr-cap .meta{text-align:left;white-space:normal}
  .pr-empty{grid-template-columns:1fr;row-gap:32px}
  .pr-empty .ring,.pr-empty .tx{grid-column:1/-1}
  .pr-empty .ring{max-width:200px}
  .pr-empty .tx b{font-size:22px}
  .pr-inq{padding-block:72px 80px}
  .pr-inq-head h2{font-size:11cqi}
  .pd-title{font-size:13cqi}
  .pd-summary{font-size:17px}
  .pd-story h2{font-size:21px}
  .pd-story p{font-size:15px}
  .pd-gal{grid-template-columns:1fr 1fr}
  .pd-g0,.pd-g1,.pd-g2,.pd-g3{grid-column:auto}
  .pd-g0{grid-column:1/-1}
  .pd-rel-list{grid-template-columns:1fr}
  .pd-off{padding-block:96px}
  .pd-off b{font-size:24px}
}
@media (hover:none){.pr-hover{display:none}}
.pd-cover .media,.pd-gal .media,.pd-rel .media,.pr-feat-media{display:block}
.pd-gal>span{display:block}

/* ===== shared project data — work slots (BUSINESS OEM) ===== */
.e2-work{display:block;min-width:0}
.e2-work .media{display:block}
.e2-wcap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:12px;padding-top:10px;border-top:1px solid var(--ink)}
.e2-wcap b{font-size:18px;font-weight:700}
a.e2-work:hover .media-img{transform:scale(calc(var(--zoom,1) * 1.03))}
@container ssk (max-width:720px){.e2-wcap{flex-direction:column;gap:4px}.e2-wcap b{font-size:16px}}

/* =====================================================================
   JOURNAL (scoped to .jn-* / .ar-*) — a page for reading
   ===================================================================== */
.jn-hero{padding-top:32px;padding-bottom:72px}
.jn-meta .l{grid-column:1/7}.jn-meta .r{grid-column:7/13;justify-self:end;display:flex;gap:12px;align-items:center}
.jn-title{grid-column:1/-1;margin-top:6cqi;font-size:16cqi;line-height:.8;text-transform:uppercase;white-space:nowrap;display:flex;align-items:baseline}
.jn-title .sp{width:.15em;height:.15em}
.jn-title .sp-glow{width:1.1em;height:1.1em;margin:-.55em 0 0 -.55em}
.jn-concept{grid-column:1/-1;margin-top:48px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end;row-gap:16px}
.jn-words{grid-column:1/8;display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;font-size:3.6cqi;line-height:1;text-transform:uppercase}
.jn-words span{display:inline-flex;align-items:center;gap:22px}
.jn-words span+span::before{content:"";width:.22em;height:.22em;border-radius:50%;background:var(--red)}
.jn-jp{grid-column:9/13;justify-self:end;font-size:20px;font-weight:700;letter-spacing:.04em}

.jn-preview-note{grid-column:1/-1}
.jn-date{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.04em}
.jn-badge{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border:1px dashed currentColor;border-radius:999px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase}

/* FEATURED STORY */
.jn-feat{padding-block:16px 120px}
.jn-feat .sec-lab{grid-column:1/-1;flex-direction:row;gap:14px;margin-bottom:24px}
.jn-feat-card{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:28px;align-items:end}
.jn-feat-media{grid-column:1/9;display:block}
.jn-feat-media .media{display:block}
.jn-feat-tx{grid-column:9/13;display:flex;flex-direction:column;gap:16px;padding-bottom:6px}
.jn-feat-tx .row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.jn-feat-tx h3{font-size:30px;line-height:1.5;font-weight:700;letter-spacing:.02em;text-wrap:pretty}
.jn-feat-tx p{font-size:16px;line-height:2}
.jn-feat-card:hover h3{color:var(--red)}
.jn-feat-card:hover .media-img{transform:scale(calc(var(--zoom,1) * 1.03))}

/* ALL ARTICLES */
.jn-all{padding-block:104px 120px;border-top:1px solid var(--ink)}
.jn-all-head{align-items:end;row-gap:20px;margin-bottom:24px}
.jn-all-head .sec-lab{grid-column:1/4;align-self:start}
.jn-all-head h2{grid-column:4/10;font-size:7cqi;line-height:.85;text-transform:uppercase}
.jn-all-head .pr-n{grid-column:10/13;justify-self:end}
.jn-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;column-gap:var(--gut);row-gap:72px;padding-inline:var(--pad);align-items:start}
.jn-item{min-width:0}
.jn-l{grid-column:span 7}.jn-s{grid-column:span 5}.jn-m{grid-column:span 6}.jn-t{grid-column:span 6}
.jn-card{display:flex;flex-direction:column;gap:14px}
.jn-card .media{display:block}
.jn-card .row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.jn-card h3{font-size:22px;line-height:1.55;font-weight:700;letter-spacing:.02em;transition:color .25s;text-wrap:pretty}
.jn-card p{font-size:15px;line-height:1.95;color:var(--ink)}
.jn-card:hover h3{color:var(--red)}
.jn-card:hover .media-img{transform:scale(calc(var(--zoom,1) * 1.03))}
.jn-t .jn-card{border-top:2px solid var(--ink);padding-top:18px}
.jn-t .jn-card .big{font-family:"Archivo",Arial,sans-serif;font-weight:800;font-variation-settings:"wdth" 62;font-size:44px;line-height:.9}
.jn-t .read{display:inline-flex;align-items:center;gap:10px;margin-top:4px}
.jn-more-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:80px;padding-inline:var(--pad)}
.jn-more{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 28px;border:1px solid var(--ink);border-radius:999px;font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.04em;text-transform:uppercase;transition:background .25s,color .25s}
.jn-more:hover{background:var(--ink);color:var(--white)}
.jn-more .plus{width:24px;height:24px;border-radius:50%;background:var(--red);color:var(--white);display:grid;place-items:center}

/* ARTICLE */
.ar-head{padding-top:32px;padding-bottom:48px}
.ar-back{grid-column:1/-1;margin-bottom:56px}
.ar-row{grid-column:3/11;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:22px}
.ar-title{grid-column:3/11;font-size:var(--d-title-size,clamp(30px,3.2cqi,46px));line-height:1.5;font-weight:var(--d-title-weight,700);letter-spacing:.02em;text-wrap:pretty}
.ar-lead{grid-column:3/10;margin-top:28px;font-size:19px;line-height:2;font-weight:500}
.ar-by{grid-column:3/11;margin-top:20px}
.ar-cover{grid-column:1/-1;margin-top:48px}
.ar-cover .media{display:block}
.ar-notice{grid-column:3/11;margin-top:28px;padding:14px 18px;border:1px dashed var(--ink);font-size:14px}
.ar-body{padding-block:72px 96px}
.ar-col{grid-column:3/10;display:flex;flex-direction:column;gap:30px}
.ar-col>p{font-size:var(--d-p-size,17px);line-height:var(--d-p-lh,2.15);letter-spacing:var(--d-p-ls,.03em)}
.ar-col>h2{margin-top:28px;font-size:var(--d-h2-size,26px);line-height:var(--d-h2-lh,1.55);font-weight:var(--d-h2-weight,700);letter-spacing:.02em}
.ar-fig{margin:16px 0;display:flex;flex-direction:column;gap:10px}
.ar-fig .media{display:block}
.ar-fig figcaption{font-size:var(--d-figcap-size,13px);line-height:1.7;color:var(--gray-3)}
.ar-quote{margin:24px 0;padding:0;display:flex;flex-direction:column;gap:16px}
.ar-quote::before{content:"“";font-family:"Archivo",Arial,sans-serif;font-weight:800;font-size:72px;line-height:.5;color:var(--red)}
.ar-quote p{font-size:24px;line-height:1.75;font-weight:700;letter-spacing:.02em}
.ar-quote cite{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--gray-3)}
.ar-rel{padding-block:72px 88px;border-top:1px solid var(--ink)}
.ar-rel .sec-lab{grid-column:1/4}
.ar-rel-body{grid-column:4/13;display:flex;flex-direction:column;gap:28px}
.ar-pills{display:flex;flex-wrap:wrap;gap:8px}
.ar-related{padding-block:96px 112px;border-top:1px solid var(--ink)}
.ar-related .sec-lab{grid-column:1/-1;flex-direction:row;gap:14px;margin-bottom:28px}
.ar-related-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.ar-seo{grid-column:1/-1;margin-top:40px;padding:20px;border:1px dashed var(--ink);font-family:"JetBrains Mono",monospace;font-size:11px;line-height:1.7;white-space:pre-wrap;word-break:break-all;background:var(--white)}

@container ssk (max-width:1080px){
  .jn-words{grid-column:1/-1;font-size:5cqi}
  .jn-jp{grid-column:1/-1;justify-self:start}
  .jn-feat-media,.jn-feat-tx{grid-column:1/-1}
  .jn-all-head .sec-lab{grid-column:1/-1}
  .jn-all-head h2{grid-column:1/9;font-size:10cqi}
  .jn-all-head .pr-n{grid-column:9/13}
  .jn-l,.jn-s,.jn-m,.jn-t{grid-column:span 6}
  .ar-row,.ar-title,.ar-lead,.ar-by,.ar-notice,.ar-col{grid-column:2/12}
  .ar-rel .sec-lab,.ar-rel-body{grid-column:1/-1}
  .ar-rel .sec-lab{margin-bottom:20px}
  .ar-related-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container ssk (max-width:720px){
  .jn-meta .l,.jn-meta .r{grid-column:1/-1;justify-self:start}
  .jn-meta{row-gap:8px}
  .jn-title{font-size:15.5cqi;margin-top:48px}
  .jn-words{font-size:5.6cqi;gap:6px 10px;flex-wrap:nowrap}
  .jn-words span{gap:10px}
  .jn-jp{font-size:17px}
  .jn-feat{padding-bottom:80px}
  .jn-feat-tx h3{font-size:22px}
  .jn-feat-tx p{font-size:15px}
  .jn-all{padding-block:80px 88px}
  .jn-all-head h2{grid-column:1/-1;font-size:13cqi}
  .jn-all-head .pr-n{grid-column:1/-1;justify-self:start}
  .jn-grid{grid-template-columns:1fr;row-gap:48px}
  .jn-l,.jn-s,.jn-m,.jn-t{grid-column:1/-1}
  .jn-card h3{font-size:19px}
  .jn-card p{font-size:14px}
  .jn-t .jn-card .big{font-size:34px}
  .jn-more-wrap{margin-top:56px}
  .ar-row,.ar-title,.ar-lead,.ar-by,.ar-notice,.ar-col{grid-column:1/-1}
  .ar-title{font-size:var(--d-title-size-m,26px)}
  .ar-lead{font-size:16px}
  .ar-col>p{font-size:var(--d-p-size-m,16px);line-height:var(--d-p-lh-m,2.05)}
  .ar-col>h2{font-size:var(--d-h2-size-m,21px)}
  .ar-quote p{font-size:19px}
  .ar-related-list{grid-template-columns:1fr}
}

/* ================= CONTACT page (v14) ================= */
.cf-hero{padding-top:32px;padding-bottom:64px;border-bottom:1px solid var(--ink)}
.cf-meta .l{grid-column:1/7}.cf-meta .r{grid-column:7/13;justify-self:end}
.cf-title{grid-column:1/-1;margin-top:6cqi;font-size:16cqi;line-height:.8;text-transform:uppercase;white-space:nowrap;display:flex;align-items:baseline}
.cf-title .sp{width:.15em;height:.15em}
.cf-title .sp-glow{width:1.1em;height:1.1em;margin:-.55em 0 0 -.55em}
.cf-lead{grid-column:1/8;margin-top:40px;font-size:20px;font-weight:700;letter-spacing:.04em;line-height:1.7}
.cf-lead small{display:block;font-size:14px;font-weight:400;color:var(--gray-3);margin-top:8px;letter-spacing:.02em}
.cf-steps{grid-column:8/13;align-self:end;justify-self:end;display:flex;gap:6px;margin-top:40px}
.cf-steps li{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--ink);border-radius:999px;font-size:11px}
.cf-steps li[aria-current="step"]{background:var(--ink);color:var(--white)}
.cf-steps li[aria-current="step"] b{color:var(--red)}
.cf-steps li.done{color:var(--gray-3);border-color:var(--gray-2)}

.cf-body{padding-top:72px;padding-bottom:120px;row-gap:48px;align-items:start}
.cf-side{grid-column:1/4;position:sticky;top:96px;display:flex;flex-direction:column;gap:32px}
.cf-side dl{display:flex;flex-direction:column;gap:18px}
.cf-side dt{margin-bottom:6px}
.cf-side dd{margin:0;font-size:14px;line-height:1.85}
.cf-main{grid-column:5/13;min-width:0}

.cf-form{display:flex;flex-direction:column;gap:56px}
.cf-fs{border:0;margin:0;padding:0;min-width:0;display:block}
.cf-fs > * + *{margin-top:22px}
.cf-fs > legend + *{margin-top:0}
.cf-fs legend{display:block;width:100%;padding:0;margin:0 0 22px;float:none}
.cf-lg{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--ink);padding-bottom:12px;text-align:left}
.cf-lg .n{color:var(--red);flex:none}
.cf-lg b{font-size:20px;font-weight:700;letter-spacing:.04em}
.cf-lg .cf-req{flex:none;align-self:center}
.cf-lg .mono:last-child{margin-left:auto;white-space:nowrap}
.cf-req,.cf-opt{white-space:nowrap}

/* inquiry type cards (real radios) */
.cf-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut)}
.cf-type{position:relative;display:block}
.cf-type input{position:absolute;opacity:0;width:1px;height:1px}
.cf-type label{display:grid;grid-template-columns:auto 1fr auto;gap:6px 16px;align-items:start;min-height:132px;padding:22px 22px 20px;border:1px solid var(--ink);border-radius:18px;background:var(--white);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.cf-type label:hover{background:var(--gray-1)}
.cf-type .no{grid-row:1/3;font-size:11px;padding-top:6px}
.cf-type .en{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;font-variation-settings:"wdth" 62;font-stretch:62%;font-size:30px;line-height:1;text-transform:uppercase}
.cf-type .ja{grid-column:2;font-size:15px;font-weight:700}
.cf-type .sub{grid-column:2;font-size:13px;color:var(--gray-3);line-height:1.7}
.cf-type .chk{grid-column:3;grid-row:1;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center}
.cf-type input:checked + label{background:var(--ink);color:var(--white)}
.cf-type input:checked + label .sub{color:var(--gray-4)}
.cf-type input:checked + label .chk{border-color:var(--white)}
.cf-type input:checked + label .chk::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--red)}
.cf-type input:focus-visible + label{outline:2px solid var(--red);outline-offset:3px}
.cf-from{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--gray-3)}
.cf-from b{color:var(--ink);font-weight:700}

/* fields */
.cf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px var(--gut)}
.cf-f{display:flex;flex-direction:column;gap:8px;min-width:0}
.cf-f.wide{grid-column:1/-1}
.cf-f label,.cf-f .lb{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.02em}
.cf-req,.cf-opt{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;font-weight:400;letter-spacing:.04em;padding:1px 7px;border-radius:4px;line-height:1.6}
.cf-req{background:var(--red);color:var(--white)}
.cf-opt{border:1px solid var(--gray-2);color:var(--gray-3)}
.cf-f input,.cf-f select,.cf-f textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--ink);border-radius:10px;padding:12px 14px;min-height:52px;width:100%;transition:border-color .2s,box-shadow .2s}
.cf-f textarea{min-height:220px;line-height:1.9;resize:vertical}
.cf-f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.cf-f input::placeholder,.cf-f textarea::placeholder{color:#8A8A84}
.cf-f input:focus,.cf-f select:focus,.cf-f textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(219,24,43,.35)}
.cf-f [aria-invalid="true"]{border-color:var(--red);border-width:2px;background:#FFF7F8}
.cf-hint{font-size:12.5px;color:var(--gray-3);line-height:1.7}
.cf-err{font-size:13px;color:#B3121F;font-weight:700;display:flex;gap:6px;align-items:baseline}
.cf-err::before{content:"!";font-family:"JetBrains Mono",monospace;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#B3121F;color:var(--white);font-size:10px;flex:none;transform:translateY(2px)}
.cf-count{align-self:flex-end;font-size:11px}

.cf-agree{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border:1px solid var(--ink);border-radius:14px;background:var(--white)}
.cf-agree input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.cf-agree label{font-size:14px;line-height:1.8}
.cf-agree.invalid{border-color:var(--red);border-width:2px;background:#FFF7F8}

.cf-summary{border:2px solid var(--red);background:#FFF7F8;border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.cf-summary h2{font-size:16px;font-weight:700;color:#B3121F}
.cf-summary ul{display:flex;flex-direction:column;gap:6px;font-size:14px}
.cf-summary a{text-decoration:underline!important;text-underline-offset:3px}

.cf-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cf-submit{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:72px;padding:12px 14px 12px 32px;border-radius:999px;background:var(--ink)!important;color:var(--white)!important;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;font-variation-settings:"wdth" 62;font-stretch:62%;font-size:28px;text-transform:uppercase;transition:background .25s}
.cf-submit small{display:block;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:12px;text-transform:none;font-variation-settings:normal;font-stretch:normal;letter-spacing:.04em;margin-top:2px;text-align:left}
.cf-submit .go{width:48px;height:48px;border-radius:50%;background:var(--white);color:var(--ink);display:grid;place-items:center;transition:background .25s,color .25s}
.cf-submit:hover{background:var(--red)!important}
.cf-submit:hover .go{color:var(--red)}
.cf-back{min-height:52px;padding:0 24px;border:1px solid var(--ink)!important;border-radius:999px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:10px}
.cf-back:hover{background:var(--gray-1)}

/* confirm / done */
.cf-review{display:flex;flex-direction:column}
.cf-review > div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:6px var(--gut);padding:18px 0;border-bottom:1px solid rgba(17,17,17,.25)}
.cf-review dt{font-size:13px;font-weight:700}
.cf-review dd{margin:0;font-size:15px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}
.cf-review dd.empty{color:var(--gray-3)}
.cf-done{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.cf-done h2{font-size:7cqi;line-height:.9;text-transform:uppercase}
.cf-done p{font-size:16px;line-height:2}
.cf-proto{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px dashed var(--ink);border-radius:12px;font-size:13px;line-height:1.8;background:#FFF9E6}
.cf-proto b{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;white-space:nowrap}

@container ssk (max-width:1080px){
  .cf-side{grid-column:1/-1;position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--gut)}
  .cf-main{grid-column:1/-1;order:1}
  .cf-side{order:2}
  .cf-lead{grid-column:1/-1}
  .cf-steps{grid-column:1/-1;justify-self:start;margin-top:24px}
}
@container ssk (max-width:720px){
  .cf-hero{padding-bottom:40px}
  .cf-meta .l,.cf-meta .r{grid-column:1/-1;justify-self:start}
  .cf-meta{row-gap:8px}
  .cf-title{font-size:15.5cqi;margin-top:48px}
  .cf-lead{font-size:17px;margin-top:28px}
  .cf-steps{flex-wrap:wrap}
  .cf-body{padding-top:48px;padding-bottom:80px;row-gap:40px}
  .cf-side{grid-template-columns:1fr}
  .cf-types,.cf-grid{grid-template-columns:1fr}
  .cf-type label{min-height:0;padding:18px}
  .cf-type .en{font-size:24px}
  .cf-form{gap:44px}
  .cf-lg b{font-size:18px}
  .cf-lg .mono:last-child{display:none}
  .cf-submit{width:100%;font-size:24px;padding-left:24px}
  .cf-back{width:100%;justify-content:center}
  .cf-review > div{grid-template-columns:1fr}
  .cf-done h2{font-size:13cqi}
}
@media (prefers-reduced-motion: reduce){.cf-type label,.cf-submit,.cf-submit .go,.cf-f input,.cf-f select,.cf-f textarea{transition:none}}

/* =====================================================================
   PHASE 6 — pages made in SSK CONTENT MANAGER (new classes only: existing pages are not affected).
   They reuse the JOURNAL article layout (.ar-*) and the shared parts; nothing here is editable as CSS.
   ===================================================================== */
.ar-col>h3{margin-top:12px;font-size:var(--d-h3-size,20px);line-height:1.6;font-weight:700;letter-spacing:.02em}
.cp-eff{grid-column:3/11;margin-top:20px}
.cp-toc{display:flex;flex-direction:column;gap:6px;padding:20px 24px;border:1px solid var(--ink);background:var(--white)}
.cp-toc a{display:inline-flex;min-height:32px;align-items:center;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
.ar-col>h2[id]{scroll-margin-top:96px}
.cp-btns{display:flex;flex-wrap:wrap;gap:12px}
.cp-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;background:var(--d-btn-bg,var(--red));border-radius:var(--d-btn-radius,999px);font-size:var(--d-btn-size,var(--d-cap-size,12px));transition:background .25s}
.ssk a.cp-btn{color:var(--d-btn-color,var(--ink))}
.cp-btn:hover{background:var(--ink)}
.ssk a.cp-btn:hover{color:var(--white)}
.cp-btn.sub{background:transparent;outline:1px solid var(--ink);outline-offset:-1px}
.ssk a.cp-btn.sub{color:var(--ink)}
.cp-btn.sub:hover{background:var(--ink)}
.ssk a.cp-btn.sub:hover{color:var(--white)}
.cp-faq{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.cp-qa{border-bottom:1px solid var(--ink)}
.cp-qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;padding:22px 0;font-size:18px;line-height:1.7;font-weight:700}
.cp-qa summary::-webkit-details-marker{display:none}
.cp-qa summary .q,.cp-qa .a-in .a{font-family:"Archivo",Arial,sans-serif;font-weight:800;color:var(--red)}
.cp-qa summary::after{content:"+";font-family:"JetBrains Mono",monospace;font-weight:400}
.cp-qa[open] summary::after{content:"−"}
.cp-qa .a-in{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:0 0 24px}
.cp-qa .a-in p{font-size:var(--d-p-size,17px);line-height:var(--d-p-lh,2.15);letter-spacing:var(--d-p-ls,.03em);white-space:pre-line}
@container ssk (max-width:1080px){.cp-eff{grid-column:2/12}}
@container ssk (max-width:720px){
  .ar-col>h3{font-size:var(--d-h3-size-m,18px)}
  .cp-eff{grid-column:1/-1}
  .cp-btn{font-size:var(--d-btn-size-m,var(--d-cap-size-m,var(--d-cap-size,12px)))}
  .cp-qa summary{font-size:16px;padding:18px 0}
  .cp-qa .a-in p{font-size:var(--d-p-size-m,16px);line-height:var(--d-p-lh-m,2.05)}
}