/* ==========================================================================
   Santosh Coder – public site styles
   Palette: black / white / grays only.  Font: Manrope.
   ========================================================================== */
:root{
  --black:#000; --white:#fff; --dark:#111; --gray-900:#222; --gray-600:#666; --gray-100:#f5f5f5; --border:#e5e5e5;
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --container:1320px; --pad:clamp(1.25rem,4vw,3rem); --header-h:76px;
  --ease:cubic-bezier(.7,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --sec-y:clamp(4.5rem,9vw,9rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;font-family:var(--font);font-weight:400;font-size:1.0625rem;line-height:1.65;color:var(--gray-900);background:var(--white);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.section--dark :focus-visible,.cta :focus-visible,.site-footer :focus-visible,.mobile-menu :focus-visible{outline-color:var(--white)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:1rem;top:-4rem;background:var(--black);color:#fff;padding:.7rem 1.1rem;z-index:2000;border-radius:4px}
.skip-link:focus{top:1rem}
::selection{background:var(--black);color:var(--white)}

.container{width:100%;max-width:calc(var(--container) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}
.container.narrow{max-width:calc(880px + var(--pad)*2)}
.center{text-align:center;margin-top:3rem}

/* ---------- Typography ---------- */
.h-section{font-size:clamp(1.75rem,3.2vw,2.9rem);font-weight:800;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.h-card{font-size:clamp(1.25rem,1.7vw,1.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.lead{font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.55;color:var(--gray-600);max-width:60ch}
.lead strong{color:var(--black);font-weight:600}
.kicker{font-weight:600;color:var(--gray-600);margin-bottom:1rem;font-size:1rem}
.ulink{font-weight:600;border-bottom:1.5px solid currentColor;transition:opacity .2s}
.ulink:hover{opacity:.6}
.prose h2{font-size:clamp(1.4rem,2vw,1.75rem);font-weight:700;letter-spacing:-.02em;margin:2.4rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:1rem;color:var(--gray-900);max-width:70ch}

/* ---------- Sections ---------- */
.section{padding-block:var(--sec-y)}
.section--tight{padding-block:clamp(2rem,4vw,4rem) var(--sec-y)}
.section--gray{background:var(--gray-100)}
.section--dark{background:var(--black);color:var(--white)}
.section--dark .lead{color:#bdbdbd}.section--dark .lead strong{color:#fff}
.section-head{margin-bottom:clamp(2.2rem,5vw,4.5rem);display:grid;gap:1.1rem;max-width:900px}
.section-head--row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.section-head--row>div{display:grid;gap:1.1rem}
.split-2{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:start}

/* ---------- Buttons ---------- */
.btn{--bg:#000;--fg:#fff;--hbg:#fff;--hfg:#000;--bd:#000;
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.75rem;
  padding:.95rem 1.6rem;border:1.5px solid var(--bd);border-radius:999px;background:var(--bg);color:var(--fg);
  font-weight:600;font-size:1rem;line-height:1;white-space:nowrap;transition:color .35s var(--ease),transform .25s var(--ease-out),border-color .35s}
.btn::before{content:"";position:absolute;inset:-1px;background:var(--hbg);transform:translateY(102%);transition:transform .45s var(--ease);z-index:-1;border-radius:inherit}
.btn:hover{color:var(--hfg)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:scale(.97)}
.btn--dark{}
.btn--light{--bg:#fff;--fg:#000;--hbg:#000;--hfg:#fff;--bd:#fff}
.btn--light:hover{border-color:#fff}
.btn--ghost{--bg:transparent;--fg:#000;--hbg:#000;--hfg:#fff}
.btn--outline-light{--bg:transparent;--fg:#fff;--hbg:#fff;--hfg:#000;--bd:rgba(255,255,255,.55)}
.btn--sm{padding:.7rem 1.15rem;font-size:.9rem}
.btn--lg{padding:1.1rem 1.9rem;font-size:1.0625rem}
.btn__arrow{width:1.1em;height:1.1em;flex:none;background:currentColor;transition:transform .35s var(--ease-out);
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--header-h);border-bottom:1px solid transparent;transition:background .4s,border-color .4s,backdrop-filter .4s,color .3s}
.site-header.is-scrolled{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom-color:var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:1.5rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;font-weight:800;font-size:1.25rem;letter-spacing:-.03em;position:relative;z-index:3}
.brand-mark{display:grid;place-items:center;width:2.15rem;height:2.15rem;background:var(--black);color:var(--white);border-radius:6px;font-size:.85rem;letter-spacing:0}
.brand--light .brand-mark{background:#fff;color:#000}
.brand img{height:2.2rem;width:auto;max-width:11rem;object-fit:contain}
.main-nav{display:flex;gap:clamp(1.1rem,2.4vw,2.4rem);margin-inline:auto}
.nav-link{position:relative;font-weight:600;font-size:.95rem;padding:.4rem 0}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1);transform-origin:left}
.header-right{display:flex;align-items:center;gap:1.2rem;position:relative;z-index:3}
.header-loc{font-size:.8rem;font-weight:600;color:var(--gray-600);white-space:nowrap}
.menu-toggle{display:none;width:44px;height:44px;position:relative;border-radius:50%}
.menu-toggle span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-toggle span:first-child{top:18px}.menu-toggle span:last-child{top:26px}
.menu-open .menu-toggle span:first-child{top:22px;transform:rotate(45deg)}
.menu-open .menu-toggle span:last-child{top:22px;transform:rotate(-45deg)}

.mobile-menu{position:fixed;inset:0;height:100dvh;background:var(--black);color:var(--white);padding:calc(var(--header-h) + 1.5rem) var(--pad) 2rem;display:flex;flex-direction:column;justify-content:space-between;
  clip-path:circle(0 at calc(100% - 2.5rem) 2.4rem);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s .7s;z-index:2}
.menu-open .mobile-menu{clip-path:circle(150% at calc(100% - 2.5rem) 2.4rem);visibility:visible;transition:clip-path .7s var(--ease),visibility 0s}
.mobile-menu nav{display:grid}
.mobile-link{display:block;overflow:hidden;font-size:clamp(1.3rem,5.5vw,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.3;border-bottom:1px solid #2a2a2a;padding:.35rem 0}
.mobile-link span{display:block;padding:.15rem 0;transform:translateY(110%);transition:transform .7s var(--ease-out)}
.menu-open .mobile-link span{transform:none}
.menu-open .mobile-link:nth-child(1) span{transition-delay:.15s}.menu-open .mobile-link:nth-child(2) span{transition-delay:.2s}
.menu-open .mobile-link:nth-child(3) span{transition-delay:.25s}.menu-open .mobile-link:nth-child(4) span{transition-delay:.3s}
.menu-open .mobile-link:nth-child(5) span{transition-delay:.35s}.menu-open .mobile-link:nth-child(6) span{transition-delay:.4s}
.mobile-menu-foot{display:grid;gap:1rem}.mobile-menu-foot p{color:#9a9a9a;font-size:.9rem}
.menu-open .site-header{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--white)}
.menu-open .brand-mark{background:#fff;color:#000}
body.menu-open{overflow:hidden}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;padding:calc(var(--header-h) + clamp(2rem,5vw,4rem)) 0 clamp(4rem,7vw,6rem);display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 65% 45%,#000 0,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 65% 45%,#000 0,transparent 75%);opacity:.9}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:clamp(2rem,4vw,5rem);align-items:center}
.hero-title{font-size:clamp(2.4rem,5.6vw,5.5rem);font-weight:800;line-height:.9;letter-spacing:-.055em;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.hw-line{display:block;overflow:hidden;padding-bottom:.06em}
.hw{display:inline-block;cursor:default;transition:color .3s;transform:translateY(105%);animation:hwIn 1s var(--ease-out) forwards;animation-delay:calc(.15s + var(--i) * .11s)}
@keyframes hwIn{to{transform:none}}
.hero-title:hover .hw{color:#bdbdbd}
.hero-title .hw:hover,.hero-title .hw.is-on{color:var(--black)}
.hero-sub{font-size:clamp(1.1rem,1.7vw,1.5rem);font-weight:700;letter-spacing:-.025em;line-height:1.2;margin-bottom:1rem;max-width:22ch}
.hero-desc{max-width:52ch;color:var(--gray-600);margin-bottom:2rem;font-size:1.125rem}
.hero-loc{margin-top:2rem;font-size:.9rem;font-weight:600;color:var(--gray-600)}
.scroll-hint{position:absolute;left:50%;bottom:1.6rem;width:26px;height:42px;border:1.5px solid var(--black);border-radius:14px;transform:translateX(-50%);opacity:.6}
.scroll-hint span{position:absolute;left:50%;top:8px;width:3px;height:8px;background:var(--black);border-radius:2px;transform:translateX(-50%);animation:scrollDot 1.8s var(--ease) infinite}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}

/* Hero visual */
.stage{position:relative;width:100%;max-width:580px;aspect-ratio:1/1;margin-inline:auto;--px:0;--py:0}
.stage-grid{position:absolute;inset:6%;border:1px dashed #cfcfcf;border-radius:50%;animation:spin 60s linear infinite}
.stage-grid::after{content:"";position:absolute;inset:14%;border:1px dashed #dcdcdc;border-radius:50%}
@keyframes spin{to{transform:rotate(360deg)}}
.stage-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage-lines path{fill:none;stroke:var(--black);stroke-width:1.5;stroke-dasharray:6 8;vector-effect:non-scaling-stroke;opacity:.35;animation:dash 14s linear infinite}
@keyframes dash{to{stroke-dashoffset:-140}}
.scard{position:absolute;background:var(--white);border:1px solid var(--border);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.09);
  translate:calc(var(--px) * var(--d) * 1px) calc(var(--py) * var(--d) * 1px);
  transition:opacity .5s,scale .5s var(--ease-out),box-shadow .5s;animation:cardIn .9s var(--ease-out) backwards,floaty 7s ease-in-out infinite;animation-delay:var(--dl),calc(var(--dl) + 1s)}
@keyframes cardIn{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.scard--develop{top:8%;left:2%;width:70%;--d:14;--dl:.55s;z-index:2}
.scard--design{top:0;right:0;width:33%;aspect-ratio:1;background:var(--black);border-color:var(--black);--d:26;--dl:.7s;z-index:3;padding:12%}
.scard--promote{bottom:2%;left:0;width:36%;--d:20;--dl:.85s;z-index:3}
.scard--grow{bottom:6%;right:4%;width:46%;aspect-ratio:1.25;background:var(--black);border-color:var(--black);--d:10;--dl:1s;z-index:2;padding:9% 9% 8%}
.stage.has-focus .scard{opacity:.28}
.stage.has-focus .scard.is-active{opacity:1;scale:1.07;box-shadow:0 30px 70px rgba(0,0,0,.22);z-index:6}
.browser-bar{display:flex;align-items:center;gap:.35rem;padding:.65rem .8rem;border-bottom:1px solid var(--border)}
.browser-bar i{width:.5rem;height:.5rem;border-radius:50%;background:#d0d0d0}
.browser-bar span{margin-left:.6rem;flex:1;background:var(--gray-100);border-radius:99px;padding:.15rem .7rem;font-size:.68rem;font-weight:600;color:var(--gray-600)}
.browser-body{padding:1rem;display:grid;grid-template-columns:1fr;gap:.9rem}
.code{display:grid;gap:.42rem}
.code b{display:block;height:.42rem;width:var(--w);background:#d9d9d9;border-radius:99px;transform-origin:left;animation:type 3.6s var(--ease) infinite alternate}
.code b:nth-child(odd){background:var(--black);opacity:.85}
.code b:nth-child(2n){animation-delay:.3s}.code b:nth-child(3n){animation-delay:.6s}
@keyframes type{0%{transform:scaleX(.15)}60%,100%{transform:scaleX(1)}}
.browser-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:.5rem}
.browser-hero em{display:block;height:3.4rem;background:var(--gray-100);border-radius:5px}
.browser-hero em:first-child{background:var(--black)}
.logos{display:grid;grid-template-columns:1fr 1fr;gap:12%;height:100%;align-items:center;justify-items:center}
.lg{display:block;width:100%;aspect-ratio:1;background:#fff}
.lg-circle{border-radius:50%}.lg-square{border-radius:2px;background:transparent;border:3px solid #fff}
.lg-tri{clip-path:polygon(50% 8%,96% 92%,4% 92%)}
.lg-sc{display:grid;place-items:center;color:#000;font-weight:800;font-size:clamp(.6rem,1.6vw,1rem);border-radius:4px}
.post{padding:.7rem}
.post-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.55rem}
.av{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--black);color:#fff;font-size:.5rem;font-weight:800}
.post-lines{display:grid;gap:.25rem;flex:1}.post-lines b{display:block;height:.28rem;background:#d9d9d9;border-radius:9px}.post-lines b:first-child{width:70%;background:#111}
.post-img{aspect-ratio:1;background:linear-gradient(135deg,#111,#666);border-radius:5px;position:relative;overflow:hidden}
.post-img i{position:absolute;inset:auto -20% -30% -20%;height:70%;background:rgba(255,255,255,.16);border-radius:50%;animation:swell 5s ease-in-out infinite}
@keyframes swell{50%{transform:translateY(-14%) scale(1.08)}}
.post-foot{display:flex;gap:.7rem;margin-top:.5rem;font-size:.85rem;color:#222}
.bars{display:flex;align-items:flex-end;gap:7%;height:100%}
.bars i{flex:1;height:var(--h);background:#fff;border-radius:2px 2px 0 0;transform-origin:bottom;animation:grow 3.2s var(--ease) infinite alternate}
.bars i:nth-child(odd){opacity:.55}
.bars i:nth-child(2){animation-delay:.15s}.bars i:nth-child(3){animation-delay:.3s}.bars i:nth-child(4){animation-delay:.45s}.bars i:nth-child(5){animation-delay:.6s}.bars i:nth-child(6){animation-delay:.75s}
@keyframes grow{0%{transform:scaleY(.25)}70%,100%{transform:scaleY(1)}}

/* ---------- Marquee ---------- */
.marquee{background:var(--black);color:var(--white);overflow:hidden;padding:1.25rem 0;border-block:1px solid #222}
.marquee__track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;flex:none}
.marquee__group span{font-size:clamp(1.2rem,2.6vw,2.2rem);font-weight:800;letter-spacing:-.03em;padding-inline:clamp(.9rem,2vw,1.8rem);white-space:nowrap}
.marquee__group .dot{color:#666;padding-inline:0}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Intro ---------- */
.intro-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.intro-text{display:grid;gap:1.2rem;padding-top:.6rem}
.tick-list{display:grid;gap:.55rem}
.tick-list li{position:relative;padding-left:1.9rem;font-weight:500}
.tick-list li::before{content:"";position:absolute;left:0;top:.62em;width:.9rem;height:2px;background:currentColor;transition:width .3s}
.tick-list li:hover::before{width:1.3rem}
.tick-list.two-col{grid-template-columns:1fr 1fr;column-gap:1.5rem}

/* ---------- Services ---------- */
.svc-list{border-bottom:1px solid #cfcfcf}
.svc{position:relative;display:grid;grid-template-columns:clamp(70px,9vw,140px) minmax(0,1.1fr) minmax(0,1fr) 44px;gap:clamp(1rem,3vw,3rem);align-items:center;padding:clamp(1.6rem,3vw,2.6rem) clamp(.5rem,1.5vw,1.5rem);border-top:1px solid #cfcfcf;
  transition:background .45s var(--ease),color .45s var(--ease),padding .45s var(--ease)}
.svc:nth-child(even){margin-left:clamp(0px,7vw,110px)}
.svc:nth-child(3n){margin-left:clamp(0px,3vw,48px)}
.svc:hover{background:var(--black);color:var(--white);padding-left:clamp(1rem,2.5vw,2.4rem);padding-right:clamp(1rem,2.5vw,2.4rem)}
.svc__num{font-size:clamp(2rem,4vw,3.4rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1.5px currentColor}
.svc:hover .svc__num{color:#fff;-webkit-text-stroke-color:#fff}
.svc__main h3,.svc__main .h-card{font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:.5rem}
.svc__main p{color:var(--gray-600);max-width:42ch}
.svc:hover .svc__main p{color:#bdbdbd}
.svc__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.svc__tags em,.svc__tags li{font-style:normal;font-size:.82rem;font-weight:600;padding:.3rem .75rem;border:1px solid currentColor;border-radius:99px;opacity:.75}
.svc__go{width:44px;height:44px;border:1.5px solid currentColor;border-radius:50%;position:relative;transition:transform .4s var(--ease-out),background .3s}
.svc__go::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--arrow) center/48% no-repeat;mask:var(--arrow) center/48% no-repeat;--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");transform:rotate(-45deg);transition:transform .4s var(--ease-out)}
.svc:hover .svc__go{transform:scale(1.1)}.svc:hover .svc__go::after{transform:rotate(0)}
.svc--static{cursor:default}.svc--static:hover{background:transparent;color:inherit;padding-inline:clamp(.5rem,1.5vw,1.5rem)}
.svc--static:hover .svc__num{color:transparent;-webkit-text-stroke-color:currentColor}.svc--static:hover .svc__main p{color:var(--gray-600)}
.svc--static{grid-template-columns:clamp(70px,9vw,140px) minmax(0,1fr) minmax(0,1fr);align-items:start}
.svc-list--full .svc:nth-child(n){margin-left:0}
.svc__tags--list{list-style:none;padding:0;margin:0}
.svc-list--full .svc{scroll-margin-top:calc(var(--header-h) + 1rem)}

/* ---------- Approach accordion ---------- */
.cats{display:flex;height:clamp(420px,52vw,520px);border:1px solid var(--black)}
.cat{position:relative;flex:1;min-width:0;border-left:1px solid var(--black);display:flex;flex-direction:column;transition:flex .7s var(--ease),background .4s,color .4s;overflow:hidden}
.cat:first-child{border-left:0}
.cat.is-open{flex:3.2;background:var(--black);color:var(--white)}
.cat__head{display:flex;justify-content:space-between;align-items:flex-start;padding:1.4rem;width:100%;text-align:left;flex:none}
.cat__name{font-size:clamp(1.3rem,2.3vw,2.1rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.cat:not(.is-open) .cat__name{writing-mode:vertical-rl;transform:rotate(180deg);margin-top:auto;align-self:flex-end}
.cat:not(.is-open) .cat__head{height:100%;flex-direction:column;justify-content:space-between}
.cat__plus{position:relative;width:1.4rem;height:1.4rem;flex:none}
.cat__plus::before,.cat__plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:currentColor;transition:transform .4s var(--ease)}
.cat__plus::after{transform:rotate(90deg)}.cat.is-open .cat__plus::after{transform:rotate(0)}
.cat__body{padding:0 1.4rem 1.6rem;margin-top:auto;opacity:0;transform:translateY(20px);transition:opacity .4s,transform .6s var(--ease-out);pointer-events:none;min-width:260px}
.cat.is-open .cat__body{opacity:1;transform:none;pointer-events:auto;transition-delay:.25s}
.cat__body p{color:#bdbdbd;margin-bottom:1rem;max-width:36ch}
.cat__body ul{display:flex;flex-wrap:wrap;gap:.5rem}
.cat__body li{border:1px solid #555;border-radius:99px;padding:.35rem .9rem;font-size:.9rem;font-weight:600}
.section--gray .cat.is-open{background:var(--black)}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,7rem);align-items:center}
.about-text{display:grid;gap:1.4rem;justify-items:start}
.about-text p{max-width:58ch}
.about-visual{position:relative;aspect-ratio:1/1.05;background:var(--dark);overflow:hidden;border-radius:4px}
.about-visual img{width:100%;height:100%;object-fit:cover}
.about-art{position:absolute;inset:0;display:grid;place-items:center;background:repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.07) 47px 48px),repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.07) 47px 48px),#111}
.about-art__sc{font-size:clamp(7rem,20vw,16rem);font-weight:800;letter-spacing:-.08em;color:#fff;line-height:1;position:relative;z-index:1}
.about-art__tag{position:absolute;left:1.4rem;bottom:1.2rem;color:#9a9a9a;font-weight:600;font-size:.9rem}
.about-art__ring{position:absolute;width:62%;aspect-ratio:1;border:1.5px dashed #555;border-radius:50%;animation:spin 40s linear infinite}
.about-grid--light .about-visual{background:var(--black)}

/* ---------- Stats ---------- */
.stats{padding-block:clamp(3.5rem,7vw,6rem);background:var(--white);border-bottom:1px solid var(--border)}
.stats--dark{background:var(--gray-100)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat{border-left:1px solid #cfcfcf;padding-left:1.4rem}
.stat__num{font-size:clamp(2.2rem,4.2vw,3.8rem);font-weight:800;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.stat__label{margin-top:.6rem;font-weight:600;color:var(--gray-600)}

/* ---------- Why ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.why{position:relative;background:var(--white);padding:clamp(1.6rem,3vw,2.6rem);min-height:230px;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;overflow:hidden;transition:color .4s,background .4s;--mx:50%;--my:50%}
.why::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),#000 0,#000 30%,#111 100%);opacity:0;transition:opacity .4s;z-index:0}
.why:hover::before{opacity:1}.why:hover{color:#fff}
.why>*{position:relative;z-index:1}
.why h3{font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:700;letter-spacing:-.025em;line-height:1.15}
.why p{color:var(--gray-600);transition:color .4s}.why:hover p{color:#c8c8c8}

/* ---------- Timeline ---------- */
.timeline{position:relative;display:grid;gap:clamp(1.8rem,3vw,3rem);padding-left:clamp(3.5rem,8vw,9rem)}
.timeline__line{position:absolute;left:clamp(1.05rem,3.5vw,3.4rem);top:.6rem;bottom:.6rem;width:2px;background:#d4d4d4}
.timeline__line i{display:block;width:100%;height:var(--p,0%);background:var(--black)}
.tstep{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,3rem);align-items:baseline}
.tstep::before{content:"";position:absolute;left:calc(-1 * clamp(2.5rem,4.6vw,5.6rem) - 6px);top:.9em;width:14px;height:14px;border-radius:50%;background:var(--white);border:2px solid var(--black);transition:background .4s,transform .4s}
.tstep.is-in::before{background:var(--black);transform:scale(1.15)}
.tstep__num{font-size:clamp(1.9rem,3.2vw,2.8rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--black);min-width:2.2ch}
.tstep h3{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:700;letter-spacing:-.03em;margin-bottom:.35rem}
.tstep p{color:var(--gray-600);max-width:52ch}
.section--gray .timeline__line{background:#cfcfcf}
.section--gray .tstep::before{background:var(--gray-100)}
.section--gray .tstep.is-in::before{background:var(--black)}

/* ---------- Project grid / cards ---------- */
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.2rem,2.2vw,2rem)}
.pcard{grid-column:span 4}
.pgrid>.pcard:nth-child(6n+1){grid-column:span 7}
.pgrid>.pcard:nth-child(6n+2){grid-column:span 5}
.pgrid>.pcard:nth-child(6n+3),.pgrid>.pcard:nth-child(6n+4),.pgrid>.pcard:nth-child(6n+5){grid-column:span 4}
.pgrid>.pcard:nth-child(6n){grid-column:span 12}
.pgrid>.pcard:nth-child(6n) .pcard__media{aspect-ratio:21/9}
.pgrid>.pcard:nth-child(6n+1) .pcard__media,.pgrid>.pcard:nth-child(6n+2) .pcard__media{aspect-ratio:4/3}
.pcard[hidden]{display:none}
.pcard.is-hiding{opacity:0;transform:scale(.96)}
.pcard{transition:opacity .35s,transform .35s var(--ease-out)}
.pcard__link{display:block}
.pcard__media{position:relative;aspect-ratio:4/3.1;overflow:hidden;background:var(--gray-100);border-radius:4px}
.pcard__img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.pcard:hover .pcard__img{transform:scale(1.07)}
.pcard__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;opacity:0;transition:opacity .45s}
.pcard:hover .pcard__overlay,.pcard__link:focus-visible .pcard__overlay{opacity:1}
.pcard__view{color:#fff;font-weight:700;border:1.5px solid #fff;border-radius:99px;padding:.7rem 1.4rem;transform:translateY(16px);transition:transform .5s var(--ease-out)}
.pcard:hover .pcard__view{transform:none}
.pcard__body{position:relative;padding:1.1rem 3rem 0 0}
.pcard__meta{display:flex;gap:.8rem;flex-wrap:wrap;font-size:.82rem;font-weight:600;color:var(--gray-600);margin-bottom:.35rem}
.pcard__meta span+span::before{content:"/";margin-right:.8rem;color:#bbb}
.pcard__title{font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;overflow:hidden}
.pcard__title span{display:inline-block;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .6s var(--ease)}
.pcard:hover .pcard__title span{background-size:100% 2px}
.pcard__desc{margin-top:.4rem;color:var(--gray-600);font-size:.98rem;max-width:60ch}
.pcard__arrow{position:absolute;right:0;top:1.1rem;width:2.4rem;height:2.4rem;border:1.5px solid var(--black);border-radius:50%;transition:background .3s,color .3s,transform .4s var(--ease-out)}
.pcard__arrow::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--arrow) center/46% no-repeat;mask:var(--arrow) center/46% no-repeat;--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");transform:rotate(-45deg);transition:transform .4s var(--ease-out)}
.pcard:hover .pcard__arrow{background:var(--black);color:#fff}.pcard:hover .pcard__arrow::after{transform:none}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.75rem)}
.sgrid--3{grid-template-columns:repeat(3,1fr)}
.sgrid .pcard{grid-column:auto!important}
.sgrid .pcard__media{aspect-ratio:1/1!important}
.ph{display:grid;place-items:center;width:100%;height:100%;min-height:100%;background:repeating-linear-gradient(135deg,#efefef 0 14px,#f7f7f7 14px 28px)}
.ph span{font-size:clamp(2rem,6vw,4.5rem);font-weight:800;letter-spacing:-.05em;color:#c4c4c4}
.pcard__media .ph{position:absolute;inset:0}
.empty{border:1px dashed #bdbdbd;padding:clamp(2rem,5vw,4rem);text-align:center;display:grid;gap:1.4rem;justify-items:center;font-size:1.15rem;color:var(--gray-600)}
.empty-filter{margin-top:2rem;color:var(--gray-600)}

.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(1.8rem,3vw,3rem)}
.filter{padding:.65rem 1.25rem;border:1.5px solid var(--black);border-radius:99px;font-weight:600;font-size:.95rem;transition:background .3s,color .3s}
.filter:hover{background:var(--gray-100)}
.filter.is-active{background:var(--black);color:#fff}

/* ---------- Carousel / testimonials ---------- */
.carousel{position:relative}
.carousel__viewport{overflow:hidden}
.carousel__track{display:flex;transition:transform .8s var(--ease)}
.carousel__item{flex:0 0 100%;min-width:0;padding-inline:.1rem}
.tslide{display:grid;gap:1.6rem;max-width:980px;margin-inline:auto;padding:clamp(.5rem,2vw,1.5rem) 0}
.tslide blockquote p{font-size:clamp(1.1rem,1.9vw,1.6rem);font-weight:600;letter-spacing:-.025em;line-height:1.3;text-wrap:pretty}
.tslide figcaption{display:flex;align-items:center;gap:1rem}
.tslide figcaption span:last-child{display:grid;line-height:1.35}
.tslide em{font-style:normal;color:var(--gray-600)}.tslide small{color:var(--gray-600);font-size:.82rem}
.tslide__photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.tslide__photo--ph{display:grid;place-items:center;background:var(--black);color:#fff;font-weight:800;font-size:1.2rem}
.stars{color:var(--black);letter-spacing:.15em;font-size:1.1rem;display:inline-block}.stars i{font-style:normal;color:#d0d0d0}
.carousel__controls{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:2rem}
.carousel__btn{width:3.2rem;height:3.2rem;border:1.5px solid var(--black);border-radius:50%;font-size:1.2rem;transition:background .3s,color .3s}
.carousel__btn:hover{background:var(--black);color:#fff}
.carousel__dots{display:flex;gap:.5rem}
.carousel__dots button{width:.7rem;height:.7rem;border-radius:99px;background:#cfcfcf;transition:width .4s var(--ease),background .3s}
.carousel__dots button[aria-selected="true"]{width:2.2rem;background:var(--black)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:clamp(3rem,6vw,5rem)}
.tcard{border:1px solid var(--border);padding:1.8rem;background:var(--white)}
.tcard .tslide{padding:0;gap:1.2rem}.tcard .tslide blockquote p{font-size:1.05rem;font-weight:500;letter-spacing:0;line-height:1.6}

/* ---------- CTA ---------- */
.cta{position:relative;background:var(--black);color:var(--white);padding-block:clamp(5rem,10vw,9rem);overflow:hidden}
.cta__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:end}
.cta__title{font-size:clamp(2rem,5vw,4.5rem);font-weight:800;line-height:.95;letter-spacing:-.05em;text-wrap:balance}
.cta__side{display:grid;gap:1.6rem;color:#c8c8c8;font-size:1.2rem}
.cta__ghost{position:absolute;right:-2%;bottom:-.28em;font-size:clamp(9rem,26vw,26rem);font-weight:800;letter-spacing:-.07em;line-height:1;color:transparent;-webkit-text-stroke:1.5px #262626;pointer-events:none;user-select:none}

/* ---------- Contact ---------- */
.contact-preview{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.contact-preview>div{display:grid;gap:1.6rem;justify-items:start}
.contact-list{display:grid;gap:0}
.contact-list>div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid var(--border)}
.contact-list dt{font-weight:600;color:var(--gray-600);font-size:.95rem}
.contact-list dd{font-weight:600;overflow-wrap:anywhere}
.contact-list a{border-bottom:1.5px solid transparent;transition:border-color .2s}.contact-list a:hover{border-color:currentColor}
.social-links{display:flex;gap:1rem;flex-wrap:wrap}
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.contact-card{background:var(--black);color:#fff;padding:clamp(1.6rem,3vw,3rem);border-radius:4px;display:grid;gap:1rem}
.contact-card .contact-list>div{border-color:#2c2c2c}.contact-card dt{color:#9a9a9a}
.contact-loc{color:#bdbdbd;margin-top:-.4rem}
.contact-form{display:grid;gap:1.6rem}

/* ---------- Forms ---------- */
.form{display:grid;gap:1.6rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.field{display:grid;gap:.5rem;align-content:start}
.field--full{grid-column:1/-1}
.field label,.field .label{font-weight:600;font-size:.95rem}
.field input,.field select,.field textarea{width:100%;padding:.95rem 1rem;border:1.5px solid #cfcfcf;border-radius:4px;background:#fff;transition:border-color .25s,box-shadow .25s;font-size:1rem}
.field textarea{resize:vertical;min-height:9rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--black);box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.field input[type=file]{padding:.7rem}
.field small{color:var(--gray-600)}
.field-error{color:#111;font-size:.88rem;font-weight:600;border-left:3px solid #000;padding-left:.6rem}
.form-alert{background:var(--black);color:#fff;padding:1rem 1.2rem;border-radius:4px;font-weight:600}
.form-note{color:var(--gray-600);font-size:.9rem}
.hp{position:absolute!important;left:-9999px;height:0;overflow:hidden}
.thanks{border:1.5px solid var(--black);padding:clamp(2rem,5vw,4rem);display:grid;gap:1.2rem;justify-items:start;animation:pop .7s var(--ease-out)}
.thanks h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.thanks p{font-size:1.2rem;color:var(--gray-600);max-width:44ch}
@keyframes pop{from{opacity:0;transform:translateY(20px)}}
.rating{position:relative;display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:.2rem}
.rating input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.rating label{font-size:2.4rem;line-height:1;color:#d0d0d0;cursor:pointer;transition:color .2s,transform .2s}
.rating label:hover,.rating label:hover~label,.rating input:checked~label{color:var(--black)}
.rating label:active{transform:scale(.85)}
.rating input:focus-visible+label{outline:2px solid var(--black);outline-offset:2px}

/* ---------- Inner pages ---------- */
.page-hero{padding:calc(var(--header-h) + clamp(3rem,7vw,6.5rem)) 0 clamp(2.4rem,5vw,4.5rem);background:var(--white);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-6vw;top:-8vw;width:32vw;height:32vw;border:1px dashed #d5d5d5;border-radius:50%;pointer-events:none}
.page-title{font-size:clamp(2rem,4.4vw,3.8rem);font-weight:800;letter-spacing:-.05em;line-height:.98;max-width:16ch;text-wrap:balance}
.page-hero--project .page-title{max-width:24ch;font-size:clamp(1.9rem,4vw,3.2rem)}
.page-lead{margin-top:1.4rem;max-width:56ch;font-size:clamp(1rem,1.3vw,1.15rem);color:var(--gray-600);line-height:1.55}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;font-size:.9rem;font-weight:600;color:var(--gray-600)}
.crumbs a:hover{color:#000}
.crumbs>*+*::before{content:"/";margin-right:.5rem;color:#bbb}
.pill-list{display:flex;flex-wrap:wrap;gap:.7rem}
.pill-list li{padding:.7rem 1.3rem;border:1.5px solid var(--black);border-radius:99px;font-weight:600;transition:background .3s,color .3s}
.pill-list li:hover{background:var(--black);color:#fff}
.feature-rows{display:grid}
.frow{display:grid;grid-template-columns:5rem minmax(0,1fr) minmax(0,1.3fr);gap:2rem;align-items:baseline;padding:2rem 0;border-top:1px solid #cfcfcf;scroll-margin-top:calc(var(--header-h) + 1rem)}
.frow:last-child{border-bottom:1px solid #cfcfcf}
.frow__num{font-weight:800;color:var(--gray-600)}
.frow h3{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:700;letter-spacing:-.03em}
.frow p{color:var(--gray-600)}
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.loc{background:#fff;border:1px solid var(--border);padding:2rem;display:grid;gap:.8rem}
.loc h3{font-size:1.8rem;font-weight:800;letter-spacing:-.04em}.loc p{color:var(--gray-600)}

/* ---------- Project detail ---------- */
.project-cover{aspect-ratio:16/8.5;background:var(--gray-100);overflow:hidden;border-radius:4px;margin-bottom:clamp(2rem,4vw,4rem)}
.project-cover__img{width:100%;height:100%;object-fit:cover}
.project-cover .ph{position:static}
.project-layout{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.project-facts{position:sticky;top:calc(var(--header-h) + 1.5rem);display:grid;gap:1.6rem}
.project-facts dl{display:grid}
.project-facts dl>div{padding:1rem 0;border-top:1px solid var(--border);display:grid;gap:.25rem}
.project-facts dt{font-size:.85rem;font-weight:600;color:var(--gray-600)}
.project-facts dd{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}.chips span{border:1px solid #bbb;border-radius:99px;padding:.15rem .7rem;font-size:.85rem}
.project-facts .btn{justify-self:start}
.gallery-title{margin:clamp(3rem,6vw,5rem) 0 1.4rem}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery__item{display:block;overflow:hidden;background:var(--gray-100);border-radius:4px;aspect-ratio:4/3;cursor:zoom-in}
.gallery__item:nth-child(5n+1){grid-column:span 2;aspect-ratio:16/9}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.gallery__item:hover img{transform:scale(1.06)}
.gallery--masonry{display:block;columns:3;column-gap:1rem}
.gallery--masonry .gallery__item{aspect-ratio:auto!important;margin-bottom:1rem;break-inside:avoid;display:block}
.gallery--masonry .gallery__item img{height:auto}
.lightbox{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.94);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.lightbox.is-open{opacity:1;visibility:visible;transition:opacity .35s}
.lightbox img{max-width:min(92vw,1400px);max-height:84vh;object-fit:contain;border-radius:2px}
.lightbox button{position:absolute;color:#fff;font-size:2rem;width:3.4rem;height:3.4rem;border:1px solid #555;border-radius:50%;background:rgba(0,0,0,.4)}
.lightbox button:hover{background:#fff;color:#000}
.lb-close{top:1.2rem;right:1.2rem}.lb-prev{left:1.2rem;top:50%;translate:0 -50%}.lb-next{right:1.2rem;top:50%;translate:0 -50%}
.lb-count{position:absolute;bottom:1.2rem;left:50%;translate:-50% 0;color:#bbb;font-size:.9rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--black);color:#c8c8c8;padding-top:clamp(3.5rem,7vw,6rem)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1.1fr 1fr;gap:clamp(1.6rem,4vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.footer-brand{display:grid;gap:1rem;align-content:start}
.footer-brand .brand{color:#fff}
.footer-tagline{color:#fff;font-weight:800;font-size:1.5rem;letter-spacing:-.03em;line-height:1.15}
.footer-desc{max-width:38ch;font-size:.98rem}
.footer-contact{font-size:.98rem}.footer-contact a:hover{color:#fff}
.footer-col{display:grid;gap:.6rem;align-content:start}
.footer-col h2{color:#fff;font-size:1rem;font-weight:700;margin-bottom:.4rem}
.footer-social-title{margin-top:1.4rem}
.footer-col a,.footer-col span{font-size:.98rem;width:max-content;max-width:100%}
.footer-col a{position:relative}.footer-col a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.footer-col a:hover{color:#fff}.footer-col a:hover::after{transform:scaleX(1);transform-origin:left}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.6rem 0 2rem;border-top:1px solid #262626;font-size:.9rem;color:#8c8c8c}
.footer-bottom a{margin-left:1.2rem}.footer-bottom a:hover{color:#fff}

.wa-float{position:fixed;right:clamp(1rem,2vw,1.6rem);bottom:calc(clamp(1rem,2vw,1.6rem) + env(safe-area-inset-bottom));z-index:900;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--black);color:#fff;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 8px 30px rgba(0,0,0,.35);transition:transform .35s var(--ease-out)}
.wa-float:hover{transform:scale(1.1) rotate(-6deg)}
.wa-float::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #000;animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}

/* ---------- Cursor (desktop, fine pointers only) ---------- */
.cursor{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;opacity:0;display:none}
.has-cursor .cursor{display:block;opacity:1}
.cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;border-radius:50%;mix-blend-mode:difference}
.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid #fff;border-radius:50%;display:none;place-items:center;font-size:.75rem;font-weight:700;color:#fff;mix-blend-mode:difference;transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .3s}
.has-cursor .cursor-ring{display:grid}
.cursor-ring.is-hover{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,255,255,.35)}
.cursor-ring.has-label{width:86px;height:86px;margin:-43px 0 0 -43px;background:#000;color:#fff;border-color:#000;mix-blend-mode:normal}
.cursor-ring.is-down{width:28px;height:28px;margin:-14px 0 0 -14px}
@media (hover:hover) and (pointer:fine){.has-cursor,.has-cursor a,.has-cursor button{cursor:none}.has-cursor input,.has-cursor textarea,.has-cursor select{cursor:auto}}

/* ---------- Scroll animations (activated by JS via .js) ---------- */
.js [data-anim]{opacity:0;transition:opacity .9s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--d,0s)}
.js [data-anim="up"]{transform:translateY(38px)}
.js [data-anim="left"]{transform:translateX(-48px)}
.js [data-anim="right"]{transform:translateX(48px)}
.js [data-anim="scale"]{transform:scale(.94)}
.js [data-anim].is-in{opacity:1;transform:none}
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js [data-split] .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease-out);transition-delay:calc(var(--wi) * .045s)}
.js [data-split].is-in .w>span{transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .header-loc{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr);row-gap:2.5rem}
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:1024px){
  .main-nav,.header-right .btn{display:none}
  .menu-toggle{display:block}
  .header-right{margin-left:auto}
  .hero{min-height:0;align-items:flex-start}
  .hero-grid{grid-template-columns:1fr}
  .stage{max-width:520px;margin-top:1rem}
  .scroll-hint{display:none}
  .intro-grid,.about-grid,.split-2,.contact-grid,.contact-preview,.cta__inner,.project-layout{grid-template-columns:1fr}
  .about-visual{aspect-ratio:16/11}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .svc,.svc--static{grid-template-columns:clamp(56px,12vw,100px) minmax(0,1fr) 44px}
  .svc--static{grid-template-columns:clamp(56px,12vw,100px) minmax(0,1fr)}
  .svc .svc__tags{grid-column:2/3;grid-row:2}
  .svc__go{grid-column:3;grid-row:1}
  .svc:nth-child(n){margin-left:0}
  .project-facts{position:static}
  .tgrid,.loc-grid{grid-template-columns:repeat(2,1fr)}
  .pgrid>.pcard:nth-child(n){grid-column:span 6}
  .pgrid>.pcard:nth-child(3n+1){grid-column:span 12}
  .pgrid>.pcard .pcard__media{aspect-ratio:4/3!important}
  .pgrid>.pcard:nth-child(3n+1) .pcard__media{aspect-ratio:16/9!important}
  .frow{grid-template-columns:3.5rem 1fr}.frow p{grid-column:2}
  .cta__ghost{opacity:.6}
}
@media (max-width:768px){
  body{font-size:1rem}
  .cats{flex-direction:column;height:auto}
  .cat,.cat.is-open{flex:none;border-left:0;border-top:1px solid var(--black)}.cat:first-child{border-top:0}
  .cat:not(.is-open) .cat__name{writing-mode:horizontal-tb;transform:none;margin:0}
  .cat:not(.is-open) .cat__head{height:auto;flex-direction:row}
  .cat__body{max-height:0;overflow:hidden;padding-bottom:0;min-width:0;opacity:1;transform:none;transition:max-height .6s var(--ease)}
  .cat.is-open .cat__body{max-height:420px;padding-bottom:1.4rem}
  .why-grid,.tgrid,.loc-grid,.sgrid--3{grid-template-columns:1fr}
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}.gallery--masonry{columns:2}
  .contact-list>div{grid-template-columns:1fr;gap:.2rem}
  .pgrid>.pcard:nth-child(n){grid-column:span 12}
  .pgrid>.pcard .pcard__media,.pgrid>.pcard:nth-child(3n+1) .pcard__media{aspect-ratio:4/3!important}
  .timeline{padding-left:3rem}.timeline__line{left:.55rem}.tstep::before{left:-2.9rem}
  .tstep{grid-template-columns:1fr;gap:.4rem}
  .hero-title{font-size:clamp(2rem,9vw,2.8rem)}
  .btn--lg{padding:1rem 1.5rem}
}
@media (max-width:480px){
  .footer-top{grid-template-columns:1fr}
  .stats-grid{gap:1.6rem 1rem}.stat{padding-left:1rem}
  .sgrid{grid-template-columns:1fr 1fr;gap:.8rem}
  .sgrid .pcard__body{padding-right:0}.sgrid .pcard__arrow,.sgrid .pcard__desc{display:none}
  .tick-list.two-col{grid-template-columns:1fr}
  .gallery,.gallery--masonry{grid-template-columns:1fr;columns:1}.gallery__item:nth-child(5n+1){grid-column:auto}
  .btn-row .btn{width:100%;justify-content:space-between}
  .stage{margin-top:.5rem}
  .carousel__btn{width:2.8rem;height:2.8rem}
  .footer-bottom a{margin:0 1rem 0 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-anim],.js [data-split] .w>span{opacity:1;transform:none}
  .hw{transform:none}
}

@supports not (overflow:clip){html,body{overflow-x:hidden}}

@media (max-width:768px){
  .h-section{font-size:clamp(1.5rem,6.2vw,2rem)}
  .page-title{font-size:clamp(1.7rem,7.5vw,2.3rem)}
  .page-hero--project .page-title{font-size:clamp(1.6rem,7vw,2.1rem)}
  .cta__title{font-size:clamp(1.7rem,8vw,2.4rem)}
  .h-card,.svc__main h3,.svc__main .h-card,.tstep h3,.frow h3{font-size:1.15rem}
  .why h3,.pcard__title{font-size:1.05rem}
  .cat__name{font-size:1.25rem}
  .stat__num{font-size:clamp(1.8rem,8vw,2.4rem)}
  .marquee__group span{font-size:1.1rem}
  .tslide blockquote p{font-size:1.05rem}
  .lead,.page-lead{font-size:1rem}
  .hero-sub{font-size:1.05rem}
}

/* ===== Type scale (final): titles 30px, descriptions 16px – all screen sizes ===== */
body{font-size:16px}
.hero-title,.h-section,.page-title,.page-hero--project .page-title,.cta__title,.thanks h2{font-size:30px;line-height:1.15;letter-spacing:-.03em}
.hero-title{line-height:1.05}
.lead,.page-lead,.hero-desc,.hero-sub+p,.about-text p,.prose p,.prose li,.section p,.svc__main p,.why p,.tstep p,.pcard p,.frow p{font-size:16px}
.hero-sub{font-size:20px}
.hero-loc{font-size:14px}
@media (max-width:768px){
  .hero-title,.h-section,.page-title,.page-hero--project .page-title,.cta__title,.thanks h2{font-size:30px}
  .lead,.page-lead,.hero-desc{font-size:16px}
  .hero-sub{font-size:18px}
}

/* ===== Projects: three equal columns, square images ===== */
.pgrid,.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.2vw,2rem)}
.pgrid>.pcard:nth-child(n),.sgrid>.pcard:nth-child(n){grid-column:auto!important;margin-left:0;margin-top:0}
.pgrid>.pcard .pcard__media,.pgrid>.pcard:nth-child(n) .pcard__media,.sgrid .pcard__media{aspect-ratio:1/1!important;     border: 1px solid #ccc;}
.pcard__body{padding-right:2.9rem}
.pcard__desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:900px){.pgrid,.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pgrid,.sgrid{grid-template-columns:minmax(0,1fr)}}