@font-face { font-family: "Jersey 10"; src: url(fonts/jersey10.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Courier Prime"; font-weight: 400; src: url(fonts/courier-prime-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Courier Prime"; font-weight: 700; src: url(fonts/courier-prime-700.woff2) format("woff2"); font-display: swap; }

/* One ink on one ground, like a 1-bit print. Two grounds: night (default) and day. */
:root {
  --bg: #060912; --ink: #89baff; --flow: #2a4fa8; --text: #dbe8ff; --muted: #93a9d1;
  --glass: rgba(7, 11, 24, .82); --glass-2: rgba(137, 186, 255, .07); --on-ink: #060912;
  --shade: #2a4fa8;                            /* the offset under big numbers: a step from the ground toward the ink */
  --px: 4px;                                   /* the pixel: every offset is a multiple of it */
  --pixel: "Jersey 10", "Courier Prime", monospace;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --wrap: 1120px;
  --ghost: 420px;                              /* the ghost's box. Its size comes from here, never from the text beside it */
  --step: steps(4, end);
}
:root[data-theme="day"] {
  --bg: #eaf2ff; --ink: #1236e8; --flow: #b4c4ff; --text: #0a1a52; --muted: #3c4f8a;
  --glass: rgba(240, 246, 255, .86); --glass-2: rgba(18, 54, 232, .06); --on-ink: #ffffff;
  --shade: #8ea4ff;                            /* by day a darker shadow smeared the digits */
}
@media (max-width: 900px) { :root { --ghost: 240px; } }

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; scrollbar-color: var(--ink) var(--bg); }
:root[data-theme="day"] { color-scheme: light; }
body { margin: 0; color: var(--text); font: 400 15px/1.55 var(--mono); overflow-x: hidden; }   /* running text is regular; leads, labels and strong stay bold */
::selection { background: var(--ink); color: var(--on-ink); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.skip { position: absolute; left: 16px; top: -80px; padding: 8px 16px; background: var(--ink); color: var(--on-ink); z-index: 20; }
.skip:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }   /* read by screen readers, not seen */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
html { scroll-padding-top: 80px; scroll-padding-bottom: 16px; }   /* anchors and keyboard focus land below the sticky header */
.boot header, .boot main, .boot footer { visibility: hidden; }

/* the living background: one WebGL canvas at half resolution, scaled up hard-edged */
#flow { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.no-gl body { background-image: radial-gradient(var(--flow) 1.5px, transparent 1.6px); background-size: 12px 12px; }
canvas[data-sprite] { image-rendering: pixelated; image-rendering: crisp-edges; }   /* drawn at 1x: a 2x screen must not smooth the pixels */

/* the veil between pages, in the same 6px cells as the flow */
#veil { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 30; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; }
.veiled #veil { background: var(--bg); animation: blink 0s 3s forwards; }   /* lets go by itself if the script never runs */

/* header */
body > header { position: sticky; top: 0; z-index: 10; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px dashed var(--ink); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 400 26px/1 var(--pixel); letter-spacing: .04em; color: var(--ink); min-height: 44px; }
.brand canvas { width: 32px; height: 32px; }
.brand small { font: inherit; color: var(--muted); }
header nav, header nav ul { display: flex; gap: 4px; align-items: center; }
header nav ul { list-style: none; margin: 0; padding: 0; }
header nav a, .ghost-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 400 20px/1 var(--pixel); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--muted); background: none; border: 0; cursor: pointer; }
header nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
header nav a:hover, .ghost-btn:hover, #menu[aria-expanded="true"] { color: var(--on-ink); background: var(--ink); }
#menu { display: none; }
@media (max-width: 980px) { header .brand small { display: none; } }   /* six nav items need the room before the links go */
/* Below 860px the links and the theme switch fold into [ menu ], a panel under the header. Without the script they stay hidden there, as before. */
@media (max-width: 860px) {
  .js #menu { display: inline-flex; }
  header nav ul { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 8px 16px; background: var(--bg); border-bottom: 1px dashed var(--ink); }
  #menu[aria-expanded="true"] + ul { display: flex; max-height: calc(100dvh - 62px); overflow-y: auto; overscroll-behavior: contain; }
  header nav ul a, header nav ul .ghost-btn { width: 100%; min-height: 52px; padding: 0 12px; font-size: 24px; }
  header nav li:last-child { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ink); }   /* the theme switch, apart from the links */
}
@media (max-width: 500px) { .bar { gap: 8px; } .ghost-btn { padding: 0 6px; white-space: nowrap; } }   /* keeps [ menu ] on one line on a phone */

/* pixel buttons: hard shadow, pressed in three frames */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; font: 400 24px/1.1 var(--pixel); text-align: center; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--ink); background: var(--bg); border: 2px solid var(--ink); box-shadow: var(--px) var(--px) 0 var(--ink); transition: transform 120ms var(--step), box-shadow 120ms var(--step); cursor: pointer; }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(var(--px), var(--px)); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--ink); color: var(--on-ink); box-shadow: var(--px) var(--px) 0 var(--text); }
.btn-primary:hover { box-shadow: 2px 2px 0 var(--text); }
header nav .btn { min-height: 44px; font-size: 20px; padding: 0 14px; margin-left: 8px; }
@media (max-width: 500px) { .cta > .btn { flex: 1 1 100%; } }   /* on a phone every call to action is a full-width row */
/* the brand, [ menu ] and Contact share one row down to a 320px phone; narrower than that the row may wrap */
@media (max-width: 420px) { header .brand { gap: 8px; font-size: 22px; } header nav .btn { padding: 0 10px; margin-left: 4px; } }
@media (max-width: 359px) { header .brand canvas { display: none; } .bar { flex-wrap: wrap; } }

/* type */
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; color: var(--ink); margin: 0; letter-spacing: .02em; font-kerning: none; font-variant-ligatures: none; text-wrap: balance; }
h1 { font-size: clamp(46px, 7.4vw, 96px); line-height: .88; text-transform: uppercase; margin-bottom: 24px; }
h1 .inv { background: var(--ink); color: var(--on-ink); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero h1 { text-wrap: wrap; }                  /* here the highlight is set on whole lines; balancing would pull "your" onto its line */
h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: .95; text-transform: uppercase; margin-bottom: 16px; }
h3 { font-size: 26px; line-height: 1; text-transform: uppercase; margin-bottom: 8px; }
p { margin: 0 0 16px; }
p, li { text-wrap: pretty; }                     /* no single word left on the last line */
.lead { font-size: 16px; font-weight: 700; color: var(--text); max-width: 60ch; }
.muted { color: var(--muted); }
.u { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@keyframes blink { to { visibility: hidden; } }
/* scramble: the real letter keeps its place in the line and the glyph is painted over it, so a heading never re-wraps */
.sc { position: relative; visibility: hidden; }
.sc::after { content: attr(data-g); visibility: visible; position: absolute; left: 50%; top: .1em; transform: translateX(-50%); font-size: .72em; line-height: 1; }

/* windows: glass panes with a title bar, dashed like a Nous rule */
main { padding-block: 32px 96px; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }   /* one wide thing never widens every window */
.ticker { margin-block: 40px; }
.win { background: var(--glass); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px dashed var(--ink); position: relative; }
.win::before, .win::after, .win-body::before, .win-body::after { content: ""; position: absolute; width: 8px; height: 8px; background: var(--ink); }
.win::before { top: -4px; left: -4px; } .win::after { top: -4px; right: -4px; }
.win-body::before { bottom: -4px; left: -4px; } .win-body::after { bottom: -4px; right: -4px; }
.win-bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px dashed var(--ink); font: 400 20px/1.1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--glass-2); }
.win-bar .meta { color: var(--muted); }
.win-bar a { text-decoration: none; }
.win-bar a:hover { background: var(--ink); color: var(--on-ink); }
.win-body { padding: 40px; }
.head { max-width: 680px; margin-bottom: 36px; }
@media (max-width: 760px) { .win-body { padding: 24px 20px; } .stack { gap: 28px; } .ticker { margin-block: 28px; } }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.hero .win-body { padding-block: 48px; }
.cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.assure { margin: 20px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.assure span { display: inline-block; max-width: 100%; }   /* each promise wraps as one piece, unless the screen is narrower than it */
.stage { position: relative; min-height: 420px; display: grid; grid-template-rows: 1fr auto; }
#ghost-slot { min-height: var(--ghost); cursor: pointer; display: grid; place-items: center; }
#ghost-slot canvas { width: 256px; height: 256px; display: none; }
.no-gl #ghost-slot canvas { display: block; }
.log { margin: 0; padding: 14px 18px; font: 700 13px/1.6 var(--mono); color: var(--ink); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px dashed var(--ink); white-space: pre-wrap; display: grid; }
.log span { grid-area: 1 / 1; min-width: 0; }                /* the hidden copy holds the final size, the typed copy lies on top */
.log-size { visibility: hidden; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .stage { min-height: 0; } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 22px 12px; text-align: center; }
.stat + .stat { border-left: 1px dashed var(--ink); }
.stat b { display: block; font: 400 52px/1 var(--pixel); color: var(--ink); }
.stat span, .facts span { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px dashed var(--ink); }
  .stat:nth-child(n+3) { border-top: 1px dashed var(--ink); }
}
@media (max-width: 359px) { .stats { grid-template-columns: 1fr; } .stat:nth-child(even) { border-left: 0; } .stat + .stat { border-top: 1px dashed var(--ink); } }

/* ticker */
.ticker { overflow: hidden; border-block: 1px dashed var(--ink); background: var(--ink); color: var(--on-ink); font: 400 26px/1 var(--pixel); letter-spacing: .1em; text-transform: uppercase; padding: 10px 0; white-space: nowrap; }
.ticker div { display: inline-block; animation: tick 49s linear infinite; }   /* each half holds the list twice, so the loop has no gap on wide screens */
.ticker span { padding-right: 2.5em; }
@keyframes tick { to { transform: translateX(-50%); } }

/* Glyphs neither font has (▚ █ ↗), drawn on the pixel grid in the text colour, so no system font stands in for them. */
.ticker .sep { display: inline-block; width: 16px; height: 24px; padding: 0; margin-right: 2.5em; vertical-align: -4px;
  background: linear-gradient(currentColor 0 0) 0 0 / 50% 50% no-repeat, linear-gradient(currentColor 0 0) 100% 100% / 50% 50% no-repeat; }
.caret { display: inline-block; width: .6em; height: 1.1em; background: currentColor; }
.log .cur { display: inline-block; width: .6em; height: 1.2em; vertical-align: -.25em; background: currentColor; }
.ext { display: inline-block; flex: none; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h4v1H1zM3 1h2v1H3zM2 2h1v1H2zM4 2h1v2H4zM1 3h1v1H1zM0 4h1v1H0z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h4v1H1zM3 1h2v1H3zM2 2h1v1H2zM4 2h1v2H4zM1 3h1v1H1zM0 4h1v1H0z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.win-bar .ext { width: 10px; height: 10px; margin-left: 8px; }
.spec .ext { width: 10px; height: 10px; margin-left: 6px; }   /* beside 14px text the full arrow outweighs the link; 10px keeps its 5x5 pixels whole */

/* cards */
.grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) {   /* five cards: three on top, two wider below */
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid > * { grid-column: span 2; }
  .grid > :nth-last-child(-n+2) { grid-column: span 3; }
}
.card { border: 1px dashed var(--ink); padding: 22px; background: var(--glass-2); transition: transform 120ms var(--step), box-shadow 120ms var(--step), background 120ms var(--step); }
.card:hover { transform: translate(calc(var(--px) * -1), calc(var(--px) * -1)); box-shadow: var(--px) var(--px) 0 var(--ink); border-style: solid; }
.card p { color: var(--muted); margin: 0; font-size: 15px; line-height: 1.6; }
.card canvas { display: block; margin-bottom: 16px; }
.note { margin: 20px 0 0; padding: 14px 20px; border: 2px solid var(--ink); color: var(--text); background: var(--glass-2); }
.note strong { color: var(--ink); text-transform: uppercase; }

/* the team: a card per person, the portrait printed like everything else */
.team { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.member { display: grid; gap: 18px; align-content: start; }
.who { display: flex; align-items: center; gap: 20px; }
.who > div { min-width: 0; }
.frame { flex: none; padding: 6px; border: 1px dashed var(--ink); background: radial-gradient(var(--flow) 1px, transparent 1.5px) 0 0 / 6px 6px; }
.card .frame canvas { width: 96px; height: 96px; margin: 0; }   /* the bitmap's own size: a scaled canvas would smear the pixels */
.member .kicker { margin: 0 0 6px; font-size: 18px; overflow-wrap: anywhere; }
.member h3 { font-size: 34px; margin: 0; overflow-wrap: anywhere; }
.member h3 small { font-size: 20px; color: var(--muted); text-transform: none; letter-spacing: .04em; }
.member .where { margin-top: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.now:not(:empty)::before { content: " · "; }   /* the local time arrives with the script */
.spec { margin: 0; display: grid; gap: 6px; font-size: 14px; }
.spec div { display: flex; align-items: baseline; gap: 12px; }
.spec dt { flex: none; width: 88px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.spec dd { margin: 0; }
.member .chips { margin: 0; }
@media (max-width: 500px) { .who { flex-direction: column; align-items: flex-start; gap: 16px; } }   /* on a phone the name gets the card's full width */

/* reviews: the heading beside the letters; each one is signed like a message, with the ghost of whoever it was written to */
.voices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 48px; align-items: start; }
.voices .head { margin: 0; }
.review { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.review canvas { margin: 0; }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; font: 400 clamp(28px, 3vw, 38px)/1.05 var(--pixel); letter-spacing: .02em; color: var(--text); }
.review figcaption { padding-top: 20px; border-top: 1px dashed var(--ink); }
.review .spec div { align-items: center; }   /* the ghost beside the name would pull a baseline label down */
.review .to { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.review .to small { font-size: 14px; color: var(--muted); }
.review .spec dd { min-width: 0; }
@media (max-width: 380px) { .review .spec div { flex-direction: column; align-items: flex-start; gap: 2px; } }
.review a { overflow-wrap: anywhere; }
.review a .ext { margin-left: 8px; vertical-align: -1px; }   /* inline, so the arrow follows the link when it wraps */
@media (max-width: 960px) { .voices { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.steps li { padding-top: 18px; position: relative; }
.steps li::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--px); background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 8px); opacity: .5; }
.steps li::after { content: ""; position: absolute; inset: 0 auto auto 0; height: var(--px); width: 0; background: var(--ink); }
.in .steps li::after { animation: fill 600ms steps(12, end) forwards; animation-delay: calc(var(--i) * 450ms); }
@keyframes fill { to { width: 100%; } }
.num { font: 400 40px/1 var(--pixel); color: var(--ink); display: block; margin-bottom: 8px; }
.steps p { color: var(--muted); margin: 0; font-size: 15px; line-height: 1.6; }
.steps.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); row-gap: 32px; }   /* six rules: three and three */
.steps .where { margin-top: 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }

.rate { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.price { font: 400 clamp(120px, 17vw, 200px)/.8 var(--pixel); color: var(--ink); margin: 0 0 20px; text-shadow: 6px 6px 0 var(--shade); }
.price small { font-size: .2em; color: var(--muted); letter-spacing: .06em; text-shadow: none; }
.checks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; }
.checks li::before { content: "[x]"; content: "[x]" / ""; font-weight: 700; color: var(--ink); flex: none; }
@media (max-width: 760px) { .rate { grid-template-columns: 1fr; } }

/* packages: three formats over the same hourly rate. The badge sits on the edge, so the three headings stay level. */
.plans { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 24px 24px; }
.plan .badge { position: absolute; top: -14px; left: 20px; margin: 0; }
.plan.pick { border-style: solid; box-shadow: inset 0 0 0 1px var(--ink); }   /* drawn inside, so its contents sit level with the other two */
.plan.pick:hover { box-shadow: inset 0 0 0 1px var(--ink), var(--px) var(--px) 0 var(--ink); }
.plan h3 { font-size: 32px; }
.plan .cost { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin: 24px 0 10px; }
.cost b { font: 400 clamp(52px, 5vw, 68px)/.85 var(--pixel); color: var(--ink); text-shadow: var(--px) var(--px) 0 var(--shade); }
.cost small { font: 400 22px/1 var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plan .unit { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.plan .checks { margin: 22px 0 28px; gap: 10px; font-size: 14px; }
.plan .btn { margin-top: auto; }                  /* the buttons line up at the bottom */
/* Side by side, the cards share their rows: a short description in one card does not lift its price above the others. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 961px) { .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; } .plan .checks { align-self: start; } .plan .btn { align-self: end; } }
}
.terms { margin: 28px 0 0; font-size: 14px; font-weight: 700; color: var(--muted); }
@media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* portfolio cases: the parts one under another. Only the story and the numbers beside it share a row, in a grid of
   their own, so the numbers stay in view while the story is read and stop where it ends. On a phone it is one column. */
.case { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.case > * { min-width: 0; margin: 0; }
.case-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px 32px; align-items: start; }
.case-cols > * { min-width: 0; }
.case-intro > :last-child { margin-bottom: 0; }
.case-head .lead, .case-head .gist { margin-bottom: 14px; }
.gist { max-width: 60ch; }
.case-tags, .by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.case-tags .badge { margin: 0; }
.by { margin: 0; }
.by a { color: var(--ink); text-underline-offset: 4px; text-transform: none; }   /* "Built by" stays in capitals, a nick keeps its own case */
.case .checks { margin: 0; font-size: 14px; }
.case strong { color: var(--ink); }
.case .cta { margin-top: 0; }
.case h2 { font-size: clamp(34px, 3.4vw, 44px); }
@media (max-width: 760px) { .case h2 { font-size: clamp(26px, 7.2vw, 34px); } }   /* a phone fits the case title in two or three lines */
.case .cta + p { margin: 20px 0 0; }
.kicker { font: 400 20px/1.1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 28px 0 12px; }
.kicker:first-child { margin-top: 0; }
.small { font-size: 14px; line-height: 1.6; }
.facts { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.facts b { display: block; font: 400 40px/1 var(--pixel); color: var(--ink); margin-bottom: 4px; }
@media (min-width: 761px) { .case-aside { position: sticky; top: 84px; } }   /* sticky is bounded by the whole grid, so .case-cols holds only these two */
@media (max-width: 760px) { .case-cols { grid-template-columns: minmax(0, 1fr); } }
.cols { display: grid; gap: 28px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.case-more .cols { padding: 4px 8px 28px; }
.case-more .shot { padding: 0 8px 28px; }

/* Every picture is printed in the page's two colours (.duo): the picture goes grey, the ink is laid over the light and
   the ground over the dark. A dark original (.dark) is turned the other way round; a photo (.photo) is never turned
   into a negative. Pointing at a picture, or focusing its link, brings back its colours; the link opens the original. */
.duo { --duo: grayscale(1) invert(1) contrast(1.1); display: block; position: relative; isolation: isolate; line-height: 0; background: #000; }   /* until the picture loads, the overlays print the ground, not a block of ink */
.duo.dark, .duo.photo { --duo: grayscale(1) contrast(1.1); }
:root[data-theme="day"] .duo { --duo: grayscale(1) contrast(1.05); background: #fff; }
:root[data-theme="day"] .duo.dark { --duo: grayscale(1) invert(1) contrast(1.05); }
.duo img { display: block; width: 100%; height: auto; filter: var(--duo); transition: filter 300ms ease; }
.duo::before, .duo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity 300ms ease; }   /* the filtered picture paints on the positioned layer too: without z-index ::before would go under it */
.duo::before { background: var(--ink); mix-blend-mode: multiply; }
.duo::after { background: var(--bg); mix-blend-mode: lighten; }
:root[data-theme="day"] .duo::before { mix-blend-mode: screen; }
:root[data-theme="day"] .duo::after { mix-blend-mode: darken; }
.duo:is(:hover, :focus-visible) img, .card:is(:hover, :focus-visible) .duo img { filter: none; }
.duo:is(:hover, :focus-visible)::before, .duo:is(:hover, :focus-visible)::after,
.card:is(:hover, :focus-visible) .duo::before, .card:is(:hover, :focus-visible) .duo::after { opacity: 0; }
.shot, .diagram { margin: 0; }
.shot a { display: block; border: 1px dashed var(--ink); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* at most two side by side */
.shots { display: grid; gap: 28px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, calc(50% - 10px))), 1fr)); }

/* a diagram is a list: a box per step and a pixel arrow in the gap before it. Stores are drawn solid.
   Narrower than 960px the steps go down the page, each name beside its note. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; }
.flow li { position: relative; padding: 12px; border: 1px dashed var(--ink); background: var(--glass-2); }
.flow li.db { border: 2px solid var(--ink); }
.flow b { display: block; margin-bottom: 6px; font: 400 20px/1 var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.flow span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }
.flow li + li::before { content: ""; position: absolute; top: 50%; left: -22px; width: 15px; height: 15px; margin-top: -7px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1H2zM3 1h1v1H3zM0 2h5v1H0zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1H2zM3 1h1v1H3zM0 2h5v1H0zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
@media (max-width: 960px) {
  .flow { grid-auto-flow: row; gap: 22px; }
  .flow li { display: grid; grid-template-columns: minmax(0, 11ch) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; }
  .flow b { margin: 0; }
  .flow li + li::before { top: -19px; left: 20px; margin: 0; transform: rotate(90deg); }
}
@media (max-width: 420px) { .flow li { grid-template-columns: minmax(0, 1fr); } }

/* bars: a label and its value, the bar under them; they fill in hard steps once the pane is open */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; font-size: 13px; font-weight: 700; }
.bars b { font: 400 24px/1 var(--pixel); color: var(--ink); }
.bars li::after { content: ""; grid-column: 1 / -1; width: calc(var(--v) * 100%); height: 12px; background: var(--ink); }
.in .bars li::after { animation: bar 640ms steps(8, end) both; animation-delay: calc(var(--i, 0) * 160ms + 300ms); }
@keyframes bar { from { width: 0; } }

/* the portfolio's contents: a card per case, as many as there are */
.win-body > .stats { margin-bottom: 36px; border: 1px dashed var(--ink); }
.cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cases .card { display: flex; flex-direction: column; gap: 10px; height: 100%; text-decoration: none; }
.cases .cover { display: block; margin-bottom: 6px; border: 1px dashed var(--ink); line-height: 0; }
.cases img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 0 0; }
.cases .case-tags, .cases h3 { margin: 0; }
.cases .kicker { margin: auto 0 0; padding-top: 4px; color: var(--ink); }
.cases .cover.log { display: block; aspect-ratio: 16 / 9; overflow: hidden; padding: 12px 14px; font-size: 11px; line-height: 1.5; white-space: pre; }   /* a build with no screen shows its log */

/* smaller builds: a card each, with a log or a picture in place of the long story */
.minis { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.mini { display: flex; flex-direction: column; gap: 16px; }
.mini > * { margin: 0; }
.mini h3 { font-size: 34px; }
.mini .cta { margin-top: auto; padding-top: 4px; }
.mini .log { font-size: 12px; }

/* a client's words, signed */
.quote { margin: 0; padding-top: 18px; border-top: 1px dashed var(--ink); }
.quote p { margin: 0 0 10px; font: 400 26px/1.05 var(--pixel); letter-spacing: .02em; color: var(--text); }
.quote footer { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 8px; font: 400 18px/1 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink); background: var(--ink); padding: 4px 8px; margin-bottom: 16px; }
.badge.plain::before { content: none; }
.badge::before { content: ""; width: 8px; height: 8px; background: currentColor; animation: blink 1.2s steps(2, start) infinite; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; }
.chips li { font-size: 13px; font-weight: 700; padding: 6px 10px; border: 1px dashed var(--ink); color: var(--text); }
.chips li:hover { background: var(--ink); color: var(--on-ink); }

/* the door to the portfolio page */
.door { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.door > * { min-width: 0; }
.door .cta { margin-top: 68px; }                /* room for the ghost on the button */
.btn-big { position: relative; min-height: 64px; padding: 0 28px; font-size: clamp(22px, 6.8vw, 34px); white-space: nowrap; }
.btn-big canvas { position: absolute; right: 26px; bottom: calc(100% + 2px); width: 48px; height: 48px; }
.caret { animation: blink 1s steps(2, start) infinite; }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.file { display: grid; grid-template-columns: 44px 1fr; gap: 18px; height: 100%; text-decoration: none; }
.file canvas { margin: 0; }
.file .kicker { display: block; margin: 12px 0 0; color: var(--ink); }
.shelf-more a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--ink); }
.card .see { margin-top: 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }   /* each service points at the work that shows it */
.see a { color: var(--ink); text-underline-offset: 4px; }
.see a, .by a, .win-bar .meta a { display: inline-block; padding-block: 10px; margin-block: -10px; }   /* a taller target, the same line */
@media (max-width: 960px) { .door { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .btn-big { padding: 0 20px; } }
@media (max-width: 359px) { .btn { font-size: 20px; padding: 0 14px; } .direct a { font-size: 14px; } }   /* the narrowest phones: buttons and addresses keep one line */
@media (max-width: 359px) { .file { grid-template-columns: 1fr; gap: 12px; } }   /* the icon goes above the text */

.contact { text-align: center; }
.contact .head { margin-inline: auto; }
.contact .cta { justify-content: center; }
.mail { margin-top: 24px; color: var(--muted); }

/* FAQ: the heading stays beside the questions */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 48px; align-items: start; }
.faq .head { margin: 0; }
.faq .head .muted { margin: 0; }
@media (min-width: 961px) { .faq .head { position: sticky; top: 104px; } }
@media (max-width: 960px) { .faq { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.qa details, .case-more { border-bottom: 1px dashed var(--ink); }
.qa details:first-child, .case-more { border-top: 1px dashed var(--ink); }
.qa summary, .case-more summary { display: flex; align-items: baseline; gap: 14px; padding: 16px 8px; list-style: none; cursor: pointer; font: 400 24px/1.1 var(--pixel); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.qa summary::-webkit-details-marker, .case-more summary::-webkit-details-marker { display: none; }
.qa summary::before, .case-more summary::before { content: "[+]"; content: "[+]" / ""; flex: none; font: 700 15px/1 var(--mono); }
.qa details[open] summary::before, .case-more[open] summary::before { content: "[-]"; content: "[-]" / ""; }
.qa summary:hover, .case-more summary:hover { background: var(--ink); color: var(--on-ink); }
.qa p { margin: 0; padding: 0 8px 20px calc(8px + 3ch + 14px); color: var(--muted); }   /* under the question, past its marker */

/* contact: the brief on the right, other ways and what happens next on the left. On a phone the form comes right after the heading. */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr; grid-template-areas: "head form" "more form"; gap: 36px 48px; align-items: start; }
.desk-head { grid-area: head; } .desk-more { grid-area: more; } .brief { grid-area: form; }
.desk-head .lead { margin: 0; }
@media (max-width: 960px) { .desk { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "form" "more"; gap: 32px; } }
.direct { list-style: none; margin: 0; padding: 0; }
.direct li { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.direct li > span:first-child { flex: none; width: 56px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.direct li > span:last-child { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; min-width: 0; }   /* [ copy ] wraps under the address, not under the label */
.direct a { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; color: var(--ink); }
.direct .ghost-btn { min-height: 44px; padding: 0 8px; font-size: 18px; }
@media (max-width: 420px) { .direct li { flex-wrap: wrap; row-gap: 0; } .direct li > span:first-child { width: 100%; } }   /* the label goes above, the address keeps its line */
.next { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.next li { display: flex; align-items: baseline; gap: 14px; }
.next .num { flex: none; width: 1.2em; margin: 0; font-size: 26px; }   /* the digits differ in width; the text after them must not */
.next p { margin: 0; color: var(--muted); }
.open-now { display: flex; align-items: center; gap: 12px; margin: 28px 0 0; font-weight: 700; }
.open-now .badge { flex: none; margin: 0; }

/* the brief. There is no red in a two-colour print: a field that needs work gets a solid frame and a [!] line. */
.brief { display: grid; gap: 20px; padding: 28px; border: 2px solid var(--ink); background: var(--glass-2); box-shadow: var(--px) var(--px) 0 var(--ink); }
.brief .kicker { margin: 0; color: var(--ink); }
.brief .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: grid; gap: 8px; align-content: start; }
.field label, .picks legend { font: 400 20px/1.1 var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.field label span { color: var(--muted); }
.field input, .field textarea { width: 100%; min-height: 48px; margin: 0; padding: 11px 12px; font: 400 16px/1.5 var(--mono); color: var(--text); background: var(--bg); border: 1px dashed var(--ink); border-radius: 0; }
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-style: solid; }
.field ::placeholder { color: var(--muted); opacity: .75; }
.field [aria-invalid="true"] { border: 2px solid var(--ink); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: 0 0 0 40px var(--bg) inset; }   /* the browser's tint, painted over */
.err { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.err:empty { display: none; }
.err::before { content: "[!] "; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.picks legend { padding: 0; margin-bottom: 10px; }
.picks label, .tick { position: relative; }
.picks input, .tick input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }   /* still the real control: keys, forms and screen readers see it */
.picks span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font-size: 14px; font-weight: 700; border: 1px dashed var(--ink); cursor: pointer; }
.picks span:hover { border-style: solid; }
.picks input:checked + span { background: var(--ink); color: var(--on-ink); border-style: solid; }
.picks input:focus-visible + span, .tick input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.tick { display: block; font-size: 14px; cursor: pointer; }
.tick span { display: flex; gap: 12px; }
.tick span::before { content: "[ ]"; flex: none; font-weight: 700; color: var(--ink); white-space: pre; }
.tick input:checked + span::before { content: "[x]"; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* for bots only */
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.send p { margin: 0; }
.btn:disabled { cursor: progress; opacity: .7; transform: none; }
.status { font-size: 14px; font-weight: 700; }
.status:not(:empty) { padding: 14px 16px; border: 1px dashed var(--ink); }
.status.ok { border: 2px solid var(--ink); }
.status p { margin: 0; }
.status.ok p::before { content: "[x] "; color: var(--ink); }
.status.bad p::before { content: "[!] "; color: var(--ink); }
.status .cta { margin-top: 14px; gap: 12px; }
.status .btn { min-height: 40px; padding: 0 14px; font-size: 20px; }
@media (max-width: 560px) { .brief { padding: 20px; } .brief .row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 500px) { .send .btn { flex: 1 1 100%; } }

/* the privacy page: plain reading */
.legal h2 { font-size: clamp(28px, 3.2vw, 36px); margin: 40px 0 12px; }
.legal p, .legal li { max-width: 70ch; }
.legal strong { color: var(--ink); }
.legal code { font: inherit; font-weight: 700; color: var(--ink); white-space: nowrap; }
.dash { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.dash li { display: flex; gap: 12px; }
.dash li::before { content: "-"; content: "-" / ""; flex: none; font-weight: 700; color: var(--ink); }

/* footer: who we are and the ways in, then the small print. Solid ground, and the page dissolves into it through three rows of dither. */
body > footer { position: relative; margin-top: 24px; background: var(--bg); color: var(--muted); }
body > footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; pointer-events: none;
  background: conic-gradient(from 90deg at 4px 4px, var(--bg) 25%, transparent 0) 0 0 / 8px 8px repeat-x,
              repeating-conic-gradient(var(--bg) 0 25%, transparent 0 50%) 0 8px / 8px 8px repeat-x,
              conic-gradient(from 90deg at 4px 4px, transparent 25%, var(--bg) 0) 0 16px / 8px 8px repeat-x; }
.foot { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 40px 64px; padding-block: 40px 48px; }
.foot-brand .brand { width: fit-content; margin-bottom: 16px; }
.foot-brand p { margin: 0 0 16px; max-width: 46ch; font-size: 14px; line-height: 1.6; }
.foot-clock { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.foot .kicker { margin: 4px 0 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; }
.foot li a { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; color: var(--text); text-decoration: none; }
.foot li a:hover, .foot-bar a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.foot a[aria-current="page"], .foot-bar a[aria-current="page"] { color: var(--ink); }
/* the name once more, as big as the column and printed in halftone dots */
body > footer .wrap { container-type: inline-size; }
.foot-mark { margin: 0 0 8px; font: 400 min(18vw, 284px)/.8 var(--pixel); font-size: calc(100cqw / 3.86); letter-spacing: .02em; white-space: nowrap; color: var(--ink); user-select: none; }   /* NIGHTLOOM is 3.75-3.82em wide, depending on how the glyphs round */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .foot-mark { color: transparent; background: radial-gradient(circle, var(--ink) 1.2px, transparent 1.6px) 0 0 / 4px 4px; -webkit-background-clip: text; background-clip: text; }
}
.foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; padding-block: 18px 24px; border-top: 1px dashed var(--ink); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.foot-bar a { color: var(--muted); text-decoration: none; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.to-top { display: inline-flex; align-items: center; gap: 8px; }
.up { display: inline-block; width: 10px; height: 10px; background: currentColor;   /* ↑ on the pixel grid: neither font has it */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v5H2zM1 1h1v1H1zM3 1h1v1H3zM0 2h1v1H0zM4 2h1v1H4z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v5H2zM1 1h1v1H1zM3 1h1v1H3zM0 2h1v1H0zM4 2h1v1H4z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
@media (max-width: 760px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 500px) { .foot { grid-template-columns: minmax(0, 1fr); } .foot nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-bar { flex-direction: column; align-items: flex-start; gap: 10px; } }
/* the background's seed lives here, like a caption under a print */
[data-reroll] { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); background: none; border: 0; padding: 4px; margin-left: 4px; cursor: pointer; }
[data-reroll]:hover { background: var(--ink); color: var(--on-ink); }
html:not(.js) .seed, .no-gl .seed { display: none; }   /* no script or no WebGL: there is no seed to show */

/* Entrances are pixel wipes: a pane opens in eight hard frames, never a soft fade. */
.js .reveal { clip-path: inset(0 0 100% 0); }
.js .reveal.in { animation: wipe 560ms steps(8, end) forwards; }
.js .reveal.in.now { animation: none; clip-path: none; }   /* already shown before the script started */
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.in { clip-path: none; animation: none; }
  .ticker div, .badge::before, .caret { animation: none; }
  .in .steps li::after { animation: none; width: 100%; }
  .in .bars li::after { animation: none; }
  .btn, .card, .duo img, .duo::before, .duo::after { transition: none; }
}

/* short lines break evenly instead of leaving one word behind */
summary, .win-bar span, .facts span, .stat span, .kicker { text-wrap: balance; }
@media (max-width: 500px) { .foot li a, .foot-bar a, [data-reroll] { display: inline-flex; align-items: center; min-height: 44px; } }

/* print and PDF: every pane shown, in the day colours on white */
@media print {
  :root, :root[data-theme] { --bg: #ffffff; --ink: #1236e8; --flow: #b4c4ff; --text: #0a1a52; --muted: #3c4f8a; --glass: transparent; --glass-2: transparent; --on-ink: #ffffff; --shade: #8ea4ff; color-scheme: light; }
  html { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .js .reveal { clip-path: none !important; animation: none !important; }
  #flow, #veil, .ticker { display: none; }
}