/* CONTA theme styles. Built from the Figma design. */
/* Brand display font. Drop SVN-Neutraface2-Black.woff2 into assets/fonts/ (licensed copy) and it is used automatically. */
@font-face{font-family:"SVN-Neutraface 2";src:url("../fonts/SVN-Neutraface2-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
[hidden]{display:none!important}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Layout: full-bleed bands alternating dark / light, content on a 1320px track with 60px gutters (Figma 1440 frame) */
:root{
  color-scheme: dark;
  /* Primary (graphite) */
  --p50:#EBEBEB; --p100:#C0C0C0; --p200:#A1A1A1; --p300:#767676; --p400:#5C5C5C;
  --p500:#393939; --p600:#2E2E2E; --p700:#242424; --p800:#1C1C1C; --p900:#151515;
  /* Secondary (green). Main = #50C950 under 20% black */
  --g100:#C9EEC9; --green:#40A140; --g400:#73D473;
  --ink:#292D32; --white:#FFFFFF; --black:#000000; --f4:#F4F4F4;
  /* Type. SVN-Neutraface 2 is licensed; League Spartan stands in until the font files are supplied */
  --display:"SVN-Neutraface 2","League Spartan","Montserrat",system-ui,sans-serif;
  --body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4.2vw,60px);
  --track:1320px;
  /* Scale from the style guide, fluid below 1440px */
  --mega:clamp(40px,5vw,72px);
  --h1:clamp(30px,2.8vw,40px);
  --h2:clamp(24px,2.5vw,36px);
  --h3:clamp(21px,2.1vw,30px);
  --lg:clamp(17px,1.4vw,20px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--p900);color:var(--white);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
button,input,textarea{font:inherit}
:focus-visible{outline:2px solid var(--g400);outline-offset:3px}
.wrap{max-width:calc(var(--track) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.disp{font-family:var(--display);font-weight:900;line-height:1.2;margin:0;text-wrap:balance}
.h1{font-size:var(--h1)}
.dot{color:var(--green)}
h2,h3,p{margin:0}
.ico{width:20px;height:20px;flex:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border-radius:1000px;background:var(--green);color:var(--black);font-weight:600;font-size:16px;border:0;cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{background:#4bb54b;transform:translateY(-1px)}
.btn .ico{transition:transform .2s}
.btn:hover .ico{transform:translateX(3px)}
.link{display:inline-flex;align-items:center;gap:10px;padding-bottom:4px;border-bottom:1px solid currentColor;font-weight:600;font-size:var(--lg);line-height:1.2}
.link .ico{width:16px;height:16px;color:var(--green);transition:transform .2s}
.link:hover .ico{transform:translateX(4px)}

/* ---------- HERO ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--black);padding-block:40px 120px}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
   radial-gradient(60% 80% at 85% 40%,rgba(120,40,160,.35),transparent 60%),
   radial-gradient(40% 60% at 70% 70%,rgba(255,120,40,.18),transparent 65%),
   linear-gradient(115deg,#050505 0%,#0e0e0e 40%,#121212 100%)}
/* light streaks, nod to the prism photo */
.hero::after{content:"";position:absolute;z-index:-1;width:140%;height:220px;left:-10%;top:52%;
  transform:rotate(-24deg);filter:blur(18px);opacity:.75;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 25%,rgba(180,200,255,.35) 48%,rgba(255,170,90,.45) 55%,rgba(130,60,200,.3) 62%,transparent 80%)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:inline-flex;color:var(--white);line-height:0}
.logo svg{width:179px;height:auto;aspect-ratio:1967/429}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px;border-radius:1000px;
  background:rgba(40,40,40,.3);border:1px solid var(--p100);box-shadow:inset 0 4px 10px rgba(0,0,0,.25);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex:0 1 873px}
.nav ul{display:flex;gap:12px;list-style:none;margin:0 auto;padding:0}
.nav ul a{display:block;padding:8px 20px;border-radius:1000px;font-weight:600;font-size:16px;transition:background .2s}
.nav ul a:hover{background:rgba(255,255,255,.12)}
.nav ul a.active{background:rgba(221,221,221,.3);box-shadow:inset 0 4px 4px rgba(0,0,0,.25);font-weight:700;padding-inline:24px}
.nav .btn .ico{width:20px}
.menu-btn{display:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--p100);background:rgba(40,40,40,.3);color:var(--white);cursor:pointer;align-items:center;justify-content:center}
.hero-title{margin-top:100px;display:grid;gap:20px;max-width:960px}
.hero-title .mega{font-family:var(--display);font-weight:900;font-size:var(--mega);line-height:1.2;text-transform:uppercase;margin:0;display:grid;gap:12px}
.hero-title .row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
@media (min-width:700px){.hero-title .row{flex-wrap:nowrap}}
.hl{background:var(--green);color:var(--p500);padding:4px 6px;line-height:1.05}
.hero-title p{font-size:var(--h3);font-weight:700;line-height:1.2}
.social-rail{position:absolute;right:var(--gutter);top:50%;transform:translateY(calc(-50% + 14px));display:flex;flex-direction:column;align-items:center;gap:20px;padding:12px;border-radius:1000px;
  background:rgba(40,40,40,.1);border:1.5px solid var(--p100);box-shadow:inset 0 4px 10px rgba(0,0,0,.25);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.social-rail .sep{width:1px;height:60px;background:var(--white)}
.soc{display:flex;gap:20px}
.soc.col{flex-direction:column}
.soc a{width:40px;height:40px;border-radius:50%;border:1px solid var(--white);display:grid;place-items:center;transition:background .2s,color .2s}
.soc a:hover{background:var(--white);color:var(--black)}
.soc svg{width:22px;height:22px}

/* ---------- ABOUT ---------- */
.about{position:relative;isolation:isolate;
  background:
   linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.24)),
   repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 46px),
   radial-gradient(60% 90% at 30% 30%,#5a4632 0%,#2a2119 45%,#141210 100%)}
.about-head{border-bottom:2px solid var(--white);padding-block:40px 20px}
.about-grid{display:grid;grid-template-columns:1fr 1fr}
.about-main{padding:56px var(--gutter) 56px calc(var(--gutter) + 20px);display:grid;justify-items:start;gap:32px;align-content:center;max-width:720px;justify-self:end;width:100%}
.about-main h3{font-size:var(--h3);font-weight:700;line-height:1.2}
.mark{background:linear-gradient(transparent 52%,var(--green) 52%);padding-inline:2px}
.about-main p{font-size:var(--lg);max-width:560px}
.stats{border-left:1px solid var(--white);display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:60px 80px;padding:60px var(--gutter) 60px 80px;align-content:center}
.stat b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(64px,7vw,100px);line-height:.8;font-variant-numeric:tabular-nums;margin-bottom:22px}
.stat span{font-weight:700;font-size:var(--lg)}

/* ---------- WHAT WE DO ---------- */
.light{color:var(--black)}
.wwd{position:relative;isolation:isolate;background:var(--p50);overflow:hidden;padding-block:80px}
.wwd::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background:
   linear-gradient(135deg,transparent 30%,rgba(255,255,255,.9) 38%,transparent 46%),
   linear-gradient(135deg,transparent 55%,rgba(0,0,0,.06) 62%,transparent 70%),
   linear-gradient(135deg,transparent 8%,rgba(255,255,255,.7) 14%,transparent 22%)}
.wwd-grid{display:grid;grid-template-columns:minmax(0,540px) minmax(0,800px);justify-content:space-between;gap:40px;padding-left:var(--gutter);max-width:calc(var(--track) + 2*var(--gutter) + 120px);margin-left:auto;margin-right:0}
.wwd-desc{display:flex;flex-direction:column;gap:40px}
.wwd-desc .body{display:grid;gap:20px;justify-items:start}
.wwd-desc .body p{font-size:var(--lg);color:var(--p500)}
.wwd-desc .link{color:var(--black)}
.capture{margin-top:auto;display:grid;gap:12px}
.capture p{font-weight:700;color:var(--p300)}
.capture p i{font-weight:700}
.capture form{display:flex;gap:16px}
.capture input{flex:1;min-width:0;height:40px;border-radius:1000px;border:1px solid var(--p500);background:transparent;padding:8px 20px;color:var(--black)}
.capture input::placeholder{color:var(--p200)}
.round{width:40px;height:40px;border-radius:50%;border:0;background:var(--green);display:grid;place-items:center;cursor:pointer;flex:none;color:var(--black)}
.round .ico{width:16px}
.note{font-size:14px;font-weight:600;color:var(--green);min-height:21px}
.cats{display:grid;gap:32px;list-style:none;margin:0;padding:0}
.cats li{padding-left:calc(var(--i)*40px)}
.cats a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 80px 32px 8px;border-bottom:1px solid var(--black);color:var(--p500);font-weight:700;font-size:var(--h2);line-height:1.2;position:relative}
.cats a::before{content:attr(data-n);position:absolute;left:-4px;top:-28px;font-family:var(--display);font-weight:900;font-size:100px;line-height:1;color:var(--g100);z-index:-1;opacity:0;transform:translateY(8px);transition:.25s}
.cats a:hover::before{opacity:1;transform:none}
.cats a svg{width:40px;height:40px;transition:transform .25s}
.cats a:hover svg{transform:translateX(8px)}

/* ---------- PROJECTS ---------- */
.projects{position:relative;isolation:isolate;overflow:hidden;padding-block:60px;
  background:
   linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),
   radial-gradient(50% 70% at 20% 30%,rgba(255,255,255,.08),transparent 70%),
   radial-gradient(40% 60% at 75% 80%,rgba(255,255,255,.06),transparent 70%),
   #000}
.proj-grid{display:grid;grid-template-columns:347px minmax(0,1fr);gap:100px;align-items:end;margin-top:40px;padding-left:calc(var(--gutter) + 20px)}
.proj-desc{display:grid;gap:40px;padding-bottom:64px;justify-items:start}
.proj-desc p{font-size:var(--lg)}
.proj-desc .link{color:var(--white)}
.proj-desc .link .ico{color:var(--white)}
.track{display:flex;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-top:4px}
.track::-webkit-scrollbar{display:none}
.case{flex:0 0 320px;scroll-snap-align:start;position:relative;padding:24px 20px;border-radius:20px;background:rgba(235,235,235,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:grid;gap:16px;align-content:start}
.case .tag-btn{position:absolute;right:0;top:0;height:48px;min-width:48px;padding:0 14px;justify-content:center;border-radius:1000px;transition:padding .25s}
.case .tag-btn span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .25s}
.case:hover .tag-btn span,.case:focus-within .tag-btn span{max-width:100px}
.case .notch{position:absolute;right:-6px;top:-6px;width:60px;height:60px;border-radius:0 20px 0 30px;background:var(--black)}
.case h3{font-size:var(--lg);font-weight:700;margin-top:8px}
.case hr{width:80px;margin:0 0 8px;border:0;border-top:1px solid var(--p50)}
.case p{font-size:16px;min-height:120px}
.thumb{height:140px;border-radius:8px}
.t1{background:
   repeating-linear-gradient(90deg,#f2c14e 0 22px,#3f88c5 22px 44px,#e94f37 44px 66px,#f6f7eb 66px 88px,#393e41 88px 110px),
   #ddd;background-size:110px 34px;background-position:0 0;
   -webkit-mask:linear-gradient(170deg,#000 0 100%)}
.t1{background:linear-gradient(170deg,rgba(255,255,255,.0),rgba(255,255,255,.35)),repeating-linear-gradient(90deg,#f2c14e 0 22px,#3f88c5 22px 44px,#e94f37 44px 66px,#f6f7eb 66px 88px,#5b6770 88px 110px)}
.t2{background:radial-gradient(70% 90% at 70% 30%,#d6dde3,#7b8791 60%,#3b444b)}
.t3{background:
   linear-gradient(15deg,transparent 40%,rgba(0,0,0,.1) 41%,transparent 42%),
   radial-gradient(20% 26% at 25% 35%,#ffd36b 98%,transparent),
   radial-gradient(20% 26% at 62% 55%,#ffb3a7 98%,transparent),
   radial-gradient(18% 24% at 85% 25%,#ffe08a 98%,transparent),#cfd4d6}
.pager{display:flex;justify-content:space-between;align-items:center;max-width:873px;margin-top:24px}
.arrows{display:flex;gap:40px}
.arrows button{background:none;border:0;color:var(--white);cursor:pointer;padding:0;width:40px;height:40px}
.arrows button:disabled{opacity:.4;cursor:default}
.arrows svg{width:40px;height:40px}
.dots{display:flex;gap:12px}
.dots i{display:block;width:60px;height:6px;border-radius:1000px;background:var(--p50);opacity:.5;transition:.3s}
.dots i.on{width:90px;opacity:1}

/* ---------- CLIENTS ---------- */
.clients{background:var(--white);padding-block:60px}
.cl-grid{display:grid;grid-template-columns:250px 2px minmax(0,1fr);gap:60px;align-items:center;margin-top:44px}
.cl-decor{font-weight:700;font-size:40px;line-height:1.5;text-align:right;display:grid;justify-items:end;position:relative}
.cl-decor .bar1{position:absolute;left:0;top:16px;width:116px;height:28px;background:var(--green)}
.cl-decor .says{background:var(--green);padding-inline:4px}
.cl-rule{align-self:stretch;background:var(--p300)}
.quote{display:grid;gap:20px;padding-block:20px}
.qnav{display:flex;align-items:center;gap:20px;color:var(--p400)}
.qnav button{background:none;border:0;padding:0;cursor:pointer;color:inherit;width:40px;height:40px}
.qnav svg{width:40px;height:40px}
.qnav span{font-style:italic;font-weight:600;font-size:var(--h3);color:var(--p500);font-variant-numeric:tabular-nums;min-width:80px;text-align:center}
.quote blockquote{margin:0;font-weight:600;font-size:var(--h3);line-height:1.5;text-wrap:pretty;transition:opacity .25s}
.who{font-style:italic;font-size:var(--h3);line-height:1.5}
.who b{display:block;font-weight:600;color:var(--p500)}
.who span{font-weight:300;color:var(--p400)}

/* ---------- PERSPECTIVES ---------- */
.persp{background:var(--p500);padding-block:60px 80px}
.persp-head{display:flex;justify-content:space-between;align-items:center;gap:20px}
.ghost{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border-radius:1000px;border:1px solid var(--green);color:var(--green);font-weight:600}
.ghost .ico{transition:transform .2s}
.ghost:hover .ico{transform:translateX(3px)}
.articles{display:grid;gap:60px;margin-top:60px}
.art{display:grid;gap:60px}
.art .row{display:grid;grid-template-columns:repeat(2,minmax(0,600px));gap:60px;align-items:center}
.art.l{padding-left:calc(var(--gutter) + 60px);padding-right:var(--gutter)}
.art.r{padding-right:var(--gutter);padding-left:calc(var(--gutter) + 60px);justify-items:end}
.art.r .txt{text-align:right;justify-items:end}
.art.r .row > .img{order:2}
.art hr{width:100%;border:0;border-top:1px solid var(--white);margin:0}
.img{aspect-ratio:600/320;width:100%;max-width:100%}
.txt{display:grid;gap:12px}
.txt h3{font-size:var(--h3);font-weight:700;line-height:1.2;text-wrap:balance}
.date{display:flex;align-items:center;gap:12px;font-weight:600;font-size:var(--lg)}
.date svg{width:16px;height:16px}
.txt p{font-size:16px;color:#e8e8e8}
.tags{display:flex;gap:12px;flex-wrap:wrap}
.tags span{border:1px solid var(--white);border-radius:100px;padding:8px 20px;font-weight:600;font-size:14px;line-height:1.2;text-transform:uppercase}
.i1{background:
   linear-gradient(160deg,transparent 55%,rgba(0,0,0,.25)),
   linear-gradient(28deg,transparent 46%,#2b2b2b 46.4% 49%,transparent 49.4%),
   radial-gradient(16% 26% at 74% 26%,#3a2b1e 60%,#c9b9a3 62% 70%,transparent 72%),
   linear-gradient(200deg,#e9e6e1,#d8d3cb)}
.i2{background:
   linear-gradient(120deg,transparent 30%,#ff6a2b 30.2% 78%,transparent 78.2%),
   radial-gradient(14% 22% at 18% 22%,#f6c800 97%,transparent),
   radial-gradient(10% 16% at 30% 72%,#f6c800 97%,transparent),
   linear-gradient(#2c2c2c,#232323)}
.i3{background:
   linear-gradient(90deg,transparent 30%,#e0473f 30% 34%,transparent 34% 52%,#e0473f 52% 56%,transparent 56%),
   linear-gradient(transparent 14%,#e0473f 14% 20%,transparent 20%),
   radial-gradient(30% 22% at 46% 52%,#fff 70%,transparent 72%),
   linear-gradient(#2f8fe0,#7ec0f2)}
.i4{background:
   radial-gradient(26% 30% at 50% 50%,transparent 60%,rgba(0,0,0,.25) 62% 66%,transparent 68%),
   linear-gradient(150deg,#b02a33,#7a161d 70%,#5a1015)}

/* ---------- COLLABORATORS ---------- */
.collab{position:relative;isolation:isolate;overflow:hidden;background:var(--f4);padding-block:60px 80px;text-align:center}
.collab .disp{color:var(--p500)}
.marquee{margin-top:40px;display:grid;gap:60px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
          mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.lane{display:flex;gap:60px;width:max-content;animation:slide 40s linear infinite}
.lane.rev{animation-direction:reverse}
.marquee:hover .lane{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.brand{width:200px;height:100px;display:grid;place-items:center;color:var(--p500);font-weight:700;font-size:26px;letter-spacing:-.01em;border:1px dashed var(--p100);border-radius:12px}
.brand small{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--p300)}
@media (prefers-reduced-motion:reduce){.lane{animation:none}html{scroll-behavior:auto}}

/* ---------- FOOTER ---------- */
.footer{position:relative;isolation:isolate;overflow:hidden;
  background:
   radial-gradient(70% 60% at 80% 100%,rgba(80,201,80,.08),transparent 70%),
   repeating-radial-gradient(circle at 70% 120%,rgba(255,255,255,.035) 0 1px,transparent 1px 14px),
   var(--p500)}
.ft-grid{display:grid;grid-template-columns:minmax(0,491px) minmax(0,1fr);gap:60px;padding-block:60px 0}
.contact h2{font-family:var(--display);font-weight:900;font-size:var(--h1);line-height:1.2;text-transform:uppercase}
.contact h3{font-size:var(--h2);font-weight:700;line-height:1.2;margin-top:12px}
.contact form{display:grid;gap:20px;margin-top:32px}
.field{display:grid;gap:8px}
.field label{font-weight:600;font-size:var(--lg)}
.field input,.field textarea{width:100%;border:1px solid var(--white);border-radius:1000px;background:rgba(164,164,164,.1);backdrop-filter:blur(20px);color:var(--white);padding:8px 20px;height:40px}
.field textarea{border-radius:12px;height:164px;padding:12px 20px 32px;resize:vertical}
.field ::placeholder{color:var(--p200)}
.contact .btn{justify-self:start;margin-top:12px}
.ft-side{position:relative;padding-right:60px;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:60px;padding-top:135px;padding-bottom:280px}
.ft-side::before{content:"";position:absolute;top:-60px;bottom:0;right:calc(30% + 30px);width:2px;background:var(--white);display:none}
.ft-side h2{font-family:var(--display);font-weight:900;font-size:var(--h1);line-height:1.2;text-transform:uppercase}
.quick{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:20px;margin-top:22px}
.quick a{border-bottom:1px solid var(--white);padding:0 2px 2px;font-weight:600;font-size:var(--lg)}
.quick a:hover{color:var(--g400);border-color:var(--g400)}
.ft-side address{font-style:normal;font-weight:700;font-size:var(--lg);margin-top:20px}
.ft-side .soc{margin-top:20px;justify-content:flex-end}
@media (max-width:960px){.ft-side .soc{justify-content:flex-start}}
.big-logo{position:absolute;right:2px;bottom:2px;pointer-events:none}
.big-logo svg{width:clamp(260px,41.5vw,598px)}
.vline{position:absolute;right:max(calc(var(--gutter) + 20px),calc((100% - var(--track))/2 + 20px));top:0;bottom:calc(clamp(260px,41.5vw,598px)*.218 + 4px);width:2px;background:var(--white)}
.legal{border-top:1px solid rgba(255,255,255,.15);margin-top:40px;padding-block:16px;font-size:12px;font-weight:300;color:var(--p100)}
.ok{font-size:14px;font-weight:600;color:var(--g400);min-height:21px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .nav ul a{padding:8px 12px}
  .social-rail{display:none}
  .wwd-grid,.proj-grid{gap:48px}
  .proj-grid{grid-template-columns:280px minmax(0,1fr);padding-left:var(--gutter)}
  .art.l,.art.r{padding-inline:var(--gutter)}
  .stats{padding-left:48px;gap:48px}
}
@media (max-width:960px){
  .nav{flex:none;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav ul{display:none;position:absolute;left:var(--gutter);right:var(--gutter);top:100px;flex-direction:column;gap:4px;padding:12px;border-radius:24px;background:rgba(30,30,30,.92);border:1px solid var(--p100);backdrop-filter:blur(20px);z-index:5}
  .nav.open ul{display:flex}
  .nav .btn{display:none}
  .menu-btn{display:inline-flex}
  .hero{padding-bottom:80px}
  .hero-title{margin-top:64px}
  .about-grid{grid-template-columns:1fr}
  .about-main{max-width:none;padding:40px var(--gutter)}
  .stats{border-left:0;border-top:1px solid var(--white);padding:40px var(--gutter)}
  .wwd-grid{grid-template-columns:1fr;padding-right:var(--gutter);margin:0;max-width:none}
  .cats li{padding-left:calc(var(--i)*16px)}
  .cats a{padding-right:8px}
  .capture{margin-top:0}
  .proj-grid{grid-template-columns:minmax(0,1fr);padding-right:0}
  .proj-desc{padding:0 var(--gutter) 0 0}
  .cl-grid{grid-template-columns:1fr;gap:24px}
  .cl-decor{display:none}
  .cl-rule{display:none}
  .art .row{grid-template-columns:1fr;gap:24px}
  .art.r{justify-items:stretch}
  .art.r .txt{text-align:left;justify-items:start}
  .art.r .date{justify-content:flex-start}
  .art.r .row > .img{order:0}
  .ft-grid{grid-template-columns:1fr}
  .ft-side{align-items:flex-start;text-align:left;padding-top:20px;padding-bottom:200px;padding-right:0}
  .quick{justify-content:flex-start}
  .vline{display:none}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr 1fr;gap:32px 24px}
  .stat b{margin-bottom:14px}
  .stat span{font-size:15px}
  .case{flex-basis:84%}
  .persp-head{flex-wrap:wrap}
  .pager .dots i{width:36px}.pager .dots i.on{width:60px}
  .arrows{gap:20px}
}

/* ===== ABOUT PAGE ===== */
.about-hero{padding-block:40px 60px;
  background:
   radial-gradient(circle,rgba(255,255,255,.55) 0 .9px,transparent 1.3px) 0 0/23px 19px,
   radial-gradient(circle,rgba(255,255,255,.32) 0 .7px,transparent 1.1px) 7px 11px/31px 27px,
   radial-gradient(circle,rgba(255,255,255,.22) 0 .6px,transparent 1px) 13px 5px/17px 37px,
   repeating-linear-gradient(-28deg,rgba(255,255,255,.035) 0 38px,transparent 38px 112px),
   radial-gradient(90% 100% at 75% 10%,#3b3b3b,#161616 72%)}
.about-hero::before,.about-hero::after{content:none}
.about-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 15% 60%,rgba(0,0,0,.55),transparent 70%)}
.about-hero .hero-title{margin-top:134px;gap:12px}
.about-hero .social-rail{transform:translateY(calc(-50% + 48px))}

.story{position:relative;isolation:isolate;overflow:hidden;padding-top:60px;
  --cut:calc(min(1240px,100vw - 2*var(--gutter))*.1);
  background:linear-gradient(var(--p500) calc(100% - var(--cut)),var(--white) 0)}
.story .pattern{position:absolute;left:0;top:0;width:100%;height:calc(100% - var(--cut));z-index:-1;opacity:.6}
.story-inner{display:grid;gap:20px}
.story-main{position:relative;display:grid;grid-template-columns:357px 2px minmax(0,1fr);gap:50px;align-items:center;min-height:420px;margin-bottom:56px}
.story-lead{position:relative;isolation:isolate;text-align:right;font-weight:700;font-size:var(--h2);line-height:1.2;text-wrap:balance}
.story-lead::before{content:"";position:absolute;z-index:-1;left:113px;top:50%;width:420px;aspect-ratio:1;border-radius:50%;background:var(--green);transform:translateY(-50%)}
.story-lead .dk{color:var(--p500)}
.vrule,.story-main > p{position:relative;z-index:1}
.vrule{align-self:stretch;background:var(--white);min-height:412px}
.story-main > p{font-weight:700;font-size:clamp(18px,1.95vw,28px);line-height:1.5;max-width:843px;text-wrap:pretty}
.vid{position:relative;width:100%;max-width:1240px;aspect-ratio:1240/700;margin-inline:auto;overflow:hidden;filter:grayscale(1);
  background:
   linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),
   linear-gradient(90deg,transparent 24%,#0e0e0e 24% 25.4%,transparent 25.4% 59.5%,#0e0e0e 59.5% 60.9%,transparent 60.9% 91.5%,#0e0e0e 91.5% 92.9%,transparent 92.9%),
   linear-gradient(transparent 57%,rgba(0,0,0,.35) 57% 58.2%,transparent 58.2%),
   repeating-radial-gradient(ellipse 140% 90% at 55% 115%,transparent 0 46px,rgba(255,255,255,.75) 47px 49px,transparent 50px 74px),
   radial-gradient(60% 50% at 30% 85%,#6c6c6c,transparent 70%),
   linear-gradient(#e2e2e2,#a9a9a9 55%,#6d6d6d)}
.play{position:absolute;left:50%;top:50%;width:clamp(72px,12.9%,160px);aspect-ratio:1;transform:translate(-50%,-50%);border:0;padding:0;background:none;cursor:pointer;transition:transform .25s}
.play:hover{transform:translate(-50%,-50%) scale(1.06)}
.play svg{width:100%;height:100%;display:block;filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
.vid-note{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:rgba(0,0,0,.7);color:var(--white);font-size:14px;font-weight:600;padding:8px 16px;border-radius:1000px;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}

.values-sec{background:var(--white);color:var(--black);padding-block:60px 100px;padding-left:var(--gutter)}
.values-sec .disp{margin-bottom:40px}
.values-sec .disp .g{color:var(--green)}
.values-sec .sub{font-weight:700;font-size:var(--h3);line-height:1.2;max-width:1380px;padding-right:var(--gutter);margin-bottom:40px;text-wrap:balance}
.values{display:flex;flex-direction:column;align-items:flex-end;max-width:1380px;margin-left:0}
@media (min-width:1500px){.values-sec{padding-left:calc((100vw - var(--track))/2)}.values{max-width:none}}
.val{--step:clamp(12px,3vw,40px);width:calc(100% - var(--k)*var(--step));background:var(--bg);box-shadow:0 4px 10px rgba(0,0,0,.25);position:relative;transition:background .3s}
.val.open{background:var(--white)}
.val-h{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;background:none;border:0;cursor:pointer;text-align:left;color:var(--black);
  padding:32px 60px 32px 40px;font-weight:700;font-size:clamp(20px,2.5vw,36px);line-height:1.2}
.val-h svg{width:40px;height:40px;flex:none;transition:transform .3s}
.val.open .val-h svg{transform:rotate(180deg)}
.val-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.val.open .val-b{grid-template-rows:1fr}
.val-b > div{overflow:hidden;min-height:0}
.val-b .rule{height:2px;background:var(--p500);margin:-12px 60px 20px 40px}
.val-b p{margin:0 60px 32px 40px;font-size:clamp(16px,1.67vw,24px);line-height:1.5;max-width:1197px}
@media (prefers-reduced-motion:reduce){.val-b,.val,.val-h svg{transition:none}}

.footer.ink{background:
   radial-gradient(60% 50% at 85% 100%,rgba(255,255,255,.05),transparent 70%),
   repeating-radial-gradient(circle at 70% 120%,rgba(255,255,255,.03) 0 1px,transparent 1px 14px),
   #0a0a0c}

@media (max-width:960px){
  .about-hero .hero-title{margin-top:64px}
  .story-main{grid-template-columns:1fr;gap:28px;min-height:0;margin-bottom:40px}
  .story-lead{text-align:left;padding-block:40px;max-width:420px}
  .story-lead::before{left:-30px;width:clamp(200px,60vw,300px)}
  .vrule{min-height:0;height:2px;width:80px}
  .val-h{padding:24px 20px}
  .val-b .rule{margin:-8px 20px 16px}
  .val-b p{margin:0 20px 24px}
  .val-h svg{width:28px;height:28px}
}


/* ===== PROJECTS PAGE ===== */
.proj-hero{padding-block:40px 60px;background:#0d0d0f}
.proj-hero::after{content:none}
.proj-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
   linear-gradient(118deg,transparent 52%,rgba(120,150,165,.85) 52.2%,rgba(70,95,110,.9) 58%,transparent 58.2%),
   linear-gradient(140deg,transparent 60%,rgba(150,180,195,.75) 60.2%,rgba(60,80,95,.85) 67%,transparent 67.2%),
   linear-gradient(100deg,transparent 70%,rgba(95,125,140,.8) 70.2%,rgba(40,55,65,.9) 79%,transparent 79.2%),
   linear-gradient(160deg,transparent 40%,rgba(80,105,118,.55) 40.2%,rgba(25,32,38,.7) 49%,transparent 49.2%),
   linear-gradient(75deg,transparent 82%,rgba(130,160,175,.7) 82.2%,rgba(50,65,75,.85) 92%,transparent 92.2%),
   radial-gradient(60% 80% at 80% 60%,rgba(80,110,125,.35),transparent 70%),
   linear-gradient(#0b0b0d,#141619)}
.proj-hero .hero-title{margin-top:134px;gap:12px}
.proj-hero .social-rail{transform:translateY(calc(-50% + 48px))}

.coll{background:
   radial-gradient(70% 50% at 50% 0%,rgba(255,255,255,.04),transparent 70%),
   repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 5px),
   #393939;padding-block:60px}
.coll-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.search{display:flex;gap:16px;width:356px;max-width:100%}
.search input{flex:1;min-width:0;height:40px;border-radius:1000px;border:1px solid var(--white);background:transparent;color:var(--white);padding:8px 20px}
.search input::placeholder{color:var(--p200)}
.search .round svg{width:20px;height:20px}
.coll-lead{margin-top:40px;display:grid;gap:20px}
.coll-lead h3{font-weight:700;font-size:clamp(20px,1.95vw,28px);line-height:1.5;max-width:873px;text-wrap:balance}
.coll-lead p{font-size:var(--lg)}
.coll-body{border-top:1px solid var(--white);margin-top:40px;padding-top:40px;display:grid;gap:40px}
.chips{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
  -webkit-mask:linear-gradient(90deg,#000 92%,transparent);mask:linear-gradient(90deg,#000 92%,transparent)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--white);border-radius:100px;padding:8px 20px;background:transparent;color:var(--white);font-weight:600;font-size:14px;line-height:1.2;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.chip:hover{background:rgba(255,255,255,.12)}
.chip[aria-pressed="true"]{background:var(--white);color:var(--black)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.card{position:relative;isolation:isolate;padding:20px 20px 24px;display:flex;flex-direction:column;gap:20px;min-height:434px}
.card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:20px;background:rgba(235,235,235,.07);border:1px solid rgba(255,255,255,.06);
  -webkit-mask:radial-gradient(circle 33px at calc(100% - 24px) calc(100% - 24px),transparent 97%,#000 100%);
          mask:radial-gradient(circle 33px at calc(100% - 24px) calc(100% - 24px),transparent 97%,#000 100%)}
.card .ph{height:200px;border-radius:8px;flex:none}
.card h4{margin:0;font-weight:600;font-size:clamp(20px,1.67vw,24px);line-height:1.2;text-wrap:balance}
.card hr{width:80px;border:0;border-top:1px solid var(--p50);margin:-8px 0 0}
.card p{font-size:16px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.card .tags{gap:6px;padding-right:60px}
.card .go{position:absolute;right:0;bottom:0;width:48px;height:48px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:var(--black);transition:transform .2s}
.card .go svg{width:20px;height:20px}
.card:hover .go{transform:rotate(-45deg)}
.card:hover::before{background:rgba(235,235,235,.11)}
.empty{grid-column:1/-1;text-align:center;padding:60px 0;display:grid;gap:16px;justify-items:center}
.empty p{font-size:var(--lg)}
.more{justify-self:center;background:transparent;cursor:pointer;font-size:16px}
.empty .ghost{background:transparent;cursor:pointer}
.more .ico{transition:transform .2s}
.more:hover .ico{transform:translateY(3px)}
/* placeholder art */
.a1{background:radial-gradient(22% 30% at 45% 48%,#e9c98b 60%,#a4824d 62% 70%,transparent 72%),repeating-linear-gradient(80deg,#6b5a46 0 3px,#8a7559 3px 7px,#5a4a39 7px 9px),linear-gradient(#c7a77d,#7a6248)}
.a2{background:linear-gradient(170deg,rgba(255,255,255,0),rgba(255,255,255,.3)),repeating-linear-gradient(90deg,#f2c14e 0 22px,#3f88c5 22px 44px,#e94f37 44px 66px,#f6f7eb 66px 88px,#5b6770 88px 110px)}
.a3{background:linear-gradient(160deg,transparent 55%,#ff5a1f 55.3% 72%,transparent 72.3%),repeating-linear-gradient(90deg,#e8e8e8 0 14px,#d5d5d5 14px 16px),linear-gradient(#f4f4f4,#dcdcdc)}
.a4{background:radial-gradient(30% 40% at 30% 30%,#ff6b6b,transparent 60%),radial-gradient(30% 40% at 55% 25%,#4dabf7,transparent 60%),radial-gradient(30% 40% at 80% 35%,#ffd43b,transparent 60%),linear-gradient(#f1f3f5,#dee2e6)}
.a5{background:linear-gradient(90deg,transparent 35%,#2b2b2b 35% 65%,transparent 65%),radial-gradient(12% 18% at 18% 30%,#fff 90%,transparent),radial-gradient(10% 15% at 85% 70%,#fff 90%,transparent),#e03131}
.a6{background:radial-gradient(18% 34% at 50% 50%,#212529 70%,transparent 72%),radial-gradient(60% 80% at 30% 80%,#69db7c,transparent 70%),linear-gradient(#e6fcf5,#b2f2bb)}
.a7{background:radial-gradient(40% 50% at 70% 40%,#748ffc,transparent 70%),radial-gradient(40% 50% at 30% 70%,#f783ac,transparent 70%),#1c1c2e}
.a8{background:repeating-linear-gradient(135deg,#ffd8a8 0 18px,#ffa94d 18px 36px),#fff}
.a9{background:linear-gradient(transparent 60%,rgba(0,0,0,.35)),radial-gradient(50% 60% at 50% 30%,#a5d8ff,#1971c2)}

@media (max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media (max-width:960px){.proj-hero .hero-title{margin-top:64px}}
@media (max-width:640px){.grid{grid-template-columns:1fr}.search{width:100%}.card{min-height:0}}


/* ===== INSIGHTS PAGE ===== */
.ins-hero{padding-block:40px 60px;background:#050506}
.ins-hero::after{content:none}
.ins-hero .curves{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.ins-hero .hero-title{margin-top:134px;gap:32px;max-width:960px}
.ins-hero .kicker{max-width:750px}
@media (min-width:700px){.ins-hero .mega span{white-space:nowrap}}
.ins-hero .social-rail{transform:translateY(calc(-50% + 48px))}
.kicker{display:flex;align-items:center;gap:20px;font-weight:700;font-size:var(--h2);line-height:1.2;margin:0}
.kicker::after{content:"";flex:1;height:2px;background:var(--white);min-width:40px}
.ins-hero .mega{gap:12px}

.ins{background:
   radial-gradient(70% 40% at 50% 0%,rgba(255,255,255,.04),transparent 70%),
   repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 5px),
   #393939;padding-block:60px}
.ins-intro{max-width:1160px;margin:0 auto;padding-inline:var(--gutter);text-align:center;font-weight:600;font-size:clamp(17px,1.67vw,24px);line-height:1.2;text-wrap:balance}
.ins-rule{max-width:1280px;margin:40px auto;border:0;border-top:1px solid var(--white);margin-inline:max(var(--gutter),calc((100% - 1280px)/2))}
.ins .chips{padding-inline:clamp(16px,5.5vw,80px)}
.ins .articles{margin-top:40px;gap:60px}
.ins .art.l{padding-left:clamp(16px,5.5vw,80px);padding-right:0}
.ins .art.r{padding-right:clamp(16px,5.5vw,80px);padding-left:0}
.ins .art.l .row,.ins .art.r .row{max-width:1260px;width:100%}
.ins .art.l .row{padding-right:clamp(0px,5.5vw,100px)}
.ins .art.r .row{padding-left:clamp(0px,5.5vw,100px)}
.ins .txt h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.ins .img{display:block;transition:filter .3s}
.ins .img:hover{filter:brightness(1.08)}
.ins .more{display:flex;margin:60px auto 0;background:transparent;cursor:pointer;font-size:16px}
.ins .more .ico{transition:transform .2s}.ins .more:hover .ico{transform:translateY(3px)}
.ins .empty{text-align:center;padding:40px var(--gutter);display:grid;gap:16px;justify-items:center}
.ins .empty .ghost{background:transparent;cursor:pointer}
.b5{background:radial-gradient(18% 30% at 78% 30%,#fffbe6,transparent 70%),linear-gradient(90deg,transparent 30%,#1e1e1e 30% 62%,transparent 62%),linear-gradient(transparent 70%,#3a3a3a 70%),linear-gradient(#f1f1f1,#cfcfcf)}
.b6{background:linear-gradient(90deg,transparent 18%,#f5efe6 18% 30%,transparent 30% 42%,#ffe066 42% 50%,transparent 50% 62%,#f3c4a8 62% 72%,transparent 72% 80%,#f7d6c4 80% 92%,transparent 92%),linear-gradient(transparent 62%,#f4f4f4 62%),linear-gradient(#dfe6ee,#c9d3dd)}
@media (max-width:960px){.ins-hero .hero-title{margin-top:64px}.ins .art.l .row,.ins .art.r .row{padding:0}.ins .art.l,.ins .art.r{padding-inline:var(--gutter)}}


/* ===== SINGLE ARTICLE ===== */
.post-hero{padding-block:40px 60px;
  background:
   linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15)),
   radial-gradient(26% 40% at 66% 40%,transparent 60%,rgba(0,0,0,.25) 62% 66%,transparent 68%),
   repeating-linear-gradient(35deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px),
   linear-gradient(150deg,#b02a33,#7a161d 60%,#4a0d12)}
.post-hero::before,.post-hero::after{content:none}
.post-hero .social-rail{transform:translateY(calc(-50% + 48px))}
.post-head{margin-top:60px;display:grid;gap:20px;max-width:900px}
.back{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;text-transform:uppercase;justify-self:start}
.back svg{width:18px;height:18px;transition:transform .2s}
.back:hover svg{transform:translateX(-4px)}
.post-head h1{font-family:var(--display);font-weight:900;font-size:clamp(34px,4vw,56px);line-height:1.2;text-transform:uppercase;margin:0;text-wrap:balance}
.meta{display:grid;gap:12px;font-weight:600;font-size:var(--lg)}
.meta div{display:flex;align-items:center;gap:12px}
.meta svg{width:20px;height:20px;flex:none}
.meta b{font-weight:700}

.post-main{background:
   repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 5px),
   #393939;padding-block:60px 80px}
.entry{max-width:var(--track);margin-inline:auto;display:grid;gap:28px}
.entry > p,.entry .wp-block-media-text p,.entry .col p{font-size:16px;line-height:1.6;color:#ededed}
.entry > p{max-width:1320px}
.entry .lead{font-weight:700;font-size:clamp(17px,1.67vw,24px);line-height:1.4;color:var(--white)}
.entry h2{display:flex;align-items:flex-end;gap:24px;font-weight:700;font-size:var(--h3);line-height:1.2;margin:20px 0 0;text-wrap:balance}
.entry h2 span{max-width:520px}
.entry h2::after{content:"";flex:1;height:2px;background:var(--white);min-width:40px;margin-bottom:.35em}
.wp-block-image{margin:12px auto;width:100%;max-width:1000px}
.wp-block-image .ph{aspect-ratio:1000/520;width:100%}
.wp-block-image figcaption{margin-top:10px;font-size:14px;font-weight:300;color:var(--p100);text-align:center}
.wp-block-media-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.wp-block-media-text .ph{aspect-ratio:600/340;width:100%}
.wp-block-media-text > div{display:grid;gap:16px}
.wp-block-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:8px}
.col{display:grid;gap:14px;align-content:start}
.col .ph{aspect-ratio:400/250;width:100%}
.col h3{font-weight:700;font-size:var(--lg);line-height:1.35;margin:4px 0 0}
.entry .conclusion{font-weight:700;font-size:var(--lg);line-height:1.5;color:var(--white)}
.post-foot{max-width:var(--track);margin:48px auto 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.4);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.share{display:flex;align-items:center;gap:16px;font-weight:600}
.copy{background:transparent;cursor:pointer;font-size:14px;padding:10px 20px}
/* image placeholders */
.x1{background:linear-gradient(transparent 62%,#c9c3b8 62%),repeating-linear-gradient(90deg,transparent 0 120px,rgba(0,0,0,.5) 120px 124px),linear-gradient(90deg,#e8e4dc 0 2%,transparent 2% 98%,#e8e4dc 98%),repeating-linear-gradient(0deg,transparent 0 30px,rgba(255,255,255,.5) 30px 32px),linear-gradient(#8a8f8a,#cfd2cc)}
.x2{background:radial-gradient(40% 30% at 30% 70%,#b47a4a,transparent 70%),repeating-linear-gradient(90deg,#f3efe7 0 60px,#e2dccf 60px 62px),linear-gradient(transparent 55%,#d9d0c0 55%),#efe9df}
.x3{background:linear-gradient(105deg,#fff 0 18%,transparent 18%),repeating-linear-gradient(90deg,#3c8f88 0 16px,#2f6f6a 16px 18px),linear-gradient(90deg,transparent 60%,#7a3b2e 60% 64%,#d9b6a3 64% 78%,#4a2a20 78%)}
.x4{background:radial-gradient(30% 40% at 40% 40%,#e9c3a5,transparent 70%),linear-gradient(120deg,#2a3440,#7b8a99)}
.x5{background:repeating-linear-gradient(90deg,#334 0 30px,#556 30px 34px),linear-gradient(transparent 60%,#8aa 60%),linear-gradient(#a7c4e0,#5a7690)}
.x6{background:repeating-linear-gradient(90deg,#dfe7e9 0 50px,#2e4148 50px 70px),linear-gradient(transparent 60%,#9aa 60%),#e8eef0}
@media (max-width:960px){
  .wp-block-media-text{grid-template-columns:1fr;gap:20px}
  .wp-block-columns{grid-template-columns:1fr;gap:32px}
  .post-head{margin-top:40px}
}


/* ===== SERVICES PAGE ===== */
.svc-hero{padding-block:40px 60px;background:#0b0b0c}
.svc-hero::after{content:none}
.svc-hero::before{content:"";position:absolute;inset:-10%;z-index:-1;filter:blur(18px);
  background:
   radial-gradient(60% 14% at 55% 18%,rgba(255,255,255,.55),transparent 70%),
   radial-gradient(70% 12% at 70% 42%,rgba(220,220,220,.35),transparent 70%),
   radial-gradient(50% 10% at 30% 62%,rgba(200,200,200,.25),transparent 70%),
   radial-gradient(60% 16% at 80% 80%,rgba(255,255,255,.3),transparent 70%),
   repeating-linear-gradient(170deg,#0d0d0e 0 60px,#232325 60px 110px,#0d0d0e 110px 170px)}
.svc-hero .hero-title{margin-top:134px;gap:12px;max-width:960px}
.svc-hero .social-rail{transform:translateY(calc(-50% + 48px))}
@media (min-width:700px){.svc-hero .mega span{white-space:nowrap}}
.svc .articles{margin-top:40px}
.svc .art .row{min-height:0}
.svc .txt h3{font-size:var(--h3)}
.svc .txt p{max-width:600px}
.svc .art.r .txt p{margin-left:auto}
.s1{background:radial-gradient(14% 22% at 50% 50%,#fff 30%,#b6ffb0 50%,transparent 70%),conic-gradient(from 45deg at 50% 50%,#1e7a1e,#7cf07c,#2a9d2a,#d9ffd2,#1e7a1e,#7cf07c,#2a9d2a,#d9ffd2,#1e7a1e)}
.s2{background:linear-gradient(30deg,transparent 40%,#7fe3e0 40% 46%,transparent 46%),linear-gradient(150deg,transparent 60%,#5fd1cf 60% 68%,transparent 68%),linear-gradient(80deg,transparent 15%,#8ff0ec 15% 20%,transparent 20%),linear-gradient(200deg,transparent 75%,#4cc5c2 75% 82%,transparent 82%),repeating-linear-gradient(135deg,#141414 0 26px,#1d1d1d 26px 52px)}
.s3{background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(0,0,0,.6) 6px 9px),repeating-linear-gradient(90deg,#0a2a0a 0 9px,#33c233 9px 11px,#0a2a0a 11px 22px,#1b7a1b 22px 24px,#051505 24px 37px),#020a02}
.s4{background:radial-gradient(18% 30% at 50% 45%,rgba(255,255,255,.75) 0 40%,rgba(255,255,255,.15) 42% 60%,transparent 62%),linear-gradient(transparent 82%,rgba(0,0,0,.4) 82%),repeating-linear-gradient(90deg,#242424 0 3px,#202020 3px 6px),#1f1f1f}
.s5{background:linear-gradient(118deg,transparent 30%,#f5f5f5 30% 33%,#1e3b26 33% 60%,#f5f5f5 60% 63%,transparent 63%),linear-gradient(170deg,#ddd 0 8%,transparent 8%),#050505}
.cta{background:var(--green);padding:60px var(--gutter);text-align:center;display:grid;gap:40px;justify-items:center}
.cta p{font-weight:600;font-size:var(--lg);line-height:1.5;max-width:1316px;text-wrap:balance}
.cta h2{font-weight:700;font-size:var(--h2);line-height:1.2;margin:0;text-wrap:balance}
.cta .inner{display:grid;gap:24px;justify-items:center}
.btn.white{background:var(--white);color:var(--black)}
.btn.white:hover{background:#f1f1f1}
@media (max-width:960px){.svc-hero .hero-title{margin-top:64px}.svc .art.r .txt p{margin-left:0}}


/* ===== CONTACT PAGE ===== */
.ct-hero{padding-block:40px 120px;background:#000}
.ct-hero::after{content:none}
.ct-hero::before{content:"";position:absolute;inset:-8%;z-index:-1;filter:blur(14px);
  background:
   radial-gradient(40% 10% at 62% 8%,rgba(255,255,255,.75),transparent 70%),
   radial-gradient(30% 8% at 85% 30%,rgba(255,255,255,.5),transparent 70%),
   radial-gradient(50% 14% at 70% 55%,rgba(200,200,200,.35),transparent 70%),
   radial-gradient(40% 10% at 25% 75%,rgba(180,180,180,.25),transparent 70%),
   radial-gradient(60% 20% at 90% 90%,rgba(255,255,255,.2),transparent 70%),
   repeating-linear-gradient(155deg,#050505 0 70px,#2a2a2a 70px 120px,#0a0a0a 120px 180px),#000}
.ct-hero .hero-title{margin-top:134px;gap:12px;max-width:960px}
.ct-hero .social-rail{transform:translateY(calc(-50% + 48px))}
@media (min-width:700px){.ct-hero .mega span{white-space:nowrap}}
.connect{background:#000;padding-block:60px}
.connect h2{margin-bottom:40px}
.info{list-style:none;margin:0;padding:0;border-top:1px solid var(--white)}
.info li{display:grid;grid-template-columns:minmax(0,427px) minmax(0,1fr) auto;gap:20px;align-items:center;padding-block:40px;border-bottom:1px solid var(--white)}
.info b{font-weight:700;font-size:var(--h3);line-height:1.2}
.info span{font-size:var(--lg);line-height:1.5;user-select:all;overflow-wrap:anywhere}
.info button{background:transparent;cursor:pointer;font-size:14px;padding:8px 18px;opacity:0;transition:opacity .2s}
.info li:hover button,.info button:focus-visible{opacity:1}
@media (hover:none){.info button{opacity:1}}
@media (max-width:960px){.ct-hero{padding-bottom:80px}.ct-hero .hero-title{margin-top:64px}}
@media (max-width:640px){.info li{grid-template-columns:1fr auto;padding-block:24px;gap:8px 16px}.info b{grid-column:1/-1}}


/* ===== DRAWER MENU (mobile, Figma 375) ===== */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(335px,89vw);z-index:100;background:#000;color:var(--white);box-shadow:-4px 0 20px rgba(0,0,0,.6);
  display:flex;flex-direction:column;align-items:flex-end;gap:40px;padding:calc(20px + env(safe-area-inset-top,0px)) 0 calc(24px + env(safe-area-inset-bottom,0px));overflow-y:auto;
  transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility .35s}
.drawer.open{transform:none;visibility:visible}
.scrim.open{opacity:1;visibility:visible}
.d-top{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 16px}
.d-top .logo svg{width:160px}
.d-close{width:40px;height:40px;border-radius:50%;border:1px solid var(--p300);background:none;color:var(--white);cursor:pointer;display:grid;place-items:center}
.d-close svg{width:18px;height:18px}
.d-links{display:flex;flex-direction:column;width:100%;padding-right:16px;text-align:right}
.d-links a{font-weight:600;font-size:24px;line-height:1.2;padding:12px 0 12px 16px;border-bottom:.5px solid rgba(118,118,118,.3)}
.d-links a:last-child{border-bottom:0}
.d-links a.active{color:var(--g400)}
.d-block{width:100%;border-top:1.5px solid var(--p100);padding:16px 16px 0 0;display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.d-block h3{font-weight:700;font-size:30px;line-height:1.2;margin:0}
.d-block p{font-weight:700;font-size:16px;line-height:1.5}
@media (min-width:961px){.drawer,.scrim{display:none}}
@media (prefers-reduced-motion:reduce){.drawer,.scrim{transition:none}}

/* ===== MOBILE LAYOUT (Figma 375) ===== */
@media (max-width:960px){
  .menu-btn{border:0;background:none;width:40px;height:40px;margin-right:-8px}
  .menu-btn .ico{width:22px;height:22px}
}
@media (max-width:640px){
  header.hero{padding-block:20px 32px}
  .bar .logo svg{width:80px}
  header.hero .hero-title{margin-top:40px;gap:32px}
  header.hero .mega{font-size:32px;gap:4px}
  header.hero .mega .row{gap:4px}
  header.hero .hero-title > p:not(.kicker){font-size:16px}
  header.hero .kicker{font-size:20px;gap:12px}
  .post-head h1{font-size:28px}
  .h1,.disp.h1{font-size:30px}
  /* home: about */
  .about-head{padding-block:32px 20px}
  .about-main{padding:20px 16px;gap:16px}
  .about-main h3{font-size:24px;font-weight:600}
  .about-main p{font-size:16px}
  .stats{border-top:0;grid-template-columns:repeat(2,minmax(0,160px));justify-content:center;gap:40px 20px;padding:32px 16px;text-align:center}
  .stat b{font-size:60px;margin-bottom:12px}
  .stat span{font-size:16px}
  /* home: what we do */
  .wwd{padding-block:40px}
  .wwd-desc .body p{font-size:16px}
  .wwd-desc .link{font-size:16px}
  .cats{gap:20px}
  .cats li{padding-left:0}
  .cats a{font-size:18px;padding:0 4px 14px 0}
  .cats a svg{width:24px;height:24px}
  .cats a::before{display:none}
  /* home: projects */
  .projects{padding-block:40px}
  .proj-grid{gap:32px;margin-top:24px;grid-template-columns:minmax(0,1fr)}
  .proj-desc{padding-right:var(--gutter)}
  .pager{padding-right:var(--gutter)}
  .proj-desc p{font-size:16px}
  /* home: clients */
  .clients{padding-block:40px}
  .cl-grid{margin-top:24px}
  .cl-decor{display:flex;flex-wrap:wrap;gap:0 8px;justify-content:flex-start;text-align:left;font-size:22px;line-height:1.4}
  .cl-decor .bar1{display:none}
  .cl-decor span:nth-child(3){background:var(--green);padding-inline:4px;margin-right:-8px}
  .cl-decor .says{padding-right:6px}
  .quote{padding-block:0;gap:16px}
  .qnav span{font-size:20px}
  .qnav button,.qnav svg{width:28px;height:28px}
  .quote blockquote{font-size:17px}
  .who{font-size:16px}
  /* articles (home perspectives, insights, services) */
  .persp{padding-block:40px}
  .persp-head{flex-direction:column;align-items:flex-start;gap:8px}
  .persp-head .ghost{border:0;padding:0;font-size:16px}
  .articles{gap:32px;margin-top:24px}
  .art{gap:32px}
  .art .row{gap:16px}
  .txt{gap:8px}
  .txt h3,.svc .txt h3{font-size:18px;line-height:1.3}
  .date{font-size:15px}
  .txt p{font-size:14px}
  .tags{gap:8px}
  .tags span{padding:6px 14px;font-size:12px}
  /* collaborators */
  .collab{padding-block:40px}
  .marquee{gap:16px;margin-top:24px}
  .lane{gap:16px}
  .brand{width:96px;height:48px;font-size:13px;border-radius:8px}
  .brand small{display:none}
  /* intros & misc pages */
  .ins-intro{font-size:16px}
  .coll-lead h3{font-size:18px}
  .coll-lead p{font-size:15px}
  .story-main > p{font-size:17px}
  .values-sec .sub{font-size:20px}
  .cta{padding-block:40px;gap:24px}
  .cta p{font-size:16px}
  .cta h2{font-size:24px}
  .info b{font-size:22px}
  .info span{font-size:16px}
  /* footer */
  .ft-grid{padding-top:40px;gap:40px}
  .contact h2,.ft-side h2{font-size:28px}
  .contact h3{font-size:24px}
  .field label{font-size:16px}
  .ft-side{gap:32px;padding-bottom:120px}
  .quick a{font-size:16px}
  .ft-side address{font-size:16px}
}

/* ===== TABLET & SMALL LAPTOP ===== */
@media (min-width:961px) and (max-width:1180px){
  .nav ul{gap:4px}
  .wwd-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .cats li{padding-left:calc(var(--i)*24px)}
  .cats a{padding-right:24px;font-size:clamp(22px,2.5vw,30px)}
  .cats a svg{width:32px;height:32px}
  .ft-side{padding-right:40px}
}
@media (min-width:701px) and (max-width:960px){
  .art .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .art.r{justify-items:end}
  .art.r .row > .img{order:2}
  .art.r .txt{text-align:right;justify-items:end}
  .art.r .date{justify-content:flex-end}
  .svc .art.r .txt p{margin-left:auto}
  .wp-block-media-text{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .ft-side{align-items:flex-end;text-align:right;padding-top:56px;padding-bottom:220px}
  .quick,.ft-side .soc{justify-content:flex-end}
}
@media (min-width:641px) and (max-width:960px){
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center;padding:40px var(--gutter)}
  .stat b{font-size:clamp(48px,7vw,72px);margin-bottom:14px}
  .stat span{font-size:15px}
  .cl-decor{display:flex;flex-wrap:wrap;gap:0 10px;justify-content:flex-start;text-align:left;font-size:28px;line-height:1.4}
  .cl-decor .bar1{display:none}
  .cl-decor span:nth-child(3){background:var(--green);padding-inline:4px;margin-right:-10px}
  .cl-decor .says{padding-right:6px}
  .wp-block-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
}
@media (max-width:960px){
  .story-inner{gap:24px}
  .story-lead{padding-block:56px}
  .story-lead::before{left:-24px;width:auto;height:calc(100% + 16px)}
  .story-lead .dk{color:inherit}
}

/* ===== FOOTER LOGO: full device width ===== */
.big-logo{position:relative;right:auto;bottom:auto;display:block;width:100%;margin-top:clamp(24px,4vw,56px);line-height:0}
.big-logo svg{display:block;width:100%;height:auto;aspect-ratio:1967/429}
.ft-side{padding-bottom:40px}
.vline{bottom:calc(21.81vw + clamp(24px,4vw,56px) - 1px)}
@media (max-width:960px){.vline{display:none}}

/* ===== WORDPRESS ADDITIONS ===== */
.entry > p:first-child{font-weight:700;font-size:clamp(17px,1.67vw,24px);line-height:1.4;color:var(--white)}
.entry img{max-width:100%;height:auto}
.entry .wp-block-image{margin:12px auto;max-width:1000px}
.entry .wp-block-image img{display:block;width:100%;height:auto}
.entry .wp-block-image figcaption,.entry figcaption{margin-top:10px;font-size:14px;font-weight:300;color:var(--p100);text-align:center}
.entry .wp-block-media-text{margin:0}
.entry .wp-block-media-text__media img{width:100%;height:auto;display:block}
.entry .wp-block-media-text__content{padding:0;display:grid;gap:16px}
.entry .wp-block-media-text__content p{font-size:16px;line-height:1.6;color:#ededed}
.entry .wp-block-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:8px 0 0}
.entry .wp-block-columns.is-layout-flex{display:grid}
.entry .wp-block-column{display:grid;gap:14px;align-content:start}
.entry .wp-block-column img{width:100%;aspect-ratio:400/250;object-fit:cover;display:block}
.entry .wp-block-column h3,.entry h3{font-weight:700;font-size:var(--lg);line-height:1.35;margin:4px 0 0}
.entry .wp-block-column p{font-size:16px;line-height:1.6;color:#ededed}
.entry ul,.entry ol{font-size:16px;line-height:1.6;color:#ededed;padding-left:1.4em;margin:0}
.entry blockquote{margin:0;padding-left:20px;border-left:3px solid var(--green);font-size:var(--lg);font-weight:600}
.entry a{color:var(--g400);text-decoration:underline;text-underline-offset:3px}
.entry h2 span{max-width:none}
@media (max-width:960px){.entry .wp-block-columns{grid-template-columns:1fr}}
.wp-caption,.alignnone{max-width:100%}
.aligncenter{margin-inline:auto;display:block}
.form-msg{font-size:14px;font-weight:600;min-height:21px}
.form-msg.ok{color:var(--g400)}.form-msg.err{color:#ff8a80}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.pg-hero{padding-block:40px 60px;background:#0d0d0f}
.pg-hero::after{content:none}
.pg-hero .hero-title{margin-top:100px}
.pg-body{background:#393939;padding-block:60px 80px}
.empty-state{padding:40px 0;font-size:var(--lg);text-align:center;grid-column:1/-1}
.ph-img{background-size:cover;background-position:center}
img.ph-img{object-fit:cover;width:100%;height:100%}
.brand img{max-width:80%;max-height:70%;object-fit:contain;filter:grayscale(1) brightness(.4)}
body.admin-bar .drawer{top:46px}
@media (min-width:783px){body.admin-bar .drawer{top:32px}}
.nav ul li{list-style:none}
.load-more-wrap{display:flex;justify-content:center}
.ins .load-more-wrap .more{margin-top:60px}
/* A banner image set in the Customizer replaces the drawn background */
.hero[style]::before,.hero[style]::after{display:none}
.hero[style] .curves{display:none}
.story-main .entry-text p{font-weight:700;font-size:clamp(18px,1.95vw,28px);line-height:1.5;max-width:843px;margin:0 0 .6em}
.story-main .entry-text{position:relative;z-index:1}

/* ===== INSIGHTS: content aligned to the white rule ===== */
#articles .chips,#articles .articles{max-width:calc(1280px + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter);box-sizing:border-box}
#articles .art.l,#articles .art.r{padding-inline:0;justify-items:stretch}
#articles .art .row{max-width:none;width:100%;padding:0}
#articles .art hr{width:100%}
@media (min-width:961px){#articles .art .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:60px}}

/* ===== SERVICES: content aligned to the same 1280px column as Insights ===== */
.ins.svc .articles{max-width:calc(1280px + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter);box-sizing:border-box}
.ins.svc .art.l,.ins.svc .art.r{padding-inline:0;justify-items:stretch}
.ins.svc .art.l .row,.ins.svc .art.r .row{max-width:none;width:100%;padding:0}
@media (min-width:961px){.ins.svc .art.l .row,.ins.svc .art.r .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:60px}}

/* Custom-code pages (template "CONTA – Trang tự code"): building blocks for pasted sections */
.cx-nohero{padding-block:40px}
.cx-nohero .hero-title{display:none}
.cx-main{display:block}
.cx-sec{padding-block:clamp(60px,8vw,120px);position:relative}
.cx-sec.light{background:var(--white);color:var(--black)}
.cx-sec.grey{background:var(--p500)}
.cx-sec.green{background:var(--green);color:var(--black)}
.cx-sec > .wrap{display:grid;gap:clamp(20px,2.5vw,36px);justify-items:start}
.cx-sec > .wrap > *{margin:0;max-width:100%}
.cx-lead{font-weight:700;font-size:clamp(18px,1.95vw,28px);line-height:1.5;max-width:900px}
.cx-text{font-size:16px;line-height:1.7;max-width:900px}
.cx-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,60px);align-items:center;width:100%}
.cx-split > *{min-width:0}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(20px,2.5vw,40px);width:100%}
.cx-card{display:grid;gap:12px;align-content:start;padding:clamp(24px,2.5vw,36px);border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.light .cx-card{background:var(--f4);border-color:transparent}
.cx-card h3{margin:0;font-size:var(--lg);font-weight:700;line-height:1.3}
.cx-card p{margin:0;line-height:1.6}
.cx-num{font-family:var(--display);font-weight:900;font-size:clamp(36px,4vw,56px);line-height:1;color:var(--green)}
.cx-img{display:block;width:100%;height:auto;border-radius:24px;object-fit:cover}
.cx-center{text-align:center;justify-items:center}
.cx-sec > .wrap.cx-center{justify-items:center}
@media (max-width:960px){.cx-split{grid-template-columns:minmax(0,1fr)}}
.cx-stack{display:grid;gap:clamp(16px,2vw,24px);justify-items:start;align-content:start}
.cx-stack > *{margin:0;max-width:100%}
.cx-sec .btn{justify-self:start}
.cx-center .btn,.cx-center.cx-stack{justify-self:center;justify-items:center}