/* =========================================================
   Sanjana.motion — editorial portfolio
   ========================================================= */

/* self-hosted brand faces — swap the file references if the fonts move */
@font-face{
  font-family:"Gilroy";
  src:url("assets/fonts/Gilroy-Light.otf") format("opentype"),
      local("Gilroy Light");
  font-style:normal;font-weight:300;font-display:swap;
}
@font-face{
  font-family:"Gilroy";
  src:url("assets/fonts/Gilroy-Regular.ttf") format("truetype"),
      local("Gilroy");
  font-style:normal;font-weight:400;font-display:swap;
}
@font-face{
  font-family:"Gilroy";
  src:url("assets/fonts/Gilroy-RegularItalic.ttf") format("truetype"),
      local("Gilroy Italic");
  font-style:italic;font-weight:400;font-display:swap;
}
@font-face{
  font-family:"Gilroy";
  src:url("assets/fonts/Gilroy-SemiBold.ttf") format("truetype"),
      local("Gilroy SemiBold");
  font-style:normal;font-weight:600;font-display:swap;
}
@font-face{
  font-family:"Kalieb Luxury";
  src:url("assets/fonts/KaliebLuxury-Regular.woff") format("woff"),
      local("Kalieb Luxury");
  font-style:normal;font-weight:400;font-display:swap;
}
@font-face{
  font-family:"Kalieb Luxury";
  src:url("assets/fonts/KaliebLuxury-Italic.woff") format("woff"),
      local("Kalieb Luxury Italic");
  font-style:italic;font-weight:400;font-display:swap;
}

:root{
  --cream:#F8F8F2;
  --paper:#F5F5EE;
  --text:#252525;
  --muted:#77766F;
  --line:#BDBDB4;
  --hair:rgba(37,37,37,.13);
  --peach:#FFDCA5;
  --band:#FFE0AA;
  --orange:#FF7A20;
  --accent:#BE2875;
  --white:#FFFFFF;

  --shell:960px;
  --pad:clamp(20px, 6vw, 120px);

  --serif:"Cormorant Garamond", "Kalieb Luxury", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:"Gilroy", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --t:.55s var(--ease);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;}
[hidden]{display:none !important;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,p,figure,blockquote{margin:0;}
::selection{background:var(--peach);color:var(--text);}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--text);color:var(--cream);padding:10px 16px;font-size:11px;
}
.skip:focus{left:12px;top:12px;}

:focus-visible{outline:1px solid var(--accent);outline-offset:4px;}

/* ---------- layout ---------- */
.shell{
  width:100%;
  max-width:calc(var(--shell) + var(--pad) * 2);
  margin:0 auto;
  padding-inline:var(--pad);
}
.section{padding:clamp(72px,11vw,140px) 0 0;}
.section--tight{padding-top:clamp(48px,7vw,86px);}
.section--quiet{padding-bottom:clamp(20px,4vw,50px);}
.rule{height:1px;background:var(--hair);width:100%;}
.center{display:flex;justify-content:center;}

/* ---------- typography ---------- */
.display{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.005em;
  line-height:1.1;
  color:var(--text);
}
.display em{font-style:italic;font-weight:300;}
.display--lg{font-size:clamp(32px,4.6vw,52px);line-height:1.12;}
.display--md{font-size:clamp(28px,3.4vw,38px);}
.display--sm{font-size:clamp(22px,2.7vw,29px);line-height:1.32;}
.display--quote{font-size:clamp(22px,3.1vw,34px);line-height:1.34;font-style:italic;text-align:center;}

.label{
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:400;
  padding-top:14px;
}
.star{color:var(--accent);font-size:8px;vertical-align:middle;margin-right:4px;}

.body{font-size:14px;color:var(--muted);line-height:1.8;max-width:46ch;}
.dim{opacity:.45;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 20px;
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text);
  background:transparent;
  transition:background var(--t), color var(--t), border-color var(--t);
  white-space:nowrap;
}
.btn:hover{background:var(--text);border-color:var(--text);color:var(--cream);}
.btn--ghost{border-color:transparent;padding-inline:0;}
.btn--ghost:hover{background:transparent;color:var(--accent);}
.btn--tiny{padding:7px 15px;font-size:8.5px;}
.btn--solid{background:var(--white);border-color:rgba(255,255,255,.85);}
.btn--solid:hover{background:var(--text);border-color:var(--text);color:var(--cream);}
.arw{display:inline-block;transition:transform var(--t);}
.btn:hover .arw{transform:translateX(3px);}

/* ---------- nav ---------- */
/* sits at the top of the page and scrolls away — never follows the reader */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:90;
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:16px;
}
.nav__logo img{height:30px;width:auto;}
.nav__cta{display:flex;justify-content:flex-end;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding-top:clamp(92px,10vh,120px);
  min-height:clamp(340px,53vh,505px);
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--hair);

  /* sky plate, veiled so the type stays legible and the section
     dissolves into the cream page below */
  background-image:
    linear-gradient(to bottom,
      rgba(248,248,242,.58) 0%,
      rgba(248,248,242,.14) 34%,
      rgba(248,248,242,.42) 74%,
      var(--cream) 100%),
    url("assets/sky.jpg");
  background-size:cover, cover;
  background-position:center, center 62%;
  background-repeat:no-repeat;
}
.hero__inner{position:relative;z-index:2;}
.hero__copy{max-width:min(68%,680px);padding-bottom:clamp(10px,6vh,60px);}

.hero__title{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(30px,3.9vw,52px);
  line-height:1.16;
  letter-spacing:-.005em;
  display:flex;flex-direction:column;gap:2px;
}
.hero__line{display:block;}
.hero__line--accent{color:var(--accent);}
.hero__arrow{
  font-family:var(--sans);font-style:normal;font-weight:300;
  display:inline-block;margin:0 .12em;
  transform:translateY(-.06em);
}
.hero__status{
  margin-top:clamp(20px,2.6vw,30px);
  font-size:clamp(13px,1.1vw,15px);
  line-height:1.6;color:var(--text);font-weight:300;
}
.hero__status strong{font-weight:600;}

/* the stage tracks the editorial container, so the figure stays beside the
   headline instead of drifting to the far right on wide monitors */
.hero__stage{
  position:absolute;top:0;bottom:0;left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:calc(var(--shell) + var(--pad) * 2);
  pointer-events:none;
}
.hero__art{
  position:absolute;right:calc(var(--pad) * -.25);bottom:0;z-index:1;
  height:min(41vh,364px);
  aspect-ratio:673 / 1165;
  pointer-events:none;
}
.hero__figure{
  position:relative;
  height:100%;width:auto;
  display:block;
  animation:float 11s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

/* ---------- skill ticker ---------- */
.ticker{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--hair);
  background:var(--paper);
  padding-block:clamp(16px,2vw,22px);
}
.ticker__track{
  display:flex;width:max-content;
  animation:tick 44s linear infinite;
}
.ticker:hover .ticker__track{animation-play-state:paused;}
.ticker__group{display:flex;align-items:center;flex:none;}
.ticker__item{
  font-size:clamp(13px,1.35vw,16px);
  color:var(--text);
  white-space:nowrap;
  padding-inline:clamp(16px,2vw,26px);
}
.ticker__star{
  font-size:11px;
  color:var(--accent);
  opacity:.62;
  line-height:1;
}
@keyframes tick{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}

/* ---------- featured ---------- */
.featured{
  --cols:4;
  --gap:20px;
  display:flex;flex-wrap:wrap;justify-content:center;
  align-items:flex-start;
  gap:var(--gap) var(--gap);
  margin:34px 0 clamp(40px,6vw,64px);
}
.card{
  flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  text-align:left;
}
.card__media,.card__cat,.card__name{display:block;}
.card__media{
  position:relative;overflow:hidden;border-radius:8px;background:var(--paper);
  aspect-ratio:9/16;
  transition:transform .5s var(--ease);
}
.card__media img,.card__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease), opacity .5s var(--ease);
}
.card__media video{opacity:0;}
.card.is-playing .card__media video{opacity:1;}
.card:hover .card__media{transform:translateY(-6px);}
.card:hover .card__media img,
.card:hover .card__media video{transform:scale(1.025);}
.card__foot{display:block;margin-top:12px;}
.card__cat{
  font-size:8px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);
  transition:color var(--t);
}
.card:hover .card__cat{color:var(--text);}
.card__name{
  font-family:var(--serif);
  font-size:clamp(14px,1.35vw,17px);line-height:1.3;margin-top:4px;
  transition:color var(--t);
}
.card__arw{opacity:0;transform:translateX(-4px);transition:all var(--t);font-size:13px;}
.card:hover .card__arw{opacity:1;transform:none;}

/* light-on-video typography — shared by the CTA */
.label--band{
  color:rgba(255,255,255,.68);text-align:center;padding-top:0;
}
.label--band .star{color:#FFC98A;}
.display--band{
  color:var(--white);
  font-size:clamp(30px,4.4vw,52px);
  line-height:1.14;text-align:center;
}
.display--band em{
  font-family:"Kalieb Luxury", var(--serif);
  font-style:italic;font-weight:400;
  font-size:1.08em;
}

/* ---------- experience timeline ---------- */
.body--center{margin-top:18px;}

.tl{
  position:relative;
  margin-top:clamp(44px,6vw,72px);
  padding-bottom:6px;
}
.tl::before{
  content:"";position:absolute;left:50%;top:10px;bottom:10px;
  width:1px;background:var(--hair);transform:translateX(-50%);
}
.tl__item{
  position:relative;
  width:calc(50% - 44px);
  margin-bottom:clamp(24px,3.4vw,40px);
}
.tl__item:nth-child(odd){margin-right:auto;text-align:right;}
.tl__item:nth-child(even){margin-left:auto;text-align:left;}
.tl__item:last-child{margin-bottom:0;}

.tl__dot{
  position:absolute;top:30px;
  width:7px;height:7px;border-radius:50%;
  background:var(--text);
  transition:background var(--t), transform var(--t);
}
.tl__item:nth-child(odd) .tl__dot{right:-44px;transform:translateX(50%);}
.tl__item:nth-child(even) .tl__dot{left:-44px;transform:translateX(-50%);}
.tl__item:hover .tl__dot{background:var(--accent);}
.tl__item:nth-child(odd):hover .tl__dot{transform:translateX(50%) scale(1.4);}
.tl__item:nth-child(even):hover .tl__dot{transform:translateX(-50%) scale(1.4);}

.tl__card{
  border:1px solid var(--hair);
  border-radius:10px;
  padding:clamp(18px,2.3vw,26px);
  background:rgba(255,255,255,.42);
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.tl__item:hover .tl__card{
  background:rgba(255,224,170,.32);
  border-color:rgba(37,37,37,.2);
  transform:translateY(-3px);
}
.tl__meta{
  font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.tl__no{color:var(--accent);margin-right:10px;}
.tl__org{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(20px,2.3vw,27px);line-height:1.2;
  margin-top:10px;
}
.tl__role{font-size:12.5px;color:var(--muted);margin-top:5px;}
.tl__points{margin-top:16px;display:flex;flex-direction:column;gap:6px;}
.tl__points li{font-size:13px;line-height:1.6;color:var(--muted);}
.tl__points li::before{content:"— ";}
.tl__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;}
.tl__item:nth-child(odd) .tl__tags{justify-content:flex-end;}
.tl__tags li{
  font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hair);border-radius:999px;padding:4px 10px;
}

/* ---------- expertise ---------- */
.expertise{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,70px);
  margin-top:34px;
}
.expertise__intro .body{margin:18px 0 26px;}
.acc{border-top:1px solid var(--hair);}
.acc:last-child{border-bottom:1px solid var(--hair);}
.acc__head{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:19px 2px;text-align:left;
}
.acc__mark{color:var(--accent);font-size:10px;line-height:1;flex:none;}
.acc__title{
  flex:1;font-size:10px;letter-spacing:.19em;text-transform:uppercase;
  transition:color var(--t);
}
.acc__sign{
  position:relative;width:11px;height:11px;flex:none;opacity:.6;
  transition:transform .5s var(--ease), opacity var(--t);
}
.acc__sign::before,.acc__sign::after{
  content:"";position:absolute;background:var(--text);
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.acc__sign::before{width:11px;height:1px;}
.acc__sign::after{width:1px;height:11px;transition:opacity .4s var(--ease);}
.acc.is-open .acc__sign::after{opacity:0;}
.acc.is-open .acc__sign{transform:rotate(180deg);opacity:1;}
.acc__head:hover .acc__title{color:var(--accent);}
.acc__panel{overflow:hidden;height:0;transition:height .55s var(--ease);}
.acc__inner{padding:0 2px 24px 24px;}
.acc__desc{font-size:13.5px;color:var(--muted);line-height:1.75;max-width:48ch;}
.acc__sub{
  font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text);
  margin:18px 0 8px;
}
.acc__list li{font-family:var(--serif);font-size:16px;line-height:1.65;color:var(--text);}

/* ---------- selected projects ---------- */
.projects{margin-top:clamp(36px,5vw,56px);border-top:1px solid var(--hair);}
.prj{
  position:relative;width:100%;
  display:grid;grid-template-columns:52px 1fr auto 62px 22px;
  align-items:center;gap:16px;
  padding:22px 4px;
  border-bottom:1px solid var(--hair);
  text-align:left;
  transition:padding .5s var(--ease), background .5s var(--ease);
}
.prj:hover{padding-left:14px;padding-right:14px;background:rgba(255,224,170,.28);}
.prj__no{font-size:9px;letter-spacing:.14em;color:var(--muted);transition:color var(--t);}
.prj__title{
  font-family:var(--serif);font-size:clamp(19px,2.4vw,26px);line-height:1.2;
  transition:transform .5s var(--ease);
}
.prj:hover .prj__title{transform:translateX(8px);}
.prj:hover .prj__no{color:var(--accent);}
.prj__cat,.prj__year{
  font-size:8.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);
}
.prj__year{text-align:right;}
.prj__arw{
  font-size:13px;opacity:0;transform:translateX(-6px);
  transition:opacity var(--t), transform var(--t);
  text-align:right;
}
.prj:hover .prj__arw{opacity:1;transform:none;}
.projects__note{
  margin-top:16px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}

/* floating preview */
.peek{
  position:fixed;top:0;left:0;z-index:80;pointer-events:none;
  width:210px;height:262px;
  margin:-131px 0 0 -105px;
  border-radius:8px;overflow:hidden;
  opacity:0;
  transition:opacity .45s var(--ease);
  box-shadow:0 12px 40px rgba(37,37,37,.12);
  background:var(--paper);
}
.peek.is-on{opacity:1;}
.peek__video{
  width:100%;height:100%;object-fit:cover;
  transform:scale(.94);
  transition:transform .5s var(--ease);
}
.peek.is-on .peek__video{transform:none;}

/* ---------- clients ---------- */
.clients{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;
  gap:clamp(26px,5vw,64px);
  margin-top:clamp(26px,4vw,40px);
}
.clients{--ch:clamp(26px,3.2vw,40px);}
.clients img{
  height:var(--ch);width:auto;
  opacity:.45;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
/* optical sizing — the marks carry different amounts of air */
.clients li:nth-child(3) img{height:calc(var(--ch) * .92);}
.clients li:nth-child(4) img{height:calc(var(--ch) * 1.2);}
.clients li:hover img{opacity:1;transform:translateY(-2px);}

/* ---------- about ---------- */
.about{
  display:grid;grid-template-columns:.62fr 1fr;gap:clamp(30px,6vw,72px);
  align-items:center;margin-top:40px;
}
.about__art{
  position:relative;
  width:min(100%,258px);aspect-ratio:1;
  justify-self:center;
}
.about__art img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 0;
  border-radius:50%;
  filter:saturate(.97);
}
.about__glow{
  position:absolute;inset:-16%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,191,109,.55),rgba(255,220,165,0) 68%);
}
.about__copy{padding-bottom:6px;}
.about__copy .body{margin-top:22px;}
.about__copy .btn{margin-top:26px;}

/* ---------- process ---------- */
.process{margin-top:36px;border-top:1px solid var(--hair);}
.step{
  display:grid;grid-template-columns:52px 150px 1fr;align-items:baseline;gap:16px;
  padding:24px 4px;border-bottom:1px solid var(--hair);
  transition:background .5s var(--ease), padding .5s var(--ease);
}
.step:hover{background:rgba(255,224,170,.42);padding-left:14px;}
.step__no{font-size:9px;letter-spacing:.14em;color:var(--muted);}
.step__name{font-size:10px;letter-spacing:.22em;text-transform:uppercase;}
.step__desc{font-family:var(--serif);font-size:19px;color:var(--muted);line-height:1.4;}

/* ---------- testimonial ---------- */
.quote{margin:clamp(40px,6vw,64px) auto 0;max-width:640px;}
.quote__by{
  margin-top:26px;text-align:center;
  font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.is-fading{opacity:0;transition:opacity .35s ease;}
#quoteText,#quoteBy{transition:opacity .45s ease;}
.dots{display:flex;justify-content:center;gap:8px;margin-top:30px;}
.dot{width:5px;height:5px;border-radius:50%;background:var(--line);transition:background var(--t), transform var(--t);}
.dot.is-on{background:var(--text);transform:scale(1.15);}

/* ---------- cta (cinematic video backdrop) ---------- */
.cta{
  position:relative;overflow:hidden;
  margin-top:clamp(80px,12vw,150px);
  min-height:clamp(380px,62vh,580px);
  display:flex;align-items:center;
  padding:clamp(72px,10vw,120px) 0;
  color:var(--white);
  isolation:isolate;
  background:#141410;
}
.cta__video{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
.cta__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(20,20,16,.15) 0%, rgba(20,20,16,.55) 70%, rgba(20,20,16,.78) 100%),
    linear-gradient(to bottom, rgba(20,20,16,.35), rgba(20,20,16,.55));
}
.cta__inner{
  position:relative;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:clamp(26px,4vw,40px);
}
.cta__title{color:var(--white);line-height:1.14;}

/* ---------- footer ---------- */
.footer{background:var(--cream);padding:clamp(52px,7vw,76px) 0 26px;border-top:1px solid var(--hair);}
.footer__cols{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:30px;}
.footer__list{margin-top:16px;display:flex;flex-direction:column;gap:7px;}
.footer__list a{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:color var(--t);
}
.footer__list a:hover{color:var(--accent);}
.footer__mark{margin:clamp(46px,8vw,86px) 0 22px;}
.footer__mark img{width:100%;height:auto;opacity:.95;}
.footer__base{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--hair);padding-top:16px;
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:120;background:var(--cream);
  display:flex;flex-direction:column;
  opacity:0;transition:opacity .45s var(--ease);
}
.lb.is-on{opacity:1;}
.lb[hidden]{display:none;}
.lb__bar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  padding-block:20px 16px;border-bottom:1px solid var(--hair);
}
.lb__title{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.6vw,28px);line-height:1.2;}
.lb__sub{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:6px;}
.lb__tools{display:flex;gap:10px;}
.lb__body{flex:1;overflow-y:auto;padding-block:26px 60px;}
.lb__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:18px;}
.tile{position:relative;border-radius:8px;overflow:hidden;background:var(--paper);aspect-ratio:4/5;width:100%;}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease), opacity .4s var(--ease);}
.tile video{opacity:0;}
.tile.is-playing video{opacity:1;}
.tile:hover img,.tile:hover video{transform:scale(1.03);}
.lb__player{display:flex;align-items:center;justify-content:center;min-height:60vh;}
.lb__player video{
  width:auto;max-width:100%;max-height:74vh;
  border-radius:8px;background:#111;
}

/* ---------- cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:150;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
}
.cursor.is-live{opacity:1;}
.cursor__ring{
  position:absolute;left:32px;top:28px;
  width:56px;height:56px;border-radius:50%;
  background:var(--text);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .5s var(--ease);
}
.cursor__label{font-size:8px;letter-spacing:.18em;text-transform:uppercase;}
.cursor.is-view .cursor__ring{transform:translate(-50%,-50%) scale(1);}
/* the native pointer stays visible — the ring is only a hover hint */
body:not(.has-cursor) .cursor{display:none;}

/* ---------- reveal ---------- */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d,0s);
}
.reveal.is-in{opacity:1;transform:none;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1000px){
  .hero{min-height:clamp(320px,46vh,435px);}
  .hero__copy{max-width:min(66%,560px);}
  .hero__art{height:min(32vh,273px);right:calc(var(--pad) * -.5);}
  .expertise{grid-template-columns:1fr;gap:34px;}
  .about{grid-template-columns:.75fr 1fr;}
}

@media (max-width:820px){
  .featured{--cols:3;--gap:16px;}

  /* timeline collapses to a single rail on the left */
  .tl::before{left:3px;}
  .tl__item,
  .tl__item:nth-child(odd),
  .tl__item:nth-child(even){
    width:100%;margin-left:0;margin-right:0;
    padding-left:34px;text-align:left;
  }
  .tl__item:nth-child(odd) .tl__dot,
  .tl__item:nth-child(even) .tl__dot{left:0;right:auto;transform:none;}
  .tl__item:nth-child(odd):hover .tl__dot,
  .tl__item:nth-child(even):hover .tl__dot{transform:scale(1.4);}
  .tl__item:nth-child(odd) .tl__tags{justify-content:flex-start;}
  .footer__cols{grid-template-columns:1fr 1fr;gap:26px 20px;}
  .step{grid-template-columns:40px 120px 1fr;}
}

@media (max-width:680px){
  body{font-size:14.5px;}
  .nav__inner{gap:12px;padding-block:14px;}
  .nav__logo img{height:26px;}
  .nav__cta .btn{padding:7px 13px;font-size:8.5px;}

  .hero{
    padding-top:92px;min-height:0;padding-bottom:0;
    background-image:
      linear-gradient(to bottom,
        rgba(248,248,242,.62) 0%,
        rgba(248,248,242,.18) 30%,
        rgba(248,248,242,.5) 72%,
        var(--cream) 100%),
      url("assets/sky-sm.jpg");
    background-position:center, center 40%;
  }
  .hero__inner{order:1;}
  .hero__stage{
    order:2;position:static;transform:none;
    max-width:100%;
    padding-inline:var(--pad);
  }
  .hero__copy{max-width:100%;padding-bottom:0;}
  .hero__title{font-size:clamp(25px,7.4vw,34px);}
  .hero__art{
    position:relative;right:auto;bottom:auto;
    height:auto;width:min(70%,270px);
    margin:26px calc(var(--pad) * -.4) 0 auto;
  }
  .hero__figure{width:100%;height:auto;}

  .featured{--cols:2;--gap:14px;justify-content:flex-start;}

  .display--band{font-size:26px;line-height:1.22;}
  .cta{min-height:clamp(340px,60vh,480px);padding:64px 0;}
  .cta__inner{gap:22px;}

  .prj{grid-template-columns:32px 1fr auto;gap:8px 12px;padding:18px 2px;}
  .prj__cat{grid-column:2;grid-row:2;}
  .prj__year{grid-column:3;grid-row:2;}
  .prj__arw{display:none;}
  .prj:hover{padding-left:6px;padding-right:6px;}
  .prj:hover .prj__title{transform:none;}

  .clients{--ch:24px;justify-content:space-between;gap:24px 20px;}

  .about{grid-template-columns:1fr;gap:30px;}
  .about__art{order:2;width:180px;justify-self:end;}

  .step{grid-template-columns:34px 1fr;gap:6px 12px;padding:18px 2px;}
  .step__desc{grid-column:2;}
  .step:hover{padding-left:6px;}

  .footer__cols{grid-template-columns:1fr;gap:24px;}
  .footer__base{flex-direction:column;gap:6px;}

  .lb__bar{flex-direction:column;align-items:flex-start;gap:12px;}
  .lb__grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
}

@media (hover:none),(pointer:coarse){
  .cursor{display:none;}
  body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:auto;}
  .peek{display:none;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none;}
  .peek{display:none;}
}