.iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;
}
.iso[data-theme="light"]{
  --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
  --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
  --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
  --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
  --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
  --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:32px 0 36px}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}


:root {
  --wrap: 1280px;
  --gutter: 80px;
  --gap: 24px;
  --nav-h: 76px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-k: cubic-bezier(.32, .72, 0, 1);
  color-scheme: light;
}


.peg.b-top .peg-move,
.lit-page .page-sheet,
.lit-reply,
.lit-sign {
  --anatomy-paper: var(--marker); --anatomy-face: var(--marker-light); --anatomy-top: var(--marker-light);
  --anatomy-shade-0: var(--marker-deep); --anatomy-shade-1: var(--lit-shade-1); --anatomy-shade-2: var(--lit-shade-2); --anatomy-shade-3: var(--marker);
  --anatomy-lit-top: var(--marker-light); --anatomy-lit-shade: var(--lit-shade-2);
  --anatomy-hi: var(--ink); --anatomy-mid: var(--lit-mid); --anatomy-lo: var(--lit-lo); --anatomy-faint: var(--lit-faint); --anatomy-dot: var(--ink);
}
.r2-glass { fill: var(--anatomy-shade-2); stroke: none; }
.r2-recess { fill: var(--anatomy-shade-0); stroke: none; }
.r2-engrave { fill: var(--anatomy-hi); font-family: var(--font); font-weight: 600; letter-spacing: .16em; }


*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
  scrollbar-color: var(--ink-45) var(--paper);
}
body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
::selection { background: var(--marker-tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--marker); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: 999px; z-index: 60; text-decoration: none; font-weight: 600; font-size: 15px; }
.skip:focus { top: 12px; }
.ico { width: .62em; height: .62em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }


.btn {
  display: inline-flex; align-items: center; gap: .65em;
  background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: .005em;
  padding: 20px 28px 20px 24px; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.btn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--marker); flex: none; transition: transform .25s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-sm { font-size: 15px; padding: 12px 18px 12px 15px; gap: .55em; }
.btn-sm .btn-dot { width: 8px; height: 8px; }
.lbl-short { display: none; }
.btn-paper { background: var(--paper); color: var(--ink); }
@media (hover: hover) {
  .btn:hover { background: var(--ink-hover); }
  .btn-paper:hover { background: var(--paper-lift); }
  .btn:hover .btn-dot { transform: scale(1.35); }
}


.top { display: flex; align-items: center; gap: 40px; height: var(--nav-h); }
.wordmark { font-weight: 600; font-size: 20px; letter-spacing: -.01em; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.projects { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 16px; font-weight: 500; }
.projects .pj-lbl { justify-content: center; min-width: 44px; color: var(--ink-soft); font-weight: 400; margin-right: -8px; }
@media (hover: hover) { .projects .pj-lbl:hover { color: var(--ink); text-decoration: underline; } }
.projects a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; border-bottom: 2px solid transparent; padding-top: 2px; }
.projects a[aria-current="page"] { border-bottom-color: var(--ink); }
@media (hover: hover) { .projects a:not([aria-current]):hover { text-decoration: underline; } }


.case-head { padding-top: 40px; }
.case-id { display: flex; align-items: center; gap: 32px; }

.logo-slot { flex: none; display: flex; align-items: center; height: 84px; }
.logo {
  display: block; aspect-ratio: var(--ar); width: var(--lw, 260px);
  background-color: var(--ink);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: left center; mask-position: left center;
}
.logo-cbc { --ar: 3.097; -webkit-mask-image: url(../assets/logo-creative-box.png); mask-image: url(../assets/logo-creative-box.png); }
.logo-koomson { --ar: 5.355; -webkit-mask-image: url(../assets/logo-koomson.png); mask-image: url(../assets/logo-koomson.png); }

.logo.logo-hcch { --ar: 6.09; --lw: 300px; -webkit-mask-image: url(../assets/logo-hcch.png); mask-image: url(../assets/logo-hcch.png); }
h1 {
  font-size: clamp(3.25rem, 1.5rem + 4.2vw, 5.5rem);
  font-weight: 500; line-height: .98; letter-spacing: -.028em; text-wrap: balance;
}

.ledger {
  display: grid; grid-template-columns: 1fr 1fr 2fr 1.25fr;
  margin-top: 36px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink-45);
}
.lc { padding: 14px 20px 18px 0; }
.lc + .lc { padding-left: 20px; border-left: 1px solid var(--ink-18); }
.lc dt { font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.lc dd { margin-top: 10px; font-size: 17px; line-height: 1.35; }
.lc .sub { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-soft); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -1px; }
.tags li { padding: 3px 9px 4px; border: 1px solid var(--ink-45); font-size: 15px; line-height: 1.3; }


.case-lead { margin-top: 40px; }
.lead {
  --ph-w: 220px; display: grid; grid-template-columns: minmax(0, 1fr) var(--ph-w); column-gap: 28px; margin: 0;
  padding: 36px 40px 30px; background: var(--plate-shade-2) var(--grain);
}
.shot { margin: 0; background: var(--paper-lift); border: 1px solid var(--ink); }
.shot img { display: block; width: 100%; height: auto; }
.shot-desk { grid-column: 1 / -1; grid-row: 1; margin-right: calc(var(--ph-w) / 2); }
.shot-bar { display: flex; align-items: center; justify-content: center; height: 30px; padding-inline: 12px; border-bottom: 1px solid var(--ink-18); font-size: 12px; color: var(--ink-soft); letter-spacing: .01em; white-space: nowrap; overflow: hidden; }
.shot-bar span { overflow: hidden; text-overflow: ellipsis; }
.shot-phone {
  grid-column: 2; grid-row: 1 / 4; align-self: end; position: relative; z-index: 1;
  padding: 7px; border-radius: 28px;
}
.shot-phone img { border-radius: 21px; }
.lead-cap { grid-column: 1; grid-row: 2; padding-top: 22px; }
.lead-cap .lede { display: block; padding-top: 0; font-size: 22px; }
.lead > .visit { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 6px; }

.lead > .lead-note { grid-column: 1; grid-row: 4; margin-top: 10px; max-width: 24em; font-size: 14px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
@media (min-width: 1241px) {
  .lead {
    --ph-w: 210px; --cap-w: 280px;
    grid-template-columns: minmax(0, 1fr) var(--ph-w) 40px var(--cap-w); grid-template-rows: auto auto 1fr 52px;
    column-gap: 0; padding: 40px;
  }
  .shot-desk { grid-column: 1 / 3; grid-row: 1 / 4; margin-right: calc(var(--ph-w) * .5); }
  .shot-phone { grid-row: 1 / 5; }
  .lead-cap { grid-column: 4; grid-row: 1; padding-top: 30px; }
  .lead-cap .lede { font-size: 21px; }
  .lead > .visit { grid-column: 4; grid-row: 2; margin: 8px 0 0; font-size: 16px; }
  .lead > .lead-note { grid-column: 4; grid-row: 3; align-self: start; margin-top: 14px; }
}


.sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-top: 136px; }
.sec > h2 { grid-column: 1 / 5; }
.sec-body { grid-column: 5 / -1; }
h2 { font-size: 44px; font-weight: 500; line-height: 1.04; letter-spacing: -.022em; text-wrap: balance; }
.said p { font-size: 34px; font-weight: 500; line-height: 1.2; letter-spacing: -.016em; text-indent: -.42em; max-width: 24em; text-wrap: pretty; }
.said-by { margin-top: 16px; font-size: 16px; color: var(--ink-soft); }
.draft-mark { margin-left: 6px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.sit { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--ink-18); font-size: 21px; line-height: 1.45; max-width: 36em; text-wrap: pretty; }

.sec-sit > h2 { grid-row: 1; }
.sec-sit .sec-body { grid-column: 5 / 10; grid-row: 1; padding-right: 8px; }
.sit-photo { grid-column: 10 / -1; grid-row: 1; padding-top: 6px; }
.sp-frame { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-18); }
.sp-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.sit-photo figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.lede { font-size: 24px; line-height: 1.35; letter-spacing: -.008em; max-width: 30em; text-wrap: pretty; padding-top: 8px; }
.fine { font-size: 13px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }


.sec-sit-solo .sec-body { grid-column: 5 / -1; }


.sec-built .lede { padding-top: 6px; font-size: 24px; }
.sec-built > .lead { grid-column: 1 / -1; margin-top: 40px; }

.made-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); margin: 0; padding: 0; list-style: none; }
.made-steps li { padding-top: 18px; border-top: 1px solid var(--ink); }
.made-n {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}
.made-steps h3 { margin-top: 16px; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.made-steps p { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }

.sys { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 40px 0 0; padding: 0; list-style: none; }
.sys-plate { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--plate-shade-2) var(--grain); border-bottom: 1px solid var(--ink); }
.sys-phone {
  position: absolute; left: 50%; top: 34px; width: 52%; transform: translateX(-50%);
  padding: 6px 6px 0; border: 1px solid var(--ink); border-bottom: 0; border-radius: 24px 24px 0 0; background: var(--paper-lift);
}
.sys-phone img { display: block; width: 100%; height: auto; border-radius: 18px 18px 0 0; }
.sys-mail { display: grid; place-items: center; }
.mail-card {
  display: flex; flex-direction: column; gap: 10px; width: 86%; padding: 22px 22px 24px;
  border: 1px solid var(--ink); background: var(--paper-lift);
  background-image: linear-gradient(var(--ink-18), var(--ink-18)); background-size: 100% 1px; background-position: 0 44px; background-repeat: no-repeat;
}
.mail-k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.mail-addr { margin-top: 14px; font-size: clamp(16px, 1.38vw, 21px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mail-addr::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--marker); vertical-align: .08em; }

.card-line .mail-addr { font-size: clamp(18px, 1.6vw, 24px); }
.cl-rows { margin: 14px 0 0; padding: 0; list-style: none; }
.cl-rows li {
  padding: 9px 0; border-top: 1px solid var(--ink-18); font-size: clamp(13px, 1.06vw, 16px); font-weight: 500;
  line-height: 1.25; overflow-wrap: anywhere;
}
.cl-rows li:first-child { border-top: 0; padding-top: 0; }
.cl-rows li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--marker); vertical-align: .1em; }
.cf-rows { margin: 14px 0 0; display: grid; gap: 10px; }
.cf-rows dt { font-size: clamp(13px, 1.06vw, 15px); font-weight: 600; line-height: 1.2; }
.cf-rows dd { margin: 6px 0 0; height: 24px; border: 1px solid var(--ink-45); background: var(--paper); }

.sys-cards { margin-top: 72px; column-gap: 48px; }
.sys-cards .sys-plate { aspect-ratio: 6 / 5; }
.sys-cards .mail-card { width: 76%; }
.sys-cards .card-list { width: 86%; }  
.sys-cards .sys-tile h3 { margin-top: 26px; }
.sys-cards .sys-tile p { margin-top: 12px; }
.sys-tile h3 { margin-top: 18px; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.sys-tile p { margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--ink-soft); max-width: 26em; text-wrap: pretty; }


.built-lists { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin-top: 56px; }
.bl h3 { font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.bl ul { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.bl li { padding: 14px 0 15px 22px; border-bottom: 1px solid var(--ink-18); font-size: 19px; line-height: 1.35; position: relative; text-wrap: pretty; }
.bl li::before { content: ""; position: absolute; left: 2px; top: calc(14px + .5em); width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--marker); }
.bl a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { .bl a:hover { text-decoration-thickness: 2px; } }
.sec-app { scroll-margin-top: 24px; }


.big { font-size: 36px; font-weight: 500; line-height: 1.16; letter-spacing: -.018em; max-width: 21em; text-wrap: pretty; padding-top: 4px; }
.big strong { font-weight: 650; }
.res { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; margin-top: 48px; }
.res-fig { grid-column: 1 / 8; position: relative; padding: 0 0 4px; }

.res-fig-sm { grid-column: 1 / 7; width: 100%; max-width: 500px; justify-self: center; }
.res-side { grid-column: 9 / -1; }
.res-fig-sm + .res-side { grid-column: 8 / -1; }
.res-note { font-size: 19px; line-height: 1.45; text-wrap: pretty; }
.res-side .fine { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ink-18); }

.sec-result .sec-body .fine { margin-top: 14px; max-width: 40em; }
.cg-line { display: block; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ink-18); font-size: 17px; max-width: 32em; }

.res-sm { margin-top: 36px; }
.res-sm .res-fig-sm { grid-column: 5 / 11; justify-self: start; max-width: 440px; }
.res-fig .k-key { justify-content: center; margin-top: 10px; }


.fig-box { position: relative; }
.res-fig svg { display: block; width: 100%; height: auto; }
.res-fig { --anatomy-weight: .75px; }
.halo { position: absolute; inset: 0; pointer-events: none; filter: blur(9px); opacity: var(--anatomy-halo-opacity); transform: translateY(3px); }
.halo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.halo path { fill: var(--anatomy-halo); }
.halo + svg { position: relative; }
.lead { fill: none; stroke: var(--ink); stroke-width: 1px; }
.lead-dot { fill: var(--ink); }
.fig-lbls { position: absolute; inset: 0; pointer-events: none; }
.fig-lbl {
  position: absolute; left: var(--x); top: var(--y); transform: translate(5px, -50%);
  font: 600 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.fig-lbl.mid { transform: translate(-50%, -50%); font-weight: 500; letter-spacing: .32em; color: var(--ink-soft); }
.k-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-soft); }
.k-key li { display: inline-flex; align-items: center; gap: 6px; }
.k-key svg { width: 18px; height: 18px; }
.kk-lit { fill: var(--marker); }
.kp-body { fill: var(--marker); stroke: var(--marker-deep); stroke-width: 1; }
.kp-cap { fill: var(--marker-light); stroke: var(--marker-deep); stroke-width: 1; }
.kp-stub, .kp-tint { fill: var(--marker-wash); stroke: var(--marker); stroke-width: 1; }
.kp-ring { fill: none; stroke: var(--ink); stroke-width: 1.1; }
.peg-move { transform: translateY(var(--dy)); }
.motion .peg-move { transition: transform .5s var(--ease-k); transition-delay: calc(var(--d) * 30ms); }
.peg-hole { fill: var(--anatomy-shade-0); stroke: var(--anatomy-lo); stroke-width: var(--anatomy-weight); }
.peg.b-low .peg-hole { stroke: var(--ink); }
.peg.b-mid .peg-move { --anatomy-top: var(--marker-wash); --anatomy-lit-top: var(--marker-wash); }


.checks { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.checks caption { caption-side: bottom; text-align: left; padding-top: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.checks thead td, .checks thead th { border-bottom: 1px solid var(--ink); padding: 0; }
.checks tbody th { text-align: left; font-weight: 400; font-size: 16px; line-height: 1.3; color: var(--ink-soft); padding: 13px 12px 13px 0; }
.checks tbody td { text-align: right; font-size: 24px; font-weight: 500; line-height: 1; letter-spacing: -.01em; color: var(--ink-soft); padding: 13px 0 13px 8px; }
.checks tbody tr + tr > * { border-top: 1px solid var(--ink-18); }
.checks tbody tr:last-child > * { border-bottom: 1px solid var(--ink-45); }
.tab {
  display: inline-flex; align-items: flex-end; justify-content: flex-end; width: 100%; min-height: 44px;
  padding: 8px 0 8px 8px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: 15px; font-weight: 500; color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}
.tab[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
@media (hover: hover) { .tab:hover { color: var(--ink); } }
.checks[data-scan="0"] td.c0, .checks[data-scan="1"] td.c1, .checks[data-scan="2"] td.c2 { color: var(--ink); font-weight: 650; }
.motion .checks td { transition: color .3s var(--ease-k); }


.visit { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: .3em; min-height: 44px; font-size: 18px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--ink-45); }
.visit .ico { margin-left: .4em; vertical-align: -.02em; }
@media (hover: hover) { .visit:hover { text-decoration-color: var(--ink); } }

.next { padding-block: 120px 152px; }
.next-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: stretch;
  margin: 6px; border: 1px solid var(--ink); outline: 2px solid var(--ink); outline-offset: 4px;
  background: var(--paper) var(--grain); text-decoration: none;
}
.next-card:focus-visible { outline: 2px solid var(--marker); outline-offset: 4px; border-radius: 0; }
.next-txt { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 40px 44px; }
.next-h { font-size: 40px; font-weight: 500; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.next-k { color: var(--ink-soft); font-weight: 400; }
.next-trade { font-size: 16px; color: var(--ink-soft); }
.next-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 17px; font-weight: 600; }
.next-go .ico { width: 14px; height: 14px; transition: transform .25s var(--ease); }

.next-ph { display: block; border-left: 1px solid var(--ink); overflow: hidden; aspect-ratio: 16 / 10; }
.next-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
@media (hover: hover) {
  .next-card:hover .next-go { text-decoration: underline; text-underline-offset: .25em; }
  .next-card:hover .next-go .ico { transform: translateX(4px); }
}


.room-ink { background: var(--ink) var(--grain); color: var(--paper); }
.room-ink ::selection { background: var(--paper); color: var(--ink); }
.room-ink :focus-visible { outline-color: var(--marker); }
.bookend { padding-top: 136px; }
.bookend h2 { font-size: 64px; line-height: 1; letter-spacing: -.025em; }
.stop { display: inline-block; width: .21em; height: .21em; margin-left: .045em; border-radius: 50%; background: var(--marker); }
.sum-ask { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 56px; }
.sum-foot { font-size: 15px; color: var(--on-ink-soft); max-width: 26em; }
.close { display: flex; align-items: center; gap: 32px; margin-top: 120px; padding-block: 32px 40px; border-top: 1px solid var(--rule-on-ink-soft); }
.close .wordmark { margin-right: auto; }
.close-line, .close-reach { font-size: 15px; color: var(--on-ink-soft); }
.close-reach a { color: var(--paper); display: inline-flex; align-items: center; min-height: 44px; }
.close-reach .ph { white-space: nowrap; }



.review {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: flex; flex-direction: column; align-items: stretch;
  max-width: calc(100vw - 32px);
  padding: 6px 8px; background: var(--paper-lift); color: var(--ink);
  border: 1px solid var(--ink-45); border-radius: 8px;
  font: 500 13px/1 var(--font);
}
.rv-strip { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.rv-lbl { color: var(--ink-soft); padding: 0 4px 0 6px; }
.rv-sep { width: 1px; height: 20px; background: var(--ink-18); margin: 0 4px; }
.review button { min-width: 32px; min-height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: none; cursor: pointer; font-weight: 500; }
.review button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.review .rv-hide { color: var(--ink-soft); }
@media (hover: hover) { .review button:not([aria-pressed="true"]):hover { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink-45); } }

.review .rv-tune-t { display: inline-flex; align-items: center; gap: 8px; }
.review .rv-tune-t[aria-expanded="true"] { background: var(--ink-18); }
.rv-dots { display: inline-flex; gap: 3px; }
.rv-dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-45); }
.rv-dots i:nth-child(1) { background: var(--paper); }
.rv-dots i:nth-child(2) { background: var(--marker); box-shadow: none; }
.rv-dots i:nth-child(3) { background: var(--room); box-shadow: none; }
.rv-dots i:nth-child(4) { background: var(--ink); box-shadow: none; }
.rv-chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.rv-tune-t[aria-expanded="true"] .rv-chev { transform: rotate(180deg); }
.rv-g { display: inline-flex; align-items: center; gap: 4px; }
.rv-tune { display: grid; gap: 2px; margin-bottom: 6px; padding: 4px 0 8px; border-bottom: 1px solid var(--ink-18); }
.rv-tune[hidden] { display: none; }

.rv-row { display: grid; grid-template-columns: 52px repeat(3, minmax(0, 1fr)); gap: 4px; align-items: center; }
.rv-tune .rv-lbl { padding: 0 0 0 4px; }
.review .rv-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 7px; row-gap: 4px; align-items: center;
  min-height: 42px; padding: 6px 10px 6px 8px; text-align: left;
}
.rv-sw { grid-row: 1 / 3; width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px var(--ink-45); }
.rv-name { white-space: nowrap; }
.rv-hex { font-size: 12px; color: var(--ink-soft); letter-spacing: .02em; font-variant-numeric: tabular-nums lining-nums; }
.review .rv-step[aria-pressed="true"] .rv-hex { color: var(--on-ink-soft); }
.review .rv-step[aria-pressed="true"] .rv-sw { box-shadow: 0 0 0 1px var(--paper); }

.rv-tune-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 6px 0 0 4px; border-top: 1px solid var(--ink-18); }
.rv-read { flex: 1; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; -webkit-user-select: text; user-select: text; }
.review .rv-today { flex: none; color: var(--ink-soft); }
.review-show {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  padding: 7px 11px; border: 1px solid var(--ink-45); border-radius: 8px; background: var(--paper-lift);
  font: 500 12px/1 var(--font); color: var(--ink-soft); cursor: pointer;
}
.review[hidden], .review-show[hidden] { display: none !important; }
html:not([data-panel="hidden"]) .review-show { display: none; }
[data-panel="hidden"] .review { display: none; }


@media (max-width: 1240px) {
  :root { --gutter: 48px; }
  .ledger { grid-template-columns: 1fr 1fr 1.6fr 1.2fr; }
}
@media (max-width: 1100px) {
  .projects { gap: 20px; }
  .pj-lbl { display: none; }
  .sec > h2, .sec-body { grid-column: 1 / -1; }
  .sec-body { margin-top: 20px; }
  .res-fig { grid-column: 1 / 8; }
  .res-side { grid-column: 8 / -1; }
  .res-sm .res-fig-sm { grid-column: 1 / 8; }
  .lead { --ph-w: 220px; column-gap: 24px; }
  
  .sec-sit .sec-body { grid-column: 1 / 9; grid-row: 2; }
  .sec-sit-solo .sec-body { grid-column: 1 / -1; }
  .sit-photo { grid-column: 9 / -1; grid-row: 2; margin-top: 20px; padding-top: 6px; }
}
@media (max-width: 900px) {
  .made-steps { grid-template-columns: 1fr; gap: 28px; }
  .sys { grid-template-columns: 1fr 1fr; }
  .top { flex-wrap: wrap; height: auto; padding-top: 10px; gap: 0 24px; }
  .top-ask { margin-left: auto; }
  .projects { order: 3; width: 100%; margin-left: 0; justify-content: flex-start; gap: 22px; border-top: 1px solid var(--ink-18); }
  .ledger { grid-template-columns: 1fr 1fr; }
  .lc:nth-child(3) { border-left: 0; padding-left: 0; }
  .lc:nth-child(n+3) { border-top: 1px solid var(--ink-18); }
  .res-fig, .res-side, .res-fig-sm + .res-side { grid-column: 1 / -1; }
  .res-fig-sm, .res-sm .res-fig-sm { grid-column: 1 / -1; justify-self: center; }
  .res-side { margin-top: 28px; }
  .lead { --ph-w: 180px; }
  .next-card { grid-template-columns: 1fr; }
  .next-ph { border-left: 0; border-top: 1px solid var(--ink); grid-row: 1; }
}


@media (max-width: 640px) {
  :root { --gutter: 16px; --nav-h: 60px; }
  body { font-size: 17px; }
  .top { padding-top: 6px; }
  .wordmark { font-size: 17px; }
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
  .top-ask { min-height: 44px; padding-block: 0; }
  .projects { justify-content: space-between; font-size: 15px; gap: 12px; }

  
  .case { display: flex; flex-direction: column; }
  .case-head { display: contents; }
  .case-id { order: 1; padding: 28px var(--gutter) 0; flex-direction: column; align-items: flex-start; gap: 18px; }
  .case-lead { order: 2; }
  .ledger { order: 3; margin: 26px var(--gutter) 0; }
  .case > .sec { order: 4; }
  .logo-slot { height: 65px; }
  .logo { --lw: 200px; }
  .logo.logo-hcch { --lw: 230px; }
  h1 { font-size: 42px; line-height: 1.02; letter-spacing: -.024em; }
  .lc { padding: 12px 12px 14px 0; }
  .lc + .lc { padding-left: 12px; }
  .lc:nth-child(3) { padding-left: 0; }
  .lc-did { grid-column: 1 / -1; }
  .lc-did + .lc { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  .lc dd { font-size: 16px; }
  .tags li { font-size: 14px; }

  
  .case-lead { margin-top: 26px; }
  .lead { --ph-w: 37%; column-gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 16px var(--gutter) 10px; }
  .shot-desk { margin-right: 0; }
  .shot-bar { height: 22px; font-size: 10px; padding-inline: 8px; }
  .shot-phone { grid-row: 1 / 3; padding: 5px; border-radius: 20px; }
  .shot-phone img { border-radius: 15px; }
  .lead-cap { min-height: 150px; padding-top: 14px; }
  .lead-cap .lede { font-size: 18px; line-height: 1.3; }
  .lead > .visit { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; font-size: 15px; line-height: 1.35; }
  .lead > .lead-note { grid-column: 1 / -1; grid-row: 4; margin-top: 4px; font-size: 13px; }

  
  .sec-built .lede { font-size: 19px; }
  .sec-built > .lead { margin-top: 26px; }
  .made-steps { margin-top: 22px; }
  .made-steps h3, .sys-tile h3 { font-size: 20px; }
  .made-steps p, .sys-tile p { font-size: 16px; }
  .sys { grid-template-columns: 1fr; gap: 36px; margin-top: 28px; }
  .sys-plate { margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 6 / 5; }
  .sys-phone { width: 56%; top: 28px; }
  
  .sys-cards { margin-top: 40px; row-gap: 56px; }
  .built-lists { grid-template-columns: 1fr; row-gap: 36px; margin-top: 36px; }
  .bl li { font-size: 17px; padding: 12px 0 13px 20px; }
  .bl li::before { top: calc(12px + .5em); }
  .sys-cards .sys-plate { aspect-ratio: auto; padding: 52px 0; }
  .sys-cards .mail-card { width: calc(100% - 4 * var(--gutter)); }
  .sys-cards .sys-tile h3 { margin-top: 22px; }
  .sys-cards .sys-tile p { margin-top: 10px; }
  .mail-addr { font-size: 21px; }

  
  .sec-sit > h2, .sec-sit .sec-body { grid-column: 1 / -1; }
  .sec-sit .sec-body { margin-top: 16px; padding-right: 0; }
  .sit-photo { grid-column: 1 / -1; grid-row: 3; margin: 36px calc(-1 * var(--gutter)) 0; padding-top: 0; }
  .sp-frame { max-height: 72svh; }
  .sp-frame img { object-position: var(--pos-sm, 50% 50%); }
  .sit-photo figcaption { padding-inline: var(--gutter); font-size: 13px; }

  .sec { padding-top: 88px; }
  h2 { font-size: 34px; }
  .sec-body { margin-top: 16px; }
  .said p { font-size: 25px; line-height: 1.22; text-indent: 0; }
  .said-by { font-size: 15px; }
  .sit { margin-top: 26px; padding-top: 18px; font-size: 18px; }
  .big { font-size: 27px; line-height: 1.2; }
  .res { margin-top: 28px; }
  .res-note { font-size: 17px; }
  .checks tbody th { font-size: 15px; }
  .checks tbody td { font-size: 21px; }
  .tab { font-size: 14px; }
  .fig-lbl { font-size: 11px; }

  .next { padding-block: 80px 96px; }
  .next-txt { padding: 24px 20px 26px; gap: 8px; }
  .next-h { font-size: 28px; }
  .next-go { margin-top: 10px; }

  .bookend { padding-top: 88px; }
  .bookend h2 { font-size: 38px; line-height: 1.04; }
  .sum-ask { margin-top: 36px; gap: 16px; }
  .sum-ask .btn { width: 100%; justify-content: center; padding-block: 19px; }
  .close { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 80px; padding-block: 28px 36px; }

  .review { right: 8px; bottom: 8px; max-width: calc(100vw - 16px); font-size: 12px; padding: 4px 6px; }
  .rv-row { grid-template-columns: 46px repeat(3, minmax(0, 1fr)); }
  .rv-tune .rv-lbl { padding: 0 0 0 2px; }
  .review button, .review .rv-step { min-height: 44px; }
  .review .rv-step { padding: 6px 6px; column-gap: 5px; }
}