/* =========================================================
   Velde® — Architecture & Interior Studio
   ========================================================= */
:root{
  --pad: 2.7vw;
  --ink: #0d0d0d;
  --dark: #111111;
  --muted: #868686;
  --soft: #f4f4f4;
  --line-light: #e7e7e7;
  --line-dark: #252525;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.77,0,.18,1);

  --fs-xs: clamp(11px, 1vw, 16px);
  --fs-s:  clamp(12px, 1.1vw, 17px);
  --fs-m:  clamp(14px, 1.3vw, 20px);
  --fs-b:  clamp(15px, 1.5vw, 23px);
  --fs-q:  clamp(15px, 1.58vw, 24px);
  --fs-h3: clamp(26px, 3vw, 48px);
  --fs-big: clamp(40px, 5.6vw, 96px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  font-family:"Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:var(--ink); background:#fff;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.loading{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
sup{font-size:.42em; vertical-align:top; position:relative; top:.12em; margin-left:.03em; font-weight:500}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 var(--pad)}
section,footer{position:relative}
.light{background:#fff;color:var(--ink);--line:var(--line-light)}
.dark{background:var(--dark);color:#fff;--line:var(--line-dark)}

/* ---------- grid lines ---------- */
.gl{position:absolute;inset:0;z-index:0;pointer-events:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0 var(--pad)}
.gl i{border-left:1px solid var(--line);transform-origin:top;}
.gl i:last-child{border-right:1px solid var(--line)}
section > *:not(.gl):not(.hero-media), footer > *:not(.gl){position:relative;z-index:1}

/* ---------- shared bits ---------- */
.label{display:inline-flex;align-items:center;gap:.6em;font-size:var(--fs-m);font-weight:500;align-self:start;height:max-content}
.label::before{content:"";width:.42em;height:.42em;background:#c4c4c4}
.dark .label::before{background:#5a5a5a}
.big{font-size:var(--fs-big);font-weight:500;letter-spacing:-.045em;line-height:1}
.link{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-b);font-weight:500;letter-spacing:-.01em}
.link .arr{transition:transform .5s var(--ease)}
.link:hover .arr{transform:translateX(.35em)}

/* arrow icon (pure css) */
.arr{position:relative;display:inline-block;width:1em;height:1em;flex:none}
.arr::before{content:"";position:absolute;left:.08em;right:.1em;top:50%;height:.09em;background:currentColor;transform:translateY(-50%)}
.arr::after{content:"";position:absolute;right:.1em;top:50%;width:.42em;height:.42em;border-top:.09em solid currentColor;border-right:.09em solid currentColor;transform:translateY(-50%) rotate(45deg);transform-origin:center}

/* button with separated arrow box */
.btn{display:flex;gap:4px;height:clamp(44px,3.6vw,64px);color:var(--ink)}
.btn-label{flex:1;background:#fff;display:flex;align-items:center;padding:0 1.45vw;padding-left:clamp(16px,1.45vw,28px);font-size:var(--fs-b);font-weight:500;letter-spacing:-.015em;overflow:hidden}
.btn-arrow{width:clamp(44px,3.6vw,64px);background:#fff;display:grid;place-items:center;overflow:hidden;font-size:clamp(16px,1.5vw,24px)}
.rw{display:inline-block;overflow:hidden;line-height:1.3;height:1.3em;vertical-align:middle}
.roll{position:relative;display:block;transition:transform .55s var(--ease)}
.roll::after{content:attr(data-t);position:absolute;left:0;top:100%;white-space:nowrap}
.btn:hover .roll{transform:translateY(-100%)}
.btn:hover .btn-arrow .arr{animation:arrowOut .6s var(--ease)}
@keyframes arrowOut{0%{transform:none}45%{transform:translateX(160%)}46%{transform:translateX(-160%)}100%{transform:none}}

/* image placeholder (falls back to gradient if file is missing) */
.ph{position:relative;overflow:hidden;background:#d9dcde}
.dark .ph{background:#1c1c1c}
.ph-in{position:absolute;inset:-12% 0;background:var(--src) center/cover no-repeat, linear-gradient(160deg,#c9ced2 0%,#9aa2a8 55%,#7d858b 100%);will-change:transform;transition:scale 1.2s var(--ease)}
.dark .ph-in{background:var(--src) center/cover no-repeat, linear-gradient(160deg,#3a3d40 0%,#232527 100%)}
/* image reveal: wipes in from top to bottom when it enters the viewport */
.img-rv{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease-io)}
.img-rv.in{clip-path:inset(0 0 0 0)}
.img-rv:not(.in) .ph-in{scale:1.18}
.img-rv .ph-in{transition:scale 1.8s var(--ease)}
.tc-img.img-rv{transition:clip-path 1.1s var(--ease-io) .25s}

/* scroll reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
[data-words] .w{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.25em);transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 38ms)}
[data-words].in .w{opacity:1;filter:none;transform:none}

/* masked text (logo reveal) */
.mask{display:block;overflow:hidden;padding-bottom:.04em}
.mask-in{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.in .mask-in, .intro-logo .mask-in{transform:none}

/* =========================================================
   NAV
   ========================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:clamp(12px,1.45vw,26px);color:#fff;align-items:center;
  opacity:0;transition:opacity .8s var(--ease)}
body.ready .nav{opacity:1}
.nav.blend{mix-blend-mode:difference}
.nav-logo{font-size:clamp(17px,1.6vw,27px);font-weight:600;letter-spacing:-.055em;justify-self:start}
.nav-logo sup{font-size:.55em;top:.05em}
.nav-meta{font-size:var(--fs-s);font-weight:500;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.nav.compact .nav-meta{opacity:0;transform:translateY(-8px);pointer-events:none}
.nav-menu{justify-self:end;display:inline-flex;align-items:center;gap:.45em;font-size:var(--fs-s);font-weight:500}
.plus{position:relative;width:1.15em;height:1.15em;border:1.5px solid currentColor;display:inline-block}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:58%;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .45s var(--ease)}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
body.menu-open .plus::before{transform:translate(-50%,-50%) rotate(45deg)}
body.menu-open .plus::after{transform:translate(-50%,-50%) rotate(135deg)}

/* menu overlay */
.menu{position:fixed;inset:0;z-index:55;background:var(--dark);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(80px,9vw,150px) 0 clamp(20px,2vw,32px);
  clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease-io);--line:var(--line-dark)}
body.menu-open .menu{clip-path:inset(0)}
.menu-links{grid-template-columns:1fr}
.menu-links a{display:flex;align-items:baseline;gap:1.2vw;font-size:clamp(40px,6.4vw,110px);font-weight:500;letter-spacing:-.05em;line-height:1.02;border-bottom:1px solid var(--line-dark);padding:.08em 0;
  opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform .7s var(--ease),color .3s}
.menu-links a span{font-size:var(--fs-s);letter-spacing:0;color:var(--muted);width:4ch}
.menu-links a:hover{color:#8d8d8d}
body.menu-open .menu-links a{opacity:1;transform:none}
body.menu-open .menu-links a:nth-child(1){transition-delay:.25s}
body.menu-open .menu-links a:nth-child(2){transition-delay:.3s}
body.menu-open .menu-links a:nth-child(3){transition-delay:.35s}
body.menu-open .menu-links a:nth-child(4){transition-delay:.4s}
body.menu-open .menu-links a:nth-child(5){transition-delay:.45s}
body.menu-open .menu-links a:nth-child(6){transition-delay:.5s}
.menu-foot{font-size:var(--fs-s);color:var(--muted)}

/* =========================================================
   HERO + INTRO
   ========================================================= */
.hero{height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#fff;color:#fff;--line:rgba(255,255,255,.17)}
.hero .gl{z-index:1}
body.loading .hero{--line:#e2e2e2}
.hero .gl i{transition:border-color 1s ease .4s}
body.intro-lines .hero .gl i{animation:lineDraw 1.1s var(--ease-io) both}
.hero .gl i:nth-child(2){animation-delay:.08s!important}
.hero .gl i:nth-child(3){animation-delay:.16s!important}
.hero .gl i:nth-child(4){animation-delay:.24s!important}
@keyframes lineDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
body.loading:not(.intro-lines) .hero .gl i{transform:scaleY(0)}

.hero-media{position:absolute;inset:0;z-index:0;clip-path:inset(100% 0 0 0);transition:clip-path 1.25s var(--ease-io);background:#8fb1c9}
body.reveal .hero-media{clip-path:inset(0)}
.hero-slide{position:absolute;inset:0;background:var(--src) center/cover no-repeat, linear-gradient(180deg,#6f9ab9 0%,#9dbbd0 55%,#c9d6de 100%);opacity:0;transform:scale(1.08);transition:opacity 1.4s var(--ease), transform 7s linear}
.hero-slide.on{opacity:1;transform:scale(1)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.18))}

.hero-inner{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:14.6vh auto auto 1fr auto;padding:0 var(--pad) clamp(18px,4.6vh,48px)}
.hero-logo{grid-column:1/4;grid-row:2;font-size:15.3vw;font-weight:600;letter-spacing:-.07em;line-height:.8;color:var(--ink);
  justify-self:start;margin-left:-.04em;transition:transform 1.25s var(--ease-io), color .7s ease .45s;white-space:nowrap}
.hero-logo .mask{padding-top:.04em;padding-bottom:.06em}
.hero-logo sup{font-size:.4em;top:.04em;font-weight:500;letter-spacing:0}
body.reveal .hero-logo{color:#fff}
.hero-services{grid-column:4;grid-row:2;align-self:start;font-size:var(--fs-s);font-weight:500;line-height:1.55}
.hero-services span{opacity:.6;margin-right:.25em;font-variant-numeric:tabular-nums}
.hero-tag{grid-column:1/3;grid-row:3;margin-top:clamp(18px,4.2vh,44px);font-size:var(--fs-b);font-weight:500;letter-spacing:-.015em;line-height:1.3;max-width:33vw}
.hero-cta{grid-column:4;grid-row:3;margin-top:clamp(18px,4.2vh,44px)}
.hero-bottom{grid-column:1/5;grid-row:5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end}

.hi{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
body.ready .hi{opacity:1;transform:none}
body.ready .hero-services{transition-delay:.05s}
body.ready .hero-tag{transition-delay:.12s}
body.ready .hero-cta{transition-delay:.2s}
body.ready .clients{transition-delay:.28s}
body.ready .logos{transition-delay:.34s}
body.ready .hero-slider{transition-delay:.4s}

.clients{display:flex;align-items:center;gap:1vw}
.avatars{display:flex}
.avatars span{width:clamp(30px,2.9vw,52px);height:clamp(30px,2.9vw,52px);border-radius:50%;border:1.5px solid rgba(255,255,255,.85);margin-left:calc(clamp(30px,2.9vw,52px) * -.32);background:var(--src) center/cover, linear-gradient(135deg,#b9a99a,#6e625a)}
.avatars span:first-child{margin-left:0}
.clients p{white-space:nowrap;font-size:var(--fs-m);font-weight:500;line-height:1.3;letter-spacing:-.01em}

.logos{grid-column:2/4;overflow:hidden;align-self:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logos-track{display:flex;width:max-content;animation:logos 26s linear infinite}
.logos-set{display:flex;align-items:center;gap:3.6vw;padding-right:3.6vw}
@keyframes logos{to{transform:translateX(-50%)}}
.lg{font-size:clamp(16px,1.9vw,32px);white-space:nowrap;color:#fff;opacity:.95;line-height:1}
.lg-1{font-weight:600;letter-spacing:-.06em}
.lg-2{font-weight:600;font-style:italic;letter-spacing:-.18em;transform:skewX(-12deg)}
.lg-3{font-weight:500;font-style:italic;letter-spacing:-.04em}
.lg-4{font-weight:600;letter-spacing:.14em;font-size:clamp(13px,1.45vw,25px)}
.lg-5{font-weight:600;letter-spacing:-.05em}
.lg-6{font-weight:500;letter-spacing:.28em;font-size:clamp(12px,1.3vw,22px)}

.hero-slider{grid-column:4}
.hs-head{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-b);font-weight:500;letter-spacing:-.015em;margin-bottom:.55vw}
.hs-head span:last-child{font-size:var(--fs-s);opacity:.85}
.hs-head b{font-weight:500}
#hsName{display:inline-block;transition:opacity .4s, transform .4s var(--ease)}
#hsName.swap{opacity:0;transform:translateY(8px)}
.hs-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(4px,.4vw,8px)}
.hs-thumbs button{aspect-ratio:1.33;background:var(--src) center/cover, linear-gradient(160deg,#9db7c9,#5f7d92);outline:1.5px solid transparent;outline-offset:-1.5px;opacity:.75;transition:opacity .4s,outline-color .4s, clip-path 1.1s var(--ease-io)}
.hs-thumbs button:hover{opacity:1}
.hs-thumbs button.on{outline-color:#fff;opacity:1}
body.loading .hs-thumbs button,body.loading .avatars span{clip-path:inset(0 0 100% 0)}
.hs-thumbs button,.avatars span{clip-path:inset(0 0 0 0)}
.avatars span{transition:clip-path 1.1s var(--ease-io)}
.avatars span:nth-child(2){transition-delay:.06s}.avatars span:nth-child(3){transition-delay:.12s}.avatars span:nth-child(4){transition-delay:.18s}.avatars span:nth-child(5){transition-delay:.24s}
.hs-thumbs button:nth-child(2){transition-delay:.08s}
.hs-thumbs button:nth-child(3){transition-delay:.16s}
.hs-thumbs button:nth-child(4){transition-delay:.24s}

/* =========================================================
   ABOUT
   ========================================================= */
.about{padding-top:9vw}
.about-head .label{grid-column:1}
.about-copy{grid-column:2/5}
.about-text{font-size:clamp(34px,5.35vw,92px);font-weight:500;letter-spacing:-.045em;line-height:1.03;padding-right:6vw}
.about-sub{margin-top:2.4vw;font-size:var(--fs-b);color:var(--muted);max-width:38vw;line-height:1.3;letter-spacing:-.01em;font-weight:500}
.stats{margin-top:6.5vw}
.stat{min-height:17.6vw;background:var(--soft);display:flex;flex-direction:column;justify-content:space-between;padding:1.6vw 1.45vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.stat:first-child{grid-column:2}
.stat:last-child{border-right:1px solid var(--line)}
.stat b{font-size:clamp(30px,3vw,52px);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat b i{font-style:normal;color:var(--muted);font-weight:400;margin-left:.05em}
.stat > span{font-size:var(--fs-b);color:#7b7b7b;font-weight:500;letter-spacing:-.01em}
.about-foot{min-height:8.2vw;align-items:end;padding-bottom:1.6vw}
.about-foot .link{grid-column:2}
.about-copy-y{grid-column:4;font-size:var(--fs-m);color:#7b7b7b;font-weight:500}

/* =========================================================
   FEATURE MARQUEE
   ========================================================= */
.feature-wrap{position:relative;margin:0 var(--pad);height:max(110vh,62vw);overflow:hidden}
.feature-img{position:absolute;inset:0;filter:grayscale(1)}
.feature-img .ph-in{background:var(--src) center/cover no-repeat, linear-gradient(170deg,#dcdcdc 0%,#a9a9a9 50%,#6e6e6e 100%)}
.feature-marquee{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.42) 36%,#000 44%);mask-image:linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.42) 36%,#000 44%)}
.fm-track{display:flex;align-items:center;gap:3.3vw;width:max-content;font-size:clamp(48px,7.6vw,140px);font-weight:500;letter-spacing:-.055em;color:var(--ink);white-space:nowrap;will-change:transform;line-height:1.08}
.fm-track i{font-style:normal;font-size:.4em}

/* =========================================================
   PROJECTS
   ========================================================= */
.projects{padding:13vw 0 11vw}
.projects-title{grid-column:2/4;font-size:clamp(46px,6.75vw,120px);letter-spacing:-.055em}
.pgrid{margin-top:6.5vw;row-gap:0;align-items:start}
.proj{display:block}
.proj .ph{width:100%}
.proj:hover .ph-in{scale:1.04}
.cap{display:flex;justify-content:space-between;margin-top:.9vw;font-size:var(--fs-b);font-weight:500;letter-spacing:-.015em}
.cap span:last-child{color:#8a8a8a}
.p1{grid-column:2/4;grid-row:1}
.p1 .ph{height:31vw}
.p2{grid-column:1;grid-row:2;margin-top:5.5vw}
.p2 .ph{height:13.3vw}
.p3{grid-column:3/5;grid-row:2;margin-top:5.5vw}
.p3 .ph{height:26.6vw}
.p4{grid-column:1/3;grid-row:3;margin-top:5.5vw}
.p4 .ph{height:26.6vw}
.p5{grid-column:4;grid-row:3;margin-top:18.7vw}
.p5 .ph{height:13.3vw}

/* =========================================================
   SERVICES
   ========================================================= */
.sv-head{padding-top:9vw;padding-bottom:5.5vw;row-gap:0;align-items:end}
.sv-head .label{grid-column:1/5;grid-row:1;margin-bottom:2.6vw}
.sv-title{grid-column:1/4;grid-row:2}
.sv-sub{grid-column:1/3;grid-row:3;margin-top:2.6vw;font-size:var(--fs-b);color:var(--muted);line-height:1.3;max-width:31vw;font-weight:500;letter-spacing:-.01em}
.sv-link{grid-column:3;grid-row:3}
.sv-brand{grid-column:4;grid-row:3;font-size:var(--fs-m);color:#8a8a8a;font-weight:500}
.sv-list{margin:0 var(--pad);border-top:1px solid var(--line)}
.sv-row{display:grid;grid-template-columns:1fr 1fr}
.sv-text{border-bottom:1px solid var(--line)}
.sv-row:last-child .sv-text{border-bottom:0}
.sv-sticky{position:sticky;top:12vh;padding:4.5vw 2.9vw 4vw}
.sv-num{display:block;font-size:clamp(18px,1.65vw,28px);color:#8a8a8a;font-weight:400;margin-bottom:.7vw}
.sv-text h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.sv-text p{margin-top:1.8vw;font-size:var(--fs-b);color:var(--muted);line-height:1.38;max-width:34.5vw;font-weight:500;letter-spacing:-.01em}
.sv-text ul{margin-top:2.2vw;font-size:var(--fs-m);color:#c9c9c9;line-height:1.95;font-weight:500}
.sv-text li{display:flex;align-items:center;gap:.6em}
.sv-text li::before{content:"";width:.3em;height:.3em;background:#6a6a6a;flex:none}
.sv-img{height:max(46vw,88vh)}
.sv-img .ph-in{inset:-15% 0}

/* process */
.pr-head{border-top:1px solid var(--line);margin-top:0;padding-top:16vw;padding-bottom:5.5vw;align-items:end}
.sv-list + .pr-head{border-top:0;position:relative}
.sv-list + .pr-head::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;border-top:1px solid var(--line)}
.pr-head .label{grid-column:1;align-self:start;margin-top:.6vw}
.pr-copy{grid-column:2/4}
.pr-sub{margin-top:2.6vw;font-size:var(--fs-b);color:var(--muted);line-height:1.3;max-width:34vw;font-weight:500;letter-spacing:-.01em}
.pr-btn{grid-column:4}
.steps{position:relative}
.steps::before,.steps::after{content:"";position:absolute;left:var(--pad);right:var(--pad);border-top:1px solid var(--line)}
.steps::before{top:0}.steps::after{bottom:0}
.step{min-height:21.7vw;padding:2.2vw;display:flex;flex-direction:column;justify-content:space-between;transition:background .5s var(--ease)}
.step:hover{background:#171717}
.step-top{display:flex;justify-content:space-between;align-items:baseline}
.step h4{font-size:clamp(20px,1.75vw,30px);font-weight:500;letter-spacing:-.03em}
.step-top span{font-size:var(--fs-m);color:#8a8a8a}
.step p{font-size:var(--fs-m);color:var(--muted);line-height:1.45;font-weight:500;max-width:22vw;margin-top:3vw}
.steps .step:nth-child(2){transition-delay:.06s}
.steps .step:nth-child(3){transition-delay:.12s}
.steps .step:nth-child(4){transition-delay:.18s}
.pr-space{height:8vw}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials{padding-top:9vw}
.ts-head{padding-bottom:1.4vw}
.ts-head .label{grid-column:1;margin-top:.8vw}
.ts-copy{grid-column:2/5}
.ts-title{font-size:clamp(34px,5.35vw,92px);font-weight:500;letter-spacing:-.045em;line-height:1.03;max-width:66vw}
.ts-sub{margin-top:2.4vw;font-size:var(--fs-b);color:var(--muted);max-width:40vw;line-height:1.3;font-weight:500;letter-spacing:-.01em}
.ts-arrows{display:flex;justify-content:flex-end;gap:4px;margin-top:2.6vw}
.ts-arrows button{width:clamp(30px,2.1vw,40px);height:clamp(30px,2.1vw,40px);background:var(--dark);color:#fff;display:grid;place-items:center;transition:opacity .3s, background .3s}
.ts-arrows button:hover{background:#333}
.ts-arrows button:disabled{opacity:.3;cursor:default}
.chev{width:.5em;height:.5em;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg) translate(-12%,12%);font-size:clamp(16px,1.3vw,22px)}
.chev.l{transform:rotate(-135deg) translate(-12%,12%)}
.ts-viewport{margin:0 var(--pad);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ts-track{display:flex;transition:transform 1s var(--ease)}
.tcard{flex:0 0 25%;min-height:28vw;background:#f5f5f5;border-right:1px solid var(--line);padding:2.6vw 2.2vw 2.2vw;display:flex;flex-direction:column}
.tcard:first-child{border-left:1px solid var(--line)}
.tc-top{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-m);font-weight:500;padding-bottom:1.2vw;border-bottom:1px solid #e0e0e0;gap:1em}
.stars{color:#8c8c8c;letter-spacing:.08em;font-size:.85em;white-space:nowrap}
.tcard blockquote{margin-top:1.6vw;font-size:var(--fs-q);line-height:1.32;font-weight:500;letter-spacing:-.015em;flex:1}
.tcard figcaption{display:flex;align-items:center;gap:.8vw;margin-top:2vw}
.tc-img{width:clamp(38px,3.1vw,56px);height:clamp(38px,3.1vw,56px);background:var(--src) center/cover, linear-gradient(135deg,#cbb8a6,#7e6f63);flex:none}
.tcard figcaption > span:last-child{display:flex;flex-direction:column;font-size:var(--fs-m);color:#8a8a8a;font-weight:500;line-height:1.35}
.tcard figcaption b{color:var(--ink);font-weight:500;font-size:var(--fs-b);letter-spacing:-.015em}

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding:17vw 0 14vw}
.faq-grid{align-items:start}
.faq-left{grid-column:1/3;align-self:stretch}
.faq-sticky{position:sticky;top:12vh;display:flex;flex-direction:column;align-items:flex-start}
.faq-left .big{margin-top:2.6vw;max-width:28vw}
.faq-sub{margin-top:2.6vw;font-size:var(--fs-b);color:var(--muted);line-height:1.35;max-width:31vw;font-weight:500;letter-spacing:-.01em}
.faq-sub span{color:var(--ink)}
.faq-left .link{margin-top:2.6vw}
.acc{grid-column:3/5;margin-top:-.6vw;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line);transition:background .4s var(--ease)}
.acc-item:hover,.acc-item.open{background:var(--soft)}
.acc-q{width:100%;display:flex;align-items:center;text-align:left;padding:2.1vw 1.9vw 2.1vw .3vw;font-size:var(--fs-b);font-weight:500;letter-spacing:-.015em;gap:0;line-height:1.25}
.acc-q span{flex:none;width:2.6vw;min-width:34px;font-size:var(--fs-m);color:#8a8a8a;font-weight:500}
.pm{position:relative;margin-left:auto;flex:none;width:clamp(14px,1.1vw,20px);height:clamp(14px,1.1vw,20px);padding-left:1em}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:1.5px;background:#555;transform:translate(-50%,-50%);transition:transform .5s var(--ease)}
.pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc-item.open .pm::before{transform:translate(-50%,-50%) rotate(45deg)}
.acc-item.open .pm::after{transform:translate(-50%,-50%) rotate(135deg)}
.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.acc-item.open .acc-a{grid-template-rows:1fr}
.acc-a > div{overflow:hidden}
.acc-a p{padding:0 2.2vw 2.2vw calc(max(2.6vw,34px) + .3vw);font-size:var(--fs-m);color:var(--muted);line-height:1.5;font-weight:500;opacity:0;transform:translateY(-6px);transition:opacity .5s, transform .5s var(--ease)}
.acc-item.open .acc-a p{opacity:1;transform:none;transition-delay:.12s}

/* =========================================================
   JOURNAL
   ========================================================= */
.journal{padding:13vw 0 8.2vw}
.jr-head{align-items:end}
.jr-head .label{grid-column:1;align-self:start;margin-top:.6vw}
.jr-copy{grid-column:2/4}
.jr-sub{margin-top:2.6vw;font-size:var(--fs-b);color:var(--muted);line-height:1.3;max-width:31vw;font-weight:500;letter-spacing:-.01em}
.jr-link{grid-column:4;margin-bottom:.2vw}
.posts{margin-top:5.6vw;align-items:start}
.post{position:relative;display:block;color:#fff}
.post .ph{position:absolute;inset:0}
.post .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 55%,rgba(0,0,0,.42) 100%)}
.post:hover .ph-in{scale:1.05}
.po-date{position:absolute;left:1.1vw;top:1.1vw;font-size:var(--fs-m);font-weight:500;z-index:2}
.post h3{position:absolute;left:1.1vw;right:1.1vw;bottom:1.1vw;font-size:var(--fs-q);font-weight:500;letter-spacing:-.015em;line-height:1.2;z-index:2}
.po1{height:35.4vw}.po2{height:23.6vw}.po3{height:31.4vw}.po4{height:15.8vw}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{padding-top:8.6vw;overflow:hidden}
.ft-top{align-items:start}
.ft-cta{grid-column:1/3}
.ft-cta .big{max-width:none;white-space:nowrap}
.ft-cta p{margin-top:2.4vw;font-size:var(--fs-b);color:var(--muted);line-height:1.35;font-weight:500;letter-spacing:-.01em}
.ft-cta .btn{margin-top:2.4vw;width:calc((100vw - var(--pad)*2)/4)}
.ft-col{margin-top:9vw;display:flex;flex-direction:column;font-size:var(--fs-b);font-weight:500;line-height:1.6;letter-spacing:-.01em}
.ft-col span{color:var(--muted);margin-bottom:.25em;font-size:var(--fs-m)}
.ft-col a{width:max-content;transition:color .3s}
.ft-col a:hover{color:#8a8a8a}
.ft-col:nth-child(2){grid-column:3}
.ft-col:nth-child(3){grid-column:4}
.ft-mid{margin-top:12vw;align-items:end}
.ft-logo{grid-column:1/4;font-size:15.3vw;font-weight:600;letter-spacing:-.07em;line-height:.8;color:#555;margin-left:-.04em;white-space:nowrap}
.ft-logo .mask{padding-top:.04em;padding-bottom:.06em}
.ft-logo sup{font-size:.4em;top:.04em;font-weight:500;letter-spacing:0}
.ft-img{grid-column:4;height:11.5vw;margin-bottom:.4vw}
.ft-img .ph-in{background:var(--src) center/cover no-repeat, linear-gradient(170deg,#9cc6d0,#5f8f9c)}
.ft-bar{padding-top:2vw;padding-bottom:1.8vw;font-size:var(--fs-m);color:var(--muted);font-weight:500;align-items:center}
.ft-bar b{color:#fff;font-weight:500}
.socials{display:flex;gap:.7vw}
.socials svg{width:clamp(16px,1.25vw,22px);height:clamp(16px,1.25vw,22px);fill:#fff;display:block;transition:opacity .3s}
.socials a:hover svg{opacity:.6}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px){
  :root{--pad:16px;--fs-big:clamp(40px,11vw,72px)}
  .grid,.hero-inner,.hero-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gl{grid-template-columns:repeat(2,1fr)}
  .gl i:nth-child(n+3){display:none}
  .gl i:nth-child(2){border-right:1px solid var(--line)}
  .nav-meta:nth-of-type(2){display:none}
  .nav-menu{grid-column:2}
  .nav{grid-template-columns:1fr 1fr}
  .nav-meta{display:none}

  .hero-inner{grid-template-rows:14vh auto auto auto 1fr auto}
  .hero-logo{grid-column:1/3;font-size:28vw}
  .hero-services{grid-column:1/3;grid-row:4;margin-top:26px}
  .hero-tag{grid-column:1/3;max-width:none}
  .hero-cta{grid-column:1/3;grid-row:5;margin-top:22px;align-self:start}
  .hero-bottom{grid-row:6;row-gap:18px}
  .clients{grid-column:1/3}
  .logos{display:none}
  .hero-slider{grid-column:1/3}
  .hs-head{margin-bottom:8px}

  .about{padding-top:80px}
  .about-head .label,.about-copy{grid-column:1/3}
  .about-copy{margin-top:22px}
  .about-text{font-size:9.2vw;padding-right:0}
  .about-sub{max-width:none;margin-top:20px}
  .stats{margin-top:40px;grid-template-columns:1fr 1fr}
  .stat,.stat:first-child{grid-column:auto;min-height:40vw;padding:16px}
  .stat:nth-child(3){grid-column:1/3;border-right:1px solid var(--line)}
  .about-foot{min-height:90px;padding-bottom:16px}
  .about-foot .link{grid-column:1}
  .about-copy-y{grid-column:2;justify-self:end}

  .feature-wrap{height:80vh}
  .fm-track{font-size:16vw}

  .projects{padding:90px 0}
  .projects-title{grid-column:1/3;font-size:14vw}
  .pgrid{margin-top:40px;row-gap:40px}
  .p1,.p2,.p3,.p4,.p5{grid-column:1/3;grid-row:auto;margin-top:0}
  .p1 .ph,.p3 .ph,.p4 .ph{height:62vw}
  .p2,.p5{grid-column:auto}
  .p2 .ph,.p5 .ph{height:44vw}
  .cap{margin-top:10px}

  .sv-head{padding-top:80px;padding-bottom:40px}
  .sv-head .label{margin-bottom:20px}
  .sv-title,.sv-sub{grid-column:1/3}
  .sv-sub{max-width:none;margin-top:20px}
  .sv-link{grid-row:4;grid-column:1;margin-top:24px}
  .sv-brand{grid-row:4;grid-column:2;justify-self:end;margin-top:24px}
  .sv-row{grid-template-columns:1fr}
  .sv-sticky{position:static;padding:40px 0 30px}
  .sv-text p{max-width:none;margin-top:16px}
  .sv-text ul{margin-top:18px}
  .sv-num{margin-bottom:8px}
  .sv-img{height:75vw}

  .pr-head{padding-top:90px;padding-bottom:40px}
  .pr-head .label,.pr-copy,.pr-btn{grid-column:1/3}
  .pr-copy{margin-top:20px}
  .pr-sub{max-width:none;margin-top:20px}
  .pr-btn{margin-top:28px}
  .step{min-height:56vw;padding:16px;border-bottom:1px solid var(--line)}
  .step p{max-width:none;margin-top:30px}
  .pr-space{height:60px}

  .testimonials{padding-top:80px}
  .ts-head .label,.ts-copy{grid-column:1/3}
  .ts-copy{margin-top:20px}
  .ts-title{font-size:8.6vw;max-width:none}
  .ts-sub{max-width:none;margin-top:20px}
  .ts-arrows{margin-top:24px}
  .tcard{flex-basis:82%;min-height:96vw;padding:20px 18px}
  .tc-top{padding-bottom:14px}
  .tcard blockquote{margin-top:16px}
  .tcard figcaption{gap:10px}

  .faq{padding:100px 0 80px}
  .faq-left,.acc{grid-column:1/3}
  .faq-sticky{position:static}
  .faq-left .big,.faq-sub{max-width:none;margin-top:20px}
  .faq-left .link{margin-top:20px}
  .acc{margin-top:40px}
  .acc-q{padding:18px 14px 18px 4px}
  .acc-a p{padding:0 18px 18px 38px}

  .journal{padding:90px 0 60px}
  .jr-head .label,.jr-copy,.jr-link{grid-column:1/3}
  .jr-copy{margin-top:20px}
  .jr-sub{max-width:none;margin-top:20px}
  .jr-link{margin-top:22px}
  .posts{margin-top:36px;gap:0}
  .po1,.po2,.po3,.po4{height:62vw}
  .po-date{left:12px;top:12px}
  .post h3{left:12px;right:12px;bottom:12px}

  .footer{padding-top:80px}
  .ft-cta{grid-column:1/3}
  .ft-cta .big{max-width:none}
  .ft-cta p{margin-top:20px}
  .ft-cta .btn{width:100%;margin-top:24px}
  .ft-col{margin-top:56px}
  .ft-col:nth-child(2){grid-column:1}
  .ft-col:nth-child(3){grid-column:2}
  .ft-mid{margin-top:64px;row-gap:20px}
  .ft-logo{grid-column:1/3;font-size:28vw}
  .ft-img{grid-column:1/3;height:44vw}
  .ft-bar{row-gap:12px;padding-top:24px;padding-bottom:20px}
  .ft-bar span:nth-child(2){justify-self:end}
  .ft-bar span:nth-child(4){justify-self:end}
  .btn-label{padding-left:16px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =========================================================
   "BEFORE" WIREFRAME → reload → real site
   ========================================================= */
.wire{position:fixed;inset:0;z-index:100;cursor:pointer;background:#ececec;color:#bdbdbd;overflow:hidden;
  transition:opacity .55s ease, filter .55s ease, transform .9s var(--ease)}
.wire.out{opacity:0;pointer-events:none;transition-delay:.35s}
.wire-lines{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);padding:0 var(--pad)}
.wire-lines i{border-left:1px dashed #d6d6d6}
.wire-lines i:last-child{border-right:1px dashed #d6d6d6}
.wire-bar{position:absolute;left:0;top:0;height:3px;width:100%;background:#111;transform:scaleX(0);transform-origin:left;opacity:0}
.wire-bar.go{opacity:1;transform:scaleX(1);transition:transform 1s cubic-bezier(.3,.7,.2,1), opacity .2s}
.wire-in{position:relative;height:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:14.6vh auto auto 1fr auto;padding:0 var(--pad) clamp(18px,4.6vh,48px)}
.wb{display:block;background:#cfcfcf;border-radius:10px;opacity:0;transform:translate3d(var(--x,-55vw),0,0);
  transition:opacity .5s ease, transform 1.15s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d,0) * 45ms)}
/* blocks on the right half fly in from the right, the rest from the left */
.w-nav3,.w-nav4,.w-serv .wb,.w-btn .wb,.w-thumbs .wb,.w-logos .wb:nth-child(n+4){--x:55vw}
.w-img{--x:0px;transform:scale(.4) rotate(-8deg)!important}
.wire.show .w-img{transform:none!important}
.wire.show.out .w-img{transform:scale(.4) rotate(8deg)!important}
/* on click they slide back out to their side before the real site loads */
.wire.show.out .wb{opacity:0;transform:translate3d(calc(var(--x,-55vw) * .5),0,0);transition-duration:.45s,.7s;transition-timing-function:ease,cubic-bezier(.7,0,.84,0);transition-delay:calc(var(--d,0) * 18ms)}
.wb.pill{border-radius:999px;height:clamp(9px,.95vw,15px)}
.wire.show .wb{opacity:1;transform:none}
.wire.pulse .wb{animation:wirePulse 1.1s ease-in-out infinite}
@keyframes wirePulse{50%{background:#dcdcdc}}

.w-nav1,.w-nav2,.w-nav3,.w-nav4{position:absolute;top:clamp(14px,1.6vw,28px);height:clamp(12px,1.25vw,20px)!important}
.w-nav1{left:var(--pad);width:7vw}
.w-nav2{left:calc(var(--pad) + (100vw - var(--pad)*2)/4);width:10vw}
.w-nav3{left:calc(var(--pad) + (100vw - var(--pad)*2)/2);width:8vw}
.w-nav4{right:var(--pad);width:5.5vw}

.w-logo{grid-column:1/3;grid-row:2;height:11.4vw;width:88%;border-radius:clamp(12px,1.6vw,26px)}
.w-serv{grid-column:4;grid-row:2;display:flex;flex-direction:column;gap:.75vw}
.w-tag{grid-column:1/3;grid-row:3;margin-top:clamp(18px,4.2vh,44px);display:flex;flex-direction:column;gap:.8vw;max-width:33vw}
.w-tag .pill{height:clamp(12px,1.25vw,20px)}
.w-btn{grid-column:4;grid-row:3;margin-top:clamp(18px,4.2vh,44px);display:flex;gap:4px;height:clamp(44px,3.6vw,64px)}
.w-btn i:first-child{flex:1}.w-btn i:last-child{width:clamp(44px,3.6vw,64px)}
.w-img{position:absolute;left:50%;top:50%;width:clamp(70px,7.5vw,130px);aspect-ratio:1;margin:calc(clamp(70px,7.5vw,130px) / -2) 0 0 calc(clamp(70px,7.5vw,130px) / -2);
  background:transparent!important;color:#b4b4b4}
.w-img svg{width:100%;height:100%}
.w-bottom{grid-column:1/5;grid-row:5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:0}
.w-clients{display:flex;align-items:center;gap:1vw}
.w-avs{display:flex}
.w-avs i{width:clamp(30px,2.9vw,52px);height:clamp(30px,2.9vw,52px);border-radius:50%;border:2px solid #ececec;margin-left:-.8vw}
.w-avs i:first-child{margin-left:0}
.w-lines{flex:1;display:flex;flex-direction:column;gap:.6vw;max-width:9vw}
.w-logos{grid-column:2/4;display:flex;justify-content:space-around;align-items:center;align-self:center}
.w-logos i{width:5.5vw;height:clamp(14px,1.5vw,24px)!important}
.w-thumbs{grid-column:4}
.w-th-head{display:flex;justify-content:space-between;margin-bottom:.6vw}
.w-th-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(4px,.4vw,8px)}
.w-th-row i{aspect-ratio:1.33;border-radius:6px}
@media (max-width:860px){
  .wire-lines{grid-template-columns:repeat(2,1fr)}
  .wire-lines i:nth-child(n+3){display:none}
  .wire-lines i:nth-child(2){border-right:1px dashed #d6d6d6}
  .wire-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w-nav2,.w-nav3{display:none}.w-nav1{width:18vw}.w-nav4{width:14vw}
  .w-logo{grid-column:1/3;height:22vw;width:85%}
  .w-serv{grid-column:1/3;grid-row:4;margin-top:24px;gap:8px;max-width:50%}
  .w-tag{grid-column:1/3;max-width:none;gap:8px}
  .w-btn{grid-column:1/3;grid-row:5;margin-top:22px}
  .wire-in{grid-template-rows:14vh auto auto auto auto 1fr auto}
  .w-bottom{grid-row:7;grid-template-columns:1fr;row-gap:16px}
  .w-logos{display:none}.w-thumbs{grid-column:1}
  .w-lines{max-width:40vw;gap:6px}
}
@media (prefers-reduced-motion: reduce){.wire{display:none}}

/* mobile footer headline: keep "Something" on screen */
@media (max-width: 860px) {
  .ft-cta .big { font-size: 9.6vw; }
}