/* ============ nib:: — editorial (black & white; lime only in transitions) ============ */
:root {
  --paper: #ffffff;
  --ink: #0b0b0c;
  --grey: #8d8c88;
  --faint: #dcdad5;
  --lime: #d4ff3a;
  --blot: var(--ink);                           /* the moving ink */
  --over: var(--lime);                              /* colour of the letters where they cross the ink */
  --pad: clamp(16px, 2.6vw, 40px);
  --rule: 38vw;                                   /* the one vertical line everything hangs from */
  --type: clamp(58px, 10.4vw, 188px);
  --f: "Instrument Sans", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
@media (max-width: 760px) { :root { --rule: 30vw; --type: clamp(46px, 15vw, 96px); } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); }
body { font-family: var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--lime); color: var(--ink); }

/* ---------- Intro ---------- */
.intro {
  position: fixed; inset: 0; z-index: 50; background: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between; padding: var(--pad);
  transition: opacity .01s linear;
}
.intro.is-gone { opacity: 0; pointer-events: none; }
.intro__label { font-size: 12px; line-height: 1.35; color: var(--grey); }
.intro__count { font-size: clamp(64px, 11vw, 200px); font-weight: 600; letter-spacing: -0.06em; line-height: .8; font-variant-numeric: tabular-nums; }
.flood { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; }
/* wave intro (as on the first site): a lime screen with the logo in the middle; after a short beat it drains upward
   in waves, two deeper greens trailing behind (z 55–56), and the first screen is right there underneath */
.intro--wave { z-index: 57; background: var(--lime); color: var(--ink); justify-content: center; align-items: center; }
.intro__logo { display: block; height: clamp(26px, 3vw, 34px); width: auto; }
.nf-cover { position: fixed; inset: 0; pointer-events: none; }

/* ---------- Top bar ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 20; display: grid; align-items: start;
  grid-template-columns: var(--rule) 1fr auto; padding: var(--pad);
}
.logo img { display: block; height: 22px; width: auto; }
.top__note { font-size: 12px; line-height: 1.35; padding-left: 12px; }
.menu { position: relative; isolation: isolate; background: none; border: 0; font-size: 12px; font-weight: 500; color: var(--ink); padding: 6px 12px; }
/* the button sits on a real ink bleed (brand/ink-drop.png, made from a scanned drop: white removed, darkness → opacity),
   used as a mask so it can be painted any colour — light grey here, lime when the menu is open */
.menu__ink { position: absolute; left: 50%; top: 50%; width: 66px; height: 64px; transform: translate(-50%, -50%) rotate(-8deg); z-index: -1;
  background: #c9c7c2; -webkit-mask: url(brand/ink-drop.png) center / contain no-repeat; mask: url(brand/ink-drop.png) center / contain no-repeat; transition: background-color .3s; }
body.menu-open .menu { color: var(--ink); }
body.menu-open .menu__ink { background: var(--lime); }
@media (max-width: 760px) { .menu__ink { width: 56px; height: 54px; } }   /* stays inside the top edge on phones */
@media (max-width: 760px) { .top__note { display: none; } .top { grid-template-columns: 1fr auto; } }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; }
.rule { position: absolute; left: var(--rule); top: 0; bottom: 0; width: 1px; background: var(--ink); opacity: .85; transform-origin: top; }

.blot { position: absolute; left: calc(var(--rule) - 30vmin); top: 34svh; width: 52vmin; height: 52vmin; fill: var(--blot); overflow: visible; }

/* staggered type — plain black; it reads over both the paper and the lime blot */
.stack { position: absolute; inset: 0; pointer-events: none; color: var(--ink); font-weight: 600; font-size: var(--type); letter-spacing: -0.055em; line-height: .88; }
.ln { position: absolute; display: block; padding: 0 .04em .06em 0; white-space: nowrap; }
.ln > span { display: block; opacity: 0; }                 /* appears as an ink smudge that resolves into letters (editorial.js) */
.ln--1 { left: calc(var(--rule) - 2.2em);          top: 17svh; }   /* the p's descender stays just left of the i in "ideas," */
.ln--2 { left: calc(var(--rule) + .06em);          top: calc(17svh + var(--type) * .9); }
.ln--3 { left: calc(var(--pad) + 9vw);             top: calc(17svh + var(--type) * 1.8); }
.ln--4 { left: calc(var(--rule) + .06em);          top: calc(17svh + var(--type) * 2.7); }
@media (max-width: 760px) {
  .ln--1 { left: calc(var(--pad) + 14vw); top: 16svh; } .ln--2 { top: calc(16svh + var(--type) * .9); }
  .ln--3 { left: var(--pad); top: calc(16svh + var(--type) * 1.8); } .ln--4 { left: calc(var(--rule) * .55); top: calc(16svh + var(--type) * 2.7); }
}

.lead { position: absolute; left: var(--pad); top: calc(17svh + var(--type) * 1.05); width: min(28ch, calc(var(--rule) - var(--pad) * 2)); font-size: 14px; line-height: 1.6; letter-spacing: -0.01em; word-break: keep-all; }
@media (max-width: 760px) {
  .lead { top: calc(16svh + var(--type) * 3.85); width: calc(100vw - var(--pad) * 2); }
  .blot { left: calc(var(--rule) - 20vmin); top: calc(16svh + var(--type) * 1.1); width: 40vmin; height: 40vmin; }
}

.coord { position: absolute; bottom: var(--pad); font-size: clamp(28px, 4.6vw, 80px); font-weight: 500; letter-spacing: -0.04em; line-height: .8; color: var(--faint); }
.coord--l { left: var(--pad); } .coord--r { right: var(--pad); }
@media (max-width: 760px) { .coord { font-size: 22px; } }   /* the left label must end before the vertical line */

/* quiet fade for the small things once the type has landed */
.lead, .coord, .top, .blot { opacity: 0; transition: opacity 1s ease; }
.is-in .lead, .is-in .coord, .is-in .top, .is-in .blot { opacity: 1; transition-delay: .5s; }
.is-in .top { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  .ln > span { opacity: 1; }
  .lead, .coord, .top, .blot { opacity: 1; }
}

/* very short screens: the coordinates would collide with the intro sentence */
@media (max-height: 560px) and (max-width: 760px) { .coord { display: none; } }

/* second copy of the headline, clipped to the ink's shape (editorial.js) — letters change colour where they cross it */
.stack--over { color: var(--over); }
.stack--over .ln > span { opacity: 0; transition: opacity .6s ease; }
.stack--over.is-on .ln > span { opacity: 1; }

/* ================================================================
   Sections below the first screen — same rules: paper, ink, one line
   ================================================================ */
.sec {
  position: relative; display: grid; grid-template-columns: var(--rule) 1fr;
  padding: clamp(96px, 14vh, 180px) var(--pad) clamp(72px, 10vh, 140px) 0;
  border-top: 1px solid var(--ink);
}
.sec::before { content: ""; position: absolute; left: var(--rule); top: 0; bottom: 0; width: 1px; background: var(--ink); opacity: .85; }  /* the line keeps running down the page */
.sec__no { padding-left: var(--pad); font-size: 12px; line-height: 1.35; position: sticky; top: 90px; align-self: start; }
.sec__body { padding-left: clamp(16px, 2.4vw, 36px); min-width: 0; }
@media (max-width: 760px) {
  .sec { grid-template-columns: 1fr; padding: 80px var(--pad) 64px; }
  .sec::before { display: none; }
  .sec__no { position: static; padding: 0 0 20px; }
  .sec__body { padding-left: 0; }
}

.big  { font-weight: 600; font-size: clamp(44px, 7.4vw, 132px); letter-spacing: -0.055em; line-height: .9; margin-bottom: clamp(40px, 6vw, 88px); }
.huge { font-weight: 600; font-size: clamp(52px, 10vw, 188px); letter-spacing: -0.06em; line-height: .86; margin-bottom: clamp(40px, 6vw, 88px); }
.ink-h { opacity: 0; }                                   /* surfaces out of an ink smudge when scrolled to (editorial.js) */
.note { font-size: 12px; color: var(--grey); margin-top: 16px; }

/* gentle reveal for everything else */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- About ---------- */
.manifesto { font-size: clamp(26px, 3.4vw, 58px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.22; word-break: keep-all; max-width: 22em; }
.manifesto .w { color: var(--faint); transition: color .35s ease; }
.manifesto .w.on { color: var(--ink); }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(64px, 9vw, 140px); border-top: 1px solid var(--ink); }
.figures div { padding: 20px 16px 0 0; }
.figures div + div { border-left: 1px solid var(--faint); padding-left: 16px; }
.figures dt { font-size: clamp(40px, 5.4vw, 96px); font-weight: 600; letter-spacing: -0.06em; line-height: 1; }
.figures sup { font-size: .32em; letter-spacing: 0; vertical-align: top; margin-left: .1em; }
.figures dd { font-size: 13px; color: var(--grey); margin-top: 10px; word-break: keep-all; }
@media (max-width: 760px) {
  .figures { grid-template-columns: 1fr 1fr; }
  .figures div:nth-child(3) { border-left: 0; padding-left: 0; }
  .figures div:nth-child(n+3) { border-top: 1px solid var(--faint); padding-top: 20px; margin-top: 20px; }
}

/* ---------- Work index ---------- */
.index-list { list-style: none; border-top: 1px solid var(--ink); }
.index-list li { border-bottom: 1px solid var(--faint); }
.index-list a {
  display: grid; grid-template-columns: 44px 1fr auto 60px; align-items: baseline; gap: 16px;
  padding: clamp(14px, 2vw, 26px) 0;
}
.index-list .no { font-size: 12px; color: var(--grey); font-variant-numeric: tabular-nums; }
.index-list .name { font-size: clamp(30px, 4.4vw, 76px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; transition: transform .5s var(--ease), color .3s; }
.index-list .kind { font-size: 13px; color: var(--grey); text-align: right; }
.index-list .yr { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.index-list a:hover .name, .index-list a:focus-visible .name { transform: translateX(14px); }
.index-list a:focus-visible { outline: none; }
.index-list.is-hovering a:not(:hover) .name { color: var(--faint); }
@media (max-width: 760px) { .index-list a { grid-template-columns: 32px 1fr auto; row-gap: 6px; } .index-list .kind { grid-column: 2; grid-row: 2; text-align: left; } .index-list .yr { grid-column: 3; grid-row: 1; } }   /* 휴대폰에서도 '무엇인지' 이름을 이름 아래에 보여 줌 (10/4) */

.peek { position: fixed; left: 0; top: 0; z-index: 15; pointer-events: none; width: min(34vw, 460px); aspect-ratio: 4 / 3; }
.peek__card {
  width: 100%; height: 100%; border-radius: 6px; overflow: hidden; background: var(--c, var(--ink)); color: var(--on, #fff);
  display: flex; flex-direction: column; justify-content: space-between; padding: 22px;
  clip-path: circle(0% at 50% 50%); transition: clip-path .6s var(--ease);
}
.peek.is-on .peek__card { clip-path: circle(80% at 50% 50%); }
.peek__card { position: relative; }
.peek__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }   /* real work: the actual first scene */
.peek__card small { font-size: 11px; opacity: .75; letter-spacing: .02em; }
.peek__card b { font-size: clamp(26px, 2.8vw, 44px); font-weight: 600; letter-spacing: -0.045em; line-height: .98; white-space: pre-line; }
@media (hover: none) { .peek { display: none; } }

/* ---------- Services ---------- */
.svc-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.svc-grid li { padding: 20px 20px 0 0; }
.svc-grid li + li { border-left: 1px solid var(--faint); padding-left: 20px; }
.svc-grid span { font-size: 12px; color: var(--grey); }
.svc-grid h3 { font-size: clamp(20px, 1.8vw, 28px); font-weight: 600; letter-spacing: -0.03em; margin: 44px 0 12px; word-break: keep-all; }
.svc-grid p { font-size: 14px; line-height: 1.65; color: #3d3c39; word-break: keep-all; }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; } .svc-grid li:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } .svc-grid li + li { border-left: 0; padding-left: 0; } }

/* ---------- Process ---------- */
.strokes { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 36px; }
.strokes__line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease); }
.strokes.in .strokes__line { transform: none; }
.strokes div { position: relative; }
.strokes div::before { content: ""; position: absolute; top: -41px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.strokes span { font-size: 12px; color: var(--grey); }
.strokes h3 { font-size: clamp(24px, 2.4vw, 38px); font-weight: 600; letter-spacing: -0.04em; margin: 10px 0; }
.strokes p { font-size: 14px; line-height: 1.6; color: #3d3c39; word-break: keep-all; }
@media (max-width: 760px) { .strokes { grid-template-columns: 1fr 1fr; row-gap: 40px; } .strokes div::before { display: none; } }

/* ---------- Recognition ---------- */
.awards__table { width: 100%; border-collapse: collapse; font-size: 14px; word-break: keep-all; }
.awards__table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--grey); padding: 0 12px 12px 0; border-bottom: 1px solid var(--ink); }
.awards__table td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--faint); }
.awards__table td:first-child { font-variant-numeric: tabular-nums; width: 70px; }
.awards__table td:nth-child(2) { font-weight: 600; }
@media (max-width: 560px) { .awards__table th:nth-child(4), .awards__table td:nth-child(4) { display: none; } }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 80px); border-top: 1px solid var(--ink); padding-top: 28px; }
.mail { display: inline-block; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; border-bottom: 1px solid var(--ink); }
.contact__info p { font-size: 14px; line-height: 1.7; }
.form { display: flex; flex-direction: column; gap: 22px; }
.form fieldset { border: 0; }
.form legend { font-size: 12px; color: var(--grey); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { font-size: 13px; padding: 8px 14px; border: 1px solid var(--ink); border-radius: 99px; transition: background .25s, color .25s; }
.chips button.is-on, .chips button:hover { background: var(--ink); color: var(--paper); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 12px; color: var(--grey); }
.field input, .field textarea { font: inherit; font-size: 17px; border: 0; border-bottom: 1px solid var(--ink); padding: 8px 0; background: transparent; outline: none; resize: vertical; border-radius: 0; }
.field input:focus, .field textarea:focus { border-bottom-width: 2px; }
.field.is-error input { border-bottom-color: #d22; }
.send { align-self: flex-start; font-size: 15px; font-weight: 600; background: var(--ink); color: var(--paper); padding: 14px 24px; border-radius: 99px; }
.form__msg { font-size: 13px; min-height: 1.2em; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot { padding: 28px var(--pad) var(--pad); border-top: 1px solid var(--ink); }
.foot__row { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; font-size: 13px; }
.foot__row nav { display: flex; gap: 20px; }

/* ---------- Menu: opens as a black ink circle from the Menu button ---------- */
.menu-panel {
  position: fixed; inset: 0; z-index: 40; background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--pad) + 60px) var(--pad) var(--pad);
  clip-path: circle(0px at var(--mx, 95%) var(--my, 4%)); transition: clip-path .9s var(--ease); pointer-events: none;
}
.menu-panel.is-open { clip-path: circle(150vmax at var(--mx, 95%) var(--my, 4%)); pointer-events: auto; }
.menu-panel__nav { display: flex; flex-direction: column; }
.menu-panel__nav a { font-size: clamp(44px, 8vw, 128px); font-weight: 600; letter-spacing: -0.055em; line-height: 1.02; width: max-content; }
.menu-panel__nav a:hover { color: var(--lime); }
.menu-panel__meta { font-size: 12px; line-height: 1.5; color: #9a9994; }
.top { transition: filter .3s; }
body.menu-open .top { z-index: 45; }
body.menu-open .logo img { filter: invert(1); }
body.menu-open .top__note { color: var(--paper); }

@media (prefers-reduced-motion: reduce) { .rv, .ink-h { opacity: 1; transform: none; } .menu-panel { transition: none; } }

/* header gets a paper backing once content scrolls under it */
.top.is-scrolled { background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.menu-open .top { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ============ First-screen skeleton options (?hero=a / b / c) — the default above follows the reference's frame
   (vertical line, note beside it, big corner words, stepped type). Each option drops all four. ============ */
html[class*="hero-"] .rule { display: none; }
html[class*="hero-"] .top { grid-template-columns: 1fr auto auto; }
html[class*="hero-"] .top__note { text-align: right; padding: 6px 18px 0 0; }
html[class*="hero-"] .top__note br { display: none; }
html[class*="hero-"] .coord { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--grey); }
html[class*="hero-"] .coord--r::before { content: "Seoul "; }

/* A — ruled page: every line of the headline sits on its own hairline, numbered like lines of code (the "::") */
html.hero-a .ln { left: var(--pad); right: var(--pad); padding-left: 64px; }
html.hero-a .stack:not(.stack--over) .ln { border-bottom: 1px solid var(--faint); }
html.hero-a .stack:not(.stack--over) .ln::before { position: absolute; left: 0; bottom: 14px; font: 500 12px/1 ui-monospace, "JetBrains Mono", monospace; color: var(--grey); letter-spacing: 0; }
html.hero-a .ln--1::before { content: "01"; } html.hero-a .ln--2::before { content: "02"; }
html.hero-a .ln--3::before { content: "03"; } html.hero-a .ln--4::before { content: "04"; }
html.hero-a .blot { left: 17vw; top: calc(17svh + var(--type) * .75); width: 42vmin; height: 42vmin; }
html.hero-a .lead { left: auto; right: var(--pad); top: auto; bottom: calc(var(--pad) + 44px); text-align: right; }
@media (max-width: 760px) {
  html.hero-a .ln { padding-left: 34px; }
  html.hero-a .stack:not(.stack--over) .ln::before { bottom: 8px; font-size: 10px; }
  html.hero-a .blot { left: 42vw; top: calc(16svh + var(--type) * 1.1); width: 46vmin; height: 46vmin; }
  html.hero-a .lead { right: auto; left: var(--pad); text-align: left; top: calc(16svh + var(--type) * 3.9); bottom: auto; }
}

/* B — two long lines and one pen stroke: the headline reads as a sentence; a nib stroke is drawn under "finely drawn." */
html.hero-b .stack, html.hero-c .stack { display: flex; flex-wrap: wrap; column-gap: .24em; align-content: flex-start; padding: 21svh var(--pad) 0; }
html.hero-b .stack::before, html.hero-c .stack::before { content: ""; flex-basis: 100%; height: 0; order: 2; }   /* line break between the two lines */
html.hero-b .ln, html.hero-c .ln { position: static; order: 1; }
html.hero-b .ln--3, html.hero-b .ln--4, html.hero-c .ln--3, html.hero-c .ln--4 { order: 3; }
html.hero-b .ln--3, html.hero-c .ln--3 { margin-left: .9em; }
html.hero-b .blot { left: 36vw; top: 12svh; width: 44vmin; height: 44vmin; }
html.hero-b .lead { left: auto; right: var(--pad); top: calc(21svh + var(--type) * 2.35); width: min(30ch, 40vw); }
.pen { position: absolute; display: none; pointer-events: none; overflow: visible; }
html.hero-b .pen { display: block; }
.pen path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* C — anchored low: the headline stands on the bottom edge, the ink floats alone in the white space above */
html.hero-c .stack { align-content: flex-end; padding: 0 var(--pad) calc(var(--pad) + 40px); }
html.hero-c .blot { left: 30vw; top: calc(100svh - var(--pad) - 40px - var(--type) * 2.3); width: 46vmin; height: 46vmin; }
html.hero-c .lead { top: calc(var(--pad) + 76px); }

@media (max-width: 760px) {
  html.hero-b .ln, html.hero-c .ln { flex-basis: 100%; }
  html.hero-b .stack, html.hero-c .stack { padding-top: 16svh; }
  html.hero-b .ln--3, html.hero-c .ln--3 { margin-left: 0; }
  html.hero-b .ln--2, html.hero-b .ln--4, html.hero-c .ln--2, html.hero-c .ln--4 { margin-left: .8em; }
  html.hero-b .blot { left: 30vw; top: calc(16svh + var(--type) * .5); width: 50vmin; height: 50vmin; }
  html.hero-b .lead { right: auto; left: var(--pad); width: auto; top: calc(16svh + var(--type) * 3.9); }
  html.hero-c .stack { padding-top: 0; }
  html.hero-c .blot { left: 38vw; top: calc(100svh - var(--pad) - 40px - var(--type) * 2.9); width: 50vmin; height: 50vmin; }
  html.hero-c .lead { top: calc(var(--pad) + 60px); }
}

/* ---------- Contact: the button that opens the inquiry sheet ---------- */
.send { transition: background .25s, color .25s; }
.send:hover { background: var(--lime); color: var(--ink); }
.send:disabled { opacity: .5; pointer-events: none; }

/* ---------- Inquiry sheet (dialog) ---------- */
.sheet {
  width: min(620px, calc(100vw - 2 * var(--pad))); max-height: calc(100dvh - 2 * var(--pad)); margin: auto; overflow: auto;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: clamp(22px, 3vw, 36px);
}
.sheet::backdrop { background: rgba(11, 11, 12, .55); }
.sheet[open] { animation: sheet-in .5s var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px); } }
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; margin-bottom: 24px; }
.sheet__head h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.sheet__close { font-size: 13px; font-weight: 500; border-bottom: 1px solid currentColor; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__privacy { margin-top: -6px; }

/* ---------- AI assistant ---------- */
.fab-stack { position: fixed; right: var(--pad); bottom: var(--pad); z-index: 30; display: flex; flex-direction: column; gap: 8px; transition: opacity .3s; }
.chat-fab {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 84px;
  font-size: 14px; font-weight: 600; background: var(--ink); color: var(--paper); padding: 13px 20px; border-radius: 99px;
  transition: background .25s, color .25s;
}
.chat-fab:hover { background: var(--lime); color: var(--ink); }
.chat-fab__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.chat-fab:hover .chat-fab__dot { background: var(--ink); }
body.is-loading .fab-stack, body.menu-open .fab-stack, .fab-stack.is-away { opacity: 0; pointer-events: none; }
.chat {
  position: fixed; right: var(--pad); bottom: var(--pad); z-index: 35; width: min(380px, calc(100vw - 2 * var(--pad)));
  height: min(560px, calc(100dvh - 2 * var(--pad))); display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--ink); animation: sheet-in .45s var(--ease);
}
.chat[hidden] { display: none; }
.chat__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--ink); }
.chat__head strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.chat__head span { display: block; font-size: 11px; color: var(--grey); margin-top: 3px; }
.chat__log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.chat__msg { max-width: 86%; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.chat__msg--bot { align-self: flex-start; border-left: 2px solid var(--ink); padding-left: 12px; }
.chat__msg--me { align-self: flex-end; background: var(--ink); color: var(--paper); padding: 9px 14px; border-radius: 16px 16px 2px 16px; }
.chat__msg--note { align-self: stretch; max-width: none; font-size: 12px; color: var(--grey); }
.chat__msg--wait::after { content: "…"; animation: chat-wait 1s steps(3) infinite; }
@keyframes chat-wait { 50% { opacity: .3; } }
.chat__form { display: flex; gap: 8px; align-items: center; padding: 12px 14px 14px 18px; border-top: 1px solid var(--ink); }
.chat__form input { flex: 1; min-width: 0; font: inherit; font-size: 15px; border: 0; outline: none; background: transparent; padding: 8px 0; }
.chat__form .send { align-self: auto; padding: 10px 16px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .sheet[open], .chat { animation: none; } }
@media (max-width: 760px) { .foot { padding-bottom: calc(var(--pad) + 118px); } }   /* room for the two floating buttons */