/* =========================================================================
   ANI Studio — website v2
   Structure and interaction modelled on senawastudio.com, rebuilt from
   scratch in ANI's own palette. One stylesheet, shared by every page.
   ========================================================================= */

/* ---------- tokens ------------------------------------------------------ */
:root{
  /* warm neutral ladder — light to dark */
  --wool:#F4EFE6;          /* page ground */
  --linen:#EAE2D3;         /* raised panels */
  --sand:#D8CCB6;          /* borders */
  --rule:#DFD5C2;          /* hairlines */
  --oak:#A8967E;           /* muted type */
  --walnut:#6B5647;        /* secondary type */
  --walnut-deep:#4A3524;   /* ANI walnut */
  --slate:#2A211B;         /* primary type */
  --void:#14100D;          /* dark sections */
  --bone:#E7DED0;          /* type on dark */

  /* accent */
  --amber:#C98A4B;
  --clay:#8A5A2B;

  --scrim:22,17,13;
  --hairline-dark:rgba(231,222,208,.16);

  --font-body:'Inter','Helvetica Neue',system-ui,sans-serif;
  --font-display:'Sora','Inter','Helvetica Neue',system-ui,sans-serif;

  --leading-tight:1.16;
  --leading-body:1.75;

  --gutter:clamp(20px,4.5vw,64px);
  --section:clamp(64px,10vh,132px);
  --maxw:1440px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-settle:cubic-bezier(.76,0,.24,1);
  --quick:.3s; --fast:.4s; --mid:.6s; --slow:.9s;

  --radius-sm:2px;
  --radius-md:4px;

  --z-badge:90; --z-nav:100; --z-trigger:110; --z-overlay:200; --z-preload:9999;

  --nav-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--wool);color:var(--slate);
  font-family:var(--font-body);font-weight:300;font-size:16px;
  line-height:var(--leading-body);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:300;font-family:var(--font-display);line-height:var(--leading-tight);letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:var(--radius-sm)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:fixed;top:10px;left:10px;z-index:1000;padding:10px 16px;
  background:var(--slate);color:var(--wool);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;transform:translateY(-200%);transition:transform var(--quick);
}
.skip:focus{transform:translateY(0)}

/* small caps label used all over the site */
.label{
  font-family:var(--font-display);font-size:10px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--oak);
}
.label--accent{color:var(--clay)}

/* ---------- preloader --------------------------------------------------- */
#preload{
  position:fixed;inset:0;z-index:var(--z-preload);background:var(--wool);
  display:grid;place-items:center;transition:opacity .7s var(--ease-out);
}
#preload.done{opacity:0;pointer-events:none}
#preload .mark{
  font-family:var(--font-display);font-size:13px;font-weight:400;
  letter-spacing:.5em;text-indent:.5em;color:var(--walnut);
}
#preload .bar{margin-top:18px;width:120px;height:1px;background:var(--sand);position:relative;overflow:hidden}
#preload .bar i{position:absolute;inset:0;right:100%;background:var(--walnut-deep);animation:load 1.1s var(--ease-out) forwards}
@keyframes load{to{right:0}}

/* ---------- nav --------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:calc(var(--z-overlay) + 5);
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gutter);
  color:var(--slate);
  transition:background var(--fast),color var(--fast),border-color var(--fast);
  border-bottom:1px solid transparent;
}
.nav--solid{background:rgba(244,239,230,.86);backdrop-filter:blur(14px);border-bottom-color:var(--rule)}
/* over full-bleed imagery */
.nav--over{color:var(--bone)}
.nav--over.nav--solid{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
/* the scrim behind light type runs well past the bar, so it has no visible edge */
.nav--menu{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.nav--menu::before{display:none}
.nav--menu [data-menu-toggle]{color:var(--slate)}
/* while the panel is open the bar is just the close mark — the wordmark and
   search both live inside the menu, and neither reads over frosted glass */
.nav__brand,.nav [data-search-open]{transition:opacity var(--quick)}
.nav--menu .nav__brand,.nav--menu [data-search-open]{opacity:0;pointer-events:none}
.nav--over::before{
  content:"";position:absolute;left:0;right:0;top:0;height:190px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(var(--scrim),.55) 0%,rgba(var(--scrim),.22) 45%,transparent 100%);
}

.nav__brand{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:14px;font-weight:400;
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;
}
.nav__brand img{height:22px;width:auto}
/* the monogram keeps its own colour on every page; over dark imagery it gets
   a halo rather than being knocked out to white */
.nav--over .nav__brand img{filter:drop-shadow(0 0 10px rgba(247,243,236,.55)) drop-shadow(0 1px 3px rgba(0,0,0,.4))}

.nav__icon{
  width:34px;height:34px;display:grid;place-items:center;
  transition:opacity var(--quick);
}
.nav__icon:hover{opacity:.6}
.nav__burger{position:relative;width:19px;height:11px}
.nav__burger i{
  position:absolute;left:0;right:0;height:1px;background:currentColor;
  transition:transform var(--quick) var(--ease-settle),opacity .18s;
}
.nav__burger i:nth-child(1){top:0}
.nav__burger i:nth-child(2){bottom:0}
[aria-expanded="true"] .nav__burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
[aria-expanded="true"] .nav__burger i:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

/* ---------- menu overlay ------------------------------------------------
   Frosted glass over the live page: the panel wipes open from the left edge
   while the page behind it blurs, and the links rise in behind it.        */
.menu{
  position:fixed;inset:0 auto 0 0;width:min(440px,74vw);z-index:var(--z-overlay);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--nav-h) + 46px) clamp(28px,4vw,54px) clamp(30px,5vh,52px);
  color:var(--slate);
  /* real glass: a thin warm veil doing almost nothing, and a backdrop filter
     doing the work. brightness() is what keeps dark slate type legible when
     the panel is sitting over the dark hero imagery. */
  background:linear-gradient(100deg,rgba(244,239,230,.40),rgba(234,226,211,.28));
  -webkit-backdrop-filter:blur(38px) saturate(160%) brightness(2.45) contrast(.84);
  backdrop-filter:blur(38px) saturate(160%) brightness(2.45) contrast(.84);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.28);
  isolation:isolate;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .62s var(--ease-settle);
  overflow-y:auto;overscroll-behavior:contain;
}
.menu.open{clip-path:inset(0 0 0 0)}
.menu:focus{outline:none}
/* no backdrop-filter (older Safari, Firefox default): fall back to a solid veil */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .menu{background:var(--wool)}
}

.menu__links{display:flex;flex-direction:column;align-items:flex-start}
.menu__link{
  display:block;width:100%;text-align:left;
  padding:clamp(7px,1.1vh,12px) 0;
  font-family:var(--font-display);font-size:clamp(21px,2.3vw,29px);font-weight:300;
  letter-spacing:-.012em;line-height:1.25;color:var(--slate);
  /* each link rises in behind the wipe; --i is set per item by site.js.
     the hover slide uses padding rather than transform, so it can run on its
     own clock instead of inheriting the entry animation's stagger delay. */
  opacity:0;transform:translateY(14px);
  transition:
    opacity .5s var(--ease-out),
    transform .5s var(--ease-out),
    color var(--quick),
    padding-left .34s var(--ease-out);
}
.menu.open .menu__link{
  opacity:1;transform:none;
  /* stagger the entry only — colour and the hover slide stay immediate */
  transition-delay:calc(.16s + var(--i,0) * .045s),calc(.16s + var(--i,0) * .045s),0s,0s;
}
.menu__link:hover,.menu__link:focus-visible{color:var(--oak);padding-left:14px}
.menu__link[aria-current="page"]{color:var(--clay)}

.menu__foot{
  font-size:14px;line-height:1.9;color:var(--walnut);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.menu.open .menu__foot{opacity:1;transform:none;transition-delay:.42s}
.menu__foot a{border-bottom:1px solid transparent;transition:border-color var(--quick)}
.menu__foot a:hover{border-bottom-color:var(--oak)}
.menu__foot .where{display:block;margin-top:6px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--walnut);opacity:.8}

/* click-catcher only — the page behind the panel stays undimmed */
.scrim{
  position:fixed;inset:0;z-index:calc(var(--z-overlay) - 1);
  background:rgba(var(--scrim),.14);opacity:0;pointer-events:none;
  transition:opacity var(--fast);
}
.scrim.open{opacity:1;pointer-events:auto}

@media(prefers-reduced-motion:reduce){
  .menu{transition:none}
  .menu.open .menu__link,.menu.open .menu__foot{transition-delay:0s}
}

/* ---------- search dialog ----------------------------------------------- */
.search{
  position:fixed;inset:0;z-index:calc(var(--z-overlay) + 10);
  background:rgba(244,239,230,.97);backdrop-filter:blur(20px);
  padding:var(--gutter);overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity var(--quick);
}
.search.open{opacity:1;pointer-events:auto}
.search__head{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:820px;margin:0 auto 30px}
.search__field{
  max-width:820px;margin:0 auto;display:flex;align-items:center;gap:14px;
  border-bottom:1px solid var(--slate);padding-bottom:14px;
}
.search__field input{
  flex:1;border:0;background:none;outline:none;
  font-family:var(--font-display);font-size:clamp(24px,4vw,38px);font-weight:300;
}
.search__field input::placeholder{color:var(--oak)}
.search__results{max-width:820px;margin:30px auto 0}
.search__group + .search__group{margin-top:28px}
.search__item{
  display:flex;align-items:baseline;gap:16px;padding:16px 0;
  border-bottom:1px solid var(--rule);transition:padding-left var(--quick) var(--ease-out),color var(--quick);
}
.search__item:hover,.search__item.is-active{padding-left:10px;color:var(--clay)}
.search__item strong{font-family:var(--font-display);font-weight:400;font-size:19px}
.search__item em{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--oak);margin-left:auto}
.search__hint{max-width:820px;margin:34px auto 0;display:flex;gap:22px;flex-wrap:wrap;color:var(--oak);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.search__hint kbd{
  font:inherit;border:1px solid var(--sand);border-radius:var(--radius-sm);
  padding:2px 7px;margin-right:7px;background:var(--linen);
}
.search__empty{padding:26px 0;color:var(--oak)}

/* ---------- home carousel ----------------------------------------------- */
.reel{
  position:relative;height:100svh;min-height:520px;overflow:hidden;
  background:var(--void);cursor:grab;user-select:none;touch-action:none;overscroll-behavior:none;
}
.reel.is-dragging{cursor:grabbing}
.reel__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1s var(--ease-out);
  pointer-events:none;
}
.reel__slide.on{opacity:1;pointer-events:auto}
.reel__slide img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 7s linear;}
.reel__slide.on img{transform:scale(1)}
.reel__slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(var(--scrim),.42) 0%,transparent 26%,transparent 52%,rgba(var(--scrim),.78) 100%);
}
.reel__plate{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--walnut-deep),var(--void));
  color:rgba(231,222,208,.5);font-family:var(--font-display);
  letter-spacing:.3em;text-transform:uppercase;font-size:11px;
}

/* the ribbon of project names along the bottom */
.reel__ribbon{
  position:absolute;left:0;right:0;bottom:52px;z-index:3;
  display:flex;justify-content:center;gap:clamp(28px,6vw,90px);
  padding-inline:var(--gutter);color:var(--bone);text-align:center;
}
.reel__tab{
  opacity:.42;transition:opacity var(--fast),transform var(--fast) var(--ease-out);
  white-space:nowrap;
}
.reel__tab:hover{opacity:.75}
.reel__tab.on{opacity:1;transform:translateY(-3px)}
.reel__tab b{display:block;font-family:var(--font-display);font-size:14px;font-weight:400;letter-spacing:.02em}
.reel__tab.on b{font-weight:500}
.reel__tab span{display:block;margin-top:5px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;opacity:.75}
@media(max-width:900px){
  .reel__ribbon{justify-content:flex-start;overflow:hidden}
  .reel__tab{display:none}
  .reel__tab.on{display:block;margin-inline:auto}
}

.reel__progress{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:28px;z-index:3;
  height:1px;background:rgba(231,222,208,.24);
}
.reel__progress i{
  position:absolute;left:0;top:0;height:100%;background:var(--bone);
  transition:transform var(--mid) var(--ease-out),width var(--mid) var(--ease-out);
}
.reel__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;display:grid;place-items:center;color:var(--bone);
  opacity:.5;transition:opacity var(--quick);
}
.reel__arrow:hover{opacity:1}
.reel__arrow--prev{left:calc(var(--gutter) / 2)}
.reel__arrow--next{right:calc(var(--gutter) / 2)}
@media(max-width:760px){.reel__arrow{display:none}}

/* ---------- page header ------------------------------------------------- */
.phead{padding:calc(var(--nav-h) + clamp(52px,9vh,110px)) 0 clamp(34px,6vh,64px)}
.phead h1{font-size:clamp(38px,7vw,86px);margin-top:16px;max-width:16ch}
.phead h1 em{font-style:normal;color:var(--clay)}
.phead p{margin-top:22px;max-width:56ch;color:var(--walnut);font-size:clamp(15px,1.3vw,18px)}

.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ---------- work page --------------------------------------------------- */
.workbar{
  position:sticky;top:var(--nav-h);z-index:60;
  background:rgba(244,239,230,.92);backdrop-filter:blur(12px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.workbar__in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:14px;flex-wrap:wrap;
}
.filters{display:flex;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap;align-items:baseline}
.filters button{
  position:relative;display:inline-flex;align-items:baseline;gap:7px;padding:4px 0;
  font-family:var(--font-display);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--oak);
  transition:color var(--quick);
}
.filters button i{font-style:normal;font-weight:300;font-size:10px;color:var(--sand);transition:color var(--quick)}
/* the rule under the active filter grows out from the left */
.filters button::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--slate);
  transform:scaleX(0);transform-origin:left;transition:transform var(--fast) var(--ease-out);
}
.filters button:hover{color:var(--walnut)}
.filters button:hover i{color:var(--oak)}
.filters button[aria-pressed="true"]{color:var(--slate)}
.filters button[aria-pressed="true"] i{color:var(--oak)}
.filters button[aria-pressed="true"]::after{transform:scaleX(1)}

.views{display:flex;gap:clamp(14px,2vw,26px);align-items:baseline}
.views button{
  position:relative;padding:4px 0;
  font-family:var(--font-display);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--oak);
  transition:color var(--quick);
}
.views button::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--slate);
  transform:scaleX(0);transform-origin:left;transition:transform var(--fast) var(--ease-out);
}
.views button:hover{color:var(--walnut)}
.views button[aria-pressed="true"]{color:var(--slate)}
.views button[aria-pressed="true"]::after{transform:scaleX(1)}

.workcount{padding:22px 0 6px;font-size:12px;letter-spacing:.06em;color:var(--oak)}

.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(18px,2.4vw,34px);padding-bottom:var(--section);
}
.card{
  display:block;
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out);
}
/* filtering: everything leaves together, the survivors come back staggered */
.card.is-out,.index__row.is-out{opacity:0;transform:translateY(10px);pointer-events:none}
.card__fig{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--linen);
  border-radius:var(--radius-sm);
}
.card__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.card:hover .card__fig img{transform:scale(1.045)}
.card__plate{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--linen),var(--sand));
  color:var(--oak);font-family:var(--font-display);font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;
}
.card__body{padding-top:14px;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.card__title{font-family:var(--font-display);font-size:14px;font-weight:400;letter-spacing:.16em;text-transform:uppercase}
.card__meta{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--oak);text-align:right;white-space:nowrap}
.card__loc{padding-top:4px;font-size:12px;color:var(--oak)}

/* index (list) view */
.index{padding-bottom:var(--section)}
.index__row{
  display:grid;grid-template-columns:2.2fr 1.1fr 1.4fr auto;gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--rule);
  transition:padding-left var(--fast) var(--ease-out),background var(--fast),
    opacity .34s var(--ease-out),transform .34s var(--ease-out);
}
.index__row:first-child{border-top:1px solid var(--rule)}
.index__row:hover{padding-left:12px;background:rgba(201,138,75,.06)}
.index__row b{font-family:var(--font-display);font-size:clamp(19px,2.4vw,28px);font-weight:300}
.index__row:hover b{color:var(--clay)}
.index__row span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--oak)}
.index__row .arrow{opacity:0;transition:opacity var(--quick),transform var(--quick)}
.index__row:hover .arrow{opacity:1;transform:translateX(4px)}
@media(max-width:760px){
  .index__row{grid-template-columns:1fr auto;row-gap:6px}
  .index__row b{grid-column:1/-1}
  .index__row .arrow{display:none}
}

.is-hidden{display:none !important}

/* ---------- editorial sections ------------------------------------------ */
.section{padding-block:var(--section)}
.section--linen{background:var(--linen)}
.section--dark{background:var(--void);color:var(--bone)}
.section--dark .label{color:rgba(231,222,208,.5)}
.section--dark p{color:rgba(231,222,208,.72)}

.split{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,6vw,90px);align-items:start}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:30px}}
.split h2{font-size:clamp(28px,4.4vw,54px)}
.prose p{max-width:62ch;font-size:clamp(15px,1.25vw,17px);color:var(--walnut)}
.prose p + p{margin-top:20px}
.section--dark .prose p{color:rgba(231,222,208,.72)}
.prose .lede{font-family:var(--font-display);font-size:clamp(19px,2.3vw,27px);font-weight:300;line-height:1.42;color:var(--slate)}
.section--dark .prose .lede{color:var(--bone)}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px;margin-top:clamp(36px,6vh,64px);
  border-top:1px solid var(--rule);padding-top:30px}
.section--dark .facts{border-top-color:var(--hairline-dark)}
.facts div b{display:block;margin-top:10px;font-family:var(--font-display);font-size:clamp(19px,2vw,24px);font-weight:300}

/* full-bleed studio image */
.studiofig{margin:0;height:clamp(280px,52vh,560px);overflow:hidden;background:var(--void)}
.studiofig img{width:100%;height:100%;object-fit:cover}

/* team */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(20px,2.6vw,34px);margin-top:clamp(36px,6vh,60px)}
.team article{padding-top:18px;border-top:1px solid var(--rule)}
.team b{display:block;font-family:var(--font-display);font-size:17px;font-weight:400}
.team span{display:block;margin-top:7px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--oak);line-height:1.9}

/* ---------- process ----------------------------------------------------- */
.phase{border-top:1px solid var(--rule);padding-block:clamp(40px,7vh,80px)}
.phase__head{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(24px,5vw,70px);align-items:start}
@media(max-width:880px){.phase__head{grid-template-columns:1fr;gap:18px}}
.phase__head h2{font-size:clamp(26px,3.6vw,42px)}
.steps{margin-top:clamp(30px,5vh,54px);display:grid;gap:2px}
.step{
  display:grid;grid-template-columns:64px 1fr 190px;gap:clamp(16px,3vw,44px);
  padding:26px clamp(14px,2vw,26px);background:var(--linen);align-items:start;
  transition:background var(--fast);
}
.step:hover{background:var(--sand)}
.step__n{font-family:var(--font-display);font-size:13px;color:var(--clay);letter-spacing:.1em}
.step h3{font-family:var(--font-display);font-size:clamp(18px,2vw,23px);font-weight:400}
.step p{margin-top:10px;font-size:15px;color:var(--walnut);max-width:56ch}
.step__you{border-left:1px solid var(--sand);padding-left:18px}
.step__you b{display:block;margin-top:8px;font-size:14px;font-weight:400;color:var(--slate)}
@media(max-width:880px){
  .step{grid-template-columns:44px 1fr}
  .step__you{grid-column:2;border-left:0;padding-left:0;border-top:1px solid var(--sand);padding-top:14px;margin-top:6px}
}

/* ---------- careers ----------------------------------------------------- */
.roles{margin-top:clamp(34px,6vh,60px)}
.role{
  display:grid;grid-template-columns:1fr 1.5fr auto;gap:clamp(18px,4vw,50px);
  align-items:start;padding:30px 0;border-top:1px solid var(--rule);
}
.role:last-of-type{border-bottom:1px solid var(--rule)}
.role h3{font-family:var(--font-display);font-size:clamp(21px,2.6vw,30px);font-weight:300}
.role p{margin-top:12px;font-size:15px;color:var(--walnut);max-width:54ch}
.role__meta{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--oak);line-height:2}
@media(max-width:880px){.role{grid-template-columns:1fr;gap:12px}}

/* ---------- contact ----------------------------------------------------- */
.contact{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(34px,6vw,90px);align-items:start;padding-bottom:var(--section)}
@media(max-width:980px){.contact{grid-template-columns:1fr;gap:44px}}

.form fieldset{border:0;padding:0;margin:0 0 34px}
.form legend{padding:0;margin-bottom:18px}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:620px){.fieldrow{grid-template-columns:1fr}}
.field{display:block;margin-bottom:20px}
.field > span{display:block;margin-bottom:8px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--oak)}
.field > span b{color:var(--clay);font-weight:400}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--sand);
  padding:10px 0;font-size:16px;font-weight:300;outline:none;border-radius:0;
  transition:border-color var(--quick);
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--oak) 50%),linear-gradient(135deg,var(--oak) 50%,transparent 50%);
  background-position:calc(100% - 11px) 20px,calc(100% - 6px) 20px;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.field textarea{min-height:130px;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--slate)}
.field small{display:block;margin-top:8px;font-size:12px;color:var(--oak);line-height:1.6}
.hp{position:absolute;left:-9999px}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 30px;background:var(--slate);color:var(--wool);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  border-radius:999px;transition:background var(--quick),transform var(--quick) var(--ease-out);
}
.btn:hover{background:var(--walnut-deep);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--slate);border:1px solid var(--sand)}
.btn--ghost:hover{background:var(--slate);color:var(--wool);border-color:var(--slate)}
.formnote{margin-top:16px;font-size:12px;color:var(--oak)}
.formnote[role="status"]:not(:empty){margin-top:18px;color:var(--clay)}

.info dl{margin:0}
.info dt{margin-top:26px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--oak)}
.info dt:first-child{margin-top:0}
.info dd{margin:8px 0 0;font-size:16px;line-height:1.75}
.info dd a:hover{color:var(--clay)}

.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;gap:20px;
  font-family:var(--font-display);font-size:clamp(16px,1.9vw,21px);font-weight:300;
  transition:color var(--quick);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--clay)}
.faq summary i{font-style:normal;color:var(--oak);transition:transform var(--quick)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;max-width:70ch;color:var(--walnut);font-size:15px}

/* ---------- blog index -------------------------------------------------- */
.posts{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:clamp(28px,3.4vw,54px);padding-bottom:var(--section);
}
/* one article on its own should not sit as a lone card in a wide column */
.posts:has(> .post:only-child){grid-template-columns:minmax(0,760px)}
.post{display:block}
.post__fig{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--linen);
  border-radius:var(--radius-sm);
}
.post__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.post:hover .post__fig img{transform:scale(1.045)}
.post__body{padding-top:18px}
.post__body h2{
  margin-top:12px;font-size:clamp(21px,2.5vw,30px);max-width:24ch;
  transition:color var(--quick);
}
.post:hover .post__body h2{color:var(--clay)}
.post__excerpt{margin-top:14px;max-width:56ch;font-size:15px;color:var(--walnut)}
.post__more{
  margin-top:18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oak);display:flex;gap:10px;align-items:center;
}
.post:hover .post__more{color:var(--clay)}
.post__more span:last-child{transition:transform var(--quick)}
.post:hover .post__more span:last-child{transform:translateX(5px)}
.posts__empty{padding-bottom:var(--section);color:var(--walnut);max-width:48ch}
.posts__empty a{border-bottom:1px solid var(--sand)}

/* ---------- article ----------------------------------------------------- */
/* one measure holds the whole page: header, hero and body share --measure,
   so the article reads as a single column rather than a header over a page */
.phead--article{--measure:74ch;max-width:var(--measure);padding-bottom:clamp(26px,4vh,42px)}
.phead--article h1{font-size:clamp(32px,4.8vw,58px);max-width:22ch}
.phead--article .label a:hover{color:var(--clay)}
.article__byline{
  margin-top:26px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oak);
}
.article__hero{margin:0 0 clamp(34px,6vh,60px);max-width:1100px}
.article__hero img{width:100%;height:auto;border-radius:var(--radius-sm)}
.article__hero figcaption,.article__fig figcaption{
  margin-top:12px;font-size:12px;color:var(--oak);max-width:64ch;
}

.article{max-width:74ch;padding-bottom:clamp(30px,5vh,48px)}
.article h2{
  margin-top:clamp(44px,6vh,68px);font-size:clamp(24px,3vw,36px);max-width:24ch;
}
.article h3{margin-top:clamp(30px,4vh,44px);font-size:clamp(18px,2.1vw,23px)}
.article p{margin-top:18px;color:var(--walnut);font-size:clamp(15px,1.25vw,17px)}
.article h2 + p,.article h3 + p{margin-top:14px}
.article a{color:var(--clay);border-bottom:1px solid rgba(138,90,43,.34)}
.article a:hover{border-bottom-color:var(--clay)}
.article strong{font-weight:500;color:var(--slate)}
.article ul{margin-top:18px;display:grid;gap:10px}
.article li{
  position:relative;padding-left:22px;color:var(--walnut);
  font-size:clamp(15px,1.25vw,17px);
}
.article li::before{
  content:"";position:absolute;left:2px;top:.72em;
  width:7px;height:1px;background:var(--amber);
}
.article__fig{margin:clamp(34px,5vh,52px) 0 0}
.article__fig img{width:100%;height:auto;border-radius:var(--radius-sm)}

/* tables are the one thing wider than the measure — let them scroll alone */
.article__table{margin-top:26px;overflow-x:auto;border-top:1px solid var(--rule)}
.article__table table{border-collapse:collapse;width:100%;min-width:540px}
.article__table th,.article__table td{
  text-align:left;vertical-align:top;padding:16px 20px 16px 0;
  border-bottom:1px solid var(--rule);font-size:14px;color:var(--walnut);
}
.article__table th{
  font-family:var(--font-display);font-weight:400;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--oak);
  padding-top:18px;
}

.article__tags{
  display:flex;flex-wrap:wrap;gap:8px;max-width:74ch;
  padding-bottom:clamp(34px,6vh,60px);
}
.article__tags li{
  padding:7px 14px;border:1px solid var(--sand);border-radius:999px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--oak);
}

/* ---------- project detail ---------------------------------------------- */
.hero{position:relative;height:86svh;min-height:460px;background:var(--void);overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--scrim),.44) 0%,transparent 34%,rgba(var(--scrim),.72) 100%)}
.hero__cap{position:absolute;left:0;right:0;bottom:clamp(28px,6vh,60px);z-index:2;color:var(--bone)}
.hero__cap h1{font-size:clamp(36px,6.5vw,80px)}
.hero__cap .label{color:rgba(231,222,208,.7);margin-bottom:14px}
.hero__cap p{margin-top:12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(231,222,208,.7)}

.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;padding-block:clamp(30px,5vh,48px);border-bottom:1px solid var(--rule)}
.specs div b{display:block;margin-top:9px;font-family:var(--font-display);font-size:18px;font-weight:300}

.gallery{display:grid;gap:clamp(14px,2vw,26px);padding-bottom:var(--section)}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;border-radius:var(--radius-sm)}
.gallery figcaption{margin-top:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--oak)}
.gallery--duo{grid-template-columns:1fr 1fr}
@media(max-width:760px){.gallery--duo{grid-template-columns:1fr}}

.projnav{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--rule);padding-block:clamp(28px,5vh,52px)}
.projnav a{display:block;transition:color var(--quick)}
.projnav a:hover{color:var(--clay)}
.projnav a:last-child{text-align:right}
.projnav b{display:block;margin-top:9px;font-family:var(--font-display);font-size:clamp(20px,2.6vw,30px);font-weight:300}

/* ---------- CTA + footer ------------------------------------------------ */
.cta{padding-block:clamp(60px,11vh,140px);text-align:center;background:var(--void);color:var(--bone)}
.cta h2{font-size:clamp(28px,5vw,62px);max-width:20ch;margin-inline:auto}
.cta h2 em{font-style:normal;color:var(--amber)}
.cta .btn{margin-top:34px;background:var(--bone);color:var(--slate)}
.cta .btn:hover{background:var(--amber);color:var(--void)}

.foot{background:var(--void);color:var(--bone);border-top:1px solid var(--hairline-dark);padding-block:clamp(44px,7vh,76px)}
.foot__top{display:grid;grid-template-columns:repeat(2,minmax(0,260px));gap:clamp(40px,8vw,120px)}
@media(max-width:560px){.foot__top{grid-template-columns:1fr;gap:36px}}
.foot .label{color:rgba(231,222,208,.42)}
.foot ul{margin-top:14px}
.foot li{margin-top:9px;font-size:14px;color:rgba(231,222,208,.72)}
.foot a:hover{color:var(--amber)}
/* enquiries: an icon beside each line, both following the link colour */
.foot__contact li{margin-top:13px}
.foot__contact a{display:inline-flex;align-items:center;gap:11px}
.foot__contact svg{flex:none;opacity:.7;transition:opacity var(--quick)}
.foot__contact a:hover svg{opacity:1}
.foot__bot{
  margin-top:clamp(38px,6vh,66px);padding-top:22px;border-top:1px solid var(--hairline-dark);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(231,222,208,.45);
}

/* ---------- reveal on scroll -------------------------------------------- */
.rise{opacity:0;transform:translateY(22px);transition:opacity var(--slow) var(--ease-out),transform var(--slow) var(--ease-out)}
.rise.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rise{opacity:1;transform:none}
  .reel__slide img{transform:none}
}