/* 改善 — kaizen, "change for the better" — as a SECTION MARKER.
 *
 * BOTH characters, and set in MINCHO, as of 2026-09-04.
 *   - It was a single 改, which is the verb "to change" on its own rather than the
 *     word the company is named after. Half a word reads as a crop, not a mark.
 *   - It was IPAGothic, a SANS, while the large mark on the homepage is IPAMincho,
 *     a serif. Two kanji treatments on one page is the thing a designer notices
 *     first. One face now, at two sizes.
 *
 * Rahaid picked this over a background watermark (2026-09-04): a mark that marks
 * something never reads as wallpaper. At 14px it is a detail you find rather than
 * a graphic you are shown.
 *
 * Outlined from IPAGothic and baked into the SVG. Han unification means U+6539
 * renders with different glyph SHAPES in a Chinese font, so shipping live text
 * would let a viewer's font stack serve the wrong form on a site that sells design
 * competence. A path cannot be substituted.
 *
 * ONE definition for the whole site. Every page attaches it to whatever actually
 * heads its sections, because the four pages are not built the same way:
 *   index    .smallcaps eyebrow, which already had the rule
 *   about    .sect-head
 *   privacy  .legal-head
 *   contact  .contact-grid — its section is a form, so the grid is the head
 * .closing is excluded: its rule is centred, and a character hanging off the left
 * of a centred rule reads as a mistake.
 */
:root{ --kz-mark:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%204300%202048%22%3E%3Cg%20transform%3D%22translate%280%2C2048%29%20scale%281%2C-1%29%22%3E%3Cpath%20d%3D%22M304%20928V264Q304%20213%20335%20201Q366%20191%20484%20191Q647%20191%20674%20209Q730%20243%20748%20535L801%20518Q801%20297%20820%20248Q835%20203%20891%20203Q882%20110%20793%2094Q704%2082%20490%2082Q281%2082%20236%20109Q185%20136%20185%20246V1040Q248%201014%20316%20979H670V1460H121L103%201511H651L727%201613Q851%201515%20851%201485Q851%201470%20834%201460L785%201427V809H670V928ZM1457%20392Q1648%20163%201962%209Q1902%20-37%201860%20-108Q1560%2073%201393%20296Q1155%20-7%20748%20-145L719%20-98Q1117%2072%201328%20396Q1170%20654%201098%201043Q994%20810%20854%20638L811%20670Q1065%201077%201145%201690Q1340%201650%201340%201608Q1340%201584%201256%201565Q1226%201415%201180%201262H1727L1823%201393Q1888%201332%201952%201248L1932%201211H1711Q1649%20700%201457%20392ZM1387%20490Q1537%20781%201584%201211H1164Q1155%201186%201139%201143Q1239%20717%201387%20490Z%22%20fill%3D%22%238A857C%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%282252%2C2048%29%20scale%281%2C-1%29%22%3E%3Cpath%20d%3D%22M543%20370H1478L1561%20458Q1690%20369%201690%20339Q1690%20327%201669%20313L1618%20278V-147H1499V-39H518V-147H397V442Q453%20421%20543%20370ZM518%20319V12H1499V319ZM1278%20592Q1347%20715%201397%20877Q1571%20819%201571%20780Q1571%20756%201487%20750Q1420%20660%201349%20592H1706L1810%20721Q1890%20648%201943%20578L1921%20541H149L125%20592H952V893H168L143%20944H952V1118H346L323%201169H952V1331H221L200%201382H1143Q1215%201512%201268%201699Q1454%201638%201454%201595Q1454%201566%201364%201560Q1305%201477%201222%201394Q1216%201385%201210%201382H1638L1734%201505Q1810%201440%201872%201368L1849%201331H1073V1169H1515L1614%201278Q1696%201209%201743%201151L1720%201118H1073V944H1681L1782%201063Q1859%201004%201921%20930L1898%20893H1073V592ZM473%20874Q713%20798%20713%20676Q713%20602%20643%20602Q598%20602%20580%20665Q552%20765%20449%20838ZM600%201694Q852%201608%20852%201479Q852%201434%20811%201405Q794%201395%20776%201395Q723%201395%20711%201465Q690%201563%20576%201659Z%22%20fill%3D%22%238A857C%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); }

.kz-mark{ position:relative; }
.kz-mark::after{
  content:""; position:absolute; left:0; top:0; width:30px; height:14px;
  background:var(--kz-mark) no-repeat left center/contain; opacity:.62;
}
.kz-mark::before{
  content:""; position:absolute; left:40px; top:7px; width:140px; height:1px;
  background:#D8D4CC;
}

/* index already carried the rule above its eyebrow, so the marker rides that one
   instead of drawing a second — and the rule keeps its scroll-draw animation. */
section:not(.closing) .container > .smallcaps::after{
  content:""; position:absolute; left:0; top:-31px; width:30px; height:14px;
  background:var(--kz-mark) no-repeat left center/contain; opacity:.62;
}
section:not(.closing) .container > .smallcaps::before{ left:40px; width:140px; }

/* the pages without an eyebrow need the space made for the marker */
.sect-head.kz-mark, .legal-head.kz-mark, .contact-grid.kz-mark{ padding-top:34px; }

/* ── The seat mark ────────────────────────────────────────────────────────────
 * "We take five at a time" appears five times across the site as plain text and
 * was never shown. This is the cap made visible: five marks beside the line.
 *
 * IT SHOWS THE CAP, NOT THE OCCUPANCY, and that is a commercial decision rather
 * than a design one. Filling marks to show seats taken would broadcast the client
 * count to every prospect - and an empty board says "nobody has hired us". Set
 * data-taken on the element to switch occupancy on; leave it off and all five read
 * the same, which claims nothing that is not true.
 */
.seats{display:inline-flex;gap:5px;vertical-align:middle;margin-right:9px;
       transform:translateY(-1px)}
.seats i{width:7px;height:7px;border:1px solid var(--kz-seat,#8A857C);border-radius:1px;
         opacity:.55;display:block}
.seats i.taken{background:var(--kz-seat,#8A857C);opacity:.85}