/* gecko-it.com. "Modern IT respecting the past": the logo's charcoal against pale paper, with a terminal running through it. Glyphs move; the
   words stay plain English. Loaded after WordPress's block styles. */
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-arrows.woff2") format("woff2"); font-weight: 400 700; unicode-range: U+2190-2193; font-display: swap; }

:root {
  --ink: #131816; --ink-2: #1d2421; --line-d: #2c3531; --on-ink: #d6dedb; --mute-d: #8f9a95;
  --paper: #f3f3ec; --line-p: #d6d7cd; --on-paper: #1d2421; --body-p: #3d4744; --mute-p: #5d6763;
  --green: #52b02e; --lime: #93e06f; --green-ink: #2a6f10; --amber: #ffd166; --red: #e0695a;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px); --space: clamp(56px, 8vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--on-ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, canvas { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--sans); text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 4.8vw, 4rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 700; color: #fff; }
h2 { font-size: clamp(1.8rem, 3.8vw, 3rem); line-height: 1.07; letter-spacing: -.03em; font-weight: 700; max-width: 21em; }
h3 { font-size: 1.14rem; line-height: 1.3; letter-spacing: -.012em; font-weight: 700; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap > * + *, .hero-copy > * + *, .how > div > * + *, .contact > div > * + *, .work-row > div > * + * { margin-top: 18px; }
.wp-block-list { padding-left: 1.2em; margin: 0; }
.wp-block-list li + li { margin-top: 8px; }
.wp-block-list li::marker { content: "> "; font-family: var(--mono); color: var(--green); }

/* Bands. Plain is paper; dark is charcoal; green closes a page. */
.band { padding-block: var(--space); background: var(--paper); color: var(--body-p); }
.band h2, .band h3 { color: var(--on-paper); }
.band-dark, .band-ink { background: var(--ink); color: var(--on-ink); }
.band-dark h2, .band-ink h2, .band-dark h3, .band-ink h3 { color: #fff; }
.band-green { background: var(--green); color: #0d1508; }
.band-green h2 { color: #0d1508; max-width: 18em; }

/* The small line above a heading, as a command. */
.label { font: 500 .84rem/1.4 var(--mono); color: var(--green-ink); text-transform: lowercase; }
.label::before { content: "$ "; opacity: .55; }
.band-dark .label, .band-ink .label, .hero .label, .hero-case .label { color: var(--lime); }
.lead { font-size: clamp(1.06rem, 1.6vw, 1.24rem); line-height: 1.5; max-width: 36em; }
.small { font-size: .88rem; }
.more { font: 500 .88rem var(--mono); text-decoration: none; color: var(--green-ink); }
.more::after { content: " →"; }
.more:hover { background: var(--green-ink); color: #fff; }
.band-dark .more, .band-ink .more, .hero-case .more { color: var(--lime); }
.band-dark .more:hover, .band-ink .more:hover { background: var(--lime); color: var(--ink); }
.hl { font: 500 .92em var(--mono); letter-spacing: -.06em; color: var(--ink); background: var(--lime); padding: 0 .12em; text-shadow: none; }

/* Buttons: WordPress's button block */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px !important; }
.wp-block-button__link, .send { display: inline-block; background: var(--lime); color: var(--ink); border: 2px solid var(--lime); border-radius: 0; padding: 12px 16px; font: 700 .92rem/1.3 var(--mono); text-decoration: none; cursor: pointer; transition: background .14s ease, color .14s ease, border-color .14s ease; }
.wp-block-button__link:hover, .send:hover { background: #fff; border-color: #fff; color: var(--ink); }
.is-style-outline .wp-block-button__link { background: transparent; color: var(--lime); }
.is-style-outline .wp-block-button__link:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.band:not(.band-dark):not(.band-ink):not(.band-green):not(.hero-case) .wp-block-button__link { background: var(--ink); border-color: var(--ink); color: #fff; }
.band:not(.band-dark):not(.band-ink):not(.band-green):not(.hero-case) .wp-block-button__link:hover { background: var(--green-ink); border-color: var(--green-ink); }
.band:not(.band-dark):not(.band-ink):not(.band-green):not(.hero-case) .is-style-outline .wp-block-button__link { background: transparent; color: var(--ink); }
.band:not(.band-dark):not(.band-ink):not(.band-green):not(.hero-case) .is-style-outline .wp-block-button__link:hover { background: var(--ink); color: #fff; }
.band-green .wp-block-button__link { background: #0d1508; border-color: #0d1508; color: #fff; }
.band-green .wp-block-button__link:hover { background: #fff; border-color: #fff; color: #0d1508; }
.band-green .is-style-outline .wp-block-button__link { background: transparent; color: #0d1508; }
.band-green .is-style-outline .wp-block-button__link:hover { background: #0d1508; color: #fff; border-color: #0d1508; }

/* Header. WordPress wraps a template part in its own box, which would stop the header sticking, so that box steps aside. */
.wp-block-template-part:has(.site-header) { display: contents; }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--ink); border-bottom: 1px solid var(--line-d); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
.site-header .bar { max-width: 1240px; margin-inline: auto; padding: 12px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { font: 700 .92rem var(--mono); color: #fff; text-decoration: none; white-space: nowrap; }
.brand b { color: var(--lime); font-weight: 700; }
.site-nav { display: flex; align-items: center; gap: 16px; font: 400 .82rem var(--mono); text-transform: lowercase; }
.site-nav a { color: var(--on-ink); text-decoration: none; white-space: nowrap; }
.site-nav a::before { content: "[ "; color: var(--mute-d); }
.site-nav a::after { content: " ]"; color: var(--mute-d); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); background: var(--lime); }
.site-nav a:hover::before, .site-nav a:hover::after, .site-nav a[aria-current]::before, .site-nav a[aria-current]::after { color: var(--ink); }
.site-nav .go { color: var(--lime); }
.menu-btn { display: none; background: none; border: 0; padding: 4px; font: 400 .86rem var(--mono); color: var(--lime); cursor: pointer; }

/* Heroes */
.hero, .hero-case { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--on-ink); }
.ascii-field { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: -1; pointer-events: none; }
.hero-grid { display: grid; align-content: center; min-height: clamp(420px, 60vh, 560px); padding-block: 44px; }
.gecko-roam { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 15; pointer-events: none; }
.hero-copy { max-width: 700px; }
.hero h1, .hero-case h1 { text-shadow: 0 0 22px var(--ink), 0 0 6px var(--ink); }
.hero .lead, .hero-case .lead, .hero .typed { background: color-mix(in srgb, var(--ink) 80%, transparent); }
.typed { font: 500 clamp(.92rem, 1.5vw, 1.06rem) var(--mono); color: var(--lime); min-height: 1.6em; width: fit-content; padding-right: 6px; }
.typed::before { content: "$ replaces "; color: var(--mute-d); }
.caret { display: inline-block; width: .62em; height: 1.05em; margin-left: 2px; vertical-align: -.16em; background: var(--lime); animation: gecko-blink 1.05s steps(2) infinite; }
@keyframes gecko-blink { 50% { opacity: 0; } }
.hero-case { padding-block: clamp(48px, 7vw, 84px); }
.hero-case h1 { max-width: 15em; font-size: clamp(2.2rem, 5vw, 3.8rem); }
.crumb { font: 400 .8rem var(--mono); color: var(--mute-d); text-transform: lowercase; }
.crumb a { color: var(--lime); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--line-d); max-width: 980px; background: color-mix(in srgb, var(--ink) 80%, transparent); }
.facts dt { font: 400 .76rem var(--mono); color: var(--mute-d); text-transform: lowercase; }
.facts dd { margin: 4px 0 0; color: #fff; font-weight: 500; line-height: 1.35; }

/* The flow: arrows carrying work through a business */
.flow-canvas { display: block; width: 100%; margin-top: 34px !important; }
.cap { font: 400 .74rem/1.5 var(--mono); color: var(--mute-p); margin-top: 10px !important; }

/* Grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; margin-top: 34px !important; }
.card { padding-block: 20px; border-top: 1px solid var(--line-p); }
.card p { margin-top: 6px; }
.band-dark .card, .band-ink .card { border-color: var(--line-d); }
.pains { margin-top: 40px !important; gap: 0 36px; }
.pain { padding-block: 16px 22px; border-top: 2px solid var(--on-paper); }
.pain p { margin-top: 6px; }
.how { align-items: start; }

/* Project rows */
.rows { margin-top: 34px !important; border-top: 1px solid var(--line-d); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) auto; gap: 8px 32px; align-items: center; padding-block: 22px; border-bottom: 1px solid var(--line-d); text-decoration: none; color: var(--on-ink); transition: background .14s ease; }
.row:hover { background: var(--ink-2); }
.live { font: 400 .84rem/1.5 var(--mono); color: var(--lime); white-space: pre; overflow: hidden; min-height: 3em; }
.row b { display: block; color: #fff; font: 700 1.28rem/1.25 var(--sans); letter-spacing: -.02em; }
.row small { display: block; font: 400 .76rem var(--mono); color: var(--mute-d); margin-bottom: 4px; }
.row span.txt { display: block; margin-top: 5px; font-size: .98rem; line-height: 1.5; }
.row .more { color: var(--lime); white-space: nowrap; }
.row:hover .more { color: var(--ink); background: var(--lime); }
.work-list { display: grid; gap: clamp(44px, 6vw, 80px); }
.work-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.work-row:nth-child(even) > :first-child { order: 2; }

/* Boot log */
.log { list-style: none; margin: 0; background: var(--ink); color: var(--on-ink); padding: 20px 22px; font: 400 .88rem/1.65 var(--mono); }
.log li { display: grid; grid-template-columns: 62px 56px minmax(0, 1fr); gap: 4px; padding-block: 3px; transition: opacity .2s ease; }
.log .ok { color: var(--lime); }
.log .run { color: var(--amber); }
.log .yr { color: var(--mute-d); }

/* Steps and promises */
.steps, .promise { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; padding-block: 15px; border-top: 1px solid var(--line-p); }
.steps li::before { content: counter(s) "."; grid-row: span 2; font: 500 .95rem var(--mono); color: var(--green-ink); padding-top: 2px; }
.steps b, .promise b { font-weight: 700; color: var(--on-paper); }
.steps span, .promise span { display: block; }
.band-dark .promise b { color: #fff; }
.promise li { padding-block: 14px; border-top: 1px solid var(--line-d); }
.links-3 { list-style: none; margin: 34px 0 0 !important; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); }
.links-3 a { display: block; height: 100%; background: var(--ink); padding: 20px; text-decoration: none; color: var(--on-ink); transition: background .14s ease, color .14s ease; }
.links-3 b { display: block; color: #fff; font: 500 .96rem var(--mono); margin-bottom: 6px; }
.links-3 a:hover { background: var(--lime); color: var(--ink); }
.links-3 a:hover b { color: var(--ink); }

/* Quotes */
.quote { border-top: 2px solid var(--on-paper); padding-top: 16px; }
.quote-text { color: var(--on-paper); font-size: 1.08rem; line-height: 1.5; }
.quote-who { margin-top: 12px; font-size: .92rem; color: var(--mute-p); }
.quote-who b { color: var(--on-paper); }
.wrap > .grid-2 { margin-top: 28px; }
.band-dark .quote { border-color: var(--line-d); }
.band-dark .quote-text, .band-dark .quote-who b { color: #fff; }
.band-dark .quote-who { color: var(--mute-d); }

/* Drawn product screens: terminal windows with made-up data */
.mock { margin: 0; background: var(--ink-2); border: 1px solid var(--line-d); overflow: hidden; font-size: .86rem; color: var(--on-ink); }
.mock figcaption { padding: 8px 14px; font: 400 .72rem var(--mono); color: var(--mute-d); border-top: 1px solid var(--line-d); }
.mock-bar { display: flex; align-items: center; gap: 5px; padding: 9px 14px; background: var(--ink); color: #fff; border-bottom: 1px solid var(--line-d); }
.mock-bar span { display: none; }
.mock-bar b { font: 500 .8rem var(--mono); text-transform: lowercase; }
.mock-bar b::before { content: "$ "; color: var(--lime); }
.mock-scroll { overflow-x: auto; }
.mock table { width: 100%; border-collapse: collapse; }
.mock th { font: 400 .7rem var(--mono); color: var(--mute-d); text-align: left; padding: 10px; border-bottom: 1px solid var(--line-d); white-space: nowrap; text-transform: lowercase; }
.mock td { padding: 12px 10px; border-bottom: 1px solid var(--line-d); white-space: nowrap; }
.mock tr:last-child td { border-bottom: 0; }
.mock th:first-child, .mock td:first-child { padding-left: 14px; }
.mock .mono { font: 500 .78rem var(--mono); color: var(--lime); }
.mock .st { text-align: center; padding-inline: 5px; }
.mock .st i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid #47524d; color: var(--ink); vertical-align: middle; }
.mock .st i.on { background: var(--lime); border-color: var(--lime); }
.mock .st i.next { border-color: var(--lime); }
.mock .pill { font: 500 .7rem var(--mono); padding: 1px 6px; }
.mock .pill.ok { background: var(--lime); color: var(--ink); }
.mock .pill.wait { background: var(--amber); color: var(--ink); }
.floor-list { display: grid; gap: 8px; padding: 12px; }
.floor-list > div { display: grid; grid-template-columns: 1fr auto; gap: 1px 12px; align-items: center; border: 1px solid var(--line-d); background: var(--ink); padding: 10px 12px; }
.floor-list b { grid-column: 1; color: #fff; }
.floor-list .mono { grid-column: 1; }
.floor-list small { grid-column: 1; color: var(--mute-d); }
.floor-list em { grid-column: 2; grid-row: 1 / span 3; font: 700 .84rem var(--mono); background: var(--lime); color: var(--ink); padding: 12px 14px; }
.mock-phone { display: flex; flex-direction: column; }
.phone { width: min(300px, calc(100% - 28px)); margin: 16px auto; padding: 14px; background: var(--ink); border: 1px solid #47524d; display: grid; gap: 7px; flex: 1; }
.phone-top b { display: block; color: #fff; }
.phone-top small { color: var(--mute-d); }
.rate { display: flex; justify-content: space-between; align-items: center; padding-block: 5px; border-top: 1px solid var(--line-d); }
.rate i { font: 500 .7rem var(--mono); padding: 1px 6px; }
.rate .good { background: var(--lime); color: var(--ink); }
.rate .act { background: var(--amber); color: var(--ink); }
.carry { font-size: .76rem; line-height: 1.35; border: 1px solid var(--amber); color: var(--amber); padding: 7px 9px; }
.phone em { font: 700 .84rem var(--mono); text-align: center; background: var(--lime); color: var(--ink); padding: 9px; }
.mock-next ol { list-style: none; margin: 0; padding: 0; }
.mock-next li { display: grid; grid-template-columns: 10px 1fr auto; gap: 11px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line-d); }
.mock-next li:last-child { border-bottom: 0; }
.mock-next i { width: 9px; height: 9px; }
.mock-next i.red { background: var(--red); }
.mock-next i.amber { background: var(--amber); }
.mock-next li b { display: block; color: #fff; font-weight: 500; line-height: 1.3; }
.mock-next small { color: var(--mute-d); }
.mock-next em { font: 500 .74rem var(--mono); color: var(--lime); border: 1px solid var(--line-d); padding: 3px 7px; }

/* The workshop TV keeps the whiteboard's own colours */
.mock-tv { background: #fff; color: #1d2421; border-color: var(--line-p); margin-top: 30px !important; }
.mock-tv table { font-size: .98rem; }
.mock-tv th { color: #1d2421; font-size: .76rem; background: var(--paper); border-color: var(--line-p); }
.mock-tv td { padding-block: 14px; font-weight: 500; color: #1d2421; border-color: #e8e9e1; }
.mock-tv .mono { color: #1d2421; }
.mock-tv figcaption { color: var(--mute-p); border-color: var(--line-p); }
.mock-tv .st i { all: unset; display: inline-flex; vertical-align: middle; }
.mock-tv .st i.tv-t { color: #1b67c9; }
.mock-tv .st i.tv-s { color: #e8791a; }
.mock-tv .st i.tv-n { color: #e8791a; }
.mock-tv .tv-n svg path { fill: currentColor; }
.mock-tv .st i.tv-o { font: 600 .68rem var(--mono); color: #fff; background: #e8791a; padding: 2px 5px; }
.mock-tv .tv-note { font-weight: 400; font-size: .84rem; color: var(--mute-p); }
.sign { border: 1px dashed #47524d; padding: 10px 10px 8px; color: var(--lime); display: grid; gap: 4px; }
.sign svg { width: 100%; height: auto; }
.sign small { color: var(--mute-d); }

/* Contact */
.contact { align-items: start; }
.phone-link { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -.02em; color: #fff; text-decoration: none; }
.enquiry { display: grid; gap: 14px; background: var(--ink-2); border: 1px solid var(--line-d); padding: clamp(18px, 3vw, 28px); }
.enquiry label { display: block; font: 500 .84rem var(--mono); color: #fff; text-transform: lowercase; }
.enquiry input, .enquiry select, .enquiry textarea { display: block; width: 100%; margin-top: 5px; padding: 11px 12px; border: 1px solid #47524d; border-radius: 0; font: 400 1rem var(--sans); color: #fff; background: var(--ink); color-scheme: dark; }
.enquiry input:focus, .enquiry select:focus, .enquiry textarea:focus { border-color: var(--lime); outline: 0; }
.enquiry .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.enquiry .send { justify-self: start; }
.enquiry .small { color: var(--mute-d); }
.enquiry .small a { color: var(--lime); }
.gotcha { position: absolute !important; left: -9999px; }
[data-result].ok { color: var(--lime); font-weight: 600; font-size: 1rem; }
[data-result].bad { color: var(--red); font-weight: 600; }

/* Long text */
.prose h2 { font-size: 1.4rem; margin-top: 34px; }
.prose p { max-width: 42em; }
.prose .wrap > h2:first-child { margin-top: 0; }
.prose .wrap > * + * { margin-top: 12px; }
.prose a { color: var(--green-ink); }

/* Footer */
.site-footer { background: var(--ink); color: var(--mute-d); padding-block: 48px 28px; font: 400 .82rem/1.65 var(--mono); border-top: 1px solid var(--line-d); }
.site-footer a { color: var(--on-ink); text-decoration: none; }
.site-footer a:hover { color: var(--ink); background: var(--lime); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; }
.foot-grid ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.foot-grid b { color: #fff; font-weight: 500; }
.legal { margin-top: 30px !important; padding-top: 16px; border-top: 1px solid var(--line-d); font-size: .76rem; }

/* Small screens */
@media (max-width: 1080px) {
  .menu-btn { display: block; }
  .site-nav { display: none; position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--ink); border-bottom: 1px solid var(--line-d); padding: 6px var(--gutter) 14px; font-size: .95rem; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 11px 0; border-bottom: 1px solid var(--line-d); }
  .site-nav a:last-child { border-bottom: 0; }
}
@media (max-width: 900px) {
  .hero-grid { align-content: start; min-height: 0; padding-block: 36px 40px; }
  .grid-2, .work-row, .row { grid-template-columns: minmax(0, 1fr); }
  .work-row:nth-child(even) > :first-child { order: 0; }
  .grid-3, .links-3 { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .how > * + * { margin-top: 12px; }
  .log { padding: 16px; font-size: .78rem; }
  .log li { grid-template-columns: 48px 44px minmax(0, 1fr); }
}
/* On a phone the words fill the width, so the top of the home page keeps some open space for the gecko to work in. */
@media (max-width: 759px) { .hero-grid { padding-bottom: 200px; } }
@media (max-width: 480px) {
  .enquiry .two { grid-template-columns: minmax(0, 1fr); }
  .wp-block-button, .wp-block-button__link { width: 100%; text-align: center; }
  .mock-board th:nth-child(3), .mock-board td:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } * { transition: none !important; scroll-behavior: auto !important; } }