.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(239, 239, 239, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--ink);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: 1px; }
.brand-mark {
  width: 34px; height: 34px; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700;
}
.brand span b { color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--g3); }
.nav-links a.active { border-bottom-color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.hamburger { display: none; background: none; border: 2px solid var(--ink); padding: 7px 10px; font-size: 16px; line-height: 1; }

.hero { position: relative; overflow: hidden; border-bottom: 2px solid var(--ink); background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 36px 36px; }
.hero-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 40px; align-items: center; padding: 84px 0 64px; position: relative; z-index: 2; }
.hero h1 { margin: 18px 0 22px; }
.hero-sub { font-size: 16px; line-height: 1.65; max-width: 560px; color: var(--g5); margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-whatsapp { display: inline-flex; align-items: center; gap: 9px; }
.whatsapp-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.whatsapp-icon svg { width: 20px; height: 20px; fill: currentColor; }
.hero-panel {
  border: 2px solid var(--ink); background: var(--paper); box-shadow: var(--shadow-hard);
  padding: 0; transform: rotate(1.2deg);
}
.hero-panel-head { background: var(--ink); color: var(--paper); padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; }
.hero-panel-body { padding: 20px; display: grid; gap: 12px; }
.hp-row { display: flex; justify-content: space-between; align-items: center; border: 1.5px solid var(--g2); padding: 10px 12px; font-size: 13px; font-weight: 600; }
.hp-row .mono { font-size: 11px; color: var(--g4); }
.hp-bar { height: 10px; }

.hero-marquee {
  border-top: 2px solid var(--ink);
  background: var(--ink); color: var(--paper);
  overflow: hidden; white-space: nowrap; padding: 13px 0; position: relative; z-index: 2;
}
.marquee-track { display: inline-block; animation: marquee 28s linear infinite; }
.marquee-track span {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  padding: 0 22px; position: relative;
}
.marquee-track span::after { content: "■"; position: absolute; right: -8px; font-size: 8px; top: 50%; transform: translateY(-50%); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.stats-band { border-bottom: 2px solid var(--ink); background: var(--paper); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-cell { padding: 34px 20px; text-align: center; border-right: 1.5px dashed var(--g3); }
.stat-cell:last-child { border-right: none; }
.stat-num { font-size: clamp(30px, 4vw, 46px); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--g5); margin-top: 6px; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card { padding: 0; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; }
.service-card::after {
  content: ""; position: absolute; inset: auto -30% -55% auto;
  width: 140px; height: 140px; background: var(--g1); transform: rotate(45deg);
  transition: all 0.25s ease; z-index: 0;
}
.service-card:hover::after { background: var(--ink); transform: rotate(45deg) scale(1.6); }
/* Stretched link: the main link fills the card and keeps the service anchor as its
   destination, while the sibling "View demos" link sits above it in the column so
   both destinations stay independently clickable and keyboard reachable. */
.service-card-main { display: block; padding: 24px; position: relative; z-index: 1; flex: 1 1 auto; }
.service-card-main::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.service-card-main:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.sc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; position: relative; z-index: 1; }
.sc-icon {
  width: 46px; height: 46px; border: 2px solid var(--ink);
  display: grid; place-items: center; font-size: 21px; background: var(--paper);
}
.sc-num { font-family: var(--font-mono); font-size: 11px; color: var(--g4); }
.service-card h3 { font-size: 19px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; position: relative; z-index: 1; }
.service-card p { font-size: 13.5px; color: var(--g5); line-height: 1.6; position: relative; z-index: 1; }
.sc-link { display: inline-flex; margin-top: 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 2px solid var(--ink); position: relative; z-index: 1; }

.process-strip { background: var(--ink); color: var(--paper); }
.process-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.process-step { padding: 44px 22px; border-right: 1px solid rgba(239, 239, 239,0.18); position: relative; }
.process-step:last-child { border-right: none; }
.ps-num { font-family: var(--font-mono); font-size: 12px; opacity: 0.55; }
.ps-title { font-size: 18px; font-weight: 700; text-transform: uppercase; margin: 10px 0 8px; }
.process-step p { font-size: 12.5px; line-height: 1.6; opacity: 0.75; }

/* Interactive process board */
.process-board-section { padding: 76px 0 84px; border-top: 2px solid var(--ink); overflow: hidden; }
.process-board-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:34px; }
.process-board-head p { max-width:420px; color:var(--g5); font-size:14px; line-height:1.7; }
.process-board { position:relative; min-height:590px; border:2px solid var(--ink); background:rgba(239, 239, 239,.82); overflow:hidden; isolation:isolate; box-shadow:8px 8px 0 rgba(16, 16, 16,.16); }
.board-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(16, 16, 16,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(16, 16, 16,.055) 1px,transparent 1px); background-size:28px 28px; }
.board-frame { position:absolute; inset:18px; border:2px solid rgba(16, 16, 16,.72); pointer-events:none; }
.process-wire { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:500; }.process-wire [data-process-wire-line] { fill:none; stroke:#b30000; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1800; stroke-dashoffset:1800; transition:stroke-dashoffset 1.5s cubic-bezier(.65,0,.25,1),opacity .3s ease; pointer-events:none; }
.process-board.is-visible .process-wire [data-process-wire-line] { stroke-dashoffset:0; }
.process-wire [data-process-wire-hit] { fill:none; stroke:transparent; stroke-width:22px; stroke-linecap:round; stroke-linejoin:round; pointer-events:stroke; cursor:copy; }
.process-wire.is-thread-hot [data-process-wire-line] { stroke-width:3.4; }
.thread-pin { fill:#b30000; stroke:#7f0000; stroke-width:2; cursor:grab; pointer-events:auto; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.thread-pin.is-dragging { cursor:grabbing; }
.board-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:600; pointer-events:none; touch-action:none; transition:opacity .3s ease; }
.process-board.detail-open .board-canvas { opacity:0; }
.process-board.tool-pen .board-canvas { pointer-events:auto; cursor:crosshair; }
.process-board.tool-duster .board-canvas { pointer-events:auto; cursor:cell; }
.process-board.tool-pen .process-note,.process-board.tool-pen .board-note,.process-board.tool-pen .process-wire,
.process-board.tool-duster .process-note,.process-board.tool-duster .board-note,.process-board.tool-duster .process-wire { pointer-events:none; }
.board-tools { position:absolute; top:14px; right:14px; z-index:610; display:flex; gap:8px; }
.board-tool { padding:7px 13px; font-size:11px; background:rgba(239, 239, 239,.92); }
.board-tool.active { background:var(--ink); color:var(--paper); }
.process-board.detail-open .board-tools { opacity:0; pointer-events:none; transition:opacity .3s ease; }
.board-note,.process-note { position:absolute; background:rgba(239, 239, 239,.98); border:1.5px solid rgba(16, 16, 16,.68); box-shadow:4px 5px 0 rgba(16, 16, 16,.10); }
.board-note { z-index:10; padding:10px 14px; font-family:var(--font-mono); font-size:10px; line-height:1.25; transform:rotate(-4deg) scale(.72); color:var(--g5); opacity:0; transition:opacity .35s ease,filter .35s ease,box-shadow .2s ease; cursor:grab; touch-action:none; user-select:none; }
.board-note:active { cursor:grabbing; }
.board-note.is-dragging { box-shadow:8px 10px 0 rgba(16, 16, 16,.18); filter:none!important; transition:none; }
.board-note:focus-visible { outline:2px solid #b30000; outline-offset:3px; }
.board-note small { opacity:.75; font-size:9px; }
.ghost { opacity:0; } .ghost-1{left:7%;top:27%;transform:rotate(-4deg) scale(.72)}.ghost-2{left:42%;top:14%;transform:rotate(4deg) scale(.72)}.ghost-3{left:27%;top:63%;transform:rotate(3deg) scale(.72)}.ghost-4{left:56%;top:69%;transform:rotate(-5deg) scale(.72)}.ghost-5{right:8%;top:27%;transform:rotate(4deg) scale(.72)}.ghost-6{right:18%;bottom:9%;transform:rotate(-3deg) scale(.72)}
.board-note.is-popped { opacity:1; animation:smallNotePop .55s both cubic-bezier(.16,1,.3,1); }
.old-note { z-index:10; background:#fff6df; border-color:rgba(255, 154, 0, 0.68); color:rgba(60,42,4,.92); opacity:0; transform:rotate(-5deg) scale(.7); }
.old-note.is-popped { opacity:1; animation:goldNotePop .62s both cubic-bezier(.16,1,.3,1); }
.old-1{left:18%;top:8%;transform:rotate(-6deg) scale(.7)}.old-2{left:38%;top:52%;transform:rotate(5deg) scale(.7)}.old-3{left:60%;top:8%;transform:rotate(-3deg) scale(.7)}.old-4{right:16%;top:63%;transform:rotate(6deg) scale(.7)}.old-5{right:3%;top:13%;transform:rotate(3deg) scale(.7)}.old-6{left:5%;bottom:12%;transform:rotate(-4deg) scale(.7)}
.ghost-pin { position:absolute; width:9px; height:9px; border-radius:50%; left:50%; top:-6px; transform:translateX(-50%) scale(0); background:#b30000; border:1px solid #7f0000; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.board-note.is-popped .ghost-pin { animation:pinDrop .28s .42s both cubic-bezier(.16,1,.3,1); }
.process-note { z-index:100; width:184px; min-height:185px; padding:23px 19px 17px; cursor:grab; touch-action:none; user-select:none; transform-origin:center; opacity:0; transition:opacity .4s ease,filter .4s ease,box-shadow .2s ease; }
.process-note.is-popped { opacity:1; animation:notePop .62s both cubic-bezier(.16,1,.3,1); }
.process-note:active { cursor:grabbing; }
.process-note.is-dragging { box-shadow:9px 11px 0 rgba(16, 16, 16,.2); transition:none; }
.process-note:focus-visible { outline:2px solid #b30000; outline-offset:4px; }
.note-1{left:10%;top:19%;transform:rotate(-3deg);animation-delay:.15s}.note-2{left:29%;top:35%;transform:rotate(2deg);animation-delay:.32s}.note-3{left:48%;top:45%;transform:rotate(-2deg);animation-delay:.49s}.note-4{left:67%;top:27%;transform:rotate(3deg);animation-delay:.66s}.note-5{right:7%;top:39%;transform:rotate(-3deg);animation-delay:.83s}
@keyframes notePop { from{opacity:0;transform:translateY(34px) scale(.72) rotate(0)} to{opacity:1} }
@keyframes smallNotePop { from{opacity:0;transform:translateY(18px) scale(.72)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes goldNotePop { from{opacity:0;transform:translateY(24px) scale(.68) rotate(0)} to{opacity:1;transform:translateY(0) scale(1) rotate(var(--note-rot,-5deg))} }
@keyframes pinDrop { 0%{transform:translateX(-50%) translateY(-9px) scale(0)} 70%{transform:translateX(-50%) translateY(1px) scale(1.12)} 100%{transform:translateX(-50%) translateY(0) scale(1)} }
.pin,.detail-pin { position:absolute; width:15px; height:15px; border-radius:50%; background:#b30000; border:2px solid #7f0000; box-shadow:0 2px 3px rgba(0,0,0,.2); }
.pin { top:-8px; left:50%; transform:translateX(-50%) scale(0); z-index:3; }
.process-note.is-popped .pin { animation:pinDrop .28s .46s both cubic-bezier(.16,1,.3,1); }
.note-number,.detail-num { font-family:var(--font-mono); font-size:11px; color:var(--g4); letter-spacing:1px; }
.process-note h3 { margin:7px 0 10px; font-size:20px; letter-spacing:.4px; }
.note-icon { position:absolute; right:16px; top:35px; font-family:var(--font-mono); font-size:22px; }
.process-note ul { list-style:none; display:grid; gap:5px; font-size:10.5px; color:var(--g5); line-height:1.25; }
.process-note li::before { content:"□"; margin-right:6px; color:var(--ink); }
.process-scrim { position:absolute; inset:0; z-index:520; border:0; background:rgba(239, 239, 239,.42); backdrop-filter:blur(9px); opacity:0; pointer-events:none; transition:opacity .45s ease; }
.process-detail { position:absolute; z-index:530; width:min(430px,calc(100% - 40px)); left:50%; top:50%; transform:translate(-50%,-47%) scale(.82); opacity:0; pointer-events:none; background:rgba(239, 239, 239,.98); border:2px solid var(--ink); box-shadow:12px 14px 0 rgba(16, 16, 16,.22); padding:34px 34px 28px; transition:opacity .45s ease,transform .65s cubic-bezier(.16,1,.3,1); }
.process-detail .detail-pin { top:12px; left:50%; transform:translateX(-50%); }
.process-detail-close { position:absolute; right:12px; top:10px; border:0; background:none; font-size:26px; line-height:1; cursor:pointer; }
.detail-num { display:block; margin-top:4px; }
.detail-icon { position:absolute; right:35px; top:43px; font-family:var(--font-mono); font-size:30px; }
.process-detail h3 { font-size:34px; margin:9px 0 14px; letter-spacing:-.5px; }
.detail-rule { height:2px; background:var(--ink); margin-bottom:18px; }
.process-detail p { font-size:14px; line-height:1.7; color:var(--g5); margin-bottom:16px; }
.detail-list { list-style:none; display:grid; gap:9px; margin-bottom:24px; }
.detail-list li { font-size:12.5px; font-weight:600; display:flex; gap:9px; align-items:flex-start; }
.detail-list li::before { content:"✓"; font-family:var(--font-mono); }
.detail-cta { width:100%; font-size:11px; }
.process-board.detail-open .process-scrim { opacity:1; pointer-events:auto; }
.process-board.detail-open .process-detail { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.process-board.detail-open .process-note,.process-board.detail-open .board-note { filter:blur(6px); opacity:0; pointer-events:none; }
.process-board.detail-open .process-wire { opacity:0; }
@media (prefers-reduced-motion:reduce) { .process-note,.board-note,.process-wire [data-process-wire-line],.process-detail,.process-scrim,.pin,.ghost-pin { animation:none!important; transition:none!important; } .process-note.is-popped{opacity:1}.board-note.is-popped{opacity:1}.old-note.is-popped{opacity:1}.pin,.ghost-pin{transform:translateX(-50%) scale(1)} }


.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.work-card { overflow: hidden; cursor: pointer; }
.work-img { aspect-ratio: 8/5; overflow: hidden; border-bottom: 2px solid var(--ink); background: var(--g1); }
.work-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.work-card:hover .work-img img { transform: scale(1.05); }
.work-body { padding: 18px 20px 20px; }
.work-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--g4); }
.work-body h3 { font-size: 18px; margin: 6px 0 8px; }
.work-body p { font-size: 13px; color: var(--g5); line-height: 1.55; }

.testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.testi-card { padding: 26px; }
.testi-quote-mark { font-size: 42px; line-height: 0.6; font-family: Georgia, serif; margin-bottom: 14px; }
.testi-text { font-size: 14.5px; line-height: 1.7; margin-bottom: 18px; }
.testi-person { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1.5px dashed var(--g3); padding-top: 14px; }
.testi-person b { display: block; font-size: 14px; }
.testi-person small { color: var(--g4); font-size: 12px; }

.cta-band { background: var(--ink); color: var(--paper); border-top: 2px solid var(--ink); position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(239, 239, 239,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 239, 239,0.06) 1px, transparent 1px);
  background-size: 36px 36px;
}
.cta-inner { position: relative; z-index: 1; padding: 84px 0; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band .btn { border-color: var(--paper); background: transparent; color: var(--paper); box-shadow: none; }
.cta-band .btn:hover { background: var(--paper); color: var(--ink); box-shadow: 4px 4px 0 rgba(239, 239, 239,0.25); }
.cta-band .btn-solid { background: var(--paper); color: var(--ink); }

footer.site-footer { background: var(--ink); color: var(--paper); border-top: 2px solid var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding: 60px 0 40px; }
.footer-brand p { font-size: 13px; line-height: 1.7; opacity: 0.7; margin-top: 14px; max-width: 300px; }
.f-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.6; margin-bottom: 16px; }
.f-col a, .f-col li { display: block; font-size: 13.5px; padding: 5px 0; opacity: 0.85; }
.f-col a:hover { opacity: 1; text-decoration: underline; }
.footer-base { border-top: 1px solid rgba(239, 239, 239,0.15); padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; font-family: var(--font-mono); opacity: 0.65; }

.page-hero { border-bottom: 2px solid var(--ink); padding: 70px 0 54px; }
.page-hero p { margin-top: 16px; max-width: 600px; color: var(--g5); font-size: 15.5px; line-height: 1.7; }
.crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--g4); margin-bottom: 14px; }

.svc-anchor-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.svc-section { padding: 56px 0; border-bottom: 1.5px dashed var(--g3); scroll-margin-top: 80px; }
.svc-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; }
.svc-icon-big {
  width: 62px; height: 62px; border: 2px solid var(--ink); display: grid; place-items: center;
  font-size: 28px; margin-bottom: 18px; background: var(--paper);
}
.svc-layout h2 { font-size: clamp(24px, 3vw, 36px); text-transform: uppercase; margin-bottom: 14px; }
.svc-layout > div > p { color: var(--g5); font-size: 14.5px; line-height: 1.75; }
.svc-list-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--g4); margin: 26px 0 12px; }
.svc-checks li { display: flex; gap: 10px; font-size: 14px; padding: 7px 0; border-bottom: 1px dashed var(--g2); }
.svc-checks li::before { content: "✓"; font-weight: 700; }
.svc-side { display: grid; gap: 16px; }
.svc-price-card { padding: 24px; }
.svc-price-card .price { font-size: 34px; font-weight: 700; margin: 8px 0 4px; }
.svc-steps { counter-reset: step; margin-top: 10px; }
.svc-steps li { display: flex; gap: 12px; padding: 9px 0; font-size: 13.5px; align-items: baseline; }
.svc-steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  border: 1.5px solid var(--ink); padding: 2px 6px;
}

.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 34px; }

.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 44px; align-items: start; }
.info-tile { display: flex; gap: 14px; padding: 18px; border: 2px solid var(--ink); background: var(--paper); margin-bottom: 14px; align-items: flex-start; }
.info-tile .icn { width: 42px; height: 42px; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.info-tile b { display: block; font-size: 14px; margin-bottom: 3px; }
.info-tile span { font-size: 13px; color: var(--g5); word-break: break-all; }
.socials-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.social-pill {
  border: 2px solid var(--ink); padding: 8px 16px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; transition: all 0.15s ease;
}
.social-pill:hover { background: var(--ink); color: var(--paper); }

.faq-list details { border: 2px solid var(--ink); background: var(--paper); margin-bottom: 12px; }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 700; font-size: 14.5px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--font-mono); font-size: 18px; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list summary::after { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-list details[open] summary::after { transform: rotate(180deg); }
/* Animated panel: a 0fr -> 1fr grid row is the one height transition that works
   without measuring. Closing is driven from site.js, because a native <details>
   hides its content the instant [open] is removed. */
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-list details[open]:not(.faq-closing) .faq-answer { grid-template-rows: 1fr; }
.faq-answer > p { overflow: hidden; min-height: 0; margin: 0; padding: 0 18px 16px; font-size: 13.5px; color: var(--g5); line-height: 1.7; }

.modal-project-img { border-bottom: 2px solid var(--ink); aspect-ratio: 21/9; overflow: hidden; }
.modal-project-img img { width: 100%; height: 100%; object-fit: cover; }
.mp-meta { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.review-box { border: 2px solid var(--ink); padding: 18px; background: var(--g1); margin-top: 18px; }
.review-box .who { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; padding: 56px 0 48px; }
  .hero-panel { transform: none; max-width: 480px; }
  .services-grid, .works-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2) { border-right: none; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2n) { border-right: none; }
  .svc-layout, .contact-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--paper); border-bottom: 2px solid var(--ink);
    flex-direction: column; align-items: stretch; padding: 18px; gap: 4px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 8px; border-bottom: 1px dashed var(--g2); }
  .hamburger { display: block; }
  .nav-cta .btn { display: none; }
}

@media (max-width: 640px) {
  .services-grid, .works-grid, .testi-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step { border-right: none; border-bottom: 1px solid rgba(239, 239, 239, 0.18); }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-inner { padding: 60px 0; }
}

.brand-mark { width: 34px; height: 34px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
body.process-modal-open { overflow: hidden; }
.js .board-note, .js .process-note, .js .ghost, .js .old-note { opacity: 0; }
.js .process-note.is-popped, .js .board-note.is-popped, .js .old-note.is-popped { opacity: 1; }
html:not(.js) .process-board > .process-note, html:not(.js) .process-board > .board-note { display: none; }
.process-noscript { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 24px; background: var(--paper); }
.process-noscript article { border: 2px solid var(--ink); padding: 18px; }
.process-noscript span, .process-noscript h3 { font-family: var(--font-mono); text-transform: uppercase; }
.process-noscript p, .process-noscript li { color: var(--g5); line-height: 1.6; }
.ph-cover { width: 100%; height: 100%; min-height: 220px; display: grid; place-content: center; justify-items: center; gap: 18px; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 36px 36px; }
.ph-initials { font-family: var(--font-mono); font-size: clamp(54px, 9vw, 110px); font-weight: 700; }
.ph-label { background: var(--ink); color: var(--paper); padding: 8px 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.case-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr); gap: 42px; align-items: start; }
.work-hero-img { overflow: hidden; margin-bottom: 28px; }
.work-hero-img img, .work-hero-img .ph-cover { width: 100%; aspect-ratio: 2/1; object-fit: cover; }
.case-lead { font-size: 21px; line-height: 1.6; font-weight: 600; margin: 0 0 24px; }
.case-p { font-size: 15px; line-height: 1.8; color: var(--g5); margin: 0 0 18px; }
.two-col-site { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; align-items: start; }
.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 38px; align-items: start; }
.legal-toc { position: sticky; top: 92px; display: grid; gap: 8px; max-height: calc(100vh - 120px); overflow-y: auto; }
.legal-toc a { font-size: 12px; color: var(--g5); line-height: 1.4; }
.legal-body { max-width: 780px; }
.legal-body h2 { font-size: 22px; text-transform: uppercase; margin: 34px 0 12px; scroll-margin-top: 92px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { color: var(--g5); font-size: 14.5px; line-height: 1.8; margin-bottom: 14px; }
.legal-body ul { margin: 8px 0 18px; }
.info-tile a { display: block; font-size: 13px; color: var(--g5); word-break: break-word; }
.service-row { cursor: default; }

@media (max-width: 980px) {
  .case-layout, .two-col-site, .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; max-height: none; }
  .process-board-section { overflow-x: auto; }
  .process-board { min-width: 920px; }
  .process-board-head { align-items: flex-start; flex-direction: column; gap: 18px; }
}

@media (max-width: 640px) {
  .values-grid, .process-noscript { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cell { border-right: 1px dashed var(--g3); border-bottom: 0; }
  .stat-cell:nth-child(2n) { border-right: none; }
}

@media (prefers-reduced-motion: reduce) {
  .process-note, .board-note, .process-wire [data-process-wire-line], .process-detail, .process-scrim, .pin, .ghost-pin { animation: none !important; transition: none !important; }
  .js .process-note.is-popped, .js .board-note.is-popped, .js .old-note.is-popped { opacity: 1; }
  .js .pin, .js .ghost-pin { transform: translateX(-50%) scale(1); }
  .js .process-board.is-visible .process-wire [data-process-wire-line] { stroke-dashoffset: 0; }
}

/* ============================================================== BREADCRUMBS */
/* Several components below set an explicit display, which would otherwise beat the
   user-agent `[hidden]` rule that the filter notice and gallery section rely on. */
[hidden] { display: none !important; }
.crumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumb-item + .crumb-item::before { content: "/"; margin-right: 6px; color: var(--g3); }
.crumb-item [aria-current="page"] { color: var(--g5); }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.f-address { font-size: 13.5px; opacity: 0.85; }

/* =========================================================== EMPTY BANNERS */
/* Motion is transform/opacity only; theme.css collapses every animation and
   transition to 0.01ms under prefers-reduced-motion, and the `both` fill keeps
   the resting state identical either way. */
.empty-banner {
  /* No top border of its own: on Home/Work the preceding section or page hero already
     draws that line, and two adjacent 2px rules would read as a 4px slab. */
  border-bottom: 2px solid var(--ink);
  background: var(--paper); overflow: hidden; position: relative;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 36px 36px;
}
.empty-banner-inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 44px; align-items: center; padding: 72px 0; position: relative; z-index: 1;
}
.empty-banner-copy { animation: bannerIn 0.62s both cubic-bezier(0.16, 1, 0.3, 1); }
.empty-banner-copy .h-lg { margin-top: 14px; }
.empty-banner-text { margin-top: 18px; font-size: 15px; line-height: 1.75; color: var(--g5); max-width: 60ch; }
.empty-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.empty-banner-secondary { box-shadow: var(--shadow-soft); }
.empty-banner-secondary:hover { box-shadow: var(--shadow-hard); }

.empty-banner-art { position: relative; aspect-ratio: 4 / 3; min-height: 190px; }
.empty-banner-frame {
  position: absolute; border: 2px solid var(--ink); background: var(--paper);
  opacity: 0; animation: frameIn 0.7s both cubic-bezier(0.16, 1, 0.3, 1);
}
.empty-banner-frame:nth-child(1) { inset: 6% 12% 44% 4%; animation-delay: 0.1s; }
.empty-banner-frame:nth-child(2) { inset: 22% 4% 24% 22%; animation-delay: 0.2s; box-shadow: var(--shadow-hard); }
.empty-banner-frame:nth-child(3) { inset: 46% 26% 6% 12%; animation-delay: 0.3s; }
.empty-banner-sweep {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(16, 16, 16, 0.09) 50%, transparent 62%);
  transform: translateX(-100%); animation: sweep 3.6s 0.45s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
@keyframes bannerIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes frameIn { from { opacity: 0; transform: translateY(20px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.empty-banner:hover .empty-banner-sweep { animation-play-state: paused; }

/* ============================================================== HOME / SAMPLES */
.samples-cta {
  margin-top: 30px; border: 2px solid var(--ink); background: var(--paper);
  padding: 22px 26px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; box-shadow: var(--shadow-hard);
}
.samples-cta-text { font-size: 14px; line-height: 1.65; color: var(--g5); max-width: 56ch; }
.samples-cta-link { flex-shrink: 0; }

/* ============================================================= WORK FILTERS */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 34px; }
.filter-empty {
  border: 2px dashed var(--g3); background: var(--paper); padding: 40px 24px;
  text-align: center; font-family: var(--font-mono); font-size: 13px; color: var(--g5);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.filter-empty-title { color: var(--ink); font-size: 15px; font-weight: 700; }

/* ========================================================= CASE STUDY SECTIONS */
.case-preview-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 26px; }
.case-preview-hint { font-family: var(--font-mono); font-size: 11px; color: var(--g4); letter-spacing: 0.5px; }
.case-back-link { background: transparent; }

.case-showcase { margin-top: 34px; display: grid; gap: 0; }
.case-showcase-block {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px;
  padding: 26px 0; border-top: 1.5px dashed var(--g3); align-items: start;
}
.case-showcase-block:last-child { border-bottom: 1.5px dashed var(--g3); }
.case-showcase-label .svc-list-title { color: var(--ink); font-weight: 700; }
.case-showcase-body .case-p:last-child { margin-bottom: 0; }

.case-media { margin-top: 34px; padding-top: 26px; border-top: 1.5px dashed var(--g3); }
.case-media-note { font-size: 14px; line-height: 1.7; color: var(--g5); }
.case-media-note a { text-decoration: underline; }
.video-poster {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 0; overflow: hidden;
  background-image:
    linear-gradient(rgba(239, 239, 239,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 239, 239,0.07) 1px, transparent 1px);
  background-size: 36px 36px;
}
.video-poster::after {
  content: ""; position: absolute; inset: 10px; border: 2px solid rgba(239, 239, 239,0.28); pointer-events: none;
}
.video-poster-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 34px; line-height: 1; padding-left: 10px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.video-poster-hint {
  position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
}
.video-poster:hover .video-poster-play { transform: scale(1.12); }
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 2px solid var(--ink); background: var(--ink); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.case-gallery-section { border-top: 2px solid var(--ink); }
.case-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.case-gallery figure { margin: 0; border: 2px solid var(--ink); background: var(--paper); overflow: hidden; }
.case-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.case-gallery figcaption {
  padding: 10px 12px; border-top: 1.5px solid var(--ink);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--g5);
}


/* ====================================================== HOME EMPTY STATES
   Centred invitation shown inside a home section that has nothing to list yet.
   The section keeps its own head and link, so the page never changes shape
   between the empty and populated states. */
.section-empty { position: relative; padding: 54px 0 64px; }
.section-empty-inner {
  position: relative; z-index: 1;
  max-width: 620px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.section-empty-quote {
  font-family: var(--font-mono); font-size: 22px; color: var(--g3); letter-spacing: 2px; line-height: 1;
}
.section-empty-title {
  margin: 0; font-weight: 700; line-height: 1.22; letter-spacing: -0.5px;
  font-size: clamp(26px, 3.2vw, 38px); text-wrap: balance;
}
.section-empty--portfolio .section-empty-title {
  text-transform: uppercase; letter-spacing: -1px; font-size: clamp(28px, 4vw, 46px);
}
.section-empty-line { display: block; }
.section-empty-line--tail { margin-top: 26px; }
.section-empty-text {
  margin: 0; max-width: 54ch; font-size: 14.5px; line-height: 1.75; color: var(--g5); text-wrap: pretty;
}
.section-empty-stars { font-size: 15px; letter-spacing: 7px; color: var(--g3); }
.section-empty-caption {
  margin: 0; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--g4);
}
.section-empty-cta { margin-top: 6px; }

/* Decorative line art. Absolute so it never affects the centred column, and
   hidden on small screens where there is no room for it to read as anything
   but clutter. */
.section-empty-doodles { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--ink); }
.section-empty-doodles .doodle { position: absolute; opacity: 0.78; }
.doodle--ruler   { top: 6%;  left: 2%;    width: 92px; }
.doodle--pencil  { top: 10%; right: 14%;  width: 36px; }
.doodle--search  { top: 26%; right: 3%;   width: 62px; }
.doodle--compass { bottom: 6%; right: 9%; width: 52px; }
.doodle--chip    { bottom: 14%; right: 22%; width: 44px; opacity: 0.5; }
.doodle--stack   { bottom: 8%; left: 4%;  width: 84px; }

@media (max-width: 980px) {
  .section-empty-doodles { display: none; }
  .section-empty { padding: 40px 0 46px; }
  .section-empty-line--tail { margin-top: 18px; }
}

/* ================================================================ FOUNDERS */
.founders-note { max-width: 420px; color: var(--g5); font-size: 15.5px; line-height: 1.75; }
.founders-list { display: grid; gap: 56px; }
.founder-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px; align-items: center;
}
.founder-row--flip .founder-text { order: 2; }
.founder-row--flip .founder-figure { order: 1; }
.founder-kicker { margin-bottom: 12px; font-size: 12px; letter-spacing: 2px; }
.founder-text h3 { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 16px; }
.founder-short { font-size: 19.5px; line-height: 1.65; font-weight: 600; margin-bottom: 16px; }
.founder-long { font-size: 16.5px; line-height: 1.8; color: var(--g5); margin-bottom: 24px; }

/* Portrait stack: the ASCII layer is masked by a pointer-tracked circle so the
   photograph beneath reads through only under the cursor. The mask radius is a
   custom property so JS only ever writes two numbers, never a style string.
   No frame, no shadow — the halftone edge is the edge. */
.founder-figure { margin: 0; }
.founder-frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper);
}
.founder-portrait { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-portrait--photo { position: absolute; inset: 0; }
.founder-portrait--ascii {
  position: relative; z-index: 1;
  --spot-x: 50%; --spot-y: 50%; --spot-r: 0px;
  -webkit-mask-image: radial-gradient(circle var(--spot-r) at var(--spot-x) var(--spot-y), transparent 97%, #000 100%);
  mask-image: radial-gradient(circle var(--spot-r) at var(--spot-x) var(--spot-y), transparent 97%, #000 100%);
  transition: opacity 0.35s ease;
}
/* Toggled to the plain photograph: drop the ASCII layer entirely. */
.founder-frame.is-photo .founder-portrait--ascii { opacity: 0; pointer-events: none; }

.founder-toggle {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.founder-toggle:hover { background: var(--ink); color: var(--paper); }
.founder-toggle:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.founder-toggle-dot {
  width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%;
  transition: background 0.18s ease;
}
.founder-frame.is-photo .founder-toggle-dot { background: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .founder-portrait--ascii { transition: none; }
}

.founder-ph {
  width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 16px;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 36px 36px; background-color: var(--paper);
}
.founder-ph-initials { font-family: var(--font-mono); font-size: clamp(48px, 8vw, 92px); font-weight: 700; }
.founder-ph-label { background: var(--ink); color: var(--paper); padding: 7px 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; }

/* ============================================================ AVAILABILITY */
.availability {
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 28px 26px; margin-bottom: 20px; box-shadow: var(--shadow-hard);
  position: relative; overflow: hidden;
}
.availability .kicker { color: var(--paper); }
.availability .kicker::before { background: var(--paper); }
.availability-text { font-size: 14.5px; line-height: 1.75; opacity: 0.85; margin-top: 14px; }
.availability-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(239, 239, 239, 0.22);
}
.availability-pin { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.availability-sig { font-family: var(--font-mono); font-size: 20px; font-weight: 700; }
.availability .btn { margin-top: 22px; width: 100%; }
.availability .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 rgba(239, 239, 239, 0.28); }

/* ---------------------------------------------------------- UI AUDIT TWEAKS */
.page-hero p, .empty-banner-text, .founders-note, .samples-cta-text { text-wrap: pretty; }
.h-lg, .h-xl, .h-md, .h-sm { text-wrap: balance; }
.chip:focus-visible, .social-pill:focus-visible, .info-tile a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.faq-list summary:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.svc-price-card .price, .founder-role, .founder-name { overflow-wrap: anywhere; }
.crumb-item a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

@media (max-width: 980px) {
  .empty-banner-inner, .founder-row { grid-template-columns: 1fr; gap: 32px; }
  .founder-row--flip .founder-text, .founder-row--flip .founder-figure { order: 0; }
  .empty-banner-art { max-width: 380px; }
  .case-gallery { grid-template-columns: repeat(2, 1fr); }
  .case-showcase-block { grid-template-columns: 1fr; gap: 10px; }
  .samples-cta { box-shadow: var(--shadow-soft); }
}

@media (max-width: 640px) {
  .case-gallery { grid-template-columns: 1fr; }
  .empty-banner-inner { padding: 52px 0; }
  .samples-cta { padding: 18px; }
  .legal-body, .case-p, .case-lead { max-width: 68ch; }
  .work-hero-img img { aspect-ratio: 4/3; }
  .founder-frame { aspect-ratio: 1/1; }
  .process-board { min-width: 0; min-height: 0; padding: 16px; overflow: visible; }
  .process-board > .board-grid, .process-board > .board-frame, .process-board > .process-wire, .process-board > .board-canvas { display: none; }
  .process-board > .board-note, .process-board > .old-note { display: none; }
  .process-note { position: static; width: auto; min-height: 0; margin: 10px 0; transform: none; }
  .process-note .note-icon { top: 18px; }
  .process-detail { position: fixed; inset: auto 16px 16px; width: auto; left: 16px; right: 16px; transform: translateY(10px); padding: 26px 20px 20px; max-height: 82dvh; overflow-y: auto; }
  .process-board.detail-open .process-detail { transform: none; }
  .process-scrim { position: fixed; inset: 0; }
}

@media (max-width: 400px) {
  .stat-label { letter-spacing: 1px; }
  .hero-actions .btn { width: 100%; }
}