/* ==========================================================================
   Nelfar Zulkifli — property & strata management
   Recreation of danielcross.framer.website
   Tokens and metrics measured from the reference at 1440 / 900 / 375px.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --bg:#E9E6E2;
  --surface:#EDEAE7;
  --surface-2:#F5F2F0;
  --white:#FFFFFF;
  --ink:#000000;
  --muted:#757575;
  --accent:#4A3429;
  --accent-hi:#5C4133;
  --line:rgba(0,0,0,.08);

  --rail:250px;
  --gutter:25px;
  --inner:1140px;
  --topbar:70px;

  --r-pill:999px;
  --r-lg:16px;
  --r-md:12px;
  --r-sm:10px;
  --r-xs:6px;
  --r-nav:4px;

  --ease:cubic-bezier(.22,1,.36,1);
  --t:220ms;

  --font:"Inter Display","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{list-style:none;padding:0}
img,video{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

body{
  font-family:var(--font);
  font-weight:500;
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.02em;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- type scale ---------- */
.h1{font-size:46px;line-height:1.1;letter-spacing:-.03em;font-weight:500}
.h2{font-size:40px;line-height:1.2;letter-spacing:-.02em;font-weight:500}
.h4{font-size:24px;line-height:1;letter-spacing:-.04em;font-weight:500}
.card-title{font-size:20px;line-height:1.5;letter-spacing:-.04em;font-weight:500}
.lead{font-size:18px;line-height:1.5;letter-spacing:-.04em;color:var(--muted)}
.body{font-size:16px;line-height:1.6;letter-spacing:-.02em;color:var(--muted)}
.small{font-size:14px;line-height:1.5;letter-spacing:-.04em}
.eyebrow{
  font-size:10px;line-height:1;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}

/* The last line of the career statement. Nelfar asked for it set the way the
   page heading is set — same face and weight, a clear step down in size — so it
   lands as a statement rather than trailing off as the smallest paragraph. */
.statement-end{
  font-size:34px;line-height:1.15;letter-spacing:-.03em;font-weight:500;
  color:var(--ink);margin-top:36px;
}
.badge{
  font-size:10px;line-height:1.2;letter-spacing:-.04em;font-weight:600;
  color:var(--white);background:var(--accent);
  padding:5px 9px;border-radius:var(--r-pill);display:inline-block;
}

/* ==========================================================================
   Layout shell
   ========================================================================== */
.shell{display:flex;min-height:100vh}

/* ---------- sidebar rail ---------- */
.rail{
  width:var(--rail);flex:0 0 var(--rail);
  position:sticky;top:0;height:100vh;
  padding:25px;display:flex;flex-direction:column;gap:24px;
  border-right:1px solid var(--line);
  background:var(--bg);z-index:10;
}
.rail__id{display:flex;align-items:center;gap:10px}
.rail__avatar{width:38px;height:38px;border-radius:var(--r-pill);object-fit:cover;flex:0 0 38px}
.rail__name{display:block;font-size:16px;line-height:1;letter-spacing:-.04em;font-weight:500}
.rail__role{display:block;margin-top:5px}

.nav{display:flex;flex-direction:column;gap:10px}
.nav__item{
  display:flex;align-items:center;gap:10px;
  height:37px;padding:8px;border-radius:var(--r-nav);
  font-size:14px;letter-spacing:-.04em;color:var(--muted);
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.nav__item svg{width:14px;height:14px;flex:0 0 14px;opacity:.75}
.nav__item:hover{background:var(--surface-2);color:var(--ink)}
.nav__item[aria-current="page"]{background:var(--surface-2);color:var(--ink)}

.rail__tile{width:200px;height:130px;border-radius:var(--r-xs);object-fit:cover}
.rail__foot{margin-top:auto;display:flex;flex-direction:column;gap:9px}
.rail__foot .small{color:var(--muted)}
.rail__foot .small strong{color:var(--ink);font-weight:500;display:block}

/* ---------- top bar (tablet + mobile) ---------- */
.topbar{
  display:none;position:fixed;inset:0 0 auto 0;height:var(--topbar);z-index:60;
  padding:0 20px;align-items:center;justify-content:space-between;
  background:var(--bg);border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--ease);
}
.topbar.is-scrolled{border-bottom-color:var(--line)}
.topbar__id{display:flex;align-items:center;gap:10px}
.topbar__avatar{width:38px;height:38px;border-radius:var(--r-pill);object-fit:cover}
.burger{
  width:42px;height:42px;display:grid;place-items:center;
  background:var(--surface);border:0;border-radius:var(--r-xs);cursor:pointer;
  transition:background var(--t) var(--ease);
}
.burger:hover{background:var(--surface-2)}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform var(--t) var(--ease),opacity var(--t)}
.burger span+span{margin-top:4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:70;display:none;
}
.drawer.is-open{display:block}
.drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.28);opacity:0;transition:opacity 280ms var(--ease)}
.drawer.is-in .drawer__backdrop{opacity:1}
.drawer__panel{
  position:absolute;inset:0 0 0 auto;width:min(320px,86vw);
  background:var(--bg);padding:24px;display:flex;flex-direction:column;gap:22px;
  transform:translateX(100%);transition:transform 280ms var(--ease);
}
.drawer.is-in .drawer__panel{transform:none}
.drawer .nav__item{opacity:0;transform:translateX(12px);transition:opacity 300ms var(--ease),transform 300ms var(--ease),background var(--t)}
.drawer.is-in .nav__item{opacity:1;transform:none;transition-delay:calc(120ms + var(--i,0)*40ms)}
.drawer__close{align-self:flex-end;background:none;border:0;cursor:pointer;padding:8px;color:var(--muted)}

/* ---------- content column ---------- */
.main{flex:1 1 auto;min-width:0}
.wrap{max-width:var(--inner);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding:64px 0}
.section__head{margin-bottom:64px;text-align:center}
.section__head .eyebrow{display:block;margin-bottom:16px}
.section__head .h2{max-width:16ch;margin:0 auto}
.section__head--left{text-align:left}
.section__head--left .h2{margin:0;max-width:22ch}

/* ==========================================================================
   Status bar
   ========================================================================== */
.status{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0 0;font-size:14px;letter-spacing:-.04em;
}
.status__dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--accent);display:inline-block;margin-right:8px;vertical-align:middle}
.status span{color:var(--muted)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;padding:56px 0 64px;overflow:hidden}
.hero__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,#F3F0ED 0%,rgba(243,240,237,0) 62%);
}
.hero__inner{position:relative;z-index:1;text-align:center}
.pill{
  display:inline-block;background:var(--surface);border-radius:var(--r-pill);
  padding:8px 16px;font-size:14px;letter-spacing:-.04em;color:var(--muted);
}
.hero__title{margin:28px auto 0;max-width:20ch}
.hero__chips{
  display:inline-flex;align-items:center;vertical-align:middle;
  margin:0 10px;transform:translateY(-2px);
}
.hero__chips img{
  width:45px;height:45px;border-radius:var(--r-xs);object-fit:cover;
  border:2px solid var(--bg);
}
.hero__chips img:nth-child(2){margin:0 -12px;transform:translateY(8px);z-index:2;position:relative}
.hero__chips img:nth-child(3){margin-left:-12px}
.hero__sub{margin:24px auto 0;max-width:64ch}
.hero__cta{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:32px;flex-wrap:wrap}
.hero__stat{display:flex;align-items:center;gap:9px;font-size:14px;letter-spacing:-.04em}
.hero__stat b{font-weight:500}
.hero__stat .dotrow{display:inline-flex;gap:3px}
.hero__stat .dotrow i{width:5px;height:5px;border-radius:var(--r-pill);background:var(--accent);display:block}
.hero__images{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:56px}
.hero__images figure{overflow:hidden;border-radius:var(--r-md);aspect-ratio:373/300}
.hero__images img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}
.hero__images figure:hover img{transform:scale(1.03)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:8px 22px;border-radius:var(--r-xs);
  font-size:16px;letter-spacing:-.02em;font-weight:500;cursor:pointer;border:0;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.btn--primary{background:var(--accent);color:var(--white)}
.btn--primary:hover{background:var(--accent-hi)}
.btn--white{background:var(--white);color:var(--accent)}
.btn--white:hover{background:#F0EDEA}
.btn--block{width:100%}

.link-u{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size 260ms var(--ease);
}
.link-u:hover{background-size:100% 1px}

/* ==========================================================================
   Service cards
   ========================================================================== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:21px 25px}
.card{
  background:var(--surface);border-radius:var(--r-sm);padding:18px;
  min-height:249px;display:flex;flex-direction:column;
  transition:transform 300ms var(--ease),background 300ms var(--ease);
}
.card:hover{transform:translateY(-3px)}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card__desc{margin-top:auto;padding-top:32px}
.card--cta{background:var(--accent);color:var(--white)}
.card--cta .card__desc{color:rgba(255,255,255,.72);font-size:14px;line-height:1.5;letter-spacing:-.04em;padding-top:12px}
.card--cta .card-title{color:var(--white)}
.card--cta .btn{margin-top:24px}
.card--cta:hover{transform:none;background:var(--accent-hi)}

/* ==========================================================================
   About block
   ========================================================================== */
.about{display:grid;grid-template-columns:1fr 373px;gap:56px;align-items:start}
.about__img{border-radius:var(--r-md);overflow:hidden;aspect-ratio:373/380;background:var(--surface)}
.about__img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.about__text .eyebrow{display:block;margin-bottom:18px}

/* side column carrying the portrait plus a second, smaller frame */
.about__col{display:flex;flex-direction:column;gap:16px}
.about__aside{margin:0}
.about__aside img{width:100%;height:auto;aspect-ratio:var(--ar,4/3);object-fit:cover;border-radius:var(--r-md);background:var(--surface)}
.about__aside figcaption{
  margin-top:10px;font-size:13px;line-height:1.5;letter-spacing:-.04em;color:var(--muted);
}

/* ==========================================================================
   Marquees
   ========================================================================== */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;width:max-content;animation:slide var(--dur,45s) linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.chipline{display:flex;gap:10px;padding-right:10px}
.chipline span{
  background:var(--surface);border-radius:var(--r-pill);
  padding:9px 18px;font-size:14px;letter-spacing:-.04em;color:var(--muted);white-space:nowrap;
}

.qcards{display:flex;gap:12px;padding-right:12px}
.qcard{
  width:334px;min-height:225px;flex:0 0 334px;
  background:var(--surface);border-radius:var(--r-lg);padding:20px;
  display:flex;flex-direction:column;border:1px solid transparent;
  transition:border-color var(--t) var(--ease);
}
.qcard:hover{border-color:var(--line)}
.qcard__body{font-size:16px;line-height:1.6;letter-spacing:-.02em;color:var(--ink)}
.qcard__foot{margin-top:auto;padding-top:20px}
.qcard__foot b{display:block;font-size:16px;font-weight:500;letter-spacing:-.02em}
.qcard__foot span{font-size:14px;letter-spacing:-.04em;color:var(--muted)}

.marq-nav{display:flex;gap:8px;justify-content:flex-end;margin-bottom:20px}
.marq-nav button{
  width:22px;height:22px;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:rgba(0,0,0,.2);color:var(--white);display:grid;place-items:center;
  transition:background var(--t) var(--ease);
}
.marq-nav button:hover{background:rgba(0,0,0,.42)}
.marq-nav svg{width:11px;height:11px}

/* ==========================================================================
   Project grid
   ========================================================================== */
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.project{
  position:relative;display:block;border-radius:var(--r-md);overflow:hidden;
  background:var(--white);padding:16px;aspect-ratio:562/350;
}
.project__media{position:absolute;inset:0;overflow:hidden}
.project__media img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}
.project:hover .project__media img{transform:scale(1.04)}
.project__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.62) 100%);
  transition:opacity 400ms var(--ease);
}
.project:hover .project__media::after{opacity:.86}
.project__meta{position:absolute;left:20px;right:20px;bottom:18px;color:var(--white)}
.project__meta .h4{display:block;margin-bottom:8px}
.project__tags{display:block;font-size:14px;letter-spacing:-.04em;color:rgba(255,255,255,.82)}
.project__go{
  position:absolute;top:18px;right:18px;width:30px;height:30px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--accent);
  opacity:0;transform:translateY(-4px);transition:opacity 300ms var(--ease),transform 300ms var(--ease);
}
.project:hover .project__go{opacity:1;transform:none}
.project__go svg{width:12px;height:12px}

/* featured (clickable) cards carry a visible read-more affordance */
.project__cta{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:13px;letter-spacing:-.03em;color:var(--white);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  padding:6px 13px;border-radius:var(--r-pill);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.project:hover .project__cta{background:rgba(255,255,255,.94);border-color:transparent;color:var(--accent)}
.project__cta svg{width:11px;height:11px}

/* supporting cards — smaller for contrast, but they link to a project page too */
.projects--sub{grid-template-columns:repeat(3,1fr);margin-top:16px}
.project--sm{aspect-ratio:373/230}
.project--sm .project__meta{left:16px;right:16px;bottom:14px}
.project--sm .h4{font-size:17px;letter-spacing:-.03em;margin-bottom:5px}
.project--sm .project__tags{font-size:12.5px}
.project--sm .project__media::after{background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.58) 100%)}
.project--sm .project__go{width:26px;height:26px;top:14px;right:14px}
.project--sm .project__go svg{width:11px;height:11px}

/* ==========================================================================
   Process
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.step{background:var(--surface);border-radius:var(--r-sm);padding:24px;min-height:220px;display:flex;flex-direction:column}
.step__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px}
.step__idx{font-size:14px;letter-spacing:-.04em;color:var(--muted)}

/* ==========================================================================
   Stats (about page)
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.stat{background:var(--surface);border-radius:var(--r-sm);padding:28px 24px}
.stat__num{font-size:40px;line-height:1.1;letter-spacing:-.03em;font-weight:500;display:block}
.stat__label{margin-top:10px;font-size:14px;letter-spacing:-.04em;color:var(--muted)}

/* ---------- experience ---------- */
.exp{border-top:1px solid var(--line)}
.exp__row{
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
  padding:26px 4px;border-bottom:1px solid var(--line);
  transition:padding-left var(--t) var(--ease),background var(--t) var(--ease);
}
.exp__row:hover{padding-left:14px;background:var(--surface)}
.exp__org{font-size:20px;letter-spacing:-.04em;font-weight:500}
.exp__role{font-size:14px;letter-spacing:-.04em;color:var(--muted);margin-top:6px}
.exp__when{font-size:14px;letter-spacing:-.04em;color:var(--muted);white-space:nowrap}

/* ==========================================================================
   Lists (projects page)
   ========================================================================== */
.lists{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.list h3{font-size:16px;letter-spacing:-.04em;font-weight:500;margin-bottom:6px}
.list .eyebrow{display:block;margin-bottom:16px}
.list li{
  font-size:14px;line-height:1.5;letter-spacing:-.04em;color:var(--muted);
  padding:9px 0;border-bottom:1px solid var(--line);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form{display:grid;gap:16px;max-width:640px}
.field{display:grid;gap:8px}
.field label{font-size:14px;letter-spacing:-.04em}
.field input,.field textarea{
  background:var(--white);border:1px solid transparent;border-radius:var(--r-xs);
  padding:13px 16px;font-size:16px;letter-spacing:-.02em;width:100%;
  transition:border-color var(--t) var(--ease);
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:#A9A4A0}

/* ==========================================================================
   Case study
   ========================================================================== */
.case__back{display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:-.04em;color:var(--muted);margin-bottom:40px}
.case__back:hover{color:var(--ink)}
.case__back svg{width:12px;height:12px}
.case__standfirst{margin-top:20px;max-width:60ch}
.case__banner{border-radius:var(--r-md);overflow:hidden;margin:48px 0;aspect-ratio:var(--ar,1400/780);background:var(--surface)}
.case__banner img{width:100%;height:100%;object-fit:cover}

/* A banner holding a document rather than a photograph. The page is shown
   entire on a tinted ground — cropping a cover page into a landscape band
   would cut off the title, the one thing it exists to show. */
.case__banner--doc{
  background:var(--surface-2);
  /* Sized by its content, and the page inside is capped with an absolute
     max-height. A percentage height cannot resolve here — the figure's own
     height comes from aspect-ratio — so the image would render at its full
     1600px and be clipped by the figure's overflow. */
  aspect-ratio:auto;height:auto;
  display:flex;align-items:center;justify-content:center;padding:32px;
}
.case__banner--doc img{
  width:auto;height:auto;max-width:100%;
  max-height:clamp(320px,42vw,540px);
  object-fit:contain;border-radius:var(--r-xs);
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.10);
}
.case__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case__meta .eyebrow{display:block;margin-bottom:10px}
.case__meta p{font-size:16px;letter-spacing:-.02em}
.case__body{max-width:70ch;margin-top:48px;display:grid;gap:32px}
.case__body h2{font-size:24px;line-height:1.3;letter-spacing:-.04em;font-weight:500;margin-bottom:12px}
.case__result{background:var(--accent);color:var(--white);border-radius:var(--r-lg);padding:36px 40px;margin-top:8px}
.case__result .eyebrow{color:rgba(255,255,255,.6)}
.case__result strong{display:block;font-size:40px;line-height:1.15;letter-spacing:-.03em;font-weight:500;margin:14px 0 10px}
.case__result p{color:rgba(255,255,255,.78);font-size:16px;letter-spacing:-.02em;max-width:52ch}

/* inline photo inside a case study body */
.case__fig{margin:0}
.case__fig img{
  width:100%;height:auto;border-radius:var(--r-md);
  aspect-ratio:var(--ar,3/2);object-fit:cover;background:var(--surface);
}
/* An upright photograph run to the full width of the text column ends up
   taller than the screen and swamps everything around it. Cap the height and
   let the width follow from the picture's own shape — smaller, in proportion,
   and still uncropped. */
.case__fig--fit img{
  width:auto;height:auto;aspect-ratio:auto;
  max-height:clamp(320px,50vw,540px);max-width:100%;
  margin-inline:auto;object-fit:contain;
}

.case__fig figcaption{
  margin-top:12px;font-size:14px;line-height:1.5;letter-spacing:-.04em;color:var(--muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{padding:64px 0 40px}
.foot__links{display:flex;flex-wrap:wrap;gap:12px 40px;font-size:14px;letter-spacing:-.04em;color:var(--muted);margin-bottom:36px}
.foot__cta{
  background:var(--surface);border-radius:var(--r-lg);padding:64px 40px;
  display:block;text-align:center;transition:background var(--t) var(--ease);
}
.foot__cta:hover{background:var(--surface-2)}
.foot__cta b{display:block;font-size:64px;line-height:1.05;letter-spacing:-.04em;font-weight:500}
.foot__cta span{display:inline-block;margin-top:18px;font-size:16px;letter-spacing:-.02em;color:var(--muted)}
.foot__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px;font-size:14px;letter-spacing:-.04em;color:var(--muted)}

/* ==========================================================================
   Field gallery
   ========================================================================== */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 25px}
.gal__item{margin:0;display:flex;flex-direction:column}
/* Every frame below takes its shape from --ar when an element sets it, and
   falls back to the design's own ratio when it does not. Photographs that
   arrive in an odd shape can then be shown whole, at their native ratio,
   rather than cropped to fit a box they were never framed for. */
.gal__frame{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:var(--ar,4/3);background:var(--surface);
}
.gal__frame img,.gal__frame video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 600ms var(--ease);
}
.gal__item:hover .gal__frame img{transform:scale(1.04)}

/* Parallax layer. The translate is written here by script every frame, so it
   carries no transition — the hover scale stays on the img underneath, where a
   transition is wanted and will not fight the scroll. */
.gal__par{
  display:block;position:absolute;inset:-7% 0;
  will-change:transform;
}
.gal__par img{width:100%;height:100%;object-fit:cover;display:block}
.gal__cap{margin-top:14px;font-size:14px;line-height:1.5;letter-spacing:-.04em;color:var(--muted)}
.gal__cap b{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}

/* span modifiers — a gallery of identical tiles reads as a stock grid, so the
   strongest frames in each group take more room */
.gal__item--wide{grid-column:span 2}
.gal__item--wide .gal__frame{aspect-ratio:var(--ar,16/9)}
.gal__item--tall .gal__frame{aspect-ratio:var(--ar,3/4)}
.gal__item--full{grid-column:1 / -1}
.gal__item--full .gal__frame{aspect-ratio:var(--ar,21/9)}

/* A row mixing upright and landscape frames. Matching the ratio would crop one
   of them, and matching neither leaves a hole under whichever is shorter — so
   match the height instead and let each width follow from its own shape. */
.gal--even .gal__item:not(.gal__item--wide) .gal__frame{
  aspect-ratio:auto;height:clamp(230px,25vw,340px);
  width:auto;max-width:100%;margin-inline:auto;background:none;
}
.gal--even .gal__item:not(.gal__item--wide) .gal__frame img{
  width:auto;height:100%;max-width:100%;object-fit:contain;
}

/* zoom affordance on tiles that open in the lightbox */
.js .gal__frame[data-zoom]{cursor:zoom-in}
.gal__zoom{
  position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--accent);
  opacity:0;transform:translateY(-4px);
  transition:opacity 300ms var(--ease),transform 300ms var(--ease);
}
.gal__item:hover .gal__zoom{opacity:1;transform:none}
.gal__zoom svg{width:12px;height:12px}

/* ---------- video ---------- */
.gal__frame video{background:var(--ink)}
.gal__frame--video{cursor:default}
.gal__frame--contain{background:var(--surface)}
.gal__frame--contain video{object-fit:contain;background:transparent}
/* sits under the caption text, on its own line, not trailing the sentence */
.vid-note{
  display:flex;align-items:center;gap:7px;margin-top:10px;
  font-size:12px;letter-spacing:-.03em;color:var(--muted);
}
.vid-note i{width:5px;height:5px;border-radius:var(--r-pill);background:var(--accent);display:block;flex:0 0 5px}

/* a single video used inside a case-study body */
.case__video{margin:0}
.case__video video{width:100%;height:auto;border-radius:var(--r-md);display:block;background:#141210}
.case__video figcaption{margin-top:12px;font-size:14px;line-height:1.5;letter-spacing:-.04em;color:var(--muted)}

/* ---------- highlight reel ---------- */
.reel__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.reel__nav{display:flex;gap:8px}
.reel__nav button{
  width:34px;height:34px;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:var(--surface);color:var(--ink);display:grid;place-items:center;
  transition:background var(--t) var(--ease),opacity var(--t) var(--ease);
}
.reel__nav button:hover{background:var(--surface-2)}
.reel__nav button[disabled]{opacity:.3;cursor:default}
.reel__nav svg{width:13px;height:13px}

.reel{position:relative}
.reel__track{
  display:flex;gap:12px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* bleed past the right gutter so the next card peeks and the strip reads
     as something you can push, rather than a row that happens to be cut off */
  margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);
  scrollbar-width:none;-ms-overflow-style:none;
}
.reel__track::-webkit-scrollbar{display:none}
.reel__item{flex:0 0 300px;margin:0;scroll-snap-align:start}
.reel__frame{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  aspect-ratio:4/3;background:var(--surface);
}
.reel__frame img{transition:transform 600ms var(--ease)}
.reel__item:hover .reel__frame img{transform:scale(1.04)}
.reel__item figcaption{
  margin-top:12px;font-size:14px;letter-spacing:-.04em;color:var(--muted);
}
.reel__bar{height:2px;background:var(--line);border-radius:2px;margin-top:22px;overflow:hidden}
.reel__bar span{display:block;height:100%;width:12%;background:var(--accent);border-radius:2px;transform-origin:left}

/* ---------- home teaser strip ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.strip a{display:block;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;background:var(--surface)}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}
.strip a:hover img{transform:scale(1.04)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:90;display:none}
.lb.is-open{display:block}
.lb__backdrop{position:absolute;inset:0;background:rgba(20,18,16,.92);opacity:0;transition:opacity 260ms var(--ease)}
.lb.is-in .lb__backdrop{opacity:1}
.lb__stage{
  position:absolute;inset:0;display:grid;place-items:center;padding:56px 24px 84px;
  opacity:0;transform:scale(.98);transition:opacity 260ms var(--ease),transform 260ms var(--ease);
}
.lb.is-in .lb__stage{opacity:1;transform:none}
/* explicit viewport maths — a percentage max-height on a centred grid item
   resolves against the padding box, and the image runs under the caption */
.lb__stage img{
  max-width:calc(100vw - 56px);max-height:calc(100vh - 156px);
  object-fit:contain;border-radius:var(--r-sm);
}
.lb__cap{
  position:absolute;left:24px;right:24px;bottom:26px;text-align:center;
  max-width:76ch;margin:0 auto;
  font-size:14px;line-height:1.5;letter-spacing:-.04em;color:rgba(255,255,255,.72);
}
.lb__cap b{display:block;color:var(--white);font-weight:500;margin-bottom:4px}
.lb__btn{
  position:absolute;top:18px;right:18px;width:38px;height:38px;border:0;cursor:pointer;
  border-radius:var(--r-pill);background:rgba(255,255,255,.14);color:var(--white);
  display:grid;place-items:center;transition:background var(--t) var(--ease);
}
.lb__btn:hover{background:rgba(255,255,255,.28)}
.lb__btn svg{width:14px;height:14px}
.lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;cursor:pointer;
  border-radius:var(--r-pill);background:rgba(255,255,255,.14);color:var(--white);
  display:grid;place-items:center;transition:background var(--t) var(--ease);
}
.lb__nav:hover{background:rgba(255,255,255,.28)}
.lb__nav svg{width:14px;height:14px}
.lb__nav--prev{left:18px}
.lb__nav--next{right:18px}

/* ==========================================================================
   Reveal animation
   ========================================================================== */
.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity 700ms var(--ease),transform 700ms var(--ease);
  transition-delay:calc(var(--i,0)*80ms);
}
/* hero entrance */
.js .enter{opacity:0;transform:translateY(16px)}
.js .enter.is-in{opacity:1;transform:none;transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:calc(var(--d,0)*1ms)}
.js .word{display:inline-block;opacity:0;transform:translateY(20px)}
.js .word.is-in{opacity:1;transform:none;transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:calc(var(--d,0)*1ms)}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:1199px){
  .rail{display:none}
  .topbar{display:flex}
  .main{padding-top:var(--topbar)}
  .h1{font-size:40px;line-height:1.1}
  .h2{font-size:34px;line-height:1.2}
  /* the reference keeps the hero and centred section heads centred at every
     width — only the .section__head--left variant goes left. Pages that want a
     left hero set it inline on .hero__inner. */
  .cards{grid-template-columns:repeat(2,1fr);gap:25px 31px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr 320px;gap:40px}
  .foot__cta b{font-size:48px}
  .gal{grid-template-columns:repeat(2,1fr);gap:28px 25px}
  .gal__item--wide{grid-column:span 2}
  .gal__item--full .gal__frame{aspect-ratio:16/9}
  .strip{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:809px){
  :root{--gutter:20px}
  .h1{font-size:34px;line-height:1.1}
  .h2{font-size:28px;line-height:1.2}
  .h4{font-size:22px}
  .card-title{font-size:18px}
  .lead{font-size:16px}
  .body{font-size:15px}
  .statement-end{font-size:26px;margin-top:28px}
  .section{padding:48px 0}
  .section__head{margin-bottom:42px}
  .hero{padding:32px 0 48px}
  /* reference holds the hero figures at a fixed 300px tall on mobile */
  .hero__images{grid-template-columns:1fr;gap:10px;margin-top:40px}
  .hero__images figure{aspect-ratio:auto;height:300px}
  .hero__chips{margin:0 6px}
  .hero__chips img{width:36px;height:36px}
  .cards,.steps,.stats,.lists,.projects,.case__meta{grid-template-columns:1fr;gap:16px}
  /* reference stacks every project card full-width in one column on mobile,
     so the supporting cards match the featured ones rather than shrinking */
  .projects--sub{grid-template-columns:1fr;gap:16px}
  .project--sm{aspect-ratio:16/10}
  .project--sm .project__meta{left:20px;right:20px;bottom:18px}
  .project--sm .h4{font-size:22px;letter-spacing:-.04em;margin-bottom:8px}
  .project--sm .project__tags{font-size:14px}
  .about{grid-template-columns:1fr;gap:28px}
  .about__img{max-width:340px}
  .about__col{gap:22px}
  .about__aside img{max-width:340px}
  .project{aspect-ratio:16/10}
  .exp__row{grid-template-columns:1fr;gap:8px;align-items:start}
  .exp__when{white-space:normal}
  .foot__cta{padding:44px 24px}
  .foot__cta b{font-size:34px}
  .foot__links{gap:10px 24px}
  .status{font-size:12px;gap:12px}
  .status span:last-child{text-align:right}
  .case__banner{margin:32px 0}
  .case__banner--doc{padding:18px}
  .case__result{padding:28px 24px}
  .case__result strong{font-size:30px}
  .qcard{width:302px;flex-basis:302px}
  /* Two columns with a deliberate rhythm rather than one tall stack: a
     full-width frame opens each group, pairs carry the middle, and the tiles
     marked --mfull are the ones that would otherwise sit alone beside a hole. */
  .gal{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .gal__item--wide,.gal__item--full,.gal__item--mfull{grid-column:1 / -1}
  .gal__frame{aspect-ratio:var(--ar,1/1)}
  .gal__item--wide .gal__frame,
  .gal__item--full .gal__frame,
  .gal__item--mfull .gal__frame{aspect-ratio:var(--ar,16/10)}
  .gal__item--tall .gal__frame{aspect-ratio:var(--ar,3/4)}
  .gal__cap{margin-top:10px;font-size:13px}
  /* the clips keep their own shape — a square crop loses them. Selector is
     weighted to beat the --wide/--mfull frame rules above. */
  .gal__item .gal__frame--video{aspect-ratio:16/9}
  .gal__item .gal__frame--contain{aspect-ratio:3/4}
  .reel__item{flex:0 0 min(76vw,300px)}
  .reel__item figcaption{font-size:13px}
  .lb__stage{padding:52px 14px 92px}
  .lb__nav{width:36px;height:36px}
  .lb__nav--prev{left:10px}
  .lb__nav--next{right:10px}
  /* two-up rather than one, so the strip still reads as a strip on a phone */
  .strip{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .js .reveal,.js .enter,.js .word{opacity:1 !important;transform:none !important}
  .marquee__track{animation:none;transform:none}
}

/* ---------- print ---------- */
@media print{
  .rail,.topbar,.marquee,.foot__cta{display:none}
  body{background:#fff}
}