:root{
  --paper:#FBFAF8;
  --card:#FFFFFF;
  --soft:#F1F0EC;
  --ink:#141413;
  --ink-2:#6E6C66;
  --ink-3:#9A988F;
  --line:#E7E5DF;
  --black:#0E0D0C;
  --on-black:#F3F1EC;
  --on-black-2:#A7A49C;
  --live:#3FAE6B;
  --radius:18px;
  --maxw:1120px;
  --pad:24px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--ink);color:var(--paper);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

/* ---------- shared type ---------- */
.display{
  font-family:"Inter Tight",sans-serif;
  font-weight:600;
  letter-spacing:-0.035em;
  line-height:0.94;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:var(--ink-2);
  border:1px solid var(--line);
  background:var(--card);
  padding:7px 14px;border-radius:999px;
  letter-spacing:-0.01em;
}
.lead{color:var(--ink-2);font-size:15px;line-height:1.6;max-width:42ch;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Inter",sans-serif;font-weight:500;font-size:14px;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
  white-space:nowrap;
}
.btn--dark{background:var(--black);color:var(--on-black);}
.btn--dark:hover{transform:translateY(-2px);}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn--light{background:var(--on-black);color:var(--black);}
.btn--light:hover{transform:translateY(-2px);}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px;}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(251,250,248,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s ease;}
header.nav.scrolled{border-color:var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;}
.logo{display:flex;align-items:center;}
.logo img{height:48px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-size:14.5px;color:var(--ink-2);transition:color .2s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-right{display:flex;align-items:center;gap:14px;}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:42px;height:42px;cursor:pointer;color:var(--ink);}

/* ---------- hero ---------- */
.hero{padding:32px 0 20px;}
.hero .wrap{display:grid;grid-template-columns:1fr 200px;gap:0 30px;}
.hero-top{grid-column:2;grid-row:1;align-self:start;}
.hero .marquee{grid-column:1/-1;}
.hero-photo{
  width:200px;height:260px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.hero h1{grid-column:1;grid-row:1;margin:100px 0 0;font-size:clamp(4.4rem,15.5vw,12rem);font-weight:300;}
.hero-sub{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:26px;flex-wrap:wrap;}
.status{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);}
.dot{width:9px;height:9px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(63,174,107,.5);animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,174,107,.45);}70%{box-shadow:0 0 0 7px rgba(63,174,107,0);}100%{box-shadow:0 0 0 0 rgba(63,174,107,0);}}
.hero-tag{font-size:14px;color:var(--ink-2);max-width:32ch;text-align:right;line-height:1.5;}

/* ---------- marquee ---------- */
.marquee{margin:22px 0 8px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:14px;width:max-content;animation:scroll 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes scroll{to{transform:translateX(-50%);}}
.chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:11px 20px;font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap;}
.chip b{font-weight:600;}

/* ---------- section scaffolding ---------- */
section{padding:74px 0;}
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:end;margin-bottom:38px;}
.sec-head h2{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-0.03em;line-height:1.04;font-size:clamp(1.7rem,3.4vw,2.5rem);margin:14px 0 0;max-width:18ch;}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;}
.about .copy h2{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-0.03em;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.06;margin:14px 0 0;max-width:16ch;}
.video{margin-top:30px;border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:16/10;border:1px solid var(--line);
  background:linear-gradient(135deg,#e9e7e1 0%,#cfccc4 100%);}
.video .play{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;background:var(--black);display:grid;place-items:center;color:var(--paper);transition:transform .25s ease;}
.video:hover .play{transform:scale(1.08);}
.video .tagpill{position:absolute;left:12px;bottom:12px;font-size:11px;color:#fff;background:rgba(0,0,0,.3);padding:4px 10px;border-radius:7px;backdrop-filter:blur(2px);}
.about-img{margin-top:30px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.about-img img{width:100%;height:100%;object-fit:cover;display:block;}
.about .stats{padding-top:42px;}
.stat{padding:6px 0 22px;border-bottom:1px solid var(--line);margin-bottom:22px;}
.stat:last-child{border-bottom:0;}
.stat .num{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-0.03em;font-size:clamp(2.4rem,5vw,3.2rem);line-height:1;}
.stat p{margin:10px 0 0;color:var(--ink-2);font-size:14px;max-width:34ch;}

/* ---------- services ---------- */
.services-grid{display:grid;grid-template-columns:340px 1fr;gap:30px;align-items:start;}
.services-intro h2{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-0.03em;font-size:clamp(1.6rem,3.2vw,2.2rem);line-height:1.08;margin:14px 0 16px;}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.card{border:1px solid var(--line);background:var(--card);border-radius:var(--radius);padding:26px;min-height:190px;display:flex;flex-direction:column;transition:transform .28s ease,box-shadow .28s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(20,20,19,.28);}
.card h3{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-0.02em;font-size:1.18rem;margin:0 0 9px;}
.card p{color:var(--ink-2);font-size:14px;margin:0;flex:1;}
.card .icon{align-self:flex-end;margin-top:18px;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-3);}
.card.dark{background:var(--black);color:var(--on-black);border-color:var(--black);position:relative;overflow:hidden;}
.card.dark p{color:var(--on-black-2);}
.card.dark .icon{border-color:rgba(255,255,255,.15);color:var(--on-black-2);}
.card.dark::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;border:1px solid rgba(255,255,255,.08);}
.card.dark::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;border:1px solid rgba(255,255,255,.06);}

/* ---------- experience ---------- */
.experience{background:var(--soft);}
.xp-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:26px 18px;border-radius:14px;transition:background .25s ease;}
.xp-row:hover{background:var(--card);}
.xp-row + .xp-row{border-top:1px solid var(--line);border-radius:0;}
.xp-row:hover{border-radius:14px;}
.xp-row .role{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-0.02em;font-size:1.18rem;margin:0 0 3px;}
.xp-row .loc{font-size:12.5px;color:var(--ink-3);margin:0 0 8px;display:flex;align-items:center;gap:5px;}
.xp-row .loc svg{flex-shrink:0;}
.co-logo{height:1em;width:auto;display:inline;vertical-align:middle;margin:0 1px 5px 4px;opacity:.7;}
.xp-row .desc{color:var(--ink-2);font-size:14px;margin:0;max-width:62ch;}
.xp-row .year{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-0.02em;font-size:clamp(1.4rem,3vw,1.9rem);color:var(--ink);white-space:nowrap;}

/* ---------- portfolio ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.pf{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3.4;border:1px solid var(--line);cursor:pointer;}
.pf .fill{position:absolute;inset:0;transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.pf .fill img{width:100%;height:100%;object-fit:cover;display:block;}
.pf:hover .fill{transform:scale(1.05);}
.pf .meta{position:absolute;left:0;right:0;bottom:0;padding:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));}
.pf .meta .t{color:#fff;font-weight:600;font-size:14.5px;letter-spacing:-0.01em;line-height:1.3;max-width:80%;}
.pf .meta .a{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--black);display:grid;place-items:center;flex:none;transition:transform .3s ease;}
.pf:hover .meta .a{transform:rotate(-45deg);}
.pf .hint{position:absolute;top:12px;left:12px;font-size:10px;color:rgba(255,255,255,.85);background:rgba(0,0,0,.3);padding:3px 8px;border-radius:6px;}
.g1{background:linear-gradient(135deg,#3a3936,#16150F);}
.g2{background:linear-gradient(135deg,#5b5750,#2b2924);}
.g3{background:linear-gradient(135deg,#46443d,#201f1a);}
.g4{background:linear-gradient(135deg,#54514a,#2d2b25);}
.g5{background:linear-gradient(135deg,#3d3b34,#1a1914);}
.g6{background:linear-gradient(135deg,#5e5a52,#33312b);}

/* ---------- work modal ---------- */
.pf-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;}
.pf-modal.open{opacity:1;visibility:visible;}
.pf-modal-overlay{position:absolute;inset:0;background:rgba(14,13,12,.75);backdrop-filter:blur(6px);}
.pf-modal-inner{position:relative;background:var(--card);border-radius:var(--radius);width:100%;max-width:760px;max-height:90vh;overflow-y:auto;box-shadow:0 40px 80px -12px rgba(0,0,0,.45);transform:translateY(24px) scale(.97);transition:transform .35s cubic-bezier(.16,1,.3,1);}
.pf-modal.open .pf-modal-inner{transform:translateY(0) scale(1);}
.pf-modal-close{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.3);border:none;cursor:pointer;color:#fff;display:grid;place-items:center;transition:background .2s;}
.pf-modal-close:hover{background:rgba(0,0,0,.55);}
.pf-modal-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;position:relative;}
.pf-modal-thumb .fill{position:absolute;inset:0;transition:none;}
.pf-modal-body{padding:28px 32px 36px;}
.pf-modal-tag{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;}
.pf-modal-title{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-0.03em;font-size:clamp(1.3rem,2.8vw,1.8rem);line-height:1.1;margin:0 0 16px;}
.pf-modal-desc{color:var(--ink-2);font-size:15px;line-height:1.7;margin:0;}

/* ---------- blog ---------- */
.blog{background:var(--soft);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;transition:transform .28s ease,box-shadow .28s ease;}
.post:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(20,20,19,.25);}
.post .kicker{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-3);margin-bottom:16px;}
.post .kicker .tag{color:var(--ink);font-weight:500;}
.post h3{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-0.02em;font-size:1.22rem;line-height:1.15;margin:0 0 12px;}
.post p{color:var(--ink-2);font-size:14px;margin:0 0 22px;flex:1;}
.post .more{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--ink);}
.post .more svg{transition:transform .25s ease;}
.post:hover .more svg{transform:translateX(4px);}

/* ---------- testimonial ---------- */
.quote-wrap{text-align:center;max-width:760px;margin:0 auto;position:relative;}
.quote-mark{font-family:"Newsreader",serif;font-style:italic;font-size:7rem;line-height:0;color:var(--line);height:42px;display:block;}
.quote-wrap blockquote{font-family:"Newsreader",serif;font-style:italic;font-weight:400;font-size:clamp(1.2rem,2.7vw,1.65rem);line-height:1.5;margin:0;color:var(--ink);}
.quote-author{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:34px;padding-top:30px;border-top:1px solid var(--line);}
.quote-author .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#cfccc4,#57544e);display:grid;place-items:center;color:#fff;font-size:14px;font-weight:600;}
.quote-author .n{text-align:left;}
.quote-author .n b{font-weight:600;font-size:14.5px;font-family:"Inter Tight",sans-serif;}
.quote-author .n span{display:block;color:var(--ink-2);font-size:13px;}

/* ---------- CTA ---------- */
.cta{background:var(--black);color:var(--on-black);border-radius:28px;margin:0 var(--pad);}
.cta-inner{max-width:var(--maxw);margin:0 auto;padding:64px var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;}
.cta h2{font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-0.035em;line-height:0.96;font-size:clamp(2.6rem,7vw,5rem);margin:0;}
.cta .right{display:flex;flex-direction:column;align-items:flex-end;gap:16px;}
.cta .status{color:var(--on-black-2);}

/* ---------- footer ---------- */
footer{background:var(--black);color:var(--on-black);margin-top:-28px;padding:90px 0 38px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.1);}
.foot-brand .logo img{filter:brightness(0) invert(1);}
.foot-brand p{color:var(--on-black-2);font-size:14px;max-width:34ch;margin:18px 0 0;line-height:1.6;}
.foot-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:0 0 16px;font-weight:500;}
.foot-col a{display:block;color:var(--on-black-2);font-size:14px;margin-bottom:11px;transition:color .2s ease;}
.foot-col a:hover{color:var(--on-black);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:26px;flex-wrap:wrap;}
.foot-bottom .socials{display:flex;gap:10px;}
.foot-bottom .socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.14);border-radius:50%;display:grid;place-items:center;color:var(--on-black-2);transition:.2s;}
.foot-bottom .socials a:hover{background:var(--on-black);color:var(--black);border-color:var(--on-black);}
.foot-bottom small{color:var(--ink-3);font-size:13px;}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{display:none;}
  .menu-btn{display:grid;place-items:center;}
  .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--pad) 16px;}
  .nav-links.open a{padding:12px 0;width:100%;border-bottom:1px solid var(--line);}
  .hero .wrap{display:block;}
  .hero-top{display:flex;justify-content:center;}
  .hero-photo{width:100%;height:380px;}
  .hero-photo img{object-position:center 70%;}
  .hero h1{margin-top:16px;}
  .about,.services-grid,.sec-head{grid-template-columns:1fr;}
  .pf-grid,.blog-grid{grid-template-columns:1fr 1fr;}
  .cards{grid-template-columns:1fr;}
  .about .stats{padding-top:8px;}
  .hero-tag{text-align:left;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .pf-grid,.blog-grid,.foot-grid{grid-template-columns:1fr;}
  .hero-photo{width:100%;height:340px;}
  .xp-row{grid-template-columns:1fr;}
  .xp-row .year{font-size:1.5rem;}
  .cta-inner{flex-direction:column;align-items:flex-start;}
  .cta .right{align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}