/* 40 Gridline: Haldane Design-Build (sample)
   Recreation of the look of greenshift.framer.website (our own code, CC0 photos).
   A safety-orange flood on a bone page, held together by a visible 1px grid: split cells, numbered rows, framed photos
   with running hairlines, and Geist at display sizes (bold uppercase for the hero, light sentence case everywhere else).
   Square corners, split "label | arrow" buttons, a dark Call box and an orange Menu box fixed top right.
   Re-skin: change the shared token layer below. Breakpoints 760 / 1080 (ncs-desktop). No JavaScript: :target,
   <details name>, scroll-snap rails and CSS animation only. */
:root {
  /* Shared token layer (library-wide names) */
  --c-bg: #f0efeb;                 /* bone page */
  --c-surface: #e5e3dd;            /* quiet panels (service-area card) */
  --c-ink: #0c0b11;                /* text, dark blocks, the Call box */
  --c-muted: #4a4850;              /* secondary text: 8.1:1 on bone */
  --c-line: rgb(12 11 17 / .3);    /* the grid hairlines on bone (decorative) */
  --c-line-strong: #6d6a72;        /* field borders: 4.6:1 on bone */
  --c-accent: #f86a2e;             /* safety orange: hero, page headers, key cells, footer */
  --c-on-accent: #0c0b11;          /* 6.5:1 on orange (white is only 3.1:1, so never white on orange) */
  --c-accent-2: #1f6b44;           /* status only (the "sent" check) */
  --f-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: var(--f-body);         /* none: numbers use tabular figures */
  --r-sm: 2px;                     /* chips */
  --r-lg: 0px;                     /* panels and frames are square */
  --r-pill: 0px;                   /* buttons are square split boxes */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 64px; --s-6: 96px;

  /* Theme names mapped to the shared layer */
  --bone: var(--c-bg);
  --orange: var(--c-accent);
  --ink: var(--c-ink);
  --line: var(--c-line);
  --line-o: var(--c-ink);          /* hairlines on orange are solid ink, as on the original */
  --line-i: rgb(240 239 235 / .28);/* hairlines on ink */
  --pad: 20px;                     /* cell padding */
  --bar-h: 72px;                   /* brand row */
  --box: 48px;                     /* the Call / Menu boxes and split-button height */
  --e-out: cubic-bezier(.23, 1, .32, 1);
  --e-draw: cubic-bezier(.65, 0, .35, 1);
  --t-h1: clamp(38px, 11vw, 52px);
  --t-h2: clamp(31px, 8.4vw, 42px);
  --t-h3: 26px;
  --t-lead: 19px;
  --t-lab: 16px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bone); scroll-padding-top: 76px; }
body { margin: 0; background: var(--bone); color: var(--ink); font: 400 17px/1.45 var(--f-body); letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
small { font-size: inherit; }
b { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.mute { color: var(--c-muted); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.d-only, .box .d-only, .sbtn .d-only { display: none; }

a, button, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.case-ink :focus-visible, .cta :focus-visible, .wc-ink :focus-visible, .box-ink:focus-visible, .sbtn-ink:focus-visible { outline-color: var(--orange); }

.skip { position: absolute; left: 12px; top: -80px; z-index: 300; padding: 12px 16px; background: var(--ink); color: var(--bone); font-weight: 600; }
.skip:focus { top: 12px; }
.demo { background: var(--ink); color: #d9d7d1; font-size: 13px; line-height: 1.4; text-align: center; padding: 10px 16px; }

/* ---------- Type ---------- */
.h1 { font-size: var(--t-h1); font-weight: 700; line-height: .92; letter-spacing: -.045em; text-transform: uppercase; }
.h1 .ln { display: block; }
.h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.045em; }
.h3 { font-size: var(--t-h3); line-height: 1.05; letter-spacing: -.04em; }
.h4 { font-size: 23px; line-height: 1.1; letter-spacing: -.035em; }
.lead { font-size: var(--t-lead); line-height: 1.25; letter-spacing: -.025em; }
.lab, .lab-s { display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 600 var(--t-lab)/1.2 var(--f-display); text-transform: uppercase; letter-spacing: 0; }
.lab-s { font-size: 15px; letter-spacing: -.01em; }
.sq { width: 10px; height: 10px; flex: none; background: currentColor; }

/* ---------- Split buttons (label | arrow) and the boxes ---------- */
.sbtn { display: inline-flex; align-items: stretch; height: var(--box); border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font: 500 16px/1 var(--f-display); letter-spacing: -.02em; cursor: pointer; padding: 0; text-align: left;
  transition: transform 120ms var(--e-out); }
.sbtn:active, .box:active { transform: scale(.97); }
.sbtn-l { display: flex; align-items: center; flex: 1; min-width: 140px; padding: 0 16px; white-space: nowrap; }
.sbtn-a { display: grid; place-items: center; width: var(--box); flex: none; border-left: 1px solid currentColor; transition: background-color 200ms, color 200ms; }
.sbtn-ink { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.sbtn-ink .sbtn-a { background: var(--orange); color: var(--ink); border-left-color: var(--ink); }
.sbtn-or { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.sbtn-or .sbtn-a { border-left-color: var(--ink); }
.sbtn-line { color: var(--bone); border-color: rgb(240 239 235 / .7); }
@media (hover: hover) and (pointer: fine) {
  .sbtn:hover .sbtn-a { background: var(--ink); color: var(--bone); }
  .sbtn-ink:hover .sbtn-a, .sbtn-line:hover .sbtn-a { background: var(--orange); color: var(--ink); }
  .sbtn-or:hover .sbtn-a { background: var(--ink); color: var(--orange); }
  .sbtn:hover .sbtn-a .i { animation: nudge .5s var(--e-out); }
}
@keyframes nudge { 0% { transform: translateX(0); } 45% { transform: translateX(6px); opacity: 0; } 46% { transform: translateX(-6px); } 100% { transform: translateX(0); opacity: 1; } }

/* ---------- Header: the brand row scrolls away; the two boxes stay (sticky, zero height) ---------- */
.top { position: relative; z-index: 30; height: var(--bar-h); margin-bottom: calc(-1 * var(--bar-h)); display: flex; align-items: center;
  padding-inline: var(--pad); pointer-events: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; pointer-events: auto; }
.brand .mark { width: 30px; height: 30px; }
.brand-t { display: grid; font: 600 23px/1 var(--f-display); letter-spacing: -.06em; }
.brand-s { font: 600 12px/1.2 var(--f-display); letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
.dock { position: sticky; top: 0; z-index: 40; height: 0; }
.dock-in { position: absolute; right: var(--pad); top: calc((var(--bar-h) - var(--box)) / 2); display: flex; gap: 8px; }
.box { display: inline-flex; align-items: stretch; height: var(--box); border: 1px solid var(--ink); font: 500 17px/1 var(--f-display); letter-spacing: -.02em;
  transition: transform 120ms var(--e-out); }
.box-l { display: flex; align-items: center; gap: 8px; padding: 0 14px; white-space: nowrap; }
.box-a { display: grid; place-items: center; width: var(--box); flex: none; }
.box-ink { background: var(--ink); color: var(--bone); box-shadow: 0 0 0 1px rgb(240 239 235 / .3); }
.box-ink .box-a { border-left: 1px solid rgb(240 239 235 / .35); }
.box-menu { background: var(--orange); color: var(--ink); }
.box-burger .i { width: 26px; height: 26px; stroke-width: 1.6; }

/* ---------- Menu: :target panel ---------- */
.mnav { position: fixed; inset: 0; z-index: 100; visibility: hidden; opacity: 0; transition: opacity 240ms var(--e-out), visibility 0s 240ms; }
.mnav:target { visibility: visible; opacity: 1; transition: opacity 240ms var(--e-out); }
.mnav-shade { position: absolute; inset: 0; background: rgb(12 11 17 / .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mnav-panel { position: absolute; inset: 0 0 0 auto; width: 100%; display: flex; flex-direction: column; padding: 0 var(--pad) calc(24px + env(safe-area-inset-bottom));
  background: var(--bone); overflow-y: auto; }
.mnav:target .mnav-panel { animation: drawer .42s var(--e-out) both; }
@keyframes drawer { from { transform: translateX(40px); } }
.mnav-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--bar-h); }
.mnav-mark { display: inline-flex; align-items: center; gap: 10px; font: 600 26px/1 var(--f-display); letter-spacing: -.06em; }
.mnav-mark .mark { width: 30px; height: 30px; }
.mnav-close { display: grid; place-items: center; width: 48px; height: 48px; margin-right: -8px; }
.mnav-close .i { width: 26px; height: 26px; }
.mnav-list { --ncs-on-style: none; margin-top: 16px; }
.mnav-list a { display: flex; align-items: center; gap: 0; min-height: 66px; border-bottom: 1px solid var(--line); font: 400 32px/1 var(--f-display); letter-spacing: -.045em; }
.mnav-list a::before { content: ""; width: calc(var(--on, 0) * 12px); height: 12px; margin-right: calc(var(--on, 0) * 14px); background: var(--orange); outline: 1px solid var(--ink); outline-offset: -1px; }
.mnav-list .i { margin-left: auto; width: 26px; height: 26px; color: var(--c-muted); transition: transform 200ms var(--e-out); }
@media (hover: hover) and (pointer: fine) { .mnav-list a:hover .i { transform: translateX(6px); color: var(--ink); } }
.mnav-foot { display: grid; gap: 16px; margin-top: auto; padding-top: 32px; color: var(--c-muted); }
.mnav-foot .sbtn { justify-self: start; }

/* ---------- Hero ---------- */
.hero { background: var(--orange); color: var(--ink); padding-top: calc(var(--bar-h) + 20px); }
.hero-l { padding: 0 var(--pad) 28px; }
.hero-b { display: grid; gap: 22px; justify-items: start; margin-top: 22px; }
.hero-sub { font-size: 22px; line-height: 1.08; letter-spacing: -.04em; }
.hero-g { display: grid; grid-template-columns: 1fr 1fr 84px; border-top: 1px solid var(--line-o); }
.hg { display: flex; align-items: center; min-height: 64px; padding: 0 var(--pad); font: 500 15px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.hg-b { border-left: 1px solid var(--line-o); }
.hg-beam { border-left: 1px solid var(--line-o); padding: 12px 14px; }
.hg-beam svg { width: 100%; height: 40px; }
.hero-g .g, .hero-g .hg-c, .hero-g .hg-d { display: none; }

/* ---------- Frames: photo inset in a 1px box, hairlines run through to the edges ---------- */
.frame { --fp: 12px; position: relative; padding: var(--fp); box-shadow: inset 0 0 0 1px var(--line); }
.frame::before, .frame::after { content: ""; position: absolute; pointer-events: none; z-index: 2; }
.frame::before { inset: var(--fp) 0; border-block: 1px solid var(--line); }
.frame::after { inset: 0 var(--fp); border-inline: 1px solid var(--line); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- One contract (intro) ---------- */
.intro-top { padding: 40px var(--pad) 32px; display: grid; gap: 18px; }
.intro-top .lab { margin-bottom: 6px; }
.cells2 { border-top: 1px solid var(--line); }
.cell { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 14px var(--pad); border-bottom: 1px solid var(--line); }
.cell .lab-s { justify-content: flex-start; gap: 10px; }
.cell .lab-s .sq { order: -1; width: 8px; height: 8px; }
.cell-p { display: none; }
.cell .sbtn-l { min-width: 0; }
.intro-r { padding: 24px var(--pad) 8px; }
.frame-tall { aspect-ratio: 16 / 10; }

/* ---------- Reviews ---------- */
.reviews { border-top: 1px solid var(--line); margin-top: 32px; }
.rev-head { display: grid; gap: 14px; padding: 36px var(--pad) 24px; }
.rev-rate { font-size: 16px; }
.rev-list { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.rev-list::-webkit-scrollbar { display: none; }
.rev { scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding: 22px var(--pad); border-right: 1px solid var(--line); }
.rev blockquote { font-size: 20px; line-height: 1.22; letter-spacing: -.03em; }
.rev-who { margin-top: auto; font-size: 15px; color: var(--c-muted); }
.rev-who b { display: block; color: var(--ink); font-size: 16px; }
.rev-tag { font: 600 12px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }

/* ---------- Section heads ---------- */
.sec-head { display: grid; gap: 16px; padding: 34px var(--pad) 28px; }
.sh-l { display: grid; gap: 18px; }
.ph { display: none; }

/* ---------- Services rows ---------- */
.svc { border-top: 1px solid var(--line); margin-top: 0; }
.rows { border-top: 1px solid var(--line); }
.srow { display: grid; gap: 10px; padding: 22px var(--pad) 24px; border-bottom: 1px solid var(--line); }
.srow-n { font: 600 15px/1 var(--f-display); }
.srow-img { display: none; }
.srow-b { display: grid; gap: 10px; }
.srow-b .lab-s { justify-content: flex-start; }
.srow-b > p:not(.lab-s):not(.spec) { display: none; color: var(--c-muted); }
.spec { font: 500 14px/1.3 var(--f-display); letter-spacing: 0; text-transform: uppercase; }
.srow-n, .srow-b .lab-s { color: var(--ink); }
.srow { grid-template-columns: 42px 1fr; }
.srow-n { padding-top: 1px; }

/* ---------- How we work ---------- */
.how { border-top: 0; }
.how-l { display: grid; gap: 12px; padding: 36px var(--pad) 20px; }
.how-l .lead, .svc .sh-r { display: none; }
.how-list { border-top: 1px solid var(--line); counter-reset: s; }
.how-list li { display: grid; gap: 4px; padding: 14px var(--pad); border-bottom: 1px solid var(--line); }
.how-n { font: 600 13px/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--c-muted); }
.how-list li > p:last-child { color: var(--c-muted); }

/* ---------- Projects ---------- */
.work { border-top: 0; }
.h2-xl { font-size: clamp(44px, 12vw, 58px); }
.plist { border-top: 1px solid var(--line); }
.prow { display: grid; grid-template-columns: 1fr 104px; gap: 12px 16px; padding: 18px var(--pad); border-bottom: 1px solid var(--line); }
.prow-r { display: contents; }
.prow-l { display: grid; gap: 12px; align-content: start; }
.prow .h3 { font-size: 24px; }
.prow .h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.prow img { grid-column: 2; grid-row: 1 / span 2; width: 104px; height: 128px; object-fit: cover; }
.pmeta { display: grid; gap: 2px; }
.pmeta dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pmeta div { display: grid; }
.pmeta dt, .case-spec dt, .about-spec dt { font: 600 13px/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.pmeta dd { font-size: 15px; color: var(--c-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; background: var(--ink); color: var(--bone); border-radius: var(--r-sm);
  font: 500 12px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.chip .i { width: 13px; height: 13px; }

/* ---------- Featured project ---------- */
.case-ink { background: var(--ink); color: var(--bone); }
.case-l { display: grid; gap: 16px; padding: 40px var(--pad) 26px; }
.case-p { font-size: 18px; line-height: 1.35; letter-spacing: -.02em; color: #d9d7d1; }
.case-spec { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-i); }
.case-spec div { padding: 14px var(--pad); border-bottom: 1px solid var(--line-i); }
.case-spec div:nth-child(odd) { border-right: 1px solid var(--line-i); }
.case-spec dd { font-size: 16px; color: #d9d7d1; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); }
.metrics li { padding: 18px 12px 22px var(--pad); border-left: 1px solid var(--line-i); }
.metrics li:first-child { border-left: 0; }
.m-n { font-size: 40px; line-height: 1; letter-spacing: -.05em; }
.m-n span { font-size: .5em; margin-left: 3px; letter-spacing: -.02em; color: #bdbab3; }
.m-t { margin-top: 8px; font-size: 13px; line-height: 1.3; color: #d9d7d1; }
.case-end { display: none; }
.case-res { display: grid; gap: 12px; padding: 26px var(--pad) 28px; background: var(--orange); }
.case-big { font-size: 28px; line-height: 1.05; letter-spacing: -.045em; }
.case-fig { display: none; }

/* ---------- Company ---------- */
.about-l { display: grid; gap: 16px; padding: 34px var(--pad) 26px; }
.about-p { color: var(--c-muted); }
.about-spec { border-top: 1px solid var(--line); }
.about-spec { display: grid; grid-template-columns: 1fr 1fr; }
.about-spec div { display: grid; align-content: start; gap: 2px; padding: 12px var(--pad); border-bottom: 1px solid var(--line); }
.about-spec div:nth-child(odd) { border-right: 1px solid var(--line); }
.about-spec dt { padding-top: 2px; }
.about-spec dd { font-size: 16px; }

/* ---------- Team ---------- */
.team-l { display: grid; gap: 14px; padding: 34px var(--pad) 22px; }
.team-l .lead { display: none; }
.team-g { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.tm { display: grid; grid-template-columns: 48px 1fr; gap: 2px 12px; align-items: center; padding: 14px var(--pad) 14px 14px; border-bottom: 1px solid var(--line); }
.tm:nth-child(odd) { border-right: 1px solid var(--line); padding-left: var(--pad); }
.tm-i { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 56px; background: var(--orange); font: 700 17px/1 var(--f-display); letter-spacing: -.04em; }
.tm-n { font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; align-self: end; }
.tm-r { font-size: 13px; line-height: 1.25; color: var(--c-muted); align-self: start; }

/* ---------- Values accordion ---------- */
.val-l { display: grid; gap: 14px; padding: 34px var(--pad) 22px; }
.val-list { border-top: 1px solid var(--line); }
.val { border-bottom: 1px solid var(--line); }
.val summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 0 var(--pad); cursor: pointer; list-style: none;
  font-size: 21px; letter-spacing: -.035em; }
.val summary::-webkit-details-marker { display: none; }
.pm { position: relative; width: 22px; height: 22px; flex: none; }
.pm::before, .pm::after { content: ""; position: absolute; background: currentColor; }
.pm::before { left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; }
.pm::after { top: 0; bottom: 0; left: 50%; width: 1.5px; margin-left: -.75px; transition: transform 240ms var(--e-out); }
.val[open] .pm::after { transform: scaleY(0); }
.val-b { display: grid; gap: 16px; padding: 0 var(--pad) 20px; color: var(--c-muted); }
.val-fig { display: none; }

/* ---------- Contact ---------- */
.contact { border-top: 1px solid var(--line); }
.ct-l { display: grid; gap: 14px; padding: 40px var(--pad) 24px; }
.ct-h { font-size: 44px; font-weight: 700; line-height: .95; letter-spacing: -.05em; text-transform: uppercase; }
.ct-sub { font-size: 20px; line-height: 1.15; letter-spacing: -.035em; }
.ct-list { border-top: 1px solid var(--line); margin-top: 8px; }
.ct-list a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ct-list span { display: grid; min-width: 0; }
.ct-list small { font-size: 13px; color: var(--c-muted); }
.ct-list b { font-size: 17px; font-weight: 500; overflow-wrap: anywhere; }
.form { display: grid; gap: 14px; padding: 8px var(--pad) 36px; }
.form-h { font: 600 var(--t-lab)/1.2 var(--f-display); text-transform: uppercase; }
.f2 { display: grid; gap: 14px; }
.f { display: grid; gap: 6px; }
.f label { font-size: 15px; font-weight: 500; }
.req { font-weight: 400; color: var(--c-muted); }
.f input, .f select, .f textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--c-line-strong); border-radius: 0; background: transparent;
  color: var(--ink); font: 400 16px/1.3 var(--f-body); }
.f select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.f textarea { min-height: 96px; resize: vertical; }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { outline-offset: 0; border-color: var(--ink); }
.form .sbtn { width: 100%; margin-top: 4px; }
.sent { display: none; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--c-accent-2); color: var(--ink); }
.sent .i { width: 22px; height: 22px; color: var(--c-accent-2); }
.sent:target { display: flex; }
.where { background: var(--orange); padding-bottom: 28px; }
.where-head { display: grid; gap: 12px; padding: 30px var(--pad) 20px; border-bottom: 1px solid var(--line-o); }
.where-map, .where-cards .wc-area { display: none; }
.where-note { font-size: 16px; }
.where-cards { display: grid; gap: 12px; padding: 20px var(--pad) 0; }
.wc { display: grid; gap: 10px; align-content: start; padding: 20px; background: var(--bone); }
.wc-ink { background: var(--ink); color: var(--bone); }
.wc-tag { justify-self: start; padding: 5px 8px; background: var(--ink); color: var(--bone); font: 500 12px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.wc-ink .wc-tag { background: var(--bone); color: var(--ink); }
.wc-h { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.wc-a, .wc-l { display: flex; align-items: flex-start; gap: 10px; }
.wc-a { min-height: 44px; align-items: center; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wc .i { margin-top: 1px; }

/* ---------- Closing band (computers) ---------- */
.cta { display: none; }

/* ---------- Footer ---------- */
.foot { background: var(--orange); color: var(--ink); border-top: 1px solid var(--line-o); padding-bottom: env(safe-area-inset-bottom); }
.f-cols { display: grid; grid-template-columns: 1fr 1fr; }
.f-col { display: grid; gap: 8px; align-content: start; padding: 22px var(--pad); border-bottom: 1px solid var(--line-o); }
.f-col:first-child { grid-column: 1 / -1; }
.f-col:nth-child(3) { display: none; }
.f-col:nth-child(2) { grid-column: 1 / -1; }
.f-nav { display: grid; grid-template-columns: repeat(3, 1fr); }
.f-h { font: 600 14px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.f-links { display: grid; }
.f-links a, .f-nav a, .f-col > p > a { display: inline-flex; align-items: center; min-height: 44px; }
.f-col > p:not(.f-links) > a { min-height: 0; padding-block: 4px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.f-legal { display: grid; gap: 4px; padding: 18px var(--pad) 22px; font-size: 13px; }

/* ================================================================ 760+ (tablet) */
@media (min-width: 760px) {
  :root { --pad: 28px; --bar-h: 88px; --box: 52px; --t-h1: clamp(52px, 7.4vw, 76px); --t-h2: clamp(40px, 5.6vw, 56px); --t-h3: 34px; --t-lead: 22px; --t-lab: 19px; }
  html { scroll-padding-top: 88px; }
  .d-only { display: inline; }
  .box .d-only, .sbtn .d-only { display: flex; }
  .box .box-a.d-only, .sbtn .sbtn-a.d-only { display: grid; place-items: center; }
  .ph-only { display: none; }
  .box-l { padding: 0 18px; min-width: 200px; }
  .mnav-panel { width: 500px; padding: 0 30px 30px; }
  .box-menu .box-l { min-width: 150px; }
  .box-menu .box-a, .box-ink .box-a { border-left: 1px solid currentColor; }
  .box-ink .box-a { border-left-color: rgb(240 239 235 / .35); }
  .brand-t { display: block; font-size: 28px; }
  .brand-s { font: inherit; letter-spacing: inherit; text-transform: none; margin: 0; }
  .brand .mark { width: 30px; height: 30px; }
  .hero-sub { font-size: 30px; }
  .hg { font-size: 17px; min-height: 80px; }
  .hg-beam svg { height: 56px; }
  .hero-g { grid-template-columns: 1fr 1fr 140px; }
  .cell { grid-template-columns: 1fr; padding: 24px var(--pad); align-content: space-between; gap: 18px; }
  .cells2 { display: grid; grid-template-columns: 1fr 1fr; }
  .cells2 .cell + .cell { border-left: 1px solid var(--line); }
  .cell-p { display: block; color: var(--c-muted); }
  .srow-b > p:not(.lab-s):not(.spec) { display: block; }
  .case-end { display: grid; }
  .f-col:nth-child(3) { display: grid; }
  .frame-tall { aspect-ratio: 4 / 3; }
  .cell .sbtn { justify-self: start; }
  .rev-list { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .rev { border-right: 0; border-left: 1px solid var(--line); }
  .rev:first-child { border-left: 0; }
  .srow { grid-template-columns: 70px 220px 1fr; gap: 0; padding: 0; }
  .srow > * { padding: 24px var(--pad); }
  .srow-img { display: block; border-left: 1px solid var(--line); padding: 14px; }
  .srow-img img { width: 100%; height: 100%; max-height: 280px; object-fit: cover; }
  .srow-b { border-left: 1px solid var(--line); }
  .prow { grid-template-columns: 1fr 1fr; padding: 0; gap: 0; }
  .prow-l { padding: 24px var(--pad); align-content: space-between; min-height: 240px; }
  .prow-r { display: grid; grid-template-columns: 1fr 200px; border-left: 1px solid var(--line); }
  .pmeta { padding: 24px var(--pad); align-content: space-between; }
  .pmeta { gap: 6px; }
  .pmeta dt { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .prow img { grid-column: auto; grid-row: auto; width: 100%; height: 100%; max-height: 260px; padding: 14px; }
  .prow .h3 { font-size: 34px; }
  .f2 { grid-template-columns: 1fr 1fr; }
  .how-l .lead, .svc .sh-r, .team-l .lead { display: block; }
  .where-cards .wc-area { display: grid; }
  .where-note { display: none; }
  .f-nav { grid-template-columns: 1fr; }
  .f-col:nth-child(2) { grid-column: auto; }
  .where-cards { grid-template-columns: 1fr 1fr; }
  .team-g { grid-template-columns: repeat(3, 1fr); }
  .tm:nth-child(odd) { border-right: 0; padding-left: 14px; }
  .tm { border-right: 1px solid var(--line); }
  .f-cols { grid-template-columns: 1.2fr 1fr 1fr; }
  .f-col:first-child { grid-column: auto; }
  .f-col + .f-col { border-left: 1px solid var(--line-o); }
  .f-col:nth-child(2) { border-right: 0; }
  .f-legal { display: flex; justify-content: space-between; }
}

/* ================================================================ 1080+ (computers: ncs-desktop) */
@media (min-width: 1080px) {
  :root { --pad: 30px; --bar-h: 96px; --box: 54px; --t-h1: clamp(58px, 4.9vw, 80px); --t-h2: clamp(52px, 4.8vw, 74px); --t-h3: clamp(36px, 3.4vw, 52px);
    --t-lead: clamp(22px, 1.95vw, 30px); --t-lab: clamp(19px, 1.6vw, 25px); }
  html { scroll-padding-top: 0; }
  body { font-size: 18px; }
  .box { font-size: 20px; }
  .box-l { min-width: 218px; }
  .box-menu .box-l { min-width: 210px; }
  .dock-in { gap: 21px; }
  .brand-t { font-size: 32px; letter-spacing: -.07em; }
  .brand .mark { width: 34px; height: 34px; }

  /* Menu: a 500px drawer from the right, the page blurred behind it */
  .mnav-panel { width: 500px; padding: 0 30px 30px; }
  .mnav-list a { min-height: 70px; }

  /* Hero: 40 / 60 with a drafting grid on the right */
  .hero { display: grid; grid-template-columns: 40% 1fr; min-height: max(640px, calc(100svh - 41px)); padding-top: 0; }
  .hero-l { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: calc(var(--bar-h) + 28px) var(--pad) 48px; border-right: 1px solid var(--line-o); }
  .hero-b { margin: 0; gap: 30px; }
  .hero-sub { font-size: clamp(30px, 2.7vw, 42px); line-height: 1.02; }
  .hero-g { position: relative; grid-template-columns: 50% 39% 1fr; grid-template-rows: var(--bar-h) 96px 1fr minmax(200px, 2.9fr) 96px; border-top: 0; }
  .hero-g .g { display: block; background: var(--line-o); pointer-events: none; }
  .g-h { grid-column: 1 / -1; align-self: end; height: 1px; transform-origin: left; }
  .g-h1 { grid-row: 1; } .g-h2 { grid-row: 2; } .g-h3 { grid-row: 3; } .g-h4 { grid-row: 4; }
  .g-v { grid-row: 2 / -1; justify-self: end; width: 1px; transform-origin: top; }
  .g-v1 { grid-column: 1; } .g-v2 { grid-column: 2; }
  .hg { min-height: 0; font-size: clamp(17px, 1.4vw, 21px); padding: 0 var(--pad) 0 48px; }
  .hg-a { grid-area: 2 / 1; }
  .hg-b { grid-area: 2 / 2; justify-content: center; border: 0; }
  .hg-beam { grid-area: 4 / 2; border: 0; padding: 0; }
  .hg-beam svg { width: 100%; height: 100%; display: block; }
  .hg-c { display: flex; grid-area: 5 / 1; }
  .hg-d { display: flex; grid-area: 5 / 2 / 6 / 4; gap: 12px; padding-left: var(--pad); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
  .hg-d .i { width: 22px; height: 22px; }

  /* Intro: 55 / 45, the frame sticks */
  .intro { display: grid; grid-template-columns: 55% 1fr; border-bottom: 1px solid var(--line); }
  .intro-l { border-right: 1px solid var(--line); display: grid; }
  .intro-top { gap: 28px; padding: 40px var(--pad) 48px; }
  .intro-top .h2 { margin-top: 56px; max-width: 12ch; }
  .intro-top .lead { margin-top: 90px; max-width: 30ch; }
  .cell { min-height: 300px; padding: 30px var(--pad); border-bottom: 0; }
  .cell-p { font-size: 20px; line-height: 1.35; max-width: 24ch; }
  .intro-r { padding: 30px; }
  .frame-tall { --fp: 15px; position: sticky; top: 96px; aspect-ratio: 4 / 5; max-height: calc(100vh - 126px); width: 100%; }
  .reviews { margin-top: 0; border-top: 0; }

  /* Reviews */
  .rev-head { grid-template-columns: 1fr 1fr; align-items: end; padding: 64px var(--pad) 40px; gap: 20px 60px; }
  .rev-head .lab { grid-column: 1 / -1; }
  .rev-head .h2 { margin-top: 24px; }
  .rev-rate { justify-self: end; font-size: 20px; }
  .rev { padding: 30px var(--pad) 32px; gap: 24px; min-height: 340px; }
  .rev blockquote { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.18; }

  /* Section heads: two halves */
  .sec-head { grid-template-columns: 1fr 1fr; padding: 0; gap: 0; }
  .sh-l { padding: 40px var(--pad) 48px; gap: 64px; }
  .sh-r, .svc .sh-r { padding: 40px var(--pad) 48px; border-left: 1px solid var(--line); align-self: stretch; display: flex; align-items: flex-end; }
  .svc, .how, .work { border-top: 1px solid var(--line); }
  .srow { grid-template-columns: 120px 300px 1fr; }
  .srow-n { padding-top: 32px; font-size: 18px; }
  .srow-img { padding: 15px; }
  .srow-img img { height: 340px; max-height: none; }
  .srow-b { padding: 32px var(--pad); gap: 16px; align-content: start; }
  .srow-b .h3 { margin-top: 18px; max-width: 16ch; }
  .srow-b > p:not(.lab-s):not(.spec) { max-width: 46ch; }
  .spec { margin-top: 10px; font-size: 15px; }

  /* How we work: title cell left, ruled steps right */
  .how { display: grid; grid-template-columns: 1fr 1fr; }
  .how-l { align-content: start; gap: 28px; padding: 64px var(--pad); border-right: 1px solid var(--line); }
  .how-l .lead { max-width: 24ch; }
  .how-list { border-top: 0; }
  .how-list li { padding: 30px var(--pad) 34px; gap: 10px; }
  .how-list li:last-child { border-bottom: 0; }
  .how-list .h4 { font-size: clamp(26px, 2.2vw, 34px); }
  .how-list li > p:last-child { max-width: 44ch; }

  /* Projects */
  .h2-xl { font-size: clamp(72px, 6.9vw, 100px); }
  .prow-l { min-height: 300px; padding: 30px var(--pad); }
  .prow .h3 { font-size: clamp(36px, 3vw, 44px); }
  .prow-r { grid-template-columns: 1fr 45%; }
  .pmeta { padding: 30px var(--pad); }
  .pmeta dd { font-size: 17px; }
  .prow img { max-height: 300px; padding: 15px; }

  /* Featured project */
  .case-ink { display: grid; grid-template-columns: 62.5% 1fr; }
  .case-l { padding: 40px var(--pad) 56px; gap: 28px; border-right: 1px solid var(--line-i); }
  .case-l .h2 { margin-top: 24px; font-size: clamp(46px, 4.2vw, 64px); }
  .case-p { font-size: clamp(20px, 1.7vw, 25px); max-width: 40ch; }
  .case-spec { align-content: start; border-top: 0; }
  .case-spec div { padding: 30px var(--pad); }
  .case-spec dd { font-size: 18px; }
  .metrics { grid-column: 1; border-top: 1px solid var(--line-i); border-right: 1px solid var(--line-i); padding: 30px 0 44px; }
  .metrics li { padding: 0 var(--pad); }
  .m-n { font-size: clamp(60px, 5vw, 80px); }
  .m-t { font-size: 15px; max-width: 22ch; }
  .case-end { display: grid; grid-template-columns: 50% 1fr; border-bottom: 1px solid var(--line); }
  .case-res { padding: 30px var(--pad) 48px; align-content: start; gap: 24px; }
  .case-big { font-size: clamp(40px, 3.6vw, 56px); margin-top: 20px; max-width: 12ch; }
  .case-res p:last-child { max-width: 40ch; font-size: 18px; }
  .case-fig { display: block; --fp: 15px; margin: 30px; height: 360px; }

  /* Company */
  .about { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
  .about > .ph { grid-column: 1 / -1; }
  .about-l { align-content: start; padding: 40px var(--pad) 64px; gap: 28px; border-right: 1px solid var(--line); }
  .about-l .h2 { margin-top: 40px; max-width: 14ch; }
  .about-p { font-size: 20px; max-width: 40ch; }
  .about-spec { display: block; border-top: 0; align-self: start; }
  .about-spec div:nth-child(odd) { border-right: 0; }
  .about-spec div { grid-template-columns: 170px 1fr; gap: 12px; padding: 22px var(--pad); }
  .about-spec dd { font-size: 19px; }

  /* Team: the checkerboard (3 x 3, three diagonal cells left empty) */
  .team { display: grid; grid-template-columns: 40% 1fr; border-top: 1px solid var(--line); }
  .team-l { align-content: start; gap: 28px; padding: 40px var(--pad); border-right: 1px solid var(--line); }
  .team-l .h2 { margin-top: 24px; max-width: 10ch; }
  .team-g { --rh: 250px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, var(--rh)); border-top: 0;
    background: linear-gradient(to left, var(--line) 1px, transparent 1px) 0 0 / calc(100% / 3) 100%,
                linear-gradient(to top, var(--line) 1px, transparent 1px) 0 0 / 100% var(--rh); }
  .tm { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; align-items: start; gap: 4px; padding: 16px !important; border: 0; }
  .tm:nth-child(1) { grid-area: 1 / 2; } .tm:nth-child(2) { grid-area: 1 / 3; } .tm:nth-child(3) { grid-area: 2 / 1; }
  .tm:nth-child(4) { grid-area: 2 / 3; } .tm:nth-child(5) { grid-area: 3 / 1; } .tm:nth-child(6) { grid-area: 3 / 2; }
  .tm-i { grid-row: auto; width: 120px; height: 150px; place-items: end start; padding: 12px; font-size: 32px; margin-bottom: 10px; }
  .tm-n { font-size: 18px; align-self: auto; }
  .tm-r { font-size: 14px; align-self: auto; }

  /* Values */
  .values { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
  .val-l { align-content: start; gap: 28px; padding: 40px var(--pad) 64px; border-right: 1px solid var(--line); }
  .val-l .h2 { margin-top: 24px; max-width: 12ch; }
  .val-list { border-top: 0; }
  .val summary { min-height: 76px; font-size: clamp(24px, 1.9vw, 30px); padding: 0 var(--pad); }
  .val-b { grid-template-columns: 1fr 300px; gap: 30px; padding: 4px var(--pad) 30px; font-size: 17px; }
  .val-fig { display: block; padding: 12px; background: var(--orange); }
  .val-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

  /* Contact: CONTACT cell + form */
  .ct { display: grid; grid-template-columns: 1fr 1fr; }
  .ct-l { align-content: start; gap: 28px; padding: calc(var(--bar-h) + 24px) var(--pad) 56px; border-right: 1px solid var(--line); }
  .ct-h { font-size: clamp(44px, 3.4vw, 56px); }
  .ct-sub { font-size: clamp(26px, 2.2vw, 34px); max-width: 18ch; }
  .ct-list { margin-top: 40px; max-width: 520px; }
  .form { padding: calc(var(--bar-h) + 16px) var(--pad) 56px; gap: 18px; }
  .form .sbtn { width: auto; justify-self: start; }
  .form .sbtn-l { min-width: 260px; }
  .where { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 30px; }
  .where-head { grid-column: 1 / -1; grid-template-columns: 1fr; padding: 30px var(--pad) 48px; gap: 64px; }
  .where-cards { grid-column: 1; grid-template-columns: 1fr 1fr; gap: 16px; padding: 30px var(--pad) 0; align-content: start; }
  .where-map { display: block; grid-column: 2; margin: 30px var(--pad) 0; border: 1px solid var(--line-o); }
  .where-map svg { display: block; width: 100%; height: auto; }
  .wc { padding: 24px; gap: 14px; }

  /* Closing band */
  .cta { display: grid; grid-template-columns: 33.33% 1fr; grid-template-rows: 1fr 1fr; min-height: 480px; background: var(--ink); color: var(--bone);
    background-image: linear-gradient(to right, transparent calc(100% - 140px), var(--orange) calc(100% - 140px)); background-size: 100% 50%; background-repeat: no-repeat; }
  .cta-p { grid-area: 1 / 1; padding: 30px var(--pad); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.25; letter-spacing: -.025em; border-right: 1px solid var(--line-i); border-bottom: 1px solid var(--line-i); }
  .cta-r { grid-area: 2 / 2; display: grid; align-content: end; gap: 28px; padding: 36px var(--pad) 40px; border-top: 1px solid var(--line-i); }
  .cta::before { content: ""; grid-area: 2 / 1; border-right: 1px solid var(--line-i); border-top: 1px solid var(--line-i); }
  .cta-h { font-size: clamp(44px, 4vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -.045em; max-width: 16ch; }
  .cta-btns { display: flex; flex-wrap: wrap; gap: 16px; }
  .cta-btns .sbtn-l { min-width: 240px; }

  /* Footer */
  .f-col { padding: 30px var(--pad) 40px; border-bottom: 1px solid var(--line-o); }
  .f-h { font-size: 15px; margin-bottom: 36px; }
  .f-col { font-size: 19px; }
  .f-legal { padding: 22px var(--pad); font-size: 14px; }

  /* Bundled desktop pages: each inner page opens on an orange split header (the original's page heads) */
  .ph { position: relative; grid-template-columns: 1fr 1fr; background: var(--orange); color: var(--ink); border-bottom: 1px solid var(--line-o); }
  .ph::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--line-o); }
  .ph-t { grid-column: 1 / -1; padding: calc(var(--bar-h) + 6px) 50% 48px var(--pad); border-bottom: 1px solid var(--line-o);
    font-size: clamp(56px, 4.9vw, 74px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
  .ph-t { padding-right: calc(50% + var(--pad)); }
  .ph-r { grid-column: 2; display: grid; gap: 30px; padding: 30px var(--pad) 48px; }
  .ph-lab { font-size: clamp(32px, 2.6vw, 40px); font-weight: 700; text-transform: uppercase; letter-spacing: -.04em; line-height: 1; }
  .ph-p { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; letter-spacing: -.03em; max-width: 30ch; }
  body:has(main > [data-pg="services"]:target, main > [data-pg="services"] :target) .svc > .ph,
  body:has(main > [data-pg="work"]:target, main > [data-pg="work"] :target) .work > .ph,
  body:has(main > [data-pg="about"]:target, main > [data-pg="about"] :target) .about > .ph { display: grid; }
  body:has(main > [data-pg]:not([data-pg="home"]):target, main > [data-pg]:not([data-pg="home"]) :target) :is(.svc, .work, .about) { border-top: 0; }
  body:has(main > [data-pg="contact"]:target, main > [data-pg="contact"] :target) .cta { display: none; }
}

/* ---------- Intro: the hero grid draws itself, then the type rises (CSS only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero .ln, .hero-b, .hg { animation: rise .5s var(--e-out) backwards; }
  .hero .ln:nth-child(1) { animation-delay: .1s; } .hero .ln:nth-child(2) { animation-delay: .14s; }
  .hero .ln:nth-child(3) { animation-delay: .18s; } .hero .ln:nth-child(4) { animation-delay: .22s; }
  .hero-b { animation-delay: .26s; }
  .hg { animation-delay: .3s; }
  .hg-beam { animation: beam .5s .15s var(--e-draw) both; }
  @media (min-width: 1080px) {
    .g-h { animation: drawx .55s var(--e-draw) both; }
    .g-v { animation: drawy .55s var(--e-draw) both; }
    .g-h2 { animation-delay: .03s; } .g-h3 { animation-delay: .06s; } .g-h4 { animation-delay: .09s; }
    .g-v1 { animation-delay: .05s; } .g-v2 { animation-delay: .08s; }
  }
}
@keyframes rise { from { clip-path: inset(0 0 100% 0); transform: translateY(22px); } to { clip-path: inset(0 0 -20% 0); } }
@keyframes drawx { from { transform: scaleX(0); } }
@keyframes drawy { from { transform: scaleY(0); } }
@keyframes beam { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
  .mnav:target .mnav-panel { animation: none; }
}