/* =======================================================
   Zulu Code — homepage
   One typeface (Schibsted Grotesk), ink and paper, one accent.
   Two axes: column 1 for the main line, column 7 for everything secondary.
   Two voices: sentence-case display type for what we say, small tracked
   capitals for labels. Every effect does a job: hover lifts a product
   screen to show what is below its fold, services open in place with their
   prices, the brief builds a message.
   ======================================================= */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --ink: #0b0b0c;
    --ink-2: #141416;
    --paper: #f2f1ed;
    --white: #ffffff;
    --on-ink-2: rgba(255,255,255,0.68);
    --on-ink-3: rgba(255,255,255,0.5);
    --on-paper-2: #4d4b47;
    --on-paper-3: #686661;           /* 5:1 on paper: AA for the small labels */
    --line-ink: rgba(255,255,255,0.13);
    --line-ink-2: rgba(255,255,255,0.38);   /* 3:1 on ink: borders of inputs and chips must be seen */
    --line-paper: rgba(11,11,12,0.13);
    --line-paper-2: rgba(11,11,12,0.3);
    --accent: #e5006d;
    --accent-press: #c8005f;          /* hover: darker, so white text stays above 4.5:1 */
    --live: #2fbf71;

    --font: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    --container-max: 1600px;           /* the nav (nav.css) shares this box and gutter */
    --wrap: var(--container-max);
    --gutter: clamp(20px, 4vw, 64px);
    --gap: clamp(1rem, 2vw, 2rem);
    --cols: repeat(12, minmax(0, 1fr));
    --sec: clamp(5.5rem, 10vw, 10rem);
    --inset: clamp(24px, 4.2vw, 64px); /* where every product screen starts, below the field's top edge */
    --lift: -20px;                     /* one hover distance for every screen, at every size */

    /* The hero scales with the shorter side, so the CTA clears the fold on 1366x768 */
    --t-hero: clamp(2.9rem, min(9.4vw, 13.5svh), 11rem);
    --t-h2: clamp(2.2rem, 4.4vw, 4.6rem);
    --t-h3: clamp(1.55rem, 2.2vw, 2.3rem);
    --t-h4: clamp(1.2rem, 1.5vw, 1.45rem);
    --t-lead: var(--t-h4);
    --t-body: 1.0625rem;
    --t-small: 0.9375rem;
    --t-label: 0.75rem;

    --r-m: 14px;
    --r-l: 4px;                       /* hard edges, like the hairlines */
    --pill: 0;                         /* square controls: no pills */

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-1: 0.2s;
    --dur-2: 0.4s;
    --dur-3: 0.7s;
    --nav-h: 74px;
    interpolate-size: allow-keywords;
}

html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-size: var(--t-body); line-height: 1.55; background: var(--ink); color: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-variant-numeric: lining-nums; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(a, button, summary, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.ink { background: var(--ink); color: var(--white); }
.paper { background: var(--paper); color: var(--ink); }

/* ---------- Type ---------- */
/* The second voice: small tracked capitals, for labels only */
.label, .footer-h { font-size: var(--t-small); font-weight: 500; line-height: 1.4; }
.label { color: var(--on-ink-3); }
.paper .label { color: var(--on-paper-3); }
.sec-head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.sec-head .label + .sec-title { margin-top: 1.1rem; }
.sec-title { font-size: var(--t-h2); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; max-width: 17ch; text-wrap: balance; }
.sec-lede { margin-top: 1.25rem; font-size: var(--t-lead); line-height: 1.45; color: var(--on-ink-2); max-width: 38ch; text-wrap: pretty; }
.paper .sec-lede { color: var(--on-paper-2); }
@media (min-width: 721px) {
    .sec-head--split { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); align-items: end; }
    .sec-head--split .sec-title { grid-column: 1 / 7; }
    .sec-head--split .sec-lede { grid-column: 7 / 12; margin-top: 0; padding-bottom: 0.35em; }
}

/* Links that lead somewhere carry an arrow that moves on hover */
.tile-cta { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.svc-link { display: inline-block; padding-block: 0.6rem; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.tile-out, .tier-ask, .svc-ask { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0 1.6rem; border-radius: var(--pill); border: 1px solid transparent; font-size: var(--t-body); font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.btn--accent { background: var(--accent); color: var(--white); }
.btn--accent:hover { background: var(--accent-press); }
.btn--line { border-color: var(--line-ink-2); color: var(--white); }
.btn--line:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }

/* ---------- Reveal: headings, tiles and bands only; short and small ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- Live status ---------- */

/* =======================================================
   HERO — the claim, said once and large
   ======================================================= */
.hero { padding: calc(var(--nav-h) + clamp(2rem, 5vh, 4rem)) 0 clamp(2rem, 3vw, 2.5rem); }
.hero-title { max-width: 13ch; font-size: var(--t-hero); font-weight: 600; line-height: 0.95; letter-spacing: -0.045em; text-wrap: balance; }
.hero-foot { display: grid; grid-template-columns: var(--cols); gap: 1.75rem var(--gap); align-items: start; margin-top: clamp(1.75rem, 4vh, 3rem); }
.hero-lede { grid-column: 1 / 7; font-size: var(--t-lead); line-height: 1.45; color: var(--on-ink-2); max-width: 42ch; text-wrap: pretty; }
.hero-side { grid-column: 7 / -1; display: grid; justify-items: start; gap: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* =======================================================
   WORK — one rule for every product: the same field, screens start at
   the same inset below its top edge and run off the bottom. Hover (or
   keyboard focus) lifts them to show what is below their fold.
   Each tile leads with what the product was built for.
   ======================================================= */
.work { padding: clamp(0.5rem, 1.5vw, 1.5rem) 0 var(--sec); }
.work-title { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.work-coda { max-width: 52ch; margin-top: clamp(4rem, 7vw, 7rem); font-size: var(--t-lead); line-height: 1.45; color: var(--on-ink-2); text-wrap: pretty; }
.work-coda a { color: var(--white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--line-ink-2); transition: text-decoration-color var(--dur-2) ease; }
.work-coda a:hover { text-decoration-color: var(--white); }
.tiles { display: grid; grid-template-columns: var(--cols); gap: clamp(4rem, 7vw, 7rem) var(--gap); }
.tile { position: relative; grid-column: 1 / -1; }

/* Each field is a colour taken from the product's own interface */
.tile-media { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 7.5; border-radius: var(--r-l); background: var(--field); }
.tile--half .tile-media { aspect-ratio: 16 / 11; }
.tile--cutq { --field: #3b2d21; }        /* the dark walnut of its salon photography */
.tile--cutpdf { --field: #dcdee2; }      /* the grey canvas its documents sit on */
.tile--zaremote { --field: #2e2a23; }    /* near-black, so its cream page is the light */
.tile--employeex { --field: #12563f; }   /* its avatar green */
.screens { position: absolute; inset: var(--inset) 0 auto; display: flex; justify-content: center; align-items: flex-start; gap: 4%; }
.device { flex: none; transition: transform 0.45s var(--ease); will-change: transform; }
.device img { width: 100%; height: auto; }

/* Phones carry their own bezel; sheets and windows are the screen alone */
.phone { width: 22%; padding: clamp(4px, 0.5vw, 9px); border-radius: 13% / 6%; background: #0d0d0f; box-shadow: 0 2vw 4vw -1.6vw rgba(20,20,20,0.45), inset 0 0 0 1px rgba(255,255,255,0.08); }
.phone img { border-radius: 11% / 5%; }
.tile--cutq .phone:nth-child(2) { width: 30%; }
.tile--cutq .phone:not(:nth-child(2)) { margin-top: 5%; }   /* the browse screen leads; the others sit lower */
.window { overflow: hidden; border-radius: 6px 6px 0 0;   /* it runs off the field; only its top corners are ever seen */ background: var(--white); box-shadow: 0 0 0 1px rgba(0,0,0,0.16), 0 1.5vw 3vw -1.5vw rgba(0,0,0,0.3); }
/* Screens sit inset on all sides and run off the bottom; one wider than its
   field starts at the inset and runs off the right as well */
.screens--web { justify-content: flex-start; padding-left: var(--inset); }
.tile--cutpdf .window { width: 110%; }
.tile--employeex .window { width: 72%; }
/* ZARemote ends in the gutter between its listings and their dates, not mid-word */
.tile--zaremote .window { width: 117%; }   /* of the space right of the inset */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .tile:hover:not(:has(.tile-out:hover)) .device { transform: translateY(var(--lift)); }
}
@media (prefers-reduced-motion: no-preference) {
    .tile:has(.tile-link:focus-visible) .device { transform: translateY(var(--lift)); }
}
.tile:has(.tile-link:focus-visible) .tile-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.14em; }
.tile:has(.tile-link:focus-visible) .tile-media { outline: 2px solid var(--accent); outline-offset: 4px; }
.tile-link:focus-visible { outline: none; }
.tile-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-l); }

/* Caption: what it is, what it was built for, one line, two facts, where next */
.tile-cap { display: grid; grid-template-columns: var(--cols); gap: 1.5rem var(--gap); margin-top: clamp(1.5rem, 2.4vw, 2.25rem); align-items: start; }
.tile-head, .tile-line, .tile-facts, .tile-more { grid-column: 1 / -1; }
.tile-kind { margin-top: 0.4rem; font-size: var(--t-small); color: var(--on-ink-3); }
.tile-title { font-size: clamp(2rem, 3.4vw, 3.6rem); font-weight: 500; line-height: 1; letter-spacing: -0.035em; }
.tile-line { color: var(--on-ink-2); max-width: 48ch; text-wrap: pretty; }
.tile-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem var(--gap); max-width: 30rem; }
.tile-facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.35rem; padding-top: 0.9rem; border-top: 1px solid var(--line-ink); }
.tile-facts dd { font-size: var(--t-h3); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; }
.tile-facts dt { font-size: var(--t-small); line-height: 1.4; color: var(--on-ink-3); max-width: 28ch; }
.tile-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; }
.tile-out { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ink-2); transition: color var(--dur-2) ease; }
.tile-out:hover { color: var(--white); }
@media (min-width: 721px) {
    .tile--wide .tile-head { grid-column: 1 / 7; grid-row: 1; }
    .tile--wide .tile-line { grid-column: 7 / 12; grid-row: 1; padding-top: 2.1rem; }
    .tile--wide .tile-more { grid-column: 1 / 7; grid-row: 2; align-self: start; }
    .tile--wide .tile-facts { grid-column: 7 / -1; grid-row: 2; }
}

/* Two products side by side share their caption rows, so heads, lines,
   facts and links sit on the same lines however each one wraps */
.tile-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: var(--gap); }
.tile--half { grid-column: auto; grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; }
.tile--half .tile-cap { display: contents; }
.tile--half .tile-media { grid-row: 1; }
.tile--half .tile-head { grid-row: 2; margin-top: clamp(1.5rem, 2.4vw, 2.25rem); }
.tile--half .tile-line { grid-row: 3; margin-top: 1.1rem; }
.tile--half .tile-facts { grid-row: 4; margin-top: 1.5rem; }
.tile--half .tile-more { grid-row: 5; margin-top: 1rem; }
@supports not (grid-template-rows: subgrid) {
    .tile--half { display: block; }
}

/* =======================================================
   SERVICES & PRICES — one index that opens in place; how a project runs
   closes the same section
   ======================================================= */
.services { padding: var(--sec) 0; }
.svc-list { border-top: 1px solid var(--line-paper-2); }
.svc { border-bottom: 1px solid var(--line-paper); }
.svc summary { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); align-items: baseline; padding: clamp(1.4rem, 2.4vw, 2.1rem) 0; cursor: pointer; list-style: none; }
.svc summary::-webkit-details-marker { display: none; }
.svc-title { grid-column: 1 / 7; font-size: var(--t-h3); font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; transition: color var(--dur-2) ease; }
.svc-meta { grid-column: 7 / 12; color: var(--on-paper-2); font-size: var(--t-small); }
.svc-price { color: var(--ink); font-weight: 600; }
.svc-icon { grid-column: 12; justify-self: end; position: relative; width: 1.25rem; height: 1.25rem; align-self: center; }
.svc-icon::before, .svc-icon::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: currentColor; transition: transform var(--dur-2) var(--ease); }
.svc-icon::after { transform: rotate(90deg); }
.svc[open] .svc-icon::after { transform: rotate(0deg); }
.svc-body { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); row-gap: 1.25rem; padding-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.svc-body > p { grid-column: 1 / 6; color: var(--on-paper-2); max-width: 56ch; text-wrap: pretty; }
.svc-actions { grid-column: 7 / 12; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; margin-top: -0.6rem; }
.svc-ask { display: inline-block; padding-block: 0.6rem; color: var(--on-paper-2); transition: color var(--dur-2) ease; }
.svc-ask:hover { color: var(--ink); }
.svc::details-content { block-size: 0; overflow: clip; overflow-clip-margin: 6px; transition: block-size var(--dur-3) var(--ease), content-visibility var(--dur-3) allow-discrete; }
.svc[open]::details-content { block-size: auto; }
/* Pointing at a row quietens the others: you see which one will open */
@media (hover: hover) and (pointer: fine) {
    .svc-list:has(summary:hover) .svc:not(:has(summary:hover)) .svc-title,
    .faq-list:has(summary:hover) .faq-item:not(:has(summary:hover)) summary { color: var(--on-paper-3); }
}
/* Package rows inside Websites: price on the column-7 axis */
.tiers { grid-column: 1 / -1; margin: 0.5rem 0 0.25rem; border-top: 1px solid var(--line-paper); }
.tier { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line-paper); }
.tier-name { grid-column: 1 / 3; font-weight: 600; }
.tier-what { grid-column: 3 / 7; color: var(--on-paper-2); font-size: var(--t-small); text-wrap: pretty; }
.tier:last-child { border-bottom: 0; }
.tier-price { grid-column: 7 / 9; font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.tier-time { grid-column: 9 / 11; white-space: nowrap; color: var(--on-paper-2); font-size: var(--t-small); }
.tier-ask { grid-column: 11 / -1; justify-self: end; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

.process { padding: 0 0 var(--sec); }
.process-title { margin-bottom: clamp(2rem, 3.5vw, 3rem); font-size: var(--t-h2); font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gap); }
.step { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line-paper-2); }
.step h3 { font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.02em; }
.step p { color: var(--on-paper-2); max-width: 32ch; text-wrap: pretty; }

/* =======================================================
   STUDIO — who and where, said once
   ======================================================= */
.studio { padding: 0 0 var(--sec); }
.studio .wrap { display: grid; grid-template-columns: var(--cols); gap: 2rem var(--gap); align-items: start; }
.studio .wrap::before { content: ''; grid-column: 1 / -1; border-top: 1px solid var(--line-paper); margin-bottom: calc(var(--sec) - 4rem); }
.studio .sec-title { grid-column: 1 / 6; }
.studio-body { grid-column: 7 / -1; display: grid; gap: 1.1rem; max-width: 56ch; font-size: var(--t-lead); line-height: 1.45; color: var(--on-paper-2); }

/* =======================================================
   FAQ
   ======================================================= */
.faq { padding: 0 0 var(--sec); }
.faq-grid { display: grid; grid-template-columns: var(--cols); gap: 2rem var(--gap); align-items: start; }
.faq-grid::before { content: ''; grid-column: 1 / -1; border-top: 1px solid var(--line-paper); margin-bottom: calc(var(--sec) - 2rem); }
.faq-side { grid-column: 1 / 6; }
.faq-note { margin-top: 1.5rem; max-width: 30ch; color: var(--on-paper-2); text-wrap: balance; }
.faq-item summary > span:first-child { text-wrap: balance; }
.faq-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-1) ease; }
.faq-note a:hover { text-decoration-thickness: 2px; }
.faq-list { grid-column: 7 / -1; border-top: 1px solid var(--line-paper-2); }
.faq-item { border-bottom: 1px solid var(--line-paper); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 2rem; min-height: 4.5rem; padding: 1.2rem 0; font-size: var(--t-h4); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; cursor: pointer; list-style: none; transition: color var(--dur-2) ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-toggle { position: relative; flex-shrink: 0; width: 1.1rem; height: 1.1rem; }
.faq-toggle::before, .faq-toggle::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: currentColor; transition: transform var(--dur-2) var(--ease); }
.faq-toggle::after { transform: rotate(90deg); }
.faq-item[open] .faq-toggle::after { transform: rotate(0deg); }
.faq-answer p { padding: 0 0 1.5rem; max-width: 62ch; color: var(--on-paper-2); }
.faq-answer a { text-decoration: underline; text-underline-offset: 0.2em; }
.faq-item::details-content { block-size: 0; overflow: clip; overflow-clip-margin: 6px; transition: block-size var(--dur-3) var(--ease), content-visibility var(--dur-3) allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }

/* =======================================================
   CONTACT — the ways to reach us beside a brief that writes itself
   ======================================================= */
.contact { padding: var(--sec) 0 calc(var(--sec) * 0.6); }
.contact-grid { display: grid; grid-template-columns: var(--cols); gap: 3rem var(--gap); align-items: start; }
.contact-side { grid-column: 1 / 6; }
.contact-lede { margin-bottom: 0.5rem; color: var(--on-ink-2); }
.contact-title { font-size: var(--t-h2); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; max-width: 11ch; margin-bottom: 1rem; }
.brief { grid-column: 7 / -1; padding-top: 0.4rem; }
.brief-q { border: 0; margin: 0 0 1.75rem; min-width: 0; }
.brief-q legend { margin-bottom: 0.85rem; font-size: var(--t-small); color: var(--on-ink-2); }
.options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.option { position: relative; }
.option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.option span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--line-ink-2); border-radius: var(--pill); font-size: var(--t-small); font-weight: 500; transition: background-color var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; }
.option input:checked + span { background: var(--white); border-color: var(--white); color: var(--ink); }
.option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
    .option:hover input:not(:checked) + span { border-color: var(--white); }
}
.brief-note { display: grid; gap: 0.85rem; font-size: var(--t-small); color: var(--on-ink-2); }
.brief-note-label { display: flex; flex-wrap: wrap; gap: 0 0.4rem; }
.brief-optional { color: var(--on-ink-3); }
.brief-note textarea { width: 100%; min-height: 6.5rem; padding: 0.9rem 1rem; border: 1px solid var(--line-ink-2); border-radius: 0; background: transparent; color: var(--white); font: inherit; font-size: var(--t-body); line-height: 1.5; resize: vertical; transition: border-color var(--dur-1) ease; }
.brief-note textarea::placeholder { color: var(--on-ink-3); }
.brief-note textarea:focus { border-color: var(--white); outline: none; }
.brief-note textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.brief-send { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.brief-hint { margin-top: 0.9rem; max-width: 56ch; font-size: var(--t-small); color: var(--on-ink-3); text-wrap: pretty; }
.direct-email { display: inline-block; margin: 1rem 0 1.5rem; padding-block: 0.4rem; font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--line-ink-2); transition: text-decoration-color var(--dur-2) ease; }
.direct-email:hover { text-decoration-color: var(--white); }
.direct-list li { border-top: 1px solid var(--line-ink); }
.direct-list li:last-child { border-bottom: 1px solid var(--line-ink); }
.direct-list a, .direct-list button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; color: var(--on-ink-2); text-align: left; transition: color var(--dur-2) ease; }
.direct-list a:hover, .direct-list button:hover { color: var(--white); }
.direct-list .is-done, .direct-list .is-done:hover { color: var(--live); }

/* =======================================================
   FOOTER
   ======================================================= */
.footer { padding: clamp(4rem, 8vw, 7rem) 0 2rem; border-top: 1px solid var(--line-ink); }
.footer-top { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line-ink); }
.footer-sign { font-size: var(--t-h3); font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; max-width: 22ch; }
.footer-grid { display: grid; grid-template-columns: var(--cols); gap: 2rem var(--gap); padding: clamp(2.5rem, 4vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem); }
.footer-col { grid-column: span 3; }
.footer-h { margin-bottom: 0.9rem; color: var(--on-ink-3); }
.footer-col a, .footer-col li { display: inline-flex; align-items: center; min-height: 36px; color: var(--on-ink-2); transition: color var(--dur-1) ease; }
.footer-col li { display: flex; }
.footer-col a:hover { color: var(--white); }
.footer-col a { overflow-wrap: anywhere; }
.footer-bottom p { text-wrap: balance; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-ink); font-size: var(--t-small); color: var(--on-ink-3); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 36px; transition: color var(--dur-1) ease; }
.footer-legal a:hover { color: var(--white); }
@media (pointer: coarse) { .footer-col a, .footer-col li, .footer-legal a { min-height: 44px; } }

/* =======================================================
   RESPONSIVE
   ======================================================= */
@media (min-width: 961px) and (max-height: 820px) {
    .hero { padding-top: calc(var(--nav-h) + 1.5rem); padding-bottom: 1rem; }
    .hero-foot { margin-top: 1.75rem; }
    .tile--cutq { --inset: 36px; }
}
@media (max-width: 1100px) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .hero { padding-top: calc(var(--nav-h) + 4rem); }
    .process-title, .process-note { grid-column: 1 / -1; }
    .hero-lede, .hero-side { grid-column: 1 / -1; }
    .tile-pair { grid-template-columns: minmax(0, 1fr); }
    .tile--half + .tile--half .tile-media { margin-top: clamp(4rem, 7vw, 7rem); }
    /* Price rows stack: what you get on its own line, price and time beside the name */
    .tier { grid-template-columns: 1fr auto; row-gap: 0.25rem; }
    .tier-name { grid-column: 1; }
    .tier-price { grid-column: 2; grid-row: 1; justify-self: end; }
    .tier-what { grid-column: 1 / -1; }
    .tier-time { grid-column: 1; }
    .tier-ask { grid-column: 2; }
    .tile-facts { max-width: 36rem; }
    .studio .sec-title, .studio-body { grid-column: 1 / -1; }
    /* Tablets: the browse screen leads, its neighbours at the edges */
    .tile--cutq .tile-media { aspect-ratio: 4 / 3; }
    .tile--cutq .phone { width: 36%; }
    .tile--cutq .phone:nth-child(2) { width: 46%; }
    .tile--cutpdf .window { width: 130%; }
    .svc-title { grid-column: 1 / 12; }
    .svc-meta { grid-column: 1 / 12; grid-row: 2; margin-top: 0.4rem; }
    .svc-icon { grid-row: 1; }
    .svc-body > p, .svc-actions { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
    .faq-side, .faq-list { grid-column: 1 / -1; }
    .contact-side, .brief { grid-column: 1 / -1; }
    .direct-list { max-width: 32rem; }
    .footer-col { grid-column: span 6; }
}
@media (max-width: 600px) {
    :root { --sec: clamp(4.5rem, 16vw, 5.5rem); }
    .hero-title { letter-spacing: -0.05em; }
    .hero { padding-top: calc(var(--nav-h) + 2.25rem); padding-bottom: 2.75rem; }
    .hero-actions { width: 100%; }
    .hero-actions .btn { flex: 1 1 100%; }
    /* Phones: one screen large enough to read, its neighbours at the edges */
    .tile--wide .tile-media { aspect-ratio: 1 / 1.02; }
    .tile--cutq .phone:not(:nth-child(2)) { display: none; }   /* one phone, readable; no fake carousel */
    .tile--cutq .phone:nth-child(2) { width: 74%; }
    .screens { gap: 6%; }
    /* Web screens are cropped, not shrunk, so a headline stays readable */
    /* EmployeeX starts at its logo and runs off the right */
    .tile--employeex .screens { justify-content: flex-start; padding-left: var(--inset); }
    .tile--employeex .window { width: 190%; }
    .tile--zaremote .window { width: 190%; }
    .tile--cutpdf .window { width: 150%; }
    .footer-col:first-child { display: none; }
    .footer-col:last-child { grid-column: 1 / -1; }
    .tile-more { gap: 0 1.25rem; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brief-send .btn { flex: 1 1 100%; }
}
@media (max-width: 480px) {
    .steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
    :root { --t-hero: 2.65rem; }
}
@media (max-width: 340px) {
    :root { --t-hero: 2.3rem; }
    .footer-col { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .device, .svc-icon::before, .svc-icon::after, .faq-toggle::before, .faq-toggle::after { transition: none; }
    .svc::details-content, .faq-item::details-content { transition: none; }
}
@media print {
    .js .reveal { opacity: 1; transform: none; }
}
.brief-copy { display: inline; padding-block: 0.6em; color: var(--white); text-decoration: underline; text-underline-offset: 0.2em; }