:root{
  --paper:#F2F1EC; --ink:#121212; --line:#000000; --accent:#FF4B1F; --muted:#6E6C64; --paper-2:#E9E7DD;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper); background-image:linear-gradient(var(--paper-2) 1px, transparent 1px), linear-gradient(90deg, var(--paper-2) 1px, transparent 1px); background-size:40px 40px; color:var(--ink); font-family:'Space Grotesk',sans-serif; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
.wrap{max-width:1200px; margin:0 auto; padding:0 1.5rem;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;}
h1,h2{text-wrap:balance; letter-spacing:-0.02em;}
.reveal{opacity:0; transform:translateY(18px); transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * 90ms);}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:.75rem 1.25rem; z-index:100; font-family:'JetBrains Mono',monospace; font-size:.85rem;}
.skip-link:focus{left:1rem; top:1rem;}

/* nav */
nav{border-bottom:3px solid var(--line); position:sticky; top:0; background:var(--paper); z-index:20;}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:70px; gap:1rem;}
.logo{font-weight:700; font-size:1.15rem; letter-spacing:-0.01em; text-decoration:none; flex:none;}
.logo span{color:var(--accent);}
.nav-toggle{display:none; flex:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:36px; height:36px; padding:0; border:2px solid var(--line); background:var(--paper); cursor:pointer;}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-right{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; justify-content:flex-end;}
.navlinks{display:flex; gap:2rem; font-family:'JetBrains Mono',monospace; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.06em;}
.navlinks a{text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; transition:border-color .15s ease;}
.navlinks a:hover, .navlinks a:focus-visible{border-color:var(--accent); outline:none;}
.navlinks a[aria-current="page"]{border-color:var(--accent);}
.lang-switch{display:flex; border:2px solid var(--line); font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:700;}
.lang-switch button{background:var(--paper); color:var(--ink); border:none; padding:.4rem .65rem; cursor:pointer; transition:background-color .15s ease, color .15s ease; font-family:inherit; font-size:inherit; font-weight:inherit;}
.lang-switch button + button{border-left:2px solid var(--line);}
.lang-switch button.active{background:var(--ink); color:var(--paper); cursor:default;}
.lang-switch button:not(.active):hover, .lang-switch button:not(.active):focus-visible{background:var(--paper-2); outline:none;}
/* 900px, not 700px: between ~700 and ~860 the five nav links plus the language
   switch no longer fit on one row, so .nav-right wrapped to two rows and the
   links overflowed above the 70px bar. 900 also matches the breakpoint every
   other grid on the site collapses at, so "compact layout" starts in one place. */
@media (max-width:900px){
  .nav-toggle{display:flex;}
  .nav-right{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:1.5rem; background:var(--paper); border-bottom:3px solid var(--line); padding:1.5rem; box-shadow:0 10px 20px rgba(0,0,0,.15);}
  .nav-right.open{display:flex;}
  .navlinks{flex-direction:column; gap:0; font-size:.95rem;}
  .navlinks a{padding:.85rem 0; border-bottom:1px solid var(--paper-2);}
  .navlinks a:last-child{border-bottom:none;}
  .lang-switch{align-self:flex-start;}
}

/* hero */
.hero{border-bottom:3px solid var(--line);}
.hero .wrap{display:grid; grid-template-columns:7fr 5fr; gap:2.5rem; padding-top:4.5rem; padding-bottom:3rem; align-items:end;}
@media (max-width:900px){ .hero .wrap{grid-template-columns:1fr; padding-top:2.5rem;} }
/* Once the grid stacks (900px) the figures have no column constraining them,
   so a full-width 3:5 screenshot renders taller than the viewport itself.
   Cap them from the same breakpoint the stack starts at. */
@media (max-width:900px){ .hero-figure{max-width:380px; margin-inline:auto;} }
.tag{display:inline-flex; align-items:center; gap:.5rem; font-family:'JetBrains Mono',monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; background:var(--ink); color:var(--paper); padding:.35rem .7rem; margin-bottom:1.25rem;}
.tag::before{content:''; width:7px; height:7px; background:var(--accent);}
.hero h1{font-size:clamp(2.4rem, 6vw, 4.4rem); font-weight:700; line-height:1.1; margin-bottom:1.25rem;}
.hero h1 em{font-style:normal; background:var(--accent); padding:0 .15rem; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.hero p{max-width:46ch; font-size:1.05rem; color:var(--muted); font-weight:500; margin-bottom:1.75rem;}
.btn{display:inline-block; font-family:'JetBrains Mono',monospace; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; text-decoration:none; padding:1rem 1.6rem; border:2px solid var(--line); background:var(--accent); color:var(--ink); transition:transform .12s ease, box-shadow .12s ease; cursor:pointer;}
.btn:hover, .btn:focus-visible{transform:translate(-3px,-3px); box-shadow:4px 4px 0 var(--line); outline:none;}
.btn.ghost{background:transparent;}
.hero-figure{border:3px solid var(--line); position:relative; aspect-ratio:4/5; overflow:hidden;}
.hero-figure img{width:100%; height:100%; object-fit:cover; filter:grayscale(50%) contrast(1.05);}
.stamp{position:absolute; top:.9rem; right:.9rem; background:var(--paper); border:2px solid var(--line); padding:.35rem .6rem; font-family:'JetBrains Mono',monospace; font-size:.7rem; text-transform:uppercase; font-weight:700; transform:rotate(4deg);}

/* fix (we can fix that) */
.fix{border-bottom:3px solid var(--line);}
.fix .wrap{display:grid; grid-template-columns:5fr 7fr; gap:2.5rem; padding-top:4.5rem; padding-bottom:4.5rem; align-items:center;}
.fix .hero-figure{aspect-ratio:3/5;}
.fix .hero-figure img{object-position:top; filter:grayscale(20%) contrast(1.05);}
.fix-text{text-align:center;}
.fix-text h2 em{font-style:normal; background:var(--accent); padding:0 .15rem; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.fix-text p{margin-left:auto; margin-right:auto;}
.fix-text .cta-row{flex-direction:column; justify-content:center;}
@media (max-width:900px){ .fix .wrap{grid-template-columns:1fr; padding-top:2.5rem;} }
.fix h2{font-size:clamp(2rem,4.4vw,3.2rem); font-weight:700; line-height:1.1; margin-bottom:1.25rem;}
.fix p{max-width:46ch; font-size:1.05rem; color:var(--muted); font-weight:500; margin-bottom:1.75rem;}

/* phone-width photo treatment: full-bleed slabs read as an accident, not a
   composition, once the box gets this narrow (the fix screenshot in
   particular hits ~545px tall at full width on its 3:5 crop, taller than
   many phones' viewport). Constrain to a centered, proportionate "specimen"
   instead, letting the page's own dot-grid frame it. Also lead the fix
   section with its headline on mobile (matching the hero's already-good
   text-first order) so a phone screenshot doesn't appear before any
   context explaining what it is. */
@media (max-width:640px){
  .hero-figure{max-width:290px; margin-inline:auto;}
  .fix .hero-figure{max-width:225px; order:2;}
  .fix-text{order:1;}
}

/* image placeholder frames (real photo not shot yet) */

section{padding:4.5rem 0; border-bottom:3px solid var(--line); scroll-margin-top:90px;}
.eyebrow{font-family:'JetBrains Mono',monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700; margin-bottom:.6rem;}
.sec-head{max-width:60ch; margin-bottom:2.75rem;}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:700;}
/* same key-word highlight the hero h1 and fix h2 use, so section headings
   share one language instead of one of them sitting there unaccented. */
.sec-head h2 em{font-style:normal; background:var(--accent); padding:0 .15rem; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.sec-head p{max-width:62ch; color:var(--muted); font-weight:500; font-size:1.05rem; margin-top:.85rem;}

/* sections reduced to a single lead paragraph */
.section-simple .sec-head{margin-bottom:1.75rem;}
.lead-para{max-width:62ch; font-size:1.15rem; font-weight:500; line-height:1.6; color:var(--ink); margin-bottom:0;}
.closing{text-align:left; border-bottom:none;}
.closing .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem;}
.closing h2{font-size:clamp(1.6rem,3.6vw,2.5rem); font-weight:700; max-width:22ch;}

footer{padding:2.5rem 0 3rem; border-top:3px solid var(--line); background:var(--paper);}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5rem; font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--muted);}
footer a{text-decoration:none;}
footer a:hover{color:var(--ink);}
/* 404 */
.notfound{text-align:center;}
.notfound-num{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:clamp(4rem,18vw,9rem); line-height:1; color:var(--paper-2); user-select:none;}
.notfound h1{margin-top:-1.5rem;}
.notfound p{margin:0 auto;}
.notfound-cta .wrap{justify-content:center;}

/* legal pages (privacy policy) */
.legal{max-width:70ch;}
.legal h2{font-size:1.4rem; font-weight:700; margin:2.5rem 0 1rem;}
.legal h2:first-child{margin-top:0;}
.legal p{color:var(--muted); font-weight:500; font-size:.98rem; line-height:1.65; margin-bottom:1rem;}
.legal .checklist{margin-bottom:1.5rem;}
.legal-updated{font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--muted); margin-top:2rem;}

/* page header (subpages) */
.page-header{border-bottom:3px solid var(--line); padding:3.5rem 0 1.5rem;}
.page-header.no-border{border-bottom:none;}
.page-header h1{font-size:clamp(2rem,4.4vw,3.2rem); font-weight:700; line-height:1.1; margin-bottom:1rem;}
.page-header p{max-width:60ch; color:var(--muted); font-weight:500; font-size:1.05rem;}
.page-header + section, .page-header + .svc-detail{padding-top:2rem;}
.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;}

/* service detail */
.svc-detail{padding:4.5rem 0; border-bottom:3px solid var(--line);}
.svc-detail .wrap{display:grid; grid-template-columns:6fr 6fr; gap:3rem; align-items:center;}
.svc-detail.reverse .text{order:2;}
.svc-detail.reverse .media{order:1;}
.svc-detail h2{font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:700; margin-bottom:1rem;}
.svc-detail .desc{color:var(--muted); font-weight:500; line-height:1.6; margin-bottom:1.5rem; max-width:52ch;}
.checklist{list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-bottom:2rem;}
.checklist li{display:flex; align-items:center; gap:.75rem; font-weight:500; font-size:.98rem;}
.check{width:22px; height:22px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:var(--ink); font-family:'JetBrains Mono',monospace; font-size:.75rem; font-weight:700; border:2px solid var(--line);}
.check.empty{background:var(--paper); border-color:var(--muted);}
.price-tier.featured .check.empty{background:var(--accent); border-color:rgba(18,18,18,.45);}
.svc-detail .media{border:3px solid var(--line); aspect-ratio:4/3; overflow:hidden;}
.svc-detail .media img{width:100%; height:100%; object-fit:cover; filter:grayscale(35%) contrast(1.05);}
@media (max-width:860px){ .svc-detail .wrap{grid-template-columns:1fr;} .svc-detail.reverse .text, .svc-detail.reverse .media{order:0;} }
.cta-row{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:.25rem;}
.link-inline{font-family:'JetBrains Mono',monospace; font-size:.82rem; font-weight:700; text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; gap:.35rem;}
.link-inline span{display:inline-block; transition:transform .15s ease;}
.link-inline:hover span, .link-inline:focus-visible span{transform:translateX(3px);}

/* portfolio */
.pf-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem;}
@media (max-width:700px){ .pf-grid{grid-template-columns:1fr;} }
.pf-card{border:2px solid var(--line); background:var(--paper); position:relative; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease;}
.pf-card:hover{transform:translate(-3px,-3px); box-shadow:4px 4px 0 var(--line); z-index:2;}
.pf-card .thumb{display:block; aspect-ratio:16/10; overflow:hidden; border-bottom:2px solid var(--line);}
.pf-card .thumb img{width:100%; height:100%; object-fit:cover; object-position:top; filter:grayscale(30%) contrast(1.05);}
.pf-card .info{padding:1.5rem 1.6rem 1.75rem;}
.pf-card .cat{font-family:'JetBrains Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); font-weight:700; margin-bottom:.5rem;}
.pf-card h3{font-size:1.25rem; font-weight:700; margin-bottom:.5rem;}
.pf-card p{color:var(--muted); font-size:.92rem; font-weight:500; line-height:1.55; margin-bottom:1rem;}

/* pricing */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:2px solid var(--line); margin-bottom:1.5rem;}
.pricing-grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){ .pricing-grid, .pricing-grid.cols-2{grid-template-columns:1fr;} }
.price-tier{padding:2.25rem 1.75rem; border-right:2px solid var(--line); display:flex; flex-direction:column; gap:1rem; transition:transform .15s ease, box-shadow .15s ease;}
.price-tier:last-child{border-right:none;}
@media (max-width:900px){ .price-tier{border-right:none; border-bottom:2px solid var(--line);} .price-tier:last-child{border-bottom:none;} }
.price-tier:hover{transform:translate(-3px,-3px); box-shadow:4px 4px 0 var(--line); z-index:2;}
.price-tier.featured{background:var(--accent);}
.price-tier.featured h3, .price-tier.featured .desc, .price-tier.featured .amount .num, .price-tier.featured .amount .unit{color:var(--ink);}
.price-tier.featured .check{background:var(--paper); color:var(--ink);}
.price-tier .rec{display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; background:var(--ink); color:var(--paper); padding:.3rem .6rem; align-self:flex-start;}
.price-tier.featured .rec{background:var(--ink); color:var(--accent);}
.price-tier h3{font-size:1.15rem; font-weight:700;}
.price-tier .amount{display:flex; align-items:baseline; gap:.4rem;}
.price-tier .amount .num{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.85rem;}
.price-tier .amount .unit{font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--muted); font-weight:500;}
.price-tier .desc{font-size:.9rem; color:var(--muted); font-weight:500; line-height:1.5;}
.price-tier .checklist{flex:1; margin-bottom:0;}

/* contact form */
.contact-grid{display:grid; grid-template-columns:1fr 0.85fr; gap:3rem;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.4rem;}
.field label{font-family:'JetBrains Mono',monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;}
.field input, .field textarea{border:2px solid var(--line); background:var(--paper); padding:.85rem 1rem; font-family:'Space Grotesk',sans-serif; font-size:.98rem; color:var(--ink); outline:none; transition:border-color .15s ease; width:100%;}
.field input:focus, .field textarea:focus{border-color:var(--accent);}
.field textarea{resize:vertical; min-height:120px; font-family:'Space Grotesk',sans-serif;}
.contact-info{border:3px solid var(--line); border-left:6px solid var(--accent); background:var(--paper); padding:2rem 2rem 2rem 1.75rem; height:fit-content; box-shadow:5px 5px 0 var(--line);}
.contact-info h3{font-size:1.05rem; font-weight:700; margin-bottom:1rem;}
.contact-info p{color:var(--muted); font-weight:500; font-size:.95rem; line-height:1.6; margin-bottom:1rem;}
.contact-info a{font-weight:700; text-decoration:underline; text-underline-offset:3px;}
.success-msg{display:none; border:2px solid var(--line); background:var(--paper); padding:2.5rem; text-align:center;}
.success-msg.show{display:block;}
.success-msg h3{font-size:1.3rem; font-weight:700; margin-bottom:.6rem;}
.success-msg p{color:var(--muted); font-weight:500;}
.form-error{display:none; color:#b3261e; font-weight:500; font-size:.9rem; margin-bottom:1rem;}
.form-error.show{display:block;}
.field-check{display:flex; align-items:flex-start; gap:.6rem; margin-bottom:1.4rem; cursor:pointer;}
.field-check input[type="checkbox"]{width:20px; height:20px; flex:none; margin-top:.15rem; accent-color:var(--accent); cursor:pointer;}
.field-check span{font-size:.92rem; color:var(--muted); font-weight:500; line-height:1.5;}
.field-check a{color:var(--ink); text-decoration:underline; text-underline-offset:2px; font-weight:700;}
.field-check a:hover{color:var(--accent);}