*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}figure,h1,h2,h3,h4,p{margin:0}.container{width:min(100% - (var(--pad)*2),1500px);margin:auto}.section-dark{background:var(--dark);color:#f4f1e8}.section-light{background:var(--bg);color:var(--ink)}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase}.text-link{font-size:13px;border-bottom:1px solid currentColor;padding-bottom:5px}.body-large{font:clamp(19px,2vw,31px)/1.45 var(--serif)}
.page-loader{position:fixed;inset:0;background:#111;z-index:1000;display:grid;place-items:center;color:#fff;font:12px/1 var(--sans);letter-spacing:.45em;transition:transform .9s cubic-bezier(.77,0,.18,1)}.page-loader.loaded{transform:translateY(-100%)}.cursor-dot{position:fixed;width:8px;height:8px;background:#fff;border-radius:50%;mix-blend-mode:difference;z-index:999;pointer-events:none;transform:translate(-50%,-50%)}
.site-header{position:fixed;z-index:100;left:0;right:0;top:0;padding:25px var(--pad);display:flex;justify-content:space-between;align-items:center;color:#fff;mix-blend-mode:difference}.brand{width:130px;height:35px}.brand img{object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}.menu-btn{border:0;background:none;color:inherit;display:flex;align-items:center;gap:7px;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.1em}.menu-btn i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor}.menu-panel{position:fixed;z-index:90;inset:0;background:#e9e6dd;color:#111;clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.77,0,.18,1);pointer-events:none}.menu-panel.open{clip-path:inset(0);pointer-events:auto}.menu-panel__inner{height:100%;padding:120px var(--pad) 50px;display:flex;align-items:flex-end}.menu-panel nav{width:100%}.menu-panel a{display:grid;grid-template-columns:80px 1fr;border-top:1px solid #aaa;padding:13px 0;align-items:center}.menu-panel a span{font:clamp(42px,7vw,100px)/.9 var(--serif)}.menu-panel a em{font-style:normal;font-size:11px}
.hero{height:100svh;min-height:720px;position:relative;overflow:hidden}.hero-media,.hero-shade{position:absolute;inset:0}.hero-media img{transform:scale(1.08);will-change:transform}.hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.08) 68%,rgba(0,0,0,.25)),linear-gradient(0deg,rgba(0,0,0,.45),transparent 45%)}.hero-copy{position:absolute;left:var(--pad);top:15vh;width:min(1000px,76vw);z-index:2}.display{font:clamp(74px,10.2vw,172px)/.78 var(--serif);font-weight:400;letter-spacing:-.06em}.display span{font-style:italic}.hero .eyebrow{margin-bottom:7vh}.hero-bottom{display:grid;grid-template-columns:minmax(220px,420px) auto;gap:80px;align-items:end;margin-top:6vh}.hero-bottom p{font:clamp(16px,1.25vw,21px)/1.5 var(--serif);max-width:410px}.round-link{width:125px;height:125px;border:1px solid rgba(255,255,255,.65);border-radius:50%;display:flex;flex-direction:column;justify-content:space-between;padding:25px;transition:.35s}.round-link:hover{background:#f4f1e8;color:#111}.round-link b{align-self:flex-end;font-size:20px}.latest-project{position:absolute;right:var(--pad);bottom:38px;z-index:2;display:grid;gap:7px;border-left:1px solid rgba(255,255,255,.6);padding-left:22px;font-size:11px;letter-spacing:.04em}.latest-project strong{font:18px/1 var(--serif);font-weight:400}.scroll-cue{position:absolute;right:var(--pad);top:47%;z-index:2;display:flex;align-items:center;gap:10px;transform:rotate(90deg);transform-origin:right center;font-size:9px;text-transform:uppercase;letter-spacing:.2em}.scroll-cue i{width:65px;height:1px;background:#fff;display:block}
.about{padding:110px 0 130px}.about-intro .eyebrow{margin-bottom:30px}.statement{font:clamp(42px,4.25vw,72px)/1.03 var(--sans);font-weight:500;letter-spacing:-.045em;max-width:1450px}.about-layout{display:grid;grid-template-columns:48% 52%;gap:8vw;align-items:end;margin-top:70px}.about-left{min-width:0}.about-copy{max-width:620px;padding-top:45px}.about-copy .body-large{color:#555b66;line-height:1.55}.about-link{display:inline-flex;margin-top:34px}.stats-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;border-top:1px solid var(--line);margin-top:55px;padding-top:42px}.stat{min-width:0}.stat-number{display:flex;align-items:flex-start;white-space:nowrap}.stat strong{font:clamp(50px,4.3vw,72px)/.9 var(--sans);font-weight:500;letter-spacing:-.055em}.stat span{font:clamp(20px,1.8vw,30px)/1 var(--sans);margin-left:3px}.stat p{margin-top:18px;font-size:14px;color:#555b66;line-height:1.3;text-transform:none;letter-spacing:0}.about-image{height:min(590px,58vw);min-height:470px;overflow:hidden;align-self:end}.about-image img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.services{padding:150px 0}.services-head{display:grid;grid-template-columns:1fr 1fr;padding-bottom:80px}.services-note{font:28px/1.35 var(--serif);max-width:600px}.service-row{border-top:1px solid var(--line-dark);display:grid;grid-template-columns:100px 1fr 60px;align-items:center;padding:27px 0;transition:padding .35s}.service-row:last-child{border-bottom:1px solid var(--line-dark)}.service-row span{font-size:11px}.service-row h3{font:clamp(34px,4.2vw,68px)/1 var(--serif);font-weight:400}.service-row b{font-size:25px;font-weight:400;justify-self:end}.service-row:hover{padding-left:20px}
.projects{padding:145px 0 0}.projects-head{display:flex;justify-content:space-between;padding-bottom:75px}.project-stack{position:relative}.project-card{min-height:100vh;padding:80px var(--pad) 50px;background:var(--bg);display:grid;grid-template-columns:minmax(300px,36%) 1fr;grid-template-rows:auto 1fr;gap:35px 6vw;border-top:1px solid var(--line);overflow:hidden}.sticky-project{position:sticky;top:0}.project-card:nth-child(2){background:#e8e6df}.project-card:nth-child(3){background:#dddcd4}.project-card:nth-child(4){background:#d5d4cc}.project-card:nth-child(5){background:#cbc9c1}.project-meta{display:grid;grid-template-columns:75px 1fr;align-content:start}.project-meta>span{font-size:11px}.project-meta h3{font:clamp(42px,5.5vw,86px)/.95 var(--serif);font-weight:400;letter-spacing:-.04em}.project-meta p{font:17px/1.45 var(--serif);max-width:430px;margin:28px 0}.tags{display:flex;flex-wrap:wrap;gap:7px}.tags i{font-style:normal;border:1px solid currentColor;border-radius:50px;padding:8px 13px;font-size:10px;text-transform:uppercase}.project-image{height:calc(100vh - 150px);min-height:610px;overflow:hidden;grid-row:1/3;grid-column:2}.project-image img{transform:scale(1.05);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}.project-card:hover .project-image img{transform:scale(1)}.project-link{align-self:end;border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;font-size:12px}.project-link b{font-size:18px}
.logo-marquee{padding:34px 0;overflow:hidden;background:#fff;color:#9C7114;border-top:1px solid rgba(156,113,20,.28);border-bottom:1px solid rgba(156,113,20,.28)}.marquee-track{display:flex;width:max-content;gap:35px;align-items:center;animation:marquee 24s linear infinite}.marquee-track span{font:clamp(30px,4vw,56px)/1 var(--serif);white-space:nowrap;text-transform:none;color:#9C7114}.marquee-track i{font-style:normal;opacity:.52;color:#9C7114}
.values{height:420vh;position:relative}.values-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}.values-grid{display:grid;grid-template-columns:38% 62%;height:82vh;align-items:stretch}.values-copy{display:flex;flex-direction:column;padding-right:5vw}.values-copy h2{font:clamp(34px,4vw,62px)/1.05 var(--serif);font-weight:400;margin-top:auto;margin-bottom:60px}.values-copy ol{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}.values-copy li{padding:17px 0;border-bottom:1px solid var(--line);font-size:12px;text-transform:uppercase;opacity:.35;transition:.4s}.values-copy li.active{opacity:1;padding-left:15px}.values-copy small{margin-top:22px;text-transform:uppercase;letter-spacing:.15em}.values-stage{position:relative;overflow:hidden;background:#222}.value-image{position:absolute;overflow:hidden;will-change:transform,opacity}.value-main{inset:0}.v1{width:38%;height:38%;left:5%;top:6%}.v2{width:34%;height:45%;right:4%;top:10%}.v3{width:42%;height:40%;left:28%;bottom:4%}.v4{width:29%;height:34%;left:1%;bottom:2%}.v5{width:33%;height:35%;right:1%;bottom:1%}.v6{width:28%;height:30%;right:27%;top:30%}.value-image:not(.value-main){opacity:0;transform:translateY(80px) scale(.92)}
.feedback{padding:150px 0}.feedback-head{display:grid;grid-template-columns:1fr 1fr;padding-bottom:100px}.feedback-head>p:last-child{font:clamp(25px,3vw,45px)/1.2 var(--serif);max-width:600px}.feedback-slider{display:grid;grid-template-columns:18% 1fr 110px;align-items:end;border-top:1px solid var(--line-dark);padding-top:50px}.feedback-count{font:16px var(--serif)}.feedback-copy blockquote{margin:0;font:clamp(35px,4.4vw,70px)/1.05 var(--serif);max-width:1100px}.feedback-copy p{margin-top:50px;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.feedback-controls{display:flex;gap:8px}.feedback-controls button{width:48px;height:48px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:none;color:#fff;cursor:pointer}
.team{padding:145px 0;overflow:hidden}.team .eyebrow{margin-bottom:70px}.team-track-wrap{overflow:hidden;padding-left:var(--pad)}.team-track{display:flex;gap:22px;width:max-content;will-change:transform}.team-track article{width:min(28vw,430px)}.team-track figure{height:58vh;min-height:510px;overflow:hidden}.team-track h4{font:28px/1 var(--serif);font-weight:400;margin-top:20px}.team-track p{margin-top:7px;font-size:11px;text-transform:uppercase}.awards{padding:160px 0}.awards-grid{display:grid;grid-template-columns:43% 57%;gap:8vw}.awards-intro h2{font:clamp(40px,4.7vw,75px)/1.02 var(--serif);font-weight:400;margin:55px 0 100px}.featured-by{font-size:11px;text-transform:uppercase;line-height:2}.featured-by span{display:block;color:var(--muted);margin-bottom:16px}.award-list article{display:grid;grid-template-columns:100px 1fr;border-top:1px solid var(--line);padding:26px 0}.award-list article:last-child{border-bottom:1px solid var(--line)}.award-list span{font-size:11px}.award-list h4{font:31px/1.1 var(--serif);font-weight:400}.award-list p{font:16px/1.5 var(--serif);margin-top:10px;max-width:520px;color:#555}
.insights{padding:140px 0 170px}.insights-head{display:flex;justify-content:space-between;margin-bottom:65px}.insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.insight-card figure{height:65vh;min-height:500px;overflow:hidden}.insight-card>div{display:flex;justify-content:space-between;margin:18px 0;font-size:10px;text-transform:uppercase}.insight-card h3{font:clamp(30px,3vw,47px)/1.08 var(--serif);font-weight:400}.contact{padding-top:150px;overflow:hidden}.contact-top{display:flex;justify-content:space-between;align-items:flex-end}.contact-title{font:clamp(72px,10vw,160px)/.82 var(--serif);font-weight:400;letter-spacing:-.055em}.round-link--large{width:165px;height:165px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw;margin:150px auto}.contact-details{display:flex;flex-direction:column;gap:15px}.contact-details .eyebrow{margin-bottom:35px}.contact-details a{font:27px var(--serif)}.contact-form label{display:block;border-bottom:1px solid var(--line-dark);padding:14px 0 20px;font-size:10px;text-transform:uppercase}.contact-form input,.contact-form textarea{display:block;width:100%;border:0;background:none;color:#fff;padding:12px 0 0;outline:0;resize:none;font:20px var(--serif)}.contact-form button{margin-top:30px;border:1px solid #fff;background:none;color:#fff;border-radius:50px;padding:14px 22px;cursor:pointer}.footer-marquee{white-space:nowrap;overflow:hidden;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}.footer-marquee div{font:clamp(85px,13vw,210px)/.95 var(--serif);letter-spacing:-.05em;width:max-content;animation:marquee 28s linear infinite}.footer{padding:35px 0 55px;display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:50px;font-size:10px;text-transform:uppercase}.footer img{height:35px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}

/* =========================================================
   VERSION 2.1 — CINEMATIC FIRST FOLD
   Video-ready hero inspired by the motion language of Archevo.
   Drop the final background film at: videos/hero.mp4
   ========================================================= */
.hero-scroll-shell{height:148svh;position:relative;background:#111}
.hero-scroll-shell .hero{position:sticky;top:0;height:100svh;min-height:720px;z-index:1;overflow:hidden}
.hero-media{position:absolute;inset:0;overflow:hidden;background:#141414}
.hero-video,.hero-fallback{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;will-change:transform;transform:scale(1.025);transform-origin:center center}
.hero-fallback{z-index:0}
.hero-video{z-index:1}
.hero-video[src=""],.hero-video:not([src]){display:none}
.hero-shade{z-index:2;background:linear-gradient(180deg,rgba(8,12,12,.58) 0%,rgba(8,12,12,.24) 37%,rgba(8,12,12,.37) 62%,rgba(8,12,12,.73) 100%),linear-gradient(90deg,rgba(5,8,8,.28),rgba(5,8,8,.02) 62%,rgba(5,8,8,.2));transition:background .2s linear}
.hero-line{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.27);z-index:4;transform:scaleX(0);transform-origin:left center}
.hero-line--top{top:102px}.hero-line--middle{top:64.5%}
body.ready .hero-line{animation:heroLineIn 1.25s cubic-bezier(.22,.75,.25,1) forwards}.hero-line--middle{animation-delay:.35s!important}
@keyframes heroLineIn{to{transform:scaleX(1)}}

/* Header entrance */
.site-header{z-index:110;padding:31px 5.2vw 27px;mix-blend-mode:normal;opacity:0;transform:translateY(-18px);transition:opacity .8s ease .15s,transform .8s cubic-bezier(.2,.75,.25,1) .15s}
body.ready .site-header{opacity:1;transform:none}
.brand{width:139px;height:39px}.menu-btn{font-size:18px;letter-spacing:0;text-transform:none;gap:19px}.menu-btn i{width:28px;height:1.5px;border-radius:0;background:currentColor;position:absolute;right:0}.menu-btn{position:relative;padding-right:43px}.menu-btn i:nth-of-type(1){transform:translateY(-5px)}.menu-btn i:nth-of-type(2){transform:translateY(5px)}

/* Hero typography */
.hero-copy{left:5.2vw;top:36.5%;width:min(1050px,72vw);z-index:5;will-change:transform,opacity}
.hero-kicker{font-size:13px;letter-spacing:0;text-transform:none;margin-bottom:19px;opacity:0;transform:translateY(20px)}
.hero-title{font-family:var(--sans);font-size:clamp(70px,7.1vw,122px);line-height:.88;font-weight:500;letter-spacing:-.055em}
.hero-title-line{display:block;overflow:hidden;padding-bottom:.08em}.hero-title-line>span{display:block;transform:translateY(115%)}
.hero-title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.035em}
body.ready .hero-kicker{animation:heroFadeUp .8s cubic-bezier(.2,.75,.25,1) .45s forwards}
body.ready .hero-title-line:nth-child(1)>span{animation:heroTitleIn 1.05s cubic-bezier(.17,.84,.25,1) .55s forwards}
body.ready .hero-title-line:nth-child(2)>span{animation:heroTitleIn 1.05s cubic-bezier(.17,.84,.25,1) .68s forwards}
@keyframes heroFadeUp{to{opacity:1;transform:none}}@keyframes heroTitleIn{to{transform:none}}

/* Lower left content */
.hero-description{position:absolute;left:5.2vw;bottom:6.7vh;z-index:5;width:min(470px,35vw);opacity:0;transform:translateY(22px);will-change:transform,opacity}
body.ready .hero-description{animation:heroFadeUp .9s cubic-bezier(.2,.75,.25,1) 1.03s forwards}
.hero-description p{font:clamp(15px,1.18vw,19px)/1.5 var(--sans);max-width:455px}
.hero-text-link{display:inline-flex;align-items:center;gap:15px;margin-top:48px;font-size:16px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.72);transition:gap .3s ease,opacity .3s ease}.hero-text-link:hover{gap:23px;opacity:.78}.hero-text-link b{font-size:18px;font-weight:400}

/* Latest project card */
.latest-project{position:absolute;right:5.2vw;bottom:5.1vh;z-index:6;width:min(355px,27vw);min-width:315px;height:137px;padding:9px;background:rgba(236,236,232,.43);border:1px solid rgba(255,255,255,.23);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;grid-template-columns:112px 1fr 22px;gap:13px;align-items:stretch;opacity:0;transform:translateX(55px);transition:background .35s ease,transform .45s cubic-bezier(.2,.75,.25,1),border-color .35s ease}
body.ready .latest-project{animation:heroCardIn 1s cubic-bezier(.17,.84,.25,1) 1.12s forwards}@keyframes heroCardIn{to{opacity:1;transform:none}}
.latest-project:hover{background:rgba(245,245,241,.56);border-color:rgba(255,255,255,.5);transform:translateY(-5px)!important}.latest-project figure{height:100%;overflow:hidden;background:#aaa}.latest-project figure img{transition:transform .8s cubic-bezier(.2,.75,.25,1);transform:scale(1.04)}.latest-project:hover figure img{transform:scale(1.11)}
.latest-project__copy{display:flex;flex-direction:column;justify-content:space-between;padding:3px 0 5px}.latest-project__copy>span{font-size:15px;font-weight:500}.latest-project__copy div{display:grid;gap:4px}.latest-project__copy strong{font:16px/1.15 var(--sans);font-weight:400}.latest-project__copy b{font-size:15px;font-weight:400;opacity:.8}.latest-project>i{font-style:normal;font-size:18px;justify-self:end;transition:transform .3s ease}.latest-project:hover>i{transform:translate(3px,-3px)}

/* Scroll-state transitions, driven by JS */
.hero.is-scrolling .site-header{opacity:.94}
.about{position:relative;z-index:3}

@media (prefers-reduced-motion:reduce){.hero-video,.hero-fallback,.hero-copy,.hero-description{transform:none!important}.hero-line,.hero-kicker,.hero-title-line>span,.hero-description,.latest-project,.site-header{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}


/* =========================================================
   VERSION 2 — LAYOUT MATCH + VARUN COLOUR SYSTEM
   Section 2 matched to supplied Archevo reference.
   ========================================================= */
body{background:#fff}
.section-light{background:#fff;color:var(--ink)}
.section-dark{background:var(--dark);color:#fff}
.menu-panel{background:#fff;color:var(--ink)}
.page-loader{background:var(--dark)}

/* Restrained gold accents */
.text-link:hover,.hero-text-link:hover{color:var(--gold)}
.about-link{color:var(--ink)}
.about-link::first-letter{color:inherit}
.stat-number span{color:var(--gold)}
.eyebrow{color:var(--gold)}
.hero .hero-kicker,.section-dark .eyebrow{color:#fff}

/* ABOUT — exact composition target */
.about{
  padding:58px 0 76px;
  background:#fff;
}
.about .container{
  width:min(calc(100% - 10.4vw),1480px);
  max-width:none;
}
.about-intro .eyebrow{
  margin-bottom:28px;
  color:#171817;
  font:500 16px/1.2 var(--sans);
  letter-spacing:0;
  text-transform:none;
}
.statement{
  max-width:1370px;
  font:500 clamp(43px,3.45vw,58px)/1.04 var(--sans);
  letter-spacing:-.038em;
  color:#171817;
}
.about-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(520px,645px);
  column-gap:clamp(85px,12vw,205px);
  align-items:end;
  margin-top:64px;
}
.about-left{
  display:flex;
  min-width:0;
  min-height:488px;
  flex-direction:column;
  justify-content:flex-end;
}
.about-copy{
  max-width:590px;
  padding:0 0 46px;
}
.about-copy .body-large{
  max-width:575px;
  color:#5e636d;
  font:400 18px/1.55 var(--sans);
  letter-spacing:-.012em;
}
.about-link{
  display:inline-flex;
  margin-top:35px;
  padding-bottom:7px;
  font:400 16px/1 var(--sans);
  border-bottom:1px solid #171817;
}
.stats-panel{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  width:100%;
  margin-top:0;
  padding-top:45px;
  border-top:1px solid #d7d9dc;
}
.stat strong{
  font:400 clamp(52px,4.1vw,68px)/.92 var(--sans);
  letter-spacing:-.055em;
  color:#171817;
}
.stat span{
  margin-left:3px;
  font:500 clamp(18px,1.45vw,24px)/1 var(--sans);
  color:var(--gold);
}
.stat p{
  margin-top:22px;
  color:#5e636d;
  font:400 15px/1.25 var(--sans);
  letter-spacing:-.01em;
}
.about-image{
  width:100%;
  height:488px;
  min-height:0;
  overflow:hidden;
  align-self:end;
}
.about-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.03);
}

/* Give dark sections the approved peacock background */
.services,.contact,.footer-marquee{background:var(--dark)}
.values{background:var(--dark)}
.round-link--large,.contact-form button{border-color:rgba(255,255,255,.9)}

@media(max-width:1100px){
  .about .container{width:calc(100% - 64px)}
  .about-layout{grid-template-columns:1fr;gap:55px;margin-top:55px}
  .about-left{min-height:0;order:1}
  .about-image{order:2;height:58vw;max-height:620px;min-height:470px}
  .about-copy{padding-bottom:42px}
  .stats-panel{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:700px){
  .about{padding:68px 0 72px}
  .about .container{width:calc(100% - 40px)}
  .about-intro .eyebrow{font-size:14px;margin-bottom:22px}
  .statement{font-size:40px;line-height:1.03}
  .about-layout{margin-top:44px;gap:38px}
  .about-copy .body-large{font-size:16px;line-height:1.55}
  .about-copy{padding-bottom:34px}
  .stats-panel{grid-template-columns:repeat(2,1fr);gap:30px 18px;padding-top:30px}
  .stat strong{font-size:47px}.stat p{font-size:13px;margin-top:12px}
  .about-image{height:68vw;min-height:330px}
}


/* =========================================================
   V2 HERO CORRECTIONS — 10 AUG 2026
   Reference alignment: divider geometry, responsive card,
   Inter + Literata typography.
   ========================================================= */
.hero-line--top{top:102px}
.hero-line--middle{
  top:calc(36.5% + 202px);
  z-index:4;
}
.hero-line--vertical{
  left:50%;
  right:auto;
  top:calc(36.5% + 202px);
  bottom:0;
  width:1px;
  height:auto;
  background:rgba(255,255,255,.27);
  transform:scaleY(0);
  transform-origin:top center;
  z-index:4;
}
body.ready .hero-line--vertical{
  animation:heroVerticalIn 1.05s cubic-bezier(.22,.75,.25,1) .72s forwards;
}
@keyframes heroVerticalIn{to{transform:scaleY(1)}}

/* Locked hero type scale requested for Varun Developers */
.hero-title{
  font-family:var(--sans);
  font-size:76px;
  line-height:.95;
  font-weight:500;
  letter-spacing:-.045em;
}
.hero-title em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.035em;
}

/* Give the horizontal divider breathing room below the title. */
.hero-copy{top:36.5%}
.hero-title-line{padding-bottom:.055em}

/* Keep the latest-project module available across breakpoints. */
@media(max-width:1000px){
  .hero-title{font-size:68px}
  .hero-line--middle,.hero-line--vertical{top:calc(34% + 190px)}
}
@media(max-width:700px){
  .hero-copy{top:24.5%}
  .hero-title{font-size:52px;line-height:.96;letter-spacing:-.045em}
  .hero-line--middle,.hero-line--vertical{top:calc(24.5% + 170px)}
  .hero-line--vertical{left:50%}
  .hero-description{bottom:174px;width:calc(100% - 40px)}
  .hero-description p{font-size:13px;line-height:1.45;max-width:265px}
  .hero-text-link{margin-top:18px}
  .latest-project{
    display:grid;
    left:20px;
    right:20px;
    bottom:20px;
    width:auto;
    min-width:0;
    height:126px;
    padding:8px;
    grid-template-columns:112px 1fr 22px;
    gap:12px;
  }
  .latest-project__copy>span{font-size:14px}
  .latest-project__copy strong{font-size:15px}
  .latest-project__copy b{font-size:14px}
}
@media(max-width:430px){
  .hero-copy{top:23%}
  .hero-title{font-size:48px}
  .hero-line--middle,.hero-line--vertical{top:calc(23% + 160px)}
  .hero-description{bottom:164px}
  .latest-project{height:116px;grid-template-columns:100px 1fr 20px}
}

/* =========================================================
   HEADER FINAL REFINEMENT — 10 AUG 2026
   Larger brand mark + non-sticky navigation.
   ========================================================= */
.site-header{
  position:absolute;
}
.brand{
  width:230px;
  height:64px;
}


/* =========================================================
   SECTION 2 FINAL REFINEMENTS — 10 AUG 2026
   ========================================================= */
.statement-serif{font-family:var(--serif);font-weight:400;letter-spacing:-.025em}
.about-copy{padding-bottom:54px}
.stats-panel{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  align-items:start;
}
.stat{
  min-width:0;
  padding-right:24px;
}
.stat:not(:first-child){padding-left:24px}
.stat-number{
  min-height:68px;
  align-items:flex-start;
}
.stat strong,.stat span{color:var(--gold)}
.stat strong{font-variant-numeric:tabular-nums}
.stat p{
  max-width:120px;
  min-height:38px;
  margin-top:18px;
}
@media(min-width:1101px){
  .stats-panel .stat{border-right:1px solid transparent}
}
@media(max-width:1100px){
  .stat{padding-right:14px}
  .stat:not(:first-child){padding-left:14px}
}
@media(max-width:700px){
  .stat{padding:0!important}
  .stat p{max-width:none;min-height:0}
}

/* =========================================================
   SECTION 2 — IMAGE SCALE + EVEN CREDIBILITY GRID
   ========================================================= */
@media (min-width:1101px){
  .about-layout{
    grid-template-columns:minmax(0,1fr) 452px;
    column-gap:clamp(90px,9vw,150px);
    align-items:end;
  }
  .about-image{
    width:452px;
    height:342px;
    justify-self:end;
  }
  .stats-panel{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    width:100%;
    align-items:start;
  }
  .stats-panel .stat,
  .stats-panel .stat:not(:first-child){
    padding:0;
    min-width:0;
  }
  .stat-number{
    min-height:68px;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    white-space:nowrap;
  }
  .stat p{
    max-width:112px;
    min-height:38px;
    margin-top:18px;
  }
}

/* =========================================================
   SECTION 2 — SPACING + MOBILE STAT GROUPING + NUMBER MOTION
   ========================================================= */
@media (min-width:1101px){
  .about-layout{margin-top:34px;}
  .about-copy{padding-top:0;}
}

.stat-number{
  transform-origin:left bottom;
}
.stat.is-visible .stat-number{
  animation:credibilityNumberIn .62s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes credibilityNumberIn{
  from{opacity:0;transform:translateY(12px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media (max-width:700px){
  .stats-panel{
    row-gap:22px;
  }
  .stat{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .stat-number{
    min-height:0;
    line-height:1;
  }
  .stat p{
    margin-top:5px!important;
    line-height:1.2;
  }
}

@media (prefers-reduced-motion:reduce){
  .stat.is-visible .stat-number{animation:none}
}

/* =========================================================
   SECTION 2 — DESKTOP VERTICAL GAP CORRECTION
   The previous 488px minimum height on the left column was
   forcing the copy/stat block too far below the heading.
   ========================================================= */
@media (min-width:1101px){
  .about-layout{margin-top:24px;align-items:end;}
  .about-left{min-height:342px;}
  .about-copy{padding-bottom:32px;}
  .stats-panel{padding-top:34px;}
}

/* V2 — Archevo-style Featured Projects scroll stack */
@media (min-width:1001px){
  .projects{padding-top:120px;overflow:clip;background:#fff}
  .projects-head{position:relative;z-index:10;padding-bottom:56px}
  .project-stack{position:relative;isolation:isolate;padding-left:100px;padding-right:100px}
  .project-card.sticky-project{
    position:sticky;
    top:0;
    min-height:100svh;
    height:100svh;
    padding:64px var(--pad) 44px;
    grid-template-columns:minmax(320px,35%) minmax(0,1fr);
    grid-template-rows:auto 1fr;
    gap:32px 5.2vw;
    transform-origin:50% 0%;
    will-change:transform,filter,opacity;
    overflow:hidden;
  }
  .project-card.sticky-project:nth-child(1){z-index:1}
  .project-card.sticky-project:nth-child(2){z-index:2}
  .project-card.sticky-project:nth-child(3){z-index:3}
  .project-card.sticky-project:nth-child(4){z-index:4}
  .project-card.sticky-project:nth-child(5){z-index:5}
  .project-card .project-meta{height:auto;min-height:0;will-change:transform}
  .project-card .project-image{height:100%;min-height:100%;clip-path:none;will-change:transform}
  .project-card .project-image img{transform:scale(1.12);will-change:transform;transition:none}
  .project-card.is-project-active .project-image{clip-path:inset(0% 0% 0% 0%)}
  .project-card.is-project-active .project-image img{transform:scale(1)}
  .project-card .project-meta{opacity:.18;transform:translate3d(0,54px,0)}
    .project-card.is-project-active .project-meta,
  }

/* =========================================================
   SECTION 4 — ARCHEVO-STYLE FULL-BLEED FEATURED PROJECTS
   Full horizontal project image with all project content layered on image.
   ========================================================= */
.projects{
  padding:140px 0 0;
  background:#fff;
}
.projects-head{
  padding-bottom:54px;
}
.project-stack{
  position:relative;
  width:100%;
}
.project-card{
  position:relative;
  width:100%;
  min-height:100svh;
  padding:0;
  display:block;
  overflow:hidden;
  border-top:0;
  background:#111;
  color:#fff;
  isolation:isolate;
}
.project-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.38) 100%),
    linear-gradient(90deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.04) 62%,rgba(0,0,0,.18) 100%);
}
.project-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  z-index:1;
  grid-column:auto;
  grid-row:auto;
  background:#222;
  will-change:clip-path;
}
.project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.08);
  will-change:transform;
}
.project-meta{
  position:absolute;
  z-index:3;
  left:var(--pad);
  right:var(--pad);
  bottom:92px;
  display:grid;
  grid-template-columns:90px minmax(0,760px);
  align-items:end;
  gap:24px;
  color:#fff;
  text-shadow:0 1px 16px rgba(0,0,0,.25);
}
.project-meta>span{
  align-self:start;
  padding-top:12px;
  font:500 13px/1 var(--sans);
  letter-spacing:.08em;
}
.project-meta h3{
  max-width:900px;
  font:500 clamp(58px,7.1vw,122px)/.88 var(--sans);
  letter-spacing:-.055em;
  color:#fff;
}
.project-meta p{
  max-width:540px;
  margin:26px 0 20px;
  font:400 clamp(15px,1.2vw,19px)/1.5 var(--sans);
  color:rgba(255,255,255,.88);
  text-shadow:none;
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tags i{
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.08);
  backdrop-filter:blur(5px);
  font:500 10px/1 var(--sans);
  letter-spacing:.06em;
}
.sticky-project{
  position:sticky;
  top:0;
}
.project-card:nth-child(n){background:#111}
.project-card.is-project-active .project-image img{
  filter:saturate(1.02) contrast(1.01);
}

@media (min-width:1001px){
  .projects .project-stack{box-sizing:border-box;padding-left:100px;padding-right:100px;}
  .projects .project-card.sticky-project{width:100%;border-radius:0;}
}


/* =========================================================
   SECTION 4 — INTRO + PROJECT YEAR BADGE
   Matches the Archevo composition: large philosophy statement above
   the Featured Projects header, year badge on top of each image.
   ========================================================= */
.projects-intro{
  padding-top:0;
  padding-bottom:96px;
}
.projects-intro-title{
  margin:0;
  max-width:1500px;
  font:500 clamp(48px,4.55vw,86px)/1.06 var(--sans);
  letter-spacing:-.045em;
  color:#111;
}
.projects-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:28px;
  margin-bottom:28px;
}
.projects-head .eyebrow,
.projects-head .text-link{margin:0;}
.project-year-badge{
  position:absolute;
  z-index:5;
  left:30px;
  top:30px;
  min-width:82px;
  padding:13px 16px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;
  font:600 16px/1 var(--sans);
  letter-spacing:.02em;
  text-align:center;
}
.project-meta{
  grid-template-columns:minmax(0,760px);
}

/* =========================================================
   SECTION 4 — PROJECT TITLE TYPOGRAPHY + TEXT POSITION
   Literata italic project names and a 100px higher content block.
   ========================================================= */
.project-meta h3{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:400 !important;
}
@media (min-width:1001px){
  .project-meta{bottom:192px;}
}

/* =========================================================
   SECTION 4 — FINAL PANEL GEOMETRY FIX
   Prevent legacy sticky-project sizing from shortening the image
   or forcing the text overlay to viewport height.
   ========================================================= */
.projects .project-card.sticky-project{
  box-sizing:border-box;
  padding:0 !important;
  background:#fff;
}
.projects .project-card.sticky-project .project-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  clip-path:none !important;
  background:transparent;
}
.projects .project-card.sticky-project .project-meta{
  height:auto !important;
  min-height:0 !important;
  clip-path:none !important;
}
.projects .project-card.sticky-project .project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* =========================================================
   SECTION 3 — VARUN DEVELOPERS BRAND FILM
   Responsive 16:9 video module with thumbnail + custom play button.
   ========================================================= */
.brand-film{
  padding:110px 0 120px;
  background:#fff;
}
.brand-film__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:48px;
  padding-bottom:34px;
}
.brand-film__head .eyebrow{color:#9C7114;}
.brand-film__note{
  max-width:560px;
  font:400 16px/1.55 var(--sans);
  color:#5c626b;
}
.brand-film__frame{
  position:relative;
  width:min(100% - 200px, 1720px);
  margin:0 auto;
  aspect-ratio:16/9;
  min-height:0;
  overflow:hidden;
  background:#111;
}
.brand-film__frame video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#111;
  z-index:1;
}
.brand-film__poster{
  position:absolute;
  inset:0;
  z-index:3;
  border:0;
  padding:0;
  width:100%;
  height:100%;
  cursor:pointer;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.30)),
    url('../images/Hero Banner-1.jpg') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .35s ease,visibility .35s ease;
}
.brand-film__poster.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.brand-film__play{
  width:88px;
  height:88px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.94);
  display:grid;
  place-items:center;
  box-shadow:0 14px 40px rgba(0,0,0,.18);
  transition:transform .3s ease,background .3s ease;
}
.brand-film__poster:hover .brand-film__play{transform:scale(1.06);background:#fff;}
.brand-film__play::before{
  content:'';
  display:block;
  margin-left:5px;
  width:0;
  height:0;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  border-left:17px solid #002A2C;
}

/* =========================================================
   SECTION 5 — WHY US
   Archevo-inspired editorial list, adapted for Varun.
   ========================================================= */
.why-us{
  padding:135px 0 145px;
  background:#002A2C;
  color:#fff;
}
.why-us__head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:end;
  padding-bottom:76px;
}
.why-us__head .eyebrow{color:#fff;}
.why-us__intro{
  justify-self:end;
  max-width:560px;
  font:400 17px/1.55 var(--sans);
  color:rgba(255,255,255,.68);
}
.why-us__list{border-bottom:1px solid rgba(255,255,255,.24);}
.why-us__row{
  display:grid;
  grid-template-columns:72px minmax(340px,1.1fr) minmax(280px,.75fr);
  gap:44px;
  align-items:center;
  min-height:154px;
  border-top:1px solid rgba(255,255,255,.24);
}
.why-us__number{
  font:500 11px/1 var(--sans);
  letter-spacing:.08em;
  color:#9C7114;
}
.why-us__row h3{
  font:400 clamp(42px,4.1vw,72px)/1 var(--serif);
  font-style:italic;
  letter-spacing:-.035em;
  color:var(--gold);
}
.why-us__row p{
  max-width:500px;
  font:400 15px/1.55 var(--sans);
  color:rgba(255,255,255,.68);
}

@media(max-width:1200px){
  .brand-film__frame{width:calc(100% - 80px);}
}
@media(max-width:1000px){
  .brand-film{padding:90px 0 100px;}
  .brand-film__head{gap:28px;padding-bottom:30px;}
  .brand-film__frame{width:calc(100% - 48px);aspect-ratio:16/9;}
  .brand-film__play{width:74px;height:74px;}
  .why-us{padding:110px 0 120px;}
  .why-us__head{grid-template-columns:1fr;gap:28px;padding-bottom:58px;}
  .why-us__intro{justify-self:start;}
  .why-us__row{grid-template-columns:52px 1fr;gap:10px 24px;padding:28px 0;}
  .why-us__row p{grid-column:2;font-size:14px;max-width:620px;}
}
@media(max-width:700px){
  .brand-film{padding:74px 0 84px;}
  .brand-film__head{display:block;padding-bottom:24px;}
  .brand-film__note{margin-top:14px;font-size:14px;max-width:330px;}
  .brand-film__frame{width:calc(100% - 28px);aspect-ratio:16/9;}
  .brand-film__play{width:60px;height:60px;}
  .brand-film__play::before{border-top-width:8px;border-bottom-width:8px;border-left-width:13px;}
  .why-us{padding:88px 0 94px;}
  .why-us__head{padding-bottom:44px;}
  .why-us__row{grid-template-columns:34px 1fr;gap:8px 14px;padding:25px 0;min-height:0;}
  .why-us__row h3{font-size:clamp(34px,10vw,48px);line-height:.98;}
  .why-us__row p{grid-column:2;font-size:13px;line-height:1.5;padding-top:5px;}
}


/* =========================================================
   OUR VALUES — ARCHEVO-STYLE STICKY SCROLL
   Why Us above remains untouched.
   ========================================================= */
.values{
  height:500vh;
  position:relative;
  padding:0;
  background:#002A2C;
  color:#fff;
}
.values-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.values-grid{
  display:grid;
  grid-template-columns:38% 62%;
  height:82vh;
  align-items:stretch;
}
.values-copy{
  display:flex;
  flex-direction:column;
  padding-right:5vw;
  min-width:0;
}
.values-copy .eyebrow{color:#fff;}
.values-copy h2{
  font:400 clamp(34px,3.45vw,60px)/1.05 var(--serif);
  letter-spacing:-.03em;
  margin-top:auto;
  margin-bottom:42px;
  color:#fff;
}
.values-items{
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid rgba(255,255,255,.24);
}
.values-items li{
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:center;
  gap:10px;
  padding:17px 0;
  border-bottom:1px solid rgba(255,255,255,.24);
  opacity:.34;
  transition:opacity .42s ease,padding-left .42s ease;
}
.values-items li span{
  font:500 11px/1 var(--sans);
  letter-spacing:.08em;
  color:#9C7114;
}
.values-items li strong{
  font:400 clamp(20px,1.5vw,28px)/1.08 var(--serif);
  font-style:italic;
  color:#fff;
}
.values-items li.active{opacity:1;padding-left:15px;}
.values-items li.active strong{color:#9C7114;}
.values-copy small{
  margin-top:18px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:rgba(255,255,255,.68);
}
.values-stage{position:relative;overflow:hidden;background:#111;}
.value-image{position:absolute;overflow:hidden;will-change:transform,opacity;}
.value-image img{width:100%;height:100%;object-fit:cover;display:block;}
.value-main{inset:0;}
.v1{width:38%;height:38%;left:5%;top:6%;}
.v2{width:34%;height:45%;right:4%;top:10%;}
.v3{width:42%;height:40%;left:28%;bottom:4%;}
.v4{width:29%;height:34%;left:1%;bottom:2%;}
.v5{width:33%;height:35%;right:1%;bottom:1%;}
.v6{width:28%;height:30%;right:27%;top:30%;}
.value-image:not(.value-main){opacity:0;transform:translateY(80px) scale(.92);}

@media(max-width:1000px){
  .values{height:440vh;}
  .values-grid{grid-template-columns:42% 58%;height:84vh;}
  .values-copy{padding-right:28px;}
  .values-copy h2{font-size:clamp(28px,4vw,42px);margin-bottom:28px;}
  .values-items li strong{font-size:clamp(18px,2.4vw,24px);}
}
@media(max-width:700px){
  .values{height:430vh;}
  .values-sticky{align-items:flex-start;padding-top:54px;}
  .values-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:calc(100vh - 70px);gap:22px;}
  .values-copy{padding-right:0;}
  .values-copy h2{margin-top:18px;margin-bottom:18px;font-size:clamp(25px,7.2vw,36px);}
  .values-items li{padding:12px 0;grid-template-columns:34px 1fr;}
  .values-items li.active{padding-left:8px;}
  .values-items li strong{font-size:clamp(18px,5.4vw,24px);}
  .values-copy small{display:none;}
  .values-stage{min-height:0;}
  .v1{width:45%;height:38%;left:4%;top:5%;}
  .v2{width:40%;height:42%;right:3%;top:9%;}
  .v3{width:48%;height:36%;left:24%;bottom:3%;}
  .v4{width:34%;height:31%;left:2%;bottom:1%;}
  .v5{width:37%;height:32%;right:1%;bottom:1%;}
  .v6{width:33%;height:28%;right:25%;top:33%;}
}

/* =========================================================
   OUR VALUES V3 — three-column scroll choreography
   Left stack moves down + right stack moves up + centre expands
   ========================================================= */
.values{
  height:560vh;
  position:relative;
  padding:0!important;
  background:#fff;
  color:#111;
}
.values-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:#fff;
  display:block;
  padding:0;
}
.values-label{
  position:absolute;
  z-index:30;
  top:34px;
  left:50%;
  transform:translateX(-50%);
  height:55px;
  display:flex;
  align-items:flex-start;
  border-bottom:1px solid #c9c9c9;
  width:min(100% - (var(--pad)*2),1500px);
  transition:opacity .25s ease;
}
.values-label .eyebrow{
  color:#111;
  text-transform:none;
  letter-spacing:0;
  font-size:16px;
}
.values-collage{
  position:absolute;
  inset:90px 0 0;
  z-index:2;
  overflow:hidden;
  background:#fff;
}
.value-image{
  margin:0;
  overflow:hidden;
}
.value-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.values-side{
  position:absolute;
  top:0;
  bottom:0;
  width:28%;
  z-index:4;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:3vh 0;
  will-change:transform,opacity;
}
.values-side--left{left:6.2%;}
.values-side--right{right:6.2%;}
.values-side .value-side-image{
  position:relative;
  width:100%;
  height:31%;
  flex:0 0 auto;
  will-change:transform,opacity;
}
.values-side--left .value-side-image:first-child{height:27%;}
.values-side--left .value-side-image:last-child{height:35%;}
.values-side--right .value-side-image:first-child{height:38%;}
.values-side--right .value-side-image:last-child{height:29%;}
.value-main{
  position:absolute;
  z-index:8;
  left:39.5%;
  top:20%;
  width:21%;
  height:58%;
  will-change:left,top,width,height,transform;
}
.values-darkness{
  position:absolute;
  z-index:10;
  inset:90px 0 0;
  background:rgba(4,7,7,0);
  pointer-events:none;
  will-change:background;
}
.values-content{
  position:absolute;
  z-index:12;
  inset:90px 0 0;
  color:#fff;
  pointer-events:none;
}
.values-statement{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-42%);
  width:min(850px,72vw);
  margin:0;
  text-align:center;
  font:600 clamp(30px,2.65vw,50px)/1.32 var(--sans);
  letter-spacing:-.035em;
  opacity:0;
  will-change:opacity,transform;
}
.values-sequence{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.value-line{
  position:absolute;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  width:min(900px,86vw);
  opacity:0;
  transform:translateY(38px);
  font-family:var(--sans);
  font-weight:600;
  will-change:opacity,transform;
}
.value-line span,.value-line strong{
  font-size:clamp(30px,3vw,54px);
  line-height:1.05;
  letter-spacing:-.04em;
}
.value-line strong{font-weight:600;}
.values-scroll{
  position:absolute;
  right:var(--pad);
  bottom:34px;
  font:500 16px/1 var(--sans);
  opacity:0;
  will-change:opacity;
}

@media(max-width:900px){
  .values-side{width:31%;}
  .values-side--left{left:3.5%;}
  .values-side--right{right:3.5%;}
  .value-main{left:38%;width:24%;top:20%;height:58%;}
}

@media(max-width:700px){
  .values{height:520vh;}
  .values-label{top:20px;height:48px;}
  .values-label .eyebrow{font-size:13px;}
  .values-collage,.values-darkness,.values-content{top:70px;}
  .values-side{width:34%;padding:2.5vh 0;}
  .values-side--left{left:3%;}
  .values-side--right{right:3%;}
  .values-side--left .value-side-image:first-child{height:25%;}
  .values-side--left .value-side-image:last-child{height:32%;}
  .values-side--right .value-side-image:first-child{height:34%;}
  .values-side--right .value-side-image:last-child{height:27%;}
  .value-main{left:30%;top:22%;width:40%;height:54%;}
  .values-statement{width:84vw;font-size:clamp(25px,7vw,34px);line-height:1.28;}
  .value-line{width:90vw;gap:7px;flex-wrap:wrap;}
  .value-line span,.value-line strong{font-size:clamp(25px,7vw,36px);}
  .values-scroll{right:20px;bottom:24px;font-size:13px;}
}


/* =========================================================
   OUR VALUES — VARUN LOGO MASK SCROLL EXPERIENCE V2
   Inline SVG guarantees the mask works from file:// and web.
   ========================================================= */
.values.values-logo-mask{
  position:relative;
  height:440vh;
  background:#fff;
  overflow:visible;
}
.values-logo-mask .values-sticky{
  position:sticky;
  top:0;
  width:100%;
  height:100svh;
  min-height:620px;
  overflow:hidden;
  background:#fff;
  display:block;
}
.values-logo-mask .values-label{
  position:absolute;
  z-index:40;
  top:0;
  left:0;
  width:100%;
  height:96px;
  display:flex;
  align-items:center;
  border-bottom:1px solid rgba(0,42,44,.20);
  pointer-events:none;
  opacity:1;
}
.values-logo-mask .values-label .eyebrow{
  display:block;
  margin:0 auto;
  width:min(calc(100% - (var(--pad) * 2)),var(--max));
  color:#111;
  font-family:var(--sans);
  font-size:16px;
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
}
.values-logo-mask .values-full-image{
  position:absolute;
  z-index:2;
  inset:0;
  opacity:0;
  overflow:hidden;
  will-change:opacity;
}
.values-logo-mask .values-full-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.015);
}
.values-logo-mask .values-logo-stage{
  position:absolute;
  z-index:8;
  left:50%;
  top:54%;
  width:clamp(235px,20vw,365px);
  aspect-ratio:405 / 592;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
  opacity:1;
  visibility:visible;
  will-change:transform,opacity;
}
.values-logo-mask .values-logo-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.values-logo-mask .values-logo-photo{
  opacity:1;
}
.values-logo-mask .values-darkness{
  position:absolute;
  z-index:10;
  inset:0;
  background:rgba(4,7,7,0);
  pointer-events:none;
  will-change:background;
}
.values-logo-mask .values-content{
  position:absolute;
  z-index:12;
  inset:0;
  color:#fff;
  pointer-events:none;
}
.values-logo-mask .values-statement{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-46%);
  width:min(900px,76vw);
  margin:0;
  text-align:center;
  font:600 clamp(30px,2.7vw,52px)/1.30 var(--sans);
  letter-spacing:-.035em;
  opacity:0;
  will-change:opacity,transform;
}
.values-logo-mask .values-sequence{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.values-logo-mask .value-line{
  position:absolute;
  width:min(920px,88vw);
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:12px;
  opacity:0;
  transform:translateY(34px);
  font-family:var(--sans);
  font-weight:600;
  text-align:center;
  will-change:opacity,transform;
}
.values-logo-mask .value-line span,
.values-logo-mask .value-line strong{
  font-size:clamp(31px,3.1vw,56px);
  line-height:1.04;
  letter-spacing:-.04em;
}
.values-logo-mask .value-line strong{font-weight:600;}
.values-logo-mask .values-scroll{
  position:absolute;
  right:var(--pad);
  bottom:34px;
  font:500 16px/1 var(--sans);
  opacity:0;
  will-change:opacity;
}
@media(max-width:700px){
  .values.values-logo-mask{height:470vh;}
  .values-logo-mask .values-sticky{min-height:560px;}
  .values-logo-mask .values-label{height:72px;}
  .values-logo-mask .values-label .eyebrow{font-size:14px;}
  .values-logo-mask .values-logo-stage{
    top:52%;
    width:clamp(195px,48vw,255px);
  }
  .values-logo-mask .values-statement{
    width:88vw;
    font-size:clamp(24px,7vw,34px);
    line-height:1.28;
  }
  .values-logo-mask .value-line{
    width:90vw;
    gap:7px;
    flex-wrap:wrap;
  }
  .values-logo-mask .value-line span,
  .values-logo-mask .value-line strong{
    font-size:clamp(25px,7vw,37px);
  }
  .values-logo-mask .values-scroll{
    right:20px;
    bottom:24px;
    font-size:13px;
  }
}

/* Our Values header — matched to Varun Developers Film header */
.values-logo-mask .values-label{
  height:auto;
  min-height:128px;
  padding:0 var(--pad) 34px;
  align-items:flex-end;
  justify-content:space-between;
  gap:48px;
  border-bottom:1px solid rgba(0,42,44,.20);
}
.values-logo-mask .values-label .eyebrow{
  width:auto; margin:0; color:#9C7114;
  text-transform:uppercase; letter-spacing:.14em;
  font-size:14px; font-weight:500;
}
.values-label__note{
  margin:0; max-width:560px;
  font:400 16px/1.55 var(--sans);
  color:#5c626b;
}
@media(max-width:767px){
  .values-logo-mask .values-label{display:block;min-height:0;padding:28px var(--pad) 24px;}
  .values-label__note{margin-top:14px;font-size:14px;max-width:330px;}
}


/* Our Values header lock — dedicated classes to avoid generic eyebrow overrides */
.values-logo-mask .values-label{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  padding:0 var(--pad) 34px !important;
  min-height:128px !important;
  width:100% !important;
  left:0 !important;
  transform:none !important;
}
.values-label__title{
  display:block !important;
  flex:0 0 auto;
  margin:0 !important;
  color:#9C7114 !important;
  font:500 14px/1.2 var(--sans) !important;
  text-transform:uppercase !important;
  letter-spacing:.14em !important;
  opacity:1 !important;
  visibility:visible !important;
}
.values-label__note{
  flex:0 1 560px;
  margin:0 !important;
  color:#5c626b !important;
  font:400 16px/1.55 var(--sans) !important;
}
@media(max-width:767px){
  .values-logo-mask .values-label{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start !important;
    gap:12px;
    padding:24px var(--pad) 20px !important;
    min-height:0 !important;
  }
  .values-label__title{font-size:13px !important;}
  .values-label__note{flex:none;max-width:330px;font-size:14px !important;}
}


/* Our Values tagline */
.values-logo-mask .values-tagline{
  position:absolute;
  z-index:13;
  left:50%;
  top:50%; /* JS positions this precisely 14px below the logo */
  width:min(1000px,88vw);
  transform:translate(-50%,-50%) scale(1);
  text-align:center;
  color:#9C7114;
  font:italic 400 clamp(42px,4.5vw,78px)/1.02 var(--serif);
  letter-spacing:-.025em;
  opacity:1;
  visibility:visible;
  will-change:opacity,transform;
}
@media(max-width:700px){
  .values-logo-mask .values-tagline{
    top:50%; /* JS positions this precisely below the responsive logo */
    width:90vw;
    font-size:clamp(30px,8.8vw,46px);
    line-height:1.06;
  }
}

/* =========================================================
   OUR TEAM — Archevo-inspired editorial carousel
   ========================================================= */
.team{padding:28px 0 100px;overflow:hidden;background:#fff;color:var(--ink)}
.team-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:30px;margin-bottom:26px}
.team .eyebrow{margin:0;font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink)}
.team-controls{display:flex;align-items:center;gap:18px}
.team-arrow{appearance:none;border:0;background:transparent;color:var(--ink);font:34px/1 var(--sans);font-weight:300;padding:4px 3px;cursor:pointer;transition:transform .25s ease,opacity .25s ease}
.team-arrow:hover{transform:translateX(-3px)}
.team-arrow#teamNext:hover{transform:translateX(3px)}
.team-arrow:disabled{opacity:.25;cursor:default;transform:none!important}
.team-viewport{overflow:hidden}
.team-track{display:flex;gap:26px;width:max-content;transform:translate3d(0,0,0);transition:transform .72s cubic-bezier(.2,.74,.25,1);will-change:transform}
.team-card{position:relative;width:calc((min(100vw - (var(--pad) * 2), 1600px) - 52px)/3);min-width:0;flex:0 0 auto;overflow:hidden;background:#ddd}
.team-card figure{height:clamp(500px,58vw,690px);max-height:690px;min-height:520px;overflow:hidden;margin:0;background:#d7d7d7}
.team-card figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transform:scale(1.01);transition:transform .8s cubic-bezier(.2,.74,.25,1),filter .45s ease}
.team-card:hover figure img{transform:scale(1.045);filter:grayscale(.72)}
.team-card__meta{position:absolute;left:18px;right:18px;bottom:18px;min-height:110px;padding:20px 20px 17px;background:linear-gradient(90deg,rgba(42,42,42,.86),rgba(62,62,62,.65));color:#fff;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);display:flex;flex-direction:column;justify-content:center}
.team-card__meta h4{font:600 clamp(22px,1.8vw,31px)/1.1 var(--sans);margin:0;letter-spacing:-.025em}
.team-card__meta p{font:clamp(13px,1.05vw,17px)/1.35 var(--sans);margin:12px 0 0;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.92)}

/* Full-screen navigation overlay — Varun Developers */
.menu-panel{
  z-index:220;
  background:#fff;
  color:var(--ink);
}
.menu-panel__header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:118px;
  padding:28px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(0,42,44,.14);
  z-index:2;
}
.menu-panel__brand{
  display:block;
  width:185px;
  line-height:0;
}
.menu-panel__brand img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:none !important;
}
.menu-close{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  padding:10px 46px 10px 10px;
  border:0;
  background:transparent;
  color:#002A2C;
  font:500 18px/1 var(--sans);
  cursor:pointer;
}
.menu-close i{
  position:absolute;
  right:0;
  top:50%;
  width:28px;
  height:1.8px;
  background:#002A2C;
  transform-origin:center;
}
.menu-close i:first-of-type{transform:translateY(-50%) rotate(45deg)}
.menu-close i:last-of-type{transform:translateY(-50%) rotate(-45deg)}
.menu-panel__inner{
  height:100%;
  padding:150px var(--pad) 48px;
  display:flex;
  align-items:flex-end;
}
.menu-panel nav{width:100%}
.menu-panel a{
  grid-template-columns:80px 1fr;
  border-top:1px solid rgba(0,42,44,.22);
}
.menu-panel nav a:last-child{border-bottom:1px solid rgba(0,42,44,.22)}
.menu-panel a span{
  color:#9C7114;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
}
.menu-panel a em{
  color:#002A2C;
  opacity:.85;
}
.menu-panel a:hover span{color:#002A2C}
body.menu-open .site-header{visibility:hidden}

@media (max-width:700px){
  .menu-panel__header{height:94px;padding:20px var(--pad)}
  .menu-panel__brand{width:142px}
  .menu-close{font-size:16px;padding-right:38px;gap:12px}
  .menu-close i{width:24px}
  .menu-panel__inner{padding:120px var(--pad) 34px;align-items:center}
  .menu-panel a{grid-template-columns:44px 1fr;padding:16px 0}
  .menu-panel a span{font-size:clamp(48px,14vw,72px);line-height:.94}
}

/* Menu overlay logo refinement */
.menu-panel__header{border-bottom:0 !important}
.menu-panel__brand{width:370px}
@media (max-width:700px){.menu-panel__brand{width:284px}}

/* Menu overlay: no divider above the first menu item */
.menu-panel nav a:first-child{border-top:0 !important}


/* =========================================================
   MENU OVERLAY — final brand/link scoping fix
   The generic .menu-panel a rule also targeted the logo anchor,
   which created the grey line and constrained the logo.
   ========================================================= */
.menu-panel__brand{
  display:block !important;
  width:370px !important;
  max-width:min(370px,42vw) !important;
  padding:0 !important;
  border:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  grid-template-columns:none !important;
  align-items:initial !important;
  line-height:0 !important;
}
.menu-panel__brand img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:none !important;
}
.menu-panel__header{border:0 !important;border-bottom:0 !important;}
.menu-panel nav a{
  display:grid;
  grid-template-columns:80px 1fr;
  border-top:1px solid rgba(0,42,44,.22);
  padding:13px 0;
  align-items:center;
}
.menu-panel nav a:first-child{border-top:0 !important;}
@media (max-width:700px){
  .menu-panel__brand{width:284px !important;max-width:62vw !important;}
  .menu-panel nav a{grid-template-columns:44px 1fr;padding:16px 0;}
}

/* Menu overlay logo crop fix — preserve approved logo scale */
.menu-panel__header{
  height:190px !important;
  padding:26px var(--pad) 18px !important;
  align-items:flex-start !important;
  overflow:visible !important;
}
.menu-panel__brand{
  width:370px !important;
  flex:0 0 auto;
  overflow:visible !important;
}
.menu-panel__brand img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left top !important;
  overflow:visible !important;
}
.menu-close{margin-top:8px}
.menu-panel__inner{padding-top:205px !important}

@media (max-width:700px){
  .menu-panel__header{
    height:160px !important;
    padding:18px var(--pad) 12px !important;
  }
  .menu-panel__brand{width:284px !important}
  .menu-close{margin-top:6px}
  .menu-panel__inner{padding-top:170px !important}
}

/* 2026-08-11 menu logo + projects hero refinement */
.menu-panel__brand{
  width:185px !important;
  max-width:36vw !important;
}
@media (max-width:700px){
  .menu-panel__brand{
    width:142px !important;
    max-width:42vw !important;
  }
}

/* Branded page preloader */
.page-loader__logo{width:110px;height:auto;display:block;object-fit:contain;filter:none;}
@media (max-width:768px){.page-loader__logo{width:82px;}}