:root{
  --paper:#FAFAF6;
  --ink:#121212;
  --cobalt:#2338E8;
  --cyan:#00B7E8;
  --magenta:#E8308A;
  --yellow:#F5C400;
  --grey:#8A8A84;
  --line:#E3E3DC;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 100;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--cobalt);color:#fff;}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.mono{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;}

/* Registration mark motif */
.regmark{display:inline-block;width:16px;height:16px;position:relative;flex:none;}
.regmark::before,.regmark::after{content:"";position:absolute;background:currentColor;}
.regmark::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%);}
.regmark::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%);}
.regmark span{position:absolute;inset:3px;border:1.5px solid currentColor;border-radius:50%;}

/* Header */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,246,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;}
.logo{text-decoration:none;display:flex;align-items:center;}
.logo img{height:26px;width:auto;}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{text-decoration:none;font-size:14px;font-weight:500;color:var(--ink);opacity:.75;transition:opacity .15s;}
.nav-links a:hover{opacity:1;}
.btn{
  display:inline-block;background:var(--cobalt);color:#fff;text-decoration:none;
  font-weight:700;font-size:14px;padding:11px 22px;border-radius:100px;
  transition:transform .15s, background .15s;
}
.nav-links a.btn{color:#fff;opacity:1;}
.btn:hover{background:#1626B8;transform:translateY(-1px);}
.btn.big{font-size:16px;padding:16px 32px;}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.btn.ghost:hover{background:var(--ink);color:#fff;}

/* Hero */
.hero{padding:72px 0 40px;position:relative;overflow:hidden;}
.hero .eyebrow{display:flex;align-items:center;gap:10px;color:var(--cobalt);margin-bottom:22px;}
.hero h1{
  font-weight:900;font-variation-settings:'wdth' 87;
  font-size:clamp(42px,7.2vw,88px);
  line-height:1.02;letter-spacing:-.025em;
  max-width:75%;
}
@media (max-width:700px){.hero h1{max-width:100%;}}
.hero h1 em{font-style:normal;color:var(--cobalt);}
.hero p.lead{max-width:56ch;font-size:19px;margin:26px 0 34px;color:#3a3a36;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.hero-corner{position:absolute;color:var(--ink);opacity:.25;}
.hero-corner.tr{top:24px;right:24px;}
.hero-corner.br{bottom:24px;right:24px;}

/* Section basics */
section{padding:84px 0;}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:40px;flex-wrap:wrap;}
.sec-head h2{font-weight:900;font-size:clamp(24px,3.2vw,38px);letter-spacing:-.02em;line-height:1.05;font-variation-settings:'wdth' 90;text-transform:uppercase;}
.sec-head .mono{color:var(--grey);}

/* Rise & reveal for headers: masked lift */
.rise{overflow:hidden;display:block;}
.rise > span{display:block;transform:translateY(110%);transition:transform .8s cubic-bezier(.19,1,.22,1);}
.in .rise > span, .rise.in > span{transform:none;}

/* Portfolio grid */
#work{border-bottom:1px solid var(--line);padding-top:16px;}
#work .wrap{max-width:1320px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;}
.tile{
  display:block;color:var(--ink);
  text-decoration:none;transition:transform .2s;
}
.tile:hover{transform:translateY(-4px);}
.tile .frame{
  position:relative;border-radius:14px;overflow:hidden;aspect-ratio:5/4;
  background:var(--tint,#EDEDE6);
  display:flex;align-items:center;justify-content:center;
}
.tile .frame img{max-width:82%;max-height:82%;width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 10px 30px rgba(18,18,18,.14);transition:transform .5s ease;}
.tile:hover .frame img{transform:scale(1.03);}
.tile .cap{padding:12px 4px 0;}
.tile .cap b{display:block;font-size:16px;}
.tile .cap span{font-size:13px;color:var(--grey);}
.tile .visit{position:absolute;top:14px;right:14px;z-index:3;background:rgba(18,18,18,.7);color:#fff;border:1px solid rgba(18,18,18,.15);border-radius:100px;padding:5px 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;}

/* Services */
.service{border-bottom:1px solid var(--line);}
.svc{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.svc.flip .svc-media{order:2;}
.svc-media{
  border-radius:16px;aspect-ratio:4/3;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.svc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.svc .num{display:flex;align-items:center;gap:10px;color:var(--cobalt);margin-bottom:16px;}
.svc h3{font-weight:900;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;line-height:1.08;text-transform:uppercase;font-variation-settings:'wdth' 90;margin-bottom:16px;}
.svc p{color:#3a3a36;margin-bottom:20px;}
.svc ul{list-style:none;display:grid;gap:10px;}
.svc ul li{display:flex;gap:12px;align-items:baseline;font-size:15px;font-weight:500;}
.svc ul li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cobalt);flex:none;transform:translateY(-1px);}
.svc.s2 ul li::before{background:var(--yellow);}
.svc.s3 ul li::before{background:var(--magenta);}
.svc .more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:700;font-size:15px;text-decoration:none;color:var(--cobalt);}
.svc .more:hover{text-decoration:underline;}

/* Process */
#process{border-bottom:1px solid var(--line);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.step{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff;}
.step .mono{color:var(--cobalt);display:block;margin-bottom:12px;}
.step b{display:block;font-size:17px;margin-bottom:8px;}
.step p{font-size:14px;color:#4a4a45;}

/* About */
#about{border-bottom:1px solid var(--line);}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.about-inner h2{font-weight:900;font-size:clamp(28px,4vw,46px);letter-spacing:-.02em;line-height:1.08;text-transform:uppercase;font-variation-settings:'wdth' 90;margin-bottom:18px;}
.about-inner p{color:#3a3a36;margin-bottom:14px;}
.cmyk-bar{display:flex;height:10px;border-radius:100px;overflow:hidden;margin-top:26px;max-width:340px;}
.cmyk-bar i{flex:1;}
.cmyk-bar i:nth-child(1){background:var(--cyan);}
.cmyk-bar i:nth-child(2){background:var(--magenta);}
.cmyk-bar i:nth-child(3){background:var(--yellow);}
.cmyk-bar i:nth-child(4){background:var(--ink);}
.about-media{border-radius:16px;overflow:hidden;aspect-ratio:1/1;position:relative;}
.about-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* Contact */
#contact{background:var(--ink);color:var(--paper);}
.contact-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;}
.contact-inner h2{font-weight:900;font-size:clamp(34px,5.4vw,64px);letter-spacing:-.02em;line-height:1.02;text-transform:uppercase;font-variation-settings:'wdth' 88;margin-bottom:20px;}
.contact-inner h2 em{font-style:normal;color:var(--yellow);}
.contact-inner p{color:#c9c9c2;max-width:48ch;margin-bottom:28px;}
.contact-card{border:1px solid #333;border-radius:16px;padding:28px;}
.contact-card .row{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid #2a2a2a;}
.contact-card .row:last-child{border-bottom:none;}
.contact-card .row .mono{color:#8f8f88;}
.contact-card .row a, .contact-card .row .val{color:var(--paper);text-decoration:none;font-weight:700;font-size:18px;}
.contact-card .row a:hover{color:var(--yellow);}

/* Footer */
footer{background:var(--ink);color:#8f8f88;border-top:1px solid #2a2a2a;padding:26px 0;}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;}
.foot img{height:22px;width:auto;}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .rise > span{transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Subpages ---------- */

/* Page hero (smaller, for service & case study pages) */
.page-hero{padding:64px 0 44px;border-bottom:1px solid var(--line);}
.page-hero .eyebrow{display:flex;align-items:center;gap:10px;color:var(--cobalt);margin-bottom:18px;}
.page-hero h1{
  font-weight:900;font-variation-settings:'wdth' 88;
  font-size:clamp(34px,5.4vw,64px);
  line-height:1.05;letter-spacing:-.02em;max-width:20ch;
}
.page-hero p.lead{max-width:58ch;font-size:18px;margin-top:20px;color:#3a3a36;}
.crumb{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:26px;}
.crumb a{text-decoration:none;color:var(--grey);}
.crumb a:hover{color:var(--ink);}

/* Feature rows on service pages */
.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.feature{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff;}
.feature b{display:block;font-size:17px;margin-bottom:8px;}
.feature p{font-size:14px;color:#4a4a45;}

/* Case study */
.cs-hero-media{border-radius:16px;overflow:hidden;margin-top:44px;background:var(--tint,#EDEDE6);display:flex;align-items:center;justify-content:center;padding:5%;}
.cs-hero-media img{border-radius:8px;box-shadow:0 14px 40px rgba(18,18,18,.16);}
.cs-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;}
.cs-meta .cell{border-top:2px solid var(--ink);padding-top:12px;}
.cs-meta .cell .mono{color:var(--grey);display:block;margin-bottom:4px;}
.cs-meta .cell b{font-size:15px;}
.cs-body{max-width:760px;}
.cs-body h2{font-weight:900;font-size:clamp(22px,2.8vw,32px);letter-spacing:-.02em;text-transform:uppercase;font-variation-settings:'wdth' 90;margin:44px 0 16px;}
.cs-body h2:first-child{margin-top:0;}
.cs-body p{color:#3a3a36;margin-bottom:16px;}
.cs-body ul{list-style:none;display:grid;gap:10px;margin:8px 0 16px;}
.cs-body ul li{display:flex;gap:12px;align-items:baseline;font-size:15px;font-weight:500;}
.cs-body ul li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cobalt);flex:none;transform:translateY(-1px);}
.cs-figure{border-radius:16px;overflow:hidden;margin:36px 0;background:var(--tint,#EDEDE6);display:flex;align-items:center;justify-content:center;padding:5%;}
.cs-figure img{border-radius:8px;box-shadow:0 14px 40px rgba(18,18,18,.16);}
.cs-figure figcaption{display:none;}
.figcap{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--grey);margin:-24px 0 36px;text-align:center;}

/* CTA band (light pages) */
.cta-band{background:var(--ink);color:var(--paper);}
.cta-band .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.cta-band h2{font-weight:900;font-size:clamp(26px,3.6vw,44px);letter-spacing:-.02em;line-height:1.05;text-transform:uppercase;font-variation-settings:'wdth' 88;}
.cta-band h2 em{font-style:normal;color:var(--yellow);}

/* Responsive */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .svc,.about-inner,.contact-inner{grid-template-columns:1fr;gap:32px;}
  .svc.flip .svc-media{order:0;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .nav-links a:not(.btn){display:none;}
  .feature-list{grid-template-columns:1fr;}
  .cs-meta{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  section{padding:60px 0;}
  .hero{padding:48px 0 32px;}
}

/* ---------- Blueprint scene (About animation) ---------- */
.blueprint{position:relative;aspect-ratio:1/1;border-radius:16px;background:var(--ink);overflow:hidden;}
.blueprint svg{position:absolute;inset:0;width:100%;height:100%;}
.blueprint .bp-grid line{stroke:#232329;stroke-width:1;}
.bp{stroke:var(--cobalt);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;}
.bp.cy{stroke:var(--cyan);}
.bp-fill{fill:var(--cobalt);opacity:0;transform:scaleX(0);transform-origin:left;transform-box:fill-box;}
.run .bp{animation:bpdraw .9s ease forwards;animation-delay:var(--d,0s);}
.run .bp-fill{animation:bpline .6s ease forwards;animation-delay:var(--d,0s);}
.run .bp-wash{animation:bpwash 1.2s ease forwards;animation-delay:5.6s;}
.bp-wash{fill:var(--cobalt);opacity:0;}
@keyframes bpdraw{to{stroke-dashoffset:0;}}
@keyframes bpline{to{opacity:.85;transform:scaleX(1);}}
@keyframes bpwash{to{opacity:.06;}}
@media (prefers-reduced-motion:reduce){
  .bp{stroke-dashoffset:0;}
  .bp-fill{opacity:.85;transform:none;}
  .bp-wash{opacity:.06;}
  .run .bp,.run .bp-fill,.run .bp-wash{animation:none;}
}