@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#F7F5EF;
  --paper-alt:#EFECE3;
  --ink:#15151A;
  --ink-soft:#4A4A52;
  --cobalt:#2B3EFF;
  --magenta:#E8368F;
  --line:#D8D4C8;
  --line-strong:#B9B4A4;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Archivo Black', sans-serif; font-weight:400; line-height:1.05; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

/* crop mark motif */
.crop{position:absolute; width:22px; height:22px; pointer-events:none;}
.crop::before, .crop::after{content:""; position:absolute; background:var(--ink);}
.crop::before{width:100%; height:1px; top:50%;}
.crop::after{width:1px; height:100%; left:50%;}
.crop.tl{top:18px; left:18px;}
.crop.tr{top:18px; right:18px;}
.crop.bl{bottom:18px; left:18px;}
.crop.br{bottom:18px; right:18px;}

.regmark{
  width:52px; height:52px; border-radius:50%;
  border:1.5px solid var(--ink);
  position:relative;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.regmark::before, .regmark::after{content:""; position:absolute; background:var(--ink);}
.regmark::before{width:100%; height:1px; top:50%; left:0;}
.regmark::after{width:1px; height:100%; left:50%; top:0;}
.regmark span{
  position:absolute; top:50%; left:50%; width:14px; height:14px;
  border:1.5px solid var(--ink); border-radius:50%;
  transform:translate(-50%,-50%);
}
.regmark:hover{transform:rotate(45deg);}

.cmyk-strip{display:flex; height:6px; width:100%;}
.cmyk-strip span{flex:1;}
.cmyk-strip .c{background:#00AEEF;}
.cmyk-strip .m{background:var(--magenta);}
.cmyk-strip .y{background:#FFD400;}
.cmyk-strip .k{background:var(--ink);}

/* header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,245,239,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px;}
.logo{font-family:'Archivo Black', sans-serif; font-size:18px; letter-spacing:0.02em;}
.logo span{color:var(--cobalt);}
.navlinks{display:flex; gap:36px; align-items:center;}
.navlinks a{font-size:14px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); transition:color .2s; padding-bottom:4px; border-bottom:1px solid transparent;}
.navlinks a:hover{color:var(--cobalt);}
.navlinks a.active{color:var(--ink); border-bottom:1px solid var(--cobalt);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px;
  background:var(--ink); color:var(--paper);
  font-family:'IBM Plex Mono',monospace; font-size:13px; text-transform:uppercase; letter-spacing:0.05em;
  border:1px solid var(--ink);
  transition:background .25s, color .25s, transform .25s;
  cursor:pointer;
}
.btn:hover{background:var(--paper); color:var(--ink); transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink);}
.btn.alt{background:transparent; color:var(--ink);}
@media (max-width:860px){ .navlinks{display:none;} }

/* page header (non-home pages) */
.page-header{position:relative; padding:70px 0 54px; border-bottom:1px solid var(--line);}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:13px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--ink-soft); margin-bottom:22px;
}
.eyebrow::before{content:""; width:8px; height:8px; background:var(--magenta); border-radius:50%;}
.page-header h1{font-size:clamp(34px,5.2vw,58px); max-width:820px;}
.page-sub{max-width:560px; font-size:17px; color:var(--ink-soft); margin-top:20px;}

/* hero (home only) */
.hero{position:relative; padding:120px 0 90px; border-bottom:1px solid var(--line);}
.hero h1{font-size:clamp(40px, 6.4vw, 84px); max-width:920px;}
.hero h1 em{font-style:normal; color:var(--cobalt);}
.hero-sub{max-width:520px; font-size:18px; color:var(--ink-soft); margin-top:26px;}
.hero-cta{display:flex; gap:18px; margin-top:40px; flex-wrap:wrap;}
.hero-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:50px; align-items:end;}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr;} }
.hero-mark{display:flex; flex-direction:column; align-items:flex-end; gap:18px;}
.hero-mark .label{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); text-align:right;}

section{position:relative; padding:90px 0; border-bottom:1px solid var(--line);}
.kicker{
  font-family:'IBM Plex Mono',monospace; font-size:13px; text-transform:uppercase; letter-spacing:0.08em; color:var(--cobalt);
  margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.kicker::before{content:""; width:24px; height:1px; background:var(--cobalt);}
.section-title{font-size:clamp(28px,4vw,44px); max-width:640px; margin-bottom:20px;}
.section-lede{max-width:560px; color:var(--ink-soft); font-size:17px;}

/* about */
.about-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px; align-items:start;}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr;} }
.about-photo{
  aspect-ratio:4/5; background:var(--paper-alt); border:1px solid var(--line-strong);
  position:relative; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; font-size:13px;
}
.about-photo .crop{opacity:0.5;}
.about-text p{color:var(--ink-soft); font-size:17px; margin-bottom:18px; max-width:560px;}
.badge-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px;}
.badge{
  border:1px solid var(--line-strong); padding:8px 14px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.03em;
}

/* services */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:50px;}
@media (max-width:860px){ .services-grid{grid-template-columns:1fr;} }
.service-card{background:var(--paper); padding:38px 32px; transition:background .25s;}
.service-card:hover{background:var(--paper-alt);}
.service-num{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--magenta); margin-bottom:22px;}
.service-card h3{font-size:22px; margin-bottom:14px; font-weight:400;}
.service-card p{color:var(--ink-soft); font-size:15px; margin-bottom:20px;}
.service-card ul{list-style:none;}
.service-card li{
  font-size:14px; color:var(--ink-soft); padding:8px 0; border-top:1px solid var(--line);
  display:flex; gap:10px; align-items:baseline;
}
.service-card li::before{content:"→"; color:var(--cobalt); font-family:'IBM Plex Mono',monospace;}
.service-detail{margin-top:60px; padding-top:50px; border-top:1px solid var(--line);}
.service-detail:first-of-type{margin-top:70px;}
.service-detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
@media (max-width:860px){ .service-detail-grid{grid-template-columns:1fr;} }
.service-detail h2{font-size:clamp(24px,3.4vw,36px); margin-bottom:16px;}
.service-detail p{color:var(--ink-soft); font-size:16px; margin-bottom:16px;}
.service-detail-list{list-style:none; margin-top:20px;}
.service-detail-list li{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft); padding:10px 0; border-top:1px solid var(--line); display:flex; gap:10px;}
.service-detail-list li::before{content:"—"; color:var(--cobalt);}

/* portfolio */
.portfolio-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:50px;}
@media (max-width:700px){ .portfolio-grid{grid-template-columns:1fr;} }
.port-card{border:1px solid var(--line-strong); background:var(--paper-alt); position:relative; overflow:hidden;}
.port-thumb{
  aspect-ratio:16/11; position:relative; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; font-size:13px;
  border-bottom:1px solid var(--line-strong);
}
.port-thumb .crop{opacity:0.45;}
.port-info{padding:20px 22px; display:flex; justify-content:space-between; align-items:flex-start; gap:16px;}
.port-info h4{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px;}
.port-info .tag{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; color:var(--ink-soft); margin-top:6px;}
.port-note{
  margin-top:36px; padding:18px 22px; border:1px dashed var(--line-strong);
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft);
}

/* process */
.process-list{margin-top:50px; border-top:1px solid var(--line);}
.process-item{
  display:grid; grid-template-columns:80px 1fr 1fr; gap:30px; padding:32px 0; border-bottom:1px solid var(--line);
  align-items:start;
}
@media (max-width:700px){ .process-item{grid-template-columns:50px 1fr;} .process-item .process-desc{grid-column:2;} }
.process-num{font-family:'Archivo Black',sans-serif; font-size:28px; color:var(--line-strong);}
.process-item h3{font-size:20px; font-family:'Space Grotesk',sans-serif; font-weight:600;}
.process-desc{color:var(--ink-soft); font-size:15px;}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.field{margin-bottom:18px;}
.field label{display:block; font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:8px;}
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-strong);
  padding:10px 4px; font-family:'Space Grotesk',sans-serif; font-size:16px; color:var(--ink);
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--cobalt);}
.hp-field{position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; overflow:hidden;}
.contact-info-item{margin-bottom:30px;}
.contact-info-item .lab{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;}
.contact-info-item .val{font-size:18px; font-family:'Space Grotesk',sans-serif; font-weight:600;}

/* cross-page link cards (used at bottom of pages) */
.next-links{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:0;}
@media (max-width:700px){ .next-links{grid-template-columns:1fr;} }
.next-link{background:var(--paper); padding:32px; display:flex; flex-direction:column; gap:8px; transition:background .2s;}
.next-link:hover{background:var(--paper-alt);}
.next-link .lab{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; color:var(--ink-soft);}
.next-link .name{font-family:'Archivo Black',sans-serif; font-size:20px;}
.next-link .arrow{color:var(--cobalt); font-family:'IBM Plex Mono',monospace;}

/* reviews */
.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:50px;}
@media (max-width:860px){ .reviews-grid{grid-template-columns:1fr;} }
.review-card{border:1px solid var(--line-strong); background:var(--paper-alt); padding:28px 26px; position:relative; display:flex; flex-direction:column; gap:16px;}
.review-stars{font-family:'IBM Plex Mono',monospace; font-size:15px; color:var(--magenta); letter-spacing:2px;}
.review-comment{font-size:15px; color:var(--ink-soft); line-height:1.55; flex-grow:1;}
.review-meta{border-top:1px solid var(--line); padding-top:14px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px;}
.review-name{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;}
.review-loc{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; color:var(--ink-soft); margin-top:3px;}
.review-date{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); white-space:nowrap;}
.review-note{
  margin-top:36px; padding:18px 22px; border:1px dashed var(--line-strong);
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft);
}

footer{padding:50px 0 40px;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-row .mono{font-size:12px; color:var(--ink-soft);}

[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
[data-reveal].in{opacity:1; transform:translateY(0);}